/*
  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).

  Kein Dark Mode in V1 (D-104) — Tokens sind semantisch benannt und damit
  dark-mode-fähig angelegt, es gibt aber bewusst KEINE prefers-color-scheme-
  Umschaltung. `color-scheme: light` verhindert eine 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)
    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, Definitionsliste)
    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)
    23. Druck-CSS
*/

/* ==========================================================================
   1. Design-Tokens (04 §13 — kanonische Quelle für Gestaltungswerte)
   ========================================================================== */

:root {
  color-scheme: light; /* verhindert Browser-Auto-Invertierung ohne echten Dark Mode, 04 §12 */

  /* --- 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 <body>. */
.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) */
.skip-link {
  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;
  }
}

/* ==========================================================================
   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);
}

.btn--primary {
  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 {
  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);
}

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 <html>, siehe base.njk) wird sie ab der
   Mobil-Grenze (48rem) hinter einem Button mit aria-expanded zum Overlay
   (Fokusfalle + Escape: assets/js/site.js).
   ========================================================================== */

.site-header {
  border-bottom: 1px solid var(--color-border);
}

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

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}

.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);
}

.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;
  padding: var(--space-2xs) var(--space-s);
  background: transparent;
  border: 1.5px solid var(--color-border);
  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;
}

/* --- 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 <html>): 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);
  }
}

@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 {
  color: var(--color-text);
  text-decoration: none;
}

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

.footer-linklist--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
}

.site-footer__risikohinweis {
  max-width: var(--content-max);
  margin: 0 0 var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}

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

/* ==========================================================================
   13. Artikel-Layout (Meta-Zeile, Lernpfad-Hinweis, Voraussetzungen-Kasten, TOC)
   Sprint 3, Track A1 — Slots/Hülsen für Track B (Lesezeit/TOC-Generierung, B1)
   und Track C (Lernpfad-Datenauflösung, C4). Ohne echte Daten (aktueller Stand
   aller Platzhalter-Artikel) rendert keiner dieser Blöcke sichtbar etwas.
   ========================================================================== */

.artikel-layout {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-s);
}

@media (min-width: 48rem) {
  .artikel-layout {
    padding-inline: var(--space-l);
  }
}

@media (min-width: 64rem) {
  .artikel-layout--with-toc {
    max-width: var(--container-max);
    display: grid;
    grid-template-columns: minmax(0, var(--content-max)) minmax(12rem, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

.artikel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin: 0 0 var(--space-m);
}

.artikel-meta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--color-text-muted);
}

/* Dezenter Lernpfad-Hinweis (D-119 harte Regel: KEIN Fortschrittsbalken/"Schritt X
   von Y" — deshalb bewusst nur Icon + Fließtext, keine Karte/Box/Füllfläche). */
.lernpfad-hinweis {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-m);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.lernpfad-hinweis__icon {
  color: var(--color-accent);
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* "Das solltest du vorher kennen"-Kasten (03 §1.2 Prinzip 2) — organisatorisch,
   kein Semantik-Baustein, daher neutraler Akzent statt Farbcodierung. */
.voraussetzungen-kasten {
  margin-block: var(--space-l);
  padding: var(--space-m);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-text-muted);
  border-radius: var(--radius-m);
}

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

.voraussetzungen-kasten ul {
  margin: 0;
}

/* Mobiles Inhaltsverzeichnis: natives <details>/<summary>, ohne JS, standardmäßig
   eingeklappt (04 §11.5). Ab 64rem übernimmt die sticky Desktop-Spalte. */
.artikel-toc--mobile {
  margin-block: var(--space-l);
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
}

