/* ============================================================
   Baublog – Blogübersicht und Beitragsseiten
   Baut auf style.css auf und nutzt dieselben Farb- und Typo-Tokens.
   ============================================================ */

body.blog-post,
body.blog-index { padding-top: 84px; }

/* ---------- Breadcrumb ---------- */
.crumbs ol{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
}
.crumbs li{display:flex;align-items:center;gap:8px;color:var(--muted)}
.crumbs li + li::before{content:"";width:10px;height:1px;background:var(--line)}
.crumbs a{color:var(--muted);text-decoration:none;transition:color .25s}
.crumbs a:hover{color:var(--accent)}
.crumbs li[aria-current]{color:var(--ink)}

/* ---------- Kopfbereich ---------- */
.post-head,.blog-head{padding:clamp(34px,5vw,60px) 0 clamp(26px,3.5vw,40px)}
.post-head h1,.blog-head h1{
  font-size:clamp(30px,4.6vw,58px);letter-spacing:-.033em;max-width:19ch;line-height:1.03;
}
.post-head .eyebrow,.blog-head .eyebrow{margin-top:26px;margin-bottom:16px}
.post-meta{
  display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.post-meta span{display:flex;align-items:center;gap:9px}
.post-meta span::before{content:"";width:5px;height:5px;background:var(--accent);flex:none}

/* ---------- Titelbild ---------- */
.post-hero{margin:0 0 clamp(34px,4.5vw,56px)}
.post-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--plaster-2)}
.post-hero figcaption,.post-figure figcaption{
  width:min(1300px,100% - var(--gutter)*2);margin:12px auto 0;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
@media(min-width:900px){
  .post-hero img{aspect-ratio:21/9}
}

/* ---------- Layout: Inhalt + Sprungmarken ---------- */
.post-layout{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,64px);align-items:start}
.post-layout > *{min-width:0}
@media(min-width:1000px){
  .post-layout{grid-template-columns:230px minmax(0,1fr)}
}
.post-toc{position:relative}
@media(min-width:1000px){
  .post-toc{position:sticky;top:110px}
}
.toc-title{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.post-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.post-toc li{border-bottom:1px solid var(--line)}
.post-toc a{
  display:block;padding:10px 0;font-size:14px;line-height:1.4;color:var(--muted);
  text-decoration:none;transition:color .25s,padding-left .25s;
}
.post-toc a:hover{color:var(--accent);padding-left:6px}

/* ---------- Beitragstext ---------- */
.post-body{max-width:74ch;min-width:0;font-size:clamp(16.5px,1.15vw,18px);line-height:1.72}
.post-body > p:first-of-type,
.post-body > p:first-of-type strong{
  font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--ink);font-weight:500;
}
.post-body h2{
  font-size:clamp(23px,2.7vw,34px);letter-spacing:-.028em;line-height:1.12;
  margin:clamp(40px,4.5vw,64px) 0 16px;scroll-margin-top:110px;
}
.post-body h3{
  font-size:clamp(19px,2vw,23px);letter-spacing:-.022em;margin:32px 0 12px;scroll-margin-top:110px;
}
.post-body p{margin-bottom:20px;color:#2C3540}
.post-body strong{color:var(--ink);font-weight:600}
.post-body a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(26,95,168,.35);transition:border-color .25s,color .25s}
.post-body a:hover{color:var(--accent-dark);border-bottom-color:var(--accent)}

