/* =========================================================
   Cressina & Wanja — v2 „Die Ring-Reise"
   Scroll-Scrub-Video (Platzhalter) + Pop-up-Stationen.
   Hochformat zuerst. Warmes Abendlicht, kein Beetlejuice.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;900&family=Caveat:wght@600;700&display=swap');

:root{
  --cream:#f5efe3; --cream2:#e7dcc8; --ink:#160f1c;
  --gold:#f0c25e; --ember:#ef7d3b; --terra:#d2693f;
  --sage:#9bab86; --mag:#e8527f; --mar:#f2ad33;
  --glass:rgba(22,15,28,.28); --glass-line:rgba(245,239,227,.18);
  --disp:"Anton", Impact, sans-serif;
  --body:"Archivo", -apple-system, "Segoe UI", sans-serif;
  --hand:"Caveat", cursive;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:auto; scroll-snap-type:y proximity; }
body{
  font-family:var(--body); color:var(--cream); background:#1a1322;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--gold); }
.amp{ color:var(--mag); } .mag{ color:var(--mag); } .mar{ color:var(--mar); }

/* ============ FIXED BÜHNE (Video-Platzhalter) ============ */
.stage{ position:fixed; inset:0; z-index:0; overflow:hidden; }
.stage .sky{ position:absolute; inset:0;
  background:linear-gradient(180deg,#f3b25a 0%,#e8814a 38%,#9a4a55 64%,#3a2746 100%); }
.stage .glow{ position:absolute; left:50%; top:60%; width:80vmax; height:80vmax; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,196,120,.55) 0%, rgba(255,150,80,.18) 35%, transparent 65%);
  mix-blend-mode:screen; pointer-events:none; }
.stage .vignette{ position:absolute; inset:0; pointer-events:none; z-index:4;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(10,6,16,.55) 100%); }
.stage .silhouette{ position:absolute; left:-5%; bottom:-1px; width:110%; height:24vh; z-index:3; }
/* echter 3D-Ring (Three.js) — Body-Ebene, über Video, hinter den Karten */
.ring3d{ position:fixed; inset:0; width:100% !important; height:100% !important; z-index:2; pointer-events:none; }
.loading .ring3d{ z-index:9500; }   /* im Ladescreen über dem weißen Hintergrund */
.has3d .ring{ display:none; }       /* Platzhalter-Ring aus, sobald 3D geladen */

/* ============ LADESCREEN ============ */
#loader{ position:fixed; inset:0; z-index:9000; background:#f7f3ec;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:16vh;
  transition:opacity .9s ease; }
#loader.done{ opacity:0; pointer-events:none; }
html:not(.js) #loader{ display:none; }   /* ohne JS keinen Loader */
.loader-bottom{ text-align:center; }
.loader-pct{ font-family:var(--disp); font-size:clamp(3.2rem,15vw,6.5rem); color:var(--ink); line-height:1; }
.loader-unit{ font-size:.5em; color:var(--mar); }
.loader-label{ font-family:var(--hand); font-size:1.4rem; color:var(--terra); margin-top:.3rem; }
.bg-video{ z-index:1; }                     /* Tunnel-Hintergrund über Himmel/Bokeh, hinter Ring & Karten */
.has-video .silhouette, .has-video .glow, .has-video .bokeh{ display:none; }   /* Video bringt eigenen Look mit */
.bokeh{ position:absolute; inset:0; pointer-events:none; }
.bokeh i{ position:absolute; border-radius:50%; background:radial-gradient(circle,#fff5d8,rgba(255,225,160,.2));
  filter:blur(1px); opacity:.0; animation:twinkle 4s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:.15; transform:scale(.85);} 50%{ opacity:.8; transform:scale(1.1);} }

/* der fliegende Ring */
.ring{ position:absolute; left:0; top:0; width:84px; height:84px; will-change:transform;
  transform:translate(-50%,-50%); filter:drop-shadow(0 0 22px rgba(255,200,110,.85)); }
