/* ============================================================================ promptinjections.de — Brand-Tokens (Single Source of Truth) Stand: 2026-08-03 · Brand-Keeper · gehört zu BRAND.md Farbraum: OKLCH. Alle Werte liegen INNERHALB des sRGB-Gamuts — der Browser muss nichts nachmappen, die hier notierten Hex-Fallbacks sind exakt das, was gerendert wird. Kontrast-Nachweis: kontrast-nachweis.txt (43/43 bestanden), reproduzierbar mit tools/contrast.py. HARD-RULES für alle Personas, die diese Tokens benutzen: 1. --ink-soft ist NUR auf --bg und --surface erlaubt. Nie auf getönten Flächen (--tint-*), nie auf Bildern, nie auf --accent. 2. Text auf Bildern: immer volle Deckkraft + Scrim (--scrim-*). Kein rgba()-Text, kein opacity-Text über Fotos. 3. --accent (Bernstein) ist eine FLÄCHEN-/Strich-Farbe. Als Text nur --accent-ink verwenden. 4. Rot (--sev-crit) ist für echte Severity reserviert, nicht für Marke, Buttons oder Deko. Wer Rot inflationär nutzt, entwertet die Warnung. ========================================================================== */ :root { color-scheme: light dark; /* ---------- FARBE · LIGHT (Default) ------------------------------------- Konzept „Kaltes Archiv + Signal": kühl-neutrale Blaugrau-Basis (kein warmes Cream, kein Neon), ein tiefes Petrol als einzige Markenfarbe, Bernstein als einziges Signal. ------------------------------------------ */ /* Flächen */ --bg: oklch(0.985 0.004 250); /* #f8fafd — Seiten-Grund, kühl */ --surface: oklch(1 0 250); /* #ffffff — Karten, Artikel */ --surface-sunken:oklch(0.955 0.007 250); /* #edf1f5 — Code/Payload-Blocks */ --border: oklch(0.900 0.010 250); /* #d9dfe5 — Trennlinien, Rahmen */ --border-strong: oklch(0.800 0.014 250); /* #b3bcc6 — Tabellen, Fokus-Ring */ /* Text */ --ink: oklch(0.220 0.030 250); /* #101c28 — Fließtext, Headlines */ --ink-soft: oklch(0.420 0.024 250); /* #434e5a — Meta, Datum, Captions */ /* Marke */ --primary: oklch(0.450 0.114 245); /* #005990 — Links, Marke, Buttons */ --primary-strong:oklch(0.360 0.091 245); /* #004069 — Hover, Text auf Tint */ /* Signal */ --accent: oklch(0.760 0.145 68); /* #ed9d3a — Fläche/Strich, NIE Text */ --accent-ink: oklch(0.430 0.099 62); /* #754100 — Bernstein als Text */ /* Severity (Risiko-Badges auf Technik-/Vorfall-Seiten) */ --sev-crit: oklch(0.470 0.185 25); /* #ab0c1d — kritisch */ --sev-high: oklch(0.460 0.126 48); /* #8e3c00 — hoch */ --sev-mid: oklch(0.460 0.094 85); /* #705301 — mittel */ --sev-low: oklch(0.440 0.088 165); /* #0d6146 — niedrig */ /* Getönte Flächen (Callouts). Text darauf: --ink oder --primary-strong. */ --tint-primary: oklch(0.955 0.020 245); /* #e6f2fd — Info / „Kurz gesagt" */ --tint-accent: oklch(0.960 0.030 75); /* #feefdc — Hinweis / Beispiel */ --tint-crit: oklch(0.958 0.020 25); /* #ffecea — Warnung / Vorfall */ /* Scrim für Text auf Bildern (Pflicht, siehe HARD-RULE 2) */ --scrim-dark: linear-gradient(to top, oklch(0.18 0.02 250 / 0.88) 0%, oklch(0.18 0.02 250 / 0.55) 45%, oklch(0.18 0.02 250 / 0) 100%); --scrim-shadow: 0 1px 2px oklch(0.18 0.02 250 / 0.85), 0 2px 12px oklch(0.18 0.02 250 / 0.55); /* Fokus — sichtbar, nicht dekorativ */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary); /* ---------- TYPOGRAFIE -------------------------------------------------- 3 Familien, alle OFL-lizenziert, alle self-hostbar als Variable Font (je eine .woff2-Datei pro Familie, font-display: swap, subset latin + latin-ext). 0 externe Requests — Fonts liegen lokal. -------------------- */ /* Display: Source Serif 4 — Fachpublikations-Autorität, klarer Bruch zum Sans-only-SaaS-Look der Wettbewerber in der DE-SERP. */ --font-display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; /* Body/UI: Public Sans — institutionell-neutral (US Web Design System), bewusst kein Startup-Grotesk. Klare Umlaut-Punzen bei kleinen Größen. */ --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Mono: JetBrains Mono — Pflicht für Payloads. Fachlich begründet: eindeutige 0/O, 1/l/I-Glyphen. Ein Portal über Prompt Injection muss Homoglyphen und Zero-Width-Zeichen sichtbar machen können. */ --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; /* Fluid-Skala, Basis 375px → 1280px. Faktor ~1.25 (Major Third gedämpft) — ruhig genug für Long-Form, klar genug für Hierarchie. */ --text-xs: 0.8125rem; /* 13px — Badges, Meta */ --text-sm: 0.875rem; /* 14px — Captions */ --text-base: clamp(1.0625rem, 1.0rem + 0.28vw, 1.1875rem);/* 17→19px — Fließtext */ --text-lg: clamp(1.25rem, 1.16rem + 0.38vw, 1.4375rem);/* 20→23px — Lead */ --text-xl: clamp(1.5rem, 1.36rem + 0.60vw, 1.875rem); /* 24→30px — h3 */ --text-2xl: clamp(1.875rem, 1.66rem + 0.90vw, 2.5rem); /* 30→40px — h2 */ --text-3xl: clamp(2.25rem, 1.90rem + 1.50vw, 3.25rem); /* 36→52px — h1 */ --text-4xl: clamp(2.75rem, 2.20rem + 2.30vw, 4rem); /* 44→64px — Hero */ --leading-tight: 1.15; /* Headlines ab --text-2xl */ --leading-snug: 1.35; /* h3, Lead */ --leading-body: 1.65; /* Fließtext — Long-Form braucht Luft */ --leading-mono: 1.55; /* Code-Blocks */ --tracking-tight: -0.02em; /* große Display-Größen */ --tracking-normal: 0; --tracking-wide: 0.06em; /* Kapitälchen-Labels, Badges */ --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* Lesebreite: Long-Form-Fließtext nie über 72ch. */ --measure: 68ch; --measure-wide: 84ch; /* ---------- SPACING · 4px-Basis ---------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem); --container: 76rem; /* ---------- RADIUS · bewusst knapp ------------------------------------- Technisch-präzise Anmutung. Keine Pill-Buttons, keine 24px-Blobs. */ --radius-xs: 2px; /* Inline-Code, Badges */ --radius-sm: 4px; /* Buttons, Inputs */ --radius-md: 8px; /* Karten, Callouts */ --radius-lg: 12px; /* Große Panels, Signet */ --radius-full: 999px; /* NUR Avatare/Punkte — nie für Buttons */ /* ---------- ELEVATION · flach ------------------------------------------ Autorität kommt aus Struktur und Linien, nicht aus Schlagschatten. */ --shadow-sm: 0 1px 2px oklch(0.22 0.03 250 / 0.06); --shadow-md: 0 2px 4px oklch(0.22 0.03 250 / 0.06), 0 8px 24px oklch(0.22 0.03 250 / 0.07); /* ---------- MOTION · zurückhaltend ------------------------------------ */ --ease: cubic-bezier(0.2, 0, 0.13, 1); --dur-fast: 120ms; --dur-base: 200ms; } /* ---------- FARBE · DARK --------------------------------------------------- Kein invertiertes Light, sondern eigene Werte. Reines Schwarz vermieden (Halation bei Mono-Text), reines Weiß vermieden (Blendung bei Long-Form). Aktivierung: oder Systempräferenz. ------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: oklch(0.190 0.020 250); /* #0d151c */ --surface: oklch(0.235 0.022 250); /* #161f28 */ --surface-sunken:oklch(0.155 0.018 250); /* #070d14 */ --border: oklch(0.330 0.022 250); /* #2d3640 */ --border-strong: oklch(0.430 0.024 250); /* #47525e */ --ink: oklch(0.950 0.008 250); /* #ebeff4 */ --ink-soft: oklch(0.780 0.016 250); /* #b0b8c1 */ --primary: oklch(0.780 0.100 240); /* #79c0f1 */ --primary-strong:oklch(0.870 0.071 240); /* #aadbff */ --accent: oklch(0.830 0.130 72); /* #fbb961 */ --accent-ink: oklch(0.830 0.130 72); /* im Dark ist Bernstein textfähig */ --sev-crit: oklch(0.740 0.150 25); /* #fb817a */ --sev-high: oklch(0.790 0.130 55); /* #faa365 */ --sev-mid: oklch(0.850 0.110 90); /* #eacb76 */ --sev-low: oklch(0.800 0.100 165); /* #7cd2ae */ --tint-primary: oklch(0.280 0.040 245); /* #172b3b */ --tint-accent: oklch(0.290 0.045 72); /* #392710 */ --tint-crit: oklch(0.285 0.050 25); /* #40201d */ --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4); --shadow-md: 0 2px 4px oklch(0 0 0 / 0.4), 0 8px 24px oklch(0 0 0 / 0.35); } } /* Manueller Umschalter — identische Werte, höhere Spezifität. */ :root[data-theme="dark"] { --bg: oklch(0.190 0.020 250); --surface: oklch(0.235 0.022 250); --surface-sunken:oklch(0.155 0.018 250); --border: oklch(0.330 0.022 250); --border-strong: oklch(0.430 0.024 250); --ink: oklch(0.950 0.008 250); --ink-soft: oklch(0.780 0.016 250); --primary: oklch(0.780 0.100 240); --primary-strong:oklch(0.870 0.071 240); --accent: oklch(0.830 0.130 72); --accent-ink: oklch(0.830 0.130 72); --sev-crit: oklch(0.740 0.150 25); --sev-high: oklch(0.790 0.130 55); --sev-mid: oklch(0.850 0.110 90); --sev-low: oklch(0.800 0.100 165); --tint-primary: oklch(0.280 0.040 245); --tint-accent: oklch(0.290 0.045 72); --tint-crit: oklch(0.285 0.050 25); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4); --shadow-md: 0 2px 4px oklch(0 0 0 / 0.4), 0 8px 24px oklch(0 0 0 / 0.35); } /* ============================================================================ BASIS-ANWENDUNG — minimal, damit Templates nicht jedes Mal neu erfinden ========================================================================== */ body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); font-weight: var(--weight-regular); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); font-weight: var(--weight-semi); } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); line-height: var(--leading-snug); } p { max-width: var(--measure); text-wrap: pretty; } a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--primary-strong); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); } code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.9375em; } pre { background: var(--surface-sunken); color: var(--ink); /* voller Kontrast — kein muted Code-Text */ border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-4); line-height: var(--leading-mono); overflow-x: auto; } /* Callouts — Text immer --ink, nie --ink-soft (HARD-RULE 1) */ .callout { border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); color: var(--ink); border-left: 3px solid; } .callout--info { background: var(--tint-primary); border-left-color: var(--primary); } .callout--hint { background: var(--tint-accent); border-left-color: var(--accent); } .callout--warn { background: var(--tint-crit); border-left-color: var(--sev-crit); } /* Severity-Badges — kleine Labels, deshalb hoher Kontrast + Textlabel, nie Farbe allein als Träger der Information (WCAG 1.4.1). */ .severity { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semi); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); color: #fff; } .severity--crit { background: var(--sev-crit); } .severity--high { background: var(--sev-high); } .severity--mid { background: var(--sev-mid); } .severity--low { background: var(--sev-low); } /* Text auf Bildern — nur so, nie ohne Scrim */ .on-image { position: relative; color: #fff; text-shadow: var(--scrim-shadow); } .on-image::before { content: ""; position: absolute; inset: 0; background: var(--scrim-dark); pointer-events: none; } .on-image > * { position: relative; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }