/* MySchool — Interaktive Übungen (v0.6.0), Gestaltung zu js/uebungen.js
 *
 * WARUM eine eigene Datei: css/styles.css hat über 9000 Zeilen. Die Übungen sind
 * ein abgeschlossener Baustein mit eigenem Klassen-Präfix (.uebung*) — so bleibt
 * er entfernbar, ohne im grossen Stylesheet zu suchen. Die Farb- und
 * Radius-Variablen kommen aus styles.css (:root), es wird nichts doppelt definiert.
 *
 * BARRIEREFREIHEIT: Richtig/falsch wird NIE nur über Farbe gezeigt — es steht
 * immer ein Zeichen (✓/✗) und ein Satz daneben. Die Farbe ist die Zugabe.
 */

.uebungen-bereich {
  margin: 1rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 0.6.202 (Cole -- Beat, 14.9.2026, mit Fotos der Karte «Vorbereitungstest» in KW 38):
   «Markiere den Titel der Uebungen so wie bei den Kriterien, genau diese Groesse, aber gruen,
   und Vorbereitungstest rote Schrift. Mach das ueberall bei allen Kacheln. Das ist eine Regel.»
   DIE KOPFZEILE «🧩 Uebungen» und JEDER SERIENTITEL (.uebung__titel) stehen im RANG 2 der
   Block-Kopfzeilen (css/styles.css, Block «TITELRANG»: Auftrag · Textfeld · Buch:Seite --
   var(--titelflaeche) / 700 / 1.25): DIESELBE Variable, nicht dieselbe Zahl, damit ein spaeterer
   Schritt an --titelflaeche beide Titel mitnimmt. Farben: das Hausgruen der Augen
   (--auge-gruen-text #18794e) fuer die Kopfzeile, das Hausrot des Auftrags (--auftrag-titel
   #c0392b) fuer einen Serientitel, der mit «Vorbereitungstest» beginnt (Klasse vom Motor,
   serienTitelKlasse). Kontrast nachgerechnet: #18794e auf dem Karten-Grund #f5f8fb 5.07:1, auf
   dem Kopf #eaf1f7 4.74:1; #c0392b auf der weissen Uebungs-Karte 5.44:1 -- alle >= 4.5:1 (AA).
   Nur font-size/weight/line-height/color -- kein margin, kein display: nichts verschiebt sich
   (Beat: «eine Einstellungs-Aenderung darf NIE eine Position verschieben»). Gilt fuer Kind,
   Lehrperson, Administrator und Vorschau gleich (ein Bauer, eine Regel).
   Gemessen von werkzeuge/pruef-auftrag-karte.js F1-F3. */
.uebungen-bereich__kopf {
  margin: 0;
  font-size: var(--titelflaeche);
  font-weight: 700;
  line-height: 1.25;
  color: var(--auge-gruen-text);
  letter-spacing: 0.02em;
}
/* Im Bereichs-Rahmen (mehrere Bereiche) traegt der Blockkopf den Titel; das h4 darin sagt nur
   «Waehle deine Stufe» -- eine Anweisung, keine Ueberschrift. Sie bleibt leise wie bisher. */
.uebung-block .uebungen-bereich__kopf {
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  color: var(--farbe-text-leise);
}

.uebung {
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-karte);
  padding: 0.85rem 0.95rem;
  box-shadow: var(--schatten);
}

.uebung__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.uebung__titel { margin: 0; font-size: var(--titelflaeche); font-weight: 700; line-height: 1.25; }
/* Ein Serientitel, der mit «Vorbereitungstest» beginnt: rot (Hausrot des Auftrags). */
.uebung__titel--vorbereitungstest { color: var(--auftrag-titel); }
/* 0.6.265 (Cole -- Beat, 17.9.2026, 16.30: «Arbeite den Übungstest noch etwas farblich hervor, z. B. Orange.
   ‹Übungstest› noch etwas kräftiger in der Schrift bei allen Titeln. Mach das in allen Kacheln.»)
   DIE ART EINER SERIE: Uebungstest ORANGE, Lernzielkontrolle ROT-VIOLETT (Farben in css/styles.css :root, dieselben
   wie am Test-Chip im Wochenplan). An der KARTE ein kraeftiger linker Rand, farbiger Rahmen und ein zarter Grund --
   die Fachfarben (Kachel, Chip) bleiben unberuehrt. Im TITEL wird nur das WORT «Übungstest» / «Lernzielkontrolle»
   kraeftiger (900, etwas groesser, in der Farbe); fehlt das Wort, steht der CHIP davor. Kein margin/display am
   Titel selbst (pruef-auftrag-karte F2a: keine Positionsverschiebung). Bei «Auge zu» (uebung--auge-zu, Lehrperson)
   bleibt die Farbe -- ausgegraut ueber opacity, damit Beat sieht, WAS da zu ist. */
.uebung--uebungstest { border-color: var(--serie-uebungstest); border-left: 6px solid var(--serie-uebungstest); background: var(--serie-uebungstest-grund); }
.uebung--lernzielkontrolle { border-color: var(--serie-lzk); border-left: 6px solid var(--serie-lzk); background: var(--serie-lzk-grund); }
.uebung__titel--uebungstest { color: var(--serie-uebungstest-text); }
.uebung__titel--lernzielkontrolle { color: var(--serie-lzk-text); }
.uebung__titel-wort { font-weight: 900; font-size: 1.12em; letter-spacing: 0.01em; }
.uebung__titel-wort--uebungstest { color: var(--serie-uebungstest-text); }
.uebung__titel-wort--lernzielkontrolle { color: var(--serie-lzk-text); }
.uebung__art-chip {
  display: inline-block; vertical-align: 0.1em;
  margin-right: 0.4em; padding: 0.05em 0.55em;
  border-radius: 999px; font-size: 0.78em; font-weight: 900; line-height: 1.5; letter-spacing: 0.02em;
  color: #fff; background: var(--serie-uebungstest); white-space: nowrap;
}
.uebung__art-chip--uebungstest { background: var(--serie-uebungstest); }
.uebung__art-chip--lernzielkontrolle { background: var(--serie-lzk); }
/* Am Block- und Gruppenkopf (zugeklappt) haengt derselbe Chip hinter dem Titel. */
.uebung-block__klapp > .uebung__art-chip, .uebung-gruppe__kopf > .uebung__art-chip { margin-left: 0.5em; margin-right: 0; font-size: 0.72rem; }

.uebung__fortschritt {
  margin: 0;
  font-size: 0.85rem;
  color: var(--farbe-text-leise);
  white-space: nowrap;
}

.uebung__einleitung {
  margin: 0.35rem 0 0;
  font-size: 0.92rem;
  color: var(--farbe-text-leise);
}

.uebung__buehne { margin-top: 0.7rem; }

/* --- Die Erklaerung klappt weg (v0.6.69, Cole -- Beat: «moeglichst wenig Platz
   verlieren»). Die Einleitung steht in der ausgelieferten Fassung auf JEDEM
   Aufgaben-Bildschirm; bei siebzig Aufgaben ist das siebzigmal derselbe Text.
   Gemessen am 28.8. in echtem Chrome, Aufgabe 5 von 40, Mittel ueber vier
   Stufen-Uebungen: iPad hoch 475 -> 355 px, iPad quer 661 -> 441 px.
   ZWEI REGELN, MEHR NICHT. <summary> bringt Klappen, Tastatur und Screenreader
   selbst mit; hier steht nur, dass es nach einer Schaltflaeche AUSSIEHT und auf
   dem iPad getroffen wird. Die Zeile bleibt EINE Zeile -- ein groesseres Polster
   waere genau der Platz, den wir gerade zurueckgeholt haben.

   WO DER KASTEN STEHT, entscheidet NICHT diese Datei, sondern die Baureihenfolge in
   prod-linie/uebungen.js: seit dem 30.8. haengt er NACH .uebung__buehne, also unter
   der Knopfreihe (Beat: «Setze die Erklaerung geschlossen unter «Pruefen» «Weiter»»).
   Hier steht das nur als Wegweiser -- es gibt in dieser Datei bewusst KEINEN
   Nachbarschaftswaehler (+ / ~) auf .uebung__einleitung-klapp oder .uebung__buehne.
   Wer je einen einbaut, koppelt die Optik an die Reihenfolge und bricht sie beim
   naechsten Verschieben still. Gemessen wird die Reihenfolge am gebauten Baum von
   werkzeuge/pruef-erklaerung-unten.js (E1). */
