/* Blog: Übersicht (/blog) + Artikel (/blog/:slug), gerendert von api/_blog.js.
   Eigenständige Typografie unter .blog (kein .legal mehr, sonst erben Buttons
   und Karten die blauen Unterstreichungen der Rechtstexte). Karten, Pillen
   und Abstände folgen brandwatcher.css. */

.blog { padding-top: 64px; }
.blog a { text-decoration: none; }

/* ------------------------------ Übersicht -------------------------------- */
.blog-hero { padding-top: var(--s-section); padding-bottom: var(--s-xxl); max-width: 720px; }
.blog-hero .section-title { max-width: none; }
.blog-hero p { font-size: 18px; line-height: 1.4; color: var(--ink-muted); max-width: 58ch; margin-top: var(--s-lg); }

.blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-md);
  padding-bottom: var(--s-section-lg);
}
.blog-card {
  display: flex; flex-direction: column;
  background: var(--surface-1); border-radius: var(--r-xl); box-shadow: var(--e-edge);
  overflow: hidden; color: inherit;
  transition: background-color var(--t), transform var(--t);
}
.blog-card:hover { background: var(--surface-2); transform: translateY(-2px); }
.blog-card-media {
  position: relative; margin: 8px 8px 0; border-radius: 14px; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--surface-2);
}
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.6,.2,1); }
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
.blog-card-media.is-noimg { background: linear-gradient(135deg, var(--surface-2), var(--surface-1)); }
.blog-card-body { padding: var(--s-lg) var(--s-lg) var(--s-lg); display: flex; flex-direction: column; gap: var(--s-xs); flex: 1; }
.blog-card-cluster { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.blog-card-body h2 {
  font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.1;
  letter-spacing: var(--track); color: var(--ink); margin-top: 2px;
}
.blog-card-excerpt {
  font-size: 14px; line-height: 1.45; color: var(--ink-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-meta { font-size: 13px; color: var(--ink-muted); margin-top: auto; padding-top: var(--s-md); display: flex; gap: var(--s-xs); flex-wrap: wrap; }
.blog-card-meta strong { color: var(--ink); font-weight: 500; }
.blog-empty { padding: var(--s-xxxl) 0; color: var(--ink-muted); }

/* -------------------------------- Artikel -------------------------------- */
.article { padding-top: var(--s-section); padding-bottom: var(--s-section-lg); }
.blog-back {
  display: flex; width: fit-content; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--ink-muted);
  margin-bottom: var(--s-xl); transition: color var(--t);
}
.blog-back:hover { color: var(--ink); }
.blog-back svg { width: 16px; height: 16px; }
.preview-banner {
  background: rgba(255,122,61,.12); color: var(--gradient-orange);
  border-radius: var(--r-md); padding: var(--s-sm) var(--s-md); font-size: 13px; font-weight: 600;
  margin-bottom: var(--s-lg);
}
.article-cluster {
  display: flex; width: fit-content; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--ink);
  background: var(--surface-1); box-shadow: var(--e-edge);
  border-radius: var(--r-pill); padding: 7px 13px;
  margin-bottom: var(--s-lg);
}
.article-cluster::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint-strong); }
.article h1 {
  font-family: var(--font-display); font-size: clamp(34px, 4vw, 52px); font-weight: 500;
  letter-spacing: var(--track); line-height: 1.02; color: var(--ink);
  margin-bottom: var(--s-lg);
}
.article-meta { display: flex; align-items: center; gap: var(--s-sm); margin-bottom: var(--s-xl); }
.article-avatar { width: 40px; height: 40px; border-radius: var(--r-full); object-fit: cover; flex: none; background: var(--surface-2); }
.article-meta-text { font-size: 13px; line-height: 1.35; color: var(--ink-muted); }
.article-meta-text strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.article-intro { font-size: 20px; line-height: 1.4; color: var(--ink); margin-bottom: var(--s-xl); max-width: 62ch; }
.article-cover { margin: 0 0 var(--s-xxl); border-radius: var(--r-xl); overflow: hidden; background: var(--surface-1); }
.article-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.article-cover.is-noimg { display: none; }

