/**
 * raceresult.css — Anmeldeformular, Teilnehmerliste und Ergebnisse im Look des Events.
 *
 * ============================================================================================
 * WARUM DAS ÜBERHAUPT GEHT (und warum es nicht nach Gewalt aussieht)
 * ============================================================================================
 * raceresult liefert EIN Stylesheet (`registrations/registration.css`), und dieses Stylesheet ist
 * für Themes gebaut. Es deklariert seine Farben als CSS-Variablen auf `:root`:
 *
 *     --navigation-background  --navigation-selected  --navigation-text
 *     --button                 --button-text          --button-disabled
 *     --mandatory-border
 *
 * Wir setzen diese Variablen auf UNSEREM Container neu. Custom Properties vererben, also nimmt
 * das ganze Widget sie an — ohne `!important`, ohne Selektor-Wettrüsten, und ohne dass ein
 * Update des Anbieters die Änderung bricht. Das ist der vorgesehene Weg, nicht ein Trick.
 *
 * Der zweite Hebel ist eine Zeile in ihrem Stylesheet:
 *
 *     .RRReg * { background-color: inherit }
 *
 * Damit reicht EINE Hintergrundangabe an der Wurzel und das gesamte Formular folgt — auch die
 * schwebenden Beschriftungen, die ihren Hintergrund brauchen, um die Feldkante zu durchbrechen.
 *
 * `!important` steht deshalb nur noch an drei Stellen: bei den Abschnittsköpfen (die tragen ihre
 * Farben INLINE, im raceresult-Konto je Block gesetzt) und bei zwei fest verdrahteten Flächen.
 *
 * ============================================================================================
 * WAS UNS NICHT GEHÖRT
 * ============================================================================================
 * Die Reihenfolge der Felder, die Schritte des Vorgangs und die Beschriftungen kommen aus dem
 * raceresult-Konto. Angefasst werden hier ausschließlich Farbe, Abstand, Kante, Schrift und
 * Bewegung — nie `display`, `position` oder die Reihenfolge. Das Formular ist ein mehrstufiger
 * Bezahlvorgang; wer seinen Aufbau umbaut, riskiert eine Anmeldung, die sich nicht mehr
 * abschicken lässt, und sieht es der Seite nicht an.
 *
 * ============================================================================================
 * EIN LOOK FÜR ALLE EVENTS
 * ============================================================================================
 * Jede Farbe kommt aus den Theme-Token. Das Formular ist damit auf Parkleuchten dunkel-neon und
 * auf dem Rhein City Run hell — ohne eine einzige eventspezifische Zeile. Ein neues Event bringt
 * seinen Look automatisch mit.
 */

/* ============================================================
   1. Der Rahmen
   ============================================================ */

.raceresult-gate__widget {
    /* --- raceresults eigene Theme-Variablen --- */
    --navigation-background: var(--surface-sunken, rgba(0, 0, 0, 0.25));
    --navigation-selected:   rgba(var(--color-primary-rgb), 0.22);
    --navigation-text:       var(--color-text);
    --button:                var(--color-primary);
    --button-text:           var(--color-text-on-primary);
    --button-disabled:       var(--color-border);
    /* Pflichtfeld-Kante in der ZWEITfarbe: In der Primärfarbe wäre sie nicht von der
       Fokus-Kante zu unterscheiden, und raceresults Standardrot (#e45f4d) gehört in keine
       unserer Paletten — auf Parkleuchten stand ein fremdes Rot neben Türkis und Rosa. */
    --mandatory-border:      var(--color-accent, var(--color-primary));

    position: relative;
    width: 100%;
    overflow-x: auto;              /* breite Listen scrollen IM Rahmen, nicht die Seite */
    background: var(--surface-raised);
    color: var(--color-text);
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    border-radius: var(--radius-lg);
    padding: clamp(1rem, 3vw, 2.5rem);
    font-family: var(--font-body);
    /* Die Karte ist ein Panel, keine Bahn über die ganze Seite. Ohne Deckel stand das 640 px
       breite Formular mittig in einer 1170 px breiten Fläche — links und rechts nichts. */
    max-width: 880px;
    margin-inline: auto;
}

/* Ein Lichtsaum an der Oberkante — die Handschrift eines Abendlaufs, und zugleich die Kante,
   die der Karte auf dunklem Grund überhaupt erst eine Form gibt. Rein dekorativ, ohne
   Tippfläche (pointer-events), damit er nie ein Feld abfängt. */
.raceresult-gate__widget::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-primary) 20%,
        var(--color-accent, var(--color-primary)) 55%,
        var(--color-highlight, var(--color-primary)) 80%,
        transparent 100%);
    opacity: 0.9;
    pointer-events: none;
}

/* ⚠️ Zwei fest verdrahtete Flächen aus dem Anbieter-Stylesheet. Ohne diese beiden Zeilen steht
   auf einem dunklen Event ein weißer Kasten mitten im Formular. */
.raceresult-gate__widget .RRReg_Main,
.raceresult-gate__widget .RRReg {
    background-color: transparent !important;
    color: var(--color-text);
}

/* Nur der Formularinhalt wird auf Lesebreite gebracht. ⚠️ NICHT `.RRReg` mitbegrenzen: die
   Schrittleiste ist dessen Kind und wurde dadurch auf 640 px eingesperrt, sodass die hinteren
   Schritte abgeschnitten waren, obwohl die Karte breit genug ist. */
.raceresult-gate__widget .RRReg_Main {
    max-width: 640px;
    margin-inline: auto;
    padding: 0 !important;
}

.raceresult-gate__widget .RRReg,
.raceresult-gate__widget .RRReg * {
    font-family: var(--font-body);
}

