/* ==========================================================================================================
   GastroControl — GESTALTUNGSSTANDARD (ein Stylesheet für alle Seiten). Vorschau aller Bausteine: stil.php
   Benutzer 16.10.2026: „sayfaların renklendirmesi vs bir standardı olsun".

   REGELN
   1. Farben NUR aus den Tokens unten (var(--…)). Keine Farbe in PHP (style="color…"), keine Hexzahl außerhalb :root.
      cli/designtest.php prüft das.
   2. Jede Statusfarbe hat GENAU EINE Bedeutung — überall gleich:
        gut   (grün)    im Ziel, bezahlt, „wirklich Ihres", gespeichert
        warn  (bernstein) bald fällig, unter Ziel, fehlt noch, prüfen
        fehler(rot)     überfällig, Verlust/Minus, abgelehnt
        info  (blau)    Hinweis ohne Wertung
        demo  (violett) nur Beispieldaten / Testphase
   3. Schrift immer schwarz (Benutzerregel: keine graue Schrift). Tabellen schwarz und groß.
   4. Breiten: Telefon ≤ 767 px · Tablet 768–1199 px (iPad hochkant 768–834, quer 1024–1194) · PC ≥ 1200 px (Benutzer ≈ 1600 CSS-px).
      Menü: ab 1024 px fest links (1024–1279 schmaler), darunter Schublade (☰). Raster im Inhalt (Kennzahlen, Kacheln, Stempeluhr) richten
      sich nach der BREITE DES INHALTS (Container-Abfrage auf .inhalt), nicht nach dem Bildschirm — mit festem Menü oder Schublade gleich richtig.
   5. Feste Teile (Benutzer 16.10.2026: „menü sol tarafta sabit … her sayfanın başlığı tablosu da aynı şekilde sabit olmalı"):
      ab 768 px (Tablet und PC) ist die Seite eine App-Schale — Kopf steht, Menü und Inhalt scrollen GETRENNT, im Inhalt bleiben Seitenkopf und
      Tabellenkopf stehen. Eine Tabelle, die in den Inhalt passt, scrollt NICHT selbst (zwei verschachtelte Scrollflächen verstecken den
      Tabellenkopf — gemessen). Ist sie breiter (assets/app.js setzt .tabelle.breit), scrollt ihr Kasten NUR waagrecht, die erste Spalte
      steht; senkrecht bleibt der Inhalt die einzige Scrollfläche, und app.js rückt Kopf- und Summenzeile im Kasten so weit nach, dass sie
      unter dem Seitenkopf bzw. am unteren Rand stehen (--kopf-versatz / --fuss-versatz). Ein Kasten mit eigener Höhe und senkrechtem
      Scrollen wurde gemessen und verworfen: scrollt der Inhalt weiter, rutscht der Tabellenkopf unter den Seitenkopf.
      Telefon: normaler Seitenfluss, Tabellen scrollen waagrecht, erste Spalte steht.
   8. Touch (any-pointer: coarse — iPad an der Theke): alles Bedienbare ≥ 44 px (Knöpfe in Tabellenzeilen ≥ 40 px), Felder ≥ 16 px Schrift
      (sonst zoomt iOS), keine Funktion und keine Bedeutung NUR unter der Maus (Zeilen-Hover nur bei hover:hover; ein Zeichen wie ↺ braucht Text).
   6. Tabellen: kurze Werte (Datum, Nummer, Betrag, Etikett) brechen NIE um; nur Textspalten (class="text") dürfen umbrechen.
      Zeile unter der Maus = --hover. Kennzahlen am PC immer 4 gleiche Spalten.
   7. Formulare auf Listenseiten: eingeklappt (ly_formkasten), „Neu" im Seitenkopf öffnet. Felder unten bündig, Erklärung als .hilfe darunter.
   ========================================================================================================== */

:root {
  /* Grund */
  --text: #000;
  --grund: #f2f4f3;
  --flaeche: #fff;
  --linie: #b6c0bb;
  --linie-stark: #000;
  /* Marke */
  --marke: #0b5d3b;
  --marke-dunkel: #07432a;
  --marke-hell: #e2f0e8;
  --auf-marke: #fff;
  /* Status — Vordergrund (Rand/Balken) und Hintergrund (Fläche) */
  --gut: #0b6b3a;      --gut-grund: #dff3e7;
  --warn: #9a5b00;     --warn-grund: #fff1d0;
  --fehler: #b3121b;   --fehler-grund: #fde3e3;
  --info: #1b4f9c;     --info-grund: #e3ecfa;
  --demo: #5b2a86;     --demo-grund: #efe5f8;  --auf-demo: #fff;
  /* Fokus und Zeile unter der Maus */
  --fokus: #f0b400;
  --hover: #fff3b8;
  --schatten: 0 1px 2px rgba(0, 0, 0, .06);   /* Karten (F4) */
  /* Modern & Clean wie AFPACK (Benutzer 01.11.2026: „AFPACK'teki gibi görselliğe önem verelim", „satırları renkli yap, bir dolu bir boş") */
  --schatten-karte: 0 1px 3px rgba(15, 23, 42, .08), 0 6px 16px rgba(15, 23, 42, .06);
  --tabellenkopf: #1e3a5f;
  --auf-tabellenkopf: #fff;
  --zebra: #e9eff7;
  --summenzeile: #dbe4f0;
  --seitenkopf-grund: #fff;
  /* Kennzahlen ohne Wertung: je Platz eine eigene Farbe (Benutzer 01.11.2026: „KPI'leri renklendir … sayfa çok silik") — keine Statusbedeutung */
  --kz-1: #1d4ed8; --kz-1-grund: #e7eefe;
  --kz-2: #0f766e; --kz-2-grund: #dcf3ef;
  --kz-3: #6d28d9; --kz-3-grund: #efe7fd;
  --kz-4: #be185d; --kz-4-grund: #fce7f1;
  /* Produkt-/Zutatenname im Feld: eigene Fläche und Schrift, damit er auffällt */
  --name-grund: #eef4ff;
  --name-text: #102a56;
  --name-rand: #7a98c8;
  --menge-text: #c8102e;   /* Gramm/Mengen in der Rezeptbibliothek rot (Benutzer 01.11.2026) — Hervorhebung, keine Fehlerbedeutung */
  --schleier: rgba(0, 0, 0, .35);   /* über dem Inhalt, solange die Menü-Schublade offen ist */
  /* Maße */
  --radius: 8px;
  --abstand: 16px;
  --leiste-h: 52px;
  --menu-b: 240px;
  --kopf-h: 52px;          /* Höhe von Testphase + Leiste — assets/app.js misst sie nach (die Leiste kann umbrechen) */
  --sk-h: 68px;            /* Höhe des Seitenkopfs — assets/app.js misst sie nach */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--text); background: var(--grund); overflow-wrap: break-word; }
