/* ==========================================================================
   Nachschein Blog · Artikelseiten im "Nachleuchten"-Look (2026-11-01)
   Wird zuletzt geladen und gilt nur für body.blog-modern-article.
   Die Titelbilder und ihre Einzelregeln bleiben unverändert.
   ========================================================================== */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
  font-style: normal; font-weight: 400 900; font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-wght-italic.woff2") format("woff2");
  font-style: italic; font-weight: 400 900; font-display: swap;
}

body.blog-modern-article {
  --bm-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --bm-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --bm-abyss: #1f1814;
  --bm-deep: #2b211b;
  --bm-foam: #f3ece2;
  --bm-foam-dim: #b9ada0;
  --bm-ink: #1f1814;
  --bm-text: #332b26;
  --bm-slate: #6b6058;
  --bm-line: rgba(31, 24, 20, .12);
  --bm-mist: #f6f3ef;
  --bm-link: #0b5d84;
  --cat: #1ccfee; --cat-ink: #0b7a91;
  background: #fff;
  color: var(--bm-ink);
}
body.blog-modern-article[data-cat="insight"]     { --cat: #ffd400; --cat-ink: #806200; }
body.blog-modern-article[data-cat="einordnung"]  { --cat: #e6007e; --cat-ink: #c4006b; }
body.blog-modern-article[data-cat="hintergrund"] { --cat: #e2793a; --cat-ink: #a84f1a; }

body.blog-modern-article main { width: 100%; max-width: none; background: #fff; border-inline: 0; font-family: var(--bm-sans); }
body.blog-modern-article .site-header::before { background: rgba(255, 255, 255, .96); border-bottom: 1px solid rgba(31, 24, 20, .08); }

/* Lesefortschritt in Kategoriefarbe (nur wo der Browser scroll-gesteuerte Animationen kann) */
@supports (animation-timeline: scroll()) {
  body.blog-modern-article::after {
    content: ""; position: fixed; left: 0; top: 0; z-index: 200;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--cat-ink), var(--cat));
    transform-origin: 0 50%;
    animation: bm-progress linear both;
    animation-timeline: scroll(root block);
    pointer-events: none;
  }
  @keyframes bm-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- Kopf ---------- */
body.blog-modern-article .article-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  width: fit-content; max-width: 100%;
  margin-bottom: 22px; padding: 6px 13px 6px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cat) 20%, #fff);
  color: var(--cat-ink);
  font: 600 13px/1.2 var(--bm-sans);
  letter-spacing: 0; text-transform: none;
}
body.blog-modern-article .article-hero .eyebrow::before {
  content: ""; width: 8px; height: 8px; background: var(--cat); flex: none;
}
body.blog-modern-article .article-hero h1 {
  font-family: var(--bm-sans);
  font-weight: 600;
  letter-spacing: -.032em;
  line-height: 1.03;
  color: var(--bm-ink);
  text-wrap: balance;
  hyphens: manual;
}
body.blog-modern-article .article-lead {
  font-family: var(--bm-serif);
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.55;
  color: var(--bm-text);
}
body.blog-modern-article .article-meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font: 400 13px/1.5 var(--bm-sans);
  letter-spacing: 0; text-transform: none;
  color: var(--bm-slate);
  border-color: var(--bm-line);
}
body.blog-modern-article .article-meta span::before,
body.blog-modern-article .article-meta span::after { content: none; }
body.blog-modern-article .article-image-note { font-family: var(--bm-sans); color: var(--bm-slate); }

