/* Simply Keto Challenge-App. Layout: App-Spalte (max. 680px), feste Kopfzeile, Tab-Leiste unten. Markenfarben aus dem Kurs.
   Aufbau: tokens.css (Variablen) und modules.css (Lektionstext und -Module) kommen per @import, damit /css/app.css allein reicht (Admin-Vorschau).
   Hier: Grundlagen, Kopfzeile, Tab-Leiste, gemeinsame Bausteine (mehrere Seiten), Bewegung, Druck.
   Seiten: css/screens/heute.css, kurs.css, essen.css, fortschritt.css, profil.css (index.html lädt sie nach dieser Datei, bei gleicher Spezifität gewinnt die spätere). */
@import url("tokens.css");
@import url("modules.css");

/* Grundlagen */
*{box-sizing:border-box}
html,body{margin:0}
/* Platz für die Bildlaufleiste immer freihalten, damit die Seite nicht seitlich springt (kurze Seiten, offenes Abzeichen-Fenster) */
html{scrollbar-gutter:stable}
/* Lesetext 17 px (--fs-body); Zeilenhöhe als Faktor (≈ 26 px), damit kleinere und größere Schrift darin passend mitwächst */
/* overflow-wrap: ein Wort, das nicht in seine Zeile passt (große Schrift, schmale Spalte), bricht um statt herauszuragen (ändert sonst kein Layout) */
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-wrap:break-word}
a{color:inherit}
b,strong{font-weight:600}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:600;color:var(--green);line-height:1.15;letter-spacing:-.01em;text-wrap:balance;margin:0}
img{max-width:100%}
/* Platz unten: Tab-Leiste (--nav-h aus js/main.js navFit, enthält den sicheren Rand; ohne Messung 67 px + Rand) plus Luft */
.wrap{max-width:680px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 calc(var(--nav-h, calc(67px + env(safe-area-inset-bottom,0px))) + 43px)}

/* Kopfzeile: Trennlinie erst, wenn die Seite gescrollt ist (js/main.js setzt .scrolled) */
.top{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid transparent;padding-top:env(safe-area-inset-top,0px)}
.top.scrolled{border-bottom-color:var(--line)}
.top-in{max-width:680px;margin:0 auto;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:var(--sp-3)}
/* Profilknopf: Kapsel 44 px, Vögelchen-Bild 36 px rund, daneben nur der Vorname (js/main.js renderHeader) */
.me{margin-left:auto;flex:0 1 auto;min-width:0;white-space:nowrap;display:flex;align-items:center;gap:var(--sp-2);height:44px;background:var(--card);border:0;border-radius:var(--r-pill);box-shadow:var(--sh-1);padding:0 var(--sp-4) 0 var(--sp-1);text-decoration:none}
.me img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--green-soft)}
.me img:not([src]),.me img[src=""]{visibility:hidden;width:4px}
.me span{font-weight:600;font-size:var(--fs-label);line-height:var(--lh-label);color:var(--ink)}
#meName{max-width:10em;overflow:hidden;text-overflow:ellipsis}

/* Tab-Leiste: Symbol in einer Kapsel (58 × 32), aktiv --green-soft mit Symbol --green und Wort --ink, sonst --muted. Wörter immer sichtbar.
   Spalten 1fr (nicht minmax(0,1fr)): ein langes Wort („Fortschritt“) bekommt bei 320 px den Platz, den es braucht. */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--card);border-top:1px solid var(--line);padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
/* Passt ein Wort nicht in seine Spalte (große Schrift, schmales Handy), setzt js/main.js navFit() .tight: gleich breite Spalten, Wörter brechen um.
   navFit() setzt auch --nav-h (echte Höhe der Leiste) für den Platz unten (.wrap), den Hinweis (.toast) und klebende Leisten (.cartbar, .buybar). */
/* Umbruch nur an den Silben aus index.html (­: Heu-te, Re-zep-te, Fort-schritt). Damit die längste Silbe („schritt“) in ihre Spalte (20 % der Leiste) passt,
   wächst das Wort höchstens bis 6,2 % der Leistenbreite (cqi, .nav-in ist der Container), nie unter 13 px. Bei normaler Schrift ändert sich nichts. */
.nav.tight .nav-in{grid-template-columns:repeat(5,minmax(0,1fr))}
.nav.tight a{white-space:normal;text-align:center;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;padding-inline:0;font-size:clamp(13px,6.2cqi,var(--fs-small));line-height:1.23}   /* 1.23 = 16/13 wie --lh-small */
.nav.tight .nav-ic{width:100%;max-width:58px}
.nav-in{max-width:680px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);container-type:inline-size}
.nav a{min-height:60px;padding:6px 2px var(--sp-2);display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.nav-ic{width:58px;height:32px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center}
.nav svg{width:24px;height:24px}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"] .nav-ic{background:var(--green-soft);color:var(--green)}

/* Allgemein. .eyebrow: alte Zeile über einem Titel (nur noch Admin, Abzeichen-Fenster, Anmeldung); in Seiten .page-meta bzw. .sec-title nehmen */
.eyebrow{font-size:var(--fs-meta);font-weight:600;color:var(--muted)}
.sec{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-5)}   /* Abschnitte 24 px auseinander, darin 12 px (Abstände nur aus --sp-*) */
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sec.row{flex-direction:row}
.muted{color:var(--muted)}
.small{font-size:var(--fs-meta)}
/* Knöpfe (Bausteine): .btn = Primärknopf, grün, 52 px, höchstens einer pro Bildschirm. .btn.secondary = Sekundärknopf (Grün hell).
   .btn.compact = 48 px, 16/600 (in Zeilen und Werkzeugleisten). .btn.text bzw. .linkbtn = Textknopf 15/600 mit Symbol, Tippfläche 44 px (.muted = leise).
   .btn.ghost und .btn.orange sind Altbestand nur fürs Admin (admin.js); die App nutzt sie nicht mehr. Das Admin behält seine dichten Knöpfe (.adm .btn). */
