/* Lernbereich der Lernallianz im Gestaltungssystem fundament-ui (Etappe 2, v49).
   Alle Farben, Abstände und Radien kommen aus den Variablen des Pakets
   (--p, --p-knopf, --p-text, --p-hauch, --p-zart, --p-rand, --text, --flaeche …).
   Leseregel K9: Fliesstext 17 px, Textspalte höchstens 880 px (Klasse .lesen). */

/* ------------------------------------------------------------ Brücke
   Ältere Vorlagen und Teilvorlagen (Vorschau, Meine Organisation, Grafiken als
   Aufgabe) nutzen noch die Namen von vor v49. Sie zeigen auf die Paketwerte. */
body.lx{
  --marke:var(--p); --marke-text:var(--p-text); --marke-bg:var(--p-zart); --marke-line:var(--p-rand);
  --marke-dunkel:color-mix(in oklab,var(--p) 72%,black);
  --akzent:var(--k); --ink:var(--text); --grau:var(--text-2); --muted:var(--text-3);
  --flaeche2:var(--flaeche-2); --linie2:var(--linie-stark); --ring-rest:var(--flaeche-2);
  --rose:var(--fehler); --rose-bg:var(--fehler-hg); --amber:var(--warn); --amber-bg:var(--warn-hg); --ok-bg:var(--ok-hg);
  --font:var(--schrift); --display:var(--schrift-titel);
}
.lx .inhalt{max-width:1360px}
.lx .ic.i14{width:14px; height:14px} .lx .ic.i16{width:16px; height:16px} .lx .ic.i18{width:18px; height:18px}
.lx .fade{animation:lx-auf .3s ease both}
@keyframes lx-auf{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}

