@font-face{font-family:"Inter";src:url("/fonts/Inter-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-SemiBold.otf") format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:"Inter Display";src:url("/fonts/InterDisplay-Bold.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Inter Display";src:url("/fonts/InterDisplay-Black.otf") format("opentype");font-weight:900;font-display:swap}
:root{
 --night:#0E0A1C;--deep:#170F2E;--violet:#24164A;--ink:#1A1233;--paper:#F6F3FC;--mist:#ECE6F8;
 --text:#EDE9F7;--soft:#BDB4D8;--muted:#5E5878;--line:#DCD3EE;--acc:#7B4DFF;
 --holo:linear-gradient(115deg,#9ff3ff 0%,#c8a8ff 22%,#ffb3e0 40%,#fff1a8 58%,#a8ffd0 76%,#9ff3ff 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Inter",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:18px;line-height:1.65}
h1,h2,h3{font-family:"Inter Display","Inter",system-ui,sans-serif;line-height:1.06;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,6.4vw,5rem);font-weight:900}
h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:900}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em}
a{color:var(--acc)}
:focus-visible{outline:3px solid #c8a8ff;outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:740px}
section{padding:104px 0}
.dark{background:var(--deep);color:var(--text)}
.dark a{color:#c8a8ff}
.light{background:#fff}
.small{font-size:.85rem;color:var(--muted)}
.dark .small{color:var(--soft)}
.holo-text{background:var(--holo);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 8s linear infinite}
@keyframes sheen{to{background-position:200% 0}}

/* Buttons */
.btn{display:inline-block;position:relative;font-weight:600;text-decoration:none;padding:17px 30px;border-radius:999px;font-size:1.05rem;color:var(--ink);background:var(--holo);background-size:200% 100%;box-shadow:0 10px 30px rgba(123,77,255,.35);transition:transform .2s ease,box-shadow .2s ease;animation:sheen 6s linear infinite}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(123,77,255,.5)}
.btn.ghost{background:transparent;color:var(--text);border:1.5px solid rgba(255,255,255,.3);box-shadow:none;animation:none}
.btn.ghost:hover{border-color:rgba(255,255,255,.7)}

/* Hero */
header.hero{position:relative;background:radial-gradient(1200px 700px at 75% 40%,#3a2370 0%,var(--deep) 45%,var(--night) 100%);color:var(--text);padding:36px 0 120px;overflow:hidden}
header.hero::before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 0deg at 70% 45%,rgba(159,243,255,.10),rgba(200,168,255,.14),rgba(255,179,224,.10),rgba(255,241,168,.08),rgba(159,243,255,.10));filter:blur(60px);animation:spin 40s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.nav{position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:72px}
.logo{display:flex;align-items:center;gap:10px;font-family:"Inter Display";font-weight:700;letter-spacing:.02em;color:#fff;text-decoration:none}
.logo i{width:26px;height:34px;border-radius:5px;background:var(--holo);background-size:200% 100%;animation:sheen 6s linear infinite;box-shadow:0 0 18px rgba(200,168,255,.6)}
.nav a.navlink{color:var(--soft);text-decoration:none;font-size:.95rem}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero p.lead{font-size:1.22rem;color:var(--soft);max-width:33em}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;color:var(--soft);font-size:.92rem}
.trust span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--holo);margin-right:8px;vertical-align:middle}
.brand{display:block;color:var(--soft);margin-bottom:28px}

/* Cards */
.fan{position:relative;height:520px;perspective:1200px}
.tcg{position:absolute;left:50%;top:50%;width:250px;aspect-ratio:5/7;border-radius:16px;transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.tcg svg{width:100%;height:100%;display:block;border-radius:16px;box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.tcg .shine{position:absolute;inset:0;border-radius:16px;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,rgba(200,168,255,.35) 50%,transparent 62%);background-size:250% 100%;mix-blend-mode:overlay;animation:glint 5.5s ease-in-out infinite;pointer-events:none}
.tcg .foil{position:absolute;inset:0;border-radius:16px;background:var(--holo);background-size:200% 200%;mix-blend-mode:color-dodge;opacity:.18;animation:sheen 9s linear infinite;pointer-events:none}
@keyframes glint{0%,15%{background-position:150% 0}55%,100%{background-position:-60% 0}}
.c1{--r:-14deg;--x:-118%;--y:-46%;z-index:1}
.c2{--r:2deg;--x:-50%;--y:-54%;z-index:3}
.c3{--r:16deg;--x:18%;--y:-44%;z-index:2}
.tcg{transform:translate(var(--x),var(--y)) rotate(var(--r))}
.fan .tcg{animation:deal 1.1s cubic-bezier(.2,.8,.2,1) both}
.c1{animation-delay:.15s!important}.c2{animation-delay:.3s!important}.c3{animation-delay:.45s!important}
@keyframes deal{from{opacity:0;transform:translate(-50%,10%) rotate(0deg) scale(.85)}}
.c3 .shine{animation-delay:1.8s}.c1 .shine{animation-delay:3.4s}
.spark{position:absolute;width:14px;height:14px;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:twinkle 3.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1)}}

