/* FLEXX³ – Stylesheet der App-Hülle. Farbschema über CSS-Variablen; Dunkelmodus per [data-theme="dark"] auf . */ /* CI-Farben: Nachtblau #0B1320 · Navy #1A2332 · Signalrot #FF3B30 · Cyan #00D4E0 · Hellgrau #E6E8EB · Schiefer #64748B (siehe branding/flexx3-ci.png) */ :root { --brand: #1a2332; /* Navy (Primäraktionen) */ --brand-dark: #0b1320; --accent: #00d4e0; /* Cyan */ --anthracite: #0b1320; --bg: #f2f4f6; --card: #ffffff; --text: #0b1320; --muted: #64748b; --border: #e6e8eb; --danger: #d92a20; /* abgedunkeltes Signalrot (Kontrast auf hell) */ --ok: #2e7d32; --warn-bg: #fdeeed; --shadow: 0 1px 3px rgba(11, 19, 32, 0.10), 0 4px 14px rgba(11, 19, 32, 0.06); --radius: 14px; --nav-height: 62px; } [data-theme='dark'] { --brand: #00d4e0; --brand-dark: #00b5c4; --accent: #ff3b30; --anthracite: #e6e8eb; --bg: #0b1320; --card: #1a2332; --text: #e6e8eb; --muted: #8b99ad; --border: #2a3648; --danger: #ff6b62; --ok: #81c784; --warn-bg: #33191c; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3); } /* ---------- Farbdesigns (data-design; wirken je in Hell UND Dunkel) ---------- 'klassik' = Basis oben (CI). Die Design-Selektoren sind spezifischer ([data-theme][data-design] = 0,2,0) und überschreiben die Basis (0,1,0). */ /* MODERN – kühles Petrol/Graphit, klar */ [data-theme='light'][data-design='modern'] { --brand: #216478; --brand-dark: #184c5c; --accent: #4a9bb5; --anthracite: #1e2a30; --bg: #f2f5f6; --card: #ffffff; --text: #1e2a30; --muted: #5f6f77; --border: #dde5e8; --warn-bg: #e8f0f3; } [data-theme='dark'][data-design='modern'] { --brand: #5bb0c9; --brand-dark: #3f92ab; --accent: #4a9bb5; --anthracite: #eef3f5; --bg: #10161a; --card: #191f24; --text: #eef3f5; --muted: #9aa9b1; --border: #29343b; --warn-bg: #17242b; } /* FREUNDLICH – warm, einladend (Terracotta/Bernstein) */ [data-theme='light'][data-design='freundlich'] { --brand: #bd5f3c; --brand-dark: #9e4c2e; --accent: #e2a94a; --anthracite: #3a2e26; --bg: #faf4ec; --card: #fffdf9; --text: #3a2e26; --muted: #857567; --border: #ece0d1; --warn-bg: #f6ecdd; } [data-theme='dark'][data-design='freundlich'] { --brand: #e08a63; --brand-dark: #c06d4a; --accent: #e2a94a; --anthracite: #f5ece3; --bg: #1c1713; --card: #271f19; --text: #f5ece3; --muted: #b3a596; --border: #3a3027; --warn-bg: #2e2418; } /* NATUR – Rebgrün, frisch und ruhig */ [data-theme='light'][data-design='natur'] { --brand: #2f7d54; --brand-dark: #24623f; --accent: #7fb98f; --anthracite: #1f2b23; --bg: #f1f6f0; --card: #ffffff; --text: #1f2b23; --muted: #5e6f63; --border: #dbe7d9; --warn-bg: #eef4ea; } [data-theme='dark'][data-design='natur'] { --brand: #63b587; --brand-dark: #479a6c; --accent: #7fb98f; --anthracite: #eef4ee; --bg: #121712; --card: #1a211b; --text: #eef4ee; --muted: #9db0a2; --border: #2a332c; --warn-bg: #1a2417; } /* AMETHYST – elegantes Violett */ [data-theme='light'][data-design='amethyst'] { --brand: #6d4a9c; --brand-dark: #573a7f; --accent: #b79ad6; --anthracite: #241f2e; --bg: #f5f2f8; --card: #ffffff; --text: #241f2e; --muted: #6b6478; --border: #e6dfee; --warn-bg: #efeaf5; } [data-theme='dark'][data-design='amethyst'] { --brand: #a488d6; --brand-dark: #8a6dc0; --accent: #b79ad6; --anthracite: #efeaf5; --bg: #161320; --card: #1f1a2a; --text: #efeaf5; --muted: #a79fb8; --border: #322b40; --warn-bg: #241d33; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; padding: 0; /* Kein horizontales Scrollen des GANZEN Dokuments (sonst liegt auf Android ein Dokument-Scrollbalken unten über der Leiste und die Seite lässt sich seitlich schieben → fixierte Leiste „wandert"). `clip` unterbindet es, ohne — anders als `hidden` — position:fixed zu brechen (vertikal wird weiter normal gescrollt). Innere Scroll-Container (Plantafel etc.) bleiben unberührt. */ overflow-x: clip; } /* ---------- Schrift: Inter wie VINORUM (1.0.52, Betreiber) ---------- Lokal ausgeliefert, kein externer Dienst: Inter (SIL Open Font License) als variable Schrift 400–700, zwei Latin-Subsets aus VINORUM übernommen. Der Browser lädt latin-ext erst, wenn ein Zeichen daraus gebraucht wird. Vorher stand hier 'Montserrat' — die Datei lag nie bei, gerendert wurde also der Fallback (Century Gothic unter Windows). */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../vendor/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../vendor/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Formularelemente erben die Schrift NICHT von selbst — deshalb ausdrücklich, wie im VINORUM-Layout „kompakt": leicht engere Laufweite im Text, deutlich engere in Überschriften, Beträge in gleicher Ziffernbreite. */ body, input, select, textarea, button { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; letter-spacing: -0.006em; } h1, h2, h3, .sheet-title, .module-name, strong, b { letter-spacing: -0.02em; } .kpi-val, td, .dash-z-wert { font-variant-numeric: tabular-nums; } body { background: var(--bg); color: var(--text); min-height: 100vh; padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px)); } /* ---------- Kopfzeile ---------- */ .app-header { background: var(--card); border-bottom: 1px solid var(--border); padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 8px; position: sticky; top: 0; z-index: 20; } .brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .brand-left { display: flex; align-items: center; gap: 10px; } .brand-logo { height: 26px; width: auto; display: block; } /* Kopfzeile zeigt die kompakte Wortmarke (ohne Claim); im Dunkelmodus hell. */ [data-theme='dark'] .brand-logo { content: url('../branding/logo_wordmark_light.png'); } /* Kundenlogo (per JS gesetzt): Dunkelmodus-Tausch aufheben, src gilt für beide Themes */ [data-theme='dark'] .brand-logo.is-custom { content: normal; } .demo-badge { background: var(--accent); color: #3a2f10; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 999px; } /* Demo-Umgebung: Abzeichen einblenden + dezenter Farbstreifen an der Kopfzeile. Die eigene Datenbank je Host regelt das Backend (config..php). */ body.is-demo .app-header { box-shadow: inset 0 3px 0 var(--brand); } .brand-actions { display: flex; align-items: center; gap: 6px; } .header-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } .subtitle { margin: 0; font-size: 13px; color: var(--muted); } /* ---------- Sprachumschalter (Dropdown) ---------- */ .lang-switch-host { position: relative; } /* Ruhezustand transparent wie die Icon-Buttons daneben (.icon-btn) — sichtbare Fläche erst beim Hover/Fokus; das Panel bleibt eine Karte. */ .lang-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; border-radius: 999px; padding: 6px 10px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); } .lang-btn:hover, .lang-btn:focus-visible { background: color-mix(in srgb, var(--text) 8%, transparent); } .lang-flag { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); } .lang-caret-wrap { display: inline-flex; } .lang-caret { opacity: 0.55; } .lang-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 60; min-width: 168px; } .lang-menu[hidden] { display: none; } .lang-item { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text); text-align: left; } .lang-item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); } .lang-item.is-active { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-weight: 700; } /* ---------- Buttons ---------- */ .icon-btn { border: none; background: none; color: var(--text); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .icon-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); } .icon-btn svg { width: 22px; height: 22px; fill: currentColor; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-weight: 600; padding: 10px 18px; border-radius: 12px; cursor: pointer; } .btn svg { width: 18px; height: 18px; fill: currentColor; } .btn:hover { border-color: var(--brand); } .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); } .btn.block { width: 100%; } .btn:disabled { opacity: 0.5; cursor: default; } /* ---------- Formulare ---------- */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 5px; } .field input, .field select, .field textarea { width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; } /* Passwortfeld mit „Auge" zum Ein-/Ausblenden */ .pw-wrap { position: relative; } .pw-wrap input { padding-right: 44px; } .pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 32px; height: 32px; border: none; background: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; } .pw-eye:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } .pw-eye svg { width: 20px; height: 20px; fill: currentColor; } /* Textlink-Button (z. B. „Passwort vergessen?") */ .link-btn { display: block; margin: 12px auto 0; background: none; border: none; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; padding: 4px; } .link-btn:hover { text-decoration: underline; } /* Hinweistext im Sheet-Dialog */ .sheet-hint { color: var(--muted); font-size: 14px; margin: 0 0 14px; } .sheet-section { font-weight: 700; font-size: 13px; color: var(--muted); margin: 4px 0 8px; text-transform: uppercase; letter-spacing: 0.03em; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Login-Kontextzeile (Weingutname / Operator) */ .login-context { margin: -8px 0 16px; color: var(--brand); font-weight: 700; } /* „Weingut nicht verfügbar" */ .unavailable-ic { color: var(--accent); margin: 4px auto 8px; } .unavailable-ic svg { width: 44px; height: 44px; fill: currentColor; } /* ---------- FLEXX³ ADMINISTRATION ---------- */ .admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .admin-head .hint { margin: 2px 0 0; } .tenant-list { display: flex; flex-direction: column; gap: 10px; } .tenant-item { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); flex-wrap: wrap; } .tenant-main { flex: 1; min-width: 180px; } .tenant-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tenant-name { font-weight: 700; } .tenant-sub { color: var(--muted); font-size: 13px; margin-top: 2px; font-variant-numeric: tabular-nums; } /* ---------- Hauptbereich / Karten ---------- */ /* Mobil/Tablet: zentrierte, lesbare Spalte. Desktop (ab 1024px): volle Breite – siehe Media-Query unten (wie CURENA). */ .view { max-width: 760px; margin: 0 auto; padding: 16px; } /* Desktop nutzt die volle Bildschirmbreite, nur angenehme Seitenränder. Dialoge bleiben bewusst schmal/lesbar. */ @media (min-width: 1024px) { .view { max-width: none; padding: 20px 28px calc(var(--nav-height) + 20px); } } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; } .card h2 { margin: 0 0 10px; font-size: 18px; } .card p.hint { color: var(--muted); font-size: 14px; margin: 6px 0 0; } .login-card { max-width: 380px; margin: 8vh auto 0; text-align: center; } .login-logo { width: min(280px, 78%); height: auto; margin: 4px auto 20px; display: block; } [data-theme='dark'] .login-logo { content: url('../branding/logo_flexx3_dark.png'); } /* Kundenlogo am Anmeldebildschirm: kein Theme-Tausch, Höhe begrenzen */ .login-logo.is-custom { width: auto; max-width: min(280px, 78%); max-height: 96px; } [data-theme='dark'] .login-logo.is-custom { content: normal; } .login-card form { text-align: left; } .form-error { color: var(--danger); font-size: 14px; margin: 4px 0 10px; min-height: 18px; } .version-note { text-align: center; color: var(--muted); font-size: 12px; margin-top: 18px; } /* Dashboard-Fußzeile: Handbuch-Link + Version, ganz unten */ .dash-footer { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 12.5px; margin: 26px 0 6px; } .dash-footer-link { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); text-decoration: none; font-weight: 600; } .dash-footer-link:hover { text-decoration: underline; } .dash-footer-link svg { width: 15px; height: 15px; } .dash-footer-sep { opacity: 0.5; } /* ---------- Banner (offline / Update / Installieren) ---------- */ .banner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 9px 16px; font-size: 14px; } .banner .btn { padding: 5px 12px; border-radius: 9px; } .banner.offline { background: var(--warn-bg); color: var(--text); } .banner.update { background: var(--brand); color: #fff; } .banner.update .btn { background: #fff; color: var(--brand); border-color: #fff; } .banner.install { background: var(--card); border-bottom: 1px solid var(--border); } /* ---------- Untere Navigation ---------- */ .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--card); border-top: 1px solid var(--border); display: flex; /* Seit 1.0.45 eine feste Zeichenreihe: gleichmäßig verteilt und mittig. */ align-items: center; justify-content: space-between; padding: 0 6px; z-index: 20; overflow: hidden; /* Eigene Compositor-Ebene: verhindert Repaint-„Ruckeln"/-Drift der fixierten Leiste beim Scrollen (Android/iOS). Bricht position:fixed NICHT (Transform liegt auf der Leiste selbst, nicht auf einem Vorfahren). */ transform: translateZ(0); backface-visibility: hidden; } .bottom-nav:empty { display: none; } /* Die frühere horizontal scrollende Tab-Reihe ist mit 1.0.45 entfallen: Die untere Leiste trägt jetzt eine FESTE Reihe aus Zeichen (.nav-ic, weiter unten) — Burger, Dashboard, die zuletzt benutzten Bereiche, Einstellungen. Alles Übrige steht im Menü, das der Burger öffnet. */ /* ---------- Toast ---------- */ .toast { position: fixed; left: 50%; bottom: calc(var(--nav-height) + 18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(12px); background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 50; max-width: min(90vw, 480px); text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- Modal ---------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(20, 12, 16, 0.5); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 40; } .modal { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; width: 100%; max-width: 440px; max-height: 85vh; overflow: auto; } .modal h3 { margin: 0 0 12px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; } /* ---------- Einstellungen ---------- */ .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .settings-row:last-child { border-bottom: none; } .settings-row .label { font-weight: 600; } .settings-row .sub { color: var(--muted); font-size: 13px; } .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .seg button { border: none; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; cursor: pointer; } .seg button.is-active { background: var(--brand); color: #fff; } /* ---------- Dashboard / Modul-Roadmap ---------- */ .hero { border-left: 4px solid var(--accent); } .stage-title { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand); } /* Erklärtext in Klammern direkt hinter dem Listentitel (z. B. Rechnungen). */ .stage-title-zusatz { font-size: 11.5px; letter-spacing: 0; text-transform: none; font-weight: normal; color: var(--muted); } .module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .module-tile { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); } .module-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--anthracite); } .module-icon svg { width: 22px; height: 22px; fill: currentColor; } .module-text { min-width: 0; } .module-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .module-name { font-weight: 700; } .module-desc { color: var(--muted); font-size: 13px; margin-top: 2px; } /* ---------- Dashboard: Überblick-Kennzahlen ---------- */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } /* Dashboard-Kacheln: Kopfzeile mit „Nicht mehr anzeigen" + Wetter-Sektion */ .dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dash-card-head .stage-title { margin-bottom: 0; } .dash-hide { opacity: 0.45; } .dash-hide:hover { opacity: 1; } .dash-wetter { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; } .dash-wetter-quelle { margin: 0 0 -8px; font-size: 11.5px; } .dash-wetter-station { border-top: 1px solid var(--border); padding-top: 10px; } .dash-wetter-station:first-child { border-top: none; padding-top: 0; } .dash-wetter-kopf { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-bottom: 6px; } /* Hide-Symbol je Station (rechts, dezent bis Hover) */ .dash-wetter-hide { margin-left: auto; width: 30px; height: 30px; opacity: 0.5; flex: none; } .dash-wetter-hide:hover { opacity: 1; } .dash-wetter-hide svg { width: 17px; height: 17px; } /* Eine Zeile: aktuelle Werte + (abgesetzt) Vorhersage-Kacheln in gleicher Größe. Anzahl der Vorhersage-Tage rechnet dashWetterZeile aus der Breite (2–7). */ .dash-wetter-zeile { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; } .dash-wetter-zeile .cl-tile { min-width: 96px; flex: 0 0 auto; } .dash-wetter-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--border); } .dash-fc-tile { background: color-mix(in srgb, var(--accent) 12%, transparent); } .dash-fc-tmin { font-weight: 400; font-size: 13px; color: var(--muted); } .kpi-tile { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 12px 14px; text-align: left; cursor: pointer; font: inherit; color: var(--text); border: 1px solid var(--border); border-radius: 12px; background: var(--bg); } .kpi-tile:hover { border-color: var(--brand); } .kpi-ic { display: inline-flex; margin-bottom: 4px; color: var(--brand); } .kpi-ic svg { width: 20px; height: 20px; fill: currentColor; } .kpi-val { font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .kpi-label { font-size: 12.5px; color: var(--muted); } /* Aufmerksamkeits-Kennzahl (überfällig, Bestand niedrig …) hervorgehoben */ .kpi-tile.is-accent { border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: color-mix(in srgb, var(--brand) 7%, transparent); } .kpi-tile.is-accent .kpi-val { color: var(--brand); } /* Hinweistext unter einem Formularfeld */ .field-hint { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; } /* Druckvorlagen: Formular links, Live-PDF-Vorschau rechts */ .dv-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 24px; align-items: start; } @media (max-width: 1000px) { .dv-grid { grid-template-columns: 1fr; } } .dv-form .field { margin-bottom: 12px; } .dv-color { width: 64px; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); cursor: pointer; } .sd-layout-hint { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); } /* Shop-Kategorie-Zuordnung im Artikel-Dialog (Mehrfachauswahl, Kinder eingerückt) */ .sk-check-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); } .sk-check-list .check-row { margin: 0; padding: 3px 0; } .sk-check-list .check-row.is-sub { padding-left: 22px; } .dv-bp-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .dv-bp-label { flex: none; min-width: 140px; font-size: 13.5px; } .dv-bp-file { font-size: 12.5px; max-width: 230px; } .dv-bp-status { font-size: 12px; color: var(--muted); padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; } .dv-bp-status.is-ok { color: #1b7f3b; border-color: color-mix(in srgb, #1b7f3b 40%, transparent); } .dv-preview-box { position: sticky; top: 12px; } .dv-preview-head { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 10px; } .dv-preview-head .field { margin-bottom: 0; flex: 1; } .dv-preview { width: 100%; height: 620px; border: 1px solid var(--border); border-radius: 12px; background: #525659; } /* Shop-Einstellungen (Mandant): Zahlart-Zeile = Checkbox + Hinweistext daneben */ .shop-zahlart { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 8px; } .shop-zahlart .check-row { margin: 0; } @media (max-width: 700px) { .shop-zahlart { grid-template-columns: 1fr; gap: 4px; } } /* Website-Bilder der Storefront (Hero-Slider + „Über uns"): Vorschau + Upload/Entfernen */ .shop-bild-zeile { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px dotted var(--border); } .shop-bild-preview { flex: none; width: 86px; height: 48px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--muted) 12%, transparent); display: grid; place-items: center; } .shop-bild-preview img { width: 100%; height: 100%; object-fit: cover; } .shop-bild-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; } .shop-bild-zeile .btn { padding: 6px 12px; } @media (max-width: 700px) { .shop-bild-zeile { flex-wrap: wrap; } } /* Shop-Design (Operator): Formular links, Live-Mockup rechts (nutzt .dv-grid) */ .sd-field input[type='color'] { width: 100%; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); cursor: pointer; } .sd-preview { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: 12.5px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .sdp-kopf { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; } .sdp-marke { font-weight: 700; letter-spacing: 0.06em; } .sdp-links span { margin-left: 12px; } .sdp-nav { display: flex; gap: 14px; padding: 8px 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .sdp-hero { padding: 26px 14px; text-align: center; background: linear-gradient(135deg, #6d6d6d, #3c3c3c); } .sdp-hero-text { font-size: 15px; font-weight: 700; letter-spacing: 0.12em; } .sdp-inhalt { padding: 14px; display: flex; flex-direction: column; gap: 10px; } .sdp-h1 { font-size: 17px; font-weight: 700; } .sdp-h2 { font-size: 14px; font-weight: 700; } .sdp-h3 { font-size: 13px; font-weight: 600; } .sdp-karte { border-radius: 10px; padding: 10px 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 6px; } .sdp-text { font-size: 12px; } .sdp-btnrow { display: flex; gap: 8px; flex-wrap: wrap; } .sdp-btn { display: inline-block; padding: 5px 11px; border-radius: 8px; font-size: 11.5px; font-weight: 600; } .sdp-alter { border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .sdp-alter-text { font-size: 12px; } .sdp-footer { padding: 10px 14px; font-size: 11.5px; text-align: center; } /* Artikel: E-Label-QR + Flaschenfoto im Dialog */ .elabel-qr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; } .elabel-qr img { border: 1px solid var(--border); border-radius: 10px; background: #fff; } .artikel-foto { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .artikel-foto img { max-height: 180px; max-width: 60%; border-radius: 10px; border: 1px solid var(--border); } /* Kontoauszüge einlesen: Zahlungseingang-Zeilen mit Rechnungszuordnung */ .bk-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .bk-row:last-of-type { border-bottom: none; } .bk-check { flex: none; padding-top: 3px; } .bk-main { flex: 1; min-width: 0; } .bk-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .bk-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bk-betrag { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; } .bk-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bk-ziel { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .bk-ziel select { flex: 1; min-width: 0; } .bk-chip { flex: none; } /* Gutschrift erstellen: gleiche Positionszeilen wie Auftrag/Angebot (.pos-row), nur ohne Rabatt-/Positionsart-Spalte. */ .pos-row.is-gsrow { grid-template-columns: 22px minmax(0, 1fr) 96px 108px 38px; grid-template-areas: 'handle main menge preis x'; } @media (max-width: 700px) { .pos-row.is-gsrow { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) auto 38px; grid-template-areas: 'handle main main main x' '. menge preis . .'; } } /* Rechte-Matrix im Mitarbeiter-Dialog */ .perm-matrix { border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px 10px; margin-bottom: 12px; } .perm-rubrik { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand); margin: 12px 0 4px; } .perm-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; flex-wrap: wrap; } .perm-main { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; } .perm-extra { margin-left: auto; display: inline-flex; gap: 14px; } .perm-extra-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); cursor: pointer; white-space: nowrap; } /* ---------- Modul Auswertungen ---------- */ .kpi-tile.is-static { cursor: default; } .kpi-tile.is-static:hover { border-color: var(--border); } .kpi-tile.is-static.is-accent:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); } .aw-section { margin-top: 20px; } .aw-chart svg { width: 100%; height: auto; display: block; } .aw-bar-rect { fill: var(--brand); opacity: 0.85; } .aw-bar-rect.is-zero { fill: var(--border); opacity: 0.6; } .aw-bar-val { font-size: 10px; fill: var(--muted); font-variant-numeric: tabular-nums; } .aw-bar-lbl { font-size: 10.5px; fill: var(--muted); } .aw-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 26px; } .aw-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; } .aw-rank { flex: none; width: 20px; color: var(--muted); font-variant-numeric: tabular-nums; } .aw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .aw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aw-sub { color: var(--muted); font-size: 12px; } .aw-track { display: block; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 10%, transparent); overflow: hidden; } .aw-fill { display: block; height: 100%; border-radius: 999px; background: var(--brand); opacity: 0.8; } .aw-val { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } /* KPI-Kachel „Achtung" (z. B. offene Posten > 0) in Rot (hell + dunkel via var) */ .kpi-tile.is-danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 7%, transparent); } .kpi-tile.is-danger .kpi-val, .kpi-tile.is-danger .kpi-ic { color: var(--danger); } .kpi-tile.is-static.is-danger:hover { border-color: color-mix(in srgb, var(--danger) 45%, transparent); } /* Umsatz-Balkendiagramm (reines CSS: div-Balken je Monat, 0-Linie = border) */ .aw-balken { display: flex; align-items: flex-end; gap: 6px; margin-top: 14px; } .aw-bal-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; } .aw-bal-plus { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; border-bottom: 1px solid var(--border); } .aw-bal-minus { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .aw-bal-bar { display: block; width: 70%; max-width: 34px; border-radius: 4px 4px 0 0; background: var(--brand); opacity: 0.85; } .aw-bal-bar.is-neg { border-radius: 0 0 4px 4px; background: var(--danger); } .aw-bal-wert { font-size: 10px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .aw-bal-wert.is-neg { color: var(--danger); } .aw-bal-lbl { margin-top: 4px; text-align: center; font-size: 10.5px; color: var(--muted); } /* Schmale Screens: Wert-Beschriftung weglassen (Tooltip bleibt), engere Spalten */ @media (max-width: 700px) { .aw-bal-wert { display: none; } .aw-balken { gap: 3px; } } /* Kompakte Auswertungs-Tabellen (Stunden, Nachkalkulation): scrollen bei Bedarf im EIGENEN Container (.aw-scroll), nie die Seite horizontal */ .aw-scroll { overflow-x: auto; margin-top: 8px; } .aw-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .aw-tabelle th, .aw-tabelle td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; } .aw-tabelle th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); font-weight: 600; } .aw-tabelle .is-links { text-align: left; } .aw-tabelle .aw-zelle-breit { white-space: normal; min-width: 160px; } .aw-tabelle tr.is-clickable { cursor: pointer; } .aw-tabelle tr.is-clickable:hover td { background: color-mix(in srgb, var(--brand) 6%, transparent); } .aw-tabelle td.is-ueber { color: var(--danger); font-weight: 700; } .aw-fahrt { margin-left: 4px; font-size: 11px; color: var(--muted); } .aw-leer { color: var(--muted); } /* Dokumente-Liste: Größe + Datum rechts in der Zeile */ .dok-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Rechnung erstellen: gesperrte Rechnungsarten ausgegraut (title erklärt warum) */ .check-row.is-disabled { opacity: 0.5; } /* ---------- Dokument-Upload: Drop-Zone ---------- */ .doc-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px 16px; text-align: center; cursor: pointer; border: 2px dashed var(--border); border-radius: 12px; background: var(--bg); color: var(--muted); } .doc-drop:hover { border-color: var(--brand); } .doc-drop.is-dragover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--text); } .doc-drop.has-file { border-style: solid; color: var(--text); } .doc-drop-ic { display: inline-flex; } .doc-drop-ic svg { width: 30px; height: 30px; fill: currentColor; } .doc-drop-text { font-size: 14px; overflow-wrap: anywhere; } .doc-drop-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .chip { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .chip-live { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); } .chip-soon { background: color-mix(in srgb, var(--accent) 45%, transparent); color: #6a5312; } .chip-plan { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); } [data-theme='dark'] .chip-soon { color: var(--accent); } /* Webshop-Bestellung: Icon in der Auftragsliste (weinrot) + Herkunfts-Chip im Formular */ .module-icon.is-shop-order { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); } [data-theme='dark'] .module-icon.is-shop-order { color: color-mix(in srgb, var(--brand) 55%, #fff); } .chip-shop-order { display: inline-flex; align-items: center; gap: 5px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); } .chip-shop-order svg { width: 13px; height: 13px; fill: currentColor; } [data-theme='dark'] .chip-shop-order { color: color-mix(in srgb, var(--brand) 55%, #fff); } /* ---------- „Was ist neu?"-Popup (Bottom-Sheet, wie CURENA) ---------- */ /* Von unten eingeschoben statt zentriert. */ .sheet-backdrop { align-items: flex-end; padding: 0; } .modal-changelog { width: 100%; max-width: 560px; padding: 0; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px 18px 0 0; animation: sheetUp 0.22s ease; } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .cl-title { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; padding: 18px 18px 12px; border-bottom: 1px solid var(--border); } .cl-title-ic { display: inline-flex; flex: none; } .cl-title-ic svg { width: 22px; height: 22px; fill: var(--brand); } .cl-scroll { flex: 1; overflow-y: auto; padding: 14px 18px; } .cl-version { margin-bottom: 16px; } .cl-version:last-child { margin-bottom: 0; } .cl-vhead { font-size: 12.5px; font-weight: 700; color: var(--brand); margin-bottom: 6px; } .cl-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; } .cl-list li { font-size: 14px; line-height: 1.45; } .cl-ok { margin: 8px 18px calc(16px + env(safe-area-inset-bottom, 0px)); } /* ---------- Generischer Bottom-Sheet-Dialog (z. B. Passwort ändern) ---------- */ .modal-sheet { width: 100%; max-width: 480px; padding: 0; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px 18px 0 0; animation: sheetUp 0.22s ease; } /* Klick auf den Backdrop schließt NICHT (Datenverlust-Schutz) – der Dialog „wackelt" stattdessen kurz, damit klar ist: Schließen über die Buttons. */ .is-nudge { animation: sheetNudge 0.3s ease; } @keyframes sheetNudge { 0%, 100% { transform: scale(1); } 30% { transform: scale(0.985); } 60% { transform: scale(1.004); } } .sheet-title { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; padding: 18px 18px 14px; border-bottom: 1px solid var(--border); } .sheet-title-ic { display: inline-flex; flex: none; } .sheet-title-ic svg { width: 22px; height: 22px; fill: var(--brand); } /* Rundes Schließen-X oben rechts in der Titelzeile */ .sheet-title-x { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .sheet-title-x svg { width: 20px; height: 20px; fill: currentColor; display: block; } .sheet-title-x:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); } /* Bestätigungsdialog (confirmModal) */ .confirm-msg { margin: 0 0 18px; line-height: 1.5; font-size: 15px; } @media (min-width: 860px) { .modal-sheet.confirm-sheet { max-width: 460px; } } /* Status-Chip + Pfeil-Button (nächster Status) oben rechts in der Titelzeile */ .sheet-title-status { margin-left: auto; flex: none; font-weight: 400; display: inline-flex; align-items: center; gap: 8px; } /* Statuswechsel = beschrifteter Akzent-Button (weinrot), kein neutraler Pfeil mehr. Das Verb ("Kommissionieren"/"Versenden"/"Als bezahlt") stand bisher nur im Tooltip. */ .status-advance { padding: 6px 13px; gap: 6px; background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; } .status-advance:hover { background: color-mix(in srgb, var(--brand) 85%, #000); border-color: color-mix(in srgb, var(--brand) 85%, #000); color: #fff; } .status-advance svg { width: 16px; height: 16px; fill: currentColor; display: block; } /* Status-Chip in der Titelzeile größer (11 → 13px) + farbiger Statuspunkt davor, damit der Status auf einen Blick lesbar ist (Punkt erbt die Status-Farbe). */ .sheet-title-status .chip { font-size: 13px; padding: 4px 11px; } .sheet-title-status [class*="chip-os-"] { display: inline-flex; align-items: center; gap: 6px; } .sheet-title-status [class*="chip-os-"]::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } /* Schmale Titelzeile (Handy): Label weg, nur der weinrote Pfeil bleibt; der Status-Bereich darf umbrechen (sonst überläuft er bei Webshop-Aufträgen mit langem Zahlart-Text — der Bereich ist am Desktop bewusst flex:none). */ @media (max-width: 600px) { .status-advance .advance-label { display: none; } .status-advance { padding: 6px 9px; } .sheet-title { flex-wrap: wrap; } .sheet-title-status { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; } } .sheet-body { overflow-y: auto; padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px)); } .sheet-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } /* Aktionen nebeneinander in einer Einstellungszeile */ .row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } /* ---------- Desktop: zentrierter Dialog statt Bottom-Sheet ---------- Auf Mobilgeräten bleibt das Sheet am unteren Rand (Daumen-Ergonomie); ab 860px wird daraus ein mittiger, breiter Dialog, und Formulare nutzen die Breite mit einem zweispaltigen Raster. */ @media (min-width: 860px) { .sheet-backdrop { align-items: center; padding: 32px; } .modal-sheet, .modal-changelog { max-height: min(86vh, 920px); border-radius: 18px; animation: dialogIn 0.18s ease; } .modal-sheet { max-width: min(720px, 92vw); } /* Breite Dialoge (z. B. Auftrag anlegen): wachsen dynamisch mit dem Bildschirm */ .modal-sheet.is-wide { max-width: clamp(720px, 80vw, 1240px); } .modal-changelog { max-width: 620px; } .sheet-title { padding: 20px 26px 14px; border-bottom: 1px solid var(--border); } .sheet-body { padding: 20px 26px 24px; } .cl-ok { margin-bottom: 18px; } /* Formulare zweispaltig: Standard = volle Zeile, einzelne Eingabefelder halbbreit; .grid2-Paare lösen sich ins Raster auf (display: contents). */ .sheet-body form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; align-items: start; } .sheet-body form > * { grid-column: 1 / -1; min-width: 0; } .sheet-body form > .field { grid-column: auto; } .sheet-body form > .field:has(textarea), .sheet-body form > .field:has(input[type='file']) { grid-column: 1 / -1; } .sheet-body form > .grid2 { display: contents; } .sheet-body form > .check-row { grid-column: auto; } .sheet-body form > .btn { justify-self: start; } } @keyframes dialogIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } } /* Ansprechpartner-Liste (Kunde anlegen/bearbeiten): Name + Telefon + Entfernen */ .contact-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .contact-row { display: flex; gap: 8px; align-items: center; } .contact-row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; } .contact-row input:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .contact-remove { flex: none; padding: 8px 10px; } .contact-remove svg { width: 18px; height: 18px; fill: currentColor; } /* ---------- Modul CRM ---------- */ .module-tile.is-clickable { cursor: pointer; } .module-tile.is-clickable:hover { border-color: var(--brand); } .tenant-item.is-clickable { cursor: pointer; } .tenant-item.is-clickable:hover { border-color: var(--brand); } .crm-search { margin-bottom: 12px; } .chip-vip { display: inline-flex; align-items: center; gap: 3px; background: var(--accent); color: #232323; border: none; } .chip-vip svg { width: 12px; height: 12px; fill: currentColor; } .cust-no { flex: none; font-size: 12px; color: var(--muted); align-self: center; } /* Geburtstags-Übersicht (nächste 14 Tage) */ .birthday-box { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; } .birthday-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; margin-bottom: 6px; } .birthday-title svg { width: 16px; height: 16px; fill: var(--brand); } .birthday-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 14px; cursor: pointer; } .birthday-row:hover { color: var(--brand); } .birthday-date { font-weight: 600; flex: none; } .birthday-when { margin-left: auto; color: var(--muted); font-size: 12px; } /* Checkbox-Zeilen (z. B. Modul-Schalter) */ .check-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; cursor: pointer; font-size: 15px; } /* Modul-Schalter im Mandanten-Dialog (FLEXX³ Administration) */ .module-checks { display: flex; flex-direction: column; gap: 0; padding: 2px 0; } .module-checks .check-row { margin: 4px 0; } .check-row input[type='checkbox'] { width: 18px; height: 18px; accent-color: var(--brand); flex: none; } /* Gefahren-Button (Löschen) links in den Sheet-Aktionen */ .btn.danger { color: #b3261e; border-color: #b3261e; } .btn.danger:hover { background: rgba(179, 38, 30, 0.08); } .btn.danger svg { fill: currentColor; width: 18px; height: 18px; } .sheet-actions .sheet-left { margin-right: auto; } /* ---------- Modul Lager ---------- */ .chip-low { background: rgba(179, 38, 30, 0.12); color: #b3261e; border: none; } .bestand-col { display: flex; flex-direction: column; align-items: flex-end; flex: none; align-self: center; } .bestand-wert { font-weight: 700; font-variant-numeric: tabular-nums; } .bestand-wert.is-low { color: #b3261e; } .buchen-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } .buchen-row input { flex: 1; min-width: 0; padding: 10px 12px; font: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); } .buchen-row input:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .journal-row { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 3px 0; color: var(--text); } .journal-date { color: var(--muted); flex: none; } .journal-delta { font-weight: 600; font-variant-numeric: tabular-nums; flex: none; min-width: 44px; text-align: right; } .journal-delta.is-plus { color: #1b7f3b; } .journal-delta.is-minus { color: #b3261e; } .journal-user { margin-left: auto; color: var(--muted); font-size: 12px; } /* ---------- Modul Aufträge ---------- */ .order-sum { flex: none; align-self: center; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Status-Chips je Auftragsstatus */ .chip-os-offen { background: rgba(216, 191, 146, 0.35); color: var(--text); border: none; } .chip-os-kommissionierung { background: rgba(46, 116, 181, 0.15); color: #2e74b5; border: none; } .chip-os-versendet { background: rgba(109, 35, 48, 0.12); color: var(--brand); border: none; } .chip-os-fakturiert { background: rgba(27, 127, 59, 0.14); color: #1b7f3b; border: none; } .chip-os-abgeschlossen { background: rgba(27, 127, 59, 0.14); color: #1b7f3b; border: none; } .chip-os-storniert { background: rgba(179, 38, 30, 0.12); color: #b3261e; border: none; } /* Positionszeilen im Anlegen-Dialog: festes Raster, damit die Spalten aller Zeilenarten (Artikel, Einmal-, Textposition) exakt untereinander stehen. */ .pos-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .pos-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 96px 108px 76px 126px 38px; grid-template-areas: 'handle main menge preis rabatt typ x'; gap: 8px; align-items: center; } /* Reine Textzeile: Text läuft über die Menge-/Preis-/Rabatt-Spalten */ .pos-row.is-textrow { grid-template-areas: 'handle main main main main typ x'; } .pos-handle { grid-area: handle; } .pos-main { grid-area: main; min-width: 0; } .pos-menge { grid-area: menge; } .pos-preis { grid-area: preis; } .pos-rabatt { grid-area: rabatt; } .pos-typtg { grid-area: typ; justify-self: start; } .pos-x { grid-area: x; } .pos-row > input, .pos-row > select.pos-mwst { width: 100%; min-width: 0; padding: 10px 12px; font: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); } .pos-row > input:focus, .pos-row > select.pos-mwst:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .pos-row > select.pos-mwst:disabled { opacity: 0.45; } /* Einmalposition: zusätzliche MwSt-Spalte (Satz direkt an der Zeile, 19/7/0 %) */ .pos-row.is-einmal { grid-template-columns: 22px minmax(0, 1fr) 96px 108px 78px 76px 126px 38px; grid-template-areas: 'handle main menge preis mwst rabatt typ x'; } .pos-mwst { grid-area: mwst; } /* Schmale Bildschirme: zweizeilig (Artikel oben, Menge/Preis/Rabatt/Art darunter) */ @media (max-width: 700px) { .pos-row { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 70px auto 38px; grid-template-areas: 'handle main main main main x' '. menge preis rabatt typ .'; } .pos-row.is-einmal { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 70px 70px auto 38px; grid-template-areas: 'handle main main main main main x' '. menge preis mwst rabatt typ .'; } .pos-row.is-textrow { grid-template-areas: 'handle main main main typ x'; } } /* Kleine „Position/Einmal/Text"-Buttons direkt unter den Positionen */ .pos-add-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; } .pos-add-btn { padding: 6px 11px; font-size: 13px; } .pos-add-btn svg { width: 16px; height: 16px; } /* Zusammenfassung rechts: Gesamtnachlass ÜBER der Summe; € bricht nicht um */ .pos-summary { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-bottom: 12px; } .pos-summe-line { font-weight: 700; white-space: nowrap; } /* Gesamtnachlass im Positionsfuß */ .pos-gr-wrap { color: var(--muted); font-weight: 400; white-space: nowrap; } .pos-gesamtrabatt { width: 72px; padding: 7px 9px; font: inherit; font-size: 13.5px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); } .pos-gesamtrabatt:focus { outline: 2px solid var(--brand); outline-offset: -1px; } /* Rabattausweis in Auftrags-/Rechnungsdetail */ .oi-rabatt { margin-left: 8px; font-size: 12px; color: var(--brand); white-space: nowrap; } /* Positionsart als Icon-Toggle: € berechnet / Geschenk ohne Berechnung / Auge-zu intern */ .typ-toggle { display: inline-flex; flex: none; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); } .typ-toggle button { display: flex; align-items: center; justify-content: center; border: none; background: none; padding: 9px 10px; cursor: pointer; color: var(--muted); } .typ-toggle button + button { border-left: 1px solid var(--border); } .typ-toggle button.is-active { background: var(--brand); color: #fff; } .typ-toggle svg { width: 18px; height: 18px; fill: currentColor; } /* Drag-Handle zum Sortieren der Positionen */ .pos-handle { display: inline-flex; flex: none; cursor: grab; touch-action: none; color: var(--muted); align-self: center; } .pos-handle svg { width: 20px; height: 20px; fill: currentColor; } .pos-row.is-dragging { opacity: 0.55; } /* Freitext-Eingabe (Einmal-/Textposition) – Optik wie die anderen Felder */ .pos-text { min-width: 0; padding: 10px 12px; font: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); } .pos-text:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .pos-foot-btns { display: flex; gap: 8px; flex-wrap: wrap; } .pos-row > input:disabled { opacity: 0.45; } .oi-chip { margin-left: 8px; } /* Reine Textzeile in Auftrags-/Rechnungsdetail */ .oi-text { font-style: italic; color: var(--muted); } /* ---------- Filterkopf über Listen: EINE Zeile mit Suchfeld (wächst) + kompakten Filter-Dropdowns + Export-Menü + „Neu"-Knopf rechts ---------- */ .filter-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } /* Suchfeld in der Filterzeile (wächst; schiebt den Export-Knopf nach rechts) */ .filter-search { flex: 1 1 200px; min-width: 150px; display: flex; } /* Mobil bricht die Zeile um: Suchfeld volle Breite, Filter/Export/Neu darunter */ @media (max-width: 560px) { .filter-search { flex-basis: 100%; } } .filter-search input { width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; } .filter-search input:focus { outline: 2px solid var(--brand); outline-offset: -1px; } /* Export-Menü: gleiche Optik wie die Filter-Dropdowns, Panel rechtsbündig */ .exp-menu { flex: none; } .exp-menu .fdrop-panel { left: auto; right: 0; min-width: 210px; } .exp-ic { display: inline-flex; } .exp-ic svg { width: 16px; height: 16px; fill: currentColor; } /* Suchfeld mit Lösch-X (suchFeld): X erscheint bei Eingabe, absolut rechts im Feld; das native WebKit-X wird ausgeblendet (sonst doppelt). */ .such-feld { position: relative; display: flex; flex: 1; min-width: 0; } .such-feld input { flex: 1; width: 100%; padding-right: 32px; } .such-feld input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .such-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); cursor: pointer; } .such-clear:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); } .such-clear svg { width: 14px; height: 14px; fill: currentColor; display: block; } .fdrop { position: relative; display: inline-block; } .fdrop-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; font: inherit; font-size: 14px; cursor: pointer; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); } .fdrop-btn:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .fdrop-prefix { color: var(--muted); font-size: 12.5px; } .fdrop-prefix::after { content: ':'; } .fdrop-label { font-weight: 600; } .fdrop-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 235px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; } .fdrop-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; } .fdrop-item:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); } .fdrop-item.is-selected { background: color-mix(in srgb, var(--brand) 14%, transparent); font-weight: 600; } /* Sammel-Filter (multiFilter): ein Dropdown mit Chip-Gruppen (Lieferart/ Herkunft/Zahlart) — Zähler-Badge am Auslöser, Chips im Panel, Zurücksetzen. */ .mf-badge { background: var(--brand); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; margin-left: 2px; } .mf-filter .fdrop-btn.is-aktiv { border-color: var(--brand); } .mf-panel { min-width: 280px; max-width: min(340px, 92vw); } .mf-gruppe { margin: 8px 6px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .mf-gruppe:first-child { margin-top: 4px; } .mf-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 4px; } .mf-chip { font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; } .mf-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; } .mf-foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--border); padding: 8px 4px 2px; margin-top: 6px; } .mf-reset { font-size: 12.5px; padding: 6px 12px; } /* Export-Menü als Format-Raster: ein Format je Zeile (PDF/DATEV/CSV), rechts Teilen + Herunterladen als Icon-Knöpfe (weinrot beim Überfahren). */ .exp-fmt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 3px 3px 10px; border-radius: 8px; } .exp-fmt-name { font-size: 14px; font-weight: 600; } .exp-fmt-acts { display: inline-flex; gap: 4px; } .exp-fmt-act { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; } .exp-fmt-act svg { width: 18px; height: 18px; fill: currentColor; display: block; } .exp-fmt-act:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); } .fdrop-dates { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; } .fdrop-dates label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); } .fdrop-dates input { padding: 7px 9px; font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); } .fdrop-dates input:focus { outline: 2px solid var(--brand); outline-offset: -1px; } /* ---------- Auswahlfeld mit integrierter Suche (searchSelect) ---------- */ .ssel { position: relative; } .ssel-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font: inherit; text-align: left; cursor: pointer; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); } .ssel-btn:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .ssel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ssel-label.is-placeholder { color: var(--muted); } .ssel-arrow { display: inline-flex; flex: none; } .ssel-arrow svg { width: 20px; height: 20px; fill: var(--muted); } .ssel-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; } .ssel-search { width: 100%; padding: 8px 10px; margin-bottom: 6px; font: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); } .ssel-search:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .ssel-list { max-height: 220px; overflow-y: auto; } .ssel-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; } .ssel-item:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); } .ssel-item.is-selected { background: color-mix(in srgb, var(--brand) 14%, transparent); } .ssel-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ssel-sub { color: var(--muted); font-size: 12px; flex: none; } .ssel-empty { padding: 8px 10px; color: var(--muted); font-size: 14px; } .pos-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .pos-summe { font-weight: 600; } .order-status-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 4px; } .order-items { margin-bottom: 10px; } .order-item-row { display: flex; gap: 10px; align-items: center; padding: 5px 0; font-size: 14px; } .order-item-row.is-clickable { cursor: pointer; } .order-item-row.is-clickable:hover { color: var(--brand); } .oi-menge { flex: none; color: var(--muted); min-width: 64px; } .oi-name { flex: 1; min-width: 0; } .oi-preis { flex: none; font-variant-numeric: tabular-nums; } .oi-total { border-top: 1px solid var(--border); font-weight: 700; margin-top: 4px; padding-top: 8px; } .cust-history { margin-bottom: 6px; } /* Versand-Aktionen (Lieferschein/Paketlabel) im Auftragsdetail */ .versand-group { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 10px; } .versand-group .versand-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-right: 2px; } .versand-group .btn { padding: 6px 8px; } .versand-group .btn svg { width: 18px; height: 18px; fill: currentColor; } .liefer-box { margin: 4px 0 10px; } .liefer-addr { font-size: 14px; line-height: 1.45; } /* Accordion (zusammenklappbarer Formular-Abschnitt, natives

) */ .acc { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; background: var(--bg); } .acc > .acc-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-weight: 600; font-size: 14.5px; list-style: none; user-select: none; } .acc > .acc-head::-webkit-details-marker { display: none; } .acc .acc-chev { display: inline-flex; flex: none; } .acc .acc-chev svg { width: 20px; height: 20px; fill: var(--muted); transition: transform 0.15s ease; } .acc[open] .acc-chev svg { transform: rotate(180deg); } .acc .acc-badge { margin-left: auto; flex: none; font-weight: 500; font-size: 12px; color: var(--muted); padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; } .acc .acc-body { padding: 2px 14px 14px; } .acc .acc-body .field:last-child { margin-bottom: 0; } @media (min-width: 860px) { /* Gleiches zweispaltiges Raster wie im Formular selbst */ .acc .acc-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; align-items: start; } .acc .acc-body > * { grid-column: 1 / -1; min-width: 0; } .acc .acc-body > .field { grid-column: auto; } .acc .acc-body > .field:has(textarea) { grid-column: 1 / -1; } .acc .acc-body > .grid2 { display: contents; } .acc .acc-body > .check-row { grid-column: auto; } .acc .acc-body > .btn { justify-self: start; } } /* Mehrere Lieferadressen im Adress-Dialog (je Adresse eine Karte) */ .addr-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .addr-card { position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--card-bg, transparent); } .addr-card .addr-x { position: absolute; top: 8px; right: 8px; } .addr-card .field:last-child { margin-bottom: 0; } /* Aktionsbuttons rechts in der Auftragszeile (Bearbeiten/Stornieren/Export) */ .order-row-acts { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; flex: none; } .order-row-acts .fdrop-btn { padding: 6px 8px; } .order-row-acts .fdrop-label { display: none; } /* Platzhalter für fehlende Aktions-Icons: gleiche Breite wie .icon-act (38px), damit die Aktionsspalte konstant bleibt und die Beträge untereinander stehen. */ .icon-act-ph { display: inline-block; width: 38px; height: 38px; flex: none; } /* Ausgabe-Band oben im Auftrag: zentriert, dicht unter der Titel-Linie, mit eigener Trennlinie darunter (grenzt die Ausgabe vom Inhaltsbereich ab). Das negative margin-top zieht das Band nah an die Titel-Linie (reduziert das sheet-body-Padding); padding-bottom = gleicher Abstand zur Linie darunter. */ .order-form-actions { justify-content: center; margin: -8px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .order-form-versand { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } @media (min-width: 860px) { .order-form-actions { margin-top: -12px; } } /* Schreibgeschützte Auftragsansicht (ab versendet): identisch, aber nicht interaktiv. Nur die Versand-Belege oben und der Schließen-Button bleiben klickbar. */ .order-form-ro { pointer-events: none; } .order-form-ro .order-form-actions, .order-form-ro .sheet-actions { pointer-events: auto; } .order-form-ro .pos-x, .order-form-ro .pos-handle { visibility: hidden; } /* Rechnungslink links vom Status-Chip (Status „fakturiert") */ .invoice-link { padding: 4px 9px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; } .invoice-link svg { width: 15px; height: 15px; fill: currentColor; } /* Ausgabe-Protokoll (gemailt/gedruckt/geteilt) in der Rechnungsliste */ .inv-flags { display: inline-flex; flex-wrap: wrap; gap: 10px; margin-top: 3px; font-size: 11.5px; color: var(--muted); } .inv-flag { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; } .inv-flag svg { width: 13px; height: 13px; fill: currentColor; } .order-status-row .inv-flags { margin: 0 0 0 4px; align-self: center; } /* ---------- Modul Faktura ---------- */ .invoice-addr { white-space: pre-line; font-size: 14px; margin: 8px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; } /* Bereichs-Umschalter (Belege: Angebote | Aufträge | Rechnungen; Artikel: Alle | Leistungen | …) — steht als .seg-bar ÜBER der Karte (VINORUM-Muster). */ .seg-bar { margin-bottom: 14px; } .fk-seg { display: inline-flex; flex: none; max-width: 100%; /* Passen die Bereiche (Angebote|Aufträge|Rechnungen …) am Handy nicht in die Breite, scrollt der Umschalter IN SICH — die Seite verschiebt sich nicht. */ overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); } .fk-seg::-webkit-scrollbar { display: none; } .fk-seg-btn { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; padding: 9px 14px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--muted); white-space: nowrap; } .fk-seg-btn + .fk-seg-btn { border-left: 1px solid var(--border); } .fk-seg-btn.is-active { background: var(--brand); color: #fff; } /* Typ-Icon im Segment (Artikel-Liste) */ .seg-ic { display: inline-flex; } .seg-ic svg { width: 16px; height: 16px; fill: currentColor; } /* Rechnungen vorbereiten: Kundengruppen mit abwählbaren Aufträgen */ .fk-vb-gruppe { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; } .fk-vb-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .fk-vb-kopf-rechts { display: inline-flex; align-items: center; gap: 12px; } .fk-vb-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; } .fk-vb-row + .fk-vb-row { border-top: 1px solid var(--border); } .fk-vb-check { display: flex; flex: none; padding: 4px; cursor: pointer; } .fk-vb-check input { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; } .fk-vb-row .tenant-main.is-clickable { cursor: pointer; } .fk-vb-row .tenant-main.is-clickable:hover .tenant-name { color: var(--brand); } /* Kunden-Dialog: Nachlass je Artikelkategorie */ .cd-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .cd-row select { flex: 1; min-width: 0; padding: 10px 12px; font: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); } .cd-row input { width: 90px; flex: none; padding: 10px 12px; font: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); } /* Gruppen-Preisliste im Kategorie-Dialog + Anzeige im Artikel */ .preisliste-block { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 8px; } .preis-runden-an { margin: 12px 0 8px; } .preis-runden-felder .field { min-width: 0; } .gruppenpreise-host { margin: 2px 0 4px; } .gp-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; } .gp-grp { color: var(--muted); } .gp-val { font-weight: 600; white-space: nowrap; } /* ---------- Modul Vinothek (Tresen-/Barverkauf am Tablet) ---------- */ /* minmax(0, …) + min-width: 0 sind PFLICHT: Grid-Kinder haben implizit min-width auto — die Kategorie-Chips-Zeile (overflow-x) würde die Spalte sonst breiter als den Viewport drücken (iPad: Seite läuft seitlich über). */ .vino-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; } .vino-main, .vino-cart { min-width: 0; } @media (max-width: 1100px) { .vino-wrap { grid-template-columns: minmax(0, 1fr) 300px; } } @media (max-width: 900px) { .vino-wrap { grid-template-columns: minmax(0, 1fr); } } .vino-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .vino-head h2 { margin: 0; } .vino-kunde-zeile { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 260px; } .vino-kunde { flex: 1; min-width: 180px; } .vino-filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .vino-such { flex: 1; min-width: 160px; padding: 10px 12px; font: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); } .vino-kats { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; scrollbar-width: none; } .vino-kats::-webkit-scrollbar { display: none; } .vino-kat { padding: 7px 13px; font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); cursor: pointer; white-space: nowrap; } .vino-kat.is-active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; } /* Artikel-Kacheln: große Touch-Ziele, Foto lazy als Hintergrund */ .vino-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .vino-art { display: flex; flex-direction: column; gap: 6px; padding: 10px; font: inherit; text-align: left; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); cursor: pointer; } .vino-art:active { transform: scale(0.97); } .vino-art-foto { display: block; height: 86px; border-radius: 8px; background: color-mix(in srgb, var(--brand) 6%, transparent) center/contain no-repeat; } .vino-art-name { font-size: 13px; font-weight: 600; line-height: 1.3; min-height: 2.6em; overflow: hidden; } .vino-art-preis { font-size: 15px; font-weight: 700; color: var(--brand); } /* Warenkorb rechts */ .vino-cart h3 { margin: 0 0 10px; } .vino-cart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .vino-cart-head h3 { margin: 0 0 6px; } .vino-einmal-btn { font-size: 12.5px; padding: 6px 10px; flex: none; } /* Einmalpositionen (ohne Artikelstamm) kursiv – Muster Textzeilen im Auftrag */ .vino-row.is-einmal .vino-row-name { font-style: italic; } .vino-cart-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .vino-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); } .vino-row-name { font-size: 13.5px; flex: 1; min-width: 0; } .vino-row-rabatt { color: var(--brand); font-weight: 600; white-space: nowrap; } .vino-row-acts { display: inline-flex; align-items: center; gap: 5px; flex: none; } .vino-step { width: 34px; height: 34px; padding: 0; font: inherit; font-size: 18px; font-weight: 700; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); cursor: pointer; } .vino-menge { min-width: 22px; text-align: center; font-weight: 700; } .vino-preis { width: 72px; padding: 7px 8px; font: inherit; font-size: 13.5px; text-align: right; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); } .vino-sum-haupt { display: flex; justify-content: space-between; font-size: 19px; font-weight: 700; margin-top: 6px; } .vino-sum-mwst { text-align: right; font-size: 12px; color: var(--muted); margin-bottom: 8px; } .vino-zahlart button { padding: 10px 14px; font: inherit; border: none; background: transparent; color: var(--text); cursor: pointer; } .vino-zahlart button.is-active { background: var(--brand); color: #fff; font-weight: 600; } .vino-zahlart button:disabled { opacity: 0.45; cursor: not-allowed; } .vino-checkout { width: 100%; padding: 14px; font-size: 16px; margin-top: 8px; } /* Erfolgsdialog */ .vino-erfolg-summe { font-size: 30px; font-weight: 700; margin: 4px 0 2px; } .vino-erfolg-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; } /* Selbsterfassung: GESPERRTER Vollbild-Übergabemodus (liegt über allem inkl. Nav) */ .vino-kiosk { position: fixed; inset: 0; z-index: 300; background: var(--bg); overflow-y: auto; padding: 18px; } .vino-kiosk-top { display: flex; justify-content: flex-end; max-width: 620px; margin: 0 auto; } .vino-kiosk-abbruch { font-size: 12.5px; padding: 7px 12px; color: var(--muted); } .vino-kiosk-inner { max-width: 620px; margin: 6px auto 40px; } .vino-kiosk-inner h2 { margin: 8px 0 4px; } .vino-kiosk-inner input, .vino-kiosk-inner select { padding: 13px 14px; font-size: 16px; } .vino-kiosk-fertig { width: 100%; padding: 15px; font-size: 17px; margin-top: 12px; } .vino-kiosk-danke { text-align: center; padding-top: 12vh; } .vino-kiosk-danke .btn { margin-top: 26px; padding: 14px 22px; } .btn.is-holding { background: color-mix(in srgb, var(--brand) 22%, transparent); transform: scale(0.97); } /* Halten-Buttons auf iOS: langes Drücken darf weder Scrollen (pointercancel) noch Textauswahl/Lupe/Kontextmenü auslösen — sonst löst der Button nie aus. */ .vino-hold { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* SumUp-Kartenzahlung: Warte-Dialog (Solo, Cloud-Reader-API) */ .vino-sumup-wait { text-align: center; } .vino-sumup-betrag { font-size: 30px; font-weight: 700; margin: 6px 0 2px; } .vino-sumup-status { color: var(--muted); margin: 8px 0 4px; } .vino-sumup-puls { width: 16px; height: 16px; border-radius: 50%; margin: 10px auto 2px; background: var(--brand); animation: vino-sumup-puls 1.2s ease-in-out infinite; } @keyframes vino-sumup-puls { 0%, 100% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 1; } } .vino-sumup-wait .sheet-actions { justify-content: center; } /* Modus-Segment der Vinothek-Einstellungsseite */ .vino-modus-seg { display: inline-flex; flex-wrap: wrap; } /* Ausgegraute Aktions-Buttons im Format-Raster (z. B. E-Mail ohne Adresse) */ .exp-fmt-act:disabled { opacity: 0.35; cursor: not-allowed; } .versand-group .btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ---------- FLEXX³ Shipping (Versandlabels + Tracking) ---------- */ /* Status-Flag (Liste + Auftragsformular): LKW-Icon + Status, farbcodiert */ .sv-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin-top: 2px; } .sv-flag svg { width: 15px; height: 15px; fill: currentColor; } .sv-flag.is-gruen { color: #1e7e34; font-weight: 600; } .sv-flag.is-blau { color: #1565c0; } .sv-flag.is-rot { color: #b02a37; font-weight: 600; } [data-theme='dark'] .sv-flag.is-gruen { color: #57bb6f; } [data-theme='dark'] .sv-flag.is-blau { color: #64a9e8; } [data-theme='dark'] .sv-flag.is-rot { color: #e57373; } /* Block im Auftragsformular */ .sv-block { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; align-items: center; } .sv-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; } .sv-zeile .sv-flag { font-size: 13px; margin: 0; } .sv-carrier { font-size: 13px; color: var(--muted); } .sv-tracking { font-size: 13px; font-family: ui-monospace, monospace; color: var(--brand); text-decoration: underline; } /* Label-Dialog: Maße-Zeile + Preis */ .sv-masse { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .sv-masse input { width: 76px; text-align: right; } .sv-masse span { color: var(--muted); } .sv-quote-zeile { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .sv-preis { font-size: 17px; font-weight: 700; color: var(--brand); } /* Freischalt-Status auf der Winzer-Einstellungsseite */ .sv-aktiv { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 0 0 10px; } .sv-aktiv.is-gruen { color: #1e7e34; font-weight: 600; } [data-theme='dark'] .sv-aktiv.is-gruen { color: #57bb6f; } .sv-aktiv svg { width: 16px; height: 16px; fill: currentColor; flex: none; } /* Einstellungen: Paketvorlagen-Zeilen (auch Preisregeln des Operators) */ .sv-pakete { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; align-items: flex-start; } .sv-pak-row { display: flex; gap: 6px; align-items: center; width: 100%; } .sv-pak-row input[type='text'] { flex: 1; min-width: 120px; } .sv-pak-row input[type='number'] { width: 76px; text-align: right; } /* Einstellungen: Mailvorlagen — Vorschau mit Beispieldaten (1.0.43) */ .mailv-preview { margin: 0; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13px; line-height: 1.55; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text); } /* ---------- Modul Schriftverkehr (Briefe mit Vorlagen) ---------- */ .brief-text { font-family: inherit; line-height: 1.55; resize: vertical; } .brief-ph { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 10px; } .brief-ph-chip { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; padding: 3px 9px; } .brief-actions { align-items: center; } .brief-akt-gruppe { display: inline-flex; gap: 6px; margin-right: auto; } .brief-akt-gruppe .btn { padding: 8px 10px; } .brief-akt-gruppe .btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ---------- Modul Kellerbuch ---------- */ .kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .kb-tile { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .kb-tile.is-clickable { cursor: pointer; } .kb-tile.is-clickable:hover { border-color: var(--brand); } .kb-tile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .kb-nummer { font-weight: 700; font-size: 16px; } .kb-inhalt { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; } .kb-wein { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kb-liter { flex: none; font-variant-numeric: tabular-nums; } .kb-leer { color: var(--muted); font-style: italic; } .kb-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; } .kb-bar-fill { height: 100%; background: var(--brand); border-radius: 3px; } .kb-bar-fill.is-over { background: #b3261e; } .kb-vol { font-size: 11.5px; color: var(--muted); text-align: right; } .kb-menge { flex: none; align-self: center; font-weight: 700; font-variant-numeric: tabular-nums; } .kb-menge.is-plus { color: #1b7f3b; } .kb-menge.is-minus { color: #b3261e; } .tenant-item.kb-storniert .tenant-name, .tenant-item.kb-storniert .tenant-sub { text-decoration: line-through; opacity: 0.65; } .kb-storno-row { display: flex; gap: 8px; margin: 10px 0 4px; } .kb-storno-row input { flex: 1; min-width: 0; padding: 10px 12px; font: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); } /* Stammdaten-Gliederung nach Modulen (Einstellungen -> Stammdaten -> Modul) */ .stamm-modul { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); margin: 18px 2px 6px; } .stamm-modul:first-of-type { margin-top: 6px; } /* ---------- Einstellungen: Kachel-Navigation (Muster CURENA) ---------- */ .stamm-page-title { margin: 2px 2px 14px; display: flex; align-items: center; gap: 6px; } .stamm-page-title svg { width: 22px; height: 22px; fill: currentColor; } /* Zurück-Leiste */ .set-backbar { margin-bottom: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; } .set-backbar svg { width: 18px; height: 18px; fill: currentColor; } /* Navigations-Kachel (Card-Button) */ .set-tile { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; cursor: pointer; color: var(--text); } .set-tile-ico { flex: 0 0 auto; display: inline-flex; } .set-tile-ico svg { width: 24px; height: 24px; fill: var(--brand); } .set-tile-txt { flex: 1; min-width: 0; } .set-tile-label { display: block; font-weight: 700; } .set-tile-desc { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; } .set-tile-chev { flex: 0 0 auto; display: inline-flex; } .set-tile-chev svg { width: 20px; height: 20px; fill: var(--muted); } /* ---------- Einstellungs-Startseite: EINE Seite, Rubriken + Raster (1.0.47) ---------- Die frühere Zwischenebene je Modul ist entfallen — alle Bereiche stehen sichtbar nebeneinander. Kopf: Überschrift links, Suchfeld rechts. */ .set-home-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; } .set-home-kopf .stamm-page-title { margin: 0; flex: 1 1 auto; } .set-home-suche { flex: 0 1 320px; min-width: 200px; } /* Rubrik-Überschrift mit Haarlinie — dieselbe Sprache wie die Spaltenköpfe des CRM-Baums: klein, versal, ruhig. */ .set-gruppe { display: flex; align-items: center; gap: 10px; margin: 18px 2px 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); } .set-gruppe::after { content: ''; flex: 1; height: 1px; background: var(--border); } .set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; } .set-grid > * { min-width: 0; } /* Rasterkachel: Zeichen oben links in getönter Fläche, darunter Name und — auf zwei Zeilen begrenzt — wofür der Bereich da ist. Gleiche Höhe je Reihe. */ .set-tile.is-klein { align-items: flex-start; gap: 11px; padding: 14px; margin: 0; height: 100%; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .set-tile.is-klein:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); box-shadow: 0 2px 10px rgba(11, 19, 32, 0.10); } .set-tile.is-klein .set-tile-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 10%, transparent); } .set-tile.is-klein .set-tile-ico svg { width: 21px; height: 21px; } .set-tile.is-klein .set-tile-label { font-size: 14.5px; } .set-tile.is-klein .set-tile-desc { font-size: 12.5px; line-height: 1.35; /* Zwei Zeilen, dann Auslassung: sonst wären die Kacheln einer Reihe unterschiedlich hoch und das Raster zappelig. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Stammdaten: filterbare Listenseite ---------- */ .stamm-list-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 2px 10px; } .stamm-lh-title { display: inline-flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 700; } .stamm-lh-title svg { width: 22px; height: 22px; fill: currentColor; } .stamm-lh-title > span:last-child { white-space: nowrap; } .stamm-lh-hint { margin: 0 2px 10px; } .stamm-search { flex: 1 1 160px; min-width: 120px; display: flex; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; height: 38px; } .stamm-search:focus-within { border-color: var(--brand); } .stamm-search svg { width: 17px; height: 17px; fill: var(--muted); flex: 0 0 auto; } .stamm-search-input { flex: 1; min-width: 0; border: none; outline: none; background: none; font: inherit; font-size: 14px; color: var(--text); padding: 0; } /* „Neu"-Button rechts, auch bei Umbruch neben dem Suchfeld */ .stamm-list-head .btn.primary { flex: 0 0 auto; } .stamm-list { display: flex; flex-direction: column; } .stamm-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); } .stamm-row:first-child { border-top: none; } .stamm-row.is-inactive { opacity: 0.6; } /* Die ganze ZEILE öffnet das Bearbeiten (VINORUM-Muster, 1.0.48) — das war bisher nur über den kleinen Bleistift möglich. Die Fläche hebt sich beim Überfahren leicht ab, damit man sieht, dass sie ein Ziel ist. `.liste-flach` ist die flache Listenoptik der Stammdaten-Karten (keine Kacheln, nur Trennlinien) — sie gilt auch für die Mandantenzeilen. */ .stamm-row.is-clickable { cursor: pointer; } .stamm-row.is-clickable:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); } .liste-flach { gap: 0; } .liste-flach .tenant-item { background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid var(--border); padding: 8px 4px; margin: 0; } .liste-flach .tenant-item:last-child { border-bottom: 0; } /* Warnzeile (Fakturalauf-Vorschau: Fakturatermin liegt Jahre zurück). */ .stamm-row.is-warn { background: color-mix(in srgb, var(--danger) 8%, transparent); border-left: 3px solid var(--danger); padding-left: 8px; } .stamm-main { flex: 1; min-width: 0; } .stamm-name { font-weight: 600; display: flex; align-items: center; gap: 8px; } .stamm-badge { flex: 0 0 auto; } .stamm-sub { font-size: 13px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Aktions-Icons je Zeile (Bearbeiten / Löschen) */ .icon-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .icon-act { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; cursor: pointer; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--muted); } .icon-act svg { width: 20px; height: 20px; fill: currentColor; } .icon-act:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); } .icon-act.is-del.is-armed { border-color: #b3261e; background: color-mix(in srgb, #b3261e 12%, transparent); } .icon-act.is-del.is-armed svg { fill: #b3261e; } .icon-act:disabled { opacity: 0.5; cursor: default; } /* ---------- Stammdaten: Kategorien-Pflege ---------- */ .cat-add { display: flex; gap: 8px; margin-bottom: 12px; } .cat-add input { flex: 1; min-width: 0; padding: 10px 12px; font: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); } .cat-add input:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .cat-row { display: flex; gap: 8px; align-items: center; padding: 5px 0; } .cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .cat-row input { flex: 1; min-width: 0; padding: 8px 10px; font: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); } /* Vorschau des Kundenlogos im Bearbeiten-Dialog */ .logo-preview { display: block; max-height: 56px; max-width: 100%; width: auto; margin-bottom: 10px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; } /* ---------- Modul Plantafel (FLEXX³ Rental) ---------- */ /* Tagesbasiertes Belegungsbrett (Muster NAMI): horizontal scrollbares Grid mit sticky Objektspalte; Buchungen als Parallelogramme mit diagonalen Enden. */ .rt-wrap { margin-top: 4px; } .rt-scroll { overflow-x: auto; overflow-y: hidden; cursor: grab; border: 1px solid var(--border); border-radius: 12px; user-select: none; } .rt-scroll:active { cursor: grabbing; } .rt-grid { position: relative; } .rt-row { display: flex; } .rt-row + .rt-row .rt-track, .rt-row + .rt-row .rt-rescell { border-top: 1px solid var(--border); } /* Objektspalte links – bleibt beim Scrollen stehen */ .rt-rescell { position: sticky; left: 0; z-index: 5; flex: none; width: 160px; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 13.5px; background: var(--card); border-right: 1px solid var(--border); overflow: hidden; white-space: nowrap; } .rt-rescell.is-clickable { cursor: pointer; } .rt-rescell.is-clickable:hover { color: var(--brand); } .rt-objname { overflow: hidden; text-overflow: ellipsis; } .rt-geo { display: inline-flex; flex: none; } .rt-geo svg { width: 14px; height: 14px; fill: var(--muted); } /* Gruppenzeile */ .rt-group .rt-groupcell { font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: color-mix(in srgb, var(--text) 4%, var(--card)); height: 30px; } .rt-grouptrack { flex: none; height: 30px; background: color-mix(in srgb, var(--text) 4%, transparent); } /* Kopfzeile mit den Tagen */ .rt-head { position: sticky; top: 0; z-index: 6; } .rt-corner, .rt-track-head { height: 46px; background: var(--card); } .rt-track { position: relative; flex: none; height: 46px; } .rt-dayhead { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10.5px; color: var(--muted); border-left: 1px solid var(--border); overflow: hidden; } .rt-dayhead .rt-tag { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.1; } .rt-dayhead.is-we { background: color-mix(in srgb, var(--text) 5%, transparent); } .rt-dayhead.is-heute { background: color-mix(in srgb, var(--brand) 14%, transparent); } .rt-dayhead.is-heute .rt-tag { color: var(--brand); } .rt-monat { position: absolute; top: 1px; left: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand); white-space: nowrap; } /* Objekt-Zeilen: Spur mit Tageslinien (per Inline-Gradient) + Balken */ .rt-row:not(.rt-head):not(.rt-group) .rt-track { height: 44px; background-color: var(--bg); } .rt-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--brand); opacity: 0.55; z-index: 1; pointer-events: none; } /* Buchungsbalken: Parallelogramm (Anreise mittags -> Abreise mittags) */ .rt-bar { position: absolute; top: 7px; bottom: 7px; z-index: 2; display: flex; align-items: center; overflow: hidden; background: var(--brand); color: #fff; cursor: pointer; font-size: 12px; white-space: nowrap; } .rt-bar:hover { filter: brightness(1.15); } .rt-bar-label { overflow: hidden; text-overflow: ellipsis; padding-right: 4px; } /* Sperrzeit: schraffiert (45°-Streifen wie NAMI) */ .rt-bar.is-sperre { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--text) 38%, transparent) 0, color-mix(in srgb, var(--text) 38%, transparent) 6px, color-mix(in srgb, var(--text) 18%, transparent) 6px, color-mix(in srgb, var(--text) 18%, transparent) 12px); color: var(--text); } /* ---------- Modul Protect: Wetterstationen + Risikoampel ---------- */ /* ---------- Modul Climate: Sensor-Monitoring ---------- */ .cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; } .cl-werte { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 12px 0; } .cl-werte-detail { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .cl-tile { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--muted) 8%, transparent); } .cl-tile b { font-size: 16px; font-weight: 700; } .cl-tile-lbl { font-size: 11px; color: var(--muted); } /* Vorhersage: „Morgen"-Zeile auf der Karte + 7-Tage-Streifen im Detail (DWD). Die Sensorkacheln füllen den variablen Raum, damit die „Morgen"-Zeile bei allen Karten auf gleicher Linie (unten, vor dem Fuß) steht. */ .pt-card > .cl-werte { flex: 1 1 auto; } .cl-morgen { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-height: 0; } .cl-morgen:not(:empty) { padding: 8px 10px; border-radius: 10px; margin-bottom: 10px; background: color-mix(in srgb, var(--accent) 16%, transparent); } .cl-morgen-sym { font-size: 18px; line-height: 1; } .cl-forecast { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 8px; } .cl-fc-tag { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 12px; background: color-mix(in srgb, var(--muted) 8%, transparent); } .cl-fc-name { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .cl-fc-sym { font-size: 24px; line-height: 1.2; } .cl-fc-temp { font-size: 13px; } .cl-fc-temp b { font-size: 14px; } .cl-fc-sub { font-size: 11px; color: var(--muted); } /* Sensor-Auswahl im Detail-Chart */ .cl-sensor-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .cl-sensor-seg button { border: 1px solid var(--border); background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; } .cl-sensor-seg button.is-active { background: var(--brand); color: #fff; border-color: var(--brand); } /* Protect-Prognose: 7-Tage-Ampel-Ausblick aus der DWD-Vorhersage je Karte. Die Gründe-Liste füllt den variablen Raum, damit die Prognose bei allen Karten (Grid stretcht sie gleich hoch) auf gleicher Höhe unten steht. */ .pt-card > .pt-gruende { flex: 1 1 auto; margin-bottom: 0; } .pt-prognose { margin: 4px 0; } .pt-prognose:empty { display: none; } .pt-prognose-lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .pt-fc-quelle { display: block; margin-top: 5px; font-size: 10.5px; color: var(--muted); } .pt-fc-streifen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 5px; } .pt-fc-tag { display: flex; flex-direction: column; align-items: center; gap: 4px; } .pt-fc-wt { font-size: 10.5px; color: var(--muted); } .pt-fc-dot { width: 100%; height: 9px; border-radius: 4px; background: var(--muted); } .pt-fc-dot.is-niedrig { background: #1b7f3b; } .pt-fc-dot.is-mittel { background: #b58a00; } .pt-fc-dot.is-hoch { background: #cf5b13; } .pt-fc-dot.is-sehr-hoch { background: #b3261e; } .pt-fc-dot.is-unbekannt { background: var(--muted); } /* Krankheitsmodell-Umschalter (Peronospora/Oidium/Botrytis) über dem Raster */ .pt-modell-seg { display: flex; flex-wrap: wrap; margin: 4px 0 14px; } .pt-modell-seg button { flex: 1 1 auto; white-space: nowrap; } .pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; } /* Hinweis „Daten werden aktualisiert …" (Snapshot sichtbar, Hintergrund lädt frisch) */ .pt-refresh { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .pt-refresh-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--brand); animation: ptPuls 1.1s ease-in-out infinite; } @keyframes ptPuls { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } } .pt-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .pt-card.is-inactive { opacity: 0.6; flex-direction: row; align-items: center; justify-content: space-between; } .pt-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .pt-card-head strong { font-size: 15.5px; } /* Ampel-Chip */ .pt-ampel { flex: none; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; color: #fff; } .pt-ampel.is-unbekannt { background: var(--muted); } .pt-ampel.is-niedrig { background: #1b7f3b; } .pt-ampel.is-mittel { background: #b58a00; } .pt-ampel.is-hoch { background: #cf5b13; } .pt-ampel.is-sehr-hoch { background: #b3261e; } /* Aktuelle Messwerte */ .pt-werte { display: flex; flex-wrap: wrap; gap: 6px 18px; } .pt-werte span { display: flex; flex-direction: column; font-size: 11.5px; color: var(--muted); } .pt-werte b { font-size: 14.5px; color: var(--text); font-variant-numeric: tabular-nums; } .pt-gruende { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); } .pt-gruende li { margin: 2px 0; } .pt-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; } .pt-meta { font-size: 11.5px; color: var(--muted); } /* Detail: Chart + Tageswerte */ .pt-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .pt-h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 16px 0 6px; } .pt-chart { overflow-x: auto; } .pt-svg { width: 100%; min-width: 560px; height: auto; display: block; } /* Interaktives Chart (Pan/Zoom im Protect-Detail): kein Scrollen, Ziehen greift */ .pt-chart.is-interaktiv { overflow: hidden; cursor: grab; touch-action: none; user-select: none; } .pt-chart.is-interaktiv.is-dragging { cursor: grabbing; } .pt-chart.is-interaktiv .pt-svg { min-width: 0; pointer-events: none; } .pt-chart-ctrl { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .pt-chart-btns { margin-left: auto; display: flex; gap: 6px; } .pt-chart-btn { padding: 3px 12px; font-weight: 700; min-width: 34px; } .pt-chart-lade { color: var(--brand); } .pt-grid-l { stroke: var(--border); stroke-width: 1; } .pt-ax { font-size: 10px; fill: var(--muted); } .pt-line-temp { fill: none; stroke: var(--brand); stroke-width: 1.8; } .pt-line-rh { fill: none; stroke: #4a7fb5; stroke-width: 1.2; stroke-dasharray: 4 3; opacity: 0.85; } .pt-rain { fill: #4a7fb5; opacity: 0.65; } .pt-wet { fill: #1b7f3b; opacity: 0.8; } .pt-tagrow { display: flex; gap: 16px; padding: 5px 0; font-size: 13.5px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .pt-tagrow:last-child { border-bottom: none; } .pt-tag-datum { font-weight: 600; min-width: 78px; } /* ---------- Modul KI-Assistent: Chat ---------- */ .ki-card { display: flex; flex-direction: column; height: calc(100dvh - 200px); min-height: 380px; } .ki-thread { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; margin-bottom: 10px; } /* Sprechblasen */ .ki-msg { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; } .ki-msg.is-user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; } .ki-msg.is-assistant { align-self: flex-start; background: color-mix(in srgb, var(--text) 6%, transparent); border-bottom-left-radius: 4px; } .ki-md p { margin: 0 0 8px; } .ki-md p:last-child { margin-bottom: 0; } .ki-md ul, .ki-md ol { margin: 0 0 8px; padding-left: 20px; } .ki-md li { margin: 2px 0; } .ki-md code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: color-mix(in srgb, var(--text) 8%, transparent); padding: 1px 5px; border-radius: 5px; } /* Transparenz-Zeile: welche Daten wurden nachgeschlagen */ .ki-used { align-self: flex-start; font-size: 11.5px; color: var(--muted); margin: -4px 0 2px 6px; } .ki-errline { color: #b3261e; } /* Tipp-Indikator (drei springende Punkte) */ .ki-typing { display: flex; gap: 5px; align-items: center; padding: 14px 16px; } .ki-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: ki-blink 1.2s infinite; } .ki-typing span:nth-child(2) { animation-delay: 0.2s; } .ki-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes ki-blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; transform: translateY(-2px); } } /* Begrüßung / Einrichtung + Beispielfragen */ .ki-setup { margin: auto; text-align: center; max-width: 460px; padding: 20px 10px; } .ki-setup-ic svg { width: 44px; height: 44px; fill: var(--brand); opacity: 0.8; } .ki-setup p { margin: 10px 0 6px; } .ki-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; } .ki-chip { padding: 8px 13px; font: inherit; font-size: 13px; cursor: pointer; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); } .ki-chip:hover { border-color: var(--brand); color: var(--brand); } /* Eingabezeile */ .ki-inputrow { display: flex; gap: 8px; align-items: flex-end; } .ki-input { flex: 1; min-width: 0; resize: none; padding: 11px 14px; font: inherit; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); color: var(--text); max-height: 140px; } .ki-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .ki-send { flex: none; padding: 11px 13px; border-radius: 14px; } .ki-send svg { width: 19px; height: 19px; fill: currentColor; display: block; } /* Undo-Leiste unten (Muster NAMI: 8 s sichtbar, Aktion rückgängig machbar) */ .undo-bar { position: fixed; left: 50%; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 90; transform: translate(-50%, 16px); opacity: 0; display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 12px; background: var(--anthracite, #232323); color: #fff; box-shadow: var(--shadow); font-size: 14px; max-width: min(92vw, 480px); transition: transform 0.25s ease, opacity 0.25s ease; } .undo-bar.show { transform: translate(-50%, 0); opacity: 1; } .undo-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .undo-bar .btn { background: transparent; color: var(--accent, #D8BF92); border-color: color-mix(in srgb, #fff 25%, transparent); } /* ADCON-Stationsauswahl im Wetterstations-Dialog: Dropdown + „Stationen laden" */ .adcon-pick-row { display: flex; gap: 8px; align-items: stretch; } .adcon-pick-row .adcon-pick { flex: 1 1 auto; min-width: 0; } .adcon-pick-row .adcon-pick .ssel { width: 100%; } .adcon-pick-row > .btn { flex: 0 0 auto; white-space: nowrap; } .quelle-group[hidden] { display: none; } /* Open-Meteo: Karten-Punktauswahl im Wetterstations-Dialog (Leaflet) */ .om-map { height: 320px; width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--line, #d8d2c4); background: #e9e5db; z-index: 0; } @media (max-width: 560px) { .om-map { height: 260px; } } .om-koord-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.92em; color: var(--muted, #6b6455); } .om-koord-ic svg { width: 18px; height: 18px; fill: currentColor; display: block; } .om-koord { font-variant-numeric: tabular-nums; } /* Punkt-Marker (divIcon) */ .om-pin span { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--brand, #6D2330); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); } /* Leaflet-Bedienelemente über dem Karteninhalt, aber unter dem Dialogrand */ .om-map .leaflet-top, .om-map .leaflet-bottom { z-index: 400; } /* Dashboard-Kachel mit externem Link (Shop → neues Fenster) */ .module-ext { display: inline-flex; vertical-align: middle; margin-left: 5px; opacity: 0.6; } .module-ext svg { width: 15px; height: 15px; fill: currentColor; } /* „Shop öffnen"-Link im Kopf der Shop-Auswertungen */ .shop-url-link { display: inline-flex; align-items: center; gap: 4px; color: var(--brand, #6D2330); text-decoration: none; white-space: nowrap; } .shop-url-link svg { width: 15px; height: 15px; fill: currentColor; } .shop-url-link:hover { text-decoration: underline; } /* ---- Onlinebuchung (FLEXX³ Booking) ---- */ /* Objekt-Dialog: Onlinebuchung-Accordion */ .rt-online-acc { border:1px solid var(--line,#e4ded2); border-radius:10px; padding:6px 12px; margin:10px 0; } .rt-online-acc > summary { cursor:pointer; font-weight:600; padding:6px 0; list-style:none; } .rt-online-acc > summary::-webkit-details-marker { display:none; } .rt-online-acc > summary::before { content:'▸'; margin-right:6px; color:var(--muted,#888); } .rt-online-acc[open] > summary::before { content:'▾'; } .rt-foto-box { display:flex; align-items:center; gap:10px; margin-bottom:6px; } .rt-foto-prev { max-height:90px; max-width:150px; border-radius:8px; border:1px solid var(--line,#e4ded2); object-fit:cover; } /* Saison-Editor */ .rt-season-row { border:1px solid var(--line,#e4ded2); border-radius:10px; padding:10px 12px; margin:8px 0; background:color-mix(in srgb, var(--card,#fff) 70%, transparent); } .rt-wd-row { display:flex; flex-wrap:wrap; gap:8px; } .rt-wd { display:inline-flex; align-items:center; gap:3px; font-size:.85em; } .rt-wd input { margin:0; } .rt-season-del { margin-top:6px; } .rt-season-acts { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; } .rt-embed { font-family:monospace; font-size:.8em; } /* Anfrage-Banner im Buchungsdialog */ .rt-anfrage-banner { background:#fff6e6; border:1px solid #e8c98a; border-radius:9px; padding:10px 12px; margin-bottom:10px; } .rt-anfrage-banner strong { color:#8a5a00; } .rt-anfrage-msg { font-style:italic; margin-top:4px; } /* Plantafel-Balken: Anfrage (gestrichelt/orange), Online-Herkunft */ .rt-bar.is-anfrage { background:repeating-linear-gradient(45deg,#f4c67a,#f4c67a 7px,#eab659 7px,#eab659 14px); color:#5a3d00; border:1px dashed #b9821f; } .rt-bar.is-anfrage .rt-bar-label { color:#4a3300; } /* App-Einstellungen: Farbdesign-Dropdown + Stations-Unterüberschrift */ .app-select { font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); cursor: pointer; } /* „Darstellung"-Zeile: Farbdesign-Dropdown + Hell/Dunkel nebeneinander */ .darstellung-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } /* Kompakte Stationsliste direkt unter „Kachel Wetter" (eingerückt) */ .dash-station-list { padding: 2px 0 8px 16px; margin-top: -6px; } .dash-station-list:empty { display: none; } .dash-station-head { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 2px 0 4px; } .dash-station-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13.5px; cursor: pointer; color: var(--text); } .dash-station-row input { margin: 0; accent-color: var(--brand); } /* ---------- FLEXX³ OFFICE: Adressen + Artikel & Leistungen ---------- */ /* Inaktive Zeilen (Artikel/Objekte) gedimmt */ .tenant-item.is-inactive { opacity: 0.55; } /* Chips rechts in der Adresszeile (Objekt-Anzahl, §13b) */ .row-chips { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; align-self: center; flex: none; } .chip-13b { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); border: none; font-weight: 700; } /* Kunden-Chip kundenbezogener Artikel (Muster chip-13b, mit Personen-Icon) — in Listenzeilen (row-chips) UND in searchSelect-Auswahllisten (ssel-item). */ .chip-kunde { display: inline-flex; align-items: center; gap: 4px; max-width: 170px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); border: none; } .chip-kunde .chip-ic { display: inline-flex; flex: none; } .chip-kunde .chip-ic svg { width: 12px; height: 12px; fill: currentColor; } .chip-kunde .chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ssel-item .chip-kunde { flex: none; } /* Typ-Badge (Artikel): farbige Kurzkennung je Artikel-Typ (Fallback ohne Icon) */ .typ-badge { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; padding: 3px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); } .typ-material { background: color-mix(in srgb, #2e74b5 16%, transparent); color: #2e74b5; } .typ-lohn { background: color-mix(in srgb, #1b7f3b 16%, transparent); color: #1b7f3b; } .typ-maschine { background: color-mix(in srgb, #8a5a00 18%, transparent); color: #8a5a00; } .typ-fahrt { background: color-mix(in srgb, #6a5312 18%, transparent); color: #6a5312; } .typ-fremd { background: color-mix(in srgb, #7b3fa0 16%, transparent); color: #7b3fa0; } .typ-pauschale { background: color-mix(in srgb, #0f766e 16%, transparent); color: #0f766e; } .typ-leistung { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); } [data-theme='dark'] .typ-material { color: #7db3e8; } [data-theme='dark'] .typ-lohn { color: #6ecb8d; } [data-theme='dark'] .typ-maschine { color: #d8a94a; } [data-theme='dark'] .typ-fahrt { color: #d8bf92; } [data-theme='dark'] .typ-fremd { color: #c08fe0; } [data-theme='dark'] .typ-pauschale { color: #5ecec5; } /* Rundes Typ-ICON statt Text-Kürzel (typIcon in app.js): Farbe/Fläche kommen aus den .typ--Klassen oben; is-klein = kompakte Variante vor Positions-/Komponentennamen (nur Farbe, ohne Fläche). */ .typ-ic { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; } .typ-ic svg { width: 18px; height: 18px; fill: currentColor; } .typ-ic.is-klein { width: 20px; height: 20px; background: none; } .typ-ic.is-klein svg { width: 15px; height: 15px; } /* Typ-Auswahl im Artikel-Dialog: Icon läuft neben dem Select mit */ .typ-select-wrap { display: flex; align-items: center; gap: 8px; } .typ-select-wrap select { flex: 1; min-width: 0; } /* VK-Anzeige rechts in der Artikelzeile */ .art-vk { flex: none; align-self: center; text-align: right; white-space: nowrap; } .art-vk-preis { font-weight: 700; } .art-vk-einheit { color: var(--muted); font-size: 12px; margin-left: 2px; } /* Stücklisten-Editor (Leistung) */ .komp-rows { margin: 6px 0; } .komp-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); flex-wrap: wrap; } .komp-row:first-child { border-top: none; } .komp-name { flex: 1 1 200px; min-width: 150px; display: inline-flex; align-items: center; gap: 6px; } .komp-sub { color: var(--muted); font-size: 12px; } .komp-cell { display: inline-flex; align-items: center; gap: 4px; } .komp-preis { font-size: 13px; color: var(--muted); min-width: 92px; justify-content: flex-end; } .komp-menge { width: 84px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; } .komp-menge:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .komp-einheit { color: var(--muted); font-size: 12.5px; } .komp-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; } .komp-add .ssel { flex: 1 1 220px; min-width: 180px; } /* Live-Kalkulationsbox (Leistung) */ .kalk-box { margin: 10px 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--brand) 5%, transparent); } .kalk-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 14px; } .kalk-row.is-strong { font-weight: 700; } /* Objekte-Liste im Adress-Dialog */ .obj-list { margin-bottom: 8px; } .obj-list .stamm-row.is-inactive { opacity: 0.6; } /* ---------- FLEXX³ OFFICE: Belege (Angebote/Aufträge/Rechnungen) ---------- */ /* Status-Chips: offen/entwurf grau, angenommen/gestellt cyan, bezahlt grün, storniert/abgelehnt rot, teilbezahlt gelb */ .chip-st-grau, .chip-grau { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); } .chip-st-cyan { background: color-mix(in srgb, #00d4e0 22%, transparent); color: #067a86; } .chip-st-gruen { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); } .chip-st-rot { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); } .chip-st-gelb, .chip-gelb { background: color-mix(in srgb, #e0a800 22%, transparent); color: #8a6400; } [data-theme='dark'] .chip-st-cyan { color: #6fe3ec; } [data-theme='dark'] .chip-st-gelb, [data-theme='dark'] .chip-gelb { color: #e8c568; } /* Beleg-Typ-Icon (belegTypIcon in app.js): rundes Badge statt AN/AR/…-Kürzel; Farbe/Fläche kommen aus den .typ-bg--Klassen darunter. Höhe bewusst kompakt (32px < zwei Textzeilen der Belegzeile), damit die Zeilenhöhe gegenüber den alten Kürzel-Badges stabil bleibt. */ .beleg-typ-ic { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; } .beleg-typ-ic svg { width: 19px; height: 19px; } .beleg-typ-ic.is-klein { width: 22px; height: 22px; } .beleg-typ-ic.is-klein svg { width: 15px; height: 15px; } /* Mini-Typ-Icon in den Vorgangsleisten-Chips */ .vg-chip-ic { flex: none; display: inline-flex; } .vg-chip-ic svg { width: 15px; height: 15px; } /* Farbklassen der Beleg-Typen (Badge-Fläche + Icon-Farbe) */ .typ-bg-angebot { background: color-mix(in srgb, #2e74b5 16%, transparent); color: #2e74b5; } .typ-bg-auftrag { background: color-mix(in srgb, #1b7f3b 16%, transparent); color: #1b7f3b; } .typ-bg-rechnung, .typ-bg-abschlagsrechnung, .typ-bg-schlussrechnung { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); } .typ-bg-gutschrift { background: color-mix(in srgb, #7b3fa0 16%, transparent); color: #7b3fa0; } [data-theme='dark'] .typ-bg-angebot { color: #7db3e8; } [data-theme='dark'] .typ-bg-auftrag { color: #6ecb8d; } [data-theme='dark'] .typ-bg-gutschrift { color: #c08fe0; } /* Rechte Spalte der Belegzeile: Chips + Summen + Export-Menü */ .beleg-chips { gap: 5px; } .beleg-chip-line { display: inline-flex; gap: 5px; } .beleg-sums { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; } .beleg-sum-netto { color: var(--muted); font-size: 12px; } .beleg-sum-brutto { font-weight: 700; font-size: 13.5px; } .beleg-sum-offen { color: var(--danger); font-weight: 700; font-size: 12.5px; } .beleg-row-export { flex: none; align-self: center; } /* Aktionen-Leiste oben im Beleg-Dialog (Annehmen, Rechnung erstellen, PDF …) */ .beleg-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--brand) 5%, transparent); } .beleg-status-wahl { display: inline-flex; align-items: center; gap: 6px; } /* ---- Vorgangsfaden: Anfrage → Aufmaß → Angebot → Auftrag ---- Kompakte Chip-Kette oben in den Dialogen; scrollt auf schmalen Screens IN SICH horizontal, statt das Sheet zu sprengen. */ .vg-leiste { display: flex; align-items: center; gap: 4px; padding: 8px 10px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--brand) 5%, transparent); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .vg-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; } button.vg-chip:hover { border-color: var(--brand); } .vg-chip.is-current { background: var(--brand); border-color: var(--brand); color: #fff; cursor: default; } .vg-chip-typ { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; } .vg-chip-text { font-weight: 600; max-width: 190px; overflow: hidden; text-overflow: ellipsis; } .vg-sep { flex: none; display: inline-flex; color: var(--muted); } .vg-sep svg { width: 16px; height: 16px; fill: currentColor; } /* Positions-Ansicht (read-only) : geordnete Zeilen mit OZ und Zeilensumme. display:block neutralisiert das ältere .pos-row-Grid weiter oben (VINORUM- Erbe), das für die flexx3-Zeilen mit .pos-line nicht gilt. */ .pos-editor { margin: 6px 0; } .pos-row { display: block; padding: 6px 0; border-top: 1px solid var(--border); } .pos-row:first-child { border-top: none; } .pos-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pos-line2 { margin: 4px 0 0 34px; } .pos-oz { flex: none; width: 28px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .pos-name { flex: 1 1 180px; min-width: 140px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; } .pos-num, .pos-einheit, .pos-satz { padding: 6px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px; } .pos-menge { width: 68px; } .pos-einheit { width: 58px; } .pos-ep { width: 84px; } .pos-rabatt { width: 64px; } .pos-satz { width: 66px; } .pos-besch { width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--muted); font: inherit; font-size: 12.5px; } .pos-summe { flex: none; min-width: 78px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .pos-acts { display: inline-flex; gap: 2px; flex: none; margin-left: auto; } .pos-move svg { transition: transform 0.15s; } .pos-move.is-up svg { transform: rotate(180deg); } .pos-toggles { display: inline-flex; gap: 8px; flex: none; } .pos-toggle { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; } .pos-toggle input { margin: 0; accent-color: var(--brand); } /* Titel-Zeilen optisch abgesetzt (Band in Markenfarbe) mit Zwischensumme */ .pos-row.is-titel { background: color-mix(in srgb, var(--brand) 7%, transparent); border-radius: 8px; padding: 6px 8px; border-top: none; margin-top: 6px; } .pos-row.is-titel .pos-name, .pos-row.is-titel .pos-vname { font-weight: 700; } .pos-zwlabel { flex: none; font-size: 11.5px; color: var(--muted); margin-left: auto; } .pos-row.is-titel .pos-summe { font-weight: 700; } .pos-row.is-text .pos-name, .pos-row.is-text .pos-vname { color: var(--muted); font-style: italic; } /* Alternativ-/Bedarfspositionen (ohne Summenwirkung) gedimmt + kursiv */ .pos-row.is-neben .pos-name, .pos-row.is-neben .pos-vname, .pos-row.is-neben .pos-summe, .pos-row.is-neben .pos-vzahlen { color: var(--muted); font-style: italic; } /* Read-only-Ansicht der Positionen */ .pos-editor.is-view .pos-vname { flex: 1 1 180px; min-width: 140px; display: flex; flex-direction: column; } /* Zusatzinfo in der Beleg-Ansicht: mehrzeilige Alt-Daten behalten ihre Umbrüche (das PDF druckt sie ebenfalls zeilenweise — belegpdf.js) */ .pos-vbesch { color: var(--muted); font-size: 12px; font-style: normal; white-space: pre-wrap; } .pos-vzahlen { flex: none; color: var(--muted); font-size: 12.5px; white-space: nowrap; } .pos-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; } .pos-add .btn { padding: 7px 11px; font-size: 13px; } .pos-add-artikel { flex: 1 1 220px; min-width: 180px; } .pos-add-artikel .ssel { width: 100%; } /* ---------- Beleg-Positionseditor: kompakte Grid-Zeilen (VINORUM-Prinzip) ---------- Eine Position = EINE Zeile im festen Raster mit Spaltenkopf; Beschreibung und Steuersatz liegen im aufklappbaren Detailbereich unter der Zeile. */ .bp-editor { margin: 6px 0; } .bp-row { display: grid; grid-template-columns: 24px 40px minmax(0, 1fr) 70px 70px 90px 60px 92px 118px; grid-template-areas: 'handle oz name menge einheit ep rabatt gp acts'; gap: 6px; align-items: center; padding: 4px 0; } /* Titel: Eingabe läuft bis zur Zwischensumme; Text: bis ganz rechts */ .bp-row.is-titel { grid-template-areas: 'handle oz name name name name name gp acts'; } .bp-row.is-textrow { grid-template-areas: 'handle oz name name name name name name acts'; } /* Drag-Handle: Pointer-Events (Maus + Touch); touch-action:none verhindert das Mitscrollen der Seite; Padding/negative Margin = 40px-Touch-Ziel ohne Layoutbreite */ .bp-handle { grid-area: handle; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; padding: 11px; margin: -11px; } .bp-handle:active { cursor: grabbing; } .bp-handle svg { width: 18px; height: 18px; fill: currentColor; pointer-events: none; } .bp-head .bp-handle { cursor: default; touch-action: auto; } .bp-oz { grid-area: oz; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; } .bp-name-cell { grid-area: name; display: flex; align-items: center; gap: 6px; min-width: 0; } .bp-name { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; } .bp-in { width: 100%; min-width: 0; padding: 6px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px; } .bp-name:focus, .bp-in:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .bp-num { text-align: right; } .bp-menge { grid-area: menge; } .bp-einheit { grid-area: einheit; } .bp-ep { grid-area: ep; } .bp-rabatt { grid-area: rabatt; } .bp-gp { grid-area: gp; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; } .bp-acts { grid-area: acts; display: flex; justify-content: flex-end; align-items: center; gap: 2px; } .bp-acts .icon-act { width: 26px; height: 26px; flex: none; border-radius: 7px; } .bp-acts .icon-act svg { width: 16px; height: 16px; } /* Spaltenkopf */ .bp-head { padding: 0 0 3px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); } .bp-head span { overflow: hidden; white-space: nowrap; } .bp-head .bp-menge, .bp-head .bp-ep, .bp-head .bp-rabatt { text-align: right; } /* Zeilen-Container: Trennlinien + Drag-Zustände */ .bp-item { border-top: 1px solid var(--border); } .bp-item.is-t { border-top: none; margin-top: 6px; } /* Drag-Zustände gelten auch für die Abo-Positionszeilen (gleiche Mechanik) */ .bp-item.is-dragging, .abo-pos-row.is-dragging { opacity: 0.5; } .bp-item.is-drop-before, .abo-pos-row.is-drop-before { box-shadow: 0 -2px 0 0 var(--accent); } .bp-item.is-drop-after, .abo-pos-row.is-drop-after { box-shadow: 0 2px 0 0 var(--accent); } /* Titel-Zeilen: Band schwach in Markenfarbe, fett, Zwischensumme rechts */ .bp-row.is-titel { background: color-mix(in srgb, var(--brand) 8%, transparent); border-radius: 8px; padding-right: 4px; } .bp-row.is-titel .bp-name { font-weight: 700; } /* Text-Zeilen gedimmt/kursiv */ .bp-row.is-textrow .bp-name { color: var(--muted); font-style: italic; } /* Alternativ-/Bedarfspositionen (ohne Summenwirkung) gedimmt + kursiv */ .bp-row.is-neben .bp-name, .bp-row.is-neben .bp-gp { color: var(--muted); font-style: italic; } .bp-badge { flex: none; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); white-space: nowrap; } /* Icon-Toggles Alternativ/Bedarf: aktiv mit Akzentfarbe gefüllt */ .bp-tgl.is-on, .bp-tgl.is-on:hover { background: var(--accent); border-color: var(--accent); color: #0B1320; } /* Detail-Chevron dreht sich im offenen Zustand */ .bp-det svg { transition: transform 0.15s; } .bp-det.is-open svg { transform: rotate(180deg); } /* Zusatzinfo (Beschreibung): eigene, IMMER sichtbare Zeile unter der Position — volle Breite ab der Bezeichnungs-Spalte, gedimmt wie in der Beleg-Ansicht */ .bp-beschrow { margin: 0 0 5px 70px; } .bp-beschreibung { display: block; width: 100%; min-width: 0; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--muted); font: inherit; font-size: 12.5px; line-height: 1.35; resize: vertical; } .bp-beschreibung:focus { outline: 2px solid var(--brand); outline-offset: -1px; color: var(--text); } /* Aufklappbarer Detailbereich (Steuersatz) */ .bp-details { display: none; margin: 0 0 6px 70px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; } .bp-details.is-open { display: block; } .bp-details-grid { display: grid; grid-template-columns: 130px; gap: 10px; align-items: start; } .bp-details textarea { width: 100%; resize: vertical; } /* Mobil (<860px): Bezeichnung volle Breite (mit Icons rechts), Zahlen kompakt in EINER Reihe darunter — kontrollierter Umbruch statt Feld-Stapel */ @media (max-width: 859px) { .bp-row.bp-head { display: none; } .bp-row { grid-template-columns: 24px 30px repeat(4, minmax(0, 1fr)) auto; grid-template-areas: 'handle oz name name name name acts' '. menge menge einheit ep rabatt gp'; row-gap: 4px; } .bp-row.is-titel { grid-template-areas: 'handle oz name name name gp acts'; } .bp-row.is-textrow { grid-template-areas: 'handle oz name name name name acts'; } .bp-in { padding: 6px 4px; font-size: 13px; } .bp-acts .icon-act { width: 25px; height: 25px; } .bp-details, .bp-beschrow { margin-left: 24px; } .bp-details-grid { grid-template-columns: 1fr; } } /* Live-Summenbox + §13b-Pflichthinweis */ .beleg-sumbox { margin-top: 12px; } .beleg-13b-hinweis { margin: 6px 0 0; font-size: 13px; font-weight: 600; } .beleg-viewinfo .beleg-view-chips { display: flex; gap: 6px; margin-bottom: 6px; } .beleg-absetzungen { margin-top: 8px; background: transparent; } .beleg-zahlungen { margin-top: 4px; } .beleg-offen { font-size: 14px; } .beleg-offen.is-offen { color: var(--danger); font-weight: 700; } /* Abschlag-Eingaben im Rechnung-erstellen-Dialog */ .beleg-abschlag { margin: 6px 0; } /* ============================================================ FLEXX³ HANDWERK — Anfragen, Aufmaß/KI, Planung, Monteur (mobil) ============================================================ */ /* ---- Konfidenz-Chips (KI-Leitplanken: erkannt/wahrscheinlich/unklar) ---- */ .konf-chip { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; vertical-align: middle; cursor: help; } .konf-erkannt { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); } .konf-wahrscheinlich { background: color-mix(in srgb, #e0a800 24%, transparent); color: #8a6400; } .konf-unklar { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); } [data-theme='dark'] .konf-wahrscheinlich { color: #e8c568; } /* ---- Hinweis-/Warn-Boxen (gelb) + Nachtrag-Box (orange, Revenue-Guard) ---- */ .warn-box { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #e0a800 14%, transparent); border-left: 4px solid #e0a800; font-size: 14px; } .warn-box strong { display: block; margin-bottom: 4px; } .warn-box p { margin: 4px 0 0; white-space: pre-wrap; } .warn-box ul { margin: 4px 0 0 18px; padding: 0; } .nachtrag-box { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #ff7a00 15%, transparent); border-left: 4px solid #ff7a00; font-size: 14px; } .nachtrag-box strong { display: block; margin-bottom: 4px; color: #b35600; } [data-theme='dark'] .nachtrag-box strong { color: #ffb066; } .nachtrag-box ul { margin: 4px 0 0 18px; padding: 0; } /* ---- Mikrofon-Button (Web-Speech-Diktat) ---- */ .mic-btn.is-recording { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: var(--danger); color: var(--danger); animation: micpuls 1.2s ease-in-out infinite; } @keyframes micpuls { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 18%, transparent); } } /* ---- KI-Besichtigung: Fotos, Räume, Vorschläge, offene Fragen ---- */ .ki-text { width: 100%; } .ki-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .ki-foto, .me-foto-wrap { position: relative; display: inline-block; } .ki-foto img, .me-foto { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; } .ki-foto-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--danger); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .ki-foto-x svg { width: 14px; height: 14px; fill: #fff; } .ki-raum { margin: 10px 0; } .ki-raum-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .ki-raum-name { font-weight: 700; } .ki-zeile { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--border); cursor: pointer; font-size: 14px; } .ki-zeile-text { flex: 1; min-width: 0; } .ki-zeile-masse { display: block; font-size: 12px; color: var(--muted); } .ki-hinweise { margin: 6px 0 0 18px; padding: 0; font-size: 12.5px; color: var(--muted); } .ki-liste ul { margin: 4px 0 0 18px; padding: 0; font-size: 14px; } .ki-liste li { margin: 3px 0; } .ki-pos-hinweis { color: var(--muted); font-size: 12.5px; } .ki-vorschlag { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; } .ki-vorschlag-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .ki-vorschlag p { margin: 0; white-space: pre-wrap; font-size: 14px; } /* ---- Aufmaß-Editor: Räume + Zeilen-Raster + Gesamtfläche ---- */ .am-flaeche { font-weight: 700; white-space: nowrap; } .am-raum { margin: 10px 0; } .am-raum-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .am-raum-name { flex: 1; min-width: 120px; font-weight: 700; } .am-raum-sum { font-size: 13px; color: var(--muted); white-space: nowrap; } .am-raum-flaeche { font-weight: 700; color: var(--text); } .am-zeilen { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; } .am-zeile { display: grid; align-items: center; gap: 6px; grid-template-columns: minmax(120px, 2fr) 76px 76px 56px 40px 90px 30px; } .am-zeile-kopf { font-size: 11px; color: var(--muted); font-weight: 600; } .am-zeile input[type='number'] { width: 100%; } .am-zeile .am-fl { text-align: right; font-size: 13px; white-space: nowrap; } .am-zeile.is-abzug .am-fl { color: var(--danger); } .am-abzug { display: flex; justify-content: center; } .am-gesamt { margin-top: 10px; } .am-gesamt-wert { font-weight: 800; } .am-angebot-raum { padding: 8px 0; border-top: 1px solid var(--border); } .am-angebot-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .am-angebot-name { font-weight: 600; min-width: 0; } .am-angebot-fl { margin-left: 8px; color: var(--muted); font-weight: 400; font-size: 13px; } .am-angebot-zeilen { display: flex; flex-direction: column; gap: 6px; } .am-angebot-zeile { display: flex; align-items: center; gap: 8px; } .am-angebot-zeile .ssel { flex: 1; min-width: 160px; } .am-angebot-menge { flex: none; width: 96px; } @media (max-width: 640px) { .am-zeile { grid-template-columns: 1fr 62px 62px 44px 32px 70px 26px; } .am-zeile-kopf { display: none; } } /* ---- Einsatzplanung: PLANTAFEL (Muster CURENA .ptf-*, FLEXX³-Variablen) ---- */ .plan-nav { display: flex; align-items: center; gap: 8px; margin: 10px 0; flex-wrap: wrap; } .plan-woche-label { font-weight: 600; color: var(--muted); font-size: 14px; } .plan-kopf-akt { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .plan-tafel-host { margin-top: 8px; } .ptf-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); max-width: 100%; } .ptf-wrap { overflow-x: auto; overscroll-behavior-x: contain; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; } .ptf-wrap.is-panning { cursor: grabbing; } .ptf { display: flex; flex-direction: column; width: max-content; min-width: 100%; } .ptf-row { display: flex; align-items: stretch; border-top: 1px solid var(--border); } .ptf-headrow { border-top: none; } .ptf-label { position: sticky; left: 0; z-index: 3; flex: 0 0 var(--lblw, 132px); width: var(--lblw, 132px); display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--card); box-shadow: 1px 0 0 var(--border); } .ptf-label.is-ohne .ptf-name { color: var(--muted); font-style: italic; } .ptf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 12px; } .ptf-corner { gap: 4px; padding: 4px 6px; } .ptf-zbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--brand); cursor: pointer; } .ptf-zbtn:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); border-color: var(--brand); } .ptf-zbtn svg { width: 18px; height: 18px; fill: currentColor; } .ptf-headtrack { position: relative; flex: 0 0 auto; height: 34px; } .ptf-dayhead { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--border); box-sizing: border-box; font-size: 11px; font-weight: 700; color: var(--muted); padding: 9px 0 0 6px; white-space: nowrap; overflow: hidden; } .ptf-dayhead.is-heute { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--brand); } .ptf-track { position: relative; flex: 0 0 auto; } .ptf-heute-spalte { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 7%, transparent); pointer-events: none; } /* Abwesenheits-Tönung je Art: Urlaub cyan, Wunschfrei grau, Krank rot (hell + dunkel) */ .ptf-abs { position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none; display: flex; align-items: flex-end; overflow: hidden; } .ptf-abs.is-urlaub { background: repeating-linear-gradient(45deg, rgba(0, 212, 224, 0.22) 0 6px, rgba(0, 212, 224, 0.08) 6px 12px); } .ptf-abs.is-wunschfrei { background: repeating-linear-gradient(45deg, rgba(100, 116, 139, 0.24) 0 6px, rgba(100, 116, 139, 0.09) 6px 12px); } .ptf-abs.is-krank { background: repeating-linear-gradient(45deg, rgba(255, 59, 48, 0.20) 0 6px, rgba(255, 59, 48, 0.07) 6px 12px); } .ptf-abs-label { font-size: 9.5px; font-weight: 600; padding: 0 4px 1px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ptf-bar { position: absolute; z-index: 1; display: flex; align-items: center; gap: 3px; padding: 0 5px; border-radius: 6px; background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--muted); box-shadow: var(--shadow); overflow: hidden; font-size: 11px; font-weight: 600; cursor: pointer; box-sizing: border-box; } .ptf-bar:hover { z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .ptf-bar.st-geplant { border-left-color: var(--muted); } .ptf-bar.st-laeuft { border-left-color: #00d4e0; } .ptf-bar.st-erledigt { border-left-color: var(--ok); } .ptf-bar.st-abgebrochen { border-left-color: var(--danger); } .ptf-bar.is-sperr { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); } .ptf-bar-warn { display: inline-flex; flex: 0 0 auto; } .ptf-bar-warn svg { width: 12px; height: 12px; fill: var(--danger); } .ptf-bar-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Konflikt-Hinweis im Einsatz-Dialog: GELB (nur Hinweis, kein Fehler) */ .plan-konflikt-box { background: color-mix(in srgb, #e0a800 16%, transparent); border: 1px solid color-mix(in srgb, #e0a800 45%, transparent); border-radius: 8px; padding: 8px 10px; margin: 8px 0; font-size: 13px; } .plan-konflikt-box p { margin: 4px 0 0; } /* Monteur: Urlaub & Wunschfrei (Self-Service) */ .me-abw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .me-abw-titel { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; } .me-abw-titel svg { width: 18px; height: 18px; fill: var(--brand); } .plan-dauer { font-weight: 700; white-space: nowrap; font-size: 13px; align-self: center; } .plan-dauer.is-laufend { color: #00a86b; } .plan-bericht-teil { margin: 6px 0; white-space: pre-wrap; font-size: 14px; } .plan-soll-box { margin: 8px 0; } /* ---- Nachkalkulation: Kennzahlen-Kacheln mit Soll/Ist-Balken + Ampel ---- */ .kpi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 12px 0; } .kpi-tile { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .kpi-titel { font-weight: 700; font-size: 13px; margin-bottom: 8px; } .kpi-zeile { display: flex; align-items: center; gap: 8px; margin: 4px 0; } .kpi-lbl { width: 34px; font-size: 11.5px; color: var(--muted); flex: none; } .kpi-balken { flex: 1; height: 10px; background: color-mix(in srgb, var(--muted) 14%, transparent); border-radius: 5px; overflow: hidden; } .kpi-fuellung { display: block; height: 100%; border-radius: 5px; } .kpi-fuellung.is-soll { background: var(--muted); } .kpi-fuellung.is-ist { background: var(--ok); } .kpi-fuellung.is-ist.is-ueber { background: var(--danger); } .kpi-wert { min-width: 76px; text-align: right; font-weight: 700; font-size: 12.5px; white-space: nowrap; } .kpi-sub { margin-top: 6px; font-size: 11.5px; color: var(--muted); } .ampel-box { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 10%, transparent); border-left: 4px solid var(--danger); font-size: 14px; } .ampel-box strong { color: var(--danger); display: block; margin-bottom: 4px; } .ampel-box ul { margin: 4px 0 0 18px; padding: 0; } .ampel-ok { color: var(--ok); font-weight: 600; } /* ---- Monteur-Ansicht (mobile-first): große Karten + Bedienelemente ---- */ .me-head-card { margin-bottom: 12px; } .me-nav { margin: 8px 0 0; } .me-datum { font-weight: 700; font-size: 15px; } .me-liste { display: flex; flex-direction: column; gap: 14px; } .me-card { padding: 14px; } .me-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .me-card-zeit { font-size: 18px; font-weight: 800; } .me-card-titel { font-size: 15px; font-weight: 600; margin: 4px 0 8px; overflow-wrap: anywhere; } .me-kunde { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .me-kunde-name { font-weight: 700; } .me-link { justify-content: flex-start; text-align: left; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; } .me-hinweise { font-size: 14.5px; } .me-abschnitt { margin: 14px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .me-pos { display: flex; gap: 8px; padding: 4px 0; border-top: 1px solid var(--border); font-size: 14px; } .me-pos-oz { color: var(--muted); min-width: 34px; flex: none; } .me-pos-name { flex: 1; overflow-wrap: anywhere; } .me-pos-menge { white-space: nowrap; color: var(--muted); } .me-zeit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .me-zeit-btn { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); padding: 12px 6px; cursor: pointer; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 15px; min-height: 68px; } .me-zeit-art { font-weight: 700; } .me-zeit-timer { font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 800; } .me-zeit-timer.is-leer { color: var(--muted); font-weight: 400; } .me-zeit-btn.is-active { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); box-shadow: inset 0 0 0 1px var(--ok); } .me-zeit-btn.is-active .me-zeit-timer { color: var(--ok); } .me-stop-btn { grid-column: 1 / -1; padding: 12px; font-size: 16px; font-weight: 700; } .me-mat-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 14.5px; } .me-foto-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; } .me-bericht-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } /* ---- Unterschrift (Canvas, Touch + Maus) ---- */ .sig-wrap { margin: 8px 0; } .sig-canvas { width: 100%; height: auto; max-height: 240px; display: block; background: #fff; border: 1px dashed var(--muted); border-radius: 10px; touch-action: none; cursor: crosshair; } /* ---- Mahnwesen (Segment Mahnungen) + Bank-Import (Zahlungszuordnung) ---- */ .mahn-offen { color: var(--danger); font-weight: 700; white-space: nowrap; align-self: center; flex: none; } .mahn-chip-klein { font-size: 11px; padding: 2px 8px; } .mahn-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; } .bank-seg { margin-bottom: 12px; } .bank-steps { margin-top: 12px; } .bank-radios { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; } .bank-radio { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; } .bank-start-act { justify-content: flex-start; } .bank-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .bank-zeilen { display: flex; flex-direction: column; } .bank-zeile { border-top: 1px solid var(--border); padding: 10px 0; display: flex; flex-direction: column; gap: 6px; } .bank-zeile.is-gebucht { background: color-mix(in srgb, var(--ok) 8%, transparent); border-radius: 10px; padding: 10px; border-top-color: transparent; } .bank-zeile-kopf { display: flex; justify-content: space-between; gap: 8px; } .bank-datum { color: var(--muted); font-size: 13.5px; } .bank-betrag { font-weight: 700; } .bank-zeile-text { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; } .bank-zeile-zuord { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bank-zeile-zuord .ssel { flex: 1 1 220px; min-width: 200px; } /* ---- FLEXX³ CRM: Akte, Timeline, Doppelbaum, Team-Historie ---- */ /* Baum-Filter der Kundenliste: zwei Dropdowns fließen in die filter-head-Zeile */ .crm-baumfilter { display: contents; } /* Timeline: Zeile mit rundem Typ-Icon, Kopf (Titel + Chips + Betrag rechts), Text und Unterzeile (Kunde · Mitarbeiter · Zeit) */ .crm-timeline { display: flex; flex-direction: column; } .crm-tl-row { display: flex; gap: 10px; padding: 10px 4px; align-items: flex-start; border-top: 1px solid var(--border); } .crm-tl-row:first-child { border-top: none; } .crm-tl-row.is-clickable { cursor: pointer; } .crm-tl-row.is-clickable:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); } .crm-tl-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); } .crm-tl-ic svg { width: 18px; height: 18px; fill: currentColor; } /* Beleg-Typ-Icons (belegTypIcon) laufen in der Timeline in derselben Größe mit */ .crm-tl-row .beleg-typ-ic { flex: none; align-self: flex-start; } .crm-tl-main { flex: 1; min-width: 0; } .crm-tl-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .crm-tl-titel { font-weight: 600; } .crm-tl-betrag { margin-left: auto; font-weight: 700; white-space: nowrap; } .crm-tl-text { font-size: 13.5px; margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; } .crm-tl-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .crm-tl-btns { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: auto; } /* Doppelbaum in der Akte: zwei Spalten mit Checkbox-Bäumen (mobil untereinander) */ /* ---------- Doppelbaum „Kategorien & Kriterien" (1.0.46) ---------- Zwei gerahmte Spalten, jede mit Kopf (Name · Zahl der Haken · Alles auf/zu) und einer Liste, die IN SICH scrollt — bei 168 Knoten schöbe sie sonst die ganze Akte auseinander. Ist nur EIN Baum gepflegt, nimmt er die volle Breite (eine halbe Spalte Leere sagt nichts). */ .crm-baum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .crm-baum-grid.is-einspaltig { grid-template-columns: 1fr; } @media (max-width: 720px) { .crm-baum-grid { grid-template-columns: 1fr; } } .crm-baum-col { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); min-width: 0; } .crm-baum-kopf { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bg); border-bottom: 1px solid var(--border); } .crm-baum-titel { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-baum-zahl { flex: none; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); } .crm-baum-alle { flex: none; border: 0; background: none; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; padding: 2px 4px; border-radius: 6px; } .crm-baum-alle:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); } /* HÖHE BEGRENZT + eigener Scrollbalken (Betreiber-Wunsch). Der Balken bleibt dezent und wird erst beim Überfahren der Spalte deutlicher. */ .crm-baum-liste { max-height: 300px; overflow-y: auto; padding: 6px 8px 8px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .crm-baum-liste::-webkit-scrollbar { width: 8px; } .crm-baum-liste::-webkit-scrollbar-track { background: transparent; } .crm-baum-liste::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .crm-baum-col:hover .crm-baum-liste::-webkit-scrollbar-thumb { background: var(--muted); } .crm-node-row { display: flex; align-items: center; gap: 2px; border-radius: 7px; } .crm-node-row:hover { background: var(--bg); } /* Klapp-Knopf vor der Beschriftung; Blätter bekommen denselben Platzhalter, damit alle Kästchen einer Ebene fluchten. */ .crm-node-chev { flex: none; width: 22px; height: 26px; padding: 0; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; } .crm-node-chev.is-blatt { cursor: default; } .crm-node-chev svg { width: 18px; height: 18px; fill: currentColor; display: block; transform: rotate(-90deg); transition: transform 0.15s ease; } .crm-node-chev.is-offen svg { transform: none; } .crm-node-chev:hover:not(.is-blatt) { color: var(--text); } .crm-node { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 0; cursor: pointer; font-size: 14.5px; } .crm-node input { flex: none; width: 17px; height: 17px; accent-color: var(--brand); } .crm-node-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-node.is-an { font-weight: 600; } .crm-node.is-an .crm-node-name { color: var(--brand); } /* Zahl am ZUGEKLAPPTEN Ast: so verschwindet die Auswahl beim Zuklappen nicht. */ .crm-node-zahl { flex: none; margin-right: 4px; font-size: 11px; font-weight: 700; min-width: 18px; text-align: center; padding: 1px 5px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); } /* Einrückung als Leitlinie statt als Polsterrechnung — man sieht, wohin ein Ast gehört. */ .crm-kinder { margin-left: 13px; padding-left: 10px; border-left: 1px solid var(--border); } /* Aufgaben-Zeile: Erledigt-Haken vor dem Text */ .crm-auf-check { display: inline-flex; align-items: center; flex: none; cursor: pointer; } .crm-auf-check input { width: 20px; height: 20px; accent-color: var(--brand); } /* ---------- Adress-AKTE (eine Akte mit Reitern; ersetzt Dialog + CRM-Akte) ---------- */ /* Kopf: Titel + Speichern rechts; Chips (letzter Kontakt, Aufgaben, §13b, …) */ .akte-kopf .admin-head { margin-bottom: 4px; } .akte-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; } .akte-kopf .form-error:empty { display: none; } /* Reiter-Inhalt zweispaltig (Stammdaten links, Bäume/Ansprechpartner rechts); mobil einspaltig. */ .akte-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; align-items: start; } .akte-grid > * { min-width: 0; } @media (max-width: 860px) { .akte-grid { grid-template-columns: 1fr; } } .akte-del-row { margin-top: 16px; } /* ---------- FLEXX³ ABO (Daueraufträge, Fakturalauf, SEPA) ---------- */ /* Kompakte Positionszeilen des Dauerauftrag-Editors (Muster .komp-row) */ .abo-pos-rows { margin: 6px 0; } .abo-pos-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); flex-wrap: wrap; } .abo-pos-row:first-child { border-top: none; } /* Drag-Handle (wiederverwendetes .bp-handle) sitzt links in der Zeile; grid-area greift im Flex-Kontext nicht, cursor/touch-action/Größe kommen von dort. Das negative Margin des Grid-Handles wird hier neutralisiert (Flex-Abstände). */ .abo-pos-row .bp-handle { flex: none; padding: 9px 3px; margin: 0; } .abo-pos-row input, .abo-pos-row select, .abo-pos-row textarea { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; } .abo-pos-row input:focus, .abo-pos-row select:focus, .abo-pos-row textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .abo-pos-name { flex: 1 1 200px; min-width: 150px; } .abo-pos-menge { width: 82px; } .abo-pos-einheit { width: 68px; } .abo-pos-ep { width: 96px; } .abo-pos-satz { width: 78px; } .abo-pos-gp { min-width: 88px; text-align: right; font-weight: 600; margin-left: auto; white-space: nowrap; } /* Zusatzinfo: zweite Zeile über die volle Breite (bricht im flex-wrap um) */ .abo-pos-beschr { flex: 1 1 100%; width: 100%; min-width: 0; margin: 2px 0 2px; resize: vertical; line-height: 1.35; } /* SEPA-Vorschau: Checkbox-Zeilen mit Haupt-/Unterzeile */ .sepa-row { align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--border); } .sepa-row:first-of-type { border-top: none; } .sepa-row .stamm-main { display: inline-flex; flex-direction: column; } /* Provisions-Vorschau: Summenzeile */ .pv-summe td { border-top: 2px solid var(--border); } /* Briefkopf-Profile: Logo-Vorschau im Editor */ .bk-logo-preview { display: block; max-width: 240px; max-height: 90px; margin: 6px 0; border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: #fff; } /* Briefpapier-Vorschau: hochkant (A4), deshalb höher als das Logo. */ .bk-bogen-preview { max-width: 150px; max-height: 212px; } .bk-bogen { margin: 4px 0 14px; } /* ---------- Daten-Import-Assistent (FLEXX³ ADMINISTRATION) ---------- */ .imp-zeile { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .imp-importer { min-width: 220px; margin-bottom: 0; } .imp-busy { display: flex; align-items: center; gap: 10px; } .imp-spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--brand); animation: imp-spin 0.8s linear infinite; } @keyframes imp-spin { to { transform: rotate(360deg); } } .imp-fehlt { color: var(--danger); } .imp-nicht { font-size: 11px; color: var(--muted); } .imp-abdeckung { font-size: 12px; color: var(--muted); } .imp-grp { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-top: 10px; } .imp-grp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .imp-grp-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; } .imp-marke { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; } .imp-zaehler { vertical-align: 3px; } .imp-hinweise { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: 13.5px; } .imp-hinweise ul { margin: 6px 0 0; padding-left: 18px; } .imp-hinweise li { margin: 3px 0; } .imp-warn-titel { display: flex; align-items: center; gap: 6px; font-weight: 600; margin: 12px 0 4px; } .imp-warn-titel svg { width: 18px; height: 18px; fill: var(--danger); } .imp-warnungen { margin: 0; padding-left: 18px; font-size: 13.5px; } .imp-beispiele { margin: 8px 0; font-size: 13px; color: var(--muted); } .imp-beispiele summary { cursor: pointer; } .imp-beispiele ul { margin: 6px 0 0; padding-left: 18px; } .imp-journal-zeile { border-top: 1px solid var(--border); padding: 10px 2px; cursor: pointer; } .imp-journal-zeile:first-of-type { border-top: none; } .imp-journal-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .imp-journal-zeit { font-variant-numeric: tabular-nums; font-weight: 600; } .imp-journal-user { color: var(--muted); font-size: 13px; } .chip-alarm { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); } /* ================= SEITENLEISTE + MENÜ-SCHUBLADE (1.0.45) ================= EINE Navigation für alle Größen (Muster VINORUM): ab 1280 px steht die Leiste fest links und die Kopfzeile entfällt, darunter fährt DIESELBE Leiste als Schublade über die Seite (body.menu-modus + body.menu-offen). Eingeklappt (body.sidebar-schmal) bleibt am Schreibtisch eine Icon-Spalte; der Zustand liegt je Gerät in localStorage (flexx3.sidebar). GRUND DER LEISTE: Nachtblau aus der CI — NICHT --anthracite verwenden, die Variable ist im Dunkelmodus ein HELLER Ton (dort Textfarbe). */ :root { --sb-breit: 284px; --sb-schmal: 64px; --sb-bg: #0b1320; } [data-theme='dark'] .sidebar { --sb-bg: #060c15; } .sidebar { display: none; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: var(--sb-breit); background: var(--sb-bg); color: #fff; border-right: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; transition: width 0.15s ease; } body.sidebar-schmal .sidebar { width: var(--sb-schmal); } /* Kopf: FLEXX³-Wortmarke + Betrieb + Einklapp-Knopf */ .sb-kopf { display: flex; align-items: flex-start; gap: 8px; padding: calc(14px + env(safe-area-inset-top, 0px)) 12px 13px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.09); } .sb-marke { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .sb-logo { width: 196px; max-width: 100%; height: auto; display: block; } .sb-logo-klein { width: 28px; display: none; border-radius: 7px; } .sb-betrieb { /* mittig unter der Wortmarke: gleiche Breite wie das Logo + text-align */ width: 196px; max-width: 100%; text-align: center; font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.sidebar-schmal .sb-logo, body.sidebar-schmal .sb-betrieb { display: none; } body.sidebar-schmal .sb-logo-klein { display: block; margin: 0 auto; } body.sidebar-schmal .sb-marke { display: none; } body.sidebar-schmal .sb-kopf { justify-content: center; padding-left: 12px; } /* Einklapp-Pfeil bewusst unauffällig: kein Kasten, nur ein dezentes Zeichen. */ .sb-toggle { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: rgba(255, 255, 255, 0.35); cursor: pointer; } .sb-toggle:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .sb-toggle svg { width: 18px; height: 18px; fill: currentColor; display: block; } /* Fester Kopf („Zuletzt benutzt") + scrollende Liste darunter. Der Scrollbalken bleibt dezent und wird erst beim Überfahren deutlicher — er soll die Navigation nicht überlagern. */ .sb-fix { flex: none; padding: 8px 10px 0; } body.sidebar-schmal .sb-fix { padding: 8px 6px 0; } .sb-liste { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 8px 14px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.10) transparent; } .sidebar:hover .sb-liste { scrollbar-color: rgba(255, 255, 255, 0.24) transparent; } .sb-liste::-webkit-scrollbar { width: 4px; } .sb-liste::-webkit-scrollbar-track { background: transparent; } .sb-liste::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 2px; } .sidebar:hover .sb-liste::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.24); } /* Rubrik-Block: der Kopf klappt auf/zu. */ .sb-block + .sb-block { margin-top: 2px; } .sb-gruppe { display: flex; align-items: center; gap: 6px; width: 100%; margin: 14px 0 4px; padding: 2px 10px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255, 255, 255, 0.48); text-align: left; } .sb-gruppe:hover { color: rgba(255, 255, 255, 0.7); } .sb-gruppe-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-gruppe-chev { display: inline-flex; flex: none; } .sb-gruppe-chev svg { width: 16px; height: 16px; fill: currentColor; display: block; transition: transform 0.15s ease; } .sb-block.is-zu .sb-gruppe-chev svg { transform: rotate(-90deg); } .sb-block.is-zu .sb-block-inhalt { display: none; } /* GRUPPENKOPF mit Farbmarke (--sb-f, gesetzt von renderSidebar): Rubrikname ohne das Präfix „FLEXX³" und die Erklärung daneben, auf einem ruhigen Band. Bewusst NUR die 3-px-Kante farbig — getönte Flächen konkurrierten mit den Statusfarben in den Modulen. */ .sidebar .sb-gruppe.hat-sub { /* Breite MINUS der eigenen Ränder (2 + 8): mit `width: 100%` wäre der Kopf breiter als die Liste — genau das erzeugt einen waagerechten Scrollbalken. `auto` geht NICHT: ein