/* ================================================
   JEVION · Premium Webdesign-Agentur
   WebGL · Sections · Multi-Step Wizard · 3D Tilt
   ================================================ */

:root,
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #06060f;
    --bg-2: #0c0c18;
    --surface: rgba(255, 255, 255, 0.045);
    --surface-2: rgba(255, 255, 255, 0.08);
    --surface-3: rgba(255, 255, 255, 0.12);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);
    --text: #f4f4f8;
    --text-soft: rgba(244, 244, 248, 0.74);
    --text-mute: rgba(244, 244, 248, 0.46);
    --accent-1: #6366f1;
    --accent-2: #8b5cf6;
    --accent-3: #e879a9;
    --accent-4: #22d3ee;
    --gold: #d4af37;
    --success: #4ade80;
    --error: #f87171;
    --glass: rgba(12, 12, 24, 0.65);
    --glass-border: rgba(255, 255, 255, 0.1);
    --shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, 0.55);

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --maxw: 1120px;
    --maxw-narrow: 560px;
    --section-y: clamp(40px, 6vw, 64px);
    --section-head-gap: clamp(24px, 4vw, 40px);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f2f3f8;
    --bg-2: #e8eaf2;
    --surface: rgba(255, 255, 255, 0.72);
    --surface-2: rgba(255, 255, 255, 0.92);
    --surface-3: #ffffff;
    --border: rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.14);
    --text: #0f172a;
    --text-soft: rgba(15, 23, 42, 0.72);
    --text-mute: rgba(15, 23, 42, 0.48);
    --accent-1: #4f46e5;
    --accent-2: #7c3aed;
    --accent-3: #db2777;
    --accent-4: #0891b2;
    --glass: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 24px 48px -20px rgba(15, 23, 42, 0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--accent-2); color: #fff; }
html[data-theme="light"] *::selection { color: #fff; }

html { background: var(--bg); }
html, body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
    cursor: none;
    scroll-behavior: smooth;
}
html { scroll-padding-top: 76px; }

@media (max-width: 900px) {
    html, body { cursor: auto; }
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: none; border: 0; background: none; color: inherit; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ======================
   PAGE LOADER
   ====================== */
.loader {
    position: fixed; inset: 0;
    background: var(--bg);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.7s var(--ease), visibility 0.7s var(--ease);
}
.loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
html[data-theme="light"] .loader { background: var(--bg); }
html[data-theme="light"] .loader__bar { background: rgba(15, 23, 42, 0.08); }
.loader::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(99,102,241,0.18), transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(236,72,153,0.18), transparent 50%);
    animation: bgFloat 8s ease-in-out infinite alternate;
}
@keyframes bgFloat { from { transform: translate(0,0); } to { transform: translate(20px, -20px); } }
.loader__inner { width: min(90%, 320px); text-align: center; position: relative; z-index: 2; }
.loader__logo { position: relative; display: inline-block; margin: 0 auto 28px; }
.loader__logo img { width: 160px; opacity: 0; animation: fadeIn 0.6s var(--ease) 0.1s forwards; position: relative; z-index: 2; filter: drop-shadow(0 0 30px rgba(168,85,247,0.4)); }
.loader__logo::before {
    content: ''; position: absolute; inset: -30px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-1));
    filter: blur(30px); opacity: 0.5;
    animation: spin 4s linear infinite; z-index: 1;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader__bar { height: 2px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.loader__bar span {
    display: block; height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
    transition: width 0.2s linear;
    box-shadow: 0 0 20px var(--accent-2);
}
.loader__count { margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.3em; color: var(--text-mute); }
.loader__hint { margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; color: var(--text-mute); text-transform: uppercase; min-height: 14px; }
@keyframes fadeIn { to { opacity: 1; } }

/* ======================
   CUSTOM CURSOR + TRAIL
   ====================== */
.cursor, .cursor-dot {
    position: fixed; top: 0; left: 0;
    pointer-events: none;
    z-index: 99999;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
}
.cursor {
    width: 36px; height: 36px;
    border: 1.5px solid rgba(255,255,255,0.85);
    transition: width 0.25s var(--ease), height 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
}
html[data-theme="light"] .cursor {
    border-color: rgba(15, 23, 42, 0.55);
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.25);
}
.cursor-dot { width: 6px; height: 6px; background: #fff; transition: opacity 0.2s var(--ease); box-shadow: 0 0 8px rgba(168, 85, 247, 0.6); }
html[data-theme="light"] .cursor-dot { background: #0f172a; }
.cursor.is-hover { width: 64px; height: 64px; border-color: rgba(168, 85, 247, 0.95); background: rgba(168, 85, 247, 0.10); box-shadow: 0 0 26px rgba(168, 85, 247, 0.55); }
.cursor.is-hover ~ .cursor-dot { opacity: 0; }
.cursor.is-down { width: 24px; height: 24px; background: rgba(168,85,247,0.45); }
.cursor-trail { position: fixed; inset: 0; pointer-events: none; z-index: 99998; width: 100%; height: 100%; mix-blend-mode: screen; }
@media (max-width: 900px) { .cursor, .cursor-dot, .cursor-trail { display: none; } }

.ripple {
    position: fixed; width: 0; height: 0; border-radius: 50%;
    border: 1px solid rgba(168,85,247,0.7);
    pointer-events: none; z-index: 997;
    transform: translate(-50%, -50%);
    animation: ripple 0.7s var(--ease) forwards;
}
@keyframes ripple { 0% { width: 0; height: 0; opacity: 1; border-width: 2px; } 100% { width: 240px; height: 240px; opacity: 0; border-width: 1px; } }

/* ======================
   ANIMATED BACKGROUND
   ====================== */
.bg-aurora { position: fixed; inset: 0; z-index: -5; width: 100%; height: 100%; opacity: 0.85; }
.bg-canvas { position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%; }

.bg-grid {
    position: fixed; inset: 0; z-index: -2;
    background-image:
        linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(circle at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 75%);
    pointer-events: none;
    animation: gridDrift 40s linear infinite;
}
@keyframes gridDrift { to { background-position: 60px 60px; } }
.bg-noise {
    position: fixed; inset: 0; z-index: -1;
    pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' /></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
}
.bg-vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 28%, rgba(0,0,0,0.62) 100%); }
html[data-theme="light"] .bg-grid {
    background-image:
        linear-gradient(rgba(15,23,42,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,0.06) 1px, transparent 1px);
}
html[data-theme="light"] .bg-vignette {
    background: radial-gradient(ellipse at 50% 0%, transparent 40%, rgba(248, 250, 252, 0.4) 100%);
}
html[data-theme="light"] .bg-noise { opacity: 0.035; }
html[data-theme="light"] .bg-aurora { opacity: 0.35; }
html[data-theme="light"] .bg-orb { opacity: 0.22; }

.bg-orb { position: fixed; z-index: -4; border-radius: 50%; filter: blur(80px); opacity: 0.4; pointer-events: none; will-change: transform; }
.bg-orb--1 { width: 520px; height: 520px; top: -120px; left: -160px; background: radial-gradient(circle, var(--accent-1) 0%, transparent 70%); animation: orb1 22s ease-in-out infinite alternate; }
.bg-orb--2 { width: 600px; height: 600px; bottom: -160px; right: -180px; background: radial-gradient(circle, var(--accent-3) 0%, transparent 70%); animation: orb2 28s ease-in-out infinite alternate; }
.bg-orb--3 { width: 440px; height: 440px; top: 35%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--accent-2) 0%, transparent 70%); opacity: 0.3; animation: orb3 18s ease-in-out infinite alternate; }
@keyframes orb1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(160px, 80px) scale(1.15); } }
@keyframes orb2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-140px, -100px) scale(1.1); } }
@keyframes orb3 { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-40%, -60%) scale(1.2); } }

.bg-spotlight {
    position: fixed; pointer-events: none;
    width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    z-index: -1;
    transition: opacity 0.3s var(--ease);
    opacity: 0;
}
body.is-loaded .bg-spotlight { opacity: 1; }

.frame { position: fixed; width: 80px; height: 80px; color: var(--border-strong); pointer-events: none; z-index: 4; opacity: 0; transition: opacity 1s var(--ease) 1.6s; }
body.is-loaded .frame { opacity: 1; }
.frame--tl { top: 18px; left: 18px; } .frame--tr { top: 18px; right: 18px; }
.frame--bl { bottom: 18px; left: 18px; } .frame--br { bottom: 18px; right: 18px; }
@media (max-width: 900px) { .frame { display: none; } }

/* Scroll Progress */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
    z-index: 100;
    transition: width 0.05s linear;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.35);
}

/* ======================
   NAV
   ====================== */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    max-width: var(--maxw); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 28px;
    transition: padding 0.4s var(--ease), backdrop-filter 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
    border-bottom: 1px solid transparent;
    gap: 28px;
}
.nav.is-stuck {
    padding: 10px 28px;
    background: rgba(8, 8, 16, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom-color: var(--border);
    max-width: 100%;
    margin: 0;
}
.nav.is-stuck .nav__brand img { width: 78px; }
.nav__brand { position: relative; display: inline-block; transition: transform 0.4s var(--ease); }
.nav__brand img { width: 96px; transition: width 0.4s var(--ease); position: relative; z-index: 2; }
.nav__brand-glow {
    position: absolute; inset: -20px -10px; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(99,102,241,0), rgba(168,85,247,0.4) 40%, rgba(236,72,153,0) 70%, rgba(168,85,247,0) 100%);
    opacity: 0; filter: blur(20px);
    transition: opacity 0.5s var(--ease);
    animation: spin 6s linear infinite;
    z-index: 1;
}
.nav__brand:hover .nav__brand-glow { opacity: 1; }

.nav__links { display: flex; gap: 24px; flex: 1; justify-content: center; }
.nav__links a {
    font-size: 14px; font-weight: 500; color: var(--text-soft);
    position: relative;
    transition: color 0.3s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
    height: 1px; background: var(--accent-2); transform: scaleX(0); transform-origin: right;
    transition: transform 0.4s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border-radius: 99px;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    color: #fff;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 8px 20px -6px rgba(168, 85, 247, 0.6);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    white-space: nowrap;
}
.nav__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -6px rgba(168, 85, 247, 0.8); }