/* Nie breiter als der Platz: ein langes Wort („weitermachen“) bricht bei großer Schrift im Knopf um, statt aus der Karte zu ragen. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:52px;max-width:100%;background:var(--green);color:var(--on-green);border:0;border-radius:var(--r-pill);padding:var(--sp-3) var(--sp-5);font-size:var(--fs-body);font-weight:600;text-decoration:none;text-align:center;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
.btn .ic{font-size:20px}
.btn:disabled{opacity:.5;cursor:default}
.btn.secondary{background:var(--green-soft);color:var(--green)}
.btn.outline{background:transparent;color:var(--green);border:1.5px solid var(--green)}   /* Rahmenknopf: gleiche Größe wie .btn, nur Rand (Lektions-Ende „Zurück zum heutigen Tag“) */
.btn.compact{min-height:48px;padding:10px var(--sp-4);font-size:var(--fs-label)}
.btn.text,.linkbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 var(--sp-1);background:none;border:0;border-radius:var(--r-s);font-family:var(--f-body);font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;color:var(--green);text-decoration:none}
.btn.text .ic,.linkbtn .ic{font-size:18px}
.btn.text.muted,.linkbtn.muted{color:var(--muted)}
.adm .btn{min-height:0;overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual}   /* Admin: dichte Knöpfe wie bisher, ohne Umbruch im Wort */
.btn.ghost{background:transparent;color:var(--green);border:1.5px solid var(--green)}
.btn.orange{background:var(--orange);color:var(--card)}
.btn.block{width:100%}
/* Auswahl-Reihe: bricht um statt seitlich zu scrollen (alle Möglichkeiten sichtbar). Gewählt = Grün hell, grüner Rand und Haken (nicht nur Farbe, kein zweiter Primärknopf). */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip{flex:0 1 auto;min-width:0;max-width:100%;display:inline-flex;align-items:center;gap:6px;min-height:44px;border:1.5px solid var(--edge);background:var(--card);border-radius:var(--r-pill);padding:var(--sp-2) 14px;font-weight:600;font-size:var(--fs-meta);color:var(--ink);text-decoration:none;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}   /* langes Wort bricht bei großer Schrift im Chip um */
.chip[aria-pressed="true"]{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.chip[aria-pressed="true"]::before{content:"";flex:0 0 16px;width:16px;height:16px;margin-left:-4px;background:currentColor;
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center/contain no-repeat}
/* Karten: Fläche mit --sh-1, ohne Rahmen (Regel „Flächen statt Rahmen“). Hervorhebung („heute“, Auswahl) als 2 px Linie innen: outline, nicht border. */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:var(--sp-4)}
/* Zurück-Link nennt sein Ziel; ein langer Titel (aus dem Verlauf) bricht um statt über den Rand */
.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;max-width:100%;font-weight:600;color:var(--green);text-decoration:none;margin-top:var(--sp-4);background:none;border:0;padding:var(--sp-1) 0;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.page-title{font-size:var(--fs-display)}
/* Fußzeile jeder Seite (js/main.js FOOT): „Fragen? Hilfe & Kontakt“, mittig, Tippfläche 44 px */
.foot{margin:var(--sp-6) 0 0;text-align:center;font-size:var(--fs-meta);line-height:var(--lh-meta)}
.foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-3);font-weight:600;color:var(--green);text-decoration:underline;text-underline-offset:3px}
/* Hinweis ohne Symbol (Rückfragen, Rechner-Hinweise): wie .hint in Grün hell. Orange hell nur für „jetzt“ (z. B. .relogin). */
.notice{background:var(--green-soft);border-radius:var(--r-s);padding:var(--sp-3) 14px;font-size:var(--fs-meta)}

/* ---------- Bausteine (_projekt/design-richtlinien.md, Tabelle „Bausteine“). Helfer dazu in js/views/shared.js (secHead, listRow/menuRow, hint, checkC) ---------- */
/* Seitenkopf: optional eine leise Zeile über dem Titel (.page-meta: Tag, Challenge, Vögelchen …), dann h1.page-title */
.page-head{display:flex;flex-direction:column;gap:2px;min-width:0}
.page-meta{margin:0;font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:500;color:var(--muted)}
/* Abschnittstitel: Fraunces 21 in Grün, links; optional Meta 15 --muted rechts („Deine Mahlzeiten · als Kolibri“) */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px var(--sp-3);min-width:0}
.sec-title{margin:0;min-width:0;font-family:var(--f-head);font-size:var(--fs-section);line-height:var(--lh-section);font-weight:600;color:var(--green)}
.sec-meta{font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:500;color:var(--muted)}
.sec-head > .btn.text{align-self:center}
/* Orange Zeile für „jetzt“ („Als Nächstes“) */
.now-label{font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;color:var(--orange-ink)}

