:root{--nacht:#0f2a36;--see:#173b4a;--fels:#2d5866;--hang:#4f7f86;--nebel:#e9f1f2;--licht:#f4c76b}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;background:var(--nacht);color:var(--nebel);display:flex;flex-direction:column;min-height:100vh}
.hero{position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;
 background:radial-gradient(ellipse at 70% 0%,#2b5f70 0%,var(--see) 45%,var(--nacht) 100%)}
.hero::before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:14%;top:12%;
 background:radial-gradient(circle,var(--licht) 0%,rgba(244,199,107,.35) 45%,rgba(244,199,107,0) 70%);opacity:.9}
.landscape{position:absolute;left:0;bottom:0;width:100%;height:46%}
.m1{fill:#33606c;opacity:.55}.m2{fill:var(--fels);opacity:.8}.m3{fill:#1e4553}
.lake{fill:#12313d}.glint rect{fill:var(--nebel);opacity:.35}
.inner{position:relative;text-align:center;padding:12vh 24px 0;max-width:760px}
.kicker{text-transform:uppercase;letter-spacing:.32em;font-size:.78rem;opacity:.8}
h1{font-size:clamp(6rem,22vw,15rem);font-weight:200;letter-spacing:-.04em;line-height:.95;margin:.15em 0 .1em;
 background:linear-gradient(180deg,#fff 30%,#b9d3d6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(1.1rem,2.4vw,1.45rem);font-weight:300;line-height:1.5;opacity:.92}
.status{display:inline-flex;align-items:center;gap:.6em;margin-top:2.2rem;padding:.6em 1.2em;border:1px solid rgba(233,241,242,.35);
 border-radius:999px;font-size:.9rem;letter-spacing:.04em;backdrop-filter:blur(4px);background:rgba(15,42,54,.35)}
.dot{width:.55em;height:.55em;border-radius:50%;background:var(--licht);box-shadow:0 0 0 0 rgba(244,199,107,.7);animation:puls 2.4s infinite}
@keyframes puls{70%{box-shadow:0 0 0 .7em rgba(244,199,107,0)}100%{box-shadow:0 0 0 0 rgba(244,199,107,0)}}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5em;padding:1rem 24px;font-size:.82rem;background:#0b2029;color:#9fb9bd}
footer a{color:var(--nebel);text-decoration:none;border-bottom:1px solid rgba(233,241,242,.3)}
footer a:hover{border-color:var(--licht)}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}
@media (max-width:600px){.inner{padding-top:16vh}.kicker{letter-spacing:.18em;font-size:.68rem}.hero::before{width:110px;height:110px;right:6%;top:4%}.landscape{height:40%}footer{justify-content:center;text-align:center}}