.ring .band{ position:absolute; inset:0; border-radius:50%;
  border:11px solid; border-image:linear-gradient(135deg,#fff2c4,#f0c25e 40%,#a9772a 70%,#ffe9a8) 1;
  -webkit-mask:radial-gradient(transparent 38%,#000 40%); mask:radial-gradient(transparent 38%,#000 40%);
  background:conic-gradient(from 0deg,#f6d885,#a9772a,#ffe9a8,#caa044,#f6d885); border-radius:50%; }
.ring .stone{ position:absolute; top:-9px; left:50%; width:20px; height:20px; transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg,#fff,#bfe9ff 40%,#7fc4e6); box-shadow:0 0 16px #bfe9ff; }

/* ============ HUD (Marke + Fortschritt) ============ */
.hud{ position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px calc(14px + env(safe-area-inset-top,0)); }
.brand{ font-family:var(--disp); font-size:1.5rem; color:#fff; text-decoration:none; line-height:.78; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.brand small{ display:block; font-family:var(--hand); font-size:.62rem; opacity:.9; }
.progress-pill{ display:flex; align-items:center; gap:8px; background:rgba(22,15,28,.55); backdrop-filter:blur(10px);
  border:1px solid var(--glass-line); color:var(--cream); border-radius:999px; padding:7px 12px; cursor:pointer; font:inherit; }
.progress-pill .track{ width:54px; height:6px; border-radius:999px; background:rgba(255,255,255,.22); overflow:hidden; }
.progress-pill .fill{ display:block; height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg,var(--mar),var(--mag)); transition:width .4s ease; }
.progress-pill .count{ font-size:.74rem; font-weight:700; letter-spacing:.02em; white-space:nowrap; }

/* ============ DIE REISE ============ */
.journey{ position:relative; z-index:5; }
.station{ min-height:100svh; display:flex; align-items:center; justify-content:center; padding:96px 20px 80px;
  scroll-snap-align:center; }
.station.flavor{ min-height:80svh; }
/* Tunnel = mittig (kein Links/Rechts mehr) */
.station[data-side]{ justify-content:center; }

/* Intro: Ring oben (Bühne), Namen ins untere Drittel */
.station.intro{ text-align:center; align-items:flex-end; padding-bottom:15vh; }
.intro-inner{ text-shadow:0 4px 24px rgba(0,0,0,.55); }
.title.big-center{ font-size:clamp(3.2rem,18vw,6.4rem); }
.intro-date{ font-family:var(--hand); font-size:1.5rem; color:var(--gold); margin-top:.7rem; }
.station.intro .scrollcue{ margin-top:1.5rem; }

/* kein backdrop-filter (mobil teuer) → leichter Verlauf für Lesbarkeit, Video scheint durch */
.card{ width:min(520px,88vw); background:linear-gradient(180deg, rgba(18,12,24,.34), rgba(18,12,24,.5));
  border:1px solid var(--glass-line); border-radius:22px; padding:30px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.4); }
/* ===== Tunnel: Karten skalieren aus der Mitte — CSS Scroll-Driven (Compositor, kein JS) ===== */
.card, .intro-inner, .flavor-text{ transform-origin:center center; }
@keyframes tunnelCard{
  0%   { opacity:0; transform:scale(.4);  }
  30%  { opacity:1; transform:scale(1);   }
  70%  { opacity:1; transform:scale(1);   }   /* Halte-Zone: lesbar & stabil in der Mitte */
  100% { opacity:0; transform:scale(1.8); }
}
.svd .card, .svd .intro-inner, .svd .flavor-text{
  animation: tunnelCard linear both;
  animation-timeline: view();
  animation-range: cover 0% cover 100%;
  will-change: transform, opacity;
}
/* Fallback ohne Scroll-Driven: sanftes Fade-up via IntersectionObserver */
.js:not(.svd) .card{ opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; }
.js:not(.svd) .station.in .card{ opacity:1; transform:none; }

.eyebrow{ font-family:var(--hand); font-size:1.3rem; color:var(--mar); display:inline-block; transform:rotate(-2deg); margin-bottom:.5rem; }
.title{ font-family:var(--disp); font-size:clamp(3rem,17vw,5.6rem); line-height:.86; text-transform:uppercase; text-shadow:0 6px 30px rgba(0,0,0,.45); }
.title small{ font-family:var(--hand); font-size:.18em; color:var(--mar); text-transform:none; vertical-align:super; }
.statement{ font-family:var(--disp); font-size:clamp(2.6rem,12vw,4.4rem); line-height:.92; text-transform:uppercase; }
.display{ font-family:var(--disp); font-size:clamp(2.4rem,11vw,4rem); line-height:.9; text-transform:uppercase; }
.lead{ margin-top:1rem; opacity:.92; }
.sub{ margin-top:1rem; font-size:1.05rem; opacity:.92; }

.hero-card{ background:linear-gradient(180deg,rgba(22,15,28,.32),rgba(22,15,28,.62)); text-align:left; }
.scrollcue{ margin-top:1.6rem; font-family:var(--hand); font-size:1.25rem; color:var(--gold); }

/* Hintergrund-Hinweis (Planung fürs Video) */
.bg-cue{ display:block; font-family:var(--body); font-size:.72rem; font-weight:500; line-height:1.4;
  text-transform:none; letter-spacing:.01em; color:var(--gold); margin-bottom:14px; padding:7px 11px;
  border:1px dashed rgba(240,194,94,.55); border-radius:8px; background:rgba(0,0,0,.22); }
.bg-cue b{ font-weight:800; }

/* Greif-Cursor beim Ring-Ziehen */
.grabbing, .grabbing *{ cursor:grabbing !important; }

/* Countdown */
.countdown{ display:flex; gap:14px; flex-wrap:wrap; margin-top:1.4rem; }
.countdown .unit{ text-align:center; }
.countdown .num{ font-family:var(--disp); font-size:clamp(1.8rem,8vw,2.8rem); line-height:1; color:#fff; }
.countdown .lbl{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; opacity:.7; margin-top:3px; }

/* Timeline */
.timeline{ list-style:none; margin-top:1rem; }
.timeline li{ display:flex; gap:16px; padding:14px 0; border-bottom:1px solid rgba(245,239,227,.14); }
.timeline .time{ font-family:var(--disp); font-size:1.3rem; color:var(--mar); min-width:84px; }
.timeline .what strong{ display:block; font-family:var(--disp); font-size:1.15rem; text-transform:uppercase; letter-spacing:.01em; }
.timeline .what span{ opacity:.72; font-size:.9rem; }

/* Adresse + Lodging */
.address{ font-family:var(--disp); font-size:1.6rem; line-height:1.1; margin:.8rem 0; color:var(--gold); text-transform:uppercase; }
.lodging{ display:grid; gap:10px; margin:1rem 0 1.2rem; }
.lodge{ background:rgba(245,239,227,.07); border:1px solid var(--glass-line); border-radius:12px; padding:12px 14px; }
.lodge strong{ display:block; }
.lodge span{ font-size:.86rem; opacity:.72; }

/* Buttons */
.btn{ --bg:var(--gold); --fg:#2a1c08; display:inline-flex; align-items:center; gap:.5em; background:var(--bg); color:var(--fg);
  font-family:var(--body); font-weight:800; font-size:.95rem; letter-spacing:.02em; text-transform:uppercase;
  padding:13px 24px; border:none; border-radius:999px; text-decoration:none; cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.4); }
.btn.pink{ --bg:var(--mag); --fg:#fff; }
.btn.ghost{ --bg:transparent; --fg:var(--cream); border:2px solid var(--glass-line); }
.btn.big{ padding:16px 32px; font-size:1.05rem; }

/* Mini-Formulare */
.mini-form{ margin-top:1.2rem; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; opacity:.85; }
.field input, .field select{ width:100%; padding:12px 13px; border:1px solid var(--glass-line); border-radius:10px;
  font-family:var(--body); font-size:1rem; color:var(--cream); background:rgba(245,239,227,.08); }
.field input::placeholder{ color:rgba(245,239,227,.45); }
.field input:focus, .field select:focus{ outline:none; border-color:var(--mag); background:rgba(245,239,227,.12); }
.field select option{ color:#000; }
.radio-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.radio-pill input{ position:absolute; opacity:0; }
.radio-pill label{ display:block; padding:11px 18px; border:1px solid var(--glass-line); border-radius:999px; cursor:pointer; font-weight:700; }
.radio-pill input:checked + label{ background:var(--mag); color:#fff; border-color:var(--mag); }
.form-status{ margin-top:12px; padding:11px 14px; border-radius:10px; font-weight:700; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ background:rgba(120,200,120,.18); color:#bfe9b6; border:1px solid rgba(120,200,120,.4); }
.form-status.err{ background:rgba(230,120,90,.18); color:#f4c0ad; border:1px solid rgba(230,120,90,.4); }

/* erledigt-Stempel */
.card.done::after{ content:"✓ erledigt"; position:absolute; top:14px; right:16px; font-family:var(--hand);
  font-size:1.15rem; color:var(--sage); transform:rotate(6deg); }
.card{ position:relative; }

/* Flavor */
.flavor{ text-align:center; }
.flavor-text p{ font-family:var(--disp); font-size:clamp(1.8rem,9vw,3rem); text-transform:uppercase; line-height:1; margin:.4rem 0;
  color:#fff; text-shadow:0 4px 24px rgba(0,0,0,.5); opacity:.92; }

/* Goal / FAQ */
.goal-card .secret{ margin-top:1rem; font-family:var(--hand); font-size:1.3rem; color:var(--gold); }
.faq{ border-top:1px solid var(--glass-line); margin-top:6px; }
.faq summary{ cursor:pointer; list-style:none; padding:14px 0; font-family:var(--disp); font-size:1.1rem; text-transform:uppercase; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; float:right; color:var(--mag); }
.faq details[open] summary::after{ content:"–"; }
.faq[open] summary::after,.faq details[open] summary::after{ content:"–"; }
.faq p{ padding-bottom:14px; opacity:.82; font-size:.95rem; }

/* Footer */
.site-footer{ position:relative; z-index:5; text-align:center; padding:70px 20px calc(50px + env(safe-area-inset-bottom,0));
  background:linear-gradient(180deg,transparent,#140e1c 40%); }
.site-footer .big{ font-family:var(--disp); font-size:clamp(2.4rem,14vw,4.5rem); text-transform:uppercase; line-height:.9; }
.site-footer p{ opacity:.7; margin-top:.8rem; font-size:.88rem; }

/* Konfetti */
.confetti{ position:fixed; inset:0; z-index:30; pointer-events:none; display:none; }
.confetti.go{ display:block; }

/* ============ Fallback: reduced-motion / kein Scrub ============ */
@media (prefers-reduced-motion: reduce){
  .ring, .bokeh i{ animation:none !important; }
  .js .card{ opacity:1 !important; transform:none !important; transition:none; }
}
.no-scrub .ring{ display:none; }
.no-scrub .stage .sky{ background:linear-gradient(180deg,#e8814a,#9a4a55 60%,#3a2746); }

/* Desktop: Karten links, Bühne sichtbar */
@media (min-width:820px){
  body{ font-size:18px; }
  .station{ padding-left:7vw; padding-right:7vw; }
  .card{ width:min(520px,46vw); }
  .ring{ width:104px; height:104px; }
}