/* „Noch ein Stück?“: Sendungsseite im Stil der Cover (01.10.2026).
   Collage wie auf den Covern: Tomatenrot, Papierschnipsel in Lila, Gelb und
   Creme, schwarze Konturen, Rasterpunkte, Klebeband. Der Titel steht auf
   Etiketten, die Folgen sind eingeklebte Zettel. Neben den Folgen steht eine
   Torte, von der beim Scrollen Stück für Stück gegessen wird (stil.js).
   Der Fuß ist ein Kassenbon der Konditorei. Nur aktiv mit body.sg-stil. */

@font-face {
  font-family: "Caveat NK"; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url(/assets/fonts/caveat-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: "Plex Mono NK"; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
}

body.sg-stil {
  --tomate: #fb4a1f;
  --lila: #a888ea;
  --gelb: #ffe03a;
  --creme: #fdf3e1;
  --schwarz: #161111;
  --tuerkis: #45b8b0;
  --pink: #ee4d8f;
  --hand: "Caveat NK", cursive;
  --ink: var(--schwarz);
  --ink-2: rgba(22, 17, 17, .88);
  --dim: rgba(22, 17, 17, .68);
  --faint: rgba(22, 17, 17, .45);
  --line: rgba(22, 17, 17, .2);
  --line-2: var(--schwarz);
  color: var(--schwarz);
  background: var(--tomate);
}
/* Rasterpunkte in zwei Ecken, wie auf dem Cover */
body.sg-stil::before, body.sg-stil::after {
  content: ""; position: fixed; z-index: 0; pointer-events: none; width: 34vw; height: 34vw; max-width: 460px; max-height: 460px;
  background: radial-gradient(circle, rgba(255, 224, 58, .85) 1.8px, transparent 2.4px) 0 0 / 14px 14px;
}
body.sg-stil::before { top: 0; left: 0; -webkit-mask: radial-gradient(circle at 0 0, #000, transparent 70%); mask: radial-gradient(circle at 0 0, #000, transparent 70%); }
body.sg-stil::after { right: 0; bottom: 0; -webkit-mask: radial-gradient(circle at 100% 100%, #000, transparent 70%); mask: radial-gradient(circle at 100% 100%, #000, transparent 70%); }
html:has(body.sg-stil) { background: #fb4a1f; }
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(--schwarz) !important; }

/* Etiketten: schwere, breite Schrift auf Papierstreifen mit gerissenen Kanten */
body.sg-stil .nes-etikett {
  display: inline-block; padding: .08em .3em .02em; font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: 1;
  background: var(--gelb); color: var(--schwarz);
  clip-path: polygon(0 4%, 6% 0, 18% 3%, 31% 0, 47% 4%, 62% 1%, 78% 4%, 91% 0, 100% 3%, 99% 52%, 100% 97%, 87% 100%, 70% 96%, 52% 100%, 36% 96%, 20% 100%, 7% 97%, 0 100%, 1% 50%);
}

/* Kopfzeile: Schriftzug schwarz, Menüpunkte als Papierschilder */
body.sg-stil .sd-nav.is-solid { background: rgba(251, 74, 31, .96); box-shadow: 0 3px 0 var(--schwarz); }
body.sg-stil .sd-nav__brand { color: var(--schwarz); }
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; 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: 36px; padding: 0 14px; border-radius: 0; font-size: 13.5px; font-weight: 900; font-stretch: 112%; text-transform: uppercase; letter-spacing: .02em;
  background: var(--creme); color: var(--schwarz); transform: rotate(-1.5deg); transition: transform .2s, background-color .2s;
}
body.sg-stil .sd-nav__menu a:nth-child(odd) { transform: rotate(1.4deg); }
body.sg-stil .sd-nav__menu a:hover { transform: rotate(0) scale(1.06); }
body.sg-stil .sd-nav__menu a[aria-current] { background: var(--gelb); color: var(--schwarz); box-shadow: 3px 3px 0 var(--schwarz); }
body.sg-stil .sd-burger { border-radius: 0; background: var(--gelb); box-shadow: 3px 3px 0 var(--schwarz); transform: rotate(-3deg); }
body.sg-stil .sd-burger svg { stroke: var(--schwarz); }
body.sg-stil .sd-sheet { background: rgba(251, 74, 31, .98); color: var(--schwarz); }
body.sg-stil .sd-sheet nav a { font-weight: 900; font-stretch: 125%; font-size: 34px; color: var(--schwarz); border-bottom: 3px solid var(--schwarz); }
body.sg-stil .sd-sheet nav a[aria-current] { color: var(--creme); }
body.sg-stil .sd-sheet__close { border-radius: 0; background: var(--creme); box-shadow: 3px 3px 0 var(--schwarz); color: var(--schwarz); }

/* Kopf: links die Etiketten und der Text auf Papier, rechts die Torte */
body.sg-stil .sg-kopf { position: relative; padding-bottom: clamp(60px, 7vw, 110px); }
body.sg-stil .sg-kopf .sd-show { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); 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 { position: relative; }
body.sg-stil .sg-kopf .sd-h { text-transform: none; font-stretch: normal; margin: 0 0 28px; font-size: clamp(56px, 7.4vw, 112px); line-height: .98; }
body.sg-stil .sg-kopf .sd-h .nes-etikett { display: table; margin: 0 0 .06em; }
body.sg-stil .sg-kopf .sd-h .nes-etikett:nth-child(1) { transform: rotate(-3deg); }
body.sg-stil .sg-kopf .sd-h .nes-etikett:nth-child(2) { background: var(--creme); transform: rotate(1.5deg) translateX(.5em); }
body.sg-stil .sg-kopf .sd-h .nes-etikett:nth-child(3) { background: var(--schwarz); color: var(--creme); transform: rotate(-1.2deg); }
body.sg-stil .nes-papier {
  position: relative; padding: 26px 28px 24px; background: var(--creme); transform: rotate(-.8deg); box-shadow: 6px 6px 0 rgba(22, 17, 17, .9);
}
body.sg-stil .nes-papier::before {
  content: ""; position: absolute; top: -14px; left: 38%; width: 110px; height: 30px; background: rgba(255, 224, 58, .82); transform: rotate(-4deg);
}
body.sg-stil .sg-kopf .sd-show p { color: var(--ink-2); font-size: 18px; line-height: 1.6; max-width: none; }
body.sg-stil .sg-kopf .sd-btn--red { border-radius: 0; background: var(--schwarz); border: 0; color: var(--gelb); box-shadow: 4px 4px 0 var(--creme); transform: rotate(-1deg); }
body.sg-stil .sg-kopf .sd-btn--red:hover { transform: rotate(0) scale(1.04); background: var(--schwarz); }
body.sg-stil .sg-kopf .sd-btn--red svg { fill: var(--gelb); }
body.sg-stil .sd-podicons__t { color: var(--schwarz); font-family: var(--hand); font-size: 22px; font-weight: 700; }
body.sg-stil .sd-podicon { background: var(--creme); color: var(--schwarz); box-shadow: 3px 3px 0 var(--schwarz); border: 0; }
body.sg-stil .sd-podicon:hover, body.sg-stil .sd-podicon:focus-visible { background: var(--gelb); color: var(--schwarz); }
body.sg-stil .sd-podicon::after { background: var(--schwarz); color: var(--creme); }
body.sg-stil .nes-buehne { position: relative; justify-self: center; width: min(100%, 520px); aspect-ratio: 1; }
body.sg-stil .nes-buehne::before {
  content: ""; position: absolute; inset: 6% 2% 4% 6%; background: var(--lila); transform: rotate(4deg);
  clip-path: polygon(3% 6%, 22% 0, 48% 5%, 70% 1%, 96% 4%, 100% 30%, 97% 58%, 100% 92%, 74% 100%, 46% 95%, 20% 100%, 0 94%, 4% 66%, 0 38%);
}
body.sg-stil .nes-buehne .nes-kuchen { position: absolute; inset: 9%; width: 82%; height: 82%; transform: rotate(-8deg); }
body.sg-stil .nes-kritzel { position: absolute; pointer-events: none; overflow: visible; }
body.sg-stil .nes-kritzel path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Die Torte (stil.js zeichnet sie) */
body.sg-stil .nes-kuchen { overflow: visible; filter: drop-shadow(6px 7px 0 rgba(22, 17, 17, .85)); }
body.sg-stil .nes-stueck { transition: transform .55s cubic-bezier(.5, -0.4, .6, 1), opacity .45s ease .1s; transform-box: view-box; }
body.sg-stil .nes-stueck.is-weg { opacity: 0; }
body.sg-stil .nes-krumen circle { transition: opacity .4s; }
body.sg-stil .nes-navtorte { display: none; }

/* Folgen: links die eingeklebten Zettel, rechts die Torte, die beim Scrollen weniger wird */
body.sg-stil #folgen { padding-top: clamp(40px, 5vw, 80px); }
body.sg-stil #folgen .sd-h { display: inline-block; padding: .08em .3em .02em; font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(38px, 4.6vw, 70px); background: var(--creme); color: var(--schwarz); transform: rotate(-1.5deg); }
body.sg-stil .nes-tisch { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 60px; align-items: start; }
body.sg-stil .nes-tisch__torte { position: sticky; top: 130px; text-align: center; }
body.sg-stil .nes-tisch__torte .nes-kuchen { width: 100%; height: auto; }
body.sg-stil .nes-frage { display: inline-block; margin-top: 18px; font-size: 26px; transform: scale(0) rotate(-8deg); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
body.sg-stil .nes-tisch.is-leer .nes-frage { transform: scale(1) rotate(-4deg); }

body.sg-stil .sg-liste { gap: 70px; }
body.sg-stil .sg-folge, body.sg-stil .sg-folge:hover, body.sg-stil .sg-folge.is-on {
  isolation: isolate; grid-template-columns: 230px minmax(0, 1fr); gap: 34px; align-items: start; padding: 34px 34px 30px;
  border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.sg-stil .sg-folge::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--creme); box-shadow: 7px 7px 0 var(--schwarz);
  clip-path: polygon(0 1%, 9% 0, 21% 1.2%, 37% 0, 52% 1%, 68% 0, 83% 1.4%, 100% 0, 99.4% 22%, 100% 47%, 99.2% 74%, 100% 100%, 84% 99%, 66% 100%, 49% 98.8%, 31% 100%, 15% 99%, 0 100%, .8% 72%, 0 45%, .6% 20%);
}
body.sg-stil .sg-folge::after { content: ""; position: absolute; z-index: -2; inset: 7px -7px -7px 7px; background: var(--schwarz);
  clip-path: polygon(0 1%, 9% 0, 21% 1.2%, 37% 0, 52% 1%, 68% 0, 83% 1.4%, 100% 0, 99.4% 22%, 100% 47%, 99.2% 74%, 100% 100%, 84% 99%, 66% 100%, 49% 98.8%, 31% 100%, 15% 99%, 0 100%, .8% 72%, 0 45%, .6% 20%); }
body.sg-stil .sg-folge { transform: rotate(var(--dreh, -.6deg)); transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), opacity .4s; }
body.sg-stil .sg-folge:nth-child(even) { --dreh: .7deg; }
body.sg-stil.nes-auftritt .sg-folge:not(.is-da) { opacity: 0; transform: rotate(7deg) scale(1.14); }
body.sg-stil .sg-folge__bild { transform: rotate(-4deg); margin: -10px 0 0 -6px; }
body.sg-stil .sg-folge:nth-child(even) .sg-folge__bild { transform: rotate(3deg); }
body.sg-stil .sg-folge__bild::before, body.sg-stil .sg-folge__bild::after {
  content: ""; position: absolute; z-index: 2; width: 70px; height: 24px; background: rgba(255, 224, 58, .8); top: -10px;
}
body.sg-stil .sg-folge__bild::before { left: -16px; transform: rotate(-38deg); }
body.sg-stil .sg-folge__bild::after { right: -16px; transform: rotate(36deg); }
body.sg-stil .sg-folge__cov, body.sg-stil .sg-folge__bild:hover .sg-folge__cov { border-radius: 0; box-shadow: 4px 4px 0 var(--schwarz); transform: none; }
body.sg-stil .sg-folge__nr { margin: 0 0 4px; text-transform: none; letter-spacing: 0; font-family: var(--hand); font-size: 24px; font-weight: 700; color: var(--tomate); }
body.sg-stil .sg-folge__titel { font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.12; color: var(--schwarz); }
body.sg-stil .sg-folge__titel { display: inline; padding: .06em .25em; background: var(--gelb); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
body.sg-stil .sg-folge__kopf { margin-bottom: 4px; }
body.sg-stil .sg-folge__mit { margin-top: 12px; font-family: var(--hand); font-size: 22px; color: var(--dim); }
body.sg-stil .sg-folge__text, body.sg-stil .sg-folge__lang p { color: var(--ink-2); font-size: 17px; }
body.sg-stil .sg-folge .sd-tag { background: none; box-shadow: inset 0 0 0 2px var(--schwarz); color: var(--schwarz); font-weight: 800; border-radius: 0; transform: rotate(-1deg); }
body.sg-stil .sg-folge .sd-tag:nth-child(even) { transform: rotate(1.2deg); }

/* Abspielen: schwarzer Knopf, gelbes Zeichen */
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(--tomate) calc(var(--pv) * 360deg), var(--schwarz) 0); box-shadow: 3px 3px 0 var(--gelb);
}
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(--schwarz); }
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(--gelb); }
body.sg-stil .sg-folge__zeit { color: var(--dim); font-weight: 700; }
body.sg-stil .sg-folge__spur i { height: 6px; border-radius: 0; background: linear-gradient(90deg, var(--tomate) calc(var(--pv, 0) * 100%), rgba(22, 17, 17, .15) 0); }
body.sg-stil .sg-folge__mehr { border-radius: 0; background: var(--schwarz); color: var(--creme); box-shadow: 3px 3px 0 var(--tomate); font-weight: 800; }
body.sg-stil .sg-folge__mehr:hover, body.sg-stil .sg-folge__mehr:focus-visible { background: var(--schwarz); transform: rotate(-1deg); }
body.sg-stil .sg-folge__mehr svg { fill: var(--creme); }

