/* Lernplattform: Metronom und Hoertraining unter /werkstatt/lernen.

   Baut auf werkstatt.css auf und ersetzt nichts davon. Entwurf und
   Begruendungen: design/lernplattform/DESIGN.md (Rauke). Tokens von dort,
   Kontraste mit `kontrast` gemessen, Werte in den Kommentaren. */

:root {
  /* Die leiseste Farbe, die noch Text sein darf: 7.1:1 auf --flaeche,
     7.6:1 auf --grund. "offen"-Status, Ziele, Tastenhinweise. */
  --schrift-leisest: #5fae7a;

  /* Umriss fuer Anzeigen, die man sehen muss, aber nicht klickt (leere
     Segmente, schwarze Tasten). --rand (1.4:1) waere unsichtbar, --rand-stark
     zu laut. 4.3:1 auf --grund, 4.0:1 auf --flaeche. */
  --umriss: #3f8050;

  /* Richtig = Signal, falsch = Gefahr. Nie Farbe allein: Haken, Kreuz oder
     Wort kommen immer dazu. */
  --richtig: var(--signal);
  --falsch: var(--gefahr);
  --falsch-flaeche: rgba(255, 95, 87, 0.12);

  --segment: 1rem;
  --segment-luecke: 0.25rem;
  --segment-leer: var(--umriss);
  --segment-halb: var(--rand-stark);
  --segment-voll: var(--signal);

  /* Klaviatur: das einzige helle Objekt im Haus, mit Absicht - eine
     Klaviatur ist ein Ding, kein Panel. Tonnamen --auf-signal darauf 13.6:1,
     Tastenrand 3.7:1 auf der Taste. */
  --taste-weiss: #d5e4d9;
  --taste-weiss-rand: #4f7a5b;
  --taste-schwarz: #000600;
  --taste-schwarz-rand: var(--umriss);
  --taste-min: 2.2rem;
  --taste-hoehe: 9rem;
  --taste-schwarz-hoehe: 5.6rem;

  --pendel-hoehe: 22rem;
  --pendel-stab: #7dd398;
  --pendel-gewicht: var(--signal);
  --pendel-skala: var(--schrift-leisest);

  /* Eine Groesse fuer BPM und Trefferquote, damit die Seiten Geschwister sind. */
  --zahl-gross: clamp(3rem, 9vw, 4.5rem);
}

/* .knopf setzt display und schlaegt damit das hidden-Attribut. Gilt fuer
   alles unter data-lernen und die Ton-Warnung darueber. */
[data-lernen] [hidden], .hinweis--fehler[hidden] { display: none !important; }

/* --- Lernen: Uebersicht --------------------------------------------------- */

.werkzeugkarte {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: var(--r5);
  align-items: center;
  padding: var(--r4) var(--r5);
  border: 1px solid var(--rand-stark);
  background: var(--flaeche);
}

.werkzeugkarte__bild { width: 5.5rem; height: 5.5rem; }
.werkzeugkarte__bild svg { width: 100%; height: 100%; display: block; }

.werkzeugkarte__titel { margin: 0 0 var(--r1); font-size: 1.15rem; }
.werkzeugkarte__text { margin: 0; color: var(--schrift-leise); font-size: 0.85rem; }
.werkzeugkarte__text b { color: var(--schrift); font-weight: 400; }

/* Stufenkarten: ein Kaestchen je Uebung statt Prozentbalken - bei 7 Uebungen
   sieht man sofort "3 von 7". */

.stufen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r3); }