/* ⚠️ DAS RACERESULT-KONTO SCHREIBT EIGENE FARBEN IN DIE SEITE. Das Widget injiziert einen
   `<style>`-Block mit den im Konto gepflegten Werten, und zwar auf `.RRReg` selbst und mit
   `!important`:

       .RRReg { --button: #ff3e1f!important; --mandatory-border: #ff3e1f!important; … }

   Deshalb blieb die Pflichtfeld-Kante orangerot, obwohl die Variable auf unserem Container
   längst auf Rosa stand — am 13.08.2026 gemessen: Container `#DC577D`, Feld `#ff3e1f`. Eine
   Deklaration am Vorfahren verliert gegen eine `!important`-Deklaration am Element selbst.
   Mit `.raceresult-gate__widget .RRReg` (zwei Klassen gegen eine) gewinnen wir.

   ⚠️ Derselbe Block enthält Regeln auf `.RRReg #body > div > nav`. Ein `id="body"` gibt es in
   UNSERER Einbettung nicht — die Regeln greifen also nicht, und die schwarze Leiste samt
   orangerotem Schritt aus dem Konto kommt bei uns nie an. Wer hier aufräumt, sollte das
   nachmessen, statt es anzunehmen: mit einer ID wäre es nur noch mit einer eigenen ID zu
   schlagen, und Klassen reichen gegen eine ID grundsätzlich nicht. */
.raceresult-gate__widget .RRReg {
    --navigation-background: var(--surface-sunken, rgba(0, 0, 0, 0.25)) !important;
    --navigation-selected:   transparent !important;
    --navigation-text:       var(--color-text) !important;
    --navigation-hover:      rgba(var(--color-primary-rgb), 0.14) !important;
    --button:                var(--color-primary) !important;
    --button-hover:          var(--color-primary-dark) !important;
    --button-text:           var(--color-text-on-primary) !important;
    --button-disabled:       var(--color-border) !important;
    --mandatory-border:      var(--color-accent, var(--color-primary)) !important;
}

/* ============================================================
   2. Schrittleiste
   ============================================================
   Aus der roten Vollfläche des Anbieters wird eine ruhige Schiene: der aktuelle Schritt trägt
   die Markenfarbe und eine Unterkante, erledigte und kommende treten zurück. Damit liest man
   auf einen Blick, wo man steht — bei acht Schritten ist das die eigentliche Aufgabe. */

.raceresult-gate__widget .RRReg_Nav {
    height: auto !important;            /* fest 55 px reichen für Ziffer + Beschriftung nicht */
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-5);
    /* Bei acht Schritten passt die Leiste nicht auf jedes Gerät. ⚠️ NICHT umbrechen lassen: die
       Punkte sind Flex-Kinder ohne feste Breite, mit `flex-wrap: wrap` wird jeder volle Breite
       und aus der Leiste werden acht gestapelte Balken (am 13.08.2026 gemessen). Sie bleibt
       einzeilig und scrollt — raceresult blendet die Scrollleiste selbst aus. */
    overflow-x: auto !important;
    scroll-snap-type: inline proximity;
    scroll-behavior: smooth;
}

/* Sichtbar machen, dass rechts (oder links) noch etwas liegt.
 *
 * Die Leiste bekommt eine Maske, die den Inhalt zur Kante hin ausblendet — ein harter Schnitt
 * mitten im Wort sieht nach Fehler aus, ein Auslaufen nach „hier geht es weiter".
 *
 * ⚠️ Die Maske hängt an einem Attribut, das ein kleines Skript setzt (inc/raceresult.php), und
 * NICHT dauerhaft an der Leiste. Ein fester Verlauf würde auch dann anschneiden, wenn alle
 * Schritte bequem hineinpassen — dann fehlte am letzten Schritt grundlos ein Stück.
 *
 * ⚠️ Ein reiner Hintergrundverlauf kann das nicht leisten: Hintergründe liegen HINTER dem Text,
 * sie blenden ihn also nicht aus. Es braucht eine Maske. */
.raceresult-gate__widget .RRReg_Nav[data-rr-rand="rechts"] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
}

.raceresult-gate__widget .RRReg_Nav[data-rr-rand="links"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px);
            mask-image: linear-gradient(to right, transparent 0, #000 44px);
}

.raceresult-gate__widget .RRReg_Nav[data-rr-rand="beide"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}

/* Ein Schritt rastet an der linken Kante ein statt halb im Bild zu stehen. */
.raceresult-gate__widget .RRReg_Nav > div > div {
    scroll-snap-align: start;
}

/* Ziffern kommen aus einem CSS-Zähler, nicht aus dem Markup — raceresult liefert keine.
   ⚠️ Ausgeblendete Schritte (`div.hidden`) tragen `display: none`, erzeugen also keine Box und
   erhöhen den Zähler nicht. Die Nummerierung stimmt damit auch bei Formularen, die einzelne
   Schritte gar nicht anbieten. */
.raceresult-gate__widget .RRReg_Nav > div {
    counter-reset: rr-schritt;
    height: auto !important;
    align-items: stretch;
}

