/* Design-System "Aktien für Einsteiger" — Sprint 2, Track B (design-system-frontend). Grundlage: docs/concept/04-independent-design-ux-concept.md (§5 Farben, §6 Typo, §9/§13 Tokens, §10 Boxen/Register, §11 Kopf/Footer, §14/§15 Zustände/A11y) sowie docs/concept/04c-startseite-entwurf-editorial-broadsheet.md (Editorial-Broadsheet) und D-123 (site-weiter Standard: Haarlinien/Register statt Karten, kompakter Serifen-Kopf auf Unterseiten, editorial-flache Lernbausteine mit erhaltener Signalwirkung bei Risiko/Warnung/Disclaimer). Dark Mode (F-26, D-148, Sprint 12 WP-1): seit Sprint 12 umgesetzt. Grundfall ist die automatische Übernahme von "prefers-color-scheme" (D-104-Vorbereitung "Tokens sind dark-mode-fähig" eingelöst); zusätzlich übersteuert ein manueller Umschalter (assets/js/site.js + kleines Inline-Skript in base.njk , FOUC-Vermeidung) per "data-theme" auf in BEIDE Richtungen. Details/Tokenwerte/Kontrastpaare: Abschnitt 23 "Dark Mode". `color-scheme` wird je Modus mitgesetzt (verhindert eine zusätzliche, ungewollte Browser-Auto-Invertierung, 04 §12). Inhaltsverzeichnis: 1. Design-Tokens (:root) 2. Basis-Reset & Grundgerüst (html/body, Canvas/Papier-Schale) 3. Utilities (sr-only, Skip-Link, Fokus, Container) 4. Typografie (Überschriften, Fließtext, Links, Listen) 5. Buttons 6. Tabellen 7. Lernbausteine (Box-System, D-123 editorial-flach) 8. Autorenbox 9. Register-/Haarlinien-Komponente (D-123) 10. Navigation & Kopfbereich (Desktop + mobil) — inkl. Dark-Mode-Umschalter-Optik 11. Breadcrumbs 12. Footer (hell, 04 §11.7) 13. Artikel-Layout (Meta, Lernpfad-Hinweis, Voraussetzungen-Kasten, TOC, Blockquote) 14. Artikel-Aktionen (Teilen/Feedback, .js-only) + Lernpfad-Weiter 15. Anzeigen-Platzhalter (Optik, Sprint-3 Track A) 16. Illustrationen (Grundset, Sprint 3 Track A4) 17. Startseite S1 (Hero, Themen-Register, Etappen, Werkzeuge/Vertrauen — 04c) 18. Pagefind-Theming (Such-Seiten-Shell) 19. Glossar-Shell (Alphabet-Navigation/-Filter, Definitionsliste — Filter Sprint 13, WP-2) 20. Bewegung (prefers-reduced-motion) 21. Design-Vorschau (interne Abnahmeseite, kein Website-Baustein) 22. Werkzeuge (Rechner, Checkliste, Sortier-Tabelle, Speicher-Opt-in — Sprint 4, Track T; Quiz — Sprint 12, WP-2) 23. Dark Mode (Token-Overrides, F-26/D-148, Sprint 12 WP-1) 24. Druck-CSS (bleibt Light, unabhängig vom Dark-Mode-Zustand) 25. Glossar-Tooltip (Popover für automatisch verlinkte Begriffe — Sprint 13, WP-2) */ /* ========================================================================== 1. Design-Tokens (04 §13 — kanonische Quelle für Gestaltungswerte) ========================================================================== */ :root { /* Licht-Grundwerte (immer aktiv, keine Media-Bedingung) — zugleich der garantierte Druck-Fallback (Sektion 24) und die Basis, die der Dark-Mode-Grundfall (@media screen and (prefers-color-scheme: dark), Sektion 23) auf Bildschirmen überschreibt. "color-scheme: light" hier verhindert eine ungewollte Browser- Auto-Invertierung, solange kein Dark-Mode-Zweig greift (04 §12). */ color-scheme: light; /* --- 13.1 Farben ---------------------------------------------------- */ --color-primary: #1B4965; --color-primary-dark: #123950; --color-primary-light: #E8F1F5; --color-secondary-surface: #F3EEE7; --color-secondary-deco: #BFD7E4; --color-accent: #8C4B10; /* Hinweis: --color-accent-bright (#E9A24B, 04b/D-120) ist mit D-121/D-123 NICHT Teil des gewählten Editorial-Broadsheet-Standards und wird hier bewusst nicht definiert (nur in 04b als geprüfte Alternative dokumentiert). */ --color-info: #175E88; --color-info-surface: #E7F1F8; --color-success: #1E7A46; --color-success-text: #14532D; --color-success-surface: #E6F4EA; --color-warning: #7A5200; --color-warning-surface: #FFF4DC; --color-danger: #A62828; --color-danger-text: #8F1D1D; --color-danger-surface: #FCEBEA; --color-text: #1F2933; --color-text-muted: #52606D; --color-text-subtle: #7B8794; --color-border: #D3DCE3; --color-surface: #F5F7FA; --color-bg: #FBF9F6; --color-bg-elevated: #FFFFFF; --color-canvas: #E7E3DC; /* D-122: Fläche außerhalb des Inhaltscontainers, site-weit */ --color-focus: #1B4965; /* auf dunklen Flächen wird --color-bg-elevated (#FFFFFF) verwendet, kein Zusatz-Token nötig */ /* --- 13.2 Typografie -------------------------------------------------- */ /* Self-Hosting umgesetzt in Track C (P-20/P-11, @font-face-Regeln siehe Block unter Abschnitt 1). Fallback-Stacks bleiben so robust, dass die Seite auch bei einem Ladefehler der woff2-Dateien sofort sinnvoll rendert. */ --font-family-base: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-sans: var(--font-family-base); /* Alias, siehe Sprint-2-Auftrag Track B */ --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; /* D-121: site-weit für Wortmarke, H1, H2 — nie H3/H4/Fließtext/Labels */ --font-size-sm: 0.875rem; --font-size-base: clamp(1rem, 0.96rem + 0.25vw, 1.125rem); --font-size-lead: clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem); --font-size-h4: 1.125rem; --font-size-h3: clamp(1.25rem, 1.19rem + 0.3vw, 1.375rem); --font-size-h2: clamp(1.5rem, 1.39rem + 0.55vw, 1.75rem); --font-size-h1: clamp(1.875rem, 1.6rem + 1.35vw, 2.5rem); --line-height-body: 1.65; --line-height-heading: 1.25; --line-height-tight: 1.4; --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 900; /* ausschließlich H1/Wortmarke, siehe Abschnitt 4/10 — im Editorial-Broadsheet-Standard (04c) aktuell nicht angewandt (dort Gewicht 700), aber als Token verfügbar (D-118) */ --content-max: 46rem; /* Lesespalte, ≈ 70 Zeichen */ --container-max: 72rem; /* weiter Container: Hubs, Startseite, Kopf/Footer */ /* --- 13.3 Spacing ------------------------------------------------------ */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; /* --- 13.4 Radius und Schatten ------------------------------------------ */ --radius-s: 0.25rem; /* Buttons, Eingabefelder — 04c/D-123: Buttons bleiben eckig */ --radius-m: 0.5rem; /* Karten, Boxen */ --radius-l: 1rem; /* aus 04a/D-118, bleibt verfügbar (aktuell nicht im gewählten Standard genutzt) */ --radius-full: 999px; /* Pill-Form/Kreis, z. B. Autorenbox-Avatar */ --shadow-s: 0 1px 3px rgb(31 41 51 / 0.08); --shadow-m: 0 4px 12px rgb(31 41 51 / 0.12); /* --- 13.6 Bewegung ------------------------------------------------------ */ --duration-fast: 120ms; --duration-base: 200ms; --easing-standard: ease-out; } /* @font-face: Track C (P-20/P-11) — Source Sans 3 + Source Serif 4, self-hosted (SIL OFL 1.1, nie Google-Fonts-CDN, DSGVO/04 §6.1, P-10). Bezug: npm-Pakete @fontsource/source-sans-3@5.3.0 / @fontsource/source-serif-4@5.3.0 (identische Dateien wie die offiziellen Adobe-Fonts-Releases, siehe docs/redaktion/lizenzregister.md §1.1/§1.2). Nur die tatsächlich benötigten statischen Schnitte 400/600/700 (normal, kein Italic, kein Variable Font) im "latin"-Subset — dieses Subset deckt den Unicode-Bereich U+0000–00FF (deutsche Umlaute/ß) und U+20AC (Euro-Zeichen) vollständig ab, daher kein zusätzliches latin-ext nötig. Dateien liegen unter src/assets/fonts/ (Lizenztexte: OFL-source-sans-3.txt / OFL-source-serif-4.txt), werden von scripts/fingerprint-assets.js gehasht; die url()-Referenzen unten verwenden bewusst die unfingerprinteten Namen, das Skript schreibt sie im Post-Build-Schritt auf die gehashten Dateinamen um. Performance-Budget-Hinweis (D-061): Mit dieser Ergänzung lädt jede Seite site-weit ZWEI Font-Familien (bis zu 3 Schnitte je Familie). Gegenmaßnahmen bereits umgesetzt: nur genutzte Schnitte (keine 200/300/500/800/900, kein Italic), Latin-Subsetting (kein Cyrillic/Greek/Vietnamese/Latin-Ext), `font-display: swap` gegen Render-Blocking. Core-Web-Vitals-Nachmessung mit beiden Familien ist für Sprint 10 vorgesehen (07 CWV-Budget: LCP ≤ 2,5 s auch mit aktiver Werbung). */ @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-400-normal.0f73f35e08.woff2") format("woff2"); } @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-600-normal.14527d193b.woff2") format("woff2"); } @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-700-normal.ae35266f2a.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-400-normal.02194deb92.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-600-normal.f2b7e1cf1d.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-700-normal.7691c51bc2.woff2") format("woff2"); } /* 13.5 Breakpoints (Referenzwerte — Custom Properties sind in @media nicht nutzbar, 04 §13.5). In diesem Stylesheet als Kommentarkonvention konsistent verwendet: --bp-sm: 30rem (480px) --bp-md: 48rem (768px) — hier als Grenze Mobil-Overlay/Desktop-Nav genutzt --bp-lg: 64rem (1024px) --bp-xl: 80rem (1280px) */ /* ========================================================================== 2. Basis-Reset & Grundgerüst ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { /* Root-Schriftgröße bleibt unangetastet (04 §15.2) — Nutzer-Zoom muss wirken */ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-body); color: var(--color-text); background: var(--color-canvas); /* D-122: Fläche außerhalb des Inhaltscontainers */ padding: var(--space-xs); } @media (min-width: 48rem) { body { padding: var(--space-l); } } @media (min-width: 64rem) { body { padding: var(--space-2xl) var(--space-l); } } /* Inhaltscontainer ("Blatt auf dem Tisch", 04 §7.2/D-122): Kopf, Inhalt und Footer stehen gemeinsam auf einer minimal helleren Papierfläche innerhalb der Canvas-Fläche des . */ .site-shell { max-width: var(--container-max); margin-inline: auto; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-m); box-shadow: var(--shadow-m); overflow: clip; } /* ========================================================================== 3. Utilities ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Skip-Link: sichtbar bei Tastaturfokus (04 §15, WCAG 2.4.1) */ /* ":visited" explizit, sonst überschreibt "a:visited" (§4, Spezifität 0,1,1) die helle Textfarbe mit Primärblau — unsichtbar auf dem primärblauen Grund (vgl. Kommentar §5 Buttons). */ .skip-link, .skip-link:visited { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: var(--space-2xs) var(--space-s); background: var(--color-primary); color: var(--color-bg-elevated); text-decoration: none; font-weight: var(--font-weight-semibold); border-radius: 0 0 var(--radius-s) 0; } .skip-link:focus { left: 0; } /* Sichtbarer Fokus für ALLE interaktiven Elemente, ohne Ausnahme (04 §14.2) */ :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } /* Breite Container-Bausteine (04 §7.2): .container = weiter Container (Hubs, Startseite, Kopf/Footer); .container--narrow = Lesespalte (Artikel/Rechtstexte). */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-s); } @media (min-width: 48rem) { .container { padding-inline: var(--space-l); } } .container--narrow { max-width: var(--content-max); } .icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .icon--sm { width: 1.25rem; height: 1.25rem; } .tabular-nums { font-variant-numeric: tabular-nums; } /* Gezielte Silbentrennung für sehr lange Komposita auf schmalen Viewports (04 §6.2) — bewusst kein globales hyphens:auto, nur als Opt-in-Klasse. */ .hyphenate { hyphens: none; } @media (max-width: 30rem) { .hyphenate { hyphens: auto; } } /* Sprint 11 WP-1/A-4 (SC 1.4.10 Reflow): ".site-shell" clippt mit "overflow: clip" (§2) unsichtbar statt zu scrollen – ohne Umbruch-Fallback wird ein sehr langes, leerzeichenloses Wort (lange Komposita, Hostnamen in Linktexten) bei 320px abgeschnitten statt umgebrochen (Inhaltsverlust, bestätigter Fall: /datenschutz/). Bewusst NUR auf Fließtext-Container, NICHT auf Tabellen/".table-scroll" (§6) – deren "overflow-x: auto" bleibt für breite Tabellen unverändert wirksam, Zellinhalte sind hier kein bestätigter Fall. */ .artikel-prose, .register__excerpt, .site-footer, .breadcrumbs { overflow-wrap: break-word; } /* Bestätigter Einzelfall:

-Inline-Elemente (z. B. Hostnamen in der DSE) sind ein
   einzelnes, leerzeichenloses "Wort" – Umbruch-Fallback unabhängig vom umgebenden
   Container, damit auch künftige Vorkommen außerhalb der obigen Liste abgedeckt sind. */
code {
  overflow-wrap: break-word;
}

/* ==========================================================================
   4. Typografie
   ========================================================================== */

h1,
h2,
h3,
h4 {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  text-wrap: balance;
}

/* D-121: site-weit Serif für H1/H2 auf ALLEN Seiten; H3/H4 bleiben Source Sans 3 */
h1,
h2 {
  font-family: var(--font-serif);
}

h3,
h4 {
  font-family: var(--font-family-base);
  line-height: var(--line-height-tight);
}

h1 {
  font-size: var(--font-size-h1);
  margin: 0 0 var(--space-l);
}

/* Vor jeder H2 deutlich mehr Raum als danach (04 §7.3 Weißraum-Prinzip) */
h2 {
  font-size: var(--font-size-h2);
  margin: var(--space-xl) 0 var(--space-s);
}

h3 {
  font-size: var(--font-size-h3);
  margin: var(--space-l) 0 var(--space-xs);
}

h4 {
  font-size: var(--font-size-h4);
  margin: var(--space-m) 0 var(--space-2xs);
}

p {
  margin: 0 0 var(--space-s);
  text-align: left; /* nie Blocksatz, 04 §6.2 */
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-family: var(--font-family-base);
  font-size: var(--font-size-lead);
  line-height: 1.6;
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
}

ul,
ol {
  margin: 0 0 var(--space-s);
  padding-inline-start: 1.25em;
}

li {
  margin-bottom: var(--space-2xs);
}

li:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: var(--font-weight-bold);
}

