/* css/base.css Base styles for steffenoehme.de Loads after tokens.css in cascade (order mandatory in ) Contains: @font-face declarations, CSS reset, html/body defaults, skip-link */ /* -- Self-hosted fonts (@font-face) ---------------------------------------- */ /* No external requests. DSGVO-compliant. (LG Muenchen 2022) */ /* Paths are root-relative: resolves correctly from any subfolder page. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/montserrat-regular.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/montserrat-bold.woff2') format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/dm-sans-regular.woff2') format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/dm-sans-semibold.woff2') format('woff2'); } @font-face { font-family: 'Kalam'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/kalam-bold.woff2') format('woff2'); } /* -- CSS Reset -------------------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* -- HTML / Body defaults --------------------------------------------------- */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--color-surface); color: var(--color-text-body); font-family: var(--font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* Prevent horizontal scroll from any overflowing element */ } /* -- Skip-to-main-content link (accessibility) ------------------------------ */ /* Visually hidden, appears on keyboard focus. Required for WCAG 2.1. */ .skip-link { position: absolute; top: -100%; left: 0; background: var(--color-accent); color: var(--color-text-dark); padding: var(--space-2) var(--space-3); z-index: var(--z-tooltip); font-family: var(--font-ui); font-weight: 600; font-size: 15px; text-decoration: none; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { top: 0; } /* -- Images ----------------------------------------------------------------- */ img { display: block; max-width: 100%; height: auto; } /* -- Links ------------------------------------------------------------------ */ a { color: inherit; text-decoration: none; } /* === prefers-reduced-motion — global overrides (A11Y-03) === */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }