:root{
    --bg:#0b1020; --bg-2:#0e1326; --card:#0f172a;
    --text:#e6edf6; --muted:#9fb0c3;
    --brand:#6ee7ff; --brand-2:#7c3aed;
    --ring:rgba(110,231,255,.25); --shadow:0 10px 30px rgba(0,0,0,.35);
    --radius:18px; --nav-h:72px;
}
:root.light{
    --bg:#f7fafc; --bg-2:#fff; --card:#fff; --text:#111827; --muted:#4b5563;
    --brand:#0ea5e9; --brand-2:#7c3aed; --ring:rgba(14,165,233,.2);
    --shadow:0 16px 40px rgba(2,6,23,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background:
            radial-gradient(1200px 800px at 10% -10%, rgba(124,58,237,.25), transparent),
            radial-gradient(800px 600px at 90% 10%, rgba(110,231,255,.15), transparent),
            var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(1100px,92vw);margin:0 auto}
.section{padding:80px 0}
.title{font-size:clamp(28px,3.5vw,42px);line-height:1.1;margin:0 0 12px}
.lead{font-size:clamp(16px,2.2vw,18px);color:var(--muted)}
.muted{color:var(--muted)}
.kicker{font-weight:800;color:transparent;background:linear-gradient(120deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text}

/* Navbar */
.nav{
    position:sticky; top:0; z-index:1000; height:var(--nav-h);
    display:flex; align-items:center;
    background:color-mix(in oklab, var(--bg-2) 78%, transparent);
    backdrop-filter:saturate(160%) blur(10px);
    border-bottom:1px solid color-mix(in oklab, var(--text) 10%, transparent);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px}
.brand img{height:36px; width:auto; display:block}
/* Basiszustand: kein Glow (gilt für beide Themes) */
.nav-logo{
    height:36px;
    width:auto;
    display:block;
    filter:none;
    transition:filter 0.25s ease, transform 0.25s ease;
}

/* Dark Mode: Root hat KEINE .light-Klasse → stärkerer Glow */
:root:not(.light) .nav-logo{
    filter:
            drop-shadow(0 0 12px rgba(110,231,255,0.9))
            drop-shadow(0 0 22px rgba(124,58,237,0.9));
}

:root:not(.light) .nav-logo:hover{
    filter:
            drop-shadow(0 0 18px rgba(110,231,255,1))
            drop-shadow(0 0 30px rgba(124,58,237,1));
    transform:translateY(-1px) scale(1.03);
}

/* Light Mode explizit ohne Glow */
:root.light .nav-logo{
    filter:none;
    transform:none;
}

.menu{display:flex;gap:18px;align-items:center}
.menu a{font-weight:600;color:var(--muted);transition:color .3s}
.menu a:hover,.menu a.active{color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-radius:14px;padding:10px 16px;cursor:pointer;transition:all .3s}
.btn-ghost{border:1px solid color-mix(in oklab, var(--text) 12%, transparent)}
.btn-primary{background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(110,231,255,.25)}
.nav-toggle{display:none;border:0;background:transparent;color:var(--text)}

/* Hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-top:24px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.card{border-radius:var(--radius);background:color-mix(in oklab, var(--bg-2) 92%, transparent);border:1px solid color-mix(in oklab, var(--text) 10%, transparent);padding:20px;box-shadow:var(--shadow)}
.hero-visual { aspect-ratio: 16 / 6; }            /* feste Fläche, responsive */
.hero-img { width:100%; height:100%; display:block; border-radius:var(--radius); }
.hero-img--contain { object-fit: contain; background:#0f172a; } /* skaliert runter, schneidet nix ab */
.hero-visual img{height:440px;width:100%;object-fit:cover}
.badge{position:absolute;bottom:14px;left:14px;padding:8px 10px;border-radius:12px;font-size:12px;font-weight:700;background:rgba(15,23,42,.7);color:#e2e8f0;border:1px solid rgba(226,232,240,.12);backdrop-filter:blur(6px)}
.hero-logo{
    max-width:350px;
    height:auto;
    margin-bottom:20px;
    filter:none;
    transition: filter 0.25s ease, transform 0.25s ease;
}

/* Dark Mode: Root hat KEINE .light-Klasse */
:root:not(.light) .hero-logo{
    filter:
            drop-shadow(0 0 18px rgba(110,231,255,0.95))
            drop-shadow(0 0 32px rgba(124,58,237,0.9));
}

:root:not(.light) .hero-logo:hover{
    filter:
            drop-shadow(0 0 24px rgba(110,231,255,1))
            drop-shadow(0 0 42px rgba(124,58,237,1));
    transform: translateY(-2px) scale(1.02);
}


/* Grids & cards */
.grid{display:grid;gap:18px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card-soft{border-radius:var(--radius);background:color-mix(in oklab, var(--bg-2) 92%, transparent);border:1px solid color-mix(in oklab, var(--text) 10%, transparent);padding:20px;box-shadow:var(--shadow)}

/* Funktionen Cards */
.feat-card{
    position:relative;overflow:hidden;border-radius:var(--radius);
    background:color-mix(in oklab, var(--bg-2) 92%, transparent);
    border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
    padding:20px; box-shadow:var(--shadow); transition:all .3s ease;
}
.feat-card:hover{transform:translateY(-6px) scale(1.02); box-shadow:0 16px 44px rgba(110,231,255,.28); border-color:var(--brand)}
.feat-icon{
    width:54px;height:54px;display:grid;place-items:center;border-radius:14px;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;margin-bottom:12px;
    box-shadow:0 0 22px rgba(110,231,255,.35); transition:all .4s ease;
}
.feat-card:hover .feat-icon{transform:rotate(8deg) scale(1.1); box-shadow:0 0 36px rgba(124,58,237,.45)}

/* Media blocks */
.media{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.media.reverse{grid-template-columns:.9fr 1.1fr}

/* Team */
.team{display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
.person{text-align:center;padding:16px}
.avatar{width:120px;height:120px;border-radius:24px;overflow:hidden;margin:0 auto 12px;border:1px solid color-mix(in oklab, var(--text) 10%, transparent)}
.role{color:var(--muted);font-weight:600;font-size:13px}

/* Contact */
.form{display:grid;gap:14px}
.input{
    background:color-mix(in oklab, var(--bg-2) 92%, transparent);
    border:1px solid color-mix(in oklab, var(--text) 12%, transparent);
    border-radius:14px;padding:12px 14px;color:var(--text);outline:none;width:100%
}
.input:focus{box-shadow:0 0 0 6px var(--ring)}

/* Footer */
footer{border-top:1px solid color-mix(in oklab, var(--text) 10%, transparent);padding:30px 0;color:var(--muted)}

/* Chart Card */
.chart-card{
    border-radius:var(--radius);
    background:color-mix(in oklab, var(--bg-2) 92%, transparent);
    border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
    padding:20px; box-shadow:var(--shadow)
}

/* Responsive */
@media (max-width:1000px){
    .hero{grid-template-columns:1fr}
    .media,.media.reverse{grid-template-columns:1fr}
    .grid-4{grid-template-columns:repeat(2,1fr)}
    .team{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
    .menu{display:none} .nav-toggle{display:block}
    .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
    .team{grid-template-columns:1fr}
    .section{padding:64px 0}
    .brand img{height:32px}
    .hero-logo{max-width:180px}
}