/* ============================================================ BASE — Reset, Typografie, Utilities, Rhythmus der Sektionen ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* WICHTIG: hier kein overflow. Ein overflow != visible am Wurzel- element macht dieses zum Scroll-Container, und der fixierte .site-header (layout.css) richtet sich dann nach dessen Breite statt nach der Viewport-Breite — bei horizontalem Überhang auf der Seite wird die Leiste breiter als der Bildschirm und der Burger rutscht rechts aus dem Bild. Beschnitten wird am , siehe unten. */ } body { font-family: var(--font-sans); font-size: 16.5px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Schutz gegen versehentliches Seitwärts-Scrollen (Logo-Marquee, Hero-Foto, Glow-Schatten der benefits-timeline). `clip` und nicht `hidden`: `hidden` würde den zu einem Scroll-Container machen — das killt jedes `position: sticky` in der Seite (Jahresleiste der Timeline, Wrench-Szene, Standorte-Karte). */ overflow-x: clip; /* Platzhalter für den fixierten .site-header (layout.css) */ padding-top: var(--header-h); transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear; } /* Safari < 16 / Firefox < 81 kennen `clip` nicht. Dort greift wieder `hidden` — für den .site-header unkritisch, der ist fixed und hängt nicht am Scroll-Container des . */ @supports not (overflow: clip) { body { overflow-x: hidden; } } @media (min-width: 768px) { body { font-size: 17px; } } ::selection { background: var(--accent); color: #fff; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input { font: inherit; color: inherit; } ul { list-style: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---------- Typografie ---------- */ .display { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.02em; line-height: 0.96; } .serif { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: 0; } h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; } .h1 { font-size: clamp(2.375rem, 5.2vw, 4rem); } .h2 { font-size: clamp(2.125rem, 4vw, 3.25rem); } .h3 { font-size: clamp(1.25rem, 2vw, 1.375rem); } .lead { font-size: 1rem; line-height: 1.6; color: var(--muted); } @media (min-width: 1024px) { .lead { font-size: 1.0625rem; } } /* ---------- Grundgerüst ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } @media (min-width: 1024px) { .container { padding-inline: 32px; } } section[id] { scroll-margin-top: calc(var(--header-h) + 16px); } /* Zwei Rhythmen aus dem Codex-Konzept: laut und leise */ .section--loud { padding-block: var(--pad-loud); } .section--quiet { padding-block: var(--pad-quiet); } @media (min-width: 1024px) { .section--loud { padding-block: 120px; } .section--quiet { padding-block: 88px; } } @media (max-width: 640px) { .section--loud { padding-block: 64px; } .section--quiet { padding-block: 56px; } } .section--alt { background: var(--bg-alt); } .section--plain { background: var(--bg); } .section--edge-top { border-top: 1px solid var(--border); } /* ---------- Utilities ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .eyebrow--solid { background: var(--accent); color: var(--accent-ink); } /* Tintenschwarze Variante — auf heller Karte */ .eyebrow--ink { background: #111; color: #fff; } :root[data-theme='dark'] .eyebrow--ink { background: #fff; color: #111; } .meta-line { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .dot--idle { background: var(--border-strong); } .rule { height: 1px; width: 100%; background: var(--border); border: 0; } .stack > * + * { margin-top: 12px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- Einblenden beim Scrollen ---------- */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } [data-reveal].is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } [data-reveal] { opacity: 1; transform: none; } }