/* Modul-Spezialoptik 440_koerper_als_tensor — alles Uebrige deckt assets/css/style.css ab.
   Geprueft am 2026-09-03 gegen assets/css/style.css: .datenschutz-box, .dropzone, .spinner,
   .buehne, .pose-gitter, .hampel-* existieren global NICHT und werden daher hier definiert.
   Global vorhanden und deshalb NICHT wiederholt: .shape-badge, .arrow-down, .tabelle-scroll,
   .code-block, .info-box/.warn-box/.erfolg-box/.fehler-box, .btn*, .card, .interactive-box. */

/* ---------- [hidden] zuverlaessig ausblenden ----------
   Noetig, weil eigene display-Regeln (block/flex) die Browser-Vorgabe [hidden]{display:none}
   ueberschreiben wuerden — betrifft hier Video, Foto, Lade-Zeile und die Kamera-Buttons.
   Bewusst auf den Kapitelbereich dieser Seite begrenzt. */
.kapitel-inhalt [hidden]{display:none!important}

/* ---------- Datenschutz-Box: bewusst auffaelliger als .erfolg-box (Kernversprechen der Kategorie) ---------- */
.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}

/* ---------- Dropzone (Pflicht der Kategorie "Interaktiv") ---------- */
.dropzone{border:3px dashed var(--hk-blau);background:var(--hk-blau-hell);border-radius:var(--hk-radius);
  padding:1.4rem 1rem;margin:.8rem 0 0;text-align:center;cursor:pointer;color:var(--hk-blau);
  min-height:44px;transition:background .15s,border-color .15s,transform .08s}
.dropzone:hover,.dropzone:focus{background:#dfe9ff;outline:none}
.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);transform:scale(1.01)}
.dropzone-symbol{font-size:2.2rem;line-height:1.2}
.dropzone-hinweis{font-size:.85rem;color:var(--hk-text-soft);margin-top:.3rem}

/* ---------- Lade-Zeile mit Spinner (Modell-Lazy-Load) ---------- */
.lade-zeile{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:.8rem 0;
  color:var(--hk-blau);font-weight:600}
.spinner{flex:0 0 auto;width:22px;height:22px;border:3px solid var(--hk-blau-hell);
  border-top-color:var(--hk-blau);border-radius:50%;animation:hk-dreh .8s linear infinite}
@keyframes hk-dreh{to{transform:rotate(360deg)}}
/* Nutzer mit reduzierter Bewegung: Spinner steht still, Text bleibt aussagekraeftig */
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

/* ---------- Zwei Wege: Kamera oder Foto ---------- */
.wege-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:1rem;margin:.6rem 0 0}
.weg-karte{min-width:0;background:#fff;border:1px solid var(--hk-rahmen);border-radius:var(--hk-radius);
  padding:.9rem 1rem;box-shadow:var(--hk-schatten)}
.weg-karte h4{color:var(--hk-blau);margin:0 0 .15rem}
.weg-sub{font-size:.88rem;color:var(--hk-text-soft);margin:0}
.weg-hinweis{font-size:.85rem;color:var(--hk-text-soft);margin:.5rem 0 0}

/* ---------- Buehne (Video/Foto) + Tensor-Tabelle nebeneinander ---------- */
/* minmax(0,1fr) statt 1fr: sonst sprengt die breite Tabelle das Gitter auf dem Handy */
.pose-gitter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem;margin:1rem 0}
.buehne-spalte,.tensor-spalte{min-width:0}

/* Overlay-Canvas liegt deckungsgleich ueber Video bzw. Foto */
.buehne{position:relative;width:100%;background:#101418;border:2px solid var(--hk-blau);
  border-radius:var(--hk-radius);overflow:hidden;min-height:120px;line-height:0}
