/* Essen: Plan, Tauschen, Einkaufsliste, eigene Auswahl (js/views/plan.js), Rezepte, Rezept, Tortenfinale, Helfer-Rechner (js/views/rezepte.js, js/tools.js).
   Geladen nach css/app.css. Am Ende der Druck der Einkaufsliste (@media print, nach den Grundregeln für .si). */

/* Begriff erklären (glossBtn, js/glossar.js) beim ersten Auftreten: leiser Textknopf unter dem Text, bündig mit ihm (Tippfläche 44 px gibt den Abstand).
   Plan (feste Pläne): „Was ist eine Etappe?“ mittig unter dem Wochenwechsel; Einkaufsliste (eigene Auswahl) und Helfer: „Was ist ein Vögelchen?“. */
.es-gloss .gloss{margin-left:-4px;justify-content:flex-start;text-align:left}
.sec > .es-gloss{margin-top:calc(-1 * var(--sp-2))}
.es-gloss.wk-gloss{display:flex;justify-content:center}
.wk-gloss .gloss{margin-left:0;justify-content:center;text-align:center}

/* Wochenplan (#/plan): oben der Wochenwechsel (.wk-sw: zwei runde Pfeile 48 px, dazwischen „Woche 1“ und „Tag 1–7 · Mengen für …“), kein seitliches Scrollen.
   Darunter je Tag eine Karte (.dayrow) mit Kopfzeile „Tag 3“ (heute: Etikett „Heute“, kein Rahmen), Datum rechts, und den Mahlzeiten als Liste. */
.wk-sw{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:var(--sp-2);text-align:center}
.wk-sw.one{grid-template-columns:minmax(0,1fr)}
.wk-nav{width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--card);box-shadow:var(--sh-1);color:var(--green);display:flex;align-items:center;justify-content:center}
.wk-nav .ic{font-size:24px}
.wk-nav[aria-disabled="true"]{background:var(--sunk);box-shadow:none;color:var(--muted);opacity:.55;cursor:default}   /* am Anfang/Ende: bleibt fokussierbar, tut nichts */
.wk-mid{display:flex;flex-direction:column;align-items:center;min-width:0}
.wk-t{font-size:var(--fs-title);line-height:var(--lh-title)}
.wk-t:focus{outline:none}   /* bekommt den Fokus nach „Woche 2 ansehen“ (unten), ist aber kein Bedienelement */
.wk-next{align-self:center;margin-top:var(--sp-1)}
.wk-m{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted);text-wrap:balance}
.wk-note{margin:0;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted);text-align:center;text-wrap:balance}
.week{display:flex;flex-direction:column;gap:var(--sp-3)}
.dayrow{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:var(--sp-3) 14px 2px;display:flex;flex-direction:column}
.dr-h{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1) 10px;min-height:32px}
.dr-h h2{font-size:var(--fs-section);line-height:var(--lh-section)}
.dr-date{margin-left:auto;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
/* Mahlzeit-Zeile .dm (Plan, „Gerichte in dieser Liste“, eigene Auswahl .dm.cr): Foto 56 px | Mahlzeit über dem Gericht | „Tauschen“ bzw. Portionen.
   „Getauscht“ und „Gegessen“ stehen als eigene Zeile unter dem Gericht (.dm-st), damit die Mahlzeit-Zeile nicht mitten in „Morgens · getauscht“ umbricht.
   Der Gericht-Link (.v) spannt seine Tippfläche über die ganze Zeile (::after), „Tauschen“ und die Portionen liegen darüber.
   Wird es schmal (Containerabfrage, auch bei großer Systemschrift), rutscht der Knopf unter das Gericht, damit der Name Platz behält. */
.dmeals{display:flex;flex-direction:column;min-width:0;container:dm / inline-size}
.dm{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"img k act" "img v act" "img st act";column-gap:14px;align-items:center;min-height:76px;padding:10px 0}
.dm + .dm::before{content:"";position:absolute;top:0;left:70px;right:0;border-top:1px solid var(--line)}   /* Trennlinie erst nach dem Foto */
.dm-img{grid-area:img;align-self:center;width:56px;height:56px;border-radius:var(--r-s);object-fit:cover;display:block;background:var(--sunk)}
.dm-ph{display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--green)}   /* Platzhalter ohne Foto: Symbol auf --sunk (.dm-img) wie .ph */
.dm .k{grid-area:k;align-self:end;min-width:0;font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:500;color:var(--muted)}
.dm .v{grid-area:v;align-self:start;min-width:0;font-family:var(--f-head);font-size:var(--fs-dish);line-height:var(--lh-dish);font-weight:600;color:var(--green);text-decoration:none;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}   /* Gerichtname wie auf Heute und in Rezepten (Stufe „Gericht“) */
.dm .v::after{content:"";position:absolute;inset:0}
.dm .v:focus-visible{outline-offset:2px}
.dm > .dm-s,.dm > .stepper,.dm > .addbtn{grid-area:act;position:relative;z-index:1}
.dm-s{white-space:nowrap;margin-right:-4px}
/* Zustand unter dem Gericht: Symbol + Wort je Zustand, ohne „·“ dazwischen (bricht es um, steht jedes Wort sauber in seiner Zeile) */
.dm-st{grid-area:st;align-self:start;min-width:0;display:flex;flex-wrap:wrap;gap:0 var(--sp-3);font-size:var(--fs-meta);line-height:var(--lh-meta)}
.dm-ok,.sw-on{display:inline-flex;align-items:center;gap:var(--sp-1);font-weight:600;color:var(--done)}   /* „Gegessen“ mit Haken (Wort, nicht nur Farbe) */
.dm-ok .ic,.sw-on .ic{font-size:16px;flex:0 0 auto}
.dm-ok .ic{stroke-width:2.6}
@container dm (max-width:19.3em){
  .dm{grid-template-columns:56px minmax(0,1fr);grid-template-areas:"img k" "img v" "img st" "img act"}
  .dm-img{align-self:start}
  .dm .v{align-self:auto}
  .dm > .dm-s{justify-self:start;margin:0 0 -8px -4px}
}

