/* „Ein Ding und eine Stimme“: Sendungsseite im Stil der Cover (2. Fassung, 01.10.2026).
   Die ganze Seite hat das Himmelblau des Covers, darauf steht der Toaster mit
   dem Titel ohne Rand. Darunter das Regal mit den Dingen aus den Folgen, dann
   die Folgen selbst als Dinge auf Regalbrettern. Flache Farben, Konturen in
   Pflaume, Tasten statt Links. Was gerade spricht, hüpft im Takt seiner
   Stimme (stil.js). Nur aktiv mit body.sg-stil. */

body.sg-stil {
  --himmel: #71d3fe;
  --pflaume: #2b1433;
  --creme: #fdf0dc;
  --tomate: #ef5034;
  --brett: #fd9d50;
  --mint: #8fe3c6;
  --ink: var(--pflaume);
  --ink-2: rgba(43, 20, 51, .9);
  --dim: rgba(43, 20, 51, .72);
  --faint: rgba(43, 20, 51, .5);
  --line: rgba(43, 20, 51, .25);
  --line-2: var(--pflaume);
  --red: var(--tomate);
  --red-hi: #ff6a4d;
  background: var(--himmel);
  color: var(--pflaume);
}
html:has(body.sg-stil) { background: #71d3fe; }
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(--pflaume) !important; }

/* Eine Taste: Creme, Pflaumen-Rand, steht 4 px hoch; gedrückt sitzt sie unten */
body.sg-stil .sd-nav__menu a, body.sg-stil .sd-burger, body.sg-stil .sd-podicon, body.sg-stil .sg-folge__mehr, body.sg-stil .sd-sheet__close {
  background: var(--creme); color: var(--pflaume); border: 2.5px solid var(--pflaume);
  box-shadow: 0 4px 0 var(--pflaume); transition: transform .12s, box-shadow .12s, background-color .2s;
}
body.sg-stil .sd-nav__menu a:hover, body.sg-stil .sd-burger:hover, body.sg-stil .sd-podicon:hover, body.sg-stil .sg-folge__mehr:hover {
  transform: translateY(2px); box-shadow: 0 2px 0 var(--pflaume);
}

