/* Blog: ergänzt app.css (Farben, Karten, Knöpfe) um Lesetypografie */
main.blog{max-width:720px}
.blog h1{font-size:1.9rem;line-height:1.2;margin:6px 0 10px}
.blog .lead{font-size:1.12rem;color:var(--mut);margin:0 0 10px}
.blog .meta{margin:0}
.blog .cat{display:inline-block;font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--acc)}
.blog .crumbs{margin:0 0 6px}.blog .crumbs a{color:var(--mut)}
.blog .prose{font-size:1.06rem;line-height:1.7}
.blog .prose h2{font-size:1.4rem;color:var(--fg);text-transform:none;letter-spacing:0;margin:30px 0 8px;font-weight:700;scroll-margin-top:14px}
.blog .prose h3{font-size:1.15rem;margin:22px 0 6px}
.blog .prose p{margin:0 0 14px}
.blog .prose ul,.blog .prose ol{margin:0 0 16px;padding-left:22px}.blog .prose li{margin:4px 0}
.blog .prose a,.blog .related a:not(.post),.blog .crumbs a:hover{color:var(--acc)}
.blog .prose code{background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.92em}
.blog .hinweis{background:var(--card2);border:1px solid var(--line);border-left:4px solid var(--acc2);border-radius:10px;padding:10px 14px;margin:0 0 16px}
.blog .hinweis p{margin:6px 0;font-size:.98rem}
.blog .toc{margin:16px 0 8px}.blog .toc ol{margin:6px 0 0;padding-left:20px}.blog .toc li{margin:3px 0}.blog .toc a{color:var(--fg);text-decoration:none}.blog .toc a:hover{color:var(--acc)}
.blog .cta{display:flex;gap:16px;align-items:center;margin:30px 0 8px;border-color:var(--acc2)}
.blog .cta img{width:110px;height:110px;object-fit:cover;border-radius:16px;flex:none}
.blog .cta p{margin:6px 0 10px;color:var(--mut)}
.blog .cta .btn{margin:0 6px 6px 0}
@media (max-width:520px){.blog .cta{flex-direction:column;align-items:flex-start}.blog .cta img{width:100%;height:150px}}
.blog .cards{display:grid;gap:10px;margin:8px 0}
.blog a.post{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:var(--fg);margin:0}
.blog a.post:hover,.blog a.post:focus-visible{border-color:var(--acc2)}
.blog a.post b{font-size:1.05rem;line-height:1.3}
.blog .hero{margin:14px 0 6px}
.blog .chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}.blog .chips a{padding:8px 12px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--fg);text-decoration:none;font-size:.92rem}
.blog section>h2{margin-top:28px}
.blog .related h2{margin-top:30px}
.blog .disclaimer{margin-top:24px}
.blog footer{margin-top:26px;text-align:center}.blog footer a{color:var(--mut)}