/* Rezepte (#/rezepte, js/views/rezepte.js): oben Helfer und Tortenfinale als kleine Liste (.rmore), Suche mit Symbol (.rsearch), Kacheln .rgrid.
   .search ist auch das Suchfeld der eigenen Auswahl (Plan): die Grundregel bleibt, die Rezepte-Suche (52 px, Symbol) steht unter .rsearch. */
.search{width:100%;min-height:44px;border:1.5px solid var(--edge);background:var(--card);border-radius:var(--r-s);padding:var(--sp-3) 14px;font-size:var(--fs-body);color:var(--ink)}
.rsearch{position:relative;display:block}
.rsearch > .ic{position:absolute;left:14px;top:50%;margin-top:-11px;font-size:22px;color:var(--muted);pointer-events:none}
.rsearch .search{min-height:52px;padding-left:var(--sp-7);font-family:inherit}
/* Gerichtname in der Stufe „Gericht“ (Fraunces 19/24, app.css .rcard b), auch unter 360 px: dort steht statt zweier Spalten eine Spalte (unten) */
/* Torten ohne Foto: ruhiger Platzhalter .ph (app.css: --sunk) mit Kuchen-Symbol in Grün, wie .dm-ph und .mprod-ph; kommt ein Foto, steht dort ein <img> */
.rcard .ph,.rhero > .ph{color:var(--green)}
/* Schmal (≤ 360 px) und große Systemschrift: eine Spalte, Foto klein links, damit Gerichtnamen nicht mitten im Wort brechen.
   Gilt für die Rezepte (.rgrid) und die Tausch-Kacheln (.pick-grid; Foto 104 px, damit das Etikett „Gewählt“ darauf passt). */