.stufe {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  grid-template-areas: "nr kopf segmente" "nr text segmente" "nr fuss fuss";
  gap: var(--r1) var(--r4);
  align-items: start;
  padding: var(--r4) var(--r5);
  border: 1px solid var(--rand);
  background: var(--flaeche);
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.stufe:hover { border-color: var(--rand-stark); background: var(--flaeche-hoch); }
.stufe:hover .stufe__titel { color: var(--signal); }

/* "Weiter hier": die einzige Betonung auf der Uebersicht, und sie wandert. */
.stufe--dran { border-left: 3px solid var(--signal); padding-left: calc(var(--r5) - 2px); }

.stufe__nr {
  grid-area: nr;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--rand-stark);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stufe--fertig .stufe__nr { color: var(--signal); }

.stufe__kopf { grid-area: kopf; display: flex; align-items: baseline; gap: var(--r3); flex-wrap: wrap; }
.stufe__titel { margin: 0; font-size: 1.15rem; }
.stufe__label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--schrift-leisest);
}
.stufe__text { grid-area: text; margin: 0; color: var(--schrift-leise); font-size: 0.85rem; max-width: var(--lesebreite); }
.stufe__fuss { grid-area: fuss; margin: var(--r2) 0 0; font-size: 0.8rem; color: var(--schrift-leisest); }
.stufe__fuss b { color: var(--schrift); font-weight: 400; }
.stufe__fuss .stufe__weiter { color: var(--signal); }

.stufe__segmente { grid-area: segmente; display: grid; justify-items: end; gap: var(--r1); }

.segmente { display: flex; gap: var(--segment-luecke); margin: 0; padding: 0; list-style: none; }
.segment {
  width: var(--segment);
  height: var(--segment);
  border: 1px solid var(--segment-leer);
  box-sizing: border-box;
}
.segment--halb { border-color: var(--segment-halb); background: linear-gradient(to top, var(--segment-halb) 50%, transparent 50%); }
.segment--voll { border-color: var(--segment-voll); background: var(--segment-voll); }
.segmente__zahl { font-size: 0.75rem; color: var(--schrift-leise); font-variant-numeric: tabular-nums; }
.stufe--fertig .segmente__zahl { color: var(--signal); }

/* Leerzustand: derselbe Aufbau, nur gestrichelt. */
.lernen-leer {
  border: 1px dashed var(--rand-stark);
  padding: var(--r5);
  margin: 0 0 var(--r5);
  display: grid;
  gap: var(--r3);
  justify-items: start;
}
.lernen-leer__text { margin: 0; max-width: var(--lesebreite); color: var(--schrift-leise); }

.lernen-stand { display: flex; align-items: center; gap: var(--r4); flex-wrap: wrap; margin: 0 0 var(--r5); }
.lernen-stand__text { margin: 0; color: var(--schrift-leise); }
.lernen-stand--fertig .lernen-stand__text { color: var(--schrift); }

/* Sichern: das Datei-Feld steckt unsichtbar, aber fokussierbar im Knopf;
   der Knopf ist das Label und traegt den Fokusring fuer das Feld. */
.knopf { position: relative; }
.knopf:focus-within:not(:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }

/* --- Stufe: Uebungsliste -------------------------------------------------- */

.uebungen { list-style: none; margin: var(--r4) 0 0; padding: 0; border: 1px solid var(--rand); background: var(--flaeche); }
.uebung-zeile {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: var(--r1) var(--r4);
  align-items: center;
  padding: var(--r3) var(--r4);
  text-decoration: none;
  color: inherit;
  transition: background-color 140ms ease;
}
.uebungen li + li .uebung-zeile { border-top: 1px solid var(--rand); }
.uebung-zeile:hover { background: var(--flaeche-hoch); }
.uebung-zeile:hover .uebung-zeile__titel { color: var(--signal); }
.uebung-zeile--dran { box-shadow: inset 3px 0 0 var(--signal); }

