/* ============================================================ Regingada Radar — radar.css (V2) Namespaced Radar-Styles (.radar-*), aufgebaut AUSSCHLIESSLICH auf den Design-Tokens aus site.css (Farben/Typo/Abstaende · Dark-Primary/Ink-Grund). 0 externe Loads, 0 Hardcode (Ausnahme: der dezente Fehlerton der normalerweise nicht gerenderten Grounding-Warnung). Bewusst KEINE generischen Site-Klassen (.wrap/.item/.btn/.glass-card) im Radar-Markup wiederverwendet — Kollisionsschutz. Ladereihenfolge im : funk-fonts -> funk-mono -> site.css -> radar.css. radar.css laedt ZULETZT und darf Site-Defaults fuer diese Subseite gezielt ueberschreiben. V2-Erweiterungen: Stats-Band-Hero + dekoratives Radar-Emblem (Opacity-Puls, keine Rotation), Monats-Timeline mit vertikaler Achse, Filter-Chips + Suche, prozedurale Status-Tags (neutrale Hairline-Palette, KEINE Ampel), Scroll- Reveal (nur mit .radar-reveal-ready + reduced-motion-sicher), Print. ============================================================ */ /* Seiten-Grund = Ink (site.css :root-Default = Dark-Kontext), Text weich-creme. */ body{ background:var(--bg); color:var(--tx-body); font-family:var(--font-sans); } .radar-wrap{ max-width:820px; margin:0 auto; padding:2.4rem 24px 4.5rem; } /* ---------- Kopf / Hero mit Stats-Band + Emblem ---------- */ .radar-top{ border-bottom:1px solid var(--hairline); padding-bottom:1.4rem; margin-bottom:1.6rem; } .radar-hero{ display:grid; grid-template-columns:1fr auto; gap:1.4rem; align-items:center; } .radar-hero-text{min-width:0} .radar-top h1{ font-family:var(--font-serif); font-size:clamp(1.7rem,3.4vw,2.3rem); line-height:1.12; letter-spacing:-.01em; color:var(--tx); margin:0 0 .3rem; } .radar-intro{ color:var(--mut); font-size:1.02rem; line-height:1.55; margin:.3rem 0 0; max-width:640px; text-wrap:pretty; } /* Stats-Band — reine Zahlen aus den Daten (keine Coverage-Behauptung). */ .radar-stats{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.45rem .7rem; margin-top:1.05rem; font-family:var(--font-mono); font-size:.82rem; color:var(--mut); } .radar-stats strong{ font-family:var(--font-serif); font-size:1.2rem; font-weight:700; color:var(--tx); margin-right:.15rem; } .radar-stat-sep{color:var(--hairline)} /* Dekoratives Radar-Emblem — 3 Hairline-Ringe + Rand-Ring + regime-farbige Punkte. Einzige Bewegung = langsamer Opacity-Puls (>=8s, Delta <=0.15); KEINE Rotation. Unter reduced-motion komplett statisch. */ .radar-emblem{ width:clamp(112px,17vw,168px); height:auto; flex:none; } .radar-ring{ fill:none; stroke:var(--hairline); stroke-width:1; } .radar-ring--edge{opacity:.55} .radar-dot{fill:var(--blue)} .radar-dot--ai-act, .radar-dot--dma{fill:var(--neon)} .radar-dot--gdpr{fill:var(--blue);opacity:.65} .radar-dot--nis2{fill:var(--mut)} .radar-emblem-dots{animation:radar-pulse 9s ease-in-out infinite} @keyframes radar-pulse{ 0%,100%{opacity:.88} 50%{opacity:1} } @media(prefers-reduced-motion:reduce){ .radar-emblem-dots{animation:none} } /* Sprachumschalter — Gruppe der jeweils zwei ANDEREN Sprachen (Mono-Kicker- Chips oben rechts, Blau = AA auf Ink). Container =