/* Schriftart fuer die Ergebnisseite: Barlow / Barlow Condensed (Google Fonts).
   @import muss ganz oben in der Datei stehen. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600;700&display=swap');

table.divDetailsParent div.divDetailsInner > div > div:first-child {
   background: #000000 !important;
    text-align: center !important;
    font-size: 13px !important;
}
.RRPublish > div.Tiles > div > div {
    color: #ffffff !important;
    background: #000000 !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-weight: bold !important;
}

.RRPublish > div.SelectorParent > div.SelectorMenu > div > div:nth-child(1) {
    background: #000000 !important;
    color: #ffffff !important;
  
}

.RRPublish > div.SelectorParent > div.SelectorMenu > div.selectorResult > div:nth-child(1) {
    background: #000000 !important;
    color: #ffffff !important;
}
.RRPublish > div.SelectorParent > div.SelectorMenu > div > div:nth-child(1) {
    background: #000000 !important;
    color: #ffffff !important;
}

.RRPublish > div.SelectorParent > div.SelectorMenu > div.selectorResult > div:nth-child(1) {
    background: #000000 !important;
    color: #ffffff !important;
}
.RRPublish > div.Tiles > div {
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}
@media only screen and (max-width: 600px) {
    .RRPublish > div.Tiles > div {
        margin-bottom: 16px !important;
    }
.RRPublish > div.Tiles > div {
    border: none !important;
}
}
@media only screen and (max-width: 640px) {
    .RRPublish a.aShowAll {
        background: #000000 !important;
        color: #ffffff !important;
    }
}
.RRPublish a.aShowAll {
    font-size: 1em !important;
    font-style: italic;
    color: #ffffff !important;
    cursor: pointer;
    line-height: 200%;
    margin-right: 3px;
   background: #1545ff !important;
    border-radius: 4px;
}
.RRPublish > div.ListControl > div.ListControlSearch > button.btnSearch:disabled {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    cursor: default;
}
.RRPublish > div.ListControl > div.ListControlSearch > button.btnClearSearch {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    padding: 5px;
    height: 27px;
    cursor: pointer;
    width: 10%;
    border-radius: 0 4px 4px 0;
    border-left: 0;
}
p {
    font-size: 1.5em;
    line-height: 1.5em;
    margin: 0.2em 0 0;
    background: #000000 !important;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
}
@media screen and (max-width: 500px) {
    h1 {
        font-size: 150%;
        color: #ffffff;
        padding: 9px;
    }
}
nav {
    background: #000000 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
table.divDetailsParent div.divDetailsSocial > div:nth-child(2) {
    display: none !important;
}
table.divDetailsParent div.divDetailsSocial {
    display: none !important;
}
table.divDetailsParent div.divDetailsCertificates > div:nth-child(2) {
    text-align: center;
}
table.divDetailsParent div.divDetailsLinks > div {
    padding: 4px;
    text-align: center;
}
table.divDetailsParent div.divDetailsLinks > div:nth-child(2) img {
    max-height: 160px;
    max-width: 250px;
    border-radius: 5px;
}
.RRPublish > div.Tiles > div > table > tbody > tr > td {
    padding: 3px 3px 3px 8px;
    font-size: 0.95em;
    cursor: pointer;
    text-align: left;
    font-weight: bold !important;
}

/* =========================================================
   ERGEBNISSEITE DACKEL RACE (Kacheln + Listen)
   ========================================================= */

/* =========================================================
   GRUNDVARIABLEN - Farben Dackel Race (Lila #762762 / Gelb #FDF157)
   ========================================================= */