[hidden] { display: none !important; }
a { color: var(--marke); }
a:hover { color: var(--marke-dunkel); }
h1 { font-size: 1.6rem; margin: 0; }
h2 { font-size: 1.2rem; margin: 0 0 12px; }
h3 { font-size: 1.05rem; margin: 16px 0 8px; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; }

/* ── Kopfleiste, Menü, Rahmen ─────────────────────────────────────────────────────────────────────────── */
.testphase { background: var(--demo); color: var(--auf-demo); padding: 6px 16px; font-size: .9rem; text-align: center; }
.kurz { display: none; }                                 /* kurze Fassung eines Satzes, nur wo der Platz fehlt (Telefon) */
.leiste { display: flex; align-items: center; gap: 16px; padding: 0 16px; min-height: var(--leiste-h); background: var(--marke); color: var(--auf-marke); flex-wrap: wrap; }
.leiste a, .leiste button { color: var(--auf-marke); }
.marke { font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.betrieb { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.betriebwahl select { font: inherit; font-weight: 600; color: var(--auf-marke); background: var(--marke-dunkel); border: 1px solid var(--auf-marke); border-radius: 6px; padding: 4px 8px; min-height: 34px; max-width: 60vw; }
.betriebwahl select option { color: initial; background: initial; }
.leiste-rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.benutzer { text-decoration: none; }
.abmelden button, .sprache { background: transparent; border: 1px solid var(--auf-marke); border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit; min-height: 34px; }
.sprachwahl { display: flex; gap: 6px; }
.sprache { display: inline-flex; align-items: center; gap: 6px; color: var(--auf-marke); opacity: .85; }
.sprache.aktiv { opacity: 1; background: var(--marke-dunkel); font-weight: 700; }
.flagge { width: 22px; height: 15px; border: 1px solid var(--marke-dunkel); }
.menuknopf { display: none; background: transparent; color: var(--auf-marke); border: 1px solid var(--auf-marke); border-radius: 6px; font-size: 1.2rem; padding: 2px 10px; min-height: 40px; }

.rahmen { display: flex; }
.menu { width: var(--menu-b); flex: none; background: var(--flaeche); border-right: 1px solid var(--linie); padding: 12px 0; }
.menu-bereich { margin-bottom: 14px; }
.menu-titel { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; padding: 4px 16px; }
.menu a { display: block; padding: 9px 16px; color: var(--text); text-decoration: none; border-left: 4px solid transparent; }
@media (hover: hover) { .menu a:hover { background: var(--marke-hell); } }
.menu a.aktiv { background: var(--marke-hell); border-left-color: var(--marke); font-weight: 700; }
.inhalt { flex: 1; min-width: 0; padding: 0 24px 40px; container: inhalt / inline-size; }
.fuss { padding: 10px 16px; font-size: .85rem; }

/* Seitenkopf: Titel links, Werkzeuge (Monat ← →, Excel, Neu) rechts — auf jeder Seite gleich, bleibt beim Scrollen stehen */
.seitenkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 -24px var(--abstand); padding: 14px 24px;
              background: var(--grund); border-bottom: 1px solid var(--linie); min-height: 68px; }
.werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seitenkopf .zurueck { order: -1; flex: 0 0 auto; }
.seitenkopf .zurueck[hidden] { display: none; }
.seitenkopf h1 { flex: 1 1 auto; }

/* ── Bausteine ────────────────────────────────────────────────────────────────────────────────────────── */
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand); margin-bottom: var(--abstand); }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--abstand); margin-bottom: var(--abstand); min-width: 0; }
.kacheln .kachel { margin-bottom: 0; }
/* Rechnung: Vorschlag eines Artikels für eine Position ohne Zuordnung */
.hinweis-zeile { background: var(--info-grund); border: 1px solid var(--info); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 10px; }
.vorschlag { margin: 2px 0 4px; }
.vorschlag .klein { display: block; }
/* HACCP: ein Kontrollpunkt je Zeile, Eingabe direkt darunter */
.kachel-zeile { border-top: 1px solid var(--linie); padding: 8px 0 4px; }
.kachel-zeile:first-of-type { border-top: 0; }
.kachel-zeile h3 { margin: 0 0 2px; }

/* Kennzahlen: große Zahl, Bezeichnung darüber, Farbe = Status */
.kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--abstand); }
.kennzahl { background: var(--flaeche); border: 1px solid var(--linie); border-top: 5px solid var(--marke); border-radius: var(--radius); padding: 12px 14px;
            display: flex; flex-direction: column; min-height: 108px; min-width: 0; }
.kennzahl .bez, .kennzahl .zusatz { overflow-wrap: break-word; }
.kennzahl .bez { font-size: .9rem; font-weight: 600; }
.kennzahl .wert { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 4px; }
.kennzahl .zusatz { font-size: .85rem; margin-top: auto; padding-top: 2px; }
.kennzahl.gut { border-top-color: var(--gut); }
.kennzahl.gut .wert { color: var(--gut); }
.kennzahl.warn { border-top-color: var(--warn); }
.kennzahl.warn .wert { color: var(--warn); }
.kennzahl.fehler { border-top-color: var(--fehler); }
.kennzahl.fehler .wert { color: var(--fehler); }
.kennzahl.info { border-top-color: var(--info); }
.kennzahl.info .wert { color: var(--info); }

/* Status-Etikett (Chip) */
.chip { display: inline-block; font-size: .78rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid; vertical-align: middle; white-space: nowrap; line-height: 1.5; }
.chip.gut { color: var(--gut); background: var(--gut-grund); border-color: var(--gut); }
.chip.warn { color: var(--warn); background: var(--warn-grund); border-color: var(--warn); }
.chip.fehler { color: var(--fehler); background: var(--fehler-grund); border-color: var(--fehler); }
.chip.info { color: var(--info); background: var(--info-grund); border-color: var(--info); }
.chip.neutral { color: var(--text); background: var(--flaeche); border-color: var(--linie); }
.chip.demo { color: var(--auf-demo); background: var(--demo); border-color: var(--demo); }
.leiste .chip.demo { border-color: var(--auf-demo); }