.nav__burger { display: none; width: 44px; height: 44px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); }
.nav__burger span { width: 22px; height: 1.5px; background: var(--text); transition: transform 0.3s var(--ease); }
@media (max-width: 640px) {
    .nav--maintenance .nav__burger { display: flex; }
    .nav--maintenance .nav__mail { display: none; }
}

@media (max-width: 980px) {
    .nav__links { display: none; }
}
@media (max-width: 720px) {
    .nav__cta span { display: none; }
    .nav__cta { padding: 10px; }
}

/* Theme toggle */
.theme-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-soft);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.2s var(--ease), box-shadow 0.35s var(--ease);
}
.theme-toggle:hover {
    color: var(--text);
    border-color: rgba(139, 92, 246, 0.45);
    background: var(--surface-2);
    box-shadow: 0 0 32px -2px rgba(139, 92, 246, 0.35);
}
.theme-toggle:active { transform: scale(0.96); }
.theme-toggle__icon { position: absolute; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.theme-toggle__icon--moon { opacity: 1; transform: scale(1); }
.theme-toggle__icon--sun { opacity: 0; transform: scale(0.85); }
.theme-toggle.is-light-active .theme-toggle__icon--sun { opacity: 1; transform: scale(1); }
.theme-toggle.is-light-active .theme-toggle__icon--moon { opacity: 0; transform: scale(0.85); }

/* Wartungs-Navigation */
.nav--maintenance {
    justify-content: space-between;
    gap: 16px;
}
.nav__tools {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
.nav__mail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-soft);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
    white-space: nowrap;
}
.nav__mail:hover { color: var(--text); border-color: rgba(139, 92, 246, 0.45); background: var(--surface-2); }
html[data-theme="light"] .nav__logo-img,
html[data-theme="light"] .footer__brand img {
    filter: brightness(0) saturate(100%);
    opacity: 0.88;
}
html[data-theme="light"] .nav.is-stuck {
    background: var(--glass);
    border-bottom-color: var(--border);
}
@media (max-width: 640px) {
    .nav__mail span { display: none; }
    .nav__mail { padding: 10px 12px; }
}

/* ======================
   HERO
   ====================== */
.hero {
    position: relative;
    max-width: var(--maxw); margin: 0 auto;
    padding: 96px 28px 56px;
    perspective: 1400px;
}
.hero--maintenance {
    padding: 88px 24px 32px;
    min-height: auto;
}
.hero__parallax {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(280px, 32vw);
    gap: 36px;
    align-items: start;
    transform-style: preserve-3d;
    transition: transform 0.6s var(--ease);
    will-change: transform;
}
.hero--maintenance .hero__parallax {
    grid-template-columns: 1fr;
    max-width: 36rem;
    margin: 0 auto;
    gap: 0;
    position: relative;
    z-index: 1;
}
.hero__aura {
    position: absolute;
    inset: -28% -40% -45%;
    background:
        radial-gradient(ellipse 65% 55% at 50% 28%, rgba(139, 92, 246, 0.38), transparent 62%),
        radial-gradient(ellipse 45% 40% at 72% 58%, rgba(236, 72, 153, 0.16), transparent 58%);
    pointer-events: none;
    z-index: 0;
    animation: auraPulse 11s ease-in-out infinite alternate;
}
@keyframes auraPulse {
    from { opacity: 0.78; transform: scale(1) translate(0, 0); }
    to { opacity: 1; transform: scale(1.06) translate(6px, -10px); }
}
.hero__rings {
    position: absolute;
    top: -8%;
    left: 50%;
    width: min(108%, 540px);
    aspect-ratio: 1;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
}
.hero__rings span {
    position: absolute;
    inset: 8%;
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 50%;
    animation: ringPulse 4.2s ease-out infinite;
}
.hero__rings span:nth-child(2) { animation-delay: 1.4s; border-color: rgba(99, 102, 241, 0.22); }
.hero__rings span:nth-child(3) { animation-delay: 2.8s; border-color: rgba(236, 72, 153, 0.18); }
@keyframes ringPulse {
    0% { transform: scale(0.68); opacity: 0.55; }
    70% { opacity: 0.2; }
    100% { transform: scale(1.12); opacity: 0; }
}
.hero__inner--solo {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}
.hero__inner--solo .badge { margin-left: auto; margin-right: auto; }
.hero__inner--solo .hero__lead { margin-left: auto; margin-right: auto; }
.hero__inner--solo .hero__cta { justify-content: center; }
.hero__title--maintenance { margin-bottom: 18px; }
.hero__countdown-note {
    font-size: 12px;
    color: var(--text-mute);
    margin-top: -12px;
    margin-bottom: 20px;
    max-width: 22rem;
    line-height: 1.45;
}
.countdown--compact {
    max-width: 22rem;
    margin-bottom: 8px;
}
.progress--maintenance {
    max-width: 22rem;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1080px) { .hero__parallax { grid-template-columns: 1fr; } }

.badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 99px;
    font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(168,85,247,0.10));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--text); margin-bottom: 20px;
    transform: translateZ(40px);
}
.badge__pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); animation: pulseDot 1.8s infinite; }
@keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 rgba(168,85,247,0.6); }
    70% { box-shadow: 0 0 0 10px rgba(168,85,247,0); }
    100% { box-shadow: 0 0 0 0 rgba(168,85,247,0); }
}

.hero__title {
    font-family: 'Syne', sans-serif; font-weight: 700;
    font-size: clamp(42px, 7vw, 92px); line-height: 0.96; letter-spacing: -0.03em;
    margin-bottom: 22px;
    transform: translateZ(60px);
}
.hero__title .line { display: block; overflow: hidden; padding: 0.05em 0; }
.hero__title .line--small { font-size: 0.4em; font-weight: 500; color: var(--text-soft); margin-top: 12px; letter-spacing: 0.02em; line-height: 1.25; }
.hero__title .word { display: inline-block; transform: translateY(110%); opacity: 0; }
.hero__title .word.is-in { animation: wordIn 1.05s cubic-bezier(0.22, 1.15, 0.36, 1) forwards; }
@keyframes wordIn { to { transform: translateY(0); opacity: 1; } }

.gradient-text {
    background: linear-gradient(120deg, #fff 0%, var(--accent-1) 30%, var(--accent-2) 55%, var(--accent-3) 80%, #fff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    animation: shimmer 5s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

.hero__lead { max-width: 34em; font-size: clamp(15px, 1.15vw, 17px); color: var(--text-soft); margin-bottom: 22px; line-height: 1.58; transform: translateZ(30px); }
.hero__lead strong { color: var(--text); font-weight: 600; }

.hero__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; transform: translateZ(50px); }

/* ===== Stats ===== */
.stats { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; transform: translateZ(50px); }
.stat__value {
    font-family: 'Syne', sans-serif; font-weight: 700;
    font-size: clamp(24px, 2.6vw, 30px);
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.5) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    line-height: 1; font-variant-numeric: tabular-nums;
}
.stat__label { margin-top: 4px; font-size: 10px; letter-spacing: 0.14em; color: var(--text-mute); text-transform: uppercase; }
.stat__sep { width: 1px; height: 24px; background: linear-gradient(180deg, transparent, var(--border-strong), transparent); }

/* Countdown */
.countdown { display: flex; align-items: stretch; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; transform: translateZ(40px); }
.countdown__cell {
    flex: 1; min-width: 72px;
    padding: 12px 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    text-align: center;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; overflow: hidden;
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.countdown__cell::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(99,102,241,0.08), transparent 50%); opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; }
.countdown__cell:hover { border-color: var(--border-strong); }
.countdown__cell:hover::before { opacity: 1; }
.countdown__value {
    font-family: 'Syne', sans-serif; font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; line-height: 1;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.6) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    font-variant-numeric: tabular-nums;
}
.countdown__label { margin-top: 6px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); }
.countdown__sep { align-self: center; font-family: 'Syne', sans-serif; font-size: clamp(22px, 3vw, 32px); color: var(--text-mute); font-weight: 700; animation: blink 1.1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.countdown--compact.fade-up.is-in .countdown__cell {
    animation: countdownCellIn 0.75s var(--ease-spring) backwards;
}
.countdown--compact.fade-up.is-in .countdown__cell:nth-child(1) { animation-delay: 0.12s; }
.countdown--compact.fade-up.is-in .countdown__cell:nth-child(3) { animation-delay: 0.24s; }
.countdown--compact.fade-up.is-in .countdown__cell:nth-child(5) { animation-delay: 0.36s; }
.countdown--compact.fade-up.is-in .countdown__cell:nth-child(7) { animation-delay: 0.48s; }
@keyframes countdownCellIn {
    0% { opacity: 0; transform: translateY(10px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 600px) { .countdown__sep { display: none; } .countdown__cell { flex: 1 1 calc(50% - 8px); } }

/* Progress */
.progress { margin-bottom: 0; max-width: 100%; transform: translateZ(30px); }
.progress__head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 8px; font-weight: 500; }
.progress__head span:last-child { color: var(--text); font-variant-numeric: tabular-nums; }
.progress__track {
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
html[data-theme="light"] .progress__track {
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.06);
}
.progress__fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
    border-radius: 99px;
    transition: width 1.6s var(--ease);
    position: relative;
    box-shadow: 0 0 12px rgba(168,85,247,0.6);
}
.progress__fill::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 60px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); animation: shine 2.2s linear infinite; }
@keyframes shine { from { transform: translateX(-100%); } to { transform: translateX(100px); } }
.progress__steps { display: flex; justify-content: space-between; margin-top: 10px; font-size: 10px; color: var(--text-mute); letter-spacing: 0.05em; flex-wrap: wrap; gap: 4px 8px; }
.step { position: relative; padding-left: 14px; }
.step::before { content: ''; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.15); transform: translateY(-50%); }
.step--done { color: var(--text-soft); }
.step--done::before { background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.step--active { color: var(--text); }
.step--active::before { background: var(--accent-3); box-shadow: 0 0 0 0 var(--accent-3); animation: pulseDot 1.8s infinite; }

/* ===== Buttons ===== */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 22px;
    border-radius: var(--radius);
    font-weight: 600; font-size: 14px;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-position 0.4s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
    position: relative; overflow: hidden; isolation: isolate; white-space: nowrap;
    will-change: transform; cursor: none;
}
.btn--primary {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2) 50%, var(--accent-3));
    background-size: 200% auto; color: #fff;
    box-shadow: 0 10px 30px -10px rgba(168, 85, 247, 0.6), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn--primary:hover {
    background-position: right center;
    box-shadow: 0 18px 40px -10px rgba(168, 85, 247, 0.9), 0 0 50px -10px rgba(236, 72, 153, 0.6), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn--primary:hover svg:last-child { transform: translateX(4px); }
.btn--primary svg { transition: transform 0.3s var(--ease); }
.btn--primary:disabled, .btn--primary[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn--ghost {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: var(--surface-2); border-color: rgba(168,85,247,0.5); }
.btn--ghost:disabled { opacity: 0.4; cursor: not-allowed; }

.btn__shine {
    position: absolute; top: 0; bottom: 0; width: 80px; left: -100px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg); pointer-events: none;
    animation: btnShine 4s var(--ease) infinite;
    z-index: 1;
}
.btn__shine ~ * { position: relative; z-index: 2; }
@keyframes btnShine { 0% { left: -100px; } 60%, 100% { left: 120%; } }

/* Highlights */
.highlights { display: flex; flex-direction: column; gap: 10px; align-self: start; margin-top: 28px; transform-style: preserve-3d; }
.highlight {
    display: flex; gap: 12px; align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
    position: relative; overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
}
.highlight:hover { border-color: var(--border-strong); background: var(--surface-2); }
.highlight__shine {
    position: absolute; inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(168,85,247,0.18), transparent 40%);
    opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none;
}
.highlight:hover .highlight__shine { opacity: 1; }
.highlight__icon {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 10px; display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(168,85,247,0.2));
    border: 1px solid var(--border-strong); color: #fff;
    transform: translateZ(20px);
}
.highlight__text { display: flex; flex-direction: column; gap: 2px; transform: translateZ(15px); }
.highlight__text strong { font-size: 13px; font-weight: 600; color: var(--text); }
.highlight__text span { font-size: 11.5px; color: var(--text-mute); line-height: 1.4; }

