/* Modul-Spezialoptik 450_audio_kommandos — alles Uebrige deckt assets/css/style.css ab.
   Geprueft am 2026-09-03: .datenschutz-box, .dropzone, .fortschritt* existieren global NICHT
   (sie stehen nur in kapitel/410_deine_daten/stil.css) und werden daher hier erneut definiert. */

/* [hidden] muss auch dann greifen, wenn eine eigene Regel display:flex/grid setzt */
[hidden]{display:none!important}

/* ---------- Datenschutz-Box: Kernversprechen der Kategorie, bewusst auffaellig ---------- */
.datenschutz-box{background:#fff;border:2px solid var(--hk-gruen);border-left:8px solid var(--hk-gruen);
  border-radius:var(--hk-radius);padding:1.1rem 1.2rem;margin:1.2rem 0;box-shadow:var(--hk-schatten)}
.datenschutz-box h2{color:var(--hk-gruen-dunkel);font-size:1.25rem;margin-top:0}

/* ---------- Spektrogramm: das "Bild des Klangs" ---------- */
.spek-rahmen{background:#101418;border:1px solid var(--hk-rahmen);border-radius:var(--hk-radius);
  padding:.6rem;margin:.8rem 0}
.spek-rahmen canvas{display:block;width:100%;image-rendering:auto;border-radius:6px;background:#101418}
.spek-achsen{display:flex;justify-content:space-between;font-size:.75rem;color:#8a919c;
  font-family:'Courier New',monospace;margin-top:.35rem}
.spek-hinweis{font-size:.85rem;color:var(--hk-text-soft);text-align:center;margin-top:.3rem}

/* ---------- Erkanntes Wort: gross, damit man es vom anderen Zimmerende sieht ---------- */
.erkannt-feld{background:var(--hk-blau-hell);border:2px solid var(--hk-blau);border-radius:var(--hk-radius);
  padding:1rem;margin:.9rem 0;text-align:center}
.erkannt-gross{display:block;font-size:clamp(2rem,10vw,3.4rem);font-weight:700;color:var(--hk-blau);
  line-height:1.15;overflow-wrap:anywhere;font-family:'Courier New',monospace}
.erkannt-deutsch{display:block;font-size:1.05rem;color:var(--hk-text-soft);margin-top:.2rem}

/* Top-3-Balken: min-width:0 verhindert das Sprengen des Rasters auf schmalen Handys */
.balken-liste{display:grid;gap:.35rem;margin:.8rem 0}
.balken-zeile{display:grid;grid-template-columns:minmax(0,5.5rem) minmax(0,1fr) minmax(0,3rem);
  align-items:center;gap:.5rem;font-size:.88rem}
.balken-zeile .b-wort{font-family:'Courier New',monospace;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.balken-spur{min-width:0;height:16px;background:var(--hk-grau-hell);border:1px solid var(--hk-rahmen);
  border-radius:999px;overflow:hidden}
.balken-fuell{height:100%;width:0;background:var(--hk-blau);transition:width .12s linear}
.balken-zeile.spitze .balken-fuell{background:var(--hk-gruen)}
.balken-zeile .b-wert{font-family:'Courier New',monospace;color:var(--hk-text-soft);text-align:right}

/* ---------- Mini-Spiel ---------- */
.spielfeld{background:#fff;border:2px solid var(--hk-blau);border-radius:var(--hk-radius);padding:.5rem;margin:.9rem 0}
.spielfeld canvas{display:block;width:100%;border-radius:6px}
.spiel-zeile{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;align-items:center;
  font-size:.9rem;color:var(--hk-text-soft);margin-top:.4rem}
.spiel-zaehler{font-family:'Courier New',monospace;font-weight:700;color:var(--hk-blau)}
/* Ersatz-Steuerung: jedes Feld >= 44px, damit es auch mit dem Daumen geht */
.steuer-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,88px),1fr));
  gap:.5rem;margin:.8rem 0;max-width:420px;margin-inline:auto}
