/* Anprobe (Stufe 2, 21.10.2026). Nur für anprobe.html, braucht stil.css davor (Farben, Schriften, .knopf, .chip).
   Aufbau wie die Produktseite: links groß das Foto, rechts nur Text und Bedienung. Am Handy untereinander.
   Keine Schatten, keine Bewegung, eckige Knöpfe, runde Filter-Knöpfe wie im Shop. */

/* --ratio = Breite / Höhe des Fotos (setzt anprobe.js). Ohne Foto 4:5 wie die Platzhalter.
   --maxh = größte Höhe der Fläche, damit Foto und Knopf darunter zusammen auf den Bildschirm passen. */
.anprobe {
  --ratio: 0.8;
  --maxh: max(420px, calc(100vh - 360px));
  padding: 0 var(--rand) 96px;
}

/* Foto und Bedienung als ruhiger Block in der Mitte, die Spalte des Fotos ist genau so breit wie das Foto */
.anprobe-feld {
  display: grid;
  justify-content: center;
  grid-template-columns: minmax(0, calc(var(--maxh) * var(--ratio))) minmax(300px, 380px);
  grid-template-areas:
    "buehne kopf"
    "buehne steuer";
  grid-template-rows: auto 1fr;
  column-gap: 56px;
  align-items: start;
}
.anprobe-kopf { grid-area: kopf; max-width: 380px; }
.anprobe-buehne { grid-area: buehne; min-width: 0; }
.anprobe-steuer { grid-area: steuer; max-width: 380px; min-width: 0; }

.anprobe-kopf h1 {
  font-family: var(--grotesk);
  font-size: 30px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.anprobe-unter { margin: 10px 0 0; }

/* ---------- Umschalter Model 1 · Model 2 (kleine Textknöpfe über dem Foto) ---------- */
.model-wahl {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  min-height: 32px;
}
.model-knopf {
  min-height: 32px;
  padding: 0 4px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--grotesk);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau-text);
}
.model-knopf:first-child { padding-left: 0; }
.model-knopf:hover { color: var(--tinte); }
.model-knopf[aria-pressed="true"] { color: var(--tinte); text-decoration: underline; text-underline-offset: 5px; }
.model-trenner { color: var(--grau); }

/* ---------- Fläche mit Foto ---------- */
.buehne {
  position: relative;
  width: min(100%, calc(var(--maxh) * var(--ratio)));
  aspect-ratio: var(--ratio);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-hell);
  touch-action: none;  /* Finger bewegen das Stück, nicht die Seite. Gescrollt wird neben der Fläche. */
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.buehne.zieht, .buehne.zieht .stueck-auf { cursor: grabbing; }

.buehne-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* Lage setzt anprobe-daten.js (left, top, width in Prozent, Drehung um den Aufhängepunkt) */
.stueck-auf {
  position: absolute;
  z-index: 2;
  height: auto;
  max-width: none;
  cursor: grab;
  -webkit-user-drag: none;
  user-select: none;
  will-change: transform;
}
.stueck-auf[hidden] { display: none; }
/* Durchstich (22.10.2026): dasselbe Foto über den Ohrringen, sichtbar nur am Ohrläppchen (Maske setzt anprobe-daten.js).
   So liegt das Ohr vor dem oberen Teil der Creole. Klicks gehen durch auf das Stück. */