.uebung-zeile__nr { color: var(--rand-stark); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.uebung-zeile--fertig .uebung-zeile__nr { color: var(--signal); }
.uebung-zeile__titel { margin: 0; font-size: 1rem; font-weight: 700; }
.uebung-zeile__titel small { font-size: 0.7rem; font-weight: 400; color: var(--schrift-leisest); letter-spacing: 0.1em; text-transform: uppercase; }
.uebung-zeile__text { margin: 0; font-size: 0.8rem; color: var(--schrift-leise); }
.uebung-zeile__text[data-format]::after { content: " · " attr(data-format); color: var(--schrift-leisest); }

.status { font-size: 0.8rem; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.status--fertig { color: var(--signal); }
.status--laeuft { color: var(--schrift); }
.status--offen { color: var(--schrift-leisest); }
.status__ziel { display: block; font-size: 0.7rem; color: var(--schrift-leisest); }

/* --- Uebung --------------------------------------------------------------- */

.uebung { display: grid; gap: var(--r5); max-width: 62rem; }

.uebung__kopf { display: flex; align-items: baseline; gap: var(--r2) var(--r4); flex-wrap: wrap; margin: 0 0 var(--r5); }
.uebung .uebung__kopf, .auswertung .uebung__kopf { margin: 0; }
.uebung__titel { margin: 0; font-size: 1.5rem; overflow-wrap: anywhere; }
.uebung__frage { margin: 0; color: var(--schrift-leise); }
.uebung__kopf .einleitung__text { flex-basis: 100%; margin: 0; font-size: 0.85rem; }

/* Aufgabenzeile: ein Kaestchen je Aufgabe. Richtig voll, falsch rot, die
   aktuelle mit Signalrahmen. */
.aufgaben { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; }
.aufgaben .segmente { flex-wrap: wrap; }
.segment--falsch { border-color: var(--falsch); background: var(--falsch); }
.segment--aktuell { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.aufgaben__zahl { font-size: 0.8rem; color: var(--schrift-leise); font-variant-numeric: tabular-nums; }
.aufgaben__zahl b { color: var(--schrift); font-weight: 400; }

/* Hoerpanel: der Abspielknopf ist das Groesste auf der Seite. */
.hoeren {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--r5);
  padding: var(--r5);
  border: 1px solid var(--rand-stark);
  background: var(--flaeche);
}

.hoeren__knopf {
  width: 5rem;
  height: 5rem;
  font-size: 1.8rem;
  padding: 0;
}

.hoeren__text { margin: 0; }
.hoeren__text b { display: block; font-size: 1.1rem; }
.hoeren__text span { color: var(--schrift-leise); font-size: 0.85rem; }
.hoeren__tasten { margin: 0; font-size: 0.75rem; color: var(--schrift-leisest); text-align: right; }
.knopf--haupt kbd { border-color: var(--auf-signal); color: var(--auf-signal); }
kbd {
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 0 0.3em;
  border: 1px solid var(--rand-stark);
  color: var(--schrift-leise);
}

/* Antwort: Klaviatur und Namen. Beides gilt. */
.antwort { display: grid; gap: var(--r4); }
.antwort__kopf {
  display: flex;
  align-items: baseline;
  gap: var(--r3);
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  flex-wrap: wrap;
}
.antwort__kopf .sparte__marke { letter-spacing: 0; }
.antwort__hinweis { font-size: 0.8rem; color: var(--schrift-leise); letter-spacing: 0; text-transform: none; font-weight: 400; }
.antwort .formular__aktionen, .uebung > .formular__aktionen { margin: 0; }
[data-lernen] .knopf > kbd { margin-left: 0.5em; }

/* Klaviatur: weisse Tasten im Raster, schwarze absolut darueber. Wie viele,
   sagt --tasten (setzt lernen.js aus dem Tonbereich der Aufgabe). */
.klaviatur {
  border: 1px solid var(--rand-stark);
  background: var(--flaeche);
  padding: var(--r2);
  overflow-x: auto;   /* schmal: die Tasten bleiben tippbar, der Kasten scrollt */
}
.klaviatur__tasten {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--tasten, 14), minmax(var(--taste-min), 1fr));
  height: var(--taste-hoehe);
  min-width: max-content;
}