.steuer-gitter .btn{min-height:44px;text-align:center;font-family:'Courier New',monospace}

/* ---------- Werkzeug 2: eigene Aufnahmen ---------- */
.aufnahme-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:1rem;margin:1rem 0}
.aufnahme-karte{min-width:0;background:#fff;border:2px solid var(--hk-blau);border-radius:var(--hk-radius);
  padding:.9rem 1rem;text-align:center}
.aufnahme-karte.neben{border-color:#8a919c}
.aufnahme-karte h4{margin:0 0 .2rem;color:var(--hk-blau);overflow-wrap:anywhere}
.aufnahme-karte.neben h4{color:#5a6270}
.aufnahme-karte .btn{width:100%;min-height:44px;margin-top:.5rem}
.zaehler-punkte{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:.5rem 0 .2rem}
.zaehler-punkte i{width:14px;height:14px;border-radius:50%;border:2px solid var(--hk-rahmen);background:#fff}
.zaehler-punkte i.voll{background:var(--hk-gruen);border-color:var(--hk-gruen-dunkel)}
.zaehler-text{font-size:.85rem;color:var(--hk-text-soft);font-family:'Courier New',monospace}
.aufnahme-laeuft{color:var(--hk-rot);font-weight:700}

/* ---------- Fortschritt (Laden + Training) ---------- */
.fortschritt{height:22px;background:var(--hk-grau-hell);border:1px solid var(--hk-rahmen);
  border-radius:999px;overflow:hidden;margin:.8rem 0 .3rem}
.fortschritt-balken{height:100%;width:0;background:linear-gradient(90deg,var(--hk-blau),var(--hk-blau-dunkel));
  transition:width .15s linear}
/* unbestimmter Modus: fuer das Modell-Laden, dessen Fortschritt der Wrapper nicht meldet */
.fortschritt-balken.unbestimmt{width:35%;animation:hk450-wandern 1.2s ease-in-out infinite}
@keyframes hk450-wandern{0%{margin-left:-35%}100%{margin-left:100%}}
.fortschritt-text{font-size:.85rem;color:var(--hk-text-soft);font-family:'Courier New',monospace;
  text-align:center;margin-bottom:.5rem;overflow-wrap:anywhere}

/* ---------- Datei-Notnagel (kein Mikro): Drag-&-Drop mit Klick-Fallback ---------- */
.dropzone{border:3px dashed var(--hk-blau);background:var(--hk-blau-hell);border-radius:var(--hk-radius);
  padding:1.3rem 1rem;margin:.8rem 0;text-align:center;cursor:pointer;color:var(--hk-blau);
  min-height:44px;transition:background .15s,border-color .15s}
.dropzone:hover{background:#dfe9ff}
.dropzone:focus-visible{outline:3px solid var(--hk-rot);outline-offset:2px}
.dropzone.dragover{background:#fff;border-color:var(--hk-gruen);color:var(--hk-gruen-dunkel)}
.dropzone-symbol{font-size:2rem;line-height:1.2}
.dropzone-hinweis{font-size:.85rem;color:var(--hk-text-soft);margin-top:.3rem}

/* ---------- Vokabel-Tabelle: 18 Woerter, auf dem Handy als Kacheln ---------- */
.vokabel-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,132px),1fr));
  gap:.4rem;margin:.9rem 0}
.vokabel{min-width:0;background:#fff;border:1px solid var(--hk-rahmen);border-radius:8px;
  padding:.35rem .55rem;font-size:.85rem;overflow-wrap:anywhere}
.vokabel b{font-family:'Courier New',monospace;color:var(--hk-blau)}
.vokabel span{color:var(--hk-text-soft)}
.vokabel.steuer{background:var(--hk-blau-hell);border-color:var(--hk-blau)}

@media (max-width:600px){
  .erkannt-feld{padding:.7rem}
  .balken-zeile{grid-template-columns:minmax(0,4.5rem) minmax(0,1fr) minmax(0,2.6rem);font-size:.8rem}
}