/*
 * Der GUDE Live-Chat – die Höreroberfläche (Issue #113).
 *
 * **Ein** Stylesheet für alle Höreroberflächen: den Webplayer, die
 * einbettbare Fläche für radio-gude.de und die eigene Seite unter
 * `draht.radio-gude.de`. Alle drei zeichnen dieselbe Vorlage
 * (`app/templates/chat/_flaeche.html`) und laden diese Datei; die Konsole im
 * Studio hat ihre eigene (`chat-moderation.css`), denn sie ist eine
 * Arbeitsoberfläche und keine Hörerfläche.
 *
 * Vier Formate, und sie hängen an der Breite und nicht an einem Gerätenamen:
 *
 *   1. **Telefon** – ein Blatt, das von unten kommt und seit Martins Abnahme
 *      vom 15.09.2026 fast bis nach oben reicht: Der Chat ist dort der Inhalt
 *      und nicht der Rand. Frei bleibt die Systemanzeige oben und im Player
 *      die Bereichsleiste unten. Der Ton läuft weiter, der Display-Modus wird
 *      nicht zerstört (er liegt eine Ebene höher).
 *   2. **Tablet und Schreibtisch ab 820 px** – eine Spalte am rechten Rand.
 *      Kein Blatt, kein Verdecken: Der Chat steht neben dem Player.
 *   3. **Eingebettet** (`.rgc--eingebettet`) – kein Aufrufknopf und kein
 *      Blatt, sondern die volle Fläche des Rahmens, in dem die Seite steckt.
 *      Dort ist der Chat nicht Beiwerk, sondern der Inhalt.
 *   4. **Die App-Schale** (`.rgd-app`, seit Martins Abnahme vom 13.09.2026) –
 *      die eigene Seite unter `draht.radio-gude.de`. Vier feste Zeilen, von
 *      denen genau eine scrollt, ein Zustand an genau einer Stelle und eine
 *      Fußleiste am unteren Rand. Sie steht ganz unten in dieser Datei.
 *
 * Die Hausfarbe und die Grundflächen sind dieselben wie im Player. Sie stehen
 * hier noch einmal und erben nicht aus `player.css`: Diese Datei muss auch
 * allein funktionieren – im Rahmen auf radio-gude.de gibt es kein `player.css`.
 *
 * Die 44-px-Tippfläche aus Issue #35 gilt hier wie überall.
 */

.rgc {
    --rgc-rot: #da0000;
    --rgc-rot-hell: #ff3b30;
    --rgc-flaeche: #121216;
    --rgc-karte: rgba(255, 255, 255, 0.07);
    --rgc-kante: rgba(255, 255, 255, 0.14);
    --rgc-text: #f5f5f7;
    --rgc-gedaempft: rgba(245, 245, 247, 0.62);
    --rgc-leise: rgba(245, 245, 247, 0.42);
    --rgc-radius: 16px;
    --rgc-tippflaeche: 44px;
    --rgc-rand: 14px;

    /* Wie viel die Bildschirmtastatur gerade verdeckt. Gesetzt wird der Wert
       von `chat-hoerer.js` über `visualViewport`; ohne Tastatur ist er 0. Er
       steht hier mit Vorgabewert, damit jede Regel darunter mit ihm rechnen
       kann, auch wenn das Skript ihn nie setzt. */
    --rgc-tastatur: 0px;
    --rgc-sicher-unten: env(safe-area-inset-bottom, 0px);

    /* Wie viel über und unter dem Blatt frei bleibt – auf dem Telefon.
     *
     * Oben nur die Systemanzeige und ein schmaler Streifen, an dem noch zu
     * sehen ist, dass etwas darunterliegt; unten null, wo das Blatt am
     * Bildschirmrand endet. Der Webplayer setzt `--rgc-blatt-unten` auf die
     * Höhe seiner Bereichsleiste (`static/player.css`) – sie bleibt sichtbar
     * und bedienbar, damit ein Griff zurück zum Player reicht. */
    --rgc-blatt-oben: calc(env(safe-area-inset-top, 0px) + 10px);
    --rgc-blatt-unten: 0px;

    color-scheme: dark;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    color: var(--rgc-text);
}

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

/* Ein verstecktes Wurzelelement ist wirklich weg – `hidden` allein verliert
   gegen jede Regel mit `display`. */
.rgc[hidden],
.rgc [hidden] { display: none !important; }

.rgc-nurlesen {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Der Aufruf
   ══════════════════════════════════════════════════════════════════════════ */
/*
 * „Klar, aber nicht dominant" – der Auftrag nennt beides in einem Satz. Also
 * die Hausfarbe, aber als Rahmen und nicht als Fläche; volle Breite, aber
 * nicht höher als eine Tippfläche; ein pulsierender Punkt, aber keiner, der
 * über den ganzen Knopf läuft.
 */
.rgc-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: var(--rgc-tippflaeche);
    padding: 10px 14px;
    border: 1px solid var(--rgc-rot);
    border-radius: 999px;
    background: rgba(218, 0, 0, 0.14);
    color: var(--rgc-text);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rgc-cta:hover:not(:disabled) { background: rgba(218, 0, 0, 0.22); }

/*
 * Der ausgegraute Zustand – die sichtbarste Folge der Festlegung vom
 * 12.09.2026. Guder Draht verschwindet nicht mehr, wenn er nicht läuft; er
 * steht da und sagt, dass er nicht läuft.
 *
 * Grau statt rot, kein Zeiger, kein Puls am Punkt – und trotzdem lesbar:
 * `opacity` allein ergäbe einen Text, den man auf einem Telefon in der Sonne
 * nicht mehr entziffert. Deshalb eine eigene, gedämpfte Farbgebung statt
 * eines Schleiers über der roten.
 */
.rgc-cta:disabled {
    border-color: rgba(245, 245, 247, 0.18);
    background: rgba(245, 245, 247, 0.06);
    color: var(--rgc-gedaempft);
    cursor: default;
}

.rgc-cta:disabled .rgc-cta__punkt {
    background: rgba(245, 245, 247, 0.3);
    animation: none;
}

.rgc-cta__punkt {
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--rgc-rot-hell);
    animation: rgc-puls 2s ease-in-out infinite;
}

.rgc-cta__wort { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.rgc-cta__zahl {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--rgc-gedaempft);
}

.rgc-cta__zahl:empty { display: none; }

@keyframes rgc-puls {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .rgc-cta__punkt { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Das Blatt – Telefon
   ══════════════════════════════════════════════════════════════════════════ */
/*
 * Es kommt von unten und reicht **fast bis nach oben**. Das ist Martins
 * Abnahme vom 15.09.2026 am echten iPhone:
 *
 *   „Auf Phone soll der geöffnete Gude Draht nahezu bis ganz nach oben ziehen
 *   – nur notwendige Safe-Area / kleiner Griff / kompakter Kopf bleiben
 *   bestehen. Der große Player-/Coverbereich darf beim geöffneten Draht
 *   weitgehend hinter dem Sheet verschwinden; Ziel ist maximaler Platz für
 *   Chat."
 *
 * Bis dahin endete es bei 62 % der Höhe, und das Cover stand darüber. Wer den
 * Chat aufzieht, will aber den Chat – der Ton läuft dabei unberührt weiter,
 * denn dieses Stylesheet fasst kein Audioelement an und `chat-hoerer.js` auch
 * nicht. Sichtbar bleibt, was zum Zurückkommen nötig ist: im Webplayer die
 * Bereichsleiste am unteren Rand (`--rgc-blatt-unten`), im Blatt selbst Griff,
 * Titel und das Kreuz.
 *
 * `dvh` und nicht `vh`: Auf dem Telefon wächst und schrumpft die Adressleiste,
 * und mit `vh` stünde das Eingabefeld mal unter dem Rand.
 */
.rgc-blatt {
    position: fixed;
    left: 0; right: 0;
    /*
     * Die Unterkante liegt **über** der Tastatur und nicht hinter ihr.
     *
     * Bis zum 22.09.2026 stand hier allein `--rgc-blatt-unten`, und die
     * Tastatur verkürzte nur die Höhe. Gerechnet ging das auf, gesehen nicht:
     * Ein fest positioniertes Stück wird vom unteren Rand des **Layouts** aus
     * gesetzt, und der liegt auf dem iPhone hinter der Tastatur. Das Blatt
     * wurde also oben kürzer und blieb unten verdeckt – genau Martins Befund
     * aus dem mobilen Praxistest: Eingabe und Senden hinter der Tastatur.
     *
     * Mit beiden Summanden bleibt die Oberkante, wo sie war
     * (`100dvh − oben − unten − Tastatur` Höhe plus `unten + Tastatur`
     * Abstand ergibt wieder `oben`), und die Unterkante steht auf der
     * Tastatur auf. Ohne Tastatur ist der Wert null und alles wie vorher.
     */
    bottom: calc(var(--rgc-blatt-unten) + var(--rgc-tastatur));
    /* Die Ebene ist mit Bedacht gewählt: über dem Sendeplanpanel des Players
       (z-index 3), aber **unter** seinem Display-Modus (z-index 5). Damit
       kann der Chat den Display-Modus nicht zerstören – wer ihn öffnet,
       während der Chat offen ist, sieht wieder das Cover, und der Chat wartet
       darunter. Der Auftrag verlangt genau das. */
    z-index: 4;
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - var(--rgc-blatt-oben) - var(--rgc-blatt-unten));
    /* Die Tastatur schiebt das Blatt nicht weg, sie verkürzt es. Damit bleibt
       das Eingabefeld über ihr stehen und die letzte Nachricht darüber
       sichtbar – genau das verlangt der Auftrag. */
    height: calc(100dvh - var(--rgc-blatt-oben) - var(--rgc-blatt-unten)
                 - var(--rgc-tastatur));
    padding-bottom: calc(var(--rgc-sicher-unten) + 4px);
    border-top: 1px solid var(--rgc-kante);
    border-radius: var(--rgc-radius) var(--rgc-radius) 0 0;
    background: var(--rgc-flaeche);
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.55);
}

/*
 * Der Kopf steht in **einer** Zeile: Titel, Zahl, Kreuz. Bis zum 15.09.2026
 * waren Titel und Zahl zwei Zeilen übereinander; seit das Blatt fast den ganzen
 * Bildschirm füllt, zählt dort jede Zeile Höhe für den Chat („Kopf des Drahts
 * auf Phone kompakt halten: Sendungstitel/Teilnehmerzahl/Schließen in möglichst
 * wenig Höhe"). Das Kreuz behält seine 44 px – die Tippfläche aus Issue #35
 * wird nicht gespart.
 */
