/* ==========================================================================
   page-case-klassenlotterie.css · Case Klassenlotterie (/arbeiten/klassenlotterie, /en/work/klassenlotterie)
   Aus site.css: .case-hero, .player (K10), .case-player (VT-Ziel), .sheet (K5),
   .split/.stack, .quote, .acc-list/.deep, .next, .tag--ai, .finder.
   Hier nur: „Ein Spot, zwei Formate“ (exakt gleiche Höhe), Formatzeilen, Idee-Liste,
   Umsetzung als Zeitleiste, Making-of-Regler (K12, Komponente in site.css §19) neben der Reframe-Skizze,
   Shotliste mit Schnittleiste, Abschluss,
   Ankunft der Shorts nach dem Poster-Morph (nur bei View Transition).
   Kein Altersbadge, kein Vorschaltblock: beide Filme stehen direkt im HTML.
   ========================================================================== */

/* H1: „KI-Bildern“ nie am Bindestrich trennen (normaler Bindestrich statt U+2011, damit Suche und Snippet ihn lesen) */
.kl-nobr { white-space: nowrap; }

/* ---------- 1 · Kopf: Spot 16:9 + Shorts 9:16 ----------
   Spalten 256 : 81 = (16/9) : (9/16) → beide Player exakt gleich hoch.
   Höhe gedeckelt, damit H1, beide Player und Formatzeile in 1440 × 900 über dem Falz stehen. */
.kl-stage { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.kl-stage .kl-players { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.kl-film { display: grid; gap: 0.6rem; align-content: start; min-width: 0; margin: 0; }
.kl-film .player { width: 100%; }
.kl-film .player--tall { aspect-ratio: 9 / 16; }
/* Spot (16:9): Video schon beim Laden sichtbar, poster = JPG wie thumbnailUrl und Video-Sitemap (Video-Indexierung, T-01).
   Vor dem Start ist der Videogrund durchsichtig: bis das JPG da ist, zeigt sich das <img> darunter; 1 px Rand, damit das
   <img> LCP bleibt (wie page-case-acs.css). Shorts (9:16, ohne VideoObject): Video bis zum Start unsichtbar, kein zweites
   Poster-Laden; beim Start übernimmt site.js das Standbild. */
.kl-pl:not(.is-on) video { inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); background: transparent; }
.kl-pl.player--tall:not(.is-on) video { visibility: hidden; }
.kl-fmt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.kl-fmt b { font-weight: 500; color: var(--ink); }
.kl-fmt b::after { content: ""; display: inline-block; width: 0.9rem; height: 1px; margin-left: 0.6rem; vertical-align: middle; background: var(--accent); }
.kl-fmt .tag { align-self: center; text-transform: uppercase; }
/* Startknöpfe kompakt oben rechts: dort liegt in beiden Endbildern nur Hintergrund (keine Gesichter, kein Text);
   die Spielerschutz-Leiste unten bleibt frei. Voller Text im aria-label. */
.kl-pl .start { align-items: flex-start; justify-content: flex-end; padding: 3.5% 3% 0 0; background: linear-gradient(200deg, rgba(0,0,0,0.38), rgba(0,0,0,0) 38%); }
.kl-pl .start > span { min-height: 2.75rem; padding: 0 1rem; gap: 0.5rem; font-size: 0.9rem; white-space: nowrap; }
.kl-pl.player--tall .start { padding: 5% 5% 0 0; }
.kl-pl.player--tall .start > span { padding: 0 0.8rem; font-size: 0.85rem; }
@media (max-width: 759px) {
  .kl-pl .start .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kl-pl .start > span { width: 2.75rem; padding: 0; justify-content: center; }
}
/* Shorts-Label (DE „Shorts · 15 s · mit Ton“ ≈ 11,5rem, EN „… · with sound · in German“ ≈ 17,7rem) ist breiter als der
   schmale 9:16-Player (Tablet, kleine Desktops). Dann wie mobil nur das Symbol, der volle Text bleibt im aria-label. */
.kl-pl.player--tall { container-type: inline-size; }
@container (max-width: 12.5rem) {
  .kl-pl.player--tall .start .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kl-pl.player--tall .start > span { width: 2.75rem; padding: 0; justify-content: center; }
}
@container (max-width: 18.75rem) {
  html[lang="en"] .kl-pl.player--tall .start .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html[lang="en"] .kl-pl.player--tall .start > span { width: 2.75rem; padding: 0; justify-content: center; }
}
@media (min-width: 760px) {
  .kl-stage .kl-players {
    grid-template-columns: minmax(0, 256fr) minmax(0, 81fr);
    max-width: max(44rem, calc((100svh - 22.5rem) * 337 / 144 + 1rem));
  }
}
/* Mobil: Spot volle Breite, darunter die Shorts mit Formatzeile daneben (statt 570 px Hochformat-Turm) */
@media (max-width: 759px) {
  .kl-film--tall { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 1rem; align-items: end; }
  .kl-film--tall .kl-fmt { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .kl-film--tall .kl-fmt b::after { display: block; margin: 0.45rem 0 0; }
}

/* ---------- 2 · Aufgabe + Call-Sheet, Idee (Sand) ---------- */
.kl-sheet { display: grid; gap: 0.9rem; align-content: start; min-width: 0; }
@media (min-width: 900px) {
  .kl-sticky { position: sticky; top: calc(var(--head-h) + 2rem); align-self: start; }
}
.kl-idea { gap: 1.1rem; }
.kl-concept { font-size: var(--t-lead); line-height: 1.45; max-width: 30em; }
.kl-concept-t { display: block; margin-bottom: 0.15rem; font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 900; letter-spacing: -0.025em; line-height: 1.05; }
.kl-chances { width: 100%; counter-reset: ch; border-top: 1px solid var(--ink); }
.kl-chances li {
  counter-increment: ch; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: baseline; gap: 0.75rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--line);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
}
.kl-chances li::before { content: counter(ch, decimal-leading-zero); font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; color: var(--accent); }
.kl-turn { font-size: var(--t-lead); font-weight: 700; line-height: 1.4; padding-left: 3rem; position: relative; }
.kl-turn::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 2.25rem; height: 1.5px; background: var(--accent); }

