/* Name: public/assets/css/stadion.css – Gestaltung der Stadionverwaltung, Hauptmenü unter 992 Pixeln Breite einklappbar, größere Schaltflächen bei Bedienung mit dem Finger, Tabellen als Blöcke unter 992 Pixeln Breite (Klasse tabelle-karten), Online-Anzeige in der Kopfzeile, Kopfzeile in allen Breiten mit Name und „Abmelden“ neben dem Logo und Menü darunter (sichtbare Reihenfolge wie im Quelltext, WCAG 1.3.2 und 2.4.3), unter 576 Pixeln Breite Name in eigener Zeile der Kopfzeile, Bereiche der Kopfzeile umbrechend bei Platzmangel (WCAG 1.4.4), Barrierefreiheit: Rahmen von Eingabefeldern mit mindestens 3:1 Kontrast (WCAG 1.4.11), deutlich sichtbarer Tastaturfokus (WCAG 2.4.7), Sprunglink zum Inhalt (WCAG 2.4.1), Logo für Deutsche Gebärdensprache in der Fußzeile und über dem Video (Anlage 2 Teil 1 BITV 2.0, Größe in em, wächst mit der Schrift), Kennzeichnung fehlerhafter Felder und Fehlerliste (WCAG 3.3.1, nicht nur über die Farbe nach WCAG 1.4.1) */

:root {
    --stadion-gruen: #005f30;
    --stadion-gruen-dunkel: #004623;
    --stadion-gruen-hell: #e6f0eb;
    --stadion-rot: #d6243e;
    --stadion-lila: #771973;
    --stadion-orange: #ffae36;
    --stadion-hellblau: #41c2ea;
    --stadion-text: #1c1c1c;
    --stadion-text-leise: #5b6660;
    --stadion-linie: #d9dfdb;
    /* Rahmen von Eingabefeldern: 3,67:1 auf Weiß, 3,15:1 auf --stadion-gruen-hell */
    --stadion-feldrahmen: #7d8882;
    /* Tastaturfokus: 11,05:1 auf Weiß */
    --stadion-fokus: #004623;

    --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --bs-body-color: var(--stadion-text);
    --bs-body-bg: #ffffff;
    --bs-link-color: var(--stadion-gruen);
    --bs-link-color-rgb: 0, 95, 48;
    --bs-link-hover-color: var(--stadion-gruen-dunkel);
    --bs-link-hover-color-rgb: 0, 70, 35;
    --bs-border-color: var(--stadion-linie);
    --bs-primary: var(--stadion-gruen);
    --bs-primary-rgb: 0, 95, 48;
    --bs-danger: var(--stadion-rot);
    --bs-danger-rgb: 214, 36, 62;
    --bs-focus-ring-color: var(--stadion-fokus);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.55;
}

/* Sprunglink „Zum Inhalt springen“: nur bei Tastaturfokus sichtbar */
.sprunglink:focus {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2000;
    padding: 0.5rem 1rem;
    background: #ffffff;
    color: var(--stadion-gruen);
    font-weight: 600;
    border-radius: 0.35rem;
}

/* Ziel des Sprunglinks: kein Fokusrahmen um den ganzen Inhalt */
main:focus {
    outline: 0;
}

/* Laufbahnlinien in den fünf Stadionfarben */
.bahnen {
    display: flex;
    height: 6px;
}

.bahnen span {
    flex: 1;
}

.bahnen span:nth-child(1) { background: var(--stadion-gruen); }
.bahnen span:nth-child(2) { background: var(--stadion-hellblau); }
.bahnen span:nth-child(3) { background: var(--stadion-orange); }
.bahnen span:nth-child(4) { background: var(--stadion-rot); }
.bahnen span:nth-child(5) { background: var(--stadion-lila); }

.kopfzeile {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--stadion-linie);
}

.logo {
    height: 52px;
    width: auto;
}

.inhalt {
    flex: 1;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.fusszeile {
    padding: 1rem 0;
    font-size: 0.875rem;
    color: var(--stadion-text-leise);
    border-top: 1px solid var(--stadion-linie);
}

.dgs-logo {
    width: auto;
    max-width: 100%;
}

.dgs-logo-fuss {
    height: 1.5em;
    vertical-align: middle;
    margin-right: 0.3em;
    border-radius: 0.15em;
}

.dgs-logo-video {
    display: block;
    height: 3.5rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
}

h1, h2, h3 {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--stadion-text);
}

