/* 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); } /* 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: 8px; 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: 10px; 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 ein Schachbrettmuster. Stattdessen hebt sich die Kachel über die weinrote KONTUR ab 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. SEIT 1.6.88 stehen die Kacheln mit 8 px Abstand und runden Ecken (vorher eine zusammenhängende Leiste mit 1-px-Fugen) — zwischen berührenden Nachbarn ging die rote Kontur unter, einzeln sticht sie sofort heraus (Betreiber: „dann sieht man eher, was rot ist"). */ [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). */ /* 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). */ /* 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); } /* ---------- 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); } /* Kopf-Aktion (Listen-/Kartenkopf: „Auftrag anlegen", „Maßnahme erfassen", Faktura-Stapellauf …): bewusst RUHIGER als .primary — Umriss in Champagner, Text in Textfarbe, Symbol in Weinrot; die Kopfzeile gehört wieder der Überschrift. Kräftiges .primary bleibt den DIALOG-Aktionen (Speichern/ Erstellen im Sheet) vorbehalten. Wirkt in Hell + Dunkel und beiden Layouts (im Dunkelmodus ist --brand die aufgehellte Weinrot-Variante). */ .btn.kopf { background: transparent; border-color: var(--accent); color: var(--text); padding: 8px 14px; font-size: 13.5px; } .btn.kopf svg { fill: var(--brand); } .btn.kopf:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, transparent); } .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; } /* PLZ + Ort als EIN Baustein (PLZ schmal, Ort wächst): bleibt auch im zweispaltigen Desktop-Raster EINE Zelle — anders als .grid2, das sich dort auflöst (sonst bekäme die PLZ eine halbe Formularbreite). */ .plzort { display: grid; grid-template-columns: minmax(90px, 140px) 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; } /* Wird es eng, bricht der AKTIONS-KNOPF in die nächste Zeile um — nicht der Titel/Kurztext auf der linken Seite (Betreiber 15.08., Ressourcen-Kopf). */ .admin-head > div:first-child { flex: 1 1 240px; min-width: 0; } .admin-head > .row-actions { flex: 0 0 auto; } /* Kopf-Knöpfe sitzen SYSTEMWEIT mittig auf der Titel-Linie (Betreiber 16.08. — sie hingen an der Titel-Oberkante). Der Trick für BELIEBIGE Knopfhöhen: die row-actions sind doppelt so hoch wie die Titelzeile (2 × 27px) und zentrieren ihre Kinder — die Mitte liegt damit exakt auf der Champagner-Haarlinie. Ein DIREKTER Kopf-Knopf (btn kopf, 40px hoch) bekommt stattdessen die gerechneten 7px (27/2 − 40/2 + 20 … = 27 − 20). */ .admin-head > .row-actions { height: 54px; align-items: center; align-content: center; } .admin-head > .btn { margin-top: 7px; } .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; } /* WEINGUT-LOGO IM WILLKOMMEN-BLOCK (1.7.60, Betreiber): Seit die Kopfzeile die VINORUM-Wortmarke trägt, hatte das Kundenlogo in der App keinen Platz mehr. Hier steht es rechts neben dem Begrüßungstext — gedeckelt, damit ein großes Bild die Kachel nicht auseinanderzieht, und auf schmalen Geräten unter dem Text (nebeneinander bliebe für beides zu wenig Breite). */ .card.hero.hat-logo { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .card.hero .hero-text { min-width: 0; } .hero-logo { max-height: 74px; max-width: 220px; width: auto; flex: none; object-fit: contain; } @media (max-width: 700px) { .card.hero.hat-logo { flex-direction: column; align-items: flex-start; gap: 14px; } .hero-logo { max-height: 54px; max-width: 60%; } } /* 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; } /* Das Update-Banner hängt FIX am oberen Fensterrand (1.3.94) — es muss auch sichtbar sein, wenn man in einer langen Liste nach unten gescrollt hat. Es darf bewusst die Kopfzeile überdecken (nicht schließbar, will neu laden); am Desktop rückt es über die margin-left-Regeln neben die Seitenleiste. */ #update-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 60; } #update-banner .banner.update { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); } .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). */ /* Buttons nur so hoch wie die sichtbare Leiste (Inhalt bleibt korrekt zentriert) */ /* „Mehr"-Menü: Popup über der Leiste, nur wenn nicht alle Tabs passen */ /* ---------- 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); } /* 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-text { min-width: 0; } .module-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ---------- 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-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; } /* :first-of-type statt :first-child (1.8.20) — vor der ersten Station kann die Radar-Hinweiszeile stehen; dann lief eine zweite Linie direkt unter der Kopflinie. */ .dash-wetter > .dash-wetter-station:first-child, .dash-wetter > .radar-hinweis-host:empty + .dash-wetter-station { border-top: none; padding-top: 0; } /* 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). */ /* KOMPAKT (1.8.15, Betreiber „ca. 50 % kleiner"): Die Werte-Kacheln der Wetterkarte tragen eine Zahl und ein Wort — in Formularhöhe nahmen sie den halben Kartenplatz ein. Schriftgrößen bleiben lesbar, es fällt nur Polster weg (gemessen: Kachelhöhe 58 → 38 px). */ /* EINE ZEILE je Station (Vorlage des Betreibers, 1.8.18): links die Werte im Klartext, rechts die Vorhersage. Erst unter 560 px bricht sie um — davor scrollt die Vorhersage in sich. */ .dash-wetter-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .dash-w-links { flex: 1 1 190px; min-width: 0; } .dash-w-name { display: flex; align-items: center; gap: 4px; min-width: 0; } .dash-w-name strong { font-size: 14px; font-weight: 650; line-height: 1.25; } /* Werkzeuge dezent: sie gehören zur Station, sollen aber nicht mit dem Namen um Aufmerksamkeit streiten. */ .dash-w-tools { display: inline-flex; align-items: center; gap: 1px; flex: none; opacity: 0.45; } .dash-wetter-station:hover .dash-w-tools, .dash-w-tools:focus-within { opacity: 1; } .dash-w-tools { opacity: .55; } .dash-w-tools .icon-act { width: 28px; height: 28px; border: none; background: none; } .dash-w-tools .icon-act svg, .dash-w-tools .ic-radar { width: 19px; height: 19px; } .dash-w-temp { display: flex; align-items: center; gap: 5px; font-size: 19px; font-weight: 650; margin-top: 2px; } .dash-w-temp-ic { display: inline-flex; color: var(--muted); } .dash-w-temp-ic svg { width: 16px; height: 16px; fill: currentColor; display: block; } .dash-w-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; display: flex; flex-wrap: wrap; gap: 3px 10px; } .dash-w-wert { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; } .dash-w-zeichen { font-size: 11px; line-height: 1; } /* Vorhersage-Tag: Beschriftung, Symbol, Höchst-/Tiefstwert — ohne Kasten. */ .dash-fc-tile { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 54px; padding: 2px 4px; border: 1px solid transparent; border-radius: 8px; } .dash-fc-tile .fc-lbl { font-size: 10.5px; color: var(--muted); } .dash-fc-tile .fc-sym { font-size: 19px; line-height: 1.15; } .dash-fc-tile .fc-temp { font-size: 12px; white-space: nowrap; } .dash-fc-tmin { font-weight: 400; font-size: 11.5px; color: var(--muted); } /* Stand + Aktualisieren im Kartenkopf. */ .dash-w-stand { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; } /* Nur ein ZEICHEN, kein Knopf (Betreiber 20.08.). */ .dash-w-refresh { border: none; background: none; padding: 0; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; } .dash-w-refresh svg { width: 17px; height: 17px; fill: currentColor; display: block; } .dash-w-refresh:hover { color: var(--brand); } .dash-w-refresh[disabled] { cursor: default; } .dash-w-refresh.is-laedt svg { animation: dash-w-dreh 1.1s linear infinite; } @keyframes dash-w-dreh { to { transform: rotate(360deg); } } /* Vorhersage-Streifen: ALLE Tage bleiben erreichbar — er scrollt in sich, der Pfeil blättert seitenweise (und springt am Ende zurück an den Anfang). */ .dash-fc-wrap { display: flex; align-items: center; gap: 2px; flex: 1 1 230px; min-width: 0; justify-content: flex-end; } .dash-fc-streifen { display: flex; gap: 6px; overflow-x: auto; scroll-behavior: smooth; flex: 1 1 auto; min-width: 0; scrollbar-width: none; padding-bottom: 1px; } .dash-fc-streifen::-webkit-scrollbar { display: none; } .dash-fc-pfeil { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--muted); cursor: pointer; padding: 0; } .dash-fc-pfeil svg { width: 16px; height: 16px; fill: currentColor; display: block; } .dash-fc-pfeil:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); } .dash-fc-pfeil[hidden] { display: none; } .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; } /* „gilt auch für"-Zeile der Rechte-Matrix (1.6.8): bewusst gebündelte Module sichtbar machen — sonst sucht ein Admin vergeblich nach „Mahnungen" & Co. */ .perm-auch { display: block; width: 100%; font-size: 11.5px; color: var(--muted, #6b6b6b); margin: -2px 0 2px 26px; } /* ---------- 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; } /* Das X sitzt rechts im festen Kopf (1.8.36) — die Grundgestalt kommt von .sheet-title-x, hier nur der Ausgleich fuer das enge Polster der Titelzeile. */ .cl-x { margin-left: auto; margin-right: -4px; } /* „Aeltere Fassungen anzeigen" steht am ENDE der Liste, nicht im Kopf: Wer so weit gescrollt hat, will mehr sehen; oben waere es nur eine Huerde. */ .cl-mehr { width: calc(100% - 4px); margin: 6px 2px 2px; justify-content: center; } .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 { /* Der Dialog braucht seine EIGENE Fläche — ohne sie steht der Inhalt durchsichtig über der Liste dahinter (1.4.89 gemeldet und behoben). */ background: var(--card); color: var(--text); box-shadow: var(--shadow); 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) */ /* `pre-line`: Rückfragen dürfen Absätze setzen (Zeilenumbrüche im Text) — einzeilige Meldungen ändern sich dadurch nicht. */ .confirm-msg { margin: 0 0 18px; line-height: 1.5; font-size: 15px; white-space: pre-line; } @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; } } /* Der scrollende Teil des Dialogs. `min-height: 0` ist Pflicht — ohne das schrumpft ein Flex-Kind nicht unter seine Inhaltshöhe und der Inhalt läuft aus dem Dialog heraus (den `.modal-sheet` dann abschneidet). `contain` verhindert, dass der Schwung auf die Seite dahinter überspringt (iOS). */ .sheet-body { overflow-y: auto; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px)); } /* Dialoge, deren Inhalt in einem
steckt (Muster: form > .sheet-body): das Formular ist dann das Flex-Kind und muss die Höhenbegrenzung WEITERGEBEN. Fehlte das, ragte der Inhalt aus dem Dialog und die Knöpfe waren am Tablet nicht erreichbar — gescrollt wurde der Hintergrund. */ .modal-sheet > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* Aktionsleiste, die NICHT mitscrollt: bei langen Dialogen (Motivauswahl!) müsste man sonst erst ans Ende scrollen, um abschließen zu können. */ .sheet-actions.is-fuss { flex: none; margin: 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--card); } .sheet-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } /* Aktionen nebeneinander in einer Einstellungszeile. In der Administration stehen bis zu sieben Knöpfe je Weingut-Zeile — die laufen deshalb eine Nummer kleiner als die normalen Buttons (1.4.40). */ .row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .row-actions .btn { font-size: 12.5px; padding: 6px 10px; gap: 5px; } .row-actions .btn svg { width: 15px; height: 15px; } /* ---------- 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 > .plzort { grid-column: auto; } .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 ---------- */ .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; } /* Seit 1.3.94 ein zugeklappter
-Aufklapper: Kopf mit Anzahl + Pfeil, die Zeilen erscheinen erst beim Aufklappen. */ .birthday-box summary { list-style: none; cursor: pointer; } .birthday-box summary::-webkit-details-marker { display: none; } .birthday-box[open] .birthday-title { margin-bottom: 6px; } .birthday-box[open] .birthday-chev svg { transform: rotate(180deg); } .birthday-anzahl { font-size: 11.5px; font-weight: 600; color: var(--brand); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; } .birthday-chev { display: inline-flex; color: var(--muted); } .birthday-chev svg { width: 16px; height: 16px; fill: currentColor; transition: transform 0.15s ease; } .birthday-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; margin-bottom: 0; } .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; } /* Laufende Preisaktion in der Artikelliste (1.7.44) — Champagner, weil es eine Chance ist und keine Warnung. */ .chip-aktion { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--text); 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; } /* ---------- Feine Belege-Listenzeile (1.3.80, belegZeile in app.js) ---------- Basis (Handy): zweizeilig wie gewohnt — Icon | Nr + Name / Unterzeile mit Statuspunkt-Vorspann | Betrag + Aktionen. Ab 900 px rasten Nummer, Kunde, Datum, Status und Betrag in FESTE SPALTEN ein (.bz-top löst sich per display:contents ins Raster auf); der mobile Vorspann (.bz-sub-mobil) verschwindet dann — Datum/Status existieren doppelt im DOM, sichtbar ist immer nur eine Fassung. Punktfarben = Farbwelt der bisherigen Chips. */ .beleg-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 12px; row-gap: 1px; align-items: center; } .beleg-zeile .module-icon { grid-column: 1; grid-row: 1 / span 2; } .beleg-zeile .bz-top { grid-column: 2; grid-row: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; } .beleg-zeile .bz-nr { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; flex: none; } .beleg-zeile .bz-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .beleg-zeile .bz-datum, .beleg-zeile > .bz-status { display: none; } .beleg-zeile .bz-sub { grid-column: 2 / 4; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; } .beleg-zeile .bz-sub-mobil { display: inline-flex; align-items: center; gap: 6px; } .beleg-zeile .order-sum { grid-column: 3; grid-row: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .beleg-zeile .order-row-acts { grid-column: 4; grid-row: 1 / span 2; margin-left: 0; } /* Versandspalte (1.8.12): eigene Zelle zwischen Status und Betrag. Reserviert wird sie nur in Listen mit Versand (`.bz-mit-versand`) — mit fester Breite, damit die Betraege buendig bleiben, auch wenn nur einzelne Zeilen eine Sendung haben. */ .beleg-zeile.bz-mit-versand { grid-template-columns: auto minmax(0, 1fr) 40px auto auto; } .beleg-zeile.bz-mit-versand .bz-versand { grid-column: 3; grid-row: 1; } .beleg-zeile.bz-mit-versand .order-sum { grid-column: 4; } .beleg-zeile.bz-mit-versand .order-row-acts { grid-column: 5; } .beleg-zeile.bz-mit-versand .bz-sub { grid-column: 2 / 5; } .bz-versand { display: flex; align-items: center; justify-content: center; } .bz-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; } .bz-punkt.is-offen { background: #c69a3e; } .bz-punkt.is-blau { background: #2e74b5; } .bz-punkt.is-brand { background: var(--brand); } .bz-punkt.is-gruen { background: #1b7f3b; } .bz-punkt.is-rot { background: #b3261e; } .bz-punkt.is-grau { background: var(--muted); } .bz-punkt.is-tuerkis { background: #2a8f86; } [data-theme='dark'] .bz-punkt.is-tuerkis { background: #4fc0b5; } [data-theme='dark'] .bz-punkt.is-gruen { background: var(--ok); } [data-theme='dark'] .bz-punkt.is-rot { background: var(--danger); } /* storniert/abgelehnt: durchgestrichen und gedimmt statt rotem Chip */ .is-bz-storno .bz-name, .is-bz-storno .order-sum { text-decoration: line-through; color: var(--muted); font-weight: 400; } /* FLACHE Liste (Pilot Aufträge 1.3.81, seit 1.3.89 ROLLOUT auf alle Listen — Klasse am Listen-Host): keine Zeilen-KACHELN mehr — kein Hintergrund, kein Rahmen, kein Radius, dafür Haarlinien zwischen den Zeilen und weniger Polster (Muster „Zu verrechnen"). Hover tönt die Zeile hauchzart. */ .liste-flach { gap: 0; } .liste-flach .tenant-item { background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid var(--border); padding: 8px 4px; margin: 0; } .liste-flach .tenant-item:last-child { border-bottom: 0; } .liste-flach .tenant-item.is-clickable:hover, .liste-flach .stamm-row.is-clickable:hover { border-color: var(--border); background: rgba(109, 35, 48, 0.035); } [data-theme='dark'] .liste-flach .tenant-item.is-clickable:hover, [data-theme='dark'] .liste-flach .stamm-row.is-clickable:hover { background: rgba(255, 255, 255, 0.045); } /* Stammdaten-Zeilen sind seit 1.3.90 komplett klickbar (Zeile = Bearbeiten). */ .stamm-row.is-clickable { cursor: pointer; } @media (min-width: 900px) { /* Die Statusspalte traegt seit 1.8.25 nur noch ihr ZEICHEN — 58 px wie die Versandspalte daneben. */ .beleg-zeile { grid-template-columns: auto 96px minmax(0, 1fr) 118px 58px 110px auto; } .beleg-zeile.bz-mit-versand { grid-template-columns: auto 96px minmax(0, 1fr) 118px 58px 58px 110px auto; } .beleg-zeile.bz-mit-versand .bz-versand { grid-column: 6; grid-row: 1 / span 2; align-self: center; } .beleg-zeile.bz-mit-versand .order-sum { grid-column: 7; } .beleg-zeile.bz-mit-versand .order-row-acts { grid-column: 8; } .beleg-zeile .bz-top { display: contents; } /* Nummer, Datum, Status und Betrag stehen MITTIG über beide Zeilen (nur Name + Unterzeile stapeln sich links). */ .beleg-zeile .bz-nr { grid-column: 2; grid-row: 1 / span 2; align-self: center; } .beleg-zeile .bz-name { grid-column: 3; grid-row: 1; } .beleg-zeile .bz-datum { display: block; grid-column: 4; grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; } .beleg-zeile > .bz-status { display: inline-flex; align-items: center; justify-content: center; grid-column: 5; grid-row: 1 / span 2; align-self: center; } /* Unter dem KUNDEN, nicht unter der Nummer: Die Regel fuer Listen mit Versandspalte ist spezifischer (0,3,0) und muss deshalb ausdruecklich mitgezogen werden. */ .beleg-zeile .bz-sub, .beleg-zeile.bz-mit-versand .bz-sub { grid-column: 3 / 4; grid-row: 2; } .beleg-zeile .bz-sub-mobil { display: none; } .beleg-zeile .order-sum { grid-column: 6; grid-row: 1 / span 2; align-self: center; text-align: right; } .beleg-zeile .order-row-acts { grid-column: 7; } } /* Status-SYMBOL (Variante A, 1.3.87): eigenes Bild je Status in der Statusfarbe — ersetzt die gleichfarbigen Punkte. */ .bz-ic { display: inline-flex; flex: none; } .bz-ic svg { width: 15px; height: 15px; display: block; } /* In der SPALTE steht das Zeichen allein — in der OPTISCHEN Groesse der Versand-Zeichen daneben (1.8.27, Betreiber: „viel zu gross"). Die 34 px des ersten Anlaufs sind jetzt das ZOOM-Ziel: Beim Verweilen waechst das Zeichen auf diese Groesse, danach zeigt der Browser den Tooltip mit dem Status. */ /* GEMESSEN statt geschaetzt: Die Versand-Masken sind 42 px gross, ihre Zeichnung fuellt davon 84 % der Breite und nur 55 % der HOEHE — sichtbar sind also rund 23 px. Seit 1.8.33 steht das Status-Zeichen 15 % kleiner (Betreiber), beim Verweilen waechst es auf die frueheren 34 px. */ .beleg-zeile > .bz-status .bz-ic svg { width: 24px; height: 24px; transition: transform .12s ease; } .beleg-zeile > .bz-status:hover .bz-ic svg { transform: scale(1.42); } @media (max-width: 900px) { .beleg-zeile > .bz-status .bz-ic svg { width: 15px; height: 15px; } } .bz-ic.is-offen svg { fill: #c69a3e; } .bz-ic.is-blau svg { fill: #2e74b5; } .bz-ic.is-brand svg { fill: var(--brand); } .bz-ic.is-gruen svg { fill: #1b7f3b; } .bz-ic.is-rot svg { fill: #b3261e; } .bz-ic.is-grau svg { fill: var(--muted); } /* Ausgeliefert: Tuerkis — Fortschritt, kein Alarm (1.8.33). */ .bz-ic.is-tuerkis svg { fill: #2a8f86; } [data-theme='dark'] .bz-ic.is-tuerkis svg { fill: #4fc0b5; } [data-theme='dark'] .bz-ic.is-gruen svg { fill: var(--ok); } [data-theme='dark'] .bz-ic.is-rot svg { fill: var(--danger); } /* ---------- Tab „Wetter & Gesundheit" (1.3.87) ---------- */ /* Kopf: Name über die volle Kartenbreite, Meta-Zeile darunter; feste Mindesthöhen für Kopf + Kernzeile, damit die Risiko-Pillen über ALLE Karten hinweg auf derselben Höhe stehen (unterschiedlich lange Namen und umbrechende Kernwerte verschieben sie sonst). */ .wt-kopf { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; min-height: 46px; } .wt-kopf-zeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .wt-kopf-name { font-size: 15px; min-width: 0; } .pt-card .cl-kern { min-height: 66px; align-content: flex-start; } /* Das frühere Ein-/Ausklappen der Stationskarten (.wt-zu*, 1.3.87–1.3.89) ist seit 1.3.90 entfallen — alle Stationen sind immer aufgeklappt. */ .wt-matrix-host { margin: 4px 0; } .wt-matrix { display: grid; grid-template-columns: 52px repeat(7, 1fr); gap: 4px 6px; align-items: center; text-align: center; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 6px; } .wt-m-lbl { text-align: left; font-size: 11px; color: var(--muted); } .wt-m-kopf { font-size: 11px; color: var(--muted); } .wt-m-wetter { display: flex; flex-direction: column; gap: 1px; font-size: 11px; color: var(--muted); min-width: 0; } .wt-m-leer { color: var(--muted); font-size: 11px; } .wt-m-risiko, .wt-m-spritz { display: inline-flex; justify-content: center; } .wt-tropfen { display: inline-flex; justify-content: center; } .wt-tropfen svg { width: 14px; height: 14px; display: block; } .wt-tropfen.is-gut svg { fill: #1b7f3b; } .wt-tropfen.is-maessig svg { fill: #b58a00; } .wt-tropfen.is-aus svg { fill: var(--border); } /* 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. Bei MEHRZEILIGEM Text (1.4.7) stehen Handle/Toggle/X OBEN statt mittig. */ .pos-row.is-textrow { grid-template-areas: 'handle main main main main typ x'; align-items: start; } .pos-row.is-textrow .pos-handle, .pos-row.is-textrow .pos-typtg, .pos-row.is-textrow .pos-x { margin-top: 6px; } .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 — mehrzeilig (1.3.98) */ .oi-text { font-style: italic; color: var(--muted); white-space: pre-line; } /* Mehrzeilige Textposition im Auftragsformular: auto-wachsende Textarea in der Feld-Optik der Positionszeile (1.3.98). */ .pos-textarea { resize: none; overflow: hidden; min-height: 38px; line-height: 1.35; font: inherit; padding-top: 9px; padding-bottom: 9px; } /* ---------- 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.has-ikon { display: flex; align-items: center; gap: 10px; } .fdrop-ikon { display: inline-flex; flex: none; } .fdrop-ikon svg { width: 16px; height: 16px; fill: var(--muted); display: block; } .fdrop-item.has-ikon:hover .fdrop-ikon svg { fill: var(--brand); } .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; } /* Parameter an einer Berichtszeile (1.7.45, z. B. das Auswertungsjahr des PSM-Bedarfs): schmales Feld links neben den Aktions-Icons. */ .exp-fmt-wahl { font: inherit; font-size: 12.5px; padding: 2px 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); max-width: 92px; } .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 { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ssel-label.is-placeholder { color: var(--muted); } /* Mit Zusatzangabe im Feld (Adressen): Name links, Kundennummer/Ort dezent dahinter. Der NAME behaelt den Platz, die Zusatzangabe weicht zuerst. */ .ssel-label.hat-sub { display: flex; align-items: baseline; gap: 8px; } .ssel-label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ssel-label-sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .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; } /* ZWEIZEILIG (1.8.12): Kurzbegriff oben, Beschreibung darunter — fuer Kataloge mit ganzen Saetzen als Zusatz (BBCH). In der normalen Zeilen-Darstellung drueckt ein langer Zusatz das Label auf null Breite. */ .ssel-list.is-zweizeilig .ssel-item { display: block; padding: 7px 10px; } .ssel-list.is-zweizeilig .ssel-item-label { display: block; font-weight: 600; white-space: normal; overflow: visible; } .ssel-list.is-zweizeilig .ssel-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; margin-top: 1px; line-height: 1.35; } .ssel-list.is-zweizeilig { max-height: 300px; } .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
) */ /* KOPF getönt (--bg), INHALT weiß (--card): aufgeklappt sind die Felder Teil desselben Formulars wie Name und Preis darüber — auf grauem Grund wirkten sie wie ein aufgesetzter Kasten. Der Kopf bleibt abgesetzt, sonst verlöre die Liste der Abschnitte ihre Gliederung. */ .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: 14px; background: var(--card); border-top: 1px solid var(--border); /* 1 px weniger als der Rahmen außen, sonst blitzt an den unteren Ecken die Kopffarbe durch. */ border-radius: 0 0 11px 11px; } .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. */ /* ACHTUNG (1.8.37): Die BELEGZEILE ist ausgenommen — sie bringt ihr eigenes Raster mit (Icon | Name/Unterzeile | Versand | Betrag | Aktionen). Ohne die Ausnahme legte diese Regel die Aktionen auf `grid-area: 2 / 2 / auto / -1`, also GENAU auf die Unterzeile: Die Knoepfe standen ueber Nummer und Datum (gemessen: Aktionen 85–318 px, Unterzeile 85–328 px). */ @media (max-width: 600px) { .tenant-item:has(> .order-row-acts):not(.beleg-zeile) { 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):not(.beleg-zeile) > .module-icon { grid-area: 1 / 1; margin-top: 1px; } .tenant-item:has(> .order-row-acts):not(.beleg-zeile) > .tenant-main { grid-area: 1 / 2; min-width: 0; } .tenant-item:has(> .order-row-acts):not(.beleg-zeile) > .order-sum { grid-area: 1 / 3; } .tenant-item:has(> .order-row-acts):not(.beleg-zeile) > .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; } /* Der Sprung zur Adresse bleibt auch im schreibgeschuetzten Beleg erlaubt (1.7.98) — gerade dort schaut man nach, wo der Kunde eigentlich sitzt. */ .order-form-ro .feld-akt { pointer-events: auto; } /* Auswahlfeld mit Aktionsknopf daneben (1.7.98): das Feld waechst, der Knopf bleibt schmal und fluchtet mit der Feldhoehe. */ /* MEHRERE PAKETE JE AUFTRAG (1.8.1): je Zeile ein Paket — Nummer, Vorlage, Maße, Gewicht, Stückzahl, Entfernen. Unter 700 px bricht die Zeile um. */ .sv-pakete-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 6px; } .sv-pakete-kopf label { font-weight: 600; } /* Paketliste als TABELLE (1.8.3): ein Raster für Kopf und Zeilen, Zahlen rechtsbündig, Eingaben im normalen Felddesign (dieselbe Höhe und Optik wie überall). Die Zeilen selbst sind `display: contents`, damit ihre Zellen im Raster des Containers landen und mit dem Kopf fluchten. */ .sv-paket-kopf, .sv-paketliste { display: grid; grid-template-columns: 22px minmax(120px, 1.5fr) repeat(3, minmax(52px, .6fr)) minmax(64px, .8fr) auto 34px; gap: 6px 8px; align-items: center; } .sv-paket-kopf { margin-bottom: 2px; } .sv-th { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .sv-th.is-masse { grid-column: span 3; text-align: center; } .sv-th.is-r { text-align: right; } .sv-paket { display: contents; } .sv-paket > select, .sv-paket > input { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg, var(--card)); color: var(--text); font: inherit; min-width: 0; } .sv-paket > input { text-align: right; font-variant-numeric: tabular-nums; } .sv-paket-nr { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; } .sv-paket-stk { font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* AN DER DIALOGBREITE MESSEN, NICHT AN DER FENSTERBREITE (1.8.4). Eine Media-Query fragt das FENSTER — der Dialog ist aber schmaler (bei 900 px Fenster nur 720 px). Die Tabelle blieb dadurch stehen, bis die Zahlenfelder auf 26 px zusammengedrückt waren und „92,8" zeigten. Die Container-Query fragt genau den Block, in dem die Tabelle steht. Die Media-Query darunter bleibt als Rückfall für Browser ohne Container-Query (alte Safari-Fassungen). */ .sv-paketbereich { container-type: inline-size; } @container (max-width: 600px) { .sv-paket-kopf { display: none; } .sv-paketliste { display: flex; flex-direction: column; gap: 10px; } .sv-paket { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sv-paket > select { flex: 1 1 100%; } .sv-paket > input { flex: 1 1 62px; } .sv-paket-stk { margin-left: auto; } } @media (max-width: 700px) { /* Schmal: kein Raster, jede Zeile als Block — eine Kopfzeile ohne Spalten wäre dort irreführend. */ .sv-paket-kopf { display: none; } .sv-paketliste { display: flex; flex-direction: column; gap: 10px; } .sv-paket { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sv-paket > select { flex: 1 1 100%; } .sv-paket > input { flex: 1 1 62px; } .sv-paket-stk { margin-left: auto; } } /* Angaben zur Sendung (1.8.1): schlichte Wertetabelle im Info-Fenster. */ .svi-block + .svi-block { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; } /* Kopf je Paket: links „Paket x von x", rechts Drucken/Teilen (1.8.4). */ .svi-kopf { font-weight: 600; margin: 0 0 4px; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; } .svi-akt { display: flex; align-items: center; gap: 4px; } .svi-akt .btn { padding: 6px 8px; min-height: 32px; } .svi-akt .btn svg { width: 17px; height: 17px; } .svi-summe { font-weight: 600; margin-top: 10px; } /* ANZAHL ALS BADGE (1.8.4): an Info, Drucken und Herunterladen — dieselbe Optik wie die Zähler-Badges im Shop-Kopf. Sitzt INNEN in der Ecke; ein Überstand macht auf schmalen Geräten die ganze Zeile seitlich scrollbar. */ .sv-badge { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; } .versand-group .btn:has(.sv-badge) { position: relative; } /* Auswahl „welches Label" unter dem Knopf (Muster .fdrop). */ .sv-drop { position: relative; display: inline-flex; } .sv-drop .fdrop-panel { left: auto; right: 0; min-width: 190px; } .sv-drop-sub { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } /* ── SPEDITION (1.8.4): Packstücke als Tabelle, Muster der Paketliste ── */ .sv-sped-kopf, .sv-sped-liste { display: grid; grid-template-columns: 22px minmax(110px, 1.2fr) 52px repeat(3, minmax(50px, .55fr)) minmax(64px, .75fr) 62px minmax(90px, 1fr) 34px; gap: 6px 8px; align-items: center; } .sv-sped-kopf { margin-bottom: 2px; } .sv-sped-row { display: contents; } .sv-sped-row > select, .sv-sped-row > input[type='text'], .sv-sped-row > input[type='number'] { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg, var(--card)); color: var(--text); font: inherit; min-width: 0; } .sv-sped-row > input[type='number'] { text-align: right; font-variant-numeric: tabular-nums; } .sv-stapel { display: flex; align-items: center; justify-content: center; } .sv-sped .check-row { margin-top: 6px; } .sv-sped { container-type: inline-size; } /* Zehn Spalten brauchen Platz; darunter steht jede Position als Block — lieber untereinander als vier Zahlen, von denen man drei nicht lesen kann. */ @container (max-width: 820px) { .sv-sped-kopf { display: none; } .sv-sped-liste { display: flex; flex-direction: column; gap: 12px; } .sv-sped-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sv-sped-row > select { flex: 1 1 100%; } .sv-sped-row > input[type='number'] { flex: 1 1 62px; } .sv-sped-row > input[type='text'] { flex: 1 1 100%; } /* Ohne Kopfzeile braucht jedes Feld seine eigene Beschriftung. */ .sv-sped-row > input[type='number']::placeholder { opacity: 1; } } @media (max-width: 800px) { .sv-sped-kopf { display: none; } .sv-sped-liste { display: flex; flex-direction: column; gap: 12px; } .sv-sped-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sv-sped-row > select { flex: 1 1 100%; } .sv-sped-row > input[type='number'] { flex: 1 1 62px; } .sv-sped-row > input[type='text'] { flex: 1 1 100%; } } .svi-liste { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .svi-zeile { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border); } .svi-zeile:last-child { border-bottom: 0; } .svi-label { flex: 0 0 40%; color: var(--muted); font-size: 13px; } .svi-wert { flex: 1 1 auto; font-weight: 600; font-variant-numeric: tabular-nums; word-break: break-word; } .feld-mit-akt { display: flex; align-items: stretch; gap: 6px; } .feld-mit-akt > :first-child { flex: 1 1 auto; min-width: 0; } .feld-akt { flex: 0 0 auto; align-self: stretch; width: 42px; height: auto; min-height: 42px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .feld-akt:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); } .feld-akt:disabled { opacity: .4; cursor: default; } .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; } /* Am Handy BRICHT der Bereichs-Umschalter (Belege, Ressourcen) in eine Chip-Reihe um, statt rechts abgeschnitten zu scrollen (Betreiber 15.08.) — das unsichtbare In-sich-Scrollen wurde als „weggeschnitten" gelesen. Gilt nur für die grossen Umschalter (.belege-seg); Zwei-Tab-Segs passen immer. */ @media (max-width: 700px) { .fk-seg.belege-seg { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; border: 0; background: none; border-radius: 0; } .fk-seg.belege-seg .fk-seg-btn { border: 1px solid var(--border); border-radius: 10px; background: var(--card); } .fk-seg.belege-seg .fk-seg-btn.is-active { background: var(--brand); border-color: var(--brand); color: #fff; } } .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; } /* Werkzeuge (Scan, Tagesabschluss, Kassenbuch, Kassenabschluss) als reine Icon-Knöpfe: 44 px = sichere Trefferfläche am Tablet, ohne die Zeile zu sprengen (mit Beschriftung schob sie den Verkaufsblock aus dem Bild). */ .vino-tool { flex: none; width: 44px; height: 44px; padding: 0; justify-content: center; } .vino-tool svg { width: 21px; height: 21px; } @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 { position: relative; 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); } /* ACHTUNG: Position/Größe NICHT in eine background-Kurzform MIT color-mix packen — ältere WebKit-Versionen (iPadOS < 16.2, typische Tresen-iPads) kennen color-mix nicht und verwerfen dann die GANZE Deklaration; das per JS gesetzte Flaschenfoto rendert ohne center/contain oben links in Originalgröße, dessen transparente Ecke → Kachel wirkt LEER. */ /* Das Foto steckt seit 1.4.58 in einem echten (nicht mehr als background-image): ältere iOS-Safari-Fassungen zeigen `blob:`-URLs nur in , nicht in CSS-url() — die Kacheln blieben dort leer. */ .vino-art-foto { /* Weiß, nicht getönt: Flaschenfotos sind freigestellt und wirken vor einem farbigen Grund schmutzig — auch im Dunkelmodus bleibt es weiß. */ display: block; height: 86px; border-radius: 8px; overflow: hidden; background: #fff; } .vino-art-img { display: block; width: 100%; height: 100%; object-fit: contain; } .vino-art-name { font-size: 13px; font-weight: 600; line-height: 1.3; min-height: 2.6em; overflow: hidden; } /* Fußzeile der Kachel: Artikelnummer links, Preis rechts. */ .vino-art-fuss { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } .vino-art-nr { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Preis oben rechts auf der Kachel (1.7.19) — eigener Platz, keine Konkurrenz mit der Artikelnummer. Getönter Grund, damit er auch über einem hellen Flaschenfoto lesbar bleibt. */ .vino-art-preis { position: absolute; top: 6px; right: 6px; z-index: 1; font-size: 15px; font-weight: 700; color: var(--brand); white-space: nowrap; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--card) 86%, transparent); } .vino-art-fuss { justify-content: flex-start; } /* 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; } /* Korbzeile ZWEIZEILIG (1.4.57): oben Name + Zeilensumme, darunter die Bedienung. Einzeilig teilten sich Name und Stepper die Breite — lange Weinnamen brachen mehrzeilig um und schoben die Knöpfe zusammen. */ .vino-row { display: grid; gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--border); } .vino-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .vino-row-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; min-width: 0; } .vino-row-summe { font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .vino-row-rabatt { color: var(--brand); font-weight: 600; white-space: nowrap; } .vino-row-acts { display: flex; align-items: center; gap: 6px; } /* „×" zwischen Menge und Einzelpreis macht die Rechnung lesbar (3 × 16,00). */ .vino-row-mal { color: var(--muted); font-size: 13px; } /* Entfernen sitzt ganz rechts, rahmenlos — der Blick soll bei Menge/Preis bleiben. */ .vino-row-weg { margin-left: auto; padding: 6px; min-height: 0; border: 0; background: none; flex: none; color: var(--muted); } .vino-row-weg:hover { color: var(--brand); } .vino-row-weg svg { width: 16px; height: 16px; } .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; } /* Weingut-Zugänge (Operator-Dialog, 1.4.33): vorhandene Konten + Abschnittstitel */ .sheet-abschnitt { font-size: 14px; margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); } .tn-user-liste { margin: 4px 0 2px; } .tn-user-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .tn-user-row:last-child { border-bottom: 0; } .tn-user-ic { color: var(--muted); flex: none; } .tn-user-ic svg { width: 20px; height: 20px; fill: currentColor; } .tn-user-main { min-width: 0; } .tn-user-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .tn-user-sub { font-size: 12.5px; color: var(--muted); } .tn-user-row .tn-user-main { flex: 1; } .tn-user-block:not(:last-child) .tn-user-row { border-bottom: 0; } .tn-user-block { border-bottom: 1px solid var(--border); } .tn-user-block:last-child { border-bottom: 0; } .tn-user-pass { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; padding: 0 0 12px 30px; } .tn-user-pass .field { flex: 1; min-width: 200px; margin: 0; } .tn-user-msg { font-size: 12.5px; color: var(--muted); flex-basis: 100%; } .tn-user-msg.is-fehler { color: var(--brand); } /* ---------- Wartungsmodus (1.4.32, Optik nach Vorlage 1.4.34) ---------- */ /* Sperr-Fenster ÜBER allem (auch Dialogen/Nav/Kiosk); Aufbau wie das Design-Sheet branding/vini-wartungsmodus.png: links Text, rechts VINI. */ /* ACHTUNG Zentrierung: NICHT place-items:center — ist das Blatt höher als der Bildschirm (Handy), wird der obere Teil dann abgeschnitten und ist nicht erreichbar. `margin: auto` am Kind zentriert genauso, lässt den Überlauf aber scrollbar. */ /* Flex + margin:auto am Kind: zentriert wie place-items:center, schneidet ein zu hohes Blatt aber NICHT oben ab (es bleibt scrollbar). min-width: 0 am Blatt und an der Textspalte, sonst wächst das Ganze am Handy auf max-content und läuft seitlich aus dem Bild. */ #wartung-fenster { position: fixed; inset: 0; z-index: 400; overflow-y: auto; background: #fbf7f1; color: #232323; display: flex; padding: 20px; } [data-theme='dark'] #wartung-fenster { background: #1a1614; color: #f2ece4; } .wartung-blatt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 1120px; width: 100%; min-width: 0; margin: auto; background: #fffdfa; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(35, 35, 35, .13); } [data-theme='dark'] .wartung-blatt { background: #221d1a; box-shadow: none; border: 1px solid #3a322c; } .wartung-text { padding: 26px 26px 22px; min-width: 0; } /* Wortmarke über die volle Breite der Textspalte */ .wartung-logo { width: 100%; height: auto; display: block; margin-bottom: 16px; } [data-theme='dark'] .wartung-logo { content: url('../branding/logo_wordmark_light.png'); } .wartung-titel { font-size: clamp(24px, 3.1vw, 34px); line-height: 1.15; font-weight: 600; color: var(--brand); margin: 0 0 10px; } [data-theme='dark'] .wartung-titel { color: #d9a3ac; } .wartung-trenner { height: 1px; background: var(--accent); opacity: .55; margin: 0 0 13px; max-width: 360px; } .wartung-lead { margin: 0 0 7px; font-size: 14.5px; line-height: 1.5; color: #4a4441; } [data-theme='dark'] .wartung-lead { color: #c8bfb6; } .wartung-hinweis { margin: 9px 0 0; font-size: 14px; font-weight: 600; color: var(--brand); } [data-theme='dark'] .wartung-hinweis { color: #d9a3ac; } .wartung-punkte { background: rgba(216, 191, 146, .14); border-radius: 14px; padding: 3px 14px; margin: 14px 0 12px; } .wartung-punkt { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid rgba(216, 191, 146, .45); } .wartung-punkt:last-child { border-bottom: 0; } .wartung-punkt-ic { color: var(--brand); flex: none; margin-top: 1px; } [data-theme='dark'] .wartung-punkt-ic { color: #d9a3ac; } .wartung-punkt-ic svg { width: 24px; height: 24px; fill: currentColor; } .wartung-punkt b { display: block; color: var(--brand); font-size: 14.5px; margin-bottom: 2px; } [data-theme='dark'] .wartung-punkt b { color: #d9a3ac; } .wartung-punkt span { font-size: 13.5px; color: #5a534f; line-height: 1.45; } [data-theme='dark'] .wartung-punkt span { color: #b6ada4; } .wartung-fuss { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: rgba(216, 191, 146, .14); border-radius: 14px; padding: 11px 14px; } .wartung-fuss-text { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; } .wartung-fuss-text b { color: var(--brand); font-size: 14.5px; } [data-theme='dark'] .wartung-fuss-text b { color: #d9a3ac; } .wartung-fuss-text span { font-size: 13px; color: #5a534f; } [data-theme='dark'] .wartung-fuss-text span { color: #b6ada4; } .wartung-status { font-size: 13px; margin: 8px 2px 0; min-height: 0; color: var(--brand); } .wartung-team { margin: 12px 0 0; font-size: 12.5px; color: #8a807a; } /* Schmales Fenster: die VINI-Szene steht VOLLSTÄNDIG über dem Text (order: -1, volle Breite, automatische Höhe). Ab 900 px füllt sie die rechte Spalte randlos von oben bis unten (object-fit: cover) — die Textspalte ist bewusst straff gehalten, damit die Spalte etwa quadratisch bleibt und cover nur wenige Pixel seitlich beschneidet (die Sprechblase hat genug Rand). */ .wartung-bild { order: -1; } /* Am Handy deckelt max-height die Bildhöhe (sonst füllt die fast quadratische Szene den halben Bildschirm). Der Ausschnitt hängt dabei OBEN (center top): beschnitten wird der Tisch, nicht die Sprechblase. */ .wartung-bild img { width: 100%; height: auto; max-height: 42vh; object-fit: cover; object-position: center top; display: block; } @media (min-width: 900px) { .wartung-blatt { grid-template-columns: 1.06fr .94fr; align-items: stretch; } .wartung-text { padding: 32px 32px 26px; } /* Am Schreibtisch bleibt die Überschrift EINZEILIG — die Schriftgröße wächst deshalb mit der Fensterbreite (vw) statt fest zu sein. */ .wartung-titel { white-space: nowrap; font-size: clamp(18px, 2.4vw, 28px); } .wartung-bild { order: 0; } /* Ausschnitt links der Mitte: schneidet cover etwas ab, dann lieber rechts (Tank/Trauben) als links — dort steht die Sprechblase. */ /* max-height: none hebt die 42vh-Deckelung der Handy-Regel auf — sonst endet das Bild vor dem unteren Blattrand. */ .wartung-bild img { height: 100%; max-height: none; object-fit: cover; object-position: 28% center; } } /* Vorankündigung eines geplanten Fensters (Banner-Muster) */ .banner.wartung-vorschau { background: rgba(216, 191, 146, .3); color: var(--text); } .banner.wartung-vorschau svg { fill: var(--brand); } .banner .banner-x { background: none; border: 0; padding: 4px; cursor: pointer; color: inherit; opacity: .7; } .banner .banner-x svg { width: 16px; height: 16px; fill: currentColor; } /* Operator: Editor für geplante Fenster */ .wf-liste { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .wf-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .wf-row .wf-hinweis { grid-column: 1 / -1; } @media (min-width: 860px) { .wf-row { grid-template-columns: 210px 210px 1fr auto; } .wf-row .wf-hinweis { grid-column: auto; } } /* Operator: Gesamtsystem-Zeile in der Administration + Chip je Weingut */ .wartung-global { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin: 0 0 14px; } .wartung-global-ic { color: var(--muted); flex: none; } .wartung-global-ic.is-an { color: var(--brand); } .wartung-global-ic svg { width: 22px; height: 22px; fill: currentColor; } .wartung-global-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .wartung-global-text span { color: var(--muted); } .chip-wartung { background: var(--brand); color: #fff; } /* Kassenbuch + Kassenabschluss (1.4.43; Formulare im Projektstandard 1.4.45) */ .kb-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 13px; border-radius: 11px; margin-bottom: 8px; background: color-mix(in srgb, var(--accent) 16%, var(--card)); } .kb-bestand { font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 600; white-space: nowrap; } .kb-liste { margin: 12px 0 4px; max-height: 300px; overflow-y: auto; } .kb-zeile { display: grid; grid-template-columns: 92px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .kb-zeile:last-child { border-bottom: 0; } .kb-zeit { color: var(--muted); font-size: 12.5px; } .kb-art { font-size: 12px; color: var(--muted); } .kb-betrag { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .kb-betrag.plus { color: #1e7e34; } .kb-betrag.minus { color: var(--brand); } [data-theme='dark'] .kb-betrag.plus { color: #57bb6f; } [data-theme='dark'] .kb-betrag.minus { color: #d9a3ac; } .kb-stand { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; white-space: nowrap; } .ka-spalten { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 860px) { .ka-spalten { grid-template-columns: 1.15fr .85fr; } } .ka-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .ka-zeile b { font-variant-numeric: tabular-nums; white-space: nowrap; } .ka-zeile.is-summe { border-bottom: 0; border-top: 2px solid var(--accent); margin-top: 6px; padding-top: 9px; font-size: 15px; font-weight: 600; } .ka-umsatz b:first-child { display: block; margin-bottom: 6px; } .ka-zaehl-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--border); } .ka-zaehl-kopf b { font-size: 14px; } /* Zählhilfe-Umschalter: kompakte Segmente statt voller Buttons */ .ka-zaehl-kopf .fk-seg .btn { font-size: 12.5px; padding: 5px 12px; } .zaehl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 7px; } .zaehl-feld { border: 1px solid var(--border); border-radius: 9px; padding: 5px 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; } .zaehl-feld span { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .zaehl-feld input { width: 52px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: right; padding: 1px 2px; } .diff-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 11px 13px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 16%, var(--card)); } .diff-box b { font-size: 17px; font-variant-numeric: tabular-nums; } .diff-box.ist-ok b { color: #1e7e34; } .diff-box.ist-minus b, .diff-box.ist-plus b { color: var(--brand); } [data-theme='dark'] .diff-box.ist-ok b { color: #57bb6f; } .ka-tg-hint { margin: -6px 0 12px; } .ka-bank-feld { max-width: 220px; margin-top: 10px; } .klein { font-size: 12.5px; } /* Kassen (TSE-Clients) je Gerät, 1.4.42 */ .kassen-block { margin: 4px 0 18px; } .kassen-liste { margin: 8px 0 10px; } .kassen-zeile { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); } .kassen-zeile:last-child { border-bottom: 0; } .kassen-zeile.is-meine .kassen-ic { color: #1e7e34; } .kassen-ic { color: var(--muted); flex: none; } .kassen-ic svg { width: 20px; height: 20px; fill: currentColor; } .kassen-main { flex: 1; min-width: 0; } .kassen-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .kassen-sub { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .kassen-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .kassen-acts .btn { font-size: 12.5px; padding: 6px 10px; } .kassen-neu { display: flex; gap: 8px; flex-wrap: wrap; } .kassen-neu input { flex: 1; min-width: 200px; } /* TSE-Rückmeldung (1.4.31): signiert dezent grün, dokumentierter Ausfall gelb */ .vino-tse-hinweis { font-size: 12.5px; margin: 2px 0 0; color: #1e7e34; } [data-theme='dark'] .vino-tse-hinweis { color: #57bb6f; } .vino-tse-hinweis.is-ausfall { color: #a06a00; } [data-theme='dark'] .vino-tse-hinweis.is-ausfall { color: #d8a53e; } /* 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; } /* NUR DAS ZEICHEN in der Listenzeile (1.8.5): kein Text, die Farbe trägt den Stand, der Tooltip die Einzelheiten. Etwas größer als das beschriftete Flag — allein muss es auf einen Blick erkennbar sein. */ .sv-flag.is-icon { gap: 0; margin-top: 0; } .sv-flag.is-icon svg { width: 18px; height: 18px; } /* Masken statt SVG-Pfad (1.8.11): die Vorlage ist eine gefuellte Zeichnung mit ausgesparten Details — nachgezeichnet waere sie ein zweites, schlechteres Bild. `background: currentColor` uebernimmt die Statusfarbe. Etwas groesser als der frueherer LKW-Pfad, weil die Zeichnung feiner ist. */ .ic-versand-paket, .ic-versand-spedition { display: inline-block; width: 42px; height: 42px; background: currentColor; } @media (max-width: 900px) { /* Auf schmalen Geraeten darf die Zeile nicht auseinanderlaufen — dort traegt ohnehin der Tooltip die Einzelheiten. */ .ic-versand-paket, .ic-versand-spedition { width: 30px; height: 30px; } } .ic-versand-paket { -webkit-mask: url('../branding/versand_paket_maske.png') no-repeat center / contain; mask: url('../branding/versand_paket_maske.png') no-repeat center / contain; } .ic-versand-spedition { -webkit-mask: url('../branding/versand_spedition_maske.png') no-repeat center / contain; mask: url('../branding/versand_spedition_maske.png') no-repeat center / contain; } /* Derselbe Zoom beim Verweilen wie beim Status-Zeichen (1.8.27, Betreiber) — danach zeigt der Browser den Tooltip mit Dienstleister, Stand und Paketzahl. */ .bz-versand .sv-flag.is-icon .ic-versand-paket, .bz-versand .sv-flag.is-icon .ic-versand-spedition { transition: transform .12s ease; } .bz-versand .sv-flag.is-icon:hover .ic-versand-paket, .bz-versand .sv-flag.is-icon:hover .ic-versand-spedition { transform: scale(1.25); } .sv-flag.is-icon:not(.is-gruen):not(.is-blau):not(.is-rot) { color: var(--muted); } .sv-flag.is-gruen { color: #1e7e34; font-weight: 600; } .sv-flag.is-blau { color: #1565c0; } .sv-flag.is-rot { color: #b02a37; font-weight: 600; } /* Zahlungs-Flag (1.4.68) nutzt dieselben Klassen; Gelb kommt neu dazu. */ .sv-flag.is-gelb { color: #8a5314; 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; } [data-theme='dark'] .sv-flag.is-gelb { color: #e0a458; } /* 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; } /* Paketvorlage mit Karton-Artikel (E2 Verpackung): zwei Spalten mehr — die Combobox (.ssel) ist kein im Assistenten „Im Weinberg". */ .ssel.vb-bbch { max-width: none; width: 100%; min-width: 190px; padding: 0; border: 0; } /* FLACHER (1.8.12, Betreiber): ein Feld in voller Formularhoehe waere in der Kopfkarte zu wuchtig. Weniger Polster, die Schriftgroesse bleibt. */ .ssel.vb-bbch .ssel-btn { padding: 5px 10px; } .ssel.vb-bbch .ssel-label { font-size: 13.5px; } /* EIGENE KACHEL im Stil der Modellzeile darunter (.vb-phaeno): EINE Zeile aus Titel, Auswahl und Hinweis — nichts bricht um. */ .vb-bbch-kachel { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 6px 12px; border: 1px dashed var(--border); border-radius: 10px; font-size: 13.5px; } .vb-bbch-kachel .ssel { flex: 0 0 auto; width: 250px; min-width: 0; } .bbch-hinweis { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } @media (max-width: 720px) { /* Auf schmalen Geraeten darf die Zeile umbrechen — sonst verschwindet der Hinweis hinter der Ellipse. */ .vb-bbch-kachel { flex-wrap: wrap; } .vb-bbch-kachel .ssel { flex: 1 1 200px; width: auto; } .bbch-hinweis { white-space: normal; flex: 1 1 100%; } } .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 */ .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 */ /* 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; } /* Hinweis für Module, die es noch nicht gibt (Klick in der Seitenleiste bzw. auf eine Dashboard-Kachel mit Status „In Entwicklung"/„Geplant"). */ .modul-info { max-width: 420px; text-align: center; } .modul-info .sheet-body { padding: 30px 26px 22px; } .mi-logo { width: 190px; max-width: 70%; margin: 0 auto 18px; display: block; } [data-theme='dark'] .mi-logo { content: url('../branding/logo_vinorum_dark.png'); } .mi-status { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); margin: 0 0 6px; } .mi-titel { font-size: 20px; margin: 0 0 10px; } .mi-text { font-size: 14.5px; line-height: 1.55; margin: 0 0 14px; } .modul-info .sheet-hint { text-align: center; } .modul-info .sheet-actions { justify-content: center; margin-top: 20px; } /* ================= SEITENLEISTE (ab 1280 px) ================= Am Schreibtisch tritt eine feste Seitenleiste an die Stelle der unteren Leiste: ALLE Module gegliedert nach den Dashboard-Rubriken — auch die noch nicht gebauten (die öffnen einen Hinweis statt einer leeren Ansicht). Darunter (Handy/Tablet) bleibt alles wie gehabt — die Leiste ist dann aus. Eingeklappt (body.sidebar-schmal) bleibt eine Icon-Spalte; der Zustand liegt je Gerät in localStorage (vinorum.sidebar). */ .sidebar { display: none; } /* GESTALTUNG DER LEISTE — GILT UEBERALL (1.8.26): Am Schreibtisch steht sie fest links, auf Tablet und Handy faehrt DIESELBE Leiste als Schublade ueber die Seite (body.menu-modus + body.menu-offen). Frueher lag alles im 1280-px-Block; mobil waere die Schublade ohne jede Gestaltung gewesen. ACHTUNG: NICHT --anthracite verwenden — die CI-Variable ist im Dunkelmodus ein HELLER Ton (sie dient dort als Textfarbe). */ :root { --sb-breit: 280px; --sb-schmal: 64px; --sb-bg: #232323; } .sidebar { display: none; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: var(--sb-breit); background: var(--sb-bg); color: #fff; border-right: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; transition: width 0.15s ease; } body.sidebar-schmal .sidebar { width: var(--sb-schmal); } /* Kopf: VINORUM-Wortmarke + Weingut + Einklapp-Knopf */ .sb-kopf { display: flex; align-items: flex-start; gap: 8px; padding: calc(14px + env(safe-area-inset-top, 0px)) 12px 13px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.09); } .sb-marke { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .sb-logo { width: 200px; max-width: 100%; height: auto; display: block; } .sb-logo-klein { width: 28px; display: none; border-radius: 7px; } .sb-weingut { /* mittig unter der Wortmarke: gleiche Breite wie das Logo + text-align */ width: 200px; max-width: 100%; text-align: center; font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.sidebar-schmal .sb-logo, body.sidebar-schmal .sb-weingut { display: none; } body.sidebar-schmal .sb-logo-klein { display: block; margin: 0 auto; } /* Werkzeuge im Fuß (kommen am Schreibtisch aus der Kopfzeile) */ .sb-werkzeuge { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; /* KEINE eigene Trennlinie: seit 1.4.65 sitzen die Einstellungen als Zahnrad IN dieser Zeile, der Fuß enthält also nur noch sie — die Linie liefert .sb-fuss. Vorher standen hier zwei Linien direkt übereinander. */ } .sb-tool { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: rgba(255, 255, 255, 0.7); cursor: pointer; } .sb-tool:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } /* Einstellungen sitzen seit 1.4.65 als Zahnrad in dieser Leiste — der aktive Zustand muss deshalb auch hier sichtbar sein. */ .sb-tool.is-active { background: rgba(255, 255, 255, 0.16); color: #fff; } .sb-tool svg { width: 19px; height: 19px; fill: currentColor; display: block; } .sb-tool .lang-flag { width: 20px; height: 14px; border-radius: 2px; } .sb-lang { position: relative; } /* Menü nach OBEN aufklappen — der Fuß sitzt am unteren Fensterrand. `top: auto` muss mit, sonst gewinnt das top der Basisregel .lang-menu. RECHTS ausrichten (nicht links): der Sprachknopf sitzt weit rechts in der Werkzeugzeile, nach rechts geöffnet ragte das Menü über die Leiste hinaus und wurde von deren `overflow: hidden` abgeschnitten. */ .sidebar .sb-lang-menu { top: auto; bottom: calc(100% + 6px); left: auto; right: 0; } /* Eingeklappte Icon-Spalte: dort ist die Leiste schmaler als das Menü — es öffnet daneben, deshalb darf die Leiste hier nicht zuschneiden. */ body.sidebar-schmal .sidebar { overflow: visible; } body.sidebar-schmal .sidebar .sb-lang-menu { left: 0; right: auto; } body.sidebar-schmal .sb-werkzeuge { justify-content: center; } /* Einklapp-Pfeil bewusst UNAUFFÄLLIG: kein Kasten/Rahmen, nur ein dezentes Symbol, das beim Überfahren aufhellt. */ .sb-toggle { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: rgba(255, 255, 255, 0.35); cursor: pointer; } .sb-toggle:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .sb-toggle svg { width: 18px; height: 18px; fill: currentColor; display: block; } body.sidebar-schmal .sb-marke { display: none; } body.sidebar-schmal .sb-kopf { justify-content: center; padding-left: 12px; } /* Einträge. Der Scrollbalken bleibt dezent: schmal, fast unsichtbar, und erst beim Überfahren der Leiste deutlicher — er soll die Navigation nicht überlagern. */ /* Fester Kopf (1.7.5): „Zuletzt benutzt" steht ganz oben und scrollt NICHT mit — der Schnellzugriff muss aus jeder Tiefe der Liste erreichbar sein. Darunter beginnt die scrollende Liste mit dem Dashboard. */ .sb-fix { flex: none; padding: 8px 10px 0; } .sb-fix .sb-block { margin-top: 0; } body.sidebar-schmal .sb-fix { padding: 8px 6px 0; } .sb-liste { flex: 1; overflow-y: auto; padding: 8px 8px 14px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.10) transparent; overflow-x: hidden; } .sidebar:hover .sb-liste { scrollbar-color: rgba(255, 255, 255, 0.24) transparent; } .sb-liste::-webkit-scrollbar { width: 4px; } .sb-liste::-webkit-scrollbar-track { background: transparent; } .sb-liste::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 2px; } .sidebar:hover .sb-liste::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.24); } /* Rubrik-Block: Kopf klappt auf/zu, der Block selbst ist per Tap & Hold verschiebbar (data-dashkey + dashSortierbar wie auf dem Dashboard). */ .sb-block + .sb-block { margin-top: 2px; } .sb-gruppe { display: flex; align-items: center; gap: 6px; width: 100%; margin: 14px 0 4px; padding: 2px 10px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255, 255, 255, 0.48); text-align: left; } .sb-gruppe:hover { color: rgba(255, 255, 255, 0.7); } .sb-gruppe-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-gruppe-chev { display: inline-flex; flex: none; } .sb-gruppe-chev svg { width: 16px; height: 16px; fill: currentColor; display: block; transition: transform 0.15s ease; } .sb-block.is-zu .sb-gruppe-chev svg { transform: rotate(-90deg); } .sb-block.is-zu .sb-block-inhalt { display: none; } .sb-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; margin-bottom: 1px; border: 0; border-radius: 9px; background: transparent; color: rgba(255, 255, 255, 0.82); font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .sb-item:hover { background: rgba(255, 255, 255, 0.09); color: #fff; } .sb-ic { display: inline-flex; flex: none; } .sb-ic svg { width: 20px; height: 20px; fill: currentColor; display: block; } .sb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Aktiv: nur Fläche, Weiß und Fettung — KEINE Farbmarke links (1.6.77). Seit 1.6.75 trägt der Gruppenkopf die 3-px-Kante seines Bereichs; eine zweite Marke am Modul darunter las sich wie eine zweite Ebene. */ .sb-item.is-active { background: rgba(255, 255, 255, 0.13); color: #fff; font-weight: 600; } .sb-fuss { padding: 8px; border-top: 1px solid rgba(255, 255, 255, 0.09); } /* Externe Ziele (Shop, Buchungsfenster) und noch nicht gebaute Module */ .sb-ext { display: inline-flex; margin-left: auto; opacity: 0.5; } .sb-ext svg { width: 14px; height: 14px; fill: currentColor; display: block; } .sb-item.is-plan { color: rgba(255, 255, 255, 0.45); } .sb-item.is-plan:hover { color: rgba(255, 255, 255, 0.72); } .sb-plan-punkt { width: 6px; height: 6px; border-radius: 50%; margin-left: auto; flex: none; background: rgba(255, 255, 255, 0.3); } body.sidebar-schmal .sb-ext, body.sidebar-schmal .sb-plan-punkt { display: none; } /* Eingeklappt: nur Symbole (Beschriftung im title-Tooltip) */ body.sidebar-schmal .sb-label, body.sidebar-schmal .sb-gruppe { display: none; } /* Eingeklappt zeigt die Spalte ALLE Symbole — zugeklappte Rubriken würden dort sonst spurlos verschwinden. */ body.sidebar-schmal .sb-block.is-zu .sb-block-inhalt { display: block; } body.sidebar-schmal .sb-item { justify-content: center; padding: 10px 0; } body.sidebar-schmal .sb-liste { padding: 8px 6px 14px; } /* ── Schublade auf Tablet und Handy ────────────────────────────────────── `menu-modus` setzt renderSidebar (unter 1280 px oder erzwungene mobile Navigation); `menu-offen` schaltet der Burger in der Kopfzeile. */ /* NACH DEM MOCKUP (1.8.28): Das Menue beginnt UNTER der Kopfzeile — Burger, Marke und Suche bleiben stehen, und der Burger ist zugleich der Weg zurueck. Am Tablet 280 px wie am Schreibtisch, am Smartphone die VOLLE Breite. */ body.menu-modus .sidebar { display: flex; width: var(--sb-breit); z-index: 60; top: var(--kopf-h, 64px); transform: translateX(-102%); transition: transform .22s ease; } body.menu-modus.menu-offen .sidebar { transform: none; box-shadow: 8px 0 34px rgba(0, 0, 0, .28); } @media (max-width: 699px) { body.menu-modus .sidebar { width: 100%; box-shadow: none; } body.menu-modus.menu-offen .sidebar { box-shadow: none; } /* Ueber die volle Breite braucht es keinen Verdunkler — es ist nichts mehr zu sehen, was er abdunkeln koennte. */ body.menu-modus.menu-offen #menu-backdrop { opacity: 0; } } /* Solange das Menue offen ist, scrollt die Seite darunter nicht mit. */ body.menu-offen { overflow: hidden; } /* UND DIE KOPFZEILE BLEIBT STEHEN (1.8.38, Betreiber: „wenn ich das Menue einblende verschwindet der Kopf mit dem Logo"). Sie ist normal MITSCROLLEND — wer in einer Liste weit unten war, hatte sie nicht mehr im Bild, waehrend die Schublade weiterhin bei `top: var(--kopf-h)` begann: oben klaffte die Liste. Nur WAEHREND das Menue offen ist wird sie fixiert; die Seite steht ohnehin still, und in Listen kostet sie so keinen Platz. z-index 61 = ueber der Schublade (60), unter der unteren Leiste (62), damit der Burger erreichbar bleibt. */ body.menu-modus.menu-offen .app-header { position: fixed; top: 0; left: 0; right: 0; z-index: 61; background: var(--card); box-shadow: 0 1px 0 var(--border); } /* UNTERE LEISTE im Schubladen-Modus (1.8.32): neun Zeichen, gleichmaessig verteilt — keine scrollende Tab-Reihe mehr. Sie liegt UEBER dem Menue, damit der Burger auch bei offener Schublade erreichbar bleibt. */ body.menu-modus .bottom-nav { /* Z-INDEX NUR BEI OFFENER SCHUBLADE HOCH (1.8.37): Mit dauerhaft 62 lag die Leiste ueber JEDEM Dialog (Backdrop 40) — gemessen: die Knopfzeile eines Bottom-Sheets endete bei y=796, die Leiste beginnt bei y=754, „Neuer Verkauf“ und „Speichern“ waren also unerreichbar. Ueber dem Menue muss sie nur liegen, WAEHREND das Menue offen ist. */ z-index: 20; justify-content: space-between; padding: 0 6px; align-items: center; /* Gegen das gemeldete „Mitscrollen" auf echten Geraeten: Die Leiste bekommt eine eigene Compositor-Ebene (translateZ steht schon in der Basisregel) und das Ueberscrollen wird nicht an das Dokument weitergereicht — auf iOS zieht die fixierte Leiste sonst beim Bounce mit. */ will-change: transform; } body.menu-modus.menu-offen .bottom-nav { z-index: 62; } body.menu-modus { overscroll-behavior-y: contain; } .nav-ic { flex: 1 1 0; min-width: 0; height: var(--nav-height); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 1px; } .nav-ic svg { width: 23px; height: 23px; fill: currentColor; display: block; } /* BESCHRIFTUNG unter dem Zeichen (1.8.34, Betreiber). Sie darf die Leiste nicht sprengen: eine Zeile, Ellipse als letzte Rettung — die Kurzform kommt aus dem Aufrufer, damit hier nichts abgeschnitten wird, was man auch kuerzer sagen kann. */ .nav-ic-label { font-size: 9.5px; line-height: 1.1; letter-spacing: -.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-ic.is-active { color: var(--brand); } .nav-ic.nav-ic-menu { color: var(--text); } .nav-ic.nav-ic-menu.is-active { color: var(--brand); } /* Der Verdunkler beginnt ebenfalls unter der Kopfzeile. */ body.menu-modus #menu-backdrop { top: var(--kopf-h, 64px); } /* Im Menue steht KEINE zweite Wortmarke (Betreiber) — sie steht in der Kopfzeile darueber; der Weingutname bleibt. Der Schliessen-Knopf entfaellt ebenfalls (Mockup): Geschlossen wird ueber den Burger, der sichtbar bleibt. */ body.menu-modus .sb-logo, body.menu-modus .sb-logo-klein { display: none; } body.menu-modus .sb-toggle { display: none; } /* Das Menue traegt NUR die Bereichsliste (1.8.32): Der Weingutname steht in der Kopfzeile, die Werkzeuge ebenfalls, und die zuletzt benutzten Module stehen in der unteren Leiste. */ body.menu-modus .sb-kopf { display: none; } body.menu-modus .sb-fuss { display: none; } body.menu-modus .sb-zuletzt { display: none; } body.menu-modus .sb-liste { padding-top: 10px; /* Platz fuer die untere Leiste: Sie liegt UEBER dem Menue, sonst verdeckt sie den letzten Bereich. */ padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 8px); } body.menu-modus .sb-weingut { width: auto; text-align: left; font-size: 13px; } body.menu-modus .sb-kopf { padding-top: calc(12px + env(safe-area-inset-top, 0px)); } #menu-backdrop { position: fixed; inset: 0; z-index: 59; background: rgba(20, 18, 16, .45); opacity: 0; pointer-events: none; transition: opacity .22s ease; } body.menu-offen #menu-backdrop { opacity: 1; pointer-events: auto; } /* Der Burger steht links in der Kopfzeile — am Schreibtisch mit fester Leiste waere er sinnlos (dort ist die Kopfzeile ohnehin aus). */ #menu-btn { display: none; } body.menu-modus #menu-btn { display: inline-flex; } /* Die Werkzeuge stehen seit 1.8.32 wieder in der Kopfzeile (rechts) — im Menue sind sie dafuer entfallen. */ /* KOPFZEILE (1.8.32, Betreiber): Marke mit dem Weingut darunter GANZ LINKS, rechts die Werkzeuge — Suche, Handbuch, Hell/Dunkel, Sprache, Abmelden. Der Burger steht jetzt unten in der Leiste. */ body.menu-modus .brand-left { flex: 0 0 auto; justify-content: flex-start; } body.menu-modus .brand-actions { flex: 1 1 auto; justify-content: flex-end; } body.menu-modus .header-row { justify-content: flex-start; } body.menu-modus #global-search-btn { width: 40px; height: 40px; } body.menu-modus #global-search-btn svg { width: 24px; height: 24px; } /* Der Betriebsname steht LINKS unter der Marke (1.8.32, Betreiber: „das Logo mit darunter stehendem Tenant wandert ganz nach links"). */ /* Der Betriebsname steht ZENTRIERT unter der Wortmarke (1.8.34, Betreiber) und dicht an ihr. Die Breite kommt aus `--marke-w` (renderHeader misst die Marke) — eine feste Zahl waere bei Media-Queries und Kundenlogos falsch. */ body.menu-modus .header-row { justify-content: flex-start; margin-top: -3px; } body.menu-modus .subtitle { font-size: 11.5px; width: var(--marke-w, 168px); text-align: center; line-height: 1.15; } @media (min-width: 1280px) { .sidebar { display: flex; } /* Die Kopfzeile entfällt am Schreibtisch KOMPLETT: Wortmarke, Weingut, Suche, Handbuch, Hell/Dunkel, Sprache und Abmelden stehen jetzt in der Leiste. Das Markup bleibt im DOM (renderHeader schreibt weiter hinein) — nur unsichtbar, damit unter 1024 px alles unverändert funktioniert. */ .app-header { display: none; } /* Inhalt rückt nach rechts; die untere Leiste entfällt am Schreibtisch. */ .view, #offline-banner, #update-banner, #install-banner { margin-left: var(--sb-breit); transition: margin-left 0.15s ease; } body.sidebar-schmal .app-header, body.sidebar-schmal .view, body.sidebar-schmal #offline-banner, body.sidebar-schmal #update-banner, body.sidebar-schmal #install-banner { margin-left: var(--sb-schmal); } /* Dialoge im ARBEITSBEREICH zentrieren (1.3.92): der Backdrop liegt über dem ganzen Fenster — ohne Ausgleich hingen die Fenster optisch links, weil die Seitenleiste links Platz nimmt. padding-left = Sidebar-Breite verschiebt die Mitte in den sichtbaren Arbeitsbereich (16px Grund-Padding bleibt rechts). */ .modal-backdrop { padding-left: calc(var(--sb-breit) + 16px); } body.sidebar-schmal .modal-backdrop { padding-left: calc(var(--sb-schmal) + 16px); } body.sidebar-aus .modal-backdrop { padding-left: 16px; } .bottom-nav { display: none; } .view { padding-bottom: 28px; } [data-theme='dark'] .sidebar { --sb-bg: #171717; border-right-color: rgba(255, 255, 255, 0.06); } /* NAVIGATIONS-MODUS „mobil" (body.sidebar-aus, Umschalter im Werkzeug-Fuß der Leiste bzw. #nav-modus-btn in der Kopfzeile): der Nutzer holt sich auch am Desktop die mobile Navigation zurück — Kopfzeile + untere Leiste erscheinen wieder, die Seitenleiste und ihre Ränder verschwinden. Steht bewusst NACH den sidebar-schmal-Regeln (gleiche Spezifität). */ body.sidebar-aus .sidebar { display: none; } /* ABER: Im mobilen Modus IST die Leiste die Menue-Schublade (1.8.38, Betreiber: „das Menue geht ab einer bestimmten Aufloesung nicht mehr auf — danach grau oder gar nichts"). Ab 1280 px gewann hier `display: none` gegen `body.menu-modus .sidebar { display: flex }` (gleiche Spezifitaet, spaetere Regel): Der Verdunkler kam, das Menue nicht. Versteckt wird die Schublade ausschliesslich ueber ihr `transform`. */ body.sidebar-aus.menu-modus .sidebar { display: flex; } body.sidebar-aus .app-header { display: block; margin-left: 0; } body.sidebar-aus .bottom-nav { display: flex; } body.sidebar-aus .view, body.sidebar-aus #offline-banner, body.sidebar-aus #update-banner, body.sidebar-aus #install-banner { margin-left: 0; } } /* Der Ansicht-Umschalter in der Kopfzeile ist nur ab Desktop-Breite sinnvoll — darunter gibt es keine Seitenleiste, zu der er wechseln könnte. */ @media (max-width: 1279.98px) { #nav-modus-btn { display: none; } } /* ---------- Gerätediagnose (1.4.49) ---------- Schlichte Werteliste im Dialog: links die Bezeichnung, rechts der Wert. */ .diag-liste { display: grid; gap: 2px; margin-bottom: 14px; } .diag-zeile { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); } .diag-zeile:last-child { border-bottom: 0; } .diag-k { color: var(--muted); } .diag-v { font-weight: 600; text-align: right; } .diag-warn { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--brand) 10%, transparent); border-left: 3px solid var(--brand); font-size: 14px; } /* Ein HINWEIS ist keine Warnung (1.8.45): Die Android-Benachrichtigung mit der Adresse ist eine Eigenheit des Geraets, kein Fehler — deshalb dieselbe Form, aber in ruhigem Grau statt im Weinrot der Warnungen. */ .diag-hinweis { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--muted) 10%, transparent); border-left: 3px solid var(--muted); font-size: 13.5px; color: var(--text); } /* ---------- Kassendaten fürs Finanzamt (TSE Etappe 3, 1.4.50) ---------- Ein Dialog, drei Abschnitte (DSFinV-K, TSE-Sicherung, Kassenmeldung) — jeder mit einer Erklärzeile links und der Aktion rechts. */ .kx-aktion { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 10px 0 18px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; } .kx-aktion .sub { color: var(--muted); font-size: 14px; flex: 1 1 260px; } .kx-zeitraum { display: flex; gap: 12px; flex-wrap: wrap; } .kx-zeitraum .field { flex: 1 1 160px; } .kx-melde { margin-bottom: 14px; } .kx-liste { display: grid; gap: 2px; } .kx-zeile { display: grid; grid-template-columns: minmax(90px, auto) 1fr auto auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); } .kx-zeile:last-child { border-bottom: 0; } .kx-art { font-weight: 600; } .kx-zeit { color: var(--muted); font-size: 14px; } .kx-status { font-size: 13px; color: var(--muted); } .kx-status.is-fehler { color: var(--brand); } @media (max-width: 599px) { .kx-zeile { grid-template-columns: 1fr auto; } .kx-zeit { grid-column: 1 / -1; } } /* Werkzeug mit offenem Punkt: die Kasse ist noch nicht fiskalisiert (1.4.51). */ .vino-tool.is-offen { position: relative; } .vino-tool.is-offen::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--card); } .kx-punkte { margin: 0 0 16px; padding-left: 22px; } .kx-punkte li { margin-bottom: 6px; } /* ---------- Kopfzeile am Handy (1.4.51) ---------- Seit Suche und Handbuch oben mitlaufen, standen dort bis zu fünf Werkzeuge neben der Wortmarke — auf schmalen Geräten schob das die Sprachwahl und den Abmelden-Knopf über den Rand. Die Marke darf jetzt schrumpfen, die Werkzeuge rücken enger zusammen; ausgeblendet wird nichts. */ .brand-left { min-width: 0; } .brand-logo { max-width: 100%; object-fit: contain; object-position: left center; } /* Sprachknopf in der Kopfzeile: nur die Flagge, ohne graue Pille — sie sagt allein, welche Sprache läuft, und fügt sich in die Reihe der übrigen Werkzeuge ein (gleiche Antippfläche, gleicher dezenter Hover). Gilt auf allen Breiten, auf denen die Kopfzeile sichtbar ist; die Seitenleiste (.sb-lang) hat ihre eigene Darstellung. */ .app-header .lang-code, .app-header .lang-caret-wrap { display: none; } .app-header .lang-btn { background: none; padding: 0; gap: 0; width: 38px; height: 38px; justify-content: center; border-radius: 10px; } .app-header .lang-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); } .app-header .lang-flag { width: 24px; height: 16px; } @media (max-width: 600px) { .app-header { padding-left: 12px; padding-right: 12px; } .brand { gap: 6px; } .brand-logo { height: 22px; max-width: 168px; } .brand-actions { gap: 0; } .icon-btn { width: 36px; height: 36px; } .icon-btn svg { width: 20px; height: 20px; } /* Werkzeuge (samt Flagge) eine Spur kleiner — die Grunddarstellung des Sprachknopfs steht oben und gilt für alle Breiten. */ .app-header .lang-btn { width: 36px; height: 36px; } } @media (max-width: 400px) { .brand-logo { max-width: 132px; } .icon-btn { width: 33px; height: 33px; } .icon-btn svg { width: 19px; height: 19px; } .app-header .lang-btn { width: 33px; height: 33px; } } /* ---------- Gutscheine (VINORUM Commerce, 1.4.53) ---------- */ .gs-code { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .gs-betrag { font-weight: 700; color: var(--brand); white-space: nowrap; align-self: center; } /* Motiv-Raster: kleine Vorschaukacheln, Auswahl mit Weinrot-Rahmen. */ .gs-motive { display: flex; flex-wrap: wrap; gap: 8px; } .gs-motiv { width: 86px; height: 60px; border-radius: 8px; border: 2px solid var(--border); background: var(--bg) center/cover no-repeat; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; } .gs-motiv.is-auswahl { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); } /* Detail-Kopf: Guthaben groß links, PDF-Aktionen rechts. */ .gs-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; } .gs-saldo-label { display: block; color: var(--muted); font-size: 13px; } .gs-saldo-wert { font-size: 26px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; } .gs-pdf-acts { display: flex; gap: 8px; flex-wrap: wrap; } /* Journal als schlichter Kontoauszug. */ .gs-journal { display: grid; gap: 2px; margin-bottom: 12px; } .gs-buchung { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .gs-buchung:last-child { border-bottom: 0; } .gs-b-zeit { color: var(--muted); font-size: 12.5px; white-space: nowrap; } .gs-b-betrag { font-weight: 600; font-variant-numeric: tabular-nums; } .gs-b-betrag.is-minus { color: var(--brand); } /* Korrektur-Zeile: Betrag schmal, Begründung wächst, Knopf unten bündig. Die Felder sind `.field`-Bausteine (Beschriftung über dem Eingabefeld) — nackte Inputs bekämen keine App-Styles und stünden 22 px hoch neben dem 42-px-Knopf. `align-items: flex-end` bringt Knopf und Felder auf eine Linie. */ .gs-korrektur { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 12px; flex-wrap: wrap; } .gs-korrektur .field { margin: 0; } .gs-korr-betrag { width: 140px; flex: none; } .gs-korr-notiz { flex: 1; min-width: 180px; } .gs-korr-btn { flex: none; } @media (max-width: 560px) { .gs-korr-betrag, .gs-korr-notiz { width: 100%; flex: 1 1 100%; } .gs-korr-btn { width: 100%; justify-content: center; } } .gs-fuss { justify-content: space-between; } .gs-fuss-rechts { display: flex; gap: 8px; } .gs-typ-seg { max-width: 100%; } /* ---- Gutscheine an der KASSE (1.4.55) ------------------------------------ Verkaufen (Position im Warenkorb) und Einlösen (zweites Zahlungsmittel). Der eingelöste Betrag ist KEIN Nachlass — die Summe bleibt oben stehen, darunter erscheint „Zu zahlen". */ .vino-cart-head-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } /* Am Handy stapelten sich „Einmalposition" und „Gutschein" rechts neben der Überschrift — schmal und unruhig. Dort lieber eine eigene Zeile, zwei gleich breite Knöpfe. */ @media (max-width: 600px) { .vino-cart-head { flex-direction: column; align-items: stretch; gap: 6px; } .vino-cart-head-acts { justify-content: stretch; } .vino-cart-head-acts .btn { flex: 1; justify-content: center; } } .vino-row.is-gutschein .vino-row-name { font-style: normal; } .vino-row-ic { display: inline-flex; vertical-align: -3px; margin-right: 5px; color: var(--brand); } .vino-row-ic svg { width: 16px; height: 16px; } /* Angerechnetes Guthaben: Zeile mit Betrag und Entfernen-X. */ .vino-sum-gs { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 14px; color: var(--brand); font-variant-numeric: tabular-nums; } /* Der Code darf schrumpfen, der Betrag nie umbrechen. */ .vino-sum-gs-code { display: inline-flex; align-items: center; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .vino-sum-gs-betrag { white-space: nowrap; font-weight: 600; } .vino-gs-weg { padding: 2px 6px; min-height: 0; border: 0; background: none; flex: none; } .vino-gs-weg svg { width: 14px; height: 14px; } .vino-sum-haupt.is-zuzahlen { border-top: 1px solid var(--border); padding-top: 6px; } /* „Gutschein einlösen" steht als eigene Zeile über der Zahlart. */ .vino-gs-btn { width: 100%; justify-content: center; margin: 10px 0 4px; font-size: 13.5px; } .vino-gs-scan { width: 100%; justify-content: center; margin-bottom: 10px; } /* Schnellbeträge im Verkaufsdialog. */ .vino-gs-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; } .vino-gs-chip { padding: 6px 12px; font-size: 13.5px; flex: none; } /* Erfolgsdialog: frisch verkaufte Codes zum sofortigen Druck. */ .vino-gs-hinweis { display: flex; align-items: center; justify-content: center; gap: 4px; } .vino-erfolg-gs { margin-top: 14px; text-align: left; } .vino-erfolg-gs-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .vino-erfolg-gs-row:last-child { border-bottom: 0; } .vino-erfolg-gs-acts { display: flex; gap: 6px; } .vino-erfolg-gs-acts .btn { padding: 5px 9px; min-height: 0; } /* ---- „Im Keller" (1.4.61) ------------------------------------------------ Schwesterstück zu „Im Weinberg" (teilt .iw-wrap/.iw-kopf/.iw-aktionen); eigen sind die Behältnis-Auswahl und die Sync-Anzeige. */ #ik-root .iw-wrap { z-index: 35; } /* Dialoge (modal-backdrop 40) öffnen darüber */ /* Statusleiste (1.4.65, Muster CURENA .offline-bar): sie erscheint NUR, wenn es etwas zu sagen gibt — rot ohne Verbindung, blau während der Übertragung. Ist alles beim Server, bleibt der Host leer und damit unsichtbar. */ .ik-status:empty { display: none; } .ik-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: #fff; } .ik-status.is-offline { background: #a3231b; } .ik-status.is-sync { background: #1857d5; } /* Übertragung klemmt (1.4.65): Bernstein statt Blau — der Nutzer soll sehen, dass gerade NICHT übertragen wird, samt Grund. */ .ik-status.is-fehler { background: #b45309; } .ik-status.is-fehler .ik-status-btn { color: #b45309; } .ik-status-ic { display: inline-flex; flex: none; } .ik-status-ic svg { width: 18px; height: 18px; fill: #fff; } .ik-status-ic.is-dreht svg { animation: ik-dreh 1.2s linear infinite; } @keyframes ik-dreh { to { transform: rotate(360deg); } } .ik-status-stand { opacity: 0.85; font-weight: 400; } .ik-status-btn { margin-left: auto; padding: 5px 12px; min-height: 0; font-size: 13px; background: #fff; color: #1857d5; border: none; } /* Behältnis-Liste: Nummer + Inhalt + Füllstand, fingertauglich. */ .ik-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .ik-vessel { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .ik-vessel:hover { border-color: var(--brand); } .ik-vessel.is-leer { opacity: .72; } .ik-fass { font-size: 12.5px; color: var(--brand); font-variant-numeric: tabular-nums; } .ik-kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ik-kopf-zeile h3 { margin: 0; } .ik-wechsel { padding: 6px 12px; min-height: 0; font-size: 13px; flex: none; } .ik-inhalt { margin: 10px 0 4px; display: grid; gap: 4px; } .ik-inhalt-zeile { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; } .ik-frei { color: var(--muted); font-size: 13px; margin: 6px 0 0; } .ik-letzte-zeile, .ik-warte-zeile { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .ik-letzte-zeile:last-child, .ik-warte-zeile:last-child { border-bottom: 0; } /* Klemmt eine Erfassung (1.4.66), bekommt die Zeile den Grund und zwei Knöpfe: korrigieren oder verwerfen. Dann bricht sie auf zwei Zeilen um. */ .ik-warte-zeile.is-fehler { flex-wrap: wrap; border-left: 3px solid #b45309; padding-left: 8px; } .ik-warte-zeile.is-fehler .hint { color: #b45309; } .ik-warte-acts { display: flex; gap: 8px; flex-basis: 100%; margin-top: 6px; } .ik-warte-acts .btn { padding: 5px 12px; min-height: 0; font-size: 13px; } .ik-warte-acts svg { width: 16px; height: 16px; } .ik-letzte-typ { display: inline-flex; align-items: center; gap: 6px; } .ik-letzte-typ svg { width: 16px; height: 16px; } .ik-warte { border-left: 3px solid #b8860b; } /* ---- Behältnis-QR im Stammdaten-Dialog + Etikett-Scan „Im Keller" (1.4.64) ---- */ .vessel-qr { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; } .vessel-qr-kopf { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; margin-bottom: 10px; } .vessel-qr-kopf svg { width: 18px; height: 18px; fill: var(--brand); } .vessel-qr-inhalt { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .vessel-qr-bild { border: 1px solid var(--border); border-radius: 6px; background: #fff; flex: 0 0 auto; } .vessel-qr-text { flex: 1 1 220px; min-width: 200px; } .vessel-qr-text .hint { margin: 0 0 10px; } .vessel-qr-acts { display: flex; gap: 8px; flex-wrap: wrap; } .vessel-qr-acts .btn { flex: 1 1 auto; } /* Scan-Knopf über der Behältnis-Liste: der schnellste Weg am Tank. */ .ik-scan-btn { width: 100%; justify-content: center; margin-bottom: 10px; } .ik-scan-btn svg { width: 20px; height: 20px; } /* „Im Keller": festgelegter Behälter als Klartext statt Auswahl (1.4.66). */ .kb-fest-wert { display: flex; align-items: center; gap: 4px; margin: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft, rgba(0,0,0,0.03)); font-weight: 600; } .kb-fest-wert svg { width: 18px; height: 18px; fill: var(--brand); } .kb-fest-wert .hint { font-weight: 400; } /* Zahlungen: Hinweis auf einen vorbereiteten, noch nicht freigeschalteten Anbieter (1.4.68). Bewusst deutlich — sonst trägt jemand Zugangsdaten ein und wundert sich, dass nichts abgebucht wird. */ .pay-vorbereitet { display: flex; align-items: flex-start; gap: 8px; background: color-mix(in srgb, #b45309 12%, transparent); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; } .pay-vorbereitet svg { width: 18px; height: 18px; fill: #b45309; flex: none; margin-top: 1px; } /* Anzahlungs-Hinweis im Buchungsdialog der Plantafel (Payment E3). Die Zeile sitzt im Anfrage-Banner: gelb = Geld fehlt noch, grün = eingegangen. */ .rt-anfrage-zahlung { margin-top: 8px; padding: 6px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; background: rgba(180, 83, 9, .12); color: #b45309; } .rt-anfrage-zahlung.is-ok { background: rgba(21, 128, 61, .12); color: #15803d; } /* Statuszeile je Zahlungs-Kanal (Einstellungen → Zahlungen). Sagt für jeden Bereich, ob dort wirklich kassiert wird — und wenn nicht, warum. */ .pay-kanal-status { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--muted); } .pay-kanal-status .material-icons, .pay-kanal-status svg { width: 16px; height: 16px; } .pay-kanal-status.is-an { color: #15803d; } .pay-kanal-status.is-warte { color: #b45309; } /* Domain-Verwaltung im Operator (1.4.73): je Adresse eine Zeile mit Prüf- und Löschknopf, darunter das Ergebnis der letzten Prüfung. */ .dom-zeile { padding: 10px 0; border-bottom: 1px solid var(--border); } .dom-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .dom-host { font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .dom-status:empty { display: none; } .dom-status { margin-top: 6px; } .dom-status.is-ok { color: #15803d; } .dom-status.is-warn { color: #b45309; } /* Dateien auf die App ziehen (1.4.75): ganzflächiger Hinweis, während etwas über dem Fenster schwebt. Liegt über allem, nimmt aber keine Zeigerereignisse an — sonst würde das Ablegen am Overlay hängen bleiben. */ .drop-overlay { position: fixed; inset: 0; z-index: 300; pointer-events: none; display: flex; align-items: center; justify-content: center; background: rgba(35, 35, 35, .55); backdrop-filter: blur(2px); } .drop-karte { background: var(--card); color: var(--text); border-radius: 14px; padding: 28px 34px; text-align: center; max-width: 380px; border: 2px dashed var(--brand); box-shadow: 0 18px 50px rgba(0,0,0,.28); } .drop-karte strong { display: block; font-size: 18px; margin-top: 10px; } .drop-karte .hint { margin: 6px 0 0; } .drop-ic svg, .drop-ic .material-icons { width: 40px; height: 40px; color: var(--brand); } /* ===== VINORUM Insights — „Aktuelles" (1.4.82) ===== Baut auf den Befund-Karten der Plausibilitätsprüfung auf (.cp-befund): gleiche Anmutung, aber mit Begründungsblock und Aktionszeile. */ .ins-karte { align-items: flex-start; } .ins-karte .cp-befund-txt { flex: 1; min-width: 0; } .ins-karte .cp-befund-txt > span { display: block; } /* Die Begründung ist der Kern des Moduls — sie bekommt eine eigene Fläche, damit sie nicht als Nachsatz gelesen wird. */ .ins-warum { margin-top: 7px; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--card-soft, rgba(216, 191, 146, .12)); border-radius: 0 6px 6px 0; } .ins-warum b { display: block; font-size: 11.5px; letter-spacing: .02em; color: var(--brand); margin-bottom: 1px; } .ins-warum span { font-size: 12.5px; color: var(--text); } .ins-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } .ins-acts .btn-sm { padding: 4px 11px; font-size: 12.5px; } /* Ausgeblendetes verschwindet NICHT — es wird nur zurückgenommen. */ .ins-karte.is-weg { opacity: .55; } .ins-karte.is-weg .ins-warum { display: none; } .ins-leer .cp-befund-ic { color: var(--ok, #2e7d32); } .ins-stand { margin-top: 10px; font-size: 12px; } .ins-filter { flex: none; opacity: 0.55; } .ins-filter:hover { opacity: 1; } /* Weggewischtes wird gerade MITgezeigt — das Auge ist dann "an". */ .ins-filter.is-an { opacity: 1; color: var(--brand); } .ins-filter svg { width: 19px; height: 19px; } /* ===== Operator: Sicherheit (Zugriffsschutz, 1.4.83) ===== */ .sic-aus { background: #FDF3E3; border-left: 4px solid #8A5A12; color: #6b4a10; padding: 9px 13px; border-radius: 0 8px 8px 0; margin: 10px 0 4px; font-size: 13.5px; } /* Eigenes Raster (1.7.68): Punkt · Text · Zahlen, Signale in Zeile 2 über die volle Breite. NICHT `.beleg-zeile` benutzen — deren Spalten gehören Belegen. */ .sic-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: baseline; padding: 9px 4px; border-bottom: 1px solid var(--border); } .sic-zeile:last-child { border-bottom: 0; } .sic-zeile > .bz-punkt { grid-column: 1; grid-row: 1; transform: translateY(-2px); } .sic-haupt { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; } .sic-meta { font-size: 12.5px; color: var(--muted); } .sic-unten { grid-column: 2 / 3; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; } /* Die Signale sind der Beleg für den Befund — technisch gesetzt, damit die Kürzel („breite:34 · takt:gleichmaessig") als Daten lesbar bleiben. */ .sic-signale { font-family: Consolas, "Courier New", monospace; font-size: 11.5px; color: var(--brand); word-break: break-word; } .sic-ua { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .sic-zahlen { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; } .sic-frei { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; padding: 4px 10px; font-size: 12px; white-space: nowrap; } .sic-zahlen b { font-variant-numeric: tabular-nums; font-size: 13.5px; } .sic-zahlen span { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } @media (max-width: 700px) { /* Schmal: Zahlen unter den Namen statt in eine dritte Spalte gequetscht. */ .sic-zeile { grid-template-columns: auto minmax(0, 1fr); } .sic-zahlen { grid-column: 2; grid-row: 2; align-items: flex-start; text-align: left; flex-direction: row; gap: 8px; } .sic-unten { grid-column: 2; grid-row: 3; } .sic-frei { grid-column: 2; grid-row: 4; justify-self: start; margin-top: 6px; } .sic-ua { display: none; } } /* ===== Insights → „Aus der Branche" (1.4.84) ===== Fremdinhalte: Überschrift + Anriss + Link. Bewusst zurückhaltender als die Betriebsmeldungen — sie sind Hinweis, nicht Handlungsaufforderung. */ .br-gruppen { display: flex; flex-direction: column; gap: 14px; } .br-gruppe { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .br-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--card-soft, rgba(216, 191, 146, .12)); border-bottom: 1px solid var(--border); } .br-kopf b { font-size: 13.5px; } .br-quelle-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); text-decoration: none; white-space: nowrap; } .br-quelle-link:hover { color: var(--brand); } .br-ext svg, .br-pfeil svg { width: 14px; height: 14px; } .br-liste, .br-rest { display: flex; flex-direction: column; } /* Jede Zeile ist ein Link nach draußen — deshalb als gebaut, nicht als div mit onclick: Mittelklick und „Link kopieren" sollen funktionieren. */ .br-zeile { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--border); text-decoration: none; color: inherit; } .br-liste .br-zeile:first-child { border-top: 0; } .br-zeile:hover { background: var(--card-soft, rgba(216, 191, 146, .1)); } .br-z-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .br-z-txt b { font-size: 13px; line-height: 1.35; } .br-teaser { font-size: 12.5px; color: var(--muted); line-height: 1.4; } .br-gesperrt { font-size: 12px; color: var(--brand); font-style: italic; } .br-meta { font-size: 11.5px; color: var(--muted); } /* Kompakte Fassung (1.6.88) fuer Dashboard-Karte und GO: nur Ueberschrift + Meta-Zeile, engere Polsterung — dort steht die Zeile neben vielen anderen. */ .br-zeile.is-kompakt { padding: 7px 10px; gap: 8px; } .br-zeile.is-kompakt b { font-size: 13.5px; line-height: 1.35; } .dash-branche .br-liste { margin: 0 -14px; } .dash-branche > .btn { margin-top: 10px; align-self: flex-start; } .go-block .br-liste { margin: 0 -12px -10px; } .go-block .br-zeile { border-top-color: var(--border); } .br-pfeil { flex: none; color: var(--muted); margin-top: 2px; } .br-mehr { width: 100%; border-radius: 0; border: 0; border-top: 1px solid var(--border); justify-content: center; } /* Wetterwarnungen in „Für Ihren Betrieb" (1.4.85): dezent hervorgehoben — sie stehen ohnehin oben, sollen aber auf einen Blick als Warnung lesbar sein. Der Text kommt vom DWD und enthält Absätze. */ .ins-karte.is-wetter { border-left: 3px solid var(--warn, #E7A500); } .ins-karte.is-wetter .cp-befund-txt > span { white-space: pre-line; } .ins-ik { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--warn, #E7A500); } .ins-ik svg { width: 15px; height: 15px; } /* „Für Ihren Betrieb" in Quellen-Gruppen (1.4.86) — gleiche Hülle wie „Aus der Branche", innen aber die Meldungskarten mit Begründung. */ .ins-gruppe .ins-gruppe-inhalt { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; } .ins-gruppe .ins-karte { border: 1px solid var(--border); border-radius: 8px; } .ins-gruppe .ins-karte.is-wetter { border-left: 3px solid var(--warn, #E7A500); } /* ===== Förderprogramme (1.4.87) ===== */ .fd-karte .fd-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 7px; font-size: 12px; color: var(--muted); align-items: center; } .fd-frist { font-weight: 600; color: var(--text); } .fd-frist.is-eilig { color: var(--brand); } .fd-frist.is-vorbei, .fd-frist.is-laufend { color: var(--muted); font-weight: 500; } .fd-ebene { border: 1px solid var(--border); border-radius: 20px; padding: 1px 9px; font-size: 11px; } .fd-karte .ins-acts { margin-top: 9px; } /* Operator-Pflege */ .fd-suchzeile { padding: 8px 0 10px; flex-wrap: wrap; } .fd-vorschlag .bz-top { align-items: center; } .fd-drin { font-size: 12px; color: var(--muted); white-space: nowrap; } .fd-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; } .fd-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; } .fd-check input { margin: 0; } .fd-abschnitt { margin: 16px 0 2px; font-size: 13.5px; color: var(--brand); } /* Update-Fortschritt (1.4.88) — sichtbare Rückmeldung beim Neuladen. */ .upd-box { max-width: 340px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .upd-box b { font-size: 16px; } .upd-spinner { width: 34px; height: 34px; border-radius: 50%; margin-bottom: 4px; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--accent); animation: upd-dreh .9s linear infinite; } @keyframes upd-dreh { to { transform: rotate(360deg); } } .upd-schritt { margin: 0; font-size: 13.5px; opacity: .9; } .upd-balken { display: block; width: 100%; height: 5px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; } .upd-balken-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width .18s ease; } .upd-zahl { font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; } .upd-hinweis { font-size: 12px; opacity: .6; margin-top: 4px; } /* --- Dashboard-Wetter: Kacheln ohne Füllung, nur feine Kontur (1.4.89) --- Die getönte Fläche wirkte im Dashboard wie ein zweiter Kartenboden in der Karte. Im Klima-Modul bleibt die gefüllte .cl-tile unverändert. */ .dash-wetter-zeile .cl-tile { background: none; border: 1px solid var(--border); } button.dash-fc-tile:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } /* --- Operator: Förderprogramme (1.4.89) --- Eigenes Zeilenraster statt .beleg-zeile: deren feste Spalten ab 900 px quetschten den Programmtitel in die schmale Nummernspalte. */ .fdo-kopf { padding: 6px 0 10px; gap: 10px; align-items: center; } .fdo-kopf .such-feld { flex: 1; min-width: 180px; } .fdo-zahl { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .fdo-liste { display: flex; flex-direction: column; } .fdo-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 6px; border-top: 1px solid var(--border); } .fdo-liste .fdo-row:first-child { border-top: none; } .fdo-row.is-clickable { cursor: pointer; } .fdo-row.is-clickable:hover { background: color-mix(in srgb, var(--muted) 6%, transparent); } .fdo-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 7px; background: var(--muted); } .fdo-punkt.is-an { background: #2e7d32; } .fdo-punkt.is-aus { background: color-mix(in srgb, var(--muted) 55%, transparent); } .fdo-haupt { flex: 1; min-width: 0; } .fdo-haupt b { display: block; font-size: 14px; line-height: 1.35; } .fdo-traeger { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; } .fdo-chips { display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: 6px; } .fdo-chip { font-size: 11.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 20px; padding: 1px 9px; white-space: nowrap; } .fdo-chip.is-frist { color: var(--text); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); } .fdo-chip.is-regel { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); } .fdo-acts { display: flex; align-items: center; gap: 4px; flex: none; } .fdo-acts .icon-act { width: 32px; height: 32px; border: none; background: none; } .fdo-acts .icon-act:hover { color: var(--brand); } .fdo-drin { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; } .fdo-drin svg { width: 15px; height: 15px; } .fdo-suche { flex-wrap: wrap; gap: 8px; } .fdo-suche select, .fdo-suche input { height: 38px; } .fdo-suche input { min-width: 150px; } .fdo-stand { font-size: 11.5px; color: var(--muted); margin-left: auto; } /* --- VINORUM empfehlen (1.4.91, gestrafft 1.4.92) -------------------------- Zwei Karten statt fünf: Kopf mit Vorteil rechts, darunter Erfassen + Liste. Der steuerliche Teil liegt zugeklappt am Ende — er betrifft die wenigsten. */ .empf-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 32px; padding-top: 26px; padding-bottom: 22px; } .empf-kopf-text { flex: 1; min-width: 280px; } .empf-kopf-text .stage-title { margin-bottom: 12px; font-size: 20px; } .empf-kopf-text p { font-size: 15.5px; line-height: 1.62; margin: 0 0 10px; } .empf-kopf-text p:last-child { margin-bottom: 0; } .empf-vorteil { flex: none; text-align: center; min-width: 170px; padding: 14px 24px; border-left: 3px solid var(--accent); } .empf-zahl { font-size: 38px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; line-height: 1.1; } .empf-zahl-lbl { font-size: 12px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; } /* Der Claim trägt die Haltung des Programms — er steht mittig unter der Karte. */ .empf-claim { flex-basis: 100%; text-align: center; font-size: 19px; font-weight: 600; color: var(--brand); letter-spacing: .01em; margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--border); } .empf-form { display: grid; grid-template-columns: 1fr; gap: 10px 14px; } .empf-form .field { margin: 0; } .empf-form label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 3px; } .empf-form input { width: 100%; } .empf-f-btn { display: flex; justify-content: flex-end; } @media (min-width: 700px) { .empf-form { grid-template-columns: 2fr 1fr auto; align-items: end; } .empf-f-notiz { grid-column: 1 / 3; } .empf-f-btn { grid-column: 3; } } .empf-frei { margin-top: 8px; font-size: 13px; } .empf-zusage { margin: 4px 0 10px; } .empf-row .fdo-haupt b { font-size: 13.5px; } .empf-zeile2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; } .empf-zeile2 code { font-size: 11.5px; color: var(--muted); } .empf-mini { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; border-radius: 6px; } .empf-mini:hover { color: var(--brand); } .empf-mini svg { width: 15px; height: 15px; } .empf-acc { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); } .empf-acc summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--brand); } .empf-acc p { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 10px 0 0; } .empf-wie { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0 0 12px; } .empf-dank { font-size: 13.5px; line-height: 1.55; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text); } .empf-seit { font-size: 12px; color: var(--muted); } /* Bio-Status an der Parzelle (Weinberge-Kopfkarte). Umrisschip im Muster der Kompakt-Ansicht; konventionell bekommt keinen Chip. */ .vb-bio-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; border: 1px solid var(--border); color: var(--muted); } .vb-bio-chip svg { width: 14px; height: 14px; } .vb-bio-chip.is-oeko { border-color: #2e7d32; color: #2e7d32; } .vb-bio-chip.is-umstellung { border-color: var(--accent); color: #8a6d3b; } [data-theme='dark'] .vb-bio-chip.is-oeko { border-color: #6abf6e; color: #6abf6e; } [data-theme='dark'] .vb-bio-chip.is-umstellung { color: var(--accent); } /* ===================== GEFÜHRTE TOUREN ===================== Overlay in eigenem Container #tour-root — ÜBER allem, auch über Dialogen. */ /* z-index ÜBER den Dialogen (modal-backdrop 40). Erst falsch herum gebaut: lag das Overlay darunter, verschwand VINI hinter jedem Dialog, den die Tour selbst geöffnet hatte — und genau dort muss er ja erklären. */ #tour-root { position: fixed; inset: 0; z-index: 60; pointer-events: none; } #tour-root > * { pointer-events: auto; } .tour-schatten { position: fixed; background: rgba(20, 18, 16, .62); } .tour-rahmen { position: fixed; border: 2px solid var(--accent); border-radius: 8px; box-shadow: 0 0 0 3px rgba(216, 191, 146, .28); pointer-events: none; transition: all .18s ease; } /* Im Übungsmodus MUSS das Ziel klickbar bleiben — die Maske lässt es frei. */ .tour-rahmen.is-klickbar { border-color: var(--brand); animation: tourPuls 1.6s infinite; } @keyframes tourPuls { 0%, 100% { box-shadow: 0 0 0 3px rgba(109, 35, 48, .25); } 50% { box-shadow: 0 0 0 8px rgba(109, 35, 48, .10); } } .tour-mark { position: relative; z-index: 1; } .tour-blase { position: fixed; max-width: 460px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 10px; box-shadow: 0 18px 48px rgba(0, 0, 0, .28); } .tour-blase-kopf { display: flex; gap: 12px; align-items: flex-start; } /* Der Tourtext darf Absätze setzen ( trennt den Inhalt vom Hinweis, wer im Betrieb damit arbeitet) — sonst liefe alles in einem Block. */ .tour-blase p { white-space: pre-line; } .tour-avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; background: var(--bg-soft, #faf7f1); } .tour-text b { display: block; color: var(--brand); font-size: 1.02rem; margin-bottom: 3px; } .tour-text p { margin: 0; font-size: .94rem; line-height: 1.45; } .tour-uebung { display: block; margin-top: 7px; color: var(--brand); font-weight: 600; font-size: .88rem; } .tour-steuer { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--border); } .tour-fortschritt { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; margin-right: auto; } .tour-btn { border: 1px solid var(--border); background: transparent; color: inherit; border-radius: 8px; padding: 5px 12px; font: inherit; font-size: .88rem; cursor: pointer; } .tour-btn:hover { border-color: var(--brand); color: var(--brand); } .tour-btn.is-primaer { background: var(--brand); border-color: var(--brand); color: #fff; } .tour-btn.is-weg { padding: 5px 9px; color: var(--muted); } body.tour-laeuft { overflow: hidden; } /* Tourkacheln im VINI-Chat — dasselbe Markup wie die Fragevorschläge, weil eine Tour für den Nutzer nur eine andere Art von Antwort ist. */ .ki-touren { margin-top: 18px; } .ki-touren-kopf { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; margin-bottom: 8px; } .ki-touren-kopf svg, .ki-touren-kopf .ic-vini { width: 18px; height: 18px; } .ki-vorschlag.is-tour b { color: var(--brand); } .tour-dauer { margin-left: auto; color: var(--muted); font-weight: 400; font-size: .82rem; } @media (max-width: 640px) { .tour-blase { max-width: calc(100vw - 24px); } } /* ===================== PREISRECHNER (Operator) ===================== Wizard aus unterlagen/KONZEPT-PREISE.md. Grosse Auswahlkarten statt Eingabefelder — das Papier wird im Gespraech bedient, nicht ausgefuellt. */ .pr-fortschritt { display: flex; align-items: center; gap: 12px; margin: 14px 0 18px; color: var(--muted); font-size: 13px; } .pr-balken { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; } .pr-balken-in { height: 100%; background: var(--brand); transition: width .25s; } .pr-frage { font-size: 19px; margin: 0 0 4px; } .pr-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 14px 0 4px; } .pr-karte { text-align: left; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); cursor: pointer; font-size: 15px; line-height: 1.35; transition: border-color .15s, background .15s; } .pr-karte:hover { border-color: var(--brand); background: var(--bg-soft, rgba(0,0,0,.02)); } .pr-karte.is-aktiv { border-color: var(--brand); border-width: 2px; padding: 13px 15px; background: rgba(109, 35, 48, .06); font-weight: 600; } .pr-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 20px; } .pr-ergebnis h3 { margin: 20px 0 6px; font-size: 15px; } .pr-treffer { border: 2px solid var(--brand); border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 3px; margin: 6px 0 4px; } .pr-treffer-label { color: var(--muted); font-size: 13px; } .pr-treffer-name { font-size: 26px; font-weight: 600; color: var(--brand); } .pr-treffer-preis { font-size: 19px; font-weight: 600; } .pr-treffer-wer { color: var(--muted); font-size: 13.5px; margin-top: 4px; } /* „Regen zieht auf" IN GO (1.7.14): eigene Optik für den dunklen Grund — die helle Karten-Fassung wirkte dort wie ein Fremdkörper. */ /* GO-Keller (1.7.15): Behaelterzeile mit Fuellstands-Saeule, Analysewerte und die Warnung bei mehreren Partien. */ /* Die BASISREGEL weiter oben setzt `flex-direction: column` — ohne die ausdrückliche Rücknahme landete die Füllstands-Säule UNTER dem Text statt rechts daneben (1.7.18). */ .ik-vessel { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; } .ik-vessel-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; } .ik-vessel-kopf { display: flex; align-items: baseline; gap: 8px; } .ik-fuell { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; } .ik-fuell-pz { font-size: 10.5px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; } .ik-analyse { margin-top: 10px; } .ik-aw-zeile { display: flex; flex-wrap: wrap; gap: 6px; } .ik-aw { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-size: 13px; } .ik-aw-label { color: var(--muted); font-size: 11.5px; } .ik-aw-trend.is-hoch { color: #b3261e; } .ik-aw-trend.is-runter { color: #2e7d32; } .ik-warn { margin-top: 8px; } .iw-aktion.is-aus { opacity: .45; } /* Vergleichszeile im Erfassungsdialog (zuletzt gemessene Werte). */ .kb-vergleich { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 7px 10px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 16%, transparent); font-size: 13px; } .kb-vergleich svg { width: 16px; height: 16px; } /* Wein-Info in der Vinothek (1.7.16): Verkaufshilfe am Tresen. */ /* KEIN zusätzliches Polster (1.7.17): Padding + Icon machten die Zeile breiter, der Preis rutschte über die Nummer. Jetzt trägt die Nummer nur das Symbol, kürzt sich bei Enge und der Preis bleibt unantastbar (flex: none). */ .vino-art-nr.is-info { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vino-art-fuss > .vino-art-preis { flex: none; } .vino-art-nr.is-info .vino-info-ic { flex: none; } .vino-art-nr.is-info:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--brand); } .vino-info-ic svg { width: 13px; height: 13px; display: block; } .vino-info-platz { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; border-radius: 10px; margin-bottom: 12px; font-size: 14px; background: color-mix(in srgb, var(--accent) 20%, transparent); } .vino-info-platz.is-leer { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--muted); } .vino-info-platz svg { width: 18px; height: 18px; } .vino-info-bestand { margin-left: auto; color: var(--muted); font-size: 13px; } .vino-info-daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2px 16px; } .vino-info-zeile { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .vino-info-label { color: var(--muted); } .vino-info-wert { font-weight: 600; text-align: right; } .vino-info-text { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; } /* GO: die Regen-Zeile hängt in der HELLEN Wetterkarte (card go-band) — sie trägt deshalb die Basis-Optik von .radar-hinweis (blaues Band) wie im Dashboard. Der frühere Weiß-Override (1.7.14) war für den dunklen GO-Kopf gedacht und machte die Zeile auf der Karte unsichtbar: weiß auf weiß. */ .go-radar { margin: 0 0 8px; } .go-radar .radar-hinweis { margin-bottom: 0; } /* Abfüllung: je Gebinde ein Block mit eigenem Materialverbrauch (1.7.8). */ .pr-block { margin-bottom: 12px; padding: 10px 10px 8px; border: 1px solid var(--border); border-radius: 10px; } .pr-block + .pr-block { margin-top: 0; } .pr-mat-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; } .pr-mat-titel { flex: 1; min-width: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .pr-mat-liste:empty { display: none; } .btn.mini { padding: 3px 9px; font-size: 12.5px; } .btn.mini svg { width: 14px; height: 14px; } /* Infoblock zur gewählten Partie im Abfüll-Dialog (1.7.7): Bestand gesamt und Verteilung auf die Behälter — die zwei Fragen vor jeder Abfüllung. */ .pr-weininfo:empty { display: none; } .pr-weininfo { margin: -6px 0 14px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--text) 3%, transparent); } .pr-wi-kopf { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-size: 13.5px; } .pr-wi-menge { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; } .pr-wi-orte { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; } .pr-wi-ort { padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font: inherit; font-size: 12.5px; cursor: pointer; } .pr-wi-ort:hover { border-color: var(--brand); } .pr-wi-ort.is-aktiv { background: var(--brand); border-color: var(--brand); color: #fff; } .pr-wi-meta { margin-top: 6px; font-size: 12px; color: var(--muted); } .pkg-gebinde { flex: none; min-width: 108px; } .pr-hinweis { background: rgba(109, 35, 48, .06); border-left: 3px solid var(--brand); padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 12px 0; font-size: 14px; } .pr-gruende, .pr-enthalten, .pr-module { margin: 4px 0 0; padding-left: 20px; font-size: 14.5px; } .pr-gruende li, .pr-enthalten li, .pr-module li { margin-bottom: 4px; } .pr-tab { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: 14.5px; } .pr-tab td { padding: 7px 4px; border-bottom: 1px solid var(--border); } .pr-tab td.z { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .pr-stand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; background: var(--bg-soft, rgba(0,0,0,.03)); border-radius: 8px; padding: 9px 14px; margin: 0 0 16px; font-size: 14px; color: var(--muted); } .pr-stand b { color: var(--brand); font-size: 15.5px; } .pr-stand-plus { font-size: 13px; } .pr-herleitung { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: 14px; } .pr-herleitung th { text-align: left; padding: 6px 8px 6px 0; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); } .pr-herleitung td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--muted); } .pr-herleitung tr.is-wirksam td { color: var(--text); } .pr-herleitung tr.is-wirksam td:last-child { color: var(--brand); font-weight: 600; } .pr-anhebung { margin: 8px 0 0; font-size: 14px; color: var(--brand); } /* ---- Mängel im Weinberg: Erfassung ---- */ /* Art-Kacheln statt Dropdown: draußen mit Handschuhen zählt die Trefferfläche. */ .mg-arten { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; } .mg-art { display: flex; align-items: center; gap: 8px; padding: 12px 10px; min-height: 52px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font-size: 14px; text-align: left; cursor: pointer; } .mg-art:hover { border-color: var(--brand); } .mg-art.is-an { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); font-weight: 600; } .mg-art .material-icons, .mg-art svg { flex: none; } /* Das Beschreibungsfeld gehört groß — ein schmales Feld lädt weder zum Tippen noch zum Diktieren ein (siehe Konzept). */ .mg-text-wrap { position: relative; } .mg-text { width: 100%; min-height: 92px; resize: vertical; padding-right: 46px; } .mg-diktat { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--muted); cursor: pointer; } .mg-diktat svg { width: 20px; height: 20px; fill: currentColor; } .mg-diktat:hover { color: var(--brand); border-color: var(--brand); } .mg-diktat.is-an { color: #fff; background: var(--brand); border-color: var(--brand); animation: mg-puls 1.2s ease-in-out infinite; } @keyframes mg-puls { 50% { opacity: .55; } } .mg-aufgabe .hint { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; } .mg-diktat-hinweis { margin: 6px 0 0; font-size: 12.5px; } .mg-aufgabe { margin-bottom: 16px; } /* Dialoge OHNE (Schaden melden/ansehen): Der Rumpf darf NUR so hoch werden wie sein Inhalt (flex-grow 0) — mit 1 füllte er die zulässigen 88vh und schob die Knopfzeile an den unteren Bildschirmrand. */ .modal-sheet > .sheet-body { flex: 0 1 auto; } /* Ein LEERES Fehlerfeld am Ende des Rumpfes erzeugt sonst einen toten Streifen über der Knopfzeile. */ .sheet-body > .form-error:empty { display: none; } .mg-aufgabe .check-row { margin: 4px 0 2px; } #mg-root { position: relative; z-index: 45; } /* ---- Schäden: Bereich in Operations ---- */ .vb-bereich-seg { margin: 0 0 12px; } /* Anzahl im Umschalter „Schäden": UMRISS statt Farbfläche — eine gefüllte Pille zieht mehr Aufmerksamkeit auf sich als der Bereichsname daneben. Im aktiven Segment (weinroter Grund, weiße Schrift) dreht sich die Farbe mit dem Label um, sonst verschwände der Rand im Hintergrund. */ .vb-mg-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: transparent; color: var(--brand); border: 1px solid currentColor; font-size: 11px; font-weight: 600; } .fk-seg-btn.is-active .vb-mg-badge { color: #fff; } .vb-mg-anzeige { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); } .mg-info { display: grid; gap: 4px; margin-bottom: 10px; } .mg-info-zeile { display: flex; gap: 10px; align-items: baseline; } .mg-info-zeile .hint { min-width: 130px; flex: none; } .mg-beschr { white-space: pre-line; } .mg-beschr-zeile { align-items: flex-start; margin-bottom: 12px; } .mg-akt { margin: 4px 0 12px; } /* Aufgaben-Marke in der Schadensliste: Kästchen = offen, Haken = erledigt. */ .mg-task-ic { display: inline-flex; color: var(--muted); } .mg-task-ic svg { width: 16px; height: 16px; fill: currentColor; } .mg-task-ic.is-fertig { color: #2e7d32; } /* Knopfzeile der Schadens-Dialoge: echter Abstand zum Dialogrand. MUSS ans Dateiende — die allgemeine .sheet-actions.is-fuss-Regel steht weiter oben und setzt ein knapperes Polster. */ .modal-sheet > .sheet-actions.is-fuss { padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px)); gap: 10px; } /* Abschließen-Knopf: grün umrandet, grüne Schrift — er BEENDET den Vorgang, ist aber keine Gefahr (rot) und kein Speichern (primär). */ .btn.erledigt { border-color: #2e7d32; color: #2e7d32; background: transparent; } .btn.erledigt:hover { background: color-mix(in srgb, #2e7d32 10%, transparent); } .btn.erledigt svg { width: 16px; height: 16px; fill: currentColor; } /* Aktionsband unter dem Dialogkopf (Muster Beleg-Dialoge): Bezeichnung links, Ausgabewege als Symbole rechts. */ .mg-band { display: flex; flex-direction: column; gap: 4px; padding: 10px 18px 12px; border-bottom: 1px solid var(--border); } .mg-band-zeile { display: flex; align-items: center; gap: 10px; } .mg-band-name { font-weight: 600; font-size: 14px; } .mg-band-akt { display: inline-flex; gap: 4px; margin-left: auto; } /* Offene Schäden auf der Parzellen-Karte. divIcon hat kein Eigenmaß — Größe und Farbe kommen komplett von hier. Weinrot mit weißem Rand, damit das Symbol auf dem Luftbild UND auf den weinroten Polygonen lesbar bleibt. */ .vb-schaden-marker { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); cursor: pointer; } .vb-schaden-marker svg { width: 16px; height: 16px; fill: #fff; } .vb-schaden-marker:hover { transform: scale(1.12); } /* Fundort-Karte im Schadens-Detail: klein genug, dass der Dialog nicht auseinanderfällt, groß genug zum Zielen. */ .mg-karte { height: 220px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } /* Prämierungen am Wein: je Auszeichnung eine Karte (Muster Lieferadressen). */ .praem-liste { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 12px; } /* Getönt, seit der Aufklapper weiß ist — sonst stünde weiß auf weiß. */ .praem-karte { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--bg); } /* Abstand zum Textblock darüber: die Auszeichnungen sind ein eigener Gedanke, kein weiteres Beschreibungsfeld. */ .praem-liste-kopf { margin-top: 22px; } /* Wettbewerb · Auszeichnung · Jahr in EINER Zeile, dahinter die Medaille. Umbruch erst, wenn es wirklich eng wird (flex-basis je Feld). */ .praem-kopf { display: flex; align-items: flex-start; gap: 10px; } /* NUR die Eingabefelder brechen um — Medaille und X bleiben oben rechts. */ .praem-felder { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .praem-felder .praem-wb { flex: 3 1 190px; min-width: 150px; } .praem-felder .praem-wert { flex: 2 1 120px; min-width: 110px; } .praem-felder .praem-jahr { flex: 1 1 96px; min-width: 84px; max-width: 150px; } /* Werkzeuge als `.field` mit leerem Label: fluchten dadurch automatisch mit den Eingabefeldern, ohne dass irgendwo eine Label-Höhe gerechnet wird. */ .praem-tools { flex: 0 0 auto; } .praem-tools > label { visibility: hidden; } .praem-tools-inner { display: flex; align-items: center; gap: 6px; height: 44px; } /* Zeile 2: Kategorie füllt, der Haken steht daneben auf Feldhöhe. */ .praem-zeile2 { display: flex; align-items: flex-end; gap: 16px; margin-top: 10px; flex-wrap: wrap; } /* Ohne das Feld-Margin läge der Haken 14 px zu tief: flex-end richtet die MARGIN-Kanten aus, nicht die sichtbaren. */ .praem-zeile2 .field { margin-bottom: 0; } .praem-zeile2 .praem-kat-feld { flex: 1 1 220px; min-width: 180px; } /* Höhe wie ein Eingabefeld statt gerechnetem Versatz — dann liegt der Haken exakt auf der Mitte des Kategorie-Felds daneben. */ .praem-zeile2 .praem-shop { flex: 0 0 auto; height: 42px; display: flex; align-items: center; padding: 0; margin: 0; } .praem-weg { flex: 0 0 auto; } /* Medaillen-Vorschau: zeigt sofort, was später im Shop steht. Feste Breite, damit die Karten trotz unterschiedlich hoher Grafiken fluchten. */ .praem-marke { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } .praem-bild { max-width: 100%; max-height: 100%; } .praem-punkte { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; font-weight: 600; font-size: 13px; color: var(--brand); border: 2px solid var(--brand); font-variant-numeric: tabular-nums; } /* Kategorie-Feld: Host, weil es je Wettbewerb zwischen Freitext und Auswahl wechselt (.field input greift dank Nachfahren-Selektor weiterhin). */ .praem-kat { display: block; } /* Prämierte Partie: stiller Hinweis, weinrot sobald der Artikel inzwischen eine andere Prüfungsnummer trägt (dann gilt die Auszeichnung ihr nicht). */ .praem-ap { margin: 6px 0 2px; font-size: 12.5px; color: var(--muted); } .praem-ap:empty { display: none; } .praem-ap.is-warn { color: var(--brand); } /* Original-Zeichen je Stufe (Operator-Katalog) */ .praem-bilder { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; } .praem-bild-zeile { display: flex; align-items: flex-end; gap: 10px; } .praem-bild-zeile .field { flex: 1; min-width: 0; } .praem-bild-mini { width: 30px; height: 38px; flex: 0 0 auto; margin-bottom: 6px; } .praem-alt { margin-top: 4px; } .praem-alt > summary { cursor: pointer; font-size: 13px; color: var(--muted); } /* Umriss einer Weinlage im Operator-Katalog: Chip als Knopf + Kartendialog. Der Chip behält seine Optik, wird aber anfassbar (Button-Eigenheiten zurücksetzen, sonst bringt er Rahmen und eigene Schrift mit). */ .chip.is-klickbar { border: none; font-family: inherit; cursor: pointer; transition: filter 0.12s ease, box-shadow 0.12s ease; } .chip.is-klickbar:hover { filter: brightness(0.94); } .chip.is-klickbar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Höhe an das FENSTER gekoppelt: auf einem flachen Notebook-Bildschirm schöbe eine feste Karte den Schließen-Knopf aus dem Blick. */ .lage-karte { height: min(340px, 45vh); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 10px; } .mg-ort-akt { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .mg-ort-akt .hint { flex: 1; min-width: 0; } /* Kontakt-Chips in der Adressliste: E-Mail und Telefon direkt anwählbar. Umriss statt Farbfläche — sie sollen dem Namen nicht die Schau stehlen. */ /* Eigene Spalte rechts neben den Stammdaten: `margin-left: auto` schiebt sie an die Kundennummer heran, `min-width: 0` erlaubt das Kürzen langer Adressen. Unter 900 px kein Platz mehr — dann zurück unter die Anschrift (die Zeile ist dort ohnehin mehrzeilig). */ .cust-kontakte { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; align-items: center; margin-left: auto; padding-left: 12px; min-width: 0; } @media (max-width: 900px) { .cust-kontakte { order: 9; flex-basis: 100%; justify-content: flex-start; margin: 5px 0 0; padding-left: 0; max-width: 100%; } } /* Rahmenlos: zwei Kästen je Zeile machten die Liste unruhig. Die Nummer steht im Klartext (wird abgelesen), die E-Mail nur als Symbol. */ .cust-kontakt { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; } .cust-kontakt svg { width: 15px; height: 15px; fill: var(--muted); flex: 0 0 auto; } .cust-kontakt:hover, .cust-kontakt:hover svg { color: var(--brand); fill: var(--brand); } /* Reines Symbol: gleiche Antippfläche wie die Zeilen-Aktionen. */ .cust-kontakt.is-ikon { width: 28px; height: 28px; justify-content: center; border-radius: 6px; } .cust-kontakt.is-ikon:hover { background: var(--hover, rgba(0,0,0,.05)); } /* Ort hinter dem Kundennamen in den Beleg-Listen: dezent, damit der Name die Zeile führt. Bricht bei Platzmangel als Erstes weg. */ .bz-ort { color: var(--muted); font-size: 13px; margin-left: 8px; font-weight: 400; } @media (max-width: 620px) { .bz-ort { display: none; } } /* Rückverfolgung im Artikel-Dialog: Abschnitte von der Flasche nach hinten. */ .rv-block { margin: 10px 0 14px; } .rv-titel { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; } .rv-zeile { display: flex; gap: 10px; align-items: baseline; padding: 2px 0; font-size: 14px; } .rv-zeile > .hint { flex: 0 0 150px; } .rv-karte { border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; } .rv-karte.is-storno { opacity: .6; text-decoration: line-through; } .rv-karte-kopf { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; } .rv-liste { margin-top: 6px; } .rv-zugang, .rv-massnahme { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 5px 0; border-top: 1px solid var(--border); font-size: 13px; } .rv-ic { display: inline-flex; } .rv-ic svg { width: 15px; height: 15px; fill: var(--brand); } /* Herkunftsanteile als Balken — dieselbe Lesart wie die Herkunftskarte. */ .rv-hk-zeile { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 13px; } .rv-hk-balken { flex: 1; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; } .rv-hk-balken > span { display: block; height: 100%; background: var(--brand); } .rv-hk-wert { flex: 0 0 44px; text-align: right; font-variant-numeric: tabular-nums; } /* Gerissene Kette: sichtbar, nicht versteckt. */ .rv-hinweis { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; background: color-mix(in srgb, var(--brand) 8%, transparent); border-left: 3px solid var(--brand); padding: 8px 10px; border-radius: 4px; margin: 0 0 10px; } .rv-hinweis svg { width: 16px; height: 16px; fill: var(--brand); flex: 0 0 auto; margin-top: 1px; } /* Rechtlicher Hinweis auf der Compliance-Seite: erklärt, warum es die Seite gibt — im Artikel-Accordion wäre er Ballast. */ .rv-recht { border-left: 3px solid var(--border); padding-left: 10px; margin: 0 0 12px; } /* „Wird zusammengestellt …": die Kette fasst mehrere Tabellen an — ein ruhender Text sähe nach Stillstand aus. */ .rv-laedt { display: flex; align-items: center; gap: 8px; } .rv-spinner { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; border: 2px solid var(--border); border-top-color: var(--brand); animation: rv-dreh .8s linear infinite; } @keyframes rv-dreh { to { transform: rotate(360deg); } } /* ---------- Verkaufskanäle (Channel Hub, 1.5.57) ---------- */ /* Kein künstlicher Umbruch — der Satz darf die Kartenbreite nutzen. */ .kanal-intro { margin-bottom: 14px; } .kanal-karte { margin-bottom: 14px; } .kanal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .kanal-kopf h3 { margin: 0; font-size: 1.05rem; } .kanal-an { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; white-space: nowrap; } /* Die Google-Auflage muss auffallen: ohne die Kennzeichnung als „nur für Erwachsene" lehnt Google den Feed ab — und der Grund steht dann nur dort. */ .kanal-hinweis { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 2px; padding: 9px 12px; border-left: 3px solid var(--accent); background: rgba(216, 191, 146, .16); border-radius: 4px; font-size: .9rem; line-height: 1.45; } .kanal-hinweis svg { width: 17px; height: 17px; flex: none; margin-top: 1px; } .kanal-url-zeile { display: flex; gap: 8px; align-items: center; } .kanal-url-in { flex: 1; min-width: 0; font-family: Consolas, monospace; font-size: .82rem; } .kanal-zahl { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 6px; } .kanal-chip { border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; font-size: .82rem; font-variant-numeric: tabular-nums; } .kanal-chip.is-gut { border-color: #2e7d4f; color: #2e7d4f; } .kanal-chip.is-fehlt { border-color: var(--brand); color: var(--brand); } .kanal-chip.is-schwach { border-color: #b8860b; color: #b8860b; } .kanal-chip.is-recht { border-color: #7a4a86; color: #7a4a86; } .kanal-abruf { margin: 2px 0 12px; font-size: .86rem; } .kanal-akt { display: flex; flex-wrap: wrap; gap: 8px; } .kanal-befund-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 6px; } .kanal-befund-kopf h4 { margin: 0; font-size: .95rem; } .kanal-befunde:empty { display: none; } .kanal-ok { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: #2e7d4f; font-size: .92rem; } .kanal-ok svg { width: 18px; height: 18px; } /* Eine Befundzeile ist klickbar und öffnet den Artikel — Muster der Compliance-Befunde. */ .kanal-befund { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 9px 4px; font: inherit; color: inherit; cursor: pointer; } button.kanal-befund:hover { background: rgba(0, 0, 0, .035); } .kanal-befund svg { width: 17px; height: 17px; } .kanal-befund .kb-ikon { grid-row: span 2; padding-top: 2px; } .kanal-befund .kb-name { font-weight: 600; font-size: .92rem; } .kanal-befund .kb-text { font-size: .86rem; color: var(--muted, #6b6b6b); } .kanal-befund.is-fehlt .kb-ikon { color: var(--brand); } .kanal-befund.is-schwach .kb-ikon { color: #b8860b; } .kanal-befund.is-recht .kb-ikon { color: #7a4a86; } .kanal-befund.is-aus { cursor: default; opacity: .62; } @media (min-width: 640px) { .kanal-befund { grid-template-columns: 22px minmax(160px, 34%) minmax(0, 1fr); } .kanal-befund .kb-ikon { grid-row: auto; } } /* Vertriebskanäle als Modul (1.5.58): die Karte liegt IM Accordion, deshalb kein eigener Card-Rahmen mehr. */ .kanal-karte { padding: 2px 0 4px; } .kanal-kopf { flex-wrap: wrap; } .kanal-aus-hint { font-size: .85rem; color: var(--muted, #6b6b6b); } /* Vertriebskanäle: Kosten/Kaufort + Kategorie-Zuordnung (1.5.59) */ .kanal-fakten { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 4px; font-size: .88rem; } .kanal-fakt b { font-weight: 600; } .kanal-block-titel { margin: 18px 0 4px; font-size: .95rem; } .kanal-katmap:empty { display: none; } .kmap-liste { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; } .kmap-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: 8px; align-items: center; } .kmap-zeile.is-unter .kmap-von { padding-left: 16px; opacity: .8; } .kmap-von { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kmap-pfeil svg { width: 16px; height: 16px; opacity: .5; } @media (max-width: 560px) { .kmap-zeile { grid-template-columns: minmax(0, 1fr); gap: 2px; } .kmap-pfeil { display: none; } .kmap-zeile + .kmap-zeile { margin-top: 8px; } } /* Vertriebskanäle: Kopfzeile mit Abrufzeit + Info-Link (1.5.60) */ .acc-head .acc-meta { margin-left: auto; font-size: .8rem; color: var(--muted, #6b6b6b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acc-head .acc-info { display: inline-flex; align-items: center; padding: 3px; border-radius: 5px; color: var(--muted, #6b6b6b); flex: none; } .acc-head .acc-info:hover { color: var(--brand); background: rgba(0, 0, 0, .05); } .acc-head .acc-info svg { width: 17px; height: 17px; display: block; } .kanal-portal { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); text-decoration: none; } .kanal-portal:hover { text-decoration: underline; } .kanal-portal svg { width: 15px; height: 15px; } @media (max-width: 620px) { .acc-head .acc-meta { display: none; } /* am Handy zählt der Name, nicht die Uhrzeit */ } /* Vertriebskanäle: Status-Icon vor dem Namen, Zahl-Chip dahinter (1.5.62) */ .acc-head .acc-status { display: inline-flex; align-items: center; flex: none; color: var(--muted, #9a9a9a); } .acc-head .acc-status.is-an { color: #2e7d4f; } .acc-head .acc-status svg { width: 17px; height: 17px; display: block; } /* Der Zahl-Chip sitzt DIREKT hinter dem Namen (nicht rechts außen) — die Abrufzeit schiebt sich per margin-left:auto an den rechten Rand. */ .acc-head .acc-status + .acc-label { margin-right: 2px; } /* Leerer Chip (vor dem Prüflauf) darf keinen Platz beanspruchen. */ .acc-head .acc-badge:empty { display: none; } /* Im Kanal-Kopf sitzt der Zahl-Chip DIREKT hinter dem Namen; die Basisregel .acc-badge schiebt ihn sonst per margin-left:auto an den rechten Rand. */ .acc-kanal .acc-badge { margin-left: 0; } .acc-kanal .acc-meta { margin-left: auto; } .kmap-zeile select { width: 100%; } /* Vertriebskanäle, Feinschliff 1.5.64 */ /* Kopieren als schlichtes Icon IM Feld statt als Knopf daneben. */ .kanal-url-zeile { position: relative; } .kanal-url-in { padding-right: 38px; } .kanal-copy { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; background: none; border-radius: 5px; color: var(--muted, #6b6b6b); cursor: pointer; } .kanal-copy:hover { color: var(--brand); background: rgba(0, 0, 0, .06); } .kanal-copy svg { width: 17px; height: 17px; } /* Geöffneter Kanal: der Kopf trägt die CI-Farbe — man sieht sofort, worin man gerade steckt, auch wenn mehrere Kanäle untereinander stehen. */ .acc-kanal[open] > .acc-head { background: var(--brand); color: #fff; border-radius: 6px 6px 0 0; } .acc-kanal[open] > .acc-head .acc-meta, .acc-kanal[open] > .acc-head .acc-info, .acc-kanal[open] > .acc-head .acc-chev svg { color: rgba(255, 255, 255, .82); } .acc-kanal[open] > .acc-head .acc-status, .acc-kanal[open] > .acc-head .acc-status.is-an { color: #fff; } .acc-kanal[open] > .acc-head .acc-badge { border-color: rgba(255, 255, 255, .5); color: #fff; } .acc-kanal[open] > .acc-head .acc-info:hover { background: rgba(255, 255, 255, .16); color: #fff; } /* Aktionen zurückhaltend: kleine Umriss-Knöpfe statt kräftiger Flächen. */ .kanal-akt .btn { font-size: .85rem; padding: 5px 11px; background: none; border: 1px solid var(--border); color: inherit; font-weight: 500; } .kanal-akt .btn:hover { border-color: var(--brand); color: var(--brand); } .kanal-akt .btn.primary { border-color: var(--brand); color: var(--brand); background: none; } .kanal-akt .btn.primary:hover { background: rgba(109, 35, 48, .08); } /* Vertriebskanäle, Feinschliff 1.5.65 */ /* Die Icons tragen ein festes fill und folgen der Textfarbe NICHT — deshalb hier ausdrücklich currentColor, sonst bleibt das Status-Icon auf dem roten Kopf schwarz. */ .acc-kanal .acc-status svg, .acc-kanal .acc-info svg, .acc-kanal .acc-chev svg { fill: currentColor; } .acc-kanal[open] > .acc-head .acc-status, .acc-kanal[open] > .acc-head .acc-status.is-an { color: #fff; } /* Mehr Luft: die Karte wirkte gepresst. */ .kanal-karte { padding: 6px 0 4px; } .kanal-fakten { margin: 14px 0 6px; } .kanal-hinweis { margin: 14px 0 4px; } .kanal-url { margin-top: 22px; } .kanal-zahl { margin: 22px 0 0; } .kanal-abruf { margin: 14px 0 18px; } .kanal-katmap { margin-top: 22px; } /* Sparten-Icon (wofür der Kanal da ist) neben dem Status-Icon. */ .acc-head .acc-sparte { display: inline-flex; align-items: center; flex: none; color: var(--muted, #9a9a9a); margin-right: 2px; } .acc-head .acc-sparte svg { width: 17px; height: 17px; display: block; fill: currentColor; } .acc-kanal[open] > .acc-head .acc-sparte { color: rgba(255, 255, 255, .85); } /* Geplante Kanäle: sichtbar, aber erkennbar noch nicht nutzbar. */ .acc-kanal.is-geplant > .acc-head .acc-label { opacity: .72; } .acc-kanal.is-geplant > .acc-head .acc-badge { border-style: dashed; } /* Rollen einer Adresskategorie (Kunde/Lieferant/…): nebeneinander, damit die vier Haken nicht vier Zeilen im Dialog kosten. */ .rollen-liste { display: flex; flex-wrap: wrap; gap: 6px 18px; } .rollen-liste .check-row { margin: 0; } /* Wareneingang: Position · offene Menge · Eingang */ .we-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); } .we-row:last-child { border-bottom: none; } .we-name { flex: 1; min-width: 0; } .we-offen { flex: 0 0 auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } .we-row input { flex: 0 0 110px; } /* Bestellvorschlag: je Lieferant eine Karte mit Zeilen wie im Wareneingang. */ .bv-gruppe { margin-bottom: 14px; } .bv-gruppe .admin-head { margin-bottom: 6px; } .bv-chk { flex: 1; min-width: 0; margin: 0; } /* Positionszeile der Lieferantenbestellung: wie im Auftrag, aber mit Lieferanten-Artikelnummer und Zeilensumme statt Rabatt/MwSt/Positionsart. Die Basiszeile arbeitet mit grid-template-areas — deshalb auch hier eigene Bereiche vergeben, sonst greifen die geerbten (menge/preis) und die Spalten stehen in einer anderen Reihenfolge als im DOM. */ .pos-row.is-bsrow { grid-template-columns: 22px minmax(0, 1fr) 106px 88px 92px 96px 34px; grid-template-areas: 'handle main artnr menge preis summe x'; } .pos-row.is-bsrow.is-textrow { grid-template-columns: 22px minmax(0, 1fr) 34px; grid-template-areas: 'handle main x'; } /* RECHNUNG/GUTSCHRIFT (1.8.1): dieselbe Zeilenoptik wie im Auftrag, aber nur lesend — Bezeichnung, Menge, Einzelpreis, Zeilensumme. Eigene Bereiche, sonst greifen die geerbten der Auftragszeile (dieselbe Falle wie .is-bsrow). */ .pos-row.is-rgrow { grid-template-columns: 10px minmax(0, 1fr) 86px 96px 108px; grid-template-areas: 'handle main menge preis summe'; } .pos-row.is-rgrow.is-textrow { grid-template-areas: 'handle main main main main'; } .pos-row.is-rgrow.is-summe { grid-template-areas: 'handle main main main summe'; } .pos-row.is-rgrow .pos-ro { font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; } .pos-row.is-rgrow .pos-menge { grid-area: menge; } .pos-row.is-rgrow .pos-preis { grid-area: preis; } .pos-row.is-rgrow.oi-total { font-weight: 700; border-top: 1px solid var(--border); padding-top: 6px; } .pos-row.is-rgrow.oi-total .pos-zeilensumme { color: var(--text); } @media (max-width: 700px) { .pos-row.is-rgrow { grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: 'handle main summe' '. menge preis'; } .pos-row.is-rgrow .pos-preis { text-align: left; } } .pos-artnr { grid-area: artnr; } .pos-zeilensumme { grid-area: summe; text-align: right; font-variant-numeric: tabular-nums; align-self: center; color: var(--muted); } .pos-add-zeile { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; } @media (max-width: 720px) { /* Schmal: Bezeichnung oben, darunter die Zahlen nebeneinander. */ .pos-row.is-bsrow { grid-template-columns: 22px minmax(0, 1fr) 1fr 34px; grid-template-areas: 'handle main main x' '. artnr artnr .' '. menge preis .' '. summe summe .'; } .pos-row.is-bsrow .pos-zeilensumme { text-align: left; } } /* Operator-Dashboard: Abstand zwischen den Kennzahl-Blöcken (das Raster selbst ist .kpi-grid — dasselbe wie im Winzer-Dashboard, keine zweite Optik). */ .opdash-block { margin: 4px 0 18px; } /* VINI-Maske in einer Kennzahl-Kachel braucht ein Eigenmaß (ein span hat keins). */ .kpi-ic .ic-vini { width: 22px; height: 22px; display: inline-block; } /* DUBLETTEN-HINWEIS im Adress-Dialog (1.5.96). Ein Hinweis, keine Sperre: deshalb dezent getönt statt als Fehlerfeld — erst der sichere Treffer (is-sicher) wird weinrot. Leer bleibt der Kasten unsichtbar (:empty). */ .dub-hinweis:empty { display: none; } .dub-hinweis { display: block; margin: -6px 0 14px; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 8%, transparent); } .dub-hinweis.is-sicher { border-left-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); } .dub-kopf { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; } .dub-kopf svg { width: 16px; height: 16px; fill: currentColor; } .dub-row { display: block; width: 100%; text-align: left; cursor: pointer; background: transparent; border: 0; border-top: 1px solid var(--border); padding: 7px 2px; font: inherit; color: inherit; } .dub-row:first-of-type { border-top: 0; } .dub-row:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .dub-name { display: block; font-weight: 600; font-size: 13.5px; } .dub-nr { font-weight: 400; opacity: 0.6; margin-left: 6px; font-size: 12px; } .dub-sub, .dub-grund { display: block; font-size: 12px; opacity: 0.75; } .dub-grund { color: var(--brand); opacity: 1; } /* ZIELGRUPPEN-AUSWAHL (1.5.98) — Regelzeilen + Vorschau in Newsletter und Serienbrief. Bewusst schlicht: die Auskunft steckt in den Zahlen, nicht im Rahmen. */ .zg-wrap { display: flex; flex-direction: column; gap: 10px; } .zg-zeilen { display: flex; flex-direction: column; gap: 6px; } .zg-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); } .zg-label { font-size: 12.5px; font-weight: 600; } .zg-felder { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; } .zg-feld { display: inline-flex; align-items: center; gap: 5px; } .zg-feld-breit { flex: 1 1 220px; min-width: 180px; } .zg-feld input, .zg-feld select { margin: 0; } .zg-num { width: 78px; } .zg-suffix { font-size: 12px; opacity: 0.75; } .zg-katliste { display: flex; flex-wrap: wrap; gap: 4px 14px; } .zg-zeile .icon-act { margin-left: auto; } .zg-add { max-width: 280px; } .zg-ausschluss { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; } .zg-kuerzlich { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .zg-ergebnis { border-top: 1px solid var(--border); padding-top: 8px; } .zg-zaehler { display: block; font-weight: 600; font-size: 15px; } .zg-raus { margin: 2px 0 0; } .zg-grund { display: block; font-size: 11.5px; color: var(--brand); } .zg-liste-acc > summary { cursor: pointer; font-size: 12.5px; padding: 4px 0; } .zg-liste-acc .ea-liste { max-height: 320px; overflow-y: auto; } /* Die Zahl in der Frequenzbremse ist ein Feld IN der Zeile — .check-row macht Eingaben sonst zeilenbreit. */ .zg-kuerzlich input[type='number'] { width: 78px; flex: 0 0 auto; } /* GERATENE Materialzeile in der Abfüllung (1.6.1): sichtbar markiert, weil am Ende des Dialogs eine echte Bestandsbuchung steht. Der Hinweis bleibt stehen (ein Toast ist weg, bevor jemand die Mengen liest); leer = unsichtbar. */ .pr-hinweis:empty { display: none; } .pr-hinweis { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 8px; padding: 8px 10px; font-size: 12.5px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 8%, transparent); } .pr-hinweis svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; } .pr-geraten { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); } .pr-zeile.is-geraten .pr-menge { border-color: color-mix(in srgb, var(--brand) 45%, transparent); } /* ================= „HEUTE" — der Tageseinstieg (W1, 1.6.2) ================= Eine Spalte, große Flächen, fürs Telefon in einer Hand. Am Schreibtisch bleibt die Spalte schmal und mittig — Weite würde die Zeilen zerreißen. */ .ht-wrap { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .ht-kopf { display: flex; flex-direction: column; padding: 4px 2px 0; } .ht-tag { font-size: 22px; font-weight: 600; line-height: 1.2; } .ht-datum { color: var(--muted, #6b6b6b); font-size: 13px; } .ht-block { padding: 10px 12px; } .ht-block-kopf { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 2px 0 6px; cursor: pointer; font: inherit; color: inherit; text-align: left; } div.ht-block-kopf { cursor: default; } .ht-block-ic svg { width: 19px; height: 19px; fill: var(--brand); display: block; } .ht-block-ic .ic-vini { width: 19px; height: 19px; } .ht-block-titel { font-weight: 600; font-size: 13.5px; letter-spacing: .01em; flex: 1; } .ht-block-pfeil svg { width: 18px; height: 18px; fill: currentColor; opacity: .45; } .ht-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 2px; border: 0; background: none; border-top: 1px solid var(--border); font: inherit; color: inherit; text-align: left; } button.ht-row { cursor: pointer; } button.ht-row:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } .ht-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ht-row-titel { font-size: 14px; line-height: 1.3; } .ht-row-sub { font-size: 11.5px; color: var(--muted, #6b6b6b); } .ht-punkt { flex: none; width: 9px; height: 9px; border-radius: 50%; } .ht-punkt.is-rot { background: var(--brand); } .ht-punkt.is-gelb { background: #d9a400; } .ht-punkt.is-gruen { background: #2e7d32; } .ht-punkt.is-grau { background: #9a9a9a; } .ht-aufgabe.is-erledigt .ht-row-titel { text-decoration: line-through; opacity: .55; } .ht-aufgabe.is-erledigt .ht-row-sub { opacity: .55; } .ht-aufgabe .auf-check { flex: none; } .ht-zahl-zeile { display: flex; align-items: baseline; gap: 8px; } .ht-zahl { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; } .ht-leer { text-align: center; padding: 26px 16px; } .ht-leer p { margin: 0 0 6px; } /* ---------------- Automatiken (W2): Regelkarten ---------------- */ .wfr-lauf { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 14px; padding: 9px 11px; font-size: 12.5px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 8%, transparent); } .wfr-lauf svg { width: 17px; height: 17px; fill: currentColor; flex: none; margin-top: 1px; } .wfr-zeile { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; } .wfr-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wfr-label { font-weight: 600; font-size: 13.5px; } .wfr-chip-recht { border: 1px solid color-mix(in srgb, var(--brand) 55%, transparent); color: var(--brand); background: transparent; } .wfr-chip-komfort { border: 1px solid var(--border); background: transparent; } .wfr-wie { margin-left: auto; font-size: 11.5px; color: var(--muted, #6b6b6b); } .wfr-desc { margin: 5px 0 7px; font-size: 12.5px; } .wfr-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .wfr-zahlen { font-size: 12px; color: var(--muted, #6b6b6b); font-variant-numeric: tabular-nums; } .wfr-zustaendig { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 12.5px; } .wfr-zustaendig select { margin: 0; max-width: 220px; } .wfr-hinweis { margin: 7px 0 0; font-size: 12px; color: var(--brand); } .wfr-folgt { margin-top: 4px; } /* W3: An/Aus-Schalter + Zahlenfeld in der Regelkarte */ .wfr-an { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; } .wfr-zahl { width: 64px; margin: 0; } /* ============ W4b Einsatzplan (1.6.11) ============ */ /* Nutzt die rt-*-Bausteine des Belegungsplans; Einsatz-Balken sind RECHTECKE (kein Anreise/Abreise-Parallelogramm — ein Einsatztag ist ein ganzer Tag) und stapeln sich bei Überlappung als Spuren (top/height inline). */ .rt-bar.is-einsatz { clip-path: none; border-radius: 6px; bottom: auto; font-size: 11px; } .rt-bar.is-einsatz .rt-bar-label { margin-left: 6px; } .rt-bar.is-einsatz.is-ganztag { opacity: 0.75; border: 1px dashed color-mix(in srgb, #fff 45%, transparent); } /* Stundenleiste im Tages-Kopf (zeitbasierte Tafel, 1.6.12) */ .ep-dayhead { justify-content: flex-start; padding-top: 5px; } .ep-tagzeile { display: flex; gap: 4px; align-items: baseline; white-space: nowrap; overflow: hidden; } .ep-hrs { display: flex; position: absolute; left: 0; right: 0; bottom: 2px; } .ep-hr { flex: none; font-size: 9px; font-weight: 700; color: var(--muted, #6b6b6b); text-align: left; padding-left: 2px; overflow: hidden; } .ep-chip { display: inline-block; margin-top: 2px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-variant-numeric: tabular-nums; border: 1px solid var(--border); color: var(--muted, #6b6b6b); width: fit-content; } .ep-chip.is-warn { border-color: #b8860b; color: #b8860b; font-weight: 600; } .ep-chip.is-ueber { border-color: var(--brand); color: var(--brand); font-weight: 700; } .rt-rescell .ep-chip { display: block; } /* ============ W4c „Im Aussenbetrieb" (1.6.10) ============ */ /* Overlay im eigenen Container #ab-root — gleiche Ebene wie Im Weinberg/Keller (z-index 35 UNTER modal-backdrop 40: Rueckfragen oeffnen DARUEBER). */ #ab-root { position: relative; z-index: 35; } .ab-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; } .ab-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 14px; min-height: 104px; text-align: left; cursor: pointer; font: inherit; color: var(--text); background: var(--card, var(--bg)); border: 1px solid var(--border); border-radius: 12px; } .ab-kachel:hover { border-color: var(--brand); } .ab-kachel svg { width: 26px; height: 26px; fill: var(--brand); } .ab-sub { font-size: 12.5px; color: var(--muted, #6b6b6b); } .ab-titel { margin: 10px 0 8px; } /* GO-AUFNAHME (1.7.14): Der Assistent lief als nacktes Formular im leeren Raum. Jetzt: Schrittanzeige, Inhalt in einer Karte, fingergroße Felder und ein Fußknopf über die volle Breite — draußen bedient man mit dem Daumen. */ #ab-root .iw-inhalt { max-width: 560px; padding: 0 2px 96px; } .ab-kopfblock { margin-bottom: 4px; } .ab-steps { display: flex; gap: 6px; margin: 4px 0 10px; } .ab-step { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; border-radius: 9px; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--muted); font-size: 12px; } .ab-step-nr { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); } .ab-step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ab-step.is-aktiv { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--text); } .ab-step.is-aktiv .ab-step-nr { background: var(--brand); color: #fff; } .ab-step.is-fertig .ab-step-nr { background: #2e7d32; color: #fff; } #ab-root .ab-titel { font-size: 17px; margin: 2px 0 12px; } /* Felder in Fingergröße */ #ab-root .field label { font-size: 13px; } #ab-root .field input, #ab-root .field select, #ab-root .field textarea { min-height: 46px; font-size: 15px; } /* Der Weiter-Knopf sitzt unten und füllt die Breite (Daumenzone). */ #ab-root .sheet-actions { position: sticky; bottom: 0; margin: 14px -2px 0; padding: 10px 2px 14px; background: linear-gradient(to top, var(--bg) 72%, transparent); } #ab-root .sheet-actions .btn { min-height: 48px; font-size: 15px; } #ab-root .sheet-actions .btn.primary { flex: 1; } .ab-zurueck { margin-bottom: 4px; } .ab-fuss-hinweis { margin-top: 14px; } .ab-aufgabe { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); } .ab-aufgabe:first-of-type { border-top: 0; } .ab-aufgabe-titel { font-size: 15px; } .ab-form .field { min-width: 0; } .ab-foto-vorschau { max-width: 180px; max-height: 220px; border-radius: 10px; border: 1px solid var(--border); margin: 6px 0; } .ab-einwilligung { background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .ab-uwtext { white-space: pre-line; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 8px 0; max-height: 40vh; overflow-y: auto; background: var(--bg); } .ab-sig-label { margin: 8px 0 4px; font-weight: 600; } .ab-link code { word-break: break-all; font-size: 12.5px; } .ab-reaktivieren { margin-top: 4px; } /* Unterschrift: touch-action none, sonst scrollt die Seite statt zu zeichnen. */ .sig-wrap { position: relative; } .sig-canvas { width: 100%; height: 170px; touch-action: none; display: block; border: 1px dashed var(--border); border-radius: 10px; background: #fff; } .sig-clear { position: absolute; right: 6px; top: 6px; padding: 5px 9px; font-size: 12px; } /* Unterweisungs-Pflege (Stammdaten) */ .uw-text-row { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 10px; } .uw-text-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .uw-text-kopf select { margin: 0; width: auto; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; } .uw-text-row textarea { width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } /* VINI-Übersetzen direkt hinter der Sprache (1.6.15). ACHTUNG: die .ic-vini-Maske braucht feste Masse je Kontext — ein span hat kein Eigenmass. */ .uw-kopf-links { display: inline-flex; align-items: center; gap: 8px; } .uw-uebersetzen { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; } .uw-uebersetzen .ic-vini { width: 18px; height: 18px; } /* Fassungs-Historie (1.6.15): alte Wortlaute bleiben wegen der Unterschriften aufgehoben — hier werden sie sichtbar. */ .uw-fassung-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); flex-wrap: wrap; } .uw-fassung-row:first-child { border-top: 0; } .uw-fassung-info { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .uw-fassung-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; } .uw-fassung-btn { padding: 5px 10px; font-size: 12.5px; } #uwlese-root { position: relative; } /* Mitarbeiter-Dialog: Foto + Unterweisungs-Zeilen */ .ma-foto-zeile { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 10px; } .ma-foto { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); } .ma-uw-zeile { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border); } .ma-uw-zeile:first-of-type { border-top: 0; } .ma-uw-zeile svg { width: 18px; height: 18px; fill: var(--brand); flex: none; margin-top: 2px; } /* W4a: Sachkunde-Hinweis unter dem Anwender-Feld (Massnahmen-Maske) */ .vb-sachkunde { margin-top: 4px; } .vb-sachkunde.is-warn { color: var(--brand); font-weight: 600; } /* ============ Einsatzplan nach CURENA (1.6.17) ============ */ /* Ecke ueber der Namensspalte: Zoom, Warn-Toggle, Vollbild (ptf-corner). */ .ep-corner { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 6px; } /* Die Ecke deckt den VOLLEN Kopf ab — die Basisregel .rt-corner setzt 46px, der EP-Kopf ist mit Stundenleiste aber höher; unter der zu kurzen Ecke schoben sich die Stundenzahlen durch (Betreiber 15.08.). */ .ep-corner.rt-corner { height: auto; align-self: stretch; z-index: 7; } /* Namensspalte per Maus größenänderbar (Griff am rechten Rand der Ecke; Breite je Gerät in localStorage vinorum.ep). Nur der Einsatzplan — die Vermietungs-Plantafel bleibt bei den festen 160px. */ .ep-card .rt-rescell, .rt-card .rt-rescell { width: var(--ep-lblw, 160px); } .ep-resize { position: absolute; top: 0; bottom: 0; right: -1px; width: 8px; cursor: col-resize; touch-action: none; z-index: 8; } .ep-resize:hover, .ep-resize.is-drag { background: color-mix(in srgb, var(--brand) 30%, transparent); } .ep-zbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--card, var(--bg)); color: var(--text); cursor: pointer; } .ep-zbtn:hover { border-color: var(--brand); color: var(--brand); } .ep-zbtn svg { width: 17px; height: 17px; fill: currentColor; } .ep-warn-toggle.is-an { color: var(--brand); border-color: var(--brand); } /* Filterzeile (CURENA plan-head-filter): Icon + Mehrfachauswahl + Schalter. */ /* Kopf = Standard-Suchzeile (Betreiber 15.08.): die beiden Mehrfachauswahlen, das „Anzeige"-Dropdown mit den Schaltern, Suche und Export. */ .ep-anzeige-panel { min-width: 270px; display: grid; gap: 8px; } .ep-anzeige-panel .check-row { margin: 0; } /* Im Vollbild ist die Seitenleiste weg — der Dialog zentriert ohne ihren Versatz. */ body.ep-fullwide .modal-backdrop { padding-left: 16px; } .ep-fsel { position: relative; } .ep-fsel-btn { max-width: 340px; } .ep-fsel-btn .fsel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 270px; } .ep-fsel.is-set .fsel-label { font-weight: 600; } .ep-fsel-panel { min-width: 260px; padding: 8px; } .ep-fsel-panel .ssel-search { width: 100%; margin-bottom: 6px; } .ep-fsel-list { max-height: 260px; overflow-y: auto; } /* Einträge kompakt wie die Auftrags-Suchzeile (Betreiber 15.08.) */ .ep-fsel-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 8px; } .ep-fsel-item .ep-fsel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ep-fsel-item input[type='checkbox'] { margin: 0; flex: none; } .ep-fsel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* color: `font: inherit` erbt KEINE Farbe — ohne `color` stand der Button im Dunkelmodus in UA-Schwarz auf dunklem Panel (Betreiber-Meldung 15.08.). */ .ep-fsel-all { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--text); background: none; border: 0; cursor: pointer; } /* Anzeige-Panel (Chips) + Wochentags-Chips der Serie */ .ep-anzeige-panel .mf-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ep-wt-wrap .mf-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ep-fsel-apply { width: 100%; margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .ep-fsel-apply svg { width: 16px; height: 16px; fill: currentColor; } .ep-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; display: inline-block; } /* Farbwahl in den Dialogen (1.6.34): DROPDOWN im searchSelect-Muster — Auslöser zeigt Swatch + Farbname, ganz oben die gepinnte „Manuelle Eingabe" (öffnet den nativen Farbdialog). */ .ep-farb-sel { position: relative; } .ep-farb-btn { display: flex; align-items: center; gap: 8px; } .ep-farb-btn .ep-swatch { width: 16px; height: 16px; } .ep-farb-item { display: flex; align-items: center; gap: 8px; } /* Artikelzeile (1.6.35): Preis als eigene rechtsbündige Spalte, Grundpreis klein darunter. */ .art-preis-col { display: flex; flex-direction: column; align-items: flex-end; flex: none; min-width: 88px; } .art-preis { font-weight: 600; font-variant-numeric: tabular-nums; } .art-grundpreis { font-size: 11.5px; color: var(--muted, #6b6b6b); white-space: nowrap; } @media (max-width: 640px) { .art-preis-col { min-width: 0; } .art-grundpreis { display: none; } } /* Kollisionswarnung: Tageskopf + betroffene Balken (CURENA-Muster). */ .ep-dayhead.is-kollision { background: color-mix(in srgb, var(--brand) 14%, transparent); } .ep-dayhead.is-kollision .rt-wt, .ep-dayhead.is-kollision .rt-tag { color: var(--brand); font-weight: 700; } .ep-tag-warn { display: inline-flex; margin-right: 3px; vertical-align: -2px; } .ep-tag-warn svg { width: 13px; height: 13px; fill: var(--brand); } /* Kopf-Markierung (1.6.30, CURENA ptf-headsel): über die Tagesköpfe ziehen → Zoom auf die markierten Tage. */ .rt-track-head { cursor: col-resize; } .ep-headsel { position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 2; background: color-mix(in srgb, var(--brand) 20%, transparent); border-inline: 2px solid var(--brand); } /* Zeilenkopf (CURENA ptf-label): Farb-Punkt vor dem Namen, Klick = Filter auf NUR diese Zeile (erneuter Klick hebt ihn auf). */ .ep-zeilenkopf { cursor: pointer; } .ep-zeilenkopf:hover { background: color-mix(in srgb, var(--brand) 7%, var(--card)); } .ep-zeilenkopf.is-filtersel { background: color-mix(in srgb, var(--brand) 12%, var(--card)); } .ep-zeilenkopf.is-filtersel .rt-objname { color: var(--brand); font-weight: 700; } /* Wochen-Navigation im Kopf: schmale Pfeil-Knöpfe */ .ep-nav-pfeil { padding: 6px 7px; } .ep-nav-pfeil svg { width: 18px; height: 18px; fill: currentColor; display: block; } /* „Heute" im Kopf: Champagner statt Weinrot — Weinrot ist die WARN-Farbe der Kollisionstage (Betreiber 15.08.). */ .ep-dayhead.is-heute { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 -3px 0 var(--accent); } .ep-dayhead.is-heute .rt-tag, .ep-dayhead.is-heute .rt-wt { color: var(--text); font-weight: 700; } /* DWD-Zeile im Tageskopf (Anzeige-Schalter „Wettervorhersage") */ .ep-wetter { font-size: 11.5px; line-height: 1.2; color: var(--muted, #6b6b6b); white-space: nowrap; min-height: 14px; } /* Stunden-Wetter im Tageskopf (1.6.40; Symbole größer 1.6.41 — Betreiber) */ .ep-wstd { display: flex; align-self: stretch; height: 25px; margin-top: 0; } .ep-wh { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; line-height: 1; } .ep-wh .wh-sym { font-size: 14px; } .ep-wh .wh-temp { font-size: 9.5px; color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; } .ep-wetter .wh-sym { font-size: 14.5px; vertical-align: -1px; } /* Weißer Grund der Tafel (1.6.40, Betreiber: „wirkt edler") — NUR der Einsatzplan; der Belegungsplan behält seine Tönung. */ .ep-card .rt-row:not(.rt-head):not(.rt-group) .rt-track { background-color: var(--card); } /* ---------- Einsatzplan: Kalender-Ansichten (1.6.40, CURENA plan-views) ---------- */ .ep-ansicht { padding: 4px 2px; } /* BETRIEBSTEILE (1.7.5): die Gegenfrage zur Plantafel — nicht „wer arbeitet", sondern „was ist wo geplant". Gruppen Weinberg · Keller · Räume · Sonstiges. */ .ep-teil { margin: 14px 0 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .ep-teil-kopf { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: color-mix(in srgb, var(--text) 5%, transparent); } .ep-teil-ic svg { width: 18px; height: 18px; } .ep-teil-kopf .cust-no { margin-left: auto; } .ep-teil-ort { padding: 4px 12px 8px; } .ep-teil-ort-kopf { margin: 6px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .ep-teil-zeile { display: flex; align-items: baseline; gap: 10px; padding: 5px 6px; border-radius: 8px; font-size: 13.5px; cursor: pointer; } .ep-teil-zeile:hover { background: color-mix(in srgb, var(--text) 6%, transparent); } .ep-teil-datum { flex: none; min-width: 118px; font-variant-numeric: tabular-nums; color: var(--muted); } .ep-teil-was { flex: 1; min-width: 0; } .ep-teil-wer { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 640px) { .ep-teil-zeile { flex-wrap: wrap; } .ep-teil-wer { max-width: none; } } .ep-ansicht-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .ep-ansicht-label { font-size: 14.5px; min-width: 150px; text-align: center; } .ep-t-gruppe { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; } .ep-t-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .ep-t-zeile { display: flex; gap: 10px; align-items: baseline; padding: 5px 6px; border-top: 1px solid var(--border); font-size: 13px; flex-wrap: wrap; border-radius: 6px; } .ep-t-zeile:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); cursor: pointer; } .ep-t-zeit { flex: none; width: 108px; font-variant-numeric: tabular-nums; color: var(--muted); } .ep-t-was { flex: 1 1 240px; min-width: 0; } .ep-t-res { color: var(--muted); font-size: 12.5px; } .ep-t-ohne { margin-top: 8px; } .ep-w-grid { display: grid; grid-template-columns: repeat(7, minmax(128px, 1fr)); gap: 6px; overflow-x: auto; } .ep-w-col { border: 1px solid var(--border); border-radius: 10px; padding: 5px; min-height: 130px; } .ep-w-col.is-heute { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); } .ep-w-kopf { width: 100%; border: 0; background: transparent; font-weight: 600; font-size: 12.5px; padding: 3px 0 6px; cursor: pointer; color: var(--text); } .ep-w-kopf:hover { color: var(--brand); } .ep-w-karte { border-left: 3px solid var(--muted); background: color-mix(in srgb, var(--text) 4%, transparent); border-radius: 6px; padding: 4px 7px; margin-bottom: 4px; font-size: 11.5px; cursor: pointer; } .ep-w-karte:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); } .ep-w-zeit { display: block; color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; } .ep-w-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ep-m-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .ep-m-wt { text-align: center; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 2px; } .ep-m-zelle { border: 1px solid var(--border); border-radius: 8px; min-height: 76px; padding: 4px 5px; cursor: pointer; overflow: hidden; } .ep-m-zelle:hover { border-color: var(--accent); } .ep-m-zelle.is-heute { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); } .ep-m-zelle.is-fremd { opacity: 0.35; cursor: default; } .ep-m-tag { font-size: 11.5px; font-weight: 600; } .ep-m-eintrag { display: flex; align-items: center; gap: 4px; font-size: 10.5px; margin-top: 2px; overflow: hidden; white-space: nowrap; } .ep-m-txt { overflow: hidden; text-overflow: ellipsis; } .ep-m-mehr { font-size: 10px; color: var(--muted); margin-top: 1px; } .ep-ov-tab { width: 100%; border-collapse: collapse; font-size: 13px; } .ep-ov-tab th, .ep-ov-tab td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; } .ep-ov-tab th.num, .ep-ov-tab td.num { text-align: right; font-variant-numeric: tabular-nums; } .ep-ov-tab thead th { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .ep-ov-summe td { font-weight: 700; border-top: 2px solid var(--border); } .ep-ov-res { margin-top: 18px; } .ep-ov-gruppe td { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; background: color-mix(in srgb, var(--text) 4%, transparent); padding: 4px 10px; } /* ---------- Tages-Vorhersage-Popup (1.6.41) ---------- */ button.dash-fc-tile { font: inherit; color: inherit; background: transparent; cursor: pointer; } button.dash-fc-tile:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .tv-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; } .tv-symbol { font-size: 40px; line-height: 1; flex: none; } .tv-wetter { font-size: 13.5px; color: var(--muted); } .tv-temp { font-size: 24px; font-weight: 700; line-height: 1.1; } .tv-temp .tv-tmin { font-size: 16px; font-weight: 400; color: var(--muted); } /* Tagesinfos rechtsbündig untereinander, OHNE Chip-Optik (1.6.43 — Chips oben und Schalt-Chips unten verwirrten sich) */ .tv-fakten { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; white-space: nowrap; } /* ‹ › Tages-Navigation in der Kopfleiste — ausgegraut ohne Stundendaten */ .tv-nav-wrap { margin-left: auto; display: flex; gap: 2px; } /* Kopf der Tagesvorhersage (1.6.88): Ort oben, Tag mit Blätter-Pfeilen darunter. */ .tv-titel-block { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .tv-ort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tv-datum-zeile { display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; } .tv-datum-zeile .tv-titel { padding: 0 2px; } .tv-datum-zeile .tv-nav { width: 26px; height: 26px; } .tv-datum-zeile .tv-nav svg { width: 16px; height: 16px; } .sheet-title .tv-nav[disabled] { opacity: 0.3; cursor: default; pointer-events: none; } .tv-seg { margin-top: 2px; } /* Klickbare Vorhersage-Zellen in Stationskarte + Klima-Detail (1.6.43) */ /* Als