/* Hero „Die Strichprobe“: ein Bildschirm hoch, läuft von selbst. Querformat: Text links. Hochformat: Text oben, Steuerung unten. */
.held { position: relative; height: 100svh; min-height: 620px; max-height: 1100px; background: var(--stein); overflow: hidden; }
.held-bühne { position: absolute; inset: 0; }
.held-bilder { position: absolute; inset: 0; }
.held-stand, .held-film { position: absolute; inset: 0; width: 100%; height: 100%; }
.held-stand img { width: 100%; height: 100%; object-fit: cover; }
.held-stand { opacity: 0; }
.held-stand.an { opacity: 1; z-index: 1; }
.held-stand.weich { transition: opacity .75s var(--aus-quart); }
.held-film { object-fit: cover; opacity: 0; z-index: 2; pointer-events: none; }
.held-film.an { opacity: 1; }
/* Lesbarkeit: dunkle Kante, wo der Text steht */
.held-bilder::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 15, 13, .82) 0%, rgba(14, 15, 13, .55) 32%, rgba(14, 15, 13, 0) 56%),
              linear-gradient(0deg, rgba(14, 15, 13, .78) 0%, rgba(14, 15, 13, 0) 26%),
              linear-gradient(180deg, rgba(14, 15, 13, .55) 0%, rgba(14, 15, 13, 0) 18%); }

/* Display der Waage: Zahl aus HTML, liegt auf dem leeren Display im Bild */
.held-display { position: absolute; z-index: 4; margin: 0; transform: translate(-50%, -50%); font-family: var(--text-font); font-weight: 600; letter-spacing: .04em;
  color: #DDF2E6; text-shadow: 0 0 6px rgba(190, 255, 220, .55); opacity: 0; transition: opacity .4s; white-space: nowrap; pointer-events: none; }
.held-display.an { opacity: 1; }

.held-text { position: absolute; z-index: 5; left: var(--rand); top: 50%; transform: translateY(-46%); width: min(560px, 44vw); display: grid; gap: 22px; }
.held h1 { font-size: clamp(3rem, 6.4vw, 6rem); line-height: .98; }
.held-zeile { display: block; }
.held-unter { font-size: clamp(1.05rem, 1.35vw, 1.22rem); color: var(--hell-2); max-width: 30em; }
.held-kurs { font-size: .95rem; color: var(--hell-3); }
.held-kurs b { color: var(--gold-hell); font-weight: 750; font-size: 1.05rem; }
.held-kurs-zeit { display: inline-block; margin-left: 6px; font-size: .82rem; }
.held-knöpfe { margin-top: 4px; }

/* Schritte und Steuerung unten rechts */
.held-schritte { position: absolute; z-index: 5; right: var(--rand); bottom: 108px; width: min(340px, 30vw); list-style: none; margin: 0; padding: 0; min-height: 76px; }
.held-schritt { position: absolute; inset: auto 0 0 0; display: grid; gap: 4px; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--aus-expo); }
.held-schritt.an { opacity: 1; transform: none; transition-delay: .15s; }
.held-schritt b { font-family: var(--antiqua); font-weight: 400; font-size: 1.6rem; color: var(--gold-hell); }
.held-schritt span { color: var(--hell-2); font-size: 1rem; }
.held-steuer { position: absolute; z-index: 6; right: var(--rand); bottom: 40px; display: flex; gap: 6px; align-items: center; }
.held-steuer button { position: relative; min-height: 44px; min-width: 76px; padding: 0 14px; border: 1px solid rgba(216, 184, 120, .32); border-radius: var(--ecke);
  background: rgba(14, 15, 13, .55); color: var(--hell-2); font-weight: 650; font-size: .92rem; cursor: pointer; overflow: hidden; }
.held-steuer button.an { color: var(--hell); border-color: rgba(216, 184, 120, .7); }
.held-steuer button i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--gold-hell); transform: scaleX(0); transform-origin: left; }
.held-steuer button.an i { transform: scaleX(1); }
.held-steuer button.läuft i { animation: held-halt var(--halt, 6000ms) linear forwards; }
@keyframes held-halt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.held-steuer .held-pause { min-width: 44px; width: 44px; padding: 0; display: grid; place-items: center; }
.held-pause .ic { width: 18px; height: 18px; grid-area: 1 / 1; }
.held-pause .ic:last-child, .held.pausiert .held-pause .ic:first-child { display: none; }
.held.pausiert .held-pause .ic:last-child { display: block; }
.held-muster { position: absolute; z-index: 5; left: var(--rand); bottom: 18px; }

