/* Startseite, neue Fassung (01.10.2026; an mit System → Website, vorher ?vorschau=start)
   1. Der Schriftzug geht kurz flackernd an wie Leuchtreklame.
   2. Sendungen als Plakatwand: jede Karte in Farbe und Schrift ihrer eigenen
      Seite, mit einem kleinen Vorgeschmack, der beim Erscheinen und beim
      Drüberfahren spielt (start.js).
   3. Radio lebendiger: Fortschritt mit Leuchtpunkt auf der Sendetafel, die
      Senderspalte, die man hört, leuchtet und zeigt den Pegel. */

@font-face { font-family: "Playfair NK"; font-style: normal; font-display: swap; font-weight: 400 900; src: url(/assets/fonts/playfair-display-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: "Playfair NK"; font-style: normal; font-display: swap; font-weight: 400 900; src: url(/assets/fonts/playfair-display-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+1E00-1E9F, 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: "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; }

/* ------------------------------------------------------------ 1. Neon */
.sp-logo { position: relative; }
.sp-logo.st-an > img { animation: stNeonAn .7s steps(1, end) both; }
@keyframes stNeonAn {
  0% { opacity: 0; } 10% { opacity: .85; } 18% { opacity: .1; } 28% { opacity: .9; } 36% { opacity: .3; }
  46% { opacity: 1; filter: brightness(1.4); } 56% { opacity: .6; } 66%, 100% { opacity: 1; filter: none; }
}


/* ------------------------------------------------------------ 2. Plakatwand */
#sendungen .sd-shows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); align-items: stretch; }
#sendungen .sd-showcard, #sendungen .sd-showcard.has-pod {
  --k-bg: rgba(9, 14, 26, .6); --k-ink: #eef2f8; --k-dim: rgba(238, 242, 248, .72); --k-akzent: #e01e1e; --k-auf-akzent: #fff;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 0; align-items: stretch;
  padding: 18px 18px 22px; border-radius: 18px; background: var(--k-bg); color: var(--k-ink); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .95);
  -webkit-backdrop-filter: none; backdrop-filter: none; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .35s;
}
#sendungen .sd-showcard:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .95); }
#sendungen .sd-showcard > div:not(.sd-showcard__pod):not(.st-fx) { display: flex; flex-direction: column; flex: 1; }
#sendungen .sd-showcard__bild { position: relative; z-index: 2; }
#sendungen .sd-showcard__bild img { border-radius: 10px; box-shadow: none; }
#sendungen .sd-showcard h3 { margin: 20px 0 0; color: var(--k-ink); font-size: clamp(30px, 2.6vw, 40px); line-height: .95; }
#sendungen .sd-showcard p { margin: 12px 0 0; max-width: none; font-size: 15.5px; line-height: 1.6; color: var(--k-dim); }
#sendungen .sd-showcard .sd-btns { margin-top: auto; padding-top: 20px; }
#sendungen .sd-showcard .sd-btn--red { background: var(--k-akzent); border-color: var(--k-akzent); color: var(--k-auf-akzent); box-shadow: none; }
#sendungen .sd-showcard__pod { position: relative; z-index: 2; margin-top: 16px; padding: 0; box-shadow: none; }
#sendungen .sd-showcard .sd-showcard__podt { margin: 0 0 8px; color: var(--k-dim); letter-spacing: .02em; text-transform: none; font-size: 13px; }
#sendungen .sd-podlist { display: flex; flex-wrap: wrap; gap: 6px; }
#sendungen .sd-podlist a, #sendungen .sd-podlist .sd-feedcopy { width: auto; height: 32px; padding: 0 12px; font-size: 13px; color: var(--k-ink); border-color: currentColor; opacity: .8; }
#sendungen .sd-podlist a:hover, #sendungen .sd-podlist .sd-feedcopy:hover { opacity: 1; background: none; color: var(--k-ink); border-color: currentColor; }
#sendungen .sd-showcard > div:not(.st-fx), #sendungen .sd-showcard > a { position: relative; z-index: 2; }
#sendungen .sd-showcard > .st-fx { position: absolute; inset: 0; z-index: 1; }
.st-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
@media (max-width: 1100px) { #sendungen .sd-shows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  #sendungen .sd-shows { grid-template-columns: minmax(0, 1fr); }
  #sendungen .sd-showcard, #sendungen .sd-showcard.has-pod { padding: 16px 16px 20px; }
}

/* Je Sendung: Farben und Schrift ihrer Seite */
[data-sendung="eindingeeinestimme"] { --k-bg: #71d3fe !important; --k-ink: #2b1433 !important; --k-dim: rgba(43, 20, 51, .78) !important; --k-akzent: #ef5034 !important; --k-auf-akzent: #fdf0dc !important; box-shadow: inset 0 0 0 3px #2b1433, 8px 8px 0 #2b1433 !important; }
[data-sendung="eindingeeinestimme"] h3 { font-weight: 900 !important; font-stretch: 112% !important; }
[data-sendung="eindingeeinestimme"] .sd-btn--red { border: 2.5px solid #2b1433 !important; box-shadow: 0 4px 0 #2b1433 !important; }
[data-sendung="eindingeeinestimme"] .sd-showcard__bild { overflow: visible; }
[data-sendung="derletztebrief"] { --k-bg: #2d0c24 !important; --k-ink: #f6ead2 !important; --k-dim: rgba(246, 234, 210, .75) !important; --k-akzent: #d6727a !important; --k-auf-akzent: #2d0c24 !important; }
[data-sendung="derletztebrief"] h3 { font-family: "EB Garamond NK", Georgia, serif; font-weight: 600 !important; font-stretch: normal !important; font-size: clamp(34px, 3vw, 46px) !important; }
[data-sendung="derletztebrief"] p { font-family: "EB Garamond NK", Georgia, serif; font-size: 17.5px !important; line-height: 1.5 !important; }
[data-sendung="untervierohren"] { --k-bg: #006b7f !important; --k-ink: #fbf4d7 !important; --k-dim: rgba(251, 244, 215, .8) !important; --k-akzent: #fbf4d7 !important; --k-auf-akzent: #06323b !important; }
[data-sendung="untervierohren"] h3 { font-weight: 800 !important; font-stretch: 62% !important; font-size: clamp(36px, 3.2vw, 50px) !important; }
[data-sendung="bevoresgeschichtewar"] { --k-bg: radial-gradient(ellipse 80% 60% at 20% 10%, #5c0d12, #1c0405 70%) !important; --k-ink: #f0e3c6 !important; --k-dim: rgba(240, 227, 198, .75) !important; --k-akzent: #d9aa4c !important; --k-auf-akzent: #1c0405 !important; box-shadow: inset 0 0 0 1px rgba(217, 170, 76, .35), 0 30px 60px -36px rgba(0, 0, 0, .95) !important; }
[data-sendung="bevoresgeschichtewar"] h3 { font-family: "Playfair NK", Georgia, serif; font-weight: 800 !important; font-stretch: normal !important; background: linear-gradient(172deg, #fae7aa, #d8a948 40%, #f4d27a 60%, #a8782a); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
[data-sendung="nocheinstueck"] { --k-bg: #fb4a1f !important; --k-ink: #161111 !important; --k-dim: rgba(22, 17, 17, .82) !important; --k-akzent: #161111 !important; --k-auf-akzent: #ffe03a !important; }
[data-sendung="nocheinstueck"] h3 { align-self: flex-start; padding: .08em .3em .02em; background: #ffe03a; font-weight: 900 !important; font-stretch: 125% !important; text-transform: uppercase; font-size: clamp(24px, 2vw, 32px) !important; }
[data-sendung="atemnah"] { --k-bg: #17303a !important; --k-ink: #f6e6cf !important; --k-dim: rgba(246, 230, 207, .78) !important; --k-akzent: #f4ab82 !important; --k-auf-akzent: #10242c !important; }
[data-sendung="atemnah"] h3 { font-family: "Fraunces NK", Georgia, serif; font-weight: 600 !important; font-stretch: normal !important; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(38px, 3.4vw, 52px) !important; }
[data-sendung="ruheaufnahme"] { --k-bg: #8e1315 !important; --k-ink: #fbe4a6 !important; --k-dim: rgba(251, 228, 166, .82) !important; --k-akzent: #181f31 !important; --k-auf-akzent: #f9c35c !important; }
[data-sendung="ruheaufnahme"] h3 { font-family: "Fraunces NK", Georgia, serif; font-weight: 800 !important; font-stretch: normal !important; font-variation-settings: "SOFT" 100, "WONK" 1; text-shadow: 3px 3px 0 #6c0d10; }
[data-sendung="unerzaehlbar"] { --k-bg: radial-gradient(ellipse 70% 50% at 50% 0, #20353a, #172629 70%) !important; --k-ink: #f1e6cd !important; --k-dim: rgba(241, 230, 205, .75) !important; --k-akzent: #c9a24a !important; --k-auf-akzent: #172629 !important; box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .35), 0 30px 60px -36px rgba(0, 0, 0, .95) !important; }
[data-sendung="unerzaehlbar"] h3 { font-family: "Playfair NK", Georgia, serif; font-weight: 600 !important; font-stretch: normal !important; background: linear-gradient(175deg, #f3e2a6, #c9a24a 45%, #f0d993 62%, #9c7426); -webkit-background-clip: text; background-clip: text; color: transparent !important; padding-bottom: .08em; }
[data-sendung="wieesist"] { --k-bg: #cf6a73 !important; --k-ink: #3a1430 !important; --k-dim: rgba(58, 20, 48, .82) !important; --k-akzent: #3a1430 !important; --k-auf-akzent: #efe2c6 !important; }
[data-sendung="wieesist"] h3 { font-weight: 800 !important; font-stretch: 100% !important; letter-spacing: -.04em; text-transform: lowercase; font-size: clamp(34px, 3vw, 48px) !important; }
[data-sendung="ddfzentrale"] { --k-bg: radial-gradient(ellipse 60% 40% at 85% 0, rgba(242, 163, 58, .22), transparent 70%), #0c0908 !important; --k-ink: #f6f1e7 !important; --k-dim: rgba(246, 241, 231, .72) !important; --k-akzent: #d7262b !important; --k-auf-akzent: #fff !important; }
[data-sendung="ddfzentrale"] h3 { font-weight: 800 !important; font-stretch: 62% !important; font-size: clamp(36px, 3.2vw, 50px) !important; }
[data-sendung="ddfzentrale"] h3 .st-d2 { color: #d7262b; }
[data-sendung="ddfzentrale"] h3 .st-f { color: #1e9be0; }
[data-sendung="hoerspiele"] { --k-bg: radial-gradient(ellipse 70% 50% at 50% 0, rgba(224, 30, 30, .18), transparent 70%), #07090f !important; box-shadow: inset 0 0 0 1px rgba(255, 70, 70, .35), 0 30px 60px -36px rgba(0, 0, 0, .95) !important; }
[data-sendung="hoerspiele"] h3 { color: #ffd9d9 !important; text-shadow: 0 0 6px #ff2d2d, 0 0 18px rgba(255, 45, 45, .8), 0 0 40px rgba(255, 45, 45, .5); }

/* Vorgeschmack: Ein Ding, Toast springt aus dem Toaster des Covers */
.st-schlitz { position: absolute; overflow: hidden; pointer-events: none; transform-origin: 0 100%; }
.st-scheibe { position: absolute; left: 7%; right: 7%; bottom: 0; translate: 0 103%; }
.st-scheibe svg { display: block; width: 100%; height: 100%; }
.is-fx .st-scheibe { animation: stToast 1.5s cubic-bezier(.25, .7, .35, 1) both; }
.is-fx .st-schlitz:nth-child(2) .st-scheibe { animation-delay: .09s; }
@keyframes stToast { 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%; } }

/* Der letzte Brief: der Poststempel landet auf dem Cover */
.st-stempel { position: absolute; z-index: 3; right: 6%; top: 6%; width: 38%; height: auto; color: rgba(246, 234, 210, .85); rotate: -11deg; opacity: 0; }
.st-stempel text { font-family: "EB Garamond NK", Georgia, serif; }
.is-fx .st-stempel { animation: stStempel .55s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
@keyframes stStempel { 0% { opacity: 0; scale: 1.6; } 60% { opacity: 1; } 100% { opacity: 1; scale: 1; } }

/* Unter vier Ohren: drei Leitungen klingeln */
.st-lampen { display: flex; gap: 10px; margin: 18px 0 -6px; }
.st-lampen i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(251, 244, 215, .55); }
.is-fx .st-lampen i { animation: stKlingeln 2.2s steps(1, end) both; }
.is-fx .st-lampen i:nth-child(2) { animation-delay: .5s; }
.is-fx .st-lampen i:nth-child(3) { animation-delay: 1s; }
@keyframes stKlingeln {
  0%, 16%, 32% { background: #ffc65c; box-shadow: 0 0 0 1.5px #ffc65c, 0 0 12px 3px rgba(255, 198, 92, .6); }
  8%, 24% { background: none; box-shadow: inset 0 0 0 1.5px rgba(251, 244, 215, .55); }
  40%, 100% { background: #ffc65c; box-shadow: 0 0 0 1.5px #ffc65c, 0 0 12px 3px rgba(255, 198, 92, .6); }
}

/* Bevor es Geschichte war und Wie es ist: Risse bzw. Bänder ziehen sich übers Cover */
.st-risse path { fill: none; stroke: url(#st-gold); stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(246, 205, 110, .6)); }
.st-baender path { fill: none; stroke-linecap: butt; }
.sd-showcard__bild > .st-fx { overflow: hidden; border-radius: 10px; }

/* Noch ein Stück?: eingeklebt */
.st-tape { position: absolute; z-index: 3; width: 84px; height: 26px; background: rgba(255, 224, 58, .85); opacity: 0; scale: 1.6; }
.st-tape--a { top: 6px; left: -14px; rotate: -32deg; }
.st-tape--b { top: 6px; right: -6px; rotate: 30deg; }
.is-fx .st-tape { animation: stKleben .35s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.is-fx .st-tape--b { animation-delay: .15s; }
@keyframes stKleben { to { opacity: 1; scale: 1; } }

/* Atemnah: zwei Stimmen, links und rechts */
.st-atem { position: absolute; top: 0; bottom: 0; width: 45%; pointer-events: none; opacity: 0; }
.st-atem--l { left: 0; background: radial-gradient(ellipse 90% 60% at 0 50%, rgba(244, 171, 130, .5), transparent 70%); }
.st-atem--r { right: 0; background: radial-gradient(ellipse 90% 60% at 100% 50%, rgba(217, 154, 60, .5), transparent 70%); }
.is-fx .st-atem { animation: stAtem 6s ease-in-out both; }
.is-fx .st-atem--r { animation-delay: 1.5s; }
@keyframes stAtem { 0%, 100% { opacity: 0; } 30% { opacity: 1; } 55% { opacity: .2; } 75% { opacity: .8; } }

/* Ruhe, Aufnahme!: das Schild geht an */
.st-schild { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 10px 10px; border-radius: 6px; font-family: "Fraunces NK", Georgia, serif; font-weight: 800; font-size: 13px; letter-spacing: .08em; background: #2a1214; color: rgba(255, 120, 110, .4); box-shadow: inset 0 0 0 2px #3c1a1d; }
.is-fx .st-schild { animation: stSchild 1.6s steps(1, end) both; }
@keyframes stSchild {
  0%, 12%, 24% { background: #2a1214; color: rgba(255, 120, 110, .4); box-shadow: inset 0 0 0 2px #3c1a1d; }
  6%, 18%, 30%, 100% { background: #e02a2a; color: #fff3e6; box-shadow: inset 0 0 0 2px #ff6b5f, 0 0 22px 5px rgba(255, 60, 50, .6); }
}

/* Unerzählbar: Dieters Pfoten */
.st-pfoten { z-index: 3 !important; }
.st-pfote { position: absolute; width: 7%; height: auto; aspect-ratio: 1; color: rgba(243, 226, 166, .85); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); opacity: 0; }
.is-fx .st-pfote { animation: stPfote 2.8s ease both; }
@keyframes stPfote { 0% { opacity: 0; scale: .4; } 8% { opacity: 1; scale: 1; } 70% { opacity: 1; } 100% { opacity: .55; } }

/* DDF Zentrale: Bandsalat quillt aus dem Cover */
.st-salat path { fill: none; stroke: #5e3f2f; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.st-salat g path + path { stroke: #a8845f; stroke-width: 1.2; opacity: .8; }
[data-sendung="ddfzentrale"] h3, [data-sendung="ddfzentrale"] p, [data-sendung="ddfzentrale"] .sd-showcard__podt { text-shadow: 0 0 3px #0c0908, 0 0 10px #0c0908, 0 0 16px #0c0908; }
[data-sendung="ddfzentrale"] .sd-podlist a, [data-sendung="ddfzentrale"] .sd-podlist .sd-feedcopy { background: rgba(12, 9, 8, .85); }

/* Hörspiele: die Neonschrift geht an */
[data-sendung="hoerspiele"].is-fx h3 { animation: stNeonAn 1.4s steps(1, end) both; }

/* ------------------------------------------------------------ 3. Radio lebendiger */
.st-pegel { position: absolute; z-index: 2; left: 16px; bottom: 18px; display: none; align-items: flex-end; gap: 4px; height: 34px; padding: 6px 8px; border-radius: 8px; background: rgba(5, 7, 13, .7); }
.st-pegel i { width: 5px; border-radius: 2px; background: #3feaff; height: 12%; transition: height .07s linear; }
.st-pegel i:nth-child(1) { height: calc(12% + var(--eq1, 0) * 88%); }
.st-pegel i:nth-child(2) { height: calc(12% + var(--eq2, 0) * 88%); }
.st-pegel i:nth-child(3) { height: calc(12% + var(--eq3, 0) * 88%); }
.st-pegel i:nth-child(4) { height: calc(12% + var(--eq4, 0) * 88%); }
.sd-prog__col.st-hoert .st-pegel { display: inline-flex; }
.sd-prog__col.st-hoert { box-shadow: inset 0 0 0 1.5px rgba(63, 234, 255, .6), 0 0 40px -10px rgba(63, 234, 255, .45); }
.sd-prog__col.st-hoert .sd-prog__cov img { box-shadow: 0 0 0 2px rgba(63, 234, 255, .7), 0 26px 50px -30px rgba(0, 0, 0, .95); }
.sd-prog__col .sd-prog__play { z-index: 3; }
.sd-row__bar { height: 3px; }
.sd-row__bar i { position: relative; }
.sd-row__bar i::after { content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #ff6b6b; box-shadow: 0 0 8px 2px rgba(255, 45, 45, .8); }
.sd-row.is-on .sd-row__bar i::after { background: #b5f7ff; box-shadow: 0 0 8px 2px rgba(63, 234, 255, .8); }
.sd-row.is-on { box-shadow: inset 3px 0 0 #3feaff; }
.sd-row__cov img { transition: opacity .8s ease, transform .6s ease; }
/* Der Toast darf über die Karte hinaus springen */
#sendungen .sd-showcard[data-sendung="eindingeeinestimme"] { overflow: visible; z-index: 2; }