/* KI-Kurs „Anschluss behalten“. Baut auf den Tokens aus tools/shell/site.css auf; die
   Linienfarben sind die einzigen kräftigen Farben des Kurses. */
:root{--linie-e:#3f8a57;--linie-a:#2f5fb3;--linie-b:#d0573f}
@media (prefers-color-scheme: dark){:root{--linie-e:#6fbf86;--linie-a:#6f9be6;--linie-b:#ec8a73}}

.linie-e{--lf:var(--linie-e)} .linie-a{--lf:var(--linie-a)} .linie-b{--lf:var(--linie-b)}
.kurs-linie[data-linie="E"]{--lf:var(--linie-e)} .kurs-linie[data-linie="A"]{--lf:var(--linie-a)}
.kurs-linie[data-linie="B"]{--lf:var(--linie-b)}
main.station[data-linie="E"]{--lf:var(--linie-e)} main.station[data-linie="A"]{--lf:var(--linie-a)}
main.station[data-linie="B"]{--lf:var(--linie-b)}

.linie-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.55em;height:1.55em;
  padding:0 .3em;border-radius:6px;background:var(--lf);color:#fff;font-weight:800;font-size:.85em;
  letter-spacing:0;vertical-align:.08em}
@media (prefers-color-scheme: dark){.linie-badge{color:#0f1016}}
.kurs-geplant{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;border:1px dashed var(--hair-2);
  font-size:.75rem;color:var(--ink-3);font-weight:600;white-space:nowrap}

/* ---------- Übersicht ---------- */
/* Die Website gibt jedem <section> 52–76 px Polster; im Kurs stehen Abschnitte dichter. */
.kurs-fahrkarte,.kurs-netz,.kurs-fahrplan,main.station>.einordnung,main.station>.in-der-app{padding:0}
/* .btn setzt display und hebelt sonst das hidden-Attribut aus. */
[hidden]{display:none!important}
.kurs-kopf h1{font-size:clamp(1.65rem,4.6vw,2.6rem);line-height:1.15;letter-spacing:-.02em;max-width:24ch}
.kurs-fahrkarte{margin:30px 0 0}
.kurs-fahrkarte>[data-erlebnis]{position:relative;background:var(--navy);color:var(--paper);border-radius:var(--r);
  padding:22px 22px 22px 26px;box-shadow:var(--sh-2);overflow:hidden}
.kurs-fahrkarte>[data-erlebnis]::after{content:"";position:absolute;top:14px;bottom:14px;right:64px;
  border-left:2px dashed color-mix(in srgb,var(--paper) 35%,transparent)}
.kurs-fahrkarte h2{margin:0 0 6px;color:inherit}
.kurs-fahrkarte p{margin:0;max-width:52ch;padding-right:64px;opacity:.88}

.kurs-netz{margin:44px 0 0}
#liniennetz{background:var(--tile);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--sh-1);
  padding:8px 10px 0;margin:0 0 22px;max-width:780px}
#liniennetz svg{display:block;overflow:visible}
.netz-linie{stroke:var(--lf);stroke-width:8;stroke-linecap:round}
.netz-umstieg{fill:none;stroke:var(--ink-3);stroke-width:3;stroke-dasharray:2 6;stroke-linecap:round;opacity:.7}
.netz-schild rect{fill:var(--lf)} .netz-schild text{fill:#fff;font-weight:800;font-size:13px;text-anchor:middle}
@media (prefers-color-scheme: dark){.netz-schild text{fill:#0f1016}}
.netz-station{fill:var(--tile);stroke:var(--lf);stroke-width:3}
.netz-station.besucht{fill:var(--lf);stroke:var(--tile)}
.netz-station.umsteige{stroke:var(--ink)}
.netz-station.umsteige.besucht{fill:var(--ink)}
.netz-station.geplant{stroke-dasharray:3 3;opacity:.6}
#liniennetz a .netz-station{cursor:pointer}
#liniennetz a:hover .netz-station{stroke-width:5}
.netz-label{font-size:11px;fill:var(--ink);font-family:inherit}
.netz-label.geplant{fill:var(--ink-3)}
.netz-zug rect{fill:var(--navy)} .netz-zug text{fill:var(--paper);font-size:10px;font-weight:800;text-anchor:middle}
.netz-puls{fill:var(--lf);opacity:.35;transform-box:fill-box;transform-origin:center;animation:netzpuls 1.8s ease-out infinite}
@keyframes netzpuls{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}

.kurs-listen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kurs-linie{background:var(--tile);border:1px solid var(--hair);border-top:6px solid var(--lf);border-radius:var(--r);
  padding:18px 18px 12px;box-shadow:var(--sh-1)}
.kurs-linie h3{margin:0 0 4px;font-size:1.05rem;display:flex;gap:8px;align-items:center}
.kurs-linie>p{margin:0 0 10px;color:var(--ink-2);font-size:.9rem}
.kurs-liste{list-style:none;margin:0;padding:0;counter-reset:st}
.kurs-liste li{counter-increment:st;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:9px 0;
  border-top:1px solid var(--hair);font-size:.95rem}
.kurs-liste li::before{content:counter(st);width:1.5em;color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:.8rem}
.kurs-liste li a{color:var(--ink);text-decoration:none;font-weight:600;min-height:28px;display:inline-flex;align-items:center}
.kurs-liste li a:hover{text-decoration:underline}
.kurs-liste li.geplant{color:var(--ink-3)}
.kurs-umstieg-hinweis{font-size:.75rem;color:var(--ink-3);display:inline-flex;gap:4px;align-items:center}
.kurs-fahrplan{margin:40px 0 0;max-width:64ch}
.kurs-fahrplan>p{color:var(--ink-2)}
.kurs-fahrplan>p a{color:var(--ink);text-decoration-color:var(--hair-2)}

/* ---------- Station ---------- */
main.station{max-width:780px;margin:0 auto;padding:6px 0 30px}
.station-kopf{margin:34px 0 24px}
.station-kopf .eyebrow{margin-bottom:10px;color:var(--ink-2)}
.station-kopf .eyebrow::before{display:none}
.station-kopf h1{font-size:clamp(1.8rem,5vw,2.5rem);letter-spacing:-.02em;line-height:1.12}
main.station>section{margin:0 0 28px}
main.station>section>h2{font-size:1.2rem}
.erlebnis{background:var(--tile);border:1px solid var(--hair);border-left:5px solid var(--lf);border-radius:var(--r);
  padding:20px;box-shadow:var(--sh-2)}
.einordnung{max-width:64ch;font-size:1.04rem;line-height:1.6}
.einordnung p{margin:0 0 12px}
.einordnung a,.ticket a{color:var(--ink);text-decoration-color:var(--lf);text-decoration-thickness:2px;text-underline-offset:3px}
.in-der-app figure{margin:0 0 18px}
.in-der-app img{display:block;max-width:100%;height:auto;border:1px solid var(--hair);border-radius:12px;box-shadow:var(--sh-1)}
.in-der-app figcaption{font-size:.85rem;color:var(--ink-3);margin-top:6px}
.ticket{position:relative;background:var(--sunk);border:1px solid var(--hair-2);border-radius:var(--r);
  padding:20px 22px 18px 30px}
.ticket::before{content:"";position:absolute;left:12px;top:16px;bottom:16px;border-left:2px dashed var(--hair-2)}
.ticket h2{margin:0 0 4px}
.ticket>p{margin:0 0 10px;color:var(--ink-2)}
.ticket-prompt{white-space:pre-wrap;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.86rem;line-height:1.5;
  background:var(--tile);border:1px solid var(--hair);border-radius:12px;padding:14px;margin:0 0 12px;color:var(--ink)}
.ticket-meldung,.fortschritt-meldung{display:inline-block;margin-left:10px;font-size:.88rem;color:var(--ink-2)}
.station-nav{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;border-top:1px solid var(--hair);padding:18px 0 0;margin:8px 0 22px}
.station-nav a{color:var(--ink);font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.station-nav a[rel="next"]{margin-left:auto;background:var(--navy);color:var(--paper);padding:0 18px;border-radius:11px}
.station-nav a:hover{text-decoration:underline}
.kurs-umstieg{flex-basis:100%;margin:0;padding:10px 14px;border:1px dashed var(--hair-2);border-radius:12px;
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:.95rem}

/* ---------- Fortschritt ---------- */
.fortschritt-box{background:var(--tile);border:1px solid var(--hair);border-radius:var(--r);padding:16px 18px;
  margin:26px 0 40px;box-shadow:var(--sh-1)}
.fortschritt-zeile{margin:0 0 10px}
.fortschritt-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.fortschritt-hinweis{margin:10px 0 0;font-size:.85rem;color:var(--ink-3)}
.fortschritt-linkfeld{display:block;width:100%;margin-top:10px;padding:10px;border:1px solid var(--hair-2);
  border-radius:10px;font:inherit;font-size:.85rem;background:var(--sunk);color:var(--ink)}

button.btn{min-height:44px}

@media (max-width:920px){.kurs-listen{grid-template-columns:1fr}}
@media (max-width:520px){
  .kurs-fahrkarte p{padding-right:0}
  .kurs-fahrkarte>[data-erlebnis]::after{display:none}
  .station-nav a[rel="next"]{margin-left:0}
}
@media (prefers-reduced-motion: reduce){.netz-puls{animation:none;opacity:.3}}

/* ---------- Fahrkarte lösen ---------- */
.kurs-fahrkarte .btn.fk-los{background:var(--paper);color:var(--navy);box-shadow:var(--sh-1)}
.kurs-fahrkarte .fk-knoepfe{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:16px}
.kurs-fahrkarte .fk-ueberspringen,.kurs-fahrkarte .fk-einstiege a{color:inherit;opacity:.85;font-size:.92rem}
.kurs-fahrkarte .fk-einstiege{margin-top:12px;font-size:.92rem}
.kurs-fahrkarte .fk-einstiege a{display:inline-flex;gap:6px;align-items:center}
.fk-zaehler{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;opacity:.75;margin:0 0 6px!important}
.kurs-fahrkarte h2[tabindex]:focus{outline:none}
.fk-antworten{display:grid;gap:8px;margin:14px 0 10px;max-width:640px}
.fk-antwort{font:inherit;text-align:left;padding:12px 14px;border-radius:12px;min-height:44px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--paper) 30%,transparent);background:color-mix(in srgb,var(--paper) 8%,transparent);color:inherit}
.fk-antwort:hover:not(:disabled){background:color-mix(in srgb,var(--paper) 16%,transparent)}
.fk-antwort:disabled{cursor:default;opacity:.6}
.fk-antwort.fk-richtig{opacity:1;border-color:var(--linie-e);background:color-mix(in srgb,var(--linie-e) 35%,transparent)}
.fk-antwort.fk-falsch{opacity:1;border-color:var(--linie-b);background:color-mix(in srgb,var(--linie-b) 30%,transparent)}
.fk-weissnicht{font-style:italic}
.fk-erklaerung{margin:6px 0 14px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--paper) 10%,transparent);
  max-width:640px;line-height:1.5}
.fk-einstieg{font-size:1.05rem;margin:6px 0 0!important}
.fk-neu{font:inherit;background:none;border:none;color:inherit;opacity:.75;text-decoration:underline;cursor:pointer;min-height:44px}

/* ---------- Erlebnis: Sei die KI ---------- */
.erlebnis-aktiv>h2{margin-top:0}
.ew-anleitung,.kf-anleitung{color:var(--ink-2);margin:0 0 12px}
.ew-satz{font-size:1.25rem;line-height:1.5;margin:0 0 14px;min-height:2.2em}
.ew-satz mark{background:color-mix(in srgb,var(--lf) 22%,transparent);color:inherit;border-radius:6px;padding:0 4px}
.ew-balken{display:grid;gap:6px}
.ew-option{display:grid;grid-template-columns:minmax(90px,38%) 1fr 56px;gap:10px;align-items:center;font:inherit;
  text-align:left;background:none;border:1px solid transparent;border-radius:10px;padding:8px;min-height:44px;cursor:pointer;color:var(--ink)}
.ew-option:hover{background:var(--sunk);border-color:var(--hair)}
.ew-wort{font-weight:600;font-size:.95rem;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.ew-spur{height:12px;background:var(--sunk);border-radius:6px;overflow:hidden}
.ew-spur span{display:block;height:100%;background:var(--lf);border-radius:6px;transition:width .3s}
.ew-prozent{text-align:right;font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--ink-2)}
.ew-knoepfe,.kf-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.ew-regler{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--ink-2);margin:12px 0 0}
.ew-regler input{flex:1;min-width:0;accent-color:var(--lf);min-height:32px}
.ew-hinweis{font-size:.8rem;color:var(--ink-3);margin:12px 0 0}
.ew-aha,.kf-aha{margin-top:14px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--hb-warn) 22%,var(--tile))}