/* ------------------------------------------------------------ Allgemeine Bausteine von früher */
.lx .eyebrow{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); font-weight:600}
.lx .lead{color:var(--text-2); font-size:15px}
.lx .back{display:inline-flex; align-items:center; gap:6px; color:var(--text-2); font-size:14px; text-decoration:none; width:fit-content}
.lx .back:hover{color:var(--p-text)}
.lx .card{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross); padding:22px; min-width:0}
.lx .grid{display:grid; gap:12px}
.lx .tile{display:block; background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r); padding:16px 18px; text-decoration:none; color:var(--text); transition:border-color .15s,background .15s}
.lx .tile:hover{border-color:var(--p-rand); background:var(--p-hauch)}
.lx .tile .t{font-weight:600; display:block}
.lx .tile .s{display:block; font-size:13.5px; color:var(--text-2); margin-top:2px}
.lx .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 18px; border-radius:var(--r); border:1px solid transparent; background:var(--p-knopf); color:var(--p-auf); font-weight:600; font-size:15px; line-height:1; cursor:pointer; text-decoration:none; box-shadow:var(--sch-1); transition:background .15s}
.lx .btn:hover{background:var(--p-hover)}
.lx .btn-ghost{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 18px; border-radius:var(--r); border:1px solid var(--linie-stark); background:var(--flaeche); color:var(--text); font-weight:600; font-size:15px; line-height:1; cursor:pointer; text-decoration:none}
.lx .btn-ghost:hover{background:var(--p-hauch); border-color:var(--p-rand)}
.lx .typ{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:3px 10px; border-radius:var(--r-rund); background:var(--p-zart); color:var(--p-text); width:fit-content}
.lx .db-zaehler{font-size:13px; color:var(--text-3)}
.lx h1:not([class]){font-family:var(--schrift-titel); font-weight:var(--titel-gewicht); letter-spacing:var(--titel-sperrung); font-size:var(--g-28)}
.lx .abschnitt{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.lx .abschnitt h2{font-size:var(--g-18); font-weight:650; letter-spacing:-.01em}

/* ------------------------------------------------------------ Startseite */
.begruessung{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; padding:22px 24px; border-radius:var(--r-gross); background:var(--p-hauch); border:1px solid var(--p-rand)}
.begruessung > div{display:grid; gap:6px; min-width:0; flex:1 1 320px}
.begruessung h1{font-family:var(--schrift-titel); font-weight:var(--titel-gewicht); letter-spacing:var(--titel-sperrung); font-size:clamp(24px,3.2vw,32px)}
.begruessung p{color:var(--text-2)}
.begruessung .weiter-was{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:14px; color:var(--text-2)}
.begruessung .weiter-was b{color:var(--text)}
.begruessung .balken{width:min(260px,100%)}
.lx-raster-start{display:grid; gap:20px; align-items:start; container:lxstart / inline-size}
@media (min-width:1180px){ .lx-raster-start{grid-template-columns:minmax(0,1fr) 300px} }
.wochenstand .zahlgross{font-size:36px; font-weight:700; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.wochenstand .reihe{align-items:baseline}

/* ------------------------------------------------------------ Kurskarten */
.kat-blau{--kf:#0d4f9e; --kf-bg:#eef4fb; --kf-fg:#0d4f9e}
.kat-gold{--kf:#c99a1b; --kf-bg:#fbf5e4; --kf-fg:#7a5f0c}
.kat-grau{--kf:#8a94a3; --kf-bg:#eef1f5; --kf-fg:#55606e}
.kat-gruen{--kf:#15803d; --kf-bg:#e8f5ee; --kf-fg:#15803d}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) :is(.kat-blau,.kat-gold,.kat-grau,.kat-gruen){--kf-bg:color-mix(in oklab,var(--kf) 22%,var(--flaeche)); --kf-fg:color-mix(in oklab,var(--kf) 45%,white)} }
:root[data-theme="dark"] :is(.kat-blau,.kat-gold,.kat-grau,.kat-gruen){--kf-bg:color-mix(in oklab,var(--kf) 22%,var(--flaeche)); --kf-fg:color-mix(in oklab,var(--kf) 45%,white)}
.kk-raster{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.kk{display:flex; flex-direction:column; gap:12px; background:var(--flaeche); border:1px solid var(--linie); border-top:4px solid var(--kf); border-radius:var(--r-gross); padding:16px 18px 16px; text-decoration:none; color:var(--text); box-shadow:var(--sch-1); transition:border-color .15s,box-shadow .15s,transform .15s; min-width:0}
.kk:hover{box-shadow:var(--sch-2); border-color:var(--p-rand); border-top-color:var(--kf); transform:translateY(-1px)}
.kk[hidden]{display:none}
.kk-oben{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.kk-kat{display:inline-flex; font-size:12px; font-weight:600; padding:3px 9px; border-radius:var(--r-rund); background:var(--kf-bg); color:var(--kf-fg); width:fit-content}
.kk-name{font-family:var(--schrift-titel); font-weight:var(--titel-gewicht); letter-spacing:var(--titel-sperrung); font-size:18px; line-height:1.25; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word}
.kk-meta{font-size:13.5px; color:var(--text-2)}
.kk .balken i{background:var(--kf)}
.kk-stand{display:flex; justify-content:space-between; gap:8px; font-size:13.5px; color:var(--text-2)}
.kk-stand b{color:var(--text); font-variant-numeric:tabular-nums}
.kk-fuss{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; padding-top:2px}
.kk-los{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:14.5px; color:var(--p-text)}
.kk.ist-aktiv{box-shadow:0 0 0 2px var(--p-rand),var(--sch-1)}

/* Filter als Chips */
.lx-filter{display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center}
.lx-filter .chips{gap:6px}
.lx-filter .chip-w{min-height:34px}
.lx-filter .chip-w[aria-pressed="true"]{background:var(--p-zart); border-color:var(--p-knopf); color:var(--p-text)}
.lx-filter .chip-w:is(.kat-blau,.kat-gold,.kat-grau,.kat-gruen)[aria-pressed="true"]{background:var(--kf-bg); border-color:var(--kf); color:var(--kf-fg)}
.lx-filter .chip-w:is(.kat-blau,.kat-gold,.kat-grau,.kat-gruen)::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--kf)}

/* ------------------------------------------------------------ Kursseite */
.lx-kurs-kopf{display:grid; gap:10px}
.lx-kurs-kopf h1{font-family:var(--schrift-titel); font-weight:var(--titel-gewicht); letter-spacing:var(--titel-sperrung); font-size:var(--g-28); hyphens:auto; -webkit-hyphens:auto}
.lx-kurs-kopf .beschreibung{color:var(--text-2); max-width:72ch}
.lx-kennzahlen{display:flex; flex-wrap:wrap; gap:8px}
.lx-weiter{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; padding:16px 18px; border-radius:var(--r-gross); background:var(--p-hauch); border:1px solid var(--p-rand)}
.lx-weiter b{display:block}
.lx-weiter small{color:var(--text-2); font-size:14px}
.lx-modi{display:grid; gap:16px}
@media (min-width:720px){ .lx-modi{grid-template-columns:1fr 1fr} }
.lx-modus{display:flex; flex-direction:column; gap:12px; padding:20px; background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross); box-shadow:var(--sch-1); position:relative}
.lx-modus.empfohlen{border-color:var(--p-knopf); box-shadow:0 0 0 1px var(--p-knopf),var(--sch-1)}
.lx-modus h2{display:flex; align-items:center; gap:10px; font-family:var(--schrift-titel); font-weight:var(--titel-gewicht); letter-spacing:var(--titel-sperrung); font-size:20px}
.lx-modus h2 .ikone{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--p-zart); color:var(--p-text); flex:none}
.lx-modus p{color:var(--text-2); font-size:15px}
.lx-modus form{margin-top:auto}
.lx-modus .wahl{gap:8px}
.lx-modus .wahl button{flex:1 1 90px; display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 14px; border:1px solid var(--linie-stark); border-radius:var(--r); background:var(--flaeche); font-weight:600; font-size:15px; cursor:pointer; color:var(--text)}
.lx-modus .wahl button:hover{border-color:var(--p-rand); background:var(--p-hauch)}
.lx-modus .wahl button.vorschlag{background:var(--p-zart); border-color:var(--p-knopf); color:var(--p-text)}
.lx-modus .wahl-titel{font-size:13px; font-weight:600; color:var(--text-2)}
.lx-modus .et{position:absolute; top:-11px; left:18px}
.lx-video{max-width:880px; border:1px solid var(--linie); border-radius:var(--r-gross); overflow:hidden; background:#000; line-height:0}
.lx-video video{width:100%; height:auto; display:block}

/* Kursstruktur: Lektionen mit Themen und Stand */
.lx-struktur{display:grid; gap:0}
.lx-struktur .lek{padding:14px 0 6px; font-weight:650; font-size:15.5px; display:flex; gap:10px; align-items:baseline; border-top:1px solid var(--linie)}
.lx-struktur .lek:first-child{border-top:0; padding-top:0}
.lx-struktur .lek small{font-weight:400; color:var(--text-3); font-size:13px}

/* ------------------------------------------------------------ Stand je Thema */
.st-liste{display:grid; gap:2px}
.st-lek{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); font-weight:600; padding:12px 0 4px}
.st-lek:first-child{padding-top:0}
.st-zeile{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:4px 10px; align-items:center; padding:8px 8px; margin:0 -8px; border-radius:10px}
.st-zeile.aktuell{background:var(--p-zart)}
.st-ic{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--linie-stark); color:var(--text-3); background:var(--flaeche)}
.st-ic .ic{width:13px; height:13px}
.st-zeile.done .st-ic{background:var(--ok); border-color:var(--ok); color:var(--flaeche)}
.st-zeile.aktuell .st-ic{border-color:var(--p-knopf); color:var(--p-text)}
.st-name{font-size:14.5px; line-height:1.3; min-width:0; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word}
.st-zeile.done .st-name{color:var(--text-2)}
.st-stufe{font-size:12.5px; color:var(--text-2); white-space:nowrap}
.st-zeile.done .st-stufe{color:var(--ok); font-weight:600}
.st-bahn{grid-column:2 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:3px}
.st-bahn span{height:5px; border-radius:3px; background:var(--flaeche-2)}
.st-bahn span.st-voll{background:var(--p-knopf)}
.st-bahn span.st-halb{background:linear-gradient(to right,var(--p-knopf) 50%,var(--flaeche-2) 50%)}
.st-zeile.done .st-bahn span{background:var(--ok)}
.lx-seite .karte-rumpf{max-height:min(68vh,720px); overflow:auto; overscroll-behavior:contain}
.lx-seite .karte-kopf p{font-size:13.5px; color:var(--text-2)}

/* ------------------------------------------------------------ Lernen: Aufbau */
.lx-lernen{container:lxlernen / inline-size; display:grid; gap:16px; min-width:0}
.lx-raster{display:grid; gap:20px; align-items:start; min-width:0}
@container lxlernen (min-width:960px){
  .lx-raster{grid-template-columns:minmax(0,1fr) 300px}
  .lx-seite{position:sticky; top:84px}
}
.lx-haupt{min-width:0; display:grid; gap:16px}

/* Kursnavigation in der Seitenleiste (Durcharbeiten) */
.seitenleiste.kn{gap:0; padding:14px 10px 24px}
.kn .kn-zurueck{font-size:14px; color:var(--text-2); padding:6px 12px}
.kn .kn-zurueck .ic{width:16px; height:16px}
.kn-kurs{padding:8px 12px 4px; font-weight:650; font-size:15.5px; line-height:1.3; hyphens:auto; -webkit-hyphens:auto}
.kn-fort{padding:6px 12px 2px; font-size:13px; color:var(--text-2)}
.kn-fort-balken{margin:4px 12px 10px}
.kn-list{display:grid; gap:1px}
.kn-lek{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); font-weight:600; padding:14px 12px 4px; line-height:1.35}
.seitenleiste .kn-thema,.kn-oben .kn-thema{display:flex; align-items:flex-start; gap:9px; width:100%; padding:8px 12px; border-radius:10px; border:0; background:none; color:var(--text-2); font:inherit; font-size:14.5px; font-weight:500; line-height:1.35; text-align:left; cursor:default}
.seitenleiste button.kn-thema,.kn-oben button.kn-thema{cursor:pointer}
.seitenleiste button.kn-thema:hover,.kn-oben button.kn-thema:hover{background:var(--p-hauch); color:var(--text)}
.kn-thema.current{background:var(--p-zart)!important; color:var(--p-text)!important; font-weight:600}
.kn-thema.done{color:var(--text-2)}
.kn-ic{width:18px; height:20px; display:inline-grid; place-items:center; flex:none}
.kn-ic .ic{width:15px; height:15px}
.kn-thema.done .kn-ic .ic{color:var(--ok)}
.kn-punkt{width:7px; height:7px; border-radius:50%; background:var(--linie-stark)}
.kn-thema.started .kn-punkt{background:var(--p-rand); box-shadow:0 0 0 2px var(--p-zart)}
.kn-name{flex:1; min-width:0; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word}
.kn-min{margin-left:auto; padding-left:6px; font:500 11.5px var(--mono); color:var(--text-3); flex:none; padding-top:2px}
.kn-min::after{content:" Min"}
/* Handy: Kursinhalt oberhalb der Lektion, aufklappbar */
.kn-oben{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross)}
.kn-oben > summary{display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; list-style:none; font-weight:600; font-size:15px}
.kn-oben > summary::-webkit-details-marker{display:none}
.kn-oben > summary .ic{transition:transform .15s; color:var(--text-3)}
.kn-oben[open] > summary .ic.auf{transform:rotate(90deg)}
.kn-oben > summary small{margin-left:auto; font-weight:500; color:var(--text-2); font-size:13px}
.kn-oben .kn-innen{padding:0 6px 10px; max-height:55vh; overflow:auto; border-top:1px solid var(--linie)}

/* ------------------------------------------------------------ Lektion (Theorie) */
.lx-lektion{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross); box-shadow:var(--sch-1); min-width:0}
.lx-lektion-kopf{padding:18px 24px 16px; border-bottom:1px solid var(--linie); display:grid; gap:10px; background:var(--p-hauch); border-radius:var(--r-gross) var(--r-gross) 0 0}
.lx-lektion-kopf h2{font-family:var(--schrift-titel); font-weight:var(--titel-gewicht); letter-spacing:var(--titel-sperrung); font-size:clamp(21px,2.4vw,26px); hyphens:auto; -webkit-hyphens:auto}
.lx-lektion-rumpf{padding:20px 24px 8px}
.lx-lektion-rumpf.lesen{max-width:calc(var(--lesebreite) + 48px); gap:28px}
.lx-lektion-fuss{display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; padding:16px 24px 20px; border-top:1px solid var(--linie); margin-top:12px}
@media (max-width:600px){ .lx-lektion-kopf,.lx-lektion-rumpf,.lx-lektion-fuss{padding-inline:16px} }