/* Kopfzeile */
body.sg-stil .sd-nav.is-solid { background: rgba(113, 211, 254, .96); box-shadow: 0 3px 0 var(--pflaume); }
body.sg-stil .sd-nav__brand { color: var(--pflaume); }
body.sg-stil .sd-nav__brand .lg--svg { display: block; width: auto; height: 25px; margin: 0; }
body.sg-stil .sd-nav__menu { gap: 10px; padding: 0 0 4px; 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 { height: 38px; padding: 0 16px; border-radius: 12px; font-size: 14.5px; font-weight: 800; }
body.sg-stil .sd-nav__menu a[aria-current] { background: var(--tomate); color: var(--creme); transform: translateY(3px); box-shadow: 0 1px 0 var(--pflaume); }
body.sg-stil .sd-burger { border-radius: 12px; }
body.sg-stil .sd-burger svg { stroke: var(--pflaume); }
body.sg-stil .sd-sheet { background: rgba(113, 211, 254, .98); color: var(--pflaume); }
body.sg-stil .sd-sheet nav a { text-transform: none; font-weight: 900; font-stretch: 112%; font-size: 36px; color: var(--pflaume); border-bottom: 3px solid var(--pflaume); }
body.sg-stil .sd-sheet nav a[aria-current] { color: var(--tomate); }
body.sg-stil .sd-sheet__close { border-radius: 12px; }

/* Kopf: der Toaster des Covers steht direkt auf der Seite, daneben der Text */
body.sg-stil .sg-kopf { padding-bottom: 0; }
body.sg-stil .sg-kopf .sd-show { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
body.sg-stil .sg-kopf .sd-show img {
  width: 100%; height: auto; aspect-ratio: 1 / .93; object-fit: cover; object-position: top;
  border-radius: 0; box-shadow: none; transform: none; border: 0;
  /* Ränder weich in die Fläche, damit keine Bildkante zu sehen ist (unten sitzen die Füße) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 99%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 99%, transparent);
  mask-composite: intersect;
}
/* Der Titel steht auf dem Toaster; für Vorleser und Suchmaschinen bleibt er im Text. */
body.sg-stil .sg-kopf .sd-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.sg-stil .sg-kopf .sd-show p { color: var(--pflaume); font-size: 18.5px; line-height: 1.6; font-weight: 500; max-width: 32em; }
body.sg-stil .sg-kopf .sd-show p:first-of-type { font-size: clamp(22px, 2vw, 26px); line-height: 1.4; font-weight: 700; }
body.sg-stil .sg-kopf .sd-btn--red {
  background: var(--tomate); color: var(--creme); border: 2.5px solid var(--pflaume); border-radius: 14px;
  box-shadow: 0 5px 0 var(--pflaume); transition: transform .12s, box-shadow .12s;
}
body.sg-stil .sg-kopf .sd-btn--red:hover { background: var(--tomate); transform: translateY(3px); box-shadow: 0 2px 0 var(--pflaume); }
body.sg-stil .sg-kopf .sd-btn--red svg { fill: var(--creme); }
body.sg-stil .sd-podicons__t { color: var(--pflaume); font-weight: 700; }
body.sg-stil .sd-podicon { border-radius: 50%; }
body.sg-stil .sd-podicon:focus-visible { background: var(--mint); }
body.sg-stil .sd-podicon::after { background: var(--pflaume); color: var(--creme); box-shadow: none; }

/* Das Regal mit den Dingen, ganz und über die volle Breite */
body.sg-stil .sg-kopf::after {
  content: ""; display: block; margin-top: clamp(20px, 4vw, 60px);
  aspect-ratio: 1920 / 592; background: url("regal.webp") center / 100% 100% no-repeat;
}

/* Folgen: jedes Ding steht auf einem Regalbrett, darunter, was es erzählt */
body.sg-stil #folgen { padding-top: clamp(60px, 7vw, 110px); }
body.sg-stil #folgen .sd-h { text-transform: none; font-weight: 900; font-stretch: 112%; font-size: clamp(44px, 5.4vw, 84px); line-height: .95; color: var(--pflaume); }
body.sg-stil .sg-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(70px, 7vw, 100px) 44px; 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: 0; border-radius: 0; background: none; box-shadow: none; transform: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.sg-stil .sg-folge__bild { position: relative; padding: 0 9% 24px; }
/* Das Brett reicht bis in die Lücken, so wird aus den Brettern einer Zeile ein Regal */
body.sg-stil .sg-folge__bild::after {
  content: ""; position: absolute; left: -22px; right: -22px; bottom: 0; height: 24px;
  background: var(--brett); border-top: 3px solid var(--pflaume); border-bottom: 3px solid var(--pflaume);
}
body.sg-stil .sg-folge__cov {
  position: relative; z-index: 1; border: 3px solid var(--pflaume); border-radius: 10px; box-shadow: none;
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--pegel, 0) * -14px)) rotate(calc(var(--pegel, 0) * var(--kipp, 1) * 2deg));
  transition: none;
}
body.sg-stil .sg-folge__bild:hover .sg-folge__cov { transform: translateY(-4px); transition: transform .2s; }
body.sg-stil .sg-folge.is-on .sg-folge__bild:hover .sg-folge__cov { transform: translateY(calc(var(--pegel, 0) * -14px)) rotate(calc(var(--pegel, 0) * var(--kipp, 1) * 2deg)); }
/* Ohne Pegel (kein Web Audio) wackelt es beim Hören wenigstens im Sprechtakt */
body.sg-stil.ding-ohne-pegel .sg-folge.ding-spricht .sg-folge__cov { animation: dingSpricht 1.3s infinite; }
@keyframes dingSpricht {
  0%, 100% { transform: none; } 12% { transform: translateY(-7px) rotate(1deg); } 24% { transform: none; }
  40% { transform: translateY(-4px) rotate(-.6deg); } 52% { transform: none; } 70% { transform: translateY(-9px) rotate(.8deg); } 82% { transform: none; }
}

body.sg-stil .sg-folge__main { margin-top: 24px; }
body.sg-stil .sg-folge__nr { margin: 0 0 4px; text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 700; color: var(--dim); }
body.sg-stil .sg-folge__titel { font-weight: 900; font-stretch: 112%; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.02; color: var(--pflaume); }
body.sg-stil .sg-folge__mit { color: var(--dim); }
body.sg-stil .sg-folge__text, body.sg-stil .sg-folge__lang p { color: var(--ink-2); font-size: 16px; }
body.sg-stil .sg-folge .sd-tag { background: none; box-shadow: inset 0 0 0 2px var(--pflaume); color: var(--pflaume); font-weight: 700; }

