/* Kennenlernen · „Die Tür zu meinem Herzen“ · Bea (Webdesign) · 2026-10-12
   Nur CSS-3D, kein WebGL: schnell auch am Handy. Bei „Bewegung reduzieren“ ohne Animation. */

.kl { background: radial-gradient(60% 50% at 50% 55%, rgba(14, 46, 120, .28), transparent 70%), var(--bg); min-height: 100vh; }

.kl-top { position: absolute; inset: 0 0 auto; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 14px var(--gutter); }
.kl-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 15px; }
.kl-brand img { width: 42px; height: auto; }
.kl-back { color: var(--text-2); text-decoration: none; font-size: 14px; }
.kl-back:hover { color: var(--gold); }

/* ---------- Bühne ---------- */
.kl-stage { min-height: 100vh; min-height: 100svh; display: grid; justify-items: center; align-content: center; gap: clamp(18px, 3.4vh, 40px); padding: 72px var(--gutter) 32px; text-align: center; }
.kl-title { margin: 0; max-width: 15ch; font-size: clamp(30px, 5.2vw, 68px); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; }
.kl-title em { font-family: var(--serif); font-weight: 400; color: var(--gold);
  background: linear-gradient(100deg, var(--gold) 20%, var(--gold-2) 45%, var(--gold) 70%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: klShine 5s ease-in-out 3s infinite; }
@keyframes klShine { 0%, 60% { background-position: 100% 0; } 100% { background-position: -150% 0; } }

/* Wort für Wort aus der Unschärfe */
.kl-title .w { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(.35em); transition: opacity 1s ease, filter 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .1, 1); transition-delay: calc(var(--i) * 110ms + 300ms); }
.kl.is-ready .kl-title .w { opacity: 1; filter: none; transform: none; }

