/* ================================================================
   DIGITALE MARKETINGAGENTUR – style.css
   High-End Hybrid (dark hero / light content) · Mobile-First
   Vanilla CSS · Grid & Flexbox · keine Frameworks · lokale Fonts
   ================================================================ */

/* ----------------------------------------------------------------
   0. FONTS (lokal gehostet – DSGVO-konform)
   ---------------------------------------------------------------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/sora-600.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/sora-700.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/sora-800.woff2') format('woff2');}

/* ----------------------------------------------------------------
   1. CUSTOM PROPERTIES
   ---------------------------------------------------------------- */
:root{
    --primary:#4F46E5;
    --primary-dark:#4338CA;
    --accent:#22D3EE;
    --grad:linear-gradient(135deg,#7C5CFC 0%,#4F46E5 52%,#22D3EE 100%);
    --grad-soft:linear-gradient(135deg,rgba(124,92,252,.14),rgba(34,211,238,.12));

    --bg:#ffffff;
    --bg-alt:#F5F6FB;
    --bg-dark:#0B0F1C;
    --bg-dark-2:#141A2E;
    --surface:#ffffff;

    --text:#10162B;
    --text-light:#4B5167;
    --text-muted:#7A8197;
    --on-dark:rgba(255,255,255,.94);
    --on-dark-soft:#A4AECB;
    --border:#E6E8F1;
    --border-dark:rgba(255,255,255,.12);

    --font-display:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

    --radius:14px;
    --radius-lg:22px;
    --radius-xl:30px;
    --container:1200px;
    --pad:1.25rem;

    --shadow-sm:0 1px 3px rgba(16,22,43,.06);
    --shadow-md:0 10px 30px rgba(16,22,43,.08);
    --shadow-lg:0 24px 60px rgba(16,22,43,.12);
    --shadow-glow:0 16px 40px rgba(79,70,229,.35);

    --t-fast:.18s ease;
    --t:.3s cubic-bezier(.4,0,.2,1);
}

/* ----------------------------------------------------------------
   2. RESET / BASE
   ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px;}
body{
    font-family:var(--font-body);
    font-size:1rem;line-height:1.65;color:var(--text);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:var(--primary);text-decoration:none;transition:color var(--t-fast);}
ul,ol{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,select,textarea{font-family:inherit;font-size:1rem;}
:focus-visible{outline:3px solid rgba(79,70,229,.55);outline-offset:2px;border-radius:6px;}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;font-weight:700;letter-spacing:-.02em;color:var(--text);}
h1{font-size:clamp(2.2rem,6vw,3.6rem);font-weight:800;}
h2{font-size:clamp(1.75rem,4vw,2.6rem);}
h3{font-size:1.2rem;}
p{text-wrap:pretty;}

/* ----------------------------------------------------------------
   3. LAYOUT HELPERS
   ---------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--pad);}
.section{padding:4.5rem 0;}
.section-head{max-width:680px;margin:0 auto 3rem;text-align:center;}
.section-subtitle{color:var(--text-light);font-size:1.08rem;margin-top:.85rem;}
.text-gradient{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

.skip-link{position:absolute;left:-999px;top:0;z-index:2000;background:var(--primary);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 10px 0;}
.skip-link:focus{left:0;color:#fff;}

/* Eyebrow label */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin-bottom:1rem;}
.eyebrow--center{justify-content:center;}
.eyebrow__dot{width:7px;height:7px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(79,70,229,.14);}
.section-head .eyebrow{color:var(--primary);}

/* ----------------------------------------------------------------
   4. BUTTONS
   ---------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
    padding:.85rem 1.6rem;font-weight:600;font-size:1rem;border-radius:999px;
    transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
    white-space:nowrap;border:1.5px solid transparent;line-height:1;}
.btn-large{padding:1.05rem 2rem;font-size:1.05rem;}
.btn-icon{width:1.15em;height:1.15em;}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow-glow);}
.btn-primary:hover{color:#fff;transform:translateY(-3px);box-shadow:0 22px 48px rgba(79,70,229,.45);}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px);}
.btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateY(-3px);}
.btn-dark{background:var(--text);color:#fff;}
.btn-dark:hover{background:#000;color:#fff;transform:translateY(-3px);box-shadow:var(--shadow-md);}
.btn-ghost-dark{background:transparent;color:var(--text);border-color:var(--border);}
.btn-ghost-dark:hover{border-color:var(--primary);color:var(--primary);}
.btn-primary:hover .btn-icon{transform:translateX(3px);transition:transform var(--t);}

/* ----------------------------------------------------------------
   5. BRAND / LOGO
   ---------------------------------------------------------------- */
