/* „Wie es ist“: Sendungsseite im Stil der Cover (01.10.2026).
   Gewebe wie auf den Covern: Altrosa, Aubergine, Leinen, Orange, sichtbare
   Fäden. Im Kopf steht der Titel klein und fett auf dem dunklen Fleck, die
   Bänder ziehen sich beim Laden durchs Bild. Bei den Folgen bleibt links
   „Wie es ist,“ stehen, und jede Folge vollendet den Satz, während man
   scrollt (stil.js). Der Fuß ist ein eingenähtes Etikett. Nur aktiv mit body.sg-stil. */

body.sg-stil {
  --rosa: #cf6a73;
  --rosa-hell: #dc8088;
  --aubergine: #3a1430;
  --leinen: #efe2c6;
  --orange: #e3531f;
  --taube: #8fb6d4;
  --gewebe: repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px);
  --ink: var(--leinen);
  --ink-2: rgba(239, 226, 198, .9);
  --dim: rgba(239, 226, 198, .66);
  --faint: rgba(239, 226, 198, .42);
  --line: rgba(239, 226, 198, .18);
  --line-2: rgba(239, 226, 198, .5);
  background: var(--gewebe), var(--aubergine);
  color: var(--leinen);
}
html:has(body.sg-stil) { background: #3a1430; }
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(--orange) !important; }

