/* Blog: Übersicht /blog/ als Karten + Abschluss-Box in den Artikeln (Meta „css: blog“).
   Karten nutzen .wk-card/.kennzahl aus base.css (gleiche Optik wie /wirkung/); hier nur, was dort fehlt.
   Schrift-Rollen: Kartentitel step-1 · Fließtext step-0 · Meta/klein step--1 */

/* Hinweis „XMILE = früherer Name“ oben in der Übersicht */
.blog-hint { max-width: var(--container-narrow); background: var(--color-surface); border-left: 4px solid var(--color-primary);
  border-radius: var(--radius); padding: var(--space-xs) var(--space-s); font-size: var(--step--1); color: var(--color-muted); }

/* Karten: Meta-Zeile (Fahrzeug/Betrieb · Zeitraum) über der Kennzahl, Beleg-Tag unten */
.blog-card__meta { font-size: var(--step--1); color: var(--color-muted); }
.blog-card__meta::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--color-primary); margin-right: .45rem; vertical-align: .05em; }
.blog-card--presse .blog-card__meta::before { background: var(--color-muted); }
.blog-card__orig { margin-top: auto; padding-top: .3rem; display: flex; align-items: center; gap: .35rem;
  font-size: var(--step--1); color: var(--color-primary-text); font-weight: 600; }
.blog-card__orig svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* Einheit hinter der Kennzahl nie mitten drin umbrechen – passt sie nicht mehr in die Zeile, rutscht sie als Ganzes unter die Zahl */
.blog-card__einheit { white-space: nowrap; }
/* Karten ohne Kennzahl: Teaser bekommt den Platz, Titel bleibt auf gleicher Höhe wie daneben */
.blog-card--ohne-kz .wk-card__title { margin-top: 0; }

/* Abschluss-Box in jedem Artikel (Partial blog-cta) – Optik wie .fazit auf den Gutachtenseiten */
.blog-cta { background: var(--color-surface); border-left: 4px solid var(--color-primary); border-radius: var(--radius);
  padding: var(--space-m); margin-top: var(--space-l); }
.legal .blog-cta h2 { margin-top: 0; font-size: var(--step-1); }
.blog-cta p { font-size: var(--step-0); }
.blog-cta .hero-actions { margin-top: var(--space-s); }
@media (max-width: 40rem) {
  .blog-cta { padding: var(--space-s); }
  .blog-cta .hero-actions .btn { width: 100%; justify-content: center; }
}