/* Globales Stylesheet - auf jeder Seite geladen. Tokens, Grundelemente,
   Navigation, Tabellen, Utilities und der Dark-Block.

   Farben ausschliesslich ueber die Tokens hier. Eine semantische Farbe hat
   drei Rollen, die nicht austauschbar sind: --x (Flaeche ohne Text),
   --x-text (Schrift auf normalem Grund), --x-solid (Flaeche mit weisser
   Schrift). Wer sie verwechselt, bekommt unlesbaren Text. */

:root {
    /* ===== Farben ===== */
    --primary: #4a7c9e;
    --primary-dark: #3a6b8e;
    /* Drei Blautoene mit drei Aufgaben, und die Trennung ist keine Kosmetik:
       --primary ist die Kennfarbe (Raender, Symbole, Verduennungen),
       --primary-light ein aufgehellter Ton fuer Flaechen ohne Schrift,
       --primary-solid der einzige, auf dem weisse Schrift traegt (4.95:1).
       Wer weisse Schrift auf --primary oder --primary-light setzt, landet bei
       3.4 bis 4.5 - das ist mehrfach passiert. */
    --primary-light: #5a8db0;
    --primary-lighter: #6a9dc0;

    --secondary: #6c757d;
    --success: #28a745;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #17a2b8;
    --light: #fdfbf7;
    --dark: #343a40;

    /* Semantische Farben als TEXT. Die Flaechenwerte darueber sind dafuer zu
       hell (#ffc107 auf Weiss: 1.6:1). Diese Ebene schaltet im Dark-Block um. */
    --success-text: #157347;
    --danger-text: #b02a37;
    --warning-text: #8a6803;
    --info-text: #087990;

    /* Markenfarbe als TEXT: --primary ist im Hellen zu hell fuer Schrift auf
       weissem Grund. */
    --primary-text: var(--primary-dark);

    /* Semantische Farben als FLAECHE mit weisser Schrift. Die Grundwerte sind
       dafuer zu hell (Weiss auf --success: 3.1:1). Theme-unabhaengig - ein
       gruener Knopf bleibt in beiden Themes gruen. */
    /* --primary-solid traegt JEDE blaue Markenflaeche: Kopfleiste, Menues,
       Sidebar-Akzente, Kartenkoepfe, Knoepfe, Badges. Kein zweites Token
       dafuer anlegen - zwei Namen fuer eine Farbe waren hier schon zweimal
       die Fehlerursache. 94 % statt voll, weil Weiss auf --primary auf
       4.499:1 kommt und die Schwelle von 4.5 knapp verfehlt. */
    --primary-solid: color-mix(in srgb, var(--primary) 94%, #000);
    --success-solid: color-mix(in srgb, var(--success) 78%, #000);
    --danger-solid: color-mix(in srgb, var(--danger) 88%, #000);
    --info-solid: color-mix(in srgb, var(--info) 78%, #000);
    --secondary-solid: color-mix(in srgb, var(--secondary) 88%, #000);

    /* Orange ist die bewusste Ausnahme: gedaempfte Flaeche mit weisser Schrift,
       ~2.8:1 und damit unter WCAG AA. Sauber waere nur helles Orange mit
       dunkler Schrift oder ein Orange mit 40 % Schwarz, das braun wirkt - die
       Signalwirkung war es wert. Nicht ohne Abstimmung "reparieren".

       Beim Umbau der Positionsbadges wurde dieselbe Abwaegung fuer .pos-tw
       anders entschieden; fuer die uebrigen Badges bleibt es bewusst so. */
    --warning-solid: color-mix(in srgb, var(--accent-orange) 93%, #000);
    --on-warning: var(--text-white);

    --gray-50: #fdfbf7;
    --gray-100: #e9ecef;
    --gray-200: #dee2e6;
    --gray-300: #ced4da;
    --gray-400: #adb5bd;
    /* Eigener Wert statt --secondary: die Stufe steht auch auf dem Kopfband,
       und #6c757d kam dort auf 4.05:1. */
    --gray-500: #61686f;
    --gray-600: #495057;
    --gray-700: #343a40;
    --gray-800: #212529;
    --gray-900: #0d0f11;

    --bg-primary-eus: var(--primary);
    --bg-body: #e6e7e8;
    --bg-container: #c9d1dc;
    --bg-card: var(--text-white);
    --bg-light: #fdfbf7;

    /* Text-Farben (Light) - Muted/Secondary auf AA-Kontrast abgedunkelt */
    --text-primary: #212529;
    /* Dieselbe Begruendung wie bei --text-muted: der Seitengrund ist der
       knappe Fall. Die beiden Stufen liegen im Hellen ohnehin gleichauf. */
    --text-secondary: #50575d;
    /* #5c636a trug auf einer Karte (6.09:1), aber nicht auf dem Seitengrund -
       der ist im Hellen #c9d1dc, und dort waren es 3.96:1. Da stehen
       Blaetterhinweise, Fussnoten und Leerzustaende. #50575d haelt beide
       Faelle: 7.34 auf der Karte, 4.76 auf dem Grund. */
    --text-muted: #50575d;

    /* Bootstrap fuellt .text-muted, .text-secondary und die Formularhinweise
       aus diesem Token. Ohne Zuweisung nimmt es Bootstraps eigenen Wert -
       im Hellen rgba(33,37,41,.75), also 15.4:1 und damit praktisch
       Fliesstext, im Dunkeln rgba(222,226,230,.75). Dieselbe Klasse bedeutete
       so in beiden Themes etwas anderes. Jetzt ist es in beiden die mittlere
       Stufe der eigenen Textleiter. */
    --bs-secondary-color: var(--text-muted);
    --text-white: #ffffff;

    --border-subtle: rgba(0, 0, 0, 0.08);

    /* Rand von Bedienelementen - Kaestchen, Auswahlfelder, Eingabefelder.
       Bewusst getrennt von --border-subtle und --gray-200: eine Karte darf
       eine leise Kante haben, ein Bedienelement nicht. Bootstraps Vorgabe
       (#dee2e6 hell, #495057 dunkel) kam auf 1.30:1 und 1.89:1; WCAG verlangt
       fuer die Umrisse von Bedienelementen 3:1. Hier sind es 3.9 auf Weiss und
       3.4 auf der dunklen Feldflaeche. */
    --feld-rand: #808890;
    --alert-primary-bg: #e8f1f6;
    --alert-primary-text: #2d5a7a;

    /* Leicht abgesetzte Flaeche innerhalb einer Karte: Kopfzeilen von
       Unterabschnitten, Zebrastreifen, ruhige Kaesten. */
    --surface-3: #f4f7f9;

    /* Eigener Ton fuer die Kopfbaender von Karten und Tabellen. Zuvor war es
       eine 55-%-Mischung aus --surface-3 und der Kartenflaeche, und die kam im
       Hellen auf eine Abhebung von 1.038 gegen die Karte - rechnerisch da,
       sichtbar nicht. --surface-3 selbst bleibt, wie es ist: es traegt
       Zebrastreifen und ruhige Kaesten, die leiser sein duerfen als ein Kopf. */
    --kopf-band: #eaeff4;

    /* Links markenkonform (statt Bootstrap-Blau) + AA-Kontrast */
    --bs-link-color: var(--primary-dark);
    --bs-link-color-rgb: 58, 107, 142;
    --bs-link-hover-color: #2d5568;
    --bs-link-hover-color-rgb: 45, 85, 104;

    /* ===== Abstaende ===== */
    --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);      /* 4-8px */
    --space-sm: clamp(0.5rem, 1vw, 0.75rem);        /* 8-12px */
    --space-md: clamp(0.75rem, 1.5vw, 1rem);        /* 12-16px */
    --space-lg: clamp(1rem, 2vw, 1.5rem);           /* 16-24px */
    --space-xl: clamp(1.5rem, 2.5vw, 2rem);         /* 24-32px */
    --space-2xl: clamp(2rem, 3vw, 3rem);            /* 32-48px */
    --space-3xl: clamp(2.5rem, 4vw, 4rem);          /* 40-64px */

    /* ===== Schriftgroessen ===== */
    /* Harmonische Schriftgrößen-Skala (Minor Third: 1.2 Ratio) */
    --text-xs: clamp(0.65rem, 0.6rem + 0.2vw, 0.7rem);      /* Extra small */
    --text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);    /* Small */
    --text-base: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);     /* Base (entspricht 1rem) */
    --text-md: clamp(0.95rem, 0.9rem + 0.35vw, 1.1rem);     /* Medium */
    --text-lg: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);        /* Large */
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);     /* Extra large */
    --text-2xl: clamp(1.5rem, 1.3rem + 0.7vw, 1.75rem);     /* 2X large */
    --text-3xl: clamp(1.75rem, 1.5rem + 0.9vw, 2rem);       /* 3X large */
    --text-4xl: clamp(2rem, 1.7rem + 1.2vw, 2.5rem);        /* 4X large */

    /* ===== Radien ===== */
    --radius-none: 0;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* ===== Schatten ===== */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.3);

    --shadow-custom: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-navbar: 0 2px 8px rgba(0, 0, 0, 0.2);

    /* ===== Uebergaenge ===== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    --transition-slower: 500ms ease-in-out;

    /* ===== Z-Index ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ===== Spezielle Farben ===== */
    --field-green-dark: #2d5016;
    --field-green-medium: #3a6b1e;
    --field-green-light: #45801f;
    /* Farbstopps des Spielfeld-Verlaufs, genutzt von den SVGs in Aufstellung
       und Elf des Tages. */
    --field-sky: #87CEEB;

    --gradient-purple-start: #667eea;
    --gradient-purple-end: #764ba2;
    --gradient-pink-start: #f093fb;
    --gradient-pink-end: #f5576c;

    /* Drei Blaustufen der Turnierdarstellung, von kraeftig nach hell. Die
       ersten beiden tragen weisse Schrift, der dritte dunkle. */
    --tournament-card-header: #52728b;
    --tournament-group-header: #7D9FB6;
    --tournament-table-header: #A8C5D8;

    /* Heim- und Gastfarbe (Spielbericht, Liveticker, Aufstellung). Beide sind
       Textfarben und brauchen daher einen Dunkelwert - Gast laeuft ueber
       --success-text und schaltet selbst um. Heims sattes Blau ist bewusst
       nicht die Markenfarbe: es soll sich von Knoepfen und Kopfleiste
       unterscheiden. */
    --team-a-color: #0066cc;
    --team-b-color: var(--success-text);

    --accent-orange: #ffa500;

    /* Violett steht fuer die Kaufoption - im Transferkader als Badge, in
       der Sidebar als Textauszeichnung. Beide Stellen trugen bisher denselben
       Hexwert als Literal, mit dem Vermerk, ein Token haette nur einen Nutzer.
       Es sind zwei, und als Text auf dunklem Grund kam der Wert auf 2.50:1 -
       genau der Fall, den ein Token loest. */
    --akzent-violett: #6f42c1;
    --akzent-violett-text: var(--akzent-violett);

    /* Linkfarbe. Nicht --primary selbst: die Farbe muss auch als Flaeche taugen
       - Kopfleiste, Knoepfe, Positionsbadge Mittelfeld - und liegt deshalb
       genau auf der Schwelle (4.50:1 auf Weiss). Als Text bekommt sie in
       jedem Theme einen Schritt in die Richtung, die dort Kontrast bringt:
       im Hellen eine abgedunkelte Fassung von --primary-dark, weil auch Links
       auf dem Seitengrund stehen koennen (dort waren es 3.71:1, jetzt 4.92);
       im Dunkeln eine aufgehellte Fassung (8.4:1). */
    --link-text: color-mix(in srgb, var(--primary-dark) 82%, #000);

    /* Der aktive Reiter steht auf einer Flaeche aus derselben Farbe mit 15 %
       Deckung. Farbe auf ihrer eigenen Verduennung traegt schlecht: im Hellen
       3.74:1. Deshalb eine Stufe dunkler als der Grundton. */
    --reiter-aktiv: color-mix(in srgb, var(--primary) 85%, #000);

    /* Positions-Farben (app-weit einheitlich): TW Orange, Abwehr Gruen,
       Mittelfeld Stahlblau/Primary, Sturm Rot */
    --pos-tw: var(--accent-orange);
    --pos-vt: var(--success);
    --pos-mf: var(--primary);
    --pos-st: var(--danger);

    /* Als Badge-Flaeche mit weisser Schrift sind die reinen Positionsfarben zu
       hell: Orange kam auf 1.97:1, Gruen auf 3.13:1, bei 10 px Schrift. Fuer
       die Flaeche gibt es deshalb abgedunkelte Fassungen; --pos-* selbst
       bleibt unveraendert, weil es als Symbol- und Randfarbe auf dunklem
       Grund hell sein muss. Rot und Stahlblau tragen Weiss schon von Haus aus
       (4.53 und 5.07) und bleiben, wie sie sind. */
    --pos-tw-flaeche: color-mix(in srgb, var(--pos-tw) 62%, #000);
    --pos-vt-flaeche: color-mix(in srgb, var(--pos-vt) 76%, #000);
    --pos-mf-flaeche: color-mix(in srgb, var(--pos-mf) 94%, #000);
    --pos-st-flaeche: var(--pos-st);
}

html {
    /* Responsive Base Font Size - passt sich automatisch an Bildschirmgröße an */
    /* Mobile (320px): 13px, Tablet (768px): 14px, Desktop (1200px+): 15.2px */
    font-size: clamp(13px, 0.8125rem + 0.3vw, 15.2px);
}

/* Erhöhte Spezifität durch html body statt !important */
html body {
    background-color: var(--bg-body);
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 24px, rgba(0, 0, 0, 0.025) 24px, rgba(0, 0, 0, 0.025) 25px),
        repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(0, 0, 0, 0.025) 24px, rgba(0, 0, 0, 0.025) 25px);
    min-height: 100vh;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

::selection {
    background-color: var(--accent-orange);
    color: var(--text-white);
}

::-moz-selection {
    background-color: var(--accent-orange);
    color: var(--text-white);
}

/* Globaler Fokus-Ring (nur Tastatur via :focus-visible) - konsistent & markenfarben */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

* {
    -webkit-tap-highlight-color: transparent;
}

/* Container - Spezifität durch body Prefix erhöht */
body .container,
body .container-fluid {
    background-color: var(--bg-container);
    backdrop-filter: blur(10px);
    padding: var(--space-2xl) var(--space-xl);
    margin-top: 0;
    margin-bottom: var(--space-xl);
    margin-left: auto;
    margin-right: auto;
    border-radius: 0;
    box-shadow: var(--shadow-custom);
    position: relative;
}

body .navbar + .container,
body .navbar + .container-fluid,
body nav + .container,
body nav + .container-fluid {
    margin-top: 0;
    border-radius: 0;
}

/* Kein translateZ(0) auf .card/.btn/.modal/.navbar als "Beschleunigung": Es
   erzeugt einen Stacking-Context UND einen Containing Block fuer
   position:fixed - Modals innerhalb einer Karte landen dadurch hinter
   Bootstraps Backdrop. Moderne Browser entscheiden selbst, was auf eine
   eigene Ebene gehoert. */

/* ===== Navbar ===== */

/* Spezifitaet ueber body > statt !important. Hintergrund --primary-solid:
   auf dem helleren --primary-light kam die weisse Schrift auf 3.4:1, auf
   --primary direkt auf 4.499:1. */
body > .navbar,
body .navbar.navbar {
    background: var(--primary-solid);
    box-shadow: none;
    /* Feste Hoehe statt "so hoch wie das hoechste Kind". Vorher schwankte die
       Leiste je nach Zustand zwischen 37px (ausgeloggt mobil, wo die absolut
       zentrierte Marke gar nicht zur Hoehe beitraegt) und 52px (Desktop) --
       beim Ein- und Ausloggen oder beim Wechsel der Breite sprang sie sichtbar.
       46px ist der bisherige Desktop-Wert und laesst dem groessten Element,
       dem 34px hohen Logo, oben und unten Luft.

       Der Kontextstreifen am unteren Rand (sidebar.css, gruen im Haupt-, orange
       im Interimsverein) zaehlt in diese 46px hinein statt obendrauf zu kommen.
       Ausgeloggt gibt es ihn nicht, --navi-streifen ist dann 0. */
    min-height: calc(46px - var(--navi-streifen, 0px));
    /* Die Polsterung muss den Streifen mitrechnen, sonst bindet auf dem Desktop
       nicht die Mindesthoehe, sondern Inhalt (34px Logo) plus Polsterung -- die
       Leiste bliebe dort bei 46px und der Streifen kaeme doch wieder obendrauf.
       min-height statt height, damit das aufgeklappte Mobilmenue die Leiste
       weiterhin waschsen lassen kann. */
    padding: calc(0.4rem - var(--navi-streifen-halb, 0px)) 0;
    margin: 0;
    border: none;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: var(--z-modal-backdrop);
}

body .navbar > .container,
body .navbar > .container-fluid {
    max-width: 100%;
    margin: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    width: 100%;
}

/* Navbar Brand - Erhöhte Spezifität */
.navbar .navbar-brand {
    color: var(--text-white);
    font-weight: 700;
    font-size: 1.0rem;
    letter-spacing: 0.2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
    color: var(--accent-orange);
    transform: translateX(3px);
}

/* Marke: Maskottchen + Kurzname "EUS".
   Der ausgeschriebene Name steht nicht mehr in der Leiste, sondern im title
   und im aria-label des Links - siehe navigation_v3.twig. */
.navbar .navbar-brand.marke {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Die 0.2rem Polsterung aus der Regel darueber stammen aus der Zeit, als
       die Marke reiner Text war. Um ein Bild herum sind sie nur Hoehe: die
       Marke mass damit 40px und war das hoechste Element der Leiste, obwohl
       das Bild selbst nur 34px hoch ist. */
    padding-top: 0;
    padding-bottom: 0;
}

/* Die Marke traegt jetzt ein Bild. Der Versatz aus der Regel darueber liesse
   es beim Hover zappeln; stattdessen hellt nur der Glow auf. */
.navbar .navbar-brand.marke:hover,
.navbar .navbar-brand.marke:focus {
    transform: none;
}

.marke-bild {
    /* 34px ist die groesste Hoehe, die die Leiste nicht hoeher macht:
       0.4rem Polsterung oben und unten plus die Zeilenhoehe des Menues.
       Die Datei ist doppelt so hoch (68px) - das ist die Retina-Fassung. */
    height: 34px;
    width: auto;
    display: block;
    /* Ein Neon-Motiv auf der blauen Leiste wirkt flach; ein leichter Schein
       traegt es. Kein Token, weil es eine Leuchtfarbe ist und keine Flaeche. */
    filter: drop-shadow(0 0 6px rgba(255, 165, 0, 0.45));
    transition: filter 0.3s ease;
}

.navbar .navbar-brand.marke:hover .marke-bild {
    filter: drop-shadow(0 0 10px rgba(255, 165, 0, 0.75));
}

.marke-text {
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1.15rem;
    line-height: 1;
}

/* Mobil kleiner: mit 34px war das Maskottchen das hoechste Element der Leiste
   und zog sie auf 50px, waehrend der Burger daneben nur 32px misst. Mit 26px
   bestimmt wieder der Burger die Hoehe, das Bild kostet keinen Platz mehr. */
@media (max-width: 991.98px) {
    .marke-bild {
        height: 26px;
    }
}

/* Nur auf sehr schmalen Geraeten traegt allein das Maskottchen. Die Schwelle
   liegt bei 340px und nicht bei 400px: die gaengigen Telefone sind 360 bis
   414px breit, dort ist neben Burger, Wappen und Sidebar-Knopf reichlich
   Platz - "EUS" waere sonst genau auf den Geraeten weg, die es sehen sollen. */
@media (max-width: 339.98px) {
    .marke-text {
        display: none;
    }
}

/* Ausgeloggt: Registrieren + Einloggen anstelle des Managermenues.
   Eigene Klassen statt .btn-light / .btn-outline-light, aus zwei Gruenden:

   1. Bootstraps .btn-light bringt ein festes #f8f9fa als Flaeche mit, das dem
      Theme nicht folgt. Die dazu passende dunkle Schrift laesst sich nicht aus
      unseren Tokens holen - die Graustufen kippen im Dunkelmodus (--gray-800
      ist dort hell). Ergebnis war hell auf hell, gemessene 1.23.
   2. Im Dunkelmodus faerbt [data-bs-theme="dark"] a jeden Link (Spezifitaet
      0,1,1) und schlaegt die Farbe aus .btn (0,1,0). Die Knoepfe sind <a>.

   Die Leiste traegt in beiden Themes dieselbe blaue Flaeche (--primary-solid).
   Weiss darauf und Blau auf Weiss sind deshalb themeunabhaengig tragfaehig -
   dasselbe Paar, das die ganze Navbar benutzt. */
.gast-aktionen .btn,
[data-bs-theme="dark"] .gast-aktionen .btn {
    border: 1px solid var(--text-white);
    padding: 0.25rem 0.75rem;
}

.gast-aktionen .gast-zweit,
[data-bs-theme="dark"] .gast-aktionen .gast-zweit {
    color: var(--text-white);
    background: transparent;
}

.gast-aktionen .gast-zweit:hover,
.gast-aktionen .gast-zweit:focus {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-white);
}

.gast-aktionen .gast-haupt,
[data-bs-theme="dark"] .gast-aktionen .gast-haupt {
    color: var(--primary-solid);
    background: var(--text-white);
}

.gast-aktionen .gast-haupt:hover,
.gast-aktionen .gast-haupt:focus {
    color: var(--primary-solid);
    background: color-mix(in srgb, var(--text-white) 88%, #000);
}

/* Nav Links - Spezifität erhöht */
.navbar.navbar-light .navbar-nav .nav-link,
.navbar.navbar-light .navbar-nav .nav-item > .nav-link {
    /* Volles Weiss statt 95 % Deckkraft: Die fehlenden 5 % kosteten den
       Unterschied zwischen 4.24 und 4.50 - also genau die WCAG-Schwelle. */
    color: var(--text-white);
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    margin: 0 0.15rem;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.875rem;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.navbar.navbar-light .navbar-nav .nav-link:hover,
.navbar.navbar-light .navbar-nav .nav-item > .nav-link:hover {
    color: var(--text-white);
    background-color: rgba(255, 255, 255, 0.15);
}

/* Der aktive Eintrag traegt weisse Schrift - das setzt weiter unten eine
   Regel mit !important - auf einer orangen Verduennung ueber der dunklen
   Kopfleiste. Bei 20 % hellte die Verduennung den Grund so weit auf, dass
   Weiss darauf nur noch 4.30:1 erreichte. Weniger Deckung heisst dunklerer
   Grund und damit mehr Kontrast; als Kennzeichnung reicht sie zusammen mit
   dem Rand darunter. */
.navbar.navbar-light .navbar-nav .nav-link.active,
.navbar.navbar-light .navbar-nav .nav-item > .nav-link.active {
    color: var(--accent-orange);
    background-color: rgba(255, 165, 0, 0.12);
    box-shadow: inset 0 -2px 0 var(--accent-orange);
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    .navbar.navbar-light .navbar-nav .nav-link,
    .navbar.navbar-light .navbar-nav .nav-item > .nav-link {
        padding: 0.4rem 0.6rem;
        margin: 0 0.05rem;
        font-size: 1rem;
    }
    .navbar-brand {
        font-size: 0.9rem;
        margin-right: 0.5rem;
    }
}

/* Grundeinstellung fuer JEDES Dropdown. Steht bewusst vor den
   Kopfleisten-Regeln: die sind gleich spezifisch und gewinnen dadurch dort,
   wo sie gelten sollen. */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--primary-solid);
    --bs-dropdown-link-active-color: var(--text-white);
    max-height: 80vh;
    overflow-y: auto;
}

/* Menuepunkte tragen die Textfarbe, nicht die Linkfarbe. Noetig wegen
   [data-bs-theme="dark"] a (0,1,1), das Bootstraps .dropdown-item (0,1,0)
   sonst schlaegt - die Punkte standen im Dunkeln in Markenblau da. */
.dropdown-menu .dropdown-item:not(.active) {
    color: var(--bs-dropdown-link-color);
}

/* Nur in der Kopfleiste: Das Menue gehoert dorthin und traegt deren Farbe.
   Ungescopt traf die Regel jedes Bootstrap-Dropdown - auch die Modulmenues
   in einer Karte, wo eine blaue Flaeche nichts zu suchen hat. */
.navbar .dropdown-menu:not(.dropdown-menu-mega):not(.dropdown-menu-account) {
    background: var(--primary-solid);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-top: 0.3rem;
    padding: 0.4rem;
    min-width: 200px;
    z-index: 1050;
}

.navbar .dropdown-menu .dropdown-item {
    color: var(--text-white);
    padding: 0.45rem 0.75rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0.2rem;
    font-size: 0.85rem;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--accent-orange);
    transform: translateX(5px);
}

.navbar .dropdown-menu .dropdown-item:active {
    background-color: rgba(255, 165, 0, 0.2);
    color: var(--text-white);
}

.navbar-toggler {
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 0.2rem 0.3rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-toggler:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.3);
    outline: none;
}

/* Das verkleinerte Burger-Symbol stand nur in @media (max-width: 767px),
   der Burger erscheint aber bis 991.98px (navbar-expand-lg). Zwischen 768 und
   991px trug er deshalb Bootstraps 1.5em und mass 39px statt 32 -- genau in
   diesem Band war die Leiste 5px hoeher als ueberall sonst. */
@media (max-width: 991.98px) {
    .navbar-toggler-icon {
        width: 1.2em;
        height: 1.2em;
    }

    /* Burger und Sidebar-Knopf ("S") auf eine feste Hoehe. Beide waren bisher
       in rem aufgebaut und wuchsen dadurch mit der Schriftgroesse mit: der
       Burger von 32 auf 34px, das S von 33 auf 36px, je nach Breite. Die
       Leiste folgte ihnen und mass mal 46, mal 48px.
       .sidebar-nav-toggle traegt im Markup ebenfalls .navbar-toggler, der
       erste Selektor allein wuerde also schon beide treffen - der zweite steht
       da, damit die Absicht beim Lesen nicht von der Klassenliste abhaengt. */
    .navbar .navbar-toggler,
    .navbar .sidebar-nav-toggle {
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

.dropdown-menu .dropdown-header {
    /* 85 % statt 60 %: Bei 60 % kamen die Rubriktitel auf 2.9:1 gegen die
       Menueflaeche. Zurueckgenommen wirken sie ohnehin schon durch Groesse,
       Versalien und Laufweite - dafuer braucht es die Deckkraft nicht. */
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 1rem 0.25rem;
    margin-top: 0.25rem;
}

.dropdown-menu .dropdown-header:first-child {
    margin-top: 0;
    padding-top: 0.5rem;
}

/* ===== FULL-WIDTH MEGA-MENU (Slide-Out) ===== */

/* Basis-Styles fuer alle Mega-Menus (Fallback fuer V2 ohne nav-item-mega) */
.dropdown-menu-mega {
    background: var(--primary-solid);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-top: 0.3rem;
    padding: 0.75rem;
    z-index: 1050;
}

@media (min-width: 992px) {
    .nav-item-mega {
        position: static !important;
    }

    .nav-item-mega > .dropdown-menu-mega {
        width: 100%;
        left: 0;
        right: 0;
        border-radius: 0;
        border: none;
        margin-top: 0;
        padding: 0.5rem 1.5rem;
        background: var(--primary-solid);
        box-shadow: none;
        z-index: 1050;

        display: block !important;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    }

    .nav-item-mega > .dropdown-menu-mega.show {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.mega-menu-grid {
    display: grid;
    gap: 0 2rem;
}

@media (min-width: 992px) {
    .mega-menu-cols-2 { grid-template-columns: repeat(2, minmax(0, 340px)); }
    .mega-menu-cols-3 { grid-template-columns: repeat(3, minmax(0, 340px)); }
}

.mega-menu-col .dropdown-header {
    padding: 0.5rem 0.5rem 0.25rem;
    margin-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mega-menu-col .dropdown-item {
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
}

@media (max-width: 991.98px) {
    .navbar .dropdown-menu-mega,
    .dropdown-menu-mega {
        min-width: auto;
        border-radius: 0;
        border: none;
        box-shadow: none;
        margin-top: 0;
        padding: 0;
        background: transparent !important;
        backdrop-filter: none;
    }
    .mega-menu-grid {
        grid-template-columns: 1fr;
    }
    .mega-menu-col {
        padding-bottom: 0.25rem;
        margin-bottom: 0.25rem;
    }
}

/* ===== KALENDER-BAR (14-Tage-Vorschau unter Navbar) ===== */
.kalender-bar {
    background: var(--primary-solid);
    width: 100%;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    border: none;
    box-shadow: none;
    transition: max-height 0.35s ease, opacity 0.25s ease;
}

.kalender-bar .container-fluid {
    background: none;
    backdrop-filter: none;
    padding: 0 1rem;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}

.kalender-bar.open {
    max-height: 400px;
    opacity: 1;
}

.kalender-bar-grid {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 4px;
    padding: 0.5rem 0;
}

.kalender-bar-loading {
    grid-column: 1 / -1;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    padding: 1.5rem;
    font-size: 0.85rem;
}

.kalender-tag {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.25rem;
    min-height: 70px;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    transition: background 0.2s ease;
}

.kalender-tag:hover {
    background: rgba(255, 255, 255, 0.15);
}

.kalender-tag.heute {
    border: 2px solid var(--accent-orange);
    background: rgba(255, 165, 0, 0.1);
}

.kalender-tag-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0.2rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.kalender-wochentag {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kalender-datum {
    font-size: 0.7rem;
    opacity: 0.7;
}

.kalender-tag-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kalender-eintrag {
    padding: 0.1rem 0.15rem;
    border-radius: 3px;
    font-size: 0.7rem;
    line-height: 1.15;
    margin-bottom: 1px;
}

.kalender-spiel {
    background: rgba(255, 165, 0, 0.2);
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    display: block;
}

.kalender-spiel:hover {
    background: rgba(255, 165, 0, 0.35);
    color: white;
    text-decoration: none;
}

.kalender-spiel .bi {
    color: var(--accent-orange);
    font-size: 0.65rem;
}

.kalender-spiel .badge {
    font-size: 0.6rem;
    padding: 0.1rem 0.25rem;
    background: rgba(255, 165, 0, 0.5);
    color: white;
}

.kalender-zeit {
    font-weight: 600;
}

.kalender-gegner {
    font-size: 0.65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kalender-training {
    background: color-mix(in srgb, var(--success) 20%, transparent);
    color: rgba(255, 255, 255, 0.9);
}

.kalender-training .bi {
    color: #28a745;
    font-size: 0.65rem;
}

.kalender-training-zeit {
    font-weight: 600;
}

.kalender-training-name {
    font-size: 0.65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 991.98px) {
    .kalender-bar {
        display: none !important;
    }
}

/* ===== Buttons ===== */

.btn {
    border: none;
    font-weight: 600;
    padding: var(--space-sm) var(--space-xl);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    box-shadow: none;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

/* Button Variants - Erhöhte Spezifität statt !important */
.btn.btn-primary {
    /* Solid-Variante statt --primary-light: auf dem helleren Blau kam die
       weisse Schrift nur auf 3.58:1, und im Dark Mode ist --primary selbst
       aufgehellt und damit als Flaeche ungeeignet. */
    background: var(--primary-solid);
    color: var(--text-white);
}

/* Knoepfe ohne Farbverlauf: Ein Verlauf ist ein background-image, die
   background-color bleibt dabei transparent und jede Kontrastpruefung misst
   gegen die Flaeche dahinter. Flaechen aus den --*-solid-Tokens, der Hover
   dunkelt ab statt die Farbe zu wechseln. */
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background: var(--primary-dark);
    box-shadow: var(--shadow-md);
    color: var(--text-white);
}

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

.btn.btn-warning:hover,
.btn.btn-warning:focus {
    background: color-mix(in srgb, var(--warning-solid) 88%, #000);
    box-shadow: var(--shadow-md);
    color: var(--on-warning);
}

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

.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
    background: color-mix(in srgb, var(--secondary-solid) 85%, #000);
    box-shadow: var(--shadow-md);
    color: var(--text-white);
}

.btn.btn-success {
    background: var(--success-solid);
    color: var(--text-white);
}

.btn.btn-success:hover,
.btn.btn-success:focus {
    background: color-mix(in srgb, var(--success-solid) 85%, #000);
    box-shadow: var(--shadow-md);
    color: var(--text-white);
}

.btn.btn-danger {
    background: var(--danger-solid);
    color: var(--text-white);
}

.btn.btn-danger:hover,
.btn.btn-danger:focus {
    background: color-mix(in srgb, var(--danger-solid) 85%, #000);
    box-shadow: var(--shadow-md);
    color: var(--text-white);
}

.btn.btn-info {
    background: var(--info-solid);
    color: var(--text-white);
}

.btn.btn-info:hover,
.btn.btn-info:focus {
    background: color-mix(in srgb, var(--info-solid) 85%, #000);
    box-shadow: var(--shadow-md);
    color: var(--text-white);
}

/* Outline-Varianten auf die Marken-Tokens. Bootstrap speist sie sonst aus
   seinen eigenen Farben - .btn-outline-primary stand in #0d6efd da, dem
   Bootstrap-Blau, nicht in der Markenfarbe. Ueber die --bs-btn-*-Variablen
   statt ueber color/background, damit Hover, Fokus und aktiver Zustand
   mitlaufen. */
.btn.btn-outline-primary {
    /* --link-text statt --primary-text: der Knopf traegt Text, und
       --primary-text kam auf getoentem Grund auf 4.32:1, im Dunkeln auf 3.0.
       Die Farbe zusaetzlich direkt, nicht nur ueber die Variable: im
       gebuendelten Bootstrap steht auf der Outline-Variante ein fester
       Blauwert, der die Variable ueberholt. */
    --bs-btn-color: var(--link-text);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--text-white);
    --bs-btn-hover-bg: var(--primary-solid);
    --bs-btn-hover-border-color: var(--primary-solid);
    --bs-btn-active-color: var(--text-white);
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);

    /* Die Farbe zusaetzlich direkt, nicht nur ueber die --bs-btn-*-Variablen:
       bootstrap-table wird nach Bootstrap geladen und bringt eine eigene
       .btn-outline-primary mit festem #0d6efd mit. Die ueberholt jede
       Variable, weshalb dieser Knopf als einziger im Bootstrap-Blau dastand
       statt in der Markenfarbe - und auf getoentem Grund bei 4.32:1 lag, im
       Dunkeln bei 3.0. Deshalb hier beide Zustaende ausgeschrieben. */
    color: var(--link-text);
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active {
    color: var(--text-white);
    background-color: var(--primary-solid);
    border-color: var(--primary-solid);
}

.btn.btn-outline-danger {
    --bs-btn-color: var(--danger-text);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-color: var(--text-white);
    --bs-btn-hover-bg: var(--danger-solid);
    --bs-btn-hover-border-color: var(--danger-solid);
    --bs-btn-active-color: var(--text-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--danger-solid) 85%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--danger-solid) 85%, #000);
}

.btn.btn-outline-success {
    --bs-btn-color: var(--success-text);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-color: var(--text-white);
    --bs-btn-hover-bg: var(--success-solid);
    --bs-btn-hover-border-color: var(--success-solid);
    --bs-btn-active-color: var(--text-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--success-solid) 85%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--success-solid) 85%, #000);
}

/* Header-Button: dunkel gegen den Header-Hintergrund (--primary-light)
   abgesetzt, weißer Text. Für Buttons im .card-header gedacht. */
.btn.btn-header {
    background: var(--primary-dark);
    color: var(--text-white);
}

.btn.btn-header:hover,
.btn.btn-header:focus {
    background: color-mix(in srgb, var(--primary-dark) 85%, #000);
    box-shadow: var(--shadow-md);
    color: var(--text-white);
}

/* ===== Cards ===== */

/* Kein backdrop-filter auf der Karte: Er erzeugt einen Stacking- und
   Containing-Block, in dem Modals innerhalb einer Karte haengenbleiben - sie
   landen hinter Bootstraps Backdrop. Auf deckendem Grund ist er ohnehin
   unsichtbar. */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    background-color: var(--bg-card);
    position: relative;
}
.card .table {
    background: transparent;
    border-radius: 0;
}
.card .table-responsive {
    border-radius: inherit;
    box-shadow: none;
}

.card-header {
    /* Kartenkoepfe tragen die Farbe der Kopfleiste - so war es gedacht, aber
       nicht umgesetzt: Hier stand --primary-light, also ein helleres Blau als
       die Navigation. Wer den Kopf zusaetzlich mit .bg-primary-custom
       auszeichnete, bekam den richtigen Ton; wer es vergass, einen anderen. */
    background: var(--primary-solid);
    color: var(--text-white);
    font-weight: 700;
    border-bottom: none;
    padding: 1rem 1.5rem;
    letter-spacing: 0.3px;
}

/* Erhöhte Spezifität durch Parent-Selektor.
   :not(.btn) schließt als Button gestylte Links aus, damit deren
   eigene Bootstrap-Schriftfarbe (z. B. dunkel auf btn-light) erhalten bleibt. */
.card .card-header a:not(.btn) {
    color: var(--text-white);
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.card .card-header a:not(.btn):hover {
    color: var(--accent-orange);
}

.card-body {
    padding: 1.5rem;
    background-color: rgba(255, 255, 255, 0.95);
}

/* Textlinks in Karten. :not(.btn) ist entscheidend: .card-body a ist (0,1,1)
   und schlaegt damit Bootstraps .btn (0,1,0) - als Link gebaute Knoepfe
   verloren dadurch ihre Farbe und standen in Markenblau da. Bei den
   gefuellten Varianten faellt es nicht auf, weil eus.css sie mit (0,2,0)
   zurueckholt; die Outline-Varianten kamen erst im Hover zum Vorschein. */
.card-body a:not(.btn):not(.dropdown-item) {
    color: var(--link-text);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.card-body a:not(.btn):not(.dropdown-item):hover {
    color: var(--accent-orange);
    border-bottom-color: var(--accent-orange);
}

.card-footer {
    background-color: rgba(248, 249, 250, 0.95);
    border-top: 1px solid rgba(233, 236, 239, 0.5);
    padding: 1rem 1.5rem;
}

/* ===== Knoepfe mit Umriss =====

   Bootstrap faerbt ihren Text aus der Rollenfarbe. Bei den gefuellten Varianten
   ist das richtig - dort ist die Farbe die Flaeche und traegt weisse Schrift.
   Beim Umriss ist die Rollenfarbe der Text selbst und muss deshalb die
   Schwelle halten: --secondary kam auf 4.36:1, --primary auf 4.50:1. */
.btn-outline-secondary {
    --bs-btn-color: var(--text-secondary);
    --bs-btn-border-color: var(--gray-400);
}


/* ===== Leerzustand =====

   Steht mal in einer Karte, mal auf dem Seitengrund. Der zweite Fall ist der
   knappe: --text-muted kam dort auf 3.96:1. */
.ui-leerzustand {
    color: color-mix(in srgb, var(--text-muted) 70%, var(--text-primary));
}

/* ===== Fusszeile =====

   Sie steht ohne eigene Flaeche auf dem Seitengrund. Der ist im Hellen
   deutlich dunkler als eine Karte, und die beiden leisen Toene, die eine
   Fusszeile nun einmal traegt, kamen darauf auf 3.96:1 (Kleinschrift) und
   3.71:1 (Impressumslink). Der Schuss Vordergrundfarbe wirkt in jedem Theme
   in die richtige Richtung: im Hellen dunkler, im Dunkeln heller. */
footer.border-top small,
footer.border-top .text-muted {
    color: color-mix(in srgb, var(--text-muted) 70%, var(--text-primary)) !important;
}

footer.border-top a {
    color: color-mix(in srgb, var(--link-text) 80%, var(--text-primary));
}

/* ===== Tables ===== */

/* Hintergrund aus dem Token: Der Dark-Block unten setzt nur die
   --bs-table-*-Variablen, nicht background-color - die Tabellenflaeche bliebe
   sonst im Dunkeln hell, sichtbar in den Fugen zwischen den Zellen. */
.table {
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--bg-card);
    margin-bottom: 0;

    /* Ohne diese Zeilen faellt Bootstrap auf seinen Default #000 zurueck, NICHT
       auf --bs-body-color. Und es braucht alle vier Zustaende: fuer gestreifte,
       ueberfahrene und aktive Zeilen fuehrt Bootstrap je eine eigene Variable,
       die ebenfalls auf #000 steht. */
    --bs-table-color: var(--text-primary);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-active-color: var(--text-primary);
}

/* Solid-Variante: auf --primary-light kam die weisse Schrift auf 3.58:1. */
.table thead th {
    background: var(--primary-solid);
    color: var(--text-white);
    font-weight: 700;
    border: none;
    padding: 0.8rem 1rem;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Die Zeilenflaeche aus dem Token statt aus festem Weiss: rgba(255,255,255,.95)
   hatte kein Dark-Pendant. Sichtbar wurde das nie, weil Bootstrap die Zellen
   darueber deckend faerbt - es lag nur darauf und wartete auf den Tag, an dem
   eine Zelle transparent wird. Dieselbe Sorte Altlast wie das #2c3e50, das die
   Zellschrift im Dunkelmodus unlesbar machte. */
.table tbody tr {
    background-color: var(--bg-card);
    border-bottom: 1px solid rgba(233, 236, 239, 0.5);
}

/* Table Hover global deaktiviert */
.table tbody tr:hover,
.table-hover > tbody > tr:hover {
    --bs-table-hover-bg: transparent !important;
    --bs-table-accent-bg: var(--bs-table-bg) !important;
    transform: none !important;
    filter: none !important;
}

/* Bootstrap-Klassen - Erhöhte Spezifität durch Wiederholung */
.table-success.table-success {
    background-color: var(--bs-success-bg-subtle, #d1e7dd);
}

.table-warning.table-warning {
    background-color: var(--bs-warning-bg-subtle, #fff3cd);
}

.table-info.table-info {
    background-color: var(--bs-info-bg-subtle, #cff4fc);
}

.table-danger.table-danger {
    background-color: var(--bs-danger-bg-subtle, #f8d7da);
}

.table-light.table-light {
    background-color: var(--bs-light-bg-subtle, #fdfbf7);
}

/* Hier bewusst KEIN color: Dann greift Bootstraps Zellregel mit
   --bs-table-color, das oben je Theme gesetzt ist. Eine Farbe hier wuerde das
   ausschalten - `.table tbody td` (0,1,2) schlaegt
   `.table > :not(caption) > * > *` (0,1,1). */
.table tbody td {
    padding: 0.6rem 1rem;
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(248, 249, 250, 0.95);
}

/*
   Wie bei .card: festes Weiss durch das Token ersetzt (es gab kein
   Dark-Pendant, der Scroll-Rahmen blieb im Dark Mode also hell) und
   translateZ(0) entfernt - es erzeugte nur einen Stacking-Context.
*/
.table-responsive {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-color: var(--bg-card);
    -webkit-overflow-scrolling: touch; /* Smooth scrolling auf iOS */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(74, 124, 158, 0.5) rgba(0, 0, 0, 0.1);
}

.table .team-badge-wrapper-small {
    width: 40px;
    height: 40px;
    padding: 4px;
    transition: all 0.2s ease;
}

.table .team-badge-wrapper-small:hover {
    transform: scale(1.1);
}

.table td .d-flex {
    gap: 0.5rem;
    align-items: center;
}

.table td .fw-bold {
    font-size: 0.95rem;
}

.table .badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    white-space: nowrap;
}

/* Heim/Gast-Kuerzel (H/A): feste Breite/Hoehe statt der asymmetrischen
   Badge-Standardpaddings, sonst wird aus dem Kreis je nach Buchstabe
   ein Oval mit wechselnden Proportionen. Spezifitaet ".table .badge.badge-hg"
   noetig, um .badge.bg-secondary (zwei Klassen, weiter unten in dieser Datei)
   zu schlagen - sonst bekommt nur das A-Badge dessen groesseres Padding und
   den 8px-Radius zurueck und wirkt neben dem H-Badge deutlich groesser. */
.table .badge.badge-hg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    padding: 0;
    border-radius: 50%;
}

.table .text-primary-custom {
    transition: all 0.2s ease;
}

/* Erhöhte Spezifität durch td Kontext */
.table td .text-primary-custom:hover {
    color: var(--accent-orange);
    transform: scale(1.05);
    display: inline-block;
}

.table .btn-sm {
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.table .btn-sm:hover {
    transform: translateY(-1px);
}

/* ===== Forms ===== */

.form-label {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

/* Stand vor den Tokens: hier standen drei Literale - #e9ecef als Rand,
   rgba(255,255,255,.95) als Flaeche und #2c3e50 als Schrift. Letzteres ist
   nicht einmal mehr ein Wert der Farbwelt. */
.form-control,
.form-select {
    border: 2px solid var(--feld-rand);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    background-color: var(--bg-card);
    color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(74, 124, 158, 0.25);
    background-color: var(--text-white);
    outline: none;
}

/* ===== Umrisse von Bedienelementen =====

   Ein Kaestchen, das man nicht sieht, ist kein Bedienelement. Bootstraps
   Randfarben sind fuer beide Themes zu leise - gemessen 1.30:1 beim Kaestchen
   und 1.18:1 beim Auswahlfeld, gefordert sind 3:1. Der Fokusring bleibt
   unangetastet, er hat seine eigene Farbe. */
.form-check-input,
.form-control,
.form-select,
.input-group-text {
    border-color: var(--feld-rand);
}

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

.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(74, 124, 158, 0.25);
}

/* ===== Alerts ===== */

.alert {
    border: none;
    border-radius: 10px;
    padding: 1rem 1.5rem;
    border-left: 4px solid;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-weight: 500;
}

.alert-primary {
    background-color: var(--alert-primary-bg);
    border-left-color: var(--primary);
    color: var(--alert-primary-text);
}

.alert-warning {
    background-color: var(--bs-warning-bg-subtle);
    border-left-color: var(--accent-orange);
    color: var(--bs-warning-text-emphasis);
}

.alert-success {
    background-color: var(--bs-success-bg-subtle);
    border-left-color: var(--success);
    color: var(--bs-success-text-emphasis);
}

.alert-danger {
    background-color: var(--bs-danger-bg-subtle);
    border-left-color: var(--danger);
    color: var(--bs-danger-text-emphasis);
}

.alert-info {
    background-color: var(--bs-info-bg-subtle);
    border-left-color: var(--info);
    color: var(--bs-info-text-emphasis);
}

/* ===== Badges ===== */

/* Erhöhte Spezifität durch Klassen-Kombination */
.badge.badge-primary,
.badge.badge.bg-primary {
    /* Solid-Variante: --primary-light ergab mit weisser Schrift 3.4:1, im
       Dark Mode war --primary sogar bei 2.9:1. Ausserdem wich der Ton
       sichtbar von Knoepfen und Kopfleiste ab. */
    background: var(--primary-solid);
    color: var(--text-white);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
}

/* Badges wie die Knoepfe, flach aus den --*-solid-Tokens. Das !important ist
   noetig, weil Bootstraps .bg-* die background-color selbst mit !important
   setzen. */
.badge.badge-warning,
.badge.badge.bg-warning {
    background-color: var(--warning-solid) !important;
    background-image: none;
    color: var(--on-warning);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.75rem;
}

.badge.badge-success,
.badge.badge.bg-success {
    background-color: var(--success-solid) !important;
    background-image: none;
    color: var(--text-white);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.75rem;
}

.badge.badge-danger,
.badge.badge.bg-danger {
    background-color: var(--danger-solid) !important;
    background-image: none;
    color: var(--text-white);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.75rem;
}

.badge.badge-secondary,
.badge.bg-secondary {
    background: var(--secondary);
    color: var(--text-white);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.75rem;
}

.badge.badge-info,
.badge.badge.bg-info {
    background: var(--info);
    color: var(--text-white);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.75rem;
}

/* ===== Wappen transparency fix ===== */

.team-badge-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    transition: all 0.3s ease;
}

.team-badge-wrapper:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.team-badge {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: transparent;
}

@media (min-width: 768px) {
    .team-badge {
        filter: none;
    }
}

@media (max-width: 767px) {
    .team-badge {
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    }
}

/* Standardgroesse 50px, ueber --w abweichbar - in Ergebnislisten sitzt
   derselbe Rahmen mit 20 oder 24px. */
.team-badge-wrapper-small {
    position: relative;
    width: var(--w, 50px);
    height: var(--h, var(--w, 50px));
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 5px;
    transition: all 0.2s ease;
}

.team-badge-wrapper-small:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.team-badge-small {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: transparent;
}

@media (min-width: 768px) {
    .team-badge-small {
        filter: none;
    }
}

@media (max-width: 767px) {
    .team-badge-small {
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    }
}

.wappen-tabelle {
    max-width: 32px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 991px) {
    .wappen-tabelle { max-width: 28px; }
}

@media (max-width: 767px) {
    .wappen-tabelle { max-width: 24px; }
}

@media (min-width: 768px) {
    .team-badge-wrapper {
        width: 90px;
        height: 90px;
    }
    
}

@media (min-width: 992px) {
    .team-badge-wrapper {
        width: 100px;
        height: 100px;
    }
    
    .team-badge-wrapper-small {
        width: 55px;
        height: 55px;
    }
    
}

@media (max-width: 575px) {
    .team-badge-wrapper {
        width: 60px;
        height: 60px;
        padding: 6px;
    }
    
    .team-badge-wrapper-small {
        width: 45px;
        height: 45px;
        padding: 4px;
    }
    
}

/* ===== Squad selection - player cards ===== */

/* Rest der frueheren Spielerkarte - bleibt, weil res/js/aufstellung.js die
   Klasse setzt. */
.player-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ===== Player actions - responsive layouts ===== */

@media (min-width: 768px) and (max-width: 1099px) {
    .player-name {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0;
        flex-wrap: wrap;
    }
    
}

@media (max-width: 767px) {
    .player-name {
        font-size: 0.95rem;
        margin-bottom: 0;
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
}

@media (max-width: 576px) {
    .formation-text {
        font-size: 1.1rem !important;
    }
}

/* ===== Marktwert styles ===== */

.marktwert-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.marktwert-table tbody tr {
    transition: none;
}

.marktwert-table thead th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease-in-out;
}

.marktwert-table thead th.sortable:hover {
    background-color: rgb(74, 124, 158);
}

/* ===== Mobile performance optimierungen ===== */

@media (max-width: 991px) {
    
    /* Backdrop-Filter deaktivieren (sehr teuer!) */
    .container,
    .container-fluid,
    .card,
    .card-body,
    .table,
    .table-responsive,
    .modal-content,
    .dropdown-menu,
    .navbar-collapse {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    .card,
    .btn,
    .table tbody tr,
    .list-group-item,
    .nav-link,
    .dropdown-item {
        transition: background-color 0.15s ease !important;
    }
    
    .btn:hover,
    .list-group-item:hover {
        transform: none !important;
    }
    
    /* Table Hover → global deaktiviert */
    
    .btn:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
    
    
    .table tbody tr {
        contain: layout style;
    }
    
    .card {
        contain: layout style;
    }
    
    .navbar {
        padding: 0.4rem 1rem !important;
    }
    
    .navbar-collapse {
        background: transparent;
        padding: 0.5rem 0.25rem;
        margin-top: 0;
        border-radius: 0;
        border: none;
        box-shadow: none;
        max-height: 80vh;
        overflow-y: auto;
        scrollbar-color: rgba(255,255,255,0.4) transparent;
        scrollbar-width: thin;
    }
    .navbar-collapse::-webkit-scrollbar {
        width: 6px;
    }
    .navbar-collapse::-webkit-scrollbar-track {
        background: transparent;
    }
    .navbar-collapse::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.4);
        border-radius: 3px;
    }
    
    .table tbody td {
        padding: 0.5rem 0.75rem !important;
    }
    
    .table thead th {
        padding: 0.7rem 0.75rem !important;
        font-size: 0.8rem;
    }
    
    .table .team-badge-wrapper-small {
        width: 35px;
        height: 35px;
        padding: 3px;
    }
    
    .table .btn-sm {
        padding: 0.3rem 0.7rem;
        font-size: 0.8rem;
    }
    
    .table td .fw-bold {
        font-size: 0.875rem;
    }
    
    .table .fs-5 {
        font-size: 1.1rem !important;
    }
    
    .table small {
        font-size: 0.75rem;
    }
    
    .table .badge {
        padding: 0.2rem 0.45rem;
        font-size: 0.65rem;
    }
}

@media (max-width: 767px) {
    
    * {
        animation-duration: 0s !important;
        transition-duration: 0.1s !important;
    }
    
    .card,
    .table-responsive,
    .modal-content,
    .alert {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    }
    
    .btn:hover,
    .btn:focus {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Einfache Backgrounds statt Gradienten */
    body,
    html {
        background-color: #808080 !important;
        background-image: none !important;
    }
    
    .container,
    .container-fluid {
        padding: 1rem;
    }
    
    /* Table Hover → global in TABLES-Sektion deaktiviert */
    
    /* Opacity-Änderungen statt komplexer Effekte */
    .btn:active {
        opacity: 0.8;
        transform: none !important;
    }
    
    .card:active {
        opacity: 0.95;
        transform: none !important;
    }
    
    /* System Fonts statt Custom Fonts */
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 
                     Roboto, "Helvetica Neue", Arial, sans-serif !important;
    }
      
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    h4 {
        font-size: 1.1rem;
    }
    
    h5 {
        font-size: 1rem;
    }
    
    h6 {
        font-size: 0.9rem;
    }
    
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .btn-lg {
        padding: 0.6rem 1.25rem;
        font-size: 1rem;
    }
    
    .btn-sm {
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .card {
        margin-bottom: 1rem;
    }
    
    .card-header {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .card-footer {
        padding: 0.75rem 1rem;
    }
    
    .alert {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
    }
    
    .form-control,
    .form-select {
        padding: 0.6rem 0.875rem;
        font-size: 0.9rem;
    }
    
    .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }
    
    .modal-header {
        padding: 1rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-footer {
        padding: 0.75rem 1rem;
    }
    
    .pagination .page-link {
        padding: 0.375rem 0.625rem;
        font-size: 0.85rem;
    }
    
    .list-group-item {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    .progress {
        height: 1.25rem;
    }
    
    .navbar-brand {
        font-size: 0.9rem;
    }
    
    .navbar-light .navbar-nav .nav-link {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
    
    .table {
        font-size: 0.85rem;
    }
    
    .table tbody td {
        padding: 0.4rem 0.65rem !important;
    }
    
    .table thead th {
        padding: 0.6rem 0.65rem !important;
        font-size: 0.75rem;
    }
    
    .table .team-badge-wrapper-small {
        width: 32px;
        height: 32px;
        padding: 2px;
    }
    
    .table .btn-sm {
        padding: 0.25rem 0.55rem;
        font-size: 0.75rem;
    }
    
    .table td .fw-bold {
        font-size: 0.85rem;
    }
    
    .table .fs-5 {
        font-size: 1rem !important;
    }
    
    .table small {
        font-size: 0.7rem;
    }
    
    .table .badge {
        padding: 0.15rem 0.4rem;
        font-size: 0.6rem;
    }

    .table td .d-flex {
        gap: 0.4rem !important;
    }
    
    .mb-4 h4 {
        font-size: 1.1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .mb-4 h4 i {
        font-size: 1rem !important;
    }
    .navbar-toggler-icon {
        display: inline-block;
        width: 1.2em;
        height: 1.2em;
        vertical-align: middle;
        background-image: var(--bs-navbar-toggler-icon-bg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
    }
}

@media (max-width: 576px) {
    
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.35rem;
    }
    
    h3 {
        font-size: 1.15rem;
    }
    
    h4 {
        font-size: 1rem;
    }
    
    h5 {
        font-size: 0.9rem;
    }
    
    .container,
    .container-fluid {
        padding: 0.75rem;
    }
    
    .card {
        margin-bottom: 0.75rem;
    }
    
    .card-header {
        padding: 0.6rem 0.875rem;
    }
    
    .card-body {
        padding: 0.875rem;
    }
    
.table {
        font-size: 0.75rem;
    }
    
    .table tbody td {
        padding: 0.35rem 0.5rem !important;
        line-height: 1.3;
    }
    
    .table thead th {
        padding: 0.5rem 0.5rem !important;
        font-size: 0.7rem;
    }
    
    .table .team-badge-wrapper-small {
        width: 28px;
        height: 28px;
        padding: 2px;
    }
    
    .table .btn-sm {
        padding: 0.2rem 0.45rem;
        font-size: 0.7rem;
    }
    
    .table td .fw-bold {
        font-size: 0.8rem;
    }
    
    .table .fs-5 {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
    }
    
    .table small {
        font-size: 0.65rem;
    }
    
    .table .badge {
        padding: 0.1rem 0.35rem;
        font-size: 0.6rem;
    }

    .table td .d-flex {
        gap: 0.3rem !important;
    }

    .table thead th i {
        font-size: 0.75rem;
    }
    
    .mb-4 h4 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .mb-4 h4 i {
        font-size: 0.9rem !important;
    }
    
}

@media (hover: none) and (pointer: coarse) {
    
    *:hover {
        transform: none !important;
    }
    
    .btn:active,
    .card:active,
    .list-group-item:active {
        opacity: 0.85;
        transform: none !important;
        transition: opacity 0.1s ease;
    }
    
    .btn:hover {
        transition: none !important;
    }
    
    .btn {
        min-height: 44px;
    }
    
    .form-control,
    .form-select {
        min-height: 44px;
    }
    
    .nav-link {
        min-height: 44px;
    }
    
    .list-group-item {
        min-height: 44px;
    }
}

@media (min-width: 992px) {
    .modal-dialog {
        max-width: 800px;
    }
    
    .modal-lg {
        max-width: 1000px;
    }
    
    .table tbody td {
        padding: 0.6rem 1rem;
    }
    
    .table thead th {
        padding: 0.8rem 1rem;
    }
    
    .table .team-badge-wrapper-small {
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .card-body {
        padding: 1.25rem;
    }
    
    .table {
        font-size: 0.9rem;
    }
    
    .table thead th {
        padding: 0.75rem 1rem;
    }
    
    .table tbody td {
        padding: 0.75rem 1rem;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    
    .modal-dialog {
        max-height: 90vh;
        overflow-y: auto;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .card,
    .btn,
    .form-control,
    .alert {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
}

/* ===== Additional components ===== */

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
}

.list-group {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.list-group-item {
    border: none;
    border-bottom: 1px solid rgba(233, 236, 239, 0.5);
    background-color: rgba(255, 255, 255, 0.95);
    transition: all 0.3s ease;
    padding: 1rem 1.5rem;
}

.list-group-item:hover {
    background-color: rgba(248, 249, 250, 0.95);
    padding-left: 1.75rem;
}

.list-group-item.active {
    background: var(--primary-solid);
    border-color: transparent;
    color: var(--text-white);
}

.progress {
    border-radius: 8px;
    height: 1.5rem;
    background-color: rgba(233, 236, 239, 0.95);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar {
    background: var(--primary-light);
    border-radius: 8px;
    font-weight: 600;
}

/* Hintergrund ueber --bs-modal-bg, das im Dark Mode selbst umschaltet - es
   gibt im Projekt keine einzige Dark-Regel fuer Modals. */
.modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    background-color: var(--bs-modal-bg, var(--bg-card));
}

.modal-header {
    background: var(--primary-solid);
    color: var(--text-white);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 1.25rem 1.5rem;
}

.modal-body {
    background-color: transparent;
    padding: 1.5rem;
}

/* ===== Gemeinsames Seitengeruest: .ui-* =====

   Sechs Module tragen inzwischen dasselbe Muster mit eigenem Praefix:
   .fin-, .vu-, .tm-, .auf-, .ts-, .tr-. Das ist dort richtig, wo eine Seite
   eigene Bausteine braucht - ein Spielfeld, ein Kennzahlenraster, eine
   Wochenuebersicht -, und die eigene Token-Ebene erlaubt, den Ton je Modul
   nachzujustieren.

   Fuer eine Seite, die nur Karten und eine Tabelle zeigt, ist eine eigene
   CSS-Datei zu viel: sie waere eine Kopie dieser dreissig Zeilen. Solche
   Seiten nehmen .ui-page und die Bausteine darin.

   Wer spaeter doch eigene Teile braucht, legt eine Datei mit eigenem Praefix
   an und bleibt beim selben Aufbau - die Namen hier sind das Vorbild, nicht
   die Grenze. */

/* Die Tokenebene haengt an beiden Wurzeln, nicht nur an .ui-page. Eine
   einzelne .ui-card ausserhalb einer Seite - etwa ein nachgestellter Abschnitt -
   bekam sonst weder Flaeche noch Rand: die Variablen waren dort schlicht nicht
   definiert, und alles darin mass sich gegen den Seitengrund. */
.ui-page,
.ui-card {
    --ui-surface: var(--bg-card);
    --ui-surface-2: var(--surface-3);
    --ui-border: var(--gray-200);
    --ui-muted: var(--text-muted);
    --ui-faint: var(--gray-500);
    --ui-accent: var(--primary);
    --ui-radius: 12px;
    --ui-gap: 10px;

    color: var(--text-primary);
}

/* ----- Seitenkopf ----- */
.ui-page-head {
    margin: 2px 0 12px;
}

.ui-page-head h4 {
    font-size: 22px;
    margin: 0 0 3px;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ui-page-head h4 .bi {
    color: var(--ui-accent);
}

/* Diese Zeile steht als einzige des Geruests auf dem Seitengrund statt auf
   einer Karte. Der Grund ist im Hellen deutlich dunkler als eine Karte, und
   --ui-muted kam darauf nur auf 3.96:1. Ein Schuss Vordergrundfarbe hebt sie
   an, ohne eine zweite Muted-Stufe einzufuehren. */
.ui-page-head p a {
    color: color-mix(in srgb, var(--link-text) 75%, var(--text-primary));
}

.ui-page-head p {
    margin: 0;
    color: color-mix(in srgb, var(--ui-muted) 80%, var(--text-primary));
    font-size: 13.5px;
}

/* ----- Inhaltskarte ----- */
.ui-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: var(--ui-gap);
}

.ui-card-head {
    background: var(--kopf-band);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 13px;
    border-bottom: 1px solid var(--ui-border);
}

.ui-card-head h2 {
    font-size: 14.5px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    letter-spacing: -0.01em;
}

.ui-card-head h2 .bi {
    color: var(--ui-accent);
}

.ui-card-body {
    padding: 11px 13px;
}

.ui-card-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 9px 13px;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface-2);
}

/* ----- Podestkarte -----

   Die ersten drei Plaetze einer Rangliste tragen einen kraeftigen Rand in
   ihrer Rangfarbe. Das stand bisher als Bootstrap-Randklasse plus einem
   inline border-width in jeder Liste einzeln. */
.ui-podest {
    border-width: 3px;
}

.ui-podest-1 { border-color: var(--accent-orange); }
.ui-podest-2 { border-color: var(--gray-400); }
.ui-podest-3 { border-color: var(--success); }

/* ----- Kennzahlenliste -----

   Konditionen, Kennwerte, Eckdaten: eine Beschriftung links, ein Wert rechts.
   Die Seiten hatten dafuer bisher zweierlei Auszeichnung - eine Tabelle fuer
   den Schreibtisch und eine zweite, handgebaute Liste fuer das Telefon. Eine
   Liste, die auf schmalen Geraeten umbricht, reicht fuer beides. */
.ui-daten {
    margin: 0;
}

.ui-daten > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 14px;
    padding: 7px 0;
    border-bottom: 1px solid var(--ui-border);
}

.ui-daten > div:last-child {
    border-bottom: 0;
}

.ui-daten dt {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ui-muted);
    margin: 0;
}

.ui-daten dd {
    margin: 0;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* Die Zeile, auf die es ankommt - Endsumme, Rueckzahlung, Ergebnis. */
.ui-daten .ui-daten-stark dt,
.ui-daten .ui-daten-stark dd {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 15px;
}

.ui-daten .ui-daten-stark {
    border-top: 1px solid var(--ui-border);
    margin-top: 2px;
}

/* --danger ist der Flaechenton; als Zahl auf der Karte kam er im Dunkeln auf
   3.22:1. --danger-text ist dieselbe Rolle in der Textebene. */
.ui-daten .ui-daten-warnen dd {
    color: var(--danger-text);
}

.ui-daten .ui-daten-gut dd {
    color: var(--success-text);
}

/* ----- Tabelle ----- */
.ui-table-scroll {
    overflow-x: auto;
}

.ui-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

/* Feste Spaltenbreiten statt inhaltsabhaengiger Auto-Berechnung - noetig,
   wenn dieselbe Spaltenstruktur in mehreren getrennten <table>-Elementen
   untereinander steht (z.B. ein Spielplan mit einer Tabelle je Spieltag).
   Ohne das berechnet jede Tabelle ihre Spaltenbreiten unabhaengig von den
   laengsten Vereinsnamen in genau diesem Spieltag - die Ergebnis-Spalte
   wandert dann von Block zu Block horizontal, das Ganze wirkt "schief". */
.ui-tbl-fixed {
    table-layout: fixed;
}

/* Derselbe Ton wie der Kartenkopf: die Kopfzeile einer Tabelle ist dieselbe
   Art von Beschriftung und soll sich genauso vom Inhalt absetzen. Steht eine
   Tabelle direkt unter einem Kartenkopf, ergibt das zwei Baender in derselben
   Farbe - getrennt durch die Linie dazwischen, wie zwei Zeilen eines Kopfes. */
.ui-tbl thead th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ui-faint);
    background: var(--kopf-band);
    font-weight: 700;
    padding: 7px 10px;
    border-bottom: 1px solid var(--ui-border);
    white-space: nowrap;
}

.ui-tbl thead th.num,
.ui-tbl td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ui-tbl tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--ui-border);
    vertical-align: middle;
}

.ui-tbl tbody tr:last-child td {
    border-bottom: 0;
}

.ui-tbl tbody tr:hover td {
    background: var(--ui-surface-2);
}

/* Abgesetzter Hinweis innerhalb einer Karte - fuer Erklaertexte und
   Zusammenfassungen, die nicht der Hauptinhalt sind. */
/* Der Kasten hatte Flaeche, Rand und Rundung - aber keinen Innenabstand, der
   Text klebte also an der Kante. Der letzte Absatz gibt seinen Aussenabstand
   ab, damit unten nicht mehr Luft steht als oben. */
.ui-hinweisbox {
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    padding: 11px 13px;
    color: var(--ui-muted);
    font-size: 13.5px;
}

.ui-hinweisbox > :last-child {
    margin-bottom: 0;
}

.ui-hinweisbox strong {
    color: var(--text-primary);
}

/* Bootstraps Zeilenvarianten .table-success und Co. setzen ihre Schriftfarbe
   am <tr>, und die ist schwarz. Bootstrap hebt das an der Zelle wieder auf -
   ueber .table > :not(caption) > * > *. Diese Regel haengt aber an .table, die
   eine .ui-tbl nicht traegt; die Zelle erbte also Schwarz. Im Hellen faellt
   das nicht auf, weil die Zeilenflaeche dort ein Pastellton ist. Im Dunkeln
   kippt die Flaeche mit (--bs-success-bg-subtle wird zu #051b11) und die
   Schrift blieb schwarz: 1.16:1.

   Die Farbe steht hier am <tr>, nicht an der Zelle. So erbt jede Zelle ohne
   eigene Farbe den richtigen Ton, waehrend .text-success und Co. an einzelnen
   Zellen weiter gewinnen - eine Regel an .ui-tbl tbody td wuerde die
   ueberschreiben. */
.ui-tbl tr.table-primary,
.ui-tbl tr.table-secondary,
.ui-tbl tr.table-success,
.ui-tbl tr.table-info,
.ui-tbl tr.table-warning,
.ui-tbl tr.table-danger,
.ui-tbl tr.table-light,
.ui-tbl tr.table-dark,
.ui-tbl tr.table-relegation {
    color: var(--text-primary);
}

/* Ein Link auf einer getoenten Zeile steht nicht mehr auf der Karte, sondern
   auf einem Pastellton (hell) oder einem sehr dunklen Ton (dunkel).
   --link-text kam dort auf 4.28:1. */
/* Dasselbe wie beim Link: .text-success und Co. sind fuer die Kartenflaeche
   abgestimmt. Auf einer getoenten Zeile - im Hellen ein Pastellton - kam
   Gruen auf Rosa auf 3.39:1. */
.ui-tbl tr[class*="table-"] .text-success {
    color: color-mix(in srgb, var(--success) 55%, var(--text-primary)) !important;
}

.ui-tbl tr[class*="table-"] .text-danger {
    color: color-mix(in srgb, var(--danger) 55%, var(--text-primary)) !important;
}

.ui-tbl tr[class*="table-"] .text-warning {
    color: color-mix(in srgb, var(--warning) 55%, var(--text-primary)) !important;
}

.ui-tbl tr[class*="table-"] .text-info {
    color: color-mix(in srgb, var(--info) 55%, var(--text-primary)) !important;
}

.ui-tbl tr[class*="table-"] a {
    color: color-mix(in srgb, var(--link-text) 75%, var(--text-primary));
}

/* Positionsstreifen am Zeilenanfang - dieselbe Sprache wie im Kader. */
.ui-tbl tbody tr td:first-child {
    box-shadow: inset 3px 0 0 var(--pos, transparent);
}

/* ===== Dialog im Kartenmuster: .ui-modal =====

   Die Regel darueber faerbt jede Kopfleiste blau und die Schrift weiss. Das
   passt nicht mehr zu den Seiten, die auf Karten mit heller Kopfzeile und
   farbigem Symbol umgestellt sind - der Dialog sah aus wie aus einer anderen
   Anwendung.

   Geaendert wird sie trotzdem nicht: sie gilt fuer jeden Dialog im Spiel, und
   das ist eine Entscheidung fuer alle Seiten, nicht fuer diese. Wer das neue
   Muster will, setzt .ui-modal auf .modal-content - dann sieht der Dialog aus
   wie die Karten der Seite, aus der er kommt.

   Modale liegen ausserhalb von .auf-page und .tm-page (sie werden nach dem
   Layout gerendert), deshalb steht das hier und nicht in einer Feature-Datei. */
.ui-modal {
    border: 1px solid var(--gray-200);
}

.ui-modal .modal-header {
    /* Dieselbe Flaeche wie die Kartenkoepfe der Seiten - ein Dialog ist eine
       Karte, die vorne liegt. */
    background: color-mix(in srgb, var(--surface-3) 55%, var(--bg-card));
    color: var(--text-primary);
    border-bottom: 1px solid var(--gray-200);
    padding: 11px 16px;
}

.ui-modal .modal-title {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 9px;
}

.ui-modal .modal-title .bi {
    color: var(--primary);
    font-size: 17px;
}

.ui-modal .modal-body {
    padding: 14px 16px;
}

.ui-modal .modal-footer {
    background: var(--surface-3);
    border-top: 1px solid var(--gray-200);
    padding: 10px 16px;
}

/* Karten im Dialog - der Forums-Export gliedert seinen Inhalt in mehrere.
   Auch sie tragen sonst die blaue Kopfleiste, und drei davon uebereinander
   in einem Dialog sind zu viel Farbe fuer eine Gliederung. */
.ui-modal .card {
    border: 1px solid var(--gray-200);
    box-shadow: none;
}

.ui-modal .card-header {
    background: var(--surface-3);
    color: var(--text-primary);
    border-bottom: 1px solid var(--gray-200);
    font-weight: 650;
    font-size: 13.5px;
}

.modal {
    z-index: 1056 !important;
}

.modal-dialog {
    z-index: 1057 !important;
}

.modal-backdrop {
    z-index: 1055 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

.modal.show {
    display: block !important;
}

.modal-backdrop.fade {
    opacity: 0;
    transition: opacity 0.15s linear;
}

.modal-backdrop.show {
    opacity: 0.5;
}

body.modal-open {
    overflow: hidden !important;
}

/* Grund und Rand kamen als feste Weisstoene aus der Zeit vor dem Dunkelmodus.
   Die Flaeche blieb dadurch auch im Dunkeln weiss, und die blaue Schrift
   darauf kam auf 2.92:1. Beides haengt jetzt an den Flaechentokens und
   schaltet mit. */
.pagination .page-link {
    color: var(--link-text);
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    margin: 0 0.25rem;
    font-weight: 600;
    transition: all 0.3s ease;
    background-color: var(--bg-card);
    padding: 0.5rem 0.75rem;
}

.pagination .page-link:hover {
    background-color: color-mix(in srgb, var(--primary) 12%, var(--bg-card));
    border-color: var(--primary);
    color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* --primary-light ist ein Ton der Markenfarbe, kein Flaechenton: weisse
   Schrift kam darauf auf 3.58:1. Flaechen, die Weiss tragen, nehmen
   --primary-solid - dafuer ist es da. */
.pagination .page-item.active .page-link {
    background: var(--primary-solid);
    border-color: var(--primary);
    color: var(--text-white);
    box-shadow: 0 4px 12px rgba(74, 124, 158, 0.4);
}

/* --secondary ist ein Flaechen- und Rahmenton, kein Textton: auf dem
   Seitengrund kam er auf 3.05:1. Zwei Module hatten das lokal schon
   ausgebessert, mit einer Regel, die nur innerhalb einer .card greift -
   ausserhalb blieb es beim schwachen Wert. Hier ist es die richtige Stelle. */
.nav-pills .nav-link {
    color: var(--text-secondary);
    border-radius: 0;
    padding: 1rem 1.5rem;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.nav-pills .nav-link:hover {
    color: var(--primary);
    background-color: rgba(74, 124, 158, 0.1);
    border-bottom-color: rgba(74, 124, 158, 0.3);
}

.nav-pills .nav-link.active {
    color: var(--reiter-aktiv) !important;
    background-color: rgba(74, 124, 158, 0.15) !important;
    border-bottom: 3px solid var(--primary) !important;
    font-weight: 600;
}

.nav-pills .nav-link i {
    transition: transform 0.3s ease;
}

.nav-pills .nav-link:hover i,
.nav-pills .nav-link.active i {
    transform: scale(1.1);
}

/* ===== Print styles ===== */

@media print {
    .navbar {
        display: none !important;
    }
    
    body {
        background: white;
    }
    
    .container,
    .container-fluid {
        background: white;
        box-shadow: none;
    }
    
}

/* ===== Utility classes ===== */

/* Traegt Spielernamen, Vereinsnamen und Seitentitel - also Text, keine
   Flaeche. --primary liegt als Textfarbe genau auf der Schwelle (4.50:1 auf
   Weiss) und im Dunkeln darunter; auf getoentem Grund kam die Klasse auf
   2.92:1. Sie nimmt deshalb dieselbe Farbe wie Links. */
.text-primary-custom {
    color: var(--link-text) !important;
}

.text-warning-custom {
    color: var(--accent-orange) !important;
}

/* Semantische Textfarben auf die Text-Ebene umbiegen. Nicht ueber
   --bs-success-rgb aendern: dieselbe Variable versorgt auch .bg-success, das
   faerbte Flaechen mit um. Das !important ist noetig, weil Bootstraps
   Utilities selbst !important tragen. */
.text-success { color: var(--success-text) !important; }
.text-danger  { color: var(--danger-text) !important; }
.text-warning { color: var(--warning-text) !important; }
.text-info    { color: var(--info-text) !important; }

/* Karten-Symbole (bi-square-fill) stellen einen Gegenstand dar, keine Schrift.
   Dafuer gilt die Flaechen-Ebene: --warning ist das Kartengelb, --warning-text
   waere das dunkle Oliv fuer Text. Beide Tokens sind theme-unabhaengig - eine
   gelbe Karte ist im Dunkeln genauso gelb. */
.karte-gelb { color: var(--warning); }
.karte-rot  { color: var(--danger); }

/* Dieselben Farben als Badge-Flaeche. Gelb traegt dunkle Schrift: Weiss auf
   dem Kartengelb kommt auf 1.6:1. Nicht ueber .bg-warning nehmen - das ist
   die Warnfarbe (gedaempftes Orange), keine Karte.

   Die Schrift wird aus der Kartenfarbe abgedunkelt, nicht aus --gray-900
   genommen: Die Graustufen kehren sich im Dunkelmodus um, und die Flaeche
   bleibt in beiden Themes gelb. */
.badge.karte-badge-gelb {
    background-color: var(--warning);
    color: color-mix(in srgb, var(--warning) 12%, #000);
}

.badge.karte-badge-rot {
    background-color: var(--danger);
    color: var(--text-white);
}

/* Bootstraps .nav-tabs faerbt den ruhenden Reiter aus seinen eigenen Tokens
   und kam damit auf 3.71:1. Dieselbe Stufe wie beim Pill-Menue. */
.nav-tabs .nav-link {
    color: var(--text-secondary);
}

.nav-tabs .nav-link.active {
    color: var(--reiter-aktiv);
}

/* ===== Getoente Flaechen =====

   Bootstraps .bg-opacity-* laeuft hier ins Leere: die .bg-*-Utilities oben
   setzen ihre Flaeche mit !important und dazu weisse Schrift, weil
   vierundzwanzig Templates genau das brauchen. Zwoelf andere Stellen schreiben
   aber .bg-success.bg-opacity-10 und meinen eine leise Toenung - und bekamen
   eine volle Flaeche mit weisser Schrift darauf. Auf stat_marktwerte stand
   grauer Text auf sattem Blau, 1.47:1.

   Fuer die Kombination gibt es deshalb eigene Regeln: die Toenung wird gegen
   die Kartenflaeche gemischt, damit sie in beiden Themes stimmt, und die
   Schrift bleibt die normale Textfarbe. */
.bg-primary.bg-opacity-10 {
    background-color: color-mix(in srgb, var(--primary) 10%, var(--bg-card)) !important;
    color: var(--text-primary) !important;
}

.bg-primary.bg-opacity-25 {
    background-color: color-mix(in srgb, var(--primary) 25%, var(--bg-card)) !important;
    color: var(--text-primary) !important;
}

.bg-info.bg-opacity-10 {
    background-color: color-mix(in srgb, var(--info) 10%, var(--bg-card)) !important;
    color: var(--text-primary) !important;
}

.bg-info.bg-opacity-25 {
    background-color: color-mix(in srgb, var(--info) 25%, var(--bg-card)) !important;
    color: var(--text-primary) !important;
}

.bg-success.bg-opacity-10 {
    background-color: color-mix(in srgb, var(--success) 10%, var(--bg-card)) !important;
    color: var(--text-primary) !important;
}

.bg-success.bg-opacity-25 {
    background-color: color-mix(in srgb, var(--success) 25%, var(--bg-card)) !important;
    color: var(--text-primary) !important;
}

.bg-danger.bg-opacity-10 {
    background-color: color-mix(in srgb, var(--danger) 10%, var(--bg-card)) !important;
    color: var(--text-primary) !important;
}

.bg-danger.bg-opacity-25 {
    background-color: color-mix(in srgb, var(--danger) 25%, var(--bg-card)) !important;
    color: var(--text-primary) !important;
}

.bg-warning.bg-opacity-10 {
    background-color: color-mix(in srgb, var(--warning) 10%, var(--bg-card)) !important;
    color: var(--text-primary) !important;
}

.bg-warning.bg-opacity-25 {
    background-color: color-mix(in srgb, var(--warning) 25%, var(--bg-card)) !important;
    color: var(--text-primary) !important;
}

.bg-secondary.bg-opacity-10 {
    background-color: color-mix(in srgb, var(--secondary) 10%, var(--bg-card)) !important;
    color: var(--text-primary) !important;
}

.bg-secondary.bg-opacity-25 {
    background-color: color-mix(in srgb, var(--secondary) 25%, var(--bg-card)) !important;
    color: var(--text-primary) !important;
}

/* Bootstrap primary color override for table headers and backgrounds */
.bg-primary {
    /* Flaeche mit weisser Schrift -> Solid-Ebene, sonst 4.499:1 im Light und
       2.9:1 im Dark. */
    background-color: var(--primary-solid) !important;
    color: var(--text-white) !important;
}

/* Einer von vier Namen fuer dieselbe blaue Flaeche - historisch gewachsen, in
   24 Templates verwendet. Alle vier zeigen auf --primary-solid; sie bleiben
   nur bestehen, damit die Templates unveraendert weiterlaufen. Fuer neues
   Markup reicht .bg-primary. */
.bg-primary-custom {
    background: var(--primary-solid) !important;
    color: var(--text-white) !important;
}

/* Dritter Name fuer dieselbe Sache (47 Vorkommen in 11 Templates, vor allem
   Trainingsseiten). Lief auf --primary und damit im Dunkelmodus auf dem
   aufgehellten #6a9dc0 - weisse Schrift darauf ergab 2.9:1. Folgt jetzt
   ebenfalls der Kopfleiste. Die Klasse bleibt bestehen, damit die Templates
   unveraendert weiterlaufen. */
.bg-primary-eus {
    background-color: var(--primary-solid) !important;
    color: var(--text-white) !important;
}

.rounded-custom {
    border-radius: 12px !important;
}

.shadow-custom {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ===== Image & icon size utilities ===== */

.logo-xs {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.img-16 {
    height: 16px;
    width: auto;
}

.logo-sm {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.flag-cdn {
    width: 20px;
    height: auto;
    vertical-align: middle;
}

.logo-md {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.logo-lg {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.logo-xl {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.logo-2xl {
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.logo-80 {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.icon-xs {
    font-size: 0.4rem;
}

.icon-sm {
    font-size: 0.5rem;
}

.icon-md {
    font-size: 0.85rem;
}

.icon-lg {
    font-size: 1.2rem;
}

.icon-xl {
    font-size: 3rem;
}

.icon-2xl {
    font-size: 4rem;
}

.progress-xs {
    height: 6px;
}

.progress-sm {
    height: 8px;
}

.progress-md {
    height: 12px;
}

.progress-lg {
    height: 16px;
}

/* ===== Zustandswerte: Balkenraster und Ampelpunkte =====
   Bausteine skeletons/_werte_gitter.twig und _werte_indikator.twig.

   Die Rollen tragen ihre eigene Token-Ebene an der Komponente statt in :root -
   damit bekommt jede Rolle einen sprechenden Namen, ohne dass im globalen
   Namensraum vier weitere Namen fuer bereits vorhandene Werte entstehen.
   Alle vier sind Flaechen ohne Schrift, deshalb die -solid-Ebene; sie ist
   theme-unabhaengig und braucht keine Dark-Regel.

   Vier verschiedene Farben, weil vier Balken untereinanderstehen: waeren sie
   gleich eingefaerbt, muesste man jede Zeile am Kuerzel ablesen. */
.werte-gitter,
.werte-indikator {
    --wert-kondition:     var(--success-solid);
    --wert-frische:       var(--primary-solid);
    --wert-zufriedenheit: var(--info-solid);
    --wert-form:          var(--warning-solid);
    --wert-leer:          var(--gray-300);

    /* Ampel der Zwei-Punkt-Anzeige: ab 75 % der Skala gut, ab 50 % mittel.
       Die Schwellen selbst stehen in zustandswerte() - hier liegt nur die
       Farbe zur fertigen Stufe. */
    --wert-gut:     var(--success-solid);
    --wert-mittel:  var(--warning-solid);
    --wert-schwach: var(--danger-solid);
}

.werte-gitter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 14px;
    min-width: 13rem;
}

.werte-zeile {
    display: grid;
    grid-template-columns: 1.5rem 1fr 1.7rem;
    align-items: center;
    gap: 5px;
}

.werte-kuerzel {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

/* Die Spur ist bewusst kraeftiger als eine uebliche Fortschrittsleiste: bei
   fuenf Pixeln Hoehe und einer Spur in --gray-200 war auf hellem Grund kaum
   zu erkennen, wo der Balken endet - und damit war der Vergleich zwischen
   zwei Spielern, der einzige Zweck der Darstellung, nicht mehr moeglich. */
.werte-balken {
    display: block;
    height: 9px;
    border-radius: 5px;
    background: var(--surface-3);
    border: 1px solid var(--gray-300);
    overflow: hidden;
}

.werte-balken-fuellung {
    display: block;
    height: 100%;
    width: var(--w, 0%);
    border-radius: 4px;
    background: var(--wert-leer);
    /* Mindestbreite, damit auch ein sehr kleiner Wert sichtbar bleibt statt
       als leere Spur zu erscheinen. */
    min-width: 3px;
}

/* Balkenfarbe nach Rolle, nicht nach Stufe: die vier Werte sollen sich
   voneinander unterscheiden, nicht gegenseitig bewerten. */
.werte-zeile[data-rolle="ko"]   .werte-balken-fuellung { background: var(--wert-kondition); }
.werte-zeile[data-rolle="fr"]   .werte-balken-fuellung { background: var(--wert-frische); }
.werte-zeile[data-rolle="zu"]   .werte-balken-fuellung { background: var(--wert-zufriedenheit); }
.werte-zeile[data-rolle="form"] .werte-balken-fuellung { background: var(--wert-form); }

.werte-zahl {
    font-size: 0.75rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* ----- Zwei-Punkt-Indikator (Kondition/Frische) ----- */
.werte-indikator {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.werte-punkt {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--wert-leer);
    border: 1px solid color-mix(in srgb, #000 12%, transparent);
}

.werte-punkt[data-stufe="gut"]     { background: var(--wert-gut); }
.werte-punkt[data-stufe="mittel"]  { background: var(--wert-mittel); }
.werte-punkt[data-stufe="schwach"] { background: var(--wert-schwach); }

.werte-indikator-zahlen {
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    margin-left: 2px;
}

.modal-80vw .modal-dialog {
    max-width: 80vw;
}

.scrollable-300 {
    max-height: 300px;
    overflow-y: auto;
}

.w-40px {
    width: 40px;
}

.w-50px {
    width: 50px;
}

.w-60px {
    width: 60px;
}

.w-70px {
    width: 70px;
}

.w-80px {
    width: 80px;
}

.w-90px {
    width: 90px;
}

.w-100px {
    width: 100px;
}

.w-150px {
    width: 150px;
}

.w-200px {
    width: 200px;
}

.w-250px {
    width: 250px;
}

.w-30pct {
    width: 30%;
}

.w-40pct {
    width: 40%;
}

/* ===== Freie Breiten ueber Custom Property =====
   Fuer Masse, die zu selten vorkommen fuer eine eigene Klasse: Die Klasse
   bringt die Eigenschaft mit, der Wert steht am Element.

       <table class="mw-var" style="--mw: 450px">

   So bleibt die Eigenschaft im Stylesheet ueberschreibbar, etwa in einer
   Media Query. Fuer wiederkehrende Spaltenbreiten gibt es darunter die
   feste Skala. */
.w-var    { width: var(--w); }
.h-var    { height: var(--h); }
.mw-var   { max-width: var(--mw); }
.mh-var   { max-height: var(--mh); }
.minw-var { min-width: var(--minw); }
.minh-var { min-height: var(--minh); }

/* ===== Schriftgroessen =====
   Bootstrap bringt nur .fs-1 bis .fs-6 mit, und die sind fuer Ueberschriften.
   Diese Stufen decken Badges, Fussnoten und dichte Tabellen ab. */
.fs-xs   { font-size: var(--text-xs); }
.fs-sm   { font-size: var(--text-sm); }
.fs-base { font-size: var(--text-base); }

/* Bild wird eingepasst statt beschnitten - für Wappen und Logos, die in einer
   festen Kachel sitzen. Die .logo-*-Klassen bringen das mit; hier für Fälle
   mit freier Größe. */
.obj-contain { object-fit: contain; }

/* Aktionsleiste, die auf schmalen Geraeten am oberen Rand kleben bleibt. */
@media (max-width: 991.98px) {
    .sticky-mobile-buttons {
        position: sticky;
        top: 0;
        z-index: 1020;
        background: var(--bg-body);
        padding: 0.75rem 0;
        margin: -0.75rem 0 1rem 0;
        box-shadow: var(--shadow-sm);
    }
}

/* Farbkaestchen in Legenden (Tabellenmarkierungen, Zonen). */
.legende-kachel {
    width: 40px;
    height: 24px;
    border: 2px solid var(--border-subtle);
    border-radius: 4px;
}

/* Farbstopps und Streifenmuster des Spielfelds (SVG in Aufstellung und Elf
   des Tages) */
.feld-stop-dunkel { stop-color: var(--field-green-dark); stop-opacity: 1; }
.feld-stop-mittel { stop-color: var(--field-green-medium); stop-opacity: 1; }
.feld-streifen-dunkel { fill: var(--field-green-dark); }
.feld-streifen-mittel { fill: var(--field-green-medium); }

/* ============================================
   TABLE COLUMN WIDTH UTILITIES
   Ersetzt Inline-Styles für bessere Wartbarkeit
   ============================================ */

/* Extra Small - Icons, Checkboxen, sehr enge Spalten */
.table-col-xs {
    width: 40px;
    min-width: 40px;
}

/* Zwischen xs und sm. Nachgetragen, weil 50px die zweithaeufigste
   Inline-Breite im Markup war (19 Vorkommen) und in dieser Reihe fehlte. */
.table-col-2xs {
    width: 50px;
    min-width: 50px;
}

/* Small - Position, Status-Badges, Zahlen */
.table-col-sm {
    width: 60px;
    min-width: 60px;
}

/* Medium - Spieltag, kurze Texte */
.table-col-md {
    width: 80px;
    min-width: 80px;
}

/* Large - Datum, mittlere Texte */
.table-col-lg {
    width: 100px;
    min-width: 100px;
}

/* Extra Large - Lange Texte, Namen */
.table-col-xl {
    width: 120px;
    min-width: 120px;
}

/* 2XL - Sehr lange Texte (Tore, Details) */
.table-col-2xl {
    width: 140px;
    min-width: 140px;
}

/* 3XL - Extra lange Texte */
.table-col-3xl {
    width: 160px;
    min-width: 160px;
}

/* Prozentuale Breiten (für flexible Layouts) */
.table-col-10p {
    width: 10%;
    min-width: 60px;
}

.table-col-15p {
    width: 15%;
    min-width: 80px;
}

.table-col-20p {
    width: 20%;
    min-width: 100px;
}

.table-col-25p {
    width: 25%;
    min-width: 120px;
}

.table-col-30p {
    width: 30%;
    min-width: 140px;
}

/* ============================================
   ICON + TEXT HELPER
   Ersetzt wiederholtes "d-flex align-items-center"
   ============================================ */

.icon-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-text > i,
.icon-text > svg {
    flex-shrink: 0; /* Icon wird nie zusammengedrückt */
}

/* ============================================
   MOBILE TABLE UTILITIES
   Spezielle Helpers für Mobile-Ansichten
   ============================================ */

@media (max-width: 991px) {
    .table-mobile-col-narrow {
        width: 60px;
        min-width: 60px;
    }

}

/* ============================================
   TABLE RESPONSIVE IMPROVEMENTS
   Verbesserte Scroll-Behavior für Tabellen
   ============================================ */

.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: rgba(74, 124, 158, 0.5);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 124, 158, 0.7);
}

/* ============================================
   TABELLEN-ZEILEN POSITIONSFARBEN (global)
   Verwendet in: Aufstellung, Spielerkader, etc.
   ============================================ */

/* Table ohne Bootstrap-Hintergrund (für Positionsfarben) */
.table.table-position-colors {
    --bs-table-bg: transparent;
}

/* Dark Mode: Positionsfarben-Tabelle — Card-Hintergrund als Basis statt transparent */
[data-bs-theme="dark"] .table.table-position-colors {
    --bs-table-bg: var(--bg-card);
    background-color: var(--bg-card);
}

.table tbody tr.position-row-TW {
    background-color: rgba(255, 165, 0, 0.15) !important; /* Orange - Torwart */
}

.table tbody tr.position-row-VT {
    background-color: color-mix(in srgb, var(--success) 15%, transparent) !important; /* Grün - Abwehr */
}

.table tbody tr.position-row-MF {
    background-color: rgba(74, 124, 158, 0.15) !important; /* Blau - Mittelfeld */
}

.table tbody tr.position-row-ST {
    background-color: color-mix(in srgb, var(--danger) 15%, transparent) !important; /* Rot - Sturm */
}

/* Positions-Hover → global deaktiviert */

/* ============================================
   STICKY NAVIGATION - V1 Design Enhancement
   Navigation outside container, sticky top
   ============================================ */

.navigation-wrapper {
    position: sticky;
    top: 0;
    z-index: 1030; /* Über Content, unter Bootstrap Modals (1055) */
    width: 100%;
    background: white;
    box-shadow: none;
    margin: 0;
}

.navigation-wrapper .container-fluid {
    padding: 0;
    margin: 0;
    background: transparent; /* Kein grauer Hintergrund */
    box-shadow: none;
}

/* Gegenstueck zum padding: 0 darueber: Ohne Container-Padding ragt die .row
   mit ihren negativen Margins beidseitig heraus und erzeugt auf jeder Seite
   eine horizontale Bildlaufleiste. Genullt wird ueber die Gutter-Variable,
   nicht ueber die Margins - sonst bleibt das Spalten-Padding stehen und die
   Navbar schliesst nicht mehr buendig ab. */
.navigation-wrapper .container-fluid > .row {
    --bs-gutter-x: 0;
}

.navigation-wrapper .navbar {
    border-radius: 0;
    margin-bottom: 0;
    width: 100%;
}

.navigation-wrapper .navbar .container-fluid {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Umbruch statt Ueberlauf: Bootstrap legt die Navbar ab dem Breakpoint mit
   flex-wrap: nowrap in eine Zeile, die rechte Gruppe schiebt dann bei knappem
   Platz ueber den Viewport hinaus (1506px Inhalt bei 1440px Fenster). */
@media (min-width: 992px) {
    .navigation-wrapper .navbar-collapse {
        flex-wrap: wrap;
        row-gap: .15rem;
    }
}

/* Verhindere doppelten Sticky-Effekt falls Bootstrap sticky-top genutzt wird */
.navigation-wrapper .navbar.sticky-top {
    position: static;
}

.navigation-wrapper + .container-fluid {
    margin-top: 0 !important;
    padding-top: var(--space-lg);
}

@media (max-width: 991.98px) {
    .navigation-wrapper .navbar {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ============================================
   NAVIGATION IMPROVEMENTS - Phase 1
   Active states, hover effects, and polish
   ============================================ */

.navbar-nav .nav-link.active {
    background-color: var(--primary-solid);
    color: var(--text-white) !important;
    border-radius: 0.25rem;
}

.navbar-nav .dropdown-menu .dropdown-item.active {
    background-color: var(--primary-solid);
    color: var(--text-white);
}

.dropdown-item {
    transition: all 0.2s ease;
}

/* Ausserhalb der Kopfleiste bleibt das Dropdown eine gewoehnliche Flaeche:
   Toenung aus der Markenfarbe statt eines Bootstrap-blauen Verlaufs. */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary-text);
}

.navbar-nav .nav-link i,
.dropdown-item i {
    margin-right: 0.5rem;
}

.navbar-nav.ms-auto .nav-link {
    color: var(--danger);
}

.navbar-nav.ms-auto .nav-link:hover {
    color: #bb2d3b;
    background-color: color-mix(in srgb, var(--danger) 10%, transparent);
    border-radius: 0.25rem;
}

.dropdown-menu:not(.dropdown-menu-mega):not(.dropdown-menu-account) {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 991.98px) {
    .navbar-nav .nav-link.active {
        border-left: 3px solid var(--primary);
        border-radius: 0;
        padding-left: calc(var(--bs-nav-link-padding-x) - 3px);
    }
    
    .dropdown-item:hover {
        transform: translateX(0);
    }
}

/* ============================================
   NAVIGATION IMPROVEMENTS - Phase 2
   Dropdown headers and structure
   ============================================ */

.dropdown-header {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-gray-500);
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
    margin-top: 0.25rem;
}

.dropdown-menu-end {
    right: 0;
    left: auto;
}

/* ============================================
   BREADCRUMBS
   Navigation breadcrumb styling
   ============================================ */

/* ===== Dark mode ===== */
[data-bs-theme="dark"] {
    /* Hintergrundfarben - Stahlblau-Familie (H~207), gleichmaessige Elevation-Stufen.

       Eine Stufe heller als zuvor (#12171d/#19212a/#202a34/#29343f). Das kostet
       Textkontrast statt ihn zu bringen - helle Schrift auf hellerem Grund ist
       zwangslaeufig schwaecher, der Fliesstext geht von 12.62 auf 11.74. Was es
       bringt, ist die Trennung der Ebenen: Karte gegen Seitengrund steigt von
       1.24 auf 1.29, und die Flaechen wirken weniger wie ein schwarzes Loch.

       Damit nichts verliert, ist die Textleiter unten mitgezogen. Zwei Stufen
       heller waeren zu viel gewesen: die blasseste Textstufe kam auf dem
       Kartenfuss auf 4.13:1. */
    --bg-body: #171d25;
    --bg-container: #1f2731;
    --bg-card: #27313d;
    --bg-light: #27313d;
    --surface-3: #313d4a;
    --kopf-band: #333f4d;

    /* Vier Textstufen mit sichtbarem Abstand, gegen die Karte gemessen:

         primary    11.74   Fliesstext
         secondary   7.82   Nebenangabe
         muted       6.52   leise Zusatzinfo (Datum, Einheit, Fussnote)
         faint       5.99   Tabellenkopf, Kleinstbeschriftung  (--gray-500)

       Zwischenstand war 12.6 / 7.7 / 8.8, und 8.8 fuer muted war zu nah am
       Fliesstext: in der Highscoretabelle standen die Beitrittsdaten fast so
       hell da wie die Vereinsnamen, die Abstufung war weg. Untere Grenze ist
       4.5 fuer die kleinste Schrift - die haelt auch die unterste Stufe noch
       mit Abstand. */
    --text-primary: #eff2f6;
    --text-secondary: #c0c8d4;
    --text-muted: #aeb7c5;
    --bs-secondary-color: var(--text-muted);

    /* Primary-Palette (etwas heller fuer Kontrast) */
    --primary: #6a9dc0;
    --primary-dark: #5a8db0;
    --primary-light: #4a7c9e;

    /*
       Semantische Textfarben aufgehellt. Die Flaechenfarben --success,
       --danger und Co. bleiben unveraendert - sie tragen weisse Schrift und
       funktionieren in beiden Themes. Als Textfarbe auf dunklem Grund sind
       sie dagegen zu dunkel (--danger kam auf 3.22:1).
    */
    /* Beide eine Nuance heller als zuvor (#75b798 / #ea868f): mit den
       aufgehellten Flaechen kamen sie auf dem Kopfband auf 4.59 und 4.24. */
    --success-text: #7fc0a1;
    --danger-text: #f0979f;
    --warning-text: #ffda6a;
    --info-text: #6edff6;

    /* Etwas heller als --primary. Auf einer blau getoenten Flaeche - und genau
       dafuer ist dieses Token da - reicht --primary allein nicht: Die Toenung
       hebt den ohnehin blaustichigen Untergrund an, das Badge .stat-f kam so
       auf 3.93:1. Aus derselben Farbe aufgehellt statt als neuer Hex-Wert. */
    --primary-text: color-mix(in srgb, var(--primary) 78%, #fff);

    /* Heimfarbe aufgehellt - #0066cc kam auf dunklem Grund auf 2.58:1.
       (Die Gastfarbe braucht hier nichts: Sie haengt an --success-text und
       schaltet dadurch bereits mit.) */
    --team-a-color: color-mix(in srgb, #0066cc 55%, #fff);

    /* Die beiden Kopffarben abgedunkelt, damit weisse Schrift lesbar bleibt.
       Der Tabellenkopf ist hell mit dunkler Schrift und kehrt sich im Dunkeln
       um - daher hier eine Graustufe. */
    --tournament-card-header: color-mix(in srgb, #52728b 78%, #000);
    --tournament-group-header: color-mix(in srgb, #7D9FB6 55%, #000);
    --tournament-table-header: var(--gray-200);

    /* --primary ist im Dunkeln aufgehellt, damit es als Text funktioniert -
       als Flaeche waere es damit zu hell (2.9:1), daher hier wieder
       abgedunkelt. Der Wert traegt Kopfleiste UND Knoepfe und muss beides
       koennen: 1.8:1 gegen die Karte, 8.1:1 gegen Weiss. */
    --primary-solid: color-mix(in srgb, var(--primary) 52%, #000);

    /* Graustufen invertiert - auf Stahlblau-Ton retinted (statt Indigo) */
    --gray-50: #1a222b;
    --gray-100: #212b35;
    --gray-200: #2a3742;
    --gray-300: #364552;
    --gray-400: #556472;
    /* Die blasseste Textstufe. Sieben Module haengen ihr --*-faint hier ein -
       Tabellenkoepfe, Einheiten, Nebenangaben, durchweg 11 px. #758391 kam auf
       der Karte auf 3.75:1 und auf dem Kartenkopf auf 3.27:1; das war der Ton,
       der den Eindruck gemacht hat, im Dunkeln fehle ueberall etwas Kontrast.
       #a5b0bc liegt bei 5.99:1 auf der Karte, 4.87:1 auf dem Kopfband und
       5.03:1 auf dem Kartenfuss - das Kopfband ist der knappste der drei
       Faelle - und bleibt mit deutlichem Abstand unter --text-muted (6.52). */
    --gray-500: #a5b0bc;
    --gray-600: #aab4bf;
    --gray-700: #ccd3db;
    --gray-800: #dde3e9;
    --gray-900: #eef1f4;

    --shadow-custom: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-navbar: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

    --accent-orange: #f0a030;

    /* Die Flaeche bleibt, wie sie ist - weisse Schrift darauf liegt bei
       6.51:1. Nur als Textfarbe braucht Violett im Dunkeln eine hellere
       Fassung: 5.9:1 gegen die Sidebar statt 2.50:1. */
    --akzent-violett-text: color-mix(in srgb, var(--akzent-violett) 60%, #fff);

    /* Stahlblau ist im Dunkeln aufgehellt (--primary #6a9dc0), weisse Schrift
       kaeme darauf auf 2.92:1 - als Flaeche muss es deshalb hier abgedunkelt
       werden, in der Hellfassung nicht. */
    --pos-mf-flaeche: color-mix(in srgb, var(--pos-mf) 78%, #000);

    --border-subtle: rgba(255, 255, 255, 0.07);
    --feld-rand: #79838c;
    --alert-primary-bg: #16242e;
    --alert-primary-text: #a8cbe0;

    /* Links im Dark: hellere Markenfarbe, AA-Kontrast */
    --bs-link-color: var(--primary);
    --bs-link-color-rgb: 106, 157, 192;
    --bs-link-hover-color: #8bbcd9;
    --bs-link-hover-color-rgb: 139, 188, 217;

    /* Links tragen im Dunkeln nicht --primary selbst: die Farbe muss auch als
       Flaeche taugen (Kopfleiste, Knoepfe, Positionsbadge Mittelfeld) und ist
       dafuer gedeckelt - als Text kam sie auf 4.99:1 und war der Grund, warum
       Spielernamen in langen Tabellen stumpf wirkten. Aufgehellt sind es
       6.4:1, ohne dass sich an den Flaechen etwas aendert. */
    --link-text: color-mix(in srgb, var(--primary) 55%, #fff);

    /* Im Dunkeln geht es andersherum: die Verduennung dunkelt ab, der Text
       muss heller werden. Dieselbe Farbe, die auch Links tragen. */
    --reiter-aktiv: var(--link-text);
}

html[data-bs-theme="dark"] body {
    background-color: var(--bg-body);
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 24px, rgba(255, 255, 255, 0.015) 24px, rgba(255, 255, 255, 0.015) 25px),
        repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(255, 255, 255, 0.015) 24px, rgba(255, 255, 255, 0.015) 25px);
}

[data-bs-theme="dark"] body .container:not(.kalender-bar .container-fluid),
[data-bs-theme="dark"] body .container-fluid:not(.kalender-bar .container-fluid):not(.navigation-wrapper .container-fluid):not(.navbar .container-fluid) {
    background-color: var(--bg-container);
    box-shadow: var(--shadow-custom);
}

[data-bs-theme="dark"] .navigation-wrapper,
[data-bs-theme="dark"] .navigation-wrapper .container-fluid,
[data-bs-theme="dark"] .navigation-wrapper .navbar .container-fluid {
    background: var(--primary-solid);
    box-shadow: none;
}

/* Die Farbe kommt aus --primary-solid, das oben im Dark-Block umschaltet -
   eine eigene Dark-Regel mit festem Wert braucht es dafuer nicht mehr. */
[data-bs-theme="dark"] body > .navbar,
[data-bs-theme="dark"] body .navbar.navbar,
[data-bs-theme="dark"] .navigation-wrapper .navbar {
    box-shadow: none;
}

/* Dropdowns: Die Flaeche kommt aus --primary-solid und schaltet damit von selbst
   um. Hier standen zwei Dark-Verlaeufe aus je zwei rgba-Literalen - ein
   Schwarzblau, das mit dem Navbar-Blau nichts zu tun hatte. Uebrig bleibt der
   Rahmen, der im Dunkeln kraeftiger sein muss als das helle Weiss-20 %. */
[data-bs-theme="dark"] .navbar .dropdown-menu:not(.dropdown-menu-mega):not(.dropdown-menu-account) {
    border-color: var(--gray-300);
}

[data-bs-theme="dark"] .card {
    background-color: var(--bg-card);
    border-color: var(--border-subtle);
}

/* Die Flaeche kommt aus --primary-solid und schaltet damit selbst um. Hier stand
   --surface-3, ein neutrales Grau: Derselbe Kartenkopf war im Hellen blau und
   im Dunkeln grau. Uebrig bleibt der Rahmen. */
[data-bs-theme="dark"] .card-header {
    border-color: var(--border-subtle);
}

[data-bs-theme="dark"] .card-body {
    background-color: var(--bg-card);
}

[data-bs-theme="dark"] .card-footer {
    background-color: var(--bg-card);
    border-top-color: var(--border-subtle);
}

/* Die Flaeche ist im Dunkeln eine andere - abgesetzt gegen die Karte, damit
   ein Feld als Feld erkennbar bleibt. Der Rand kommt aus demselben Token wie
   im Hellen; --gray-300 kam hier auf 1.24:1. */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--gray-200);
    color: var(--text-primary);
    border-color: var(--feld-rand);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--gray-100);
    color: var(--text-primary);
    border-color: var(--primary);
}

[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--bg-card);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--gray-300);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: var(--text-primary);
    color: var(--text-primary);
    border-color: var(--gray-300) !important;
}

/* Nur die Rahmenfarbe. Die Zellfarbe kommt aus --bs-table-color oben, und
   hier KEIN color setzen: Ein `color: … !important` auf Zellebene ist (0,2,0)
   und erschlaegt damit jede semantische Textfarbe (text-success und Co. sind
   nur (0,1,0)) - rund 700 solcher Klassen stehen in den Templates. */
[data-bs-theme="dark"] .table > :not(caption) > * > * {
    border-bottom-color: var(--gray-300);
    --bs-table-border-color: var(--gray-300);
}

/*
   Links ohne !important: So koennen Utility-Klassen am Link weiterhin
   gewinnen, was bei .text-danger auf einem Loeschen-Link erwuenscht ist.
*/
[data-bs-theme="dark"] .table a:not(.btn):not(.badge) {
    color: var(--primary);
}

[data-bs-theme="dark"] .table a:not(.btn):not(.badge):hover {
    color: var(--primary-light);
}

/* Farbige Borders von Bootstrap-Kontextklassen unterbinden */
[data-bs-theme="dark"] .table tr[class*="position-row-"] > td,
[data-bs-theme="dark"] .table tr[class*="position-row-"] > th,
[data-bs-theme="dark"] .table tr.table-primary > td,
[data-bs-theme="dark"] .table tr.table-danger > td,
[data-bs-theme="dark"] .table tr.table-warning > td,
[data-bs-theme="dark"] .table tr.table-info > td,
[data-bs-theme="dark"] .table tr.table-success > td {
    border-color: var(--gray-300) !important;
}

[data-bs-theme="dark"] .table thead th {
    background-color: var(--gray-200);
    color: var(--text-primary);
    border-color: var(--gray-300);
}

[data-bs-theme="dark"] .alert {
    border-color: var(--gray-300);
}

[data-bs-theme="dark"] a,
[data-bs-theme="dark"] .card-body a:not(.btn):not(.dropdown-item) {
    color: var(--link-text);
}

[data-bs-theme="dark"] a:hover {
    color: var(--primary-dark);
}

[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

[data-bs-theme="dark"] .kalender-bar {
    background: var(--primary-light);
}

[data-bs-theme="dark"] .list-group-item {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--gray-300);
}

[data-bs-theme="dark"] .list-group-item:hover {
    background-color: var(--gray-200);
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--bg-light) !important;
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--bg-card) !important;
}

[data-bs-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}

/* ----- Die Textleiter als Klassen -----

   Vier Stufen, vier Klassen. Bootstrap bringt fuer dieselbe Aufgabe drei
   Namen mit, die sich ueber die Versionen verschoben haben - .text-muted gilt
   seit 5.3 als abgekuendigt, .text-body-secondary ist der Nachfolger, und
   .text-body-tertiary kam neu dazu. Alle drei laufen hier auf dieselben
   Tokens, damit es egal ist, welcher Name im Markup steht.

     .text-body-emphasis   staerker als Fliesstext
     (ohne Klasse)         Fliesstext              --text-primary
     .text-secondary       eine Stufe leiser       --text-secondary
     .text-muted           zwei Stufen leiser      --text-muted
     .text-body-tertiary   die blasseste Stufe     --gray-500

   Die blasseste Stufe traegt nur auf einer Karte (4.69:1 hell, 5.56:1
   dunkel). Auf dem Seitengrund reicht sie im Hellen nicht - dort ist
   .text-muted die unterste brauchbare Stufe.

   Der praktische Unterschied zwischen .text-secondary und .text-muted liegt
   allein im Dunkeln: im Hellen sind beide derselbe Ton (7.34:1), im Dunkeln
   ist .text-secondary mit 8.28:1 spuerbar heller als .text-muted mit 6.81:1.
   Wo eine Angabe im Dunkelmodus zu leise wirkt, ist .text-secondary der
   Griff - ohne dass sich an der Hellfassung etwas aendert.

   In beiden Themes gesetzt, nicht nur im Dunkeln: sonst zieht im Hellen
   Bootstraps eigener Wert, und der ist dort rgba(33,37,41,.75), also
   praktisch Fliesstext. */
.text-muted,
.text-body-secondary {
    color: var(--text-muted) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

/* Bootstrap loest diese beiden ueber eine Deckung des Fliesstexts auf und kam
   damit auf 3.12:1 im Hellen und 3.95:1 im Dunkeln. Als Farbe aus der Leiter
   traegt die Stufe. */
.text-body-tertiary {
    color: var(--gray-500) !important;
}

/* Nur die Farbe, kein Schriftschnitt - Bootstrap meint mit "emphasis"
   ausdruecklich den Ton, nicht die Fettung. Ohne Zuweisung waere es reines
   Schwarz bzw. Weiss; an die Leiter gebunden bleibt es im System. */
.text-body-emphasis {
    color: var(--text-primary) !important;
}

/* Halbdeckende Schrift funktioniert nur ueber einer bekannten Flaeche. Im
   Dunkeln kam .text-black-50 auf 1.26:1 - unbrauchbar. Beide Utilities gehen
   auf die Leiter, .text-white-50 nur dort, wo sie gemeint ist: auf einer
   dunklen Flaeche. */
.text-black-50 {
    color: var(--text-muted) !important;
}

[data-bs-theme="dark"] .text-white-50 {
    color: color-mix(in srgb, #fff 78%, transparent) !important;
}

[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom {
    border-color: var(--gray-300) !important;
}

[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--gray-300) !important;
    color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Dark-Mode table-hover auf kontextfarbenen Rows deaktiviert */
[data-bs-theme="dark"] .table tr.table-primary:hover > *,
[data-bs-theme="dark"] .table tr.table-success:hover > *,
[data-bs-theme="dark"] .table tr.table-danger:hover > *,
[data-bs-theme="dark"] .table tr.table-warning:hover > *,
[data-bs-theme="dark"] .table tr.table-info:hover > *,
[data-bs-theme="dark"] .table tr.table-relegation:hover > * {
    --bs-table-hover-bg: transparent !important;
    --bs-table-accent-bg: var(--bs-table-bg) !important;
}

[data-bs-theme="dark"] .shadow-custom,
[data-bs-theme="dark"] .shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

[data-bs-theme="dark"] .sticky-mobile-buttons {
    background: var(--bg-container);
}

[data-bs-theme="dark"] footer {
    border-color: var(--gray-300) !important;
}

[data-bs-theme="dark"] .form-label {
    color: var(--text-primary);
}

[data-bs-theme="dark"] .input-group-text {
    background-color: var(--gray-200);
    color: var(--text-secondary);
    border-color: var(--gray-300);
}

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--gray-200) !important;
    --bs-table-color: var(--text-primary) !important;
    --bs-table-border-color: var(--gray-300) !important;
}

[data-bs-theme="dark"] .table-light th,
[data-bs-theme="dark"] .table-light td,
[data-bs-theme="dark"] thead.table-light th,
[data-bs-theme="dark"] tr.table-light td,
[data-bs-theme="dark"] tr.table-light th {
    background-color: var(--gray-200) !important;
    color: var(--text-primary) !important;
    border-color: var(--gray-300) !important;
}

[data-bs-theme="dark"] .table-bordered,
[data-bs-theme="dark"] .table-bordered > :not(caption) > *,
[data-bs-theme="dark"] .table-bordered > :not(caption) > * > * {
    border-color: var(--gray-300) !important;
}

/* Bootstrap Kontextfarben in Tabellen — Dark Mode gedämpft */
[data-bs-theme="dark"] .table .table-danger,
[data-bs-theme="dark"] .table tr.table-danger,
[data-bs-theme="dark"] .table tr.table-danger > td,
[data-bs-theme="dark"] .table tr.table-danger > th {
    --bs-table-bg: color-mix(in srgb, var(--danger) 15%, transparent) !important;
    --bs-table-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .table .table-warning,
[data-bs-theme="dark"] .table tr.table-warning,
[data-bs-theme="dark"] .table tr.table-warning > td,
[data-bs-theme="dark"] .table tr.table-warning > th {
    --bs-table-bg: color-mix(in srgb, var(--warning) 12%, transparent) !important;
    --bs-table-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .table .table-info,
[data-bs-theme="dark"] .table tr.table-info,
[data-bs-theme="dark"] .table tr.table-info > td,
[data-bs-theme="dark"] .table tr.table-info > th {
    --bs-table-bg: color-mix(in srgb, var(--info) 12%, transparent) !important;
    --bs-table-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .table .table-success,
[data-bs-theme="dark"] .table tr.table-success,
[data-bs-theme="dark"] .table tr.table-success > td,
[data-bs-theme="dark"] .table tr.table-success > th {
    --bs-table-bg: color-mix(in srgb, var(--success) 15%, transparent) !important;
    --bs-table-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .table .table-primary,
[data-bs-theme="dark"] .table tr.table-primary,
[data-bs-theme="dark"] .table tr.table-primary > td,
[data-bs-theme="dark"] .table tr.table-primary > th {
    --bs-table-bg: color-mix(in srgb, var(--primary) 15%, transparent) !important;
    --bs-table-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

/* Bootstraps Kontextklassen tragen feste helle Werte, die im Dunkeln nicht
   mitlaufen - table-secondary ergab hellgrau auf hellgrau. Jede neue
   Kontextklasse braucht hier einen Eintrag. */
[data-bs-theme="dark"] .table .table-secondary,
[data-bs-theme="dark"] .table tr.table-secondary,
[data-bs-theme="dark"] .table tr.table-secondary > td,
[data-bs-theme="dark"] .table tr.table-secondary > th {
    --bs-table-bg: color-mix(in srgb, var(--secondary) 18%, var(--bg-card)) !important;
    --bs-table-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .table .table-dark,
[data-bs-theme="dark"] .table tr.table-dark,
[data-bs-theme="dark"] .table tr.table-dark > td,
[data-bs-theme="dark"] .table tr.table-dark > th,
[data-bs-theme="dark"] .table thead.table-dark th {
    --bs-table-bg: var(--gray-200) !important;
    --bs-table-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

/* Relegation — eigene Klasse statt table-light (Dark-Mode-kompatibel) */
.table-relegation,
tr.table-relegation > td,
tr.table-relegation > th {
    --bs-table-bg: color-mix(in srgb, var(--warning) 8%, transparent);
    background-color: color-mix(in srgb, var(--warning) 8%, transparent);
}

[data-bs-theme="dark"] .table-relegation,
[data-bs-theme="dark"] tr.table-relegation > td,
[data-bs-theme="dark"] tr.table-relegation > th {
    --bs-table-bg: color-mix(in srgb, var(--warning) 8%, transparent);
    background-color: color-mix(in srgb, var(--warning) 8%, transparent) !important;
    color: var(--text-primary) !important;
}

/* Positionsfarben im Dark Mode — gedämpfte, dunkle Töne auf Zell-Ebene */
[data-bs-theme="dark"] .table tbody tr.position-row-TW > td,
[data-bs-theme="dark"] .table tbody tr.position-row-TW > th {
    background-color: #3d3520 !important; /* dunkles Bernstein/Orange */
}

[data-bs-theme="dark"] .table tbody tr.position-row-VT > td,
[data-bs-theme="dark"] .table tbody tr.position-row-VT > th {
    background-color: #1e3328 !important; /* dunkles Waldgrün */
}

[data-bs-theme="dark"] .table tbody tr.position-row-MF > td,
[data-bs-theme="dark"] .table tbody tr.position-row-MF > th {
    background-color: #1e2a38 !important; /* dunkles Stahlblau */
}

[data-bs-theme="dark"] .table tbody tr.position-row-ST > td,
[data-bs-theme="dark"] .table tbody tr.position-row-ST > th {
    background-color: #3a1e24 !important; /* dunkles Weinrot */
}

/* Dark-Mode Positions-Hover → global deaktiviert */

[data-bs-theme="dark"] .accordion-body {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .accordion-button {
    background-color: var(--gray-200);
    color: var(--text-primary);
    border-color: var(--gray-300);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--gray-100);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .accordion-item {
    background-color: var(--bg-card);
    border-color: var(--gray-300);
}

[data-bs-theme="dark"] .form-check-label {
    color: var(--text-primary);
}

/* Print: Dark Mode ignorieren */
@media print {
    [data-bs-theme="dark"] body {
        background: white !important;
        color: black !important;
    }
}

.topspiel-logo {
    width: 22px;
    height: 22px;
    object-fit: cover;
}
.topspiel-team {
    min-width: 0;
}
.topspiel-vs {
    font-size: 0.65rem;
    padding: 0.15rem 0.35rem;
}
.topspiel-date {
    font-size: 0.7rem;
}
.topspiel-item:hover .topspiel-vs {
    background-color: var(--warning-solid);
    color: var(--on-warning);
}

/* News-Feed (Startseite): kompakte Snippets auf max. 2 Zeilen begrenzen */
.news-snippet {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Positionsfarben (app-weit einheitlich) =====
   Als Flaeche via |posclass-Filter (Torwart->pos-tw, Abwehr->pos-vt,
   Mittelfeld->pos-mf, Sturm->pos-st), als Symbolfarbe ueber .pos-icon-*.
   Beides aus den --pos-*-Tokens. */
/* Cyan ist als Badge-Flaeche zu hell: weisse Schrift kommt darauf auf 1.96:1. Wie bei den Positionsbadges wird die Flaeche
   abgedunkelt statt die Schrift; die Utilities .bg-info und .bg-warning selbst
   bleiben unberuehrt, sie tragen an anderen Stellen keine Schrift.

   Gelb laeuft nicht hier, sondern ueber --warning-solid: das Badge holt
   seine Flaeche schon von dort. */
.badge.bg-info {
    background-color: color-mix(in srgb, var(--info) 62%, #000) !important;
}


.pos-tw { background-color: var(--pos-tw-flaeche) !important; color: #fff !important; }
.pos-vt { background-color: var(--pos-vt-flaeche) !important; color: #fff !important; }
.pos-mf { background-color: var(--pos-mf-flaeche) !important; color: #fff !important; }
.pos-st { background-color: var(--pos-st-flaeche) !important; color: #fff !important; }

.pos-icon-tw { color: var(--pos-tw); }
.pos-icon-vt { color: var(--pos-vt); }
.pos-icon-mf { color: var(--pos-mf); }
.pos-icon-st { color: var(--pos-st); }

/* Das Such-/Filter-Designsystem (.ss-*) steht in res/css/spielersuche.css. */