h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.einleitung {
    color: var(--stadion-text-leise);
    max-width: 40rem;
    margin-bottom: 2rem;
}

/* Schaltflächen */
.btn {
    font-weight: 600;
    border-radius: 0.375rem;
    padding: 0.55rem 1.25rem;
}

.btn-primary {
    --bs-btn-bg: var(--stadion-gruen);
    --bs-btn-border-color: var(--stadion-gruen);
    --bs-btn-hover-bg: var(--stadion-gruen-dunkel);
    --bs-btn-hover-border-color: var(--stadion-gruen-dunkel);
    --bs-btn-active-bg: var(--stadion-gruen-dunkel);
    --bs-btn-active-border-color: var(--stadion-gruen-dunkel);
    --bs-btn-disabled-bg: var(--stadion-gruen);
    --bs-btn-disabled-border-color: var(--stadion-gruen);
}

.btn-outline-secondary {
    --bs-btn-color: var(--stadion-text);
    --bs-btn-border-color: var(--stadion-linie);
    --bs-btn-hover-bg: var(--stadion-gruen-hell);
    --bs-btn-hover-color: var(--stadion-text);
    --bs-btn-hover-border-color: var(--stadion-gruen);
}

/* Rahmen von Eingabefeldern, Auswahlfeldern, Kontrollkästchen und Optionsfeldern */
.form-control,
.form-select,
.form-check-input {
    border-color: var(--stadion-feldrahmen);
}

/* Tastaturfokus: durchgehender Rahmen mit Abstand für alle bedienbaren Elemente */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus-visible,
.fc .fc-button:focus-visible,
.fc .fc-event:focus-visible {
    outline: 3px solid var(--stadion-fokus);
    outline-offset: 2px;
    box-shadow: none;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--stadion-fokus);
}

/* Fokus durch Mausklick: Bootstrap-Schatten bei Kontrollkästchen entfernen, Rahmen erscheint nur bei Tastaturbedienung */
.form-check-input:focus {
    box-shadow: none;
}

