/* ============================================================================
   wawi.css -- die WaWi-Ergaenzung zur gemeinsamen Stilbibliothek
   ----------------------------------------------------------------------------
   Diese Datei wird NACH stil-bibliothek.css geladen und enthaelt nur, was die
   WaWi zusaetzlich braucht. Sie ist damit die zweite und letzte Stildatei von
   Pipos Vollansicht; stil.css, cockpit.css und navigation.css sind am
   20.09.2026 mit Schritt B der Design-Linie weggefallen.

   DREI REGELN FUER DIESE DATEI

   1. Gemeinsame Bauteile werden ZUERST IM DASHBOARD geaendert
      (/root/projekte/dashboard/public/stil.css, Katalog public/stil.html) und
      danach mit werkzeuge/stil-uebernehmen.sh hierher geholt. Eine Handaenderung
      an stil-bibliothek.css laesst tests_stilbibliothek.py rot werden. Karte,
      Knopf, Tabelle, Eingabefeld, Meldung, Zustandsmarke gehoeren allen Apps.

   2. Kein fester Farbwert. Alles kommt aus den Tokens der Bibliothek
      (--accent*, --good/--warn/--crit/--neutral samt -text und -bg, --line,
      --bg, --card, --text, --muted, --wurst, Radien --r/--rk/--rs/--rp,
      Abstaende --a1..--a7, Schriftgroessen --s11..--s32, --zeile-h). Einzige
      Ausnahme ist der :root-Block direkt unten, und auch der setzt nur Tokens
      auf Tokens. tests_stilbibliothek.py prueft das mechanisch.

   3. Der groesste Teil dieser Datei ist eine UEBERGANGSABBILDUNG: die 61
      Vorlagen tragen noch ihre alten Klassennamen (hinweis, karte, knopf,
      rtable, pille, feld ...), und hier bekommen diese Namen das Aussehen der
      Katalog-Bauteile. Schritt E baut die Vorlagen auf die Katalognamen um;
      dann schrumpft dieser Abschnitt auf null. In Schritt B wird KEINE Vorlage
      inhaltlich veraendert.

   SPEZIFITAET: Klassen, die es in der Bibliothek ebenfalls gibt (hinweis,
   karte, knopf, pille, feld, formular, zahlwert, zeile, aktionen, ampel, kopf,
   marke), stehen hier mit `body.wawi` davor. Reine Ladereihenfolge waere zu
   duenn: die Bibliothek hat zu mehreren dieser Klassen Regeln mit zwei Klassen
   (.knopf:hover, .pille:hover, .hinweis.an), und die schlagen eine blosse
   Klasse unabhaengig von der Reihenfolge. Ausserdem baut berichte.py die
   beiden Dateien fuer den lokalen Bericht selbst zusammen; eine Zusage, die
   nur an der Reihenfolge haengt, waere dort still verloren.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. DIE EINZIGE ABWEICHUNG VOM DASHBOARD: die Aktionsfarbe (Pipo 4A, 20.09.)
   ----------------------------------------------------------------------------
   Die WaWi handelt fuer die Wurstkutsche, also ist ihre Aktionsfarbe das
   Wurstkutsche-Blau der Firmengruppe und nicht das allgemeine Dashboard-Blau.
   Das ist der GANZE Unterschied im Aussehen; alles andere ist identisch.
   --accent-dunkel wird aus demselben Ton gerechnet, damit kein zweiter Wert
   gepflegt werden muss.
   ------------------------------------------------------------------------ */
:root{
  --accent:var(--wurst);
  --accent-bg:var(--wurst-bg);
  --accent-text:var(--wurst);
  --accent-dunkel:color-mix(in srgb,var(--wurst) 85%,black);
}

/* ---------------------------------------------------------------------------
   1. SEITE UND FLIESSTEXT
   ----------------------------------------------------------------------------
   Die Bibliothek ist fuer das Dashboard gebaut: dort gibt es Karten und
   Kacheln, aber keinen Fliesstext. Deshalb nimmt sie Absaetzen, Listen und
   Ueberschriften alle Aussenabstaende und den Listen ihre Punkte. Die WaWi
   besteht zur Haelfte aus Text (Hinweise, Erklaerungen, Rezeptbuch), also
   bekommen diese Elemente hier ihre Abstaende zurueck -- aus der Abstands-
   leiter, nicht aus Browservorgaben.
   ------------------------------------------------------------------------ */
body.wawi{overflow-x:clip}
/* overflow-wrap:anywhere gilt fuer die ganze Flaeche und nicht nur fuer
   Tabellenzellen: ein Artikelname ohne Trennzeichen sprengt sonst als
   Ueberschrift die Seite (gemessen 20.09.2026: 2625 px Dokument in einem
   1280 px breiten Fenster). Die Regel kam am 11.09.2026 mit cockpit.css. */
.inhalt{max-width:60rem;margin:0 auto;padding:var(--a7) var(--a6);overflow-wrap:anywhere}
body.wawi fieldset{min-width:0;max-width:100%}
/* Auf breiten Schirmen darf der Inhalt atmen: die Tabellen (Preisliste,
   Startseite) sind die Hauptnutzer der Breite. */
@media (min-width:1400px){
  .inhalt,.kopf-innen{max-width:78rem}
}
.inhalt :where(p,ul,ol,dl){margin:var(--a4) 0}
.inhalt :where(ul,ol){padding-left:var(--a7);list-style:disc}
.inhalt ol{list-style:decimal}
.inhalt li{display:list-item}
.inhalt ul.knapp{margin:var(--a2) 0 0;padding-left:var(--a6)}
.inhalt h1{font-family:var(--f-head);font-size:var(--s24);line-height:1.25;margin:0 0 var(--a6)}
.inhalt h2{font-family:var(--f-head);font-size:var(--s17);line-height:1.3;margin:var(--a7) 0 var(--a4)}
.inhalt h3{font-family:var(--f-head);font-size:var(--s15);line-height:1.3;margin:var(--a6) 0 var(--a2)}
.inhalt h1+h2,.inhalt :where(h2,h3):first-child{margin-top:0}
/* Links tragen ihre Farbe, keinen Unterstrich: in einer Tabelle mit vier
   Aktionslinks je Zeile ist der Unterstrich das lauteste Element der Seite.
   Im Fliesstext unterstreicht der Mauszeiger auf Verlangen. Ausnahme bleiben
   die Zustands-Sprungmarken weiter unten, dort traegt die Stufenfarbe schon
   den Linkhinweis nicht mehr. */
a{text-decoration:none}
a:hover{text-decoration:underline}
.datum{white-space:nowrap}   /* '2026-08-27' ist EIN Wert, kein Umbruchpunkt */
.vorformatiert{white-space:pre-line;overflow-wrap:anywhere}
.warn-text,.kennz-fehlt{color:var(--crit-text)}
.kennz-fehlt{font-weight:600}
.zu-viel{color:var(--crit-text);font-weight:700}
.zu-wenig{color:var(--good-text);font-weight:600}
/* Eine Fehlerzeile ohne Kasten (Bestandsvergleich). Sie hatte bis zum
   20.09.2026 ueberhaupt keine Regel und stand als gewoehnlicher Absatz da,
   obwohl sie role="alert" traegt. */
.fehler{color:var(--crit-text);font-weight:600}

/* Formularelemente ausserhalb eines .feld: Mengenfelder in Tabellenzeilen,
   Auswahlfelder in Werkzeugleisten, Textfelder in Storno-Formularen. Die
   Bibliothek kleidet nur `.feld > input` ein; ohne diese Regel stuenden die
   uebrigen Felder in Browservorgabe mitten zwischen Katalog-Bauteilen. */
.inhalt :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){
  font-family:inherit;max-width:100%;min-height:var(--zeile-h);
  padding:var(--a2) var(--a4);border:1px solid var(--line);border-radius:var(--rs);
  background:var(--card);color:var(--text);font-size:var(--s15)}
