/* =========================================================
   VORLAGE ANMELDESEITE 2027 (Basis fuer alle Anmeldungen)
   Modernes Design in den Farben von Datasport Schweiz:
     Rot #D6001D, Dunkelrot #A50016, Schwarz #141414,
     Hellgrau #F7F7F7 / #E4E6EB, Grau #525252
   Schriftart: Open Sans - einheitlich in allen Formularen
   (Einzel-, Staffel- und Sammelanmeldung).
   Grundlagen aus Frankfurt City Triathlon, Regensburg Marathon und
   Gravel Marathon. Eventspezifisches (Logos im Kopf, Dokument-Nummern
   fuer DE/EN, einzelne Bilder) pro Event ergaenzen.
   ========================================================= */

: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 90 px.
     Upload-Empfehlung: PNG mit transparentem Hintergrund, 800 x 180 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: 90px !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.1);
  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 0.15s ease,
    box-shadow 0.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 0.2s ease,
    transform 0.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 64 px */
  header:not(:has(img.logo2)) img.logo1 {
    width: auto !important;
    height: auto !important;
    max-width: min(260px, 100%) !important;
    max-height: 64px !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;
}

/* Anzahl der sichtbaren Kacheln (1, 2 oder 3+) - damit der Kopf auch
   bei nur 1-2 Kacheln buendig mit der Kachel-Reihe ist. Ausgeblendete
   Kacheln (style="display: none") zaehlen nicht. */
body:has(section.headerauswahl > a:not([style*="none"])) {
  --kacheln: 1;
}
body:has(section.headerauswahl > a:not([style*="none"]) ~ a:not([style*="none"])) {
  --kacheln: 2;
}
body:has(section.headerauswahl > a:not([style*="none"]) ~ a:not([style*="none"]) ~ a:not([style*="none"])) {
  --kacheln: 3;
}

/* 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(min(round(down, min(100%, 1100px) - 32px + 20px, 350px), var(--kacheln, 3) * 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;
  }
}


/* =========================================================
   GRUNDLAGEN FUER ALLE ANMELDUNGEN
   (uebernommen aus Regensburg Marathon und Gravel Marathon)
   ========================================================= */

/* ---------- Schritt-Leiste in der SAMMELANMELDUNG ----------
   Dort heissen die Schritte anders (Meldender / Teilnehmer). Erkannt an
   den Sammel-Links bzw. dem Sammel-Formular auf der Seite. */
