/* =====================================================================
   resignal.css — Markensystem „re:signal“ (26.09.2026, Claude-Design-Übergabe)
   Nacht-Tinte, Elfenbein, Cyan/Magenta-Doppelpunkt. Kanten 4/6 px, keine Kapseln.
   Liegt als LETZTE Stilschicht über allen älteren Dateien und stellt deren
   Tokens auf re:signal um. Seitenteile: css/rs/<bereich>.css
   ===================================================================== */
@import url('/fonts/rs-fonts.css');

:root {
  --ru-ink: #0d0a1f; --ru-ink-2: #1a1440; --ru-ink-3: #231b52;
  --ru-paper: #f5efe6; --ru-paper-70: rgba(245,239,230,.7); --ru-paper-50: rgba(245,239,230,.5);
  --ru-line: rgba(245,239,230,.22); --ru-line-2: rgba(245,239,230,.12);
  --ru-cyan: #00e5ff; --ru-magenta: #ff2bd6;
  --ru-tint: #2a5bff;                       /* wird von kern.js je Show gesetzt */
  --ru-tint-abendmix:#ff4d2e; --ru-tint-nacht:#2a5bff; --ru-tint-warehouse:#5a2cff; --ru-tint-melodic:#00b4d8; --ru-tint-hard:#ff2e2e; --ru-tint-live:#8a3cff;
  --ru-genre-dark:#2a5bff; --ru-genre-hard:#ff4d2e; --ru-genre-melodic:#00d4ff; --ru-genre-peak:#ff2bd6; --ru-genre-live:#8a3cff; --ru-genre-classic:#ffb020;
  --ru-r-1: 4px; --ru-r-2: 6px; --ru-r-icon: 20px;
  --ru-shadow-cover: 0 40px 80px -30px rgba(0,0,0,.9);
  --ru-f-disp: 'Unbounded', 'Arial Black', sans-serif;
  --ru-f-text: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --ru-f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --ru-f-wm: 'Quicksand', 'Manrope', sans-serif;
  --ru-puls: 1;                             /* 1,0–1,4 im Takt (js/puls.js) */
  --ru-gutter: clamp(16px, 3.1vw, 44px);
  --ru-wrap: 1440px;

  /* Alte Tokens (style/sunset/cinematic) auf re:signal umbiegen */
  --bg: var(--ru-ink); --bg-2: #120e2b; --surface: var(--ru-ink-2); --surface-2: var(--ru-ink-3);
  --line: var(--ru-line); --text: var(--ru-paper); --muted: var(--ru-paper-70); --dim: var(--ru-paper-50);
  --accent: var(--ru-magenta); --accent-hot: var(--ru-cyan); --on-accent: var(--ru-ink);
  --sun: var(--ru-paper); --sun-soft: var(--ru-ink-2);
  --lila: #8a3cff; --lila-soft: var(--ru-ink-2); --tuerkis: var(--ru-cyan); --tuerkis-soft: var(--ru-ink-2);
  --gold: #ffb020; --gold-soft: var(--ru-ink-2);
  --r-s: 4px; --r: 6px; --r-l: 6px;
  --sh-1: none; --sh-2: 0 20px 50px -24px rgba(0,0,0,.8); --sh-media: var(--ru-shadow-cover);
  --ff-display: var(--ru-f-text); --ff-head: var(--ru-f-disp); --ff-mono: var(--ru-f-mono);
  --header-h: 76px; --player-h: 84px; --tabbar-h: 0px;
  --ring: 0 0 0 2px var(--ru-cyan);
  color-scheme: dark;
}
/* Dunkle Inseln der alten Schicht sind jetzt einfach Nacht */
.club, .site-footer, .cine, .cine-cta, .cine-card, .showcard__art, .track-hero, .hero {
  --bg: var(--ru-ink); --surface: var(--ru-ink-2); --surface-2: var(--ru-ink-3); --line: var(--ru-line);
  --text: var(--ru-paper); --muted: var(--ru-paper-70); --dim: var(--ru-paper-50);
}

