/* Lorenas Rechen-Training — Mobile first, grosse Tippflaechen */

:root {
  --tinte: #1c1f3b;
  --papier: #f6f5f2;
  --karte: #ffffff;
  --linie: #e2e0da;
  --blau: #2b2f6b;
  --blau-hell: #eceefb;
  --gruen: #1f7a4d;
  --gruen-hell: #e4f4ec;
  --rot: #b02a37;
  --rot-hell: #fbe8ea;
  --gelb: #d18700;
  --gelb-hell: #fdf3dd;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 3rem;
  background: var(--papier);
  color: var(--tinte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Kopfzeile ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: max(.75rem, env(safe-area-inset-top)) 1rem .75rem;
  background: var(--blau);
  color: #fff;
}

.kopf h1 { flex: 1; margin: 0; font-size: 1.05rem; font-weight: 600; }
.kopf .punkte { font-variant-numeric: tabular-nums; font-size: .95rem; opacity: .9; }

.zurueck {
  border: 0;
  background: rgba(255,255,255,.15);
  color: #fff;
  font: inherit;
  font-size: .9rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  cursor: pointer;
}

main { max-width: 640px; margin: 0 auto; padding: 1rem; }

/* ---------- Rundenliste ---------- */

.begruessung {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.begruessung p { margin: .3rem 0 0; font-size: .95rem; color: #55596e; }
.begruessung strong { color: var(--tinte); }

.runden { display: grid; gap: .7rem; }

.runde {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  text-align: left;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.runde:active { transform: scale(.99); }
.runde .zeichen { font-size: 1.6rem; width: 2.2rem; text-align: center; }
.runde .name { flex: 1; font-weight: 600; }
.runde .unter { display: block; font-weight: 400; font-size: .85rem; color: #6b6f85; }
.runde .fokus {
  background: var(--gelb-hell);
  color: var(--gelb);
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Aufgabenkarte ---------- */

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin-bottom: 1rem;
}

.aufgabe-zahl { font-size: .8rem; color: #6b6f85; margin-bottom: .5rem; }

.frage {
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: 0 0 1rem;
  word-break: break-word;
}
.frage.text { font-size: 1.1rem; font-weight: 500; line-height: 1.55; }

.eingabe-zeile { display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap; }

input[type="text"] {
  flex: 1;
  min-width: 8rem;
  font: inherit;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  padding: .7rem .8rem;
  border: 2px solid var(--linie);
  border-radius: 10px;
  background: #fff;
  color: inherit;
}
input[type="text"]:focus { outline: none; border-color: var(--blau); }

.knopf {
  border: 0;
  background: var(--blau);
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: .7rem 1.2rem;
  border-radius: 10px;
  cursor: pointer;
}
.knopf:disabled { opacity: .45; cursor: default; }
.knopf.leise { background: transparent; color: var(--blau); border: 1px solid var(--linie); }

.knopf-reihe { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

.hinweis { font-size: .85rem; color: #6b6f85; margin-top: .6rem; }
.hinweis.gruen { color: var(--gruen); }
.hinweis.rot { color: var(--rot); }

/* ---------- Countdown bis zur Probe ---------- */

.countdown {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  background: var(--gelb-hell);
  border: 1px solid #f0dfb4;
  border-radius: var(--radius);
  padding: .8rem 1rem;
  margin-bottom: 1rem;
}
.countdown strong { color: var(--gelb); font-size: 1.05rem; white-space: nowrap; }
.countdown span { font-size: .9rem; color: #6b5a2e; }
.countdown.eilig { background: var(--rot-hell); border-color: #f0c4c9; }
.countdown.eilig strong { color: var(--rot); }
.countdown.eilig span { color: #7d3138; }

/* Datum der Probe eintragen */
.test-datum {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  font-size: .85rem;
  color: #6b6f85;
  margin: -.5rem 0 1rem;
}
.test-datum input {
  font: inherit;
  padding: .35rem .5rem;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: #fff;
  color: var(--tinte);
}

/* ---------- Rueckmeldung ---------- */

.antwort { border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.antwort.richtig { background: var(--gruen-hell); border: 1px solid #bfe3d0; }
.antwort.falsch { background: var(--rot-hell); border: 1px solid #f0c4c9; }
.antwort h3 { margin: 0 0 .4rem; font-size: 1rem; }
.antwort.richtig h3 { color: var(--gruen); }
.antwort.falsch h3 { color: var(--rot); }
.antwort p { margin: .3rem 0; font-size: .95rem; }

/* Ziffernvergleich */
.ziffern { display: flex; gap: .25rem; margin: .6rem 0; flex-wrap: wrap; }
.ziffern .z {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.25rem;
  font-weight: 700;
  min-width: 1.5rem;
  text-align: center;
  padding: .2rem .1rem;
  border-radius: 6px;
}
.ziffern .z.ok { background: #cdeadb; color: var(--gruen); }
.ziffern .z.fehler { background: #f5c9ce; color: var(--rot); }
.ziffern .z.leer { background: #eee; color: #999; }
.ziffern-titel { font-size: .8rem; color: #6b6f85; margin-top: .5rem; }

/* Rechenweg */
.weg {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.15rem;
  line-height: 1.35;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: .9rem;
  margin: .7rem 0;
  overflow-x: auto;
}
.weg table { border-collapse: collapse; margin-left: auto; }
.weg td { padding: 0 .12rem; text-align: right; min-width: 1.3rem; }
.weg .op { padding-right: .5rem; color: var(--blau); }
/* Merkzeichen: gruen = dazuzaehlen (Plus/Mal), rot = die kleine 1 beim Ergaenzen. */
.weg .merk td { font-size: .8rem; font-weight: 700; height: 1.2rem; }
.weg .merk.plus td { color: var(--gruen); }
.weg .merk.minus td { color: var(--rot); }
.weg .strich td { border-top: 2px solid var(--tinte); height: .3rem; padding: 0; }
.weg .ergebnis td { font-weight: 700; }
.weg pre { margin: 0; font: inherit; }

.schritte { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .88rem; color: #444862; }
.schritte li { margin: .25rem 0; }

/* Rechenweg als Film in der ENDLOSSCHLAUFE: jeder Teil hat dieselbe Rundenlaenge
   (animation-duration) und seine eigene Startzeit (animation-delay) — dadurch laeuft
   die Welle immer wieder durch. Jeder Schritt hat seine Farbe in --f.
   Nur opacity + Hintergrund — transform wirkt in Tabellenzellen nicht. */
@keyframes weg-auf {
  0% { opacity: 0; background: transparent; }
  2% { opacity: 1; background: color-mix(in srgb, var(--f) 30%, transparent); }
  12% { opacity: 1; background: color-mix(in srgb, var(--f) 30%, transparent); }
  22% { opacity: 1; background: transparent; }
  94% { opacity: 1; background: transparent; }
  100% { opacity: 0; background: transparent; }
}
.weg-film .zeig { opacity: 0; animation: weg-auf 6s linear infinite; }
.weg-film .ergebnis .zeig, .weg-film pre .zeig { color: var(--f); font-weight: 700; }
.weg-film .schritte { padding-left: 0; list-style-position: inside; }
.weg-film .schritte li {
  border-left: 4px solid var(--f); padding: .2rem .5rem; border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--f) 8%, transparent);
}

/* Merk-Blase: was im Kopf bleiben muss, poppt gross auf. Gruen = dazuzaehlen,
   rot = die kleine 1 beim Ergaenzen, blau = der Rest beim Teilen. */
.blasen { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; }
.blase {
  padding: .3rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 700;
  color: #fff; background: var(--blau); box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
}
.blasen.plus .blase { background: var(--gruen); }
.blasen.minus .blase { background: var(--rot); }
@keyframes blase-pop {
  0% { opacity: 0; transform: scale(.3); }
  3% { opacity: 1; transform: scale(1.3); }
  7% { transform: scale(1); }
  94% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.8); }
}
.weg-film .blase { animation-name: blase-pop; }
@media (prefers-reduced-motion: reduce) {
  .weg-film .zeig { opacity: 1; animation: none; }
}

/* ---------- Zeichnen (SVG) ---------- */

.zeichnung {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: .5rem;
  margin: .2rem 0 1rem;
  touch-action: manipulation;
}
.zeichenfeld { width: 100%; height: auto; display: block; }
.zeichnung text { font-family: inherit; font-size: 11px; fill: #6b6f85; }

/* Unsichtbare Tippbereiche — gross genug fuer einen Finger. */
.treffer { fill: transparent; cursor: pointer; }
.treffer.gewaehlt { fill: var(--blau); fill-opacity: .85; }

/* Zahlenstrahl */
.zs-achse, .zs-strich { stroke: var(--tinte); stroke-width: 2; }
.zs-text { font-size: 11px; fill: #6b6f85; }
.zs-marke { fill: var(--gruen); }

/* Koordinatennetz */
.g-netz { stroke: var(--linie); stroke-width: 1; }
.g-achse { stroke: var(--tinte); stroke-width: 2; }
.g-text { font-size: 11px; fill: #6b6f85; }
.g-spiegel { stroke: var(--gelb); stroke-width: 2; stroke-dasharray: 5 4; }
.g-figur { fill: var(--blau-hell); stroke: var(--blau); stroke-width: 2; }
.g-punkt { fill: var(--blau); }
.g-loesung { fill: var(--gruen); }
.g-name { font-size: 12px; font-weight: 700; fill: var(--tinte); }

/* ---------- Animiertes Schaubild im Tipp ---------- */

.schaubild { margin: .6rem 0; }

/* Endlosschlaufe: jedes Teil hat seine Startzeit, alle dieselbe Rundenlaenge. */
@keyframes film-auf {
  0% { opacity: 0; }
  2% { opacity: 1; }
  94% { opacity: 1; }
  100% { opacity: 0; }
}
.schaubild .zeig { opacity: 0; animation: film-auf 6s linear infinite; }

.sb-schritt {
  background: #fff;
  border-left: 4px solid var(--f, var(--blau));
  border-radius: 0 10px 10px 0;
  padding: .6rem .7rem;
  margin-bottom: .5rem;
}

/* Bild-Tipps beim Zeichnen */
.tipp-bild { width: 100%; height: auto; display: block; }
.t-weg { stroke: var(--f); stroke-width: 5; stroke-linecap: round; opacity: .75; }
.t-marke { fill: var(--f); }
.t-zahl { font-size: 13px; font-weight: 700; fill: var(--f); }
.t-hell { fill: var(--f); fill-opacity: .18; stroke: var(--f); stroke-width: 2; stroke-dasharray: 4 3; }
.t-voll { fill: var(--f); fill-opacity: .45; stroke: var(--f); stroke-width: 2; }
.schaubild .schritte li {
  border-left: 4px solid var(--f);
  padding: .2rem .5rem;
  margin: .3rem 0;
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--f) 8%, transparent);
}
.sb-titel { margin: 0 0 .4rem; font-size: .85rem; font-weight: 600; color: var(--blau); }
.sb-satz { margin: .4rem 0 0; font-size: .9rem; }
.sb-zahl {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: .3rem;
}
.sb-zahl.neu { color: var(--gruen); }

/* Balken in gleiche Teile geschnitten */
.sb-balken { display: flex; gap: 2px; height: 34px; margin: .3rem 0; }
.sb-balken i {
  flex: 1;
  border: 2px solid var(--blau);
  border-radius: 4px;
  background: #fff;
}
.sb-balken i.a { background: var(--blau); }
.sb-balken i.b { background: var(--gelb); border-color: var(--gelb); }
.sb-balken i.ganz { background: var(--blau-hell); }

/* Ganze Stuecke und feine Stuecke beim Teilen durch 0.5 */
.sb-bloecke { display: flex; gap: 3px; flex-wrap: wrap; margin: .3rem 0; }
.sb-bloecke i { width: 34px; height: 34px; border-radius: 4px; background: var(--blau); }
.sb-bloecke.fein i { width: 16px; background: var(--gelb); }

/* Rechteck */
.sb-svg { width: 100%; height: auto; display: block; }
.sb-svg text { font-size: 11px; fill: #6b6f85; }
.sb-rand { fill: none; stroke: var(--blau); stroke-width: 2; }
.sb-rand.sb-dick { stroke-width: 5; }
.sb-fuell { fill: var(--blau-hell); }

.knopf.klein { font-size: .85rem; padding: .45rem .8rem; }

@media (prefers-reduced-motion: reduce) {
  .schaubild .zeig { animation: none; opacity: 1; }
}

/* ---------- Fortschritt ---------- */

.fortschritt { display: flex; gap: .3rem; margin-bottom: 1rem; }
.fortschritt span { flex: 1; height: 6px; border-radius: 3px; background: var(--linie); }
.fortschritt span.ok { background: var(--gruen); }
.fortschritt span.nok { background: var(--rot); }

.bilanz { text-align: center; padding: 2rem 1rem; }
.bilanz .gross { font-size: 3rem; font-weight: 700; }
.bilanz p { color: #55596e; }
.neu-abzeichen {
  display: inline-block;
  background: var(--gelb-hell);
  color: var(--gelb);
  font-weight: 700;
  padding: .4rem .8rem;
  border-radius: 999px;
}

/* ---------- Tipp mit ganzem Rechenweg ---------- */

.tipp {
  margin-top: 1rem;
  padding: .9rem 1rem;
  background: var(--blau-hell);
  border-radius: 10px;
  font-size: .95rem;
}
.tipp p { margin: 0 0 .5rem; }
.tipp .weg { background: #fff; }
.tipp .hinweis { margin-top: .4rem; }

/* ---------- Fortschrittsseite ---------- */

.karte h3 { margin: 0 0 .8rem; font-size: 1rem; }

.zahlen-reihe { display: flex; gap: .6rem; text-align: center; }
.zahlen-reihe div { flex: 1; background: var(--papier); border-radius: 10px; padding: .7rem .3rem; }
.zahlen-reihe strong { display: block; font-size: 1.3rem; }
.zahlen-reihe span { font-size: .78rem; color: #6b6f85; }

.balken-zeile { display: flex; align-items: center; gap: .6rem; margin: .45rem 0; font-size: .9rem; }
.balken-zeile span { flex: 0 0 9.5rem; }
.balken-zeile b { flex: 0 0 3rem; text-align: right; font-variant-numeric: tabular-nums; }
.balken { flex: 1; height: 10px; border-radius: 5px; background: var(--linie); overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--gruen); }

.abzeichen { display: flex; flex-wrap: wrap; gap: .5rem; }
.abzeichen span { font-size: .85rem; padding: .35rem .7rem; border-radius: 999px; }
.abzeichen .da { background: var(--gruen-hell); color: var(--gruen); font-weight: 600; }
.abzeichen .offen { background: var(--papier); color: #9a9db0; }

@media (max-width: 420px) {
  .balken-zeile span { flex: 0 0 7rem; font-size: .82rem; }
}