.brand{display:inline-flex;align-items:center;gap:.6rem;}
.brand-mark{width:38px;height:38px;flex:none;filter:drop-shadow(0 6px 14px rgba(79,70,229,.35));}
.brand-text{display:flex;flex-direction:column;line-height:1;}
.brand-text__sub{font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--text-muted);font-weight:600;}
.brand-text__main{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--text);letter-spacing:-.02em;}

/* ----------------------------------------------------------------
   6. HEADER / NAV
   ---------------------------------------------------------------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:1000;transition:background var(--t),box-shadow var(--t),backdrop-filter var(--t);}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:74px;}
.site-header.scrolled{background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 1px 0 var(--border),var(--shadow-sm);}
.nav-list{display:flex;align-items:center;gap:.4rem;}
.nav-list a{color:var(--text);font-weight:500;padding:.5rem .85rem;border-radius:999px;transition:background var(--t-fast),color var(--t-fast);}
.nav-list a:not(.nav-cta):hover{background:var(--bg-alt);color:var(--primary);}
.nav-cta{background:var(--grad);color:#fff!important;padding:.6rem 1.25rem!important;font-weight:600;box-shadow:var(--shadow-glow);}
.nav-cta:hover{transform:translateY(-2px);}
.mobile-nav-toggle{display:none;flex-direction:column;gap:5px;padding:.6rem;z-index:1001;}
.hamburger,.hamburger::before,.hamburger::after{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:all var(--t-fast);}
.hamburger{position:relative;}
.hamburger::before,.hamburger::after{content:'';position:absolute;left:0;}
.hamburger::before{top:-7px;}.hamburger::after{top:7px;}
.mobile-nav-toggle[aria-expanded="true"] .hamburger{background:transparent;}
.mobile-nav-toggle[aria-expanded="true"] .hamburger::before{transform:rotate(45deg);top:0;}
.mobile-nav-toggle[aria-expanded="true"] .hamburger::after{transform:rotate(-45deg);top:0;}

/* ----------------------------------------------------------------
   7. HERO (dark)
   ---------------------------------------------------------------- */