/* Meldungen und Hinweise: gleiche Farben, linker Balken */
.meldung, .hinweise li { padding: 10px 14px; border-radius: 6px; margin: 0 0 12px; border: 1px solid var(--linie); border-left-width: 6px; background: var(--flaeche); }
.meldung ul { margin: 0; padding-left: 18px; }
.meldung.ok, .meldung.gut, .hinweise li.ok, .hinweise li.gut { border-left-color: var(--gut); }
.meldung.warn, .hinweise li.warn { border-left-color: var(--warn); }
.meldung.fehler, .hinweise li.fehler { border-left-color: var(--fehler); }
.meldung.info, .hinweise li.info { border-left-color: var(--info); }
.nb-hinweis { margin: 4px 0; font-style: italic; }                 /* „Alle Beträge netto …" über einer Tabelle (ly_nb_hinweis, F1) */
.hinweise { list-style: none; padding: 0; margin: 0 0 var(--abstand); }
.hinweise li { font-weight: 600; }
.hinweise a { color: var(--text); }

/* Tabellen */
table { border-collapse: collapse; width: 100%; font-size: 1rem; color: var(--text); }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
thead th { border-bottom: 2px solid var(--linie-stark); vertical-align: bottom; }
tfoot th, tfoot td { border-top: 2px solid var(--linie-stark); font-weight: 700; }
.zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabelle { overflow-x: auto; }
.liste td, .liste tbody th { white-space: nowrap; }
.liste td.text { white-space: normal; min-width: 14em; }
/* Breite Tabellen (viele Zahlenspalten): etwas enger, Kopf trennt Wörter (lang="de") */
.liste.dicht th, .liste.dicht td { padding: 6px 6px; font-size: .9rem; }
.liste.dicht thead th { hyphens: auto; -webkit-hyphens: auto; }
/* Zeilenfarbe als Variable am <tr>: so färbt sie auch eine stehende erste Spalte mit (die braucht eine eigene, deckende Fläche) */
tr.zeile-fehler { --zeile-grund: var(--fehler-grund); }
tr.zeile-warn { --zeile-grund: var(--warn-grund); }
@media (hover: hover) { .liste tbody tr:hover { --zeile-grund: var(--hover); } }
tr.zeile-fehler > td, tr.zeile-fehler > th, tr.zeile-warn > td, tr.zeile-warn > th { background: var(--zeile-grund); }
@media (hover: hover) { .liste tbody tr:hover > td, .liste tbody tr:hover > th { background: var(--zeile-grund); } }
tr.zeile-aus td { text-decoration: line-through; }
.minus { color: var(--fehler); }
.plus { color: var(--gut); }

/* Verteilung „Umsatz → wirklich Ihres" */
.verteilung th { font-weight: 400; }
.verteilung tr.summe th, .verteilung tr.summe td { font-weight: 700; font-size: 1.1rem; }
tr.zwischen th, tr.zwischen td { font-weight: 700; border-top: 2px solid var(--linie-stark); }
tr.frei th, tr.frei td, tr.summe-stark th, tr.summe-stark td { font-weight: 800; font-size: 1.2rem; background: var(--gut-grund); border-top: 2px solid var(--linie-stark); }
tr.frei.minus th, tr.frei.minus td { background: var(--fehler-grund); }
/* Wertetabelle: Bezeichnung links (normal), Zahl rechts */
.werte th { font-weight: 400; }
.klein { display: block; font-size: .85rem; font-weight: 400; }
td.klein, th.klein { display: table-cell; vertical-align: top; }   /* sonst fällt die Zelle aus der Tabelle und die Zeile verrutscht (Rezeptbibliothek, 01.11.2026) */
td .klein, th .klein { margin-top: 2px; }

/* Formulare */
.formular label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; margin-bottom: 12px; }
.formular.zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--abstand); }
.formular.zeile label { flex-direction: row; align-items: center; margin: 0; gap: 6px; }
/* Felder oben bündig: Beschriftung einzeilig (kurz halten!), Erklärung als .hilfe UNTER dem Feld — die verschiebt dann kein Nachbarfeld */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 var(--abstand); align-items: start; }
.raster label { justify-content: flex-start; min-width: 0; }
.raster input, .raster select { width: 100%; }
.hilfe { display: block; font-size: .82rem; font-weight: 400; margin-top: 2px; }
input[type=file] { padding: 6px; background: var(--flaeche); }
/* Dateifeld mit eigenem Knopf in der Sprache des Programms (app.js 8.) — das echte Feld bleibt im Formular, nur unsichtbar */
.datei-wahl { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 38px; padding: 4px 6px; border: 1px solid var(--linie);
              border-radius: var(--radius); background: var(--flaeche); }
.datei-wahl .datei-feld { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; }
.datei-wahl .datei-knopf { flex: 0 0 auto; }
.datei-wahl .datei-name { min-width: 0; overflow-wrap: anywhere; opacity: .8; }
.raster .breit, .raster fieldset { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--linie); border-radius: 6px; margin: 0 0 12px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
legend { font-weight: 700; }
label.haken { flex-direction: row !important; align-items: center; gap: 8px; font-weight: 400; }
input, select, button, textarea { font: inherit; color: var(--text); }
input, select, textarea { max-width: 100%; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); min-height: 40px; }
input[type=checkbox] { min-height: 0; width: 20px; height: 20px; accent-color: var(--marke); }