.rgc-kopf {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px var(--rgc-rand) 8px;
    border-bottom: 1px solid var(--rgc-kante);
}

.rgc-griff {
    position: absolute;
    top: 6px; left: 50%;
    width: 38px; height: 4px;
    margin-left: -19px;
    border-radius: 2px;
    background: var(--rgc-kante);
}

.rgc-titel {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
}

.rgc-zahl {
    flex: 0 0 auto;
    margin: 0;
    font-size: 0.875rem;
    color: var(--rgc-gedaempft);
}

.rgc-zahl:empty { display: none; }

.rgc-zu {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--rgc-tippflaeche);
    height: var(--rgc-tippflaeche);
    border: 0;
    border-radius: 50%;
    background: var(--rgc-karte);
    color: var(--rgc-text);
    cursor: pointer;
}

.rgc-zu svg { width: 20px; height: 20px; fill: currentColor; }

/* ══════════════════════════════════════════════════════════════════════════
   Die Nachrichten
   ══════════════════════════════════════════════════════════════════════════ */

.rgc-liste {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin: 0;
    padding: 10px var(--rgc-rand);
    list-style: none;
}

/*
 * Die Schriftgrade dieses Abschnitts sind seit Martins Abnahme vom 13.09.2026
 * größer: „Martin empfindet die Schrift im Chat auf dem Phone als eher zu
 * klein … Ziel: auf iPhone klar lesbar ohne Zoom, ohne dass dadurch
 * horizontaler Overflow entsteht."
 *
 * Gewachsen sind deshalb genau die Stellen, die er genannt hat –
 * Nachrichtentext, Zeitstempel, Nickname und Abzeichen, Sekundärtexte – und
 * nicht die Kästen darum: Ein größerer Text in einer Fläche, die mitwächst,
 * bringt den Überlauf zurück, den derselbe Absatz ausschließt. Jede Fläche
 * hier bleibt deshalb bei `overflow-wrap: anywhere` und `min-width: 0`.
 */
.rgc-nachricht {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rgc-nachricht__kopf {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0 0 3px;
    font-size: 0.875rem;
}

.rgc-nachricht__name {
    font-weight: 700;
    color: var(--rgc-text);
}

.rgc-nachricht__zeit { color: var(--rgc-leise); }

.rgc-nachricht__marke {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--rgc-karte);
    color: var(--rgc-gedaempft);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.rgc-nachricht__text {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.45;
    /* Fremder Text darf die Fläche nicht sprengen – ein Wort ohne Leerzeichen
       ist kein Grund für einen waagerechten Bildlauf. */
    overflow-wrap: anywhere;
    /* Zeilenumbrüche im Text bleiben Zeilenumbrüche. `pre-wrap` und nicht
       ein ersetztes `<br>`: Der Text wird nirgends als HTML gezeichnet. */
    white-space: pre-wrap;
}

/* Die Ansage aus dem Studio hebt sich ab – sie ist die Stimme des Senders. */
.rgc-nachricht[data-art="moderation"] {
    padding: 10px 12px;
    margin: 8px 0;
    border: 1px solid var(--rgc-rot);
    border-radius: var(--rgc-radius);
    background: rgba(218, 0, 0, 0.12);
}

.rgc-nachricht[data-art="moderation"] .rgc-nachricht__marke {
    background: var(--rgc-rot);
    color: #fff;
}

.rgc-nachricht[data-art="songwunsch"] .rgc-nachricht__marke {
    background: rgba(255, 255, 255, 0.16);
    color: var(--rgc-text);
}

/*
 * Ein Beitrag der GUDE KI (Issue #178) – abgesetzt wie die Ansage aus dem
 * Studio und trotzdem **anders**: heller Rahmen statt rotem, Abzeichen in
 * Weiß auf Grau statt in Senderrot.
 *
 * Das ist keine Geschmacksfrage. Rot ist in dieser Oberfläche die Farbe des
 * Senders, und Gude Bot ist nicht der Sender – er ist die KI des Senders. Er
 * soll erkennbar aus dem Haus kommen und trotzdem auf den ersten Blick
 * unterscheidbar sein von der Zeile, die ein Mensch im Studio getippt hat.
 * Das Wort `GUDE KI` steht ohnehin daneben (`static/chat-hoerer.js`); die
 * Farbe sagt dasselbe für den, der nur hinsieht.
 */
.rgc-nachricht[data-art="bot"] {
    padding: 10px 12px;
    margin: 8px 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--rgc-radius);
    background: rgba(255, 255, 255, 0.06);
}

.rgc-nachricht[data-art="bot"] .rgc-nachricht__marke {
    background: rgba(255, 255, 255, 0.22);
    color: var(--rgc-text);
}

.rgc-nachricht[data-onair="1"] {
    border-left: 3px solid var(--rgc-rot);
    padding-left: 9px;
}

/*
 * Was der Gude Bot mit dem eigenen Beitrag tut (Issue #372): wartet,
 * schreibt oder hat nicht beantwortet. Eine leise Zeile unter dem Text und
 * kein Abzeichen – sie ist eine Auskunft an diesen einen Bildschirm, kein
 * Teil des Beitrags.
 */
