@font-face{font-family:Satoshi;font-weight:400;font-style:normal;font-display:swap;src:url(satoshi-400.woff2) format("woff2")}
@font-face{font-family:Satoshi;font-weight:500;font-style:normal;font-display:swap;src:url(satoshi-500.woff2) format("woff2")}
@font-face{font-family:Satoshi;font-weight:700;font-style:normal;font-display:swap;src:url(satoshi-700.woff2) format("woff2")}

:root{--violett-tief:#3B3CC4;--tuerkis:#39B8B9;--tinte:#111111;--nacht:#12122A;--nacht-text:#C9C9E2;--boden:#07071A;--weiss:#FFFFFF;
  --rand:clamp(16px,4vw,48px);--maus:0}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Satoshi,"Helvetica Neue",Arial,sans-serif;color:var(--tinte);background:var(--weiss);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--tuerkis);outline-offset:3px;border-radius:4px}
.satz{max-width:1280px;margin-inline:auto;padding-inline:var(--rand)}

/* Startseite: ein einziges Bild, das den ganzen Schirm füllt */
.nachtseite{background:var(--boden);color:var(--weiss)}
.bild{position:relative;overflow:hidden;height:100vh;height:100svh;min-height:320px;
  background:
    radial-gradient(70% 38% at 30% 44%,rgba(32,226,170,.42),transparent 72%),
    radial-gradient(60% 34% at 68% 34%,rgba(87,88,224,.55),transparent 74%),
    radial-gradient(52% 30% at 84% 20%,rgba(247,121,145,.32),transparent 76%),
    linear-gradient(#090920,var(--nacht) 58%,#191B45)}
.mit-licht .bild{background:linear-gradient(#090920,var(--nacht) 58%,#191B45)}
.bild canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#licht{display:none;mix-blend-mode:screen}
.mit-licht #licht{display:block}

.baeume{position:absolute;bottom:0;left:50%;max-width:none;width:max(calc(100% + 64px),1180px);pointer-events:none;
  animation:wachsen 2.2s cubic-bezier(.2,.7,.2,1) both}
.baeume--fern{transform:translateX(calc(-50% + var(--maus)*-8px))}
.baeume--nah{transform:translateX(calc(-50% + var(--maus)*-22px));animation-duration:1.7s}

.logo{position:absolute;inset:0;display:grid;place-items:center;padding:0 var(--rand) 15vh;pointer-events:none}
.logo a{display:block;pointer-events:auto;filter:drop-shadow(0 4px 34px rgba(7,7,26,.55));animation:auftauchen 1.6s .5s cubic-bezier(.2,.7,.2,1) both}
.logo img{width:clamp(210px,min(40vw,58vh),560px);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.logo a:hover img{transform:scale(1.03)}
/* Im Hochformat wären die Tannen sonst winzig */
@media (max-aspect-ratio:1/1){.baeume{width:185vh}}
/* Dämpft das Licht hinter dem Logo, damit die kleine Zeile auch auf hellem Grün lesbar bleibt */
.logo::before{content:"";position:absolute;left:50%;top:calc(50% - 7.5vh);width:min(92vw,900px);height:min(60vh,520px);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(7,7,26,.5),rgba(7,7,26,.28) 55%,transparent);pointer-events:none}
.logo a{position:relative}

.leiste{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 22px;
  padding:6px var(--rand) 8px;font-size:15px;font-weight:500;color:#E4E4F4}
.leiste a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px}
.leiste nav{display:flex;gap:20px;margin-right:auto}
.leiste button{min-height:44px;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.leiste button[hidden]{display:none}

@keyframes wachsen{from{opacity:0;margin-bottom:-90px}}
@keyframes auftauchen{from{opacity:0;transform:translateY(16px)}}

@media (max-width:600px){
  .leiste{justify-content:center;font-size:14px;padding-bottom:6px}
  .leiste nav{margin-right:0}
  .leiste button{flex-basis:100%;min-height:32px}
  .leiste a{min-height:32px}
  .logo{padding-bottom:22vh}
}
@media (prefers-reduced-motion:reduce){
  .baeume,.logo a{animation:none}
  .logo img{transition:none}
}

/* Impressum und Datenschutz */
.sprung{position:absolute;left:16px;top:-80px;z-index:20;padding:12px 20px;background:var(--weiss);color:var(--tinte);border-radius:999px;font-weight:700}
.sprung:focus{top:16px}
.kopf{position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1280px;margin-inline:auto;padding:22px var(--rand)}
.kopf-link{color:var(--weiss);font-size:16px;font-weight:500;text-decoration:none}
.kopf-link:hover{text-decoration:underline;text-underline-offset:4px}
.marke img{width:134px}
.rechtskopf{background:var(--nacht);color:var(--weiss);padding-block:124px 56px}
.rechtskopf h1{font-size:clamp(38px,5vw,64px);line-height:1.05;font-weight:500;letter-spacing:-.03em}
.recht{padding-block:clamp(48px,6vw,80px)}
.recht .satz{max-width:820px}
.recht h2{font-size:24px;line-height:1.25;font-weight:700;letter-spacing:-.012em;margin-top:36px}
.recht h2:first-child{margin-top:0}
.recht p,.recht ul{margin-top:10px;color:#3C3C50}
.recht ul{list-style:disc;padding-left:22px}
.recht li{margin-top:4px}
.recht a{color:var(--violett-tief);overflow-wrap:anywhere;text-underline-offset:3px}
.fuss{background:var(--nacht);color:var(--nacht-text);padding-block:40px;font-size:15px}
.fuss__zeile{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.fuss img{width:112px;margin-bottom:12px}
.fuss nav{display:flex;flex-wrap:wrap;gap:6px 24px}
.fuss a{color:var(--weiss);text-underline-offset:4px}