/* ==========================================================================
   AMAZE ME MEDIA — Startseite (Mix aus Popcorn + Benjamin Studios)
   Fette Versalien + kursive Serif-Akzente, Vollbild-Hero, weißer Statement-Block,
   gestapelte Welt-Karten, gepinnte Leistungen, Marken-Slider, Zahlen, Footer-CTA.
   Lädt zusätzlich zu main.css (Header, Footer, Buttons, FAQ, Reveal-Effekte).
   ========================================================================== */


:root{
  --display:'Switzer','Inter',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'Roboto Mono',monospace;
}
body{ font-family:var(--body); }
.it{ font-family:'Libre Bodoni','Bodoni MT',serif; font-style:italic; font-weight:700; font-size:.95em; text-transform:uppercase; letter-spacing:-.01em; }

.h-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px; color:var(--yellow);
}
.h-eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; }

.h-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:17px 28px; border-radius:2px;
  background:var(--ink); color:#fff; border:1px solid var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.h-btn:hover{ background:var(--blue); border-color:var(--blue); transform:translateY(-3px); }
.h-btn--light{ background:#fff; color:var(--ink); border-color:#fff; }
.h-btn--light:hover{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); }
.h-btn .arrow{ transition:transform .3s var(--ease); }
.h-btn:hover .arrow{ transform:translateX(4px); }

/* ---------- Hero: Vollbild-Video, Schlagzeile unten links ---------- */
.h-hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:140px 0 44px; overflow:hidden; background:#04050c; isolation:isolate;
}
.h-hero-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.h-hero-bg::before{
  content:""; position:absolute; inset:-20%;
  background:linear-gradient(115deg, transparent 18%, rgba(2,61,224,.6) 36%, rgba(230,222,14,.16) 50%, transparent 66%);
  filter:blur(70px); transform:translateX(-26%);
  animation:leak 16s ease-in-out infinite alternate;
}
@keyframes leak{ to{ transform:translateX(26%); } }
.h-hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation:focusIn 2.4s var(--ease) both;
}
@keyframes focusIn{ from{ filter:blur(26px); transform:scale(1.08); } to{ filter:blur(0); transform:scale(1); } }
.h-hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,5,12,.5) 0%, rgba(4,5,12,.1) 38%, rgba(4,5,12,.88) 100%);
}
.h-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.14; mix-blend-mode:overlay;
  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");
}
.h-hero h1{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(42px, 7.6vw, 124px); line-height:.94; letter-spacing:-.035em;
  max-width:13em; animation:rackIn 1.6s var(--ease) .15s both;
}
.h-hero h1 .it{ color:var(--yellow); }
.h-hero-foot{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:48px; padding-top:22px; border-top:1px solid rgba(245,246,251,.2);
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  animation:rackIn 1.6s var(--ease) .5s both;
}
.h-hero-foot a{ display:inline-flex; gap:12px; align-items:center; color:var(--white); }
.h-hero-foot a span{ display:inline-block; animation:bob 2s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translateY(5px); } }
.h-hero-foot .meta{ color:var(--slate); }