/* Abspielen: roter Knopf mit Pflaumen-Rand, Fortschritt in Pflaume */
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(--pflaume) calc(var(--pv) * 360deg), var(--tomate) 0);
  box-shadow: 0 0 0 2.5px var(--pflaume), 0 4px 0 2.5px var(--pflaume);
}
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(--tomate); }
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(--creme); }
body.sg-stil .sg-folge__zeit { color: var(--dim); font-weight: 600; }
body.sg-stil .sg-folge__spur i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--pflaume) calc(var(--pv, 0) * 100%), rgba(43, 20, 51, .2) 0); }
body.sg-stil .sg-folge__mehr { height: 40px; border-radius: 12px; font-weight: 800; }
body.sg-stil .sg-folge__mehr svg { fill: var(--pflaume); }
body.sg-stil .sg-folge__steuer { flex-wrap: wrap; }
/* Weiterlesen bleibt auf der Höhe des Abspielknopfs, auch wenn darunter die Spur erscheint */
@media (min-width: 641px) {
  body.sg-stil .sg-folge__main { align-items: start; }
  body.sg-stil .sg-folge__main > .sg-folge__mehr { margin-top: 24px; }
}

/* Fuß: der Schriftzug steht auf dem letzten Brett, die Links verteilt darunter */
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(--pflaume); }
body.sg-stil .sd-foot .sd-wrap { display: block; }
body.sg-stil .sd-foot__logo { display: block; width: 100%; height: auto; color: var(--pflaume); }
body.sg-stil .sd-foot .sd-wrap::before { content: none; }
body.sg-stil .sd-foot__logo + nav { position: relative; margin-top: 0; padding-top: 52px; }
body.sg-stil .sd-foot__logo + nav::before {
  content: ""; position: absolute; top: 0; left: calc(-1 * var(--pad, 24px)); right: calc(-1 * var(--pad, 24px)); height: 24px;
  background: var(--brett); border-top: 3px solid var(--pflaume); border-bottom: 3px solid var(--pflaume);
}
body.sg-stil .sd-foot nav { justify-content: space-between; gap: 10px 26px; }
body.sg-stil .sd-foot a { font-size: 14.5px; font-weight: 700; color: var(--dim); }
body.sg-stil .sd-foot a:hover { color: var(--pflaume); }