/* Der Fließtext lief bisher über die volle Breite von 880px - bei 17px sind
   das rund 100 Zeichen je Zeile, und das Auge verliert am Zeilenende den
   Anschluss. 70ch sind etwa 600px und damit die Breite, in der man ruhig
   liest. Kästen und Grafiken dürfen weiterhin ausbrechen, das gibt der Seite
   ihren Rhythmus.
   Dazu: Der Text stand auf --ink-muted, also Grau. Auf --ink-soft liest er
   sich heller und dadurch leichter, ohne grell zu werden. */
.article-body { font-size: 18px; line-height: 1.72; color: var(--ink-soft); }
.article-body > * { max-width: 70ch; margin-inline: auto; }
.article-body > .explainer-box,
.article-body > .stat-callout,
.article-body > figure,
.article-body > table,
.article-body > blockquote,
.article-body > img { max-width: none; }

.article-body h2 {
  font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 500; line-height: 1.12; letter-spacing: var(--track);
  color: var(--ink); margin-top: var(--s-section-sm); margin-bottom: var(--s-md);
  position: relative;
}
/* Kurzer Strich über jeder Zwischenüberschrift: gliedert den Text optisch,
   ohne eine Linie quer durch die Seite zu ziehen. */
.article-body h2::before {
  content: ""; display: block; width: 34px; height: 2px; border-radius: 2px;
  background: var(--mint-strong); margin-bottom: var(--s-md); opacity: .85;
}
.article-body h3 { font-size: 20px; font-weight: 600; color: var(--ink); margin-top: var(--s-xl); margin-bottom: var(--s-xs); }
.article-body p { margin-bottom: var(--s-lg); }

/* Der erste Absatz trägt den Einstieg - etwas größer, dann fällt der Beginn
   leichter. */
.article-body > p:first-of-type { font-size: 19.5px; line-height: 1.62; color: var(--ink); }
.article-body ul, .article-body ol { padding-left: 0; margin: var(--s-lg) auto; list-style: none; }
.article-body li { margin-bottom: var(--s-sm); padding-left: 28px; position: relative; }
.article-body ul > li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--mint-strong);
}
.article-body ol { counter-reset: punkt; }
.article-body ol > li { counter-increment: punkt; }
.article-body ol > li::before {
  content: counter(punkt); position: absolute; left: 0; top: .1em;
  font-family: var(--font-mono); font-size: 12px; color: var(--mint-strong);
  width: 20px; text-align: right;
}
.article-body a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--ink); }
.article-body strong { color: var(--ink); font-weight: 600; }
/* Zitate als herausgehobene Aussage statt als grauer Kasten - das ist der
   Moment, an dem das Auge beim Scrollen hängenbleibt. */
