/* „Atemnah“: Sendungsseite im Stil der Cover (01.10.2026).
   Nachtblau wie das Zimmer auf dem Cover, darunter die Bettdecken-Wellen in
   Pfirsich, Terrakotta und Ocker, die langsam atmen; leiser Regen im Kopf.
   Zwei Stimmen, links und rechts, du dazwischen: Beim Hören leuchten der linke
   und der rechte Bildschirmrand im Pegel des linken und rechten Kanals
   (stil.js). Die Folgen stehen ruhig in der Mitte. Der Fuß endet mit dem
   Satz, mit dem jede Folge endet. Nur aktiv mit body.sg-stil. */

@font-face {
  font-family: "Fraunces NK"; font-style: normal; font-display: swap; font-weight: 300 800;
  src: url(/assets/fonts/fraunces-latin-ext-var-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: "Fraunces NK"; font-style: normal; font-display: swap; font-weight: 300 800;
  src: url(/assets/fonts/fraunces-latin-var-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: "Fraunces NK"; font-style: italic; font-display: swap; font-weight: 300 800;
  src: url(/assets/fonts/fraunces-latin-var-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;
}

body.sg-stil {
  --nacht: #17303a;
  --nacht-tief: #10242c;
  --pfirsich: #f4ab82;
  --terrakotta: #c4583e;
  --ocker: #d99a3c;
  --creme: #f6e6cf;
  --petrol: #22505c;
  --weich: "Fraunces NK", Georgia, serif;
  --ink: var(--creme);
  --ink-2: rgba(246, 230, 207, .88);
  --dim: rgba(246, 230, 207, .64);
  --faint: rgba(246, 230, 207, .4);
  --line: rgba(246, 230, 207, .16);
  --line-2: rgba(246, 230, 207, .45);
  background: var(--nacht);
  color: var(--creme);
}
html:has(body.sg-stil) { background: #17303a; }
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(--pfirsich) !important; }

/* Links und rechts: zwei warme Lichter, eins je Stimme. Ohne Ton atmen sie langsam. */
body.sg-stil .atem-seite {
  position: fixed; top: 0; bottom: 0; z-index: 5; width: min(24vw, 340px); pointer-events: none;
  opacity: calc(.18 + var(--pegel, 0) * .82); transition: opacity .12s linear;
}
body.sg-stil .atem-seite--links { left: 0; background: radial-gradient(ellipse 100% 60% at 0 50%, rgba(244, 171, 130, .55), transparent 70%); }
body.sg-stil .atem-seite--rechts { right: 0; background: radial-gradient(ellipse 100% 60% at 100% 50%, rgba(217, 154, 60, .55), transparent 70%); }
body.sg-stil:not(.atem-hoert) .atem-seite { animation: atemZug 10s ease-in-out infinite; }
body.sg-stil:not(.atem-hoert) .atem-seite--rechts { animation-delay: -5s; }
@keyframes atemZug { 0%, 100% { opacity: .1; } 40% { opacity: .42; } }

/* Kopfzeile */
body.sg-stil .sd-nav.is-solid { background: rgba(23, 48, 58, .95); box-shadow: 0 1px 0 var(--line); }
body.sg-stil .sd-nav__brand { color: var(--creme); }
body.sg-stil .sd-nav__brand .lg--svg { display: block; width: auto; height: 23px; margin: 0; }
body.sg-stil .sd-nav__menu { gap: 4px; padding: 5px; background: rgba(16, 36, 44, .6); box-shadow: inset 0 0 0 1px var(--line); }
body.sg-stil .sd-nav__glide { background: rgba(244, 171, 130, .16); box-shadow: none; }
body.sg-stil .sd-nav__glide::after { display: none; }
body.sg-stil .sd-nav__menu a { font-family: var(--weich); font-size: 16px; font-weight: 500; font-variation-settings: "SOFT" 100, "opsz" 24; color: rgba(246, 230, 207, .7); }
body.sg-stil .sd-nav__menu a[aria-current] { color: var(--pfirsich); }
body.sg-stil .sd-burger { background: rgba(16, 36, 44, .6); box-shadow: inset 0 0 0 1px var(--line-2); }
body.sg-stil .sd-burger svg { stroke: var(--creme); }
body.sg-stil .sd-sheet { background: rgba(23, 48, 58, .98); color: var(--creme); }
body.sg-stil .sd-sheet nav a { text-transform: none; font-family: var(--weich); font-weight: 600; font-stretch: normal; font-variation-settings: "SOFT" 100; font-size: 40px; color: var(--creme); border-bottom-color: var(--line); }
body.sg-stil .sd-sheet nav a[aria-current] { color: var(--pfirsich); }
body.sg-stil .sd-sheet__close { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--creme); }

/* Kopf: Titel mittig, leiser Regen, unten die atmenden Decken */
body.sg-stil .sg-kopf { position: relative; isolation: isolate; padding-bottom: 0; overflow: hidden; }
body.sg-stil .atem-regen { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(104deg, transparent 0 46px, rgba(246, 230, 207, .14) 46px 47px, transparent 47px 140px);
  -webkit-mask: linear-gradient(180deg, #000, transparent 75%); mask: linear-gradient(180deg, #000, transparent 75%);
  animation: atemRegen 1.6s linear infinite; }
@keyframes atemRegen { from { background-position: 0 0; } to { background-position: -36px 160px; } }
body.sg-stil .sg-kopf .sd-show { grid-template-columns: minmax(0, 760px); justify-content: center; justify-items: center; text-align: center; padding-bottom: 0; }
body.sg-stil .sg-kopf .sd-show > img { display: none; }
body.sg-stil .sg-kopf .sd-h {
  text-transform: none; font-family: var(--weich); font-weight: 650; font-stretch: normal; font-variation-settings: "SOFT" 100, "opsz" 144;
  font-size: clamp(76px, 12vw, 180px); line-height: .95; letter-spacing: -.02em; color: var(--creme); margin: 0 auto .3em;
}
body.sg-stil .sg-kopf .sd-show p { font-family: var(--weich); font-variation-settings: "SOFT" 100, "opsz" 14; font-size: 20px; line-height: 1.6; color: var(--ink-2); max-width: 32em; 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(--pfirsich); border-color: var(--pfirsich); color: var(--nacht-tief); box-shadow: 0 16px 40px -18px rgba(244, 171, 130, .8); }
body.sg-stil .sg-kopf .sd-btn--red:hover { background: #f7bb98; border-color: #f7bb98; }
body.sg-stil .sg-kopf .sd-btn--red svg { fill: var(--nacht-tief); }
body.sg-stil .sd-podicons__t { color: var(--dim); font-family: var(--weich); font-style: italic; }
body.sg-stil .sd-podicon { background: none; color: var(--creme); box-shadow: inset 0 0 0 1px var(--line-2); border: 0; }
body.sg-stil .sd-podicon:hover, body.sg-stil .sd-podicon:focus-visible { background: var(--pfirsich); color: var(--nacht-tief); }
body.sg-stil .sd-podicon::after { background: var(--creme); color: var(--nacht-tief); }
body.sg-stil .atem-decken { display: block; width: 100%; height: clamp(204px, 29.5vw, 430px); margin-top: -2px; }
body.sg-stil .atem-decken path { transform-box: fill-box; transform-origin: 50% 100%; animation: atemDecke 9s ease-in-out infinite; }
body.sg-stil .atem-decken path:nth-child(2) { animation-delay: -1.5s; animation-duration: 10s; }
body.sg-stil .atem-decken path:nth-child(3) { animation-delay: -3s; animation-duration: 8.5s; }
body.sg-stil .atem-decken path:nth-child(4) { animation-delay: -4.5s; animation-duration: 11s; }
body.sg-stil .atem-decken path:nth-child(5) { animation-delay: -6s; animation-duration: 9.5s; }
body.sg-stil .atem-decken path:nth-child(6) { animation-delay: -2s; animation-duration: 10.5s; }
@keyframes atemDecke { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(1.07); } }

/* Folgen: ruhig untereinander in der Mitte, die Decke trägt sie */
body.sg-stil #folgen { --atem-oben: clamp(60px, 7vw, 110px); padding-top: var(--atem-oben); margin-top: -1px; background: var(--nacht-tief); }
body.sg-stil #folgen .sd-head { display: block; text-align: center; }
body.sg-stil #folgen .sd-h { text-transform: none; font-family: var(--weich); font-weight: 600; font-stretch: normal; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(48px, 6vw, 92px); color: var(--creme); }
body.sg-stil .sg-liste { max-width: 760px; margin: 0 auto; gap: clamp(80px, 9vw, 130px); }
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; text-align: center; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.sg-stil .sg-folge__bild { width: min(420px, 78%); margin: 0 auto 30px; }
body.sg-stil .sg-folge__cov { border-radius: 26px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); transition: transform 1.2s ease, box-shadow .6s; }
body.sg-stil .sg-folge.is-on .sg-folge__cov { box-shadow: 0 40px 90px -30px rgba(244, 171, 130, .45); animation: atemCover 7s ease-in-out infinite; }
@keyframes atemCover { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.025); } }
body.sg-stil .sg-folge__main { display: block; }
body.sg-stil .sg-folge__nr { margin: 0 0 8px; text-transform: none; letter-spacing: 0; font-family: var(--weich); font-style: italic; font-size: 17px; color: var(--pfirsich); }
body.sg-stil .sg-folge__titel { font-family: var(--weich); font-weight: 600; font-stretch: normal; font-variation-settings: "SOFT" 100, "opsz" 72; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.05; color: var(--creme); }
body.sg-stil .sg-folge__mit { color: var(--dim); }
body.sg-stil .sg-folge__text, body.sg-stil .sg-folge__lang p { font-family: var(--weich); font-variation-settings: "SOFT" 100, "opsz" 14; font-size: 19px; line-height: 1.65; color: var(--ink-2); max-width: 36em; margin-left: auto; margin-right: auto; }
body.sg-stil .sg-folge__tags { justify-content: center; }
body.sg-stil .sg-folge .sd-tag { background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
body.sg-stil .sg-folge__steuer { justify-content: center; }
body.sg-stil .sg-folge__main > .sg-folge__mehr { margin: 18px auto 0; }
@media (min-width: 641px) {
  body.sg-stil .sg-folge__main { display: block; }
}
/* Auftritt: einatmen */
body.sg-stil.atem-auftritt .sg-folge { transition: opacity 1.4s ease, transform 1.6s cubic-bezier(.2, .8, .2, 1); }
body.sg-stil.atem-auftritt .sg-folge:not(.is-da) { opacity: 0; transform: scale(.94); }

/* Abspielen: weicher Pfirsichknopf */
body.sg-stil .sg-folge .sd-pvbtn, body.sg-stil .sg-folge .sd-pvbtn .sd-ring { width: 58px; height: 58px; }
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(--creme) calc(var(--pv) * 360deg), var(--pfirsich) 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(--pfirsich); }
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(--nacht-tief); }
body.sg-stil .sg-folge__zeit { color: var(--dim); }
body.sg-stil .sg-folge__spur i { background: linear-gradient(90deg, var(--pfirsich) calc(var(--pv, 0) * 100%), rgba(246, 230, 207, .16) 0); }
body.sg-stil .sg-folge__mehr { background: none; color: var(--creme); box-shadow: inset 0 0 0 1px var(--line-2); }
body.sg-stil .sg-folge__mehr:hover, body.sg-stil .sg-folge__mehr:focus-visible { background: rgba(246, 230, 207, .08); }
body.sg-stil .sg-folge__mehr svg { fill: currentColor; }

