/* ============================================================================
   GENERIERT - NICHT VON HAND EDITIEREN (#431)
   Brand: signex
   Quelle (SoT): web-engine/assets/blog.css (geteilte Blog-Schicht)
               + web-engine/brands/signex/blog-tokens.css (Token-Bruecke)
               + web-engine/brands/signex/blog-overrides.css (optional, laedt zuletzt)
   Neu erzeugen: python web-engine/tools/sync_blog_css.py
   Drift-Check:  python web-engine/tools/sync_blog_css.py --check
   Quell-Hash: b87f118e6b96
   ============================================================================ */

/* SIGNEX Token-Bruecke: mappt Site-Tokens (styles.css :root) auf den blog.css-Vertrag.
   GESCOPED auf .post-layout, damit nichts in die uebrigen Site-Styles leckt.
   Nativ vorhanden (kein Mapping noetig): --ink --body --muted --paper --rule --font-body. */
.post-layout{
  --accent:var(--pine);
  --accent-dark:var(--pine-deep);
  --accent-soft:var(--pine-tint);
  --accent-tint:var(--pine-tint);
  --rule-strong:var(--rule);
  --font-head:var(--font-headline);
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --gutter:var(--space-md,2rem);
}

/* ============================================================================
   BLOG.CSS — GETEILTE BLOG-SCHICHT (SoT, web-engine · #431)
   ============================================================================
   Die EINE Wahrheit fuer das Blog-Post-Layout aller Brand-Sites (Blueprint #422,
   auf Seonar bewiesen). Die Engine (seo-engine/engine/publish.py) emittiert das
   Markup brand-agnostisch; diese Datei ist die Web-Schicht dazu.

   VERTEILUNG: Sites halten GENERIERTE Kopien (<Site>/assets/blog.css) =
   Header + Brand-Token-Bruecke (web-engine/brands/<slug>/blog-tokens.css) + diese Datei.
     Neu erzeugen: python web-engine/tools/sync_blog_css.py
     Drift-Check:  python web-engine/tools/sync_blog_css.py --check

   TOKEN-VERTRAG (was diese Schicht von der Site erwartet — nativ oder via Bruecke,
   Bruecke gescoped auf .post-layout, damit nichts in die Site-Styles leckt):
     Farben:  --accent --accent-dark --accent-soft(Tint-Hintergrund!) --accent-tint
              --ink --body --muted --paper --rule --rule-strong
     Fonts:   --font-head --font-body --font-mono
     Layout:  --gutter
   ============================================================================ */

/* ============================================================================
   ARTIKEL-BASIS-TYPO (#431 aus dem Post-Inline-<style> des Seonar-Blueprints gehoben)
   Die Grund-Typografie des Engine-Markups (build_article_html): Hero/Meta/Titel/Lead
   + Body-Fluss (p/h2/a/Listen/blockquote) + Doktrin-Elemente Pull-Quote ([!PULL]) und
   MERKEN-Box ([!MERKEN]). Vorher trug jeder Post sie im eigenen <style>-Block (Donor-
   Vererbung) — neue Brands hatten sie damit NICHT. Seonar-Alt-Posts tragen sie noch
   doppelt inline (identische Werte, harmlos; Entschlackung = spaeterer Republish).
   ============================================================================ */
