/* ============================================================
   KI-Marketing-Masterclass · „KI-Film" (The Portal, komplett mit KI)
   Popup (?kf=1, z. B. aus Mail #4) und Sektion (?kfsec=1) auf /ki-masterclass.
   Player-Look übernommen aus ki-masterclass-video.css (.vp-player), eigenes
   Präfix kf-, damit nichts mit dem LP-CSS kollidiert. Basis-Overlay und
   Buttons kommen aus ki-masterclass-warteliste.css (.wl-popup, .new-btn).
   ============================================================ */

/* ── Player ── */
.kf-player {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 0.5rem; overflow: hidden; background: #0f3531;
  isolation: isolate; cursor: pointer;
}
.kf-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0f3531; }
.kf-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kf-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #0c161500 40%, #0c161580); }
.kf-play {
  position: absolute; inset: 0; margin: auto;
  width: 5.5rem; height: 5.5rem; border-radius: 100%;
  background: #fff; color: #193f3b;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 50px -12px #031d1acc, 0 0 0 10px #ffffff24;
  transition: transform 0.5s;
}
.kf-player:hover .kf-play { transform: scale(1.06); }
.kf-play svg { width: 1.75rem; height: 1.75rem; margin-left: 0.25rem; }
.kf-play::before {
  content: ''; position: absolute; inset: -0.35rem; border-radius: 100%;
  border: 2px solid #ffffff99; pointer-events: none;
  animation: kfPulse 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes kfPulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  70% { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .kf-play::before { animation: none; opacity: 0; } }
.kf-duration {
  position: absolute; right: 1rem; bottom: 1rem;
  background: #031d1acc; color: #fff;
  font-size: 0.8125rem; letter-spacing: -0.26px; font-weight: 500;
  border-radius: 0.375rem; padding: 0.3rem 0.65rem; backdrop-filter: blur(4px);
}
.kf-player.is-playing { cursor: default; }
.kf-player.is-playing .kf-poster, .kf-player.is-playing .kf-shade,
.kf-player.is-playing .kf-play, .kf-player.is-playing .kf-duration { display: none; }

/* ── Kopf + CTA (Popup und Sektion) ── */
.kf-head { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.kf-head .h2 { max-width: 40rem; text-wrap: balance; }
.kf-head .card-copy { max-width: 34rem; text-wrap: balance; }
.kf-cta { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; width: 100%; }
.kf-cta .new-btn { max-width: 30rem; }
.kf-done { display: none; align-items: center; gap: 0.5rem; font-size: 1rem; color: var(--green, #193f3b); }
body.wl-done .kf-cta .new-btn, body.wl-done .kf-cta .wl-hint { display: none; }
body.wl-done .kf-done { display: inline-flex; }

/* ── Mitglieder-Modus: Hinweis-Text statt Warteliste-Button ── */
.kf-member { display: flex; justify-content: center; text-align: center; }
.kf-member .card-copy { max-width: 36rem; text-wrap: balance; color: var(--black, #0c1615); }

/* ── Popup (Overlay = .wl-popup; Karte bewusst NICHT .wl-popup-card, weil die
   Popup-Varianten der LP diese Klasse umfärben) ── */
.kf-popup .kf-card {
  position: relative; background: var(--white, #fff); color: var(--black, #0c1615);
  border-radius: 0.75rem; width: min(60rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem); overflow-y: auto;
  display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem;
  padding: 2.5rem 2.5rem 2rem;
  transform: scale(0.94); transition: transform 0.35s ease;
}
.kf-popup.is-open .kf-card { transform: scale(1); }
/* Karte ist höhenbegrenzt und scrollt: Kinder nicht schrumpfen lassen (sonst kollabiert der 16:9-Player) */
.kf-popup .kf-card > * { flex: none; }
.kf-close {
  position: absolute; top: 0.9rem; right: 0.9rem; width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center; border-radius: 100%;
  color: var(--text-56, #0c16158f); font-size: 1rem; transition: all 0.2s; z-index: 2;
}
.kf-close:hover { background: var(--green-4, #193f3b0a); color: var(--black, #0c1615); }
.kf-popup .kf-card .kf-head .h2 { font-size: 2.125rem; letter-spacing: -1.2px; }

/* ── Sektion ── */
.kf-sec { background: var(--white, #fff); padding: 5rem 0; }
.kf-sec .kf-wrap { display: flex; flex-direction: column; align-items: center; gap: 2.25rem; }
.kf-sec .kf-player { max-width: 56rem; box-shadow: 0 24px 60px -30px #0f353166; }

@media (max-width: 767px) {
  .kf-popup .kf-card { padding: 2.75rem 1.125rem 1.5rem; gap: 1.125rem; }
  .kf-popup .kf-card .kf-head .h2 { font-size: 1.625rem; letter-spacing: -0.8px; }
  .kf-play { width: 4.25rem; height: 4.25rem; }
  .kf-play svg { width: 1.375rem; height: 1.375rem; }
  .kf-duration { right: 0.625rem; bottom: 0.625rem; }
  .kf-cta .new-btn { width: 100%; }
  .kf-sec { padding: 3.5rem 0; }
}