/* Heute (js/views/heute.js): Kopf, Tageskarte mit Ring und „Als Nächstes“, Mahlzeiten, Lektionen & Quiz, Dein Tag, Etappe,
   Startkarte, Rückstand/Pause, Finale. Geladen nach css/app.css. Eigene Klassen mit Präfix hx-, Listen aus den Bausteinen (.list, listRow). */

/* Kopf: Datum (.page-meta) über „Tag 1 von 30“ */
.hx-head .page-title small{font-family:var(--f-body);font-size:var(--fs-section);line-height:var(--lh-section);font-weight:500;color:var(--muted);letter-spacing:0}
.hx-head + .sec{margin-top:var(--sp-4)}

/* Tageskarte: Ring, Serie, ein Satz, darunter „Als Nächstes“ mit dem einzigen grünen Hauptknopf (Entwurf „Heute“) */
.hx-hero{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-4)}
/* Ring und Text nebeneinander; wird es eng (große Schrift, auch ohne die em-Grenze), rutscht der Text unter den Ring */
.hx-sum{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
/* Ring wächst mit der Systemschrift (ring(…, {fluid: true}) ohne feste Größe; rem, damit die Zahl bei großer Schrift nicht herausragt) */
.hx-ring > .ring{width:5.25rem;height:5.25rem}
.hx-ring .c b{font-size:var(--fs-title);line-height:1;color:var(--ink)}
.hx-ring .c span{margin-top:2px}
.hx-ring.full .c{opacity:0}
.hx-sum-t{flex:1 1 9rem;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.hx-say{margin:0;display:flex;flex-direction:column}
.hx-say span + .hx-say-x{margin-top:var(--sp-1)}
.hx-say b{font-size:var(--fs-body);line-height:1.3;color:var(--ink)}
.hx-say span{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.hx-say .hx-done-t{font-family:var(--f-head);font-size:var(--fs-section);line-height:var(--lh-section);color:var(--green)}
.hx-next{border-top:1px solid var(--line);padding-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
.hx-next-row{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center}
.hx-next-ic{width:48px;height:48px;border-radius:var(--r-s);background:var(--orange-soft);color:var(--orange-ink);display:flex;align-items:center;justify-content:center;font-size:24px}
.hx-next-t{display:flex;flex-direction:column;min-width:0}
.hx-next-t b{font-size:var(--fs-body);line-height:1.3;color:var(--ink);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.hx-next-t span{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}

/* Deine Mahlzeiten: eine Liste, je Zeile Bild 56, Mahlzeit + Gericht (Link, Fraunces 19 wie alle Gerichtnamen), „Tauschen“ (Textknopf, auch nach dem Essen), Haken-Kreis „Gegessen“ */
.hx-meals .sec-meta .bav{margin:-2px 6px 0 0}
.hx-meal{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:var(--sp-3) 14px}
.hx-meal + .hx-meal::before{content:"";position:absolute;top:0;left:84px;right:0;border-top:1px solid var(--line)}
.hx-mimg{display:block;border-radius:var(--r-s)}
.hx-mimg img{width:56px;height:56px;border-radius:var(--r-s);object-fit:cover;display:block;background:var(--sunk)}
.hx-mt{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hx-dish{display:flex;flex-direction:column;justify-content:center;min-height:44px;max-width:100%;text-decoration:none;color:inherit;border-radius:var(--r-s)}
.hx-slot{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.hx-dish h3{font-family:var(--f-head);font-size:var(--fs-dish);line-height:var(--lh-dish);font-weight:600;color:var(--green);letter-spacing:0}
.hx-plus{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.hx-swap{margin:0 0 -8px -4px}   /* Textknopf 44 px, optisch dicht unter dem Gericht */
.hx-meal .checkc{justify-self:end}
.hx-meal.is-done h3{color:var(--muted)}
.hx-meal.is-done .hx-mimg img{opacity:.75}
.hx-meal.is-done .hx-swap{color:var(--muted)}   /* Gegessen: Tauschen bleibt (der Haken gehört zur Mahlzeit), aber leise */
/* Schmal (320 px): kleineres Bild, mehr Platz für den Gerichtnamen (bleibt in der Stufe „Gericht“, Handys trennen per hyphens:auto) */
@media (max-width:360px){
  .hx-meal{grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding-inline:var(--sp-3)}
  .hx-meal + .hx-meal::before{left:70px}
  .hx-mimg img{width:48px;height:48px}
}
/* Wenig Platz (große Systemschrift, auch ohne die em-Grenze; em = Schrift der Liste): Haken-Kreis unter das Gericht, das Wort daneben.
   Steht nach der 360-px-Regel, damit es dort gewinnt. */
.hx-meals .list{container:hxm / inline-size}
@container hxm (max-width:16em){
  .hx-meal{grid-template-columns:auto minmax(0,1fr);align-items:start}
  .hx-meal .checkc{grid-column:2;justify-self:start;flex-direction:row;gap:10px;margin-top:var(--sp-1)}
}

/* Lektionen & Quiz, Rückstand: erledigt = Kachel --done mit Haken und Wort (data-ls="done", .ls-ok: Bausteine in app.css, wie im Kurs) */

/* Dein Tag: Wasser-Zeile = Link zum Wasser-Tracker und die Knöpfe „+ Glas“ / „−“ (kein Link drumherum). Messen und Einkaufsliste als normale Zeilen.
   Wenig Platz (Grundregeln: 360 px und schmaler, große Systemschrift): oben der Link mit Pfeil (Spalten wie die Zeile), darunter „+ Glas“ und „− Glas“.
   Genug Platz (Containerabfrage, em = Schrift der Liste): Knöpfe in der Endspalte, die Zeile ist so hoch wie die anderen. */
.hx-day .list{container:hxd / inline-size}
.hx-water{row-gap:var(--sp-2)}
.hx-wlink{grid-column:1 / -1;display:grid;grid-template-columns:inherit;column-gap:inherit;align-items:center;min-height:48px;text-decoration:none;color:inherit;border-radius:var(--r-s)}
.hx-wlink > .go-ic{font-size:20px;color:var(--muted)}
.hx-water:has(.hx-wlink:hover){background:var(--bg)}
.hx-wb{grid-column:2 / -1;display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.hx-wb .btn{padding-inline:14px}   /* etwas schmaler, damit beide Knöpfe auch bei 320 px nebeneinander passen */
@container hxd (min-width:20em){
  .hx-wlink{grid-column:1 / 3;grid-template-columns:48px minmax(0,1fr)}
  .hx-wlink > .go-ic{display:none}
  .hx-wb{grid-column:3;flex-direction:row-reverse;flex-wrap:nowrap}   /* „+ Glas“ ganz rechts, „−“ links daneben */
  .hx-wminus{width:48px;padding-inline:0}
  .hx-wm-t{display:none}   /* nur „−“; Vorleseprogramme hören „Ein Glas weniger“ (aria-label) */
}


/* Startkarte (vor dem Start): Bild, Schritte, Auswahl des Starttags */
.startcard{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.startcard img{width:100%;aspect-ratio:2.4 / 1;object-fit:cover;display:block}
.sc-body{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
/* Finale: Ergebnis-Karte (mit Konfetti, weil das Finale-Abzeichen dazugehört) */
.today{position:relative;background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:var(--sp-4);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4);align-items:center;overflow:hidden}
.today .t{display:flex;flex-direction:column;gap:6px;min-width:0}
.today h2{font-size:var(--fs-title);line-height:var(--lh-title)}
.today p{margin:0;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--ink)}
.today > .coin{width:72px;height:72px}
.hx-streak .ic{font-size:16px}
.today.party{background:var(--orange-soft)}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;width:8px;height:8px;border-radius:50%}
.confetti i:nth-child(1){left:8%;top:12%;background:var(--orange)}
.confetti i:nth-child(2){left:30%;top:6%;background:#D4A03C;width:6px;height:6px}
.confetti i:nth-child(3){right:10%;top:14%;background:#6E9E7E}
.confetti i:nth-child(4){right:6%;bottom:22%;background:#E07A8F;width:6px;height:6px}
.confetti i:nth-child(5){left:4%;bottom:16%;background:#5E9DB8;width:6px;height:6px}
.confetti i:nth-child(6){right:28%;top:5%;background:var(--orange);width:5px;height:5px}
.confetti i:nth-child(7){right:20%;bottom:8%;background:#A07BBE;width:7px;height:7px}
/* Etappe (unten): Karte mit Steinen je Tag, erledigt grün mit Haken, heute orange, am Ende das Abzeichen; „Was ist eine Etappe?“ */
.path{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
.path p{margin:0;font-size:var(--fs-meta);line-height:var(--lh-meta)}
.path > .btn.text,.sc-steps .gloss{justify-content:flex-start;text-align:left}   /* bricht der Text um (große Schrift), bleibt er links */
.path > .btn.text{align-self:flex-start;margin:-8px 0 -10px -4px}
.path p b{color:var(--ink);font-weight:600}   /* Betonung in Tinte; das Orange trägt der heutige Stein */
.stones{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr)) 58px;align-items:center;position:relative}
.stones::before{content:"";position:absolute;left:6%;right:40px;top:50%;border-top:3px dotted var(--line);transform:translateY(-50%)}
.st{position:relative;z-index:1;justify-self:center;width:100%;max-width:34px;aspect-ratio:1;border-radius:50%;background:var(--bg);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--fs-small);color:var(--muted);font-variant-numeric:tabular-nums}
.st .ic{font-size:16px;stroke-width:3}
.st.d{background:var(--done);border-color:var(--done);color:var(--card)}
.st.p{background:var(--card);border-style:dashed;border-color:var(--muted)}   /* noch offen: gestrichelt, nicht nur andere Fläche */
.st.t{border-color:var(--orange);color:var(--orange-ink);outline:4px solid var(--orange-soft);max-width:38px;font-size:var(--fs-meta)}
.st.goal{max-width:58px;width:58px;border:0;background:none;justify-self:end;aspect-ratio:auto}
.st.goal .coin{width:56px;height:56px;display:block}

@media (max-width:340px){.today{grid-template-columns:1fr;justify-items:start}}

/* ---------- Einfacher und klarer (Fahrplan Oktober 2026) ---------- */
/* Einstieg: drei Schritte bis Tag 1 */
.sc-steps{list-style:none;margin:2px 0 var(--sp-1);padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.sc-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--sp-3);align-items:start}
.sc-steps .sn{width:32px;height:32px;border-radius:50%;background:var(--green-soft);color:var(--green);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:var(--fs-meta)}
.sc-steps li.ok .sn{background:var(--done);color:var(--card)}   /* erledigt = --done wie jeder Haken */
.sc-steps li.ok .sn .ic{stroke-width:3;font-size:16px}
.sc-steps div{display:flex;flex-direction:column;min-width:0;padding-top:var(--sp-1)}
.sc-steps a{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:44px;text-decoration:none;color:var(--green);align-self:flex-start}
.sc-steps a .go-ic{font-size:16px}
/* Steht ein Link als Erstes im Schritt („Finde dein Vögelchen“), mittelt seine 44-px-Tippfläche den Text nach unten.
   Der Ausgleich hebt die Zeile auf die Höhe der Nummer (wie ein Schritt mit fettem Text), die Tippfläche bleibt 44 px. */
.sc-steps div > a:first-child{margin-top:-10px}
.sc-steps b{line-height:1.3}
.sc-steps li.ok b{color:var(--muted)}
.sc-steps span{font-size:var(--fs-meta);color:var(--muted)}
.sc-steps .gloss{align-self:flex-start;margin:0 0 -8px -4px}
/* „Was ist ein Vögelchen?“ direkt unter der Karte „Finde zuerst dein Vögelchen“ (ohne Vögelchen, nach dem Start) */
.hx-bgloss{margin-top:6px}
.hx-bgloss .gloss{margin-left:-4px;justify-content:flex-start;text-align:left}

/* Etappe: verpasste Tage, dahinter „Zum Kurs“ als Textknopf (.with-btn, app.css) */
.path p.path-miss{font-size:var(--fs-meta);color:var(--muted)}

/* Startkarte: Auswahl des Starttags (flach in der Karte, Trennlinie statt Kasten), freiwillige Startwerte */
.start-pick{display:flex;flex-direction:column;gap:var(--sp-3);border-top:1px solid var(--line);padding-top:var(--sp-4)}
.start-pick .field input{min-height:44px}
.sc-extra{margin:2px 0 0;display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sp-1)}
.sc-extra .inline-ic{color:var(--done)}   /* „Deine Startwerte sind eingetragen“ = erledigt */
.sc-extra a{display:inline-flex;align-items:center;min-height:44px;color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sc-steps a.sc-change{margin:var(--sp-1) 0 0 -4px}

/* „Schön, dass du da bist“ (Pause, oben) und „Aus den letzten Tagen“ (Rückstand mit aufklappbarer Liste, unter Lektionen & Quiz): je eine Karte */
.welcome,.hx-card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
.welcome h2,.hx-card h2{font-size:var(--fs-section);line-height:var(--lh-section)}
.welcome p,.hx-card p{margin:0}
.wb-list{margin:0 calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4))}
.wb-list > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px var(--sp-4);border-top:1px solid var(--line);font-size:var(--fs-meta);font-weight:600;color:var(--green);min-height:48px}
.wb-list > summary::-webkit-details-marker{display:none}
.wb-list[open] > summary .ds-ic{transform:rotate(180deg)}
.wb-list .list{box-shadow:none;border-radius:0 0 var(--r) var(--r);border-top:1px solid var(--line)}

/* Finale: Endwerte, Ergebnis */
.fin-stats{margin-top:2px}
.fin-next > .hx-next{border-top:0;padding-top:0}   /* „Als Nächstes“ im Finale als eigene Karte unter dem Ergebnis */
.fin-stats .stat b{font-size:var(--fs-title)}

/* Bewegung: Zahl im Ring blendet aus, wenn sich der Ring schließt (der Ring selbst gleitet über app.css), Gericht wird leise. Nur ohne „Bewegung reduzieren“. */
@media (prefers-reduced-motion:no-preference){
  .hx-ring .c{transition:opacity var(--t-base) var(--ease)}
  .hx-meal h3,.hx-mimg img{transition:color var(--t-base) var(--ease),opacity var(--t-base) var(--ease)}
}

/* Große Systemschrift (dieselbe Grenze wie in app.css): Haken-Kreis unter dem Gericht mit dem Wort daneben (Ring und Text stapeln sich schon über flex-wrap) */
@media (max-width:19.9em){
  /* Mahlzeiten: Containerabfrage oben. Listen: kleinere Symbolkachel steht in app.css (gilt für alle Listen) */
  .hx-next-row{grid-template-columns:minmax(0,1fr)}
  .hx-next-ic{display:none}
  /* Knöpfe in Karten volle Breite (Umbruch langer Wörter: siehe oben, gilt auch ohne diese Grenze) */
  .welcome .btn,.hx-card .btn,.hx-next .btn{align-self:stretch;flex:1 1 100%;padding-inline:var(--sp-3)}
  /* Steine brechen in Reihen um, statt die Zahlen zu quetschen */
  .stones{grid-template-columns:repeat(auto-fill,minmax(2.5rem,1fr));row-gap:var(--sp-2)}
  .stones::before{display:none}
  .st,.st.t{width:2.2em;max-width:100%;font-size:var(--fs-small)}
  .st.goal{grid-column:1 / -1;justify-self:start;width:58px}
}