/* =========================================================
   Blog, Artikel und Rechtsseiten — nutzt Tokens aus base.css
   ========================================================= */

.page{padding:clamp(40px,6vw,88px) 0 var(--rhythm)}
.crumbs{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0 0 var(--space-6);padding:0;font-family:var(--mono);font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.crumbs li + li::before{content:"/";margin-right:var(--space-2);color:var(--silver)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}

/* ---------- Blog-Übersicht ---------- */
.blog-head{max-width:760px;margin-bottom:var(--space-8)}
.blog-head p{color:var(--muted);font-size:var(--fs-lede);margin-top:var(--space-5)}
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
.post-card{
  display:flex;flex-direction:column;background:var(--ground);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,3vw,32px);text-decoration:none;color:var(--ink);
  transition:background-color .25s var(--ease),border-color .25s var(--ease);
}
.post-card:hover{background:var(--accent-soft);border-color:var(--accent)}
.post-card__meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-4)}
.post-card__meta .mono:first-child{color:var(--accent)}
.post-card h2{font-size:var(--fs-h3);margin-bottom:var(--space-3)}
.post-card p{color:var(--muted)}
.post-card__more{margin-top:auto;font-weight:600;color:var(--accent)}

/* ---------- Artikel ---------- */
.article{max-width:var(--maxw-text);margin:0 auto}
.article__meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-5)}
.article__meta .mono:first-child{color:var(--accent)}
.article h1{font-size:clamp(2rem,1.4rem + 2.8vw,3.5rem);margin-bottom:var(--space-6)}
.lede{font-size:var(--fs-lede);line-height:1.55;color:var(--ink)}
.summary{
  margin:var(--space-7) 0;padding:var(--space-5) var(--space-6);
  background:var(--surface);border-left:3px solid var(--accent);
}
.summary .mono{display:block;margin-bottom:var(--space-3);color:var(--accent)}
.summary ul{margin:0;padding:0;list-style:none}
.summary li{position:relative;padding:var(--space-1) 0 var(--space-1) 1.5em}
.summary li::before{content:"—";position:absolute;left:0;color:var(--accent)}
.article h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.125rem);margin:var(--space-8) 0 var(--space-4)}
.article h3{margin:var(--space-6) 0 var(--space-3)}
.article p,.article li{color:var(--ink)}
.article ul.dash,.article ol{padding-left:0;margin:0 0 1.2em}
.article ul.dash{list-style:none}
.article ul.dash li{position:relative;padding:var(--space-1) 0 var(--space-1) 1.5em}
.article ul.dash li::before{content:"—";position:absolute;left:0;color:var(--accent)}
.article ol{padding-left:1.4em}
.article ol li{padding:var(--space-1) 0}
.article blockquote{margin:var(--space-6) 0;padding-left:var(--space-5);border-left:2px solid var(--accent);font-family:var(--serif);font-size:1.5rem;line-height:1.3}
.table-wrap{overflow-x:auto;margin:var(--space-5) 0}
.article table{width:100%;border-collapse:collapse;font-size:0.9375rem;min-width:480px}
.article th,.article td{text-align:left;padding:var(--space-3);border-bottom:1px solid var(--line);vertical-align:top}
.article th{font-family:var(--mono);font-size:0.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom-color:var(--ink)}
.note{font-size:var(--fs-small);color:var(--muted);border-top:1px solid var(--line);padding-top:var(--space-4);margin-top:var(--space-6)}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:var(--space-3);margin:var(--space-5) 0}
.faq details{background:var(--ground);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .2s var(--ease)}
.faq details[open]{border-color:var(--accent)}
.faq summary{cursor:pointer;list-style:none;padding:var(--space-4) var(--space-5);font-family:var(--serif);font-size:1.1875rem;font-weight:500;display:flex;justify-content:space-between;gap:var(--space-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--accent);flex:none}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{background:var(--accent-soft)}
.faq details > div{padding:0 var(--space-5) var(--space-4)}
.faq details > div p:last-child{margin-bottom:0}

/* Quellen */
.sources{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--ink)}
.sources ol{font-size:var(--fs-small);color:var(--muted);padding-left:1.4em}
.sources li{color:var(--muted);word-break:break-word}

/* Schluss-CTA */
.article-cta{margin-top:var(--space-8);padding:clamp(24px,4vw,40px);background:var(--invert-bg);color:var(--invert-ink);border-radius:var(--radius)}
.article-cta h2{color:var(--invert-ink);margin:0 0 var(--space-4);font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.article-cta h2 em{color:var(--accent-soft)}
.article-cta p{color:var(--invert-muted)}
.article-cta__links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-5);margin-top:var(--space-5)}
.article-cta__links a:not(.btn){color:var(--invert-ink)}

.related{margin-top:var(--space-7)}
.related ul{list-style:none;padding:0;margin:var(--space-3) 0 0}
.related li{padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.related a{font-family:var(--serif);font-size:1.1875rem;text-decoration:none;color:var(--ink)}
.related a:hover{color:var(--accent)}

/* ---------- Rechtsseiten ---------- */
.legal-top{border-bottom:1px solid var(--line);background:var(--ground)}
.legal-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-4);padding-bottom:var(--space-4)}
.legal-top img{height:28px;width:auto}
.legal-back{font-family:var(--mono);font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.legal-back:hover{color:var(--accent)}
.legal{max-width:var(--maxw-text);margin:0 auto}
.legal h1{font-size:clamp(2rem,1.5rem + 2vw,3rem);margin-bottom:var(--space-6)}
.legal h2{font-size:1.5rem;margin:var(--space-7) 0 var(--space-3)}
.legal h3{font-size:1.1875rem;margin:var(--space-5) 0 var(--space-2)}
.legal address{font-style:normal}

@media (max-width:760px){
  .posts{grid-template-columns:1fr}
  .summary{padding:var(--space-4) var(--space-5)}
}