/* Leichte Sprache — shared design tokens (Ocean / V1 Amtsblatt) * * White paper, black ink, ocean blue accent. Zero border-radius anywhere. * Strong horizontal rules are the structural language. Atkinson Hyperlegible * for all UI/body; JetBrains Mono for metadata only. The medio·punkt (·) is * the brand signature — it appears in the wordmark (L·S) and inside * translated compound words (Bundes·tag, Bürger·geld). */ @import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=JetBrains+Mono:wght@400;500;600&display=swap"); :root { /* Light theme is the default. The dark theme lives in the two blocks below; * both resolve off a single [data-theme] attribute on : * (no attribute) → follow the OS via prefers-color-scheme * [data-theme="dark"] → forced dark * [data-theme="light"] → forced light (opts out of the auto-dark block) * Set the attribute from an inline script before paint to avoid FOUC. */ color-scheme: light; /* Surfaces */ --paper: #ffffff; /* primary background */ --off: #eef3f8; /* secondary surface — subbars, actions, callouts */ --canvas: #dbe5ef; /* page background behind the reader frame */ --rule: #d4d4cf; /* soft hairlines (non-structural) */ /* Ink */ --ink: #0c1a2a; /* primary text, masthead, structural rules */ --ink-2: #22364c; /* secondary text */ --ink-3: #5a7491; /* tertiary text, mono metadata */ /* Accent — ocean blue */ --blue: #0369a1; /* primary accent — CTAs, glyphs, badges, bullets, meta */ --blue-deep: #075985; /* hover / pressed */ /* Signals */ --ok: #14532d; --error: #9a1f1f; --error-bg: #fbe9e3; /* Masthead — a permanently dark bar in BOTH themes, so its own foreground * tokens don't flip with --ink/--paper. Only the bar shade lifts in dark. */ --masthead-bg: #0c1a2a; /* the dark bar */ --masthead-fg: #ffffff; /* wordmark, hovered links/icons */ --masthead-fg-dim: rgba(255, 255, 255, 0.7); /* meta, idle links/icons */ --masthead-border: rgba(255, 255, 255, 0.25); /* dividers, link outlines */ /* Dimmed foreground for content sitting on an --ink surface — the sub-label * inside an active segmented-toggle cell (bg --ink, fg --paper). Flips in * dark because the cell inverts to a light chip with dark text. */ --on-ink-dim: rgba(255, 255, 255, 0.7); /* Type */ --font-sans: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* Dark theme — warm-neutral slate, not pure black. Tuned for high reading * contrast (--ink on --paper ≈ 16:1). The palette is repeated for the two * activation paths (auto vs. forced) because a @media block and a plain * selector can't share one rule. Keep the two lists identical. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #0f1722; --off: #18222f; --canvas: #0a0f16; --rule: #2b3744; --ink: #eef3f8; --ink-2: #c2cedb; --ink-3: #8ea3b8; --blue: #5bb1e0; --blue-deep: #8fccec; --ok: #6ee7a8; --error: #f4a89a; --error-bg: #3a1f1b; --masthead-bg: #18222f; --on-ink-dim: rgba(15, 23, 34, 0.62); } } :root[data-theme="dark"] { color-scheme: dark; --paper: #0f1722; --off: #18222f; --canvas: #0a0f16; --rule: #2b3744; --ink: #eef3f8; --ink-2: #c2cedb; --ink-3: #8ea3b8; --blue: #5bb1e0; --blue-deep: #8fccec; --ok: #6ee7a8; --error: #f4a89a; --error-bg: #3a1f1b; --masthead-bg: #18222f; --on-ink-dim: rgba(15, 23, 34, 0.62); } * { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0; } body { font-family: var(--font-sans); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; } .hidden { display: none !important; } /* Brand mark — L·S with the medio·punkt in blue. Always rendered as HTML text. * Default: ink background, white text, blue dot. Size via width/height/font-size * on the instance. */ .ls-mark { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .ls-mark .dot { color: var(--blue); } /* Attribution footer — used on every surface */ .credit { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 16px 0; } .credit .heart { color: var(--blue); font-size: 1.1em; vertical-align: -1px; } .credit a { color: var(--ink-2); text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--blue); } .credit a:hover { color: var(--blue-deep); border-bottom-color: var(--blue-deep); } /* Focus — visible for every interactive element. WCAG AA; this audience needs it bold. */ :where(a, button, input, select, textarea, [role="radio"], [role="button"]):focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }