/* ===========================================================
   blog.css (Paket U5): Blog-Übersicht (home.php) und Artikel (single.php)
   Nur Kernel-Tokens: Schrift als --fs-* oder clamp(), Radien über Tokens, Hover nur in
   (hover: hover) and (pointer: fine), Tap-Ziele mindestens 44 px, keine Hex-Werte.
   =========================================================== */

/* ---------- Übersicht: Raster ---------- */
/* Kernel-.grid-3 steht bis 1180 px zweispaltig; der Plan verlangt 3 Spalten ab 981 px. */
main .grid-3.blog-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
@media (min-width: 721px) and (max-width: 980px) {
  main .grid-3.blog-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  main .grid-3.blog-raster { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Artikel-Kopf: Eyebrow mit Trennpunkten (F2, Review R1-D Klein) ----------
   Kein Leerraum im Markup, kein Flex-Gap: der Abstand links und rechts der Punkte kommt allein aus
   dem gleichen Seitenrand (.5em). Der Punkt behält die Laufweite (letter-spacing) der Wörter, so
   hängt vor und nach ihm derselbe Rest und die Lücken sind gleich groß. */
.eyebrow--meta { gap: 0; flex-wrap: wrap; row-gap: 4px; }
.eyebrow--meta .trenner { margin-inline: .5em; }

/* ---------- Artikelkarte ---------- */
.blog-karte { position: relative; height: 100%; }
.blog-karte-bild--leer { display: flex; align-items: center; justify-content: center; }
.media-card-img.blog-karte-bild--leer .blog-karte-marke {
  width: 38%; max-width: 160px; height: auto; object-fit: contain; opacity: .5;
}
.blog-karte-datum { font-size: var(--fs-caption); line-height: 1.45; color: var(--warm-grey-ink); }
.blog-karte-titel {
  margin: 0; font-family: var(--font-head); font-size: var(--fs-h3-sm); font-weight: 600;
  line-height: var(--lh-snug); letter-spacing: var(--ls-head); color: var(--navy);
}
/* Die ganze Karte ist klickbar: Der Link im Titel wird über die Karte gestreckt. */
/* Tap-Hoehe mindestens 44 px (Integration U6): Polster innen, gleicher Betrag als negativer Aussenabstand, damit das Layout gleich bleibt. */
.blog-karte-link { display: block; min-height: 44px; padding-block: 8px; margin-block: -8px; box-sizing: border-box; color: inherit; text-decoration: none; }
.blog-karte-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-karte-link:focus-visible { outline: none; }
.blog-karte-link:focus-visible::after { outline: 2px solid var(--navy); outline-offset: -4px; border-radius: var(--radius-card); }
.blog-karte-text {
  margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden; font-size: var(--fs-body-sm); color: var(--navy-70);
}
.blog-karte-mehr { margin-top: auto; padding-top: 4px; }
@media (hover: hover) and (pointer: fine) {
  .blog-karte:hover .blog-karte-mehr svg { transform: translate(2px, -2px); }
  .blog-karte:hover .blog-karte-mehr { text-decoration-thickness: 2px; }
}

/* ---------- Blättern ---------- */
.blog-blaettern {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--gap-md); margin-top: clamp(32px, 4vw, 56px);
}
.blog-blaettern-weiter { margin-left: auto; }
@media (max-width: 720px) {
  .blog-blaettern { flex-direction: column; align-items: stretch; }
  .blog-blaettern-weiter { margin-left: 0; }
}

/* ---------- Abschluss-Bühne (Übersicht und Artikel) ---------- */
.blog-abschluss-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-md); max-width: 720px; }
.blog-abschluss-text .h2 { margin: 0; text-wrap: balance; }
.blog-abschluss-text .lead { margin: 0; max-width: 560px; }
.blog-abschluss-text .row { margin-top: var(--gap-sm); }
/* Academy-Variante: Orange nur als Button (Muster #cta-kennenlernen auf der Academy), nie als Fläche. */
.blog-abschluss--academy.on-navy .btn-solid { background: var(--academy); color: var(--navy); }
.blog-abschluss--academy.on-navy .btn-solid .copy-2 { color: var(--navy); }
@media (hover: hover) and (pointer: fine) {
  .blog-abschluss--academy.on-navy .btn-solid:hover { background: color-mix(in srgb, var(--academy) 80%, var(--white)); }
}

/* ---------- Weitere Artikel ---------- */
.blog-weitere .section-head { margin-bottom: clamp(24px, 3vw, 40px); }

/* ---------- Artikel: Kopf ---------- */
.blog-titel { max-width: 22em; text-wrap: balance; }

/* ---------- Artikel: Bild und Lesespalte ---------- */
.blog-artikel-sektion .section-inner {
  display: flex; flex-direction: column; align-items: center; gap: clamp(32px, 4.4vw, 60px);
}
.blog-artikel-sektion--ohne-bild .section-inner { gap: 0; }
.blog-beitragsbild { width: 100%; max-width: 1100px; margin: 0; }
.blog-beitragsbild img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-media); background: var(--surface-card-alt);
}
.artikel { width: 100%; max-width: 68ch; margin: 0 auto; text-align: left; color: var(--navy); }
.artikel > *:first-child { margin-top: 0; }
.artikel > *:last-child { margin-bottom: 0; }

/* Absatz, Überschriften */
.artikel > p { margin: 0 0 1em; font-size: var(--fs-body); line-height: 1.65; }
.artikel > h2 {
  margin: 2em 0 .6em; font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 600;
  line-height: var(--lh-snug); letter-spacing: var(--ls-head); text-wrap: balance;
}
.artikel > h3 {
  margin: 1.6em 0 .5em; font-family: var(--font-head); font-size: var(--fs-h3-sm); font-weight: 600;
  line-height: var(--lh-snug); letter-spacing: var(--ls-head); text-wrap: balance;
}

/* Listen: Navy, Punkte dezent, Einzug 1,2 em */
.artikel > ul, .artikel > ol { margin: 0 0 1em; padding: 0 0 0 1.2em; font-size: var(--fs-body); line-height: 1.65; }
.artikel > ul { list-style: disc; }
.artikel > ol { list-style: decimal; }
.artikel > ul li::marker { color: var(--navy-deko-50); }
.artikel li { margin: 0 0 .4em; padding-left: .2em; }
.artikel li > ul, .artikel li > ol { margin: .4em 0 0; padding-left: 1.2em; }
.artikel li > ul { list-style: disc; }
.artikel li > ol { list-style: decimal; }

/* Links im Text: Navy, unterstrichen */
.artikel a {
  color: var(--navy); text-decoration: underline; text-decoration-color: var(--navy-35);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .artikel a:hover { text-decoration-color: var(--navy); }
}

/* Zitat = Kernel .pullquote */
.artikel > .pullquote { margin: 2.6em 0 2.2em; }
.artikel .pullquote blockquote p { margin: 0 0 .6em; }
.artikel .pullquote blockquote p:last-child { margin-bottom: 0; }

/* Bild-Block */
.artikel > figure.wp-block-image, .artikel > .wp-block-image { margin: 2em 0; }
.artikel .wp-block-image img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--radius-media); }
.artikel .wp-block-image :is(.alignleft, .alignright, .aligncenter), .artikel > :is(.alignleft, .alignright, .aligncenter) {
  float: none; margin: 2em 0;
}
.artikel .wp-block-image figcaption, .artikel .wp-element-caption {
  margin: .7em 0 0; font-size: var(--fs-caption); line-height: 1.45; color: var(--navy-ink-2); text-align: left;
}