/* „Unter vier Ohren“: Sendungsseite im Stil der Cover (Versuch 01.10.2026).
   Eine Fläche in Petrol wie auf den Covern, darauf Creme: oben Bens
   Nachtstudio als Federzeichnung, darunter das Telefonkabel. Jede Folge ist
   eine Nacht wie eine Platte: großes Cover, darunter die drei Leitungen
   (stil.js) mit Lämpchen, das bei dem Anruf leuchtet, der gerade läuft.
   Schriftzug, Menü und Fuß in Creme. Nur aktiv mit body.sg-stil. */

body.sg-stil {
  --petrol: #006b7f;
  --creme: #fbf4d7;
  --tusche: #06323b;
  --lampe: #ffc65c;
  --kabel: calc(100vw * 420 / 1920);
  --ink: var(--creme);
  --ink-2: rgba(251, 244, 215, .88);
  --dim: rgba(251, 244, 215, .7);
  --faint: rgba(251, 244, 215, .42);
  --line: rgba(251, 244, 215, .2);
  --line-2: rgba(251, 244, 215, .5);
  background: var(--petrol);
  color: var(--creme);
}
html:has(body.sg-stil) { background: #006b7f; }
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(--lampe) !important; }

/* Kopfzeile: Schriftzug und Menü in Creme, das aktuelle Ziel mit Lämpchen */
body.sg-stil .sd-nav.is-solid { background: rgba(0, 107, 127, .96); 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: 25px; margin: 0; }
body.sg-stil .sd-nav__menu { gap: 6px; 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: 40px; padding: 0 14px; font-size: 15px; font-weight: 700; color: rgba(251, 244, 215, .74); }
body.sg-stil .sd-nav__menu a::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1.5px rgba(251, 244, 215, .45); transition: background-color .3s, box-shadow .3s;
}
body.sg-stil .sd-nav__menu a:hover { color: var(--creme); }
body.sg-stil .sd-nav__menu a[aria-current] { color: var(--creme); }
body.sg-stil .sd-nav__menu a[aria-current]::before { background: var(--lampe); box-shadow: 0 0 0 1.5px var(--lampe), 0 0 12px 2px rgba(255, 198, 92, .55); }
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(--creme); }
body.sg-stil .sd-sheet { background: rgba(0, 107, 127, .98); color: var(--creme); }
body.sg-stil .sd-sheet nav a { text-transform: none; font-size: 44px; border-bottom-color: var(--line); color: var(--creme); }
body.sg-stil .sd-sheet nav a[aria-current] { color: var(--lampe); }
body.sg-stil .sd-sheet__close { box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--creme); }

/* Kopf: das Nachtstudio, links der Titel wie auf dem Cover */
body.sg-stil .sg-kopf { position: relative; isolation: isolate; padding-bottom: var(--kabel); min-height: min(100vh, 1040px); }
body.sg-stil .sg-kopf::before {
  content: ""; position: absolute; z-index: -1; right: 0; top: clamp(96px, 11vw, 160px);
  width: min(64vw, 1180px); aspect-ratio: 3 / 2;
  background: url("studio.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 48%), linear-gradient(180deg, transparent 4%, #000 42%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 4%, #000 48%), linear-gradient(180deg, transparent 4%, #000 42%);
  mask-composite: intersect;
}
/* Das Telefonkabel ganz, ohne Anschnitt */
body.sg-stil .sg-kopf::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--kabel);
  background: url("kabel.webp") center / 100% 100% no-repeat;
}
body.sg-stil .sg-kopf .sd-show { grid-template-columns: minmax(0, 560px); padding-bottom: clamp(40px, 6vw, 100px); }
body.sg-stil .sg-kopf .sd-show > img { display: none; }
body.sg-stil .sg-kopf .sd-h {
  width: min-content; text-transform: none; font-weight: 800; font-stretch: 62%;
  font-size: clamp(84px, 11.5vw, 176px); line-height: .84; letter-spacing: -.01em; color: var(--creme);
}
body.sg-stil .sg-kopf .sd-show p { color: var(--ink-2); font-size: 18px; line-height: 1.6; max-width: 34em; }
body.sg-stil .sg-kopf .sd-btn--red { background: var(--creme); border-color: var(--creme); color: var(--tusche); box-shadow: none; }
body.sg-stil .sg-kopf .sd-btn--red:hover { background: #fff; border-color: #fff; }
body.sg-stil .sd-podicons__t { color: var(--dim); }
body.sg-stil .sd-podicon { background: none; color: var(--creme); 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(--creme); color: var(--tusche); }
body.sg-stil .sd-podicon::after { background: var(--tusche); color: var(--creme); }

/* Folgen: Nächte nebeneinander wie Platten, ohne Kästen, auf derselben Fläche */
body.sg-stil #folgen { padding-top: clamp(60px, 7vw, 110px); }
body.sg-stil #folgen .sd-h { text-transform: none; font-weight: 800; font-stretch: 62%; font-size: clamp(60px, 7vw, 112px); line-height: .9; color: var(--creme); }
body.sg-stil .sg-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(70px, 8vw, 120px) clamp(40px, 5vw, 80px); align-items: start; }
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__cov { border-radius: 3px; box-shadow: 0 34px 60px -34px rgba(0, 20, 26, .75); }
body.sg-stil .sg-folge__bild:hover .sg-folge__cov { transform: none; }
body.sg-stil .sg-folge__main { margin-top: 26px; }
body.sg-stil .sg-folge__kopf { display: block; }
body.sg-stil .sg-folge__nr { margin: 0 0 6px; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--dim); }
body.sg-stil .sg-folge__titel { font-weight: 800; font-stretch: 62%; font-size: clamp(30px, 2.8vw, 40px); line-height: 1; color: var(--creme); text-wrap: balance; }
/* Das Cover trägt den Titel schon; die Leitungen nennen seine drei Teile. Der Titel bleibt für Vorleser und Suchmaschinen. */
body.sg-stil .uvo-nacht--titel .sg-folge__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.sg-stil .uvo-nacht .sg-folge__mit { display: none; }