.taste {
  font: inherit;
  cursor: pointer;
  position: relative;
  border: 1px solid var(--taste-weiss-rand);
  background: var(--taste-weiss);
  color: var(--auf-signal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 var(--r1);
  font-size: 0.7rem;
  transition: background-color 100ms ease;
}
.taste + .taste:not(.taste--schwarz) { border-left: none; }
/* Jedes C traegt seine Oktave ("C4"): bei drei Oktaven im Diktat weiss man sonst nicht, welches. */
.taste__oktave { font-size: 0.6em; margin-left: 0.1em; }
.taste:hover { background: #ffffff; }
.taste:focus-visible { outline-offset: -3px; z-index: 3; }
.taste--grundton:focus-visible, .taste--richtig:focus-visible, .taste--loesung:focus-visible { outline-color: var(--auf-signal); }
.taste:disabled { cursor: default; }

.taste--schwarz {
  position: absolute;
  top: 0;
  height: var(--taste-schwarz-hoehe);
  width: calc(100% / var(--tasten, 14) * 0.62);
  transform: translateX(-50%);
  background: var(--taste-schwarz);
  border: 1px solid var(--taste-schwarz-rand);
  color: var(--schrift-leise);
  z-index: 2;
  font-size: 0.6rem;
}
.taste--schwarz:hover { background: var(--flaeche-hoch); }

/* Grundton / gewaehlt / richtig / Loesung / falsch - immer Farbe UND Zeichen. */
.taste--grundton { background: var(--signal); color: var(--auf-signal); font-weight: 700; }
.taste--grundton::before { content: "\25CF"; position: absolute; top: var(--r2); font-size: 0.55rem; }
.taste--richtig, .taste--loesung { background: var(--signal); color: var(--auf-signal); font-weight: 700; }
.taste--richtig::before, .taste--loesung::before { content: "\2713"; position: absolute; top: var(--r2); font-size: 0.7rem; }
.taste--falsch { background: var(--falsch); color: var(--grund); font-weight: 700; }
.taste--falsch::before { content: "\2715"; position: absolute; top: var(--r2); font-size: 0.7rem; }
.taste--schwarz.taste--grundton::before, .taste--schwarz.taste--richtig::before, .taste--schwarz.taste--loesung::before, .taste--schwarz.taste--falsch::before { top: var(--r1); }
.taste:hover.taste--grundton, .taste:hover.taste--richtig, .taste:hover.taste--loesung { background: var(--signal); }
.taste:hover.taste--falsch { background: var(--falsch); }

/* Namen: ein Raster, das bei 4, 8 und 12 Antworten aufgeht. */
.namen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--r2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.namen .knopf { width: 100%; justify-content: space-between; gap: var(--r2); text-align: left; min-height: 2.8rem; }
.namen__kuerzel { font-size: 0.7rem; color: var(--schrift-leisest); }

/* Zwei Antworten (hoeher / tiefer): zwei grosse Knoepfe, die Frage ist das
   Erste, was ein Anfaenger sieht. */
.namen--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.namen--zwei .knopf { min-height: 4.5rem; font-size: 1.15rem; justify-content: center; gap: var(--r4); }
.namen--zwei .namen__pfeil { font-size: 1.5rem; line-height: 1; }

.knopf--richtig, .knopf--richtig:hover { background: var(--signal); color: var(--auf-signal); border-color: var(--signal); font-weight: 700; }
.knopf--richtig::after { content: "\2713"; }
.knopf--falsch, .knopf--falsch:hover { background: var(--falsch-flaeche); color: var(--falsch); border-color: var(--falsch); }
.knopf--falsch::after { content: "\2715"; }
.knopf--loesung, .knopf--loesung:hover { border-color: var(--signal); color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.knopf--loesung::after { content: "\2713"; }
.knopf--richtig kbd, .knopf--falsch kbd, .knopf--loesung kbd { border-color: currentColor; color: inherit; }
.knopf--richtig .namen__kuerzel, .knopf--falsch .namen__kuerzel, .knopf--loesung .namen__kuerzel { color: inherit; }

/* Rhythmus-Raster: eine Zelle je kleinstem Notenwert. Antippen, wo eine
   Note beginnt. Taktanfang als dicke Kante, jeder Schlag mit Zahl darueber,
   damit man sich zaehlend orientiert wie beim Hoeren. */
/* Ein Grid aus Einheiten (12 je Viertel, --einheiten setzt lernen.js): jede
   Zelle spannt so viele Spalten, wie sie Einheiten lang ist - Sechzehntel 3,
   Achtel 6, Triolenzellen 4. So bleibt jeder Schlag gleich breit, ob er nun
   vier Sechzehntel oder drei Triolen traegt. */
.raster {
  display: grid;
  grid-template-columns: repeat(var(--einheiten, 48), minmax(0.6rem, 1.2rem));
  gap: 2px;
  padding: var(--r5) var(--r3) var(--r3);
  border: 1px solid var(--rand-stark);
  background: var(--flaeche);
  overflow-x: auto;
}
.raster__zelle {
  position: relative;
  height: 3.4rem;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--umriss);
  background: var(--grund);
  color: var(--schrift);
  transition: background-color 100ms ease;
}
.raster__zelle:hover { border-color: var(--signal); }
.raster__zelle--schlag { border-left: 2px solid var(--rand-stark); }
.raster__zelle--triole { border-style: dashed; }
.raster__zelle--takt { border-left: 3px solid var(--signal); }
.raster__zelle[data-schlag]::before {
  content: attr(data-schlag);
  position: absolute;
  top: -1.3rem;
  left: 0.2rem;
  font-size: 0.7rem;
  color: var(--schrift-leisest);
}
/* Triolenschlag: drei gestrichelte Zellen, am Schlag steht "(3)" dabei. */
.raster__zelle--triole[data-schlag]::before { content: attr(data-schlag) " (3)"; }
.raster__zelle--an { background: var(--signal); border-color: var(--signal); color: var(--auf-signal); }
.raster__zelle--an::after { content: "\25CF"; }
/* Nach der Antwort: die Loesung als Haken, zu viel angetippte als Kreuz. */
.raster__zelle--loesung { box-shadow: inset 0 0 0 3px var(--signal); border-color: var(--signal); }
.raster__zelle--loesung::after { content: "\2713"; font-weight: 700; }
.raster__zelle--loesung.raster__zelle--an { box-shadow: none; }
.raster__zelle--falsch { background: var(--falsch); border-color: var(--falsch); color: var(--grund); }
.raster__zelle--falsch::after { content: "\2715"; font-weight: 700; }
.raster__zelle:disabled { cursor: default; }

/* Tonfolge fuer das Melodiediktat: was man auf der Klaviatur getippt hat,
   als Reihe sichtbar - der letzte Ton ist betont, "Rueckgaengig" nimmt ihn. */
.tonfolge {
  display: grid;
  gap: var(--r2);
  padding: var(--r3) var(--r4);
  border: 1px solid var(--rand);
  background: var(--flaeche);
  min-height: 4.6rem;
}
.tonfolge__kopf { margin: 0; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--schrift-leise); display: flex; justify-content: space-between; gap: var(--r3); }
.tonfolge__kopf span { letter-spacing: 0; text-transform: none; color: var(--schrift-leisest); font-variant-numeric: tabular-nums; }
.tonfolge__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--r1); }
.tonfolge__ton {
  min-width: 2.4rem;
  padding: 0.15rem 0.45rem;
  text-align: center;
  font-size: 0.9rem;
  border: 1px solid var(--umriss);
  color: var(--schrift);
  font-variant-numeric: tabular-nums;
}
.tonfolge__ton:last-child { border-color: var(--signal); color: var(--signal); }
.tonfolge__leer { margin: 0; font-size: 0.85rem; color: var(--schrift-leisest); }
.tonfolge__liste:empty { display: none; }
.tonfolge__liste:empty + .tonfolge__leer { display: block; }
.tonfolge__liste:not(:empty) + .tonfolge__leer { display: none; }