/* Knöpfe: haupt (eine Hauptaktion je Formular) · normal · gefahr (löschen) · klein (in Tabellenzeilen) */
.knopf, .klein-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--marke); background: var(--flaeche); color: var(--marke); text-decoration: none; cursor: pointer; font-weight: 600; min-height: 40px; }
.knopf:hover, .klein-knopf:hover { background: var(--marke-hell); color: var(--marke-dunkel); }
.knopf.haupt { background: var(--marke); color: var(--auf-marke); }
.knopf.haupt:hover { background: var(--marke-dunkel); color: var(--auf-marke); }
.knopf.aktiv { background: var(--marke); color: var(--auf-marke); }
.knopf.gefahr { border-color: var(--fehler); color: var(--fehler); }
.knopf.gefahr:hover { background: var(--fehler-grund); }
.klein-knopf { padding: 2px 8px; min-height: 30px; font-size: .9rem; }
.zeilenform { display: inline; margin-left: 6px; }
.erlaeuterung { border-left: 3px solid var(--marke); background: var(--marke-hell); padding: 6px 14px; margin: 8px 0; }
.erlaeuterung p { margin: 6px 0; }
.stand { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: var(--abstand); }
.stand label { display: flex; align-items: center; gap: 6px; }
.loeschen-form { margin-top: 12px; }
details > summary { cursor: pointer; list-style: revert; }
details > summary h2 { display: inline; }
/* Eingeklapptes Formular auf Listenseiten (ly_formkasten) */
details.formkasten > summary { list-style: none; display: flex; align-items: center; gap: 10px; }
details.formkasten > summary::-webkit-details-marker { display: none; }
details.formkasten > summary::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px;
                                       background: var(--marke); color: var(--auf-marke); font-weight: 800; font-size: 1.2rem; }
details.formkasten[open] > summary::before { content: "−"; }
details.formkasten[open] > summary { margin-bottom: 12px; }

/* Balkendiagramm */
.balken { width: 100%; height: auto; margin-top: 12px; }
.balken rect.ueber { fill: var(--gut); }
.balken rect.unter { fill: var(--warn); }
.balken rect.zu { fill: var(--linie); }
.balken line.ziel { stroke: var(--linie-stark); stroke-width: 2; stroke-dasharray: 6 4; }
.balken rect.band { fill: var(--gut); opacity: .45; }                 /* Richtsatz-Rahmen (pruefung.php #bereinigt) */
.balken line.eigen { stroke: var(--text); stroke-width: 4; }
.balken text { font-size: 12px; fill: var(--text); }
.legende { display: flex; flex-wrap: wrap; gap: 14px; font-size: .85rem; margin-top: 6px; }
.legende span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; border-radius: 2px; }
.legende .l-ueber::before { background: var(--gut); }
.legende .l-unter::before { background: var(--warn); }
.legende .l-ziel::before { height: 0; border-top: 2px dashed var(--linie-stark); vertical-align: 3px; }

/* Dienstplan: eine Schicht = ein Kästchen; Konflikt mit Urlaub/Krankheit = rot */
.dienstplan { table-layout: fixed; }
.dienstplan thead th:first-child { width: 180px; }
.dienstplan thead th:last-child { width: 80px; }
.dienstplan td { white-space: normal; }
.dienstplan th[scope=row] { white-space: normal; }     /* Name und Bereich brechen um — nie mit „…" kürzen (Daten) */
/* Schicht: Zeit und Löschknopf in einer Zeile, solange die Spalte reicht; sonst bricht die Zeit nach dem Strich um und × rutscht darunter
   (Tablet: sieben Tagesspalten in 770 px — gemessen 16.10.2026, „11:00–20:00" lief über die Nachbarspalte) */
.schicht { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 4px; padding: 1px 4px; margin: 2px 0; font-size: .9rem; border: 1px solid var(--marke); border-radius: 4px; background: var(--marke-hell); font-variant-numeric: tabular-nums; }
.schicht .zeit { min-width: 0; }
.schicht .zeilenform { margin-left: auto; }
.dienstplan .chip { white-space: normal; }
@container inhalt (max-width: 1000px) {
  .dienstplan thead th:first-child { width: 132px; }
  .dienstplan thead th:last-child { width: 64px; }
  .dienstplan th, .dienstplan td { padding-left: 4px; padding-right: 4px; }
}
.schicht.konflikt { border-color: var(--fehler); background: var(--fehler-grund); }

/* Stempeluhr: große Bedienelemente (Tablet an der Theke) */
.stempeluhr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.stempeluhr select, .stempeluhr input { font-size: 1.3rem; min-height: 56px; }
.stempeluhr .knopf { font-size: 1.2rem; min-height: 56px; padding: 0 28px; }
@container inhalt (max-width: 560px) { .stempeluhr { grid-template-columns: minmax(0, 1fr); } }

/* Öffentliche Seiten (Anmelden, Registrieren) */
.karte-mitte { max-width: 460px; margin: 32px auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 24px; }
.karte-mitte h1 { margin-bottom: var(--abstand); }
.karte-mitte .formular button { width: 100%; }
.unter { margin-top: var(--abstand); }

/* Rezeptblatt (rezeptblatt.php): A4 zum Ausfüllen von Hand, zweisprachig — eine Seite je Menü, Zeilenhöhe für Handschrift */
body.blatt-seite { background: var(--grund); }
.blatt-werkzeuge { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 16px; }
.blatt { width: 210mm; min-height: 297mm; margin: 0 auto 12px; padding: 9mm 10mm; background: var(--flaeche); color: var(--text); font-size: 9pt; line-height: 1.25; }
.blatt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 4mm; border-bottom: 2px solid var(--linie-stark); padding-bottom: 1.5mm; margin-bottom: 2.5mm; font-size: 11.5pt; }
.blatt-tr { font-weight: 400; }
.blatt-klein { display: block; font-size: 7pt; font-weight: 400; }
.blatt-kopf .blatt-klein { display: inline; }
.blatt h3 { font-size: 10pt; margin: 3mm 0 1.2mm; }
.blatt-felder, .blatt-tabelle { width: 100%; border-collapse: collapse; }
.blatt-felder th, .blatt-felder td, .blatt-tabelle th, .blatt-tabelle td { border: 1px solid var(--linie-stark); padding: 0.8mm 1.4mm; text-align: left; vertical-align: top; font-size: 8.5pt; }
.blatt-felder th { width: 27%; font-weight: 600; }
.blatt-wert { height: 7mm; font-size: 10pt; }
.blatt-tabelle thead th { font-weight: 700; vertical-align: bottom; }
.blatt-tabelle tbody td { height: 6.2mm; }
.blatt-nr { width: 6mm; text-align: center !important; }
.blatt-b8 { width: 15mm; }
.blatt-b10 { width: 17mm; }
.blatt-b15 { width: 27mm; }
.blatt-b20 { width: 34mm; }
.blatt-b25 { width: 40mm; }
.blatt-mitte { text-align: center !important; font-size: 11pt; }
.blatt-hinweis { border: 1px solid var(--linie-stark); border-left-width: 4px; padding: 1.2mm 2.2mm; margin: 2mm 0; font-size: 8pt; }
.blatt-hinweis p { margin: 0 0 0.8mm; }
.blatt-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2mm 4mm; font-size: 8pt; }
.blatt-feld { display: flex; align-items: flex-end; gap: 1mm; }
.blatt-linie { flex: 1; border-bottom: 1px solid var(--linie-stark); min-width: 8mm; height: 5mm; }
.blatt-notiz { height: 11mm; border: 1px solid var(--linie-stark); }
@media print {
  @page { size: A4; margin: 0; }
  body.blatt-seite { background: var(--flaeche); }
  .blatt-werkzeuge { display: none !important; }
  .blatt { margin: 0; break-after: page; }
}
@media screen and (max-width: 820px) { .blatt { width: 100%; height: auto; } }

