/*
 * Radio GUDE Webplayer – die Oberfläche (Issue #112).
 *
 * Eine App und keine Webseite. Das ist keine Stilfrage, sondern die Vorgabe
 * des Auftrags, und sie hat konkrete Folgen:
 *
 *  - Es gibt **einen** Bildschirm, und er füllt genau das Fenster. Gescrollt
 *    wird nirgends im Ganzen; was nicht passt, bekommt einen eigenen
 *    Bildlauf (der Sendeplan) oder wird kleiner (Cover, Schriftgrade).
 *  - Die Fläche ist dunkel und bleibt es. Ein heller Systemmodus schaltet
 *    hier nichts um – ein Radio ist kein Dokument.
 *  - Die Atmosphäre kommt aus dem Cover: dasselbe Bild, groß, weichgezeichnet
 *    und abgedunkelt hinter allem. Keine gerechnete Farbe, kein Canvas – das
 *    Cover liegt auf radio-gude.de und wäre in einem Canvas nicht auslesbar.
 *
 * Die Markenfarbe steht über der Atmosphäre (Martin, 12.09.2026)
 * ---------------------------------------------------------------
 * Aus der Abnahme kamen zwei Sätze, die zusammengehören: Der dynamische
 * Hintergrund aus den Coverfarben **bleibt** – weich, gedämpft, dunkel. Und:
 * „Radio-GUDE-Rot #da0000 muss als feste Markenfarbe deutlich stärker sichtbar
 * bleiben, unabhängig davon, welche Coverfarben gerade dominieren."
 *
 * Beides zugleich geht nur, wenn das Rot **nicht** aus dem Bild kommt. Es
 * liegt deshalb an festen Stellen, die kein Cover erreicht:
 *
 *   1. eine durchgehende rote Kante ganz oben (`.rgp-body::before`) – das
 *      Senderzeichen, das immer da ist;
 *   2. ein roter Schimmer im Schleier über **jedem** Cover, nicht nur im
 *      Rückfall;
 *   3. die Bedienelemente selbst: Play-Knopf, LIVE-Marke, Coverring,
 *      Panelkante, Chat-Knopf, Fortschritt, Marken und Fokus.
 *
 * Die dritte Gruppe zieht an, sobald wirklich Ton läuft (`data-ton="1"` am
 * Körper): Ein Radio, das spielt, darf man ansehen. Das ist derselbe Gedanke
 * wie bei der LIVE-Marke, nur konsequent über die ganze Oberfläche.
 *
 * Fünf Formate, und jedes ist eigens gebaut – nicht eines gedreht:
 *
 *  1. Telefon hochkant      Grundfassung dieser Datei
 *  2. Telefon quer          `(orientation: landscape) and (max-height: 540px)`
 *  3. Tablet hochkant       `(min-width: 700px) and (orientation: portrait)`
 *  4. Tablet quer           `(min-width: 900px)`  – zwei Spalten
 *  5. Schreibtisch          `(min-width: 1200px)` – dieselben zwei Spalten,
 *                           großzügiger, mit stehendem Sendeplan
 *
 * Die 44-px-Tippfläche aus Issue #35 gilt hier wie überall; der Play-Knopf
 * ist deutlich größer, weil er auf dem Telefon das Bedienelement ist.
 */

/* ══════════════════════════════════════════════════════════════════════════
   Grundwerte
   ══════════════════════════════════════════════════════════════════════════ */

.rgp {
    /* Die Hausfarbe. Sie steht ein zweites Mal in `app/routers/player.py`
       (das Manifest kann kein Stylesheet lesen); die Prüfung vergleicht. */
    --rgp-rot: #da0000;
    --rgp-rot-hell: #ff3b30;
    --rgp-rot-tief: #9d0000;

    /* Die Markenfarbe in ihren Abstufungen – eine Zeile je Aufgabe, damit
       „mehr Rot" nicht heißt, an zwanzig Stellen eine Zahl zu ändern. */
    --rgp-rot-flaeche: rgba(218, 0, 0, 0.22);
    --rgp-rot-kante: rgba(218, 0, 0, 0.55);
    --rgp-rot-schimmer: rgba(218, 0, 0, 0.34);

    --rgp-flaeche: #0b0b0d;
    --rgp-karte: rgba(255, 255, 255, 0.07);
    --rgp-kante: rgba(255, 255, 255, 0.13);
    --rgp-text: #f5f5f7;
    --rgp-gedaempft: rgba(245, 245, 247, 0.62);
    --rgp-leise: rgba(245, 245, 247, 0.42);

    --rgp-rand: 20px;
    --rgp-radius: 18px;
    --rgp-tippflaeche: 44px;

    /* Die sichere Fläche. Sie steht als eigene Größe da, damit jede Regel
       darunter sie addieren kann, statt `env()` zu wiederholen. */
    --rgp-sicher-oben: env(safe-area-inset-top, 0px);
    --rgp-sicher-unten: env(safe-area-inset-bottom, 0px);
    --rgp-sicher-links: env(safe-area-inset-left, 0px);
    --rgp-sicher-rechts: env(safe-area-inset-right, 0px);

    color-scheme: dark;
    background: var(--rgp-flaeche);
    /* 100dvh statt 100vh: Auf dem Telefon wächst und schrumpft die
       Adressleiste, und mit `vh` stünde die Bedienung mal unter dem Rand. */
    height: 100%;
}

