/* ========================================================================== House Works · Reset, Grundtypografie, Hilfsklassen ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* Gesetzt am , weil die Sperre schon vor dem ersten Bild greifen muss – gibt es zu diesem Zeitpunkt noch nicht. */ html.is-loading { overflow: hidden; } body { margin: 0; background: var(--navy); color: var(--on-navy); font-family: var(--font-text); font-size: var(--text-base); line-height: var(--leading-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } /* Der Fokusrahmen wechselt mit der Fläche: Gold trägt nur auf Blau genug Kontrast, auf Creme übernimmt Nachtblau. */ :focus-visible { outline: 2px solid var(--gold-lift); outline-offset: 3px; border-radius: 2px; } .panel-creme :focus-visible, .legal :focus-visible { outline-color: var(--navy); } ::selection { background: var(--gold); color: var(--navy); } /* --- Typografische Rollen ------------------------------------------------ Eine Familie für alles. Überschriften unterscheiden sich über Gewicht und Größe, nicht über eine zweite Schrift – so schreibt es das Designkonzept vor und so bleibt es auch bei 60-jährigen Augen lesbar. */ .eyebrow { font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); line-height: 1.4; } .display { font-weight: 700; line-height: var(--leading-display); letter-spacing: -0.018em; text-wrap: balance; } .h2 { font-size: var(--text-h2); } .h3 { font-size: var(--text-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.012em; } .lead { font-size: var(--text-lead); line-height: 1.5; text-wrap: pretty; } .measure { max-width: 44ch; } .measure-wide { max-width: 58ch; } /* --- Flächen -------------------------------------------------------------- */ .section { position: relative; padding-block: var(--space-section); } .shell { width: 100%; max-width: min(100% - var(--gutter) * 2, var(--shell)); margin-inline: auto; } .panel-navy { background: var(--navy); color: var(--on-navy); } .panel-steel { background: var(--steel); color: var(--on-navy); } .panel-creme { background: var(--creme); color: var(--on-creme); } /* Schräge Kante zwischen zwei Flächen – dasselbe Motiv wie im Flyer. */ .panel-creme.has-cut { clip-path: polygon(0 var(--cut-depth, 3.5rem), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--cut-depth, 3.5rem) * -1); padding-top: calc(var(--space-section) + var(--cut-depth, 3.5rem)); } .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: 0.75rem 1.25rem; background: var(--gold); color: var(--navy); font-weight: 700; transition: top var(--dur-fast) var(--ease-out); } .skip-link:focus { top: 1rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Feines Korn – nimmt den großen Navy-Flächen die digitale Glätte. Bewusst ohne mix-blend-mode: eine bildschirmgroße Mischebene kostet auf schwächeren Geräten spürbar Bildrate, der Effekt ist derselbe. */ .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.055; background-image: var(--grain-src); background-size: 180px 180px; }