/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════
   blog-faden.css · Blog ins Design-System holen (E93 W-02, ergänzt E43 „Blog bekommt nur den Rahmen“)
   Entwurf 29.09.2026. NICHT eingespielt. Einspielen nach RUNBOOK.md Abschnitt „14 Blog ins Design-System“.

   Befund (nur lesend auf Staging geprüft, novamira-staging-yamato, ABSPATH .../yamato/ bestätigt):
     - Blog-Übersicht = Seite 1933 „Blog“, Inhalt ein Seiten-<style> (self-contained, Klasse .cb4-blog-page),
       Shortcode [cb4_blog_grid] für das Kachel-Grid.
     - Einzelbeiträge, Kategorie-Archiv, Suche, 404 laufen zusätzlich durch
       wp-content/novamira-sandbox/cb4-blog.php (13.844 Bytes): Kachel-Renderer + Kachel-CSS (Grid und
       „Verwandte Artikel“ teilen es), Single-Post-CSS (body.single-post, Hook wp_head Prio 60),
       Autorenbox + Verwandte Artikel (Hook kadence_single_after_entry_content).
     - Beide Quellen sind cb4-Alt-System: eigene Schrift (Red Hat Display, per @import von Google Fonts),
       eigene Farbvariablen (--cb4-orange #B95000, --cb4-dark #1C1917, --cb4-mid #5A5A72 …) oder in
       cb4-blog.php teils ganz ohne Variable direkt als Hex-Wert.

   Was diese Datei tut (zwei Techniken, je nachdem was die Quelle anbietet):
     1. Wo die Quelle var(--cb4-x[, Ersatzwert]) nutzt (Seite 1933 fast durchgehend, cb4-blog.php Kachel-CSS):
        die --cb4-*-Variablen auf v3-Tokens umbiegen. Eine Zeile ersetzt viele.
     2. Wo die Quelle feste Hex-Werte schreibt (cb4-blog.php Single-Post-CSS und Autorenbox: KEINE Variablen):
        die betroffenen Selektoren direkt neu setzen.
     Für Überschriften (H1, H2/H3 im Artikeltext, Kachel-Titel, Autor-Name) zusätzlich Schrift auf Clash
     Display umgestellt (--cb4-font deckt nur den Fließtext ab, s. u.) mit Laufweite +0,02 em (E79, var(--tracking-wide)
     ist bereits genau dieser Wert) und Schriftschnitt auf das Höchste der variablen Schriftdatei (200–700,
     faden-fonts.css) begrenzt (900/800 aus dem Alt-System würde der Browser sonst still auf 700 kappen).

   Spezifität: alle Regeln sind mit `body.fd-rahmen …` bzw. `body.fd-rahmen.single-post …` präfixiert (die Klasse
   fd-rahmen setzt faden-rahmen.php sitewide, single-post ist WordPress-Standard auf Einzelbeiträgen). Das ist
   nötig, weil das cb4-Alt-CSS teils NACH dieser Datei im Dokument steht (Seite 1933 im <body>, cb4-blog.php
   Single-Post-Styles zwar im <head>, aber an wp_head mit Prioritaet 60 – nach den verlinkten Stylesheets) und bei
   gleicher Spezifitaet sonst gewinnen würde. Kein !important nötig (S. Zusatz-CSS-Historie: 272 × !important war
   genau das Problem, das der Port beheben soll).

   Kein Layout-Eingriff: Größen, Abstände, Radien der Bausteine (außer dem Suchfeld, s. u.) bleiben, wie sie sind.
   Nicht Teil dieser Datei (Anfrage an den Koordinator, siehe RUNBOOK K-P3): die zwei @import-Zeilen für Google
   Fonts in Seite 1933 und cb4-blog.php entfernen (DSGVO/N4, unabhängig vom Aussehen – @import laedt weiter,
   auch wenn die Regeln hier die Schrift optisch ersetzen), die acht privaten Demo-Beiträge, das Blog-Card-Design
   selbst (Kachel-Form, Bildformat) – nur Farbe/Schrift/Zustände/Suchfeld wie beauftragt (E93 W-02).
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 --cb4-* auf v3-Tokens mappen ───────────────────────────────────────────────────────────────────────
   Deckt automatisch: .cb4-blog-eyebrow, .cb4-blog-lead-Vererbung, .cb4-blog-search (Icon, Text, Platzhalter,
   Fokusrahmen), .cb4-blog-noresults, alle .cb4-blog-card__*-Farben und .cb4-blog-empty in cb4-blog.php
   (dort steht var(--cb4-x, Ersatzwert) – ohne eigene Definition griff bisher der Ersatzwert). */
body.fd-rahmen .cb4-blog-page,
body.fd-rahmen.single-post {
  --cb4-font: var(--font-sans);                    /* Hanken Grotesk statt Red Hat Display, Fließtext */
  --cb4-orange: var(--text-link);                  /* Orange 600 – Linkfarbe/Hover/Fokus, E78 */
  --cb4-dark: var(--text-primary);                 /* Espresso */
  --cb4-off-white: var(--surface-page);            /* v3: Seite ist Weiß, Greige gestrichen (colors.css Z.61) */
  --cb4-peach: var(--surface-physical-subtle);      /* Kachel-Tintfarbe A (Orange-Familie) */
  --cb4-lavender: var(--surface-mental-subtle);     /* Kachel-Tintfarbe B (Mental-Familie, wie im Original) */
  --cb4-mid: var(--text-secondary);                /* Meta-Grau warm – NUR für Bildunterschrift/Zeitstempel-Rollen */
  --cb4-shadow-card: var(--shadow-sm);
}

/* Direkter Fließtext-Ton für die beiden Stellen, die FK-02 nennt (Subline, Hinweistext „Hier erscheinen bald …“):
   das sind laut Farbsystem-Regel „Fließtext ist immer Espresso“, nicht Meta-Grau (das bleibt für Bildunterschrift/
   Zeitstempel wie card__meta, card__cat, Autorenrolle – siehe unten). Beide nutzen im Original var(--cb4-mid),
   deshalb hier gezielt statt über die gemeinsame Variable. */
body.fd-rahmen .cb4-blog-lead,
body.fd-rahmen .cb4-blog-empty {
  color: var(--text-primary);
}

/* CB4-WP-OVERRIDE in Seite 1933 setzt Schrift/Hintergrund zusätzlich fest (nicht über die Variable) –
   dieselbe Regel hier mit mehr Spezifität erneut. */
body.fd-rahmen .cb4-blog-page {
  font-family: var(--font-sans);
  background: var(--surface-page);
}

/* ── 2 Überschriften: Clash Display, +0,02 em Laufweite (E79), Schnitt im Bereich der Variable Font ───────── */
body.fd-rahmen .cb4-blog-hero h1 {
  font-family: var(--font-heading);
  font-weight: var(--type-display-md-weight);   /* 500 – wie .fd-h1 sitewide, 900 liegt außerhalb 200–700 */
  letter-spacing: var(--tracking-wide);          /* +0,02 em statt −0,03 em */
  color: var(--text-primary);
}
body.fd-rahmen.single-post .entry-header .entry-title {
  font-family: var(--font-heading);
  font-weight: var(--type-display-md-weight);
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}
body.fd-rahmen.single-post .entry-content h2,
body.fd-rahmen.single-post .entry-content h3 {
  font-family: var(--font-heading);
  font-weight: var(--type-title-md-weight);      /* 600 – wie .fd-h3 sitewide */
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}
body.fd-rahmen .cb4-blog-card__title {
  font-family: var(--font-heading);
  font-weight: 600;                              /* wie .fd-tcard b (Kachel-Titel-Muster der Hülle) */
  letter-spacing: var(--tracking-wide);
}
body.fd-rahmen.single-post .cb4-article-related h2 {
  font-family: var(--font-heading);
  font-weight: var(--type-title-lg-weight);      /* 600 – wie .fd-doc h2 (Abschnittstitel in Fließtext) */
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}
body.fd-rahmen.single-post .cb4-article-author__name {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}

/* ── 3 Suchfeld: Rechteck wie das FAQ-Suchfeld (.fd-faqnav__input) statt Pille (FK-03) ──────────────────── */
body.fd-rahmen .cb4-blog-search {
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);               /* 12 px, wie .fd-faqnav__input – kein 999px-Pillenradius mehr */
  background: var(--surface-card);
}
body.fd-rahmen .cb4-blog-search:focus-within {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-focus);               /* Fokusring Orange 600, identischer Token wie das FAQ-Suchfeld */
}