*,
*::before,
*::after { box-sizing: border-box; }

.rgp-body {
    margin: 0;
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
    background: var(--rgp-flaeche);
    color: var(--rgp-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    /* Ein Doppeltipp auf das Cover soll den Display-Modus umschalten und
       nicht hineinzoomen. */
    touch-action: manipulation;
}

/*
 * `hidden` muss `hidden` bleiben.
 *
 * Mehrere Bedienelemente dieser App stehen im Dokument und werden erst
 * freigegeben, wenn die Plattform sie wirklich kann – Lautstärke, AirPlay,
 * Teilen. Das Attribut allein genügt dafür nicht: Es setzt `display: none`
 * aus dem Browser-Stylesheet, und jede Regel hier mit `display: grid` oder
 * `display: flex` gewinnt gegen sie. Ohne diese Zeile stünde auf dem
 * Schreibtisch ein AirPlay-Knopf, den es dort nicht gibt – genau die
 * Fake-Funktionalität, die der Auftrag ausschließt.
 */
.rgp-body [hidden] { display: none !important; }

/*
 * Die rote Kante ganz oben – das Senderzeichen dieser App.
 *
 * Sie ist der eine Ort, an dem das Radio-GUDE-Rot völlig unabhängig vom Cover
 * steht: über der Bühne, über dem Panel, über dem Display-Modus. Ein dunkles
 * Cover, ein blaues, ein grünes – die Kante bleibt. Sie sitzt in der sicheren
 * Fläche, damit sie auf dem iPhone nicht unter der Statusleiste verschwindet,
 * und nimmt keine Tipps entgegen.
 */
.rgp-body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--rgp-sicher-oben) + 3px);
    z-index: 8;
    background: linear-gradient(90deg,
        var(--rgp-rot-tief), var(--rgp-rot) 30%,
        var(--rgp-rot-hell) 52%, var(--rgp-rot) 74%, var(--rgp-rot-tief));
    pointer-events: none;
}

.rgp-nurlesen {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Der Hintergrund aus dem Cover
   ══════════════════════════════════════════════════════════════════════════ */

.rgp-hintergrund {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--rgp-flaeche);
}

.rgp-hintergrund__ebene {
    position: absolute;
    /* Über den Rand hinaus: Ein weichgezeichnetes Bild wird an seinen Kanten
       durchsichtig, und darunter käme die nackte Fläche zum Vorschein. */
    inset: -12%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(48px) saturate(1.5);
    transform: scale(1.15);
    opacity: 0;
    transition: opacity 900ms ease;
    will-change: opacity;
}

.rgp-hintergrund__ebene.is-aktiv { opacity: 1; }

/*
 * Der Schleier. Ohne ihn stünde weißer Text auf einem hellen Cover – und seit
 * dem 12.09.2026 trägt er zusätzlich die Markenfarbe.
 *
 * Die beiden roten Verläufe liegen **über** dem Cover und sind von ihm
 * unabhängig: oben ein Schimmer, unten ein Saum. Damit bleibt die Atmosphäre
 * aus den Coverfarben erhalten – sie scheint durch –, und trotzdem ist jede
 * Ansicht auf den ersten Blick Radio GUDE und nicht die Farbstimmung einer
 * Plattenhülle. Genau das war Martins Ergänzung zur Abnahme.
 */
.rgp-hintergrund__schleier {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(150% 78% at 50% -12%,
            var(--rgp-rot-schimmer), rgba(218, 0, 0, 0) 60%),
        radial-gradient(130% 62% at 50% 112%,
            rgba(218, 0, 0, 0.24), rgba(218, 0, 0, 0) 58%),
        radial-gradient(120% 90% at 50% 12%, rgba(11, 11, 13, 0.30), rgba(11, 11, 13, 0.84) 72%),
        linear-gradient(180deg, rgba(11, 11, 13, 0.50), rgba(11, 11, 13, 0.90));
}

