/* Blog-Übersicht und Themenseiten (Angleichung Paket E, 20.10.2026) – Seiten-CSS nach bausteine.css, ≤ 4.096 Byte (tools/tests/angleichung-blog.php).
   Nur Tokens, keine festen Farben außer Hell-Regeln; Bewegung nur translate/opacity, ≤ .18 s, mit reduce aus. */
.bl-kopf .blog-hero-such{margin-top:1.5rem}
.bl-kopf h1,.th-kopf h1{text-wrap:balance}
.bl-kopf h1 .grad{white-space:nowrap}
:is(.bl-kopf,.th-kopf) .bs-chips{margin-top:2.5rem}
.bl-liste .sec-head{margin:0 0 var(--abstand-6)}
/* F17 = B: statt des großen Website-Check-Kastens eine ruhige Zeile nach den ersten drei Beiträgen, über die ganze Rasterbreite */
.bl-wc-zeile{grid-column:1/-1;margin:0;padding:var(--abstand-3) 0;border-block:1px solid var(--line);color:var(--muted);text-align:center}
.bl-wc-zeile a{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:600}
.post:hover .thumb-img img{transform:none}
/* Datum und Lesezeit je in einer Zeile, mit A+ untereinander statt beide zweizeilig */
.post .meta-row{flex-wrap:wrap;row-gap:.25rem}.post .meta-row>*{white-space:nowrap}
.pagination :is(a,span){min-width:2.75rem;height:2.75rem}
.bl-leer{padding:var(--abstand-7) 0;color:var(--muted);text-align:center}
/* Hell: die dunklen Titelbilder stehen in einem ruhigen Rahmen statt als dunkler Block auf heller Karte */
html[data-design=hell] .blog-grid .post .thumb-img{padding:.5rem .5rem 0;border-bottom:0;background:var(--surface)}
html[data-design=hell] .blog-grid .post .thumb-img img{border-radius:var(--r-sm)}
html[data-design=hell] .blog-grid .post .thumb-img::after{content:none}
/* Themen: Liste ohne Layout-Animation (statt padding-left rückt nur der Titel) */
.thema-liste a,.thema-liste a:hover{padding-left:4px;transition:none}
.tl-titel{transition:color .18s}
.tl-meta{font-size:max(.8125rem,13px)}
/* Passende Leistung: Text links, Karte rechts */
.th-leistung-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--abstand-5)}
.th-leistung .sec-head{margin-bottom:0}
.th-leistung .bs-leistungen{grid-template-columns:minmax(0,1fr)}
.th-leistung .bs-chips{margin-top:var(--abstand-5)}
.th-leistung{padding-top:var(--abstand-4)}
/* Chip-Leisten mit mehreren Reihen: Titel auf Höhe der ersten Reihe */
@media(min-width:1100px){:is(.bl-kopf,.th-kopf,.th-leistung) .bs-chips{align-items:flex-start}:is(.bl-kopf,.th-kopf,.th-leistung) .bs-chips-titel{padding-top:.75rem}}
@media(min-width:921px){.th-leistung-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3.5rem;align-items:start}}
@media screen and (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){.tl-titel{transition:color .18s,translate .18s}.thema-liste a:hover .tl-titel{translate:.375rem 0}}
@media (prefers-reduced-motion:reduce){.tl-titel{transition:none}}