.rgc-nachricht__bot {
    margin: 4px 0 0;
    color: var(--rgc-gedaempft);
    font-size: 0.875rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.rgc-nachricht__bot[hidden] { display: none; }

.rgc-nachricht__bot[data-botstand="spaeter"],
.rgc-nachricht__bot[data-botstand="studio"] {
    font-style: italic;
}

.rgc-nachricht__fuss {
    display: flex;
    gap: 6px;
    margin: 6px 0 0;
}

.rgc-nachricht__fuss[hidden] { display: none; }

.rgc-reaktion {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 40px;
    padding: 6px 14px;
    border: 1px solid var(--rgc-kante);
    border-radius: 999px;
    background: transparent;
    color: var(--rgc-text);
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
}

.rgc-reaktion:disabled { opacity: 0.55; cursor: default; }
.rgc-reaktion__zahl:empty { display: none; }

/*
 * Die eigene Reaktion – seit Martins Festlegung vom 14.09.2026 sichtbar, weil
 * es seitdem **eine** ist: „Ein Hörer darf je reagierbarer Nachricht entweder
 * 👍 oder ❤️ vergeben, nicht beides gleichzeitig", und sie ist wechselbar.
 *
 * Vorher war ein abgegebener Klick daran zu erkennen, dass der Knopf danach
 * ausgegraut war – das sagte „geht nicht mehr" und nicht „das war deins".
 * Jetzt sagt der Rahmen in der Hausfarbe, welche der beiden die eigene ist,
 * und `aria-pressed` am Knopf sagt dasselbe noch einmal für die, die das Bild
 * nicht sehen. Ein zweiter Klick auf das andere Zeichen wechselt.
 */
.rgc-reaktion.is-meine {
    border-color: var(--rgc-rot-hell);
    background: rgba(218, 0, 0, 0.20);
}

/*
 * Dieselben zwei Zeichen in ihren beiden anderen Rollen – Martins Festlegung
 * vom 15.09.2026.
 *
 * `is-anzeige`: eine **Zahl** und kein Angebot. Sie steht seitdem auch an
 * Hörerbeiträgen, weil dort die Redaktion reagiert haben kann („Wenn
 * Redaktion/Studio einen Hörerbeitrag mit 👍 oder ❤️ bewertet, sieht der Hörer
 * diese Reaktion an seinem Kommentar derzeit nicht"). Reagieren darf ein Hörer
 * dort weiterhin nicht – also kein Rahmen, der wie ein Knopf aussieht, und
 * kein Zeiger, der eines verspricht.
 *
 * `is-auswertung`: der **eigene** Beitrag. „Bei eigenen Beiträgen sind 👍/❤️
 * keine Reaktionsbuttons, sondern reine Auswertung/Details." Anklickbar bleibt
 * das Zeichen trotzdem – es öffnet die Liste, wer reagiert hat –, und die
 * gestrichelte Unterkante ist das, was es von einem Reaktionsknopf
 * unterscheidet: nachschlagen statt bewerten.
 */
.rgc-reaktion.is-anzeige {
    border-color: transparent;
    padding-left: 4px;
    padding-right: 4px;
    min-height: 28px;
    opacity: 0.75;
    cursor: default;
}

.rgc-reaktion.is-auswertung {
    border-style: dashed;
    cursor: pointer;
}

/*
 * Wer auf meinen Beitrag reagiert hat – die kleine Liste über der Fläche.
 *
 * Sie liegt **über** dem Verlauf und schiebt ihn nicht: „Keine Layoutsprünge."
 * Auf dem Telefon sitzt sie unten über der Eingabe, ab Tabletbreite kompakt
 * und mittig. Geschlossen wird sie über ihr Kreuz, über Esc und über einen
 * Tipp daneben (`static/chat-hoerer.js`).
 */
.rgc-wer {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 96px;
    z-index: 4;
    max-height: 46%;
    overflow-y: auto;
    padding: 12px 14px 14px;
    border: 1px solid var(--rgc-kante);
    border-radius: 16px;
    /* Deckend und nicht durchscheinend: Darunter läuft der Verlauf weiter,
       und eine halbdurchlässige Fläche wäre dort ein Textteppich. */
    background: var(--rgc-flaeche);
    color: var(--rgc-text);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

.rgc-wer__kopf {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rgc-wer__titel {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.rgc-wer__zu {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.rgc-wer__zu svg { width: 18px; height: 18px; fill: currentColor; }

.rgc-wer__satz {
    margin: 4px 0 8px;
    font-size: 0.8rem;
    opacity: 0.7;
}

.rgc-wer__liste { margin: 0; padding: 0; list-style: none; }

.rgc-wer__name {
    padding: 5px 0;
    font-size: 0.9rem;
    border-top: 1px solid var(--rgc-kante);
}

.rgc-wer__rest {
    padding: 5px 0;
    font-size: 0.82rem;
    opacity: 0.7;
    border-top: 1px solid var(--rgc-kante);
}

@media (min-width: 700px) {
    .rgc-wer {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(340px, calc(100% - 24px));
    }
}

.rgc-runter {
    position: absolute;
    left: 50%;
    bottom: 92px;
    transform: translateX(-50%);
    min-height: 40px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--rgc-rot);
    color: #fff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* ══════════════════════════════════════════════════════════════════════════
   Die Umfrage
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Eine **Karte im Chatstrom** und kein Block darüber – Martins Abnahme vom
 * 15.09.2026:
 *
 *   „laufende Umfrage als kompakte Karte innerhalb des scrollbaren
 *   Chatbereichs darstellen, nicht als raumgreifenden dauerhaft fixierten
 *   Block oberhalb der Nachrichten … Chatliste bleibt scrollbar und behält
 *   möglichst viel nutzbare Höhe."
 *
 * Sie ist deshalb das erste `<li>` der Nachrichtenliste
 * (`app/templates/chat/_flaeche.html`) und scrollt mit. Ihr Kopf ist ein
 * Schalter: Frage, Stimmenzahl und ein Chevron, und darunter der Stimmzettel
 * bzw. das Ergebnis. Drei Zustände stehen in `data-lage`, auf- oder zugeklappt
 * in `data-auf`.
 */
.rgc-umfrage {
    flex: 0 0 auto;
    margin: 0 0 10px;
    overflow: hidden;
    border: 1px solid var(--rgc-kante);
    border-radius: 12px;
    background: var(--rgc-karte);
}

.rgc-umfrage__kopf {
    display: flex;
    align-items: center;
    /* Umbruch, weil die Frage aufgeklappt eine eigene Zeile bekommt – siehe
       unten. Zugeklappt bricht nichts um; dort passt alles in eine Reihe. */
    flex-wrap: wrap;
    gap: 4px 8px;
    width: 100%;
    min-height: var(--rgc-tippflaeche);
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: var(--rgc-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rgc-umfrage__marke {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(218, 0, 0, 0.22);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Die beendete Umfrage sagt es an ihrer Marke – ohne Rot, denn es ist kein
   Angebot mehr, sondern ein Ergebnis. */
.rgc-umfrage[data-lage="beendet"] .rgc-umfrage__marke {
    background: rgba(245, 245, 247, 0.12);
    color: var(--rgc-gedaempft);
}

.rgc-umfrage__frage {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Zugeklappt reicht die Frage über höchstens **zwei** Zeilen. Eine einzige
   mit Auslassungspunkten war zu wenig: Neben Marke, Zahl und Chevron blieben
   davon auf einem Telefon acht Zeichen übrig, und eine Frage, von der man nur
   „Erfunde…" liest, ist keine. */
.rgc-umfrage[data-auf="0"] .rgc-umfrage__frage {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Aufgeklappt bekommt sie die **ganze** Zeile: Marke, Zahl und Chevron rücken
   darüber. In einer schmalen Spalte zwischen Marke und Zahl stand sie sonst
   als drei Wörter untereinander – gelesen wird das nicht. */
.rgc-umfrage[data-auf="1"] .rgc-umfrage__frage {
    flex: 1 1 100%;
    order: 9;
}

.rgc-umfrage[data-auf="1"] .rgc-umfrage__kurz { margin-right: auto; }

.rgc-umfrage__kurz {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    color: var(--rgc-gedaempft);
    font-variant-numeric: tabular-nums;
}

.rgc-umfrage__pfeil {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--rgc-gedaempft);
    transition: transform 0.18s ease;
}

.rgc-umfrage__pfeil svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.rgc-umfrage[data-auf="1"] .rgc-umfrage__pfeil { transform: rotate(180deg); }

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

.rgc-umfrage__koerper { padding: 0 10px 10px; }

.rgc-umfrage__wahl {
    display: grid;
    gap: 6px;
}

.rgc-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: var(--rgc-tippflaeche);
    padding: 8px 12px;
    overflow: hidden;
    border: 1px solid var(--rgc-kante);
    border-radius: 10px;
    background: transparent;
    color: var(--rgc-text);
    font: inherit;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
}

.rgc-option:disabled { cursor: default; }

/* Wo nichts mehr zu tippen ist, braucht es auch keine Tippfläche: Die
   Auswertung – nach der eigenen Stimme wie nach dem Beenden – steht enger und
   nimmt dem Chat weniger Höhe weg. */
.rgc-umfrage[data-lage="gestimmt"] .rgc-option,
.rgc-umfrage[data-lage="beendet"] .rgc-option {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 0.9375rem;
}

.rgc-option__balken {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--anteil, 0%);
    background: rgba(218, 0, 0, 0.35);
    pointer-events: none;
}

.rgc-option__wort,
.rgc-option__wert { position: relative; }
.rgc-option__wert { color: var(--rgc-gedaempft); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════════
   Das Formular
   ══════════════════════════════════════════════════════════════════════════ */

.rgc-form {
    flex: 0 0 auto;
    padding: 10px var(--rgc-rand);
    border-top: 1px solid var(--rgc-kante);
    background: var(--rgc-flaeche);
}

.rgc-form__name { margin-bottom: 8px; }

/* Ist der Name einmal gesetzt, rückt das Feld zusammen – gefragt wird nur
   beim ersten Schreiben, und danach steht es klein da statt zu verschwinden:
   Wer sich vertippt hat, soll es ändern können. */
.rgc-form__name[data-gesetzt="1"] .rgc-label { display: none; }
.rgc-form__name[data-gesetzt="1"] .rgc-eingabe {
    min-height: 34px;
    padding: 5px 10px;
    font-size: 0.82rem;
    color: var(--rgc-gedaempft);
}

.rgc-label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.875rem;
    color: var(--rgc-gedaempft);
}

/* „(freiwillig)" – das Wort, das aus einem Pflichtfeld ein Angebot macht. */
.rgc-label__zusatz {
    font-weight: 400;
    opacity: 0.75;
}

.rgc-form__zeile {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.rgc-eingabe {
    flex: 1 1 auto;
    width: 100%;
    min-height: var(--rgc-tippflaeche);
    padding: 10px 12px;
    border: 1px solid var(--rgc-kante);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--rgc-text);
    font: inherit;
    /* 16 px, damit iOS beim Hineintippen nicht hineinzoomt – ein Zoom, den
       niemand ausgelöst hat, ist auf dem Telefon eine kaputte Ansicht. */
    font-size: 16px;
    resize: none;
}

.rgc-eingabe::placeholder { color: var(--rgc-leise); }
.rgc-eingabe:focus { outline: 2px solid var(--rgc-rot-hell); outline-offset: 1px; }

.rgc-eingabe--text { max-height: 128px; overflow-y: auto; }

.rgc-senden {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--rgc-tippflaeche);
    height: var(--rgc-tippflaeche);
    border: 0;
    border-radius: 50%;
    background: var(--rgc-rot);
    color: #fff;
    cursor: pointer;
}

.rgc-senden:disabled { opacity: 0.5; cursor: default; }
.rgc-senden svg { width: 20px; height: 20px; fill: currentColor; }

.rgc-form__fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    min-height: 28px;
}

.rgc-wahl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    font-size: 0.9375rem;
    color: var(--rgc-gedaempft);
    cursor: pointer;
}

.rgc-rest {
    font-size: 0.875rem;
    color: var(--rgc-leise);
    font-variant-numeric: tabular-nums;
}

.rgc-hinweis {
    margin: 0;
    padding: 9px var(--rgc-rand) 11px;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--rgc-rot-hell);
    background: var(--rgc-flaeche);
}

/* ══════════════════════════════════════════════════════════════════════════
   Tablet und Schreibtisch – eine Spalte statt eines Blattes
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 820px) {
    .rgc-blatt {
        top: 0;
        left: auto;
        right: 0;
        /* Auch als Spalte endet es über der Bereichsleiste des Webplayers –
           dieselbe Zahl wie auf dem Telefon (`--rgc-blatt-unten`). Eine feste
           Null stünde hier über der Leiste. Und auch hier steht die Tastatur
           daneben: Ein Tablet hat eine, und sie verdeckt eine Spalte am
           rechten Rand genauso wie ein Blatt von unten. */
        bottom: calc(var(--rgc-blatt-unten) + var(--rgc-tastatur));
        width: 380px;
        height: 100dvh;
        max-height: none;
        border-top: 0;
        border-left: 1px solid var(--rgc-kante);
        border-radius: 0;
        box-shadow: -18px 0 40px rgba(0, 0, 0, 0.5);
    }

    .rgc-griff { display: none; }
    .rgc-runter { bottom: 130px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Eingebettet – der Chat ist hier der ganze Inhalt
   ══════════════════════════════════════════════════════════════════════════ */
/*
 * Im Rahmen auf radio-gude.de gibt es keinen Player darüber und nichts zu
 * verdecken. Der Aufrufknopf entfällt deshalb, und das Blatt füllt die Fläche
 * – die Seite selbst entscheidet über ihre Größe, nicht dieses Stylesheet.
 */
.rgc--eingebettet .rgc-cta { display: none; }

.rgc--eingebettet .rgc-blatt {
    /* `relative` und nicht `static`: Der Knopf „Neue Nachrichten" liegt
       absolut darin und bezöge sich sonst auf das Fenster. */
    position: relative;
    /* Und deshalb gehört `bottom` hier ausdrücklich zurückgesetzt: An einem
       relativ positionierten Kasten **verschiebt** es, statt ihn zu verankern.
       Solange oben eine Null stand, fiel das nicht auf; seit dort die Tastatur
       mitgerechnet wird (Issue #171), rutschte der Rahmeninhalt nach oben und
       ließe unten einen Streifen frei. Die Höhe des Rahmens bestimmt die
       Seite, die ihn hält – hier wird nichts angehoben. */
    bottom: auto;
    width: auto;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.rgc--eingebettet .rgc-griff { display: none; }

/*
 * Und im **Blatt** des Bausteins geht der Kopf ganz (Issue #183).
 *
 * Martins Abnahme auf dem iPhone: Über dem Nachrichtenverlauf standen zwei
 * Köpfe übereinander. Der äußere (`static/draht-knopf.js`) trägt die Marke,
 * den Zusammenhang und das Kreuz, das den ganzen Guden Draht schließt; dieser
 * hier trug den Sendungsnamen noch einmal und ein **zweites** Kreuz. Zwei
 * Schließen-Aktionen für eine Sache – und auf einem Telefon mit offener
 * Tastatur zwei Streifen, die dem Chat fehlen.
 *
 * Weg muss der innere, und zwar aus zwei Gründen: Das Kreuz draußen liegt im
 * obersten Fenster und schließt wirklich alles, während dieses hier nur das
 * Blatt **innerhalb** des Rahmens schlösse und einen leeren Kasten
 * hinterließe. Und ein Rahmen, der einmal nicht lädt, hätte ohne den äußeren
 * gar kein Kreuz mehr.
 *
 * Es hängt am Merkmal und nicht an `.rgc--eingebettet`: Die **eingebaute**
 * Fläche auf radio-gude.de (`static/chat-widget.js`) ist genauso eingebettet,
 * steht aber ohne Blatt mitten in einer Seite – dort ist dieser Kopf der
 * einzige und bleibt. Wer den Rahmen setzt, sagt, welcher Fall es ist
 * (`app/routers/chat.chat_einbettung()`).
 */
.rgc[data-imblatt="1"] .rgc-kopf { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Die eingebettete Seite selbst
   ══════════════════════════════════════════════════════════════════════════ */
/*
 * Diese Regeln gelten ausschließlich für `app/templates/chat/einbettung.html`
 * – das Dokument, das im Rahmen auf radio-gude.de steckt. Sie stehen hier und
 * nicht als `<style>` in jener Seite, weil vor ihr `style-src 'self'` steht
 * und ein eingebetteter Stilblock damit verworfen würde.
 */

.rgc-seite,
.rgc-seite__koerper {
    margin: 0;
    height: 100%;
    background: #121216;
}

.rgc-seite__koerper { overflow: hidden; }

.rgc-ruhe {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    padding: 0 20px;
    color: rgba(245, 245, 247, 0.45);
    font: 500 0.9rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
    text-align: center;
}

/*
 * Sobald ein Chat läuft, geht der Satz. Eine Geschwisterregel und kein Skript:
 * Was CSS entscheiden kann, soll CSS entscheiden.
 *
 * Gemessen wird seit der Festlegung vom 12.09.2026 an `data-offen` und nicht
 * mehr an `hidden`: Die Fläche ist immer da, sie wechselt nur ihren Zustand.
 */
.rgc[data-offen="1"] ~ .rgc-ruhe { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Der Einstiegsdialog – Regeln und Datenschutz vor dem ersten Mitschreiben
   ══════════════════════════════════════════════════════════════════════════ */
/*
 * „Kurzer Einstiegsdialog mit Chatregeln + Datenschutzinformation und `Jetzt
 * mitmachen`; kein künstliches Pflicht-DSGVO-Häkchen als V1-Konzept."
 *
 * Kein `<dialog>` und kein Overlay: Er sitzt im Blatt, an der Stelle, an der
 * sonst das Formular steht, und das Formular ist derweil ausgeblendet. So
 * kann man ihn nicht übersehen und muss ihn trotzdem nicht wegklicken, bevor
 * man überhaupt sieht, worum es geht – der Verlauf darüber ist sichtbar.
 */
.rgc-einstieg {
    flex: 0 0 auto;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--rgc-kante);
    background: rgba(245, 245, 247, 0.04);
}

.rgc-einstieg__titel {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.rgc-einstieg__claim {
    margin: 3px 0 12px;
    font-size: 0.9375rem;
    color: var(--rgc-gedaempft);
}

.rgc-einstieg__regeln {
    margin: 0 0 12px;
    padding-left: 20px;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.rgc-einstieg__regeln li + li { margin-top: 4px; }

.rgc-einstieg__datenschutz {
    margin: 0 0 14px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--rgc-gedaempft);
}

.rgc-einstieg__knopf {
    width: 100%;
    min-height: var(--rgc-tippflaeche);
    border: 0;
    border-radius: 999px;
    background: var(--rgc-rot);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}


/* ══════════════════════════════════════════════════════════════════════════
   Die eigene Hörerseite – draht.radio-gude.de, und zwar als App
   ══════════════════════════════════════════════════════════════════════════ */
/*
 * Bis zum 13.09.2026 war das hier eine Webseite: Kopf, ein Statusabsatz, ein
 * Aufrufknopf, darunter ein Blatt mit 70 % Höhe, darunter die Regeln, darunter
 * zwei Fußzeilenlinks – und das Ganze scrollte. Martins Abnahme hat daran vier
 * Dinge beanstandet, und alle vier hängen an derselben Ursache:
 *
 *   * „kein Eingabefeld" – der Chat lag hinter einem Knopf;
 *   * „wirkt wie eine responsive Webseite statt wie eine App";
 *   * „Überschrift + großer grauer Statusbalken doppelt/behäbig";
 *   * „Links … sollen nicht wie normale Textlinks wirken" – gewünscht ist eine
 *     feste Fußleiste mit Icons.
 *
 * Die Antwort ist eine **App-Schale** aus drei festen Zeilen und einer, die
 * den Rest bekommt:
 *
 *     Kopf        auto   – wer spricht hier (Signet, Marke, Claim, Info)
 *     Live-Band   auto   – der eine Ort für „es läuft gerade"
 *     Bühne       1fr    – der Verlauf; das Einzige, was scrollt
 *     Fußleiste   auto   – vier Tippziele, safe-area-tauglich
 *
 * Gescrollt wird ausschließlich die Nachrichtenliste. Das Dokument selbst hat
 * keinen Bildlauf – weder senkrecht noch waagerecht –, und genau das ist die
 * Zusage aus Martins Overflow-Punkt: `document.documentElement.scrollWidth <=
 * clientWidth` gilt hier auf jeder Breite, weil es keine Fläche gibt, die
 * breiter werden könnte.
 *
 * **Seit Issue #137 hat dieselbe Schale eine zweite Form.** In der nativen
 * Radio-GUDE-App liegt diese Seite in einer WebView unter der roten
 * App-Leiste, und Kopf, Live-Band und Fußleiste bringt die App selbst mit.
 * `data-schlank="1"` am Körper lässt sie deshalb weg: Von den vier Zeilen
 * bleibt eine, und die Bühne bekommt die volle Höhe. Es ist dieselbe Schale
 * und dasselbe Stylesheet – nur ohne das, was doppelt dastünde.
 */

.rgd-seite,
.rgd-app {
    height: 100%;
    /* Kein Bildlauf am Dokument. Was scrollt, scrollt in sich. */
    overflow: hidden;
    overscroll-behavior: none;
}

/*
 * Die Farbwerte der App-Schale.
 *
 * Sie stehen an **zwei** Selektoren, seit die Bereichsnavigation nicht mehr
 * nur zur Schale gehört: Seit Martins Festlegung vom 14.09.2026 trägt der
 * Webplayer dieselbe Leiste (`chat/_bereiche.html`), und dort steht sie in
 * einer Seite, die `.rgd-app` nicht kennt – sie erbte dort nichts und wäre
 * farblos. Ein zweiter, getippter Wertesatz im Player wäre die Doppelpflege;
 * also nennt die Leiste dieselben Werte selbst.
 *
 * Innerhalb der Schale setzt sie sie damit noch einmal auf denselben Wert.
 * Das ist genau der Punkt: Es gibt eine Quelle, und sie steht hier.
 */
.rgd-app,
.rgd-tabs {
    --rgc-rot: #da0000;
    --rgc-rot-hell: #ff3b30;
    --rgc-flaeche: #121216;
    --rgc-karte: rgba(255, 255, 255, 0.07);
    --rgc-kante: rgba(255, 255, 255, 0.14);
    --rgc-text: #f5f5f7;
    --rgc-gedaempft: rgba(245, 245, 247, 0.62);
    --rgc-leise: rgba(245, 245, 247, 0.42);
    --rgc-tippflaeche: 44px;
    --rgc-rand: 16px;
    --rgd-sicher-oben: env(safe-area-inset-top, 0px);
    --rgd-sicher-unten: env(safe-area-inset-bottom, 0px);
    --rgd-sicher-links: env(safe-area-inset-left, 0px);
    --rgd-sicher-rechts: env(safe-area-inset-right, 0px);

    color-scheme: dark;
    font: 400 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Und die Schale selbst – vier Zeilen über die Fensterhöhe. Das steht
   ausdrücklich **nicht** im Block darüber: Die Leiste teilt sich die Werte mit
   der Schale, aber nicht ihre Höhe. */
.rgd-app {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    /* `100dvh` und nicht `100vh`: Auf dem Telefon wächst und schrumpft die
       Adressleiste, und mit `vh` stünde die Fußleiste mal unter dem Rand. */
    height: 100dvh;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: var(--rgc-flaeche);
    color: var(--rgc-text);
}

.rgd-app *,
.rgd-app *::before,
.rgd-app *::after,
.rgd-tabs,
.rgd-tabs *,
.rgd-tabs *::before,
.rgd-tabs *::after { box-sizing: border-box; }

/*
 * Jede der vier Zeilen bekommt ihren Platz ausdrücklich zugewiesen.
 *
 * Das ist keine Formsache: Das Live-Band ist im geschlossenen Zustand
 * `display: none` und erzeugt dann gar keinen Kasten. Ohne feste Zuweisung
 * rückten Bühne und Fußleiste je eine Zeile nach oben – die Bühne bekäme
 * `auto` statt `1fr` und die Fußleiste stünde mitten im Bild. Genau so sah es
 * beim ersten Aufbau aus.
 */
.rgd-app > .rgd-kopf   { grid-row: 1; }
.rgd-app > .rgd-live   { grid-row: 2; }
.rgd-app > .rgd-buehne { grid-row: 3; }
/* Ausdrücklich als Kind der Schale: Dieselbe Leiste steht im Webplayer in
   einer Kopfzeile, die kein Raster ist – eine Zeilenangabe dort wäre eine
   Regel ohne Wirkung, aber eine, die beim Lesen in die Irre führt. */
.rgd-app > .rgd-tabs   { grid-row: 4; }

/*
 * ── Die schlanke Ansicht für die native App (Issue #137) ──────────────────
 *
 * Unter `draht.radio-gude.de` steht diese Schale in einer WebView der nativen
 * Radio-GUDE-App, unterhalb ihrer roten App-Leiste. Kopf, Live-Band und
 * Fußleiste liefert die App selbst; die Vorlage lässt sie dort weg
 * (`chat/hoererseite.html`, `schlank`). Übrig bleibt **eine** Zeile, und sie
 * bekommt die ganze Höhe: „Unterhalb der nativen roten App-Leiste beginnt
 * praktisch sofort der eigentliche Draht-Inhalt."
 *
 * Die Zeilenzuweisung darunter ist keine Formsache, sondern derselbe Grund
 * wie oben: Ohne sie behielte die Bühne ihre `grid-row: 3` in einem Raster
 * mit einer einzigen Zeile – die Zeilen 1 und 2 entstünden implizit mit
 * `auto`, und die Bühne bekäme nicht mehr `1fr`, sondern ihre Inhaltshöhe.
 */
.rgd-app[data-schlank="1"] { grid-template-rows: 1fr; }
.rgd-app[data-schlank="1"] > .rgd-buehne { grid-row: 1; }

/*
 * Die Safe Area unten gehört hier der Eingabe.
 *
 * Im vollen Rahmen trägt sie die Fußleiste (`.rgd-tabs`), und die Eingabe
 * darüber kommt mit ihrem Innenrand aus – so steht es unten bei
 * `.rgd-app .rgc-form`. Ohne Fußleiste endet die Eingabe am Bildschirmrand,
 * und auf einem iPhone läge der Senden-Knopf dann unter dem Home-Indikator.
 *
 * Oben gibt es dafür ausdrücklich **keine** Entsprechung: Über dieser Fläche
 * steht die native App-Leiste, und ein zweiter Abstand für die Systemanzeige
 * wäre genau die doppelte Safe Area, die Issue #137 ausschließt. Gerechnet
 * wird sie ohnehin nur im Kopf (`--rgd-sicher-oben`), und den gibt es hier
 * nicht.
 */
.rgd-app[data-schlank="1"] .rgc-form {
    padding-bottom: calc(10px + var(--rgd-sicher-unten));
}

/*
 * Und die Bildschirmtastatur verkürzt die Fläche, statt die Eingabe zu
 * verdecken.
 *
 * Im Browser und in der installierten Fassung erledigt das die Umgebung:
 * Android verkleinert den Ausschnitt wegen `interactive-widget=resizes-
 * content`, und dort, wo das Dokument scrollen darf, schiebt der Browser das
 * Feld ins Bild. In einer eingebetteten WebView gilt beides nicht sicher –
 * das Dokument hat keinen Bildlauf (`overflow: hidden`), und die Höhe bleibt
 * stehen, während die Tastatur darüberfährt.
 *
 * Gemessen hat `chat-hoerer.js` das längst: `--rgc-tastatur` steht am
 * Chatelement und ist genau die Höhe, die der sichtbare Ausschnitt gerade
 * verloren hat – ohne Tastatur und in jeder Umgebung, die selbst verkleinert,
 * ist sie 0. Ein Außenabstand darunter nimmt der Fläche im Flexkasten der
 * Bühne genau diese Höhe; die Eingabe steht damit über der Tastatur und die
 * letzte Nachricht darüber.
 */
.rgd-app[data-schlank="1"] .rgc { margin-bottom: var(--rgc-tastatur); }


/* Jede Fläche in einer App-Schale darf schmaler werden als ihr Inhalt.
   `min-width: 0` an den Flex- und Rasterkindern ist die eine Regel, ohne die
   ein langer Sendungstitel das ganze Dokument breiter macht. */
.rgd-app [hidden] { display: none !important; }

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

.rgd-kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: calc(10px + var(--rgd-sicher-oben))
             calc(var(--rgc-rand) + var(--rgd-sicher-rechts))
             10px
             calc(var(--rgc-rand) + var(--rgd-sicher-links));
    border-bottom: 1px solid var(--rgc-kante);
    background: var(--rgc-flaeche);
}

.rgd-kopf__signet {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 10px;
}

.rgd-kopf__text { flex: 1 1 auto; min-width: 0; }

.rgd-kopf__marke {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rgd-kopf__claim {
    margin: 1px 0 0;
    font-size: 0.8125rem;
    color: var(--rgc-gedaempft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rgd-kopf__knopf {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--rgc-tippflaeche);
    height: var(--rgc-tippflaeche);
    border: 0;
    border-radius: 50%;
    background: var(--rgc-karte);
    color: var(--rgc-text);
    cursor: pointer;
}

.rgd-kopf__knopf svg { width: 22px; height: 22px; fill: currentColor; }

/* ── Das Live-Band ───────────────────────────────────────────────────────── */
/*
 * Der **eine** Ort, an dem steht, dass gerade etwas läuft. Es ist rot, schmal
 * und trägt drei Dinge: einen Punkt, der schlägt, den Titel der Sendung und
 * die Zahl der Leute im Chat. Geschlossen ist es nicht da – dann spricht die
 * Ruhefläche, und zwar sie allein. Das ist Martins „ohne doppelten Text".
 */
.rgd-live {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin: 0;
    padding: 9px calc(var(--rgc-rand) + var(--rgd-sicher-rechts))
             9px calc(var(--rgc-rand) + var(--rgd-sicher-links));
    background: linear-gradient(90deg, rgba(218, 0, 0, 0.95),
                                rgba(218, 0, 0, 0.62));
    color: #fff;
    font-size: 0.9375rem;
}

.rgd-app[data-offen="0"] .rgd-live { display: none; }

.rgd-live__punkt {
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #fff;
    animation: rgc-puls 2s ease-in-out infinite;
}

.rgd-live__wort {
    flex: 0 0 auto;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.8125rem;
}

.rgd-live__titel {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.9);
}

.rgd-live__zahl {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.rgd-live__zahl:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
    .rgd-live__punkt { animation: none; }
}

/* ── Die Bühne ───────────────────────────────────────────────────────────── */

.rgd-buehne {
    position: relative;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/*
 * Die Ruhefläche – der geschlossene Zustand.
 *
 * „Geschlossen: klar, ruhig, hochwertig, bewusst inaktiv – nicht wie ein
 * deaktivierter Formularbutton." Also kein Balken, kein ausgegrauter Knopf,
 * keine Kante: ein gedämpftes Zeichen, ein Satz, ein zweiter Satz, der sagt,
 * dass niemand nachladen muss. Und die Fläche darum, damit es nicht oben
 * klebt.
 */
.rgd-ruhe {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 0;
    padding: 24px calc(var(--rgc-rand) + 8px);
    text-align: center;
}

/*
 * Das Zeichen bleibt **hell** – auch im geschlossenen Zustand.
 *
 * Bis zum 14.09.2026 stand es hier mit `opacity: 0.4` und einem Grauschleier.
 * Martins Abnahme hat das umgedreht, und mit gutem Grund:
 *
 *   „Beim inaktiven Chat wird derzeit offenbar auch das schöne
 *   Guder-Draht-Logo mit abgedunkelt. … Das **Markenlogo selbst bleibt auch
 *   bei geschlossenem Chat in voller, klarer Darstellung** sichtbar.
 *   Marke/Identität soll nicht wie ein deaktiviertes Bedienelement aussehen.
 *   Abgedunkelt bzw. visuell zurückgenommen werden nur die tatsächlich
 *   inaktiven interaktiven Bereiche und der Status-/Hinweisbereich."
 *
 * Ruhig bleibt der Zustand trotzdem, und zwar dort, wo er hingehört: Das
 * Live-Band ist weg, die Eingabe ist weg, und die beiden Sätze darunter stehen
 * in gedämpfter Schrift. Die Marke tut nichts davon – sie ist kein
 * Bedienelement, das man abschalten könnte.
 */
.rgd-ruhe__zeichen {
    width: 72px; height: 72px;
    border-radius: 20px;
    opacity: 1;
}

.rgd-ruhe__wort {
    margin: 0;
    max-width: 22ch;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rgc-text);
}

.rgd-ruhe__satz {
    margin: 0;
    max-width: 32ch;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--rgc-gedaempft);
}

.rgd-app[data-offen="1"] .rgd-ruhe { display: none; }

/*
 * Und die Chatfläche selbst. In der Schale ist sie kein Blatt über etwas
 * anderem, sondern die Bühne: kein Aufrufknopf, kein eigener Kopf (den trägt
 * die Schale), kein Schatten, kein Radius, keine feste Position.
 */
.rgd-app .rgc {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.rgd-app .rgc-cta,
.rgd-app .rgc-kopf { display: none; }

.rgd-app .rgc-blatt {
    position: relative;
    left: auto; right: auto; bottom: auto;
    z-index: auto;
    flex: 1 1 auto;
    width: auto;
    height: auto;
    max-height: none;
    min-height: 0;
    padding-bottom: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.rgd-app .rgc-liste {
    display: flex;
    flex-direction: column;
    padding: 12px calc(var(--rgc-rand) + var(--rgd-sicher-rechts))
             12px calc(var(--rgc-rand) + var(--rgd-sicher-links));
}

/*
 * Ein kurzer Verlauf steht **unten** und nicht oben.
 *
 * Das ist der Unterschied zwischen einer App und einer Liste auf einer
 * Webseite: In einem Chat wächst das Gespräch von unten, und drei Nachrichten
 * am oberen Rand einer leeren Fläche sehen aus wie ein Artikel, der nicht
 * fertig geladen ist.
 *
 * Gemacht wird das über einen automatischen Außenabstand an einem
 * Pseudoelement und **nicht** über `justify-content: flex-end`: Der
 * Außenabstand fällt auf null, sobald der Inhalt höher ist als die Fläche –
 * die oberste Nachricht bleibt damit erreichbar. Bei `justify-content` ist
 * genau das in mehreren Browsern nicht so.
 */
.rgd-app .rgc-liste::before {
    content: "";
    margin-top: auto;
}

/*
 * Die Eingabe klebt unten – „Eingabe dauerhaft/sticky am unteren Rand
 * oberhalb Safe Area, große Touch-Ziele". Sie sitzt in der Schale über der
 * Fußleiste; die Safe Area unten gehört der Fußleiste, hier genügt der
 * Innenrand.
 */
.rgd-app .rgc-form,
.rgd-app .rgc-einstieg {
    flex: 0 0 auto;
    padding-left: calc(var(--rgc-rand) + var(--rgd-sicher-links));
    padding-right: calc(var(--rgc-rand) + var(--rgd-sicher-rechts));
    background: var(--rgc-flaeche);
}

.rgd-app .rgc-form { padding-top: 10px; padding-bottom: 10px; }

/* Geschlossen gibt es nichts zu tippen. Die Fläche verschwindet ganz, statt
   ein gesperrtes Formular zu zeigen: Ein ausgegrautes Eingabefeld ist genau
   das, was Martin „wie ein deaktivierter Formularbutton" genannt hat. */
.rgd-app[data-offen="0"] .rgc { display: none; }

/* ── Die Fußleiste ───────────────────────────────────────────────────────── */

.rgd-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    min-width: 0;
    padding: 4px calc(6px + var(--rgd-sicher-rechts))
             calc(4px + var(--rgd-sicher-unten))
             calc(6px + var(--rgd-sicher-links));
    border-top: 1px solid var(--rgc-kante);
    background: rgba(18, 18, 22, 0.96);
    backdrop-filter: saturate(140%) blur(12px);
}

.rgd-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 52px;
    padding: 6px 2px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--rgc-gedaempft);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rgd-tab svg { width: 22px; height: 22px; fill: currentColor; }

/*
 * Das Zeichen sitzt in einem eigenen Kasten, seit die Guder-Draht-Kachel einen
 * Zustandspunkt tragen kann (Martins Festlegung vom 14.09.2026: „Sprechblasen-
 * Icon + klarer Status"). Der Punkt liegt an seiner Ecke und **nicht** in der
 * Zeile: So ändert er nichts an der Höhe der Kachel, gleich ob er da ist oder
 * nicht – und eine Leiste, die beim Öffnen des Chats um ein paar Punkte
 * springt, wäre genau das, was an dieser Oberfläche gerade abgestellt wird.
 */
.rgd-tab__zeichen {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
}

.rgd-tab__punkt {
    position: absolute;
    top: -1px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rgc-rot-hell);
    box-shadow: 0 0 0 2px var(--rgc-flaeche);
    /* Ohne laufenden Chat ist er nicht da – und zwar wirklich nicht: Ein
       ausgegrauter Punkt sähe aus wie ein ungeklärtes Statussymbol, und genau
       so einen hat Martin am 14.09.2026 am Studiologo abbestellt. */
    opacity: 0;
    transition: opacity 200ms ease-out;
}

/* Gelesen wird das Merkmal am **Körper** und nicht an der Chatfläche: Im
   Webplayer steht die Leiste in der Kopfzeile und `#rgc` weiter unten – ein
   Nachfahrenselektor käme dort nie an. `chat-hoerer.js` setzt `data-draht`
   deshalb zusätzlich am `<body>`, und zwar in beiden Oberflächen. */
[data-draht="1"] .rgd-tab__punkt { opacity: 1; }

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

.rgd-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rgd-tab.is-aktiv { color: var(--rgc-rot-hell); }

.rgd-tab:active { background: var(--rgc-karte); }

/* Gesperrt muss man sehen. Im Webplayer ist die Kachel „Guder Draht" ein Knopf,
   und `chat-hoerer.js` sperrt ihn, solange kein Chat läuft – bis hierher sah er
   dabei aus wie jede andere Kachel. Auf dem Telefon ist er der einzige Weg in
   den Chat; ein Tippen, das wortlos nichts tut, ist dort keine Auskunft.
   Dieselbe Abschwächung wie am kompakten Einstieg neben der Playersteuerung
   (`static/player.css`, `.rgp-draht:disabled`) – ein Zustand, ein Aussehen. */
.rgd-tab:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Die Kachel `App` ist eine Sache des Telefons und des Tablets. „Auf
   Desktop/Laptop ausblenden oder nicht prominent zeigen, weil eine native
   Mobil-App dort fachlich keinen Sinn ergibt" – Martins Festlegung vom
   14.09.2026. Entschieden wird das an der Breite und nicht am `User-Agent`:
   Ein Server, der aus der Kennung schließt, rät. */
@media (min-width: 1024px) {
    .rgd-tab--app { display: none; }
}

/*
 * ── Die zwei Reihenfolgen der fünf Punkte (Issue #133) ──────────────────────
 *
 * Martin hat für Telefon und Schreibtisch zwei verschiedene genannt, und beide
 * gelten:
 *
 *   * Phone/Tablet: Webplayer, Guder Draht, App, Radio GUDE, GUDE.news.
 *   * Desktop:      Guder Draht, Webplayer, Radio GUDE, GUDE.news.
 *
 * Im Dokument steht die Desktop-Reihenfolge – sie ist zugleich die
 * Tabulatorreihenfolge, und tabuliert wird am Schreibtisch. Für die Fußleiste
 * dreht `order` die ersten beiden Einträge um; alle anderen behalten ihre
 * Stelle, weil `order: 0` der Vorgabewert ist und die Dokumentreihenfolge
 * innerhalb derselben Ordnungszahl gilt.
 *
 * Bis 1023 px und nicht „auf dem Telefon": Es ist dieselbe Grenze, an der die
 * Leiste von der Fußzeile in die Kopfzeile wandert. Zwei verschiedene Grenzen
 * für dieselbe Umstellung wären ein Fenster, in dem die Leiste oben steht und
 * trotzdem in der Telefonfolge.
 */
@media (max-width: 1023px) {
    .rgd-tab--player { order: -1; }
}

/*
 * Fünf Punkte auf einem schmalen Telefon. Bei 360 px Fensterbreite bleiben je
 * Kachel rund 68 Punkte – „Radio GUDE" und „GUDE.news" passen dort in der
 * bisherigen Größe nicht mehr und endeten als „Radio GU…", genau der Befund,
 * den Martin am 14.09.2026 für das Querformat gemeldet hat.
 *
 * Also eine Stufe kleiner und enger, und zwar nur dort, wo es nötig ist: Das
 * Zeichen bleibt groß genug zum Erkennen, das Wort wird schmaler, der
 * Innenabstand kleiner. Die Tippfläche bleibt bei 52 Punkten Höhe – sie ist
 * die Zahl, die nicht verhandelbar ist.
 */
@media (max-width: 420px) {
    .rgd-tabs { padding-left: calc(2px + var(--rgd-sicher-links));
                padding-right: calc(2px + var(--rgd-sicher-rechts)); }
    .rgd-tab { padding: 6px 1px; font-size: 0.625rem; letter-spacing: -0.01em; }
    .rgd-tab svg { width: 20px; height: 20px; }
    .rgd-tab__zeichen { width: 20px; height: 20px; }
}

/* ── Der Ruhezustand im Blatt (Issue #133) ──────────────────────────────────
 *
 * Er ist die Antwort auf eine Frage, die es vor der gemeinsamen Web-App nicht
 * gab: Was steht unter `live.radio-gude.de/draht`, wenn gerade kein Chat
 * läuft? Im Player und im Rahmen stellte sie sich nicht – dort geht das Blatt
 * im geschlossenen Zustand gar nicht erst auf. Als **Bereich** muss Guder
 * Draht aber jederzeit eine Antwort haben, und „gerade nicht" ist eine.
 *
 * Sichtbar ist er ausschließlich im geschlossenen Zustand (`[data-offen="0"]`
 * an `#rgc`) und nur, wenn das Skript ihn freigegeben hat. Solange er steht,
 * gibt es darunter nichts zu lesen und nichts zu schreiben: Liste, Einstieg
 * und Formular sind weg. Ein Eingabefeld unter „derzeit nicht aktiv" wäre die
 * Einladung, die der Server gleich darauf abweisen müsste.
 *
 * **Der Zustandsschalter hängt an `#rgc`.** Der Name `.rgc-ruhe` war schon
 * vergeben: Im Rahmen auf radio-gude.de trägt ihn der Hinweisabsatz **neben**
 * der Fläche (`chat/einbettung.html`), und der lebt von der Grundregel weiter
 * oben, die ihn mittig ins Blatt stellt. Ein unqualifiziertes
 * `.rgc-ruhe { display: none }` an dieser Stelle im Blatt hätte ihn dort
 * stillschweigend mit ausgeblendet. Der Block im Blatt steht immer innerhalb
 * von `#rgc`, der Absatz im Rahmen nie – die Einschränkung trennt beide
 * sauber.
 */
#rgc .rgc-ruhe {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1 1 auto;
    padding: 32px var(--rgc-rand);
    text-align: center;
}

#rgc[data-offen="0"] .rgc-ruhe:not([hidden]) { display: flex; }

/* Die Umfrage steht seit dem 15.09.2026 **in** der Liste und braucht hier
   keine eigene Zeile mehr: Wo die Liste weg ist, ist auch ihre Karte weg. */
#rgc[data-offen="0"] .rgc-ruhe:not([hidden]) ~ .rgc-einstieg,
#rgc[data-offen="0"] .rgc-ruhe:not([hidden]) ~ .rgc-liste,
#rgc[data-offen="0"] .rgc-ruhe:not([hidden]) ~ .rgc-form,
#rgc[data-offen="0"] .rgc-ruhe:not([hidden]) ~ .rgc-runter {
    display: none;
}

/*
 * Das Zeichen darüber – seit Issue #151 und nicht mehr der graue Punkt.
 *
 * Martins Befund vom 18.09.2026: Unter `live.radio-gude.de/draht` stand im
 * aufgeklappten, aber geschlossenen Blatt ein 12 Punkte großer grauer Kreis,
 * während dieselbe Lage auf der eigenen Hörerseite das rote Signet zeigt.
 * Zwei Antworten auf dieselbe Frage, und die schwächere stand im Player.
 *
 * Es ist dasselbe Bild wie dort (`.rgd-ruhe__zeichen`, `draht-icon-192.png`)
 * und dieselbe Regel: **hell und vollständig**, kein Grauschleier, keine
 * halbe Deckkraft. Zurückgenommen wird, was wirklich inaktiv ist – Liste,
 * Einstieg und Eingabe sind weg, die beiden Sätze darunter stehen leise.
 *
 * Kleiner ist es trotzdem: 64 statt 72 Punkte. Die App-Bühne hat die volle
 * Breite des Geräts, dieses Blatt am Schreibtisch 380 – „klar erkennbar,
 * nicht dominant" heißt hier eine Nummer kleiner.
 */
.rgc-ruhe__zeichen {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    opacity: 1;
}

.rgc-ruhe__wort {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--rgc-text);
}

.rgc-ruhe__satz {
    margin: 0;
    max-width: 34ch;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--rgc-gedaempft);
}

/* ── Das Infoblatt ───────────────────────────────────────────────────────── */

.rgd-blende {
    position: fixed;
    inset: 0;
    z-index: 8;
    background: rgba(0, 0, 0, 0.55);
}

.rgd-infoblatt {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9;
    display: flex;
    flex-direction: column;
    max-height: 82dvh;
    border-top: 1px solid var(--rgc-kante);
    border-radius: 18px 18px 0 0;
    background: #17171c;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.6);
}

.rgd-infoblatt__kopf {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px var(--rgc-rand) 10px;
    border-bottom: 1px solid var(--rgc-kante);
}

.rgd-infoblatt__titel {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
}

.rgd-infoblatt__inhalt {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px var(--rgc-rand)
             calc(20px + var(--rgd-sicher-unten));
}

.rgd-regeln {
    margin: 0 0 14px;
    padding-left: 20px;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.rgd-regeln li + li { margin-top: 6px; }

.rgd-datenschutz {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--rgc-gedaempft);
}

.rgd-infoblatt__zwischen {
    margin: 22px 0 10px;
    font-size: 0.9375rem;
    font-weight: 700;
}

.rgd-infoblatt__satz {
    margin: 0 0 10px;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--rgc-gedaempft);
    overflow-wrap: anywhere;
}