/* Ohne Cover trägt die Fläche das Branding allein – kein schwarzes Blatt. */
.rgp-body[data-cover="fallback"] .rgp-hintergrund__schleier {
    background:
        radial-gradient(130% 92% at 50% -6%, rgba(218, 0, 0, 0.46), rgba(11, 11, 13, 0.90) 66%),
        radial-gradient(130% 62% at 50% 112%, rgba(218, 0, 0, 0.28), rgba(218, 0, 0, 0) 58%),
        linear-gradient(180deg, rgba(11, 11, 13, 0.50), rgba(11, 11, 13, 0.94));
}

/* ══════════════════════════════════════════════════════════════════════════
   Die Bühne – Telefon hochkant (Grundfassung)
   ══════════════════════════════════════════════════════════════════════════ */

.rgp-buehne {
    position: relative;
    z-index: 1;
    height: 100dvh;
    display: grid;
    /* Kopf – Cover – Titel – Bedienung. Das Cover bekommt den Rest und ist
       damit so groß wie möglich; genau das verlangt der Auftrag für das
       Telefon im Hochformat. */
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 12px;
    /* Unten der Platz für den zusammengeschobenen Sendeplan. Er ist `fixed`
       und nimmt deshalb keine Zeile im Raster ein – ohne diesen Abstand läge
       er über dem Play-Knopf. */
    padding:
        calc(var(--rgp-sicher-oben) + 14px)
        calc(var(--rgp-sicher-rechts) + var(--rgp-rand))
        calc(var(--rgp-griffhoehe, 84px) + var(--rgp-sicher-unten) + 6px)
        calc(var(--rgp-sicher-links) + var(--rgp-rand));
}

/* ── Kopf ──────────────────────────────────────────────────────────────── */

.rgp-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
}

.rgp-marke {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.rgp-marke__signet {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: block;
    /* Der rote Ring gehört zur Marke und nicht zum Bild: Das Signet selbst ist
       rot auf dunkel und verschwindet sonst auf einem dunklen Cover. */
    box-shadow: 0 0 0 1.5px var(--rgp-rot-kante);
}

.rgp-marke__name { color: var(--rgp-text); }

/* Der rote Strich unter dem Sendernamen – klein, fest, coverunabhängig. */
.rgp-marke__name::after {
    content: "";
    display: block;
    height: 2px;
    margin-top: 3px;
    border-radius: 1px;
    background: var(--rgp-rot);
}

/* Die LIVE-Marke: dezent, ohne Blinken und ohne Verlauf. Sie ist gedämpft,
   solange nichts läuft, und leuchtet erst, wenn wirklich Ton kommt. */
.rgp-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border: 1px solid var(--rgp-kante);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--rgp-leise);
    background: rgba(0, 0, 0, 0.25);
    transition: color 300ms ease, border-color 300ms ease;
}

.rgp-live__punkt {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* Auf Sendung ist die Marke rot gefüllt und nicht nur rot umrandet. Sie war
   vorher eine dunkle Pille mit einem roten Punkt darin – aus zwei Metern sah
   das aus wie „aus". */
.rgp-live[data-an="1"] {
    color: #fff;
    background: var(--rgp-rot);
    border-color: var(--rgp-rot-hell);
    box-shadow: 0 4px 16px rgba(218, 0, 0, 0.45);
}

.rgp-live[data-an="1"] .rgp-live__punkt {
    background: #fff;
    box-shadow: 0 0 9px rgba(255, 255, 255, 0.85);
}

/* ── Cover ─────────────────────────────────────────────────────────────── */

.rgp-cover {
    display: grid;
    place-items: center;
    min-height: 0;
}

.rgp-cover__flaeche {
    position: relative;
    display: block;
    /* Quadratisch, so groß wie die Zeile es zulässt – begrenzt von der
       Höhe der Zeile und der Breite der Spalte. */
    aspect-ratio: 1 / 1;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.3);
    /* Der rote Ring um das Cover: die Fassung, in der das Bild sitzt. Er ist
       immer da und zieht an, sobald wirklich Ton läuft. */
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55),
                0 0 0 2px var(--rgp-rot-kante);
    overflow: hidden;
    cursor: pointer;
    touch-action: manipulation;
    transition: box-shadow 320ms ease;
}

.rgp-body[data-ton="1"] .rgp-cover__flaeche {
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55),
                0 0 0 2px var(--rgp-rot),
                0 0 34px rgba(218, 0, 0, 0.45);
}

.rgp-cover__bild {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 400ms ease;
}

