/* =========================================================
   GRAVEL MARATHON SCHLIERSEE-THIERSEE 2027 – ANMELDESEITE
   (Basis: Style Frankfurt City Triathlon)
   Modernes Design in den Farben von Datasport Schweiz:
     Rot #68a999, Dunkelrot #3d6b5f, Schwarz #141414,
     Hellgrau #F7F7F7 / #E4E6EB, Grau #525252
   Schriftart bleibt die von Datasport (Open Sans).
   ========================================================= */

:root {
  --rm-red: #68a999;
  --rm-red-dark: #3d6b5f;
  --rm-dark: #141414;
  --rm-dark-2: #3a3a3a;
  --rm-text: #141414;
  --rm-muted: #525252;
  --rm-line: #e4e6eb;
  --rm-bg-soft: #f7f7f7;
  --rm-radius: 16px;
}

/* ---------- Navigation ---------- */
nav {
  background: var(--rm-dark) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* ---------- Kopfbereich ---------- */
/* Logos frei stehend - keine Box, kein Schatten, keine runden Ecken */
header img.logo1,
header img.logo2 {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

h1 {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

/* Desktop: Logo links – Titel mittig – Logo rechts, alles auf einer Hoehe */
@media screen and (min-width: 768px) {
  header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 26px 0 10px !important;
  }
  header img.logo1,
  header img.logo2 {
    float: none !important;
    flex: 0 0 auto;
    height: 130px !important;
    width: auto !important;
    max-width: 24%;
    object-fit: contain;
    margin: 0 !important;
    padding: 0 !important;
  }
  header img.logo1 { order: 1; }
  header h1 {
    order: 2;
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: clamp(1.6rem, 2.6vw, 2.6rem) !important;
    line-height: 1.2 !important;
  }
  header img.logo2 { order: 3; }

  /* STANDARD-LOGOGROESSE (ein Logo): Anzeige-Flaeche max. 400 x 120 px.
     Upload-Empfehlung: PNG mit transparentem Hintergrund, 800 x 240 px
     (doppelte Groesse = scharf auf hochaufloesenden Bildschirmen),
     Logo bis an den Rand, ohne weissen/leeren Rand drumherum.
     Kleinere Bilder werden nicht hochgezogen, sondern in Originalgroesse
     gezeigt. */
  header:not(:has(img.logo2)) img.logo1 {
    width: auto !important;
    height: auto !important;
    max-width: 400px !important;
    max-height: 120px !important;
  }
  header:not(:has(img.logo2)) h1 {
    font-size: clamp(1.4rem, 2.2vw, 2.2rem) !important;
  }
}

/* ---------- Kaesten: modern, runde Ecken, weicher Schatten ---------- */
.panibox,
.panibox2 {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 0 !important;
  border-radius: var(--rm-radius) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden;
}

.ym-gbox.panibox {
  margin-bottom: 16px;
}

.panibox h6,
.ym-form legend {
  margin: 0;
  padding: 12px 18px !important;
  color: #fff;
  background: var(--rm-dark) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--rm-radius) var(--rm-radius) 0 0;
}

.panibox h6 a,
.panibox a h6 {
  color: #fff;
  text-decoration: none;
}

/* ---------- Wettbewerbsliste (Startseite) ---------- */
.panitermine {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--rm-line) !important;
  transition: background 0.15s ease;
}

.panitermine:last-child {
  border-bottom: 0 !important;
}

/* dezenter Trennstrich zwischen den Wettbewerben (mit Abstand zum
   Rand). Als eigenes Element, weil Datasports ".border_10" sonst
   jeden Rahmen entfernt. */
.panibox .panitermine.einzelmeldung {
  position: relative;
}

.panibox .panitermine.einzelmeldung:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  background: var(--rm-line);
}

.panitermine.einzelmeldung:hover {
  background: var(--rm-bg-soft);
}

.panitermine .titel {
  color: var(--rm-dark);
  font-weight: 700;
}

.panitermine .uhrzeit {
  color: var(--rm-muted);
}

.panitermine .strecke {
  color: var(--rm-red);
  font-weight: 700;
}

/* "mehr", "Teilnehmerliste", "Startplatzboerse" */
.panitermine a:not(:has(.ym-button)) {
  color: var(--rm-muted);
  border-bottom-color: var(--rm-line);
  transition: color 0.15s ease;
}

.panitermine a:not(:has(.ym-button)):hover {
  color: var(--rm-red);
}

/* Textlinks in allen Kaesten beim Darueberfahren: KEIN dunkler
   Hintergrund (Datasport setzt sonst .panibox a:hover auf #4f4f4f
   mit weisser Schrift), nur rote Schrift. Buttons ausgenommen. */
.panibox a:not(:has(.ym-button)):hover,
.panibox a:not(:has(.ym-button)):focus {
  background: transparent !important;
  color: var(--rm-red) !important;
  text-shadow: none;
}

/* ---------- Event-Informationen: moderne Linien-Symbole ----------
   Jeder Eintrag als Zeile mit rundem Hover-Hintergrund, Symbole
   einheitlich in Datasport-Rot. Erkennung ueber Link-Typ/Adresse. */
#fileTree {
  margin: 0 !important;
  padding: 8px !important;
}

#fileTree li.file {
  list-style: none;
  margin: 0 !important;
  padding: 4px 10px 4px 36px !important;
  border-radius: 8px;
  background-color: transparent;
  background-size: 17px 17px !important;
  background-position: 10px center !important;
  background-repeat: no-repeat !important;
  line-height: 1.35;
  transition: background-color 0.15s ease;
}

#fileTree li.file:hover {
  background-color: var(--rm-bg-soft) !important;
}

#fileTree a {
  color: var(--rm-text);
  border: 0 !important;
  text-decoration: none;
  transition: color 0.15s ease;
}

#fileTree a:hover {
  color: var(--rm-red);
}

/* sonstige Web-Links: Link-Symbol */
#fileTree li.file_web { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2368a999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5"/></svg>') !important; }
/* Veranstalter-Webseite (erster Eintrag): Globus */
#fileTree li.file_web:first-child { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2368a999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15 15 0 0 1 0 20a15 15 0 0 1 0-20z"/></svg>') !important; }
/* PDFs (Ausschreibungen): Dokument */
#fileTree li.file_web:has(a[href$=".pdf" i]) { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2368a999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8"/><path d="M8 17h5"/></svg>') !important; }
/* Datenschutz / Teilnahmebedingungen: Schild */
#fileTree li.file_web:has(a[href*="datenschutz" i]),
#fileTree li.file_web:has(a[href*="teilnahmebedingungen" i]) { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2368a999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l8 3v6c0 5-3.5 9.5-8 11c-4.5-1.5-8-6-8-11V5z"/><path d="M8.5 12l2.5 2.5l4.5-5"/></svg>') !important; }
/* Teilnehmerliste: Personen */
#fileTree li.file_web:has(a[href*="teilnehmer" i]) { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2368a999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6"/><circle cx="17" cy="9" r="2.5"/><path d="M16 14.2c3 .2 5.5 2.3 5.5 5.3"/></svg>') !important; }
/* Social Media im gleichen Linien-Stil */
#fileTree li.file_ins { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2368a999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.6" fill="%2368a999"/></svg>') !important; }
#fileTree li.file_fb  { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2368a999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h-2.5A4.5 4.5 0 0 0 8 7.5V10H5.5v3.5H8V21h3.5v-7.5H14l.5-3.5h-3V8a1 1 0 0 1 1-1H15z"/></svg>') !important; }
#fileTree li.file_yut { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2368a999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="4"/><path d="M10 9l5 3-5 3z"/></svg>') !important; }

/* ---------- Karten / Boxen ---------- */
.panibox,
.panibox2 {
  background: #fff;
  padding: 0;
  position: relative;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
  border-radius: var(--rm-radius);
  overflow: hidden;
}

.panibox h6,
.ym-form legend {
  padding: 9px 14px;
  color: #fff;
  background: var(--rm-dark);
  border-top-left-radius: var(--rm-radius);
  border-top-right-radius: var(--rm-radius);
}

/* Abstand zwischen Zwischenueberschrift (z.B. "Zusatzleistungen")
   und dem ersten Feld darunter */
.ym-form legend + * {
  margin-top: 16px !important;
}

.border_10 {
  border-top: none !important;
  border-bottom: none !important;
}

.ym-gr   { border-top-right-radius: var(--rm-radius); }
.ym-grid { border-radius: var(--rm-radius); }

/* Wettbewerbs-Info */
.panitermine .titel {
  color: var(--rm-dark);
}

.panitermine .strecke {
  color: var(--rm-red);
}

/* ---------- Startplatzboerse-Uebersicht (.../boerse/) ---------- */

/* Distanz in der Box-Ueberschrift etwas dezenter */
#verstallinfo h6 .strecke {
  margin-left: 8px;
  color: #fff;
  opacity: 0.75;
  font-weight: 400;
}

/* Spaltenkoepfe der Zusatzleistungen (z.B. "Funktions-Shirt · Gravur") */
.startplatz-uebersicht {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.startplatz-uebersicht .leistungname + .leistungname::before {
  content: "·";
  margin-right: 14px;
  color: #bbb;
}

/* "Keine Startplaetze verfuegbar." - normale Schrift statt Versalien */
.startplatz-uebersicht:not(:has(.leistungname)) {
  font-size: 14px;
  color: #777;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
}

/* Jeder angebotene Startplatz als eigene Zeile */
.panitermine div:has(> .startplatz) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 0;
  border-top: 1px solid #e6e6e6;
}

.panitermine .startplatz {
  font-weight: 700;
  color: var(--rm-dark);
  margin-right: 4px;
}

.panitermine .leistung {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f1f1ef;
  border: 1px solid #e0e0e0;
  font-size: 13px;
  color: #444;
}

a.startplatz-auswaehlen {
  margin-left: auto;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 9px;
  background: var(--rm-red);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  border: 0 !important;
  white-space: nowrap;
  transition: background 0.2s ease;
}

a.startplatz-auswaehlen:hover {
  background: var(--rm-red-dark);
}

.panitermine .ym-g80:has(.startplatz-uebersicht) {
  width: 100% !important;
}

/* ---------- Reservierungs-Countdown ---------- */
.platzreservierung,
.warning.platzreservierung {
  background: #ffecec !important;
  color: var(--rm-dark) !important;
  border: 0 !important;
  border-left: 5px solid var(--rm-red) !important;
  border-radius: var(--rm-radius);
}

.platzreservierung span {
  color: var(--rm-red-dark);
  font-weight: bold;
}

/* ---------- Schritt-Leiste ---------- */
.ym-grid:has(> .schritt_aktiv) {
  border-radius: var(--rm-radius);
  overflow: hidden;
  /* grauen Unterrand aus dem Datasport-Grund-CSS entfernen,
     Abstand zur naechsten Box bleibt per margin erhalten */
  border-bottom: 0 !important;
  margin-bottom: 10px;
}

.schritt_aktiv,
.schritt_inaktiv {
  font-size: 0 !important;   /* "Schritt X" ausblenden */
}

.schritt_aktiv::after,
.schritt_inaktiv::after {
  font-size: 1rem;
}

.schritt_aktiv {
  background: var(--rm-red);
  color: #fff;
}

.schritt_inaktiv {
  background: var(--rm-dark-2);
  color: rgba(255, 255, 255, 0.75);
}

.schritt_aktiv:first-child,
.schritt_inaktiv:first-child {
  border-top-left-radius: var(--rm-radius);
  border-bottom-left-radius: var(--rm-radius);
}

.schritt_aktiv:last-child,
.schritt_inaktiv:last-child {
  border-top-right-radius: var(--rm-radius);
  border-bottom-right-radius: var(--rm-radius);
}

.schritt_aktiv:nth-child(1)::after,
.schritt_inaktiv:nth-child(1)::after { content: "Persönliche Daten"; }

.schritt_aktiv:nth-child(2)::after,
.schritt_inaktiv:nth-child(2)::after { content: "Zusatzleistungen"; }

.schritt_aktiv:nth-child(3)::after,
.schritt_inaktiv:nth-child(3)::after { content: "Zahlungsart"; }

.schritt_aktiv:nth-child(4)::after,
.schritt_inaktiv:nth-child(4)::after { content: "Zusammenfassung"; }

li.text-inaktiv {
  color: #a0a0a0;
}

/* ---------- Fehlermeldungen ---------- */
.error {
  border-radius: var(--rm-radius);
  border-left: 5px solid var(--rm-red-dark);
}