/* Die drei Leitungen */
body.sg-stil .uvo-leitungen { margin: 6px 0 0; padding: 0; list-style: none; }
body.sg-stil .uvo-leitung {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; column-gap: 16px;
  width: 100%; padding: 12px 0; text-align: left; color: var(--creme);
  border-bottom: 1px solid var(--line) !important;
}
body.sg-stil .uvo-leitungen li:first-child .uvo-leitung { border-top: 1px solid var(--line) !important; }
body.sg-stil .uvo-lampe {
  grid-row: 1 / span 2; width: 12px; height: 12px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(251, 244, 215, .5); transition: background-color .4s, box-shadow .4s;
}
body.sg-stil .uvo-wer { font-weight: 800; font-stretch: 62%; font-size: clamp(28px, 2.5vw, 36px); line-height: 1.02; }
body.sg-stil .uvo-was { grid-column: 2; grid-row: 2; margin-top: 2px; font-size: 15.5px; color: var(--dim); }
body.sg-stil .uvo-ab { grid-column: 3; grid-row: 1 / span 2; font-size: 15px; color: var(--faint); font-variant-numeric: tabular-nums; }
body.sg-stil .uvo-leitung:hover .uvo-ab, body.sg-stil .uvo-leitung:focus-visible .uvo-ab { color: var(--creme); }
body.sg-stil .uvo-leitung:hover .uvo-lampe { box-shadow: inset 0 0 0 1.5px var(--creme); }
/* Beim Hören: die laufende Leitung leuchtet, erledigte bleiben warm */
body.sg-stil li.is-war .uvo-lampe { background: rgba(255, 198, 92, .35); box-shadow: none; }
body.sg-stil li.is-dran .uvo-lampe { background: var(--lampe); box-shadow: 0 0 0 2px var(--lampe), 0 0 20px 5px rgba(255, 198, 92, .55); }
body.sg-stil li.is-dran .uvo-ab { color: var(--lampe); }

body.sg-stil .sg-folge__text { max-width: 64ch; color: var(--ink-2); margin-top: 20px; }
body.sg-stil .sg-folge .sd-tag { background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }

/* Abspielen: cremefarbener Knopf, Fortschritt im Lampenlicht */
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(--lampe) calc(var(--pv) * 360deg), var(--creme) 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(--creme); }
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(--tusche); }
body.sg-stil .sg-folge__zeit { color: var(--dim); }
body.sg-stil .sg-folge__spur i { background: linear-gradient(90deg, var(--lampe) calc(var(--pv, 0) * 100%), rgba(251, 244, 215, .2) 0); }
body.sg-stil .sg-folge__mehr { background: none; color: var(--creme); 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(251, 244, 215, .1); }