:root {
  --dp-bg: #170c15;         /* dunkles Aubergine */
  --dp-panel: #231220;
  --dp-panel-2: #2b1727;

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

  --dp-primary: #fdf157;       /* Gelb */
  --dp-primary-light: #fdf157;
  --dp-primary-dark: #d8cd3a;

  --dp-predicted: #ff8f8f;

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

  /* Exakt der Verlauf, den eure Anmeldeseite oben schon fuer Buttons/
     Panibox-Header verwendet (.ym-button, .panibox h6 etc.: 45deg,
     #762762 -> #9d3b84), damit Namensbalken (kommt von der Seiten-CSS)
     und Gesamtzeit-Karte (kommt von hier) farblich zusammenpassen. */
  --dp-gradient: linear-gradient(45deg, #762762, #9d3b84);
}


/* =========================================================
   ERGEBNISLISTE (Menue-Kacheln + Kopfzeile) - dunkles Design (Layout wie beim Perlcross, Farben Lila/Gelb).
   Betrifft nur die Ergebnis-Uebersicht und die Listen. Die Teilnehmer-
   Detailansicht (Popup) wird hier bewusst NICHT veraendert.
   table.MainTable (die Liste mit Platzierungen selbst) bleibt die
   normale weisse RaceResult-Liste, nur mit roten Gruppenzeilen.
   ========================================================= */

#divRRPublish.RRPublish {
  background:
    radial-gradient(circle at 13% 14%, rgba(118, 39, 98, 0.55), transparent 32%),
    radial-gradient(circle at 90% 16%, rgba(118, 39, 98, 0.40), transparent 34%),
    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(253,241,87,.22) !important;
  border-color: var(--dp-primary-light) !important;
}
/* RaceResult rendert seit dem Plattform-Update zusaetzlich einen
   eigenen Pfeil ("<span>❮</span>") vor "zurueck" - zusammen mit
   unserem eigenen ::before-Pfeil ergab das zwei Pfeile nebeneinander
   und verschob (durch die unerwartete Breite) auch das Mobil-Layout. */
.ListBack > span {
  display: none !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;
}
/* RaceResult nennt die Klasse mittlerweile ".LiveUpdate-Marker" statt
   ".RRLiveUpdate" (Plattform-Update) - dieselbe Komponente wird
   ZWEIFACH verwendet: als Text-Badge oben in der Liste
   (".ListControlWithLiveUpdate"), und als reines Icon in der
   Detail-Popup-Topbar (".RRParticipantViewLiveUpdateMarker"). Zwei
   getrennte, eingegrenzte Regeln statt einer globalen. */
.ListControlWithLiveUpdate .LiveUpdate-Marker {
  order: 2 !important;
  margin-left: auto !important;
  display: flex !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: .04em !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(253,241,87,.5) !important;
  background: rgba(253,241,87,.12) !important;
}
.ListControlWithLiveUpdate .LiveUpdate-Marker .RRLiveUpdateIcon {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}
.ListControlWithLiveUpdate .LiveUpdate-Marker .RRLiveUpdateIcon .bar {
  fill: var(--dp-primary-light) !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(253,241,87,.5) !important;
  background-color: rgba(253,241,87,.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: #120a11 !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(253,241,87,.25) !important;
}
.ListControlSearch button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  background: var(--dp-primary) !important;
  color: #2a0f26 !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(253,241,87,.25) !important;
  border-color: var(--dp-primary-light) !important;
}

/* --- Menue ("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: var(--dp-primary) !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(253,241,87,.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;
}

/* "Powered by Datasport"-Logo unten in der Ergebnisliste kommt als
   JPG mit weissem Hintergrund (JPG kann keine Transparenz) - reisst
   auf dunklem Grund einen hellen Kasten auf. Bild durch dasselbe
   saubere, transparente SVG-Logo ersetzen, das oben in der Topbar
   schon verwendet wird. */
.RRPublish img[src*="logo-standard"],
.RRPublish img[src*="logo_standard"] {
  content: url('https://static.datasport.de/bilder/datasport.svg') !important;
  max-height: 18px !important;
  width: auto !important;
  opacity: 0.85 !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;
}

/* Seiten-Scrollbalken - bewusst per :has() auf Seiten mit dem
   RaceResult-Ergebnis-Widget eingegrenzt (".RRPublish"), damit auf
   der Anmeldeseite (die eine gemeinsame CSS-Datei mit dieser hier
   teilt, aber kein ".RRPublish" enthaelt) garantiert nichts von
   dieser Datei durchschlaegt, selbst nicht der Scrollbalken. */
