/* Kurs (js/views/kurs.js): Etappen, Tage, Lektion, Quiz (js/quiz.js). Lektionstext und Module: css/modules.css. Lektionsliste: css/app.css.
   Geladen nach css/app.css. */

/* Kurs (#/kurs): Etappen in einer Zeile (.kstage), darunter die Tage als Weg (.kpath) je Etappe (.kgrp, Sprungziel id="etappe-N").
   Orange nur für „jetzt“: Balken der aktuellen Etappe, Knoten und Etikett des heutigen Tages. Erledigt: --done mit Haken und Wort. */
.kstage{gap:10px}
.kstage-h{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 var(--sp-3)}
.kstage-h .gloss{margin-left:-4px;justify-content:flex-start;text-align:left}   /* „Was ist eine Etappe?“ bricht meist in die eigene Zeile: Symbol bündig mit dem Text darüber */
.kstage-t{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
.kstage-t b{font-weight:600;color:var(--ink)}
.kstage-sum{margin:0;display:flex;align-items:flex-start;gap:6px;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.kstage-sum .ic{flex:0 0 auto;font-size:16px;margin-top:calc((var(--lh-meta) - 16px) / 2);color:var(--done);stroke-width:3}
.kstage-sum span{min-width:0}
/* Balken: ein Teil je Etappe nebeneinander (keine feste Anzahl, kein seitliches Scrollen); jeder Teil ist ein Knopf ≥ 44 px.
   Bei vielen Etappen (oder großer Schrift) bricht die Reihe in eine zweite Zeile um, statt die Teile unter 3,5 rem zu quetschen. */
.kbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(3.5rem,100%),1fr));gap:var(--sp-2)}
.kbar > .kseg{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-2);min-width:0;min-height:44px;padding:6px 0;background:none;border:0;border-radius:var(--r-s);text-align:left;color:var(--muted)}
.kseg-b{display:block;height:8px;border-radius:var(--r-pill);background:var(--sunk);overflow:hidden}
.kseg-b i{display:block;height:100%;background:var(--orange);border-radius:inherit}
.kseg.is-done .kseg-b i{background:var(--done)}
.kseg-t{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 var(--sp-1);min-width:0;font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600}
.kseg-t > span{min-width:0;overflow-wrap:anywhere}   /* passt „✓ Woche 1“ nicht in eine Zeile (320 px), rückt der Name unter den Haken statt mitten im Wort zu brechen */
.kseg-t .ic{flex:0 0 auto;font-size:16px;margin-top:2px;color:var(--done);stroke-width:3}
.kseg.is-now .kseg-t{color:var(--ink)}