/* Fuß: der Satz, mit dem jede Folge endet, darunter klein der Schriftzug */
body.sg-stil main#landing { padding-bottom: 0; }
body.sg-stil .sd-foot { margin-top: 0; padding: clamp(110px, 12vw, 180px) 0 clamp(40px, 5vw, 60px); background: var(--nacht-tief); }
body.sg-stil .sd-foot .sd-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
body.sg-stil .atem-schluss { margin: 0 0 clamp(50px, 6vw, 80px); font-family: var(--weich); font-style: italic; font-weight: 500; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(54px, 8vw, 128px); line-height: 1; color: var(--pfirsich); }
body.sg-stil .sd-foot__logo { display: block; width: min(280px, 60%); height: auto; color: var(--creme); opacity: .9; }
body.sg-stil .sd-foot nav { justify-content: center; gap: 10px 26px; margin-top: 24px; }
body.sg-stil .sd-foot a { font-family: var(--weich); font-size: 16px; color: var(--dim); }
body.sg-stil .sd-foot a:hover { color: var(--creme); }

@media (max-width: 820px) {
  body.sg-stil .sd-nav__brand .lg--svg { height: 19px; }
  body.sg-stil .atem-seite { width: 18vw; }
}
@media (max-width: 640px) {
  body.sg-stil .sg-folge__main { display: block; }
  body.sg-stil .sg-folge__bild { width: 86%; }
  body.sg-stil .sg-folge__text, body.sg-stil .sg-folge__lang p { font-size: 18px; }
  body.sg-stil .sg-folge__steuer { margin-top: 18px; }
}