.inhalt :where(textarea){resize:vertical}
@media (max-width:1000px){
  .inhalt :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){min-height:40px}
}

/* ---------------------------------------------------------------------------
   2. KOPFZEILE UND BEREICHSMENUE (Design-Linie Schritt C, 20.09.2026)
   ----------------------------------------------------------------------------
   Der Kopf traegt jetzt das Muster des Dashboards: Marke mit Zeichen links,
   Nutzerzeile rechts, darunter drei Menuereihen. Die Bauteile kommen aus der
   Bibliothek (.marke samt .zeichen, .reiter, .pille, .plakette); hier steht
   nur, was die WaWi anders BRAUCHT.

   Das Menue bleibt OBEN (Pipo 2B, 20.09.2026): die WaWi laeuft im Rahmen des
   Dashboards neben dessen Seitenleiste, eine zweite Seitenleiste waere dort
   die doppelte Navigation. Darum werden die Reiter der Bibliothek, die fuer
   die senkrechte Leiste als Raster mit Symbolspalte gebaut sind, hier
   waagerecht gestellt.
   ------------------------------------------------------------------------ */
body.wawi .kopf{display:block;background:var(--card);color:var(--text);
  border-bottom:1px solid var(--line);padding:0;border-radius:0}
/* Dieselbe Breite und derselbe Seitenrand wie .inhalt darunter: nur so steht
   die Marke genau ueber der Ueberschrift der Seite. */
.kopf-innen{max-width:60rem;margin:0 auto;display:grid;gap:var(--a3);
  padding:var(--a5) var(--a6)}
/* Erste Zeile. Im Dashboard sitzt der Inhaber am Handy neben der Marke; hier
   tut das die Nutzerzeile auf jeder Breite: sie darf schrumpfen (min-width:0
   an .wer), statt in eine eigene Zeile zu rutschen. */
.kopf-zeile{display:flex;align-items:center;gap:var(--a3) var(--a5)}
body.wawi .marke{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-head);font-weight:700;font-size:var(--s17);
  color:var(--text);white-space:nowrap;flex:0 0 auto}
body.wawi .marke:hover{text-decoration:none}
/* Das WK-Zeichen ist eine Bilddatei und kein Symbol aus dem Sprite-Satz des
   Dashboards. Es bekommt die Rundung der Kachel, damit in der weichen Flaeche
   kein hartes Quadrat steht. */
body.wawi .marke .zeichen img{display:block;border-radius:var(--a2)}
/* Rechtsbuendig wie die Inhaberzeile des Dashboards. min-width:0 ist die
   ganze Zusage "beide auf einer Zeile": ohne sie ist der Flex-Mindestwert die
   volle Textbreite, und die Zeile bricht bei 360 px um. */
.wer{margin-left:auto;min-width:0;text-align:right;
  font-size:var(--s13);color:var(--muted);overflow-wrap:anywhere}
.wer a{color:var(--muted)}
.navigation{display:grid;gap:var(--a2);min-width:0}
/* Alle drei Reihen brechen um und bleiben damit innerhalb des Fensters; am
   Handy ist das die Pillenleiste des Dashboards (.desk-leiste). */
.navigation nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--a2)}
/* Erste Reihe, die Bereiche: waagerechter Reiter. Anzeigeart und Textfarbe
   sind umgestellt, Polsterung, Rundung, Schriftgroesse und der aktive Grund
   kommen aus der Bibliothek. Die faerbt beim Ueberfahren nur `button.reiter`,
   unsere Reiter sind Links. */
body.wawi .bereich-nav a.reiter{display:inline-flex;align-items:center;
  gap:var(--a2);max-width:100%;color:var(--text);text-decoration:none}
body.wawi .bereich-nav a.reiter:hover{background:var(--bg);text-decoration:none}
/* Zweite und dritte Reihe, Orte und Kontextmenue: Pillen. Die WaWi nennt
   `.pille` sonst den Firmenchip (Abschnitt 3: getoenter Grund, kein Rand); im
   Menue gilt die Filterpille der Bibliothek, darum hier zurueckgeholt. */
body.wawi .ort-nav a.pille{display:inline-flex;align-items:center;gap:7px;
  max-width:100%;padding:4px 11px;border:1px solid var(--line);
  border-radius:var(--rp);background:var(--card);color:var(--text);
  font-size:var(--s13);font-weight:400;white-space:normal;text-decoration:none}
body.wawi .ort-nav a.pille:hover{background:var(--bg);border-color:var(--line-stark)}
body.wawi .ort-nav a.pille.an{background:var(--accent-bg);
  border-color:var(--accent-bg);color:var(--accent-text);font-weight:600}
/* Dritte Reihe: dieselbe Form, eine Schriftstufe kleiner. */
body.wawi .kontext-nav a.pille{font-size:var(--s12)}
/* Die Zahl der offenen Vorschlaege IST die Plakette der Bibliothek. Hier
   steht nur der Fall, den es dort nicht gibt: auf der aktiven Pille laegen
   sonst Plakettengrund und Pillengrund uebereinander. */
body.wawi .ort-nav a.pille.an .nav-zahl{background:var(--card)}
/* Im Dashboard-Rahmen (Design-Linie Schritt D, 20.09.2026): die erste
   Kopfzeile ist weg, oben steht nur noch das Bereichsmenue. Das Dashboard hat
   ueber dem Rahmen schon Luft, darum faellt der obere Innenabstand von Kopf
   und Inhalt hier eine Stufe kleiner aus. Mehr nicht: keine Farbe, kein neuer
   Wert, alles aus den vorhandenen Abstandsstufen. */
body.im-rahmen .kopf-innen{padding-top:var(--a3)}
body.im-rahmen .inhalt{padding-top:var(--a5)}
.sprung-inhalt{position:absolute;left:var(--a5);top:-10rem;z-index:100;
  padding:var(--a4) var(--a5);background:var(--card);color:var(--text);
  border:2px solid currentColor;border-radius:var(--rs)}
.sprung-inhalt:focus{top:var(--a2)}
@media (max-width:639px){
  .kopf-innen{padding:var(--a4) var(--a5)}
  .wer{font-size:var(--s12)}
  .inhalt{padding:var(--a6) var(--a5)}
  /* Am Handy eine Stufe enger als oben: die Zeile darueber ist hier
     ohnehin schon knapper (.kopf-innen mit a4). Noetig ist die Wiederholung
     nicht - `body.im-rahmen .kopf-innen` sticht die Kurzform schon durch die
     hoehere Spezifitaet -, sie setzt nur den kleineren Wert. */
  body.im-rahmen .kopf-innen{padding-top:var(--a2)}
  body.im-rahmen .inhalt{padding-top:var(--a4)}
}

/* ---------------------------------------------------------------------------
   3. UEBERGANGSABBILDUNG: alte Klassennamen auf die Katalog-Bauteile
   ----------------------------------------------------------------------------
   Alles in diesem Abschnitt verschwindet mit Schritt E, sobald die Vorlagen
   die Katalognamen selbst tragen. Bis dahin sieht die WaWi damit aus wie der
   Katalog, ohne dass eine einzige Vorlage angefasst werden muss.
   ------------------------------------------------------------------------ */

/* --- Karte: die Bibliothekskarte, aber als Block statt als Raster. Die 123
       WaWi-Karten enthalten Fliesstext, Klappbloecke und ganze Tabellen und
       arbeiten heute mit eigenen Aussenabstaenden; als Raster mit fester
       Zeilenfolge wuerden sie sich gegenseitig stauchen. Aussehen (weiss,
       Haarlinie, Radius, kein Schatten) ist identisch. --- */
body.wawi .karte{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--a5);margin:var(--a5) 0;min-width:0;
  overflow-wrap:anywhere;grid-template-rows:none;gap:0}
body.wawi .karte>:where(h2,h3):first-child{margin-top:0}
/* Eine Karte, die nur sagt, dass nichts da ist. Sie muss die Karte selbst
   schlagen, deshalb steht sie hier mit beiden Klassen. */