/* ---------- Formular ---------- */
form {
  max-width: 1122px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

form label,
.ym-form label {
  font-weight: 600;
  color: var(--rm-text);
  margin-bottom: 0.3rem;
  display: block;
  text-align: left;
}

.ym-required {
  color: var(--rm-red);
}

/* :where(...) nimmt Checkboxen/Radio-Buttons aus, ohne die
   Gewichtung (Spezifitaet) der Regel zu veraendern */
form input:where(:not([type="checkbox"]):not([type="radio"])),
form select,
.ym-form input:where(:not([type="checkbox"]):not([type="radio"])),
.ym-form select {
  width: 100%;
  max-width: 100%;
  padding: 0.6rem 0.9rem;
  color: var(--rm-text);
  border: 1px solid #cfcfcf;
  border-radius: 0.5rem;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Checkboxen / Radio-Buttons AUSSERHALB des Datasport-Standard-
   Containers (.ym-fbox-check) schmal halten - sonst steht das
   Haekchen mittig in einer eigenen Zeile und der Satz rutscht
   darunter (z.B. Haftungsausschluss in der Sammelanmeldung).
   Innerhalb von .ym-fbox-check (z.B. Zahlungsauswahl) bleibt alles
   im Datasport-Original, inkl. Einrueckung neben "Zahlungsart". */
form input[type="checkbox"]:not(.ym-fbox-check input),
form input[type="radio"]:not(.ym-fbox-check input) {
  width: auto !important;
  max-width: none !important;
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 8px !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Text zur Checkbox in derselben Zeile wie das Haekchen */
form input[type="checkbox"]:not(.ym-fbox-check input) + label,
form input[type="radio"]:not(.ym-fbox-check input) + label,
form label:has(> input[type="checkbox"]):not(.ym-fbox-check label),
form label:has(> input[type="radio"]):not(.ym-fbox-check label) {
  display: inline !important;
}

form input:focus,
form select:focus {
  border-color: var(--rm-red);
  outline: none;
  box-shadow: 0 0 0 3px rgba(104, 169, 153, 0.35);
}

/* Chosen-Dropdowns (Geschlecht, Nation, Land) */
.chzn-container-single .chzn-single {
  border-radius: 0.5rem;
  border-color: #cfcfcf;
  background: #fff;
  box-shadow: none;
}

.chzn-container-active .chzn-single,
.chzn-container-active .chzn-single-with-drop {
  border-color: var(--rm-red);
  box-shadow: 0 0 0 3px rgba(104, 169, 153, 0.35);
}

.chzn-container .chzn-results .highlighted {
  background: var(--rm-red);
  color: #fff;
}

/* ---------- Buttons ---------- */
.ym-button,
.ym-form button,
.ym-form input[type="button"],
.ym-form input[type="reset"],
.ym-form input[type="submit"],
form button,
form input[type="submit"] {
  padding: 0.8rem 1.6rem;
  background: var(--rm-red);
  color: #fff;
  border: none;
  border-color: var(--rm-red);
  border-radius: 9px !important;
  box-shadow: none !important;
  font-weight: bold;
  font-size: 1rem;
  text-shadow: none;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

form button,
form input[type="submit"] {
  align-self: flex-start;
  margin-top: 1rem;
}

.ym-button:hover,
.ym-form button:hover,
.ym-form input[type="button"]:hover,
.ym-form input[type="reset"]:hover,
.ym-form input[type="submit"]:hover,
form button:hover {
  background: var(--rm-red-dark);
  color: #fff;
  border-color: var(--rm-red-dark);
  border-bottom: none !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

/* Optional: ICE-Sektion */
.ice-section {
  padding: 1rem;
  background: var(--rm-bg-soft);
  border-left: 4px solid var(--rm-red);
  border-radius: 0.5rem;
}

/* ---------- Mobil ---------- */
@media screen and (max-width: 767px) {
  /* Schritt-Leiste: groessere Schrift, zweizeilig */
  .schritt_aktiv,
  .schritt_inaktiv {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 40px;
    padding: 4px 2px !important;
    box-sizing: border-box;
    line-height: 1.15 !important;
  }

  .schritt_aktiv::after,
  .schritt_inaktiv::after {
    font-size: 12px;
    white-space: pre-line;
  }

  .schritt_aktiv:nth-child(1)::after,
  .schritt_inaktiv:nth-child(1)::after { content: "Persönliche\A Daten"; }

  .schritt_aktiv:nth-child(2)::after,
  .schritt_inaktiv:nth-child(2)::after { content: "Zusatz-\A leistungen"; }

  .schritt_aktiv:nth-child(4)::after,
  .schritt_inaktiv:nth-child(4)::after { content: "Zusammen-\A fassung"; }

  /* Event-Informationen auf dem Handy unter dem Formular anzeigen
     (Datasport blendet die rechte Spalte sonst per display:none aus) */
  #spalte_rechts {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-top: 16px;
  }

  /* Wettbewerbsseite mit "Mein Konto" | "Direktanmeldung" +
     "Startplatzboerse": die zwei schwebenden Spalten (float) auf dem
     Handy untereinander stellen. Sonst wird die rechte Spalte
     (Event-Informationen) dazwischen auf wenige Pixel zusammengedrueckt. */
  #spalte_links {
    display: flow-root !important;
  }

  #spalte_links > .ym-g50,
  #spalte_links > .ym-g49 {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #spalte_links > .ym-g50 > .panibox,
  #spalte_links > .ym-g49 > .panibox {
    margin-top: 12px;
  }

  /* "Informationen zum Anmeldevorgang" auf dem Handy weglassen –
     die Schritt-Leiste zeigt das bereits */
  /* NUR die Box mit der Schritt-Liste (#schritt_1) - alle anderen
     Boxen rechts (z.B. "Du hast einen Startplatz" auf der Boerse-
     Seite) bleiben sichtbar */
  #spalte_rechts .panibox:has(#schritt_1) {
    display: none !important;
  }

  /* Links als kompakte Buttons nebeneinander */
  #fileTree {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px !important;
    margin: 0 !important;
  }

  #fileTree li.file {
    margin: 0 !important;
    padding: 7px 12px 7px 30px !important;
    border: 1px solid #e3e3e3;
    border-radius: 999px;
    background-position: 10px center !important;
    line-height: 1.2;
    font-size: 14px;
  }
}

@media screen and (max-width: 500px) {
  .abstand_oben {
    flex-direction: column;
    margin-top: 0;
  }
  h1 {
    margin: 0 0 10px 0;
  }
}

/* ---------- Hinweistexte unter den Feldern lesbarer ----------
   (z.B. Schritt 2 Zusatzleistungen: Startpass, Shuttleservice,
   Gewinnspiel). Datasport setzt diese Texte auf 70 % (~10 px). */
.ym-form .text-danach,
.ym-form .text-danach-check,
.ym-form .text-danach-spez {
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--rm-muted) !important;
  padding-top: 3px;
}

/* ---------- Auswahllisten (z.B. Schritt 2) wie in Schritt 1 ----------
   In Schritt 1 nutzt Datasport eigene "Chosen"-Listen, in Schritt 2
   normale Browser-Auswahllisten. Deren aufgeklappte Liste laesst sich
   nur in aktuellen Chrome-/Edge-Versionen gestalten (base-select).
   Andere Browser (Firefox, Safari) zeigen weiterhin ihre normale
   Liste - dort aendert sich nichts. */
@supports (appearance: base-select) {
  .ym-form select,
  .ym-form select::picker(select) {
    appearance: base-select;
  }

  .ym-form select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0.55rem 0.9rem !important;   /* Text nicht am linken Rand */
    background: #fff;
  }

  .ym-form select::picker-icon {
    color: var(--rm-muted);
    transition: rotate 0.2s ease;
  }

  .ym-form select:open::picker-icon {
    rotate: 180deg;
  }

  .ym-form select::picker(select) {
    /* nie breiter als das Auswahlfeld selbst - lange Optionen
       brechen stattdessen um */
    box-sizing: border-box;
    width: anchor-size(width);
    min-width: 0;
    max-width: anchor-size(width);
    margin-top: 4px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--rm-line);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  }

  /* Optionen: Fliesstext (kein Spaltenlayout), mit feiner Trennlinie
     dazwischen - so sind sie auch ohne Maus klar unterscheidbar */
  .ym-form select option {
    display: block !important;
    padding: 8px 12px;
    border-radius: 0;
    border-bottom: 1px solid var(--rm-line);
    color: var(--rm-text);
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.35;
  }

  .ym-form select option:last-of-type {
    border-bottom: 0;
  }

  /* Preise (z.B. "0,00 €") nie auseinanderreissen - Zahl und
     Euro-Zeichen bleiben immer zusammen */
  .ym-form select option > * {
    white-space: nowrap;
  }

  /* kein schwarzer Fokus-Rahmen um die markierte Option */
  .ym-form select option:focus-visible {
    outline: none;
  }

  .ym-form select option::checkmark {
    display: none;
  }

  /* Maus drueber / Tastatur: rot wie in Schritt 1 */
  .ym-form select option:hover,
  .ym-form select option:focus-visible {
    background: var(--rm-red);
    color: #fff;
    border-radius: 8px;
    border-bottom-color: transparent;
  }

  /* aktuell gewaehlte Option */
  .ym-form select option:checked {
    font-weight: 700;
  }

  .ym-form select option:checked:not(:hover) {
    background: var(--rm-bg-soft);
  }
}

/* ---------- "Informationen zum Anmeldevorgang" als Schritt-Verlauf ----------
   Die 4 Schritte als Timeline mit Punkten und Verbindungslinie:
   erledigte/aktuelle Schritte rot, kommende Schritte (Datasport-
   Klasse .text-inaktiv) grau mit leerem Punkt. */
.panibox:has(ul.no_liststyle) > .abstand {
  padding: 16px 20px 18px !important;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rm-muted);
}

.panibox:has(ul.no_liststyle) > .abstand > br {
  display: none;
}

/* "Die Anmeldung erfolgt in 4 Schritten:" als kleine Zwischenueberschrift */
.panibox:has(ul.no_liststyle) > .abstand > b {
  display: block;
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rm-dark);
}

.panibox ul.no_liststyle {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.panibox ul.no_liststyle > li {
  position: relative;
  list-style: none !important;
  margin: 0 !important;
  padding: 7px 0 7px 32px !important;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--rm-dark);
}

/* Punkt */
.panibox ul.no_liststyle > li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--rm-red);
  border: 2px solid var(--rm-red);
  box-shadow: 0 0 0 4px rgba(104, 169, 153, 0.12);
  z-index: 1;
}

/* Verbindungslinie zum naechsten Schritt */
.panibox ul.no_liststyle > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 2px;
  height: 100%;
  background: #cfd3da;
}

/* Linie zwischen zwei erledigten Schritten rot */
.panibox ul.no_liststyle > li:not(.text-inaktiv):has(+ li:not(.text-inaktiv))::after {
  background: rgba(104, 169, 153, 0.45);
}

/* kommende Schritte */
.panibox ul.no_liststyle > li.text-inaktiv {
  color: #9a9a9a;
  font-weight: 400;
}

.panibox ul.no_liststyle > li.text-inaktiv::before {
  background: #fff;
  border-color: #c4c4c4;
  box-shadow: none;
}

.panibox ul.no_liststyle > li a {
  color: inherit;
  text-decoration: none;
  border: 0;
}

/* ---------- Hintergrundbild immer bildschirmfuellend ---------- */
body {
  background-size: cover !important;
}

/* ---------- Handy: Logos nebeneinander, Spalten untereinander ----------
   Datasport setzt Logos und Spalten hier per float nebeneinander und
   stellt sie auf dem Handy nicht um. */
@media screen and (max-width: 767px) {
  /* Sprachauswahl (Deutsch / Englisch) rechts in der Leiste - Datasport
     schiebt die Flaggen auf dem Handy nach links ueber das Logo */
  nav li.klein_menu {
    position: absolute !important;
    top: 2px !important;
    left: auto !important;
    right: 12px !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
  nav li.klein_menu + li.klein_menu {
    right: 46px !important;
  }

  header {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 0;
  }
  /* nur ein Logo: mittig ueber dem Titel */
  header:not(:has(img.logo2)) {
    justify-content: center;
  }
  header img.logo1,
  header img.logo2 {
    float: none !important;
    width: calc(50% - 6px) !important;
    max-width: 200px;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Standard-Logogroesse am Handy (ein Logo): max. 260 x 80 px */
  header:not(:has(img.logo2)) img.logo1 {
    width: auto !important;
    height: auto !important;
    max-width: min(260px, 100%) !important;
    max-height: 80px !important;
  }
  header h1 {
    flex: 0 0 100%;
    margin: 4px 0 8px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 125% !important;
  }
  section.abstand_oben {
    display: block !important;
  }
  section.abstand_oben > .ym-g65,
  section.abstand_oben > .ym-g33,
  section.abstand_oben > .ym-gl,
  section.abstand_oben > .ym-gr {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
}
/* ---------- Zahlungsart: bekannte Symbole vor den Auswahlknoepfen ----------
   Erkennung ueber die Datasport-Kuerzel im Auswahlknopf:
     SEPA14 = Lastschrift SEPA, PPE = PayPal, KRE = Kreditkarte,
     GUT = Gutschein, RE... = Rechnung
   Steht eine Zahlungsart nicht zur Auswahl, gibt es kein Symbol. */
.ym-form input[type="radio"][value^="SEPA" i] + label::before,
.ym-form input[type="radio"][id^="radio_SEPA" i] + label::before,
.ym-form input[type="radio"][value^="LS" i] + label::before,
.ym-form input[type="radio"][id^="radio_LS" i] + label::before,
.ym-form input[type="radio"][value^="ELV" i] + label::before,
.ym-form input[type="radio"][id^="radio_ELV" i] + label::before,
.ym-form input[type="radio"][value*="sepa" i] + label::before,
.ym-form input[type="radio"][id*="sepa" i] + label::before,
.ym-form input[type="radio"][value*="lastschrift" i] + label::before,
.ym-form input[type="radio"][id*="lastschrift" i] + label::before,
.ym-form input[type="radio"][value^="PP" i] + label::before,
.ym-form input[type="radio"][id^="radio_PP" i] + label::before,
.ym-form input[type="radio"][value*="paypal" i] + label::before,
.ym-form input[type="radio"][id*="paypal" i] + label::before,
.ym-form input[type="radio"][value^="KRE" i] + label::before,
.ym-form input[type="radio"][id^="radio_KRE" i] + label::before,
.ym-form input[type="radio"][value^="KK" i] + label::before,
.ym-form input[type="radio"][id^="radio_KK" i] + label::before,
.ym-form input[type="radio"][value^="CC" i] + label::before,
.ym-form input[type="radio"][id^="radio_CC" i] + label::before,
.ym-form input[type="radio"][value*="kredit" i] + label::before,
.ym-form input[type="radio"][id*="kredit" i] + label::before,
.ym-form input[type="radio"][value*="credit" i] + label::before,
.ym-form input[type="radio"][id*="credit" i] + label::before,
.ym-form input[type="radio"][value^="RE" i] + label::before,
.ym-form input[type="radio"][id^="radio_RE" i] + label::before,
.ym-form input[type="radio"][value*="rechnung" i] + label::before,
.ym-form input[type="radio"][id*="rechnung" i] + label::before,
.ym-form input[type="radio"][value*="invoice" i] + label::before,
.ym-form input[type="radio"][id*="invoice" i] + label::before,
.ym-form input[type="radio"][value^="GUT" i] + label::before,
.ym-form input[type="radio"][id^="radio_GUT" i] + label::before,
.ym-form input[type="radio"][value^="GS" i] + label::before,
.ym-form input[type="radio"][id^="radio_GS" i] + label::before,
.ym-form input[type="radio"][value*="gutschein" i] + label::before,
.ym-form input[type="radio"][id*="gutschein" i] + label::before,
.ym-form input[type="radio"][value*="voucher" i] + label::before,
.ym-form input[type="radio"][id*="voucher" i] + label::before {
  content: "";
  display: inline-block;
  width: 44px;
  height: 28px;
  margin: 0 10px 0 2px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Lastschrift / SEPA */
.ym-form input[type="radio"][value^="SEPA" i] + label::before,
.ym-form input[type="radio"][id^="radio_SEPA" i] + label::before,
.ym-form input[type="radio"][value^="LS" i] + label::before,
.ym-form input[type="radio"][id^="radio_LS" i] + label::before,
.ym-form input[type="radio"][value^="ELV" i] + label::before,
.ym-form input[type="radio"][id^="radio_ELV" i] + label::before,
.ym-form input[type="radio"][value*="sepa" i] + label::before,
.ym-form input[type="radio"][id*="sepa" i] + label::before,
.ym-form input[type="radio"][value*="lastschrift" i] + label::before,
.ym-form input[type="radio"][id*="lastschrift" i] + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 28%22%3E%3Crect x=%220.5%22 y=%220.5%22 width=%2243%22 height=%2227%22 rx=%225%22 fill=%22%23fff%22 stroke=%22%23d0d4dc%22/%3E%3Ctext x=%2222%22 y=%2217.5%22 text-anchor=%22middle%22 font-family=%22Arial,Helvetica,sans-serif%22 font-size=%2210.5%22 font-weight=%22700%22 fill=%22%2310298e%22%3ESEPA%3C/text%3E%3Cpath d=%22M8 21.5 Q22 25 36 21.5%22 fill=%22none%22 stroke=%22%23ffcc00%22 stroke-width=%221.6%22/%3E%3C/svg%3E");
}

/* PayPal */
.ym-form input[type="radio"][value^="PP" i] + label::before,
.ym-form input[type="radio"][id^="radio_PP" i] + label::before,
.ym-form input[type="radio"][value*="paypal" i] + label::before,
.ym-form input[type="radio"][id*="paypal" i] + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 28%22%3E%3Crect x=%220.5%22 y=%220.5%22 width=%2243%22 height=%2227%22 rx=%225%22 fill=%22%23fff%22 stroke=%22%23d0d4dc%22/%3E%3Ctext x=%2222%22 y=%2217.5%22 text-anchor=%22middle%22 font-family=%22Arial,Helvetica,sans-serif%22 font-size=%229.5%22 font-weight=%22700%22 font-style=%22italic%22%3E%3Ctspan fill=%22%23003087%22%3EPay%3C/tspan%3E%3Ctspan fill=%22%23009cde%22%3EPal%3C/tspan%3E%3C/text%3E%3C/svg%3E");
}

/* Kreditkarte */
.ym-form input[type="radio"][value^="KRE" i] + label::before,
.ym-form input[type="radio"][id^="radio_KRE" i] + label::before,
.ym-form input[type="radio"][value^="KK" i] + label::before,
.ym-form input[type="radio"][id^="radio_KK" i] + label::before,
.ym-form input[type="radio"][value^="CC" i] + label::before,
.ym-form input[type="radio"][id^="radio_CC" i] + label::before,
.ym-form input[type="radio"][value*="kredit" i] + label::before,
.ym-form input[type="radio"][id*="kredit" i] + label::before,
.ym-form input[type="radio"][value*="credit" i] + label::before,
.ym-form input[type="radio"][id*="credit" i] + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 28%22%3E%3Crect x=%220.5%22 y=%220.5%22 width=%2243%22 height=%2227%22 rx=%225%22 fill=%22%23fff%22 stroke=%22%23d0d4dc%22/%3E%3Ctext x=%2213%22 y=%2217.2%22 text-anchor=%22middle%22 font-family=%22Arial,Helvetica,sans-serif%22 font-size=%228%22 font-weight=%22900%22 font-style=%22italic%22 fill=%22%231a1f71%22%3EVISA%3C/text%3E%3Ccircle cx=%2229%22 cy=%2214%22 r=%225.5%22 fill=%22%23eb001b%22/%3E%3Ccircle cx=%2235%22 cy=%2214%22 r=%225.5%22 fill=%22%23f79e1b%22/%3E%3Cpath d=%22M32 9.4a5.5 5.5 0 0 1 0 9.2a5.5 5.5 0 0 1 0-9.2z%22 fill=%22%23ff5f00%22/%3E%3C/svg%3E");
}

/* Rechnung */
.ym-form input[type="radio"][value^="RE" i] + label::before,
.ym-form input[type="radio"][id^="radio_RE" i] + label::before,
.ym-form input[type="radio"][value*="rechnung" i] + label::before,
.ym-form input[type="radio"][id*="rechnung" i] + label::before,
.ym-form input[type="radio"][value*="invoice" i] + label::before,
.ym-form input[type="radio"][id*="invoice" i] + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 28%22%3E%3Crect x=%220.5%22 y=%220.5%22 width=%2243%22 height=%2227%22 rx=%225%22 fill=%22%23fff%22 stroke=%22%23d0d4dc%22/%3E%3Cg fill=%22none%22 stroke=%22%23525252%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17 5h7l4 4v14H17z%22/%3E%3Cpath d=%22M24 5v4h4%22/%3E%3Cpath d=%22M19.5 13h6M19.5 16.5h6M19.5 20h4%22/%3E%3C/g%3E%3C/svg%3E");
}