/* Kopfzeile */
body.sg-stil .sd-nav.is-solid { background: var(--gewebe), rgba(207, 106, 115, .97); box-shadow: 0 2px 0 var(--aubergine); }
body.sg-stil .sd-nav__brand { color: var(--aubergine); }
body.sg-stil .sd-nav__brand .lg--svg { display: block; width: auto; height: 24px; margin: 0; }
body.sg-stil .sd-nav__menu { gap: 2px; 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 { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; text-transform: lowercase; color: rgba(58, 20, 48, .72); }
body.sg-stil .sd-nav__menu a:hover { color: var(--aubergine); }
body.sg-stil .sd-nav__menu a[aria-current] { color: var(--leinen); background: var(--aubergine); }
body.sg-stil .sd-burger { background: var(--aubergine); box-shadow: none; }
body.sg-stil .sd-burger svg { stroke: var(--leinen); }
body.sg-stil .sd-sheet { background: var(--gewebe), rgba(207, 106, 115, .99); color: var(--aubergine); }
body.sg-stil .sd-sheet nav a { text-transform: lowercase; font-weight: 800; font-stretch: 100%; letter-spacing: -.03em; font-size: 46px; color: var(--aubergine); border-bottom-color: rgba(58, 20, 48, .25); }
body.sg-stil .sd-sheet nav a[aria-current] { color: var(--leinen); }
body.sg-stil .sd-sheet__close { box-shadow: inset 0 0 0 1.5px var(--aubergine); color: var(--aubergine); }

/* Kopf: Rosa Gewebe, der dunkle Fleck mit dem Titel, die Bänder */
body.sg-stil .sg-kopf { position: relative; isolation: isolate; overflow: hidden; background: var(--gewebe), var(--rosa); color: var(--aubergine); padding-bottom: clamp(80px, 9vw, 140px); }
body.sg-stil .wi-baender { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
body.sg-stil .wi-baender path { fill: none; stroke-linecap: butt; }
body.sg-stil .sg-kopf .sd-show { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
body.sg-stil .sg-kopf .sd-show > img { display: none; }
body.sg-stil .sg-kopf .sd-show > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; grid-column: 1 / -1; }
body.sg-stil .sg-kopf .sd-h {
  justify-self: start;
  padding: .5em .7em .55em .6em; background: var(--gewebe), var(--aubergine); color: var(--leinen);
  border-radius: 46% 54% 42% 58% / 52% 40% 60% 48%;
  text-transform: lowercase; font-weight: 800; font-stretch: 100%; letter-spacing: -.04em; font-size: clamp(76px, 10vw, 156px); line-height: .9;
  width: min-content;
}
body.sg-stil .sg-kopf .sd-show p { margin: 0 0 1em; color: var(--aubergine); font-size: 18.5px; line-height: 1.6; font-weight: 500; }
body.sg-stil .sg-kopf .sd-btn--red { background: var(--aubergine); border-color: var(--aubergine); color: var(--leinen); box-shadow: none; }
body.sg-stil .sg-kopf .sd-btn--red:hover { background: #22091b; border-color: #22091b; }
body.sg-stil .sg-kopf .sd-btn--red svg { fill: var(--orange); }
body.sg-stil .sg-kopf .sd-podicons__t { color: var(--aubergine); font-weight: 800; }
body.sg-stil .sg-kopf .sd-podicon { background: none; color: var(--aubergine); box-shadow: inset 0 0 0 2px var(--aubergine); border: 0; }
body.sg-stil .sg-kopf .sd-podicon:hover, body.sg-stil .sg-kopf .sd-podicon:focus-visible { background: var(--aubergine); color: var(--leinen); }
body.sg-stil .sd-podicon::after { background: var(--aubergine); color: var(--leinen); }

/* Folgen: links bleibt „Wie es ist,“ stehen, rechts vollendet jede Folge den Satz */
body.sg-stil #folgen { padding-top: clamp(80px, 9vw, 140px); }
body.sg-stil #folgen .sd-head { display: none; }
body.sg-stil .wi-satz { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 4vw, 70px); align-items: start; }
body.sg-stil .wi-fest { position: sticky; top: 30vh; margin: 0; text-transform: lowercase; font-weight: 800; font-stretch: 100%; letter-spacing: -.04em; font-size: clamp(64px, 7.6vw, 128px); line-height: .9; color: var(--rosa-hell); }
body.sg-stil .sg-liste { gap: clamp(110px, 14vh, 180px); padding-bottom: 10vh; }
body.sg-stil .sg-folge, body.sg-stil .sg-folge:hover, body.sg-stil .sg-folge.is-on {
  display: block; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.sg-stil .sg-folge { opacity: .3; transition: opacity .6s ease; }
body.sg-stil .sg-folge.is-dran, body.sg-stil .sg-folge.is-on, body.sg-stil .sg-folge:focus-within { opacity: 1; }
body.sg-stil .sg-folge__main { display: block !important; }
body.sg-stil .sg-folge__nr { margin: 0 0 12px; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 700; color: var(--orange); }
body.sg-stil .sg-folge__titel { font-weight: 800; font-stretch: 100%; letter-spacing: -.035em; font-size: clamp(40px, 4.4vw, 72px); line-height: .98; color: var(--leinen); text-wrap: balance; }
body.sg-stil .wi-anfang { display: none; }
/* Unter dem Satz: links das Cover, rechts Text und Abspielen (stil.js baut den Körper) */
body.sg-stil .wi-koerper { display: grid; grid-template-columns: clamp(140px, 14vw, 210px) minmax(0, 1fr); gap: clamp(22px, 2.6vw, 36px); align-items: start; margin-top: 30px; }
body.sg-stil .wi-rest { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
body.sg-stil .wi-rest > * { grid-column: 1 / -1; grid-row: auto; }
body.sg-stil .wi-rest > .sg-folge__steuer { grid-column: 1; }
body.sg-stil .wi-rest > .sg-folge__mehr, body.sg-stil .wi-rest > .sg-folge__rechts { grid-column: 2; }
body.sg-stil .wi-rest > .sg-folge__text:first-child, body.sg-stil .wi-rest > .sg-folge__mit:first-child { margin-top: 0; }
body.sg-stil .sg-folge__bild { transform: rotate(-2deg); }
body.sg-stil .sg-folge__cov, body.sg-stil .sg-folge__bild:hover .sg-folge__cov { border-radius: 2px; box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .8); transform: none; }
body.sg-stil .sg-folge__text, body.sg-stil .sg-folge__lang p { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
body.sg-stil .sg-folge .sd-tag { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--leinen); }
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(--leinen) calc(var(--pv) * 360deg), var(--orange) 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(--orange); }
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(--aubergine); }
body.sg-stil .sg-folge__zeit { color: var(--dim); }
body.sg-stil .sg-folge__spur i { background: linear-gradient(90deg, var(--orange) calc(var(--pv, 0) * 100%), rgba(239, 226, 198, .18) 0); }
body.sg-stil .sg-folge__mehr { background: none; color: var(--leinen); 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(239, 226, 198, .08); }
body.sg-stil .sg-folge__mehr svg { fill: currentColor; }

/* Fuß: ein eingenähtes Etikett auf rosa Stoff */
body.sg-stil main#landing { padding-bottom: 0; }
body.sg-stil .sd-foot { margin-top: clamp(100px, 10vw, 160px); padding: clamp(70px, 8vw, 120px) 0; background: var(--gewebe), var(--rosa); }
body.sg-stil .sd-foot .sd-wrap { display: flex; justify-content: center; }
body.sg-stil .wi-etikett {
  display: flex; flex-direction: column; align-items: center; width: min(560px, 100%); padding: 34px 40px 28px;
  background: var(--gewebe), var(--leinen); color: var(--aubergine); transform: rotate(-1.5deg);
  box-shadow: 0 0 0 1px rgba(58, 20, 48, .15), 0 22px 40px -24px rgba(58, 20, 48, .8);
  outline: 2px dashed rgba(58, 20, 48, .45); outline-offset: -11px;
}
body.sg-stil .sd-foot__logo { display: block; width: 100%; height: auto; color: var(--aubergine); }
body.sg-stil .sd-foot nav { justify-content: center; gap: 6px 18px; margin-top: 18px; }
body.sg-stil .sd-foot a { font-size: 13.5px; font-weight: 800; text-transform: lowercase; color: rgba(58, 20, 48, .7); }
body.sg-stil .sd-foot a:hover { color: var(--orange); }

@media (max-width: 1023px) {
  body.sg-stil .wi-satz { grid-template-columns: minmax(0, 1fr); }
  body.sg-stil .wi-fest { display: none; }
  body.sg-stil .wi-anfang { display: block; margin-bottom: 4px; color: var(--rosa-hell); }
  body.sg-stil .sg-folge { opacity: 1; }
}
@media (max-width: 820px) {
  body.sg-stil .sg-kopf .sd-show > div { grid-template-columns: minmax(0, 1fr); }
  body.sg-stil .sg-kopf .sd-show, body.sg-stil .sg-kopf .wi-rechts { text-align: left; justify-items: start; }
  body.sg-stil .sg-kopf .sd-h { margin-bottom: 24px; font-size: 92px; }
  body.sg-stil .sg-kopf .sd-btns, body.sg-stil .sg-kopf .sd-podicons { justify-content: flex-start; }
  body.sg-stil .sg-kopf .sd-podicons__t { flex-basis: auto; text-align: left; margin: 0 6px 0 0; }
  body.sg-stil .sd-nav__brand .lg--svg { height: 19px; }
}
@media (max-width: 640px) {
  body.sg-stil .wi-koerper { grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
  body.sg-stil .sg-folge__bild { width: 64%; }
  body.sg-stil .wi-rest > .sg-folge__steuer, body.sg-stil .wi-rest > .sg-folge__mehr { margin-top: 18px; }
  body.sg-stil .sg-folge__titel { font-size: 38px; }
  body.sg-stil .wi-etikett { padding: 26px 24px 22px; }
}

/* Zweite Runde: die Farben der Folge, die dran ist */
body.sg-stil .wi-farbe { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: var(--gewebe), var(--wi-grund, transparent); transition: background-color 1.2s ease; }
body.sg-stil .wi-farbe { background-color: var(--wi-grund, transparent); background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px); }
body.sg-stil .wi-fest { color: var(--wi-akzent, var(--rosa-hell)); transition: color 1.2s ease; }
body.sg-stil .sg-folge.is-dran .sg-folge__nr { color: var(--wi-akzent, var(--orange)); }
body.sg-stil .sg-folge.is-dran .sd-pvbtn[aria-pressed="false"]:not(:hover):not(:focus-visible) .sd-ring,
body.sg-stil .sg-folge.is-dran .sd-pvbtn[aria-pressed="false"]:not(:hover):not(:focus-visible) .sd-ring::before { background: var(--wi-akzent, var(--orange)); }

/* Dritte Runde (01.10.2026): „Wie es ist“ mit großem W. Die Bänder aus dem
   Kopf laufen beim Scrollen weiter nach unten, kreuzen sich bei jeder Folge
   abwechselnd oben und unten und enden unter dem Etikett im Fuß (stil.js). */
body.sg-stil .sg-kopf .sd-h, body.sg-stil .wi-fest { text-transform: none; }
body.sg-stil #landing > .wi-schlange { position: absolute !important; z-index: 0 !important; left: 0; pointer-events: none; overflow: visible; }
body.sg-stil .wi-schlange path { fill: none; stroke-linecap: butt; }
body.sg-stil #landing > .sd-foot { z-index: auto !important; }
body.sg-stil .wi-etikett { position: relative; z-index: 2; }
/* Das feste „Wie es ist,“ liegt über den Bändern, ausgeschnitten aus dem Grund */
body.sg-stil .wi-fest { -webkit-text-stroke: .11em var(--wi-grund, var(--aubergine)); paint-order: stroke fill; transition: color 1.2s ease, -webkit-text-stroke-color 1.2s ease; }

/* Seite einer Folge (/<sendung>/<folge>, 01.10.2026): Abspielknopf in den
   Farben der Sendung, Titel in ihrer Schrift. */
body.sg-stil { --einzel-akzent: var(--wi-akzent, var(--orange)); --einzel-akzent-hell: var(--leinen); --einzel-symbol: var(--aubergine); }
body.sg-stil .sg-kopf__titel { font-weight: 800; font-stretch: 100%; letter-spacing: -.03em; }
body.sg-stil .sg-einzel .sg-folge__bild { transform: rotate(-2deg); }
body.sg-stil .sg-einzel .sg-folge__cov { border-radius: 2px; }