/*
 * Anmeldung mit dem Zugangsschluessel.
 *
 * Dasselbe Bild wie der Schritt "Einladung" der Event-Anmeldung
 * (mx5-registration-steps.css): dunkles Band mit Ueberschrift und Erklaerung,
 * darunter der Code in Kaestchen. Die Werte sind von dort uebernommen - jene
 * Datei laedt nur auf der Anmeldeseite, deshalb stehen sie hier noch einmal.
 * Schrift, Knopf und die rote Ueberschriften-Box kommen aus dem Theme.
 */

/* Das Modul steht allein im Artikel, ohne .centered-wrapper - die Breite des
   Inhalts setzt .centered-wrapper-inner im Template, die Flaechen ueber die
   volle Breite setzen Band und Bereich selbst. Den Abstand zum Fuss traegt
   der weisse Bereich, nicht das Grau der Seite darunter. */
.main-content:has(.mx5-key-login) {
    padding-bottom: 0;
}

.mx5-key-login__band {
    padding: 24px 0;
    background: #18181b;
    color: #fff;
}

.mx5-key-login .mx5-key-login__band h2 {
    margin-top: 0 !important;
}

.mx5-key-login__intro {
    margin: 12px 0 0;
}

.mx5-key-login__intro,
.mx5-key-login__intro p {
    color: #fff;
}

.mx5-key-login__intro > :first-child {
    margin-top: 0;
}

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

/* Die Hoehe haelt Platz fuer Kaestchen und Meldung, damit der Fuss nicht
   direkt unter dem Feld klebt. */
.mx5-key-login__body {
    padding: 24px 0 64px;
    background: #fff;
}

.mx5-key-login .mx5-key-login__label {
    margin-top: 0;
}

.mx5-key-login__hint {
    margin: 12px 0;
    font-size: .9em;
    color: #666;
}

/* ---------- Code in Kaestchen ---------- */

.mx5-key-login__code {
    display: flex;
    align-items: center;
    /* Kein Umbruch - sechs Kaestchen sind eine Eingabe, keine zwei Zeilen. */
    flex-wrap: nowrap;
    gap: 10px;
}

.mx5-key-login__code[hidden] {
    display: none;
}

/* Das Theme setzt "input.text { width: 100% !important }" - nur dasselbe
   Mittel hilft, sonst waere jedes Kaestchen so breit wie die Spalte. */