.raceresult-gate__widget .RRReg_Nav > div > div {
    counter-increment: rr-schritt;
    gap: 0.5em;
    padding: var(--space-3) var(--space-4) !important;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

/* Die Ziffer als eigene Marke davor. Feste Maße und mittige Ausrichtung, damit ein- und
   zweistellige Nummern gleich breit stehen. */
.raceresult-gate__widget .RRReg_Nav > div > div::before {
    content: counter(rr-schritt);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65em;
    height: 1.65em;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 0.95em;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    opacity: 0.75;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* Der aktuelle Schritt: gefüllte Ziffer, Beschriftung in der Markenfarbe, Unterkante als Marke.
   Bei acht Schritten ist „wo stehe ich?" die eigentliche Frage der Leiste. */
.raceresult-gate__widget .RRReg_Nav > div > div.selected {
    color: var(--color-primary-text, var(--color-primary));
    border-bottom-color: var(--color-primary);
}

.raceresult-gate__widget .RRReg_Nav > div > div.selected::before {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
    opacity: 1;
}

/* Noch nicht erreichbare Schritte treten zurück, bleiben aber lesbar — sie sind die Vorschau
   auf den Weg und keine Deko. */
.raceresult-gate__widget .RRReg_Nav > div > div.disabled {
    opacity: 0.75;
}

/* Acht Schritte mit ausgeschriebener Beschriftung („TEILNAHMEBEDINGUNGEN") passen auf kein
   schmales Gerät. Statt sie abzuschneiden, bleiben dort die ZIFFERN stehen und nur der aktuelle
   Schritt trägt seinen Namen — man sieht weiterhin, wie viele Schritte es sind und wo man steht.
   ⚠️ `font-size: 0` am Punkt blendet die Beschriftung aus; die Ziffer sitzt im ::before und
   braucht deshalb einen ABSOLUTEN Wert, ein relativer wäre ebenfalls null. */
@media (max-width: 900px) {
    .raceresult-gate__widget .RRReg_Nav > div > div:not(.selected) {
        font-size: 0;
        gap: 0;
        padding: var(--space-3) var(--space-2) !important;
    }
    .raceresult-gate__widget .RRReg_Nav > div > div:not(.selected)::before {
        font-size: 0.75rem;
    }
}

/* ============================================================
   3. Abschnitte und ihre Köpfe
   ============================================================ */

.raceresult-gate__widget .RRReg_Box {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-4) !important;
    margin: var(--space-4) 0 !important;
}

/* ⚠️ `.RRReg_Text` ist NICHT nur die Kopfzeile — dieselbe Klasse trägt auch Fließtext („Bitte
   gib hier deine angepeilte Laufzeit an."). Gemessen auf park: 20 Blöcke, davon 12 Köpfe.
   Unterscheidbar sind sie allein am INLINE gesetzten Hintergrund, deshalb der Attribut-Selektor.
   Ohne ihn bekämen auch Hinweissätze eine Kopfzeilen-Auszeichnung.

   Die Inline-Farben stammen aus dem raceresult-Konto und waren dort weder abgestimmt noch
   lesbar: schwarze Balken, ein fremdes Rot (#E73131) und weiße Schrift auf Hellblau (#C5E9FF,
   gemessen 1,32:1). Statt zwei fremde Farbwelten zu flicken, bekommen alle Köpfe dieselbe
   Auszeichnung — und zwar KEINE Vollfläche mehr, sondern eine Zeile mit Signalkante. Das wirkt
   ruhiger und trägt auf hellem wie dunklem Grund. */
.raceresult-gate__widget .RRReg_Text[style*="background-color"] {
    background: transparent !important;
    color: var(--color-text) !important;
    padding: 0 0 var(--space-2) var(--space-3) !important;
    margin: 0 0 var(--space-3) 0 !important;
    border-left: 3px solid var(--color-primary) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.raceresult-gate__widget .RRReg_Text[style*="background-color"] p,
.raceresult-gate__widget .RRReg_Text[style*="background-color"] span,
.raceresult-gate__widget .RRReg_Text[style*="background-color"] b {
    color: inherit !important;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    letter-spacing: 0.01em;
}

/* Fließtext ohne eigene Fläche bleibt Fließtext, nur ruhiger gesetzt. */
.raceresult-gate__widget .RRReg_Text:not([style*="background-color"]),
.raceresult-gate__widget .RRReg_HTML {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3) 0;
}

/* ============================================================
   4. Felder
   ============================================================ */

.raceresult-gate__widget .RRReg_EntryField input[type='text'],
.raceresult-gate__widget .RRReg_EntryField input[type='password'],
.raceresult-gate__widget .RRReg_EntryField select,
.raceresult-gate__widget .RRReg_EntryField textarea,
.raceresult-gate__widget .RRReg_EntryField .RRReg_RadioGroup,
.raceresult-gate__widget .RRReg_EntryField .RRReg_FileField {
    border-color: var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Die schwebende Beschriftung lebt davon, dass sie den Hintergrund des Feldes trägt und so die
   Kante durchbricht. Das erledigt `background-color: inherit` beim Anbieter von selbst — hier
   muss nur die Farbe stimmen. */
/* ⚠️ Die Beschriftung MUSS eine deckende Fläche haben, sonst läuft die Feldkante quer durch die
   Schrift. raceresult löst das mit `background-color: inherit` — das trägt aber nur, solange
   irgendein Vorfahr eine Fläche setzt. Wir haben `.RRReg` bewusst transparent gemacht (sonst
   stünde ein weißer Kasten im Formular), damit erbt die Beschriftung „durchsichtig". Deshalb
   hier die Fläche der Karte ausdrücklich, plus etwas Luft nach links und rechts. */
/* ⚠️ Der Anbieter zielt mit `.RRReg div.RRReg_EntryField > *~label` — zwei Klassen UND zwei
   Typen. Unsere erste Fassung hatte einen Typselektor weniger und verlor: die Beschriftung blieb
   bei #666 (gemessen rgb(102,102,102)), obwohl die Fläche daneben längst saß, weil die nur wegen
   `!important` durchkam. Deshalb hier dieselbe Bauform plus unsere Container-Klasse. */
.raceresult-gate__widget .RRReg div.RRReg_EntryField > *~label {
    /* ⚠️ NICHT `--color-text-muted`: gemessen 3,09:1 auf der dunklen Karte. Diese Beschriftung
       ist keine Nebensache — sobald ein Feld ausgefüllt ist, sagt nur noch sie, was darin steht.
       Die Abstufung zum Feldtext trägt die GRÖSSE (85 % vom Anbieter), nicht die Farbe. */
    color: var(--color-text);
    background-color: var(--surface-raised) !important;
    padding: 0 6px !important;
}

/* Der Fokus ist die eine Stelle, an der ein Formular Rückmeldung geben MUSS. Markenfarbe plus
   ein weicher Schein — auf einem Nachtlauf ist das die naheliegendste Übersetzung, und auf
   hellen Events bleibt es ein dezenter Ring. */
.raceresult-gate__widget .RRReg_EntryField > input:not(:disabled):focus,
.raceresult-gate__widget .RRReg_EntryField > select:not(:disabled):focus,
.raceresult-gate__widget .RRReg_EntryField > textarea:not(:disabled):focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.25);
}

