/* NF Mentoring · pages/blog.css · Build-Output von build.mjs – nicht von Hand ändern. Quellen: src/pages/blog/, src/blocks/. */

/* ── src/blocks/cta-band.css ── */
/* Baustein cta-band · Namensraum .b-cta-band (Slice V5-P0). Steht in einer Section mit data-theme (Farben über --text …).
   Rev. 6 (V9-A0): ruhiger, symmetrischer Schlussblock auf white oder grey: zentriert, höchstens 640 px breit, Text 36rem,
   gleiche Abstände (die Section liefert oben/unten --section-y), Knopf einzeilig mit Microcopy darunter, mobil volle Breite.
   Keine eigene Fläche, kein Verlauf, kein Raster: Hintergrund, Schrift (--text/--text-soft/--text-mute ≥ 4,5:1) und der zarte
   Rotschein des Knopfs (--nf-shadow-btn-hell) kommen aus dem Theme der Section.
   V11-C (Farbwelt Rev. 7, bauplan v11 §1/§4): Schluss-CTA auf data-theme="red" (Rot-Verlauf); der Primärknopf liest --btn1-*
   und steht dort invers (weiß mit rotem Text, 6,98:1), Microcopy --text-mute (Weiß 85 %, 5,39:1 am hellsten Stopp #AE1D2B).
   Variante, wenn die Section davor dunkel ist (olive/red, nie zwei dunkle Flächen nacheinander): dieselbe Section mit
   data-theme="olive-light" (Knopf Rot-Verlauf, Microcopy grey-500 4,62:1 am Verlaufsende); der Baustein selbst bleibt
   gleich: die Section in src/pages wählt das Attribut (Regel: Vorgänger-Section olive oder red → olive-light, sonst red). */
.b-cta-band { display: grid; justify-items: center; gap: 16px; width: 100%; max-width: 40rem; margin-inline: auto; text-align: center; }
.b-cta-band__titel { max-width: 100%; }
.b-cta-band__text { max-width: 36rem; }
.b-cta-band__aktion { display: grid; justify-items: center; gap: 12px; margin-top: 12px; }
.b-cta-band__cta { white-space: nowrap; }
.b-cta-band__micro { margin: 0; color: var(--text-mute); }
@media (max-width: 599px) {
  .b-cta-band__aktion { justify-items: stretch; width: 100%; }
  .b-cta-band__cta { width: 100%; }
}
@media (max-width: 400px) { .b-cta-band__cta { white-space: normal; } .b-cta-band__cta, .b-cta-band__micro { text-wrap: balance; } }   /* V9-FX1 (mob-freebies-05): keine Waise „passt“/„unverbindlich“ */

/* ── src/pages/blog/01-kopf.css ── */
/* /blog · 01-kopf · Namensraum .pg-blog-01-kopf (Slice V5-PB). Oliv (Farbwelt Rev. 4, Raster-Klasse bleibt), Pille, H1 mit Akzent, Leitsatz. */
.pg-blog-01-kopf { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 88px)); padding-bottom: clamp(48px, 7vw, 96px); overflow: hidden; }
.pg-blog-01-kopf__pill { margin-bottom: 18px; }
.pg-blog-01-kopf__title { max-width: 14em; padding-bottom: 0.06em; }
.pg-blog-01-kopf__lead { max-width: 44ch; margin-top: 22px; }

/* ── src/pages/blog/02-artikel.css ── */
/* /blog · 02-artikel · Namensraum .pg-blog-02-artikel (Slice V5-PB)
   Fläche grey (V9, Farbwelt Rev. 6; vorher Hell-Oliv/Creme). Leseliste statt Kartenraster: je Artikel eine weiße Zeile (Rollen
   --surface-card/--shadow-card), Datum olive-deep, „Zum Artikel“ als Pfeil-Link in Tinte (Hover wine). Mobil: Datum/Lesezeit über dem
   Titel. Ab 900 px drei Spalten: Datumsspalte (11 rem), Titel + Anriss, „Zum Artikel“ rechts. */
.pg-blog-02-artikel__title { margin-bottom: clamp(24px, 4vw, 40px); }
.pg-blog-02-artikel__liste { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.pg-blog-02-artikel__zeile {
  position: relative;
  display: grid;
  gap: 12px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.pg-blog-02-artikel__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--text-mute); font-size: var(--fs-small); }
