/* =====================================================================
   css/rs/home.css — Startseite „re:signal“ (26.09.2026, Umsetzer home)
   On-Air-Bühne (Desktop 01 / Handy 01), Live-Übernahme Twitch (02),
   Zustände pausiert / lädt / Fehler (Handy 19–21), Teilen-Blatt (24),
   re:quest-Blatt, Abschnitte unter der Bühne.
   Wird auf ALLEN Seiten geladen → alles unter eigenen rs-start/rs-tw/rs-blatt/rs-sek-Klassen.
   ===================================================================== */

.rs-start { --rs-start-tint: var(--ru-tint); --rs-buehne-h: calc(100svh - var(--header-h) - var(--player-h));
  position: relative; isolation: isolate; overflow: hidden; background: var(--ru-ink); color: var(--ru-paper); }
.rs-start .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rs-start.is-tw { --rs-start-tint: #8a3cff; }

/* Motiv vollflächig + Tönung */
.rs-start__bild { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--ru-ink-2); transition: filter .6s ease, opacity .6s ease; }
.rs-start__bild img { position: absolute; inset: -6% -6% 0 -6%; width: 112%; height: 106%; object-fit: cover; object-position: center 40%;
  filter: saturate(1.5) blur(3px); transition: opacity .5s ease; }
.rs-start__bild img.is-weg { opacity: 0; }
.rs-start__tint { position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: background 1.2s ease;
  background:
    linear-gradient(90deg, rgba(13,10,31,.92) 0%, rgba(13,10,31,.55) 45%, color-mix(in srgb, var(--rs-start-tint) 25%, transparent) 100%),
    linear-gradient(0deg, rgba(13,10,31,.95) 0%, rgba(13,10,31,0) 45%); }
.rs-start.is-tw .rs-start__tint { background:
    linear-gradient(90deg, rgba(13,10,31,.95) 0%, rgba(13,10,31,.7) 50%, rgba(138,60,255,.45) 100%),
    linear-gradient(0deg, rgba(13,10,31,.95) 0%, rgba(13,10,31,0) 50%); }

/* ---------------- Bühne (Desktop 1440 → Screen 01) ---------------- */
.rs-start__buehne { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; min-height: max(560px, var(--rs-buehne-h));
  padding: 28px var(--ru-gutter) 36px; max-width: var(--ru-wrap); margin: 0 auto; box-sizing: border-box; }
.rs-start.is-tw .rs-start__buehne { display: none; }
.rs-start__links { display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; min-width: 0; }
.rs-start__rechts { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 18px; min-width: 0; }

.rs-start__proto { margin: 0; font-size: 12px; opacity: .95; }
.rs-start__proto b { font-weight: 600; }
.rs-start__ohne { display: none; }
.rs-start.is-dj .rs-start__status { background: var(--ru-magenta); color: var(--ru-ink); padding: 1px 6px; border-radius: 3px; font-weight: 700; }
.rs-start__verbinde { display: none; align-items: center; gap: 10px; margin: 0; }
.rs-start__ladecolon { font-size: 8px; gap: 4px; }
.rs-start__ladecolon i, .rs-story__ladecolon i { animation: ru-load 1.2s ease-in-out infinite !important; transform: none; }
.rs-start__ladecolon i:last-child, .rs-story__ladecolon i:last-child { animation-delay: .6s !important; }