/* Live panel */
.livepanel { margin-top: 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-family: 'JetBrains Mono', monospace; font-size: 11px; position: relative; overflow: hidden; }
.livepanel__head { display: flex; align-items: center; gap: 8px; color: var(--text-mute); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px; }
.livepanel__pulse { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: pulseDotG 1.8s infinite; }
@keyframes pulseDotG {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
    70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.livepanel__list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.livepanel__list li { display: flex; justify-content: space-between; color: var(--text-soft); }
.livepanel__list li span:last-child { color: var(--text); }
.livepanel__graph { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.livepanel__graph canvas { width: 100%; height: 40px; display: block; }
@media (max-width: 1080px) { .highlights { flex-direction: row; flex-wrap: wrap; margin-top: 16px; } .highlight, .livepanel { flex: 1 1 220px; } }

/* Scroll hint */
.scroll-hint { position: absolute; bottom: 20px; left: 28px; width: 20px; height: 32px; border: 1px solid var(--border-strong); border-radius: 99px; display: grid; place-items: center; opacity: 0.7; }
.scroll-hint span { width: 2px; height: 8px; background: var(--text-soft); border-radius: 2px; animation: scrollHint 2s var(--ease) infinite; }
@keyframes scrollHint { 0% { transform: translateY(-6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
@media (max-width: 600px) { .scroll-hint { display: none; } }

/* ======================
   MARQUEE
   ====================== */
.marquee {
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    overflow: hidden; background: rgba(0,0,0,0.2);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.marquee__track {
    display: flex; gap: 36px; align-items: center;
    padding: 14px 0; white-space: nowrap;
    animation: marquee 40s linear infinite;
    font-family: 'Syne', sans-serif; font-weight: 600; font-size: clamp(16px, 2.4vw, 26px); letter-spacing: -0.01em;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span:not(.dot) {
    background: linear-gradient(120deg, #fff, var(--text-mute));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    transition: all 0.3s var(--ease); cursor: none;
}
.marquee__track span:not(.dot):hover {
    background: linear-gradient(120deg, var(--accent-2), var(--accent-3));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.marquee__track .dot { color: var(--accent-2); font-size: 0.5em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================
   GENERIC SECTION SHELL
   ============================================ */
.section { padding: var(--section-y) 0; position: relative; }
.section__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; }
.section__inner--narrow { max-width: var(--maxw-narrow); }

.section__head { max-width: 42rem; margin: 0 auto var(--section-head-gap); text-align: center; }
.eyebrow {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--accent-2); margin-bottom: 12px;
    padding: 5px 10px;
    border: 1px solid rgba(168,85,247,0.3);
    border-radius: 99px;
    background: rgba(168,85,247,0.06);
}
.section__title {
    font-family: 'Syne', sans-serif; font-weight: 700;
    font-size: clamp(28px, 4.2vw, 52px); line-height: 1.08; letter-spacing: -0.02em;
    margin-bottom: 14px;
}
.section__lead { font-size: clamp(14px, 1.1vw, 16px); color: var(--text-soft); max-width: 36em; margin: 0 auto; line-height: 1.55; }

/* Reveal / Einblendungen (stärkerer „Wow“-Eindruck) */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}

.fade-up {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.is-in {
    opacity: 1;
    transform: translateY(0);
}

body.is-loaded .nav--maintenance {
    animation: navReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes navReveal {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   SERVICES
   ============================================ */
.services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 780px) { .services { grid-template-columns: 1fr; } }

.service {
    position: relative;
    padding: 24px 22px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--surface), rgba(255,255,255,0.015));
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
    transform-style: preserve-3d;
}
.service::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(800px circle at var(--mx, 50%) var(--my, 0%), rgba(168,85,247,0.12), transparent 40%);
    opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none;
}
.service:hover { border-color: rgba(168,85,247,0.35); }
.service:hover::before { opacity: 1; }

.service__num {
    position: absolute; top: 20px; right: 22px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; letter-spacing: 0.2em;
    color: var(--text-mute);
}
.service__icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(168,85,247,0.18));
    border: 1px solid var(--border-strong);
    color: #fff;
    margin-bottom: 16px;
    transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.service:hover .service__icon {
    transform: rotate(-6deg) scale(1.05);
    background: linear-gradient(135deg, rgba(99,102,241,0.35), rgba(236,72,153,0.35));
}
.service h3 {
    font-family: 'Syne', sans-serif;
    font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
    margin-bottom: 8px;
}
.service p { color: var(--text-soft); margin-bottom: 12px; font-size: 14px; line-height: 1.55; }
.service__points { list-style: none; margin-bottom: 16px; }
.service__points li {
    position: relative; padding-left: 20px;
    color: var(--text-soft); font-size: 13px;
    margin-bottom: 6px;
}
.service__points li::before {
    content: ''; position: absolute; left: 0; top: 9px;
    width: 12px; height: 1px; background: var(--accent-2);
}
.service__cta a {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600;
    color: var(--text);
    padding: 6px 0;
    transition: color 0.3s var(--ease), gap 0.3s var(--ease);
}
.service__cta a span { transition: transform 0.3s var(--ease); }
.service__cta a:hover { color: var(--accent-2); gap: 14px; }
.service__cta a:hover span { transform: translateX(4px); }

/* ============================================
   PROCESS
   ============================================ */
.process {
    position: relative;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.process__line {
    position: absolute; top: 32px; left: 8%; right: 8%;
    height: 4px; opacity: 0.4; pointer-events: none;
}
@media (max-width: 900px) { .process { grid-template-columns: repeat(2, 1fr); } .process__line { display: none; } }
@media (max-width: 480px) { .process { grid-template-columns: 1fr; } }

.process__step {
    text-align: center;
    padding: 0 8px;
    position: relative;
}
.process__num {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    display: grid; place-items: center;
    font-family: 'Syne', sans-serif; font-weight: 700; font-size: 18px;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2), var(--accent-3));
    box-shadow: 0 12px 30px -10px rgba(168, 85, 247, 0.6), inset 0 1px 0 rgba(255,255,255,0.2);
    position: relative;
    z-index: 2;
    transition: transform 0.4s var(--ease);
}
.process__num::before {
    content: ''; position: absolute; inset: -8px;
    border-radius: 50%; border: 1px solid rgba(168,85,247,0.4);
    animation: ringPulse 3s var(--ease) infinite;
}
@keyframes ringPulse {
    0% { transform: scale(0.95); opacity: 0.6; }
    100% { transform: scale(1.3); opacity: 0; }
}
.process__step:hover .process__num { transform: scale(1.08); }
.process__step h4 {
    font-family: 'Syne', sans-serif;
    font-size: 17px; font-weight: 700;
    margin-bottom: 6px;
}
.process__step p { font-size: 13px; color: var(--text-soft); line-height: 1.55; }

/* ============================================
   BENEFITS
   ============================================ */
.benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 980px) { .benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .benefits { grid-template-columns: 1fr; } }

.benefit {
    padding: 20px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
    position: relative;
    overflow: hidden;
}
.benefit::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at top right, rgba(168,85,247,0.15), transparent 60%);
    opacity: 0; transition: opacity 0.4s var(--ease);
}
.benefit:hover { transform: translateY(-4px); border-color: rgba(168,85,247,0.35); }
.benefit:hover::after { opacity: 1; }
.benefit__icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(168,85,247,0.2));
    border: 1px solid var(--border-strong);
    margin-bottom: 12px; color: var(--text);
}
.benefit h4 {
    font-family: 'Syne', sans-serif;
    font-size: 15px; font-weight: 600; margin-bottom: 6px;
}
.benefit p { font-size: 13px; color: var(--text-soft); line-height: 1.55; }

/* ============================================
   FAQ
   ============================================ */
