/* einstieg.css — Anmeldung, Registrierung, Onboarding, Beitritt, Warten, Einladung, Konto und
   Rechtliches (Nacht-Durchgang 14.10.2026).
   Eingebunden über Areas/Identity/Pages/_LayoutEinstieg.cshtml (alle Seiten in der Anmelde-Hülle)
   und über Areas/Identity/Pages/Account/Manage/_Layout.cshtml (Konto-Seiten in der App-Hülle).
   Die Datei lädt NACH dem Stilblock von _LayoutAuth und darf ihn deshalb ohne !important angleichen.
   Nur Tokens, keine festen Farben. */

/* Überschriften, Sätze, Trenner und Fehlertext der Anmelde-Hülle stehen seit dem Nacht-Durchgang
   15.10.2026 auf der Rampe direkt in _LayoutAuth — hier nur noch, was einzelne Seiten brauchen. */
.rollen-zurueck { font-size: var(--fs-body); margin: 4px 0 0; }
.rollen-zurueck a, .auth-zurueck a {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--tap); color: var(--text-secondary); font-weight: 600; text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .rollen-zurueck a:hover, .auth-zurueck a:hover { color: var(--text-primary); text-decoration: underline; } }
.auth-zurueck { text-align: center; margin: 8px 0 0; font-size: var(--fs-body); }

/* Validierungs- und Fehlertexte aus Tokens; Bootstraps .text-danger ist ein Utility mit !important. */
.auth-card .text-danger { color: var(--danger-text) !important; font-size: var(--fs-small); }
.auth-card .validation-summary-errors ul { list-style: none; margin: 0 0 12px; padding: 0; }
.auth-card .field-validation-error { display: block; margin-top: 4px; }

/* Ein Zustand mit Symbol (Bestätigt, Gesendet, Gesperrt, Abgemeldet …) */
.auth-zustand { text-align: center; }
.auth-symbol {
    display: inline-flex; width: 56px; height: 56px; border-radius: 50%;
    align-items: center; justify-content: center; margin: 0 0 12px;
    font-size: var(--fs-display); background: var(--bg-subtle); color: var(--text-secondary);
}
.auth-symbol-ok { background: var(--success-bg); color: var(--success-text); }
.auth-symbol-warnung { background: var(--warning-bg); color: var(--warning-text); }
.auth-symbol-fehler { background: var(--danger-bg); color: var(--danger-text); }

