/* „Der letzte Brief“: Sendungsseite im Stil der Cover (01.10.2026).
   Aubergine wie das Cover, Schrift wie im Brief (EB Garamond). Oben fließen die
   Linien des Covers in einen offenen Umschlag (stil.js zeichnet sie). Jede
   Folge ist ein Umschlag, das Cover klebt als Briefmarke darauf; wer eine
   Folge hört, bekommt sie abgestempelt: Der Brief ist angekommen.
   Nur aktiv mit body.sg-stil. */

@font-face {
  font-family: "EB Garamond NK"; font-style: normal; font-display: swap; font-weight: 400 800;
  src: url(/assets/fonts/eb-garamond-latin-ext-wght-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: "EB Garamond NK"; font-style: normal; font-display: swap; font-weight: 400 800;
  src: url(/assets/fonts/eb-garamond-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: "EB Garamond NK"; font-style: italic; font-display: swap; font-weight: 400 800;
  src: url(/assets/fonts/eb-garamond-latin-wght-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 {
  --aubergine: #2d0c24;
  --papier: #f6ead2;
  --rose: #d6727a;
  --lachs: #e8956b;
  --tinte: #2d0c24;
  --serif: "EB Garamond NK", Georgia, serif;
  --ink: var(--papier);
  --ink-2: rgba(246, 234, 210, .88);
  --dim: rgba(246, 234, 210, .66);
  --faint: rgba(246, 234, 210, .42);
  --line: rgba(246, 234, 210, .18);
  --line-2: rgba(246, 234, 210, .5);
  background: var(--aubergine);
  color: var(--papier);
}
html:has(body.sg-stil) { background: #2d0c24; }
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(--rose) !important; }

/* Kopfzeile: Schriftzug in Papierfarbe, Menü in der Briefschrift, das aktuelle Ziel mit dem rosa Band */
body.sg-stil .sd-nav.is-solid { background: rgba(45, 12, 36, .96); box-shadow: 0 1px 0 var(--line); }
body.sg-stil .sd-nav__brand { color: var(--papier); }
body.sg-stil .sd-nav__brand .lg--svg { display: block; width: auto; height: 24px; margin: 0; }
body.sg-stil .sd-nav__menu { gap: 4px; 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: 42px; padding: 0 14px; font-family: var(--serif); font-style: italic; font-size: 20px; font-weight: 500; color: rgba(246, 234, 210, .72); }
body.sg-stil .sd-nav__menu a:hover { color: var(--papier); }
body.sg-stil .sd-nav__menu a[aria-current] { color: var(--papier); }
body.sg-stil .sd-nav__menu a[aria-current]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--rose); }
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(--papier); }
body.sg-stil .sd-sheet { background: rgba(45, 12, 36, .98); color: var(--papier); }
body.sg-stil .sd-sheet nav a { text-transform: none; font-family: var(--serif); font-weight: 600; font-stretch: normal; font-size: 42px; color: var(--papier); border-bottom-color: var(--line); }
body.sg-stil .sd-sheet nav a[aria-current] { color: var(--rose); }
body.sg-stil .sd-sheet__close { box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--papier); }