html:has(.RRPublish) {
  scrollbar-width: thin;
  scrollbar-color: rgba(253,241,87,.55) #120a11;
}
body:has(.RRPublish)::-webkit-scrollbar { width: 10px; }
body:has(.RRPublish)::-webkit-scrollbar-track { background: #120a11; }
body:has(.RRPublish)::-webkit-scrollbar-thumb {
  background: rgba(253,241,87,.55);
  border-radius: 999px;
  border: 2px solid #120a11;
}
body:has(.RRPublish)::-webkit-scrollbar-thumb:hover { background: var(--dp-primary); }

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

/* =========================================================
   KATEGORIE-FILTER (neue RaceResult-Struktur)
   -------------------------------------------------------------
   RaceResult hat den Filter umgebaut: statt .SelectorParent/
   .SelectorMenu gibt es jetzt .RRSelectorParent mit einem nativen
   <select> (.RRSelectorDesktop) bzw. einem eigenen Overlay fuer die
   Handyansicht (.RRSelectorMobile + .RRFilterPopupContent). 
      ========================================================= */
.RRSelectorParent {
  background: transparent !important;
  padding: 6px 6px 10px !important;
}
.RRSelectorParent .hasLabel {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  /* Farben exakt wie die "LIVE UPDATE AKTIV"-Pille (.LiveUpdate-Marker):
     gelb getoenter Grund, gelber Rand, gelbe Schrift. Blur/Filter/
     Transparenz bewusst abgeschaltet (verwaschene Optik vermeiden). */
  background: rgba(253, 241, 87, 0.12) !important;
  border: 1px solid rgba(253, 241, 87, 0.5) !important;
  border-radius: 14px !important;
  /* links/rechts gleich viel Platz (Pfeil sitzt absolut rechts), damit
     der Text wirklich mittig steht */
  padding: 10px 44px 11px !important;
  align-items: center !important;
  text-align: center !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
.RRSelectorParent .hasLabel:hover {
  background: rgba(253, 241, 87, 0.22) !important;
  border-color: var(--dp-primary-light) !important;
}
.RRSelectorParent .hasLabel > span {
  display: block !important;
  position: static !important;
  background: none !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
.RRSelectorMobile .hasLabel > div {
  background: none !important;
  color: var(--dp-primary-light) !important;
  -webkit-text-fill-color: var(--dp-primary-light) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  padding: 0 !important;
  text-align: center !important;
}
/* Das <select> deckt die GANZE Box ab (absolut, inset 0) - sonst
   oeffnete nur ein Klick auf den schmalen Text-Bereich das Menue, ein
   Klick auf Pfeil/Rand/Label nichts. Dafuer braucht die Box selbst
   Mindestbreite/-hoehe (das Select bestimmt sie nicht mehr). */
.RRSelectorDesktop .hasLabel {
  min-width: min(380px, 100%) !important;
  min-height: 66px !important;
}
.RRSelectorDesktop .hasLabel select {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 26px 44px 0 !important;
  z-index: 2 !important;
  text-align: center !important;
  text-align-last: center !important;
  background: transparent !important;
  color: var(--dp-primary-light) !important;
  -webkit-text-fill-color: var(--dp-primary-light) !important;
  border: 0 !important;
  outline: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  -webkit-appearance: none;
  appearance: none;
}
.RRSelectorDesktop .hasLabel select option {
  background: #231220;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.RRSelectorParent .hasLabel::after {
  content: "" !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  width: 9px !important;
  height: 9px !important;
  margin-top: -7px !important;
  background: none !important;
  border-right: 2px solid var(--dp-primary-light) !important;
  border-bottom: 2px solid var(--dp-primary-light) !important;
  transform: rotate(45deg) !important;
}

/* Variante OHNE Label (z.B. Startlisten): dort fehlt .hasLabel, der
   Filter ist nur "div > select" (Desktop) bzw. "div > div" (Handy) und
   hatte nur RaceResults graue Schrift (#444) auf unserem dunklen Grund
   - praktisch unsichtbar. Gleicher Look wie die Variante mit Label. */
.RRPublish .RRSelectorDesktop > div:not(.hasLabel),
.RRPublish .RRSelectorMobile > div:not(.hasLabel) {
  position: relative !important;
  box-sizing: border-box !important;
  min-width: 260px;
  background: rgba(253, 241, 87, 0.12) !important;
  border: 1px solid rgba(253, 241, 87, 0.5) !important;
  border-radius: 14px !important;
  padding: 12px 44px !important;
  text-align: center !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
.RRPublish .RRSelectorDesktop > div:not(.hasLabel):hover,
.RRPublish .RRSelectorMobile > div:not(.hasLabel):hover {
  background: rgba(253, 241, 87, 0.22) !important;
  border-color: var(--dp-primary-light) !important;
}
.RRPublish .RRSelectorMobile > div:not(.hasLabel) > div {
  background: none !important;
  color: var(--dp-primary-light) !important;
  -webkit-text-fill-color: var(--dp-primary-light) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  padding: 0 !important;
  text-align: center !important;
}
/* Auch hier deckt das <select> die ganze Box ab (ganze Box klickbar) */
.RRPublish .RRSelectorDesktop > div:not(.hasLabel) {
  min-width: min(380px, 100%) !important;
  min-height: 46px !important;
}
.RRPublish .RRSelectorDesktop > div:not(.hasLabel) select {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 0 44px !important;
  z-index: 2 !important;
  text-align: center !important;
  text-align-last: center !important;
  background: transparent !important;
  color: var(--dp-primary-light) !important;
  -webkit-text-fill-color: var(--dp-primary-light) !important;
  border: 0 !important;
  outline: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  -webkit-appearance: none;
  appearance: none;
}
.RRPublish .RRSelectorDesktop > div:not(.hasLabel) select option {
  background: #231220;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.RRPublish .RRSelectorDesktop > div:not(.hasLabel)::after,
.RRPublish .RRSelectorMobile > div:not(.hasLabel)::after {
  content: "" !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  width: 9px !important;
  height: 9px !important;
  margin-top: -7px !important;
  background: none !important;
  border-right: 2px solid var(--dp-primary-light) !important;
  border-bottom: 2px solid var(--dp-primary-light) !important;
  transform: rotate(45deg) !important;
}

/* Aufgeklapptes Desktop-Dropdown: das native Browser-Menue zeigt die
   Hover-/Auswahlfarbe in System-Blau und laesst sich normal nicht
   umfaerben. Chrome/Edge (ab ~135) bieten dafuer "appearance:
   base-select" - dann ist die Liste frei stylbar (dunkle Karte, Hover
   rot, aktive Zeile im Datasport-Rot-Verlauf). Browser ohne diese
   Funktion (z.B. Firefox/Safari) ignorieren den ganzen Block und
   zeigen weiter das normale native Menue. */
@supports (appearance: base-select) {
  .RRSelectorDesktop select,
  .RRSelectorDesktop select::picker(select) {
    appearance: base-select !important;
  }
  .RRSelectorDesktop select {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .RRSelectorDesktop select::picker-icon {
    display: none !important;
  }
  .RRSelectorDesktop select::picker(select) {
    background: #231220;
    border: 1px solid rgba(253, 241, 87, 0.5);
    border-radius: 12px;
    padding: 6px;
    margin-top: 6px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  }
  .RRSelectorDesktop select option {
    background: transparent !important;
    color: #f0f0f0 !important;
    -webkit-text-fill-color: #f0f0f0 !important;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
  }
  .RRSelectorDesktop select option:hover,
  .RRSelectorDesktop select option:focus-visible {
    background: rgba(253, 241, 87, 0.38) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    outline: none;
  }
  .RRSelectorDesktop select option:checked {
    background: linear-gradient(45deg, #762762, #9d3b84) !important;
    color: var(--dp-primary) !important;
    -webkit-text-fill-color: var(--dp-primary) !important;
  }
  .RRSelectorDesktop select option::checkmark {
    display: none;
  }
}

/* Handy-Overlay mit allen Wettbewerben */
.RRFilterPopupContent > div {
  background: var(--dp-panel) !important;
  color: #f0f0f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.RRFilterPopupContent > div:hover {
  background: rgba(253, 241, 87, 0.16) !important;
  border-color: var(--dp-primary-light) !important;
  color: #fff !important;
}
.RRFilterPopupContent > div[data-selected="true"] {
  background: linear-gradient(45deg, #762762, #9d3b84) !important;
  border-color: transparent !important;
  color: var(--dp-primary) !important;
  font-weight: 800 !important;
}

/* =========================================================
   LILA GRUPPENZEILEN + "Mehr anzeigen"-KNOEPFE
   -------------------------------------------------------------
   Die Gruppenzeilen der Liste (z.B. Klassen-Ueberschriften) kommen
   in der RaceResult-Standardfarbe (Grau). Hier explizit gesetzt, damit es unabhaengig von der
   RaceResult-Markenfarbe immer zum Rest passt.
   ========================================================= */
table.MainTable td.listGrouping {
  background: #762762 !important;
  color: var(--dp-primary) !important;
}
.RRPublish a.aShowAll {
  background: linear-gradient(45deg, #762762, #9d3b84) !important;
  color: var(--dp-primary) !important;
  border-radius: 4px;
}
@media only screen and (max-width: 640px) {
  .RRPublish a.aShowAll {
    background: linear-gradient(45deg, #762762, #9d3b84) !important;
  }
}

/* Handy-Overlay der Wettbewerbsauswahl dunkel + unscharf - nur dieses
   Overlay (erkennbar am Inhalt .RRFilterPopupContent), damit das Popup
   der Teilnehmer-Detailansicht unveraendert bleibt. */
.Popup-Overlay:has(.RRFilterPopupContent) {
  background: rgba(0, 0, 0, 0.82) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.Popup-Overlay:has(.RRFilterPopupContent) > div {
  background: none !important;
  box-shadow: none !important;
}

/* Schriftart: Barlow fuer alles in der Ergebnisseite, Barlow Condensed
   fuer Ueberschriften/Knoepfe (sportlich, gut lesbar auch auf dem Handy) */
#divRRPublish.RRPublish,
#divRRPublish.RRPublish table,
#divRRPublish.RRPublish input,
#divRRPublish.RRPublish button,
#divRRPublish.RRPublish select {
  font-family: "Barlow", "Open Sans", Arial, sans-serif !important;
}
#divRRPublish.RRPublish .TileHeadText,
#divRRPublish.RRPublish .ListBack,
#divRRPublish.RRPublish .LiveUpdate-Marker,
#divRRPublish.RRPublish .ListControlPDF,
#divRRPublish.RRPublish .ListControlSearch button,
#divRRPublish.RRPublish table.MainTable td.listGrouping,
#divRRPublish.RRPublish a.aShowAll,
.RRSelectorParent select,
.RRSelectorParent .hasLabel > span,
.RRFilterPopupContent > div {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif !important;
}
#divRRPublish.RRPublish .TileHeadText {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}
#divRRPublish.RRPublish table.TilesList tr.TilesList td {
  font-size: 16px !important;
  font-weight: 500 !important;
}
#divRRPublish.RRPublish table.MainTable td,
#divRRPublish.RRPublish table.MainTable th {
  font-size: 14.5px;
}
#divRRPublish.RRPublish table.MainTable th {
  font-weight: 600;
}
/* Kachel-Kopfzeilen: die bisherige CSS faerbt sie schwarz
   (.RRPublish > div.Tiles > div > div) - hier mit hoeherer Prioritaet
   in Lila ueberschrieben. */
.Tiles > .Tile .TileHead {
  background: var(--dp-gradient) !important;
  color: var(--dp-primary) !important;
}

/* Weisse Ecken: die Seitenvorlage legt hinter das Ergebnis-Widget eine
   halbtransparent weisse Box (.panibox). Unser Widget hat unten runde
   Ecken, dahinter blitzte das Weiss durch. Box (und ihr Schatten) wird
   nur dort transparent, wo das Ergebnis-Widget drin sitzt. */
.ym-gbox.panibox:has(> .border_10 > #divRRPublish) {
  background: transparent !important;
  box-shadow: none !important;
}

/* Event-Logo im Seitenkopf: das hinterlegte Bild ist jetzt ein grosses
   16:9-Motiv (1152 x 648 px) und wurde in Originalgroesse angezeigt.
   Auf eine handliche Breite begrenzen, Seitenverhaeltnis bleibt. */
img.logo1 {
  width: 300px !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Kachel-Zeilen: die erste (leere) Spalte der Liste liess links ca. 75 px
   Leerraum - Text beginnt jetzt bei normalem Abstand. */
table.TilesList tr.TilesList td:first-child {
  width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Handy-/Tablet-Ansicht Seitenkopf: das Hintergrundfoto (Dackel links und
   rechts, blaue Spalte in der Mitte) soll sichtbar bleiben. Die Spalte
   belegt ca. 13 % bis 86 % der Breite, das Foto ist 3:2 hoch und beginnt
   unter der schwarzen Leiste (40 px). Der Kopf ist deshalb genau so hoch
   wie das sichtbare Foto, Logo + Titel stehen mittig in der Spalte. */
@media (max-width: 700px) {
  header {
    background: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    height: calc(66.67vw - 40px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: relative !important;
  }
  /* weicher Uebergang vom Foto in die dunkle Ergebnis-Flaeche */
  header::after {
    content: "" !important;
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(180deg, rgba(23, 12, 21, 0) 0%, #170c15 100%) !important;
    pointer-events: none;
  }
  img.logo1 {
    float: none !important;
    display: block !important;
    width: 62vw !important;
    max-width: 62vw !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 0 0 2px #fdf157, 0 12px 28px rgba(0, 0, 0, 0.55) !important;
    position: relative;
    z-index: 1;
  }
  header h1 {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif !important;
    font-weight: 800 !important;
    font-size: 150% !important;
    line-height: 1.2 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
  }
  header h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 6px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, #762762, #fdf157);
  }
}