/* Liste: eine Fläche, Zeilen mit Symbolkachel 48 px, Titel 17/600, Meta 15, Pfeil 20 px; Trennlinie erst nach der Kachel. Vorbild Profil-Menü.
   Zeilen per listRow()/menuRow() (js/views/shared.js), als <a> oder <button>. .list-ic.round für Vögelchen-Bilder. */
.list{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.list-row{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;min-height:72px;padding:var(--sp-3) 14px;width:100%;margin:0;background:none;border:0;text-align:left;text-decoration:none;color:inherit;font:inherit}
.list-row + .list-row::before{content:"";position:absolute;top:0;left:76px;right:0;border-top:1px solid var(--line)}
a.list-row:hover,button.list-row:hover{background:var(--bg)}
.list-row:focus-visible{outline-offset:-3px}
.list-ic{width:48px;height:48px;border-radius:var(--r-s);background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:24px;overflow:hidden}
.list-ic.round{width:44px;height:44px;justify-self:center;border-radius:50%}   /* Vögelchen-Bild: 44 px (Listen), mittig in der 48er-Spalte */
.list-ic img{width:100%;height:100%;object-fit:cover;display:block}
.list-ic.water{background:var(--water-soft);color:var(--water)}   /* Wasser (Heute „Dein Tag“, Fortschritt „Deine Werte“): listRow(…, {tone: "water"}) */
.list-t{display:flex;flex-direction:column;min-width:0}
.list-t b{font-size:var(--fs-body);line-height:1.3;font-weight:600;color:var(--ink)}
.list-t span{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted);overflow-wrap:anywhere}
.list-row > .go-ic{font-size:20px;color:var(--muted)}
/* Zustand einer Zeile (Lektionen, Quizze auf Heute, im Kurs, im Rückstand): Kachel zeigt ihn, das Wort steht in der Unterzeile.
   data-ls="done": Kachel --done mit Haken, Wort .ls-ok („Gelesen“, „Erledigt“). data-ls="next": Kachel Orange hell, Wort .ls-now („Als Nächstes“). */
.list-row[data-ls="done"] > .list-ic{background:var(--done);color:var(--card)}
.list-row[data-ls="done"] > .list-ic .ic{stroke-width:3}
.list-row[data-ls="next"] > .list-ic{background:var(--orange-soft);color:var(--orange-ink)}
.ls-ok,.list-t .ls-ok{color:var(--done);font-weight:600}   /* .list-t span färbt sonst alles leise */
.ls-now,.list-t .ls-now{color:var(--orange-ink);font-weight:600}
/* Aufklappbare Listenzeile (Profil: Startdatum, Passwort, Zugangscode): <details class="fold"><summary class="list-row">…</summary><div class="fold-body">…</div></details>
   in einer .list. Kopf wie .list-row mit Pfeil nach unten (.ds-ic), Trennlinien wie zwischen Zeilen. */
.fold > summary{list-style:none;cursor:pointer}
.fold > summary::-webkit-details-marker{display:none}
.fold[open] > summary .ds-ic{transform:rotate(180deg)}
.fold > summary:hover{background:var(--bg)}
.list > :is(.list-row,.fold) + .fold > summary::before,.list > .fold + .list-row::before{content:"";position:absolute;top:0;left:76px;right:0;border-top:1px solid var(--line)}
.fold-body{padding:var(--sp-1) 14px var(--sp-4)}
/* Gefährliche Aktion (neu starten, alles zurücksetzen): roter Textknopf mit Symbol und Wort, nie Primärknopf; Erklärung darunter (.danger-row) */
.btn.text.bad{color:var(--bad);align-self:flex-start;margin-left:-4px}
.danger-row{display:flex;flex-direction:column;gap:2px}

/* Etikett: rund, 30 px, 15/600, immer ein Wort. .now = heute/Serie (Orange hell), .ok = erledigt/„Im Shop“ (Grün hell), ohne Zusatz neutral. .sm = 26 px, 13/600. */
/* Passt es nicht in die Zeile, rückt es als Ganzes in die nächste; erst wenn es breiter ist als der ganze Platz (große Schrift), bricht das Wort darin um. */
.tag{display:inline-flex;align-items:center;gap:6px;min-height:30px;max-width:100%;padding:0 var(--sp-3);border-radius:var(--r-pill);background:var(--sunk);color:var(--ink);font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;text-decoration:none;vertical-align:middle}
.tag .ic{font-size:16px}
.tag.now{background:var(--orange-soft);color:var(--orange-ink)}
.tag.ok{background:var(--green-soft);color:var(--green)}
.tag.sm{min-height:26px;padding:0 10px;gap:var(--sp-1);font-size:var(--fs-small);line-height:var(--lh-small)}
/* Etikett als Link (z. B. „Im Shop“ an einer Zutat): Tippfläche unsichtbar auf 44 px vergrößert, ohne die Zeile höher zu machen */
a.tag{position:relative}
a.tag::after{content:"";position:absolute;inset:-7px -4px}
a.tag.sm::after{inset:-9px -4px}

/* Umschalter: Spur --sunk, aktiver Teil --card mit --sh-1, 52 px, 16/600, höchstens drei Teile.
   Teile sind <button aria-pressed> oder Links .segbtn mit aria-current="page" (Plan | Einkaufsliste). */