/* Stilvorlage */
.farbfelder { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.farbfeld { border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; background: var(--flaeche); }
.farbfeld b { display: block; height: 44px; }
.farbfeld span { display: block; padding: 6px 8px; font-size: .85rem; }

/* ── Breiten (Regeln 4, 5, 8) ──────────────────────────────────────────────────────────────────────────── */
/* Raster nach der Breite des Inhalts */
@container inhalt (max-width: 900px) {
  .kacheln { grid-template-columns: minmax(0, 1fr); }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@supports not (container-type: inline-size) {      /* ältere Browser (iOS < 16): dieselben Stufen nach Bildschirmbreite */
  @media (max-width: 1199px) { .kacheln { grid-template-columns: minmax(0, 1fr); } .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .stempeluhr { grid-template-columns: minmax(0, 1fr); } }
}

/* Erste Spalte einer waagrecht scrollenden Tabelle steht (Telefon: jede Tabelle, Tablet/PC: nur .breit) — deckende Fläche in Zeilenfarbe */
.tabelle .liste th:first-child, .tabelle .liste td:first-child { background: var(--zeile-grund, var(--flaeche)); }

/* App-Schale: Tablet und PC */
@media (min-width: 768px) {
  body.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  body.app .kopfbereich { flex: none; }
  body.app .rahmen { flex: 1; min-height: 0; }
  body.app .menu { overflow-y: auto; overscroll-behavior: contain; }
  body.app .inhalt { overflow-y: auto; padding-bottom: 0; }   /* kein Innenabstand unten: sonst klebt die Summenzeile 40 px über dem Rand */
  body.app .seitenkopf { position: sticky; top: 0; z-index: 30; }
  body.app .tabelle { overflow: visible; }
  body.app .liste thead th { position: sticky; top: var(--sk-h); z-index: 20; background: var(--flaeche); box-shadow: inset 0 -2px 0 var(--linie-stark); border-bottom: 0; }
  body.app .liste tfoot th, body.app .liste tfoot td { position: sticky; bottom: 0; z-index: 20; background: var(--flaeche); box-shadow: inset 0 2px 0 var(--linie-stark); border-top: 0; }
  /* breiter als der Inhalt: der Kasten scrollt nur waagrecht, erste Spalte steht, Kopf/Summe rückt app.js nach (Regel 5) */
  body.app .tabelle.breit { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); margin-bottom: var(--abstand); }
  body.app .tabelle.breit .liste thead th { top: var(--kopf-versatz, 0px); }
  body.app .tabelle.breit .liste tfoot th, body.app .tabelle.breit .liste tfoot td { bottom: var(--fuss-versatz, 0px); }
  body.app .tabelle.breit .liste th:first-child, body.app .tabelle.breit .liste td:first-child { position: sticky; left: 0; z-index: 10; box-shadow: inset -1px 0 0 var(--linie); }
  body.app .tabelle.breit .liste thead th:first-child, body.app .tabelle.breit .liste tfoot :first-child { z-index: 25; }
  body.app .tabelle.breit .liste thead th:first-child { box-shadow: inset 0 -2px 0 var(--linie-stark), inset -1px 0 0 var(--linie); }
  /* „Summe" über mehrere Spalten (colspan) steht NICHT links — sonst schiebt sie sich beim Scrollen über die Beträge */
  body.app .tabelle.breit .liste tfoot [colspan]:first-child { left: auto; box-shadow: inset 0 2px 0 var(--linie-stark); }
}
/* Menü schmaler, solange es fest steht und der Platz knapp ist (iPad quer 1024–1194) */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --menu-b: 210px; }
  .inhalt { padding-left: 20px; padding-right: 20px; }
  .seitenkopf { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
}
/* Menü als Schublade (Tablet hochkant, Telefon) */
@media (max-width: 1023px) {
  .menuknopf { display: inline-block; }
  .menu { display: none; position: absolute; z-index: 35; left: 0; top: 0; width: min(320px, 100%); max-height: calc(100vh - var(--kopf-h)); max-height: calc(100dvh - var(--kopf-h));
          overflow-y: auto; border-right: 2px solid var(--linie-stark); border-bottom: 2px solid var(--linie-stark); }
  body.menu-offen .menu { display: block; }
  .rahmen { position: relative; }
  body.menu-offen .rahmen::after { content: ""; position: absolute; inset: 0; z-index: 34; background: var(--schleier); }
  /* Leiste in einer Zeile: Rolle steht im Konto, Sprache erkennt man an der Flagge */
  .leiste .rolle, .sprache span { display: none; }
  .leiste { gap: 12px; }
  .liste td.text { min-width: 10em; }
}
/* Telefon */
@media (max-width: 767px) {
  body { font-size: 15px; }
  input, select, textarea { font-size: 16px; }      /* unter 16 px zoomt iOS beim Antippen in das Feld */
  .inhalt { padding: 14px 12px 32px; }
  h1 { font-size: 1.3rem; }
  .leiste { gap: 8px; padding: 8px 12px; }
  .seitenkopf { margin: 0 -12px var(--abstand); padding: 12px; }
  .leiste-rechts { margin-left: 0; width: 100%; justify-content: space-between; }
  .kennzahl .wert { font-size: 1.3rem; }
  .kennzahl { min-height: 96px; }
  th, td { padding: 6px 6px; }
  .karte-mitte { margin: 12px; padding: 16px; }
  .menu { width: 100%; }
  .testphase .lang { display: none; }
  .testphase .kurz { display: inline; }
  .tabelle .liste th:first-child, .tabelle .liste td:first-child { position: sticky; left: 0; z-index: 1; }
  .tabelle .liste tfoot [colspan]:first-child { position: static; }
}
/* Telefon: Schnellleiste unten (Aşama B) */
.schnellleiste { display: none; }
@media (max-width: 767px) {
  .schnellleiste { display: flex; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; background: var(--flaeche); border-top: 2px solid var(--linie-stark);
                   padding-bottom: env(safe-area-inset-bottom); }
  .schnellleiste a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; min-height: 56px;
                     border-left: 0; font-size: .8rem; text-align: center; }
  .schnellleiste a span { font-size: 1.3rem; line-height: 1; }
  body.app .inhalt { padding-bottom: 88px; }
  body.menu-offen .schnellleiste { display: none; }
}
/* Touch: Finger statt Maus (Regel 8) */
@media (any-pointer: coarse) {
  .knopf, input, select, textarea, .sprache, .abmelden button, .menuknopf { min-height: 44px; }
  input[type=checkbox] { min-height: 0; width: 24px; height: 24px; }
  .klein-knopf { min-height: 40px; min-width: 40px; padding: 4px 12px; }
  .menu a { padding: 12px 16px; }
  label.haken { min-height: 44px; }
  details.formkasten > summary { min-height: 44px; }
  details.formkasten > summary::before { width: 34px; height: 34px; }
}
@media print {
  .leiste, .menu, .testphase, .stand, .fuss, .werkzeuge, .zurueck, form, details.formkasten { display: none !important; }
  body.app { height: auto; overflow: visible; display: block; }
  .seitenkopf, .liste thead th, .liste tfoot td { position: static !important; }
  .rahmen { display: block; }
  .kachel, .kennzahl { break-inside: avoid; border-color: var(--linie-stark); }
}