body.wawi .karte.leer{color:var(--muted);padding:var(--a7);text-align:center}
/* Kopfzeile einer klappbaren Karte (Makro klappkarte). Bewusst NICHT
   .blockkopf: der zieht eine Trennlinie ueber die volle Breite, die mitten im
   Kartenrahmen haengen wuerde. */
summary.kartenkopf{cursor:pointer;font-family:var(--f-head);font-weight:600;font-size:var(--s15)}
summary.kartenkopf .hinweis{font-weight:400}

/* --- Knoepfe. In der Bibliothek ist Blau ausdruecklich die Ausnahme
       (.knopf.pri), weiss der Normalfall. Die WaWi benutzt `.knopf` und den
       blossen <button> heute als HAUPTknopf ("Speichern", "Erfassen") und
       `.knopf-leicht` als den weissen daneben. Diese Zuordnung bleibt in
       Schritt B erhalten und wird hier nur uebersetzt: .knopf sieht aus wie
       .knopf.pri, .knopf-leicht wie der weisse .knopf, .mini-knopf wie
       .knopf.klein. Schritt E dreht das um und setzt `pri` in die Vorlagen.
       Ohne diese Regeln waere jeder blosse <button> unsichtbar: die
       Bibliothek setzt `button{background:none;border:0}`. --- */
body.wawi :is(button,.knopf){display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-head);font-weight:600;font-size:var(--s13);line-height:1.25;
  padding:var(--a2) var(--a5);border:1px solid var(--accent);border-radius:var(--rp);
  background:var(--accent);color:var(--weiss);cursor:pointer;white-space:nowrap;
  min-height:var(--zeile-h);
  transition:background .12s ease,border-color .12s ease,color .12s ease}
body.wawi :is(button,.knopf):hover{background:var(--accent-dunkel);
  border-color:var(--accent-dunkel);color:var(--weiss);text-decoration:none}
body.wawi :is(button,.knopf)[disabled]{opacity:.5;cursor:default}
body.wawi .knopf-leicht{background:var(--card);color:var(--accent-text);border-color:var(--line)}
body.wawi .knopf-leicht:hover{background:var(--accent-bg);color:var(--accent-text);
  border-color:var(--line-stark)}
/* Die Zeilenknoepfe (Standard, als Special, nur beobachten) sind KEINE
   Hauptknoepfe: als blaue Flaeche mit voller Hoehe passten drei davon nicht
   mehr in eine Tabellenzeile (Pipo, 12.09.2026: "komplett blau, nichts mehr
   lesbar"). Sie sind der kleine Zeilenknopf des Katalogs. */
/* Pipo, 20.09.2026 abends, erster Blick auf den Livestand: die Zeilenknoepfe
   (Standard, Als Special, Nur beobachten) standen "kreuz und quer" auf drei
   Zeilen, weil sie als Pille mit voller Zeilenhoehe und groesserer Schrift
   breiter wurden als die feste Aktionsspalte (25 %, siehe colgroup in der
   Artikelliste: drei Knoepfe muessen dort in EINE Reihe passen). Darum wieder
   so kompakt wie bis zum 20.09.: Schrift eine Stufe kleiner, Hoehe aus der
   Schrift, eckigere Rundung wie der kleine Katalogknopf. Ein nowrap auf der
   ganzen Zelle war der erste Versuch und schnitt die Knoepfe am Tabellenrand
   ab (table-layout fixed gibt nichts nach), darum nicht. */
body.wawi .mini-knopf{background:var(--card);color:var(--accent-text);
  border:1px solid var(--line);border-radius:var(--rs);font-size:var(--s11);font-weight:600;
  padding:1px 7px;min-height:0;line-height:1.35;
  white-space:nowrap}   /* "entfernen" brach in schmalen Spalten mitten im Wort um */
body.wawi .mini-knopf:hover{background:var(--accent-bg);border-color:var(--accent);
  color:var(--accent-text)}
/* Ausnahme fuer die WENIGEN Mini-Knoepfe, deren Beschriftung einen fremden
   Namen enthaelt und damit beliebig lang wird ("⭐ Lechle Metzgerei als
   Standard"). Gemessen am 28.08.2026 bei 360 px und 130 % Systemschrift: 270 px
   Knopf in einer 249 px breiten Karte, und weil die Aktionszelle rechtsbuendig
   ausrichtet, haengt der Ueberschuss LINKS aus der Karte heraus. */
body.wawi .mini-knopf.umbruch{white-space:normal;overflow-wrap:break-word}
@media (max-width:1000px){
  body.wawi :is(button,.knopf){min-height:40px}
  body.wawi .mini-knopf{min-height:40px}
}

/* --- Hinweis. ACHTUNG, die wichtigste Regel dieser Datei: in der Bibliothek
       ist `.hinweis` der TOAST am unteren Fensterrand (position:fixed,
       opacity:0). In der WaWi ist `.hinweis` der leise Begleittext, 435 Mal in
       den Vorlagen. Ohne den vollstaendigen Rueckbau haengen 435 Kaesten
       unsichtbar am Fensterrand. Deshalb wird hier JEDE Eigenschaft des Toasts
       zurueckgenommen, nicht nur Position und Farbe.
       Der Katalog kennt den Begleittext als `.hinweis`-Gegenstueck nicht; die
       Meldung im Inhalt heisst dort `.meldung` und steht weiter unten. --- */
body.wawi .hinweis{position:static;left:auto;bottom:auto;transform:none;
  opacity:1;pointer-events:auto;transition:none;z-index:auto;max-width:none;
  background:none;border-radius:0;padding:0;
  color:var(--muted);font-size:var(--s13);line-height:1.4}
body.wawi .hinweis a{color:var(--accent-text)}

/* --- Meldungen im Inhalt: die `.meldung` des Katalogs unter ihren alten
       Namen. meldung-fehler ist ein Widerspruch ("das geht so nicht"), also
       die kritische Stufe; meldung-ok die gute. --- */
body.wawi :is(.meldung-ok,.meldung-fehler){display:block;min-width:0;
  overflow-wrap:anywhere;border-radius:var(--rs);padding:var(--a4) var(--a5);
  margin:var(--a4) 0;font-size:var(--s13);line-height:1.4;border-left:3px solid}
body.wawi .meldung-ok{background:color-mix(in srgb,var(--good) 11%,white);
  border-left-color:var(--good);color:var(--good-text)}
body.wawi .meldung-fehler{background:var(--crit-bg);
  border-left-color:var(--crit);color:var(--crit-text)}

/* --- Formular und Feld. Das Formular bleibt eine Karte (display:block, die
       22 Formulare arbeiten heute mit Aussenabstaenden ihrer Felder; das
       Raster des Katalogs kommt mit Schritt E). Die Beschriftung uebernimmt
       das Aussehen von `.feld-name`: Ueberschriftenschrift statt der alten
       gesperrten Grossbuchstaben. Die Eingabefelder selbst kleidet bereits die
       Bibliothek ein (.feld > input), hier steht nur, was sie nicht kennt. --- */
body.wawi form.formular{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--a5);margin:var(--a5) 0;min-width:0}
body.wawi .feld{display:block;margin:0 0 var(--a5);min-width:0}
body.wawi .feld>label{display:block;font-family:var(--f-head);font-weight:600;
  font-size:var(--s13);line-height:1.3;color:var(--text);padding-bottom:var(--a1)}
body.wawi .feld :where(input:not([type=checkbox]):not([type=radio]),select,textarea){width:100%}
body.wawi .feld textarea{min-height:4rem}
/* Eine Zeile nebeneinanderstehender Felder (die Katalogform heisst
   .formular-zeile und stapelt unter 1000 px von selbst; hier bleibt der
   Umbruch ueber flex-wrap, weil die Felder sehr verschiedene Breiten haben). */
body.wawi .zeile{display:flex;gap:var(--a5);flex-wrap:wrap;min-height:0;
  padding-top:0;padding-bottom:0;align-items:flex-start}
