/* „Bevor es Geschichte war“: Sendungsseite im Stil der Cover (01.10.2026).
   Dunkles Ochsenblut mit Goldadern wie auf dem Cover, Titel in Playfair.
   Die Folgen stehen als Zeitstrahl nach dem Jahr ihrer Geschichte, links und
   rechts eines goldenen Risses, der sich beim Scrollen weiterzieht; die
   Jahreszahlen rollen vom vorigen Jahr zum eigenen, am Ende steht heute.
   Gold, Risse und Zeitstrahl baut stil.js. Nur aktiv mit body.sg-stil. */

@font-face {
  font-family: "Playfair NK"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(/assets/fonts/playfair-display-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair NK"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(/assets/fonts/playfair-display-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair NK"; font-style: italic; font-display: swap; font-weight: 400 900;
  src: url(/assets/fonts/playfair-display-latin-wght-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond NK"; font-style: normal; font-display: swap; font-weight: 400 800;
  src: url(/assets/fonts/eb-garamond-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond NK"; font-style: normal; font-display: swap; font-weight: 400 800;
  src: url(/assets/fonts/eb-garamond-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body.sg-stil {
  --blut: #1c0405;
  --karmin: #5c0d12;
  --pergament: #f0e3c6;
  --gold: #d9aa4c;
  --gold-hell: #f6dc93;
  --goldverlauf: linear-gradient(172deg, #fae7aa 0%, #d8a948 30%, #f4d27a 52%, #a8782a 78%, #efd08a 100%);
  --display: "Playfair NK", Georgia, serif;
  --serif: "EB Garamond NK", Georgia, serif;
  --ink: var(--pergament);
  --ink-2: rgba(240, 227, 198, .88);
  --dim: rgba(240, 227, 198, .64);
  --faint: rgba(240, 227, 198, .4);
  --line: rgba(217, 170, 76, .26);
  --line-2: rgba(217, 170, 76, .55);
  color: var(--pergament);
  background:
    radial-gradient(ellipse 70% 50% at 12% 8%, rgba(110, 16, 22, .55), transparent 70%),
    radial-gradient(ellipse 60% 45% at 92% 38%, rgba(96, 12, 18, .45), transparent 70%),
    radial-gradient(ellipse 80% 40% at 30% 78%, rgba(84, 10, 15, .4), transparent 70%),
    var(--blut);
}
/* Feine Körnung wie auf dem Cover, über der ganzen Seite */
body.sg-stil::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html:has(body.sg-stil) { background: #1c0405; }
body.sg-stil .nk-bg, body.sg-stil #nk-hero-viz, body.sg-stil #nk-three { display: none !important; }
body.sg-stil #landing { overflow-x: clip; }
body.sg-stil :focus-visible { outline-color: var(--gold) !important; }

/* Kopfzeile: Schriftzug in Gold, Menü in Playfair, das aktuelle Ziel golden mit Raute */
body.sg-stil .sd-nav.is-solid { background: rgba(28, 4, 5, .95); box-shadow: 0 1px 0 var(--line); }
body.sg-stil .sd-nav__brand .lg--svg { display: block; width: auto; height: 24px; margin: 0; }
body.sg-stil .sd-nav__brand .lg--svg path, body.sg-stil .sd-foot__logo path { fill: url(#bg-gold); }
body.sg-stil .sd-nav__menu { gap: 4px; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.sg-stil .sd-nav__glide { display: none; }
body.sg-stil .sd-nav__menu a { gap: 9px; height: 42px; padding: 0 14px; font-family: var(--display); font-size: 16.5px; font-weight: 500; color: rgba(240, 227, 198, .7); }
body.sg-stil .sd-nav__menu a:hover { color: var(--pergament); }
body.sg-stil .sd-nav__menu a[aria-current] { color: var(--gold-hell); }
body.sg-stil .sd-nav__menu a[aria-current]::before { content: ""; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 10px rgba(246, 210, 120, .7); }
body.sg-stil .sd-burger { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
body.sg-stil .sd-burger svg { stroke: var(--gold-hell); }
body.sg-stil .sd-sheet { background: rgba(28, 4, 5, .98); color: var(--pergament); }
body.sg-stil .sd-sheet nav a { text-transform: none; font-family: var(--display); font-weight: 700; font-stretch: normal; font-size: 38px; color: var(--pergament); border-bottom-color: var(--line); }
body.sg-stil .sd-sheet nav a[aria-current] { color: var(--gold); }
body.sg-stil .sd-sheet__close { box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--pergament); }

/* Kopf: Titel mittig wie auf dem Cover, Goldrisse von den Rändern */
body.sg-stil .sg-kopf { position: relative; isolation: isolate; padding-bottom: clamp(70px, 9vw, 140px); }
body.sg-stil .bg-risse { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; overflow: visible; filter: drop-shadow(0 0 5px rgba(246, 205, 110, .35)); }
body.sg-stil .bg-risse path { fill: none; stroke: url(#bg-gold); stroke-linecap: round; stroke-linejoin: round; }
body.sg-stil .sg-kopf .sd-show { grid-template-columns: minmax(0, 880px); justify-content: center; justify-items: center; text-align: center; }
body.sg-stil .sg-kopf .sd-show > img { display: none; }
body.sg-stil .sg-kopf .sd-h {
  text-transform: none; font-family: var(--display); font-weight: 800; font-stretch: normal; letter-spacing: -.01em;
  font-size: clamp(72px, 10.5vw, 158px); line-height: .9; margin: 0 auto .35em;
  background: var(--goldverlauf); -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.sg-stil .sg-kopf .sd-h .bg-zeile { display: block; }
body.sg-stil .sg-kopf .sd-h .bg-zeile--klein { font-size: .56em; line-height: 1; }
body.sg-stil .sg-kopf .sd-show p { font-family: var(--serif); font-size: 21px; line-height: 1.55; color: var(--ink-2); max-width: 34em; margin-left: auto; margin-right: auto; }
body.sg-stil .sg-kopf .sd-btns, body.sg-stil .sg-kopf .sd-podicons { justify-content: center; }
body.sg-stil .sg-kopf .sd-podicons__t { flex-basis: 100%; text-align: center; margin: 0 0 2px; }
body.sg-stil .sg-kopf .sd-btn--red { background: var(--goldverlauf); border: 0; color: var(--blut); box-shadow: 0 14px 34px -16px rgba(246, 205, 110, .7); }
body.sg-stil .sg-kopf .sd-btn--red:hover { filter: brightness(1.08); }
body.sg-stil .sg-kopf .sd-btn--red svg { fill: var(--blut); }
body.sg-stil .sd-podicons__t { color: var(--dim); font-family: var(--display); font-style: italic; }
body.sg-stil .sd-podicon { background: none; color: var(--gold-hell); box-shadow: inset 0 0 0 1.5px var(--line-2); border: 0; }
body.sg-stil .sd-podicon:hover, body.sg-stil .sd-podicon:focus-visible { background: var(--gold); color: var(--blut); }
body.sg-stil .sd-podicon::after { background: var(--gold-hell); color: var(--blut); }

/* Zeitstrahl */
body.sg-stil #folgen { padding-top: clamp(40px, 5vw, 70px); }
body.sg-stil #folgen .sd-head { text-align: center; }
body.sg-stil #folgen .sd-h {
  text-transform: none; font-family: var(--display); font-weight: 800; font-stretch: normal; font-size: clamp(48px, 5.6vw, 88px);
  background: var(--goldverlauf); -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.sg-stil .sg-liste.bg-zeit { display: block; position: relative; padding: 30px 0 0; }
body.sg-stil .bg-linie { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; filter: drop-shadow(0 0 6px rgba(246, 205, 110, .45)); }
body.sg-stil .bg-linie path { fill: none; stroke: url(#bg-gold); stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset .25s linear; }
body.sg-stil .bg-punkt {
  position: absolute; z-index: 2; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--gold-hell);
  transform: rotate(45deg) scale(0); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 0 0 16px 4px rgba(246, 205, 110, .55);
}
body.sg-stil .bg-punkt.is-an { transform: rotate(45deg) scale(1); }

body.sg-stil .bg-zeit .sg-folge, body.sg-stil .bg-zeit .sg-folge:hover, body.sg-stil .bg-zeit .sg-folge.is-on {
  display: block; position: relative; width: calc(50% - 64px); margin: 0 0 110px; padding: 0 0 26px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(48, 7, 9, .94), rgba(24, 3, 4, .96)); box-shadow: inset 0 0 0 1px var(--line), 0 40px 70px -40px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.sg-stil .bg-zeit .sg-folge.bg-links { margin-right: auto; }
body.sg-stil .bg-zeit .sg-folge.bg-rechts { margin-left: auto; }
body.sg-stil .bg-zeit .sg-folge.is-on { box-shadow: inset 0 0 0 1.5px var(--gold), 0 40px 80px -36px rgba(246, 205, 110, .35); }
/* Auftritt: von der eigenen Seite herein */
body.sg-stil.bg-auftritt .bg-zeit .sg-folge { transition: transform 1s cubic-bezier(.2, .85, .25, 1), opacity .8s ease, box-shadow .4s; }
body.sg-stil.bg-auftritt .bg-zeit .sg-folge.bg-links:not(.is-da) { opacity: 0; transform: translateX(-70px); }
body.sg-stil.bg-auftritt .bg-zeit .sg-folge.bg-rechts:not(.is-da) { opacity: 0; transform: translateX(70px); }

/* Die Jahreszahl auf der anderen Seite der Linie */
body.sg-stil .bg-jahr {
  position: absolute; top: 34px; font-family: var(--display); font-weight: 800; font-size: clamp(64px, 7.4vw, 124px); line-height: 1;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em;
  background: var(--goldverlauf); -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none;
}
body.sg-stil .bg-links .bg-jahr { left: calc(100% + 128px); }
body.sg-stil .bg-rechts .bg-jahr { right: calc(100% + 128px); text-align: right; }

body.sg-stil .bg-zeit .sg-folge__bild { position: relative; }
body.sg-stil .bg-zeit .sg-folge__cov, body.sg-stil .bg-zeit .sg-folge__bild:hover .sg-folge__cov { width: 100%; border-radius: 4px 4px 0 0; box-shadow: none; transform: none; }
body.sg-stil .bg-zeit .sg-folge__main { display: block; padding: 24px 28px 0; }
body.sg-stil .sg-folge__nr { margin: 0 0 6px; text-transform: none; letter-spacing: 0; font-family: var(--display); font-style: italic; font-size: 16px; font-weight: 500; color: var(--gold); }
body.sg-stil .sg-folge__titel { font-family: var(--display); font-weight: 800; font-stretch: normal; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; color: var(--pergament); }
body.sg-stil .sg-folge__mit { color: var(--dim); font-family: var(--serif); font-style: italic; font-size: 17px; }
body.sg-stil .sg-folge__text, body.sg-stil .sg-folge__lang p { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink-2); }
body.sg-stil .sg-folge .sd-tag { background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--gold-hell); }
body.sg-stil .bg-zeit .sg-folge__steuer { display: inline-flex; margin-top: 22px; vertical-align: middle; }
body.sg-stil .bg-zeit .sg-folge.is-on .sg-folge__steuer { display: flex; }
body.sg-stil .bg-zeit .sg-folge__mehr { float: right; margin-top: 26px; }

/* Abspielen in Gold */
body.sg-stil .sg-folge .sd-pvbtn .sd-ring,
body.sg-stil .sg-folge .sd-pvbtn[aria-pressed="false"]:not(:hover):not(:focus-visible) .sd-ring {
  background: conic-gradient(var(--pergament) calc(var(--pv) * 360deg), var(--gold) 0);
}
body.sg-stil .sg-folge .sd-pvbtn .sd-ring::before,
body.sg-stil .sg-folge .sd-pvbtn[aria-pressed="false"]:not(:hover):not(:focus-visible) .sd-ring::before { background: var(--gold); }
body.sg-stil .sg-folge .sd-pvbtn .sd-ring svg,
body.sg-stil .sg-folge .sd-pvbtn[aria-pressed="false"]:not(:hover):not(:focus-visible) .sd-ring svg { fill: var(--blut); }
body.sg-stil .sg-folge__zeit { color: var(--dim); }
body.sg-stil .sg-folge__spur i { background: linear-gradient(90deg, var(--gold) calc(var(--pv, 0) * 100%), rgba(240, 227, 198, .16) 0); }
body.sg-stil .sg-folge__mehr { background: none; color: var(--gold-hell); box-shadow: inset 0 0 0 1.5px var(--line-2); }
body.sg-stil .sg-folge__mehr:hover, body.sg-stil .sg-folge__mehr:focus-visible { background: rgba(217, 170, 76, .12); }
body.sg-stil .sg-folge__mehr svg { fill: currentColor; }

/* Ende des Zeitstrahls: heute */
body.sg-stil .bg-heute { position: relative; text-align: center; padding: 30px 0 0; }
body.sg-stil .bg-heute .bg-jahr { position: static; display: block; }
body.sg-stil .bg-heute__t { display: block; margin-top: 10px; font-family: var(--display); font-style: italic; font-size: 22px; color: var(--dim); }

/* Fuß: der Schriftzug in Gold, mittig und schmaler, die Links darunter mittig */
body.sg-stil main#landing { padding-bottom: 0; }
body.sg-stil .sd-foot { margin-top: clamp(100px, 11vw, 160px); padding: 0 0 clamp(44px, 5vw, 70px); }
body.sg-stil .sd-foot .sd-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
body.sg-stil .sd-foot__logo { display: block; width: min(640px, 82%); height: auto; }
body.sg-stil .sd-foot nav { justify-content: center; gap: 10px 28px; margin-top: 30px; }
body.sg-stil .sd-foot a { font-family: var(--display); font-style: italic; font-size: 16px; color: var(--dim); }
body.sg-stil .sd-foot a:hover { color: var(--gold-hell); }

@media (max-width: 900px) {
  body.sg-stil .bg-zeit .sg-folge, body.sg-stil .bg-zeit .sg-folge:hover, body.sg-stil .bg-zeit .sg-folge.is-on { width: auto; margin: 0 0 70px 46px; }
  body.sg-stil .bg-zeit .sg-folge.bg-links, body.sg-stil .bg-zeit .sg-folge.bg-rechts { margin-left: 46px; margin-right: 0; }
  /* Die Jahreszahl steht über der Karte, neben dem Punkt auf der Linie */
  body.sg-stil .bg-zeit .sg-folge, body.sg-stil .bg-zeit .sg-folge:hover, body.sg-stil .bg-zeit .sg-folge.is-on { margin-top: 86px; }
  body.sg-stil .bg-links .bg-jahr, body.sg-stil .bg-rechts .bg-jahr { top: -74px; left: 0; right: auto; text-align: left; font-size: 58px; }
  body.sg-stil.bg-auftritt .bg-zeit .sg-folge.bg-links:not(.is-da), body.sg-stil.bg-auftritt .bg-zeit .sg-folge.bg-rechts:not(.is-da) { transform: translateX(50px); }
  body.sg-stil .bg-heute { text-align: left; padding-left: 46px; }
  body.sg-stil .sd-nav__brand .lg--svg { height: 19px; }
}
@media (max-width: 640px) {
  body.sg-stil .bg-zeit .sg-folge__main { padding: 20px 20px 0; }
  body.sg-stil .sg-folge__text, body.sg-stil .sg-folge__lang p { font-size: 18px; }
  body.sg-stil .bg-zeit .sg-folge__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
  body.sg-stil .bg-zeit .sg-folge__main > * { grid-column: 1 / -1; grid-row: auto; }
  body.sg-stil .bg-zeit .sg-folge__main > .sg-folge__steuer { grid-column: 1; }
  body.sg-stil .bg-zeit .sg-folge__main > .sg-folge__mehr { grid-column: 2; float: none; margin-top: 22px; }
  body.sg-stil .sg-kopf .sd-show p { font-size: 19px; }
}

/* Zweite Runde: die große Jahreszahl im Hintergrund */
body.sg-stil .bg-zeitzahl {
  position: fixed; left: 50%; top: 50%; z-index: 0; translate: -50% -50%; pointer-events: none; opacity: 0;
  font-family: var(--display); font-weight: 900; font-size: min(34vw, 46vh); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums; color: transparent;
  /* ohne Outline: die Ziffern der variablen Schrift haben überlappende Konturen, deren Reste der Strich mitzeichnet */
  background: linear-gradient(180deg, rgba(217, 170, 76, .15), rgba(217, 170, 76, .045)); -webkit-background-clip: text; background-clip: text;
  transition: opacity .4s;
}
@media (max-width: 900px) {
  body.sg-stil .bg-zeitzahl { font-size: 40vw; }
}

/* Seite einer Folge (/<sendung>/<folge>, 01.10.2026): Abspielknopf in den
   Farben der Sendung, Titel in ihrer Schrift. */
body.sg-stil { --einzel-akzent: var(--gold); --einzel-akzent-hell: var(--gold-hell); --einzel-symbol: var(--blut); }
body.sg-stil .sg-kopf__titel { font-family: var(--display); font-weight: 800; font-stretch: normal; }