/*
 * Der Baukasten des Race Hub.
 *
 * Jede Oberfläche des Race Hub setzt sich aus diesen Bausteinen zusammen. Was
 * wann benutzt wird, steht in docs/ui-baukasten.md, wie es aussieht, zeigt
 * docs/baukasten.html. Ein neuer Baustein kommt erst hierher, wenn der
 * Betreiber ihn freigegeben hat.
 *
 * Grundlage ist die Inventur vom 2026-09-23 und die Auswahl des Betreibers vom
 * 2026-09-24. Die Werte gehören dem Race Hub allein (Regel 5 in
 * docs/arbeitsteilung.md); sie richten sich nicht nach Overlay Control.
 *
 * Zwei Bereiche, ein Satz Bausteine: Der Arbeitsbereich (Admin, Rennleitung)
 * ist der Normalfall. Ein Vorfahr mit .rh-oeffentlich stellt dieselben
 * Bausteine auf den öffentlichen Look um – schlanker, ruhiger. Das Markup
 * bleibt gleich.
 *
 * Texte stehen nie im CSS (kein content: "…"), damit eine spätere
 * Sprachumschaltung nur die Seiten betrifft.
 */

:root {
    /* Flächen und Linien */
    --rh-grund: #0b0b0b;
    /* Stil vom 2026-09-24 (Betreiber): Kasten dunkel ohne Rahmen mit gelber
       Oberkante, Felder und Nebenknöpfe gefüllt ohne Rahmen. */
    --rh-flaeche: #101010;
    --rh-flaeche-hoch: #262626;
    --rh-feldgrund: #1c1c1c;
    --rh-rand-knopf: transparent;
    --rh-rand-feld: transparent;
    --rh-linie: #383838;
    --rh-linie-leise: #292929;
    --rh-linie-feld: #505050;
    --rh-linie-knopf: #666666;

    /* Schrift */
    --rh-text: #f5f5f5;
    --rh-text-feld: #d0d0d0;
    --rh-text-leise: #a0a0a0;
    --rh-akzent: #ffcc00;
    --rh-akzent-hell: #ffda33;
    --rh-akzent-text: #111111;

    /* Zustandsfarben: für Marken, Meldungen und Gefahr. Gelb ist der Akzent. */
    --rh-gelb: #ffcc00;
    --rh-orange: #ff9a3d;
    --rh-rot: #ff6b6b;
    --rh-blau: #5aa9ff;
    --rh-gruen: #4cc26a;
    --rh-neutral: #a0a0a0;

    /* Zwei Höhen für Knöpfe und Felder, damit beide in einer Zeile bündig sind. */
    --rh-hoehe: 42px;
    --rh-hoehe-kompakt: 30px;

    /* Abstände */
    --rh-abstand-1: 4px;
    --rh-abstand-2: 8px;
    --rh-abstand-3: 12px;
    --rh-abstand-4: 16px;
    --rh-abstand-5: 24px;
    --rh-abstand-6: 32px;

    /* Schriftgrößen */
    --rh-schrift-klein: 12px;
    --rh-schrift: 13px;
    --rh-schrift-gross: 15px;
    --rh-schrift-titel: 18px;
}

/* Der öffentliche Bereich: schlanker, eine Höhe für alles in einer Leiste. */
.rh-oeffentlich {
    --rh-hoehe: 36px;
    --rh-hoehe-kompakt: 30px;
    /* Sonst derselbe Stil wie die Verwaltung (Betreiber, 2026-09-24). */
}

/* hidden gilt immer. Jeder Baustein mit eigener display-Regel hob es sonst
   auf – am 2026-09-15 stand so eine leere Vorschau auf der Bilderseite, und
   die Listensuche blendet Tabellenzeilen über hidden aus. */
[class*="rh-"][hidden], .rh-tabelle tr[hidden] { display: none !important; }

/* ── Knopf ─────────────────────────────────────────────────────────────── */

