/* 420_ziffern_erkennen — Modul-Spezialoptik.
   Alles Allgemeine (info-box/warn-box/erfolg-box/btn/code-block/output/quiz/tensor-shape)
   kommt aus assets/css/style.css und wird hier NICHT wiederholt.
   Grundregel dieser Datei: jedes Grid nur mit minmax(0,1fr) — sonst sprengt eine
   Ziffernkachel auf 360 px die Zeile. */

/* ---------------------------------------------- Fortschritt (Laden + Training) */
.fortschritt{position:relative;height:24px;background:var(--hk-grau-hell);
  border:1px solid var(--hk-rahmen);border-radius:999px;overflow:hidden;margin:.7rem 0}
.fortschritt-balken{height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--hk-blau),var(--hk-rot));transition:width .18s ease}
.fortschritt-text{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;
  align-items:center;justify-content:center;font-size:.8rem;font-weight:600;
  color:var(--hk-text);text-shadow:0 0 4px #fff,0 0 4px #fff}

/* ---------------------------------------------- Ziffern-Galerien (Beispiele + Testbilder) */
/* 4 Spalten am Handy, 6 ab Tablet — feste Spaltenzahl, damit nie etwas ueberlaeuft */
.ziffern-galerie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:1rem 0}
.ziffern-karte{min-width:0;background:#fff;border:1px solid var(--hk-rahmen);
  border-radius:8px;padding:.3rem;text-align:center}
.ziffern-karte canvas{display:block;width:100%;max-width:100%;height:auto;
  image-rendering:pixelated;background:#000;border-radius:4px}
.ziffern-karte .kachel-text{font-family:'Courier New',monospace;font-size:.78rem;
  font-weight:700;color:var(--hk-blau);margin-top:.25rem;line-height:1.3}
/* ehrliche Markierung der Vorhersagen: gruen = getroffen, rot = danebengelegen */
.ziffern-karte.treffer{border:2px solid var(--hk-gruen);background:var(--hk-gruen-hell)}
.ziffern-karte.treffer .kachel-text{color:var(--hk-gruen-dunkel)}
.ziffern-karte.fehler{border:2px solid var(--hk-rot);background:var(--hk-rot-hell)}
.ziffern-karte.fehler .kachel-text{color:var(--hk-rot-dunkel)}

/* ---------------------------------------------- Zwei-Spalten-Bloecke (Bild | Zahlen, Malen | Ergebnis) */
/* Mobil einspaltig, ab 760 px nebeneinander */
.paar-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;align-items:start;margin:1rem 0}
.paar-grid > div{min-width:0}
@media(min-width:760px){
  .paar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ziffern-galerie{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* Das eine grosse Beispielbild neben dem Zahlenraster */
.beispiel-ziffer{display:block;width:100%;max-width:190px;margin:0 auto;
  image-rendering:pixelated;background:#000;border-radius:8px;border:2px solid var(--hk-blau)}
/* Zahlenraster: 10 Zeilen a 10 Werte — am Handy kleiner, damit es ohne Scrollen passt */
.zahlenraster{font-size:.62rem;line-height:1.55;padding:.8rem .6rem}
@media(min-width:520px){ .zahlenraster{font-size:.82rem} }

/* ---------------------------------------------- Zeichenflaeche */
/* touch-action:none — sonst scrollt das Handy die Seite, statt zu malen */
.mal-canvas{display:block;width:100%;max-width:280px;aspect-ratio:1/1;margin:0 auto;
  background:#000;border:3px solid var(--hk-blau);border-radius:10px;
  cursor:crosshair;touch-action:none}
.mal-knoepfe{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:.8rem}
.mal-knoepfe .btn{min-height:44px}
.mal-hinweis{text-align:center;color:var(--hk-text-soft);font-size:.85rem;margin-top:.5rem}

/* Grosse Ergebnisziffer */
.gross-ziffer{font-size:clamp(3rem,18vw,5rem);font-weight:800;line-height:1;
  color:var(--hk-blau);text-align:center;font-family:'Courier New',monospace}
.gross-ziffer.leer{color:var(--hk-rahmen)}
.gross-genauigkeit{font-size:clamp(2rem,9vw,3rem);font-weight:800;line-height:1.1;
  color:var(--hk-gruen-dunkel);text-align:center;margin:.3rem 0}

/* ---------------------------------------------- Softmax-Balken 0-9 */
.wahr-liste{margin:.8rem 0}
.wahr-zeile{display:grid;grid-template-columns:1.5rem minmax(0,1fr) 3.6rem;gap:.5rem;
  align-items:center;margin:.25rem 0}
.wahr-ziffer{font-family:'Courier New',monospace;font-weight:700;font-size:1rem;text-align:center}
.wahr-spur{min-width:0;height:18px;background:var(--hk-grau-hell);
  border:1px solid var(--hk-rahmen);border-radius:999px;overflow:hidden}
.wahr-balken{height:100%;width:0%;background:var(--hk-blau);
  border-radius:999px;transition:width .15s ease}
.wahr-prozent{font-family:'Courier New',monospace;font-size:.78rem;
  text-align:right;color:var(--hk-text-soft)}
.wahr-zeile.spitze .wahr-balken{background:var(--hk-gruen)}
.wahr-zeile.spitze .wahr-ziffer,.wahr-zeile.spitze .wahr-prozent{color:var(--hk-gruen-dunkel);font-weight:700}