/* ── 4 Einzelbeitrag: feste Hex-Werte direkt ersetzen (cb4-blog.php kennt hier keine Variablen) ───────────── */
body.fd-rahmen.single-post {
  background: var(--surface-page);
}
body.fd-rahmen.single-post .site,
body.fd-rahmen.single-post .content-area {
  background: var(--surface-page);
}
body.fd-rahmen.single-post .entry-meta,
body.fd-rahmen.single-post .entry-meta a {
  color: var(--text-secondary);                  /* Zeitstempel/Meta – bleibt Meta-Grau, nicht Espresso */
}
body.fd-rahmen.single-post .entry-content {
  color: var(--text-primary);
}
body.fd-rahmen.single-post .entry-content a {
  color: var(--text-link);
}
body.fd-rahmen.single-post .entry-content a:hover,
body.fd-rahmen.single-post .entry-content a:focus-visible {
  color: var(--text-link-hover);                 /* Orange 700 – Zustand ergänzt (E78: Hover/Fokus nur Orange/Espresso) */
}
body.fd-rahmen.single-post .entry-content blockquote {
  border-left-color: var(--border-physical);
  background: var(--surface-card);
  color: var(--text-primary);
}
body.fd-rahmen.single-post .entry-content table th,
body.fd-rahmen.single-post .entry-content table td {
  border-color: var(--border-subtle);
}
body.fd-rahmen.single-post .entry-content table th {
  background: var(--surface-fill-soft);
}

/* ── 5 Autorenbox (Hook kadence_single_after_entry_content, ebenfalls feste Hex-Werte) ─────────────────────── */
body.fd-rahmen.single-post .cb4-article-author__avatar {
  background: var(--surface-physical-tint);      /* Orange-Tint … */
  color: var(--text-physical);                   /* … mit 700er Schrift, DS-Regel „Schrift auf Tint“ */
}
body.fd-rahmen.single-post .cb4-article-author__role,
body.fd-rahmen.single-post .cb4-article-author__stand {
  color: var(--text-secondary);
}