/* ==========================================================================
   BLOG – Liste und Beitrag

   ABLEITUNGEN, nichts neu erfunden:
     .blkopf      von .unkopf (/unternehmen/) – Bogen-Hero mit Motiv
     .blkarte     von .rez__card (/rezepte/) – Bild oben, Text darunter
     .blaufmacher von .unmarke – Bild neben Text, hier ohne Wechsel
     Filterpillen kommen aus components/filterleiste.css, unveraendert
     Die Karten unter dem Beitrag aus components/wegekarte.css

   GEMELDET: .blkopf ist die SECHSTE Kopie des Bogen-Heros neben .hekopf,
   .unkopf, .kakopf, .hikopf und .rezkopf. Der Bogen selbst liegt als
   components/schwung.css vor, die Kopfzeile darum herum nicht. Das ist der
   naechste sinnvolle Zusammenzug - hier bewusst nicht mitgemacht, weil er
   fuenf abgenommene Seiten anfasst.
   ========================================================================== */

/* --- Kopf ---------------------------------------------------------------- */
/* Bauform in components/bogenhero.css. Der Blog steht enger: keine
   Mindesthoehe, der Innenabstand bestimmt die Hoehe allein. */
.blkopf {
  --hero-hoehe: 0;
  --hero-polster: clamp(var(--sp-8), 9vw, var(--sp-9));
  --hero-polster-fuss: clamp(var(--sp-8), 9vw, var(--sp-9));
  --schwung-grund: var(--surface);
}

/* Zuruecklink wie auf der Rezeptseite: Pfeil nach LINKS, weil er zurueckfuehrt. */
.blkopf__zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--toem-blau);
  transition: color var(--dur-hover) var(--ease-hover);
}
/* GEMESSEN: zwischen Zuruecklink und Kategoriezeile lagen 0 px. Der Link
   traegt zwar 2.75rem Mindesthoehe fuer das Tap-Target, sein Kasten endet
   aber direkt an der Zeile darunter - optisch klebte beides aneinander. */
.blkopf__zurueck { margin-bottom: var(--sp-5); }
.blkopf__zurueck:hover,
.blkopf__zurueck:focus-visible { color: var(--toem-gold); }
.blkopf__zurueck svg { width: var(--zeichen-inline); height: var(--zeichen-inline); flex: none; }
/* Metazeile: Datum, Autor, Lesedauer, getrennt durch Punkte. */
.blkopf__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  font-size: var(--fs-200);
  color: var(--text-muted);
}
.blkopf__meta i {
  width: 3px; height: 3px;
  flex: none;
  border-radius: 50%;
  background: var(--c-grau-300);
}
/* Der Beitragskopf traegt keinen Bogen - er ist eine Leseseite, keine
   Imageseite. Deshalb hier eine gerade Kante und weniger Hoehe. */
/* MIT BOGEN, auf Kundenwunsch vom 30.08.2026. Vorher schloss der
   Beitragskopf mit einer geraden Kante und einer Haarlinie ab - er war der
   einzige Kopf im Projekt ohne Bogen.
   Der Fussabstand rechnet die Bogenhoehe mit, wie auf /historie/ und
   /karriere/: min(6.25vw, 6rem) ist der Bogen, darunter kommt der
   eigentliche Abstand. Mit einem festen Wert ruecken Metazeile und Bogen auf
   schmalen Schirmen zusammen. */