/* Gutschein */
.ym-form input[type="radio"][value^="GUT" i] + label::before,
.ym-form input[type="radio"][id^="radio_GUT" i] + label::before,
.ym-form input[type="radio"][value^="GS" i] + label::before,
.ym-form input[type="radio"][id^="radio_GS" i] + label::before,
.ym-form input[type="radio"][value*="gutschein" i] + label::before,
.ym-form input[type="radio"][id*="gutschein" i] + label::before,
.ym-form input[type="radio"][value*="voucher" i] + label::before,
.ym-form input[type="radio"][id*="voucher" i] + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 28%22%3E%3Crect x=%220.5%22 y=%220.5%22 width=%2243%22 height=%2227%22 rx=%225%22 fill=%22%23fff%22 stroke=%22%23d0d4dc%22/%3E%3Cg fill=%22none%22 stroke=%22%2368a999%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2214%22 y=%2211%22 width=%2216%22 height=%2211%22 rx=%221.5%22/%3E%3Cpath d=%22M13 8h18v3H13zM22 8v14%22/%3E%3Cpath d=%22M22 8c-1.5-3-5-3-5-.8C17 8 22 8 22 8zM22 8c1.5-3 5-3 5-.8C27 8 22 8 22 8z%22/%3E%3C/g%3E%3C/svg%3E");
}

/* Auswahlknopf und Symbol mittig auf einer Linie */
.ym-form input[type="radio"] {
  vertical-align: middle;
}

/* =========================================================
   KACHEL-ANSICHT (wie bisher beim Gravel Marathon)
   Halbtransparente weisse Kacheln mit duennem schwarzem Rahmen.
   Die Kachelbilder (kachel_*.png) werden ausgeblendet, die Kacheln
   werden komplett per CSS gebaut. Wettbewerbsname und Distanz kommen
   aus den Datasport-Daten.
   ========================================================= */

/* Fusszeile immer am unteren Bildschirmrand */
body:has(.headerauswahl) {
  display: flex !important;
  flex-direction: column;
  min-height: 100vh;
}

body:has(.headerauswahl) #main {
  flex: 1 0 auto;
}

@media only screen and (min-width: 600px) {
  .abstand_oben {
    margin-top: 3em;
    display: inline-flex;
    flex-direction: row;
  }
}

section.headerauswahl {
  max-width: 1080px;
  gap: 18px;
  /* Datasport setzt min-height:calc(100vh - 365px) - ohne das hier
     verteilen sich die Kachel-Reihen ueber die ganze Hoehe */
  min-height: 0 !important;
  align-content: flex-start !important;
  align-items: flex-start !important;
  margin: 2.5em auto 0 !important;
  padding: 0 16px;
  box-sizing: border-box;
}

.headerauswahl a {
  padding: 0 !important;
  margin: 0 !important;
  border: 0;
  text-decoration: none;
}

.headerauswahl a:hover,
.headerauswahl a:active,
.headerauswahl a:focus {
  background-color: transparent;
}

.headerauswahl .button_start,
.headerauswahl .button_start_firma,
.headerauswahl .titel,
.headerauswahl .strecke {
  display: none !important;
}

.headerauswahl .headerbutton {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 330px;
  height: 165px;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid #1a1a1a;
  font-family: "Open Sans", Arial, sans-serif;
  text-align: center;
  transition: background .2s ease, top .2s ease, box-shadow .2s ease;
}

.headerauswahl .headerbutton,
.headerauswahl .firma,
.headerauswahl .einzel,
.headerauswahl .einzelne {
  color: #111 !important;
}

/* Anheben per top statt transform - transform wuerde das
   Logo-Blending (mix-blend-mode) beim Hover unterbrechen */
.headerauswahl .headerbutton {
  top: 0;
}