/* Hinweis im Formular: statt Bootstrap-Alert, 1-px-Rand, Farbe nur als Zustand */
.auth-hinweis {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg-subtle); color: var(--text-secondary);
    padding: 12px 14px; margin: 0 0 16px; font-size: var(--fs-small); line-height: 1.45; text-align: left;
}
.auth-hinweis strong { display: block; color: var(--text-primary); font-size: var(--fs-body); font-weight: 650; margin-bottom: 2px; }
.auth-hinweis p { margin: 0; }
.auth-hinweis p + p { margin-top: 6px; }
.auth-hinweis a { color: inherit; font-weight: 600; }
.auth-hinweis-ok { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.auth-hinweis-warnung { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.auth-hinweis-fehler { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.auth-hinweis-ok strong, .auth-hinweis-warnung strong, .auth-hinweis-fehler strong { color: inherit; }

/* Knöpfe in der Anmelde-Hülle: ein gefüllter (Bootstrap .btn-lg.btn-primary aus dem Layout), der zweite
   Weg als Umriss in Grau. Bootstraps .btn-outline-secondary bringt eigene Grautöne mit. */
.auth-card .btn-lg { font-size: var(--fs-eingabe); font-weight: 600; }
.auth-card .btn-outline-secondary,
.auth-card .auth-zweitweg {
    --bs-btn-color: var(--text-secondary); --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text-primary); --bs-btn-hover-bg: var(--bg-hover); --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-active-color: var(--text-primary); --bs-btn-active-bg: var(--bg-hover); --bs-btn-active-border-color: var(--border-strong);
    background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border-strong);
    min-height: var(--tap); font-weight: 600;
}
.auth-card .btn-link { color: var(--color-primary-text); font-weight: 600; text-decoration: none; min-height: var(--tap); }
@media (hover: hover) and (pointer: fine) { .auth-card .btn-link:hover { text-decoration: underline; } }
.auth-card .btn:focus-visible { outline: 2px solid var(--fokus-ring); outline-offset: 2px; box-shadow: none; }

/* ── Rollenwahl (Registrierung) ───────────────────────────────────────────────────────────── */
.rollen-hinweis { text-align: center; font-size: var(--fs-small); line-height: 1.45; color: var(--text-secondary); margin: 16px 0 0; text-wrap: pretty; }

/* ── Onboarding: Sportart als vorbelegter Wert mit Aufklapper ─────────────────────────────── */
.onboarding-sportart { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 14px; }
.onboarding-sportart > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: var(--tap); cursor: pointer; list-style: none; font-size: var(--fs-body); color: var(--text-primary);
}
.onboarding-sportart > summary::-webkit-details-marker { display: none; }
.onboarding-sportart-wert { display: inline-flex; align-items: center; gap: 8px; }
.onboarding-sportart-wert .bi { color: var(--text-muted); }
.onboarding-sportart-andere { color: var(--color-primary-text); font-weight: 600; font-size: var(--fs-small); white-space: nowrap; }
.onboarding-sportart[open] .onboarding-sportart-andere { color: var(--text-muted); }
.onboarding-sportart-feld { padding: 0 0 14px; }
.onboarding-sportart-feld .form-select { min-height: var(--tap); font-size: var(--fs-eingabe); }
.onboarding-hinweis { font-size: var(--fs-small); line-height: 1.45; color: var(--text-secondary); margin: 0; }
.onboarding-nebenwege { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 8px; text-align: center; }
.onboarding-nebenwege p { margin: 0; font-size: var(--fs-small); color: var(--text-secondary); }
.onboarding-nebenwege .btn-link, .onboarding-nebenwege a {
    display: inline-flex; align-items: center; min-height: var(--tap); padding: 0;
    color: var(--color-primary-text); font-weight: 600; font-size: var(--fs-small); text-decoration: none; vertical-align: baseline;
}
@media (hover: hover) and (pointer: fine) { .onboarding-nebenwege .btn-link:hover, .onboarding-nebenwege a:hover { text-decoration: underline; } }

/* ── Beitritt ─────────────────────────────────────────────────────────────────────────────── */
.beitritt-rolle { margin-top: 8px; color: var(--text-secondary); }
.beitritt-satz { font-size: var(--fs-body); color: var(--text-secondary); margin: 0 0 12px; text-align: center; }
.beitritt-feld-hinweis { display: block; font-size: var(--fs-meta); color: var(--text-muted); margin-top: 4px; }
/* Drei Antworten auf „Wer bist du?" (20.10.2026): nebeneinander, am schmalen Handy untereinander als Zeilen. */
.beitritt-wer.beitritt-wer-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.beitritt-wer.beitritt-wer-drei .sport-kachel { flex-direction: column; gap: .3rem; text-align: center; padding: .6rem .4rem; }
.beitritt-wer.beitritt-wer-drei .sport-kachel-name { font-size: var(--fs-small); line-height: 1.25; }
@media (max-width: 420px) {
    .beitritt-wer.beitritt-wer-drei { grid-template-columns: 1fr; }
    .beitritt-wer.beitritt-wer-drei .sport-kachel { flex-direction: row; justify-content: flex-start; gap: 10px; text-align: left; min-height: var(--tap); padding: .6rem .8rem; }
}
.beitritt-wer .sport-kachel { justify-content: center; border-width: 1px; }
.beitritt-wer .sport-kachel-symbol { font-size: var(--fs-titel); color: var(--text-secondary); }
.beitritt-wer .sport-kachel-wahl:checked + .sport-kachel .sport-kachel-symbol { color: var(--color-primary-text); }
.beitritt-elternhinweis { font-size: var(--fs-small); color: var(--text-secondary); margin: 0 0 8px; }
.beitritt-fuss { text-align: center; font-size: var(--fs-body); color: var(--text-secondary); margin: 16px 0 0; }
.beitritt-fuss { line-height: 1.5; }
.beitritt-fuss a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--color-primary-text); font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .beitritt-fuss a:hover { text-decoration: underline; } }
.beitritt-kopf + .auth-hinweis { margin-top: 4px; }

