/* ==========================================================================
   broschart.net – Ergänzung für die CMS-Seiten (Analysen, Kategorien, Serien,
   Zitate, einzelne Artikel). Basis ist assets/broschart.css.
   Die Templates (spectronq/_articles.php) arbeiten teils mit Inline-Styles;
   die Regeln hier richten Abstände, Breiten und Typografie am neuen Layout aus.
   ========================================================================== */

/* --- Schrift: alle Widgets (Newsletter, Teilen, Kommentare, Push, Umfragen,
   Charts …) bringen „Plus Jakarta Sans“ mit – hier auf die Site-Schrift. --- */
.bs-cms [style*="Plus Jakarta"],
.bs-cms [class^="spq-"], .bs-cms [class*=" spq-"],
.bs-cms [class^="bn-"],  .bs-cms [class*=" bn-"],
.bs-cms [class^="spq-"] *, .bs-cms [class*=" spq-"] *,
.bs-cms [class^="bn-"] *,  .bs-cms [class*=" bn-"] *,
.bs-cms input, .bs-cms select, .bs-cms textarea, .bs-cms button { font-family: inherit !important; }
.bs-cms code, .bs-cms pre, .bs-cms kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; }

/* --- Abschnitte: weiße Flächen der alten Bühne entfallen, seitliche Ränder
   folgen der Containerbreite des neuen Layouts (wie .bs-container). --- */
