/* Wurstkutsche WaWi. Handy-first; Akzent bayerisches Rautenblau (Wunsch Pipo
05.08., vorher Rostrot #8a3324), die warmen Beige-Neutraltoene bleiben
bewusst: Weiss-Blau plus Holz/Beige ist der Biergarten-Dreiklang. */
:root{
--akzent:#0066b3; /* Bayerisches Rautenblau (Pantone 293) */
--akzent-dunkel:#00518f;
--tinte:#2b2320;
--grau:#6b615c;
--grau-hell:#948a84;
--line:#e6ddd6;
--gitter:#eee7e0; /* Gitterlinien der Grafik, schwaecher als --line */
--hintergrund:#faf7f3;
--karte:#ffffff;
--ok:#2e6e3e;
--warn:#a33b3b;
--warn-bg:#fbeeee;
--warn-rand:#ecc9c9;
--ok-bg:#edf6ef;
/* Das Gelb der Luecken-Stufe. Die drei Werte standen bis Etappe 7 als
Literale in .pille.luecke und .ampel-hoch; seit die Zustandssprache sie
an mehreren Stellen braucht, haben sie ihr Token. Die Toene selbst sind
unveraendert, es kommt keine neue Farbe dazu. */
--luecke:#8a6414;
--luecke-bg:#fdf3dd;
--luecke-rand:#efdcb0;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
color:var(--tinte);background:var(--hintergrund);line-height:1.45;overflow-x:clip}
a{color:var(--akzent);text-decoration:none}
a:hover{text-decoration:underline}
/* Kopf */
.kopf{background:var(--akzent);color:#fff}
.kopf-innen{max-width:60rem;margin:0 auto;display:flex;align-items:center;gap:1.2rem;
padding:.55rem 1rem;height:auto;flex-wrap:wrap}
.marke{color:#fff;font-weight:700;font-size:1.05rem;white-space:nowrap}
.marke:hover{text-decoration:none}
.kopf-nav{display:flex;gap:.9rem;flex-wrap:wrap}
.kopf-nav a{color:#f6e3dc;font-size:.92rem;padding:.15rem 0}
.kopf-nav a.aktiv{color:#fff;font-weight:600;border-bottom:2px solid #fff}
.kopf-nav a:hover{color:#fff;text-decoration:none}
/* Trenner zwischen den drei Menue-Bloecken; rein dekorativ, deshalb
aria-hidden im Template und nicht markierbar. */
.nav-trenner{color:#f6e3dc;opacity:.4;user-select:none}
/* Zahl der offenen Vorschlaege am Punkt "Pruefen". */
.nav-zahl{background:#fff;color:var(--akzent);border-radius:.7rem;
padding:0 .35rem;font-size:.78rem;font-weight:700;vertical-align:.05em}
.wer{margin-left:auto;font-size:.8rem;color:#f0d9d1}
.wer a{color:#fff}
.inhalt{max-width:60rem;margin:0 auto;padding:1rem}
/* Ein Datum ist EIN Wert. Ohne das bricht '2026-08-27' an seinen
Bindestrichen, sobald eine Tabellenspalte gequetscht wird (Pipos
4K-Befund, 28.08.). */
.datum{white-space:nowrap}
/* Auf breiten Schirmen darf der Inhalt atmen: die Tabellen (Preisliste,
Startseite) sind die Hauptnutzer der Breite. 60rem bleibt der Standard,
damit Fliesstext auf Laptops lesbar bleibt. */
@media (min-width:1400px){
.inhalt,.kopf-innen{max-width:78rem}
}
h1{font-size:1.35rem;margin:.4rem 0 .9rem}
h2{font-size:1.05rem;margin:1.4rem 0 .5rem}
/* Kopf eines Lieferanten-Blocks: Name, Anzahl und Erfassen-Knopf in einer
Zeile, Trennlinie darueber, damit die Bloecke auf langen Seiten optisch
auseinanderfallen. */
.blockkopf{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
border-top:2px solid var(--line);padding-top:.7rem;margin-top:1.8rem;
cursor:pointer;font-weight:700;font-size:1.05rem;list-style:none}
/* Eigener Pfeil statt des Browser-Dreiecks, damit er links buendig zum Text
steht und in beiden Zustaenden gleich gross ist. */
.blockkopf::-webkit-details-marker{display:none}
.blockkopf::before{content:"▸";display:inline-block;color:var(--grau);
transition:transform .15s;font-weight:400}
details[open] > .blockkopf::before{transform:rotate(90deg)}
.blockkopf:hover{color:var(--akzent)}
.blockzeile{margin:.4rem 0 .6rem}
.hinweis{color:var(--grau);font-size:.88rem}
/* Karten */
.karte{background:var(--karte);border:1px solid var(--line);border-radius:.7rem;
padding:1rem;margin:.8rem 0}
/* Die erste Ueberschrift einer Karte sitzt am Kartenrand, nicht in einer
Luecke: h2 bringt 1.4rem Aussenabstand mit, und der addiert sich zum
Innenabstand der Karte.
h3 kam am 28.08. dazu (Etappe 7). Es ging vorher nur um den Abstand, jetzt
auch um die Ausrichtung: das Zustands-Symbol einer Warnkarte sitzt oben
links, und die Aushang-Vorschau faengt mit einem an. Mit dessen
Aussenabstand rutschte die Ueberschrift eine Zeile unter das Symbol, und
das ✖ stand allein ueber dem Gerichtsnamen (Sichtprobe 28.08.). */
.karte > h2:first-child,.karte > h3:first-child{margin-top:0}
/* 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-weight:700;font-size:1.05rem}
summary.kartenkopf .hinweis{font-weight:400}
ul.knapp{margin:.4rem 0 0 1.1rem;padding:0}
.inline-form{display:inline}
/* Zustandsknoepfe (02.09.): 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:.2rem .35rem;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}
.warn-text{color:var(--warn)}
/* Meldungen */
.meldung-ok{background:var(--ok-bg);color:var(--ok);border:1px solid #cfe6d4;
border-radius:.6rem;padding:.6rem .9rem;margin:.6rem 0}
.meldung-fehler{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-rand);
border-radius:.6rem;padding:.6rem .9rem;margin:.6rem 0}
/* Formulare */
form.formular{background:var(--karte);border:1px solid var(--line);border-radius:.7rem;
padding:1rem;margin:.8rem 0}
.feld{margin:0 0 .8rem}
.feld label{display:block;font-size:.8rem;font-weight:600;color:var(--grau);
margin-bottom:.25rem;text-transform:uppercase;letter-spacing:.02em}
.feld input[type=text],.feld input[type=password],.feld input[type=date],
.feld select,.feld textarea{width:100%;padding:.55rem .6rem;border:1px solid var(--line);
border-radius:.5rem;font-size:1rem;background:#fff;color:var(--tinte)}
.feld textarea{min-height:4rem}
.zeile{display:flex;gap:.7rem;flex-wrap:wrap}
.zeile .feld{flex:1;min-width:8rem}
.zeile .feld.schmal{flex:0 0 7rem;min-width:7rem}
.radio-gruppe{display:flex;gap:1rem;padding:.3rem 0}
.radio-gruppe label{font-size:.95rem;font-weight:400;text-transform:none;display:flex;
align-items:center;gap:.3rem;color:var(--tinte)}
button,.knopf{background:var(--akzent);color:#fff;border:0;border-radius:.55rem;
padding:.65rem 1.2rem;font-size:1rem;font-weight:600;cursor:pointer;display:inline-block}
button:hover,.knopf:hover{background:var(--akzent-dunkel);text-decoration:none}
.knopf-leicht{background:#fff;color:var(--akzent);border:1px solid var(--akzent)}
.knopf-leicht:hover{background:#eaf2fa;color:var(--akzent-dunkel)}
.werkzeugleiste{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:.6rem 0 1rem}
.werkzeugleiste .rechts{margin-left:auto}
/* Einzelnes Eingabefeld in einer Werkzeugleiste (Mengenbox, Suchfeld) */
.feld-inline{padding:.45rem .6rem;border:1px solid var(--line);border-radius:.5rem;
font-size:1rem;background:#fff;color:var(--tinte);max-width:9rem}
/* Freitextfeld in einer Tabellenzeile (Portionshinweis der Speisekarte):
wie .feld-inline, nur ohne die 9-rem-Deckelung fuer Mengen- und Suchfelder. */
.feld-inline.breit{max-width:none;width:100%}
/* Suchfeld ueber einer Artikel-Auswahl (V8, 27.08.). Es wird von bloecke.js
erzeugt und steht zwischen Label und Select; etwas kleiner und mit Abstand
nach unten, damit es als Hilfsmittel erkennbar bleibt und nicht wie ein
zweites Pflichtfeld aussieht. */
.zutat-filter{font-size:.9rem;margin-bottom:.25rem}
.werkzeugleiste select{padding:.45rem .6rem;border:1px solid var(--line);
border-radius:.5rem;font-size:1rem;background:#fff;color:var(--tinte)}
/* Tabellen: globaler Responsive-Standard (rtable), deckungsgleich mit CRM/Hub */
.rtable{width:100%;border-collapse:collapse;background:var(--karte);border:1px solid var(--line);
border-radius:.7rem;overflow:hidden}
.rtable th{font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;color:var(--grau);
text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line);background:#f6f1ec}
.rtable td{padding:.55rem .7rem;overflow-wrap:anywhere}
/* Zebra statt Vollrahmen (G2, 28.08.). 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 Streifen trennt die
Zeilen genauso zuverlaessig und ist still.
Der Ton ist BEWUSST der Seitenhintergrund und keine neue Farbe: die
Kopfzeile (#f6f1ec) bleibt damit der dunkelste Streifen, die Rangfolge
Kopf > Zeile > Karte stimmt weiter, und Farbe als BEDEUTUNG bleibt frei
fuer die Zustandssprache (Etappe 7).
Die Kopfzeile behaelt ihre Linie (.rtable th, oben): sie trennt
Beschriftung von Daten und ist keine Zeilentrennung. */
.rtable tbody tr:nth-child(even){background:var(--hintergrund)}
.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
fuer sich, also faengt "Kategorie" in jedem Block woanders an,
je nach laengstem Artikelnamen DIESES Blocks. Feste Aufteilung plus
im Template ist die einzige Loesung, die den aufklappbaren
-Block behaelt (eine einzige Tabelle ueber alle Lieferanten ginge
nur ohne Klappen). Die Prozente stehen bewusst neben dem , damit
beim Einfuegen einer Spalte beides zusammen auffaellt. */
.rtable.spalten-fest{table-layout:fixed}
.zahlwert{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rtable th.zahlwert{text-align:right}
.pille{display:inline-block;font-size:.72rem;font-weight:600;border-radius:.6rem;
/* Eine Pille ist EIN Wert: 'B2B-Grundpreis' auf drei Zeilen war der
haeufigste Zellenbruch der Messung vom 28.08. */
white-space:nowrap;
padding:.1rem .5rem;background:#f1e8e2;color:var(--grau)}
.pille.laden{background:#e8eef7;color:#33538a}
.pille.b2b{background:#eaf3ec;color:#2e6e3e}
.pille.staffel{background:#e4f0e9;color:#1f5c33}
.pille.oem{background:#e6eeea;color:#1f5c33;border:1px solid #cfe0d7}
.pille.aktion{background:#fdf3dd;color:#8a6414}
.pille.rechnung{background:#f3e9f5;color:#6d3a7c}
/* Special-Ware (28.08.): dritter Sortiments-Zustand, bewusst eigener Ton
(warmes Orange) statt der Preisart-Farben, damit er nicht wie eine
Preisart oder eine Warnung liest. */
.pille.special{background:#fceede;color:#9a5b1f}
.zu-viel{color:var(--warn);font-weight:700}
.zu-wenig{color:var(--ok);font-weight:600}
.leer{color:var(--grau-hell);padding:1.2rem;text-align:center}
/* ======================================================================
Zustandssprache (G3, Etappe 7, 28.08.2026)
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.
Bis hierher hiess „es fehlt etwas" ausschliesslich gelb und „so geht es
nicht" ausschliesslich rot.
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.
Damit gibt es je Stufe genau eine Stelle, an der es definiert ist, und
keine Vorlage kann eine Zustandsfarbe setzen, ohne ihr Zeichen
mitzunehmen. Die Vorlagen bleiben so schlank wie vorher.
Die Farben sind die VORHANDENEN (--ok, --grau, --luecke, --warn); in
dieser Etappe kommt kein neuer Ton dazu.
Warum ✖ und nicht das Achteck aus dem Bauplan: Achteck und Stoppschild
(U+26D4, U+1F6D1) gibt es in den Zeichensaetzen dieser Maschine NUR als
Farb-Emoji (gemessen am 28.08. im Chromium der Sichtproben). Auf dem
Aushang, der schwarzweiss gedruckt wird und wo das Symbol die ganze
Unterscheidung traegt, waere das ein Farbfleck oder ein leeres Kaestchen.
✓ ⓘ ▲ ✖ sind einfarbige Glyphen und drucken sauber.
Das geschuetzte Leerzeichen im content ist Absicht: ohne es kann das
Symbol am Zeilenende allein stehenbleiben, waehrend seine Meldung erst in
der naechsten Zeile anfaengt.
====================================================================== */
.zustand-ok{color:var(--ok)}
.zustand-annahme{color:var(--grau)}
.zustand-luecke{color:var(--luecke)}
.zustand-blockiert{color:var(--warn)}
/* Die Symbole. Die Ampel haengt bewusst in denselben Regeln (siehe unten bei
.ampel): ein zweiter Satz Zeichen waere ein zweiter Ort, an dem er
veralten kann. */
.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 (Klasse vor Element),
und das ist richtig: die Stufe ist die wichtigere Auskunft. Damit die
Meldung trotzdem als Weg erkennbar bleibt, ist sie unterstrichen -- sonst
waere von „Link" nur der Mauszeiger uebrig, und den gibt es am Handy
nicht. Pillen sind ausgenommen, sie tragen ihre eigene Flaeche. */
a.zustand-ok,a.zustand-annahme,a.zustand-luecke,a.zustand-blockiert{
text-decoration:underline}
a.pille{text-decoration:none}
/* Dieselbe Stufe als Pille, mit Flaeche. `.pille` ohne Zustand bleibt die
KATEGORIE-Pille (Preisart, Eigenrezept): sie sagt, was etwas IST, nicht
wie es steht -- deshalb bekommt sie kein Symbol. */
.pille.zustand-ok{background:var(--ok-bg);color:var(--ok)}
.pille.zustand-annahme{background:var(--hintergrund);color:var(--grau);
border:1px solid var(--line)}
.pille.zustand-luecke{background:var(--luecke-bg);color:var(--luecke);
border:1px solid var(--luecke-rand)}
.pille.zustand-blockiert{background:var(--warn-bg);color:var(--warn);
border:1px solid var(--warn-rand)}
a.pille.zustand-luecke:hover{background:#f8e9c6}
a.pille.zustand-blockiert:hover{background:#f6dede}
/* Druckansichten bleiben schwarzweiss (Aushang, Rezeptbuch, Hinweisschild).
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,.aushang-druck .zustand-annahme,
.aushang-druck .zustand-luecke,.aushang-druck .zustand-blockiert{
color:inherit;background:none;border:0}
@media (max-width:639px){
.kopf-innen{gap:.35rem .8rem;padding-top:.5rem;padding-bottom:.5rem}
.kopf-nav{gap:.55rem .8rem}
.wer{margin-left:0;width:100%}
.inhalt{padding:.75rem}
/* rtable: Tabelle -> gestapelte Karten (Label: Wert) */
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 -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:.6rem;
padding:.4rem .8rem;margin:0 0 .6rem;background:var(--karte)}
/* 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 -- der kommt erst in Etappe 7.
Muss die Grundregel ueberstimmen, deshalb eine Stufe spezifischer
(table.rtable statt .rtable). */
table.rtable tbody tr:nth-child(even){background:var(--karte)}
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.). */
table.rtable td{display:flex;justify-content:space-between;align-items:center;
flex-wrap:wrap;column-gap:1rem;row-gap:.3rem;
padding:.3rem 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:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
color:var(--grau-hell);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:.5rem;column-gap:.6rem}
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}
.zahlwert{white-space:normal}
}
/* Kennzeichnung: Allergene und Zusatzstoffe ankreuzen (07.08.) */
.kennz-block{border:1px solid var(--line);border-radius:.7rem;padding:.8rem 1rem}
.kennz-block legend{font-weight:600;padding:0 .4rem}
/* Zwei bis drei Spalten je nach Platz, am Handy eine. Feste Mindestbreite
statt Spaltenzahl, damit lange Wortlaute nicht mitten im Wort brechen. */
.kennz-liste{display:grid;gap:.15rem .9rem;margin:.4rem 0 .2rem;
grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
/* Die globale Formularregel schreibt jede Beschriftung GROSS und gesperrt.
Das ist bei einem kurzen Feldnamen richtig und bei 27 Kaestchen unlesbar,
ausserdem sind das hier Wortlaute, die spaeter genau so am Truck stehen.
Deshalb an dieser Stelle bewusst normale Schreibweise. */
/* `label.` statt nur `.`: die globale Regel ist `.feld label` und damit
spezifischer als eine blosse Klasse -- die Zeile blieb sonst als einzige
GROSS, obwohl die Liste darueber schon stimmte. */
.kennz-liste label, label.kennz-geprueft{text-transform:none;letter-spacing:0;
font-size:.92rem;font-weight:400;color:inherit;margin-bottom:0}
.kennz-liste label{display:flex;gap:.45rem;align-items:baseline}
.kennz-geprueft{display:flex;gap:.45rem;align-items:baseline;margin-top:.6rem;
padding-top:.6rem;border-top:1px solid var(--line)}
/* Die Kennzeichnung eines Artikels oder Produkts als Aufzaehlung */
/* „Angabe fehlt": roter Fetttext. Er traegt seit Etappe 7 zusaetzlich
`zustand-blockiert` (im Makro kennzeichnung), damit das Symbol dabeisteht;
die Farbe hier bleibt, sie ist dieselbe. */
.kennz-fehlt{color:var(--warn);font-weight:600}
/* Warnkarten im Dashboard.
Der Klassenname bleibt (dreissig Aufrufstellen, kein Test haengt daran);
ihre STUFE ist seit Etappe 7 ausdruecklich „blockiert": rote Kante wie
bisher, plus das Symbol aus der Zustandssprache oben. Vorher war die Kante
der einzige Traeger -- reine Farbe, und am Handy vier Pixel davon.
float statt inline ist Absicht: eine Warnkarte faengt mal mit einem
an, mal mit einer Ueberschrift, mal mit einer Tabelle. Inline
staende das Zeichen bei den beiden letzten allein auf einer Zeile; als
Float sitzt es in jedem Fall oben links und die erste Zeile des Inhalts
legt sich daneben. */
.warnkarte{border-left:4px solid var(--warn)}
.warnkarte::before{float:left;color:var(--warn);font-weight:700}
/* Eine Warnkarte ist nicht gleich Warnkarte (Codex A-29 Befund 3): die
Pflege-Karten der Startseite (Vorschlaege pruefen, Preise pruefen,
Stammdaten, Kalkulation, Erhoehungen) sind LUECKEN, also Arbeit -- kein
"so geht es nicht". Nur echte Sperren (Kennzeichnung fehlt, Aushang
veraltet, Im-Rezept-ersetzen, Unter Break-even) behalten das rote Kreuz.
Der Zusatz aendert Rand, Farbe und Symbol, der Rest der Karte bleibt. */
.warnkarte.warnkarte-luecke{border-left-color:var(--luecke-rand)}
/* Die gute Nachricht (02.09.): laufende Specials. Gleiche Form wie die
Warnkarten, damit das Auge sie als Karte liest, aber die Kante ist GRUEN
und ohne Kreuz -- das ist Arbeit im Gang, kein Befund. */
.okkarte{border-left:4px solid var(--ok)}
.warnkarte.warnkarte-luecke::before{content:"▲\00A0";color:var(--luecke)}
/* Aktions-Links einer Tabellenzeile als eine Einheit: in der Mobil-Karte
sollen sie zusammen umbrechen, nicht Wort fuer Wort. */
.aktionen{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.2rem .35rem}
/* Kleine Inline-Knoepfe (Standard markieren) */
.mini-knopf{background:#fff;color:var(--akzent);border:1px solid var(--line);
border-radius:.4rem;padding:.15rem .5rem;font-size:.75rem;font-weight:600;cursor:pointer;
white-space:nowrap} /* "entfernen" brach in schmalen Spalten mitten im Wort um */
.mini-knopf:hover{border-color:var(--akzent)}
/* Ausnahme fuer die WENIGEN Mini-Knoepfe, deren Beschriftung einen fremden
Namen enthaelt und damit beliebig lang wird ("⭐ Lechle Metzgerei als
Standard" auf der Startseite). Gemessen am 28.08. bei 360 px und 130 %
Systemschrift: 270 px Knopf in einer 249 px breiten Karte, und weil die
Aktionszelle mit justify-content:flex-end ausrichtet, haengt der Ueberschuss
LINKS aus der Karte heraus -- derselbe Fehler wie beim Standard-Stern am
07.08., nur mit einem anderen Ausloeser.
`nowrap` bleibt der Normalfall (sonst bricht "entfernen" in schmalen Spalten
mitten im Wort um, 07.08.). Hier wird stattdessen an den LEERZEICHEN
umgebrochen; `break-word` faengt zusaetzlich den Lieferantennamen ab, der
allein schon breiter ist als die Karte. */
.mini-knopf.umbruch{white-space:normal;overflow-wrap:break-word}
/* Preisverlaufs-Grafik */
.chart{position:relative}
.chart-legende{display:flex;gap:1rem;flex-wrap:wrap;margin:0 0 .4rem;font-size:.82rem;
color:var(--grau)}
.legende-eintrag{display:inline-flex;align-items:center;gap:.35rem}
.chip{display:inline-block;width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.chart-tooltip{position:absolute;z-index:5;background:#fff;border:1px solid var(--line);
border-radius:.5rem;box-shadow:0 2px 10px rgba(0,0,0,.08);padding:.45rem .6rem;
font-size:.8rem;pointer-events:none;min-width:9rem;color:var(--tinte)}
.chart-tooltip .tip-kopf{font-weight:700;margin-bottom:.2rem}
.chart-tooltip div{display:flex;align-items:center;gap:.35rem;padding:.06rem 0}
/* Login */
.login-rahmen{max-width:22rem;margin:12vh auto 0}
.login-rahmen h1{text-align:center}
/* Aktiver Filter in einer Werkzeugleiste */
.aktiv-filter{font-weight:700;text-decoration:underline}
/* Untermenue der Pruef-Seiten: eine Zeile Links unter der Ueberschrift,
optisch klar leiser als h1 und als das Kopfmenue. */
.untermenue{margin:-.5rem 0 1rem;font-size:.92rem;color:var(--grau)}
/* 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:#dceafa}
100%{background:transparent}
}
/* Hier stand bis Etappe 7 `.pille.luecke` (fehlende Stammdaten als
anklickbare Pille, die direkt ins Feld springt). Sie heisst jetzt
`pille zustand-luecke` und wohnt oben bei ihren drei Geschwistern: „gelb
heisst, hier fehlt etwas" war vorher nur an dieser Stelle definiert,
dieselbe Bedeutung stand daneben aber noch dreimal woanders. */
/* Konditionen-Balken: Preisverhaeltnis sehen statt Zahlen vergleichen. */
.balken-liste{display:flex;flex-direction:column;gap:.55rem}
.balken-zeile.blass{opacity:.55}
.balken-text{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;margin-bottom:.15rem}
.balken-spur{display:flex;align-items:center;gap:.5rem}
.balken{height:1.1rem;border-radius:.35rem;background:var(--grau-hell);min-width:2px;
transition:width .25s}
.balken.jetzt{background:var(--ok)}
.balken.moeglich{background:var(--akzent);
background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 5px,transparent 5px 10px)}
.balken.laden{background:#cfc6bf}
.balken-wert{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
/* Die Zeile der gerade geoeffneten Ausfuehrung in der Gruppentabelle.
`tbody` steht bewusst im Selektor: ohne das haette der Zebra-Streifen oben
(.rtable tbody tr:nth-child(even)) die hoehere Spezifitaet und jede zweite
Ausfuehrung waere still beige statt markiert -- ein Fehler, der genau jede
zweite Zeile trifft und deshalb wie Absicht aussieht. */
.rtable tbody tr.eigene-zeile{background:#f2f7fc}
/* Wareneinsatzquoten-Ampel (Kalkulation, Paket B).
Sie spricht seit Etappe 7 dieselbe Sprache wie der Rest: die FARBEN sind
unveraendert (sie waren schon die drei Zustandsfarben), das Symbol kommt
dazu. Die Zeichen kommen aus den Regeln oben, damit es sie nur einmal gibt.
Eigene Klassennamen behaelt die Ampel trotzdem, und das ist kein
Versehen: eine Quote von 42 % blockiert nichts, sie alarmiert.
„ampel-alarm" sagt das genauer als „zustand-blockiert", geteilt wird nur
die Darstellung. */
.ampel{font-weight:700;font-variant-numeric:tabular-nums}
.ampel-ok{color:var(--ok)}
.ampel-hoch{color:var(--luecke)}
.ampel-alarm{color:var(--warn)}
/* Eigenprodukte (25.08.): eine eigene Farbe fuer „selbst gemacht". Bewusst
NICHT eine der Preisart-Pillen wiederverwendet -- ein eigenes Rezept ist
kein Lieferantenangebot, und wer die Farbe kennt, soll den Unterschied auf
einen Blick sehen. */
.pille.eigen{background:#efeaf7;color:#4a3a7c;border:1px solid #ddd2ee}
.pille.eigen a{color:inherit}
/* Kennzeichnung: Leerungs-Riegel und woertliche Textbloecke (25.08.). */
.kennz-leerung{display:flex;gap:.45rem;align-items:baseline;margin-top:.6rem;
text-transform:none;letter-spacing:0}
.vorformatiert{white-space:pre-line;overflow-wrap:anywhere}
/* Aushang-Druckansichten (25.08.): am Bildschirm eine ruhige Vorschau, im
Druck ein A4-Blatt, lesbar aus 1 bis 2 m Theken-Abstand. */
.aushang-druck{background:#fff;color:#111}
.aushang-blatt{max-width:210mm;margin:0 auto;padding:1.2rem 1.5rem;
font-size:1.05rem;line-height:1.45}
.aushang-blatt h1{font-size:1.9rem;margin:.2rem 0 .1rem}
.aushang-untertitel{color:#444;margin:0 0 1rem;font-size:1rem}
.aushang-gericht{border-top:1px solid #bbb;padding:.55rem 0 .45rem;
break-inside:avoid}
.aushang-gericht h2{font-size:1.25rem;margin:0 0 .25rem}
.aushang-gericht p{margin:.15rem 0}
.aushang-fehlt{font-weight:700}
.aushang-fuss{border-top:2px solid #333;margin-top:1rem;padding-top:.5rem;
font-size:.85rem;color:#333}
.aushang-fuss p{margin:.25rem 0}
.aushang-hinweisschild{text-align:center;padding-top:3rem}
.aushang-hinweisschild h1{font-size:2.6rem}
.aushang-gross{font-size:1.5rem;line-height:1.5;margin:1.2rem 0}
@media print{
.nur-bildschirm{display:none !important}
.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}
}
/* Rollen-Wahl auf /benutzer (28.08.2026). 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 13-px-Kreis. */
.rollen-wahl{border:0;padding:0;margin:1rem 0}
.rollen-wahl legend{font-weight:600;padding:0;margin-bottom:.4rem}
.rollen-feld{display:flex;gap:.7rem;align-items:flex-start;
border:1px solid var(--line);border-radius:.5rem;background:var(--karte);
padding:.7rem .8rem;margin-bottom:.5rem;cursor:pointer}
.rollen-feld:hover{border-color:var(--akzent)}
.rollen-feld input{margin-top:.25rem;width:1.2rem;height:1.2rem;flex:none}
.rollen-feld .hinweis{margin:0}
/* Zaehlungen nachlesen (Stufe 4, 28.08.2026): der Rueckgang gegenueber der
vorigen Zaehlung. Farbe UND Zeichen, wie bei der Zustandssprache oben --
und das Zeichen steht auch hier im Stylesheet, damit keine Vorlage die
Farbe ohne ihr Zeichen setzen kann. Bewusst KEINE eigene Marke fuer "mehr
geworden": im Lager ist mehr keine Nachricht, und ein zweites Zeichen in
jeder Zeile macht die Spalte unlesbar. */
.mengen-runter{color:var(--luecke);font-weight:600}
.mengen-runter::before{content:"▼\00A0"}
/* Der Stand von Flos Bereich, seit 29.08. ueber der Nachlese (/zaehlungen)
statt als Karte auf der Startseite. Eine Nachschlage-Karte, kein Warnkasten:
sie meldet nichts, sie ist der Einstieg in Flos Bereich. Die vier Wege
stehen als Zeile darunter, damit sie am Handy nicht in vier Zeilen
ausfransen (Umbruch erlaubt, siehe .werkzeugleiste). */
.truck-stand .truck-wege{display:flex;gap:.7rem;flex-wrap:wrap;margin:.6rem 0 0}
/* Die Zaehl-Einstellungen je Zeile im Laufweg-Editor (29.08.). Eigenes
Formular in der letzten Spalte, deshalb eine eigene Regel: die globale
Formularregel 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 (dieselbe Falle wie in der Aktionszelle der rtable). */
.zaehlart-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.4rem .7rem}
.zaehlart-form .feld{margin:0}
.zaehlart-form label{display:block;font-size:.7rem;font-weight:600;
text-transform:uppercase;letter-spacing:.03em;color:var(--grau-hell);
margin:0 0 .15rem}
.zaehlart-form input[type=text]{width:8rem}
.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:.2rem}
.zaehlart-schalter label{display:flex;gap:.35rem;align-items:baseline;
text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:400;
color:inherit;margin:0}
.zaehlart-schalter input{width:1.1rem;height:1.1rem;flex:none}
/* Rueckmeldung neben einem Zeilen-Formular, das ohne Neuladen speichert
(bloecke.js, 29.08.2026): "Gespeichert" leise, Fehler in Warnfarbe. */
.zeilen-melder{margin-left:.5rem;font-size:14px;color:var(--ok);white-space:nowrap}
.zeilen-melder-rot{color:var(--warn);white-space:normal}
/* 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, und dafuer muss man beides
gleichzeitig sehen. 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(--hintergrund);border:1px solid var(--line);
border-radius:.4rem;padding:.5rem .6rem;margin:.2rem 0 0;
max-height:12rem;overflow-y:auto;white-space:pre-wrap;overflow-wrap:anywhere;
font-size:.9rem}