/* ── Warten ───────────────────────────────────────────────────────────────────────────────── */
.warten-zeile { font-size: var(--fs-body); padding: 6px 0; }
.warten-zeile span { color: var(--text-secondary); }
.warten-offen .bi { font-size: 8px; }
.warten-grund { font-size: var(--fs-body); color: var(--text-secondary); }
.warten-link .auth-weiche-feld { gap: 8px; }
.warten-link .form-control { min-height: var(--tap); font-size: var(--fs-eingabe); }
.warten-abmelden { text-align: center; margin: 16px 0 0; }
.warten-abmelden .btn-link { color: var(--text-secondary); font-weight: 600; }

/* ── Rechtstexte: Lese-Modus mit ruhiger Spalte (65–75 Zeichen) ───────────────────────────── */
.auth-card-breit:has(.rechtstext) { max-width: calc(68ch + 4rem); }
.rechtstext { font-size: var(--fs-body); }
.rechtstext h1 {
    font-family: var(--font-display); font-size: var(--fs-display); font-weight: 800; line-height: 1.15;
    letter-spacing: .01em; margin: 0 0 8px; text-wrap: balance;
}
.rechtstext h1 + p { font-size: var(--fs-small); color: var(--text-secondary); margin: 0 0 8px; }
.rechtstext h2 {
    font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700; line-height: 1.3;
    margin: 32px 0 8px; color: var(--text-primary); text-wrap: balance;
}
.rechtstext p, .rechtstext li { font-size: var(--fs-body); line-height: 1.6; color: var(--text-primary); max-width: 68ch; }
.rechtstext p { margin: 0 0 12px; }
.rechtstext ul, .rechtstext ol { padding-left: 1.25rem; margin: 0 0 12px; }
.rechtstext li + li { margin-top: 6px; }
.rechtstext a { color: var(--color-primary-text); text-underline-offset: 2px; }
.rechtstext code { font-size: var(--fs-small); color: var(--text-primary); background: var(--bg-subtle); border-radius: var(--radius-sm); padding: 1px 4px; }
.rechtstext-querverweise { margin-top: 32px !important; padding-top: 16px; border-top: 1px solid var(--border); font-size: var(--fs-small) !important; color: var(--text-secondary) !important; }
.rechtstext-querverweise a { display: inline-flex; align-items: center; min-height: var(--tap); }
@media (min-width: 768px) { .rechtstext h1 { font-size: 32px; } }
@media print {
    .rechtstext h2 { break-after: avoid; }
    .rechtstext p, .rechtstext li { max-width: none; }
}