em {
  font-style: italic;
}

small,
.text-sm {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Textlinks im Fließtext: Primärfarbe + Unterstreichung als einziges
   nicht-farbliches Merkmal (04 §10.1, WCAG SC 1.4.1) */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.08em);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-primary-dark);
}

a:visited {
  color: var(--color-primary); /* 04 §14.3: besuchte Links behalten die Linkfarbe */
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-s);
  border: 1.5px solid transparent;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard);
}

/* Buttons werden teils als  gerendert (Hero-CTA, Lernpfad-Navigation). Die globale
   Regel "a:visited" (§4) hat Spezifität (0,1,1) und schlägt damit reine Klassen-Selektoren
   (0,1,0): Auf besuchten Links würde der Text primär-auf-primär und damit unsichtbar
   (Betreiber-Befund 2026-08-08, Hero "Themen entdecken"). Darum führt jede Button-Variante
   ":visited" explizit in der Selektorliste mit — die Hover-Regeln (0,2,0) sind von allein
   spezifischer. Gleiches Muster beim .skip-link (§3). */
.btn--primary,
.btn--primary:visited {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg-elevated);
}

.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-bg-elevated);
}

.btn--secondary,
.btn--secondary:visited {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--secondary:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}

/* ==========================================================================
   6. Tabellen
   ========================================================================== */