@media (max-width: 1100px) {
  body.sg-stil .sg-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  body.sg-stil .sg-kopf .sd-show { grid-template-columns: minmax(0, 1fr); justify-items: start; text-align: left; }
  body.sg-stil .sg-kopf .sd-show > img { width: 100%; margin: 0; }
  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 .sd-nav__brand .lg--svg { height: 19px; }
  body.sg-stil .sd-foot nav { justify-content: center; gap: 12px 24px; }
}
@media (max-width: 640px) {
  body.sg-stil .sg-liste { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  body.sg-stil .sg-folge__bild { padding: 0 14% 22px; }
  body.sg-stil .sg-folge__bild::after { left: -16px; right: -16px; height: 22px; }
  /* 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; margin-top: 18px; }
  body.sg-stil .sg-folge__main > .sg-folge__mehr, body.sg-stil .sg-folge__main > .sg-folge__rechts { grid-column: 2; margin-top: 18px; }
  body.sg-stil .sg-folge__titel { font-size: 30px; }
}

/* Zweite Runde: Toast springt aus dem Toaster, Dinge fallen aufs Brett, Sprechblase */
body.sg-stil .ding-toaster { position: relative; cursor: pointer; transform-origin: 50% 90%; }
body.sg-stil .ding-toaster > img { display: block; }
body.sg-stil .ding-toaster.ding-sprung { animation: dingRuck .7s ease-out .05s both; }
@keyframes dingRuck { 0%, 100% { scale: 1 1; } 25% { scale: 1.015 .975; } 55% { scale: .995 1.01; } }
/* Ein Schlitz: Unterkante = vordere Kante des Schlitzes, darunter wird abgeschnitten */
body.sg-stil .ding-schlitz {
  position: absolute; bottom: calc(100% - var(--kante)); height: 60%; overflow: hidden; pointer-events: none;
  transform: skewY(var(--schraeg)); transform-origin: 0 100%;
}
/* Die Scheibe reicht weit in den Toaster hinein: Auch ganz oben bleibt ihr unteres
   Ende im Schlitz, es entsteht nie eine Lücke. Höhe in Toaster-Einheiten 0,387. */
body.sg-stil .ding-scheibe { position: absolute; left: 7%; right: 7%; bottom: 0; height: 64.5%; translate: 0 103%; }
body.sg-stil .ding-scheibe svg { display: block; width: 100%; height: 100%; }
body.sg-stil .ding-scheibe.is-hoch { animation: dingToastHoch 1.5s cubic-bezier(.25, .7, .35, 1) both; }
@keyframes dingToastHoch {
  0% { translate: 0 103%; }
  22% { translate: 0 24%; rotate: -2deg; }
  40% { translate: 0 20.5%; rotate: 1deg; }
  64% { translate: 0 70.5%; rotate: 0deg; }
  76% { translate: 0 63.5%; }
  88% { translate: 0 69.5%; }
  100% { translate: 0 67%; }
}
body.sg-stil .sg-folge__cov { transform-origin: 50% 100%; }
body.sg-stil.ding-auftritt .sg-folge:not(.is-da) .sg-folge__cov { opacity: 0; translate: 0 -160px; }
body.sg-stil.ding-auftritt .sg-folge.is-da .sg-folge__cov { animation: dingFall .9s cubic-bezier(.5, 0, .5, 1) var(--fall-pause, 0s) both; }
@keyframes dingFall {
  0% { opacity: 0; translate: 0 -160px; scale: .96 1.06; }
  10% { opacity: 1; }
  48% { translate: 0 0; scale: 1.12 .84; }
  64% { translate: 0 -22px; scale: .96 1.05; }
  78% { translate: 0 0; scale: 1.04 .96; }
  100% { opacity: 1; translate: 0 0; scale: 1 1; }
}
/* Das Brett federt mit, wenn das Ding landet */
body.sg-stil.ding-auftritt .sg-folge.is-da .sg-folge__bild::after { animation: dingBrett .5s ease-out calc(var(--fall-pause, 0s) + .4s) both; }
@keyframes dingBrett { 0% { translate: 0 0; } 35% { translate: 0 5px; } 70% { translate: 0 -1px; } 100% { translate: 0 0; } }

body.sg-stil .ding-blase {
  position: absolute; z-index: 3; top: -34px; right: 2%; display: flex; gap: 6px; align-items: center; padding: 12px 16px;
  background: var(--creme); border: 3px solid var(--pflaume); border-radius: 22px; box-shadow: 4px 4px 0 var(--pflaume);
  opacity: 0; scale: .3; translate: -20px 30px; transform-origin: 0 100%; transition: opacity .25s, scale .35s cubic-bezier(.3, 1.6, .5, 1), translate .35s;
}
body.sg-stil .ding-blase::after {
  content: ""; position: absolute; left: 14px; bottom: -14px; width: 18px; height: 16px; background: var(--creme);
  border-left: 3px solid var(--pflaume); border-bottom: 3px solid var(--pflaume); transform: skewX(-30deg); border-bottom-left-radius: 4px;
}
body.sg-stil .ding-blase i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--pflaume); scale: calc(.6 + var(--pegel, 0) * .9); transition: scale .08s; }
body.sg-stil .ding-blase i:nth-child(2) { scale: calc(.6 + var(--pegel, 0) * 1.3); }
body.sg-stil .ding-blase i:nth-child(3) { scale: calc(.6 + var(--pegel, 0) * .7); }
body.sg-stil .sg-folge.ding-spricht .ding-blase { opacity: 1; scale: 1; translate: 0 0; }
body.sg-stil.ding-ohne-pegel .ding-blase i { animation: dingPunkt 1s ease-in-out infinite; }
body.sg-stil.ding-ohne-pegel .ding-blase i:nth-child(2) { animation-delay: .15s; }
body.sg-stil.ding-ohne-pegel .ding-blase i:nth-child(3) { animation-delay: .3s; }
@keyframes dingPunkt { 0%, 100% { scale: .6; } 40% { scale: 1.2; } }

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