/* Fortschritt (js/tracking.js, js/views/fortschritt.js): Diagramme, Messen, Ketone, Wasser, Abzeichen-Album, Abzeichen-Feier (js/celebrate.js).
   Geladen nach css/app.css. */

/* Diagramme (lineChart in js/tracking.js): in echter Breite gezeichnet (1 Einheit = 1 px), Schrift also wirklich 13 px (Achsen) und 15 px (letzter Wert).
   Linie und Punkte Grün, Raster --sunk, Ketose-Bereich Grün hell mit Wort. Die Werte stehen zusätzlich als Liste für Vorleseprogramme darunter (.sr). */
.chart-box{min-width:0}
.chart{width:100%;max-width:560px;height:auto;display:block;overflow:visible;margin:0 auto}
.chart .grid{stroke:var(--sunk);stroke-width:1}
.chart .base{stroke:var(--muted);stroke-width:1;opacity:.5}
.chart .axis{font-size:var(--fs-small);fill:var(--muted);font-family:var(--f-body)}
.chart .axis.today{fill:var(--ink);font-weight:600}
.chart .line{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--green);stroke:var(--card);stroke-width:2}
.chart .hit{fill:transparent}
.chart .lbl{font-size:var(--fs-meta);font-weight:600;fill:var(--ink);font-family:var(--f-body)}
.chart .halo{paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}   /* Rand in Kartenfarbe: Linien („heute“, Raster) laufen nicht durch die Schrift */
.chart .pt:hover .dot{r:7}
.chart .grid.v{stroke-dasharray:2 3}
.chart .now{stroke:var(--ink);stroke-width:1;opacity:.45}
.chart .baseline{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:4 4}
.chart .band{fill:var(--green-soft)}
.chart .bandlbl{font-size:var(--fs-small);font-weight:600;fill:var(--done);font-family:var(--f-body);paint-order:stroke;stroke:var(--green-soft);stroke-width:4px;stroke-linejoin:round}
.chart-empty{padding:var(--sp-3) 0;   /* steht immer in einer Karte (.calc): kein Kasten im Kasten */
text-align:center;font-size:var(--fs-meta);color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.chart-empty .ic{font-size:26px;color:var(--green)}
/* Veränderung seit der ersten Messung: flach in der Karte (Vorzeichen als Zeichen, nicht nur Farbe) */
.deltabox{display:flex;flex-direction:column;gap:2px}
.deltabox b{font-family:var(--f-head);font-size:var(--fs-section);line-height:var(--lh-section);color:var(--green);font-variant-numeric:tabular-nums}
.deltabox span{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
/* Ketose-Bereich als Wort neben einem Farbmuster wie im Diagramm */
.k-legend{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.k-sw{flex:0 0 auto;width:24px;height:14px;border-radius:var(--r-pill);background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--done)}

/* Eingabe (Messen, Ketone, Tagesziel): Felder 52 px mit Rand --edge, Beschriftung darüber, Einheit rechts im Rahmen (.unit-in) */
.fs-form .field > input,.fs-form .field > select{min-height:52px}
.unit-in{display:flex;align-items:center;width:100%;min-width:0;min-height:52px;border:1.5px solid var(--edge);background:var(--bg);border-radius:var(--r-s)}
.unit-in input{flex:1 1 auto;width:auto;min-width:0;min-height:49px;border:0;background:none;border-radius:var(--r-s);padding:10px var(--sp-1) 10px var(--sp-3);font-variant-numeric:tabular-nums}
.unit-in input:focus-visible{outline:none}
.unit-in:focus-within{outline:3px solid var(--orange);outline-offset:2px}
.unit{flex:0 0 auto;padding:0 var(--sp-3) 0 var(--sp-1);font-size:var(--fs-meta);font-weight:600;color:var(--muted);white-space:nowrap}
.fs-form > .btn{align-self:stretch}
.fs-err{color:var(--bad);font-weight:600}   /* Fehler („Bitte einen Wert eintragen.“): rot mit Warnzeichen, nicht im Grün von „Gespeichert“ */
.fs-err .inline-ic{color:inherit}
/* Spalten nach Platz in der Karte, nicht nach Bildschirmbreite: so passt es auch, wenn nur die Schrift größer ist (em = Schrift der Karte).
   Ketone (Datum, Uhrzeit, Wert): unter 18em je eine Zeile, sonst bleibt „mmol/l“ im Wert-Feld kaum Platz zum Tippen.
   Maße (vier Felder): unter 13em je eine Zeile. Umschalter Blut · Urin · Atem: unter 12em untereinander. */
.fs-form{container:fs-form / inline-size}
@container fs-form (max-width:18em){.fs-form .fields.keto-fields{grid-template-columns:minmax(0,1fr)}}
@container fs-form (max-width:13em){.fs-form .fields.two{grid-template-columns:minmax(0,1fr)}}
@container fs-form (max-width:12em){.fs-form .seg.keto-seg{grid-template-columns:minmax(0,1fr);border-radius:var(--r)}}

/* Verlauf als Liste (Alle Messungen, Alle Werte): eine Fläche, Zeilen mit Datum, Werten und Löschen (.icon-btn) */
.mh-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--sp-2) 10px;align-items:center;min-height:64px;padding:10px 6px 10px var(--sp-4)}
.mh-row + .mh-row::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:1px solid var(--line)}
.mh-row .list-t span{font-variant-numeric:tabular-nums}

