/*
 * Die öffentliche Landingpage des Partnerplayers (Issue #173).
 *
 * Ein eigenes, kleines Stylesheet und keine Erweiterung von `style.css`:
 * Diese Seite steht unter einem eigenen Namen, hat keine Navigation, keine
 * Tabelle, kein Formular und keine Rollenmarke – von den rund viertausend
 * Zeilen des Backends bräuchte sie nichts und lüde sie trotzdem alle.
 *
 * Die dunkle Fläche ist dieselbe wie in `chat.css` und `player.css`
 * (`#121216`), das Rot ist Radio-GUDE-Rot aus dem Designhandbuch
 * (`app/marke.py`, Schlüssel `rot`). Sie stehen hier noch einmal und erben
 * nicht: Diese Datei muss allein funktionieren – unter `player.radio-gude.de`
 * gibt es kein zweites Stylesheet daneben.
 *
 * Responsiv über genau zwei Haltepunkte und ohne Gerätenamen: Bis 640 px eine
 * Spalte, darüber drei Karten nebeneinander. Mehr braucht eine Seite mit sechs
 * Abschnitten nicht.
 *
 * Zwei Farbschemata seit dem 23.09.2026 (Nacharbeit zu Issue #173). Martin hat
 * die Abnahme daran zurückgewiesen: Der Knopf „Radio GUDE kontaktieren" trug
 * rote Schrift auf roter Fläche und wirkte deaktiviert. Die Ursache war keine
 * Farbwahl, sondern eine Spezifität – `.rgpl a` (0,1,1) ist stärker als
 * `.rgpl__knopf` (0,1,0) und hat dem Knopf seine weiße Schrift weggenommen.
 * Deshalb stehen die Knopffarben hier als `.rgpl a.rgpl__knopf`: gleiche
 * Ebene wie die Verweisregel, und die Komponente gewinnt. Aus demselben Grund
 * steht der leise Verweis im Kopf als `.rgpl a.rgpl__hoeren`.
 *
 * Alle vier Zustände sind ausgeschrieben – Ruhe, Hover, Tastaturfokus und
 * gedrückt, dazu „nicht verfügbar" –, und zwar für **beide** Schemata mit
 * demselben Satz Variablen. Es gibt hier keine Dark-Mode-Sonderregel, die das
 * helle Schema verschlechtern könnte: Das dunkle ist der Standardfall, das
 * helle tauscht unter `prefers-color-scheme: light` nur die Werte aus.
 *
 * Die Kontraste sind gerechnet und nicht geschätzt (WCAG 2.1, Verhältnis der
 * relativen Leuchtdichten); `tests/test_partnereinbettung.py` rechnet sie in
 * Abschnitt F nach. Weiß auf `--rgpl-rot` ergibt 5,3:1, auf der Hover-Fläche
 * 4,8:1 und auf der gedrückten 7,4:1 – alle drei über den 4,5:1 für Fließtext.
 */

:root {
    color-scheme: dark light;

    --rgpl-rot: #da0000;
    --rgpl-rot-hell: #ff3b30;
    /* Die drei Flächen des roten Knopfes. Hover wird **heller** und gedrückt
       **dunkler** – beides bleibt mit weißer Schrift über 4,5:1. Die
       naheliegende Wahl `--rgpl-rot-hell` für Hover wäre genau das nicht
       gewesen (3,6:1). */
    --rgpl-knopf: #da0000;
    --rgpl-knopf-hover: #e51010;
    --rgpl-knopf-druck: #b00000;
    --rgpl-knopf-schrift: #ffffff;
    /* „Nicht verfügbar" ist keine Farbe weniger, sondern eine andere: gedämpft
       genug, um nicht einzuladen, und lesbar genug, um die Beschriftung noch
       zu erkennen (5,4:1). */
    --rgpl-knopf-aus: #26262d;
    --rgpl-knopf-aus-schrift: #9a9aa4;
    --rgpl-fokus: #ffffff;
    --rgpl-flaeche: #121216;
    --rgpl-flaeche-still: #17171d;
    --rgpl-karte: rgba(255, 255, 255, 0.06);
    --rgpl-kante: rgba(255, 255, 255, 0.13);
    --rgpl-text: #f5f5f7;
    --rgpl-gedaempft: rgba(245, 245, 247, 0.72);
    /* Der leiseste Ton der Seite – Fußverweise und die Notiz neben dem
       Kontaktknopf. Bei 0,46 trug er auf der dunklen Fläche nur 4,4:1 und
       stand damit knapp unter der Grenze; die Notiz steht neben genau dem
       Knopf, dessen Lesbarkeit Martin bemängelt hat. */
    --rgpl-leise: rgba(245, 245, 247, 0.54);
    /* Die Farbe eines Verweises im Fließtext – und nur dort. */
    --rgpl-verweis: #ff3b30;
    --rgpl-code: #0b0b0d;
    --rgpl-code-schrift: #e8ecf8;
    /* Das Glimmen hinter der Bühne. Im hellen Schema deutlich blasser: Auf
       Weiß wäre dieselbe Deckung ein rosa Feld statt einer Andeutung. */
    --rgpl-glimmen: rgba(218, 0, 0, 0.30);
    --rgpl-radius: 16px;
    /* Die 44-px-Tippfläche aus Issue #35 gilt hier wie überall. */
    --rgpl-tippflaeche: 44px;
}