.blkopf--beitrag {
  --hero-polster: clamp(var(--sp-7), 7vw, var(--sp-8));
  --hero-polster-fuss: calc(min(6.25vw, 6rem) + var(--sp-6));
  --schwung-grund: var(--surface);
}
/* OHNE MOTIV WIRD DER KOPF FLACHER, seit der Medienslider im Artikel steht
   (04.09.2026). Die Bauform setzt min-height: 34rem, damit ein Motiv Platz
   hat - ohne Motiv sind das 544 px, die niemand fuellt. Gemessen standen
   zwischen Metazeile und Vorspann 266 px leeres Weiss.
   --hero-hoehe: 0 nimmt nur die Mindesthoehe; die Hoehe kommt dann vom Text
   plus Polster. Das Fusspolster behaelt den Platz fuer den Bogen (die
   6,25vw), gibt aber die zusaetzlichen 32 px auf 12 px zurueck - der Bogen
   braucht seine Hoehe, der Text darunter nicht denselben Abstand wie zu
   einem Motiv.

   :not(:has(...)) STATT EINER ZWEITEN KLASSE: setzt jemand das Motiv wieder
   ein, kommt die Hoehe von allein zurueck. Mit einer Klasse waeren es zwei
   Stellen, und die zweite wird vergessen. Browser ohne :has() zeigen den
   hoeheren Kopf, also den bisherigen Zustand - kein Bruch. */
.blkopf--beitrag:not(:has(.bogenhero__media)) {
  --hero-hoehe: 0;
  --hero-polster-fuss: calc(min(6.25vw, 6rem) + var(--sp-3));
}

/* --- Aufmacher ----------------------------------------------------------- */
.blneu { background: var(--surface); padding-block: var(--sp-sektion); }
.blneu__ueber { margin-bottom: var(--sp-8); }
.blaufmacher {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: center;
  text-decoration: none;
  border-radius: var(--r-card);
  transition: transform var(--dur-hover) var(--ease-hover);
}
.blaufmacher:hover,
.blaufmacher:focus-visible { transform: translateY(-2px); }
.blaufmacher__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--bg-platzhalter);
}
.blaufmacher__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blaufmacher__body { display: grid; gap: var(--sp-3); align-content: start; }
.blaufmacher__meta,
.blkarte__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  font-size: var(--fs-200);
  color: var(--text-muted);
}
.blaufmacher__meta i,
.blkarte__meta i {
  width: 3px; height: 3px;
  flex: none;
  border-radius: 50%;
  background: var(--c-grau-300);
}
.blaufmacher__titel {
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--toem-blau);
}
.blaufmacher__teaser {
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.blaufmacher__pfeil {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--toem-blau);
  transition: color var(--dur-hover) var(--ease-hover);
}
.blaufmacher:hover .blaufmacher__pfeil,
.blaufmacher:focus-visible .blaufmacher__pfeil { color: var(--toem-gold); }
.blaufmacher__pfeil svg {
  width: var(--zeichen-inline); height: var(--zeichen-inline); flex: none;
  transition: translate var(--dur-hover) var(--ease-hover);
}
.blaufmacher:hover .blaufmacher__pfeil svg { translate: var(--sp-2) 0; }

/* --- Liste --------------------------------------------------------------- */
.blliste { background: var(--bg-soft); padding-block: var(--sp-sektion); }
.blliste__ueber { margin-bottom: var(--sp-6); }
/* DREI SPALTEN, FEST - nicht auto-fit. Zwei Gruende, beide auf Kundenwunsch
   vom 30.08.2026:
   1. Vierspaltig wurden die Karten 278 px breit; dreispaltig sind es 381.
   2. Mit auto-fit haette eine gefilterte Ansicht mit nur einem Beitrag
      dessen Karte ueber die volle Containerbreite gezogen. Feste Spalten
      halten die Kartenbreite, egal wie viele Karten sichtbar sind. */
.blliste__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--sp-5), 3vw, var(--sp-6));
  /* Der viermal gemachte Fehler: ohne align-content wandert ueberschuessige
     Hoehe in alle Zeilen und verschiebt die Ueberschriften. */
  align-content: start;
  margin-top: var(--sp-7);
}
.blkarte {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--sp-4);
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-karte);
  text-decoration: none;
  transition: transform var(--dur-hover) var(--ease-hover),
              box-shadow var(--dur-hover) var(--ease-hover);
}
.blkarte:hover,
.blkarte:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-2); }
/* ZWINGEND, siehe components/filterleiste.css: das hidden-Attribut setzt
   display: none nur im Browser-Stylesheet und verliert gegen das display:
   grid dieser Karte. Ohne diese Zeile stehen ausgefilterte Beitraege weiter
   da - gemessen: Filter "Menschen" gesetzt, Zaehler sagte 2, sichtbar waren
   weiter alle 7. */
