/* Alphorn lernen – Ergänzung zu basis.css (Designtokens der Website). Mobil zuerst. */
.lernen .rm-hinweis{font-size:.8rem}
.lern-kopf{padding-bottom:1rem}
.lern-band{padding-top:1.5rem}
.lern-seite{padding:clamp(24px,5vw,56px) 0 clamp(40px,6vw,80px)}
.lern-seite h1{font-size:clamp(2rem,6vw,3rem);margin-bottom:.8rem}
.abstand{margin-top:2.4rem}

/* Kacheln */
.kacheln{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:760px){.kacheln{grid-template-columns:repeat(3,1fr)}}
.kachel{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--linie);border-top:4px solid var(--abend);border-radius:8px;padding:1.1rem 1.2rem 1rem;text-decoration:none;color:var(--text);transition:box-shadow .2s,transform .2s}
.kachel:hover{color:var(--text);box-shadow:0 8px 24px rgba(20,36,59,.12);transform:translateY(-2px)}
.kachel h2{font-size:1.45rem;margin:.2rem 0 .4rem}
.kachel p{margin:0 0 .8rem;font-size:.98rem}
.kachel-nr{font-family:var(--serif);font-weight:600;color:var(--holz);font-size:.95rem}
.kachel-stand{margin-top:auto;font-size:.85rem;color:var(--leise);border-top:1px solid var(--linie);padding-top:.5rem}
.lern-hinweis{margin:0 0 1rem}
.lern-hinweis p{margin:0}