/* Das Fallback-Signet ist ein Logo und kein Foto – es wird nicht beschnitten. */
.rgp-body[data-cover="fallback"] .rgp-cover__bild {
    object-fit: contain;
    padding: 12%;
    background: rgba(0, 0, 0, 0.35);
}

/* Die Audioaktivität. Fünf Striche, die nur laufen, wenn `data-an="1"` –
   und sie stehen still, wenn das Gerät weniger Bewegung wünscht. */
.rgp-pegel {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    transition: opacity 300ms ease;
}

.rgp-pegel[data-an="1"] { opacity: 1; }

.rgp-pegel i {
    display: block;
    width: 3px;
    height: 4px;
    border-radius: 2px;
    background: var(--rgp-rot-hell);
}

.rgp-pegel[data-an="1"] i { animation: rgp-pegeln 900ms ease-in-out infinite; }
.rgp-pegel i:nth-child(2) { animation-delay: 120ms; }
.rgp-pegel i:nth-child(3) { animation-delay: 240ms; }
.rgp-pegel i:nth-child(4) { animation-delay: 360ms; }
.rgp-pegel i:nth-child(5) { animation-delay: 480ms; }

@keyframes rgp-pegeln {
    0%, 100% { height: 4px; }
    50%      { height: 18px; }
}

/* ── Titel und Interpret ───────────────────────────────────────────────── */

.rgp-titelzeile {
    text-align: center;
    min-height: 62px;
}

.rgp-titel {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    /* Zwei Zeilen, dann Auslassung: Ein dritter Titelumbruch schöbe die
       Bedienung aus dem Bild. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rgp-interpret {
    margin: 3px 0 0;
    font-size: 15px;
    color: var(--rgp-gedaempft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Bedienung ─────────────────────────────────────────────────────────── */

.rgp-bedienung {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.rgp-zustand {
    margin: 0;
    min-height: 18px;
    font-size: 12.5px;
    letter-spacing: 0.03em;
    color: var(--rgp-leise);
}

.rgp-knoepfe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
}

.rgp-knopf {
    position: relative;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--rgp-text);
    cursor: pointer;
    padding: 0;
}

.rgp-knopf svg { width: 22px; height: 22px; fill: currentColor; display: block; }

.rgp-knopf--klein {
    width: var(--rgp-tippflaeche);
    height: var(--rgp-tippflaeche);
    border-radius: 50%;
    color: var(--rgp-text);
    background: var(--rgp-karte);
    /* Rot umrandet statt weiß umrandet: Die kleinen Knöpfe stehen links und
       rechts vom Play-Knopf und gehören zu derselben Konsole. */
    border: 1px solid var(--rgp-rot-kante);
    transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}

.rgp-knopf--klein:hover { color: #fff; background: var(--rgp-rot-flaeche); }
.rgp-knopf--klein[aria-expanded="true"],
.rgp-knopf--klein.is-an {
    color: #fff;
    background: var(--rgp-rot);
    border-color: var(--rgp-rot-hell);
}

.rgp-knopf__marke {
    position: absolute;
    right: -2px;
    top: -2px;
    min-width: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--rgp-rot);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
}

/* Der Play-Knopf. Deutlich größer als die Tippfläche – auf dem Telefon ist er
   das eine Bedienelement, das man ohne Hinsehen trifft. */
.rgp-knopf--spielen {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: radial-gradient(120% 120% at 50% 0%,
        var(--rgp-rot-hell), var(--rgp-rot) 48%, var(--rgp-rot-tief));
    box-shadow: 0 12px 34px rgba(218, 0, 0, 0.55),
                0 0 0 4px rgba(218, 0, 0, 0.22);
    color: #fff;
    transition: transform 140ms ease, box-shadow 200ms ease;
}

/* Auf Sendung liegt ein deutlich weiterer roter Hof um den Knopf – er ist das
   eine Bedienelement, das man auf dem Telefon ohne Hinsehen trifft. */
.rgp-body[data-ton="1"] .rgp-knopf--spielen {
    box-shadow: 0 12px 40px rgba(218, 0, 0, 0.7),
                0 0 0 7px rgba(218, 0, 0, 0.3);
}

.rgp-knopf--spielen:active { transform: scale(0.94); }
.rgp-knopf--spielen svg { width: 34px; height: 34px; }
.rgp-knopf--spielen .rgp-knopf__pause { display: none; }
.rgp-knopf--spielen[aria-pressed="true"] .rgp-knopf__spielen { display: none; }
.rgp-knopf--spielen[aria-pressed="true"] .rgp-knopf__pause { display: block; }

/* Der Ladering. Er erscheint zwischen Tippen und erstem Ton – und nur dort. */
.rgp-knopf__laden {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.9);
    opacity: 0;
}