/* Einlauf */
.js .held-text > * { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--aus-expo), transform 1s var(--aus-expo); }
.js .held.bereit .held-text > * { opacity: 1; transform: none; }
.js .held.bereit .held-text > :nth-child(2) { transition-delay: .1s; }
.js .held.bereit .held-text > :nth-child(3) { transition-delay: .22s; }
.js .held.bereit .held-text > :nth-child(4) { transition-delay: .32s; }
.js .held.bereit .held-text > :nth-child(5) { transition-delay: .42s; }

/* Hochformat (Handy): Text oben, Bild in der Mitte, Steuerung und Knöpfe unten */
.held[data-format="h"] .held-bilder::after {
  background: linear-gradient(180deg, rgba(14, 15, 13, .82) 0%, rgba(14, 15, 13, .5) 30%, rgba(14, 15, 13, 0) 44%),
              linear-gradient(0deg, rgba(14, 15, 13, .9) 0%, rgba(14, 15, 13, .55) 20%, rgba(14, 15, 13, 0) 34%); }
.held[data-format="h"] .held-text { top: calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + 18px); transform: none; width: auto; right: var(--rand); gap: 14px; }
.held[data-format="h"] .held-text > * { transform: none; }
.held[data-format="h"] h1 { font-size: clamp(2.6rem, 12vw, 3.6rem); }
.held[data-format="h"] .held-unter { font-size: 1rem; line-height: 1.5; }
.held[data-format="h"] .held-knöpfe, .held[data-format="h"] .held-kurs { display: none; }
.held[data-format="h"] .held-schritte { left: var(--rand); right: var(--rand); width: auto; bottom: 150px; min-height: 60px; }
.held[data-format="h"] .held-schritt b { font-size: 1.3rem; }
.held[data-format="h"] .held-schritt span { font-size: .95rem; }
.held[data-format="h"] .held-steuer { left: var(--rand); right: var(--rand); bottom: 88px; }
.held[data-format="h"] .held-steuer button[data-ziel] { flex: 1; min-width: 0; }
.held[data-format="h"] .held-muster { bottom: 4px; font-size: .7rem; }
.held-handy-knopf { display: none; }
.held[data-format="h"] .held-handy-knopf { display: flex; position: absolute; z-index: 6; left: var(--rand); right: var(--rand); bottom: 26px; }
@media (max-height: 700px) { .held[data-format="h"] .held-unter { display: none; } }
@media (max-width: 1100px) and (min-aspect-ratio: 4/5) { .held-schritte { display: none; } }

/* Zwischenfassung (echtes Ladenfoto, bis die Prüf-Bilder freigegeben sind) */
.held.vorläufig .held-schritte, .held.vorläufig .held-steuer, .held.vorläufig .held-display, .held.vorläufig .held-film, .held.vorläufig .held-stand:not([data-k="0"]) { display: none; }
.held.vorläufig .held-stand img { object-position: 60% 70%; }
.held.vorläufig[data-format="h"] .held-stand img { object-position: 50% 60%; }
.held.vorläufig .held-bilder::after { background: linear-gradient(90deg, rgba(14, 15, 13, .9) 0%, rgba(14, 15, 13, .72) 36%, rgba(14, 15, 13, .1) 64%), linear-gradient(0deg, rgba(14, 15, 13, .8) 0%, rgba(14, 15, 13, 0) 30%), linear-gradient(180deg, rgba(14, 15, 13, .6) 0%, rgba(14, 15, 13, 0) 20%); }
.held.vorläufig[data-format="h"] .held-bilder::after { background: linear-gradient(180deg, rgba(14, 15, 13, .92) 0%, rgba(14, 15, 13, .78) 40%, rgba(14, 15, 13, .15) 62%), linear-gradient(0deg, rgba(14, 15, 13, .9) 0%, rgba(14, 15, 13, 0) 26%); }
.held.vorläufig .held-muster { display: none; }