/* Weg: senkrechte Linie (je Zeile bis zum nächsten Knoten), Knoten 44 px (wächst mit großer Schrift bis 64 px) */
.kgrp{gap:var(--sp-1)}
.kpath{--kn:min(2.75rem, 64px);list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.kpath > li{position:relative}
.kpath > li:not(:last-child)::before{content:"";position:absolute;left:calc(var(--kn) / 2 - 1px);top:calc(10px + var(--kn) / 2);bottom:calc(-10px - var(--kn) / 2);width:2px;background:var(--line)}
.kday{position:relative;display:grid;grid-template-columns:var(--kn) minmax(0,1fr) 20px;gap:14px;align-items:start;min-height:64px;padding:10px 0;color:inherit;text-decoration:none;border-radius:var(--r-s)}
.kday-n{position:relative;z-index:1;width:var(--kn);height:var(--kn);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);border:2px solid var(--line);font-family:var(--f-head);font-size:var(--fs-dish);line-height:1;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.kday-n .ic{font-size:22px;color:var(--green)}
.kday.is-done .kday-n{background:var(--done);border-color:var(--done);color:var(--card)}
.kday.is-done .kday-n .ic{color:var(--card);stroke-width:3}
.kday.is-now:not(.is-done) .kday-n{background:var(--orange-soft);border-color:var(--orange);color:var(--orange-ink)}
.kday.is-now:not(.is-done) .kday-n .ic{color:var(--orange-ink)}
.kday.is-locked{grid-template-columns:var(--kn) minmax(0,1fr)}
.kday.is-locked .kday-n .ic{color:var(--muted)}
.kday-t{display:flex;flex-direction:column;min-width:0;padding-top:1px}
.kday-t b{font-weight:600;color:var(--ink);line-height:1.3}
.kday-t > span:not(.sr){font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.kday > .go-ic{align-self:center;font-size:20px;color:var(--muted)}
/* Heute: die einzige Karte im Weg */
.kday-card{grid-column:2 / 4;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1);background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:14px var(--sp-4)}
.kday-k{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;color:var(--muted)}
.kday-card b{font-family:var(--f-head);font-size:var(--fs-dish);line-height:var(--lh-dish);font-weight:600;color:var(--green)}
.kday-m{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.kday-bar{display:block;height:6px;margin-top:6px;background:var(--sunk);border-radius:var(--r-pill);overflow:hidden}
.kday-bar i{display:block;height:100%;background:var(--orange);border-radius:inherit}
.kday.is-done .kday-bar i{background:var(--done)}
/* Wörter für den Zustand: .ls-ok/.ls-now und die Kachel der Lektionszeilen (data-ls) sind Bausteine in css/app.css */
.kday-t .ls-open{color:var(--ink);font-weight:600}   /* vergangener Tag mit offenen Aufgaben: „noch offen“, ruhig, ohne Orange */

/* Kurstag (#/kurs/N) */
.kt-head .page-meta .tag{margin-right:var(--sp-2)}
.kd-nav{flex-direction:row;flex-wrap:wrap;gap:var(--sp-2)}
.kd-nav .kd-next{margin-left:auto}

/* Lektion: Kopf, Text mit angenehmer Zeilenlänge (Lektionstext selbst: css/modules.css), Abschluss als Karte mit einem Hauptknopf */
.lesson-head{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2)}
.lesson-head h1.lesson-title{font-size:var(--fs-title);line-height:var(--lh-title)}
.lesson-head + .video{margin-top:var(--sp-4)}
.md.lesson-md{max-width:36em;margin-top:var(--sp-4)}
.lesson-done{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-6);background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:var(--sp-4)}
.ld-btns{display:flex;flex-direction:column;gap:var(--sp-3)}   /* „Lektion abschließen“ + „Zurück zum heutigen Tag“ untereinander, gleich groß */
.ld-note{margin:0;display:flex;align-items:center;gap:var(--sp-2);font-weight:600;color:var(--done)}
.ld-note .ic{font-size:20px;stroke-width:2.6}
.ld-state{display:flex;align-items:center;gap:14px}
.ld-state p{margin:0;display:flex;flex-direction:column;min-width:0}
.ld-state p b{font-weight:600;color:var(--ink);line-height:1.3}
.ld-state p span{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.ld-ok{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--done);color:var(--card);font-size:24px}
.ld-ok .ic{stroke-width:2.6}
/* Rechner in einer Lektion (::tool, js/tools.js und js/tracking.js): deren Knöpfe als Sekundärknopf, Hauptknopf der Seite ist „Weiter: …“ */
.lesson-md [data-tool] .btn:not(.secondary):not(.text):not(.ghost){background:var(--green-soft);color:var(--green)}
/* Titel über den Karten (secHead aus tracking.js) und .m0-Absätze: Abstand kommt von .sec/.calc wie auf Fortschritt, nicht von .md h2/.md p */
.lesson-md [data-tool] .sec-title,.lesson-md [data-tool] .m0{margin:0}

/* Quiz (js/quiz.js). Antworten als große Tippzeilen mit Rand --edge. Rückmeldung immer mit Symbol und Wort („Richtig“, „Falsch“), nie nur Farbe.
   Mehrfachauswahl-Kästchen (.qopt.multi .dot) behält 5 px Radius: eckig = mehrere Antworten, rund = eine. */
