/* =========================================================================
   kurzfilme.css — selbstversichert.com (02.11.2026)
   -------------------------------------------------------------------------
   Seite kurzfilme.html: Kinosaal-Optik, Scroll-Szenen („Vorhang auf"),
   VERO als Begleiter mit Sparten-Orbit, Wunschthema-Formular.
   Das JS (js/kurzfilme.js) setzt je Film zwei Werte:
     --p  Lage zur Bildschirmmitte  (-1 = unten, 0 = Mitte, 1 = oben)
     --e  Auftritt 0…1 (wie weit der Film schon ins Bild gefahren ist)
   Alle Bewegungen hängen nur an diesen Werten. Ohne JS oder bei
   „Bewegung reduzieren" stehen alle Filme ruhig und vollständig da.
   Kinorot (--kf-red) bewusst sparsam: Punkt, Premierenmarke, Linie.
   ========================================================================= */

:root {
  --kf-red: #e5394f;
  --kf-red-soft: rgba(229, 57, 79, 0.16);
  --kf-ink: #060a14;
  --kf-navy: #0a1628;
  --kf-surface: #101c33;
  --kf-line: rgba(127, 216, 255, 0.16);
  --kf-text: #dce8f5;
  --kf-muted: #8fa9c6;
  --kf-cyan: #00a3e0;
}