/* ---------- Lesetext ---------- */
body.blog-modern-article .article-copy p,
body.blog-modern-article .article-copy li {
  font-family: var(--bm-sans);
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--bm-text);
}
body.blog-modern-article .article-copy h2,
body.blog-modern-article .article-copy h3 {
  font-family: var(--bm-sans);
  font-weight: 600;
  color: var(--bm-ink);
  letter-spacing: -.022em;
  text-wrap: balance;
}
body.blog-modern-article .article-copy h2 { font-size: clamp(1.45rem, 1.1rem + .9vw, 1.85rem); line-height: 1.2; }
body.blog-modern-article .article-copy h3 { font-size: 1.2rem; line-height: 1.3; }
body.blog-modern-article .article-copy strong { color: var(--bm-ink); font-weight: 600; }
body.blog-modern-article .article-copy a:not(.button):not(.text-link) {
  color: var(--bm-link);
  text-decoration-color: color-mix(in srgb, var(--bm-link) 40%, transparent);
}
body.blog-modern-article .article-copy a:not(.button):not(.text-link):hover { text-decoration-color: currentColor; }
body.blog-modern-article .article-copy blockquote {
  margin: 32px 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--cat);
  font-family: var(--bm-serif); font-style: italic;
}
body.blog-modern-article .article-copy ::selection { background: color-mix(in srgb, var(--cat) 45%, #fff); }

/* Kleine Hinweise */
body.blog-modern-article .article-copy .tool-note {
  padding: 12px 16px !important;
  border-radius: 10px;
  background: var(--bm-mist);
  font-family: var(--bm-sans);
  color: var(--bm-slate);
}

/* Inhaltsverzeichnis */
body.blog-modern-article .toc-trigger {
  border-radius: 12px;
  background: var(--bm-mist);
  font-family: var(--bm-sans);
  color: var(--bm-ink);
  box-shadow: inset 3px 0 0 var(--cat);
}
body.blog-modern-article .toc-trigger:hover { color: var(--bm-link); }
body.blog-modern-article .toc-dialog { border-radius: 16px; font-family: var(--bm-sans); }
body.blog-modern-article .toc-dialog h2 { font-family: var(--bm-sans); font-weight: 600; letter-spacing: -.025em; }
body.blog-modern-article .toc-dialog .toc-kicker { font-family: var(--bm-sans); letter-spacing: 0; text-transform: none; font-size: 13px; }
body.blog-modern-article .toc-dialog a { font-family: var(--bm-sans); }
body.blog-modern-article .toc-dialog a::before { color: var(--cat-ink); font-variant-numeric: tabular-nums; }
body.blog-modern-article .toc-dialog a:hover { color: var(--bm-link); background: var(--bm-mist); }

/* Tabellen und Aufklapper */
body.blog-modern-article .article-copy table { font-family: var(--bm-sans); }
body.blog-modern-article .article-copy thead { background: var(--bm-mist); }
body.blog-modern-article .article-copy details summary { font-family: var(--bm-sans); }

/* ---------- Artikelende ---------- */
body.blog-modern-article .article-copy .article-related h2 { font-size: 1.25rem; }
body.blog-modern-article .article-copy .article-related ul { list-style: none; padding: 0; border-top: 1px solid var(--bm-line); }
body.blog-modern-article .article-copy .article-related li { border-bottom: 1px solid var(--bm-line); }
body.blog-modern-article .article-copy .article-related li a {
  display: block; padding: 14px 0;
  color: var(--bm-ink); font-weight: 600; text-decoration: none;
}
body.blog-modern-article .article-copy .article-related li a:hover { color: var(--bm-link); }
body.blog-modern-article .article-copy .article-related > a { color: var(--bm-link); font-weight: 600; }

/* Anfrage-Box als Ausschnitt der Nachtbühne */
body.blog-modern-article .article-cta .contact-strip-inner {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 50% 80% at 100% 0%, rgba(230, 0, 126, .14), transparent 70%),
    linear-gradient(160deg, var(--bm-deep), var(--bm-abyss));
  color: var(--bm-foam);
}
body.blog-modern-article .article-cta .contact-strip-inner::after {
  content: ""; position: absolute; right: -10%; bottom: -60%; z-index: -1;
  width: 55%; height: 140%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cat) 40%, transparent), transparent);
  filter: blur(20px); pointer-events: none;
}
body.blog-modern-article .article-copy .article-cta h2 { font-family: var(--bm-sans); font-weight: 600; color: #fff; letter-spacing: -.02em; }
body.blog-modern-article .article-copy .article-cta h2 em { font-family: var(--bm-serif); font-weight: 400; color: var(--cat); }
body.blog-modern-article .article-copy .article-cta .cta-text p { color: var(--bm-foam-dim); }
body.blog-modern-article .article-cta .button {
  border-color: #fff; background: #fff; color: var(--bm-ink);
  border-radius: 999px; font-family: var(--bm-sans); font-weight: 600;
}
body.blog-modern-article .article-cta .button:hover { background: var(--cat); border-color: var(--cat); color: var(--bm-ink); }
body.blog-modern-article .article-cta .button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

body.blog-modern-article .article-legal,
body.blog-modern-article .article-disclaimer,
body.blog-modern-article .article-editorial-note { font-family: var(--bm-sans); }

@media (prefers-reduced-motion: reduce) {
  body.blog-modern-article::after { display: none; }
}

/* Titelbild mit eingebauter Aufschrift: Überschrift schmal halten, damit sie nicht in den Bildtext läuft. */
@media (min-width: 761px) {
  body.blog-modern-article main > article:has(.project-hero-image img[src*="cover-bild-video-prompts"]) .article-hero h1 {
    width: min(44%, 560px);
    font-size: clamp(2.4rem, 4.2vw, 3.7rem);
  }
}