/* Modul-Spezialoptik 430_objekterkennung — alles Allgemeine deckt assets/css/style.css ab.
   Kernstueck: die "Bildbuehne" (position:relative) mit deckungsgleichem Overlay-Canvas darueber. */

/* Pflicht-Datenschutzhinweis (Kategorie Interaktiv) — bewusst schlicht, aber nicht zu uebersehen */
.datenschutz-box{background:#e8f5e9;border:2px solid #28a745;border-radius:8px;
  padding:.9rem 1.1rem;margin:0 0 1.2rem 0;line-height:1.7}

/* --- Lade-Anzeige fuers Modell (19 MB, deshalb Lazy-Load per Klick) --- */
.lade-status{display:flex;align-items:center;gap:.7rem;justify-content:center;
  color:#0047AB;font-weight:600;margin:.6rem 0}
.spinner{display:inline-block;width:22px;height:22px;flex:0 0 22px;border-radius:50%;
  border:3px solid #cfd8e8;border-top-color:#0047AB;animation:hk430dreh .8s linear infinite}
@keyframes hk430dreh{to{transform:rotate(360deg)}}
/* Nutzer mit reduzierter Bewegung: Spinner steht still, Text traegt die Info */
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

/* --- Die zwei Wege: Foto oder Kamera (minmax(0,1fr) => kein Ueberlauf auf 360px) --- */
.wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:1rem;margin-top:.8rem}
.weg{min-width:0;background:#fff;border:1px solid #dee2e6;border-radius:8px;padding:.9rem}
@media (min-width:640px){.wege{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* --- Dropzone (in style.css NICHT vorhanden, deshalb hier; Klick-Fallback + Tastatur) --- */
.dropzone{border:2px dashed #0047AB;background:#f2f6fd;border-radius:8px;
  padding:1.4rem .8rem;text-align:center;cursor:pointer;min-height:44px;line-height:1.6}
.dropzone:hover,.dropzone:focus{background:#e3ecfb;outline:none}
.dropzone:focus{box-shadow:0 0 0 3px rgba(0,71,171,.25)}
.dropzone.dragover{background:#d7e4fa;border-style:solid}
.datei-info{font-size:.85rem;color:#666;margin:.5rem 0 0 0;word-break:break-all}

/* --- Bildbuehne: Bild/Video unten, Canvas exakt darueber --- */
.bildbuehne{position:relative;display:block;width:100%;max-width:640px;margin:1rem auto 0 auto;
  background:#101418;border-radius:8px;overflow:hidden;line-height:0}
.bildbuehne img,.bildbuehne video{display:block;width:100%;height:auto}
/* height:100% schlaegt die globale Regel img,canvas,video{height:auto} (hoehere Spezifitaet) */
.bildbuehne canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.buehne-leer{text-align:center;color:#888;font-size:.9rem;margin:1rem 0}

/* --- Reise des Bildes bis zum Tensor --- */
.reise{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:.5rem;
  align-items:center;margin:1rem 0}
.reise-schritt{min-width:0;background:#fff;border:2px solid #0047AB;border-radius:8px;
  padding:.7rem .5rem;text-align:center;font-size:.9rem}
.reise-schritt span{display:block;color:#666;font-size:.8rem;margin-top:.25rem;
  font-family:'Courier New',monospace;overflow-wrap:anywhere}
.reise-pfeil{text-align:center;color:#0047AB;font-weight:700;font-size:1.3rem}
@media (min-width:720px){.reise{grid-template-columns:repeat(7,auto);justify-content:center}}

/* --- Der komplette 80er-Katalog als Chips --- */
.klassen-liste{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}
.klassen-liste .klasse{background:#fff;border:1px solid #dee2e6;border-radius:12px;
  padding:.15rem .55rem;font-size:.8rem;color:#555}

/* Ergebnis-Ausgabe darf lang werden, aber nie die Seite sprengen */
#ergebnisOut{margin-top:.8rem;max-height:220px;overflow-y:auto;word-break:break-word}

@media (max-width:600px){
  .bildbuehne{margin-top:.8rem}
  .reise-pfeil{transform:rotate(90deg)}
}