/* ============================================================= 02 · BASE / RESET Reset, Typografie, Grund-Elemente, Utilities. ============================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overscroll-behavior-y: none; scroll-padding-top: calc(var(--header-h) + 1rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--f-sans); font-size: var(--fs-base); line-height: 1.7; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { overflow-x: clip; } /* Scroll-Sperre (Menü, Lightbox, Intro) – auf , da body nicht zum Viewport propagiert */ html.is-locked { overflow: hidden; } @supports (-webkit-touch-callout: none) { html.is-locked body { position: fixed; inset: 0; width: 100%; overflow: hidden; } } h1, h2, h3, h4 { font-family: var(--f-sans); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 0.6em; text-wrap: balance; color: var(--c-ink); } h1 { font-size: var(--fs-h1); letter-spacing: -0.025em; } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; } h4 { font-size: var(--fs-lg); letter-spacing: -0.01em; } p { margin: 0 0 1.1em; max-width: 60ch; } p:last-child { margin-bottom: 0; } .lead { font-size: var(--fs-lg); line-height: 1.6; color: var(--c-steel); font-weight: 400; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--c-red); outline-offset: 3px; border-radius: 4px; } img, video, svg { display: block; max-width: 100%; height: auto; } video { width: 100%; } ul, ol { margin: 0; padding: 0; } ul.list, ol.list { padding-left: 1.2em; margin: 0 0 1.1em; } ul.list li, ol.list li { margin-bottom: 0.3em; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } input, textarea, select { font: inherit; color: inherit; } strong { font-weight: 600; } small { font-size: var(--fs-sm); } address { font-style: normal; } hr { border: 0; border-top: 1px solid var(--c-line); margin: 2rem 0; } ::selection { background: var(--c-ink); color: #fff; } /* Skip-Link */ .skip-link { position: fixed; top: 0; left: 0; z-index: 10000; background: var(--c-ink); color: #fff; padding: 0.75rem 1rem; transform: translateY(-120%); transition: transform var(--dur-fast); } .skip-link:focus { transform: translateY(0); } /* Utilities */ [hidden] { display: none !important; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .text-muted { color: var(--c-muted); } /* Kicker – klein, ruhig, ohne Versalien-Geschrei */ .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--f-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 1rem; } .eyebrow::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--c-red); } .eyebrow--light { color: rgba(255,255,255,0.7); } .eyebrow--center { justify-content: center; width: 100%; } .mono { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* Icon-Set (Inline-Sprite, Markenstil: dünne Linie, runde Enden) */ .icon { width: 1.5rem; height: 1.5rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .icon--lg { width: 2rem; height: 2rem; } /* Sektions-Index (Freight-Stil) */ .section-index { display: block; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--c-muted); margin-bottom: 0.9rem; } .section-index::before { content: "("; } .section-index::after { content: ")"; } .section-head--split .section-index { grid-column: 1 / -1; margin-bottom: 0; } .section-head--center { text-align: center; margin-inline: auto; max-width: 44ch; } .section-head--center h2 { margin-inline: auto; } .section-head--center .lead { margin-inline: auto; } /* ---------- Scrollbar im Markenstil ---------- */ html { scrollbar-width: thin; scrollbar-color: var(--c-ink) var(--c-bg); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--c-bg); } ::-webkit-scrollbar-thumb { background: var(--c-ink); border-radius: 999px; border: 3px solid var(--c-bg); } ::-webkit-scrollbar-thumb:hover { background: var(--c-red); } ::-webkit-scrollbar-corner { background: var(--c-bg); } .cookie-modal__dialog, .menu { scrollbar-width: thin; scrollbar-color: rgba(18,19,21,0.35) transparent; } /* Lesefortschritt – dünne Linie am oberen Rand */ .scroll-progress { position: fixed; top: 0; left: 0; z-index: 950; width: 100%; height: 2px; background: transparent; pointer-events: none; } .scroll-progress i { display: block; height: 100%; width: 100%; background: var(--c-red); transform: scaleX(0); transform-origin: left; }