.rgd-infoblatt__satz strong { color: var(--rgc-text); }
.rgd-infoblatt__satz a { color: var(--rgc-rot-hell); }

/*
 * Wer hier spricht – zwei Sätze und zwei Verweise, ganz oben im Infoblatt.
 *
 * Martins Abnahme vom 14.09.2026: „kurz deutlich machen, dass Guder Draht der
 * Live-Chat von Radio GUDE ist, und einen klaren Link auf die
 * Radio-GUDE-Impressumsseite vorsehen … Keine lange juristische Textwand im
 * Dialog; kurze Einordnung + klare Links reichen."
 */
.rgd-anbieter {
    margin: 0 0 10px;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--rgc-gedaempft);
}

.rgd-anbieter strong { color: var(--rgc-text); }
.rgd-anbieter a { color: var(--rgc-rot-hell); }

/* Die beiden Rechtsverweise stehen als Paar und nicht im Fließtext: Sie sind
   Wege und keine Aussage. Tippgröße haben sie trotzdem. */
.rgd-anbieter--wege {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rgc-kante);
}

.rgd-anbieter--wege a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    font-weight: 600;
    text-decoration: underline;
}

/*
 * Der Weg auf das Telefon – und nur dorthin.
 *
 * Martins Abnahme vom 14.09.2026: „Die Hinweise/Buttons `Im App Store …` und
 * `Bei Google Play …` sind auf Desktop/Laptop unnötig. Sie sollen nur auf
 * passenden mobilen Endgeräten (Phone/Tablet, je Plattform passend)
 * erscheinen." Dieselbe Grenze wie bei der App-Kachel in der Leiste – und
 * dieselbe Begründung: Entschieden wird an der Breite und nicht am
 * `User-Agent`.
 */