/* Rueckmeldung: ein Streifen unter den Antworten, kein Modal. */
.rueckmeldung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--r3) var(--r5);
  align-items: center;
  padding: var(--r4) var(--r5);
  border: 1px solid var(--signal);
  background: var(--flaeche-hoch);
}
.rueckmeldung--falsch { border-color: var(--falsch); }
.rueckmeldung__titel { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.rueckmeldung--falsch .rueckmeldung__titel { color: var(--falsch); }
.rueckmeldung__text { margin: var(--r1) 0 0; color: var(--schrift-leise); font-size: 0.85rem; overflow-wrap: anywhere; }
.rueckmeldung__text b { color: var(--schrift); font-weight: 400; }
.rueckmeldung__aktionen { display: flex; gap: var(--r2); flex-wrap: wrap; }

/* Eselsbruecke: aufklappbar, damit sie nicht jede Aufgabe mitliest. */
.hilfe { border: 1px solid var(--rand); background: var(--flaeche); }
.hilfe summary { cursor: pointer; padding: var(--r3) var(--r4); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--schrift-leise); }
.hilfe summary:hover { color: var(--signal); }
.hilfe[open] summary { border-bottom: 1px solid var(--rand); }
.hilfe__liste { margin: 0; padding: var(--r3) var(--r4); display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--r1) var(--r5); font-size: 0.8rem; }
.hilfe__liste div { display: flex; gap: var(--r2); }
.hilfe__liste dt { color: var(--schrift); min-width: 7.5rem; flex-shrink: 0; }
.hilfe__liste dd { margin: 0; color: var(--schrift-leise); }