/* ── Das helle Schema ──────────────────────────────────────────────────────
 *
 * Kein zweites Stylesheet und keine zweite Seite: Ausgetauscht werden genau
 * die Variablen oben. Was darunter steht, kennt nur Namen und gilt für beide
 * Schemata gleichermaßen – das ist die Zusage, dass eine Korrektur im dunklen
 * Schema das helle nicht verschlechtert und umgekehrt.
 *
 * Das Rot wird hier dunkler (`#c20000`): Radio-GUDE-Rot trägt auf Weiß noch
 * 5,3:1 als Schrift, aber ein Verweis in Fließtext hat es mit `#ff3b30` nur
 * auf 3,6:1 gebracht. Ein helles Schema, das seine Verweise nicht lesbar hat,
 * wäre die Sonderlösung, die dieser Abschnitt vermeiden soll.
 */
@media (prefers-color-scheme: light) {
    :root {
        --rgpl-rot: #c20000;
        --rgpl-rot-hell: #c20000;
        --rgpl-knopf: #c20000;
        --rgpl-knopf-hover: #a50000;
        --rgpl-knopf-druck: #8a0000;
        --rgpl-knopf-schrift: #ffffff;
        --rgpl-knopf-aus: #e6e6ea;
        --rgpl-knopf-aus-schrift: #5f5f68;
        --rgpl-fokus: #1d1d1f;
        --rgpl-flaeche: #ffffff;
        --rgpl-flaeche-still: #f5f5f7;
        --rgpl-karte: rgba(0, 0, 0, 0.035);
        --rgpl-kante: rgba(0, 0, 0, 0.14);
        --rgpl-text: #1d1d1f;
        --rgpl-gedaempft: rgba(29, 29, 31, 0.74);
        --rgpl-leise: rgba(29, 29, 31, 0.66);
        --rgpl-verweis: #c20000;
        --rgpl-code: #1d1d1f;
        --rgpl-code-schrift: #f0f2f8;
        --rgpl-glimmen: rgba(218, 0, 0, 0.10);
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.rgpl {
    margin: 0;
    background: var(--rgpl-flaeche);
    color: var(--rgpl-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.rgpl__breite {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

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

.rgpl__kopf {
    border-bottom: 1px solid var(--rgpl-kante);
    padding: 14px 0;
}

.rgpl__kopf .rgpl__breite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rgpl__marke {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Die rote Kachel des Senders, nicht der Stift des Backends. Rund wie überall
   in diesem Haus, wo sie klein steht. */
.rgpl__signet {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 9px;
}

.rgpl__wortmarke {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* `.rgpl a.rgpl__hoeren` und nicht `.rgpl__hoeren`: sonst gewinnt die
   Verweisregel am Ende dieser Datei (0,1,1) und der Kopf trägt einen roten
   Verweis, wo ein leiser stehen soll. */
.rgpl a.rgpl__hoeren {
    color: var(--rgpl-gedaempft);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    /* Auch der leise Verweis im Kopf ist ein Ziel für einen Daumen. */
    min-height: var(--rgpl-tippflaeche);
    display: inline-flex;
    align-items: center;
}

.rgpl a.rgpl__hoeren:hover,
.rgpl a.rgpl__hoeren:focus-visible { color: var(--rgpl-text); }

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

.rgpl__buehne {
    padding: 56px 0 48px;
    /* Die Senderkante als weiches Glimmen dahinter – der einzige Verlauf auf
       dieser Seite, und er liegt hinter dem Inhalt, wie es das Designhandbuch
       verlangt. */
    background:
        radial-gradient(900px 420px at 18% -10%,
                        var(--rgpl-glimmen) 0%, rgba(218, 0, 0, 0) 70%);
}

.rgpl__augenbraue {
    margin: 0 0 10px;
    color: var(--rgpl-verweis);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rgpl__titel {
    margin: 0;
    font-size: clamp(32px, 7vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 800;
}

.rgpl__claim {
    margin: 22px 0 0;
    max-width: 44ch;
    font-size: clamp(18px, 2.6vw, 22px);
    color: var(--rgpl-gedaempft);
}

.rgpl__aktionen {
    margin: 30px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

/* ── Die Knöpfe ────────────────────────────────────────────────────────────
 *
 * Fünf Zustände, jeder ausgeschrieben, jeder in beiden Schemata: Ruhe, Hover,
 * Tastaturfokus, gedrückt und „nicht verfügbar". Die Auswahl heißt überall
 * `.rgpl a.rgpl__knopf` bzw. `.rgpl .rgpl__knopf` – die Verweisregel am Ende
 * dieser Datei ist sonst die stärkere und färbt die Beschriftung rot.
 *
 * `border: 1px solid transparent` steht schon in der Ruhe: Der stille Knopf
 * daneben hat eine Kante, und ohne die unsichtbare hier wären die beiden
 * Knöpfe zwei Pixel verschieden hoch.
 */
.rgpl .rgpl__knopf,
.rgpl a.rgpl__knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--rgpl-tippflaeche);
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--rgpl-knopf);
    color: var(--rgpl-knopf-schrift);
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.rgpl .rgpl__knopf:hover,
.rgpl a.rgpl__knopf:hover {
    background: var(--rgpl-knopf-hover);
    color: var(--rgpl-knopf-schrift);
}

/* Der Fokus ist ein **Ring** und keine Farbe: Eine Fläche, die sich beim
   Tabben nur leicht tönt, ist auf einem hellen Schirm nicht zu sehen. Der
   Ring sitzt außerhalb der Kante und hat darum einen Gegenring in der Farbe
   der Seite – so bleibt er auf jedem Untergrund sichtbar. */
.rgpl .rgpl__knopf:focus-visible,
.rgpl a.rgpl__knopf:focus-visible {
    outline: 3px solid var(--rgpl-fokus);
    outline-offset: 3px;
    background: var(--rgpl-knopf-hover);
    color: var(--rgpl-knopf-schrift);
}

.rgpl .rgpl__knopf:active,
.rgpl a.rgpl__knopf:active {
    background: var(--rgpl-knopf-druck);
    color: var(--rgpl-knopf-schrift);
}

/* „Nicht verfügbar" gibt es auf der Landingpage nicht und auf der Probeseite
   sehr wohl – dort ist der Knopf zur Vorschau aus, solange keine verbunden
   ist. Beide Schreibweisen stehen hier: `disabled` für einen echten Knopf,
   `aria-disabled` für einen Verweis, der keiner sein darf. */
.rgpl .rgpl__knopf:disabled,
.rgpl .rgpl__knopf[aria-disabled="true"],
.rgpl a.rgpl__knopf[aria-disabled="true"] {
    background: var(--rgpl-knopf-aus);
    color: var(--rgpl-knopf-aus-schrift);
    border-color: var(--rgpl-kante);
    cursor: not-allowed;
    pointer-events: none;
}

.rgpl .rgpl__knopf--still,
.rgpl a.rgpl__knopf--still {
    background: transparent;
    border-color: var(--rgpl-kante);
    color: var(--rgpl-text);
}

.rgpl .rgpl__knopf--still:hover,
.rgpl a.rgpl__knopf--still:hover,
.rgpl .rgpl__knopf--still:focus-visible,
.rgpl a.rgpl__knopf--still:focus-visible {
    background: var(--rgpl-karte);
    border-color: var(--rgpl-text);
    color: var(--rgpl-text);
}

.rgpl .rgpl__knopf--still:active,
.rgpl a.rgpl__knopf--still:active {
    background: var(--rgpl-kante);
    color: var(--rgpl-text);
}

.rgpl__knopfnote {
    color: var(--rgpl-leise);
    font-size: 14px;
}

/* ── Abschnitte ────────────────────────────────────────────────────────── */

.rgpl__abschnitt { padding: 44px 0; }

.rgpl__abschnitt--still {
    background: var(--rgpl-flaeche-still);
    border-top: 1px solid var(--rgpl-kante);
    border-bottom: 1px solid var(--rgpl-kante);
}

.rgpl h2 {
    margin: 0 0 18px;
    font-size: clamp(24px, 4vw, 32px);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.rgpl h3 {
    margin: 26px 0 6px;
    font-size: 19px;
    line-height: 1.3;
}

.rgpl p { margin: 0 0 14px; }

.rgpl__vorspann {
    max-width: 62ch;
    color: var(--rgpl-gedaempft);
}

.rgpl__karten {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

.rgpl__karte {
    background: var(--rgpl-karte);
    border: 1px solid var(--rgpl-kante);
    border-radius: var(--rgpl-radius);
    padding: 20px;
}

.rgpl__karte h3 { margin: 0 0 8px; }
.rgpl__karte p { margin: 0; color: var(--rgpl-gedaempft); }

/* Der Schnipsel. Er wird kopiert, also muss er lesbar sein und darf nicht
   umbrechen, wo kein Umbruch hingehört – ein Zeilenumbruch mitten im `style`
   wäre in einer Zwischenablage ein Fehler. */
.rgpl__code {
    margin: 0 0 8px;
    padding: 14px 16px;
    background: var(--rgpl-code);
    border: 1px solid var(--rgpl-kante);
    border-radius: 12px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.55;
}

.rgpl__code code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
    color: var(--rgpl-code-schrift);
    white-space: pre;
}

.rgpl__hinweis {
    margin-top: 20px;
    color: var(--rgpl-gedaempft);
    max-width: 62ch;
}

.rgpl__hinweis code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
    font-size: 0.92em;
    color: var(--rgpl-verweis);
}

.rgpl__schritte,
.rgpl__liste {
    margin: 0;
    padding-left: 1.3em;
    max-width: 62ch;
    color: var(--rgpl-gedaempft);
}

.rgpl__schritte li,
.rgpl__liste li { margin-bottom: 12px; }

.rgpl__schritte strong,
.rgpl__liste strong { color: var(--rgpl-text); }

.rgpl__abschluss p { max-width: 62ch; color: var(--rgpl-gedaempft); }

/* Der Verweis im Fließtext. Diese Regel ist der Grund für die
   ausgeschriebenen Komponentenauswahlen weiter oben: Sie hat (0,1,1) und
   schlägt damit jede einklassige Komponentenregel – bis zum 23.09.2026 auch
   die weiße Schrift auf dem roten Knopf. */
.rgpl a { color: var(--rgpl-verweis); }

/* ── Fuß ───────────────────────────────────────────────────────────────── */

.rgpl__fuss {
    border-top: 1px solid var(--rgpl-kante);
    padding: 26px 0 40px;
}

.rgpl__fuss .rgpl__breite {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.rgpl__fuss a {
    color: var(--rgpl-leise);
    text-decoration: none;
    font-size: 15px;
    min-height: var(--rgpl-tippflaeche);
    display: inline-flex;
    align-items: center;
}

.rgpl__fuss a:hover,
.rgpl__fuss a:focus-visible { color: var(--rgpl-text); }

/* ── Ab Tablet ─────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
    .rgpl__karten { grid-template-columns: repeat(3, 1fr); }
    .rgpl__buehne { padding: 84px 0 68px; }
    .rgpl__abschnitt { padding: 60px 0; }
}

/* Wer Bewegung nicht will, bekommt keine – hier gibt es ohnehin keine, aber
   die Zusage steht in jeder Oberfläche dieses Hauses. */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}