.mx5-key-login .mx5-key-login__box {
    /* Mitwachsend bis 3.2em, damit die Reihe auch auf 320 px in eine Zeile
       passt. */
    flex: 1 1 2em;
    min-width: 0;
    max-width: 3.2em;
    width: auto !important;
    height: 3.4em;
    margin: 0 !important;
    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-key-login .mx5-key-login__box:focus {
    border-color: var(--tidm-accent, #b60b27);
    box-shadow: 0 0 6px rgba(0, 0, 0, .1);
    outline: none;
}

.mx5-key-login .mx5-key-login__box:not(:placeholder-shown) {
    border-color: rgba(0, 0, 0, .35);
}

/* Abgewiesener Schluessel: die leeren Kaestchen rot umrandet, bis wieder
   getippt wird. */
.mx5-key-login .mx5-key-login__code.is-falsch .mx5-key-login__box {
    border-color: var(--tidm-accent, #b60b27);
}

.mx5-key-login__code.is-pruefend .mx5-key-login__box {
    opacity: .6;
}

.mx5-key-login__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-key-login__code.is-pruefend .mx5-key-login__spinner {
    opacity: 1;
    animation: mx5-key-login-dreh .8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .mx5-key-login__code.is-pruefend .mx5-key-login__spinner {
        animation: none;
    }
}

/* Schmale Telefone: sechs Kaestchen plus Abstaende passen sonst nicht in
   eine Zeile. */
@media (max-width: 400px) {
    .mx5-key-login__code {
        gap: 6px;
    }

    .mx5-key-login .mx5-key-login__box {
        max-width: 2.7em;
        height: 3.1em;
        font-size: 1em;
    }
}

/* Meldung wie in der Anmeldung: Rahmen in Textfarbe. Das Theme setzt
   "form p.error" auf Blockbreite ohne Rand - daher der laengere Selektor. */
.mx5-key-login form p.mx5-key-login__error {
    display: table;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 2px solid currentColor;
}

/* ---------- Ohne Skript ---------- */

.mx5-key-login__fallback {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 480px;
}

.mx5-key-login__fallback[hidden] {
    display: none;
}

.mx5-key-login .mx5-key-login__fallback input.text {
    flex: 1 1 200px;
    width: auto !important;
    margin: 0 !important;
    text-transform: uppercase;
}

.mx5-key-login .mx5-key-login__fallback .submit {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
}

.mx5-key-login__status {
    margin: 0;
}

/* ---------- Einladungscode anfordern (mod_mx5_invite_request) ---------- */

/* Das Feld teilt sich die Form mit dem Login-Ersatzfeld, nur ohne
   Grossbuchstaben - es ist eine E-Mail-Adresse. */
.mx5-invite-request .mx5-key-login__fallback input.text {
    text-transform: none;
}

/* Das Label steht im roten Schild der Ueberschrift - es soll dessen
   Schriftfarbe tragen, nicht die rote des Themes fuer Formular-Labels. */
.mx5-invite-request .mx5-key-login__label label {
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.mx5-invite-request__hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mx5-invite-request__sent {
    max-width: 560px;
    padding: 16px 20px;
    border-left: 4px solid var(--tidm-accent, #b60b27);
    background: #f5f5f5;
}

.mx5-invite-request__sent p {
    margin: 0;
}

.mx5-invite-request__sent p + p {
    margin-top: 8px;
}

.mx5-invite-request__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin: 24px 0 0;
}

/* Der ganze Block steht mittig - wie der Einladungscode im Anmeldeformular
   (28.09.2026). */
.mx5-invite-request .mx5-key-login__body {
    text-align: center;
}

.mx5-invite-request .mx5-key-login__label {
    margin-left: auto;
    margin-right: auto;
}

.mx5-invite-request .mx5-key-login__fallback {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.mx5-invite-request .mx5-invite-request__sent {
    margin-left: auto;
    margin-right: auto;
    border-left: 0;
    border-top: 4px solid var(--tidm-accent, #b60b27);
}

.mx5-invite-request .mx5-invite-request__links {
    justify-content: center;
}

/* Abgewiesene Eingabe: Feld rot umrandet, bis wieder getippt wird. */
.mx5-invite-request .mx5-key-login__fallback input.text[aria-invalid="true"] {
    border-color: var(--tidm-accent, #b60b27);
}

/* Meldung im Fenster - dieselben Werte wie .mx5-steps__dialog im
   Anmeldeformular; jene Datei laedt nur dort. */
.mx5-invite-request__dialog {
    max-width: 26em;
    padding: 24px;
    background: #fff;
}

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

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

/* Ohne Skript steht die Meldung mittig ueber dem Feld; mit Skript zeigt sie
   das Fenster und die Zeile ist ausgeblendet ("display: table" oben wuerde
   das hidden-Attribut sonst ueberstimmen). */
.mx5-invite-request form p.mx5-key-login__error {
    margin-left: auto;
    margin-right: auto;
}

.mx5-invite-request form p.mx5-key-login__error[hidden] {
    display: none;
}

/* Nach dem Absenden zeigt das Skript die Bestaetigung im Fenster und blendet
   das Formular wieder ein. Ohne Skript bleibt es bei der Bestaetigung. */
.mx5-invite-request [data-js-only] {
    display: none;
}

.mx5-invite-request__sent[hidden] {
    display: none;
}

.mx5-invite-request__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
    margin: 18px 0 0 !important;
}

/* Bestaetigung im Fenster: mittig wie das Formular dahinter. */
.mx5-invite-request__dialog {
    text-align: center;
}

.mx5-invite-request__dialog p {
    margin: 0;
}

.mx5-invite-request__dialog p + p {
    margin-top: 8px;
}

/* Die Ueberschrift ist ein <h3> und traegt damit die rote Box des Themes -
   ein Block mit fester Breite, mittig nur ueber die Raender. */
.mx5-invite-request__sent-title {
    margin: 0 auto 14px !important;
}

.mx5-invite-request a.submit,
.mx5-invite-request__dialog a.submit {
    display: inline-block;
    width: auto !important;
    text-decoration: none;
}

/* "Zur Anmeldung" ist ein Link, soll aber aussehen wie der Knopf
   "Anfordern" - das Theme gestaltet .submit nur an Knoepfen. Werte von dort
   abgelesen. */
.mx5-invite-request__dialog a.submit,
.mx5-invite-request a.submit {
    padding: 15px 20px;
    border-radius: 3px;
    background: var(--tidm-accent, #b60b27);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.mx5-invite-request__dialog a.submit:hover,
.mx5-invite-request__dialog a.submit:focus,
.mx5-invite-request a.submit:hover,
.mx5-invite-request a.submit:focus {
    color: #fff;
    filter: brightness(.9);
}

/* Im Fenster greift der h3-Stil des Themes nicht (Fancybox haengt ausserhalb
   des Inhalts) - dieselbe rote Box, Werte vom Schild "E-Mail-Adresse". */
.mx5-invite-request__dialog h3.mx5-invite-request__sent-title {
    width: fit-content;
    max-width: 100%;
    padding: 2px 15px;
    border-radius: 3px;
    background: var(--tidm-accent, #b60b27);
    color: #fff;
    font-family: Nunito, "Open Sans", sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
}