.rgp-knopf--spielen[data-laedt="1"] .rgp-knopf__laden {
    opacity: 1;
    animation: rgp-drehen 900ms linear infinite;
}

.rgp-knopf--spielen[data-laedt="1"] .rgp-knopf__spielen,
.rgp-knopf--spielen[data-laedt="1"] .rgp-knopf__pause { opacity: 0.35; }

@keyframes rgp-drehen { to { transform: rotate(360deg); } }

.rgp-zusatz {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 0;
}

.rgp-lautstaerke {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(240px, 70vw);
}

.rgp-lautstaerke__symbol { width: 18px; height: 18px; fill: var(--rgp-leise); flex: none; }

.rgp-lautstaerke input[type="range"] {
    flex: 1 1 auto;
    height: var(--rgp-tippflaeche);
    accent-color: var(--rgp-rot);
    background: transparent;
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   Der GUDE-Live-Chat (Issue #113)
   ══════════════════════════════════════════════════════════════════════════
   Ein Knopf in der Hausfarbe, und zwar nur dann, wenn der Chat wirklich offen
   ist – `hidden` steht im Dokument, das Skript nimmt es weg. Bei geschlossenem
   Chat ist hier nichts, auch keine graue Fassung davon. */

.rgp-chat {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: var(--rgp-tippflaeche);
    padding: 0 16px 0 14px;
    border-radius: 999px;
    background: var(--rgp-rot);
    border: 1px solid var(--rgp-rot-hell);
    box-shadow: 0 8px 24px rgba(218, 0, 0, 0.42);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.rgp-chat__punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 9px rgba(255, 255, 255, 0.85);
    flex: none;
}

.rgp-chat__pfeil { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Der Sendeplan – auf dem Telefon ein Panel von unten
   ══════════════════════════════════════════════════════════════════════════ */

.rgp-plan {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background: rgba(18, 18, 22, 0.92);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    /* Die Kante des Panels trägt die Hausfarbe – auf dem Telefon ist sie der
       sichtbarste waagerechte Strich der ganzen Oberfläche. */
    border-top: 2px solid var(--rgp-rot);
    border-radius: 22px 22px 0 0;
    padding-bottom: var(--rgp-sicher-unten);
    transform: translateY(calc(100% - var(--rgp-griffhoehe, 84px) - var(--rgp-sicher-unten)));
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.rgp-plan[data-offen="1"] { transform: translateY(0); }

.rgp-plan__griff {
    display: grid;
    justify-items: center;
    gap: 4px;
    width: 100%;
    min-height: 84px;
    padding: 10px var(--rgp-rand) 12px;
    border: 0;
    background: transparent;
    color: var(--rgp-text);
    cursor: pointer;
    text-align: center;
}

.rgp-plan__strich {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--rgp-rot);
}

.rgp-plan__wort {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rgp-rot-hell);
}

.rgp-plan__jetzt {
    font-size: 14px;
    color: var(--rgp-text);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rgp-plan__inhalt {
    display: grid;
    gap: 12px;
    max-height: min(58dvh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--rgp-rand) 18px;
}

.rgp-sendung {
    padding: 13px 15px;
    border-radius: var(--rgp-radius);
    background: var(--rgp-karte);
    border: 1px solid transparent;
}

.rgp-sendung--jetzt {
    background: var(--rgp-rot-flaeche);
    border-color: var(--rgp-rot-kante);
    /* Der rote Balken links: „das läuft gerade" auf einen Blick, ohne dass
       man die Marke darüber lesen muss. */
    border-left: 4px solid var(--rgp-rot);
    padding-left: 12px;
}

.rgp-sendung__marke {
    margin: 0 0 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rgp-leise);
}

.rgp-sendung--jetzt .rgp-sendung__marke { color: var(--rgp-rot-hell); }

.rgp-sendung__titel {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.rgp-sendung__zeit {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--rgp-gedaempft);
}

/*
 * Die beiden Marken des Sidebar-Widgets – „Morgen“/„Freitag“ und „Wdh.“.
 *
 * Sie stehen hier, weil der Player seit dem 12.09.2026 dieselben öffentlichen
 * Anzeigeinformationen zeigt wie das Widget auf radio-gude.de. Ohne das
 * Tageskennzeichen wäre „ca. 06:15 Uhr“ am späten Abend irreführend – genau
 * die Begründung, die im Widget steht.
 */
.rgp-marke-tag,
.rgp-marke-wdh {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--rgp-rot);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    vertical-align: 2px;
}

.rgp-marke-wdh {
    margin-right: 0;
    margin-left: 7px;
    background: transparent;
    border: 1px solid var(--rgp-rot-kante);
    color: var(--rgp-rot-hell);
}

.rgp-fortschritt { margin-top: 10px; }

.rgp-fortschritt__bahn {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}

.rgp-fortschritt__balken {
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: var(--rgp-rot-hell);
    transition: width 800ms linear;
}

.rgp-fortschritt__rest {
    margin: 5px 0 0;
    font-size: 12px;
    color: var(--rgp-leise);
}

.rgp-verlauf {
    padding: 13px 15px;
    border-radius: var(--rgp-radius);
    background: var(--rgp-karte);
    border: 1px solid transparent;
    border-top: 2px solid var(--rgp-rot-kante);
}

.rgp-verlauf__liste {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}

.rgp-verlauf__liste li {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
}

.rgp-verlauf__bild {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.35);
}