.rh-knopf {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rh-abstand-2);
    height: var(--rh-hoehe);
    padding: 0 var(--rh-abstand-4);
    border: 1px solid var(--rh-rand-knopf);
    border-radius: 0;
    color: var(--rh-text);
    background: var(--rh-flaeche-hoch);
    font: inherit;
    font-size: var(--rh-schrift);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.rh-knopf:hover { background: #303030; }
.rh-knopf:focus-visible { outline: 2px solid var(--rh-akzent); outline-offset: 2px; }
.rh-knopf:disabled, .rh-knopf[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }

/* Hauptaktion: eine je Bereich einer Seite. */
.rh-knopf--haupt { border-color: var(--rh-akzent); color: var(--rh-akzent-text); background: var(--rh-akzent); font-weight: 800; }
.rh-knopf--haupt:hover { border-color: var(--rh-akzent-hell); background: var(--rh-akzent-hell); }

/* Leise Aktion: in Tabellenzeilen und neben Hauptaktionen, die nicht konkurrieren sollen. */
.rh-knopf--leise { font-weight: 600; }

/* Gefahr: löst Löschen aus. Gefahr-voll bestätigt es im Rückfragedialog und kommt nur dort vor. */
.rh-knopf--gefahr { border-color: #7a3434; color: #ffb3b3; background: transparent; }
.rh-knopf--gefahr:hover { border-color: #b04a4a; color: #ffdada; background: #2a1414; }
.rh-knopf--gefahr-voll { border-color: #8c3a3a; color: #ffe3e3; background: #5a1f1f; font-weight: 800; }
.rh-knopf--gefahr-voll:hover { background: #702626; }

.rh-knopf--kompakt { height: var(--rh-hoehe-kompakt); padding: 0 var(--rh-abstand-3); font-size: var(--rh-schrift-klein); }


/* Eine Reihe von Knöpfen, Feldern oder beidem. */
.rh-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rh-abstand-2); }
.rh-reihe--ende { justify-content: flex-end; }
/* Ein Element ans rechte Ende der Reihe, die übrigen bleiben links (Betreiber, 2026-10-08:
   Knopf „Strafpunktekonto“ in der Reihe der Rennauswahl, ganz rechts). */
.rh-reihe > .rh-ans-ende { margin-inline-start: auto; }
/* Eine Werkzeugzeile im Panel (Suche, Filter) hält Abstand zum Inhalt darunter. */
.rh-panel > .rh-reihe:not(:last-child) { margin-bottom: var(--rh-abstand-5); }
/* Ein Feld in einer Reihe nimmt seine eigene Breite, nicht die ganze Zeile. */
.rh-reihe > .rh-eingabe, .rh-reihe > select.rh-eingabe { width: auto; min-width: 160px; }

/* ── Feld ──────────────────────────────────────────────────────────────── */

/* Der eine Feldstil. Gilt für nackte Eingaben mit .rh-eingabe und für alles in .rh-feld. */
.rh-eingabe,
.rh-feld input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.rh-feld select,
.rh-feld textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: var(--rh-hoehe);
    padding: 0 var(--rh-abstand-3);
    border: 1px solid var(--rh-rand-feld);
    border-radius: 0;
    color: var(--rh-text);
    background: var(--rh-feldgrund);
    font: inherit;
    font-size: var(--rh-schrift);
}
/* Farbfeld: dasselbe Feld, die Farbe füllt es bis auf einen schmalen Rand. So schwer wie die Feldregel oben. */
.rh-feld input[type="color"]:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { padding: 5px; cursor: pointer; }
.rh-feld input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.rh-feld input[type="color"]::-webkit-color-swatch { border: 0; }
.rh-feld input[type="color"]::-moz-color-swatch { border: 0; }
.rh-feld textarea, textarea.rh-eingabe { height: auto; min-height: calc(var(--rh-hoehe) * 2); padding: var(--rh-abstand-2) var(--rh-abstand-3); resize: vertical; }
.rh-feld select[multiple], select.rh-eingabe[multiple] { height: auto; min-height: 140px; padding: var(--rh-abstand-1); }
.rh-eingabe:focus, .rh-feld input:focus, .rh-feld select:focus, .rh-feld textarea:focus { border-color: var(--rh-akzent); outline: 2px solid rgba(255, 204, 0, .16); }
/* Dateiauswahl: der Knopf des Browsers sitzt sonst oben im Feld. */
/* Dateiauswahl: kein Feldrahmen, der Knopf sieht aus wie jeder Nebenknopf und
   der gewählte Dateiname steht leise daneben (Betreiber, 2026-09-24). */
.rh-feld input[type="file"], input[type="file"].rh-eingabe { width: auto; height: auto; padding: 0; border: 0; color: var(--rh-text-leise); background: none; font-size: var(--rh-schrift-klein); outline: none; }
.rh-feld input[type="file"]::file-selector-button, input[type="file"].rh-eingabe::file-selector-button { box-sizing: border-box; height: var(--rh-hoehe); margin-right: var(--rh-abstand-3); padding: 0 var(--rh-abstand-4); border: 1px solid var(--rh-rand-knopf); border-radius: 0; color: var(--rh-text); background: var(--rh-flaeche-hoch); font: inherit; font-size: var(--rh-schrift); font-weight: 700; cursor: pointer; }
.rh-feld input[type="file"]::file-selector-button:hover, input[type="file"].rh-eingabe::file-selector-button:hover { background: #303030; }
.rh-feld input[type="file"]:focus-visible::file-selector-button { outline: 2px solid var(--rh-akzent); outline-offset: 2px; }
.rh-eingabe--kompakt { height: var(--rh-hoehe-kompakt); padding: 0 var(--rh-abstand-2); font-size: var(--rh-schrift-klein); }

/* Beschriftung über dem Feld. */
.rh-feld { display: grid; gap: 7px; color: var(--rh-text-feld); font-size: var(--rh-schrift); font-weight: 650; }
.rh-feld small { color: var(--rh-text-leise); font-weight: 400; }

/* Ein Formular: Felder untereinander, Knöpfe am Ende. */
.rh-formular { display: grid; gap: var(--rh-abstand-4); }
/* Ein Knopf direkt im Formular behält seine Breite, statt sich über die Zeile zu ziehen. */
.rh-formular > .rh-knopf { justify-self: start; }
/* Zeile: zusammengehörige Felder nebeneinander, jedes nur so breit wie nötig.
   Zahlen mit rh-feld--kurz. Gruppe: ein beschrifteter Abschnitt im Formular
   (Betreiber, 2026-09-24: nicht alles untereinander in voller Breite). */
.rh-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--rh-abstand-4) var(--rh-abstand-5); }
.rh-zeile > .rh-feld { flex: 1 1 220px; max-width: 340px; }
.rh-zeile > .rh-feld--kurz { flex: 0 0 200px; }
/* Im Dialog füllen die Zeilen die Breite, damit alle rechts bündig enden. */
.rh-dialog .rh-zeile > .rh-feld:not(.rh-feld--kurz) { max-width: none; }
.rh-formular > .rh-feld:not(.rh-feld--kurz) { max-width: 740px; }
.rh-gruppe { display: grid; gap: var(--rh-abstand-4); min-width: 0; margin: var(--rh-abstand-2) 0 0; padding: var(--rh-abstand-4) 0 0; border: 0; border-top: 1px solid var(--rh-linie-leise); }
.rh-gruppe > legend { float: left; width: 100%; margin: 0 0 var(--rh-abstand-3); padding: 0; color: var(--rh-text-leise); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.rh-gruppe > legend + * { clear: both; }
.rh-formular--zweispaltig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rh-formular--zweispaltig > .rh-reihe, .rh-formular--zweispaltig > .rh-breit { grid-column: 1 / -1; }

/* Häkchen und Auswahlknopf mit Text daneben. */
/* label.rh-haken: so schwer wie Seitenregeln der Art ".karte label", die sonst ein Raster daraus machen. */
.rh-haken, label.rh-haken { display: inline-flex; align-items: center; gap: var(--rh-abstand-2); color: var(--rh-text-feld); font-size: var(--rh-schrift); cursor: pointer; }
.rh-haken input { width: 16px; height: 16px; margin: 0; accent-color: var(--rh-akzent); }

/* Suche: ohne Beschriftung darüber und ohne Symbol. Die Beschriftung steht als
   Platzhalter im Feld und im aria-label; so hat die Suche die Höhe der Knöpfe
   neben ihr. */
.rh-suche { display: inline-flex; width: 260px; max-width: 100%; }

/* ── Reiter und Umschalter ─────────────────────────────────────────────── */

/* Reiter: Unterbereiche einer Seite oder eines Dialogs. Aktiv über
   aria-current="page" (Links) oder aria-selected="true" (Knöpfe). */
.rh-reiter { display: flex; gap: var(--rh-abstand-1); margin: 0 0 var(--rh-abstand-5); overflow-x: auto; border-bottom: 1px solid var(--rh-linie); }
.rh-reiter > a, .rh-reiter > button {
    display: inline-flex; align-items: center; gap: var(--rh-abstand-2); height: 44px; padding: 0 var(--rh-abstand-4);
    border: 0; border-bottom: 3px solid transparent; color: var(--rh-text-leise); background: none;
    font: inherit; font-size: var(--rh-schrift); font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.rh-reiter > :hover { color: var(--rh-text); }
.rh-reiter > [aria-current="page"], .rh-reiter > [aria-selected="true"] { border-bottom-color: var(--rh-akzent); color: var(--rh-text); }
/* Schließen im Reiter: ein X hinter dem Titel, entfernt, wofür der Reiter steht. */
.rh-reiter-schliessen { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: -6px; color: var(--rh-text-leise); font-size: 15px; font-weight: 400; line-height: 1; }
.rh-reiter-schliessen:hover { color: var(--rh-rot); }
.rh-reiter-zahl { color: #7d7d7d; font-size: var(--rh-schrift-klein); font-variant-numeric: tabular-nums; }
[aria-current="page"] > .rh-reiter-zahl, [aria-selected="true"] > .rh-reiter-zahl { color: var(--rh-akzent); }

/* Entwurf für den Dialog der Rennleitung: kräftiger, weil dort Entscheidungen
   gewechselt werden, nicht nur Ansichten. Freigabe steht aus. */

/* Aufklapper: eine Zeile, die ihre Einzelheiten erst auf Klick zeigt
   Freigegeben 2026-09-24 mit der Streckenliste. */
.rh-aufklapper { border-bottom: 1px solid var(--rh-linie); }
.rh-aufklapper > summary { display: flex; align-items: center; gap: var(--rh-abstand-4); min-height: 52px; padding: var(--rh-abstand-1) 0; cursor: pointer; list-style: none; }
.rh-aufklapper > summary::-webkit-details-marker { display: none; }
.rh-aufklapper > summary::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin: 0 6px 0 4px; border-right: 2px solid var(--rh-text-leise); border-bottom: 2px solid var(--rh-text-leise); transform: rotate(-45deg); transition: transform .15s ease; }
.rh-aufklapper[open] > summary::before { transform: rotate(45deg); }
.rh-aufklapper > summary:hover::before { border-color: var(--rh-akzent); }
.rh-aufklapper > summary > .rh-aktionen { margin-left: auto; }
.rh-aufklapper > :not(summary) { box-sizing: border-box; width: calc(100% - 25px); margin: 0 0 var(--rh-abstand-4) 25px; }
col[style*="--breite"] { width: var(--breite); }

/* Umschalter: dieselben Daten anders zeigen. */
.rh-umschalter { display: inline-flex; flex-wrap: wrap; }
.rh-umschalter > a, .rh-umschalter > button, .rh-umschalter > label > span {
    display: inline-flex; align-items: center; height: var(--rh-hoehe-kompakt); padding: 0 var(--rh-abstand-3);
    border: 1px solid var(--rh-linie); margin-left: -1px; color: var(--rh-text-leise); background: var(--rh-feldgrund);
    font: inherit; font-size: var(--rh-schrift-klein); font-weight: 700; text-decoration: none; cursor: pointer;
}
.rh-umschalter > :first-child, .rh-umschalter > label:first-child > span { margin-left: 0; }
/* In einer Reihe mit Feldern und Knöpfen so hoch wie diese. */
.rh-reihe:has(> .rh-knopf, > .rh-eingabe, > .rh-suche) > .rh-umschalter > :is(a, button),
.rh-reihe:has(> .rh-knopf, > .rh-eingabe, > .rh-suche) > .rh-umschalter > label > span { height: var(--rh-hoehe); }
.rh-umschalter > label > input { position: absolute; opacity: 0; pointer-events: none; }
.rh-umschalter > :hover, .rh-umschalter > label:hover > span { color: var(--rh-text); }
.rh-umschalter > [aria-current="page"], .rh-umschalter > [aria-pressed="true"], .rh-umschalter > label > input:checked + span {
    position: relative; border-color: var(--rh-akzent); color: var(--rh-akzent-text); background: var(--rh-akzent);
}
.rh-umschalter > label > input:focus-visible + span { outline: 2px solid var(--rh-akzent); outline-offset: 2px; }

/* Knopfraster: gleich breite Knöpfe in festen Spalten (--spalten), überall
   derselbe Abstand; etwa Kameras und Replay im Hauptfenster der App Race
   Control (Betreiber, 2026-09-28). Gewählt ist, was aria-pressed="true" trägt. */
.rh-knopfraster { --spalten: 3; display: grid; grid-template-columns: repeat(var(--spalten), minmax(0, 1fr)); gap: var(--rh-abstand-1); }
.rh-knopfraster > button {
    box-sizing: border-box; height: var(--rh-hoehe-kompakt); padding: 0 var(--rh-abstand-2);
    border: 1px solid var(--rh-linie); color: var(--rh-text-leise); background: var(--rh-feldgrund);
    font: inherit; font-size: var(--rh-schrift-klein); font-weight: 700; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.rh-knopfraster > button:hover { color: var(--rh-text); }
.rh-knopfraster > button:focus-visible { outline: 2px solid var(--rh-akzent); outline-offset: 2px; }
.rh-knopfraster > button:disabled { opacity: .42; cursor: not-allowed; }
.rh-knopfraster > button[aria-pressed="true"] { border-color: var(--rh-akzent); color: var(--rh-akzent-text); background: var(--rh-akzent); }

/* ── Tabelle ───────────────────────────────────────────────────────────── */

/* position: relative hält absolut gesetzte Kinder (.nur-vorlesen im
   Spaltenkopf) im Rahmen; sonst machten sie die Seite auf dem Telefon breiter
   als das Fenster, und sie zoomte heraus (2026-09-26). */
.rh-tabellenrahmen { position: relative; overflow-x: auto; }
.rh-tabelle { width: 100%; border-collapse: collapse; font-size: var(--rh-schrift); }
.rh-tabelle th { padding: 0 var(--rh-abstand-3) var(--rh-abstand-2) 0; color: var(--rh-text-leise); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.rh-tabelle td { padding: var(--rh-abstand-3) var(--rh-abstand-3) var(--rh-abstand-3) 0; border-top: 1px solid var(--rh-linie-leise); vertical-align: middle; }
.rh-tabelle th:last-child, .rh-tabelle td:last-child { padding-right: 0; }
.rh-tabelle small { display: block; color: var(--rh-text-leise); }
/* Ausrichtung folgt dem Inhalt: Zahlen und Zeilenaktionen rechts, alles andere links. */
.rh-tabelle .rh-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rh-tabelle .rh-aktionen { text-align: right; white-space: nowrap; }
/* Zentrierte Spalte (Betreiber, 2026-09-26): kurze, gleichartige Werte wie
   Nummer, Session, Zeit oder Status; Kopf und Zellen. */
.rh-tabelle .rh-mitte { text-align: center; }
.rh-tabelle .rh-aktionen .rh-reihe { justify-content: flex-end; flex-wrap: nowrap; }
/* Mehrere Knöpfe und Formulare direkt in der Aktionszelle stehen nebeneinander. */
.rh-tabelle td.rh-aktionen > :is(form, .rh-knopf) { display: inline-flex; vertical-align: middle; }
.rh-tabelle td.rh-aktionen > :is(form, .rh-knopf) + :is(form, .rh-knopf) { margin-left: var(--rh-abstand-2); }

/* Felder direkt in einer Tabellenzelle – bearbeitbare Tabellen wie die Entryliste:
   kompakt, 30 px. Mit :where() ohne Gewicht, damit Spaltenbreiten und der
   Rahmen, der erst beim Überfahren erscheint, Sache der Seite bleiben. */
.rh-tabelle td :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]), select) {
    box-sizing: border-box; height: var(--rh-hoehe-kompakt); padding: 0 var(--rh-abstand-2);
    border: 1px solid var(--rh-rand-feld); border-radius: 0; color: var(--rh-text); background: var(--rh-feldgrund);
    font: inherit; font-size: var(--rh-schrift-klein);
}
.rh-tabelle td :where(input[type="checkbox"]) { accent-color: var(--rh-akzent); }

/* Kennungen wie Slug oder Sim-ID: gelb auf Schwarz, wie bisher in Tabellen. */
.rh-tabelle code, .rh-dialog code, .rh-feld code, .rh-meldung code { padding: 2px 6px; color: #ffdf5f; background: #111111; font-size: .95em; }

/* ── Marke ─────────────────────────────────────────────────────────────── */

/* Ein Zustand auf einen Blick. Die Farbe sagt, was zu tun ist, nicht wie weit
   etwas ist: gelb neu, orange in Arbeit, rot Strafe/Fehler, blau wartet auf
   Hand, grün erledigt, neutral ohne Bewertung. */
.rh-marke {
    --marke: var(--rh-neutral);
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--marke) 55%, transparent);
    color: var(--marke); background: color-mix(in srgb, var(--marke) 12%, transparent);
    font-size: var(--rh-schrift-klein); font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.rh-marke--gelb { --marke: var(--rh-gelb); }
.rh-marke--orange { --marke: var(--rh-orange); }
.rh-marke--rot { --marke: var(--rh-rot); }
.rh-marke--blau { --marke: var(--rh-blau); }
.rh-marke--gruen { --marke: var(--rh-gruen); }

/* Zustand als Punkt mit Text, ohne Rahmen – etwa Verbindungen im Kopf eines
   App-Fensters (Betreiber, 2026-09-28). Farben wie bei rh-marke. */
.rh-status { --status: var(--rh-neutral); display: inline-flex; align-items: center; gap: var(--rh-abstand-2); color: var(--rh-text); font-size: var(--rh-schrift); font-weight: 600; white-space: nowrap; }
.rh-status::before { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--status); content: ""; }
.rh-status--gelb { --status: var(--rh-gelb); }
.rh-status--orange { --status: var(--rh-orange); }
.rh-status--rot { --status: var(--rh-rot); }
.rh-status--blau { --status: var(--rh-blau); }
.rh-status--gruen { --status: var(--rh-gruen); }

/* Entry-Marke (Betreiber, 2026-09-26): Startnummer, daneben der Name; mehrere in
   einer rh-entries umbrechen. Die Nummer trägt die Klasse wie im Live-Timing:
   Rahmen in Klassenfarbe mit abgedunkelter Füllung. --klasse ist die
   Klassenfarbe, ohne sie bleibt die Nummer neutral. */
.rh-entries { display: flex; flex-wrap: wrap; gap: var(--rh-abstand-1) var(--rh-abstand-2); }
.rh-entry {
    display: inline-flex; align-items: stretch; border: 1px solid var(--rh-linie);
    color: var(--rh-text); background: var(--rh-feldgrund);
    font-size: var(--rh-schrift-klein); font-weight: 650; line-height: 1.5; white-space: nowrap;
}
.rh-entry > span { padding: 1px 8px; }
.rh-entry > .rh-entry-nummer {
    box-sizing: border-box; min-width: 3.4em; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums;
}
.rh-entry > .rh-entry-nummer:not([style]) { background: #2a2a2a; box-shadow: none; }

/* Klasse (Betreiber, 2026-09-27): überall auf der Website gleich, wie im
   Live-Timing: Rahmen in Klassenfarbe, abgedunkelte Füllung, eine helle
   Schrift. Die eingestellte Schriftfarbe gilt nur fürs Overlay; der volle
   Block war auf der Seite zu laut. --klasse ist die Klassenfarbe. */
.rh-klasse {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    min-width: 3.4em; padding: 1px 6px; color: #f4f4f4;
    font-size: var(--rh-schrift-klein); font-weight: 800; letter-spacing: .04em; line-height: 1.5; white-space: nowrap;
}
:is(.rh-klasse, .rh-entry > .rh-entry-nummer) {
    --klasse: var(--rh-neutral);
    background: color-mix(in srgb, var(--klasse) 28%, rgba(12, 22, 39, .96));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--klasse) 48%, rgba(255, 255, 255, .08));
}
/* Beteiligte kurz (Betreiber, 2026-09-26): in Listen nur die Nummern, gleich
   breit und ohne Umbruch; beim Darüberfahren oder Antippen ein kleines
   Fenster mit den vollen Entry-Marken. Es steht fest im Fenster, damit der
   Tabellenrahmen es nicht abschneidet; die Stelle setzt beteiligte.js. */