html:is(:has(form[action*="/sammel/"]), :has(#schritt_1 a[href*="/sammel"])) .schritt_aktiv:nth-child(1)::after,
html:is(:has(form[action*="/sammel/"]), :has(#schritt_1 a[href*="/sammel"])) .schritt_inaktiv:nth-child(1)::after { content: "Meldender"; }

html:is(:has(form[action*="/sammel/"]), :has(#schritt_1 a[href*="/sammel"])) .schritt_aktiv:nth-child(2)::after,
html:is(:has(form[action*="/sammel/"]), :has(#schritt_1 a[href*="/sammel"])) .schritt_inaktiv:nth-child(2)::after { content: "Teilnehmer"; }

html:is(:has(form[action*="/sammel/"]), :has(#schritt_1 a[href*="/sammel"])):has(script[src*="sprache_en_js"]) .schritt_aktiv:nth-child(1)::after,
html:is(:has(form[action*="/sammel/"]), :has(#schritt_1 a[href*="/sammel"])):has(script[src*="sprache_en_js"]) .schritt_inaktiv:nth-child(1)::after { content: "Registrant"; }

html:is(:has(form[action*="/sammel/"]), :has(#schritt_1 a[href*="/sammel"])):has(script[src*="sprache_en_js"]) .schritt_aktiv:nth-child(2)::after,
html:is(:has(form[action*="/sammel/"]), :has(#schritt_1 a[href*="/sammel"])):has(script[src*="sprache_en_js"]) .schritt_inaktiv:nth-child(2)::after { content: "Participants"; }

/* ---------- Einheitliche Schrift in allen Formularen ----------
   Ueberall Open Sans (wie im restlichen Anmeldeservice) - Eingabefelder,
   Auswahllisten und Buttons uebernehmen sonst die Systemschrift des
   Browsers. Eine eventeigene Schrift fuer die grosse Ueberschrift oben kann
   pro Event ergaenzt werden. */
form,
.ym-form,
form input,
form select,
form textarea,
form button,
.ym-form input,
.ym-form select,
.ym-form textarea,
.ym-form button,
.ym-button,
.chzn-container {
  font-family: "Open Sans", Arial, sans-serif !important;
}

/* ---------- Startgebuehr: aktuell gueltigen Preis hervorheben ----------
   Datasport markiert die gueltige Preisstufe mit .gebuehr_aktiv,
   alle anderen mit .gebuehr_inaktiv. Aktive Stufe: rot hinterlegt
   mit Hinweis "AKTUELL", abgelaufene Stufen (vor der aktiven)
   durchgestrichen, kommende Stufen dezent grau. */
.gebuehr.gebuehr_aktiv {
  display: flex;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin: 4px 0;
  padding: 4px 12px;
  background: rgba(214, 0, 29, 0.07);
  border-left: 4px solid var(--rm-red);
  border-radius: 8px;
  color: var(--rm-red) !important;
  font-weight: 700;
}

.gebuehr.gebuehr_aktiv .einheit_name {
  color: var(--rm-text);
  font-weight: 600;
}

.gebuehr.gebuehr_aktiv::after {
  content: "AKTUELL";
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--rm-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

/* aktive Stufe ist ein eigener Block - der Zeilenumbruch danach
   wuerde sonst eine Leerzeile erzeugen */
.gebuehr.gebuehr_aktiv + br {
  display: none;
}

/* abgelaufene Preisstufen (stehen vor der aktiven) */
.gebuehr.gebuehr_inaktiv:has(~ .gebuehr_aktiv) {
  text-decoration: line-through;
  opacity: 0.55;
}

/* kommende Preisstufen */
.gebuehr.gebuehr_aktiv ~ .gebuehr_inaktiv {
  opacity: 0.75;
}

/* Preisstufen nach Teilnehmerzahl ("bis 100 / ab 101 Teilnehmer"):
   Datasport markiert hier ALLE Stufen als aktiv. Gueltig ist immer nur
   eine - hervorgehoben wird deshalb nur die erste aktive Stufe, die
   weiteren erscheinen wie kommende Stufen. */
.gebuehr.gebuehr_aktiv ~ .gebuehr.gebuehr_aktiv {
  display: inline;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit !important;
  font-weight: inherit;
  opacity: 0.75;
}
.gebuehr.gebuehr_aktiv ~ .gebuehr.gebuehr_aktiv .einheit_name {
  color: inherit;
  font-weight: inherit;
}
.gebuehr.gebuehr_aktiv ~ .gebuehr.gebuehr_aktiv::after {
  content: none;
}
.gebuehr.gebuehr_aktiv ~ .gebuehr.gebuehr_aktiv + br {
  display: inline;
}

/* ---------- Startplatzboerse (.../boerse/): aufgeraeumt ----------
   - "zurueck"-Button: kommt von der IT, siehe Regel weiter unten
   - Kaesten ohne Startplaetze kompakt, Text dezent
   - "aktuell X Platz verfuegbar" rechts: Zahl in Rot statt Gruen */
#spalte_links:has(> .panibox .startplatz-uebersicht) {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
}

#spalte_links > .panibox:has(.startplatz-uebersicht) {
  margin-bottom: 0 !important;
}

#spalte_links > .panibox:has(.startplatz) .panitermine {
  padding: 14px 18px !important;
}

#spalte_links > .panibox:has(.startplatz-uebersicht) .ym-g80 {
  width: 100% !important;
}

#spalte_links > .panibox:has(.startplatz-uebersicht) .ym-g80 > br {
  display: none;
}

/* Kaesten ohne freie Startplaetze */
#spalte_links > .panibox:has(.no-startplaetze) .panitermine {
  padding: 10px 18px !important;
}

.startplatz-uebersicht .no-startplaetze {
  font-size: 14px;
  color: #8a8f98;
}

/* Kaesten MIT freien Startplaetzen: roter Rand links als Hinweis */
#spalte_links > .panibox:has(.startplatz) {
  box-shadow: inset 4px 0 0 var(--rm-red), 0 10px 30px rgba(0, 0, 0, 0.18) !important;
}

/* Zeile je angebotenem Startplatz: Button immer rechts, nichts ueberlappt */
.panitermine div:has(> .startplatz) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.panitermine div:has(> .startplatz) a.startplatz-auswaehlen {
  position: static !important;
  margin-left: auto;
}

/* rechts: "aktuell 1 Platz verfuegbar" */
#spalte_rechts .panibox span[style*="font-size:250%"] {
  color: var(--rm-red) !important;
  font-size: 200% !important;
  font-weight: 800;
  line-height: 1;
  vertical-align: -0.1em;
  margin: 0 3px;
}

@media screen and (max-width: 600px) {
  .panitermine div:has(> .startplatz) a.startplatz-auswaehlen {
    margin-left: 0;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

/* Handy: linke Spalte (Wettbewerbe) volle Breite - Datasport laesst sie
   sonst auf 65 % stehen, rechts daneben bleibt eine leere Flaeche */
@media screen and (max-width: 767px) {
  #spalte_links {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* Startplatz-Liste als Tabelle: jede Zusatzleistung eine Spalte, oben
   der Name der Leistung (z.B. "Marathon Funktions-Shirt"), darunter was
   der Anbieter gebucht hat - pro Startplatz eine Zeile, Button rechts.
   Technik: die Zeilen-Container werden "aufgeloest" (display: contents),
   alle Eintraege landen in einem gemeinsamen Raster. Bis zu 6
   Zusatzleistungen nebeneinander. */
@media screen and (min-width: 601px) {
  #spalte_links .ym-g80:has(.startplatz) {
    display: grid !important;
    grid-template-columns: max-content repeat(6, auto) 1fr;
    align-items: center;
    row-gap: 0;
  }
  /* Spalten je nach Anzahl der Zusatzleistungen gleich breit verteilen */
  #spalte_links .ym-g80:has(.leistungname:nth-child(1):last-child) { grid-template-columns: max-content 1fr 0 0 0 0 0 max-content; }
  #spalte_links .ym-g80:has(.leistungname:nth-child(2):last-child) { grid-template-columns: max-content 1fr 1fr 0 0 0 0 max-content; }
  #spalte_links .ym-g80:has(.leistungname:nth-child(3):last-child) { grid-template-columns: max-content 1fr 1fr 1fr 0 0 0 max-content; }
  #spalte_links .ym-g80:has(.leistungname:nth-child(4):last-child) { grid-template-columns: max-content 1fr 1fr 1fr 1fr 0 0 max-content; }
  #spalte_links .ym-g80:has(.leistungname:nth-child(5):last-child) { grid-template-columns: max-content 1fr 1fr 1fr 1fr 1fr 0 max-content; }
  #spalte_links .ym-g80:has(.leistungname:nth-child(6):last-child) { grid-template-columns: max-content repeat(6, 1fr) max-content; }
  #spalte_links .ym-g80:has(.startplatz) > .startplatz-uebersicht,
  #spalte_links .ym-g80:has(.startplatz) > div:has(> .startplatz) {
    display: contents !important;
  }
  /* Kopfzeile: Namen der Leistungen ueber ihrer Spalte */
  #spalte_links .ym-g80:has(.startplatz) .leistungname {
    padding: 0 18px 8px 0;
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e6e6e6;
    align-self: end;
  }
  #spalte_links .ym-g80:has(.startplatz) .leistungname::before {
    content: none !important;   /* Trennpunkt aus der Kopfzeile entfernen */
  }
  #spalte_links .ym-g80:has(.startplatz) .leistungname:nth-child(1) { grid-column: 2; }
  #spalte_links .ym-g80:has(.startplatz) .leistungname:nth-child(2) { grid-column: 3; }
  #spalte_links .ym-g80:has(.startplatz) .leistungname:nth-child(3) { grid-column: 4; }
  #spalte_links .ym-g80:has(.startplatz) .leistungname:nth-child(4) { grid-column: 5; }
  #spalte_links .ym-g80:has(.startplatz) .leistungname:nth-child(5) { grid-column: 6; }
  #spalte_links .ym-g80:has(.startplatz) .leistungname:nth-child(6) { grid-column: 7; }

  /* je Startplatz eine Zeile: Nummer | Leistung 1 | Leistung 2 | ... | Button */
  #spalte_links .ym-g80:has(.startplatz) .startplatz {
    grid-column: 1;
    padding: 10px 18px 10px 0;
    align-self: stretch;
    display: flex;
    align-items: center;
  }
  #spalte_links .ym-g80:has(.startplatz) .leistung {
    justify-self: start;
    margin: 10px 18px 10px 0;
  }
  #spalte_links .ym-g80:has(.startplatz) .leistung:nth-of-type(2) { grid-column: 2; }
  #spalte_links .ym-g80:has(.startplatz) .leistung:nth-of-type(3) { grid-column: 3; }
  #spalte_links .ym-g80:has(.startplatz) .leistung:nth-of-type(4) { grid-column: 4; }
  #spalte_links .ym-g80:has(.startplatz) .leistung:nth-of-type(5) { grid-column: 5; }
  #spalte_links .ym-g80:has(.startplatz) .leistung:nth-of-type(6) { grid-column: 6; }
  #spalte_links .ym-g80:has(.startplatz) .leistung:nth-of-type(7) { grid-column: 7; }
  #spalte_links .ym-g80:has(.startplatz) a.startplatz-auswaehlen {
    grid-column: 8;
    justify-self: end;
    margin: 10px 0 10px 10px !important;
  }
  #spalte_links .ym-g80:has(.startplatz) > br {
    grid-column: 1 / -1;
  }
}

/* "zurueck": die Buttons kommen von der IT und werden so angezeigt, wie
   sie ausgegeben werden (nach jedem Kasten). Einzige Anpassung: im
   normalen Fluss rechts unter dem Kasten - mit der Datasport-Grund-
   einstellung (position:absolute) laegen sonst alle uebereinander unten
   rechts auf der Seite. */
#spalte_links > .buttons_rechts {
  position: static !important;
  margin: 0 !important;
  text-align: right;
}

/* Handy: Startplatz-Liste als kleine Tabelle - Spaltenueberschriften
   (Leistungen) oben, je Startplatz: Nummer, darunter die gebuchten
   Leistungen in denselben Spalten, darunter der Button ueber die volle
   Breite */
@media screen and (max-width: 600px) {
  #spalte_links .ym-g80:has(.startplatz) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    align-items: start;
  }
  #spalte_links .ym-g80:has(.leistungname:nth-child(1):last-child) { grid-template-columns: 1fr; }
  #spalte_links .ym-g80:has(.leistungname:nth-child(3):last-child) { grid-template-columns: 1fr 1fr 1fr; }
  #spalte_links .ym-g80:has(.startplatz) > .startplatz-uebersicht,
  #spalte_links .ym-g80:has(.startplatz) > div:has(> .startplatz) {
    display: contents !important;
  }
  #spalte_links .ym-g80:has(.startplatz) .leistungname {
    padding-bottom: 6px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: end;
  }
  #spalte_links .ym-g80:has(.startplatz) .leistungname::before {
    content: none !important;
  }
  #spalte_links .ym-g80:has(.startplatz) .startplatz {
    grid-column: 1 / -1;
    margin: 12px 0 6px;
  }
  #spalte_links .ym-g80:has(.startplatz) .leistung {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    border-radius: 10px;
  }
  #spalte_links .ym-g80:has(.startplatz) .leistung:nth-of-type(2) { grid-column: 1; }
  #spalte_links .ym-g80:has(.startplatz) .leistung:nth-of-type(3) { grid-column: 2; }
  #spalte_links .ym-g80:has(.startplatz) .leistung:nth-of-type(4) { grid-column: 3; }
  #spalte_links .ym-g80:has(.startplatz) a.startplatz-auswaehlen {
    grid-column: 1 / -1;
    width: 100%;
    margin: 10px 0 4px !important;
    text-align: center;
    box-sizing: border-box;
  }
}