.headerauswahl a:hover .headerbutton {
  background: rgba(255, 255, 255, 0.92);
  top: -3px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

/* Titel */
.headerauswahl .headerbutton::before {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
}

/* Untertitel / Logo */
.headerauswahl .headerbutton::after {
  font-size: 16px;
  font-weight: 400;
}

/* Kacheln Einzel- / Sammelanmeldung: Titel kommt aus dem System
   (span.titel) - damit erscheint er automatisch in der gewaehlten
   Sprache (deutsch "Einzelanmeldung", englisch z.B. "single
   registration"). Die Startseite liefert keinen Sprach-Hinweis, ein
   fester Text im Style koennte also nicht mitwechseln. */
#show_einzelne .headerbutton .titel,
.headerauswahl a[href$="/sammel/"] .headerbutton .titel {
  display: block !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #111 !important;
}

/* kein fester Untertitel mehr ("ab 2 Personen") - er wuerde auf der
   englischen Seite deutsch bleiben */
.headerauswahl a[href$="/sammel/"] .headerbutton::after   { content: none; }

/* Kachel Startplatzboerse - erscheint, sobald Datasport auf der
   Startseite einen Link auf .../3349/boerse/ einbaut */
.headerauswahl a[href$="/boerse/"] .headerbutton::before  { content: "STARTPLATZBÖRSE"; }
.headerauswahl a[href$="/boerse/"] .headerbutton::after   { content: "freie Startplätze aller Distanzen"; }

/* Alle Kacheltitel auf GLEICHER HOEHE: Inhalt oben ausrichten statt
   vertikal zentrieren (sonst steht der Titel je nach Logo-/Untertitel-
   Hoehe unterschiedlich hoch). Logos mittig im restlichen Platz. */
.headerauswahl .headerbutton {
  justify-content: flex-start !important;
  padding-top: 26px !important;
}

.headerauswahl .headerbutton.einzelne::after {
  margin-top: auto;
  margin-bottom: auto;
}

/* Erste Seite (Einzel / Sammel / Boerse) ohne Logo: Titel etwas
   tiefer, aber bei allen gleich */
#show_einzelne .headerbutton,
.headerauswahl a[href$="/sammel/"] .headerbutton,
.headerauswahl a[href$="/boerse/"] .headerbutton {
  padding-top: 62px !important;
}

@media screen and (max-width: 500px) {
  #show_einzelne .headerbutton,
  .headerauswahl a[href$="/sammel/"] .headerbutton,
  .headerauswahl a[href$="/boerse/"] .headerbutton {
    padding-top: 44px !important;
  }
}

/* Wettbewerbs-Kacheln: Titel kommt direkt aus den Datasport-Daten
   (span.titel = Wettbewerbsname) - nichts fest hinterlegt, neue oder
   umbenannte Wettbewerbe erscheinen automatisch */
.headerauswahl .headerbutton.einzelne .titel {
  display: block !important;
  position: static !important;
  order: 0;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #111 !important;
}

/* Hinweis "AUSGEBUCHT / Startplatzboerse aktiv" (bzw. andere Limit-
   Hinweise): Datasport setzt ihn sonst absolut UEBER die Kachel
   (top:-33px) - in diesem Layout wuerde er hinter der Reihe darueber
   verschwinden. Deshalb als roter Badge IN die Kachel, unter das Logo. */
.headerauswahl .headerbutton .limit,
.headerauswahl .headerbutton .info,
.headerauswahl .headerbutton > span:not(.titel):not(.strecke),
.headerauswahl a > span:not(.headerbutton) {
  position: static !important;
  order: 1;
  display: inline-block !important;
  float: none !important;
  width: auto !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 4px 12px !important;
  border-radius: 999px;
  background: var(--rm-red) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* Distanz (aus den Datasport-Daten, z.B. "42,195km") als
   Untertitel mittig im restlichen Kachelplatz */
.headerauswahl .headerbutton.einzelne .strecke {
  display: block !important;
  position: static !important;
  margin: auto 0 !important;
  font-size: 18px;
  font-weight: 600;
  color: #111;
}

.headerauswahl .headerbutton.einzelne::after {
  content: none;
}

@media screen and (max-width: 500px) {
  .headerauswahl .strecke,
  .headerauswahl .titel,
  .headerauswahl .info {
    position: inherit;
  }
  section.headerauswahl {
    gap: 12px;
    margin-top: 1.5em !important;
  }
  .headerauswahl a {
    width: 100%;
    max-width: 330px;
  }
  .headerauswahl .headerbutton {
    width: 100%;
    height: 130px;
  }
  .headerauswahl .headerbutton::before,
  .headerauswahl .headerbutton.einzelne .titel {
    font-size: 18px;
  }
}

/* =========================================================
   AUSWAHLLISTEN (Schritt 1 + 2) - Preis-Fix und Safari/iPhone
   -------------------------------------------------------------
   Stand: alle Auswahlboxen sind jetzt normale Browser-<select>
   (auch in Schritt 1 - dort steht nur noch die Klasse "chzn-select"
   an den Feldern, das Chosen-Script wird nicht mehr gestartet).
   Der Preis steckt als <preis> in jeder <option>.

   1) Chrome/Edge (base-select): Die Plattform setzt <preis> auf
      "float: right". Ein Float zaehlt nicht zur Hoehe der Zeile - bei
      langem Text rutschte der Preis unter die markierte (rote) Zeile
      und ragte heraus. Jetzt: Text links, Preis rechts in derselben
      Flex-Zeile, die Zeile waechst mit dem Text.
   2) Safari / Firefox / iPhone (kein base-select): Die aufgeklappte
      Liste ist dort Betriebssystem-Oberflaeche (iPhone: Auswahlrad)
      und laesst sich nicht gestalten. Das GESCHLOSSENE Feld wird aber
      so gestylt, dass es genauso aussieht wie in Chrome.
   ========================================================= */
@supports (appearance: base-select) {
  .ym-form select option {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
  }
  .ym-form select option > preis {
    float: none !important;
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
    text-align: right;
  }
  /* "bitte auswaehlen..." ist nicht waehlbar - nie rot markieren */
  .ym-form select option:disabled,
  .ym-form select option:disabled:hover,
  .ym-form select option:disabled:focus-visible {
    background: transparent !important;
    color: var(--rm-muted) !important;
  }
}

@supports not (appearance: base-select) {
  .ym-form select {
    -webkit-appearance: none;
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 12px 8px;
    padding-right: 2.6rem;
    font-size: max(16px, 1rem);   /* unter 16 px zoomt das iPhone beim Antippen */
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}

/* =========================================================
   SCHRITT-LEISTE (Anmeldung Schritt 1-4)
   -------------------------------------------------------------
   Vorher: vier graue/rote Balken direkt auf dem Foto - "schwebte in
   der Luft". Jetzt: weisse Karte wie die anderen Boxen (gleiche
   Rundung/Schatten), pro Schritt ein Kreis mit Nummer (erledigte
   Schritte mit Haken) und darunter ein Fortschrittsbalken in Rot.
   Beschriftung kommt weiterhin aus dem vorhandenen CSS (::after).
   ========================================================= */
.ym-grid:has(> .schritt_aktiv) {
  display: flex !important;
  box-sizing: border-box !important;   /* sonst 20 px breiter als die Boxen darunter */
  counter-reset: schritt;
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--rm-radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 14px 10px 0;
  margin-bottom: 10px;
}
.ym-grid:has(> .schritt_aktiv) > div {
  counter-increment: schritt;
  flex: 1 1 0;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 4px 12px !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8a8f98 !important;
  text-align: center;
  box-shadow: inset 0 -4px 0 var(--rm-line);
}
/* Kreis mit Nummer */
.ym-grid:has(> .schritt_aktiv) > div::before {
  content: counter(schritt);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  background: var(--rm-line);
  color: #6b7079;
}
.ym-grid:has(> .schritt_aktiv) > div::after {
  font-size: 14px;
  line-height: 1.2;
}
/* aktueller Schritt */
.ym-grid:has(> .schritt_aktiv) > .schritt_aktiv {
  color: var(--rm-text) !important;
  font-weight: 700;
  box-shadow: inset 0 -4px 0 var(--rm-red);
}
.ym-grid:has(> .schritt_aktiv) > .schritt_aktiv::before {
  background: var(--rm-red);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(104, 169, 153, 0.18);
}
/* erledigte Schritte: alle inaktiven VOR dem aktiven */
.ym-grid:has(> .schritt_aktiv) > .schritt_inaktiv:has(~ .schritt_aktiv) {
  color: var(--rm-text) !important;
  box-shadow: inset 0 -4px 0 var(--rm-red);
}
.ym-grid:has(> .schritt_aktiv) > .schritt_inaktiv:has(~ .schritt_aktiv)::before {
  content: "\2713";
  background: rgba(104, 169, 153, 0.12);
  color: var(--rm-red);
}
@media screen and (max-width: 767px) {
  .ym-grid:has(> .schritt_aktiv) {
    padding: 10px 4px 0;
  }
  .ym-grid:has(> .schritt_aktiv) > div {
    padding: 0 2px 10px !important;
    gap: 5px;
  }
  .ym-grid:has(> .schritt_aktiv) > div::before {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .ym-grid:has(> .schritt_aktiv) > div::after {
    font-size: 11.5px;
  }
}

/* =========================================================
   SCHRITT-LEISTE auf ENGLISCH
   -------------------------------------------------------------
   Die Beschriftungen oben stehen fest im CSS (deutsch). <html lang>
   steht auf der Plattform immer auf "de" und taugt deshalb nicht als
   Erkennung. Verlaesslich ist dagegen, welches Sprach-Script geladen
   wird: auf englischen Seiten ".../g=sprache_en_js", auf deutschen
   ".../g=sprache_de_js". CSS kann per :has() nach diesem <script>
   fragen - ohne eine Zeile JavaScript.
   ========================================================= */
html:has(script[src*="sprache_en_js"]) .schritt_aktiv:nth-child(1)::after,
html:has(script[src*="sprache_en_js"]) .schritt_inaktiv:nth-child(1)::after { content: "Personal data"; }

html:has(script[src*="sprache_en_js"]) .schritt_aktiv:nth-child(2)::after,
html:has(script[src*="sprache_en_js"]) .schritt_inaktiv:nth-child(2)::after { content: "Additional services"; }

html:has(script[src*="sprache_en_js"]) .schritt_aktiv:nth-child(3)::after,
html:has(script[src*="sprache_en_js"]) .schritt_inaktiv:nth-child(3)::after { content: "Payment"; }

html:has(script[src*="sprache_en_js"]) .schritt_aktiv:nth-child(4)::after,
html:has(script[src*="sprache_en_js"]) .schritt_inaktiv:nth-child(4)::after { content: "Summary"; }

@media screen and (max-width: 767px) {
  html:has(script[src*="sprache_en_js"]) .schritt_aktiv:nth-child(1)::after,
  html:has(script[src*="sprache_en_js"]) .schritt_inaktiv:nth-child(1)::after { content: "Personal\A data"; }

  html:has(script[src*="sprache_en_js"]) .schritt_aktiv:nth-child(2)::after,
  html:has(script[src*="sprache_en_js"]) .schritt_inaktiv:nth-child(2)::after { content: "Additional\A services"; }
}

/* Schritt-Leiste: Feinschliff
   - duenner schwarzer Rahmen um die ganze Karte
   - Zahlen exakt mittig im Kreis: "text-box" schneidet den Leerraum
     ueber/unter den Ziffern ab (Chrome/Edge/Safari neu). Aeltere
     Browser bekommen einen kleinen Ausgleich per padding. */
.ym-grid:has(> .schritt_aktiv) {
  border: 1px solid rgba(20, 20, 20, 0.55) !important;
}
.ym-grid:has(> .schritt_aktiv) > div::before {
  line-height: 1;
  padding-bottom: 1px;
}
@supports (text-box: trim-both cap alphabetic) {
  .ym-grid:has(> .schritt_aktiv) > div::before {
    text-box: trim-both cap alphabetic;
    padding-bottom: 0;
  }
}

/* =========================================================
   KOPFBEREICH GRAVEL MARATHON
   Nur das Event-Logo, mittig - das im Portal hinterlegte Logo
   (img.logo1 = logo.png; dasselbe Bild zeigt auch die Event-Uebersicht
   auf planb-registration.de).
   Das Trail-Plan-B-Logo steht unten in der Fusszeile (#footer_logo).
   Eventname und Datum (h1) werden nicht angezeigt - sie bleiben aber
   im HTML fuer Suchmaschinen und Screenreader.
   ========================================================= */
header,
body:has(.headerauswahl) header {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  max-width: none !important;
  padding: 26px 0 14px !important;
  text-align: center;
}

header img.logo1,
header:not(:has(img.logo2)) img.logo1 {
  order: 1;
  display: block !important;
  float: none !important;
  flex: 0 0 auto;
  width: min(780px, 100%) !important;   /* gross, aber nicht ueber die ganze Breite */
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Eventname + Datum unsichtbar, aber fuer Screenreader vorhanden */
header h1,
header:not(:has(img.logo2)) h1 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0 !important;
}

/* ---------- Staffel: Kasten-Ueberschrift "Gebuehr und evtl.
   kostenpflichtige Zusatzleistungen" ausblenden ----------
   In der Staffel-Anmeldung (Felder "team_...") steht unter dieser
   Ueberschrift keine Gebuehr - es folgt nur ein leerer Zeilenumbruch
   und dann direkt der erste Abschnitt (z.B. "Newsletter") mit eigener
   Ueberschrift. Ueberschrift und Leerzeile fallen deshalb weg. */
.panibox:has(> form.ym-form [name^="team_"]) > h6 {
  display: none !important;
}

.panibox:has(> form.ym-form [name^="team_"]) > form > br:first-child {
  display: none;
}

/* erster Abschnitt (z.B. "Newsletter") direkt oben am Kasten - ohne
   weissen Streifen darueber */
.panibox:has(> form.ym-form [name^="team_"]) > form > fieldset:first-of-type {
  margin-top: 0 !important;
}

/* ---------- Kachel "Staffel" (Wettbewerb 12247) ausblenden ----------
   bleibt auch nach Klick auf "Einzelanmeldung" verborgen */
section.headerauswahl > a[href$="/12247"] {
  display: none !important;
}

/* ---------- Event-Informationen: Dokumente in der gewaehlten Sprache ----------
   Deutsch gewaehlt  -> nur AGB DE und Reglement DE
   Englisch gewaehlt -> nur AGB EN und Reglement EN
   Englisch wird erkannt
     - auf den Anmeldeschritten am Sprach-Script ".../g=sprache_en_js"
     - auf der Wettbewerbsseite (ohne Sprach-Script) am Button "Continue"
       (deutsch: "weiter")
   Sonst gilt Deutsch.
   Die PDFs werden ueber ihre Datei-Adresse erkannt - wird ein Dokument
   NEU hochgeladen, bekommt es eine neue Nummer: dann hier anpassen.
     AGB DE:       pdf_37964.pdf
     AGB EN:       pdf_37965.pdf
     Reglement DE: pdf_37968.pdf
     Reglement EN: pdf_37969.pdf */
/* Englisch: deutsche Dokumente ausblenden */
html:is(:has(script[src*="sprache_en_js"]), :has(input[value="Continue" i])) #fileTree li:has(a[href*="pdf_37964."]),
html:is(:has(script[src*="sprache_en_js"]), :has(input[value="Continue" i])) #fileTree li:has(a[href*="pdf_37968."]),
/* Deutsch: englische Dokumente ausblenden */
html:not(:has(script[src*="sprache_en_js"])):not(:has(input[value="Continue" i])) #fileTree li:has(a[href*="pdf_37965."]),
html:not(:has(script[src*="sprache_en_js"])):not(:has(input[value="Continue" i])) #fileTree li:has(a[href*="pdf_37969."]),
/* alte Dokumente (ersetzt) immer ausblenden - falls sie noch im Portal stehen */
#fileTree li:has(a[href*="pdf_37966."]),
#fileTree li:has(a[href*="pdf_37967."]),
#fileTree li:has(a[href*="pdf_37958."]),
#fileTree li:has(a[href*="pdf_37959."]),
#fileTree li:has(a[href*="pdf_37962."]),
#fileTree li:has(a[href*="pdf_37963."]),
#fileTree li:has(a[href*="1786010924_1562447998"]),
#fileTree li:has(a[href*="1786010924_506526658"]),
#fileTree li:has(a[href*="1786535853_1629145773"]),
#fileTree li:has(a[href*="1786535858_1448689152"]) {
  display: none !important;
}

/* hochgeladene PDFs (Datasport-Klasse .file_pdf) mit demselben
   Dokument-Symbol wie die uebrigen Links, Dateigroesse dezent */
#fileTree li.file_pdf {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2368a999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8"/><path d="M8 17h5"/></svg>') !important;
}

#fileTree li.file_pdf em {
  font-size: 12px;
  color: #9a9a9a;
}

/* ---------- Fusszeile: Veranstalter-Logo ganz unten ----------
   Wie beim Silvesterlauf Kempten (Sponsoren-Leiste): Datasport gibt
   in jeder Fusszeile ein leeres <div id="footer_logo"> aus - hier
   erscheint das Trail-Plan-B-Logo logo1.png aus dem Event-Ordner
   (gleicher Ordner wie diese style.css). Wird logo1.png im Portal
   ersetzt, erscheint automatisch das neue. */
#footer_logo {
  display: block !important;
  min-width: 100%;
  height: 70px;
  margin: 18px 0 10px;
  font-size: 0;   /* das &nbsp; im Element nicht anzeigen */
  background: url("logo1.png") center / contain no-repeat;
}

@media screen and (max-width: 600px) {
  #footer_logo {
    height: 50px;
    margin: 14px 0 6px;
  }
}

/* ---------- Bild "PLAN B First Aid Kit" bei den Zusatzleistungen etwas
   kleiner (Einzel-, Staffel- und Sammelanmeldung) ---------- */
img[src*="firstaidkit"] {
  width: auto !important;
  max-width: min(340px, 100%) !important;
  height: auto !important;
}


/* ===== ENDE ANMELDESEITE ===== */


/*
  Regensburg Marathon – Custom CSS fuer das RaceResult-Widget
  -------------------------------------------------------------
  Basiert auf dem Grüntenstafette-Design (dunkles Theme, Karten-
  Look), aber:
    - Neue Datasport-Markenfarben (Rot/Schwarz/Grau statt Lila)
    - Keine Disziplin-Icons (normaler Lauf, kein Staffel-Raster
      mit Schwimm-/Rad-/Lauf-Kacheln - die gibt es hier gar nicht,
      RaceResult blendet .RRLegs fuer dieses Event ohnehin aus)
    - Zwischenzeiten-Tabelle hat andere Spalten als bei der
      Staffel (Brutto/Netto/Abschnitt/Geschwindigkeit/Gesamt statt
      Tageszeit/Gesamt/AK-Platz) - Grid-Zuordnung entsprechend neu
    - Kopfbereich nutzt keine .RRFlexBox (die ist bei diesem Event
      leer/deaktiviert) - Grid liegt stattdessen auf dem echten
      Eltern-Div von .RRHTML
    - Zusaetzliche Boxen "Urkunden" (RRCertificates) und "Links"
      (RRLinks, Social-Media-Icons), die es bei der Staffel nicht
      gab

  Live getestet gegen:
  https://www.datasport.de/anmeldeservice/regensburgmarathon2027/ergebnisse
*/

/* =========================================================
   GRUNDVARIABLEN – Datasport-Markenfarben
   ========================================================= */

:root {
  --dp-bg: #141414;         /* Datasport Black */
  --dp-panel: #1c1c1c;
  --dp-panel-2: #232323;

  --dp-text: #f7f7f5;
  --dp-muted: #aeb0ae;
  --dp-line: rgba(255, 255, 255, 0.12);

  --dp-primary: #68a999;       /* Gravel-Gruen */
  --dp-primary-light: #8cc4b5;
  --dp-primary-dark: #3d6b5f;

  --dp-predicted: #a9d3c8;

  --dp-grey: #efefef;       /* Datasport Grey */

  --dp-gradient: linear-gradient(
    115deg,
    #4f8a7b 0%,
    #68a999 55%,
    #8cc4b5 100%
  );
}


/* =========================================================
   DETAIL-OVERLAY
   ========================================================= */

.Popup-Overlay {
  background: rgba(0, 0, 0, 0.82) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden !important;
}

/* Der unbenannte Wrapper-<div> zwischen .Popup-Overlay und
   .RRParticipantView hat von RaceResult aus noch einen eigenen
   weissen Hintergrund + box-shadow - das schien durch, auch nachdem
   .Popup-Overlay selbst schon dunkel/verschwommen war (gleicher Fix
   wie bei der Gruentenstafette-Datei). */
.Popup-Overlay > div {
  background: none !important;
  box-shadow: none !important;
}


/* =========================================================
   DETAILFENSTER
   ========================================================= */

.RRParticipantView {
  --brandColorDark: #fff !important;

  width: min(760px, calc(100vw - 24px)) !important;
  max-width: 760px !important;

  height: calc(100dvh - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  min-height: 0 !important;

  margin: 12px auto !important;
  padding: 0 !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  background: var(--dp-bg) !important;
  color: var(--dp-text) !important;

  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 28px !important;

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.58),
    0 0 60px rgba(104, 169, 153, 0.10) !important;

  font-family:
    "Arial Narrow",
    "Helvetica Neue Condensed",
    "Roboto Condensed",
    Arial,
    Helvetica,
    sans-serif !important;

  box-sizing: border-box !important;
}

.RRParticipantView {
  scrollbar-width: thin;
  scrollbar-color: rgba(104, 169, 153, 0.65) rgba(255, 255, 255, 0.03);
}

.RRParticipantView::-webkit-scrollbar { width: 8px; }
.RRParticipantView::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); }
.RRParticipantView::-webkit-scrollbar-thumb {
  background: rgba(104, 169, 153, 0.65);
  border-radius: 999px;
}
.RRParticipantView::-webkit-scrollbar-thumb:hover { background: var(--dp-primary); }


/* =========================================================
   RR TOPBAR
   ========================================================= */

.RRParticipantView .RRTopBar {
  background: #000000 !important;
  border: 0 !important;
}

.RRParticipantView .RRTopBar > * {
  background-color: transparent !important;
}

.RRParticipantView .RRTopBar .Icon {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  padding: 4px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.RRParticipantView .RRTopBar .Icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.RRParticipantView .RRTopBar .Icon svg path,
.RRParticipantView .RRTopBar .Icon svg line,
.RRParticipantView .RRTopBar .Icon svg polyline,
.RRParticipantView .RRTopBar .Icon svg circle {
  fill: #fff !important;
  stroke: #fff !important;
}

.RRParticipantView .RRTopBar .Icon:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.RRParticipantView .RRTopBar [class*="Share"],
.RRParticipantView .RRTopBar [class*="share"],
.RRParticipantView .RRTopBar [class*="Close"],
.RRParticipantView .RRTopBar [class*="close"],
.RRParticipantView .RRParticipantViewLiveUpdateMarker,
.RRParticipantView .RRTopBar .Favorite {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  box-sizing: border-box !important;
}

@media (max-width: 620px) {
  .RRParticipantView .RRTopBar .Icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 3px !important;
  }
  .RRParticipantView .RRTopBar [class*="Share"],
  .RRParticipantView .RRTopBar [class*="share"],
  .RRParticipantView .RRTopBar [class*="Close"],
  .RRParticipantView .RRTopBar [class*="close"],
  .RRParticipantView .RRParticipantViewLiveUpdateMarker,
  .RRParticipantView .RRTopBar .Favorite {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
  }
}