/* Zweite Runde: Regen auf der Scheibe, schwebender Staub, Licht dimmen beim Hören */
body.sg-stil .atem-scheibe { position: absolute; inset: 0 0 30% 0; z-index: -1; pointer-events: none; overflow: hidden; }
body.sg-stil .atem-scheibe i {
  position: absolute; top: -20px; width: var(--gr); height: calc(var(--gr) * 1.3); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), rgba(246, 230, 207, .12) 55%, rgba(246, 230, 207, .04));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  animation: atemTropfen var(--dauer) cubic-bezier(.6, 0, .4, 1) infinite;
}
body.sg-stil .atem-scheibe i::after { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1.5px; height: 70px; margin-left: -.75px; background: linear-gradient(0deg, rgba(246, 230, 207, .18), transparent); }
@keyframes atemTropfen {
  0% { translate: 0 0; opacity: 0; } 6% { opacity: 1; }
  20% { translate: 0 18vh; } 34% { translate: 2px 20vh; }
  52% { translate: 1px 38vh; } 66% { translate: -1px 40vh; }
  92% { translate: 0 64vh; opacity: 1; } 100% { translate: 0 70vh; opacity: 0; }
}
body.sg-stil .atem-staub { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body.sg-stil .atem-staub i {
  position: absolute; width: var(--gr); height: var(--gr); border-radius: 50%; background: #ffd9a8; box-shadow: 0 0 10px 3px rgba(255, 190, 120, .45);
  opacity: 0; animation: atemStaub var(--dauer) ease-in-out infinite;
}
@keyframes atemStaub { 0%, 100% { opacity: 0; translate: 0 0; } 30% { opacity: .55; } 70% { opacity: .35; } 85% { translate: var(--wx) var(--wy); opacity: 0; } }
body.sg-stil .atem-dunkel {
  position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 3s ease;
  background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 55%, rgba(6, 16, 20, .55) 100%);
}
body.sg-stil.atem-hoert .atem-dunkel { opacity: 1; }
body.sg-stil .atem-decken { transform-origin: 50% 100%; scale: 1 calc(1 + var(--stimme, 0) * .18); transition: scale .15s linear; }

/* Dritte Runde: Wetter hinter den Folgen (stil.js). Die Leinwand klebt im
   Abschnitt am Bildschirm und nimmt keinen Platz ein. */
body.sg-stil #folgen > .atem-wetter {
  position: sticky; top: 0; z-index: 0; display: block; width: 100%; height: 100vh; pointer-events: none;
  margin: calc(-1 * var(--atem-oben)) 0 calc(var(--atem-oben) - 100vh);
}
body.sg-stil #folgen > .sd-wrap { position: relative; z-index: 1; }

/* Seite einer Folge (/<sendung>/<folge>, 01.10.2026): Abspielknopf in den
   Farben der Sendung, Titel in ihrer Schrift. */
body.sg-stil { --einzel-akzent: var(--pfirsich); --einzel-akzent-hell: var(--creme); --einzel-symbol: var(--nacht-tief); }
body.sg-stil .sg-kopf__titel { font-family: var(--weich); font-weight: 600; font-stretch: normal; font-variation-settings: "SOFT" 100, "opsz" 72; }
body.sg-stil .sg-einzel-sek { background: var(--nacht-tief); }