/* Modul-Spezialoptik 480_style_transfer — alles Uebrige deckt assets/css/style.css ab.
   Geprueft am 2026-09-03: .datenschutz-box, .dropzone, .spinner, .stil-galerie,
   .vektor-balken existieren global NICHT und werden daher hier definiert.
   (Die Datenschutz- und Dropzone-Optik ist bewusst identisch zu 410 — gleiche
    Bausteine sollen in der ganzen 4xx-Reihe gleich aussehen.) */

/* ---------- Datenschutz-Box: Kernversprechen der Kategorie "Interaktiv" ---------- */
.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}

/* ---------- Dropzones (Pflicht der Kategorie) ----------
   ZWEI Zonen auf einer Seite muessen unterscheidbar sein: die Inhalts-Zone ist
   blau (dein Foto), die Stil-Zone violett (der Malstil) — plus je ein Symbol. */
.dropzone{border:3px dashed var(--hk-blau);background:var(--hk-blau-hell);border-radius:var(--hk-radius);
  padding:1.4rem 1rem;margin:1rem 0;text-align:center;cursor:pointer;color:var(--hk-blau);
  min-height:44px;transition:background .15s,border-color .15s,transform .08s}
.dropzone:hover{background:#dfe9ff}
.dropzone:focus{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}

/* Stil-Zone: eigene Farbe, damit man die beiden Zonen nie verwechselt */
.dropzone.dz-stil{border-color:#7b3fa0;background:#f6f0fb;color:#5f2f7d}
.dropzone.dz-stil:hover{background:#efe4f7}
.dropzone.dz-stil.gewaehlt{border-style:solid;border-color:var(--hk-gruen);background:var(--hk-gruen-hell)}

/* ---------- Lade-/Rechenanzeige ---------- */
.lade-zeile{display:flex;align-items:center;gap:.6rem;margin:.8rem 0 .2rem;
  font-family:'Courier New',monospace;font-size:.9rem;color:var(--hk-text-soft)}
.spinner{flex:0 0 auto;width:20px;height:20px;border:3px solid var(--hk-rahmen);
  border-top-color:var(--hk-blau);border-radius:50%;animation:hk480dreh .8s linear infinite}
@keyframes hk480dreh{to{transform:rotate(360deg)}}
.modelle-fertig{color:var(--hk-gruen-dunkel);font-weight:600;margin:.6rem 0 0}
.geduld{font-size:.85rem;color:var(--hk-text-soft);margin:.2rem 0 0;line-height:1.6}

/* ---------- Stil-Galerie: 4 anklickbare Kacheln ----------
   minmax(0,1fr) statt 1fr: sonst sprengt ein breites Bild bei 360 px das Gitter. */
.stil-galerie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:1rem 0}
.stil-kachel{min-width:0;display:block;padding:0;background:#fff;cursor:pointer;font-family:inherit;
  border:3px solid var(--hk-rahmen);border-radius:var(--hk-radius);overflow:hidden;
  transition:border-color .15s,transform .08s,box-shadow .15s}
.stil-kachel:hover{border-color:var(--hk-blau);transform:translateY(-2px);box-shadow:var(--hk-schatten)}
.stil-kachel:focus-visible{outline:3px solid var(--hk-rot);outline-offset:2px}
.stil-kachel img{display:block;width:100%;height:110px;object-fit:cover}
.stil-name{display:block;padding:.4rem .3rem;font-size:.85rem;line-height:1.35;
  color:var(--hk-text);font-weight:600;min-height:44px}
.stil-name small{font-weight:400;color:var(--hk-text-soft);font-size:.78rem}

/* Auswahl-Markierung: kraeftiger Rahmen + Haken, damit sie auch bei Sonne sichtbar ist */
.stil-kachel.gewaehlt{border-color:var(--hk-gruen);box-shadow:0 0 0 3px var(--hk-gruen-hell)}
.stil-kachel.gewaehlt .stil-name{background:var(--hk-gruen-hell);color:var(--hk-gruen-dunkel)}
.stil-kachel.gewaehlt .stil-name::after{content:' ✓'}
.galerie-quelle{font-size:.8rem;color:var(--hk-text-soft);margin:-.4rem 0 .6rem;line-height:1.5}

/* ---------- Kamera ---------- */
.kamera-zeile{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0}
.kamera-zeile .btn{min-height:44px}
#kamVideo{display:block;width:100%;max-width:420px;border-radius:var(--hk-radius);
  border:2px solid var(--hk-blau);background:#000;margin:.6rem 0}

/* ---------- Vorschauen ---------- */
.vorschau-zeile{display:flex;flex-wrap:wrap;gap:1rem;margin:.8rem 0 0}
.vorschau-karte{flex:1 1 220px;min-width:0}
.vorschau-karte canvas{display:block;width:auto;max-width:100%;height:auto;max-height:280px;
  border-radius:var(--hk-radius);border:1px solid var(--hk-rahmen);background:var(--hk-grau-hell)}
.vorschau-text{font-size:.85rem;color:var(--hk-text-soft);margin:.4rem 0 0;line-height:1.5;
  overflow-wrap:anywhere}

/* ---------- Ergebnis ---------- */
.ergebnis-flaeche{margin:1rem 0 0;text-align:center}
.ergebnis-flaeche canvas{display:inline-block;width:auto;max-width:100%;height:auto;
  border-radius:var(--hk-radius);border:2px solid var(--hk-blau);background:var(--hk-grau-hell)}
.ergebnis-flaeche .vorschau-text{text-align:center}
.speichern-hinweis{background:var(--hk-gelb-hell);border-left:4px solid #e0a800;border-radius:6px;
  padding:.7rem .9rem;margin:.8rem 0 0;font-size:.9rem;line-height:1.6}

/* ---------- Der Stil-Vektor als 100 Balken ---------- */
.vektor-balken{display:flex;align-items:flex-end;gap:1px;height:90px;background:#fff;
  border:1px solid var(--hk-rahmen);border-radius:8px;padding:5px;overflow:hidden}
.vektor-balken .vb{flex:1;min-width:1px;background:var(--hk-blau);border-radius:1px 1px 0 0}
.vektor-balken .vb.neg{background:var(--hk-rot)}
.vektor-balken:empty::before{content:'Die 100 Balken erscheinen nach der ersten Verwandlung …';
  color:var(--hk-text-soft);font-size:.8rem;margin:auto}
.vektor-satz{background:#fff;border-left:4px solid var(--hk-blau);border-radius:6px;
  padding:.7rem .9rem;margin:.7rem 0 0;line-height:1.7}

@media (min-width:640px){
  .stil-galerie{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stil-kachel img{height:130px}
}
@media (max-width:600px){
  .dropzone{padding:1.1rem .7rem}
  .vektor-balken{height:70px}
  .vorschau-karte canvas{max-height:220px}
}