.rh-beteiligte { display: inline-flex; flex-wrap: nowrap; gap: var(--rh-abstand-1); outline: none; cursor: default; }
.rh-beteiligte .rh-entry--kurz { border: 0; }
.rh-beteiligte-detail {
    position: fixed; z-index: 20; display: none; max-width: min(520px, calc(100vw - 32px)); width: max-content;
    padding: var(--rh-abstand-2); border-top: 2px solid var(--rh-akzent); background: var(--rh-flaeche);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
}
.rh-beteiligte:is(:hover, :focus-visible, :focus-within) > .rh-beteiligte-detail { display: block; }
.rh-beteiligte:focus-visible > .rh-entry--kurz { outline: 2px solid var(--rh-akzent); }
/* Schwebefenster (Betreiber, 2026-09-27): über der Seite, am Kopf verschiebbar,
   unten rechts in der Größe veränderbar, mit X zu. Erst für den Stream im
   Live-Timing. Lage und Größe setzt das Skript der Seite. Auf dem Telefon
   steht es fest über dem Inhalt statt zu schweben. */
.rh-schwebe {
    position: fixed; z-index: 60; display: flex; flex-direction: column; box-sizing: border-box;
    width: 480px; height: 300px; min-width: 260px; min-height: 180px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
    border-top: 2px solid var(--rh-akzent); background: var(--rh-flaeche); box-shadow: 0 12px 32px rgba(0, 0, 0, .65);
    overflow: hidden;
}
.rh-schwebe[hidden] { display: none; }
.rh-schwebe-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: var(--rh-abstand-3); flex: 0 0 auto;
    padding: 4px 6px 4px var(--rh-abstand-3); font-size: var(--rh-schrift-klein); font-weight: 700;
    cursor: move; user-select: none; touch-action: none;
}
.rh-schwebe-inhalt { position: relative; flex: 1 1 auto; min-height: 0; background: #000; }
.rh-schwebe-inhalt > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Beim Ziehen fängt der eingebettete Inhalt sonst die Maus. */
.rh-schwebe.zieht .rh-schwebe-inhalt { pointer-events: none; }
/* Griff zum Größeziehen, über dem eingebetteten Inhalt; der fängt sonst die Maus. */
.rh-schwebe-griff {
    position: absolute; right: 0; bottom: 0; z-index: 1; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none;
    background: linear-gradient(135deg, transparent 50%, var(--rh-akzent) 50%);
}
@media (max-width: 767px) {
    .rh-schwebe { position: static; width: auto !important; height: auto !important; max-width: none; resize: none; box-shadow: none; }
    .rh-schwebe-kopf { cursor: default; }
    .rh-schwebe-griff { display: none; }
    .rh-schwebe-inhalt { flex: none; aspect-ratio: 16 / 9; }
}
/* Entfernen per X wie in der Mehrfachauswahl. */
.rh-entry > form { display: flex; margin: 0; }
.rh-entry button { padding: 0 7px; border: 0; color: var(--rh-text-leise); background: none; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.rh-entry button:hover { color: var(--rh-rot); }

/* Angaben (Betreiber, 2026-09-26): Beschriftung über dem Wert, nebeneinander,
   brechen bei wenig Platz um. Für Einzelheiten in Dialogen. */
.rh-angaben { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--rh-abstand-3) var(--rh-abstand-4); margin: 0; }
.rh-angaben > div { min-width: 0; }
.rh-angaben--breit { grid-column: 1 / -1; }
.rh-angaben dt { margin: 0 0 3px; color: var(--rh-text-leise); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rh-angaben dd { margin: 0; color: var(--rh-text); }
.rh-angaben dd.rh-entries { align-items: center; }

/* Link mit Symbol (Betreiber, 2026-10-07): leise, Symbol und Text, beim
   Darüberfahren hell; etwa die Social Links im Spotterguide. --symbol ist die
   Adresse einer einfarbigen SVG, als Maske gelegt: Sie nimmt die Schriftfarbe
   an. Die Symbole liegen selbst gehostet in assets/symbole. */
.rh-link { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; color: var(--rh-text-leise); font-size: 13px; text-decoration: none; overflow-wrap: anywhere; transition: color .15s; }
.rh-link:hover, .rh-link:focus-visible { color: var(--rh-text); }
.rh-symbol { flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--symbol) center / contain no-repeat; mask: var(--symbol) center / contain no-repeat; }

/* Öffentlich: „läuft gerade“ als Punkt mit Text, wie auf Startseite und Wertung. */
.rh-live { display: inline-flex; align-items: center; gap: var(--rh-abstand-2); color: var(--rh-akzent); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.rh-live::before { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; content: ""; }

/* ── Meldung ───────────────────────────────────────────────────────────── */

.rh-meldung { box-sizing: border-box; margin: 0 0 var(--rh-abstand-4); padding: var(--rh-abstand-3) var(--rh-abstand-4); border: 1px solid; font-size: var(--rh-schrift); line-height: 1.5; }
.rh-meldung--fehler { border-color: #a8404a; color: #ffc2c8; background: #2a1216; }
.rh-meldung--erfolg { border-color: #3d9a58; color: #b4ecc4; background: #10241a; }
.rh-meldung--hinweis { border-color: #8c7400; color: #ffe27a; background: #1f1a00; }
.rh-meldung ul { margin: var(--rh-abstand-1) 0 0; padding-left: 18px; }

/* Rückmeldungen nach einer Aktion: unten rechts, immer im Bild, auch über
   einem offenen Dialog (baukasten.js hebt sie als Popover in die oberste
   Ebene). Nichts davon muss bestätigt werden, also verschwindet es von selbst:
   Erfolg nach 5, Fehler nach 15 Sekunden (Betreiber, 2026-09-24). */
.rh-einblendung, .rh-einblendung[popover] {
    position: fixed; inset: auto var(--rh-abstand-5) var(--rh-abstand-5) auto; z-index: 2147483647;
    width: min(390px, calc(100vw - 32px)); margin: 0; overflow: visible; box-shadow: 0 16px 42px rgba(0, 0, 0, .55);
    pointer-events: none; animation: rh-einblendung 5s ease forwards;
}
.rh-einblendung.rh-meldung--fehler { animation-duration: 15s; }
@keyframes rh-einblendung {
    0% { opacity: 0; transform: translateY(10px); }
    8%, 82% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; visibility: hidden; transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) { .rh-einblendung { animation: none; } }

/* ── Mehrfachauswahl ───────────────────────────────────────────────────── */

/* Freigegeben am 2026-09-25. Suchfeld mit den Gewählten als Marken, darunter
   die Liste. Die Werte trägt ein verstecktes select multiple; baukasten.js
   baut das Feld darüber. Ohne Skript bleibt das select sichtbar. */
.rh-mehrfach { position: relative; }
.rh-mehrfach.bereit > select[multiple] { display: none; }
.rh-mehrfach-feld {
    box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--rh-abstand-1);
    min-height: var(--rh-hoehe); padding: 5px var(--rh-abstand-2); border: 1px solid var(--rh-rand-feld);
    background: var(--rh-feldgrund); cursor: text;
}
.rh-oeffentlich .rh-mehrfach-feld { padding-top: 3px; padding-bottom: 3px; }
.rh-mehrfach-feld:focus-within { border-color: var(--rh-akzent); outline: 2px solid rgba(255, 204, 0, .16); }
.rh-mehrfach-feld .rh-marke { display: inline-flex; align-items: center; gap: 2px; padding-right: 0; color: var(--rh-text); }
.rh-mehrfach-feld .rh-marke button { width: 22px; height: 20px; padding: 0; border: 0; color: var(--rh-text-leise); background: none; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.rh-mehrfach-feld .rh-marke button:hover { color: var(--rh-rot); }
/* So schwer wie die Feldregel .rh-feld input:not(...), die es sonst zu einem ganzen Feld macht. */
.rh-mehrfach .rh-mehrfach-feld input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    flex: 1 1 120px; min-width: 120px; height: 28px; margin: 0; padding: 0 var(--rh-abstand-1);
    border: 0; outline: 0; color: var(--rh-text); background: none; font: inherit; font-size: var(--rh-schrift);
}
.rh-mehrfach-liste {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 20; max-height: 260px; margin: 2px 0 0; padding: var(--rh-abstand-1) 0;
    overflow-y: auto; list-style: none; border-top: 2px solid var(--rh-akzent); background: var(--rh-flaeche-hoch);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .55);
}
.rh-mehrfach-liste li { display: flex; gap: var(--rh-abstand-3); padding: 7px var(--rh-abstand-3); color: var(--rh-text-feld); font-size: var(--rh-schrift); cursor: pointer; }
.rh-mehrfach-liste li > span { margin-left: auto; color: var(--rh-text-leise); font-size: var(--rh-schrift-klein); }
.rh-mehrfach-liste li[aria-selected="true"], .rh-mehrfach-liste li:hover { color: var(--rh-text); background: #333333; }
.rh-mehrfach-liste li[aria-disabled="true"] { color: #6f6f6f; cursor: not-allowed; background: none; }
.rh-mehrfach-liste li.leer { color: var(--rh-text-leise); cursor: default; background: none; }

/* ── Leerer Zustand ────────────────────────────────────────────────────── */

.rh-leer { margin: 0; color: var(--rh-text-leise); font-size: var(--rh-schrift); line-height: 1.55; }
.rh-leer strong { display: block; color: var(--rh-text); font-weight: 700; }
.rh-leer p { margin: 2px 0 0; }

/* Öffentlich: ohne Kasten, mit Luft. Entwurf, Freigabe steht aus. */
.rh-oeffentlich .rh-leer { padding: var(--rh-abstand-6) 0; font-size: var(--rh-schrift-gross); }
.rh-oeffentlich .rh-leer strong { margin-bottom: var(--rh-abstand-1); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }

/* ── Panel, Dialog, Seitenkopf ─────────────────────────────────────────── */

.rh-panel { box-sizing: border-box; min-width: 0; padding: 28px; border: 0; border-top: 2px solid var(--rh-akzent); background: var(--rh-flaeche); }
.rh-panel > h2 { margin: 0 0 22px; font-size: var(--rh-schrift-titel); }
.rh-panel-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rh-abstand-3); margin: 0 0 var(--rh-abstand-5); }
.rh-panel-kopf h2 { margin: 0; font-size: var(--rh-schrift-titel); }
/* Hochladen: ein Knopf im Listenkopf öffnet einen Dialog (Betreiber,
   2026-09-24). Gezogen wird auf die ganze Seite; solange Dateien darüber
   schweben, sind der Knopf und die Auswahl im Dialog gelb umrandet. */
.rh-reihe[data-ablage] > .muted { font-size: var(--rh-schrift-klein); }
[data-ablage].ueber > .rh-knopf, [data-ablage-ziel].ueber { outline: 2px solid var(--rh-akzent); outline-offset: 3px; }
[data-ablage].gesperrt { opacity: .5; pointer-events: none; }
.rh-panel-kopf p { margin: 4px 0 0; }
.rh-panel-kopf > div:first-child:not(:only-child) { flex: 1 1 360px; min-width: 0; }
.rh-panel-kopf:last-child { margin-bottom: 0; }

.rh-ueberzeile { margin: 0 0 6px; color: var(--rh-akzent); font-size: var(--rh-schrift-klein); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.rh-dialog { box-sizing: border-box; width: min(520px, calc(100vw - 16px)); max-height: calc(100vh - 16px); padding: 0; border: 0; border-top: 2px solid var(--rh-akzent); border-radius: 0; color: var(--rh-text); background: var(--rh-flaeche); }
.rh-dialog--mittel { width: min(700px, calc(100vw - 16px)); }
.rh-dialog--breit { width: min(960px, calc(100vw - 16px)); }
/* Höchstens 600 px hoch, der Inhalt scrollt darin; etwa lange Listen wie das
   Strafpunktekonto der Rennleitung (Betreiber, 2026-10-08). */
.rh-dialog--flach { max-height: min(600px, calc(100vh - 16px)); }
.rh-dialog[open] { display: flex; flex-direction: column; }
.rh-dialog::backdrop { background: rgba(0, 0, 0, .75); }
.rh-dialog-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rh-abstand-4); padding: 22px 24px 0; }
.rh-dialog-kopf h2 { margin: 0; font-size: var(--rh-schrift-titel); }
.rh-dialog-inhalt { min-height: 0; padding: 18px 24px 24px; overflow-y: auto; }
.rh-schliessen { flex: none; padding: 0 4px; border: 0; color: var(--rh-text-leise); background: none; font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.rh-schliessen:hover { color: var(--rh-text); }
.rh-schliessen:focus-visible { outline: 2px solid var(--rh-akzent); outline-offset: 2px; }

.rh-seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--rh-abstand-4); margin: 0 0 30px; }
.rh-seitenkopf h1 { margin: 0; font-size: clamp(32px, 4.5vw, 52px); letter-spacing: -.04em; line-height: 1.02; }
.rh-vorspann { max-width: 70ch; margin: var(--rh-abstand-3) 0 0; color: var(--rh-text-leise); font-size: var(--rh-schrift-gross); line-height: 1.55; }
.rh-oeffentlich .rh-seitenkopf { margin-bottom: 40px; }
.rh-oeffentlich .rh-seitenkopf h1 { font-size: clamp(38px, 6vw, 70px); line-height: .98; letter-spacing: -.045em; }
.rh-oeffentlich .rh-vorspann { font-size: var(--rh-schrift-titel); }

@media (max-width: 640px) {
    .rh-formular--zweispaltig { grid-template-columns: 1fr; }
    .rh-panel { padding: 20px; }
}


/*
 * Regler: ein Schieber mit seinem Wert rechts daneben, in einem rh-feld.
 * Neu am 2026-09-26 für den Zoom des Live-Timings, freigegeben am selben Tag.
 */
.rh-regler { display: flex; align-items: center; gap: var(--rh-abstand-3); }
.rh-feld .rh-regler input[type="range"] { flex: 1; min-width: 0; height: 22px; padding: 0; border: 0; background: none; accent-color: var(--rh-akzent); cursor: pointer; }
.rh-regler output { min-width: 5ch; color: var(--rh-text-leise); font-size: var(--rh-schrift-klein); font-variant-numeric: tabular-nums; text-align: right; }

/*
 * Spaltenwahl: links, was es gibt, rechts, was angezeigt wird, in seiner
 * Reihenfolge; dazwischen Knöpfe zum Verschieben. Die Einträge sehen aus wie
 * die der Mehrfachauswahl. Neu am 2026-09-26 für das Spaltenmenü, freigegeben
 * am selben Tag.
 */
.rh-spaltenwahl { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--rh-abstand-3); align-items: stretch; }
.rh-spaltenwahl-spalte { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--rh-abstand-2); min-width: 0; }
.rh-spaltenwahl-titel { color: var(--rh-text-feld); font-size: var(--rh-schrift); font-weight: 650; } /* wie die Beschriftung eines rh-feld */
.rh-spaltenwahl-liste { height: 260px; overflow-y: auto; padding: var(--rh-abstand-1) 0; background: var(--rh-feldgrund); }
.rh-spaltenwahl-liste > button { display: block; width: 100%; padding: 7px var(--rh-abstand-3); border: 0; color: var(--rh-text-feld); background: none; font: inherit; font-size: var(--rh-schrift); text-align: left; cursor: pointer; }
.rh-spaltenwahl-liste > button:hover, .rh-spaltenwahl-liste > button[aria-selected="true"] { color: var(--rh-text); background: #333333; }
.rh-spaltenwahl-liste > button[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--rh-akzent); }
.rh-spaltenwahl-liste > .leer { padding: 7px var(--rh-abstand-3); color: var(--rh-text-leise); }
.rh-spaltenwahl-knoepfe { display: flex; flex-direction: column; justify-content: center; gap: var(--rh-abstand-2); }
.rh-spaltenwahl-fuss { margin-top: var(--rh-abstand-4); }
@media (max-width: 560px) {
    .rh-spaltenwahl { grid-template-columns: 1fr; }
    .rh-spaltenwahl-knoepfe { flex-direction: row; justify-content: center; }
    .rh-spaltenwahl-liste { height: 180px; }
}