.rs-start__titelzeile { display: flex; gap: 28px; align-items: flex-start; min-width: 0; }
.rs-start__colon { font-size: 44px; padding-top: 14px; flex: none; }
.rs-start__titelblock { position: relative; min-width: 0; flex: 1; }
.rs-start__titel { font-size: 132px; line-height: .9; margin: 0; overflow-wrap: normal; word-break: normal; hyphens: manual; max-width: 100%; }
.rs-start__titel.is-eng { overflow-wrap: anywhere; }
.rs-start__artist { margin: 12px 0 0; font: 700 40px/1.1 var(--ru-f-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rs-start__skel { display: none; flex-direction: column; gap: 14px; }
.rs-start__skel i { display: block; height: 110px; width: min(460px, 90%); background: rgba(245,239,230,.14); border-radius: var(--ru-r-1); }
.rs-start__skel i + i { height: 36px; width: min(260px, 60%); }

.rs-start__fq { position: relative; height: 34px; color: var(--ru-paper); max-width: 600px; }
.rs-start__fq .rs-fq { gap: 3px; }
.rs-start__dia { position: absolute; left: calc(var(--p, 0) * 100%); top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%) rotate(45deg); transition: left 1s linear; box-shadow: 0 0 0 3px var(--ru-ink); }
.rs-start.ohne-dauer .rs-start__dia { display: none; }

.rs-start__steuer { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rs-start__play { min-width: 168px; justify-content: center; white-space: nowrap; flex: none; }
.rs-start__play .rs-pause i { width: 7px; height: 20px; }
.rs-start__play .rs-play { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }
.rs-start[data-zustand="spielt"] .rs-start__play .rs-play,
.rs-start:not([data-zustand="spielt"]) .rs-start__play .rs-pause { display: none; }
.rs-start__rest { margin: 0; font: 500 14px/1.5 var(--ru-f-mono); min-width: 0; flex: 1 1 200px; }
.rs-m { color: var(--ru-magenta); }
.rs-start__danach { opacity: .8; display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.rs-start__teilen { margin-left: auto; }

/* rechte Spalte */
.rs-start__cover { width: 300px; height: 300px; border-radius: var(--ru-r-2); box-shadow: var(--ru-shadow-cover); object-fit: cover; background: var(--ru-ink-2); transition: opacity .4s; }
.rs-start__spalten { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  font: 500 12px/1.6 var(--ru-f-mono); border-top: 1px solid rgba(245,239,230,.35); padding-top: 14px; }
.rs-start__spalte { min-width: 0; }
.rs-start__spalte .rs-lab2 { margin: 0 0 2px; }
.rs-start__liste { list-style: none; margin: 0; padding: 0; }
.rs-start__liste li { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 2px; }
.rs-start__liste li.is-leer { opacity: .7; }
.rs-start__liste a { color: inherit; text-decoration: none; }
.rs-start__liste a:hover { color: var(--ru-cyan); }
.rs-start__liste .is-jetzt, .rs-start__liste .is-jetzt a { color: var(--ru-cyan); }
.rs-start__zeit { opacity: .75; }
.rs-start__liste .is-jetzt .rs-start__zeit { opacity: 1; }
.rs-start__mehr { display: inline-block; margin-top: 6px; color: var(--ru-paper); text-decoration: underline; text-underline-offset: 3px; }
.rs-start__mehr:hover { color: var(--ru-cyan); }
.rs-start__questt { margin: 0; }
.rs-start__spalte .rs-btn2 { margin-top: 8px; }
.rs-start__kurz { display: none; }
.rs-start__kurzt { display: none; }

/* ---------------- Zustände ---------------- */
/* lädt: noch keine Daten → Skeleton im Markenstil (Handy 20) */
.rs-start[data-np="0"] .rs-start__titel, .rs-start[data-np="0"] .rs-start__artist { visibility: hidden; position: absolute; }
.rs-start[data-np="0"] .rs-start__skel { display: flex; }
.rs-start[data-np="0"] .rs-start__colon i, .rs-start[data-zustand="laedt"] .rs-start__colon i { animation: ru-load 1.2s ease-in-out infinite !important; }
.rs-start[data-np="0"] .rs-start__colon i:last-child, .rs-start[data-zustand="laedt"] .rs-start__colon i:last-child { animation-delay: .6s !important; }
.rs-start[data-np="0"] .rs-fq i, .rs-start[data-zustand="laedt"] .rs-start__fq .rs-fq i { animation: ru-load 1.2s ease-in-out infinite !important; }
.rs-start[data-np="0"] .rs-start__fq, .rs-start[data-zustand="laedt"] .rs-start__fq { color: var(--ru-paper-50); }
.rs-start[data-np="0"] .rs-start__dia { display: none; }
.rs-start[data-np="0"] .rs-start__cover { opacity: .35; }
/* Player verbindet */
.rs-start[data-zustand="laedt"] .rs-start__verbinde { display: flex; }
/* pausiert (Handy 19): Puls still, Frequenz flach, Bild ruhiger */
.rs-start[data-zustand="pause"] .rs-start__bild { filter: saturate(.8) brightness(.8); }
.rs-start[data-zustand="pause"] .rs-start__titel, .rs-start[data-zustand="pause"] .rs-start__artist { opacity: .85; }
.rs-start[data-zustand="pause"] .rs-start__fq { color: var(--ru-paper-50); }
.rs-start[data-zustand="pause"] .rs-start__ohne { display: inline; }
.rs-start[data-zustand="pause"] [data-start-nshow], .rs-start[data-zustand="pause"] .rs-start__kbps { display: none; }
.rs-start:not([data-zustand="spielt"]) .rs-start__fq .rs-fq i { transform: scaleY(.25) !important; }
/* Fehler (Handy 21) */
.rs-start__fehler { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.rs-start__fehler[hidden] { display: none; }
.rs-start__fehlerk { color: var(--ru-magenta); opacity: 1; margin: 0; }
.rs-start__fehlert { font-size: clamp(52px, 7vw, 104px); margin: 0; }
.rs-start__fehlerp { margin: 0; font: 500 15px/1.5 var(--ru-f-text); max-width: 46ch; }
.rs-start__colon--fehler i { background: var(--ru-magenta) !important; }
.rs-start[data-zustand="fehler"] .rs-start__links > .rs-start__titelzeile,
.rs-start[data-zustand="fehler"] .rs-start__fq,
.rs-start[data-zustand="fehler"] .rs-start__steuer { display: none; }
.rs-start[data-zustand="fehler"] .rs-start__bild { opacity: 0; }
.rs-start[data-zustand="fehler"] .rs-start__tint { background: var(--ru-ink-2); }
.rs-start[data-zustand="fehler"] .rs-start__proto, .rs-start[data-zustand="fehler"] .rs-start__verbinde { display: none; }

/* Puls still, solange nichts läuft (Handy 19) */
.rs-start:not([data-zustand="spielt"]) .rs-start__colon i, .rs-start__colon.still i { transform: none; }

/* ---------------- Live-Übernahme Twitch (Desktop 02) ---------------- */
.rs-tw { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px;
  min-height: max(560px, var(--rs-buehne-h)); padding: 28px var(--ru-gutter) 24px; box-sizing: border-box; max-width: var(--ru-wrap); margin: 0 auto; }
.rs-tw[hidden] { display: none; }
.rs-tw__haupt { display: flex; flex-direction: column; gap: 18px; min-height: 0; min-width: 0; }
.rs-tw__bild { position: relative; flex: 1; min-height: 380px; background: var(--ru-ink-2); border-radius: var(--ru-r-1); overflow: hidden; }
.rs-tw__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.3); }
.rs-tw__farbe { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,10,31,.85) 0%, rgba(138,60,255,.3) 55%, rgba(138,60,255,.3) 100%); }
.rs-tw__badge { position: absolute; left: 18px; top: 16px; font-size: 13px; z-index: 4; }
.rs-tw__zahl { position: absolute; right: 18px; top: 16px; background: rgba(13,10,31,.6); padding: 6px 10px; border-radius: 3px; z-index: 4; }
.rs-tw__vorhang { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: min(460px, calc(100% - 36px)); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 22px; box-sizing: border-box;
  background: rgba(13,10,31,.62); border: 1px solid var(--ru-line); border-radius: var(--ru-r-2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rs-tw__vorhang .rs-lab2 { margin: 0; opacity: .85; }
.rs-tw__hinweis { margin: 0; font: 500 12px/1.5 var(--ru-f-text); color: var(--ru-paper-70); }
.rs-tw__titel { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; gap: 16px; align-items: flex-end; z-index: 1; }
.rs-tw__colon { font-size: 22px; padding-bottom: 8px; flex: none; }
.rs-tw__titel > div { min-width: 0; flex: 1; }
.rs-tw__name { font-size: 64px; margin: 0; overflow-wrap: normal; }
.rs-tw__name.is-eng { overflow-wrap: anywhere; }
.rs-tw__wer { margin: 6px 0 0; font: 700 18px/1.3 var(--ru-f-text); }
.rs-tw__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; background: #000; }
.rs-tw.is-geladen .rs-tw__vorhang, .rs-tw.is-geladen .rs-tw__titel, .rs-tw.is-geladen .rs-tw__zahl, .rs-tw.is-geladen .rs-tw__badge { display: none; }
.rs-tw__knoepfe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rs-tw:not(.is-geladen) [data-tw-ton], .rs-tw:not(.is-geladen) [data-tw-radio] { display: none; }
.rs-tw[data-ton="radio"] [data-tw-radio], .rs-tw[data-ton="stream"] [data-tw-ton] { box-shadow: 0 0 0 2px var(--ru-cyan); }
.rs-tw__endet { margin-left: auto; font-size: 12px; opacity: .8; }
.rs-tw__chat { display: flex; flex-direction: column; gap: 8px; border-left: 1px solid rgba(245,239,230,.3); padding-left: 24px; min-height: 0; font: 500 13px/1.5 var(--ru-f-text); }
.rs-tw__chat .rs-lab2 { margin: 0; }
.rs-tw__chatbox { flex: 1; min-height: 320px; position: relative; }
.rs-tw__chatbox p { margin: 0; font-size: 12px; opacity: .7; }
.rs-tw__chatbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--ru-r-1); background: var(--ru-ink); }
.rs-tw__ende { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 36px var(--ru-gutter); background: rgba(26,20,64,.94); }
.rs-tw__ende[hidden] { display: none; }
.rs-tw__ende p { margin: 0; }
.rs-tw__danke { font: 800 clamp(22px, 3vw, 40px)/1.2 var(--ru-f-text); }
/* Der Footer-Streifen „Thorin ist live“ ist auf der Startseite doppelt — die Bühne übernimmt */
body:has([data-rs-start]) .twitch-live { display: none !important; }