/* ---------- Weißer Statement-Block ---------- */
.h-statement{ background:#f4f3ee; color:#05060b; padding:150px 0 130px; position:relative; z-index:2; }
.h-big{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(30px, 5.6vw, 88px); line-height:.98; letter-spacing:-.03em; max-width:16em;
}
.h-big .it{ color:var(--blue); }
.h-statement .h-btn{ margin-top:48px; }
.h-statement .h-eyebrow{ color:var(--blue); margin-bottom:30px; }

/* ---------- Welt-Karten: gestapelt, jede mit eigenem Look ---------- */
.h-worlds{ background:#f4f3ee; padding:0 0 140px; position:relative; z-index:2; }
.h-worlds-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; padding:20px 0 48px; color:#05060b; }
.h-worlds-head h2{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(28px,4.2vw,60px); line-height:1; letter-spacing:-.03em; max-width:15em; }
.h-worlds-head .count{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--blue); }
.h-cards{ display:flex; flex-direction:column; }
.h-card{
  position:sticky; top:92px; margin-bottom:28px;
  display:block; border-radius:6px; overflow:hidden; isolation:isolate;
  aspect-ratio:16/8.6; min-height:420px;
  background:var(--bg); color:var(--fg);
  transform-origin:50% 0; will-change:transform, filter;
}
.h-card-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.h-card::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.22;
  background:linear-gradient(120deg, transparent 20%, var(--fg) 50%, transparent 80%);
  transform:translateX(-60%); transition:transform 1.4s var(--ease);
}
.h-card:hover::before{ transform:translateX(60%); }
.h-card-inner{ position:absolute; inset:0; padding:clamp(22px,3vw,42px); display:flex; flex-direction:column; justify-content:space-between; }
.h-card-top{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }
.h-card-title{
  font-family:var(--ff, var(--display)); font-style:var(--fs, normal); font-weight:var(--fw, 800);
  text-transform:var(--tt, uppercase); font-size:clamp(44px, 10.4vw, 170px); line-height:.9; letter-spacing:-.03em;
}
.h-card-bottom{ display:flex; justify-content:space-between; align-items:flex-end; gap:18px; }
.h-card-bottom .name{ font-family:var(--body); font-weight:500; font-size:15px; }
.h-card-bottom .tags{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.85; text-align:right; }
.h-card .go{
  width:52px; height:52px; border-radius:50%; border:1px solid currentColor; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  transition:transform .5s var(--ease), background .3s, color .3s;
}
.h-card:hover .go{ transform:rotate(-45deg); background:var(--fg); color:var(--bg); }
.h-card--events{ --bg:#060606; --fg:#c6ff2e; }
.h-card--social{ --bg:#023de0; --fg:#e6de0e; }
.h-card--spots{ --bg:#ffffff; --fg:#023de0; }
.h-card--mehr{ --bg:#e6de0e; --fg:#060814; }
.h-card--hochzeit{ --bg:#f8f2e9; --fg:#2c241f;  box-shadow:0 0 0 1px rgba(5,6,11,.08); }
.h-card--spots{ box-shadow:0 0 0 1px rgba(5,6,11,.1); }

/* ---------- Leistungen: gepinnt, Wörter wechseln beim Scrollen ---------- */
.h-svc{ position:relative; height:520vh; background:#04050c; color:var(--white); }
.h-svc-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; padding:110px 0 36px; isolation:isolate; }
.h-svc-sticky::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(160deg, #0a1a6b 0%, #04050c 55%, #1a1706 100%);
}
.h-svc-sticky .h-grain{ z-index:-1; }
.h-svc-top{ text-align:center; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--white); opacity:.85; }
.h-svc-stage{ position:relative; flex:1; min-height:0; }
.h-scene{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; filter:blur(22px); transform:scale(.88);
  transition:opacity 1s var(--ease), filter 1s var(--ease), transform 1.2s var(--ease);
}
.h-scene svg{ width:min(74vh, 84vw); height:min(74vh, 84vw); }
.h-scene.is-active{ opacity:.55; filter:blur(0); transform:scale(1); }
.h-scene.is-past{ transform:scale(1.12); }
.h-word{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 20px;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(34px, 8.2vw, 150px); line-height:.92; letter-spacing:-.04em;
  opacity:0; filter:blur(24px); transform:translateY(46px);
  transition:opacity .9s var(--ease), filter .9s var(--ease), transform 1s var(--ease);
}
.h-word.is-active{ opacity:1; filter:blur(0); transform:none; }
.h-word.is-past{ transform:translateY(-46px); }
.h-word .w{ display:block; }
.h-word .it{ color:var(--yellow); line-height:1; }
.h-svc-foot{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end; }
.h-descs{ position:relative; min-height:150px; max-width:46ch; }
.h-desc{
  position:absolute; left:0; bottom:0; opacity:0; filter:blur(10px); transform:translateY(18px);
  transition:opacity .7s var(--ease), filter .7s var(--ease), transform .8s var(--ease);
}
.h-desc.is-active{ opacity:1; filter:blur(0); transform:none; }
.h-desc p{ color:rgba(245,246,251,.78); font-size:15px; }
.h-desc .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.h-desc .tags span{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; border:1px solid rgba(245,246,251,.3); padding:6px 12px; border-radius:100px; }
.h-svc-count{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; color:var(--yellow); }
.h-svc-bar{ height:2px; background:rgba(245,246,251,.2); margin-top:22px; position:relative; }
.h-svc-fill{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--yellow); }
.h-svc .cta{ position:absolute; left:50%; transform:translateX(-50%); bottom:92px; }

/* ---------- Marken-Slider ---------- */
.h-trust{ background:#f4f3ee; color:#05060b; padding:130px 0 120px; position:relative; z-index:2; }
.h-trust h2{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(28px,4.6vw,68px); line-height:.98; letter-spacing:-.03em; max-width:14em; }
.h-trust h2 .it{ color:var(--blue); }
.h-trust .links{ display:flex; gap:10px; margin-top:34px; flex-wrap:wrap; }
.h-rail{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:56px max(32px, calc((100vw - var(--wrap)) / 2 + 32px)) 24px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.h-rail::-webkit-scrollbar{ display:none; }
.h-tile{
  flex:0 0 clamp(220px, 26vw, 330px); aspect-ratio:3/4; scroll-snap-align:start; position:relative; border-radius:4px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; padding:22px;
  background:var(--c1); color:var(--c2); isolation:isolate;
  transition:filter .5s var(--ease), opacity .5s var(--ease), transform .6s var(--ease);
}
.h-rail:hover .h-tile:not(:hover){ filter:blur(3px); opacity:.55; }
.h-tile:hover{ transform:translateY(-6px); }
.h-tile::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(255,255,255,.12), transparent 40%, rgba(0,0,0,.28)); }
.h-tile .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }
.h-tile .brand{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(22px,2.4vw,34px); line-height:1; letter-spacing:-.02em; text-align:center; margin:auto 0; }
.h-tile .kind{ font-size:13px; opacity:.85; text-align:center; }
.h-dots{ display:flex; gap:8px; padding:12px max(32px, calc((100vw - var(--wrap)) / 2 + 32px)) 0; }
.h-dots button{ width:9px; height:9px; border-radius:50%; background:transparent; border:1px solid #05060b; padding:0; transition:background .3s; }
.h-dots button.is-on{ background:#05060b; }

/* ---------- Zahlen auf Dunkel ---------- */
.h-numbers{ position:relative; background:#04050c; padding:150px 0; overflow:hidden; isolation:isolate; z-index:2; }
.h-numbers::before{ content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(120deg, #04050c 20%, rgba(2,61,224,.35) 70%, #04050c 100%); filter:blur(30px); }
.h-numbers .h-grain{ z-index:-1; opacity:.18; }
.h-num-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.h-num .n{ font-family:var(--display); font-weight:800; font-size:clamp(56px,9.4vw,150px); line-height:.9; letter-spacing:-.04em; }
.h-num .n em{ font-style:normal; color:var(--yellow); }
.h-num .l{ margin-top:16px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); }
.h-numbers .foot{ margin-top:80px; }
@media (max-width:760px){ .h-num-grid{ grid-template-columns:1fr; gap:36px; } }

/* ---------- Footer-CTA ---------- */
.h-cta{ background:#04050c; padding:150px 0 40px; text-align:left; position:relative; z-index:2; }
.h-cta h2{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(34px,7vw,112px); line-height:.94; letter-spacing:-.035em; max-width:12em; }
.h-cta h2 .it{ color:var(--yellow); }
.h-cta .row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:44px; align-items:center; }
.h-cta .small{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }
footer{ position:relative; z-index:2; background:#04050c; margin-top:0; }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .h-card{ aspect-ratio:4/5; top:80px; }
  .h-card-bottom .tags{ display:none; }
  .h-svc-foot{ grid-template-columns:1fr; }
  .h-svc-count{ order:-1; }
  .h-svc .cta{ display:none; }
  .h-descs{ min-height:170px; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  .h-hero-bg::before, .h-hero-video, .h-hero h1, .h-hero-foot, .h-hero-foot a span{ animation:none; }
  .h-card{ position:relative; top:auto; }
  .h-svc{ height:auto; }
  .h-svc-sticky{ position:static; height:auto; padding:100px 0; }
  .h-svc-stage{ display:flex; flex-direction:column; gap:12px; flex:none; }
  .h-scene{ display:none; }
  .h-word, .h-desc{ position:static; opacity:1; filter:none; transform:none; }
  .h-word{ font-size:clamp(34px,8vw,80px); justify-content:flex-start; }
  .h-descs{ min-height:0; }
  .h-svc-bar{ display:none; }
}

.marquee-band{ margin-top:-24px; margin-bottom:-24px; }
.marquee-band .dot{ flex:none; }


/* ==========================================================================
   SCHWARZ-WEISS-VARIANTE (body.bw) — Original-Farbversion: index-farbe.html / home-farbe.css
   ========================================================================== */
body.bw{
  --blue:#2a2a2d; --blue-light:#c9c9cc; --blue-glow:rgba(255,255,255,.12);
  --yellow:#ffffff; --yellow-glow:rgba(255,255,255,.25);
}
.bw .nav-cta{ background:#fff; color:#05060b; }
.bw .nav-cta:hover{ background:#d9d9d6; color:#05060b; box-shadow:none; }
.bw .h-btn:hover{ background:#3a3a3d; border-color:#3a3a3d; }
.bw .h-btn--light{ background:#fff; color:#05060b; }
.bw .h-btn--light:hover{ background:#d9d9d6; border-color:#d9d9d6; }
.bw .h-hero-bg::before{ background:linear-gradient(115deg, transparent 18%, rgba(255,255,255,.14) 38%, rgba(255,255,255,.04) 52%, transparent 66%); }
.bw .h-statement .h-eyebrow, .bw .h-big .it, .bw .h-trust h2 .it{ color:#05060b; }
/* Karten */
.bw .h-card--events{ --bg:#050505; --fg:#ffffff; }
.bw .h-card--social{ --bg:#2a2a2d; --fg:#ffffff; }
.bw .h-card--spots{ --bg:#ffffff; --fg:#05060b; }
.bw .h-card--mehr{ --bg:#d9d9d6; --fg:#05060b; }
.bw .h-card--hochzeit{ --bg:#efefed; --fg:#05060b; }
/* Laufband */
.bw .marquee-band{ background:#050f33; color:#fff; }
.bw .marquee-band .dot{ background:#fff; }
/* So entsteht dein Film: ohne Icons/Szenen */
.bw .h-svc-sticky::before{ background:linear-gradient(180deg,#0b0b0c 0%,#000 100%); }
.bw .h-scene, .bw .h-svc-sticky > svg{ display:none !important; }
.bw .h-word{ font-size:clamp(40px, 11vw, 180px); }
/* Marken-Kacheln */
.bw .h-tile{ background:#0b0b0c !important; color:#fff !important; }
.bw .h-tile:nth-child(2n){ background:#fff !important; color:#05060b !important; box-shadow:inset 0 0 0 1px rgba(5,6,11,.15); }
.bw .h-tile:nth-child(3n){ background:#d9d9d6 !important; color:#05060b !important; }
/* Zahlen */
.bw .h-numbers::before{ background:linear-gradient(120deg,#000 20%,rgba(255,255,255,.08) 70%,#000 100%); }
.bw .h-dots button{ border-color:#05060b; }

/* ---------- Hero: Showreel mit runden Ecken, Zeile für Zeile ---------- */
.h-hero{ margin:84px 16px 16px; border-radius:32px; min-height:calc(100svh - 100px); padding:64px 0 36px; }
.h-hero-bg{ border-radius:inherit; }
.h-hero h1{ max-width:none; font-size:clamp(20px, calc((100vw - 96px) / 11.8), 124px); }
.h-hero h1 .ln{ display:block; white-space:nowrap; }
@media (max-width:760px){ .h-hero{ margin:76px 10px 10px; border-radius:22px; } }

/* ---------- Gelbe Akzente (sparsam) ---------- */
body.bw{ --yellow:#e6de0e; --yellow-glow:rgba(230,222,14,.35); overflow-x:clip; }
.bw .nav-cta{ background:#fff; color:#05060b; }
.bw .h-eyebrow{ color:#fff; opacity:.75; }
.bw .h-statement .h-eyebrow{ color:#05060b; }
.bw .h-btn--light{ background:var(--yellow); color:#05060b; border-color:var(--yellow); }
.bw .h-btn--light:hover{ background:#fff; border-color:#fff; }
.bw .h-hero h1 .it, .bw .h-word .it, .bw .h-cta h2 .it{ color:var(--yellow); }
.bw .h-svc-fill{ background:var(--yellow); }
.bw .h-svc-count{ color:var(--yellow); }
.bw .h-num .n em{ color:var(--yellow); }
.bw .h-card:hover .go{ background:var(--yellow); color:#05060b; border-color:var(--yellow); }
.bw .h-tile:nth-child(3n)::before{ content:""; }
.bw .marquee-band .dot{ background:var(--yellow); }

.marquee-band .dot{ padding:0; width:10px; height:10px; min-width:10px; flex:none; border-radius:50%; }

/* ---------- Showreel ---------- */
.h-hero-video{ border-radius:inherit; }
.h-hero-foot .h-reel-btn{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#05060b;
  background:var(--yellow); border-radius:100px; padding:12px 22px; transition:transform .3s var(--ease), background .3s;
}
.h-hero-foot .h-reel-btn:hover{ background:#fff; transform:translateY(-2px); }
.h-modal{ position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; padding:5vw; }
.h-modal[hidden]{ display:none; }
.h-modal video{ width:min(1200px,100%); max-height:86vh; border-radius:20px; background:#000; }
.h-modal-close{ position:absolute; top:18px; right:22px; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.4); color:#fff; font-size:28px; line-height:1; background:none; cursor:pointer; }
.h-modal-close:hover{ background:#fff; color:#000; }
.h-hero-bg::after{ background:linear-gradient(180deg, rgba(4,5,12,.55) 0%, rgba(4,5,12,.35) 40%, rgba(4,5,12,.9) 100%); }

/* Farbversion: ohne Icons bei "So entsteht dein Film" */
.h-svc-sticky::before{ background:linear-gradient(160deg, #0a1a6b 0%, #04050c 60%, #04050c 100%); }
.h-word{ font-size:clamp(40px, 11vw, 180px); }

/* ---------- Abschluss-Karte (Glas) ---------- */
.h-cta{ padding:110px 0 70px; }
.h-cta-stage{ position:relative; isolation:isolate; }
.h-cta-stage .orb{ position:absolute; border-radius:50%; filter:blur(70px); z-index:-1; pointer-events:none; }
.h-cta-stage .orb-a{ width:46%; aspect-ratio:1; left:-6%; top:-18%; background:rgba(2,61,224,.85); }
.h-cta-stage .orb-b{ width:30%; aspect-ratio:1; right:4%; bottom:-22%; background:rgba(230,222,14,.55); }
.h-cta-card{
  position:relative; text-align:center; border-radius:32px; padding:clamp(56px,9vw,110px) clamp(20px,5vw,60px);
  background:linear-gradient(135deg, rgba(60,92,230,.38) 0%, rgba(2,40,170,.30) 60%, rgba(1,12,80,.4) 100%);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(26px) saturate(1.3); backdrop-filter:blur(26px) saturate(1.3);
  box-shadow:0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
  display:flex; flex-direction:column; align-items:center; gap:22px; overflow:hidden;
}
.h-cta-card h2{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(30px,5.4vw,84px); line-height:.96; letter-spacing:-.03em; max-width:12em; }
.h-cta-card p{ color:rgba(245,246,251,.8); font-size:17px; }
.h-cta-card .h-eyebrow{ color:var(--yellow); opacity:1; }
.h-cta-card .h-btn{ margin-top:10px; }
@media (prefers-reduced-motion: reduce){ .h-cta-stage.reveal-scale{ filter:none; } }
.h-btn--yellow{ background:var(--yellow); color:#05060b; border-color:var(--yellow); }
.h-btn--yellow:hover{ background:#fff; border-color:#fff; color:#05060b; }
.h-cta-card .h-btn{ border-radius:100px; padding:20px 34px; }

/* ---------- So entsteht dein Film: Licht, Sucher, Zeitachse ---------- */
.h-svc-stage{ border-radius:24px; overflow:hidden; }
.h-stepbg{ position:absolute; inset:0; opacity:0; transform:scale(1.06); overflow:hidden; pointer-events:none;
  transition:opacity 1.2s var(--ease), transform 1.6s var(--ease); }
.h-stepbg.is-active{ opacity:1; transform:scale(1); }
.h-stepbg.is-past{ transform:scale(.96); }
.h-stepbg:not(.is-active) *{ animation-play-state:paused !important; }
.h-stepbg > *{ position:absolute; display:block; }
/* 1 Idee: Licht */
.v1 .orb{ border-radius:50%; filter:blur(60px); }
.v1 .o1{ width:42%; aspect-ratio:1; left:6%; top:8%; background:rgba(2,61,224,.75); animation:drift1 14s ease-in-out infinite alternate; }
.v1 .o2{ width:30%; aspect-ratio:1; right:8%; bottom:4%; background:rgba(230,222,14,.38); animation:drift2 17s ease-in-out infinite alternate; }
.v1 .o3{ width:20%; aspect-ratio:1; left:46%; top:30%; background:rgba(255,255,255,.22); filter:blur(48px); animation:drift3 11s ease-in-out infinite alternate; }
.v1 .beam{ left:-20%; right:-20%; top:36%; height:26%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); filter:blur(26px); transform:rotate(-14deg); animation:beam 12s ease-in-out infinite alternate; }
@keyframes drift1{ to{ transform:translate(18%,12%) scale(1.15); } }
@keyframes drift2{ to{ transform:translate(-22%,-14%) scale(1.2); } }
@keyframes drift3{ to{ transform:translate(-30%,18%) scale(.8); } }
@keyframes beam{ from{ transform:translateX(-12%) rotate(-14deg); } to{ transform:translateX(12%) rotate(-14deg); } }
/* 2 Produktion: Sucher */
.v2 .cone{ left:18%; right:18%; top:-10%; height:120%; background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 80%); clip-path:polygon(38% 0,62% 0,100% 100%,0 100%); filter:blur(22px); animation:cone 9s ease-in-out infinite alternate; }
@keyframes cone{ from{ opacity:.45; transform:translateX(-6%); } to{ opacity:.9; transform:translateX(6%); } }
.v2 .third{ background:rgba(255,255,255,.14); }
.v2 .t1,.v2 .t2{ top:0; bottom:0; width:1px; } .v2 .t1{ left:33.33%; } .v2 .t2{ left:66.66%; }
.v2 .t3,.v2 .t4{ left:0; right:0; height:1px; } .v2 .t3{ top:33.33%; } .v2 .t4{ top:66.66%; }
.v2 .corner{ width:46px; height:46px; border:2px solid rgba(255,255,255,.8); }
.v2 .c1{ left:5%; top:9%; border-right:0; border-bottom:0; } .v2 .c2{ right:5%; top:9%; border-left:0; border-bottom:0; }
.v2 .c3{ left:5%; bottom:9%; border-right:0; border-top:0; } .v2 .c4{ right:5%; bottom:9%; border-left:0; border-top:0; }
.v2 .cross{ left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; background:
  linear-gradient(#fff,#fff) center/2px 100% no-repeat, linear-gradient(#fff,#fff) center/100% 2px no-repeat; opacity:.55; animation:focus 4s ease-in-out infinite; }
@keyframes focus{ 50%{ transform:scale(1.5); opacity:.25; } }
.v2 .rec{ left:6%; top:12%; font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:#fff; display:flex; align-items:center; gap:10px; margin-top:34px; }
.v2 .rec b{ width:10px; height:10px; border-radius:50%; background:#ff3b30; animation:blink 1.1s infinite; }
@keyframes blink{ 50%{ opacity:.15; } }
@media (prefers-reduced-motion: reduce){ .h-stepbg *{ animation:none !important; } }
.v3 .clip{ opacity:.45; filter:blur(2px); }

/* v3 + v4 + Flare */
.tl3d{ position:absolute; left:50%; top:50%; width:118%; margin:-21% 0 0 -52%; padding:14px; border-radius:14px; background:#17171a; border:1px solid #303036;
  box-shadow:0 60px 120px rgba(0,0,0,.7); transform:perspective(1700px) rotateX(18deg) rotateY(-36deg) rotateZ(3deg); opacity:.62; filter:blur(.6px); }
.tl-head{ display:flex; gap:10px; height:26px; margin-bottom:8px; } .tl-head b{ width:54px; flex:none; }
.tl-ruler{ flex:1; display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:#8a8a93; border-bottom:1px solid #2b2b31; align-items:flex-end; padding-bottom:3px; }
.trk{ display:flex; gap:10px; margin-bottom:6px; }
.trk b{ width:54px; flex:none; background:#232327; border-radius:4px; font-family:var(--mono); font-size:11px; color:#c8c8cf; display:flex; align-items:center; justify-content:center; }
.trk .lane{ position:relative; flex:1; background:#1e1e22; border-radius:4px; }
.trk.v .lane{ height:74px; } .trk.a .lane{ height:46px; }
.rc{ position:absolute; top:3px; bottom:3px; border-radius:4px; overflow:hidden; }
.rc em{ position:absolute; left:6px; top:3px; z-index:2; font-style:normal; font-family:var(--mono); font-size:9px; color:#fff; text-shadow:0 1px 3px #000; }
.rc.vid{ background-size:auto 100%; background-repeat:repeat-x; box-shadow:inset 0 0 0 1px rgba(110,170,255,.7); }
.rc.vid::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 40%); }
.rc.aud{ background:#2c6f57; color:rgba(190,255,225,.85); box-shadow:inset 0 0 0 1px rgba(120,230,180,.5); }
.rc.aud svg{ position:absolute; left:3px; right:3px; top:14px; bottom:3px; width:calc(100% - 6px); height:calc(100% - 17px); }
.tl-play{ position:absolute; top:6px; bottom:6px; left:42%; width:2px; background:#ff4a4a; box-shadow:0 0 14px rgba(255,74,74,.7); animation:tlplay 10s linear infinite; }
.tl-play::before{ content:""; position:absolute; top:-3px; left:-6px; border:7px solid transparent; border-top-color:#ff4a4a; border-bottom:0; }
@keyframes tlplay{ from{ left:20%; } to{ left:96%; } }
.h-svc-sticky{ transition:background .9s var(--ease); }
.h-svc-sticky::before{ transition:opacity .9s var(--ease); }
.h-svc-sticky > .h-grain{ transition:opacity .9s var(--ease); }
.h-svc.is-light .h-svc-sticky::before, .h-svc.is-light .h-svc-sticky > .h-grain{ opacity:0; }
.h-svc.is-light .h-svc-top, .h-svc.is-light .h-word{ color:#05060b; }
.h-svc.is-light .h-word .it{ color:#023de0; }
.h-svc.is-light .h-desc p{ color:rgba(5,6,11,.72); }
.h-svc.is-light .h-desc .tags span{ border-color:rgba(5,6,11,.3); color:#05060b; }
.h-svc.is-light .h-svc-count{ color:#023de0; }
.h-svc.is-light .h-svc-bar{ background:rgba(5,6,11,.15); }
.h-svc.is-light .h-svc-fill{ background:#023de0; }
.v4 .gb{ border-radius:50%; filter:blur(50px); animation:drift2 16s ease-in-out infinite alternate; }
.v4 .gb1{ width:40%; aspect-ratio:1; left:12%; top:6%; background:rgba(2,61,224,.7); }
.v4 .gb2{ width:34%; aspect-ratio:1; right:10%; bottom:2%; background:rgba(230,222,14,.8); animation-name:drift1; }
.v4 .gb3{ width:24%; aspect-ratio:1; left:48%; top:2%; background:rgba(120,200,255,.7); animation-name:drift3; }
.v4 .slab{ left:7%; right:7%; top:12%; bottom:12%; border-radius:44px;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.16) 55%,rgba(255,255,255,.38));
  -webkit-backdrop-filter:blur(30px) saturate(1.8); backdrop-filter:blur(30px) saturate(1.8);
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95), inset 0 -2px 10px rgba(255,255,255,.4), 0 30px 70px rgba(30,50,120,.18); }
.h-svc{ --fx:18%; --fo:1; --fy:46%; }
.h-flare{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:var(--fo); mix-blend-mode:screen; }
.h-flare > *{ position:absolute; left:var(--fx); top:var(--fy); transform:translate(-50%,-50%); }
.fl-streak{ width:130%; height:4px; background:linear-gradient(90deg,transparent 0,rgba(60,120,255,.0) 8%,rgba(60,120,255,.95) 36%,#fff 50%,rgba(60,120,255,.95) 64%,rgba(60,120,255,0) 92%,transparent); box-shadow:0 0 22px 4px rgba(40,100,255,.8), 0 0 80px 14px rgba(20,70,255,.45); border-radius:50%; }
.fl-s2{ height:2px; width:170%; opacity:.65; box-shadow:0 0 30px 6px rgba(120,180,255,.5); margin-top:14px; }
.fl-core{ width:90px; height:90px; border-radius:50%; background:radial-gradient(circle,#fff 0,rgba(180,210,255,.85) 28%,rgba(40,100,255,.35) 58%,transparent 72%); filter:blur(2px); }
.fl-halo{ width:520px; height:200px; border-radius:50%; background:radial-gradient(ellipse,rgba(40,100,255,.45),transparent 68%); filter:blur(30px); }
.fl-ghost{ border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.55),rgba(80,140,255,.25) 50%,transparent 70%); filter:blur(3px); }
.fl-ghost.g1{ width:38px; height:38px; left:calc(100% - var(--fx) * .6); }
.fl-ghost.g2{ width:70px; height:70px; left:calc(100% - var(--fx) * .9); background:radial-gradient(circle,rgba(230,222,14,.5),transparent 70%); }
.fl-ghost.g3{ width:24px; height:24px; left:calc(100% - var(--fx) * .3); }
@media (prefers-reduced-motion: reduce){ .h-flare{ display:none; } }
.v4 .gb1{ background:rgba(2,61,224,.5); } .v4 .gb2{ background:rgba(230,222,14,.6); } .v4 .gb3{ background:rgba(120,200,255,.5); }


.h-flare, .h-stepbg{ display:none !important; }
.h-svc.is-light .h-svc-sticky{ background:#04050c !important; }

/* ---------- So entsteht dein Film: Liquid Glass ---------- */
.h-scene{ display:none !important; }
.h-svc{ --p:0; }
.h-glassbg{ position:absolute; inset:0; overflow:hidden; }
.gbl{ position:absolute; border-radius:50%; filter:blur(64px); }
.gbl.b1{ width:44%; aspect-ratio:1; left:calc(-4% + var(--p) * 52%); top:calc(8% + var(--p) * 10%); background:#023de0; opacity:.95; }
.gbl.b2{ width:30%; aspect-ratio:1; right:calc(6% + var(--p) * 22%); bottom:calc(-6% + var(--p) * 10%); background:#e6de0e; opacity:.8; }
.gbl.b3{ width:26%; aspect-ratio:1; left:calc(46% - var(--p) * 40%); top:calc(-8% + var(--p) * 30%); background:#4fc3ff; opacity:.75; }
.h-gs{ position:absolute; inset:0; opacity:0; transform:scale(.94); transition:opacity .9s var(--ease), transform 1.1s var(--ease); }
.h-gs.is-active{ opacity:1; transform:scale(1); }
.h-gs.is-past{ transform:scale(1.05); }
.gl{ position:absolute; display:block; overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.2) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(1.9) brightness(1.08); backdrop-filter:blur(26px) saturate(1.9) brightness(1.08);
  border:1.5px solid rgba(255,255,255,.5);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.7), inset 0 -3px 10px rgba(255,255,255,.18), 0 30px 70px rgba(0,0,0,.35); }
.gl::after{ content:""; position:absolute; left:4%; right:4%; top:2%; height:45%; border-radius:inherit; background:linear-gradient(180deg,rgba(255,255,255,.4),transparent); opacity:.55; }
.gs1 .pill{ left:6%; right:6%; top:26%; bottom:26%; border-radius:999px; }
.gs2 .c1, .gs2 .c2{ width:46%; aspect-ratio:1; max-height:92%; border-radius:50%; top:50%; transform:translateY(-50%); }
.gs2 .c1{ left:16%; } .gs2 .c2{ right:16%; }
.gs3 .f1,.gs3 .f2,.gs3 .f3{ width:56%; height:46%; border-radius:30px; }
.gs3 .f1{ left:8%; top:8%; transform:rotate(-6deg); opacity:.7; }
.gs3 .f2{ left:22%; top:24%; transform:rotate(-2deg); opacity:.85; }
.gs3 .f3{ left:36%; top:42%; transform:rotate(3deg); }
.gs4 .slab{ left:7%; right:7%; top:14%; bottom:14%; border-radius:48px; }
@media (max-width:760px){ .gs2 .c1{ left:2%; } .gs2 .c2{ right:2%; } .gs1 .pill{ top:30%; bottom:30%; } }
@media (prefers-reduced-motion: reduce){ .h-gs{ opacity:.5; transform:none; position:absolute; } }
.h-word{ text-shadow:0 2px 28px rgba(0,0,0,.4); }
.gbl.b2{ opacity:.6; }

/* Ruhige Version: kein Glas, nur ein weiches, dunkles Licht */
.h-gs{ display:none !important; }
.gbl.b1{ opacity:.28; filter:blur(90px); }
.gbl.b2{ display:none; }
.gbl.b3{ opacity:.12; filter:blur(90px); }
.h-word{ text-shadow:none; }

/* ---------- Hero-Schriftzug wie in der ersten Version ---------- */
.h-hero h1.hero2-title{ font-family:'Syne','Switzer',sans-serif; font-weight:800; text-transform:uppercase; line-height:.86; letter-spacing:-.035em; max-width:none; animation:none; font-size:clamp(40px,11vw,200px); }
.h-hero h1.hero2-title .line > span{ white-space:nowrap; }
.h-hero h1.hero2-title .outline{ color:transparent; -webkit-text-stroke:2px var(--yellow); }
.h-hero h1.hero2-title sup{ color:var(--yellow); }
.h-hero .hero-bg-grid{ position:absolute; inset:0; }
.h-hero > .wrap{ width:100%; }

.h-card--web{ --bg:#0a1a6b; --fg:#ffffff; }
.h-card--foto{ --bg:#e9e8e2; --fg:#05060b; box-shadow:0 0 0 1px rgba(5,6,11,.1); }