/* ---------- Farben und Maße ---------- */
:root {
  --papier: #fbf8f1;
  --raster: rgba(70, 110, 150, 0.09);
  --raster-groesse: 19px;              /* ca. 5 mm */
  --karte: #ffffff;
  --text: #2b2520;
  --text-leise: #6a5f55;
  --akzent: #2f5d8a;
  --akzent-dunkel: #234769;
  --rand: #d8d1c6;              /* Trennlinien */
  --rand-bedienung: #9a8f80;    /* Ränder von Knöpfen und Punkten, mind. 3:1 auf Weiß */
  --holz-text-dunkel: #24170a;  /* kleine Schrift auf Holz */

  --holz-1: #c2a37a;
  --holz-2: #b08e63;
  --holz-3: #9c7b52;
  --holz-fuge: #8f6f48;
  --holz-text: #3b2a17;

  --teil-neutral: #d6c09c;      /* freie Fläche = leere Holzablage, von Anfang an und unverändert */
  --trennlinie: #4a3c2e;
  --markierung: #4f555c;
  --markierung-hell: #8b9197;

  --ok: #2e7d4f;
  --ok-hell: #e9f5ee;
  --nein: #b55312;
  --nein-hell: #fdf0e6;

  --figur-breite: clamp(110px, 12vw, 190px);
  --balken-hoehe: 64px;
  --radius: 14px;
}

@supports not (width: clamp(1px, 1vw, 2px)) {
  :root { --figur-breite: 150px; }   /* ältere iPads */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  background-color: var(--papier);
  background-image:
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: var(--raster-groesse) var(--raster-groesse);
  min-height: 100vh;
}
button { font: inherit; color: inherit; touch-action: manipulation; }

/* ---------- Bühne: Figur | Karte | Figur ---------- */
.buehne {
  display: grid;
  grid-template-columns: var(--figur-breite) minmax(0, 1fr) var(--figur-breite);
  grid-column-gap: 20px;
  max-width: calc(980px + 2 * var(--figur-breite) + 40px);
  margin: 0 auto;
  padding: 20px 16px;
  align-items: stretch;
}
/* Figuren stehen oben neben der Karte und bleiben beim Scrollen sichtbar */
.figur {
  align-self: start;
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  pointer-events: none;
}
.figur img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-select: none;
  user-select: none;
}
.figur img.gespiegelt { transform: scaleX(-1); }
/* In den Übungen keine Figuren am Rand: die Karte bekommt die ganze Breite */
.in-uebung .buehne { grid-template-columns: minmax(0, 1fr); max-width: 1020px; }
.in-uebung .figur { display: none; }
@media (max-width: 899px) {
  .buehne { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .figur { display: none; }
}

.karte {
  background: var(--karte);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(60, 40, 20, 0.08), 0 6px 22px rgba(60, 40, 20, 0.10);
  padding: 24px 28px 28px;
  min-width: 0;
}
@media (max-width: 599px) {
  .karte { padding: 16px 14px 20px; }
  body { font-size: 17px; }
}

/* ---------- Holzoptik (Einer-Ablage) ---------- */
.holz {
  background-color: var(--holz-1);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.22' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.23 0 0 0 0 0.11 0.85 0 0 0 -0.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.06));
  background-size: 600px 120px, 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12),
    0 2px 5px rgba(60, 40, 20, 0.22);
}

