/*
 * Anmeldung in drei Schritten.
 *
 * Bewusst sparsam: Farben, Schriften und Knöpfe kommen aus dem Theme. Hier
 * steht nur, was die Schrittführung braucht - Anordnung, Auswahl, Fehler.
 */

/* Der Pfeil "Nach oben" der Fusszeile haengt mit margin-top: -25px in den
   Inhalt darueber. Ohne Abstand liegt er ueber dem letzten Knopf und faengt
   dessen Klicks ab - nachgemessen: Knopfmitte und Pfeil ueberlappen exakt. */
.mx5-steps {
    margin-bottom: 48px;
}

/* Schrittleiste.
 *
 * Aussehen, Anordnung und Breite kommen aus dem Theme: das Modul haengt im
 * Kopfbereich des Layouts zwischen den beiden HTML-Modulen, die den Streifen
 * der Subnavigation aufspannen, und traegt dessen Klasse. Hier steht nur, was
 * eine Schrittleiste anders braucht als eine Navigation.
 *
 * Ein Schritt ist kein Link: die Reiter sind Anker ohne Ziel. Der Zeiger
 * verspraeche eine Klickbarkeit, die es nicht gibt - weiter geht es nur ueber
 * die Knoepfe des Formulars. */
.mx5-stepbar li > a {
    cursor: default;
}


/* Die Ziffer vor der Beschriftung. Etwas Abstand, sonst kleben "1." und der
   Text aneinander - im Markup steht dazwischen bewusst kein Leerzeichen, das
   sich sonst nicht steuern liesse. */
.mx5-stepbar__nr {
    margin-right: .45em;
}

/* Schritt 1: Ticketarten als große, klickbare Zeilen. */
.mx5-steps__areas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

/* Genau wie ein Texteingabefeld des Themes: weiss, 1 px in --tidm-border,
   Radius 3, dieselben Innenabstaende. Der Kasten gehoert damit sichtbar zum
   selben Formular und ist kein zweites Gestaltungssystem daneben. Die Werte
   stehen als Rueckfall dabei, falls das Theme die Variablen einmal nicht
   setzt. (Grau sind im Formular nur gesperrte Felder - die aus der Einladung
   uebernommenen.) */