/* ---------- 3 · Umsetzung als Zeitleiste (5 Clips) ---------- */
.kl-steps { counter-reset: st; border-top: 1px solid var(--line); }
.kl-steps li {
  counter-increment: st; position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.35rem 0.75rem; align-content: start;
  padding: 1.1rem 0 1.25rem; border-bottom: 1px solid var(--line-soft);
}
.kl-steps li::before { content: counter(st, decimal-leading-zero); grid-row: span 2; padding-top: 0.25rem; font-family: var(--f-mono); font-size: 0.78rem; color: var(--accent); }
.kl-step-t { font-size: var(--t-h3); font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; }
.kl-steps p { color: var(--muted); max-width: 34em; }
@media (min-width: 700px) and (max-width: 1099px) {
  .kl-steps li { grid-template-columns: 2.5rem minmax(0, 13rem) minmax(0, 1fr); column-gap: 1.25rem; }
  .kl-steps li::before { grid-row: auto; }
  .kl-step-t { padding-top: 0.05rem; }
}
@media (min-width: 1100px) {
  /* wie Clips auf einer Spur: Haarlinie oben, Phosphor-Schnittmarke am Clip-Anfang */
  .kl-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 0; }
  .kl-steps li { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; padding: 1.4rem clamp(1rem, 1.8vw, 1.75rem) 0 0; border-bottom: 0; border-top: 1px solid var(--line); }
  .kl-steps li::before { grid-row: auto; padding-top: 0; }
  .kl-steps li::after { content: ""; position: absolute; left: 0; top: -0.55rem; width: 2px; height: 1.1rem; background: var(--accent); }
  .kl-steps p { font-size: 0.97rem; }
}

/* Making-of (Runde 3): Kopf mit H3 + Szenenwahl, Regler groß; daneben (Desktop) die Reframe-Skizze unten bündig */
.kl-mo { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--line); }
/* ≥ 1100 px: Kopf über beide Spalten, Regler und Reframe-Skizze oben bündig nebeneinander (kein Leerraum über der Skizze) */
@media (min-width: 1100px) {
  .kl-mo { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; column-gap: clamp(2rem, 4vw, 4rem); row-gap: 1.25rem; }
  .kl-mo > .kl-mo-main { display: contents; }
  .kl-mo-head { grid-column: 1 / -1; }
  .kl-mo .kl-ba { grid-column: 1; }
  .kl-mo .kl-reframe { grid-column: 2; grid-row: 2; align-self: start; }
}
.kl-mo-main { display: grid; gap: 1.25rem; min-width: 0; }
.kl-mo-head { scroll-margin-top: calc(var(--head-h) + 1.5rem); }
.kl-mo-head { display: grid; gap: 0.6rem 2rem; align-items: end; }
@media (min-width: 760px) { .kl-mo-head { grid-template-columns: minmax(0, 1fr) auto; } .kl-mo-head .ba-scenes { grid-row: 1 / 3; grid-column: 2; align-self: end; } }
.kl-mo-h { font-size: var(--t-h3); font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; }
.kl-mo-lead { color: var(--muted); max-width: 36em; }