/* Spalten minmax(0,1fr): ein langes Wort (große Schrift ohne die em-Grenze unten) bricht im Teil um, statt den Umschalter zu sprengen */
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--sunk);border:0;border-radius:var(--r-pill);padding:var(--sp-1)}
.seg button,.segbtn{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;border:0;background:none;border-radius:var(--r-pill);padding:var(--sp-2) 10px;font-size:var(--fs-label);font-weight:600;color:var(--muted);text-align:center;text-decoration:none;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
.seg button[aria-pressed="true"],.segbtn[aria-pressed="true"],.segbtn[aria-current="page"]{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
/* Dunkel ist --card dunkler als die Spur (--sunk): der aktive Teil sähe eingedrückt aus. Ein Rand --edge hebt ihn ab. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) :is(.seg button[aria-pressed="true"],.segbtn[aria-pressed="true"],.segbtn[aria-current="page"]){box-shadow:inset 0 0 0 1.5px var(--edge),var(--sh-1)}
}
:root[data-theme="dark"] :is(.seg button[aria-pressed="true"],.segbtn[aria-pressed="true"],.segbtn[aria-current="page"]){box-shadow:inset 0 0 0 1.5px var(--edge),var(--sh-1)}

/* Haken-Kreis: Kreis 44 px, darunter das Wort 13/600 („Gegessen“). Offen: Ring --muted. Erledigt: gefüllt --done, weißer Haken, Wort in --done.
   checkC() in js/views/shared.js. Beim Umschalten ein kurzer Puls (Abschnitt „Bewegung“), bei „Bewegung reduzieren“ nicht. */
.checkc{flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:center;gap:var(--sp-1);min-width:44px;padding:0;background:none;border:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.checkc-c{width:44px;height:44px;border-radius:50%;border:2px solid var(--muted);display:flex;align-items:center;justify-content:center;color:transparent;font-size:24px}
.checkc-c .ic{stroke-width:2.6}
.checkc[aria-pressed="true"]{color:var(--done)}
.checkc[aria-pressed="true"] .checkc-c{background:var(--done);border-color:var(--done);color:var(--card)}

/* Hinweis: Grün hell, Info-Symbol, 15 px. Mit „Verstanden“ einmal wegtippbar (hint(html, id) in js/views/shared.js, gemerkt in S.hintsSeen, main.js data-hintok). */
.hint{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 10px;align-items:start;background:var(--green-soft);border-radius:var(--r-s);padding:var(--sp-3) 14px;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--ink)}
.hint > .ic{font-size:22px;color:var(--green)}
.hint p{margin:0}
.hint-ok{grid-column:2;justify-self:start;margin:-4px 0 -10px -4px}

/* Gemeinsame Bausteine: Ring, Rezeptkacheln, Vögelchen-Auswahl. Ring: Größe aus ring() (inline) oder, mit fluid, aus dem CSS der Seite (rem, wächst mit der Schrift) */
.ring{width:34px;height:34px;display:block;flex:0 0 auto}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.rcard{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden;text-align:left;padding:0;display:flex;flex-direction:column;text-decoration:none}
.rcard img,.rcard .ph{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.rcard .body{padding:10px var(--sp-3) var(--sp-3);display:flex;flex-direction:column;gap:2px}
.rcard b{font-family:var(--f-head);color:var(--green);font-size:var(--fs-dish);line-height:1.2}
.rcard span{font-size:var(--fs-meta);color:var(--muted)}   /* Umbruch langer Wörter: Silbentrennungs-Liste unten */
/* Gerichtname immer in der Stufe „Gericht“ (Fraunces 19/24). Schmal (≤ 360 px) und bei großer Schrift: eine Spalte, Foto klein links (essen.css .rgrid, .pick-grid) */
.rcard b{line-height:var(--lh-dish)}
.ph{display:flex !important;align-items:center;justify-content:center;font-size:44px;background:var(--sunk)}

/* ---------- Vögelchen (Stand 03.11.2026: weiter die Bilder img/vog-*.jpg, 120 px; SVG-Entwürfe in img/voegel-entwurf/ erst beim Asset-Redesign) ----------
   Bild immer rund, feste Größen über birdAv(b, px) in js/views/shared.js: 24 klein (neben Text), 36 Kopfzeile/Zeilen, 44 Listen und Auswahl, 84 groß. */
.bav{display:inline-block;flex:0 0 auto;border-radius:50%;object-fit:cover;vertical-align:middle;background:var(--sunk)}
.bav-24{width:24px;height:24px}
.bav-36{width:36px;height:36px}
.bav-44{width:44px;height:44px}
.bav-84{width:84px;height:84px}
/* Vögelchen-Auswahl (birdGrid() in js/views/shared.js): alle acht auf einen Blick, 2 Spalten × 4 Reihen, kein seitliches Scrollen.
   Kachel = Knopf mit aria-pressed: Bild 44, Name 16/600, kcal-Bereich 13 --muted. Gewählt: Ring 2,5 px --green innen + Haken-Plakette (nicht nur Farbe).
   Ring als box-shadow, damit der Fokusrahmen (outline) zusätzlich sichtbar bleibt. Raster schmaler als 320 px (Containerabfrage, „1.500–1.750“ braucht 81 px): Bild über dem Text. */
.bgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);width:100%;container:bgrid / inline-size}
.bt{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;min-width:0;min-height:64px;margin:0;padding:10px;background:var(--card);border:0;border-radius:var(--r-s);box-shadow:var(--sh-1);color:var(--ink);font:inherit;text-align:left}
.bt-t{display:flex;flex-direction:column;min-width:0}
.bt-t b{font-size:var(--fs-label);line-height:var(--lh-label);font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.bt-t > span{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.bt-you{display:inline-block;margin-left:2px;padding:0 6px;border-radius:var(--r-pill);background:var(--green-soft);color:var(--green);font-style:normal;font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;vertical-align:1px}
.bt[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px var(--green),var(--sh-1)}
.bt-ck{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;background:var(--green);color:var(--on-green);display:flex;align-items:center;justify-content:center;font-size:15px;opacity:0;transform:scale(.6)}
.bt-ck .ic{stroke-width:2.8}
.bt[aria-pressed="true"] .bt-ck{opacity:1;transform:none}
/* In einer Karte oder im Blatt von unten: Kacheln als vertiefte Fläche statt Karte in der Karte */
:is(.pcard,.calc,.card,.sheet) .bt{background:var(--bg);box-shadow:none}
:is(.pcard,.calc,.card,.sheet) .bt[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px var(--green)}
@container bgrid (max-width:319px){
  .bt{grid-template-columns:minmax(0,1fr);justify-items:center;gap:var(--sp-1);padding:10px 6px;text-align:center}
  .bt-t{align-items:center}
}

.card b{font-family:var(--f-head);color:var(--green);font-size:var(--fs-dish)}

/* Kennzahlen (Fortschritt, Finale auf Heute) und Hinweis unten (Toast) */
.go{margin-left:auto;font-size:var(--fs-section);color:var(--muted)}
.statgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:14px;display:flex;flex-direction:column}
.stat b{font-family:var(--f-head);font-size:var(--fs-title);color:var(--green);line-height:1.1}
.stat span{font-size:var(--fs-meta);color:var(--muted);font-weight:600}
.stat.hot{background:var(--orange-soft)}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h, calc(67px + env(safe-area-inset-bottom,0px))) + 17px);transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:30;display:flex;align-items:center;gap:var(--sp-3);background:var(--green);color:var(--on-green);border-radius:var(--r);padding:var(--sp-3) var(--sp-4);box-shadow:var(--sh-2);text-decoration:none;width:min(92vw,420px)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast div{display:flex;flex-direction:column}
/* Kopfzeile mit Titel links und Meta rechts (Abzeichen-Gruppen auf Fortschritt, Kästen der Admin-Übersicht: admin.js lädt nur diese Datei) */
.bg-h{display:flex;justify-content:space-between;align-items:center;gap:10px;list-style:none;cursor:pointer}
.bg-h::-webkit-details-marker{display:none}
.bg-h h2{flex:1;min-width:0}
.bg-h span{font-size:var(--fs-meta);font-weight:600;color:var(--muted);white-space:nowrap}
/* Kennzahlen-Paare (Rechner; Admin: Teilnehmer-Zahlen) */
.stats b{display:block;color:var(--green);font-variant-numeric:tabular-nums}