/* Theorieteile */
.lx-teil{display:grid; gap:12px; min-width:0}
.lx-teil + .lx-teil{padding-top:24px; border-top:1px solid var(--linie)}
.teil{min-width:0; display:grid; gap:12px}
.teil > h2{font-family:var(--schrift-titel); font-weight:var(--titel-gewicht); letter-spacing:var(--titel-sperrung); font-size:21px; margin:0}
.lesen .teil,.teil{font-size:var(--lesegroesse); line-height:1.65}
.teil p{margin:0 0 .75em}
.teil p:last-child{margin-bottom:0}
.teil ul,.teil ol{margin:0 0 .75em; padding-left:1.3em}
.teil li + li{margin-top:4px}
.teil h3,.teil h4{font-family:var(--schrift-titel); font-weight:var(--titel-gewicht); margin:18px 0 6px; font-size:18px}
.teil img,.teil iframe{border-radius:var(--r); max-width:100%}
.teil img{height:auto}
.teil table{border-collapse:collapse; width:100%; margin:12px 0; font-size:15px; display:block; overflow-x:auto}
.teil th,.teil td{border:1px solid var(--linie); padding:7px 10px; text-align:left; vertical-align:top}
.teil th{background:var(--p-hauch); font-weight:600}
.teil [style*="background"]{color:#1f2937}
.teil [style*="background"] strong{color:#111827}
.teil .gr{margin:4px 0}
a.gesetz{font-family:var(--mono); font-size:.86em; background:var(--flaeche-2); border:1px solid var(--linie); border-radius:6px; padding:1px 6px; text-decoration:none; color:var(--p-text); white-space:nowrap}
a.gesetz:hover{border-color:var(--p-knopf)}
.teil-links{list-style:none; margin:4px 0 0; padding:12px 0 0; border-top:1px dashed var(--linie); display:grid; gap:6px; font-size:14.5px}
.teil-links li,.wf-liste li{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.wf-art{font:600 10.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--p-text); background:var(--p-zart); border-radius:5px; padding:2px 7px; flex:none}
.wf-zweck{font-size:13px; color:var(--text-2)}
.weiterfuehrend{margin-top:4px; padding:16px 18px; border-radius:var(--r); background:var(--flaeche-2)}
.wf-kopf{margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); font-weight:600}
.wf-liste{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:15px}
.teil-datei{display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid var(--linie); border-radius:var(--r); background:var(--flaeche-2); color:var(--text); text-decoration:none}
.teil-datei:hover{border-color:var(--p-knopf)}
.teil-datei span{display:flex; flex-direction:column; gap:2px; min-width:0}
.teil-datei small{color:var(--text-2); font-size:12.5px; overflow:hidden; text-overflow:ellipsis}
.teil-datei .teil-datei-los{margin-left:auto; color:var(--p-text); font-weight:600; font-size:14px}
/* Medien */
.medium-yt{position:relative; padding-bottom:56.25%; border-radius:var(--r); overflow:hidden; background:#000}
.medium-yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.medium-ende{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r); padding:20px; text-align:center}
.medium-ende[hidden]{display:none}
.medium-ende-titel{margin:0; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:17px; color:var(--text)}
.medium-ende-titel .ic{color:var(--ok)}
.medium-ende-knoepfe{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.medium-audio{display:flex; align-items:center; gap:12px; background:var(--flaeche-2); border:1px solid var(--linie); border-radius:var(--r); padding:12px 16px}
.medium-audio .ic{color:var(--p-text); flex:none}
.medium-audio audio{flex:1; min-width:0; width:100%}
.quellen{font-size:13.5px; color:var(--text-2)}

/* ------------------------------------------------------------ Trainieren */
.tr-kopf{display:grid; gap:10px; padding:14px 18px; background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross); box-shadow:var(--sch-1)}
.tr-zeile{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px}
.tr-zu{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:var(--text-2); flex:none; text-decoration:none}
.tr-zu:hover{background:var(--p-hauch); color:var(--text)}
.tr-kurs{flex:1 1 200px; min-width:0}
.tr-kurs b{display:block; font-size:15.5px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tr-kurs small{display:block; font-size:13px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tr-zahl{font-size:13px; color:var(--text-2); white-space:nowrap}
.q-seg{display:flex; gap:4px}
.q-seg span{flex:1; height:6px; border-radius:var(--r-rund); background:var(--flaeche-2); min-width:3px}
.q-seg span.f{background:var(--p-knopf)}
.q-seg span.s{background:var(--p-rand)}
.q-seg span.cur{background:var(--k); box-shadow:0 0 0 2px color-mix(in oklab,var(--k) 30%,transparent)}
.tr-sitzung{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13.5px; color:var(--text-2)}
.tr-sitzung b{color:var(--text); font-variant-numeric:tabular-nums}
.tr-punkte{display:inline-flex; gap:4px; vertical-align:middle; margin-right:4px}
.tr-punkte i{width:18px; height:6px; border-radius:var(--r-rund); background:var(--flaeche-2)}
.tr-punkte i.f{background:var(--k)}

.lx-aufgabe{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross); box-shadow:var(--sch-1); min-width:0}
.lx-aufgabe-kopf{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; padding:14px 22px; border-bottom:1px solid var(--linie); background:var(--p-hauch); border-radius:var(--r-gross) var(--r-gross) 0 0}
.lx-aufgabe-rumpf{padding:20px 22px 22px; display:grid; gap:4px; min-width:0}
@media (max-width:600px){ .lx-aufgabe-kopf,.lx-aufgabe-rumpf{padding-inline:16px} }
.q-aktionen{display:flex; align-items:center; gap:10px; margin-top:18px; flex-wrap:wrap}
.q-enter{font-size:12.5px; color:var(--text-3); margin-left:auto}
@media (max-width:600px){ .q-enter{display:none} .q-aktionen .k-primaer{flex:1 1 100%} }

/* Aufgabentypen */
.frage{font-size:20px; line-height:1.4; margin:2px 0 6px; font-weight:650; letter-spacing:-.01em; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word}
.hint{font-size:13.5px; color:var(--text-3); margin:2px 0 0}
.q-grafik{margin:0 0 14px}
.opts{display:grid; gap:10px; margin-top:16px; counter-reset:opt}
.opt{display:flex; align-items:center; gap:13px; border:1px solid var(--linie-stark); border-radius:var(--r); padding:13px 16px; cursor:pointer; background:var(--flaeche); transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--p-rand); background:var(--p-hauch)}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt:has(input:focus-visible){outline:2px solid var(--fokus); outline-offset:2px}
.box{width:30px; height:30px; border-radius:9px; border:1px solid var(--linie-stark); flex:none; display:flex; align-items:center; justify-content:center; background:var(--flaeche-2); color:var(--text-2); font-weight:700; font-size:13.5px}
.box svg{display:none} .box::before{counter-increment:opt; content:counter(opt,upper-alpha)}
.opt:has(input:checked){border-color:var(--p-knopf); background:var(--p-zart)}
.opt:has(input:checked) .box{background:var(--p-knopf); border-color:var(--p-knopf); color:var(--p-auf)}
.ot{font-size:16px; font-weight:500; min-width:0; overflow-wrap:break-word}
.fliess{font-size:18px; line-height:2.1; margin-top:12px}
.mw input{position:absolute; opacity:0}
.mw span{cursor:pointer; border-radius:6px; padding:2px 5px; transition:background .12s,color .12s}
.mw:hover span{background:var(--p-zart)}
.mw input:focus-visible + span{outline:2px solid var(--fokus); outline-offset:1px}
.mw input:checked + span{background:var(--p-knopf); color:var(--p-auf)}
.slotline{font-size:18px; line-height:2.5; margin:6px 0 0}
.slot{display:inline-flex; align-items:center; justify-content:center; min-width:96px; min-height:36px; border:2px dashed var(--p-rand); border-radius:10px; padding:0 6px; margin:0 3px; vertical-align:middle; background:var(--p-hauch)}
.bank{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding:12px; background:var(--flaeche-2); border:1px solid var(--linie); border-radius:var(--r); min-height:56px}
.lx .chip{cursor:grab; background:var(--flaeche); border:1px solid var(--linie-stark); border-radius:10px; padding:7px 12px; font-size:15.5px; color:var(--text); box-shadow:var(--sch-1)}
.lx .chip:active{cursor:grabbing}
.field{width:100%; max-width:300px; min-height:46px; border:1px solid var(--linie-stark); background:var(--flaeche); color:var(--text); border-radius:10px; padding:0 14px; font-size:17px; margin-top:12px}
.field:focus{outline:none; border-color:var(--p-knopf); box-shadow:0 0 0 3px var(--p-zart)}
.lin{display:inline-block; width:112px; border:none; border-bottom:2px solid var(--p-knopf); background:var(--p-hauch); border-radius:6px 6px 0 0; color:var(--p-text); font-weight:600; text-align:center; font-size:17px; padding:2px 4px}
.lin:focus{outline:none; background:var(--p-zart)}
.rrow{display:flex; align-items:center; gap:12px; border:1px solid var(--linie-stark); border-radius:var(--r); padding:11px 14px; background:var(--flaeche); font-size:16px}
.rrow.sortable-chosen{border-color:var(--p-knopf); background:var(--p-zart)}
.grip{color:var(--text-3); cursor:grab; display:inline-flex}
.rrow .pos{width:26px; height:26px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--p-zart); color:var(--p-text); font-size:13px; font-weight:700}
/* Zuordnung */
.zo-liste{display:flex; flex-direction:column; gap:10px; margin:14px 0 18px}
.zo-zeile{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.zo-begriff{flex:1 1 200px; font-weight:600; font-size:16px}
.zo-pfeil{color:var(--text-3); flex:none}
.zo-ziel{flex:1 1 220px; min-height:46px; border:2px dashed var(--linie-stark); border-radius:var(--r); display:flex; align-items:center; padding:4px; transition:border-color .15s,background .15s; cursor:pointer}
.zo-ziel:focus{outline:2px solid var(--fokus); outline-offset:2px}
.zo-ziel.voll{border-style:solid; border-color:var(--p-knopf); background:var(--p-hauch)}
.zo-ziel .zo-chip{margin:0; width:100%; text-align:left}
.zo-bank{display:flex; flex-wrap:wrap; gap:8px; min-height:52px; padding:10px; border-radius:var(--r); background:var(--flaeche-2); border:1px solid var(--linie)}
.zo-chip{font:inherit; cursor:grab; min-height:42px}
.zo-chip.gewaehlt{outline:3px solid var(--k); outline-offset:1px}
@media(max-width:560px){ .zo-pfeil{display:none} .zo-zeile{gap:6px} }
@media(min-width:1100px){
  .zo{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:18px; align-items:start}
  .zo-liste{margin:0}
  .zo-bank{position:sticky; top:84px; flex-direction:column; align-items:stretch}
  .zo-bank .zo-chip{text-align:left}
}
.gr-luecke-feld{width:7em; min-height:34px; border:2px solid var(--p-knopf); border-radius:8px; background:var(--flaeche); color:var(--text); padding:0 8px; font:inherit; text-align:right}

/* ------------------------------------------------------------ Rückmeldung */
.lx-rueck{border-radius:var(--r-gross); padding:20px 22px; display:grid; gap:12px; border:1px solid var(--linie); background:var(--flaeche); box-shadow:var(--sch-1)}
.lx-rueck.ok{border-color:color-mix(in oklab,var(--ok) 45%,var(--linie)); background:var(--ok-hg)}
.lx-rueck.halb{border-color:color-mix(in oklab,var(--warn) 45%,var(--linie)); background:var(--warn-hg)}
.lx-rueck.no{border-color:color-mix(in oklab,var(--fehler) 45%,var(--linie)); background:var(--fehler-hg)}
.lx-rueck .h{display:flex; align-items:center; gap:10px; font-size:19px; font-weight:700; letter-spacing:-.01em}
.lx-rueck .h .ic{width:24px; height:24px}
.lx-rueck.ok .h{color:var(--ok)} .lx-rueck.halb .h{color:var(--warn)} .lx-rueck.no .h{color:var(--fehler)}
.lx-rueck p{color:var(--text)}
.lx-rueck .leise{color:var(--text-2); font-size:15px}
.lx-rueck .reihe{margin-top:4px}
.lx-erkl{background:var(--flaeche); border-radius:var(--r); padding:12px 14px; font-size:15.5px; display:grid; gap:4px}
.lx-erkl b{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3)}
.lx-gewaehlt{display:grid; gap:8px}
.lx-gewaehlt .frage-kurz{font-weight:600; font-size:15.5px}
.lx-gewaehlt ol{list-style:none; margin:0; padding:0; display:grid; gap:6px; counter-reset:opt}
.lx-gewaehlt li{display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--linie); border-radius:10px; background:var(--flaeche); font-size:15px}
.lx-gewaehlt li::before{counter-increment:opt; content:counter(opt,upper-alpha); width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-weight:700; font-size:12.5px; background:var(--flaeche-2); color:var(--text-2); flex:none}
.lx-gewaehlt li span{flex:1; min-width:0}
.lx-gewaehlt li .et{margin-left:auto}
.lx-gewaehlt li.richtig{border-color:var(--ok); background:color-mix(in oklab,var(--ok-hg) 70%,var(--flaeche))}
.lx-gewaehlt li.richtig::before{background:var(--ok); color:var(--flaeche)}
.lx-gewaehlt li.falsch{border-color:var(--fehler); background:var(--fehler-hg)}
.lx-gewaehlt li.falsch::before{background:var(--fehler); color:var(--flaeche)}
.lx-gewaehlt li.fehlt{border-style:dashed; border-color:var(--ok)}
.loesung{color:var(--text); font-size:15px}
.loesung ul{margin:6px 0 0; padding-left:20px}
/* Stufe der Fragen von Hand wählen */
.lx-stufe{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:14px; color:var(--text-2)}
.segs{display:flex; gap:6px}
.seg{width:42px; height:12px; border-radius:6px; background:var(--linie-stark); border:0; padding:0; cursor:pointer}
.seg:hover{box-shadow:0 0 0 3px var(--p-zart)}
.seg.an{background:var(--p-knopf)}
.serie{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; padding:3px 10px; border-radius:var(--r-rund); background:var(--warn-hg); color:var(--warn)}
.auffr{display:grid; gap:12px}

