/* MySchool -- Zeitdrill der Vertiefungsübungen.   [NEUE-VERSION] Auftrag 277, Fenster DR1
 * Tippflächen mindestens 44 px, kein waagrechtes Scrollen bei 390 px, kein Blinken, keine Bewegung ausser der ruhigen Zeitleiste.
 * Richtig und falsch nie nur mit Farbe: immer auch ✓ oder ✗ und ein Satz. */
.dr-wurzel {
  --dr-text: var(--farbe-text, #1f2933);
  --dr-leise: var(--farbe-text-leise, #5b6b7a);
  --dr-karte: var(--farbe-karte, #fff);
  --dr-bg: var(--farbe-bg, #eef2f6);
  --dr-rand: var(--farbe-rand, #d7dee6);
  --dr-akzent: var(--farbe-akzent, #2f6fb0);
  --dr-gut: #18794e;
  --dr-falsch: #b42318;
  box-sizing: border-box;
  max-width: 720px;
  margin: 0 auto;
  color: var(--dr-text);
}
.dr-wurzel *, .dr-wurzel *::before, .dr-wurzel *::after { box-sizing: border-box; }
.dr-blockkopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.dr-titel { margin: 0 0 4px; font-size: 1.35rem; }
.dr-leitsatz { margin: 0 0 12px; color: var(--dr-leise); }
.dr-leise { color: var(--dr-leise); font-size: .92rem; margin: 6px 0; }
.dr-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.dr-form--nurlesen { opacity: .65; }
.dr-gruppe__titel { font-weight: 600; font-size: .92rem; margin-bottom: 4px; }
.dr-kapseln { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-reiter { display: flex; gap: 6px; margin-bottom: 12px; }
.dr-kapsel {
  min-height: 44px; min-width: 44px; padding: 6px 12px; border: 1px solid var(--dr-rand); border-radius: 22px;
  background: var(--dr-karte); color: var(--dr-text); font: inherit; cursor: pointer; touch-action: manipulation;
}
.dr-kapsel--an { background: var(--dr-akzent); border-color: var(--dr-akzent); color: #fff; font-weight: 600; }
.dr-schritte { display: flex; align-items: center; gap: 8px; }
.dr-schritte__wert { min-width: 64px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.dr-schritte__k { padding: 0; font-size: 1.2rem; }
.dr-los {
  min-height: 52px; width: 100%; padding: 10px 18px; border: 0; border-radius: 10px; background: var(--dr-akzent);
  color: #fff; font: inherit; font-size: 1.1rem; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.dr-los--zwei { background: var(--dr-karte); color: var(--dr-text); border: 1px solid var(--dr-rand); font-weight: 500; }
.dr-testkasten { border: 1px solid var(--dr-rand); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: var(--dr-karte); }
.dr-testkasten p { margin: 4px 0; }
.dr-testkasten__satz { font-weight: 600; }

/* Lauf */
.dr-laufkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px; }
.dr-zaehler { font-weight: 600; font-variant-numeric: tabular-nums; }
.dr-nummer { color: var(--dr-leise); font-size: .92rem; }
.dr-beenden { margin-left: auto; min-height: 44px; padding: 4px 12px; border: 1px solid var(--dr-rand); border-radius: 8px; background: var(--dr-karte); color: var(--dr-text); font: inherit; cursor: pointer; }
.dr-zeit { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.dr-zeit__balken { flex: 1; height: 10px; border-radius: 5px; background: var(--dr-bg); border: 1px solid var(--dr-rand); overflow: hidden; }
.dr-zeit__fuellung { height: 100%; background: var(--dr-akzent); opacity: .7; }
.dr-zeit__text { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.dr-aufgabe { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; min-height: 84px; margin-bottom: 8px; }
.dr-frage { font-size: 2.4rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dr-gleich { font-size: 1.5rem; font-weight: 600; }
.dr-zelle { display: inline-flex; align-items: center; gap: 4px; }
.dr-gegeben { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dr-prozent { font-size: 1.5rem; font-weight: 600; }
.dr-feld {
  display: inline-flex; align-items: center; justify-content: center; min-width: 96px; height: 60px; padding: 0 8px;
  border: 2px solid var(--dr-rand); border-radius: 10px; background: var(--dr-karte); font-size: 1.7rem; font-weight: 700;
  font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation;
}
.dr-feld--aktiv { border-color: var(--dr-akzent); box-shadow: 0 0 0 2px var(--dr-akzent) inset; }
.dr-feld--bruch { min-width: 84px; }
.dr-feld__inhalt { min-width: 1ch; }
.dr-rueck { min-height: 2.6em; margin-bottom: 8px; text-align: center; font-size: 1.02rem; }
.dr-rueck--gut { color: var(--dr-gut); font-weight: 600; }
.dr-rueck--falsch { color: var(--dr-falsch); font-weight: 600; }
.dr-rueck--ruhig { color: var(--dr-leise); }
.dr-tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 360px; margin: 0 auto; user-select: none; -webkit-user-select: none; }
.dr-taste {
  min-height: 56px; border: 1px solid var(--dr-rand); border-radius: 10px; background: var(--dr-karte); color: var(--dr-text);
  font: inherit; font-size: 1.5rem; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.dr-taste--ok { background: var(--dr-akzent); border-color: var(--dr-akzent); color: #fff; }
.dr-tasten--bruch .dr-taste--ok { grid-column: span 2; }

/* Auswertung */
.dr-pokal { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px; margin-bottom: 12px; border: 1px solid var(--dr-rand); border-radius: 12px; background: var(--dr-karte); text-align: center; }
.dr-pokal__bild { font-size: 3rem; line-height: 1.1; }
.dr-pokal__wort { font-size: 1.4rem; }
.dr-pokal__zusatz { color: var(--dr-leise); font-size: .92rem; }
.dr-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.dr-zahl { padding: 8px; border: 1px solid var(--dr-rand); border-radius: 8px; background: var(--dr-karte); }
.dr-zahl dt { font-size: .82rem; color: var(--dr-leise); }
.dr-zahl dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dr-liste h4, .dr-verlauf h4, .dr-bericht h4 { margin: 10px 0 4px; }
.dr-liste ul { margin: 0 0 8px; padding-left: 20px; columns: 2; }
.dr-endknoepfe { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.dr-verlauf { margin-top: 12px; }
.dr-verlauf p { margin: 4px 0; }
.dr-meldung { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; margin-bottom: 8px; border: 1px solid var(--dr-rand); border-radius: 8px; background: var(--dr-karte); }
.dr-meldung__zu { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--dr-text); font: inherit; cursor: pointer; }

/* Lehrperson */
.dr-lehrkasten { margin-top: 16px; border: 1px solid var(--dr-rand); border-radius: 10px; padding: 8px 12px; background: var(--dr-karte); }
.dr-lehrkasten summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.dr-klassenwahl { min-height: 44px; margin: 6px 0 12px; padding: 4px 8px; font: inherit; max-width: 100%; }
.dr-vorschlag { font-weight: 600; }
.dr-bericht h5 { margin: 10px 0 4px; font-size: .95rem; }
.dr-tabelle-huelle { overflow-x: auto; }
.dr-tabelle { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.dr-tabelle th, .dr-tabelle td { padding: 4px 8px; border-bottom: 1px solid var(--dr-rand); text-align: right; white-space: nowrap; }
.dr-tabelle th:first-child, .dr-tabelle td:first-child { text-align: left; }

@media (max-width: 480px) {
  .dr-frage { font-size: 2rem; }
  .dr-gegeben { font-size: 1.35rem; }
  .dr-feld { min-width: 76px; height: 54px; font-size: 1.35rem; }
  .dr-feld--bruch { min-width: 68px; }
  .dr-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dr-liste ul { columns: 1; }
}
@media (prefers-reduced-motion: reduce) { .dr-wurzel * { transition: none !important; animation: none !important; } }
@media print { .dr-wurzel { display: none; } }