/* Fuß: ein Kassenbon der Konditorei */
body.sg-stil main#landing { padding-bottom: 0; }
body.sg-stil .sd-foot { margin-top: clamp(110px, 12vw, 170px); padding: 0 0 clamp(50px, 6vw, 90px); }
body.sg-stil .sd-foot .sd-wrap {
  position: relative; display: block; width: min(380px, calc(100% - 32px)); margin: 0 auto; padding: 30px 30px 44px;
  background: #fffdf6; color: var(--schwarz); transform: rotate(-2deg); box-shadow: 8px 8px 0 rgba(22, 17, 17, .85);
  font-family: "Plex Mono NK", ui-monospace, monospace;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat, conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) bottom / 18px 12px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat, conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) bottom / 18px 12px repeat-x;
}
body.sg-stil .sd-foot__logo { display: block; width: 100%; height: auto; color: var(--schwarz); padding-bottom: 18px; border-bottom: 2px dashed var(--schwarz); }
body.sg-stil .sd-foot nav { display: flex; flex-direction: column; gap: 0; margin-top: 10px; }
body.sg-stil .sd-foot a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--schwarz); border-bottom: 1px dotted rgba(22, 17, 17, .35); }
body.sg-stil .sd-foot a:hover { color: var(--tomate); }

@media (max-width: 1023px) {
  body.sg-stil .nes-tisch { grid-template-columns: minmax(0, 1fr); }
  /* Auf schmalen Schirmen sitzt die Torte klein in der Kopfzeile neben dem Menü */
  body.sg-stil .nes-tisch__torte { display: none; }
  body.sg-stil .nes-navtorte { display: block; width: 44px; height: 44px; opacity: 0; transform: scale(.5) rotate(-30deg); transition: opacity .3s, transform .4s cubic-bezier(.3, 1.5, .5, 1); }
  body.sg-stil .nes-navtorte .nes-kuchen { width: 100%; height: 100%; filter: drop-shadow(2px 3px 0 rgba(22, 17, 17, .85)); }
  body.sg-stil.nes-folgen-da .nes-navtorte { opacity: 1; transform: none; }
  body.sg-stil .nes-frage { display: none; }
}
@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 .nes-buehne { order: -1; width: min(78%, 360px); justify-self: center; }
  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; }
}
@media (max-width: 640px) {
  body.sg-stil .sg-folge, body.sg-stil .sg-folge:hover, body.sg-stil .sg-folge.is-on { display: block; padding: 26px 20px 24px; }
  body.sg-stil .sg-folge__bild { width: 62%; margin: -6px 0 22px 4px; }
  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 { grid-column: 2; margin-top: 18px; }
  body.sg-stil .sg-folge__titel { font-size: 24px; }
}