.abdeckung {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.abdeckung[hidden] { display: none; }
.stueck-auf:focus { outline: none; }
.stueck-auf:focus-visible, .buehne.zwei .stueck-auf.aktiv:focus-visible { outline: 1px dashed rgba(17, 17, 17, 0.7); outline-offset: 2px; }
/* Während die Erkennung läuft: Foto leicht zurückgenommen */
.buehne.sucht .buehne-foto { opacity: 0.6; }

.buehne .platzhalter { z-index: 4; }
/* "Model folgt": ruhige Zeile oben in der Mitte des Platzhalters */
.buehne-folgt {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau-text);
}
.buehne-folgt[hidden], .buehne-ki[hidden], .buehne-meldung[hidden] { display: none; }
/* Model 1: unten rechts helle Wand und schwarzes Top, weiße Schrift kaum lesbar. Darum helles Feld wie beim Schild "Platzhalter" (22.10.2026) */
.buehne-ki.dunkel { color: #111; text-shadow: none; background: rgba(255, 255, 255, 0.85); padding: 3px 6px; }
/* KI-Hinweis wie beim Film, hier dauerhaft, weil das Foto stehen bleibt */
.buehne-ki {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: 12px;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
/* Hinweise auf dem Foto (Gesicht wird gesucht, kein Gesicht gefunden) */
.buehne-meldung {
  position: absolute;
  z-index: 5;
  left: 10px;
  right: 10px;
  top: 10px;
  margin: 0;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

/* ---------- Eigenes Foto ---------- */
.hochladen {
  width: min(100%, calc(var(--maxh) * var(--ratio)));
  text-align: center;
}
.hochladen .knopf { margin-top: 16px; }
.hochladen .text-knopf { margin-top: 4px; }
.hochladen-hinweis { margin: 6px 0 0; font-size: 11px; color: var(--grau-text); }
.hochladen .text-knopf + .hochladen-hinweis { margin-top: 2px; }

/* Knopf als Umriss (Share neben Save image) */
.knopf.knopf-umriss { margin-top: 8px; background: var(--papier); color: var(--tinte); }

/* Einrichten (nur mit #einrichten) */
.einrichten { margin-top: 18px; padding: 12px; border: 1px dashed #bdbdbb; font-size: 11px; }
.einrichten[hidden] { display: none; }
.einrichten p { margin: 0 0 8px; }
.einrichten textarea { width: 100%; margin: 0 0 8px; font: 11px var(--mono); border: 1px solid var(--linie); padding: 6px; resize: vertical; }

/* ---------- Bedienung rechts ---------- */
.anprobe-steuer { padding-top: 28px; }
.anprobe-block { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.anprobe-block legend { padding: 0; }
.anprobe-block .wahl-label { margin-bottom: 8px; }
.anprobe-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }

/* Filter-Knöpfe aus dem Shop (.chip) als echte Knöpfe, mit 40 bis 44 px Berührfläche */
.anprobe .chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  background: none;
  color: var(--tinte);
  cursor: pointer;
}
.anprobe .chip[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.anprobe .chip:disabled { color: #9a9a98; border-color: var(--linie); cursor: not-allowed; }

.text-knopf {
  min-height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-knopf[hidden] { display: none; }

/* Wahl des Stücks: kleines Bild, Name, Platz. 4 je Reihe, Knöpfe oben bündig (align-items: start) */
.stueck-wahl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; align-items: start; }
.stueck-knopf {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  min-width: 0;
}
.stueck-mini {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: var(--bg-boden);
  outline: 1px solid transparent;
  outline-offset: -1px;
}
.stueck-mini img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.stueck-knopf:hover .stueck-mini { outline-color: #bdbdbb; }
.stueck-knopf[aria-checked="true"] .stueck-mini { outline-color: var(--tinte); }
.stueck-name {
  display: block;
  margin-top: 6px;
  font-family: var(--grotesk);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.stueck-knopf[aria-checked="true"] .stueck-name { text-decoration: underline; text-underline-offset: 3px; }
.stueck-platz { display: block; margin-top: 2px; font-size: 9px; color: var(--grau-text); }
.stueck-platz .ganz { white-space: nowrap; }

/* Regler: dünne Linie, eckiger Griff, 44 px hoch zum Greifen */
.regler { margin-top: 6px; }
.regler-kopf { display: flex; justify-content: space-between; align-items: baseline; }
.regler output { font-size: 11px; }
.regler input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.regler input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--tinte); }
.regler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6.5px;
  background: var(--tinte);
  border: 0;
  border-radius: 0;
}
.regler input[type="range"]::-moz-range-track { height: 1px; background: var(--tinte); }
.regler input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: var(--tinte); border: 0; border-radius: 0; }
.regler input[type="range"]:disabled { cursor: not-allowed; opacity: 0.35; }

.anprobe-knoepfe { margin-top: 14px; }
.anprobe .knopf-hinweis { color: var(--grau-text); }
.anprobe details.groessenhilfe p { color: var(--grau-text); }

/* nur für Vorlese-Programme sichtbar (Dateiwahl wird über den Knopf geöffnet) */
.nur-leser {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Handy und Tablet ---------- */
@media (max-width: 900px) {
  .anprobe-feld { column-gap: 32px; grid-template-columns: minmax(0, calc(var(--maxh) * var(--ratio))) minmax(280px, 340px); }
}
@media (max-width: 760px) {
  .anprobe-feld {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kopf" "buehne" "steuer";
    grid-template-rows: auto;
  }
  .anprobe-kopf, .anprobe-steuer { max-width: none; }
  .anprobe-kopf { margin-bottom: 12px; }
  .anprobe-kopf h1 { font-size: 24px; }
  /* Fläche höchstens gut 60 % der Bildschirmhöhe, damit man daneben und darunter noch wischen kann */
  .anprobe { --maxh: 60vh; }
  @supports (height: 1svh) { .anprobe { --maxh: 60svh; } }
  .model-wahl, .buehne, .hochladen { margin-left: auto; margin-right: auto; }
  .model-wahl { width: min(100%, calc(var(--maxh) * var(--ratio))); }
  .anprobe-steuer { padding-top: 28px; }
  .anprobe .chip, .text-knopf { min-height: 44px; }
  .model-knopf { min-height: 44px; }
}