/* ⚠️ DIE ANBIETER-STILE WERDEN ZUR LAUFZEIT NACHGELADEN und stehen damit IMMER nach unserer
   Datei. Bei gleicher Spezifität gewinnt deshalb grundsätzlich raceresult — Reihenfolge hilft
   uns hier nie, anders als im gewöhnlichen Fall.

   Ihre Regel `.RRReg div.RRReg_EntryField > input[type='text']:focus + label` kommt auf (0,4,3),
   unsere mit dem zusätzlichen `.RRReg` auf genau dasselbe. Ergebnis: Die Beschriftung blieb im
   Fokus BLAU (#376fd0, gemessen am 13.08.2026 auf ar), während die Feldkante längst in der
   Markenfarbe stand — ein Feld in zwei Farben, und keine davon erklärt sich. Deshalb hier
   ausdrücklich `!important` statt eines weiteren Selektor-Bausteins. */
.raceresult-gate__widget .RRReg div.RRReg_EntryField > input:focus + label,
.raceresult-gate__widget .RRReg div.RRReg_EntryField > select:focus + label,
.raceresult-gate__widget .RRReg div.RRReg_EntryField > textarea:focus + label {
    color: var(--color-primary-text, var(--color-primary)) !important;
}

.raceresult-gate__widget .RRReg_EntryField input:not(:disabled):hover,
.raceresult-gate__widget .RRReg_EntryField select:not(:disabled):hover,
.raceresult-gate__widget .RRReg_EntryField textarea:not(:disabled):hover {
    border-color: rgba(var(--color-primary-rgb), 0.55);
}

/* ⚠️ Der Aufklapp-Pfeil ist bei raceresult ein PNG in Grau (`/graphics/dropdown.png`). Auf einem
   dunklen Formular ist er praktisch unsichtbar. Ersetzt durch ein SVG, das `currentColor` nutzt
   und damit in jedem Event automatisch stimmt. */
.raceresult-gate__widget .RRReg_EntryField select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-position: right 12px center !important;
    padding-right: 32px !important;
}

/* ⚠️ Die AUFKLAPPLISTE eines <select> zeichnet der Browser, nicht die Seite — und Chrome auf
   Windows sowie Firefox übernehmen dabei die CSS-Farben der <option>-Einträge. Die erben hier
   die helle Widget-Schrift (gemessen rgb(239,236,242)) bei durchsichtigem Hintergrund, und weil
   das Feld selbst keine Fläche setzt, malt der Browser das Popup WEISS: fast weiße Schrift auf
   Weiß (Christian, Anfrage #584). Auf dem Mac fällt das nicht auf, dort rendert das System das
   Popup nativ schwarz auf weiß und ignoriert diese Regeln komplett. Deshalb beide Werte
   ausdrücklich — dunkle Schrift auf heller Fläche, wie es das native Popup ohnehin vormacht. */
.raceresult-gate__widget select option {
    color: #1d1d1f !important;
    background-color: #ffffff !important;
}

/* Ankreuzfelder und Auswahlkacheln */
.raceresult-gate__widget .RRReg_EntryField > label:first-child {
    border-color: var(--color-border);
    border-radius: var(--radius-sm);
}

.raceresult-gate__widget .RRReg_EntryField > label:first-child:not(.disabled):hover {
    border-color: rgba(var(--color-primary-rgb), 0.55);
}

.raceresult-gate__widget .RRReg_RadioGroupTile > label {
    background-color: transparent !important;
    border-right-color: var(--color-border) !important;
}

.raceresult-gate__widget .RRReg_RadioGroupTile > label.selected {
    background-color: rgba(var(--color-primary-rgb), 0.18) !important;
    color: var(--color-text);
}

.raceresult-gate__widget input:disabled,
.raceresult-gate__widget select:disabled,
.raceresult-gate__widget textarea:disabled,
.raceresult-gate__widget label.disabled:first-child {
    background-color: rgba(var(--color-primary-rgb), 0.05) !important;
    color: var(--color-text-muted);
}

.raceresult-gate__widget input[type='checkbox'],
.raceresult-gate__widget input[type='radio'] {
    accent-color: var(--color-primary);
}

/* ============================================================
   5. Knöpfe
   ============================================================
   Grundfarbe und Schrift kommen über `--button` / `--button-text` aus Abschnitt 1. Hier nur
   Form und Bewegung, passend zu unseren eigenen Knöpfen. */

.raceresult-gate__widget .RRReg button {
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.raceresult-gate__widget .RRReg button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary);
}

.raceresult-gate__widget .RRReg button.RRReg_ButtonBack {
    background-color: transparent !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: none;
}

/* ⚠️ Der Fokusring des Anbieters ist `2px dotted #fff` — auf einem hellen Event unsichtbar.
   Ersetzt durch unseren eigenen, der auf beiden Gründen trägt. */
.raceresult-gate__widget .RRReg button:focus-visible {
    border: 0 !important;
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 3px !important;
}

/* ============================================================
   6. Kosten, Bezahlung, Abschluss
   ============================================================ */

.raceresult-gate__widget .RRReg_EntryFees > table thead td {
    background-color: rgba(var(--color-primary-rgb), 0.10) !important;
    border-bottom-color: var(--color-border) !important;
    color: var(--color-text);
}

.raceresult-gate__widget .RRReg_EntryFees > table tbody.RRReg_EntryFees_Sum td {
    border-top-color: var(--color-border) !important;
}