/* =========================================================
   RACE RESULT GRUNDRESET
   ========================================================= */

.RRParticipantView,
.RRParticipantView .RRElements,
.RRParticipantView .RRBox,
.RRParticipantView .RRBox > div,
.RRParticipantView .RRResults,
.RRParticipantView table,
.RRParticipantView tbody,
.RRParticipantView tr,
.RRParticipantView td {
  box-sizing: border-box;
}

.RRParticipantView {
  background:
    radial-gradient(circle at 13% 14%, rgba(104, 169, 153, 0.16), transparent 29%),
    radial-gradient(circle at 90% 16%, rgba(104, 169, 153, 0.10), transparent 31%),
    var(--dp-bg) !important;
  color: var(--dp-text) !important;
}

.RRParticipantView .RRElements {
  gap: 0 !important;
  padding: 0 !important;
}

.RRParticipantView .RRBox {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.RRParticipantView table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: collapse !important;
  background: transparent !important;
  border-bottom: none !important;
}

.RRParticipantView tr,
.RRParticipantView tr:nth-child(2n),
.RRParticipantView td,
.RRParticipantView tbody tr:hover td {
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
}


/* =========================================================
   1. TEILNEHMERKOPF (Name/Verein + Gesamtzeit-Karte)

   Anders als bei der Staffel ist .RRFlexBox hier leer/deaktiviert -
   das echte 2-Spalten-Layout muss auf den direkten Eltern-Container
   von .RRHTML gelegt werden. .RRHTML enthaelt reinen Text in <p>
   (kein <span> darin), Selektoren daher auf p statt p > span.
   ========================================================= */

.RRParticipantView .RRBox:has(.RRHTML) {
  position: relative;
  overflow: hidden;
  padding: 26px 30px 28px !important;
  background:
    radial-gradient(circle at 18% 62%, rgba(104, 169, 153, 0.28), transparent 43%),
    radial-gradient(circle at 89% 47%, rgba(104, 169, 153, 0.14), transparent 36%),
    #0e0e0e !important;
}

.RRParticipantView .RRBox:has(.RRHTML)::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}


.RRParticipantView .RRTopBar .Center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
}
.RRParticipantView .RRTopBar .Center::before {
  content: "";
  display: block;
  width: 130px;
  height: 16px;
  background-image: url('https://static.datasport.de/bilder/datasport.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.9;
}
.RRParticipantView .RRTopBar .Center {
  justify-content: flex-start;
  padding-left: 8px;
}
/* Der wirkliche Grid-Container: direktes Eltern-Div von .RRHTML.
   .RRFlexBox (leer, display:none) zaehlt bei Grid-Auto-Placement
   nicht mit, die zwei sichtbaren Kind-Divs (Name/Verein-Wrapper,
   Ergebnis-Wrapper) werden automatisch Spalte 1 und 2. */
.RRParticipantView .RRBox:has(.RRHTML) > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.78fr) !important;
  gap: 24px !important;
  align-items: center !important;
}

.RRParticipantView .RRBox:has(.RRHTML) .RRHTML {
  display: block !important;
  color: #fff !important;
  overflow: visible !important;
}

.RRParticipantView .RRBox:has(.RRHTML) .RRHTML p {
  margin: 0 !important;
}

.RRParticipantView .RRBox:has(.RRHTML) .RRHTML p:first-child {
  margin-bottom: 7px !important;
  font-size: clamp(30px, 5.8vw, 46px) !important;
  line-height: 1.02 !important;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.RRParticipantView .RRBox:has(.RRHTML) .RRHTML p:nth-child(2) {
  font-size: 16px !important;
  line-height: 1.3 !important;
  color: rgba(255, 255, 255, 0.72) !important;
}


/* =========================================================
   GESAMTZEIT-KARTE + MW-/AK-PLATZ-KARTE

   Beides sind eigene .RRResults-Tabellen im 2. Spalten-Div
   (Ergebnis-Wrapper). Erste Tabelle = Gesamtzeit (Wert + Label
   als zwei Zeilen), zweite (in einem weiteren verschachtelten
   Div) = MW-Platz + AK-Platz (je eine Zeile Fliesstext).
   ========================================================= */

/* Achtung: nth-child(3), NICHT (2) - das unsichtbare .RRFlexBox
   (display:none, ungenutzt bei diesem Event) zaehlt bei :nth-child
   trotzdem als Kind 1 mit; Kind 2 ist der Name/Verein-Wrapper,
   Kind 3 erst der Ergebnis-Wrapper mit der Gesamtzeit-Karte. */
.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) {
  overflow: hidden;
  align-self: center;
  border: 1px solid rgba(104, 169, 153, .55) !important;
  border-radius: 20px;
  background: #050505;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.32),
    0 0 25px rgba(104, 169, 153, 0.14);
}

/* Gesamtzeit: grosse Zahl auf rotem Verlauf */
.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) > .RRResults:first-child {
  padding: 18px 12px 11px !important;
  background: var(--dp-gradient) !important;
  color: #fff !important;
}

.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) > .RRResults:first-child tr:first-child td {
  font-size: clamp(38px, 7vw, 58px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em;
  color: #fff !important;
}

.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) > .RRResults:first-child tr:nth-child(2) td {
  padding-top: 6px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Pace (z.B. "4:04 min/km") - RaceResult liefert diese Zeile ohne
   eigene Farbe, faellt daher sonst auf Schwarz zurueck statt das
   vom .RRResults geerbte Weiss zu behalten. */
.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) > .RRResults:first-child tr:nth-child(3) td {
  padding-top: 2px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* MW-Platz / AK-Platz: zwei Zeilen Fliesstext darunter */
.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) > div {
  background: #050505 !important;
}

.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) > div .RRResults {
  padding: 11px 10px 13px !important;
  color: #fff !important;
}

.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) > div .RRResults tr td {
  display: block !important;
  padding: 3px 0 !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) > div .RRResults tr:first-child td {
  color: var(--dp-primary-light) !important;
  font-size: 15px !important;
}


/* =========================================================
   HOCHRECHNUNG / HINWEIS
   ========================================================= */

.RRParticipantView .RRElements > div:not(.RRBox) .RRText {
  padding: 4px 20px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  background: transparent !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
  text-align: center;
}


/* =========================================================
   2. ZWISCHENZEITEN / TIMELINE

   Spalten bei diesem Event: Brutto (tdSplitGun), Netto
   (tdSplitChip), Abschnitt (tdSplitSector), Geschwindigkeit
   (tdSplitSpeed), Gesamt (tdSplitRO). Kein AK-/MW-Platz je Zeile
   (die stehen nur oben in der Kopf-Karte), daher andere Grid-
   Aufteilung als bei der Staffel:
     "name gun"
     "speed sector"
     "chip rg"
   ========================================================= */

.RRParticipantView .RRElements > div:has(.RRSplits) {
  position: relative;
  padding-top: 50px !important;
  padding-right: 25px !important;
  padding-bottom: 27px !important;
  padding-left: 25px !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.018)),
    #0c0c0c !important;
}

/* Fortschrittsbalken ueber der Zwischenzeiten-Liste. Distanz-
   unabhaengig: die Fuellbreite wird NICHT aus Kilometern berechnet
   (die kennt CSS nicht), sondern aus dem Verhaeltnis "erledigte
   Zwischenzeiten-Karten / Gesamtzahl Zwischenzeiten-Karten" fuer
   GENAU DIESES Rennen - dynamisch per :has()-Tabelle weiter unten
   ermittelt. Funktioniert dadurch automatisch bei jeder Distanz
   (Viertel-/Halb-/Dreiviertel-/Marathon), ohne dass die Strecken-
   laenge irgendwo hinterlegt werden muss.

   top-Position ist zweigeteilt: manche Rennen/Feldkonfigurationen
   zeigen ueber der Zwischenzeiten-Liste eine Ueberschrift (.RRBoxHead,
   Kreis+Fahnen-Icon), andere (z.B. der Marathon selbst) gar keine -
   der Balken haengt sich also selbst per :has(> .RRBoxHead) an die
   jeweils passende Position. */
.RRParticipantView .RRElements > div:has(.RRSplits)::before {
  content: "";
  position: absolute;
  left: 25px;
  right: 25px;
  top: 44px;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 0;
}

.RRParticipantView .RRElements > div:has(.RRSplits)::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 44px;
  height: 6px;
  width: 0%;
  border-radius: 4px;
  background: var(--dp-gradient);
  box-shadow: 0 0 8px rgba(104, 169, 153, 0.5);
  z-index: 0;
  transition: width 0.5s ease;
}

.RRParticipantView .RRElements > div:has(.RRSplits):has(> .RRBoxHead)::before,
.RRParticipantView .RRElements > div:has(.RRSplits):has(> .RRBoxHead)::after {
  top: 88px;
}

/* Platz vor der ersten Zwischenzeiten-Karte fuer den Balken reservieren -
   ohne Ueberschrift direkt per margin-top auf .RRSplits, mit Ueberschrift
   uebernimmt das schon deren eigener margin-bottom (siehe .RRBoxHead unten). */
.RRParticipantView .RRSplits {
  margin-top: 12px !important;
}

.RRParticipantView .RRElements > div:has(.RRSplits):has(> .RRBoxHead) .RRSplits {
  margin-top: 0 !important;
}

/* Generischer Fallback, der OHNE die :has()-Tabelle unten und damit
   fuer JEDE beliebige Anzahl Zwischenzeiten funktioniert: sobald
   keine einzige .predicted-Zeile mehr existiert, ist das Ziel
   erreicht -> Balken 100% voll, egal wie viele Punkte das Rennen hat. */
.RRParticipantView:not(:has(.RRSplits > div > .predicted)) .RRElements > div:has(.RRSplits)::after {
  width: calc(100% - 50px) !important;
}

/* Im Ziel (keine .predicted-Zeile mehr uebrig) laeuft niemand mehr -
   Jogger verschwindet, nur Start-/Ziel-Fahne bleiben stehen. */
.RRParticipantView:not(:has(.RRSplits > div > .predicted)) .RRSplits::before {
  display: none !important;
}

/* Start-/Ziel-Icons an den Enden des Balkens + laufendes Läufer-Icon
   an der aktuellen Position - ausdrückliche Ausnahme von der
   "keine Jogger-Symbole"-Regel, NUR fuer diesen Fortschrittsbalken.
   Beide Ebenen sitzen OBERHALB des Balkens (nicht mittig darauf).
   Start/Ziel liegen als zwei Hintergrundbild-Ebenen auf EINEM
   statischen Element (spannt die volle Balkenbreite). Das Läufer-
   Icon sitzt auf einer zweiten Box, deren Breite ueber dieselbe
   :has()-Tabelle wie der Fuellbalken berechnet wird - dadurch landet
   das Icon (background-position-x:right) automatisch exakt am
   aktuellen Ende des roten Balkens, unabhaengig von der Distanz. */
.RRParticipantView .RRSplits::after {
  content: "";
  position: absolute;
  left: 25px;
  right: 25px;
  top: 8px;
  height: 32px;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 3v18M5 4h13l-3 4 3 4H5" fill="none" stroke="white" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 3v18" stroke="white" stroke-width="2" stroke-linecap="round"/><path d="M5 4h14v8H5z" fill="none" stroke="white" stroke-width="1.2"/><rect x="5" y="4" width="3.5" height="4" fill="white"/><rect x="12" y="4" width="3.5" height="4" fill="white"/><rect x="8.5" y="8" width="3.5" height="4" fill="white"/><rect x="15.5" y="8" width="3.5" height="4" fill="white"/></svg>');
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-size: 26px 26px, 26px 26px;
  pointer-events: none;
  z-index: 2;
}

/* Laufendes Icon als 2-Bild-Sprite (zwei Lauf-Posen untereinander in
   einer SVG). Die Umschaltung zwischen den Posen passiert ueber
   background-position-Y (fixe Pixelwerte, unabhaengig von der
   Balkenbreite) - waehrend background-position-X konstant auf
   "right" steht und dadurch die Box IMMER an ihrem rechten Rand
   zeigt, also exakt an der aktuellen (per :has()-Tabelle berechneten)
   Fortschritts-Position, egal wie breit die Box gerade ist. So lassen
   sich Position (X, distanzabhaengig) und Lauf-Animation (Y, fix)
   unabhaengig voneinander steuern. */
.RRParticipantView .RRSplits::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 8px;
  height: 32px;
  width: 0%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 48"><circle cx="15" cy="4" r="1.8" fill="white"/><path d="M14 6.5L11 13" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round"/><path d="M11 13L14 15L13 19" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 13L8 16L5 15" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M13 8L16 9L18 7" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M13 8L10 10L8 13" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="15" cy="28" r="1.8" fill="white"/><path d="M14 30.5L11 37" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round"/><path d="M11 37L14 38L12 42" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 37L9 39L10 43" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M13 32L10 33L9 36" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M13 32L16 32.5L17 35" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: 0px;
  background-size: 32px 64px;
  pointer-events: none;
  animation: rrJoggerRun 0.5s steps(1) infinite;
  transition: width 0.5s ease;
  z-index: 3;
}

@keyframes rrJoggerRun {
  0%, 45% { background-position-y: 0px; }
  50%, 95% { background-position-y: -32px; }
  100% { background-position-y: 0px; }
}

.RRParticipantView .RRElements > div:has(.RRSplits):has(> .RRBoxHead) .RRSplits::before,
.RRParticipantView .RRElements > div:has(.RRSplits):has(> .RRBoxHead) .RRSplits::after {
  top: 52px;
}

.RRParticipantView .RRElements > div:has(.RRSplits) > .RRBoxHead {
  display: block !important;
  position: relative;
  margin: 0 0 34px 0 !important;
  padding: 0 0 0 42px !important;
  height: auto !important;
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  font-size: 21px !important;
  line-height: 30px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.RRParticipantView .RRElements > div:has(.RRSplits) > .RRBoxHead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-sizing: border-box;
}

.RRParticipantView .RRElements > div:has(.RRSplits) > .RRBoxHead::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 6px;
  width: 3px;
  height: 8px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 5px 8px 0 -1px #fff;
  transform: rotate(-2deg);
  transform-origin: bottom center;
}

.RRParticipantView .RRSplits { color: #fff !important; }
.RRParticipantView .RRSplits > div { position: relative; }

/* vertikale Linie - exakt mittig durch die 40px/48px-Kreise (Kreis-
   Mittelpunkt liegt bei 32px, Linie ist 3px breit -> left:30px) */
.RRParticipantView .RRSplits > div::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 17px;
  bottom: 21px;
  width: 3px;
  border-radius: 3px;
  background: var(--dp-primary);
  opacity: 0.85;
}

/* Tabellenkopf (Brutto/Netto/... als eigene Kopfzeile) verstecken */
.RRParticipantView .RRSplits > div > div:first-child {
  display: none !important;
}

/* Jede Zwischenzeit als eigene Karte mit Rahmen (wie bei der
   Gruentenstafette) statt nur einer duennen Trennlinie. */