.bs-cms main > section[style*="background: rgb(255, 255, 255)"],
.bs-cms main > section[style*="background: rgb(255,255,255)"] { background: var(--bg) !important; }
.bs-cms main > section[style] {
  padding-left: max(calc((100% - 1280px) / 2), clamp(19px, 4vw, 78px)) !important;
  padding-right: max(calc((100% - 1280px) / 2), clamp(19px, 4vw, 78px)) !important;
}
.bs-cms main > section[style*="background: #f1f7f5"] { background: #f2f7f5 !important; border-top: 1px solid #e6efec; }

/* --- Übersicht --------------------------------------------------------- */
.bs-cms-liste main > section > div[style*="max-width: 1100px"] { max-width: none !important; }
.bs-cms-titel { font-family: "Inter Display", Inter, system-ui, sans-serif; font-weight: 630; letter-spacing: -.03em; font-size: clamp(40px, 4.6vw, 70px); line-height: 1.07; margin: 14px 0 0; color: var(--ink); text-wrap: balance; }
.bs-cms-intro { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: #4d646b; max-width: 720px; margin: 18px 0 0; white-space: pre-line; }
.bs-cms-liste main > section:first-of-type { padding-top: clamp(56px, 8vh, 96px) !important; }
/* Kartentitel und Feature-Karte an die neue Typo angleichen */
.bs-cms-liste article h3, .spq-feat-title { font-weight: 650 !important; letter-spacing: -.018em !important; }
.spq-feat-title { font-size: clamp(24px, 2.3vw, 32px) !important; }
.spq-feat-card { border-radius: 20px; }
.spq-feat-kicker, .spq-feat-more { color: var(--mint-dark) !important; }
/* Push-Button (index-push.js) im Stil der Ghost-Buttons */
.bs-cms .spq-index-push-btn { background: transparent !important; color: var(--ink) !important; border: 1px solid #c9d8d5 !important; border-radius: 100px !important; font-weight: 650 !important; }
.bs-cms .spq-index-push-btn:hover:not(:disabled) { background: #eff5f2 !important; }

/* --- Artikel: Kopf ------------------------------------------------------ */
.bs-artikel-kopf { position: relative; z-index: 1; background: var(--bg); padding: clamp(48px, 7vh, 88px) 0 28px; }
.bs-artikel-kopf-innen { max-width: 900px; }
.bs-artikel-titel { font-family: "Inter Display", Inter, system-ui, sans-serif; font-weight: 630; letter-spacing: -.027em; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.07; margin: 16px 0 0; color: var(--ink); text-wrap: balance; }
.bs-artikel-kopf .bs-eyebrow + .bs-artikel-titel { margin-top: 14px; }
.bs-artikel-kopf-innen > .bs-artikel-titel:first-child { margin-top: 0; }
.bs-artikel-meta { margin-top: 18px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 650; color: var(--subtle); line-height: 1.7; }
.bs-artikel-meta a { color: var(--mint-dark) !important; border-bottom-color: #88b9af !important; }
.bs-artikel-lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; color: #4d646b; margin: 24px 0 0; max-width: 760px; }
/* Hero-CTA-Zeile: Newsletter-Button wie .bs-btn */
.spq-hero-ctas > a { background: var(--ink) !important; border-radius: 100px !important; font-weight: 650 !important; }
.spq-hero-ctas > a:hover { background: #173958 !important; }
/* Hero-Bild (Vorhang-Effekt) unter dem Kopf; Seitenkopf liegt darüber */
.bs-cms-artikel main > div[style*="height: 520px"] { top: var(--head) !important; }
@media (max-width: 960px) {
  .bs-cms-artikel main > div[style*="height: 520px"],
  .bs-cms-artikel main > div[style*="height: 520px"] > div[role="img"] { height: 280px !important; }
}
@media (max-width: 640px) {
  .bs-cms-artikel main > div[style*="height: 520px"],
  .bs-cms-artikel main > div[style*="height: 520px"] > div[role="img"] { height: 220px !important; }
}

/* --- Artikel: Text -------------------------------------------------------- */
.bs-artikel-rumpf { position: relative; z-index: 1; background: var(--bg); padding: 8px 0 72px; }
.bs-cms .article-stage { max-width: none; margin: 0 auto; grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(40px, 6vw, 96px); }
.bs-cms .article-body { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.72; color: #33484d; max-width: 740px; }
.bs-cms .article-body h2 { font-family: "Inter Display", Inter, system-ui, sans-serif; font-size: clamp(26px, 2.4vw, 34px); font-weight: 640; letter-spacing: -.022em; line-height: 1.18; color: var(--ink); margin: 56px 0 16px; scroll-margin-top: calc(var(--head) + 24px); }
.bs-cms .article-body h3 { font-size: clamp(20px, 1.7vw, 24px); font-weight: 650; letter-spacing: -.015em; color: var(--ink); scroll-margin-top: calc(var(--head) + 24px); }
.bs-cms .article-body strong { color: var(--ink); }
.bs-cms .article-body a { color: var(--mint-dark); text-decoration-color: #88b9af; }
.bs-cms .article-body a:hover { color: #084f4c; text-decoration-color: currentColor; }
.bs-cms .article-body blockquote { border-left-color: var(--mint); color: #4d646b; }
.bs-cms .article-body blockquote.spq-quote-big { background: #fff; border: 1px solid #dde8e5; border-radius: 18px; color: var(--ink); font-family: "Inter Display", Inter, system-ui, sans-serif; letter-spacing: -.015em; }
.bs-cms .article-body blockquote.spq-quote-big::before { color: var(--mint-soft); opacity: 1; }
.bs-cms .article-body .spq-section--green { background: #e9f5f2; }
.bs-cms .article-body pre { background: #fff; border-color: #dde8e5; }
.bs-cms .article-toc { top: calc(var(--head) + 28px); max-height: calc(100vh - var(--head) - 48px); }
.bs-cms .article-toc .toc-label { font-size: 12.5px; letter-spacing: .14em; color: #638c86; }
@media (max-width: 1024px) { .bs-cms .article-stage { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Serienbox, Kommentare, Teilen: Flächen in neuer Palette */
.article-series-section > div { max-width: 1280px !important; }
.article-series-section > div > div { background: #fff !important; border-color: #dde8e5 !important; border-radius: 18px !important; }
.article-series-section h2 { font-weight: 650 !important; letter-spacing: -.018em !important; }
.article-comments-section > div { max-width: 1280px !important; }
.article-comments-section .article-comments-mount { max-width: 880px; }

/* Abschluss-Aufruf: Zusatzzeile */
.bs-aufruf-sub { color: #bfe6df; }

/* --- Schmal --------------------------------------------------------------- */
@media (max-width: 760px) {
  .bs-cms main > section[style*="padding: 80px"] { padding-top: 48px !important; }
  .bs-cms main > section[style*="padding: 32px"] { padding-bottom: 56px !important; }
  .bs-cms [style*="grid-template-columns: 1fr 1fr"]:not(.spq-feat-card),
  .bs-cms [style*="grid-template-columns: repeat(2, minmax(0, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; }
  .bs-cms [style*="grid-template-columns: repeat(auto-fill, minmax(320px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; }
  .bs-cms div[style*="display: flex"][style*="gap: 12px"] { flex-wrap: wrap !important; }
  .article-series-section > div > div { padding: 22px 20px !important; }
}
@media print {
  .bs-header, .bs-footer, .bs-aufruf { display: none !important; }
}

/* Countdown (geplante Artikel): Newsletter-Button hell auf dunkler Fläche */
.bs-cms .bs-cd-btn { background: #fff !important; color: var(--ink) !important; }
.bs-cms .bs-cd-btn:hover { background: #e6f4f1 !important; }

/* Artikel: Das Hero-Bild ist per position:sticky fixiert und liegt hinter dem ganzen
   Artikel. Alles danach braucht eine eigene Ebene und einen deckenden Grund, sonst
   scheint das Bild durch (Newsletter, Kontakt-Aufruf, Lücken zwischen Abschnitten). */
.bs-cms-artikel main > *:not([style*="position: sticky"]) { position: relative; z-index: 1; background-color: var(--bg); }
.bs-cms-artikel main > .bs-aufruf { background-color: #0b5a5a; }