.raceresult-gate__widget .RRReg_PaymentMethod {
    border-color: var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.raceresult-gate__widget .RRReg_PaymentMethod:hover {
    background-color: rgba(var(--color-primary-rgb), 0.10) !important;
    border-color: rgba(var(--color-primary-rgb), 0.55) !important;
}

.raceresult-gate__widget .RRReg_Confirmation_PaymentDetails {
    background-color: rgba(var(--color-primary-rgb), 0.08) !important;
    border-radius: var(--radius-md);
}

.raceresult-gate__widget .RRReg_Confirmation_Error {
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
}

.raceresult-gate__widget .RRReg_Confirmation_StartOver {
    color: var(--color-primary-text, var(--color-primary)) !important;
}

/* Fehlermeldungen bleiben ROT — das ist keine Markenfarbe, sondern eine Warnung, und sie muss
   sich von allem anderen unterscheiden. Nur die Ausrichtung wird ruhiger. */
.raceresult-gate__widget .RRReg_Error {
    text-align: left !important;
    font-size: var(--text-sm) !important;
}

/* ============================================================
   6b. Anmeldeübersicht und Teamcaptain-Login (RRRegStart)
   ============================================================
   ⚠️ ANDERE LAGE ALS BEIM FORMULAR: Dieses Widget bringt ÜBERHAUPT KEIN Stylesheet mit. Beim
   Anmeldeformular kämpfen wir gegen fremde Regeln, hier gibt es gar keine — gemessen am
   13.08.2026 auf ar: Überschrift 76,8 px (unsere h1-Stufe), Eingabefelder 191 px breit mit
   2 px Standardrahmen, Knopf grau auf Weiß. Also reine Browser-Standards mitten auf der Seite.
   Dennis: „Login Seite Raceresult müssen wir noch, sieht roh aus."

   Deshalb steht hier eine VOLLSTÄNDIGE Gestaltung und nicht nur eine Korrektur. Die Regeln oben
   greifen hier ohnehin kaum: Sie setzen Farbe und Radius, weil Breite und Polsterung beim
   Formular von raceresult kommen.

   ⚠️ Alles unter `.RRRegStart` scopen. `.RRReg_EntryField` heißt in BEIDEN Widgets gleich,
   trägt aber verschiedene Anlagen: im Formular eine schwebende Beschriftung über der Feldkante,
   hier eine Beschriftung ÜBER dem Feld. Wer das vermischt, zerlegt eines von beiden.

   Drei Erscheinungsformen, alle drei am 13.08.2026 gerendert und angesehen:
     Login            (ar)   .RRReg_Login mit Formular
     Anmeldeliste     (runs) .RRRegStart_Registrations_* je mit Überschrift und Knopf
     Wettbewerbe      (rcr)  .RRRegStart_Table samt „ausgebucht" und gesperrtem Knopf
   ============================================================ */

.raceresult-gate__widget .RRRegStart {
    max-width: 640px;
    margin-inline: auto;
    color: var(--color-text);
}

/* Ein Login ist eine EINZELNE Aufgabe. In einer 880 px breiten Karte steht ein 380 px schmales
   Formular verloren in der Fläche, deshalb rückt die Karte zusammen.
   ⚠️ Nur für den LOGIN, nicht für jede Anmeldeübersicht: Die Wettbewerbstabelle braucht die
   Breite, sonst bricht „m/w, Jahrgang 2023 und älter" auf vier Zeilen um (erst so passiert).
   `:has()` trifft genau den Fall, statt ihn am Modus zu erraten. */
.raceresult-gate__widget:has(.RRReg_Login) {
    max-width: 560px;
}

/* --- Login: eine Aufgabe, mittig gesetzt --- */
.raceresult-gate__widget .RRRegStart .RRReg_Login {
    text-align: center;
}

/* ⚠️ Eine Klasse MEHR als die Grundregel darüber. Mit gleicher Spezifität hätte die Reihenfolge
   im Stylesheet entschieden — und weil dieser Block vor der h1-Grundregel steht, blieb die rote
   Signalkante trotz `border-left: 0` stehen. Auf Reihenfolge zu bauen ist hier zu zerbrechlich. */
.raceresult-gate__widget .RRRegStart .RRReg_Login h1 {
    text-align: center;
    /* Ohne die Signalkante: Die gehört zu den Abschnittsköpfen eines langen Formulars. Auf einer
       Karte mit einer einzigen Überschrift ist sie Zierrat ohne Aufgabe. */
    border-left: 0;
    padding-left: 0;
    font-size: var(--text-xl);
    letter-spacing: 0.01em;
}

.raceresult-gate__widget .RRRegStart .RRReg_Login p {
    margin-inline: auto;
    max-width: 42ch;
}

/* Beschriftung und Feld linksbündig — mittig gesetzte Formularfelder liest niemand gern. */
.raceresult-gate__widget .RRRegStart .RRReg_Login form {
    text-align: left;
    max-width: 380px;
    margin-inline: auto;
}

.raceresult-gate__widget .RRRegStart .RRReg_Login button {
    width: 100%;
    margin-top: var(--space-2);
}

/* Überschriften. Die Vorlage gibt `h1` aus — auf unserer Seite ist das die größte Stufe
   überhaupt und wirkt neben der Seitenüberschrift wie ein Fehler. */
.raceresult-gate__widget .RRRegStart h1 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    line-height: 1.2;
    margin: 0 0 var(--space-3) 0;
    padding: 0 0 var(--space-2) var(--space-3);
    border-left: 3px solid var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

.raceresult-gate__widget .RRRegStart p {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4) 0;
    max-width: 60ch;
}

/* --- Eingabefelder: Beschriftung ÜBER das Feld ---
   Im Markup steht `<input>` VOR `<label>` (die Vorlage baut sonst eine schwebende Beschriftung).
   Ohne fremdes Stylesheet stünde die Beschriftung dadurch RECHTS neben dem Feld. `column-reverse`
   dreht nur die Anzeige um und lässt die Reihenfolge im Dokument unangetastet — für
   Vorlesesoftware und Tastatur bleibt alles, wie es war. */
.raceresult-gate__widget .RRRegStart .RRReg_EntryField {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.35rem;
    margin-bottom: var(--space-4);
}

.raceresult-gate__widget .RRRegStart .RRReg_EntryField label {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
}

.raceresult-gate__widget .RRRegStart input[type='text'],
.raceresult-gate__widget .RRRegStart input[type='email'],
.raceresult-gate__widget .RRRegStart input[type='password'],
.raceresult-gate__widget .RRRegStart select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--color-text);
    font: inherit;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.raceresult-gate__widget .RRRegStart input:hover {
    border-color: rgba(var(--color-primary-rgb), 0.55);
}

