/* Golf Pleasure – öffentliche Baustellen-Seite, bis der Livegang freigegeben ist (Simon 02.11.2026).
   Eigenständig, ohne Skript; Bewegung nur über transform/opacity. */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
:root { --nacht: #151741; --navy-2: #2b2e74; --weiss: #f4f2ec; --grau: #b8bad6; --gruen: #14b347; --ease: cubic-bezier(0.2, 0.7, 0.1, 1); }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--nacht); color: var(--weiss); font-family: "Archivo", system-ui, "Segoe UI", sans-serif; line-height: 1.55; }
.buehne { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.bild { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21, 23, 65, 0.55) 0%, rgba(21, 23, 65, 0.15) 35%, rgba(21, 23, 65, 0.7) 75%, var(--nacht) 100%), url("/video/hero-poster.webp") 50% 20% / cover no-repeat; transform: scale(1.12); animation: heran 2.4s var(--ease) forwards; }
.inhalt { padding: 40px max(20px, 5vw) clamp(60px, 12vh, 140px); max-width: 1200px; }
.logo { display: block; width: 180px; height: auto; margin-bottom: clamp(40px, 10vh, 120px); opacity: 0; animation: ein 1s ease 0.2s forwards; }
h1 { margin: 0; font-stretch: 125%; font-weight: 850; font-size: clamp(2.4rem, 8vw, 8rem); line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; overflow: hidden; }
h1 span { display: block; transform: translateY(105%); animation: steigen 1.1s var(--ease) 0.4s forwards; }
.lauf { max-width: 52ch; margin: 26px 0 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--grau); opacity: 0; animation: ein 0.9s ease 0.9s forwards; }
.kontakt { margin: 22px 0 0; font-weight: 600; opacity: 0; animation: ein 0.9s ease 1.1s forwards; }
.kontakt a { color: var(--weiss); text-decoration-color: var(--gruen); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }
@keyframes heran { to { transform: scale(1); } }
@keyframes ein { to { opacity: 1; } }
@keyframes steigen { to { transform: translateY(0); } }
@media (max-width: 600px) { h1 { font-stretch: 105%; font-size: 12vw; } .logo { width: 140px; } }
@media (prefers-reduced-motion: reduce) { .bild, h1 span, .logo, .lauf, .kontakt { animation: none; transform: none; opacity: 1; } }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 5; padding: 8px 12px; background: var(--gruen); color: var(--nacht); font-weight: 700; }
.skip-link:focus { left: 8px; }