/* ── Konto (Identity-Manage, App-Hülle) ───────────────────────────────────────────────────── */
.konto-inhalt { max-width: 640px; }
.konto-inhalt > .sm-card + .sm-card { margin-top: 16px; }
.konto-inhalt .sm-card-title { font-size: var(--fs-body); font-weight: 650; margin: 0; }
.konto-inhalt .sm-card-body > p { max-width: 65ch; }
.konto-inhalt .sm-card-body > p:last-child { margin-bottom: 0; }
.konto-inhalt .sm-form-control:disabled, .konto-inhalt .sm-form-control[readonly] { background: var(--bg-subtle); color: var(--text-secondary); }
.konto-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.konto-knoepfe form { margin: 0; }
.konto-inhalt .btn-danger-sm { min-height: var(--tap); font-size: var(--fs-ui); padding: 0 18px; }
.konto-feld-zeile { display: flex; gap: 8px; align-items: center; }
.konto-feld-zeile .sm-form-control { flex: 1 1 auto; min-width: 0; }
.konto-bestaetigt { display: inline-flex; align-items: center; gap: 6px; color: var(--success-text); font-size: var(--fs-meta); font-weight: 600; margin-top: 6px; }
.konto-offen { display: inline-flex; align-items: center; gap: 6px; color: var(--warning-text); font-size: var(--fs-meta); font-weight: 600; }
.konto-hinweis {
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle);
    color: var(--text-secondary); padding: 12px 14px; margin: 0 0 16px; font-size: var(--fs-small); line-height: 1.45;
}
.konto-hinweis strong { display: block; color: var(--text-primary); font-size: var(--fs-body); font-weight: 650; margin-bottom: 2px; }
.konto-hinweis p { margin: 0; }
.konto-hinweis p + p { margin-top: 6px; }
.konto-hinweis a { color: inherit; font-weight: 600; text-underline-offset: 2px; }
.konto-hinweis-warnung { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.konto-hinweis-fehler { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.konto-hinweis-ok { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.konto-hinweis-warnung strong, .konto-hinweis-fehler strong, .konto-hinweis-ok strong { color: inherit; }
.konto-inhalt .text-danger { color: var(--danger-text) !important; font-size: var(--fs-small); }
.konto-inhalt .validation-summary-errors ul { list-style: none; margin: 0 0 12px; padding: 0; }
.konto-inhalt .field-validation-error { display: block; margin-top: 4px; }
.konto-schritte { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 16px; }
.konto-schritte > li { padding-left: 4px; }
.konto-schritte > li::marker { font-weight: 700; color: var(--text-secondary); }
.konto-schritte p { margin: 0 0 8px; }
.konto-schluessel {
    display: inline-block; font-family: ui-monospace, monospace; font-size: var(--fs-body); letter-spacing: .04em;
    padding: 4px 8px; border-radius: var(--radius-sm); background: var(--bg-subtle); color: var(--text-primary);
    border: 1px solid var(--border); overflow-wrap: anywhere; user-select: all;
}
.konto-qr { display: inline-block; padding: 8px; margin: 8px 0; background: #fff; /* QR-Code braucht hellen Grund, auch im Dunkelmodus */ border-radius: var(--radius-sm); border: 1px solid var(--border); }
.konto-qr img, .konto-qr canvas { display: block; }
.konto-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.konto-codes li {
    font-family: ui-monospace, monospace; font-size: var(--fs-body); letter-spacing: .04em; text-align: center;
    padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-subtle); color: var(--text-primary);
}
.konto-dienste { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); }
.konto-dienste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 14px; }
.konto-dienste li + li { border-top: 1px solid var(--border); }
.konto-dienste-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.konto-zwischentitel { font-size: var(--fs-small); font-weight: 650; color: var(--text-primary); margin: 0 0 8px; }
@media (max-width: 600px) {
    /* Reiter brechen um: als Wischleiste lag der aktive Reiter („Sicherheit") außerhalb des Bildes. */
    .konto-knoepfe > .btn-primary-sm, .konto-knoepfe > .btn-ghost-sm, .konto-knoepfe > .btn-danger-sm,
    .konto-knoepfe > form, .konto-knoepfe > form > button { width: 100%; justify-content: center; }
}

/* Fehlerkästen bekommen per Skript den Fokus (Screenreader liest sie vor) — ohne zweiten Rahmen. */
#beitritt-fehler:focus, #einladung-fehler:focus { outline: none; }


/* Gefährliche Knöpfe sind auf diesen Seiten so groß wie alle anderen (Tippfläche 44 px). */
.btn-danger-sm { min-height: var(--tap); font-size: var(--fs-ui); padding: 0 18px; }
.konto-loeschen-knopf { list-style: none; cursor: pointer; width: fit-content; }
.konto-loeschen-knopf::-webkit-details-marker { display: none; }

/* Stand als Pille: .stand-mini aus site.css (die eine Pille der App), hier nichts Eigenes. */

/* Einladungen als Zeilen */
.einladung-liste { list-style: none; margin: 0; padding: 0; }
.einladung-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 18px; }
.einladung-zeile + .einladung-zeile { border-top: 1px solid var(--border); }
.einladung-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.einladung-text strong { font-size: var(--fs-body); font-weight: 650; overflow-wrap: anywhere; }
.einladung-text span { font-size: var(--fs-meta); color: var(--text-secondary); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.einladung-aktionen { grid-column: 1 / -1; }
.feedback-danke { font-size: var(--fs-body); font-weight: 650; margin: 0 0 4px; }
.feedback-kopie { display: flex; align-items: center; gap: 8px; min-height: var(--tap); margin: 0; font-size: var(--fs-body); }

/* Übernahme-Anfragen: Zeilen statt Bootstrap-list-group */
.uebernahme-liste { list-style: none; margin: 0; padding: 0; }
.uebernahme-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; }
.uebernahme-zeile + .uebernahme-zeile { border-top: 1px solid var(--border); }
.uebernahme-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uebernahme-text strong { font-size: var(--fs-body); font-weight: 650; overflow-wrap: anywhere; }
.uebernahme-text span { font-size: var(--fs-meta); color: var(--text-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ── Passwort anzeigen (einstieg.js, Nacht 2 16.10.2026) ─────────────────────────────────────
   Das Auge sitzt im Feld rechts, 44 px Tippfläche. Ein Tipp zeigt alle Passwortfelder des Formulars. */
.pw-feld { position: relative; display: block; }
.pw-feld > input { padding-right: 52px !important; }
.pw-auge {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted);
    font-size: 18px; cursor: pointer; z-index: 3;
    transition: color var(--dauer) var(--ease-aus), transform var(--dauer-schnell) var(--ease-aus);
}
.form-floating.pw-feld > .pw-auge { top: 29px; }
.pw-auge[aria-pressed="true"] { color: var(--text-primary); }
.pw-auge:active { transform: translateY(-50%) scale(.94); }
.pw-auge:focus-visible { outline: 2px solid var(--fokus-ring); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .pw-auge:hover { color: var(--text-primary); } }
@media (prefers-reduced-motion: reduce) { .pw-auge { transition: none; } .pw-auge:active { transform: translateY(-50%); } }

/* ── Schalter, der sofort speichert (Benachrichtigungen, konto-einstellungen.js) ──────────────
   Ganze Zeile ist die Tippfläche (44 px). Der Knopf gleitet in 160 ms (ease-out), Farbe = Zustand. */
.konto-schalter { display: inline-flex; align-items: center; gap: 12px; min-height: var(--tap); cursor: pointer; font-weight: 600; color: var(--text-primary); }
.konto-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.konto-schalter-bahn {
    position: relative; flex: none; width: 44px; height: 26px; border-radius: var(--radius-pill);
    background: var(--text-muted); transition: background-color var(--dauer) var(--ease-aus);
}
.konto-schalter-bahn::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--bg-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .2);
    transition: transform 160ms var(--ease-aus);
}
.konto-schalter input:checked + .konto-schalter-bahn { background: var(--success-solid, var(--success-text)); }
.konto-schalter input:checked + .konto-schalter-bahn::after { transform: translateX(18px); }
.konto-schalter input:focus-visible + .konto-schalter-bahn { outline: 2px solid var(--fokus-ring); outline-offset: 2px; }
.konto-schalter input:disabled + .konto-schalter-bahn { opacity: .7; }
@media (prefers-reduced-motion: reduce) { .konto-schalter-bahn, .konto-schalter-bahn::after { transition: none; } }

