/* Platzhalter «Bald online»: Vollbild-Foto, Text unten links (wie der Hero der Startseite). Schriften lokal. */
@font-face { font-family: 'Fugaz One'; src: url(fonts/fugaz-one-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url(fonts/schibsted-grotesk-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url(fonts/schibsted-grotesk-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root { --pink: #E83F6B; --ink: #1D1D1B; --font: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { position: relative; margin: 0; min-height: 100svh; display: flex; flex-direction: column; font: 500 17px/1.5 var(--font); color: #fff; background: var(--ink); }
img { display: block; max-width: 100%; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 6px; }

/* Nur die aktive Sprache zeigen. Ohne JavaScript bleibt Deutsch und der Umschalter ist ausgeblendet. */
html[lang="de"] [lang="en"], html[lang="en"] [lang="de"] { display: none !important; }
.nojs .switch { display: none; }

.bg { position: absolute; inset: 0; overflow: hidden; }
/* Hintergrund: 4 Fotos im Wechsel (je 7 s, weiche Überblendung), jedes zoomt langsam. Nur CSS. */
.slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: slide 28s linear infinite; }
.slide:nth-child(1) { opacity: 1; object-position: 72% 55%; transform-origin: 75% 60%; animation-delay: -3s; }
.slide:nth-child(2) { object-position: 55% 60%; transform-origin: 50% 60%; animation-delay: -24s; }
.slide:nth-child(3) { object-position: 70% 60%; transform-origin: 70% 55%; animation-delay: -17s; }
.slide:nth-child(4) { object-position: 52% 55%; transform-origin: 55% 50%; animation-delay: -10s; }
body::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgb(20 20 18 / .45) 0%, rgb(20 20 18 / 0) 22%, rgb(20 20 18 / 0) 45%, rgb(20 20 18 / .7) 100%),
  linear-gradient(90deg, rgb(20 20 18 / .5) 0%, rgb(20 20 18 / 0) 60%); }
body > :not(.bg) { position: relative; z-index: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding-left: clamp(16px, 4vw, 56px); padding-right: clamp(16px, 4vw, 56px); }

.top { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; }
.logo { width: 188px; height: auto; }
.switch { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgb(255 255 255 / .16); }
.switch a { display: grid; place-items: center; min-width: 44px; min-height: 38px; padding: 0 12px; border-radius: 9px; font-size: 14px; font-weight: 700; text-decoration: none; }
.switch a[aria-current="true"] { background: #fff; color: var(--ink); }

.in { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; padding-top: 120px; padding-bottom: 40px; }
.badge { width: fit-content; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; background: #fff; color: var(--ink); }
h1 { margin: 0; font: 400 clamp(44px, 6.4vw, 96px)/1 'Fugaz One', var(--font); max-width: 14ch; text-wrap: balance; text-shadow: 0 2px 24px rgb(0 0 0 / .25); }
.lead { font-size: clamp(18px, 1.6vw, 22px); max-width: 40ch; }

.foot { padding-bottom: 20px; font-size: 13px; color: rgb(255 255 255 / .72); }
.foot a { text-decoration-color: rgb(255 255 255 / .4); }

/* Texte erscheinen nacheinander. Bei «weniger Bewegung» steht alles still (nur das erste Foto). */
.top, .badge, h1, .lead, .foot { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.badge { animation-delay: .3s; }
h1 { animation-delay: .45s; }
.lead { animation-delay: .7s; }
.top, .foot { animation-name: fade; animation-delay: 1s; }
@keyframes slide {
  0% { opacity: 0; transform: scale(1); }
  5%, 30% { opacity: 1; }
  35% { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.1); }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; } }