/* Blog-spezifische Styles – ergänzt styles.css, nutzt dessen Design-Tokens. */

/* ── Übersicht: Intro ─────────────────────────────────────────────────────── */
.blog-intro { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* ── Beitrags-Liste (Übersicht + „Mehr aus dem Blog") ─────────────────────── */
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.blog-card-media { display: block; aspect-ratio: 3 / 2; background: var(--color-sky); }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-body { padding: 1.25rem 1.375rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.blog-card-date { color: var(--color-body); font-size: var(--fs-sm); margin: 0; }
.blog-card-body h2, .blog-card-body h3 { font-size: var(--fs-h3); line-height: 1.25; margin: 0; }
.blog-card-body h2 a, .blog-card-body h3 a { color: var(--color-ink); text-decoration: none; }
.blog-card-body h2 a:hover, .blog-card-body h3 a:hover { color: var(--color-primary); }
.blog-card-body p { color: var(--color-body); margin: 0; }
.blog-card .card-cta { margin-top: auto; }

.blog-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-body);
  font-size: var(--fs-lg);
  padding: 2rem 0;
}

/* ── Einzelbeitrag ────────────────────────────────────────────────────────── */
.blog-article { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.blog-article-head { text-align: left; }
.blog-article-head h1 { font-size: var(--fs-h1); color: var(--color-ink); margin: .5rem 0 .75rem; line-height: 1.15; }

.breadcrumb { font-size: var(--fs-sm); color: var(--color-body); }
.breadcrumb a { color: var(--color-primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span[aria-hidden] { color: var(--color-border); margin: 0 .15rem; }

.blog-meta { color: var(--color-body); font-size: var(--fs-sm); margin: 0; }

.blog-hero {
  max-width: 1000px;
  margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) auto;
  padding: 0 24px;
}
.blog-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  display: block;
}

/* ── Artikel-Typografie ───────────────────────────────────────────────────── */
.blog-prose { font-size: var(--fs-lg); line-height: 1.75; color: var(--color-body); }
.blog-prose > p:first-child { font-size: 1.25rem; color: var(--color-ink); }
.blog-prose h2 {
  font-size: var(--fs-h2);
  color: var(--color-ink);
  line-height: 1.2;
  margin: 2.25rem 0 .75rem;
}
.blog-prose h3 { font-size: var(--fs-h3); color: var(--color-ink); margin: 1.75rem 0 .5rem; }
.blog-prose p { margin: 0 0 1.15rem; }
.blog-prose ul, .blog-prose ol { margin: 0 0 1.35rem; padding-left: 1.35rem; }
.blog-prose li { margin: 0 0 .55rem; }
.blog-prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.blog-prose a:hover { color: var(--color-primary-dark); }
.blog-prose strong { color: var(--color-ink); font-weight: var(--fw-semibold); }
.blog-prose blockquote {
  margin: 1.5rem 0;
  padding: .5rem 0 .5rem 1.25rem;
  border-left: 4px solid var(--color-primary);
  color: var(--color-ink);
  font-style: italic;
}