/* ================================================================
   8XREGIO-RADIO im Magazin — DERSELBE PLAYER WIE IM PORTAL
   RADIO_FREIGABE_2026_09_11 — Franz 11.09.2026 (777): "ich moechte genau den Player
   auf unseren Seiten! KEinen neuen!!!"

   Die Regeln unten sind Zeile fuer Zeile aus app.html uebernommen (Stand 11.09.2026:
   .rp-szene, .rp-cover, .rp-vinyl, .rp-label, rp-drehen, #rp-leiste mit rp-dock,
   .rp-album als Pille). Wer den Portal-Player aendert, zieht diese Datei nach —
   sonst laufen zwei Player auseinander. Nur der Behaelter .rs traegt die Portalfarben
   als Token, weil die Magazinseiten sie nicht kennen.
   Senderwahl (Franz: "wie BR1 BR2 BR3") = die Album-Pillen des Portals.
   ================================================================ */
/* Farben: HELL wie das Magazin - Franz 777 (Bild, 11.09. abends): "Den Hintergrund vom Radio im Magazin
   nicht blau sondern unseren goldfarbenen" - der helle, warme Kasten mit goldener Oberkante.
   Die Token sind die hellen Portal-Token, wie sie das Magazin schon fuer #tb-container benutzt. */
.rs,.rp-leiste.rs-frei{--c-panel:#fff;--c-panel-border:rgba(201,166,87,.45);--c-text:#1b2733;--c-text-muted:#5c6b7c;--c-gold:#c9a657;--c-gold-dark:#8a6f1f;}
.rs{position:relative;min-width:0;contain:inline-size; /* der Kasten darf die Spalte nie breiter machen (Handy) */
  border-radius:16px;padding:14px 14px 12px;margin:0 0 16px;color:var(--c-text);
  border:1px solid #e1e6ec;border-top:3px solid var(--c-gold);background:#eeede8;}
.rs .rs-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;}
/* Kopfzeile = der Kicker des Artikels (.article .kicker: 12.5px / 700 / 2.5px / gold) - Franz 11.09. abends: gleiche Schrifthoehe */
.rs .rs-kopf .rs-titel{font-size:12.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--c-gold);}
/* Das Haus als Text, nicht als Pille (Franz) - Klick spielt seinen Song; gold, wenn der Haus-Sender laeuft */
.rs .rs-haus{font-size:1.05rem;font-weight:800;color:var(--c-text);margin:0 0 10px;cursor:pointer;line-height:1.25;}
.rs .rs-haus.rp-auf{color:var(--c-gold-dark);}
.rs .rs-haus.rs-leer-haus{color:var(--c-text-muted);cursor:default;}
.rs .rs-leer{font-size:.82rem;color:var(--c-text-muted);text-align:center;padding:8px 0;}

/* ---- Senderwahl: der Umschalter des Magazins (.mp-toggle in den Magazin-Startseiten: "Aus deiner Region |
   Deutschlandweit") - Franz 777 (Bild): "sowas waere gut mit den drei Bereichen, Regio, Deutschland, Welt".
   Regeln 1:1 uebernommen, nur der aktive Teil heisst hier .rp-auf. ---------------------------------- */