/* ---------------- Blätter: re:quest und Teilen ---------------- */
.rs-blatt { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(13,10,31,.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rs-blatt[hidden] { display: none; }
.rs-blatt__karte { width: min(480px, 100%); max-height: calc(100svh - 32px); overflow: auto; box-sizing: border-box;
  background: var(--ru-ink); color: var(--ru-paper); border: 1px solid var(--ru-line); border-radius: var(--ru-r-2); padding: 18px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: var(--ru-shadow-cover); }
.rs-blatt__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rs-blatt__kopf .rs-lab2 { margin: 0; }
.rs-blatt__zu { width: 36px; height: 36px; flex: none; display: grid; place-items: center; background: none; color: var(--ru-paper);
  border: 1.5px solid var(--ru-line); border-radius: var(--ru-r-1); font: 500 20px/1 var(--ru-f-mono); cursor: pointer; }
.rs-blatt__zu:hover { border-color: var(--ru-paper); }
body.rs-blatt-offen { overflow: hidden; }

.rs-quest__text { margin: 0; font: 500 14px/1.5 var(--ru-f-text); color: var(--ru-paper-70); }
.rs-quest__mount .requests__form { margin: 0; }
.rs-quest__mount .requests__input { width: 100%; box-sizing: border-box; background: transparent; border: 1.5px solid var(--ru-line); border-radius: var(--ru-r-1);
  padding: 12px 14px; font: 500 15px var(--ru-f-text); color: var(--ru-paper); box-shadow: none; }
.rs-quest__mount .requests__input:focus { border-color: var(--ru-cyan); outline: none; }
.rs-quest__mount .requests__list:empty { display: none; }
.rs-quest__mount .requests__list, .rs-quest__mount .requests__msg { background: none; box-shadow: none; border: 0; }
.rs-quest__mount .requests__msg:empty { display: none; }
.rs-quest__mount .requests__list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 50svh; overflow: auto; }
.rs-quest__mount .requests__item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ru-line-2); background: none; border-radius: 0; box-shadow: none; }
.rs-quest__mount .requests__item img { width: 40px; height: 40px; border-radius: 3px; object-fit: cover; flex: none; }
.rs-quest__mount .requests__item > div { flex: 1; min-width: 0; }
.rs-quest__mount .requests__item strong { display: block; font: 800 14px/1.2 var(--ru-f-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-quest__mount .requests__item em { font: 500 11px/1.4 var(--ru-f-mono); font-style: normal; opacity: .7; }
.rs-quest__mount .requests__btn { background: transparent; color: var(--ru-paper); border: 1.5px solid var(--ru-paper); border-radius: var(--ru-r-1);
  padding: 8px 10px; font: 600 11px/1 var(--ru-f-mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; flex: none; }
.rs-quest__mount .requests__btn:hover { background: var(--ru-paper); color: var(--ru-ink); }
.rs-quest__mount .requests__msg { margin: 8px 0 0; font: 600 11px/1.6 var(--ru-f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ru-paper-70); }
.rs-quest__mount .requests__msg[data-kind="ok"] { color: var(--ru-cyan); }
.rs-quest__mount .requests__msg[data-kind="err"] { color: var(--ru-magenta); }

.rs-story__karte { width: min(420px, 100%); align-items: stretch; }
.rs-story__vorschau { position: relative; width: 225px; aspect-ratio: 9 / 16; margin: 4px auto; border-radius: var(--ru-r-2); overflow: hidden; box-shadow: var(--ru-shadow-cover); background: var(--ru-ink-2); flex: none; }
.rs-story__vorschau canvas { display: block; width: 100%; height: 100%; }
.rs-story__laedt { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 8px; background: var(--ru-ink-2); font-size: 11px; }
.rs-story.is-laedt .rs-story__laedt { display: flex; }
.rs-story__ladecolon { font-size: 10px; gap: 5px; }
.rs-story__kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.rs-story__kacheln .rs-tile { align-items: center; justify-content: center; text-align: center; padding: 12px 10px; }
.rs-story__kacheln .rs-tile[hidden] { display: none; }
.rs-story.ohne-teilen [data-story="sichern"] { grid-column: 1 / -1; }
.rs-story.is-laedt .rs-story__kacheln { opacity: .4; pointer-events: none; }
.rs-story__msg { margin: 0; min-height: 1.8em; }

/* ---------------- Abschnitte unter der Bühne ---------------- */
.rs-sek { padding: clamp(56px, 7vw, 96px) 0 0; }
.rs-sek__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.rs-sek__titel { font: 900 clamp(34px, 4.4vw, 64px)/.92 var(--ru-f-disp); text-transform: uppercase; letter-spacing: -.04em; margin: 0; }
.rs-sek__text { margin: 12px 0 0; max-width: 56ch; font: 500 16px/1.55 var(--ru-f-text); color: var(--ru-paper-70); }

/* re:wind-Liste (#history, js/nowplaying.js) */
.rs-sek .rs-wind { background: none; border-radius: 0; box-shadow: none; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 1px solid var(--ru-line); }
.rs-sek .rs-wind .history__item { display: flex; grid-template-columns: none; gap: 14px; align-items: center; padding: 12px 0; border: 0; border-bottom: 1px solid var(--ru-line-2); border-radius: 0; background: none; box-shadow: none; margin: 0; min-width: 0; }
.rs-wind .history__item--leer { grid-column: 1 / -1; font: 500 14px/1.5 var(--ru-f-text); color: var(--ru-paper-70); }
.rs-sek .rs-wind .history__time { order: 0; grid-column: auto; grid-row: auto; font: 500 12px var(--ru-f-mono); opacity: .7; width: 44px; flex: none; color: var(--ru-paper); }
.rs-sek .rs-wind .history__art { order: 1; grid-row: auto; width: 44px; height: 44px; border-radius: 3px; object-fit: cover; flex: none; box-shadow: none; }
.rs-sek .rs-wind .history__text { order: 2; grid-column: auto; grid-row: auto; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rs-wind .history__text strong { font: 800 15px/1.2 var(--ru-f-text); color: var(--ru-paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-wind .history__text em { font: 500 12px/1.4 var(--ru-f-mono); font-style: normal; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ru-paper); }
.rs-sek .rs-wind .history__badge { order: 3; font: 600 10px var(--ru-f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ru-cyan); flex: none; }
.rs-wind .history__badge:empty { display: none; }
.rs-sek .rs-wind .fav-btn { order: 4; position: static; background: none !important; border: 0 !important; color: var(--ru-paper) !important; opacity: .8; padding: 6px; border-radius: var(--ru-r-1); cursor: pointer; flex: none; box-shadow: none !important; }
.rs-wind .fav-btn:hover { opacity: 1; }
.rs-wind .fav-btn.is-fav { color: var(--ru-magenta) !important; opacity: 1; }
.rs-wind .fav-btn.is-fav svg path { fill: var(--ru-magenta); }

/* Shows-Karussell */
.rs-shows { scroll-padding-inline: var(--ru-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--ru-line) transparent; padding-bottom: 8px; }
.rs-shows__spur { display: flex; gap: 14px; padding: 0 var(--ru-gutter); width: max-content; }
@media (min-width: 1528px) { .rs-shows__spur { padding-left: calc((100vw - var(--ru-wrap)) / 2 + var(--ru-gutter)); } }
.rs-show { width: 300px; flex: none; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; color: var(--ru-paper); text-decoration: none; }
.rs-show__bild { position: relative; aspect-ratio: 16 / 9; border-radius: var(--ru-r-1); overflow: hidden; background: var(--ru-ink-2); border-left: 3px solid var(--rs-kante, var(--ru-paper)); }
.rs-show__bild img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.1) brightness(.85); transition: filter .3s ease, transform .5s ease; }
.rs-show:hover .rs-show__bild img { filter: saturate(1.35) brightness(1); transform: scale(1.03); }
.rs-show:hover { color: var(--ru-paper); }
.rs-show__text { display: flex; flex-direction: column; gap: 3px; }
.rs-show__zeit { font-size: 11px; opacity: .75; letter-spacing: .02em; }
.rs-show__zeit b { color: var(--ru-cyan); font-weight: 600; text-transform: uppercase; }
.rs-show.is-jetzt .rs-show__zeit { opacity: 1; }
.rs-show.is-jetzt .rs-show__bild { box-shadow: 0 0 0 2px var(--ru-cyan); }
.rs-show__titel { font: 800 16px/1.2 var(--ru-f-text); }
.rs-show__genre { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }

/* Club-Modus */
.rs-club { width: 100%; display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 32px; align-items: center; text-align: left; cursor: pointer;
  background: var(--ru-ink-2); color: var(--ru-paper); border: 1px solid var(--ru-line); border-radius: var(--ru-r-2); padding: 28px 32px; font: inherit; }
.rs-club:hover { border-color: var(--ru-paper); }
.rs-club__fq { height: 72px; color: var(--ru-cyan); }
.rs-club__fq .rs-fq { gap: 3px; }
.rs-club__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rs-club__titel { font: 900 clamp(26px, 3vw, 40px)/1 var(--ru-f-disp); text-transform: uppercase; letter-spacing: -.03em; }
.rs-club__sub { font: 500 15px/1.5 var(--ru-f-text); color: var(--ru-paper-70); max-width: 60ch; }
.rs-club__meta { opacity: .8; }
.rs-club[data-live="true"] .rs-club__meta { color: var(--ru-magenta); opacity: 1; }

/* So hörst du */
.rs-hoeren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--ru-line); padding-top: 18px; }
.rs-hoeren__sp { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rs-hoeren__sp .rs-lab2 { margin: 0; }
.rs-hoeren__t { margin: 0; font: 500 15px/1.55 var(--ru-f-text); color: var(--ru-paper-70); }
.rs-hoeren__kn { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rs-hoeren__code { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--ru-line); border-radius: var(--ru-r-1); padding: 8px 8px 8px 12px; min-width: 0; }
.rs-hoeren__code .rs-lab2 { flex: none; }
.rs-hoeren__code code { flex: 1; min-width: 0; font: 500 12px var(--ru-f-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; color: var(--ru-paper); padding: 0; }

/* re:lease */
.rs-label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.rs-label__cover { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rs-label__cover img { width: 100%; height: auto; aspect-ratio: 1; }

/* Für DJs */
.rs-djs { position: relative; isolation: isolate; overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; }
.rs-djs__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(1.3); }
.rs-djs__tint { position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(90deg, rgba(13,10,31,.94) 0%, rgba(13,10,31,.6) 50%, rgba(90,44,255,.3) 100%),
    linear-gradient(0deg, rgba(13,10,31,.9) 0%, rgba(13,10,31,0) 60%); }
.rs-djs__inhalt { width: 100%; padding-top: 64px; padding-bottom: 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.rs-djs__titel { font-size: clamp(44px, 7vw, 104px); margin: 0; }
.rs-djs__inhalt .rs-sek__text { margin: 0; }

/* ---------------- Tablet ---------------- */
@media (max-width: 1180px) and (min-width: 821px) {
  .rs-start__buehne { grid-template-columns: 1.15fr 1fr; gap: 32px; }
  .rs-start__cover { width: 240px; height: 240px; }
  .rs-start__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-start__spalte--quest { grid-column: 1 / -1; }
  .rs-tw { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* ---------------- Handy 390 (Screens 01, 02, 19–21, 24) ---------------- */
@media (max-width: 820px) {
  .rs-start { --rs-buehne-h: calc(100svh - var(--header-h) - var(--player-h) - var(--tabbar-h) - 12px - env(safe-area-inset-bottom)); }
  .rs-start__bild, .rs-start__tint { bottom: auto; height: max(520px, var(--rs-buehne-h)); }
  .rs-start__tint { background: linear-gradient(0deg, rgba(13,10,31,.98) 0%, rgba(13,10,31,.6) 45%, color-mix(in srgb, var(--rs-start-tint) 35%, transparent) 100%); }
  .rs-start.is-tw .rs-start__tint { background: linear-gradient(0deg, rgba(13,10,31,.98) 0%, rgba(13,10,31,.55) 45%, rgba(138,60,255,.55) 100%); }
  .rs-start__bild img { inset: -6%; width: 112%; height: 112%; }

  .rs-start__buehne { display: block; min-height: 0; padding: 0; }
  .rs-start__links { min-height: max(520px, var(--rs-buehne-h)); box-sizing: border-box; gap: 14px; padding: 0 20px 14px; }
  .rs-start__proto { font-size: 10.5px; opacity: .9; letter-spacing: .02em; }
  .rs-start.is-dj .rs-start__showteil { display: none; }
  .rs-start__kbps { display: none; }
  .rs-start__titelzeile { gap: 16px; }
  .rs-start__colon { font-size: 26px; padding-top: 8px; }
  .rs-start__titel { font-size: 60px; }
  .rs-start__artist { font-size: 20px; margin-top: 8px; }
  .rs-start__skel i { height: 54px; width: 220px; }
  .rs-start__skel i + i { height: 18px; width: 150px; }
  .rs-start__fq { height: 36px; margin: 0 -20px; padding: 0 20px; max-width: none; }
  .rs-start__fq .rs-fq { gap: 2px; }
  .rs-start__fq .rs-start__dia { left: calc(20px + var(--p, 0) * (100% - 40px)); }
  .rs-start__steuer { gap: 12px; flex-wrap: nowrap; justify-content: space-between; }
  .rs-start .rs-start__play { min-width: 0; padding: 14px 14px; font-size: 12px; gap: 8px; }
  .rs-start__play .rs-pause i { width: 5px; height: 16px; }
  .rs-start__play .rs-play { border-left-width: 12px; border-top-width: 7px; border-bottom-width: 7px; }
  .rs-start__rest { font-size: 12px; text-align: right; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
  .rs-start__teilen { margin-left: 0; padding: 10px; flex: none; }
  .rs-start__teilen span { display: none; }
  .rs-start__kurz { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; }
  .rs-start__kurzwind { margin: 0; font-size: 11px; line-height: 1.7; min-width: 0; }
  .rs-start__kurzwind a { color: inherit; text-decoration: none; }
  .rs-start__kurzwind span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rs-start__kurz .rs-btn2 { flex: none; }
  .rs-start[data-np="0"] .rs-start__kurz { visibility: hidden; }

  .rs-start__rechts { display: block; padding: 28px 20px 0; }
  .rs-start__cover { display: none; }
  .rs-start__spalten { grid-template-columns: 1fr; gap: 24px; border-top: 1px solid var(--ru-line); padding-top: 16px; font-size: 12px; }
  .rs-start__spalte--wind { display: none; }
  .rs-start__lang { display: none; }
  .rs-start__kurzt { display: inline; }
  .rs-start__spalte--heute .rs-start__lang { display: inline; }
  .rs-start__spalte--heute .rs-start__kurzt { display: none; }
  .rs-start__liste li { padding: 8px 0; border-bottom: 1px solid var(--ru-line-2); margin: 0; font-size: 13px; }

  .rs-start__fehlert { font-size: 52px; }

  /* Live-Modus Handy */
  .rs-tw { display: flex; flex-direction: column; gap: 12px; min-height: max(520px, var(--rs-buehne-h)); padding: 0 20px 14px; }
  .rs-tw__haupt { gap: 12px; }
  .rs-tw__bild { flex: none; min-height: 0; margin: 0 -20px; border-radius: 0; overflow: visible; background: none; padding-top: calc(56.25% + 22.5px); }
  .rs-tw__poster, .rs-tw__farbe, .rs-tw__player { height: auto; bottom: auto; aspect-ratio: 16 / 9; }
  .rs-tw__farbe { background: rgba(138,60,255,.35); }
  .rs-tw__badge { left: 14px; top: 12px; font-size: 11px; }
  .rs-tw__zahl { right: 14px; top: 12px; padding: 4px 8px; }
  .rs-tw__vorhang { top: 0; left: 0; transform: none; width: 100%; aspect-ratio: 16 / 9; border-radius: 0; border: 0; padding: 38px 20px 12px; gap: 8px; justify-content: center; background: rgba(13,10,31,.55); }
  .rs-tw__vorhang .rs-lab2 { display: none; }
  .rs-tw__hinweis { font-size: 11px; line-height: 1.4; }
  .rs-tw__titel { position: static; padding: 12px 20px 0; align-items: flex-start; gap: 14px; }
  .rs-tw__colon { font-size: 20px; padding: 6px 0 0; }
  .rs-tw__name { font-size: 44px; }
  .rs-tw__wer { font-size: 16px; }
  .rs-tw__knoepfe { gap: 8px; flex-wrap: wrap; }
  .rs-tw__endet { display: none; }
  .rs-tw__chat { border-left: 0; padding-left: 0; border-top: 1px solid rgba(245,239,230,.3); padding-top: 10px; font-size: 12px; }
  .rs-tw__chatbox { min-height: 360px; }
  .rs-tw__ende { padding: 24px 20px; }

  /* Blätter als Bodenblatt über App-Leiste */
  .rs-blatt { align-items: flex-end; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .rs-blatt__karte { max-height: calc(100svh - 24px); }
  .rs-story__vorschau { width: min(225px, 52vw); }

  /* Abschnitte */
  .rs-sek__kopf { margin-bottom: 18px; }
  .rs-sek__text { font-size: 15px; }
  .rs-wind { grid-template-columns: 1fr; }
  .rs-sek .rs-wind .history__item:nth-child(n+7) { display: none; }
  .rs-sek .rs-wind .history__item { display: flex; }
  .rs-show { width: 250px; }
  .rs-club { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px; }
  .rs-club__fq { height: 44px; }
  .rs-club__btn { justify-self: start; }
  .rs-hoeren { grid-template-columns: 1fr; gap: 26px; }
  .rs-label { grid-template-columns: 1fr; gap: 28px; }
  .rs-label__cover { grid-template-columns: repeat(2, 1fr); }
  .rs-djs { min-height: 380px; }
  .rs-djs__inhalt { padding-top: 48px; padding-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-start__dia { transition: none; }
}