/* VINORUM – Stylesheet der App-Hülle. Farbschema über CSS-Variablen; Dunkelmodus per [data-theme="dark"] auf . */ /* CI-Farben: Anthrazit #232323 · Champagner #D8BF92 · Weinrot #6D2330 · Weiss #FFFFFF */ :root { --brand: #6d2330; /* Weinrot (Akzent) */ --brand-dark: #551a25; --accent: #d8bf92; /* Champagner */ --anthracite: #232323; --bg: #f7f5f2; --card: #ffffff; --text: #232323; --muted: #6f6b67; --border: #e7e2db; --danger: #b3261e; --ok: #2e7d32; --warn-bg: #f6efe2; --shadow: 0 1px 3px rgba(35, 35, 35, 0.10), 0 4px 14px rgba(35, 35, 35, 0.06); --radius: 14px; --nav-height: 62px; } [data-theme='dark'] { --brand: #b3495a; --brand-dark: #8f3543; --accent: #d8bf92; --anthracite: #f2ede7; --bg: #1b1917; --card: #262322; --text: #f2ede7; --muted: #a6a09a; --border: #38332f; --danger: #e57373; --ok: #81c784; --warn-bg: #322b1c; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3); } /* ---------- Schriften (lokal, kein externer Dienst) ---------- Inter (SIL Open Font License) als variable Schrift, Latin-Subsets. Wird NUR im Layout „kompakt" benutzt; der Browser lädt eine Schriftdatei erst, wenn ein Zeichen daraus gebraucht wird — im klassischen Layout also gar nicht. */ @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; } /* ================= LAYOUT „KOMPAKT" (data-layout='kompakt') ================= Zweite Bauweise der Oberfläche — REIN über die Formatvorlage, kein anderes Markup: Karten ohne Schatten, Sektionen statt Kästen, Kennzahlen als zusammenhängende Leiste, Deko-Icons aus, straffere Abstände, technischere Typografie (Inter, enge Laufweite, Ziffern in gleicher Breite). Das Farbdesign (data-design) bleibt davon unberührt — Layout regelt Struktur und Abstände, Design nur Farbwerte. Umschalter: App-Einstellungen. */ [data-layout='kompakt'] { --radius: 10px; --shadow: none; --nav-height: 58px; } [data-layout='kompakt'] body, [data-layout='kompakt'] input, [data-layout='kompakt'] select, [data-layout='kompakt'] textarea, [data-layout='kompakt'] button { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; letter-spacing: -0.006em; } [data-layout='kompakt'] h1, [data-layout='kompakt'] h2, [data-layout='kompakt'] h3, [data-layout='kompakt'] .sheet-title, [data-layout='kompakt'] .module-name, [data-layout='kompakt'] strong, [data-layout='kompakt'] b { letter-spacing: -0.02em; } /* Zahlen überall in gleicher Ziffernbreite — Beträge fluchten in Listen */ [data-layout='kompakt'] .kpi-val, [data-layout='kompakt'] .betrag, [data-layout='kompakt'] .cust-no, [data-layout='kompakt'] td, [data-layout='kompakt'] .order-summe { font-variant-numeric: tabular-nums; } /* Karten abrüsten: kein Schatten, feiner Rahmen, weniger Polster */ [data-layout='kompakt'] .card { box-shadow: none; border-color: color-mix(in srgb, var(--border) 70%, transparent); padding: 16px 18px; margin-bottom: 12px; } /* Sektionstitel: Champagner-Haarlinie statt Kasten-im-Kasten */ [data-layout='kompakt'] .card h2 { font-size: 16px; padding-bottom: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--accent); } [data-layout='kompakt'] .stage-title { font-size: 12.5px; letter-spacing: 0.1em; color: var(--muted); } [data-layout='kompakt'] .dash-card-head { border-bottom: 1px solid var(--accent); padding-bottom: 6px; margin-bottom: 12px; } /* Kennzahlen: zusammenhängende Leiste statt Einzelkacheln. Die Trennlinien liegen als 1px-Kontur an JEDER Kachel (box-shadow), nicht als Fläche im Container — sonst bliebe in einer nicht voll besetzten letzten Zeile der Rasterhintergrund als leerer Block stehen. Im 1px-Spalt überlagern sich die Konturen benachbarter Kacheln zu einer durchgehenden Linie. */ [data-layout='kompakt'] .kpi-grid { gap: 1px; background: transparent; border-radius: 0; /* etwas breitere Spalten + gleiche Zeilenhöhe: sonst sind die Kacheln je nach Länge der Beschriftung unterschiedlich hoch und das Feld wirkt unruhig */ grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); grid-auto-rows: 1fr; } [data-layout='kompakt'] .kpi-tile { border: 0; border-radius: 0; background: var(--card); box-shadow: 0 0 0 1px var(--border); padding: 12px 14px; gap: 4px; justify-content: flex-start; } /* Wert immer am unteren Rand: bei ein-, zwei- oder dreizeiliger Beschriftung stehen die Zahlen dadurch auf EINER Linie — das beruhigt die Leiste sichtbar. */ [data-layout='kompakt'] .kpi-val { margin-top: auto; } [data-layout='kompakt'] .kpi-tile:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } [data-layout='kompakt'] .kpi-ic { display: none; } /* Icon war Dekoration */ [data-layout='kompakt'] .kpi-val { font-size: 19px; font-weight: 600; line-height: 1.25; } /* Beschriftung in normaler Schreibweise: Großbuchstaben bauen bei langen Bezeichnungen zwei bis drei Zeilen auf und machen die Leiste unruhig. */ [data-layout='kompakt'] .kpi-label { font-size: 12px; text-transform: none; letter-spacing: 0; order: -1; line-height: 1.3; } /* Aufmerksamkeits-Kennzahlen (überfällig, Bestand niedrig …): KEINE gefärbte Fläche — sonst entsteht in der Leiste ein Schachbrettmuster. Stattdessen hebt sich die Kachel über die weinrote KONTUR ab (die Nachbarn haben eine graue, deshalb sticht sie hervor) und trägt einen Punkt vor der Beschriftung. Der Punkt ist wichtig: So hängt die Warnung nicht allein an der Farbe und bleibt auch bei Farbsehschwäche erkennbar. */ [data-layout='kompakt'] .kpi-tile.is-accent { background: var(--card); box-shadow: 0 0 0 1px var(--brand); position: relative; z-index: 1; /* eigene Kontur über die grauen der Nachbarn legen */ } [data-layout='kompakt'] .kpi-tile.is-accent:hover { background: color-mix(in srgb, var(--brand) 7%, transparent); } [data-layout='kompakt'] .kpi-tile.is-accent .kpi-label { color: var(--brand); font-weight: 500; } [data-layout='kompakt'] .kpi-tile.is-accent .kpi-label::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-right: 6px; vertical-align: 1px; } [data-layout='kompakt'] .kpi-tile.is-accent .kpi-val { font-weight: 700; } /* Hinweise (Geburtstage, An-/Abreisen, offene Anfragen …): nur ein Champagner-Punkt vor der Beschriftung — sie sollen auffindbar sein, aber den echten Warnungen nicht die Aufmerksamkeit nehmen. */ [data-layout='kompakt'] .kpi-tile.is-info .kpi-label::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; } /* Modul-Kacheln: zusammenhängendes Raster, Trennlinien wie bei den Kennzahlen als Kontur je Kachel (keine Füllfläche im Container — siehe oben). */ [data-layout='kompakt'] .module-grid { gap: 1px; background: transparent; border-radius: 0; } [data-layout='kompakt'] .module-tile { border: 0; border-radius: 0; background: var(--card); box-shadow: 0 0 0 1px var(--border); padding: 13px 15px; gap: 10px; } [data-layout='kompakt'] .module-tile.is-clickable:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } /* NUR die Dashboard-Kacheln bekommen die schmale Marke statt des Symbols — die Symbole in LISTEN bleiben sichtbar (sie tragen dort Information, z. B. die Herkunft eines Auftrags). */ [data-layout='kompakt'] .module-tile > .module-icon { width: 3px; height: 34px; border-radius: 2px; background: color-mix(in srgb, var(--brand) 45%, transparent); } [data-layout='kompakt'] .module-tile > .module-icon svg { display: none; } [data-layout='kompakt'] .module-name { font-weight: 600; } /* Chips: Umriss statt Farbfläche — auf langen Listen viel ruhiger */ [data-layout='kompakt'] .chip { background: transparent !important; border: 1px solid currentColor; font-weight: 500; padding: 1px 7px; } [data-layout='kompakt'] .chip-live { color: var(--ok); } [data-layout='kompakt'] .chip-plan, [data-layout='kompakt'] .chip-soon { color: var(--muted); } /* Listen straffen: weniger Höhe je Zeile, feinere Trenner */ [data-layout='kompakt'] .stamm-row, [data-layout='kompakt'] .cust-row, [data-layout='kompakt'] .order-row { padding-top: 9px; padding-bottom: 9px; } [data-layout='kompakt'] .list-sep, [data-layout='kompakt'] .stamm-row { border-color: color-mix(in srgb, var(--border) 65%, transparent); } /* Eingaben und Knöpfe: geradere Kanten, ruhigere Flächen */ [data-layout='kompakt'] input, [data-layout='kompakt'] select, [data-layout='kompakt'] textarea, [data-layout='kompakt'] .field input, [data-layout='kompakt'] .field select, [data-layout='kompakt'] .field textarea, [data-layout='kompakt'] .btn { border-radius: 8px; } /* Dialoge am Rechner ebenfalls geradliniger (mobil bleibt das Bottom-Sheet) */ @media (min-width: 860px) { [data-layout='kompakt'] .modal-sheet { border-radius: 12px; } } [data-layout='kompakt'] .btn.primary { background: var(--anthracite); border-color: var(--anthracite); } [data-layout='kompakt'] .btn.primary:hover { background: #000; border-color: #000; } [data-theme='dark'][data-layout='kompakt'] .btn.primary { color: var(--bg); } /* Untere Leiste: schmaler, ohne Verlauf */ [data-layout='kompakt'] .bottom-nav { border-top: 1px solid var(--border); } [data-layout='kompakt'] .nav-btn { font-size: 10.5px; letter-spacing: 0.02em; } /* ---------- 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; } body { /* CI-Schrift Montserrat (auf dem Server unter vendor/fonts/ ergänzbar); geometrische System-Fallbacks für Offline-Betrieb. */ font-family: 'Montserrat', 'Century Gothic', 'Segoe UI', system-ui, -apple-system, sans-serif; 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; } .lang-btn { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--text) 7%, transparent); border: none; border-radius: 999px; padding: 6px 10px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); } .lang-btn:hover { background: color-mix(in srgb, var(--text) 12%, 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; } /* ---------- VINORUM 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_vinorum_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; } /* Versionsanzeige ist überall anklickbar = sofortige Update-Prüfung mit Rückmeldung. */ .version-check { cursor: pointer; } .version-check:hover { color: var(--brand); text-decoration: underline; } /* 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; align-items: flex-start; /* Streifen oben andocken (Scrollbar liegt darunter) */ z-index: 20; /* Die FIXIERTE Leiste selbst scrollt NICHT (sonst driftet sie auf iOS beim vertikalen Scrollen mit) — sie clippt nur; der innere Streifen scrollt. overflow:hidden schneidet zugleich die (nach unten geschobene) Scrollbar weg. */ 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; } /* Innerer, horizontal verschiebbarer Streifen (Handy: mehr Tabs als Breite). Er ist ABSICHTLICH höher als die sichtbare Leiste, damit die horizontale Scrollbar unterhalb landet und von .bottom-nav (overflow:hidden) weggeschnitten wird — so überdeckt sie NIE die Tab-Beschriftungen (Browser, die scrollbar-width:none ignorieren). */ .bottom-nav-scroll { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; height: calc(var(--nav-height) + 40px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; -webkit-overflow-scrolling: touch; /* iOS-Momentum */ overscroll-behavior: contain; /* kein Scroll-Chaining zur Seite */ touch-action: pan-x; /* nur links/rechts, nicht vertikal */ } .bottom-nav-scroll::-webkit-scrollbar { display: none; } /* Buttons nur so hoch wie die sichtbare Leiste (Inhalt bleibt korrekt zentriert) */ .bottom-nav-scroll .nav-btn { height: var(--nav-height); } .nav-btn { /* Wachsen, um die Leiste zu füllen, wenn Platz ist; sonst feste Mindestbreite (dann verschiebt sich die Leiste horizontal statt zu quetschen). */ flex: 1 0 auto; min-width: 62px; border: none; background: none; color: var(--muted); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding-left: 4px; padding-right: 4px; } .nav-btn svg { width: 24px; height: 24px; fill: currentColor; } .nav-btn .nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .nav-btn.is-active { color: var(--brand); } /* „Mehr"-Menü: Popup über der Leiste, nur wenn nicht alle Tabs passen */ .nav-mehr-panel { position: fixed; right: 8px; bottom: calc(var(--nav-height) + 8px + env(safe-area-inset-bottom, 0px)); z-index: 30; padding: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); max-width: min(92vw, 340px); } .nav-mehr-item { display: flex; flex-direction: column; align-items: center; gap: 4px; border: none; background: none; cursor: pointer; color: var(--muted); font: inherit; font-size: 11px; font-weight: 600; padding: 10px 6px; border-radius: 10px; min-width: 86px; } .nav-mehr-item svg { width: 24px; height: 24px; fill: currentColor; } .nav-mehr-item:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); } .nav-mehr-item.is-active { color: var(--brand); } /* ---------- 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 ---------- */ /* Kein Akzentbalken links — die Sektionen setzen sich über ihre Überschrift mit Champagner-Linie ab, das reicht und wirkt ruhiger. */ .stage-title { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand); } .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; /* Kachelfläche wie die Karte (weiß) — abgesetzt wird nur über den Rahmen; die frühere beige Füllung ließ das Dashboard unruhig wirken. */ background: var(--card); } /* Symbol in LISTENZEILEN: nur das Zeichen, keine Kachelfläche. In der Auftragsliste trägt es die Herkunft (Vinothek, Webshop, Event, Belegungsplan) und soll auf einen Blick lesbar sein, ohne die Zeile zu beschweren. */ .module-icon { flex: none; width: 28px; height: 28px; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--muted); } .module-icon svg { width: 21px; height: 21px; fill: currentColor; } /* Dashboard-Modulkacheln behalten die getönte Fläche als Blickfang. */ .module-tile > .module-icon { width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--anthracite); } .module-tile > .module-icon svg { width: 22px; height: 22px; } .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; } /* ---------- 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 */ /* Herkunft eines Belegs (Webshop, Vinothek, Event, Belegungsplan): dieselbe ruhige Farbe wie die übrigen Zeilensymbole — unterschieden wird über das Symbol selbst (Weinglas, Einkaufswagen, Kalender), nicht über Farbe. */ .module-icon.is-shop-order { background: transparent; color: var(--muted); } [data-theme='dark'] .module-icon.is-shop-order { color: var(--muted); } .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); } /* Steht eine Status-Gruppe in der Titelzeile, hätten BEIDE ein margin-left:auto — der freie Raum würde geteilt und der Status landete in der Mitte. Deshalb schiebt dann die Status-Gruppe nach rechts und das X folgt mit festem Abstand. (~ statt +: es kann noch etwas dazwischenstehen.) */ .sheet-title-status ~ .sheet-title-x { margin-left: 14px; } /* 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; } /* Am Handy bekommt der Kopf eine feste Ordnung: Titel oben links, das Schließen-X IMMER oben rechts (absolut, damit es nicht als drittes Flex-Kind in eine eigene Zeile rutscht), der Status darunter rechts. Das padding-right hält die Titelzeile vom X frei; die Statuszeile holt es per negativem Rand wieder heran, damit sie am Rand fluchtet. */ .sheet-title { flex-wrap: wrap; position: relative; padding-right: 58px; } .sheet-title .sheet-title-x { position: absolute; top: 13px; right: 18px; margin: 0; } .sheet-title-status { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; margin: 0 -40px 0 0; } } .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; } /* Parzellen-Karte: immer volle Formularbreite */ .sheet-body form > .field.vb-geo-feld { 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. VIP, Newsletter) */ .check-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; cursor: pointer; font-size: 15px; } .check-row input[type='checkbox'] { width: 18px; height: 18px; accent-color: var(--brand); flex: none; } /* Gefahren-Button (Löschen) links in den Sheet-Aktionen */ /* Weingut endgültig löschen (Operator): Aufzählung dessen, was verschwindet */ .tn-del-liste { margin: 6px 0 14px; padding-left: 20px; font-size: 13.5px; line-height: 1.6; } .tn-del-ergebnis { margin: 10px 0 0; } .ok-text { color: #1e7e34; font-weight: 600; margin: 0 0 6px; } [data-theme='dark'] .ok-text { color: #57bb6f; } .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; text-align: right; } /* Beleg-Referenz im Journal (Auftragsnummer): klickbar, öffnet den Auftrag */ .journal-ref { color: var(--brand); text-decoration: none; font-weight: 600; } .journal-ref:hover { text-decoration: underline; } /* ---------- 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: Zeitraum + Status als Dropdowns ---------- */ .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; } .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; } /* Bezeichnungen nie umbrechen — das Panel wächst mit dem längsten Namen. */ .exp-fmt-name { font-size: 14px; font-weight: 600; white-space: nowrap; } .exp-fmt-panel { width: max-content; max-width: 92vw; } .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; } /* Handy: Beleg-Zeilen (die mit Aktionsspalte) bekommen eine feste Ordnung statt des freien Flex-Umbruchs — sonst zerreißt der Umbruch die Belegnummer und die Aktionen stehen einzeln untereinander. Zeile 1: Symbol | Text | Betrag, Zeile 2: die Aktionen rechts. Die Platzhalter (nur für die Spaltenflucht am Desktop) entfallen mobil. */ @media (max-width: 600px) { .tenant-item:has(> .order-row-acts) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: 10px; row-gap: 4px; padding: 10px 12px; } .tenant-item:has(> .order-row-acts) > .module-icon { grid-area: 1 / 1; margin-top: 1px; } .tenant-item:has(> .order-row-acts) > .tenant-main { grid-area: 1 / 2; min-width: 0; } .tenant-item:has(> .order-row-acts) > .order-sum { grid-area: 1 / 3; } .tenant-item:has(> .order-row-acts) > .order-row-acts { grid-area: 2 / 2 / auto / -1; justify-content: flex-end; margin: 0; } .order-row-acts .icon-act-ph { display: none; } .tenant-name { font-size: 14px; } .tenant-sub { font-size: 12.5px; } .order-sum { font-size: 14.5px; } } /* 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: Rechnungen vorbereiten | Rechnungen */ /* Belege-Tab: Bereichs-Umschalter (Angebote | Aufträge | Rechnungen) */ .belege-seg { 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 { 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; } /* 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); } /* Hinweis am Gruppenkopf: fehlt die Rechnungs-E-Mail, kann der Stapellauf die Rechnung nur erstellen, nicht versenden. */ .fk-vb-kunde { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fk-vb-name.is-clickable { cursor: pointer; } .fk-vb-name.is-clickable:hover { color: var(--brand); text-decoration: underline; } .fk-vb-warn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #b26a00; } .fk-vb-warn svg { width: 14px; height: 14px; fill: currentColor; } [data-theme='dark'] .fk-vb-warn { color: #e0a33c; } /* Stapellauf „Alle erstellen & senden" */ .fk-stapel-host { display: flex; align-items: center; } .fk-st-hinweis { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; color: #8a5300; background: color-mix(in srgb, #d99b2b 14%, transparent); } .fk-st-hinweis svg { width: 17px; height: 17px; fill: currentColor; flex: none; margin-top: 1px; } [data-theme='dark'] .fk-st-hinweis { color: #e8bd77; } .fk-st-liste { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; } .fk-st-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; } .fk-st-row + .fk-st-row { border-top: 1px solid var(--border); } .fk-st-main { flex: 1; min-width: 0; } .fk-st-stat { flex: none; font-size: 12.5px; color: var(--muted); text-align: right; max-width: 46%; overflow-wrap: anywhere; } .fk-st-stat.is-warn { color: #b26a00; } .fk-st-stat.is-lauf { color: var(--brand); } .fk-st-stat.is-ok { color: #1e7e34; font-weight: 600; } .fk-st-stat.is-fehler { color: #b3261e; font-weight: 600; } [data-theme='dark'] .fk-st-stat.is-warn { color: #e0a33c; } [data-theme='dark'] .fk-st-stat.is-ok { color: #57bb6f; } [data-theme='dark'] .fk-st-stat.is-fehler { color: #e57373; } /* 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; } /* Kunde-Zeile im Vinothek-Kopf: seit Scan + Tagesabschluss stehen hier VIER Elemente — am Handy umbrechen (Kunden-Auswahl volle Breite, Knöpfe darunter), sonst schob die nicht umbrechende Zeile die Maske aus dem Bild. */ .vino-kunde-zeile { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 260px; } @media (max-width: 700px) { /* Am Handy umbrechen: flex-basis 100% (nicht width) — die Zeile hat flex:1, width bliebe neben der Überschrift statt in die nächste Zeile zu rutschen. Desktop behält die EINE Zeile (Elemente schrumpfen wie bisher). */ .vino-kunde-zeile { min-width: 0; flex: 1 1 100%; flex-wrap: wrap; } .vino-kunde-zeile .ssel { flex-basis: 100%; } .vino-kunde-zeile .btn { flex: 1 1 auto; justify-content: center; } } .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; } /* ---------- VINORUM 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; } /* Im Ausgabe-Band des Auftrags steht der Block NEBEN den Beleg-Gruppen: das margin-top würde ihn dort gegenüber den Gruppen nach unten versetzen. */ .order-form-actions .sv-block { margin-top: 0; } .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) — Kopfzeile .sv-pak-head nutzt DIESELBEN Spaltenbreiten wie die Eingaben. */ .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, .sv-pak-row select { padding: 9px 10px; font: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); } .sv-pak-row input:focus, .sv-pak-row select:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .sv-pak-row input[type='text'], .sv-pak-row select { flex: 1; min-width: 110px; } .sv-pak-row input[type='number'] { flex: none; width: 92px; text-align: right; } .sv-pak-head { font-size: 11.5px; color: var(--muted); margin-bottom: -2px; } .sv-pak-head > span { flex: none; width: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sv-pak-head > span:first-child { flex: 1; width: auto; min-width: 110px; } .sv-pak-head > span:last-child { width: 38px; } /* ---------- 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; } /* ---------- Empfängerauswahl (Serienbrief, Newsletter) ---------- */ .ea-wrap { border: 1px solid var(--border); border-radius: 10px; padding: 8px; } .ea-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; } .ea-filter .filter-search { flex: 1; min-width: 160px; } .ea-liste { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; } .ea-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; cursor: pointer; } .ea-row:hover { background: var(--bg); } .ea-row input { flex: 0 0 auto; } .ea-name { font-size: 14px; } .ea-sub { color: var(--muted); font-size: 12px; margin-left: auto; text-align: right; } .ea-kopf { border-bottom: 1px solid var(--border); border-radius: 0; font-weight: 600; } .ea-kopf .ea-zaehler { margin-left: auto; font-weight: 400; } .ea-ablegen { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 8px 0 2px; cursor: pointer; } /* Resistenzmanagement: Wirkstoffgruppen-Konto in der Jahresübersicht */ .vb-wg-zeile { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; } .vb-wg-chip { display: inline-block; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-variant-numeric: tabular-nums; background: var(--card); } .vb-wg-chip.is-voll { border-color: var(--brand); color: var(--brand); font-weight: 600; } /* PS-Doku 2026: Laubwand-Vorschau im Parzellen-Dialog + B2-Hinweis */ .vb-lwf-hint { margin: -4px 0 8px; } .vb-lwf-wert { color: var(--brand); font-weight: 600; } .vb-b2-hinweis { color: var(--brand); } /* ---------- Wissensdatenbank (KI-Diagnostik, Operator/Berater) ---------- */ /* Bild-KARTEN (Muster Lieferadressen): Vorschau links, Rolle+Beschreibung rechts, Entfernen-Knopf; „+ Weiteres Bild" darunter. */ .dx-karten { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; } .dx-karte { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 10px; align-items: start; } .dx-karte img { width: 130px; height: 110px; object-fit: cover; border-radius: 8px; background: var(--bg); cursor: zoom-in; } .dx-karte-felder .field { margin-bottom: 6px; } .dx-karte-felder .field:last-child { margin-bottom: 0; } .dx-add-zeile { margin-top: 4px; } @media (max-width: 560px) { .dx-karte { grid-template-columns: 90px minmax(0, 1fr) auto; } .dx-karte img { width: 90px; height: 80px; } } .dx-datum-zeile { display: flex; gap: 6px; } .dx-datum-zeile input[type='number'] { width: 84px; } .dx-datum-zeile select { flex: 0 0 auto; } .dx-urteil { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 10px; } .dx-urteil h3 { margin: 0 0 8px; font-size: 15px; } .dx-acts { flex-wrap: wrap; } /* Newsletter: Versand-Protokoll */ .nl-log { border: 1px solid var(--border); border-radius: 10px; padding: 6px 8px; max-height: 220px; overflow-y: auto; } .nl-log-zeile { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 13.5px; } .nl-log-zeile .ea-sub { margin-left: auto; } .nl-log-zeile.is-fehler { color: var(--brand); } .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); } /* ---------- 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; } .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 (VINORUM 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; } /* Infektionsfenster: Band im Verlauf (kräftiger = „wahrscheinlich") + „Jetzt"-Linie */ .pt-fenster { fill: var(--brand); opacity: 0.10; } .pt-fenster.is-stark { opacity: 0.20; } .pt-jetzt { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.45; } .pt-fenster-liste { margin: 6px 0 2px; display: flex; flex-direction: column; gap: 6px; } .pt-fenster-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; } .pt-fenster-marke { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 4px; border-radius: 3px; background: color-mix(in srgb, var(--brand) 25%, transparent); } .pt-fenster-row.is-stark .pt-fenster-marke { background: var(--brand); } .pt-fenster-detail { display: block; color: var(--muted); font-size: 12.5px; } /* Hinweiszeile auf der Stationskarte (unter dem Prognose-Streifen) */ .pt-fenster-hinweis { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--muted); } .pt-fenster-hinweis svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; } .pt-fenster-hinweis.is-stark { color: var(--brand); font-weight: 600; } .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 (VINORUM 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; } /* Wochentags-CHIPS (Event-Serien + Anreisetage der Saisons): die native Checkbox ist versteckt, der Label-Pill zeigt die Auswahl — gewählt = gefüllt in Weinrot, kein Checkbox-Rand mehr. */ .rt-wd { position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:42px; padding:6px 12px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--text); font-size:13px; cursor:pointer; user-select:none; transition:background .12s, border-color .12s, color .12s; } .rt-wd:hover { border-color:var(--brand); } .rt-wd input { position:absolute; opacity:0; pointer-events:none; margin:0; } /* Auswahl über die Klasse .is-an (per JS beim Umschalten gesetzt) — NICHT über :has(input:checked): dessen Stil-Invalidierung ist in manchen Chromium-Builds unzuverlässig (matches() trifft, der Stil wird aber nicht neu berechnet). */ .rt-wd.is-an { background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; } .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); } /* ---------- Modul Events & Führungen (VINORUM Booking) ---------- */ .ev-datum-head { margin: 14px 0 4px; font-weight: 700; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .ev-termin-row.is-abgesagt .tenant-name { text-decoration: line-through; opacity: .6; } .ev-auslastung { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; padding: 3px 10px; border-radius: 999px; } .ev-auslastung.is-ok { background: #e2efe0; color: #1f5c2e; } .ev-auslastung.is-untermin { background: #f3ead9; color: #7a5a13; } .ev-auslastung.is-voll { background: #f3e3e3; color: #8a1f1f; } [data-theme='dark'] .ev-auslastung.is-ok { background: #1d3320; color: #9fd3a4; } [data-theme='dark'] .ev-auslastung.is-untermin { background: #3a321c; color: #e0c37a; } [data-theme='dark'] .ev-auslastung.is-voll { background: #3a2020; color: #e09a9a; } .ev-buchung-liste { display: flex; flex-direction: column; gap: 6px; } .ev-buchung-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; } .ev-buchung-row.is-storniert { opacity: .55; } .ev-buchung-row.is-storniert .ev-b-name { text-decoration: line-through; } .ev-b-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ev-b-name { font-weight: 600; } .ev-b-sub { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; } .ev-b-acts { display: flex; gap: 6px; flex: none; } .ev-absage { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .ev-absage input { min-width: 220px; } .ev-vorschau { color: var(--brand); } .ev-scan-btn svg { width: 18px; height: 18px; vertical-align: -3px; fill: currentColor; } /* Ticket-Scanner: Vollbild-Overlay mit Kamera + Ergebnis-Ampel */ .ev-scan { position: fixed; inset: 0; z-index: 300; background: var(--bg); display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow: auto; } .ev-scan-head { display: flex; align-items: center; gap: 10px; } .ev-scan-head svg { width: 22px; height: 22px; fill: var(--brand); } .ev-scan-head strong { flex: 1; font-size: 17px; } .ev-scan-video { width: 100%; max-height: 45vh; border-radius: 14px; background: #000; object-fit: cover; } .ev-scan-status { margin: 0; color: var(--muted); font-size: 13px; text-align: center; } .ev-scan-result { min-height: 40px; } .ev-scan-card { border-radius: 14px; padding: 16px; text-align: center; } .ev-scan-card.is-gruen { background: #e2efe0; color: #1f5c2e; } .ev-scan-card.is-rot { background: #f3e3e3; color: #8a1f1f; } [data-theme='dark'] .ev-scan-card.is-gruen { background: #1d3320; color: #9fd3a4; } [data-theme='dark'] .ev-scan-card.is-rot { background: #3a2020; color: #e09a9a; } .ev-scan-titel { margin: 0 0 6px; font-size: 19px; font-weight: 800; } .ev-scan-info { margin: 2px 0; font-size: 14px; } .ev-scan-entwerten { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 12px; flex-wrap: wrap; } .ev-scan-entwerten input { width: 70px; } .ev-scan-manuell { display: flex; gap: 8px; margin-top: auto; } .ev-scan-manuell input { flex: 1; } .ev-seg { margin: 4px 0 10px; } .ev-angebote-foot { margin-top: 12px; } .tenant-item.is-inactive .tenant-name { opacity: .55; } /* Events: Angebots-/Termin-Accordions (eine Seite, lazy) */ .ev-acc-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .ev-angebot-acc { border: 1px solid var(--border); border-radius: 12px; background: var(--card); } .ev-angebot-acc.is-inactive > summary .ev-acc-titel { opacity: .55; } .ev-acc-sum { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; } .ev-acc-sum::-webkit-details-marker { display: none; } .ev-acc-chevron { flex: none; width: 20px; height: 20px; transition: transform .15s; } .ev-acc-chevron svg { width: 20px; height: 20px; fill: var(--muted); } details[open] > .ev-acc-sum > .ev-acc-chevron { transform: rotate(90deg); } .ev-acc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ev-acc-titel { font-weight: 600; } .ev-acc-sub { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; } .ev-acc-sum .icon-act { flex: none; } .ev-acc-body { padding: 4px 12px 12px 20px; display: flex; flex-direction: column; gap: 8px; } .ev-termin-acc { border: 1px solid var(--border); border-radius: 10px; } .ev-termin-acc.is-abgesagt > summary .ev-acc-titel { text-decoration: line-through; opacity: .6; } .ev-termin-acc > .ev-acc-sum { padding: 8px 10px; } .ev-termin-body { padding: 4px 10px 10px 18px; display: flex; flex-direction: column; gap: 8px; } .ev-termin-foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .ev-chip-host { flex: none; display: inline-flex; } /* Buchen im Termin-Accordion-Kopf: dezentes Gast-hinzufügen-Icon hinter der Verfügbarkeit */ .ev-buch-btn { flex: none; } .ev-buch-btn svg { width: 19px; height: 19px; } .ev-buch-btn:hover svg { fill: var(--brand); } /* Teilnehmerliste im Termin-Accordion: deutlich einrücken (Übersichtlichkeit) */ .ev-termin-body .ev-buchung-liste { margin-left: 32px; } @media (max-width: 560px) { .ev-termin-body .ev-buchung-liste { margin-left: 14px; } } /* Absage-Dialog: Warnzeilen */ .ev-absage-warn { display: flex; align-items: flex-start; gap: 7px; background: #f3e3e3; color: #8a1f1f; border-radius: 9px; padding: 8px 11px; font-size: 13.5px; margin: 8px 0; } [data-theme='dark'] .ev-absage-warn { background: #3a2020; color: #e09a9a; } .ev-absage-warn svg { width: 17px; height: 17px; fill: currentColor; flex: none; margin-top: 1px; } /* Kleiner Link-Button rechts oben in einer Dashboard-Kachel (Buchungsfenster) */ .module-tile { position: relative; } .module-link-btn { position: absolute; top: 8px; right: 8px; border: none; background: none; padding: 4px; cursor: pointer; border-radius: 7px; line-height: 0; } .module-link-btn svg { width: 16px; height: 16px; fill: var(--muted); } .module-link-btn:hover svg { fill: var(--brand); } /* Vinothek: Zahlart-Segment einzeilig, volle Breite, gleich breite Felder */ .vino-zahlart { flex-wrap: nowrap; display: flex; width: 100%; } .vino-zahlart button { white-space: nowrap; padding-left: 4px; padding-right: 4px; flex: 1 1 0; min-width: 0; font-size: 12.5px; text-align: center; } /* Kellerbuch/Produktion-Komfort (1.2.78) */ .kb-ernte-host { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .kb-ernte-row { display: flex; align-items: center; gap: 10px; background: #f3ead9; border: 1px solid #e2cfa4; border-radius: 10px; padding: 8px 12px; font-size: 13.5px; } [data-theme='dark'] .kb-ernte-row { background: #3a321c; border-color: #5a4c2c; } .kb-ernte-row svg { width: 18px; height: 18px; fill: var(--brand); flex: none; } .kb-ernte-text { flex: 1; min-width: 0; } .kb-abstich-row { margin: -4px 0 8px; } .kb-abstich-row button[hidden] { display: none; } .kb-vorlage-save { display: flex; gap: 8px; align-items: center; } .kb-vorlage-save input { max-width: 180px; } .pr-warn-host { display: flex; flex-direction: column; } /* Abfüllung: Fertigware-/Material-Zeilen als Flex-Zeile (Artikel wächst, Gebinde/Menge fest, X hinten) — Select + Inputs im App-Look. */ .pr-zeile { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .pr-zeile > .ssel { flex: 1; min-width: 0; } .pr-zeile > select, .pr-zeile > input { flex: none; padding: 10px 12px; font: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); } .pr-zeile > select:focus, .pr-zeile > input:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .pr-gebinde { width: 104px; } .pr-menge { width: 104px; } .kb-analyse-acc { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 10px 0; } .kb-analyse-acc > summary { cursor: pointer; font-weight: 600; } .kb-analyse-svg { width: 100%; height: auto; } .kb-analyse-svg .axis { stroke: var(--border); stroke-width: 1; } .kb-analyse-svg .linie { fill: none; stroke: var(--brand); stroke-width: 2; } .kb-analyse-svg .punkt { fill: var(--brand); } .kb-analyse-svg .lbl { font-size: 11px; fill: var(--muted); } .kb-wein.is-clickable { cursor: pointer; } .kb-wein.is-clickable:hover { color: var(--brand); text-decoration: underline; } /* Weinberge: parzellen-zentriert (1.2.79) */ .vb-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; } .vb-chips::-webkit-scrollbar { display: none; } .vb-chip { flex: none; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--text); font-size: 13.5px; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); } .vb-chip:hover { border-color: var(--brand); } .vb-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; } .vb-kopf { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; } .vb-kopf-zeile { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .vb-kopf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; } .vb-kopf-feld { display: flex; flex-direction: column; font-size: 13.5px; } .vb-kopf-label { color: var(--muted); font-size: 11.5px; } .vb-bbch { max-width: 90px; padding: 5px 10px; font: inherit; font-size: 13.5px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); } .vb-bbch:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .vb-risiko { margin-left: auto; } .vb-jahr { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; margin: 10px 0 0; padding: 8px 12px; border: 1px dashed var(--border); border-radius: 10px; font-size: 13.5px; } /* Laufende Wartezeiten (Erntesperre) in der Parzellen-Info */ .vb-wartezeiten { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: #f9ecdd; border: 1px solid #ecd3ac; color: #7a4a12; } [data-theme='dark'] .vb-wartezeiten { background: #3a2f1c; border-color: #5c4a2a; color: #e6bb7f; } .vb-wz-titel { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; } .vb-wz-titel svg { width: 16px; height: 16px; fill: currentColor; } .vb-wz-chip { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); border: 1px solid #ecd3ac; } [data-theme='dark'] .vb-wz-chip { background: rgba(0, 0, 0, 0.25); border-color: #5c4a2a; } /* Wartezeit-Chip an der Journal-Zeile */ .chip-wz { background: #f9ecdd; border: 1px solid #ecd3ac; color: #7a4a12; } [data-theme='dark'] .chip-wz { background: #3a2f1c; border-color: #5c4a2a; color: #e6bb7f; } .vb-jahr:empty { display: none; } /* Schlagkartei-Kopf: Hinweis in Klammern hinter der Überschrift, Export rechts in der Filterzeile. */ .vb-kartei-hinweis { font-size: 12px; font-weight: 400; color: var(--muted); white-space: normal; } .vb-export { margin-left: auto; } .vb-jahr-titel { font-weight: 700; } .vb-jahr-kpi b { font-variant-numeric: tabular-nums; } /* Mittel-Zeile (Tankmischung): EIN Grid je Mittel — jedes Feld mit Beschriftung DARÜBER (.vb-feld). Am Handy rutschen Aufwand/WZ/Zweck in eine 2. Zeile. */ .vb-mittel-zeile { display: grid; gap: 8px; align-items: end; grid-template-columns: minmax(0, 2fr) 118px 78px minmax(0, 1.1fr) 38px; grid-template-areas: 'mittel aufwand wz zweck x'; } .vb-feld { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .vb-feld-lbl { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vb-mittel-zeile > .vb-mittel-sel { grid-area: mittel; } .vb-mittel-zeile > .vb-aufwand { grid-area: aufwand; } .vb-mittel-zeile > .vb-wz { grid-area: wz; } .vb-mittel-zeile > .vb-zweck { grid-area: zweck; } .vb-mittel-zeile > .vb-mzx { grid-area: x; align-self: end; } .vb-feld > input { width: 100%; min-width: 0; padding: 10px 12px; font: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); } .vb-feld > input:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .vb-feld > input[readonly] { background: var(--card); color: var(--muted); } .vb-feld > .ssel { width: 100%; } /* Typische-Arbeiten-Chips (Bodenbearbeitung/Laubarbeit) — rt-wd als Button */ .vb-arbeit-chips .rt-wd { font: inherit; font-size: 13px; } /* ---------- Flexibles Dashboard: Long-Press-Sortierung + Ausblenden ---------- */ .is-dash-drag { opacity: 0.8; transform: scale(1.03); z-index: 60; position: relative; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); cursor: grabbing; } /* Drag-Klon folgt dem Zeiger; das Original bleibt als Platzhalter im Raster */ .dash-drag-klon { position: fixed; z-index: 200; pointer-events: none; opacity: 0.9; transform: scale(1.03); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); background: var(--card); border-radius: 12px; } .is-dash-platz { opacity: 0.35; outline: 2px dashed var(--brand); outline-offset: -2px; } body.is-dash-sortier { user-select: none; cursor: grabbing; } /* Ausblenden-Auge auf Modul-/KPI-Kacheln: dezent, erst beim Überfahren deutlich */ .module-tile, .kpi-tile { position: relative; } .tile-hide { position: absolute; top: 6px; right: 6px; padding: 4px; border-radius: 7px; line-height: 0; cursor: pointer; opacity: 0.25; } .tile-hide svg { width: 14px; height: 14px; fill: var(--muted); } .tile-hide:hover { opacity: 1; background: color-mix(in srgb, var(--brand) 10%, transparent); } .tile-hide:hover svg { fill: var(--brand); } /* Link-Button rückt nach links, das Auge sitzt jetzt rechts außen */ .module-link-btn { right: 32px; } /* Einstellungen: ausgeblendete Kacheln wieder einblenden */ .dash-aus-liste { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 60%; } .dash-aus-btn { padding: 6px 10px; font-size: 12.5px; } .dash-aus-btn svg { width: 15px; height: 15px; } /* Gelöschte Maßnahmen: durchgestrichen im Journal (Revisionsspur) */ .tenant-item.is-geloescht { opacity: 0.55; } .tenant-item.is-geloescht .tenant-name, .tenant-item.is-geloescht .tenant-sub { text-decoration: line-through; } /* Bedarfs-Rechner unter der Mittel-Liste */ .vb-bedarf { font-weight: 600; color: var(--brand); } /* Darstellungs-Schalter im Weinberge-Kopf (Chips↔Dropdown, Info an/aus) */ .vb-kopf-toggle.is-an { background: var(--brand); border-color: var(--brand); color: #fff; } .vb-chips.is-dropdown { display: block; overflow: visible; } .vb-chips.is-dropdown .ssel { max-width: 380px; } /* Abschnitts-Kopf der Mittel-/Dünger-Liste: Überschrift links, „Hinzufügen" als Icon-Button rechts (weinrot). */ .vb-liste-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 8px; } .vb-liste-kopf > .sheet-section { margin: 0; flex: 1; min-width: 0; } .vb-add-ic { width: 32px; height: 32px; border-radius: 999px; color: var(--brand); border-color: var(--brand); flex: none; } .vb-add-ic:hover { background: var(--brand); color: #fff; } /* „Manuelle Eingabe" — gepinnter erster Eintrag der Mittel-/Dünger-Auswahl */ .ssel-item.is-pinned { color: var(--brand); border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 4px; padding-bottom: 8px; } .ssel-item.is-pinned .ssel-item-label { font-weight: 600; } /* Dünger-Zeile: Düngemittel (Auswahl/Freitext) · Menge · X */ .vb-duenger-zeile { display: grid; gap: 8px; align-items: end; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) 38px; } .vb-duenger-zeile > .vb-mittel-sel { grid-area: auto; } /* Manuelle Eingabe: Name + eigene Gehalte (N %, P₂O₅ %) in einer Zeile */ .vb-duenger-frei { display: flex; gap: 6px; min-width: 0; } .vb-duenger-frei input { padding: 10px 8px; font: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); } .vb-duenger-frei input:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .vb-duenger-frei input:first-child { flex: 1; min-width: 0; } .vb-gehalt { width: 74px; flex: none; text-align: right; } @media (max-width: 700px) { .vb-mittel-zeile { grid-template-columns: minmax(0, 1fr) 90px 74px 38px; grid-template-areas: 'mittel mittel mittel x' 'zweck aufwand wz .'; } } .vb-psm-frei { display: inline-block; font-size: 12.5px; color: var(--muted); margin-top: 3px; } /* Pflanzenschutz: Mittel-Liste (Tankmischung) + BVL-Details */ .vb-mittel-row { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; } .vb-mittel-frei { display: flex; gap: 8px; flex: 1; min-width: 0; } .vb-mittel-frei input { width: 100%; min-width: 0; padding: 10px 12px; font: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); } .vb-mittel-frei input:first-child { flex: 2; } .vb-mittel-frei .vb-zul { flex: 1; } .vb-mittel-info { margin-top: 6px; } .vb-bvl-details { border: 1px dashed var(--border); border-radius: 8px; padding: 6px 10px; margin-top: 6px; font-size: 13px; } .vb-bvl-mittelname { margin: 10px 0 0; font-weight: 600; font-size: 13px; } .vb-bvl-details > summary { cursor: pointer; color: var(--muted); } .vb-bvl-zeile { margin: 5px 0; } .vb-bvl-auflage { margin: 3px 0 3px 10px; color: var(--muted); font-size: 12.5px; } /* ---------- GIS Phase 0: Parzellen-Polygone (Karte) ---------- */ /* Editor-Karte im Parzellen-Dialog + Kartenübersicht im Modul Weinberge. Leaflet-Panes bleiben unter unseren Modals (Leaflet nutzt z-index bis ~1000, der Dialog liegt selbst im modal-root — innerhalb des Dialogs passt das). */ .vb-geo-map { height: 360px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg); } .vb-geo-map .hint { padding: 12px; } .vb-geo-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .vb-geo-flaeche { color: var(--muted); font-size: 13px; margin-left: auto; } .vb-karte-wrap { margin: 10px 0 4px; } /* isolation: eigener Stacking-Kontext — Leaflets interne z-Indizes (bis ~1000) bleiben in der Karte gefangen und legen sich nicht über Dialoge (Backdrop 40). */ .vb-karte { height: 360px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg); isolation: isolate; } .vb-karte .hint { padding: 12px; } .vb-karte-hinweis { margin: 6px 2px 0; } /* Basiskarten-Umschalter (Leaflet-Control unten links) */ .vb-karte-umschalter { background: #fff; } .vb-karte-knopf { border: 0; background: #fff; color: #232323; font: inherit; font-size: 12.5px; padding: 4px 10px; cursor: pointer; border-radius: 4px; } .vb-karte-knopf:hover { background: #f0f0f0; } /* GPS-Knopf (Leaflet-Bar-Eintrag) */ a.vb-karte-gps { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; } a.vb-karte-gps svg { width: 18px; height: 18px; fill: #232323; } a.vb-karte-gps.is-lade svg { animation: vbGpsPuls 1s infinite; } @keyframes vbGpsPuls { 50% { opacity: 0.3; } } /* Leaflet-Attribution etwas dezenter */ .vb-karte .leaflet-control-attribution, .vb-geo-map .leaflet-control-attribution { font-size: 10px; } /* Dunkelmodus: Bedienelemente bleiben hell (Karteninhalt ist ohnehin ein Bild) */ [data-theme='dark'] .vb-geo-map, [data-theme='dark'] .vb-karte { background: #1c1c1c; } /* Auswahlliste ODER manuelle Eingabe (auswahlOderFrei): im Freitext-Modus steht rechts der Knopf zurück zur Liste. */ .frei-wrap { display: flex; align-items: center; gap: 6px; } .frei-wrap > .ssel { flex: 1; min-width: 0; } .frei-wrap > input { flex: 1; min-width: 0; } .frei-zurueck { flex: 0 0 auto; } /* ---------- Phänologie (Kopfkarte der Parzelle) ---------- */ /* Entwicklungsprognose: eigener, dezent umrandeter Block — wie die Jahresübersicht darunter (gestrichelter Rahmen). */ .vb-phaeno { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 8px 12px; border: 1px dashed var(--border); border-radius: 10px; font-size: 13.5px; } .vb-phaeno:empty { display: none; } .vb-phaeno-titel { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); } .vb-phaeno-titel svg { width: 15px; height: 15px; fill: currentColor; } .vb-phaeno-stand { font-weight: 600; } .vb-phaeno-lade { color: var(--muted); } .vb-phaeno-uebernehmen { padding: 3px 10px; font-size: 12.5px; } .vb-phaeno-acc { flex: 1 1 100%; margin-top: 2px; } .vb-phaeno-acc > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); padding: 2px 0; } .vb-phaeno-liste { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; } .vb-phaeno-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); } .vb-phaeno-row.is-erreicht { color: var(--text); } .vb-phaeno-bbch { flex: 0 0 62px; font-variant-numeric: tabular-nums; } .vb-phaeno-name { flex: 1; min-width: 0; } .vb-phaeno-datum { white-space: nowrap; } .vb-phaeno-beob svg { width: 14px; height: 14px; fill: var(--brand); vertical-align: -2px; } /* ---------- Spritzwetter (Modul Gesundheit) ---------- */ .pt-bereich-seg { margin-bottom: 10px; } .sw-card { gap: 8px; } .sw-streifen { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 8px; } .sw-tag { display: flex; align-items: center; gap: 8px; } .sw-tag-lbl { flex: 0 0 52px; font-size: 12.5px; color: var(--muted); } .sw-balken { flex: 1; display: flex; gap: 1px; min-width: 0; } .sw-h { flex: 1; height: 14px; border-radius: 2px; min-width: 0; background: color-mix(in srgb, var(--muted) 18%, transparent); } .sw-h.is-gut { background: #1b7f3b; } .sw-h.is-maessig { background: var(--accent); } .sw-h.is-schlecht { background: color-mix(in srgb, var(--brand) 55%, transparent); } .sw-h.is-unbekannt, .sw-h.is-leer { background: color-mix(in srgb, var(--muted) 15%, transparent); } .sw-legende { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; font-size: 12px; color: var(--muted); } .sw-legende span { display: inline-flex; align-items: center; gap: 5px; } .sw-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; } .sw-legende-zeit { margin-left: auto; } .sw-fenster { display: flex; flex-direction: column; gap: 5px; } .sw-fenster-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; } .sw-marke { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); } .sw-fenster-row.is-gut .sw-marke { background: #1b7f3b; } .sw-dauer { color: var(--muted); } .sw-infekt { font-size: 13px; color: var(--brand); margin: 4px 0 0; } /* ---------- FLIK-Punktabfrage im Parzellen-Dialog ---------- */ .vb-flik-zeile { display: flex; align-items: center; gap: 6px; } .vb-flik-zeile input { flex: 1; min-width: 0; } .vb-flik-btn { white-space: nowrap; padding: 8px 10px; } .vb-flik-btn svg { width: 16px; height: 16px; fill: currentColor; vertical-align: -3px; } .vb-flik-info { margin: 2px 2px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .vb-flik-info:empty { display: none; } .vb-flik-info.is-warn { color: var(--brand); } .vb-flik-quelle { font-size: 11.5px; opacity: 0.8; } .vb-flik-uebernehmen { padding: 4px 10px; font-size: 12.5px; } /* ---------- Flächen-Import (Schlag-Export aus dem Antragsportal) ---------- */ .fi-kopf { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .fi-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); } .fi-chip.is-portal { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); border-color: transparent; font-weight: 600; } .fi-warn { color: var(--brand); } .fi-zuordnung-acc { margin: 4px 0 8px; } .fi-zuordnung-acc > summary { cursor: pointer; font-size: 13.5px; color: var(--muted); padding: 4px 0; } .fi-zuordnung { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; padding: 6px 0; } .fi-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; } .fi-filter-label { font-size: 13px; color: var(--muted); } .fi-karte { height: 280px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg); isolation: isolate; } .fi-karte .hint { padding: 12px; } .fi-karte .leaflet-control-attribution { font-size: 10px; } [data-theme='dark'] .fi-karte { background: #1c1c1c; } .fi-liste { margin-top: 10px; max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; } .fi-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); opacity: 0.55; } .fi-row:last-child { border-bottom: 0; } .fi-row.is-an { opacity: 1; } .fi-check { display: flex; align-items: center; } .fi-text { flex: 1; min-width: 0; display: flex; flex-direction: column; cursor: pointer; } .fi-name { font-weight: 600; overflow-wrap: anywhere; } .fi-sub { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; } .fi-chip-neu { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); } .fi-chip-alt { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); } .fi-update { margin-top: 8px; } .fi-summe { color: var(--muted); font-size: 13px; margin-right: auto; } .fi-actions { flex-wrap: wrap; } /* ---------- „Im Weinberg" — GPS-Assistent (Overlay, Muster Ticket-Scan) ---------- */ .iw-wrap { gap: 14px; z-index: 35; } /* unter modal-backdrop (40): Dialoge öffnen ÜBER dem Assistenten */ .iw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* Icons in Seiten-Überschriften: icon() liefert SVGs OHNE width/height — ohne diese Regel bläht sich das SVG auf volle Breite auf. */ .stage-title svg { width: 22px; height: 22px; fill: var(--brand); vertical-align: -3px; } .iw-inhalt { display: flex; flex-direction: column; gap: 14px; max-width: 680px; width: 100%; margin: 0 auto; } .iw-standort { border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: 12px; padding: 12px 14px; background: var(--card); } .iw-lage { margin: 0; color: var(--muted); font-size: 13px; } .iw-name { margin: 2px 0 4px; font-size: 20px; } .iw-letzte { margin: 6px 0 0; font-size: 13px; color: var(--muted); } .iw-frage { margin: 4px 0 0; font-weight: 600; } .iw-aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .iw-aktion { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; } .iw-aktion:hover:not(:disabled) { border-color: var(--brand); } .iw-aktion:disabled { opacity: 0.45; cursor: default; } .iw-aktion-ic svg { width: 28px; height: 28px; fill: var(--brand); } .iw-bbch { display: flex; align-items: center; gap: 10px; } .iw-bbch label { font-size: 13px; color: var(--muted); } .iw-bbch .vb-bbch { width: 90px; } .iw-liste { display: flex; flex-direction: column; gap: 8px; } .iw-parzelle { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .iw-parzelle:hover { border-color: var(--brand); } .iw-andere { align-self: flex-start; } .iw-suche { animation: vbGpsPuls 1.2s infinite; } /* ---------- Globale Suche (Kopfzeile) + Chronik-Zeilen ---------- */ .gsu-backdrop { align-items: flex-start; padding-top: 8vh; } .gsu-panel { width: min(640px, 94vw); max-height: 76vh; overflow: auto; background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px; } .gsu-kopf { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; background: var(--card); padding: 2px 0 8px; } .gsu-lupe svg { width: 20px; height: 20px; fill: var(--muted); } .gsu-input { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font: inherit; background: var(--bg); color: var(--text); } .gsu-gruppe { margin: 10px 2px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .gsu-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; cursor: pointer; } .gsu-row:hover { background: var(--bg); } .gsu-ic svg { width: 20px; height: 20px; fill: var(--brand); } .gsu-text { display: flex; flex-direction: column; min-width: 0; } .gsu-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gsu-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gsu-row.is-chronik { cursor: default; } button.gsu-row.is-chronik { cursor: pointer; } /* ---------- Vinothek: Tagesabschluss + Barcode-Scan · E-Mail-Vorlagen ---------- */ .vino-z-datum { margin-left: auto; } .vino-z-datum input { font: inherit; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); } .vino-z-block { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; } .vino-z-zeile { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; } .vino-z-zeile.is-gesamt { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; font-weight: 700; } .vino-z-zeile.is-mwst { color: var(--muted); font-size: 13px; } .vino-z-anzahl { margin-left: auto; color: var(--muted); font-size: 13px; } .vino-z-summe { min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; } .vino-z-belege { max-height: 320px; overflow: auto; } .vino-scan-treffer .ev-scan-card { margin-top: 8px; } .ev-scan-manuell { display: flex; gap: 8px; } .ev-scan-manuell input { flex: 1; } .mv-card .acc { margin-top: 10px; } .mv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .mv-chip { border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px; padding: 3px 10px; cursor: pointer; font-family: ui-monospace, monospace; } .mv-chip:hover { border-color: var(--brand); color: var(--brand); } /* ---------- Bilder-Wähler (vorhandene Storage-Bilder übernehmen) ---------- */ .bw-panel { max-width: min(860px, 94vw); } .bw-chips { margin: 4px 0 10px; } .bw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .bw-bild { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; text-align: left; } .bw-bild:hover { border-color: var(--brand); } .bw-thumb { display: block; height: 96px; border-radius: 8px; background: var(--bg) center/cover no-repeat; } .bw-label { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bw-x { margin-left: auto; } .bw-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bw-zeile input[type='file'] { flex: 1; min-width: 200px; } /* ---------- Maßnahmen-Fotos (Schlagkartei-Doku vom Handy) ---------- */ .vbf-block { margin: 10px 0; } .vbf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 8px; } .vbf-zelle { position: relative; } .vbf-thumb { display: block; height: 96px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg) center/cover no-repeat; cursor: pointer; } .vbf-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; } .vbf-x svg { width: 14px; height: 14px; fill: #fff; } .chip-foto { display: inline-flex; align-items: center; gap: 3px; } .chip-foto svg { width: 13px; height: 13px; fill: currentColor; } /* Maßnahmen-Detail: lange Mittel-/Düngerzeilen — Beschriftung oben, Wert darunter */ .order-item-row.is-block { display: block; } .order-item-row.is-block .oi-name { display: block; font-weight: 600; } .oi-block-wert { display: block; margin-top: 2px; color: var(--text); } /* ---------- Operator: Nutzungs-Statistik ---------- */ .nz-verteilungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 14px; } .nz-verteilungen h3 { margin: 0 0 6px; font-size: 14px; } .nz-balken-zeile { display: flex; align-items: center; gap: 8px; margin: 4px 0; } .nz-balken-label { width: 110px; font-size: 13px; } .nz-balken-track { flex: 1; height: 10px; border-radius: 5px; background: var(--bg); overflow: hidden; } .nz-balken-fill { display: block; height: 100%; background: var(--brand); border-radius: 5px; } .nz-balken-wert { width: 44px; text-align: right; font-size: 12.5px; color: var(--muted); } .nz-letzte { font-size: 13px; } .nz-trend { margin-top: 10px; }