.artikel-toc--mobile summary {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.artikel-toc--mobile nav {
  margin-top: var(--space-s);
}

.artikel-toc--mobile ol {
  margin: 0;
}

@media (min-width: 64rem) {
  .artikel-toc--mobile {
    display: none;
  }
}

.artikel-layout__toc {
  display: none;
}

@media (min-width: 64rem) {
  .artikel-layout--with-toc .artikel-layout__toc {
    display: block;
    position: sticky;
    top: var(--space-l);
    align-self: start;
    font-size: var(--font-size-sm);
  }
}

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

.artikel-layout__toc ol {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  border-left: 2px solid var(--color-border);
}

.artikel-layout__toc li {
  margin-bottom: 0;
}

.artikel-layout__toc a {
  display: block;
  padding: var(--space-3xs) 0 var(--space-3xs) var(--space-s);
  color: var(--color-text-muted);
  text-decoration: none;
}

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

/* Generische Blockquote-Optik — u. a. für die ENTWURF-Banner der Rechtsseiten
   (Inhalt bleibt unverändert, Scope-Grenze Track A: nur Gestaltung). */
blockquote {
  margin: var(--space-l) 0;
  padding: var(--space-xs) var(--space-m);
  border-left: 3px solid var(--color-border);
  color: var(--color-text-muted);
}

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

/* Quellenliste (07 §10) — optionale, gedämpfte Darstellung für die
   Quellen-Sektion am Artikelende (content-authored, kein Pflichtbaustein). */
.quellenliste {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   14. Artikel-Aktionen (Teilen/Feedback, .js-only) + Lernpfad-Weiter
   Progressive Enhancement (DoD): Ohne JS bleibt je Aktion mindestens ein voll
   funktionsfähiges Element sichtbar (mailto-Links); .js-only blendet Elemente
   erst ein, wenn die Klasse "js" auf <html> aktiv ist (siehe base.njk).
   ========================================================================== */

.js-only {
  display: none;
}

.js .js-only {
  display: inline-flex;
}

/* Block-level Geschwisterklasse zu .js-only (Sprint 4, Track T, EP-05): für ganze
   Interaktionsbereiche, die ohne JavaScript grundsätzlich sinnlos/unbedienbar wären (Rechner-
   Formular, Speicher-Opt-in-Schalter — style.css §22) — im Unterschied zu .js-only (einzelne
   inline Buttons wie Teilen/Link-kopieren) hier als Block-Container. Ohne JS bleibt an dieser
   Stelle ausschließlich der <noscript>-Ersatzinhalt sichtbar (progressive enhancement, 05 §4.7). */
.js-only-block {
  display: none;
}

.js .js-only-block {
  display: block;
}

/* Sprint 3, Track C2 (05 §4.13): Teilen-/Link-kopieren-Buttons zusätzlich an die
   konkrete Browser-API gekoppelt (nicht nur an "JS ist aktiv"), damit nie ein
   funktionsloser Button erscheint. "can-share"/"can-clipboard" werden synchron
   VOR dem ersten Paint in base.njk gesetzt (kein Nachträglich-Verbergen, also
   kein Layout-Sprung). Höhere Spezifität als ".js .js-only", damit diese Regeln
   unabhängig von der Deklarationsreihenfolge gewinnen. */
.js [data-share-button].js-only {
  display: none;
}

.js.can-share [data-share-button].js-only {
  display: inline-flex;
}

.js [data-copy-link-button].js-only {
  display: none;
}

.js.can-clipboard [data-copy-link-button].js-only {
  display: inline-flex;
}

/* Sprint 4, Track T1 (05 §4.7 URL-Parameter-Skizze): "Diese Berechnung als Link kopieren"
   im Rechner-Ergebnisbereich folgt derselben can-clipboard-Kopplung wie oben — nie ein
   Knopf ohne funktionierende Zwischenablage-Aktion dahinter. */
.js [data-rechner-teilen-button].js-only {
  display: none;
}

.js.can-clipboard [data-rechner-teilen-button].js-only {
  display: inline-flex;
}

/* Sichtbare UND aria-live-angekündigte Erfolgs-/Fehlerrückmeldung fürs
   Link-kopieren (05 §4.13: "textuelle Bestätigung, aria-live") – eine einzige
   Quelle für beide Zielgruppen statt doppelter Texte. Im leeren Ausgangszustand
   wie ".sr-only" geklippt statt "display:none" – bewusst KEIN display/visibility-
   Wechsel, weil eine aria-live-Region zuverlässiger angekündigt wird, wenn sie schon
   VOR der Textänderung im Accessibility-Tree sichtbar ist (display:none/visibility:
   hidden entfernen ein Element daraus, reine Clip-/Positions-Verkleinerung nicht).
   Zugleich nimmt der geklippte Zustand keinen sichtbaren Platz ein (kein Layout-Sprung
   beim Laden); der kleine Sprung BEIM Klick selbst zählt ohnehin nicht gegen CLS
   (Layout-Verschiebungen innerhalb von 500 ms nach einer Nutzerinteraktion sind laut
   Web-Vitals-Definition von der CLS-Messung ausgenommen). */
.artikel-teilen__status {
  margin: var(--space-2xs) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.artikel-teilen__status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.artikel-aktion {
  margin-block: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}

.artikel-aktion__label {
  margin: 0 0 var(--space-s);
  font-weight: var(--font-weight-semibold);
}

.artikel-aktion__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* Ruhiger "Weiter im Pfad"-Verweis (04 §11.4) — bewusst gleichrangig mit den
   übrigen Querverweisen gestaltet, KEINE betonte Primär-Karte (D-119). */
.lernpfad-weiter {
  margin-block: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}

.lernpfad-weiter p {
  margin: 0 0 var(--space-2xs);
}

.lernpfad-weiter__next a {
  font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   15. Anzeigen-Platzhalter (Optik) — Aktivierungs-/Consent-Logik und
   Shortcode/Feature-Flag sind Track B/EP-11 (ads-privacy-integrator). CLS-fest:
   feste min-height je Breakpoint; "Anzeige"-Label nur zusammen mit echtem
   Inventar sichtbar (06 §7 Nr. 5) — hier nur die gestaltete Hülse/Demo.
   ========================================================================== */

.anzeigen-slot {
  margin-block: var(--space-l);
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-border);
  min-height: 15.625rem; /* 250px mobil — Platzhalter-Annahme dieses Tracks, siehe Abschlussbericht */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2xs);
}

@media (min-width: 48rem) {
  .anzeigen-slot {
    min-height: 17.5rem; /* 280px ab Tablet */
  }
}

.anzeigen-slot__label {
  align-self: flex-start;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.anzeigen-slot__platzhalter-hinweis {
  margin: auto;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

/* ==========================================================================
   16. Illustrationen (Grundset, Sprint 3 Track A4) — Eigenwerk, siehe
   partials/illustrations.njk und docs/redaktion/lizenzregister.md §3. Farben
   ausschließlich Token-Palette (04 §8.1) — kein Grün/Rot (nicht semantisch
   gemeint), daher hier bewusst nicht die Erfolg-/Risiko-Token verwendet.
   ========================================================================== */

.illustration {
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
}

.illustration--lg {
  width: 9rem;
  height: 9rem;
}

.illustration :is(path, rect, circle, ellipse) {
  fill: none;
}

.illustration :is(path, rect, circle, ellipse, line, polygon, polyline) {
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.illustration__fill-primary { fill: var(--color-primary); }
.illustration__fill-accent { fill: var(--color-accent); }
.illustration__fill-deco { fill: var(--color-secondary-deco); }
.illustration__fill-surface { fill: var(--color-secondary-surface); }
.illustration__fill-none { fill: none; }
.illustration__stroke-accent { stroke: var(--color-accent); }

/* ==========================================================================
   17. Startseite S1 (04c "Editorial-Broadsheet", D-121) — Hero, Themen-Register
   (führende Sektion, D-119), optionaler Etappen-Block (KEIN Fortschrittsbalken),
   Werkzeuge/Vertrauen. Kopf (großer "bookish" Kopf) und Footer (hell) sind
   bereits sitewide über nav.njk/footer.njk gelöst (Sprint 2) — hier nur die
   S1-exklusiven Abschnitte dazwischen.
   ========================================================================== */

.section-label {
  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);
}

/* --- Hero --- */

.hero {
  padding-block: var(--space-2xl) var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.hero__eyebrow {
  margin: 0 0 var(--space-s);
  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);
}

.hero__title {
  max-width: 15em;
  margin: 0 0 var(--space-l);
  font-size: clamp(2.25rem, 1.7rem + 2.9vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hero__row {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 64rem) {
  .hero__row {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
    gap: var(--space-2xl);
  }
}

.hero__lead {
  margin: 0;
  font-size: var(--font-size-lead);
}

@media (min-width: 64rem) {
  .hero__lead {
    column-count: 2;
    column-gap: var(--space-l);
  }
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}

@media (min-width: 64rem) {
  .hero__cta {
    align-items: flex-end;
    text-align: right;
  }
}

.hero__pfad-link {
  font-weight: var(--font-weight-semibold);
}

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

/* --- Themen im Register (führende Sektion, D-119) --- */

.themen-sektion {
  padding-block: var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 64rem) {
  .themen-sektion {
    grid-template-columns: 0.8fr 2.2fr;
    gap: var(--space-2xl);
  }
}

.themen-sektion__intro-title {
  margin: 0 0 var(--space-2xs);
}

.themen-sektion__such-hinweis {
  margin-top: var(--space-m);
}

/* --- Der Weg: Etappen (optionaler Lernpfad-Block, unterhalb der Themen) --- */

.etappen-sektion {
  padding-block: var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
}

.etappen-sektion__intro-title {
  margin: 0 0 var(--space-l);
}

.etappen-grid {
  display: grid;
  gap: var(--space-l);
  margin-bottom: var(--space-l);
}

@media (min-width: 64rem) {
  .etappen-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
  }

  .etappen-grid__item {
    padding-inline: var(--space-m);
    border-left: 1px solid var(--color-border);
  }

  .etappen-grid__item:first-child {
    border-left: none;
    padding-inline-start: 0;
  }
}

.etappen-grid__ziffer {
  display: block;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: var(--space-2xs);
}

.etappen-grid__item--accent .etappen-grid__ziffer {
  color: var(--color-accent);
}

.etappen-grid__titel {
  margin: 0 0 var(--space-3xs);
  font-weight: var(--font-weight-bold);
}

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

/* --- Werkzeuge & Vertrauen --- */

.werkzeuge-sektion {
  padding-block: var(--space-2xl);
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 48rem) {
  .werkzeuge-sektion {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

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

.werkzeuge-liste li {
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
}

.werkzeuge-liste a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

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

.werkzeuge-liste__hinweis {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.vertrauens-karte {
  padding: var(--space-l);
  background: var(--color-primary-light);
  border-radius: var(--radius-m);
}

.vertrauens-karte h3 {
  margin-top: 0;
}

/* ==========================================================================
   18. Pagefind-Theming (Such-Seiten-Shell, /suche/)
   Reine CSS-Anpassung der offiziellen Pagefind-UI-Custom-Properties an die
   Design-Tokens (https://pagefind.app/docs/ui/#css-custom-properties) — KEINE
   JS-Verhaltensänderung (bleibt Track C, C1). Ohne Build (Pagefind-Assets
   entstehen erst durch "npm run build") bleiben diese Regeln wirkungslos, aber
   harmlos.
   ========================================================================== */

.pagefind-ui {
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: var(--color-primary);
  --pagefind-ui-text: var(--color-text);
  --pagefind-ui-background: var(--color-bg);
  --pagefind-ui-border: var(--color-border);
  --pagefind-ui-tag: var(--color-surface);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 0.5rem;
  --pagefind-ui-image-border-radius: 0.5rem;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: var(--font-family-base);
}

.suche-seite__intro {
  max-width: var(--content-max);
}

/* ==========================================================================
   19. Glossar-Shell (/glossar/) — Alphabet-Sprungnavigation + Definitionsliste.
   Struktur/Optik von Track A (Sprint 3, A1); seit Sprint 3 Track B3 (EP-04)
   datengetrieben aus _data/glossar.json gerendert (glossar/index.md + Filter
   glossarNachBuchstabe in eleventy.config.js) statt hartkodierter Dummy-Einträge.
   Die 59 echten Begriffe/Definitionen sind weiterhin redaktioneller Inhalt
   (Sprint 4, EP-06) – aktuell nur eine kleine, klar gekennzeichnete Beispielmenge.
   ========================================================================== */

.glossar-alphabet {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-l);
  padding: var(--space-s) 0;
  border-block: 1px solid var(--color-border);
}

.glossar-alphabet a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem; /* 44px Touch-Ziel, 04 §14.5 — eigenständiges Bedienelement, keine Fließtext-Ausnahme */
  min-height: 2.75rem;
  padding-inline: var(--space-3xs);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-radius: var(--radius-s);
}

.glossar-alphabet a:hover {
  background: var(--color-surface);
}

/* Sprint 3, Track B3: Buchstaben ohne Glossareintrag (datengetrieben, kein toter Anker) –
   gleiche Boxmaße wie die aktiven <a>, aber unauffällig/aria-hidden. */
.glossar-alphabet span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--color-text-subtle);
}

.glossar-liste {
  margin: 0;
}

.glossar-eintrag {
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: var(--space-l);
}

.glossar-eintrag__begriff {
  margin: 0 0 var(--space-3xs);
  font-family: var(--font-family-base);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.glossar-eintrag__definition {
  margin: 0;
}

.glossar-eintrag__vertiefung {
  margin: var(--space-3xs) 0 0;
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   20. Bewegung
   ========================================================================== */

@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;
  }
}

/* ==========================================================================
   21. Design-Vorschau (interne Abnahmeseite /design-vorschau/, kein
   Website-Baustein — dient nur der visuellen Abnahme am Track-B-Gate,
   noindex/nofollow, nicht in der Navigation verlinkt).
   ========================================================================== */

.gallery-section {
  margin-block: var(--space-2xl) 0;
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-border);
}

.gallery-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-m);
  list-style: none;
  margin: 0 0 var(--space-l);
  padding: 0;
}

.swatch {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.swatch__fill {
  height: 4rem;
}

/* Eine Modifier-Klasse je gezeigtem Farbtoken (statt inline style="background:...",
   damit die Seite ohne no-inline-style-Ausnahme durch html-validate läuft). */
.swatch__fill--primary { background: var(--color-primary); }
.swatch__fill--primary-dark { background: var(--color-primary-dark); }
.swatch__fill--primary-light { background: var(--color-primary-light); }
.swatch__fill--accent { background: var(--color-accent); }
.swatch__fill--secondary-surface { background: var(--color-secondary-surface); }
.swatch__fill--secondary-deco { background: var(--color-secondary-deco); }
.swatch__fill--info { background: var(--color-info); }
.swatch__fill--info-surface { background: var(--color-info-surface); }
.swatch__fill--success { background: var(--color-success); }
.swatch__fill--success-text { background: var(--color-success-text); }
.swatch__fill--success-surface { background: var(--color-success-surface); }
.swatch__fill--warning { background: var(--color-warning); }
.swatch__fill--warning-surface { background: var(--color-warning-surface); }
.swatch__fill--danger { background: var(--color-danger); }
.swatch__fill--danger-text { background: var(--color-danger-text); }
.swatch__fill--danger-surface { background: var(--color-danger-surface); }
.swatch__fill--text { background: var(--color-text); }
.swatch__fill--text-muted { background: var(--color-text-muted); }
.swatch__fill--text-subtle { background: var(--color-text-subtle); }
.swatch__fill--border { background: var(--color-border); }
.swatch__fill--surface { background: var(--color-surface); }
.swatch__fill--bg { background: var(--color-bg); }
.swatch__fill--bg-elevated { background: var(--color-bg-elevated); }
.swatch__fill--canvas { background: var(--color-canvas); }
.swatch__fill--focus { background: var(--color-focus); }

.swatch__meta {
  margin: 0;
  padding: var(--space-xs) var(--space-s);
  background: var(--color-bg-elevated);
}

.swatch__name {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.swatch__hex {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.gallery-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs);
  margin: 0 0 var(--space-2xs);
  border-radius: var(--radius-s);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border: 1px solid var(--color-border);
}

.gallery-tag--haarlinie {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.gallery-tag--fuellflaeche {
  background: var(--color-warning-surface);
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.gallery-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  align-items: center;
  margin-bottom: var(--space-l);
}

/* Nur zur Demonstration der Typo-Skala auf nicht-überschriftlichen Elementen
   (die Seite hat genau eine echte H1 — 04 §15, Prinzip 5). */
.demo-h1,
.demo-h2 {
  font-family: var(--font-serif);
}

.demo-h3,
.demo-h4 {
  font-family: var(--font-family-base);
}

.demo-h1,
.demo-h2,
.demo-h3,
.demo-h4 {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-m);
  text-wrap: balance;
}

.demo-h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-heading);
}