/* ------------------------------------------------------------ Fortschritt */
.lx-kpi{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.lx-kpi .karte{padding:16px 18px; gap:4px}
.lx-kpi .zahlgross{font-size:32px; font-weight:700; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums}
.lx-kpi small{font-size:13.5px; color:var(--text-2)}
.fs-liste{display:grid; gap:12px}
.fs-kurs{background:var(--flaeche); border:1px solid var(--linie); border-left:4px solid var(--kf); border-radius:var(--r-gross); padding:16px 18px; display:grid; gap:10px; box-shadow:var(--sch-1)}
.fs-kopf{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:8px 16px}
.fs-kopf a{color:var(--text); text-decoration:none; font-weight:650; font-size:16.5px}
.fs-kopf a:hover{color:var(--p-text)}
.fs-pct{font-size:20px; font-weight:700; font-variant-numeric:tabular-nums}
.fs-kurs .balken i{background:var(--kf)}
.fs-meta{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13.5px; color:var(--text-2); align-items:center}
.fs-kurs details > summary{cursor:pointer; font-size:14px; font-weight:600; color:var(--p-text); list-style:none; display:inline-flex; align-items:center; gap:6px}
.fs-kurs details > summary::-webkit-details-marker{display:none}
.fs-kurs details > summary .ic{transition:transform .15s}
.fs-kurs details[open] > summary .ic{transform:rotate(90deg)}
.fs-kurs details .st-liste{margin-top:10px; padding:4px 8px 0; border-top:1px solid var(--linie)}

/* ------------------------------------------------------------ Anmeldung und Einladung */
.lx-zugang{width:100%; max-width:460px; margin:min(6vh,48px) auto 0; display:grid; gap:18px}
.lx-zugang .karte{padding:24px; gap:18px}
.lx-zugang h1{font-family:var(--schrift-titel); font-weight:var(--titel-gewicht); letter-spacing:var(--titel-sperrung); font-size:26px}
.lx-zugang .formular{max-width:none}
.lx-zugang .k-primaer{width:100%}
.lx-zugang .leise-text{font-size:14.5px}
/* Theorie im Seitenblatt: breiter als ein normales Blatt, Leseregel bleibt */
dialog.blatt#theorie-blatt{max-width:min(760px,100vw)}
#theorie-blatt .dlg-rumpf{color:var(--text)}
/* Kinder des Inhaltsrasters dürfen schmaler werden als ihr Inhalt,
   sonst schiebt eine breite Tabelle die ganze Seite seitlich (Vorschlag P-25). */
.lx .inhalt > *{min-width:0}
/* Versteckte Beschriftungen (.vh) in Tabellen mit seitlichem Scrollen bleiben in der Hülle */
.lx .org-tabelle-box,.lx .tab-huelle{position:relative}