.table-scroll {
  overflow-x: auto;
  margin-block: var(--space-l);
}

/* N-19 (Sprint 8/10, WCAG 2.1.1): tabindex="0"/role="region"/aria-label werden zentral als
   Eleventy-Transform ergänzt (eleventy.config.js, "tableScrollA11y") – hier nur der sichtbare
   Fokusring, wenn der Wrapper dadurch fokussierbar/mit der Tastatur scrollbar wird. Die
   site-weite ":focus-visible"-Regel (oben, §3 Utilities) deckt das an sich schon ab ("ALLE
   interaktiven Elemente, ohne Ausnahme"); die explizite Regel hier macht den Fokusindikator für
   dieses Muster zusätzlich unabhängig von künftigen Änderungen an der globalen Regel – gleiches
   Token, keine neue Optik. overflow-x:auto clippt den eigenen Outline nicht (nur den Inhalt). */
.table-scroll:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}

caption {
  caption-side: top;
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}

thead th {
  text-align: left;
  font-weight: var(--font-weight-bold);
  border-bottom: 2px solid var(--color-border);
  padding: var(--space-xs) var(--space-s);
  vertical-align: bottom;
}

tbody th,
tbody td {
  padding: var(--space-xs) var(--space-s);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

tbody tr:nth-child(even) {
  background: var(--color-surface);
}

/* Zahlenspalten: rechtsbündig + Tabellenziffern (04 §6.1/§10.1) */
.table-numeric,
td[data-numeric],
th[data-numeric] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   7. Lernbausteine (Box-System) — D-123 editorial-flach
   Basisregeln: heller Haarlinien-Rahmen (--color-border) statt gefüllter Fläche,
   4px-Akzentkante links in der Semantik-Vollfarbe, Titelzeile aus Icon + Label
   in der dunklen Semantikfarbe, Fließtext immer --color-text (nie Semantikfarbe).
   PFLICHT-AUSNAHME (nicht verhandelbar): Risikohinweis- und Warnhinweisbox
   behalten die helle Semantik-Füllfläche, der Disclaimer-Baustein bleibt neutral
   grau — alle drei NICHT auf Haarlinie reduzieren (04 §10.2, D-123).
   ========================================================================== */

.lernbaustein {
  --lb-accent: var(--color-primary);
  --lb-label-color: var(--color-primary);
  position: relative;
  margin-block: var(--space-l);
  padding: var(--space-m);
  background: transparent; /* editorial-flach: steht auf dem Papiergrund, keine eigene Fläche */
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--lb-accent);
  border-radius: var(--radius-m);
}