.uebung__einleitung-klapp { margin: 0.35rem 0 0; }
/* vVERSION (Cole, 3.9.) — DAS LETZTE ZU KLEINE DREIECK IM UEBUNGSBEREICH.
   Beat: «Bei den Uebungen, die Teile sind ziemlich klein. […] Auf dem iPad ist es
   einfacher, wenn die Symbole etwas groesser sind, so wie du das auch bei den
   Themenfeldern gemacht hast.»
   GEMESSEN, nicht geschaetzt: die Stufenpillen (.uebung-stufen__knopf) und die
   Bereichs-Pfeile (.uebung-block__pfeil) halten seit v0.6.72/v0.6.79 beide
   var(--tippflaeche) = 48 px. DIESE Zeile hier war die einzige im Uebungsbereich, die
   das nicht tat: 0.9rem Schrift plus 0.15rem Polster ergaben rund 21 px hoch — weniger
   als die Haelfte dessen, was ein Finger auf einem geteilten iPad zuverlaessig trifft.
   min-height ist die Loesung, die das Dreieck des <summary> stehen laesst: `display:flex`
   wuerde den nativen Marker in Chrome entfernen und muesste ihn danach von Hand
   nachbauen — ein zweiter Pfeil neben dem eingebauten. Das Polster kommt dazu, damit die
   Schrift in der hoeheren Zeile nicht oben klebt. */
.uebung__einleitung-marke {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--farbe-text-leise);
  padding: 0.35rem 0;
  min-height: var(--tippflaeche);
  box-sizing: border-box;
  list-style-position: inside;
  touch-action: manipulation;
}
.uebung__einleitung-marke:focus-visible {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* vv0.6.79 (Cole, 30.08.2026) — GRUNDSATZ «LESEFLAECHE 1.15rem» (css/styles.css :root).
   Beat: «... und des Textes. Besonders sollte es auf iPad gut sichtbar sein.»
   Die Frage stand bisher in der Grundschrift (18 px) und war damit genau so gross wie
   jede Umgebungszeile. Sie ist aber das, WORAN gearbeitet wird: 1.15rem = 20.7 px.
   `line-height: 1.4` gehoert dazu — eine groessere Schrift in einem engen Zeilenabstand
   liest sich auf 300 px Spaltenbreite schlechter als vorher, nicht besser. */
.uebung-aufgabe__frage {
  margin: 0 0 0.5rem;
  font-weight: 600;
  font-size: var(--leseflaeche);
  line-height: 1.4;
}

.uebung-aufgabe__feld { margin-bottom: 0.6rem; }

/* --- Lückentext: die Felder laufen IM Satz mit, damit der Satz lesbar bleibt --- */
/* vv0.6.79: der Lueckensatz IST der Aufgabentext dieser Aufgabenart -> dieselbe
   Leseflaeche wie .uebung-aufgabe__frage. Die Zeilenhoehe wird weiter unten (Abschnitt
   «PLATZ») auf 1.85 gesetzt; sie bleibt dort, weil sie dort begruendet ist. */
.uebung-luecke { margin: 0; line-height: 2.1; font-size: var(--leseflaeche); }

.uebung-luecke__feld,
.uebung-wort__feld,
.uebung-zuordnen__wahl,
.uebung-korrektur__feld {
  font: inherit;
  color: var(--farbe-text);
  background: #fff;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 0.2rem 0.45rem;
}

.uebung-luecke__feld { min-width: 6ch; margin: 0 0.15rem; }
/* 0.6.253 (Fragen-Editor E2, Luecke mit Auswahl): das Auswahlfeld laeuft wie das Tippfeld IM Satz mit --
   gleiche Schrift, gleicher Rand, gleiche Hoehe (kein 48-px-Block, siehe die Begruendung beim Tippfeld unten). */
.uebung-luecke__wahl {
  font: inherit;
  color: var(--farbe-text);
  background: #fff;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 0.2rem 0.45rem;
  margin: 0 0.15rem;
  max-width: 100%;
}
.uebung-luecke__wahl:focus-visible { outline: 3px solid var(--farbe-akzent); outline-offset: 1px; }

.uebung-luecke__feld:focus-visible,
.uebung-wort__feld:focus-visible,
.uebung-zuordnen__wahl:focus-visible,
.uebung-korrektur__feld:focus-visible,
.uebung-auswahl__box:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 1px;
}

/* --- Wort korrigieren --- */
/* vv0.6.79: auch hier ist der Satz der Aufgabentext -> GRUNDSATZ «LESEFLAECHE». */
.uebung-wort__satz { margin: 0 0 0.45rem; font-size: var(--leseflaeche); line-height: 1.5; }

.uebung-wort__falsch {
  background: var(--farbe-heute-bg);
  border-bottom: 2px wavy var(--auge-rot-text);
  border-radius: 4px;
  padding: 0 0.15rem;
}

.uebung-wort__label {
  display: block;
  font-size: 0.88rem;
  color: var(--farbe-text-leise);
  margin-bottom: 0.2rem;
}

/* vv0.6.79: eigenstaendige Eingabefelder tragen die volle Tippflaeche. Das
   Luecken-Feld (.uebung-luecke__feld) tut es AUSDRUECKLICH NICHT — es laeuft im Satz mit,
   und 48 px darin spreizten den Zeilenabstand des ganzen Satzes. Die Grenze des Grundsatzes
   steht in css/styles.css :root beim Namen genannt. */
.uebung-wort__feld { min-width: 14ch; min-height: var(--tippflaeche); }

/* --- Auswahl (eine / mehrere) --- */
.uebung-auswahl {
  border: 1px solid var(--farbe-rand);
  border-radius: 10px;
  padding: 0.5rem 0.7rem 0.6rem;
  margin: 0;
}

.uebung-auswahl__legende {
  font-size: 0.85rem;
  color: var(--farbe-text-leise);
  padding: 0 0.3rem;
}

.uebung-auswahl__zeile {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.22rem 0;
}

/* Grosse Klickflaeche: auf dem iPad soll der ganze Text die Option auswaehlen.
   vv0.6.79 (Cole): die Absicht stand hier seit v0.6.0 — die Zahl fehlte. Die Zeile
   war rund 30 px hoch; getroffen werden musste sie mit dem Daumen. Jetzt traegt das Label
   die volle Tippflaeche (48 px) UND die Leseflaeche. `display:flex` + `align-items:center`
   macht aus der Mindesthoehe eine wirklich mittige Zeile statt eines hohen Kastens mit
   Text oben drin. Die Aufzaehlungs-Zeile richtet sich mit — sonst stuende das Kaestchen
   bei einer einzeiligen Option 14 px ueber seinem eigenen Text. */
.uebung-auswahl__zeile { align-items: center; }
.uebung-auswahl__label {
  cursor: pointer;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: var(--tippflaeche);
  font-size: var(--leseflaeche);
  line-height: 1.35;
  touch-action: manipulation;
}

.uebung-auswahl__box {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  accent-color: var(--farbe-akzent);
}

/* --- Zuordnen --- */
.uebung-zuordnen { display: flex; flex-direction: column; gap: 0.4rem; }

.uebung-zuordnen__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.uebung-zuordnen__links { font-weight: 600; min-width: 8ch; }

.uebung-zuordnen__wahl { flex: 1; min-width: 14ch; max-width: 24rem; min-height: var(--tippflaeche); }   /* Nachlese E2 (Iris): Obergrenze, damit die Auswahl bei 1280 px nicht ueber 1100 px laeuft */

/* --- Knopfleiste --- */
/* v0.6.63: .uebung-aufgabe__leiste und .uebung-aufgabe__auswertung sind ERSATZLOS weg.
   Beide gehoerten zur Aufgabe-fuer-Aufgabe-Ansicht: eine Knopfreihe je Aufgabe (Pruefen /
   Weiter) und ein Auswertungsfeld je Aufgabe. Seit die Bewertung ans Ende der Seite
   gerueckt ist, wird beides nicht mehr gebaut. Eine CSS-Regel fuer ein Element, das es
   nicht mehr gibt, ist dieselbe Sorte Falschaussage wie ein Name, der einmal gestimmt
   hat -- sie sieht nach Absicht aus. Der Weiter-Knopf lebt weiter, aber nur noch in der
   Korrektur. */
.uebung-aufgabe__weiter[disabled] { opacity: 0.45; cursor: not-allowed; }

.uebung-melde {
  margin: 0.5rem 0 0.3rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
}

.uebung-melde--ok {
  color: var(--auge-gruen-text);
  background: var(--auge-gruen-flaeche);
  border: 1px solid var(--auge-gruen-rand);
}

.uebung-melde--fehler {
  color: var(--auge-rot-text);
  background: var(--auge-rot-flaeche);
  border: 1px solid var(--auge-rot-rand);
}

.uebung-melde--warn {
  color: #7a5200;
  background: var(--farbe-heute-bg);
  border: 1px solid var(--farbe-heute-rand);
}

.uebung-fehler { list-style: none; margin: 0.2rem 0 0; padding: 0; }

.uebung-fehler__zeile {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  padding: 0.15rem 0;
}

.uebung-fehler__zeichen { color: var(--auge-rot-text); font-weight: 700; }

/* --- Merkregel: die kurze Hilfe, die den Fehler kuenftig vermeiden soll --- */
.uebung-hilfe {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.65rem;
  border-left: 4px solid var(--farbe-akzent);
  background: #f3f7fb;
  border-radius: 0 8px 8px 0;
}

.uebung-hilfe__marke { color: var(--farbe-akzent); }