.hero{position:relative;background:var(--bg-dark);color:var(--on-dark);overflow:hidden;
    padding:calc(74px + 3rem) 0 4rem;isolation:isolate;}
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;}
.hero__blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;}
.hero__blob--1{width:520px;height:520px;background:#5B43E6;top:-160px;right:-120px;animation:floatA 16s ease-in-out infinite;}
.hero__blob--2{width:440px;height:440px;background:#1FB8D6;bottom:-180px;left:-120px;animation:floatB 19s ease-in-out infinite;}
.hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 75%);}
.hero__grid-layout{display:grid;gap:2.5rem;align-items:center;}
.hero .eyebrow{color:#C9C2FF;}
.hero .eyebrow__dot{box-shadow:0 0 0 4px rgba(124,92,252,.25);}
.hero h1{color:#fff;max-width:14ch;}
.hero__subtitle{color:var(--on-dark-soft);font-size:1.12rem;margin:1.25rem 0 2rem;max-width:46ch;}
.hero__cta-group{display:flex;flex-wrap:wrap;gap:.85rem;}
.hero__badges{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:2rem;}
.hero__badges li{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;color:var(--on-dark-soft);}
.hero__badges svg{width:18px;height:18px;color:var(--accent);}

/* Hero visual */
.hero__visual{position:relative;min-height:340px;}
.glass-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 60px rgba(0,0,0,.35);}
.glass-card--main{padding:1.5rem;}
.glass-card__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1rem;}
.glass-card__title{font-weight:600;color:#fff;}
.badge-up{background:rgba(34,211,238,.16);color:#7DEEFF;font-weight:700;font-size:.85rem;padding:.25rem .6rem;border-radius:999px;}
.mini-chart{display:flex;align-items:flex-end;gap:.55rem;height:120px;}
.mini-chart span{flex:1;height:var(--h);background:var(--grad);border-radius:7px 7px 3px 3px;opacity:.92;animation:growBar 1s cubic-bezier(.2,.8,.2,1) backwards;}
.mini-chart span:nth-child(1){animation-delay:.05s}.mini-chart span:nth-child(2){animation-delay:.12s}.mini-chart span:nth-child(3){animation-delay:.19s}.mini-chart span:nth-child(4){animation-delay:.26s}.mini-chart span:nth-child(5){animation-delay:.33s}.mini-chart span:nth-child(6){animation-delay:.4s}.mini-chart span:nth-child(7){animation-delay:.47s}
.mini-legend{display:flex;justify-content:space-between;margin-top:.7rem;font-size:.78rem;color:var(--on-dark-soft);}
.glass-card--float{position:absolute;display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;}
.glass-card--float svg{width:30px;height:30px;flex:none;padding:6px;border-radius:9px;background:var(--grad);color:#fff;}
.glass-card--float strong{display:block;color:#fff;font-size:.98rem;font-family:var(--font-display);}
.glass-card--float span{font-size:.76rem;color:var(--on-dark-soft);}
.glass-card--seo{top:6%;right:-6px;animation:floatA 7s ease-in-out infinite;}
.glass-card--social{bottom:2%;left:-10px;animation:floatB 8s ease-in-out infinite;}

/* ----------------------------------------------------------------
   8. TRUST BAR
   ---------------------------------------------------------------- */
.trust{background:var(--bg-dark-2);padding:1.6rem 0;}
.trust__inner{display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center;}
.trust__label{color:var(--on-dark-soft);font-size:.85rem;letter-spacing:.04em;}
.trust__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;}
.trust__tags li{padding:.45rem 1rem;border:1px solid var(--border-dark);border-radius:999px;color:var(--on-dark);font-size:.85rem;font-weight:500;background:rgba(255,255,255,.03);}

/* ----------------------------------------------------------------
   9. FEATURES
   ---------------------------------------------------------------- */
.features{background:var(--bg);}
.features-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.8rem;transition:transform var(--t),box-shadow var(--t),border-color var(--t);position:relative;overflow:hidden;}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent;}
.feature-icon{display:inline-flex;width:54px;height:54px;border-radius:15px;align-items:center;justify-content:center;background:var(--grad-soft);color:var(--primary);margin-bottom:1.1rem;}
.feature-icon svg{width:26px;height:26px;}
.feature-card h3{margin-bottom:.5rem;}
.feature-card p{color:var(--text-light);font-size:.98rem;}
.feature-card--cta{background:var(--bg-dark);color:var(--on-dark);border:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.7rem;}
.feature-card--cta::before{content:'';position:absolute;inset:0;background:var(--grad);opacity:.18;z-index:0;}
.feature-card--cta>*{position:relative;z-index:1;}
.feature-card--cta h3{color:#fff;}
.feature-card--cta p{color:var(--on-dark-soft);}

/* ----------------------------------------------------------------
   10. STATS
   ---------------------------------------------------------------- */
.stats{background:var(--bg-alt);}
.stats-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem 1.8rem;text-align:center;box-shadow:var(--shadow-sm);}
.stat-card__num{font-family:var(--font-display);font-weight:800;font-size:3rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;margin-bottom:.6rem;}
.stat-card p{color:var(--text-light);font-size:.96rem;}
.stats-note{text-align:center;color:var(--text-muted);font-size:.82rem;margin-top:1.5rem;}

/* ----------------------------------------------------------------
   11. MISTAKES
   ---------------------------------------------------------------- */
.mistakes{background:var(--bg);}
.mistakes__grid{display:grid;gap:2.2rem;}
.mistakes__intro h2{margin:.4rem 0 1rem;}
.mistakes__intro p{color:var(--text-light);margin-bottom:1.6rem;}
.mistakes__list{display:flex;flex-direction:column;gap:.8rem;}
.mistakes__list li{display:flex;gap:1rem;align-items:flex-start;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.25rem;transition:transform var(--t),box-shadow var(--t);}
.mistakes__list li:hover{transform:translateX(5px);box-shadow:var(--shadow-md);}
.mistakes__list .x{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(239,68,68,.12);position:relative;margin-top:2px;}
.mistakes__list .x::before,.mistakes__list .x::after{content:'';position:absolute;top:50%;left:50%;width:11px;height:2px;background:#EF4444;border-radius:2px;}
.mistakes__list .x::before{transform:translate(-50%,-50%) rotate(45deg);}
.mistakes__list .x::after{transform:translate(-50%,-50%) rotate(-45deg);}
.mistakes__list strong{display:block;font-family:var(--font-display);font-size:1.02rem;margin-bottom:.15rem;}
.mistakes__list div{color:var(--text-light);font-size:.93rem;line-height:1.5;}

/* ----------------------------------------------------------------
   12. ABOUT
   ---------------------------------------------------------------- */
.about{background:var(--bg-alt);}
.about__grid{display:grid;gap:2.5rem;align-items:center;}
.about__visual{position:relative;display:grid;justify-items:center;}
.about__avatar{width:200px;height:200px;border-radius:50%;overflow:hidden;box-shadow:var(--shadow-lg);}
.about__quote{padding:1.3rem 1.4rem;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-md);max-width:320px;margin-top:-2.5rem;position:relative;border-radius:var(--radius-lg);}
.about__quote p{font-style:italic;color:var(--text);font-size:1rem;margin-bottom:.7rem;}
.about__quote footer strong{display:block;font-family:var(--font-display);}
.about__quote footer span{font-size:.85rem;color:var(--text-muted);}
.about__content h2{margin:.4rem 0 1.1rem;}
.about__content p{color:var(--text-light);margin-bottom:1rem;}
.about__chips{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem;}
.about__chips li{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.55rem 1.1rem;font-weight:600;font-size:.9rem;color:var(--text);}
.about__chips li [data-count]{color:var(--primary);}

/* ----------------------------------------------------------------
   13. REFERENCES
   ---------------------------------------------------------------- */
.refs{background:var(--bg);}
.refs-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;}
.ref-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.6rem;transition:transform var(--t),box-shadow var(--t),border-color var(--t);color:var(--text);}
.ref-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent;}
.ref-card__tag{align-self:flex-start;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);background:var(--grad-soft);padding:.3rem .7rem;border-radius:999px;margin-bottom:1rem;}
.ref-card h3{font-size:1.1rem;word-break:break-word;}
.ref-card p{color:var(--text-light);font-size:.95rem;margin:.5rem 0 1.1rem;flex:1;}
.ref-card__link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--primary);font-size:.92rem;}
.ref-card__link svg{width:16px;height:16px;transition:transform var(--t-fast);}
.ref-card:hover .ref-card__link svg{transform:translate(2px,-2px);}

