:root{
    --bg: #0b1220;
    --card:#0f172a;
    --muted:#94a3b8;
    --text:#e2e8f0;
    --brand:#0ea5e9;
    --brand-2:#22d3ee;
    --accent:#818cf8;
    --ok:#22c55e;
    --warn:#f59e0b;
    --danger:#ef4444;
    --border: rgba(148,163,184,.15);
    --border-strong: rgba(148,163,184,.28);
    --card-bg: linear-gradient(180deg, rgba(2,6,23,.55), rgba(2,6,23,.35));
    --ring: 0 0 0 4px hsl(198 93% 60% / .25);
    --radius:16px;
    --shadow: 0 20px 60px -20px rgba(2,6,23,.6);
    --shadow-soft: 0 8px 30px -12px rgba(2,6,23,.5);
    --page-bg: linear-gradient(180deg,#060b18 0%, #0b1220 35%, #0b1220 100%);
    --grad: radial-gradient(1200px 600px at 20% -10%, rgba(34,211,238,.25), transparent 50%),
    radial-gradient(1000px 500px at 80% 0%, rgba(14,165,233,.35), transparent 50%);
}

/* Light theme (sauber, ohne invert-Hack) */
[data-theme="light"]{
    --bg:#f6f9fc;
    --card:#ffffff;
    --muted:#5b6b7f;
    --text:#0f1b2d;
    --border: rgba(15,27,45,.10);
    --border-strong: rgba(15,27,45,.16);
    --card-bg: linear-gradient(180deg, #ffffff, #f4f8fd);
    --shadow: 0 20px 50px -24px rgba(15,42,80,.35);
    --shadow-soft: 0 8px 24px -14px rgba(15,42,80,.30);
    --page-bg: linear-gradient(180deg,#eef4fb 0%, #f6f9fc 40%, #f6f9fc 100%);
    --grad: radial-gradient(1200px 600px at 20% -10%, rgba(34,211,238,.18), transparent 50%),
    radial-gradient(1000px 500px at 80% 0%, rgba(14,165,233,.20), transparent 50%);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
    color:var(--text);
    background:var(--page-bg), var(--grad);
    background-attachment: fixed;
    line-height:1.6;
    transition: background-color .3s ease, color .3s ease;
}
a{color:var(--text); text-decoration:none}
.container{max-width:1200px; margin-inline:auto; padding: clamp(16px, 2vw, 28px);}
:focus-visible{outline:2px solid var(--brand-2); outline-offset:2px; border-radius:6px}

/* Header – oben transparent, beim Scrollen sichtbar */
header{
    position:sticky; top:0; z-index:50;
    background:transparent;
    border-bottom:1px solid transparent;
    backdrop-filter:none;
    transition:background .25s ease, box-shadow .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
header.scrolled{
    backdrop-filter:saturate(160%) blur(12px);
    background:linear-gradient(180deg, rgba(2,6,23,.92), rgba(2,6,23,.82));
    box-shadow:0 12px 34px -20px rgba(2,6,23,.85);
    border-bottom-color:var(--border-strong);
}
[data-theme="light"] header.scrolled{
    background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
    box-shadow:0 12px 34px -22px rgba(15,42,80,.35);
    border-bottom-color:var(--border);
}
/* Bei offenem Mobil-Menü immer mit Hintergrund */
header:has(.drawer.open){
    backdrop-filter:saturate(160%) blur(12px);
    background:linear-gradient(180deg, rgba(2,6,23,.96), rgba(2,6,23,.9));
    border-bottom-color:var(--border-strong);
}
[data-theme="light"] header:has(.drawer.open){
    background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.92));
    border-bottom-color:var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:15px; transition:padding-block .25s ease}
header.scrolled .nav{padding-block:9px}

/* Brand / Logo */
.brand{display:flex; align-items:center; gap:11px; font-weight:800}
.brand-mark{
    width:36px; height:36px; border-radius:11px; display:block;
    box-shadow:0 8px 20px -6px rgba(14,165,233,.55);
    transition:transform .22s ease, box-shadow .22s ease;
}
.brand:hover .brand-mark{transform:translateY(-1px) rotate(-4deg); box-shadow:0 12px 26px -8px rgba(14,165,233,.7)}
.brand-name{font-size:1.16rem; letter-spacing:-.02em; color:var(--text)}
.brand-accent{
    background:linear-gradient(90deg,var(--brand),var(--brand-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    padding-inline:1px;
}

/* Nav links */
.nav-links{display:flex; gap:2px; align-items:center}
.nav-links a{
    color:var(--muted); font-weight:600; padding:8px 13px; border-radius:10px;
    position:relative; transition:color .2s ease, background .2s ease;
}
.nav-links a:hover{color:var(--text); background:rgba(148,163,184,.12)}
.nav-links a.active{color:var(--text)}
.nav-links a.active::after{
    content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px; border-radius:2px;
    background:linear-gradient(90deg,var(--brand),var(--brand-2));
}

/* Buttons */
.cta{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 18px; border-radius:12px;
    background:linear-gradient(90deg, var(--brand), var(--brand-2));
    color:#052235; font-weight:800; box-shadow: var(--shadow-soft);
    border:0; cursor:pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.cta:hover{transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(14,165,233,.5)}
.cta:active{transform:translateY(0)}
.ghost{background:transparent; color:var(--text); border:1px solid var(--border-strong); box-shadow:none}
.ghost:hover{border-color:var(--brand-2); background:rgba(34,211,238,.08)}

.nav-actions{display:flex; gap:10px; align-items:center}
.cta-sm{padding:10px 16px; border-radius:11px}

/* Icon-Button (Theme) */
.icon-btn{
    width:40px; height:40px; display:grid; place-items:center; border-radius:11px;
    background:transparent; border:1px solid var(--border-strong); color:var(--text);
    cursor:pointer; font-size:1.05rem; line-height:1;
    transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.icon-btn:hover{background:rgba(148,163,184,.12); border-color:var(--brand-2)}
.icon-btn:active{transform:scale(.93)}

/* Hamburger */
.hamburger{
    display:none; position:relative; width:42px; height:40px; border-radius:11px;
    border:1px solid var(--border-strong); background:transparent; cursor:pointer;
    transition:border-color .2s ease, background .2s ease;
}
.hamburger:hover{border-color:var(--brand-2); background:rgba(148,163,184,.10)}
.hamburger span{
    position:absolute; left:11px; right:11px; height:2px; border-radius:2px; background:var(--text);
    transition:transform .28s ease, opacity .2s ease;
}
.hamburger span:nth-child(1){top:13px}
.hamburger span:nth-child(2){top:19px}
.hamburger span:nth-child(3){top:25px}
.hamburger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{display:none}

/* Hero */
.hero{display:grid; grid-template-columns: 1.15fr 1fr; gap:44px; align-items:center; padding:56px 0 28px}
.hero-copy{max-width:640px}
.kicker{color:var(--brand-2); font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:.8rem}
h1{font-size: clamp(2.2rem, 3.8vw, 4rem); line-height:1.06; margin:10px 0 6px; letter-spacing:-.02em}
.hero-sub{font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight:800; margin:0 0 8px; letter-spacing:-.01em}
.lead{font-size: clamp(1rem, 1.15vw, 1.15rem); color:var(--muted); margin:12px 0}
.hero-cta{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap}
.trust-row{display:flex; gap:20px; flex-wrap:wrap; margin-top:24px; color:var(--muted); font-weight:600; font-size:.92rem}
.trust-row span{display:inline-flex; align-items:center; gap:7px}
.trust-row .w2a-ic{color:var(--brand-2)}

/* Benefits */
.benefits .card{display:flex; flex-direction:column; gap:4px}

/* Idee-Sektion */
.idee-lead{max-width:760px; margin-inline:auto; font-size:clamp(1rem,1.15vw,1.15rem)}
.idee-card{text-align:center}
.idee-card .icon{margin-inline:auto}

.process-wrap{
    margin-top:56px; padding:36px 28px 30px;
    border:1px solid var(--border); border-radius:20px;
    background:var(--card-bg); box-shadow:var(--shadow-soft);
}
.process-title{margin:0 0 34px; font-size:clamp(1.2rem,1.8vw,1.5rem)}

.process{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
    position:relative;
}
/* Verbindungslinie hinter den Nummern */
.process::before{
    content:""; position:absolute; top:26px; left:10%; right:10%; height:2px;
    background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--accent));
    opacity:.45;
}
.step{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 4px}
.step-body{display:flex; flex-direction:column; align-items:center}
.step-num{
    width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
    font-weight:800; font-size:1.15rem; color:#052235;
    background:linear-gradient(135deg,var(--brand-2),var(--brand));
    box-shadow:0 10px 24px -10px rgba(14,165,233,.7);
    position:relative; z-index:1;
    border:4px solid var(--bg);
    transition:transform .22s ease, box-shadow .22s ease;
}
.step-ic{
    display:grid; place-items:center; width:38px; height:38px; margin:14px 0 8px; border-radius:11px;
    background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(129,140,248,.14));
    border:1px solid var(--border-strong); color:#38bdf8;
}
[data-theme="light"] .step-ic{color:#0284c7}
.step-title{font-size:1.02rem}
.step-desc{color:var(--muted); font-size:.92rem; margin-top:4px; max-width:200px}
.step:hover .step-num{transform:translateY(-3px); box-shadow:0 16px 30px -10px rgba(14,165,233,.85)}

/* Badges (falls noch verwendet) */
.badges{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.badge{
    display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
    border:1px solid var(--border-strong); color:var(--muted); font-weight:600; backdrop-filter: blur(6px);
    background: rgba(2,6,23,.4);
}

/* Showcase phone mock */
.phone{
    width:min(360px, 90%); justify-self:center; aspect-ratio:9/19.5; border-radius:36px;
    background:linear-gradient(180deg,#0f172a,#0b1220);
    border: 2px solid var(--border-strong);
    box-shadow: 0 40px 90px -30px rgba(2,6,23,.9), inset 0 0 0 12px #0005;
    padding:14px; position:relative; overflow:hidden;
    transition: transform .4s ease;
}
.phone:hover{transform: translateY(-6px) rotate(-.5deg)}
.notch{
    position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:2;
    width:42%; height:18px; background:#000; border-radius:0 0 14px 14px;
    box-shadow: inset 0 0 0 1px #1118;
}
.screen{
    position:relative;
    height:100%; border-radius:24px; overflow:hidden;
    background:
            radial-gradient(120% 80% at 20% 0%, rgba(14,165,233,.35), transparent 60%),
            radial-gradient(120% 80% at 80% 0%, rgba(34,211,238,.3), transparent 60%),
            linear-gradient(180deg, #0b1220 0%, #0e1529 40%, #0b1220 100%);
    display:grid; place-items:center; padding:0;
}
.screen iframe{position:absolute; inset:0; height:100%; width:100%; border:0}
@keyframes float { 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(-10px)} }

/* Section */
section{padding: clamp(48px, 5vw, 80px) 0; border-top:1px solid var(--border); scroll-margin-top:90px}
#home{border-top:0}
h2{font-size: clamp(1.6rem, 2.4vw, 2.4rem); margin:0 0 14px; letter-spacing:-.01em}
h3{margin:6px 0}
.sub{color:var(--muted)}
.grid{display:grid; gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:var(--radius); padding:22px;
    box-shadow: var(--shadow-soft);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--border-strong)}
.icon{
    width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
    background:linear-gradient(135deg,rgba(34,211,238,.20),rgba(129,140,248,.18));
    border:1px solid var(--border-strong); color:#38bdf8; margin-bottom:12px;
    transition: transform .22s ease, color .22s ease;
}
[data-theme="light"] .icon{color:#0284c7}
.card:hover .icon{transform:translateY(-2px) scale(1.05); color:var(--brand-2)}
.w2a-ic{display:block}
.muted{color:var(--muted)}

/* Pricing */
.pricing{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; align-items:stretch}
.price-card{position:relative; overflow:hidden; display:flex; flex-direction:column}
.price-card .list{flex:1}
.price-card.best{
    border-color:transparent;
    outline:2px solid var(--brand);
    box-shadow: 0 24px 60px -24px rgba(14,165,233,.55);
    transform: translateY(-6px);
}
.price-card.best:hover{transform:translateY(-10px)}
.ribbon{
    position:absolute; top:16px; right:-34px; transform:rotate(45deg);
    background:linear-gradient(90deg,var(--brand),var(--brand-2));
    color:#052235; font-weight:800; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
    padding:6px 40px; box-shadow:var(--shadow-soft);
}
.price{font-weight:800; font-size:1.9rem; line-height:1.2}
.small{font-size:.9rem; color:var(--muted)}
.list{margin:16px 0 0; padding:0; list-style:none}
.list li{display:flex; gap:10px; align-items:flex-start; margin:10px 0}
.li-check{
    flex:0 0 auto; display:grid; place-items:center; width:22px; height:22px; border-radius:7px;
    background:rgba(34,197,94,.14); color:var(--ok); margin-top:1px;
}
[data-theme="light"] .li-check{color:#16a34a}

/* Icon-Liste (Formular) */
.feature-list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.feature-list li{display:flex; gap:12px; align-items:center}
.li-ic{
    flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
    background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(129,140,248,.16));
    border:1px solid var(--border); color:#38bdf8;
}
[data-theme="light"] .li-ic{color:#0284c7}
.contact-line{display:flex; align-items:center; gap:8px}
.contact-line .w2a-ic{color:var(--brand-2); flex:0 0 auto}
.chip{display:inline-block; padding:6px 12px; border-radius:999px; background:rgba(34,211,238,.15); color:#0891b2; font-weight:700; font-size:.8rem}
[data-theme="dark"] .chip, :root .chip{color:#7dd3fc}
[data-theme="light"] .chip{color:#0e7490; background:rgba(14,165,233,.12)}

/* FAQ */
details{border:1px solid var(--border-strong); border-radius:12px; padding:14px 16px; background:var(--card-bg); transition:box-shadow .2s ease, border-color .2s ease}
details:hover{border-color:var(--brand-2)}
details+details{margin-top:12px}
summary{cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--brand-2); font-weight:800; font-size:1.2rem; transition:transform .2s ease}
details[open] summary::after{transform:rotate(45deg)}
details[open]{box-shadow: var(--shadow-soft)}
details p{margin:10px 0 0}

/* Footer */
footer{padding:56px 0 40px; color:var(--muted); border-top:1px solid var(--border)}
footer a{color:var(--muted)}
footer a:hover{color:var(--text)}

/* Form */
.form{display:grid; gap:14px}
.form label{font-weight:600; font-size:.92rem; display:block; margin-bottom:6px}
.input,.select,textarea{
    width:100%; padding:12px 14px; border-radius:12px; background:var(--bg); color:var(--text);
    border:1px solid var(--border-strong); outline:none; font-family:inherit; font-size:1rem;
    transition:border-color .18s ease, box-shadow .18s ease;
}
.input:focus, .select:focus, textarea:focus{box-shadow: var(--ring); border-color:#38bdf8}
.row{display:grid; gap:14px; grid-template-columns: 1fr 1fr}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .reveal{opacity:1; transform:none; transition:none}
    .phone:hover{transform:none}
}

/* Sticky mobile CTA */
.mobile-cta{
    display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,.92) 40%);
    backdrop-filter:blur(8px);
}
[data-theme="light"] .mobile-cta{background:linear-gradient(180deg, rgba(246,249,252,0), rgba(246,249,252,.95) 40%)}
.mobile-cta .cta{width:100%}

/* Utilities */
.center{text-align:center}
.mt8{margin-top:8px} .mt16{margin-top:16px} .mt24{margin-top:24px} .mt32{margin-top:32px}
.hide{display:none}
.hidden{display:none}

/* Responsive */
@media (max-width: 960px){
    .hero{grid-template-columns:1fr; padding-top:28px}
    .grid-3{grid-template-columns:1fr 1fr}
    .grid-2{grid-template-columns:1fr}
    .pricing{grid-template-columns:1fr}
    .price-card.best{transform:none}
    /* Idee-Prozess: vertikale Timeline */
    .process{grid-template-columns:1fr; gap:0}
    .process::before{display:none}
    .step{flex-direction:row; align-items:flex-start; text-align:left; gap:16px; padding:0 0 26px}
    .step-num{width:48px; height:48px; font-size:1.05rem; flex:0 0 auto}
    .step-body{align-items:flex-start; text-align:left; padding-top:2px}
    .step-ic{margin:0 0 8px}
    .step-desc{max-width:none}
    .step::before{
        content:""; position:absolute; left:23px; top:54px; bottom:0; width:2px;
        background:linear-gradient(180deg,var(--brand),var(--accent)); opacity:.35;
    }
    .step:last-child::before{display:none}
    .process-wrap{padding:28px 18px 22px}

    .nav-links{display:none}
    .nav-cta{display:none}
    .hamburger{display:block}
    .drawer{display:none}
    .drawer.open{
        display:flex; flex-direction:column; gap:4px;
        padding:8px 0 16px; border-top:1px solid var(--border);
        animation:drawerIn .24s ease;
    }
    .drawer a{color:var(--text); font-weight:600; padding:13px 14px; border-radius:11px; font-size:1.05rem}
    .drawer a:hover{background:rgba(148,163,184,.12)}
    .drawer .drawer-cta{margin-top:10px; color:#052235; justify-content:center}
    .drawer .drawer-cta:hover{background:linear-gradient(90deg, var(--brand), var(--brand-2))}
    .mobile-cta{display:block}
    body{padding-bottom:76px}
}
@keyframes drawerIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
@media (max-width: 620px){
    .grid-3{grid-template-columns:1fr}
    .row{grid-template-columns:1fr}
}

.streichpreis{
    text-decoration: line-through;
    text-decoration-color: var(--danger);
    text-decoration-thickness: 2px;
    color:var(--muted); font-size:1.1rem; margin-right:8px;
}
.endprice{color:var(--ok); font-weight:800}
[data-theme="light"] .endprice{color:#15803d}

.d-flex-column{display:flex; flex-direction:column; gap:6px}

.word-color{
    background:linear-gradient(90deg,#7dd3fc,#60a5fa);
    -webkit-background-clip:text;
    background-clip:text; color:transparent;
}

.aktion-label{
    display:inline-block; margin-left:10px;
    padding:6px 14px;
    background: linear-gradient(135deg, #ff4d4d, #ff9900);
    color:#fff; font-weight:bold; font-size:.85rem;
    border-radius:25px; box-shadow:0 4px 6px rgba(0,0,0,0.2);
    text-transform:uppercase; letter-spacing:1px;
    vertical-align:middle;
    animation: pulse 2s infinite;
}
@keyframes pulse{
    0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)}
}

.pos-relative{position:relative}
.briefing li{margin-top:10px}
.white{color:#fff}
.text-underline{text-decoration:underline}
.bold{font-weight:bold}
.lightsalmon{color:lightsalmon}
.pro{font-weight:bold; color:#f59e0b}