.blkarte[hidden] { display: none; }
.blkarte__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-platzhalter); }
.blkarte__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blkarte__body {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: 0 var(--sp-5) var(--sp-5);
}
.blkarte__titel {
  font-size: var(--fs-400);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--toem-blau);
}
.blkarte__teaser {
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.blliste__leer {
  margin-top: var(--sp-7);
  display: grid;
  justify-items: start;
  gap: var(--sp-4);
}
/* DIESELBE FALLE ZUM ZWEITEN MAL auf dieser Seite: das display: grid oben
   schlaegt das display: none, das der Browser dem hidden-Attribut gibt. Die
   Leermeldung stand deshalb dauerhaft unter der vollstaendigen Liste. Jedes
   Element, das per hidden geschaltet wird UND ein eigenes display traegt,
   braucht diese Zeile. */
.blliste__leer[hidden] { display: none; }
.blliste__leer p { margin: 0; font-size: var(--fs-300); color: var(--text-muted); }

/* --- Der Beitrag --------------------------------------------------------- */
.blbeitrag { background: var(--surface); padding-block: var(--sp-sektion); }
/* LINKSBUENDIG UND BEGRENZT: 52rem ist dieselbe Lesebreite wie auf den
   Stellendetailseiten. Zentrierter Fliesstext liest sich schlechter, eine
   volle Containerbreite ebenfalls. */
/* LANGE WOERTER MUESSEN BRECHEN. Der Beitragstext ist der einzige Ort der
   Website, an dem der Kunde frei schreibt - was dort steht, weiss heute
   niemand. GEMESSEN an einem Testbeitrag bei 320 px:
   "Donaudampfschifffahrtsgesellschaftskapitaen" schob die ganze Seite um
   25 px seitwaerts, und zwar ohne dass ein einziges ELEMENT ueber den Rand
   ragte - der Text lief aus seinem Absatz, nicht der Absatz aus seiner
   Spalte. Deshalb fand die Pruefung zuerst keinen Verursacher.
   Deutsche Hauptwoerter dieser Laenge sind hier keine Erfindung:
   "Lebensmitteleinzelhandel" steht schon auf zwei Seiten.
   hyphens trennt nach deutschen Regeln (lang="de" setzt WordPress),
   overflow-wrap faengt, was sich nicht trennen laesst - Adressen,
   Kennungen, zusammengeschriebene Produktnamen. */
.blbeitrag__grid > * {
  max-width: 52rem;
  hyphens: auto;
  overflow-wrap: break-word;
}
/* GROESSER UND DICKER, Wunsch vom 04.09.2026. Vorher --fs-400 (18 px) im
   Grundgewicht - der Vorspann unterschied sich damit vom Fliesstext nur um
   zwei Pixel und war als Einleitung kaum zu erkennen.
   Jetzt --fs-450 (20 px) und Gewicht 500. Die Stufe ist neu, siehe
   tokens.css; --fs-500 waere bei 1440 px 28 px gross und damit so gross wie
   die Abschnittsueberschriften.
   GEWICHT 500, NICHT 600: 600 tragen die Abschnittsueberschriften. Ein
   Vorspann in deren Gewicht waere eine zweite Ueberschrift. 500 ist im
   Projekt eingefuehrt und kommt 73 Mal vor. */
.blbeitrag__vorspann {
  margin: 0 0 var(--sp-7);
  font-size: var(--fs-450);
  font-weight: 500;
  line-height: var(--lh-body);
  color: var(--toem-blau);
}
.blbeitrag__teil { margin-bottom: var(--sp-7); }
.blbeitrag__teil:last-child { margin-bottom: 0; }
.blbeitrag__ueber {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-500);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--toem-blau);
}
.blbeitrag__teil p {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.blbeitrag__teil p:last-child { margin-bottom: 0; }

/* --- Sprungmarken -------------------------------------------------------- */
.blmarken {
  margin: 0 0 var(--sp-8);
  padding: var(--sp-5);
  background: var(--bg-soft);
  border-radius: var(--r-card);
}
.blmarken__ueber {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.blmarken__liste { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.blmarken__liste a {
  font-size: var(--fs-300);
  color: var(--toem-blau);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-hover);
}
.blmarken__liste a:hover,
.blmarken__liste a:focus-visible { color: var(--toem-gold); text-decoration: underline; }

/* --- Weiterlesen --------------------------------------------------------- */
.blwege { background: var(--bg-soft); padding-block: var(--sp-sektion); }
.blwege__ueber { margin-bottom: var(--sp-8); }
.blwege__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--sp-5), 3vw, var(--sp-6));
  align-content: start;
}