html { background: var(--ru-ink); scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  background: var(--ru-ink);
  color: var(--ru-paper);
  font-family: var(--ru-f-text);
  font-feature-settings: "ss01", "tnum";
  padding-bottom: calc(var(--player-h) + var(--tabbar-h) + env(safe-area-inset-bottom));
}
/* Show-Stimmung: Tönung als ruhiges Licht von oben (Wechsel 1,2 s) */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 70vh; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 70% at 70% -10%, color-mix(in srgb, var(--ru-tint) 34%, transparent), transparent 70%);
  transition: background 1.2s ease;
}
body[data-twitch="live"] { --ru-tint: #8a3cff; }
::selection { background: var(--ru-magenta); color: var(--ru-ink); }
a { color: inherit; }
a:hover { color: var(--ru-cyan); }
:focus-visible { outline: 2px solid var(--ru-cyan) !important; outline-offset: 2px; }
h1, h2, h3, h4 { color: var(--ru-paper); font-family: var(--ru-f-disp); font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; line-height: .95; }
h3, h4 { font-weight: 700; letter-spacing: -.02em; }
.meta { color: var(--ru-paper-70); }
.eyebrow { color: var(--ru-cyan) !important; font: 600 11px/1.8 var(--ru-f-mono) !important; letter-spacing: .1em !important; text-transform: uppercase; }
.wrap { max-width: var(--ru-wrap); padding-inline: var(--ru-gutter); }
.mono { font-family: var(--ru-f-mono); }
blockquote { border-left: 3px solid var(--ru-magenta); background: var(--ru-ink-2); border-radius: 0 var(--ru-r-1) var(--ru-r-1) 0; }
hr { border: 0; border-top: 1px solid var(--ru-line); }

/* ---------------------------------------------------------------------
   Basisklassen (rs- Präfix, damit nichts mit Altklassen kollidiert)
   --------------------------------------------------------------------- */
.rs-disp { font-family: var(--ru-f-disp); font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; line-height: .92; overflow-wrap: anywhere; }
.rs-pt { font: 900 clamp(40px, 6.7vw, 96px)/.92 var(--ru-f-disp); text-transform: uppercase; letter-spacing: -.04em; margin: 0; overflow-wrap: anywhere; }
.rs-lab { font: 600 11px/1.8 var(--ru-f-mono); letter-spacing: .1em; text-transform: uppercase; }
.rs-lab2 { font: 600 11px/1.8 var(--ru-f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.rs-mono { font: 500 13px/1.5 var(--ru-f-mono); }
.rs-hr { border-top: 1px solid var(--ru-line); }
.rs-row { display: flex; align-items: center; gap: 12px; }
.rs-wrap { max-width: var(--ru-wrap); margin: 0 auto; padding-inline: var(--ru-gutter); }

.rs-btn, .btn {
  background: var(--ru-paper); color: var(--ru-ink); border: 0; border-radius: var(--ru-r-1);
  padding: 14px 18px; font: 900 13px/1 var(--ru-f-disp); text-transform: uppercase; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background .15s ease;
}
.rs-btn:hover, .btn:hover { background: #fff; color: var(--ru-ink); transform: translateY(-1px); }
.rs-btn:active, .btn:active { transform: translateY(0) scale(.98); }
.rs-btn.lg { padding: 18px 28px; font-size: 16px; }
.rs-btn2, .btn--ghost {
  background: transparent; color: var(--ru-paper); border: 1.5px solid var(--ru-paper); border-radius: var(--ru-r-1);
  padding: 10px 14px; font: 600 12px/1 var(--ru-f-mono); text-transform: uppercase; letter-spacing: .06em;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
}
.rs-btn2:hover, .btn--ghost:hover { background: var(--ru-paper); color: var(--ru-ink); }
.rs-btn3 {
  background: rgba(245,239,230,.12); color: var(--ru-paper); border: 0; border-radius: var(--ru-r-1);
  padding: 10px 14px; font: 600 12px/1 var(--ru-f-mono); text-transform: uppercase; letter-spacing: .06em;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
}
.rs-btn3:hover { background: rgba(245,239,230,.22); color: var(--ru-paper); }
.rs-play { width: 0; height: 0; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; display: inline-block; }
.rs-pause { display: inline-flex; gap: 4px; } .rs-pause i { width: 5px; height: 16px; background: currentColor; display: block; }

/* Segment (Tage, Sprachen, Filter) — statt Dropdown */
.rs-seg { display: inline-flex; border: 1.5px solid var(--ru-line); border-radius: var(--ru-r-1); overflow: hidden; font: 600 11px var(--ru-f-mono); letter-spacing: .06em; text-transform: uppercase; }
.rs-seg > * { padding: 8px 12px; color: var(--ru-paper); background: none; border: 0; cursor: pointer; text-decoration: none; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.rs-seg > *:hover { background: rgba(245,239,230,.1); color: var(--ru-paper); }
.rs-seg > .on, .rs-seg > [aria-pressed="true"], .rs-seg > [aria-current], .rs-seg > .is-active { background: var(--ru-paper); color: var(--ru-ink); }

/* Kachel (Auswahl statt Dropdown) */
.rs-tile { display: flex; flex-direction: column; gap: 6px; border: 1.5px solid var(--ru-line); border-radius: var(--ru-r-1); padding: 12px 14px; font: 600 12px var(--ru-f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ru-paper); background: none; text-align: left; cursor: pointer; text-decoration: none; }
.rs-tile:hover { border-color: var(--ru-paper); color: var(--ru-paper); }
.rs-tile.on, .rs-tile[aria-pressed="true"], .rs-tile:has(input:checked) { background: var(--ru-paper); color: var(--ru-ink); border-color: var(--ru-paper); }
.rs-tile input[type=radio], .rs-tile input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }

.rs-inp, .rs-form input[type=text], .rs-form input[type=email], .rs-form input[type=url], .rs-form input[type=tel], .rs-form input[type=search], .rs-form input[type=time], .rs-form input[type=date], .rs-form textarea {
  width: 100%; 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);
}
.rs-inp::placeholder, .rs-form ::placeholder { color: var(--ru-paper-50); }
.rs-inp:focus, .rs-form input:focus, .rs-form textarea:focus { border-color: var(--ru-cyan); outline: none; }

/* Liste (Zeilen mit Trennlinie) */
.rs-li { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ru-line-2); }
.rs-li .t { font: 800 16px/1.2 var(--ru-f-text); }
.rs-li .m { font: 500 12px/1.4 var(--ru-f-mono); opacity: .7; }
.rs-tag { font: 600 10px var(--ru-f-mono); text-transform: uppercase; letter-spacing: .06em; border-radius: 3px; padding: 3px 7px; color: var(--ru-ink); background: var(--ru-paper); display: inline-block; }

/* LIVE-Marke (einzige Magenta-Fläche) */
.rs-live { background: var(--ru-magenta); color: var(--ru-ink); border-radius: var(--ru-r-1); padding: 6px 10px; font: 900 11px/1 var(--ru-f-disp); letter-spacing: .04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.rs-live:hover { color: var(--ru-ink); }
.rs-live > i { width: 8px; height: 8px; border-radius: 50%; background: var(--ru-ink); animation: ru-p1 .92s ease-in-out infinite; flex: none; }

.rs-dia { display: inline-block; width: 10px; height: 10px; background: var(--ru-paper); transform: rotate(45deg); }

/* Wortmarke r[e◆][:]union */
.rs-wm { display: inline-flex; align-items: center; font: 700 26px/1 var(--ru-f-wm); letter-spacing: -.02em; color: var(--ru-paper); text-decoration: none; white-space: nowrap; }
.rs-wm > span { display: inline-flex; align-items: center; }
.rs-wm .e { position: relative; display: inline-block; }
.rs-wm .d { position: absolute; left: 50%; bottom: -.34em; width: .22em; height: .22em; background: var(--ru-cyan); transform: translateX(-50%) rotate(45deg) scale(var(--ru-puls)); }
.rs-wm .c { display: inline-flex; flex-direction: column; gap: .16em; margin: 0 .12em; }
.rs-wm .c i { width: .18em; height: .18em; border-radius: 50%; display: block; }
.rs-wm .c i:first-child { background: var(--ru-cyan); transform: scale(var(--ru-puls)); }
.rs-wm .c i:last-child { background: var(--ru-magenta); transform: scale(calc(2.4 - var(--ru-puls))); }
a.rs-wm:hover { color: var(--ru-paper); }

/* Doppelpunkt als Zeichen */
.rs-colon { display: inline-flex; flex-direction: column; gap: .5em; font-size: 10px; vertical-align: middle; }
.rs-colon i { width: 1em; height: 1em; border-radius: 50%; display: block; }
.rs-colon i:first-child { background: var(--ru-cyan); transform: scale(var(--ru-puls)); }
.rs-colon i:last-child { background: var(--ru-magenta); transform: scale(calc(2.4 - var(--ru-puls))); }

/* Ohne echtes Signal: sanfter Atem statt Takt (nur wenn Musik läuft) */
html:not([data-puls="echt"]) body[data-playing="true"] .rs-wm .d { animation: ru-dia .92s ease-in-out infinite; }
html:not([data-puls="echt"]) body[data-playing="true"] :is(.rs-wm .c, .rs-colon) i:first-child { animation: ru-p1 .92s ease-in-out infinite; }
html:not([data-puls="echt"]) body[data-playing="true"] :is(.rs-wm .c, .rs-colon) i:last-child { animation: ru-p2 .92s ease-in-out infinite; }
body[data-twitch="live"] .rs-colon i:last-child, body[data-live-dj="on"] .rs-colon i:last-child { background: var(--ru-magenta); }
.rs-wm.still .d, .rs-wm.still .c i, .rs-colon.still i { animation: none !important; transform: none; }
.rs-wm.still .d { transform: translateX(-50%) rotate(45deg); }

/* Frequenzbalken */
.rs-fq { display: flex; align-items: center; gap: 2px; height: 100%; width: 100%; }
.rs-fq i { display: block; flex: 1; height: 100%; transform-origin: center; background: currentColor; border-radius: 1px; transform: scaleY(.25); transition: transform .08s linear; }
html:not([data-puls="echt"]) body[data-playing="true"] .rs-fq:not(.still) i { animation: ru-bar 1.1s ease-in-out infinite; }
html:not([data-puls="echt"]) body[data-playing="true"] .rs-fq i:nth-child(2n) { animation-delay: .12s; animation-duration: .9s; }
html:not([data-puls="echt"]) body[data-playing="true"] .rs-fq i:nth-child(3n) { animation-delay: .26s; animation-duration: 1.3s; }
html:not([data-puls="echt"]) body[data-playing="true"] .rs-fq i:nth-child(5n) { animation-delay: .4s; animation-duration: .8s; }
html:not([data-puls="echt"]) body[data-playing="true"] .rs-fq i:nth-child(7n) { animation-delay: .55s; animation-duration: 1.5s; }
html:not([data-puls="echt"]) body[data-playing="true"] .rs-fq i:nth-child(11n) { animation-delay: .7s; animation-duration: .7s; }
.rs-fq.load i, [data-state="loading"] ~ * .rs-fq i { animation: ru-load 1.2s ease-in-out infinite !important; }

/* Motiv vollflächig + Tönung */
.rs-bleed { position: absolute; inset: -6% -6% 0 -6%; background-size: cover; background-position: center; filter: saturate(1.5) blur(3px); }
.rs-bleed img { width: 100%; height: 100%; object-fit: cover; }
.rs-tint { position: absolute; inset: 0; }
.rs-cover { border-radius: var(--ru-r-1); box-shadow: var(--ru-shadow-cover); object-fit: cover; background: var(--ru-ink-2); display: block; }

/* ---------------------------------------------------------------------
   Kopfzeile (RuHead)
   --------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40; margin: 0; border-radius: 0;
  background: color-mix(in srgb, var(--ru-ink) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(245,239,230,.25); box-shadow: none;
  padding-top: env(safe-area-inset-top);
}
.site-header .site-header__inner, .site-header__inner.wrap {
  max-width: none; height: 76px; padding: 0 var(--ru-gutter); margin: 0;
  display: flex; align-items: center; gap: 32px;
}
.site-header .brand { display: none !important; }
.site-header .rs-wm { font-size: 30px; flex: none; }
.site-header .nav { display: flex; gap: 22px; margin: 0; flex: 1 1 auto; min-width: 0; }
.site-header .nav a {
  font: 600 12px/1 var(--ru-f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ru-paper);
  opacity: .85; padding: 0 0 5px; border-bottom: 2px solid transparent; box-shadow: none; border-radius: 0; white-space: nowrap; background: none;
}
.site-header .nav a:hover { opacity: 1; color: var(--ru-paper); border-bottom-color: rgba(245,239,230,.4); }
.site-header .nav a.is-active { opacity: 1; border-bottom-color: var(--ru-paper); box-shadow: none; }
.site-header .nav .nav__extra, .site-header .nav .nav__kacheln, .site-header .nav .nav__fuss, .site-header .nav .nav__titel { display: none; }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 16px; font: 600 12px var(--ru-f-mono); letter-spacing: .08em; }

/* On-Air-Plakette → nur noch LIVE-Marke (Twitch oder Live-DJ) */
.onair-badge { display: none !important; }
.onair-badge.is-twitch, .onair-badge.is-live-dj {
  display: inline-flex !important; background: var(--ru-magenta); color: var(--ru-ink) !important; border: 0; border-radius: var(--ru-r-1);
  padding: 7px 10px; font: 900 11px/1 var(--ru-f-disp); letter-spacing: .04em; text-transform: uppercase; gap: 8px; align-items: center;
  box-shadow: none; max-width: 340px; text-decoration: none;
}
.onair-badge.is-twitch .onair-badge__eq, .onair-badge.is-live-dj .onair-badge__eq { display: none; }
.onair-badge.is-twitch::before, .onair-badge.is-live-dj::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ru-ink); animation: ru-p1 .92s ease-in-out infinite; flex: none; }
.onair-badge .onair-badge__k { display: none; }
.onair-badge.is-twitch .onair-badge__k, .onair-badge.is-live-dj .onair-badge__k { display: inline; font: inherit; color: inherit; letter-spacing: inherit; }
.onair-badge .onair-badge__show { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font: inherit; }

/* Sprachwahl DE EN FR als ruhige Mono-Zeile */
.lang-switch { background: none !important; border: 0 !important; padding: 0 !important; gap: 8px; border-radius: 0 !important; font-family: var(--ru-f-mono) !important; }
.lang-switch__item { padding: 2px 0 !important; border-radius: 0 !important; background: none !important; color: var(--ru-paper) !important; opacity: .5; font: 600 12px var(--ru-f-mono) !important; letter-spacing: .08em !important; }
.lang-switch__item:hover { opacity: .85; }
.lang-switch__item.is-active { opacity: 1; background: none !important; color: var(--ru-paper) !important; }

/* Club-Knopf = btn2 */
.club-link { background: none !important; border: 1.5px solid var(--ru-paper) !important; border-radius: var(--ru-r-1) !important; padding: 7px 12px !important; color: var(--ru-paper) !important; font: 600 12px/1 var(--ru-f-mono) !important; letter-spacing: .06em !important; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; box-shadow: none !important; }
.club-link:hover { background: var(--ru-paper) !important; color: var(--ru-ink) !important; }
.club-link__dot { width: 7px !important; height: 7px !important; border-radius: 50%; background: var(--ru-cyan) !important; box-shadow: none !important; }
.club-link[data-live="true"] .club-link__dot { background: var(--ru-magenta) !important; animation: ru-p1 .92s ease-in-out infinite; }
.pwa-install { background: var(--ru-paper) !important; color: var(--ru-ink) !important; border: 0 !important; border-radius: var(--ru-r-1) !important; font: 600 11px var(--ru-f-mono) !important; padding: 8px 10px !important; }
.site-header .nav-toggle { display: none; }

@media (max-width: 1320px) {
  .site-header .site-header__inner { gap: 22px; }
  .site-header .nav { gap: 16px; }
  .site-header .nav a { font-size: 11px; letter-spacing: .08em; }
}
@media (max-width: 1140px) {
  .site-header .nav a[data-nav="shop"], .site-header .nav a[data-nav="djs"] { display: none; }
}

/* ---------------------------------------------------------------------
   Player (RuPlayer, Desktop 84 px) / Mini (RuMini, Handy)
   --------------------------------------------------------------------- */
.player {
  position: fixed; z-index: 50; inset: auto 0 0 0 !important; height: var(--player-h) !important;
  display: flex !important; align-items: center; gap: 20px; padding: 0 var(--ru-gutter) env(safe-area-inset-bottom) !important;
  background: var(--ru-ink) !important; border: 0 !important; border-top: 1px solid rgba(245,239,230,.25) !important;
  border-radius: 0 !important; box-shadow: none !important; color: var(--ru-paper);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-sizing: content-box;
}
.player__viz { display: none !important; }
.player > audio { display: none; }
.player__scframe, .player__sphost { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden; }
.player__btn {
  order: 0; width: 52px !important; height: 52px !important; margin: 0 !important; flex: none; border-radius: var(--ru-r-1) !important;
  background: var(--ru-paper) !important; color: var(--ru-ink) !important; box-shadow: none !important; display: grid; place-items: center; filter: none !important;
}
.player__btn:hover { background: #fff !important; }
.player__btn .ico { width: 24px; height: 24px; }
body[data-playing="true"] .player__btn { background: var(--ru-paper) !important; }
.player__meta { order: 1; display: flex; align-items: center; gap: 16px; min-width: 0; flex: 0 1 auto; max-width: 42%; padding: 0 !important; }
.player__art { width: 52px !important; height: 52px !important; border-radius: var(--ru-r-1) !important; box-shadow: none !important; flex: none; object-fit: cover; }
.player__track { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.player__title { font: 800 16px/1.25 var(--ru-f-text) !important; color: var(--ru-paper) !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__artist { font: 500 13px/1.4 var(--ru-f-mono) !important; color: var(--ru-paper-70) !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__fq { order: 2; flex: 1 1 auto; height: 34px; margin: 0 10px; color: var(--ru-paper); min-width: 60px; }
.player__fq .rs-fq { gap: 3px; }
.player__fq .rs-fq i { opacity: .9; }
.player__side {
  order: 3; display: flex !important; align-items: center; gap: 18px !important; border: 0 !important; padding: 0 !important; flex: none;
  font: 600 12px var(--ru-f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ru-paper) !important;
}
.player__side button { color: var(--ru-paper) !important; opacity: .9; background: none !important; border: 0 !important; border-radius: var(--ru-r-1) !important; }
.player__side button:hover { opacity: 1; color: var(--ru-cyan) !important; }
.player__fav[aria-pressed="true"] { color: var(--ru-magenta) !important; opacity: 1; }
.player__fav[aria-pressed="true"] svg { fill: var(--ru-magenta); animation: ru-herz .5s ease; }
.player__listeners { font: 600 12px var(--ru-f-mono) !important; color: var(--ru-paper) !important; display: inline-flex !important; align-items: center; gap: 8px; letter-spacing: .06em; white-space: nowrap; }
.player__listeners::before { content: "" !important; width: 8px !important; height: 8px !important; border-radius: 50%; background: var(--ru-magenta) !important; box-shadow: none !important; animation: ru-p1 .92s ease-in-out infinite; display: block; }
.player__progress { position: absolute !important; left: 0 !important; right: 0 !important; top: -1px !important; bottom: auto !important; height: 2px !important; background: transparent !important; border-radius: 0 !important; }
.player__bar { background: var(--ru-cyan) !important; border-radius: 0 !important; height: 100%; transform-origin: left; }
.player__sleep-menu { background: var(--ru-ink-2) !important; border: 1px solid var(--ru-line) !important; border-radius: var(--ru-r-2) !important; box-shadow: var(--sh-2) !important; color: var(--ru-paper) !important; }
.player__sleep-menu button { font: 600 12px var(--ru-f-mono) !important; color: var(--ru-paper) !important; border-radius: var(--ru-r-1) !important; }
.player__sleep-menu button:hover { background: rgba(245,239,230,.12) !important; }
.player__mode-back { color: var(--ru-cyan) !important; }
/* Wartet/verbindet: Balken im Ladezustand */
.player:has(.player__btn[data-state="loading"]) .rs-fq i { animation: ru-load 1.2s ease-in-out infinite !important; }
body:not([data-playing="true"]) .player__fq .rs-fq i { transform: scaleY(.25); }

/* ---------------------------------------------------------------------
   App-Leiste (RuAppBar) + Mini-Player (RuMini) — Handy und Web-App
   --------------------------------------------------------------------- */
.tabbar { display: none; }
@media (max-width: 1180px) {
  .onair-badge .onair-badge__show { display: none; }
  .onair-badge.is-twitch .onair-badge__k, .onair-badge.is-live-dj .onair-badge__k { font-size: 0; }
  .onair-badge.is-twitch .onair-badge__k::after, .onair-badge.is-live-dj .onair-badge__k::after { content: "LIVE"; font-size: 11px; }
}
.site-header { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; }
.onair-badge { flex-shrink: 0; }
@media (max-width: 820px) {
  :root { --header-h: 58px; --player-h: 66px; --tabbar-h: 76px; --ru-gutter: 20px; }
  body { padding-bottom: calc(var(--player-h) + var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); }

  .site-header .site-header__inner { height: 58px; gap: 10px; padding: 0 20px; }
  .site-header .rs-wm { font-size: 26px; }
  .site-header .nav { display: none; }
  .site-header__actions { gap: 10px; }
  .site-header__actions .club-link, .site-header__actions .pwa-install { display: none !important; }
  .lang-switch__item { font-size: 11px !important; }
  .onair-badge.is-twitch, .onair-badge.is-live-dj { max-width: 150px; padding: 6px 8px; font-size: 10px; }
  .onair-badge .onair-badge__show { display: none; }
  .onair-badge.is-twitch .onair-badge__k, .onair-badge.is-live-dj .onair-badge__k { font-size: 0; }
  .onair-badge.is-twitch .onair-badge__k::after, .onair-badge.is-live-dj .onair-badge__k::after { content: "LIVE"; font-size: 10px; }

  /* Mini-Player: Elfenbein-Karte über der App-Leiste */
  .player {
    inset: auto 12px calc(var(--tabbar-h) + 6px + env(safe-area-inset-bottom)) 12px !important;
    height: 60px !important; padding: 10px 12px !important; gap: 12px; box-sizing: border-box;
    background: var(--ru-paper) !important; color: var(--ru-ink) !important; border: 0 !important; border-radius: var(--ru-r-1) !important; overflow: hidden;
    box-shadow: 0 18px 40px -18px rgba(0,0,0,.9) !important;
  }
  .player__btn { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
  .player__meta { max-width: none; flex: 1 1 auto; gap: 12px; }
  .player__art { width: 40px !important; height: 40px !important; border-radius: 3px !important; }
  .player__title { font-size: 14px !important; color: var(--ru-ink) !important; }
  .player__artist { font-size: 11px !important; color: rgba(13,10,31,.75) !important; }
  .player__fq { flex: 0 0 70px; height: 22px; margin: 0; color: var(--ru-ink); }
  .player__fq .rs-fq { gap: 2px; }
  .player__side { display: none !important; }
  .player__progress { top: auto !important; bottom: 0 !important; height: 3px !important; }
  .player__bar { background: var(--ru-ink) !important; }
  body:not([data-playing="true"]) .player__fq::after { content: "Pause"; }
  body:not([data-playing="true"]) .player__fq { display: flex; align-items: center; justify-content: flex-end; font: 600 11px var(--ru-f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
  body:not([data-playing="true"]) .player__fq .rs-fq { display: none; }
  body.nav-open .player { opacity: 0; pointer-events: none; }

  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    position: fixed; z-index: 55; left: 0; right: 0; bottom: 0;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 0 8px calc(8px + env(safe-area-inset-bottom));
    background: var(--ru-ink); border-top: 1px solid rgba(245,239,230,.25);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%;
    color: rgba(245,239,230,.65); font: 600 10px/1 var(--ru-f-mono); letter-spacing: .04em; text-transform: uppercase;
    background: none; border: 0; text-decoration: none; width: auto;
  }
  .tabbar .is-active, .tabbar a:hover { color: var(--ru-paper); }
  .tabbar .is-active svg { filter: none; }
  .tabbar .rs-ico { height: 14px; display: inline-flex; align-items: flex-end; justify-content: center; }
  .tabbar .rs-ico--live { font-size: 5px; }
  .tabbar .rs-ico--live .rs-colon { gap: 3px; font-size: 5px; }
  .tabbar .rs-ico--prog i { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 2px; display: block; }
  .tabbar .rs-ico--charts { gap: 2px; } .tabbar .rs-ico--charts i { width: 3px; background: currentColor; display: block; }
  .tabbar .rs-ico--mehr { gap: 3px; align-items: center; } .tabbar .rs-ico--mehr i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: block; }
  .tabbar__play { position: relative; }
  .tabbar__playbtn {
    width: 62px; height: 62px; border-radius: var(--ru-r-2); background: var(--ru-paper) !important; color: var(--ru-ink) !important;
    display: grid; place-items: center; margin-top: -24px; box-shadow: 0 0 0 6px var(--ru-ink) !important; transition: transform .12s;
  }
  .tabbar__play:active .tabbar__playbtn { transform: scale(.94); }
  .tabbar__playbtn svg { width: 28px; height: 28px; }
  .tabbar__playbtn .i-pause { display: none; }
  body[data-playing="true"] .tabbar__playbtn { background: var(--ru-paper) !important; }
  body[data-playing="true"] .tabbar__playbtn .i-play { display: none; }
  body[data-playing="true"] .tabbar__playbtn .i-pause { display: block; }
  .tabbar .nav-toggle { display: flex !important; }

  /* „Mehr“ = Vollbild-Blatt (Screen 15) */
  .site-header .nav.is-open {
    display: flex; position: fixed; z-index: 45; inset: calc(58px + env(safe-area-inset-top)) 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom)) 0;
    flex-direction: column; gap: 0; padding: 18px 20px 12px; background: var(--ru-ink); overflow-y: auto; border: 0; border-radius: 0; box-shadow: none; max-height: none;
  }
  .site-header .nav.is-open .nav__titel { display: block; font: 900 40px/1 var(--ru-f-disp); text-transform: uppercase; letter-spacing: -.04em; margin: 0 0 12px; }
  .site-header .nav.is-open .nav__kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
  .site-header .nav.is-open .nav__kacheln .rs-tile { gap: 8px; position: relative; }
  .site-header .nav.is-open .nav__kacheln .rs-tile b { font: 500 22px var(--ru-f-mono); text-transform: none; letter-spacing: 0; }
  .site-header .nav.is-open .nav__kacheln .rs-tile small { font: 500 10px var(--ru-f-mono); text-transform: none; opacity: .7; letter-spacing: 0; }
  .site-header .nav.is-open a:not(.rs-tile) {
    display: flex !important; justify-content: space-between; align-items: center; opacity: 1;
    font: 800 15px/1.2 var(--ru-f-text); letter-spacing: 0; text-transform: none; padding: 13px 0; border: 0; border-bottom: 1px solid var(--ru-line-2); border-radius: 0; color: var(--ru-paper);
  }
  .site-header .nav.is-open a:not(.rs-tile)::after { content: "⟶"; font: 500 13px var(--ru-f-mono); opacity: .8; }
  .site-header .nav.is-open a.is-active { border-bottom-color: var(--ru-line-2); color: var(--ru-cyan); }
  .site-header .nav.is-open a[data-nav="home"], .site-header .nav.is-open a[data-nav="programm"], .site-header .nav.is-open a[data-nav="charts"] { display: none !important; }
  .site-header .nav.is-open .nav__fuss { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; align-items: center; }
  .site-header .nav.is-open .nav__fuss a { border: 0 !important; padding: 0 !important; font: 600 11px/1.8 var(--ru-f-mono) !important; text-transform: uppercase !important; letter-spacing: .1em !important; opacity: .7 !important; }
  .site-header .nav.is-open .nav__fuss a::after { content: none !important; }
}

/* ---------------------------------------------------------------------
   Footer (Nacht, Wortmarke groß, Mono-Spalten)
   --------------------------------------------------------------------- */
.site-footer {
  margin: clamp(56px, 8vw, 110px) 0 0 !important; border-radius: 0 !important; background: var(--ru-ink) !important;
  border-top: 1px solid var(--ru-line) !important; color: var(--ru-paper); padding: 56px 0 40px;
}
.site-footer .wrap { max-width: var(--ru-wrap); padding-inline: var(--ru-gutter); }
.site-footer .rs-wm { font-size: clamp(34px, 4vw, 52px); margin-bottom: 30px; }
.site-footer .brand { display: none !important; }
.site-footer h3, .site-footer h4 { font: 600 11px/1.8 var(--ru-f-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--ru-paper) !important; opacity: .7; margin-bottom: 10px; }
.site-footer a { color: var(--ru-paper) !important; font: 500 14px/2 var(--ru-f-text); }
.site-footer a:hover { color: var(--ru-cyan) !important; }
.site-footer .meta, .site-footer p { color: var(--ru-paper-70) !important; }
.site-footer__bottom { border-top: 1px solid var(--ru-line-2) !important; font: 600 11px var(--ru-f-mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--ru-paper-70); }
.site-footer__bottom a { font: inherit !important; }
.newsletter-form__input { background: transparent !important; color: var(--ru-paper) !important; border: 1.5px solid var(--ru-line) !important; border-radius: var(--ru-r-1) !important; font-family: var(--ru-f-text) !important; }
.newsletter-form__btn { background: var(--ru-paper) !important; color: var(--ru-ink) !important; border: 0 !important; border-radius: var(--ru-r-1) !important; font: 900 12px var(--ru-f-disp) !important; text-transform: uppercase; }

/* ---------------------------------------------------------------------
   Twitch-Leiste + Fenster (nur bei echtem Live, kern.js)
   --------------------------------------------------------------------- */
.twitch-live {
  background: var(--ru-magenta) !important; color: var(--ru-ink) !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important;
  font: 600 12px var(--ru-f-mono) !important; letter-spacing: .04em;
}
.twitch-live strong { font: 900 12px var(--ru-f-disp) !important; text-transform: uppercase; }
.twitch-live__dot { background: var(--ru-ink) !important; box-shadow: none !important; }
.twitch-live__btn, .twitch-live__cta { background: var(--ru-ink) !important; color: var(--ru-paper) !important; border-radius: var(--ru-r-1) !important; border: 0 !important; font: 600 11px var(--ru-f-mono) !important; text-transform: uppercase; letter-spacing: .06em; }
.twitch-fenster { background: var(--ru-ink) !important; border: 1px solid var(--ru-line) !important; border-radius: var(--ru-r-2) !important; box-shadow: var(--ru-shadow-cover) !important; }
.twitch-fenster__kopf { font: 900 12px var(--ru-f-disp) !important; text-transform: uppercase; }
.twitch-fenster__kopf button, .twitch-fenster__fuss button, .twitch-fenster__fuss a { border-radius: var(--ru-r-1) !important; font: 600 11px var(--ru-f-mono) !important; text-transform: uppercase; letter-spacing: .06em; }
.twitch-fenster__laden { background: var(--ru-paper) !important; color: var(--ru-ink) !important; border-radius: var(--ru-r-1) !important; font: 900 13px var(--ru-f-disp) !important; text-transform: uppercase; }

/* Überschriften-Hilfen der Altseiten */
.section h2, .section__head h2, .cine-sec__title { font-family: var(--ru-f-disp) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: -.04em !important; }
.chip, .chips button, .chips a { border-radius: var(--ru-r-1) !important; font-family: var(--ru-f-mono) !important; }

/* ---------------------------------------------------------------------
   Animationen
   --------------------------------------------------------------------- */
@keyframes ru-p1 { 0%,100% { transform: scale(1) } 50% { transform: scale(1.4) } }
@keyframes ru-p2 { 0%,100% { transform: scale(1.4) } 50% { transform: scale(1) } }
@keyframes ru-dia { 0%,100% { transform: translateX(-50%) rotate(45deg) scale(1) } 50% { transform: translateX(-50%) rotate(45deg) scale(1.3) } }
@keyframes ru-bar { 0%,100% { transform: scaleY(.25) } 50% { transform: scaleY(1) } }
@keyframes ru-load { 0%,100% { transform: scaleY(.15); opacity: .4 } 50% { transform: scaleY(.6); opacity: 1 } }
@keyframes ru-ring { 0% { transform: scale(1); opacity: .7 } 100% { transform: scale(2.2); opacity: 0 } }
@keyframes ru-herz { 0% { transform: scale(1) } 40% { transform: scale(1.35) } 100% { transform: scale(1) } }
@keyframes ru-rein { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  :root { --ru-puls: 1 !important; }
}
html[data-bewegung="reduziert"] *, html[data-bewegung="reduziert"] *::before { animation: none !important; transition: none !important; }
html[data-bewegung="reduziert"] { --ru-puls: 1 !important; }

@media (display-mode: standalone) {
  .pwa-install { display: none !important; }
}

/* ---------------------------------------------------------------------
   Seitenkopf (inc/cine-hero.php → rr_cine_hero): Motiv + Tönung + Riesentitel
   --------------------------------------------------------------------- */
.rs-kopf { position: relative; overflow: hidden; isolation: isolate; min-height: clamp(300px, 42vh, 460px); display: flex; align-items: flex-end; margin: 0; border-bottom: 1px solid var(--ru-line-2); }
.rs-kopf--klein { min-height: clamp(200px, 26vh, 280px); }
.rs-kopf__bild { position: absolute; inset: 0; z-index: -2; }
.rs-kopf__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: saturate(1.25); }
.rs-kopf__tint { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, var(--ru-ink) 0%, rgba(13,10,31,.82) 38%, rgba(13,10,31,.35) 75%, color-mix(in srgb, var(--rs-kopf-tint, var(--ru-tint)) 38%, transparent) 100%),
    linear-gradient(90deg, rgba(13,10,31,.85) 0%, rgba(13,10,31,.2) 65%, transparent 100%); }
.rs-kopf__inhalt { width: 100%; padding-top: 56px; padding-bottom: 36px; }
.rs-kopf__lab { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; opacity: .9; }
.rs-kopf__colon { font-size: 5px; gap: 3px; }
.rs-kopf__titel { max-width: 16ch; }
.rs-kopf--klein .rs-kopf__titel { font-size: clamp(34px, 5vw, 64px); }
.rs-kopf__hl { color: var(--ru-paper-70); }
.rs-kopf__sub { max-width: 60ch; margin: 18px 0 0; font: 500 clamp(15px, 1.2vw, 18px)/1.55 var(--ru-f-text); color: var(--ru-paper-70); }
.rs-kopf__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
@media (max-width: 820px) {
  .rs-kopf { min-height: 300px; }
  .rs-kopf--klein { min-height: 190px; }
  .rs-kopf__inhalt { padding-top: 40px; padding-bottom: 24px; }
  .rs-kopf .rs-pt { font-size: clamp(34px, 10.5vw, 48px); }
}

/* „Mehr“-Blatt: backdrop-filter am Kopf würde das fixierte Blatt einsperren */
body.nav-open .site-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--ru-ink) !important; }
body.nav-open { overflow: hidden; }
@media (max-width: 820px) {
  .site-header .nav.is-open .nav__fuss .rs-seg { flex-basis: 100%; width: max-content; margin-bottom: 10px; }
  .site-header .nav.is-open .nav__fuss .rs-seg button { font: 600 11px var(--ru-f-mono); letter-spacing: .06em; text-transform: uppercase; }
}

/* Alter Riesen-Schriftzug im Footer (sunset.css) entfällt — die Wortmarke steht in der ersten Spalte */
.site-footer::before { content: none !important; display: none !important; }