/* =====================================================================
   SPOTLIGHT THEME · Vault Studio
   Dunkle Bühne als Layer über styles.css. Wirkt nur auf body.home,
   nutzt die bestehenden CSS-Variablen, damit sich alle Komponenten
   automatisch anpassen. Keine bestehende Regel wird verändert.
   ===================================================================== */

body.home{
  background:var(--navy);
  color:var(--offwhite);
  /* Tokens auf Dunkel umdefinieren – Komponenten adaptieren automatisch */
  --white:#0E1728;                     /* Karten-Panels heben sich von der Bühne ab */
  --offwhite-2:#0C1526;                /* getönte Bänder */
  --ink:#F5F7F9;                       /* Fliesstext & Headlines hell */
  --muted:rgba(245,247,249,.60);       /* Sekundärtext */
  --line:rgba(245,247,249,.12);
  --line-strong:rgba(245,247,249,.24);
  --shadow:0 30px 60px -30px rgba(0,0,0,.6);
}

/* ---------- Bänder ---------- */
body.home .band.tint{background:var(--offwhite-2);}
body.home .ctaband,
body.home footer{border-top:1px solid var(--line);}

/* ---------- Hartkodierte weisse Flächen -> Panels ---------- */
body.home .pointcard,
body.home .ref{background:var(--white);border-color:var(--line);}
body.home .chip{background:transparent;border-color:var(--line);color:var(--offwhite);}
body.home .ref .chips.reftags .chip:hover{border-color:var(--blue);color:var(--offwhite);}

/* Vorher schon navy -> jetzt leicht abheben */
body.home .calc-out,
body.home .guarantee{background:#0A1220;border:1px solid var(--line);}

/* Featured-Preistafel: navy Rahmen wäre unsichtbar -> Blau */
body.home .plan.hero-plan{border-color:var(--blue);box-shadow:0 30px 60px -34px rgba(81,126,183,.5);}

/* ---------- Buttons ---------- */
body.home .btn:not(.ghost):not(.light){background:var(--acid);color:var(--navy);border-color:var(--acid);}
body.home .btn:not(.ghost):not(.light):hover{background:var(--offwhite);color:var(--navy);border-color:var(--offwhite);box-shadow:0 16px 34px -16px rgba(243,255,154,.5);}
body.home .btn.ghost{color:var(--offwhite);border-color:var(--line-strong);}
body.home .btn.ghost:hover{background:var(--offwhite);color:var(--navy);border-color:var(--offwhite);}
body.home .tel:hover{background:var(--offwhite);color:var(--navy);border-color:var(--offwhite);}

/* ---------- Header: gescrollt ebenfalls dunkel, helles Logo behalten ---------- */
body.home header.top.scrolled{background:rgba(7,11,18,.86);backdrop-filter:blur(10px) saturate(120%);border-color:var(--line);}
body.home header.top.scrolled .logo-dark{display:none;}
body.home header.top.scrolled .logo-light{display:block;}

/* ---------- Cookie-Banner bleibt bewusst hell: Tokens dort zurücksetzen ---------- */
body.home .vs-cc{--ink:#070B12;--muted:#5A626C;--line:rgba(139,148,158,.34);--line-strong:rgba(139,148,158,.55);}

/* ---------- Reveal wirkt wie „Ausleuchten“ ---------- */
body.home .reveal{filter:brightness(.72);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);}
body.home .reveal.in{filter:none;}
@media (prefers-reduced-motion:reduce){
  body.home .reveal{filter:none;}
}

/* ---------- Hero als Bühne ---------- */
body.home .hero-txt{background:var(--navy);}
body.home .hero-txt::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(143,178,220,.12), transparent 58%),
    radial-gradient(circle 440px at var(--mx) var(--my), rgba(243,255,154,.10), transparent 70%);
}
body.home .hero-txt .sub{color:rgba(245,247,249,.78);}
body.home .hero-note{color:rgba(245,247,249,.6);}
body.home .hero-txt h1 b::after{opacity:.6;}

/* ---------- Mega-Wortmarke am Footer-Ende (Signature) ---------- */
footer .mega-wordmark{position:relative;z-index:1;width:100%;overflow:hidden;line-height:0;padding-top:clamp(1.5rem,5vw,3.5rem);}
footer .mega-wordmark svg{display:block;width:100%;height:auto;}


/* ---------- Scroll-Motion ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);
  transform-origin:0 50%;background:var(--acid);z-index:200;pointer-events:none;
  box-shadow:0 0 12px rgba(243,255,154,.5);}
[data-parallax]{will-change:transform;}
/* Reveals mit mehr Bewegung */
body.home .reveal{transform:translateY(44px) scale(.99);}
body.home .reveal.in{transform:none;}
@media (prefers-reduced-motion:reduce){
  .scroll-progress{display:none;}
  [data-parallax]{transform:none !important;}
  body.home .reveal{transform:none;}
}