/* Reframe-Skizze: 16:9 beschnitten (Figuren fallen raus) statt 9:16 neu generiert. Statisch. */
.kl-reframe { display: grid; gap: 0.9rem; justify-items: start; margin: 0; }
.kl-rf { --rf-h: clamp(6.5rem, 12vw, 9rem); display: flex; align-items: flex-end; gap: clamp(1rem, 2.5vw, 1.75rem); }
.kl-rf-item { display: grid; gap: 0.55rem; justify-items: start; }
.kl-rf-item--no { flex: none; }   /* Rahmen nie unter seine 16:9-Breite stauchen */
.kl-rf-frame { position: relative; height: var(--rf-h); overflow: hidden; background: var(--petrol-3); border: 1px solid var(--line); }
.kl-rf-frame--wide { aspect-ratio: 16 / 9; }
.kl-rf-frame--tall { aspect-ratio: 9 / 16; border-color: rgba(236, 231, 217, 0.32); }
/* Figur = Kopf + Schultern */
.kl-rf-fig { position: absolute; bottom: 0; width: 15%; height: 62%; }
.kl-rf-fig::before, .kl-rf-fig::after { content: ""; position: absolute; left: 50%; translate: -50% 0; background: var(--bone-muted); }
.kl-rf-fig::before { top: 0; width: 46%; aspect-ratio: 1; border-radius: 50%; }
.kl-rf-fig::after { bottom: 0; width: 100%; height: 56%; border-radius: 45% 45% 0 0; }
.kl-rf-frame--wide .kl-rf-fig--a { left: 15%; }
.kl-rf-frame--wide .kl-rf-fig--b { left: 69%; }
.kl-rf-frame--tall .kl-rf-fig { width: 34%; height: 42%; bottom: 8%; }
.kl-rf-frame--tall .kl-rf-fig--a { left: 12%; }
.kl-rf-frame--tall .kl-rf-fig--b { left: 54%; }
.kl-rf-frame--tall .kl-rf-fig::before, .kl-rf-frame--tall .kl-rf-fig::after { background: var(--bone); }
/* 9:16-Fenster mitten im Querformat: 9/16 × 9/16 = 31,64 % der Breite; außen abgedunkelt */
.kl-rf-crop { position: absolute; top: 0; bottom: 0; left: 34.18%; width: 31.64%; border: 1.5px dashed var(--acc); box-shadow: 0 0 0 100vmax rgba(9, 17, 16, 0.62); }
.kl-rf-frame--tall .finder { inset: 6% 8%; }
.kl-rf-frame--tall .finder i { width: 0.7rem; height: 0.7rem; border-color: var(--acc); }
.kl-rf-lbl { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.kl-rf-item--no .kl-rf-lbl { text-decoration: line-through; text-decoration-color: var(--rec); text-decoration-thickness: 1.5px; }
.kl-rf-item--yes .kl-rf-lbl { color: var(--acc); }
.kl-rf-vs { align-self: center; margin-bottom: 1.6rem; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.kl-reframe figcaption { font-size: var(--t-small); color: var(--muted); max-width: 34em; }
.kl-reframe figcaption b { color: var(--ink); font-weight: 600; }
/* Desktop: Skizze steht rechts neben dem Regler, unten bündig mit der Bildunterschrift */
@media (min-width: 1100px) { .kl-reframe { padding-bottom: 0.25rem; } .kl-rf { --rf-h: clamp(6rem, 8vw, 7.5rem); } }
@media (max-width: 520px) { .kl-rf { --rf-h: 5.75rem; gap: 0.75rem; } .kl-rf-vs { margin-bottom: 1.9rem; } }
/* Unter 360 px passt die Skizze nicht in eine Zeile (EN „9:16 regenerated“ lief über den Rand): umbrechen */
@media (max-width: 359px) { .kl-rf { flex-wrap: wrap; } }

/* ---------- 4 · Ergebnis, Shotliste, Abschluss (Sand) ---------- */
.kl-outro { align-items: start; }
.kl-outro .lead { color: var(--ink); max-width: 30em; }

.kl-deep { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.kl-deep .acc-body { max-width: 48rem; gap: 0.9rem; }
.kl-shots-h { margin-top: 0.4rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
/* Schnittleiste 20 s: Clips proportional zur Dauer (3 · 3 · 3 · 5 · 2 · 4 s) */
.kl-tl { display: grid; gap: 0.35rem; width: 100%; }
.kl-tl-track { position: relative; display: grid; grid-template-columns: 3fr 3fr 3fr 5fr 2fr 4fr; gap: 2px; height: 1.6rem; overflow: hidden; }
.kl-seg { background: var(--panel); border: 1px solid var(--line); transition: background-color 160ms linear, border-color 160ms linear; }
.kl-seg:first-child { border-top: 2px solid var(--accent); }   /* Label „KI-generiert“ zu Spotbeginn */
.kl-seg:nth-child(6) { border-bottom: 3px solid var(--coal); }  /* Endbild mit Spielerschutz-Leiste */
.kl-ph { position: absolute; inset: 0; pointer-events: none; }
.kl-ph::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: var(--accent); }
.kl-tl-ruler { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 0.65rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.kl-shots { width: 100%; border-top: 1px solid var(--line); }
.kl-shots li { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft); transition: background-color 160ms linear; }
.kl-tc { font-family: var(--f-mono); font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--accent); padding-top: 0.15rem; white-space: nowrap; }
/* Zeile ↔ Clip: Hover über eine Shot-Zeile markiert ihren Clip in der Leiste */
.kl-shotlist:has(.kl-shots li:nth-child(1):hover) .kl-seg:nth-child(1),
.kl-shotlist:has(.kl-shots li:nth-child(2):hover) .kl-seg:nth-child(2),
.kl-shotlist:has(.kl-shots li:nth-child(3):hover) .kl-seg:nth-child(3),
.kl-shotlist:has(.kl-shots li:nth-child(4):hover) .kl-seg:nth-child(4),
.kl-shotlist:has(.kl-shots li:nth-child(5):hover) .kl-seg:nth-child(5),
.kl-shotlist:has(.kl-shots li:nth-child(6):hover) .kl-seg:nth-child(6) { background: var(--accent); border-color: var(--accent); }
.kl-shots li:hover { background: rgba(18, 32, 30, 0.04); }
/* Playhead läuft einmal über die Leiste, wenn die Shotliste geöffnet wird (Nutzeraktion, nur transform) */
@media (prefers-reduced-motion: no-preference) {
  .deep[open] .kl-ph { animation: kl-play 1.6s linear both; }
  @keyframes kl-play { from { transform: translateX(-100%); } }
}

.kl-next { margin-top: clamp(3rem, 6vw, 4.5rem); align-items: flex-end; gap: 2rem 3rem; }
.kl-next-a { display: grid; gap: 0.85rem; justify-items: start; }
.kl-next-a .links { margin-top: 0.15rem; }
.kl-min { font-size: var(--t-small); color: var(--muted); }
.kl-next-b { display: grid; gap: 0.15rem; justify-items: start; }
.kl-all { font-size: var(--t-small); min-height: 2.75rem; }
@media (min-width: 900px) { .kl-next-b { justify-items: end; text-align: right; } }

/* ---------- Ankunft: nach dem Poster-Morph (site.css §21) rückt der 9:16-Player nach ----------
   Nur während einer Cross-Document View Transition (Karte/ACS → KL). Direktaufruf: Frame 1 ist fertig. */
@media (prefers-reduced-motion: no-preference) {
  .kl-film--tall .player { view-transition-name: kl-shorts; }
  ::view-transition-new(kl-shorts) { animation: kl-shorts-in 420ms var(--ease-out-expo) 200ms both; }
  ::view-transition-old(kl-shorts) { animation: pj-out 140ms var(--ease-in) both; }
  @keyframes kl-shorts-in { from { opacity: 0; transform: translateY(24px); } }
}

/* Kundenstimme im Ergebnis (Google-Rezension, kein Review-Schema) */
.kl-quote { margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); max-width: 40rem; gap: 0.9rem; }
.kl-quote blockquote p { font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.kl-quote figcaption a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; font-weight: 700; }