body.wawi .zeile>.feld{flex:1 1 12rem;min-width:0}
body.wawi .zeile>.feld.schmal{flex:0 0 7rem;min-width:7rem}
.radio-gruppe{display:flex;gap:var(--a6);padding:var(--a1) 0;flex-wrap:wrap}
body.wawi .radio-gruppe label{font-size:var(--s15);font-weight:400;display:flex;
  align-items:center;gap:var(--a1);color:var(--text);padding-bottom:0}
/* Auswahl-Chips (Standplatz, 19.09.2026): ein Radio je Chip, der Punkt ist
   versteckt, der markierte Chip faerbt sich. Umbruch statt Scrollen, damit es
   am Handy passt. Die Form ist die Pille des Katalogs. */
.chips-gruppe{display:flex;flex-wrap:wrap;gap:var(--a2);padding:var(--a1) 0}
body.wawi .feld label.chip-wahl,body.wawi .chip-wahl{display:inline-flex;font-size:var(--s15);
  font-weight:400;color:var(--text);margin:0;padding-bottom:0;cursor:pointer}
.chip-wahl input{position:absolute;opacity:0;width:0;height:0}
.chip-wahl span{display:inline-block;padding:var(--a2) var(--a5);border:1px solid var(--line);
  border-radius:var(--rp);background:var(--card);line-height:1.25}
.chip-wahl input:checked+span{background:var(--accent);color:var(--weiss);border-color:var(--accent)}
.chip-wahl input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
/* Ein Formular, das in einer Tabellenzeile steht und nicht umbrechen soll. */
.inline-form{display:inline}
/* Einzelnes Eingabefeld in einer Werkzeugleiste (Mengenbox, Suchfeld) */
.feld-inline{max-width:9rem}
/* Freitextfeld in einer Tabellenzeile (Portionshinweis der Speisekarte):
   wie .feld-inline, nur ohne die Deckelung fuer Mengen- und Suchfelder. */
.feld-inline.breit{max-width:none;width:100%}
/* Suchfeld ueber einer Artikel-Auswahl (V8, 27.08.2026). bloecke.js erzeugt es
   zwischen Beschriftung und Auswahlfeld; etwas kleiner und mit Abstand nach
   unten, damit es als Hilfsmittel erkennbar bleibt und nicht wie ein zweites
   Pflichtfeld aussieht. */
.zutat-filter{font-size:var(--s13);margin-bottom:var(--a1)}
.werkzeugleiste{display:flex;gap:var(--a4);align-items:center;flex-wrap:wrap;
  margin:var(--a4) 0 var(--a6)}
.werkzeugleiste .rechts,.rechts{margin-left:auto}
/* Aktiver Filter in einer Werkzeugleiste */
body.wawi .aktiv-filter{font-weight:700;text-decoration:underline}
/* Rueckmeldung neben einem Zeilen-Formular, das ohne Neuladen speichert
   (bloecke.js, 29.08.2026): "Gespeichert" leise, Fehler in Warnfarbe. */
.zeilen-melder{margin-left:var(--a2);font-size:var(--s12);color:var(--good-text);white-space:nowrap}
.zeilen-melder-rot{color:var(--crit-text);white-space:normal}

/* --- Aktionen einer Tabellenzeile als eine Einheit: in der Mobil-Karte
       sollen sie zusammen umbrechen, nicht Wort fuer Wort. Im Katalog ist
       `.aktionen` eine rechtsbuendige Flexzeile ueber die volle Breite; hier
       steht sie mitten in einer Zelle, also inline. --- */
body.wawi .aktionen{display:inline-flex;flex-wrap:wrap;align-items:center;
  justify-content:flex-start;gap:var(--a1) var(--a2)}

/* --- Zahlen. Im Katalog ist `.zahlwert` das grosse Kennzahlenfeld (ein
       Raster aus Name, Wert, Einordnung); in der WaWi ist es seit August die
       rechtsbuendige Zahlenzelle einer Tabelle. `display:revert` gibt der
       Zelle ihren Zellencharakter zurueck, ohne dass hier jede Trageform
       (td, th, span) einzeln aufgezaehlt werden muss. --- */
