/* ============================================================ Newsroom — Design System Theme "Folio" (Direction C) · Light + Dark · CSS-Variablen ============================================================ Inhaltsverzeichnis ------------------ 1. Tokens — Design-Variablen (Farben, Fonts, Radius) 2. Reset & Base — html/body, Überschriften-Skala, Links 3. Typografie — die zwoelf Textsorten, nr-mono 4. Layout — nr-masthead-bar, nr-masthead-link, Auth-Seiten 5. Surfaces — nr-card, nr-panel 6. Alerts — nr-alert · ok / warn / neutral 7. Komponenten — nr-btn, Formularfelder, nr-chip 8. Utilities — Focus-Ring, Scrollbar, Theme-Toggle 9. Editionsinhalt — edition-content, ressort-header Verwendung ---------- explizit hell explizit dunkel Kein data-theme folgt Browser-Präferenz via @media ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* ============================================================ 1. TOKENS ============================================================ */ /* --- Light (Standard) --- */ :root { --nr-font-display: 'Plus Jakarta Sans', system-ui, sans-serif; --nr-font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --nr-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Die Leiter der zwoelf Textsorten, angehaengt an EINEN Regler. `--nr-skala` zieht die ganze Seite groesser oder kleiner; die sechs Stufen behalten dabei ihr Verhaeltnis zueinander. Fuer den Handy-Satz aendert sich deshalb nur eine einzige Zahl (s. unten) und nicht sechs. `max(12px, ...)` auf der kleinsten Stufe: Joergs Untergrenze. Sie haelt auch dann, wenn jemand die Skala weit herunterdreht. */ --nr-skala: 1; --nr-fs1: calc(39px * var(--nr-skala)); /* nr-title */ --nr-fs2: calc(29px * var(--nr-skala)); /* nr-metric */ --nr-fs3: calc(21px * var(--nr-skala)); /* nr-heading */ --nr-fs4: calc(17px * var(--nr-skala)); /* nr-body */ --nr-fs5: calc(15px * var(--nr-skala)); /* nr-value, nr-source, nr-message, nr-action */ --nr-fs6: max(12px, calc(13px * var(--nr-skala))); /* nr-section, nr-label, nr-note, nr-status */ /* Flächen */ --nr-paper: #F5F1EA; /* Seitengrund — warmes Cremeweiß */ --nr-paper-2: #ECE6DA; /* Leicht abgesetzte Fläche (Panels, Inputs) */ /* Linien */ --nr-line: rgba(40, 30, 18, 0.12); --nr-line-strong: rgba(40, 30, 18, 0.26); /* Schrift */ --nr-ink: #1C1810; --nr-ink-soft: #4E483A; --nr-ink-mute: #8E8773; /* Akzent — Salbeigrün (austauschbar per Tenant) */ --nr-accent: #5B7A4F; --nr-accent-soft: #DCE3D2; /* Warn */ --nr-warn: #A04A1E; --nr-warn-bg: #FEF0E6; /* Form-Inputs */ --nr-input-bg: #FFFFFF; --nr-radius: 10px; /* Masthead — warmes Dunkelbraun, nicht schwarz */ --nr-masthead: #2C2819; --nr-masthead-fg: #F0E9DC; /* Fehler (#370: vorher Phantom-Token, Fallback #e53e3e in profile.html griff immer) */ --nr-error: #C0392B; /* Stern-Gold fuer "bevorzugte Quelle" (#548, Joerg 28.08.2026): gelb wie die ueblichen Sternchen-Markierungen im Web. Die Tinte darauf bleibt in beiden Themes dunkel, weil die Gold-Flaeche hell bleibt. Beide Layouts lesen diese Tokens (Zeitungssatz via --v5-stern). */ --nr-stern: #C9A227; --nr-stern-tinte: #16130E; } /* --- Dark (Browser-Präferenz) --- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nr-paper: #15130E; --nr-paper-2: #1F1C15; --nr-line: rgba(240, 230, 210, 0.10); --nr-line-strong: rgba(240, 230, 210, 0.24); --nr-ink: #EFEAD9; --nr-ink-soft: #B0A98F; --nr-ink-mute: #6E6852; --nr-accent: #A7C798; --nr-accent-soft: #28301F; --nr-warn: #E07040; --nr-warn-bg: rgba(160, 74, 30, 0.18); --nr-input-bg: #262115; --nr-masthead: #0D0B08; --nr-masthead-fg: #EAE3D0; --nr-error: #FF6B5B; --nr-stern: #D1B24E; } } /* --- Dark (Explizit via data-theme="dark") --- */ :root[data-theme="dark"] { --nr-paper: #15130E; --nr-paper-2: #1F1C15; --nr-line: rgba(240, 230, 210, 0.10); --nr-line-strong: rgba(240, 230, 210, 0.24); --nr-ink: #EFEAD9; --nr-ink-soft: #B0A98F; --nr-ink-mute: #6E6852; --nr-accent: #A7C798; --nr-accent-soft: #28301F; --nr-warn: #E07040; --nr-warn-bg: rgba(160, 74, 30, 0.18); --nr-input-bg: #262115; --nr-masthead: #0D0B08; --nr-masthead-fg: #EAE3D0; --nr-error: #FF6B5B; --nr-stern: #D1B24E; } /* Theme-abhaengige Bilder (#575, Broetchen-Grafiken /subscription): zwei Varianten je Motiv (hell/dunkel), Umschaltung ueber dieselbe Theme-Mechanik wie die Farb-Tokens oben, kein Sonderweg. */ .nr-theme-bild-dunkel { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nr-theme-bild-hell { display: none; } :root:not([data-theme="light"]) .nr-theme-bild-dunkel { display: inline; } } :root[data-theme="dark"] .nr-theme-bild-hell { display: none; } :root[data-theme="dark"] .nr-theme-bild-dunkel { display: inline; } /* ============================================================ 2. RESET & BASE ============================================================ */ html { font-size: 19px; } html, body { margin: 0; padding: 0; overflow-x: hidden; background: var(--nr-paper); color: var(--nr-ink); } body { font-family: var(--nr-font-body); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; line-height: 1.45; letter-spacing: -0.005em; } /* Überschriften-Skala — Gewicht 500 für ruhigen Charakter */ h1, h2, h3, h4 { font-family: var(--nr-font-display); font-weight: 500; letter-spacing: -0.022em; line-height: 1.1; margin: 0; color: var(--nr-ink); } h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } h4 { font-size: 0.95rem; } p { margin: 0; } button { font: inherit; cursor: pointer; } /* FAQ-Antworten (#435): HTML aus faq_entries.antwort — die globalen Resets (p ohne Margin, Tailwind-Preflight nullt Listenpunkte) machen mehrteilige Antworten unlesbar (Absätze kleben,