@media (min-width: 1024px) {
    .rgd-mobilteil { display: none; }
}

.rgd-appwahl { display: grid; gap: 8px; margin-bottom: 14px; }

.rgd-appknopf {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--rgc-tippflaeche);
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--rgc-rot);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
}

/*
 * Welche Anleitung oben steht, entscheidet die Plattform – gesetzt von
 * `draht-plattform.js` als `data-plattform` am Körper.
 *
 * Die Regeln fragen seit dem 14.09.2026 **nur** nach dem Attribut und nicht
 * mehr zusätzlich nach `.rgd-app`: Dieselbe Wahl trifft jetzt auch die Seite
 * hinter dem App-Link (`/app`), und die ist keine App-Schale, sondern eine
 * Haltestelle (`.rgd-halt`). Zwei Fassungen derselben sechs Regeln wären die
 * Doppelpflege, die dieses Stylesheet sonst überall vermeidet.
 *
 * Ohne Skript ist keine Plattform gesetzt; dann stehen alle drei Anleitungen
 * da, und das ist richtig so: Drei kurze Absätze sind besser als eine
 * Anleitung für das falsche Telefon.
 *
 * Betroffen sind ausdrücklich nur die **Anleitungen**, nicht die beiden Wege
 * in die Stores. Die bleiben immer beide da – ein Besucher am Schreibtisch
 * bekäme sonst gar keinen –, und die passende steht über `order` oben.
 */