.rgp-verlauf__text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rgp-verlauf__text b { font-weight: 600; }
.rgp-verlauf__text span { color: var(--rgp-gedaempft); }
.rgp-verlauf__zeit { font-size: 12px; color: var(--rgp-leise); }

/* ══════════════════════════════════════════════════════════════════════════
   Display-Modus
   ══════════════════════════════════════════════════════════════════════════ */

.rgp-display {
    position: fixed;
    inset: 0;
    z-index: 5;
    background: rgba(6, 6, 8, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.rgp-display__flaeche {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 14px;
    width: 100%;
    height: 100%;
    padding:
        calc(var(--rgp-sicher-oben) + 24px)
        calc(var(--rgp-sicher-rechts) + 24px)
        calc(var(--rgp-sicher-unten) + 24px)
        calc(var(--rgp-sicher-links) + 24px);
    border: 0;
    background: transparent;
    color: var(--rgp-text);
    cursor: pointer;
    text-align: center;
}

.rgp-display__cover {
    width: min(72vh, 82vw, 620px);
    height: min(72vh, 82vw, 620px);
    object-fit: cover;
    border-radius: 26px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.rgp-body[data-cover="fallback"] .rgp-display__cover {
    object-fit: contain;
    padding: 10%;
    background: rgba(0, 0, 0, 0.4);
}

.rgp-display__titel {
    margin: 4px 0 0;
    font-size: clamp(20px, 3.4vw, 34px);
    font-weight: 700;
    line-height: 1.2;
}

.rgp-display__interpret {
    margin: 0;
    font-size: clamp(15px, 2.2vw, 22px);
    color: var(--rgp-gedaempft);
}

.rgp-live--gross { font-size: 12px; padding: 6px 14px; }

.rgp-display__uhr {
    margin: 6px 0 0;
    font-size: clamp(13px, 1.8vw, 18px);
    font-variant-numeric: tabular-nums;
    color: var(--rgp-leise);
}

/* ══════════════════════════════════════════════════════════════════════════
   Dialog und Meldung – kein alert, kein confirm, kein prompt
   ══════════════════════════════════════════════════════════════════════════ */

.rgp-dialog {
    width: min(360px, calc(100vw - 32px));
    padding: 22px;
    border: 1px solid var(--rgp-kante);
    border-radius: 22px;
    background: #16161a;
    color: var(--rgp-text);
}

.rgp-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }

.rgp-dialog__titel { margin: 0; font-size: 18px; font-weight: 700; }

.rgp-dialog__text {
    margin: 6px 0 16px;
    font-size: 13.5px;
    color: var(--rgp-gedaempft);
}

.rgp-dialog__wahl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.rgp-dialog__knopf {
    min-height: var(--rgp-tippflaeche);
    border: 1px solid var(--rgp-kante);
    border-radius: 12px;
    background: var(--rgp-karte);
    color: var(--rgp-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.rgp-dialog__knopf.is-an { background: rgba(218, 0, 0, 0.3); border-color: var(--rgp-rot); }

.rgp-dialog__fuss {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 16px;
}

.rgp-dialog__aus,
.rgp-dialog__abbrechen {
    min-height: var(--rgp-tippflaeche);
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid var(--rgp-kante);
    background: transparent;
    color: var(--rgp-gedaempft);
    font-size: 14px;
    cursor: pointer;
}

.rgp-dialog__aus { color: var(--rgp-rot-hell); border-color: rgba(218, 0, 0, 0.45); }

.rgp-meldung {
    position: fixed;
    left: 50%;
    bottom: calc(var(--rgp-sicher-unten) + 104px);
    z-index: 9;
    transform: translateX(-50%);
    margin: 0;
    max-width: calc(100vw - 40px);
    padding: 11px 18px;
    border-radius: 999px;
    background: rgba(28, 28, 32, 0.95);
    border: 1px solid var(--rgp-kante);
    font-size: 13.5px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

/* ══════════════════════════════════════════════════════════════════════════
   2) Telefon quer – ein echtes Zweispaltenlayout
   ══════════════════════════════════════════════════════════════════════════
   Nicht die gedrehte Hochkantansicht: Dort bliebe vom Cover ein Streifen
   übrig und die Bedienung stünde unter dem Rand. Links das Cover über die
   volle Höhe, rechts Titel, Bedienung und der Sendeplan als stehende Spalte.
   Das Panel von unten gibt es hier nicht – es verdeckte die halbe Höhe. */

@media (orientation: landscape) and (max-height: 540px) {
    .rgp { --rgp-rand: 16px; }

    .rgp-buehne {
        /* Drei echte Spalten und drei Zeilen. Das Cover steht links über
           beide Inhaltszeilen, in der Mitte Titel und Bedienung
           untereinander, rechts der Sendeplan als stehende Spalte. */
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, 0.9fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "kopf   kopf       kopf"
            "cover  titel      plan"
            "cover  bedienung  plan";
        column-gap: 18px;
        row-gap: 8px;
        padding-bottom: calc(var(--rgp-sicher-unten) + 12px);
    }

    .rgp-kopf { grid-area: kopf; min-height: 26px; }
    .rgp-cover { grid-area: cover; align-self: stretch; }
    .rgp-titelzeile {
        grid-area: titel;
        align-self: end;
        text-align: left;
        min-height: 0;
    }
    .rgp-bedienung {
        grid-area: bedienung;
        justify-items: start;
        gap: 6px;
    }

    .rgp-titel { font-size: 19px; }
    .rgp-interpret { font-size: 14px; }

    .rgp-knoepfe { gap: 20px; }
    .rgp-knopf--spielen { width: 62px; height: 62px; }
    .rgp-knopf--spielen svg { width: 27px; height: 27px; }
    .rgp-lautstaerke { width: min(190px, 28vw); }

    /* Der Sendeplan ist hier kein Panel mehr, sondern die dritte Spalte –
       offen, ohne Griff, ohne Verschieben. Ein Panel von unten verdeckte im
       Querformat die halbe Höhe. */
    .rgp-plan {
        position: relative;
        grid-area: plan;
        left: auto; right: auto; bottom: auto;
        align-self: stretch;
        width: auto;
        border-radius: var(--rgp-radius);
        border: 1px solid var(--rgp-kante);
        /* Die rote Kante bleibt auch hier: Sie ist in jedem der fünf Formate
           dieselbe Marke und nicht eine Eigenheit des Telefons. */
        border-top: 2px solid var(--rgp-rot);
        transform: none;
        background: rgba(18, 18, 22, 0.78);
        padding-bottom: 0;
        overflow: hidden;
    }

    .rgp-plan__griff { display: none; }

    .rgp-plan__inhalt {
        max-height: 100%;
        height: 100%;
        padding: 12px;
        gap: 9px;
        align-content: start;
    }

    .rgp-sendung { padding: 10px 12px; }
    .rgp-sendung__titel { font-size: 14px; }
    .rgp-sendung__zeit { font-size: 12px; }
    .rgp-verlauf { padding: 10px 12px; }
    .rgp-meldung { bottom: calc(var(--rgp-sicher-unten) + 16px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   3) Tablet hochkant – großzügige Konsole, Sendeplan steht offen
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 700px) and (orientation: portrait) {
    .rgp { --rgp-rand: 40px; }

    .rgp-buehne {
        grid-template-rows: auto minmax(0, 1fr) auto auto auto;
        gap: 20px;
        max-width: 780px;
        margin: 0 auto;
        /* Der Sendeplan steht hier im Fluss und braucht keinen reservierten
           Platz mehr – er bringt seinen eigenen Abstand mit. */
        padding-bottom: 0;
    }

    .rgp-cover__flaeche { max-width: 560px; }
    .rgp-titel { font-size: 30px; }
    .rgp-interpret { font-size: 18px; }
    .rgp-knopf--spielen { width: 92px; height: 92px; }
    .rgp-knopf--spielen svg { width: 40px; height: 40px; }
    .rgp-knoepfe { gap: 40px; }

    /* Das Panel bleibt ein Panel, steht aber von Anfang an offen: Auf einem
       Tablet ist genug Höhe da, und ein Griff, den niemand zieht, ist ein
       Bedienelement ohne Aufgabe. */
    .rgp-plan {
        position: relative;
        transform: none;
        border-radius: var(--rgp-radius);
        border: 1px solid var(--rgp-kante);
        /* Die rote Kante bleibt auch hier: Sie ist in jedem der fünf Formate
           dieselbe Marke und nicht eine Eigenheit des Telefons. */
        border-top: 2px solid var(--rgp-rot);
        background: rgba(18, 18, 22, 0.7);
        margin: 0 auto;
        width: 100%;
        max-width: 780px;
        padding-bottom: 0;
        margin-bottom: calc(var(--rgp-sicher-unten) + 18px);
    }

    .rgp-plan__griff { display: none; }

    .rgp-plan__inhalt {
        grid-template-columns: 1fr 1fr;
        max-height: 240px;
        padding: 16px;
    }

    .rgp-sendung--jetzt { grid-column: 1 / -1; }
    .rgp-verlauf { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   4) Tablet quer und 5) Schreibtisch – die Radio-Konsole in zwei Spalten
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) and (orientation: landscape), (min-width: 1100px) {
    .rgp { --rgp-rand: 40px; }

    .rgp-buehne {
        grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
        grid-template-rows: auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "kopf       kopf"
            "cover      plan"
            "titel      plan"
            "bedienung  plan";
        column-gap: 44px;
        row-gap: 16px;
        max-width: 1400px;
        margin: 0 auto;
        padding-bottom: calc(var(--rgp-sicher-unten) + 28px);
    }

    .rgp-kopf { grid-area: kopf; min-height: 40px; }
    .rgp-cover { grid-area: cover; }
    .rgp-titelzeile { grid-area: titel; text-align: left; min-height: 0; }
    .rgp-bedienung { grid-area: bedienung; justify-items: start; gap: 14px; }

    .rgp-marke { font-size: 17px; }
    .rgp-marke__signet { width: 34px; height: 34px; }

    .rgp-cover__flaeche { max-width: 100%; }
    .rgp-titel { font-size: clamp(26px, 2.4vw, 38px); }
    .rgp-interpret { font-size: clamp(16px, 1.3vw, 20px); }

    .rgp-knoepfe { gap: 34px; }
    .rgp-knopf--spielen { width: 84px; height: 84px; }
    .rgp-knopf--spielen svg { width: 36px; height: 36px; }
    .rgp-zusatz { justify-content: flex-start; }

    /* Der Sendeplan ist hier eine stehende Spalte und kein Panel. */
    .rgp-plan {
        position: relative;
        grid-area: plan;
        transform: none;
        align-self: stretch;
        border: 1px solid var(--rgp-kante);
        border-top: 2px solid var(--rgp-rot);
        border-radius: var(--rgp-radius);
        background: rgba(18, 18, 22, 0.66);
        padding-bottom: 0;
        overflow: hidden;
    }

    .rgp-plan__griff { display: none; }

    .rgp-plan__inhalt {
        max-height: 100%;
        height: 100%;
        padding: 18px;
        gap: 13px;
        align-content: start;
    }

    .rgp-meldung { bottom: calc(var(--rgp-sicher-unten) + 28px); }
}

@media (min-width: 1400px) {
    .rgp-plan__inhalt { padding: 24px; gap: 16px; }
    .rgp-sendung { padding: 16px 18px; }
    .rgp-sendung__titel { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Die Fehlerseite dieses Hauses
   ══════════════════════════════════════════════════════════════════════════ */

.rgp-buehne--fehler {
    display: grid;
    place-items: center;
    grid-template-rows: none;
    padding: var(--rgp-rand);
}

.rgp-fehler {
    display: grid;
    justify-items: center;
    gap: 10px;
    max-width: 420px;
    text-align: center;
}

.rgp-fehler__signet { width: 64px; height: 64px; border-radius: 16px; }
.rgp-fehler__titel { margin: 8px 0 0; font-size: 22px; font-weight: 700; }
.rgp-fehler__text { margin: 0; color: var(--rgp-gedaempft); font-size: 15px; }

.rgp-fehler__weg {
    margin-top: 10px;
    min-height: var(--rgp-tippflaeche);
    display: inline-flex;
    align-items: center;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--rgp-rot);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Rücksicht
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .rgp-hintergrund__ebene,
    .rgp-plan,
    .rgp-cover__bild,
    .rgp-fortschritt__balken { transition: none; }

    .rgp-pegel[data-an="1"] i,
    .rgp-knopf--spielen[data-laedt="1"] .rgp-knopf__laden { animation: none; }
}

/* Ein sichtbarer Fokus. Er ist in einer App nicht weniger wichtig als in
   einem Formular – hier wird mit der Tastatur gespielt und angehalten. */
.rgp-body :focus-visible {
    outline: 2px solid var(--rgp-rot-hell);
    outline-offset: 3px;
    border-radius: 8px;
}