/* ---------- Helle Insel-Sektion (dunkle Fonts) ---------- */
body.home .light-section{
  background:var(--offwhite);
  color:#070B12;
  --ink:#070B12;
  --muted:#5A626C;
  --line:rgba(139,148,158,.34);
  --line-strong:rgba(139,148,158,.55);
}
body.home .light-section .reveal{filter:none;}
body.home .light-section .kicker{color:var(--steel);}
body.home .light-section .founder blockquote{color:#070B12;}
body.home .light-section .founder blockquote b{color:var(--blue-deep);}
body.home .light-section .who{color:var(--muted);}

/* ---------- Ablauf als Lichtspur (Prozess 01 → 02 → 03) ---------- */
.process{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.8rem);margin-top:3.4rem;}
.proc-rail{position:absolute;left:8px;right:8px;top:30px;height:1px;background:var(--line);overflow:hidden;}
.proc-fill{position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,var(--blue) 0%,var(--acid) 100%);transition:width 1.3s var(--ease) .15s;}
.process.in .proc-fill{width:100%;}

.proc-step{position:relative;padding-top:58px;transition:transform .4s var(--ease);}
.proc-step:hover{transform:translateY(-4px);}
.proc-step .sn,.proc-step h3,.proc-step p,.proc-meta{position:relative;z-index:1;}
.proc-step h3{font-size:1.08rem;margin-bottom:.5rem;}
.proc-step p{font-size:.93rem;color:var(--muted);line-height:1.6;}

.proc-node{position:absolute;top:23px;left:8px;width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--line-strong);background:var(--navy);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease);}
.proc-node::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--acid);
  opacity:.2;transition:opacity .5s var(--ease);}

.proc-icon{display:block;width:42px;height:42px;margin-bottom:1.05rem;color:rgba(143,178,220,.45);
  transition:color .5s var(--ease),filter .5s var(--ease);}
.proc-icon svg{width:100%;height:100%;display:block;}
.proc-step:hover .proc-icon{color:var(--acid);}

.proc-meta{display:inline-block;margin-top:.95rem;font-size:.7rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-hi);border:1px solid var(--line);border-radius:999px;padding:.28rem .7rem;}

/* Sequentielles Aufleuchten der Knoten + Ziffern */
.process.in .proc-step:nth-of-type(1) .proc-node,
.process.in .proc-step:nth-of-type(2) .proc-node,
.process.in .proc-step:nth-of-type(3) .proc-node{
  border-color:var(--acid);box-shadow:0 0 0 4px rgba(243,255,154,.10),0 0 18px rgba(243,255,154,.35);}
.process.in .proc-step:nth-of-type(1) .proc-node::after,
.process.in .proc-step:nth-of-type(2) .proc-node::after,
.process.in .proc-step:nth-of-type(3) .proc-node::after{opacity:1;}
.process.in .proc-step:nth-of-type(1) .proc-icon,
.process.in .proc-step:nth-of-type(2) .proc-icon,
.process.in .proc-step:nth-of-type(3) .proc-icon{color:var(--acid);filter:drop-shadow(0 0 10px rgba(243,255,154,.4));}
.process.in .proc-step:nth-of-type(1) .proc-node,
.process.in .proc-step:nth-of-type(1) .proc-node::after,
.process.in .proc-step:nth-of-type(1) .proc-icon{transition-delay:.2s;}
.process.in .proc-step:nth-of-type(2) .proc-node,
.process.in .proc-step:nth-of-type(2) .proc-node::after,
.process.in .proc-step:nth-of-type(2) .proc-icon{transition-delay:.55s;}
.process.in .proc-step:nth-of-type(3) .proc-node,
.process.in .proc-step:nth-of-type(3) .proc-node::after,
.process.in .proc-step:nth-of-type(3) .proc-icon{transition-delay:.9s;}

@media (max-width:760px){
  .process{grid-template-columns:1fr;gap:2.2rem;margin-top:2.6rem;}
  .proc-rail{left:7px;right:auto;top:6px;bottom:6px;width:1px;height:auto;}
  .proc-fill{left:0;top:0;width:100%;height:0;transition:height 1.3s var(--ease) .15s;}
  .process.in .proc-fill{height:100%;}
  .proc-step{padding-top:0;padding-left:40px;}
  .proc-node{top:2px;left:0;}
  .proc-icon{top:-4px;right:2px;font-size:2.6rem;}
}
@media (prefers-reduced-motion:reduce){
  .proc-fill,.proc-node,.proc-node::after,.proc-icon{transition:none;}
}