/* Kopf: Titel wie auf dem Cover, darunter fließen die Linien in den Umschlag */
body.sg-stil .sg-kopf { position: relative; isolation: isolate; padding-bottom: clamp(230px, 26vw, 380px); }
body.sg-stil .brief-linien { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
body.sg-stil .brief-linien path { fill: none; stroke: var(--papier); stroke-width: 1.4; stroke-linecap: round; }
body.sg-stil .brief-linien path.rose { stroke: var(--rose); stroke-width: 10; }
body.sg-stil .sg-kopf .sd-show { grid-template-columns: minmax(0, 640px); }
body.sg-stil .sg-kopf .sd-show > img { display: none; }
body.sg-stil .sg-kopf .sd-h {
  width: min-content; text-transform: none; font-family: var(--serif); font-weight: 600; font-stretch: normal;
  font-size: clamp(84px, 11vw, 168px); line-height: .86; letter-spacing: -.015em; color: var(--papier); margin-bottom: .3em;
}
body.sg-stil .sg-kopf .sd-show p { font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--ink-2); max-width: 30em; }
body.sg-stil .sg-kopf .sd-btn--red { background: var(--rose); border-color: var(--rose); color: var(--aubergine); box-shadow: none; }
body.sg-stil .sg-kopf .sd-btn--red:hover { background: #e48990; border-color: #e48990; }
body.sg-stil .sg-kopf .sd-btn--red svg { fill: var(--aubergine); }
body.sg-stil .sd-podicons__t { color: var(--dim); font-family: var(--serif); font-style: italic; font-size: 17px; }
body.sg-stil .sd-podicon { background: none; color: var(--papier); 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(--papier); color: var(--aubergine); }
body.sg-stil .sd-podicon::after { background: var(--papier); color: var(--aubergine); }

/* Folgen: Umschläge auf dem Tisch */
body.sg-stil #folgen { padding-top: clamp(40px, 5vw, 80px); }
body.sg-stil #folgen .sd-h { text-transform: none; font-family: var(--serif); font-weight: 600; font-stretch: normal; font-size: clamp(54px, 6.4vw, 100px); line-height: .95; color: var(--papier); }
body.sg-stil .sg-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px); align-items: start; }
body.sg-stil .sg-folge, body.sg-stil .sg-folge:hover, body.sg-stil .sg-folge.is-on {
  display: block; position: relative; padding: clamp(26px, 2.6vw, 38px); border-radius: 3px;
  background: var(--papier); color: var(--tinte); box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.sg-stil .sg-folge { --ink: var(--tinte); --ink-2: rgba(45, 12, 36, .88); --dim: rgba(45, 12, 36, .66); --line-2: rgba(45, 12, 36, .45); }

/* Die Briefmarke: das Cover mit gezähntem Rand, leicht schief geklebt */
body.sg-stil .sg-folge__bild {
  position: absolute; top: clamp(20px, 2vw, 30px); right: clamp(20px, 2vw, 30px); z-index: 1;
  width: clamp(96px, 9vw, 128px); padding: 7px; background: #fffaf0; transform: rotate(3deg);
  -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat, radial-gradient(circle at 5px 5px, transparent 3.2px, #000 3.7px) -5px -5px / 10px 10px round;
  mask: linear-gradient(#000 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat, radial-gradient(circle at 5px 5px, transparent 3.2px, #000 3.7px) -5px -5px / 10px 10px round;
  filter: drop-shadow(0 2px 2px rgba(45, 12, 36, .25));
}
body.sg-stil .sg-folge__cov, body.sg-stil .sg-folge__bild:hover .sg-folge__cov { border-radius: 0; box-shadow: none; transform: none; }
/* Der Poststempel kommt erst, wenn die Folge gehört wurde */
body.sg-stil .brief-stempel {
  position: absolute; z-index: 2; top: clamp(58px, 5.4vw, 80px); right: clamp(70px, 7.4vw, 112px);
  width: clamp(130px, 11vw, 160px); height: auto; color: rgba(45, 12, 36, .7); transform: rotate(-11deg);
  opacity: 0; pointer-events: none;
}
body.sg-stil .brief-stempel text { fill: currentColor; font-family: var(--serif); }
body.sg-stil .brief-angekommen .brief-stempel { opacity: 1; }
body.sg-stil .brief-gerade .brief-stempel { animation: briefStempel .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes briefStempel { 0% { opacity: 0; transform: rotate(-11deg) scale(1.5); } 60% { opacity: 1; } 100% { opacity: 1; transform: rotate(-11deg) scale(1); } }

body.sg-stil .sg-folge__main { margin: 0; }
body.sg-stil .sg-folge__kopf { padding-right: clamp(110px, 10vw, 150px); min-height: clamp(96px, 9vw, 128px); }
body.sg-stil .sg-folge__nr { margin: 0 0 8px; text-transform: none; letter-spacing: 0; font-family: var(--serif); font-style: italic; font-size: 17px; font-weight: 500; color: var(--dim); }
body.sg-stil .sg-folge__titel { font-family: var(--serif); font-weight: 600; font-stretch: normal; font-size: clamp(32px, 3vw, 44px); line-height: 1; color: var(--tinte); text-wrap: balance; }
body.sg-stil .sg-folge__mit { color: var(--dim); font-family: var(--serif); font-style: italic; font-size: 17px; }
body.sg-stil .sg-folge__text, body.sg-stil .sg-folge__lang p { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: rgba(45, 12, 36, .9); }
/* Schlagworte als Zeile wie eine Notiz, nicht als Knöpfe */
body.sg-stil .sg-folge__tags { gap: 0; margin-top: 14px; }
body.sg-stil .sg-folge .sd-tag { padding: 0; background: none; box-shadow: none; border: 0; border-radius: 0; height: auto; font-family: var(--serif); font-style: italic; font-size: 17px; font-weight: 500; color: var(--dim); }
body.sg-stil .sg-folge .sd-tag:not(:last-child)::after { content: ",\00a0"; }

/* Abspielen: Knopf in Tinte, Fortschritt als rosa Band */
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(--rose) calc(var(--pv) * 360deg), var(--aubergine) 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(--aubergine); }
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(--papier); }
body.sg-stil .sg-folge__zeit { color: var(--dim); font-family: var(--serif); font-size: 18px; }
body.sg-stil .sg-folge.is-on .sg-folge__zeit { color: var(--tinte); }
body.sg-stil .sg-folge__spur i { height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--rose) calc(var(--pv, 0) * 100%), rgba(45, 12, 36, .14) 0); }
body.sg-stil .sg-folge__mehr {
  height: auto; padding: 4px 2px; border-radius: 0; background: none; box-shadow: none; color: var(--tinte);
  font-family: var(--serif); font-style: italic; font-size: 19px; font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--rose); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