.post-body ul,.post-body ol{margin:0 0 24px;padding-left:0;list-style:none;display:grid;gap:11px}
.post-body ul li{padding-left:26px;position:relative;color:#2C3540}
.post-body ul li::before{
  content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;background:var(--accent);
}
.post-body ol{counter-reset:schritt}
.post-body ol li{padding-left:44px;position:relative;counter-increment:schritt;color:#2C3540}
.post-body ol li::before{
  content:counter(schritt,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-family:var(--f-mono);font-size:12px;color:var(--accent);letter-spacing:.08em;
}

.post-body blockquote{
  margin:clamp(30px,3.5vw,44px) 0;padding:0 0 0 clamp(20px,3vw,34px);border-left:2px solid var(--accent);
}
.post-body blockquote p,
.post-body blockquote em{
  font-family:var(--f-display);font-weight:600;font-style:normal;
  font-size:clamp(21px,2.4vw,30px);line-height:1.24;letter-spacing:-.025em;color:var(--ink);
}

/* ---------- Hinweisboxen ---------- */
.callout{
  display:block;margin:clamp(26px,3vw,38px) 0;padding:clamp(20px,2.4vw,28px);
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);
  font-size:16.5px;line-height:1.62;color:#2C3540;
}
.callout strong{display:block;margin-bottom:6px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:500}
.callout-cta{background:var(--anthracite);border-color:var(--anthracite);color:rgba(241,244,247,.85)}
.callout-cta strong{color:var(--accent-light)}

/* ---------- Tabellen ---------- */
.table-wrap{margin:clamp(26px,3vw,38px) 0;overflow-x:auto;border:1px solid var(--line);background:#fff}
.post-body table{border-collapse:collapse;width:100%;min-width:460px;font-size:15.5px}
.post-body th{
  text-align:left;padding:14px 18px;background:var(--plaster-2);border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);font-weight:500;vertical-align:top;
}
.post-body td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top;color:#2C3540;line-height:1.55}
.post-body tr:last-child td{border-bottom:0}
.post-body td strong{color:var(--ink)}

/* ---------- Bilder im Text ---------- */
.post-figure{margin:clamp(30px,3.5vw,46px) 0}
.post-figure img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--plaster-2);max-width:100%}
.post-figure figcaption{width:auto;margin:10px 0 0}

/* ---------- FAQ ---------- */
.post-faq{margin-top:clamp(44px,5vw,70px);padding-top:clamp(30px,3.5vw,44px);border-top:1px solid var(--line)}
.post-faq > h2{margin-top:0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{margin:0;font-size:clamp(17px,1.8vw,20px);letter-spacing:-.02em;transition:color .25s}
.faq-item summary:hover h3{color:var(--accent)}
.faq-item summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-answer{padding:0 0 20px}
.faq-answer p{margin-bottom:12px}
.faq-answer p:last-child{margin-bottom:0}

/* ---------- Autor und Quellen ---------- */
.post-author{
  margin-top:clamp(44px,5vw,66px);padding:clamp(24px,3vw,34px);
  background:var(--plaster-2);border-left:3px solid var(--accent);
}
.post-author h2{margin-top:0;font-size:clamp(19px,2vw,24px);margin-bottom:12px}
.post-author p{font-size:15.5px;line-height:1.65}
.post-author-meta{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:0}
.post-sources{margin-top:clamp(34px,4vw,50px)}
.post-sources h2{font-size:clamp(17px,1.8vw,21px);margin-bottom:14px}
.post-sources ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;border-top:1px solid var(--line)}
.post-sources li{padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;display:grid;gap:3px}
.post-sources li::before{display:none}
.post-sources span{color:var(--muted);font-size:13.5px}

/* ---------- Abschluss-CTA ---------- */
.post-cta{background:var(--anthracite);color:var(--plaster);padding:clamp(50px,6vw,88px) 0;margin-top:clamp(50px,6vw,90px)}
.post-cta h2{font-size:clamp(26px,3.6vw,44px);letter-spacing:-.03em;max-width:17ch;margin-bottom:16px}
.post-cta p{max-width:58ch;color:var(--muted-dark);font-size:16.5px}
.post-cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- Weiterlesen ---------- */
.post-related{padding:clamp(38px,4.5vw,60px) 0}
.post-related ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.post-related li{border-bottom:1px solid var(--line)}
.post-related a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;
  text-decoration:none;color:var(--ink);font-family:var(--f-display);font-weight:600;
  font-size:clamp(17px,1.9vw,22px);letter-spacing:-.022em;transition:padding-left .3s,color .25s;
}
.post-related a::after{content:"→";color:var(--accent);font-family:var(--f-body);font-size:18px}
.post-related a:hover{padding-left:10px;color:var(--accent)}