.faq { display: flex; flex-direction: column; gap: 8px; }
.faq__item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.faq__item:hover { border-color: var(--border-strong); }
.faq__item[open] { border-color: rgba(168,85,247,0.35); background: var(--surface-2); }
.faq__item summary {
    padding: 16px 20px;
    list-style: none;
    cursor: none;
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 600;
    user-select: none;
    transition: color 0.3s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: ''; flex-shrink: 0; margin-left: 16px;
    width: 22px; height: 22px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' stroke='%23a855f7' stroke-width='2' stroke-linecap='round'/></svg>");
    background-size: contain; background-repeat: no-repeat;
    transition: transform 0.4s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__body { padding: 0 20px 16px; color: var(--text-soft); font-size: 14px; line-height: 1.65; }

/* ============================================
   CONTACT WIZARD
   ============================================ */
.wizard {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--surface-2), rgba(255,255,255,0.015));
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6),
                0 0 80px -20px rgba(168,85,247,0.2);
    position: relative;
}
.wizard::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at top, rgba(168,85,247,0.10), transparent 60%);
}

.wizard__progress {
    height: 3px; width: 100%;
    background: rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}
.wizard__progress-fill {
    height: 100%; width: 20%;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
    transition: width 0.6s var(--ease);
    box-shadow: 0 0 12px var(--accent-2);
    position: relative;
}
.wizard__progress-fill::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 40px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: shine 2s linear infinite;
}

.wizard__steps-meta {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--text-mute);
}
.wizard__step-name { color: var(--text); }

.wizard__form { padding: 28px 24px 24px; position: relative; min-height: 360px; }
@media (max-width: 600px) { .wizard__form { padding: 22px 18px 20px; } .wizard__steps-meta { padding: 10px 18px; } }

.wizard__step {
    border: none; padding: 0; margin: 0;
    display: none;
    animation: stepIn 0.5s var(--ease) forwards;
}
.wizard__step.is-active { display: block; }
@keyframes stepIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
.wizard__step.is-leaving { animation: stepOut 0.3s var(--ease) forwards; }
@keyframes stepOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-20px); }
}

.wizard__legend {
    font-family: 'Syne', sans-serif;
    font-size: 22px; font-weight: 700; line-height: 1.12; letter-spacing: -0.01em;
    margin-bottom: 6px;
}
.wizard__sub { color: var(--text-soft); margin-bottom: 20px; font-size: 14px; line-height: 1.5; }

/* ===== Choice grid (radio cards) ===== */
.choice-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (max-width: 540px) { .choice-grid { grid-template-columns: 1fr; } }

.choice { display: block; cursor: none; position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__inner {
    padding: 16px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
    height: 100%;
}
.choice__inner::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at top, rgba(168,85,247,0.15), transparent 60%);
    opacity: 0; transition: opacity 0.3s var(--ease);
}
.choice:hover .choice__inner {
    border-color: var(--border-strong);
    background: var(--surface-2);
    transform: translateY(-2px);
}
.choice:hover .choice__inner::before { opacity: 1; }
.choice input:checked ~ .choice__inner {
    border-color: var(--accent-2);
    background: linear-gradient(135deg, rgba(168,85,247,0.12), rgba(99,102,241,0.06));
    box-shadow: 0 0 0 3px rgba(168,85,247,0.15), 0 12px 28px -10px rgba(168,85,247,0.4);
}
.choice input:checked ~ .choice__inner::after {
    content: ''; position: absolute; top: 16px; right: 16px;
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
    box-shadow: 0 0 12px var(--accent-2);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5L20 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-size: 70%; background-position: center; background-repeat: no-repeat;
}
.choice__icon {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(168,85,247,0.2));
    border: 1px solid var(--border-strong);
    color: #fff;
    margin-bottom: 10px;
}
.choice__inner strong { display: block; font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.choice__inner span { display: block; font-size: 12px; color: var(--text-soft); line-height: 1.4; }
.choice--wide { grid-column: 1 / -1; }
.choice__badge {
    position: absolute; top: 16px; right: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.2em;
    padding: 4px 10px; border-radius: 99px;
    background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
    color: #fff;
    z-index: 1;
}
.choice input:checked ~ .choice__inner .choice__badge { display: none; }

/* ===== Field grid (modern inputs) ===== */
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 540px) { .field-grid { grid-template-columns: 1fr; } }

.field { position: relative; }
.field--full { grid-column: 1 / -1; }
.field input, .field textarea, .field select {
    width: 100%;
    padding: 15px 16px 12px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px; font-family: inherit;
    cursor: none;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
    appearance: none; -webkit-appearance: none;
}
.field textarea { padding-top: 18px; resize: vertical; min-height: 100px; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: rgba(168,85,247,0.7);
    background: rgba(168,85,247,0.06);
    box-shadow: 0 0 0 3px rgba(168,85,247,0.15);
}
.field label {
    position: absolute; left: 16px; top: 15px;
    color: var(--text-mute); font-size: 14px;
    pointer-events: none;
    transition: all 0.25s var(--ease);
    background: linear-gradient(180deg, var(--bg-2), var(--bg-2)); padding: 0 6px;
    border-radius: 4px;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
    top: -8px; font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent-2);
}
.field select { color: var(--text); padding-right: 40px; }
.field select:invalid { color: var(--text-mute); }
.field select option { background: var(--bg-2); color: var(--text); }
.field__chev { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--text-mute); pointer-events: none; font-size: 18px; }
.field__label { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 12px; }
.field--error input, .field--error textarea, .field--error select { border-color: var(--error); box-shadow: 0 0 0 3px rgba(248,113,113,0.15); }

/* Pill row */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-block; cursor: none; position: relative; }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill span {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid var(--border-strong);
    border-radius: 99px;
    background: var(--surface);
    color: var(--text-soft);
    font-size: 13px; font-weight: 500;
    transition: all 0.25s var(--ease);
}
.pill:hover span { border-color: rgba(168,85,247,0.5); color: var(--text); transform: translateY(-1px); }
.pill input:checked ~ span {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(168,85,247,0.6);
}

/* Custom Checkbox */
.check {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 0;
    cursor: none;
    font-size: 14px; color: var(--text-soft); line-height: 1.5;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border: 1.5px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    display: grid; place-items: center;
    transition: all 0.25s var(--ease);
    margin-top: 1px;
}
.check__box::after {
    content: ''; width: 12px; height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5L20 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-size: contain; background-repeat: no-repeat;
    transform: scale(0); transition: transform 0.25s var(--ease-spring);
}
.check input:checked ~ .check__box {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(168,85,247,0.15);
}
.check input:checked ~ .check__box::after { transform: scale(1); }
.check__text a { color: var(--accent-2); }
.check__text a:hover { text-decoration: underline; }

/* Summary */
.summary {
    margin-bottom: 22px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(0,0,0,0.25);
    font-size: 14px;
}
.summary__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.summary__row:last-child { border-bottom: none; }
.summary__row dt { color: var(--text-mute); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.summary__row dd { color: var(--text); text-align: right; }
.summary__row dd.is-empty { color: var(--text-mute); font-style: italic; }

/* Wizard controls */
.wizard__controls {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    gap: 12px;
}
.wizard__controls .btn { padding: 12px 18px; font-size: 13px; }

.wizard__alt {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-mute);
}
.wizard__alt a {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-soft); transition: color 0.3s var(--ease);
}
.wizard__alt a:hover { color: var(--accent-2); }
@media (max-width: 600px) { .wizard__alt { padding: 12px 18px; } }

/* Success state */
.wizard__success { display: none; text-align: center; padding: 20px 0; }
.wizard__success.is-active { display: block; animation: stepIn 0.6s var(--ease) forwards; }
.wizard__success-icon { display: flex; justify-content: center; margin-bottom: 24px; }
.wizard__success h3 {
    font-family: 'Syne', sans-serif;
    font-size: 22px; font-weight: 700; margin-bottom: 10px;
    background: linear-gradient(120deg, #fff, var(--accent-2), var(--accent-3));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.wizard__success p { color: var(--text-soft); max-width: 460px; margin: 0 auto 24px; }
.success-circle { animation: drawCircle 0.8s var(--ease) forwards; }
.success-check { animation: drawCheck 0.5s var(--ease) 0.7s forwards; }
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* ============================================
   FOOTER
   ============================================ */
.footer { border-top: 1px solid var(--border); margin-top: var(--section-y); padding: 40px 28px 24px; max-width: var(--maxw); margin-left: auto; margin-right: auto; color: var(--text-mute); font-size: 12px; }
.footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}
@media (max-width: 780px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__inner { grid-template-columns: 1fr; } }
.footer__brand img { width: 108px; margin-bottom: 10px; }
.footer__brand p { color: var(--text-soft); max-width: 320px; }
.footer__col h5 {
    font-family: 'Syne', sans-serif;
    font-size: 13px; font-weight: 600;
    color: var(--text);
    margin-bottom: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.footer__col a { display: block; color: var(--text-soft); margin-bottom: 8px; transition: color 0.3s var(--ease); }
.footer__col a:hover { color: var(--accent-2); }

.footer__row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer__links { display: flex; gap: 24px; }
.footer__links a { position: relative; transition: color 0.3s var(--ease); }
.footer__links a:hover { color: var(--text); }
.footer__links a::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: var(--accent-2); transition: width 0.3s var(--ease); }
.footer__links a:hover::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ============================================
   WARTUNGSSEITE · Teaser · Kontakt · Footer
   ============================================ */
.section--teaser { padding-top: 0; padding-bottom: 0; }
.teaser__label {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 14px;
}
.teaser-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
}
.teaser-tags li {
    padding: 7px 14px;
    border-radius: 99px;
    border: 1px solid var(--border);
    background: var(--surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-soft);
    transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.teaser-tags li:hover {
    border-color: rgba(139, 92, 246, 0.35);
    color: var(--text);
}
.teaser-tags.reveal.is-in li {
    animation: teaserTagPop 0.58s var(--ease-spring) backwards;
}
.teaser-tags.reveal.is-in li:nth-child(1) { animation-delay: 0.06s; }
.teaser-tags.reveal.is-in li:nth-child(2) { animation-delay: 0.14s; }
.teaser-tags.reveal.is-in li:nth-child(3) { animation-delay: 0.22s; }
.teaser-tags.reveal.is-in li:nth-child(4) { animation-delay: 0.3s; }
@keyframes teaserTagPop {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
.teaser__label.reveal.is-in {
    animation: labelSlide 0.7s var(--ease-spring) both;
}
@keyframes labelSlide {
    from { opacity: 0; letter-spacing: 0.35em; transform: translateY(12px); }
    to { opacity: 1; letter-spacing: 0.2em; transform: translateY(0); }
}

.section--contact-strip { padding-top: 8px; }
.section__inner--wizard {
    max-width: min(720px, 94vw);
    margin-left: auto;
    margin-right: auto;
}
.contact-head {
    text-align: center;
    margin-bottom: clamp(22px, 4vw, 34px);
}
.contact-head__eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-2);
    margin-bottom: 10px;
}
.contact-head__title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    line-height: 1.15;
}
.contact-head__lead {
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.55;
    max-width: 42em;
    margin: 0 auto;
}
.contact-form {
    margin-top: 18px;
    text-align: left;
}
.contact-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.contact-form__actions {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.contact-form__status {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-mute);
    text-align: center;
    min-height: 1.3em;
}
@media (max-width: 640px) {
    .contact-form__grid { grid-template-columns: 1fr; }
}