.demo-h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-heading);
}

.demo-h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-tight);
}

.demo-h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-tight);
}

/* ==========================================================================
   22. Werkzeuge (Rechner, Checkliste, Sortier-Tabelle, Speicher-Opt-in)
   Sprint 4, Track T, EP-05 (interaction-developer). Editorial-flach wie das übrige
   Box-System (D-123): Haarlinien statt Karten/Schatten, keine neuen Farb-Tokens.
   ========================================================================== */

/* --- Rechner-Grundmodul (05 §4.7) ---------------------------------------- */

.rechner {
  margin-block: var(--space-l);
}

.rechner fieldset {
  margin: 0 0 var(--space-m);
  padding: 0;
  border: none;
}

.rechner legend {
  padding: 0;
  margin: 0 0 var(--space-m);
  font-family: var(--font-family-base);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.rechner__feld {
  margin-bottom: var(--space-m);
  max-width: 22rem;
}

.rechner__feld label {
  display: block;
  margin-bottom: var(--space-3xs);
  font-weight: var(--font-weight-semibold);
}

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

.rechner__feld input[type="number"] {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-xs);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  background: var(--color-bg-elevated);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-s);
}

.rechner__feld input[type="number"][aria-invalid="true"] {
  border-color: var(--color-danger);
}