.lernbaustein__title {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-family-base); /* Box-Titel bleiben Source Sans, D-121 */
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--lb-label-color);
}

.lernbaustein__icon {
  color: var(--lb-label-color);
}

.lernbaustein__body > :last-child {
  margin-bottom: 0;
}

/* Definitionsbox: „Einfach erklärt" */
.lernbaustein--definition {
  --lb-accent: var(--color-primary);
  --lb-label-color: var(--color-primary);
}

/* Beispielbox: „Beispiel (hypothetisch)" */
.lernbaustein--beispiel {
  --lb-accent: var(--color-accent);
  --lb-label-color: var(--color-accent);
}

/* Merksatzbox: „Merksatz" */
.lernbaustein--merksatz {
  --lb-accent: var(--color-accent);
  --lb-label-color: var(--color-accent);
}

/* Infobox: „Gut zu wissen" */
.lernbaustein--info {
  --lb-accent: var(--color-info);
  --lb-label-color: var(--color-info);
}

/* Kurzfassungsbox: „Das Wichtigste in Kürze" — eigene Variante (M-03, Sprint 7;
   vormals Wiederverwendung von .lernbaustein--info mit abweichendem Titeltext).
   Teilt sich bewusst die Info-Akzentfarbe (kein neues Farb-Token/keine neue Kontrast-
   Paarung, D-123) — Unterscheidung von der Infobox ausschließlich über eigenes Icon
   ("list") + eigenes festes Label, exakt wie sich Beispiel- und Merksatzbox oben
   bereits eine Akzentfarbe teilen und nur über Icon/Label unterschieden werden. */
