/* Lernhelden – Lernpfad und Wochenziele. */
/* ---------- 10b. Lernpfad und Wochenziele ---------- */
.lernpfad{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:start}
.lernpfad>*{min-width:0}
.lernpfad h3{margin:0 0 4px;font-size:1.2rem}
.wochenziele{display:grid;gap:10px}
/* Wochenziele als Ringe (js/features/lernpfad.js ring). --offset-von → --offset, sobald sichtbar (.los) */
.wochenziel-ringe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;text-align:center}
.wochenziel-ring{display:grid;justify-items:center;align-content:start;gap:6px;min-width:0}
.ring-grafik{position:relative;display:block;width:min(100%,108px);aspect-ratio:1}
.ring-grafik svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.ring-spur{fill:none;stroke:var(--soft);stroke-width:8}
.ring-wert{fill:none;stroke:var(--brand);stroke-width:8;stroke-linecap:round;stroke-dasharray:163.37;
  stroke-dashoffset:var(--offset-von,163.37);transition:stroke-dashoffset calc(var(--dauer-lang) * 2) var(--kurve-standard)}
.wochenziel-ring.los .ring-wert{stroke-dashoffset:var(--offset,163.37)}
.wochenziel-ring.erreicht .ring-wert{stroke:var(--good)}
.ring-zahl{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:1.3rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.ring-zahl small{font-size:.7em;color:var(--muted);font-weight:800}
.ring-titel{font-weight:800;font-size:.9rem;line-height:1.25}
.wochenziel-jubel{margin:4px 0 0;font-weight:900;color:var(--good)}
.lernpfad-karte{grid-column:span 2;display:grid;gap:8px}
@media (max-width:760px){.lernpfad-karte{grid-column:auto}}
.lernpfad-stand{margin:0;font-weight:800}
.lernpfad-balken{height:14px}
.lernpfad-balken .stat-bar-fill{background:var(--good)}
.lernpfad-bereich{border:2px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.lernpfad-bereich summary{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 14px;font-weight:800;cursor:pointer;min-height:44px}
.lernpfad-zaehler{color:var(--muted);font-size:.9rem}
.lernpfad-liste{list-style:none;margin:0;padding:0 10px 10px;display:grid;gap:6px;counter-reset:station}
.station-knopf{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;text-align:left;padding:8px 12px;min-height:44px;border:2px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);font:inherit;cursor:pointer}
@media (hover:hover){.station-knopf:hover{border-color:var(--brand)}}
.station-icon{font-size:1.4rem}
.station-titel{font-weight:800;min-width:0;overflow-wrap:anywhere}
.station-zustand{font-size:.85rem;font-weight:800;color:var(--muted);white-space:nowrap}
.station-geschafft .station-knopf{border-color:var(--good-line);background:var(--good-soft)}
.station-geschafft .station-zustand{color:var(--good)}

/* Lernpfad als Weg: gepunktete Linie durch die Stationen, Symbole als Wegmarken */
.lernpfad-weg{position:relative;gap:12px;padding:8px 10px 14px}
.lernpfad-weg::before{content:"";position:absolute;left:calc(10px + 8px + 22px - 2px);top:24px;bottom:34px;border-left:4px dotted var(--line)}
.lernpfad-weg .station{position:relative}
.lernpfad-weg .station-knopf{grid-template-columns:auto 1fr auto auto;border-radius:999px;padding:6px 14px 6px 8px}
.lernpfad-weg .station-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface);border:3px solid var(--line);font-size:1.3rem}
.lernpfad-weg .station-angefangen .station-icon{border-color:var(--warn-line);background:var(--warn-soft)}
.lernpfad-weg .station-geschafft .station-icon{border-color:var(--good);background:var(--good-soft)}
.station.frisch .station-icon{animation:bw-aufploppen var(--dauer-lang) var(--kurve-feder) var(--dauer-mittel) both}
.station.frisch .station-knopf{border-color:var(--good)}
.station-maskottchen{font-size:1.4rem;line-height:1}