.quiz{display:flex;flex-direction:column;gap:var(--sp-4)}
.quiz .sec-title{margin:0}   /* sonst gewinnt der Abstand von .md h2 (Quiz steht im Lektionstext) */
.qcard{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:var(--sp-4);display:flex;flex-direction:column;gap:10px}
.qcard .qn{font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;color:var(--muted)}
.qcard h3{margin:0 0 var(--sp-1);font-family:var(--f-body);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600;color:var(--ink)}
.qopt{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:var(--sp-1) var(--sp-3);align-items:center;text-align:left;width:100%;min-height:56px;background:var(--card);border:1.5px solid var(--edge);border-radius:var(--r-s);padding:var(--sp-3) 14px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.qopt-t{min-width:0;overflow-wrap:anywhere}   /* langes Wort bei großer Schrift bricht in der Zeile um */
.qopt .dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--muted);display:flex;align-items:center;justify-content:center;color:var(--card)}   /* Ring --muted wie beim Haken-Kreis (3 : 1) */
.qopt .dot .ic{font-size:14px;stroke-width:3.4}
.qopt.multi .dot{border-radius:5px}
.qopt.sel{border:2px solid var(--green);background:var(--green-soft);padding:11.5px 13.5px}
.qopt.sel .dot{background:var(--green);border-color:var(--green);color:var(--on-green)}
.qopt.right{border-color:var(--done);background:var(--green-soft)}
.qopt.right .dot{background:var(--done);border-color:var(--done)}
.qopt.right.missed{background:var(--card)}   /* richtig, aber nicht gewählt: leeres Kästchen mit Rand --done und Wort „Auch richtig“ */
.qopt.right.missed .dot{background:var(--card);color:var(--done)}
.qopt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.qopt.wrong .dot{background:var(--bad);border-color:var(--bad)}
.qopt:disabled{cursor:default;opacity:1}
.qopt-k{flex:0 0 auto;font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600}
.qopt.right .qopt-k{color:var(--green)}
.qopt.wrong .qopt-k{color:var(--bad)}
.qfb{display:flex;gap:10px;align-items:flex-start;margin-top:2px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.qfb > .ic{flex:0 0 26px;width:26px;height:26px;padding:var(--sp-1);border-radius:50%;color:var(--card);stroke-width:3.2}
.qfb.ok > .ic{background:var(--done)} .qfb.no > .ic{background:var(--bad)}
.qfb p{margin:0;min-width:0}
.qfb.ok b{color:var(--done)} .qfb.no b{color:var(--bad)}
.qscore{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:var(--sp-4);display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--sp-1) 14px;align-items:center}
.qscore-ic{grid-row:1 / 3;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--green-soft);color:var(--green);font-size:22px}
.qscore b{font-family:var(--f-head);font-size:var(--fs-section);line-height:var(--lh-section);color:var(--green)}
.qscore p{margin:0;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.qscore .btn{grid-column:1 / -1;justify-self:start;margin-top:var(--sp-2)}

/* Große Systemschrift (gleiche em-Grenze wie in css/app.css): Etappen-Balken zweispaltig, damit die Namen Platz haben */
@media (max-width:19.9em){.kbar{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Schmale Frage-Karte (320 px oder große Schrift; em = Schriftgröße der Karte): „Richtig“/„Falsch“ unter den Antworttext statt daneben */
.qcard{container:qcard / inline-size}
@container qcard (max-width:20em){
  .qopt{grid-template-columns:24px minmax(0,1fr)}
  .qopt-k{grid-column:2}
}
@media (prefers-reduced-motion:no-preference){
  .kseg-b i,.kday-bar i{transition:width var(--t-slow) var(--ease)}
  a.kday,.kseg{transition:opacity var(--t-fast) var(--ease)}
  a.kday:active,.kseg:active{opacity:.7}
  .qopt{transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
}