@media (max-width:360px), (max-width:19.9em){
  .rgrid,.pick-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
  :is(.rgrid,.pick-grid) .rcard{flex-direction:row;align-items:center;min-height:88px}
  :is(.rgrid,.pick-grid) .rcard :is(img,.ph){flex:0 0 88px;width:88px;height:auto;min-height:88px;aspect-ratio:auto;align-self:stretch}   /* Foto so hoch wie die Zeile */
  .pick-grid .rcard :is(img,.ph){flex-basis:104px;width:104px}
  :is(.rgrid,.pick-grid) .rcard .body{flex:1 1 auto;min-width:0;padding:10px 14px}
}

/* Rezeptseite (#/rezept/<id>) und Torten-Rezept (#/torten/<id>): Foto randlos (bis an den Bildschirmrand; im breiten Fenster bis an den Rand der Spalte,
   dort abgerundet), „Zurück“ als Kapsel darauf, Titel, leise Unterzeile, „Auf die Einkaufsliste“ als Sekundärknopf, Zutaten als eine Liste, nummerierte Schritte, Tipp. */
.rhero{position:relative;margin:0 calc(-1 * max(16px, env(safe-area-inset-right,0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left,0px)))}
.rhero > img,.rhero > .ph{display:block;width:100%;aspect-ratio:4 / 3;max-height:min(62vh, 480px);object-fit:cover;background:var(--sunk)}
.rhero > .ph{aspect-ratio:16 / 9;font-size:64px}   /* Torten: Platzhalter (Kuchen-Symbol) statt Foto, flacher */
@media (min-width:720px){.rhero{margin-top:var(--sp-4)} .rhero > img,.rhero > .ph{border-radius:var(--r)}}
.rhero > .back{position:absolute;z-index:1;left:max(16px, env(safe-area-inset-left,0px));top:14px;margin:0;max-width:calc(100% - 32px);min-height:44px;padding:var(--sp-1) var(--sp-4) var(--sp-1) 10px;
  background:var(--card);color:var(--green);border-radius:var(--r-pill);box-shadow:var(--sh-1);font-size:var(--fs-label);line-height:var(--lh-label)}