.article-body blockquote {
  margin: var(--s-section-sm) auto; padding: 0 0 0 var(--s-xl);
  border-left: 2px solid var(--mint-strong);
  background: none; box-shadow: none; border-radius: 0;
  color: var(--ink);
  font-family: var(--font-display); font-size: clamp(21px, 2.6vw, 26px);
  font-weight: 500; line-height: 1.3; letter-spacing: -.02em;
  max-width: 62ch;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body table { width: 100%; border-collapse: collapse; margin: var(--s-lg) 0; font-size: 15px; }
.article-body th, .article-body td { text-align: left; padding: var(--s-sm) var(--s-sm); border-bottom: 1px solid var(--hairline); vertical-align: top; }
.article-body th { color: var(--ink); font-weight: 600; }
.article-body code { background: var(--surface-2); padding: 2px 6px; border-radius: 4px; font-size: .9em; }
.article-body img { width: 100%; border-radius: var(--r-lg); margin: var(--s-lg) 0; display: block; }
.article-body figcaption, .article-body .img-caption { font-size: 13px; color: var(--ink-muted); text-align: center; margin-top: -8px; margin-bottom: var(--s-lg); }

/* Erklär-Grafiken: dünnlinige Diagramme im Stil der Startseite (siehe .feat-svg) */
.explainer-box {
  max-width: 520px; margin: var(--s-xl) auto;
  background: var(--surface-1); border-radius: var(--r-xl); box-shadow: var(--e-edge);
  padding: var(--s-lg) var(--s-md);
}
.explainer-box svg { display: block; width: 100%; height: auto; }
.explainer-svg-label { font: 500 11px var(--font-ui); fill: var(--ink-muted); }
.explainer-svg-label--strong { fill: var(--ink); font-weight: 600; }

.stat-callout {
  display: flex; align-items: baseline; gap: var(--s-md);
  background: var(--surface-1); border-radius: var(--r-xl); box-shadow: var(--e-edge);
  padding: var(--s-lg) var(--s-xl); margin: var(--s-xl) 0;
}
.stat-callout .stat-number { font-family: var(--font-display); font-size: 48px; font-weight: 500; color: var(--mint-strong); letter-spacing: var(--track); line-height: 1; flex: none; }
.stat-callout .stat-text { font-size: 15px; color: var(--ink-muted); line-height: 1.45; }
.stat-callout .stat-text strong { color: var(--ink); }

/* FAQ im Artikel: gleiche Optik wie die FAQ der Startseite (.faq-item aus brandwatcher.css) */
.article-faq { margin-top: var(--s-section-sm); }
.article-faq h2 {
  font-family: var(--font-display); font-size: 30px; font-weight: 500; letter-spacing: var(--track); line-height: 1.1;
  color: var(--ink); margin-bottom: var(--s-lg);
}
.article-faq .faq-item summary { font-size: 20px; }
.article-faq .faq-body p { font-size: 16px; }

/* Einladung */
.article-cta {
  margin-top: var(--s-section-sm);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-xl);
  background: var(--surface-2); border-radius: var(--r-xl); box-shadow: var(--e-float);
  padding: var(--s-xl);
}
.article-cta-title { font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: var(--track); color: var(--ink); }
.article-cta-body { font-size: 15px; line-height: 1.45; color: var(--ink-muted); margin-top: var(--s-xs); max-width: 52ch; }
.article-cta .btn { flex: none; }

/* Weiterlesen */
.article-related { margin-top: var(--s-section-sm); }
.article-related h2 {
  font-family: var(--font-display); font-size: 30px; font-weight: 500; letter-spacing: var(--track); line-height: 1.1;
  color: var(--ink); margin-bottom: var(--s-lg);
}
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-md); }
.related-card {
  display: flex; flex-direction: column; gap: var(--s-xs);
  background: var(--surface-1); border-radius: var(--r-xl); box-shadow: var(--e-edge);
  padding: var(--s-lg); color: inherit;
  transition: background-color var(--t), transform var(--t);
}
.related-card:hover { background: var(--surface-2); transform: translateY(-2px); }
.related-card-label { font-size: 12px; font-weight: 600; color: var(--mint-strong); }
.related-card-title { font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.1; letter-spacing: var(--track); color: var(--ink); }
.related-card-excerpt {
  font-size: 13px; color: var(--ink-muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Autor */
.article-author-box {
  margin-top: var(--s-section-sm); padding-top: var(--s-xl); border-top: 1px solid var(--hairline-soft);
  display: flex; align-items: center; gap: var(--s-md);
}
.article-author-box .article-avatar { width: 56px; height: 56px; }
.article-author-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.article-author-role { font-size: 14px; color: var(--ink-muted); margin-top: 2px; }
.article-author-link { font-size: 14px; font-weight: 500; color: var(--mint); margin-top: 6px; display: inline-block; }
.article-author-link:hover { color: var(--ink); }

@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .blog-hero { padding-top: var(--s-section-sm); }
  .blog-grid { grid-template-columns: 1fr; }
  .article { padding-top: var(--s-section-sm); }
  .article-intro { font-size: 18px; }
  .article-body { font-size: 16px; }
  .article-body h2 { font-size: 26px; }
  .article-cta { flex-direction: column; align-items: stretch; padding: var(--s-lg); }
  .article-cta .btn { width: 100%; }
  .stat-callout { flex-direction: column; gap: var(--s-xs); padding: var(--s-lg); }
  .stat-callout .stat-number { font-size: 36px; }
}

/* ====================== Ruhiger Einstieg und Gerüst ====================== */
/* Lesefortschritt: eine dünne Linie am oberen Rand. Sie sagt beim Scrollen,
   wie viel noch kommt - das nimmt einem langen Text die Unabsehbarkeit. */
.article-fortschritt {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  background: transparent; pointer-events: none;
}
.article-fortschritt span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--mint-strong), var(--gradient-orange));
  transition: width 90ms linear;
}

