/* =========================================================
   FRANKFURT CITY TRIATHLON 2027 – ANMELDESEITE
   Modernes Design in den Farben von Datasport Schweiz:
     Rot #D6001D, Dunkelrot #A50016, Schwarz #141414,
     Hellgrau #F7F7F7 / #E4E6EB, Grau #525252
   Schriftart bleibt die von Datasport (Open Sans).
   ========================================================= */

:root {
  --rm-red: #d6001d;
  --rm-red-dark: #a50016;
  --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="%23d6001d" 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="%23d6001d" 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="%23d6001d" 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="%23d6001d" 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="%23d6001d" 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="%23d6001d" 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="%23d6001d"/></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="%23d6001d" 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="%23d6001d" 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(255, 0, 0, 0.25);
}

/* 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(255, 0, 0, 0.25);
}

.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(214, 0, 29, 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(214, 0, 29, 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%23d6001d%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
   Greift nur, wenn im System die Kachel-Ansicht eingestellt ist
   (Datasport liefert dann section.headerauswahl). Ohne Kacheln
   sieht die Startseite aus wie oben (Wettbewerbsliste).

   Pro Wettbewerb:
   - Kachelbild hinterlegt (kachel_XXXXX.png) -> Bild fuellt die Kachel
   - kein Kachelbild hinterlegt -> eigene Kachel-Grafik in den
     Datasport-Farben
   Wettbewerbsname und Distanz kommen immer 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;
}

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

/* KEIN display hier setzen - Datasport blendet die Wettbewerbs-
   Kacheln auf der ersten Seite per display:none aus und erst nach
   Klick auf "Einzelanmeldung" ein */
.headerauswahl a {
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  text-decoration: none;
  background: transparent !important;
}

/* Kopfbereich genau so breit wie die Kachel-Reihe darunter: Logo
   buendig mit der linken Kachel. Breite der Reihe = so viele 330-px-
   Kacheln (+ 20 px Abstand), wie in den Kachelbereich passen
   (max. 1100 px abzgl. 2 x 16 px Rand). */
@media screen and (min-width: 768px) {
  body:has(.headerauswahl) header {
    max-width: 1030px;   /* Ersatz fuer aeltere Browser: 3 Kacheln */
    max-width: calc(round(down, min(100%, 1100px) - 32px + 20px, 350px) - 20px);
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }
}

/* Ersatz-Grafik fuer Kacheln ohne eigenes Bild (bzw. nicht ladbares
   Kachelbild):
   1. kachel-standard.png aus dem Event-Ordner im Portal (gleicher
      Ordner wie diese style.css) - falls hochgeladen
   2. sonst die eingebaute Grafik (Farbverlauf mit feinen Linien) */
section.headerauswahl {
  --kachel-grafik:
    url("kachel-standard.png") center / cover no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 210' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='2'%3E%3Cpath d='M-10 150 C 80 110 160 190 340 120'/%3E%3Cpath d='M-10 170 C 90 130 170 210 340 140'/%3E%3Cpath d='M-10 190 C 100 150 180 230 340 160'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(circle at 85% 15%, rgba(214, 0, 29, 0.55), rgba(214, 0, 29, 0) 55%),
    linear-gradient(135deg, var(--rm-dark) 0%, var(--rm-dark-2) 60%, var(--rm-red-dark) 100%);
}

.headerauswahl .headerbutton {
  position: relative;
  display: block !important;
  width: 330px;
  height: 210px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--rm-radius);
  background: var(--kachel-grafik);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.headerauswahl a:hover .headerbutton,
.headerauswahl a:focus-visible .headerbutton {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

/* roter Akzentbalken unten, waechst beim Hover ueber die ganze Breite */
.headerauswahl .headerbutton::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--rm-red);
  z-index: 3;
  transform: scaleX(0.25);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.headerauswahl a:hover .headerbutton::after,
.headerauswahl a:focus-visible .headerbutton::after {
  transform: scaleX(1);
}

/* hinterlegtes Kachelbild fuellt die ganze Kachel */
.headerauswahl .button_start,
.headerauswahl .button_start_firma {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover;
  color: transparent;   /* Alternativtext nicht anzeigen */
  font-size: 0;
  transition: transform 0.4s ease;
}

.headerauswahl a:hover .button_start,
.headerauswahl a:hover .button_start_firma {
  transform: scale(1.05);
}

/* Kachelbild NICHT ladbar: Pseudo-Elemente erscheinen an einem Bild
   nur dann, wenn es nicht geladen werden konnte. Dann liegt hier die
   eigene Kachel-Grafik statt des kaputten Bild-Symbols. */