/* ----------------------------------------------------------------
   14. PROCESS
   ---------------------------------------------------------------- */
.process{background:var(--bg-alt);}
.process-steps{display:grid;grid-template-columns:1fr;gap:1.5rem;counter-reset:step;}
.step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem 1.6rem;box-shadow:var(--shadow-sm);}
.step__number{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:16px;background:var(--grad);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.2rem;margin-bottom:1rem;box-shadow:var(--shadow-glow);}
.step h3{margin-bottom:.4rem;}
.step p{color:var(--text-light);font-size:.96rem;}

/* ----------------------------------------------------------------
   15. FAQ
   ---------------------------------------------------------------- */
.faq{background:var(--bg);}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.8rem;}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:box-shadow var(--t),border-color var(--t);}
.faq-item[open]{box-shadow:var(--shadow-md);border-color:rgba(79,70,229,.3);}
.faq-item summary{cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:600;font-size:1.05rem;padding:1.15rem 3rem 1.15rem 1.3rem;position:relative;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'';position:absolute;right:1.3rem;top:1.45rem;width:13px;height:13px;border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(45deg);transition:transform var(--t);}
.faq-item[open] summary::after{transform:rotate(-135deg);top:1.6rem;}
.faq-answer{padding:0 1.3rem 1.3rem;color:var(--text-light);}

/* ----------------------------------------------------------------
   16. CONTACT / FUNNEL (dark section + light form card)
   ---------------------------------------------------------------- */
