/* Nur /ki-video/: Hero-Bühne „ein Spot, drei Formate" (16:9 → 9:16 → 1:1) mit echten stummen Ausschnitten aus dem Beispiel-Spot
   (seit 2026-11-14; vorher gezeichnete Szene, die für das KI-Video gehalten wurde). „KI-generiert" ist in den Ausschnitten eingebrannt.
   Ruhig (memory design-motion-stil): Wechsel alle 8 s, Überblendung 1,4 s, weiche Kurve, keine Federung.
   Nur Deckkraft + transform (GPU), kein Layout in der Animation. Pause-Knopf (WCAG 2.2.2) + Clips über js/ki-video.js.
   html[data-wenig] (Bewegung reduzieren): Formate blenden nur über, nur Standbilder (keine Clips). */
.kv-buehne { position: relative; aspect-ratio: 4 / 5; border-radius: 2rem; overflow: hidden; border: 1px solid rgb(var(--line));
  background: radial-gradient(120% 90% at 80% 10%, rgb(var(--accent) / .10), transparent 60%), rgb(var(--surface)); }
.kv-rahmen { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 1.1rem; overflow: hidden;
  border: 1px solid rgb(var(--ink) / .18); box-shadow: 0 30px 60px -30px rgb(var(--ink) / .35); background: #0b0b0c;
  opacity: 0; }
.kv-quer    { width: 90%; aspect-ratio: 16 / 9; opacity: 1; }
.kv-hoch    { height: 66%; aspect-ratio: 9 / 16; }
.kv-quadrat { width: 64%; aspect-ratio: 1; }
.kv-rahmen img, .kv-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kv-clip { opacity: 0; transition: opacity .6s ease; }
.kv-rahmen[data-laeuft] .kv-clip { opacity: 1; }
/* Ohne JavaScript (kein Pause-Knopf möglich) steht das Querformat still; bewegt wird nur mit JS.
   Negative Verzögerung: das Querformat ist ab dem ersten Bild voll sichtbar (kein Einblenden von 0 → LCP), Takt bleibt 8 s. */
html.js .kv-rahmen { opacity: 0; animation: kv-format 24s cubic-bezier(.45,0,.55,1) infinite both; }
html.js .kv-quer    { animation-delay: -1.4s; }
html.js .kv-hoch    { animation-delay: 6.6s; }
html.js .kv-quadrat { animation-delay: 14.6s; }
@keyframes kv-format {
  0%     { opacity: 0; transform: scale(.965); }
  5.8%   { opacity: 1; transform: scale(1); }
  33.3%  { opacity: 1; transform: scale(1); }
  39.1%  { opacity: 0; transform: scale(1.02); }
  100%   { opacity: 0; transform: scale(1.02); }
}

/* Kopfzeile der Bühne: Beschriftung links, Pause-Knopf rechts */
.kv-kopf { position: absolute; top: .875rem; left: .875rem; right: .875rem; z-index: 2; display: flex; align-items: flex-start;
  justify-content: space-between; gap: .5rem; }
.kv-label { margin: 0; max-width: 15.5rem; padding: .3rem .65rem; border-radius: .6rem; border: 1px solid rgb(var(--line));
  background: rgb(var(--bg) / .9); color: rgb(var(--ink)); font: 400 .75rem/1.35 Inter, system-ui, sans-serif; }
.kv-label strong { font-weight: 600; }
.kv-nb { white-space: nowrap; }
.kv-pause { flex: none; }
/* Sehr schmal (< 380 px): Knopftext nur für Screenreader, sonst stößt die Kopfzeile an den Rand (gemessen 320 px: 4 px drüber) */
@media (max-width: 379px) { .kv-pause [data-kv-pause-text] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* Formatbeschriftung unten, im selben Takt wie die Rahmen */
.kv-formate { position: absolute; left: 0; right: 0; bottom: 0; height: 3.75rem; }
.kv-format { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.25rem;
  opacity: 0; }
.kv-format:first-child { opacity: 1; }
html.js .kv-format { opacity: 0; animation: kv-format 24s cubic-bezier(.45,0,.55,1) infinite both; }
html.js .kv-format:nth-child(1) { animation-delay: -1.4s; }
html.js .kv-format:nth-child(2) { animation-delay: 6.6s; }
html.js .kv-format:nth-child(3) { animation-delay: 14.6s; }

.kv-pause { display: none; }
html.js .kv-pause { display: inline-flex; }
.kv-buehne[data-angehalten] *, .kv-buehne[data-angehalten] *::after { animation-play-state: paused !important; }

/* „Beispiel ansehen": springt zum Spot (#beispiel-spot) und startet ihn stumm (js/ki-video.js) */
.kv-ansehen { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem; padding: .8rem 1.4rem; border-radius: 999px;
  background: rgb(var(--accent)); color: rgb(var(--bg)); font-weight: 600; text-decoration: none; transition: filter .2s ease; }
.kv-ansehen:hover { filter: brightness(1.12); }
.kv-ansehen:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 3px; }
.kv-ansehen svg { width: .8rem; height: .8rem; }
#beispiel-spot { scroll-margin-top: 6rem; }

/* Spot im Vollbild: schwarz statt Seitenfarbe (vorher bg-ink = im dunklen Modus fast weiß → weiße Balken), ohne Rundung und Rand.
   :fullscreen und :-webkit-full-screen getrennt — ein unbekannter Selektor würde sonst die ganze Regel verwerfen. */
.kv-spot { background: #000; }
.kv-spot:fullscreen { border: 0; border-radius: 0; background: #000; object-fit: contain; }
.kv-spot:-webkit-full-screen { border: 0; border-radius: 0; background: #000; object-fit: contain; }
.kv-spot::backdrop { background: #000; }

/* Bewegung reduzieren: nur Überblenden, keine Raumbewegung */
html.js[data-wenig] .kv-rahmen, html.js[data-wenig] .kv-format { animation-name: kv-format-sanft; }
@keyframes kv-format-sanft { 0% { opacity: 0; } 5.8% { opacity: 1; } 33.3% { opacity: 1; } 39.1% { opacity: 0; } 100% { opacity: 0; } }