.lernbaustein--kurzfassung {
  --lb-accent: var(--color-info);
  --lb-label-color: var(--color-info);
}

/* Warnhinweisbox: „Achtung" — PFLICHT-AUSNAHME: helle Füllfläche bleibt erhalten */
.lernbaustein--warnung {
  --lb-accent: var(--color-warning);
  --lb-label-color: var(--color-warning);
  background: var(--color-warning-surface);
  border-color: var(--color-warning-surface);
  /* border-color-Shorthand überschreibt auch border-left-color — 4px-Semantikkante
     danach erneut in der Vollfarbe setzen (QS-Fix, siehe Risikobox). */
  border-left-color: var(--lb-accent);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Risikohinweisbox: „Risiko" — PFLICHT-AUSNAHME: helle Füllfläche bleibt erhalten,
   damit die Warnung in der ruhigen Haarlinien-Umgebung nicht untergeht. */
.lernbaustein--risiko {
  --lb-accent: var(--color-danger);
  --lb-label-color: var(--color-danger-text);
  background: var(--color-danger-surface);
  border-color: var(--color-danger-surface);
  /* border-color-Shorthand überschreibt auch border-left-color — 4px-Semantikkante
     danach erneut in der Vollfarbe setzen (QS-Fix). */
  border-left-color: var(--lb-accent);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Disclaimer-Baustein: „Keine Anlageberatung" — PFLICHT-AUSNAHME: bewusst neutral
   grau (weiße Fläche, grauer Rahmen ringsum, KEINE farbige Akzentkante), damit die
   Risiko-Semantik nicht verwässert wird (04 §10.2). */
.lernbaustein--disclaimer {
  --lb-label-color: var(--color-text-muted);
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  border-left-width: 1px;
  border-left-color: var(--color-border);
}

/* ==========================================================================
   8. Autorenbox
   Trust-/E-E-A-T-Baustein (04 §10.1, F-41/D-109). Im Zuge von D-123 im gleichen
   editorial-flachen Muster wie die Lernbausteine (Haarlinie + Primärfarb-Akzent-
   kante + Icon/Label „Über die Autorin/den Autor"), Klarname als eigenständige
   Auszeichnung neben dem Portrait/Avatar.
   ========================================================================== */

.lernbaustein--autor {
  --lb-accent: var(--color-primary);
  --lb-label-color: var(--color-primary);
}

.autorenbox__body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m);
  flex-wrap: wrap;
}