.contact{position:relative;background:var(--bg-dark);color:var(--on-dark);overflow:hidden;isolation:isolate;}
.contact__bg{position:absolute;inset:0;z-index:-1;opacity:.7;}
.contact__grid{display:grid;gap:2.5rem;align-items:start;}
.contact .eyebrow{color:#C9C2FF;}
.contact__intro h2{color:#fff;margin:.4rem 0 1rem;}
.contact__intro>p{color:var(--on-dark-soft);font-size:1.05rem;}
.contact__list{display:flex;flex-direction:column;gap:.7rem;margin:1.6rem 0;}
.contact__list li{display:flex;align-items:center;gap:.6rem;color:var(--on-dark);}
.contact__list svg{width:20px;height:20px;color:var(--accent);flex:none;}
.contact__direct{display:flex;flex-direction:column;gap:.6rem;}
.contact__direct a{display:inline-flex;align-items:center;gap:.6rem;color:#fff;font-weight:600;}
.contact__direct svg{width:20px;height:20px;color:var(--accent);}
.contact__direct a:hover{color:var(--accent);}

/* Funnel form card */
.funnel-wrap{background:var(--surface);border-radius:var(--radius-xl);box-shadow:0 40px 80px rgba(0,0,0,.4);padding:1.8rem;color:var(--text);}
.funnel__progress{margin-bottom:1.6rem;}
.funnel__bar{height:7px;background:var(--bg-alt);border-radius:999px;overflow:hidden;}
.funnel__bar span{display:block;height:100%;width:33.33%;background:var(--grad);border-radius:999px;transition:width .45s cubic-bezier(.4,0,.2,1);}
.funnel__count{font-size:.82rem;color:var(--text-muted);margin-top:.55rem;}
.funnel__count strong{color:var(--primary);}
.funnel__step{border:none;animation:fadeStep .35s ease;}
.js .funnel__step{display:none;}
.js .funnel__step.is-active{display:block;}
.funnel__step legend{font-family:var(--font-display);font-weight:700;font-size:1.2rem;margin-bottom:.4rem;color:var(--text);}
.funnel__hint{font-size:.85rem;color:var(--text-muted);margin-bottom:1rem;}
.funnel__error{color:#DC2626;font-size:.85rem;font-weight:500;min-height:1em;margin-top:.6rem;}
.funnel__nav{display:flex;justify-content:space-between;gap:.8rem;margin-top:1.5rem;}
.funnel__nav .btn{flex:0 0 auto;}
.funnel__legal{font-size:.76rem;color:var(--text-muted);margin-top:.9rem;}

/* choice cards */
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.choice input{position:absolute;opacity:0;width:0;height:0;}
.choice__box{display:flex;align-items:center;justify-content:center;text-align:center;min-height:54px;padding:.6rem .8rem;border:1.5px solid var(--border);border-radius:var(--radius);font-weight:600;font-size:.92rem;transition:all var(--t-fast);background:var(--surface);}
.choice:hover .choice__box{border-color:var(--primary);}
.choice input:checked+.choice__box{border-color:var(--primary);background:var(--grad-soft);color:var(--primary-dark);box-shadow:inset 0 0 0 1px var(--primary);}
.choice input:focus-visible+.choice__box{outline:3px solid rgba(79,70,229,.5);outline-offset:2px;}

/* fields */
.field{margin-bottom:1.1rem;}
.field-row{display:grid;grid-template-columns:1fr;gap:0 1rem;}
.field__label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.4rem;color:var(--text);}
.opt{font-weight:400;color:var(--text-muted);}
.funnel input[type=text],.funnel input[type=email],.funnel input[type=tel],.funnel select,.funnel textarea{
    width:100%;padding:.8rem .95rem;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--bg-alt);color:var(--text);transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);}
.funnel input:focus,.funnel select:focus,.funnel textarea:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(79,70,229,.12);}
.funnel textarea{resize:vertical;min-height:84px;}
.pill-group{display:flex;flex-wrap:wrap;gap:.6rem;}
.pill input{position:absolute;opacity:0;}
.pill span{display:inline-block;padding:.6rem 1.1rem;border:1.5px solid var(--border);border-radius:999px;font-weight:600;font-size:.9rem;transition:all var(--t-fast);}
.pill input:checked+span{border-color:var(--primary);background:var(--grad-soft);color:var(--primary-dark);}
.pill input:focus-visible+span{outline:3px solid rgba(79,70,229,.5);outline-offset:2px;}
.consent{display:flex;gap:.65rem;align-items:flex-start;font-size:.88rem;color:var(--text-light);cursor:pointer;margin-top:.4rem;}
.consent input{margin-top:.2rem;width:18px;height:18px;flex:none;accent-color:var(--primary);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* success */
.funnel__success{text-align:center;padding:2rem 1rem;animation:fadeStep .4s ease;}
.funnel__check{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--grad);color:#fff;margin-bottom:1rem;box-shadow:var(--shadow-glow);}
.funnel__check svg{width:34px;height:34px;}
.funnel__success h3{font-size:1.4rem;margin-bottom:.5rem;}
.funnel__success p{color:var(--text-light);}

/* ----------------------------------------------------------------
   17. FOOTER
   ---------------------------------------------------------------- */
.site-footer{background:#070A14;color:var(--on-dark-soft);padding-top:3.5rem;}
.footer__grid{display:grid;grid-template-columns:1fr;gap:2.2rem;padding-bottom:2.5rem;}
.footer__brand .brand{margin-bottom:1rem;}
.footer__brand .brand-text__sub{color:#6E7794;}
.footer__brand .brand-text__main{color:#fff;}
.footer__brand p{font-size:.92rem;max-width:34ch;}
.footer__motto{margin-top:1rem;color:#7DEEFF;font-weight:600;font-size:.85rem;}
.footer__col h4{color:#fff;font-size:1rem;margin-bottom:1rem;font-family:var(--font-display);}
.footer__col ul{display:flex;flex-direction:column;gap:.55rem;}
.footer__col a{color:var(--on-dark-soft);font-size:.93rem;}
.footer__col a:hover{color:#fff;}
.footer__contact address{font-style:normal;display:flex;flex-direction:column;gap:.45rem;font-size:.93rem;}
.footer__contact strong{color:#fff;}
.footer__bottom{border-top:1px solid rgba(255,255,255,.08);padding:1.3rem 0;}
.footer__bottom .container{display:flex;flex-direction:column;gap:.7rem;align-items:center;text-align:center;}
.footer__bottom p{font-size:.85rem;}
.footer__bottom ul{display:flex;gap:1.2rem;}
.footer__bottom a{color:var(--on-dark-soft);font-size:.85rem;}
.footer__bottom a:hover{color:#fff;}

/* ----------------------------------------------------------------
   18. FLOATING CTA (mobile)
   ---------------------------------------------------------------- */
.cta-float{position:fixed;right:1rem;bottom:1rem;z-index:900;display:inline-flex;align-items:center;gap:.5rem;background:var(--grad);color:#fff;padding:.85rem 1.3rem;border-radius:999px;font-weight:600;box-shadow:var(--shadow-glow);transform:translateY(150%);opacity:0;transition:transform var(--t),opacity var(--t);}
.cta-float.is-visible{transform:translateY(0);opacity:1;}
.cta-float svg{width:20px;height:20px;}

/* ----------------------------------------------------------------
   19. SCROLL ANIMATIONS
   ---------------------------------------------------------------- */
.fade-in{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease;}
.fade-in.is-visible{opacity:1;transform:none;}
.features-grid .fade-in:nth-child(2){transition-delay:.08s}.features-grid .fade-in:nth-child(3){transition-delay:.16s}.features-grid .fade-in:nth-child(4){transition-delay:.08s}.features-grid .fade-in:nth-child(5){transition-delay:.16s}.features-grid .fade-in:nth-child(6){transition-delay:.24s}
.refs-grid .fade-in:nth-child(even){transition-delay:.1s}
.stats-grid .fade-in:nth-child(2){transition-delay:.1s}.stats-grid .fade-in:nth-child(3){transition-delay:.2s}

/* ----------------------------------------------------------------
   20. KEYFRAMES
   ---------------------------------------------------------------- */
@keyframes floatA{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,24px)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,-22px)}}
@keyframes growBar{from{height:0;opacity:0}}
@keyframes fadeStep{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ----------------------------------------------------------------
   21. MEDIA QUERIES
   ---------------------------------------------------------------- */
@media (max-width:1023px){
    .mobile-nav-toggle{display:flex;}
    .nav-list{position:fixed;inset:74px 0 0 0;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:.4rem;
        background:rgba(255,255,255,.98);backdrop-filter:blur(14px);padding:1.5rem var(--pad);
        transform:translateX(100%);transition:transform var(--t);box-shadow:var(--shadow-lg);}
    .nav-list.is-open{transform:translateX(0);}
    .nav-list a{padding:.9rem 1rem;font-size:1.1rem;border-radius:12px;}
    .nav-list a:not(.nav-cta){border-bottom:1px solid var(--border);border-radius:0;}
    .nav-cta{text-align:center;margin-top:.6rem;}
}
@media (min-width:600px){
    .field-row{grid-template-columns:1fr 1fr;}
    .footer__bottom .container{flex-direction:row;justify-content:space-between;}
}
@media (min-width:768px){
    :root{--pad:2rem;}
    .section{padding:6rem 0;}
    .features-grid{grid-template-columns:repeat(2,1fr);}
    .stats-grid{grid-template-columns:repeat(3,1fr);}
    .refs-grid{grid-template-columns:repeat(2,1fr);}
    .process-steps{grid-template-columns:repeat(3,1fr);}
    .mistakes__grid{grid-template-columns:1fr 1fr;align-items:start;}
    .about__grid{grid-template-columns:.85fr 1.15fr;}
    .footer__grid{grid-template-columns:2fr 1fr 1fr 1.4fr;}
    .choice-grid{grid-template-columns:repeat(3,1fr);}
    .funnel-wrap{padding:2.4rem;}
    .cta-float{display:none;}
}
@media (min-width:1024px){
    .hero{padding:calc(74px + 4.5rem) 0 5.5rem;}
    .hero__grid-layout{grid-template-columns:1.05fr .95fr;gap:3.5rem;}
    .features-grid{grid-template-columns:repeat(3,1fr);}
    .refs-grid{grid-template-columns:repeat(3,1fr);}
    .contact__grid{grid-template-columns:1fr 1.05fr;gap:3.5rem;}
    .section-head{margin-bottom:3.5rem;}
}
@media (min-width:1280px){:root{--pad:2.5rem;}}

/* ----------------------------------------------------------------
   22. SUBPAGES (Impressum / Datenschutz / Danke)
   ---------------------------------------------------------------- */
.subheader{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);}
.subheader .container{display:flex;align-items:center;justify-content:space-between;height:74px;}
.subheader .back{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--text-light);}
.subheader .back svg{width:18px;height:18px;}
.subheader .back:hover{color:var(--primary);}
.page-hero{background:var(--bg-dark);color:#fff;padding:calc(74px + 2.5rem) 0 2.5rem;position:relative;overflow:hidden;isolation:isolate;}
.page-hero .hero__bg{position:absolute;inset:0;z-index:-1;}
.page-hero h1{color:#fff;}
.page-hero p{color:var(--on-dark-soft);margin-top:.6rem;}
.prose{max-width:820px;margin:0 auto;padding:3rem var(--pad) 4rem;}
.prose h2{text-align:left;font-size:1.5rem;margin:2.2rem 0 .8rem;}
.prose h3{font-size:1.12rem;margin:1.6rem 0 .5rem;}
.prose p,.prose li{color:var(--text-light);margin-bottom:.7rem;}
.prose ul{list-style:disc;padding-left:1.3rem;margin-bottom:1rem;}
.prose a{font-weight:500;}
.prose strong{color:var(--text);}
.prose .lead{font-size:1.1rem;color:var(--text);}
.note-box{background:var(--bg-alt);border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.5rem 0;}
.note-box p{margin:0;}
.thanks{min-height:70vh;display:grid;place-items:center;text-align:center;padding:6rem var(--pad);}
.thanks__inner{max-width:560px;}
.thanks .funnel__check{margin:0 auto 1.5rem;}
.thanks h1{margin-bottom:1rem;}
.thanks p{color:var(--text-light);font-size:1.1rem;margin-bottom:2rem;}

/* ----------------------------------------------------------------
   23. REDUCED MOTION & PRINT
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
    .fade-in{opacity:1;transform:none;}
    .hero__blob{animation:none;}
}