/* ══════════════════════════════════════════════════════════════════ BASE — Reset, Tokens, Raster, Grundtypografie Die Epochen-Optik steckt in eras.css und modern.css. ══════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Die Chrome liegt oben oder unten auf — Sprungmarken brauchen Luft */ scroll-padding-top: 5rem; scroll-padding-bottom: 5rem; } body { margin: 0; background: #ADADA4; color: #111; font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif); line-height: 1.6; overflow-x: hidden; /* Verhindert Weißblitze zwischen zwei Sektionen mit sehr unterschiedlichen Hintergründen */ transition: background-color .5s ease; } img, svg, video { display: block; max-width: 100%; height: auto; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, p, figure { margin: 0; } a { color: inherit; } button { font: inherit; color: inherit; } /* ── Layout ─────────────────────────────────────────────────────── */ .wrap { width: min(100% - 2.5rem, 74rem); margin-inline: auto; } .section { position: relative; padding-block: clamp(5rem, 12vh, 9rem); /* Jede Sektion trägt ihren eigenen Hintergrund und ihre eigene Schrift — so sieht sie immer richtig aus, egal wo gescrollt wird */ isolation: isolate; } /* ── Typografie-Skala ───────────────────────────────────────────── */ .h2 { font-family: var(--font-display, inherit); font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; } .h3 { font-family: var(--font-display, inherit); font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; } .lead { font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.55; max-width: 46ch; text-wrap: pretty; } .eyebrow { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; } /* ── Zugänglichkeit ─────────────────────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skiplink { position: fixed; top: .5rem; left: .5rem; z-index: 999; padding: .6rem 1rem; background: #111; color: #fff; font: 600 .9rem/1 ui-sans-serif, system-ui, sans-serif; text-decoration: none; border-radius: .25rem; transform: translateY(-200%); transition: transform .18s ease; } .skiplink:focus { transform: none; } /* Fokus muss in jeder Epoche sichtbar sein. currentColor passt sich automatisch an, weil jede Epoche ihre eigene Textfarbe mitbringt. */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; } /* Elemente, die ohne JavaScript nichts tun können, verschwinden dann auch — ein toter Button ist schlimmer als kein Button. */ html:not(.js) .js-only { display: none; } /* ── Bewegung reduzieren ────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ── Ohne JavaScript ────────────────────────────────────────────── */ /* Alle Zeilen der Boot-Sequenz sind im HTML sichtbar. Erst wenn JS läuft, setzt es .js auf und übernimmt die Animation. */ .line { opacity: 1; }