.rechner__feld-fehler {
  margin: var(--space-3xs) 0 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-danger-text);
}

.rechner__ergebnis {
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-border);
}

.rechner__status {
  padding: var(--space-s) var(--space-m);
  margin: 0 0 var(--space-m);
  background: var(--color-surface);
  border-radius: var(--radius-m);
  font-weight: var(--font-weight-semibold);
}

.rechner__kennzahlen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-m) var(--space-l);
  margin: 0 0 var(--space-m);
}

@media (min-width: 40rem) {
  .rechner__kennzahlen {
    grid-template-columns: repeat(4, 1fr);
  }
}

.rechner__kennzahl dt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.rechner__kennzahl dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.rechner__teilen {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  flex-wrap: wrap;
}

/* --- Checklisten-Modul (05 §4.6) ------------------------------------------ */

.checkliste {
  margin-block: var(--space-l);
}

.checkliste__fortschritt {
  margin: 0 0 var(--space-s);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.checkliste__gruppe {
  margin: 0 0 var(--space-m);
  padding: 0;
  border: none;
}

.checkliste__gruppe legend {
  padding: 0;
  margin: 0 0 var(--space-s);
  font-family: var(--font-family-base);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.checkliste__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checkliste__punkt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding-block: var(--space-2xs);
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}

.checkliste__punkt:last-child {
  border-bottom: none;
}

.checkliste__punkt input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  accent-color: var(--color-primary);
}

