/* /Auth/Seiten/AuthKarte.razor.rz.scp.css */
/* Die Tokens kommen aus wwwroot/app.css und werden hier NICHT neu definiert.

   Bis zur CI-Umstellung standen sie hier als Kopie -- damals durfte dieses Paket
   app.css nicht anfassen. Die Kopie hat den Austauschpunkt der Vereins-CI
   ausgehebelt: --accent stand hier weiter auf dem alten #1F5FA8, und die
   Anmeldeseiten blieben blau, waehrend der Rest der Anwendung schon in den
   Vereinsfarben lief. Ausserdem kannte die Kopie nur prefers-color-scheme,
   nicht die manuelle Umschaltung ueber [data-theme]. Custom Properties erben
   ueber den DOM, unabhaengig von der Scope-Kennung der CSS-Isolierung -- :root
   aus app.css reicht also bis hier herunter. */
.auth-shell[b-ifu5nev5ix] {
    display: flex;
    justify-content: center;
    padding: 40px 16px;
    min-height: 60vh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.5;
}

.auth-karte[b-ifu5nev5ix] {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 24px 22px;
}

.auth-karte h1[b-ifu5nev5ix] {
    margin: 0 0 4px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: .02em;
}

.auth-untertitel[b-ifu5nev5ix] {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 13.5px;
}

/* Gemeinsame Formularelemente fuer alle Anmeldeseiten. ::deep durchbricht bewusst die
   CSS-Isolierung: die Seiten selbst (Registrieren.razor & Co.) sind Kind-Inhalt von
   AuthKarte und tragen ihre eigene Scope-Kennung, nicht die von AuthKarte -- ohne
   ::deep wuerden diese Regeln nie greifen. So bleibt das Formular-Aussehen an genau
   einer Stelle definiert. */
.auth-shell[b-ifu5nev5ix]  .feld {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.auth-shell[b-ifu5nev5ix]  .feld label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.auth-shell[b-ifu5nev5ix]  .feld input {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}

.auth-shell[b-ifu5nev5ix]  .feld input:focus-visible,
.auth-shell[b-ifu5nev5ix]  button:focus-visible,
.auth-shell[b-ifu5nev5ix]  a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.auth-shell[b-ifu5nev5ix]  .feld-hinweis {
    font-size: 11.5px;
    color: var(--muted);
}

.auth-shell[b-ifu5nev5ix]  .validation-message {
    color: var(--alert);
    font-size: 12.5px;
}

.auth-shell[b-ifu5nev5ix]  button[type="submit"],
.auth-shell[b-ifu5nev5ix]  .schaltflaeche {
    display: inline-block;
    padding: 10px 18px;
    border: none;
    border-radius: 4px;
    background: var(--accent);
    color: var(--marke-kontrast);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    min-height: 44px;
}

.auth-shell[b-ifu5nev5ix]  button[type="submit"]:hover,
.auth-shell[b-ifu5nev5ix]  .schaltflaeche:hover {
    filter: brightness(1.08);
}

.auth-shell[b-ifu5nev5ix]  .meldung {
    padding: 12px 14px;
    border-radius: 4px;
    background: var(--full-soft);
    color: var(--ink);
    border: 1px solid var(--full);
    margin-bottom: 16px;
    font-size: 13.5px;
}

.auth-shell[b-ifu5nev5ix]  .meldung-fehler {
    background: var(--alert-soft);
    border-color: var(--alert);
}

.auth-shell[b-ifu5nev5ix]  .auth-fuss {
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--muted);
}

.auth-shell[b-ifu5nev5ix]  .auth-fuss a {
    color: var(--accent);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-bt180koe7s],
.components-reconnect-repeated-attempt-visible[b-bt180koe7s],
.components-reconnect-failed-visible[b-bt180koe7s],
.components-pause-visible[b-bt180koe7s],
.components-resume-failed-visible[b-bt180koe7s],
.components-rejoining-animation[b-bt180koe7s] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-bt180koe7s],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-bt180koe7s],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-bt180koe7s],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-bt180koe7s],
#components-reconnect-modal.components-reconnect-retrying[b-bt180koe7s],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-bt180koe7s],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-bt180koe7s],
#components-reconnect-modal.components-reconnect-failed[b-bt180koe7s],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-bt180koe7s] {
    display: block;
}


#components-reconnect-modal[b-bt180koe7s] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-bt180koe7s 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-bt180koe7s 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-bt180koe7s 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-bt180koe7s]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-bt180koe7s 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-bt180koe7s {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-bt180koe7s {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-bt180koe7s {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-bt180koe7s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-bt180koe7s] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-bt180koe7s] {
    border: 0;
    /* Die Karte ist fest weiss und --marke immer das dunkle Vereinsblau,
       deshalb hier Weiss und nicht --marke-kontrast (das im Dunkelmodus kippt). */
    background-color: var(--marke);
    color: #FFFFFF;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-bt180koe7s] {
        filter: brightness(1.15);
    }

    #components-reconnect-modal button:active[b-bt180koe7s] {
        filter: none;
    }