.contact-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    background: linear-gradient(155deg, var(--surface-2), var(--surface));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--shadow-lg);
    padding: clamp(22px, 4vw, 34px);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.contact-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(139, 92, 246, 0.12), transparent 55%);
    pointer-events: none;
}
.contact-card > * { position: relative; z-index: 1; }
.contact-card__title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(20px, 2.8vw, 26px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.contact-card__text {
    color: var(--text-soft);
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.55;
    max-width: 28em;
    margin-left: auto;
    margin-right: auto;
}
.contact-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}
.contact-card__legal {
    font-size: 13px;
    color: var(--text-mute);
    margin-top: 18px;
}
.contact-card__legal a {
    color: var(--text-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s var(--ease);
}
.contact-card__legal a:hover { color: var(--accent-2); }
.contact-card__legal span { margin: 0 6px; opacity: 0.5; }

/* ======================================================
   PREMIUM CONTACT CARD (split, conic border, chips)
   ====================================================== */
.section__inner--contact {
    max-width: min(1040px, 96vw);
    margin: 0 auto;
    padding: 0 24px;
}

.ccard {
    position: relative;
    border-radius: 28px;
    background: linear-gradient(155deg, var(--surface-2), var(--surface));
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    box-shadow: 0 40px 100px -32px rgba(0,0,0,0.55), 0 0 80px -28px rgba(168,85,247,0.28);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: 0;
}
@media (max-width: 860px) {
    .ccard { grid-template-columns: 1fr; }
}

/* animated conic border */
.ccard__border {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 0deg,
        rgba(99,102,241,0.0) 0deg,
        rgba(99,102,241,0.55) 60deg,
        rgba(168,85,247,0.55) 140deg,
        rgba(236,72,153,0.55) 220deg,
        rgba(99,102,241,0.0) 320deg,
        rgba(99,102,241,0.0) 360deg);
    -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ccardSpin 9s linear infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes ccardSpin {
    to { transform: rotate(360deg); }
}
.ccard > *:not(.ccard__border) { position: relative; z-index: 1; }

/* SIDE PANEL */
.ccard__side {
    padding: clamp(28px, 4vw, 40px);
    border-right: 1px solid var(--border);
    background: radial-gradient(circle at 0% 0%, rgba(168,85,247,0.10), transparent 55%),
                linear-gradient(180deg, rgba(99,102,241,0.05), transparent 60%);
    display: flex; flex-direction: column;
    gap: 14px;
}
@media (max-width: 860px) {
    .ccard__side { border-right: 0; border-bottom: 1px solid var(--border); }
}

.ccard__avatar {
    position: relative;
    width: 72px; height: 72px;
    margin-bottom: 6px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2) 50%, var(--accent-3));
    color: #fff;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.04em;
    box-shadow: 0 12px 30px -10px rgba(168, 85, 247, 0.6), inset 0 1px 0 rgba(255,255,255,0.2);
}
.ccard__avatarRing {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(168, 85, 247, 0.3);
    animation: avatarPulse 2.4s ease-in-out infinite;
}
@keyframes avatarPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 0.2; }
}
.ccard__avatarStatus {
    position: absolute;
    right: 2px; bottom: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid var(--bg-2, #0c0c18);
    box-shadow: 0 0 10px var(--success);
}

.ccard__eyebrow {
    font-size: 11px; letter-spacing: 0.22em;
    color: var(--accent-2);
    text-transform: uppercase;
}
.ccard__title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(24px, 3.4vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.ccard__lead {
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.6;
}

.ccard__channels {
    list-style: none;
    margin-top: 6px;
    display: flex; flex-direction: column;
    gap: 8px;
}
.ccard__channel {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.ccard__channel:hover {
    border-color: rgba(168, 85, 247, 0.45);
    background: var(--surface-2);
    transform: translateY(-1px);
}
.ccard__channelIcon {
    width: 34px; height: 34px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(168,85,247,0.18));
    border: 1px solid var(--border-strong);
    color: #fff;
}
.ccard__channelText { display: flex; flex-direction: column; gap: 2px; }
.ccard__channelText strong { font-size: 13px; font-weight: 600; color: var(--text); }
.ccard__channelText em { font-size: 11px; font-style: normal; color: var(--text-mute); letter-spacing: 0.04em; }

.ccard__avail {
    margin-top: auto;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px dashed rgba(74, 222, 128, 0.4);
    background: rgba(74, 222, 128, 0.06);
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--text-soft);
}
.ccard__avail strong { color: var(--success); font-weight: 600; }
.ccard__availDot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 10px var(--success);
    animation: pulseDot 1.6s infinite;
}

/* FORM SIDE */
.ccard__form {
    padding: clamp(28px, 4vw, 40px);
    display: flex; flex-direction: column; gap: 18px;
}

.ccard__chips {
    border: 0; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: center;
}
.ccard__chipsLabel {
    font-size: 11px; letter-spacing: 0.18em;
    color: var(--text-mute);
    text-transform: uppercase;
    margin-right: 8px;
    padding: 0;
}
.chip { position: relative; cursor: none; }
.chip input {
    position: absolute; opacity: 0;
    width: 0; height: 0;
}
.chip span {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 99px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    font-size: 12px; font-weight: 500;
    transition: all 0.25s var(--ease);
}
.chip:hover span { border-color: rgba(168, 85, 247, 0.45); color: var(--text); }
.chip input:checked ~ span {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(168, 85, 247, 0.6);
}

.ccard__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
}
@media (max-width: 540px) { .ccard__grid { grid-template-columns: 1fr; } }

/* Modern icon-prefixed input fields */
.ifield {
    position: relative;
    border-bottom: 1px solid var(--border-strong);
    transition: border-color 0.3s var(--ease);
}
.ifield--full { grid-column: 1 / -1; }
.ifield__icon {
    position: absolute;
    left: 0; top: 22px;
    color: var(--text-mute);
    transition: color 0.3s var(--ease);
    pointer-events: none;
}
.ifield input,
.ifield textarea {
    width: 100%;
    padding: 22px 0 10px 28px;
    background: transparent;
    border: 0; outline: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 14.5px;
    cursor: none;
}
.ifield textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.ifield label {
    position: absolute;
    left: 28px; top: 22px;
    color: var(--text-mute);
    font-size: 14px;
    pointer-events: none;
    transition: all 0.25s var(--ease);
}
.ifield input:focus + label,
.ifield input:not(:placeholder-shown) + label,
.ifield textarea:focus + label,
.ifield textarea:not(:placeholder-shown) + label {
    top: 2px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-2);
    left: 0;
}
.ifield input:focus ~ .ifield__icon,
.ifield textarea:focus ~ .ifield__icon {
    color: var(--accent-2);
}
.ifield__line {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
}
.ifield:focus-within .ifield__line { transform: scaleX(1); }

.ifield--area .ifield__icon { top: 22px; }
.ifield__count {
    position: absolute;
    right: 0; bottom: -22px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-mute);
    letter-spacing: 0.06em;
    transition: color 0.2s var(--ease);
}
.ifield__count.is-warn { color: var(--accent-3); }

.check--compact { padding: 4px 0 0; font-size: 13px; }

/* Premium send button with morph */
.ccard__actions {
    display: flex; flex-direction: column;
    align-items: center; gap: 10px;
    margin-top: 8px;
}
.sendbtn {
    position: relative;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 26px;
    border: 0;
    border-radius: 99px;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2) 50%, var(--accent-3));
    background-size: 220% auto;
    color: #fff;
    font-weight: 600; font-size: 14px;
    cursor: none;
    box-shadow: 0 14px 36px -10px rgba(168,85,247,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
    transition: background-position 0.5s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    overflow: hidden;
    isolation: isolate;
}
.sendbtn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: translateX(-120%);
    transition: transform 0.7s var(--ease);
    z-index: 0;
}
.sendbtn:hover {
    background-position: right center;
    transform: translateY(-1px);
    box-shadow: 0 22px 44px -12px rgba(236, 72, 153, 0.55);
}
.sendbtn:hover::before { transform: translateX(120%); }
.sendbtn:active { transform: translateY(0); }

.sendbtn__text { position: relative; z-index: 1; }
.sendbtn__icon {
    position: relative;
    width: 18px; height: 18px;
    z-index: 1;
}
.sendbtn__plane,
.sendbtn__check {
    position: absolute; inset: 0;
    transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}
.sendbtn__plane { opacity: 1; transform: translate(0, 0) rotate(0); }
.sendbtn__check { opacity: 0; transform: scale(0.6); }

.sendbtn.is-sending .sendbtn__plane {
    animation: planeFly 0.9s var(--ease) forwards;
}
@keyframes planeFly {
    to { transform: translate(28px, -22px) rotate(20deg); opacity: 0; }
}
.sendbtn.is-sending { pointer-events: none; }

