/* Blog (blog-bauen.py). Baut auf stil.css und den Ratgeberseiten auf; nur was dort fehlt. */
.blog-kopfnav{display:flex;align-items:center;gap:22px}
.blog-kopfnav>a:not(.knopf){font-size:.9375rem;color:var(--ink)}
.blog-kopfnav>a:not(.knopf):hover{color:var(--blue)}

.blog-uebersicht{padding:60px 0 110px}
.blog-uebersicht h1{font-size:clamp(3rem,6vw,5.5rem);margin-bottom:22px}
.blog-uebersicht .intro{max-width:640px;margin-bottom:38px}
.blog-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:38px}
.blog-filter button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:50px;padding:9px 16px;font-size:.875rem;transition:background .2s var(--ease-out),border-color .2s var(--ease-out)}
.blog-filter button:hover{border-color:#b9c1cc}
.blog-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.blog-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 32px}
.blog-karte a{display:flex;flex-direction:column;height:100%;text-decoration:none!important;color:var(--ink)}
.blog-karte img,.blog-karte-platz{aspect-ratio:16/9;width:100%;height:auto;object-fit:cover;border-radius:14px;background:var(--soft);margin-bottom:18px;transition:transform .35s var(--ease-out)}
.blog-karte a:hover img{transform:translateY(-3px)}
.blog-karte-kat{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.blog-karte h3{font-size:1.3rem;line-height:1.2;margin:0 0 10px!important}
.blog-karte a:hover h3{color:var(--blue)}
.blog-karte p{color:var(--muted);font-size:.9375rem;line-height:1.55;margin:0 0 12px!important}
.blog-karte-datum{margin-top:auto;font-size:.8125rem;color:var(--muted)}

.blog-titelbild{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);margin:0 0 30px}
.blog-verzeichnis{border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin:0 0 30px}
.blog-verzeichnis p{font-weight:600;font-size:.875rem;margin:0 0 8px!important}
.blog-verzeichnis ol{list-style:decimal;padding-left:1.3em;margin:0;font-size:.9375rem}
.blog-verzeichnis li{margin:4px 0}
.blog-verzeichnis a{text-decoration:none!important;color:var(--blue)}
.blog-inhalt ul{list-style:disc;padding-left:1.3em;margin:0 0 16px}
.blog-inhalt ol{list-style:decimal;padding-left:1.4em;margin:0 0 16px}
.blog-inhalt li{margin-bottom:8px}
.blog-inhalt h2{scroll-margin-top:30px}
.blog-inhalt .kurzantwort{font-size:1.15rem;line-height:1.6;background:var(--soft);border-radius:14px;padding:20px 24px;margin-bottom:26px}
.blog-inhalt blockquote{margin:0 0 16px;padding-left:18px;border-left:3px solid var(--line);color:var(--muted)}
.blog-inhalt h2#quellen+ol{font-size:.875rem;color:var(--muted);word-break:break-word}
.blog-weiter{margin-top:30px}
.blog-weiter h2{margin-bottom:24px!important}
.blog-artikel .blog-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.blog-artikel .blog-karte h3{font-size:1.05rem}
.blog-artikel .blog-karte p{display:none}

@media(max-width:1000px){.blog-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.blog-raster,.blog-artikel .blog-raster{grid-template-columns:1fr;gap:34px}
.blog-uebersicht{padding-top:36px}.blog-kopfnav{gap:14px}.blog-kopfnav .knopf{display:none}
.blog-inhalt .kurzantwort{padding:16px 18px;font-size:1.05rem}}
@media(prefers-reduced-motion:reduce){.blog-karte img{transition:none}}
/* Überschrift nur für Leser und Suchmaschinen: hält die Reihenfolge H1, H2, H3 ein (Audit 06.10.2026) */
.blog-lesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}