/* Inhaltsverzeichnis: gibt dem Artikel ein Gerüst, bevor der Text beginnt. */
.article-toc {
  margin: 0 auto var(--s-xxl);
  max-width: 70ch;
  padding: var(--s-lg) var(--s-xl);
  background: var(--surface-1);
  border-radius: var(--r-xl);
  box-shadow: var(--e-edge);
}
.article-toc-head {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: var(--s-sm);
}
.article-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: 7px; }
.article-toc li { counter-increment: toc; padding-left: 26px; position: relative; }
.article-toc li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: .18em;
  font-family: var(--font-mono); font-size: 11px; color: var(--mint-strong);
}
.article-toc a {
  font-size: 15px; line-height: 1.4; color: var(--ink-soft);
  transition: color var(--t);
}
.article-toc a:hover { color: var(--ink); }

/* Sprungziele nicht unter die Kopfleiste rutschen lassen */
.article-body h2 { scroll-margin-top: 90px; }

/* ---------------------- Einstieg mit mehr Wirkung ----------------------- */
.article h1 { margin-bottom: var(--s-lg); }
.article-intro {
  font-size: clamp(19px, 2.4vw, 23px); line-height: 1.5;
  color: var(--ink-soft); max-width: 62ch;
  margin-bottom: var(--s-xxl);
}
.article-cover { margin-bottom: var(--s-section-sm); }
.article-cover img { aspect-ratio: 21 / 9; }

/* Die Erklärgrafik darf aus dem Textblock ausbrechen und bekommt Luft -
   sie ist der visuelle Ruhepunkt des Artikels. */
.explainer-box {
  max-width: 640px;
  margin: var(--s-section-sm) auto var(--s-md);
  padding: var(--s-xl) var(--s-lg);
}
.article-body .img-caption {
  max-width: 52ch; margin: 0 auto var(--s-section-sm);
  text-align: center; font-size: 13.5px; line-height: 1.5;
}

/* Der Zahlen-Kasten wird zur Zäsur: breiter als der Text, mit Akzentkante. */
.stat-callout {
  max-width: 640px; margin: var(--s-section-sm) auto;
  border-left: 2px solid var(--mint-strong);
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
  align-items: center;
}
.stat-callout .stat-number { font-size: 56px; }

/* Zwischen den Abschnitten am Ende etwas mehr Ruhe */
.article-faq, .article-related, .article-cta { margin-top: var(--s-section); }

@media (max-width: 767px) {
  .article-body { font-size: 17px; line-height: 1.68; }
  .article-body > p:first-of-type { font-size: 18px; }
  .article-toc { padding: var(--s-md) var(--s-lg); }
  .article-body h2::before { width: 26px; }
  .stat-callout .stat-number { font-size: 40px; }
  .article-cover img { aspect-ratio: 16 / 10; }
}