:root{--grund:#f4f8fb;--text:#16324a;--leise:#4d6478;--akzent:#0a7fb5;--welle1:#bfe3f3;--welle2:#8fd0ea;--welle3:#4fb3dc;--fuss:#5a6f82;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--grund:#0b1824;--text:#e3eef6;--leise:#9fb4c6;--akzent:#6cc7ee;--welle1:#10324a;--welle2:#14496a;--welle3:#1b6690;--fuss:#8aa0b3;color-scheme:dark}}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--grund);color:var(--text);font:400 18px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column;-webkit-text-size-adjust:100%}
main{flex:1;display:grid;place-items:center;padding:48px 16px 24px;position:relative;overflow:hidden}
.mitte{max-width:640px;text-align:center;position:relative;z-index:1;animation:auf .9s cubic-bezier(.22,.61,.36,1) both}
.marke{font-weight:700;letter-spacing:.02em;color:var(--akzent);font-size:20px;margin:0 0 18px}
h1{text-wrap:balance;font-size:clamp(30px,5vw,48px);line-height:1.15;margin:0 0 16px;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 12px;color:var(--leise)}
.bald{display:inline-block;margin-top:14px;padding:8px 18px;border-radius:999px;background:color-mix(in srgb,var(--akzent) 14%,transparent);color:var(--akzent);font-weight:600;font-size:15px;letter-spacing:.04em}
.wellen{position:absolute;left:0;right:0;bottom:0;height:34vh;min-height:160px;pointer-events:none}
.wellen svg{position:absolute;bottom:0;left:0;width:200%;height:100%;animation:ziehen 18s linear infinite}
.wellen svg:nth-child(2){animation-duration:26s;animation-direction:reverse;opacity:.85}
.wellen svg:nth-child(3){animation-duration:34s;opacity:.7}
@keyframes ziehen{to{transform:translateX(-50%)}}
@keyframes auf{from{opacity:0;transform:translateY(12px)}}
.text{flex:1;max-width:760px;margin:0 auto;padding:48px 16px 64px}
.text h1{font-size:clamp(28px,4vw,38px);text-align:left}
.text h2{font-size:21px;margin:30px 0 8px}
.text p{color:var(--text)}
a{color:var(--akzent)}
footer{padding:16px;display:flex;justify-content:center;gap:20px;font-size:14px;color:var(--fuss);position:relative;z-index:1;background:var(--grund)}
footer a{color:inherit;text-decoration:none}
footer a:hover{text-decoration:underline}
a:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.wellen svg,.mitte{animation:none}}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
@media print{@page{margin:10mm}body{padding:10mm;background:#fff;color:#000}.wellen{display:none}main{display:block;padding:0}}