/* ============================================================ SignalReef — Base: Reset, Fonts, Body, Noise, Focus, Keyframes ============================================================ */ /* Self-hosted fonts (Dateien in /assets/fonts/, ggf. via Google Fonts ersetzt). Fallback: Google Fonts Import erfolgt im jeder Seite, falls fonts/ leer. */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--f-body); font-size: var(--fs-body); background: var(--bg); color: var(--text-2); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } h1, h2, h3, h4 { margin: 0; font-family: var(--f-head); font-weight: 500; } p { margin: 0; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } svg { display: block; } /* — Mono utility — */ .mono { font-family: var(--f-mono); } .label-mono { font-family: var(--f-mono); font-size: var(--fs-mono-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); } /* — Noise-Overlay: tiling feTurbulence über allen Surfaces — */ .noise-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: var(--noise-opacity); mix-blend-mode: var(--noise-blend); background-image: url("../img/noise.svg"); background-repeat: repeat; } /* — Focus: sichtbarer Ring auf ALLEN interaktiven Elementen (a11y) — */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; } /* — Animations — */ @keyframes opulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } } @keyframes oskel { 0%, 100% { opacity: .35; } 50% { opacity: .85; } } .pulse-dot { animation: opulse 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* — Scrollbar (dezent) — */ * { scrollbar-width: thin; scrollbar-color: var(--border-3) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; } /* — Visually hidden (für a11y-Labels) — */ .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; }