/* Zweisprachige Erklärung (DE | TR nebeneinander, schmal untereinander) — richtsatz_lib rs_info_html */
.zweisprachig { display: grid; gap: 12px; margin: 8px 0; }
.zs-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 10px 0; border-top: 1px solid var(--linie); }
.zs-paar h4 { margin: 0 0 4px; }
.zs-paar p { margin: 0; line-height: 1.5; }
@container inhalt (max-width: 700px) { .zs-paar { grid-template-columns: minmax(0, 1fr); } }
details.info-rs { margin-top: 12px; }
ul.quellen { margin: 4px 0 8px; padding-left: 20px; }
ul.quellen li { margin: 2px 0; overflow-wrap: anywhere; }

/* Belege hierher ziehen (rechnungen.php) — Klick öffnet die Dateiauswahl, app.js schickt beim Loslassen ab */
.ablage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; padding: 16px; text-align: center;
          border: 2px dashed var(--linie); border-radius: 10px; cursor: pointer; background: var(--flaeche); }
.ablage input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ablage.ueber, .ablage:focus-within { border-color: var(--linie-stark); }
.ablage span { font-size: .9em; }
/* Beleg links, Daten rechts (rechnung.php); schmal untereinander */
.beleg-pruefen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
@container inhalt (max-width: 1000px) { .beleg-pruefen { grid-template-columns: minmax(0, 1fr); } }
.beleg-ansicht iframe { width: 100%; height: 78vh; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); }
.beleg-ansicht img { max-width: 100%; border: 1px solid var(--linie); }
pre.belegtext { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85em; max-height: 60vh; overflow-y: auto; }
details.zuordnen > summary { cursor: pointer; }
details.zuordnen form { margin-top: 6px; }


/* Einladungslink zum Kopieren (benutzer.php) */
.link-feld { width: 100%; font-family: ui-monospace, monospace; }

/* GoBD-Verfahrensdokumentation (archiv.php) — Bildschirm und Druck */
.verfahrensdoku h3 { margin-top: 1.2em; }
.unterschrift { margin-top: 3em; }
.druckseite { background: var(--grund); }
.druckseite .inhalt { max-width: 900px; margin: 0 auto; padding: 16px; }
.speisekarte sup { font-size: .7em; color: var(--marke-dunkel); }                /* Allergen-Buchstaben an der Speisekarte (allergene.php?druck=karte) */
.rezeptkarte { break-inside: avoid; page-break-inside: avoid; }                    /* rezeptkarte.php: eine Karte nie über zwei Seiten */

/* Summenzeilen in Auswertungstabellen (bwa.php) */
.liste tr.summe th, .liste tr.summe td, .werte tr.summe th, .werte tr.summe td { font-weight: 700; border-top: 2px solid var(--linie-stark); }

/* ── F3/F4 (01.11.2026): EIN Erscheinungsbild — weiße Karten, Farbe nur am Rand und in der Zahl, hellgrauer Grund (Benutzer: Variante „a").
      Abschnitte klappen auf Klick (assets/app.js 5). Ohne Skript und beim Drucken ist alles offen. ── */