@media (max-width: 56rem) {
  .blaufmacher { grid-template-columns: minmax(0, 1fr); }
  /* Drei Spalten brauchen Platz. Bei 896 px waeren die Karten 277 px breit,
     also wieder so schmal wie das verworfene vierspaltige Raster. */
  .blliste__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 38rem) {
  .blwege__grid,
  .blliste__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Medien am Anfang des Beitrags --------------------------------------
   Kundenwunsch vom 04.09.2026: "auf der Detailseite der Blogeintraege auch
   Bilder und Videos einbinden koennen. Vielleicht einen Slider mit Bildern
   und Videos am Anfang des Artikels und optional Bilder als Trennung im
   Text?"

   Der Slider ist components/galerie.css in der Variante --breit, also
   dasselbe Bauteil wie auf den Produktseiten. Hier steht nur, WO er sitzt.

   GENAUSO BREIT WIE DER TEXT, also 52rem aus .blbeitrag__grid - hier steht
   deshalb KEINE eigene Breite mehr.
   Erst hatte ich 64rem gesetzt, damit der Slider nicht eingeklemmt wirkt.
   Die Frage vom 04.09.2026 - Text verbreitern oder Medien verschmaelern? -
   hat eine gemessene Antwort: der Beitragstext traegt bei 832 px schon
   91 Zeichen je Zeile, empfohlen sind 65 bis 75. Auf 1024 px waeren es 111.
   Den Text zu verbreitern wuerde die Lesbarkeit also messbar
   verschlechtern; die Medien zu verschmaelern kostet nichts.
   Und 832 gegen 1024 war ohnehin die schlechteste Wahl: der Unterschied ist
   zu klein, um als Absicht zu lesen, und zu gross, um als Kante zu
   verschwinden. Entweder gleich oder deutlich anders.
   ACF: Wiederholungsfeld medien mit den Feldern art (bild/video), bild,
   video_webm, video_mp4, poster, beschreibung. */
.blmedien {
  margin-bottom: var(--sp-7);
}

/* --- Bild als Trennung im Text ------------------------------------------
   Der zweite Teil des Wunsches. Ein Bild zwischen zwei Abschnitten, mit
   optionaler Bildunterschrift.

   IN TEXTBREITE, wie der Slider - dieselbe Begruendung, siehe .blmedien.
   Die Trennung entsteht nicht durch die Breite, sondern durch das Bild
   selbst und die Abstaende darum: 48 px oben und unten.
   16:9 und cover: die Bilder im Bestand liegen in 3:2 und 4:3, ein
   einheitliches Band braucht ein einheitliches Verhaeltnis.
   figure/figcaption, nicht div/p: es IST eine Abbildung mit Unterschrift,
   und ein Screenreader nennt die Zugehoerigkeit dann von allein. */
.blbild {
  margin: var(--sp-7) 0;
}
.blbild img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--r-card);
}
.blbild figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--text-muted);
}