/* uebung.css – gemeinsame Gestaltung der Zahlenstrahl-Übungen (Natürliche Zahlen, Klasse 5)
   Gehört zu uebung.js. Regeln und Begründungen: CLAUDE.md im Projektordner. */

/* Andika (SIL, OFL): für Leseanfänger, Formen wie in der Grundschul-Druckschrift; lokal, keine externe Verbindung */
@font-face { font-family: 'Andika'; src: url('schrift/andika-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Andika'; src: url('schrift/andika-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* Abstände: 4 / 8 / 12 / 16 / 24 px – eng innerhalb einer Gruppe, weit zwischen den Gruppen.
   Höchstens 1000 px breit, auf großen Bildschirmen zentriert */
body { position: relative; max-width: 1000px; margin: 0 auto; padding: 12px 16px; background: #fff; color: #222;
       font-family: Andika, Arial, Helvetica, sans-serif; font-size: 20px; }
::selection { background: #d6defb; color: #222; }

/* ---------- Kopfkasten: Auftrag oben, darunter der Stand (immer zwei Zeilen, damit nichts springt) ---------- */
.kopf { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px 24px;
        min-height: 112px; box-sizing: border-box; padding: 12px 16px 16px; border-radius: 8px; background: #f2f2f2; overflow: hidden; }
/* Lineal-Skala als Unterkante: kurze Striche alle 16 px, lange alle 80 px (wie am Zahlenstrahl) */
.kopf::after, .start-kopf::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 11px; pointer-events: none;
               background: repeating-linear-gradient(90deg, #c9c9c9 0 2px, transparent 2px 80px) bottom left / 100% 11px no-repeat,
                           repeating-linear-gradient(90deg, #c9c9c9 0 2px, transparent 2px 16px) bottom left / 100% 6px no-repeat; }
#aufgabe { line-height: 1.3; }
.frage { font-size: 24px; font-weight: bold; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
/* Zahlenkärtchen (Zielzahl, Eingabe): immer zweistellig breit, damit nichts springt */
.zahlkarte { display: inline-block; min-width: 2.4em; box-sizing: border-box; padding: 0 10px; text-align: center;
             color: #1b3fd8; background: #fff; border: 2px solid #1b3fd8; border-radius: 8px; font-size: 1.1em; line-height: 1.4; }

/* ---------- Stand: Kästchen links, Stufen-Weg rechts ---------- */
.stand { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 8px 28px; flex-wrap: wrap; }
.richtige { display: inline-flex; align-items: center; gap: 10px; }
.richtige[hidden] { display: none; }
.kaestchen { display: inline-flex; gap: 6px; }
.kaestchen:empty { display: none; }
.kaestchen span { width: 18px; height: 18px; border: 2px solid #8a8a8a; border-radius: 3px; background: #fff; }
.kaestchen span.voll { border-color: #1a7a1a; background: #1a7a1a; }
/* Stufen als kleiner Zahlenstrahl: Punkte, verbunden durch Wegstücke, am Ende die Zielflagge */
.stufen { display: inline-flex; align-items: center; margin-left: auto; }   /* bleibt rechts, auch wenn die Kästchen am Ende fehlen */
.stufen .name { margin-right: 10px; }
.stufen .punkt { width: 30px; height: 30px; box-sizing: border-box; border: 2px solid #8a8a8a; border-radius: 50%; background: #fff;
                 display: grid; place-items: center; font-size: 17px; font-weight: bold; color: #6b6b6b; }
.stufen .weg { width: 12px; height: 3px; background: #8a8a8a; }
.stufen .weg.geschafft { background: #1a7a1a; }
.stufen .punkt.aktuell { border: 3px solid #1b3fd8; color: #1b3fd8; }
.stufen .punkt.geschafft { border-color: #1a7a1a; background: #1a7a1a; color: #fff; }
.stufen .punkt.neu { animation: huepfen 460ms cubic-bezier(.3, 1.6, .5, 1); }
.stufen .flagge { width: 26px; height: 30px; flex: none; }
/* Erfolgsbalken statt Stufen (Schätzen): Neuling [■■■□□□□□□□] Profi mit Zielflagge; Form statt nur Farbe: voll = gefüllt.
   Gefüllt von Orange über Gelb nach Grün (--fuellung, --rand setzt uebung.js je Abschnitt) */
.balken { display: inline-flex; align-items: center; gap: 10px; }
.balken .abschnitte { display: inline-flex; gap: 4px; }
.balken .abschnitte span { width: 26px; height: 20px; box-sizing: border-box; border: 2px solid #8a8a8a; border-radius: 3px; background: #fff; }
.balken .abschnitte span.voll { border-color: var(--rand); background: var(--fuellung); }
.balken .abschnitte span.neu { animation: huepfen 460ms cubic-bezier(.3, 1.6, .5, 1); }
.balken .abschnitte span.verloren { animation: verblassen 700ms ease-out; }
.balken .flagge { width: 26px; height: 30px; flex: none; }

/* ---------- Zeichnung ---------- */
#box { width: 100%; height: 160px; margin: 16px 0 8px; border: none; touch-action: none; }

/* ---------- Eingabe mit eigenem Ziffernfeld (Ableseübungen) ---------- */
.eingabe { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.eingabe-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.eingabe .zahlkarte { min-width: 3em; min-height: 1.5em; font-size: 26px; font-weight: bold; cursor: text; }
.eingabe .zahlkarte.leer::after { content: '?'; color: #8a8a8a; font-weight: 400; }
/* hat das Kärtchen den Fokus, kommen Tasten der (Hüllen-)Tastatur hier an */
.eingabe .zahlkarte:focus { outline: 3px solid #1b3fd8; outline-offset: 3px; }
.eingabe .zahlkarte.gut { color: #1a7a1a; border-color: #1a7a1a; background: #eaf4ea; }
.eingabe .zahlkarte.schlecht { color: #c00; border-color: #c00; background: #fbeceb; }
.ziffern { display: flex; flex-wrap: wrap; gap: 6px; }
/* Ziffern-Tasten in zartem Blau: Blau ist die Farbe für alles, was man antippt */
.ziffern button { min-width: 54px; min-height: 54px; padding: 0; font-size: 24px; font-weight: bold;
                  background: #e8eefc; color: #1a2240; border: 2px solid #6f88d8; }   /* Rand 3,4 : 1 zu Weiß */
.ziffern button:hover:not(:disabled) { background: #d6e1fa; border-color: #4f6cd0; }
.ziffern button:active:not(:disabled) { background: #c4d3f7; }
.ziffern button:disabled { background: #f4f6fb; color: #a9b0c2; border-color: #e1e6f2; }
.ziffern .loeschen svg { width: 28px; height: 28px; display: block; margin: auto; }

/* ---------- Fuß: Rückmeldung und Knopf als Paar; oben bündig, damit der Knopf bei langer Rückmeldung stehen bleibt ---------- */
.fuss { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px 16px; min-height: 54px; }
#rueck { flex: 1 1 18em; line-height: 1.4; padding: 12px 16px; border: 1px solid transparent; border-radius: 8px; }
#rueck:empty { padding: 0; border: 0; }
#rueck.gut, #rueck.schlecht { display: flex; align-items: flex-start; gap: 12px; }
#rueck svg { width: 26px; height: 26px; flex: none; margin-top: 1px; }   /* Haken / Kreuz: Form statt nur Farbe */
#rueck.gut { color: #1a7a1a; background: #eaf4ea; border-color: #b9dbb9; }
#rueck.schlecht { color: #c00; background: #fbeceb; border-color: #efbcbc; }
#rueck .stufenzeile { font-weight: bold; }
#knopf { margin-left: auto; }
/* nach dem Abschluss: „Nochmal üben“ nur als kleiner Textlink, die nächste Übung steht im Vordergrund */
#knopf.textlink { background: none; border-color: transparent; color: #1b3fd8; font-size: 18px; padding-inline: 8px;
                  text-decoration: underline; text-underline-offset: 3px; }
#knopf.textlink:hover { background: #e8eefc; border-color: transparent; }

/* ---------- Knöpfe ---------- */
button { font: inherit; font-size: 20px; line-height: 1.4; min-height: 54px; padding: 10px 24px; border: 2px solid #1b3fd8; border-radius: 6px;
         background: #1b3fd8; color: #fff; cursor: pointer; }
button:hover:not(:disabled) { background: #1633b4; border-color: #1633b4; }
button:active:not(:disabled) { translate: 0 1px; }
button:disabled { background: #ececec; border-color: #c4c4c4; color: #5f5f5f; cursor: default; }
button:focus-visible { outline: 3px solid #1b3fd8; outline-offset: 3px; }

/* ---------- Startseite: Ziel und Spielregeln, liegt über der Übung, bis „Los geht's“ getippt wird ---------- */
#start { position: absolute; inset: 0; z-index: 10; box-sizing: border-box; padding: 12px 16px; background: #fff;
         display: flex; flex-direction: column; gap: 16px; }
#start[hidden] { display: none; }
.start-kopf, .regeln { flex: none; }
.start-kopf { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 16px 18px;
              border-radius: 8px; background: #f2f2f2; overflow: hidden; }
.start-kopf h1 { margin: 0; font-size: 28px; line-height: 1.2; }
.start-kopf .flagge { width: 40px; height: 46px; flex: none; }
.regeln { list-style: none; margin: 0; padding: 0 4px; display: grid; gap: 12px; }
.regeln li { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; line-height: 1.35; }
.regeln svg { width: 48px; height: 32px; }
#los { align-self: flex-end; }

/* ---------- Abschluss: eine Zeile, damit der Kasten seine Höhe behält ---------- */
.geschafft { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.geschafft-titel { margin: 0; font-size: 26px; line-height: 1.2; color: #1a7a1a; display: flex; align-items: center; gap: 8px; }
.geschafft-titel svg { width: 28px; height: 28px; flex: none; }
.geschafft-text { margin: 0; }
.erscheint { animation: erscheinen 500ms cubic-bezier(.16, 1, .3, 1) both; }
/* Konfetti im Kopfkasten beim Abschluss: fliegt aus Haken und Zielflagge, fällt und verblasst (einmal, ~2 s) */
.kopf > #aufgabe, .kopf > .stand { position: relative; z-index: 2; }   /* Text bleibt vor dem Konfetti lesbar */
.konfetti { position: absolute; width: 8px; height: 13px; border-radius: 2px; pointer-events: none; z-index: 1; opacity: 0;
            animation: konfetti 1900ms cubic-bezier(.2, .7, .4, 1) both; }
.konfetti.rund { width: 9px; height: 9px; border-radius: 50%; }

@keyframes huepfen { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes erscheinen { from { opacity: 0; translate: 0 8px; } }
@keyframes verblassen { from { background: var(--fuellung); border-color: var(--rand); } }
@keyframes konfetti {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.4) rotate(0deg); }
  35%  { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(calc(var(--dreh) * .4)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * 1.2), calc(-50% + var(--dy) + var(--fall))) scale(1) rotate(var(--dreh)); }
}
@media (prefers-reduced-motion: reduce) {
  .stufen .punkt.neu, .erscheint, .balken .abschnitte span { animation: none; }
  .konfetti { display: none; }
}