.RRParticipantView .RRSplits > div > div:not(:first-child) {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "name gun"
    "speed sector"
    "chip rg" !important;
  /* align-content:start statt dem Grid-Standard "stretch" - sonst
     verteilt der Browser die durch min-height entstehende Luft
     gleichmaessig auf ALLE Zeilen (auch leere, z.B. Geschwindigkeit/
     Abschnitt bei START), wodurch Laufzeit und Tageszeit unnoetig
     weit auseinanderrutschen. */
  align-content: start !important;
  column-gap: 14px !important;
  row-gap: 4px !important;
  min-height: 78px;
  margin: 0 0 12px 58px !important;
  padding: 14px 20px 14px 24px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(104, 169, 153, .28) !important;
  border-radius: 16px !important;
  background: linear-gradient(90deg, rgba(28, 8, 8, .9), rgba(5, 18, 15, .92)) !important;
  color: #fff !important;
  transition: border-color .2s ease, background .2s ease, transform .2s ease !important;
}

.RRParticipantView .RRSplits > div > div:not(:first-child):hover {
  border-color: rgba(104, 169, 153, .65) !important;
  background: linear-gradient(90deg, rgba(104, 169, 153, .12), rgba(5, 18, 15, .92)) !important;
}

/* Zeitpunkt-Kreis, jetzt links AUSSERHALB der Karte auf der Linie
   (schlicht, kein Icon/Symbol) */
.RRParticipantView .RRSplits > div > div:not(:first-child)::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: -46px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 3px solid var(--dp-primary);
  border-radius: 50%;
  background: #0c0c0c;
  box-shadow: 0 0 9px rgba(104, 169, 153, .5);
}

/* START/ZIEL etwas groesser hervorheben, weiterhin ohne Icon */
.RRParticipantView .RRSplits > div > div:nth-child(2)::before,
.RRParticipantView .RRSplits > div > div:last-child::before {
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 3px solid var(--dp-primary);
  background-color: #0c0c0c;
}

/* Start-Fahne (kein Lauf-/Rad-Icon, nur eine neutrale Start-Markierung) */
.RRParticipantView .RRSplits > div > div:nth-child(2)::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 3v18M5 4h13l-3 4 3 4H5" fill="none" stroke="white" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
}

/* Ziel-Fahne (Karo-Flagge) */
.RRParticipantView .RRSplits > div > div:last-child::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 3v18" stroke="white" stroke-width="2" stroke-linecap="round"/><path d="M5 4h14v8H5z" fill="none" stroke="white" stroke-width="1.2"/><rect x="5" y="4" width="3.5" height="4" fill="white"/><rect x="12" y="4" width="3.5" height="4" fill="white"/><rect x="8.5" y="8" width="3.5" height="4" fill="white"/><rect x="15.5" y="8" width="3.5" height="4" fill="white"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
}

/* Datasport-Icon (die runde "Play"-Marke aus dem Datasport-Logo,
   aus dem offiziellen SVG herausgeschnitten) in bereits erledigten
   Zwischenzeiten-Kreisen statt eines generischen Hakens (nicht Start/
   Ziel, die haben ihre eigenen Fahnen-Icons oben; nicht .predicted,
   die bleiben leer/gestrichelt bzw. pulsierend). */
.RRParticipantView .RRSplits > div > div:not(:first-child):not(.predicted):not(:nth-child(2)):not(:last-child)::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="235.8 0 28.8 29.34"><g transform="matrix(1.3333333,0,0,-1.3333333,0,29.333333)"><g transform="scale(0.1)"><path d="m 1834.01,164.379 93.88,-54.18 -94.09,-54.5623 z" fill="white"/><path d="m 1816.31,194.961 c 18.45,10.605 51.16,0.602 86.5,-19.785 35.37,-20.395 60.41,-43.86 60.41,-65.024 0,-21.1793 -24.32,-44.5973 -60.21,-65.2887 -35.29,-20.4219 -68.29,-30.0664 -86.7,-19.4922 -18.38,10.5977 -26.5,44.0547 -26.5,84.8279 0.05,41.446 8.11,74.137 26.5,84.762 z m 97.04,-1.578 c -34.55,19.961 -78.67,36.457 -107.54,19.789 -28.88,-16.664 -37.04,-63.067 -37.04,-102.973 0,-39.9177 7.34,-85.9217 37.04,-103.08962 29.67,-17.12888 73.16,-0.4375 107.74,19.50002 34.56,19.9531 70.7,49.2109 70.7,83.5426 0,34.328 -36.33,63.293 -70.9,83.231" fill="white"/></g></g></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}

/* Name/Distanzpunkt */
.RRParticipantView .RRSplits > div > div:not(:first-child) > div:first-child {
  grid-area: name;
  align-self: end;
  min-width: 0;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  overflow-wrap: anywhere;
}

/* Brutto */
.RRParticipantView .RRSplits .tdSplitGun {
  grid-area: gun;
  display: block !important;
  align-self: end;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}

/* Abschnitt */
.RRParticipantView .RRSplits .tdSplitSector {
  grid-area: sector;
  color: var(--dp-primary-light) !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}

/* Geschwindigkeit */
.RRParticipantView .RRSplits .tdSplitSpeed {
  grid-area: speed;
  display: block;
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

.RRParticipantView .RRSplits .tdSplitSpeed .rrSplitsLabel {
  display: inline !important;
  color: inherit !important;
}

/* Netto */
.RRParticipantView .RRSplits .tdSplitChip {
  grid-area: chip;
  display: block !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

.RRParticipantView .RRSplits .tdSplitChip::before {
  content: "Netto: ";
  color: rgba(255, 255, 255, 0.3);
}

.RRParticipantView .RRSplits .tdSplitChip:empty {
  display: none !important;
}

/* Gesamt */
.RRParticipantView .RRSplits .tdSplitRO {
  grid-area: rg;
  display: block !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-align: right !important;
  text-transform: none !important;
}

.RRParticipantView .RRSplits .tdSplitRO .rrSplitsLabel {
  display: inline !important;
  color: inherit !important;
}


/* =========================================================
   ZWEITE SPALTEN-VARIANTE (andere Rennen desselben Events)

   Nicht jedes Rennen im Regensburg Marathon ist gleich
   konfiguriert: manche zeigen pro Zwischenzeit zusaetzlich die
   Tageszeit (tdSplitTOD) sowie M/W-Platz (tdSplitRG) UND AK-Platz
   (tdSplitRA) statt nur "Gesamt" (tdSplitRO). Live an zwei
   verschiedenen Rennen desselben Events geprueft. Die Zeilen
   erkennen sich selbst per :has() - keine Fallunterscheidung noetig.
   ========================================================= */

/* Tageszeit - dezent, zusammen mit Netto in einer Zeile, mit Label */
.RRParticipantView .RRSplits .tdSplitTOD {
  grid-area: tod;
  display: block !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  text-align: right !important;
}

.RRParticipantView .RRSplits .tdSplitTOD::before {
  content: "Tageszeit ";
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
}

/* M/W-Platz - unten LINKS, damit beide Platzierungen auf einer
   Zeile nebeneinander stehen statt gestapelt zu werden */
.RRParticipantView .RRSplits .tdSplitRG {
  grid-area: rg;
  display: block !important;
  color: var(--dp-primary-light) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

/* RaceResult zeigt seit dem Plattform-Update dieses Label auf Englisch
   ("Gender: ") statt Deutsch an - Original ausblenden, deutsches
   Label per ::before auf dem Eltern-Element einsetzen (gleiche
   Technik wie bei der Gruentenstafette-Datei). */
.RRParticipantView.RRParticipantView .RRSplits.RRSplits .tdSplitRG .rrSplitsLabel {
  display: none !important;
}
.RRParticipantView .tdSplitRG::before {
  content: "M/W-Platz: ";
}

/* AK-Platz - unten LINKS, unter M/W-Platz */
.RRParticipantView .RRSplits .tdSplitRA {
  grid-area: ra;
  display: block !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

/* "Age Group: " -> "AK-Platz: " (gleicher Grund wie oben bei tdSplitRG) */
.RRParticipantView.RRParticipantView .RRSplits.RRSplits .tdSplitRA .rrSplitsLabel {
  display: none !important;
}
.RRParticipantView .tdSplitRA::before {
  content: "AK-Platz: ";
}

/* Explizite Reihenfolge (Wunsch):
   Links von oben nach unten: Distanz, Geschwindigkeit, M/W-Platz, AK-Platz
   Rechts von oben nach unten: (Luecke), Abschnittszeit, Laufzeit, Tageszeit
   Brutto (Gun) wird hier nicht mehr gebraucht - Netto (Laufzeit)
   uebernimmt die Rolle der grossen Zeit.

   Name-Zeile bekommt bewusst die VOLLE Breite (rechte Spalte leer) -
   bei der pulsierenden "NEXT TIMING POINT"-Kachel bzw. bei "PROGNOSE"
   ist dort ein Badge neben dem Namen, das sonst mit der Laufzeit-Zahl
   ueberlappt hat. Laufzeit steht dafuer direkt ueber der Tageszeit. */
.RRParticipantView .RRSplits > div > div:not(:first-child):has(.tdSplitRA) {
  grid-template-areas:
    "name  ."
    "speed sector"
    "rg    chip"
    "ra    tod" !important;
}

.RRParticipantView .RRSplits > div > div:not(:first-child):has(.tdSplitRA) .tdSplitGun {
  display: none !important;
}

.RRParticipantView .RRSplits > div > div:not(:first-child):has(.tdSplitRA) .tdSplitChip {
  grid-area: chip !important;
  display: block !important;
  align-self: end !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}

.RRParticipantView .RRSplits > div > div:not(:first-child):has(.tdSplitRA) .tdSplitChip::before {
  content: "Laufzeit " !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.4) !important;
}


/* =========================================================
   PROGNOSEN (Live-Vorhersage fuer noch nicht erreichte Punkte)
   ========================================================= */

.RRParticipantView .RRSplits > div > .predicted {
  opacity: 0.76;
}

.RRParticipantView .RRSplits > div > .predicted::before {
  border-color: var(--dp-predicted) !important;
  border-style: dashed !important;
  box-shadow: 0 0 0 4px rgba(169, 211, 200, 0.1);
}

.RRParticipantView .RRSplits > div > .predicted > div:first-child {
  color: #d6ece6 !important;
}

.RRParticipantView .RRSplits > div > .predicted > div:first-child::after {
  content: "  PROGNOSE";
  display: inline-block;
  margin-left: 7px;
  padding: 3px 7px 2px;
  vertical-align: 2px;
  border-radius: 999px;
  background: var(--dp-predicted);
  color: #171717;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.RRParticipantView .RRSplits > div > .predicted .tdSplitSector {
  color: var(--dp-predicted) !important;
}

/* Bei einer Prognose-Zeile sind Laufzeit/Netto und Tageszeit keine
   echten gemessenen Werte, sondern Schaetzungen - Label entsprechend
   umbenennen ("Erwartete ..."). Selektor bewusst genauso spezifisch
   wie die Race-B-Variante oben (div:not(:first-child) + Klasse),
   damit das hier IMMER gewinnt, unabhaengig davon welche Spalten-
   Variante gerade aktiv ist. */
.RRParticipantView .RRSplits > div > div:not(:first-child).predicted .tdSplitChip::before {
  content: "Erwartete Laufzeit " !important;
}

.RRParticipantView .RRSplits > div > div:not(:first-child).predicted .tdSplitTOD::before {
  content: "Erwartete Tageszeit " !important;
}


/* =========================================================
   NEXT TIMING POINT – pulsierende Kachel

   Der naechste, noch nicht erreichte Checkpoint (die ERSTE
   .predicted-Zeile) hebt sich zusaetzlich zur normalen Prognose-
   Optik ab: pulsierender roter Rahmen + Badge "NEXT TIMING POINT"
   statt "PROGNOSE". Alle weiteren, spaeteren Punkte bleiben bei
   der normalen gestrichelten Prognose-Optik von oben.
   ========================================================= */

@keyframes rrNextPointPulse {
  0%, 100% {
    box-shadow: 0 0 4px rgba(104, 169, 153, .5), 0 0 10px rgba(104, 169, 153, .25);
  }
  50% {
    box-shadow: 0 0 10px rgba(104, 169, 153, 1), 0 0 25px rgba(104, 169, 153, .8), 0 0 40px rgba(104, 169, 153, .4);
  }
}

.RRParticipantView .RRSplits > div > .predicted:not(.predicted ~ .predicted) {
  opacity: 1 !important;
  border: 2px solid var(--dp-primary) !important;
  border-radius: 14px !important;
  animation: rrNextPointPulse 1.6s ease-in-out infinite !important;
}

.RRParticipantView .RRSplits > div > .predicted:not(.predicted ~ .predicted)::before {
  border-color: var(--dp-primary) !important;
  border-style: solid !important;
  animation: none !important;
  box-shadow: none !important;
}

.RRParticipantView .RRSplits > div > .predicted:not(.predicted ~ .predicted) > div:first-child {
  color: #fff !important;
}

.RRParticipantView .RRSplits > div > .predicted:not(.predicted ~ .predicted) > div:first-child::after {
  content: "  PROGNOSE · NEXT TIMING POINT" !important;
  background: var(--dp-primary) !important;
  color: #fff !important;
}

/* Bereits im Ziel (ZIEL hat eine echte Zeit, keine .predicted-Klasse
   mehr) -> keine Pulsier-Kachel mehr zeigen, auch wenn wegen einer
   fehlenden Zwischenmessung noch irgendwo eine .predicted-Klasse
   haengt. Faellt zurueck auf die normale, ruhige Prognose-Optik. */
.RRParticipantView .RRElements:has(.RRSplits > div > div:last-child:not(.predicted)) .RRSplits > div > .predicted:not(.predicted ~ .predicted) {
  border: 1px solid rgba(255, 255, 255, .16) !important;
  animation: none !important;
}

.RRParticipantView .RRElements:has(.RRSplits > div > div:last-child:not(.predicted)) .RRSplits > div > .predicted:not(.predicted ~ .predicted)::before {
  border-color: var(--dp-predicted) !important;
  border-style: dashed !important;
  box-shadow: 0 0 0 4px rgba(169, 211, 200, 0.1);
}

.RRParticipantView .RRElements:has(.RRSplits > div > div:last-child:not(.predicted)) .RRSplits > div > .predicted:not(.predicted ~ .predicted) > div:first-child {
  color: #d6ece6 !important;
}

.RRParticipantView .RRElements:has(.RRSplits > div > div:last-child:not(.predicted)) .RRSplits > div > .predicted:not(.predicted ~ .predicted) > div:first-child::after {
  content: "  PROGNOSE" !important;
  background: var(--dp-predicted) !important;
  color: #171717 !important;
}


/* Positioniert die HTML-Box mit dem Kuchendiagramm (egal wo sie im
   Adminbereich in der Elemente-Liste einsortiert ist) ganz ans Ende
   der Detailansicht, unterhalb aller anderen Boxen (Zwischenzeiten,
   Urkunde, Links etc.) - per Flexbox-"order" statt echter DOM-
   Verschiebung, damit im Adminbereich nichts umsortiert werden muss. */
.RRParticipantView .RRElements {
  display: flex;
  flex-direction: column;
}
.RRParticipantView .RRElements > div:has(.at-finish-segbar) {
  order: 999;
}

/* =========================================================
   ZIEL-KUCHENDIAGRAMM (statt Balken wie bei der Gruentenstafette)

   Genau dieselbe Grundtechnik wie der Ziel-Balken bei der
   Gruentenstafette: eine HTML-Box unter den Zwischenzeiten enthaelt
   <div class="at-finish-segbar" style="--p1:..; --p2:..; ...">,
   wobei RaceResult [Feldname]-Formeln direkt in die style="..."-
   Werte einsetzt (kein JS noetig). Bei diesem Rennen sind es 10
   Abschnitte (--p1 bis --p10) statt 6 - die Werte muessen sich NICHT
   zu 100 addieren (koennen z.B. rohe Minutenwerte sein), deshalb wird
   hier immer durch die tatsaechliche SUMME aller 10 Werte geteilt
   statt direkt Prozentwerte anzunehmen.

   conic-gradient() funktioniert genau wie linear-gradient(), nur im
   Kreis statt in einer Linie - dieselbe Cascade von Hart-Kanten-
   Farbstopps wie beim Balken, nur eben in Prozent des Vollkreises.
   Zwei abwechselnde Rot-Toene (dunkel/hell), analog zur
   Gruentenstafette-Loesung.

   TRENNLINIEN: an jeder der 9 inneren Grenzen (c1-c9) wird zusaetzlich
   ein duenner Hintergrundfarb-Sliver eingefuegt (SEP=0.5% auf jeder
   Seite) - dadurch bleiben auch zwei direkt benachbarte Segmente
   derselben Farbe (z.B. wenn ein Segment dazwischen fast 0 ist)
   optisch als zwei getrennte Flaechen erkennbar. An der Nahtstelle
   0%/100% selbst braucht es keinen Sliver, weil Segment 1 (dunkel)
   und Segment 10 (hell) dort ohnehin unterschiedliche Farben haben.

   LEGENDE statt Text-im-Kreis: eine <ul class="at-finish-legend"> mit
   10 <li>Abschnittsname</li> (gleiche Reihenfolge wie --p1..--p10)
   steht neben dem Kreis. Jedes <li> bekommt per ::before ein kleines
   Farbfeld, abwechselnd dunkel/hell nach :nth-child(odd/even) -
   exakt dieselbe Abwechslungs-Logik wie die Kuchenstuecke selbst,
   dadurch immer synchron ohne dass Werte dafuer noetig sind (die
   Farbreihenfolge haengt nur von der Position ab, nicht vom Wert).
   Vermeidet das Ueberlappungs-Risiko von Text direkt im Kreis bei
   sehr kleinen Segmenten. */
.RRParticipantView .at-finish-piebox {
  /* Hier definiert (statt in .at-finish-segbar), weil .at-finish-piebox
     der gemeinsame Elternknoten von Kreis UND Legende ist - CSS-Variablen
     vererben sich nur nach unten im DOM, und die Legende ist ein
     Geschwister-Element vom Kreis, kein Kind davon. */
  --seg1: #68a999;
  --seg2: #ff8c42;
  --seg3: #ffd23f;
  --seg4: #a8e063;
  --seg5: #3ec1d3;
  --seg6: #4d7cfe;
  --seg7: #9b5de5;
  --seg8: #f15bb5;
  --seg9: #8cc4b5;
  --seg10: #3d6b5f;

  display: none;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 28px auto 64px;
  max-width: 480px;
}

.RRParticipantView:not(:has(.RRSplits > div > .predicted)) .at-finish-piebox {
  display: flex;
}

.RRParticipantView .at-finish-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.RRParticipantView .at-finish-legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.RRParticipantView .at-finish-legend li::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(104, 169, 153, 0.35);
}

.RRParticipantView .at-finish-legend li:nth-child(1)::before  { background: var(--seg1); }
.RRParticipantView .at-finish-legend li:nth-child(2)::before  { background: var(--seg2); }
.RRParticipantView .at-finish-legend li:nth-child(3)::before  { background: var(--seg3); }
.RRParticipantView .at-finish-legend li:nth-child(4)::before  { background: var(--seg4); }
.RRParticipantView .at-finish-legend li:nth-child(5)::before  { background: var(--seg5); }
.RRParticipantView .at-finish-legend li:nth-child(6)::before  { background: var(--seg6); }
.RRParticipantView .at-finish-legend li:nth-child(7)::before  { background: var(--seg7); }
.RRParticipantView .at-finish-legend li:nth-child(8)::before  { background: var(--seg8); }
.RRParticipantView .at-finish-legend li:nth-child(9)::before  { background: var(--seg9); }
.RRParticipantView .at-finish-legend li:nth-child(10)::before { background: var(--seg10); }

.RRParticipantView .at-finish-segbar {
  /* --p1 bis --p10 sind die EINZELNEN (nicht kumulierten) Prozent-
     bzw. Anteilswerte pro Segment - werden hier aufsummiert und durch
     die Gesamtsumme geteilt, damit es auch bei Rundungsfehlern (Summe
     nicht exakt 100) sauber funktioniert. */
  --sum: calc(var(--p1, 0) + var(--p2, 0) + var(--p3, 0) + var(--p4, 0) + var(--p5, 0) + var(--p6, 0) + var(--p7, 0) + var(--p8, 0) + var(--p9, 0) + var(--p10, 0));
  --c1: calc(var(--p1, 0) / var(--sum) * 100%);
  --c2: calc((var(--p1, 0) + var(--p2, 0)) / var(--sum) * 100%);
  --c3: calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0)) / var(--sum) * 100%);
  --c4: calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0) + var(--p4, 0)) / var(--sum) * 100%);
  --c5: calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0) + var(--p4, 0) + var(--p5, 0)) / var(--sum) * 100%);
  --c6: calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0) + var(--p4, 0) + var(--p5, 0) + var(--p6, 0)) / var(--sum) * 100%);
  --c7: calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0) + var(--p4, 0) + var(--p5, 0) + var(--p6, 0) + var(--p7, 0)) / var(--sum) * 100%);
  --c8: calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0) + var(--p4, 0) + var(--p5, 0) + var(--p6, 0) + var(--p7, 0) + var(--p8, 0)) / var(--sum) * 100%);
  --c9: calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0) + var(--p4, 0) + var(--p5, 0) + var(--p6, 0) + var(--p7, 0) + var(--p8, 0) + var(--p9, 0)) / var(--sum) * 100%);

  flex: 0 0 auto;
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), 0 0 30px rgba(104, 169, 153, 0.18);
}