.raceresult-gate__widget .RRRegStart input:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.25);
}

/* --- Knöpfe --- */
.raceresult-gate__widget .RRRegStart button {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border: 0;
    border-radius: var(--radius-md);
    padding: 12px 22px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.raceresult-gate__widget .RRRegStart button:hover:not(:disabled) {
    background: var(--color-primary-dark);
    color: var(--color-text-on-primary-dark, var(--color-white));
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary);
}

.raceresult-gate__widget .RRRegStart button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Ein gesperrter Knopf muss als gesperrt LESBAR bleiben („Anmeldung geschlossen" auf rcr).
   Nur die Deckkraft zu senken macht ihn unlesbar; deshalb eine eigene, ruhige Fläche. */
.raceresult-gate__widget .RRRegStart button:disabled {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Fehlermeldung beim Login. Rot bleibt Rot — das ist eine Warnung, keine Markenfarbe.
   Leer soll sie keinen Platz einnehmen, sonst klafft über dem Knopf eine Lücke. */
.raceresult-gate__widget .RRRegStart .RRReg_LoginError {
    color: #e53935;
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

.raceresult-gate__widget .RRRegStart .RRReg_LoginError:empty {
    display: none;
}

/* --- Anmeldeliste (runs): je Anmeldeart eine Karte --- */
.raceresult-gate__widget .RRRegStart_Registrations > div {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    background: rgba(var(--color-primary-rgb), 0.04);
}

/* Beim Login umschließt dasselbe Element das ganze Formular — dort wäre eine zweite Karte in
   der Karte eine Rahmung ohne Aussage. */
.raceresult-gate__widget .RRRegStart_Registrations > .RRReg_Login {
    padding: 0;
    border: 0;
    background: none;
}

.raceresult-gate__widget .RRRegStart_Registrations > div > h1 {
    font-size: var(--text-lg);
}

/* --- Wettbewerbstabelle (rcr) ---
   Die Vorlage baut sie aus verschachtelten `div`s ohne eigene Gestaltung.
   
   ⚠️ Der erste Anlauf war FLEX je Zeile — damit fluchteten Kopfzeile und Datenzeile NICHT:
   „Frei" stand in der Kopfzeile rechts, der zugehörige Wert in der Zeile darunter in der Mitte.
   Bei einem Wettbewerb fällt das kaum auf, bei fünf ist es unlesbar. Eine Tabelle lebt davon,
   dass Spalten übereinanderstehen, also braucht es ein Raster.
   
   Die Spaltenzahl entscheidet das Event, deshalb kommt sie als `--rr-spalten` aus dem Skript
   (inc/raceresult.php). Ohne Skript gilt der Standardwert 6 — dann steht die Tabelle immer noch
   ordentlich, nur eventuell mit einer Spalte zu viel oder zu wenig. */
.raceresult-gate__widget .RRRegStart_Table {
    display: grid;
    grid-template-columns: repeat(var(--rr-spalten, 6), auto);
    /* ⚠️ NICHT `align-items: center` — gemessen am 13.08.2026 die Ursache für zwei sichtbare
       Fehler auf einmal: Die leeren Kopfzellen schrumpften auf 17 statt 43 px, wodurch das
       getönte Band eine Lücke bekam, und die zweizeilige Zelle „m/w, Jahrgang 2023 und älter"
       stand 15 px höher als ihre Nachbarn, wodurch die Trennlinien versetzt liefen.
       `stretch` gibt allen Zellen einer Zeile dieselbe Höhe; mittig steht der Inhalt
       anschließend IN der Zelle (siehe unten), nicht die Zelle in der Zeile. */
    align-items: stretch;
}

/* `display: contents` löst die Zeilen-Container auf, sodass ihre Zellen direkt im Raster
   liegen und spaltenweise fluchten. Der Preis: Die ZEILE kann keinen Hintergrund und keine
   Linie mehr tragen — beides wandert deshalb an die Zellen. */
.raceresult-gate__widget .RRRegStart_Table > div {
    display: contents;
}

/* ⚠️ KEIN `display: flex` an den Zellen. Der Inhalt ist teils gemischt („0" als Textknoten plus
   `<span> Frei</span>`); als Flex-Elemente verlieren die beiden das Leerzeichen dazwischen und es
   stand „0Frei" da. Die gleiche Zeilenhöhe liefert ohnehin schon das Raster (`stretch`). */
.raceresult-gate__widget .RRRegStart_Table > div > div {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    font-variant-numeric: tabular-nums;
}

/* Leere Zellen kommen vor (die Vorlage hält Spalten für Knöpfe frei, die es hier nicht gibt).
   Mit Polsterung stünden sie als 24 px breite Lücke mitten in der Tabelle — gemessen. */
.raceresult-gate__widget .RRRegStart_Table > div > div:empty {
    padding-inline: 0;
}

/* Die letzte Spalte trägt den Status („ausgebucht") und gehört an den rechten Rand. */
.raceresult-gate__widget .RRRegStart_Table > div > div:last-child {
    text-align: right;
    white-space: nowrap;
}

/* Die erste Zeile ist die Kopfzeile — die Vorlage kennzeichnet sie nicht, sie steht nur vorn. */
.raceresult-gate__widget .RRRegStart_Table > div:first-child > div {
    background: rgba(var(--color-primary-rgb), 0.10);
    font-weight: 700;
    font-size: var(--text-sm);
}

.raceresult-gate__widget .RRRegStart_Closed > div {
    color: var(--color-text-muted);
}

/* Der Herkunftsnachweis von raceresult bleibt — er gehört dem Anbieter —, tritt aber als
   Fußnote zurück statt als dritter Block unter dem Knopf zu stehen. */
.raceresult-gate__widget .RRRegStart > div:last-child {
    opacity: 0.6;
    transform: scale(0.8);
    transform-origin: right center;
    text-align: right !important;
    margin-top: var(--space-4) !important;
}

/* ============================================================
   7. Listen (Teilnehmer und Ergebnisse)
   ============================================================
   ⚠️ Das Anbieter-Stylesheet zielt AUSNAHMSLOS auf `.RRPublish` — die Klasse setzt das Skript
   aber nicht selbst, sie muss am Container stehen (macht inc/raceresult.php beim Laden).
   Ohne sie traf weder der Anbieter-Stil noch dieser Abschnitt: Die Liste stand roh auf der
   Seite (gemessen 14.08.2026, Christian-Anfrage #581). Die früheren Tabellenregeln hier
   gingen zudem von nacktem `table`-Markup aus — der Anbieter baut `table.MainTable` samt
   Suchzeile, Sortierpfeilen und Favoriten-Sternen.

   Wie überall: nur Farbe und Fläche auf Token, Aufbau/Radien/Symbole bleiben
   Anbieter-Konvention. Paddings brauchen !important — der Anbieter setzt seine mit
   !important und lädt NACH uns. */

/* Kontrollzeile (Suche): helle Anbieter-Fläche (#f7f7f7) auf Token */
.raceresult-gate__widget .RRPublish div.ListControl {
    background-color: var(--surface-sunken);
    border-bottom-color: var(--color-border);
}

/* Das Suchfeld bleibt bewusst HELL (Anbieter-Look mit Lupe als Hintergrundbild und
   #444-Schrift) — auf dunklen Events braucht es dafür eine ausdrückliche weiße Fläche,
   sonst erbt es die dunkle Karte und die Anbieter-Schrift versinkt. */
.raceresult-gate__widget .RRPublish input[type='text'] {
    background-color: #fff;
}

/* ⚠️ KEIN äußerer Fokus-Schein wie bei den Formularfeldern: Feld und Suchen-Knopf sind beim
   Anbieter BÜNDIG zusammengebaut (Feld links gerundet, rechts randlos, Knopf direkt daneben).
   Der 3px-Schein legte sich über den Knopf und sah aus wie eine Überlappung (Dennis,
   14.08.2026). Der Fokus zeigt sich hier allein an der Kantenfarbe. */
.raceresult-gate__widget .RRPublish div.ListControlSearch > input:focus {
    border-color: var(--color-primary);
}

/* Die Suchzeile darf breiter: Der Anbieter reserviert ihr nur 40 % der Leiste, das Feld davon
   49 % — der eigene Platzhalter („Name, Startnr., Verein, etc. suchen") war abgeschnitten,
   obwohl die Leiste halb leer ist (Dennis: „ist genug Platz"). Nur oberhalb der
   Anbieter-Mobilgrenze (750 px), darunter gelten seine eigenen Mobilregeln. */
@media only screen and (min-width: 751px) {
    .raceresult-gate__widget .RRPublish div.ListControl > div.ListControlSearch { width: 65%; }
    .raceresult-gate__widget .RRPublish div.ListControl > div.ListControlSearch > input { width: 55%; }
    .raceresult-gate__widget .RRPublish div.ListControl > div.ListControlSearch > button.btnSearch { width: 22%; }
    .raceresult-gate__widget .RRPublish div.ListControl > div.ListControlSearch > button.btnFavorites { width: 12%; }
}

/* Such-Knopf in Markenfarbe statt Anbieter-Blau; der graue disabled-Zustand des Anbieters
   bleibt (er ist auf hell wie dunkel lesbar und sagt ehrlich „noch nichts eingegeben"). */
.raceresult-gate__widget .RRPublish div.ListControlSearch > button.btnSearch:not(:disabled) {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary, #fff);
}

/* Tabelle: Anbieter-Weiß raus, die Karte scheint durch */
.raceresult-gate__widget .RRPublish div.MainDiv,
.raceresult-gate__widget .RRPublish table.MainTable {
    background-color: transparent;
}

.raceresult-gate__widget .RRPublish table.MainTable th {
    background-color: rgba(var(--color-primary-rgb), 0.10);
    color: var(--color-text);
    padding: var(--space-2) var(--space-3) !important;
}

/* Startnummern und Zeiten stehen untereinander — Ziffern mit gleicher Laufweite lassen sich
   spaltenweise vergleichen, proportionale nicht. */
.raceresult-gate__widget .RRPublish table.MainTable td {
    padding: var(--space-2) var(--space-3) !important;
    font-variant-numeric: tabular-nums;
}

/* Erste Spalte ist die schmale Favoriten-MARKIERUNG des Anbieters (gedacht als ~6px-Streifen),
   letzte trägt den Stern. Beide dürfen unser Zellen-Padding NICHT erben: Über den Kopf der
   Leerspalte (2×12px Padding + Inhalt &nbsp;) wuchs die erste Spalte auf 62 px, und der
   Teilnehmer-Name begann sichtbar eingerückt statt linksbündig (Dennis, 14.08.2026). */
/* ⚠️ :not(.listGrouping): Die Gruppenzeile („Startblock 1: …") ist EIN td mit colspan über die
   ganze Breite — also selbst ein td:first-child. Ohne die Ausnahme verlor sie ihr Padding und
   klebte am linken Rand (Dennis, 14.08.2026). */
.raceresult-gate__widget .RRPublish table.MainTable th:first-child,
.raceresult-gate__widget .RRPublish table.MainTable td:first-child:not(.listGrouping) {
    padding: 0 !important;
    width: 6px;
}

/* Sternspalte: Kopf ebenfalls ohne Padding, die Zellen behalten die Anbieter-Maße
   (min-width 19px + padding-right, dort liegt das Stern-Symbol als Hintergrundbild). */
.raceresult-gate__widget .RRPublish table.MainTable th:last-child {
    padding: 0 !important;
}

.raceresult-gate__widget .RRPublish table.MainTable > tbody > tr.LastRecordLine > td {
    border-bottom-color: var(--color-border);
}

/* Gruppenzeile („Startblock 1: …") — Padding ausdrücklich, damit sie nie wieder in einer
   Randspalten-Regel hängen bleibt. */
.raceresult-gate__widget .RRPublish table.MainTable td.listGrouping {
    background-color: rgba(var(--color-primary-rgb), 0.14);
    color: var(--color-text);
    border-bottom-color: var(--color-border) !important;
    padding: var(--space-2) var(--space-3) !important;
}

/* Zeilen-Hover: das Anbieter-Gelb (#fff4ba) passt zu keiner Event-Palette */
.raceresult-gate__widget .RRPublish tr.Hover:hover {
    background-color: rgba(var(--color-primary-rgb), 0.08);
}

/* Sortierpfeile in den Spaltenköpfen sind dunkle Pixelgrafiken (data-URI-GIFs) —
   auf dunklen Events unsichtbar, deshalb dort invertiert (wie das Entfernen-Kreuz in
   Abschnitt 9). */
body.be-dunkel .raceresult-gate__widget .RRPublish .tablesorter-header > div {
    filter: invert(1);
}

/* Hinweis, wenn raceresult die Auswertung noch nicht freigegeben hat */
.raceresult-gate__widget .raceresult-gate__wartet {
    padding: var(--space-10) var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
    margin: 0;
}

/* ============================================================
   8. Bewegung nur, wo sie etwas erklärt
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .raceresult-gate__widget *,
    .raceresult-gate__widget *::before {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   9. Reiter (Personen + Produktmodelle) und Zusatzbestellungen
   ============================================================
   Neu im Formular (14.08.2026 auf park gemessen): `RRReg_TabsList` — einmal als Personen-Reiter
   („Daten Anmeldung 1/2" + „+" für weitere Personen), einmal als Modell-Reiter der
   Stirnlampen. Der Anbieter liefert sie fest hell (#eee/#fff/#ddd, Hover #ddd) — auf einem
   dunklen Event weiße Balken mit unsichtbarer Beschriftung.

   Statt der Anbieter-Mechanik „gewählter Reiter verschmilzt über border-bottom mit der Box
   darunter" (braucht deckende Hintergründe, die wir wegen der Flächen-Vererbung nicht haben)
   werden die Reiter ruhige Chips: Token-Rahmen, gewählt = Signalkante unten in der
   Primärfarbe. Trägt auf hellem wie dunklem Grund. `HasError` (roter Rand) bleibt
   Anbieter-Konvention. */

.raceresult-gate__widget .RRReg div.RRReg_Tab > div.RRReg_TabsList > div {
    background-color: var(--surface-sunken, #eee);
    border-color: var(--color-border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--color-text-muted);
    box-shadow: inset 0 -2px 0 transparent;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.raceresult-gate__widget .RRReg div.RRReg_Tab > div.RRReg_TabsList > div:not(.selected):hover {
    background-color: rgba(var(--color-primary-rgb), 0.14);
    color: var(--color-text);
}

.raceresult-gate__widget .RRReg div.RRReg_Tab > div.RRReg_TabsList > div.selected,
.raceresult-gate__widget .RRReg div.RRReg_Tab > div.RRReg_TabsList > div.selected + div.RRReg_TabsList_RemoveTab {
    background-color: var(--surface-sunken, #fff);
    border-bottom-color: var(--color-border);
    color: var(--color-text);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--color-primary);
}

/* „+"-Reiter (weitere Person anmelden): als Handlung erkennbar, nicht als leerer Kasten. */
.raceresult-gate__widget .RRReg .RRReg_TabsList_AddTab {
    background-color: var(--surface-sunken, #eee);
    border-color: var(--color-border);
    color: var(--color-primary-text, var(--color-primary));
    font-weight: 700;
}
.raceresult-gate__widget .RRReg .RRReg_TabsList_AddTab:hover {
    background-color: rgba(var(--color-primary-rgb), 0.14);
}

/* ⚠️ Das Entfernen-Kreuz ist ein DUNKLES PNG aus dem Anbieter-Stylesheet — kein Text, keine
   Farbe erreichbar. Auf dunklen Events ist es unsichtbar; der Filter dreht nur das Icon um,
   der Chip-Hintergrund kommt vom Reiter darunter. `be-dunkel` setzt inc/branding.php. */
body.be-dunkel .raceresult-gate__widget .RRReg .RRReg_TabsList_RemoveTab {
    filter: invert(1);
}
/* Der Filter invertiert AUCH die eigene Fläche: deshalb transparent, der Reiter trägt sie. */
.raceresult-gate__widget .RRReg .RRReg_TabsList_RemoveTab {
    background-color: transparent;
}

/* --- Weniger Rahmen in den Reiter-Inhalten und Zusatzbestellungen ---------------------------
   Gemessen: In einem Produktblock stapelten sich Box-Rahmen, Kopfzeilen-Unterkante und
   Bestell-Chip zu drei Rahmen übereinander; in den Reiter-Inhalten kam der Anbieter-Trick
   `margin-top:-1px` (Kanten-Verschmelzung) mit unseren abgerundeten Box-Rahmen zusammen und
   erzeugte doppelte Linien. Regel: EIN Rahmen pro Gruppe. */

/* Boxen INNERHALB eines Reiter-Inhalts verlieren ihren eigenen Rahmen — die Chips und Felder
   darin rahmen sich selbst, der Reiter markiert die Gruppe. */
.raceresult-gate__widget .RRReg div.RRReg_Tab div.RRReg_Box {
    border: 0 !important;
    padding: var(--space-3) 0 0 !important;
    margin: 0 !important;
}

/* Kopfzeilen in einer gerahmten Box brauchen keine zweite Linie darunter —
   die Signalkante links reicht als Auszeichnung. */
.raceresult-gate__widget .RRReg_Box .RRReg_Text[style*="background-color"] {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Produktbilder: verkleinert eingebunden statt spaltenfüllend — das Werbebild der Stirnlampe
   stand höher als das halbe Formular. Zentriert, weiche Kante. */
.raceresult-gate__widget .RRReg .RRReg_Picture > img {
    max-width: min(320px, 100%);
    border-radius: var(--radius-sm);
    display: block;
    margin-inline: auto;
}