/* ================================================================
   GEMEINSAME GESTALTUNG · agroserv (Desktop + Handy) und TEAM (Desktop + Handy)
   Version 1.1.0 · G0 · 05.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 · 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.1.0";   /* 1.1.0: + kulturen.js (Zuordnung Kulturname → --g-kultur-*), Werte unverändert */

  /* 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: fest je Kultur, ruhige Erdtöne, gleich in Liste, Karte und Düngeplaner (Konzept §2) */
  --g-kultur-weizen: #b8892a;
  --g-kultur-dinkel: #9f7d4a;
  --g-kultur-roggen: #8f6446;
  --g-kultur-triticale: #a99050;
  --g-kultur-gerste: #8f7a3c;
  --g-kultur-braugerste: #c2a25a;
  --g-kultur-hafer: #c8b679;
  --g-kultur-mais: #d07a2c;
  --g-kultur-zuckerruebe: #7b5a95;
  --g-kultur-sonnenblume: #e3b11c;
  --g-kultur-raps: #4f8a3c;
  --g-kultur-senf: #9a9a2a;
  --g-kultur-soja: #3d7d6b;
  --g-kultur-erbse: #6b9a5b;
  --g-kultur-kuerbis: #b9622f;
  --g-kultur-kartoffel: #8a6a52;
  --g-kultur-feldfutter: #8f9f45;
  --g-kultur-gruenland: #79a35a;
  --g-kultur-begruenung: #5f8f7a;
  --g-kultur-brache: #8fa58a;
  --g-kultur-sonstige: #9a958a;

  /* 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 <body> (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; }

/* ── 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: <span class="g-kultur g-kf-weizen">Winterweizen</span> */
.g-kultur { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.g-kultur::before { content: ''; width: 9px; height: 9px; flex: none; border-radius: 3px; background: var(--g-kf, var(--g-kultur-sonstige)); }
.g-kf-weizen { --g-kf: var(--g-kultur-weizen); }
.g-kf-dinkel { --g-kf: var(--g-kultur-dinkel); }
.g-kf-roggen { --g-kf: var(--g-kultur-roggen); }
.g-kf-triticale { --g-kf: var(--g-kultur-triticale); }
.g-kf-gerste { --g-kf: var(--g-kultur-gerste); }
.g-kf-braugerste { --g-kf: var(--g-kultur-braugerste); }
.g-kf-hafer { --g-kf: var(--g-kultur-hafer); }
.g-kf-mais { --g-kf: var(--g-kultur-mais); }
.g-kf-zuckerruebe { --g-kf: var(--g-kultur-zuckerruebe); }
.g-kf-sonnenblume { --g-kf: var(--g-kultur-sonnenblume); }
.g-kf-raps { --g-kf: var(--g-kultur-raps); }
.g-kf-senf { --g-kf: var(--g-kultur-senf); }
.g-kf-soja { --g-kf: var(--g-kultur-soja); }
.g-kf-erbse { --g-kf: var(--g-kultur-erbse); }
.g-kf-kuerbis { --g-kf: var(--g-kultur-kuerbis); }
.g-kf-kartoffel { --g-kf: var(--g-kultur-kartoffel); }
.g-kf-feldfutter { --g-kf: var(--g-kultur-feldfutter); }
.g-kf-gruenland { --g-kf: var(--g-kultur-gruenland); }
.g-kf-begruenung { --g-kf: var(--g-kultur-begruenung); }
.g-kf-brache { --g-kf: var(--g-kultur-brache); }
.g-kf-sonstige { --g-kf: var(--g-kultur-sonstige); }
/* 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: <span class="g-einheit-feld"><input class="g-eingabe g-zahl"><span>kg N/ha</span></span> */
.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); }

/* ── 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; }
}