/* Rechner (Formularfelder; Umschalter .seg siehe Bausteine) */
.calc{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:20px;display:flex;flex-direction:column;gap:14px}
.calc h2{font-size:var(--fs-section)}
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.fields > .field{justify-content:flex-end}   /* Felder einer Reihe unten bündig, auch wenn eine Beschriftung umbricht */
.field label{font-size:var(--fs-meta);font-weight:600;color:var(--muted)}
.field input,.field select{width:100%;min-height:44px;border:1.5px solid var(--edge);background:var(--bg);border-radius:var(--r-s);padding:10px;font-family:inherit;font-size:var(--fs-body);color:var(--ink);min-width:0}   /* font-family: Datum/Uhrzeit sonst in Monospace */
.field-hint{font-size:var(--fs-meta);color:var(--muted)}   /* Zeile unter einem Feld (Rechner); der Hinweis-Kasten heißt .hint */

@media (max-width:420px){.fields{grid-template-columns:1fr 1fr}}
@media (max-width:360px){.fields > .field:has(> input[type="date"]){grid-column:1 / -1}}   /* Datum braucht die ganze Zeile, sonst fehlt die Jahreszahl */

/* Redesign 2026-10: Symbole aus js/icons.js sind immer 1em groß, mittig und als Block gesetzt */
.ic{width:1em;height:1em;display:block;flex:0 0 auto}
.linkish{font-size:var(--fs-meta);font-weight:600;color:var(--green);text-decoration:underline;text-underline-offset:3px;align-self:center}
body:not(.adm) a.linkish,body:not(.adm) button.linkish{display:inline-flex;align-items:center;min-height:44px}   /* Tippfläche 44 px, nicht im Admin (body.adm, lädt diese Datei mit) */
.back .ic{font-size:20px}

/* Kopfzeile: Logo (img/sk-logo.svg als Maske, damit es die Markenfarbe des Themas annimmt) */
.logo{display:flex;align-items:center;min-height:44px;padding:var(--sp-1) 6px var(--sp-1) 0;border-radius:var(--r-s);text-decoration:none}
.logo-m{display:block;width:118px;height:47px;background:var(--green);-webkit-mask:url(../img/sk-logo.svg) no-repeat left center/contain;mask:url(../img/sk-logo.svg) no-repeat left center/contain}
.me-av{width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 36px}
.me-av img{width:100%;height:100%;object-fit:cover;display:block}