.RRParticipantView:not(:has(.RRSplits > div > .predicted)) .at-finish-segbar {
  background: conic-gradient(
    var(--seg1) 0%, var(--seg1) calc(var(--c1) - 0.5%),
    var(--dp-bg) calc(var(--c1) - 0.5%), var(--dp-bg) calc(var(--c1) + 0.5%),
    var(--seg2) calc(var(--c1) + 0.5%), var(--seg2) calc(var(--c2) - 0.5%),
    var(--dp-bg) calc(var(--c2) - 0.5%), var(--dp-bg) calc(var(--c2) + 0.5%),
    var(--seg3) calc(var(--c2) + 0.5%), var(--seg3) calc(var(--c3) - 0.5%),
    var(--dp-bg) calc(var(--c3) - 0.5%), var(--dp-bg) calc(var(--c3) + 0.5%),
    var(--seg4) calc(var(--c3) + 0.5%), var(--seg4) calc(var(--c4) - 0.5%),
    var(--dp-bg) calc(var(--c4) - 0.5%), var(--dp-bg) calc(var(--c4) + 0.5%),
    var(--seg5) calc(var(--c4) + 0.5%), var(--seg5) calc(var(--c5) - 0.5%),
    var(--dp-bg) calc(var(--c5) - 0.5%), var(--dp-bg) calc(var(--c5) + 0.5%),
    var(--seg6) calc(var(--c5) + 0.5%), var(--seg6) calc(var(--c6) - 0.5%),
    var(--dp-bg) calc(var(--c6) - 0.5%), var(--dp-bg) calc(var(--c6) + 0.5%),
    var(--seg7) calc(var(--c6) + 0.5%), var(--seg7) calc(var(--c7) - 0.5%),
    var(--dp-bg) calc(var(--c7) - 0.5%), var(--dp-bg) calc(var(--c7) + 0.5%),
    var(--seg8) calc(var(--c7) + 0.5%), var(--seg8) calc(var(--c8) - 0.5%),
    var(--dp-bg) calc(var(--c8) - 0.5%), var(--dp-bg) calc(var(--c8) + 0.5%),
    var(--seg9) calc(var(--c8) + 0.5%), var(--seg9) calc(var(--c9) - 0.5%),
    var(--dp-bg) calc(var(--c9) - 0.5%), var(--dp-bg) calc(var(--c9) + 0.5%),
    var(--seg10) calc(var(--c9) + 0.5%), var(--seg10) 100%
  );
}

/* =========================================================
   URKUNDEN (RRCertificates) + LINKS (RRLinks)
   Zwei zusaetzliche Boxen am Ende, die es bei der Staffel nicht
   gab - gleiche dunkle Karten-Optik wie der Rest.
   ========================================================= */

.RRParticipantView .RRBox:has(.RRCertificates),
.RRParticipantView .RRBox:has(.RRLinks) {
  padding: 16px 25px 25px !important;
  background: #09090c !important;
  border-top: 1px solid var(--dp-line) !important;
}

.RRParticipantView .RRBox:has(.RRCertificates) > .RRBoxHead,
.RRParticipantView .RRBox:has(.RRLinks) > .RRBoxHead {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.55) !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 10px !important;
}

.RRParticipantView .RRCertificates,
.RRParticipantView .RRLinks {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.RRParticipantView .RRCertificates > div,
.RRParticipantView .RRLinks > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  width: 74px !important;
  padding: 10px 6px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: #111 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 11px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: border-color .15s ease, background .15s ease !important;
}

.RRParticipantView .RRCertificates > div:hover,
.RRParticipantView .RRLinks > div:hover {
  border-color: rgba(104, 169, 153, 0.5) !important;
  background: rgba(104, 169, 153, 0.1) !important;
}

.RRParticipantView .RRCertificates img,
.RRParticipantView .RRLinks img {
  max-width: 32px !important;
  max-height: 32px !important;
  border-radius: 6px !important;
}

/* URKUNDEN - eigene, auffaelligere "Award"-Optik statt der schlichten
   Link-Chips: groessere Vorschau der echten Urkunde wie ein kleines
   Dokument mit Rahmen/Schatten, Siegel-Medaille oben rechts, Karte
   hebt beim Hover leicht ab. Ueberschreibt bewusst die generische
   Chip-Regel oben (gleiche Selektor-Spezifitaet, steht aber weiter
   unten in der Datei) - .RRLinks bleibt unveraendert die schlichte
   Chip-Optik. */