/* --- Auswertung ----------------------------------------------------------- */

.auswertung { display: grid; gap: var(--r5); max-width: 62rem; }
.auswertung [data-stand="ergebnis"] { display: grid; gap: var(--r5); }
.auswertung .sparte { margin: 0; }
.ergebnis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--r3) var(--r6);
  align-items: center;
  padding: var(--r5);
  border: 1px solid var(--rand-stark);
  background: var(--flaeche);
}
.ergebnis__zahl { font-size: var(--zahl-gross); font-weight: 700; line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }
.ergebnis--bestanden .ergebnis__zahl { color: var(--signal); text-shadow: 0 0 14px rgba(var(--signal-rgb), 0.35); }
.ergebnis__zahl small { font-size: 0.4em; font-weight: 400; color: var(--schrift-leise); }
.ergebnis__urteil { margin: 0; font-size: 1.15rem; font-weight: 700; }
.ergebnis--bestanden .ergebnis__urteil { color: var(--signal); }
.ergebnis__text { margin: 0; color: var(--schrift-leise); font-size: 0.85rem; }
.ergebnis__text b { color: var(--schrift); font-weight: 400; }
.ergebnis .segmente { grid-column: 1 / -1; flex-wrap: wrap; }

.fehler-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rand); background: var(--flaeche); }
.fehler-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--r4); padding: var(--r3) var(--r4); font-size: 0.85rem; }
.fehler-liste li + li { border-top: 1px solid var(--rand); }
.fehler-liste b { color: var(--schrift); font-weight: 400; }
.fehler-liste .pfeil { color: var(--falsch); }
.fehler-liste .anzahl { color: var(--schrift-leise); font-variant-numeric: tabular-nums; }