.kachel { box-shadow: var(--schatten); }
.abschnitt-kopf { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.abschnitt-kopf::before { content: "▾"; font-size: .9em; color: var(--marke); transition: transform .15s; }
.kachel.zu > .abschnitt-kopf::before { transform: rotate(-90deg); }
.kachel.zu > .abschnitt-kopf { margin-bottom: 0; }
.kachel.zu > :not(.abschnitt-kopf) { display: none; }
.abschnitt-kopf:hover, .abschnitt-kopf:focus-visible { color: var(--marke-dunkel); }
.abschnitte { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--abstand); padding: 8px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.abschnitt-sprung, .abschnitt-alle { font: inherit; font-size: .85rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); cursor: pointer; }
.abschnitt-sprung:hover, .abschnitt-alle:hover { border-color: var(--marke); color: var(--marke-dunkel); }
.abschnitt-alle { margin-left: auto; font-weight: 700; }
.abschnitt-alle + .abschnitt-alle { margin-left: 0; }
.liste thead th { background: var(--grund); }
@media print {
  .kachel.zu > :not(.abschnitt-kopf) { display: revert; }
  .abschnitte, .abschnitt-kopf::before { display: none; }
}
@container inhalt (max-width: 700px) {
  .abschnitte { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .abschnitt-sprung, .abschnitt-alle { white-space: nowrap; flex: 0 0 auto; }
}

/* ══ MODERN & CLEAN (01.11.2026, wie AFPACK „hell"): weiße Karten mit Schatten, Titel mit Farbstrich, Kennzahlen mit Streifen links,
      Tabellenkopf dunkelblau, Zeilen abwechselnd hell — über die Zeilenvariable, damit die stehende erste Spalte mitfärbt ══ */
.kachel { border: 0; border-radius: 12px; box-shadow: var(--schatten-karte); padding: 18px 20px; }
.kachel > h2, .kachel > details > summary > h2, .formkasten > summary > h2 { border-left: 4px solid var(--marke); padding-left: 10px; }
.kachel h3 { color: var(--marke-dunkel); }
.seitenkopf { background: var(--seitenkopf-grund); box-shadow: var(--schatten); }
.kennzahl { border: 0; border-left: 6px solid var(--marke); border-radius: 12px; box-shadow: var(--schatten-karte); padding: 14px 16px; }
.kennzahl.gut { border-left-color: var(--gut); }
.kennzahl.warn { border-left-color: var(--warn); }
.kennzahl.fehler { border-left-color: var(--fehler); }
.kennzahl.info { border-left-color: var(--info); }
.kennzahl .bez { text-transform: uppercase; letter-spacing: .02em; font-size: .78rem; }
/* stärker als die stehende Kopfzeile (body.app … thead th: Fläche weiß) und die stehende erste Spalte (.tabelle .liste th:first-child) */
.liste thead th, body.app .liste thead th, body.app .tabelle .liste thead th, .tabelle .liste thead th:first-child, body.app .tabelle.breit .liste thead th:first-child {
  background: var(--tabellenkopf); color: var(--auf-tabellenkopf); border-bottom: 0; box-shadow: none; font-weight: 700; }
.liste thead th:first-child { border-top-left-radius: 8px; }
.liste thead th:last-child { border-top-right-radius: 8px; }
.liste thead th a, .liste thead th .hilfe { color: var(--auf-tabellenkopf); }
.liste tbody tr:nth-child(even):not(.zeile-fehler):not(.zeile-warn) { --zeile-grund: var(--zebra); }
.liste tbody tr > td, .liste tbody tr > th { background: var(--zeile-grund, var(--flaeche)); border-bottom-color: transparent; }
@media (hover: hover) { .liste tbody tr:hover:not(.zeile-fehler):not(.zeile-warn) { --zeile-grund: var(--hover); } }
.liste tfoot th, .liste tfoot td, .liste tr.summe th, .liste tr.summe td { background: var(--summenzeile); }
.werte tr:nth-child(even) th, .werte tr:nth-child(even) td { background: var(--zebra); }
.menu-titel { color: var(--marke-dunkel); }
/* Überschriften in Großbuchstaben (Benutzer 01.11.2026: „başlıkları büyük harfle yaz") — die Seite trägt lang, so wird i → İ im Türkischen richtig */
.seitenkopf h1, .kachel h2, .formkasten > summary > h2, .liste thead th { text-transform: uppercase; letter-spacing: .03em; }
.kachel h2 .klein, .kachel h2 .hilfe, .kachel h2 .chip { text-transform: none; letter-spacing: 0; }
/* Suchfeld mit Vorschlagsliste (datalist) — breit genug für „Name · Nr. 10001" */
input.suchfeld { width: 100%; min-width: 24em; }

/* ══ FARBIGE KENNZAHLEN (01.11.2026, Benutzer: „KPI'leri renklendir … çok soluk, çok silik"): Fläche getönt, Zahl in der Farbe, Streifen links.
      Mit Wertung (gut/warn/fehler/info) die Statusfarbe; ohne Wertung je Platz eine eigene Farbe (--kz-1 … 4). ══ */
.kennzahl { --kz: var(--marke); --kz-grund: var(--marke-hell); background: linear-gradient(135deg, var(--kz-grund), var(--flaeche) 85%); border-left-color: var(--kz); }
.kennzahl .wert { color: var(--kz); font-size: 1.9rem; }
.kennzahl .bez { color: var(--kz); font-weight: 800; }
.kennzahl:not(.gut):not(.warn):not(.fehler):not(.info):nth-child(4n+1) { --kz: var(--kz-1); --kz-grund: var(--kz-1-grund); }
.kennzahl:not(.gut):not(.warn):not(.fehler):not(.info):nth-child(4n+2) { --kz: var(--kz-2); --kz-grund: var(--kz-2-grund); }
.kennzahl:not(.gut):not(.warn):not(.fehler):not(.info):nth-child(4n+3) { --kz: var(--kz-3); --kz-grund: var(--kz-3-grund); }
.kennzahl:not(.gut):not(.warn):not(.fehler):not(.info):nth-child(4n+4) { --kz: var(--kz-4); --kz-grund: var(--kz-4-grund); }
.kennzahl.gut { --kz: var(--gut); --kz-grund: var(--gut-grund); }
.kennzahl.warn { --kz: var(--warn); --kz-grund: var(--warn-grund); }
.kennzahl.fehler { --kz: var(--fehler); --kz-grund: var(--fehler-grund); }
.kennzahl.info { --kz: var(--info); --kz-grund: var(--info-grund); }
.kennzahl .zusatz { color: var(--text); }
@media print { .kennzahl { background: var(--flaeche); } }
/* Sprungleiste der Abschnitte: kräftiger, nicht mehr blass */
.abschnitte { background: var(--zebra); border-color: transparent; box-shadow: var(--schatten-karte); }
.abschnitt-sprung { background: var(--flaeche); border-color: var(--name-rand); color: var(--name-text); font-weight: 600; }
.abschnitt-sprung:hover { background: var(--tabellenkopf); color: var(--auf-tabellenkopf); border-color: var(--tabellenkopf); }
.abschnitt-alle { background: var(--tabellenkopf); color: var(--auf-tabellenkopf); border-color: var(--tabellenkopf); }

/* ══ AUSWAHLFELD (assets/app.js 7, statt der Browserliste): ✕ leeren, ▾ ganze Liste; gewählter Name mit eigener Fläche ══ */
.auswahl { position: relative; display: inline-flex; align-items: center; width: 100%; min-width: 24em; }
.auswahl > input { flex: 1 1 auto; min-width: 0; padding-right: 64px; }
.auswahl.gefuellt > input { background: var(--name-grund); color: var(--name-text); font-weight: 700; border-color: var(--name-rand); }
.auswahl-leeren, .auswahl-pfeil { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--name-text); font: inherit;
  font-size: 1rem; line-height: 1; padding: 4px 6px; cursor: pointer; border-radius: 6px; }