.mx5-steps .mx5-steps__area {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 19px;
    border: 1px solid var(--tidm-border, #dcdcdc);
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}

/* Dieselbe Reaktion wie ein Eingabefeld unter dem Zeiger (Theme, main.css:
   "input:hover"): Rahmen eine Spur dunkler, weicher Schatten. */
.mx5-steps .mx5-steps__area:hover {
    border-color: #cfcfcf #cfcfcf #c5c5c5;
    box-shadow: 0 0 6px rgba(0, 0, 0, .1);
}

/* Der Kasten bleibt in jedem Zustand ein Eingabefeld - gewaehlt ist, was der
   rote Punkt vorne sagt. Rahmen oder Fuellung zusaetzlich zu aendern waere
   ein zweiter Hinweis auf dieselbe Sache. */
.mx5-steps .mx5-steps__area input[type="radio"] {
    accent-color: var(--tidm-accent, #b60b27);
}

.mx5-steps .mx5-steps__area.is-soldout {
    opacity: .5;
    cursor: not-allowed;
}

/* Die Ticketart: dunkles Grau in der Schrift der Ueberschriften - so steht
   sie in der App. */
.mx5-steps .mx5-steps__area-title {
    margin-left: 4px;
    color: #242424;
    font-family: 'Nunito', 'Open Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

/* Direkt hinter der Ticketart; den Preis schiebt sein eigenes "auto" ans
   rechte Ende der Zeile. */
.mx5-steps__area-rest {
    margin-right: auto;
    margin-left: 8px;
}

/* Beschreibung: eigene Zeile unter Bezeichnung und Preis. */
.mx5-steps .mx5-steps__area {
    flex-wrap: wrap;
}

.mx5-steps__area-desc {
    flex: 1 0 100%;
    margin-top: 6px;
    font-size: .9em;
}

.mx5-steps__area-desc:empty {
    display: none;
}

.mx5-steps__area-desc > *:first-child {
    margin-top: 0;
}

.mx5-steps__area-desc > *:last-child {
    margin-bottom: 0;
}

/* Der Preis als rote Box: die zeichnet das Theme am <h3>. Hier nur Lage und
   Groesse, damit er in die Zeile passt statt eine eigene aufzuspannen. */
.mx5-steps .mx5-steps__area-price {
    margin: 0 0 0 12px;
    font-size: 1em;
    line-height: 1.5;
    white-space: nowrap;
}

.mx5-steps__addon-rest {
    margin-left: 8px;
}

/* Restbestand in der gewoehnlichen Schrift der Seite - er ist eine Auskunft
   am Rande, keine Ueberschrift. */
.mx5-steps__area-rest,
.mx5-steps__addon-rest {
    font-size: .85em;
    font-weight: 400;
    text-transform: none;
    color: #777;
    white-space: nowrap;
}

/* Die Ueberschrift der Zusatzleistungen sitzt dicht ueber ihrer Liste - mit
   dem Abstand des Themes stand dazwischen eine leere Zeile. */
.mx5-steps .mx5-steps__addons > h4 {
    margin-bottom: 6px;
}

.mx5-steps .mx5-steps__addons {
    margin-top: 24px;
}

/* Zusatzleistungen: eine Zeile je Leistung, getrennt durch dieselbe feine
   Linie wie die Listen der App. Die Zeile traegt die Theme-Klassen
   (.widget-checkbox / .widget-select) - Kaestchen und Auswahlmenue zeichnet
   damit das Theme, hier steht nur die Anordnung. */
.mx5-steps .mx5-steps__addon {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    /* Das Kaestchen des Themes ist 32 px hoch und haengt am Label - ohne
       Mindesthoehe ragte es aus der Zeile in die Ueberschrift darueber. */
    min-height: 44px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.mx5-steps .mx5-steps__addon:last-child {
    border-bottom: 0;
}

/* Kaestchen und Beschriftung stehen im <span>, das das Theme erwartet. */
.mx5-steps .mx5-steps__addon > span {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
}

/* Das Theme setzt "select { width: 100% !important }" - für die Anzahl neben
   der Leistung wäre das eine Zeile über die halbe Seite. Nur hier dagegen. */
.mx5-steps .mx5-steps__addon select {
    width: auto !important;
    min-width: 6em;
    flex: 0 0 auto;
}

/* Auspraegung und Anzahl rechts, in einer Reihe. */
.mx5-steps .mx5-steps__addon-fields {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Das Theme zeichnet beim Kaestchen das Feld ueber ::before am Label - die
   Beschriftung bleibt deshalb ein Block mit Platz links. Als Flex-Element
   muss sie wachsen duerfen, sonst bricht "Zeltplatz 5,00 € noch 99 frei" in
   drei Zeilen um. */
.mx5-steps .mx5-steps__addon label {
    flex: 1 1 auto;
    margin: 0;
}

/* Das Theme macht jedes <span> in einem Kaestchen-Widget zum Flex-Block
   (".widget-checkbox span"). Preis und Rest stehen aber in der Beschriftung
   und gehoeren in dieselbe Zeile wie die Bezeichnung. */
.mx5-steps .mx5-steps__addon label span {
    display: inline;
}

.mx5-steps__addon-price {
    margin-left: 4px;
    font-weight: 700;
    white-space: nowrap;
}

/* Kostenumlage: die Summe des Schritts, als ruhiger Kasten statt zweier
   dicker Striche quer ueber die Seite. Fuellung und Rahmen wie ein
   Eingabefeld, der Betrag darin in der Akzentfarbe (der Auszeichner steht im
   Skript). */
.mx5-steps .mx5-steps__cost {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 20px 0;
    padding: 14px 19px;
    border: 1px solid var(--tidm-border, #dcdcdc);
    border-radius: 3px;
    background: rgba(0, 0, 0, .03);
    font-weight: 700;
    text-transform: uppercase;
}

/* Die Beschriftung nimmt den Platz, der Betrag steht rechts davon - und die
   Aufschluesselung bekommt ihre eigene Zeile. */
.mx5-steps .mx5-steps__cost-label {
    flex: 1 1 auto;
}

/* Der Betrag als rote Box (Theme, h3) - nur Lage und Groesse hier. */
.mx5-steps .mx5-steps__cost-amount {
    margin: 0;
    font-size: 1em;
    line-height: 1.5;
    white-space: nowrap;
}

/* Woraus sich die Summe ergibt: eigene Zeile darunter, leise. */
.mx5-steps .mx5-steps__cost-parts {
    flex: 0 0 100%;
    font-size: .85em;
    font-weight: 400;
    text-transform: none;
    color: #777;
}

.mx5-steps__cost:empty {
    display: none;
}

/* Schritt 3: zwei Spalten, ab schmalen Fenstern eine. Der Abstand zur
   Ueberschrift ist derselbe wie ueberall (12 px) - die Ueberschrift selbst
   gibt ihren unteren Rand ab (siehe oben). */
.mx5-steps__fields {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.mx5-steps .mx5-steps__fields > .widget {
    flex: 0 0 48%;
    margin-bottom: 12px;
}

/* Auf dem Telefon eine Spalte. Die Regel stand hier schon, griff aber nie:
   die Zwei-Spalten-Regel darueber traegt eine Klasse mehr (.mx5-steps davor)
   und gewinnt damit gegen eine gleich formulierte in der Media Query. Auf
   390 px blieben so zwei 172 px schmale Spalten stehen, in denen eine
   Beschriftung wie "Wie alt wirst du zum Zeitpunkt des Treffens sein?" ueber
   drei Zeilen lief. */
@media (max-width: 767px) {
    .mx5-steps .mx5-steps__fields > .widget {
        flex: 0 0 100%;
    }
}

/* "Zurueck" links am Rand, "Weiter" rechts - in jedem Schritt an derselben
   Stelle. Wer den Weg vorwaerts einmal rechts unten gefunden hat, sucht ihn
   im naechsten Schritt nicht neu. */
/* Dieselbe Leiste wie die Seitennummerierung der Nachrichtenliste
   (custom.css, ".mod_newslist .pagination"): eine durchgehende Linie auf
   halber Hoehe, darauf rechts die Knoepfe. Zurueck ist nur ein Pfeil in
   einem Quadrat, Weiter traegt auf jedem Schritt dasselbe eine Wort - wohin
   es geht, sagt die Schrittleiste darueber. */
.mx5-steps__actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 36px;
}

/* Ziffern links auf der Linie, Form wie die Seitenzahlen der
   Nachrichtenliste: weisses Feld mit duennem Rahmen, der laufende Schritt im
   roten Schild. Bewusst kein Verweis - gesprungen wird ueber die
   Schrittleiste am Kopf, hier zeigen die Ziffern nur, wo man steht. */
.mx5-steps__seiten {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.mx5-steps__seiten::-webkit-scrollbar {
    display: none;
}

/* Das Theme rueckt jede <ul> im Inhalt um 22 px ein - die Ziffern sollen
   aber direkt am Anfang der Linie stehen. Der Auto-Rand rechts haelt sie
   auch mobil dort, wo die Reihe nicht mehr die ganze Breite nimmt: sonst
   landet der freie Platz (justify-content: flex-end) links davor. */
.mx5-steps .mx5-steps__actions .mx5-steps__seiten {
    margin: 0 auto 0 0 !important;
    padding: 0 !important;
}

.mx5-steps .mx5-steps__seiten li {
    flex: 0 0 auto;
    margin: 0;
    padding: 4px 12px;
    border: 1px solid var(--tidm-border, #dcdcdc);
    border-radius: 3px;
    background: #fff;
    color: #666;
    font-family: 'Nunito', 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 0.86667em;
    line-height: 1.6;
}

/* Das Theme setzt vor jedes <li> einen roten Punkt - hier stoert er.
   Er kommt als Listenzeichen, nicht als Pseudo-Element, deshalb beides. */
.mx5-steps .mx5-steps__seiten li:before,
.mx5-steps .mx5-steps__seiten li:after {
    content: none;
    display: none;
}

.mx5-steps .mx5-steps__seiten li {
    list-style: none;
}

.mx5-steps .mx5-steps__seiten li::marker {
    content: "";
    color: transparent;
    font-size: 0;
}

.mx5-steps .mx5-steps__seiten li.is-active {
    border-color: var(--tidm-accent, #b60b27);
    background: var(--tidm-accent, #b60b27);
    color: #fff;
}

/* Die Linie laeuft hinter den Knoepfen durch; die sind undurchsichtig und
   decken sie dort ab - genau wie die Seitenzahlen der Nachrichtenliste. */
.mx5-steps__actions:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: var(--tidm-border, #dcdcdc);
}

.mx5-steps .mx5-steps__actions .submit {
    position: relative;
    border-radius: 3px;
}

/* Gesperrt, weil eine Bedingung fehlt: die Regeln sind noch nicht zu Ende
   gelesen oder das Haekchen fehlt. Ausgegraut statt versteckt - man soll
   sehen, was einen erwartet. */

.mx5-steps__gesperrt {
    opacity: .45;
}

.mx5-steps .mx5-steps__gesperrt label {
    cursor: not-allowed;
}


/* Das Theme setzt ".submit { width: 100% !important }" (custom.css der
   Seite). In der Schrittfuehrung stehen zwei Knoepfe nebeneinander - deshalb
   hier dagegen, und zwar ebenfalls mit !important, sonst gewinnt das Theme. */
.mx5-steps .mx5-steps__actions .submit {
    width: auto !important;
    display: inline-block;
}

/* Bezahlzeile: zwei Texte, links "Ich ueberweise spaeter", rechts
   "Jetzt bezahlen". */
.mx5-steps__actions--breit {
    justify-content: space-between;
    gap: 12px;
}

.mx5-steps__actions--breit:before {
    display: none;
}

/* "Ich ueberweise spaeter" unter der Leiste des Abschlusses: klein, rechts
   unter dem Bezahlknopf, als Textlink. Klasse doppelt, weil die Seitenvorlage
   jedes <button> rot und in Versalien setzt und spaeter im Dokument steht. */
.mx5-steps__spaeter {
    margin: 10px 0 0;
    text-align: right;
}

.mx5-steps__spaeter-link.mx5-steps__spaeter-link,
.mx5-steps__spaeter-link.mx5-steps__spaeter-link:hover,
.mx5-steps__spaeter-link.mx5-steps__spaeter-link:focus {
    display: inline;
    width: auto !important;
    height: auto;
    margin: 0;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #666;
    font: inherit;
    font-size: .9em;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: underline;
    cursor: pointer;
}

.mx5-steps__spaeter-link.mx5-steps__spaeter-link:hover,
.mx5-steps__spaeter-link.mx5-steps__spaeter-link:focus-visible {
    color: #242424;
}

.mx5-steps__leise {
    opacity: .7;
}

/* Zurueck: 40er-Quadrat mit Chevron, gezeichnet aus zwei Rahmenkanten -
   Masse, Farben und Hover wie ".mod_newslist .pagination li.previous a" in
   custom.css. Weiter: derselbe Knopf, nur mit dem Wort davor und dem
   Chevron nach rechts. */
.mx5-steps .mx5-steps__actions .submit.mx5-steps__back,
.mx5-steps .mx5-steps__actions .submit.mx5-steps__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--tidm-accent, #b60b27);
    background: var(--tidm-accent, #b60b27);
    color: #fff;
    line-height: 1;
}

.mx5-steps .mx5-steps__actions .submit.mx5-steps__back {
    width: 40px !important;
    min-width: 40px;
    padding: 0;
    margin-left: auto;
    font-size: 0;
}

.mx5-steps .mx5-steps__actions .submit.mx5-steps__back:hover,
.mx5-steps .mx5-steps__actions .submit.mx5-steps__next:hover,
.mx5-steps .mx5-steps__actions .submit.mx5-steps__back:focus-visible,
.mx5-steps .mx5-steps__actions .submit.mx5-steps__next:focus-visible {
    background: #8d081e;
    border-color: #8d081e;
}

.mx5-steps__back:before,
.mx5-steps__next:after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border: solid currentColor;
    border-width: 2px 2px 0 0;
}

.mx5-steps__back:before {
    transform: rotate(-135deg);
    margin-left: 3px;
}

.mx5-steps__next:after {
    transform: rotate(45deg);
    margin-right: 3px;
}

/* Gesperrt heisst grau, nicht durchsichtig: #55555a wie der Platzhalter auf
   Seite 1 der Nachrichten. Gilt fuer Zurueck auf dem ersten Schritt, fuer
   Weiter ohne Haekchen und fuer Absenden waehrend der Pruefung. */
.mx5-steps .mx5-steps__actions .submit:disabled {
    opacity: 1;
    cursor: default;
    background: #55555a;
    border-color: #55555a;
    color: #fff;
}

/* Absenden auf dem letzten Schritt bleibt ein Textknopf - ein Pfeil sagt
   nicht, dass hier verbindlich angemeldet wird. Gleiche Hoehe wie die
   Pfeile. */
.mx5-steps .mx5-steps__actions .submit[data-submit] {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Auf dem Telefon geht der Platz an die Knoepfe: die Ziffernreihe schrumpft
   und scrollt notfalls. */
@media (max-width: 599px) {
    .mx5-steps__seiten {
        flex: 0 1 auto;
    }
}

/* Regeln: eigener Bildlaufbereich.
 *
 * Der Text ist lang, Haekchen und Knoepfe standen darunter weit ausserhalb
 * des Bildes - wer zustimmen wollte, musste erst ans Ende scrollen und wusste
 * unterwegs nicht, dass dort noch etwas kommt. Jetzt fuellt der Schritt die
 * Hoehe unter dem fixierten Kopf, und was nach Ueberschrift, Haekchen und
 * Knoepfen uebrig bleibt, bekommt der Regeltext.
 *
 * ":not([hidden])" ist Pflicht: "display: flex" wuerde sonst das "hidden" der
 * uebrigen Schritte ueberstimmen und alle gleichzeitig zeigen. */
.mx5-steps__step[data-step="rules"]:not([hidden]) {
    display: flex;
    flex-direction: column;
    /* 100dvh statt 100vh: auf Mobilgeraeten waechst und schrumpft die
       Adressleiste, vh rechnet dort mit der groessten Hoehe - die Knoepfe
       laegen dann unter dem Bildschirmrand. --mx5-kopf setzt das Skript, es
       kennt die Hoehe des fixierten Kopfes. */
    max-height: calc(100dvh - var(--mx5-kopf, 130px) - 32px);
}

/* Erklaerung ueber dem Regelkasten. Sie steht ausserhalb und bleibt beim
   Scrollen der Regeln stehen. */
/* Abstand zur Ueberschrift wie auf den Infoseiten: dort stehen zwischen
   Bereichsueberschrift und Absatz 12 Pixel.
   Der Regelschritt ist ein Flex-Container, die uebrigen sind es nicht - in
   dem einen fallen Raender zusammen, im anderen addieren sie sich. Deshalb
   traegt den Abstand allein die Erklaerung, die Ueberschrift gibt ihren
   unteren Rand ab. */
.mx5-steps .mx5-steps__step > h2 {
    /* "!important", weil die Regel des Themes fuer Ueberschriften es
       ebenfalls benutzt (custom.css, "margin-bottom: 5px !important"). */
    margin-bottom: 0 !important;
}

.mx5-steps__rules-intro {
    margin: 12px 0 14px;
}

.mx5-steps__rules-intro > :first-child {
    margin-top: 0;
}

.mx5-steps__rules-intro > :last-child {
    margin-bottom: 0;
}

/* Innerhalb der Box: die Ueberschriften bleiben die roten Schilder der Seite
 * - der Regeltext soll nicht wie ein Fremdkoerper aussehen. Nur kleiner und
 * enger, passend zu den 12 px im Kasten: mit dem Innenabstand des Themes
 * stand bei zwei Ueberschriften hintereinander ("2." und gleich darunter
 * "2.1") mehr Farbe als Text im Bild.
 *
 * Drei Klassen im Selektor, nicht aus Zierde: die Regel der Seite zaehlt
 * ":not(.ss *):not(:has(span))" mit und liegt damit bei (0,2,2). "!important"
 * steht auf beiden Seiten, also entscheidet die Spezifitaet - mit
 * ".mx5-steps .mx5-steps__step .mx5-steps__rules" sind es (0,3,1). */
.mx5-steps .mx5-steps__step .mx5-steps__rules :is(h1, h2, h3, h4, h5, h6),
.mx5-steps .mx5-steps__step .mx5-steps__rules :is(h1, h2, h3, h4, h5, h6) span {
    margin: 1.2em 0 .4em;
    padding: 1px 10px !important;
    font-size: 1em;
    line-height: 1.5;
}

/* Eine Zwischenueberschrift folgt oft direkt auf die naechsthoehere
   ("2." und gleich darunter "2.1") - dazwischen braucht es keinen Absatz. */
.mx5-steps .mx5-steps__step .mx5-steps__rules :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: .5em;
}

.mx5-steps .mx5-steps__step .mx5-steps__rules > :first-child {
    margin-top: 0;
}

.mx5-steps__rules p,
.mx5-steps__rules ul,
.mx5-steps__rules ol {
    margin: 0 0 .7em;
}

.mx5-steps__rules > :last-child {
    margin-bottom: 0;
}

/* Der Trenner zwischen den Abschnitten: eine Linie reicht, der Abstand kam
   vorher aus den Kaesten drumherum. */
.mx5-steps__rules hr {
    margin: 1.2em 0;
    border: 0;
    border-top: 1px solid var(--tidm-border, #dcdcdc);
}

.mx5-steps__rules {
    flex: 1 1 auto;
    /* Ohne min-height weigert sich ein Flex-Element zu schrumpfen und der
       Bildlauf entstuende nie. */
    min-height: 8em;
    overflow-y: auto;
    /* overscroll-contain: am Ende der Regeln scrollt sonst die Seite weiter. */
    overscroll-behavior: contain;
    margin-bottom: 16px;
    /* Dieselben Masse wie die Ticketkaesten und die Eingabefelder des
       Themes - der Regeltext steht damit im selben Kasten wie alles andere
       im Formular. */
    padding: 12px 19px;
    border: 1px solid var(--tidm-border, #dcdcdc);
    border-radius: 3px;
    background: #fff;
    /* Etwas kleiner als der Fliesstext der Seite: es ist ein langer Text zum
       Durchlesen in einem Kasten mit Bildlauf, kein Seiteninhalt. */
    font-size: .8em;
}

/* Die Zustimmung darunter wie eine Zeile der Zusatzleistungen: das Kaestchen
   des Themes ist 32 px hoch und braucht Luft, sonst klebt es am Regelkasten. */
.mx5-steps .mx5-steps__step[data-step="rules"] .widget-checkbox {
    display: flex;
    align-items: center;
    min-height: 44px;
}

/* Fehler stehen im Fenster (Fancybox), nicht mehr als Zeile im Formular:
   zweimal derselbe Satz, einmal ueber dem Schritt und einmal am Feld, war
   eine Wiederholung ohne Gewinn. Im Formular bleibt die Markierung - sie
   sagt, wo etwas fehlt, und der Text steht daneben im Fenster. */
.mx5-steps__error {
    padding: 12px 16px;
    border: 2px solid currentColor;
}

/* Beanstandete Felder rot: Rahmen kraeftiger, Beschriftung mit. So ist beim
   Schliessen des Fensters auf einen Blick zu sehen, worum es geht. */
.mx5-steps .mx5-steps__invalid input,
.mx5-steps .mx5-steps__invalid select,
.mx5-steps .mx5-steps__invalid textarea {
    border: 2px solid var(--tidm-accent, #b60b27);
}

.mx5-steps .mx5-steps__invalid > label,
.mx5-steps .mx5-steps__invalid > h3,
.mx5-steps .mx5-steps__invalid > h4 {
    color: var(--tidm-accent, #b60b27);
}

/* Die Ticketauswahl und die Zusatzleistungen tragen kein Eingabefeld -
   dort markiert der Rahmen den ganzen Block. */
.mx5-steps .mx5-steps__areas.mx5-steps__invalid,
.mx5-steps .mx5-steps__addon.mx5-steps__invalid {
    outline: 2px solid var(--tidm-accent, #b60b27);
    outline-offset: 4px;
}

/* Aus der Einladung uebernommene Felder: sichtbar, aber nicht bedienbar. */
.mx5-steps .mx5-steps__locked input,
.mx5-steps .mx5-steps__locked select {
    background: rgba(0, 0, 0, .05);
    cursor: not-allowed;
}

.mx5-steps__locked-hint {
    margin: 4px 0 0;
    font-size: .85em;
    opacity: .7;
}

/* Eingabefelder mit derselben Rundung wie Ueberschriften und Knoepfe (3px).
 *
 * Absichtlich nur hier und nicht in der Seiten-CSS: dort gehoert eine
 * site-weite Entscheidung hin, und die faellt nicht dieses Bundle. Wer sie
 * ueberall will, verschiebt die Regel nach files/eventpage/css/custom.css. */
.mx5-steps input.text,
.mx5-steps select,
.mx5-steps textarea {
    border-radius: 3px;
}

/* Einladungscode in sechs Kaestchen.
 *
 * Bewusst nur Anordnung: Schrift, Rahmen, Hoehe und Farben der Felder kommen
 * aus dem Theme (Klasse "text"), damit sie aussehen wie jedes andere
 * Eingabefeld der Seite. Gesetzt wird hier nur, was eine Reihe aus sechs
 * einzelnen Zeichen braucht - Breite und Mittigkeit. */
.mx5-steps__code {
    display: flex;
    align-items: center;
    /* Kein Umbruch: sechs Kaestchen gehoeren in eine Zeile. Auf schmalen
       Telefonen schrumpfen sie stattdessen mit (siehe flex an der Box) -
       umgebrochen sahen sie aus wie zwei getrennte Eingaben. */
    flex-wrap: nowrap;
    gap: 10px;
}

/* Das Theme setzt "input.text { width: 100% !important }" - wie bei den
   Auswahlfeldern und Knoepfen weiter oben hilft nur dasselbe Mittel, sonst
   waere jedes Kaestchen so breit wie die Spalte.
   Groesser und deutlicher als ein gewoehnliches Feld: hier steht ein Zeichen,
   und man tippt es aus einer Mail oder von einem Brief ab. */
.mx5-steps .mx5-steps__code-box {
    /* Mitwachsend bis 3.2em: auf 320-px-Geraeten passen sechs feste
       Kaestchen plus Abstaende nicht in die Spalte. */
    flex: 1 1 2em;
    min-width: 0;
    max-width: 3.2em;
    width: auto !important;
    height: 3.4em;
    padding: 0;
    border: 1px solid var(--tidm-border, #dcdcdc);
    border-radius: 3px;
    background: #fff;
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
}

.mx5-steps .mx5-steps__code-box:focus {
    border-color: var(--tidm-accent, #b60b27);
    box-shadow: 0 0 6px rgba(0, 0, 0, .1);
    outline: none;
}

/* Gefuelltes Kaestchen: ein Hauch Farbe, damit man sieht, wie weit man ist. */
.mx5-steps .mx5-steps__code-box:not(:placeholder-shown) {
    border-color: rgba(0, 0, 0, .35);
}

/* Waehrend der Pruefung sind die Kaestchen gesperrt - dann soll auch zu sehen
   sein, dass gerade etwas laeuft. */
.mx5-steps__code.is-pruefend .mx5-steps__code-box {
    opacity: .6;
}

/* Ladeanzeige rechts neben den Kaestchen: ein Kreis, der sich dreht - wie auf
   Android. Nur ein Rand, dessen obere Seite die Akzentfarbe traegt; die
   Drehung macht daraus den laufenden Bogen. */
.mx5-steps__code-spinner {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-left: 6px;
    border: 3px solid rgba(0, 0, 0, .12);
    border-top-color: var(--tidm-accent, #b60b27);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .15s ease;
}

.mx5-steps__code.is-pruefend .mx5-steps__code-spinner {
    opacity: 1;
    animation: mx5-steps-dreh .8s linear infinite;
}

@keyframes mx5-steps-dreh {
    to { transform: rotate(360deg); }
}

/* Wer Bewegung abbestellt hat, bekommt sie nicht - dann bleibt der Kreis
   stehen und sagt trotzdem, dass etwas laeuft. */
@media (prefers-reduced-motion: reduce) {
    .mx5-steps__code.is-pruefend .mx5-steps__code-spinner {
        animation: none;
    }
}

/* Die Beschriftung ist ein <h3> und traegt damit die rote Box des Themes.
   Ein <label for> waere hier gelogen: die Gruppe hat sechs Felder, keines
   davon ist "das" Feld. Verknuepft ist sie ueber aria-labelledby. */
.mx5-steps__code-label {
    margin-top: 0;
}

/* Meldung eines abgewiesenen Einladungscodes, in einem Fancybox-Fenster.
 *
 * Kein overflow hier: das schoebe sich ueber das Schliessen-Kreuz. */
.mx5-steps__dialog {
    max-width: 26em;
    padding: 24px;
    background: #fff;
}

.mx5-steps__dialog-text {
    margin: 0 0 18px;
}

/* Mehrere Beanstandungen stehen als Liste - eine Aufzaehlung liest sich
   schneller als drei Saetze hintereinander. */
.mx5-steps__dialog-list {
    margin: 0 0 18px;
    padding-left: 1.2em;
}

.mx5-steps__dialog-list li {
    margin-bottom: 6px;
}

.mx5-steps__dialog-list li:last-child {
    margin-bottom: 0;
}

/* Das Theme setzt ".submit { width: 100% !important }" - im Fenster steht der
   Knopf allein und soll nur so breit sein wie seine Beschriftung. */
.mx5-steps__dialog .submit {
    width: auto !important;
    display: inline-block;
}

/* Bezahlen nach der Anmeldung. */
/* Die Zahlung steht als eigener Block darunter - ohne Trennstrich quer ueber
   die Seite: der Kasten mit dem offenen Betrag grenzt sie schon ab. */
.mx5-steps__pay {
    margin-top: 8px;
}


.mx5-steps .mx5-steps__pay a.submit {
    display: inline-block;
    width: auto !important;
    text-decoration: none;
}

.mx5-steps__hint {
    margin-top: 10px;
    font-size: .9em;
    color: #666;
}

/* Honigtopf: für Menschen unsichtbar, aber im Formular vorhanden. */
.mx5-steps__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mx5-steps__done strong {
    letter-spacing: .05em;
}

/* Erklaerung unter einer Schritt-Ueberschrift (Ticketauswahl). Dieselbe
   Zurueckhaltung wie der Text ueber dem Regelkasten: er soll fuehren, nicht
   auffallen - und derselbe Abstand zur Ueberschrift wie auf den Infoseiten
   (12 Pixel). */
.mx5-steps__intro {
    margin: 12px 0 16px;
}

.mx5-steps__intro > *:first-child {
    margin-top: 0;
}

.mx5-steps__intro > *:last-child {
    margin-bottom: 0;
}

/* Der Seitenkopf ist auf dem Desktop fixiert; Platz dafuer haelt das Theme als
   padding-bottom am .page-header frei - gemessen beim Laden, als die
   Schrittleiste noch versteckt war. Mit ihr ist der Kopf rund 50 Pixel hoeher,
   und der Anfang des Formulars lag darunter. "--mx5-kopf" fuehrt das Skript
   nach (kopfhoehe(), auch bei resize); diese Datei laedt nur auf Seiten mit
   der Anmeldung, die Regel trifft also keine andere.

   Nur ab 901 px: schmaler bleibt die Kopfzeile im Fluss und klebt ueber
   "position: sticky" (custom.css). Ein Platzhalter waere dort doppelt - er
   stand als 45 Pixel hoher leerer Streifen zwischen Kopf und Formular, der
   Kopf wirkte doppelt so hoch wie noetig. */
@media only screen and (min-width: 901px) {
    .page-header {
        padding-bottom: var(--mx5-kopf, 130px) !important;
    }
}

/* ---------- Kopfband je Schritt ---------- */

/* Wie die Bereiche auf den Infoseiten: ein dunkler Streifen ueber die volle
   Breite mit Ueberschrift und Erklaerung, darunter der helle Bereich mit dem
   Formular. Die Farbe ist dieselbe (#18181b), der Innenabstand ebenfalls
   (24 px oben und unten).
   Der volle Streifen entsteht ueber den Rand des 1200er-Containers hinaus:
   negative Aussenabstaende bis zum Fensterrand, derselbe Wert wieder als
   Innenabstand - so bleibt der Text auf der Flucht des uebrigen Inhalts. */
.mx5-steps .mx5-steps__band {
    margin: 0 calc(50% - 50vw) 24px;
    padding: 24px calc(50vw - 50%);
    background: #18181b;
    color: #fff;
}

.mx5-steps .mx5-steps__band > h2 {
    margin-top: 0 !important;
}

.mx5-steps .mx5-steps__band .mx5-steps__intro,
.mx5-steps .mx5-steps__band .mx5-steps__intro p {
    color: #fff;
    margin-bottom: 0;
}

/* Verweise im Erklaertext (Datenschutz, Teilnahmebedingungen) muessen auf dem
   dunklen Grund lesbar bleiben. */
.mx5-steps .mx5-steps__band a {
    color: #fff;
    text-decoration: underline;
}

/* Die Ticketnummer im Abschluss traegt dieselbe Form wie die Kostenumlage,
   nur mit Abstand zum Band darueber. */
.mx5-steps__done .mx5-steps__cost:first-of-type {
    margin-top: 0;
}

/* Ticketnummer im Abschluss: kein Kasten, nur Beschriftung, Nummer und
   Ticketart untereinander. */
.mx5-steps__ticketnr {
    margin: 0 0 20px;
}

.mx5-steps__ticketnr-label {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
}

/* Die Nummer traegt die rote Box des Themes (h3), etwas groesser als im
   Fliesstext - sie ist das, was man sich merkt. */
.mx5-steps .mx5-steps__ticketnr-value {
    margin: 6px 0 !important;
    font-size: 1.6em;
    line-height: 1.4;
}

.mx5-steps__ticketnr-line {
    display: block;
    font-size: .9em;
    color: #777;
    text-transform: uppercase;
}

/* Die Erklaerung zwischen Ueberschrift und Kaestchen: derselbe Abstand wie
   ueberall zwischen Ueberschrift und Text (12 px). */
.mx5-steps__code-hint {
    margin: 12px 0;
}

/* Der Block "Einladungscode" steht mittig: Ueberschrift, Hinweis, Kaestchen
   und der Link zum Anfordern (28.09.2026). */
.mx5-steps__step[data-step="invite"] .widget {
    text-align: center;
}

.mx5-steps__step[data-step="invite"] .mx5-steps__code {
    justify-content: center;
}

/* Die rote Box der Ueberschrift ist ein Block mit fester Breite - mittig
   nur ueber die Raender. */
.mx5-steps__step[data-step="invite"] .mx5-steps__code-label {
    margin-left: auto;
    margin-right: auto;
}

/* Gegenstueck zum Ladekreis rechts, genauso breit - sonst saesse die Reihe
   um dessen Breite nach links versetzt. */
.mx5-steps__step[data-step="invite"] .mx5-steps__code::before {
    content: '';
    flex: 0 0 24px;
    margin-right: 6px;
}

/* Schmale Telefone: engere Abstaende und flachere Kaestchen, damit die Reihe
   nicht die halbe Bildhoehe einnimmt. */
@media (max-width: 400px) {
    .mx5-steps__code {
        gap: 6px;
    }

    .mx5-steps .mx5-steps__code-box {
        height: 3.1em;
        font-size: 1em;
    }
}