.buehne video,.buehne img{display:block;width:100%;height:auto}
/* Spiegelung NUR fuer die Kamera (Selfie-Gefuehl); die Punkte spiegelt modul.js rechnerisch mit */
.buehne.gespiegelt video{transform:scaleX(-1)}
.buehne canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.buehne-status{font-size:.85rem;color:var(--hk-text-soft);text-align:center;margin:.4rem 0 0;
  font-family:'Courier New',monospace;overflow-wrap:anywhere}

/* Kopfzeile ueber der Tabelle: der Kernsatz des Kapitels */
.tensor-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;background:var(--hk-blau-hell);
  border:1px solid var(--hk-blau);border-radius:var(--hk-radius);padding:.6rem .8rem;font-size:.92rem}
.tensor-fuss{font-size:.82rem;color:var(--hk-text-soft);margin:.3rem 0 0}

/* Tabellenzellen: Zahlen monospace + rechtsbuendig, damit Sprunghaftigkeit sichtbar wird */
#tensorTabelle td.zahl{font-family:'Courier New',monospace;text-align:right;white-space:nowrap}
#tensorTabelle td.nr{color:var(--hk-text-soft);font-family:'Courier New',monospace;width:2.2rem}
#tensorTabelle tr.schwach td{opacity:.45;font-style:italic}     /* Sicherheit < 0,30 */
#tensorTabelle tr.stark td.zahl{color:var(--hk-gruen-dunkel);font-weight:700}
#tensorTabelle th{position:sticky;top:0}                        /* Kopfzeile beim Scrollen sichtbar */

/* ---------- Der statische Bogen: Bild-Tensor -> [17,3] ---------- */
.bogen{margin:1rem 0}
.bogen-stufe{background:#fff;border:2px solid var(--hk-rahmen);border-radius:var(--hk-radius);
  padding:.7rem .9rem;text-align:center}
.bogen-stufe strong{display:block;margin-top:.1rem}
.bogen-stufe.hervor{border-color:var(--hk-rot);background:var(--hk-rot-hell)}
.bogen-sub{display:block;font-size:.85rem;color:var(--hk-text-soft);margin-top:.15rem}
/* globaler .arrow-down ist 1.5rem gross — hier steht Text drin, also kleiner */
.bogen .arrow-down{font-size:.92rem;color:var(--hk-text-soft);margin:.45rem 0}

/* ---------- Hampelmann-Zaehler ---------- */
.hampel-panel{background:var(--hk-blau-hell);border:2px solid var(--hk-blau);
  border-radius:var(--hk-radius);padding:1rem;margin:1.2rem 0;text-align:center}
.hampel-zaehler{font-size:clamp(3rem,14vw,5.5rem);font-weight:700;line-height:1;color:var(--hk-blau);
  font-family:'Courier New',monospace}
.hampel-label{font-size:1rem;color:var(--hk-text-soft);letter-spacing:.06em;text-transform:uppercase}
.hampel-zustand{margin-top:.6rem;font-weight:600;font-family:'Courier New',monospace;font-size:.9rem;
  color:var(--hk-text-soft);overflow-wrap:anywhere}
.hampel-zustand.hoch{color:var(--hk-gruen-dunkel)}
.hampel-zustand.runter{color:var(--hk-blau)}
.hampel-panel.treffer{animation:hk-puls .35s ease}
@keyframes hk-puls{50%{background:var(--hk-gruen-hell);border-color:var(--hk-gruen)}}
@media (prefers-reduced-motion:reduce){.hampel-panel.treffer{animation:none}}
.hampel-hinweis{font-size:.85rem;color:var(--hk-text-soft);margin:.6rem 0 0}

/* ---------- Mobil: alles untereinander, Touchziele >= 44px ---------- */
@media (max-width:820px){
  .pose-gitter{grid-template-columns:minmax(0,1fr)}
  .tabelle-scroll{max-height:none}
}
@media (max-width:600px){
  .dropzone{padding:1.1rem .7rem}
  #tensorTabelle th,#tensorTabelle td{padding:.35rem .4rem;font-size:.84rem}
}