/* Kinetic Depth · Liquid-Glass-Layer (geteilt) */
/* ╔══════════════════════════════════════════════════════════════════╗
   ║  KINETIC DEPTH · Upgrade-Layer v3                                   ║
   ║  Motion-first · Tiefe · Liquid-Glass · 3D-Tilt · Aurora · Parallax ║
   ║  Additiv & nicht-destruktiv — nur Enhancement über bestehendem CSS.║
   ╚══════════════════════════════════════════════════════════════════╝ */
:root{
  --kd-glow-x:50%;     /* cursor-folgendes Licht (von JS gesetzt) */
  --kd-glow-y:42%;
  --kd-glass-light:rgba(255,255,255,.62);
  --kd-glass-dark:rgba(26,24,21,.5);
  --kd-spec:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 42%);
  --kd-amber:#ffb800;
  --kd-honey:#ffd863;
  --kd-ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* feines, geteiltes Grain als reusable Layer */
@supports (mix-blend-mode:overlay){
  .kd-grain::after{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
    opacity:.04;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
}

/* ──────────────── SECTION-TIEFE & AURORA ──────────────── */
/* Helle Sektionen: warm-cremiger, leicht plastischer Verlauf */
.why,section.price,.fin,.voices,.faq,.news,.bl-section,.lin:not(.dark-section){
  position:relative;isolation:isolate;
}
.why::after,section.price::after,.fin::after,.voices::after,.news::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 12% -10%,rgba(255,204,3,.06),transparent 55%),
    radial-gradient(120% 90% at 100% 110%,rgba(255,184,0,.05),transparent 55%),
    linear-gradient(180deg,rgba(255,253,247,.6),rgba(246,243,236,0) 30%);
}

/* Dark-Sektionen: cursor-folgender Glow + tiefe Aurora */
.dark-section,.config,.final,.break,.hero,.komp-zoom,.trust,.path{
  position:relative;isolation:isolate;
}
.dark-section::after,.config::after,.final::after,.break::after,
.komp-zoom::after,.trust::after,.path::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(560px 460px at var(--kd-glow-x) var(--kd-glow-y),
            rgba(255,204,3,.14),rgba(255,184,0,.05) 40%,transparent 68%);
  opacity:.0;transition:opacity .6s var(--ease);mix-blend-mode:screen;
  will-change:opacity;
}
.dark-section.kd-lit::after,.config.kd-lit::after,.final.kd-lit::after,
.break.kd-lit::after,.komp-zoom.kd-lit::after,.trust.kd-lit::after,.path.kd-lit::after{opacity:1}
/* Deko (Glow/Aurora) liegt via z-index:-1 INNERHALB der isolierten Sektion:
   über dem Section-Hintergrund, unter jedem Inhalt. KEINE position/z-Overrides
   auf Kinder — Layout & Stacking des Basis-CSS bleiben unangetastet. */

/* dekorative, langsam driftende Aurora-Orbs (rein CSS, hinter Inhalt) */
.kd-aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.kd-aurora span{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;
  background:radial-gradient(circle,rgba(255,204,3,.5),transparent 65%);
  will-change:transform;
}
.kd-aurora span:nth-child(1){width:520px;height:520px;top:-160px;left:-120px;animation:kd-drift1 26s ease-in-out infinite}
.kd-aurora span:nth-child(2){width:420px;height:420px;bottom:-180px;right:-100px;background:radial-gradient(circle,rgba(255,184,0,.4),transparent 65%);animation:kd-drift2 32s ease-in-out infinite}
.kd-aurora span:nth-child(3){width:300px;height:300px;top:30%;right:18%;background:radial-gradient(circle,rgba(255,216,99,.32),transparent 65%);animation:kd-drift1 38s ease-in-out infinite reverse}
@keyframes kd-drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(60px,40px,0) scale(1.12)}}
@keyframes kd-drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-50px,-30px,0) scale(1.08)}}

/* Licht-Divider / Lichtkante zwischen Sektionen */
.why::before,.fin::before{}
.kd-edge{position:relative}
.kd-edge::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1480px,92vw);height:1px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,204,3,.55),transparent);
}

