@font-face{font-family:"Newsreader";src:url(/schriften/newsreader.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Schibsted";src:url(/schriften/schibsted.woff2) format("woff2");font-weight:400 900;font-display:swap}

/* Rollen: Fläche Talnacht, Text Schnee, Text 2 Dämmerblau, Aktion Fensterlicht */
:root{
  --flaeche:oklch(19% .022 240);
  --flaeche-2:oklch(23% .024 240);
  --text:oklch(95% .008 230);
  --text-2:oklch(80% .025 235);
  --licht:oklch(84% .11 75);
  --licht-tief:oklch(76% .12 70);
  --linie:oklch(40% .02 235);
  --aus:cubic-bezier(.16,1,.3,1);
  /* Radius: Knopf 6px, sonst 0 */
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--linie) var(--flaeche)}
body{margin:0;background:var(--flaeche);color:var(--text);font:400 1.0625rem/1.6 "Schibsted",ui-sans-serif,sans-serif;caret-color:var(--licht)}
::selection{background:var(--licht);color:var(--flaeche)}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
a:focus-visible,.knopf:focus-visible{outline:2px solid var(--licht);outline-offset:3px;border-radius:2px}

/* Startseite */
.buehne{position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;isolation:isolate}
.bild{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--flaeche)}
.bild>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 60%}
.kamera{animation:schwenk 38s var(--aus) both}
.kamera picture,.kamera img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 60%}
.licht{mix-blend-mode:screen;opacity:0;filter:brightness(1.7)}
.licht.a{animation:an 2.4s .9s var(--aus) forwards,atmen 5.5s 3.3s ease-in-out infinite alternate}
.licht.b{animation:an 2.4s 1.6s var(--aus) forwards,atmen 7s 4s ease-in-out infinite alternate-reverse}
.nebel{mix-blend-mode:screen;opacity:.22;object-position:50% 50%!important;
  -webkit-mask-image:linear-gradient(180deg,transparent 30%,#000 55%,#000 70%,transparent 92%);
  mask-image:linear-gradient(180deg,transparent 30%,#000 55%,#000 70%,transparent 92%)}
.nebel.a{animation:drift 46s ease-in-out infinite alternate}
.nebel.b{opacity:.14;transform:scaleX(-1);animation:drift-b 60s ease-in-out infinite alternate}
/* Lesbarkeit unten links, kein Deko-Verlauf: Abdunklung nur dort, wo Text liegt */
.schleier{background:linear-gradient(0deg,oklch(15% .02 240 / .6) 0%,transparent 34%),
  linear-gradient(90deg,oklch(15% .02 240 / .72) 0%,oklch(15% .02 240 / .35) 45%,transparent 70%)}

@keyframes schwenk{from{transform:scale(1.14) translate3d(1.5%,2%,0)}to{transform:scale(1.04) translate3d(0,0,0)}}
@keyframes an{to{opacity:1}}
@keyframes atmen{from{filter:brightness(1.7)}to{filter:brightness(.8)}}
@keyframes drift{from{transform:translate3d(-6%,1%,0) scale(1.15)}to{transform:translate3d(6%,-1%,0) scale(1.15)}}
@keyframes drift-b{from{transform:scaleX(-1.2) translate3d(-5%,3%,0)}to{transform:scaleX(-1.2) translate3d(5%,1%,0)}}

.kopf{display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 clamp(20px,4vw,56px)}
.marke{font:600 1.125rem/1 "Schibsted",sans-serif;letter-spacing:-.01em;text-decoration:none}
.kopf nav a{font-size:.9375rem;color:var(--text-2);text-decoration:none;padding:12px 0}
.kopf nav a:hover{color:var(--text)}

.inhalt{align-self:end;padding:0 clamp(20px,4vw,56px) clamp(28px,6vh,64px);max-width:min(100%,62rem)}
h1{font:420 clamp(2.5rem,1.4rem + 4.6vw,5.25rem)/1.02 "Newsreader",Georgia,serif;letter-spacing:-.025em;margin:0 0 .45em;text-wrap:balance;max-width:16ch}
.unter{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);color:var(--text-2);max-width:38ch;margin:0 0 2rem;text-wrap:pretty}
.erscheint>*{animation:auf 1.2s var(--aus) both}
.erscheint>:nth-child(2){animation-delay:.12s}
.erscheint>:nth-child(3){animation-delay:.24s}
@keyframes auf{from{opacity:0;transform:translateY(14px)}}

.handlung{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.knopf{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border-radius:6px;background:var(--licht);color:oklch(20% .03 60);
  font-weight:600;text-decoration:none;box-shadow:0 10px 30px -12px oklch(70% .12 70 / .45);transition:background-color .2s var(--aus),transform .16s var(--aus)}
.knopf:hover{background:var(--licht-tief)}
.knopf:active{transform:scale(.97)}
.adresse{color:var(--text-2);font-size:.9375rem}
.adresse a{color:var(--text)}

.fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:18px clamp(20px,4vw,56px);border-top:1px solid oklch(40% .02 235 / .5);
  font-size:.875rem;color:var(--text-2);background:oklch(15% .02 240 / .6)}
.fuss nav{display:flex;gap:24px}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--text);text-decoration:underline}

/* Rechtstexte */
.text-seite{max-width:44rem;margin:0 auto;padding:0 clamp(20px,4vw,40px) 72px}
.text-seite .kopf{padding:0}
.text-seite h1{font-size:clamp(2.25rem,1.6rem + 2.5vw,3.25rem);margin:56px 0 32px;max-width:none}
.text-seite h2{font:600 1.125rem/1.3 "Schibsted",sans-serif;margin:40px 0 8px}
.text-seite p,.text-seite li{color:var(--text-2);max-width:65ch}
.text-seite strong{color:var(--text);font-weight:600}
.text-seite .fuss{margin-top:64px;padding:18px 0;background:none}

@media (max-width:640px){
  .bild>*,.kamera img{object-position:58% 62%}
  .inhalt{padding-bottom:32px}
  .schleier{background:linear-gradient(0deg,oklch(15% .02 240 / .85) 0%,oklch(15% .02 240 / .5) 45%,transparent 70%)}
  .kopf nav a{font-size:.875rem}
  .unter{margin-bottom:1.5rem}
  .knopf{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .licht{opacity:1}
}