/* Zweite Runde: Torte zum Essen, Krümel, Kaffee */
body.sg-stil .nes-gabel { position: absolute; inset: 12%; z-index: 2; border-radius: 50%; cursor: pointer; background: none; border: 0;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M12 2v12M17 2v12M22 2v12M10 14h14c0 5-3 7-7 7s-7-2-7-7zM17 21v17' fill='none' stroke='%23161111' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 17 4, pointer; }
body.sg-stil .nes-buehne.is-leer .nes-gabel { cursor: default; }
body.sg-stil .nes-buehne .nes-kuchen { transition: scale .2s; }
body.sg-stil .nes-buehne.is-happs .nes-kuchen { scale: .96; }
body.sg-stil .nes-buehne.is-neu .nes-stueck { animation: nesNeu .7s cubic-bezier(.3, 1.6, .5, 1) both; }
body.sg-stil .nes-buehne.is-neu .nes-stueck:nth-of-type(2n) { animation-delay: .06s; }
@keyframes nesNeu { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
body.sg-stil .nes-kruemel {
  position: absolute; z-index: 3; width: var(--gr); height: var(--gr); margin: -3px 0 0 -3px; border-radius: 2px; background: #5b2c1c; pointer-events: none;
  animation: nesKruemel .9s cubic-bezier(.3, .6, .6, 1) forwards;
}
@keyframes nesKruemel { 0% { translate: 0 0; rotate: 0deg; opacity: 1; } 60% { translate: var(--dx) var(--dy); } 100% { translate: calc(var(--dx) * 1.2) calc(var(--dy) * -1.4); rotate: 200deg; opacity: 0; } }
body.sg-stil .nes-nochmal {
  position: absolute; z-index: 4; left: 50%; bottom: 4%; translate: -50% 0; scale: 0; rotate: -6deg; border: 0; cursor: pointer;
  font-size: clamp(22px, 2.4vw, 32px); box-shadow: 4px 4px 0 var(--schwarz); transition: scale .45s cubic-bezier(.3, 1.6, .5, 1);
}
body.sg-stil .nes-buehne.is-leer .nes-nochmal { scale: 1; }
body.sg-stil .nes-nochmal:hover { rotate: -3deg; }
body.sg-stil .nes-tasse { position: absolute; z-index: 1; right: -4%; bottom: -2%; width: 26%; height: auto; overflow: visible; filter: drop-shadow(4px 5px 0 rgba(22, 17, 17, .85)); }
body.sg-stil .nes-dampf { fill: none; stroke: #fdf3e1; stroke-width: 4; stroke-linecap: round; opacity: 0; animation: nesDampf 3.2s ease-in-out infinite; }
body.sg-stil .nes-dampf:nth-child(2) { animation-delay: 1s; }
body.sg-stil .nes-dampf:nth-child(3) { animation-delay: 2s; }
@keyframes nesDampf { 0% { opacity: 0; translate: 0 10px; } 30% { opacity: .9; } 100% { opacity: 0; translate: 0 -26px; } }

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