.sendbtn.is-sent {
    background: linear-gradient(135deg, #22c55e, #4ade80);
    pointer-events: none;
}
.sendbtn.is-sent .sendbtn__plane { opacity: 0; }
.sendbtn.is-sent .sendbtn__check {
    opacity: 1;
    animation: checkPop 0.45s var(--ease-spring) both;
}
.sendbtn.is-sent .sendbtn__text::before { content: 'Gesendet'; }
.sendbtn.is-sent .sendbtn__text { font-size: 0; }
.sendbtn.is-sent .sendbtn__text::before { font-size: 14px; }
@keyframes checkPop {
    0%   { opacity: 0; transform: scale(0.4) rotate(-30deg); }
    60%  { opacity: 1; transform: scale(1.15) rotate(0); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

.ccard__status {
    margin: 0;
    font-size: 12px; color: var(--text-mute);
    text-align: center;
    min-height: 1.3em;
}

.ccard__legal {
    text-align: center;
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--text-mute);
}
.ccard__legal a { color: var(--text-soft); transition: color 0.2s var(--ease); }
.ccard__legal a:hover { color: var(--accent-2); }
.ccard__legal span { margin: 0 6px; opacity: 0.5; }

/* ======================================================
   HERO · MEGA / WOW
   ====================================================== */
.hero--mega {
    min-height: calc(100vh - 60px);
    padding-top: clamp(96px, 12vh, 140px);
    padding-bottom: clamp(40px, 6vh, 80px);
    display: flex;
    align-items: center;
    overflow: visible;
    max-width: none;
}
.hero--mega .hero__parallax {
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

/* Orbit canvas */
.hero__orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(960px, 110vw);
    aspect-ratio: 1;
    transform: translate(-50%, -52%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.95;
    mask-image: radial-gradient(circle at center, #000 35%, rgba(0,0,0,0.7) 60%, transparent 88%);
    -webkit-mask-image: radial-gradient(circle at center, #000 35%, rgba(0,0,0,0.7) 60%, transparent 88%);
}
@media (max-width: 720px) {
    .hero__orbit { width: 130vw; }
}
html[data-theme="light"] .hero__orbit { opacity: 0.45; mix-blend-mode: multiply; }

/* Live badge */
.badge--live {
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(168,85,247,0.18));
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: 0 0 0 1px rgba(168,85,247,0.05), 0 12px 30px -12px rgba(168,85,247,0.4);
}
.badge--live .mono { font-size: 11px; letter-spacing: 0.18em; }

/* Mega title */
.hero__title--mega {
    font-size: clamp(54px, 11vw, 132px);
    line-height: 0.92;
    letter-spacing: -0.045em;
    margin-bottom: 26px;
}
.hero__title--mega .line { padding: 0.04em 0; }

.holo {
    background: linear-gradient(120deg,
        #ffffff 0%,
        #c7b6ff 18%,
        #6366f1 36%,
        #a855f7 52%,
        #ec4899 68%,
        #ffd2ec 82%,
        #ffffff 100%);
    background-size: 240% auto;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: holoShift 7s ease-in-out infinite;
    filter: drop-shadow(0 0 24px rgba(168, 85, 247, 0.32));
}
@keyframes holoShift {
    0%   { background-position: 0% center; }
    50%  { background-position: 240% center; }
    100% { background-position: 0% center; }
}
html[data-theme="light"] .holo {
    background: linear-gradient(120deg, #1a1530 0%, #4f46e5 28%, #7c3aed 52%, #db2777 76%, #1a1530 100%);
    background-size: 240% auto;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    filter: none;
}

.hero--mega .hero__lead {
    font-size: clamp(15px, 1.3vw, 18px);
    max-width: 38em;
}

.countdown--mega { max-width: 520px; margin-bottom: 22px; }
.countdown--mega .countdown__cell { padding: 14px 10px; }
.countdown--mega .countdown__value { font-size: clamp(28px, 3.6vw, 40px); }

/* Notify form */
.notify {
    width: min(560px, 100%);
    margin: 8px auto 18px;
    transform: translateZ(40px);
}
.notify__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 6px 6px 6px 46px;
    border: 1px solid var(--border-strong);
    border-radius: 99px;
    background: linear-gradient(135deg, var(--surface-2), var(--surface));
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 40px -18px rgba(168, 85, 247, 0.45), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.notify__field:focus-within {
    border-color: rgba(168,85,247,0.7);
    box-shadow: 0 18px 50px -16px rgba(168,85,247,0.65), 0 0 0 4px rgba(168,85,247,0.18);
}
.notify__icon {
    position: absolute;
    left: 18px; top: 50%; transform: translateY(-50%);
    color: var(--text-mute);
    pointer-events: none;
}
.notify input[type="email"] {
    flex: 1; min-width: 0;
    padding: 14px 12px;
    background: transparent;
    border: 0; outline: 0;
    color: var(--text);
    font-family: inherit; font-size: 15px;
    cursor: none;
}
.notify input[type="email"]::placeholder { color: var(--text-mute); }
.notify__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 18px;
    border-radius: 99px;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2) 50%, var(--accent-3));
    background-size: 200% auto;
    color: #fff;
    font-weight: 600; font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 10px 24px -10px rgba(168, 85, 247, 0.7), inset 0 1px 0 rgba(255,255,255,0.2);
    cursor: none;
    transition: background-position 0.4s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.notify__btn:hover {
    background-position: right center;
    box-shadow: 0 16px 36px -12px rgba(236, 72, 153, 0.7), 0 0 50px -8px rgba(168,85,247,0.55);
}
.notify__btn svg { transition: transform 0.3s var(--ease); }
.notify__btn:hover svg { transform: translateX(3px); }
.notify__hint {
    margin-top: 12px;
    text-align: center;
    font-size: 12px; color: var(--text-mute);
    letter-spacing: 0.02em;
}
.notify.is-success .notify__field {
    border-color: rgba(74, 222, 128, 0.6);
    box-shadow: 0 18px 50px -16px rgba(74, 222, 128, 0.45), 0 0 0 4px rgba(74,222,128,0.15);
}
.notify.is-success .notify__hint { color: var(--success); }
.notify.is-invalid .notify__field {
    border-color: rgba(248, 113, 113, 0.7);
    animation: shakeX 0.4s var(--ease);
}
.notify.is-invalid .notify__hint { color: var(--error); }
@keyframes shakeX {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
@media (max-width: 600px) {
    .notify__field { flex-direction: column; padding: 10px; gap: 8px; border-radius: 22px; }
    .notify__icon { display: none; }
    .notify input[type="email"] { width: 100%; padding: 14px 16px; text-align: center; }
    .notify__btn { width: 100%; justify-content: center; }
}

.hero__cta--secondary {
    justify-content: center;
    gap: 22px;
    margin-bottom: 0;
}
.link-arrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 4px;
    color: var(--text-soft);
    font-size: 13px; font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.link-arrow:hover {
    color: var(--text);
    border-bottom-color: rgba(168,85,247,0.55);
    gap: 12px;
}
.link-arrow svg { color: var(--accent-2); }

/* ======================================================
   RELAUNCH COCKPIT
   ====================================================== */
.section--cockpit { padding-top: 0; padding-bottom: 0; }
.section__inner--mid { max-width: min(900px, 94vw); margin: 0 auto; padding: 0 24px; }

.cockpit {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 30px 80px -28px rgba(0,0,0,0.55), 0 0 80px -28px rgba(168,85,247,0.32);
    overflow: hidden;
    position: relative;
}
.cockpit::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 40% at 100% 0%, rgba(236,72,153,0.14), transparent 60%),
                radial-gradient(ellipse 50% 35% at 0% 100%, rgba(99,102,241,0.16), transparent 60%);
    pointer-events: none;
}
.cockpit > * { position: relative; z-index: 1; }

.cockpit__head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border);
}
.cockpit__eyebrow {
    font-size: 11px; letter-spacing: 0.22em; color: var(--text-mute);
    text-transform: uppercase;
}
.cockpit__live {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--accent-2);
    font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase;
}
.cockpit__livedot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 12px var(--accent-2);
    animation: pulseDot 1.4s infinite;
}

.cockpit__body {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: clamp(20px, 4vw, 36px);
    padding: clamp(22px, 3.5vw, 32px);
    align-items: center;
}
@media (max-width: 720px) {
    .cockpit__body { grid-template-columns: 1fr; gap: 24px; }
}

.cockpit__ring {
    position: relative;
    width: 220px; height: 220px;
    margin: 0 auto;
}
.ring-svg { width: 100%; height: 100%; transform: rotate(0); }
.cockpit__ringText {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    pointer-events: none;
}
.cockpit__pct {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 56px;
    line-height: 1;
    background: linear-gradient(120deg, #fff, var(--accent-2), var(--accent-3));
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: holoShift 6s ease-in-out infinite;
    font-variant-numeric: tabular-nums;
}
.cockpit__pct i { font-size: 22px; font-style: normal; margin-left: 2px; opacity: 0.75; }
.cockpit__caption {
    margin-top: 4px;
    font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--text-mute);
}
.cockpit__sub {
    margin-top: 6px;
    font-size: 11px; color: var(--text-soft);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
}

.cockpit__modules {
    list-style: none;
    display: flex; flex-direction: column;
    gap: 8px;
}
.cmod {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 80px 86px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cmod.is-in { opacity: 1; transform: translateY(0); }
.cmod:hover { border-color: var(--border-strong); background: var(--surface-2); }
@media (max-width: 480px) {
    .cmod { grid-template-columns: 24px 1fr 70px; }
    .cmod__bar { display: none; }
}

.cmod__icon {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(99,102,241,0.16), rgba(168,85,247,0.16));
    border: 1px solid var(--border-strong);
    color: var(--text);
}
.cmod__name { font-size: 14px; font-weight: 500; }
.cmod__bar {
    height: 4px;
    border-radius: 99px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
    position: relative;
}
.cmod__bar i {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
    border-radius: 99px;
    transition: width 0.9s var(--ease);
}
.cmod__pill {
    justify-self: end;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 99px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase;
}
.cmod__pill::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.cmod[data-status="done"] .cmod__pill {
    color: var(--success);
    background: rgba(74,222,128,0.12);
    border: 1px solid rgba(74,222,128,0.3);
}
.cmod[data-status="done"] .cmod__pill::after { content: 'Fertig'; }
.cmod[data-status="done"].is-in .cmod__bar i { width: 100%; }