.components-rejoining-animation[b-bt180koe7s] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-bt180koe7s] {
        position: absolute;
        border: 3px solid var(--marke);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-bt180koe7s 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-bt180koe7s] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-bt180koe7s {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Verwaltung/Stammdaten/Altersklassen.razor.rz.scp.css */
.stamm-seite[b-gzc5y71v8i] { display: block; }

.stamm-tabelle[b-gzc5y71v8i] { width: 100%; border-collapse: collapse; margin-block: 8px; }
.stamm-tabelle th[b-gzc5y71v8i], .stamm-tabelle td[b-gzc5y71v8i] {
  padding: 6px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; font-size: 13.5px;
}
.schmal[b-gzc5y71v8i] { width: 72px; }
code[b-gzc5y71v8i] { background: var(--surface2); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
/* /Verwaltung/Stammdaten/Aufgaben.razor.rz.scp.css */
.stamm-seite[b-kivyzjijes] { display: block; }

.stamm-karte[b-kivyzjijes] {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-karte);
  padding: 16px; margin-block: 14px;
}
.formzeile[b-kivyzjijes] { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.formzeile label[b-kivyzjijes] { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }

.stamm-tabelle[b-kivyzjijes] { width: 100%; border-collapse: collapse; margin-block: 8px; }
.stamm-tabelle th[b-kivyzjijes], .stamm-tabelle td[b-kivyzjijes] {
  padding: 6px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; font-size: 13.5px;
}
.stamm-tabelle input:not([type="checkbox"])[b-kivyzjijes], .stamm-tabelle select[b-kivyzjijes] { width: 100%; }
.schmal[b-kivyzjijes] { width: 72px; }
/* /Verwaltung/Stammdaten/Mannschaften.razor.rz.scp.css */
.stamm-seite[b-90os73ts02] { display: block; }
.stamm-text[b-90os73ts02] { color: var(--muted); font-size: 12.5px; max-width: 720px; }

.stamm-saisonwahl[b-90os73ts02] {
  display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted);
  max-width: 320px; margin-block: 14px 16px;
}

.stamm-tabelle[b-90os73ts02] { width: 100%; border-collapse: collapse; margin-block: 8px; }
.stamm-tabelle th[b-90os73ts02], .stamm-tabelle td[b-90os73ts02] {
  padding: 6px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; font-size: 13.5px;
}
.stamm-tabelle input[b-90os73ts02] { width: 100%; }
/* /Verwaltung/Stammdaten/Saisons.razor.rz.scp.css */
.stamm-seite[b-xbsd3i7czv] { display: block; }
.stamm-text[b-xbsd3i7czv] { color: var(--muted); font-size: 12.5px; }

.stamm-karte[b-xbsd3i7czv] {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-karte);
  padding: 16px; margin-block: 14px;
}
.formzeile[b-xbsd3i7czv] { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.formzeile label[b-xbsd3i7czv] { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }

.stamm-tabelle[b-xbsd3i7czv] { width: 100%; border-collapse: collapse; margin-block: 8px; }
.stamm-tabelle th[b-xbsd3i7czv], .stamm-tabelle td[b-xbsd3i7czv] {
  padding: 6px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; font-size: 13.5px;
}
.stamm-tabelle input[b-xbsd3i7czv] { width: 100%; }

.pille-aktiv[b-xbsd3i7czv] {
  display: inline-block; background: var(--full-soft); color: var(--full);
  border-radius: var(--radius-pille); padding: 3px 10px; font-size: 12px; font-weight: 600;
}
/* /Verwaltung/Stammdaten/Spielstaetten.razor.rz.scp.css */
/* Tokens (--accent, --surface, --line, --line-soft, --muted, --open, --open-soft, --full,
   --full-soft, --radius-karte, --radius-pille, --knopf, .wrap, .knopf, .meldung) kommen aus
   wwwroot/app.css und werden hier nicht neu definiert. AP-2.2 legt zusaetzlich
   wwwroot/verwaltung.css an -- ein paar der hier lokal (scoped) definierten Klassen waeren
   dort als gemeinsame Klassen gut aufgehoben, siehe INTEGRATION.md. */

.stamm-seite[b-poo5m8tm5s] { display: block; }
.stamm-text[b-poo5m8tm5s] { color: var(--muted); font-size: 12.5px; }

.stamm-karte[b-poo5m8tm5s] {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-karte);
  padding: 16px; margin-block: 14px;
}
.offene-zuordnung[b-poo5m8tm5s] { border-color: var(--open); background: var(--open-soft); }