/* Kurzinfo-Zeile, Ring mit Zahl */
.meta{display:flex;flex-wrap:wrap;gap:2px var(--sp-3);font-size:var(--fs-meta);color:var(--muted);font-weight:600;margin-top:var(--sp-1)}
.ringw{position:relative;display:inline-flex;flex:0 0 auto}
.ringw .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;text-align:center}
.ringw .c b{font-family:var(--f-head);font-weight:600;color:var(--green);font-size:var(--fs-small);font-variant-numeric:tabular-nums}
.ringw .c span{font-size:var(--fs-small);color:var(--muted);font-weight:600;margin-top:3px}

/* Hinweis „Finde zuerst dein Vögelchen“ (Heute, Profil), Pfeil-Symbol */
.birdcard{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;background:var(--orange-soft);border-radius:var(--r);padding:var(--sp-3) 14px;text-decoration:none}
.bc-ic{width:44px;height:44px;border-radius:50%;background:var(--card);color:var(--orange-ink);display:flex;align-items:center;justify-content:center;font-size:24px}
.birdcard div{display:flex;flex-direction:column;min-width:0}
.birdcard b{font-family:var(--f-head);font-size:var(--fs-dish);color:var(--green);line-height:var(--lh-dish)}
.birdcard div span{font-size:var(--fs-meta);color:var(--ink)}
.go-ic{font-size:20px;color:var(--muted)}