/* Wasser (mountWasser): Ring, Menge groß, Zustand als Satz, Knöpfe mit Wort, die letzten 7 Tage als Liste mit Balken */
.water-big{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--sp-4)}
.water-big b{display:block;font-family:var(--f-head);font-weight:600;font-size:var(--fs-display);line-height:var(--lh-display);color:var(--water);font-variant-numeric:tabular-nums}
.water-big span{color:var(--muted);font-weight:600}
.w-state{text-align:center;font-size:var(--fs-meta);line-height:var(--lh-meta)}
.w-btns{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.w-btns .btn{flex:1 1 11rem}
.fs-water > .btn.text{align-self:center}
/* Zeile: Tag (feste Spalte, damit die Balken bündig sind) · Balken · Menge. Wird es eng (schmal oder große Schrift),
   steht der Balken darunter über die ganze Breite; reicht selbst Tag + Menge nicht, rutscht die Menge in die nächste Zeile. */
.wbars{container:fs-week / inline-size;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;font-size:var(--fs-meta);line-height:var(--lh-meta)}
.wbars li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-3);min-height:48px;padding:6px 0}
.wbars li + li{border-top:1px solid var(--line)}
.wb-l{flex:0 0 6.5em;min-width:0;font-weight:600;color:var(--ink)}
.wb-bar{flex:1 1 3em;display:block;height:10px;background:var(--sunk);border-radius:var(--r-pill);overflow:hidden}
.wb-bar i{display:block;height:100%;background:var(--water);border-radius:inherit}
.wb-v{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--sp-1);min-width:4.5em;margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
@container fs-week (max-width:16em){.wbars .wb-l{flex:1 1 auto} .wbars .wb-v{min-width:0} .wbars .wb-bar{order:1;flex:1 0 100%}}
.wb-v .ic{font-size:16px}
.wbars li.ok .wb-v{color:var(--done);font-weight:600}

/* Ketone: Messart (Blut · Urin · Atem). Früher .kseg; umbenannt, weil kurs.css .kseg für die Etappen nutzt. */
.seg.keto-seg{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Kennzahlen oben auf Fortschritt (.statgrid/.stat aus css/app.css): Symbol + Zahl, darunter das Wort. Nur die Serie (.hot) ist orange. */
.fs-stats .st-n{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);font-size:inherit;color:var(--green);font-weight:600}
.fs-stats .st-n .ic{font-size:22px}
.fs-stats .hot .st-n{color:var(--orange-ink)}
.fs-stats .st-of{font-size:var(--fs-meta);color:var(--muted);font-weight:600}
.fs-stats .st-sub{margin-top:var(--sp-1);font-weight:500}
.fs-stats .stat > span{overflow-wrap:break-word;text-wrap:balance}
/* Alle Kacheln gleich hoch (beide Reihen), auch wenn eine Zeile mehr hat (z. B. „Beste Serie“). */
.fs-stats{grid-auto-rows:1fr}
/* Zwei Kacheln nebeneinander nur, wenn die Wörter („Gerichte gegessen“) hineinpassen; sonst eine pro Zeile (em = Schrift der Seite). */
.fs-top{container:fs-top / inline-size}
@container fs-top (max-width:13.5em){.fs-top .fs-stats{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}}

