:root{--bg:#f4f7f9;--card:#fff;--ink:#1f2d3a;--muted:#5a6b7a;--akzent:#1b62c4;--akzent-dunkel:#154da0;--akzent-tint:#e8f0fb;--akzent-2:#2b6cb0;--blau-tint:#e8f0fa;--erfolg:#1E876D;--erfolg-dunkel:#166653;--erfolg-tint:#e7f4ef;--bernstein:#a15c00;--bernstein-tint:#fdf3e2;--rot:#b02a2a;--rot-tint:#fbeeee;--rand:#d7e0e6;--schatten:0 1px 3px rgba(0,0,0,.08);--schatten-stark:0 6px 16px rgba(0,0,0,.18);--radius:14px;--diamant-hell:#b8f3ff;--diamant-mittel:#3ec6dd;--diamant-dunkel:#0e8ca3;--diamant-glanz:#fff;--diamant-leer:#c3cdd2}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
header.app{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));background:var(--card);border-bottom:1px solid var(--rand);position:sticky;top:0;z-index:5}
header.app .marke{font-weight:700;font-size:1.15rem;color:var(--akzent)}
main{max-width:1600px;margin:0 auto;padding:20px 32px}
.kachel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:16px}
.kachel{background:var(--card);border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--schatten);padding:18px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;min-height:120px}
.kachel .icon{font-size:2rem}
.kachel .titel{font-weight:650}
.kachel.platzhalter{opacity:.6}
.kachel .band{align-self:flex-start;font-size:.72rem;background:#eef3f6;color:var(--muted);border-radius:999px;padding:2px 10px}
.btn{display:inline-block;background:var(--akzent);color:#fff;border:0;border-radius:10px;padding:11px 18px;font-size:1rem;cursor:pointer;text-decoration:none}
.karte{background:var(--card);border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--schatten);padding:22px;max-width:420px;margin:40px auto}
label{display:block;margin:12px 0 4px;font-weight:600}
input,select{width:100%;padding:11px;border:1px solid var(--rand);border-radius:10px;font-size:1rem}
.hinweis{color:var(--muted);font-size:.85rem}
.btn-leise{border:0;background:none;cursor:pointer;color:var(--muted);font-size:.95rem;min-height:44px;padding:10px 14px;border-radius:10px}
.fehler{color:#b02a2a;font-size:.9rem;margin-top:8px}
.erfolg{color:var(--erfolg-dunkel);font-size:.9rem;font-weight:600;margin-top:8px}
.fehler-liste{margin:4px 0 0;padding-left:20px;color:#b02a2a;font-size:.85rem}
@media(max-width:480px){main{padding:14px}}
@media(max-height:480px){
  header.app{padding-top:8px;padding-bottom:8px}
  .karte{margin:12px auto}
}

/* --- Modul-Shell (B1, poliert v0.3.1) --- */
.modus-tabs{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap}
.tab{min-height:44px;padding:10px 20px;border:1px solid var(--rand);background:var(--card);border-radius:999px;cursor:pointer;font-size:1rem;font-weight:600;color:var(--muted);transition:border-color .15s,color .15s}
.tab:hover{border-color:var(--akzent);color:var(--akzent)}
.tab.aktiv{background:var(--akzent);color:#fff;border-color:var(--akzent)}
.set-auswahl{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.set-btn{min-height:44px;text-align:left;padding:10px 16px;border:1px solid var(--rand);background:var(--card);border-radius:10px;cursor:pointer;font-size:1rem;transition:border-color .15s}
.set-btn:hover{border-color:var(--akzent)}
.set-btn.aktiv{border-color:var(--akzent);box-shadow:inset 0 0 0 1px var(--akzent);background:var(--akzent-tint)}
.fortschritt{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--akzent);margin:0 0 8px}
.aufg-karte{background:var(--card);border:1px solid var(--rand);border-left:4px solid var(--akzent);border-radius:var(--radius);box-shadow:var(--schatten);padding:20px 22px;margin-bottom:16px}
.aufg-karte h3{margin:0 0 14px;font-size:1.15rem;line-height:1.35}
.aussage{font-style:italic;background:var(--bg);border-radius:10px;padding:10px 14px}
.option{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;margin:6px 0;cursor:pointer;border:1px solid var(--rand);border-radius:10px;transition:border-color .15s,background .15s}
.option:hover{border-color:var(--akzent)}
.option:has(input:checked){border-color:var(--akzent);background:var(--akzent-tint);box-shadow:inset 0 0 0 1px var(--akzent)}
.option input{width:auto;accent-color:var(--akzent);transform:scale(1.25);flex:none}
.aufg-karte input[type=text]{padding:12px 14px}
input:focus-visible,button:focus-visible,.option:focus-within,.t-punkt:focus-visible,.n-saeule:focus-visible{outline:3px solid color-mix(in srgb,var(--akzent) 45%,transparent);outline-offset:2px}
.luecke{width:9em;display:inline-block;margin:0 2px}
.reihenliste{list-style:none;padding-left:0;counter-reset:reihe}
.reihenitem{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:6px 0;border:1px solid var(--rand);border-radius:10px;background:var(--card);counter-increment:reihe;transition:box-shadow .15s}
.reihenitem::before{content:counter(reihe);flex:none;width:26px;height:26px;border-radius:50%;background:var(--akzent-tint);color:var(--akzent);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.reihenitem .itext{flex:1}
.reihenitem .griff{flex:none;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--muted);cursor:grab;touch-action:none;border-radius:8px}
.reihenitem .griff:hover{color:var(--akzent);background:var(--akzent-tint)}
.reihenitem.ziehend{box-shadow:var(--schatten-stark);position:relative;z-index:2;background:var(--akzent-tint);transform:translateY(var(--zieh-y,0)) scale(1.02);touch-action:none}
.reihenitem.ziehend .griff{cursor:grabbing}
.ordnen{min-width:44px;min-height:44px;border:1px solid var(--rand);background:var(--card);border-radius:50%;cursor:pointer;font-size:1rem;transition:border-color .15s,background .15s}
.ordnen:hover{border-color:var(--akzent);background:var(--akzent-tint)}
.aktionen{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.btn:hover{background:var(--akzent-dunkel)}
.rueckmeldung{margin-top:14px;font-weight:600;border-radius:10px;padding:0}
.rueckmeldung.richtig,.rueckmeldung.fast,.rueckmeldung.falsch{padding:12px 14px 12px 40px;position:relative;animation:einblenden .25s ease-out}
.rueckmeldung::before{position:absolute;left:14px;top:11px;font-weight:800}
.rueckmeldung.richtig{color:var(--erfolg-dunkel);background:var(--erfolg-tint);border-left:4px solid var(--erfolg)}
.rueckmeldung.richtig::before{content:"✓"}
.rueckmeldung.fast{color:var(--bernstein);background:var(--bernstein-tint);border-left:4px solid var(--bernstein)}
.rueckmeldung.fast::before{content:"≈"}
.rueckmeldung.falsch{color:var(--rot);background:var(--rot-tint);border-left:4px solid var(--rot)}
.rueckmeldung.falsch::before{content:"✗"}
@keyframes einblenden{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rueckmeldung.richtig,.rueckmeldung.fast,.rueckmeldung.falsch{animation:none}.tab,.set-btn,.option,.ordnen{transition:none}}
.loesung{font-weight:600;background:var(--erfolg-tint);color:var(--erfolg-dunkel);display:inline-block;border-radius:8px;padding:4px 10px}
.erklaerung{color:var(--muted)}
.tipp{color:var(--bernstein);background:var(--bernstein-tint);border-radius:8px;padding:8px 12px;display:inline-block}
.ergebnis h3{font-size:1.5rem;margin:18px 0 12px}
.ergebnis .zeile{padding:10px 12px;margin:6px 0;border:0;border-radius:8px}
.zeile.richtig{color:var(--erfolg-dunkel);background:var(--erfolg-tint)}
.zeile.fast{color:var(--bernstein);background:var(--bernstein-tint)}
.zeile.falsch{color:var(--rot);background:var(--rot-tint)}
.btn-sekundaer{min-height:44px;padding:10px 16px;border:1px solid var(--rand);background:var(--card);border-radius:10px;cursor:pointer;font-size:1rem;transition:border-color .15s}
.btn-sekundaer:hover{border-color:var(--akzent)}
/* Achtung: NICHT .btn-leise verwenden — die Klasse existiert seit Meilenstein A (Abmelden-Button, border:0/background:none) und würde sonst still umgestylt. */

/* --- B2: 5 interaktivere Aufgabentypen (v0.4.0) --- */
.frage{font-weight:650;margin:0 0 12px;font-size:1.05rem}
/* Zuordnen + Kategorien: Karten wie .option-Pills, gewählt = Akzent */
.zuordnen-gitter{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zuordnen-spalte{display:flex;flex-direction:column;gap:8px}
.zuordnen-karte,.kat-karte,.markieren-satz{min-height:44px;text-align:left;padding:10px 14px;border:1px solid var(--rand);background:var(--card);border-radius:10px;cursor:pointer;font-size:1rem;transition:border-color .15s,background .15s}
.zuordnen-karte:hover,.kat-karte:hover,.markieren-satz:hover{border-color:var(--akzent)}
.zuordnen-karte.gewaehlt,.kat-karte.gewaehlt{border-color:var(--akzent);background:var(--akzent-tint);box-shadow:inset 0 0 0 1px var(--akzent)}
/* Verbunden = NEUTRAL blau (Grün ist dem Prüf-Ergebnis vorbehalten!) + Paar-Nummern-Badge */
.zuordnen-karte{position:relative}
.zuordnen-karte.verbunden{border-color:var(--akzent-2);background:var(--blau-tint)}
.zuordnen-karte.verbunden::after{content:attr(data-badge);position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--akzent-2);color:#fff;font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:var(--schatten)}
.kat-ablage{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;min-height:44px}
.kat-behaelter-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:12px}
.kat-behaelter{min-height:88px;padding:8px;border:2px dashed var(--rand);background:var(--bg);border-radius:var(--radius);display:flex;flex-direction:column;gap:8px}
.behaelter-kopf{min-height:44px;text-align:left;padding:8px 10px;border:1px solid transparent;background:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:650;color:var(--akzent-dunkel);transition:background .15s,border-color .15s}
.behaelter-kopf:hover{background:var(--akzent-tint);border-color:var(--akzent)}
.behaelter-inhalt{display:flex;flex-wrap:wrap;gap:6px}
.behaelter-inhalt .kat-karte{background:var(--akzent-tint);border-color:var(--akzent)}
/* Markieren: Toggle-Sätze, gewählt = Akzent-Pill */
.markieren-text{background:var(--bg);border-radius:10px;padding:10px 14px}
.markieren-liste{display:flex;flex-direction:column;gap:8px}
.markieren-satz[aria-pressed="true"],.markieren-satz.markiert{border-color:var(--akzent);background:var(--akzent-tint);box-shadow:inset 0 0 0 1px var(--akzent);font-weight:600}
/* Memory: 3D-Flip-Karten — Rückseite = Globus auf Grün-Gradient, Vorderseite = Begriff */
.memory-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;perspective:900px}
.memory-karte{position:relative;min-height:86px;border:0;border-radius:12px;cursor:pointer;font-size:.95rem;padding:0;background:none;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.4,.2,.2,1)}
.memory-karte::before{content:"🌍";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.9rem;border-radius:12px;background:linear-gradient(145deg,var(--akzent) 0%,var(--akzent-dunkel) 100%);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 8px,transparent 8px 16px),linear-gradient(145deg,var(--akzent) 0%,var(--akzent-dunkel) 100%);border:1px solid var(--akzent-dunkel);backface-visibility:hidden}
.memory-karte .memory-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;border-radius:12px;background:var(--card);border:1px solid var(--akzent);transform:rotateY(180deg);backface-visibility:hidden}
.memory-karte.verdeckt:hover{transform:translateY(-3px)}
.memory-karte.verdeckt .memory-text{visibility:hidden}
.memory-karte.aufgedeckt,.memory-karte.gefunden{transform:rotateY(180deg)}
.memory-karte.gefunden{cursor:default;animation:gefunden-pop .35s ease-out}
.memory-karte.gefunden .memory-text{background:var(--erfolg-tint);color:var(--erfolg-dunkel);font-weight:600;border-color:var(--erfolg)}
@keyframes gefunden-pop{0%{transform:rotateY(180deg) scale(1)}50%{transform:rotateY(180deg) scale(1.08)}100%{transform:rotateY(180deg) scale(1)}}
/* Schätzen: Eingabefeld + Einheit (Björn-Feedback: Schrift war zu groß → normales Maß) */
.schaetz-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.schaetz-eingabe{max-width:180px;font-size:1rem;font-weight:600;text-align:right;padding:10px 12px}
.schaetz-eingabe::placeholder{font-weight:400;font-size:.9rem} /* Platzhalter leiser + kleiner als der eingetippte Wert — wird nie abgeschnitten */
.schaetz-einheit{font-size:1rem;font-weight:650;color:var(--muted)}
@media(max-width:480px){.zuordnen-gitter{grid-template-columns:1fr}}

/* --- B3: Delight & Wiederspielwert --- */
.balken{height:8px;background:var(--rand);border-radius:999px;margin:0 0 14px;overflow:hidden}
.balken-fuellung{height:100%;background:var(--akzent);border-radius:999px;transition:width .35s ease}
.btn:active,.btn-sekundaer:active,.zuordnen-karte:active,.kat-karte:active,.markieren-satz:active,.option:active,.ordnen:active{transform:scale(.97)}
.feier-karte{position:relative;text-align:center;overflow:hidden;border-left-color:var(--akzent)}
.feier-emoji{font-size:3rem;margin:4px 0}
.feier-karte h3{font-size:1.5rem;margin:0 0 6px}
.feier-text{color:var(--muted);margin:0 0 14px}
.feier-karte .aktionen{justify-content:center}
.konfetti{position:absolute;inset:0;pointer-events:none}
.konfetti .partikel{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;opacity:.9;animation:konfetti-fall 2.6s linear infinite}
.konfetti .k1{background:var(--akzent)}
.konfetti .k2{background:var(--akzent-2)}
.konfetti .k3{background:var(--bernstein)}
.konfetti .k4{background:#d16ba5}
.konfetti .partikel:nth-child(4n){left:8%;animation-delay:.1s}
.konfetti .partikel:nth-child(4n+1){left:28%;animation-delay:.7s}
.konfetti .partikel:nth-child(4n+2){left:52%;animation-delay:.3s}
.konfetti .partikel:nth-child(4n+3){left:76%;animation-delay:1.1s}
.konfetti .partikel:nth-child(3n){left:16%;animation-delay:1.5s}
.konfetti .partikel:nth-child(5n){left:64%;animation-delay:.9s}
.konfetti .partikel:nth-child(7n){left:88%;animation-delay:1.9s}
.konfetti .partikel:nth-child(2n){width:6px;height:10px}
@keyframes konfetti-fall{0%{transform:translateY(-12px) rotate(0)}100%{transform:translateY(320px) rotate(540deg)}}

@media(prefers-reduced-motion:reduce){
  .zuordnen-karte,.kat-karte,.behaelter-kopf,.markieren-satz,.memory-karte,.balken-fuellung{transition:none}
  .memory-karte.aufgedeckt,.memory-karte.gefunden{transform:rotateY(180deg)}
  .memory-karte.gefunden{animation:none}
  .konfetti{display:none}
  .diamant-regen{display:none}
  .btn:active,.btn-sekundaer:active,.zuordnen-karte:active,.kat-karte:active,.markieren-satz:active,.option:active,.ordnen:active{transform:none}
  .reihenitem{transition:none}
  .reihenitem.ziehend{transform:none}
}

/* --- C1: Verwaltung + QR-Druckbogen (v0.6.0) --- */
.verw-block{background:var(--card);border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--schatten);padding:18px 20px;margin:16px 0}
.verw-block h2{margin:0 0 10px;font-size:1.15rem;color:var(--akzent-dunkel)}
.code-zeile,.konto-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--rand)}
.code-zeile.verbraucht{color:var(--muted)}
.konto-zeile .btn-sekundaer{min-height:44px;padding:8px 12px}
.klassen-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--akzent-tint);color:var(--akzent-dunkel);border-radius:999px;padding:6px 12px;font-weight:600}
.chip-x{border:0;background:none;cursor:pointer;font-size:1.1rem;line-height:1;color:var(--akzent-dunkel);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.karten-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:12px;margin-top:12px}
.qr-karte{border:1px dashed var(--rand);border-radius:10px;padding:10px;text-align:center;background:#fff}
.qr-img{width:100%;max-width:160px;height:auto}
.qr-code{font-family:ui-monospace,monospace;font-weight:700;letter-spacing:.12em;margin-top:6px}
.qr-anleitung{font-size:.72rem;color:var(--muted);margin-top:4px}
.rolle-badge{font-size:.78rem;font-weight:700;border-radius:999px;padding:2px 10px;white-space:nowrap}
.rolle-schueler{background:var(--akzent-tint);color:var(--akzent-dunkel)}
.rolle-lehrer{background:var(--bernstein-tint);color:var(--bernstein)}
.klassen-picker{max-width:180px;width:auto}
.batch-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--akzent-tint);border:1px solid var(--akzent);border-radius:10px;padding:10px 14px;margin-bottom:12px}
.batch-info{font-weight:700;color:var(--akzent-dunkel)}
.check-wrap{min-width:44px;min-height:44px;margin:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.konto-check{width:auto;min-width:24px;min-height:24px;transform:scale(1.3);accent-color:var(--akzent);flex:none}
.qr-lehrer{font-size:.8rem;font-weight:700;color:var(--bernstein);margin-top:4px}
.qr-karte-lehrer{border-color:var(--bernstein)}
@media print{
  /* Whitelist statt Blacklist: ALLE Verwaltungs-Sections verstecken, NUR die Codes-Section (.verw-codes)
     entkleidet sichtbar lassen — sie enthaelt den Druckbogen. Ein pauschales display:none auf .verw-block
     wuerde den .druckbogen mit-abschalten (display:none-Nachfahren sind nicht re-aktivierbar). */
  header.app,#inhalt>h1,.verw-block{display:none!important}
  .verw-block.verw-codes{display:block!important;border:0;box-shadow:none;background:none;padding:0;margin:0}
  .verw-codes h2,.verw-codes label,.verw-codes input,.verw-codes select,.verw-codes>p,.code-liste,.btn,.btn-sekundaer{display:none!important}
  main{max-width:none;padding:0}
  .karten-grid{grid-template-columns:repeat(2,1fr);gap:0}
  .qr-karte{border:1px solid #999;break-inside:avoid;page-break-inside:avoid;margin:0}
  .qr-karte-lehrer{border:2px solid #333!important}
  @page{size:A4;margin:12mm}
}

/* --- C2: Diamanten --- */
.diamant-zeile{display:inline-flex;gap:6px;align-items:center;vertical-align:middle}
.diamant-leer{opacity:.5}
.diamant-regen{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.diamant-regen .regen-diamant{position:absolute;top:-16px;animation:diamant-fall 2.6s linear infinite}
.diamant-regen .regen-diamant:nth-child(4n){left:10%;animation-delay:.1s}
.diamant-regen .regen-diamant:nth-child(4n+1){left:34%;animation-delay:.6s}
.diamant-regen .regen-diamant:nth-child(4n+2){left:58%;animation-delay:.3s}
.diamant-regen .regen-diamant:nth-child(4n+3){left:82%;animation-delay:1s}
.diamant-regen.stark .regen-diamant{animation-duration:2s}
@keyframes diamant-fall{0%{transform:translateY(-16px) rotate(0)}100%{transform:translateY(340px) rotate(200deg)}}
.meilenstein-karte{border-left-color:var(--diamant-dunkel)}
.meilenstein-diamant{display:flex;justify-content:center;margin:6px 0 10px}
.diamant-zaehler{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 12px;border-radius:999px;background:var(--akzent-tint);color:var(--akzent-dunkel);text-decoration:none;font-weight:700;margin-left:12px}
.diamant-zaehler b{font-size:1rem}

.fortschritt-kopf{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:0 0 18px}
.fortschritt-module{display:flex;flex-direction:column}
.kopf-zahl{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--rand);border-radius:var(--radius);padding:10px 16px;box-shadow:var(--schatten)}
.kopf-zahl b{font-size:1.6rem;color:var(--akzent-dunkel)}
.kopf-label{color:var(--muted);font-size:.9rem}
.streak{color:var(--bernstein);font-weight:600;margin:0}
.modul-gruppe{background:var(--card);border:1px solid var(--rand);border-radius:var(--radius);padding:10px 16px;margin:0 0 12px;box-shadow:var(--schatten)}
.modul-gruppe.leer{opacity:.7}
.modul-summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;min-height:44px;gap:12px}
.modul-titel{font-weight:600}
.modul-meister{color:var(--muted);font-size:.9rem}
.set-zeile{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid var(--rand)}
.set-name{color:var(--muted)}

/* --- T11: Selbst-Reset (voll + pro Modul) --- */
.reset-voll{margin-top:24px;padding-top:16px;border-top:1px solid var(--rand)}
.reset-host{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.reset-frage{color:var(--muted)}
.modul-reset{margin-top:10px}

/* --- KD2: Klimadiagramm-SVG (responsiv, kein horizontales Scrollen) --- */
.kd-figur{max-width:100%;height:auto;display:block}
.btn-gefahr{min-height:44px;padding:10px 16px;border:1px solid var(--rot);background:var(--rot-tint);color:var(--rot);border-radius:10px;cursor:pointer;font-weight:600}

/* --- KD Layout (spec §12 A): Klimadiagramm einmal an der Seite statt je Aufgabenkarte --- */
.kd-layout{display:flex;gap:1.25rem;align-items:flex-start}
.kd-pane-diagramm{flex:0 0 46%;position:sticky;top:5rem;min-width:0;max-width:100%} /* 46% statt 62%: seit dem Quadrat-Raster (Ä6) ist das KD HOCHformat (~1,18) — bei 62% ragte es weit unter den Viewport. min-width:0 + max-width:100%: die 34rem-Klimatabelle darf das Pane nicht aufdrücken (gestapelt shrink-to-fit!) — sie scrollt im Wrap */
.kd-pane-aufgaben{flex:1;min-width:0}
@media(max-width:700px){
  .kd-layout{flex-direction:column}
  .kd-pane-diagramm{flex-basis:auto;position:sticky;top:3.25rem;z-index:4;background:var(--bg)}
}

/* --- Klimatabelle (spec §12 D + F-J): weiche Karte, KD-Farbecho, kein Excel-Gitter ---
   Björn-Entscheid 09.07.2026: Variante C + Jahr-Trennstrich. Zeilen koppeln farblich an das KD
   darüber (kt-temp = T-Kurve #c1216b, kt-nied = N-Achse #1f7fb6 — Werte = F.T/F.N in
   klimadiagramm.mjs). Zahlen rechtsbündig + tabular-nums (gemeinsame Ziffern-/Komma-Achse). */
.klimatabelle-wrap{overflow-x:auto;margin-top:.75rem;background:var(--card);border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--schatten)}
.klimatabelle{border-collapse:collapse;font-size:.8rem;width:100%;table-layout:fixed;min-width:34rem;font-variant-numeric:tabular-nums}
.klimatabelle th,.klimatabelle td{border:0;padding:5px 4px;text-align:center;color:var(--ink)} /* zentriert: Monat+Werte fluchten exakt unter dem KD-Monatsbuchstaben (Säulenmitte); tabular-nums hält die Ziffern deckungsgleich */
.klimatabelle thead th{background:#eef2f5;color:var(--muted);font-weight:600;border-bottom:2px solid var(--rand)}
.klimatabelle tbody th,.klimatabelle tbody td{border-top:1px solid #eef3f6}
.klimatabelle tbody th{text-align:left;font-weight:600;white-space:nowrap}
.klimatabelle .kt-temp th{background:#fbe9f1;color:#8e1450;box-shadow:inset 3px 0 0 #c1216b}
.klimatabelle .kt-nied th{background:#e4f1f8;color:#12557d;box-shadow:inset 3px 0 0 #1f7fb6}
.klimatabelle .kt-temp td{background:#fdf6f9}
.klimatabelle .kt-nied td{background:#f5fafc}
.klimatabelle th:last-child,.klimatabelle td:last-child{border-left:2px solid var(--rand);font-weight:700}

/* --- Lehrer-Material (kd-material.mjs): Download-Karte unter dem Modul --- */
.material-karte{background:var(--card);border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--schatten);padding:18px;margin-top:24px}
.material-karte h2{margin:0 0 6px;font-size:1.1rem;color:var(--akzent-dunkel)}
.material-wahl{max-width:320px;margin:10px 0}
.material-schalter{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;margin:.4rem 0;cursor:pointer;font-weight:400;white-space:nowrap}
.material-zeile{display:flex;gap:8px;flex-wrap:wrap}
.material-zeile .btn-sekundaer{min-height:44px}

/* --- Stations-Weltkarte (Ä3 Runde 2, Spec 2026-07-10) --- */
main.stationskarte{max-width:none;padding:0}
.seiten-titel{font-weight:600}
.karten-zeile{position:relative;display:flex;align-items:stretch;overflow:hidden}
.karten-buehne{position:relative;flex:1 1 auto;min-width:0;background:#dbeaf6;height:calc(100vh - 65px);min-height:420px}
svg.welt{display:block;width:100%;height:100%;cursor:grab;touch-action:none;user-select:none}
svg.welt.greift{cursor:grabbing}
svg.welt .meer{fill:#dbeaf6}
svg.welt .land{fill:#eceff1;stroke:#b9c6d0;stroke-width:.6;vector-effect:non-scaling-stroke}
svg.welt .gitter{stroke:#fff;stroke-width:.5;opacity:.55;vector-effect:non-scaling-stroke}
circle.punkt{fill:#c1216b;fill-opacity:.82;stroke:#8e1450;stroke-width:.3;cursor:pointer}
circle.punkt.aktiv{fill:var(--akzent);stroke:#0d3a80;fill-opacity:1}
circle.punkt:focus{outline:none}
circle.punkt:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.zoom-knoepfe{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:6px}
.zoom-knoepfe button{width:44px;height:44px;border-radius:10px;border:1px solid var(--rand);background:var(--card);color:var(--ink);font-size:1.15rem;font-weight:600;cursor:pointer;box-shadow:var(--schatten)}
.zoom-knoepfe button:hover{background:var(--akzent-tint);border-color:var(--akzent)}
.zoom-knoepfe button:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.hinweis-pille{position:absolute;bottom:14px;left:14px;background:rgba(255,255,255,.92);border:1px solid var(--rand);border-radius:999px;padding:6px 14px;font-size:.8rem;color:var(--muted);pointer-events:none}
.karten-tooltip{position:absolute;background:var(--card);color:var(--ink);border:1px solid var(--rand);box-shadow:var(--schatten-stark);padding:4px 10px;border-radius:7px;font-size:.8rem;pointer-events:none;transform:translate(-50%,-135%);white-space:nowrap;display:none;z-index:5}
.stations-panel{flex:0 0 auto;width:0;overflow:hidden;background:var(--card);border-left:0 solid var(--rand);position:relative}
.stations-panel.offen{width:min(640px,44%);border-left-width:1px}
.stations-panel .panel-inner{width:min(640px,44vw);box-sizing:border-box;padding:16px 20px 22px;height:100%;overflow-y:auto}
.stations-panel .panel-zu{position:absolute;top:10px;right:12px;width:44px;height:44px;border-radius:9px;border:1px solid var(--rand);background:var(--card);font-size:1rem;cursor:pointer;color:var(--ink)}
.stations-panel h2{margin:4px 0 2px;font-size:1.12rem;color:var(--akzent-dunkel);padding-right:56px}
.panel-meta{color:var(--muted);font-size:.85rem;margin:0 0 10px}
.panel-downloads{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 6px}
.panel-quelle{font-size:.78rem;color:var(--muted);margin-top:10px}
.karten-hinweis-karte{margin:40px auto}
@media(max-width:999px){
  .karten-zeile{display:block}
  .stations-panel{position:absolute;top:0;right:0;bottom:0;width:min(640px,94%);transform:translateX(105%);transition:transform .28s ease;border-left-width:1px;box-shadow:-12px 0 28px rgba(15,35,60,.16);z-index:6;overflow:visible}
  .stations-panel.offen{transform:translateX(0);width:min(640px,94%)}
  .stations-panel .panel-inner{width:100%}
}
@media(prefers-reduced-motion:reduce){.stations-panel{transition:none}}
.lernkarten-themenfeld{margin:22px 0 10px;font-size:1.05rem;color:var(--akzent-dunkel)}
.lernkarten-themenfeld:first-child{margin-top:0}
.lernkarten-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:14px;margin-bottom:6px}
.lernkarte{background:var(--card);border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--schatten);padding:16px 18px;min-height:44px}
.lernkarte-begriff{margin:0 0 8px;font-size:1.05rem}
.lernkarte-begriff strong{font-weight:700}
.lernkarte-definition{margin:0 0 8px;line-height:1.4}
.lernkarte-beispiel{margin:0;color:var(--muted)}
.lernkarte-beispiel em{font-style:italic}

/* --- KD zeichnen (Task 13): Marker-Stile fuer den Aufgabentyp "diagramm_zeichnen" ---
   T/N-Farben + Fuellung/Trockenzeit sind hier bewusst HARTE Hex-Werte statt --Token: design.css
   hat noch keinen KD-Farb-Token, und die Klimatabelle oben (.kt-temp/.kt-nied) sowie F.T/F.N in
   kd-zeichnen-raster.mjs machen denselben Bruch schon — Konsistenz zum Bestehenden vor
   Token-Neubau. Feinheit exakt wie im Ae7-Mockup abgenommen
   (docs/referenz/kd-zeichnen-mockup-2026-07-11.html). */
.kd-zeichnen{max-width:100%;height:auto;display:block;touch-action:pan-y} /* Buehne bleibt vertikal scrollbar; touch-action:none sitzt NUR auf den Markern selbst */
.t-punkt{fill:#c1216b;stroke:#fff;stroke-width:1;r:3.6;cursor:ns-resize;touch-action:none}
.n-saeule{fill:#a8d4ec;stroke:#1f7fb6;stroke-width:.6;cursor:ns-resize;touch-action:none}
.t-punkt:focus,.n-saeule:focus{outline:none} /* Ring kommt ueber :focus-visible, s. Z.44 */
.nicht-gesetzt{opacity:.35} /* Marker ohne Wert (wert===null in kd-zeichnen-interaktion.mjs) liest sich als "noch nicht gesetzt" */

/* Dreistufige Pruef-Faerbung (typ-diagramm-zeichnen.mjs: richtig→ok, fast→nah, falsch→fehler).
   Bewusst auf .t-punkt/.n-saeule GESCOPED statt bare .ok/.nah/.fehler: .fehler existiert app-weit
   schon als Fehlermeldungs-Klasse (Z.19, <p class="fehler"> auf Login/Setup/Registrierung/Modul-
   Ladefehlern) — stroke wirkt dort nicht (kein SVG-Kontext), aber explizites Scoping ist robuster
   als sich auf den Zufall zu verlassen. Kreis (T-Punkt): Fuellung UND Rand faerben sich (die
   T-Farbe/weisse Umrandung soll im Ergebnis komplett hinter der Wertungsfarbe zurücktreten).
   Saeule (N): NUR der duenne Rand faerbt sich, die helle N-Fuellflaeche bleibt erhalten. */
.t-punkt.ok,.n-saeule.ok{stroke:var(--erfolg)}
.t-punkt.nah,.n-saeule.nah{stroke:#c98a00} /* Ae7-Mockup-Gelb, bewusst NICHT --bernstein (#a15c00 ist der allgemeine "fast"-Ton anderer Aufgabentypen) */
.t-punkt.fehler,.n-saeule.fehler{stroke:var(--rot)}
.t-punkt.ok{fill:var(--erfolg)}
.t-punkt.nah{fill:#c98a00}
.t-punkt.fehler{fill:var(--rot)}

/* Trockenzeit-Schattierung (Loesungs-Overlay, klimadiagramm.mjs → trockenzeitOverlay): liegt
   optisch ueber der Zeichenflaeche, darf Klicks/Drags aber nie schlucken. */
.trocken{fill:#ffe8a3;opacity:.5;pointer-events:none}

/* Modus-Umschalter dimmt + entkoppelt die inaktive Ebene (Task-8-Fund: sonst fangen ihre Marker
   Taps ab, die eigentlich der aktiven Ebene gehoeren sollten). Die wrap-Klasse modus-temp/
   modus-nied kommt aus typ-diagramm-zeichnen.mjs. */
.modus-temp .n-saeule{opacity:.4;pointer-events:none}
.modus-nied .t-punkt{opacity:.4;pointer-events:none}

/* Spalten-Tap-Flaeche (Task 8): eigener Cursor, aber KEIN touch-action:none — leere Spalten
   sollen die Seite weiter vertikal scrollen lassen (nur die Marker selbst sperren Touch-Scroll). */
.spalte-hit{cursor:crosshair}

/* Modus-Umschalter + Buehnen-Karte: gleiche Pillen-/Karten-Optik wie .tab bzw. .kd-pane-diagramm. */
.kd-umschalter{display:inline-flex;border:1px solid var(--rand);border-radius:999px;overflow:hidden;margin:0 0 12px}
.umschalter-knopf{min-height:44px;padding:9px 18px;border:0;background:var(--card);color:var(--muted);font-size:1rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.umschalter-knopf:hover{color:var(--akzent)}
.umschalter-knopf[aria-pressed="true"]{background:var(--akzent);color:#fff}
.kd-zeichnen-buehne{background:var(--card);border:1px solid var(--rand);border-radius:12px;padding:6px;margin:8px 0}

/* kd-zeichnen-loesung.mjs vergibt dem AEUSSEREN Loesungs-Toggle-Container (Knopf + Diagramm-
   Behaelter) dieselbe Klasse "loesung" wie die bestehende <p class="loesung"> Pillen-Anzeige
   ("Lösung: X" in modul.mjs/kd-shell.mjs, Z.69) — hier bewusst ueber die hoehere Spezifitaet
   div.loesung entschaerft (JS dieses Tasks darf nicht angefasst werden, s. Task-Brief). */
div.loesung{display:block;font-weight:400;background:none;color:inherit;padding:0;border-radius:0}
.loesung-behaelter{margin-top:10px}
.loesung-knopf{min-height:44px;padding:10px 16px;border:1px solid var(--rand);background:var(--card);border-radius:10px;cursor:pointer;font-size:1rem;transition:border-color .15s}
.loesung-knopf:hover{border-color:var(--akzent)}
.loesung-knopf[aria-expanded="true"]{border-color:var(--akzent);background:var(--akzent-tint)}

@media(prefers-reduced-motion:reduce){.umschalter-knopf{transition:none}}