.cmod[data-status="building"] .cmod__pill {
    color: var(--accent-3);
    background: rgba(232,121,169,0.14);
    border: 1px solid rgba(232,121,169,0.32);
}
.cmod[data-status="building"] .cmod__pill::after { content: 'Build'; }
.cmod[data-status="building"].is-in .cmod__bar i {
    width: 62%;
    background: linear-gradient(90deg, var(--accent-2), var(--accent-3), var(--accent-2));
    background-size: 200% auto;
    animation: barShimmer 1.6s linear infinite, barFill 0.9s var(--ease);
}
@keyframes barShimmer { to { background-position: 200% 0; } }
@keyframes barFill { from { width: 0; } to { width: 62%; } }
.cmod[data-status="building"] {
    border-color: rgba(232,121,169,0.35);
    box-shadow: 0 0 0 1px rgba(232,121,169,0.05), 0 12px 30px -16px rgba(232,121,169,0.4);
}

.cmod[data-status="queued"] .cmod__pill {
    color: var(--text-mute);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
}
.cmod[data-status="queued"] .cmod__pill::after { content: 'Queued'; }

.cockpit__foot {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--border);
}
.metric {
    padding: 14px 16px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.metric:last-child { border-right: 0; }
.metric__value {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2.4vw, 26px);
    background: linear-gradient(120deg, #fff, #c7b6ff, var(--accent-2), var(--accent-3));
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    animation: holoShift 6s ease-in-out infinite;
}
.metric__label {
    margin-top: 4px;
    font-size: 10px; letter-spacing: 0.18em;
    color: rgba(244,244,248,0.55);
    text-transform: uppercase;
}
@media (max-width: 600px) {
    .console__foot { grid-template-columns: 1fr 1fr; }
    .metric:nth-child(2) { border-right: 0; }
    .metric:nth-child(1), .metric:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.06); }
}

/* ======================================================
   MARQUEE STRIP
   ====================================================== */
.marquee {
    margin: clamp(28px, 5vw, 44px) 0 0;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, transparent, rgba(168,85,247,0.06), transparent);
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
    display: inline-flex;
    gap: 28px;
    align-items: center;
    white-space: nowrap;
    font-family: 'Syne', sans-serif;
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
    animation: marqueeRoll 32s linear infinite;
    will-change: transform;
}
.marquee__track > span:nth-child(odd) {
    background: linear-gradient(120deg, #fff, var(--accent-2), var(--accent-3));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.marquee__dot {
    color: var(--accent-2);
    font-size: 0.6em;
    transform: translateY(-2px);
}
@keyframes marqueeRoll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
}

.footer--minimal {
    margin-top: 0;
    padding: 22px 28px 36px;
    border-top: 1px solid var(--border);
    max-width: none;
}
.footer__row--solo {
    max-width: var(--maxw);
    margin: 0 auto;
    width: 100%;
}

.nav--legal {
    justify-content: space-between;
    gap: 16px;
}
.nav--legal .nav__tools {
    margin-left: auto;
}

/* ======================
   LEGAL PAGES
   ====================== */
.page { max-width: 760px; margin: 0 auto; padding: 100px 28px 72px; position: relative; z-index: 2; }
.page h1 { font-family: 'Syne', sans-serif; font-size: clamp(28px, 4vw, 42px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 20px; }
.page h2 { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 600; margin-top: 28px; margin-bottom: 10px; color: var(--text); }
.page p, .page li { color: var(--text-soft); margin-bottom: 12px; line-height: 1.7; }
.page ul { padding-left: 22px; margin-bottom: 14px; }
.page a { color: var(--accent-2); }
.page a:hover { text-decoration: underline; }
.page__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--text-mute); font-size: 14px; transition: color 0.3s var(--ease); }
.page__back:hover { color: var(--accent-2); }

/* ======================================================
   LIGHT-MODE FIXES (Cockpit / Cards / Marquee / Headlines)
   ====================================================== */
html[data-theme="light"] .cockpit {
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.7));
    box-shadow: 0 30px 80px -28px rgba(15,23,42,0.18), 0 0 80px -28px rgba(168,85,247,0.18);
}
html[data-theme="light"] .cockpit__pct,
html[data-theme="light"] .metric__value,
html[data-theme="light"] .marquee__track > span:nth-child(odd),
html[data-theme="light"] .wizard__success h3,
html[data-theme="light"] .stat__value,
html[data-theme="light"] .countdown__value {
    background: linear-gradient(120deg, #1a1530, var(--accent-1) 35%, var(--accent-2) 65%, var(--accent-3));
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
html[data-theme="light"] .cmod {
    background: rgba(255,255,255,0.78);
    border-color: var(--border);
}
html[data-theme="light"] .cmod__bar {
    background: rgba(15,23,42,0.08);
}
html[data-theme="light"] .cmod__icon {
    color: var(--accent-2);
    background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(168,85,247,0.10));
    border-color: var(--border-strong);
}
html[data-theme="light"] .cockpit__foot,
html[data-theme="light"] .metric { border-color: var(--border); }
html[data-theme="light"] .ring-svg circle:first-of-type { stroke: rgba(15,23,42,0.10); }
html[data-theme="light"] .cockpit__sub { color: var(--text-mute); }
html[data-theme="light"] .cockpit__caption { color: var(--text-mute); }

html[data-theme="light"] .ccard {
    background: linear-gradient(155deg, rgba(255,255,255,0.95), rgba(255,255,255,0.78));
    box-shadow: 0 40px 100px -32px rgba(15,23,42,0.18), 0 0 80px -28px rgba(168,85,247,0.18);
}
html[data-theme="light"] .ccard__avatarStatus {
    border-color: rgba(255,255,255,0.95);
}
html[data-theme="light"] .ccard__avail {
    background: rgba(74,222,128,0.10);
}
html[data-theme="light"] .ifield input,
html[data-theme="light"] .ifield textarea { color: var(--text); }
html[data-theme="light"] .console__pre { color: var(--text); }
html[data-theme="light"] .notify__field {
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.7));
}

html[data-theme="light"] .marquee {
    background: linear-gradient(90deg, transparent, rgba(168,85,247,0.10), transparent);
}

html[data-theme="light"] .badge--live {
    background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(168,85,247,0.10));
    border-color: rgba(168,85,247,0.35);
}

html[data-theme="light"] .scroll-progress {
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

html[data-theme="light"] .footer--minimal { color: var(--text-mute); }

/* Stronger spotlight (mouse follow) */
.bg-spotlight {
    width: 720px; height: 720px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.22) 0%, rgba(236, 72, 153, 0.10) 35%, transparent 65%);
    mix-blend-mode: screen;
}
html[data-theme="light"] .bg-spotlight {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.20) 0%, rgba(236, 72, 153, 0.10) 35%, transparent 65%);
    mix-blend-mode: multiply;
    opacity: 0.6;
}

/* ======================================================
   MAGNETIC / MOUSE-REACTIVE EFFECTS
   ====================================================== */
.holo {
    background-image: linear-gradient(
        var(--holo-angle, 120deg),
        #ffffff 0%,
        #c7b6ff 18%,
        #6366f1 36%,
        #a855f7 52%,
        #ec4899 68%,
        #ffd2ec 82%,
        #ffffff 100%
    );
    transition: background-position 0.4s var(--ease);
}

/* Cockpit & ccard mouse-glow tracking */
.cockpit, .ccard {
    --mx: 50%; --my: 50%;
}
.cockpit::after, .ccard::after {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle 360px at var(--mx) var(--my), rgba(168, 85, 247, 0.18), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    z-index: 2;
    mix-blend-mode: screen;
}
.cockpit:hover::after, .ccard:hover::after { opacity: 1; }
html[data-theme="light"] .cockpit::after,
html[data-theme="light"] .ccard::after {
    background: radial-gradient(circle 360px at var(--mx) var(--my), rgba(168, 85, 247, 0.16), transparent 60%);
    mix-blend-mode: multiply;
}

/* Module rows reactive shimmer on hover */
.cmod { position: relative; overflow: hidden; }
.cmod::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle 200px at var(--mx, 50%) var(--my, 50%), rgba(168,85,247,0.18), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
}
.cmod:hover::before { opacity: 1; }
.cmod:hover { transform: translateY(-2px); }

/* Chip magnetic feel */
.chip span { will-change: transform; }
.chip:hover span { transform: translateY(-2px) scale(1.04); }

/* Channel hover magnet */
.ccard__channel { will-change: transform; position: relative; overflow: hidden; }
.ccard__channel::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle 180px at var(--mx, 50%) var(--my, 50%), rgba(168,85,247,0.18), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
}
.ccard__channel:hover::after { opacity: 1; }

/* ======================================================
   CONFETTI (form celebration)
   ====================================================== */
.confetti {
    position: fixed;
    width: 9px; height: 14px;
    pointer-events: none;
    z-index: 1100;
    border-radius: 2px;
    opacity: 1;
    will-change: transform, opacity;
    box-shadow: 0 0 8px currentColor;
}

/* ======================================================
   STRONGER CLICK RIPPLE
   ====================================================== */
.ripple {
    border-color: rgba(168, 85, 247, 0.85);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.45);
    mix-blend-mode: screen;
}
html[data-theme="light"] .ripple {
    border-color: rgba(168, 85, 247, 0.7);
    mix-blend-mode: multiply;
}

/* ======================================================
   FOUNDER SECTION (Jason Eisele)
   ====================================================== */
.section--founder { padding-top: clamp(40px, 6vw, 64px); padding-bottom: 0; }

