/* =========================================================
   Radio auf der Startseite — ein Markup, drei Häute.
   CSS aus den Entwürfen übernommen (d-backstage.html, b-welttournee.html, c-stumpi.html, Abschnitt „Radio“),
   Tokens aus modi.css. Verhalten: js/radio.js (Zwei-Klick-Lösung für den Spotify-Player).
   ========================================================= */

/* ---------- Grundform (alle Modi) ---------- */
.radio-bereich { padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 44px); }
.radio { display: grid; grid-template-columns: 1.15fr 1fr; }
.radio-front { padding: clamp(16px, 3vw, 26px); min-width: 0; }
.radio-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.radio-anzeige:empty { display: none; }
.radio-skala { position: relative; height: 56px; margin-bottom: 16px; overflow: hidden; }
.radio-nadel { position: absolute; top: 5px; bottom: 5px; left: 50%; width: 4px; transform: translateX(-50%); transition: left .6s cubic-bezier(.3,1.5,.5,1); }
.radio-sender { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.radio-sender:empty { display: none; }
.radio-sender button,
.radio-mehr,
.radio-aus,
.radio-nochmal {
  all: unset; box-sizing: border-box; cursor: pointer; min-height: 44px;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.radio-sender button { padding: 9px 12px; min-width: 0; }
.radio-sender button:active { transform: translateY(2px); }
.radio-sender button b { display: block; }
.radio-sender button span { font-size: 13px; opacity: .8; }
.radio-mehr { display: block; margin-top: 10px; padding: 8px 2px; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.radio-mehr[hidden] { display: none; }
.radio-player { padding: clamp(16px, 3vw, 26px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; min-height: 250px; min-width: 0; }
.radio-player iframe { display: block; width: 100%; height: 352px; border: 0; border-radius: 12px; }
.radio-an { all: unset; box-sizing: border-box; cursor: pointer; min-height: 44px; text-align: center; }
.radio-an[hidden], .radio-aus[hidden], .radio-nochmal[hidden] { display: none; }
.radio-aus, .radio-nochmal { padding: 8px 14px; font-size: 14px; font-weight: 700; border: 2px solid currentColor; }
.radio-hinweis { font-weight: 600; max-width: 42ch; }
.radio-datenschutz { font-size: 12px; line-height: 1.45; max-width: 42ch; }
.radio :focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

@media (max-width: 820px) {
  .radio { grid-template-columns: 1fr; }
  .radio-player { min-height: 0; }
}

/* =============== Backstage: Creme-Radio im dunklen Abschnitt =============== */
html[data-modus="backstage"] .radio-bereich { background: var(--kohle); color: var(--creme); border-top: 3px solid var(--schwarz); --fokus: var(--gelb); }
html[data-modus="backstage"] .radio-bereich .unterzeile { color: var(--gelb); }
html[data-modus="backstage"] .radio {
  background: var(--creme); color: var(--schwarz); --fokus: var(--schwarz);
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
}
html[data-modus="backstage"] .radio-front { border-right: 3px dashed var(--schwarz); }
html[data-modus="backstage"] .radio-marke { font: 34px/1 var(--titel); text-transform: uppercase; }
html[data-modus="backstage"] .radio-anzeige { font: 700 12px var(--text); letter-spacing: .1em; text-transform: uppercase; background: var(--schwarz); color: var(--gelb); padding: 5px 9px; }
html[data-modus="backstage"] .radio-skala { background: repeating-linear-gradient(90deg, var(--creme) 0 2px, transparent 2px 15px) left bottom / 100% 14px no-repeat, var(--schwarz); border: 3px solid var(--schwarz); }
html[data-modus="backstage"] .radio-nadel { width: 5px; background: var(--rot); box-shadow: 0 0 10px var(--rot); }
html[data-modus="backstage"] .radio-sender button { border: 3px solid var(--schwarz); font: 14px var(--text); }
html[data-modus="backstage"] .radio-sender button b { font: 26px/1 var(--titel); }
html[data-modus="backstage"] .radio-sender button:hover { background: var(--creme-dunkel); }
html[data-modus="backstage"] .radio-sender button[aria-pressed="true"] { background: var(--rot); color: var(--creme); border-color: var(--rot); }
html[data-modus="backstage"] .radio-an { font: 28px/1 var(--titel); text-transform: uppercase; background: var(--rot); color: var(--creme); padding: 14px 22px; box-shadow: 5px 5px 0 var(--schwarz); }
html[data-modus="backstage"] .radio-an:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--schwarz); }
html[data-modus="backstage"] .radio-aus,
html[data-modus="backstage"] .radio-nochmal { font: 18px/1 var(--titel); text-transform: uppercase; }
html[data-modus="backstage"] .radio-aus:hover,
html[data-modus="backstage"] .radio-nochmal:hover { background: var(--creme-dunkel); }
html[data-modus="backstage"] .radio-datenschutz,
html[data-modus="backstage"] .radio-hinweis { color: var(--gedaempft); }
html[data-modus="backstage"] .radio-mehr { color: var(--rot-text); }
html[data-modus="backstage"] .radio.laeuft .radio-nadel { animation: radio-zittern .12s steps(2) infinite; }
@keyframes radio-zittern { to { margin-left: 1px; } }
@media (max-width: 820px) {
  html[data-modus="backstage"] .radio-front { border-right: 0; border-bottom: 3px dashed var(--schwarz); }
  html[data-modus="backstage"] .radio-marke { font-size: 28px; }
}

/* =============== Welttournee: Röhrenradio bei Nacht =============== */
html[data-modus="welttournee"] .radio-bereich { border-top: 1px solid var(--kante); }
html[data-modus="welttournee"] .radio { background: linear-gradient(180deg, #221b16, var(--asphalt)); border: 1px solid var(--kante); border-radius: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; }
html[data-modus="welttournee"] .radio-front { border-right: 1px solid var(--kante); }
html[data-modus="welttournee"] .radio-marke { font: 30px/1 var(--metal); color: var(--chrom); }
html[data-modus="welttournee"] .radio-anzeige { font: 700 13px var(--block); letter-spacing: .16em; text-transform: uppercase; color: var(--glut); }
html[data-modus="welttournee"] .radio-skala { border-radius: 8px; border: 1px solid #000; background: repeating-linear-gradient(90deg, rgba(255,181,46,.55) 0 1px, transparent 1px 14px) left bottom / 100% 12px no-repeat, radial-gradient(ellipse at 50% 120%, rgba(255,91,26,.45), transparent 70%), #120d0a; box-shadow: inset 0 0 20px rgba(0,0,0,.8); }
html[data-modus="welttournee"] .radio-nadel { background: #fff3e0; box-shadow: 0 0 10px var(--feuer), 0 0 2px #fff; }
html[data-modus="welttournee"] .radio-sender button { border: 1px solid var(--kante); color: var(--chrom); font: 14px var(--text); }
html[data-modus="welttournee"] .radio-sender button b { font: 900 24px/1 var(--block); }
html[data-modus="welttournee"] .radio-sender button:hover { border-color: var(--feuer); }
html[data-modus="welttournee"] .radio-sender button[aria-pressed="true"] { background: linear-gradient(180deg, var(--glut), var(--feuer)); color: var(--nacht); border-color: transparent; }
html[data-modus="welttournee"] .radio-an { font: 700 15px var(--block); letter-spacing: .16em; text-transform: uppercase; padding: 13px 20px; color: var(--nacht); background: linear-gradient(180deg, var(--glut), var(--feuer)); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
html[data-modus="welttournee"] .radio-an:hover { filter: brightness(1.15); }
/* Die Schräge würde den Fokusrahmen abschneiden */
html[data-modus="welttournee"] .radio-an:focus-visible { clip-path: none; }
html[data-modus="welttournee"] .radio-aus,
html[data-modus="welttournee"] .radio-nochmal { font: 700 13px var(--block); letter-spacing: .14em; text-transform: uppercase; color: var(--chrom); border: 1px solid var(--grau); }
html[data-modus="welttournee"] .radio-aus:hover,
html[data-modus="welttournee"] .radio-nochmal:hover { border-color: var(--feuer); }
html[data-modus="welttournee"] .radio-datenschutz,
html[data-modus="welttournee"] .radio-hinweis { color: var(--grau); }
html[data-modus="welttournee"] .radio-mehr { color: var(--glut); font-family: var(--block); letter-spacing: .06em; }
html[data-modus="welttournee"] .radio.laeuft .radio-skala { animation: radio-glimmen-wt 1.6s ease-in-out infinite alternate; }
@keyframes radio-glimmen-wt { to { box-shadow: inset 0 0 20px rgba(0,0,0,.8), 0 0 22px rgba(255,91,26,.55); } }
@media (max-width: 820px) {
  html[data-modus="welttournee"] .radio-front { border-right: 0; border-bottom: 1px solid var(--kante); }
}

/* =============== Stumpi: Ghettoblaster in Schwarz-Gelb =============== */
html[data-modus="stumpi"] .radio-bereich { border-top: 2px dashed var(--kante); }
html[data-modus="stumpi"] .radio { background: var(--schwarz); color: var(--weiss); border-radius: 22px; border: 4px solid var(--gelb); box-shadow: 10px 10px 0 var(--rot); position: relative; margin-top: 16px; }
/* Tragegriff */
html[data-modus="stumpi"] .radio::before { content: ""; position: absolute; top: -20px; left: 50%; width: 46%; height: 16px; transform: translateX(-50%); border: 4px solid var(--gelb); border-bottom: 0; border-radius: 12px 12px 0 0; }
html[data-modus="stumpi"] .radio-front { border-right: 2px dashed var(--kante); }
html[data-modus="stumpi"] .radio-marke { font: 22px/1 var(--display); color: var(--gelb); }
html[data-modus="stumpi"] .radio-anzeige { font: 800 12px var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--schwarz); background: var(--gelb); padding: 5px 9px; }
html[data-modus="stumpi"] .radio-skala { border-radius: 10px; background: repeating-linear-gradient(90deg, var(--schwarz) 0 2px, transparent 2px 15px) left bottom / 100% 14px no-repeat, var(--gelb); border: 3px solid var(--weiss); }
html[data-modus="stumpi"] .radio-nadel { background: var(--rot); width: 5px; }
html[data-modus="stumpi"] .radio-sender button { background: var(--kohle); border: 2px solid var(--kante); color: var(--weiss); font: 14px var(--text); border-radius: 8px; }
html[data-modus="stumpi"] .radio-sender button b { font: 20px/1.1 var(--display); }
html[data-modus="stumpi"] .radio-sender button:hover { border-color: var(--gelb); }
html[data-modus="stumpi"] .radio-sender button[aria-pressed="true"] { background: var(--gelb); color: var(--schwarz); border-color: var(--gelb); }
/* Lautsprecher, bis das Radio läuft */
html[data-modus="stumpi"] .radio-player { background: radial-gradient(circle at 50% 50%, #242424 0 38%, #111 39% 41%, #1a1a1a 42% 60%, transparent 61%) center / 220px 220px no-repeat; }
html[data-modus="stumpi"] .radio.laeuft .radio-player { background: none; }
html[data-modus="stumpi"] .radio-an { font: 18px var(--display); text-transform: uppercase; padding: 14px 20px; background: var(--gelb); color: var(--schwarz); border: 3px solid var(--schwarz); box-shadow: 4px 4px 0 var(--rot); align-self: center; }
html[data-modus="stumpi"] .radio-an:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--rot); }
html[data-modus="stumpi"] .radio-aus,
html[data-modus="stumpi"] .radio-nochmal { font: 13px var(--display); text-transform: uppercase; color: var(--gelb); border: 3px solid var(--gelb); align-self: center; }
html[data-modus="stumpi"] .radio-datenschutz,
html[data-modus="stumpi"] .radio-hinweis { color: var(--grau); align-self: center; text-align: center; }
html[data-modus="stumpi"] .radio-mehr { color: var(--gelb); }
html[data-modus="stumpi"] .radio.laeuft .radio-skala { animation: radio-glimmen-st 1.6s ease-in-out infinite alternate; }
@keyframes radio-glimmen-st { to { box-shadow: 0 0 22px rgba(255,212,0,.7); } }
@media (max-width: 820px) {
  html[data-modus="stumpi"] .radio-front { border-right: 0; border-bottom: 2px dashed var(--kante); }
  html[data-modus="stumpi"] .radio { box-shadow: 6px 6px 0 var(--rot); }
}