/* ── Base — Reset, Typografie-Basis, Container ───────────── Max. 120 Zeilen. Kein Seiten-spezifisches CSS hier. ─────────────────────────────────────────────────────────── */ /* @font-face Projektfont hier, ODER Google Fonts async im */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; /* S87f: zusammen mit body — verhindert horizontalen Scroll global (Safety-Net) */ } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--text-primary); background-color: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, video, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ul, ol { list-style: none; } input, textarea, select { font: inherit; } /* ── Typografie-Hierarchie ──────────────────────────────── */ h1 { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } h2 { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } h3 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); } h4 { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-semibold); } p { line-height: var(--leading-relaxed); } /* ── Layout-Utilities ───────────────────────────────────── */ .container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--side-padding); } .container--narrow { max-width: var(--max-width-narrow); margin-inline: auto; padding-inline: var(--side-padding); } /* ── Text-Utilities ─────────────────────────────────────── */ .section-label { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--accent); } .text-center { text-align: center; } .text-on-dark { color: var(--text-on-dark); } /* ── Skip-Link (A11y — erstes Body-Element) ─────────────── */ .skip-link { position: absolute; top: -100%; left: var(--side-padding); padding: var(--space-3) var(--space-6); background: var(--primary-700); color: #FFFFFF; font-weight: var(--weight-semibold); font-size: var(--text-sm); z-index: var(--z-toast); transition: top var(--transition-fast); } .skip-link:focus { top: var(--space-4); }