/* =========================================================================
Stenumer Mittagstisch, ein Angebot der Landküche Stenum.
Alles unterhalb des ersten Bildschirms.
Kein Framework, keine Bibliothek, kein externer Aufruf.
Grundmaße: Fließtext 20px, Zeilenhöhe 1.6, Zeilenlänge höchstens 62
Zeichen. Bedienziele mindestens 56px, Hauptaktionen 64px, Mengenknöpfe im
Warenkorb 48px. Text liegt nirgends auf einem Foto.
========================================================================= */
/* ---------- gemeinsame Bausteine ---------- */
/* Untergrenze fuer Eingabefelder: iOS zoomt beim Fokus in jedes Feld unter
16px hinein und laesst die Seite verschoben zurueck. Steht bewusst ganz
oben und mit reinen Element-Selektoren, damit jede spaetere Klassenregel
(etwa .cart__form input mit 19px) sie ueberschreibt. Sie greift also nur
dort, wo sonst gar keine Groesse gesetzt waere, zum Beispiel bei den
Auswahlknoepfen der Zahlart. */
input,select,textarea{font-size:max(16px,1em)}
.wrap--narrow{max-width:860px}
.eyebrow{margin:0 0 .5rem;font-size:16px;font-weight:700;letter-spacing:.22em;
text-transform:uppercase;color:var(--brick-ink)}
.eyebrow--pale{color:#D9BE86}
.sec{padding:clamp(48px,6vw,86px) 0;position:relative}
.sec h2{font-size:clamp(29px,3.5vw,45px);max-width:19ch;margin-bottom:.7rem}
.lead{font-size:clamp(20px,1.5vw,22px);max-width:58ch;margin:0 0 2rem;color:var(--ink-soft)}
.fein{font-size:17px;line-height:1.55;color:var(--ink-soft);max-width:58ch}
p{max-width:62ch}
.live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
clip-path:inset(50%);white-space:nowrap;margin:0}
/* ---------- 3 · Nächster Liefertag im Klartext ---------- */
.today{background:var(--linen);padding:clamp(30px,4vw,52px) 0 clamp(40px,5vw,68px);
position:relative;z-index:2}
.today__in{display:grid;gap:clamp(24px,3vw,44px);align-items:start;
padding-bottom:clamp(24px,3vw,38px)}
.today__main h2{font-size:clamp(28px,3.4vw,42px);max-width:17ch;margin-bottom:.8rem}
.today__alt{margin:0 0 1rem;color:var(--ink-soft)}
.today__eta{margin:0;font-size:21px}
.today__eta b{font-family:var(--ff-display);font-size:1.15em;font-weight:600}
.today__eta a{color:var(--brick-ink);text-underline-offset:3px}
.today__price{border:1px solid var(--linen-3);background:#fff;border-radius:4px;
padding:clamp(18px,2vw,26px);box-shadow:0 14px 30px -22px rgba(30,25,19,.55)}
.pz{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
padding:4px 0 14px}
.pz--solo{border-bottom:1px solid var(--linen-3)}
.pz__k{font-size:19px;font-weight:700}
.pz__v{font-size:19px;color:var(--ink-soft);white-space:nowrap}
.pz__v b{font-family:var(--ff-display);font-size:40px;font-weight:600;color:var(--brick-ink);
letter-spacing:-.01em}
.pz__note{margin:.9rem 0 1.1rem;font-size:17px;line-height:1.5;color:var(--ink-soft)}
.pz__add{width:100%}
.cta{display:flex;flex-wrap:wrap;gap:14px;padding-top:clamp(20px,2.5vw,30px);
border-top:1px solid var(--messing)}
.cta__note{margin:.9rem 0 0;font-size:18px;color:var(--ink-soft);max-width:60ch}
/* ---------- 4 · Der Monatsplan ---------- */
.sec--plan{background:var(--linen-2);border-top:1px solid var(--linen-3)}
.segwrap{margin:0 0 clamp(24px,3vw,36px)}
.seg{display:inline-flex;gap:6px;padding:6px;background:var(--cream);
border:1px solid #C6B79A;border-radius:6px}
.seg__b{min-height:56px;padding:10px 26px;border:0;background:transparent;
font:inherit;font-size:20px;font-weight:700;color:var(--ink-soft);border-radius:4px;
cursor:pointer}
.seg__b:hover{color:var(--ink)}
.seg__b[aria-selected="true"]{background:var(--wood-2);color:#F3ECDE;
box-shadow:inset 0 0 0 2px var(--messing)}
/* Wochen-Navigation: Monat gewählt, dann Woche. Immer nur eine Woche sichtbar.
Ohne JS erscheint die Navigation nicht und der ganze Plan steht als Liste. */
.weeknav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;
margin:0 0 clamp(20px,2.6vw,30px)}
.weeknav__arrow{min-height:52px;padding:10px 18px;font:inherit;font-size:17px;
font-weight:700;color:var(--ink);background:var(--linen);border:1px solid #C6B79A;
border-radius:4px;cursor:pointer;white-space:nowrap}
.weeknav__arrow:hover{background:var(--cream)}
.weeknav__arrow:disabled{opacity:.4;cursor:default}
.weeknav__weeks{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto}
.weekchip{min-height:52px;padding:9px 18px;font:inherit;font-size:18px;font-weight:700;
color:var(--ink);background:var(--cream);border:1px solid #C6B79A;border-radius:4px;
cursor:pointer;white-space:nowrap}
.weekchip:hover{background:#E1D5BB}
.weekchip[aria-selected="true"]{background:var(--brick-ink);color:#fff;border-color:var(--brick-ink)}
/* Eine Woche, die sich nicht mehr bestellen laesst (UX-Brief 11). Sie bleibt
lesbar und traegt den Grund als aria-label und title; der Satz darunter in
.weeknav__spanne sagt ihn ausserdem im Klartext. Nur Ausgrauen waere eine
Behauptung ohne Begruendung. */
.weekchip--zu{background:#EAE3D4;color:#6F6656;border-color:#D6CCB8}
.weekchip--zu .weekchip__d{text-decoration:line-through;text-decoration-color:#B3A88F}
.weekchip:disabled{cursor:default}
.weekchip--zu[aria-selected="true"]{background:#7A6A50;color:#fff;border-color:#7A6A50}
.weekchip--zu[aria-selected="true"] .weekchip__d{text-decoration:none}
/* Der Grund als zweite Zeile im Knopf. Er ist kleiner, aber nicht klein:
14px ist die Untergrenze, unter der auf einem Tablet nichts mehr gelesen
wird. */
.weekchip{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
/* Eine Woche, deren Bestellschluss vorbei ist, steht gar nicht mehr zur Wahl
(app.js, wochenFilterAnwenden, seit dem 24.09.2026). Die Regel muss
ausgeschrieben hier stehen: die Zeile darueber setzt display:flex und
schlaegt sonst das hidden-Attribut des Browsers. */
.weekchip[hidden]{display:none}
.weekchip__g{font-size:14px;font-weight:400;white-space:normal;line-height:1.3;
max-width:22ch;text-align:left}
/* Der Zeitraum der gerade gezeigten Woche, ausgeschrieben. Steht unter der
Wochenwahl und nicht daneben: dort liest ihn auch, wer die Reiter fuer
Verzierung haelt. */
.weeknav__spanne{margin:-14px 0 clamp(20px,2.6vw,30px);font-size:17px;font-weight:700;
color:var(--ink-soft)}
.weeknav__spanne--zu{color:#7A4A2E}
/* Bis 1000px bekommen die Wochenknoepfe eine eigene Zeile. Bei 768px und 834px
passte die Reihe "Vorige + drei Wochen + Naechste" nicht in eine Zeile und
brach in DREI Zeilen um: Vorige allein, darunter die Wochen, darunter
Naechste. Die beiden Pfeile standen also weit auseinander, obwohl sie
zusammengehoeren. Ab 1024px passt alles in eine Zeile und bleibt wie bisher. */
@media (max-width:1000px){
.weeknav__weeks{order:3;flex-basis:100%}
}
@media (max-width:640px){
/* Schmalere Box, mehr Zeilen. Gemessen bei 375px Fensterbreite an der
natuerlichen Hoehe aller vier Fassungen: Ruhe 144,9, Zu-wenig 116,4,
Ja 149,1, Nein 149,1. Hoechster Wert 149,1 -> 150px.
Selektor bewusst doppelt (.plz__out.plz__out), damit diese Regel die
spaeter im Dokument stehende Grundregel schlaegt: eine Media Query
erhoeht die Spezifitaet NICHT von selbst, bei gleicher Spezifitaet
gewinnt die Regel, die weiter unten steht. */
.plz__out.plz__out{min-height:150px}
/* flex:1 1 0 allein reichte nicht: ohne min-width:0 gilt fuer ein
Flex-Element min-width:auto, also die Breite seines eigenen Textes. Die
beiden Pfeile brauchen nowrap 184 und 173 Pixel, zusammen mit den 12
Pixeln Abstand also 369. Auf einem 375er Telefon stehen aber nur 330 zur
Verfuegung, und deshalb rutschte "Naechste Woche" in eine eigene Zeile.
Die Wochennavigation war damit 296 Pixel hoch (52 + 52 + 172 fuer die
drei Wochenknoepfe) und schob die Wochenreiter unter die Bildschirmkante.
Mit min-width:0 bekommt jeder Pfeil genau die Haelfte, also 159 Pixel,
und die Zeile ist einmal 52 Pixel hoch statt zweimal: gemessen 296 -> 234.
Das seitliche Polster geht dafuer von 18 auf 2 Pixel zurueck. Die
Fingerflaeche schrumpft dadurch NICHT: der Knopf ist 159 mal 52 Pixel
gross, das Polster entscheidet hier nur noch darueber, ob die Schrift
hineinpasst. Nicht groesser setzen, sonst kehrt der Umbruch zurueck.
white-space:normal statt des geerbten nowrap ist die Sicherung nach
unten: auf einem 320er Bildschirm bleiben je Pfeil nur 132 Pixel, und
die Beschriftung braucht 146. Mit nowrap waere sie ueber den Rahmen
gelaufen, mit Umbruch wird sie zweizeilig. Der Pfeil ist dann 76 statt
52 Pixel hoch, die Wochennavigation also 258 statt 296 Pixel: immer noch
besser als vorher, und vor allem nichts, was ueber den Knopf hinausragt.
Gemessen ohne Ueberlauf bei 320 und bei 375 (scrollWidth gleich
clientWidth, scrollHeight gleich clientHeight). align-self:stretch sorgt
dafuer, dass dann BEIDE Pfeile gleich hoch sind; .weeknav zentriert
seine Kinder sonst, und ein einzeilig gebliebener Nachbar stuende als
kuerzerer Knopf daneben. */
.weeknav__arrow{flex:1 1 0;min-width:0;padding:10px 2px;
white-space:normal;align-self:stretch}
/* Die Wochenknoepfe standen untereinander, aber jeder nur so breit wie sein
Text: gemessen bei 390px 220px, 223px und 228px. Drei fast gleich lange
Kanten, die nirgends fluchten, lesen sich wie ein Versehen. In einer
Spalte nehmen sie die volle Breite und stehen buendig unter den beiden
Pfeilen darueber. */
.weeknav__weeks{flex-direction:column}
/* Der Monatsumschalter war als inline-flex 308px breit und stand damit auf
einem 320er Bildschirm 18px ueber den Rand. body hat overflow-x:hidden,
also gab es nicht einmal eine Scrollleiste: der Knopf "Oktober" war
schlicht halb abgeschnitten. Auf schmalen Geraeten teilen sich die Monate
jetzt die volle Breite. */
.seg{display:flex;width:100%}
.seg__b{flex:1 1 0;min-width:0;padding:10px 8px}
}
/* Sprungziel des Knopfs "Speiseplan" in der Leiste unten und von "Alle Tage
ansehen". Ohne diesen Abstand landete der Monatsplan zwar richtig, aber der
Monatsumschalter direkt darueber lag zur Haelfte unter dem festen Kopf: von
"Oktober 2026" war nur "2026" zu sehen (gemessen bei 390px und bei 768px).
Die 110px sind der Umschalter samt Abstand plus etwas Luft; sie kommen zu
scroll-padding-top von html dazu. Zu viel schadet nicht, dann steht nur eine
Zeile Fliesstext mit im Bild. */
.planwrap{scroll-margin-top:110px}
/* Firmenzeichen des Bestellzettels ist nur fuer den Druck da (echtes ![]()
aus Plan.php, siehe @media print .pday[data-wlabel] .pday__logo). Am
Bildschirm bleibt es aus. */
.pday__logo{display:none}
.planmonth{margin:0 0 clamp(20px,3vw,32px)}
.planmonth__h{font-size:clamp(22px,2.4vw,30px);margin:0 0 clamp(14px,1.8vw,22px);
padding-bottom:.4rem;border-bottom:2px solid var(--messing)}
.plandays{list-style:none;margin:0;padding:0;display:grid;gap:clamp(22px,3vw,34px)}
/* Jeder Tag ist eine klar abgegrenzte Karte mit Kopfband. So sieht man auf
einen Blick, dass die zwei bis drei Gerichte eines Tages zusammengehoeren
und wo der naechste Tag anfaengt. */
.pday{background:#FBF7EE;border:1px solid #CBBB9A;border-radius:9px;padding:0;
overflow:hidden;box-shadow:0 16px 30px -24px rgba(30,25,19,.6)}
/* Geschlossener Tag: unuebersehbar zurueckgenommen, damit ein aelterer
Nutzer auf einen Blick sieht, was noch bestellbar ist. */
.pday--zu{background:#EAE3D4;border-color:#D6CCB8}
.pday__head{display:flex;align-items:baseline;gap:12px 18px;flex-wrap:wrap;margin:0;
/* Waagerecht derselbe clamp wie .pday__grid darunter. Bis zum 03.09.2026
stand hier 26px als oberer Wert und im Raster 24px: gemessen bei 1280px
begann der Wochentag bei x=72, die Gerichtkarte darunter bei x=70. Zwei
Randmasse fuer dieselbe Kante, in derselben Tageskachel. */
padding:15px clamp(16px,2.2vw,24px);background:#E9DCBD;
border-bottom:2px solid var(--messing)}
.pday--zu .pday__head{background:#DED4BE;border-bottom-color:#C9B48C}
.pday__day{font-size:clamp(24px,2.4vw,30px);margin:0}
.pday--zu .pday__day{color:#6F6656}
/* Das Datum stand auf var(--ink-soft) (#5F6640) und traf damit auf dem
Kopfband #E9DCBD nur 4,46:1. Fliesstext braucht 4,5:1. Der Ton ist deshalb
eine Stufe dunkler (#525935, 5,44:1) und bleibt trotzdem hoerbar leiser als
der Tagesname in --ink (8,75:1). Abweichung von der Farbwelt-Tabelle ist im
UX-Abschlussbericht vermerkt. */
.pday__date{font-family:var(--ff-text);font-size:.62em;font-weight:400;color:#525935}
.pday__status{margin-left:auto;font-size:16px;font-weight:700}
.pday__status--auf{color:#2C5A22}
/* Status als Pille, damit er als Zustand liest, nicht als roter Fliesstext */
.pday__status--zu{color:#7A4A2E;background:#F3E7DC;border:1px solid #D8C3A8;
padding:5px 13px;border-radius:999px;font-size:15px;display:inline-block}
/* Marke am Kopf der Tageskachel: wie viele Portionen dieses Tages schon
ausgewaehlt sind. 16px, damit sie ohne Brille lesbar ist, und mit Zahl im
Text, damit sie nicht nur ueber Farbe funktioniert. */
.pday__korb{flex:0 0 100%;margin:2px 0 0;font-size:16px;font-weight:700;
line-height:1.4;color:#22491B}
.pday__korb::before{content:"\2713\00a0"}
.pday__korb--zu{color:#7A4A2E}
.pday__korb--zu::before{content:"\26A0\00a0"}
.pday__grid{display:grid;gap:clamp(14px,1.8vw,22px);padding:clamp(16px,2.2vw,24px)}
.dish{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linen-3);
border-radius:4px;overflow:hidden}
.pday--zu .dish{background:#EAE3D4;border-color:#D8CEBB}
.pday--zu .dish__name,.pday--zu .dish__price{color:#8A8071}
.pday--zu .dish__nr{color:#5F6446}
.dish__media{aspect-ratio:16/9;background:#171208;overflow:hidden}
.dish__img{width:100%;height:100%;object-fit:cover;filter:var(--foto)}
/* stark entsaettigt und abgedunkelt: geschlossen ist auf einen Blick klar */
.pday--zu .dish__img{filter:grayscale(.9) opacity(.5) contrast(.95)}
.pday--zu .dish__media--salat{filter:grayscale(.7) opacity(.72)}
/* Salatkachel: ruhiges Blattgrün auf Leinen, feine Linie, Name in Display. */
.dish__media--salat{display:flex;align-items:center;justify-content:center;
padding:18px 20px;background:
linear-gradient(135deg,var(--salat-1),var(--salat-2));
box-shadow:inset 0 0 0 1px rgba(159,174,110,.5)}
.dish__salatname{font-family:var(--ff-display);font-weight:600;color:var(--salat-ink);
font-size:clamp(19px,1.8vw,23px);line-height:1.25;text-align:center;
border-top:1px solid var(--salat-line);border-bottom:1px solid var(--salat-line);
padding:12px 6px;max-width:24ch}
/* "Gericht 1" und der Kennungskreis dahinter stehen auf einer Linie
(Paket plankacheln-feinschliff, 02.09.2026). Vorher hing der Kreis per
vertical-align:-6px an der Grundlinie der Schrift: gemessen am 02.09.2026
lag seine Mitte 6,70px tiefer als die Mitte der Beschriftung, und die Zeile
wurde durch den Ueberhang 31,20px hoch statt der 26px, die der Kreis selbst
braucht. Als Flexzeile mit align-items:center stimmen beide Mitten auf
0,50px genau ueberein, und die Zeile ist 26,00px hoch, also niedriger als
vorher. Das Leerzeichen zwischen Wort und Kreis wird in einer Flexzeile
verschluckt, deshalb steht es hier als gap.
Im Druck gilt das nicht: dort setzt der @media-print-Block weiter unten
.dish__nr wieder auf display:inline. */
.dish__nr{display:flex;align-items:center;flex-wrap:wrap;gap:0 .35em;
margin:14px 16px 0;font-size:15px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-soft)}
.dish--salat .dish__nr{color:var(--salat-line);color:#5C6B33}
.dish__name{margin:.3rem 16px .2rem;font-family:var(--ff-display);
font-size:clamp(19px,1.8vw,23px);line-height:1.28;font-weight:600;flex:1 0 auto}
.dish__foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
margin:.5rem 16px 16px}
.dish__foot--zu{margin-top:.6rem}
.dish__price{font-family:var(--ff-display);font-size:22px;font-weight:600;color:var(--ink);
white-space:nowrap}
/* 18px: der Bestellknopf ist eine Hauptaktion und muss ohne Brille lesbar sein */
.dish__add{min-height:56px;padding:10px 18px;font:inherit;font-size:18px;font-weight:700;
background:var(--brick-ink);color:#fff;border:1px solid var(--brick-ink);border-radius:3px;
cursor:pointer;flex:1 1 auto;min-width:12ch}
.dish__add:hover{background:#45521C}
.dish__add.is-added{background:#2C5A22;border-color:#2C5A22}
/* Dauerzustand: das Gericht liegt in der Bestellung. Bewusst NICHT dasselbe
Gruen wie das Aufblitzen (is-added), sonst waere die kurze Rueckmeldung nach
dem Klick nicht mehr von dem zu unterscheiden, was danach stehen bleibt.
Traegt die Menge als Zahl im Text, funktioniert also auch ohne Farbe. */
.dish__add.is-drin{background:#fff;color:#22491B;border:2px solid #2C5A22;
box-shadow:0 3px 0 rgba(44,90,34,.35)}
.dish__add.is-drin:hover{background:#EDF3E8}
.dish__add.is-drin:active{box-shadow:0 1px 0 rgba(44,90,34,.35)}
/* ---------- Menge am Gericht (UX-Brief 8) ----------
Erscheint erst, wenn etwas ausgewaehlt ist, und nimmt dann die ganze Breite
unter dem Auswahlknopf ein. Die beiden Flaechen sind 56x56px gross, also
deutlich ueber den 44px, die WCAG 2.2 als Mindestmass nennt: sie werden von
Leuten mit steifen Fingern getroffen, nicht von einer Maus mit ruhiger Hand.
Die Zahl steht dazwischen und ist Text, keine Farbe. */
/* flex-wrap:wrap seit dem 03.09.2026: die Zeile aus "Anzahl", Minus, Zahl und
Plus braucht gemessen 257px. In der dreispaltigen Ansicht ab 1280px ist die
Tageskachel aber nur 244px breit, und die Zeile stand 13,9px ueber dem Rand
der Kachel. Mit Umbruch sollte das Wort "Anzahl" auf eine eigene Zeile
rutschen, die beiden 56px-Flaechen bleiben unveraendert gross.
Korrektur am 05.09.2026 (Ansage des Auftraggebers mit Bildschirmfoto: "hier
bitte -1+ in einer reihe. nicht so versetzt"): der Umbruch kam nicht vor dem
Wort, sondern erst vor dem Plus, weil Wort, Minus und Zahl zusammen noch in
die Kachel passten. Deshalb liegen Minus, Zahl und Plus jetzt in der Gruppe
.dish__mc, die nie umbricht (app.js baut sie); das Wort darf als Ganzes
schrumpfen oder in die eigene Zeile gehen, die Gruppe nicht. */
.dish__menge{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
min-width:0;padding:10px 16px;background:#F1F5EC;border:1px solid #C4D3B6;
border-radius:4px}
.dish__mw{font-size:16px;font-weight:700;color:#22491B;margin-right:auto;flex:1 1 auto;min-width:0}
.dish__mc{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:nowrap}
.dish__mb{width:56px;height:56px;flex:0 0 56px;font:inherit;font-size:26px;
font-weight:700;line-height:1;color:#22491B;background:#fff;border:2px solid #2C5A22;
border-radius:4px;cursor:pointer}
.dish__mb:hover{background:#E3EEDA}
.dish__mn{min-width:2.2ch;text-align:center;font-family:var(--ff-display);
font-size:26px;font-weight:700;color:var(--ink)}
.pday--zu .dish__menge{background:#E4DDCD;border-color:#CFC4AC}
/* Im Kuchenstreifen setzt .pday__des span alle Spannen auf Versalien mit
Sperrung (das ist die Beschriftung "DAZU EIN STÜCK KUCHEN"). Die Menge
gehoert nicht dazu: "ANZAHL 1" waere gesperrt und die Zahl so gross wie ein
Etikett. Deshalb hier ausdruecklich zurueckgeholt. */
.pday__des .dish__mw{text-transform:none;letter-spacing:0;font-size:16px}
.pday__des .dish__mn{text-transform:none;letter-spacing:0;font-size:26px;
font-family:var(--ff-display)}
/* ---------- Werktag ohne Essen ----------
Ein Tag, an dem nicht gekocht wird, faellt seit dem 25.08.2026 nicht mehr
stillschweigend aus dem Plan (Rundumblick vom 24.08.2026: der Mittwoch,
23.09., fehlte kommentarlos). Er bekommt eine ruhige Karte ohne Foto, ohne
Preis und ohne Knopf, damit niemand raetselt, ob der Tag fehlt oder gepflegt
werden muesste. */
.pday--frei{background:#F1ECE0;border-color:#D6CCB8;box-shadow:none}
.pday--frei .pday__head{background:#E3DAC6;border-bottom-color:#C9B48C}
.pday--frei .pday__day{color:#6F6656}
.pday__status--frei{color:#6B6252;background:#F3EFE4;border:1px solid #D3C8B0;
padding:5px 13px;border-radius:999px;font-size:15px;display:inline-block;font-weight:700}
/* max-width:none, weil die Lesebreite fuer Fliesstext hier nicht gilt: der
Streifen gehoert zur Karte und muesste sonst mitten im Kasten enden. */
.pday__frei{margin:0;padding:clamp(14px,1.8vw,20px) clamp(16px,2.2vw,24px);
font-size:18px;line-height:1.5;color:var(--ink-soft);max-width:none}
/* Der Satz, der Nachtisch und Kuchen auseinanderhaelt. Steht zwischen den
beiden Streifen, also genau dort, wo die Frage entsteht. */
.pday__extras{margin:0;padding:10px clamp(16px,2.2vw,24px);
font-size:16px;line-height:1.45;color:var(--ink-soft);background:var(--cream);
border-top:1px solid var(--linen-3);max-width:none}
.pday--zu .pday__extras{background:#E4DDCD;color:#7A7264}
/* Der Nachtisch klebte mit einem Pixel am Kastenrand, waehrend die Gerichte
darueber eingerueckt sind. Jetzt eigener warmer Streifen im gleichen Raster,
mit geloeffelter Schale als Zugabe-Zeichen. */
/* align-items:center statt baseline seit dem 03.09.2026 (Ansage des
Auftraggebers vom selben Tag: "das muesste bitte auch noch gerade in einer
reihe stehen"). Es ist derselbe Fehlertyp und derselbe Weg wie beim
Kennungskreis in .dish__nr weiter oben.
Warum die Mitte und nicht die Grundlinie: zwei der Teile tragen ueberhaupt
keinen Text und haben deshalb gar keine Grundlinie, naemlich das Zeichen
.pday__des::before (21px) und im Kuchenstreifen das Foto-Rechteck
.kuchen__bild (42px hoch). Eine gemeinsame Grundlinie kann sie nicht einschliessen, eine
gemeinsame Mitte schon. Der Ausklapper ist der dritte Fall: er ist ein
48px hoher Kasten (44px Trefferflaeche plus Polsterung) und damit fast
doppelt so hoch wie die Textzeilen daneben.
Gemessen am 03.09.2026 bei 1280px im Nachtischstreifen, Mitten der fuenf
Teile: vorher 1484,08 / 1474,95 / 1473,85 / 1475,23 / 1484,08, also
10,23px auseinander. Nachher liegen alle fuenf auf 1484,08 bzw. 1484,07,
Spanne 0,01px. Die Grundlinien der drei Textteile laufen dabei um 1,38px
auseinander; das ist bei 14, 15 und 19 Pixel Schriftgroesse nicht zu sehen,
die 10 Pixel Versatz des Ausklappers waren es. Die Variante "Grundlinie"
(align-self:baseline am Ausklapper) wurde gemessen und liefert 0,00px
Grundlinienspanne, laesst aber Zeichen und Kuchenkreis aussen vor.
Die Streifenhoehe bleibt gleich: 83,00px im Nachtisch- und 139,59px im
Kuchenstreifen, vorher wie nachher. Der Ausklapper bestimmt die Zeilenhoehe
in beiden Faellen, verschoben wird nur, was in dieser Zeile steht.
Im Druck greift das nicht: der @media-print-Block weiter unten setzt
.pday__des auf display:block zurueck. */
.pday__des{display:flex;align-items:center;gap:.7em;flex-wrap:wrap;
margin:0;padding:clamp(13px,1.6vw,17px) clamp(16px,2.2vw,24px);
font-size:18px;line-height:1.45;color:var(--ink);max-width:none;
background:var(--cream);border-top:1px solid var(--linen-3)}
.pday__des::before{content:"";flex:0 0 auto;width:21px;height:21px;
align-self:center;background:var(--messing);
/* Schale mit Loeffel, als Maske: nimmt die Messingfarbe an */
-webkit-mask:var(--ic-des) center/contain no-repeat;
mask:var(--ic-des) center/contain no-repeat}
.pday__des span{font-weight:700;letter-spacing:.1em;text-transform:uppercase;
font-size:15px;color:var(--brick-ink);margin:0}
.pday--zu .pday__des{background:#E4DDCD;color:#7A7264}
.pday--zu .pday__des span{color:#8A7A62}
.pday--zu .pday__des::before{background:#5F6446}
.kz{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
border:1px solid var(--messing);border-radius:50%;font-size:14px;font-weight:700;
color:var(--ink);vertical-align:-4px;letter-spacing:0}
/* Bleibt fuer den Fall, dass .dish__nr keine Flexzeile ist (Druck stellt sie
auf display:inline zurueck und setzt weiter unten vertical-align:baseline).
In der Flexzeile am Bildschirm wirkt vertical-align nicht mehr. */
.dish__nr .kz{vertical-align:-6px}
.legend{margin-top:clamp(26px,3vw,38px);display:grid;gap:10px}
.legend__t{margin:0;font-size:16px;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-soft)}
.legend ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;
font-size:18px}
.legend li{display:flex;align-items:center;gap:8px}
.legend__a{margin:.4rem 0 0;font-size:18px;color:var(--ink-soft);max-width:62ch}
/* ---------- Material: Leinenkorn ----------
Zwei gekreuzte Verlaeufe statt eines SVG-Filters: kostet nichts, laeuft
ueberall, und weil es unter dem Text liegt und bei Alpha .03 bleibt, aendert
sich am Kontrast nichts Messbares. Nur auf Flaechen, nie auf Fotos. */
.sec--plan,.sec--vorrat,.today,.sec--kosten{
background-image:
repeating-linear-gradient(45deg,rgba(120,100,70,.03) 0 1px,transparent 1px 4px),
repeating-linear-gradient(-45deg,rgba(120,100,70,.03) 0 1px,transparent 1px 4px)}
.sec--plan,.sec--vorrat,.today,.sec--kosten{background-blend-mode:normal}
/* ---------- Taktile Knoepfe ----------
Der Knopf hat eine sichtbare Unterkante und sinkt beim Druecken ein. Fuer
aeltere Nutzer ist das keine Spielerei, sondern die Rueckmeldung, dass der
Druck angekommen ist. 100ms, keine Bewegung darueber hinaus. */
.btn,.dish__add,.upsell__b,.daypick__b,.pick,.weekchip,.seg__b{
box-shadow:0 3px 0 rgba(30,25,19,.18);
transition:transform .1s ease,box-shadow .1s ease,background .2s ease,
border-color .2s ease,color .2s ease}
.btn:active,.dish__add:active,.upsell__b:active,.daypick__b:active,
.pick:active,.weekchip:active,.seg__b:active{
transform:translateY(2px);box-shadow:0 1px 0 rgba(30,25,19,.18)}
.btn--go{box-shadow:0 3px 0 rgba(60,18,4,.45)}
.btn--go:active{box-shadow:0 1px 0 rgba(60,18,4,.45)}
.dish__add{box-shadow:0 3px 0 rgba(60,18,4,.4)}
.dish__add:active{box-shadow:0 1px 0 rgba(60,18,4,.4)}
/* ---------- Praegung auf den grossen Display-Zeilen ----------
Nur auf der Serifenschrift in Grossgroesse, wo die Kanten es tragen. */
.sec h2,.pday__day,.planmonth__h{
text-shadow:0 1px 0 rgba(255,255,255,.55),0 -1px 0 rgba(30,25,19,.06)}
/* ---------- Leben in der Flaeche ----------
Zurueckhaltend gehalten: die Zielgruppe soll Freude haben, nicht gestoert
werden. Nur transform und box-shadow, nichts springt, nichts verdeckt Text,
und bei prefers-reduced-motion steht alles still (Block in index.html). */
.dish{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.pday:not(.pday--zu) .dish:hover{transform:translateY(-3px);
border-color:var(--messing);box-shadow:0 16px 28px -20px rgba(30,25,19,.65)}
.dish__img{transition:transform .5s ease}
.pday:not(.pday--zu) .dish:hover .dish__img{transform:scale(1.035)}
/* Tastaturbedienung bekommt dieselbe Rueckmeldung wie die Maus. */
.pday:not(.pday--zu) .dish:focus-within{border-color:var(--messing);
box-shadow:0 16px 28px -20px rgba(30,25,19,.65)}
/* Der Preis ist die Zahl, auf die alle schauen. */
.dish__price{transition:color .28s ease}
.pday:not(.pday--zu) .dish:hover .dish__price{color:var(--brick-ink)}
/* Handschriftliche Notiz aus der Kueche. Bewusst schief, aber nur ganz wenig,
damit es wie hingelegt wirkt und nicht wie ein Fehler. */
/* Die 3px links und rechts sind kein Gestaltungswunsch, sondern Platz fuer die
Drehung: ein um .5 Grad gekippter Kasten ist an seiner breitesten Stelle
breiter als ungekippt. Gemessen am 03.09.2026 bei 390px waren das 348,2px
in einem 345px breiten Elternkasten, also 1,6px Ueberhang je Seite. */
.notiz{position:relative;display:block;margin:clamp(22px,2.8vw,34px) 3px 0;
padding:clamp(16px,2.2vw,22px) clamp(18px,2.4vw,26px);
background:#FBF6E9;border:1px solid #E3D6B8;border-radius:2px;
box-shadow:0 10px 22px -18px rgba(30,25,19,.7);
transform:rotate(-.5deg);font-size:19px;line-height:1.55;color:var(--ink);
max-width:56ch}
/* Das Klebeband sass links aussen und war ein flaches, gleichmaessig
eingefaerbtes Rechteck: auf dem Bildschirm las es sich nicht als Band,
sondern als Rest einer verrutschten Flaeche. Jetzt sitzt es mittig ueber der
Oberkante, hat nach aussen hin weichere Kanten und eine feine Innenlinie,
also die zwei Merkmale, an denen man Klebeband erkennt. */
.notiz::before{content:"";position:absolute;left:50%;top:-9px;width:86px;height:18px;
background:linear-gradient(180deg,rgba(154,123,63,.14),rgba(154,123,63,.30));
box-shadow:inset 0 0 0 1px rgba(154,123,63,.22);border-radius:1px;
transform:translateX(-50%) rotate(1.4deg)}
.notiz b{font-family:var(--ff-display);font-weight:600}
.notiz__wer{display:block;margin-top:.5rem;font-size:17px;color:var(--ink-soft)}
/* ---------- 4a · Speisekarte: Papierbogen, Tageskopf-Schild, Kartenrahmen
(05.09.2026, Aufgabe speiseplan-optik-detailreicher) ----------
Der Auftraggeber fand den Speiseplan neben dem Vorrats-Regal "lieblos".
Der Plan liegt seitdem als Bogen Buettenpapier auf dem Leinen: eine
Bogenkante oben wie am Vorrats-Regal (gleicher Pfad, 60 mal 26 Pixel, in
der Farbe des Bogens), darauf eine Papierstruktur aus Verlaeufen (keine
Bilddatei) und ein weicher Schatten an der Unterkante. Das Karo bleibt dem
Vorrats-Regal vorbehalten. Der Bogen laeuft ueber die ganze Fensterbreite,
obwohl .planwrap in .wrap steckt: calc(50% - 50vw) zieht die beiden
Pseudo-Elemente bis an den Fensterrand; overflow-x:clip am Abschnitt
faengt die Handbreit ab, die eine klassische Bildlaufleiste sonst als
waagerechtes Scrollen hinterliesse (clip statt hidden, weil hidden einen
Scrollkasten macht und sticky-Nachbarn stoert; auf Touch-Geraeten ist
100vw ohnehin genau die Fensterbreite).
Die Monatsreiter stehen ueber der Kante wie die Reiter einer Mappe, die
Wochenwahl und die Tage liegen auf dem Bogen.
ALLES hier gilt nur am Bildschirm (@media screen): der Bestellzettel-Druck
weiter unten benutzt .pday__head::before/::after und .dish::before selbst
(Kopfband, Fussband, Ankreuzkasten) und darf davon nichts erben. */
@media screen{
.sec--plan{overflow-x:clip}
.planwrap{position:relative;z-index:0;margin-top:30px;
padding:clamp(22px,2.8vw,34px) 0 clamp(28px,3.4vw,44px)}
.planwrap::before,.planwrap::after{content:"";position:absolute;z-index:-1;
left:calc(50% - 50vw);right:calc(50% - 50vw);pointer-events:none}
/* Der Bogen: Buettenpapier. Zwei Lichtflecken, waagerechte Rippen (alle
4px) und blassere senkrechte Stege (alle 7px), alles unter Alpha .05.
Gemessen aendert das am Textkontrast nichts Entscheidendes, siehe
design-belege/speiseplan-optik-kontrast.txt. */
.planwrap::before{top:0;bottom:0;background-color:#E8E2CA;
background-image:
radial-gradient(900px 320px at 18% 0,rgba(255,255,255,.34),rgba(255,255,255,0) 70%),
radial-gradient(760px 520px at 86% 100%,rgba(150,120,60,.075),rgba(0,0,0,0) 70%),
repeating-linear-gradient(0deg,rgba(120,100,70,.045) 0 1px,rgba(0,0,0,0) 1px 4px),
repeating-linear-gradient(90deg,rgba(120,100,70,.022) 0 1px,rgba(0,0,0,0) 1px 7px);
box-shadow:0 8px 12px -9px rgba(60,40,10,.28)}
/* Die Bogenkante: derselbe Pfad wie .sec--vorrat::before in index.html,
nur in der Papierfarbe. Der Schatten folgt der Bogenform (filter statt
box-shadow) und laesst den Bogen auf dem Leinen aufliegen. */
.planwrap::after{bottom:calc(100% - 1px);height:26px;background-repeat:repeat-x;
background-size:60px 26px;
background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 26'%3E%3Cpath d='M0 26V17a15 15 0 0 1 30 0 15 15 0 0 1 30 0v9z' fill='%23E8E2CA'/%3E%3C/svg%3E");
filter:drop-shadow(0 -2px 2px rgba(60,40,10,.16))}
/* ---- Sehr breite Fenster: der Bogen bekommt Seitenkanten ----
(05.09.2026, auf Ansage: "hier links und rechts beim essensplan ist es
noch sehr trist".) Der Bogen lief bis dahin bei jeder Breite bis an den
Fensterrand. Bei 1240px Inhalt und einem 1920px breiten Fenster standen
links und rechts je 340 Pixel Papier ohne irgendetwas darauf.
Ab 1521 Pixeln hoert der Bogen deshalb bei 1520 Pixeln Breite auf und
liegt sichtbar AUF dem Leinen, statt es zu verdecken. Drei Dinge machen
das aus:
- eine gerissene Kante links und rechts, gleicher Pfad wie die Kante
oben, nur um 90 Grad gedreht und in der Leinenfarbe: sie beisst sich
in den Bogen und nimmt ihm die Lineallinie,
- ein weicher Schatten nach aussen, damit der Bogen aufliegt.
Die Flaeche daneben braucht nichts Neues: .sec--plan traegt schon eine
Leinenstruktur (Diagonale alle 5px unter Alpha .05 plus Licht von oben),
die bisher nur unter dem Bogen lag und jetzt sichtbar wird. Ein zweites
Gewebe extra fuer breite Fenster waere ein anderer Stoff an derselben
Wand gewesen.
Die Grenze liegt bei 1521, weil der Bogen bis 1520 Pixeln Fensterbreite
ohnehin randlos steht: unterhalb aendert sich nichts, alle bisherigen
Belege bei 1280, 768 und 390 Pixeln gelten unveraendert weiter. */
@media (min-width:1521px){
.planwrap::before,.planwrap::after{
left:calc(50% - 760px);right:calc(50% - 760px)}
.planwrap::before{
box-shadow:0 8px 12px -9px rgba(60,40,10,.28),
0 0 34px -10px rgba(60,40,10,.34);
background-repeat:repeat-y,repeat-y,no-repeat,no-repeat,repeat,repeat;
background-position:left top,right top,0 0,0 0,0 0,0 0;
background-size:26px 60px,26px 60px,auto,auto,auto,auto;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 60'%3E%3Cpath d='M0 0h9a15 15 0 0 1 0 30 15 15 0 0 1 0 30H0z' fill='%23EDE9D6'/%3E%3Cpath d='M9 0a15 15 0 0 1 0 30 15 15 0 0 1 0 30' fill='none' stroke='%235A4A23' stroke-opacity='.22' stroke-width='1.4'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 60'%3E%3Cpath d='M26 0h-9a15 15 0 0 0 0 30 15 15 0 0 0 0 30H26z' fill='%23EDE9D6'/%3E%3Cpath d='M17 0a15 15 0 0 0 0 30 15 15 0 0 0 0 30' fill='none' stroke='%235A4A23' stroke-opacity='.22' stroke-width='1.4'/%3E%3C/svg%3E"),
radial-gradient(900px 320px at 18% 0,rgba(255,255,255,.34),rgba(255,255,255,0) 70%),
radial-gradient(760px 520px at 86% 100%,rgba(150,120,60,.075),rgba(0,0,0,0) 70%),
repeating-linear-gradient(0deg,rgba(120,100,70,.045) 0 1px,rgba(0,0,0,0) 1px 4px),
repeating-linear-gradient(90deg,rgba(120,100,70,.022) 0 1px,rgba(0,0,0,0) 1px 7px)}
}
/* Der Wochensatz steht direkt auf dem Papier. --ink-soft traefe dort nur
4,7:1, unter einer Rippe weniger; #525935 ist der Ton des Datums im
Tageskopf und trifft 5,6:1 (tests/phase27.php, Abschnitt 9). */
.weeknav__spanne{color:#525935}
/* Tageskopf als Schild: eine feine Innenlinie mit 5px Abstand (die
Doppellinie einer gedruckten Speisekarte: aussen die Kartenkante, innen
die Linie), dazu ein Lichtschein von oben. Die Grundfarbe #E9DCBD bleibt
in der Grundregel weiter oben stehen, tests/phase27.php prueft sie dort;
bei gesperrten und freien Tagen setzt deren background-Kurzform den
Lichtschein zurueck, das ist so gewollt. */
.pday__head{position:relative;
background-image:linear-gradient(180deg,rgba(255,255,255,.30) 0,rgba(255,255,255,0) 62%)}
.pday__head::before{content:"";position:absolute;left:5px;right:5px;top:5px;bottom:4px;
border:1px solid rgba(154,123,63,.42);border-radius:5px 5px 2px 2px;pointer-events:none}
.pday--zu .pday__head::before,.pday--frei .pday__head::before{border-color:rgba(154,123,63,.26)}
/* Der Zweig aus dem Vorrats-Regal, klein und liegend, zwischen Wochentag
und Bestellschluss. Zweig und Bestellschluss tragen beide
margin-left:auto, der freie Platz teilt sich also: der Zweig steht mittig
im Leerraum, der Bestellschluss bleibt rechts und lesbar. Bricht der Kopf
um, rutscht der Bestellschluss wie bisher rechts in die naechste Zeile.
Erst ab 768px, darunter ist der Kopf voll; die Marke "ausgewaehlt"
(.pday__korb, von app.js) bleibt ueber order:3 die letzte Zeile. */
.pday__head::after{content:none}
.pday__status{order:2}
.pday__korb{order:3}
@media (min-width:768px){
.pday__head::after{content:"";order:1;flex:0 0 auto;align-self:center;
margin-left:auto;width:64px;height:16px;opacity:.75;pointer-events:none;
background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 20' fill='none' stroke='%239A7B3F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10h74'/%3E%3Cpath d='M18 10c1-5 5-8 10-8-1 5-5 8-10 8z' fill='%239A7B3F' fill-opacity='.28'/%3E%3Cpath d='M30 10c1 5 5 8 10 8-1-5-5-8-10-8z' fill='%239A7B3F' fill-opacity='.28'/%3E%3Cpath d='M42 10c1-5 5-8 10-8-1 5-5 8-10 8z' fill='%239A7B3F' fill-opacity='.28'/%3E%3Cpath d='M54 10c1 5 5 8 10 8-1-5-5-8-10-8z' fill='%239A7B3F' fill-opacity='.28'/%3E%3Cpath d='M66 10c1-5 5-8 10-8-1 5-5 8-10 8z' fill='%239A7B3F' fill-opacity='.28'/%3E%3Cpath d='M79 10c4-3 8.5-3 12.5 0-4 3-8.5 3-12.5 0z' fill='%239A7B3F' fill-opacity='.28'/%3E%3C/svg%3E") center/contain no-repeat}
.pday--zu .pday__head::after,.pday--frei .pday__head::after{opacity:.4}
}
@media (min-width:1000px){.pday__head::after{width:84px;height:18px}}
/* Gerichtkarten: staerker gerundet (4 auf 7px), ein weicher Schatten schon
in Ruhe (bisher nur beim Zeigen) und die Innenlinie einer gedruckten
Karte, 1px im Karton-Ton mit 4px Abstand. z-index 1, damit sie ueber dem
Foto liegt; pointer-events:none, damit sie keinen Knopf verdeckt. Bild,
Allergen-Aufklapper, Preis und Knopf bleiben, wie sie sind. Nur die
Karten im Monatsplan (.pday), die Suppenkarten haben ihr Regalbrett. */
.pday .dish{position:relative;border-radius:7px;
box-shadow:0 1px 2px rgba(30,25,19,.05),0 10px 22px -18px rgba(30,25,19,.45)}
.pday .dish::before{content:"";position:absolute;inset:4px;z-index:1;
border:1px solid rgba(203,187,154,.62);border-radius:4px;pointer-events:none}
.pday--zu .dish::before{border-color:rgba(203,187,154,.38)}
/* Monats- und Wochenknoepfe: Radien wie die Karten, die gewaehlte Woche
traegt zusaetzlich den Messingring der gewaehlten Monatsklappe. Der
Fokusrahmen kommt weiter aus der globalen :focus-visible-Regel. Bedienung
unveraendert. */
.seg{border-radius:9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(30,25,19,.08)}
.seg__b{border-radius:6px}
.weeknav__arrow,.weekchip{border-radius:7px}
.weekchip[aria-selected="true"]{box-shadow:0 3px 0 rgba(30,25,19,.18),inset 0 0 0 2px var(--messing)}
.weekchip[aria-selected="true"]:active{box-shadow:0 1px 0 rgba(30,25,19,.18),inset 0 0 0 2px var(--messing)}
}
/* ---------- 4b · Vorrats-Regal: kalte Suppen ----------
Kein Foto vorhanden, also gestaltete Kacheln wie bei der Salatkachel: heller
Verlauf, feine Innenlinie, Name in der Display-Schrift zwischen zwei Linien.
Jede Suppe hat ihre eigene Tönung, damit die vier auseinandergehalten werden,
ohne dass Text je auf einem Bild liegt. Dunkle Tinte auf hellem Grund. */
.sec--vorrat{background:var(--linen);border-top:1px solid var(--linen-3)}
.suppen{list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0;display:grid;
--sgap:clamp(14px,1.8vw,22px);
gap:var(--sgap);grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.dish--suppe{height:100%}
/* ---------- Regalbrett unter den Suppenkarten (05.09.2026) ----------
Wunsch des Auftraggebers mit Bildschirmfoto: "kannst du das so machen, dass
bei den Suppen so ein bisschen die optik von einem suppenregal hat?" Die
Sektion heisst Vorrats-Regal, sah aber aus wie jede andere Kartenreihe.
Jede Karte steht jetzt auf einem Brett: ein Pseudo-Element am , damit es
bei jeder Spaltenzahl von selbst stimmt (vier Bretter in einer Reihe stossen
ueber den Spaltenabstand --sgap aneinander und wirken wie EIN langes Brett,
bei 390px bekommt jede Karte ihr eigenes). Holz nur aus Verlaeufen: warmes
Braun mit heller Vorderkante, feine Maserung per repeating-linear-gradient,
weicher Schatten nach unten. Die Karte selbst wirft ihren Schatten aufs
Brett statt ins Leere und verliert unten die Rundung, weil sie aufsteht.
Das Brett selbst hat keine Rundung: mit 2px Radius zeigte jeder Stoss
zwischen zwei Brettern eine kleine Kerbe, ein Regalbrett ist gerade gesaegt.
Kein Bild, kein Emoji, keine Bewegung; im Druck faellt das Brett weg. */
.suppen>li{position:relative;padding-bottom:16px}
.suppen>li::after{content:"";position:absolute;left:calc(var(--sgap) / -2);right:calc(var(--sgap) / -2);
bottom:0;height:16px;border-radius:0;
background:
linear-gradient(180deg,rgba(255,244,220,.55) 0,rgba(255,244,220,0) 3px),
repeating-linear-gradient(90deg,rgba(72,46,18,.11) 0 2px,rgba(0,0,0,0) 2px 9px,
rgba(72,46,18,.07) 9px 10px,rgba(0,0,0,0) 10px 23px,rgba(72,46,18,.05) 23px 24px,rgba(0,0,0,0) 24px 41px),
linear-gradient(180deg,#B78D5C 0,#A07747 45%,#7F5A32 100%);
box-shadow:0 7px 10px -4px rgba(60,38,12,.5),inset 0 -2px 0 rgba(0,0,0,.18)}
.suppen>li .dish--suppe{position:relative;z-index:1;border-bottom-left-radius:0;border-bottom-right-radius:0;
box-shadow:0 10px 10px -8px rgba(40,25,5,.4)}
@media print{
.suppen>li{padding-bottom:0}
.suppen>li::after{content:none}
.suppen>li .dish--suppe{box-shadow:none;border-radius:4px}
}
/* Neutrale Grundfarbe fuer jede Suppe ohne gepflegtes Farbthema (Feld "stil"
in der Verwaltung, admin/suppen.php): ohne diese Zeile erbt der Name die
dunkle Grundfarbe von .dish__media (#171208) und waere unlesbar. Die vier
benannten Themen darunter (gurke/lauch/tomate/kuerbis) ueberschreiben sie
weiterhin, weil sie im Quelltext danach stehen. */
.dish__media--suppe{aspect-ratio:16/9;display:flex;align-items:center;
justify-content:center;padding:18px 20px;box-shadow:inset 0 0 0 1px rgba(30,25,19,.14);
background:linear-gradient(135deg,#EDE6D3,#DCD0B4);color:#3B3323}
/* Foto nachliefern: einfach ein 
in dasselbe Medienfeld legen. Es deckt die gestaltete Kachel ab,
nichts muss entfernt werden. Gilt für Suppen wie für Salatkacheln. */
.dish__media--suppe,.dish__media--salat{position:relative}
.dish__media--suppe .dish__img,.dish__media--salat .dish__img{position:absolute;
inset:0;width:100%;height:100%;object-fit:cover}
.dish__media--gurke{background:linear-gradient(135deg,#DEEADF,#C3D9CB);color:#1F3326}
.dish__media--lauch{background:linear-gradient(135deg,#EFE9D6,#D9DABC);color:#33361C}
.dish__media--tomate{background:linear-gradient(135deg,#E6E7C6,#D2D7A8);color:#3D4420}
.dish__media--kuerbis{background:linear-gradient(135deg,#FBE6C7,#F0CB95);color:#563009}
/* erbt die Linien der Salatkachel, nimmt aber die Tinte der jeweiligen Suppe */
/* kein opacity: das würde den Text aufhellen und den Kontrast drücken
(Kürbis fiele von 7,5:1 auf 6,3:1). So liegen alle vier über 7:1. */
.dish__media--suppe .dish__salatname{color:inherit;
border-top-color:currentColor;border-bottom-color:currentColor}
.suppe__note{margin:.1rem 16px .3rem;font-size:18px;line-height:1.5;color:var(--ink-soft)}
.dish--suppe .dish__nr{color:var(--ink-soft)}
/* Leergekochter Topf: steht an der Stelle des Auswahlknopfes und nimmt
dieselbe Breite ein (flex:1 1 auto wie .dish__add), damit die Kachel nicht
springt, sobald der letzte Becher weg ist. Kein Rot: das ist keine Stoerung,
die Suppe kommt wieder. Fett und in Backsteinfarbe, damit die Zeile nicht
wie eine Fussnote unter dem Preis verschwindet. 18px wie der Knopf. */
.regal__hinweis{flex:1 1 auto;min-width:12ch;font-size:18px;font-weight:700;
color:var(--brick-ink);line-height:1.35}
.vorrat__fein{margin-top:clamp(20px,2.4vw,30px);font-size:18px}
.vorrat__fein b{color:var(--brick-ink)}
/* ---------- 5 · Was es kostet ---------- */
.kosten{display:grid;gap:clamp(26px,3.4vw,48px);align-items:start}
.kosten__box{background:#fff;border:1px solid var(--linen-3);border-radius:4px;
padding:clamp(20px,2.6vw,32px);box-shadow:0 18px 34px -26px rgba(30,25,19,.6)}
.kosten__box h3{font-size:clamp(23px,2.2vw,28px);margin-bottom:.6rem}
.ptab{width:100%;border-collapse:collapse;margin:1.4rem 0 .8rem;font-size:19px}
.ptab caption{text-align:left;font-size:16px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-soft);padding-bottom:.5rem}
.ptab th,.ptab td{text-align:right;padding:11px 0 11px 14px;
border-bottom:1px solid var(--linen-3)}
.ptab th:first-child,.ptab td:first-child{text-align:left;padding-left:0}
.ptab thead th{font-size:16px;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-soft)}
.ptab tbody td:not(:first-child){font-family:var(--ff-display);font-size:24px;
font-weight:600;white-space:nowrap;color:var(--brick-ink)}
.ptab tbody tr:last-child td{border-bottom:none}
.kosten__list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.kosten__list li{padding-left:26px;position:relative;font-size:19px;line-height:1.55;
max-width:56ch}
.kosten__list li::before{content:"";position:absolute;left:0;top:.62em;width:11px;
height:11px;border:2px solid var(--brick);border-radius:50%}
.kosten__list b{font-weight:700}
/* ---------- 6 · Lieferung ---------- */
.sec--liefer{background:var(--linen-2);border-top:1px solid var(--linen-3);
border-bottom:1px solid var(--linen-3)}
.liefer{display:grid;gap:clamp(28px,3.4vw,52px);align-items:start}
.liefer h3{font-size:clamp(22px,2.1vw,26px);margin:0 0 .5rem}
.liefer h3+p{margin-top:0}
.liefer p+h3{margin-top:1.6rem}
/* .orte (Ortsliste als Kacheln) ist am 25.08.2026 entfallen: die Liefersektion
nennt die Orte jetzt im Fliesstext und die Postleitzahlen als das, was
wirklich entscheidet. Die Regeln sind mitentfernt, damit keine tote
Formatierung stehenbleibt. */
/* Die fuenf Angaben aus UX-Brief 6 als Beschreibungsliste: Frage links als
dt, Antwort als dd. Bewusst keine Aufklapper. Wer wissen will, ob geliefert
wird, soll nicht erst fuenfmal klicken muessen, und ein Screenreader liest
die Paare als das, was sie sind. Das div dazwischen haelt Begriff und
Antwort im Grid zusammen und ist in einer dl ausdruecklich erlaubt. */
.lfakt{margin:0;display:grid;gap:0}
.lfakt__z{padding:18px 0;border-bottom:1px solid var(--linen-3)}
.lfakt__z:first-child{padding-top:0}
.lfakt__z:last-child{border-bottom:none;padding-bottom:0}
.lfakt dt{font-family:var(--ff-display);font-size:clamp(21px,2vw,25px);
line-height:1.25;margin:0 0 .35rem}
.lfakt dd{margin:0;font-size:19px;line-height:1.55;max-width:52ch}
/* Drei kurze Hinweise unter den beiden Spalten. Auf schmalen Geraeten
untereinander, ab 900px nebeneinander (Regel weiter unten im Breitenblock). */
.lnote{list-style:none;margin:clamp(30px,3.4vw,48px) 0 0;padding:0;
display:grid;gap:clamp(18px,2vw,26px)}
.lnote li{background:var(--linen);border:1px solid var(--linen-3);border-radius:4px;
padding:clamp(18px,2vw,26px)}
.lnote h3{font-size:clamp(20px,1.8vw,23px);margin:0 0 .45rem}
.lnote p{margin:0;font-size:18px;line-height:1.55;max-width:44ch}
.plz label{display:block;font-size:19px;font-weight:700;margin-bottom:.5rem}
.plz__row{display:flex;gap:10px;flex-wrap:wrap}
.plz input{min-height:64px;font:inherit;font-size:24px;letter-spacing:.12em;
padding:8px 16px;width:9ch;border:2px solid #8A7A5C;border-radius:3px;
background:var(--linen);color:var(--ink)}
/* Rahmen #8A7A5C statt #B8A98C, wie .upsell__b weiter unten: 2,1 bis 2,3:1
lagen unter den von WCAG 1.4.11 geforderten 3:1 fuer Bedienelementgrenzen. */
.plz .btn{min-height:64px}
/* Zweistufig seit Aufgabe plz-antwort-ton-und-gestalt: fette Kernaussage
(plz__out-lead) plus Zusatz in normaler Staerke (plz__out-sub), optional ein
Icon als Schmuck (aria-hidden im Markup, traegt die Aussage nie allein).
min-height fest, damit beim Tippen (checkPlz laeuft bei jedem Tastendruck)
nichts unter der Box springt. Der Wert ist je Breite der GEMESSENE
Hoechstwert der vier Fassungen, nicht der hoechste ueber alle Breiten.
Genau das war am 26.08.2026 der Fehler: 207px galten fuer jede Breite und
liessen im Zustand "Zu wenig Ziffern" 91px sichtbar leer stehen, also in
genau dem Kasten, den jeder beim Laden sieht.
Gemessen mit getBoundingClientRect() an der natuerlichen Hoehe (min-height
kurz auf 0 gesetzt), bei 1280px: Ruhe 87,9, Zu-wenig 87,9, Ja 120,6,
Nein 120,6 -> 121px. Schmale Fenster: 640px-Umbruch weiter unten, 150px.
Bewusst NICHT abgedeckt: unter etwa 380px Fensterbreite braucht der
Nein-Text bis zu 200px (gemessen bei 290px Boxbreite). Dort waechst die
Box beim Erscheinen der Antwort einmalig. Das ist die kleinere Stoerung:
ein Kasten, der 55px leer dasteht, solange man tippt, faellt staerker auf
als ein einmaliges Wachsen genau dort, wohin man ohnehin schaut. */
.plz__out{margin:.9rem 0 0;padding:14px 16px;border-left:4px solid var(--linen-3);
background:var(--linen);max-width:52ch;box-sizing:border-box;min-height:121px;
display:grid;grid-template-columns:auto 1fr;column-gap:.5rem;row-gap:.3rem;
align-content:center}
.plz__out.ok{border-left-color:#3E6B33;background:#EDF2E6}
.plz__out.no{border-left-color:var(--brick);background:#F4EADF}
.plz__out-icon{grid-column:1;grid-row:1;font-size:22px;line-height:1.4;
color:inherit}
.plz__out.ok .plz__out-icon{color:#3E6B33}
.plz__out.no .plz__out-icon{color:var(--brick-ink)}
.plz__out-lead{grid-column:2;grid-row:1;margin:0;font-size:19px;font-weight:700;
line-height:1.4}
.plz__out-sub{grid-column:1/-1;grid-row:2;margin:0;font-size:19px;line-height:1.5}
.plz__out:not(.ok):not(.no) .plz__out-lead{grid-column:1/-1}
/* ---------- 7 · Für Betriebe ---------- */
/* Preisstaffel als Tabelle, seit dem 31.08.2026. Vorher lag sie in derselben
Haekchenliste wie die Zusagen darueber; zwei verschiedene Dinge sahen damit
gleich aus. Luft nach oben, damit die Zwischenueberschrift als neuer Block
liest und nicht an der Liste davor klebt. */
/* Zwei Spalten seit dem 03.09.2026. Die Schwelle ist dieselbe 820px wie bei
.wer, .liefer und .order darunter; ein eigener Umbruchpunkt nur fuer diesen
Abschnitt wuerde die Seite beim Verkleinern an einer vierten Stelle
springen lassen. Unter 820px bleibt es eine Spalte, das Beispiel steht dann
unter dem Text. align-items:start, damit der Kasten oben neben der
Ueberschrift beginnt und nicht in der Mitte der Spalte schwebt. */
.firma{display:grid;gap:clamp(26px,3.4vw,50px);align-items:start}
.firma__h3{margin:2.2rem 0 .9rem;font-size:clamp(21px,1.9vw,25px)}
/* Weiss auf dem Sandton des Abschnitts, wie .today__price im ersten Bild.
var(--linen) waere hier fast unsichtbar, der Abschnitt hat selbst diesen
Grundton. min-width:0, sonst kann die Gitterspalte nicht schmaler werden
als der laengste Posten und der Kasten laeuft rechts heraus. */
.firma__bsp{margin:0;min-width:0;padding:clamp(20px,2.2vw,30px);
background:#fff;border:1px solid var(--linen-3);border-top:3px solid var(--messing);
border-radius:4px;box-sizing:border-box}
.firma__bsp-h{margin:0 0 .9rem;font-size:clamp(21px,1.9vw,25px)}
.firma__bsp-fein{margin:1rem 0 0;max-width:none}
/* Posten links, Betrag rechts. flex-wrap, damit auf 390px der Betrag unter
den Text rutscht statt ihn zu quetschen; white-space:nowrap haelt den
Betrag selbst in einer Zeile. */
.bsp{list-style:none;margin:0;padding:0}
.bsp li{display:flex;flex-wrap:wrap;justify-content:space-between;
gap:.2rem 1.2rem;padding:11px 0;border-bottom:1px solid var(--linen-3);
font-size:19px;line-height:1.5}
.bsp li:last-child{border-bottom:none;padding-bottom:0}
.bsp__t{min-width:0}
/* margin-left:auto, nicht nur justify-content am Elternteil: bricht die Zeile
um, faengt der Betrag sonst links auf der neuen Zeile an und steht nicht
mehr unter den anderen Betraegen. Genau das passierte bei 1280px in der
ersten Zeile. */
.bsp__b{white-space:nowrap;font-weight:700;margin-left:auto}
.bsp__sum{font-size:21px;border-top:2px solid var(--linen-3);margin-top:2px}
.bsp__sum .bsp__b{color:var(--brick-ink)}
.staffel{border-collapse:collapse;margin:0 0 1rem;font-size:20px;width:auto}
.staffel th,.staffel td{text-align:left;padding:9px 26px 9px 0;
border-bottom:1px solid var(--linen-3)}
.staffel thead th{font-size:16px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--ink-soft);border-bottom-width:2px}
.staffel tbody th{font-weight:700;white-space:nowrap}
.staffel tbody tr:last-child th,.staffel tbody tr:last-child td{border-bottom:none}
/* Nur fuer Vorleseprogramme sichtbar. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ticks{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:14px}
.ticks li{position:relative;padding-left:36px;font-size:20px;line-height:1.5;max-width:52ch}
.ticks li::before{content:"";position:absolute;left:4px;top:.34em;width:11px;height:19px;
border:solid var(--brick-ink);border-width:0 3px 3px 0;transform:rotate(42deg)}
.form__l{margin:0 0 16px;max-width:none}
/* ---------- 8 · Wer kocht ---------- */
.sec--wer{background:var(--linen)}
.wer{display:grid;gap:clamp(26px,3.4vw,50px);align-items:center}
.wer__txt p{font-size:20px}
.wer__txt .eyebrow{font-size:16px}
.herkunft{list-style:none;margin:1.4rem 0;padding:0;display:grid;gap:12px}
.herkunft li{font-size:19px;padding-left:22px;border-left:3px solid var(--messing);
line-height:1.5}
.wer__pic{margin:0}
.wer__pic img{width:100%;height:auto;border-radius:4px;
filter:var(--foto);
box-shadow:0 26px 44px -30px rgba(30,25,19,.85)}
/* Seit dem 25.08.2026 steht dort das gezeichnete Platzhalter-Schild statt
eines Fotos. --foto (saturate/sepia/contrast) ist fuer Fotos gemacht und
wuerde die Zeichnung verfaerben. */
.wer__pic picture img{filter:none}
/* Das Foto vom 28.08.2026 ist nur 300 Pixel breit (verkleinerte Vorlage aus
WordPress, der Quell-Dateiname endete auf -300x200). Die Stelle stellt
sonst bis 564 Pixel dar; ohne Deckel zieht der Browser fast auf das
Doppelte hoch und macht es sichtbar matschig. Deshalb hier die echte
Breite als Obergrenze: lieber kleiner und scharf. Kommt das Original,
faellt diese Regel ersatzlos weg. */
.wer__pic .wer__foto{max-width:300px;width:100%;height:auto;display:block}
/* Der Deckel muss die GANZE Figur fassen, nicht nur das Bild. Am
31.08.2026 stand die Bildunterschrift ueber die volle Spaltenbreite
und ragte rechts weit ueber das 300px schmale Foto hinaus. Sobald das
Original da ist und der Deckel faellt, faellt diese Regel mit. */
.wer__pic:has(.wer__foto){max-width:300px}
/* Rueckfall fuer Browser ohne :has(): dann wenigstens die Unterschrift
auf dieselbe Breite begrenzen. */
.wer__foto ~ figcaption{max-width:300px}
.wer__pic figcaption{margin-top:.8rem;font-size:17px;line-height:1.5;color:var(--ink-soft)}
/* ---------- 9 · Fragen ---------- */
.sec--faq{background:var(--linen-2);border-top:1px solid var(--linen-3)}
details{border-bottom:1px solid var(--linen-3);background:transparent}
details:first-of-type{border-top:1px solid var(--linen-3)}
summary{cursor:pointer;list-style:none;padding:20px 46px 20px 0;min-height:56px;
font-family:var(--ff-display);font-size:clamp(21px,1.9vw,25px);font-weight:600;
line-height:1.35;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:12px;top:50%;width:13px;height:13px;
margin-top:-9px;border:solid var(--brick-ink);border-width:0 3px 3px 0;
transform:rotate(45deg)}
details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
summary:hover{color:var(--brick-ink)}
details p{margin:0 0 20px;font-size:19px;max-width:60ch;color:var(--ink-soft)}
/* ---------- 10 · Bestellen ---------- */
.sec--order{background:var(--board);color:var(--paper)}
.sec--order h2{color:var(--paper)}
.phone{display:inline-block;font-family:var(--ff-display);font-weight:600;
font-size:clamp(38px,6.4vw,78px);letter-spacing:-.01em;text-decoration:none;
color:#F5EEE0;border-bottom:3px solid var(--messing);padding-bottom:6px;
margin:.4rem 0 1rem;line-height:1.1}
.phone:hover{color:#fff;border-bottom-color:#D9BE86}
.phone__note{color:#CFC0A2;font-size:19px;margin:0 0 clamp(28px,3.4vw,44px);max-width:60ch}
.order{display:grid;gap:clamp(26px,3.4vw,48px);align-items:start}
.order__box{border:1px solid #6B5940;border-radius:4px;padding:clamp(20px,2.6vw,32px);
background:rgba(255,255,255,.05)}
.order__box h3{font-size:clamp(22px,2.1vw,27px);margin-bottom:.8rem;color:var(--paper)}
.steps{margin:0 0 1.2rem;padding:0 0 0 1.3em;display:grid;gap:10px;font-size:19px;
color:#E7DCC5}
.steps b{color:#fff}
.order__box .btn--go{margin-top:.4rem}
/* Oliv auf Oliv, zweiter Fall. Politur-Runde 1 hat den Hauptknopf der
Handy-Leiste (.bar__a--go) so behandelt; hier im Abschnitt "Bestellen" stand
derselbe Fehler noch. Gemessen am 25.08.2026: der Knopf traegt --brick-ink
(#57632A), die Klappe darunter wirkt als #454D2D (--board plus 5 % Weiss),
das sind 1,39:1. Der taktile Schatten unter dem Knopf ist dunkel und auf
dunklem Grund unsichtbar, also gab es ueberhaupt keine sichtbare Kante.
Daneben steht "Monatsplan drucken" in Creme mit hohem Kontrast: der zweite
Weg sah aus wie der Hauptweg.
Die Messinglinie ist dieselbe Loesung wie an der Leiste und an
.seg__b[aria-selected]. Sie hebt den Kontrast der Kante auf 2,9:1 gegen die
Klappe; das sind noch keine 3:1 aus WCAG 1.4.11, aber der Knopf hat damit
ueberhaupt erst eine Kante. Die Schriftfarbe bleibt unangetastet, weiss auf
--brick-ink misst 6,51:1.
Der taktile Schatten wird mitgeschrieben, sonst faellt er weg: eine zweite
box-shadow-Regel ersetzt die erste, sie ergaenzt sie nicht. */
.sec--order .btn--go{box-shadow:inset 0 0 0 2px var(--messing),
0 3px 0 rgba(60,18,4,.45)}
.sec--order .btn--go:active{box-shadow:inset 0 0 0 2px var(--messing),
0 1px 0 rgba(60,18,4,.45)}
.zettel{border:1px solid #6B5940;border-radius:4px;padding:clamp(20px,2.6vw,32px);
background:rgba(255,255,255,.05)}
.zettel h3{font-size:clamp(22px,2.1vw,27px);margin-bottom:.6rem;color:var(--paper)}
.zettel p{color:#CFC0A2;font-size:19px}
.zettel .btn{margin-top:.6rem}
/* Sprungziel #ausdruck (seit 03.09.2026, Punkt "Den Monatsplan koennen Sie
weiter unten auf dieser Seite ausdrucken" im Betriebe-Abschnitt). Gemessen
bei 1280x800 ohne diese Regel: Kastenoberkante 123px, Kopf endet bei 152px,
die Rahmenlinie lag also unter dem Kopf. scroll-padding-top von html
(120px bei dieser Hoehe) reicht fuer Abschnitte mit eigenem Polster, nicht
fuer einen Kasten mit Rahmen. Die 48px kommen dazu; bei 390px liegt der
Kasten am Seitenende und der Wert schadet dort nicht. */
.zettel{scroll-margin-top:48px}
/* #B7A78A auf dem dunklen Zettelgrund (#454C2D wirksam) waren 3,83:1 und damit
unter der Grenze fuer Fliesstext. #C8B99C sind 4,68:1 und bleiben eine Spur
leiser als die Absaetze darueber (#CFC0A2, 5,04:1). */
.zettel .fein{color:#C8B99C;margin-top:1rem}
/* ---------- Fuß ---------- */
.foot{background:#1F1913;color:#C6B79B;padding:clamp(38px,4.4vw,60px) 0 30px;
font-size:18px;border-top:1px solid #3A3024}
.foot__in{display:grid;gap:clamp(22px,3vw,44px);padding-bottom:clamp(24px,3vw,38px)}
.foot p{margin:0 0 .6rem;max-width:46ch;line-height:1.55}
.foot a{color:#E4D8BE}
.foot a:hover{color:#fff}
/* Der E-Mail-Verweis im Fuss steht als einziger Inhalt in seinem Absatz und
ist damit kein Ziel "in einem Satz": die Inline-Ausnahme von WCAG 2.2,
Erfolgskriterium 2.5.8 gilt nur, wo die Groesse an der Zeilenhoehe des
umgebenden Textes haengt, und hier ist kein umgebender Text. Gemessen am
03.09.2026 war er 260,7 mal 21 Pixel und damit die kleinste eigenstaendige
Trefferflaeche der ganzen Seite. Die Rufnummer im selben Block hat ihre
44 Pixel seit dem 25.08.2026 aus der Regel fuer tel:-Verweise, die
Rechtsverweise daneben aus .foot__links a. */
.foot a[href^="mailto:"]{display:inline-block;min-height:44px;line-height:44px}
/* Emblem im Fuss als helles Siegel, damit die gruenen Linien auf dunklem Grund
nicht untergehen. Emblem transparent, sitzt mittig auf der Cremescheibe. */
.foot__seal{display:block;width:clamp(104px,14vw,132px);height:clamp(104px,14vw,132px);
object-fit:contain;padding:13px;margin:0 0 18px;border-radius:50%;background:#F4F1EA;
box-shadow:0 0 0 2px var(--messing),0 12px 24px -12px rgba(0,0,0,.6)}
.foot__name{font-family:var(--ff-display);font-size:24px;font-weight:600;color:#F0E8D9}
/* Begleitzeile der Firma: dezent unter dem Angebotsnamen, wie vom Auftraggeber
am 24.08.2026 vorgegeben (Logo prominent, Firma nur als Begleitzeile). */
.foot__firma{font-size:16px;color:#BFB299;margin-top:-.2rem}
.foot__h{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:#AFA382}
.foot__links{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot__links a{display:inline-block;min-height:44px;line-height:44px}
.foot__probe{border-top:1px solid #3A3024;padding-top:20px;font-size:16px;
line-height:1.55;color:#AFA382;max-width:82ch}
/* Der Wegweiser im Fuss gilt nur fuer schmale Geraete: ab 900px fuehrt wieder
die Hauptnavigation im Kopf, und zwei Menues mit denselben Zielen waeren
eine Entscheidung zu viel (dieselbe Regel, die .hnav unter 900px ausblendet,
nur andersherum). display:none und nicht bloss unsichtbar: so steht der
Block am Schreibtisch auch fuer Vorleseprogramme und die Tabulatortaste
nicht doppelt da. Begruendung im Quelltext von index.html. */
@media (min-width:900px){.foot__nav{display:none}}
/* =========================================================================
Warenkorb-Schublade
========================================================================= */
.cart{position:fixed;inset:0;z-index:60}
.cart[hidden]{display:none}
.cart__scrim{position:absolute;inset:0;background:rgba(20,14,8,.5);opacity:0;
transition:opacity .28s ease}
.cart.is-open .cart__scrim{opacity:1}
.cart__panel{position:absolute;top:0;right:0;height:100%;width:min(460px,100%);
background:var(--linen);color:var(--ink);display:flex;flex-direction:column;
box-shadow:-20px 0 60px -30px rgba(20,14,8,.85);
transform:translateX(100%);transition:transform .3s cubic-bezier(.3,.8,.4,1);
will-change:transform}
.cart.is-open .cart__panel{transform:translateX(0)}
.cart__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:18px clamp(16px,3vw,24px);background:var(--board);color:var(--paper)}
.cart__title{font-size:clamp(23px,2.4vw,28px);color:var(--paper);margin:0}
.cart__x{min-width:52px;min-height:52px;display:inline-flex;align-items:center;
justify-content:center;background:transparent;border:1px solid #6B5940;border-radius:3px;
color:var(--paper);cursor:pointer}
.cart__x:hover{background:#34291D}
.cart__count{margin:0;padding:12px clamp(16px,3vw,24px);font-size:18px;font-weight:700;
background:var(--linen-2);border-bottom:1px solid var(--linen-3)}
.cart__body{flex:1 1 auto;overflow-y:auto;padding:clamp(16px,3vw,24px);
-webkit-overflow-scrolling:touch}
.cart__body[hidden]{display:none}
.cart__list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cart__empty{margin:1rem 0;font-size:18px;color:var(--ink-soft)}
.cart__empty[hidden]{display:none}
.citem{background:#fff;border:1px solid var(--linen-3);border-radius:4px;
padding:14px 16px}
.citem__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.citem__day{margin:0;font-size:15px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--brick-ink)}
.citem__rm{background:transparent;border:0;font:inherit;font-size:16px;font-weight:700;
color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer;
min-height:44px;padding:0 2px}
.citem__rm:hover{color:var(--brick-ink)}
.citem__name{margin:.2rem 0 .6rem;font-family:var(--ff-display);font-size:20px;
font-weight:600;line-height:1.25}
.citem__bot{display:flex;align-items:center;justify-content:space-between;gap:12px;
flex-wrap:wrap}
.qty{display:inline-flex;align-items:center;gap:2px;border:1px solid #8A7A5C;
border-radius:4px;overflow:hidden;background:var(--linen)}
.qty__b{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
background:var(--cream);border:0;font:inherit;font-size:26px;font-weight:700;
color:var(--ink);cursor:pointer;line-height:1}
.qty__b:not([disabled]):hover{background:#E1D5BB}
/* Der gesperrte Minus-Knopf (eine Portion ist die kleinste Menge) sah aus wie
ein bedienbarer und leuchtete beim Zeigen sogar auf. Sichtbar reduzierte
Deckkraft und cursor not-allowed wie bei .cart__submit[disabled] oben,
Hover greift jetzt nur noch am nicht gesperrten Knopf. */
.qty__b[disabled]{opacity:.5;cursor:not-allowed}
.qty__n{min-width:40px;text-align:center;font-size:20px;font-weight:700}
.citem__price{font-size:17px;color:var(--ink-soft);white-space:nowrap}
.citem__price b{font-family:var(--ff-display);font-size:21px;color:var(--ink);font-weight:600}
.cart__sumrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
margin:clamp(16px,2.4vw,22px) 0;padding-top:16px;border-top:2px solid var(--messing);
font-size:20px;font-weight:700}
.cart__sum{white-space:nowrap}
.cart__sum b{font-family:var(--ff-display);font-size:30px;color:var(--brick-ink);font-weight:600}
.cart__form{margin-top:6px}
.cart__form[hidden]{display:none}
.cart__fh{font-size:22px;margin:0 0 1rem}
.cart__two{display:grid;grid-template-columns:1fr 1.4fr;gap:0 14px}
.cart__form .form__l{margin:0 0 14px}
.cart__form label{display:block;font-size:17px;font-weight:700;margin-bottom:6px}
.cart__form input,.cart__form textarea{width:100%;min-height:56px;font:inherit;
font-size:19px;padding:12px 16px;border:2px solid #8A7A5C;border-radius:3px;
background:#fff;color:var(--ink)}
.cart__form textarea{min-height:76px;line-height:1.5;resize:vertical}
.cart__submit{width:100%;margin-top:6px}
.cart__submit[hidden]{display:none}
.cart__hint{margin:.9rem 0 0;font-size:16px;line-height:1.5;color:var(--ink-soft)}
/* ---------- Die drei Schritte: Auswahl, Adresse, Zahlung ---------- */
/* Der waagerechte Innenabstand ist derselbe clamp wie in .cart__body und
.cart__count. Seit die Schrittanzeige am 02.09.2026 AUS #cartBody
herausgezogen wurde, hatte sie gar keinen mehr: "SCHRITT 1 VON 3" stand
gemessen bei x=0 an der Kante, waehrend die Karten darunter bei x=16
begannen (390px) beziehungsweise bei x=24 (1280px). Zwei Randmasse in
derselben Schublade, Ansage des Auftraggebers vom 02.09.2026, Punkt 2. */
.cart__steps{margin:0 0 clamp(14px,2vw,20px);padding:0 clamp(16px,3vw,24px);
font-size:18px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.cart__step[hidden]{display:none}
/* Der Fokus springt beim Schrittwechsel auf die Überschrift, also muss er dort
auch zu sehen sein. :focus statt :focus-visible, weil er programmatisch kommt.
width:fit-content seit dem 25.08.2026: der Rahmen lief vorher ueber die
ganze Breite der Schublade und stand damit unmittelbar ueber den echten
Eingabefeldern. "Lieferadresse" sah dadurch aus wie ein weiteres Feld, in
das man tippen soll. Jetzt umschliesst er nur das Wort. */
.cart__fh{width:fit-content;max-width:100%}
.cart__fh:focus{outline:3px solid var(--brick-ink);outline-offset:4px;border-radius:2px}
.cart__back{width:100%;margin-top:12px}
.cart__spar{margin:-8px 0 clamp(16px,2.2vw,22px);padding:12px 16px;font-size:18px;
line-height:1.45;color:#2C5A22;background:#E7EFDF;border:1px solid #B7CBA6;
border-radius:4px}
.cart__spar[hidden]{display:none}
/* Der Sperrhinweis unter dem Mindestbestellwert ist keine gute Nachricht wie
der Sparhinweis darueber, deshalb nicht dieselbe gruene Klasse: dieselbe
Warnfarbe wie .cart__alt weiter unten, dieselbe Bedeutung (etwas fehlt noch,
bevor es weitergeht). */
.cart__mindest{margin:-8px 0 clamp(16px,2.2vw,22px);padding:12px 16px;font-size:18px;
line-height:1.45;color:#7A4A2E;background:#F5EBDF;border:1px solid #D8C3A8;
border-radius:4px}
.cart__mindest[hidden]{display:none}
/* Weg zurueck ins Angebot, wenn die Summe nicht reicht. Steht direkt unter dem
Hinweis, damit die Antwort auf "legen Sie noch etwas dazu" nicht gesucht
werden muss (Funktionsdurchsicht 01.09.2026, B1-5). */
.cart__zurueck{margin:-8px 0 clamp(16px,2.2vw,22px)}
.cart__zurueck[hidden]{display:none}
/* "Alles entfernen": bewusst schmal und ohne Signalfarbe. Es ist ein
Aufraeumknopf, kein Hauptweg, und darf neben "Weiter zur Adresse" nicht um
Aufmerksamkeit ringen. 44 Pixel hoch bleibt er trotzdem. */
.cart__leeren{margin:6px 0 14px;text-align:right}
.cart__leeren[hidden]{display:none}
.btn--klein{min-height:44px;padding:8px 16px;font-size:17px}
.cart__zurueck .btn{width:100%;min-height:56px}
/* Das Vormerk-Angebot direkt am Postleitzahlfeld der Kasse. */
.form__vormerk{display:block;margin:8px 0 0}
.form__vormerk[hidden]{display:none}
.form__vormerk .btn{width:100%;min-height:56px;font-size:18px}
/* Der gesperrte Weiter-Knopf: sichtbar, aber erkennbar nicht bedienbar. */
.cart__submit[disabled]{opacity:.5;cursor:not-allowed}
.citem--suppe .citem__day{color:#5C6B33}
/* ---------- Tage, deren Bestellschluss durch ist ----------
Sie werden NICHT stillschweigend aus der Bestellung genommen, sonst
raetselt niemand mehr, wo sein Essen geblieben ist. Sie bleiben stehen,
deutlich markiert, und zaehlen nicht in die Summe. */
.cart__alt{margin:-8px 0 clamp(16px,2.2vw,22px);padding:12px 16px;font-size:18px;
line-height:1.45;color:#7A4A2E;background:#F5EBDF;border:1px solid #D8C3A8;
border-radius:4px}
.cart__alt[hidden]{display:none}
.citem--alt{opacity:.85;border-left:5px solid #B4553A;padding-left:10px}
.citem--alt .citem__day,.citem--alt .citem__name{color:#7A4A2E}
.citem__alt{margin:.35rem 0 0;font-size:16px;line-height:1.45;font-weight:700;
color:#7A4A2E}
/* ---------- Uebersicht der Bestellung im Adressschritt ----------
details/summary, kein Fremd-Bauteil: aufklappen und wieder zuklappen kann
der Browser selbst, und der Tastaturfokus bleibt, wo er ist. */
.cartsum{margin:0 0 clamp(16px,2.4vw,22px);padding:0;
background:var(--linen-2);border:1px solid var(--linen-3);border-radius:4px}
/* Der Pfeil rechts kommt aus der allgemeinen summary-Regel weiter oben (Abschnitt
9, Fragen). Deshalb hier nur Schrift und Raum ändern und rechts 46 Pixel für
ihn frei lassen, sonst laufen Text und Pfeil ineinander. */
.cartsum__s{list-style:none;cursor:pointer;position:relative;
padding:13px 46px 13px 16px;min-height:56px;
font-family:var(--ff-text);font-size:18px;font-weight:700;line-height:1.4;
color:var(--ink);display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap}
.cartsum__s::-webkit-details-marker{display:none}
/* Der Pfeil allein sagt einem ungeübten Auge nicht, dass hier etwas aufgeht.
Deshalb steht es als Wort daneben, in zwei Fassungen. */
.cartsum__more{margin-left:auto;font-size:16px;font-weight:700;
color:var(--brick-ink);text-decoration:underline}
.cartsum:not([open]) .cartsum__more--auf{display:none}
.cartsum[open] .cartsum__more--zu{display:none}
.cartsum__s:focus-visible{outline:3px solid var(--brick-ink);outline-offset:2px}
.cartsum__l{list-style:none;margin:0;padding:0 16px;display:grid;gap:12px}
.cartsum__i{display:grid;gap:2px;padding-bottom:12px;
border-bottom:1px solid var(--linen-3);font-size:17px;line-height:1.4}
.cartsum__i:last-child{border-bottom:0}
.cartsum__d{font-weight:700;color:var(--ink)}
.cartsum__n{color:var(--ink)}
.cartsum__p{color:var(--ink-soft)}
.cartsum__i--alt .cartsum__d,.cartsum__i--alt .cartsum__p{color:#7A4A2E}
.cartsum__edit{display:block;margin:12px 16px 16px;min-height:52px;padding:10px 16px;
font:inherit;font-size:17px;font-weight:700;color:var(--brick-ink);
background:#fff;border:2px solid var(--brick-ink);border-radius:3px;cursor:pointer}
.cartsum__edit:hover{background:#F1EBDE}
/* ---------- Bestellformular: Gruppen, Hinweise, Fehler (UX-Brief 13/14) ----------
Zwei Gruppen statt einer Feldliste: "Wohin liefern wir?" und "Wie erreichen
wir Sie?". fieldset/legend, damit ein Screenreader die Zugehoerigkeit
mitliest; die Rahmenvorgabe des Browsers ist dafuer abgeraeumt. */
.fset{border:0;margin:0 0 clamp(14px,2vw,20px);padding:0;min-width:0}
.fset__l{padding:0;margin:0 0 12px;font-family:var(--ff-display);font-weight:600;
font-size:20px;line-height:1.3;color:var(--ink)}
.fset__hint{margin:0 0 12px;padding:10px 16px;font-size:17px;line-height:1.45;
color:var(--ink);background:#F3EEE2;border-left:4px solid var(--messing);
border-radius:0 3px 3px 0}
.fset__hint[hidden]{display:none}
/* Zweckangabe unter dem Feld. Kein Kleingedrucktes: 16px ist hier die
Untergrenze, die Zielgruppe liest am Tablet. */
.form__hint{display:block;margin:6px 0 0;font-size:16px;line-height:1.45;
color:var(--ink-soft);font-weight:400}
.form__hint a{color:var(--brick-ink)}
/* Die Fehlermeldung steht AM Feld und bleibt stehen, bis der Fehler weg ist.
Farbe allein reicht nicht (WCAG 1.4.1), deshalb zusaetzlich das Ausrufe-
zeichen davor und der dickere Rahmen am Feld selbst. */
.form__err{display:block;margin:6px 0 0;font-size:17px;line-height:1.45;
font-weight:700;color:#8C300E}
.form__err[hidden]{display:none}
.form__err::before{content:"! ";font-weight:700}
.cart__form input.is-err,.cart__form textarea.is-err{border-color:#8C300E;
background:#FDF6F3}
/* Sammelmeldung oben im Formular nach einem fehlgeschlagenen Absenden. */
.form__box{margin:0 0 clamp(14px,2vw,18px);padding:13px 16px;font-size:18px;
line-height:1.45;font-weight:700;color:#8C300E;background:#FBEFEA;
border:2px solid #D9A895;border-radius:4px}
.form__box[hidden]{display:none}
/* ---------- Strasse nicht im Verzeichnis (05.09.2026) ----------
Bewusst NICHT in Rot wie .form__err: das hier ist kein Fehler des Gastes.
Seine Adresse kann richtig sein und unsere Liste unvollstaendig. Deshalb
derselbe warme Sandton wie beim abgelaufenen Bestellschluss (.cart__alt),
ein Hinweis, keine Ruege. */
.form__adr{margin:-8px 0 14px;padding:13px 16px;background:#F5EBDF;
border:1px solid #D8C3A8;border-radius:4px}
.form__adr[hidden]{display:none}
.form__adr-hint{margin:0 0 12px;font-size:17px;line-height:1.45;color:#7A4A2E}
.form__adr-tipps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.form__adr-tipps[hidden]{display:none}
/* Der Vorschlag ist ein Klickziel fuer den Daumen, nicht ein Wort im Text. */
.form__adr-tipp{min-height:48px;font-size:17px;padding:10px 16px}
.form__adr .form__check{margin:0}
/* "Ich bestelle fuer eine andere Person": ein grosses Klickziel, Kaestchen und
Text zusammen, nicht nur das 20-Pixel-Quadrat. */
.form__check{margin:0 0 14px}
.form__cl{display:flex !important;align-items:flex-start;gap:12px;
min-height:56px;padding:12px 16px;font-size:18px !important;font-weight:700;
line-height:1.4;background:#fff;border:2px solid #8A7A5C;border-radius:3px;
cursor:pointer;margin-bottom:0 !important}
.form__cl input{width:26px !important;height:26px;min-height:0 !important;
flex:0 0 auto;margin-top:1px;accent-color:var(--brick-ink)}
.form__cl:has(input:checked){border-color:var(--brick-ink);background:#F7F3E4}
.form__cl:focus-within{outline:3px solid var(--brick-ink);outline-offset:2px}
.fremd{margin:0 0 14px;padding:15px 16px 1px;background:var(--linen-2);
border:1px solid var(--linen-3);border-radius:4px}
.fremd[hidden]{display:none}
/* Aufklapper fuer Erklaertext im Formular. Der Pfeil kommt aus der allgemeinen
summary-Regel; hier nur die Schrift auf Fliesstextgroesse zurueckholen,
damit "Mehr dazu" nicht wie eine Ueberschrift aussieht. Das Wort steht
bewusst neben dem Pfeil: ein Pfeil allein wird nicht als Knopf erkannt. */
.mehr{border:0 !important;margin:0 0 14px}
.mehr__s{font-family:var(--ff-text);font-size:17px;font-weight:700;
color:var(--brick-ink);text-decoration:underline;padding:14px 34px 14px 0;
min-height:48px;display:flex;align-items:center}
.mehr__s::after{right:6px}
.mehr__s:focus-visible{outline:3px solid var(--brick-ink);outline-offset:2px}
/* ---------- Upsell: die kalten Suppen im Bestellablauf ---------- */
.upsell{margin:0 0 clamp(18px,2.4vw,26px);padding:clamp(16px,2.4vw,22px);
background:var(--linen-2);border:1px solid var(--linen-3);border-radius:4px}
.upsell[hidden]{display:none}
.upsell__h{margin:0 0 .5rem;font-size:21px;line-height:1.25}
.upsell__t{margin:0 0 1rem;font-size:18px;line-height:1.5;color:var(--ink-soft);
max-width:none}
.upsell__t b{color:var(--ink)}
/* grid-template-columns und min-width:0 gehoeren seit dem 03.09.2026 zusammen
hierher. Vorher war das nur ein display:grid ohne Spaltenangabe: die
implizite Spalte ist dann auto, und weil ein Rasterkind von sich aus
min-width:auto traegt, konnte die Spalte nicht unter die max-content-Breite
des laengsten Knopfes fallen. Gemessen am 03.09.2026 waren das 394px in
einer 294px breiten Schublade, also 100px Ueberhang: die Preise der
Vorschlaege standen rechts ausserhalb des Kastens, und die Schublade bekam
einen waagerechten Rollbalken (Ansage des Auftraggebers vom 02.09.2026,
Punkt 1). minmax(0,1fr) hebt die Untergrenze auf, min-width:0 an Kind und
Knopf gibt sie auch innerhalb des Knopfes frei. Der Name bricht dadurch auf
zwei Zeilen um, die Schrift bleibt gleich gross. */
.upsell__l{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:minmax(0,1fr);gap:10px}
.upsell__l > li{min-width:0}
.upsell__b{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:6px 12px;width:100%;min-width:0;min-height:56px;padding:10px 16px;font:inherit;
text-align:left;background:#fff;border:2px solid #8A7A5C;border-radius:3px;
color:var(--ink);cursor:pointer}
/* Rahmen #8A7A5C statt #B8A98C: 3,4:1 gegen Weiß, WCAG 1.4.11 fordert 3:1 für
die Begrenzung von Bedienelementen. */
.upsell__b:hover{border-color:var(--brick-ink);background:#FFFBF3}
.upsell__n{min-width:0;font-family:var(--ff-display);font-size:19px;font-weight:600;
line-height:1.25}
.upsell__p{font-size:18px;font-weight:700;color:var(--brick-ink);white-space:nowrap}
/* Zusammenfassung nach dem Abschluss */
.cart__done{flex:1 1 auto;overflow-y:auto;padding:clamp(16px,3vw,24px)}
.cart__done[hidden]{display:none}
.don__ok h3{font-size:clamp(22px,2.4vw,27px);margin-bottom:.5rem}
.don__ok h3:focus{outline:3px solid var(--brick-ink);outline-offset:4px}
.don__lead{margin:0 0 1.2rem;font-size:19px;color:var(--ink-soft)}
.don__list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:12px}
.don__list li{background:#fff;border:1px solid var(--linen-3);border-radius:4px;
padding:12px 16px;display:grid;gap:3px}
.don__d{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--brick-ink)}
.don__n{font-family:var(--ff-display);font-size:19px;font-weight:600;line-height:1.25}
.don__p{font-size:16px;color:var(--ink-soft)}
.don__sum{margin:0 0 1.2rem;font-size:19px}
.don__sum b{font-family:var(--ff-display);color:var(--brick-ink);font-weight:600}
.don__addr{background:var(--linen-2);border:1px solid var(--linen-3);border-radius:4px;
padding:14px 16px;margin:0 0 1.2rem}
.don__ah{margin:0 0 .4rem;font-size:14px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-soft)}
.don__addr p{margin:0;font-size:18px;line-height:1.55}
.don__note{margin-top:.6rem !important;color:var(--ink-soft)}
.don__probe{font-size:16px;line-height:1.55;color:var(--ink-soft);
background:#F4EADF;border-left:4px solid var(--brick);padding:12px 16px;border-radius:0 3px 3px 0;
margin:0 0 1.2rem}
.don__act{display:grid;gap:12px}
.don__act .btn{width:100%}
/* ---------- feste Leiste unten, nur klein ---------- */
.bar{display:none}
.bar__badge{min-width:24px;height:24px;padding:0 6px;border-radius:12px;
background:var(--brick-ink);color:#fff;font-size:14px;font-weight:700;
display:inline-flex;align-items:center;justify-content:center;line-height:1;margin-left:4px}
.bar__badge[data-n="0"]{display:none}
/* Anzahl und Summe ueber den drei Knoepfen. flex-basis:100% macht daraus eine
eigene Zeile, ohne dass die Leiste ein zweites Element mehr braucht. */
.bar__stand{flex:0 0 100%;margin:0;padding:8px 16px 6px;text-align:center;
font-size:17px;font-weight:700;color:var(--paper);
background:#3A3122;border-bottom:1px solid #4A3D2C}
/* =========================================================================
Feste Leiste "was gerade ausgewählt ist" (UX-Brief 10)
Sie erscheint mit der ersten Auswahl, nennt Anzahl und Summe in Worten und
fuehrt zur vollstaendigen Bestellung. Ruhig gehalten: Leinen statt Signal,
eine Zeile hoch, keine Bewegung, kein Countdown.
Verdecken darf sie nichts. Dafuer sorgen drei Dinge zusammen: body.hat-auswahl
bekommt unten Polster, body.is-tastatur blendet sie aus, solange ein
Eingabefeld den Fokus hat, und bei geoeffneter Schublade ist sie weg.
========================================================================= */
.auswahlbar{position:fixed;left:0;right:0;bottom:0;z-index:38;
display:flex;align-items:center;justify-content:center;gap:10px 20px;flex-wrap:wrap;
padding:10px clamp(14px,3vw,28px) calc(10px + env(safe-area-inset-bottom));
background:var(--linen);border-top:2px solid var(--messing);
box-shadow:0 -10px 24px -20px rgba(30,25,19,.8)}
.auswahlbar[hidden]{display:none}
.auswahlbar__t{margin:0;font-size:19px;font-weight:700;color:var(--ink)}
.auswahlbar__b{min-height:52px;padding:10px 22px;font:inherit;font-size:18px;
font-weight:700;color:#fff;background:var(--brick-ink);border:1px solid var(--brick-ink);
border-radius:3px;cursor:pointer}
.auswahlbar__b:hover{background:#45521C}
body.hat-auswahl{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
body.is-tastatur .auswahlbar,
body.cart-open .auswahlbar{display:none}
/* =========================================================================
"Ihre Bestellung" direkt unter dem Speiseplan (UX-Brief 9 und 10)
Der zweite Ort, an dem der Auswahlzustand steht: Tag, Gericht, Preis. Er
steht in der Leserichtung und verdeckt deshalb grundsaetzlich nichts.
========================================================================= */
.auswahl{margin:clamp(26px,3.4vw,40px) 0 0;padding:clamp(18px,2.4vw,26px);
background:#FBF7EE;border:2px solid var(--messing);border-radius:9px;
box-shadow:0 16px 30px -24px rgba(30,25,19,.6)}
.auswahl--leer{border-style:dashed;border-color:#C6B79A;background:var(--cream);
box-shadow:none}
.auswahl__h{margin:0 0 .3rem;font-size:clamp(22px,2.2vw,27px)}
.auswahl__kopf{margin:0 0 .8rem;font-size:19px;font-weight:700;color:#22491B}
.auswahl--leer .auswahl__kopf{color:var(--ink-soft)}
.auswahl__leer{margin:0;font-size:18px;line-height:1.5;color:var(--ink-soft)}
.auswahl__l{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:minmax(0,1fr);gap:10px}
.auswahl__l > li{min-width:0}
/* minmax(0,1fr) statt 1fr: 1fr hat als Untergrenze auto, also die
min-content-Breite des Gerichtnamens. Gemessen am 03.09.2026 bei 390px
Bildschirmbreite lief die Karte damit 17,9px ueber die Liste hinaus. */
.auswahl__i{display:grid;gap:2px 14px;padding:12px 16px;background:#fff;
border:1px solid var(--linen-3);border-radius:4px;
grid-template-columns:minmax(0,1fr) auto}
.auswahl__d{grid-column:1;font-size:15px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--ink-soft)}
/* overflow-wrap gehoert seit dem 03.09.2026 dazu: die Spalte darf jetzt
schmaler werden als der laengste Gerichtname (minmax(0,1fr) oben), also
muss das Wort umbrechen duerfen. Gemessen bei 390px: "Rindersaftgulasch"
braucht 173px, die Spalte ist 147px breit. */
.auswahl__n{grid-column:1;min-width:0;overflow-wrap:break-word;
font-family:var(--ff-display);font-size:20px;
font-weight:600;line-height:1.25}
.auswahl__p{grid-column:1;font-size:17px;color:var(--ink)}
.auswahl__rm{grid-column:2;grid-row:1/4;align-self:center;min-height:44px;
padding:8px 16px;font:inherit;font-size:16px;font-weight:700;color:#7A4A2E;
background:#fff;border:1px solid #D8C3A8;border-radius:3px;cursor:pointer}
.auswahl__rm:hover{background:#F3E7DC}
.auswahl__i--alt{background:#F3E7DC;border-color:#D8C3A8}
.auswahl__summe{display:flex;justify-content:space-between;align-items:baseline;
gap:14px;margin:14px 0 0;padding-top:12px;border-top:2px solid var(--messing);
font-family:var(--ff-display);font-size:22px;font-weight:600}
.auswahl--leer .auswahl__summe,.auswahl--leer .auswahl__b{display:none}
.auswahl__b{width:100%;margin-top:14px}
/* Kopf-Warenkorb Puls beim Hinzufügen */
@keyframes cartPulse{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.cartbtn.is-pulse{animation:cartPulse .4s ease}
/* =========================================================================
Breiten
========================================================================= */
@media (min-width:560px){
.pday__grid{grid-template-columns:1fr 1fr}
.pday__des{grid-column:1/-1}
}
@media (min-width:820px){
.today__in{grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr)}
.kosten{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.liefer{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.wer{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.firma{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.order{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.foot__in{grid-template-columns:1.1fr .9fr 1.2fr}
}
@media (min-width:900px){
/* Die drei Hinweise unter der Liefersektion erst hier nebeneinander. Bei
820px waeren sie 250px breit und jeder Satz braeche in acht Zeilen. */
.lnote{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Die dritte Gerichtsspalte beginnt erst ab 1100px, frueher stand sie ab 820px.
Auf einem iPad Air im Hochformat (834px) waren die Gerichtskarten dadurch nur
238px breit, die Gerichtsnamen brachen in vier Zeilen und die Fotos waren
238x134px gross. Brief-Abschnitt 22 verlangt fuer 768-1024px ausdruecklich
keine drei schmalen Karten nebeneinander. Zwei Spalten ergeben dort 366px
(768) bis 460px (1024) breite Karten. Ab 1100px, also auf Notebook und
Bildschirm, bleiben es wie bisher drei. */
@media (min-width:1100px){
.pday__grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:760px){
.sec h2{font-size:clamp(26px,7vw,33px);max-width:none}
.today__main h2{font-size:clamp(25px,6.6vw,32px);max-width:none}
.lead{font-size:19px}
/* Der Platz fuer die feste Leiste muss den Streifen unter dem iPhone-Balken
mit einrechnen, sonst steht das letzte Stueck Fusszeile dahinter. */
body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
/* height:68px zusammen mit box-sizing:border-box und padding-bottom hiess:
auf Geraeten mit Home-Indikator wurden die Knoepfe von 68px auf 34px
zusammengedrueckt. min-height laesst die Leiste stattdessen um den
Sicherheitsabstand wachsen. */
.bar{display:flex;flex-wrap:wrap;position:fixed;left:0;right:0;bottom:0;z-index:40;
height:auto;min-height:68px;
background:var(--board);border-top:1px solid var(--messing);
padding-bottom:env(safe-area-inset-bottom)}
/* Auf dem Telefon gibt es nur EINE feste Leiste. Anzahl und Summe stehen in
deren eigener Zeile (.bar__stand), der mittlere Knopf fuehrt zur
Bestellung. Zwei uebereinander gestapelte Leisten haetten auf 375px ein
Drittel des Bildschirms gekostet. */
.auswahlbar{display:none !important}
/* Die Leiste ist mit der Standzeile rund 34px hoeher. Ohne dieses Polster
stuende das letzte Stueck Seite dahinter. */
body.hat-auswahl{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
.bar__stand{font-size:16px}
/* Bildschirmtastatur offen: die Leiste haengt auf iOS ueber der Tastatur und
legt sich genau auf das Feld, in das gerade getippt wird. Sie verschwindet
deshalb, solange ein Eingabefeld den Fokus hat. Das Polster an body bleibt
stehen, damit beim Ein- und Ausblenden nichts springt. */
body.is-tastatur .bar{display:none}
.bar__a{flex:1;display:flex;align-items:center;justify-content:center;
min-height:68px;font-size:19px;font-weight:700;text-decoration:none;
color:var(--paper);background:transparent;border:0;font-family:inherit;cursor:pointer}
/* Oliv auf Oliv: der Hauptknopf hob sich vom Band der Leiste (--board) nur
um eine Nuance ab und war auf dem Foto eines Handys kaum als der eine
Weg zu erkennen. Die Messinglinie an der Oberkante macht ihn eindeutig,
ohne an der Schriftfarbe zu ruehren (weiss auf --brick-ink misst 6,51:1;
ein hellerer Grund haette diesen Wert gekostet). */
.bar__a--go{background:var(--brick-ink);color:#fff;
box-shadow:inset 0 3px 0 var(--messing)}
.bar__a+.bar__a{border-left:1px solid #4A3D2C}
.cta .btn{width:100%}
.phone{font-size:clamp(34px,9vw,46px)}
.cart__two{grid-template-columns:1fr}
}
/* =========================================================================
Telefon: drei Stellen, die auf 375 Pixeln im Weg standen (05.09.2026)
Alles hier ist am Teststand bei 375x812 nachgemessen, vorher und nachher.
"screen and" steht davor, weil der Bestellzettel-Druck dieselbe schmale
Breite haben kann und dort keine dieser Regeln gelten soll.
------------------------------------------------------------------
1 · Das Schild "Bild folgt" im Speiseplan
Der Auftraggeber hat zu keinem warmen Gericht ein Foto: in der Fassung, die
am 05.09.2026 auf dem Vorschau-Server stand, tragen alle 45 Gerichtkacheln
das gelieferte Schild "Bild folgt" (die vier Suppen im Vorrats-Regal haben
ihr eigenes gezeichnetes Etikett und sind hier nicht gemeint).
Auf dem Telefon kostet dieses Schild 174 Pixel je Kachel, also 522 Pixel je
Liefertag. Gemessen bei 375x812 am Montag, 14. September: der Tag schrumpft
von 2029 auf 1507 Pixel, die ganze Seite von 26188 auf 23581.
Das Schild sagt einmal etwas ("ein Foto kommt noch"), nicht 49-mal. Am
Schreibtisch, wo der Platz nicht knapp ist, bleibt es deshalb stehen; hier
faellt es weg. Sobald ein Gericht ein echtes Foto bekommt, nimmt die Regel
sich selbst zurueck: app.js entfernt dabei dish__media--platzhalter und
dish--ohnefoto (siehe bildSetzen), und das Foto steht auch auf dem Telefon.
Deshalb display:none und kein Loeschen im Erzeuger.
------------------------------------------------------------------
2 · Die Preistabelle
Die rechte Spalte hielt die laengste Zahl der Tabelle am Stueck
("7,50 bis 12,34", 24px in der Auszeichnungsschrift, white-space:nowrap)
und war damit 158 von 311 Pixeln breit. Der Erklaersatz zum
Mindestbestellwert stand daneben in 153 Pixeln und lief ueber 15 Zeilen:
Zeile 1 der Tabelle war 540 Pixel hoch. Gemessen nachher: Textspalte 237,
Zeile 1 noch 327, ganze Tabelle 688 statt 1019 Pixel.
Die Spanne darf dafuer umbrechen und wird eine Spur kleiner (21 statt 24).
Die Kopfzeile Posten/Preis bleibt stehen: ohne sie stuende "0,00" ohne
Einheit da.
------------------------------------------------------------------
3 · Der Knopf "Weiter zur Adresse" im Warenkorb
Schritt 1 der Bestellstrecke ist auf dem Telefon 952 Pixel hoch, sichtbar
sind 627. Zwischen der Summe und dem Knopf stehen die Vorschlaege "Fuer
spaeter dazu?" (460 Pixel). Der Knopf lag damit bei 1057, also 245 Pixel
unter der Kante: wer bestellen wollte, musste erst an einem Angebot
vorbeirollen, das er nicht gesucht hat.
position:sticky statt Umsortieren: die Reihenfolge im Quelltext bleibt
unveraendert (Tastatur und Vorleseprogramm treffen den Knopf weiter nach
den Vorschlaegen), er klebt nur sichtbar am unteren Rand der Schublade.
Der Schatten ohne Weichzeichnung ist das Band in Cremefarbe darum, damit
Text nicht unter dem Knopf durchscheint.
NUR Schritt 1. In Schritt 2 steht der Knopf am Ende eines Formulars mit
acht Feldern; ein klebender Knopf legt sich dort auf das Feld, in das
gerade getippt wird. Am Ende eines Formulars ist unten auch die Stelle, an
der man ihn erwartet. */
@media screen and (max-width:760px){
.dish--ohnefoto .dish__media--platzhalter{display:none}
.ptab th,.ptab td{padding-left:10px}
.ptab th:not(:first-child),.ptab td:not(:first-child){width:1%}
.ptab tbody td:not(:first-child){white-space:normal;font-size:21px}
#step1>.cart__submit{position:sticky;bottom:0;z-index:3;
box-shadow:0 0 0 10px var(--linen),0 -14px 18px -14px rgba(30,25,19,.5)}
}
/* ---------- Drucken: der Monatsplan als Bestellzettel ---------- */
/* =========================================================================
Druck: der Speiseplan wird zum Bestellzettel zum Ankreuzen.
Seit dem 28.08.2026 liegt das Blatt quer und traegt eine ganze Woche, die
fuenf Liefertage nebeneinander als Spalten (Ansage des Auftraggebers vom
27.08.2026). Vorher stand A4 hoch, ein Gericht je Zeile untereinander.
Blattmass, gerechnet statt geschaetzt: A4 quer misst 297 x 210 mm. Bei den
unveraenderten Raendern 12mm links, 12mm rechts, 12mm oben und 14mm unten
bleiben nutzbar
Breite 297 - 12 - 12 = 273mm
Hoehe 210 - 12 - 14 = 184mm
Die alte Fassung rechnete an dieser Stelle mit 271mm nutzbarer Hoehe. Das
war die Rechnung fuer hoch (297 - 12 - 14) und gilt nach der Drehung nicht
mehr; sie ist deshalb hier ersetzt.
Von den 273mm Breite nutzt das Raster nur 269mm. Grund, gemessen am
28.08.2026: Chrome verkleinert beim Drucken die GANZE Seite, sobald der
Inhalt die Blattbreite ausreizt. Bei 273mm kam der Text mit 9,75pt statt
10pt aufs Papier, bei 271mm mit 9,95pt, ab 269mm mit genau 10,0pt. Die
fehlenden 4mm sind der Preis dafuer, dass die Schriftgroesse haelt.
Die 269mm teilen sich in fuenf Tagesspalten und vier Abstaende von 3mm:
(269 - 4 * 3) / 5 = 51,4mm je Liefertag, davon 5,4mm fuer das
Ankreuzkaestchen, also 46,0mm Textbreite je Gericht.
Von den 184mm Hoehe nimmt der Blattkopf 7mm und die Fusszeile 26mm; es
bleiben rund 151mm fuer die Speisen einer Woche.
Schriftgroessen: Wochentag und Blattkopf 11pt, alles Uebrige 10pt bei
Zeilenabstand 1,15. Kleiner wird die Schrift hier nicht, auch wenn dann
weniger auf das Blatt passt.
Passt es denn? Gemessen am 28.08.2026, indem dieselbe Seite auf ein
absichtlich 900mm hohes Blatt gedruckt und die hoechste Woche vermessen
wurde. Nutzbar sind 195,9mm ab Blattoberkante (12mm Rand oben, 14mm unten
auf 209,9mm Blatthoehe). Die hoechste Woche endet bei:
heutiger Datenstand, keine Angabe freigegeben 182,3mm
Kennzeichnung "A, C, G" an jeder Speise 177,5mm
Kennzeichnung "A1, C, G (2, 4)" an jeder Speise 187,1mm
Kennzeichnung "A, C, G, I, J, 1, 2, 3", jede Speise 191,8mm
Die letzte Zeile ist der Ernstfall, den es so kaum geben wird: acht Kuerzel
an allen 25 Eintraegen eines Blattes. Auch der geht auf ein Blatt, mit
4,1mm Reserve. Das ist der eigentliche Grund, warum Nummer, Name und
Kennzeichnung als EIN Absatz laufen und die Beschriftung "Allergene und
Zusatzstoffe:" nur einmal je Blatt in der Fusszeile steht: mit ihr an jeder
Speise braucht dieselbe Woche 249,0mm und faellt auf zwei Blaetter.
Wer hier etwas hinzufuegt, misst nach.
========================================================================= */
@media print{
/* Quer gilt NUR fuer den Bestellzettel, nicht fuer das ganze Haus.
@page ohne Namen ist eine dokumentweite At-Regel und laesst sich nicht an
einen Selektor binden. Ein blosses @page{size:A4 landscape} haette deshalb
auch alles andere gedreht, was style.css laedt: die Rechnung und den
Bestellzettel des Gastes aus der Warenkorb-Schublade (zweiter @media-print-
Block weiter unten, body.print-rechnung, ausgeloest von app.js
printInvoice()) und die vier Rechtsseiten impressum, datenschutz, widerruf
und agb. Gemessen am 28.08.2026: die Rechnung kam mit 841,92 x 594,96 pt
aus dem Drucker, also A4 quer statt hoch.
Deshalb bleibt das unbenannte @page unveraendert auf hoch und das
Querformat haengt an einer benannten Seite, die nur der Speiseplan zieht.
body:has(.planwrap) trifft ausschliesslich index.html; die Rechtsseiten
haben keinen Plan. body.print-rechnung nimmt das wieder zurueck, denn dann
ist der Plan ausgeblendet und gedruckt wird das Rechnungsdokument. */
@page{size:A4 portrait;margin:12mm 12mm 14mm}
/* Der Bestellzettel bekommt seit dem 03.09.2026 oben 8mm statt 12mm und
unten 6mm statt 14mm (Aufgabe bestellzettel-satzspiegel-luft). Gemessen an
A4 quer: bedruckbar sind damit 196,0mm hoch und 273,0mm breit statt
184,0 x 273,0.
Warum ueberhaupt: der Zettel ist an der Hoehe knapp. Gemessen am
03.09.2026 am erzeugten PDF, LOKALER TESTSTAND mit den Demo-Gerichten
("Drittes Gericht (Bezeichnung und Preis folgen)"): die hoechste Woche
bedruckt 185,24mm, mit einer Allergen-Legende in der Fusszeile 189,21mm,
mit einer zusaetzlich noch nicht freigegebenen Woche 194,76mm. Bei den
alten 184mm passte davon nur die erste Fassung, und eine Woche, die nicht
auf ein Blatt passt, reisst mitten durch die Kuchenzeile.
Der gepflegte Plan des Auftraggebers liegt in der MySQL des Strato-Servers
und ist von hier nicht erreichbar; ueber ihn sagt keine dieser Zahlen
etwas. Die Demo-Namen des Teststands sind aber laenger als gepflegte
Gerichtnamen, die Zahlen sind also die unguenstige Seite und nicht die
guenstige.
Die 12mm sind also kein Zierrat, sie sind der Unterschied zwischen einem
Blatt je Woche und zwei.
Unten weniger als oben, und das mit Absicht: am oberen Rand steht der
Kopf, den man beim Ausfuellen ansieht, unten steht der Fussblock zum
Lesen. Ein knapperer Rand faellt dort nicht auf.
Seitlich bleibt es bei 12mm. Der Auftraggeber hat den linken Rand
ausdruecklich als zu eng gemeldet; ihn fuer Hoehengewinn weiter zu
verkleinern waere die falsche Richtung. 6mm sind auch fuer Geraete mit
grossem unbedruckbarem Rand sicher: Tinten- und Laserdrucker der
Buerogrosse koennen A4 bis rund 4,2mm an die Kante.
Das unbenannte @page bleibt unveraendert bei 12/12/14: es traegt Rechnung,
Korrekturbeleg und die vier Rechtsseiten, die niemand am Rand fuellt. */
@page quer{size:A4 landscape;margin:8mm 12mm 6mm}
body:has(.planwrap){page:quer}
body.print-rechnung{page:auto}
/* Kopf- und Fussleiste der Seite gehoeren nicht auf den Bestellzettel, die
Anschrift steht in der eigenen Fusszeile weiter unten.
.buehne__kopf kam am 28.08.2026 dazu: die Ueberschrift der Seite samt
Untertitel steht seit dem Buehnen-Umbau innerhalb von .sec--plan und
belegte im Ausdruck ein eigenes erstes Blatt. Die alte Regel zeigte noch
auf .stage, ein Element, das es nicht mehr gibt. */
.head,.foot,.stage,.buehne__kopf,.plate,.bar,.segwrap,.weeknav,.weeknav__spanne,
.auswahlbar,.auswahl,.dish__menge,
/* .sec--kosten kam am 25.08.2026 dazu (Politur-Runde 2). Der Abschnitt "Was
es kostet" haengte bisher als rund zwei zusaetzliche A4-Seiten hinter dem
Bestellzettel, in Bildschirmtypografie und mit einem Verweis "weiter unten
bei Fuer Betriebe" auf einen Abschnitt, der im Druck ausgeblendet ist. Der
Zettel selbst traegt die noetigen Angaben bereits: den Preis an jedem
Gericht und in der Fusszeile jedes Blattes Anschrift, Telefon,
Bestellschluss und die Fleischart-Legende. */
.cta,.sec--liefer,.sec--firma,.sec--kosten,
.sec--wer,.sec--faq,.sec--order,.sec--vorrat,.today,.dish__add,.dish__media,
.head .btn,.cartbtn,.cart,.today__price,.legend__a,.plan__hint,
.pday__korb,.kuchen__bild,
/* .legend steht am Bildschirm einmal unter dem Plan. Im Querformat waere sie
ein sechster Block hinter dem Spaltenraster und damit ein zusaetzliches,
halbleeres Blatt. Ihr Text steht ohnehin wortgleich in der Fusszeile jedes
Wochenblattes (siehe .pday[data-wlabel]::after weiter unten), und die
haengt seit dem 28.08.2026 an einem Attribut aus dem ausgelieferten HTML,
ist also auch ohne JavaScript da. */
.legend,
/* "im Preis der warmen Gerichte enthalten" unter jedem Nachtisch: fuenfmal je
Blatt zwei Zeilen, gemessen 8,4mm je Spalte. Derselbe Satz steht wortgleich
in der Fusszeile des Blattes. */
.nachtisch__hinweis,
.sec--plan .lead,.sec--plan .eyebrow{display:none !important}
/* 10pt ist die Untergrenze und wird nicht unterschritten, auch nicht um
einen Zehntelpunkt. Der Zeilenabstand ist der Stellhebel, der bleibt:
1,15 statt 1,2 sind 0,2mm je Zeile, bei den rund 30 Zeilen der hoechsten
Tagesspalte gut 6mm. Die Bildschirmfassung stand vor der Drehung auf 1,12,
lesbar bleibt es also mit Reserve. */
body,body.hat-auswahl{background:#fff;color:#000;font-size:10pt;line-height:1.15;padding:0}
.wrap{max-width:none;padding:0}
.sec{padding:0}
/* padding:0 gehoert hier ausgeschrieben hin, und der Selektor nennt BEIDE
Klassen. .sec{padding:0} weiter oben ist eine Klasse und verliert gegen
index.html Zeile 804 (.sec--plan{padding-top:clamp(14px,1.8vw,24px)}):
genauso spezifisch, aber spaeter geladen, weil der zweite