/* Verlauf: ein Balken je Durchgang, die Ziellinie als Strich. */
.verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r2); }
.verlauf__eintrag { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 3.5rem; gap: var(--r3); align-items: center; font-size: 0.8rem; }
.verlauf__wann { color: var(--schrift-leise); }
.verlauf__balken { position: relative; height: 0.85rem; border: 1px solid var(--rand); background: var(--flaeche); }
.verlauf__balken::before { content: ""; position: absolute; inset: 0; width: var(--wert, 0%); background: var(--rand-stark); }
.verlauf__eintrag--heute .verlauf__balken::before { background: var(--signal); }
.verlauf__balken::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: var(--ziel, 90%); border-left: 2px dashed var(--schrift); }
.verlauf__wert { text-align: right; font-variant-numeric: tabular-nums; }
.verlauf__eintrag--heute .verlauf__wert { color: var(--signal); }
.verlauf__ziel { margin: var(--r2) 0 0; font-size: 0.75rem; color: var(--schrift-leisest); }

/* --- Metronom ------------------------------------------------------------- */

.metronom {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  gap: var(--r6);
  align-items: start;
}

.pendelkasten {
  border: 1px solid var(--rand-stark);
  background: var(--flaeche);
  padding: var(--r4);
  display: grid;
  gap: var(--r4);
  justify-items: center;
}
.pendel { width: 100%; height: var(--pendel-hoehe); display: block; }
.pendel__gehaeuse { fill: var(--flaeche-hoch); stroke: var(--rand-stark); stroke-width: 1; }
.pendel__achse { stroke: var(--rand); stroke-width: 1; }
.pendel__skala line { stroke: var(--pendel-skala); stroke-width: 1; }
.pendel__skala text { fill: var(--pendel-skala); font-size: 8px; font-family: var(--mono); }
.pendel__stab { stroke: var(--pendel-stab); stroke-width: 3; stroke-linecap: round; }
.pendel__gewicht { fill: var(--pendel-gewicht); stroke: var(--grund); stroke-width: 1; }
.pendel__gewicht-kerbe { stroke: var(--grund); stroke-width: 1; }
.pendel__lager { fill: var(--pendel-gewicht); }
/* Der Winkel kommt je Bild aus der Audio-Uhr (lernen.js, transform am Arm);
   bei reduced-motion setzt das Skript keinen und der Arm steht. */
.pendel__arm { transform-origin: 100px 250px; transform-box: view-box; }

.pendel__start { width: 100%; font-size: 1rem; min-height: 3rem; }
.pendelkasten__tasten { margin: 0; font-size: 0.75rem; color: var(--schrift-leisest); text-align: center; }

/* Schlaglampen: ein Kreis je Schlag, der aktuelle leuchtet. Die Lampen sind
   die Information, das Pendel ist das Bild. */
.schlaege { display: flex; gap: var(--r3); margin: 0; padding: 0; list-style: none; }
.schlag {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 2px solid var(--rand-stark);
  box-sizing: border-box;
}
.schlag--stark { border-color: var(--signal); }
.schlag--aus { border-style: dotted; }
.schlag--aktiv { background: var(--signal); box-shadow: 0 0 12px rgba(var(--signal-rgb), 0.5); }
.schlag--aus.schlag--aktiv { background: var(--rand-stark); box-shadow: none; }

.regler { display: grid; gap: var(--r5); }
.regler__paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--r5); }
.regler__block { display: grid; gap: var(--r3); padding: var(--r4) var(--r5); border: 1px solid var(--rand); background: var(--flaeche); }
.regler__label {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--schrift-leise);
  display: flex;
  justify-content: space-between;
  gap: var(--r3);
  flex-wrap: wrap;
}
.regler__label span { text-transform: none; letter-spacing: 0; color: var(--schrift-leisest); }

.tempo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--r4); align-items: center; }
.tempo__zahl { margin: 0; text-align: center; font-size: var(--zahl-gross); font-weight: 700; line-height: 1; color: var(--signal); font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(var(--signal-rgb), 0.3); }
.tempo__zahl output { font: inherit; }
.tempo__zahl small { display: block; font-size: 0.8rem; font-weight: 400; color: var(--schrift-leise); text-shadow: none; letter-spacing: 0.1em; margin-top: var(--r2); }
.tempo__knopf { width: 3rem; height: 3rem; font-size: 1.4rem; padding: 0; }