.rs .rp-alben{display:flex;width:100%;min-width:0;background:#fff;border:1px solid rgba(201,166,87,.5);border-radius:99px;overflow:hidden;font-size:.76rem;font-weight:700;margin:0 0 12px;box-sizing:border-box;}
.rs .rp-album{background:transparent;border:none;color:inherit;padding:8px 6px;cursor:pointer;font:inherit;white-space:nowrap;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:center;}
.rs .rp-album.rp-auf{background:var(--c-gold);color:#00112e;}
.rs .rp-album:disabled{opacity:.4;cursor:default;}
.rs .rp-album .rs-flagge{display:inline-block;width:1.15em;height:.8em;border-radius:2px;vertical-align:-.08em;background:linear-gradient(180deg,#000 0 33.34%,#DD0000 33.34% 66.67%,#FFCE00 66.67% 100%);}
@media(max-width:640px){ .rs .rp-album{padding:8px 4px;font-size:.68rem;} }

/* ---- Buehne: Cover + Platte (1:1 Portal) ------------------------------------------- */
.rs .rp-szene{position:relative;width:min(100%,520px);aspect-ratio:13/8;margin:0 auto;cursor:pointer;}
.rs .rp-cover{position:absolute;left:0;top:0;width:61.5%;aspect-ratio:1/1;border-radius:10px;z-index:2;
  object-fit:cover;background:#0b1830;box-shadow:0 10px 30px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;font-size:3rem;overflow:hidden;}
.rs .rp-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.rs .rp-vinyl{position:absolute;left:38%;top:3%;width:58%;aspect-ratio:1/1;border-radius:50%;z-index:1;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 0 6%, transparent 6.5%),
    repeating-radial-gradient(circle at 50% 50%, #141414 0 1.5px, #232323 1.5px 3px);
  box-shadow:0 8px 26px rgba(0,0,0,.55), inset 0 0 0 2px #050505;
  animation:rp-drehen 2.4s linear infinite;animation-play-state:paused;}
.rs .rp-vinyl::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,255,255,.10) 0 8%, transparent 8% 50%, rgba(255,255,255,.07) 50% 58%, transparent 58%);}
.rs .rp-vinyl.laeuft{animation-play-state:running;}
.rs .rp-label{position:absolute;inset:34%;border-radius:50%;background:#c9a227 center/cover no-repeat;border:3px solid #111;
  box-shadow:0 0 0 2px #2a2a2a;}
.rs .rp-label::after{content:'';position:absolute;left:50%;top:50%;width:9%;height:9%;transform:translate(-50%,-50%);border-radius:50%;background:#0b0b0b;}
@keyframes rp-drehen{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* ---- Die EINE Bedienleiste, angedockt unter dem Cover (1:1 Portal, #rp-leiste.rp-dock) ---- */
.rs .rp-leiste{display:flex;align-items:center;gap:10px;
  border:1px solid var(--c-gold);border-radius:999px;padding:6px 12px 6px 6px;max-width:100%;box-sizing:border-box;margin:14px auto 0;
  background:linear-gradient(90deg, rgba(201,162,39,.32) 0, rgba(201,162,39,.32) var(--rp-p,0%), transparent var(--rp-p,0%)), var(--c-panel);cursor:pointer;}
/* Schwebend unten am Bildschirmrand, sobald der Player nicht mehr zu sehen ist (1:1 #rp-leiste im Portal:
   fixed, mittig, bottom 12px, z-index 60). Franz: "muss die Menueleiste / Pille wie im Portal unten am
   Bildschirmrand kleben bleiben." */
.rp-leiste.rs-frei{display:flex;align-items:center;gap:10px;position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:60;
  border:1px solid var(--c-gold);border-radius:999px;padding:6px 12px 6px 6px;box-shadow:0 8px 28px rgba(0,0,0,.45);max-width:min(96vw,640px);box-sizing:border-box;margin:0;
  color:var(--c-text);font-family:inherit;
  background:linear-gradient(90deg, rgba(201,162,39,.32) 0, rgba(201,162,39,.32) var(--rp-p,0%), transparent var(--rp-p,0%)), var(--c-panel);cursor:pointer;}
.rs .rp-leiste img,.rs .rp-leiste .rp-mini,.rp-leiste.rs-frei img,.rp-leiste.rs-frei .rp-mini{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#0b1830;flex:0 0 34px;display:flex;align-items:center;justify-content:center;}
.rs .rp-leiste img.laeuft,.rp-leiste.rs-frei img.laeuft{animation:rp-drehen 2.4s linear infinite;}
.rs .rp-leiste .rp-l-t{font-size:.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0;cursor:default;}
.rp-leiste.rs-frei .rp-l-t{font-size:.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw;cursor:pointer;}
.rs .rp-leiste .rp-l-z,.rp-leiste.rs-frei .rp-l-z{font-size:.72rem;color:var(--c-text-muted);white-space:nowrap;}
.rs .rp-leiste button,.rp-leiste.rs-frei button{border:none;background:transparent;color:var(--c-text);cursor:pointer;font-size:1rem;padding:2px 4px;line-height:1;font-family:inherit;}
.rs .rp-leiste button.rp-auf,.rp-leiste.rs-frei button.rp-auf{color:var(--c-gold);}
.rs .rp-leiste button:disabled,.rp-leiste.rs-frei button:disabled{opacity:.35;cursor:default;}
.rs .rs-hinweis{font-size:.66rem;color:var(--c-text-muted);margin-top:10px;letter-spacing:.3px;}

/* Handy: Cover 80 % und Platte wie im Portal (RADIO_HANDY_2026_09_10) - aber die Szene nur so hoch wie das Cover
   (5/4 statt 1/1): Franz 12.09.: "Am Handy ist unter dem Cover zur Bedienleiste zu viel Platz - so wie am PC bitte."
   Gemessen vorher: 77 px Luecke (63 leer + 14 Rand), am PC 14 px. Jetzt am Handy ebenfalls 14 px. */
@media(max-width:640px){ .rs .rp-szene{aspect-ratio:5/4;} .rs .rp-cover{width:80%;} .rs .rp-vinyl{left:30%;top:10%;width:66%;}
  .rs .rp-leiste .rp-l-z,.rp-leiste.rs-frei .rp-l-z{display:none;} }

/* REGIO_RADIO_2026_09_12: Player OHNE eigenen Kasten - wenn der Abschnitt selbst der Container ist
   (Regionalmagazin #radio: links Text, rechts der Player). Franz: "Ob es in einer Kachel sein muss bitte
   pruefen" - nein: sonst Kachel in der Kachel. Kopfzeile und Hinweis stehen dann im Text links. */
.rs.rs-nackt{background:none;border:0;padding:0;margin:0;border-radius:0;}
.rs.rs-nackt .rs-kopf,.rs.rs-nackt .rs-hinweis{display:none;}
/* Senderwahl und Leiste buendig mit der Buehne (max. 520 px, mittig) */
.rs.rs-nackt .rp-alben,.rs.rs-nackt .rp-leiste{max-width:520px;margin-left:auto;margin-right:auto;}
.rs.rs-nackt .rp-alben{display:flex;}