body.wawi .zahlwert{display:revert;gap:0;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
body.wawi th.zahlwert{text-align:right}

/* --- Tabelle. Das Katalog-Bauteil heisst `table.tabelle`, die WaWi nennt es
       `rtable`. Uebernommen sind Kopfzeile, Haarlinien, Zahlenspalten und das
       Stapelmuster unter 640 px. Anders als im Katalog behaelt die WaWi-
       Tabelle ihren AEUSSEREN Rahmen: dort sitzt jede Tabelle in einer Karte,
       hier stehen die meisten frei auf der Seite. --- */
.rtable{width:100%;max-width:100%;min-width:0;border-collapse:collapse;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rtable th{font-family:var(--f-head);font-weight:600;font-size:var(--s12);
  color:var(--muted);letter-spacing:.04em;text-transform:uppercase;text-align:left;
  line-height:1.3;vertical-align:bottom;padding:var(--a2) var(--a3);
  border-bottom:1px solid var(--line);background:var(--neutral-bg)}
.rtable td{font-size:var(--s13);line-height:1.35;text-align:left;vertical-align:top;
  padding:var(--a3);overflow-wrap:anywhere}
/* Zebra statt Vollrahmen (G2, 28.08.2026). Vorher trug JEDE Zelle eine
   Unterkante, und bei sechs Spalten mal dreissig Zeilen zieht dieses Gitter
   mehr Aufmerksamkeit auf sich als die Zahlen darin. Der Ton ist bewusst der
   Seitengrund: die Kopfzeile bleibt der dunkelste Streifen, und Farbe als
   BEDEUTUNG bleibt der Zustandssprache vorbehalten. */
.rtable tbody tr:nth-child(even){background:var(--bg)}
.rtable tbody tr:hover{background:var(--accent-bg)}
.rtable td[data-label=""] a{white-space:nowrap}   /* Aktionslinks nicht umbrechen */
/* Gestapelte Tabellen gleicher Bauart (ein Block je Lieferant) muessen ihre
   Spalten UNTEREINANDER haben. Automatisch tut das keine: der Browser misst
   jede <table> fuer sich. Feste Aufteilung plus <colgroup> im Template ist die
   einzige Loesung, die den aufklappbaren <details>-Block behaelt. */
.rtable.spalten-fest{table-layout:fixed}
/* Die Zeile der gerade geoeffneten Ausfuehrung in der Gruppentabelle.
   `tbody` steht bewusst im Selektor: ohne das haette der Zebra-Streifen oben
   die hoehere Spezifitaet und jede zweite Ausfuehrung waere still gestreift
   statt markiert -- ein Fehler, der genau jede zweite Zeile trifft und
   deshalb wie Absicht aussieht. */
.rtable tbody tr.eigene-zeile{background:var(--accent-bg)}
/* Kurz hervorheben, was gerade bearbeitet wurde: nach der Weiterleitung sucht
   man sonst in einer langen Tabelle die Zeile, auf die man eben geklickt hat. */
.eben-bearbeitet{animation:aufblitzen 2s ease-out}
@keyframes aufblitzen{
  0%{background:var(--accent-bg)}
  100%{background:transparent}
}

/* --- Pille. Im Katalog gibt es zwei verwandte Formen: der Firmenchip
       (`.chip`, getoenter Grund, dunklere Schrift) und die Filterpille
       (`.pille`, weiss mit Rand). Die WaWi-Pille sagt, was etwas IST
       (Preisart, Eigenrezept, Special) -- das ist der Chip. Die Toene kommen
       aus den vorhandenen Firmen- und Ampeltokens; eine eigene Palette je
       Preisart waere genau die zweite Farbwelt, die dieser Schritt abschafft.
       Welche Bedeutung am Ende welchen Ton bekommt, entscheidet Schritt E mit
       den Vorlagen; hier zaehlt, dass die Arten unterscheidbar bleiben. --- */
body.wawi .pille{display:inline-block;font-size:var(--s12);line-height:1.35;
  border:0;border-radius:var(--rp);padding:2px 9px;white-space:nowrap;
  background:var(--neutral-bg);color:var(--muted-stark);font-weight:400}
body.wawi a.pille{text-decoration:none}
body.wawi .pille.laden{background:var(--accent-bg);color:var(--accent-text)}
body.wawi :is(.pille.b2b,.pille.staffel,.pille.oem){background:var(--korni-bg);color:var(--korni)}
body.wawi .pille.aktion{background:color-mix(in srgb,var(--warn) 11%,white);color:var(--warn-text)}
body.wawi :is(.pille.rechnung,.pille.eigen){background:var(--collabo-bg);color:var(--collabo)}
body.wawi .pille.eigen a{color:inherit}
body.wawi .pille.special{background:var(--privat-bg);color:var(--privat)}

/* ---------------------------------------------------------------------------
   4. ZUSTANDSSPRACHE (Etappe 7, 28.08.2026, unveraendert in der Bedeutung)
   ----------------------------------------------------------------------------
   Vier Stufen, und jede traegt FARBE UND SYMBOL. Farbe allein ist kein
   Traeger: am Verkaufsfenster steht die Sonne auf dem Bildschirm, und wer Rot
   und Gruen nicht auseinanderhaelt, sieht von einer roten Kante nichts.

     zustand-ok         gruen  ✓  passt, hier ist nichts zu tun
     zustand-annahme    grau   ⓘ  gerechnet, aber nicht belegt
     zustand-luecke     gelb   ▲  etwas fehlt, das ist Arbeit
     zustand-blockiert  rot    ✖  so geht es nicht

   Das Symbol steht als ::before im Stylesheet und NICHT in den Vorlagen: je
   Stufe gibt es damit genau eine Stelle, und keine Vorlage kann eine
   Zustandsfarbe setzen, ohne ihr Zeichen mitzunehmen.

   Neu ist seit dem 20.09.2026 nur die HERKUNFT der Farben: sie kommen aus der
   Ampelgruppe der Bibliothek (--good/--warn/--crit/--neutral) statt aus einer
   eigenen Palette. Achtung beim Lesen: das alte --warn der WaWi war ROT, das
   --warn der Bibliothek ist GELB. Rot heisst hier --crit.
   ------------------------------------------------------------------------ */
.zustand-ok{color:var(--good-text)}
.zustand-annahme{color:var(--muted-stark)}
.zustand-luecke{color:var(--warn-text)}
.zustand-blockiert{color:var(--crit-text)}
/* Die Symbole. Die Ampel haengt bewusst in denselben Regeln: ein zweiter Satz
   Zeichen waere ein zweiter Ort, an dem er veralten kann.
   Warum ✖ und nicht ein Stoppschild: Achteck und Stoppschild (U+26D4,
   U+1F6D1) gibt es in den Zeichensaetzen dieser Maschine NUR als Farb-Emoji.
   Auf dem Aushang, der schwarzweiss gedruckt wird, waere das ein Farbfleck
   oder ein leeres Kaestchen. ✓ ⓘ ▲ ✖ sind einfarbige Glyphen.
   Das geschuetzte Leerzeichen ist Absicht: ohne es kann das Symbol am
   Zeilenende allein stehenbleiben, waehrend seine Meldung erst in der
   naechsten Zeile anfaengt. */
.zustand-ok::before,.ampel-ok::before{content:"✓\00A0"}
.zustand-annahme::before{content:"ⓘ\00A0"}
.zustand-luecke::before,.ampel-hoch::before{content:"▲\00A0"}
.zustand-blockiert::before,.ampel-alarm::before,.warnkarte::before{content:"✖\00A0"}
/* Ein Zustand, der zugleich ein Weg ist (die Sprungmarken aus Etappe 3 und 4).
   Die Stufenfarbe schlaegt das Linkblau von selbst, und das ist richtig: die
   Stufe ist die wichtigere Auskunft. Damit die Meldung trotzdem als Weg
   erkennbar bleibt, ist sie unterstrichen. Pillen sind ausgenommen, sie
   tragen ihre eigene Flaeche. */
a:is(.zustand-ok,.zustand-annahme,.zustand-luecke,.zustand-blockiert){text-decoration:underline}
/* Dieselbe Stufe als Pille, mit Flaeche: das sind genau die Zustandsmarken
   `.zustand.ok|luecke|annahme|fehler` des Katalogs. */
body.wawi .pille.zustand-ok{background:color-mix(in srgb,var(--good) 11%,white);color:var(--good-text)}
body.wawi .pille.zustand-annahme{background:var(--neutral-bg);color:var(--muted-stark)}
body.wawi .pille.zustand-luecke{background:color-mix(in srgb,var(--warn) 11%,white);color:var(--warn-text)}
body.wawi .pille.zustand-blockiert{background:var(--crit-bg);color:var(--crit-text)}
body.wawi a.pille.zustand-luecke:hover{background:color-mix(in srgb,var(--warn) 18%,white)}
body.wawi a.pille.zustand-blockiert:hover{background:color-mix(in srgb,var(--crit) 18%,white)}
/* Wareneinsatzquoten-Ampel (Kalkulation). Eigene Klassennamen behaelt sie
   bewusst: eine Quote von 42 % blockiert nichts, sie alarmiert. Geteilt wird
   nur die Darstellung. Im Katalog ist `.ampel` die Pillenreihe im Kopf, hier
   eine blosse Zahl -- deshalb der Rueckbau auf inline. */
body.wawi .ampel{display:inline;justify-content:normal;flex-wrap:nowrap;
  font-weight:700;font-variant-numeric:tabular-nums}
.ampel-ok{color:var(--good-text)}
.ampel-hoch{color:var(--warn-text)}
.ampel-alarm{color:var(--crit-text)}
/* Zaehlungen nachlesen: der Rueckgang gegenueber der vorigen Zaehlung. Farbe
   UND Zeichen, wie bei der Zustandssprache -- und das Zeichen steht auch hier
   im Stylesheet, damit keine Vorlage die Farbe ohne ihr Zeichen setzen kann. */
.mengen-runter{color:var(--warn-text);font-weight:600}
.mengen-runter::before{content:"▼\00A0"}

/* --- Warnkarten. Der Klassenname bleibt (dreissig Aufrufstellen); ihre STUFE
       ist ausdruecklich "blockiert": rote Kante wie bisher, plus das Symbol
       aus der Zustandssprache. float statt inline ist Absicht -- eine
       Warnkarte faengt mal mit einem <strong> an, mal mit einer Ueberschrift,
       mal mit einer Tabelle; als Float sitzt das Zeichen in jedem Fall oben
       links und die erste Zeile legt sich daneben. --- */
body.wawi .warnkarte{border-left:3px solid var(--crit)}
.warnkarte::before{float:left;color:var(--crit);font-weight:700}
/* Eine Warnkarte ist nicht gleich Warnkarte (Codex A-29, Befund 3): die
   Pflege-Karten der Startseite sind LUECKEN, also Arbeit -- kein "so geht es
   nicht". Nur echte Sperren (Kennzeichnung fehlt, Aushang veraltet) behalten
   das rote Kreuz. */
body.wawi .warnkarte.warnkarte-luecke{border-left-color:var(--warn)}
.warnkarte.warnkarte-luecke::before{content:"▲\00A0";color:var(--warn)}
/* Die gute Nachricht (02.09.2026): laufende Specials. Gleiche Form, aber die
   Kante ist GRUEN und ohne Kreuz -- das ist Arbeit im Gang, kein Befund. */
body.wawi .okkarte{border-left:3px solid var(--good)}

/* ---------------------------------------------------------------------------
   5. WAWI-EIGENE BAUTEILE (kein Gegenstueck im Katalog)
   ------------------------------------------------------------------------ */

/* Kopf eines Lieferanten-Blocks: Name, Anzahl und Erfassen-Knopf in einer
   Zeile, Trennlinie darueber, damit die Bloecke auf langen Seiten optisch
   auseinanderfallen. Eigener Pfeil statt des Browser-Dreiecks, damit er links
   buendig zum Text steht und in beiden Zustaenden gleich gross ist. */
.blockkopf{display:flex;align-items:baseline;gap:var(--a3);flex-wrap:wrap;
  border-top:2px solid var(--line);padding-top:var(--a4);margin-top:var(--a7);
  cursor:pointer;font-family:var(--f-head);font-weight:600;font-size:var(--s15);list-style:none}
.blockkopf::-webkit-details-marker{display:none}
.blockkopf::before{content:"▸";display:inline-block;color:var(--muted);
  transition:transform .15s;font-weight:400}
details[open] > .blockkopf::before{transform:rotate(90deg)}
.blockkopf:hover{color:var(--accent-text)}
.blockzeile{margin:var(--a2) 0 var(--a3)}
/* Untermenue der Pruef-Seiten: eine Zeile Links unter der Ueberschrift,
   optisch klar leiser als h1 und als das Kopfmenue. */
.untermenue{margin:calc(-1 * var(--a3)) 0 var(--a5);font-size:var(--s13);color:var(--muted)}

/* Zustandsknoepfe (02.09.2026): der Server malt alle drei Ziele plus den
   Special-Schalter, `data-stand` an der Huelle sagt, welche zu sehen sind. So
   dreht bloecke.js nach dem Umschalten nur das Attribut, ohne HTML zu
   erfinden. Der Schalter zeigt sich nur bei einem Special. */
.zustandsknoepfe{display:inline-flex;flex-wrap:wrap;gap:var(--a1) var(--a2);align-items:center}
.zustandsknoepfe[data-stand="sortiment"] form[data-ziel="sortiment"],
.zustandsknoepfe[data-stand="special"] form[data-ziel="special"],
.zustandsknoepfe[data-stand="referenz"] form[data-ziel="referenz"],
.zustandsknoepfe:not([data-stand="special"]) form[data-schalter]{display:none}

/* Kennzeichnung: Allergene und Zusatzstoffe ankreuzen. Zwei bis drei Spalten
   je nach Platz, am Handy eine. Feste Mindestbreite statt Spaltenzahl, damit
   lange Wortlaute nicht mitten im Wort brechen. */
.kennz-block{border:1px solid var(--line);border-radius:var(--r);padding:var(--a5)}
.kennz-block legend{font-family:var(--f-head);font-weight:600;padding:0 var(--a1)}
.kennz-liste{display:grid;gap:var(--a1) var(--a5);margin:var(--a2) 0 var(--a1);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
/* Das sind Wortlaute, die spaeter genau so am Truck stehen, keine Feldnamen:
   deshalb normale Schreibweise und normales Gewicht. `label.` bzw. der
   body-Vorsatz sind noetig, weil die Feldregel oben spezifischer ist als eine
   blosse Klasse -- die Zeile blieb sonst als einzige fett. */
body.wawi :is(.kennz-liste label,label.kennz-geprueft,.kennz-leerung){
  font-family:var(--f-body);font-weight:400;font-size:var(--s13);color:inherit;padding-bottom:0}
.kennz-liste label{display:flex;gap:var(--a2);align-items:baseline}
.kennz-geprueft{display:flex;gap:var(--a2);align-items:baseline;margin-top:var(--a3);
  padding-top:var(--a3);border-top:1px solid var(--line)}
.kennz-leerung{display:flex;gap:var(--a2);align-items:baseline;margin-top:var(--a3)}
/* Der Wortlaut, aus dem eine Kennzeichnung gelesen wurde (06.09.2026, Codex
   A-88 Vorschlag C1). Er steht auf der Pruefseite NEBEN den vorgeschlagenen
   Haken: die Frage ist, ob beides zusammenpasst. Feste Hoehe mit eigenem
   Rollbereich, damit eine lange Zutatenliste die Karte nicht auf zwei
   Bildschirme zieht; Umbruch mitten im Wort, weil dort Ketten wie
   "E621/E627" stehen. */
.quelltext{background:var(--bg);border:1px solid var(--line);border-radius:var(--rs);
  padding:var(--a3) var(--a4);margin:var(--a1) 0 0;max-height:12rem;overflow-y:auto;
  white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--s13)}

/* Rollen-Wahl auf /benutzer: zwei gestapelte Grossfelder statt eines
   Auswahlfelds. Es gibt genau zwei Moeglichkeiten, und die Folge ("sieht nur
   den Truck") soll man lesen, nicht aufklappen. Die ganze Zeile ist das Ziel,
   nicht der kleine Kreis. */
.rollen-wahl{border:0;padding:0;margin:var(--a5) 0}
.rollen-wahl legend{font-family:var(--f-head);font-weight:600;padding:0;margin-bottom:var(--a2)}
.rollen-feld{display:flex;gap:var(--a4);align-items:flex-start;border:1px solid var(--line);
  border-radius:var(--rs);background:var(--card);padding:var(--a4);margin-bottom:var(--a3);cursor:pointer}
.rollen-feld:hover{border-color:var(--accent)}
.rollen-feld input{margin-top:var(--a1);width:1.2rem;height:1.2rem;flex:none;min-height:0}
.rollen-feld .hinweis{margin:0}

/* Die Zaehl-Einstellungen je Zeile im Laufweg-Editor. Eigenes Formular in der
   letzten Spalte, deshalb eine eigene Regel: die Feldregel setzt jedes Feld
   auf volle Breite, und drei Kaestchen untereinander machten aus einer
   Tabellenzeile einen halben Bildschirm. Umbruch statt fester Spalten, damit
   bei 360 px nichts aus der Karte herauslaeuft. */
.zaehlart-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--a2) var(--a4)}
body.wawi .zaehlart-form .feld{margin:0}
body.wawi .zaehlart-form label{display:block;font-size:var(--s11);font-weight:600;
  color:var(--muted);margin:0 0 var(--a1);padding-bottom:0}