.schieber { width: 100%; accent-color: var(--signal); margin: 0; }
.schieber-skala { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--schrift-leisest); margin: 0; }
.schieber-skala i { font-style: normal; }

.wahl { display: flex; gap: var(--r2); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.wahl .knopf { min-width: 4rem; }
.knopf--aktiv, .knopf--aktiv:hover { background: var(--signal); color: var(--auf-signal); border-color: var(--signal); font-weight: 700; }

/* Betonung: ein Knopf je Schlag mit drei Stufen. Zeichen + Wort. */
.betonung { display: flex; gap: var(--r2); margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.betonung .knopf { flex-direction: column; gap: var(--r1); min-width: 4.2rem; padding: var(--r2) var(--r3); }
.betonung__punkt { font-size: 1.1rem; line-height: 1; }
.betonung__wort { font-size: 0.65rem; color: var(--schrift-leisest); letter-spacing: 0.06em; text-transform: uppercase; }
.betonung .knopf--stark .betonung__punkt { color: var(--signal); }
.betonung .knopf--aus { border-style: dashed; }
.betonung .knopf--aus .betonung__punkt { color: var(--schrift-leisest); }

.tap { min-height: 3.6rem; font-size: 1rem; }
.tap__hinweis { font-size: 0.75rem; color: var(--schrift-leisest); margin: 0; }

/* --- Fehler --------------------------------------------------------------- */

.hinweis--fehler {
  border: 1px solid var(--gefahr);
  background: rgba(255, 95, 87, 0.08);
  padding: var(--r3) var(--r4);
  margin: 0 0 var(--r5);
  color: var(--schrift);
  font-size: 0.85rem;
}
.uebung .hinweis--fehler { margin: 0; }
.hinweis--fehler b { color: var(--gefahr); }

/* --- Schmal --------------------------------------------------------------- */

@media (max-width: 760px) {
  .metronom { grid-template-columns: minmax(0, 1fr); }
  .pendel { height: 16rem; }
}

@media (max-width: 640px) {
  .werkzeugkarte { grid-template-columns: 4rem minmax(0, 1fr); }
  .werkzeugkarte__bild { width: 4rem; height: 4rem; }
  .werkzeugkarte .knopf { grid-column: 2; justify-self: start; }
  .stufe { grid-template-columns: 2.4rem minmax(0, 1fr); grid-template-areas: "nr kopf" "nr text" "nr segmente" "nr fuss"; }
  .stufe__segmente { justify-items: start; margin-top: var(--r2); }
  .uebung-zeile { grid-template-columns: 2rem minmax(0, 1fr); }
  .uebung-zeile .status { grid-column: 2; text-align: left; white-space: normal; }
  .hoeren { grid-template-columns: auto minmax(0, 1fr); gap: var(--r4); padding: var(--r4); }
  .hoeren__knopf { width: 4rem; height: 4rem; }
  .hoeren__tasten { display: none; }
  .klaviatur__tasten { height: 7rem; }
  .taste { font-size: 0.65rem; }
  .schieber-skala i { display: none; }
  .betonung { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .betonung .knopf { min-width: 0; padding: var(--r2) var(--r1); }
  .rueckmeldung, .ergebnis { grid-template-columns: minmax(0, 1fr); }
  .namen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verlauf__eintrag { grid-template-columns: 5rem minmax(0, 1fr) 3rem; }
  .raster__zelle { height: 3rem; }
  .regler__block { padding: var(--r4); }
}

@media (max-width: 400px) {
  .aufgaben .segmente { gap: 0.2rem; }
  .segment { width: 0.85rem; height: 0.85rem; }
  .tempo { gap: var(--r2); }
}