/* ---------- Grundfläche ---------- */
.kf-page {
  background: var(--kf-ink);
  color: var(--kf-text);
  overflow: hidden; /* fängt die gekippten Bühnen seitlich ab */
}
.kf-page h1, .kf-page h2, .kf-page h3 { color: #fff; }
.kf-page a:not(.btn) { color: #7fd8ff; }
.kf-page a:not(.btn):hover { color: #fff; }

/* Filmkorn über allem (sehr leise) */
.kf-page::before {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: kfGrain 1.2s steps(6) infinite;
}
@keyframes kfGrain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
.kf-page > * { position: relative; z-index: 1; }

/* ---------- Hero ---------- */
.kf-hero {
  position: relative;
  min-height: min(88vh, 860px);
  display: flex;
  align-items: center;
  padding: calc(var(--header-height) + 3rem) 0 5rem;
  margin-top: calc(-1 * var(--header-height));
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(0, 163, 224, .28), transparent 60%),
    radial-gradient(60% 50% at 85% 110%, rgba(229, 57, 79, .10), transparent 70%),
    linear-gradient(180deg, var(--kf-navy) 0%, var(--kf-ink) 100%);
  overflow: hidden;
  isolation: isolate;
}
/* Projektorkegel */
.kf-hero__beam {
  position: absolute;
  left: 50%;
  top: -12%;
  width: 140%;
  height: 120%;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgba(160, 225, 255, .10) 172deg, rgba(160, 225, 255, .16) 180deg, rgba(160, 225, 255, .10) 188deg, transparent 200deg);
  filter: blur(6px);
  z-index: -1;
  animation: kfBeam 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes kfBeam { from { opacity: .7; } to { opacity: 1; } }
.kf-hero__dust { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kf-hero__dust span {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(200, 240, 255, .7);
  box-shadow: 0 0 6px rgba(160, 230, 255, .7);
  animation: kfDust var(--d, 9s) ease-in-out infinite alternate;
  opacity: .5;
}
@keyframes kfDust { from { transform: translate(0, 0); opacity: .15; } to { transform: translate(18px, -40px); opacity: .8; } }

.kf-hero__inner { text-align: center; max-width: 900px; margin: 0 auto; }
.kf-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #bfe9ff;
  padding: .45rem .95rem;
  border: 1px solid var(--kf-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  margin-bottom: 1.4rem;
}
.kf-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--kf-red);
  box-shadow: 0 0 0 0 rgba(229, 57, 79, .6);
  animation: kfPing 2.2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes kfPing { 0% { box-shadow: 0 0 0 0 rgba(229, 57, 79, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(229, 57, 79, 0); } }

.kf-hero h1 {
  font-size: clamp(2.4rem, 7vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin-bottom: 1.2rem;
}
.kf-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #7fd8ff 10%, #fff 50%, #7fd8ff 90%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: kfShine 6s ease-in-out infinite;
}
@keyframes kfShine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.kf-hero__lead {
  font-size: clamp(1.02rem, 2.1vw, 1.22rem);
  color: var(--kf-muted);
  max-width: 640px;
  margin: 0 auto 2.2rem;
}

/* Nächste Premiere */
.kf-next {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 1rem 1.6rem;
  padding: 1rem 1.2rem 1rem 1.4rem;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(19, 32, 58, .92), rgba(10, 22, 40, .92));
  border: 1px solid var(--kf-line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  text-align: left;
  backdrop-filter: blur(8px);
}
.kf-next__label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #ffb3bd;
  font-family: var(--font-heading);
}
.kf-next__title { display: block; font-family: var(--font-heading); font-weight: 800; color: #fff; font-size: 1.1rem; margin-top: .15rem; }
.kf-next__when { display: block; color: var(--kf-muted); font-size: .9rem; }
.kf-count { display: flex; gap: .45rem; }
.kf-count__cell {
  min-width: 58px;
  padding: .45rem .3rem .35rem;
  text-align: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
}
.kf-count__num { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 1.45rem; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kf-count__unit { display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--kf-muted); }
.kf-next__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem; }

.kf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-heading); font-weight: 700; font-size: .9rem;
  padding: .7rem 1.15rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #fff !important;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
  text-decoration: none;
  line-height: 1.2;
}
.kf-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (hover: hover) { .kf-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .32); transform: translateY(-1px); } }
.kf-btn:focus-visible { outline: 3px solid #7fd8ff; outline-offset: 3px; }
.kf-btn--primary { background: linear-gradient(135deg, #00a3e0, #0055a4); border-color: transparent; box-shadow: 0 10px 28px rgba(0, 120, 210, .35); }
@media (hover: hover) { .kf-btn--primary:hover { background: linear-gradient(135deg, #19b4ef, #0063bd); } }
.kf-btn--ghost { background: transparent; }

.kf-scrollhint {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: var(--kf-muted); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
}
.kf-scrollhint__reel {
  width: 26px; height: 40px; border-radius: 14px; border: 2px solid rgba(191, 233, 255, .4);
  position: relative;
}
.kf-scrollhint__reel::after {
  content: ''; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px; background: #7fd8ff; animation: kfWheel 1.8s ease-in-out infinite;
}
@keyframes kfWheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Liste / Filterleiste ---------- */
.kf-list { position: relative; padding: 2rem 0 4rem; }
.kf-filterbar {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem;
  max-width: 1100px; margin: 0 auto 1rem;
  padding: .7rem .8rem .7rem 1.1rem;
  border-radius: 16px;
  border: 1px solid var(--kf-line);
  background: rgba(16, 28, 51, .7);
}
.kf-filterbar__state { color: var(--kf-muted); font-size: .92rem; }
.kf-filterbar__state strong { color: #fff; }
.kf-filterbar__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.kf-filterbar .kf-btn { padding: .5rem .9rem; font-size: .82rem; }
.kf-filterbar [data-kf-reset][hidden] { display: none; }

/* Filmstreifen-Zeitleiste (Desktop) */
.kf-strip {
  position: absolute;
  left: max(18px, calc(50% - 640px));
  top: 7rem; bottom: 6rem;
  width: 22px;
  pointer-events: none;
  display: none;
}
@media (min-width: 1100px) { .kf-strip { display: block; } }
.kf-strip::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 50%, var(--kf-ink) 2.2px, transparent 2.6px) 0 0 / 22px 16px,
    linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .06);
}
.kf-strip__fill {
  position: absolute; left: 9px; top: 0; width: 4px; border-radius: 2px;
  height: calc(var(--kf-progress, 0) * 100%);
  background: linear-gradient(180deg, #00a3e0, #7fd8ff 80%, var(--kf-red));
  box-shadow: 0 0 12px rgba(0, 163, 224, .6);
}

/* ---------- Ein Film = eine Szene ---------- */
.kf-film {
  /* --p Lage zur Mitte (-1…1) · --o Öffnung 0…1 (voll offen kurz vor der Mitte) · --x Abgang 0…1 (nach der Mitte) */
  --p: 0; --o: 1; --x: 0; --v: 1; --dir: 1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vh, 5rem) 0;
}
.kf-film:nth-of-type(even) { --dir: -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.kf-film:nth-of-type(even) .kf-film__media { order: 2; }
.kf-film[hidden] { display: none; }

/* große Nummer im Hintergrund, eigene Parallax-Geschwindigkeit */
.kf-film__num {
  position: absolute;
  top: 50%;
  left: calc(50% + var(--dir) * 18%);
  transform: translate(-50%, calc(-50% + var(--p) * 140px));
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(9rem, 24vw, 20rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(127, 216, 255, .12);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.kf-film__media {
  position: relative;
  z-index: 1;
  perspective: 1400px;
}
.kf-film__glow {
  position: absolute; inset: 8% 6%;
  background-size: cover; background-position: center;
  filter: blur(48px) saturate(1.5);
  opacity: calc(.15 + var(--v, 1) * .55);
  transform: scale(1.1);
  z-index: 0;
  border-radius: 40px;
  transition: background-image .3s;
}
.kf-film__frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #0b1424;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  transform-origin: 50% 50%;
  transform:
    rotateX(calc((1 - var(--o)) * 18deg - var(--x) * 9deg))
    rotateY(calc((1 - var(--o)) * var(--dir) * -16deg))
    scale(calc(.76 + var(--o) * .24 - var(--x) * .07));
  /* „Vorhang auf": öffnet sich bis kurz vor der Bildmitte, beim Abgang wird es dunkler */
  clip-path: inset(calc((1 - var(--o)) * 16%) calc((1 - var(--o)) * 45%) round 20px);
  filter: brightness(calc(1 - var(--x) * .45)) saturate(calc(1 - var(--x) * .3));
  will-change: transform, clip-path, filter;
}
.kf-film__poster, .kf-film__loop {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.kf-film__poster { transform: translateY(calc(var(--p) * -5%)) scale(1.1); }
.kf-film__poster img { width: 100%; height: 100%; object-fit: cover; }
.kf-film__loop {
  opacity: 0;
  transition: opacity .8s ease;
  transform: scale(1.04);
}
.kf-film.is-looping .kf-film__loop { opacity: 1; }
/* Vorhang-Ränder (rot-samtig, nur im Auftritt sichtbar) */
.kf-film__frame::before, .kf-film__frame::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 51%; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgba(90, 10, 22, .95), rgba(150, 24, 42, .85) 70%, rgba(150, 24, 42, .7));
  opacity: calc(1 - var(--o) * 2.4);
}
.kf-film__frame::before { left: 0; transform: translateX(calc(var(--o) * -100%)); }
.kf-film__frame::after { right: 0; transform: translateX(calc(var(--o) * 100%)) scaleX(-1); }
/* Projektor-Aufblitzen im Moment, in dem der Vorhang ganz offen ist */
.kf-film__flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(60% 60% at 50% 50%, rgba(220, 245, 255, .55), transparent 70%); opacity: 0; }
.kf-film.is-open .kf-film__flash { animation: kfFlash .9s ease-out 1; }
@keyframes kfFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
/* Vignette + Glanzkante */
.kf-film__shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 10, 20, 0) 55%, rgba(6, 10, 20, .65) 100%);
}

/* Play-Knopf über dem Bild */
.kf-play {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: #fff; padding: 0;
  font: inherit;
}
.kf-play__icon {
  width: clamp(64px, 9vw, 86px); height: clamp(64px, 9vw, 86px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .14);
  border: 2px solid rgba(255, 255, 255, .7);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
  transition: transform .3s cubic-bezier(.34, 1.4, .5, 1), background .3s, border-color .3s;
}
.kf-play__icon svg { width: 42%; height: 42%; margin-left: 6%; }
.kf-play:hover .kf-play__icon, .kf-play:focus-visible .kf-play__icon { transform: scale(1.1); background: rgba(0, 163, 224, .55); border-color: #fff; }
.kf-play:focus-visible { outline: none; }
.kf-play:focus-visible .kf-play__icon { box-shadow: 0 0 0 4px #7fd8ff; }
.kf-play__time {
  position: absolute; right: 14px; bottom: 12px;
  font-size: .78rem; font-weight: 700; color: #fff;
  background: rgba(6, 10, 20, .7); padding: 3px 9px; border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.kf-film__frame.is-playing { clip-path: none; }
.kf-film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 5; }

/* Premiere-Banderole für kommende Filme */
.kf-ribbon {
  position: absolute; left: 14px; bottom: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .75rem;
  border-radius: 999px;
  font-family: var(--font-heading); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
  background: rgba(6, 10, 20, .72);
  border: 1px solid rgba(229, 57, 79, .55);
  backdrop-filter: blur(6px);
}

/* Text-Seite */
.kf-film__body { position: relative; z-index: 1; }
.kf-film__body > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.kf-film.is-in .kf-film__body > * { opacity: 1; transform: none; }
.kf-film__body { opacity: calc(1 - var(--x) * .55); transform: translateY(calc(var(--x) * -24px)); }
.kf-film.is-in .kf-film__body > :nth-child(2) { transition-delay: .08s; }
.kf-film.is-in .kf-film__body > :nth-child(3) { transition-delay: .16s; }
.kf-film.is-in .kf-film__body > :nth-child(4) { transition-delay: .24s; }
.kf-film.is-in .kf-film__body > :nth-child(5) { transition-delay: .32s; }

.kf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-bottom: .9rem; }
.kf-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 700;
  padding: .32rem .7rem;
  border-radius: 999px;
  background: rgba(0, 163, 224, .12);
  border: 1px solid rgba(0, 163, 224, .35);
  color: #bfe9ff;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
}
.kf-chip svg { width: 15px; height: 15px; }
@media (hover: hover) { .kf-chip:hover { background: rgba(0, 163, 224, .22); } }
.kf-meta .kf-chip { min-height: 32px; }
.kf-chip:focus-visible { outline: 2px solid #7fd8ff; outline-offset: 2px; }
.kf-meta__info { font-size: .85rem; color: var(--kf-muted); }
.kf-meta__info--soon { color: #ffb3bd; font-weight: 700; display: inline-flex; align-items: center; gap: .45rem; }

.kf-film__title {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin-bottom: .8rem;
}
.kf-film__line {
  font-family: var(--font-heading);
  font-weight: 600;
  color: #7fd8ff;
  font-size: 1.02rem;
  margin-bottom: .7rem;
}
.kf-film__text { color: var(--kf-text); opacity: .86; font-size: 1rem; margin-bottom: 1.4rem; }
.kf-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.kf-actions__note { width: 100%; font-size: .78rem; color: var(--kf-muted); margin: .2rem 0 0; }
.kf-actions__note a { color: #9fdcff; }
.kf-mini-count { font-variant-numeric: tabular-nums; }

/* Platzhalter */
.kf-film--ph .kf-film__frame {
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 14px, transparent 14px 28px),
    radial-gradient(80% 80% at 50% 40%, #16264a, #0a1426);
}
.kf-ph__clap { width: 34%; max-width: 170px; color: rgba(191, 233, 255, .85); }
.kf-ph__clap .kf-ph__top { transform-origin: 6px 30px; animation: kfClap 3.2s ease-in-out infinite; }
@keyframes kfClap { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-18deg); } 86% { transform: rotate(0); } }
.kf-ph__q {
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(4rem, 12vw, 7rem);
  color: transparent; -webkit-text-stroke: 2px rgba(127, 216, 255, .55);
  animation: kfFloat 4s ease-in-out infinite;
}
@keyframes kfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Wunschthema ---------- */
.kf-wish {
  position: relative;
  padding: 5rem 0 6rem;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(0, 163, 224, .16), transparent 70%),
    linear-gradient(180deg, var(--kf-ink), var(--kf-navy));
  border-top: 1px solid var(--kf-line);
}
.kf-wish__box {
  max-width: 760px; margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2.6rem);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(19, 32, 58, .95), rgba(10, 22, 40, .95));
  border: 1px solid var(--kf-line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.kf-wish h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin-bottom: .7rem; }