/* Abzeichen (Album: .badges unten bei „Sammelalbum“) */
.badge{background:none;border:0;padding:0;border-radius:var(--r-s);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1)}
.badge b{max-width:100%;font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;color:var(--ink);overflow-wrap:anywhere}
/* Zustand als Wort mit Symbol: „Geschafft“ (Haken, --done) oder „Noch offen“ (Schloss, --muted) */
.bst{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px var(--sp-1);max-width:100%;font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;color:var(--muted);overflow-wrap:anywhere}
.bst .ic{font-size:16px}
.bst.ok{color:var(--done)}
/* So bekommst du es: ganzer Satz, deshalb 15 statt 13 */
.breq{max-width:100%;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted);overflow-wrap:anywhere}
.badge .coin{width:84px;height:84px;display:block;margin-bottom:2px}
/* ================= Abzeichen-Feier (js/celebrate.js) =================
   Die Plakette ragt oben aus der Karte, dahinter weiche Strahlen und ein Leuchten; Konfetti läuft auf einem Canvas darüber. */
/* Oben Platz für die herausragende Plakette (--cele-top). Die Karte steht mit margin:auto in der Mitte; ist sie höher als der Bildschirm
   (große Schrift), beginnt sie oben und man kann bis zum Knopf scrollen (bei align-items:center wäre der Anfang abgeschnitten). */
