:root{--ink:#12152a;--surface:#1b1f3a;--text:#eceef6;--muted:#aab0cc;--licht:#f5a524;--ton:#2ec4b6;--video:#e8458b}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font:17px/1.65 "Avenir Next","Segoe UI",system-ui,sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid var(--licht);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
header.top{display:flex;justify-content:space-between;align-items:center;padding:20px 0}
.logo{font-weight:800;letter-spacing:.02em;text-decoration:none}
nav a{margin-left:22px;text-decoration:none;color:var(--muted)}
nav a:hover{color:var(--text)}
.hero{position:relative;overflow:hidden;padding:72px 0 96px}
.beams{position:absolute;inset:0;pointer-events:none}
.beams i{position:absolute;top:-10%;width:34%;height:130%;transform-origin:50% 0;mix-blend-mode:screen;opacity:.6;animation:sway 9s ease-in-out infinite alternate}
.beams i:nth-child(1){left:38%;background:linear-gradient(180deg,var(--licht),transparent 85%);transform:rotate(-22deg)}
.beams i:nth-child(2){left:52%;background:linear-gradient(180deg,var(--ton),transparent 85%);transform:rotate(-4deg);animation-delay:.45s}
.beams i:nth-child(3){left:66%;background:linear-gradient(180deg,var(--video),transparent 85%);transform:rotate(16deg);animation-delay:.7s}
@keyframes sway{to{opacity:.85;filter:brightness(1.25)}}
@media (prefers-reduced-motion:reduce){.beams i{animation:none}}
.hero .wrap{position:relative}
h1{font-size:clamp(3.4rem,13vw,9rem);line-height:1.02;margin:56px 0 24px;font-weight:800;letter-spacing:-.02em}
h1 .l{color:var(--licht)}h1 .t{color:var(--ton)}h1 .v{color:var(--video)}
.lead{max-width:34em;font-size:1.2rem;color:var(--muted);margin:0 0 32px}
.btn{display:inline-block;padding:14px 26px;border-radius:6px;background:var(--text);color:var(--ink);font-weight:700;text-decoration:none}
.btn.alt{background:transparent;color:var(--text);border:2px solid var(--muted);margin-left:10px}
section{padding:72px 0}
h2{font-size:clamp(1.8rem,4vw,2.5rem);margin:0 0 32px;letter-spacing:-.01em}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--surface);padding:28px;border-top:6px solid var(--c)}
.card h3{margin:0 0 10px;font-size:1.4rem;color:var(--c)}
.card p{margin:0;color:var(--muted)}
.card ul{margin:14px 0 0;padding-left:18px;color:var(--text)}
.mode{background:var(--surface);padding:28px}
.mode h3{margin:0 0 8px;font-size:1.3rem}
.mode p{margin:0;color:var(--muted)}
.kontakt dl{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;margin:0;font-size:1.15rem}
.kontakt dt{color:var(--muted)}.kontakt dd{margin:0}
footer{padding:36px 0 48px;color:var(--muted);font-size:.95rem;border-top:1px solid #2a2f52}
footer a{margin-right:20px}
.legal{max-width:720px;padding:40px 24px 80px}
.legal h1{font-size:2.2rem;margin:24px 0}
.legal h2{font-size:1.25rem;margin:32px 0 8px}
.legal p{color:var(--muted)}
.todo{background:#3a2f12;color:#ffd98a;padding:2px 6px;border-radius:3px}
@media (max-width:560px){nav a{margin-left:14px}.btn.alt{margin:12px 0 0}}

.hero{padding-bottom:120px;background:radial-gradient(ellipse at 70% 0,#2a2f5e,var(--ink) 65%)}
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.panel{background:var(--c);color:#12152a;padding:64px 40px 72px;min-height:340px}
.panel h3{font-size:2.4rem;margin:0 0 16px;letter-spacing:-.02em;line-height:1}
.panel p{margin:0 0 16px;font-size:1.1rem;font-weight:500}
.panel ul{margin:0;padding-left:20px}
#leistungen{padding:0}
.paper{background:#f1f2f7;color:#12152a}
.paper h2{color:#12152a}
.paper .mode{background:#fff;border-left:6px solid #12152a}
.paper .mode p{color:#3b4162}

.subhead{padding-bottom:8px;background:radial-gradient(ellipse at 80% 0,#2a2f5e,var(--ink) 70%)}
h1.page{font-size:clamp(2.4rem,7vw,4rem);margin:24px 0 32px;line-height:1.05}
nav a[aria-current]{color:var(--text);border-bottom:2px solid currentColor;padding-bottom:2px}
.kontakt{padding-top:40px}
.legal{padding-top:24px}

/* Ruhigeres Design: Weiß auf Dunkelblau, Farbe nur als Akzent */
.hero{background:radial-gradient(ellipse at 70% 0,#252a52,var(--ink) 65%)}
.beams i:nth-child(n){background:linear-gradient(180deg,#cfd6ff,transparent 80%);opacity:.3;animation:sway 10s ease-in-out infinite alternate}
.beams i:nth-child(2){opacity:.22;animation-delay:2s}
.beams i:nth-child(3){opacity:.26;animation-delay:4s}
@keyframes sway{to{opacity:.45}}
@media (prefers-reduced-motion:reduce){.beams i:nth-child(n){animation:none}}
h1 .l,h1 .t,h1 .v{color:var(--text)}
.panels{gap:1px;background:#2a2f52}
.panel{background:var(--surface);color:var(--text)}
.panel h3{color:var(--text)}
.panel p{color:var(--muted);font-weight:400}
.panel ul{color:var(--text)}
.card,.mode{border-top-color:#2a2f52}
a:hover{color:var(--licht)}
.btn:hover{color:var(--ink);background:#fff}
/* Kopfzeile: größerer Name, gut lesbare Navigation */
header.top{position:relative;z-index:2;flex-wrap:wrap;gap:12px 28px;padding:24px 0}
.logo{font-size:clamp(1.7rem,5.5vw,2.4rem);font-weight:800;letter-spacing:-.01em;line-height:1}
nav a{color:var(--text);font-weight:600;font-size:1.05rem;margin-left:0;margin-right:26px;padding:6px 0}
nav a:last-child{margin-right:0}
nav a:hover{color:var(--text);border-bottom:2px solid currentColor}
nav a[aria-current]{border-bottom:2px solid var(--text)}