/* Seitenleiste. Desktop: fest rechts, ein- und ausklappbar. Mobil: Bootstrap
   Offcanvas (.offcanvas-lg), das von rechts hereinfaehrt.

   Achtung beim Aendern der Mobilfassung: Mehrere Regeln dort halten das Panel
   und seine Kinder auf EINEM Compositor-Layer. Wer das aufloest, bekommt das
   Muster "Buttons ziehen beim Slide nach". Die betroffenen Stellen sind
   einzeln kommentiert. */

/* ===== Tokens ===== */
:root {
    --sidebar-width-expanded: 350px;
    --sidebar-width-collapsed: 80px;

    --sidebar-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    --sidebar-shadow: -2px 0 8px color-mix(in srgb, #000 10%, transparent);

    /* Nur fuer GEFUELLTE Flaechen (Umschalter, eingeklappte Kopfzeilen), nicht
       fuer Text- oder Rahmenakzente. Quelle ist --primary-solid, dasselbe
       Token wie die Kopfleiste - so koennen beide nicht auseinanderlaufen. */
    --sidebar-accent-bg: var(--primary-solid);
    /* Hover: dieselbe Flaeche, abgedunkelt - abgeleitet statt je Theme gesetzt. */
    --sidebar-accent-bg-hover: color-mix(in srgb, var(--primary-solid) 85%, #000);

    --sidebar-z-index: 1020;
    --sidebar-toggle-z-index: 1021;
    --sidebar-mobile-z-index: 1040;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar *,
    .sidebar-action-btn,
    .sidebar-section-content,
    .sidebar-section-toggle,
    .sidebar-badge,
    .content-with-sidebar {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== Sidebar Desktop (3 Zustaende) ===== */
@media (min-width: 992px) {
    .sidebar {
        position: fixed;
        right: 0;
        top: 0; /* Volle Höhe von oben */
        bottom: 0; /* Bis zum unteren Rand */
        width: var(--sidebar-width-collapsed); /* Default: collapsed */
        /* !important schlaegt Bootstraps .offcanvas-lg{background:transparent !important} ab 992px */
        background: var(--bg-card) !important;
        box-shadow: var(--sidebar-shadow);
        transition: width var(--transition-base) var(--sidebar-transition-timing);
        z-index: var(--sidebar-z-index);
        overflow: hidden; /* .sidebar = fixer Rahmen; gescrollt wird im .offcanvas-body */
        padding: 0; /* Kein padding, Button bekommt volle Breite */
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Der Scroll-Container fuellt die Leiste und scrollt; auf Desktop uebersteuert dies
       Bootstraps .offcanvas-lg .offcanvas-body { display:flex; flex-grow:0; overflow:visible }. */
    .sidebar .offcanvas-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
    }

    .sidebar[data-state="collapsed"] {
        width: var(--sidebar-width-collapsed);
    }

    .sidebar[data-state="expanded"] {
        width: var(--sidebar-width-expanded);
    }

    .content-with-sidebar {
        margin-right: var(--sidebar-width-expanded);
        transition: margin-right var(--transition-base) var(--sidebar-transition-timing);
        min-height: calc(100vh - 56px);
    }

    .content-with-sidebar.sidebar-collapsed {
        margin-right: var(--sidebar-width-collapsed);
    }

    .sidebar .offcanvas-body::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar .offcanvas-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar .offcanvas-body::-webkit-scrollbar-thumb {
        background: var(--gray-400);
        border-radius: var(--radius-full);
    }

    .sidebar .offcanvas-body::-webkit-scrollbar-thumb:hover {
        background: var(--gray-500);
    }
}

/* ===== Umschalter Desktop ===== */
@media (min-width: 992px) {
    .sidebar-toggle-btn {
        width: 100%; /* Volle Breite der Sidebar */
        height: 40px; /* Flacher Button */
        background: var(--sidebar-accent-bg); /* Projekt-Farbe / Dark: Navbar-Farbe */
        color: var(--text-white);
        border: none;
        border-radius: 0; /* Keine Rundung, flach */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all var(--transition-base);
        box-shadow: none;
        padding: 0;
        flex-shrink: 0; /* Button behält seine Höhe */
        order: -1; /* Ganz nach oben in der Flex-Sidebar */
    }

    .sidebar-toggle-btn:hover {
        background: var(--sidebar-accent-bg-hover);
        box-shadow: none;
    }

    .sidebar-toggle-btn i {
        font-size: 1rem;
        line-height: 1;
    }

    .sidebar-toggle-btn:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

}

/* ===== Aktionsknoepfe ===== */
.sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem;
    padding-top: var(--space-md); /* Abstand zum Toggle-Button */
}

.sidebar-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--transition-base);
    position: relative;
    border: none;
    white-space: nowrap;
    /* Kein will-change: transform - das hebt jeden Knopf auf einen eigenen
       Compositor-Layer, der beim Slide nicht synchron mitgezogen wird. */
    font-size: 0.85rem;
}

/* Flache Flaechen aus den --*-solid-Tokens, keine Verlaeufe: ein Verlauf ist
   ein background-image, die background-color bleibt transparent - eine
   Kontrastpruefung misst dann gegen die Flaeche dahinter. */
.sidebar-action-btn.btn-success {
    background: var(--success-solid);
    color: var(--text-white);
}

.sidebar-action-btn.btn-warning {
    background: var(--warning-solid);
    color: var(--on-warning);
}

.sidebar-action-btn.btn-secondary {
    background: var(--secondary-solid);
    color: var(--text-white);
    opacity: 0.6;
}

.sidebar-action-btn:hover:not(.disabled) {
    box-shadow: var(--shadow-md);
}

.sidebar-action-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.sidebar-icon {
    font-size: 1rem;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-text {
    flex: 1;
    opacity: 1;
    transition: opacity var(--transition-fast);
    overflow: hidden;
}

.sidebar-badge {
    margin-left: auto;
    background: color-mix(in srgb, var(--text-white) 90%, transparent);
    color: var(--danger-text); /* rote Schrift auf heller Badge-Flaeche */
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    transition: all var(--transition-base);
    box-shadow: 0 1px 3px color-mix(in srgb, #000 15%, transparent);
}

.sidebar-check {
    margin-left: auto;
    font-size: 1rem;
    transition: all var(--transition-base);
}

/* ===== Aktionsknoepfe, eingeklappt (80px) ===== */
@media (min-width: 992px) {
    .sidebar[data-state="collapsed"] .sidebar-action-btn {
        justify-content: center;
        padding: 0.35rem;
        border-radius: var(--radius-sm);
    }

    .sidebar[data-state="collapsed"] .sidebar-action-btn:hover {
        box-shadow: var(--shadow-md);
    }

    .sidebar[data-state="collapsed"] .sidebar-icon {
        font-size: 1rem;
    }

    .sidebar[data-state="collapsed"] .sidebar-text {
        opacity: 0;
        width: 0;
        overflow: hidden;
    }

    .sidebar[data-state="collapsed"] .sidebar-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        font-size: 0.7rem;
        min-width: 18px;
        height: 18px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--danger); /* Bootstrap danger red */
        color: var(--text-white);
        font-weight: 700;
        box-shadow: 0 2px 4px color-mix(in srgb, #000 30%, transparent);
        border: 2px solid var(--text-white);
        line-height: 1;
    }

    .sidebar[data-state="collapsed"] .sidebar-check {
        position: absolute;
        bottom: 4px;
        right: 4px;
        font-size: 0.75rem;
    }

    .sidebar[data-state="collapsed"] .sidebar-section-content {
        display: none !important;
        max-height: 0 !important;
    }

    .sidebar[data-state="collapsed"] .sidebar-section-header {
        justify-content: center;
        gap: 4px;
        margin-bottom: 0;
        margin-top: 0.25rem;
        background-color: var(--sidebar-accent-bg);
        color: var(--text-white);
        padding: 0.35rem;
        border-left: none;
        border-radius: var(--radius-sm);
    }

    .sidebar[data-state="collapsed"] .sidebar-section-header:hover {
        background-color: var(--sidebar-accent-bg-hover);
        box-shadow: var(--shadow-md);
    }

    .sidebar[data-state="collapsed"] .sidebar-section-title {
        opacity: 0;
        width: 0;
        overflow: hidden;
    }

    .sidebar[data-state="collapsed"] .sidebar-section-toggle {
        opacity: 0;
        width: 0;
        overflow: hidden;
    }

    .sidebar[data-state="collapsed"] .sidebar-section-badge {
        position: static;
        background: transparent;
        color: var(--text-white);
        min-width: auto;
        height: auto;
        padding: 0 0 0 4px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    /* Icon weiß — im collapsed state semantische Farben (.text-success, .text-warning,
       .text-info, .text-purple) überschreiben, sonst kein Kontrast auf blauem Header */
    .sidebar[data-state="collapsed"] .sidebar-section-icon,
    .sidebar[data-state="collapsed"] .sidebar-section-icon i {
        color: var(--text-white) !important;
        font-size: 1.1rem;
    }

    .sidebar[data-state="collapsed"] .sidebar-info-section {
        display: none;
    }

    .sidebar[data-state="collapsed"] .sidebar-empty {
        padding: var(--space-sm) 0;
    }

    .sidebar[data-state="collapsed"] .sidebar-empty p {
        display: none;
    }

    .sidebar[data-state="collapsed"] .sidebar-empty i {
        font-size: 1.3rem;
        margin-bottom: 0;
    }
}

/* ===== Aufklappbare Abschnitte ===== */
.sidebar-section {
    display: flex;
    flex-direction: column;
    /* --gray-300 statt --gray-200: Der Rand war im Dunkeln kaum vom
       Kartengrund zu unterscheiden, weshalb es dafuer eine Dark-Regel mit
       --gray-600 gab - einem fast weissen Ton, der als Trennlinie zu laut
       war. --gray-300 traegt in beiden Themes. */
    border-top: 1px solid var(--gray-300);
    padding: var(--space-sm);
    padding-top: var(--space-md);
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.65rem 0.75rem;
    background: var(--bg-light, color-mix(in srgb, #000 3%, transparent));
    border: none;
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    width: 100%;
    text-align: left;
    margin-top: 0.25rem;
}

.sidebar-section-header:hover {
    background: var(--gray-200, var(--border-subtle));
}

.sidebar-section-header:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.sidebar-section-icon {
    font-size: 1.15rem;
    min-width: 22px;
}

.sidebar-section-title {
    flex: 1;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.sidebar-section-badge {
    background: var(--primary);
    color: var(--text-white);
    padding: 2px 6px;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
}

.sidebar-section-toggle {
    transition: transform var(--transition-base);
}

.sidebar-section-header[aria-expanded="false"] .sidebar-section-toggle {
    transform: rotate(-90deg);
}

.sidebar-section-content {
    max-height: 9999px; /* großzügig — sonst werden lange Statistik-/Spielelisten beschnitten */
    overflow: hidden;
    transition: max-height var(--transition-base) var(--sidebar-transition-timing);
}

.sidebar-section-header[aria-expanded="false"] + .sidebar-section-content {
    max-height: 0;
}

/* ===== Spieleliste (kompakt) ===== */
.sidebar-game-item {
    gap: 0.5rem;
}

.sidebar-game-teams {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    font-size: 0.85rem;
}

.sidebar-game-meta .badge {
    font-size: 0.75rem;
    padding: 0.3rem 0.45rem;
}

/* ===== Leerzustand ===== */
.sidebar-empty {
    text-align: center;
    padding: var(--space-lg);
    color: var(--gray-400);
}

.sidebar-empty i {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}

.sidebar-empty p {
    margin: 0;
    font-size: 0.875rem;
}

/* ===== Mobil (Bootstrap Offcanvas) =====
   Position, Slide, Backdrop, Scroll-Lock und Schliessen macht Bootstrap.
   Hier stehen Tokens, Innen-Styles und die Compositing-Absicherungen. */
.sidebar.offcanvas-lg {
    --bs-offcanvas-width: 400px;
    --bs-offcanvas-bg: var(--bg-card);
    --bs-offcanvas-box-shadow: -4px 0 16px color-mix(in srgb, #000 20%, transparent);
    --bs-offcanvas-border-width: 0;
    /* Padding fuers Panel liegt via diese Tokens auf dem .offcanvas-body (Bootstrap). */
    --bs-offcanvas-padding-x: var(--space-md);
    --bs-offcanvas-padding-y: var(--space-md);
}

@media (max-width: 991.98px) {
    /* Reiner Transform-Layer: kein overflow/padding hier. Sonst ist das Panel
       gleichzeitig Scroll-Container und Transform-Ziel, Chrome spaltet einen
       Scroll-Layer ab und der zieht beim Slide nach. */
    .sidebar.offcanvas-lg {
        /* !important, damit Panel und Backdrop ueber alle Mobilbreiten gleich
           lang laufen. Sonst greifen die globale 0.1s-Regel aus eus.css und
           Bootstraps 0.15s-Fade unterschiedlich - der Backdrop ist weg, waehrend
           das Panel noch schiebt. */
        transition: transform 0.2s ease-out !important;
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* translate3d statt Bootstraps 2D-translateX: legt das Panel auf einen
       eigenen GPU-Layer, sodass Hintergrund und Buttons als eine Textur
       sliden. Die Selektoren spiegeln Bootstraps .showing/.show/.hiding. */
    .sidebar.offcanvas-lg.offcanvas-end {
        transform: translate3d(100%, 0, 0);
    }
    .sidebar.offcanvas-lg.showing,
    .sidebar.offcanvas-lg.show:not(.hiding) {
        transform: translate3d(0, 0, 0);
    }

    /* Backdrop im Gleichtakt mit dem Panel schliessen/oeffnen. */
    .offcanvas-backdrop {
        transition: opacity 0.2s ease-out !important;
    }

    /* Kernstueck gegen "Buttons ziehen nach": Die globale 0.1s-Regel in eus.css
       gibt jedem Kind eine Transition auf alles, also auch auf transform und
       opacity. Chrome hebt die Kinder dadurch beim Slide auf eigene Layer, die
       dem Panel hinterherhinken. Darum hier nur max-height animieren - nur
       mobil, das Desktop-Einklappen bleibt unberuehrt. */
    .sidebar .offcanvas-body,
    .sidebar .offcanvas-body * {
        transition-property: max-height !important;
    }

    /* Oeffnen ueber den Navbar-Trigger („S", data-bs-toggle). Der Toggle-Button
       dient im offenen Offcanvas als Schliessen-Button (Bootstrap setzt .show). */
    .sidebar-toggle-btn {
        display: none;
    }

    .sidebar.show .sidebar-toggle-btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        height: 44px;
        margin-bottom: var(--space-md);
        background: var(--sidebar-accent-bg);
        color: var(--text-white);
        border: none;
        border-radius: var(--radius-md);
        cursor: pointer;
        box-shadow: var(--shadow-sm);
    }

    .sidebar.show .sidebar-toggle-btn:active {
        transform: scale(0.98);
    }

    .sidebar-toggle-text {
        font-size: 0.625rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .sidebar[data-state] {
        width: 100%;
        max-width: 400px;
    }

    .content-with-sidebar,
    .content-with-sidebar.sidebar-collapsed {
        margin-right: 0;
    }

    .sidebar-section-content {
        max-height: none;
    }

    .sidebar-actions {
        position: static;
    }
}

/* ===== Dark Mode ===== */
/* Kraeftigerer Schatten, sonst ist die Leiste im Dunkeln nicht vom Untergrund
   zu unterscheiden. */
[data-bs-theme="dark"] {
    --sidebar-shadow: -2px 0 8px color-mix(in srgb, #000 40%, transparent);
}

/* Echte Umkehrung, keine Wiederholung: hell eine weisse Flaeche mit rotem
   Text, dunkel eine abgedunkelte mit hellem Rot. */
[data-bs-theme="dark"] .sidebar-badge {
    background: color-mix(in srgb, #000 40%, transparent);
    color: var(--danger-text);
}

@media (max-width: 991.98px) {
    [data-bs-theme="dark"] .sidebar {
        box-shadow: -4px 0 16px color-mix(in srgb, #000 50%, transparent);
    }

    [data-bs-theme="dark"] .sidebar::before {
        background: color-mix(in srgb, #000 70%, transparent);
    }
}

/* ===== Statistik-Abschnitte ===== */
.sidebar-section-content .list-group-item {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
}

.sidebar-section-content .list-group-item .badge {
    font-size: 0.8rem;
}

.sidebar-section-link {
    display: block;
    padding: 0.5rem 0.75rem;
    text-align: right;
    color: var(--bs-link-color);
    text-decoration: none;
    border-top: 1px solid var(--border-subtle);
    transition: background-color 0.15s ease;
}

.sidebar-section-link:hover {
    background-color: color-mix(in srgb, var(--primary) 5%, transparent);
    text-decoration: underline;
}

/* Bootstrap hat kein purple-Utility. Die Farbe steht als --akzent-violett in
   eus.css; als Text braucht sie im Dunkeln eine hellere Fassung, sonst kommt
   sie auf der Sidebar auf 2.50:1. */
.text-purple {
    color: var(--akzent-violett-text) !important;
}

/* ===== Navbar: Sidebar-Trigger + Vereinsstatus (mobil) ===== */
/* Mobil: Brand mittig, Burger links, Aktionen rechts. Die Kopfzeile hat einen
   eigenen Wrapper, damit das absolut zentrierte Brand beim Aufklappen des
   Menues nicht mitwandert - es waere sonst relativ zur wachsenden
   .container-fluid zentriert. */
@media (max-width: 991.98px) {
    .navbar-header-row {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .navbar-header-row > .navbar-brand {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }

    /* Der Hover-transform aus eus.css wuerde die Zentrierung translate(-50%,-50%)
       ueberschreiben und das Brand aus der Mitte ziehen. Position daher in allen
       Zustaenden fixiert, nur die Farbe darf wechseln. */
    .navbar .navbar-header-row > .navbar-brand:hover,
    .navbar .navbar-header-row > .navbar-brand:focus,
    .navbar .navbar-header-row > .navbar-brand:active {
        transform: translate(-50%, -50%) !important;
    }

    .navbar-header-row > .navbar-mobile-actions {
        margin-left: auto;
    }
}

/* Desktop: Wrapper auflösen, damit Brand + Menü das normale Navbar-Layout behalten */
@media (min-width: 992px) {
    .navbar-header-row {
        display: contents;
    }
}

/* Sidebar-Trigger — eingekreistes „S" (Bootstrap Icons hat kein s-circle → eigener Kreis) */
.sidebar-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    /* Exakt die Farbe des Burger-Icons, damit beide identisch wirken.
       currentColor faerbt Kreis und Buchstabe. */
    color: color-mix(in srgb, #212529 75%, transparent);
}

/* Der Burger wechselt im Dunkeln auf hellen Stroke, das "S" muss mitziehen. */
[data-bs-theme="dark"] .sidebar-nav-toggle {
    color: color-mix(in srgb, var(--text-white) 55%, transparent);
}

.sidebar-s-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
}

/* ===== Vereins-Chip =====
   Haupt- und Interimsverein sind getrennte Accounts, der Wechsel tauscht nur
   die Login-Cookies - danach sieht jede Seite gleich aus. Der Chip beantwortet
   "wo bin ich gerade" und ist zugleich der Wechsel-Link. Gefuellte Pille, weil
   ein Rahmen auf dem blauen Navbar-Grund kaum zu sehen war. */
.verein-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 16rem;
    padding: 0.25rem 0.7rem;
    border: none;
    border-radius: var(--radius-full);
    /* --success-solid: dieselbe Flaeche wie btn-success und badge.bg-success. */
    background-color: var(--success-solid);
    color: var(--text-white);
    text-decoration: none;
    font-size: var(--text-sm);
    line-height: 1.2;
    transition: opacity var(--transition-fast);
}

a.verein-chip:hover,
a.verein-chip:focus-visible {
    opacity: 0.85;
    color: var(--text-white);
    text-decoration: none;
}

/* eus.css faerbt im Dunkeln jeden Link auf --primary, und das ist spezifischer
   als .verein-chip - der Chip-Text wurde dadurch blaugrau. Gegengesteuert ueber
   Spezifitaet, nicht ueber !important. */
[data-bs-theme="dark"] a.verein-chip,
[data-bs-theme="dark"] a.verein-chip:hover,
[data-bs-theme="dark"] a.verein-chip:focus-visible {
    color: var(--text-white);
}

.verein-chip.is-interim {
    /* --warning-solid statt --accent-orange: Sonst leuchtet der Chip in der
       Navigation kraeftiger als die Orange-Knoepfe auf der Seite, obwohl
       beide dieselbe Bedeutung tragen. */
    background-color: var(--warning-solid);
}

.verein-chip-wappen {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

/* Der Name darf kuerzen, aber nicht umbrechen - sonst waechst die Navbar. */
.verein-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

/* Auf der gefuellten Pille wird das Badge invertiert — weisse Flaeche, dunkle
   Schrift. Ein zweiter farbiger Block nebeneinander wuerde verschwimmen. */
.verein-chip-badge {
    flex-shrink: 0;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-full);
    background-color: var(--text-white);
    /* --dark statt --text-primary: letzteres invertiert im Dunkelmodus auf #e0e0e0
       und stand dann hell auf der weissen Badge-Flaeche. --dark und --text-white
       werden beide nie ueberschrieben, das Badge bleibt so in beiden Themes lesbar. */
    color: var(--dark);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Voll sichtbar und in Textgroesse: der Pfeil ist das Signal, dass hier ein
   Wechsel liegt — abgeschwaecht wurde er leicht uebersehen. */
.verein-chip-wechsel {
    flex-shrink: 0;
}

/* Kompakt (mobile Kopfzeile): Wappen und Wechsel-Pfeil, eingefasst von der farbigen
   Flaeche. Der Name stuende sonst unter dem absolut zentrierten Brand. */
.verein-chip-kompakt {
    max-width: none;
    gap: 0.3rem;
    /* Sichtbare Pille flach halten: mit der frueheren Mindesthoehe war der Chip
       das hoechste Element der Kopfleiste und zog sie auf 50px, obwohl Marke
       und Burger daneben nur rund 32px messen. */
    min-height: 2rem;
    padding: 0.15rem 0.5rem 0.15rem 0.25rem;
    margin-right: 0.5rem;
    position: relative;
}

/* Das Tippziel bleibt gross - es waechst unsichtbar ueber die Pille hinaus und
   kostet dabei keine Hoehe in der Leiste.
   Vorher stand die Mindestgroesse als min-height: 2.75rem mit dem Kommentar
   "= 44px". Das ging nie auf: die Wurzelschriftgroesse betraegt 14.17px, 2.75rem
   sind damit 39px. Deshalb jetzt in px - und zwar wirklich 44. */
.verein-chip-kompakt::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
}

.verein-chip-kompakt .verein-chip-badge {
    display: none;
}

/* Vereins-Kontext: durchgehende Markierung am unteren Rand der Navigation, in
   derselben Farbe wie der Chip. Die Navigation ist sticky (eus.css), der Streifen
   bleibt dadurch auf jeder Seite und in jedem Scroll-Zustand sichtbar.

   Der Streifen zaehlt zur Hoehe der Leiste, er kommt nicht obendrauf: dafuer
   setzt die Kontextklasse --navi-streifen, und eus.css zieht das von der
   Mindesthoehe der Navbar ab. Vorher war die Leiste eingeloggt 49px und
   ausgeloggt 46px hoch -- sie sprang also beim Ein- und Ausloggen.

   Ein inneres box-shadow waere der naheliegende Weg gewesen, ist hier aber
   unsichtbar: die Navbar liegt mit eigenem Hintergrund darueber. */
body.kontext-haupt,
body.kontext-interim {
    --navi-streifen: 3px;
    /* Haelfte des Streifens, einmal ausgerechnet: eine Division im calc der
       Polsterung wurde vom Browser nicht angewendet. */
    --navi-streifen-halb: 1.5px;
}

body.kontext-haupt .navigation-wrapper {
    border-bottom: var(--navi-streifen) solid var(--success);
}

body.kontext-interim .navigation-wrapper {
    border-bottom: var(--navi-streifen) solid var(--accent-orange);
}