.autorenbox__avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.autorenbox__name {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.autorenbox__role {
  margin: 0 0 var(--space-2xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.autorenbox__text {
  margin: 0 0 var(--space-2xs);
}

.autorenbox__text:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   9. Register-/Haarlinien-Komponente (D-123)
   Für allgemeine Inhalte (Artikel-/Themen-Teaser, Hub-/Übersichtslisten,
   „verwandte Artikel", Listen) statt gefüllter Karten mit Schatten (04 §10.1).
   Kein neues Token — Trenner ausschließlich --color-border.
   ========================================================================== */

.register {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.register__item {
  position: relative;
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.register__item:hover,
.register__item:focus-within {
  background: var(--color-surface);
}

.register__kicker {
  margin: 0 0 var(--space-3xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.register__title {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-family-base); /* Register-Titel bleiben Source Sans; Serif ist Wortmarke/H1/H2 vorbehalten, D-121 */
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.register__title a {
  color: var(--color-primary);
  text-decoration: none;
}

/* Ganze Zeile klickbar, aber genau ein Link im Markup (Screenreader-freundlich) */
.register__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.register__title a:hover,
.register__item:hover .register__title a {
  color: var(--color-primary-dark);
}

.register__excerpt {
  margin: 0 0 var(--space-2xs);
  color: var(--color-text);
}

.register__meta {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Optionale mehrspaltige Variante für breite Übersichtsseiten (04 §7.2) */
@media (min-width: 48rem) {
  .register--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-l);
  }

  .register--grid .register__item {
    border-bottom: 1px solid var(--color-border);
  }
}

/* ==========================================================================
   10. Navigation & Kopfbereich
   Zwei Ausprägungen (D-123, 04 §11.1): großer zentrierter „bookish" Kopf nur auf
   der Startseite, kompakter Serifen-Kopf auf allen Unterseiten. Mobile Navigation
   progressiv verbessert: ohne JS bleibt die Liste inline sichtbar (keine Faltung/
   kein Overlay); mit JS (Klasse „js" auf , siehe base.njk) wird sie ab der
   Mobil-Grenze (48rem) hinter einem Button mit aria-expanded zum Overlay
   (Fokusfalle + Escape: assets/js/site.js).
   ========================================================================== */

/* Sprint 11 WP-1/A-1: eigenen Stapelkontext über dem geöffneten mobilen Nav-Overlay
   halten (".js .primary-nav.is-open", z-index 300, weiter unten in diesem Abschnitt) –
   sonst überdeckt das fixierte Overlay die Kopfzeile samt Schließen-Button, weil ein
   positioniertes Element ohne eigenen z-index sonst hinter jedem positionierten
   Geschwister-/Nachfahren-Element liegt. Einziger weiterer z-index im Stylesheet ist
   der Skip-Link (1000, §3) – bleibt darüber. Der Google-CMP-Dialog wird als
   Drittanbieter-iframe zur Laufzeit injiziert, ist hier nicht referenziert und liegt in
   einem eigenen, deutlich höheren Stapelkontext. */
.site-header {
  position: relative;
  z-index: 400;
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  padding-block: var(--space-s);
}

.site-header__bar {
  display: flex;
  align-items: center;
  /* Sprint 12 WP-1 (Dark Mode, D-148): war "space-between". Seit Sprint 16 (D-5,
     Übergabepunkt aus Sprint 12) steht der Dark-Mode-Umschalter als statisches Markup
     in partials/nav.njk (zwischen Wortmarke und .nav-toggle) – vorher hat
     assets/js/site.js ihn zur Laufzeit als drittes Element in diese Leiste eingefügt.
     "space-between" würde drei Elemente gleichmäßig über die volle Breite verteilen
     (Umschalter mittig, große Lücken) – "flex-start" + "margin-inline-start: auto" auf
     ".theme-toggle" (unten) hält die Wortmarke links und schiebt Umschalter+Menü-Button
     gemeinsam nach rechts, unabhängig davon, ob beide gerade sichtbar sind. Ohne JS
     bleiben .nav-toggle UND .theme-toggle unconditional display:none (§10) – keine
     optische Änderung für No-JS-Besucher, nur die Wortmarke ist sichtbar. */
  justify-content: flex-start;
  gap: var(--space-s);
  /* Sprint 11 WP-1/A-1 (Teil 2): Die Kopfzeilen-Leiste (Wortmarke + Menü-/Schließen-Button)
     liegt als GESCHWISTER der .primary-nav im selben Header-Stapelkontext – der z-index
     der .site-header allein reicht daher nicht (im Live-Nachtest verifiziert): Innerhalb
     des Header-Kontexts überdeckte das Overlay (z-index 300) die Leiste weiterhin.
     Erst dieser Rang macht den Schließen-Button bei geöffnetem Overlay sicht- und klickbar. */
  position: relative;
  z-index: 400;
}

.wortmarke {
  margin: 0;
  font-family: var(--font-serif); /* D-121: Wortmarke site-weit in Serif */
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
  color: var(--color-primary);
}

.wortmarke a {
  color: inherit;
  text-decoration: none;
}

/* --- Großer, zentrierter „bookish" Kopf — nur Startseite --- */

.site-header--hero {
  border-bottom: none;
}

.site-header--hero .site-header__inner {
  padding-block: var(--space-l) var(--space-s);
  text-align: center;
}

.site-header__eyebrow {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.site-header--hero .wortmarke {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
}

.site-header--hero .site-header__bar {
  justify-content: center;
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: var(--space-s);
  margin-bottom: var(--space-s);
}

/* Sprint 12, Betreiber-Feedback D-150: Im Hero-Kopf gehört der Umschalter NICHT in die
   zentrierte Wortmarken-Gruppe, sondern nach oben rechts (übliche Position auf den
   meisten Websites). Auto-Margin-Trick (§10 unten) hier zurücknehmen und stattdessen
   an der rechten Kante der Leiste verankern; Anker ist die .site-header__bar
   (position:relative/z-index 400 seit Sprint 11 WP-1/A-1).
   NUR ab 48rem: Darunter steht zusätzlich der Menü-Button in der zentrierten Gruppe –
   eine absolute Rechts-Position würde ihn bei schmalen Viewports (320px im Nachtest)
   überlappen. Mobil bleibt der Umschalter deshalb Teil der zentrierten Gruppe. */
.site-header--hero .theme-toggle {
  margin-inline-start: 0;
}

@media (min-width: 48rem) {
  .site-header--hero .theme-toggle {
    position: absolute;
    right: 0;
    /* Bewusst OHNE top/transform: Ohne Block-Achsen-Angabe behält ein absolut
       positioniertes Flex-Kind seine statische Position aus "align-items: center" der
       Leiste – also exakt auf der Wortmarken-Mittellinie. "top: 50%" würde stattdessen
       die halbe Leistenhöhe INKLUSIVE deren padding-bottom messen und den Umschalter im
       Nachtest um 8px nach unten versetzen. */
  }
}

.site-header--hero .primary-nav {
  justify-content: center;
}

/* --- Mobile Toggle (progressive enhancement) --- */

.nav-toggle {
  display: none; /* bleibt verborgen, solange keine JS-Verbesserung aktiv ist */
  align-items: center;
  gap: var(--space-3xs);
  min-height: 44px;
  min-width: 44px;
  /* Als Flex-Kind der .site-header__bar darf der Button nicht unter seine
     Inhaltsbreite gestaucht werden (Standard flex-shrink: 1) – sonst ragt das
     Label "Menü" auf schmalen Viewports über den Rahmen hinaus; den Platzdruck
     fängt stattdessen die umbruchfähige Wortmarke ab. */
  flex-shrink: 0;
  white-space: nowrap;
  padding: var(--space-2xs) var(--space-s);
  background: transparent;
  /* Sprint 11 WP-1/B-7: an A-3 angeglichen (kein eigener Verstoß, Identifikation ist
     über das sichtbare Textlabel "Menü"/"Schließen" gesichert – reine Konsistenz). */
  border: 1.5px solid var(--color-text-subtle);
  border-radius: var(--radius-s);
  color: var(--color-primary);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.nav-toggle__icon--close,
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open,
.nav-toggle__label-close,
.nav-toggle[aria-expanded="true"] .nav-toggle__label-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close,
.nav-toggle[aria-expanded="true"] .nav-toggle__label-close {
  display: inline-flex;
}

/* --- Dark-Mode-Umschalter (F-26, D-148, Sprint 12 WP-1) ---------------------
   Seit Sprint 16 (D-5, Übergabepunkt aus Sprint 12 "Offene Übergaben" Nr. 3)
   statisches Markup in partials/nav.njk (zwischen Wortmarke und .nav-toggle) statt
   Laufzeit-Injektion durch assets/js/site.js – Sichtbarkeits-Gating übernimmt EXAKT
   das .nav-toggle-Muster oben: "display: none" als Grundzustand, erst
   ".js .theme-toggle" (unten) schaltet sichtbar UND fokussierbar. Ohne JS bleibt der
   Button unsichtbar (kein funktionsloser Button ohne JS, ohne Speicherzugriff könnte
   er seine Funktion ohnehin nicht erfüllen) – Dark Mode selbst bleibt über den reinen
   "prefers-color-scheme"-Grundfall (D-148) trotzdem vollständig funktionsfähig, nur
   ohne manuelle Übersteuerung. Anders als .nav-toggle gilt das Gating hier NICHT nur
   unterhalb der Mobil-Grenze, sondern auf allen Breiten (kein @media-Innenblock, kein
   erneutes display:none auf Desktop) – der Umschalter ist unabhängig von der
   Viewport-Breite verfügbar. Icon-only (Lucide "moon"/"sun", ISC-Lizenz,
   partials/icons.njk), Accessible Name "Dunkelmodus" + Zustand über aria-pressed
   (Standardmuster für Umschalter).
   ZWEI Zustände seit D-151 (Betreiber: "brauchen wir nicht eigentlich nur Sonne und
   Mond?") – der dritte Zustand "Systemeinstellung" aus D-149/L-4 ist entfallen, weil sein
   kombiniertes Sonne-Mond-Symbol bei 20px nicht erkennbar war. data-theme-zustand
   ("light"/"dark") steuert nur noch, welches der beiden Symbole sichtbar ist; gezeigt wird
   die AKTUELL wirksame Darstellung. Kontraststand siehe Abschnitt 23 "Dark Mode". */
.theme-toggle {
  display: none; /* bleibt verborgen, solange keine JS-Verbesserung aktiv ist (wie .nav-toggle oben) */
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  flex-shrink: 0; /* wie .nav-toggle: nie unter Inhaltsbreite stauchen (s. Kommentar dort) */
  margin-inline-start: auto; /* schiebt sich + .nav-toggle gemeinsam nach rechts, s. §10-Kommentar oben */
  padding: var(--space-2xs);
  background: transparent;
  border: 1.5px solid var(--color-text-subtle);
  border-radius: var(--radius-s);
  color: var(--color-primary);
  cursor: pointer;
}

/* Sichtbar/fokussierbar erst mit aktivem JS (assets/js/site.js verdrahtet Klick +
   Zustand) – progressive enhancement, identisches Prinzip wie ".js .nav-toggle"
   weiter unten, hier aber bewusst OHNE @media-Einschränkung (der Umschalter gehört
   auf jede Breite, nicht nur mobil).
   qa-Gate Sprint 16, Auflage QA-8: zusätzlich an [data-theme-zustand] gebunden –
   das Attribut setzt erst site.js beim Initialisieren. Nur ".js" reichte nicht:
   Die .js-Klasse wird von einem frühen Inline-Snippet gesetzt, das deferred site.js
   läuft aber später – im Ladefenster dazwischen war der Button sichtbar und
   fokussierbar, zeigte aber KEIN Icon (Icons hängen an [data-theme-zustand],
   siehe Regeln unten). Mit dem Attribut-Gate erscheint der Button erst fertig
   initialisiert samt Symbol; ohne JS bleibt er wie bisher komplett verborgen. */
.js .theme-toggle[data-theme-zustand] {
  display: inline-flex;
}

.theme-toggle:hover {
  border-color: var(--color-primary);
}

.theme-toggle .theme-toggle__icon {
  display: none;
}

.theme-toggle[data-theme-zustand="light"] .theme-toggle__icon--sun,
.theme-toggle[data-theme-zustand="dark"] .theme-toggle__icon--moon {
  display: inline-flex;
}

/* --- Hauptnavigation: gemeinsames Markup, responsive Darstellung --- */

.primary-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.primary-nav__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.primary-nav__list a:hover {
  color: var(--color-primary);
}

/* Aktueller Bereich: Unterstreichungsbalken in --color-primary + aria-current (04 §11.1) */
.primary-nav__list a[aria-current="page"] {
  color: var(--color-primary);
  box-shadow: inset 0 -3px 0 0 var(--color-primary);
}

.primary-nav__search {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-height: 44px;
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.primary-nav__search:hover {
  color: var(--color-primary-dark);
}

@media (max-width: 47.9375rem) {
  /* Ohne JS: Liste bleibt einfach, gestapelt, immer sichtbar (kein Overlay). */
  .primary-nav {
    padding-block: var(--space-s);
    border-top: 1px solid var(--color-border);
  }

  /* Mit JS (Klasse "js" auf ): Button sichtbar, Liste wird zum
     Vollbild-Overlay, das erst bei Aktivierung erscheint. */
  .js .nav-toggle {
    display: inline-flex;
  }

  .js .primary-nav {
    display: none;
    border-top: none;
  }

  .js .primary-nav.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--color-bg);
    padding: var(--space-2xl) var(--space-l) var(--space-l);
    overflow-y: auto;
  }

  .js .primary-nav.is-open .primary-nav__list {
    gap: var(--space-s);
  }

  .js .primary-nav.is-open .primary-nav__list a,
  .js .primary-nav.is-open .primary-nav__search {
    font-size: var(--font-size-lead);
  }
}

/* Sprint 16 (D-5, Dark-Mode-Kleinkram-Merker aus Sprint 12/13/14/15): Auf sehr schmalen
   Viewports (WCAG-Reflow-Referenzbreite 320px, 04 §14.1) reichte der Platz in der
   Kopfzeilen-Leiste zwischen Wortmarke, Theme-Toggle und Menü-Button knapp nicht aus
   (Sprint-12-Nachtest: ~7px Überlauf, alle Elemente blieben sichtbar/klickbar — rein
   kosmetisch, kein WCAG-Verstoß). Fix nur unterhalb 360px: Lücke zwischen den drei
   Bar-Elementen sowie der seitliche Innenabstand des Menü-Buttons verringern sich auf
   --space-2xs. Die 44-px-Zielgröße bleibt unangetastet (min-height/min-width beider
   Buttons sind unabhängig von der Innenpolsterung gesetzt, §10 oben); der verbleibende
   Abstand zwischen Theme-Toggle und Menü-Button entspricht weiterhin genau dem in 04 §14.5
   geforderten Mindestabstand zwischen benachbarten Touch-Zielen (kein Unterschreiten von
   --space-2xs). Gilt für beide Kopf-Ausprägungen (kompakt und Hero), da .site-header__bar
   in beiden Fällen dieselbe Klasse trägt. */
@media (max-width: 22.5rem) {
  .site-header__bar {
    gap: var(--space-2xs);
  }

  .nav-toggle {
    padding-inline: var(--space-2xs);
  }
}

@media (min-width: 48rem) {
  .nav-toggle {
    display: none !important;
  }

  .primary-nav {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    position: static;
    inset: auto;
    background: none;
    padding: 0;
    border: none;
    gap: var(--space-l);
  }

  .primary-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-m);
  }

  .primary-nav__list a[aria-current="page"] {
    box-shadow: inset 0 -3px 0 0 var(--color-primary);
    padding-bottom: 2px;
  }
}

/* ==========================================================================
   11. Breadcrumbs
   ========================================================================== */

.breadcrumbs {
  padding-block: var(--space-s);
  font-size: var(--font-size-sm);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--color-text-muted);
}

.breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

.breadcrumbs a:hover {
  color: var(--color-primary);
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.breadcrumbs li:not(:last-child)::after {
  content: "›";
  margin-inline: 0.25em;
  color: var(--color-text-subtle);
}

/* ==========================================================================
   12. Footer (hell, 04 §11.7 — keine dunkle Ausnahme)
   ========================================================================== */

.site-footer {
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.site-footer .container {
  padding-block: var(--space-l) var(--space-m);
}

.site-footer__wortmarke {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-m);
}

.site-footer__orientation {
  display: grid;
  gap: var(--space-l);
  margin-bottom: var(--space-l);
  list-style: none;
  padding: 0;
}

@media (min-width: 48rem) {
  .site-footer__orientation {
    grid-template-columns: repeat(3, 1fr);
  }
}

.site-footer__group-title {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.footer-linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.footer-linklist a,
.footer-linklist button {
  color: var(--color-text);
  text-decoration: none;
}

.footer-linklist a:hover,
.footer-linklist button:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Sprint 10 (Aufgabe 2, Footer-Widerrufs-Button "Cookie-Einstellungen", J-7c): Browser-
   Standardoptik eines