body.sg-stil .sg-folge__mehr:hover, body.sg-stil .sg-folge__mehr:focus-visible { background: none; color: var(--tinte); text-decoration-thickness: 3px; }
body.sg-stil .sg-folge__mehr svg { fill: var(--tinte); }
@media (min-width: 641px) {
  body.sg-stil .sg-folge__main { align-items: start; }
  body.sg-stil .sg-folge__main > .sg-folge__mehr { margin-top: 28px; }
}

/* Fuß */
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(--papier); }
body.sg-stil .sd-foot .sd-wrap { display: block; }
body.sg-stil .sd-foot__logo { display: block; width: 100%; height: auto; color: var(--papier); }
body.sg-stil .sd-foot nav { justify-content: space-between; gap: 10px 26px; margin-top: 26px; }
body.sg-stil .sd-foot a { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--dim); }
body.sg-stil .sd-foot a:hover { color: var(--papier); }

@media (max-width: 1023px) {
  body.sg-stil .sg-liste { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
}
@media (max-width: 820px) {
  body.sg-stil .sg-kopf .sd-show { justify-items: start; text-align: left; }
  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-kopf { padding-bottom: 210px; }
  body.sg-stil .sg-kopf .sd-show p { font-size: 19px; }
  body.sg-stil .sg-folge, body.sg-stil .sg-folge:hover, body.sg-stil .sg-folge.is-on { padding: 22px 20px 24px; }
  body.sg-stil .sg-folge__bild { top: 16px; right: 16px; width: 82px; padding: 5px; }
  body.sg-stil .brief-stempel { top: 50px; right: 58px; width: 112px; }
  body.sg-stil .sg-folge__kopf { padding-right: 92px; min-height: 92px; }
  body.sg-stil .sg-folge__titel { font-size: 30px; }
  body.sg-stil .sg-folge__text, body.sg-stil .sg-folge__lang p { font-size: 18px; }
  /* 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 { grid-column: 2; margin-top: 18px; }
}

/* Der Faden aus dem Umschlag (stil.js): hinter den Briefen bis in den Punkt des Schriftzugs */
body.sg-stil #landing { position: relative; }
body.sg-stil #landing > .brief-faden { position: absolute !important; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: visible; }
body.sg-stil .brief-faden path { fill: none; stroke: var(--papier); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset .25s linear; }
body.sg-stil .brief-faden path.rose { stroke: var(--rose); stroke-width: 10; }
body.sg-stil #folgen .sd-head, body.sg-stil .sd-foot { position: relative; z-index: 1; }

/* Masonry: Zeilen von 2 px, jede Karte so viele, wie sie hoch ist (stil.js) */
body.sg-stil .sg-liste.brief-tisch { grid-auto-rows: 2px; row-gap: 0; }
/* Schief hingelegt, beim Erscheinen auf den Tisch gefallen, beim Zeigen und Hören gerade */
body.sg-stil .sg-folge, body.sg-stil .sg-folge:hover, body.sg-stil .sg-folge.is-on { z-index: 1; }
body.sg-stil .sg-folge {
  transform: rotate(calc(var(--dreh, 0deg) * var(--dreh-mass, 1)));
  transition: transform .9s cubic-bezier(.2, .9, .25, 1), opacity .7s ease, box-shadow .4s;
}
body.sg-stil.brief-auftritt .sg-folge:not(.is-da) { opacity: 0; transform: translateY(90px) rotate(calc(var(--dreh, 0deg) * 5)); }
body.sg-stil .sg-folge:hover, body.sg-stil .sg-folge.is-on, body.sg-stil .sg-folge:focus-within {
  transform: translateY(-6px) rotate(0deg); transition-duration: .45s; box-shadow: 0 44px 70px -34px rgba(0, 0, 0, .85);
}
body.sg-stil .sg-folge.is-on { z-index: 2; }
@media (max-width: 640px) {
  body.sg-stil .sg-folge { --dreh-mass: .5; }
}

/* Zweite Runde: der Brief gleitet aus dem Umschlag, Briefe wandern die Linien entlang */
body.sg-stil .brief-papier.is-raus { animation: briefRaus 1.3s cubic-bezier(.3, .7, .3, 1) 2.2s both; }
@keyframes briefRaus { 0% { translate: 0 64px; } 100% { translate: 0 0; } }
body.sg-stil .brief-unterwegs { opacity: 0; transition: opacity .3s; }
body.sg-stil .brief-unterwegs { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }

/* Seite einer Folge (/<sendung>/<folge>, 01.10.2026): Abspielknopf in den
   Farben der Sendung, Titel in ihrer Schrift. */
body.sg-stil { --einzel-akzent: var(--aubergine); --einzel-akzent-hell: var(--rose); --einzel-symbol: var(--papier); }
body.sg-stil .sg-kopf__titel { font-family: var(--serif); font-weight: 600; font-stretch: normal; }
/* Die Folge als Brief: Papier, oben rechts das Cover als Briefmarke */
body.sg-stil .sg-einzel {
  display: block; position: relative; max-width: 920px; margin: 0 auto; padding: clamp(30px, 4vw, 60px) clamp(150px, 15vw, 210px) clamp(30px, 4vw, 60px) clamp(30px, 4vw, 60px);
  border-radius: 3px; background: var(--papier); color: var(--tinte); box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .8);
  --ink: var(--tinte); --ink-2: rgba(45, 12, 36, .88); --dim: rgba(45, 12, 36, .66); --line-2: rgba(45, 12, 36, .45);
}
body.sg-stil .sg-einzel .sg-folge__bild { width: clamp(110px, 11vw, 150px); }
body.sg-stil .sg-einzel__text { font-family: var(--serif); font-size: 20px; }
body.sg-stil .sg-einzel .sd-tag { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--tinte); }
@media (max-width: 640px) {
  body.sg-stil .sg-einzel { padding: 120px 22px 26px; }
  body.sg-stil .sg-einzel .sg-folge__bild { width: 92px; }
}
body.sg-stil .sg-einzel__bild { display: contents; }