/* ---------- Tür ---------- */
.kl-door-scene { position: relative; perspective: 1400px; opacity: 0; transform: translateY(24px); transition: opacity 1.2s ease 1.9s, transform 1.4s cubic-bezier(.2, .7, .1, 1) 1.9s; }
.kl.is-ready .kl-door-scene { opacity: 1; transform: none; }
.kl-doorway { --w: min(300px, 62vw, 26svh); position: relative; width: var(--w); aspect-ratio: 3 / 5.4; border-radius: 10px 10px 0 0;
  background: #03050a; box-shadow: 0 0 0 10px #10182c, 0 0 0 11px rgba(156, 194, 255, .35), 0 40px 80px rgba(0, 0, 0, .7); transform-style: preserve-3d; }
@supports not (aspect-ratio: 1) { .kl-doorway { height: calc(var(--w) * 1.8); } }

/* Raum hinter der Tür: warmes Licht */
.kl-room { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.kl-room-light { position: absolute; inset: -20%; background: radial-gradient(50% 45% at 50% 55%, rgba(255, 225, 170, .95), rgba(226, 150, 90, .55) 30%, rgba(42, 114, 255, .55) 55%, rgba(7, 11, 22, 1) 80%); opacity: .25; transition: opacity 1.6s ease .3s; }
.kl.is-open .kl-room-light { opacity: 1; }

/* Video steht im Raum */
.kl-video { position: absolute; inset: 6% 4% 0; margin: 0; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transform: scale(.94); transition: opacity 1.2s ease 1s, transform 1.6s cubic-bezier(.2, .7, .1, 1) 1s; }
.kl.is-open .kl-video { opacity: 1; transform: none; }
.kl-video img, .kl-video video { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 0 10px rgba(0, 0, 0, .95)) drop-shadow(24px 26px 18px rgba(0, 0, 0, .95)) drop-shadow(0 0 44px rgba(0, 0, 0, .85)); }
.kl-video img[hidden] { display: none; }
.kl-video .ph-badge { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* Türblatt */
.kl-door { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 2.2s cubic-bezier(.65, 0, .25, 1); cursor: pointer; z-index: 2; }
.kl.is-open .kl-door { transform: rotateY(-108deg); cursor: default; }
.kl-door-face { position: absolute; inset: 0; border-radius: 8px 8px 0 0; overflow: hidden;
  background: linear-gradient(90deg, rgba(255, 255, 255, .03), transparent 30%, rgba(0, 0, 0, .35)), linear-gradient(180deg, #16213f, #0d1428 60%, #090e1c);
  box-shadow: inset 0 0 0 1px rgba(156, 194, 255, .18), inset -18px 0 30px rgba(0, 0, 0, .45); backface-visibility: hidden; }
.kl-panel { position: absolute; left: 13%; right: 13%; border-radius: 4px; border: 1px solid rgba(156, 194, 255, .22); box-shadow: inset 0 0 18px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .04); }
.kl-panel.p1 { top: 7%; height: 26%; }
.kl-panel.p2 { top: 38%; height: 26%; }
.kl-panel.p3 { top: 69%; height: 25%; }
.kl-heart { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); font-size: clamp(20px, 3vw, 28px); color: #e0263f; text-shadow: 0 0 18px rgba(224, 38, 63, .9); animation: klBeat 2.4s ease-in-out infinite; }
@keyframes klBeat { 0%, 70%, 100% { transform: translateX(-50%) scale(1); } 78% { transform: translateX(-50%) scale(1.18); } 86% { transform: translateX(-50%) scale(1.04); } 92% { transform: translateX(-50%) scale(1.14); } }
.kl-knob { position: absolute; right: 10%; top: 52%; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--gold-2), var(--gold) 45%, #7a5a26); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.kl-door-back { position: absolute; inset: 0; border-radius: 8px 8px 0 0; transform: rotateY(180deg); backface-visibility: hidden;
  background: linear-gradient(270deg, rgba(255, 225, 170, .22), rgba(20, 34, 70, .9) 40%, #0a1020); box-shadow: inset 0 0 0 1px rgba(156, 194, 255, .25); }
.kl-door-edge { position: absolute; top: 0; bottom: 0; right: 0; width: 14px; transform-origin: right center; transform: rotateY(90deg); background: linear-gradient(90deg, #060a14, #16213f); }

/* Lichtspalt an der geschlossenen Tür */
.kl-leak { position: absolute; top: 2%; bottom: 0; right: -1px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--gold-2) 20%, var(--gold) 80%, transparent); box-shadow: 0 0 18px 4px rgba(156, 194, 255, .55), 0 0 60px 10px rgba(42, 114, 255, .35); animation: klLeak 3.5s ease-in-out infinite; transition: opacity .6s; z-index: 3; }
@keyframes klLeak { 50% { opacity: .55; } }
.kl.is-open .kl-leak { opacity: 0; animation: none; }

/* Lichtschein auf dem Boden */
.kl-floor { position: absolute; left: 50%; bottom: -40px; width: 160%; height: 80px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 0, rgba(156, 194, 255, .22), transparent 70%); opacity: .4; transition: opacity 1.6s ease .4s; pointer-events: none; }
.kl.is-open .kl-floor { opacity: 1; background: radial-gradient(50% 50% at 50% 0, rgba(255, 220, 160, .45), rgba(42, 114, 255, .2) 50%, transparent 75%); }

/* ---------- Knöpfe ---------- */
.kl-actions { display: grid; justify-items: center; align-content: start; gap: 10px; min-height: 84px; opacity: 0; transition: opacity 1s ease 2.6s; }
.kl.is-ready .kl-actions { opacity: 1; }
.kl-open { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border: 0; border-radius: 999px; font: inherit; font-weight: 600; font-size: 17px; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, var(--accent), var(--wine)); box-shadow: 0 0 0 1px rgba(156, 194, 255, .4), 0 12px 30px rgba(14, 46, 120, .6); transition: transform .2s, filter .2s; }
.kl-open:hover { transform: translateY(-1px); filter: brightness(1.12); }
.kl.is-open .kl-open, .kl.is-open .kl-hint { display: none; }
.kl-hint { margin: 0; color: var(--text-2); font-size: 13px; }
.kl-video-ctrl { display: flex; gap: 8px; }
.kl-video-ctrl .btn-small { padding: 0 18px; min-width: 110px; }
.kl-video-ctrl[hidden] { display: none; }

/* ---------- Nach dem Video ---------- */
.kl-after { padding: clamp(64px, 10vh, 120px) var(--gutter); border-top: 1px solid var(--line); }
.kl-after-inner { max-width: 760px; margin: 0 auto; }
.kl-after .kicker { color: var(--gold); }
.kl-after h2 { margin: 0 0 14px; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.02em; }
.kl-after h2 em { display: block; font-family: var(--serif); font-weight: 400; color: var(--gold); }
.kl-after-lead { color: #dde4ef; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2vw, 22px); margin: 0 0 30px; }
.kl-form { padding: clamp(20px, 3vw, 32px); border-radius: 24px; border: 1px solid var(--line); background: var(--bg-2); }
.kl-form .check { display: flex; gap: 10px; align-items: flex-start; }
.kl-form .check input { width: auto; margin-top: 3px; accent-color: var(--accent); }
.kl-form .check a, .kl-alt a { color: var(--gold); }
.kl-alt { color: var(--text-2); font-size: 14px; margin: 18px 0 0; text-align: center; }
.kl-foot { display: flex; justify-content: center; gap: 22px; padding: 28px var(--gutter) 40px; border-top: 1px solid var(--line); font-size: 13px; }
.kl-foot a { color: var(--text-2); text-decoration: none; }
.kl-foot a:hover { color: var(--gold); }
@media (max-width: 700px) { .kl-form { grid-template-columns: 1fr; } }

/* ---------- Bewegung reduzieren ---------- */
  html.motion-reduce .kl-title .w, html.motion-reduce .kl-door-scene, html.motion-reduce .kl-actions, html.motion-reduce .kl-door, html.motion-reduce .kl-video, html.motion-reduce .kl-room-light, html.motion-reduce .kl-floor { transition: none !important; }
  html.motion-reduce .kl-heart, html.motion-reduce .kl-leak, html.motion-reduce .kl-title em { animation: none; }

/* iPhone: Schatten-Filter direkt auf dem Alpha-Video (MOV) macht es dort unsichtbar → beim Abspielen ohne Filter (12.10.) */
.no-filter video { filter: none !important; }

/* Tür-Video ohne Schatten (Christoph 17.10.) */
.kl-video img, .kl-video video { filter: none; }

/* iPhone (Christoph 22.10.: Video hörbar, aber unsichtbar): Alpha-Video nicht im 3D-Raum zeichnen lassen.
   Die Perspektive sitzt dafür direkt am Türrahmen, der Rahmen selbst ist flach; das Video blendet nur noch ein (ohne Skalieren). */
.kl.is-mov .kl-door-scene { perspective: none; }
.kl.is-mov .kl-doorway { transform-style: flat; perspective: 1400px; }
.kl.is-mov .kl-video { transform: none; transition: opacity 1.2s ease 1s; }

/* 30.10. Tims Video „Tür zum Herzen“, Safari/iPhone über die gestapelte MP4 (js/alpha-video.js): sichtbar ist der Canvas,
   unten bündig wie das Standbild; das Video selbst spielt unsichtbar (Bild und Ton) */
.kl-video canvas.alpha-cv { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: auto; aspect-ratio: 720 / 1280; }
.kl-video video.alpha-quelle { position: absolute; top: 0; left: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.kl-video .cutout-cc { bottom: 6%; max-width: 96%; font-size: 14px; }   /* bleibt im Türrahmen, sonst schneidet das offene Türblatt links ab */