.kf-wish__lead { color: var(--kf-muted); margin-bottom: 1.4rem; }
.kf-wish__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.kf-wish__chips .kf-chip { min-height: 40px; padding: .45rem .9rem; }
.kf-wish__chips .kf-chip[aria-pressed="true"] { background: linear-gradient(135deg, #00a3e0, #0055a4); border-color: transparent; color: #fff; }
.kf-field { display: block; margin-bottom: 1rem; }
.kf-field > span { display: block; font-size: .85rem; font-weight: 700; color: #cfe6fb; margin-bottom: .35rem; }
.kf-field small { font-weight: 400; color: var(--kf-muted); }
.kf-field textarea, .kf-field input {
  width: 100%;
  font: inherit; font-size: 1rem;
  color: #fff;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  padding: .8rem 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.kf-field textarea { min-height: 110px; resize: vertical; }
.kf-field textarea::placeholder, .kf-field input::placeholder { color: #6f8aa8; }
.kf-field textarea:focus, .kf-field input:focus { outline: none; border-color: #7fd8ff; box-shadow: 0 0 0 3px rgba(0, 163, 224, .3); }
.kf-wish__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; }
.kf-wish__legal { font-size: .78rem; color: var(--kf-muted); margin: 0; flex: 1 1 260px; }
.kf-wish__status { margin-top: 1rem; font-weight: 700; min-height: 1.4em; }
.kf-wish__status.is-ok { color: #6ee7b7; }
.kf-wish__status.is-err { color: #ffb3bd; }
.kf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.kf-wish__done { text-align: center; padding: 1rem 0; }
.kf-wish__done svg { width: 64px; height: 64px; color: #6ee7b7; margin: 0 auto .8rem; display: block; }

/* ---------- VERO Begleiter ---------- */
/* Platz: rechts neben VERO liegen die Seitenleiste und „nach oben“ der Website
   (.floating-sidebar, .back-to-top) – deshalb links davon. Am Handy sitzt
   VERO links über der App-Leiste, weil rechts die Seitenleiste steht. */
.kf-vero {
  position: fixed;
  right: calc(88px + env(safe-area-inset-right));
  bottom: max(14px, calc(env(safe-area-inset-bottom) + 14px));
  z-index: 900;
  width: 92px; height: 92px;
  transition: opacity .4s;
  opacity: 0;
  pointer-events: none;
}
.kf-vero__btn { transform: translate3d(0, var(--vy, 0px), 0) rotate(var(--vr, 0deg)); transition: transform .25s ease-out; }
.kf-vero.is-on { opacity: 1; pointer-events: auto; }
.kf-vero.is-on.is-away { opacity: 0; pointer-events: none; }
.kf-vero__btn {
  position: absolute; inset: 0;
  border: 0; background: none; padding: 0; cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.kf-vero__btn:focus-visible { outline: 3px solid #7fd8ff; outline-offset: 2px; }
.kf-vero__float { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; animation: kfVeroFloat 4.5s ease-in-out infinite; }
@keyframes kfVeroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.kf-vero__ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1.5px solid rgba(0, 163, 224, .3); pointer-events: none; }
.kf-vero__ring--o { width: 90px; height: 90px; margin: -45px 0 0 -45px; animation: kfRingO 3.5s ease-in-out infinite alternate; box-shadow: 0 0 18px rgba(0, 163, 224, .15); }
.kf-vero__ring--i { width: 62px; height: 62px; margin: -31px 0 0 -31px; border-color: rgba(0, 163, 224, .42); animation: kfRingI 2.8s ease-in-out .3s infinite alternate; }
@keyframes kfRingO { from { transform: scale(.95); opacity: .45; } to { transform: scale(1.06); opacity: 1; } }
@keyframes kfRingI { from { transform: scale(.94); opacity: .55; } to { transform: scale(1.07); opacity: 1; } }
.kf-vero__shield { width: 54px; height: 63px; position: relative; z-index: 2; filter: drop-shadow(0 0 14px rgba(0, 163, 224, .55)); transition: transform .3s; overflow: visible; }
.kf-vero__btn:hover .kf-vero__shield { transform: scale(1.08); }
.kf-vero #kfv-sword { transform-box: fill-box; transform-origin: 50% 88%; transition: transform .5s cubic-bezier(.34, 1.4, .5, 1); }
.kf-vero.is-pointing #kfv-sword { transform: translateY(-8%) rotate(var(--vs, 0deg)) scale(1.1); }
.kf-vero.is-wiggle .kf-vero__shield { animation: kfWiggle 1s ease-in-out; }
@keyframes kfWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 55% { transform: rotate(7deg); } 80% { transform: rotate(-3deg); } }
.kf-vero.is-cheer .kf-vero__float { animation: kfCheer .9s cubic-bezier(.3, 1.5, .4, 1); }
@keyframes kfCheer { 0% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-20px) rotate(-8deg); } 60% { transform: translateY(-5px) rotate(6deg); } 100% { transform: translateY(0) rotate(0); } }
.kf-vero__hint {
  position: absolute; right: 2px; top: 2px; z-index: 3;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #0a1628; border: 1.5px solid rgba(127, 216, 255, .6); color: #bfe9ff;
  pointer-events: none;
}
.kf-vero__hint svg { width: 12px; height: 12px; }
.kf-vero.is-open .kf-vero__hint { opacity: 0; }
/* VERO der Kurzfilm-Seite trägt ein rotes Filter-Abzeichen – unterscheidet ihn vom „VERO Sim“ in der App-Leiste */
.kf-vero__hint { background: #e5394f; border-color: #fff; color: #fff; }

/* Sprechblase */
.kf-bubble {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: min(290px, calc(100vw - 140px));
  padding: .8rem .95rem .7rem;
  border-radius: 16px 16px 4px 16px; /* Spitze unten rechts zeigt auf VERO */
  background: linear-gradient(165deg, #12233f, #0c1a30);
  border: 1px solid rgba(0, 163, 224, .5);
  box-shadow: 0 12px 36px rgba(0, 10, 30, .6);
  color: #eaf3ff;
  font-size: .9rem; line-height: 1.5;
  opacity: 0; transform: translateY(8px) scale(.96);
  transform-origin: 100% 100%;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.kf-bubble:not(.is-on) { visibility: hidden; }
.kf-bubble.is-on { opacity: 1; transform: none; pointer-events: auto; }
.kf-bubble__tag { display: flex; align-items: center; gap: 6px; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7fd8ff; margin-bottom: .25rem; }
.kf-bubble__tag i { width: 6px; height: 6px; border-radius: 50%; background: #00a3e0; box-shadow: 0 0 6px #00a3e0; }
.kf-bubble__mute {
  display: inline-block; margin-top: .3rem; min-height: 28px; padding: 4px 0 !important;
  font: inherit; font-size: .74rem; color: #8fb6d9; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.kf-bubble__mute:hover { color: #fff; }

/* Sparten-Orbit: öffnet als eigene Bühne in der Bildschirmmitte.
   VERO groß in der Mitte, die Sparten kreisen als Satelliten um ihn. */
.kf-orbit-scrim {
  position: fixed; inset: 0; z-index: 980;
  background: radial-gradient(60% 50% at 50% 50%, rgba(10, 30, 60, .55), rgba(4, 9, 18, .82));
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s;
}
.kf-orbit-scrim.is-on { opacity: 1; visibility: visible; transition: opacity .3s; }
.kf-stage {
  position: fixed; left: 50%; top: 50%; z-index: 990;
  width: 0; height: 0;
  visibility: hidden;
  --r: 165px;
}
.kf-stage.is-on { visibility: visible; }
.kf-stage__title {
  position: absolute; left: 50%; bottom: calc(var(--r) + 70px);
  transform: translate(-50%, 10px);
  white-space: nowrap;
  font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; color: #fff;
  opacity: 0; transition: opacity .3s .1s, transform .4s .1s;
}
.kf-stage.is-on .kf-stage__title { opacity: 1; transform: translate(-50%, 0); }
.kf-stage__ring {
  position: absolute; left: 0; top: 0;
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border-radius: 50%;
  border: 1.5px dashed rgba(127, 216, 255, .4);
  box-shadow: 0 0 60px rgba(0, 163, 224, .15) inset;
  opacity: 0; transform: scale(.3) rotate(-30deg);
  transition: opacity .35s, transform .55s cubic-bezier(.34, 1.3, .5, 1);
}
.kf-stage.is-on .kf-stage__ring { opacity: 1; transform: none; animation: kfSpin 40s linear infinite; }
@keyframes kfSpin { to { transform: rotate(360deg); } }
.kf-stage__core {
  position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%;
  opacity: 0; transform: scale(.4);
  transition: opacity .3s, transform .5s cubic-bezier(.34, 1.4, .5, 1);
}
.kf-stage.is-on .kf-stage__core { opacity: 1; transform: none; }
.kf-stage__core svg { width: 84px; height: 98px; filter: drop-shadow(0 0 26px rgba(0, 190, 255, .8)); animation: kfVeroFloat 4.5s ease-in-out infinite; }
.kf-stage__core:focus-visible { outline: 3px solid #7fd8ff; outline-offset: 4px; }
.kf-stage__hint { position: absolute; left: 50%; top: calc(var(--r) + 84px); transform: translateX(-50%); white-space: nowrap; font-size: .78rem; color: #8fb6d9; opacity: 0; transition: opacity .3s .2s; }
.kf-stage.is-on .kf-stage__hint { opacity: 1; }
.kf-sat {
  position: absolute; left: 0; top: 0;
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #1a6fd4, #0055a4);
  border: 2px solid rgba(255, 255, 255, .6);
  box-shadow: 0 10px 26px rgba(0, 10, 30, .5);
  cursor: pointer;
  transform: translate(0, 0) scale(.2);
  opacity: 0;
  transition: transform .55s cubic-bezier(.34, 1.4, .5, 1), opacity .3s, box-shadow .2s;
  transition-delay: calc(var(--i) * 55ms);
  font: inherit;
  padding: 0;
}
.kf-sat svg { width: 26px; height: 26px; }
.kf-stage.is-on .kf-sat { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 1; }
.kf-sat:hover, .kf-sat:focus-visible { box-shadow: 0 10px 28px rgba(0, 10, 30, .55), 0 0 0 5px rgba(127, 216, 255, .3), 0 0 26px rgba(0, 163, 224, .7); outline: none; }
.kf-sat.is-active { background: linear-gradient(135deg, #10b981, #0e9a6c); }
.kf-sat--all { background: linear-gradient(135deg, #2a3a5c, #13203a); }
.kf-sat__lbl {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: .76rem; font-weight: 800;
  color: #eaf3ff; background: rgba(9, 20, 40, .92); padding: 3px 9px; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .14);
  pointer-events: none;
}
.kf-sat__count {
  position: absolute; top: -5px; right: -5px;
  min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; background: #fff; color: #0055a4;
  font-size: .72rem; font-weight: 800; line-height: 22px; text-align: center;
}
@media (max-width: 420px) {
  .kf-stage { --r: 118px; }
  .kf-sat { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .kf-stage__core svg { width: 70px; height: 82px; }
}
.kf-vero.is-open { opacity: 0 !important; }
body.kf-orbit-open .floating-sidebar, body.kf-orbit-open .back-to-top { visibility: hidden !important; }

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  .kf-hero { min-height: auto; padding: calc(var(--header-height) + 2.2rem) 0 5.5rem; }
  .kf-next { grid-template-columns: 1fr; width: 100%; max-width: 420px; }
  .kf-count__cell { flex: 1; min-width: 0; }
  .kf-film,
  .kf-film:nth-of-type(even) {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    min-height: 0;
    padding: 2.8rem 0;
  }
  .kf-film:nth-of-type(even) .kf-film__media { order: 0; }
  /* Handy: Nummer groß und sichtbar über dem Bild, fährt seitlich mit */
  .kf-film__num {
    position: relative; left: auto; top: auto; z-index: 2;
    font-size: 5.6rem; margin: 0 0 -2.6rem -.2rem;
    -webkit-text-stroke: 1.5px rgba(127, 216, 255, .45);
    transform: translateX(calc((1 - var(--o)) * -40px + var(--x) * 30px));
    opacity: calc(.25 + var(--o) * .75 - var(--x) * .5);
  }
  .kf-film__media { perspective: 900px; }
  .kf-film__frame {
    transform: rotateX(calc((1 - var(--o)) * 26deg - var(--x) * 10deg)) scale(calc(.7 + var(--o) * .3 - var(--x) * .08));
    clip-path: inset(calc((1 - var(--o)) * 20%) calc((1 - var(--o)) * 46%) round 16px);
    border-radius: 16px;
  }
  .kf-film__glow { inset: 0 -4%; filter: blur(36px) saturate(1.4); }
  .kf-filterbar { margin: 0 0 .5rem; }
  .kf-filterbar__state { width: 100%; }
}
@media (max-width: 768px) {
  /* rechts sitzt die Seitenleiste, unten die App-Leiste (bis 768 px) */
  /* VERO übernimmt am Handy den Platz des Startseiten-Knopfs der rechten Seitenleiste (der ist auf dieser Seite ausgeblendet) */
  .kf-body .floating-sidebar__btn--home { display: none !important; }
  .kf-vero { width: 56px; height: 56px; right: calc(12px + env(safe-area-inset-right)); bottom: calc(env(safe-area-inset-bottom) + 128px); z-index: 1001; }
  .kf-vero__hint { width: 18px; height: 18px; right: -2px; top: -2px; }
  .kf-vero__hint svg { width: 10px; height: 10px; }
  .kf-vero__ring--o { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .kf-vero__ring--i { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .kf-vero__shield { width: 34px; height: 40px; }
  /* Sprechblase als schmale Leiste über VERO und App-Leiste, volle Breite */
  .kf-bubble {
    position: fixed; left: 12px; right: 12px; width: auto; max-width: none;
    bottom: calc(env(safe-area-inset-bottom) + 66px);
    border-radius: 14px; font-size: .86rem; padding: .6rem .8rem;
    transform-origin: 0 100%;
  }
}
@media (max-width: 600px) {

  .kf-wish__foot .kf-btn { width: 100%; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .kf-film, .kf-film:nth-of-type(even) { --p: 0 !important; --e: 1 !important; --o: 1 !important; --x: 0 !important; }
  .kf-film__frame, .kf-film__body { filter: none; opacity: 1; transform: none; }
  .kf-film__flash { display: none; }
  .kf-stage__ring { animation: none !important; }
  .kf-film__frame { transform: none; clip-path: none; }
  .kf-film__frame::before, .kf-film__frame::after { display: none; }
  .kf-film__body > * { opacity: 1; transform: none; transition: none; }
  .kf-page::before, .kf-hero__beam, .kf-hero__dust { display: none; }
  .kf-film__loop { display: none; }
}
/* Ohne JS: alles sichtbar */
.no-js .kf-film__body > * { opacity: 1; transform: none; }
.no-js .kf-film__frame { clip-path: none; transform: none; }

/* Datenschutz-Hinweis unter der Filterleiste */
.kf-privacy {
  display: block; padding-left: 1.4rem; position: relative;
  max-width: 1100px; margin: 0 auto;
  font-size: .78rem; color: var(--kf-muted);
}
.kf-privacy svg { position: absolute; left: 0; top: .2rem; width: 14px; height: 14px; }
.kf-privacy + .kf-film { padding-top: clamp(2rem, 5vh, 3.5rem); }

/* =====================================================================
   Runde 3 (03.11.2026): Timos Rückmeldung
   - Filmstreifen links entfernt (Element ist raus)
   - Handy: kompakter Einstieg, Premieren-Karte halb so groß, kein Maus-Symbol,
     der erste Film schaut unten schon ins Bild
   - VERO präsenter: größer, kleine Gesten, Jubel wenn ein Film aufgeht
   ===================================================================== */
.kf-strip { display: none !important; }
.kf-mob { display: none; }
.kf-scrollhint__chev { display: none; }

/* VERO-Gesten */
.kf-vero.is-peek .kf-vero__shield { animation: kfPeek .9s cubic-bezier(.34, 1.5, .5, 1); }
@keyframes kfPeek { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-12px) scale(1.08); } 70% { transform: translateY(2px) scale(.98); } }
.kf-vero.is-twirl #kfv-sword { animation: kfTwirl .9s cubic-bezier(.3, 1.3, .4, 1); }
@keyframes kfTwirl { 0%, 100% { transform: rotate(0); } 30% { transform: translateY(-6%) rotate(-18deg) scale(1.1); } 65% { transform: translateY(-3%) rotate(12deg) scale(1.05); } }
.kf-vero.is-cheer .kf-vero__ring--o { animation: kfDome 1s ease-out 1, kfRingO 3.5s ease-in-out 1s infinite alternate; }
@keyframes kfDome { 0% { transform: scale(1); opacity: 1; border-color: rgba(160, 235, 255, .9); } 100% { transform: scale(2.3); opacity: 0; } }
.kf-vero__shield { filter: drop-shadow(0 0 16px rgba(0, 163, 224, .7)); }

@media (min-width: 769px) {
  .kf-vero { width: 104px; height: 104px; }
  .kf-vero__shield { width: 62px; height: 72px; }
  .kf-vero__ring--o { width: 100px; height: 100px; margin: -50px 0 0 -50px; }
  .kf-vero__ring--i { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
}

@media (max-width: 768px) {
  .kf-desk { display: none; }
  .kf-mob { display: inline; }

  /* Einstieg kompakt: Kopf + Karte passen in den ersten Bildschirm, darunter schaut Film 01 hervor */
  .kf-hero { min-height: 0; padding: calc(var(--header-height) + 1.1rem) 0 2.6rem; }
  .kf-kicker { font-size: .62rem; letter-spacing: .1em; padding: .35rem .75rem; margin-bottom: .9rem; }
  .kf-hero h1 { font-size: clamp(2rem, 9.4vw, 2.5rem); margin-bottom: .7rem; }
  .kf-hero__lead { font-size: .95rem; line-height: 1.55; margin-bottom: 1.1rem; }

  .kf-next {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .55rem .7rem;
    padding: .7rem .75rem;
    border-radius: 16px;
    max-width: 440px;
  }
  .kf-next__label { font-size: .6rem; letter-spacing: .1em; }
  .kf-next__title { font-size: .92rem; margin-top: .05rem; }
  .kf-next__when { font-size: .74rem; }
  .kf-count { gap: .25rem; align-self: center; }
  .kf-count__cell { min-width: 0; width: 38px; flex: none; padding: .28rem 0 .2rem; border-radius: 8px; }
  .kf-count__num { font-size: .95rem; }
  .kf-count__unit { font-size: .5rem; letter-spacing: .04em; }
  .kf-next__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
  .kf-next__actions .kf-btn { font-size: .78rem; padding: .55rem .5rem; gap: .35rem; min-height: 40px; }
  .kf-next__actions .kf-btn svg { width: 15px; height: 15px; }

  /* Kein Maus-Symbol am Handy: ein wippender Pfeil zeigt, dass es weitergeht */
  .kf-scrollhint { bottom: .5rem; flex-direction: row; gap: .35rem; color: #9fdcff; font-weight: 700; letter-spacing: .12em; }
  .kf-scrollhint__reel { display: none; }
  .kf-scrollhint__chev { display: block; width: 18px; height: 18px; animation: kfChev 1.4s ease-in-out infinite; }
  @keyframes kfChev { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(5px); opacity: 1; } }

  /* Liste rückt dicht an den Einstieg */
  .kf-list { padding-top: .6rem; }
  .kf-filterbar { padding: .5rem .5rem .5rem .9rem; flex-wrap: nowrap; }
  .kf-filterbar__state { width: auto; font-size: .88rem; }
  .kf-privacy { font-size: .72rem; margin-top: .5rem; }
  .kf-privacy + .kf-film { padding-top: 1.2rem; }

  /* VERO größer und auffälliger */
  .kf-vero { width: 64px; height: 64px; }
  .kf-vero__ring--o { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .kf-vero__ring--i { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .kf-vero__shield { width: 40px; height: 47px; }
}
@media (prefers-reduced-motion: reduce) {
  .kf-scrollhint__chev { animation: none; }
}
@media (max-width: 768px) {
  .kf-hero { padding-bottom: 2.2rem; }
  .kf-hero__lead .kf-mob { display: block; }
  .kf-filterbar__state strong { white-space: nowrap; }
  .kf-film__num { font-size: 4.6rem; margin-bottom: -2.3rem; }
  .kf-list > .container > .kf-film:first-of-type { padding-top: .6rem; }
}
.kf-filterbar__state { margin: 0; }
@media (min-width: 769px) { .kf-hero { padding-bottom: 7.5rem; } }

/* =====================================================================
   Runde 4 (03.11.2026): Design-Prüfung → Ziel 9
   ===================================================================== */
/* Kein Doppelbild: Loop liegt exakt wie das Standbild, Standbild blendet aus */
.kf-film__loop { transform: translateY(calc(var(--p) * -5%)) scale(1.1); transition: opacity .45s cubic-bezier(.4, 0, .2, 1); }
.kf-film__poster { transition: opacity .45s cubic-bezier(.4, 0, .2, 1); }
.kf-film.is-looping .kf-film__poster { opacity: 0; }
/* Vorhang länger sichtbar */
.kf-film__frame::before, .kf-film__frame::after { opacity: calc(1 - var(--o) * 1.3); }

/* Desktop: Filme größer (Kino statt Briefmarke), Einstieg kürzer – Film 01 schaut unten ins Bild */
@media (min-width: 861px) {
  .kf-film { max-width: 1240px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .kf-film:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .kf-film__title { font-size: clamp(2rem, 3.4vw, 3rem); }
}
@media (min-width: 769px) {
  .kf-hero { min-height: min(76vh, 740px); padding-bottom: 5rem; }
}

/* Countdown erst zeigen, wenn er die echten Werte hat (kein „0 0 0 0“-Flackern) */
.kf-count { visibility: hidden; }
.kf-next.is-ready .kf-count { visibility: visible; }

/* Platzhalter: eine ruhige Reihe mit zwei kompakten Karten statt zwei leerer Szenen */
.kf-ph-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem);
  max-width: 1240px; margin: 1rem auto 0; padding: 1rem 0 2rem;
}
.kf-ph-row .kf-film {
  display: flex; flex-direction: column; gap: 1rem;
  min-height: 0; padding: 0; max-width: none;
  --o: 1 !important; --x: 0 !important; --p: 0 !important;
}
.kf-ph-row .kf-film__num { display: none; }
.kf-ph-row .kf-film__media { order: 0 !important; }
.kf-ph-row .kf-film__frame { aspect-ratio: 21 / 9; transform: none; clip-path: none; filter: none; }
.kf-ph-row .kf-film__frame::before, .kf-ph-row .kf-film__frame::after { display: none; }
.kf-ph-row .kf-film__body { opacity: 1; transform: none; }
.kf-ph-row .kf-film__body > * { opacity: 1; transform: none; }
.kf-ph-row .kf-film__title { font-size: 1.35rem; margin-bottom: .4rem; }
.kf-ph-row .kf-film__text { font-size: .92rem; margin-bottom: .9rem; }
.kf-ph-row .kf-ph__clap { width: 22%; }
.kf-ph-row .kf-ph__q { font-size: clamp(3rem, 7vw, 4.5rem); }

/* Filterleiste im Filterzustand: Filter-Knopf nur als Symbol */
.kf-filterbar.is-filtered [data-kf-open-orbit] { padding: .5rem; width: 40px; height: 40px; font-size: 0; gap: 0; }
.kf-filterbar.is-filtered [data-kf-open-orbit] svg { width: 18px; height: 18px; }

/* VERO: während des Scrollens kleiner und dezenter, danach wieder voll da */
.kf-vero__float { transition: transform .35s cubic-bezier(.34, 1.3, .5, 1); }
.kf-vero.is-scrolling .kf-vero__float { transform: scale(.82); }
.kf-vero.is-scrolling .kf-vero__ring { opacity: .5; }

@media (max-width: 768px) {
  .kf-kicker { display: none; }
  .kf-privacy { display: none; }
  .kf-film__num { margin-left: 0; transform: translateX(calc((1 - var(--o)) * 24px + var(--x) * 30px)); }
  .kf-film__frame { transform: rotateX(calc((1 - var(--o)) * 14deg - var(--x) * 8deg)) scale(calc(.82 + var(--o) * .18 - var(--x) * .06)); }
  .kf-scrollhint { font-size: .8rem; }
  .kf-scrollhint__chev { width: 22px; height: 22px; }
  .kf-list.is-nudge { animation: kfNudge .9s cubic-bezier(.3, 1.4, .5, 1); }
  @keyframes kfNudge { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }
  /* Sprechblase über VERO statt über ihm */
  .kf-bubble { bottom: calc(env(safe-area-inset-bottom) + 200px); border-radius: 14px 14px 4px 14px; }
  .kf-ph-row { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kf-list.is-nudge { animation: none; }
}
.kf-ph-row .kf-film__media, .kf-ph-row .kf-film__body { width: 100%; }
.kf-ph-row .kf-film__frame { width: 100%; }

/* =====================================================================
   Runde 5 (03.11.2026)
   ===================================================================== */
/* Desktop: Film 01 schaut im ersten Bildschirm ins Bild */
@media (min-width: 769px) {
  .kf-hero { min-height: min(68vh, 640px); padding-bottom: 3.5rem; }
  .kf-scrollhint { bottom: .9rem; }
  .kf-next { margin-bottom: 2.4rem; }
  .kf-list { padding-top: 1.2rem; }
  .kf-privacy + .kf-film { padding-top: 1.6rem; }
  .kf-bubble { max-width: 240px; bottom: calc(100% + 16px); }
}
/* Filterleiste bricht nicht um */
.kf-filterbar__actions { flex-wrap: nowrap; }
.kf-filterbar [data-kf-reset] { padding: .5rem .8rem; font-size: .78rem; white-space: nowrap; }
.kf-filterbar.is-filtered .kf-filterbar__state { white-space: nowrap; font-size: .82rem; }

@media (max-width: 768px) {
  /* VERO kompakter in der rechten Spalte, Textspalte bleibt frei */
  .kf-vero { width: 54px; height: 54px; }
  .kf-vero__ring--o { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .kf-vero__ring--i { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .kf-vero__shield { width: 32px; height: 38px; }
  .kf-vero.is-scrolling { opacity: .55; }
  .kf-film__body, .kf-filterbar__state { padding-right: 52px; }
  .kf-filterbar .kf-filterbar__state { padding-right: 0; }
  .kf-film__body .kf-actions .kf-btn--primary { max-width: 100%; }
  /* Sprechblase rechts über VERO, mit Spitze zu ihm */
  .kf-bubble { left: auto; right: 12px; max-width: 78vw; bottom: calc(env(safe-area-inset-bottom) + 192px); border-radius: 14px 14px 4px 14px; }
  .kf-bubble::after { content: ''; position: absolute; right: 22px; bottom: -7px; width: 12px; height: 12px; background: #0c1a30; border-right: 1px solid rgba(0, 163, 224, .5); border-bottom: 1px solid rgba(0, 163, 224, .5); transform: rotate(45deg); }
}
@media (min-width: 769px) {
  .kf-hero { padding-top: calc(var(--header-height) + 2rem); }
  .kf-kicker { margin-bottom: 1rem; }
  .kf-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); margin-bottom: .9rem; }
  .kf-hero__lead { max-width: 720px; margin-bottom: 1.6rem; }
  .kf-next { margin-bottom: 2rem; }
  .kf-filterbar { margin-bottom: .6rem; }
}
@media (min-width: 769px) {
  .kf-list { padding-top: .6rem; }
  .kf-privacy + .kf-film { padding-top: .8rem; align-items: start; }
  .kf-privacy + .kf-film .kf-film__body { padding-top: 1rem; }
  .kf-scrollhint { bottom: .5rem; }
}
@media (min-width: 769px) {
  /* Film 01 schaut selbst ins Bild – der Maus-Hinweis wird nicht mehr gebraucht */
  .kf-scrollhint { display: none; }
  .kf-hero { padding-bottom: 1.6rem; min-height: 0; }
  .kf-next { margin-bottom: 0; }
}

/* =====================================================================
   Runde 6 (03.11.2026)
   ===================================================================== */
/* Fließtext blendet mit dem Rest ein (Deckkraft nicht mehr fest auf .86) */
.kf-film__text { opacity: 0; color: rgba(220, 232, 245, .88); }
.kf-film.is-in .kf-film__text, .kf-ph-row .kf-film__text, .no-js .kf-film__text { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .kf-film__text { opacity: 1; } }

/* Öffnung: kein schmaler Schlitz mehr – höchstens 22 % seitlich, weniger Kippen */
.kf-film__frame {
  transform:
    rotateX(calc((1 - var(--o)) * 12deg - var(--x) * 8deg))
    rotateY(calc((1 - var(--o)) * var(--dir) * -10deg))
    scale(calc(.84 + var(--o) * .16 - var(--x) * .06));
  clip-path: inset(calc((1 - var(--o)) * 10%) calc((1 - var(--o)) * 22%) round 20px);
}
@media (min-width: 861px) {
  .kf-film { padding: clamp(1.5rem, 4.5vh, 3rem) 0; }
}
@media (max-width: 768px) {
  .kf-film__frame {
    transform: rotateX(calc((1 - var(--o)) * 10deg - var(--x) * 6deg)) scale(calc(.86 + var(--o) * .14 - var(--x) * .05));
    clip-path: inset(calc((1 - var(--o)) * 8%) calc((1 - var(--o)) * 18%) round 16px);
  }
  /* Lesetext bleibt beim Lesen voll da */
  .kf-film__body { opacity: 1 !important; transform: none !important; }
  /* VERO mit Luft über dem „⋮“-Knopf; Filter-Plakette erst nach dem ersten Scrollen */
  .kf-vero { bottom: calc(env(safe-area-inset-bottom) + 186px); }
  .kf-bubble { bottom: calc(env(safe-area-inset-bottom) + 252px); }
  .kf-vero__hint { opacity: 0; transition: opacity .4s; }
  .kf-vero.is-seen .kf-vero__hint { opacity: 1; }
}

/* =====================================================================
   Runde 7 (03.11.2026)
   ===================================================================== */
/* VERO tritt zurück, solange er auf einem Filmbild liegt */
.kf-vero__float { transition: transform .35s cubic-bezier(.34, 1.3, .5, 1), opacity .3s; }
.kf-vero.is-over-film:not(.is-open) .kf-vero__float { transform: scale(.78); opacity: .45; }
.kf-vero.is-over-film .kf-vero__ring { opacity: .3; }
.kf-vero.is-over-film .kf-vero__hint { opacity: 0 !important; }

/* Desktop: VERO als eigene Figur mit Abstand zur Werkzeugleiste, Blase links neben ihm */
@media (min-width: 769px) {
  .kf-vero { right: calc(124px + env(safe-area-inset-right)); bottom: 36px; }
  .kf-bubble { right: calc(100% + 12px); bottom: 14px; max-width: 220px; border-radius: 16px 16px 4px 16px; }
  .kf-vero__hint { opacity: 0; transition: opacity .4s; }
  .kf-vero.is-seen .kf-vero__hint { opacity: 1; }
}

/* Handy: kräftigere Öffnung, weniger Leerraum zwischen den Filmen */
@media (max-width: 768px) {
  .kf-film__frame {
    clip-path: inset(calc((1 - var(--o)) * 12%) calc((1 - var(--o)) * 26%) round 16px);
    transform: rotateX(calc((1 - var(--o)) * 12deg - var(--x) * 6deg)) scale(calc(.84 + var(--o) * .16 - var(--x) * .05));
  }
  .kf-film, .kf-film:nth-of-type(even) { padding: 1.6rem 0; }
  .kf-film__num { margin-bottom: -2.6rem; }
}

/* Rückfrage vor dem Kalender-Download (kommende Filme) */
.kf-ask {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 1rem; gap: .3rem;
  background: rgba(6, 10, 20, .82); backdrop-filter: blur(6px);
  animation: kfAskIn .25s ease-out;
}
@keyframes kfAskIn { from { opacity: 0; } to { opacity: 1; } }
.kf-ask__t { margin: 0; font-family: var(--font-heading); font-weight: 800; color: #fff; font-size: 1.05rem; }
.kf-ask__s { margin: 0 0 .6rem; color: #b9cde3; font-size: .88rem; max-width: 30ch; }
.kf-ask__b { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.kf-ask .kf-btn { padding: .55rem .95rem; font-size: .82rem; }