.rhero > .back .ic{font-size:22px;flex:0 0 auto}
.rhead{gap:6px}
.rhead > .tag{align-self:flex-start}
.rtitle{font-size:var(--fs-display);line-height:var(--lh-display)}
.rsub{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
.rfacts{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin-top:var(--sp-1);font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:500;color:var(--muted)}
.rfacts span{display:inline-flex;align-items:center;gap:6px}
.rfacts .ic{font-size:20px;flex:0 0 auto}
/* Gehört zusammen (Beilage/Hauptgericht): Zeile der Liste mit Foto statt rundem Bild */
.rpair .list-ic.round{width:48px;height:48px;border-radius:var(--r-s)}
/* Eigene Einkaufsliste: schon drauf → in einer Fläche oben „Auf deiner Einkaufsliste“ und was die Liste jetzt zeigt, darunter Portionen und „Zur Liste“.
   Die Fläche bekommt nach dem Hinzufügen den Fokus (main.js data-rcart): Ring nur bei Tastatur. */
.rcart{display:flex;flex-direction:column;gap:var(--sp-2);background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:14px 14px var(--sp-3) var(--sp-4)}
.rcart:focus:not(:focus-visible){outline:none}
.rcart-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.rcart-n{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.rcart-r{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2)}
/* Zutaten: Abschnittstitel mit „Für <Vogel> ▾“ (Blatt mit allen acht Vögelchen), darunter eine Liste: Name links, Menge rechts in gleich breiten Ziffern */
.ringr .sec-head{align-items:center;row-gap:var(--sp-2)}
.rfor{gap:var(--sp-2);padding:6px 14px 6px var(--sp-2);min-width:0}
.rfor .ic{font-size:18px;flex:0 0 auto}
.ilist{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.ilist > *{position:relative}
.ilist > * + *::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:1px solid var(--line)}
.ilist > .il-h + *::before{display:none}
.il{display:grid;grid-template-columns:minmax(55%,1fr) auto;column-gap:var(--sp-3);align-items:center;min-height:52px;padding:var(--sp-3) var(--sp-4)}   /* Name behält mindestens gut die Hälfte (große Schrift, lange Mengen) */
.il-n{min-width:0;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.il-n .tag{margin-left:var(--sp-2);vertical-align:1px}
.il-a{min-width:0;font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.il .famsplit{grid-column:1 / -1;margin:var(--sp-1) 0 0}
.il.note{display:block;min-height:0;font-size:var(--fs-meta);line-height:var(--lh-meta);font-style:italic;color:var(--muted)}
.il-h{margin:0;padding:14px var(--sp-4) 2px;font-family:var(--f-body);font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;color:var(--muted)}
.opt{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.opt strong,.opt b{color:var(--ink)}
.opt-h{display:block;font-weight:600;color:var(--ink)}   /* Überschrift einer Option („Optional“, „Statt …“) */
/* „Zutat austauschen?“ unter der Liste: leise Frage, darunter je Gruppe ein Textknopf zum Rechner (Fleisch & Fisch, Gemüse & Obst) */
.rswap{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-4)}
.rswap > span{flex:1 1 100%;font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;color:var(--muted)}
/* Zubereitung: Lesetext 17/26, Nummer im Kreis Grün hell */
.steps{display:flex;flex-direction:column;gap:var(--sp-4)}
.steps h3{font-size:var(--fs-dish);line-height:var(--lh-dish);margin-top:6px}
.step{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--sp-3);font-size:var(--fs-body);line-height:var(--lh-body)}
.step i{font-style:normal;width:32px;height:32px;border-radius:50%;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:var(--fs-meta);font-weight:600;margin-top:-3px}
.step b{display:block;color:var(--ink)}
.step p{margin:0}
/* „Gegessen“ am Ende: Fläche mit Tag/Mahlzeit links und dem Haken-Kreis (checkC) rechts */
.eaten{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:14px var(--sp-4)}
.eaten-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.eaten-t b{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.eaten-t span{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
/* Große Systemschrift: Menge unter den Namen, Schritt-Nummer über dem Text, Haken-Kreis unter den Text (der Text behält jeweils die volle Breite) */
@media (max-width:19.9em){
  .il{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .il-a{text-align:left}
  .step{grid-template-columns:minmax(0,1fr);gap:6px}
  .step i{margin-top:0}
  .eaten{flex-wrap:wrap}
  .eaten-t{flex:1 1 100%}
}
/* Tipps & Varianten, Torten-Info: Hinweis-Fläche (Grün hell) mit Glühbirne, Lesetext */
.rtip{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--sp-3);background:var(--green-soft);border-radius:var(--r-s);padding:14px var(--sp-4);color:var(--ink)}
.rtip > .ic{font-size:24px;color:var(--green)}
.rtip p{margin:0}
.rtip p + p{margin-top:var(--sp-2)}
.rtip strong{color:var(--green)}
/* Lange Wörter (große Schrift, schmale Spalte) umbrechen statt überstehen */
.rhead,.step > div,.rtip > div,.eaten-t,.rcart-t,.hres,.hrows dt,.opt{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
/* Torten: Nährwerte oben als eine Fläche mit drei Werten, unten als Tabelle in einer Liste */
.macros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.macro{display:flex;flex-direction:column;gap:2px;min-width:0;padding:var(--sp-3) var(--sp-2);text-align:center}
.macro + .macro{border-left:1px solid var(--line)}
.macro b{font-family:var(--f-head);font-size:var(--fs-dish);line-height:var(--lh-dish);color:var(--green);font-variant-numeric:tabular-nums}
.macro span{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted);overflow-wrap:anywhere}
.ntab{width:100%;table-layout:fixed;border-collapse:collapse;font-size:var(--fs-body);line-height:var(--lh-body)}   /* feste Spalten: lange Wörter brechen um statt zu überstehen (große Schrift) */
.ntab th,.ntab td{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line);text-align:left;font-weight:400;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.ntab th{width:58%}
.ntab tr:first-child th,.ntab tr:first-child td{border-top:0}
.ntab td{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.ntab tr.hl th,.ntab tr.hl td{color:var(--green);font-weight:600}

/* Einkaufsliste: je Gruppe ein Abschnittstitel (secHead, rechts „2 von 9“) und eine Liste (.list.shop-list) mit Trennlinien.
   Zeile .si: Haken-Kreis 44 px (das Kästchen selbst, .si-c mit appearance:none, Haken .si-ck darüber, wie checkC), Name, Menge rechtsbündig in gleich breiten Ziffern.
   Die ganze Zeile hakt ab: unsichtbare Fläche des Labels über der Zeile; „Im Shop“ und die Knöpfe eigener Einträge liegen darüber. */
.shop-group{gap:10px}
.si{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) fit-content(42%);column-gap:14px;align-items:center;min-height:60px;padding:var(--sp-2) 14px}
.si + .si::before{content:"";position:absolute;top:0;left:72px;right:0;border-top:1px solid var(--line)}
.si-c{grid-area:1 / 1;-webkit-appearance:none;appearance:none;width:44px;height:44px;margin:0;border:2px solid var(--muted);border-radius:50%;background:var(--card);cursor:pointer}
.si-c:checked{background:var(--done);border-color:var(--done)}
.si-ck{grid-area:1 / 1;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--card);opacity:0;pointer-events:none}
.si-ck .ic{stroke-width:2.6}
.si-c:checked + .si-ck{opacity:1}
.si label{min-width:0;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;cursor:pointer}
.si label::before{content:"";position:absolute;inset:0}
.si-n{margin-right:var(--sp-2)}
.si a.tag,.si .own-tools{position:relative;z-index:1}
.si .amt{min-width:0;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:break-word}
.si.got .si-n,.si.got .amt{color:var(--muted);text-decoration:line-through}
.shop-sum{margin:0;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.shop-bar{gap:2px}
.shop-act{display:flex;flex-wrap:wrap;gap:0 var(--sp-4);margin-left:-4px}   /* Drucken, Als Bild teilen: Textknöpfe mit Wort */
/* Zeitraum: beschriftete Reihe aus Auswahl-Chips (.chips > .chip, app.css), bricht bei Bedarf um */
.rng{display:flex;flex-direction:column;gap:6px}
.rng-l{font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;color:var(--muted)}
/* Eigene Auswahl (Einkaufsliste und #/einkauf/auswahl): Rezept-Zeilen .dm.cr in einer Liste, Gericht über Art/Portionen.
   Schmal (Containerabfrage crt): Portionen bzw. „Hinzufügen“ unter dem Namen. */
.cart-list{container:crt / inline-size}
.cart-list > .dm{padding:10px 14px}
.cart-list > .dm + .dm::before{left:84px}
.dm.cr{grid-template-areas:"img v act" "img k act"}
.dm.cr .v{align-self:end}
.dm.cr .k{align-self:start}
.dm.cr .dm-ok{display:flex}   /* „✓ 2 Portionen auf der Liste“ in eigener Zeile unter der Art */
@container crt (max-width:24em){
  .dm.cr{grid-template-columns:56px minmax(0,1fr);grid-template-areas:"img v" "img k" "img act";row-gap:2px}
  .dm.cr .dm-img{align-self:start}
  .dm.cr > .stepper,.dm.cr > .addbtn{justify-self:start;margin-top:6px}
}
.stepper{display:flex;align-items:center;gap:2px;background:var(--bg);border:1.5px solid var(--edge);border-radius:var(--r-pill);padding:2px}
.stepper button{width:44px;height:44px;border-radius:50%;border:0;background:var(--card);font-size:var(--fs-section);font-weight:600;color:var(--green);line-height:1}
.stepper b{min-width:24px;text-align:center;font-variant-numeric:tabular-nums;color:var(--green)}
/* Klebt 12 px über der Tab-Leiste; deren echte Höhe (--nav-h, auch mit großer Schrift) misst js/main.js navFit */
.cartbar{position:sticky;bottom:calc(var(--nav-h, calc(67px + env(safe-area-inset-bottom,0px))) + 12px);margin-top:var(--sp-4);z-index:3}
.cartbar .btn{box-shadow:var(--sh-2)}

/* Familienmodus im Rezept: „Für alle“ (Knopf, .fam-ic.sm) und „Alle zusammen“ im Vögelchen-Blatt (.bt-all), Aufteilung je Person unter der Zutat */
.fam-ic{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--green);background:var(--green-soft)}
.fam-ic.sm{width:24px;height:24px;font-size:16px;background:var(--card)}
.famsplit{display:flex;flex-wrap:wrap;gap:var(--sp-1) 14px;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--ink)}
.famsplit b{font-variant-numeric:tabular-nums}
/* Blatt „Für welches Vögelchen?“ (rezeptVoegel): Kacheln flach wie überall im Blatt (app.css), Erklär-Knopf links */
.rbirds .bt-all{width:100%}
.rbirds > .gloss{align-self:flex-start}

/* Helfer (#/helfer: Liste der Rechner; #/helfer/<k>: js/tools.js, Abschnitt „Helfer-Rechner“).
   Felder 52 px mit Rand --edge, Beschriftung 16/600, Einheit „g“ rechts im Feld. Ergebnis als eine Karte (.hres) mit Trennlinien, ohne Kästen darin.
   In einer Lektion (::tool) steht alles in der Rechner-Karte .calc: dort ist .hres nur ein Abschnitt unter einer Trennlinie. */
.htool{display:flex;flex-direction:column;gap:var(--sp-4)}
.htool .hf{gap:6px}
.htool .hf label{font-size:var(--fs-label);line-height:var(--lh-label);font-weight:600;color:var(--ink)}
.htool .hf input,.htool .hf select{min-height:52px;padding:var(--sp-3) 14px;background:var(--card)}
.calc.htool .hf input,.calc.htool .hf select{background:var(--bg)}
.hunit{position:relative}
.hunit input{padding-right:44px}
.hunit > span{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-weight:600;color:var(--muted);pointer-events:none}
.hres{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:2px var(--sp-4)}
.hres > *{margin:0;padding:14px 0}
.hres > * + *{border-top:1px solid var(--line)}
.hres > .hres-k{padding-bottom:0}
.hres > .hres-k + *{border-top:0}
.calc .hres{background:none;box-shadow:none;border-radius:0;padding:0;border-top:1px solid var(--line)}
.hres.is-empty p{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.hres-main{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.hres-main span,.hres-k{font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;color:var(--muted)}
.hres-main b{font-family:var(--f-head);font-size:var(--fs-display);line-height:var(--lh-display);font-weight:600;color:var(--green);font-variant-numeric:tabular-nums}
.hfat{display:flex;align-items:center;gap:var(--sp-3)}
.hfat .sign{flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-section);font-weight:600;color:var(--card);background:var(--muted)}
.hfat.add .sign{background:var(--done)}
.hfat.remove .sign{background:var(--green);color:var(--on-green)}   /* „−“ und Text nennen es, kein Orange */
.hfat > div{display:flex;flex-direction:column;min-width:0}
.hfat b{font-size:var(--fs-body);line-height:var(--lh-body);font-variant-numeric:tabular-nums}
.hfat span{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.hrows{margin:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.hrows > div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px var(--sp-3)}
.hrows dt{color:var(--muted)}
.hrows dd{margin:0 0 0 auto;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.hmeal h3{margin:0 0 var(--sp-2);font-family:var(--f-body);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600;color:var(--ink)}
.hres-note{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}

/* Tauschen pro Mahlzeit (#/tauschen/<tag>/<slot>): Fotokarten (.rcard.pick), das aktuelle Gericht mit Rahmen und Etikett „Gewählt“ + Haken (Plan-Zeilen siehe Wochenplan oben) */
.rcard.pick{position:relative}
.rcard.pick.cur{outline:2px solid var(--green);outline-offset:-2px}
/* Etikett auf dem Bild (.tag.sm.pick-tag, „Gewählt“ .ok / „Original“ neutral): muss gegen .rcard span (Farbe, Größe) aus app.css gewinnen */
.rcard .pick-tag{position:absolute;left:8px;top:8px;font-size:var(--fs-small);color:var(--ink);background:var(--card);box-shadow:var(--sh-1)}
.rcard .pick-tag.ok{color:var(--green);background:var(--green-soft)}
.rcard .pick-tag .ic{font-size:14px;stroke-width:2.6}
.dishes{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.dishes summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 14px}
.dishes summary::-webkit-details-marker{display:none}
.ds-t{display:flex;flex-direction:column;min-width:0;flex:1}
.ds-t b{font-family:var(--f-head);font-size:var(--fs-dish);line-height:var(--lh-dish);color:var(--green)}
.ds-t span{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.dishes[open] .ds-ic{transform:rotate(180deg)}
/* Gerichte der Einkaufsliste je Tag: dieselben Zeilen wie im Plan (.dmeals > .dm) */
.dish-day{display:flex;flex-direction:column;padding:var(--sp-3) 14px 2px;border-top:1px solid var(--line)}
.dish-h{font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;color:var(--ink)}
.dish-h span{font-weight:500;color:var(--muted)}
.sw-on{color:var(--green)}   /* „Getauscht“ (Plan, Einkaufsliste): Tausch-Symbol + Wort statt Farbe, kein Orange (Form oben bei .dm-ok) */

/* Rezept und Einkauf */
.incart{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--green)}
.famlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--green);font-weight:600;text-decoration:none}
.famlink .ic{font-size:18px}
.empty-ic{font-size:36px;color:var(--green);display:flex;justify-content:center}
.si .amt small{display:block;font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:500;color:var(--muted)}   /* „du brauchst …“: Lesetext, keine Mini-Beschriftung */

/* Plan und Einkaufsliste: Umschalter oben (.seg mit Links .segbtn, Stile bei den Bausteinen in app.css) */
.plan-seg{margin-top:var(--sp-1)}

/* Einkaufsliste alltagstauglich: Shop-Produkte, „Hast du wahrscheinlich da“, eigene Einträge (Liste wie oben, darunter das Feld zum Hinzufügen) */
.shop-hint{gap:10px}
.sh-links{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.sh-links .chip{min-height:44px;padding-inline:14px}
.sh-links .chip .ic{font-size:16px;color:var(--muted)}
.pantry-hint{margin:-4px 0 0;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.print-head{display:none}
.own-tools{display:flex;gap:2px;align-items:center;margin-right:-8px}
.si.own-edit{grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
.si.own-edit > span:first-child{display:none}
.si .own-in{width:100%;height:auto;min-width:0;min-height:44px;border:1.5px solid var(--green);background:var(--card);border-radius:var(--r-s);padding:10px var(--sp-3);font-family:inherit;font-size:var(--fs-body);color:var(--ink)}
.own-edit .own-tools{gap:var(--sp-2);margin-right:0}
.own-add{display:flex;flex-direction:column;gap:6px}
.own-add label{font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;color:var(--muted)}
.own-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}   /* schmal: „Hinzufügen“ rutscht unter das Feld */
.own-row input{flex:1 1 180px;min-width:0;border:1.5px solid var(--edge);background:var(--card);border-radius:var(--r-s);padding:var(--sp-3) 14px;font-family:inherit;font-size:var(--fs-body);color:var(--ink);min-height:52px}
.own-plus{flex:0 0 auto;padding-inline:var(--sp-4)}
/* Große Systemschrift (siehe app.css): Menge unter den Namen, Zeitraum untereinander. Mahlzeit-Zeilen: Foto neben der Mahlzeit,
   Gericht und Knopf in voller Breite darunter. Tausch-Kacheln einspaltig. Steht nach den Containerabfragen oben, damit es gewinnt. */
/* Wochenwechsel bei großer Schrift (Containerabfrage, em = Schrift des Plan-Kopfs, greift auch ohne die em-Grenze): Titel in voller Breite,
   die Pfeile darunter links und rechts (sonst bricht „Woche 1“ zwischen zwei 48-px-Pfeilen um) */
.plan-top{container:plantop / inline-size}
@container plantop (max-width:16.5em){
  .wk-sw{grid-template-columns:48px minmax(0,1fr) 48px;grid-template-areas:"t t t" "p . n";row-gap:var(--sp-3)}
  .wk-sw.one{grid-template-columns:minmax(0,1fr);grid-template-areas:"t"}
  .wk-mid{grid-area:t}
  .wk-sw > .wk-nav:first-child{grid-area:p}
  .wk-sw > .wk-nav:last-child{grid-area:n}
}
@media (max-width:19.9em){
  .si:not(.own-edit){grid-template-columns:44px minmax(0,1fr)}
  .si .amt{grid-column:2;text-align:left}
  .si.own .own-tools{grid-column:2;margin:0 0 0 -10px}
  .dm,.dm.cr{grid-template-columns:56px minmax(0,1fr);row-gap:var(--sp-1)}
  .dm{grid-template-areas:"img k" "v v" "st st" "act act"}
  .dm.cr{grid-template-areas:"img v" "k k" "act act"}
  .dm .dm-img,.dm .k,.dm.cr .v{align-self:center}
  .dm .v,.dm.cr .k{align-self:auto}
  .dm > .dm-s,.dm > .stepper,.dm > .addbtn{justify-self:start;margin:0}
  .dm > .dm-s{margin-left:-4px}
}
/* Bewegung (nur ohne „Bewegung reduzieren“): Wochenpfeile geben beim Tippen nach, der Haken der Einkaufsliste blendet schnell ein (--t-fast) */
@media (prefers-reduced-motion:no-preference){
  .wk-nav{transition:transform var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
  .wk-nav:not([aria-disabled="true"]):active{transform:scale(.95)}
  .si-c{transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
  .si-ck{transition:opacity var(--t-fast) var(--ease)}
}

@media print{
  /* Druck: Schwarz auf Weiß (#000/#fff/#bbb) und Druckgrößen in pt sind bewusst feste Werte, keine Tokens. */
  /* Strg+P direkt auf der Einkaufsliste (sie hat .print-head): alles außer der Liste ausblenden. Andere Seiten drucken normal, ohne Kopfzeile und Tabs. */
  .wrap:has(.print-head){max-width:none;padding:0 !important}
  #app:has(.print-head) > :not(.pr){display:none !important}
  .print-head{display:flex !important;align-items:center;gap:18px;padding-bottom:12px;border-bottom:1.5px solid #000;margin-bottom:6px}
  .print-head img{width:120px;height:auto}
  .print-head div{display:flex;flex-direction:column;font-size:12pt}
  .print-head b{font-family:var(--f-head);font-size:18pt;color:#000}
  .shop-group{margin-top:14px;gap:4px}
  .shop-group .sec-title{color:#000;font-size:14pt;break-after:avoid}
  .shop-group .sec-meta,.own-add{display:none !important}
  .shop-list{box-shadow:none;border-radius:0;overflow:visible;background:none}
  .si{grid-template-columns:18px 1fr auto;min-height:0;padding:5px 0;break-inside:avoid}
  .si + .si::before{left:0;border-color:#bbb}
  .si-c{width:13px;height:13px;border:1.5px solid #000;border-radius:0;background:#fff !important}
  .si-ck{display:none}
  .si.got .si-n,.si.got .amt{color:#000;text-decoration:none}
  .si .si-n,.si .amt,.si .amt small,.pantry-hint{color:#000}
  .tag,.own-tools{display:none !important}
  .si .own-in{-webkit-appearance:none;appearance:none;width:100%;height:auto;border:0;padding:0;font:inherit;color:#000}
}