/* ═══════════════════════════════════════════════════════════
   Blog-Styling — nutzt die Design-Tokens aus style.css
═══════════════════════════════════════════════════════════ */

.container--narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--s6); }

/* ── Blog-Übersicht ── */
.blog-hero { padding: var(--s24) 0 var(--s12); background: var(--blanc); }
.blog-hero h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: var(--s3) 0; color: var(--txt-strong); }
.blog-hero .subline { color: var(--txt-mid); max-width: 620px; }

.blog-list-section { padding: var(--s12) 0 var(--s24); }
.blog-list { display: grid; gap: var(--s6); }
.blog-card {
  display: block; padding: var(--s8);
  background: var(--blanc); border: 1px solid var(--border);
  border-radius: var(--r-lg); text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-mid); }
.blog-card-meta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-weak); margin: 0 0 var(--s2); }
.blog-card-title { font-size: 1.35rem; color: var(--txt-strong); margin: 0 0 var(--s3); line-height: 1.3; }
.blog-card-excerpt { font-size: .98rem; color: var(--txt-mid); line-height: 1.6; margin: 0 0 var(--s4); }
.blog-card-more { font-size: .9rem; font-weight: 600; color: var(--dunkelblau); }
.blog-empty { color: var(--txt-weak); text-align: center; padding: var(--s16) 0; }

/* ── Einzelartikel ── */
.blog-post { padding: var(--s20) 0 var(--s24); }
.blog-back { display: inline-block; margin-bottom: var(--s6); font-size: .9rem; font-weight: 600; color: var(--dunkelblau); text-decoration: none; }
.blog-back:hover { text-decoration: underline; }
.blog-post-meta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-weak); margin: 0 0 var(--s3); }
.blog-post-title { font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1.2; color: var(--txt-strong); margin: 0 0 var(--s5); }
.blog-post-lead { font-size: 1.2rem; line-height: 1.6; color: var(--txt-mid); margin: 0 0 var(--s10); }

.blog-post-body { font-size: 1.06rem; line-height: 1.75; color: var(--txt-mid); }
.blog-post-body h2 { font-size: 1.6rem; color: var(--txt-strong); margin: var(--s12) 0 var(--s4); line-height: 1.3; }
.blog-post-body h3 { font-size: 1.25rem; color: var(--txt-strong); margin: var(--s8) 0 var(--s3); }
.blog-post-body p { margin: 0 0 var(--s5); }
.blog-post-body ul, .blog-post-body ol { margin: 0 0 var(--s5) var(--s6); }
.blog-post-body li { margin-bottom: var(--s3); }
.blog-post-body a { color: var(--dunkelblau); }
.blog-post-body strong { color: var(--txt-strong); font-weight: 700; }
.blog-post-body blockquote {
  margin: var(--s6) 0; padding: var(--s4) var(--s6);
  border-left: 3px solid var(--gold); background: var(--cream);
  border-radius: var(--r-sm); color: var(--txt-strong);
}

.blog-post-cta {
  margin-top: var(--s16); padding: var(--s10);
  background: var(--midnight); border-radius: var(--r-lg);
  text-align: center;
}
.blog-post-cta h3 { color: #fff; font-size: 1.4rem; margin: 0 0 var(--s2); }
.blog-post-cta p { color: rgba(255,255,255,.6); margin: 0 0 var(--s6); }