/* ──────────────── LIQUID GLASS · NAV ──────────────── */
.nav-pill{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.74)) !important;
  backdrop-filter:blur(26px) saturate(190%) !important;
  -webkit-backdrop-filter:blur(26px) saturate(190%) !important;
  box-shadow:0 16px 48px -16px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.05),
             inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.04) !important;
  position:relative;
  /* KEIN overflow:hidden — es wuerde die absolut positionierten Dropdown-Panels (.dd-panel) clippen */
}
.nav-pill::before{
  content:'';position:absolute;top:0;left:0;right:0;height:48%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);
  opacity:.7;border-radius:9999px 9999px 0 0;
}
.nav.dark .nav-pill{
  background:linear-gradient(180deg,rgba(40,38,34,.62),rgba(20,19,17,.5)) !important;
  box-shadow:0 18px 56px -16px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.25),
             inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.3) !important;
}
.nav.dark .nav-pill::before{background:linear-gradient(180deg,rgba(255,255,255,.16),transparent);opacity:.9}
.nav-konfig{
  background:linear-gradient(180deg,#ffd633,var(--gold)) !important;
  box-shadow:0 14px 36px -10px rgba(255,204,3,.6),0 2px 8px rgba(0,0,0,.1),
             inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 6px rgba(180,130,0,.25) !important;
  position:relative;overflow:hidden;
}
.nav-konfig::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.6) 48%,transparent 60%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.nav-konfig:hover::after{transform:translateX(120%)}
.dd-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.9)) !important;
  box-shadow:0 32px 80px -24px rgba(0,0,0,.24),0 4px 14px rgba(0,0,0,.07),
             inset 0 1px 0 rgba(255,255,255,.9) !important;
  backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);
}
/* Dark-Nav (Hero): dunkles Glas, sonst weisser Text auf weissem Panel */
.nav.dark .dd-panel{
  background:linear-gradient(180deg,rgba(30,28,25,.96),rgba(18,17,15,.93)) !important;
  box-shadow:0 32px 80px -20px rgba(0,0,0,.6),0 4px 14px rgba(0,0,0,.3),
             inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.mm{
  background:linear-gradient(165deg,rgba(26,24,21,.96),rgba(16,15,13,.98)) !important;
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
}

/* ──────────────── GLASIGE BUTTONS ──────────────── */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 62%);
  transform:translateX(-130%);transition:transform .65s var(--ease);
}
.btn:hover::after{transform:translateX(130%)}
.btn-gold{
  background:linear-gradient(180deg,#ffd84a,var(--gold)) !important;
  box-shadow:0 10px 28px -12px rgba(255,204,3,.5),
             inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 6px rgba(180,130,0,.22) !important;
}
.btn-gold:hover{box-shadow:0 18px 40px -12px rgba(255,204,3,.6),inset 0 1px 0 rgba(255,255,255,.85) !important}
.btn-outline{position:relative;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-outline-light{
  background:rgba(255,255,255,.05) !important;
  backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.btn-fill,.btn-fill-light{position:relative;overflow:hidden}

/* ──────────────── GLAS-KARTEN-SYSTEM + 3D-TILT ──────────────── */
/* gemeinsamer Tilt-Wrapper: JS setzt --rx/--ry, Glare via --gx/--gy */
.kd-tilt{
  transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .5s var(--kd-ease-spring),box-shadow .5s var(--ease);
  will-change:transform;position:relative;
}
.kd-tilt::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:6;
  border-radius:inherit;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(220px 220px at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.4),transparent 60%);
  mix-blend-mode:soft-light;
}
.kd-tilt.kd-active::after{opacity:1}

/* helle Glas-Oberfläche für Karten auf Creme */
.why-card,.demand-card,.voice-card,.news-card,.faq-item,.price-chart,.fin-calc,.fin-stats,.price-chip{
  position:relative;
}
.why-card{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(250,247,238,.5)) !important;
  border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(0,0,0,.02);
  border-radius:6px;
}
.why-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 64px -22px rgba(0,0,0,.16),0 0 0 1px rgba(255,204,3,.18)}

.demand-card,.voice-card,.fin-calc{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(250,247,238,.78)) !important;
  border:1px solid rgba(255,255,255,.8) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 10px -4px rgba(0,0,0,.06) !important;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.demand-card:hover,.voice-card:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 26px 56px -26px rgba(0,0,0,.32),0 0 0 1px rgba(255,204,3,.28) !important;
}
.price-chart,.fin-stats{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.85)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 24px 60px -34px rgba(0,0,0,.2) !important;
  border:1px solid rgba(255,255,255,.85) !important;border-radius:8px !important;
}
.fin-stat{transition:background .4s var(--ease)}
.fin-stat:hover{background:rgba(255,204,3,.05)}
.news-card .news-cover{border-radius:8px;overflow:hidden;box-shadow:0 18px 44px -28px rgba(0,0,0,.4)}
.faq-item{position:relative;overflow:hidden}
.faq-item.open{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,247,238,.9)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 40px -30px rgba(0,0,0,.3)}
.faq-q{position:relative;z-index:1}