/* Touch-Ziel (04 §14.5, Ziel 44 px für eigenständige Bedienelemente): Die sichtbare Checkbox
   selbst bleibt bei üblichen 24 px (bereits doppelt so groß wie der Browser-Default und
   deckungsgleich mit dem WCAG-2.2-AA-Minimum SC 2.5.8) — klickt/tippt man aber auf das
   zugehörige <label> (per for/id verknüpft), aktiviert der Browser die Checkbox unabhängig
   davon, WO innerhalb der Label-Box der Klick erfolgte. min-height 44px + Flex-Zentrierung
   macht diese gesamte Label-Fläche (nicht nur den Text) zum tatsächlichen, großzügigen
   Bedienziel – analog zur in Sprint 3 (Glossar-Alphabet-Nav) korrigierten Regel. */
.checkliste__punkt label {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-block: var(--space-3xs);
}

/* --- Speicher-Opt-in-Schalter ("Fortschritt speichern?", F-43/D-107) ------ */

.speicher-opt-in {
  margin-block: var(--space-l);
  padding: var(--space-m);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
}

.speicher-opt-in__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-2xs);
}

.speicher-opt-in__schalter {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.speicher-opt-in__schalter input[type="checkbox"] {
  width: 2.5rem;
  height: 1.5rem;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

/* Touch-Ziel: wie .checkliste__punkt label oben — die Label-Fläche (nicht nur die 24px hohe
   Checkbox) ist über min-height 44px das eigentliche, großzügige Bedienziel. */
.speicher-opt-in__schalter label {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: var(--font-weight-semibold);
}

.speicher-opt-in__status {
  margin: var(--space-2xs) 0 0;
  color: var(--color-text-muted);
}

.speicher-opt-in__status:empty {
  /* wie .artikel-teilen__status: geklippt statt display:none, damit aria-live zuverlässig
     ankündigt (Element bleibt im Accessibility-Tree), aber ohne Layout-Sprung im Ruhezustand. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Sortier-Modul für Vergleichstabellen (05 §4.8) ----------------------- */

.sortierbare-tabelle__knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.sortierbare-tabelle__knopf:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.sortierbare-tabelle__pfeil {
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

.table-sortier-status {
  margin: var(--space-2xs) 0 0;
  color: var(--color-text-muted);
}

/* ==========================================================================
   23. Druck-CSS
   ========================================================================== */

@media print {
  body {
    background: none;
    padding: 0;
  }

  .site-shell {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: none;
  }

  .site-header,
  .site-footer,
  .breadcrumbs,
  .nav-toggle,
  .skip-link,
  .artikel-aktion,
  .anzeigen-slot,
  .artikel-toc--mobile,
  .artikel-layout__toc {
    display: none;
  }

  /* Werkzeuge (Sprint 4, Track T, §22): Speicher-Opt-in ist eine geräte-/sitzungslokale
     Einstellung ohne Aussagewert auf Papier; Bedienelemente ohne Papier-Nutzen (Berechnen-/
     Teilen-/Zurücksetzen-Knopf) entfallen. Checkboxen selbst bleiben bewusst sichtbar
     (05 §4.14 "Checklisten mit leeren Kästchen ausdruckbar" — Browser drucken native
     Checkboxen inkl. Ankreuzzustand). */
  .speicher-opt-in,
  .rechner button[type="submit"],
  [data-rechner-teilen-button],
  [data-rechner-teilen-status],
  [data-checkliste-reset] {
    display: none;
  }

  .checkliste__fortschritt {
    color: var(--color-text);
  }

  /* Zwei-Spalten-Layout (Lesespalte + TOC) im Druck aufheben – die TOC-Spalte
     ist ohnehin ausgeblendet (s. o.), die Lesespalte bleibt einspaltig. */
  .artikel-layout--with-toc {
    display: block;
    max-width: none;
  }

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

  .lernbaustein {
    break-inside: avoid;
  }
}