/* Fuß: der Schriftzug groß in Creme über die ganze Breite */
body.sg-stil main#landing { padding-bottom: 0; }
body.sg-stil .sd-foot { margin-top: clamp(110px, 12vw, 180px); padding: 0 0 clamp(40px, 5vw, 70px); color: var(--creme); }
body.sg-stil .sd-foot .sd-wrap { display: block; }
body.sg-stil .sd-foot__logo { display: block; width: 100%; height: auto; color: var(--creme); }
body.sg-stil .sd-foot nav { justify-content: space-between; gap: 10px 26px; margin-top: 26px; }
body.sg-stil .sd-foot a { font-size: 14.5px; font-weight: 600; color: var(--dim); }
body.sg-stil .sd-foot a:hover { color: var(--creme); }

@media (max-width: 1023px) {
  body.sg-stil .sg-liste { gap: 80px 36px; }
}
@media (max-width: 820px) {
  /* Bild und Kabel unter dem Text, beide ganz */
  body.sg-stil .sg-kopf { display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; }
  body.sg-stil .sg-kopf .sd-show { order: 1; padding-bottom: 10px; justify-items: start; text-align: left; }
  body.sg-stil .sg-kopf::before { order: 2; position: static; z-index: auto; width: 100%; margin-top: -10vw;
    -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 34%); mask-image: linear-gradient(180deg, transparent 2%, #000 34%); }
  body.sg-stil .sg-kopf::after { order: 3; position: static; height: var(--kabel); }
  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 #folgen .sd-head { text-align: left; }
  body.sg-stil .sg-liste { grid-template-columns: minmax(0, 1fr); gap: 76px; }
  body.sg-stil .sd-nav__brand .lg--svg { height: 19px; }
  body.sg-stil .sd-foot nav { justify-content: center; gap: 12px 24px; }
}
@media (max-width: 640px) {
  /* Die Grundseite legt Folgen auf dem Handy als Raster an; hier untereinander */
  body.sg-stil .sg-folge__main { display: block; }
  body.sg-stil .sg-folge__steuer { margin-top: 18px; }
  body.sg-stil .sg-folge__mehr, body.sg-stil .sg-folge__rechts { margin-top: 16px; }
  body.sg-stil .sg-folge__text { font-size: 16px; }
}
@media (max-width: 640px) {
  /* Abspielen links, Weiterlesen rechts in einer Zeile */
  body.sg-stil .sg-folge__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
  body.sg-stil .sg-folge__main > * { grid-column: 1 / -1; grid-row: auto; }
  body.sg-stil .sg-folge__main > .sg-folge__steuer { grid-column: 1; }
  body.sg-stil .sg-folge__main > .sg-folge__mehr, body.sg-stil .sg-folge__main > .sg-folge__rechts { grid-column: 2; margin-top: 18px; }
}

/* Zweite Runde: Anrufe blinken, Studiouhr, Morgendämmerung */
body.sg-stil .uvo-anrufe { display: flex; gap: 18px; margin: 0 0 26px; }
body.sg-stil .uvo-anrufe span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
body.sg-stil .uvo-anrufe i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(251, 244, 215, .5); animation: uvoKlingeln 3.6s steps(1, end) infinite; }
body.sg-stil .uvo-anrufe span:nth-child(2) i { animation-delay: -1.3s; animation-duration: 4.4s; }
body.sg-stil .uvo-anrufe span:nth-child(3) i { animation-delay: -2.6s; animation-duration: 5.2s; }
@keyframes uvoKlingeln {
  0%, 8%, 16%, 24% { background: var(--lampe); box-shadow: 0 0 0 1.5px var(--lampe), 0 0 14px 3px rgba(255, 198, 92, .6); }
  4%, 12%, 20%, 28%, 100% { background: none; box-shadow: inset 0 0 0 1.5px rgba(251, 244, 215, .5); }
}
body.sg-stil .uvo-uhr { display: inline-flex; align-items: center; gap: 10px; color: var(--creme); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
body.sg-stil .uvo-uhr svg { width: 40px; height: 40px; }
body.sg-stil .uvo-uhr line { transition: transform .2s ease-out; }
body.sg-stil .uvo-morgen {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--morgen, 0);
  background:
    radial-gradient(ellipse 70% 45% at 50% 112%, rgba(255, 214, 140, .95), rgba(255, 170, 120, .45) 45%, transparent 78%),
    linear-gradient(0deg, rgba(240, 150, 120, .45), rgba(200, 140, 150, .12) 50%, transparent 80%);
}
@media (max-width: 820px) {
  body.sg-stil .uvo-uhr span { display: none; }
  body.sg-stil .uvo-uhr svg { width: 34px; height: 34px; }
}

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