/* ---------- Erlebnis: Das Gedächtnis der KI ---------- */
.kf-zaehler{display:flex;flex-direction:column;gap:6px;position:sticky;top:0;background:var(--tile);padding:6px 0;z-index:1;
  font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums}
.kf-spur{height:10px;background:var(--sunk);border-radius:5px;overflow:hidden}
.kf-spur span{display:block;height:100%;background:var(--lf);transition:width .3s}
.kf-chat{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.kf-nachricht{max-width:85%;padding:10px 12px;border-radius:14px;line-height:1.45;font-size:.95rem;position:relative}
.kf-du{align-self:flex-end;background:var(--navy-soft)}
.kf-ki{align-self:flex-start;background:var(--sunk)}
.kf-wer{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.kf-raus{opacity:.45;text-decoration:line-through;text-decoration-color:var(--ink-3)}
.kf-marke{display:block;margin-top:4px;font-size:.75rem;font-weight:700;text-decoration:none;color:var(--linie-b)}
.kf-vergessen{outline:2px solid var(--linie-b);outline-offset:2px}
.begriffe{margin:0 0 12px}
.begriffe dt{font-weight:700;margin-top:10px}
.begriffe dd{margin:2px 0 0;color:var(--ink-2)}
@media (prefers-reduced-motion: reduce){.ew-spur span,.kf-spur span{transition:none}}

/* ---------- Erlebnis: Prompt-Baukasten ---------- */
.pb-anleitung,.ek-anleitung{color:var(--ink-2);margin:0 0 12px}
.pb-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.pb-chip{font:inherit;font-size:.9rem;font-weight:600;padding:8px 14px;min-height:40px;border-radius:999px;cursor:pointer;
  border:1.5px dashed var(--hair-2);background:var(--tile);color:var(--ink)}
.pb-chip.an{border-style:solid;border-color:var(--lf);background:color-mix(in srgb,var(--lf) 16%,var(--tile))}
.pb-chip.an::before{content:"✓ ";color:var(--lf)}
.pb-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:12px 0 4px}
.pb-label .pb-quelle{text-transform:none;letter-spacing:0;font-weight:500}
.pb-prompt{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.84rem;background:var(--sunk);border-radius:10px;padding:10px 12px;margin:0}
.pb-antwort{white-space:pre-line;font-size:.92rem;line-height:1.5;border-left:3px solid var(--lf);padding:4px 0 4px 12px;min-height:8em}
.pb-meter{height:8px;border-radius:4px;background:var(--sunk);overflow:hidden;margin:14px 0 6px}
.pb-meter span{display:block;height:100%;background:linear-gradient(90deg,var(--linie-b),var(--hb-warn),var(--linie-e));transition:width .4s}
.pb-urteil{font-weight:600;margin:0}

/* ---------- Erlebnis: Erwisch die KI ---------- */
.ek-brief{background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:16px 18px;line-height:1.75;font-size:.98rem}
.ek-titel{font-weight:700;margin:0 0 8px}
.ek-brief p{margin:0 0 10px}
.ek-stelle{cursor:pointer;border-radius:4px;padding:1px 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  text-decoration:underline dotted var(--ink-3);text-underline-offset:4px}
.ek-stelle:hover{background:var(--sunk)}
.ek-stelle.ek-fehler{background:color-mix(in srgb,var(--linie-b) 25%,transparent);text-decoration:line-through}
.ek-stelle.ek-ok{background:color-mix(in srgb,var(--linie-e) 22%,transparent);text-decoration:none}
.ek-meldung{margin:12px 0 4px;min-height:2.6em}
.ek-zaehler{font-weight:600;margin:0}
@media (prefers-reduced-motion: reduce){.pb-meter span{transition:none}}

/* ---------- Erlebnis: Darf das in die KI? ---------- */
.dd-anleitung{color:var(--ink-2);margin:0 0 8px}
.dd-zaehler{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.dd-karte{min-height:110px;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;border-radius:16px;
  background:var(--paper);border:1px solid var(--hair);font-size:1.08rem;line-height:1.45;transition:transform .22s,opacity .22s}
.dd-karte.weg-links{transform:translateX(-40px) rotate(-3deg);opacity:0}
.dd-karte.weg-rechts{transform:translateX(40px) rotate(3deg);opacity:0}
.dd-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}
.dd-knoepfe .btn{justify-content:center}
.dd-nein{background:color-mix(in srgb,var(--linie-b) 18%,var(--tile));color:var(--ink);border-color:color-mix(in srgb,var(--linie-b) 45%,transparent)}
.dd-ja{background:color-mix(in srgb,var(--linie-e) 18%,var(--tile));color:var(--ink);border-color:color-mix(in srgb,var(--linie-e) 45%,transparent)}
.dd-warum{margin:12px 0 0;min-height:3.2em}

/* ---------- Erlebnis: Einem Agenten zuschauen ---------- */
.ag-aufgabe{background:var(--sunk);border-radius:12px;padding:10px 12px;margin:0 0 12px}
.ag-aufgabe span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ag-schritte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ag-schritt{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--hair);background:var(--tile)}
.ag-schritt p{margin:4px 0 0;color:var(--ink-2);font-size:.94rem}
.ag-freigabe{border-color:color-mix(in srgb,var(--hb-warn) 60%,transparent)}
.ag-werkzeug{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--navy-soft);color:var(--ink-2)}
.ag-wartet{font-weight:700;color:var(--ink)!important}
.ag-folge{padding:8px 10px;border-radius:10px;color:var(--ink)!important}
.ag-folge.ag-frei{background:color-mix(in srgb,var(--linie-b) 16%,transparent)}
.ag-folge.ag-stopp{background:color-mix(in srgb,var(--linie-e) 16%,transparent)}
.ag-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
@media (prefers-reduced-motion: reduce){.dd-karte{transition:none}}

