/* ============================================================ base.css — Reset, Grundtypografie, Layout-Primitive Referenziert ausschliesslich semantische Tokens (Schicht 2). ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-weight: 400; color: var(--color-text); background: var(--color-surface-page); line-height: 1.6; overflow-x: hidden; } img, picture, svg { max-width: 100%; display: block; } a { color: var(--color-link); text-decoration: none; } a:hover { color: var(--color-link-hover); } ::selection { background: var(--color-forest-200); } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-text); margin: 0; line-height: 1.1; text-wrap: balance; } p { margin: 0; } button { font-family: inherit; } /* Sichtbarer Tastatur-Fokus (Sicherheits-/Barrierefreiheitspflicht) */ :focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: 2px; } /* Skip-Link fuer Screenreader/Tastatur */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--color-surface-inverse); color: var(--color-text-on-dark); padding: var(--space-3) var(--space-5); border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; color: var(--color-text-on-dark); } /* Nur fuer Screenreader */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===== Layout-Primitive ===== */ .container { max-width: var(--layout-max-width); margin: 0 auto; padding-left: var(--space-content-x); padding-right: var(--space-content-x); width: 100%; } .section { padding-top: var(--space-section-y); padding-bottom: var(--space-section-y); } .section--alt { background: var(--color-surface-alt); } .section--inverse { background: var(--color-surface-inverse); color: var(--color-text-on-dark); } /* ===== Scroll-Reveal (siehe assets/js/components/reveal.js) ===== Nur verstecken, wenn JS aktiv ist (Marker am ) UND Bewegung erlaubt ist. Ohne JS oder mit deaktiviertem JS bleibt jeder Inhalt sofort sichtbar. */ [data-reveal-ready="on"] [data-reveal] { opacity: 0; translate: 0 16px; transition: opacity var(--duration-reveal) var(--ease-out-soft), translate var(--duration-reveal) var(--ease-out-soft); } [data-reveal-ready="on"] [data-reveal="in"] { opacity: 1; translate: 0 0; } /* Staffelung innerhalb einer Gruppe (Karten-Grids, Listen) */ .reveal-group > *:nth-child(1) { transition-delay: 0ms; } .reveal-group > *:nth-child(2) { transition-delay: 60ms; } .reveal-group > *:nth-child(3) { transition-delay: 120ms; } .reveal-group > *:nth-child(4) { transition-delay: 180ms; } .reveal-group > *:nth-child(5) { transition-delay: 240ms; } .reveal-group > *:nth-child(6) { transition-delay: 300ms; } .reveal-group > *:nth-child(n+7) { transition-delay: 340ms; } /* Reduzierte Bewegung respektieren */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } [data-reveal-ready="on"] [data-reveal] { opacity: 1; translate: 0 0; } /* Kein Zoom-Drift, kein pulsierender Scroll-Pfeil, keine Fortschritts-Fuellung */ .hero__slide img, .hero__scroll-hint, .hero__dot::after { animation: none !important; } } /* ===== Responsive Grundraster: Breakpoints 360 / 768 / 1024 / 1440 ===== */ @media (max-width: 1024px) { :root { --space-section-y: var(--space-11); } } @media (max-width: 768px) { :root { --space-section-y: var(--space-10); --space-content-x: var(--space-5); } }