.cele{--cele-top:96px;position:fixed;inset:0;z-index:60;display:flex;overflow-y:auto;
  padding:calc(max(24px,env(safe-area-inset-top,0px)) + var(--cele-top)) max(16px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cele[hidden]{display:none}
body.cele-open{overflow:hidden}
.cele-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.cele-card{position:relative;z-index:2;width:min(100%,360px);margin:auto;background:var(--card);border-radius:var(--r);padding:96px var(--sp-5) var(--sp-5);text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:var(--sh-2)}
.cele-stage{position:absolute;left:50%;top:-100px;width:200px;height:200px;margin-left:-100px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cele-glow{position:absolute;inset:24px;border-radius:50%;background:radial-gradient(circle,var(--cele-glow) 0%,rgba(242,203,114,0) 70%)}
/* Lichtkränze: weiche Lichtbahnen, nach außen ausgeblendet; zwei Lagen drehen gegeneinander und schimmern */
.cele-beams{position:absolute;inset:-40px;border-radius:50%;opacity:0;filter:blur(3px);
  -webkit-mask:radial-gradient(circle,#000 22%,rgba(0,0,0,.6) 42%,transparent 68%);mask:radial-gradient(circle,#000 22%,rgba(0,0,0,.6) 42%,transparent 68%)}
.cele-beams.b1{background:repeating-conic-gradient(from 0deg,transparent 0deg,var(--cele-ray) 7deg,transparent 14deg,transparent 30deg)}
.cele-beams.b2{inset:-24px;background:repeating-conic-gradient(from 15deg,transparent 0deg,var(--cele-ray2) 4deg,transparent 8deg,transparent 22.5deg)}
/* Leuchtwellen, die beim Erscheinen der Plakette nach außen laufen */
.cele-wave{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid var(--cele-spark);opacity:0;box-shadow:0 0 18px var(--cele-glow)}
.cele-badge{position:relative;z-index:1;width:150px;height:150px;display:flex;align-items:center;justify-content:center}
.cele-badge > .coin{width:150px;height:150px;display:block;filter:drop-shadow(0 12px 18px rgba(0,0,0,.28))}
.cele-fan{display:flex;align-items:center;justify-content:center}
.cele-fan .coin{width:104px;height:104px;margin:0 -16px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.25))}
.cele-fan .coin:nth-child(1){transform:rotate(-12deg) translateY(10px)}
.cele-fan .coin:nth-child(2){position:relative;z-index:1;width:124px;height:124px}
.cele-fan .coin:nth-child(3){transform:rotate(12deg) translateY(10px)}
.cele-spark{position:absolute;width:16px;height:16px;opacity:0}
.cele-spark::before,.cele-spark::after{content:"";position:absolute;left:0;top:50%;width:16px;height:4px;margin-top:-2px;border-radius:var(--r-pill);background:var(--cele-spark)}
.cele-spark::after{transform:rotate(90deg)}
.cele-spark.k0{left:16px;top:44px} .cele-spark.k1{right:12px;top:32px} .cele-spark.k2{left:4px;top:124px}
.cele-spark.k3{right:6px;top:134px} .cele-spark.k4{left:52px;top:4px} .cele-spark.k5{right:50px;top:176px}
.cele-k{margin-top:2px}
.cele-card > *{max-width:100%}
.cele-h,.cele-name,.cele-d{overflow-wrap:anywhere}   /* nur im Notfall: ein Wort bricht, statt aus der Karte zu ragen */
/* Überschrift und Name wachsen mit großer Schrift mit, aber nur so weit, dass „Herzlichen“ oder „Mahlzeiten“ noch in die Karte passt
   (bei normaler Schrift greift die Grenze nie: 26 px < 12vw ab 217 px Breite) */
.cele-h{font-size:min(var(--fs-title),12vw);line-height:1.15}
.cele-name{margin:2px 0 0;font-family:var(--f-head);font-size:min(var(--fs-section),11vw);color:var(--orange-ink);font-weight:600;line-height:1.25}
.cele-d{margin:2px 0 0;color:var(--muted);font-size:var(--fs-meta);max-width:30ch}
.cele-extra:empty{display:none}
.cele-prog{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);width:min(100%,220px);margin-top:6px}
.cele-prog .bar{width:100%}
.cele-acts{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;margin-top:14px}
.cele-acts .btn.text{padding-inline:var(--sp-3)}
/* Geheime Abzeichen: Nachthimmel mit Gold, in hell und dunkel gleich. Feste Farben (#2C3366, #F2CB72 …) gehören zur Abzeichen-Grafik, keine Tokens. */
.cele-card.secret{background:linear-gradient(165deg,#2C3366 0%,#3E2F66 100%);color:#E9E6FF}
.cele-card.secret .eyebrow{color:#F2CB72}
.cele-card.secret .cele-h{color:#F5D27A}
.cele-card.secret .cele-name{color:#fff}
.cele-card.secret .cele-d{color:#C9C6EA}
.cele-card.secret .btn.text{color:#F5D27A}
.cele-card.secret .btn:not(.text){background:#F2CB72;color:#262B52}
/* Ablauf: Hintergrund → Karte federt hoch → Plakette springt hinein → Strahlen → Text nacheinander → Glanz.
   Tempi aus tokens.css: Einblenden --t-base, alles Weitere ab --t-slow (Feier ab 400 ms); Federn gibt es nur hier.
   Die Dauerschleifen (Drehen, Schweben, Schimmern, Funkeln) laufen bewusst langsam im Hintergrund. Bei „Bewegung reduzieren“ ist alles aus (unten). */
.cele.play{animation:celeFade var(--t-base) var(--ease) both}
.cele.play .cele-card{animation:celeCard calc(var(--t-slow) * 1.5) cubic-bezier(.34,1.56,.64,1) both}
.cele.play .cele-badge{animation:celePop calc(var(--t-slow) * 2.25) var(--t-fast) cubic-bezier(.3,1.5,.5,1) both}
.cele.play:not(.detail) .cele-badge > .coin,.cele.play:not(.detail) .cele-fan{animation:celeBob 3.4s calc(var(--t-slow) * 3) ease-in-out infinite}
.cele.play .cele-beams.b1{animation:celeBeamsIn calc(var(--t-slow) * 2) calc(var(--t-fast) * 2.5) ease both,celeSpin 30s calc(var(--t-fast) * 2.5) linear infinite,celeShimmer 3s 1.1s ease-in-out infinite}
.cele.play .cele-beams.b2{animation:celeBeamsIn calc(var(--t-slow) * 2) calc(var(--t-fast) * 3.75) ease both,celeSpinBack 22s calc(var(--t-fast) * 3.75) linear infinite,celeShimmer 2.4s 1.3s ease-in-out infinite reverse}
.cele.play:not(.detail) .cele-wave{animation:celeWave calc(var(--t-slow) * 3.25) cubic-bezier(.2,.6,.3,1) both}
.cele.play .cele-wave.w1{animation-delay:calc(var(--t-slow) + 20ms)} .cele.play .cele-wave.w2{animation-delay:calc(var(--t-slow) + 220ms)} .cele.play .cele-wave.w3{animation-delay:calc(var(--t-slow) + 420ms)}
.cele.play .cele-glow{animation:celeGlow 2.8s calc(var(--t-fast) * 2.5) ease-in-out infinite}
.cele.play:not(.detail) .cele-spark{animation:celeTwinkle 2.4s ease-in-out infinite}
.cele.play .cele-spark.k1{animation-delay:.9s} .cele.play .cele-spark.k2{animation-delay:1.3s} .cele.play .cele-spark.k3{animation-delay:.7s}
.cele.play .cele-spark.k4{animation-delay:1.6s} .cele.play .cele-spark.k5{animation-delay:1.1s} .cele.play .cele-spark.k0{animation-delay:.5s}
/* Text nacheinander: je 80 ms später (--i), Start nach drei schnellen Schritten (360 ms) */
.cele-k{--i:0} .cele-h{--i:1} .cele-name{--i:2} .cele-d{--i:3} .cele-extra{--i:3.5} .cele-acts{--i:4.25}
.cele.play :is(.cele-k,.cele-h,.cele-name,.cele-d,.cele-extra,.cele-acts){animation:celeUp var(--t-slow) calc(var(--t-fast) * 3 + var(--i) * 80ms) ease both}
.cele.detail .cele-beams,.cele.detail .cele-glow{opacity:.4}
.coin-shine{transform:translateX(0)}
.cele.play .coin-shine{animation:celeShine calc(var(--t-slow) * 3.5) calc(var(--t-slow) * 2.25) ease-in-out both}
@keyframes celeFade{from{opacity:0}to{opacity:1}}
@keyframes celeCard{from{opacity:0;transform:translateY(46px) scale(.9)}to{opacity:1;transform:none}}
@keyframes celePop{0%{opacity:0;transform:scale(.2) rotate(-35deg)}55%{opacity:1;transform:scale(1.14) rotate(8deg)}75%{transform:scale(.96) rotate(-3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes celeBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes celeBeamsIn{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes celeSpin{to{transform:rotate(360deg)}}
@keyframes celeSpinBack{to{transform:rotate(-360deg)}}
@keyframes celeShimmer{0%,100%{filter:blur(3px) brightness(1)}50%{filter:blur(2px) brightness(1.35)}}
@keyframes celeWave{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(2.1)}}
@keyframes celeGlow{0%,100%{transform:scale(.9);opacity:.8}50%{transform:scale(1.1);opacity:1}}
@keyframes celeTwinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}35%{opacity:1;transform:scale(1) rotate(45deg)}65%{opacity:0;transform:scale(.4) rotate(90deg)}}
@keyframes celeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes celeShine{from{transform:translateX(0)}to{transform:translateX(200px)}}
@media (prefers-reduced-motion:reduce){.cele.play,.cele.play *{animation:none!important}.cele-spark{display:none}}
@media (max-height:640px){.cele{--cele-top:70px}.cele-card{padding-top:80px}.cele-stage{transform:scale(.82);top:-96px}}

/* ================= Fortschritt: nächstes Ziel, Sammelalbum ================= */
/* Plakette links, Text rechts; ist neben der Plakette keine 9em Platz (große Schrift), steht der Text darunter */
.nextb{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:var(--card);border:0;border-radius:var(--r);box-shadow:var(--sh-1);padding:var(--sp-3) 14px;text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer}
.nextb .coin{flex:0 0 72px;width:72px;height:72px;display:block}
.nb-t{flex:1 1 9em;display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:break-word}
.nb-t b{font-family:var(--f-head);font-size:var(--fs-dish);line-height:var(--lh-dish);color:var(--green)}
.nb-t > span:not(.bar):not(.now-label){font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}   /* „Als Nächstes“: .now-label aus css/app.css (Orange dunkel wie auf Heute) */
.nb-t .bar{display:block;margin-top:var(--sp-1)}
/* Fortschrittsbalken (Baustein „Fortschritt“): Orange auf --sunk. Breite inline (berechnet). Gab es vorher nicht, die Balken waren unsichtbar. */
span.bar{display:block;height:8px;background:var(--sunk);border-radius:var(--r-pill);overflow:hidden}   /* span: .chart .bar ist ein SVG-Balken */
span.bar i{display:block;height:100%;background:var(--orange);border-radius:inherit}
/* Gruppen im Album: je eine Karte (aufklappbar). Kopfzeile ruhig: Inter 17/600 --ink, rechts „2 von 5“ oder „Alle gesammelt“.
   .bg-h (Kopfzeile) steht in css/app.css, weil die Admin-Übersicht sie auch nutzt; hier Karte, Tippfläche und Titel. */
.bgroup{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:var(--sp-1) var(--sp-2)}   /* seitlich nur 8 px, damit drei Kacheln bei 390 px Platz haben; Kopf und Text rücken selbst ein */
.bgroup[open]{padding-bottom:var(--sp-4)}
.bgroup + .bgroup{margin-top:var(--sp-3)}
.bgroup > .bg-h{min-height:52px;padding-inline:var(--sp-2);flex-wrap:wrap;row-gap:0}   /* große Schrift: „2 von 5“ rutscht unter den Titel statt ihn zu quetschen */
.bgroup > p{padding-inline:var(--sp-2)}
.bgroup > .gloss{align-self:flex-start;margin-inline:var(--sp-1)}   /* „Was ist eine Etappe?“ bündig mit Titel und Text (Textknopf hat 4 px Innenabstand) */
.bgroup > .bg-h h3{flex:1 1 8em;min-width:0;font-family:var(--f-body);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600;color:var(--ink);letter-spacing:0}
.bgroup > .bg-h span{display:inline-flex;align-items:center;gap:var(--sp-1);white-space:normal}
.bgroup > .bg-h span .ic{font-size:16px;color:var(--done)}
.bgroup[open] > .bg-h .ds-ic{transform:rotate(180deg)}
.bgroup > :not(summary):not(.m0){margin-top:0}   /* Abstand zum Kopf kommt aus dem gap von .sec */
.badges{container:fs-album / inline-size;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-4) 0} /* letzte Reihe mittig */
.badges > .badge{flex:0 0 33.333%;max-width:33.333%}
/* Spalten nach Platz (em = Schrift des Albums): drei Kacheln ab gut 6em je Kachel, sonst zwei, bei sehr großer Schrift eine.
   So brechen Titel wie „Bücherwurm“ nicht mitten im Wort. Die Regeln für schmale Bildschirme unten bleiben als Rückfall. */
@container fs-album (max-width:18.5em){.badges > button.badge{flex-basis:50%;max-width:50%}}   /* button.: schlägt die Rückfall-Regeln weiter unten */
@container fs-album (max-width:12.4em){.badges > button.badge{flex-basis:100%;max-width:100%}}
button.badge{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:6px 2px;border-radius:var(--r-s);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-1);min-width:0}
button.badge:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
/* Plakette beim Zeigen/Antippen: ruhig (--t-fast, --ease, ohne Federn); geheime Plaketten schimmern langsam. Nur ohne „Bewegung reduzieren“. */
@media (prefers-reduced-motion:no-preference){
  .badge .coin{transition:transform var(--t-fast) var(--ease)}
  @media (hover:hover){button.badge:hover .coin{transform:translateY(-3px) rotate(-4deg) scale(1.04)}}
  button.badge:active .coin{transform:scale(.94)}
  .badge.sec:not(.ok) .coin{animation:mystery calc(var(--t-slow) * 8) ease-in-out infinite}
}
@keyframes mystery{0%,100%{filter:drop-shadow(0 0 0 rgba(242,203,114,0))}50%{filter:drop-shadow(0 0 9px rgba(242,203,114,.75))}}

@media (max-width:380px){.badge .coin{width:76px;height:76px}}
@media (max-width:360px){.badges > .badge{flex-basis:50%;max-width:50%}}   /* schmal: zwei Spalten, damit Titel und „Noch offen“ Platz haben */

/* Große Systemschrift (dieselbe Grenze wie in css/app.css): Umschalter, Kennzahlen, Felder untereinander, Album zweispaltig, Wasser-Zeilen gestapelt.
   Die Container-Regeln oben (@container fs-form, fs-top, fs-week, fs-album) machen dasselbe nach echtem Platz, auch wenn nur die Schrift wächst;
   dieser Block ist der Rückfall für Browser ohne Container-Abfragen. */
@media (max-width:19.9em){
  .seg.keto-seg{grid-template-columns:minmax(0,1fr)}
  .fs-stats{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .fs-form .fields,.fs-form .fields.two{grid-template-columns:minmax(0,1fr)}
  .badges > .badge{flex-basis:50%;max-width:50%}
  .nb-t{flex-basis:100%}
  .wb-l{flex:1 1 auto}
  .wb-bar{order:1;flex:1 0 100%}
  .mh-row{grid-template-columns:minmax(0,1fr) auto}
  .mh-row > .tag{grid-row:2;justify-self:start}
}

.keto-shop{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;align-self:flex-start;font-weight:600;color:var(--green);text-underline-offset:3px}
.keto-shop .ic{font-size:18px;color:var(--green);flex:0 0 auto}