/* Formulare */
.form-label {
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.form-text {
    color: var(--stadion-text-leise);
}

.formular {
    max-width: 36rem;
}

/* Fehlerhafte Felder: Rahmen in Rot (5,02:1 auf Weiß) und doppelt so breit; zusätzlich Meldung mit Zeichen am Feld */
.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-check-input[aria-invalid="true"] {
    border-color: var(--stadion-rot);
    border-width: 2px;
}

.form-control[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus {
    border-color: var(--stadion-rot);
}

/* Meldung am Feld: Text 7,74:1 auf Weiß */
.feld-fehler {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.3rem;
    color: #a3172b;
    font-weight: 600;
    font-size: 0.925rem;
}

.feld-fehler-zeichen {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.1rem;
    border-radius: 50%;
    background: #a3172b;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

/* Fehlerliste über dem Formular: erhält beim Laden den Fokus, ohne Fokusrahmen (nicht bedienbar) */
.fehlerliste:focus {
    outline: 0;
}

.fehlerliste-titel {
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.fehlerliste a {
    color: inherit;
    text-decoration: underline;
}

.fehlerliste a:hover {
    text-decoration-thickness: 2px;
}

/* Hinweise */
.alert {
    border-radius: 0.375rem;
    border-width: 0 0 0 4px;
}

.alert-danger {
    --bs-alert-bg: #fbe9ec;
    --bs-alert-color: #7a1022;
    --bs-alert-border-color: var(--stadion-rot);
}

.alert-warning {
    --bs-alert-bg: #fff4e2;
    --bs-alert-color: #6b4200;
    --bs-alert-border-color: var(--stadion-orange);
}

.alert-success {
    --bs-alert-bg: var(--stadion-gruen-hell);
    --bs-alert-color: var(--stadion-gruen-dunkel);
    --bs-alert-border-color: var(--stadion-gruen);
}

/* Schrittfolge des Installers */
.schritte {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    counter-reset: schritt;
}

.schritte li {
    counter-increment: schritt;
    position: relative;
    padding: 0.5rem 0 0.5rem 2.75rem;
    color: var(--stadion-text-leise);
}

.schritte li::before {
    content: counter(schritt);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--stadion-linie);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.875rem;
    background: #ffffff;
}

.schritte li.erledigt::before {
    content: '✓';
    border-color: var(--stadion-gruen);
    background: var(--stadion-gruen);
    color: #ffffff;
}

.schritte li.aktuell {
    color: var(--stadion-text);
    font-weight: 700;
}

.schritte li.aktuell::before {
    border-color: var(--stadion-gruen);
    color: var(--stadion-gruen);
}

@media (min-width: 992px) {
    .schritte {
        position: sticky;
        top: 2rem;
    }

    .schritte li + li::after {
        content: '';
        position: absolute;
        left: calc(1rem - 1px);
        top: -0.5rem;
        height: 1rem;
        border-left: 2px solid var(--stadion-linie);
    }
}

/* Prüfliste */
.pruefliste {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    max-width: 44rem;
    border-top: 1px solid var(--stadion-linie);
}

.pruefliste li {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    gap: 0 0.5rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--stadion-linie);
}

.pruefliste .zeichen {
    font-weight: 700;
    grid-row: span 2;
}

.pruefliste .ok .zeichen { color: var(--stadion-gruen); }
.pruefliste .fehlt .zeichen { color: var(--stadion-rot); }

.pruefliste .bezeichnung {
    font-weight: 600;
}

.pruefliste .hinweis {
    font-size: 0.875rem;
    color: var(--stadion-text-leise);
}

.pruefliste .fehlt .hinweis {
    color: #7a1022;
}

/* Zusammenfassung */
.zusammenfassung {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.5rem;
    max-width: 36rem;
    margin-bottom: 2rem;
}

.zusammenfassung dt {
    font-weight: 600;
}

.zusammenfassung dd {
    margin: 0;
    word-break: break-word;
}

/* Kopfzeile mit Navigation */
.kopfzeile-innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.logo-verweis {
    display: inline-block;
}

/* Alle Breiten: Logo, Name und „Abmelden“ in einer Zeile, Menü in eigener Zeile darunter;
   sichtbare Reihenfolge entspricht der Reihenfolge im Quelltext (WCAG 1.3.2, 2.4.3) */
.hauptnavigation {
    display: flex;
    order: 3;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem 2rem;
}

.angemeldet {
    order: 1;
    margin-left: auto;
}

/* Breite Bildschirme: Schaltfläche „Menü“ ausgeblendet */
.angemeldet .menue-schalter {
    display: none;
}

/* Schmale Bildschirme (unter 992 Pixeln): Menü zum Aufklappen */
@media (max-width: 991.98px) {
    .angemeldet .menue-schalter {
        display: inline-flex;
        align-items: center;
    }

    .menue-schalter[aria-expanded="true"] {
        background-color: var(--stadion-gruen-hell);
        border-color: var(--stadion-gruen);
    }

    .hauptnavigation {
        display: none;
    }

    .hauptnavigation.offen {
        display: block;
    }

    .hauptnavigation.offen ul {
        flex-direction: column;
        gap: 0;
        border-top: 1px solid var(--stadion-linie);
    }

    .hauptnavigation.offen ul li {
        border-bottom: 1px solid var(--stadion-linie);
    }

    .hauptnavigation.offen ul a {
        display: block;
        padding: 0.7rem 0;
        border-bottom: 0;
    }

    .hauptnavigation.offen ul a.aktiv {
        border-left: 3px solid var(--stadion-gruen);
        padding-left: 0.6rem;
    }
}

.hauptnavigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.hauptnavigation ul a {
    display: inline-block;
    padding: 0.35rem 0;
    font-weight: 600;
    color: var(--stadion-text);
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.hauptnavigation ul a:hover {
    color: var(--stadion-gruen);
}

.hauptnavigation ul a.aktiv {
    color: var(--stadion-gruen);
    border-bottom-color: var(--stadion-gruen);
}

/* Bereiche der Kopfzeile (Online-Anzeige, Name, „Abmelden“, „Menü“) brechen bei Platzmangel um, z. B. bei doppelter Schriftgröße (WCAG 1.4.4) */
.angemeldet {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.angemeldet form {
    margin: 0;
}

.angemeldet-name {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: right;
}

.angemeldet-rolle {
    font-weight: 400;
    color: var(--stadion-text-leise);
}

.btn-sm {
    padding: 0.3rem 0.8rem;
    font-size: 0.875rem;
}

.btn-outline-danger {
    --bs-btn-color: var(--stadion-rot);
    --bs-btn-border-color: var(--stadion-rot);
    --bs-btn-hover-bg: var(--stadion-rot);
    --bs-btn-hover-border-color: var(--stadion-rot);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--stadion-rot);
    --bs-btn-active-border-color: var(--stadion-rot);
}

/* Seitenaufbau */
.seitenkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.zurueck {
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
}

h2,
.abschnitt-titel {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.abschnitt {
    padding-top: 1.75rem;
    margin-top: 1.75rem;
    border-top: 1px solid var(--stadion-linie);
}

.hinweis-unten {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    color: var(--stadion-text-leise);
}

/* Kacheln der Übersicht */
.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
    max-width: 52rem;
}

.kachel {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.25rem;
    border: 1px solid var(--stadion-linie);
    border-left: 4px solid var(--stadion-gruen);
    border-radius: 0.375rem;
    color: var(--stadion-text);
    text-decoration: none;
}

.kachel:hover {
    background: var(--stadion-gruen-hell);
    color: var(--stadion-text);
}

.kachel-titel {
    font-weight: 700;
    font-size: 1.05rem;
}

.kachel-text {
    font-size: 0.9375rem;
    color: var(--stadion-text-leise);
}

/* Tabellen */
.tabelle {
    --bs-table-hover-bg: var(--stadion-gruen-hell);
}

.tabelle thead th {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--stadion-text-leise);
    white-space: nowrap;
}

.tabelle tr.gesperrt td {
    color: var(--stadion-text-leise);
}

.status-hinweis {
    display: block;
    font-size: 0.8125rem;
    color: #6b4200;
}

.rolle {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.rolle-administrator { background: #f3e6f2; color: var(--stadion-lila); }
.rolle-organisator   { background: var(--stadion-gruen-hell); color: var(--stadion-gruen-dunkel); }
.rolle-platzwart     { background: #e8edf5; color: #23406b; }
.rolle-trainer       { background: #e3f6fc; color: #0b5d78; }
.rolle-extern        { background: #fff4e2; color: #6b4200; }

/* Vereine und Teams */
.werkzeugleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.werkzeugleiste-innen {
    margin-bottom: 0;
}

.leer-hinweis {
    color: var(--stadion-text-leise);
    font-style: italic;
}

.optional {
    font-weight: 400;
    color: var(--stadion-text-leise);
}

.status-leise {
    color: var(--stadion-text-leise);
    font-size: 0.875rem;
}

span.status-hinweis.status-leise {
    color: var(--stadion-text-leise);
}

.farbpunkt {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    vertical-align: -0.05rem;
}

.einfache-liste {
    padding-left: 1.1rem;
    margin: 0;
}

.einfache-liste li + li {
    margin-top: 0.35rem;
}

.teamauswahl {
    padding: 1rem 1.1rem;
    border: 1px solid var(--stadion-linie);
    border-radius: 0.375rem;
}

.teamauswahl legend {
    float: none;
    width: auto;
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.teamauswahl[hidden] {
    display: none;
}

.teamgruppe + .teamgruppe {
    margin-top: 0.85rem;
}

.teamgruppe-titel {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
}

.form-check-input:checked {
    background-color: var(--stadion-gruen);
    border-color: var(--stadion-gruen);
}

.form-check-input:focus-visible {
    border-color: var(--stadion-fokus);
}

.form-control-color {
    width: 100%;
    max-width: 6rem;
}

/* Ressourcen */
.tabelle tr.zeile-uebergeordnet td:first-child {
    font-weight: 600;
}

.einrueckung {
    display: inline-block;
    width: 1.5rem;
    margin-left: 0.25rem;
    color: var(--stadion-text-leise);
}

/* Bedienung mit dem Finger: kleine Schaltflächen mindestens 44 Pixel hoch */
@media (pointer: coarse) {
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
        padding: 0.55rem 1rem;
        font-size: 0.9375rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .hauptnavigation ul a {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
}

/* Tabellen mit der Klasse tabelle-karten: unter 992 Pixeln Breite (auch iPad im Hochformat) jede Zeile als Block, Beschriftung aus data-titel */
@media (max-width: 991.98px) {
    .tabelle-karten > thead {
        display: none;
    }

    .tabelle-karten,
    .tabelle-karten > tbody {
        display: block;
    }

    .tabelle-karten > tbody > tr:not(.collapse),
    .tabelle-karten > tbody > tr.collapse.show {
        display: block;
        margin-bottom: 0.75rem;
        padding: 0.6rem 0.85rem;
        border: 1px solid var(--stadion-linie);
        border-left: 4px solid var(--stadion-gruen);
        border-radius: 0.375rem;
    }

    .tabelle-karten > tbody > tr.collapse.show {
        margin-top: -0.75rem;
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .tabelle-karten > tbody > tr > td {
        display: block;
        padding: 0.2rem 0;
        border: 0;
    }

    .tabelle-karten > tbody > tr > td:empty {
        display: none;
    }

    .tabelle-karten > tbody > tr > td[data-titel]::before {
        content: attr(data-titel) ": ";
        font-weight: 600;
    }

    .tabelle-karten > tbody > tr > td:first-child {
        font-weight: 600;
    }

    /* Aktionen unten im Block, links ausgerichtet, nicht am rechten Rand festgehalten */
    .table-responsive .tabelle-karten > tbody > tr > td.text-end,
    .table-responsive .tabelle.tabelle-karten > tbody > tr > td.text-end:last-child:has(.btn) {
        position: static;
        text-align: left !important;
        white-space: normal;
        padding-top: 0.5rem;
        border-left: 0;
    }

    .tabelle-karten > tbody > tr > td.text-end .btn {
        margin: 0 0.4rem 0.4rem 0;
    }

    .tabelle-karten .table-sm td {
        display: block;
        padding: 0.15rem 0;
        border: 0;
    }

    .tabelle-karten .table-sm tr {
        display: block;
        padding: 0.5rem 0;
        border-top: 1px solid var(--stadion-linie);
    }

    .tabelle-karten .table-sm td.text-end {
        text-align: left !important;
    }

    .tabelle-karten .table-sm td:empty {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .angemeldet-name {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Tabellen: Aktionsspalte (letzte Spalte mit Schaltfläche) bleibt beim waagerechten Scrollen am rechten Rand */
.table-responsive .tabelle td.text-end:last-child:has(.btn),
.table-responsive .tabelle:has(td.text-end:last-child .btn) thead th:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    border-left: 1px solid var(--stadion-linie);
}

/* Spielplan-Import: Minutenfelder in den Zuordnungen */
.feld-minuten {
    width: 6rem;
}

/* Online-Anzeige in der Kopfzeile (Administrator und Organisator): Schaltfläche mit Anzahl, aufklappbare Liste */
.online-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.online-punkt {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background-color: var(--stadion-text-leise);
}

.online-an .online-punkt {
    background-color: var(--stadion-gruen);
    box-shadow: 0 0 0 2px var(--stadion-gruen-hell);
}

.online-liste {
    min-width: 17rem;
    max-width: calc(100vw - 2rem);
    padding: 0.6rem 0 0;
}

.online-schalter {
    margin: 0 1rem 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--stadion-linie);
}

.online-eintraege {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 50vh;
    overflow-y: auto;
}

.online-eintraege li {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 1rem;
    border-bottom: 1px solid var(--stadion-linie);
    line-height: 1.3;
}

.online-eintraege li:last-child {
    border-bottom: 0;
}

.online-name {
    font-size: 0.875rem;
    font-weight: 600;
    word-break: break-word;
}

.online-angaben,
.online-hinweis,
.online-stand {
    font-size: 0.8125rem;
    color: var(--stadion-text-leise);
}

.online-hinweis,
.online-stand {
    margin: 0;
    padding: 0.4rem 1rem 0.6rem;
}

.online-stand {
    border-top: 1px solid var(--stadion-linie);
}

/* Sehr schmale Bildschirme: nur Punkt und Anzahl sichtbar (Wort „Online:“ bleibt für Bildschirmleser erhalten);
   Name in eigener Zeile über Online-Anzeige, „Abmelden“ und „Menü“, damit bei 320 Pixeln nichts waagerecht hinausragt (WCAG 1.4.10) */
@media (max-width: 575.98px) {
    .angemeldet-name {
        order: -1;
        flex: 1 1 100%;
        overflow-wrap: anywhere;
    }

    .online-wort {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}