/* ---------- Erlebnis: Mit und ohne dein Material ---------- */
.vn-anleitung,.ls-anleitung{color:var(--ink-2);margin:0 0 12px}
.vn-schalter{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--sunk);padding:4px;border-radius:12px;margin:0 0 6px}
.vn-schalter button{font:inherit;font-size:.88rem;font-weight:600;min-height:44px;min-width:0;border:none;border-radius:9px;background:none;color:var(--ink-2);cursor:pointer;padding:6px 8px}
@media (max-width:440px){.vn-schalter{grid-template-columns:1fr}}
.vn-schalter button[aria-selected="true"]{background:var(--tile);color:var(--ink);box-shadow:var(--sh-1)}
.vn-text{margin:10px 0}
.vn-text summary{cursor:pointer;font-weight:600;font-size:.9rem;min-height:32px}
.vn-text pre,.vn-dokument pre{white-space:pre-wrap;font-family:inherit;font-size:.9rem;background:var(--paper);border:1px solid var(--hair);border-radius:10px;padding:10px 12px;margin:6px 0 0}
.vn-dokument{border-left:3px solid var(--linie-a);padding-left:12px;margin:10px 0}
.vn-dokument p{margin:0}

/* ---------- Erlebnis: Ein Prompt, ein Spiel ---------- */
.ls-spiele{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.ls-spiel{border:1px solid var(--hair);border-radius:14px;padding:14px;background:var(--paper)}
.ls-spiel h3{margin:2px 0 4px;font-size:1.15rem}
.ls-fach{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ls-quelle{margin:0 0 10px;font-size:.82rem;color:var(--ink-3)}
.ls-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.ls-spiel details summary{cursor:pointer;font-size:.88rem;font-weight:600;min-height:32px}
.ls-prompt{white-space:pre-wrap;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.78rem;max-height:260px;overflow:auto;background:var(--tile);border:1px solid var(--hair);border-radius:10px;padding:10px}

/* ---------- Erlebnis: Terminal ---------- */
.tm-anleitung{margin:0 0 12px}
.tm-anleitung code,.einordnung code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.88em;background:var(--sunk);padding:1px 5px;border-radius:5px}
.tm-fenster{background:#14161d;color:#e6e8ef;border-radius:12px;overflow:hidden;box-shadow:var(--sh-2)}
.tm-leiste{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#22252f;font-size:.75rem;color:#9aa0b4}
.tm-leiste i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.tm-leiste i+i{background:#febc2e}.tm-leiste i+i+i{background:#28c840}
.tm-leiste span{margin-left:8px}
.tm-ausgabe{margin:0;padding:12px;min-height:150px;max-height:280px;overflow:auto;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.84rem;line-height:1.5;white-space:pre-wrap}
.tm-zeile{padding:0 12px 12px}
.tm-zeile label{display:flex;gap:6px;align-items:center;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.84rem}
.tm-prompt{color:#6fbf86;white-space:nowrap}
.tm-zeile input{flex:1;min-width:0;background:none;border:none;color:inherit;font:inherit;outline:none;min-height:32px}
.tm-zeile:focus-within{outline:2px solid #6f9be6;outline-offset:-4px;border-radius:8px}
.tm-tasten{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.tm-tasten button{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.8rem;padding:6px 10px;min-height:36px;border-radius:8px;border:1px solid var(--hair-2);background:var(--tile);color:var(--ink);cursor:pointer}
.tm-geschafft{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--linie-e) 18%,var(--tile))}

/* ---------- Erlebnis: Coding-Agent ---------- */
.ca-fenster .tm-leiste b{margin-left:auto;color:#e6e8ef;font-variant-numeric:tabular-nums}
.ca-log{list-style:none;margin:0;padding:12px;min-height:180px;max-height:320px;overflow:auto;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.82rem;line-height:1.5;display:flex;flex-direction:column;gap:6px}
.ca-log li{display:grid;grid-template-columns:44px 1fr;gap:6px}
.ca-marke{color:#9aa0b4;font-weight:700}
.ca-du span:last-child{color:#c9d8f5}.ca-befehl span:last-child{color:#6fbf86}.ca-frage span:last-child{color:#febc2e}.ca-fertig span:last-child{color:#6fbf86;font-weight:700}
.ca-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.ca-ergebnis{margin:12px 0 0}
.ca-vergleich{width:100%;border-collapse:collapse;margin:16px 0 0;font-size:.88rem}
.ca-vergleich caption{text-align:left;font-weight:700;margin-bottom:6px}
.ca-vergleich th,.ca-vergleich td{border-top:1px solid var(--hair);padding:8px 6px;text-align:left;vertical-align:top}
.ca-vergleich thead th{border-top:none;color:var(--ink-3);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}

/* ---------- Fahrplanänderungen ---------- */
.kurs-fahrplan-liste{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.kurs-fahrplan-liste li{background:var(--tile);border:1px solid var(--hair);border-left:4px solid var(--linie-b);border-radius:12px;
  padding:10px 14px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.kurs-fahrplan-liste time{font-size:.8rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.kurs-fahrplan-liste a{color:var(--ink);font-weight:600;text-decoration-color:var(--hair-2)}
.kurs-fahrplan-station{font-size:.85rem;color:var(--ink-2);display:inline-flex;gap:5px;align-items:center}
.kurs-fahrplan-station-abschnitt{margin:0 0 24px}
.kurs-fahrplan-station-abschnitt h2{font-size:1.05rem}

/* Vergleichstabelle am Handy: jede Zeile als Block, die Spaltennamen stehen vor den Werten. */
@media (max-width:560px){
  .ca-vergleich thead{display:none}
  .ca-vergleich caption{display:block;width:auto}
  .ca-vergleich,.ca-vergleich tbody,.ca-vergleich tr,.ca-vergleich th,.ca-vergleich td{display:block;width:auto}
  .ca-vergleich tr{border-top:1px solid var(--hair);padding:8px 0}
  .ca-vergleich th,.ca-vergleich td{border-top:none;padding:2px 0}
  .ca-vergleich td::before{content:attr(data-spalte) ": ";font-weight:700;color:var(--ink-2)}
}

/* ---------- Erlebnis: Die Apps kennenlernen ---------- */
.ar-anleitung{color:var(--ink-2);margin:0 0 12px}
.ar-schalter{display:inline-flex;gap:6px;background:var(--sunk);padding:4px;border-radius:12px;margin:0 0 12px}
.ar-schalter button{font:inherit;font-weight:600;min-height:44px;padding:6px 18px;border:none;border-radius:9px;background:none;color:var(--ink-2);cursor:pointer}
.ar-schalter button[aria-pressed="true"]{background:var(--tile);color:var(--ink);box-shadow:var(--sh-1)}
.ar-figur{margin:0}
.ar-bild{position:relative;display:inline-block;max-width:100%;border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:#fff}
.ar-bild img{display:block;max-width:100%;height:auto}
.ar-marke{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:var(--linie-b);color:#fff;
  font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #fff}
.ar-titel{font-size:.85rem;color:var(--ink-3);margin-top:8px}
.ar-legende{margin:10px 0 0;padding-left:1.4em}
.ar-legende li{margin:4px 0}
.ar-legende li::marker{color:var(--linie-b);font-weight:800}
.ar-knoepfe{display:flex;align-items:center;gap:10px;margin:14px 0 0}
.ar-zaehler{font-size:.85rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ar-knoepfe .btn:disabled{opacity:.4;cursor:default}

/* ---------- Ende einer Linie ---------- */
.kurs-endstation{flex-basis:100%;padding:14px 16px;border-radius:14px;background:var(--sunk);border:1px solid var(--hair-2);border-left:5px solid var(--lf)}
.kurs-endstation p{margin:0 0 6px}
.kurs-endstation p:last-child{margin:0}
.kurs-endstation a{display:inline-flex;gap:5px;align-items:center;min-height:36px}
.netz-legende{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.8rem;color:var(--ink-3);margin:4px 4px 12px}
.netz-legende{gap:4px 14px}
.lg-eintrag{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.netz-legende .lg{display:inline-block;width:12px;height:12px;border-radius:50%;border:2.5px solid var(--ink-3)}
.netz-legende .lg-besucht{background:var(--ink-3)}
.netz-legende .lg-offen{background:var(--tile)}
.netz-legende .lg-geplant{background:var(--tile);border-style:dashed;opacity:.6}

/* ---------- Erlebnis: Differenzieren ---------- */
.df-anleitung{color:var(--ink-2);margin:0 0 12px}
.df-stufe{margin:12px 0 0;font-size:.95rem}
.df-titel{margin:8px 0 4px;font-size:1.05rem}
.df-text{line-height:1.6;margin:0 0 12px;min-height:9em;hyphens:auto;-webkit-hyphens:auto}
.df-mark{background:color-mix(in srgb,var(--hb-warn) 45%,transparent);color:inherit;border-radius:4px;padding:0 2px}
.df-pruef{padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--hb-warn) 22%,var(--tile));margin:0 0 12px;font-size:.92rem}
.df-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin:0}
.df-zahlen div{background:var(--sunk);border-radius:10px;padding:8px 10px}
.df-zahlen dt{font-size:.72rem;color:var(--ink-3);font-weight:600}
.df-zahlen dd{margin:2px 0 0;font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- Erlebnis: Feedback geben ---------- */
.fc-anleitung{color:var(--ink-2);margin:0 0 12px}
.fc-schalter button[aria-pressed="true"]{background:var(--tile);color:var(--ink);box-shadow:var(--sh-1)}
.fc-schalter button:disabled{opacity:.45;cursor:default}
.fc-prompt{white-space:pre-wrap}
.fc-raster{display:grid;gap:12px}
@media (min-width:760px){.fc-raster{grid-template-columns:3fr 2fr;align-items:start}}
.fc-antwort{max-height:26em;overflow:auto}
.fc-check{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fc-check li{display:grid;gap:2px;padding:8px 10px 8px 34px;border-radius:10px;background:var(--sunk);position:relative;font-size:.88rem}
.fc-check li::before{position:absolute;left:10px;top:8px;font-weight:800}
.fc-check li.ok::before{content:"✓";color:var(--linie-e)}
.fc-check li.nein::before{content:"!";color:var(--linie-b)}
.fc-check li span{color:var(--ink-3);font-size:.75rem;font-weight:600}
.fc-entscheidung{margin-top:16px;padding:14px;border-radius:12px;border:1px solid var(--hair)}
.fc-entscheidung p{margin:0 0 10px}
.fc-optionen{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.fc-optionen button[aria-pressed="true"]{border-color:var(--lf);background:color-mix(in srgb,var(--lf) 14%,var(--tile))}
.fc-erklaerung{padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--hb-warn) 22%,var(--tile))}

/* ---------- Erlebnis: Agent im Ordner ---------- */
.oa-anleitung{color:var(--ink-2);margin:0 0 12px}
.oa-rechte{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.oa-raster{display:grid;grid-template-columns:1fr;gap:12px;margin:14px 0 0}
@media (min-width:640px){.oa-raster{grid-template-columns:1fr 1fr}}
.oa-ordner{list-style:none;margin:0;padding:8px;border-radius:12px;background:var(--sunk);font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.8rem;display:grid;gap:4px;min-height:9em}
.oa-ordner li{padding:4px 8px;border-radius:6px;background:var(--tile);overflow-wrap:anywhere}
.oa-ordner li.neu{background:color-mix(in srgb,var(--lf) 18%,var(--tile))}
.oa-ordner li.leer{background:none;color:var(--ink-3);font-family:inherit}
.oa-protokoll{margin:14px 0 0;padding-left:1.4em;font-size:.92rem;display:grid;gap:4px}
.oa-tabelle{border-collapse:collapse;margin:14px 0 0;font-size:.88rem;width:100%;max-width:380px}
.oa-tabelle caption{text-align:left;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.8rem;color:var(--ink-3);padding-bottom:4px}
.oa-tabelle th,.oa-tabelle td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--hair)}
.oa-tabelle td:last-child,.oa-tabelle tfoot td{text-align:right;font-variant-numeric:tabular-nums}
.oa-fazit{margin-top:14px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--hb-warn) 22%,var(--tile))}

/* ---------- Erlebnis: Erstes Tool ---------- */
.wk-anleitung{color:var(--ink-2);margin:0 0 12px}
.wk-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:var(--sunk);padding:4px;border-radius:12px;margin:0 0 6px}
.wk-schritte button{font:inherit;font-size:.82rem;font-weight:600;min-height:44px;min-width:0;border:none;border-radius:9px;background:none;color:var(--ink-2);cursor:pointer;padding:6px;hyphens:auto;-webkit-hyphens:auto}
.wk-schritte button[aria-pressed="true"]{background:var(--tile);color:var(--ink);box-shadow:var(--sh-1)}
.wk-prompt{white-space:pre-wrap}
.wk-antwort{max-height:22em;overflow:auto}
.wk-kommentar{margin:12px 0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--hb-warn) 22%,var(--tile))}
.wk-pruefen{margin-top:18px;padding:14px;border-radius:12px;border:1px solid var(--hair)}
.wk-pruefen p{margin:0 0 10px}
.wk-stand{display:block;font-weight:400;color:var(--ink-3);font-size:.85rem;margin-top:2px}
.wk-liste{display:grid;gap:6px}
.wk-punkt{font:inherit;font-size:.9rem;text-align:left;min-height:44px;padding:8px 12px 8px 40px;border-radius:10px;border:1px solid var(--hair);background:var(--tile);color:var(--ink);cursor:pointer;position:relative}
.wk-punkt::before{content:"";position:absolute;left:12px;top:50%;width:18px;height:18px;margin-top:-9px;border:2px solid var(--ink-3);border-radius:5px}
.wk-punkt[aria-pressed="true"]::before{content:"✓";border-color:var(--linie-e);background:var(--linie-e);color:#fff;font-size:12px;line-height:18px;text-align:center;font-weight:800}

/* ---------- Erlebnis: Workflows ---------- */
.wf-anleitung{color:var(--ink-2);margin:0 0 12px}
.wf-raster{display:grid;gap:12px}
@media (min-width:700px){.wf-raster{grid-template-columns:3fr 2fr;align-items:start}}
.wf-reihe{margin:0;padding:0;list-style:none;counter-reset:wf;display:grid;gap:6px}
.wf-reihe li{counter-increment:wf;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 10px;border-radius:10px;background:var(--sunk)}
.wf-reihe li::before{content:counter(wf);font-weight:800;color:var(--lf);min-width:1.2em}
.wf-text{flex:1;min-width:0;font-size:.92rem;hyphens:auto;-webkit-hyphens:auto}
.wf-pfeile{display:flex;gap:4px}
.wf-pfeile button{font:inherit;font-weight:700;width:44px;height:44px;border-radius:9px;border:1px solid var(--hair);background:var(--tile);color:var(--ink);cursor:pointer}
.wf-pfeile button:disabled{opacity:.3;cursor:default}
.wf-regeln{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wf-regeln li{padding:8px 10px 8px 32px;border-radius:10px;background:var(--sunk);position:relative;font-size:.86rem}
.wf-regeln li::before{position:absolute;left:10px;top:8px;font-weight:800}
.wf-regeln li.ok::before{content:"✓";color:var(--linie-e)}
.wf-regeln li.nein::before{content:"!";color:var(--linie-b)}
.wf-datei{white-space:pre-wrap;font-size:.78rem}
.wf-kopieren{margin:8px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wf-meldung{font-size:.85rem;color:var(--ink-2)}
.wf-ablage{margin:12px 0 0;padding-left:1.2em;font-size:.86rem;display:grid;gap:4px}
.wf-ablage code{font-size:.8rem;overflow-wrap:anywhere}

/* ---------- Erlebnis: Superpowers ---------- */
.sp-anleitung{color:var(--ink-2);margin:0 0 12px}
.sp-phasen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;background:var(--sunk);padding:4px;border-radius:12px;margin:0 0 10px}
.sp-phasen button{font:inherit;font-size:.74rem;font-weight:600;min-height:52px;min-width:0;border:none;border-radius:9px;background:none;color:var(--ink-2);cursor:pointer;padding:4px 1px;display:grid;gap:2px;justify-items:center;align-content:start;line-height:1.2}
.sp-phasen em{font-style:normal}
@media (max-width:380px){.sp-phasen em{display:none}.sp-phasen button{min-height:44px}}
.sp-titel{margin:0 0 8px;font-weight:700}
.sp-phasen button span{font-weight:800;color:var(--lf);font-size:.9rem}
.sp-phasen button[aria-pressed="true"]{background:var(--tile);color:var(--ink);box-shadow:var(--sh-1)}
.sp-karte{padding:14px;border-radius:12px;border:1px solid var(--hair);margin:0 0 12px}
.sp-skills{margin:0 0 8px;display:flex;flex-wrap:wrap;gap:6px}
.sp-skills code{font-size:.78rem;background:var(--sunk);border-radius:6px;padding:2px 8px}
.sp-so{margin:0 0 12px;line-height:1.55}
.sp-ohne{margin:10px 0 0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--hb-warn) 22%,var(--tile))}
.sp-bilanz{margin-top:14px;padding:14px;border-radius:12px;background:color-mix(in srgb,var(--lf) 12%,var(--tile))}
.sp-bilanz p{margin:0 0 6px}
.sp-bilanz ul{margin:0;padding-left:1.2em}

/* ---------- Erlebnis: Statusline ---------- */
.sl-anleitung{color:var(--ink-2);margin:0 0 12px}
.sl-bausteine{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.sl-terminal{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.85rem;background:#15171c;color:#e8e6e1;border-radius:12px;padding:14px 14px 12px;margin:0 0 14px;min-height:3.2em;border-bottom:3px solid var(--lf);overflow-wrap:anywhere}
.sl-eingabe{color:#8b8fa3}
.sl-zeile{color:#cfe3d4}
.sl-code{white-space:pre-wrap;font-size:.76rem;overflow-wrap:anywhere}
.sl-kopieren{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0}
.sl-meldung{font-size:.85rem;color:var(--ink-2)}
.sl-hinweis{font-size:.85rem;color:var(--ink-2);margin:6px 0 0}
.pb-label code{text-transform:none;letter-spacing:0;font-size:.95em}

/* ---------- Erlebnis: Kontext und Befehle ---------- */
.kt-schalter{display:inline-flex;gap:6px;background:var(--sunk);padding:4px;border-radius:12px;margin:0 0 12px}
.kt-schalter button{font:inherit;font-weight:600;min-height:44px;padding:6px 18px;border:none;border-radius:9px;background:none;color:var(--ink-2);cursor:pointer}
.kt-schalter button[aria-pressed="true"]{background:var(--tile);color:var(--ink);box-shadow:var(--sh-1)}
.kt-ausgabe{min-height:190px;max-height:320px}
@media (max-width:380px){.kt-ausgabe{font-size:.72rem;padding:10px}}
.kt-anzeige{display:flex;align-items:center;gap:10px;padding:0 12px 10px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.78rem;color:#9aa0b4}
.kt-balken{flex:1;height:8px;border-radius:4px;background:#2b2f3b;overflow:hidden}
.kt-balken span{display:block;height:100%;background:#6fbf86;transition:width .3s}
.kt-balken span.eng{background:#ec8a73}
.kt-zahl{white-space:nowrap}
.kt-tasten .kt-arbeit{font-family:inherit;font-weight:600;border-color:var(--lf);background:color-mix(in srgb,var(--lf) 14%,var(--tile))}
.kt-vergleich{border-collapse:collapse;width:100%;margin:16px 0 0;font-size:.86rem}
.kt-vergleich caption{text-align:left;font-weight:700;padding-bottom:6px}
.kt-vergleich th,.kt-vergleich td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--hair);vertical-align:top}
.kt-vergleich code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.85em;background:var(--sunk);padding:1px 5px;border-radius:5px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.kt-balken span{transition:none}}