/* ---------- Übersichtsseite ---------- */
.blog-lead{max-width:62ch;margin-top:22px;color:var(--muted);font-size:clamp(16.5px,1.3vw,19px);line-height:1.65}
.blog-list{padding-bottom:clamp(40px,5vw,70px)}
.blog-list .wrap{display:grid;grid-template-columns:1fr;gap:clamp(22px,2.4vw,32px)}
/* Rasterfelder duerfen schmaler werden als das Bild breit ist */
.blog-list .wrap > *{min-width:0}
.bcard img{max-width:100%}
@media(min-width:680px){ .blog-list .wrap{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1040px){ .blog-list .wrap{grid-template-columns:repeat(3,1fr)} }

.bcard{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  transition:border-color .3s,transform .4s,box-shadow .4s;
}
.bcard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 16px 40px rgba(13,18,25,.07)}
.bcard-media{display:block;overflow:hidden;background:var(--plaster-2);aspect-ratio:3/2}
.bcard-media img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.bcard:hover .bcard-media img{transform:scale(1.04)}
.bcard-body{padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;gap:10px;flex:1}
.bcard-kicker{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.bcard h2{font-size:clamp(19px,1.7vw,23px);letter-spacing:-.026em;line-height:1.18}
.bcard h2 a{color:inherit;text-decoration:none}
.bcard h2 a::after{content:"";position:absolute;inset:0}
.bcard{position:relative}
.bcard h2 a:hover{color:var(--accent)}
.bcard-teaser{color:var(--muted);font-size:15px;line-height:1.6}
.bcard-meta{margin-top:auto;padding-top:14px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- Navigation: aktiver Punkt ---------- */
.nav-links a.is-active{color:var(--accent)}
.nav-links a.is-active::after{transform:scaleX(1)}

@media (prefers-reduced-motion: reduce){
  .bcard,.bcard-media img,.post-related a,.post-toc a{transition:none}
}

/* ---------- Filter auf der Übersicht ---------- */
.blog-filter{padding:0 0 clamp(26px,3vw,40px)}
.blog-filter .wrap{display:grid;gap:14px}
.filter-row{display:grid;grid-template-columns:1fr;gap:10px;align-items:start}
@media(min-width:620px){ .filter-row{grid-template-columns:64px 1fr;gap:18px;align-items:center} }
.filter-label{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--f-body);font-size:14px;font-weight:500;line-height:1;
  padding:10px 16px;border:1px solid var(--line);background:#fff;color:#39485A;
  border-radius:999px;cursor:pointer;transition:background .22s,color .22s,border-color .22s;
}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.filter-count{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding-top:4px;
}
.filter-leer{
  width:min(1300px,100% - var(--gutter)*2);margin:0 auto;padding:36px 0 10px;
  color:var(--muted);font-size:16.5px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;
}
.bcard[hidden]{display:none}

/* SVG-Zeichnungen als Titelbild: vollständig zeigen, nicht beschneiden */
.bcard-media{background:var(--plaster-2)}
.bcard-media img[src$=".svg"]{object-fit:contain;background:var(--plaster)}
.post-hero img[src$=".svg"]{object-fit:contain;background:var(--plaster);aspect-ratio:3/2;max-height:640px}
@media(min-width:900px){ .post-hero img[src$=".svg"]{aspect-ratio:12/7} }

/* Die Breiten- und Hoehenangaben im Markup reservieren beim Laden den Platz.
   Fuer die Darstellung zaehlt das Seitenverhaeltnis, deshalb Hoehe automatisch. */
.bcard-media img,
.post-hero img,
.post-figure img{height:auto}

/* ---------- Sitemap-Seite ---------- */
.sitemap{padding:0 0 clamp(40px,5vw,70px)}
.sm-gruppe{margin-bottom:clamp(34px,4vw,56px)}
.sm-gruppe > h2{
  font-size:clamp(21px,2.2vw,27px);letter-spacing:-.026em;margin-bottom:20px;
  padding-bottom:14px;border-bottom:2px solid var(--ink);
}
.sm-raster{display:grid;grid-template-columns:1fr;gap:clamp(22px,2.6vw,36px)}
@media(min-width:700px){ .sm-raster{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1100px){ .sm-raster{grid-template-columns:repeat(3,1fr)} }
.sm-block h3{
  font-size:17px;letter-spacing:-.01em;margin-bottom:12px;display:flex;align-items:center;gap:10px;
}
.sm-zahl{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--accent);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px;font-weight:400;
}
.sm-block ul{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.sm-block li{border-bottom:1px solid var(--line);padding:11px 0;display:grid;gap:3px}
.sm-block a{
  color:var(--ink);text-decoration:none;font-size:15.5px;line-height:1.35;
  transition:color .22s,padding-left .22s;
}
.sm-block a:hover{color:var(--accent);padding-left:5px}
.sm-block span{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.sm-hinweis{color:var(--muted);font-size:16.5px;max-width:70ch;line-height:1.6}
.sm-xml{
  margin-top:8px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--muted);font-size:15.5px;
}
.sm-xml a{color:var(--accent)}