/* --- Vier-mal-Regel --- */
.uebung-korrektur {
  margin-top: 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1px dashed var(--farbe-rand);
  border-radius: 10px;
  background: #fbfcfe;
}

.uebung-korrektur__label {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 0.3rem;
}

.uebung-korrektur__feld { width: 100%; box-sizing: border-box; resize: vertical; }

.uebung-korrektur__zaehler { margin: 0.35rem 0 0; font-size: 0.9rem; font-weight: 600; }

.uebung-korrektur__zaehler--ok { color: var(--auge-gruen-text); }

.uebung-korrektur__zaehler--offen { color: var(--farbe-text-leise); }

.uebung-korrektur__marken {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.uebung-korrektur__marke {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.88rem;
  border: 1px solid var(--farbe-rand);
}

.uebung-korrektur__marke--ok {
  color: var(--auge-gruen-text);
  background: var(--auge-gruen-flaeche);
  border-color: var(--auge-gruen-rand);
}

.uebung-korrektur__marke--fehler {
  color: var(--auge-rot-text);
  background: var(--auge-rot-flaeche);
  border-color: var(--auge-rot-rand);
}

.uebung-korrektur__grund { font-size: 0.78rem; opacity: 0.85; }

/* --- Abschluss --- */
.uebung__abschluss-text { margin: 0 0 0.5rem; font-weight: 600; }

/* Wer «Bewegung reduzieren» eingestellt hat, bekommt keine Uebergaenge. */
@media (prefers-reduced-motion: reduce) {
  .uebung, .uebung-melde, .uebung-korrektur__marke { transition: none !important; }
}

/* v0.6.0-b (Cole, Argus Punkt B): Der Zustand «nur lesen». Beats Trennung sichtbar vs.
   bearbeitbar gilt auch hier: die Uebung bleibt vollstaendig SICHTBAR -- was der Schueler
   frueher eingetragen hat, steht weiter da --, sie nimmt nur nichts mehr entgegen. Darum
   kein Ausgrauen des ganzen Blocks (das laese sich als «kaputt» lesen), sondern ein ruhiger
   Hinweis und stillgelegte Bedienelemente. */
.uebung-melde--info {
  background: #eef4fb;
  border: 1px solid #bcd4ec;   /* volle Kante: die Grundregel .uebung-melde setzt keine */
  color: #24486e;
}
.uebung--gesperrt .uebung-aufgabe__feld input,
.uebung--gesperrt .uebung-aufgabe__feld textarea,
.uebung--gesperrt .uebung-aufgabe__feld select {
  background: #f4f6f8;
  color: #55606b;
  cursor: not-allowed;
}

/* =====================================================================
   v0.6.63 (Cole) — DIE AUFGABENSEITE, DIE BESTAETIGUNG, DIE KORREKTUREN

   Beat am 26.8.: die ganze Seite durcharbeiten, bestaetigen, dann korrigieren.
   Damit stehen bis zu 15 Aufgaben untereinander statt einer. Die Trennlinie je
   Aufgabe ist darum nicht Zierrat: ohne sie liest sich die Seite als ein Block,
   und ein Kind verliert die Zeile.
   ===================================================================== */

.uebung__seite { display: flex; flex-direction: column; gap: 0.2rem; }

.uebung__seite .uebung-aufgabe {
  padding: 0.7rem 0;
  border-top: 1px solid var(--farbe-rand, #dfe4ea);
}
.uebung__seite .uebung-aufgabe:first-child { border-top: 0; padding-top: 0; }

.uebung__leiste {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 2px solid var(--farbe-rand, #dfe4ea);
}
.uebung__bestaetigen { align-self: flex-start; }
.uebung__bestaetigen[disabled] { opacity: 0.45; cursor: not-allowed; }
.uebung__hinweis { margin: 0; font-size: 0.88rem; color: var(--farbe-text-leise, #67717c); }

.uebung__bewertung { margin: 0.6rem 0; font-weight: 600; }

/* --- Der Blick auf die korrigierte Seite: eine Zeile je Aufgabe --- */
.uebung__bilanz { margin: 0 0 0.6rem; font-weight: 600; }
.uebung__blick {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
}
.uebung__blick-zeile {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.85rem;
  border: 1px solid transparent;
}
.uebung__blick-zeile--ok {
  background: var(--auge-gruen-bg, #e7f6ec);
  color: var(--auge-gruen-text, #1e6b38);
  border-color: var(--auge-gruen-rand, #b6e0c4);
}
.uebung__blick-zeile--fehler {
  background: var(--auge-rot-bg, #fdecec);
  color: var(--auge-rot-text, #96231f);
  border-color: var(--auge-rot-rand, #f3c2c0);
}
.uebung__blick-zeile--offen {
  background: #eef4fb;
  color: #24486e;
  border-color: #bcd4ec;
}
.uebung__blick-zeichen { font-weight: 700; }

/* --- Ein Korrektur-Block: die Aufgabe, der Fehler, die Merkregel, das Feld --- */
.uebung-korrektur-block {
  margin-top: 0.6rem;
  padding: 0.8rem;
  border: 1px solid var(--auge-rot-rand, #f3c2c0);
  border-radius: 10px;
  background: var(--farbe-flaeche, #fff);
}
.uebung-korrektur-block__kopf {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--farbe-text-leise, #67717c);
}
.uebung-korrektur-block .uebung-aufgabe__weiter { margin-top: 0.6rem; }

/* Zwei Beschriftungs-Teile im Korrektur-Feld, die bisher ohne eigene Regel liefen. */
.uebung-korrektur__zeichen { font-weight: 700; }
.uebung-korrektur__wort { font-family: inherit; }

/* Das Urteil an EINER Aufgabe — es erscheint erst nach der Bestaetigung.
   Waehrend des Durcharbeitens baut js/uebungen.js diesen Absatz gar nicht
   (urteilVon() liefert dann ""), darum braucht es hier keine Versteck-Regel:
   nicht gebaut ist deutlicher als ausgeblendet. */
.uebung-aufgabe__marke {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
}
.uebung-aufgabe__marke--ok { color: var(--auge-gruen-text, #1e6b38); }
.uebung-aufgabe__marke--fehler { color: var(--auge-rot-text, #96231f); }
.uebung-aufgabe__marke--offen { color: #24486e; }
.uebung-aufgabe[data-urteil="fehler"] { border-left: 3px solid var(--auge-rot-rand, #f3c2c0); padding-left: 0.6rem; }
.uebung-aufgabe[data-urteil="ok"] { border-left: 3px solid var(--auge-gruen-rand, #b6e0c4); padding-left: 0.6rem; }

/* Der Pruefen-Knopf JE AUFGABE. Er entsteht nur bei sofortRueckmeldung=true und
   art="uebung"; ist der Schalter aus, wird er nicht gebaut (nicht ausgeblendet). */
.uebung-aufgabe__pruefen { margin-top: 0.4rem; }
.uebung-aufgabe__auswertung:empty { display: none; }

/* =====================================================================
   ERGAENZUNGSBLOCK (Cole) — DER ALTE MOTOR BEKOMMT SEINE STILE ZURUECK

   BEFUND, gemessen und nicht vermutet: css/uebungen.css ist fuer den NEUEN
   Motor (js/uebungen.js im Repo, 187 555 Bytes) geschrieben. Ausgeliefert ist
   der ALTE (83 511 Bytes, sha256 07cae6cc...). Von den 56 Klassen, die der
   laufende Motor baut, hatten 17 keine einzige Regel — darunter der komplette
   Block "Schreibe das Wort 4-mal richtig", also bei einer RECHTSCHREIBUEBUNG
   das Herzstueck. Der neue Motor nennt denselben Block .uebung-korrektur__*,
   der laufende .uebung-viermal__*. Es ist dieselbe Flaeche unter zwei Namen.

   REGEL FUER DIESEN BLOCK, damit die Datei auf BEIDEN Motoren stimmt:
   NICHTS ueber diesem Kommentar wird angefasst — kein .uebung-korrektur__*
   geloescht, keine Zeile geaendert. Was hier unten anders aussehen soll,
   steht als spaetere Regel gleicher Spezifitaet da und gewinnt durch die
   Reihenfolge. Zwei Namen, ein Aussehen. Rueckbau = diesen Block loeschen.

   Benutzt werden nur Variablen, die auf prod wirklich in :root stehen
   (nachgezaehlt) — --farbe-flaeche, --auge-gruen-bg und --auge-rot-bg
   gibt es dort NICHT, darum stehen sie hier nirgends.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) DIE VIER-MAL-FLAECHE — gespiegelt von .uebung-korrektur__* (Z. 212-265,
   376-377). Bewusst 1:1 dieselben Werte: das ist eine Reparatur, keine
   Neugestaltung. Wer die beiden Motoren je vereinheitlicht, sieht am
   identischen Wertesatz, dass hier nichts auseinanderlaufen kann.
   --------------------------------------------------------------------- */

.uebung-viermal {
  margin-top: 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1px dashed var(--farbe-rand);
  border-radius: 10px;
  background: #fbfcfe;
}

.uebung-viermal__label {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 0.3rem;
}

/* Das Textfeld braucht ZWEI Saetze Regeln, und genau die fehlten beide:
   die gemeinsame Feld-Optik (Z. 66-76) und den Fokus-Ring (Z. 80-87).
   Ohne sie stand hier ein nacktes Browser-Textfeld ohne Rahmen und ohne
   sichtbaren Tastatur-Fokus — barrierefrei war das nicht. */
.uebung-viermal__feld {
  font: inherit;
  color: var(--farbe-text);
  background: #fff;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 0.2rem 0.45rem;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

.uebung-viermal__feld:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 1px;
}

.uebung-viermal__zaehler { margin: 0.35rem 0 0; font-size: 0.9rem; font-weight: 600; }

.uebung-viermal__zaehler--ok { color: var(--auge-gruen-text); }

.uebung-viermal__zaehler--offen { color: var(--farbe-text-leise); }

.uebung-viermal__marken {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.uebung-viermal__marke {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.88rem;
  border: 1px solid var(--farbe-rand);
}

.uebung-viermal__marke--ok {
  color: var(--auge-gruen-text);
  background: var(--auge-gruen-flaeche);
  border-color: var(--auge-gruen-rand);
}

.uebung-viermal__marke--fehler {
  color: var(--auge-rot-text);
  background: var(--auge-rot-flaeche);
  border-color: var(--auge-rot-rand);
}

.uebung-viermal__zeichen { font-weight: 700; }
.uebung-viermal__wort { font-family: inherit; }
.uebung-viermal__grund { font-size: 0.78rem; opacity: 0.85; }

/* Spiegelt Z. 271-273: wer «Bewegung reduzieren» eingestellt hat, bekommt
   auch an der Vier-mal-Flaeche keine Uebergaenge. */
@media (prefers-reduced-motion: reduce) {
  .uebung-viermal__marke { transition: none !important; }
}

/* ---------------------------------------------------------------------
   2) DIE VIER WEITEREN KLASSEN OHNE REGEL
   --------------------------------------------------------------------- */

/* Die Knopfreihe (Pruefen · Weiter). Der Kommentar bei Z. 155-161 erklaert
   sie fuer «ersatzlos weg» — das gilt fuer den NEUEN Motor. Der laufende
   baut sie weiter (js/uebungen.js:1062), und ohne Regel klebten die beiden
   Knoepfe ohne Abstand aneinander. */
.uebung-aufgabe__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Der Fehlersatz neben dem Kreuz. Ohne min-width:0 kann ein langer Satz die
   Flex-Zeile aufspannen statt umzubrechen — und Beats Saetze werden laenger. */
.uebung-fehler__text { flex: 1 1 auto; min-width: 0; }

/* 0.6.270 (Cole -- Beat 17.9.: «viele Aufgaben wurden nicht gespeichert … Das darf nicht passieren.»)
   DIE SICHERUNGSMARKE JE AUFGABE: eine Zeile Kleintext UNTER der Leiste, kein Knopf, kein Tippziel -- die
   44-px-Leiste bleibt eine Reihe. gruen «gesichert ✓», gelb «wird gesichert …» / «wird nachgeschickt …»,
   grau «auf diesem Gerät gespeichert» (kein Server-Speicher in dieser Sitzung). Ruhig, nicht aufdringlich. */
.uebung-aufgabe__sicherung {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  line-height: 1.3;
  color: #6b7280;
}
.uebung-aufgabe__sicherung[data-sicherung="gesichert"] { color: #1b7a3a; }
.uebung-aufgabe__sicherung[data-sicherung="unterwegs"],
.uebung-aufgabe__sicherung[data-sicherung="nachschicken"] { color: #9a6b00; }
.uebung-aufgabe__sicherung[hidden] { display: none; }

/* Der Gross-/Kleinschreib-Hinweis. Er steht NEBEN einem gruenen «Richtig»
   (js/uebungen.js:1188-1193) — Beats Hausregel: «Gruen bleibt gruen, der
   Hinweis steht daneben.» Also weder gruen (er wuerde die Wertung doppeln)
   noch rot (er wertet nicht), sondern ruhig blau wie --info. Volle Kante,
   weil die Grundregel .uebung-melde (Z. 164) keine setzt. */
.uebung-melde--hinweis {
  background: #eef4fb;
  border: 1px solid #bcd4ec;
  color: #24486e;
  font-weight: 500;
}

/* Die Abschlussflaeche (Bilanz + «noch einmal machen»). */
.uebung__abschluss {
  padding-top: 0.6rem;
  border-top: 1px solid var(--farbe-rand);
}
/* 0.6.260 (Cole -- Beat 17.9.): die zwei Knoepfe nach dem Test und das Fehler-Training. Beide Knoepfe in
   EINER Reihe (Bedienleiste = eine Reihe), Kinder-Tippziel 44 px, auf dem iPad untereinander in voller Breite. */
.uebung__abschluss-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0; }
.uebung__abschluss-knoepfe .btn--klein { min-height: 44px; padding: 0.55rem 0.9rem; font-size: 1rem; }
.uebung__abschluss-knoepfe .btn--klein[disabled] { opacity: 0.55; cursor: not-allowed; }
.uebung--training .uebung__training { padding: 0.4rem 0 0.6rem; border-bottom: 1px solid var(--farbe-rand); margin-bottom: 0.6rem; }
.uebung__training-kopf { margin: 0.2rem 0 0; font-weight: 700; }
.uebung__training-runde { margin: 0.2rem 0 0.3rem; font-weight: 600; }
.uebung__training-hinweis { margin: 0; }
.uebung__training-zurueck { min-height: 44px; }
@media (max-width: 720px) {
  .uebung__abschluss-knoepfe .btn--klein { flex: 1 1 100%; }
}
/* Nachlese 17.9.: der Knopfplatz nach dem strengen Test (wird nach dem Eintreffen der Sicht neu gezeichnet),
   der Satz «kein Fehler-Training» und die leise Dashboard-Marke «trainiert n Fehler» unter dem Namen. */
.uebung__abschluss-knopfplatz:empty { display: none; }
/* 0.6.275 (Cole -- Beat 17.9. 22.40): der Platz fuer «↺ Test wiederholen (wird gespeichert)» (eigener Kasten, nur mit
   Marke wiederholenFrei), die Marke «Versuch n» im Kopf und das Band des Uebungslinks («nichts wird gespeichert»). */
.uebung__abschluss--versuch[hidden] { display: none; }
.uebung__versuch-neu { min-height: 44px; padding: 0.55rem 0.9rem; font-size: 1rem; }
.uebung__versuch-hinweis { margin: 0.2rem 0 0.4rem; }
.uebung__versuch-melde[hidden] { display: none; }
.uebung__versuch-marke {
  display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700;
  background: rgba(47, 111, 176, 0.14); color: #1f4f80; vertical-align: middle; white-space: nowrap;
}
.uebung--ueben .uebung__probe-band { background: #e6f4ea; border-color: #b7dfc2; color: #1b5e20; }
.uebung__training-satz--aus { margin-top: 0.3rem; }
.lzk-name__trainiert { display: block; font-size: 0.78em; font-weight: 500; opacity: 0.8; white-space: normal; line-height: 1.2; }

/* ---------------------------------------------------------------------
   3) PLATZ — Beat: «Nuetze den Platz besser. Ziehe die Saetze in die Laenge.»

   GEMESSEN, warum das noetig ist: die Uebung haengt in der MITTLEREN
   Arbeitsraum-Spalte (js/app.js:6982), die 1.8 von 3.8 Rastereinheiten
   bekommt (css/styles.css:1019-1027, js/app.js:6380). Daraus folgt die
   nutzbare Textbreite einer Uebungszeile:
       Laptop 1536 in der Seite   571 px   (rund 69 Zeichen)
       Laptop 1536 im Vollbild    644 px   (rund 78 Zeichen)
       iPad quer  1080            428 px   (rund 52 Zeichen)
       iPad hoch   810            300 px   (rund 36 Zeichen)  <-- der enge Fall
   36 Zeichen pro Zeile ist der Grund, warum es eng wirkt. Die Breite selbst
   kann diese Datei nicht aendern (sie wird in styles.css und js/app.js
   entschieden) — aber sie kann aufhoeren, den vorhandenen Platz zu verheizen.
   --------------------------------------------------------------------- */

/* Ein Rasterfeld mit minmax(0, Xfr) begrenzt die Spalte, nicht den Inhalt:
   ohne min-width:0 laeuft ein langer Satz mit vielen Luecken-Feldern aus der
   Spalte heraus statt umzubrechen. .arbeitsraum-spalte hat KEIN min-width:0
   (in styles.css nachgesehen) — hier ist die Stelle, an der es nichts kostet. */
.uebungen-bereich,
.uebung { min-width: 0; }

/* Weniger Polster = mehr Zeile. 0.85/0.95rem -> 0.7/0.75rem gibt auf dem
   iPad hoch rund 6 px Textbreite zurueck. Wenig, aber gratis. */
.uebung { padding: 0.7rem 0.75rem; }

/* Silbentrennung. Auf einer 300-px-Spalte ist sie der wirksamste Hebel
   ueberhaupt: statt eines halbleeren Flatterrands fuellt der Satz die Zeile.
   Das -webkit-Praefix ist fuer iPad/Safari nicht optional. <html lang="de">
   steht (index.html geprueft) — ohne Sprachangabe taete hyphens:auto nichts. */
.uebung__einleitung,
.uebung-aufgabe__frage,
.uebung-wort__satz,
.uebung-luecke,
.uebung-fehler__text {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Die Zeilenhoehe im Lueckensatz. 2.1 stammt daher, dass die Eingabefelder IM
   Satz mitlaufen und sonst aneinanderstossen. 1.85 laesst ihnen weiterhin
   Luft (Feldhoehe rund 1.6em) und spart auf einer Uebung mit 12 Zeilen rund
   50 px Hoehe. Das ist die eine Zahl hier, die man am iPad ansehen muss. */
.uebung-luecke { line-height: 1.85; }

/* Die Luecken-Felder duerfen die Spalte nicht sprengen; 6ch Mindestbreite
   bleibt (Z. 78), aber die Obergrenze ist ab jetzt die Spalte. */
.uebung-luecke__feld { max-width: 100%; }

/* ---------------------------------------------------------------------
   4) DER THEORIETEIL — Beat: «mit einem kleinen Theorieteil zu Beginn.»

   Heute ist die Einleitung ein <p> in 0.92rem und --farbe-text-leise (Z. 51-55),
   also die Auszeichnung fuer eine Fussnote. Etwas, das Kinder LESEN sollen,
   darf nicht grau und kleiner als der Rest sein.

   white-space: pre-line ist die eine Zeile, die den Theorieteil ueberhaupt
   erst moeglich macht: js/uebungen.js:879 setzt den Text ueber textContent,
   ein Zeilenumbruch ueberlebt das — aber HTML faltet ihn ohne diese Regel zu
   einem Leerzeichen. Mit ihr werden Umbrueche echt und Leerzeilen zu
   Absaetzen. Merksatz, Beispiel und Aufzaehlung ohne eine Zeile JavaScript.

   DIE OPTIK IST EINE ENTSCHEIDUNG, KEINE MESSUNG: der Akzentbalken ist die
   Hausform, die .uebung-hilfe (Z. 201-207) fuer «erklaerender Kasten» schon
   benutzt — uebernommen statt neu erfunden. Sie aendert das Aussehen der 4
   Uebungen, die HEUTE eine Einleitung tragen. Wer das nicht will, loescht die
   letzten fuenf Deklarationen dieser Regel; white-space, font-size und color
   muessen bleiben, sonst faellt jeder mehrzeilige Theorietext zusammen. */
.uebung__einleitung {
  white-space: pre-line;
  font-size: 1rem;
  color: var(--farbe-text);
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.65rem;
  border-left: 4px solid var(--farbe-akzent);
  background: #f3f7fb;
  border-radius: 0 8px 8px 0;
}

/* ---------------------------------------------------------------------
   5) ZWEI KLASSEN, DIE NUR DER NEUE MOTOR BAUT

   Der Riegel pruef-uebungen-stilabdeckung.py hat sie gefunden (Zelle SA2):
   beides eigenstaendige Elemente, kein Marker auf einer gestylten Basis --
   anders als .uebung__geaendert / .uebung__unvollstaendig, die immer auf
   "uebung-melde uebung-melde--warn ..." sitzen und darum keine eigene
   Regel brauchen. Der AUSGELIEFERTE Motor baut diese zwei nie; sie aendern
   heute Nacht also nichts, sondern nur dann, wenn der neue je live geht.
   --------------------------------------------------------------------- */

/* Der Behaelter fuer die Korrektur-Bloecke (js/uebungen.js:2226). */
.uebung__korrekturen { display: flex; flex-direction: column; gap: 0.6rem; }

/* Die Aufgabennummer in der Bilanz-Pille (js/uebungen.js:2292). */
.uebung__blick-nr { font-weight: 600; }

/* =====================================================================
   v0.6.72 (Cole, 29.8.) — DIE STUFENWAHL, DIE ZWEI BLOECKE,
   DIE AUFGABENNUMMER

   Beat hat je Thema drei Stufen geschrieben. Sie standen als drei Karten
   untereinander; ein Kind scrollte an zwei fremden Stufen vorbei, bis es
   seine fand. Ab hier waehlt es mit einem Knopf.

   ABGELEITET, NICHT NEU ERFUNDEN: die Pille uebernimmt Form und Werte von
   .schueler-bereich-tab (css/styles.css) — dieselbe Pillenform, dieselbe
   Ruhefarbe, derselbe Aktiv-Zustand. EINE Abweichung, und sie ist Absicht:
   min-height 44px statt 2.4rem (38,4px). 44 px ist die Untergrenze fuer ein
   Fingerziel und wird nicht gegen Platz eingetauscht (dieselbe Zahl, die
   werkzeuge/pruef-leiste.js als L2 haelt).

   DIE REIHE IST EINE BEDIENLEISTE: flex-wrap NOWRAP ist die ZUSICHERUNG,
   nicht nur der Wunsch. Mit `wrap` bliebe eine Hoehenmessung gruen, solange
   der Inhalt zufaellig in eine Zeile passt — die Lehre aus L5 in
   pruef-leiste.js. Der Riegel werkzeuge/pruef-stufenleiste.js misst beides:
   den berechneten Wert UND die Folge (gleiche Oberkante, letzter Knopf
   innerhalb der Reihe) bei 300 px und 428 px in echtem Chrome.

   DER ADMIN-SCHALTER STEHT IN DER UEBERSCHRIFTSZEILE, nicht in der Reihe.
   Ein vierter Knopf sprengt die 300-px-Spalte (gemessen). Die
   Ueberschriftszeile ist keine Bedienleiste — sie darf umbrechen, ohne dass
   eine Handlung wandert.
   ===================================================================== */

.uebungen-bereich__kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 0.6rem;
  min-width: 0;
}

.uebung-stufen {
  display: flex;
  flex-wrap: nowrap;          /* die Zusicherung: EINE Reihe, immer */
  align-items: stretch;
  gap: 0.3rem;
  margin: 0.15rem 0 0;
  min-width: 0;
}

.uebung-stufen__knopf {
  position: relative;         /* Traeger fuer den Fortschrittsbalken */
  overflow: hidden;           /* der Balken bleibt in der runden Kante */
  flex: 0 0 auto;             /* nie schrumpfen: sonst schneidet die Pille ihr Wort ab */
  border: 1px solid var(--farbe-rand);
  background: #f4f6f9;
  color: var(--farbe-text);
  border-radius: 999px;
  /* GEMESSEN, nicht gewaehlt (werkzeuge/pruef-stufenleiste.js, Fall «alle-fertig»):
     ist eine Stufe fertig, heisst die Pille «Stufe 1 ✓» und waechst von 86 auf
     103 px. Drei davon liefen auf der 300-px-Spalte um 22 px ueber — sichtbar
     erst in dem Zustand, den ein Kind am Ende des Themas WIRKLICH hat.
     0.9rem statt 0.95rem und 0.6rem statt 0.75rem Polster holen das zurueck.
     Die 44 px Fingerziel bleiben unangetastet: kompakter heisst nie weniger
     koennen — es heisst hier schmaler, nicht kleiner zu treffen. */
  /* vv0.6.79 (Cole, 30.08.2026) — GRUNDSATZ «TIPPFLAECHE 48» (css/styles.css :root).
     Beat: «Die Uebungen kannst du noch etwas groesser machen zum Anklicken der Niveaus und
     des Textes.» Die Pille waechst in der HOEHE (44 -> 48 px) und in der SCHRIFT
     (0.9 -> 1rem, also auf die Grundschrift), aber NICHT in der Breite — und das ist
     gemessen, nicht geschaetzt:
         werkzeuge/pruef-stufenleiste.js, Fall «alle-fertig», 300 px Spalte (iPad hoch):
         drei Pillen à 90 px + 2 Zwischenraeume = 280 px. Es bleiben 18 px Luft.
     Waechst die Pille in die Breite, laeuft die Reihe ueber, und L3 dort wird rot. Die
     Rechnung, die das verhindert: mehr Schrift (+11 % Textbreite) wird durch weniger
     waagrechtes Polster (0.6 -> 0.45rem, also -3.4 px je Seite) fast vollstaendig
     zurueckgeholt. Gemessen nach der Aenderung: 90 -> 92 px, Luft 18 -> 12 px.
     WER HIER WEITER AUFDREHT, muss zuerst wissen, wo die 12 px herkommen sollen. */
  padding: 0.45rem 0.45rem 0.8rem;   /* unten Platz fuer die Fortschritts-Schiene */
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  min-height: var(--tippflaeche);
  min-width: var(--tippflaeche);
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

.uebung-stufen__knopf:hover { background: #e9eef4; }

.uebung-stufen__knopf--aktiv {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: #fff;
}

.uebung-stufen__knopf:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 2px;
}

/* Die Beschriftung liegt UEBER dem Balken. Ohne position bliebe sie im
   Fluss und der Balken deckte sie an der Unterkante ab. */
.uebung-stufen__etikett { position: relative; z-index: 1; }

/* Der Haken der fertigen Stufe. Eigenes Zeichen statt Teil der Beschriftung —
   siehe die Begruendung im Motor: als angehaengter Text kostete er 17 px je
   Pille und sprengte die 300-px-Spalte, sobald alle drei Stufen fertig waren.
   `:empty` statt `hidden`, damit der Abstand mitverschwindet und nicht als
   Leerraum stehen bleibt. */
.uebung-stufen__haken {
  position: relative;
  z-index: 1;
  font-size: 0.85em;
  margin-left: 0.22em;
}
.uebung-stufen__haken:empty { display: none; }

/* Der Fortschritt steckt IN der Pille — keine zweite Zeile, kein zweites
   Element unter der Reihe. Die Breite der Fuellung setzt der Motor aus
   stand.geloest, derselben Buchhaltung, die auch die Kopfzeile liest.

   ZWEI ELEMENTE, UND WARUM: der erste Versuch war EIN Balken ueber die volle
   Pillenbreite. Die 999-px-Kante schnitt ihn an beiden Enden an; im Bild war er
   ein Fleck, kein Balken. Die Schiene sitzt darum eingerueckt im geraden Teil
   der Pille. Sichtbar ist damit auch der LEERE Rest — ohne ihn sagt ein kurzer
   Strich nicht, wovon er ein Teil ist. */
.uebung-stufen__balken {
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 5px;
  height: 4px;
  border-radius: 999px;
  background: rgba(45, 90, 145, 0.18);
  overflow: hidden;
}

.uebung-stufen__fuellung {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--farbe-akzent);
}

.uebung-stufen__knopf--aktiv .uebung-stufen__balken { background: rgba(255, 255, 255, 0.32); }
.uebung-stufen__knopf--aktiv .uebung-stufen__fuellung { background: #fff; }

/* Der kleine Schalter fuer Admin. Klein, aber 44 px hoch — die Untergrenze
   gilt auch fuer einen Knopf, den nur eine Person benutzt. */
.uebung-stufen__alle {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  /* vv0.6.79: GRUNDSATZ «TIPPFLAECHE 48». Der Satz darueber stimmt weiterhin --
     die Untergrenze gilt auch fuer einen Knopf, den nur eine Person benutzt; sie ist
     jetzt nur die des Hauses und keine eigene Zahl mehr. */
  min-height: var(--tippflaeche);
  border-radius: 999px;
  color: var(--farbe-text-leise);
  white-space: nowrap;
  touch-action: manipulation;
}

.uebung-stufen__alle[aria-pressed="true"] {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: #fff;
}

/* Beats eigener Satz aus der Einleitung der gewaehlten Stufe.
   NICHTS SPRINGT BEIM WECHSEL, und das kostet keinen leeren Platz: alle
   Saetze dieses Themas liegen UEBEREINANDER in EINER Rasterzelle, sichtbar
   ist immer nur einer. Die Zelle ist damit so hoch wie der laengste Satz
   GENAU DIESES Themas — nicht so hoch wie eine geratene Zahl.
   GEMESSEN am 29.8. in echtem Chrome (werkzeuge/pruef-stufenleiste.js, L5):
   die zwoelf Saetze brauchen auf 300 px zwei bis drei Zeilen (50-75 px), auf
   428 px eine bis zwei (25-50 px). Eine feste Reserve von drei Zeilen haette
   im Querformat bis zu 50 px verschenkt — auf demselben Bildschirm, fuer den
   v0.6.69 gerade 220 px zurueckgeholt hat.
   `visibility: hidden` statt `display: none`: nur so behaelt der versteckte
   Satz seine Hoehe — und faellt zugleich aus dem Vorlesebaum. */
.uebung-stufen__satz {
  display: grid;
  margin: 0.35rem 0 0.1rem;
  font-size: 0.92rem;
  color: var(--farbe-text-leise);
}

.uebung-stufen__satzzeile {
  grid-area: 1 / 1;
  margin: 0;
  visibility: hidden;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

.uebung-stufen__satzzeile--aktiv { visibility: visible; }

/* ---------------------------------------------------------------------
   DIE ZWEI ZUGEKLAPPTEN BLOECKE — Form uebernommen von .arbeitsraum-links
   (css/styles.css), damit ein Klapper im Arbeitsraum ueberall gleich
   aussieht. Die Karten darin baut js/uebungen.js erst beim Aufklappen.
   --------------------------------------------------------------------- */

.uebung-gruppe {
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  margin: 0.35rem 0 0;
  background: var(--farbe-karte);
  min-width: 0;
}

.uebung-gruppe__kopf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.55rem;
  min-height: var(--tippflaeche);   /* vv0.6.79: GRUNDSATZ «TIPPFLAECHE 48» */
  box-sizing: border-box;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  touch-action: manipulation;
}

.uebung-gruppe__kopf::-webkit-details-marker { display: none; }
.uebung-gruppe__kopf::before { content: "\25B8"; color: var(--farbe-text-leise); transition: transform 0.12s; }
.uebung-gruppe[open] > .uebung-gruppe__kopf::before { transform: rotate(90deg); }

.uebung-gruppe__kopf:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: -2px;
  border-radius: 8px;
}

.uebung-gruppe__titel {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* «hier ist etwas zu bearbeiten» — bleibt sichtbar, auch wenn der Block
   zugeklappt ist (Beats Regel zum eingeklappt-Default). */
.uebung-gruppe__marke {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  color: var(--auge-gruen-text);
  background: var(--auge-gruen-flaeche);
  border: 1px solid var(--auge-gruen-rand);
}

.uebung-gruppe__body {
  padding: 0.15rem 0.55rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.uebung-gruppe__zeile { margin: 0; font-size: 0.9rem; color: var(--farbe-text-leise); }

/* ---------------------------------------------------------------------
   DIE NUMMER VOR DER FRAGE, UND DIE LEISE GESAMTZAHL
   --------------------------------------------------------------------- */

/* «12.» — fett und leise, in DERSELBEN Zeile wie die Frage. Fett, damit die
   Zahl beim Ueberfliegen traegt; leise, damit sie die Frage nicht
   ueberstimmt. Der Abstand nach rechts steht hier und nicht als Leerzeichen
   im Text: ein Leerzeichen faellt am Zeilenumbruch weg. */
.uebung-aufgabe__nr {
  color: var(--farbe-text-leise);
  font-weight: 700;
  margin-right: 0.15rem;
}

/* «von 70» — kleiner und leiser. Kein neuer Zaehler, nur weniger Gewicht:
   die 70 soll einem schwachen Kind nicht als Berg entgegenstehen. */
.uebung__fortschritt-total { font-size: 0.78em; opacity: 0.75; }

/* =====================================================================
   v0.6.89 (Cole, 31.08.2026) — EIN BLOCK JE BEREICH.

   Diese Regeln greifen NUR, wenn ein Thema mindestens ZWEI Bereiche
   traegt. Ein Thema ohne `bereich`-Feld baut keinen einzigen dieser
   Knoten — es gibt dort nichts, worauf sie passen koennten. Das ist die
   bauliche Seite der Abwaertskompatibilitaet: kein `.uebung-block` im
   Baum, keine Wirkung, kein Unterschied.

   FORM UEBERNOMMEN VON .uebung-gruppe (eine Bildschirmseite weiter oben),
   damit ein Klapper im Arbeitsraum ueberall gleich aussieht. Der
   Unterschied ist der Kopf: .uebung-gruppe ist ein <details>/<summary>,
   dieser hier ist ein eigener Knopf plus zwei Pfeile.

   WARUM KEIN <details>: die zwei Pfeile muessten dann IN <summary>
   stehen, und ein Tipp darauf klappt im Browser zusaetzlich den Block
   auf oder zu. Das liesse sich mit preventDefault abfangen — auf einem
   iPad ist das genau die Sorte Griff, die einmal von zehn nicht haelt.
   Ein eigener Knopf mit aria-expanded kann das nicht falsch machen.
   ===================================================================== */

.uebung-bloecke {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.35rem 0 0;
  min-width: 0;
}

.uebung-block {
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  background: var(--farbe-karte);
  min-width: 0;
}

/* DIE BEDIENREIHE — EINE Zeile je Block, und zwar zugesichert und nicht
   gehofft: `flex-wrap: nowrap`. Beats Regel «Bedienleiste: festes
   Hoehenbudget» gilt hier woertlich — bei fuenf Bloecken kostet jede
   zusaetzliche Zeile fuenfmal.

   DER TITEL DARF UMBRECHEN, DIE KNOEPFE NICHT. «4.2 Ausklammern und
   Ausmultiplizieren» braucht auf der 300-px-Spalte zwei Zeilen. Ihn
   abzuschneiden hiesse, dem Kind das Kapitel wegzunehmen, in dem es
   gerade arbeitet («kompakter heisst nie weniger koennen»). Der Knopf
   waechst also in der Hoehe, die zwei Pfeile bleiben daneben und in der
   Mitte — es bleibt EIN Band, keine zweite Reihe. */
.uebung-block__kopf {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.3rem;
  min-width: 0;
}

.uebung-block__klapp {
  flex: 1 1 auto;
  min-width: 0;                    /* sonst schiebt der lange Titel die Pfeile hinaus */
  min-height: var(--tippflaeche);  /* GRUNDSATZ «TIPPFLAECHE 48» */
  display: flex;
  align-items: center;
  gap: 0.35rem;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--farbe-text);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  /* DAS POLSTER VON .btn WIRD ZURUECKGENOMMEN, und das ist gemessen, nicht
     geschmacklich: .btn (css/styles.css) bringt `padding: 0.5rem 0.9rem` mit,
     also 32 px waagrecht. Auf der 300-px-Spalte blieben dem Titel damit 87 px,
     und «6.3 Addition und Multiplikation von Termen» brauchte SECHS Zeilen —
     ein 181 px hoher Kopf, fuenfmal untereinander. Das Fingerziel bleibt
     unangetastet: die Hoehe kommt aus min-height, nicht aus dem Polster.
     («Kompakter heisst nie weniger koennen»: schmaler, nicht kleiner zu
     treffen — dieselbe Rechnung wie bei der Pille weiter oben.) */
  padding: 0.25rem 0.2rem;
}

.uebung-block__klapp:hover { background: #f2f5f9; border-radius: 6px; }
.uebung-block__klapp:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: -2px;
  border-radius: 6px;
}

.uebung-block__marke {
  flex: 0 0 auto;
  color: var(--farbe-text-leise);
}

.uebung-block__titel {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Die Aufgabenzahl des Blocks. Leise — sie beantwortet «wie viel liegt
   da?», sie ist nicht die Ueberschrift.

   SIE STEHT IM TITEL UND NICHT DANEBEN. Als eigenes Flex-Kind reservierte
   «(240)» rund 45 px feste Breite und nahm sie dem Titel weg, auf jeder
   Bildschirmbreite gleich viel — auf 300 px war das ein Drittel der
   verfuegbaren Spalte. Im Titel fliesst sie mit und kostet nur dort Platz,
   wo gerade welcher ist. */
.uebung-block__zahl {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--farbe-text-leise);
  white-space: nowrap;
}

/* DIE PFEILE. 48 x 48 px, quadratisch und unverhandelbar: `flex: 0 0 auto`
   plus min-width UND min-height. Ein Pfeil, den ein Finger auf einem
   geteilten iPad verfehlt, verschiebt den falschen Block — und das ist
   Inhalt, nicht Ansicht. */
.uebung-block__pfeil {
  flex: 0 0 auto;
  min-width: var(--tippflaeche);
  min-height: var(--tippflaeche);
  padding: 0;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  background: #f4f6f9;
  color: var(--farbe-text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.uebung-block__pfeil:hover:not(:disabled) { background: #e9eef4; }
.uebung-block__pfeil:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 2px;
}

/* AUSGEGRAUT, NICHT ENTFERNT. Der oberste Block hat kein «nach oben» —
   naehme man den Knopf weg, ruecken alle anderen um 48 px, und beim
   naechsten Verschieben springt die ganze Reihe. Beats Regel
   «Positions-Stabilitaet bei Aenderung». */
.uebung-block__pfeil:disabled {
  opacity: 0.35;
  cursor: default;
}

.uebung-block__body {
  padding: 0.15rem 0.55rem 0.6rem;
  min-width: 0;
}

/* Die Meldung zur Reihenfolge. Sie steht immer im Baum und ist leer, bis
   wirklich verschoben wurde — `:empty` nimmt ihr dann auch den Abstand,
   damit sie im Ruhezustand keinen Millimeter kostet. */
.uebung-bloecke__meldung {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--farbe-text-leise);
}
.uebung-bloecke__meldung:empty { display: none; }
.uebung-bloecke__meldung--offen { color: var(--farbe-text); font-weight: 600; }

/* vVERSION (Cole, 3.9.) — DIE QUELLENANGABE AN DER AUFGABE.
   Beat: «Ja, aber nur fuer die Lehrkraft und Admin, also ganz unten.»
   Sie ist eine Notiz fuers Durchsehen, kein Teil der Aufgabe: klein, leise, mit einer
   duennen Trennlinie darueber, damit sie sich vom Aufgabentext absetzt, ohne ihn zu
   bedraengen. Sie ist ausdruecklich KEIN Bedienelement -- darum gilt fuer sie der
   Grundsatz «Tippflaeche 48» nicht; sie wird gelesen, nicht getroffen.
   ES GIBT KEINEN :empty-Fall: der Motor baut die Zeile gar nicht, wenn das Feld fehlt
   (prod-linie/uebungen.js, Ende von aufgabeBauen). Eine Regel fuer den leeren Zustand
   waere die Zusicherung, dass es ihn geben darf. */
.uebung-aufgabe__herkunft {
  margin: 0.6rem 0 0;
  padding-top: 0.35rem;
  border-top: 1px dotted var(--farbe-rand);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--farbe-text-leise);
  overflow-wrap: anywhere;
}
.uebung-aufgabe__herkunft-marke { font-weight: 600; }

/* 0.6.181 (Cole, 12.9.2026) — DIE ANSICHT DER SERIE: «Alle Aufgaben zeigen» /
   «Eine nach der anderen». Beat: «alle Übungen sollten auch die Möglichkeit haben,
   aufgeklappt zu werden, so dass sie nach unten lösbar sind.»
   DER UMSCHALTER steht in der Kopfzeile der Karte, NICHT in der Pillenreihe der Stufen
   (die bleibt eine Reihe — Beats Hoehenbudget). Die Kopfzeile ist seit je flex-wrap:
   auf dem iPad hochkant darf der Knopf in eine zweite Zeile rutschen; die Karte wird
   dadurch hoechstens eine Knopfhoehe hoeher, nichts wird abgeschnitten.
   Der Titel nimmt den freien Platz, damit Fortschritt und Umschalter rechts BEIEINANDER
   stehen (mit space-between allein saesse der Fortschritt in der Mitte).
   AUFGEKLAPPT traegt die Liste dieselbe Klasse .uebung__seite wie die Seiten-Fassung —
   Trennlinie je Aufgabe, eine Spalte, kein Querrollen: die Karte bleibt in ihrer Breite,
   Bilder halten sich an .uebung-aufgabe__bild-img (max-width 100 %, styles.css). */
.uebung__titel { flex: 1 1 auto; }
/* margin-left:auto wirkt NUR, wenn der Knopf in eine eigene Zeile umbricht (dann steht er
   rechts, unter dem Fortschritt, statt links unter dem Titel). In der einzeiligen Lage
   nimmt der wachsende Titel den Platz, der Rand bleibt null -- gemessen in Chrome, 768 px. */
.uebung__ansicht { white-space: nowrap; margin-left: auto; }
/* Auf dem Finger-Geraet gilt die Tippflaeche 44 px (dieselbe Zahl wie bei den
   Stufen-Pillen, pruef-stufenleiste.js L6); mit Maus bleibt der Knopf so klein wie
   jeder .btn--klein, damit die Kopfzeile nicht auf jedem Laptop waechst. */
@media (pointer: coarse) { .uebung__ansicht { min-height: 2.75rem; } }
.uebung__seite--aufgeklappt { overflow-x: hidden; }
.uebung__seite--aufgeklappt .uebung-aufgabe { min-width: 0; }
.uebung__fuss { margin-top: 0.6rem; }
.uebung__fuss:empty { display: none; margin: 0; }
/* 0.6.182: Beats Vier-mal-Regel aufgeklappt. Solange eine Aufgabe ein offenes
   Vier-mal-Feld hat, ist das «Prüfen» aller anderen zu (data-schranke="fremd", gesetzt von
   schrankenStellen in prod-linie/uebungen.js) -- und das muss man SEHEN, genau wie den
   gesperrten «Weiter»-Knopf der Einzelansicht (dieselben Werte wie dort). Nur diese
   Sperre bekommt den Stil; «nur lesen» und «in Arbeit» bleiben, wie sie sind. */
.uebung-aufgabe__pruefen[data-schranke="fremd"] { opacity: 0.45; cursor: not-allowed; }
.uebung__schranke-hinweis { margin-top: 0.4rem; }

/* 0.6.183 (Cole -- Beat, 12.9.2026): «💡 Hilfe» -- HILFE AUF ABRUF.
   Der Knopf steht in der Leiste der Aufgabe, in DERSELBEN Reihe wie «Prüfen» und
   «Weiter» (die Leiste ist flex + wrap: bei 768 px bricht er hoechstens so um wie die
   beiden heute). Kein eigener Kasten-Stil: die geholte Hilfe benutzt .uebung-hilfe,
   genau wie die Merkregel nach einem Fehlversuch. Der Platz unter der Frage ist leer,
   bis getippt wird -- :empty nimmt ihm dann auch den Rand, damit die Einstellung
   «Hilfe vorhanden» keine Position verschiebt. */
.uebung-aufgabe__hilfe-platz:empty { display: none; margin: 0; }
.uebung-aufgabe__hilfe-platz .uebung-hilfe { margin: 0.35rem 0 0.5rem; }
.uebung-aufgabe__hilfe[aria-expanded="true"],
.uebung-aufgabe__hilfe--offen { background: #f3f7fb; border-color: var(--farbe-akzent); }
/* Auf dem Finger-Geraet 44 px Tippflaeche (dieselbe Zahl wie beim Umschalter
   .uebung__ansicht und den Stufen-Pillen); mit Maus bleibt er so klein wie jeder
   .btn--klein, damit die Leiste EINE Reihe bleibt. */
@media (pointer: coarse) { .uebung-aufgabe__hilfe { min-height: 2.75rem; min-width: 2.75rem; } }

/* 0.6.198 (Cole, 14.9.2026 -- LZK Etappe 2b/3, Kind-Seite, Spez §8): Timer in der Kopfzeile,
   Passwort-Karte, Nur-Lesen-Karte, Ergebnis-Sicht, «🔊 Vorlesen». Nichts davon verschiebt die
   Bedienleiste: Vorlesen ist ein .btn--klein in DERSELBEN Reihe wie «Prüfen» / «💡 Hilfe»; die
   Sicht steht unter der Auswertung und ist leer (display:none), bis der Server etwas schickt. */
.uebung__timer { margin: 0; font-size: 0.85rem; font-weight: 700; white-space: nowrap; color: #1b5e20; }
.uebung__timer--knapp { color: #8c1d18; }
.uebung__timer[hidden] { display: none; }
.uebung--passwort .uebung__passwort { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.7rem; }
.uebung__passwort-label { font-weight: 600; }
.uebung__passwort-feld { font: inherit; min-height: 2.75rem; border: 1px solid var(--farbe-rand, #ccd3da); border-radius: 8px; padding: 0 0.6rem; width: 11rem; letter-spacing: 0.08em; }
.uebung__passwort-start { min-height: 2.75rem; }
.uebung__passwort-melde { margin-top: 0.5rem; }
/* 0.6.228 Namens-Karte (Beat 15.9., Namenskontrolle): zwei Felder untereinander, gleiche Bausteine wie das Passwort. */
.uebung--name .uebung__namenskontrolle { display: grid; grid-template-columns: max-content minmax(11rem, 22rem); align-items: center; gap: 0.5rem 0.8rem; margin-top: 0.7rem; }
.uebung--name .uebung__namenskontrolle .uebung__passwort-feld { width: 100%; letter-spacing: normal; }
.uebung--name .uebung__name-weiter { grid-column: 2; justify-self: start; min-height: 2.75rem; }
.uebung__namens-hinweis { margin-top: 0.4rem; }
@media (max-width: 600px) {
  .uebung--name .uebung__namenskontrolle { grid-template-columns: 1fr; }
  .uebung--name .uebung__name-weiter { grid-column: 1; }
}
.uebung__passwort-melde[hidden] { display: none; }
/* 0.6.269 (Cole -- Beat 17.9.2026, 15.10): DIE STARTMASKE statt der Namens-Karte. «Lernzielkontrolle» als
   ruhige Ueberschrift ueber dem Serien-Titel, Name und Klasse vorausgefuellt (dl, kein Feld), ein Knopf «Start»
   (44 px). Dazu der Abgabe-Platz unter dem Abschluss («Test abgeben», 44 px) und der Anfrage-Platz am Ende der
   Nur-Lesen-Karte (freiwilliger Grund + Knopf). Alles eigene Plaetze -- die Bedienleiste bleibt EINE Reihe. */
.uebung--start-maske .uebung__start-maske-art { margin: 0 0 0.15rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-text-schwach, #6b7680); }
.uebung--start-maske .uebung__start-maske-felder { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.8rem; margin: 0.8rem 0 0; padding: 0.7rem 0.9rem; border: 1px solid var(--farbe-rand, #ccd3da); border-radius: 10px; background: var(--farbe-flaeche-leise, #f5f7f9); max-width: 28rem; }
.uebung--start-maske .uebung__start-maske-label { margin: 0; font-weight: 600; color: var(--farbe-text-schwach, #6b7680); }
.uebung--start-maske .uebung__start-maske-wert { margin: 0; font-size: 1.15rem; font-weight: 700; }
.uebung--start-maske .uebung__start-satz { margin: 0.7rem 0 0.5rem; font-weight: 600; }
.uebung--start-maske .uebung__start-maske-dauer { font-weight: 600; margin: 0.4rem 0 0.6rem; max-width: 28rem; }   /* Nachlese 17.9.: gelbe Zeile mit ⏱ */
.uebung__start-maske-knopf { min-height: 2.75rem; min-width: 8rem; }
.uebung__abgabe-platz { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px dashed var(--farbe-rand, #ccd3da); }
.uebung__abgabe-platz:empty { display: none; }
.uebung__abgeben { min-height: 2.75rem; min-width: 9rem; }
/* Nachlese 17.9. (Iris, Blocker): VOR der Abgabe ist «Test abgeben» der Hauptknopf oben im Abschluss -- gefuellt,
   gross, bei 768 px volle Breite; der Satz darueber sagt, was zu tun ist. Der Anfrage-Platz bekommt einen Einleitungssatz. */
.uebung__abschluss-text--vor-abgabe { font-weight: 700; }
.uebung__abschluss-text--vor-abgabe + .uebung__abgabe-platz { margin-top: 0.4rem; padding-top: 0; border-top: 0; }
.uebung__abschluss-text--vor-abgabe + .uebung__abgabe-platz .uebung__abgeben { min-height: 3rem; min-width: 12rem; font-size: 1.05rem; font-weight: 700; background: var(--farbe-akzent, #2f6fb0); border-color: var(--farbe-akzent, #2f6fb0); color: #fff; }
.uebung__abschluss-text--vor-abgabe + .uebung__abgabe-platz .uebung__abgeben:hover { background: #2a6299; }
.uebung__abschluss-text--vor-abgabe + .uebung__abgabe-platz .uebung__abgeben:disabled { opacity: 0.6; }
@media (max-width: 800px) { .uebung__abschluss-text--vor-abgabe + .uebung__abgabe-platz .uebung__abgeben { width: 100%; } }
.uebung__wieder-geoeffnet-aendern { margin: 0.6rem 0 0; }
.uebung__anfrage-einleitung { flex-basis: 100%; margin: 0 0 0.2rem; font-weight: 600; }
.uebung__anfrage-platz { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px dashed var(--farbe-rand, #ccd3da); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.uebung__anfrage-platz:empty { display: none; }
.uebung__anfrage-platz .uebung__anfrage-grund { width: min(100%, 22rem); letter-spacing: normal; }
.uebung__anfrage-knopf { min-height: 2.75rem; }
.uebung__anfrage-platz .uebung__start-melde, .uebung__anfrage-platz .uebung__anfrage-stand { flex-basis: 100%; margin: 0; }
.uebung__wieder-geoeffnet { flex-basis: 100%; margin: 0.3rem 0 0; }
.uebung--nur-lesen .uebung__nur-lesen { margin-top: 0.5rem; }
.uebung__seite--nur-lesen .uebung-aufgabe { margin-top: 0.7rem; }
.uebung-aufgabe__sicht:empty { display: none; margin: 0; }
.uebung-aufgabe__sicht { margin-top: 0.4rem; }
.uebung-aufgabe__sicht .uebung-melde { margin-top: 0.3rem; }
.uebung-aufgabe__loesung { font-weight: 600; }
@media (pointer: coarse) { .uebung-aufgabe__vorlesen { min-height: 2.75rem; } }
/* Nachlese 14.9. (Cole -- Aegis/Argus/Vera/Iris): Start-Karte (Session-Timer laeuft erst nach «Starten»),
   der Satz «erste Antwort zaehlt» im Kopf, der Vorschau-Hinweis an Passwort-/Start-Karte, der Vermerk
   «Zeitfenster oder Ende» (Lehrperson/Administrator) und die Vorlesen-Leiste in der Besichtigung.
   Nichts davon beruehrt die Bedienleiste (EINE Reihe): der Kopf waechst um eine Zeile, die Leiste nicht. */
.uebung--start .uebung__start-satz { margin: 0.7rem 0 0.5rem; font-weight: 600; }
.uebung__start-knopf { min-height: 2.75rem; }
.uebung__start-melde { margin-top: 0.5rem; }
.uebung__start-melde[hidden] { display: none; }
.uebung__erste-antwort { flex-basis: 100%; margin: 0.3rem 0 0; }
.uebung__vorschau-hinweis { margin-top: 0.5rem; }
.uebung__zeitfenster-zu { font-size: 0.9rem; }
.uebung-aufgabe__leiste--nur-lesen { margin-top: 0.4rem; }