.auswahl-leeren { right: 30px; }
.auswahl-pfeil { right: 4px; }
.auswahl:not(.gefuellt) .auswahl-leeren { display: none; }
.auswahl-leeren:hover, .auswahl-pfeil:hover { background: var(--hover); }
.auswahl-liste { position: fixed; z-index: 1000; margin: 0; padding: 4px 0; list-style: none; overflow-y: auto; background: var(--flaeche); border: 1px solid var(--name-rand);
  border-radius: 8px; box-shadow: var(--schatten-karte); font-size: .95rem; }
.auswahl-liste li { padding: 6px 12px; cursor: pointer; }
.auswahl-liste li:nth-child(even) { background: var(--zebra); }
.auswahl-liste li.aktiv, .auswahl-liste li:hover { background: var(--hover); }
.auswahl-liste li.gewaehlt { font-weight: 800; color: var(--name-text); background: var(--name-grund); }
.auswahl-liste li.auswahl-nichts { cursor: default; font-style: italic; }
@media (any-pointer: coarse) { .auswahl-leeren, .auswahl-pfeil { min-width: 40px; min-height: 40px; } .auswahl > input { padding-right: 88px; } .auswahl-leeren { right: 44px; } .auswahl-liste li { padding: 12px; } }
@container inhalt (max-width: 700px) { .auswahl { min-width: 14em; } }

/* Zutaten je Portion in der Rezeptbibliothek: jede Zutat ein Stück — Name kräftig, Menge daneben, deutlicher Abstand (Benutzer 01.11.2026) */
td.zutaten { line-height: 1.75; font-size: .92rem; }
.zt-name { color: var(--name-text); font-weight: 700; }
.zt-menge { font-variant-numeric: tabular-nums; color: var(--menge-text); font-weight: 700; }
/* Nr., Gericht und Preis kräftig (Benutzer 01.11.2026) */
td.rb-nr, td.rb-gericht, td.rb-preis { font-weight: 800; }
td.rb-gericht { color: var(--name-text); }
td.rb-preis .klein { font-weight: 400; }
.zt-trenn { margin: 0 .55em 0 .1em; color: var(--name-rand); font-weight: 700; }
@media (min-width: 768px) { td.zutaten .zt { white-space: nowrap; } }

/* Austauschgruppe unter dem Namen einer Abgleich-Zeile (abgleich.php ag_teile_html) */
.ag-teile { margin-top: 3px; }

/* Austauschgruppen verwalten (abgleich.php ag_verwaltung_html): je Gruppe eine Karte */
.ag-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; margin: 12px 0; }
.ag-karte { background: var(--flaeche); border: 1px solid var(--linie); border-left: 5px solid var(--kz-2); border-radius: 10px; padding: 10px 12px; box-shadow: var(--schatten-karte); }
.ag-karte.ag-neu { border-left-color: var(--marke); background: var(--marke-hell); }
.ag-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 1.05rem; color: var(--name-text); }
.ag-mitglieder { list-style: none; margin: 0 0 8px; padding: 0; }
/* Zeile = Raster Name | Einheit | Knopf (Benutzer 01.11.2026: „butonları simetrik yap, uzun isimler alt satıra inebilir"): der Name bricht in SEINER Spalte um,
   Einheit und Knopf bleiben rechts auf einer Linie; „＋ hinzufügen" hat dieselbe Breite wie „✕ heraus". */
.ag-mitglieder li { padding: 5px 6px; border-bottom: 1px solid var(--linie); display: grid; grid-template-columns: 4.6em minmax(0, 1fr) 2.4em 6.4em; align-items: center; column-gap: 8px; }
/* „★ Haupt" = Hauptartikel der Gruppe (steht in Bestellvorschlag und Soll-Rechnungen), „☆ Haupt" = als Hauptartikel festlegen — mit Wort, nicht nur Zeichen */
.ag-sternzelle { display: flex; }
.ag-stern { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 1.9em; font-size: .78rem; font-weight: 700; line-height: 1.1; border-radius: 999px;
            border: 1px solid var(--linie); background: var(--flaeche); color: var(--linie-stark); cursor: pointer; padding: 1px 4px; white-space: nowrap; }
.ag-stern:hover { border-color: var(--warn); color: var(--warn); }
.ag-stern.ist { border-color: var(--warn); background: var(--warn-grund); color: var(--warn); cursor: default; }
.ag-mitglieder li:nth-child(even) { background: var(--zebra); }
.ag-mitglieder .ag-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.ag-mitglieder li a { font-weight: 700; color: var(--name-text); }
.ag-mitglieder .ag-eh { font-size: .85rem; text-align: center; opacity: .75; }
.ag-mitglieder li > .ag-eh:last-child { grid-column: 3; }
.ag-mitglieder .zeilenform { margin: 0; display: flex; }
.ag-mitglieder .zeilenform button, .ag-form > .knopf { width: 100%; justify-content: center; white-space: nowrap; }
.ag-form { display: grid; grid-template-columns: minmax(0, 1fr) 6.4em; gap: 8px; align-items: center; padding: 0 6px; }
.ag-form .auswahl, .ag-form input.suchfeld, .ag-form input[name="neu"] { min-width: 0; width: 100%; }
.ag-umbenennen { padding: 0 6px; }
.ag-form-neu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; }
.ag-form-neu > .knopf { width: 100%; }
.ag-form-neu label { display: grid; gap: 2px; font-weight: 600; }
.ag-umbenennen summary { cursor: pointer; font-size: .85rem; margin-top: 6px; }
.sorte-genau { background: var(--warn-grund); border-color: var(--warn); }

/* Lieferantenvergleich (Plattform) */
table.lv .lv-lf { display: inline-block; padding: 1px 6px; margin: 1px 0; border-radius: 6px; }
table.lv .lv-eigen { background: var(--info-grund); box-shadow: inset 3px 0 0 var(--info); }