/* ---------- Startseite ---------- */
.kopf h1 { margin: 0; font-size: 1.7em; line-height: 1.15; }
.unterzeile { margin: 4px 0 14px; color: var(--text-leise); }
.fortschritt { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.fortschritt-text { margin-right: 14px; white-space: nowrap; }
/* kleine Einer-Ablage (Fortschritt auf der Startseite) */
.fortschritt .balken { flex: 1 1 200px; margin: 0; }
.balken.klein { padding: 5px; border-radius: 7px; }
.balken.klein .schiene { height: 24px; }
.balken.klein .teil.farbig { box-shadow: inset 0 1px 2px rgba(60, 40, 20, 0.25), inset 0 -3px 0 var(--kante); }
.balken.klein .etikett { display: none; }

.kachelfeld {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 16px;
}
.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  border-radius: 12px;
  padding: 10px 10px 12px;
  cursor: pointer;
  text-align: center;
  color: var(--holz-text);
  transition: transform 0.15s, box-shadow 0.15s;
}
@media (hover: hover) {
  /* nur mit Maus: auf dem iPad bliebe der Hüpfer nach dem Antippen hängen */
  .kachel:hover:not(:disabled) { transform: translateY(-2px); }
}
.kachel:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
.kachel-bild {
  display: block;
  width: 100%;
  background: #fbf9f4;
  border-radius: 6px;
  box-shadow: inset 0 2px 4px rgba(60, 40, 20, 0.35), 0 1px 0 rgba(255, 255, 255, 0.4);
  padding: 8px 6px;
  margin-bottom: 8px;
}
.kachel-bild svg { display: block; width: 100%; height: auto; max-height: 86px; }
.kachel-titel {
  font-weight: 700; font-size: 0.95em; line-height: 1.2;
  max-width: 100%;
  -webkit-hyphens: auto; hyphens: auto;
  overflow-wrap: break-word; word-wrap: break-word;
}
.kachel-info { font-size: 0.8em; font-weight: 600; min-height: 1.2em; margin-top: 2px; color: var(--holz-text-dunkel); }
.kachel-nr {
  position: absolute; top: 6px; left: 8px;
  font-size: 0.72em; font-weight: 700;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px; padding: 0 7px;
}
/* „kommt bald“: entsättigt statt durchsichtig, damit die Schrift lesbar bleibt */
.kachel.bald { cursor: default; filter: grayscale(0.9) brightness(1.14); box-shadow: none; }
.kachel.bald .kachel-bild { opacity: 0.45; }
.kachel.bald .kachel-titel { font-weight: 600; color: #3d342b; }
.kachel.bald .kachel-info { font-weight: 400; color: #3d342b; }
.kachel.erledigt .kachel-info { font-weight: 700; color: #0f3a21; }
.haken {
  position: absolute; top: -8px; right: -8px;
  width: 34px; height: 34px;
  background: var(--ok);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px #fff;
}
.haken svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 599px) {
  .kachelfeld { grid-gap: 10px; }
  .kachel { padding: 8px 6px 10px; }
  .kachel-titel { font-size: 0.8em; }
  .kachel-info { font-size: 0.7em; }
  .kopf h1 { font-size: 1.4em; }
}

/* Symbole */
.s-teil { fill: #f3efe7; }
.s-rand { fill: none; stroke: #4a3c2e; stroke-width: 1.6; }
.s-linie { stroke: #4a3c2e; stroke-width: 1.4; fill: none; }
.s-text { font: bold 16px sans-serif; fill: #4a3c2e; text-anchor: middle; }
.s-pfeil { stroke: var(--akzent); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.s-lupe { fill: rgba(255, 255, 255, 0.35); stroke: var(--akzent); stroke-width: 3; }
.s-griff { stroke: var(--akzent); stroke-width: 4.5; stroke-linecap: round; }
.s-finger { fill: var(--akzent); opacity: 0.8; }
.s-knopf { fill: #fff; stroke: #4a3c2e; stroke-width: 1.3; }
.s-klein { font: bold 12px sans-serif; fill: #4a3c2e; text-anchor: middle; }
.s-schieber { fill: var(--akzent); }
.s-feld { fill: #fff; stroke: #4a3c2e; stroke-width: 1.3; }
.s-strich { stroke: #4a3c2e; stroke-width: 1.8; }
.s-wort { font: 11px sans-serif; fill: #4a3c2e; text-anchor: middle; }
.s-zahl { font: bold 13px sans-serif; fill: #4a3c2e; text-anchor: middle; }

/* ---------- Übung: Kopf ---------- */
.uebung-kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rand);
  padding-bottom: 12px;
  margin-bottom: 18px;
}
.uebung-kopf h1 { flex: 1 1 auto; margin: 0 12px; font-size: 1.35em; line-height: 1.2; }
.punkte { display: flex; list-style: none; margin: 0; padding: 0; }
.punkte li {
  width: 18px; height: 18px; margin-left: 6px;
  border-radius: 50%;
  border: 2px solid var(--rand-bedienung);
  background: #fff;
}
.punkte li.jetzt { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(47, 93, 138, 0.2); }
/* Grün und Orange sind für Rot-Grün-Schwache kaum zu unterscheiden: immer mit Zeichen (Haken, Kreuz, Pfeil) */
.punkte li.richtig { background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--ok); }
.punkte li.falsch { background: var(--nein) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 13px no-repeat; border-color: var(--nein); }
@media (max-width: 599px) {
  .uebung-kopf h1 { order: 3; flex-basis: 100%; margin: 10px 0 0; }
  .punkte { margin-left: auto; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 2px solid var(--rand-bedienung);
  background: #fff;
  cursor: pointer;
  line-height: 1.2;
}
@media (hover: hover) { .knopf:hover:not(:disabled) { border-color: var(--akzent); } }
.knopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.knopf:disabled { cursor: default; }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
@media (hover: hover) { .knopf.haupt:hover:not(:disabled) { background: var(--akzent-dunkel); } }
.knopf.haupt:disabled { opacity: 0.45; }
.knopf.zurueck { min-height: 44px; padding: 6px 14px; font-size: 0.9em; }

/* Rückfrage, wenn eine laufende Runde verlassen wird: Dialog in der Mitte, Hintergrund abgedunkelt */
.dialog-hintergrund {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(43, 37, 32, 0.55);
  animation: einblenden 0.2s;
}
.dialog {
  width: 100%; max-width: 440px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  padding: 26px 28px 22px;
  text-align: center;
  animation: aufploppen 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes aufploppen { from { transform: scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
.dialog h2 { margin: 0 0 6px; font-size: 1.5em; }
.dialog p { margin: 0 0 20px; color: var(--text-leise); }
.dialog-knoepfe { display: flex; justify-content: center; }
.dialog-knoepfe .knopf { flex: 1 1 0; margin: 0 6px; min-height: 56px; font-size: 1.05em; }

/* nur für Vorleseprogramme */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.frage:focus, h2:focus { outline: none; }
.knopf.rund { width: 56px; height: 56px; padding: 0; border-radius: 50%; font-size: 1.6em; font-weight: 700; }
.knopf.rund:disabled { opacity: 0.35; }

.antworten.zwei { display: flex; flex-wrap: wrap; }
.antworten.zwei .knopf { flex: 1 1 140px; margin: 0 10px 10px 0; font-weight: 600; }
.antworten.zwei .knopf:last-child { margin-right: 0; }
.antworten.liste .knopf { display: block; width: 100%; text-align: left; margin-bottom: 8px; }
.antwort:disabled { color: var(--text-leise); background: #faf8f4; }
.antwort.gewaehlt:disabled { color: var(--text); border-color: var(--akzent); background: #eef3f8; box-shadow: inset 0 0 0 1px var(--akzent); }
/* nach der Antwort: richtige Antwort mit Haken, falsche Wahl orange */
.antwort { position: relative; }
.antwort.loesung:disabled { color: var(--text); border-color: var(--ok); background: var(--ok-hell); box-shadow: inset 0 0 0 1px var(--ok); }
.antwort.daneben:disabled { color: var(--text); border-color: var(--nein); background: var(--nein-hell); box-shadow: inset 0 0 0 1px var(--nein); }
.antworten.liste .antwort.loesung { padding-right: 48px; }
.loesung-haken {
  position: absolute; right: 12px; top: 50%;
  width: 24px; height: 24px; margin-top: -12px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  padding: 4px;
}
.loesung-haken.daneben-zeichen { background: var(--nein); }
.antworten.zwei .loesung-haken { position: static; display: inline-block; vertical-align: middle; margin: -4px 0 0 8px; }
.knopfreihe { display: flex; flex-wrap: wrap; }
.knopfreihe .knopf { margin: 0 0 10px 10px; }

/* ---------- Aufgabe ---------- */
.frage { font-size: 1.15em; font-weight: 600; margin: 0 0 6px; }
.frage.klein { font-size: 1em; margin-top: 8px; }
.hinweis { margin: 0 0 14px; color: var(--text-leise); }
.balken { padding: 9px; border-radius: 9px; margin: 6px 0 22px; }
.schiene {
  position: relative;
  height: var(--balken-hoehe);
  background: var(--teil-neutral);
  border: 2px solid var(--trennlinie);
  border-radius: 3px;
  overflow: hidden;
}
.teil {
  position: absolute;
  top: 0; bottom: 0;
  margin: 0; padding: 0;
  border: 0;
  border-right: 2px solid var(--trennlinie);
  background: var(--teil-neutral);   /* leere Holzablage */
  box-shadow: inset 0 2px 4px rgba(60, 40, 20, 0.22);
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: box-shadow 0.4s;
}
.teil.letztes { border-right: 0; }
button.teil { cursor: pointer; }
button.teil:focus-visible { outline: 3px solid var(--akzent); outline-offset: -5px; }
.teil.markiert {
  background-image: repeating-linear-gradient(135deg, var(--markierung) 0, var(--markierung) 5px, var(--markierung-hell) 5px, var(--markierung-hell) 10px);
}
/* Farbüberzug für die Bestätigung */
.teil::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background-color: var(--farbe, transparent);
  opacity: 0;
  transform: scaleY(0.6);
  transition: opacity 0.45s, transform 0.45s;
  transition-delay: inherit;
}
.teil.voll::after { opacity: 1; transform: none; }
/* Farbige Teile liegen wie Modellstücke in der Ablage: schmale Holzfuge rundum,
   damit die Grenze zwischen zwei gleichfarbigen Teilen auf jeder Farbe deutlich ist */
.teil.voll { background-image: none; }
.teil.voll::after {
  left: 2px; right: 2px; top: 2px; bottom: 2px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* Übung 4/5: Der Farbrand unten zeigt von Anfang an, welche Modellteile hineinpassen. */
.teil.farbig { box-shadow: inset 0 2px 4px rgba(60, 40, 20, 0.22), inset 0 -5px 0 var(--kante); }
.etikett {
  position: relative; z-index: 1;
  color: var(--farbtext);
  background: var(--farbe);
  border-radius: 4px;
  padding: 1px 4px;
  opacity: 0;
  transition: opacity 0.3s;
  transition-delay: inherit;
  font-weight: 700;
}
.teil.voll .etikett { opacity: 1; }
/* gestrichelte Hilfslinie (richtige Einteilung): weiße Striche mit dunklem Rand wie die Striche in Übung 2,
   reichen bis in den Holzrahmen; gut sichtbar auf der dunklen Schraffur und auf hellen Teilen */
.mit-hilfslinien .schiene { overflow: visible; }
.hilfslinie {
  position: absolute; top: -9px; bottom: -9px;
  width: 4px; margin-left: -2px;
  background-image: repeating-linear-gradient(to bottom, #fff 0, #fff 10px, transparent 10px, transparent 16px);
  -webkit-filter: drop-shadow(1.5px 0 0 #1f2428) drop-shadow(-1.5px 0 0 #1f2428) drop-shadow(0 1.5px 0 #1f2428) drop-shadow(0 -1.5px 0 #1f2428);
  filter: drop-shadow(1.5px 0 0 #1f2428) drop-shadow(-1.5px 0 0 #1f2428) drop-shadow(0 1.5px 0 #1f2428) drop-shadow(0 -1.5px 0 #1f2428);
  z-index: 2;
  animation: einblenden 0.5s;
}
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

.balkenplatz { min-height: calc(var(--balken-hoehe) + 40px); }
.steuerung { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.steuerung > * { margin-bottom: 10px; }
.zaehler { display: flex; align-items: center; }
.anzahl { max-width: 8em; margin: 0 14px; text-align: center; line-height: 1.25; color: var(--text-leise); }

/* Figur spricht (Fehlerdetektiv) */
.sprechen { display: flex; align-items: center; margin-bottom: 14px; }
.avatar {
  flex: 0 0 84px; height: 84px;
  border-radius: 50%;
  background-color: #f6f1e8;
  background-size: 125% auto;   /* ganzer Kopf mit Schultern */
  background-position: 50% 6%;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--holz-2);
  margin-right: 16px;
}
.avatar.kopf { background-size: 108% auto; background-position: 50% 35%; }
.blase {
  position: relative;
  background: #f6f1e8;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 1.1em;
}
.blase::before {
  content: "";
  position: absolute; left: -9px; top: 50%;
  margin-top: -9px;
  border: 9px solid transparent;
  border-left: 0;
  border-right-color: #f6f1e8;
}
.blase .wer { font-weight: 700; margin-right: 4px; }

/* Rückmeldung */
.rueckmeldung {
  display: none;
  align-items: flex-start;
  border-radius: 12px;
  padding: 12px 16px 12px 12px;
  margin: 14px 0;
  border: 1px solid;
}
.rueckmeldung.sichtbar { display: flex; animation: einblenden 0.3s; }
.rueckmeldung.ok { background: var(--ok-hell); border-color: rgba(46, 125, 79, 0.35); }
.rueckmeldung.nein { background: var(--nein-hell); border-color: rgba(181, 83, 18, 0.35); }
.rueckmeldung p { margin: 0; }
.rueckmeldung .urteil { font-weight: 700; }
.rueckmeldung.ok .urteil { color: #1f5c39; }
.rueckmeldung.nein .urteil { color: #8a3d0b; }
.rueckmeldung .regel { margin-top: 4px; }
.zeichen {
  flex: 0 0 30px; height: 30px;
  margin-right: 12px;
  border-radius: 50%;
  color: #fff;
}
.ok .zeichen { background: var(--ok); }
.nein .zeichen { background: var(--nein); }
.zeichen svg, .loesung-haken svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.zeichen svg { padding: 5px; }

/* Textmarker für Zähler oder Nenner in der Rückmeldung */
.bruch .hervor {
  background: #ffe36e;
  border-radius: 3px;
  box-shadow: 0 0 0 2px #ffe36e;
}
.bruch .n.hervor { border-top-color: var(--text); }
.aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.aktionen .knopf { margin: 4px 0 4px 10px; }

/* Abschluss: Figur neben dem Ergebnis, das Ergebnis als gefüllte Einer-Ablage */
.abschluss { display: flex; align-items: flex-end; padding: 6px 0 0; }
.abschluss.figur-rechts { flex-direction: row-reverse; }
.abschluss-figur {
  flex: 0 0 auto;
  width: clamp(110px, 18vw, 170px);
  height: auto;
  -webkit-user-select: none; user-select: none;
  animation: hereinkommen 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.figur-links .abschluss-figur { margin-right: 24px; }
.figur-rechts .abschluss-figur { margin-left: 24px; }
@keyframes hereinkommen { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.abschluss-inhalt { flex: 1 1 auto; min-width: 0; padding-bottom: 8px; }
.abschluss h2 { margin: 0 0 14px; font-size: 1.7em; line-height: 1.15; }
.abschluss.ok h2 { color: var(--ok); }
.abschluss p { margin: 0 0 6px; }
.ergebnis { display: flex; align-items: center; margin-bottom: 14px; }
.ergebnis .balken { flex: 1 1 auto; margin: 0; }
.ergebnis-bruch { flex: 0 0 auto; margin-left: 14px; font-size: 1.6em; white-space: nowrap; }
.abschluss .aktionen { margin-top: 14px; }
.richtig-so { margin-top: -8px; }
.richtig-so .hinweis { margin-bottom: 4px; }
@media (max-width: 599px) {
  .abschluss { display: block; }
  .abschluss-figur { display: none; }
}

/* ---------- Bruchdarstellung ---------- */
.bruch {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  line-height: 1.05;
  margin: 0 0.15em;
  font-weight: 700;
}
.bruch .z, .bruch .n { padding: 0 0.15em; }
.bruch .n { border-top: 0.09em solid currentColor; }
.bruch.klein { font-size: 0.8rem; }

/* Tablet und größer: höhere Teile, leichter zu treffen */
@media (min-width: 700px) {
  :root { --balken-hoehe: 76px; }
}
@media (max-width: 599px) {
  :root { --balken-hoehe: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Übung 2: Trennstriche ziehen ---------- */
.mit-griffen .schiene { overflow: visible; }
.griff {
  position: absolute;
  top: -12px; bottom: -22px;
  width: 44px; margin-left: -22px;
  padding: 0; border: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
  z-index: 3;
}
.griff::before {   /* der Strich */
  content: "";
  position: absolute; left: 50%; top: 12px; bottom: 22px;
  width: 4px; margin-left: -2px;
  background: var(--trennlinie);
}
.griff::after {    /* der Holzknopf unter dem Balken */
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 26px; height: 26px; margin-left: -13px;
  border-radius: 50%;
  background: var(--holz-fuge);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 2px 4px rgba(60, 40, 20, 0.35), 0 0 0 3px #fff;
}
.griff.zieht::after, .griff:focus-visible::after { background: var(--akzent); }
.griff:focus { outline: none; }
.griff:disabled { cursor: default; }
.griff:disabled::after { display: none; }
.mit-griffen { margin-bottom: 40px; }
.griff.ungenau::before { background: var(--nein); }
.griff.ungenau::after { background: var(--nein) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16M4 12l4.5-4.5M4 12l4.5 4.5M20 12l-4.5-4.5M20 12l-4.5 4.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.griff.gut::before { background: var(--ok); }
.griff.gut::after { background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 17px no-repeat; }

/* ---------- Übung 6: Schätzen ---------- */
.schaetzen { cursor: pointer; touch-action: none; }
.schaetzen .schiene { overflow: visible; }
.schaetzen:focus { outline: none; }
.schaetzen:focus-visible { box-shadow: 0 0 0 3px var(--akzent); }
.schaetz-fuellung {
  position: absolute; left: 0; top: 0; bottom: 0;
  background-image: repeating-linear-gradient(135deg, var(--markierung) 0, var(--markierung) 5px, var(--markierung-hell) 5px, var(--markierung-hell) 10px);
}
.schaetz-griff {
  position: absolute; top: -10px; bottom: -10px;
  width: 6px; margin-left: -3px;
  background: var(--akzent);
  border-radius: 3px;
  box-shadow: 0 0 0 2px #fff;
}
.schaetz-griff::after {
  content: "";
  position: absolute; left: 50%; bottom: -16px;
  width: 24px; height: 24px; margin-left: -12px;
  border-radius: 50%;
  background: var(--akzent);
  box-shadow: 0 0 0 3px #fff, 0 2px 4px rgba(0, 0, 0, 0.3);
}
.schaetzen.balken { margin-bottom: 34px; }
/* Die eigenen Striche ragen über den Balken in den Holzrahmen hinaus:
   weiß mit dunklem Rand, damit man sie auf jeder Modellfarbe sieht (auch Blau, Weiß, Gelb) */
.mit-strichen .schiene { overflow: visible; }
.balken.mit-strichen { margin-top: 26px; margin-bottom: 52px; }
.eigener-strich {
  position: absolute; top: -26px; bottom: -26px;
  width: 4px; margin-left: -2px;
  /* über den Teilen: feine, abwechselnd helle und dunkle Striche, damit die Grenzen der Bruchteile vorne bleiben */
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0, rgba(255, 255, 255, 0.85) 5px, rgba(31, 36, 40, 0.55) 5px, rgba(31, 36, 40, 0.55) 10px) center / 2px 100% no-repeat;
  z-index: 3;
  pointer-events: none;
}
.eigener-strich::before, .eigener-strich::after {   /* deutliche Enden ober- und unterhalb des Balkens */
  content: "";
  position: absolute; left: 0; right: 0; height: 22px;
  background: #fff;
  box-shadow: 0 0 0 2px var(--text);
  border-radius: 2px;
}
.eigener-strich::before { top: 0; }
.eigener-strich::after { bottom: 0; }
.eigener-strich.ungenau {
  background-image: repeating-linear-gradient(to bottom, #ff8a3d 0, #ff8a3d 5px, rgba(31, 36, 40, 0.55) 5px, rgba(31, 36, 40, 0.55) 10px);
}
.eigener-strich.ungenau::before, .eigener-strich.ungenau::after { background: #ff8a3d; }
.legende { margin: -26px 0 12px; color: var(--text-leise); font-size: 0.9em; }
.legende-strich { display: inline-block; width: 4px; height: 1em; vertical-align: -2px; margin: 0 8px 0 2px; background: #fff; box-shadow: 0 0 0 2px var(--text); border-radius: 2px; }
.legende-strich.ungenau { margin-left: 20px; background: #ff8a3d; }

/* ---------- Bruch-Eingabe (Übung 7 und 8) ---------- */
.eingabe-zeile { display: flex; align-items: center; margin: 4px 0 10px; }
.eingabe-zeile .hinweis { margin: 0 0 0 18px; }
.bruch-eingabe { display: inline-flex; flex-direction: column; align-items: center; }
.bruch-eingabe input {
  width: 72px; height: 56px;
  font: inherit; font-size: 1.6em; font-weight: 700;
  text-align: center;
  border: 2px solid var(--rand-bedienung);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
}
.bruch-eingabe input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(47, 93, 138, 0.25); }
.bruch-eingabe input:disabled { background: #faf8f4; color: var(--text); }
.bruch-eingabe-strich { display: block; width: 88px; height: 4px; margin: 6px 0; background: var(--text); border-radius: 2px; }

/* ---------- Übung 8: Wortbausteine ---------- */
.wort-satz { font-size: 1.3em; font-weight: 700; margin: 0 0 14px; }
.wort-satz.gross { font-size: 1.7em; }
.luecke {
  display: inline-block; min-width: 4.5em;
  padding: 2px 10px; margin-right: 4px;
  border-bottom: 3px dashed var(--rand-bedienung);
  color: var(--text-leise); text-align: center;
}
.luecke.gefuellt { color: var(--text); border-bottom-style: solid; border-color: var(--akzent); }
.bausteine { display: flex; flex-wrap: wrap; margin-bottom: 6px; }
.baustein { margin: 0 10px 10px 0; min-width: 6.5em; font-weight: 600; }
.baustein[aria-pressed="true"] { border-color: var(--akzent); background: #eef3f8; box-shadow: inset 0 0 0 1px var(--akzent); }

/* ---------- Übung 9: anderes Ganzes ---------- */
.antworten.brueche { display: flex; flex-wrap: wrap; }
.antworten.brueche .knopf { flex: 1 1 100px; margin: 0 10px 10px 0; min-height: 72px; font-size: 1.25em; }
.antworten.brueche .loesung-haken { position: absolute; top: 8px; right: 8px; margin: 0; }
.ganzes-platz { display: flex; justify-content: center; margin: 4px 0 20px; }
.holz.rund { border-radius: 50%; padding: 12px; width: 264px; height: 264px; }
.kreis { display: block; width: 100%; height: 100%; }
.sektor { fill: var(--teil-neutral); stroke: var(--trennlinie); stroke-width: 2; stroke-linejoin: round; }
.sektor[role="button"] { cursor: pointer; }
.sektor[role="button"]:focus { outline: none; stroke: var(--akzent); stroke-width: 4; }
.sektor.markiert { fill: var(--muster-n); }
.sektor.voll { fill: var(--farbe); }
.raster-rahmen, .plaettchen-brett { padding: 10px; border-radius: 10px; }
.raster { display: grid; max-width: 100%; border: 2px solid var(--trennlinie); background: var(--trennlinie); grid-gap: 2px; }
.kaestchen { height: 64px; padding: 0; border: 0; border-radius: 0; background: var(--teil-neutral); }
.plaettchen-feld {
  display: flex; flex-wrap: wrap; justify-content: center;
  background: #f3efe7;
  border-radius: 6px;
  box-shadow: inset 0 2px 4px rgba(60, 40, 20, 0.3);
  padding: 8px;
}
.plaettchen {
  width: 50px; height: 50px; margin: 6px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--trennlinie);
  background: var(--teil-neutral);
}
button.kaestchen, button.plaettchen { cursor: pointer; }
button.kaestchen:focus-visible, button.plaettchen:focus-visible { outline: 3px solid var(--akzent); outline-offset: -5px; }
.kaestchen.markiert, .plaettchen.markiert {
  background-image: repeating-linear-gradient(135deg, var(--markierung) 0, var(--markierung) 5px, var(--markierung-hell) 5px, var(--markierung-hell) 10px);
}
.kaestchen.voll, .plaettchen.voll {
  background-color: var(--farbe);
  background-image: none;
  transition: background-color 0.4s;
  transition-delay: inherit;
}

/* ---------- Zifferntastatur zur Bruch-Eingabe ---------- */
.bruch-eingabe-bereich { display: flex; align-items: center; flex-wrap: wrap; }
.bruch-eingabe { margin-right: 28px; }
.bruch-eingabe input { cursor: pointer; caret-color: transparent; }
.bruch-eingabe input.aktiv { border-color: var(--akzent); border-width: 3px; box-shadow: 0 0 0 3px rgba(47, 93, 138, 0.2); }
.bruch-eingabe input.falsch { border-color: var(--nein); background: var(--nein-hell); }
.ziffern {
  display: grid;
  grid-template-columns: repeat(5, 54px) 64px;
  grid-gap: 8px;
}
.ziffer { min-height: 54px; padding: 0; font-size: 1.35em; font-weight: 700; }
.ziffer.loeschen { grid-column: 6; grid-row: 1 / span 2; }
.ziffer.loeschen svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vertical-align: middle; }
.bruch-eingabe-bereich.gesperrt .ziffern { display: none; }
@media (hover: hover) { .ziffer:active:not(:disabled) { background: #eef3f8; } }
.ziffer:active { background: #eef3f8; }

/* falsch gewählte Wortbausteine nach dem ersten Fehlversuch */
.baustein.falsch { border-color: var(--nein); background: var(--nein-hell); }
.luecke.falsch { border-color: var(--nein); color: #8a3d0b; }