.founder {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: clamp(28px, 5vw, 56px);
    align-items: center;
    padding: clamp(28px, 4vw, 44px);
    border-radius: 28px;
    border: 1px solid var(--border-strong);
    background: linear-gradient(155deg, var(--surface-2), var(--surface));
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    box-shadow: 0 40px 100px -32px rgba(0,0,0,0.55), 0 0 80px -28px rgba(168,85,247,0.28);
    overflow: hidden;
}
html[data-theme="light"] .founder {
    background: linear-gradient(155deg, rgba(255,255,255,0.95), rgba(255,255,255,0.78));
    box-shadow: 0 40px 100px -32px rgba(15,23,42,0.18), 0 0 80px -28px rgba(168,85,247,0.18);
}
.founder::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 40% at 100% 0%, rgba(236,72,153,0.16), transparent 60%),
                radial-gradient(ellipse 50% 35% at 0% 100%, rgba(99,102,241,0.18), transparent 60%);
    pointer-events: none;
}
.founder > * { position: relative; z-index: 1; }

@media (max-width: 760px) {
    .founder {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 22px;
    }
}

/* Photo */
.founder__photoWrap {
    position: relative;
    width: clamp(180px, 22vw, 260px);
    aspect-ratio: 1;
    margin: 0 auto;
}
.founder__photo {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--bg-2);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06);
    transition: transform 0.5s var(--ease);
}
html[data-theme="light"] .founder__photo {
    border-color: #ffffff;
    box-shadow: 0 30px 60px -20px rgba(15,23,42,0.25);
}
.founder__photoWrap:hover .founder__photo { transform: scale(1.03); }

.founder__ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        var(--accent-1) 0deg,
        var(--accent-2) 120deg,
        var(--accent-3) 240deg,
        var(--accent-1) 360deg);
    -webkit-mask: radial-gradient(circle, transparent calc(50% - 1.5px), #000 calc(50% - 1.5px), #000 50%, transparent 50%);
    mask: radial-gradient(circle, transparent calc(50% - 1.5px), #000 calc(50% - 1.5px), #000 50%, transparent 50%);
    animation: founderRingSpin 6s linear infinite;
    z-index: 1;
    filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.45));
}
@keyframes founderRingSpin { to { transform: rotate(360deg); } }

.founder__halo {
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(168,85,247,0.18), transparent 65%);
    z-index: 0;
    animation: founderHalo 5s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes founderHalo {
    from { transform: scale(0.95); opacity: 0.6; }
    to   { transform: scale(1.08); opacity: 1; }
}

.founder__signature {
    position: absolute;
    z-index: 3;
    bottom: 4%;
    right: 4%;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2) 50%, var(--accent-3));
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    border: 3px solid var(--bg-2);
    box-shadow: 0 8px 22px -6px rgba(168,85,247,0.7);
}
html[data-theme="light"] .founder__signature { border-color: #ffffff; }

/* Body */
.founder__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--accent-2);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.founder__eyebrowDot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 10px var(--accent-2);
    animation: pulseDot 1.6s infinite;
}

.founder__title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(32px, 4.4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin-bottom: 6px;
    background: linear-gradient(120deg, #fff 0%, #c7b6ff 35%, var(--accent-2) 65%, #fff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: holoShift 7s ease-in-out infinite;
}
html[data-theme="light"] .founder__title {
    background: linear-gradient(120deg, #1a1530, var(--accent-1) 35%, var(--accent-2) 65%, var(--accent-3));
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

.founder__role {
    color: var(--text-soft);
    font-size: 14px;
    letter-spacing: 0.04em;
    margin-bottom: 22px;
}

.founder__quote {
    position: relative;
    margin: 0 0 24px;
    padding: 18px 22px 18px 28px;
    border-left: 2px solid var(--accent-2);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: linear-gradient(135deg, rgba(168,85,247,0.06), transparent 70%);
}
.founder__quote p {
    font-family: 'Syne', sans-serif;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
    font-style: italic;
}
.founder__quoteMark {
    position: absolute;
    top: -10px; left: 14px;
    font-family: 'Syne', sans-serif;
    font-size: 70px;
    line-height: 1;
    color: var(--accent-2);
    opacity: 0.38;
    pointer-events: none;
    user-select: none;
}

.founder__stats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0 0 24px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.founder__stats li {
    text-align: center;
    border-right: 1px solid var(--border);
    padding: 4px 8px;
}
.founder__stats li:last-child { border-right: 0; }
.founder__statValue {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    background: linear-gradient(120deg, #fff, var(--accent-2), var(--accent-3));
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: holoShift 6s ease-in-out infinite;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .founder__statValue {
    background: linear-gradient(120deg, #1a1530, var(--accent-1), var(--accent-2));
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.founder__statValue.mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(15px, 1.6vw, 18px);
}
.founder__statLabel {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--text-mute);
    text-transform: uppercase;
}

.founder__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}
@media (max-width: 760px) {
    .founder__actions { justify-content: center; }
}

/* ======================================================
   HONEYPOT (anti-spam, hidden from humans)
   ====================================================== */
.hp-field {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ======================================================
   DSGVO COOKIE BANNER
   ====================================================== */
.cb {
    position: fixed;
    left: clamp(16px, 3vw, 28px);
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 1200;
    display: flex; justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(20px) scale(0.985);
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-spring);
}
.cb.is-open { opacity: 1; transform: translateY(0) scale(1); }
.cb[hidden] { display: none; }

.cb__panel {
    pointer-events: auto;
    width: min(680px, 100%);
    border-radius: 22px;
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, rgba(12, 12, 28, 0.95), rgba(8, 8, 18, 0.92));
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    box-shadow: 0 30px 80px -28px rgba(0,0,0,0.7), 0 0 60px -22px rgba(168,85,247,0.4);
    color: var(--text);
    padding: clamp(18px, 2.6vw, 24px);
    position: relative;
    overflow: hidden;
}
html[data-theme="light"] .cb__panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,249,253,0.92));
    box-shadow: 0 30px 80px -30px rgba(15,23,42,0.22), 0 0 60px -22px rgba(168,85,247,0.18);
}
.cb__panel::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 40% at 0% 0%, rgba(168,85,247,0.18), transparent 60%),
                radial-gradient(ellipse 50% 35% at 100% 100%, rgba(99,102,241,0.16), transparent 60%);
    pointer-events: none;
}
.cb__panel > * { position: relative; z-index: 1; }

.cb__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.cb__icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(168,85,247,0.18));
    border: 1px solid var(--border-strong);
    color: var(--accent-2);
}
.cb__title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(17px, 2vw, 19px);
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.cb__desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-soft);
    margin: 0;
}
.cb__desc a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.cb__desc a:hover { color: var(--accent-3); }

/* Categories */
.cb__details {
    margin: 6px 0 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,0.02);
    overflow: hidden;
}
html[data-theme="light"] .cb__details { background: rgba(255,255,255,0.5); }
.cb__cats { list-style: none; margin: 0; padding: 0; }
.cb__cat { border-bottom: 1px solid var(--border); }
.cb__cat:last-child { border-bottom: 0; }
.cb__row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px;
    cursor: none;
}
.cb__catText { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cb__catText strong { font-size: 14px; font-weight: 600; color: var(--text); }
.cb__catText em { font-size: 12px; color: var(--text-mute); font-style: normal; line-height: 1.45; }

/* Switch */
.cb__switch {
    position: relative;
    width: 44px; height: 24px;
    flex-shrink: 0;
}
.cb__switch input {
    position: absolute; opacity: 0;
    width: 100%; height: 100%;
    margin: 0;
    cursor: none;
}
.cb__slider {
    position: absolute; inset: 0;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cb__slider::before {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff, #d1d5db);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: transform 0.3s var(--ease-spring);
}
.cb__switch input:checked + .cb__slider {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(168,85,247,0.18);
}
.cb__switch input:checked + .cb__slider::before {
    transform: translateX(20px);
    background: #fff;
}
.cb__switch.is-locked .cb__slider {
    background: linear-gradient(135deg, rgba(74,222,128,0.5), rgba(34,197,94,0.5));
    border-color: transparent;
    opacity: 0.85;
}
.cb__switch.is-locked .cb__slider::before { transform: translateX(20px); }

/* Buttons */
.cb__actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center;
    justify-content: flex-end;
}
.cb__btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13px; font-weight: 600;
    cursor: none;
    transition: all 0.3s var(--ease);
    white-space: nowrap;
    position: relative; overflow: hidden;
}
.cb__btn--ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-soft);
}
.cb__btn--ghost:hover {
    color: var(--text);
    background: var(--surface);
    border-color: rgba(168,85,247,0.5);
}
.cb__btn--save {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text);
}
.cb__btn--save:hover {
    background: var(--surface-3);
    border-color: rgba(168,85,247,0.5);
}
.cb__btn--accept {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2) 50%, var(--accent-3));
    background-size: 200% auto;
    color: #fff;
    box-shadow: 0 12px 28px -10px rgba(168,85,247,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
}
.cb__btn--accept:hover {
    background-position: right center;
    box-shadow: 0 18px 36px -12px rgba(236,72,153,0.6);
    transform: translateY(-1px);
}
.cb__btnShine {
    position: absolute; top: 0; bottom: 0;
    width: 60px; left: -80px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    animation: btnShine 4s var(--ease) infinite;
}

.cb__legal {
    margin-top: 12px;
    text-align: center;
    font-size: 11.5px; color: var(--text-mute);
    letter-spacing: 0.04em;
}
.cb__legal a { color: var(--text-soft); transition: color 0.2s var(--ease); }
.cb__legal a:hover { color: var(--accent-2); }
.cb__legal span { margin: 0 8px; opacity: 0.5; }

@media (max-width: 560px) {
    .cb__head { flex-direction: column; gap: 10px; }
    .cb__actions { justify-content: stretch; }
    .cb__btn { flex: 1 1 calc(50% - 4px); padding: 11px 14px; font-size: 12.5px; }
    .cb__btn--accept { flex-basis: 100%; order: 1; }
    .cb__btn--save { flex-basis: 100%; order: 2; }
}

/* Slight dim while banner is open (only for very first visit, optional) */
body.cb-open { /* placeholder for future overlay */ }

/* ======================================================
   HERO TITLE LETTER TILT (mouse-reactive)
   ====================================================== */
.hero__title--mega .word {
    transform-style: preserve-3d;
}
.hero__title--mega .word.is-mouse.is-in {
    animation: none;
    opacity: 1;
    transition: transform 0.18s linear;
    transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0)
               rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
}