/* dunkle Glas-Oberflächen (trust / path / komponenten / config) */
.trust-card,.trust-reins,.z-card,.referral,.path-step{
  position:relative;
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
}
.trust-card{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015)) !important;
  border:1px solid rgba(255,255,255,.12) !important;border-radius:8px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .5s var(--kd-ease-spring),box-shadow .5s var(--ease),border-color .4s var(--ease);
}
.trust-card:hover{
  border-color:rgba(255,204,3,.4) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 28px 60px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,204,3,.18),0 0 40px -8px rgba(255,204,3,.2);
}
.trust-reins{
  background:linear-gradient(120deg,rgba(255,204,3,.1),rgba(255,255,255,.015) 60%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);border-radius:8px !important;
}
.z-card{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);border-radius:6px;
}
.z-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 40px -22px rgba(255,204,3,.45)}
.referral{
  background:linear-gradient(110deg,rgba(255,204,3,.15),rgba(255,255,255,.02) 55%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);border-radius:8px !important;
}
.path-step{transition:background .4s var(--ease)}
.path-step:hover{background:rgba(255,255,255,.03)}

/* Hero-Stats → echtes Glas-Panel */
.hero-stat{
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(20,20,20,.34)) !important;
  border:1px solid rgba(255,255,255,.18) !important;border-radius:10px;
  backdrop-filter:blur(18px) saturate(160%) !important;-webkit-backdrop-filter:blur(18px) saturate(160%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 50px -24px rgba(0,0,0,.6);
  transition:transform .5s var(--kd-ease-spring),box-shadow .5s var(--ease);
}
.hero-stat:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 26px 60px -24px rgba(255,204,3,.4)}

/* Hero-Grade: edlerer, plastischerer Licht-Look */
.hero-grade{
  background:
    linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.05) 52%,rgba(0,0,0,.88) 100%),
    radial-gradient(60% 50% at 80% 18%,rgba(255,204,3,.22) 0%,transparent 55%),
    radial-gradient(40% 40% at 8% 90%,rgba(255,184,0,.12) 0%,transparent 60%) !important;
}

/* ──────────────── KICKER / MARK / NUM-ID VERFEINERT ──────────────── */
.kicker .num-id{text-shadow:0 0 12px rgba(255,204,3,.5)}
.mark::after{box-shadow:0 2px 14px -2px rgba(255,204,3,.5)}

/* ──────────────── SCROLLBAR · SELECTION · FOCUS ──────────────── */
html{scrollbar-color:rgba(255,204,3,.6) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(255,204,3,.7),rgba(255,184,0,.55));
  border-radius:99px;border:3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
::selection{background:var(--gold);color:var(--ink);text-shadow:none}
a:focus-visible,button:focus-visible,.btn:focus-visible,.nav-link:focus-visible{
  outline:none;box-shadow:0 0 0 2px rgba(255,204,3,.9),0 0 0 6px rgba(255,204,3,.28),0 0 22px rgba(255,204,3,.4);
  border-radius:6px;
}

/* ──────────────── SMART-KOMBI · FLOW-SVG GLOW ──────────────── */
.flow-svg .energy-line{filter:drop-shadow(0 0 5px rgba(255,204,3,.6))}
.flow-svg .energy-pulse{filter:drop-shadow(0 0 16px rgba(255,204,3,.95)) drop-shadow(0 0 6px rgba(255,184,0,.9))}
.flow-svg .node-bg{
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.06));
  transition:filter .4s var(--ease);
}
.flow-svg .node-bg.active{filter:drop-shadow(0 0 16px rgba(255,204,3,.5))}
.smart-result{
  position:relative;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.7);
  border-radius:8px;overflow:hidden;background:rgba(255,255,255,.4);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}

/* ──────────────── DASHBOARD-GLAS-RAND ──────────────── */
.dash,.dash-forecast{box-shadow:0 50px 100px -30px rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.9) !important}

/* ──────────────── FALLBACK: kein backdrop-filter ──────────────── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-pill{background:rgba(255,255,255,.96) !important}
  .nav.dark .nav-pill{background:rgba(24,22,19,.94) !important}
  .hero-stat{background:rgba(20,20,20,.8) !important}
  .trust-card,.trust-reins,.z-card,.referral{background:rgba(40,38,34,.9) !important}
}

/* ──────────────── REDUCED MOTION — Motion komplett aus ──────────────── */
@media (prefers-reduced-motion:reduce){
  .kd-aurora span{animation:none !important}
  .kd-tilt{transform:none !important;transition:none !important}
  .kd-tilt::after{display:none !important}
  .dash,.dash-forecast,.dash-photo,.dash-video,.process-illust img,.komp-illust-img{animation:none !important}
  .nav-konfig::after,.btn::after{display:none !important}
  .dark-section::after,.config::after,.final::after,.break::after,
  .komp-zoom::after,.trust::after,.path::after{transition:none !important}
  html{scroll-behavior:auto}
}

/* ──────────────── PERF: globaler will-change-Haushalt ──────────────── */
.kd-glow-target{contain:layout style}