.pg-blog-02-artikel__meta time { color: var(--nf-olive-deep); font-weight: 800; }
.pg-blog-02-artikel__inhalt { display: grid; gap: 10px; }
.pg-blog-02-artikel .pg-blog-02-artikel__titel { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); line-height: 1.25; text-wrap: balance; }
.pg-blog-02-artikel__link { color: inherit; text-decoration: none; }
.pg-blog-02-artikel__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pg-blog-02-artikel__link:focus-visible { outline: none; }
.pg-blog-02-artikel__zeile:has(.pg-blog-02-artikel__link:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.pg-blog-02-artikel__text { max-width: 62ch; margin: 0; color: var(--text-soft); line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .pg-blog-02-artikel__zeile:hover { border-color: var(--nf-line-olive-pill); box-shadow: var(--shadow-media); transform: translateY(-2px); }
  .pg-blog-02-artikel__zeile:hover .pg-blog-02-artikel__mehr { color: var(--accent-text); }
  .pg-blog-02-artikel__zeile:hover .pg-blog-02-artikel__mehr svg { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .pg-blog-02-artikel__zeile { transition: none; }
  .pg-blog-02-artikel__zeile:hover { transform: none; }
}
@media (min-width: 900px) {
  .pg-blog-02-artikel__zeile { grid-template-columns: 11rem minmax(0, 1fr) auto; align-items: center; column-gap: clamp(24px, 3vw, 48px); }
  .pg-blog-02-artikel__meta { flex-direction: column; align-self: start; padding-top: 6px; }
}

/* ── src/pages/blog/03-nino.css ── */
/* /blog · 03-nino · Namensraum .pg-blog-03-nino (Slice V5-PB)
   Fläche white (V9, Farbwelt Rev. 6: nur Weiß und Grau; Kennzahlen/Rahmen über Rollen, auf Weiß graue Kachel). Mobil: Foto in
   Spaltenbreite (max. 420 px, Ausschnitt 4:5, Kopf mit Luft) über dem Text; vorher 60 % schmal links mit leerer Fläche daneben.
   Ab 900 px Foto links (max. 360 px, ganzes Hochformat), Text rechts, Block mittig in der Seite (vorher nach links versetzt). */
.pg-blog-03-nino__grid { display: grid; gap: clamp(28px, 4vw, 48px); }
.pg-blog-03-nino__bild { width: 100%; max-width: 420px; margin: 0; }
.pg-blog-03-nino__bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; border-radius: calc(var(--radius-md) - 6px); }
.pg-blog-03-nino__text { display: grid; justify-items: start; gap: 22px; }
.pg-blog-03-nino__lead { max-width: 48ch; }
.pg-blog-03-nino__stats { width: 100%; max-width: 34rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-blog-03-nino .pg-blog-03-nino__stats .stat { border-top: 0; border-left: 1px solid var(--hairline); }
.pg-blog-03-nino .pg-blog-03-nino__stats .stat:first-child { border-left: 0; }
.pg-blog-03-nino__absatz { max-width: 56ch; margin: 0; color: var(--text-soft); line-height: 1.65; }
@media (max-width: 420px) {
  .pg-blog-03-nino .pg-blog-03-nino__stats .stat { padding-inline: 12px; }
}
@media (min-width: 900px) {
  .pg-blog-03-nino__grid { grid-template-columns: minmax(0, 360px) minmax(0, 38rem); justify-content: center; align-items: center; column-gap: clamp(48px, 6vw, 96px); }
  .pg-blog-03-nino__bild { width: 100%; max-width: 360px; justify-self: stretch; }
  .pg-blog-03-nino__bild img { aspect-ratio: auto; }
}

/* ── src/pages/blog/04-presse.css ── */
/* /blog · 04-presse · Namensraum .pg-blog-04-presse (Slice V5-PB)
   Fläche grey (V9, Farbwelt Rev. 6; vorher white). Zwei weiße Karten (Rollen --surface-card, Haarlinie, weicher Schatten) mit
   Bildfläche im Kartenrand (8 px), Bild ganz (contain); Quelle olive-deep, Link in Tinte (Hover wine). Mobil untereinander, ab
   768 px nebeneinander; „Zum Artikel“ unten bündig, auch wenn ein Titel eine Zeile mehr hat (V9 Symmetrie). */
.pg-blog-04-presse__title { margin-bottom: clamp(24px, 4vw, 40px); }
.pg-blog-04-presse__liste { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.pg-blog-04-presse__karte {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  padding: 8px 8px clamp(20px, 2.5vw, 26px);
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.pg-blog-04-presse__media { position: relative; overflow: hidden; aspect-ratio: 2 / 1; border-radius: calc(var(--radius-md) - 8px); background: var(--nf-ink-0); }
.pg-blog-04-presse__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* V9 (bild-b-02): das Königsmacher-Bild ist 800 × 445 statt 2:1; die Seitenstreifen tragen seine gemessene Randfarbe (#1F2631)
   statt Schwarz, Logo unten und Titel oben bleiben ganz (cover hätte sie angeschnitten) */
.pg-blog-04-presse__media--rand-marine { background: #1F2631; }
.pg-blog-04-presse__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-inline: clamp(12px, 2vw, 20px); }
.pg-blog-04-presse__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--text-mute); font-size: var(--fs-small); }
.pg-blog-04-presse__meta span:first-child { color: var(--nf-olive-deep); font-weight: 800; }
.pg-blog-04-presse .pg-blog-04-presse__karte-titel { font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem); line-height: 1.3; text-wrap: balance; }
.pg-blog-04-presse__link { margin-top: auto; padding-top: 4px; }
@media (min-width: 768px) {
  .pg-blog-04-presse__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* V11-D Rhythmus Rev. 7: zweite Hell-Oliv-Fläche der Seite, Verlauf gespiegelt (bauplan §4) */
.pg-blog-04-presse { --h-winkel: 195deg; }