/*
 * Arbeitsfläche: feste Bereiche eines App-Fensters, dazwischen Trenner zum
 * Ziehen. Neu am 2026-09-28 für das Hauptfenster der App Race Control,
 * freigegeben am selben Tag.
 *
 * Oben zwei Köpfe, darunter links und rechts je ein Bereich, unten eine Reihe.
 * Der senkrechte Trenner stellt die Breite links samt Kopf ein, der
 * waagrechte die Höhe der Reihe unten. In der Reihe nimmt der erste Bereich
 * den Rest, die übrigen haben ihre Breite über --breite und je einen Trenner
 * davor. Die Maße (--links, --unten, --breite) setzt das Skript der App und
 * merkt sie sich. Ohne rechten Kopf (--ohne-kopf-rechts) reicht der rechte
 * Bereich bis oben. Panels darin sind enger gepolstert als auf Seiten.
 */
.rh-arbeitsflaeche {
    --links: 440px; --unten: 330px;
    display: grid; box-sizing: border-box; height: 100vh; padding: var(--rh-abstand-3);
    grid-template-columns: var(--links) var(--rh-abstand-3) minmax(0, 1fr);
    grid-template-rows: auto var(--rh-abstand-3) minmax(0, 1fr) var(--rh-abstand-3) var(--unten);
    grid-template-areas:
        "kopf-links senkrecht kopf-rechts"
        ".          senkrecht ."
        "links      senkrecht rechts"
        "waagrecht  waagrecht waagrecht"
        "unten      unten     unten";
}
.rh-arbeitsflaeche--ohne-kopf-rechts {
    grid-template-areas:
        "kopf-links senkrecht rechts"
        ".          senkrecht rechts"
        "links      senkrecht rechts"
        "waagrecht  waagrecht waagrecht"
        "unten      unten     unten";
}
.rh-arbeitsflaeche-kopf-links { grid-area: kopf-links; }
.rh-arbeitsflaeche-kopf-rechts { grid-area: kopf-rechts; }
.rh-arbeitsflaeche-links { grid-area: links; }
.rh-arbeitsflaeche-rechts { grid-area: rechts; }
.rh-arbeitsflaeche-unten { grid-area: unten; display: flex; min-height: 0; }
.rh-arbeitsflaeche-unten > .rh-panel { flex: 0 0 var(--breite, 300px); }
.rh-arbeitsflaeche-unten > .rh-panel:first-child { flex: 1 1 0; }
.rh-arbeitsflaeche .rh-panel { min-height: 0; padding: var(--rh-abstand-3) var(--rh-abstand-4); overflow: auto; }
.rh-arbeitsflaeche .rh-panel-kopf { margin-bottom: var(--rh-abstand-3); }
/* Trenner: ein kurzer Strich als Griff, gelb beim Darüberfahren und Ziehen. */
.rh-trenner { position: relative; touch-action: none; }
.rh-trenner::after { position: absolute; inset: 0; margin: auto; background: var(--rh-linie); content: ""; }
.rh-trenner--senkrecht { flex: 0 0 var(--rh-abstand-3); cursor: col-resize; }
.rh-trenner--senkrecht::after { width: 2px; height: 40px; }
.rh-trenner--waagrecht { cursor: row-resize; }
.rh-trenner--waagrecht::after { width: 40px; height: 2px; }
.rh-trenner:is(:hover, .zieht)::after { background: var(--rh-akzent); }
.rh-arbeitsflaeche > .rh-trenner--senkrecht { grid-area: senkrecht; }
.rh-arbeitsflaeche > .rh-trenner--waagrecht { grid-area: waagrecht; }