.article__hero{padding:40px 0 48px;text-align:left}
.article__meta{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:32px}
.article__meta .accent{color:var(--accent)}
.article__title{font-family:var(--font-head);font-weight:900;font-size:clamp(36px,5vw,56px);line-height:1.05;letter-spacing:-0.03em;color:var(--ink);-webkit-text-stroke:0.4px var(--ink);margin-bottom:32px;max-width:24ch}
.article__lead{font-family:var(--font-body);font-weight:400;font-size:19px;line-height:1.6;color:var(--body);max-width:58ch;border-left:3px solid var(--accent);padding-left:18px}
.article__body{padding:32px 0 96px;font-family:var(--font-body);font-size:18px;line-height:1.75;color:var(--body)}
.article__body h2{font-family:var(--font-head);font-weight:900;font-size:32px;line-height:1.15;letter-spacing:-0.025em;color:var(--ink);-webkit-text-stroke:0.35px var(--ink);margin:64px 0 20px}
.article__body p{margin-bottom:24px}
.article__body strong{color:var(--ink);font-weight:700}
.article__body a{color:var(--accent);font-weight:600;border-bottom:1px solid var(--accent-tint);transition:border-color .2s}
.article__body a:hover{border-bottom-color:var(--accent)}
.article__body ul, .article__body ol{margin:0 0 24px 24px;padding:0}
.article__body ul li, .article__body ol li{padding-left:8px;margin-bottom:8px}
.article__body ul{list-style:disc}
.article__body ol{list-style:decimal}
.article__body blockquote{margin:32px 0;padding:24px 28px;background:var(--accent-soft);border-left:3px solid var(--accent);font-style:italic;font-size:17px;line-height:1.6}
.article__body blockquote p:last-child{margin-bottom:0}
/* Pull-Quote ([!PULL], Doktrin) */
.post-pull{font-family:var(--font-head);font-weight:900;font-size:26px;line-height:1.3;letter-spacing:-0.02em;color:var(--accent-dark);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:28px 0;margin:40px 0;text-align:center}
/* MERKEN-Box ([!MERKEN], Doktrin): Basis-Look (Tint/Akzent-Kante/Pill) */
.post-highlight{position:relative;background:var(--accent-tint);border-left:4px solid var(--accent);border-radius:0 8px 8px 0;padding:26px 28px 22px;margin:36px 0}
.post-highlight::before{content:"MERKEN";position:absolute;top:-10px;left:16px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;font-weight:700;color:var(--accent-dark);background:var(--paper);padding:2px 10px;border:1px solid var(--accent);border-radius:999px}
.post-highlight p{font-size:16px;line-height:1.65;margin-bottom:0;color:var(--ink)}
@media(max-width:900px){
  .article__hero{padding:48px 0 32px}
  .article__body{padding:16px 0 64px;font-size:17px}
  .article__body h2{font-size:26px;margin:48px 0 16px}
  .post-pull{font-size:21px}
}

/* ============================================================================
   BLOG-MERKEN-BOX (#419 als Float-Randnotiz; #422 zurück auf VOLLE BREITE, Esteban)
   Die [!MERKEN]-Box läuft im Lesefluss, volle Breite, links. Der #419-Float-Aside quetschte
   den Body rechts daneben und wirkte "nach rechts geschoben" (Esteban #422). Basis-Look
   (.post-highlight: Tint/Akzent-Kante/MERKEN-Pill) kommt aus dem Post-eigenen <style>-Block;
   hier Rhythmus + die NEUTRALISIERTE Alt-Klasse .post-highlight--aside (bestehende Posts tragen
   --aside noch im HTML -> so rendern auch sie voll-breit statt gefloatet). EINE Wahrheit.
   ============================================================================ */
.article__body .post-highlight{clear:both;margin:36px 0}
.article__body .post-highlight--aside{float:none;width:auto;max-width:none;margin:36px 0;padding:26px 28px 22px}
.article__body .post-highlight--aside p{font-size:16px;line-height:1.65}

/* Blog-Hero-Cover (#419, t-0609): brand-Cover als Banner oben im Artikel (zugleich og:image) */
.article__cover{width:100%;height:auto;aspect-ratio:1200/630;border-radius:12px;border:1px solid var(--rule);margin-bottom:36px;display:block}

/* ============================================================================
   BLOG-GRAFIKEN (#419, t-0609) — brand-stilige In-Content-Visuals (grafik.py)
   split-bar = SVG (Proportion); stat + checkliste = HTML (Text bleibt KI-extrahierbar).
   ============================================================================ */