.offenes-feld[b-poo5m8tm5s] {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  flex-wrap: wrap; padding-block: 10px; border-top: 1px dashed var(--line);
}
.offenes-feld:first-of-type[b-poo5m8tm5s] { border-top: 0; }
.offenes-feld-aktion[b-poo5m8tm5s] { display: flex; gap: 8px; align-items: center; }
.vorschlag[b-poo5m8tm5s] { font-size: 12.5px; color: var(--accent); margin-top: 4px; }

.formzeile[b-poo5m8tm5s] { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 6px; }
.formzeile label[b-poo5m8tm5s] { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.stamm-checkbox[b-poo5m8tm5s] { flex-direction: row !important; align-items: center; gap: 6px !important; }
.neues-feld[b-poo5m8tm5s] { margin-top: 6px; }

.stamm-tabelle[b-poo5m8tm5s] { width: 100%; border-collapse: collapse; margin-block: 8px; }
.stamm-tabelle th[b-poo5m8tm5s], .stamm-tabelle td[b-poo5m8tm5s] {
  padding: 6px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; font-size: 13.5px;
}
.stamm-tabelle input[b-poo5m8tm5s] { width: 100%; }
/* /Verwaltung/Stammdaten/Teamzuordnung.razor.rz.scp.css */
.stamm-seite[b-sk71lgyvie] { display: block; }
.stamm-text[b-sk71lgyvie] { color: var(--muted); font-size: 12.5px; max-width: 720px; }

.stamm-saisonwahl[b-sk71lgyvie] {
  display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted);
  max-width: 320px; margin-block: 14px 16px;
}

.stamm-karte[b-sk71lgyvie] {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-karte);
  padding: 16px; margin-block: 14px;
}
.offene-zuordnung[b-sk71lgyvie] { border-color: var(--open); background: var(--open-soft); }

.offenes-feld[b-sk71lgyvie] {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  flex-wrap: wrap; padding-block: 10px; border-top: 1px dashed var(--line);
}
.offenes-feld:first-of-type[b-sk71lgyvie] { border-top: 0; }
.offenes-feld-aktion[b-sk71lgyvie] { display: flex; gap: 8px; align-items: center; }

.stamm-tabelle[b-sk71lgyvie] { width: 100%; border-collapse: collapse; margin-block: 8px; }
.stamm-tabelle th[b-sk71lgyvie], .stamm-tabelle td[b-sk71lgyvie] {
  padding: 6px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; font-size: 13.5px;
}
/* /Verwaltung/Stammdaten/Uebersicht.razor.rz.scp.css */
.stamm-seite[b-pnjlsw550m] { display: block; }
.stamm-text[b-pnjlsw550m] { color: var(--muted); font-size: 12.5px; }

.stamm-kacheln[b-pnjlsw550m] {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px; margin-top: 14px;
}
.stamm-kachel[b-pnjlsw550m] {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-karte); padding: 16px; text-decoration: none; color: var(--ink);
}
.stamm-kachel:hover[b-pnjlsw550m] { border-color: var(--accent); }
.stamm-kachel h3[b-pnjlsw550m] { font-size: 16px; margin-bottom: 6px; color: var(--accent); }
.stamm-kachel p[b-pnjlsw550m] { font-size: 13px; color: var(--muted); margin: 0; }
/* /Verwaltung/Syncs/Komponenten/ImportErgebnisKarte.razor.rz.scp.css */
/* Scoped auf diese Komponente -- Tokens kommen aus wwwroot/app.css, generische Klassen
   (.karte, .karte-kopf, .karte-inhalt, .badge, .badge-*, .hinweistext, .warnhinweis, .num)
   aus wwwroot/verwaltung.css. Beides wird hier nur GELESEN, nicht verändert (siehe
   INTEGRATION.md-Eintrag von AP-2.3 zum selben Vorgehen). */

.ergebnis-kopf[b-ukwzwjlgx8] {
  justify-content: space-between;
  align-items: center;
}

.abzeichen[b-ukwzwjlgx8] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ist-probelauf[b-ukwzwjlgx8] {
  border-color: var(--accent);
}

.probelauf-abzeichen[b-ukwzwjlgx8] {
  font-weight: 700;
}

.ergebnis-zahlen[b-ukwzwjlgx8] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 16px;
  margin: 0 0 14px;
}

.ergebnis-zahlen > div[b-ukwzwjlgx8] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ergebnis-zahlen dt[b-ukwzwjlgx8] {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.ergebnis-zahlen dd[b-ukwzwjlgx8] {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
}

.warnungsliste[b-ukwzwjlgx8] {
  margin: 0 0 14px;
  padding-inline-start: 20px;
  font-size: 13px;
}

.warnungsliste li[b-ukwzwjlgx8] {
  margin-bottom: 4px;
}

.fehlertext[b-ukwzwjlgx8] {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}