/* ---------- 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;
}

/* 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="%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;
}

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

/* Buttons auf Links ("zurueck", "jetzt anmelden"): Datasport faerbt beim
   Darueberfahren den LINK um den Button dunkelgrau (#4f4f4f) - das
   Rechteck blitzt hinter dem Button hervor. Link selbst bleibt unsichtbar. */
a:has(> .ym-button),
a:has(> .ym-button):hover,
a:has(> .ym-button):focus,
a:has(> .ym-button):active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}


/* =========================================================
   TEILNEHMERBEREICH (Link aus der Bestaetigungsmail):
   Daten der Anmeldung, Ummelden
   ========================================================= */

/* Datasport-Listen (Bezeichnung links, Wert rechts, Zeilen per <br>):
   etwas mehr Zeilenabstand - in beiden Spalten gleich, damit die
   Zeilen nebeneinander bleiben */
.panibox [style*="line-height:20px"],
.panibox [style*="line-height:20px"] .abstand {
  line-height: 26px !important;
}
.panibox > .ym-grid > [class*="ym-g"] > .abstand[style*="color:#666666"] {
  color: var(--rm-dark-2, #3a3a3a) !important;
}
.panibox > .ym-grid:has([style*="line-height:20px"]) {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px 10px;
}

/* leerer Kasten rechts oben (Datasport gibt ihn ohne Inhalt aus) */
.ym-gbox.panibox:not(:has(*)) {
  display: none !important;
}

/* Kasten nur mit Button ("zurueck zur Uebersicht"): weisser Kasten wie
   die anderen, Button ueber die ganze Breite darin - ragt nicht mehr
   heraus und haengt nicht frei auf dem Hintergrundbild */
.ym-gbox.panibox:has(> a > .ym-button):not(:has(h6)) {
  padding: 16px !important;
  overflow: visible !important;
}
.ym-gbox.panibox:has(> a > .ym-button):not(:has(h6)) > a {
  float: none !important;
  display: block !important;
}
.ym-gbox.panibox:has(> a > .ym-button):not(:has(h6)) .ym-button {
  display: block !important;
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  text-align: center;
}

/* ---------- Ummelden: Tabelle Bezeichnung | Strecke | Preis,
   darunter rechts der Button (vorher abgeschnitten am Rand) */
.panibox:has(input[name="ummelden"]) > .ym-grid {
  display: grid !important;
  grid-template-columns: max-content max-content 1fr;
  column-gap: 24px;
  width: auto !important;
  padding: 12px 20px 18px !important;
}
.panibox:has(input[name="ummelden"]) > .ym-grid > div {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.panibox:has(input[name="ummelden"]) > .ym-grid > div > div {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 28px !important;
  white-space: nowrap;
}
/* Preise rechtsbuendig untereinander */
.panibox:has(input[name="ummelden"]) > .ym-grid > div:nth-child(3) > div {
  text-align: right;
  white-space: nowrap;
}
/* Button-Zeile ueber die ganze Breite, Trennlinie darueber */
.panibox:has(input[name="ummelden"]) > .ym-grid > div:has(form) {
  grid-column: 1 / -1;
  clear: both;
  margin-top: 14px !important;
  padding-top: 16px !important;
  border-top: 1px solid #e4e6eb;
  text-align: right;
}
.panibox:has(input[name="ummelden"]) form {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
}
.panibox:has(input[name="ummelden"]) .ym-fbox-button {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right;
}
.panibox:has(input[name="ummelden"]) input[name="submit"] {
  width: auto !important;
  min-width: 180px;
  margin: 0 !important;
  overflow: visible !important;
  text-transform: capitalize;
}

/* Handy: Spalten untereinander (Datasport laesst sie sonst nebeneinander
   mit 65 % / 33 % - der Button ragte rechts aus der Seite), Button
   "zurueck zur Uebersicht" oben */
@media screen and (max-width: 767px) {
  section.ym-grid:has(> .ym-g65 + .ym-g33) {
    display: flex !important;
    flex-direction: column;
  }
  section.ym-grid:has(> .ym-g65 + .ym-g33) > div {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  section.ym-grid:has(> .ym-g65 + .ym-g33) > .ym-g33 {
    order: -1;
  }
  .ym-gbox.panibox:has(> a > .ym-button):not(:has(h6)) {
    margin-bottom: 12px !important;
  }
  /* Daten der Anmeldung: Bezeichnung einzeilig, Werte daneben; zu lange
     Werte enden mit "..." statt die Zeilen zu verschieben */
  .panibox > .ym-grid:has(> .ym-g30 + .ym-g70) {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 14px;
  }
  .panibox > .ym-grid:has(> .ym-g30 + .ym-g70) > div {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
  .panibox > .ym-grid:has(> .ym-g30 + .ym-g70) > div > div {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media screen and (max-width: 600px) {
  .panibox:has(input[name="ummelden"]) > .ym-grid {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    column-gap: 12px;
    padding: 10px 14px 16px !important;
  }
  .panibox:has(input[name="ummelden"]) > .ym-grid > div > div {
    font-size: 14px;
  }
  /* Strecke darf umbrechen (z. B. "Bearbeitungsgebuehr Streckenwechsel") */
  .panibox:has(input[name="ummelden"]) > .ym-grid > div:nth-child(2) > div {
    white-space: normal;
  }
  html:is([lang="de"], [lang="en"]) .panibox:has(input[name="ummelden"]) > .ym-grid > div:first-child > div {
    font-size: 0;
  }
  html:is([lang="de"], [lang="en"]) .panibox:has(input[name="ummelden"]) > .ym-grid > div:first-child > div::before {
    display: block;
    font-size: 14px;
    line-height: 28px;
    white-space: pre;
  }
  html[lang="de"] .panibox:has(input[name="ummelden"]) > .ym-grid > div:first-child > div::before {
    content: "Aktuell:\A Neu:";
  }
  html[lang="en"] .panibox:has(input[name="ummelden"]) > .ym-grid > div:first-child > div::before {
    content: "Current:\A New:";
  }
  .panibox:has(input[name="ummelden"]) input[name="submit"] {
    width: 100% !important;
  }
}

/* ===== ENDE TEILNEHMERBEREICH ===== */