.RRParticipantView .RRCertificates > div {
  position: relative !important;
  width: 112px !important;
  padding: 12px 12px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: linear-gradient(165deg, #1c1414, #0a0a0a) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.RRParticipantView .RRCertificates > div:hover {
  transform: translateY(-5px) rotate(-1deg) !important;
  border-color: rgba(104, 169, 153, 0.55) !important;
  background: linear-gradient(165deg, #241414, #0a0a0a) !important;
  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(104, 169, 153, 0.3) !important;
}

.RRParticipantView .RRCertificates img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

/* Siegel-Medaille oben rechts auf der Vorschau (Kreis mit Stern) */
.RRParticipantView .RRCertificates > div::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--dp-gradient);
  border: 2px solid #0a0a0a;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.RRParticipantView .RRCertificates > div::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l2.7 5.9L21 8.9l-4.5 4.3 1.1 6.1L12 16.2 6.4 19.3l1.1-6.1L3 8.9l6.3-1z" fill="white"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 3;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {
  .Popup-Overlay { overflow: hidden !important; }

  .RRParticipantView {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .RRParticipantView .RRTopBar {
    min-height: 56px !important;
    padding: 4px 7px !important;
  }

  .RRParticipantView .RRBox:has(.RRHTML) > div {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .RRParticipantView .RRSplits .tdSplitTOD,
  .RRParticipantView .RRSplits .tdSplitGun {
    font-size: 15px !important;
  }

  .RRParticipantView .RRSplits .tdSplitSector {
    font-size: 14px !important;
  }

  .RRParticipantView .RRSplits .tdSplitSpeed,
  .RRParticipantView .RRSplits .tdSplitChip,
  .RRParticipantView .RRSplits .tdSplitRO {
    font-size: 11px !important;
  }

  /* Linie, Kreise und Karten in der Handyansicht weiter nach links -
     auf Mobile ist der grosse Desktop-Gutter (Container-Padding 25px
     + Karten-margin-left 58px) reine Platzverschwendung, dadurch
     wird die Kachel deutlich breiter. */
  .RRParticipantView .RRElements > div:has(.RRSplits) {
    padding-left: 14px !important;
    padding-right: 18px !important;
  }

  .RRParticipantView .RRSplits > div::before {
    left: 23px !important;
  }

  .RRParticipantView .RRSplits > div > div:not(:first-child) {
    margin-left: 32px !important;
  }

  .RRParticipantView .RRSplits > div > div:not(:first-child)::before {
    left: -25px !important;
    width: 34px !important;
    height: 34px !important;
  }

  .RRParticipantView .RRSplits > div > div:nth-child(2)::before,
  .RRParticipantView .RRSplits > div > div:last-child::before {
    left: -28px !important;
    width: 40px !important;
    height: 40px !important;
  }
}


/* =========================================================
   ERGEBNISLISTE (Menü + Kopfzeile) – dunkles Design.
   table.MainTable (die Liste mit Platzierungen selbst) bewusst
   NICHT gestylt, bleibt die normale weisse RaceResult-Liste.
   ========================================================= */

#divRRPublish.RRPublish {
  background:
    radial-gradient(circle at 13% 14%, rgba(104, 169, 153, 0.16), transparent 29%),
    radial-gradient(circle at 90% 16%, rgba(104, 169, 153, 0.10), transparent 31%),
    var(--dp-bg) !important;
  color: #f7f7f5 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  padding: 4px !important;
  font-family: "Arial Narrow","Helvetica Neue Condensed","Roboto Condensed",Arial,Helvetica,sans-serif !important;
}

.ListControl {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 18px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
.ListBack {
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  cursor: pointer !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 999px !important;
  padding: 6px 16px 6px 14px !important;
  transition: background .15s ease, border-color .15s ease !important;
}
.ListBack:hover {
  color: #fff !important;
  background: rgba(104, 169, 153,.22) !important;
  border-color: var(--dp-primary-light) !important;
}
.ListBack::before {
  content: "" !important;
  display: inline-block !important;
  width: 8px !important;
  height: 13px !important;
  border: 0 !important;
  transform: none !important;
  font-size: 0 !important;
  flex-shrink: 0 !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M7 1L1.5 6.5L7 12" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
.RRLiveUpdate {
  order: 2 !important;
  margin-left: auto !important;
  color: var(--dp-primary-light) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(104, 169, 153,.5) !important;
  background: rgba(104, 169, 153,.12) !important;
}
html body .ListControl .ListControlPDF {
  display: flex !important;
  order: 2 !important;
  margin-left: auto !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--dp-primary-light) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  padding: 5px 14px 5px 30px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(104, 169, 153,.5) !important;
  background-color: rgba(104, 169, 153,.12) !important;
  background-position: 10px center !important;
  background-repeat: no-repeat !important;
  background-size: 14px auto !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
@media (max-width: 480px) {
  html body .ListControl .ListControlPDF {
    order: 4 !important;
    margin-left: 0 !important;
    flex: 1 1 100% !important;
    justify-content: center !important;
    padding: 7px 14px 7px 30px !important;
  }
}
.ListControlSearch {
  order: 3 !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
.ListControlSearch input[type="text"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  color: #fff !important;
  padding: 8px 14px !important;
}
.ListControlSearch input[type="text"]:focus {
  outline: none !important;
  border-color: var(--dp-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(104, 169, 153,.25) !important;
}
.ListControlSearch button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  background: var(--dp-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.ListControlSearch button.btnClearSearch {
  background: rgba(255,255,255,.1) !important;
  padding: 8px 10px !important;
}
.ListControlSearch button.btnFavorites {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  width: 40px !important;
  padding: 8px !important;
  color: transparent !important;
  position: relative !important;
}
.ListControlSearch button.btnFavorites::before {
  content: "\2605" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 15px !important;
}
.ListControlSearch button.btnFavorites:hover {
  background: rgba(104, 169, 153,.25) !important;
  border-color: var(--dp-primary-light) !important;
}

/* --- Menü ("Ergebnisliste ...") --- */
.Tiles { padding: 6px !important; display: flex !important; flex-wrap: wrap !important; gap: 14px !important; }
.Tile {
  flex: 1 1 300px !important;
  background: var(--dp-panel) !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
table.TilesList { border: 0 !important; width: 100% !important; border-collapse: collapse !important; }
.TileHead {
  background: var(--dp-gradient) !important;
  padding: 14px 18px !important;
}
.TileHeadText {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
}
table.TilesList,
table.TilesList tbody,
table.TilesList tr,
table.TilesList tr.TilesList {
  background: var(--dp-panel) !important;
}
table.TilesList tr.TilesList {
  cursor: pointer !important;
  transition: background .15s ease !important;
}
table.TilesList tr.TilesList td {
  background: transparent !important;
  color: #f0f0f0 !important;
  padding: 17px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}
table.TilesList tr.TilesList:last-child td {
  border-bottom: 0 !important;
}
table.TilesList tr.TilesList:hover,
table.TilesList tr.TilesList:hover td {
  background: rgba(104, 169, 153,.14) !important;
  color: #fff !important;
}
table.TilesList tr.TilesList img {
  filter: invert(1) !important;
}

/* "Powered by RaceResult"-Logo ausblenden */
div[style*="RR_PoweredBy"] {
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Nationenflaggen (Ergebnisliste, "Nat."-Spalte) rund statt eckig.
   RaceResult liefert 4:3-rechteckige Flaggen-SVGs (Klasse "img16")
   - auf ein Quadrat gezwungen + object-fit:cover, damit beim Runden
   nichts verzerrt wird. */
img.img16 {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Nationenflagge im Teilnehmerkopf (neben "| M30 | Verein"), ebenfalls
   rund - hat keine eigene Klasse (nur ein natives style="width:...px"
   von RaceResult), deshalb ueber .RRHTML img angesprochen. Hoehe zum
   Text daneben per vertical-align:middle ausgerichtet. */
.RRParticipantView .RRHTML img {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  vertical-align: middle !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75) !important;
}

/* Seiten-Scrollbalken */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(104, 169, 153,.55) #0e0e0e;
}
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #0e0e0e; }
body::-webkit-scrollbar-thumb {
  background: rgba(104, 169, 153,.55);
  border-radius: 999px;
  border: 2px solid #0e0e0e;
}
body::-webkit-scrollbar-thumb:hover { background: var(--dp-primary); }

@media (max-width: 620px) {
  .ListControl { padding: 12px !important; gap: 10px !important; }
}


/* =========================================================
   FORTSCHRITTSBALKEN - GENAUE FUELLBREITE

   CSS kennt weder Kilometer noch Division. Um die Fuellbreite
   trotzdem exakt (nicht geschaetzt) an die tatsaechliche Anzahl
   Zwischenzeiten-Karten dieses konkreten Rennens anzupassen,
   wird hier jede moegliche Kombination aus
     N = Gesamtzahl Zwischenzeiten-Karten (Start...Ziel)
     C = Anzahl bereits erledigter Karten (nicht .predicted)
   als eigene Regel definiert (N von 4 bis 19 - deckt Viertel-,
   Halb-, Dreiviertel- und Marathon ab, geprueft an echten Daten
   mit N=12). Jede Regel erkennt sich selbst ueber :has() an der
   Zwischenzeiten-Liste - keine manuelle Zuordnung noetig, das
   passende Rennen greift automatisch die passende Regel.
   ========================================================= */

.RRParticipantView:has(.RRSplits > div > div:nth-child(4)):not(:has(.RRSplits > div > div:nth-child(5))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(4)):not(:has(.RRSplits > div > div:nth-child(5))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(4)):not(:has(.RRSplits > div > div:nth-child(5))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(4)):not(:has(.RRSplits > div > div:nth-child(5))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(4)):not(:has(.RRSplits > div > div:nth-child(5))):has(.RRSplits > div > div:nth-child(4):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(4)):not(:has(.RRSplits > div > div:nth-child(5))):has(.RRSplits > div > div:nth-child(4):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }

.RRParticipantView:has(.RRSplits > div > div:nth-child(5)):not(:has(.RRSplits > div > div:nth-child(6))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(5)):not(:has(.RRSplits > div > div:nth-child(6))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.25) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(5)):not(:has(.RRSplits > div > div:nth-child(6))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(5)):not(:has(.RRSplits > div > div:nth-child(6))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(5)):not(:has(.RRSplits > div > div:nth-child(6))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(5)):not(:has(.RRSplits > div > div:nth-child(6))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.75) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(5)):not(:has(.RRSplits > div > div:nth-child(6))):has(.RRSplits > div > div:nth-child(5):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(5)):not(:has(.RRSplits > div > div:nth-child(6))):has(.RRSplits > div > div:nth-child(5):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }

.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(6):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(6):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }

.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(7):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(7):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }

.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1429) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2857) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4286) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5714) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7143) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8571) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(8):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(8):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }

.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.125) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.25) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.375) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.625) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.75) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.875) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(9):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(9):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }

.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1111) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2222) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4444) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5556) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7778) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8889) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(10):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(10):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }

.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(11):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(11):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }

.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.0909) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1818) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2727) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3636) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4545) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5455) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6364) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7273) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8182) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9091) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(12):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(12):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }

.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.0833) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.25) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4167) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5833) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.75) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9167) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(13):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(13):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }

.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.0769) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1538) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2308) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3077) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3846) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4615) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5385) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6154) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6923) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7692) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8462) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9231) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(14):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(14):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }

.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.0714) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1429) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2143) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2857) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3571) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4286) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5714) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6429) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7143) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7857) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8571) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9286) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(15):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(15):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }

.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.0667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(15):not(.predicted)):has(.RRSplits > div > div:nth-child(16).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(15):not(.predicted)):has(.RRSplits > div > div:nth-child(16).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(16):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(16):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }

.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.0625) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.125) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1875) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.25) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3125) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.375) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4375) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5625) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.625) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6875) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.75) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8125) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(15):not(.predicted)):has(.RRSplits > div > div:nth-child(16).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(15):not(.predicted)):has(.RRSplits > div > div:nth-child(16).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.875) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(16):not(.predicted)):has(.RRSplits > div > div:nth-child(17).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(16):not(.predicted)):has(.RRSplits > div > div:nth-child(17).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9375) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(17):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(17):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }

.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.0588) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1176) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1765) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2353) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2941) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3529) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4118) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4706) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5294) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5882) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6471) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7059) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7647) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(15):not(.predicted)):has(.RRSplits > div > div:nth-child(16).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(15):not(.predicted)):has(.RRSplits > div > div:nth-child(16).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8235) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(16):not(.predicted)):has(.RRSplits > div > div:nth-child(17).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(16):not(.predicted)):has(.RRSplits > div > div:nth-child(17).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8824) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(17):not(.predicted)):has(.RRSplits > div > div:nth-child(18).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(17):not(.predicted)):has(.RRSplits > div > div:nth-child(18).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9412) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(18):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(18):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }

.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.0556) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1111) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2222) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2778) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3889) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4444) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5556) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6111) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7222) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(15):not(.predicted)):has(.RRSplits > div > div:nth-child(16).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(15):not(.predicted)):has(.RRSplits > div > div:nth-child(16).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7778) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(16):not(.predicted)):has(.RRSplits > div > div:nth-child(17).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(16):not(.predicted)):has(.RRSplits > div > div:nth-child(17).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(17):not(.predicted)):has(.RRSplits > div > div:nth-child(18).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(17):not(.predicted)):has(.RRSplits > div > div:nth-child(18).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8889) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(18):not(.predicted)):has(.RRSplits > div > div:nth-child(19).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(18):not(.predicted)):has(.RRSplits > div > div:nth-child(19).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9444) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(19):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(19):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }




/* =========================================================
   POSITION-RINGE (Langsamer/Schneller-Donut, wie RaceResult-App)
   -------------------------------------------------------------
   Diese Datei ist ein ZUSATZ zu regensburg-marathon-style.css -
   bitte den Inhalt unten an eure bestehende, funktionierende CSS
   anhaengen (nicht ersetzen).

   Braucht NUR zwei bereits vorhandene RaceResult-Felder:
     AKPl      - Platzierung in der Altersklasse (z.B. 3)
     AKPl.max  - Gesamtzahl Teilnehmer in der Altersklasse (z.B. 73)

   Die Ring-Fuellung wird komplett per CSS calc() berechnet (kein
   neues Formel-Feld noetig):
     Schneller-Ring = (Platz - 1) / Gesamt   -> Anteil der Leute vor dir
     Langsamer-Ring = (Gesamt - Platz) / Gesamt -> Anteil der Leute hinter dir

   Fuer die PROZENTZAHL IN DER MITTE der Ringe braucht es zusaetzlich
   zwei RaceResult-Felder, die den fertigen Prozentwert als TEXT
   ausgeben (CSS kann berechnete Zahlen nur als Ring-Fuellung
   darstellen, nicht als Text):
     T2100        - Schneller-Prozentsatz (schon vorhanden)
     100-[T2100]  - Langsamer-Prozentsatz (neues Formel-Feld)
   ========================================================= */

.RRParticipantView .at-position-box {
  margin: 28px auto 40px;
  max-width: 480px;
  text-align: center;
}

.RRParticipantView .at-position-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--dp-text);
  margin-bottom: 10px;
}

.RRParticipantView .at-position-subtitle {
  font-size: 14px;
  color: var(--dp-muted);
  margin-bottom: 28px;
}

.RRParticipantView .at-position-subtitle strong {
  color: var(--dp-primary-light);
}

.RRParticipantView .at-position-placement {
  font-size: 13px;
  font-weight: 700;
  color: var(--dp-muted);
  margin-bottom: 24px;
}

.RRParticipantView .at-position-placement strong {
  color: var(--dp-text);
}

.RRParticipantView .at-position-rings {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
}

.RRParticipantView .at-position-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.RRParticipantView .at-position-ring {
  --schneller: calc((var(--place, 1) - 1) / var(--total, 1) * 100%);
  --langsamer: calc((var(--total, 1) - var(--place, 1)) / var(--total, 1) * 100%);

  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.RRParticipantView .at-position-ring.is-schneller {
  background: conic-gradient(var(--dp-primary-dark) var(--schneller), rgba(255, 255, 255, 0.08) 0);
}

.RRParticipantView .at-position-ring.is-langsamer {
  background: conic-gradient(var(--dp-primary-dark) var(--langsamer), rgba(255, 255, 255, 0.08) 0);
}

.RRParticipantView .at-position-ring::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: var(--dp-bg);
}

.RRParticipantView .at-position-value {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--dp-text);
}

.RRParticipantView .at-position-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--dp-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.RRParticipantView .at-position-count {
  font-size: 12px;
  color: var(--dp-muted);
  margin-top: -6px;
}



/* =========================================================
   PACE-VERLAUF (Balkendiagramm pro Abschnitt, wie bei Strava)
   -------------------------------------------------------------
   Diese Datei ist ein ZUSATZ zur bestehenden CSS - bitte anhaengen,
   nicht ersetzen.

   Braucht PRO ABSCHNITT zwei RaceResult-Felder:
     --pace  = Pace als reine DEZIMALZAHL (Minuten/km, z.B. 3.83
               fuer 3:50 min/km) - neues Formel-Feld, steuert nur
               unsichtbar die Balkenhoehe
     Text im <span> = das schon vorhandene FORMATIERTE Pace-Feld
               (z.B. "3:50"), wird 1:1 als Beschriftung angezeigt

   Die Balkenhoehe wird automatisch relativ zur schnellsten/
   langsamsten Pace DIESES Laeufers skaliert (CSS min()/max()) -
   kein fester Wertebereich noetig, funktioniert fuer jeden Laeufer
   unabhaengig von seinem Tempo.

   Je LAENGER der Balken, desto LANGSAMER dieser Abschnitt (genau
   wie bei Strava: kuerzerer Balken = weniger Zeit = schneller).
   ========================================================= */

.RRParticipantView .at-pace-box {
  margin: 28px auto 40px;
  max-width: 640px;
}

.RRParticipantView .at-pace-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--dp-text);
  text-align: center;
  margin-bottom: 24px;
}

.RRParticipantView .at-pace-chart {
  --min: min(var(--pace1, 5), var(--pace2, 5), var(--pace3, 5), var(--pace4, 5), var(--pace5, 5), var(--pace6, 5), var(--pace7, 5), var(--pace8, 5), var(--pace9, 5), var(--pace10, 5));
  --max: max(var(--pace1, 5), var(--pace2, 5), var(--pace3, 5), var(--pace4, 5), var(--pace5, 5), var(--pace6, 5), var(--pace7, 5), var(--pace8, 5), var(--pace9, 5), var(--pace10, 5));
  --range: calc(var(--max) - var(--min) + 0.001);

  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 160px;
  padding: 0 4px;
  border-bottom: 2px solid var(--dp-line);
}

.RRParticipantView .at-pace-bar {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: calc(20% + (var(--pace, var(--min)) - var(--min)) / var(--range) * 80%);
  min-height: 20%;
  background: linear-gradient(180deg, var(--dp-primary-light), var(--dp-primary-dark));
  border-radius: 6px 6px 2px 2px;
  position: relative;
  padding-top: 6px;
}

.RRParticipantView .at-pace-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--dp-text);
  white-space: nowrap;
}

.RRParticipantView .at-pace-labels {
  display: flex;
  gap: 6px;
  padding: 8px 4px 0;
}

.RRParticipantView .at-pace-label {
  flex: 1 1 0;
  font-size: 10px;
  color: var(--dp-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}