/* Karten, Knöpfe */
.karte{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:1rem 1rem 1.1rem;margin:0 0 14px}
.knopf-rand{display:inline-block;background:transparent;color:var(--holz-dunkel);border:1.5px solid var(--holz);border-radius:999px;padding:.6rem 1.1rem;font:inherit;font-weight:600;cursor:pointer}
.knopf-rand:hover{background:var(--sand)}
.knoepfe.klein{margin-top:.8rem;gap:.6rem}
.knopf[hidden]{display:none}
.mikro{display:flex;flex-direction:column;gap:.5rem;margin:0 0 14px}
.mikro .knopf{align-self:flex-start}
.mikro-status{margin:0;font-size:.92rem;color:var(--leise)}
.mikro-status.fehler{color:#8f2d1c;background:#fbe9e4;border-radius:6px;padding:.6rem .8rem}
.mikro-an #start{display:none}

/* Notenbilder */
.notenbild{display:block;width:100%;height:auto;color:var(--nacht)}
.notenbild .ns-linie,.notenbild .ns-hilfslinie{stroke:var(--nacht);stroke-width:1}
.notenbild .ns-takt-strich{stroke:var(--nacht);stroke-width:1.2}
.notenbild .ns-schluss{fill:var(--nacht)}
.notenbild .ns-hals{stroke:currentColor;stroke-width:1.3}
.notenbild .ns-kopf{fill:currentColor;stroke:currentColor;stroke-width:1}
.notenbild .ns-kopf.hohl{fill:#fff;stroke-width:1.9}
.notenbild .ns-takt text{font-family:var(--serif);font-weight:700;font-size:21px;fill:var(--nacht)}
.notenbild .ns-note{transition:color .25s}
.notenbild .ns-note.aktuell{color:var(--holz-dunkel)}
.notenbild .ns-note.gespielt{color:#2f7d4a}
.notenbild .ns-note.falsch{color:#b3261e}
.notenbild .ns-note.uebersprungen{color:#9aa3b0}
.notenbild .ns-zeiger{fill:var(--abend);opacity:0;fill-opacity:.35;transition:transform .25s ease,opacity .2s}
.notenbild.einzel{max-width:220px}
.notenbild.einzel.gross{max-width:300px;margin:0 auto}
.notenblatt-rahmen{margin:.6rem -.3rem .2rem}

/* Töne treffen */
.ziel-karte{display:grid;grid-template-columns:minmax(120px,160px) 1fr;gap:.8rem;align-items:center}
.ziel-label{margin:0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--holz);font-weight:700}
.ziel-name{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--nacht);margin:0 0 .2rem;line-height:1.2}
.ziel-text .leise{font-size:.88rem;margin-bottom:.6rem}
.messer{text-align:center}
.skala{width:100%;max-width:340px;display:block;margin:0 auto}
.skala-bogen{fill:none;stroke:var(--linie);stroke-width:10;stroke-linecap:round}
.skala-zone{fill:none;stroke:#8cc79f;stroke-width:10}
.skala-striche line{stroke:var(--leise);stroke-width:1.2}
.skala text{font-size:9px;fill:var(--leise);font-family:var(--sans)}
.nadel{stroke:var(--holz-dunkel);stroke-width:3;stroke-linecap:round;transition:transform .08s linear}
.nadel.aus{stroke:#c9c1b4}
.nadel.gut{stroke:#2f7d4a}
.nadel-punkt{fill:var(--nacht)}
.messwert{font-size:1.4rem;font-weight:700;color:var(--nacht);margin:.2rem 0 .4rem;font-variant-numeric:tabular-nums}
.messwert .leise{font-weight:400;font-size:.95rem;display:block}
.halte{height:8px;background:var(--sand);border-radius:99px;overflow:hidden;margin:.2rem auto .8rem;max-width:300px}
#halte-balken{height:100%;width:0;background:#2f7d4a;transition:width .08s linear}
.hinweis{min-height:1.6em;margin:.4rem 0;font-weight:600;color:var(--nacht)}
.hinweis.gut{color:#2f7d4a}
.hinweis.warn{color:#9a4b12}
.ergebnis{margin:0}
.ergebnis.treffer{background:#e6f3ea;border-radius:8px;padding:.6rem .8rem;color:#1f5a34}
.steuerung{display:grid;gap:.7rem}
.einst{display:flex;flex-direction:column;gap:.25rem;font-weight:600;font-size:.95rem}
.einst select,.einst input[type=number]{font:inherit;font-weight:400;color:var(--text);background:var(--papier);border:1px solid #cfc4b4;border-radius:6px;padding:.55rem .7rem;max-width:22rem}
.einst input[type=range]{width:100%;max-width:22rem;accent-color:var(--holz)}
.punkte-zeile{margin:0;font-variant-numeric:tabular-nums}

/* Werte */
.werte{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:.5rem;margin:.8rem 0}
.werte div{background:var(--sand);border-radius:8px;padding:.5rem .7rem}
.werte dt{font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--leise)}
.werte dd{margin:0;font-weight:700;font-size:1.15rem;color:var(--nacht);font-variant-numeric:tabular-nums}
.auswertung{border-top:4px solid #2f7d4a}
.auswertung h2{font-size:1.5rem}

/* Quiz */
.quiz-kopf{display:flex;justify-content:space-between;font-size:.9rem;color:var(--leise);margin:0}
.quiz-frage{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--nacht);text-align:center;margin:.4rem 0 .8rem}
.antworten{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.antwort{font:inherit;font-weight:600;font-size:1.05rem;padding:.9rem .6rem;border-radius:10px;border:1.5px solid var(--linie);background:var(--papier);color:var(--nacht);cursor:pointer;min-height:3.2rem}
.antwort:hover:not(:disabled){border-color:var(--holz)}
.antwort.richtig{background:#e6f3ea;border-color:#2f7d4a;color:#1f5a34}
.antwort.falsch{background:#fbe9e4;border-color:#b3261e;color:#8f2d1c}
.antwort:disabled{cursor:default}
.erklaerung{background:var(--sand);border-radius:8px;padding:.7rem .9rem;margin:.9rem 0 0;font-size:.97rem}
.quiz-resultat{font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--nacht);margin:.2rem 0 .4rem}
.info summary{cursor:pointer;font-weight:600;color:var(--nacht)}
.info p{margin:.7rem 0 0}

/* Einstellungen */
.einstellungen{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:.9rem 1rem;margin:22px 0 0}
.einstellungen summary{cursor:pointer;font-weight:600;color:var(--nacht)}
.einst-raster{display:grid;gap:.8rem;margin:.9rem 0}
@media (min-width:640px){.einst-raster{grid-template-columns:1fr 1fr}}
.stimmen{border-top:1px solid var(--linie);padding-top:.8rem}
.stimmen p{margin:0 0 .5rem}
.lernen [hidden]{display:none!important}
.ziel-text .knopf-rand{white-space:nowrap;padding:.45rem .9rem;font-size:.95rem}

/* Messaufnahme (Beweisstufe) */
.klein{font-size:.85rem}
.mess-hinweis{border-left:4px solid var(--holz)}
.karte h2{font-size:1.25rem;margin:0 0 .7rem}
.mess-angaben{display:grid;gap:.7rem}
.mess-angaben .klein{margin:0}
.einst input[type=text]{font:inherit;font-weight:400;color:var(--text);background:var(--papier);border:1px solid #cfc4b4;border-radius:6px;padding:.55rem .7rem;max-width:22rem;width:100%;box-sizing:border-box}
.mess-verlauf{display:block;width:100%;height:220px;background:var(--papier);border-radius:8px}
.mess-werte{grid-template-columns:repeat(4,minmax(0,1fr))}
.mess-werte dd{font-size:1rem}
.pegel{position:relative;height:10px;background:var(--sand);border-radius:99px;overflow:hidden;margin:.4rem 0 .3rem}
.pegel-balken{height:100%;width:0;background:#9aa3b0;transition:width .05s linear}
.pegel-schwelle{position:absolute;top:0;bottom:0;width:2px;background:var(--holz-dunkel);left:0}
.mess-live .klein{margin:.2rem 0 0}
.mess-schritte{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:12px}
.mess-schritt{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:.9rem 1rem}
.mess-schritt p{margin:.3rem 0}
.ms-kopf{display:flex;align-items:baseline;gap:.6rem}
.ms-kopf h3{margin:0;font-size:1.1rem}
.ms-nr{font-family:var(--serif);font-weight:700;color:var(--holz)}
.ms-status{font-weight:600;color:var(--leise)}
.ms-status.laeuft{color:#9a4b12}
.ms-status.fertig{color:#2f7d4a}
.ms-start.laeuft{background:#9a4b12;border-color:#9a4b12;color:#fff}
.ms-start:disabled,.knopf:disabled,.knopf-rand:disabled{opacity:.45;cursor:not-allowed}
.ms-ergebnis{overflow-wrap:anywhere}
.mess-takt{font-family:var(--serif);font-size:2rem;font-weight:700;text-align:center;padding:1.6rem .5rem;border-radius:10px;background:var(--sand);color:var(--nacht);transition:background .06s}
.mess-takt.an{background:var(--holz);color:#fff}
.tabelle-rahmen{overflow-x:auto;margin:0 0 .6rem}
.mess-tabelle{border-collapse:collapse;width:100%;font-size:.9rem}
.mess-tabelle th,.mess-tabelle td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--linie);vertical-align:top}
.mess-tabelle td:nth-child(4){color:var(--leise);font-size:.82rem;min-width:10rem}
.mess-links{margin:.6rem 0 0;padding-left:1.1rem;overflow-wrap:anywhere}
.mess-links li{margin:.25rem 0}
.mess-export .knoepfe{display:flex;flex-wrap:wrap}
.lern-hinweis .abstand-klein{margin-top:.5rem}
.mess-leiste{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:.8rem;background:rgba(20,36,59,.94);color:#fff;padding:.7rem 16px calc(.7rem + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mess-leiste[hidden]{display:none}
.mess-leiste-text{font-size:.95rem;font-variant-numeric:tabular-nums;min-width:0}
.mess-leiste .knopf{flex:none;background:#9a4b12;border-color:#9a4b12}
body.mess-aktiv{padding-bottom:5rem}

/* === LW (Lernweg: Navigation, Startseite, Übungs-Player, Kompetenzkarte, Profil, Farbschema, Schrift, Ansicht) === */
.lernen{--lw-gut:#2f7d4a;--lw-gut-hell:#e6f3ea;--lw-warn:#9a4b12;--lw-warn-hell:#fdf0e1;--lw-schlecht:#b3261e;--lw-schlecht-hell:#fbe9e4}
.lw-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Navigation mit neun Einträgen: Menü-Knopf bis 1240 px, darüber etwas enger */
@media (max-width:1240px){
  .lernen .menu-knopf{display:inline-flex}
  .lernen .hauptnav{order:4;display:none;width:100%;flex-direction:column;gap:0;padding:.5rem 0 1rem}
  .lernen .hauptnav a{padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:1.1rem}
  .lernen .menu-offen .hauptnav{display:flex}
  .lernen .kopf-innen{justify-content:space-between}
}
@media (min-width:1241px){.lernen .hauptnav{gap:1.1rem;font-size:.98rem}}
.lw-knoepfe{margin-top:.8rem;gap:.6rem .8rem}
.knopf-link{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--holz-dunkel);text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.kachel h3{font-size:1.3rem;margin:.2rem 0 .4rem}
.lw-balken{height:8px;background:var(--sand);border-radius:99px;overflow:hidden}
.lw-balken span{display:block;height:100%;width:0;background:var(--lw-gut);border-radius:99px;transition:width .4s ease}

/* Startseite */
.lw-profilzeile{margin:.9rem 0 0;font-size:.95rem;color:var(--leise)}
.lw-profilzeile span{color:var(--nacht);font-weight:600}
.lw-profilwahl{border-top:4px solid var(--abend);padding:1.1rem 1.1rem 1.2rem;margin-bottom:1.4rem}
.lw-profilwahl h2{font-size:1.5rem;margin:0 0 .3rem}
.lw-profilwahl > .leise{margin:0}
.lw-frage{border:0;margin:1.1rem 0 0;padding:0;min-width:0}
.lw-frage legend{font-weight:700;color:var(--nacht);margin:0 0 .45rem;padding:0}
.lw-wahlen{display:flex;flex-wrap:wrap;gap:.5rem}
.lw-wahl{position:relative;display:inline-flex;max-width:100%}
.lw-wahl input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.lw-wahl span{display:inline-block;padding:.55rem 1rem;border:1.5px solid var(--linie);border-radius:999px;background:var(--papier);color:var(--nacht);font-weight:600;cursor:pointer;line-height:1.3;min-height:2.75rem;display:inline-flex;align-items:center}
.lw-wahl:hover span{border-color:var(--holz)}
.lw-wahl input:checked + span{background:var(--nacht);border-color:var(--nacht);color:#fff}
.lw-wahl input:focus-visible + span{outline:3px solid var(--abend);outline-offset:2px}
.lw-frage-hinweis{margin:.4rem 0 0;font-size:.88rem}
.lw-heute{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;background:var(--nacht);color:#eef1f6;border-radius:12px;padding:1.3rem 1.3rem 1.4rem;box-shadow:0 10px 30px rgba(20,36,59,.18)}
.lw-heute .unterzeile{color:var(--abend);margin:0}
.lw-heute h2{color:#fff;font-size:clamp(1.5rem,4vw,2rem);margin:.15rem 0 .35rem}
.lw-heute-text{flex:1 1 17rem;min-width:0}
.lw-heute-text > p{margin:0 0 .4rem;color:#dfe5ee}
.lw-heute-liste{margin:.2rem 0 0;padding-left:1.25rem;color:#c9d1dd;font-size:.95rem}
.lw-heute-liste li{margin:.1rem 0}
.lw-heute-knopf{flex:none}
.lw-straenge{grid-template-columns:1fr;margin-bottom:.6rem}
@media (min-width:600px){.lw-straenge{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.lw-straenge{grid-template-columns:repeat(3,1fr)}}
.lw-strang{border-top-color:var(--strang-farbe,var(--abend))}
.lw-strang:hover{transform:none;box-shadow:none}
.lw-strang h3{font-size:1.35rem;margin:.1rem 0 .15rem}
.lw-strang-stufe{margin:0 0 .55rem;font-weight:600;color:var(--nacht);font-size:.95rem}
.lw-strang .lw-balken span{background:var(--strang-farbe,var(--lw-gut))}
.lw-strang-zahlen{font-size:.85rem;color:var(--leise);margin:.45rem 0 .7rem}
.lw-strang-knoepfe{margin:auto 0 0;display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center}
.lw-strang-knoepfe .knopf-rand{padding:.4rem .95rem;font-size:.92rem;text-decoration:none}
.lw-strang-karte{font-size:.9rem;font-weight:600}
.lw-karte-link{margin:0 0 .4rem}

/* Übungs-Player */
.ue-fortschritt{margin:0 0 1rem}
.ue-fortschritt p{margin:0 0 .35rem;font-weight:600;color:var(--nacht);font-size:.95rem}
.ue-fortschritt .lw-balken span{background:var(--holz)}
.ue-kurz{font-size:1.1rem;margin:-.3rem 0 1rem;color:var(--leise)}
.ue-hinweis{font-size:.92rem;margin:0 0 14px}
.ue-hinweis span{display:block}
.ue-lektion summary span{font-weight:700}
.ue-lektion .th-lektion-text{margin-top:.4rem}
.ue-buehne{margin:0 0 14px}
.ue-buehne:empty{display:none}
.ue-rueckmeldung{border-top:4px solid var(--lw-gut)}
.ue-rueckmeldung.ue-mittel{border-top-color:var(--abend)}
.ue-rueckmeldung.ue-schwer{border-top-color:var(--lw-warn)}
.ue-rueckmeldung.ue-folgt{border-top-color:var(--linie);background:var(--sand)}
.ue-rueckmeldung p{margin:0 0 .4rem}
.ue-rm-titel{font-family:var(--serif);font-size:1.6rem;font-weight:600;color:var(--nacht);line-height:1.2}
.ue-rm-detail{font-weight:600}
.ue-weg{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.3rem .8rem;margin:.7rem 0 .5rem}
.ue-weg-text{font-size:.85rem;color:var(--leise);font-weight:600}
.ue-weg-zahl{grid-column:1/-1;font-size:.82rem;color:var(--leise);font-variant-numeric:tabular-nums}
.ue-neu{font-weight:600;color:var(--nacht);background:var(--sand);border-radius:8px;padding:.5rem .7rem}
.ue-stern,.ue-sterne{color:#9a6a00;font-weight:700;font-size:1.1rem;letter-spacing:.04em}
.ue-knoepfe{margin:0 0 1rem}
.ue-plan h2{font-size:1.5rem}
.ue-planliste{padding-left:1.3rem;margin:.4rem 0 1.1rem}
.ue-planliste li{margin:.4rem 0}
.ue-plan-titel{display:block;font-weight:600;color:var(--nacht)}
.ue-plan-meta{display:block;font-size:.85rem;color:var(--leise)}
.ue-liste{list-style:none;padding:0;margin:.6rem 0 1rem;border-top:1px solid var(--linie)}
.ue-liste li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--linie)}
.ue-liste-titel{font-weight:600;color:var(--nacht);min-width:0;overflow-wrap:anywhere}
.ue-liste-wert{color:var(--leise);font-size:.9rem;text-align:right;flex:none}
.ue-ende{border-top:4px solid var(--lw-gut)}
.ue-ende h2:focus{outline:none}
.ue-ergebnis-stufe{font-family:var(--serif);font-size:1.6rem;font-weight:600;color:var(--nacht);margin:.2rem 0 .5rem}
.ue-links{margin-top:1.2rem}
.lw-folgt{background:var(--sand);border:1px dashed #cfc4b4;border-radius:10px;padding:1rem 1.1rem}
.lw-folgt p{margin:0 0 .3rem}
.lw-folgt-titel{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--nacht)}
.lw-folgt.lw-fehler{border-color:var(--lw-schlecht)}
#ue-titel:focus{outline:none}
@media (min-width:700px){body.ansicht-tablet .ue-seite .spalte.schmal{max-width:56rem}}

/* Kompetenzkarte: mobil Liste je Strang, ab 760 px Raster Strang × Stufe */
.kk-seite .einleitung{max-width:44rem}
.kk-legende{list-style:none;margin:0 0 .5rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.9rem;color:var(--leise)}
.kk-legende li{display:flex;align-items:center;gap:.45rem}
.kk-summe{margin:0 0 .4rem}
.kk-raster{display:block}
.kk{margin-bottom:1.4rem}
.kk-ecke,.kk-zeilenkopf,.kk-zelle-leer{display:none}
.kk-strang{font-size:1.5rem;margin:1.6rem 0 .2rem;padding-top:.6rem;border-top:4px solid var(--strang-farbe,var(--abend));scroll-margin-top:calc(var(--kopf-h,76px) + 12px)}
.kk-zelle-stufe{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--holz);margin:.9rem 0 .35rem}
.kk-liste{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.kk-f{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.3rem .55rem;background:#fff;border:1.5px solid var(--linie);border-left-width:5px;border-radius:8px;padding:.5rem .6rem;text-decoration:none;color:var(--text);min-height:2.75rem}
a.kk-f:hover{border-color:var(--holz);color:var(--text)}
.kk-zeichen{flex:none;width:1.45rem;height:1.45rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;line-height:1}
.kk-text{display:flex;flex-direction:column;min-width:0;flex:1}
.kk-titel{font-weight:600;line-height:1.3;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.kk-info{font-size:.78rem;color:var(--leise);line-height:1.35}
.kk-f .lw-balken{flex-basis:100%;height:5px}
.kk-offen{border-left-color:var(--holz)}
.kk-offen .kk-zeichen{color:var(--holz-dunkel);border:1.5px solid var(--holz)}
.kk-faellig{border-left-color:var(--lw-warn);background:var(--lw-warn-hell)}
.kk-faellig .kk-zeichen{background:var(--lw-warn);color:#fff}
.kk-beherrscht{border-left-color:var(--lw-gut);background:var(--lw-gut-hell)}
.kk-beherrscht .kk-zeichen{background:var(--lw-gut);color:#fff}
.kk-gesperrt{border-style:dashed;border-left-style:solid;border-left-color:#aab2be;background:#f7f5f1;color:var(--leise)}
.kk-gesperrt .kk-titel{font-weight:500}
.kk-gesperrt .kk-zeichen{color:var(--leise)}
.kk-schloss{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.kk-andere{opacity:.62}
.kk-muster{display:inline-flex;width:auto;min-height:0;padding:0;border:0;background:none}
.lw-folgt-klein{font-size:.88rem}
.kk-leer{margin:.3rem 0 0}
@media (min-width:760px){
  body:not(.ansicht-handy) .kk-raster{display:grid;grid-template-columns:7.5rem repeat(5,minmax(0,1fr));gap:.45rem .6rem;align-items:stretch;margin-top:1rem}
  body:not(.ansicht-handy) .kk-ecke{display:block;grid-row:1;grid-column:1}
  body:not(.ansicht-handy) .kk-zeilenkopf{display:flex;flex-direction:column;grid-column:1;padding:.55rem .2rem 0;border-top:1px solid var(--linie)}
  body:not(.ansicht-handy) .kk-zeilen-nr{font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--nacht);line-height:1}
  body:not(.ansicht-handy) .kk-zeilen-name{font-size:.76rem;color:var(--leise);line-height:1.25;margin-top:.15rem}
  body:not(.ansicht-handy) .kk-strang{grid-row:1;margin:0;font-size:1.1rem;align-self:end;padding-top:.45rem}
  body:not(.ansicht-handy) .kk-zelle{border-top:1px solid var(--linie);padding-top:.5rem;min-width:0}
  body:not(.ansicht-handy) .kk-zelle-leer{display:block}
  body:not(.ansicht-handy) .kk-zelle-stufe{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
  body:not(.ansicht-handy) .kk-f{font-size:.88rem;padding:.4rem .45rem;gap:.25rem .4rem}
  body:not(.ansicht-handy) .kk-zeichen{width:1.25rem;height:1.25rem;font-size:.78rem}
  body:not(.ansicht-handy) .kk-leer{padding-top:.5rem}
}

/* Profil */
.pf-status{min-height:1.6em;font-weight:500}
.pf-form .lw-frage:first-child{margin-top:0}
.pf-stufen h2,.pf-lernstand h2{font-size:1.35rem}
.pf-stufe{border-top:1px solid var(--linie);padding:.9rem 0 .3rem}
.pf-stufe:first-child{border-top:0;padding-top:.2rem}
.pf-stufe .einst{font-weight:600}
.pf-stufe .einst select{width:100%;max-width:26rem}
.pf-stufe-knoepfe{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin:.55rem 0 0}
.pf-stufe-knoepfe .knopf-rand{padding:.45rem 1rem;font-size:.95rem}
.pf-stufe-info{margin:.4rem 0 0;font-size:.85rem}
.pf-knoepfe{display:flex;flex-wrap:wrap}
.pf-datei{position:relative;display:inline-flex;align-items:center}
.pf-datei input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.pf-datei:focus-within{outline:3px solid var(--abend);outline-offset:3px}
.pf-reset.pf-scharf{background:var(--lw-schlecht);border-color:var(--lw-schlecht);color:#fff}

/* Farbschema «kontrast»: dunklere Schrift, deutlichere Ränder, Blau als Signalfarbe (kein Rot/Grün-Gegensatz), WCAG AA */
body.schema-kontrast{--nacht:#0a1629;--text:#000;--leise:#3b4250;--linie:#7a818c;--holz:#0b57d0;--holz-dunkel:#0842a0;--abend:#0b57d0;--abend-hell:#dde8fb;--papier:#fff;--sand:#eef2f8;
  --lw-gut:#0b57d0;--lw-gut-hell:#e3ecfb;--lw-warn:#b45309;--lw-warn-hell:#fff4e5;--lw-schlecht:#b45309;--lw-schlecht-hell:#fff4e5}
body.schema-kontrast .kopf .marke-region,body.schema-kontrast .fuss h2,body.schema-kontrast .lw-heute .unterzeile{color:#a9c8ff}
body.schema-kontrast .horn-rohr{stroke:#a9c8ff}
body.schema-kontrast .horn-becher{fill:#a9c8ff}
body.schema-kontrast .hauptnav a:hover,body.schema-kontrast .hauptnav a[aria-current="page"]{border-color:#a9c8ff}
body.schema-kontrast .knopf-hell{background:#fff;color:#0a1629}
body.schema-kontrast .knopf-hell:hover{background:#dde8fb;color:#0a1629}
body.schema-kontrast .lw-heute-liste,body.schema-kontrast .lw-heute-text > p{color:#fff}
body.schema-kontrast .kachel,body.schema-kontrast .karte,body.schema-kontrast .einstellungen{border-color:var(--linie)}
body.schema-kontrast .antwort{border-color:var(--linie)}
body.schema-kontrast .antwort.richtig{background:var(--lw-gut-hell);border-color:var(--lw-gut);color:#06306e}
body.schema-kontrast .antwort.falsch{background:var(--lw-warn-hell);border-color:var(--lw-warn);color:#6b2d05}
body.schema-kontrast .antwort.richtig::before{content:"✓ "}
body.schema-kontrast .antwort.falsch::before{content:"✗ "}
body.schema-kontrast .hinweis.gut{color:#0842a0}
body.schema-kontrast .hinweis.warn{color:#8a3f06}
body.schema-kontrast .nadel.gut{stroke:#0b57d0}
body.schema-kontrast #halte-balken{background:#0b57d0}
body.schema-kontrast .skala-zone{stroke:#8fb4f2}
body.schema-kontrast .ergebnis.treffer{background:#e3ecfb;color:#06306e}
body.schema-kontrast .auswertung{border-top-color:#0b57d0}
body.schema-kontrast .notenbild .ns-note.gespielt{color:#0b57d0}
body.schema-kontrast .notenbild .ns-note.falsch{color:#b45309}
body.schema-kontrast .ms-status.fertig{color:#0842a0}
body.schema-kontrast .kk-gesperrt{background:#f4f5f7;border-left-color:#7a818c}
body.schema-kontrast .kk-andere{opacity:.75}
body.schema-kontrast .ue-stern,body.schema-kontrast .ue-sterne{color:#0842a0}
/* Schrift gross: alles in rem wächst mit */
html.schrift-gross{font-size:112.5%}
body.schrift-gross .leise,body.schrift-gross .klein,body.schrift-gross .kk-info,body.schrift-gross .ue-plan-meta{font-size:.95rem}
body.schrift-gross .antwort{font-size:1.1rem}
/* Kinder: etwas grösser und runder, ohne Comic */
body.profil-kind .ue-buehne .antwort{font-size:1.12rem;min-height:3.6rem;border-radius:14px}
body.profil-kind .ue-rueckmeldung,body.profil-kind .ue-buehne .karte{border-radius:16px}
body.profil-kind .ue-rm-titel{font-size:1.85rem}
body.profil-kind .lw-heute{border-radius:18px}

/* === Theorie === */
.th-seite .th-uebersicht{margin-top:.6rem}
.th-stufe{margin:1.8rem 0 0}
.th-stufe h2{font-size:1.45rem;margin:0 0 .25rem}
.th-stufe-bezug{margin:0 0 .6rem}
.th-eintrag{padding:0;scroll-margin-top:calc(var(--kopf-h,76px) + 12px)}
.th-eintrag summary{cursor:pointer;list-style:none;padding:.85rem 2.8rem .85rem 1rem;position:relative;display:flex;flex-direction:column;gap:.1rem}
.th-eintrag summary::-webkit-details-marker{display:none}
.th-eintrag summary::after{content:"+";position:absolute;right:1rem;top:.75rem;font-size:1.5rem;color:var(--holz);line-height:1}
.th-eintrag[open] summary::after{content:"\2212"}
.th-eintrag-titel{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--nacht);line-height:1.25}
.th-eintrag-meta{font-size:.82rem;color:var(--leise)}
.th-inhalt{padding:0 1rem 1rem;border-top:1px solid var(--linie)}
.th-abschnitt{margin:.9rem 0 0}
.th-abschnitt p,.th-abschnitt ul,.th-abschnitt ol{margin:0 0 .7rem}
.th-abschnitt ul,.th-abschnitt ol{padding-left:1.3rem}
.th-abschnitt li{margin:.15rem 0}
.th-noten-rahmen{margin:.4rem -.2rem .8rem}
.th-anhoeren{padding:.45rem 1rem;font-size:.95rem}
.th-quellen{font-size:.8rem;color:var(--leise);margin:1rem 0 0;border-top:1px solid var(--linie);padding-top:.5rem;overflow-wrap:anywhere}
.th-fragen{margin-top:1rem;align-items:center}
.th-fragen .leise{font-size:.85rem}
.th-lektion h2{font-size:1.5rem;margin:0 0 .2rem}
.th-lektion.th-gelesen{opacity:.8}
.th-quiz-titel{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--holz);font-weight:700;margin:0 0 .3rem}
.th-frage{font-size:1.22rem;line-height:1.35}
.th-frage-bild:empty,.th-frage-klang:empty{display:none}
.th-frage-klang{text-align:center;margin:-.3rem 0 .8rem}
.th-antworten.th-lang{grid-template-columns:1fr}
.th-antworten .antwort{overflow-wrap:anywhere;line-height:1.3}
.th-antworten .antwort.richtig::before{content:"✓ "}
.th-antworten .antwort.falsch::before{content:"✗ "}
.th-erklaerung strong{color:var(--nacht)}

/* === NS2 === */
/* Notensatz 2 (src/js/notensatz2.js): Zeichen tragen fill/stroke="currentColor", Farbe hier über color. */
.ns2{display:block;max-width:100%;height:auto;color:var(--nacht,#14243b);overflow:visible}
.ns2 .ns2-linie{stroke-opacity:.85}
.ns2 .ns2-note,.ns2 .ns2-pause{transition:color .25s}
.ns2 .ns2-note.aktuell,.ns2 .ns2-pause.aktuell{color:var(--holz-dunkel,#6e451f)}
.ns2 .ns2-note.gespielt,.ns2 .ns2-pause.gespielt{color:var(--lw-gut,#2f7d4a)}
.ns2 .ns2-note.falsch,.ns2 .ns2-pause.falsch{color:var(--lw-schlecht,#b3261e)}
.ns2 .ns2-note.uebersprungen,.ns2 .ns2-pause.uebersprungen{color:#9aa3b0}
.ns2 .ns2-zeiger{fill:var(--abend,#e7a15c);fill-opacity:.35;opacity:0;transition:transform .25s ease,opacity .2s}
body.schema-kontrast .ns2 .ns2-note.aktuell,body.schema-kontrast .ns2 .ns2-pause.aktuell{color:#000}
body.schema-kontrast .ns2 .ns2-note.uebersprungen,body.schema-kontrast .ns2 .ns2-pause.uebersprungen{color:#6b7280}
body.schema-kontrast .ns2 .ns2-zeiger{fill-opacity:.25}
@media (prefers-reduced-motion:reduce){.ns2 .ns2-zeiger,.ns2 .ns2-note,.ns2 .ns2-pause{transition:none}}

/* === Korrekturrunde: Pause-Band, Speicher-Hinweis, «Heute ohne Horn» === */
.pause-band{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding:1rem 16px calc(1rem + env(safe-area-inset-bottom,0px));background:var(--nacht);color:#fff;box-shadow:0 -6px 24px rgba(20,36,59,.25)}
.pause-band p{margin:0;flex:1 1 16rem;font-size:1rem;line-height:1.45}
.pause-band .pause-weiter{flex:0 0 auto;min-width:8rem;min-height:48px;font-size:1.1rem}
body.pausiert{padding-bottom:7rem}
.ue-speicher-hinweis{margin:.8rem 0 0;font-size:.92rem;color:#8f2d1c;background:#fbe9e4;border-radius:6px;padding:.6rem .8rem}
.lw-heute-ohne,.ue-ohne-horn{display:inline-block;margin-top:.6rem;font-size:.95rem}
.lw-heute .lw-heute-ohne{color:inherit}
.lw-heute-aktionen{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
.lw-heute-ohne[hidden],.ue-ohne-horn[hidden]{display:none}

/* === modul-gn (aus src/assets/modul-gn.css) === */
/* === Gehör (GN): Gehörbildung, Noten lesen, freies Üben === */
.gn-uebung{position:relative}
.gn-titel{margin:0 0 .3rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--holz);font-weight:700}
.gn-kopf{margin:0 0 .4rem;gap:.8rem;flex-wrap:wrap}
.gn-punkt{font-size:1.05rem;letter-spacing:.1em;color:var(--linie)}
.gn-punkt.fertig{color:var(--lw-gut)}
.gn-punkt.jetzt{color:var(--holz)}
.gn-frage{margin:.5rem 0 .3rem}
.gn-unter{text-align:center;margin:0 0 .7rem}
.gn-zwischen{margin:.9rem 0 .4rem;font-weight:700;color:var(--nacht)}
.gn-hoeren-box{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:.3rem 0 1rem}
.gn-hoeren{font-size:1.1rem;min-height:3.1rem;padding:.7rem 1.4rem}
.gn-antworten{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}
.gn-antworten.gn-lang{grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr))}
.gn-antworten.gn-zwei,.gn-antworten.gn-bass{grid-template-columns:1fr 1fr}
.gn-antwort{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;line-height:1.25;hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}
.gn-antwort:disabled:not(.richtig):not(.falsch){opacity:.55}
.gn-antwort-klein{display:block;font-size:.78rem;font-weight:500;color:var(--leise)}
.antwort.gewaehlt,.gn-wahlknopf.gewaehlt{background:var(--nacht);border-color:var(--nacht);color:#fff}
.antwort.gewaehlt .gn-antwort-klein{color:#dfe6f0}
.gn-aktion{justify-content:center}
.gn-rueck{border-left:4px solid var(--linie)}
.gn-rueck.gn-gut{border-left-color:var(--lw-gut);background:var(--lw-gut-hell)}
.gn-rueck.gn-teil{border-left-color:var(--lw-warn);background:var(--lw-warn-hell)}
.gn-rueck.gn-falsch{border-left-color:var(--lw-schlecht);background:var(--lw-schlecht-hell)}
.gn-rueck .knopf-link{margin:.3rem .8rem 0 0}
.gn-fuss{justify-content:flex-end}
.gn-zeit{height:8px;background:var(--sand);border-radius:99px;overflow:hidden;margin:.8rem 0 .2rem}
.gn-zeit span{display:block;height:100%;background:var(--holz);border-radius:99px;transition:width .1s linear}
.gn-zeit.knapp span{background:var(--lw-schlecht)}
/* Notenbilder */
.gn-noten{margin:.2rem 0 .4rem}
.gn-noten .notenbild.einzel.gross{max-width:260px}
.gn-noten .gn-vorzeichen-bild{max-width:240px}
.gn-ohne-takt .ns2-taktart{display:none}
.gn-rhythmus .notenbild,.gn-eingabe-noten .notenbild{max-width:100%}
.gn-rhythmus{margin:.2rem 0 0;opacity:.9}
.gn-eingabe-noten{min-height:4.2rem;margin:.1rem 0 .6rem}
.gn-leer{text-align:center;margin:1rem 0}
/* Noten benennen: drei Eingabereihen */
.gn-eingabereihe{margin:.55rem 0 0}
.gn-reihe-titel{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--leise);margin:0 0 .25rem}
.gn-reihe-knoepfe{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.6rem,1fr));gap:.4rem}
.gn-stamm .gn-reihe-knoepfe{grid-template-columns:repeat(7,1fr);gap:.3rem}
.gn-wahlknopf{min-height:2.9rem;padding:.45rem .3rem;font-size:1.1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.gn-stamm .gn-wahlknopf{font-family:var(--serif);font-size:1.25rem;padding:.4rem 0}
.gn-okt .gn-reihe-knoepfe{grid-template-columns:repeat(auto-fill,minmax(6.6rem,1fr))}
.gn-okt .gn-wahlknopf{font-family:var(--serif)}
.gn-okt .gn-antwort-klein{font-size:.74rem}
.gn-okt .gn-antwort-klein{font-family:var(--sans)}
.gn-vorschau{text-align:center;font-weight:700;color:var(--nacht);min-height:1.5em;margin:.7rem 0 0}
/* Kadenz: Plätze und Funktionsknöpfe */
.gn-slots{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;padding:0;margin:.2rem 0 .8rem}
.gn-slot{min-width:2.85rem;min-height:3.1rem;border:1.5px dashed #cfc4b4;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.2rem .3rem;background:#fff}
.gn-slot-f{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--nacht)}
.gn-slot.fest{background:var(--sand);border-style:solid;border-color:var(--linie)}
.gn-slot.jetzt{border-color:var(--holz);border-style:solid;box-shadow:0 0 0 2px var(--abend-hell)}
.gn-slot.ok{border:2px solid var(--lw-gut);background:var(--lw-gut-hell)}
.gn-slot.nein{border:2px solid var(--lw-schlecht);background:var(--lw-schlecht-hell)}
.gn-slot.nein .gn-slot-f{text-decoration:line-through;color:var(--lw-schlecht)}
.gn-slot-l{font-size:.85rem;font-weight:700;color:var(--lw-gut)}
.gn-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.4rem,1fr));gap:.4rem}
.gn-funktion{font-family:var(--serif);min-height:2.9rem;padding:.4rem .2rem}
.gn-satz{margin:.8rem 0 0;background:#fff;border-radius:8px;padding:.4rem .5rem}
.gn-satz .gn-noten{margin:0}
.gn-satz-funktionen{text-align:center;font-family:var(--serif);font-weight:700;margin:.2rem 0 0}
/* Melodie-Diktat: Tonknöpfe und Klaviatur */
.gn-tonknoepfe{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.2rem,1fr));gap:.4rem}
.gn-ton{font-family:var(--serif);min-height:3rem;padding:.35rem .2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.gn-klaviatur{--schwarz-b:calc(100% / var(--tasten, 10) * .6);position:relative;display:flex;height:9.5rem;max-width:34rem;margin:0 auto;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.gn-taste{font:inherit;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.gn-taste.weiss{flex:1 1 0;min-width:0;background:#fff;border:1.5px solid #8b95a3;border-left-width:0;border-radius:0 0 7px 7px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.4rem;color:var(--nacht)}
.gn-taste.weiss:first-child{border-left-width:1.5px}
.gn-taste.schwarz{position:absolute;top:0;width:var(--schwarz-b);height:58%;background:#1b2433;border:1px solid #0d1520;border-radius:0 0 5px 5px;z-index:2}
.gn-taste.weiss:active:not(:disabled){background:var(--abend-hell)}
.gn-taste.schwarz:active:not(:disabled){background:var(--holz-dunkel)}
.gn-taste:disabled{cursor:default}
.gn-klaviatur .gn-taste:disabled.weiss{background:#f4f1ec}
.gn-taste-name{font-size:.78rem;font-weight:600;color:var(--leise);font-family:var(--serif)}
/* Tonart: Quintenzirkel */
.gn-hilfe{margin:.9rem 0 0}
.gn-hilfe summary{cursor:pointer;font-weight:600;color:var(--holz-dunkel)}
.gn-regeln{margin:.5rem 0;padding-left:1.2rem;font-size:.95rem}
.gn-zirkel-box{max-width:330px;margin:.4rem auto 0}
.gn-zirkel{display:block;width:100%;height:auto}
.gn-z-ring{fill:none;stroke:var(--linie);stroke-width:1.5}
.gn-z-ring.innen{fill:var(--sand)}
.gn-zirkel text{text-anchor:middle;font-family:var(--serif)}
.gn-z-dur{font-size:13px;font-weight:700;fill:var(--nacht)}
.gn-z-moll{font-size:11px;fill:var(--holz-dunkel)}
.gn-z-vz{font-size:8.5px;fill:var(--leise);font-family:var(--sans)}
.gn-z-mitte{font-size:9.5px;fill:var(--leise)}
/* Seiten gehoer.html / notenlesen.html */
.gn-reiter{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:0 0 1rem;border-bottom:1px solid var(--linie)}
.gn-reiter a{padding:.45rem 0;text-decoration:none;font-weight:600;color:var(--leise);border-bottom:3px solid transparent;margin-bottom:-1px}
.gn-reiter a[aria-current="page"]{color:var(--nacht);border-bottom-color:var(--abend)}
.gn-reiter a:hover{color:var(--holz-dunkel)}
.gn-wahl .lw-frage:first-child{margin-top:0}
.gn-typ-text{margin:.6rem 0 0}
.gn-felder[hidden]{display:none}
.gn-feld .lw-wahl span{min-height:2.5rem;padding:.4rem .8rem}
.gn-frei-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:0 0 .5rem}
.gn-frei-titel{font-weight:700;color:var(--nacht)}
.gn-frei-ergebnis .ue-rm-titel{font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--nacht);margin:0 0 .3rem}
.gn-frei-ergebnis.ue-gut{border-left:4px solid var(--lw-gut)}
.gn-frei-ergebnis.ue-mittel{border-left:4px solid var(--lw-warn)}
.gn-frei-ergebnis.ue-schwer{border-left:4px solid var(--lw-schlecht)}
.gn-lernweg h2{font-size:1.3rem}
.gn-lernweg-liste{margin:.4rem 0 0;padding-left:1.1rem}
.gn-lernweg-liste li{margin:.25rem 0}
.gn-links{margin-top:1rem}
/* Profil: Senioren grössere Knöpfe, Kontrast-Schema */
body.profil-senior .gn-uebung .antwort,body.profil-senior .gn-hoeren,body.profil-senior .gn-uebung .knopf,body.profil-senior .gn-uebung .knopf-rand{min-height:3.6rem;font-size:1.18rem}
body.profil-senior .gn-klaviatur{height:11rem}
body.profil-senior .gn-slot{min-width:3.8rem;min-height:3.6rem}
body.profil-kind .gn-frage{font-size:1.45rem}
body.schema-kontrast .antwort.gewaehlt,body.schema-kontrast .gn-wahlknopf.gewaehlt{background:#000;border-color:#000}
body.schema-kontrast .gn-slot.ok .gn-slot-f::after{content:" ✓"}
body.schema-kontrast .gn-slot.nein .gn-slot-f::after{content:" ✗"}
body.schema-kontrast .gn-rueck.gn-gut strong::before{content:"✓ "}
body.schema-kontrast .gn-rueck.gn-falsch strong::before{content:"✗ "}
body.schema-kontrast .gn-taste.weiss{border-color:#000}
@media (max-width:420px){
  .gn-antworten.gn-lang{grid-template-columns:1fr 1fr}
  .gn-antworten.gn-lang .antwort{font-size:.98rem;padding:.7rem .4rem}
  .gn-klaviatur{height:8.5rem}
}
@media (prefers-reduced-motion:reduce){.gn-zeit span{transition:none}}
.gn-hilfe.gn-hilfe-leicht summary{color:var(--holz)}

/* === modul-rh (aus src/assets/modul-rh.css) === */
/* === Rhythmus: rhythmus.js, rhythmus.html, Übungstypen klatschen / rhythmus-lesen / rhythmus-diktat / polyrhythmus === */
.rh-lead{max-width:40rem}
.rh-reiter{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 12px}
.rh-reiter-knopf{font:inherit;font-weight:600;font-size:.95rem;padding:.5rem .9rem;border-radius:999px;border:1.5px solid var(--linie);background:#fff;color:var(--nacht);cursor:pointer}
.rh-reiter-knopf:hover{border-color:var(--holz)}
.rh-reiter-knopf.aktiv{background:var(--nacht);border-color:var(--nacht);color:#fff}
.rh-einstellungen summary{cursor:pointer;font-weight:600;color:var(--nacht)}
.rh-einst-raster{display:grid;gap:.8rem;margin:.9rem 0}
.rh-einst-raster [hidden],.rh-einstellungen [hidden]{display:none}
@media (min-width:640px){.rh-einst-raster{grid-template-columns:1fr 1fr}}
.rh-werte-feld{border:1px solid var(--linie);border-radius:8px;padding:.5rem .8rem .7rem;margin:0 0 .8rem;min-width:0}
.rh-werte-feld legend{font-weight:600;font-size:.95rem;padding:0 .3rem}
.rh-werte-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.35rem .8rem}
.rh-schalter{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}

/* Übungsfläche */
.rh-buehne:empty{display:none}
.rh-uebung{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:1rem 1rem 1.1rem;margin:0 0 14px;min-width:0}
.ue-buehne .rh-uebung{margin-bottom:0}
.rh-kopfzeile{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .6rem}
.rh-kopfzeile:empty{display:none}
.rh-chip{display:inline-block;background:var(--sand);color:var(--nacht);border-radius:999px;padding:.15rem .65rem;font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums}
.rh-auftrag{margin:0 0 .7rem}
.rh-kern{display:flex;align-items:baseline;justify-content:center;gap:.6rem;min-height:4.2rem;margin:.2rem 0 .6rem;padding:.35rem .6rem;border-radius:12px;background:var(--sand);color:var(--nacht);transition:background .12s,color .12s;text-align:center;flex-wrap:wrap}
.rh-kern-wert{font-family:var(--serif);font-weight:700;font-size:2.8rem;line-height:1.05;font-variant-numeric:tabular-nums;min-width:1.2em}
.rh-kern-text{font-size:.95rem;color:var(--leise);font-weight:600}
.rh-kern.rh-blink{background:var(--abend-hell,#f6d7b0)}
.rh-kern.rh-blink.rh-eins{background:var(--abend,#e7a15c);color:#fff}
.rh-kern.rh-blink.rh-eins .rh-kern-text{color:#fff}
.rh-kern.rh-gut{background:var(--lw-gut-hell,#e6f3ea)}
.rh-kern.rh-gut .rh-kern-wert{color:var(--lw-gut,#2f7d4a)}
.rh-kern.rh-mittel{background:var(--lw-warn-hell,#fdf0e1)}
.rh-kern.rh-mittel .rh-kern-wert{color:var(--lw-warn,#9a4b12)}
.rh-kern.rh-schwach{background:var(--lw-schlecht-hell,#fbe9e4)}
.rh-kern.rh-schwach .rh-kern-wert{color:var(--lw-schlecht,#b3261e)}
@media (prefers-reduced-motion:reduce){.rh-kern{transition:none}}

/* Notenbild mit Silben */
.rh-noten{position:relative;min-width:0;margin:0 0 .4rem}
.rh-noten .ns2{width:100%;height:auto}
.rh-noten .ns2 .rh-silbe{font:600 11px var(--sans);fill:var(--nacht)}
.rh-noten .ns2 .rh-silbe-leise{fill:var(--leise);font-weight:400}
.rh-noten .ns2 .rh-abw{font:700 9.5px var(--sans);fill:var(--lw-warn,#9a4b12)}
.rh-noten .ns2 .rh-abw-fehlt,.rh-noten .ns2 .rh-abw-falsch{fill:var(--lw-schlecht,#b3261e)}
.ns2 .ns2-note.rh-ungenau{color:var(--lw-warn,#9a4b12)}
.rh-noten.rh-verdeckt .ns2{visibility:hidden}
.rh-noten.rh-verdeckt::after{content:"Notenbild ausgeblendet – aus dem Gedächtnis klatschen";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:.5rem;border:2px dashed var(--linie);border-radius:10px;color:var(--leise);font-weight:600;background:var(--papier)}
.rh-noten.rh-leer{min-height:4rem;display:flex;align-items:center;justify-content:center;border:2px dashed var(--linie);border-radius:10px}
.rh-leer-text{margin:0;padding:.6rem;color:var(--leise);text-align:center}
.rh-knoepfe{margin-top:.4rem}
.rh-knoepfe [hidden]{display:none}
.rh-sprechwahl{display:inline-flex;align-items:center;gap:.4rem;font-size:.92rem;font-weight:600;color:var(--nacht)}
.rh-sprechwahl select{font:inherit;font-weight:400;border:1px solid #cfc4b4;border-radius:6px;padding:.35rem .5rem;background:var(--papier);color:var(--text)}
.rh-status:empty{display:none}
.rh-status{margin:.6rem 0 0}
.rh-info{margin:.6rem 0 0;font-size:.88rem}
.rh-info .knopf-link{font-size:.88rem}
.rh-info [hidden]{display:none}
.rh-info > .knopf-link:not([hidden]),.rh-info > .rh-info-zeile,.rh-info > .rh-latenz-text:not([hidden]){display:block;text-align:left}
.rh-kern{scroll-margin-top:calc(var(--kopf-h,76px) + 12px)}
.rh-tippen{display:block;width:100%;min-height:7.5rem;margin:.8rem 0 0;border:0;border-radius:14px;background:var(--nacht);color:#fff;font:inherit;font-size:1.3rem;font-weight:700;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.rh-tippen.an{background:var(--holz)}
.rh-tippen[hidden]{display:none}

/* Ergebnis */
.rh-ergebnis{margin:.9rem 0 0;padding:.8rem .9rem;border-radius:10px;border-left:5px solid var(--lw-gut,#2f7d4a);background:var(--lw-gut-hell,#e6f3ea)}
.rh-ergebnis.rh-mittel{border-left-color:var(--lw-warn,#9a4b12);background:var(--lw-warn-hell,#fdf0e1)}
.rh-ergebnis.rh-schwach{border-left-color:var(--lw-schlecht,#b3261e);background:var(--lw-schlecht-hell,#fbe9e4)}
.rh-ergebnis[hidden]{display:none}
.rh-ergebnis-titel{font-weight:700;color:var(--nacht);margin:0 0 .2rem;font-size:1.05rem}
.rh-ergebnis-text{margin:0 0 .3rem}
.rh-ergebnis-hinweis{margin:.4rem 0 0;font-weight:600}
.rh-werte{margin:.5rem 0 0}
.rh-werte div{background:rgba(255,255,255,.7)}

/* rhythmus-lesen */
.rh-optionen{display:grid;gap:.6rem;margin:.6rem 0 0}
@media (min-width:700px){.rh-optionen{grid-template-columns:1fr 1fr}}
.rh-option{display:flex;align-items:flex-start;gap:.5rem;width:100%;min-width:0;text-align:left;font:inherit;background:#fff;border:2px solid var(--linie);border-radius:10px;padding:.5rem .6rem;cursor:pointer;color:var(--nacht)}
.rh-option:hover:not(:disabled){border-color:var(--holz)}
.rh-option:disabled{cursor:default}
.rh-option-buchstabe{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--sand);font-weight:700;font-size:.9rem}
.rh-option-bild{flex:1;min-width:0;display:block}
.rh-option-bild .ns2{width:100%;height:auto}
.rh-option.rh-richtig{border-color:var(--lw-gut,#2f7d4a);background:var(--lw-gut-hell,#e6f3ea)}
.rh-option.rh-richtig .rh-option-buchstabe{background:var(--lw-gut,#2f7d4a);color:#fff}
.rh-option.rh-falsch{border-color:var(--lw-schlecht,#b3261e);background:var(--lw-schlecht-hell,#fbe9e4)}
.rh-option.rh-falsch .rh-option-buchstabe{background:var(--lw-schlecht,#b3261e);color:#fff}
body.schema-kontrast .rh-option.rh-richtig .rh-option-buchstabe::after{content:"✓";margin-left:.1em}
body.schema-kontrast .rh-option.rh-falsch .rh-option-buchstabe::after{content:"✗";margin-left:.1em}

/* rhythmus-diktat */
.rh-position{margin:.2rem 0 .4rem;font-weight:600}
.rh-palette{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0 .6rem}
.rh-baustein{display:inline-flex;align-items:center;justify-content:center;min-width:3.2rem;min-height:3.6rem;padding:.2rem .45rem;background:#fff;border:1.5px solid var(--linie);border-radius:8px;cursor:pointer;color:var(--nacht)}
.rh-baustein:hover:not(:disabled){border-color:var(--holz);background:var(--sand)}
.rh-baustein:disabled{opacity:.35;cursor:default}
.rh-baustein .ns2-schluessel,.rh-baustein .ns2-taktart,.rh-baustein .ns2-taktstrich{display:none}
.rh-baustein-bild{display:block;height:3.2rem;width:auto;max-width:9rem}
.rh-baustein .ns2{overflow:hidden}
.rh-loesung{margin:.8rem 0 0;padding-top:.6rem;border-top:1px solid var(--linie)}
.rh-loesung[hidden]{display:none}
.rh-loesung-titel{font-weight:700;margin:0 0 .3rem;color:var(--nacht)}

/* polyrhythmus */
.rh-zeitstrahl{display:block;width:100%;max-width:34rem;height:auto;margin:0 auto .5rem;font-family:var(--sans)}
.rh-zs-raster{stroke:var(--linie);stroke-width:1}
.rh-zs-rand{stroke:var(--leise);stroke-width:1.5}
.rh-zs-name{font-size:11px;font-weight:700;fill:var(--nacht)}
.rh-zs-geraet{fill:#fff;stroke:var(--nacht);stroke-width:2}
.rh-zs-geraet.rh-zs-eins{fill:var(--sand)}
.rh-zs-du{fill:#fff;stroke:var(--holz);stroke-width:2.5}
.rh-zs-an{fill:var(--abend)}
.rh-zs-gut{fill:var(--lw-gut,#2f7d4a);stroke:var(--lw-gut,#2f7d4a)}
.rh-zs-mittel{fill:var(--lw-warn,#9a4b12);stroke:var(--lw-warn,#9a4b12)}
.rh-zs-schlecht{fill:var(--lw-schlecht,#b3261e);stroke:var(--lw-schlecht,#b3261e)}
.rh-zs-cursor{stroke:var(--abend);stroke-width:2.5}
.rh-poly-zeile{display:flex;align-items:center;gap:.6rem;margin:.1rem 0}
.rh-poly-name{flex:none;width:3.4rem;font-weight:700;font-size:.9rem;color:var(--nacht)}
.rh-poly-bild{flex:1;min-width:0}
.rh-noten .rh-poly-bild .ns2{width:auto;max-width:100%;height:auto;max-height:5.5rem}

/* Mikrofon-Karte */
.rh-pegel{height:10px;border-radius:99px;background:var(--sand);overflow:hidden;margin:.5rem 0}
.rh-pegel span{display:block;height:100%;width:0;background:var(--holz);transition:width .06s linear}
.rh-blitz{display:inline-block;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--sand);vertical-align:middle}
.rh-blitz.an{animation:rh-blitz .35s ease-out}
@keyframes rh-blitz{from{background:var(--abend)}to{background:var(--sand)}}
.rh-tabelle-rahmen{overflow-x:auto;margin:.6rem 0}
.rh-tabelle{border-collapse:collapse;font-size:.92rem;min-width:100%}
.rh-tabelle th,.rh-tabelle td{text-align:left;padding:.3rem .5rem;border-bottom:1px solid var(--linie);vertical-align:top}
.rh-tabelle th{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--leise)}
.rh-lernweg-liste{margin:.4rem 0 0;padding-left:1.1rem}
.rh-lernweg-liste li{margin:.2rem 0}

/* Distanz-Ansicht: grosser Kernwert während der Übung (Handy: nur Kernwert gross; Tablet: Kernwert + Notenzeile) */
body.ansicht-handy .rh-laeuft .rh-kern{min-height:34vw}
body.ansicht-handy .rh-laeuft .rh-kern-wert{font-size:24vw;line-height:1}
body.ansicht-handy .rh-laeuft .rh-auftrag,body.ansicht-handy .rh-laeuft .rh-kopfzeile{display:none}
body.ansicht-tablet .rh-laeuft .rh-kern{min-height:9rem}
body.ansicht-tablet .rh-laeuft .rh-kern-wert{font-size:clamp(4rem,11vw,8rem);line-height:1}
body.schrift-gross .rh-noten .ns2 .rh-silbe{font-size:12.5px}

/* Kontrast-Schema: Signalfarben kommen aus --lw-* (Blau/Orange) */
body.schema-kontrast .rh-kern.rh-blink.rh-eins{background:#0b57d0}
body.schema-kontrast .rh-reiter-knopf.aktiv{background:#0a1629}
body.schema-kontrast .rh-uebung,body.schema-kontrast .rh-option,body.schema-kontrast .rh-baustein{border-color:var(--linie)}

/* === modul-sp (aus src/assets/modul-sp.css) === */
/* === Spiel: Übungen am Horn, Distanz-Ansicht, Seite spielen.html === */
.sp-uebung{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:1rem 1rem 1.1rem;margin:0 0 14px;min-width:0}
.sp-kopf{margin:0 0 .6rem}
.sp-titel{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--nacht);margin:0 0 .15rem;line-height:1.2}
.sp-anleitung{margin:0;color:var(--text);font-size:.98rem}
.sp-hinweise:empty{display:none}
.sp-box{margin:0 0 10px;padding:.55rem .75rem;border-radius:8px;font-size:.92rem;border-left:4px solid var(--linie);background:var(--papier);color:var(--text)}
.sp-warnung{border-left-color:var(--lw-warn);background:var(--lw-warn-hell);font-weight:600;color:var(--nacht)}
.sp-lehrperson{border-left-color:var(--abend);background:var(--sand)}
.sp-ehrlich{border-left-color:var(--holz)}
.sp-kal{font-size:.85rem;color:var(--leise);border-left-color:var(--sand)}
.sp-info{border-left-color:var(--abend)}
.sp-fehler{border-left-color:var(--lw-schlecht);background:var(--lw-schlecht-hell)}

/* Anzeige: Kernwert + Notenzeile */
.sp-anzeige{display:flex;flex-direction:column;gap:10px;margin:0 0 10px}
.sp-kern{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"label label label" "links zahl pfeil" "text text text";align-items:center;column-gap:.2em;text-align:center;border-radius:14px;background:var(--sand);color:var(--leise);padding:.45rem .8rem .65rem;border:2px solid transparent;min-width:0;transition:background-color .15s,color .15s}
.sp-kern-label{grid-area:label;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;min-height:1.1em}
.sp-kern-zahl{grid-area:zahl;font-family:var(--serif);font-weight:700;line-height:1;padding-bottom:.06em;font-variant-numeric:tabular-nums;color:var(--nacht);font-size:clamp(4.5rem,10vw,8rem);white-space:nowrap}
.sp-kern-lang .sp-kern-zahl{font-size:clamp(3.2rem,7vw,5.5rem)}
.sp-kern-pfeil{grid-area:pfeil;justify-self:start;font-size:clamp(2.4rem,5vw,4rem);line-height:1}
.sp-kern[data-pfeil=""] .sp-kern-pfeil{visibility:hidden}
.sp-kern-text{grid-area:text;font-weight:700;font-size:1.15rem;min-height:1.3em;margin-top:.15rem}
.sp-kern[data-zustand="aus"] .sp-kern-zahl{color:var(--nacht);opacity:.85}
.sp-kern[data-zustand="gut"]{background:var(--lw-gut-hell);color:var(--lw-gut);border-color:var(--lw-gut)}
.sp-kern[data-zustand="gut"] .sp-kern-zahl{color:var(--lw-gut)}
.sp-kern[data-zustand="warn"]{background:var(--lw-warn-hell);color:var(--lw-warn);border-color:var(--lw-warn)}
.sp-kern[data-zustand="warn"] .sp-kern-zahl{color:var(--lw-warn)}
.sp-kern[data-zustand="schlecht"]{background:var(--lw-schlecht-hell);color:var(--lw-schlecht);border-color:var(--lw-schlecht)}
.sp-kern[data-zustand="schlecht"] .sp-kern-zahl{color:var(--lw-schlecht)}
.sp-kern[data-zustand="neutral"]{background:var(--nacht);color:#dfe5ee}
.sp-kern[data-zustand="neutral"] .sp-kern-zahl{color:#fff}
.sp-noten{position:relative;background:#fff;border:1px solid var(--linie);border-radius:10px;padding:.5rem .4rem .3rem;min-width:0}
.sp-noten svg{display:block;width:100%;height:auto;max-width:100%}
.sp-einzel .sp-noten{display:flex;align-items:center;justify-content:center}
.sp-einzel .sp-noten svg{width:8.5rem}
.sp-noten.verdeckt svg{visibility:hidden}
.sp-decke{display:none}
.sp-noten.verdeckt .sp-decke{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;margin:0;align-items:center;justify-content:center;text-align:center;padding:1rem;border-radius:9px;background:repeating-linear-gradient(135deg,var(--sand),var(--sand) 10px,var(--papier) 10px,var(--papier) 20px);color:var(--nacht);font-weight:600}
.sp-bogen{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

/* Handy: ein grosser Kernwert, auf 2–3 m lesbar (Zahl ≥ 20 vw) */
body.ansicht-handy .sp-kern{padding:.5rem .6rem .8rem}
body.ansicht-handy .sp-kern-zahl{font-size:clamp(6rem,36vw,14rem)}
body.ansicht-handy .sp-kern-lang .sp-kern-zahl{font-size:clamp(4.6rem,22vw,9rem)}
body.ansicht-handy .sp-kern-pfeil{font-size:clamp(3.4rem,20vw,8rem)}
body.ansicht-handy .sp-kern-text{font-size:clamp(1.3rem,6.5vw,2.2rem)}
body.ansicht-handy .sp-kern-label{font-size:clamp(.8rem,3.4vw,1.1rem)}
body.ansicht-handy .sp-einzel .sp-noten{display:none}
/* Tablet: Kernwert und Notenzeile nebeneinander */
body.ansicht-tablet .sp-anzeige{display:grid;grid-template-columns:minmax(12rem,17rem) minmax(0,1fr);gap:14px;align-items:stretch}
body.ansicht-tablet .sp-einzel{grid-template-columns:minmax(14rem,20rem) minmax(8rem,12rem);justify-content:start}
body.ansicht-tablet .sp-kern{align-content:center}
body.ansicht-tablet .sp-noten{display:flex;flex-direction:column;justify-content:center}

/* Verlauf, Balken, Werte */
.sp-balken{margin:0 0 .4rem}
.sp-balken span{transition:width .12s linear}
.sp-verlauf{margin:0 0 10px}
.sp-diagramm{display:block;width:100%;height:auto;max-height:190px;background:#fff;border:1px solid var(--linie);border-radius:10px}
.sp-dg-linie{stroke:var(--linie);stroke-width:1}
.sp-dg-text{font-size:9px;font-family:var(--sans);font-weight:600;fill:var(--leise)}
.sp-dg-band{fill:var(--lw-gut-hell);stroke:none}
.sp-dg-soll{fill:none;stroke:var(--holz);stroke-width:1.5;stroke-dasharray:4 3}
.sp-dg-ist{fill:none;stroke:var(--nacht);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sp-hinweis{min-height:2.6em;margin:.3rem 0 .2rem}
.sp-werte{margin:.4rem 0 .2rem}
.sp-knoepfe{margin-top:.5rem}
.sp-knoepfe button[disabled]{opacity:.45;cursor:not-allowed}
.sp-mikro{margin:.7rem 0 0}

/* Ergebnis */
.sp-ergebnis{margin-top:12px;border-top:3px solid var(--lw-gut);padding-top:.8rem}
.sp-erg-titel{font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--nacht);margin:0 0 .3rem;line-height:1.2}
.sp-erg-liste{list-style:none;padding:0;margin:.4rem 0 .6rem}
.sp-erg-liste li{padding:.35rem 0 .35rem 1.6rem;border-bottom:1px solid var(--linie);position:relative;overflow-wrap:anywhere}
.sp-erg-liste li::before{position:absolute;left:.15rem;top:.35rem;font-weight:700}
.sp-erg-liste li.sp-ok::before{content:"✓";color:var(--lw-gut)}
.sp-erg-liste li.sp-nein::before{content:"✗";color:var(--lw-warn)}
.sp-pause{background:var(--sand);border-radius:8px;padding:.55rem .75rem;font-weight:600;color:var(--nacht)}
.sp-lp-empf{border-left:4px solid var(--abend);padding:.3rem .7rem;font-weight:600}

/* Seite spielen.html */
.sp-einleitung{max-width:44rem;margin:0 0 1rem}
.sp-wahl .sp-typwahl{margin-top:0}
.sp-typ-info{margin:.6rem 0 0}
.sp-opt-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem 1.2rem;margin:.4rem 0 0}
.sp-opt-raster .lw-frage{margin:.3rem 0 0}
.sp-opt-raster .einst select{width:100%;max-width:none}
.sp-opt-raster .einst output{font-weight:700}
@media (min-width:640px){.sp-opt-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sp-opt-raster .sp-toene,.sp-opt-raster .sp-werte-wahl,.sp-opt-breit{grid-column:1/-1}}
.sp-chips{gap:.4rem}
.sp-chip span{padding:.35rem .7rem;min-height:2.4rem;font-size:.92rem}
.sp-chip-hoch span{border-style:dashed}
.sp-toene .sp-warnung{margin:.5rem 0 0}
.sp-buehne:empty{display:none}
.sp-resultat{border-top:4px solid var(--lw-gut)}
.sp-resultat p{margin:0 0 .4rem}
.sp-ansicht-info{margin:.6rem 0 0;font-size:.88rem}
.sp-linkliste{list-style:none;padding:0;margin:.3rem 0 .6rem}
.sp-linkliste li{padding:.45rem 0;border-bottom:1px solid var(--linie)}
.sp-links h3{font-size:1.1rem;margin:1rem 0 .2rem}

/* Farbschema «kontrast»: Rahmen deutlicher, Zeichen statt Farbe allein (Pfeile/✓ sind immer dabei) */
body.schema-kontrast .sp-kern{border-color:currentColor}
body.schema-kontrast .sp-kern[data-zustand="aus"]{border-color:var(--linie)}
body.schema-kontrast .sp-dg-ist{stroke:#000}
body.schema-kontrast .sp-dg-band{fill:#dde8fb}
@media (prefers-reduced-motion:reduce){.sp-kern,.sp-balken span{transition:none}}