/* Turnierbaum (Betreiber, 2026-10-04): die Runden eines Turniers als Spalten,
   jeder Lauf eine Karte. Grüner Balken: weiter, blau: Lucky Dog, gelb:
   Sieger, grau: ausgeschieden. Ein laufender Lauf hat eine gelbe Oberkante,
   ein offener ist gestrichelt. Bei vielen Runden scrollt nur der Baum. */
.rh-turnier { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(236px, 1fr); gap: var(--rh-abstand-5); overflow-x: auto; padding-bottom: var(--rh-abstand-2); }
.rh-turnier-runde { display: flex; flex-direction: column; gap: var(--rh-abstand-3); min-width: 0; }
.rh-turnier-runde-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rh-abstand-2); padding-bottom: var(--rh-abstand-2); border-bottom: 1px solid var(--rh-linie); }
.rh-turnier-runde-kopf h3 { margin: 0; color: var(--rh-text); font-size: var(--rh-schrift-klein); letter-spacing: .08em; text-transform: uppercase; }
.rh-turnier-runde-kopf span { color: var(--rh-text-leise); font-size: var(--rh-schrift-klein); }
.rh-turnier-laeufe { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: var(--rh-abstand-4); }
.rh-turnier-lauf { background: var(--rh-feldgrund); border-top: 2px solid var(--rh-linie); }
.rh-turnier-lauf[data-zustand="laeuft"] { border-top-color: var(--rh-akzent); }
.rh-turnier-lauf[data-zustand="offen"] { background: transparent; border: 1px dashed var(--rh-linie); }
.rh-turnier-lauf-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--rh-abstand-2); padding: var(--rh-abstand-2) var(--rh-abstand-3); border-bottom: 1px solid var(--rh-linie-leise); font-size: var(--rh-schrift); }
.rh-turnier-plaetze { margin: 0; padding: 0; list-style: none; }
.rh-turnier-platz { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: var(--rh-abstand-2); padding: 6px var(--rh-abstand-3) 6px 9px; border-left: 3px solid transparent; font-size: var(--rh-schrift); }
.rh-turnier-platz + .rh-turnier-platz { border-top: 1px solid var(--rh-linie-leise); }
.rh-turnier-platz[data-weiter="ja"] { border-left-color: var(--rh-gruen); }
.rh-turnier-platz[data-weiter="lucky"] { border-left-color: var(--rh-blau); }
.rh-turnier-platz[data-weiter="sieger"] { border-left-color: var(--rh-akzent); }
.rh-turnier-platz[data-weiter="nein"] { color: var(--rh-text-leise); }
.rh-turnier-pos { color: var(--rh-text-leise); font-variant-numeric: tabular-nums; text-align: right; }
.rh-turnier-name { min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rh-turnier-platz[data-weiter="nein"] .rh-turnier-name,
.rh-turnier-platz[data-offen] .rh-turnier-name { font-weight: 400; }
.rh-turnier-platz[data-offen] .rh-turnier-name { color: var(--rh-text-leise); }
.rh-turnier-name small { display: block; overflow: hidden; color: var(--rh-text-leise); font-size: 11px; font-weight: 400; text-overflow: ellipsis; }
.rh-turnier-lucky { color: var(--rh-blau); }
.rh-turnier-zeit { color: var(--rh-text-leise); font-variant-numeric: tabular-nums; }
/* Weg eines Fahrers (baukasten.js): dieselbe Person in allen Runden. */
.rh-turnier-platz.ist-weg, tr.ist-weg { background: var(--rh-flaeche-hoch); }
.rh-turnier-platz.ist-weg .rh-turnier-name { color: var(--rh-akzent); }
.rh-turnier-legende { display: flex; flex-wrap: wrap; gap: var(--rh-abstand-4); margin-top: var(--rh-abstand-3); color: var(--rh-text-leise); font-size: var(--rh-schrift-klein); }
.rh-turnier-legende span::before { display: inline-block; width: 3px; height: 12px; margin-right: 6px; vertical-align: -1px; background: var(--farbe); content: ""; }

/* Bild in Zeile und Bildfeld (Betreiber, 2026-10-05), von der Seite Strecken
   übernommen: in der Zeile ein kleines Vorschaubild oder „kein Bild“, im Dialog
   die Vorschau auf Karomuster mit „Bild wählen“, „Bild entfernen“ und Speichern. */
.rh-bild { width: 96px; height: var(--rh-hoehe-kompakt); display: flex; align-items: center; justify-content: center; background: var(--rh-grund); }
.rh-bild img { max-width: 100%; max-height: 100%; display: block; }
.rh-bild-leer { color: var(--rh-text-leise); font-size: var(--rh-schrift-klein); }
.rh-bildfeld { display: grid; gap: var(--rh-abstand-3); }
.rh-bildfeld [hidden] { display: none !important; }
.rh-bildfeld p { margin: 0; color: var(--rh-text-leise); font-size: var(--rh-schrift-klein); }
.rh-bildfeld-vorschau { height: 160px; display: flex; align-items: center; justify-content: center; padding: 10px; background: repeating-conic-gradient(var(--rh-flaeche-hoch) 0 25%, var(--rh-feldgrund) 0 50%) 0 0 / 16px 16px; }
.rh-bildfeld-vorschau img { max-width: 100%; max-height: 100%; }
.rh-bildfeld label { position: relative; }

/* Abschnittszeile (Betreiber, 2026-10-05): eine Trennzeile mit Überschrift in
   einer Tabelle, wie die Überschrift einer Feldgruppe; etwa abgelaufene
   Sessions im General Log von Race Control. */
.rh-tabelle tr.rh-abschnitt > th { padding: 14px 8px 6px; border-top: 1px solid var(--rh-linie); color: var(--rh-text-leise); background: none; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-align: left; text-transform: uppercase; }

/* Feste Spalten (Betreiber, 2026-10-05): jede Zeile einzeilig, nie umgebrochen,
   nie seitlich gescrollt. Die Breiten setzt ein colgroup, die freie Spalte
   nimmt den Rest; reicht er nicht, wird gekürzt. Etwa Car Log und General Log. */
.rh-tabelle--fest { width: 100%; table-layout: fixed; }
.rh-tabelle--fest td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-tabelle--fest .rh-entries { flex-wrap: nowrap; }
.rh-tabelle--fest .rh-entry { min-width: 0; }
.rh-tabelle--fest .rh-entry > span:not(.rh-entry-nummer) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Dichte Zeilen: weniger Luft über und unter dem Inhalt, damit eine lange Liste
   kürzer wird; etwa das Strafpunktekonto der Rennleitung (Betreiber, 2026-10-08). */
.rh-tabelle--dicht td { padding-top: 5px; padding-bottom: 5px; }
.rh-tabelle--dicht td > div + div { margin-top: var(--rh-abstand-1); }