[data-plattform="ios"] .rgd-infoblatt__satz[data-fuer="android"],
[data-plattform="ios"] .rgd-infoblatt__satz[data-fuer="andere"],
[data-plattform="android"] .rgd-infoblatt__satz[data-fuer="ios"],
[data-plattform="android"] .rgd-infoblatt__satz[data-fuer="andere"],
[data-plattform="andere"] .rgd-infoblatt__satz[data-fuer="ios"],
[data-plattform="andere"] .rgd-infoblatt__satz[data-fuer="android"] {
    display: none;
}

[data-plattform="ios"] .rgd-appknopf[data-fuer="ios"],
[data-plattform="android"] .rgd-appknopf[data-fuer="android"] {
    order: -1;
}

/* Und der, der nicht zum Telefon gehört, steht leiser da: Er ist ein
   Angebot und keine Empfehlung. */
[data-plattform="ios"] .rgd-appknopf[data-fuer="android"],
[data-plattform="android"] .rgd-appknopf[data-fuer="ios"] {
    background: transparent;
    border: 1px solid var(--rgc-kante);
    color: var(--rgc-gedaempft);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   Querformat und größere Geräte
   ══════════════════════════════════════════════════════════════════════════ */
/*
 * „Bei Querformat die zusätzliche Breite sinnvoll nutzen … nicht einfach die
 * Hochformat-Webseite verbreitern."
 *
 * Im Querformat eines Telefons ist die Höhe das knappe Gut, nicht die Breite.
 * Also: Kopf und Fußleiste werden flacher, die Fußleiste stellt Zeichen und
 * Wort nebeneinander statt übereinander, und der Claim geht – er sagt nichts,
 * was der Name nicht schon sagt.
 */
@media (orientation: landscape) and (max-height: 500px) {
    .rgd-kopf { padding-top: calc(6px + var(--rgd-sicher-oben)); padding-bottom: 6px; }
    .rgd-kopf__signet { width: 30px; height: 30px; }
    .rgd-kopf__marke { font-size: 1rem; }
    .rgd-kopf__claim { display: none; }
    .rgd-live { padding-top: 6px; padding-bottom: 6px; }

    .rgd-ruhe { gap: 10px; padding: 12px var(--rgc-rand); }
    .rgd-ruhe__zeichen { width: 48px; height: 48px; }
    .rgd-ruhe__wort { font-size: 1.0625rem; }

    /* Und dasselbe für den Ruhezustand **im Blatt** (Issue #151): Im
       Querformat ist die Höhe das knappe Gut, und das Zeichen darf davon
       nicht mehr nehmen als die beiden Sätze darunter. */
    .rgc-ruhe__zeichen { width: 48px; height: 48px; border-radius: 14px; }

    .rgd-tab {
        flex-direction: row;
        gap: 7px;
        min-height: 42px;
        font-size: 0.75rem;
    }
    .rgd-tab svg { width: 18px; height: 18px; }

    .rgd-infoblatt { max-height: 92dvh; }
}

/*
 * Tablet und Schreibtisch. Der Chat bleibt eine App und wird keine Webseite
 * mit Seitenspalten – aber eine Zeile Text über die volle Breite eines
 * 27-Zöllers liest niemand. Also eine Lesespalte in der Mitte, die Fußleiste
 * darunter genauso begrenzt, und der Kopf über die volle Breite: Er ist die
 * Kante der App.
 */
@media (min-width: 820px) {
    .rgd-app {
        grid-template-columns: 1fr;
    }

    .rgd-kopf { justify-content: center; }
    .rgd-kopf__text,
    .rgd-kopf__signet { flex-grow: 0; }
    .rgd-kopf { gap: 14px; }

    .rgd-live,
    .rgd-buehne > .rgd-ruhe,
    .rgd-app .rgc-liste,
    .rgd-app .rgc-form,
    .rgd-app .rgc-einstieg,
    .rgd-tabs {
        width: 100%;
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }

    .rgd-infoblatt {
        left: 50%;
        right: auto;
        width: min(560px, 100%);
        transform: translateX(-50%);
        border-radius: 18px 18px 0 0;
    }

    /* Am Schreibtisch darf die Fußleiste ruhig etwas größer sein – dort ist
       sie eine Navigation und keine Daumenzone. */
    .rgd-tab { min-height: 56px; font-size: 0.75rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Laptop und Schreibtisch: ein eigenes Layout und keine große Telefonapp
   ══════════════════════════════════════════════════════════════════════════ */
/*
 * Martins Abnahme vom 14.09.2026, und sie ist eindeutig:
 *
 *   „Die aktuelle kompakte App-Ansicht mit fester 4er-Bottom-Navigation ist
 *   ausdrücklich die **Phone-Ansicht**. Auf Laptop/Desktop soll eine eigene,
 *   breitere Desktop-Darstellung genutzt werden, die den vorhandenen Platz
 *   sinnvoll verwendet und nicht einfach die schmale Phone-App großzieht.
 *   Desktop/Laptop: kein künstlich schmaler Handyrahmen und keine dauerhaft am
 *   unteren Browserrand klebende Phone-Navigation; stattdessen passende
 *   Desktop-Navigation/Seitenstruktur und großzügigere Chatfläche."
 *
 * Also **dieselben vier Ziele an einer anderen Stelle**: Ab 1024 px wandert
 * die Fußleiste in die Kopfzeile und wird dort zu einer waagerechten
 * Navigation – Zeichen und Wort nebeneinander, rechts neben der Marke. Das
 * Markup bleibt dasselbe; ein zweiter Satz Verweise für den Schreibtisch wäre
 * die Doppelpflege, an der die beiden Ansichten irgendwann verschieden viele
 * Ziele hätten.
 *
 * Gemacht wird das über benannte Rasterflächen. Das ist mehr als Kosmetik: Das
 * Live-Band ist im geschlossenen Zustand `display: none` und erzeugt dann gar
 * keinen Kasten – ohne feste Zuweisung rutschte alles eine Zeile hoch (siehe
 * den Kommentar bei `grid-row` oben).
 *
 * 1024 px und nicht 820: Ein Tablet im Hochformat ist ein Gerät zum Halten,
 * und dort ist die Leiste unten am Daumen richtig. Der Laptop fängt eine
 * Stufe darüber an.
 */
@media (min-width: 1024px) {
    .rgd-app {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr);
        grid-template-areas:
            "kopf   tabs"
            "live   live"
            "buehne buehne";
    }

    /* Dieselbe Schreibweise wie bei den Zeilen oben – und zwar aus einem
       handfesten Grund: `.rgd-app > .rgd-tabs { grid-row: 4 }` ist der
       spezifischere Selektor und überschriebe ein `grid-area` hier, sodass
       die Leiste trotz Rasterfläche in einer vierten Zeile am Fensterboden
       landete. Genau so sah es beim ersten Umbau aus. */
    .rgd-app > .rgd-kopf   { grid-area: kopf; justify-content: flex-start; }
    .rgd-app > .rgd-tabs   { grid-area: tabs; }
    .rgd-app > .rgd-live   { grid-area: live; }
    .rgd-app > .rgd-buehne { grid-area: buehne; }

    /* Die Kopfzeile ist am Schreibtisch die Kante der Anwendung: Marke links,
       Navigation rechts, eine durchgehende Linie darunter. Die Trennlinie
       gehört deshalb beiden Flächen und nicht nur einer. */
    .rgd-kopf {
        padding-right: 8px;
        border-bottom: 1px solid var(--rgc-kante);
    }

    .rgd-tabs {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 4px;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0 calc(var(--rgc-rand) + var(--rgd-sicher-rechts)) 0 0;
        border-top: 0;
        border-bottom: 1px solid var(--rgc-kante);
        background: transparent;
        backdrop-filter: none;
    }

    /* Aus der Kachel wird ein Eintrag einer Navigation: Zeichen und Wort
       nebeneinander, in Lesegröße, mit Tippziel. */
    .rgd-tab {
        flex: 0 0 auto;
        flex-direction: row;
        gap: 8px;
        min-height: 44px;
        padding: 8px 14px;
        font-size: 0.875rem;
    }

    .rgd-tab span { max-width: none; }

    /* Der aktive Eintrag ist am Schreibtisch nicht nur farbig, sondern
       unterlegt – auf einer waagerechten Leiste ist Farbe allein zu wenig. */
    .rgd-tab.is-aktiv {
        border-radius: 999px;
        background: rgba(218, 0, 0, 0.16);
    }

    /*
     * Und die Chatfläche wird großzügiger. 1040 statt 820 Punkte: breit genug,
     * dass eine Sendung mit vielen kurzen Zurufen nicht wie eine Liste von
     * Einzeilern aussieht, und schmal genug, dass eine Zeile Text auf einem
     * 27-Zöller noch in einem Blick zu lesen ist.
     */
    .rgd-live,
    .rgd-buehne > .rgd-ruhe,
    .rgd-app .rgc-liste,
    .rgd-app .rgc-form,
    .rgd-app .rgc-einstieg {
        max-width: 1040px;
    }

    /* Etwas mehr Luft an den Rändern – der Platz ist da, und ein Chat, der am
       Fensterrand klebt, sieht aus wie ein eingebetteter Rahmen. */
    .rgd-app .rgc-liste { padding-top: 18px; }
    .rgd-app .rgc-form { padding-bottom: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Der Schreibmodus – die Tastatur ist offen, das Schreiben hat Vorrang
   ══════════════════════════════════════════════════════════════════════════ */
/*
 * Issue #171, aus Martins mobilem Praxistest vom 22.09.2026: Sobald auf dem
 * iPhone die Bildschirmtastatur aufgeht, streiten Kopf, Live-Band, Chat,
 * Eingabe und Fußleiste um eine Höhe, die es nicht mehr gibt. Sein Bild zeigte
 * beides – zusammengedrückte Eingabefelder und daneben Flächen, die niemand
 * braucht, solange jemand schreibt.
 *
 * Die Antwort ist **ein** Zustand und kein zweiter Bauplan: `data-schreibt="1"`
 * am `<html>`. Wer ihn setzt und woraus, steht in `static/chat-hoerer.js`; hier
 * steht nur, was er kostet. Drei Dinge, und alle drei kommen ohne Neuaufbau
 * zurück:
 *
 *   1. **Das Live-Band geht.** Es sagt „es läuft gerade" – das weiß, wer
 *      gerade mitschreibt, bereits.
 *   2. **Die Fußleiste geht.** Sie ist die Navigation zwischen fünf Bereichen;
 *      wer im Namensfeld steht, wechselt nicht den Bereich. Der Auftrag sagt
 *      das wörtlich: „Priorität hat in diesem Zustand das Schreiben und
 *      Absenden einer Nachricht, nicht die dauerhafte Sichtbarkeit
 *      nachrangiger Navigationselemente."
 *   3. **Der Kopf wird flach.** Marke und Signet bleiben – wer hier spricht,
 *      gehört zum Vertrauen der Fläche –, der Claim geht: Er sagt nichts, was
 *      der Name nicht schon sagt. Dieselbe Entscheidung wie im Querformat
 *      weiter oben, aus demselben Grund.
 *
 * Und die Schale bekommt die Höhe, die wirklich da ist. `100dvh` ist auf iOS
 * **nicht** die Höhe über der Tastatur: Die dynamische Einheit folgt der
 * Adressleiste, nicht dem Eingabefeld. Was fehlt, steht in `--rgc-tastatur`,
 * und auf Android mit `interactive-widget=resizes-content` ist es null – dort
 * schrumpft `dvh` von selbst mit. Eine Rechnung, zwei Plattformen.
 *
 * Nichts davon hat eine Bewegung: Ein Kopf, der sich in das Bild hineinfaltet,
 * während die Tastatur hochfährt, ist genau das „Springen/Flackern", das der
 * Auftrag ausschließt.
 *
 * Am Schreibtisch gibt es diesen Zustand nicht. Gesetzt wird er nur unterhalb
 * von 820 px – derselben Grenze, an der das Blatt zur Spalte wird.
 */

html[data-schreibt="1"] .rgd-app {
    height: calc(100dvh - var(--rgc-tastatur));
}

/*
 * Und genau **einmal** abgezogen.
 *
 * Die schlanke Ansicht für die native App nimmt der Chatfläche dieselbe Höhe
 * schon über einen Außenabstand (`.rgd-app[data-schlank="1"] .rgc` weiter
 * oben). Beides zusammen zöge die Tastatur zweimal ab, und die Eingabe stünde
 * eine Tastaturhöhe zu hoch über ihr. Im Schreibmodus gilt deshalb die
 * Schalenhöhe, und der Außenabstand tritt zurück; außerhalb – Tastatur unter
 * der Schwelle, Tablet, kein Fokus im Feld – bleibt er der einzige Weg und
 * arbeitet unverändert.
 */
html[data-schreibt="1"] .rgd-app[data-schlank="1"] .rgc { margin-bottom: 0; }

html[data-schreibt="1"] .rgd-live,
html[data-schreibt="1"] .rgd-app > .rgd-tabs { display: none; }

html[data-schreibt="1"] .rgd-kopf {
    padding-top: calc(6px + var(--rgd-sicher-oben));
    padding-bottom: 6px;
}

html[data-schreibt="1"] .rgd-kopf__signet { width: 30px; height: 30px; }
html[data-schreibt="1"] .rgd-kopf__marke { font-size: 1rem; }
html[data-schreibt="1"] .rgd-kopf__claim { display: none; }

/*
 * Ohne Fußleiste endet die Eingabe am Bildschirmrand – und auf einem iPhone
 * läge der Senden-Knopf dann unter dem Home-Indikator. Dieselbe Übergabe wie
 * in der schlanken Ansicht weiter oben: Die Safe Area unten gehört dem, was
 * wirklich unten steht.
 */
html[data-schreibt="1"] .rgd-app .rgc-form {
    padding-bottom: calc(8px + var(--rgd-sicher-unten));
}

/*
 * Und im Blatt – also im Webplayer unter `live.radio-gude.de` und auf
 * radio-gude.de im Rahmen – wird derselbe Gedanke am Kopf des Blattes
 * sichtbar: Griff, Titel und Kreuz bleiben, die Luft darum geht. Das Kreuz
 * behält seine 44 Punkte; die Tippfläche aus Issue #35 wird auch hier nicht
 * gespart.
 */
html[data-schreibt="1"] .rgc-kopf { padding: 8px var(--rgc-rand) 6px; }
html[data-schreibt="1"] .rgc-liste { padding-top: 8px; padding-bottom: 8px; }

/*
 * Und der Streifen über dem Blatt geht an den Chat (Issue #183).
 *
 * In Ruhe bleibt oben ein schmaler Rand frei – zehn Punkte über der
 * Sicherheitszone, an denen zu sehen ist, dass etwas darunterliegt. Das ist im
 * Webplayer richtig: Dort ist Guder Draht ein Blatt über dem Player, und ein
 * Blatt ohne sichtbaren Rand ist keines mehr.
 *
 * Beim Schreiben ist es das nicht. Martins Abnahme nennt es „eigener
 * unnötiger Leer-/Reservebereich direkt unterhalb der von iOS/Safari
 * tatsächlich vorgegebenen oberen Fläche": Wer tippt, weiß, dass der Chat
 * offen ist, und braucht dafür keinen Beleg am oberen Rand. Übrig bleibt die
 * Sicherheitszone selbst – sie gehört der Uhr und den Statussymbolen des
 * Geräts und wird hier nicht angetastet.
 *
 * Gesetzt wird die Variable und nicht die Kante: An ihr hängen `height` und
 * `max-height` des Blattes gemeinsam, und zwei Regeln für dieselbe Kante waren
 * schon einmal der Fehler (siehe `blatt_anordnen()` in
 * `static/draht-knopf.js`).
 */
html[data-schreibt="1"] .rgc {
    --rgc-blatt-oben: env(safe-area-inset-top, 0px);
}

/* ══════════════════════════════════════════════════════════════════════════
   Haltestellen unter draht.radio-gude.de: 404, 500 und „kein Zugang"
   ══════════════════════════════════════════════════════════════════════════ */
/*
 * Drei Seiten, die dieselbe Fläche brauchen und sonst nichts: die Fehlerseite
 * (`chat/fehler_draht.html`) und die Seite für „angemeldet, aber ohne
 * Chat-Zugang" (`chat/kein_zugang_draht.html`).
 *
 * Sie stehen hier, weil der Rahmen der Redaktion unter diesem Namen nichts zu
 * suchen hat: Seine Navigation zeigte auf Adressen, die es hier nicht gibt.
 * Genau daran ist Martins Rückweg aus dem Studio am 13.09.2026 gescheitert.
 */
.rgd-halt {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    margin: 0;
    padding: 24px max(20px, env(safe-area-inset-left, 0px))
             calc(24px + env(safe-area-inset-bottom, 0px))
             max(20px, env(safe-area-inset-right, 0px));
    background: #121216;
    color: #f5f5f7;
    color-scheme: dark;
    font: 400 1rem/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Kein `overflow-x: hidden` – auch hier nicht. Es versteckte einen
       Überlauf, statt ihn zu beheben, und die Messung im Browser-QM wäre
       damit wertlos. Was hier steht, bricht um (`overflow-wrap: anywhere`
       am Satz) oder ist von vornherein schmaler als die Fläche. */
}

.rgd-halt__flaeche {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 34rem;
    text-align: center;
}

.rgd-halt__zeichen { width: 72px; height: 72px; border-radius: 20px; }

.rgd-halt__titel {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.25;
}

.rgd-halt__satz {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(245, 245, 247, 0.72);
    overflow-wrap: anywhere;
}

.rgd-halt__satz strong,
.rgd-halt__satz em { color: #f5f5f7; font-style: normal; }

.rgd-halt__wege {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
    width: 100%;
}

.rgd-halt__weg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #f5f5f7;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.rgd-halt__weg--haupt {
    border-color: #da0000;
    background: #da0000;
    color: #fff;
}

/* Die beiden Store-Wege auf der Seite hinter dem App-Link. Sie stehen in einer
   Fläche, die ihre Kinder mittig stellt – ohne Breitenangabe wären sie so
   breit wie ihre Beschriftung und damit verschieden breit. */
.rgd-halt__wahl {
    width: 100%;
    max-width: 22rem;
    margin-top: 6px;
}