.article__body .post-figure{clear:both;margin:40px 0}
.article__body .post-figure svg{border:1px solid var(--rule,#e2e8f0);border-radius:10px;background:var(--paper,#fff);padding:24px 26px}
.article__body .post-figure figcaption{margin-top:12px;font-size:13px;line-height:1.55;color:var(--muted);font-style:italic}
/* stat-card: grosse Zahl + Kontext + Quelle */
.article__body .post-stat{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:0 10px 10px 0;background:var(--accent-soft);padding:24px 28px}
.article__body .post-stat__num{font-family:var(--font-head);font-weight:900;font-size:clamp(40px,6vw,60px);line-height:1;letter-spacing:-0.03em;color:var(--accent-dark)}
.article__body .post-stat__label{font-weight:700;color:var(--ink);margin:0 0 6px}
.article__body .post-stat__ctx{font-size:15px;line-height:1.55;color:var(--body);margin:0}
.article__body .post-stat__src{display:block;margin-top:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--muted)}
.article__body .post-stat figcaption{grid-column:1 / -1}
/* branded Checkliste: Akzent-Haken statt Bullet */
.article__body .post-checkliste{border:1px solid var(--rule);border-radius:10px;background:var(--paper);padding:24px 28px}
.article__body .post-checkliste__titel{font-family:var(--font-head);font-weight:900;font-size:19px;color:var(--ink);margin:0 0 14px}
.article__body .post-checkliste__list{list-style:none;margin:0;padding:0}
.article__body .post-checkliste__list li{position:relative;padding:9px 0 9px 32px;border-top:1px solid var(--rule);font-size:16px;line-height:1.55;color:var(--body)}
.article__body .post-checkliste__list li:first-child{border-top:none}
.article__body .post-checkliste__list li::before{content:"✓";position:absolute;left:4px;top:9px;color:var(--accent);font-weight:900}
@media(max-width:640px){
  .article__body .post-stat{grid-template-columns:1fr;gap:10px}
}

/* ============================================================================
   BLOG-TABELLE (#422) — harte Regeln statt Inline-Style-Zufall.
   Kopfzellen brechen NICHT um (Esteban: "über" landete auf einer eigenen Zeile). Konsistenter
   Rhythmus + Rahmen. Neue Posts sind klassen-basiert (.post-table) -> diese Regeln greifen voll;
   der Content-Auftrag hält Tabellen-Header kurz, damit nowrap auf Desktop nie überläuft.
   ============================================================================ */
.article__body .post-table{width:100%;border-collapse:collapse;margin:36px 0;font-size:16px}
.article__body .post-table th{white-space:nowrap;text-align:left;padding:12px 14px;border-bottom:2px solid var(--rule-strong);font-weight:700;color:var(--ink)}
.article__body .post-table td{padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.55}
.article__body .post-table tbody tr:last-child td{border-bottom:none}
@media(max-width:640px){
  .article__body .post-table{font-size:15px}
  .article__body .post-table th{white-space:normal}
}

/* ============================================================================
   BLOG-TYPOGRAFIE + LISTEN (#422) — kein einzelnes Wort allein auf der letzten Zeile.
   Esteban: "immer ein Wort auf der zweiten Zeile, sieht mega unschön aus" = Orphan/Widow.
   text-wrap:pretty bricht Absätze UND Bullets so um, dass die letzte Zeile nie ein Einzelwort
   ist (vererbte Property -> greift auf alle Body-Elemente). Plus: Body-Listen atmen (.post-list).
   ============================================================================ */
.article__body{text-wrap:pretty}
.article__body ul.post-list, .article__body ol.post-list{margin:0 0 28px 22px;padding:0}
/* balance (statt pretty) auf den kurzen Bullets: gleicht die Zeilen gleich lang aus -> nie ein
   Einzelwort auf der letzten Zeile (pretty allein liess "Fach-Jargon." noch orphan stehen). */
.article__body ul.post-list li, .article__body ol.post-list li{margin-bottom:14px;padding-left:6px;line-height:1.65;text-wrap:balance}
.article__body ul.post-list li:last-child, .article__body ol.post-list li:last-child{margin-bottom:0}

/* ============================================================================
   BLOG-LAYOUT 3-SPALTIG + SIDEBAR (#422) — Struktur der letsreachsuccess-Referenz.
   Artikel-Hauptspalte (max ~720px) + linke TOC-Leiste + rechte, sticky Sidebar (Suche +
   Verwandte Beiträge + faktische Betreiber-Info). Engine emittiert das Markup brand-agnostisch
   (publish.build_article_html + blog_sidebar_html); diese Klassen sind die Web-Schicht
   (seit #431 GETEILT: SoT web-engine/assets/blog.css, Kopien pro Site generiert).
   Mobile: Sidebar stapelt UNTER den Artikel.
   ============================================================================ */
/* 3-spaltig (#422, Esteban: rechts war zu viel los): LINKE TOC-Leiste (Navigation) + Artikel (Inhalt) +
   rechte Sidebar (Meta). Klare Hierarchie, beide Leisten sticky. Unter 1080px -> einspaltig, TOC oben. */
.post-layout{max-width:1320px;margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:220px minmax(0,1fr) 210px;column-gap:44px;align-items:start}
.post-main{min-width:0;max-width:720px}
.post-main .article__hero{padding-top:8px}
.post-main .article__body{padding-bottom:64px}
/* Beide Leisten oben angeheftet (#422, Esteban: passt oben besser) */
.post-toc{position:sticky;top:96px}
.blog-sidebar{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px}
/* TOC groesser (primaere Navigation), rechte Sidebar etwas kleiner (#422) */
.post-toc .sidebar-block__title{font-size:12px}
.post-toc .sb-toc a{font-size:15px;padding-left:14px}
.post-toc .sb-toc li{margin-bottom:13px}
.blog-sidebar .sidebar-block__title{font-size:10px}
.blog-sidebar .sb-related a{font-size:13px}
.blog-sidebar .sb-search__form input{font-size:13px;padding:8px 10px}
.blog-sidebar .sb-betreiber__avatar{width:44px;height:44px}
.blog-sidebar .sb-betreiber__id strong{font-size:14px}
.blog-sidebar .sb-betreiber__mail{font-size:12px}
.sidebar-block__title{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
/* Suche */
.sb-search__form{display:flex;gap:8px}
.sb-search__form input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--rule-strong);border-radius:8px;font-family:var(--font-body);font-size:14px;background:var(--paper);color:var(--ink)}
.sb-search__form input:focus{outline:none;border-color:var(--accent)}
.sb-search__form button{flex-shrink:0;width:42px;border:none;border-radius:8px;background:var(--accent);color:#fff;font-size:18px;font-weight:700;cursor:pointer;transition:background .2s}
.sb-search__form button:hover{background:var(--accent-dark)}
/* Verwandte Beiträge */
.sb-related ul{list-style:none;margin:0;padding:0}
.sb-related li{margin-bottom:14px;line-height:1.4}
.sb-related li:last-child{margin-bottom:0}
.sb-related a{color:var(--ink);font-weight:600;font-size:14px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.sb-related a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* Betreiber-Info (faktisch, Tool-Frame) */
.sb-betreiber__id{display:flex;align-items:center;gap:12px;margin-bottom:10px;text-decoration:none;color:inherit}
.sb-betreiber__id:hover strong{color:var(--accent)}
.sb-betreiber__avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:center top;flex-shrink:0}
.sb-betreiber__id strong{font-family:var(--font-head);font-weight:900;font-size:15px;color:var(--ink);line-height:1.2}
.sb-betreiber__mail{font-size:13px;color:var(--accent);font-weight:600}
/* Inhaltsverzeichnis (#422): Sprung-Links zu den Kapiteln (wie RunTheSim) */
.sb-toc ul{list-style:none;margin:0;padding:0}
.sb-toc li{margin-bottom:10px;line-height:1.35}
.sb-toc li:last-child{margin-bottom:0}
.sb-toc a{display:block;color:var(--muted);font-size:13.5px;font-weight:600;border-left:2px solid var(--rule);padding-left:12px;transition:color .2s,border-color .2s}
.sb-toc a:hover{color:var(--accent);border-left-color:var(--accent)}
/* Scroll-Spy (#422): aktuell gelesenes Kapitel hervorgehoben */
.sb-toc a.is-active{color:var(--accent-dark);border-left-color:var(--accent);font-weight:700}
/* Sprung-Ziele unter der sticky Nav ausrichten + sanftes Scrollen
   (scroll-behavior steht auch in Site-CSS mancher Brands — doppelt ist harmlos) */
html{scroll-behavior:smooth}
.article__body h2{scroll-margin-top:96px}
@media(max-width:1080px){
  .post-layout{grid-template-columns:1fr;column-gap:0;max-width:720px}
  .post-main{max-width:none}
  .post-toc{position:static;transform:none;margin-bottom:8px}
  .blog-sidebar{position:static;transform:none;margin-top:56px;padding-top:40px;border-top:1px solid var(--rule)}
}


/* ---------------- Brand-Overrides (laden zuletzt, gewinnen bei Gleichstand;
   SoT: web-engine/brands/signex/blog-overrides.css) ---------------- */
/* SIGNEX Blog-Overrides (#431, Esteban): mehr Luft zwischen Navigation und Post-Raster.
   Befund: TOC-Leiste + Sidebar klebten an der Nav, der Artikel sass zu hoch. Wirkt auf
   alle drei Spalten (Padding am Grid-Container). Brand-spezifisch, NICHT ins geteilte
   Raster: Seonar ist abgenommen und bleibt unveraendert. */
.post-layout{padding-top:56px}