/* Konto › Profil: Verweis auf „Mein Profil“ (Name, Foto), Nacht 2 */
.konto-verweis { display: flex; gap: 8px; align-items: baseline; margin: 0 0 16px; font-size: var(--fs-small); color: var(--text-secondary); }
.konto-verweis a { color: var(--color-primary-text); font-weight: 600; }


/* Löschantrag: Grund zum Antippen, freiwillig (Mike, 21.10.2026). */
.loesch-grund { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.loesch-grund-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.loesch-grund-chip { position: relative; display: inline-flex; }
.loesch-grund-chip input { position: absolute; opacity: 0; pointer-events: none; }
.loesch-grund-chip span { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-surface); color: var(--text-primary); font-size: var(--fs-small); cursor: pointer; }
.loesch-grund-chip input:checked + span { background: var(--primary-bg); border-color: var(--color-primary); color: var(--color-primary-text); font-weight: 600; }
.loesch-grund-chip input:focus-visible + span { outline: 2px solid var(--fokus-ring, var(--color-primary)); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .loesch-grund-chip span:hover { background: var(--bg-hover); } }
/* Aufgeklappt bleibt nur „Löschung jetzt beantragen“ — vorher standen zwei Löschen-Knöpfe übereinander (21.10.2026). */
.konto-loeschen[open] > .konto-loeschen-knopf { display: none; }
.konto-loeschen[open] > form { margin-top: 0 !important; }
.konto-loeschen-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }

/* Abwesenheit melden (21.10.2026): dieselben Karten wie „Meine Daten" */
.abwesenheit-formular { display: flex; flex-direction: column; gap: 16px; }
.abwesenheit-zeitraum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 420px; }
.abwesenheit-zeitraum .daten-frage { margin-bottom: 6px; }
.abwesenheit-laufend .daten-antrag-titel .bi { margin-right: 4px; }
.abwesenheit-laufend .daten-satz a { font-weight: 600; }
.abwesenheit-vergangen { border-top: 1px solid var(--border); padding-top: 8px; }
.persoenliche-abwesenheiten .list-group { margin: 0 -4px; }

/* Konto & Sicherheit (21.10.2026): Übersicht als Karten mit Stand, wie „Meine Daten" */
.konto-karten { display: flex; flex-direction: column; gap: 10px; }
.konto-karte { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0; color: var(--text-primary); text-decoration: none; }
.konto-karte-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.konto-karte-titel { font-size: var(--fs-ui); font-weight: 650; }
.konto-karte-satz { font-size: var(--fs-small); color: var(--text-secondary); }
.konto-karte .stand-mini { flex: none; }
.konto-karte-pfeil { flex: none; color: var(--text-muted); }
.konto-karte:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .konto-karte:hover { background: var(--bg-hover); } }
.konto-karten + .konto-verweis { margin-top: 16px; }

/* Abwesenheit: Grund-Knöpfe wie im Absage-Kasten, als Radios */
.abwesenheit-grund { margin: 0; min-width: 0; }
.abwesenheit-grund > legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; }
.abwesenheit-grund > legend + * { clear: both; }
.ses-grund-wahl { position: relative; display: inline-flex; margin: 0; }
.ses-grund-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.ses-grund-wahl .ses-chip { cursor: pointer; }
.ses-grund-wahl input:checked + .ses-grund { background: var(--danger-solid); border-color: var(--danger-solid); color: var(--on-solid); }
.ses-grund-wahl input:focus-visible + .ses-grund { outline: 2px solid var(--fokus-ring, var(--color-primary)); outline-offset: 2px; }

/* Spieler-Startseite: Zahl der Zusagen im Team, leise in der Meta-Zeile (22.10.2026) */
.termin-meta-dabei { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.termin-meta-dabei .bi { margin-right: 0.25rem; }