/* ================================================================
GEMEINSAME GESTALTUNG · agroserv (Desktop + Handy) und TEAM (Desktop + Handy)
Version 1.2.2 · G0 · 07.11.2026 · eine einzige Stelle für Werte und Bausteine
Herkunft: LandLord/Backoffice in TEAM (team.css, team-design.css Etappe 5, Werkzeug-Werte v261 unter #app-shell),
Redaktion r2-* (team-redaktion.css, abgenommen 31.10.), TEAM-Rahmen Etappe 7 (team-desktop-e7.css) und das
abgenommene Design-Konzept 04.11.2026 (design2/konzept.md, Fassung 3 + Handy Variante B).
Regeln (LIESMICH.md):
· Farben, Schriften, Größen, Abstände, Ecken und Schatten stehen NUR im Werte-Block (1). Alles andere nutzt var(--g-…).
· Jeder Selektor beginnt mit einer Klasse g-… (außer :root im Werte-Block) – keine Überschneidung mit team-*, r2-*, lp-*, ag-*, bb-*, fw-* …
· Zustände über Zusatzklassen g-ok · g-warn · g-alert · g-info · g-lila · g-grau, aktiv über g-an bzw. aria-current/aria-selected/aria-pressed.
· Neue Bausteine nur hier. Werte ändern = neue Version (Kopf, --g-version, ?v=).
· Kein Dunkelmodus.
Gliederung: 0 Schriften · 1 Werte · 2 Grundlage · 3 Rahmen Desktop · 4 Rahmen Handy und Breiten · 5 Seite und Navigation im Inhalt ·
6 Karten und Kennzahlen · 7 Tabelle · 8 Kennzeichen · 9 Warnsymbol, Popover, Sammelzeile · 10 Knöpfe und Felder ·
11 Seitenfenster, Fenster, Blatt · 12 Kurzmeldung, Leer, Laden · 13 Handy-Bausteine · 15 App-Bausteine (1.2.0) · 14 Bewegung
Breiten (Media Queries können keine Variablen lesen, daher hier festgehalten):
unter 600 px eine Spalte (Handy) · 600–1199 px zwei Spalten (aufgeklappt, iPad, Tablet) · ab 1200 px Desktop ·
Kopfleiste: unter 1440 px Programme ohne Symbole, unter 1366 px Flora nur Keimling, unter 1280 px TEAM nur Pfeil
================================================================ */
/* ── 0 · Schriften (selbst gehostet, gleiche Dateien und Angaben wie TEAM team-doc.css; Lizenz schrift/OFL.txt) ── */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap;
src: url('schrift/figtree-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: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap;
src: url('schrift/figtree-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700; font-display: swap;
src: url('schrift/source-serif-4-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: 'Source Serif 4'; font-style: normal; font-weight: 400 700; font-display: swap;
src: url('schrift/source-serif-4-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* ── 1 · WERTE (einzige Stelle mit Farben und Maßen) ───────────────────────────────────────── */
:root {
--g-version: "1.2.2"; /* 1.2.2 (R2, 07.11.2026): Kultur-Pille B weich getönt (14 %, Kürzel dunkle Abwandlung --g-tondunkel-*, ohne Rand/Punkt/Muster), Farbkante D (.g-kante), Kartenlegende C (.g-kraeftig), Kopfleiste 11c (.g-kopf-hoch: 60 px, Elemente 40 px auf einer Linie, Seitenkopf 34 px) · 1.2.1 (S2, 06.11.2026): Durum eigener Ton Oliv #6b7200 ohne Streifen (Martin), gKulturAnzeige (normale Schreibweise) · 1.2.0 (Ü1/G1): Kulturfarben kräftig und fest (17 Grundtöne, Senf Indigo), Kultur-Chip als Pille, Muster/Kürzel, neue Schlüssel durum/sorghum/sonder, App-Bausteine (Abschnitt 15); 1.1.0: + kulturen.js */
/* Grund und Flächen (Backoffice/LandLord) */
--g-grund: #f5f5f3; /* Seitengrund */
--g-flaeche: #fff; /* Karten, Tabellen, Kopf */
--g-flaeche-2: #faf9f7; /* Seitenleiste, Tabellenkopf, Eingaben nur lesend, Mini-Kacheln */
--g-hover: #f0f0ed; /* Zeigen, Spur von Balken, neutraler Chip */
/* Linien */
--g-linie: #eaeae7;
--g-linie-2: #d8d8d4; /* Felder, Knöpfe, Trenner mit Gewicht */
/* Text (Kontrast: Text 1 16,3 · Text 2 5,5 · Text 3 3,1 : 1 auf dem Grund – siehe tests) */
--g-text: #181816;
--g-text-2: #64645e;
--g-text-3: #8d8d86; /* wie Redaktion r2; Backoffice-Alt #a0a099 hätte nur 2,4 : 1 */
--g-text-inv: #fff; /* Text auf Akzent, Alarm und im dunklen Rahmen */
/* Akzent Salbei */
--g-akzent: #4e7a64;
--g-akzent-d: #3a5c4a; /* dunkel: Zeigen, Text auf hellem Akzent, Fokus */
--g-akzent-m: #b9d3c3; /* mittel: Balken im Hintergrund, Ränder */
--g-akzent-s: #e8f2ec; /* hell: gewählt, Symbolfeld */
--g-akzent-hauch: rgba(78, 122, 100, .08);
/* Zustände: Text · Fläche (-s) · Rand (-r) · Füllung für Punkte, Balken, Streifen (-f) */
--g-ok: #2f6b47; --g-ok-s: #e6f2eb; --g-ok-r: #c6dccf; --g-ok-f: #4e7a64;
--g-warn: #8f6210; --g-warn-s: #fbf1dc; --g-warn-r: #f0dcb0; --g-warn-f: #d49a2a;
--g-alert: #b3261e; --g-alert-s: #fbeaea; --g-alert-r: #efc8c5; --g-alert-f: #c8402f;
--g-info: #24527a; --g-info-s: #e5eef8; --g-info-r: #c5d7ec; --g-info-f: #3a6fb8;
--g-lila: #5b4a9e; --g-lila-s: #efecf8; /* Sonderkennzeichen (z. B. Beleg aus TEAM) */
/* Zähler (Bernstein, dunkle Ziffer 7,2 : 1 – wie TEAM) */
--g-zaehler: #e0a12b;
--g-zaehler-text: #2b1e05;
/* Rahmen (TEAM-Leiste: dunkles Salbei mit Feld-Zeichnung) */
--g-rahmen: #263a30;
--g-rahmen-text: #fff;
--g-rahmen-text-2: rgba(255, 255, 255, .8);
--g-rahmen-hell: #9cc5ad; /* aktive Markierung im dunklen Rahmen */
--g-rahmen-glas: rgba(255, 255, 255, .08);
--g-rahmen-glas-2: rgba(255, 255, 255, .14);
--g-rahmen-glas-3: rgba(255, 255, 255, .22);
--g-rahmen-linie: rgba(255, 255, 255, .14);
--g-rahmen-linie-2: rgba(255, 255, 255, .26);
--g-rahmen-verlauf: linear-gradient(90deg, rgba(38, 58, 48, .97) 0%, rgba(38, 58, 48, .9) 30%, rgba(38, 58, 48, .72) 64%, rgba(38, 58, 48, .58) 100%);
--g-rahmen-bild: url('leiste_feld.webp');
--g-papier: #f3ecda; /* Zeichen-Feld, runder „Erfassen“-Knopf im dunklen Rahmen */
--g-flora: #1e5631;
--g-flora-hell: #cfe6d8;
--g-flora-verlauf: radial-gradient(120% 120% at 30% 20%, #2f7a4a 0%, #1e5631 55%, #164326 100%);
--g-flora-ring: 0 0 0 2px rgba(156, 197, 173, .42);
--g-fokus: #3a5c4a; /* Tastatur-Rahmen auf hellem Grund */
--g-fokus-hell: #cfe6d8; /* Tastatur-Rahmen im dunklen Rahmen */
--g-schleier: rgba(24, 24, 22, .42);
--g-glas: rgba(251, 250, 246, .92); /* untere Leiste am Handy, schwebende Knöpfe */
--g-schalter-aus: #bdbdb6;
/* Kulturfarben 1.2.0: fest je Kultur und kräftig (17 Grundtöne mit je einem Namen) – von der gedämpften Fibel ausgenommen (Martin 05.11.2026).
Grundton → --g-ton-*, Kultur → Grundton nur hier; Muster und Kürzel trennen Familien mit gleichem Ton (kulturen.js). Werte bleiben 6-stelliges Hex
(Aufrufer hängen Deckkraft an). Geprüft mit tests/kulturfarben_test.py (CIEDE2000, Deuteranopie, Chip-Text, Kartengrund). */
--g-ton-gelb: #ffe014; /* Raps, Sonnenblume */
--g-ton-gold: #d6a00a; /* Weichweizen, Hartweizen */
--g-ton-orange: #d7590c; /* Mais */
--g-ton-rot: #ad1630; /* Sorghum/Hirse, Ölkürbis */
--g-ton-weinrot: #8e1b45; /* Obst, Wein, Gemüse */
--g-ton-rosa: #e2579b; /* Triticale */
--g-ton-violett: #7d3c98; /* Zuckerrübe */
--g-ton-indigo: #2a20a6; /* Senf (Martin 05.11.: Indigo) */
--g-ton-blau: #2471a3; /* Roggen */
--g-ton-hellblau: #5ab8f0; /* Soja, Erbse/Bohne/Linse */
--g-ton-tuerkis: #0f8f8f; /* Gerste, Braugerste */
--g-ton-mint: #5fd6b4; /* Begrünung */
--g-ton-hellgruen: #b6ef5c; /* Grünbrache, Biodiversität */
--g-ton-gruen: #1e8449; /* Grünland, Feldfutter */
--g-ton-braun: #7a3410; /* Dinkel, Kartoffel */
--g-ton-oliv: #6b7200; /* Hartweizen (Durum) — 1.2.1, Martin 06.11.2026: auf der Karte von Weizen unterscheidbar */
--g-ton-beige: #d8bd86; /* Hafer */
--g-ton-grau: #8f8f8f; /* sonstige */
/* 1.2.2 (R2): dunkle Abwandlung je Grundton — Kürzel in der Pille B auf 14 % getöntem Grund ≥ 4,8 : 1 (tests/kulturfarben_test.py C2); dunkle Töne bleiben, wie sie sind */
--g-tondunkel-gelb: #7b6c0a;
--g-tondunkel-gold: #836206;
--g-tondunkel-orange: #a94609;
--g-tondunkel-rot: #ad1630;
--g-tondunkel-weinrot: #8e1b45;
--g-tondunkel-rosa: #a74072;
--g-tondunkel-violett: #7d3c98;
--g-tondunkel-indigo: #2a20a6;
--g-tondunkel-blau: #226a99;
--g-tondunkel-hellblau: #366e8f;
--g-tondunkel-tuerkis: #0c7070;
--g-tondunkel-mint: #357865;
--g-tondunkel-hellgruen: #5a772e;
--g-tondunkel-gruen: #1a713f;
--g-tondunkel-braun: #7a3410;
--g-tondunkel-oliv: #626800;
--g-tondunkel-beige: #796a4b;
--g-tondunkel-grau: #666666;
--g-kultur-weizen: var(--g-ton-gold);
--g-kultur-durum: var(--g-ton-oliv);
--g-kultur-dinkel: var(--g-ton-braun);
--g-kultur-roggen: var(--g-ton-blau);
--g-kultur-triticale: var(--g-ton-rosa);
--g-kultur-gerste: var(--g-ton-tuerkis);
--g-kultur-braugerste: var(--g-ton-tuerkis);
--g-kultur-hafer: var(--g-ton-beige);
--g-kultur-mais: var(--g-ton-orange);
--g-kultur-sorghum: var(--g-ton-rot);
--g-kultur-zuckerruebe: var(--g-ton-violett);
--g-kultur-sonnenblume: var(--g-ton-gelb);
--g-kultur-raps: var(--g-ton-gelb);
--g-kultur-senf: var(--g-ton-indigo);
--g-kultur-soja: var(--g-ton-hellblau);
--g-kultur-erbse: var(--g-ton-hellblau);
--g-kultur-kuerbis: var(--g-ton-rot);
--g-kultur-kartoffel: var(--g-ton-braun);
--g-kultur-feldfutter: var(--g-ton-gruen);
--g-kultur-gruenland: var(--g-ton-gruen);
--g-kultur-begruenung: var(--g-ton-mint);
--g-kultur-brache: var(--g-ton-hellgruen);
--g-kultur-sonder: var(--g-ton-weinrot);
--g-kultur-sonstige: var(--g-ton-grau);
/* Muster der Familien (Streifen/Punkte, gleich auf Karte, Chip-Punkt und Balken), Platzhalter „Kultur fehlt“ */
--g-muster-hell: rgba(255, 255, 255, .55);
--g-muster-dunkel: rgba(24, 24, 22, .35);
--g-platzhalter: #b9b9b2;
--g-platzhalter-s: #f1f1ee;
--g-kk-ton: 14%; /* Kultur-Pille B (1.2.2): Anteil der Kulturfarbe im weich getönten Grund (Kürzel dunkle Abwandlung ≥ 4,8 : 1) */
/* 1.2.2 (R2) Kopfleiste 11c: Leiste 60 px, jedes Element 40 px (Reiter, Flora, Betrieb · AJ, Nutzer, zurück zu TEAM), im Seitenkopf 34 px — alle auf einer Linie */
--g-kopf-h-hoch: 60px;
--g-kopf-element-h: 40px;
--g-seitenkopf-element-h: 34px;
--g-flora-feld-max: 420px;
--g-flora-feld-min: 150px;
/* 1.2.0 App-Anordnung (Ü1): dichter Rahmen nur mit g-app-hoch (die Werte oben gelten unverändert), Arbeitsfläche, Karten-Grund */
--g-kopf-h-dicht: 48px;
--g-symbolleiste-b-dicht: 64px;
--g-seitenkopf-kompakt-h: 48px;
--g-zeile-dicht: 27px;
--g-arbeit-luft: 12px;
--g-links-b: 330px; /* Schlagleiste links */
--g-detail-b: 420px; /* Detail rechts angedockt */
--g-aktionsleiste-h: 46px;
--g-rollbalken: #c9c9c3;
--g-rollbalken-hover: #a9a9a2;
--g-karte-grund: #eef0e6;
--g-karte-linie: #dfe3d3;
--g-karte-weg: #ffffff;
--g-sat-1: #3e4a2e; --g-sat-2: #6f6a4c; --g-sat-3: #8b7b5f; --g-sat-4: #a9a07f; /* Satellit nachgebildet (Banner, Musterseite) */
/* Schriften: System im Inhalt (wie Backoffice), Figtree im Rahmen und am Handy, Source Serif für Titel am Handy */
--g-schrift: -apple-system, 'Segoe UI', BlinkMacSystemFont, sans-serif; /* = TEAM --e7-system / --r2-font */
--g-schrift-rahmen: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--g-schrift-titel: 'Source Serif 4', Georgia, serif;
--g-schrift-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--g-schrift-ueberschrift: var(--g-schrift); /* Seiten- und Fenstertitel; am Handy Source Serif (Abschnitt 4) */
/* Größenstufen (rem, 1 rem = 16 px) */
--g-gr-versal: .6875rem; /* 11 px Versal-Beschriftung, Zähler */
--g-gr-klein: .75rem; /* 12 px Nebentext, Tabellenkopf */
--g-gr-neben: .78125rem; /* 12,5 px */
--g-gr-basis: .8125rem; /* 13 px Inhalt, Knöpfe, Tabellen */
--g-gr-text: .84375rem; /* 13,5 px Felder, Listen */
--g-gr-betont: .90625rem; /* 14,5 px Karten-Titel */
--g-gr-fenster: 1.0625rem; /* 17 px Fenster- und Seitenfenster-Titel */
--g-gr-titel: 1.25rem; /* 20 px Seitentitel */
--g-gr-zahl: 1.3125rem; /* 21 px Kennzahl */
--g-gr-held: 1.5rem; /* 24 px große Zahl */
--g-gr-klein-handy: .78125rem; /* am Handy eine Stufe größer */
--g-gr-neben-handy: .8125rem;
--g-gr-basis-handy: .9375rem; /* 15 px wie TEAM-Handy */
--g-gr-text-handy: .9375rem;
--g-gr-eingabe: var(--g-gr-text);
--g-gr-eingabe-handy: 1rem; /* ab 16 px zoomt iOS beim Tippen nicht */
--g-zeilenhoehe: 1.4;
/* Abstände */
--g-a-1: .25rem; --g-a-2: .5rem; --g-a-3: .75rem; --g-a-4: 1rem; --g-a-5: 1.25rem; --g-a-6: 1.5rem; --g-a-8: 2rem;
--g-rand: 1.5rem; /* Rand der Inhalte am Desktop (24 px wie Backoffice) */
--g-rand-mittel: 1rem;
--g-rand-handy: .875rem;
/* Ecken */
--g-r-karte: 12px;
--g-r-feld: 9px;
--g-r-klein: 6px;
--g-r-fenster: 14px;
--g-r-blatt: 18px; /* Blatt im Rahmen, Blatt von unten */
--g-r-voll: 999px;
/* Schatten */
--g-schatten-1: 0 1px 2px rgba(38, 36, 30, .05);
--g-schatten-2: 0 8px 22px rgba(38, 36, 30, .08), 0 1px 3px rgba(38, 36, 30, .05);
--g-schatten-pop: 0 12px 32px rgba(24, 24, 22, .14), 0 2px 6px rgba(24, 24, 22, .06);
--g-schatten-seite: -16px 0 40px rgba(24, 24, 22, .18);
--g-schatten-blatt: 0 -10px 30px rgba(24, 24, 22, .2);
--g-schatten-fuss: 0 -6px 18px rgba(24, 24, 22, .06);
--g-schatten-knauf: 0 1px 3px rgba(0, 0, 0, .2);
--g-schatten-rund: 0 10px 22px rgba(38, 58, 48, .3);
/* Maße */
--g-kopf-h: 52px; /* Kopfleiste Desktop */
--g-symbolleiste-b: 78px;
--g-seitenleiste-b: 228px;
--g-seitenfenster-b: 600px;
--g-seitenkopf-h: 64px;
--g-tabellenkopf-h: 38px;
--g-feld-h: 2.125rem; /* 34 px Knöpfe, Felder, Segment */
--g-knopf-klein-h: 1.75rem; /* 28 px */
--g-segment-knopf-h: 1.75rem; /* 28 px im 34-px-Segment */
--g-tipp: 2.75rem; /* 44 px Mindest-Tippfläche am Handy */
--g-hkopf-h: 3rem; /* 48 px Kopf am Handy */
--g-hleiste-h: 3.75rem; /* 60 px untere Leiste */
--g-rail-b: 5rem; /* 80 px Seitenleiste aufgeklappt */
/* Ebenen (wie TEAM: Seitenfenster 9600 über dem Flora-Knopf 9500, Kurzmeldungen 10050 über allem) */
--g-z-kopf: 100;
--g-z-popover: 700;
--g-z-seitenfenster: 9600;
--g-z-fenster: 9800;
--g-z-toast: 10050;
/* Bewegung */
--g-dauer: .12s;
--g-dauer-lang: .22s;
/* Symbole als Maske bzw. Hintergrund (Farbe kommt über currentColor; nur der Auswahl-Pfeil trägt Text 2) */
--g-ic-pfeil-runter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364645e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
--g-ic-lupe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
--g-ic-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5h.01'/%3E%3C/svg%3E");
--g-ic-fehler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16h.01'/%3E%3C/svg%3E");
--g-ic-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E");
--g-ic-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
/* Ränder der Inhalte nach Breite (nur Verweise auf die Werte oben) */
@media (max-width: 1199.98px) { :root { --g-rand: var(--g-rand-mittel); } }
@media (max-width: 599.98px) { :root { --g-rand: var(--g-rand-handy); } }
/* ── 2 · Grundlage ─────────────────────────────────────────────── */
/* .g-seite auf (oder dem Wurzel-Element einer Ansicht): Grundschrift, Grundfarbe, Grund */
.g-seite {
margin: 0; font-family: var(--g-schrift); font-size: var(--g-gr-basis); line-height: var(--g-zeilenhoehe);
color: var(--g-text); background: var(--g-grund);
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
:where(.g-seite, .g-seite *), :where(.g-seite *)::before, :where(.g-seite *)::after { box-sizing: border-box; }
:where(.g-seite) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.g-seite) :where(svg) { flex: none; }
/* sichtbarer Tastatur-Fokus überall in g-Bereichen; im dunklen Rahmen hell */
:where(.g-seite) :focus-visible { outline: 2px solid var(--g-fokus); outline-offset: 2px; }
:where(.g-kopfleiste, .g-symbolleiste, .g-hkopf) :focus-visible { outline-color: var(--g-fokus-hell); }
/* Hilfsklassen */
.g-unsichtbar { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.g-zahl { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.g-mono { font-family: var(--g-schrift-mono); }
.g-text-2 { color: var(--g-text-2); }
.g-text-3 { color: var(--g-text-3); }
.g-luft { flex: 1 1 auto; }
.g-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-a-2); }
.g-stapel { display: flex; flex-direction: column; gap: var(--g-a-3); }
.g-raster { display: grid; gap: var(--g-a-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--g-raster-min, 18rem)), 1fr)); }
.g-abschnitt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 26px 2px 10px; }
.g-abschnitt:first-child { margin-top: 2px; }
.g-abschnitt-titel { margin: 0; font-size: var(--g-gr-versal); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--g-text-3); }
/* ── 3 · Rahmen Desktop: App, Kopfleiste (Programme), Symbolleiste (Seiten), Seitenleiste mit Unterpunkten ── */
/* App-Raster: Kopf oben, links Symbolleiste bzw. Handy-Seitenleiste (Spalte „auto“ fällt ohne sie auf 0), rechts das Blatt */
.g-app {
display: grid; min-height: 100vh; min-height: 100dvh;
grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
background: var(--g-rahmen); font-family: var(--g-schrift); font-size: var(--g-gr-basis);
padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}
.g-app > .g-kopfleiste, .g-app > .g-hkopf { grid-column: 1 / -1; grid-row: 1; }
.g-app > .g-symbolleiste {
grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: var(--g-kopf-h);
height: calc(100vh - var(--g-kopf-h)); height: calc(100dvh - var(--g-kopf-h));
}
.g-app > .g-blatt { grid-column: 2; grid-row: 2; border-top-left-radius: var(--g-r-blatt); }
.g-app > .g-hleiste { grid-column: 1 / -1; grid-row: 3; }
.g-blatt { min-width: 0; background: var(--g-grund); color: var(--g-text); }
.g-inhalt { padding: var(--g-a-5) var(--g-rand) var(--g-a-8); }
/* Kopfleiste (TEAM .topbar, Etappe 7) */
.g-kopfleiste {
position: sticky; top: 0; z-index: var(--g-z-kopf);
display: flex; align-items: center; gap: 6px; height: var(--g-kopf-h); min-width: 0; padding: 0 14px;
background: var(--g-rahmen-verlauf), var(--g-rahmen-bild) center / cover no-repeat var(--g-rahmen);
background-blend-mode: normal, luminosity;
color: var(--g-rahmen-text); font-family: var(--g-schrift-rahmen); font-size: var(--g-gr-basis); line-height: 1;
}
.g-logo {
display: inline-flex; align-items: center; gap: 9px; flex: none; height: 42px; padding: 4px 12px 4px 4px;
border: 0; border-radius: 12px; background: none; color: var(--g-rahmen-text); text-decoration: none; cursor: pointer;
}
.g-logo:hover { background: var(--g-rahmen-glas-2); }
.g-logo-zeichen { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--g-papier); color: var(--g-rahmen); }
.g-logo-zeichen svg { width: 17px; height: 17px; }
.g-logo-name { font-size: 15px; font-weight: 800; letter-spacing: .16em; }
.g-kopf-trenner { width: 1px; height: 22px; flex: none; margin: 0 4px; background: var(--g-rahmen-linie); }
.g-programme { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.g-programme::-webkit-scrollbar { display: none; }
.g-programm {
display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 10px;
border: 1px solid var(--g-rahmen-linie); border-radius: 8px; background: var(--g-rahmen-glas);
color: var(--g-rahmen-text); font-size: 13px; font-weight: 550; white-space: nowrap; text-decoration: none; cursor: pointer;
transition: background var(--g-dauer), border-color var(--g-dauer);
}
.g-programm svg { width: 15px; height: 15px; }
.g-programm:hover { background: var(--g-rahmen-glas-2); border-color: var(--g-rahmen-linie-2); }
.g-programm.g-an, .g-programm[aria-current] { background: var(--g-rahmen-glas-3); border-color: var(--g-rahmen-linie-2); }
.g-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
/* Betrieb · Antragsjahr (wie .bo-firma-sw) */
.g-kopf-schalter {
display: inline-flex; align-items: center; gap: 8px; height: 34px; max-width: 16rem; padding: 0 10px 0 4px;
border: 1px solid var(--g-rahmen-linie); border-radius: 10px; background: var(--g-rahmen-glas);
color: var(--g-rahmen-text); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.g-kopf-schalter:hover { background: var(--g-rahmen-glas-2); }
.g-kopf-schalter-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.g-kopf-schalter-text small { font-size: inherit; font-weight: 500; color: var(--g-rahmen-text-2); }
.g-kopf-schalter svg { width: 14px; height: 14px; opacity: .75; }
.g-betrieb-zeichen {
width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px;
background: var(--g-akzent); color: var(--g-text-inv); font-size: 10.5px; font-weight: 750; letter-spacing: .02em;
}
.g-kopf-suche {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 36px; height: 34px; padding: 0;
border: 1px solid var(--g-rahmen-linie); border-radius: var(--g-r-feld); background: var(--g-rahmen-glas);
color: var(--g-rahmen-text-2); font-size: 13px; white-space: nowrap; cursor: text;
}
.g-kopf-suche svg { width: 17px; height: 17px; }
.g-kopf-suche :is(span, kbd) { display: none; }
.g-kopf-suche:hover { background: var(--g-rahmen-glas-2); }
/* breites Suchfeld (z. B. TEAM) nur auf großen Bildschirmen */
@media (min-width: 1600px) {
.g-kopf-suche.g-breit { width: 15rem; padding: 0 10px 0 11px; justify-content: flex-start; }
.g-kopf-suche.g-breit :is(span, kbd) { display: inline; }
}
.g-kopf-suche kbd { margin-left: auto; padding: 2px 6px; border-radius: 5px; background: var(--g-rahmen-glas-2); font: inherit; font-size: 11px; }
.g-kopf-knopf {
position: relative; width: 36px; height: 36px; flex: none; display: grid; place-items: center;
border: 0; border-radius: 9px; background: none; color: var(--g-rahmen-text); cursor: pointer;
}
.g-kopf-knopf svg { width: 19px; height: 19px; }
.g-kopf-knopf:hover { background: var(--g-rahmen-glas-2); }
.g-kopf-knopf .g-zaehler { position: absolute; top: -1px; right: -1px; box-shadow: 0 0 0 2px var(--g-rahmen); }
/* „Flora fragen“ mit Keimling */
.g-flora-knopf {
display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px 0 4px; border-radius: var(--g-r-voll);
border: 1px solid var(--g-rahmen-linie-2); background: var(--g-rahmen-glas); color: var(--g-rahmen-text);
font: 650 13px/1 var(--g-schrift-rahmen); white-space: nowrap; cursor: pointer;
}
.g-flora-knopf:hover { background: var(--g-rahmen-glas-2); }
.g-keim { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--g-flora-verlauf); color: var(--g-text-inv); box-shadow: var(--g-flora-ring); }
.g-keim svg { width: 15px; height: 15px; }
.g-avatar {
width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%;
background: var(--g-akzent); color: var(--g-text-inv); box-shadow: 0 0 0 2px var(--g-rahmen-linie-2);
font: 650 12.5px/1 var(--g-schrift-rahmen); cursor: pointer;
}
.g-wechsel {
display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 8px;
border: 1px solid var(--g-rahmen-linie); color: var(--g-rahmen-text-2); font-size: 11.5px; font-weight: 650; letter-spacing: .08em;
text-decoration: none; white-space: nowrap;
}
.g-wechsel:hover { color: var(--g-rahmen-text); background: var(--g-rahmen-glas); }
.g-wechsel svg { width: 12px; height: 12px; }
/* schmalere Kopfleiste (alle Programme bleiben sichtbar): unter 1440 px Programme ohne Symbole,
unter 1366 px „Flora fragen“ nur als Keimling, unter 1280 px „TEAM ↗“ nur als Pfeil */
@media (max-width: 1439.98px) { .g-programm svg { display: none; } }
@media (max-width: 1365.98px) {
.g-flora-knopf { padding-right: 4px; }
.g-flora-knopf > span:not(.g-keim) { display: none; }
}
@media (max-width: 1279.98px) { .g-wechsel > span { display: none; } }
/* Zähler (Bernstein wie TEAM; ruhig als g-warn, dringend als g-alert) */
.g-zaehler {
display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--g-r-voll);
background: var(--g-zaehler); color: var(--g-zaehler-text); font: 700 10.5px/1 var(--g-schrift-rahmen); font-variant-numeric: tabular-nums;
}
.g-zaehler.g-warn { background: var(--g-warn-s); color: var(--g-warn); }
.g-zaehler.g-alert { background: var(--g-alert); color: var(--g-text-inv); }
/* Symbolleiste links (TEAM .bar): Seiten des aktiven Programms, oben „Erfassen“ */
.g-symbolleiste {
width: var(--g-symbolleiste-b); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0 8px;
background: var(--g-rahmen); color: var(--g-rahmen-text-2); font-family: var(--g-schrift-rahmen); overflow-y: auto; scrollbar-width: none;
}
.g-symbol {
position: relative; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 7px;
border: 0; border-radius: 11px; background: none; color: inherit; font-size: 11px; font-weight: 550; line-height: 1.1; text-align: center;
text-decoration: none; cursor: pointer; transition: background var(--g-dauer), color var(--g-dauer);
}
.g-symbol svg { width: 20px; height: 20px; }
.g-symbol:hover { background: var(--g-rahmen-glas); color: var(--g-rahmen-text); }
.g-symbol.g-an, .g-symbol[aria-current] { background: var(--g-rahmen-glas-2); color: var(--g-rahmen-text); }
.g-symbol.g-an::after, .g-symbol[aria-current]::after {
content: ''; position: absolute; left: -6px; top: 15px; bottom: 15px; width: 3px; border-radius: 0 3px 3px 0; background: var(--g-rahmen-hell);
}
.g-symbol .g-zaehler { position: absolute; top: 3px; right: 10px; box-shadow: 0 0 0 2px var(--g-rahmen); }
.g-symbol-trenner { width: 34px; height: 1px; margin: 4px auto 6px; background: var(--g-rahmen-linie); }
.g-symbol-unten { margin-top: auto; }
/* „Erfassen“: runder Knopf oben (wo in TEAM der Flora-Keimling sitzt) */
.g-erfassen-rund { color: var(--g-flora-hell); font-weight: 650; margin-bottom: 6px; }
.g-erfassen-rund .g-rund {
width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
background: var(--g-papier); color: var(--g-rahmen); box-shadow: var(--g-flora-ring);
}
.g-erfassen-rund .g-rund svg { width: 22px; height: 22px; }
.g-erfassen-rund:hover .g-rund { box-shadow: 0 0 0 3px var(--g-rahmen-hell); }
/* Seitenleiste hell mit Unterpunkten (Backoffice .bo-sidebar, LandLord, Verwaltung) */
.g-seitenleiste {
width: var(--g-seitenleiste-b); flex: none; padding: 10px 10px 14px; overflow-y: auto;
background: var(--g-flaeche-2); border-right: 1px solid var(--g-linie); font-size: var(--g-gr-text);
}
.g-sl-abschnitt { padding: 14px 10px 6px; font-size: var(--g-gr-versal); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--g-text-3); }
.g-sl-abschnitt:first-child { padding-top: 6px; }
.g-sl-punkt {
display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 7px 10px; margin: 1px 0;
border: 0; border-radius: 8px; background: none; color: var(--g-text); font-size: var(--g-gr-text); text-align: left; text-decoration: none; cursor: pointer;
}
.g-sl-punkt svg { width: 17px; height: 17px; color: var(--g-akzent); }
.g-sl-punkt:hover { background: var(--g-hover); }
.g-sl-punkt.g-an, .g-sl-punkt[aria-current] { background: var(--g-akzent-s); color: var(--g-akzent-d); font-weight: 600; }
.g-sl-punkt.g-an svg, .g-sl-punkt[aria-current] svg { color: var(--g-akzent-d); }
.g-sl-punkt.g-offen { font-weight: 650; }
.g-sl-punkt .g-zaehler { margin-left: auto; }
.g-sl-pfeil { margin-left: auto; width: 14px; height: 14px; color: var(--g-text-3); transition: transform var(--g-dauer); }
.g-sl-punkt .g-zaehler + .g-sl-pfeil { margin-left: 6px; }
.g-sl-punkt.g-offen .g-sl-pfeil, .g-sl-punkt[aria-expanded="true"] .g-sl-pfeil { transform: rotate(90deg); }
.g-sl-unter { position: relative; margin: 1px 0 6px 18px; padding-left: 10px; }
.g-sl-unter::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--g-linie-2); }
.g-sl-unterpunkt {
position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 31px; padding: 0 10px; margin: 1px 0;
border: 0; border-radius: 8px; background: none; color: var(--g-text-2); font-size: var(--g-gr-basis); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.g-sl-unterpunkt:hover { background: var(--g-hover); color: var(--g-text); }
.g-sl-unterpunkt.g-an, .g-sl-unterpunkt[aria-current] { background: var(--g-akzent-s); color: var(--g-akzent-d); font-weight: 600; }
.g-sl-unterpunkt.g-an::before, .g-sl-unterpunkt[aria-current]::before {
content: ''; position: absolute; left: -10.5px; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--g-akzent);
}
.g-sl-unterpunkt .g-zaehler { margin-left: auto; }
/* ── 3a · Kopfleiste 11c (1.2.2, Martin 07.11.2026): Modifikator .g-kopf-hoch — Logo · Reiter · Flora-Feld · Betrieb · AJ · Nutzer · zurück zu TEAM.
Jedes Element ist var(--g-kopf-element-h) hoch und sitzt auf derselben Mitte (align-items center, ganzzahlige Höhen). Ohne Modifikator bleibt der Kopf wie 1.2.1 (TEAM). ── */
.g-kopfleiste.g-kopf-hoch { --g-kopf-h: var(--g-kopf-h-hoch); height: var(--g-kopf-h-hoch); gap: 12px; padding: 0 14px 0 12px; }
.g-kopf-hoch > *, .g-kopf-hoch .g-kopf-rechts > * { flex: none; }
.g-kopf-hoch .g-kopf-rechts > .g-flora-feld { flex: 1 1 300px; } /* das Flora-Feld wächst mit der Breite (150–420 px) */
.g-kopf-hoch .g-logo { gap: 10px; height: var(--g-kopf-element-h); padding: 0 8px 0 0; border-radius: 10px; }
.g-kopf-hoch .g-logo-bild { width: var(--g-kopf-element-h); height: var(--g-kopf-element-h); box-sizing: border-box; padding: 3px; border-radius: 10px; background: var(--g-flaeche); box-shadow: 0 0 0 1px var(--g-rahmen-linie-2); object-fit: contain; }
.g-kopf-hoch .g-logo-name { font-size: 14px; letter-spacing: .1em; }
.g-kopf-hoch .g-programme { flex: 0 1 auto; gap: 2px; align-self: center; }
.g-kopf-hoch .g-programm { height: var(--g-kopf-element-h); box-sizing: border-box; padding: 0 11px; border: 0; border-radius: 10px; background: none; color: var(--g-rahmen-text-2); font-size: 13.5px; font-weight: 600; }
.g-kopf-hoch .g-programm svg { display: none; } /* 11c_1280 auf allen Breiten: Reiter ohne Symbole */
.g-kopf-hoch .g-programm:hover { background: var(--g-rahmen-glas); color: var(--g-rahmen-text); }
.g-kopf-hoch .g-programm.g-an, .g-kopf-hoch .g-programm[aria-current] { background: var(--g-rahmen-glas-3); color: var(--g-rahmen-text); font-weight: 700; box-shadow: inset 0 -3px 0 var(--g-rahmen-hell); }
.g-kopf-hoch .g-programm.g-kopf-letzter { position: relative; margin-left: 9px; }
.g-kopf-hoch .g-programm.g-kopf-letzter::before { content: ''; position: absolute; left: -6px; top: 10px; bottom: 10px; width: 1px; background: var(--g-rahmen-linie-2); }
.g-kopf-hoch .g-kopf-rechts { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 8px; }
.g-kopf-hoch .g-kopf-schalter { height: var(--g-kopf-element-h); box-sizing: border-box; gap: 8px; padding: 0 9px 0 5px; border-radius: 11px; font-size: 13px; }
.g-kopf-hoch .g-kopf-schalter .g-betrieb-zeichen { width: 30px; height: 30px; border-radius: 9px; background: var(--g-papier); color: var(--g-rahmen); font-size: 11.5px; font-weight: 800; }
.g-kopf-hoch .g-kopf-schalter .g-betrieb-zeichen svg { width: 16px; height: 16px; }
.g-flora-feld { display: flex; align-items: stretch; flex: 1 1 300px; min-width: var(--g-flora-feld-min); max-width: var(--g-flora-feld-max); height: var(--g-kopf-element-h); box-sizing: border-box;
border-radius: var(--g-r-voll); background: var(--g-flaeche); color: var(--g-text-2); box-shadow: 0 0 0 1px var(--g-rahmen-linie-2); overflow: hidden; }
.g-flora-feld[hidden] { display: none; }
.g-flora-feld-text { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; padding: 0 4px 0 5px; border: 0; background: none; color: inherit; font: 500 12.5px/1 var(--g-schrift-rahmen); text-align: left; cursor: text; }
.g-flora-feld-text > span:last-child { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-flora-av { position: relative; display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--g-flora-verlauf); color: var(--g-text-inv); box-shadow: var(--g-flora-ring); }
.g-flora-av svg { width: 16px; height: 16px; }
.g-flora-av i { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--g-rahmen-hell); box-shadow: 0 0 0 2px var(--g-flaeche); }
.g-flora-feld-mic { display: grid; place-items: center; width: 36px; flex: none; margin: 4px 4px 4px 0; border: 0; border-radius: var(--g-r-voll); background: none; color: var(--g-akzent-d); cursor: pointer; }
.g-flora-feld-mic:hover { background: var(--g-hover); }
.g-flora-feld-mic svg { width: 16px; height: 16px; }
.g-flora-feld :is(button):focus-visible { outline: 2px solid var(--g-fokus); outline-offset: -2px; }
.g-kopf-nutzer { display: inline-flex; align-items: center; gap: 3px; height: var(--g-kopf-element-h); box-sizing: border-box; padding: 0 6px 0 5px; border-radius: 11px; color: var(--g-rahmen-text-2); }
.g-kopf-nutzer:hover { background: var(--g-rahmen-glas-2); }
.g-kopf-nutzer .g-avatar { width: 30px; height: 30px; }
.g-kopf-nutzer > svg { width: 13px; height: 13px; }
.g-kopf-zurueck { display: inline-flex; align-items: center; gap: 8px; height: var(--g-kopf-element-h); box-sizing: border-box; padding: 0 12px 0 5px;
border: 1px solid var(--g-rahmen-linie-2); border-radius: 11px; background: var(--g-rahmen-glas); color: var(--g-rahmen-text); text-decoration: none; white-space: nowrap; }
.g-kopf-zurueck:hover { background: var(--g-rahmen-glas-2); }
.g-kopf-zurueck img { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 1px var(--g-rahmen-linie-2); }
.g-kopf-zurueck span { display: flex; flex-direction: column; font: 650 12.5px/1.05 var(--g-schrift-rahmen); letter-spacing: .06em; }
.g-kopf-zurueck small { font-size: 9.5px; font-weight: 550; letter-spacing: .02em; color: var(--g-rahmen-text-2); }
/* schmalere Schirme: zuerst enger (unter 1366 px, 11c_1280), unter 1200 px Logo ohne Schriftzug, Flora nur Zeichen + Mikrofon, „zurück zu TEAM“ nur das Symbol */
@media (max-width: 1365.98px) { .g-kopfleiste.g-kopf-hoch { gap: 10px; } .g-kopf-hoch .g-kopf-rechts { gap: 6px; } .g-kopf-hoch .g-programm { padding: 0 8px; } .g-kopf-hoch .g-kopf-zurueck { padding-right: 9px; } }
@media (max-width: 1199.98px) { .g-kopf-hoch .g-logo { padding: 0; } .g-kopf-hoch .g-logo-name { display: none; } .g-kopf-hoch .g-programm { padding: 0 7px; font-size: 13px; }
.g-kopf-hoch .g-kopf-rechts > .g-flora-feld { flex: none; min-width: 0; } .g-flora-feld-text > span:last-child { display: none; }
.g-kopf-zurueck { padding: 0 5px; } .g-kopf-zurueck span { display: none; } }
/* Seitenkopf darunter: jedes Bedienelement var(--g-seitenkopf-element-h) hoch, auf derselben Mitte */
.g-seitenkopf.g-linie-34 .g-seitenkopf-aktionen { align-items: center; }
.g-seitenkopf.g-linie-34 .g-seitenkopf-aktionen :is(.g-knopf, .g-auswahl, .g-suche, .g-chip-knopf, select, input.g-eingabe) { height: var(--g-seitenkopf-element-h); min-height: 0; box-sizing: border-box; }
.g-seitenkopf.g-linie-34 .g-seitenkopf-aktionen .g-suche .g-eingabe { height: 100%; }
/* ── 4 · Rahmen Handy und Breiten (eine App, drei Zustände ohne Geräteerkennung) ── */
/* Kompakter Kopf: Betrieb · Jahr, Suche, Glocke, Kürzel (48 px + Safe Area) */
.g-hkopf {
position: sticky; top: 0; z-index: var(--g-z-kopf);
display: flex; align-items: center; gap: 4px; box-sizing: content-box; height: var(--g-hkopf-h); min-width: 0;
padding: env(safe-area-inset-top) 8px 0 10px;
background: var(--g-rahmen); color: var(--g-rahmen-text); font-family: var(--g-schrift-rahmen); line-height: 1.2;
}
.g-hkopf-betrieb {
display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 62%; height: 2.25rem; padding: 0 10px 0 4px;
border: 1px solid var(--g-rahmen-linie); border-radius: 11px; background: var(--g-rahmen-glas);
color: var(--g-rahmen-text); font-size: .875rem; font-weight: 650; white-space: nowrap; cursor: pointer;
}
.g-hkopf-betrieb { position: relative; }
.g-hkopf-betrieb::after { content: ''; position: absolute; inset: -4px 0; } /* Trefferfläche 44 px */
.g-hkopf-betrieb .g-betrieb-zeichen { width: 1.75rem; height: 1.75rem; border-radius: 8px; font-size: .7rem; }
.g-hkopf-betrieb .g-kopf-schalter-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.g-hkopf-betrieb small { font-size: inherit; font-weight: 500; color: var(--g-rahmen-text-2); }
.g-hkopf-betrieb svg { width: 14px; height: 14px; opacity: .75; }
.g-hkopf-knopf {
position: relative; width: var(--g-tipp); height: var(--g-tipp); flex: none; display: grid; place-items: center;
border: 0; border-radius: 50%; background: none; color: var(--g-rahmen-text); cursor: pointer;
}
.g-hkopf-knopf svg { width: 21px; height: 21px; }
.g-hkopf-knopf .g-zaehler { position: absolute; top: 5px; right: 4px; box-shadow: 0 0 0 2px var(--g-rahmen); }
.g-hkopf .g-avatar { position: relative; width: 2.1rem; height: 2.1rem; margin: 0 2px 0 4px; }
.g-hkopf .g-avatar::after { content: ''; position: absolute; inset: -6px; } /* Trefferfläche 44 px */
.g-hkopf-suche {
display: none; align-items: center; gap: 8px; width: 15rem; min-width: 0; height: 2.25rem; padding: 0 12px; margin-left: 10px;
border: 1px solid var(--g-rahmen-linie); border-radius: 10px; background: var(--g-rahmen-glas); color: var(--g-rahmen-text-2); font-size: .85rem;
}
.g-hkopf-suche svg { width: 15px; height: 15px; }
/* Untere Leiste (unter 600 px): Start · Karte · Erfassen (Mitte) · Schläge · Maßnahmen */
.g-hleiste {
position: sticky; bottom: 0; z-index: var(--g-z-kopf);
display: flex; box-sizing: content-box; height: var(--g-hleiste-h); padding: 0 6px env(safe-area-inset-bottom);
background: var(--g-glas); border-top: 1px solid var(--g-linie);
-webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
font-family: var(--g-schrift-rahmen);
}
.g-htab {
position: relative; flex: 1 1 0; min-width: 0; min-height: var(--g-tipp); display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
gap: 4px; padding: 0 0 7px; border: 0; background: none; color: var(--g-text-2); font: 600 .66rem/1 var(--g-schrift-rahmen);
text-decoration: none; cursor: pointer;
}
.g-htab-symbol { position: relative; width: 2.75rem; height: 1.9rem; display: grid; place-items: center; border-radius: var(--g-r-voll); }
.g-htab-symbol svg { width: 23px; height: 23px; }
.g-htab.g-an, .g-htab[aria-current] { color: var(--g-akzent-d); }
.g-htab.g-an .g-htab-symbol, .g-htab[aria-current] .g-htab-symbol { background: var(--g-akzent-s); }
.g-htab .g-zaehler { position: absolute; top: -4px; right: 0; box-shadow: 0 0 0 2px var(--g-flaeche); }
/* „Erfassen“ als runder Knopf in der Mitte */
.g-htab.g-mitte { color: var(--g-akzent-d); font-weight: 750; }
.g-htab.g-mitte .g-htab-symbol { background: none; }
.g-htab.g-mitte .g-rund {
position: absolute; left: 50%; top: -1.5rem; width: 3.4rem; height: 3.4rem; margin-left: -1.7rem; display: grid; place-items: center;
border-radius: 50%; background: var(--g-akzent); color: var(--g-text-inv); box-shadow: 0 0 0 5px var(--g-grund), var(--g-schatten-rund);
}
.g-htab.g-mitte .g-rund svg { width: 27px; height: 27px; }
/* 600 px und breiter: untere Leiste wird zur schmalen Seitenleiste, Ziele in der Daumen-Mitte */
@media (min-width: 600px) {
.g-app > .g-hleiste {
grid-column: 1; grid-row: 2; align-self: start; position: sticky; box-sizing: border-box;
top: calc(var(--g-hkopf-h) + env(safe-area-inset-top));
width: var(--g-rail-b); height: calc(100vh - var(--g-hkopf-h)); height: calc(100dvh - var(--g-hkopf-h) - env(safe-area-inset-top));
flex-direction: column; justify-content: center; gap: 4px; padding: 8px 0 env(safe-area-inset-bottom);
background: var(--g-rahmen); border-top: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.g-app > .g-hleiste .g-htab { flex: none; height: 4.1rem; justify-content: center; color: var(--g-rahmen-text-2); }
.g-app > .g-hleiste .g-htab-symbol { width: 3rem; }
.g-app > .g-hleiste :is(.g-htab.g-an, .g-htab[aria-current]) { color: var(--g-rahmen-text); }
.g-app > .g-hleiste :is(.g-htab.g-an, .g-htab[aria-current]) .g-htab-symbol { background: var(--g-rahmen-glas-2); }
.g-app > .g-hleiste .g-zaehler { right: 6px; box-shadow: 0 0 0 2px var(--g-rahmen); }
.g-app > .g-hleiste .g-htab.g-mitte { height: 5rem; margin-bottom: 8px; color: var(--g-flora-hell); }
.g-app > .g-hleiste .g-htab.g-mitte .g-rund {
position: static; margin: 0; width: 3.1rem; height: 3.1rem; background: var(--g-papier); color: var(--g-rahmen); box-shadow: var(--g-flora-ring);
}
.g-app > .g-hleiste .g-htab.g-mitte .g-htab-symbol { height: auto; }
.g-hkopf-suche { display: flex; }
.g-hkopf .g-nur-schmal { display: none; }
}
/* unter 1200 px: Apps mit Handy-Teilen zeigen den kompakten Kopf; Inhalt in Figtree, Titel in Source Serif, Tippflächen 44 px */
@media (max-width: 1199.98px) {
.g-app:has(> .g-hkopf) {
--g-schrift: var(--g-schrift-rahmen); --g-schrift-ueberschrift: var(--g-schrift-titel);
--g-gr-klein: var(--g-gr-klein-handy); --g-gr-neben: var(--g-gr-neben-handy); --g-gr-basis: var(--g-gr-basis-handy);
--g-gr-text: var(--g-gr-text-handy); --g-gr-eingabe: var(--g-gr-eingabe-handy);
--g-feld-h: var(--g-tipp); --g-knopf-klein-h: var(--g-tipp); --g-segment-knopf-h: var(--g-tipp);
}
.g-app:has(> .g-hkopf) > :is(.g-kopfleiste, .g-symbolleiste) { display: none; }
}
/* ab 1200 px: Apps mit Desktop-Rahmen zeigen Kopfleiste und Symbolleiste */
@media (min-width: 1200px) {
.g-app:has(> .g-kopfleiste) > :is(.g-hkopf, .g-hleiste) { display: none; }
}
@media (max-width: 599.98px) {
.g-app > .g-blatt { border-top-right-radius: var(--g-r-blatt); }
}
@media (max-width: 1199.98px) { .g-nur-desktop { display: none !important; } }
@media (min-width: 1200px) { .g-nur-handy { display: none !important; } }
/* ── 5 · Seite und Navigation im Inhalt: Seitenkopf, Reiter, Segment, Filterleiste ── */
.g-seitenkopf {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; min-height: var(--g-seitenkopf-h); padding: 12px var(--g-rand);
background: var(--g-flaeche); border-bottom: 1px solid var(--g-linie);
}
.g-app > .g-blatt > .g-seitenkopf:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.g-seitenkopf-text { min-width: 0; }
.g-pfad { margin-bottom: 2px; font-size: var(--g-gr-klein); color: var(--g-text-3); }
.g-pfad b { font-weight: 500; color: var(--g-text-2); }
.g-seitentitel {
margin: 0; font-family: var(--g-schrift-ueberschrift); font-size: var(--g-gr-titel); font-weight: 650; letter-spacing: -.01em; line-height: 1.2; color: var(--g-text);
}
.g-seitentitel small { margin-left: 6px; font-family: var(--g-schrift); font-size: 1rem; font-weight: 500; color: var(--g-text-3); }
.g-seitenkopf-aktionen { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.g-seitenkopf > .g-reiter { flex: 1 0 100%; margin: 2px 0 -12px; border-bottom: 0; }
/* Reiter mit Unterstrich (im Seitenkopf, in Karten und im Detail) */
.g-reiter { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--g-linie); }
.g-reiter::-webkit-scrollbar { display: none; }
.g-reiter-knopf {
flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--g-feld-h); padding: 6px 12px 7px; margin-bottom: -1px;
border: 0; border-bottom: 2px solid transparent; background: none; color: var(--g-text-2);
font-size: var(--g-gr-basis); font-weight: 550; white-space: nowrap; text-decoration: none; cursor: pointer;
}
.g-reiter-knopf:hover { color: var(--g-text); }
.g-reiter-knopf.g-an, .g-reiter-knopf[aria-selected="true"] { color: var(--g-akzent-d); font-weight: 650; border-bottom-color: var(--g-akzent); }
/* Segment-Umschalter (Backoffice .bo-filter-tabs, 34 px) */
.g-segment {
display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; max-width: 100%; padding: 2px;
background: var(--g-flaeche); border: 1px solid var(--g-linie-2); border-radius: var(--g-r-feld);
}
.g-segment-knopf {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--g-segment-knopf-h); padding: 0 12px;
border: 0; border-radius: 7px; background: none; color: var(--g-text-2); font-size: var(--g-gr-basis); font-weight: 500; white-space: nowrap; cursor: pointer;
}
.g-segment-knopf svg { width: 15px; height: 15px; }
.g-segment-knopf:hover { background: var(--g-hover); color: var(--g-text); }
.g-segment-knopf.g-an, .g-segment-knopf[aria-pressed="true"], .g-segment-knopf[aria-selected="true"] { background: var(--g-akzent-s); color: var(--g-akzent-d); font-weight: 600; }
.g-n { font-size: var(--g-gr-klein); font-weight: 600; color: var(--g-text-3); font-variant-numeric: tabular-nums; }
:is(.g-segment-knopf, .g-reiter-knopf):is(.g-an, [aria-pressed="true"], [aria-selected="true"]) .g-n { color: var(--g-akzent-d); }
.g-n.g-warn { color: var(--g-warn); }
.g-n.g-alert { color: var(--g-alert); }
/* Filterleiste auf dem Seitengrund */
.g-filterleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px var(--g-rand) 2px; }
.g-filterleiste-rechts { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* unter 600 px: Segment in einer Zeile (wischen), Suche über die volle Breite */
@media (max-width: 599.98px) {
.g-segment { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.g-segment::-webkit-scrollbar { display: none; }
.g-segment-knopf { flex: none; }
.g-filterleiste-rechts { width: 100%; margin-left: 0; }
.g-filterleiste-rechts > .g-suche { flex: 1 1 12rem; width: auto; }
}
/* ── 6 · Karten, Hinweis, Kennzahlen, Grenzbalken ── */
.g-karte { min-width: 0; background: var(--g-flaeche); border: 1px solid var(--g-linie); border-radius: var(--g-r-karte); }
.g-karte-inhalt { padding: 16px 18px; }
.g-karte-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 14px 18px 12px; border-bottom: 1px solid var(--g-linie); }
.g-karte-titel { margin: 0; font-size: var(--g-gr-betont); font-weight: 650; color: var(--g-text); }
.g-karte-kopf small { font-size: var(--g-gr-klein); color: var(--g-text-2); }
.g-karte-kopf > .g-rechts, .g-karte-fuss > .g-rechts { margin-left: auto; }
.g-karte-fuss { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 18px 12px; border-top: 1px solid var(--g-linie); font-size: var(--g-gr-klein); color: var(--g-text-3); }
/* Prüfbox mit Zustandsstreifen */
.g-box { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 13px 15px 12px 17px; overflow: hidden;
background: var(--g-flaeche); border: 1px solid var(--g-linie); border-radius: var(--g-r-karte); }
.g-box::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--g-ok-f); }
.g-box.g-warn::before { background: var(--g-warn-f); }
.g-box.g-alert::before { background: var(--g-alert-f); }
.g-box.g-info::before { background: var(--g-info-f); }
.g-box.g-grau::before { background: var(--g-linie-2); }
.g-box-kopf { display: flex; align-items: center; gap: 8px; font-size: var(--g-gr-basis); font-weight: 650; }
.g-box-kopf .g-chip { margin-left: auto; }
.g-box p { margin: 0; font-size: var(--g-gr-neben); line-height: 1.4; color: var(--g-text-2); }
.g-box small { font-size: var(--g-gr-versal); line-height: 1.35; color: var(--g-text-3); }
/* Hinweiszeile (ocker bei Warnung) */
.g-hinweis {
display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px;
background: var(--g-flaeche); border: 1px solid var(--g-linie); font-size: var(--g-gr-neben); line-height: 1.45; color: var(--g-text-2);
}
.g-hinweis > svg { width: 16px; height: 16px; color: var(--g-akzent); }
.g-hinweis b { color: var(--g-text); }
.g-hinweis > .g-textlink, .g-hinweis > .g-knopf { margin-left: auto; white-space: nowrap; }
.g-hinweis.g-warn { background: var(--g-warn-s); border-color: var(--g-warn-r); }
.g-hinweis.g-warn > svg { color: var(--g-warn); }
.g-hinweis.g-alert { background: var(--g-alert-s); border-color: var(--g-alert-r); }
.g-hinweis.g-alert > svg { color: var(--g-alert); }
.g-hinweis.g-info { background: var(--g-info-s); border-color: var(--g-info-r); }
.g-hinweis.g-info > svg { color: var(--g-info); }
/* Kennzahlen (Redaktion r2-kpi): Symbolfeld, Zahl, Versal-Beschriftung, Zusatz; Farbe = Zustand */
.g-kpis { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.g-kpi {
position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px 16px 13px;
background: var(--g-flaeche); border: 1px solid var(--g-linie); border-radius: var(--g-r-karte);
}
.g-kpi-symbol { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--g-akzent-s); color: var(--g-akzent-d); }
.g-kpi-symbol svg { width: 17px; height: 17px; }
.g-kpi.g-warn .g-kpi-symbol { background: var(--g-warn-s); color: var(--g-warn); }
.g-kpi.g-alert .g-kpi-symbol { background: var(--g-alert-s); color: var(--g-alert); }
.g-kpi.g-info .g-kpi-symbol { background: var(--g-info-s); color: var(--g-info); }
.g-kpi.g-lila .g-kpi-symbol { background: var(--g-lila-s); color: var(--g-lila); }
.g-kpi.g-grau .g-kpi-symbol { background: var(--g-hover); color: var(--g-text-2); }
.g-kpi-text { min-width: 0; flex: 1; }
.g-kpi-wert { font-size: var(--g-gr-zahl); font-weight: 700; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--g-text); }
.g-kpi-wert small { margin-left: 2px; font-size: var(--g-gr-neben); font-weight: 500; color: var(--g-text-2); }
.g-kpi.g-ok .g-kpi-wert { color: var(--g-ok); }
.g-kpi.g-warn .g-kpi-wert { color: var(--g-warn); }
.g-kpi.g-alert .g-kpi-wert { color: var(--g-alert); }
.g-kpi.g-info .g-kpi-wert { color: var(--g-info); }
.g-kpi-titel { margin-top: 2px; font-size: var(--g-gr-versal); font-weight: 600; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; color: var(--g-text-3); }
.g-kpi-zusatz { margin-top: 5px; font-size: var(--g-gr-klein); color: var(--g-text-2); overflow-wrap: anywhere; }
.g-kpi-verlauf { position: absolute; top: 14px; right: 14px; width: 56px; height: 22px; color: var(--g-akzent); }
.g-kpi.g-warn .g-kpi-verlauf { color: var(--g-warn-f); }
.g-kpi.g-alert .g-kpi-verlauf { color: var(--g-alert-f); }
/* Mini-Kennzahl (im Detail, in Karten) */
.g-minis { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); }
.g-mini { min-width: 0; padding: 9px 12px; border-radius: 10px; background: var(--g-flaeche-2); border: 1px solid var(--g-linie); }
.g-mini b { display: block; font-size: 1rem; font-weight: 700; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-mini b small { font-size: var(--g-gr-klein); font-weight: 500; color: var(--g-text-3); }
.g-mini span { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--g-text-3); }
/* Balken mit Grenzlinie (Statistik und Prüfung wie AgrarCommander): Füllung = Wert, Linie = Grenze, Zone = Zielbereich.
Eingaben je Balken: style="--g-wert: 46%; --g-grenze: 28%" (optional --g-von/--g-bis für den Bereich) – Prozent der Skala */
.g-grenzbalken { display: grid; gap: 6px; min-width: 0; }
.g-gb-kopf { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: var(--g-gr-basis); }
.g-gb-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-gb-wert { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-grenzbalken.g-alert .g-gb-wert { color: var(--g-alert); }
.g-grenzbalken.g-warn .g-gb-wert { color: var(--g-warn); }
.g-gb-spur { position: relative; height: 10px; margin: 3px 0; border-radius: var(--g-r-voll); background: var(--g-hover); }
.g-gb-bereich { position: absolute; top: 0; bottom: 0; left: var(--g-von, 0%); width: calc(var(--g-bis, 100%) - var(--g-von, 0%)); border-radius: var(--g-r-voll); background: var(--g-akzent-s); }
.g-gb-fuellung { position: absolute; left: 0; top: 0; bottom: 0; width: clamp(0%, var(--g-wert, 0%), 100%); border-radius: var(--g-r-voll); background: var(--g-ok-f); }
.g-grenzbalken.g-warn .g-gb-fuellung { background: var(--g-warn-f); }
.g-grenzbalken.g-alert .g-gb-fuellung { background: var(--g-alert-f); }
.g-gb-grenze { position: absolute; top: -5px; bottom: -5px; left: var(--g-grenze, 0%); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--g-text); }
.g-gb-grenze.g-zwei { left: var(--g-grenze-2, 100%); }
.g-gb-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--g-gr-klein); color: var(--g-text-2); }
/* ── 7 · Tabelle (Karte, feste Kopfzeile, Zahlen tabellarisch, Gruppen- und Summenzeile, gewählte Zeile) ── */
.g-tabelle-rahmen {
max-width: 100%; max-height: var(--g-tabelle-max-h, none); overflow: auto; overscroll-behavior-x: contain;
background: var(--g-flaeche); border: 1px solid var(--g-linie); border-radius: var(--g-r-karte);
}
.g-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--g-gr-basis); font-variant-numeric: tabular-nums; }
.g-tabelle th {
position: sticky; top: 0; z-index: 1; height: var(--g-tabellenkopf-h); padding: 0 14px; text-align: left; white-space: nowrap; vertical-align: middle;
background: var(--g-flaeche-2); border-bottom: 1px solid var(--g-linie); font-size: var(--g-gr-klein); font-weight: 600; color: var(--g-text-2);
}
.g-tabelle td { padding: 11px 14px; border-bottom: 1px solid var(--g-linie); vertical-align: middle; color: var(--g-text); }
.g-tabelle tbody tr:last-child td { border-bottom: 0; }
.g-tabelle tbody tr:hover td { background: var(--g-flaeche-2); }
.g-tabelle :is(th, td).g-zahl { text-align: right; white-space: nowrap; }
.g-tabelle td small { display: block; margin-top: 1px; font-size: var(--g-gr-klein); color: var(--g-text-3); }
.g-tabelle td.g-name { font-weight: 600; white-space: nowrap; }
.g-tabelle td.g-aktionen { width: 1%; white-space: nowrap; text-align: right; }
.g-tabelle tr.g-gruppe td { padding-top: 8px; padding-bottom: 8px; background: var(--g-flaeche-2); font-size: var(--g-gr-neben); color: var(--g-text-2); }
.g-tabelle tr.g-gruppe td b { margin-right: 8px; font-weight: 650; color: var(--g-text); }
.g-tabelle tr.g-summe td { background: var(--g-flaeche-2); border-top: 1px solid var(--g-linie-2); font-weight: 650; }
.g-tabelle tr.g-gewaehlt td, .g-tabelle tr[aria-selected="true"] td { background: var(--g-akzent-s); }
.g-tabelle tr.g-gewaehlt td:first-child, .g-tabelle tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--g-akzent); }
.g-tabelle tr.g-beendet td { color: var(--g-text-3); }
.g-tabelle tr.g-klickbar { cursor: pointer; }
/* ── 8 · Kennzeichen: Chip, Status, Code, Kultur, Ampel ── */
.g-chip {
display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--g-r-voll); vertical-align: middle;
background: var(--g-hover); color: var(--g-text-2); font-size: 11.5px; font-weight: 650; line-height: 1; white-space: nowrap;
}
.g-chip svg { width: 12px; height: 12px; }
.g-chip.g-ok { background: var(--g-ok-s); color: var(--g-ok); }
.g-chip.g-warn { background: var(--g-warn-s); color: var(--g-warn); }
.g-chip.g-alert { background: var(--g-alert-s); color: var(--g-alert); }
.g-chip.g-info { background: var(--g-info-s); color: var(--g-info); }
.g-chip.g-lila { background: var(--g-lila-s); color: var(--g-lila); }
.g-chip.g-akzent { background: var(--g-akzent-s); color: var(--g-akzent-d); }
.g-chip.g-rand { background: var(--g-flaeche); border: 1px solid var(--g-linie-2); font-weight: 550; }
.g-chip.g-klein { height: 20px; padding: 0 8px; font-size: 11px; }
/* Status mit Punkt (offen = g-warn, bezahlt/aktiv = g-ok, überfällig = g-alert, abgerechnet = g-info, Entwurf/beendet = ohne, storniert = g-durch) */
.g-status {
display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: var(--g-r-voll); vertical-align: middle;
background: var(--g-hover); color: var(--g-text-2); font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.g-status::before { content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--g-text-3); }
.g-status.g-ok { background: var(--g-ok-s); color: var(--g-ok); }
.g-status.g-ok::before { background: var(--g-ok); }
.g-status.g-warn { background: var(--g-warn-s); color: var(--g-warn); }
.g-status.g-warn::before { background: var(--g-warn-f); }
.g-status.g-alert { background: var(--g-alert-s); color: var(--g-alert); }
.g-status.g-alert::before { background: var(--g-alert); }
.g-status.g-info { background: var(--g-info-s); color: var(--g-info); }
.g-status.g-info::before { background: var(--g-info-f); }
.g-status.g-durch { color: var(--g-text-3); text-decoration: line-through; }
/* AMA- und ÖPUL-Codes in Festbreitenschrift */
.g-code {
display: inline-flex; align-items: center; height: 19px; padding: 0 6px; border-radius: 5px; vertical-align: middle;
background: var(--g-flaeche-2); border: 1px solid var(--g-linie-2); color: var(--g-text-2); font: 600 10.5px/1 var(--g-schrift-mono); white-space: nowrap;
}
.g-codes { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.g-tabelle .g-codes { flex-wrap: nowrap; }
/* Kultur mit fester Farbe: Winterweizen (Punkt + Name; 1.2.0: runder Punkt mit Muster der Familie) */
.g-kultur { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.g-kultur::before { content: ''; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--g-kf, var(--g-kultur-sonstige)); background-image: var(--g-kf-muster, none); background-size: var(--g-kf-muster-gr, auto); box-shadow: inset 0 0 0 1px var(--g-muster-dunkel); }
/* Kultur-Klassen 1.2.0: Farbe (--g-kf), Schrift auf voller Farbe (--g-kf-text, je der bessere Kontrast) und Muster der Familie (--g-kf-muster) */
.g-kf-weizen { --g-kf: var(--g-kultur-weizen); --g-kf-text: var(--g-text); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-gold); }
.g-kf-durum { --g-kf: var(--g-kultur-durum); --g-kf-text: var(--g-text-inv); --g-kf-d: var(--g-tondunkel-oliv); } /* 1.2.1: eigener Ton, kein Muster */
.g-kf-dinkel { --g-kf: var(--g-kultur-dinkel); --g-kf-text: var(--g-text-inv); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-braun); }
.g-kf-roggen { --g-kf: var(--g-kultur-roggen); --g-kf-text: var(--g-text-inv); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-blau); }
.g-kf-triticale { --g-kf: var(--g-kultur-triticale); --g-kf-text: var(--g-text); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-rosa); }
.g-kf-gerste { --g-kf: var(--g-kultur-gerste); --g-kf-text: var(--g-text); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-tuerkis); }
.g-kf-braugerste { --g-kf: var(--g-kultur-braugerste); --g-kf-text: var(--g-text); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-tuerkis); }
.g-kf-hafer { --g-kf: var(--g-kultur-hafer); --g-kf-text: var(--g-text); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-beige); }
.g-kf-mais { --g-kf: var(--g-kultur-mais); --g-kf-text: var(--g-text); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-orange); }
.g-kf-sorghum { --g-kf: var(--g-kultur-sorghum); --g-kf-text: var(--g-text-inv); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-rot); }
.g-kf-zuckerruebe { --g-kf: var(--g-kultur-zuckerruebe); --g-kf-text: var(--g-text-inv); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-violett); }
.g-kf-sonnenblume { --g-kf: var(--g-kultur-sonnenblume); --g-kf-text: var(--g-text); --g-kf-muster: radial-gradient(circle, var(--g-muster-dunkel) 0 1px, transparent 1.3px); --g-kf-muster-gr: 4px 4px; --g-kf-d: var(--g-tondunkel-gelb); }
.g-kf-raps { --g-kf: var(--g-kultur-raps); --g-kf-text: var(--g-text); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-gelb); }
.g-kf-senf { --g-kf: var(--g-kultur-senf); --g-kf-text: var(--g-text-inv); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-indigo); }
.g-kf-soja { --g-kf: var(--g-kultur-soja); --g-kf-text: var(--g-text); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-hellblau); }
.g-kf-erbse { --g-kf: var(--g-kultur-erbse); --g-kf-text: var(--g-text); --g-kf-muster: repeating-linear-gradient(135deg, transparent 0 2.5px, var(--g-muster-dunkel) 2.5px 4.5px); --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-hellblau); }
.g-kf-kuerbis { --g-kf: var(--g-kultur-kuerbis); --g-kf-text: var(--g-text-inv); --g-kf-muster: repeating-linear-gradient(135deg, transparent 0 2.5px, var(--g-muster-hell) 2.5px 4.5px); --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-rot); }
.g-kf-kartoffel { --g-kf: var(--g-kultur-kartoffel); --g-kf-text: var(--g-text-inv); --g-kf-muster: repeating-linear-gradient(135deg, transparent 0 2.5px, var(--g-muster-hell) 2.5px 4.5px); --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-braun); }
.g-kf-feldfutter { --g-kf: var(--g-kultur-feldfutter); --g-kf-text: var(--g-text-inv); --g-kf-muster: repeating-linear-gradient(135deg, transparent 0 2.5px, var(--g-muster-hell) 2.5px 4.5px); --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-gruen); }
.g-kf-gruenland { --g-kf: var(--g-kultur-gruenland); --g-kf-text: var(--g-text-inv); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-gruen); }
.g-kf-begruenung { --g-kf: var(--g-kultur-begruenung); --g-kf-text: var(--g-text); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-mint); }
.g-kf-brache { --g-kf: var(--g-kultur-brache); --g-kf-text: var(--g-text); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-hellgruen); }
.g-kf-sonder { --g-kf: var(--g-kultur-sonder); --g-kf-text: var(--g-text-inv); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-weinrot); }
.g-kf-sonstige { --g-kf: var(--g-kultur-sonstige); --g-kf-text: var(--g-text); --g-kf-muster: none; --g-kf-muster-gr: auto; --g-kf-d: var(--g-tondunkel-grau); }
.g-kf-unbekannt { --g-kf: var(--g-platzhalter-s); --g-kf-text: var(--g-text-3); --g-kf-muster: repeating-linear-gradient(135deg, transparent 0 2.5px, var(--g-platzhalter) 2.5px 3.5px); --g-kf-muster-gr: auto; }
/* Kultur-Pille 1.2.2 (Martin 07.11.2026: „B + D kombiniert“, Bild 12) — B „weich getönt“: Pille in 14 % der Kulturfarbe, Kürzel in der dunklen Abwandlung
(--g-kf-d, ≥ 4,8 : 1), ohne Rand, ohne Punkt, ohne Muster. Überall, wo die Kultur in Zeile, Zelle, Text oder Legende steht (Tabelle, Schlagleiste, Journal, Kachel).
Erzeugen mit gKulturChip(name) bzw. gKulturName(name) aus kulturen.js: WW
C „kräftiges Feld“ nur in der Kartenlegende (sieht aus wie die Fläche): .g-kk.g-kraeftig bzw. Behälter .g-legende-kraeftig (Schrift --g-kf-text ≥ 4,5 : 1).
D „Farbkante“ an ganzen Zeilen und Kacheln: .g-kante (3 px links), Schlagleiste-Gruppenzeilen, Kultur-Kacheln, Journal-Zeilen. */
.g-kk {
--g-kk-f: var(--g-kf, var(--g-kultur-sonstige));
display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; height: 20px; min-width: 28px; padding: 0 7px;
border-radius: var(--g-r-voll); vertical-align: middle; background: color-mix(in srgb, var(--g-kk-f) var(--g-kk-ton), var(--g-flaeche)); background-image: none;
box-shadow: none; color: var(--g-kf-d, var(--g-text));
font: 750 10.5px/1 var(--g-schrift-rahmen); letter-spacing: .04em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.g-kk.g-gross { height: 26px; min-width: 40px; padding: 0 9px; font-size: 12px; }
.g-kk.g-nur-punkt { min-width: 0; width: 12px; height: 12px; padding: 0; border-radius: 50%; background: var(--g-kk-f); font-size: 0; letter-spacing: 0; }
.g-kk.g-unbekannt { color: var(--g-text-3); background: var(--g-flaeche-2); box-shadow: inset 0 0 0 1px var(--g-linie-2); }
.g-kk.g-kraeftig, .g-legende-kraeftig .g-kk { background: var(--g-kk-f); color: var(--g-kf-text, var(--g-text)); }
.g-kk.g-kraeftig.g-unbekannt, .g-legende-kraeftig .g-kk.g-unbekannt { background: var(--g-platzhalter-s); color: var(--g-text-3); }
.g-kante { box-shadow: inset 3px 0 0 var(--g-kf, var(--g-kultur-sonstige)); }
.g-kante:where(tr) { box-shadow: none; }
.g-kante:where(tr) > :first-child { box-shadow: inset 3px 0 0 var(--g-kf, var(--g-kultur-sonstige)); }
/* Chip + Kulturname: der Name wird NIE gekürzt und nie im Wort getrennt (Martin 05.11.). Passt er nicht neben die Pille, bricht er als ganzes Wort
in die nächste Zeile (Pille bleibt vorn). Regel G1 Runde 2 (M5); ganzer Name zusätzlich im title. */
.g-kulturname { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; max-width: 100%; white-space: normal; hyphens: manual; }
.g-kulturname > span:last-child { white-space: normal; overflow-wrap: normal; word-break: keep-all; hyphens: manual; }
.g-tabelle.g-dicht td .g-kulturname { vertical-align: middle; }
.g-abgeleitet { color: var(--g-text-3); font-weight: 700; margin-right: -3px; }
/* Ampel (Düngeplaner, FieldWatch, Wartung) */
.g-ampel { display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 50%; vertical-align: middle; background: var(--g-linie-2); }
.g-ampel.g-ok { background: var(--g-ok-f); box-shadow: 0 0 0 3px var(--g-ok-s); }
.g-ampel.g-warn { background: var(--g-warn-f); box-shadow: 0 0 0 3px var(--g-warn-s); }
.g-ampel.g-alert { background: var(--g-alert-f); box-shadow: 0 0 0 3px var(--g-alert-s); }
/* ── 9 · Warnsymbol mit Anzahl, Popover, Befund, Sammelzeile ── */
/* je Schlag: offene Warnungen ocker (g-warn) oder rot (g-alert) mit Anzahl; nur bestätigte bzw. Hinweise dezent grau (g-grau); kein Befund = nichts */
.g-warnzahl {
display: inline-flex; align-items: center; gap: 4px; height: 24px; min-width: 24px; padding: 0 8px 0 6px; border: 1px solid transparent; border-radius: var(--g-r-voll);
background: var(--g-warn-s); color: var(--g-warn); font-size: var(--g-gr-klein); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
vertical-align: middle; cursor: pointer;
}
.g-warnzahl::before {
content: ''; width: 14px; height: 14px; flex: none; background: currentColor;
-webkit-mask: var(--g-ic-warn) center / contain no-repeat; mask: var(--g-ic-warn) center / contain no-repeat;
}
.g-warnzahl { position: relative; }
.g-warnzahl::after { content: ''; position: absolute; inset: -10px -6px; } /* Trefferfläche 44 px, sichtbar 24 px */
.g-warnzahl:hover, .g-warnzahl[aria-expanded="true"] { border-color: var(--g-warn-r); }
.g-warnzahl.g-alert { background: var(--g-alert-s); color: var(--g-alert); }
.g-warnzahl.g-alert:hover, .g-warnzahl.g-alert[aria-expanded="true"] { border-color: var(--g-alert-r); }
.g-warnzahl.g-grau { background: none; color: var(--g-text-3); padding: 0 5px; }
.g-warnzahl.g-grau::before { -webkit-mask-image: var(--g-ic-info); mask-image: var(--g-ic-info); }
.g-warnzahl.g-grau:hover, .g-warnzahl.g-grau[aria-expanded="true"] { border-color: var(--g-linie-2); color: var(--g-text-2); }
/* Popover am Anker (ohne Scroll-Behälter dazwischen); in Tabellen mit Scroll-Rahmen besser als [popover] mit fester Lage (LIESMICH) */
.g-pop-anker { position: relative; display: inline-flex; vertical-align: middle; }
.g-popover {
position: absolute; z-index: var(--g-z-popover); top: calc(100% + 6px); left: -8px; width: min(23rem, calc(100vw - 2rem));
padding: 4px 0; background: var(--g-flaeche); border: 1px solid var(--g-linie); border-radius: var(--g-r-karte); box-shadow: var(--g-schatten-pop);
color: var(--g-text); font-size: var(--g-gr-neben); line-height: 1.45; text-align: left; white-space: normal;
}
.g-popover[hidden] { display: none; }
.g-popover.g-rechts { left: auto; right: -8px; }
.g-popover[popover] { position: fixed; inset: auto; top: var(--g-pop-y, 20%); left: var(--g-pop-x, 1rem); margin: 0; }
/* unter 600 px: als Blatt über der unteren Leiste (volle Breite, nie über den Rand) */
@media (max-width: 599.98px) {
.g-popover, .g-popover[popover] {
position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(var(--g-hleiste-h) + 12px + env(safe-area-inset-bottom));
width: auto; max-height: 60vh; max-height: 60dvh; overflow-y: auto;
}
}
.g-popover-kopf { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; font-size: var(--g-gr-basis); font-weight: 650; }
.g-popover-kopf small { margin-left: auto; font-weight: 500; color: var(--g-text-3); }
.g-befund { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 8px; padding: 9px 12px; border-top: 1px solid var(--g-linie); }
.g-befund-symbol { grid-row: span 3; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--g-warn-s); color: var(--g-warn); }
.g-befund-symbol::before { content: ''; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--g-ic-warn) center / contain no-repeat; mask: var(--g-ic-warn) center / contain no-repeat; }
.g-befund.g-alert .g-befund-symbol { background: var(--g-alert-s); color: var(--g-alert); }
.g-befund.g-grau .g-befund-symbol { background: var(--g-hover); color: var(--g-text-2); }
.g-befund.g-grau .g-befund-symbol::before { -webkit-mask-image: var(--g-ic-haken); mask-image: var(--g-ic-haken); }
.g-befund-regel { font-weight: 650; color: var(--g-text); }
.g-befund-text { margin: 0; color: var(--g-text-2); }
.g-befund-meta { font-size: var(--g-gr-klein); color: var(--g-text-3); }
.g-befund-aktionen { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Sammelzeile: eine Zeile je Betrieb statt je Acker („Düngung: 5 Warnungen (3 Ist, 2 Prognose)“, „n Hinweise ▸“) */
.g-sammelzeile {
display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 9px 14px;
border: 1px solid var(--g-linie); border-radius: var(--g-r-karte); background: var(--g-flaeche);
color: var(--g-text); font-size: var(--g-gr-basis); text-align: left; text-decoration: none; cursor: pointer;
}
.g-sammelzeile:hover { border-color: var(--g-linie-2); background: var(--g-flaeche-2); }
.g-sz-symbol { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--g-akzent-s); color: var(--g-akzent-d); }
.g-sz-symbol svg { width: 16px; height: 16px; }
.g-sammelzeile.g-warn .g-sz-symbol { background: var(--g-warn-s); color: var(--g-warn); }
.g-sammelzeile.g-alert .g-sz-symbol { background: var(--g-alert-s); color: var(--g-alert); }
.g-sammelzeile.g-info .g-sz-symbol { background: var(--g-info-s); color: var(--g-info); }
.g-sz-text { flex: 1; min-width: 0; }
.g-sz-text b { display: block; font-weight: 650; }
.g-sz-text small { display: block; margin-top: 1px; font-size: var(--g-gr-klein); color: var(--g-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-sz-pfeil { width: 16px; height: 16px; flex: none; color: var(--g-text-3); }
.g-sammelzeile.g-leise { min-height: max(2.5rem, var(--g-feld-h)); border-style: dashed; background: none; color: var(--g-text-2); }
.g-sammelzeile.g-leise:hover { background: var(--g-flaeche); }
.g-sammelzeile[aria-expanded="true"] .g-sz-pfeil { transform: rotate(90deg); }
/* ── 10 · Knöpfe, Textlink, Felder, Auswahl, Suche, Schalter ── */
.g-knopf {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--g-feld-h); padding: 0 14px;
border: 1px solid var(--g-linie-2); border-radius: var(--g-r-feld); background: var(--g-flaeche); color: var(--g-text);
font-size: var(--g-gr-basis); font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer;
transition: background var(--g-dauer), border-color var(--g-dauer), color var(--g-dauer);
}
.g-knopf svg { width: 15px; height: 15px; }
.g-knopf:hover:not(:disabled) { border-color: var(--g-text-3); }
.g-knopf.g-primaer { background: var(--g-akzent); border-color: var(--g-akzent); color: var(--g-text-inv); font-weight: 600; }
.g-knopf.g-primaer:hover:not(:disabled) { background: var(--g-akzent-d); border-color: var(--g-akzent-d); }
.g-knopf.g-ton { background: var(--g-akzent-s); border-color: transparent; color: var(--g-akzent-d); font-weight: 600; }
.g-knopf.g-ton:hover:not(:disabled) { background: var(--g-akzent); border-color: var(--g-akzent); color: var(--g-text-inv); }
.g-knopf.g-leise { background: none; border-color: transparent; color: var(--g-text-2); }
.g-knopf.g-leise:hover:not(:disabled) { background: var(--g-hover); border-color: transparent; color: var(--g-text); }
/* Löschen, Beenden, Abmelden: ruhig, rot erst beim Zeigen; als Bestätigung im Fenster g-gefahr g-primaer */
.g-knopf.g-gefahr { color: var(--g-alert); }
.g-knopf.g-gefahr:hover:not(:disabled) { background: var(--g-alert-s); border-color: var(--g-alert-r); }
.g-knopf.g-gefahr.g-primaer { background: var(--g-alert); border-color: var(--g-alert); color: var(--g-text-inv); }
.g-knopf.g-gefahr.g-primaer:hover:not(:disabled) { background: var(--g-alert); border-color: var(--g-alert); box-shadow: 0 0 0 3px var(--g-alert-s); }
.g-knopf.g-klein { min-height: var(--g-knopf-klein-h); padding: 0 10px; gap: 5px; border-radius: 8px; font-size: var(--g-gr-neben); }
.g-knopf.g-klein svg { width: 14px; height: 14px; }
.g-knopf.g-symbolknopf { width: var(--g-feld-h); padding: 0; }
.g-knopf.g-klein.g-symbolknopf { width: var(--g-knopf-klein-h); }
.g-knopf.g-breit { width: 100%; }
.g-knopf:disabled, .g-knopf[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.g-textlink {
display: inline; padding: 0; border: 0; background: none; color: var(--g-akzent-d);
font-size: var(--g-gr-neben); font-weight: 600; text-decoration: none; cursor: pointer;
}
.g-textlink:hover { text-decoration: underline; }
/* Felder */
.g-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.g-feld-titel { font-size: var(--g-gr-neben); font-weight: 550; color: var(--g-text-2); }
.g-feld-titel small { font-weight: 500; color: var(--g-text-3); }
.g-feld-hinweis { font-size: var(--g-gr-klein); line-height: 1.45; color: var(--g-text-3); }
.g-feld-fehler { font-size: var(--g-gr-klein); font-weight: 600; color: var(--g-alert); }
.g-felder { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.g-eingabe, .g-auswahl {
width: 100%; min-width: 0; height: var(--g-feld-h); padding: 0 11px; margin: 0;
border: 1px solid var(--g-linie-2); border-radius: var(--g-r-feld); background-color: var(--g-flaeche); color: var(--g-text);
font-size: var(--g-gr-eingabe); line-height: 1.3; transition: border-color var(--g-dauer), box-shadow var(--g-dauer);
}
textarea.g-eingabe { height: auto; min-height: 4.5rem; padding: 9px 11px; line-height: 1.45; resize: vertical; }
.g-eingabe::placeholder { color: var(--g-text-3); opacity: 1; }
.g-eingabe:hover, .g-auswahl:hover { border-color: var(--g-text-3); }
.g-eingabe:focus, .g-auswahl:focus { outline: 0; border-color: var(--g-akzent); box-shadow: 0 0 0 3px var(--g-akzent-s); }
.g-eingabe[readonly] { background-color: var(--g-flaeche-2); color: var(--g-text-2); }
.g-eingabe.g-zahl { text-align: right; }
.g-feld.g-fehler :is(.g-eingabe, .g-auswahl), .g-eingabe[aria-invalid="true"] { border-color: var(--g-alert); }
.g-feld.g-fehler :is(.g-eingabe, .g-auswahl):focus, .g-eingabe[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--g-alert-s); }
.g-auswahl {
padding-right: 32px; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; cursor: pointer;
background-image: var(--g-ic-pfeil-runter); background-repeat: no-repeat; background-position: right 10px center; background-size: 13px;
}
/* Eingabe mit Einheit: kg N/ha */
.g-einheit-feld { position: relative; display: flex; align-items: center; min-width: 0; }
.g-einheit-feld > .g-eingabe { padding-right: 4.75rem; }
.g-einheit-feld > span { position: absolute; right: 11px; font-size: var(--g-gr-klein); color: var(--g-text-3); pointer-events: none; }
/* Suche mit Lupe */
.g-suche { position: relative; display: flex; align-items: center; width: 15rem; max-width: 100%; min-width: 0; }
.g-suche::before {
content: ''; position: absolute; left: 11px; width: 15px; height: 15px; background: var(--g-text-3); pointer-events: none;
-webkit-mask: var(--g-ic-lupe) center / contain no-repeat; mask: var(--g-ic-lupe) center / contain no-repeat;
}
.g-suche > .g-eingabe { padding-left: 34px; }
.g-suche.g-breit { width: 100%; }
/* Schalter (an/aus) und Häkchen */
.g-schalter {
-webkit-appearance: none; appearance: none; position: relative; flex: none; width: 42px; height: 24px; margin: 0;
border: 0; border-radius: var(--g-r-voll); background: var(--g-schalter-aus); cursor: pointer; transition: background var(--g-dauer);
}
.g-schalter::after {
content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
background: var(--g-flaeche); box-shadow: var(--g-schatten-knauf); transition: transform var(--g-dauer);
}
.g-schalter:checked, .g-schalter[aria-checked="true"] { background: var(--g-akzent); }
.g-schalter:checked::after, .g-schalter[aria-checked="true"]::after { transform: translateX(18px); }
.g-schalter:disabled { opacity: .45; cursor: not-allowed; }
.g-haken { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--g-akzent); cursor: pointer; }
.g-wahlzeile {
display: flex; align-items: center; gap: 10px; min-height: var(--g-feld-h); padding: 4px 0;
font-size: var(--g-gr-text); color: var(--g-text); cursor: pointer;
}
.g-wahlzeile small { display: block; font-size: var(--g-gr-klein); color: var(--g-text-3); }
.g-wahlzeile > .g-schalter { margin-left: auto; }
/* ── 11 · Seitenfenster rechts, Fenster (Modal), Blatt von unten ── */
/* Seitenfenster (wie Redaktions-Einstellungen #red-dr .r2-drawer, 600 px): Kopf mit Kennzeichen, Sprungmarken, Gruppen, Fuß mit „Beenden“ statt Löschen */
.g-seitenfenster { position: fixed; inset: 0; z-index: var(--g-z-seitenfenster); }
.g-seitenfenster[hidden] { display: none; }
.g-seitenfenster.g-unter-kopf { top: var(--g-kopf-h); } /* Kopf- und Symbolleiste bleiben frei */
.g-schleier { position: absolute; inset: 0; background: var(--g-schleier); }
.g-sf {
position: absolute; top: 0; right: 0; bottom: 0; width: min(var(--g-seitenfenster-b), 100%);
display: flex; flex-direction: column; background: var(--g-grund); box-shadow: var(--g-schatten-seite);
container: g-sf / inline-size; animation: g-rein var(--g-dauer-lang) ease;
}
@keyframes g-rein { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.g-sf-kopf {
flex: none; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px 10px 22px; padding-top: max(10px, env(safe-area-inset-top));
background: var(--g-flaeche); border-bottom: 1px solid var(--g-linie);
}
.g-sf-titel { margin: 0; font-family: var(--g-schrift-ueberschrift); font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.g-sf-kopf p { margin: 2px 0 0; font-size: var(--g-gr-neben); color: var(--g-text-2); }
.g-sf-kopf .g-codes { margin-top: 5px; }
.g-sf-kopf-text { min-width: 0; }
.g-sf-knoepfe { margin-left: auto; display: flex; gap: 6px; flex: none; }
.g-sf-index { flex: none; display: flex; gap: 6px; padding: 10px 22px; overflow-x: auto; scrollbar-width: none; background: var(--g-flaeche); border-bottom: 1px solid var(--g-linie); }
.g-sf-index::-webkit-scrollbar { display: none; }
.g-sf-marke {
flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--g-r-voll);
border: 1px solid var(--g-linie-2); background: var(--g-flaeche); color: var(--g-text-2); font-size: var(--g-gr-neben); font-weight: 550; text-decoration: none; cursor: pointer;
}
.g-sf-marke { position: relative; }
.g-sf-marke::after { content: ''; position: absolute; inset: -8px -3px; } /* Trefferfläche 44 px */
.g-sf-marke:hover { border-color: var(--g-text-3); color: var(--g-text); }
.g-sf-marke.g-an, .g-sf-marke[aria-current] { background: var(--g-akzent-s); border-color: transparent; color: var(--g-akzent-d); font-weight: 650; }
.g-sf-marke i { width: 7px; height: 7px; border-radius: 50%; background: var(--g-warn-f); }
.g-sf-inhalt { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 22px 24px; display: flex; flex-direction: column; gap: 12px; scroll-padding-top: 12px; }
.g-sf-fuss {
flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 22px; padding-bottom: max(12px, env(safe-area-inset-bottom));
background: var(--g-flaeche); border-top: 1px solid var(--g-linie); box-shadow: var(--g-schatten-fuss);
}
.g-sf-fuss > .g-links { margin-right: auto; font-size: var(--g-gr-klein); color: var(--g-text-2); }
/* aufklappbare Gruppe (details/summary) und Zeile Name | Wert */
.g-gruppe { background: var(--g-flaeche); border: 1px solid var(--g-linie); border-radius: var(--g-r-karte); scroll-margin-top: 12px; }
.g-gruppe-kopf { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--g-r-karte); cursor: pointer; }
.g-gruppe-kopf::-webkit-details-marker { display: none; }
.g-gruppe-kopf:hover { background: var(--g-flaeche-2); }
.g-gruppe[open] > .g-gruppe-kopf { border-bottom: 1px solid var(--g-linie); border-radius: var(--g-r-karte) var(--g-r-karte) 0 0; }
.g-gruppe-symbol { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--g-akzent-s); color: var(--g-akzent-d); }
.g-gruppe-symbol svg { width: 16px; height: 16px; }
.g-gruppe.g-warn .g-gruppe-symbol { background: var(--g-warn-s); color: var(--g-warn); }
.g-gruppe-titel { flex: 1; min-width: 0; }
.g-gruppe-titel b { display: block; font-size: var(--g-gr-betont); font-weight: 650; }
.g-gruppe-titel small { display: block; margin-top: 1px; font-size: var(--g-gr-klein); color: var(--g-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-gruppe[open] .g-gruppe-titel small { display: none; }
.g-gruppe-pfeil { width: 16px; height: 16px; flex: none; color: var(--g-text-3); transition: transform var(--g-dauer); }
.g-gruppe[open] .g-gruppe-pfeil { transform: rotate(180deg); }
.g-gruppe-inhalt { padding: 6px 16px 14px; }
.g-zeile { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--g-linie); }
.g-zeile:first-child { border-top: 0; }
.g-zeile-titel { font-size: var(--g-gr-basis); font-weight: 600; color: var(--g-text); }
.g-zeile-titel small { display: block; margin-top: 1px; font-size: var(--g-gr-klein); font-weight: 500; color: var(--g-text-3); }
.g-zeile-wert { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; font-size: var(--g-gr-basis); }
.g-zeile-wert small { font-size: var(--g-gr-klein); color: var(--g-text-3); }
@container g-sf (max-width: 30rem) {
.g-zeile { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.g-sf-kopf { padding-left: 16px; }
.g-sf-inhalt, .g-sf-index, .g-sf-fuss { padding-left: 14px; padding-right: 14px; }
.g-sf-fuss > .g-links { flex-basis: 100%; }
.g-sf-fuss > .g-knopf { flex: 1; }
}
/* Fenster (mittig, 14 px Ecken) – Rückfragen, kurze Formulare */
.g-fenster-schleier { position: fixed; inset: 0; z-index: var(--g-z-fenster); display: grid; place-items: center; padding: 16px; background: var(--g-schleier); }
.g-fenster-schleier[hidden] { display: none; }
.g-fenster {
display: flex; flex-direction: column; width: min(30rem, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden;
background: var(--g-flaeche); border: 1px solid var(--g-linie); border-radius: var(--g-r-fenster); box-shadow: var(--g-schatten-pop);
}
.g-fenster.g-breit { width: min(45rem, 100%); }
.g-fenster-kopf { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 14px 14px 24px; border-bottom: 1px solid var(--g-linie); }
.g-fenster-titel { flex: 1; min-width: 0; margin: 0; font-family: var(--g-schrift-ueberschrift); font-size: var(--g-gr-fenster); font-weight: 650; letter-spacing: -.005em; }
.g-fenster-inhalt { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 20px; font-size: var(--g-gr-basis); line-height: 1.5; color: var(--g-text-2); }
.g-fenster-inhalt p { margin: 0 0 8px; }
.g-fenster-fuss { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--g-linie); }
.g-fenster.g-frage .g-fenster-kopf { border-bottom: 0; padding-bottom: 4px; }
.g-fenster.g-frage .g-fenster-fuss { border-top: 0; padding-top: 4px; }
/* Blatt von unten (Handy: Erfassen, Betrieb · Jahr); ab 600 px mittig wie ein Fenster */
.g-blatt-unten {
position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--g-z-fenster); display: flex; flex-direction: column;
max-height: 88vh; max-height: 88dvh; background: var(--g-grund); border-radius: var(--g-r-blatt) var(--g-r-blatt) 0 0; box-shadow: var(--g-schatten-blatt);
padding-bottom: env(safe-area-inset-bottom);
}
.g-blatt-unten[hidden] { display: none; }
.g-blatt-griff { flex: none; width: 40px; height: 5px; margin: 8px auto 4px; border-radius: 3px; background: var(--g-linie-2); }
.g-blatt-kopf { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 6px 16px 12px; }
.g-blatt-titel { margin: 0; font-family: var(--g-schrift-ueberschrift); font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.g-blatt-kopf p { margin: 3px 0 0; font-size: var(--g-gr-neben); color: var(--g-text-2); }
.g-blatt-kopf > .g-knopf { margin-left: auto; }
.g-blatt-inhalt { flex: 1; min-height: 0; overflow-y: auto; padding: 0 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.g-blatt-fuss { flex: none; display: flex; gap: 8px; padding: 10px 14px; background: var(--g-flaeche); border-top: 1px solid var(--g-linie); }
.g-blatt-fuss > .g-knopf { flex: 1; }
@media (min-width: 600px) {
.g-blatt-unten { left: 50%; right: auto; bottom: 16px; width: min(30rem, calc(100% - 32px)); transform: translateX(-50%); border-radius: var(--g-r-fenster); box-shadow: var(--g-schatten-pop); }
.g-blatt-griff { display: none; }
}
/* ── 12 · Kurzmeldung, Leerer Zustand, Lade-Zustand ── */
.g-toasts {
position: fixed; z-index: var(--g-z-toast); right: 20px; bottom: calc(24px + env(safe-area-inset-bottom));
display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: calc(100vw - 40px); pointer-events: none;
}
@media (max-width: 1199.98px) { .g-toasts { bottom: calc(var(--g-hleiste-h) + 16px + env(safe-area-inset-bottom)); } }
@media (max-width: 599.98px) { .g-toasts { left: 16px; right: 16px; align-items: stretch; max-width: none; } }
.g-toast {
display: flex; align-items: flex-start; gap: 10px; min-width: 15rem; max-width: 24rem; padding: 11px 14px 11px 12px; pointer-events: auto;
background: var(--g-flaeche); color: var(--g-text); border: 1px solid var(--g-linie-2); border-radius: var(--g-r-karte); box-shadow: var(--g-schatten-pop);
font-size: var(--g-gr-basis); font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; animation: g-toast-rein .2s ease-out both;
}
.g-toast::before {
content: ''; flex: none; width: 18px; height: 18px; background: var(--g-akzent);
-webkit-mask: var(--g-ic-info) center / contain no-repeat; mask: var(--g-ic-info) center / contain no-repeat;
}
.g-toast.g-ok::before { background: var(--g-ok); -webkit-mask-image: var(--g-ic-haken); mask-image: var(--g-ic-haken); }
.g-toast.g-warn { background: var(--g-warn-s); border-color: var(--g-warn-r); }
.g-toast.g-warn::before { background: var(--g-warn); -webkit-mask-image: var(--g-ic-warn); mask-image: var(--g-ic-warn); }
.g-toast.g-alert { background: var(--g-alert-s); border-color: var(--g-alert-r); color: var(--g-alert); }
.g-toast.g-alert::before { background: var(--g-alert); -webkit-mask-image: var(--g-ic-fehler); mask-image: var(--g-ic-fehler); }
.g-toast > .g-textlink { margin-left: auto; padding-left: 8px; white-space: nowrap; }
@keyframes g-toast-rein { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
/* Leerer Zustand (wie Backoffice: Symbolfeld 56 px, Titel, ein Satz, ein Knopf) */
.g-leer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 160px; padding: 28px 20px; text-align: center; }
.g-leer-symbol { width: 56px; height: 56px; margin-bottom: 6px; display: grid; place-items: center; border-radius: 16px; background: var(--g-akzent-s); color: var(--g-akzent); }
.g-leer-symbol svg { width: 26px; height: 26px; }
.g-leer.g-alert .g-leer-symbol { background: var(--g-alert-s); color: var(--g-alert); }
.g-leer-titel { margin: 0; font-size: 15px; font-weight: 600; color: var(--g-text); }
.g-leer-text { max-width: 27.5rem; margin: 0; font-size: var(--g-gr-basis); line-height: 1.5; color: var(--g-text-2); }
.g-leer > .g-knopf { margin-top: 8px; }
/* Lade-Zustand: Kreisel und Skelett-Zeilen */
.g-laden { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 120px; padding: 24px; color: var(--g-text-2); font-size: var(--g-gr-basis); }
.g-kreisel { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2.5px solid var(--g-linie); border-top-color: var(--g-akzent); animation: g-dreh .8s linear infinite; }
@keyframes g-dreh { to { transform: rotate(360deg); } }
.g-skelett { display: block; height: 12px; border-radius: var(--g-r-klein); background: linear-gradient(90deg, var(--g-linie) 0%, var(--g-flaeche-2) 50%, var(--g-linie) 100%); background-size: 200% 100%; animation: g-schimmer 1.4s ease-in-out infinite; }
.g-skelett.g-gross { height: 18px; }
@keyframes g-schimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* ── 13 · Handy-Bausteine: Liste, Liste/Detail (zwei Spalten ab 600 px), Kürzel-Menü, Kacheln, Aktionen ── */
.g-liste { overflow: hidden; background: var(--g-flaeche); border: 1px solid var(--g-linie); border-radius: var(--g-r-karte); }
.g-listenzeile {
display: flex; align-items: center; gap: 12px; width: 100%; min-height: 3.75rem; padding: 10px 14px; margin: 0;
border: 0; border-top: 1px solid var(--g-linie); background: none; color: var(--g-text); font-size: var(--g-gr-text); text-align: left; text-decoration: none; cursor: pointer;
}
.g-listenzeile:first-child { border-top: 0; }
.g-listenzeile:hover { background: var(--g-flaeche-2); }
.g-listenzeile.g-gewaehlt, .g-listenzeile[aria-current] { background: var(--g-akzent-s); box-shadow: inset 3px 0 0 var(--g-akzent); }
.g-lz-bild { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 11px; background: var(--g-flaeche-2); border: 1px solid var(--g-linie); color: var(--g-kf, var(--g-text-2)); }
.g-lz-bild svg { width: 28px; height: 28px; }
.g-lz-symbol { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 10px; background: var(--g-akzent-s); color: var(--g-akzent-d); }
.g-lz-symbol svg { width: 18px; height: 18px; }
.g-lz-symbol.g-warn { background: var(--g-warn-s); color: var(--g-warn); }
.g-lz-symbol.g-alert { background: var(--g-alert-s); color: var(--g-alert); }
.g-lz-symbol.g-info { background: var(--g-info-s); color: var(--g-info); }
.g-lz-text { flex: 1; min-width: 0; }
.g-lz-text b { display: block; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-lz-text small { display: block; margin-top: 2px; font-size: var(--g-gr-klein); color: var(--g-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-lz-text .g-chip, .g-lz-text .g-warnzahl { margin-top: 5px; }
.g-lz-wert { flex: none; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.g-lz-wert small { display: block; font-size: var(--g-gr-versal); font-weight: 500; color: var(--g-text-3); }
.g-lz-pfeil { width: 18px; height: 18px; flex: none; color: var(--g-text-3); }
/* Liste | Detail: unter 600 px Breite ersetzt das Detail die Liste (eigene Seite), ab 600 px stehen beide nebeneinander –
dasselbe Element, Zustand bleibt beim Auf- und Zuklappen erhalten. Gemessen wird die Breite des Behälters (@container). */
.g-zweispalter { container: g-zweispalter / inline-size; min-width: 0; }
.g-zs-raster { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.g-zs-liste, .g-zs-detail { min-width: 0; }
.g-zs-detail { display: none; }
.g-zweispalter.g-detail-offen .g-zs-liste { display: none; }
.g-zweispalter.g-detail-offen .g-zs-detail { display: block; }
.g-zs-zurueck { display: inline-flex; align-items: center; gap: 2px; min-height: var(--g-tipp); padding: 0 10px 0 4px; margin: 0 0 4px -4px; border: 0; background: none; color: var(--g-akzent-d); font-weight: 650; cursor: pointer; }
.g-zs-zurueck svg { width: 18px; height: 18px; }
@container g-zweispalter (min-width: 37.5rem) {
.g-zs-raster { grid-template-columns: minmax(18rem, 1fr) minmax(0, 1.15fr); gap: var(--g-a-4); }
.g-zweispalter.g-schmal-rechts .g-zs-raster { grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr); }
.g-zs-liste, .g-zweispalter.g-detail-offen .g-zs-liste, .g-zs-detail { display: block; }
.g-zs-zurueck { display: none; }
}
/* Detail-Kopf und Aktionsknöpfe (Maßnahme · Navi · Senden · Foto) */
.g-detail { min-width: 0; overflow: hidden; background: var(--g-flaeche); border: 1px solid var(--g-linie); border-radius: var(--g-r-karte); }
.g-detail-kopf { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px 12px; }
.g-detail-titel { margin: 0; font-family: var(--g-schrift-ueberschrift); font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
.g-detail-kopf p { margin: 3px 0 6px; font-size: var(--g-gr-neben); color: var(--g-text-2); }
.g-detail-inhalt { display: flex; flex-direction: column; gap: 12px; padding: 0 18px 16px; }
.g-aktionen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.g-aktion {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 4rem; padding: 6px 4px;
border: 1px solid var(--g-linie); border-radius: var(--g-r-karte); background: var(--g-flaeche); color: var(--g-text);
font-size: var(--g-gr-klein); font-weight: 650; text-decoration: none; cursor: pointer;
}
.g-aktion svg { width: 21px; height: 21px; color: var(--g-akzent-d); }
.g-aktion:hover { border-color: var(--g-linie-2); background: var(--g-flaeche-2); }
.g-aktion.g-primaer { background: var(--g-akzent); border-color: var(--g-akzent); color: var(--g-text-inv); }
.g-aktion.g-primaer svg { color: var(--g-text-inv); }
/* Kacheln (Start am Handy: Management, Mein Tag) */
.g-kacheln { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.g-kachel { display: block; min-width: 0; padding: 12px 14px; border: 1px solid var(--g-linie); border-radius: var(--g-r-karte); background: var(--g-flaeche); color: var(--g-text); text-align: left; text-decoration: none; cursor: pointer; }
.g-kachel svg { width: 22px; height: 22px; }
.g-kachel b { display: block; font-size: 1.6rem; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.g-kachel span { display: block; margin-top: 3px; font-size: var(--g-gr-klein); font-weight: 650; line-height: 1.3; color: var(--g-text-2); }
.g-kachel.g-warn b { color: var(--g-warn); }
.g-kachel.g-info b { color: var(--g-info); }
.g-kachel.g-alert b { color: var(--g-alert); }
/* Kürzel-Menü oben rechts (Variante B: Benutzer, Benachrichtigungen, Position, AgroNews, Abmelden; Admin-Werkzeuge nur für den Admin) */
.g-kuerzelmenue {
position: fixed; z-index: var(--g-z-popover); top: calc(env(safe-area-inset-top) + var(--g-hkopf-h) - 2px); right: 8px;
width: min(20rem, calc(100% - 16px)); max-height: calc(100dvh - var(--g-hkopf-h) - 24px); overflow-y: auto; padding: 8px;
background: var(--g-grund); border: 1px solid var(--g-linie); border-radius: 18px; box-shadow: var(--g-schatten-pop); font-family: var(--g-schrift-rahmen);
}
.g-kuerzelmenue[hidden] { display: none; }
.g-km-kopf { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; }
.g-km-kopf b { display: block; font-size: .95rem; }
.g-km-kopf small { display: block; font-size: var(--g-gr-klein); color: var(--g-text-2); }
.g-km-abschnitt { margin: 10px 8px 4px; font-size: var(--g-gr-versal); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g-text-3); }
.g-km-gruppe { overflow: hidden; background: var(--g-flaeche); border: 1px solid var(--g-linie); border-radius: var(--g-r-karte); }
.g-km-punkt {
display: flex; align-items: center; gap: 12px; width: 100%; min-height: 3.1rem; padding: 6px 14px; margin: 0;
border: 0; border-top: 1px solid var(--g-linie); background: none; color: var(--g-text); font-size: .9rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.g-km-punkt:first-child { border-top: 0; }
.g-km-punkt:hover { background: var(--g-flaeche-2); }
.g-km-punkt svg { width: 19px; height: 19px; color: var(--g-akzent-d); }
.g-km-punkt small { margin-left: auto; font-size: var(--g-gr-klein); font-weight: 500; color: var(--g-text-3); }
.g-km-punkt.g-gefahr, .g-km-punkt.g-gefahr svg { color: var(--g-alert); }
/* ── 15 · App-Bausteine 1.2.0 (Ü1, Entwurf ue1.css): bildschirmhohe Arbeitsfläche, Liste links · Detail rechts, dichte Tabelle mit festem Kopf und Summe,
Aktionsleiste, Schlagleiste, Kachelraster, Kartenbox, Schlag-Journal, Maßnahme-Raster, Auswahlliste. Rein zusätzlich: ohne diese Klassen ändert sich nichts. ── */
/* ── 15.1 · App-Rahmen bildschirmhoch (nur mit g-app-hoch; ohne die Klasse bleibt der Rahmen wie in 1.1.0) ── */
.g-app.g-app-hoch { --g-kopf-h: var(--g-kopf-h-dicht); --g-symbolleiste-b: var(--g-symbolleiste-b-dicht); height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.g-app.g-app-hoch > .g-symbolleiste { position: static; height: auto; }
.g-app.g-app-hoch > .g-blatt { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; overflow: hidden; }
.g-app-hoch .g-symbolleiste .g-symbol { width: 56px; padding: 7px 2px 6px; font-size: 10.5px; }
.g-app-hoch .g-symbolleiste .g-erfassen-rund .g-rund { width: 40px; height: 40px; }
.g-app-hoch .g-kopfleiste .g-programm { height: 30px; }
/* Seitenkopf in einer Zeile: Titel · Zusatz · (Reiter) · Aktionen */
.g-seitenkopf.g-kompakt { min-height: var(--g-seitenkopf-kompakt-h); padding: 6px 16px; flex-wrap: nowrap; gap: 14px; }
.g-seitenkopf.g-kompakt .g-seitentitel { font-size: var(--g-gr-fenster); white-space: nowrap; }
.g-seitenkopf.g-kompakt .g-pfad { margin: 0; white-space: nowrap; }
.g-seitenkopf.g-kompakt .g-seitenkopf-aktionen { flex-wrap: nowrap; }
.g-seitenkopf .g-zusatz { font-size: var(--g-gr-klein); color: var(--g-text-2); white-space: nowrap; }
.g-seitenkopf.g-kompakt .g-reiter { border-bottom: 0; align-self: stretch; }
.g-seitenkopf.g-kompakt .g-reiter .g-reiter-knopf { min-height: 0; height: 100%; padding-top: 0; padding-bottom: 0; margin-bottom: -6px; }
.g-knopf.g-kompakt { height: 30px; padding: 0 11px; font-size: var(--g-gr-neben); }
.g-suche.g-kompakt { height: 30px; }
/* ── 15.2 · Arbeitsfläche, Teilung, Bereich mit eigenem Scrollen ───── */
.g-arbeit { min-height: 0; padding: var(--g-arbeit-luft); display: grid; gap: var(--g-arbeit-luft); overflow: hidden; }
.g-split { grid-template-columns: var(--g-links-b) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.g-split.g-mit-detail { grid-template-columns: var(--g-links-b) minmax(0, 1fr) var(--g-detail-b); }
.g-split.g-ohne-links.g-mit-detail { grid-template-columns: minmax(0, 1fr) var(--g-detail-b); }
.g-spalte { display: flex; flex-direction: column; gap: var(--g-arbeit-luft); min-height: 0; min-width: 0; }
.g-bereich {
display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
background: var(--g-flaeche); border: 1px solid var(--g-linie); border-radius: var(--g-r-karte);
}
.g-bereich.g-wachsen { flex: 1 1 0; }
.g-bereich-kopf { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 10px 6px 12px; border-bottom: 1px solid var(--g-linie); flex: none; }
.g-bereich-titel { margin: 0; font-size: var(--g-gr-basis); font-weight: 650; white-space: nowrap; }
.g-bereich-kopf small { font-size: var(--g-gr-klein); color: var(--g-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-bereich-kopf .g-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.g-bereich-fuss { flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--g-linie); background: var(--g-flaeche-2); font-size: var(--g-gr-klein); color: var(--g-text-2); }
.g-bereich-fuss .g-rechts { margin-left: auto; }
.g-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.g-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.g-scroll::-webkit-scrollbar-track { background: transparent; }
.g-scroll::-webkit-scrollbar-thumb { background: var(--g-rollbalken); border-radius: 10px; border: 2px solid var(--g-flaeche); }
.g-scroll::-webkit-scrollbar-thumb:hover { background: var(--g-rollbalken-hover); }
.g-scroll.g-wachsen { flex: 1 1 0; }
/* ── 15.3 · Dichte Tabelle mit festem Kopf und fester Summenzeile ─── */
.g-tabelle.g-dicht { font-size: var(--g-gr-neben); table-layout: fixed; }
.g-tabelle.g-dicht th { height: 34px; padding: 0 6px; font-size: 11px; line-height: 1.15; white-space: normal; vertical-align: bottom; padding-bottom: 6px; }
.g-tabelle.g-dicht td { height: var(--g-zeile-dicht); padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-tabelle.g-dicht tbody tr:nth-child(even) td { background: var(--g-flaeche-2); }
.g-tabelle.g-dicht tbody tr:hover td { background: var(--g-hover); }
.g-tabelle.g-dicht tr.g-gewaehlt td, .g-tabelle.g-dicht tr[aria-selected="true"] td { background: var(--g-akzent-s); }
.g-tabelle.g-dicht tfoot td { position: sticky; bottom: 0; z-index: 1; height: 30px; padding: 0 6px; background: var(--g-flaeche-2); border-top: 1px solid var(--g-linie-2); font-weight: 650; white-space: nowrap; }
.g-tabelle.g-dicht td.g-name { font-weight: 600; }
.g-tabelle.g-dicht td.g-leise, .g-tabelle.g-dicht .g-leise { color: var(--g-text-3); }
.g-tabelle.g-dicht td.g-mitte, .g-tabelle.g-dicht th.g-mitte { text-align: center; }
.g-tabelle.g-dicht tr.g-gruppe td { height: 28px; }
.g-mit-detail .g-tabelle.g-dicht .g-prio-2 { display: none; }
.g-haken-klein { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: var(--g-ok-s); color: var(--g-ok); }
.g-haken-klein svg { width: 11px; height: 11px; }
.g-ph { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 4px; background: var(--g-platzhalter-s); border: 1px dashed var(--g-platzhalter); color: var(--g-text-3); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.g-zf { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; }
.g-zf b { display: inline-grid; place-items: center; min-width: 22px; height: 17px; padding: 0 4px; border-radius: 4px; background: var(--g-kultur-begruenung); color: var(--g-text); font-size: 10.5px; }
/* Warnsymbol klein in dichten Tabellen */
.g-warnpunkt { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 5px 0 3px; border-radius: var(--g-r-voll); background: var(--g-warn-s); color: var(--g-warn); font-size: 10.5px; font-weight: 750; }
.g-warnpunkt svg { width: 12px; height: 12px; }
.g-warnpunkt.g-info { background: var(--g-info-s); color: var(--g-info); }
/* Reiterzeile über der Tabelle mit Filtern rechts */
.g-reiterzeile { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px 0 6px; border-bottom: 1px solid var(--g-linie); flex: none; }
.g-reiterzeile .g-reiter { border-bottom: 0; align-self: stretch; }
.g-reiterzeile .g-reiter-knopf { min-height: 0; height: 100%; padding: 0 10px; font-size: var(--g-gr-neben); margin-bottom: -1px; }
.g-reiterzeile .g-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.g-segment.g-klein .g-segment-knopf { height: 24px; padding: 0 9px; font-size: var(--g-gr-klein); }
/* ── 15.4 · Aktionsleiste (fest unten im Bereich) ──────────────────── */
.g-aktionsleiste {
flex: none; display: flex; align-items: center; gap: 8px; height: var(--g-aktionsleiste-h); padding: 0 10px 0 12px;
border-top: 1px solid var(--g-linie-2); background: var(--g-flaeche-2); font-size: var(--g-gr-neben);
}
.g-aktionsleiste .g-gewaehlt-text { min-width: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.g-aktionsleiste .g-gewaehlt-text b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.g-aktionsleiste .g-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.g-aktionsleiste .g-trenner { width: 1px; height: 22px; background: var(--g-linie-2); }
/* ── 15.5 · Summenliste (Kulturen links) und Statistik-Box ─────────── */
.g-summenliste { font-size: var(--g-gr-neben); }
.g-summenliste tbody tr { cursor: pointer; }
.g-summenliste tbody tr td:first-child { box-shadow: inset 3px 0 0 transparent; }
.g-summenliste tbody tr[aria-selected="true"] td { background: var(--g-akzent-s); font-weight: 650; }
.g-summenliste tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--g-akzent); }
.g-summenliste .g-null { color: var(--g-text-3); }
.g-statzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 7px 12px 8px; border-bottom: 1px solid var(--g-linie); }
.g-statzeile:last-child { border-bottom: 0; }
.g-statzeile .g-sz-name { font-size: var(--g-gr-neben); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-statzeile .g-sz-wert { font-size: var(--g-gr-neben); font-weight: 700; font-variant-numeric: tabular-nums; }
.g-statzeile .g-sz-zusatz { grid-column: 1 / -1; font-size: 11px; color: var(--g-text-2); }
.g-statzeile .g-gb-spur { grid-column: 1 / -1; height: 6px; margin: 3px 0 1px; }
.g-statzeile .g-gb-grenze { top: -3px; bottom: -3px; }
.g-statzeile.g-knapp .g-sz-wert { color: var(--g-warn); }
.g-statzeile.g-knapp .g-gb-fuellung { background: var(--g-warn-f); }
.g-befundzeile {
display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; border: 0; border-bottom: 1px solid var(--g-linie);
background: none; text-align: left; font-size: var(--g-gr-neben); cursor: pointer;
}
.g-befundzeile:hover { background: var(--g-hover); }
.g-befundzeile[aria-pressed="true"] { background: var(--g-warn-s); box-shadow: inset 3px 0 0 var(--g-warn-f); }
.g-befundzeile .g-bz-text { flex: 1; min-width: 0; }
.g-befundzeile .g-bz-text b { display: block; font-weight: 650; }
.g-befundzeile .g-bz-text small { display: block; color: var(--g-text-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-befundzeile .g-pfeil { color: var(--g-text-3); }
.g-zwischentitel { padding: 9px 12px 5px; font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--g-text-3); background: var(--g-flaeche); position: sticky; top: 0; z-index: 1; }
.g-zwischentitel small { text-transform: none; letter-spacing: 0; font-weight: 500; }
/* ── 15.6 · Detail rechts (angedockt, kein Überlagern) ─────────────── */
.g-detail-dock { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--g-flaeche); border: 1px solid var(--g-linie); border-radius: var(--g-r-karte); }
.g-dd-kopf { flex: none; padding: 10px 12px 0 14px; border-bottom: 1px solid var(--g-linie); }
.g-dd-zeile { display: flex; align-items: flex-start; gap: 10px; }
.g-dd-titel { margin: 0; font-size: var(--g-gr-betont); font-weight: 700; line-height: 1.25; }
.g-dd-titel small { display: block; margin-top: 2px; font-size: var(--g-gr-klein); font-weight: 500; color: var(--g-text-2); }
.g-dd-kopf .g-reiter { margin-top: 8px; border-bottom: 0; }
.g-dd-kopf .g-reiter-knopf { min-height: 32px; padding: 4px 8px 6px; font-size: var(--g-gr-klein); }
.g-dd-block { padding: 10px 14px 12px; border-bottom: 1px solid var(--g-linie); }
.g-dd-block h4 { margin: 0 0 7px; font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--g-text-3); }
.g-kv { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 4px 10px; font-size: var(--g-gr-neben); }
.g-kv dt { color: var(--g-text-2); }
.g-kv dd { margin: 0; font-weight: 550; min-width: 0; }
.g-kv dd small { color: var(--g-text-3); font-weight: 500; }
.g-rechnung { width: 100%; border-collapse: collapse; font-size: var(--g-gr-neben); font-variant-numeric: tabular-nums; }
.g-rechnung td { padding: 3px 0; border-bottom: 1px dashed var(--g-linie); }
.g-rechnung td:last-child { text-align: right; font-weight: 600; }
.g-rechnung tr.g-summe td { border-bottom: 0; border-top: 1px solid var(--g-linie-2); font-weight: 700; }
.g-rechnung td small { color: var(--g-text-3); }
/* ── 15.7 · Kachelraster mit fester Höhe (Dashboard, Cockpit) ─────── */
.g-kachelraster { display: grid; gap: var(--g-arbeit-luft); min-height: 0; grid-template-columns: repeat(var(--g-spalten, 4), minmax(0, 1fr)); grid-template-rows: repeat(var(--g-zeilen, 2), minmax(0, 1fr)); }
.g-kachelraster > .g-bereich { min-height: 0; }
.g-kachel-zahl { font-size: var(--g-gr-held); font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; }
.g-alle-link { font-size: var(--g-gr-klein); font-weight: 600; color: var(--g-akzent-d); text-decoration: none; white-space: nowrap; }
.g-listenzeile-d { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--g-linie); font-size: var(--g-gr-neben); }
.g-listenzeile-d:last-child { border-bottom: 0; }
.g-listenzeile-d .g-lz-haupt { flex: 1; min-width: 0; }
.g-listenzeile-d .g-lz-haupt b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-listenzeile-d .g-lz-haupt small { display: block; color: var(--g-text-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-datum { flex: none; width: 52px; text-align: center; padding: 3px 0; border-radius: 7px; background: var(--g-flaeche-2); border: 1px solid var(--g-linie); font-size: 11px; line-height: 1.15; color: var(--g-text-2); }
.g-datum b { display: block; font-size: 14px; color: var(--g-text); }
.g-datum.g-bald { background: var(--g-warn-s); border-color: var(--g-warn-r); }
.g-kulturbalken { display: grid; grid-template-columns: 26px 104px minmax(0, 1fr) 62px; align-items: center; gap: 8px; padding: 4px 12px; font-size: var(--g-gr-neben); }
.g-kulturbalken .g-kb-spur { position: relative; height: 14px; border-radius: 4px; background: var(--g-hover); overflow: hidden; }
.g-kulturbalken .g-kb-wert { position: absolute; inset: 0 auto 0 0; background: var(--g-kf); border-radius: 4px; }
.g-kulturbalken .g-kb-wert { background-image: var(--g-kf-muster, none); background-size: var(--g-kf-muster-gr, auto); } /* Muster aus der Kultur-Klasse */
.g-kulturbalken .g-kb-name { position: absolute; left: 6px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 11px; font-weight: 650; color: var(--g-text); text-shadow: 0 0 3px var(--g-flaeche), 0 0 2px var(--g-flaeche); white-space: nowrap; }
/* ── 15.8 · Karte: Fläche, schwebende Box (einklappbar, eigenes Scrollen) ── */
.g-kartenflaeche { position: relative; min-height: 0; overflow: hidden; border-radius: var(--g-r-karte); border: 1px solid var(--g-linie); background: var(--g-karte-grund); }
.g-karte-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-kartenbox {
position: absolute; z-index: 5; display: flex; flex-direction: column; max-height: calc(100% - 24px); min-height: 0;
background: var(--g-flaeche); border: 1px solid var(--g-linie); border-radius: var(--g-r-karte); box-shadow: var(--g-schatten-2); overflow: hidden;
}
.g-kartenbox.g-oben-links { top: 12px; left: 12px; width: 292px; }
.g-kartenbox.g-oben-rechts { top: 12px; right: 12px; }
.g-kartenbox.g-unten-rechts { bottom: 12px; right: 12px; width: 300px; }
.g-kartenbox.g-schwebend { width: 300px; }
.g-kartenknopf { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--g-linie-2); border-radius: 8px; background: var(--g-flaeche); box-shadow: var(--g-schatten-1); font-size: var(--g-gr-neben); font-weight: 550; }
.g-kartenhinweis { position: absolute; z-index: 4; left: 12px; bottom: 10px; padding: 3px 8px; border-radius: 6px; background: var(--g-glas); font-size: 11px; color: var(--g-text-2); }
.g-massstab { position: absolute; z-index: 4; right: 12px; bottom: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 10.5px; color: var(--g-text-2); }
.g-massstab i { display: block; height: 5px; border: 1.5px solid var(--g-text-2); border-top: 0; }
.g-nord { position: absolute; z-index: 4; right: 14px; top: 14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--g-flaeche); box-shadow: var(--g-schatten-1); font-size: 11px; font-weight: 750; }
/* ── 15.13 · Ergänzungen (Statuszeile, Breitenvorrang) ── */
@media (max-width: 1599.98px) { .g-app-hoch .g-kopfleiste .g-programm svg { display: none; } .g-app-hoch .g-kopfleiste .g-programm { padding: 0 9px; } }
.g-bereich-fuss svg, .g-pfeil svg, .g-befundzeile .g-pfeil svg { width: 14px; height: 14px; }
.g-bereich-fuss svg { color: var(--g-ok); }
.g-app.g-app-hoch.g-mit-status { height: calc(100vh - 20px); height: calc(100dvh - 20px); }
.g-statuszeile { position: fixed; left: 0; right: 0; bottom: 0; height: 20px; display: flex; align-items: center; gap: 14px; padding: 0 12px 0 76px; background: var(--g-rahmen); color: var(--g-rahmen-text-2); font: 500 10.5px/1 var(--g-schrift-rahmen); letter-spacing: .01em; white-space: nowrap; overflow: hidden; }
.g-statuszeile b { color: var(--g-rahmen-hell); font-weight: 650; }
.g-tabelle.g-dicht th.g-zahl { text-align: right; }
@media (max-width: 1599.98px) { .g-tabelle.g-dicht .g-breit-nur { display: none; } }
/* ── 15.9 · Filterleiste mit Feldern, sortierbare Spaltenköpfe (Journal) ── */
.g-filterleiste-d { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--g-linie); background: var(--g-flaeche-2); }
.g-filterfeld { display: inline-grid; grid-template-columns: auto 14px; grid-template-rows: auto auto; column-gap: 6px; align-items: center; height: 34px; padding: 2px 8px 2px 10px; border: 1px solid var(--g-linie-2); border-radius: 8px; background: var(--g-flaeche); text-align: left; cursor: pointer; }
.g-filterfeld small { grid-column: 1; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--g-text-3); line-height: 1.1; }
.g-filterfeld span { grid-column: 1; font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.g-filterfeld svg { grid-column: 2; grid-row: 1 / 3; width: 14px; height: 14px; color: var(--g-text-3); }
.g-filterfeld.g-an { background: var(--g-akzent-s); border-color: var(--g-akzent-m); }
.g-filterfeld.g-an span { color: var(--g-akzent-d); }
.g-tabelle.g-dicht th.g-sortierbar { cursor: pointer; }
.g-tabelle.g-dicht th.g-sortierbar.g-an { color: var(--g-akzent-d); }
.g-sortpfeil { margin-left: 4px; font-size: 8.5px; color: var(--g-text-3); letter-spacing: -1px; }
th.g-an .g-sortpfeil { color: var(--g-akzent); font-size: 10px; }
.g-tabelle.g-dicht td.g-gruppe-mark { box-shadow: inset 3px 0 0 var(--g-akzent-m); }
.g-ic-gross { width: 34px; height: 34px; color: var(--g-text-3); }
/* ── 15.10 · Maßnahme-Fenster als Raster (bildschirmhoch, kein Endlos-Formular) ── */
.g-massnahme-fenster { min-height: 0; }
.g-formraster { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); gap: 0; overflow: hidden; }
.g-formblock { position: relative; min-height: 0; overflow: visible; padding: 10px 14px 12px; border-bottom: 1px solid var(--g-linie); }
.g-formblock:nth-child(odd) { border-right: 1px solid var(--g-linie); }
.g-formblock h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--g-text-3); }
.g-formblock h3 .g-rechts { margin-left: auto; display: flex; gap: 6px; text-transform: none; letter-spacing: 0; }
.g-formblock .g-knopf.g-kompakt { height: 26px; padding: 0 9px; }
.g-formzeile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.g-formblock .g-feld-titel { font-size: 11px; }
.g-formblock .g-eingabe { height: 32px; }
.g-art-wahl { display: flex; flex-wrap: wrap; }
.g-chipfeld { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 4px 10px; border: 1px solid var(--g-linie-2); border-radius: var(--g-r-feld); background: var(--g-flaeche); font-size: 13px; }
.g-chipfeld svg { width: 14px; height: 14px; vertical-align: -2px; }
.g-chipfeld.g-fokus { border-color: var(--g-akzent); box-shadow: 0 0 0 3px var(--g-akzent-s); }
.g-formblock.g-offen { z-index: 20; }
/* Auswahlliste Personen und Maschinen (ersetzt die Dropdowns) */
.g-picker { position: absolute; z-index: 30; left: 14px; right: -40px; top: 78px; display: flex; flex-direction: column; background: var(--g-flaeche); border: 1px solid var(--g-linie-2); border-radius: var(--g-r-karte); box-shadow: var(--g-schatten-pop); overflow: hidden; }
.g-picker-kopf { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--g-linie); }
.g-picker-gewaehlt { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--g-linie); background: var(--g-flaeche-2); font-size: 12px; }
.g-picker-gewaehlt small { font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--g-text-3); }
.g-pick-zeile { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--g-linie); font-size: 12.5px; cursor: pointer; }
.g-pick-zeile .g-lz-haupt b { font-weight: 600; }
.g-pick-zeile .g-lz-haupt small { color: var(--g-text-2); font-size: 11px; }
.g-pick-zeile.g-an { background: var(--g-akzent-s); }
.g-pick-sym { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--g-hover); color: var(--g-text-2); flex: none; }
.g-pick-sym svg { width: 16px; height: 16px; }
.g-pick-haken { width: 16px; height: 16px; border: 1.5px solid var(--g-linie-2); border-radius: 4px; flex: none; }
/* Farbtafel der Grundtöne (Musterseite, Verwaltung) */
.g-tonzeile { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--g-linie); font-size: 12.5px; }
.g-tonzeile small { color: var(--g-text-2); font-size: 11px; }
.g-tonfeld { height: 30px; border-radius: 7px; display: grid; place-items: center; font: 700 11px var(--g-schrift-rahmen); box-shadow: inset 0 0 0 1px var(--g-muster-dunkel); }
.g-tonzeile .g-mono { font-size: 11px; }
.g-kartenknopf svg { width: 15px; height: 15px; }
.g-pick-zeile .g-lz-haupt b, .g-pick-zeile .g-lz-haupt small { display: block; }
.g-vorschlaege { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.g-vorschlaege small { flex: 1 0 100%; font-size: 11px; color: var(--g-text-3); }
.g-vorschlaege .g-chip { height: 26px; cursor: pointer; }
/* ── 15.11 · Schlag-Journal: Banner, Fruchtfolge-Zeitleiste, Kennkacheln, NDVI ── */
.g-banner { display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); min-height: 0; overflow: hidden; background: var(--g-flaeche); border: 1px solid var(--g-linie); border-radius: var(--g-r-karte); }
.g-banner-karte { position: relative; min-height: 0; overflow: hidden; background: var(--g-sat-2); }
.g-banner-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 18px 14px; }
.g-banner-titel { margin: 0; font-size: 21px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-banner-zeile { font-size: 13px; }
.g-banner-kv { grid-template-columns: 104px minmax(0, 1fr); gap: 2px 10px; }
.g-banner-kv .g-chip svg { width: 11px; height: 11px; }
.g-fruchtfolge { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 0; padding: 10px 12px 12px; overflow-x: auto; }
.g-ff-jahr { flex: 1 1 0; min-width: min-content; display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 9px; font-size: 12px; }
.g-ff-jahr small { font-size: 11px; font-weight: 650; color: var(--g-text-3); }
.g-ff-jahr b { font-weight: 650; font-size: 11.5px; line-height: 1.15; hyphens: manual; white-space: normal; word-break: keep-all; overflow-wrap: normal; } /* Kulturnamen nie gekürzt, nie im Wort getrennt (Martin 05.11., M5) */
.g-ff-jahr > span.g-text-2 { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-ff-jahr.g-an { background: var(--g-akzent-s); box-shadow: inset 0 0 0 1px var(--g-akzent-m); }
.g-ff-jahr.g-plan { border: 1px dashed var(--g-linie-2); }
.g-ff-balken { display: flex; align-items: center; height: 26px; padding: 0 4px; border-radius: 6px; background: var(--g-kf); }
.g-ff-balken { background-image: var(--g-kf-muster, none); background-size: var(--g-kf-muster-gr, auto); } /* Muster aus der Kultur-Klasse */
.g-ff-balken.g-leer { background: var(--g-platzhalter-s); border: 1px dashed var(--g-platzhalter); }
.g-ff-balken .g-kk { background: var(--g-flaeche); box-shadow: none; } /* 1.2.2: Pille hell auf dem kräftigen Balken */
.g-ff-zf { flex: 0 0 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10.5px; text-align: center; color: var(--g-text-2); border-top: 2px dotted var(--g-linie-2); margin-top: 32px; padding-top: 6px; height: fit-content; }
.g-kennkacheln { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.g-kennkachel { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; border-right: 1px solid var(--g-linie); font-size: 11.5px; }
.g-kennkachel:last-child { border-right: 0; }
.g-kennkachel h4 { margin: 0; font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--g-text-3); }
.g-kk-zahl { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.15; }
.g-kk-zahl small { font-size: 11px; font-weight: 500; color: var(--g-text-2); }
.g-kennkachel .g-quelle { margin-top: auto; }
.g-ndvi { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) 190px; gap: 10px; padding: 8px 10px; }
.g-ndvi-diagramm { position: relative; min-height: 0; }
.g-ndvi-seite { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g-ndvi-zonen { flex: 1 1 0; min-height: 80px; border-radius: 8px; background: var(--g-flaeche-2); border: 1px solid var(--g-linie); }
/* ── 15.12 · Schlagleiste (Kultursummen + Schlagsuche in einem Baustein) ── */
.g-sl-kopf { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 8px 6px 10px; }
.g-sl-schalter { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 10px 8px; border-bottom: 1px solid var(--g-linie); }
.g-sl-schalter .g-segment-knopf { padding: 0 7px; }
.g-sl-treffer { flex: none; padding: 5px 12px; background: var(--g-akzent-s); color: var(--g-akzent-d); font-size: 11.5px; font-weight: 600; border-bottom: 1px solid var(--g-linie); }
.g-leiste-tab tr.g-abschnittzeile td { height: 24px; padding: 8px 10px 2px; background: var(--g-flaeche) !important; font-size: 10px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--g-text-3); border-bottom: 0; }
.g-leiste-tab tr.g-gruppenzeile td { background: var(--g-flaeche) !important; border-bottom: 1px solid var(--g-linie); }
.g-leiste-tab tr.g-gruppenzeile.g-auf td { background: var(--g-flaeche-2) !important; }
.g-leiste-tab tr.g-gruppenzeile[aria-selected="true"] td { background: var(--g-akzent-s) !important; }
.g-leiste-tab tr.g-gruppenzeile[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--g-akzent); }
.g-leiste-tab tr.g-gruppenzeile.g-kante > td:first-child { box-shadow: inset 3px 0 0 var(--g-kf, var(--g-kultur-sonstige)); } /* 1.2.2: Farbkante D an der Gruppenzeile */
.g-leiste-tab tr.g-gruppenzeile.g-kante[aria-selected="true"] > td:first-child { box-shadow: inset 3px 0 0 var(--g-kf, var(--g-kultur-sonstige)), inset 5px 0 0 var(--g-akzent-s); }
.g-gz-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.g-gz-pfeil { display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; background: none; color: var(--g-text-3); cursor: pointer; flex: none; margin-left: -2px; }
.g-gz-pfeil svg { width: 13px; height: 13px; }
.g-gz-text { flex: 1 1 auto; white-space: normal; word-break: keep-all; overflow-wrap: normal; hyphens: manual; } /* M5: Kulturname ungekürzt, bricht nur als ganzes Wort */
.g-gz-name { flex-wrap: wrap; row-gap: 1px; }
.g-gz-n { flex: none; min-width: 18px; height: 16px; padding: 0 5px; border-radius: var(--g-r-voll); background: var(--g-hover); color: var(--g-text-2); font-size: 10.5px; font-weight: 650; display: inline-grid; place-items: center; }
.g-gruppenzeile .g-warnpunkt { height: 16px; font-size: 10px; }
.g-leiste-tab tr.g-schlagzeile td { height: 24px; background: var(--g-flaeche-2) !important; font-size: 12px; border-bottom: 1px solid var(--g-linie); }
.g-leiste-tab tr.g-schlagzeile.g-gewaehlt td { background: var(--g-akzent-s) !important; font-weight: 650; }
.g-leiste-tab tr.g-schlagzeile.g-gewaehlt td:first-child { box-shadow: inset 3px 0 0 var(--g-akzent); }
.g-sz { display: flex; align-items: center; gap: 6px; min-width: 0; padding-left: 22px; }
.g-sz-nr { flex: none; min-width: 30px; text-align: right; color: var(--g-text-3); font-variant-numeric: tabular-nums; font-size: 11px; }
.g-sz-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-sz .g-warnpunkt { height: 16px; padding: 0 3px; margin-left: auto; }
.g-sz mark { background: var(--g-zaehler); color: var(--g-zaehler-text); border-radius: 3px; padding: 0 1px; }
.g-leistenfeld { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g-leistenfeld > .g-bereich { flex: 1 1 0; }
.g-lf-kopf { display: flex; flex-direction: column; gap: 1px; padding: 0 2px; font-size: 13px; }
.g-lf-kopf span { font-size: 11.5px; color: var(--g-text-2); }
.g-lf-kopf.g-grau b { color: var(--g-text-2); }
.g-kb-text { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-gz-name input, .g-sz input { margin: 0; flex: none; accent-color: var(--g-akzent); }
/* 15.14 · Unter 1200 px (Finger): auch die dichten App-Bausteine haben Tippflächen ≥ 44 px (G0-Regel) */
@media (max-width: 1199.98px) {
.g-segment.g-klein .g-segment-knopf, .g-reiterzeile .g-reiter-knopf, .g-dd-kopf .g-reiter-knopf, .g-seitenkopf.g-kompakt .g-reiter .g-reiter-knopf { min-height: var(--g-tipp); height: auto; }
.g-formblock .g-eingabe, .g-knopf.g-kompakt, .g-suche.g-kompakt, .g-filterfeld { min-height: var(--g-tipp); height: auto; }
.g-gz-pfeil { width: var(--g-tipp); height: var(--g-tipp); margin: -14px -8px -14px -16px; }
}
/* ── 14 · Bewegung reduzieren ── */
@media (prefers-reduced-motion: reduce) {
:where(.g-seite) *, :where(.g-seite) *::before, :where(.g-seite) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
.g-kreisel { animation: g-dreh 1.6s linear infinite !important; }
.g-skelett { animation: none !important; }
}