.foilcard{position:absolute;inset:0;border-radius:16px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12);
 background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 14px),
  repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 14px),
  linear-gradient(160deg,rgba(20,12,40,0) 30%,rgba(20,12,40,.38) 100%),
  var(--holo);background-size:auto,auto,auto,220% 220%;animation:foilmove 10s ease-in-out infinite alternate}
.foilcard::before{content:"";position:absolute;inset:10px;border-radius:10px;border:1.5px solid rgba(255,255,255,.55);box-shadow:inset 0 0 40px rgba(255,255,255,.25)}
.foilcard::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 30% 20%,rgba(255,255,255,.45),transparent 55%)}
.v-main{filter:saturate(1.05)}
.v-cool{background-color:#1b2a5a;filter:hue-rotate(40deg) saturate(.9) brightness(.92)}
.v-warm{filter:hue-rotate(-35deg) saturate(.95) brightness(.95)}
.fc-top{position:absolute;left:22px;right:22px;top:22px;height:10px;border-radius:5px;background:rgba(255,255,255,.55);z-index:1}
.fc-mark{position:absolute;right:20px;bottom:16px;font-family:"Inter Display";font-weight:900;font-size:.95rem;letter-spacing:.12em;color:rgba(26,18,51,.55);z-index:1}
@keyframes foilmove{from{background-position:0 0,0 0,0 0,0% 50%}to{background-position:0 0,0 0,0 0,100% 50%}}
.chip{position:absolute;z-index:5;background:rgba(18,12,36,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:10px 16px;color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.35);animation:floaty 6s ease-in-out infinite, pop .6s 1.2s both}
.chip small{display:block;font-size:.72rem;color:var(--soft)}
.chip b{font-family:"Inter Display";font-size:1.05rem}
.ch1{left:-2%;top:16%}
.ch2{right:-2%;top:44%;animation-delay:1.5s,1.45s}
.ch3{left:10%;bottom:6%;animation-delay:3s,1.7s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pop{from{opacity:0;scale:.8}}
@media (max-width:900px){.chip{padding:8px 12px}.chip b{font-size:.95rem}.ch1{left:0}.ch2{right:0}}
/* Sections */
.eyebrow{font-weight:600;color:var(--acc);margin-bottom:12px;display:block}
.dark .eyebrow{color:#c8a8ff}
.problem{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.q{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;font-family:"Inter Display";font-weight:700;font-size:1.15rem;line-height:1.3}
.story{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.quote{font-family:"Inter Display";font-weight:900;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.18}
.quote small{display:block;font-family:"Inter";font-weight:400;font-size:1rem;color:var(--soft);margin-top:16px}
.modules{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;counter-reset:m}
.modules li{counter-increment:m;display:grid;grid-template-columns:60px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--line)}
.modules li::before{content:counter(m,decimal-leading-zero);font-family:"Inter Display";font-weight:900;font-size:1.5rem;background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent;filter:saturate(1.6) brightness(.8)}
.modules b{display:block}
.modules span{color:var(--muted);font-size:.95rem}
.dark .modules li{border-color:rgba(255,255,255,.1)}
.dark .modules span{color:var(--soft)}
.tag{display:inline-block;font-size:.72rem;font-weight:600;background:var(--holo);border-radius:999px;padding:2px 9px;margin-left:6px;vertical-align:middle;color:var(--ink)}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.tool{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;overflow:hidden}
.tool::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--holo)}
.tool h3{margin-bottom:.35em}
.tool p{color:var(--muted);font-size:.95rem;margin:0}
.dark .tool{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.dark .tool p{color:var(--soft)}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px}
.fit>div{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px}
.fit ul{padding-left:1.2em;margin:0}.fit li{margin-bottom:.5em}
.price{background:radial-gradient(900px 500px at 20% 30%,#3a2370,var(--deep) 60%,var(--night));color:var(--text)}
.pricebox{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.pricebox img{width:100%;height:auto;border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.price ul{padding-left:1.2em;color:var(--soft)}
.amount{font-family:"Inter Display";font-size:4.6rem;line-height:1;font-weight:900;margin:8px 0}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--acc);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:.8em 0 0;color:var(--muted)}
footer{background:var(--night);color:var(--soft);padding:44px 0;font-size:.9rem}
footer a{color:#DCD3F5;margin-right:20px}
footer p{margin:.6em 0 0}
.legal{padding:64px 0}
.legal h1{font-size:2.4rem}
.legal h2{font-size:1.3rem;margin-top:1.8em}
.topbar{background:var(--deep);padding:18px 0}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
pre.copy{white-space:pre-wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;font-family:inherit;font-size:.95rem}
.banners{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.banners img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
.box img{width:100%;height:auto;display:block;border-radius:18px}
.hero .modules span{color:var(--soft)}

/* Scroll reveal (one quiet effect) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.on{opacity:1;transform:none}


/* --- Zusätzliche Animationen --- */
/* Kauf-Button: pulsierendes Leuchten + Lichtstreifen */
.btn.buy{overflow:hidden;isolation:isolate;animation:sheen 6s linear infinite,pulse 2.8s ease-in-out infinite}
.btn.buy::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);animation:sweep 3.6s ease-in-out infinite;z-index:-1}
.btn.buy:hover{transform:translateY(-3px) scale(1.03)}
@keyframes pulse{0%,100%{box-shadow:0 10px 30px rgba(123,77,255,.35),0 0 0 0 rgba(200,168,255,.45)}50%{box-shadow:0 14px 40px rgba(123,77,255,.55),0 0 0 12px rgba(200,168,255,0)}}
@keyframes sweep{0%,55%{left:-60%}85%,100%{left:130%}}
/* Hintergrund: schwebende Lichtwolken */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:520px;height:520px;left:-8%;top:-12%;background:#5b2fd6;animation-duration:24s}
.aurora i:nth-child(2){width:460px;height:460px;right:-6%;top:10%;background:#2aa3c9;opacity:.35;animation-duration:28s}
.aurora i:nth-child(3){width:420px;height:420px;left:35%;bottom:-25%;background:#c2418f;opacity:.35;animation-duration:32s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,40px) scale(1.12)}100%{transform:translate(-40px,70px) scale(.95)}}
/* Partikel-Canvas und Maus-Licht */
#particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cursorglow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(200,168,255,.18),transparent 65%);pointer-events:none;transform:translate(-50%,-50%);left:70%;top:40%;transition:left .25s ease-out,top .25s ease-out}
header.hero .wrap{position:relative;z-index:2}
/* Holo-Linie zwischen Abschnitten */
.divider{height:3px;background:var(--holo);background-size:200% 100%;animation:sheen 7s linear infinite}
/* Preisbereich: Lichtwolken + schwebende Kursbox */
.price{position:relative;overflow:hidden}
.price .wrap{position:relative;z-index:2}
.pricebox img{animation:hover 7s ease-in-out infinite}
@keyframes hover{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}
/* Karten-Hover in Listen */
.tool,.q{transition:transform .25s ease,box-shadow .25s ease}
.tool:hover,.q:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(60,30,140,.12)}
.tool::before{background-size:200% 100%;animation:sheen 6s linear infinite}
/* Nummern der Module nacheinander einblenden */
.modules.reveal li{opacity:0;transform:translateX(-10px);transition:opacity .5s ease,transform .5s ease}
.modules.reveal.on li{opacity:1;transform:none}
.modules.reveal.on li:nth-child(1){transition-delay:0.00s}
.modules.reveal.on li:nth-child(2){transition-delay:0.06s}
.modules.reveal.on li:nth-child(3){transition-delay:0.12s}
.modules.reveal.on li:nth-child(4){transition-delay:0.18s}
.modules.reveal.on li:nth-child(5){transition-delay:0.24s}
.modules.reveal.on li:nth-child(6){transition-delay:0.30s}
.modules.reveal.on li:nth-child(7){transition-delay:0.36s}
.modules.reveal.on li:nth-child(8){transition-delay:0.42s}
.modules.reveal.on li:nth-child(9){transition-delay:0.48s}
.modules.reveal.on li:nth-child(10){transition-delay:0.54s}
.modules.reveal.on li:nth-child(11){transition-delay:0.60s}
.modules.reveal.on li:nth-child(12){transition-delay:0.66s}

/* Sticky Kaufleiste auf dem Handy */
.stickybuy{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:none;justify-content:space-between;align-items:center;gap:12px;padding:10px 10px 10px 18px;border-radius:999px;background:rgba(18,12,36,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);color:#fff;transform:translateY(140%);transition:transform .35s ease}
.stickybuy.show{transform:none}
.stickybuy .btn{padding:12px 20px;font-size:.95rem;white-space:nowrap;flex-shrink:0}
@media (max-width:900px){.stickybuy{display:flex}}
@media (prefers-reduced-motion:reduce){.aurora,#particles,.cursorglow{display:none}}

@media (max-width:900px){
 .hero-grid,.story,.pricebox,.fit{grid-template-columns:1fr}
 .fan{height:420px;margin-top:10px}
 .tcg{width:190px}
 .problem{grid-template-columns:1fr 1fr}
 .modules{grid-template-columns:1fr}
 .tools,.banners{grid-template-columns:1fr}
 section{padding:72px 0}
 .nav{margin-bottom:44px}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .reveal{opacity:1;transform:none}
}