/*
 * 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 bis zur halben Höhe
 *      reicht. Der Player bleibt darüber sichtbar und läuft weiter; das
 *      Cover wird nicht verdeckt, der Display-Modus nicht zerstört.
 *   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);

    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 endet bei 62 % der Höhe. Der Rest gehört weiter dem
 * Player: Cover, Titel und Play-Knopf bleiben sichtbar, und der Ton läuft
 * ohnehin unberührt weiter – dieses Stylesheet fasst kein Audioelement an,
 * und `chat-hoerer.js` auch nicht.
 *
 * `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; bottom: 0;
    /* 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: 62dvh;
    /* 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(62dvh - 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);
}

.rgc-kopf {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 10px;
    padding: 14px var(--rgc-rand) 10px;
    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 {
    grid-column: 1;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
}

.rgc-zahl {
    grid-column: 1;
    margin: 0;
    font-size: 0.875rem;
    color: var(--rgc-gedaempft);
}

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

.rgc-zu {
    grid-column: 2;
    grid-row: 1 / span 2;
    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);
}

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

.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);
}

.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
   ══════════════════════════════════════════════════════════════════════════ */

.rgc-umfrage {
    padding: 10px var(--rgc-rand);
    border-bottom: 1px solid var(--rgc-kante);
    background: var(--rgc-karte);
}

.rgc-umfrage__frage {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
}

.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; }

.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;
        bottom: 0;
        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;
    width: auto;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.rgc--eingebettet .rgc-griff { 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.
 */

.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; }


/* 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); }

/* 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; }
}

/* ── 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; }

    .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; }
}

/* ══════════════════════════════════════════════════════════════════════════
   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;
}