.headerauswahl .button_start::before,
.headerauswahl .button_start_firma::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kachel-grafik);
}

/* Wettbewerbsname unten auf dunklem Verlauf */
.headerauswahl .titel {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;   /* Datasport setzt am Handy bottom:auto */
  top: auto !important;
  z-index: 2;
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 44px 16px 16px !important;
  box-sizing: border-box;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0)) !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: left !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Distanz oben links als helle Plakette */
.headerauswahl .strecke {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  z-index: 2;
  display: inline-block !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--rm-red) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  text-shadow: none !important;
}

/* Hinweise wie "Meldestart ...", "Ausgebucht", "noch X Plaetze":
   untereinander links unter der Distanz, damit sich nichts
   ueberdeckt (Distanz -> 1. Hinweis -> 2. Hinweis), alle in Rot. */
.headerauswahl .info,
.headerauswahl .limit,
.headerauswahl :where(.headerbutton > span:not(.titel):not(.strecke)),
.headerauswahl :where(a > span:not(.headerbutton)) {
  position: absolute !important;
  top: 46px !important;
  left: 12px !important;
  right: auto !important;
  z-index: 4;
  float: none !important;
  width: auto !important;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  margin: 0 !important;
  padding: 4px 10px !important;
  border-radius: 999px;
  background: var(--rm-red) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* gibt es beide Hinweise, steht der rote eine Zeile tiefer */
.headerauswahl a:has(.info) .limit {
  top: 78px !important;
}

@media screen and (max-width: 500px) {
  section.headerauswahl {
    gap: 14px;
    margin-top: 1.2em !important;
  }
  .headerauswahl a {
    width: 100%;
    max-width: 360px;
  }
  .headerauswahl .headerbutton {
    width: 100%;
    height: 180px;
  }
  .headerauswahl .titel {
    font-size: 18px !important;
  }
}

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

/* =========================================================
   ERGEBNISLISTE (RaceResult) – bisheriger Stil, Verlauf jetzt in
   den Datasport-Farben Schwarz #141414 -> Rot #D6001D.
   Korrigiert: ungueltiger Selektor "<a table..." (Regel wurde vom
   Browser verworfen) und die globale p-Regel greift nicht mehr auf
   der Anmeldeseite.
   ========================================================= */
table.divDetailsParent div.divDetailsInner > div > div:first-child {
  background: linear-gradient(to right, #141414, #d6001d) !important;
  text-align: center !important;
  font-size: 13px !important;
}
.RRPublish > div.Tiles > div > div {
  color: #ffffff !important;
  background: linear-gradient(to right, #141414, #d6001d) !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),
.RRPublish > div.SelectorParent > div.SelectorMenu > div.selectorResult > div:nth-child(1) {
  background: linear-gradient(to right, #141414, #d6001d) !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;
    border: none !important;
  }
}
@media only screen and (max-width: 640px) {
  .RRPublish a.aShowAll {
    background: linear-gradient(to right, #141414, #d6001d) !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: linear-gradient(to right, #141414, #d6001d);
  border-radius: 4px;
}
.RRPublish > div.ListControl > div.ListControlSearch > button.btnSearch:disabled {
  background: linear-gradient(to right, #141414, #d6001d) !important;
  border: 1px solid #ffffff !important;
  cursor: default;
}
.RRPublish > div.ListControl > div.ListControlSearch > button.btnClearSearch {
  background: linear-gradient(to right, #141414, #d6001d) !important;
  border: 1px solid #ffffff !important;
  padding: 5px;
  height: 27px;
  cursor: pointer;
  width: 10%;
  border-radius: 0 4px 4px 0;
  border-left: 0;
}
/* Ueberschriften-Balken der Ergebnisliste - nur ausserhalb der
   Anmeldung (Kaesten, Formulare, Fusszeile bleiben unberuehrt) */
p:not(.panibox p):not(.ym-form p):not(footer p) {
  font-size: 1.5em;
  line-height: 1.5em;
  margin: 0.2em 0 0;
  background: linear-gradient(to right, #141414, #d6001d);
  text-align: center;
  font-weight: bold;
  color: #ffffff;
}
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;
}
table.divDetailsParent div.LegsInner > div > div.predicted > div:not(:first-child),
table.divDetailsParent div.SplitsInner > div > div.predicted > div:not(:first-child) {
  display: none;
}
table.divDetailsParent div.LegsInner > div.Prediction,
table.divDetailsParent div.SplitsInner > div.Prediction {
  display: none !important;
}

/* =========================================================
   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(214, 0, 29, 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(214, 0, 29, 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;
  }
}