/* Upsell-Hinweis (Heute, Lektionen) */
.teaser{border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:96px minmax(0,1fr);background:var(--card);box-shadow:var(--sh-1);text-decoration:none}
.teaser img{width:96px;height:100%;min-height:110px;object-fit:cover;display:block}
.teaser div{padding:var(--sp-3) 14px;display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.teaser b{font-family:var(--f-head);color:var(--green);font-size:var(--fs-dish);line-height:1.2}
.teaser div > span:not(.eyebrow):not(.page-meta):not(.linkish){font-size:var(--fs-meta)}
.teaser .linkish{align-self:flex-start;margin-top:2px}

/* Toast mit Abzeichen, Aufklapp-Pfeil */
.stat.hot b{color:var(--orange-ink)}
.toast .coin{width:52px;height:52px;flex:0 0 52px}
.inline-ic{display:inline-block;vertical-align:-2px;font-size:16px;color:var(--green)}
.ds-ic{font-size:20px;color:var(--muted)}
.toast.note{width:auto;max-width:min(92vw,420px)}
.toast.note .ic{font-size:22px;stroke-width:2.6}
.toast.note.err{background:var(--bad);color:var(--card)}
/* Abgemeldet (Sitzung abgelaufen): Hinweis oben auf jeder Seite, bis man sich neu anmeldet */
.relogin{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:var(--fs-meta);margin-top:var(--sp-3);background:var(--orange-soft)}
.relogin p{margin:0}

/* Karten, Beschriftung, Dreier-Umschalter und Schalter (Profil, Rezept, Verkaufsseite, Anmeldung) */
.pcard{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:14px var(--sp-4);display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.plabel{font-size:var(--fs-meta);font-weight:600;color:var(--muted)}
.seg.seg3{grid-template-columns:repeat(3,minmax(0,1fr))}
.seg.seg3 button{padding:var(--sp-2) var(--sp-1);font-size:var(--fs-meta);line-height:1.25}
/* Schalter: Spur aus = --muted, an = --green (beide mit 3 : 1 zum Knopf), Knopf in Kartenfarbe bzw. --on-green */
.switch{flex:0 0 auto;width:52px;height:32px;border-radius:var(--r-pill);border:0;background:var(--muted);position:relative;padding:0}
.switch i{position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:var(--card);box-shadow:var(--sh-1)}
.switch::after{content:"";position:absolute;inset:-6px -4px}   /* Tippfläche 44 px */
.switch[aria-checked="true"]{background:var(--green)}
.switch[aria-checked="true"] i{transform:translateX(20px);background:var(--on-green)}
@media (max-width:360px){#meName{max-width:6.5em}.me{padding-right:var(--sp-3)}}   /* Vorname bleibt sichtbar, lange Namen enden mit „…“ */

/* ---------- Bewegung ----------
   Ruhig und gleichmäßig, für jedes Alter angenehm: eine Kurve (--ease in tokens.css, bremst sanft ab), kurze Zeiten, nie zwei Seiten übereinander.
   Seitenwechsel macht js/main.js (pageSwap, Tempi aus den --t-* in tokens.css): alte Seite --t-fast ausblenden, dann die neue einblenden –
   beim Tab-Wechsel nur Deckkraft (--t-base), tiefer hinein 20 px von rechts, zurück von links (--t-page). Kopfzeile und Tab-Leiste bleiben stehen.
   Auf derselben Seite: nichts wird neu gezeichnet (js/morph.js), Zustände gleiten per Übergang, Aufklapper öffnen sich weich.
   Federn gibt es nur bei der Abzeichen-Feier. Bei „Bewegung reduzieren“ ist alles aus; nur das Blatt von unten blendet kurz ein (ohne Verschieben). */
@media (prefers-reduced-motion:no-preference){
  /* Aufklapper (Hilfe, Startdatum, Rechner …) öffnen und schließen sich weich, wo der Browser das kann */
  @supports (interpolate-size:allow-keywords){
    :root{interpolate-size:allow-keywords}
    details::details-content{height:0;overflow:clip;transition:height var(--t-page) var(--ease),content-visibility var(--t-page) allow-discrete}
    details[open]::details-content{height:auto}
  }
  .ds-ic{transition:transform var(--t-page) var(--ease)}
  /* Hinweis unten (Toast): 20 px herein */
  .toast{transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
  /* Bilder blenden ein, statt aufzuploppen (js/main.js setzt .ld nach dem Laden) */
  #app img.fade{opacity:0;transition:opacity var(--t-base) var(--ease)}
  #app img.fade.ld{opacity:1}
  /* Zustände gleiten statt zu springen (Ring: --t-slow, das Zeichnen beim Öffnen macht main.js drawRings ebenso) */
  .ring .arc{transition:stroke-dasharray var(--t-slow) var(--ease),stroke var(--t-base) var(--ease),opacity var(--t-base) var(--ease)}
  .ring .ring-done{transition:opacity var(--t-base) var(--ease)}
  /* Haken-Kreis: Farbe gleitet. Den kurzen Puls (.92 → 1, --t-fast) spielt js/main.js nur nach dem Antippen (pulse), nicht beim Öffnen der Seite. */
  .checkc,.checkc-c{transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
  /* Schalter: schnell (--t-fast) */
  .switch{transition:background-color var(--t-fast) var(--ease)}
  .switch i{transition:transform var(--t-fast) var(--ease)}
  /* Vögelchen-Auswahl: Ring und Haken-Plakette gleiten (--t-fast) */
  .bt{transition:box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
  .bt:active{transform:scale(.985)}
  .bt-ck{transition:opacity var(--t-fast) var(--ease),transform var(--t-base) var(--ease)}
  /* Antippen: ganz leicht eindrücken, ohne Federn */
  .btn,.linkbtn,.chip,.seg button,.segbtn,.cc,.pcard a,.rcard,.list-row{transition:transform var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
  .btn:active,.linkbtn:active,.chip:active,.seg button:active,.segbtn:active{transform:scale(.97)}
  .rcard:active,.cc:active{transform:scale(.985)}
  /* Aufklappen ohne Übergang, wenn eine Adresse den Bereich öffnet und gleich dorthin scrollt (js/main.js scrollToAnchor, Profil-Rechner) */
  details.no-anim::details-content{transition:none}
  .nav a,.nav-ic{transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
  .top{transition:border-color var(--t-fast) var(--ease)}
  .logo,.me{transition:opacity var(--t-fast) var(--ease)}
  .logo:active,.me:active{opacity:.7}
  /* Farbschema wechseln (js/main.js crossfade, View Transition): gleiche Kurve und --t-page statt der Browser-Vorgabe */
  ::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t-page);animation-timing-function:var(--ease)}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.redeem-msg{margin:0;min-height:1.2em;color:var(--muted)}
.redeem-msg.err{color:var(--bad);font-weight:600}
.redeem-msg.ok{color:var(--done);font-weight:600}   /* „Gespeichert“, „Freigeschaltet“ = erledigt (D3, wie .ok-note) */

/* Sehr schmal oder große Systemschrift: Tab-Beschriftung ohne Seitenrand (nie unter 13 px), Logo etwas kleiner */
@media (max-width:300px){.nav a{padding-inline:0} .logo-m{width:100px;height:40px}}
/* Große Systemschrift: Schriftgrößen sind rem (tokens.css), eine em-Grenze greift nur, wenn die Schrift größer eingestellt ist
   (19.9em = 318 px bei normaler Schrift, also nie auf Handys ab 320 px; bei 125 % sind es 398 px). Dann dürfen Tab-Wörter umbrechen,
   Umschalter stehen untereinander, der Name im Profilknopf wird kürzer. Dieselbe Grenze in css/screens/kurs.css und fortschritt.css. */
@media (max-width:19.9em){
  .nav-in{grid-template-columns:repeat(5,minmax(0,1fr))}
  .nav a{white-space:normal;text-align:center;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;padding-inline:0;font-size:clamp(13px,6.2cqi,var(--fs-small));line-height:1.23}   /* wie .nav.tight */
  .nav-ic{width:100%;max-width:58px}
  .seg,.seg.seg3{grid-template-columns:minmax(0,1fr);border-radius:var(--r)}
  #meName{max-width:5em}
  /* Listen: kleinere Symbolkachel, damit der Titel Platz hat (Trennlinie rückt mit). Die höhere Tab-Leiste misst js/main.js (--nav-h). */
  .list-row{grid-template-columns:32px minmax(0,1fr) auto;gap:10px}
  .list-row + .list-row::before,.list > :is(.list-row,.fold) + .fold > summary::before,.list > .fold + .list-row::before{left:56px}
  .list-ic,.list-ic.round{width:32px;height:32px;font-size:18px}
  .sheet-ing li{flex-wrap:wrap;row-gap:0}   /* Menge unter den Namen, wenn beides nicht in eine Zeile passt (wie .il im Rezept) */
}

/* ---------- Bedienung nach dem Nutzertest (Nov. 2026): Start, Pause, Finale, Quiz, Tauschen, Hilfe ---------- */
/* Nur für Vorleseprogramme (z. B. „richtige Antwort“ am Quiz-Haken) */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* Lange Wörter: Silbentrennung in Titeln, Kacheln, Quiz-Antworten und im Abzeichen-Fenster (lang="de" ist gesetzt) */
h1,h2,h3,h4,.page-title,.rtitle,.rcard b,.rcard span,.field label,.list-t b,.birdcard b,.cc h3,.qopt,.qcard h3,.badge b,.nb-t b,.cele-card,.pal-opt,.faq-i summary,.sheet-body h2{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
/* Sprungziele per Adresse (#/profil/challenges?startdatum, #/fortschritt/messen?ketone) nicht unter der Kopfzeile verstecken */
.sec[id],#startdatum,#ketone{scroll-margin-top:76px}

.wb-acts{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* Hilfsklassen statt style="…" in js/ (Design-Fundament Nov. 2026). Inline bleiben nur berechnete Werte (Ring-Bogen, Balkenbreite, --n, Größe aus Variablen). */
.m0{margin:0}
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mt-6{margin-top:var(--sp-6)}
.mb-2{margin-bottom:var(--sp-2)}
.tuck{margin:-6px 0 0}   /* Hinweis dicht unter das Feld darüber ziehen */
.ml-auto{margin-left:auto}
.as-start{align-self:flex-start} .as-center{align-self:center}
.ta-c{text-align:center} .jc-c{justify-content:center}
.flex1{flex:1;min-width:0}
/* Satz mit Textknopf dahinter („… nachlesen. Zum Kurs“) statt eines Links im Text (der wäre nur eine Zeile hoch): der Knopf hat 44 px,
   passt er nicht mehr neben den Satz, steht er in der eigenen Zeile, bündig mit dem Text. */
.with-btn{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sp-1)}
.with-btn > .btn.text{margin-left:-4px;text-align:left}
.in-short{max-width:200px}   /* kurze Eingabefelder (Datum, Zahl) */
.ok-note{color:var(--done);font-weight:600}   /* Rückmeldung „Gespeichert“ */
.fs-title{font-size:var(--fs-title)} .fs-section{font-size:var(--fs-section)} .fs-dish{font-size:var(--fs-dish)}

/* Symbolknopf 44 px (Umbenennen, Löschen, Entfernen): nur mit aria-label, das Symbol nennt die Aktion eindeutig */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:none;border-radius:50%;color:var(--muted)}
.icon-btn .ic{font-size:20px}
.icon-btn:hover{background:var(--bg);color:var(--green)}

/* Blatt von unten (js/sheet.js): Auswahlen und Vorschauen (Gericht tauschen, Begriffe erklären). Oben --r, --sh-2, Kopf mit Griff und „Schließen“ bleibt beim Scrollen stehen.
   Kommt in --t-base 20 px von unten; bei „Bewegung reduzieren“ blendet es nur ein. */
.sheet{margin:auto auto 0;padding:0;border:0;width:100%;max-width:680px;max-height:88vh;max-height:88dvh;border-radius:var(--r) var(--r) 0 0;background:var(--card);color:var(--ink);box-shadow:var(--sh-2);overflow:hidden}
.sheet::backdrop{background:var(--scrim)}
.sheet-in{max-height:inherit;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom,0px)}
.sheet-head{position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;padding:var(--sp-1) 10px 0;background:var(--card)}
.sheet-grab{position:absolute;left:50%;top:10px;width:44px;height:5px;margin-left:-22px;border-radius:var(--r-pill);background:var(--line)}
.sheet-x{padding:0 var(--sp-2)}
.sheet-img{display:block;width:calc(100% - 32px);margin:2px var(--sp-4) 0;aspect-ratio:16 / 9;object-fit:cover;border-radius:var(--r-s)}
.sheet-body{display:flex;flex-direction:column;gap:10px;padding:6px var(--sp-4) var(--sp-5)}
.sheet-img + .sheet-body{padding-top:14px}
.sheet-body h2{font-size:var(--fs-section)}
.sheet-body h3{font-size:var(--fs-dish);margin-top:var(--sp-1)}
.sheet-body p{margin:0}
.sheet-body .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--fs-meta);color:var(--muted)}
.sheet-ing{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sheet-ing li{display:flex;justify-content:space-between;gap:var(--sp-3);padding:6px 0;border-bottom:1px solid var(--line);font-size:var(--fs-meta)}
.sheet-ing li span{min-width:0;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}   /* langes Wort bricht (große Schrift), statt die Menge hinauszuschieben (wie .il-n im Rezept) */
.sheet-ing li b{white-space:nowrap;font-weight:600}
.sheet-acts{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:6px}
.sheet-link{display:inline-flex;align-items:center;min-height:44px}
body.sheet-open{overflow:hidden}
@media (prefers-reduced-motion: no-preference){
  .sheet[open]{animation:sheetUp var(--t-base) var(--ease) both}
  .sheet[open]::backdrop{animation:sheetFade var(--t-base) var(--ease) both}
}
@media (prefers-reduced-motion: reduce){
  .sheet[open],.sheet[open]::backdrop{animation:sheetFade var(--t-base) var(--ease) both}   /* ohne Verschieben, nur Deckkraft */
}
@keyframes sheetUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
@keyframes sheetFade{from{opacity:0}to{opacity:1}}

/* Drucken (Einkaufsliste → „Drucken“, im Druckdialog auch „Als PDF speichern“): nur die Liste, weißes Papier, leere Kästchen */
.print-sheet{display:none}
@media print{
  @page{margin:14mm}
  html,body{background:#fff !important;color:#000 !important}
  body > :not(main),.toast,.cele,dialog,.relogin,.foot{display:none !important}
  /* „Drucken“ auf der Einkaufsliste: nur die gezeichneten Seiten (js/shopimg.js printList), je Bild eine Seite. */
  body:has(.print-sheet) > :not(.print-sheet){display:none !important}
  .print-sheet{display:block !important}
  .print-sheet img{display:block;width:100%;height:auto;break-after:page;break-inside:avoid}
  .print-sheet img:last-child{break-after:auto}
}