:root{
    --primary:#1f3340;     /* Slate */
    --teal:#2aa7a1;        /* Teal Akzent */
    --bg:#f4f7f9;          /* kühles Hellgrau */
    --paper:#ffffff;
    --text:#1f2a33;
    --muted:#6e7a86;
    --radius:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.8;
}

/* Header + Nav (dezente Glassmorph-Optik) */
.header{
    position:relative;
    background:
            radial-gradient(1100px 420px at 10% -20%, rgba(42,167,161,.25), transparent 60%),
            linear-gradient(135deg, #16242d 0%, #274251 100%);
    color:#eaf6f5;
    padding:clamp(1.6rem,3vw,2.2rem) 1rem 1.2rem 1rem;
    border-bottom:1px solid rgba(255,255,255,.1);
}
.wrap{max-width:1160px;margin:0 auto;padding:0 1rem}
.brandline{
    display:flex;align-items:center;justify-content:space-between;gap:1rem
}
.logo a{color:#eaf6f5;text-decoration:none;font-weight:900;letter-spacing:.2px}
.logo small{display:block;color:#b9d2d0;opacity:.95;margin-top:.2rem}
.nav{display:flex;gap:.7rem;flex-wrap:wrap}
.nav a{
    color:#eaf6f5;text-decoration:none;font-weight:600;
    padding:.55rem .9rem;border-radius:999px;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
    backdrop-filter:saturate(140%) blur(2px)
}
.nav a:hover{background:rgba(255,255,255,.18)}

/* Hero */
.hero{
    margin-top:1rem
}
.hero-inner{
    max-width:1160px;margin:0 auto;display:grid;gap:1.4rem;
    grid-template-columns:1.1fr .9fr;align-items:center;padding:0 1rem 1.5rem 1rem;
}
.hero h1{margin:.1rem 0 .5rem 0;font-size:clamp(1.8rem,3vw,2.5rem)}
.hero p{color:#d6eceb;max-width:60ch}
.cta{
    display:inline-block;margin-top:.8rem;background:#eaf6f5;color:#10323a;
    text-decoration:none;font-weight:700;padding:.8rem 1.15rem;border-radius:12px;border:2px solid transparent
}
.cta:hover{background:transparent;color:#eaf6f5;border-color:#eaf6f5}
.hero-media{
    aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.22);
    box-shadow:0 12px 30px rgba(0,0,0,.25)
}
.hero-media img{width:100%;height:100%;object-fit:cover}

/* Content */
main{max-width:1160px;margin:2rem auto;padding:0 1rem}
.card{
    background:var(--paper);border:1px solid #e5edf2;border-radius:var(--radius);
    box-shadow:0 10px 28px rgba(12,24,30,.06);
    padding:clamp(1.2rem,2.5vw,2rem);margin:1.15rem 0;
}
.card h2,.card h3{margin-top:0}
.grid{display:grid;gap:1.2rem;grid-template-columns:repeat(12,1fr)}
.col-7{grid-column:span 7}
.col-5{grid-column:span 5}
.figure{
    border:1px solid #e1eaee;border-radius:12px;overflow:hidden;background:#f3fbfa
}
.figure img{width:100%;height:auto;display:block}
.figcap{padding:.6rem .8rem;color:var(--muted);font-size:.95rem}

/* Footer */
.footer{
    margin-top:2.4rem;background:#0f2129;color:#d0e7e6;border-top:1px solid rgba(255,255,255,.1)
}
.footer .wrap{padding:1.2rem 1rem;text-align:center}

/* Responsive */
@media (max-width:960px){
    .hero-inner{grid-template-columns:1fr}
    .grid{grid-template-columns:repeat(6,1fr)}
    .col-7{grid-column:span 6}
    .col-5{grid-column:span 6}
}