/* Theater Konrad – bewegtes Plakat: gemeinsame Formeln für Website und Admin-Vorschau.
   Bühne .kl-stage, --p (Scroll-Fortschritt 0…1) setzt sie selbst oder ein Elternelement. Jede Ebene .kl hat Anfang (--x0 …) und Ende (--x1 …) sowie ihren Zeitraum --t0/--t1;
   --q ist der eigene Fortschritt, --e derselbe mit Verlauf. x/y in % der Bühne, s/o in %, r in Grad, b in px. */
:where(.kl-stage) { position: relative; } /* niedrige Spezifität: das Sitepack darf die Bühne sticky machen */
.kl-stage { overflow: hidden; container-type: size; isolation: isolate; }
.kl {
  --q: clamp(0, (var(--p, 0) - var(--t0, 0)) / max(.001, var(--t1, 1) - var(--t0, 0)), 1);
  --e: calc(var(--q) * var(--q) * (3 - 2 * var(--q)));
  position: absolute; pointer-events: none; will-change: transform, opacity;
  transform:
    translate(calc((var(--x0, 0) + (var(--x1, 0) - var(--x0, 0)) * var(--e)) * 1cqw), calc((var(--y0, 0) + (var(--y1, 0) - var(--y0, 0)) * var(--e)) * 1cqh))
    rotate(calc((var(--r0, 0) + (var(--r1, 0) - var(--r0, 0)) * var(--e)) * 1deg))
    scale(calc((var(--s0, 100) + (var(--s1, 100) - var(--s0, 100)) * var(--e)) / 100));
  opacity: calc((var(--o0, 100) + (var(--o1, 100) - var(--o0, 100)) * var(--e)) / 100);
}
:is(.kl, .kl-world)[data-ease="linear"] { --e: var(--q); }
:is(.kl, .kl-world)[data-ease="in"] { --e: calc(var(--q) * var(--q)); }
:is(.kl, .kl-world)[data-ease="out"] { --e: calc(1 - (1 - var(--q)) * (1 - var(--q))); }
.kl[data-blur] { filter: blur(calc((var(--b0, 0) + (var(--b1, 0) - var(--b0, 0)) * var(--e)) * 1px)); }
.kl[data-float] { animation: kl-float 7s ease-in-out infinite; }
/* Ebene ohne eigene Bewegung: keine eigene Grafikebene, sie wird mit dem Bühnenbild bzw. der Bühne gezeichnet (spart auf Handys viel Grafikspeicher) */
.kl[data-static] { will-change: auto; }

/* Leichte Fassung für schwache Geräte (das Sitepack setzt html[data-motion]): ohne Leuchten, Unschärfe, Schweben und Zierebenen.
   still: zusätzlich keine eigenen Grafikebenen – die Szene steht. */
:is([data-motion="lite"], [data-motion="still"]) .kl-glow,
:is([data-motion="lite"], [data-motion="still"]) .kl[data-optional] { display: none; }
:is([data-motion="lite"], [data-motion="still"]) .kl[data-blur] { filter: none; }
:is([data-motion="lite"], [data-motion="still"]) .kl[data-float] { animation: none; }
[data-motion="still"] :is(.kl, .kl-world) { will-change: auto; }
@keyframes kl-float { 50% { translate: 0 -1.4cqh; } }

/* Bild: deckt die Bühne oder steht ganz darin; gezoomt wird zum Fluchtpunkt der Szene.
   Ausschnitt (--px/--py, 0 = links/oben, 100 = rechts/unten) wandert mit: ein Schwenk über das Bild, auf jedem Bildschirm passend */
.kl--image { inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform-origin: var(--fx, 50%) var(--fy, 55%);
  object-position: calc((var(--px0, 50) + (var(--px1, 50) - var(--px0, 50)) * var(--e)) * 1%) calc((var(--py0, 50) + (var(--py1, 50) - var(--py0, 50)) * var(--e)) * 1%); }
.kl--image[data-fit="contain"] { object-fit: contain; }

/* Bühnenbild: gemeinsame Fläche im Seitenverhältnis des Bildes (--ar), deckt die Bühne; die Kamera zoomt (--z0/--z1 in %)
   und schwenkt (--cx/--cy: 0 = linker/oberer Bildrand am Bühnenrand, 100 = rechter/unterer). Nur transform → flüssig. */
.kl-world {
  --q: clamp(0, var(--p, 0), 1);
  --e: calc(var(--q) * var(--q) * (3 - 2 * var(--q)));
  --z: calc((var(--z0, 100) + (var(--z1, 100) - var(--z0, 100)) * var(--e)) / 100);
  --ww: max(100cqw, 100cqh * var(--ar, .7071));
  --wh: calc(var(--ww) / var(--ar, .7071));
  position: absolute; left: 0; top: 0; width: var(--ww); height: var(--wh); transform-origin: 0 0; will-change: transform; pointer-events: none;
  transform:
    translate(calc((100cqw - var(--ww) * var(--z)) * (var(--cx0, 50) + (var(--cx1, 50) - var(--cx0, 50)) * var(--e)) / 100),
              calc((100cqh - var(--wh) * var(--z)) * (var(--cy0, 50) + (var(--cy1, 50) - var(--cy0, 50)) * var(--e)) / 100))
    scale(var(--z));
}
/* Ebenen im Bühnenbild füllen die Fläche genau; Größe/Drehung wirken um ihren Standpunkt (--ax/--ay) */
.kl-world > .kl--image { object-fit: fill; transform-origin: var(--ax, 50%) var(--ay, 50%); }

/* Titel als Schrift, in der Leitfarbe; „Umriss“ nur als Kontur */
.kl--title { left: 0; top: 50%; margin-top: -.45em; white-space: nowrap; font: 700 clamp(3rem, 17cqw, 18rem)/.9 var(--kl-font, inherit); letter-spacing: -.05em; text-transform: uppercase; color: color-mix(in srgb, var(--c, #e8b04b) 70%, #fff); }
.kl--title[data-style="outline"] { color: transparent; -webkit-text-stroke: max(1px, .14cqw) color-mix(in srgb, var(--c, #e8b04b) 60%, #fff); }

/* Plakat: mittig, auf breiten Bühnen nach rechts gerückt (links stehen die Angaben) */
.kl--poster { --w: min(42cqh, 70cqw); left: 50%; top: 50%; width: var(--w); margin: calc(var(--w) * -.707) 0 0 calc(var(--w) * -.5); }
.kl--poster > * { display: block; width: 100%; aspect-ratio: 1 / 1.414; object-fit: cover; border-radius: 4px; box-shadow: 0 40px 60px -10px rgba(0,0,0,.6), 0 0 140px -20px var(--c, #e8b04b); }
@container (min-width: 901px) { .kl--poster { left: calc(50% + clamp(0px, (100cqw - 900px) * .4, 22cqw)); } }
@container (max-width: 700px) { .kl--poster { --w: min(34cqh, 72cqw); top: 40%; } }

/* Leuchten aus dem Plakat hinter allem */
.kl-glow { position: absolute; inset: -12%; z-index: -1; background: center / cover no-repeat; filter: blur(60px) saturate(1.5) brightness(.55); opacity: .9; transform: scale(calc(1.15 + var(--p, 0) * .2)); pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .kl[data-float] { animation: none; } }