body.wawi .zaehlart-form input[type=text]{width:8rem}
body.wawi .zaehlart-form input.zaehlart-zahl{width:6rem}
/* Der Speichern-Knopf ganz nach rechts, egal in welcher Zeile er landet:
   sonst klebt er am Ende der letzten Beschriftung und liest sich, als
   gehoerte er zu diesem einen Kaestchen. */
.zaehlart-form button{margin-left:auto}
/* Die beiden Kaestchen: Beschriftung NEBEN dem Kasten und in normaler
   Schreibweise -- das sind Saetze ("Ampel statt Zahl"), keine Feldnamen. */
.zaehlart-schalter{display:flex;flex-direction:column;gap:var(--a1)}
body.wawi .zaehlart-schalter label{display:flex;gap:var(--a1);align-items:baseline;
  font-size:var(--s13);font-weight:400;color:inherit;margin:0;padding-bottom:0}
.zaehlart-schalter input{width:1.1rem;height:1.1rem;flex:none;min-height:0}

/* Das Lieferformular des Wareneingangs arbeitet mit <label>-Huellen statt mit
   .feld: die Beschriftung steht darin, das Feld darunter. Lange Lieferzeilen
   sollen stapeln statt sich auf Daumenbreite zusammenzudruecken (Bauplan
   Gestaltung, 11.09.2026); die Regel kommt aus cockpit.css. */
body.wawi .lieferung-form label{display:block;margin:0 0 var(--a5);
  font-family:var(--f-head);font-weight:600}
body.wawi .lieferung-form label :where(input,select,textarea){display:block;width:100%}
/* Die Bestellmengen-Knoepfe stehen zu mehreren in einer Zeile und brauchen
   Luft, wenn sie umbrechen. */
body.wawi .bestellmenge-form button{margin:var(--a1) var(--a1) var(--a1) 0}

/* Der Stand von Flos Bereich ueber der Nachlese (/zaehlungen). Eine
   Nachschlage-Karte, kein Warnkasten: sie meldet nichts, sie ist der Einstieg
   in Flos Bereich. */
.truck-stand .truck-wege{display:flex;gap:var(--a4);flex-wrap:wrap;margin:var(--a3) 0 0}

/* Die drei Tageszahlen der Uebersicht. Das Katalog-Gegenstueck heisst
   `.zahlwerte`; die Namen hier bleiben bis Schritt E. */
.tageszahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--a5)}
.tageszahl{min-width:0}
.tageszahl h2{font-size:var(--s13);color:var(--muted);font-weight:400;margin:0 0 2px}
.tageszahl strong{display:block;font-family:var(--f-head);font-weight:600;
  font-size:var(--s32);line-height:1.15;font-variant-numeric:tabular-nums}
@media (max-width:1000px){
  .tageszahlen{grid-template-columns:minmax(0,1fr);gap:var(--a3)}
}

/* Konditionen-Balken: Preisverhaeltnis sehen statt Zahlen vergleichen. */
.balken-liste{display:flex;flex-direction:column;gap:var(--a3)}
.balken-zeile.blass{opacity:.55}
.balken-text{display:flex;align-items:baseline;gap:var(--a2);flex-wrap:wrap;margin-bottom:2px}
.balken-spur{display:flex;align-items:center;gap:var(--a3)}
.balken{height:1.1rem;border-radius:var(--rs);background:var(--neutral);min-width:2px;transition:width .25s}
.balken.jetzt{background:var(--good)}
.balken.moeglich{background:var(--accent)}
.balken.laden{background:var(--line-stark)}
.balken-wert{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}

/* Preisverlaufs-Grafik. Der Farbpunkt in Legende und Sprechblase heisst im
   Quelltext `chip` (chart.js) -- im Katalog ist `.chip` der Firmenchip,
   deshalb hier ausdruecklich im Zusammenhang der Grafik zurueckgebaut. */
.chart{position:relative}
.chart-legende{display:flex;gap:var(--a5);flex-wrap:wrap;margin:0 0 var(--a2);
  font-size:var(--s13);color:var(--muted)}
.legende-eintrag{display:inline-flex;align-items:center;gap:var(--a2)}
.chart-legende .chip,.chart-tooltip .chip{display:inline-block;width:10px;height:10px;
  border-radius:3px;flex:0 0 auto;padding:0;font-size:0;line-height:0}
.chart-tooltip{position:absolute;z-index:5;background:var(--card);border:1px solid var(--line-stark);
  border-radius:var(--rk);box-shadow:0 10px 26px var(--schatten);padding:var(--a3) var(--a4);
  font-size:var(--s12);pointer-events:none;min-width:9rem;color:var(--text)}
.chart-tooltip .tip-kopf{font-weight:700;margin-bottom:var(--a1)}
.chart-tooltip div{display:flex;align-items:center;gap:var(--a2);padding:1px 0}

/* Login */
.login-rahmen{max-width:22rem;margin:12vh auto 0}
.login-rahmen h1{text-align:center}

/* ---------------------------------------------------------------------------
   6. SEITENEIGENE ERGAENZUNGEN
   ----------------------------------------------------------------------------
   Bis zum 20.09.2026 standen diese Regeln als <style>-Bloecke in sechs
   Vorlagen. Sie stehen jetzt hier, weil eine Seite mit eigenem Stilblock keine
   gemeinsame Gestaltung hat: was dort drinsteht, sieht niemand mehr, der die
   Stildateien liest, und es veraltet, sobald sich ein Bauteil aendert.
   ------------------------------------------------------------------------ */

/* Betriebskosten (Diesel, Gas, Kilometer) */
.bk-karte{overflow-wrap:anywhere}
.bk-summe{font-size:var(--s15);font-family:var(--f-head);font-weight:600}
.bk-zeile{border-top:1px solid var(--line);padding-top:var(--a4);margin-top:var(--a4)}
.bk-feld{display:inline-block;margin-right:var(--a3)}
body.wawi .bk-feld input{width:8rem}
.bk-km td,.bk-km th{white-space:nowrap}

/* Beleg-Eingang */
.beleg-karte{overflow-wrap:anywhere}
body.wawi .beleg-karte select{min-width:0;max-width:100%}
body.wawi .beleg-haken{display:block;margin:var(--a3) 0;font-size:var(--s13);cursor:pointer}
.beleg-haken input{margin-right:var(--a2)}

/* Bestandsvergleich. Die Tabelle traegt viele schmale Zahlenspalten; zwischen
   640 und 899 px stapelt sie deshalb frueher als die uebrigen. */
.bestand-filter{display:flex;flex-wrap:wrap;gap:var(--a3);align-items:end}
.bestand-filter label{flex:1 1 9rem;min-width:0}
body.wawi .bestand-filter :where(input,select){width:100%;min-width:0}
.bestand-tabelle{font-size:var(--s13)}
.bestand-tabelle td{overflow-wrap:anywhere}
.bestand-probleme{padding-left:var(--a6)}
.bestand-quelle{font-size:var(--s13)}
.bestand-quelle p{margin:var(--a1) 0}
.bestand-offen{border-left:3px solid var(--line);padding:var(--a3) var(--a5)}
@media (min-width:900px){
  .bestand-tabelle{table-layout:fixed}
  .bestand-kalender th:first-child{width:55%}
  .bestand-zaehlspanne th:first-child{width:22%}
  .bestand-tabelle th{overflow-wrap:normal}
  .bestand-tabelle td:not(.bestand-artikel){overflow-wrap:normal;vertical-align:top}
  .bestand-tabelle td:not(.bestand-artikel) small{display:inline-block;overflow-wrap:anywhere}
}
@media (min-width:640px) and (max-width:899px){
  .bestand-tabelle thead{display:none}
  .bestand-tabelle,.bestand-tabelle tbody,.bestand-tabelle tr,.bestand-tabelle td{display:block;width:100%}
  .bestand-tabelle tr{border-bottom:2px solid var(--line);padding:var(--a5)}
  .bestand-tabelle td[data-label]{display:flex;justify-content:space-between;gap:var(--a5)}
  .bestand-tabelle td[data-label]::before{content:attr(data-label);font-weight:600}
  .bestand-tabelle .bestand-artikel{display:block}
}
@media (max-width:600px){
  .bestand-filter label{flex-basis:100%}
  .bestand-tabelle td{gap:var(--a2)}
  .bestand-tabelle td::before{max-width:48%;white-space:normal}
  .bestand-tabelle .bestand-artikel{display:block;text-align:left}
  .bestand-tabelle .bestand-artikel::before{display:none}
}

/* Buchhaltung (die Seite geht als Blatt in die Akte, siehe Druckregeln unten) */
.bh-kopf{display:flex;flex-wrap:wrap;gap:var(--a4);align-items:baseline;margin:var(--a3) 0}
.bh-summe{font-family:var(--f-head);font-weight:700;font-size:var(--s17);margin:var(--a2) 0 var(--a1)}
.bh-saetze span{margin-right:var(--a6);white-space:nowrap}
.bh-offen{color:var(--crit-text)}
body.wawi .bh-storno textarea{width:100%;max-width:26rem}
body.wawi .bh-block{margin-bottom:var(--a7)}

/* Kasse */
.ks-zahl{font-family:var(--f-head);font-weight:700;font-size:var(--s24);margin:var(--a1) 0}
.ks-summen{margin:var(--a1) 0 var(--a3)}
.ks-summen span{margin-right:var(--a5);white-space:nowrap}
body.wawi .ks-feld input{width:8rem}
.ks-weg{text-decoration:line-through}
body.wawi .ks-storno textarea{width:100%;max-width:26rem}
.ks-tabelle{width:100%;border-collapse:collapse;margin:var(--a1) 0 var(--a3)}
.ks-tabelle th,.ks-tabelle td{text-align:left;padding:var(--a2) var(--a3);
  border-top:1px solid var(--line);vertical-align:top}
body.wawi .ks-tabelle .zahlwert{text-align:right;white-space:nowrap}

/* Diesel und Gas */
.dg-tabelle td,.dg-tabelle th{vertical-align:top}
.dg-zahl{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------------
   7. HANDY: aus jeder Tabellenzeile wird eine beschriftete Karte
   ----------------------------------------------------------------------------
   Dasselbe Muster wie `table.tabelle` im Katalog und wie in CRM und Hub seit
   23.07.2026. Die beiden Fallen stehen ausdruecklich dabei, weil sie hier
   teuer bezahlt wurden.
   ------------------------------------------------------------------------ */
@media (max-width:639px){
  table.rtable thead{display:none}
  table.rtable,table.rtable tbody,table.rtable tr,table.rtable td{display:block;width:100%}
  /* In der Karten-Ansicht gibt es keine Spalten mehr; die <col>-Elemente
     wuerden sonst je nach Browser eine anonyme Tabellenbox erzeugen. */
  table.rtable colgroup,table.rtable col{display:none}
  table.rtable{border:0;background:transparent;overflow:visible}
  table.rtable tbody tr{border:1px solid var(--line);border-radius:var(--rk);
    padding:var(--a2) var(--a4);margin:0 0 var(--a3);background:var(--card)}
  /* Kein Zebra am Handy: hier hat jede Zeile ihren eigenen Kartenrahmen, die
     Trennung steht also schon. Ein zweiter Ton machte daraus zwei Sorten
     Karte, und das liest sich als Zustand. */
  table.rtable tbody tr:nth-child(even),table.rtable tbody tr:hover{background:var(--card)}
  table.rtable tbody tr:last-child{margin-bottom:0}
  /* flex-wrap ist Pflicht: ohne Umbruch schiebt justify-content den Ueberschuss
     aus der Karte HERAUS statt umzubrechen -- bei der Aktionszelle nach links,
     gemessen 123 px bei 360 px Breite und 266 px bei grosser Systemschrift
     (Pipo, Android Chrome, 07.08.2026). column-gap und row-gap stehen getrennt,
     weil ein gemeinsames gap die umgebrochene Zeile zusaetzlich auseinanderreisst. */
  table.rtable td{display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;column-gap:var(--a5);row-gap:var(--a1);
    padding:var(--a1) 0;border:0;text-align:right;min-width:0}
  table.rtable td::before{content:attr(data-label);flex:0 0 auto;text-align:left;
    font-size:var(--s11);font-weight:600;text-transform:uppercase;letter-spacing:.03em;
    color:var(--muted);white-space:nowrap}
  table.rtable td[data-label=""]::before,table.rtable td:not([data-label])::before{content:none}
  table.rtable td:not([data-label]){display:block;text-align:left}
  table.rtable td:last-child{justify-content:flex-end;padding-top:var(--a2);column-gap:var(--a3)}
  table.rtable td:last-child[data-label]:not([data-label=""]){justify-content:space-between}
  table.rtable td:has(> input){flex-direction:column;align-items:stretch;text-align:left}
  /* Die Zahlenzelle bekommt oben `display:revert`, damit sie in der Tabelle
     wieder eine Zelle ist statt des Kennzahlen-Rasters aus der Bibliothek.
     Genau das macht sie hier aber zur Zelle einer unsichtbaren Tabellenzeile,
     und dann steht die Beschriftung der naechsten Spalte direkt hinter dem
     Wert statt darunter (gesehen 20.09.2026 bei 390 px: "6,00 € / kgLADEN").
     In der Kartenansicht gilt deshalb wieder die Zeilenform der Zelle. */
  body.wawi table.rtable td.zahlwert{display:flex;white-space:normal}
  body.wawi .zahlwert{white-space:normal}
}

/* ---------------------------------------------------------------------------
   8. DRUCK UND DRUCKANSICHTEN
   ----------------------------------------------------------------------------
   Aushang, Rezeptbuch und Hinweisschild rendern OHNE basis.html, laden aber
   dieselben zwei Stildateien: eine dritte Datei nur fuers Papier waere wieder
   eine Quelle mehr. Sie tragen `class="wawi aushang-druck"`, damit die Regeln
   mit body-Vorsatz auch dort gelten.
   ------------------------------------------------------------------------ */
.aushang-druck{background:var(--weiss);color:var(--text)}
.aushang-blatt{max-width:210mm;margin:0 auto;padding:var(--a6) var(--a7);
  font-size:var(--s17);line-height:1.45}
.aushang-blatt h1{font-size:var(--s32);margin:var(--a1) 0 var(--a1)}
/* Die Bibliothek nimmt Ueberschriften und Absaetzen jeden Aussenabstand. Auf
   dem Blatt gibt es aber keine `.inhalt`-Flaeche, die ihn zurueckgibt: ohne
   diese Regeln klebten im Rezeptbuch "Selbst gemacht" und "Gerichte"
   aneinander (gesehen 20.09.2026 in der Sichtprobe). */
.aushang-blatt :where(h2,h3){font-family:var(--f-head);margin:var(--a6) 0 var(--a2)}
.aushang-blatt :where(p,ul,ol){margin:var(--a3) 0}
.aushang-blatt :where(ul,ol){padding-left:var(--a7);list-style:disc}
.aushang-blatt li{display:list-item}
.aushang-untertitel{color:var(--muted);margin:0 0 var(--a6);font-size:var(--s15)}
.aushang-gericht{border-top:1px solid var(--line);padding:var(--a3) 0 var(--a2);break-inside:avoid}
.aushang-gericht h2{font-size:var(--s24);margin:0 0 var(--a1)}
.aushang-gericht p{margin:2px 0}
.aushang-gericht ul{margin:var(--a1) 0;padding-left:var(--a7);list-style:disc}
.aushang-gericht li{display:list-item}
.aushang-fehlt{font-weight:700}
.aushang-fuss{border-top:2px solid var(--line-stark);margin-top:var(--a5);padding-top:var(--a3);
  font-size:var(--s13);color:var(--text)}
.aushang-fuss p{margin:var(--a1) 0}
.aushang-hinweisschild{text-align:center;padding-top:var(--a7)}
.aushang-hinweisschild h1{font-size:calc(2 * var(--s32))}
.aushang-gross{font-size:var(--s24);line-height:1.5;margin:var(--a6) 0}
/* Druckansichten bleiben schwarzweiss. Dort behaelt die Stufe ihr SYMBOL --
   auf Papier traegt es die ganze Unterscheidung --, gibt aber Farbe, Flaeche
   und Rand ab. Hintergruende druckt ein Browser ohnehin nur auf ausdrueckliche
   Bitte; eine Stufe, die sich allein ueber ihre Flaeche erklaert, waere auf dem
   Ausdruck unsichtbar. */
.aushang-druck .zustand-ok{color:inherit;background:none;border:0}
.aushang-druck .zustand-annahme{color:inherit;background:none;border:0}
.aushang-druck .zustand-luecke{color:inherit;background:none;border:0}
.aushang-druck .zustand-blockiert{color:inherit;background:none;border:0}

@media print{
  .nur-bildschirm{display:none !important}
  /* Die Buchhaltungsseite geht als Blatt in die Akte (20.09.2026,
     BAUPLAN-eigenverzehr). Weg muss alles, was am Papier keinen Sinn hat: die
     Navigation, die Knoepfe und die Formulare. Die TABELLEN bleiben, sie sind
     der Zweck des Ausdrucks. */
  .kopf,.sprung-inhalt,.navigation,.werkzeugleiste,form,button,.knopf{display:none !important}
  .inhalt{max-width:none;padding:0}
  body.wawi .karte{border:0;box-shadow:none;padding:0;margin:0 0 var(--a5);break-inside:avoid}
  .rtable{border:0}
  .aushang-blatt{max-width:none;padding:0;font-size:12pt}
  .aushang-blatt h1{font-size:22pt}
  .aushang-gericht h2{font-size:15pt}
  .aushang-fuss{font-size:9pt}
  .aushang-hinweisschild h1{font-size:34pt}
  .aushang-gross{font-size:20pt}
  @page{margin:14mm}
}