@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    /* === Basis Farben === */
    --background-color: #ffffff;
    --darker-background: #f0f2f5;

    --text-color: #333333;
    --text-dark: #1a1a1a;
    --text-input: #000000;
    --text-placeholder: #666666;

    /* Weiss als SCHRIFT auf farbigem Grund. Nicht fuer Flaechen benutzen –
       dafuer gibt es --bg-flaeche (2026-07-22 bewusst getrennt gehalten). */
    --white: #ffffff;

    /* === Funktionale Farben === */
    --primary-blue: #3274d6;
    --primary-blue-hover: #2868c7;

    --danger-red: #d32f2f;
    --danger-red-hover: #b71c1c;
    --danger-red-tint: rgba(211,47,47,0.35);

    /* === Hintergründe Spezial === */
    /* Weisse Eingabe- und Kartenflaeche (frueher --bg-card-light + --bg-input-dark). */
    --bg-flaeche: #ffffff;
    --bg-input-readonly: #e9ecef;
    /* Bleibt bewusst eigenstaendig: das Unterschriftenfeld muss weiss bleiben,
       auch wenn jemand die uebrigen Flaechen umfaerbt. */
    --bg-signature: #ffffff;
    --bg-summary: #e9e9e9;
    --bg-table-header: #f8f9fa;
    --bg-table-row-dark: #f1f3f5;
    /* Hover auf dauerhaft hellen Flaechen (Bedienungsanleitung). */
    --overlay-light: rgba(0, 0, 0, 0.05);

    /* === Rahmen (Borders) === */
    --border-color: #1a1a1a;
    --border-light: #cccccc;
    --border-gray: #999999;

    /* === Formularfelder ===
       Verbindliche Hoehe fuer JEDES einzeilige Eingabefeld (Datum, Dropdown,
       Text, Zahl, Datei) und fuer Buttons, die neben Feldern stehen.
       Siehe Block "Einheitliche Feldhoehen" am Ende dieser Datei. */
    --feld-hoehe: 36px;

    /* === Tigers Vereinsfarben === */
    --tigers-black: #1a1a1a;
    --tigers-yellow: #fdee17;
    --tigers-yellow-hover: #e6d815;
    --tigers-nav-bg: #111111;
    /* Gelb als TEXT/Icon-Farbe AUF GLAS: reines Marken-Gelb hat auf Weiß nur
       ~1,1:1 Kontrast. Loesung ist nicht Abdunkeln, sondern reines Gelb plus
       dunkler Konturstrich nur im Hellmodus (--tigers-yellow-outline).
       NICHT fuer Hintergruende/Badges verwenden (dort bleibt --tigers-yellow
       korrekt, mit --tigers-black als Schrift darauf). */
    --tigers-yellow-text: #fdee17;
    /* Konturstrich hinter gelber Schrift, nur im Hellmodus. Bewusst als
       Literal statt var(--tigers-black): nur so taucht die Variable im
       Farb-Editor auch im Reiter "Hell" auf (2026-07-22). */
    --tigers-yellow-outline: #1a1a1a;
    /* Schrift/Icons dort, wo Gelb auf einer HELLEN Flaeche stuende (blassgelbe
       Chips, Icon-Kacheln, Karten im Admin). Im Hellmodus dunkel, im Dunkel-
       modus das Marken-Gelb. Ersetzt den Konturstrich an diesen Stellen. */
    --tigers-yellow-ink: #1a1a1a;
    /* Gelb dort, wo es WERT bleiben muss (Kennzahlen, Summenzeilen): im
       Hellmodus dunkles Gold statt Schwarz, damit die Hervorhebung erhalten
       bleibt. Der Wert stammt aus dem Druck-Stylesheet, wo dasselbe Problem
       schon geloest war. */
    --tigers-gold: #a07b00;

    /* Gelb-Transluzenzen (Chips, Karten-Hervorhebung, Fokus-Ringe) */
    --tigers-yellow-06: rgba(253,238,23,0.06);
    --tigers-yellow-12: rgba(253,238,23,0.12);
    --tigers-yellow-16: rgba(253,238,23,0.16);
    --tigers-yellow-22: rgba(253,238,23,0.22);
    --tigers-yellow-35: rgba(253,238,23,0.35);
    --tigers-yellow-40: rgba(253,238,23,0.4);
    --tigers-yellow-45: rgba(253,238,23,0.45);
    --tigers-yellow-50: rgba(253,238,23,0.5);

    /* === Layout & Schatten === */
    --navbar-height: 64px;
    --radius: 12px;
    --radius-small: 8px;
    --gap: 1rem;

    --shadow: 0 4px 12px rgba(0,0,0,0.1);
    --card-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-strong: 0 4px 6px rgba(0,0,0,0.15);

    /* === Status- und Meldungsfarben ===
       Eine Familie statt der frueheren zwei Praefixe (--msg-* und --status-*).
       -text = Schrift auf der getoenten Flaeche, -icon = Punkt/Symbol auf Glas,
       -bg/-border = die getoente Flaeche selbst. Die -text/-icon-Toene kippen
       mit dem Theme, weil sie im Hellmodus auf hellem Grund sitzen. */
    --ok-text: #1a7f4b;
    --ok-icon: #1a7f4b;
    --ok-bg: rgba(74,222,128,0.16);
    --ok-border: rgba(74,222,128,0.35);

    --warn-text: #8a5a00;
    --warn-bg: rgba(251,191,36,0.2);
    --warn-border: rgba(138,90,0,0.5);

    /* Steuer-/Freibetrags-Ton (Lachs). -text kippt mit dem Theme, weil er auf
       der eigenen Toenung sitzt; auf Weiss kam #f0997b nur auf rund 2:1. */
    --tax-text: #b04a22;
    --tax-bg: rgba(240,153,123,0.18);
    --warn-solid: #fbbf24;
    --on-warn-solid: #3a2a00;

    --err-text: #a8302b;
    --err-icon: #b3221f;
    --err-bg: rgba(226,75,74,0.16);
    --err-bg-strong: rgba(226,75,74,0.2);
    --err-border: rgba(226,75,74,0.4);
    --err-border-strong: rgba(226,75,74,0.45);

    /* Hallenbelegung: frei/belegt – keine Erfolgs-/Fehlermeldung, deshalb
       bewusst eine eigene Farbfamilie. */
    --status-blue: #2b6cb0;
    --status-blue-bg: rgba(133,183,235,0.16);
    /* --status-teal ist die FLAECHE (Bestaetigen-Button) und bleibt in beiden
       Modi gleich; --status-teal-ink ist derselbe Ton als SCHRIFT auf der
       Toenung und kippt deshalb. Gleiche Trennung wie bei --ok-*. */
    --status-teal: #5DCAA5;
    --status-teal-ink: #1c7a5e;
    --status-teal-bg: rgba(93,202,165,0.18);
    --status-teal-text: #10231c;

    /* === Stage / Glass (Hybrid) — Standardwerte = HELL ===
       "Dunkel" und "System" (bei OS-Dunkelmodus) überschreiben diese Gruppe
       unten 1:1 mit den ursprünglichen (dunklen) Werten. --ink ist die
       Text-/Tint-Farbe auf den Glasflächen: dunkel im Hellmodus, weiß im
       Dunkelmodus. Nav-Leiste, ihre Dropdowns und die reinen Recessed-
       Eingabeflächen (--glass-black-*) bleiben bewusst konstant (Marken-Chrome
       bzw. funktionieren in beiden Modi unverändert). */
    --ink: 26 26 26;
    /* Seitenhintergrund: Schleier (--stage-tint*) ueber diagonalem Streifen-
       muster (--stage-stripe-*). Bewusst in Einzelfarben zerlegt, damit sie
       im Admin (Seite & Design) einzeln einstellbar sind – --stage-bg selbst
       ist ein Verlauf und damit kein Farbwert. */
    --stage-tint: rgba(255,255,255,0.65);
    --stage-tint-2: rgba(240,242,245,0.4);
    --stage-tint-3: rgba(255,255,255,0.65);
    --stage-stripe-a: #f5f6f8;
    --stage-stripe-b: #eceef1;
    --stage-bg:
        linear-gradient(180deg, var(--stage-tint), var(--stage-tint-2) 35%, var(--stage-tint-3)),
        repeating-linear-gradient(-45deg, var(--stage-stripe-a) 0 22px, var(--stage-stripe-b) 22px 44px);
    /* Karten-/Panelflaeche. Im Hellmodus eine echte weisse Karte auf der
       getoenten Stage – ueber rgba(var(--ink)/0.11) allein waere sie dort
       kaum vom Hintergrund zu unterscheiden (2026-07-22). */
    --karte-bg: rgba(255,255,255,0.72);
    --karte-border: rgba(0,0,0,0.13);
    --glass-bg: rgba(0,0,0,0.05);
    --glass-bg-strong: rgba(0,0,0,0.08);
    --glass-border: rgba(0,0,0,0.14);
    --glass-blur: blur(20px) saturate(1.3);
    --glass-radius: 18px;
    --on-glass: rgba(0,0,0,0.87);
    --on-glass-soft: rgba(0,0,0,0.6);
    --nav-glass-bg: rgba(17,17,17,0.72);

    /* Feinere Glas-Abstufungen (aus hb-/so-/mo-/News-Komponenten übernommen) */
    --glass-06: rgba(0,0,0,0.06);
    --glass-08: rgba(0,0,0,0.08);
    --glass-12: rgba(0,0,0,0.12);
    --glass-16: rgba(0,0,0,0.16);
    --glass-22: rgba(0,0,0,0.2);
    --glass-40: rgba(0,0,0,0.32);
    --glass-45: rgba(0,0,0,0.4);
    --glass-50: rgba(0,0,0,0.45);
    --glass-55: rgba(0,0,0,0.5);
    --glass-60: rgba(0,0,0,0.55);
    --glass-70: rgba(0,0,0,0.62);
    --glass-75: rgba(0,0,0,0.68);
    --glass-90: rgba(0,0,0,0.8);

    /* Recessed Eingabeflächen (Inputs/Selects/Dropdown-Schatten) — bleiben in
       jedem Theme dunkel/grau, das funktioniert auf hellem wie dunklem Stage. */
    /* Versenkte Eingabeflaeche. Eine Vertiefung soll RELATIV zur Umgebung
       dunkler wirken – im Hellmodus also hellgrau, nicht schwarz (sonst steht
       dunkle --ink-Schrift auf dunklem Grund). */
    --feld-bg: rgba(0,0,0,0.06);
    --glass-black-30: rgba(0,0,0,0.3);
    --glass-black-55: rgba(0,0,0,0.55);
    --glass-shadow: rgba(15,15,15,0.25);
    --glass-avatar-ring: rgba(30,30,30,0.9);
}

:root[data-theme="dark"] {
    --ink: 255 255 255;
    --stage-tint: rgba(26,26,26,0.55);
    --stage-tint-2: rgba(26,26,26,0.35);
    --stage-tint-3: rgba(26,26,26,0.6);
    --stage-stripe-a: #262626;
    --stage-stripe-b: #1e1e1e;
    --stage-bg:
        linear-gradient(180deg, var(--stage-tint), var(--stage-tint-2) 35%, var(--stage-tint-3)),
        repeating-linear-gradient(-45deg, var(--stage-stripe-a) 0 22px, var(--stage-stripe-b) 22px 44px);
    --karte-bg: rgba(255,255,255,0.11);
    --karte-border: rgba(255,255,255,0.22);
    --glass-bg: rgba(255,255,255,0.10);
    --glass-bg-strong: rgba(255,255,255,0.14);
    --glass-border: rgba(255,255,255,0.20);
    --on-glass: rgba(255,255,255,0.92);
    --on-glass-soft: rgba(255,255,255,0.66);
    --glass-06: rgba(255,255,255,0.06);
    --glass-08: rgba(255,255,255,0.08);
    --glass-12: rgba(255,255,255,0.12);
    --glass-16: rgba(255,255,255,0.16);
    --glass-22: rgba(255,255,255,0.22);
    --glass-40: rgba(255,255,255,0.4);
    --glass-45: rgba(255,255,255,0.45);
    --glass-50: rgba(255,255,255,0.5);
    --glass-55: rgba(255,255,255,0.55);
    --glass-60: rgba(255,255,255,0.6);
    --glass-70: rgba(255,255,255,0.7);
    --glass-75: rgba(255,255,255,0.75);
    --glass-90: rgba(255,255,255,0.9);
    --tigers-yellow-text: #fdee17;
    --tigers-yellow-outline: transparent;
    --tigers-yellow-ink: #fdee17;
    --ok-text: #4ade80;
    --ok-icon: #2ecc71;
    --warn-text: #fbbf24;
    --warn-border: rgba(251,191,36,0.5);
    --err-text: #ff9b9a;
    --err-icon: #e24b4a;
    --tigers-gold: #fdee17;
    --feld-bg: rgba(0,0,0,0.3);
    --tax-text: #f0997b;
    --status-blue: #85B7EB;
    --status-teal-ink: #5DCAA5;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        --ink: 255 255 255;
        --stage-bg:
            linear-gradient(180deg, rgba(26,26,26,0.55), rgba(26,26,26,0.35) 35%, rgba(26,26,26,0.6)),
            repeating-linear-gradient(-45deg, #262626 0 22px, #1e1e1e 22px 44px);
        --karte-bg: rgba(255,255,255,0.11);
        --karte-border: rgba(255,255,255,0.22);
        --glass-bg: rgba(255,255,255,0.10);
        --glass-bg-strong: rgba(255,255,255,0.14);
        --glass-border: rgba(255,255,255,0.20);
        --on-glass: rgba(255,255,255,0.92);
        --on-glass-soft: rgba(255,255,255,0.66);
        --glass-06: rgba(255,255,255,0.06);
        --glass-08: rgba(255,255,255,0.08);
        --glass-12: rgba(255,255,255,0.12);
        --glass-16: rgba(255,255,255,0.16);
        --glass-22: rgba(255,255,255,0.22);
        --glass-40: rgba(255,255,255,0.4);
        --glass-45: rgba(255,255,255,0.45);
        --glass-50: rgba(255,255,255,0.5);
        --glass-55: rgba(255,255,255,0.55);
        --glass-60: rgba(255,255,255,0.6);
        --glass-70: rgba(255,255,255,0.7);
        --glass-75: rgba(255,255,255,0.75);
        --glass-90: rgba(255,255,255,0.9);
        --tigers-yellow-text: #fdee17;
        --tigers-yellow-outline: transparent;
        --tigers-yellow-ink: #fdee17;
        --ok-text: #4ade80;
        --ok-icon: #2ecc71;
        --warn-text: #fbbf24;
        --warn-border: rgba(251,191,36,0.5);
        --err-text: #ff9b9a;
        --err-icon: #e24b4a;
        --tigers-gold: #fdee17;
        --feld-bg: rgba(0,0,0,0.3);
        --tax-text: #f0997b;
        --status-blue: #85B7EB;
        --status-teal-ink: #5DCAA5;
    }
}


/* === Global Reset & Box Sizing === */
* {
    padding: 0;
    margin: 0;
    /* WICHTIG: Globales Box-Sizing verhindert Layout-Sprengung durch Padding */
    box-sizing: border-box; 
    font-size: 1rem;
    font-family: 'Roboto', serif;
    color: var(--text-color);
}

/* Markierter Text: Vereinsfarben statt Browser-Blau. Grund: viele Texte sind
   halbtransparentes Weiss (rgba(var(--ink) / 0.6)); auf der blauen Standard-
   markierung wurden sie praktisch unlesbar. Gelb/Schwarz wie die Hervorhebung
   aktiver Menuepunkte, volle Deckkraft in beiden Designs (2026-07-30). */
::selection { background: var(--tigers-yellow); color: var(--tigers-black); }
::-moz-selection { background: var(--tigers-yellow); color: var(--tigers-black); }

html {
    height: 100%;
    font-size: 16px;
}

body {
    min-height: 100svh;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--stage-bg);
    background-attachment: scroll;
    display: flex;
    flex-direction: column;
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color: var(--text-color);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

/* === Inputs & Buttons === */
select, input, button, textarea {
    font: inherit;
    color: var(--text-input);
    background-color: var(--bg-flaeche);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 12px 14px;
    min-height: 20px;
}

button,
input[type="button"],
input[type="submit"] {
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    touch-action: manipulation;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
    background-color: var(--bg-table-row-dark);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid var(--tigers-yellow);
    outline-offset: 2px;
}

/* === Navigation === */
nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--navbar-height);
    background: var(--nav-glass-bg);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid rgba(253,238,23,0.18);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    padding: 0 0 0 0;
    margin-bottom: 16px;
}

/* Logo-Bereich: gelber Akzentstreifen links */
nav .loginHeader {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    height: 100%;
    padding: 0 20px;
    background: var(--tigers-yellow);
    border-right: 3px solid #e6d815;
}

nav a.logo {
    max-height: var(--navbar-height);
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tigers-black);
    display: flex;
    align-items: center;
}

nav .TigersLogo,
nav .TigersLogo img {
    max-height: calc(var(--navbar-height) - 12px);
    max-width: calc(var(--navbar-height) - 12px);
}

/* Nav-Liste */
nav ul {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    gap: 0;
}

nav li {
    height: 100%;
    min-width: 110px;
    text-align: center;
    position: relative;
}

nav ul a,
nav ul a:visited,
nav .expandable_li > label {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0 10px;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}

nav ul a i,
nav .expandable_li > label i {
    color: var(--tigers-yellow) !important;
    font-size: 0.9rem;
    transition: color 0.15s ease;
}

nav li:hover > a,
nav li:hover > a:visited,
nav li:hover > label {
    color: var(--tigers-yellow) !important;
    border-bottom-color: var(--tigers-yellow);
    background: rgba(255,255,255,0.05);
}

nav li:hover > a i,
nav li:hover > label i {
    color: var(--tigers-yellow) !important;
}

/* Aktiver Nav-Link */
nav ul a.active,
nav ul a.active:visited {
    color: var(--tigers-yellow) !important;
    border-bottom: 3px solid var(--tigers-yellow);
    font-weight: 700;
}

nav ul a.active i {
    color: var(--tigers-yellow) !important;
}

/* Dropdown */
.dropdown {
    height: min-content;
    width: 260px;
    background: #1a1a1a;
    border: 1px solid rgba(253,238,23,0.2);
    border-top: 3px solid var(--tigers-yellow);
    display: none;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: var(--navbar-height);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    border-radius: 0 0 var(--radius-small) var(--radius-small);
    overflow: hidden;
}

.dropdown li {
    height: 48px;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dropdown li:last-child {
    border-bottom: none;
}

.dropdown li a {
    justify-content: flex-start;
    padding: 0 18px;
    gap: 10px;
    width: 100%;
    color: rgba(255,255,255,0.75);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: none;
    border-bottom: none;
    height: 100%;
}

.dropdown li a i {
    color: var(--tigers-yellow);
    font-size: 0.88rem;
}

.dropdown li:hover a {
    background: rgba(253,238,23,0.08);
    color: var(--tigers-yellow);
    border-bottom: none;
}

.dropdown li:hover a i {
    color: var(--tigers-yellow);
}

nav li:hover .dropdown {
    display: flex;
}

nav input[type="checkbox"] {
    display: none;
}

.expandable_li {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Burger-Button */
.toggle_button {
    width: 28px;
    height: 20px;
    position: absolute;
    top: 22px;
    right: 20px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.bar {
    height: 3px;
    width: 100%;
    background: var(--tigers-yellow);
    border-radius: 100px;
}

/* Responsive Navbar */
@media (max-width: 1025px) {
    .toggle_button {
        display: flex;
    }

    nav .loginHeader {
        padding: 0 14px;
    }

    nav a.logo {
        font-size: 0.85rem;
    }

    nav ul {
        height: min-content;
        width: 100%;
        background: #1a1a1a;
        display: none;
        position: absolute;
        top: var(--navbar-height);
        left: 0;
        box-shadow: 0 8px 24px rgba(0,0,0,0.5);
        gap: 0;
        flex-direction: column;
    }

    nav li {
        height: min-content;
        min-width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    nav ul a,
    nav .expandable_li > label {
        padding: 16px 24px;
        justify-content: flex-start;
        height: auto;
        border-bottom: none;
        border-left: 3px solid transparent;
    }

    nav ul a.active {
        border-bottom: none;
        border-left: 3px solid var(--tigers-yellow);
    }

    nav li:hover > a,
    nav li:hover > label {
        border-bottom: none;
        border-left: 3px solid var(--tigers-yellow);
        background: rgba(253,238,23,0.06);
    }

    .expandable_li {
        display: block;
    }

    .expandable_li label {
        cursor: pointer;
        display: flex;
    }

    .expandable_li input[type="checkbox"]:checked ~ .dropdown {
        display: block;
    }

    .dropdown {
        position: static;
        width: 100%;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: rgba(0,0,0,0.3);
    }

    .dropdown li {
        height: auto;
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }

    .dropdown li a {
        padding: 13px 40px;
        justify-content: flex-start;
        width: 100%;
    }

    #toggle_button:checked ~ ul {
        display: flex;
    }
}

section {
    background: var(--darker-background);
    background-size: cover;
    height: calc(100vh - 80px);
}

h1 {
    font-size: 2.5rem;
    color: var(--border-color);
}

/* === Login & Register === */
.login, .register {
    width: min(100%, 420px);
    background: var(--bg-flaeche);
    color: var(--text-color);
    box-shadow: var(--card-shadow);
    margin: 24px auto;
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.loginHeader {
    height: var(--navbar-height);
    background: var(--background-color);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    justify-content: flex-start;
}

a.logoLogin, a.TigersLogoLogin {
    text-decoration: none;
    color: var(--text-color);
}

a.logoLogin {
    font-size: 1.5rem;
}

a.TigersLogoLogin {
    margin-left: 0;
    max-height: var(--navbar-height);
}

.TigersLogoLogin img {
    max-height: var(--navbar-height);
}

.login h1, .register h1 {
    text-align: center;
    color: var(--border-color);
    font-size: 22px;
    padding: 16px 0;
    margin: 0;
    border-bottom: 1px solid var(--border-light);
}

.login form, .register form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 16px;
}

.login form label, .register form label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--primary-blue);
    color: var(--white);
    border-radius: var(--radius-small);
}

.login form input[type="password"],
.login form input[type="text"],
.register form input[type="password"],
.register form input[type="text"],
.register form input[type="email"] {
    width: 100%;
    height: 48px;
    border: 1px solid var(--border-light);
    padding: 0 14px;
    background: var(--bg-flaeche);
    color: var(--text-input);
    border-radius: var(--radius-small);
}

.login form input[type="submit"],
.register form input[type="submit"] {
    width: 100%;
    padding: 14px;
    margin-top: 10px;
    background: var(--primary-blue);
    border: 0;
    cursor: pointer;
    font-weight: 700;
    color: var(--white);
    transition: background-color .2s;
    border-radius: 10px;
}

.login form input[type="submit"]:hover,
.register form input[type="submit"] {
    background: var(--primary-blue-hover);
}


/* =========================
   Layout: Content
   ========================= */

/* HINWEIS: Diese alte Definition (50%) wurde auskommentiert, da sie 
   unten durch die 90%-Definition überschrieben wurde. */
/* .content {
    width: 50%;
    margin: 0 auto;
    padding: 0 1rem 1.25rem;
    background: var(--background-color); 
    color: var(--text-color);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: var(--shadow-strong);
}
*/

.content h2 {
    margin: 0;
    padding: 1.25rem 0;
    font-size: clamp(1.25rem, 2.5vw + .5rem, 2rem);
    border-bottom: 1px solid var(--border-color);
    color: var(--border-color);
}

/* Innere Boxen in .content */
.content>p, .content>div {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--darker-background);
    border-radius: .75em;
    border: 1px solid var(--border-light);
    box-shadow: none;
}


/* === Haupt-Content Definition (Aktiv: 90%) === */
.content {
    width: 90%;
    margin: 30px auto;
    background-color: var(--background-color);
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--shadow-strong);
    border: 1px solid var(--border-light);
    box-sizing: border-box; /* Doppelt hält besser (auch global gesetzt) */
}

.content h1 {
    text-align: center;
    color: var(--border-color); 
    margin-bottom: 25px;
    letter-spacing: 1px;
    font-size: 1.8em;
}


/* === Profil Content Box (User bestätigt Nutzung) === */
.contentprofil {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto 1.4rem;
    background-color: var(--background-color);
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--shadow-strong);
    border: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    box-sizing: border-box;
}

.contentprofil h2 {
    margin: 0;
    padding: 1.25rem 0;
    font-size: clamp(1.25rem, 2.5vw + .5rem, 2rem);
    border-bottom: 1px solid var(--border-color);
    color: var(--border-color);
}

.contentprofil>p, .contentprofil>div {
    margin: 0;
    padding: 1rem;
    background: var(--darker-background);
    border-radius: .75em;
    border: 1px solid var(--border-light);
    flex: 1 1 calc(30% - 0.5rem);
    min-width: 260px;
    box-sizing: border-box;
}

.profil {
    overflow: hidden;
}

.profil table {
    width: 100%;
    table-layout: fixed;
}

.profil td {
    color: var(--text-color);
    padding: 3px 6px 3px 0;
    word-break: break-word;
}

.profil td:first-child {
    width: 40%;
    white-space: nowrap;
}

.profil td:last-child {
    width: 60%;
}

.profil input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Links */
a {
    color: var(--text-color);
    text-decoration: none;
}

a:visited {
    color: var(--text-color);
}

a:hover,
a:focus-visible {
    color: var(--primary-blue);
    text-decoration: none;
}

/* Listen neutralisieren */
.content li {
    list-style: none;
}

/* === Tabellen Allgemein === */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.Tabelle, .TabelleFK {
    min-width: 640px;
    width: 100%;
    border-collapse: collapse;
}

.Tabelle tr, .TabelleFK tr {
    height: 1rem;
}

.Tabelle td, .Tabelle th,
.TabelleFK td, .TabelleFK th {
    padding: 12px;
}

/* Einfache Content-Tabellen */
.content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.content th {
    background-color: var(--tigers-yellow);
    color: var(--border-color);
    text-align: left;
    padding: 10px;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
}

.content td {
    padding: 10px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-color);
}

.content tr:last-child td {
    border-bottom: none;
}

/* Input Fields inside Content */
.content input[type="text"],
.content input[type="number"],
.content input[type="date"],
.content select {
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--bg-flaeche);
    color: var(--text-input);
    box-sizing: border-box;
}

.content input[type="text"]:read-only {
    background-color: var(--bg-input-readonly);
    color: var(--text-placeholder);
    border-color: var(--border-light);
}

.content select option {
    background-color: var(--background-color);
    color: var(--text-color);
}

.content input[type="submit"] {
    background-color: var(--tigers-yellow);
    color: var(--border-color);
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.content input[type="submit"]:hover {
    background-color: var(--tigers-yellow-hover);
}

.content hr {
    border: none;
    border-top: 2px solid var(--tigers-yellow);
    margin: 20px 0;
}

p, em {
    color: var(--text-color);
}

/* Responsive Table Simple (Breakpoint an Menue-Umbruch <=1024px angeglichen) */
@media (max-width: 1024px) {
    .content table, .content tr, .content td, .content th {
        display: block;
        width: 100%;
    }

    .content tr {
        margin-bottom: 15px;
        border: 1px solid var(--border-light);
        border-radius: 8px;
        background-color: var(--background-color);
        padding: 10px;
    }

    .content th {
        display: none;
    }

    .content td {
        border: none;
        padding: 6px 0;
    }

    .content td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-weight: bold;
        color: var(--border-color);
        margin-bottom: 3px;
    }

    .content td[data-label=""]::before {
        display: none;
    }
}

/* =========================
   Lesbarkeit in den dunklen Bereichen (alle Breiten)
   `* { color }` ganz oben faerbt jedes Element hart um. Inline-Auszeichnungen
   wie <b> erben dadurch NICHT die helle Schrift ihres Absatzes, sondern werden
   dunkelgrau - auf dunklem Grund praktisch unsichtbar.
   ========================= */
.content.abr-glass b, .content.abr-glass strong, .content.abr-glass i,
.content.abr-glass em, .content.abr-glass small, .content.abr-glass u,
.content.seite-glass b, .content.seite-glass strong, .content.seite-glass i,
.content.seite-glass em, .content.seite-glass small, .content.seite-glass u,
.content.ad b, .content.ad strong, .content.ad i, .content.ad em, .content.ad small,
.content.hb b, .content.hb strong, .content.hb i, .content.hb em, .content.hb small,
.content.ueb b, .content.ueb strong, .content.ueb i, .content.ueb em, .content.ueb small {
    color: inherit;
}

/* =========================
   Fortsetzung 2026-07-26: systematischer Dunkelmodus-Durchlauf.
   Alle Seiten wurden gerendert und auf WCAG-Kontrast gemessen. Ueberall dort,
   wo Text in einem Element ohne eigene Farbregel steht, liefert das
   `* { color: var(--text-color) }` hart #333 - auf den Glasflaechen also
   1,3:1. Die folgenden Regeln holen genau diese Stellen zurueck.

   `:not([class])` ist bewusst gesetzt, wo im selben Container auch Elemente
   MIT eigener Farbregel sitzen (z. B. .hb-tile .l, .ad-rolle-chk). Ohne die
   Einschraenkung wuerde die neue Regel deren Farbe schlagen und den Fehler
   nur in den Hellmodus verschieben.
   ========================= */

/* Hallenbelegung: Raster-Zellen (Zeitspanne, "+", Absage, Entfaellt,
   Regeltermin), Karten-Ueberschrift und der Halle-/Mannschaft-Filter. */
/* Bewusst nur <td>: die Datumszeile in den Tages-Koepfen steht im <th> auf
   gelbem Grund und braucht dort weiter die dunkle --tigers-black-Schrift.
   Ein `inherit` auf .hb-grid span wuerde sie weiss auf Gelb setzen (1,2:1). */
.content.hb .hb-grid td span,
.content.hb .hb-grid td s,
.content.hb .hb-grid td small,
.content.hb .hb-card h2 span,
.content.hb .hb-card h3 span {
    color: inherit;
}

/* Legende unter den Rastern: <s>Entfaellt</s> steht in einem <p>, nicht in
   der Tabelle. */
.content.hb .hb-card p s,
.content.hb .hb-card p span:not([class]) {
    color: inherit;
}

/* Dashboard: Namens-Chips der Trainer-Zuordnung. Spezifischer als die
   inherit-Regel fuer .hb-grid td span, sonst erbt der Chip den #333 des
   umgebenden <td> der Zuordnungs-Tabelle. */
.content.hb .hb-grid td span.hb-chip,
.content.hb .hb-chips span.hb-chip {
    color: rgb(var(--ink));
}

.content.hb .hb-card label {
    color: rgb(var(--ink));
}

/* Hallenbelegung-Dashboard: Hinweistext der Import-Karte (Format-Beispiel mit
   <code>/<strong>/<em> darin). Bewusst auf .hb-dashboard begrenzt - ohne das
   trifft die Regel auch die Datumszeile im <th> der Wochensicht und faerbt
   sie weiss auf Gelb. */
.content.hb .hb-dashboard .hb-card span:not([class]) {
    color: rgb(var(--ink));
}

.content.hb .hb-dashboard .hb-card span:not([class]) code,
.content.hb .hb-dashboard .hb-card span:not([class]) strong,
.content.hb .hb-dashboard .hb-card span:not([class]) em {
    color: inherit;
}

/* AdminNews: Rollen-Checkboxen unter "Sichtbar fuer" (klassenlose <label>).
   .ad-rolle-chk im dauerhaft dunklen Rollen-Panel behaelt sein var(--white). */
.content.ad .ad-field label:not([class]) {
    color: rgb(var(--ink));
}

/* Admin-Einstellungen: Ueberschrift der Freibetrags-Bloecke. */
.content.ad .frb-titel {
    color: rgb(var(--ink));
}

/* "Alle News": Ueberschrift der Abschnittsleiste. */
.content .home-section-title span:not([class]) {
    color: inherit;
}

/* Profil: Prozentwert im Fortschritts-Ring. Der Ring/Badge ist in BEIDEN
   Themes dunkel, deshalb fest helle Schrift statt --ink. */
.content.pf .progress-badge span {
    color: var(--white);
}

/* Profil: Dateigroesse unter dem Profilbild steht auf der weissen
   Upload-Flaeche - dort braucht es dunkle Schrift, nicht die helle
   Glasschrift. */
.content.pf .pb-filesize {
    color: var(--text-placeholder);
}

/* Zu schwache Sekundaerfarben aus der hellen Fassung anheben. */
.content.abr-glass .km-unit { color: rgba(255, 255, 255, 0.60); }
.content.abr-glass .fk2-wd,
.content.abr-glass .sn2-wd { color: rgba(255, 255, 255, 0.70) !important; }

/* =========================
   Mobil-Karten in den dunklen Bereichen (Glass-Look)
   Die generische Transformation direkt darueber macht aus Tabellenzeilen WEISSE
   Karten (var(--background-color)). In den dunklen Bereichen steht dort helle
   Schrift -> Kontrast 1:1, unlesbar. Gleiche Loesung wie im .aw-Scope.
   Betrifft: Abrechnung (.abr-glass), Formulare/Uebersicht/Upload (.seite-glass),
   Personen (.ad), Halle (.hb).
   ========================= */
@media (max-width: 1024px) {
    .content.abr-glass tr,
    .content.seite-glass tr,
    .content.ad tr,
    .content.hb tr {
        background-color: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.18);
    }

    .content.abr-glass td,
    .content.seite-glass td,
    .content.ad td,
    .content.hb td {
        color: rgba(255, 255, 255, 0.92);
    }

    .content.abr-glass td[data-label]::before,
    .content.seite-glass td[data-label]::before,
    .content.ad td[data-label]::before,
    .content.hb td[data-label]::before {
        color: rgba(255, 255, 255, 0.60);
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
}

/* =========================
   Abrechnung mobil: Tageszeile = Karte.
   Die Feldbeschriftung liefert data-label (setzt footer.php aus der Kopfzeile),
   hier steht nur das Layout. !important, weil die .fk2-/.sn2-Regeln als
   <style> in der Seite stehen und damit nach dieser Datei geladen werden.
   ========================= */
@media (max-width: 1024px) {
    .fk2-table, .sn2-table { min-width: 0 !important; }
    /* tbody bleibt sonst table-row-group: die Karten erben dann die festen
       Spaltenbreiten der Kopfzeile und werden zu schmal (wie im .aw-Scope). */
    .fk2-table tbody, .sn2-table tbody,
    .content.seite-glass tbody { display: block; }
    .fk2-table tr.fk2-row,
    .sn2-table tr.sn2-row { position: relative; padding: 12px 44px 12px 14px !important; }

    /* Tag als Kartenkopf statt schmaler Spalte */
    .fk2-daycell, .sn2-daycell {
        text-align: left !important;
        display: flex !important;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 8px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    }
    .fk2-dnum, .sn2-dnum, .fk2-wd, .sn2-wd { display: inline !important; }

    /* Beschriftung kommt aus data-label (footer.php, aus der Kopfzeile).
       Bei Tag-Zelle und Loeschknopf waere sie ueberfluessig. */
    .fk2-daycell::before, .sn2-daycell::before,
    .fk2-tdx::before, .sn2-tdx::before { display: none !important; }

    /* km-Feld linksbuendig, sonst klebt es am rechten Kartenrand */
    .fk2-tdkm .km-auto-wrap { justify-content: flex-start !important; }
    .fk2-km, .sn2-std { text-align: left !important; }

    /* Zeile-leeren-Knopf in die Kartenecke */
    .fk2-tdx, .sn2-tdx {
        position: absolute !important;
        top: 10px; right: 10px;
        width: auto !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Summenleiste unter die Tabelle */
    .fk2-split, .sn2-split { grid-template-columns: 1fr !important; }
    .fk2-aside, .sn2-aside {
        border-left: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
    }
    .fk2-aside-inner, .sn2-aside-inner { position: static !important; }
    /* Summenzeilen sind divs, keine Tabellenzeilen - nicht als Karte rendern */
    .fk2-sumline, .sn2-sumline, .fk2-total, .sn2-total { background: none; border-radius: 0; }
    .fk2-total, .sn2-total { background: rgba(0, 0, 0, 0.35); border-radius: 12px; }
}

/* =========================
   Mehrfach-Eintraege pro Tag (Fahrtkosten + Stundennachweis).
   Ein Tag = weiterhin eine Zeile; ein "+"-Knopf oeffnet darunter eine
   Aufklapp-Zeile mit den zusaetzlichen Eintraegen (max. 4, siehe fk2AddAccEntry
   / sn2AddAccEntry). Faerbung/Layout bewusst identisch zu .fk-clear-btn.
   ========================= */
.fk2-btncell, .sn2-btncell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.fk2-plusbtn, .sn2-plusbtn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.70);
    cursor: pointer;
    padding: 2px 6px;
    min-width: 22px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    font-family: inherit;
}
.fk2-plusbtn:hover, .sn2-plusbtn:hover {
    border-color: var(--tigers-yellow);
    color: var(--tigers-yellow);
}
.fk2-plusbtn-filled, .sn2-plusbtn-filled {
    background: rgba(253, 238, 23, 0.16);
    border-color: rgba(253, 238, 23, 0.40);
    color: var(--tigers-yellow);
}
.fk2-acc-row, .sn2-acc-row { display: none; }
.fk2-acc-row.fk2-acc-open, .sn2-acc-row.sn2-acc-open { display: table-row; }
.fk2-acc-row > td, .sn2-acc-row > td {
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.fk2-acc-inner, .sn2-acc-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 12px 68px;
    background: rgba(0, 0, 0, 0.16);
}
.fk2-acc-entry {
    display: grid;
    grid-template-columns: 1fr minmax(120px, 34%) 84px 30px;
    gap: 8px;
    align-items: center;
}
.sn2-acc-entry {
    display: grid;
    grid-template-columns: 1fr 110px 30px;
    gap: 8px;
    align-items: center;
}
.fk2-addbtn, .sn2-addbtn {
    align-self: flex-start;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.30);
    color: rgba(255, 255, 255, 0.70);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.fk2-addbtn:hover, .sn2-addbtn:hover {
    border-color: var(--tigers-yellow);
    color: var(--tigers-yellow);
}
@media (max-width: 1024px) {
    .fk2-acc-inner, .sn2-acc-inner { padding-left: 14px; }
    .fk2-acc-entry, .sn2-acc-entry { grid-template-columns: 1fr; }
}

/* =========================
   Fahrtkosten-Eingabe: Tag-Karten (Paket B, nur <=1024px)
   Struktur/Namen/JS unveraendert, nur Darstellung als Karte je Tag.
   ========================= */
@media (max-width: 1024px) {
    .content table.fk-tage {
        border: 0;
        background: transparent;
    }

    /* Kopfzeile (ohne data-row) ausblenden */
    .content .fk-tage tr:not([data-row]) {
        display: none;
    }

    /* Jede Tageszeile = Karte */
    .content .fk-tage tr[data-row] {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 8px 10px;
        position: relative;
        padding: 14px 34px 14px 12px;
        border: 1px solid var(--border-light);
        border-radius: 10px;
        background-color: var(--background-color);
        margin-bottom: 12px;
    }

    .content .fk-tage td {
        width: auto;
        padding: 0;
        border: 0;
    }

    /* Zellenbreiten im Karten-Layout */
    .content .fk-tage td:nth-child(1) { flex: 0 0 auto; }        /* Wochentag */
    .content .fk-tage td:nth-child(2) { flex: 1 1 auto; }        /* Datum */
    .content .fk-tage td:nth-child(3) { flex: 1 1 100%; }        /* Ziel */
    .content .fk-tage td:nth-child(4) { flex: 1 1 55%; }         /* Grund */
    .content .fk-tage td:nth-child(5) { flex: 1 1 30%; }         /* Entfernung */

    /* Wochentag + Datum als Karten-Ueberschrift (ohne Label, wie Text) */
    .content .fk-tage td:nth-child(1)::before,
    .content .fk-tage td:nth-child(2)::before,
    .content .fk-tage td:nth-child(6)::before {
        display: none;
    }

    .content .fk-tage td:nth-child(1) input,
    .content .fk-tage td:nth-child(2) input {
        width: auto;
        border: 0;
        background: transparent;
        color: var(--text-color);
        font-weight: 600;
        font-size: 1.02rem;
        padding: 0;
    }

    /* Eingaben fuellen ihre Zelle */
    .content .fk-tage td:nth-child(3) input,
    .content .fk-tage td select {
        width: 100%;
    }

    .content .fk-tage .km-auto-wrap {
        width: 100%;
    }

    /* Zeile-leeren-Button oben rechts in der Karte */
    .content .fk-tage td:nth-child(6) {
        position: absolute;
        top: 10px;
        right: 8px;
        flex: 0 0 auto;
    }
}


/* =========================
   Signature Pad
   ========================= */
.wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    user-select: none;
}

.signature-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 16px;
}

#signature-pad {
    width: 70%;
    max-width: 300px;
    max-height: 200px;
    aspect-ratio: auto;
    height: 100%;
    border: 2px solid var(--border-color);
    background: var(--bg-signature);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Body braucht eine eigene Hoehe, sonst wird height:100% des Canvas zu 0 und
   das Feld kollabiert (Fahrtkosten/Stundennachweis geben dem Canvas die Hoehe
   per Inline-Style, diese Seite nutzt den .m-signature-pad--body-Wrapper). */
.m-signature-pad--body {
    position: relative;
    width: 100%;
    height: 150px;
}

.m-signature-pad--body canvas {
    width: 100%;
    height: 100%;
    max-height: 150px;
    border: 1px solid var(--border-light);
    background-color: var(--bg-signature);
    border-radius: 8px;
    box-sizing: border-box;
}

#clear-button {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--danger-red);
    color: var(--white);
    border: none;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s;
}

#clear-button:hover {
    background: var(--danger-red-hover);
}

/* =========================
   Footer
   ========================= */
footer {
    background: #111111;
    /* 1fr auto 1fr haelt den Impressum-Link exakt in der Footer-Mitte, unabhaengig
       davon wie breit Copyright-Zeile und "Nach oben"-Button sind. Mit
       space-between wanderte er um die Differenz der beiden aus der Mitte. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 16px 24px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.3);
    border-top: 3px solid var(--tigers-yellow);
}

footer h3 { justify-self: start; }
footer .back-to-top { justify-self: end; }

footer h3 {
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.03em;
}

footer h3 i {
    color: rgba(255,255,255,0.4);
}

footer a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

footer a i {
    color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
    font-size: 0.9rem;
}

footer a:hover {
    color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
}

/* Impressum/Datenschutz ist ein Pflichtlink und muss auffindbar sein: mittige
   Spalte, heller Text und dezenter Rahmen statt des ausgegrauten Fliesstextes. */
footer a:not(.back-to-top) {
    justify-self: center;
    color: rgba(255,255,255,0.92);
    font-weight: 600;
    padding: .3rem .8rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: .5rem;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

footer a:not(.back-to-top):hover {
    color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
    border-color: var(--tigers-yellow);
    background: rgba(255,255,255,0.05);
}

footer .back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tigers-black);
    background: var(--tigers-yellow);
    border: none;
    border-radius: .5rem;
    padding: .3rem .8rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

footer .back-to-top i {
    color: var(--tigers-black);
}

footer .back-to-top:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    color: var(--tigers-black);
}

/* Die drei Footer-Spalten brauchen zusammen gut 620px. Darunter untereinander
   stapeln statt quetschen (das Grid ignoriert das frühere flex-wrap). */
@media (max-width: 640px) {
    footer {
        grid-template-columns: 1fr;
        text-align: center;
    }
    footer h3,
    footer .back-to-top,
    footer a:not(.back-to-top) {
        justify-self: center;
    }
}

/* =========================
   Filterbar (Alte Version, User bestätigt Nutzung)
   ========================= */
.filterbar {
    position: relative;
    display: flex;
    gap: .75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    margin: .25rem 0 1rem 0;
    background: var(--background-color);
    border-radius: .75rem;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-light);
}

.filterbar .filter-item {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 160px;
    flex: 1 1 160px;
}

.filterbar .filter-item span {
    font-size: .9rem;
    opacity: .85;
    color: var(--text-placeholder);
}

.filterbar select {
    appearance: none;
    background: var(--bg-flaeche);
    color: var(--text-input);
    border: 1px solid var(--border-light);
    border-radius: .6rem;
    padding: .6rem .8rem;
    min-height: 44px;
}

.btn-reset {
    background: transparent;
    color: var(--primary-blue);
    border: 1px solid var(--primary-blue);
    border-radius: .6rem;
    padding: .6rem .9rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-reset:hover {
    background: var(--primary-blue);
    color: var(--white);
}

.section-heading {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--border-light);
    color: var(--border-color);
    font-weight: bold;
}

.section-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

.datei-eintrag {
    transition: opacity .15s ease, transform .15s ease;
    will-change: transform;
}

.datei-eintrag[style*="display: none"] {
    opacity: 0;
}

@media (hover:hover) {
    .datei-eintrag:hover {
        transform: translateY(-1px);
    }
}

.datei-eintrag a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0;
    text-decoration: none;
    color: var(--text-color);
}



/* =========================
   Ausgelagerte Styles für Stundennachweis.php
   ========================= */
.sn-details {
    margin-top: 20px;
}

.sn-summary {
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
    background: var(--bg-summary);
    border: 1px solid var(--border-gray);
    border-radius: 5px;
    color: var(--text-color);
}

.sn-summary-panel {
    padding: 15px;
    border: 1px solid var(--border-gray);
    border-top: none;
    border-radius: 0 0 5px 5px;
    background: var(--background-color);
}

.sn-table-full {
    width: 100%;
    border-collapse: collapse;
}

.stunden-tabelle th {
    text-align: left;
    padding: 8px;
    background: var(--tigers-yellow);
    color: var(--border-color);
}

.stunden-tabelle th:nth-child(1) { width: 20%; }
.stunden-tabelle th:nth-child(2) { width: 20%; }
.stunden-tabelle th:nth-child(4) { width: 10%; }

.stunden-tabelle td {
    padding: 5px;
    border-bottom: 1px solid var(--border-light);
}

.sn-w95 { width: 95%; }
.sn-w100 { width: 100%; }
.sn-table-actions { width: 100%; margin-top: 20px; }
.sn-text-right { text-align: right; }
.sn-mt30 { margin-top: 30px; }
.sn-mt20 { margin-top: 20px; }
.sn-h1-small { font-size: 1.5em; color: var(--border-color); }
.sn-h2-small { font-size: 1.2em; color: var(--text-color); }

.sn-summary-table {
    width: 50%;
    border-collapse: collapse;
    border: 1px solid var(--border-gray);
}

.sn-summary-table td {
    border: 1px solid var(--border-gray);
    padding: 5px;
}

.sn-canvas-dashed {
    border: 1px dashed var(--border-gray);
}

.fahrtkosten-tabelle th {
    text-align: left;
    padding: 8px;
    background: var(--tigers-yellow);
    color: var(--border-color);
}

.fahrtkosten-tabelle th:nth-child(1) { width: 20%; }
.fahrtkosten-tabelle th:nth-child(2) { width: 20%; }
.fahrtkosten-tabelle th:nth-child(4) { width: 25%; }
.fahrtkosten-tabelle th:nth-child(5) { width: 7%; }

.fahrtkosten-tabelle td {
    padding: 5px;
    border-bottom: 1px solid var(--border-light);
}


/* =========================
   Auswertungs-Tabellen & Matrix-View
   ========================= */

/* Filter Formular Styling (Flex-Row) */
.filter-container {
    margin-bottom: 1.5rem;
    background-color: var(--bg-table-row-dark);
    padding: 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    width: 100%;
}

.filter-row {
    display: flex;
    flex-direction: row;      /* Alles in einer Zeile */
    flex-wrap: wrap;          /* Umbruch erlaubt bei kleinen Screens */
    gap: 1rem;                /* Abstand zwischen den Gruppen */
    align-items: flex-end;    /* Ausrichtung unten */
}

.filter-group {
    display: flex;
    flex-direction: column;   /* Label über dem Input */
    gap: 0.25rem;
}

.filter-group-horizontal {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.filter-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-placeholder);
}

/* Inputs im Filter */
.filter-row select, 
.filter-row button, 
.filter-row a.btn-reset {
    height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.filter-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* Scroll Wrapper - Wichtig: max-width 100% damit er nicht rausragt */
.table-scroll-wrapper {
    display: block;
    width: 100%;           
    max-width: 100%;       
    overflow-x: auto;      
    overflow-y: hidden;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--background-color);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

/* Matrix Tabelle Layout */
.evaluation-table {
    border-collapse: separate; /* Nötig für sticky */
    border-spacing: 0;
    width: 100%; 
    white-space: nowrap;
    margin-bottom: 0;
}

/* Sticky Spalte (Namen) */
.evaluation-table .sticky-col {
    position: sticky;
    left: 0;
    z-index: 20;
    background-color: var(--background-color);
    border-right: 2px solid var(--border-color);
    min-width: 160px;
    max-width: 200px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

/* Sticky Header oben links (Ecke) */
.evaluation-table thead th.sticky-col {
    z-index: 30;
    background-color: var(--tigers-yellow);
    top: 0;
}

/* Monat Header */
.evaluation-table th.month-header {
    background: var(--bg-table-header);
    border-bottom: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    text-align: center;
    padding: 10px;
}

.evaluation-table th.month-col {
    background: var(--bg-table-header);
    border-bottom: 2px solid var(--border-color);
    border-right: 1px solid var(--border-light);
    text-align: center;
    padding: 8px 4px;
    min-width: 90px; /* Erzwingt Breite */
}

/* Datenzellen */
.evaluation-table td {
    border-bottom: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    padding: 8px;
    white-space: nowrap;
}

.evaluation-table td.cell-amount {
    text-align: right;
    min-width: 90px;
}

.evaluation-table td.cell-empty {
    text-align: center;
    color: var(--text-placeholder);
    min-width: 90px;
}

.evaluation-table .amount {
    text-align: right;
    font-weight: bold;
}

/* Summenzeile Sticky unten */
.evaluation-table tr.sum-row .sticky-col {
    z-index: 25;
    background-color: var(--bg-table-header);
    bottom: 0; 
    border-top: 2px solid var(--border-color);
}

.evaluation-table tr.sum-row td {
    background-color: var(--bg-table-header);
    font-weight: bold;
    border-top: 2px solid var(--border-color);
    text-align: right;
}

/* =========================
   Home-Page
   ========================= */

.home-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--background-color);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-left: 5px solid var(--tigers-yellow);
    box-shadow: var(--card-shadow);
}

.hero-text h2 {
    font-size: clamp(1.3rem, 3vw, 1.75rem);
    color: var(--text-dark) !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 6px;
}

.hero-text .hero-date {
    color: var(--text-placeholder);
    font-size: 0.9rem;
}

.hero-text .hero-date i {
    color: var(--text-placeholder);
}

.hero-badge {
    background: var(--tigers-yellow);
    color: var(--tigers-black);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s;
}

.hero-badge:hover { opacity: 0.85; }

.hero-badge i {
    color: var(--tigers-black);
}

.hero-badge.hero-badge-ghost {
    background: transparent;
    color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
    border: 1.5px solid var(--tigers-yellow);
}

.hero-badge.hero-badge-ghost i { color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); }
.hero-badge.hero-badge-ghost:hover { background: rgba(253,238,23,0.1); opacity: 1; }

.home-section {
    margin-bottom: 20px;
}

.home-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tigers-black);
    margin-bottom: 12px;
}

.home-section-title i {
    color: var(--tigers-black);
    font-size: 1rem;
}

.news-card {
    background: var(--background-color);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-small);
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: var(--card-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.news-card:last-child {
    margin-bottom: 0;
}

.news-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.news-date-badge {
    background: var(--tigers-yellow);
    color: var(--border-color);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

.news-text {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-color);
}

.news-empty {
    color: var(--text-placeholder);
    font-size: 0.9rem;
    font-style: italic;
    padding: 8px 0;
}

.changelog-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.changelog-card {
    background: var(--background-color);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--tigers-yellow);
    border-radius: var(--radius-small);
    padding: 14px 16px;
    box-shadow: var(--card-shadow);
}

.changelog-card .cl-date {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-placeholder);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.changelog-card p {
    font-size: 0.9rem;
    color: var(--text-color);
    margin-bottom: 6px;
    line-height: 1.5;
}

.changelog-card p:last-child {
    margin-bottom: 0;
}

.feedback-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-blue) !important;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.88rem;
    margin-top: 4px;
}

.feedback-link i {
    color: var(--primary-blue);
}

.feedback-link:hover {
    text-decoration: underline;
}

.info-box {
    background: var(--background-color);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-small);
    padding: 16px;
    box-shadow: var(--card-shadow);
}

.info-box p {
    font-size: 0.9rem;
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: 10px;
}

.info-box p:last-of-type {
    margin-bottom: 0;
}

.video-wrap {
    margin-top: 16px;
    max-width: 280px;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-small);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.video-wrap:hover {
    transform: scale(1.03);
}

.video-wrap img {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fdee17;
    font-size: 1.1rem;
    pointer-events: none;
}

.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.video-modal.is-open {
    display: block;
}

.video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.video-modal-content {
    position: relative;
    max-width: 900px;
    width: 90%;
    margin: 5vh auto;
    background: #000;
    border-radius: var(--radius-small);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.video-modal-content video {
    display: block;
    width: 100%;
    max-height: 85vh;
}

.video-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.doc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--background-color);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-small);
    padding: 12px 14px;
    text-decoration: none !important;
    color: var(--text-color) !important;
    box-shadow: var(--card-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.doc-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--primary-blue);
    color: var(--primary-blue) !important;
}

.doc-item i {
    font-size: 1.4rem;
    color: var(--primary-blue);
    flex-shrink: 0;
}

.doc-item span {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    color: inherit;
}


/* =========================
   Login-Page (index.html)
   ========================= */

.login-page {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 16px;
    background: var(--darker-background);
}

.login-card {
    width: min(100%, 420px);
    background: var(--background-color);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    border-top: 4px solid var(--tigers-yellow);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    padding: 36px 32px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.login-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
}

.login-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-title {
    font-size: 1.3rem;
    font-weight: 900;
    text-align: center;
    color: var(--tigers-black);
    letter-spacing: 0.02em;
    margin-bottom: 28px;
    line-height: 1.3;
}

.login-title span {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-placeholder);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

/* Input mit Icon links */
.input-group {
    position: relative;
    width: 100%;
}

.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-placeholder);
    font-size: 0.95rem;
    pointer-events: none;
}

.input-icon i {
    color: var(--text-placeholder);
}

.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    height: 48px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-small);
    background: var(--bg-flaeche);
    color: var(--text-input);
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
    outline: none;
    border-color: var(--tigers-yellow);
    box-shadow: 0 0 0 3px rgba(253,238,23,0.25);
}

/* Login-Button */
.btn-login {
    width: 100%;
    height: 48px;
    background: #111111;
    color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
    border: none;
    border-radius: var(--radius-small);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s ease, transform 0.12s ease;
    margin-top: 4px;
}

.btn-login i {
    color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
    font-size: 1rem;
}

.btn-login:hover {
    background: #1a1a1a;
    transform: translateY(-1px);
}

/* Divider */
.login-divider {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--text-placeholder);
    font-size: 0.82rem;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

/* Registrieren-Button */
.btn-register {
    width: 100%;
    height: 44px;
    background: transparent;
    color: var(--tigers-black);
    border: 2px solid var(--tigers-yellow);
    border-radius: var(--radius-small);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-register i {
    color: var(--tigers-black);
    font-size: 0.95rem;
}

.btn-register:hover {
    background: var(--tigers-yellow);
    color: var(--tigers-black) !important;
}

/* =========================
   Hilfsklassen
   ========================= */
.w-full      { width: 100%; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.font-bold   { font-weight: bold; }
.form-inline { display: inline; }

/* =========================
   Fehler / Alerts
   ========================= */
.text-error { color: var(--danger-red); }

/* =========================
   Auswertungs-Tabellen (Filter-Formular)
   ========================= */
/* Tabelle für Filter-Formulare (Name / Jahr / Monat / Aktionen) */
.filter-form-table {
    width: 100%;
    margin-bottom: 0.5rem;
    border-collapse: collapse;
}
.filter-form-table th:nth-child(1) { width: 40%; text-align: left; }
.filter-form-table th:nth-child(2) { width: 20%; text-align: left; }
.filter-form-table th:nth-child(3) { width: 20%; text-align: left; }
.filter-form-table th:nth-child(4) { width: 20%; text-align: left; }
.filter-form-table td              { padding: 4px; }

/* Sticky Gesamt-Spalte rechts in Auswertungs-Matrizen */
.sticky-amount {
    min-width: 100px;
    z-index: 30;
    position: sticky;
    right: 0;
    background: var(--bg-table-header);
}

/* Zeile "Keine Daten" in Auswertungs-Tabellen */
.no-data-row td {
    text-align: center;
    padding: 20px;
}

/* =========================
   Saison-Auswahl-Liste
   ========================= */
.season-scroll { width: 100%; min-width: 180px; }
.season-scroll option { padding: 4px 6px; }

/* =========================
   Hybrid: Home im Glass-Look (1A)
   Nur .page-home betroffen – Datenseiten bleiben helle Karten.
   Werte 1:1 an mockup-1a-glass-nature.html angeglichen.
   ========================= */

/* Wrapper transparent: Glass-Panels sitzen direkt auf der Stage */
.page-home .content {
    background: transparent;
    border: none;
    box-shadow: none;
    width: min(94%, 1180px);
    padding: 0;
    margin: 24px auto 40px;
}

.page-home .content h1,
.page-home .content h2 {
    color: rgb(var(--ink)) !important;
    border: none !important;
}

/* Hero als kräftiges Glass-Panel (wie .glass in 1A) */
.page-home .home-hero {
    background: rgba(var(--ink) / 0.14) !important;
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    border: 1px solid rgba(var(--ink) / 0.28) !important;
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(15,15,15,0.28);
}

.page-home .hero-text h2 {
    color: rgb(var(--ink)) !important;
    text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}

.page-home .hero-text .hero-date,
.page-home .hero-text .hero-date i {
    color: rgba(var(--ink) / 0.85) !important;
}

/* Abschnitte selbst transparent (Basis-Regel .content > div macht sie sonst hellgrau) */
.page-home .home-section {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* Abschnittstitel: gelber Balken + weiße Großbuchstaben (wie .sec-head) */
.page-home .home-section-title {
    color: rgb(var(--ink)) !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 800;
    padding-left: 14px;
    border-left: 6px solid var(--tigers-yellow);
}

.page-home .home-section-title i {
    color: var(--tigers-yellow-text) !important; -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
}

/* News / Changelog / Info / Doc als kräftige Glass-Karten */
.page-home .news-card,
.page-home .changelog-card,
.page-home .info-box,
.page-home .doc-item {
    background: rgba(var(--ink) / 0.14) !important;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid rgba(var(--ink) / 0.24) !important;
    box-shadow: 0 12px 36px rgba(15,15,15,0.25);
}

.page-home .news-card {
    border-left: 4px solid var(--tigers-yellow) !important;
}

.page-home .changelog-card {
    border-left: 4px solid var(--tigers-yellow) !important;
}

/* Alle Texte auf Glass kräftig weiß */
.page-home .news-text,
.page-home .changelog-card p,
.page-home .changelog-card p strong,
.page-home .info-box p,
.page-home .info-box p strong {
    color: rgba(var(--ink) / 0.92) !important;
}

.page-home .news-empty {
    color: rgba(var(--ink) / 0.7) !important;
}

.page-home .changelog-card .cl-date {
    color: rgba(var(--ink) / 0.7) !important;
}

/* Datum-Badges bleiben gelb mit schwarzem Text (guter Kontrast) */
.page-home .news-date-badge {
    background: var(--tigers-yellow) !important;
    color: var(--tigers-black) !important;
}

/* Doc-Kacheln: weiße Schrift, gelbe Icons */
.page-home .doc-item,
.page-home .doc-item span {
    color: rgba(var(--ink) / 0.92) !important;
}

.page-home .doc-item i {
    color: var(--tigers-yellow-text) !important; -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
}

.page-home .doc-item:hover {
    border-color: var(--tigers-yellow) !important;
    background: rgba(var(--ink) / 0.2) !important;
    color: rgb(var(--ink)) !important;
}

.page-home .doc-item:hover i {
    color: var(--tigers-yellow-text) !important; -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
}

/* Feedback-Links gut lesbar */
.page-home .feedback-link,
.page-home .feedback-link i {
    color: var(--tigers-yellow-text) !important; -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
}

/* Login-Seite: gleiche Stage, weiße Login-Karte bleibt */
.login-page {
    background: transparent;
}

/* =========================================================
   1A Floating Stage Layout (site-weit)
   Alles "schwebt" als zentrierte Spalte auf der Streifen-Stage.
   ========================================================= */

/* Rand rundum, damit die Stage ringsum sichtbar ist */
body {
    padding: calc(env(safe-area-inset-top) + 1.1rem) clamp(0.7rem, 3vw, 1.6rem) calc(env(safe-area-inset-bottom) + 1.3rem);
}

/* Schwebende Glass-Nav als zentrierte Spalte */
nav {
    position: sticky;
    top: 0.8rem;
    z-index: 1000;
    height: auto;
    min-height: var(--navbar-height);
    max-width: 1180px;
    width: 100%;
    margin: 0 auto 1.4rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px;
    overflow: visible;
}

/* Nav-Liste auf volle Höhe strecken, damit das Dropdown bündig unter der
   Leiste sitzt (sonst entsteht eine Lücke und das Menü klappt beim
   Rübergehen zu). */
@media (min-width: 1026px) {
    /* feste Höhe → die Liste/Items füllen die Leiste, Dropdown sitzt bündig */
    nav { height: var(--navbar-height); }
    .dropdown { top: 100%; }
    /* unsichtbare Brücke, damit der Hover beim Wechsel nicht abreißt */
    nav li:hover .dropdown::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -8px;
        height: 8px;
    }
    /* Doppellinie vermeiden: bei geöffnetem Untermenü liegen die gelbe
       border-bottom des Hauptpunkts und die border-top des Dropdowns
       direkt übereinander. Die Linie am Hauptpunkt entfällt dann –
       das Dropdown trägt sie. Spezifität (0,2,2) schlägt die Basisregel
       `nav li:hover > label` (0,1,3). */
    nav .expandable_li:hover > label {
        border-bottom-color: transparent;
    }
}

/* Marke im 1A-Stil (kein gelber Block) */
nav .loginHeader {
    background: transparent;
    border-right: none;
    border-radius: 20px 0 0 20px;
}
nav .TigersLogo img {
    background: #fff;
    border-radius: 10px;
    padding: 4px;
}
nav a.logo {
    display: block;
    align-self: center;
    color: #ffffff;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.15;
    font-size: 1rem;
    white-space: nowrap;
}
nav a.logo b { color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); font-weight: 800; }
nav a.logo span {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}

/* Logout als gelber CTA – bleibt innerhalb des Rahmens */
nav ul a[href="logout.php"] {
    color: var(--tigers-black) !important;
    background: var(--tigers-yellow);
    border-radius: 10px;
    width: calc(100% - 24px);
    margin: 0 12px;
    padding: 9px 14px;
    border-bottom: none;
    box-sizing: border-box;
}
nav ul a[href="logout.php"] i { color: var(--tigers-black) !important; }
nav li:hover > a[href="logout.php"] {
    background: #ffffff;
    border-bottom-color: transparent;
}
/* Desktop: Logout kompakt statt volle Listenbreite */
@media (min-width: 1026px) {
    /* Container-li zentriert den kompakten Button vertikal in der Leiste,
       damit der gelbe Block nicht die volle Bar-Höhe einnimmt. */
    nav li:has(> a[href="logout.php"]) {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    nav ul a[href="logout.php"] {
        width: auto;
        height: auto;
        align-self: center;
        margin: 0 10px;
        padding: 8px 16px;
        border-bottom: none;
    }
}

/* Zentrierte Inhaltsspalte + schwebender Footer */
.content {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto 1.4rem;
}
footer {
    max-width: 1180px;
    width: 100%;
    margin: auto auto 0;
    border-radius: 16px;
}

/* Auf Mobil: Nav-Drawer dunkel ausfüllen, Rundung beibehalten */
@media (max-width: 1025px) {
    nav ul {
        border-radius: 0 0 16px 16px;
        overflow: hidden;
    }
}

/* =========================================================
   1A Hero + Schnellaktionen (nur Home)
   ========================================================= */

/* Hero als zweispaltiger Glass-Block: links Begrüßung, rechts Badges + Aktionen */
.page-home .home-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.4rem;
    padding: 2.2rem 1.9rem 2rem;
}
.page-home .hero-left { flex: 1 1 auto; min-width: 0; }
.page-home .hero-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.1rem;
}
.page-home .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tigers-yellow-text) !important; -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
    margin-bottom: 0.7rem;
}
.page-home .home-hero h2 {
    font-size: 2.9rem;
    font-weight: 900;
    letter-spacing: -1.2px;
    line-height: 1.04;
    color: rgb(var(--ink)) !important;
    text-shadow: 0 2px 14px rgba(0,0,0,0.4);
    margin: 0;
}
@media (max-width: 600px) {
    .page-home .home-hero h2 { font-size: 2rem; }
}
.page-home .home-hero h2 span { color: var(--tigers-yellow-text) !important; -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); font-size: inherit; font-weight: inherit; }
.page-home .hero-sub {
    margin-top: 0.9rem;
    color: rgba(var(--ink) / 0.85) !important;
    font-size: 1rem;
    max-width: 52ch;
}
.page-home .hero-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.9rem;
    flex-wrap: wrap;
}
.page-home .hero-date {
    margin-top: 1rem;
    color: rgba(var(--ink) / 0.8) !important;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}
.page-home .hero-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.page-home .btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 0.8rem 1.5rem;
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    text-decoration: none;
}
.page-home .btn-hero.primary {
    background: var(--tigers-yellow);
    color: var(--tigers-black) !important;
    box-shadow: 0 8px 24px rgba(253,238,23,0.3);
}
.page-home .btn-hero.primary:hover { transform: translateY(-2px); }
.page-home .btn-hero.ghost {
    background: rgba(var(--ink) / 0.16);
    color: rgb(var(--ink)) !important;
    border: 1px solid rgba(var(--ink) / 0.35);
}
.page-home .btn-hero.ghost:hover { background: rgba(var(--ink) / 0.26); }

/* Hero stapelt auf schmalen Screens wieder untereinander (linksbündig) */
@media (max-width: 860px) {
    .page-home .home-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 1.4rem;
    }
    .page-home .hero-right { align-items: flex-start; }
    .page-home .hero-meta,
    .page-home .hero-actions { justify-content: flex-start; }
}

/* Schnellaktionen-Kacheln */
.page-home .quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.page-home .qcard {
    background: rgba(var(--ink) / 0.14);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(var(--ink) / 0.24);
    border-radius: var(--glass-radius);
    padding: 1.4rem;
    color: rgb(var(--ink)) !important;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    text-decoration: none;
}
.page-home .qcard:hover {
    transform: translateY(-4px);
    background: rgba(var(--ink) / 0.2);
    border-color: var(--tigers-yellow);
}
.page-home .qcard-ico {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: var(--tigers-yellow);
    color: var(--tigers-black) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.page-home .qcard h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: rgb(var(--ink)) !important;
    margin: 0;
}
.page-home .qcard p {
    font-size: 0.85rem;
    color: rgba(var(--ink) / 0.8) !important;
    margin: 0;
}
.page-home .qcard-go {
    margin-top: auto;
    font-weight: 800;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--tigers-yellow-text) !important; -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
}
.page-home .qcard-go i { transition: transform 0.25s ease; }
.page-home .qcard:hover .qcard-go i { transform: translateX(4px); }

@media (max-width: 900px) {
    .page-home .quick-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   1A: Nav + Hero zu EINEM Glass-Panel (nur Home, Desktop)
   Wie im Mockup: Leiste und Hero teilen sich ein Panel, getrennt
   durch eine dünne Linie. Datenseiten + Mobile bleiben unverändert.
   ========================================================= */
@media (min-width: 1026px) {
    /* Nav klebt am Hero: nicht sticky, kein Abstand, nur oben gerundet */
    .page-home nav {
        position: static;
        margin: 0 auto;
        border-bottom: 1px solid rgba(255,255,255,0.18);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 20px 60px rgba(15,15,15,0.28);
    }
    /* Content direkt unter die Nav ziehen, gleiche Spaltenbreite */
    .page-home .content {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto 40px;
    }
    /* Hero schließt nahtlos unten an: oben eckig, keine Doppellinie oben */
    .page-home .home-hero {
        border-top: none !important;
        border-radius: 0 0 22px 22px;
        box-shadow: 0 20px 60px rgba(15,15,15,0.28);
    }
}

/* ===== Profil-Avatar mit Rollen-/Konto-Dropdown im Menü =====
   Ersetzt den früheren gelben Rollen-Chip und den reinen Avatar-Link:
   der Umschalter (echter Rechtewechsel via RolleWechseln.php), „Mein Profil“
   und „Logout“ leben jetzt gemeinsam im Avatar-Dropdown (Variante A). */
nav .nav-profile-li { min-width: auto; }
/* nav-Präfix, damit die Basis-Menüregel (nav .expandable_li > label) nicht
   den Text grau färbt. */
nav .nav-profile-toggle {
    gap: 9px !important;
    color: #ffffff !important;
    padding: 0 12px;
}
.nav-profile-av {
    width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
    object-fit: cover; border: 2px solid var(--tigers-yellow);
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: box-shadow 0.15s ease;
}
.nav-profile-ph i { color: var(--tigers-yellow) !important; font-size: 1rem; }
.nav-profile-cur {
    display: inline-flex; align-items: center; gap: 6px;
    color: #ffffff !important; text-transform: uppercase;
    letter-spacing: 0.03em; font-weight: 700; font-size: 0.68rem;
}
.nav-profile-cur > i { color: var(--tigers-yellow) !important; }
.nav-profile-caret { font-size: 0.7rem; color: var(--tigers-yellow) !important; opacity: 0.9; }
nav .nav-profile-li:hover .nav-profile-toggle,
nav .nav-profile-li:hover .nav-profile-cur { color: var(--tigers-yellow) !important; }
.nav-profile-li:hover .nav-profile-av { box-shadow: 0 0 0 3px rgba(253,238,23,0.35); }

/* Dropdown rechtsbündig, sonst läuft es (left:0) über den rechten Rand */
@media (min-width: 1026px) {
    .nav-profile-menu { left: auto; right: 0; width: 250px; }
}

/* Kopfzeile: Name + E-Mail, kein Hover-Highlight */
.nav-profile-menu .npm-head {
    height: auto; cursor: default;
    display: flex; align-items: center; gap: 11px;
    padding: 13px 16px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.npm-head-av {
    width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
    object-fit: cover; border: 2px solid var(--tigers-yellow);
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
}
.npm-head-ph i { color: var(--tigers-yellow); font-size: 1rem; }
.npm-head-text { display: flex; flex-direction: column; min-width: 0; }
.npm-head-name { color: #fff; font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npm-head-mail { color: rgba(255,255,255,0.55); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Abschnitts-Label „Ansicht als“ */
.nav-profile-menu .npm-label {
    height: auto; cursor: default; border-bottom: none;
    padding: 9px 16px 4px;
    font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}

/* Rollen-Einträge (echter Rechtewechsel) */
.nav-profile-menu .npm-role { justify-content: flex-start; gap: 10px; }
.nav-profile-menu .npm-role.active { color: var(--tigers-yellow) !important; font-weight: 700; }
.nav-profile-menu .npm-role.active i { color: var(--tigers-yellow) !important; }
.nav-profile-menu .npm-check { margin-left: auto; color: var(--tigers-yellow) !important; font-size: 0.8rem; flex: 0 0 auto; }
/* WICHTIG (CSS-Falle): der globale Universalselektor * { color: var(--text-color) }
   setzt die (dunkle) Farbe DIREKT auf jedes Element – Vererbung greift dann nicht,
   die inneren <span> würden dunkel und unlesbar. Darum explizit erben lassen. */
.nav-profile-menu .npm-role .npm-role-name { color: inherit; }
/* Lange Rollennamen ("Sportlicher Leiter") in der Leiste zweizeilig umbrechen,
   statt die Navigation in die Breite zu ziehen. max-width wirkt als Umbruch-
   Hinweis: kurze Rollen (Spieler/Trainer/Admin) bleiben einzeilig, nur der
   zweiteilige Name bricht am Leerzeichen. Kein word-break – Wörter bleiben ganz. */
.nav-profile-cur .nav-profile-role {
    color: inherit;
    /* font-size: inherit gegen den Universalselektor (* { font-size: 1rem }):
       der setzt 16px DIREKT auf das <span> – ohne das hier bliebe der
       Rollenname die größte Schrift der ganzen Leiste. Gleiche Falle wie color. */
    font-size: inherit;
    white-space: normal;
    max-width: 8ch;
    line-height: 1.1;
    text-align: left;
}
/* Lange Rollennamen ("Sportlicher Leiter") nicht abschneiden: umbrechen + auto Höhe */
.nav-profile-menu .npm-role-li { height: auto; }
.nav-profile-menu .npm-role {
    height: auto; min-height: 44px;
    padding-top: 9px; padding-bottom: 9px;
    align-items: center;
}
.nav-profile-menu .npm-role .npm-role-name {
    min-width: 0; white-space: normal; line-height: 1.2; text-align: left;
    /* s.o.: ohne font-size: inherit setzt * { font-size: 1rem } hier 16px und
       der Rollenname wäre größer als jeder andere Dropdown-Eintrag (0.83rem). */
    font-size: inherit;
}

/* Trennlinie */
.nav-profile-menu .npm-sep {
    height: 1px !important; padding: 0; margin: 6px 0;
    background: rgba(255,255,255,0.1); border: none;
}

/* Logout NICHT als gelber CTA rendern – die globale a[href="logout.php"]-Regel
   (mit !important) gezielt überschreiben, als normaler Danger-Eintrag. */
.nav-profile-menu .npm-logout {
    background: transparent !important;
    color: #ff6b6b !important;
    width: 100% !important; height: 100% !important;
    margin: 0 !important; padding: 0 18px !important;
    border-radius: 0 !important; box-shadow: none !important;
    justify-content: flex-start !important; align-self: auto !important;
}
.nav-profile-menu .npm-logout i { color: #ff6b6b !important; }
.nav-profile-menu li:hover .npm-logout {
    background: rgba(255,107,107,0.12) !important;
    color: #ff8787 !important;
}
.nav-profile-menu li:hover .npm-logout i { color: #ff8787 !important; }
/* Das Desktop-:has()-Flex des Logout-Containers im Dropdown neutralisieren */
nav .nav-profile-menu li:has(> a[href="logout.php"]) {
    display: block; align-items: initial; justify-content: initial;
}

/* ===== Home-Hero Avatar ===== */
.hero-head { display: flex; align-items: center; gap: 1.1rem; }
.hero-avatar { flex: 0 0 auto; display: inline-flex; text-decoration: none; }
.hero-avatar img,
.hero-avatar .hero-avatar-ph {
    width: 76px; height: 76px; border-radius: 50%;
    object-fit: cover; border: 3px solid var(--tigers-yellow);
    background: rgba(var(--ink) / 0.12);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.hero-avatar .hero-avatar-ph i { color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); font-size: 1.9rem; }

/* ===== Profilbild-Upload (Premium) ===== */
.pb-profil { text-align: center; }
.pb-card {
    max-width: none; margin: 8px auto 0; padding: 0;
    background: transparent; border: none; box-shadow: none;
}
.pb-card .progress-ring {
    width: 150px; height: 150px; margin: 0 auto; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.pb-card .progress-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pb-card .ring-bg { fill: none; stroke: #d9dde3; stroke-width: 8; }
.pb-card .ring-fg {
    fill: none; stroke: var(--tigers-yellow); stroke-width: 8; stroke-linecap: round;
    transition: stroke-dashoffset 0.2s ease;
}
.pb-card .progress-ring.done .ring-fg { stroke: #2ecc71; }
.pb-card .image-box {
    width: 116px; height: 116px; border-radius: 50%; overflow: hidden;
    background: var(--white); display: flex; align-items: center; justify-content: center;
}
.pb-card .image-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-card .image-box #pbPlaceholder { color: #b8bdc7; font-size: 2.4rem; }
.pb-card .progress-badge {
    display: none; position: absolute; bottom: 2px; right: 2px;
    background: #1a1a1a; color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
    border-radius: 999px; padding: 3px 9px; font-size: 0.75rem; font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.pb-card .progress-ring.uploading .progress-badge,
.pb-card .progress-ring.done .progress-badge { display: block; }
.pb-fileinfo {
    margin-top: 14px; display: flex; justify-content: space-between; align-items: center;
    gap: 10px; padding: 8px 12px; background: var(--white); border-radius: 10px;
    font-size: 0.8rem; color: var(--text-color);
}
.pb-fileinfo #pbFileName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-fileinfo .pb-filesize { color: var(--text-placeholder); flex: 0 0 auto; }
.pb-actions { margin-top: 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pb-btn {
    border: none; border-radius: 10px; padding: 9px 14px; font-size: 0.82rem; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: filter 0.15s ease, background 0.15s ease;
}
.pb-btn.primary { background: var(--tigers-yellow); color: #1a1a1a; }
.pb-btn.primary:hover { filter: brightness(0.95); }
.pb-btn.ghost { background: #f0f2f5; color: var(--text-color); }
.pb-btn.ghost:hover { background: #e6e8ec; }
.pb-hint { margin-top: 12px; font-size: 0.78rem; color: var(--text-placeholder); }
.pb-status { margin-top: 8px; font-size: 0.85rem; font-weight: 600; min-height: 1.1em; }
.pb-status.ok { color: #219653; }
.pb-status.err { color: var(--danger-red); }

@media (max-width: 640px) {
    .hero-avatar img, .hero-avatar .hero-avatar-ph { width: 58px; height: 58px; }
    .hero-head { gap: 0.8rem; }
    .nav-avatar-label { display: inline; }
}

/* =========================================================
   Profil-Seite – Sidebar + Glass (Konzept 2)
   Gescoped auf .pf, damit andere Datenseiten unberuehrt bleiben.
   ========================================================= */

.content.pf {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* Globale Element-Selektoren neutralisieren:
   nav { display:flex; height:64px } und section { height:calc(100vh-80px) }
   duerfen die Profil-Sidebar bzw. die Karten NICHT treffen. */
.pf-card {
    height: auto;
    min-height: 0;
}
.pf .pf-nav {
    position: static;
    top: auto;
    height: auto;
    min-height: 0;
    width: auto;
    max-width: none;
    margin: 0;
    display: block;
    overflow: visible;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

/* Basis-Regel .content>div (graue Box) fuer das Grid neutralisieren */
.pf > .pf-grid {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* ---- Seitenleiste ---- */
.pf-side {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pf-idcard,
.pf-nav,
.pf-savebox,
.pf-card {
    background: var(--karte-bg);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid var(--karte-border);
    border-radius: 18px;
    box-shadow: 0 12px 36px var(--glass-shadow);
}

.pf-idcard {
    padding: 20px 16px;
    text-align: center;
}

.pf-avatar {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto;
}

.pf-ring { position: absolute; inset: 0; width: 104px; height: 104px; transform: rotate(-90deg); }
.pf-ring-bg { fill: none; stroke: rgba(var(--ink) / 0.18); stroke-width: 6; }
.pf-ring-fg { fill: none; stroke: var(--tigers-yellow); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }

.pf-avatar-inner {
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--tigers-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pf-avatar-inner img { width: 100%; height: 100%; object-fit: cover; }
.pf-avatar-ph { font-size: 1.9rem; font-weight: 900; color: var(--tigers-black); }

.pf-avatar-cam {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tigers-black);
    border: 2px solid var(--tigers-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pf-avatar-cam i { color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); font-size: 0.8rem; }

.pf-complete { color: var(--tigers-yellow-ink); font-size: 0.78rem; font-weight: 700; margin-top: 10px; }
.pf-name { color: rgb(var(--ink)); font-size: 1.05rem; font-weight: 900; margin-top: 4px; line-height: 1.2; }
.pf-sub { color: rgba(var(--ink) / 0.6); font-size: 0.8rem; margin-top: 3px; }
.pf-sub i { color: var(--tigers-yellow-ink); }

/* ---- Sprungnavigation ---- */
.pf-nav { padding: 8px; }
.pf-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: rgba(var(--ink) / 0.78) !important;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 2px;
}
.pf-nav a i { color: rgba(var(--ink) / 0.5); font-size: 0.95rem; width: 18px; text-align: center; }
.pf-nav a:hover { background: rgba(var(--ink) / 0.08); color: rgb(var(--ink)) !important; }
.pf-nav a.on {
    background: var(--tigers-yellow-12);
    color: var(--tigers-yellow-ink) !important;
    border-left: 3px solid var(--tigers-yellow);
    border-radius: 0 10px 10px 0;
}
.pf-nav a.on i { color: var(--tigers-yellow-ink); }

/* ---- Speichern-Box ---- */
.pf-savebox { padding: 14px; }
.pf-save {
    width: 100%;
    background: var(--tigers-yellow);
    color: var(--tigers-black);
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
}
.pf-save:hover { background: var(--tigers-yellow-hover); transform: translateY(-1px); }
.pf-saved {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #4ade80;
    font-size: 0.82rem;
    margin-top: 10px;
    justify-content: center;
}
.pf-saved i { color: var(--ok-text); }

/* ---- Inhalts-Karten ---- */
.pf-main { display: flex; flex-direction: column; gap: 16px; }
.pf-card { padding: 20px 22px; scroll-margin-top: 90px; }

.pf-sec {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgb(var(--ink)) !important;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    border-left: 5px solid var(--tigers-yellow);
    padding: 0 0 0 12px;
    margin: 0 0 16px;
}
.pf-sec i { color: var(--tigers-yellow-ink); font-size: 0.95rem; }

/* ---- Feld-Raster ---- */
.pf-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}
.pf-field { display: flex; flex-direction: column; gap: 5px; }
.pf-col-2 { grid-column: 1 / -1; }
.pf-lbl {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(var(--ink) / 0.7);
}
.pf-lbl small { text-transform: none; letter-spacing: 0; color: rgba(var(--ink) / 0.45); font-weight: 400; }
.pf-field input,
.pf-field select {
    width: 100%;
    background: #fff;
    color: #111;
    border: 1px solid rgba(var(--ink) / 0.35);
    border-radius: 10px;
    padding: 10px 12px;
}
.pf-field input:focus,
.pf-field select:focus {
    outline: none;
    border-color: var(--tigers-yellow);
    box-shadow: 0 0 0 3px rgba(253, 238, 23, 0.3);
}

/* ---- Nur-Ansicht-Felder (Freigabe, Mannschaft) ---- */
.pf-val {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--ink) / 0.06);
    border: 1px solid rgba(var(--ink) / 0.14);
    border-radius: 10px;
    padding: 10px 12px;
    color: rgb(var(--ink));
    font-size: 0.9rem;
    font-weight: 500;
    min-height: 42px;
}
.pf-val i { color: var(--tigers-yellow-ink); }
/* Handball-Pictogramm im Nur-Ansicht-Feld (frueher inline in profile.php).
   Die Kontur ueber --tigers-yellow-outline ist im Dunkelmodus transparent. */
.pf-ball { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.pf-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: rgba(var(--ink) / 0.55);
    font-size: 0.78rem;
}
.pf-note i { color: rgba(var(--ink) / 0.45); }

/* ---- Profilbild-Karte im Glass-Look ---- */
.pf-card.pb-profil { text-align: left; }
.pf-card .pb-card {
    max-width: 340px;
    margin: 0 auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
.pf-card .pb-fileinfo,
.pf-card .pb-hint { color: rgba(var(--ink) / 0.75); }
.pf-card .pb-filesize { color: rgba(var(--ink) / 0.5); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .pf > .pf-grid { grid-template-columns: 1fr; }
    .pf-side { position: static; }
    .pf-nav { display: none; }
}
@media (max-width: 560px) {
    .pf-fields { grid-template-columns: 1fr; }
    .pf-col-2 { grid-column: auto; }
}

/* =========================================================
   Admin-Konsole – Sidebar + Glass (Scope: .ad)
   Analog zu .pf. Globale nav{}/section{}/.content-Regeln
   werden im .ad-Scope neutralisiert.
   ========================================================= */

.content.ad {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
.content.ad h1,
.content.ad h2 {
    color: rgb(var(--ink));
    border: none;
    padding: 0;
    margin: 0;
    letter-spacing: normal;
    text-align: left;
}

.ad > .ad-grid {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.ad-side,
.ad-card {
    background: var(--karte-bg);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid var(--karte-border);
    border-radius: 18px;
    box-shadow: 0 12px 36px var(--glass-shadow);
}
.ad-card { padding: 20px 22px; height: auto; }
.ad-side { position: sticky; top: 84px; padding: 10px 8px; }

.ad-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 12px;
    color: rgb(var(--ink));
    font-weight: 800;
    font-size: 0.95rem;
}
.ad-brand i { color: var(--tigers-yellow-ink); }

/* Sidebar-Nav: globales nav{} aushebeln */
.ad .ad-nav {
    position: static;
    top: auto;
    height: auto;
    min-height: 0;
    width: auto;
    max-width: none;
    margin: 0;
    display: block;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.ad-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: rgba(var(--ink) / 0.78) !important;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 2px;
    height: auto;
    width: auto;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: none;
    justify-content: flex-start;
}
.ad-nav a i { color: rgba(var(--ink) / 0.5) !important; width: 18px; text-align: center; font-size: 0.95rem; }
.ad-nav a:hover { background: rgba(var(--ink) / 0.08); color: rgb(var(--ink)) !important; }
.ad-nav a.on { background: var(--tigers-yellow-12); color: var(--tigers-yellow-ink) !important; border-left: 3px solid var(--tigers-yellow); border-radius: 0 10px 10px 0; }
.ad-nav a.on i { color: var(--tigers-yellow-ink) !important; }
.ad-b { margin-left: auto; background: var(--warn-solid); color: var(--on-warn-solid); font-size: 0.62rem; font-weight: 800; border-radius: 99px; padding: 1px 7px; }

.ad-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ad-sec { display: flex; align-items: center; gap: 10px; color: rgb(var(--ink)); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-left: 5px solid var(--tigers-yellow); padding: 0 0 0 12px; margin: 0 0 16px; }
.ad-sec i { color: var(--tigers-yellow-ink); }
.ad-lead { color: rgba(var(--ink) / 0.6); font-size: 0.85rem; margin: -8px 0 14px; }
/* Hinweiskasten, z. B. "dir ist noch keine Mannschaft zugeordnet" (2026-07-22).
   Bewusst über --ink statt fester Farben, damit er in Hell und Dunkel trägt. */
/* BEWUSST display:block, nicht flex. Bei flex wird jedes Kind-Element zum
   Flex-Item — ein <em> mitten im Satz bricht dann aus der Zeile heraus und
   landet in einer eigenen Spalte (2026-07-22 beim Screenshot aufgefallen). */
.ad-hinweis { display: block; color: rgba(var(--ink) / 0.85); font-size: 0.85rem; line-height: 1.55; background: rgba(var(--ink) / 0.06); border: 1px solid rgba(var(--ink) / 0.16); border-left: 4px solid var(--tigers-yellow); border-radius: 10px; padding: 12px 14px; margin: 4px 0 14px; }
.ad-hinweis i { color: var(--tigers-yellow-ink); margin-right: 8px; }
.ad-hinweis em { font-style: normal; font-weight: 700; }

/* KPI-Kacheln */
.ad-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ad-stat { padding: 14px 16px; }
.ad-stat .n { font-size: 1.7rem; font-weight: 900; color: rgb(var(--ink)); line-height: 1; }
/* Eingefaerbte Kennzahlen (frueher inline in Admin.php). Ueber --ok-text /
   --warn-text, damit sie im Hellmodus dunkel genug sind – die frueheren
   Literale #4ade80 / #fbbf24 kamen auf Weiss nur auf rund 2:1. */
.ad-stat .n.n-ok { color: var(--ok-text); }
.ad-stat .n.n-warn { color: var(--warn-text); }
.ad-stat.warten { border-color: var(--warn-border); }
.ad-stat .l { font-size: 0.68rem; color: rgba(var(--ink) / 0.6); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px; }

/* Schnellzugriff */
.ad-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ad-qa { display: flex; align-items: center; gap: 11px; padding: 13px 14px; color: rgb(var(--ink)) !important; text-decoration: none; font-size: 0.82rem; font-weight: 500; }
.ad-qa .ic { width: 38px; height: 38px; border-radius: 11px; background: var(--tigers-yellow-16); color: var(--tigers-yellow-ink); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.ad-qa .ad-b { position: static; }

/* Toolbar */
.ad-toolbar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.ad-search { flex: 1; min-width: 150px; display: flex; align-items: center; gap: 8px; background: rgba(var(--ink) / 0.1); border: 1px solid rgba(var(--ink) / 0.2); border-radius: 10px; padding: 0 12px; }
.ad-search i { color: rgba(var(--ink) / 0.5); }
.ad-search input { flex: 1; background: transparent; border: none; color: rgb(var(--ink)); padding: 9px 0; }
.ad-search input:focus { outline: none; box-shadow: none; }
.ad-chip { background: rgba(var(--ink) / 0.08); border: 1px solid rgba(var(--ink) / 0.2); color: rgba(var(--ink) / 0.85) !important; font-size: 0.78rem; border-radius: 10px; padding: 8px 12px; text-decoration: none; }
.ad-chip.on { background: var(--tigers-yellow); color: var(--tigers-black) !important; border-color: var(--tigers-yellow); font-weight: 700; }

/* Tabellen im Glass-Look (globale .content table/th/td aushebeln) */
.ad .ad-table { width: 100%; border-collapse: collapse; border: none; margin: 0; border-radius: 0; overflow: visible; }
.ad .ad-table th { text-align: left; color: rgba(var(--ink) / 0.55); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid rgba(var(--ink) / 0.16); background: transparent; }
.ad .ad-table td { padding: 9px 10px; color: rgba(var(--ink) / 0.92); font-size: 0.8rem; border-bottom: 1px solid rgba(var(--ink) / 0.08); }
.ad .ad-table tr.wait td { background: var(--tigers-yellow-06); }
.ad .ad-table input,
.ad .ad-table select { background: var(--bg-flaeche); color: var(--text-input); border: 1px solid rgba(var(--ink) / 0.35); border-radius: 8px; padding: 6px 8px; }
.ad-av { width: 26px; height: 26px; border-radius: 50%; background: var(--tigers-yellow); color: var(--tigers-black); font-weight: 900; font-size: 0.62rem; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; vertical-align: middle; }
.ad-pill { font-size: 0.62rem; font-weight: 700; border-radius: 99px; padding: 2px 9px; display: inline-block; }
.ad-pill.on { background: var(--ok-bg); color: var(--ok-text); }
.ad-pill.off { background: var(--warn-bg); color: var(--warn-text); }

/* Aktiv-Spalte in der Nutzerverwaltung: schmal halten */
.ad-table .aktiv-sel { width: 62px; padding: 6px 4px; }

/* Nutzer- & Benutzername-Spalte: gleich schmal halten, lange Werte abschneiden (voller Wert im Tooltip) */
.ad-table .ad-truncate { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rollen-Zelle in der Nutzerverwaltung: Dropdown mit Checkboxen */
.ad-rollen-cell { min-width: 120px; }
.ad-rollen-dd { position: relative; }
.ad-rollen-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 120px; background: var(--bg-flaeche); color: var(--text-input); border: 1px solid rgba(var(--ink) / 0.35); border-radius: 8px; padding: 5px 8px; font-size: 0.76rem !important; cursor: pointer; text-align: left; }
.ad-rollen-btn i { font-size: 0.64rem; color: var(--text-placeholder); }
.ad-rollen-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* position: absolute relativ zu .ad-rollen-dd. Fixed scheidet aus, weil die
   Glasflächen (backdrop-filter/transform) einen eigenen Containing-Block für
   fixed erzeugen und das Panel dadurch verrutscht. */
.ad-rollen-panel { display: none; position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; min-width: 190px; background: var(--tigers-black); border: 1px solid var(--tigers-yellow-22); border-radius: 10px; padding: 10px 12px; box-shadow: 0 8px 24px var(--glass-black-30); }
.ad-rollen-dd.open .ad-rollen-panel { display: block; }
/* Zeilen im unteren Bereich klappen nach oben auf, damit nichts abgeschnitten wird. */
.ad-rollen-dd.up .ad-rollen-panel { top: auto; bottom: calc(100% + 4px); }
.ad-rollen-panel .ad-rolle-chk { display: flex; margin-bottom: 6px; }
.ad-rolle-chk { align-items: center; gap: 5px; font-size: 0.76rem !important; color: var(--white); cursor: pointer; white-space: nowrap; }
.ad-rolle-chk input { width: auto !important; margin: 0; accent-color: var(--tigers-yellow); }
.ad-std { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.15); }
/* Panel ist in beiden Themes dunkel (--tigers-black), daher Label immer hell. */
.ad-std span { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: rgba(255,255,255,0.8); }
.ad-std select { padding: 4px 6px !important; font-size: 0.8rem; }
.ad-std select option:disabled { color: #aaa; }

/* Formulare / Felder */
.ad-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.ad-field { display: flex; flex-direction: column; gap: 5px; }
.ad-field .l { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(var(--ink) / 0.7); }
.ad-field input, .ad-field select { background: var(--bg-flaeche); color: var(--text-input); border: 1px solid rgba(var(--ink) / 0.35); border-radius: 10px; padding: 10px 12px; width: 100%; }
.ad-btn-y { background: var(--tigers-yellow); color: var(--tigers-black); border: none; border-radius: 10px; padding: 10px 16px; font-weight: 800; font-size: 0.82rem; cursor: pointer; }
.ad-btn-d { color: var(--err-text) !important; border: 1px solid var(--err-border); background: transparent; border-radius: 8px; padding: 4px 10px; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.ad-msg { color: rgb(var(--ink)); background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: 10px; padding: 10px 12px; font-size: 0.82rem; margin-top: 12px; }
/* Fehlermeldung: dieselbe Kachel, nur in Rot (frueher inline style="color:#f88"). */
.ad-msg.ad-msg-err { color: var(--err-text); background: var(--err-bg); border-color: var(--err-border); }

/* Kommunikation */
.ad-kom { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; }
.ad-kom-item { display: flex; align-items: center; gap: 12px; background: rgba(var(--ink) / 0.06); border: 1px solid rgba(var(--ink) / 0.14); border-radius: 12px; padding: 10px 12px; }
.ad-kom-item .d { color: rgba(var(--ink) / 0.55); font-size: 0.7rem; white-space: nowrap; }
.ad-kom-item .t { color: rgb(var(--ink)); font-size: 0.82rem; flex: 1; }

/* Responsive */
@media (max-width: 900px) {
    .ad > .ad-grid { grid-template-columns: 1fr; }
    .ad-side { position: static; }
    .ad-stats { grid-template-columns: 1fr 1fr; }
    .ad-quick { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   Auswertungen – Report-Blatt (Konzept C) · Scope: .aw
   Analog zu .pf/.ad. Globale nav{}/section{}/.content-Regeln
   werden im .aw-Scope neutralisiert. Font Awesome Icons.
   ========================================================= */

.content.aw { background: transparent; border: none; box-shadow: none; padding: 0; }
.content.aw h1, .content.aw h2 { color: rgb(var(--ink)); border: none; padding: 0; margin: 0; letter-spacing: normal; text-align: left; }

/* Glass-Grundfläche */
.aw-filters, .aw-sheet {
    background: var(--karte-bg);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid var(--karte-border);
    border-radius: 18px;
    box-shadow: 0 12px 36px var(--glass-shadow);
}

/* --- Filterleiste --- */
.aw .aw-filters {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
    padding: 14px 16px; margin: 0 0 16px;
}
.aw-fld { display: flex; flex-direction: column; gap: 5px; }
.aw-fld label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(var(--ink) / 0.6); }
.aw .aw-filters select {
    background: var(--feld-bg); color: rgb(var(--ink)); border: 1px solid rgba(var(--ink) / 0.22);
    border-radius: 9px; padding: 9px 11px; font-size: 0.85rem; min-width: 150px; height: auto;
}
.aw .aw-filters select option { color: #111; }
.aw-grow { flex: 1; }
.aw-seg { display: inline-flex; background: var(--feld-bg); border: 1px solid rgba(var(--ink) / 0.22); border-radius: 10px; padding: 3px; gap: 2px; }
.aw-seg button { padding: 8px 13px; border: none; background: none; border-radius: 7px; font-size: 0.82rem; color: rgba(var(--ink) / 0.66); cursor: pointer; font-family: inherit; }
.aw-seg button.on { background: var(--tigers-yellow); color: var(--tigers-black); font-weight: 700; }
.aw-btn-y { background: var(--tigers-yellow); color: var(--tigers-black); border: none; border-radius: 9px; padding: 10px 15px; font-weight: 800; font-size: 0.82rem; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.aw-btn-g { background: rgba(var(--ink) / 0.08); color: rgb(var(--ink)) !important; border: 1px solid rgba(var(--ink) / 0.22); border-radius: 9px; padding: 10px 15px; font-weight: 500; font-size: 0.82rem; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.aw-btn-g:hover, .aw-btn-y:hover { filter: brightness(1.08); }

/* --- Report-Blatt --- */
.aw .aw-sheet { padding: 22px 24px; margin: 0 0 20px; }
.aw-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 16px; border-bottom: 2px solid var(--tigers-yellow); flex-wrap: wrap; }
.aw-title { font-size: 1.35rem; font-weight: 800; color: rgb(var(--ink)); }
.aw-meta { font-size: 0.72rem; color: rgba(var(--ink) / 0.6); margin-top: 3px; }
.aw-dl { display: flex; gap: 8px; }

/* Person-Kopf mit Foto */
.aw-person-id { display: flex; align-items: center; gap: 14px; }
.aw-photo { width: 58px; height: 58px; border-radius: 14px; overflow: hidden; background: var(--tigers-yellow); color: var(--tigers-black); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.35rem; flex: none; position: relative; }
.aw-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* KPI-Statzeile */
.aw-stats { display: flex; flex-wrap: wrap; gap: 26px; padding: 18px 2px; border-bottom: 1px solid rgba(var(--ink) / 0.10); }
.aw-stat .l { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(var(--ink) / 0.6); }
.aw-stat .v { font-size: 1.4rem; font-weight: 800; margin-top: 4px; color: rgb(var(--ink)); }
.aw-stat .v.y { color: var(--tigers-gold); }

/* Stapeldiagramm */
.aw-chart-wrap { padding: 20px 2px 4px; }
.aw-chart-h { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700; color: rgb(var(--ink)); margin-bottom: 4px; }
.aw-chart-h i { color: var(--tigers-yellow-ink); }
/* Diagramm mit €-Y-Achse (2026-07-17).
   2x2-Grid: [Y-Achse | Plot] / [leer | Monatsbeschriftungen].
   Spalte 1 wird von der Achsenbeschriftung bestimmt (auto), Spalte 2 nimmt den
   Rest. Beschriftungen liegen BEWUSST ausserhalb der Plotflaeche – sonst saesse
   die 0-Linie nicht auf der Balken-Grundlinie. Das Grid haelt Balken und
   Beschriftungen in derselben Spalte; ein Platzhalter mit fester Breite wuerde
   verrutschen, sobald die Betraege mehr Stellen bekommen. */
/* BASIS = altes Verhalten (eine Flex-Reihe). Bewusst als Rückfallebene erhalten:
   AuswertungChart.js hat in Auswertungen.php eine EIGENE ?v=-Query. Wird die
   vergessen, liefert der Browser die alte JS zur neuen CSS. Ohne diese Trennung
   landeten die alten .aw-col dann im 2-Spalten-Grid und das Diagramm zerfiel in
   „Jul|Aug / Sep|Okt" (passiert am 2026-07-17). Jetzt rendert es in dem Fall
   nur ohne Achse – aber korrekt. */
.aw-chart { display: flex; align-items: flex-end; gap: 10px; height: 210px; padding-top: 12px; }

/* Die Klasse setzt AUSSCHLIESSLICH renderStack() aus der neuen JS. Das Grid
   greift dadurch nur, wenn auch .aw-yax/.aw-plot/.aw-labs wirklich existieren. */
.aw-chart.aw-chart-ax {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 210px auto;
    column-gap: 10px;
    align-items: initial;
    padding-top: 12px;
    height: auto;
}
.aw-yax {
    grid-column: 1; grid-row: 1;
    display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
    /* Negative Margins = halbe Zeilenhoehe (0.62rem / 2): dadurch liegen die
       MITTEN der ersten/letzten Beschriftung exakt auf 100 % bzw. 0 % und damit
       auf ihren Gitterlinien – mit reinem space-between waeren sie um eine halbe
       Zeilenhoehe versetzt. */
    margin-top: -0.31rem; margin-bottom: -0.31rem;
}
.aw-yt {
    /* font-size explizit: sonst setzt * { font-size: 1rem } hier 16px
       (dieselbe Falle wie bei .nav-profile-role) – und die Rechnung mit den
       negativen Margins oben haenge davon ab. */
    font-size: 0.62rem; line-height: 1;
    color: rgba(var(--ink) / 0.45);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.aw-plot { grid-column: 2; grid-row: 1; display: flex; align-items: flex-end; gap: 10px; position: relative; min-width: 0; }
.aw-gl {
    position: absolute; left: 0; right: 0; height: 0; pointer-events: none;
    border-top: 1px dashed rgba(var(--ink) / 0.09);
}
.aw-gl.base { border-top: 1px solid rgba(var(--ink) / 0.22); }

.aw-labs { grid-column: 2; grid-row: 2; display: flex; gap: 10px; margin-top: 7px; min-width: 0; }
.aw-labs .aw-lab { flex: 1; text-align: center; min-width: 0; }

.aw-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; position: relative; z-index: 1; min-width: 0; }
.aw-tot { font-size: 0.68rem; font-weight: 700; color: rgb(var(--ink)); }
.aw-stack { width: 62%; max-width: 42px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 0 0; overflow: hidden; transition: height .25s; }
.aw-stack span { display: block; transition: height .25s; }
.aw-lab { font-size: 0.68rem; color: rgba(var(--ink) / 0.6); }
.aw-legend { display: flex; gap: 18px; margin-top: 12px; font-size: 0.76rem; color: rgba(var(--ink) / 0.6); flex-wrap: wrap; }
/* color: inherit gegen den Universalselektor (* { color: var(--text-color) }):
   der Legendentext liegt im inneren <span>, das sonst direkt #333 bekommt
   und auf dem dunklen Diagramm-Hintergrund unlesbar wird. */
.aw-legend span { display: inline-flex; align-items: center; gap: 7px; color: inherit; }
.aw-legend .sw { width: 12px; height: 12px; border-radius: 4px; }
.aw-empty { color: rgba(var(--ink) / 0.6); padding: 18px 2px; }

/* Summen-Kacheln (Person) */
.aw-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 4px; }
.aw-tile { background: rgba(var(--ink) / 0.06); border: 1px solid rgba(var(--ink) / 0.14); border-radius: 13px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.aw-tile .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--tigers-yellow-16); color: var(--tigers-yellow-ink); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: none; }
.aw-tile .l { font-size: 0.74rem; color: rgba(var(--ink) / 0.6); }
.aw-tile .v { font-size: 1.35rem; font-weight: 800; margin-top: 2px; color: rgb(var(--ink)); }
.aw-tile .v small { font-size: 0.72rem; color: rgba(var(--ink) / 0.6); font-weight: 500; }

/* Freibetrag-Karte */
.aw-fb { display: flex; align-items: center; gap: 18px; background: rgba(240,153,123,0.08); border: 1px solid rgba(240,153,123,0.30); border-radius: 13px; padding: 15px 18px; margin: 18px 0 4px; flex-wrap: wrap; }
.aw-fb .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--tax-bg); color: var(--tax-text); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: none; }
.aw-fb .body { flex: 1; min-width: 220px; }
.aw-fb .t { font-size: 0.8rem; font-weight: 700; color: rgb(var(--ink)); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.aw-fb .track { height: 10px; border-radius: 6px; background: rgba(var(--ink) / 0.10); overflow: hidden; }
.aw-fb .track > span { display: block; height: 100%; background: var(--tax-text); }
/* Delta-Spalte und Freibetrags-Ampel (frueher inline in _aw_view_monat.php
   bzw. _aw_view_person.php). Als Schrift muessen die Toene mit dem Theme
   kippen; die Balkenfuellung nutzt denselben Ton. */
.aw .aw-table td.aw-d-auf { color: var(--status-teal-ink); }
.aw .aw-table td.aw-d-ab { color: var(--tax-text); }
.aw .aw-table td.aw-d-neutral { color: rgba(var(--ink) / 0.4); }
.aw-fb .t .aw-fb-hoch { color: var(--tax-text); }
.aw-fb .t .aw-fb-mittel { color: var(--tigers-gold); }
.aw-fb .t .aw-fb-niedrig { color: var(--status-teal-ink); }
.aw-fb .track > span.aw-fb-hoch { background: var(--tax-text); }
.aw-fb .track > span.aw-fb-mittel { background: var(--tigers-yellow); }
.aw-fb .track > span.aw-fb-niedrig { background: var(--status-teal); }
.aw-fb .cap { font-size: 0.72rem; color: rgba(var(--ink) / 0.6); margin-top: 7px; }
.aw-fb .big { font-size: 1.45rem; font-weight: 800; text-align: right; color: rgb(var(--ink)); }
.aw-fb .big small { display: block; font-size: 0.68rem; color: rgba(var(--ink) / 0.6); font-weight: 500; }
.aw-mini-fb { min-width: 150px; }
.aw-mini-fb .track { height: 7px; border-radius: 5px; background: rgba(var(--ink) / 0.10); overflow: hidden; }
.aw-mini-fb .track > span { display: block; height: 100%; }
.aw-mini-fb .cap { font-size: 0.68rem; color: rgba(var(--ink) / 0.6); margin-top: 4px; }

/* Tabelle (globale .content table aushebeln) */
.aw .aw-table { width: 100%; border-collapse: collapse; border: none; margin: 14px 0 0; border-radius: 0; overflow: visible; box-shadow: none; font-size: 0.82rem; }
.aw .aw-table thead th { text-align: left; color: rgba(var(--ink) / 0.5); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; padding: 10px 8px; border-bottom: 1px solid rgba(var(--ink) / 0.16); background: transparent; white-space: nowrap; }
.aw .aw-table td { padding: 10px 8px; color: rgba(var(--ink) / 0.92); border-bottom: 1px solid rgba(var(--ink) / 0.08); }
.aw .aw-table th.num, .aw .aw-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.aw .aw-table tbody tr:hover { background: rgba(var(--ink) / 0.04); }
.aw .aw-table .amount { font-weight: 700; }
.aw .aw-table tfoot td { padding: 12px 8px; font-weight: 800; border-top: 2px solid var(--tigers-yellow-40); }
.aw .aw-table tfoot td.num { color: var(--tigers-gold); }
.aw-who { display: flex; align-items: center; gap: 10px; }
.aw-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: rgba(var(--ink) / 0.12); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.66rem; color: rgb(var(--ink)); flex: none; position: relative; }
.aw-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aw-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 0.66rem; font-weight: 700; }
.aw-pill.team { background: var(--status-blue-bg); color: var(--status-blue); }
.aw-pill.tax { background: var(--tax-bg); color: var(--tax-text); }
.aw-pill.free { background: var(--status-teal-bg); color: var(--status-teal-ink); }

@media (max-width: 720px) {
    .aw-tiles { grid-template-columns: 1fr; }
    .aw .aw-filters select { min-width: 120px; }
}

/* Auswertungs-Tabellen: generische Karten-Transform (<=1024px) im .aw-Scope
   zuruecknehmen, damit auf Tablets die echte (schmale) Tabelle erhalten bleibt. */
@media (max-width: 1024px) {
    .aw .aw-table { display: table; }
    .aw .aw-table thead { display: table-header-group; }
    .aw .aw-table tbody { display: table-row-group; }
    .aw .aw-table tfoot { display: table-footer-group; }
    .aw .aw-table tr { display: table-row; margin: 0; border: 0; border-radius: 0; background: transparent; padding: 0; }
    .aw .aw-table thead th { display: table-cell; }
    .aw .aw-table td { display: table-cell; width: auto; }
    .aw .aw-table td::before { content: none; }
}

/* Auswertungs-Tabellen: auf dem Handy themenkonforme Karten pro Zeile. */
@media (max-width: 640px) {
    .aw .aw-filters { flex-direction: column; align-items: stretch; }
    .aw .aw-fld { width: 100%; }
    .aw .aw-filters select { width: 100%; min-width: 0; }

    .aw .aw-table,
    .aw .aw-table tbody,
    .aw .aw-table tfoot { display: block; }
    .aw .aw-table thead { display: none; }

    .aw .aw-table tr {
        display: block;
        border: 1px solid rgba(var(--ink) / 0.14);
        border-radius: 12px;
        background: rgba(var(--ink) / 0.05);
        padding: 12px 14px;
        margin-bottom: 10px;
    }

    .aw .aw-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        text-align: right;
        padding: 5px 0;
        border: 0;
    }

    .aw .aw-table td[data-label]::before {
        content: attr(data-label);
        text-align: left;
        color: rgba(var(--ink) / 0.55);
        font-weight: 600;
        white-space: nowrap;
    }

    /* Erste Zelle (Monat / Spieler) als Kartenkopf */
    .aw .aw-table tbody td:first-child,
    .aw .aw-table tfoot td:first-child {
        display: block;
        text-align: left;
        font-weight: 800;
        color: rgb(var(--ink));
        font-size: 0.98rem;
        padding: 0 0 8px;
        margin-bottom: 6px;
        border-bottom: 1px solid rgba(var(--ink) / 0.12);
    }
    .aw .aw-table tbody td:first-child::before,
    .aw .aw-table tfoot td:first-child::before { content: none; }

    .aw .aw-table tfoot tr { border-color: rgba(253,238,23,0.45); }
    .aw .aw-table .aw-who { justify-content: flex-start; }
    .aw .aw-table td:empty { display: none; }
}

/* PRINT / PDF – helles Blatt */
@media print {
    body { background: #fff !important; color: #111 !important; }
    nav, .aw-filters, .aw-dl, footer, .footer { display: none !important; }
    .content.aw { padding: 0; }
    .aw .aw-sheet { background: #fff !important; border: none; box-shadow: none; color: #111; padding: 0; }
    .aw-title, .aw-stat .v, .aw-tile .v, .aw-fb .big, .aw-fb .t { color: #111 !important; }
    /* .aw-yt = Y-Achsen-Beschriftung (seit 2026-07-17). Ohne diese Zeile bliebe
       sie im PDF-Export weiss auf weiss – die Person-Ansicht hat einen
       Drucken-Knopf, das faellt sofort auf. */
    .aw-stat .l, .aw-tile .l, .aw-meta, .aw-chart-h, .aw-legend, .aw-fb .cap, .aw-lab, .aw-tot, .aw-yt { color: #333 !important; }
    /* Gitterlinien im Druck sichtbar halten (sonst helles Weiss auf Weiss) */
    .aw-gl { border-top-color: rgba(0,0,0,0.14) !important; }
    .aw-gl.base { border-top-color: rgba(0,0,0,0.4) !important; }
    .aw-stat .v.y, .aw .aw-table tfoot td.num { color: #a07b00 !important; }
    .aw .aw-table td, .aw .aw-table thead th { color: #111 !important; border-color: #ccc !important; }
    .aw-stack, .aw-stack span, .aw-fb .track > span, .aw-mini-fb .track > span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Auswertungen – Umschalter (Pro Person / Pro Monat) */
.aw .aw-rtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.aw .aw-rtab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px; background: rgba(var(--ink) / 0.10); border: 1px solid rgba(var(--ink) / 0.22); color: rgba(var(--ink) / 0.7) !important; font-size: 0.88rem; font-weight: 600; text-decoration: none; backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
.aw .aw-rtab:hover { background: rgba(var(--ink) / 0.16); color: rgb(var(--ink)) !important; }
.aw .aw-rtab i { font-size: 1rem; color: inherit; }
.aw .aw-rtab.on { background: var(--tigers-yellow); color: var(--tigers-black) !important; border-color: var(--tigers-yellow); font-weight: 800; }
.aw .aw-rtab.on i { color: var(--tigers-black) !important; }
@media print { .aw .aw-rtabs { display: none !important; } }

/* FIX 08.07.: globale ".content>div" (graue/weisse Box) im .aw-Scope neutralisieren.
   Direkte Kinder von .content.aw sind sonst helle Kästen -> weisse Schrift unlesbar. */
.content.aw > div { margin: 0; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; }
.content.aw > .aw-rtabs { margin: 0 0 18px; }
.content.aw > .aw-sheet {
    margin: 0 0 20px;
    padding: 22px 24px;
    background: var(--karte-bg);
    border: 1px solid var(--karte-border);
    border-radius: 18px;
    box-shadow: 0 12px 36px var(--glass-shadow);
}

/* FIX 08.07.: globales *{color:var(--text-color)} faerbt den Namen im .aw-who-DIV schwarz
   (Beträge stehen direkt im td und bleiben weiss). Name explizit hell setzen. */
.aw .aw-who { color: rgba(var(--ink) / 0.92); }
.aw .aw-who .aw-av { color: rgb(var(--ink)); }

/* =========================================================================
   Premium-Passwortfeld (password-ui.js) – 08.07.2026
   Wiederverwendbar: Auge, Stärke-Balken, Regel-Chips.
   Basis = heller Karten-Hintergrund (register.html); Scopes .pf/.ad = dunkel.
   ========================================================================= */
.pwui-wrap { position: relative; width: 100%; display: block; }
.pwui-input { padding-right: 44px !important; }
/* Der relativ positionierte .pwui-wrap liegt im DOM nach dem linken Feld-Icon
   (z. B. Schloss in register.html) und würde es sonst mit dem weißen Input
   übermalen. Icon in eine höhere Paint-Ebene heben. */
.input-group .input-icon { z-index: 2; }
.pwui-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 0; cursor: pointer;
    color: #6b7280; font-size: 0.95rem; border-radius: 6px; line-height: 1;
    transition: color 0.15s ease, background 0.15s ease;
}
.pwui-toggle:hover  { color: #111; background: rgba(0,0,0,0.06); }
.pwui-toggle:focus-visible { outline: 2px solid var(--tigers-yellow); outline-offset: 1px; }

.pwui-meter { margin-top: 10px; display: none; }
.pwui-meter.show { display: block; }

.pwui-bar {
    height: 6px; border-radius: 999px; overflow: hidden;
    background: #e5e7eb;
}
.pwui-bar-fill {
    display: block; height: 100%; width: 0; border-radius: 999px;
    background: #ef4444;
    transition: width 0.25s ease, background 0.25s ease;
}
.pwui-meter[data-level="weak"]   .pwui-bar-fill { background: #ef4444; }
.pwui-meter[data-level="medium"] .pwui-bar-fill { background: #f59e0b; }
.pwui-meter[data-level="strong"] .pwui-bar-fill { background: #22c55e; }

.pwui-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 6px; font-size: 0.72rem;
}
.pwui-strength-label { color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
.pwui-strength-val   { font-weight: 700; }
.pwui-meter[data-level="weak"]   .pwui-strength-val { color: #ef4444; }
.pwui-meter[data-level="medium"] .pwui-strength-val { color: #d97706; }
.pwui-meter[data-level="strong"] .pwui-strength-val { color: #16a34a; }

.pwui-rules {
    list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
    margin: 9px 0 0; padding: 0;
}
.pwui-rules li {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.7rem; padding: 3px 9px; border-radius: 999px;
    color: #8a8f98; background: #f0f2f5;
    transition: color 0.2s ease, background 0.2s ease;
}
.pwui-rules li i { font-size: 0.62rem; }
.pwui-rules li.ok { color: #16a34a; background: rgba(34,197,94,0.13); }

/* Dunkle Karten (Profil .pf / Admin .ad): helle Schrift + Kontraste */
.pf .pwui-strength-label,
.ad .pwui-strength-label { color: rgba(var(--ink) / 0.6); }
.pf .pwui-bar,
.ad .pwui-bar { background: rgba(var(--ink) / 0.14); }
.pf .pwui-rules li,
.ad .pwui-rules li { color: rgba(var(--ink) / 0.55); background: rgba(var(--ink) / 0.08); }
.pf .pwui-rules li.ok,
.ad .pwui-rules li.ok { color: #4ade80; background: rgba(74,222,128,0.16); }
.pf .pwui-meter[data-level="medium"] .pwui-strength-val,
.ad .pwui-meter[data-level="medium"] .pwui-strength-val { color: #fbbf24; }
.pf .pwui-meter[data-level="strong"] .pwui-strength-val,
.ad .pwui-meter[data-level="strong"] .pwui-strength-val { color: #4ade80; }

/* ===== Hallenbelegung (hb-) =====================================
   Nutzt das bestehende Design-System wieder:
   - Tokens: var(--tigers-yellow), var(--danger-red), var(--radius)
   - Glass-Bühne + .content-Scope wie .content.aw (Auswertungen)
   - Kachel-, Tabellen-, Button- und Tab-Muster analog .aw-tile,
     .aw-table, .aw-btn und .aw-rtab, gleiche rgba-Glass-Werte
   ================================================================ */

/* Dunkle Glass-Bühne: globalen hellen .content-Kasten neutralisieren
   (1:1 wie .content.aw) */
.content.hb { background: transparent; border: none; box-shadow: none; padding: 0; }
.content.hb h1, .content.hb h2, .content.hb h3 { color: rgb(var(--ink)); border: none; padding: 0; margin: 0 0 4px; letter-spacing: normal; text-align: left; }
/* Direkte Kinder von .content sind global helle Kästen -> neutralisieren (1:1 wie .content.aw > div) */
.content.hb > div { margin: 0 0 18px; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; }

/* Dashboard-Raster */
.hb-dashboard { display: grid; gap: 18px; }
.hb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }

/* KPI-Kachel = .aw-tile-Rezept */
.hb-tile {
    background: var(--glass-06);
    border: 1px solid var(--glass-bg-strong);
    border-radius: 13px;
    padding: 16px 18px;
}
.hb-tile .l { font-size: 0.74rem; color: var(--glass-60); }
.hb-tile-num { font-size: 1.8rem; font-weight: 800; color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); margin-top: 2px; }

/* Inhalts-Karte = .aw-sheet-Glasrezept */
.hb-card {
    background: var(--glass-12);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid var(--glass-22);
    border-radius: 18px;
    box-shadow: 0 12px 36px var(--glass-shadow);
    padding: 22px 24px;
}
.hb-card h2, .hb-card h3 { color: rgb(var(--ink)); }

/* Belegungs-Raster (Zeit × Halle) – Matrix, daher mit Zellrahmen */
.hb-grid { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.85rem; }
.hb-grid th { background: var(--tigers-yellow); color: var(--tigers-black); padding: 7px 9px; text-align: left; font-weight: 800; }
.hb-grid td { border: 1px solid var(--glass-12); padding: 7px 9px; color: var(--on-glass); }
.hb-grid .hb-zeit { color: var(--glass-60); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Verweis auf den gespeicherten Trainingsplan einer Trainingszeit. */
.hb-grid a.hb-planlink { color: var(--tigers-yellow-text); text-decoration: none; font-weight: 700; }
.hb-grid a.hb-planlink:hover { text-decoration: underline; }
.hb-grid td.hb-planleer { color: var(--glass-40); }

/* Zellen-Status: gleiche Tints wie .aw-pill.team / .aw-pill.free */
.hb-belegt { background: var(--status-blue-bg); color: var(--status-blue); font-weight: 700; }
.hb-frei   { background: var(--status-teal-bg); color: var(--status-teal-ink); font-style: italic; }

.hb-woche-tag { color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); margin: 16px 0 4px; }

/* Ansicht-Umschalter = .aw-rtab-Muster */
.hb-viewnav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.hb-viewnav a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-22);
    color: var(--glass-70); font-size: 0.88rem; font-weight: 600; text-decoration: none;
    backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.hb-viewnav a:hover { background: var(--glass-16); color: rgb(var(--ink)); }
.hb-viewnav a.active { background: var(--tigers-yellow); color: var(--tigers-nav-bg); font-weight: 800; }

/* Selects in Zuordnungs-/Import-Karten = .aw-filters select-Rezept */
.hb-halle-sel, .hb-card select {
    background: var(--glass-black-30); color: rgb(var(--ink)); border: 1px solid var(--glass-22);
    border-radius: 9px; padding: 9px 11px; font-size: 0.85rem;
}
.hb-halle-sel option, .hb-card select option { color: var(--tigers-nav-bg); }

/* Buttons: Geometrie wie .aw-btn-*, semantische Farben */
.hb-btn {
    border: 1px solid var(--glass-22); background: var(--glass-08); color: rgb(var(--ink));
    border-radius: 9px; padding: 10px 15px; font-weight: 600; font-size: 0.82rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
.hb-btn-y   { background: var(--tigers-yellow); color: var(--tigers-black); border: none; font-weight: 800; }
.hb-btn-ok  { background: var(--status-teal); color: var(--status-teal-text); border: none; font-weight: 800; }
.hb-btn-warn{ background: var(--danger-red); color: var(--white); border: none; font-weight: 800; }
.hb-btn:hover, .hb-btn-y:hover, .hb-btn-ok:hover, .hb-btn-warn:hover { filter: brightness(1.08); }
/* Die hb-Buttons sind teils <a> (Wochen-Navigation). Die globalen Linkregeln
   a:visited / a:hover (Klasse+Typ = staerker als die reine Klasse .hb-btn)
   haben deren Text nach dem ersten Klick auf --text-color (#333) gezogen –
   im Dunkelmodus praktisch unlesbar (2026-08-01). Farbe je Zustand fixieren. */
a.hb-btn, a.hb-btn:visited, a.hb-btn:hover, a.hb-btn:focus-visible { color: rgb(var(--ink)); }
a.hb-btn-y, a.hb-btn-y:visited, a.hb-btn-y:hover, a.hb-btn-y:focus-visible { color: var(--tigers-black); }
a.hb-btn-ok, a.hb-btn-ok:visited, a.hb-btn-ok:hover, a.hb-btn-ok:focus-visible { color: var(--status-teal-text); }
a.hb-btn-warn, a.hb-btn-warn:visited, a.hb-btn-warn:hover, a.hb-btn-warn:focus-visible { color: var(--white); }

@media (max-width: 640px) {
    .hb-tiles { grid-template-columns: 1fr 1fr; }
    .hb-card { padding: 16px; }
    .hb-grid { font-size: 0.78rem; }
}

/* PRINT / PDF – helles Blatt (analog .aw print) */
@media print {
    body { background: #fff !important; color: #111 !important; }
    nav, footer, .footer, .hb-viewnav, .toggle_button, .hb-btn, .hb-btn-y, .hb-btn-ok, .hb-btn-warn,
    .hb-imp-aktionen { display: none !important; }
    .content.hb { padding: 0; }
    .content.hb h1, .content.hb h2, .content.hb h3, .hb-woche-tag { color: #111 !important; }
    .hb-card { background: #fff !important; border: none; box-shadow: none; padding: 0; }
    .hb-grid th { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .hb-grid td { border: 1px solid #999 !important; color: #111 !important; }
    .hb-belegt { background: #e8e8e8 !important; color: #111 !important; }
    .hb-frei { background: #fff !important; color: #333 !important; }
}

/* hb-Scope: globale .content-Tabellen-/Select-Regeln aushebeln (wie .aw .aw-table) */
.content.hb .hb-grid { border: none; border-radius: 0; overflow: visible; margin-bottom: 10px; }
.content.hb .hb-grid td { border: 1px solid var(--glass-12); }
.content.hb .hb-grid .hb-belegt { background: var(--status-blue-bg); }
.content.hb .hb-grid .hb-frei { background: var(--status-teal-bg); }
.content.hb select { background: var(--feld-bg); color: rgb(var(--ink)); border: 1px solid var(--glass-22); border-radius: 9px; padding: 9px 11px; font-size: 0.85rem; }
.content.hb select option { color: var(--tigers-nav-bg); }

/* Trainer-Zuordnung: Chips + Add-Dropdown, Mannschafts-Verwaltung */
.hb-dot { display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 8px; vertical-align: middle; }
.hb-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.hb-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--tigers-yellow-16); border: 1px solid var(--tigers-yellow-40); color: rgb(var(--ink)); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 0.82rem; font-weight: 600; }
.hb-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; border-radius: 50%; background: var(--glass-12); color: var(--glass-75); cursor: pointer; font-size: 0.72rem; line-height: 1; padding: 0; transition: background .15s, color .15s; }
.hb-chip-x:hover { background: var(--danger-red, #d9534f); color: rgb(var(--ink)); }
.content.hb .hb-trainer-add { padding: 6px 10px; font-size: 0.82rem; }
.content.hb .hb-team-name { width: 100%; background: var(--feld-bg); color: rgb(var(--ink)); border: 1px solid var(--glass-22); border-radius: 9px; padding: 9px 11px; font-size: 0.85rem; box-sizing: border-box; }
.content.hb .hb-team-name::placeholder { color: var(--glass-40); }
.content.hb .hb-team-name:focus { outline: none; border-color: var(--tigers-yellow, #fdee17); }

/* ---- CSV-Import: Vorschau, Ergebnis, Sicherungen (2026-08-01) --------------
   Ersetzt das frühere Inline-CSS dieser Seiten. Alle Farben über die Theme-
   Variablen, damit hell/dunkel und der Farb-Editor weiter greifen. */
.hb-imp-form { margin-top: 12px; }
.hb-imp-aktionen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.hb-imp-info { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 0.76rem; color: var(--glass-60); }
.hb-imp-info i { margin-top: 2px; }

.hb-imp-status { margin-top: 10px; font-weight: 800; display: flex; gap: 8px; align-items: flex-start; }
.hb-imp-status i { margin-top: 2px; }
.content.hb .hb-imp-ok      { color: var(--status-teal-ink); }
.content.hb .hb-imp-warn    { color: var(--tigers-yellow-text); }
.content.hb .hb-imp-err     { color: var(--danger-red); }
.content.hb .hb-imp-neutral { color: var(--glass-60); font-weight: 600; }

.content.hb .hb-imp-h  { margin: 20px 0 6px; font-size: 1rem; color: var(--tigers-yellow-text); }
.content.hb .hb-imp-h4 { margin: 0 0 6px; font-size: 0.82rem; font-weight: 700; color: var(--glass-70); }
.hb-imp-datei { margin-top: 8px; font-size: 0.84rem; color: var(--glass-70); }
.hb-imp-leer  { font-size: 0.82rem; color: var(--glass-40); font-style: italic; }

.hb-imp-liste { margin: 6px 0 0; padding-left: 20px; font-size: 0.84rem; line-height: 1.6; color: var(--glass-75); }
.hb-imp-liste li { margin: 0 0 2px; }
.content.hb .hb-imp-weg li { color: var(--danger-red); }
.content.hb .hb-imp-neu li { color: var(--status-teal-ink); }

/* Bilanz-/Sicherungstabelle: Liste, daher nur Trennlinien statt Zellrahmen */
.content.hb .hb-imp-tabelle { width: 100%; border-collapse: collapse; margin: 12px 0 4px; font-size: 0.84rem; border: none; border-radius: 0; }
.content.hb .hb-imp-tabelle th { background: var(--glass-12); color: rgb(var(--ink)); padding: 8px 10px; text-align: left; font-weight: 700; }
.content.hb .hb-imp-tabelle td { padding: 8px 10px; border: none; border-bottom: 1px solid var(--glass-12); color: var(--on-glass); vertical-align: middle; }
.content.hb .hb-imp-tabelle tfoot td { font-weight: 800; border-top: 1px solid var(--glass-22); border-bottom: none; }
.content.hb .hb-imp-minus { color: var(--danger-red); font-weight: 800; }
.content.hb .hb-imp-plus  { color: var(--status-teal-ink); font-weight: 800; }
.hb-imp-zeilenaktion { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hb-imp-zeilenaktion form { margin: 0; }

/* Gegenüberstellung "wird gelöscht" | "wird angelegt" */
.hb-imp-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 4px; }
@media (max-width: 640px) {
    .hb-imp-spalten { grid-template-columns: 1fr; gap: 12px; }
    .content.hb .hb-imp-tabelle { font-size: 0.78rem; }
}
.hb-team-neu td { border-top: 2px solid var(--tigers-yellow-35) !important; }

/* =====================================================================
 * SPIELERORGANISATION (so-*) – Liste + Spielerprofil im Register-Layout
 * ===================================================================== */

/* ACHTUNG – globales `* { color: var(--text-color) }` (ganz oben in dieser
 * Datei): der Universalselektor setzt die Farbe auf JEDEM Element direkt.
 * Ein direkt gesetzter Wert schlägt Vererbung unabhängig von der Spezifität
 * – Kindelemente (b, em, Icons) in dunklen Karten werden daher #333 und sind
 * unsichtbar, obwohl die Zelle weiß ist. Sie müssen explizit zurückgeholt
 * werden. Deshalb stehen im übrigen CSS an vielen Stellen !important-Farben.
 * .ad-sec i ist bewusst NICHT dabei – das ist der gelbe Abschnitts-Icon. */
.content.ad .so-tab td b,
.content.ad .so-pane .ad-lead em,
.so-tabs button i,
.so-btn i,
.so-person b,
.so-team,
.so-team em,
.so-cnt { color: inherit; }

/* Zähler rechts in der Abschnitts-Überschrift */
.ad-sec .cnt { margin-left: auto; font-size: 0.68rem; color: var(--glass-60);
    letter-spacing: 0; text-transform: none; font-weight: 500; }

/* --- Buttons / Felder ------------------------------------------------ */
.so-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--tigers-yellow, #fdee17);
    color: var(--tigers-black); border: none; border-radius: 8px; padding: 8px 14px; font-size: 0.78rem;
    font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.so-btn:hover { filter: brightness(1.08); }
.so-btn-ghost { background: var(--glass-08); border: 1px solid var(--glass-22);
    color: rgb(var(--ink)) !important; font-weight: 500; }
.so-btn-mini { padding: 5px 10px; font-size: 0.72rem; }
.so-btn-del { background: var(--glass-08); border: 1px solid var(--glass-22);
    color: var(--glass-75); padding: 6px 9px; }
.so-btn-del:hover { background: var(--danger-red-tint); color: rgb(var(--ink)); filter: none; }

.so-inp { background: var(--glass-bg); border: 1px solid var(--glass-22);
    border-radius: 8px; color: rgb(var(--ink)); padding: 7px 10px; font-size: 0.8rem; font-family: inherit;
    width: 100%; box-sizing: border-box; }
.so-inp:focus { outline: none; border-color: var(--tigers-yellow, #fdee17); }
.so-inp[readonly] { background: var(--glass-06); color: var(--glass-60); }
.so-inp option { background: var(--tigers-black); color: var(--white); }
.so-num { text-align: right; font-variant-numeric: tabular-nums; }
.so-sel { background: var(--glass-bg); border: 1px solid var(--glass-22);
    border-radius: 10px; color: rgb(var(--ink)); padding: 8px 11px; font-size: 0.8rem; font-family: inherit; }
.so-sel option { background: var(--tigers-black); color: var(--white); }

.so-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.so-fld label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--glass-45); font-weight: 700; }
.so-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }

/* --- Liste ----------------------------------------------------------- */
.so-person { display: flex; align-items: center; color: rgb(var(--ink)) !important; text-decoration: none; }
.so-person:hover b { color: var(--tigers-yellow-text, #fdee17); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); }
.so-liste-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; margin-right: 8px;
    vertical-align: middle; flex-shrink: 0; border: 1px solid var(--glass-22); }
.so-team { display: inline-block; background: var(--glass-08); border: 1px solid var(--glass-border);
    border-radius: 99px; padding: 3px 10px; font-size: 0.74rem; margin: 2px 4px 2px 0; }
.so-team em { font-style: normal; color: var(--tigers-yellow-text, #fdee17) !important; -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); font-size: 0.66rem;
    margin-left: 5px; font-weight: 700; }
.so-leer { color: var(--glass-40); font-size: 0.78rem; }

/* --- Profilkopf ------------------------------------------------------ */
.so-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.so-av { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.so-av-ph { background: var(--tigers-yellow, #fdee17); color: var(--tigers-black); font-weight: 900;
    font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
.so-head-txt { min-width: 0; }
.so-head-txt h2 { margin: 0 !important; font-size: 1.3rem !important; }
.so-meta { color: var(--glass-60); font-size: 0.78rem; margin-top: 3px; }
.so-rollen { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.so-rollen .ad-pill i { margin-right: 4px; }
.so-fix { background: var(--tigers-yellow-16); color: var(--tigers-yellow-text, #fdee17); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
    border-radius: 99px; padding: 2px 10px; font-size: 0.66rem; font-weight: 800; }
.so-head-right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- Reiter ---------------------------------------------------------- */
.so-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--glass-16);
    margin: 18px 0 0; flex-wrap: wrap; }
.so-tabs button { background: none; border: none; color: var(--glass-60); font-family: inherit;
    font-size: 0.83rem; padding: 11px 15px; cursor: pointer; border-bottom: 3px solid transparent;
    margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; }
.so-tabs button:hover { color: rgb(var(--ink)); }
.so-tabs button.on { color: var(--tigers-yellow-text, #fdee17); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); border-bottom-color: var(--tigers-yellow, #fdee17);
    font-weight: 700; }
.so-tabs button i { font-size: 0.8rem; }
.so-cnt { background: var(--glass-bg-strong); border-radius: 99px; padding: 1px 7px;
    font-size: 0.62rem; font-weight: 800; }
.so-tabs button.on .so-cnt { background: var(--tigers-yellow-22); }

.so-pane { display: none; padding-top: 18px; }
.so-pane.on { display: block; }

/* --- Tabellen im Profil ---------------------------------------------- */
.content.ad table.so-tab { border: none; border-radius: 0; margin-bottom: 0; }
.content.ad .so-tab th { background: transparent; color: var(--glass-45); font-size: 0.66rem;
    letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; padding: 0 8px 8px;
    border-bottom: 1px solid var(--glass-16); }
.content.ad .so-tab td { padding: 9px 8px; border-bottom: 1px solid var(--glass-08);
    color: var(--glass-90); vertical-align: middle; }
.content.ad .so-tab tr:last-child td { border-bottom: none; }
.so-tab .so-empty td { color: var(--glass-40); font-size: 0.8rem; padding: 16px 8px; }
.so-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 7px;
    vertical-align: middle; }
.so-v-pill { margin-left: 7px; vertical-align: middle; }

/* --- Anlege-Leiste --------------------------------------------------- */
.so-add { background: var(--tigers-yellow-06); border: 1px dashed var(--tigers-yellow-35);
    border-radius: 12px; padding: 12px; margin-top: 14px; display: grid; gap: 10px;
    grid-template-columns: 1.4fr 1fr 0.9fr 0.9fr auto; align-items: end; }
.so-add-v { grid-template-columns: 1.6fr 1fr 0.9fr 0.9fr auto; }
.so-add-w { grid-template-columns: 1fr 1.3fr 0.9fr 0.9fr 0.7fr 1fr auto; }
/* Zuordnung anlegen: seit 01.08.2026 mit eigener Saison-Spalte, weil die
   Saison-Auswahl oben rechts nur noch filtert und leer sein darf. */
.so-add-z { grid-template-columns: 1.4fr 0.9fr 1fr 0.9fr 0.9fr auto; }

/* --- Summe / Hinweise / Meldung -------------------------------------- */
.so-summe { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding: 12px 14px; border-top: 1px solid var(--glass-22);
    font-size: 0.86rem; }
.so-summe span { color: var(--glass-60); font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.05em; font-weight: 700; }
.so-summe b { color: rgb(var(--ink)); font-size: 1.05rem; font-weight: 900; }
.so-hint { margin: 12px 0 0 !important; font-size: 0.75rem !important; }

.so-msg { display: none; margin-top: 14px; border-radius: 10px; padding: 9px 13px; font-size: 0.8rem;
    font-weight: 600; }
.so-msg.on { display: block; }
.so-msg.ok { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); }
.so-msg.err { background: var(--err-bg); color: var(--err-text); border: 1px solid var(--err-border); }

@media (max-width: 900px) {
    .so-add, .so-add-v, .so-add-w, .so-add-wi, .so-add-z { grid-template-columns: 1fr 1fr; }
    .so-grid2 { grid-template-columns: 1fr; }
    .so-head-right { margin-left: 0; width: 100%; }
}

/* --- Vertragsinhalte am Vertrag (Accordion, 01.08.2026) ---------------
   Loest den frueheren Reiter "Vertragswerte" ab: die Werte haengen jetzt
   direkt an ihrem Vertrag und werden per Button aufgeklappt. Die
   Detail-Zeile ist eine normale <tr> in derselben Tabelle, deshalb
   display:table-row (nicht block) beim Aufklappen.
   --------------------------------------------------------------------- */
.so-doc-cell { display: flex; align-items: center; gap: 6px; }
.so-doc-form { display: inline-flex; }
.so-doc-form label.so-btn { cursor: pointer; margin: 0; }

/* Felder fuellen ihre Spalte, sonst bleiben Bezeichnung und Art schmal,
   waehrend rechts Platz verschenkt wird. */
.content.ad .so-tab .so-inp { width: 100%; }
/* Feste Spaltenbreiten: die Breiten aus <th> gelten exakt, der Rest geht an
   die Bezeichnung. Ohne das verteilt der Browser nach Inhalt. */
.content.ad table.so-tab-vertraege { table-layout: fixed; width: 100%; }
/* Datumsfelder: der native Kalender-Knopf frisst Platz, deshalb hier schmaler
   gepolstert – sonst wird "01.07.2026" abgeschnitten. */
.content.ad .so-tab input[type="date"].so-inp { padding-left: 7px; padding-right: 4px; }

.so-akt-cell { text-align: right; white-space: nowrap; }
.so-akt-cell .so-btn + .so-btn { margin-left: 6px; }
.so-btn-inhalte { padding-left: 9px; padding-right: 9px; }

.so-v-details-row { display: none; }
.so-v-details-row.on { display: table-row; }
.content.ad .so-v-details-row > td { padding: 4px 8px 14px; border-bottom: 1px solid var(--glass-08); }

.so-v-details-box { border: 1px solid var(--glass-16); border-radius: 12px;
    padding: 12px 14px; background: var(--glass-06); }
.so-v-details-kopf { display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 8px; font-weight: 700; font-size: 0.86rem; }
/* Farben hier bewusst auf den <span> selbst und nicht auf den Eltern-Container:
   `* { color: var(--text-color) }` weiter oben schlaegt sonst die Vererbung. */
.so-v-details-titel { color: rgb(var(--ink)); }
.so-v-details-titel i { color: var(--tigers-yellow-text); margin-right: 6px; }
.so-v-details-id { font-weight: 600; font-size: 0.72rem; color: var(--glass-45);
    text-transform: uppercase; letter-spacing: 0.05em; }

/* Art-Zelle: der Farbpunkt darf die Auswahl nicht nach rechts schieben,
   sonst steht sie nicht mehr unter der Spaltenueberschrift. */
.content.ad .so-tab-werte td.so-w-art-td { display: flex; align-items: center; gap: 7px; }
/* Ueberschrift um Punkt + Abstand einruecken, damit sie ueber dem Feld steht. */
.content.ad .so-tab-werte th.so-w-art-th { padding-left: 23px; }
.so-tab-werte td.so-w-art-td .so-dot { margin-right: 0; flex: 0 0 auto; }
.so-tab-werte td.so-w-art-td .so-inp { flex: 1 1 auto; min-width: 0; }

/* Anlege-Leiste innerhalb des Accordions bzw. unter den freien Werten:
   wie .so-add-w, aber ohne die Spalte "Vertrag". */
.so-add-wi { grid-template-columns: 1.2fr 0.9fr 0.9fr 0.7fr 1fr auto; }

.so-frei { margin-top: 26px; padding-top: 6px; border-top: 1px solid var(--glass-16); }

/* ===== News: Titel/Body-Struktur (DB-basiert) + „Alle News"-Button ===== */
.changelog-card .cl-title {
    font-size: 0.95rem; font-weight: 800; color: var(--text-color);
    margin-bottom: 4px; line-height: 1.35;
}
.changelog-card .cl-body { font-size: 0.9rem; color: var(--text-color); line-height: 1.5; }
.changelog-card .cl-body p { margin: 0 0 6px; }
.changelog-card .cl-body p:last-child { margin-bottom: 0; }
.changelog-card .cl-body ul,
.changelog-card .cl-body ol { margin: 4px 0 6px 1.25em; padding: 0; }
.changelog-card .cl-body li { margin: 2px 0; }

/* Glass-Startseite: Titel + Body kräftig weiß (wie zuvor die <p>) */
.page-home .changelog-card .cl-title,
.page-home .changelog-card .cl-body,
.page-home .changelog-card .cl-body strong,
.page-home .changelog-card .cl-body em { color: var(--on-glass) !important; }

/* „Alle News" / Zurück – gelber Button */
.changelog-more {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 12px; padding: 9px 16px;
    background: var(--tigers-yellow); color: var(--tigers-black);
    border-radius: 10px; font-weight: 700; font-size: 0.88rem;
    text-decoration: none; border: none; cursor: pointer;
}
.changelog-more:hover { filter: brightness(0.95); }
.changelog-more i { color: var(--tigers-black); }

/* ===== Admin: News-Editor (RTE) + Liste ===== */
.ad-rte-toolbar { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.ad-rte-toolbar button {
    border: 1px solid var(--border-light); background: var(--white);
    border-radius: 6px; padding: 6px 11px; cursor: pointer;
    font-size: 0.85rem; color: var(--text-color); min-width: 34px;
}
.ad-rte-toolbar button:hover { background: var(--darker-background); }
.ad-rte {
    min-height: 130px; border: 1px solid var(--border-light); border-radius: 8px;
    padding: 10px 12px; background: var(--white); color: var(--text-color);
    font-size: 0.9rem; line-height: 1.5;
}
.ad-rte:focus { outline: 2px solid var(--tigers-yellow); }
.ad-rte ul, .ad-rte ol { margin: 4px 0 6px 1.25em; }

.ad-news-list { display: flex; flex-direction: column; gap: 10px; }
.ad-news-item {
    border: 1px solid var(--border-light); border-radius: 8px;
    padding: 12px 14px; background: var(--white);
}
.ad-news-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ad-news-date {
    font-size: 0.72rem; font-weight: 700; color: var(--text-placeholder);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.ad-news-title { font-size: 0.92rem; font-weight: 800; color: var(--text-color); }
.ad-news-body { font-size: 0.86rem; color: var(--text-color); line-height: 1.45; }
.ad-news-body p { margin: 0 0 4px; }
.ad-news-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ad-btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border-light); background: var(--white);
    color: var(--text-color); border-radius: 8px; padding: 7px 13px;
    font-size: 0.82rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.ad-btn-ghost:hover { background: var(--darker-background); }
.ad-btn-del {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--danger-red, #c0392b); background: transparent;
    color: var(--danger-red, #c0392b); border-radius: 8px; padding: 7px 13px;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.ad-btn-del:hover { background: rgba(192,57,43,0.08); }

/* =====================================================================
 * MANNSCHAFTEN-ORGA – Team-Hub (Vorschlag B, 2026-07-17)
 * Scope .mo-. Links Mannschafts-Karten, rechts der Kader.
 *
 * ACHTUNG (zweifach bewiesene Falle): der Universalselektor setzt
 * `color: var(--text-color)` UND `font-size: 1rem` DIREKT auf jedes
 * Element. Verschachtelte <span>/<b>/<em> brauchen darum explizit
 * `color: inherit` und `font-size: inherit`, sonst werden sie dunkel
 * bzw. 16px gross. Siehe .aw-legend und .nav-profile-role.
 * ================================================================== */

.mo-filter { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.mo-filter .so-fld { min-width: 200px; }

.mo-status { font-size: 0.78rem; font-weight: 700; color: var(--glass-60); padding-bottom: 9px; }
.mo-status.ok  { color: var(--ok-icon); }
.mo-status.err { color: var(--err-icon); }

/* Mannschaftsauswahl OBEN, Kader darunter über die volle Breite: so bleibt für
   die Kaderliste die ganze Spaltenbreite übrig (lange Namen + Funktion + Von/Bis
   ohne Gedränge), und die Karten nutzen die Breite als Reihe statt als schmale
   Spalte. */
.mo-hub { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Mannschafts-Karten ---------- */
.mo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mo-card {
    display: flex; flex-direction: column; gap: 9px;
    background: var(--glass-12);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid var(--glass-22);
    border-radius: 14px; padding: 12px;
    text-decoration: none; color: rgb(var(--ink)) !important;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mo-card:hover { border-color: var(--tigers-yellow-50); background: var(--glass-16); }
.mo-card.on { border-color: var(--tigers-yellow); background: var(--tigers-yellow-12); }
.mo-card.warn { border-color: var(--err-border-strong); }
.mo-card.warn.on { border-color: var(--tigers-yellow); }

/* color: inherit ist hier Pflicht, nicht Kosmetik: ohne die Angabe faerbt das
   globale `* { color: var(--text-color) }` diesen Container auf #333. Das <b>
   darin bekommt ueber `.content.ad b { color: inherit }` (hoehere Spezifitaet
   als `.mo-card-h b`) genau dieses #333 — Mannschaftsname im Dunkelmodus
   unsichtbar (2026-07-22). */
.mo-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: inherit; }
.mo-card-h b { color: rgb(var(--ink)); font-size: 0.84rem; font-weight: 700; }

.mo-cnt {
    background: var(--glass-12); border: 1px solid var(--glass-22);
    color: var(--glass-75); font-size: 0.68rem; font-weight: 800;
    border-radius: 99px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}
.mo-cnt.y    { background: var(--tigers-yellow-16); border-color: var(--tigers-yellow-40); color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); }
.mo-cnt.null { background: var(--err-bg-strong); border-color: var(--err-border-strong); color: var(--err-text); }

.mo-stack { display: flex; align-items: center; min-height: 26px; }
.mo-stack .mo-av { margin-right: -7px; border-color: var(--glass-avatar-ring); }
.mo-more { font-size: 0.62rem; color: var(--glass-45); margin-left: 13px; font-weight: 700; }
.mo-empty { font-size: 0.68rem; color: var(--glass-40); font-style: italic; }

.mo-card-f { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; color: var(--on-glass-soft); }

/* Sportliche Leitung / Zuständigkeit (2026-07-22).
   Chips bewusst im Stil der Trainer-Chips aus der Hallenbelegung, damit beide
   Zuordnungen als dasselbe Konzept lesbar sind. */
.mo-leitung { display: flex; flex-direction: column; gap: 10px; }
.mo-leitung-liste { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-height: 30px; }
.mo-leitung-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--tigers-yellow-16); border: 1px solid var(--tigers-yellow-40); color: rgb(var(--ink)); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 0.82rem; font-weight: 600; }
.mo-leitung-chip i { color: var(--tigers-yellow-text); font-size: 0.75rem; }
.mo-leitung-add { max-width: 320px; }
.mo-card-f i { color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); }
.mo-card-f span { color: inherit; font-size: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-card-f.none { color: var(--err-text); }
.mo-card-f.none i { color: var(--err-icon); }

/* ---------- Avatare ---------- */
.mo-av {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
    background: var(--glass-bg-strong); border: 1px solid var(--glass-22);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.62rem; font-weight: 800; color: var(--on-glass);
}
.mo-av.xs { width: 24px; height: 24px; font-size: 0.55rem; }

/* ---------- Kader ---------- */
.mo-roster { min-width: 0; }
.mo-roster-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.mo-h3 { display: flex; align-items: center; gap: 9px; color: rgb(var(--ink)); font-size: 1rem; font-weight: 700; margin: 0; }
.mo-trainer { display: inline-flex; align-items: center; gap: 7px; font-size: 0.76rem; color: var(--on-glass-soft); }
.mo-trainer i { color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); }
.mo-trainer.none { color: var(--err-text); }
.mo-trainer.none i { color: var(--err-icon); }

.mo-person { display: inline-flex; align-items: center; gap: 9px; color: rgb(var(--ink)) !important; text-decoration: none; min-width: 0; }
.mo-person b { color: inherit; font-size: 0.84rem; font-weight: 600; }
.mo-person:hover b { color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); }

.mo-tab td { vertical-align: middle; }
.mo-tab .so-inp { width: 100%; }
.mo-leer td { color: var(--glass-40); font-size: 0.82rem; font-style: italic; text-align: center; padding: 22px 0; }
.mo-hint { margin-top: 12px; }

/* ---------- Hinzufuegen / Typeahead ---------- */
.mo-add { position: relative; margin: 14px 0 4px; }
.mo-add-in { display: flex; align-items: center; gap: 9px;
    background: var(--glass-bg); border: 1px solid var(--tigers-yellow-45);
    border-radius: 9px; padding: 0 12px; }
.mo-add-in i { color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); }
.mo-add-in .so-inp { border: none; background: transparent; padding: 9px 0; }
.mo-add-in .so-inp:focus { outline: none; }

.mo-ta {
    position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 30;
    background: var(--tigers-black); border: 1px solid var(--tigers-yellow-35);
    border-radius: 10px; padding: 5px; box-shadow: 0 12px 30px var(--glass-black-55);
    display: flex; flex-direction: column; gap: 3px; max-height: 320px; overflow-y: auto;
}
.mo-ta[hidden] { display: none; }
.mo-ta-row {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 7px 8px; border-radius: 7px; cursor: pointer;
    background: transparent; border: none; text-align: left; font-family: inherit;
}
.mo-ta-row:hover, .mo-ta-row:focus-visible { background: var(--tigers-yellow-12); outline: none; }
.mo-ta-row b  { color: var(--white); font-size: 0.82rem; font-weight: 600; }
.mo-ta-row em {
    font-style: normal; margin-left: auto; font-size: 0.68rem; color: var(--glass-55);
    background: var(--glass-08); border: 1px solid var(--glass-16);
    border-radius: 6px; padding: 1px 6px; white-space: nowrap;
}
.mo-ta-row em.none { background: transparent; border: none; color: var(--warn-text); padding: 0; }
.mo-ta-leer { padding: 11px 9px; font-size: 0.78rem; color: var(--glass-50); }

/* .mo-hub ist bereits einspaltig gestapelt – keine eigene Umbruchregel nötig.
   Die Karten brechen über auto-fill von selbst um. */

/* =====================================================================
   Hilfe / Bedienungsanleitung (Prefix hi-)
   Hinweis: die globale Regel `* { font-size: 1rem }` überschreibt die
   Vererbung, deshalb steht an jeder Überschrift eine explizite Größe.
   ===================================================================== */

/* .content>div bekommt global eine Box — für das Hilfe-Layout neutralisieren */
.content>.hi-layout {
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
}

.hi-kopf-sub { font-size: .95rem; color: var(--text-color); }

.hi-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* --- Kapitelliste ------------------------------------------------- */
.hi-nav {
    position: sticky;
    top: calc(var(--navbar-height) + 12px);
    background: var(--darker-background);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 1rem;
}
.hi-nav-titel {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-placeholder);
    margin-bottom: .6rem;
}
.hi-nav ul { list-style: none; margin: 0; padding: 0; }
.hi-nav>ul>li { margin-bottom: .3rem; }
.hi-nav a {
    display: block;
    padding: .45rem .6rem;
    border-radius: var(--radius-small);
    color: var(--text-dark);
    text-decoration: none;
    font-size: .92rem;
    border-left: 3px solid transparent;
}
.hi-nav a:hover { background: var(--overlay-light); }
.hi-nav a.hi-nav-aktiv {
    background: var(--tigers-yellow);
    border-left-color: var(--tigers-black);
    font-weight: 700;
}
.hi-nav-toc { margin: .25rem 0 .5rem .4rem; border-left: 1px solid var(--border-light); }
.hi-nav-toc a { font-size: .82rem; color: var(--text-color); padding: .3rem .6rem; }

/* --- Kapitelinhalt ------------------------------------------------ */
.hi-artikel {
    background: var(--background-color);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    max-width: 70ch;
}
/* .hi-artikel davor, sonst gewinnt die frühere Regel `.content h2` */
.hi-artikel .hi-artikel-titel {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    padding: 0 0 .75rem;
    margin: 0 0 1rem;
    border-bottom: 2px solid var(--tigers-yellow);
}
.hi-artikel p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.65; color: var(--text-color); }
.hi-artikel .hi-h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 2.25rem 0 .75rem;
    padding: 0;
    border: none;
    scroll-margin-top: calc(var(--navbar-height) + 16px);
}
.hi-artikel .hi-h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 1.5rem 0 .5rem;
    scroll-margin-top: calc(var(--navbar-height) + 16px);
}
.hi-artikel .hi-h4 { font-size: .98rem; font-weight: 700; margin: 1.2rem 0 .4rem; }
.hi-code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .88rem;
    background: var(--bg-table-row-dark);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: .1em .4em;
}
.hi-trenner { border: none; border-top: 1px solid var(--border-light); margin: 2rem 0; }

/* Ankerlink erst beim Überfahren der Überschrift zeigen */
.hi-anker { color: var(--border-light); text-decoration: none; opacity: 0; font-weight: 400; }
.hi-h2:hover .hi-anker, .hi-h3:hover .hi-anker { opacity: 1; }

.hi-liste { margin: 0 0 1rem 1.25rem; padding: 0; }
.hi-liste li { margin-bottom: .5rem; line-height: 1.6; font-size: 1rem; }
.hi-liste li .hi-figur { margin: .75rem 0; }

/* --- Screenshots -------------------------------------------------- */
.hi-figur { margin: 1.25rem 0; }
.hi-figur img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow);
}
.hi-figur figcaption {
    font-size: .84rem;
    color: var(--text-placeholder);
    margin-top: .5rem;
    font-style: italic;
}
.hi-platzhalter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 120px;
    padding: 1.5rem;
    border: 2px dashed var(--border-light);
    border-radius: var(--radius-small);
    background: var(--darker-background);
    color: var(--text-placeholder);
    font-size: .88rem;
}
.hi-platzhalter i { font-size: 1.5rem; }

/* --- Callouts ----------------------------------------------------- */
.hi-callout {
    margin: 1.25rem 0;
    padding: .9rem 1.1rem;
    border-radius: var(--radius-small);
    border-left: 4px solid var(--border-gray);
    background: var(--darker-background);
}
.hi-callout p { margin: 0; font-size: .95rem; }
.hi-callout-titel { font-weight: 700; font-size: .95rem; margin-bottom: .35rem; color: var(--text-dark); }
.hi-callout-tipp    { border-left-color: var(--tigers-yellow); background: #fffdf0; }
.hi-callout-hinweis { border-left-color: var(--primary-blue); background: #f2f7fd; }
.hi-callout-achtung { border-left-color: var(--danger-red); background: #fdf3f3; }

/* --- Tabellen ----------------------------------------------------- */
.hi-tabelle { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .92rem; }
.hi-tabelle th, .hi-tabelle td {
    border: 1px solid var(--border-light);
    padding: .55rem .7rem;
    text-align: left;
    vertical-align: top;
}
.hi-tabelle th { background: var(--bg-table-header); font-weight: 700; font-size: .88rem; }

/* --- Fragezeichen in der Navigation ------------------------------- */
.nav-hilfe-link i { font-size: 1.05rem; }

/* --- Mobil -------------------------------------------------------- */
@media (max-width: 1024px) {
    .hi-layout { grid-template-columns: 1fr; }
    .hi-nav { position: static; }
    .hi-nav-toc { display: none; }
    .hi-artikel { padding: 1.1rem; }
}

/* =========================================================
   Admin – Seite & Design (Scope: .dz)
   Farb-Editor ueber alle CSS-Variablen + Logo-Upload.
   WICHTIG: Alle Textfarben hier explizit auf rgb(var(--ink)) bzw.
   rgba(var(--ink)/..) setzen. Das globale `* { color: var(--text-color) }`
   ganz oben faerbt sonst jedes Element hart auf #333 – auf dem dunklen
   Glas-Hintergrund praktisch unsichtbar (Fehlerbild "Farben ohne Schrift").
   ========================================================= */

/* --- Logos -------------------------------------------------------- */
.dz-logo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .dz-logo-grid { grid-template-columns: 1fr; } }
.dz-logo-titel { display: flex; align-items: center; gap: 8px; color: rgb(var(--ink)); font-size: .95rem; font-weight: 800; }
/* Eigene Klasse statt blossem <span>: das globale `* { color }` faerbt jedes
   Kindelement hart um, Erben allein reicht hier nicht. */
.dz-logo-name { color: rgb(var(--ink)); }
.dz-logo-prev {
    display: flex; align-items: center; justify-content: center;
    min-height: 90px; padding: 12px; margin: 8px 0; border-radius: 10px;
    background: repeating-conic-gradient(#0000 0 25%, rgba(var(--ink) / 0.06) 0 50%) 0 0/18px 18px,
                rgba(var(--ink) / 0.08);
}
.dz-logo-prev img { max-height: 70px; max-width: 100%; }
.dz-file { margin: 8px 0; color: rgb(var(--ink)); font-size: .85rem; }
.dz-tag { font-size: .72rem; padding: 1px 7px; border-radius: 20px; }
.dz-tag.eigen { background: var(--ok-bg); color: var(--ok-text); }
.dz-tag.std { background: rgba(var(--ink) / 0.12); color: rgba(var(--ink) / 0.65); }
.dz-btn-sec {
    background: rgba(var(--ink) / 0.10); color: rgb(var(--ink));
    border: 1px solid rgba(var(--ink) / 0.22); border-radius: 8px;
    padding: 8px 14px; font-size: .85rem; cursor: pointer;
}
.dz-btn-sec:hover { background: rgba(var(--ink) / 0.16); }
.dz-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* --- Farb-Editor: Seitenkopf (frueher inline in AdminDesign.php) --- */
/* Bewusst mit .content.ad davor: die globale Regel `.content h1` setzt
   font-size:1.8em und ist mit (0,1,1) spezifischer als eine blosse Klasse.
   Vorher gewann hier ein Inline-Style – ohne den braucht es die Verschachtelung,
   sonst rutscht die ganze Spalte nach unten. */
.content.ad .ad-titel { font-size: 1.4rem; font-weight: 900; }
.ad-titel-lead { margin-top: 6px; }
.dz-logo-hint { margin: 0 0 6px; font-size: .8rem; }
/* Tabellen-Hilfsklassen (frueher inline in AdminNutzer.php) */
.ad-table-scroll { overflow-x: auto; }
.ad-col-personid { width: 74px; }
.ad-col-aktion { text-align: right; }
.ad-nowrap { white-space: nowrap; }
.ad-lead-flach { margin: 0; }
.ad-btn-klein { text-decoration: none; padding: 6px 12px; }
.ad-dim { opacity: .5; }
.ad-hidden { display: none; }
.ad-row-aktionen { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

/* Admin-Impersonation ("Anmelden als"): auffaelliger Banner, solange die
   Sitzung nicht die eigene ist - siehe AdminLoginAls.php / header.php. */
.ti-imp-banner {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 8px; padding: 10px 16px; background: #fdee17; color: #111111;
    font-size: 0.85rem; font-weight: 700; text-align: center;
}
.ti-imp-banner a { color: #111111; text-decoration: underline; font-weight: 800; }
.ad-av.ad-av-img { object-fit: cover; padding: 0; background: var(--glass-avatar-ring); }

/* --- Farb-Editor: Umschalter beide/Hell/Dunkel -------------------- */
.dz-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.dz-tab {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(var(--ink) / 0.08); color: rgba(var(--ink) / 0.75);
    border: 1px solid rgba(var(--ink) / 0.18); border-radius: 999px;
    padding: 7px 16px; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.dz-tab:hover { background: rgba(var(--ink) / 0.14); }
.dz-tab.active { background: var(--tigers-yellow); border-color: var(--tigers-yellow); color: var(--tigers-black); }
.dz-tab i { color: inherit; }
.dz-tab-cnt {
    font-size: .68rem; font-weight: 700; line-height: 1;
    background: rgba(var(--ink) / 0.12); color: rgba(var(--ink) / 0.7);
    border-radius: 999px; padding: 3px 7px;
}
.dz-tab.active .dz-tab-cnt { background: rgba(0, 0, 0, 0.16); color: var(--tigers-black); }

/* Erklaerung unter den Reitern: was der gewaehlte Bereich bedeutet.
   BEWUSST display:block, nicht flex – sonst wird jedes Kind-Element zum
   Flex-Item und ein <strong> mitten im Satz bricht aus der Zeile heraus
   (dieselbe Falle wie bei .ad-hinweis). */
.dz-bereich-info {
    display: block;
    color: rgba(var(--ink) / 0.72); font-size: .82rem; line-height: 1.5;
    background: rgba(var(--ink) / 0.06); border: 1px solid rgba(var(--ink) / 0.14);
    border-left: 3px solid var(--tigers-yellow); border-radius: 0 10px 10px 0;
    padding: 10px 13px; margin: 0 0 14px;
}
/* [hidden] muss die display-Regel schlagen, sonst stehen alle drei Kaesten da. */
.dz-bereich-info[hidden] { display: none; }
.dz-bereich-info i { color: var(--tigers-yellow-ink); margin-right: 8px; }
.dz-bereich-info strong { color: rgb(var(--ink)); font-weight: 700; }
.dz-stand { margin-left: auto; font-size: .78rem; color: rgba(var(--ink) / 0.6); }
.dz-suche {
    flex: 1 1 180px; min-width: 140px; max-width: 260px;
    background: var(--glass-black-30); color: rgb(var(--ink));
    border: 1px solid rgba(var(--ink) / 0.18); border-radius: 8px;
    padding: 7px 12px; font-size: .82rem;
}
.dz-suche::placeholder { color: rgba(var(--ink) / 0.45); }

/* --- Farb-Editor: Gruppen ---------------------------------------- */
.dz-grp { border: 1px solid rgba(var(--ink) / 0.14); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.dz-grp > summary {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 10px 14px; background: rgba(var(--ink) / 0.07);
    color: rgb(var(--ink)); font-size: .8rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; list-style: none;
}
.dz-grp > summary::-webkit-details-marker { display: none; }
.dz-grp > summary::before { content: "\f0da"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--tigers-yellow-text); }
.dz-grp[open] > summary::before { content: "\f0d7"; }
.dz-grp-cnt { margin-left: auto; font-size: .68rem; font-weight: 600; color: rgba(var(--ink) / 0.55); letter-spacing: normal; text-transform: none; }
.dz-grp-body { padding: 4px 14px 10px; }

/* --- Farb-Editor: eine Variable ---------------------------------- */
.dz-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(var(--ink) / 0.10); }
.dz-row:last-child { border-bottom: 0; }
.dz-row.geaendert .dz-name { color: var(--tigers-yellow-text); font-weight: 700; }
.dz-name { flex: 1 1 auto; min-width: 0; font-family: monospace; font-size: .82rem; color: rgb(var(--ink)); overflow-wrap: anywhere; }
.dz-name small { display: block; font-family: inherit; font-size: .7rem; color: rgba(var(--ink) / 0.55); }
.dz-pick { width: 40px; height: 32px; flex: none; padding: 0; border: 1px solid rgba(var(--ink) / 0.25); border-radius: 8px; background: none; cursor: pointer; }
.dz-pick:disabled { opacity: .35; cursor: not-allowed; }
.dz-val {
    width: 190px; flex: none; font-family: monospace; font-size: .78rem;
    background: var(--glass-black-30); color: rgb(var(--ink));
    border: 1px solid rgba(var(--ink) / 0.18); border-radius: 8px; padding: 6px 8px;
}
.dz-val.ungueltig { border-color: var(--err-icon); }
.dz-reset {
    flex: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
    background: rgba(var(--ink) / 0.08); color: rgba(var(--ink) / 0.7);
    border: 1px solid rgba(var(--ink) / 0.18); font-size: .8rem;
}
.dz-reset:hover { background: rgba(var(--ink) / 0.16); color: rgb(var(--ink)); }
.dz-hinweis { color: rgba(var(--ink) / 0.6); font-size: .8rem; margin: 12px 0 0; }
.dz-hinweis i { color: var(--tigers-yellow-text); }
/* <code> steht nicht in der inherit-Liste fuer .content.ad (nur b/strong/i/em/
   small) und faellt sonst auf #333 zurueck – im Dunkelmodus unlesbar. */
.dz-hinweis code {
    color: rgb(var(--ink)); font-family: monospace; font-size: .78rem;
    background: rgba(var(--ink) / 0.10); border-radius: 5px; padding: 1px 5px;
}

@media (max-width: 720px) {
    .dz-row { flex-wrap: wrap; }
    .dz-name { flex: 1 1 100%; order: -1; }
    .dz-val { width: auto; flex: 1 1 120px; }
}

/* ===== KI-Vertragsanalyse: Warteanzeige + Vorschlag-Panel (2026-07-25) =====
   Bewusst eigene .van-*-Klassen statt .so-add: .so-add ist ein 5-Spalten-Grid
   fuer EINE Eingabezeile – ein mehrzeiliges Panel darin zerfaellt in einzelne
   Grid-Items (Labels ueberlappen, Felder auf 2 Zeichen gequetscht). */

/* Warteanzeige waehrend der Analyse (dauert real 10-20 s) */
.van-laden { display: flex; align-items: center; gap: 12px;
    background: var(--tigers-yellow-06); border: 1px dashed var(--tigers-yellow-35);
    border-radius: 12px; padding: 14px 16px; margin-top: 14px;
    font-size: 0.83rem; color: rgb(var(--ink)); }
.van-laden[hidden] { display: none; }
.van-spinner { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
    border: 2px solid var(--glass-22); border-top-color: var(--tigers-yellow, #fdee17);
    animation: van-dreh 0.8s linear infinite; }
@keyframes van-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .van-spinner { animation-duration: 2.4s; } }

/* Vorschlag-Panel */
.van-panel { background: var(--tigers-yellow-06); border: 1px dashed var(--tigers-yellow-35);
    border-radius: 12px; padding: 16px; margin-top: 14px; }
.van-panel[hidden] { display: none; }
.van-hinweis { margin: 8px 0 14px !important; font-size: 0.78rem !important; }

.van-grid { display: grid; gap: 10px; align-items: end;
    grid-template-columns: 1.6fr 1fr 0.9fr 0.9fr; }

.van-werte { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.van-wert { display: grid; gap: 10px; align-items: end;
    grid-template-columns: 1.1fr 0.8fr 1.1fr 0.9fr 0.9fr auto;
    background: var(--glass-06); border: 1px solid var(--glass-16);
    border-radius: 10px; padding: 10px 12px; }
.van-wert.is-unsicher { border-color: var(--tigers-yellow-35); background: var(--tigers-yellow-06); }
.van-unsicher { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 700;
    color: var(--tigers-yellow-text, #fdee17);
    -webkit-text-stroke: 0.4px var(--tigers-yellow-outline);
    text-shadow: 0 0 1px var(--tigers-yellow-outline); }

.van-aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }

/* Deaktivierte Buttons (Analysieren waehrend Lauf, Demo-Hinweis-Button) */
.so-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

@media (max-width: 900px) {
    .van-grid { grid-template-columns: 1fr 1fr; }
    .van-wert { grid-template-columns: 1fr 1fr; }
}


/* =========================================================================
   Abrechnung: Smart-Tabellen Fahrtkosten + Stundennachweis
   (aus Fahrtkosten.php und Stundennachweis.php hierher migriert, 2026-07-26)
   -------------------------------------------------------------------------
   Bis 2026-07-26 lagen diese Regeln in fuenf <style>-Bloecken direkt in den
   beiden PHP-Dateien, die Ausfuellhilfe-Dialoge zusaetzlich komplett in
   style=""-Attributen. Beide Seiten hatten dabei praktisch dasselbe CSS
   doppelt: 47 Regeln waren bis auf das Praefix (fk2-/sn2-) zeichengleich.
   Deshalb stehen die gemeinsamen Regeln hier EINMAL mit doppeltem Selektor;
   nur die echten Unterschiede sind getrennt aufgefuehrt.
   Werte sind unveraendert uebernommen, optisch aendert sich nichts.
   Ergaenzung: die Aufklapp-Zeilen (.fk2-acc-*, .sn2-acc-*, .fk2-plusbtn,
   .sn2-plusbtn) stehen weiter oben im Block "Mehrfach-Eintraege pro Tag".
   ========================================================================= */

/* --- Rahmen und Kopf --- */
.fk2, .sn2{background:transparent!important;border:0!important;padding:0!important;margin:0!important;
  font-family:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;}
.fk2-card, .sn2-card{background:rgba(var(--ink) / 0.14);backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);border:1px solid rgba(var(--ink) / 0.24);
  border-radius:20px;box-shadow:0 16px 48px rgba(15,15,15,0.28);overflow:hidden;}
.fk2-head, .sn2-head{display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid rgba(var(--ink) / 0.16);background:rgba(var(--ink) / 0.06);}
.fk2-ic, .sn2-ic{width:38px;height:38px;border-radius:9px;background:var(--tigers-yellow);display:flex;
  align-items:center;justify-content:center;font-size:18px!important;flex:none;}
.fk2-head-txt, .sn2-head-txt{flex:1;min-width:0;}
.fk2-title, .sn2-title{font-size:18px!important;font-weight:800;color: rgb(var(--ink))!important;line-height:1.1;}
.fk2-sub, .sn2-sub{font-size:12.5px!important;color:rgba(var(--ink) / 0.66)!important;margin-top:2px;}
.fk2-pill, .sn2-pill{font-size:12px!important;font-weight:700;padding:6px 12px;border-radius:20px;
  background:rgba(253,238,23,0.18);color:var(--tigers-yellow-text)!important;-webkit-text-stroke:0.4px var(--tigers-yellow-outline);text-shadow:0 0 1px var(--tigers-yellow-outline);white-space:nowrap;
  border:1px solid rgba(253,238,23,0.35);}
.fk2-details, .sn2-details{margin:0;}
.fk2-secttl, .sn2-secttl{padding:14px 20px 0;font-weight:800;font-size:11px!important;text-transform:uppercase;
  letter-spacing:.6px;color:rgba(var(--ink) / 0.66)!important;}
.fk2-hint, .sn2-hint{padding:8px 20px 0;font-size:13px!important;color:rgba(var(--ink) / 0.75)!important;}

/* --- Werkzeugleiste --- */
.fk2-tools, .sn2-tools{padding:12px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.fk2-help, .sn2-help{background:var(--tigers-yellow);color:#111!important;border:1px solid var(--tigers-yellow);
  padding:9px 16px;font-weight:700;font-size:13.5px!important;border-radius:9px;cursor:pointer;}
.fk2-help:hover, .sn2-help:hover{background:var(--accent-hover);}
.fk2-filter, .sn2-filter{font-size:13px!important;color:rgba(var(--ink) / 0.75)!important;display:flex;
  align-items:center;gap:7px;cursor:pointer;user-select:none;}
.fk2-filter input, .sn2-filter input{accent-color:var(--tigers-yellow);}

/* --- Tabelle --- */
.fk2-split, .sn2-split{display:grid;grid-template-columns:1fr 290px;gap:0;align-items:start;}
.fk2-main, .sn2-main{min-width:0;}
.fk2-tablewrap, .sn2-tablewrap{overflow-x:auto;}
.fk2-table, .sn2-table{width:100%;border-collapse:collapse;}
.fk2-table{min-width:520px;}   /* mehr Spalten: Ziel + Grund + km */
.sn2-table{min-width:420px;}
.fk2-table thead th, .sn2-table thead th{background:rgba(var(--ink) / 0.08);text-align:left;font-size:11px!important;
  text-transform:uppercase;letter-spacing:.5px;color:rgba(var(--ink) / 0.66)!important;
  font-weight:700;padding:10px 12px;border-bottom:1px solid rgba(var(--ink) / 0.16);}
.fk2-th-day, .sn2-th-day{width:58px;}
.fk2-th-x, .sn2-th-x{width:64px;}
.fk2-th-grund{width:34%;}
.fk2-th-km{width:118px;text-align:right!important;}
.sn2-th-std{width:110px;text-align:right!important;}
.fk2-table tbody td, .sn2-table tbody td{padding:6px 12px;border-bottom:1px solid rgba(var(--ink) / 0.10);
  vertical-align:middle;}
.fk2-tdx, .sn2-tdx{text-align:center;}

/* Kategorie-Streifen links: Fahrtkosten kennt Heim/Aus, der Stundennachweis
   Training/Torwart/Spiel. */
.fk2-row.fk2-cat-heim{box-shadow:inset 3px 0 0 #6aa8ff;}
.fk2-row.fk2-cat-aus{box-shadow:inset 3px 0 0 #f0b429;}
.sn2-row.sn2-cat-tr{box-shadow:inset 3px 0 0 #4ddb8b;}
.sn2-row.sn2-cat-tw{box-shadow:inset 3px 0 0 #6aa8ff;}
.sn2-row.sn2-cat-sp{box-shadow:inset 3px 0 0 #f0b429;}

/* Aus der Fahrtkostenabrechnung uebernommener Tag – bleibt bis zum Neuladen
   markiert, damit sofort auffaellt wo noch Stunden fehlen. */
.sn2-row.sn2-uebernommen{background:rgba(253,238,23,0.07);}
.fk2-row.fk2-we .fk2-daycell, .sn2-row.sn2-we .sn2-daycell{color:#ff9b9b!important;}
.fk2-daycell, .sn2-daycell{white-space:nowrap;font-weight:700;color: rgb(var(--ink))!important;text-align:center;line-height:1.05;}
.fk2-dnum, .sn2-dnum{display:block;font-size:15px!important;color:inherit!important;}
.fk2-wd, .sn2-wd{display:block;font-size:10.5px!important;color:rgba(var(--ink) / 0.55)!important;
  text-transform:uppercase;letter-spacing:.3px;}

/* --- Felder in der Tabelle --- */
.fk2-in, .sn2-in{font-family:inherit;font-size:14px!important;color:rgba(var(--ink) / 0.92)!important;
  background:rgba(var(--ink) / 0.10);border:1px solid rgba(var(--ink) / 0.22);
  border-radius:8px;padding:8px 10px;width:100%;color-scheme:dark;}
.fk2-in::placeholder, .sn2-in::placeholder{color:rgba(var(--ink) / 0.40);}
.fk2-in:focus, .sn2-in:focus{outline:none;border-color:var(--tigers-yellow);
  box-shadow:0 0 0 2px rgba(253,238,23,0.25);}
.fk2-in option, .sn2-in option{color:#1a1a1a;background:#fff;}
.fk2-grund, .sn2-art{cursor:pointer;}
.fk2-km, .sn2-std{text-align:right;font-variant-numeric:tabular-nums;}
.fk2-date{width:100%;}

/* Zahlenfelder ohne Hoch/Runter-Pfeile: die Pfeile fressen in der schmalen
   km-Spalte so viel Platz, dass dreistellige Entfernungen abgeschnitten
   wurden (Meldung Maik 2026-07-31). Eingetippt wird ohnehin, geklickt nie. */
.fk2-tdkm input[type="number"], .fk2-acc-entry input[type="number"], #fk-hilfe-km{
  -moz-appearance:textfield; appearance:textfield;}
.fk2-tdkm input[type="number"]::-webkit-outer-spin-button,
.fk2-tdkm input[type="number"]::-webkit-inner-spin-button,
.fk2-acc-entry input[type="number"]::-webkit-outer-spin-button,
.fk2-acc-entry input[type="number"]::-webkit-inner-spin-button,
#fk-hilfe-km::-webkit-outer-spin-button,
#fk-hilfe-km::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;}

/* --- Auto-KM-Feld (nur Fahrtkosten) --- */
.km-auto-wrap { display:flex; align-items:center; gap:4px; position:relative; }
.km-unit { color:#999; font-size:0.82rem; white-space:nowrap; flex-shrink:0; }
.km-auto-wrap.km-loading .km-input { opacity:0.5; }
.km-auto-wrap.km-loading::before {
  content:''; position:absolute; right:30px; top:50%; transform:translateY(-50%);
  width:11px; height:11px; border:2px solid #aaa; border-top-color:#fdee17;
  border-radius:50%; animation:km-spin 0.7s linear infinite; pointer-events:none;
}
@keyframes km-spin { to { transform:translateY(-50%) rotate(360deg); } }
.km-auto-wrap.km-ok .km-input { border-color:#4caf50 !important; }
.km-auto-wrap.km-error .km-input { border-color:#e53935 !important; }
.fk2-tdkm .km-auto-wrap{justify-content:flex-end;}
/* Ohne die Pfeile ist Platz frei – das Feld nutzt ihn jetzt aus, damit auch
   "123,4" vollstaendig sichtbar bleibt (Meldung Maik 2026-07-31). */
.km-auto-wrap .km-input{flex:1 1 auto;min-width:0;}

/* --- Zeile leeren ---
   Element + Klasse ist hier Absicht: abrechnung-leiste.php (auf beiden Seiten
   eingebunden) setzt fuer dieselben Klassen ein konkurrierendes
   "color: rgba(var(--ink) / 0.80) !important". Solange diese Regeln in den
   Seiten selbst standen, kamen sie NACH der Leiste und gewannen bei
   Gleichstand. Aus style.css heraus wuerden sie verlieren - die hoehere
   Spezifitaet haelt das bisherige Aussehen (0.7) fest. Faellt weg, sobald
   auch abrechnung-leiste.php migriert ist. */
button.fk-clear-btn, button.sn-clear-btn,
.fk-clear-btn, .sn-clear-btn {
    background: rgba(var(--ink) / 0.08);
    border: 1px solid rgba(var(--ink) / 0.22);
    border-radius: 4px;
    color: rgba(var(--ink) / 0.7) !important;
    cursor: pointer;
    padding: 2px 7px;
    font-size: 0.8em !important;
    line-height: 1;
}
.fk-clear-btn:hover, .sn-clear-btn:hover { background: #c00; color: #fff; border-color: #c00; }

/* --- Seitenleiste mit Summen --- */
.fk2-aside, .sn2-aside{border-left:1px solid rgba(var(--ink) / 0.16);background:rgba(var(--ink) / 0.06);
  align-self:stretch;}
.fk2-aside-inner, .sn2-aside-inner{padding:18px;position:sticky;top:12px;}
.fk2-aside-h, .sn2-aside-h{font-size:11px!important;text-transform:uppercase;letter-spacing:.6px;
  color:rgba(var(--ink) / 0.66)!important;font-weight:700;margin-bottom:12px;}
.fk2-sumline, .sn2-sumline{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;
  border-bottom:1px dashed rgba(var(--ink) / 0.16);}
.fk2-k, .sn2-k{font-size:13px!important;color:rgba(var(--ink) / 0.75)!important;display:flex;
  align-items:center;gap:8px;}
.fk2-v, .sn2-v{font-weight:800;font-variant-numeric:tabular-nums;color: rgb(var(--ink))!important;font-size:14px!important;}
.fk2-dot, .sn2-dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.fk2-dot-b, .sn2-dot-b{background:#6aa8ff;}
.fk2-dot-a, .sn2-dot-a{background:#f0b429;}
.sn2-dot-g{background:#4ddb8b;}
.fk2-lbl, .sn2-lbl{display:block;font-size:12px!important;font-weight:700;
  color:rgba(var(--ink) / 0.66)!important;margin:16px 0 6px;}
.fk2-total, .sn2-total{margin-top:14px;background:rgba(0,0,0,0.35);border:1px solid rgba(var(--ink) / 0.18);
  border-radius:12px;padding:13px 15px;display:flex;justify-content:space-between;align-items:center;}
.fk2-total span:first-child, .sn2-total span:first-child{font-size:11px!important;text-transform:uppercase;letter-spacing:.6px;
  color:var(--tigers-yellow-text)!important;-webkit-text-stroke:0.4px var(--tigers-yellow-outline);text-shadow:0 0 1px var(--tigers-yellow-outline);font-weight:700;}
.fk2-total span:last-child, .sn2-total span:last-child{font-size:22px!important;font-weight:800;font-variant-numeric:tabular-nums;
  color: rgb(var(--ink))!important;}
.fk2-btn-primary, .sn2-btn-primary{margin-top:14px;width:100%;background:var(--tigers-yellow);color:#111!important;
  border:1px solid var(--tigers-yellow);border-radius:10px;padding:12px 16px;font-weight:800;
  font-size:14px!important;cursor:pointer;font-family:inherit;display:flex;align-items:center;
  justify-content:center;gap:8px;}
.fk2-btn-primary:hover, .sn2-btn-primary:hover{background:var(--accent-hover);}

@media(max-width:760px){
  .fk2-split, .sn2-split{grid-template-columns:1fr;}
  .fk2-aside, .sn2-aside{border-left:0;border-top:1px solid rgba(var(--ink) / 0.16);}
  .fk2-aside-inner, .sn2-aside-inner{position:static;}
}

/* =========================================================================
   Ausfuellhilfe-Dialog (Fahrtkosten UND Stundennachweis)
   -------------------------------------------------------------------------
   Beide Seiten hatten denselben Dialog vollstaendig in style=""-Attributen,
   inklusive per JS gesetzter Farben fuer die Wochentag-Knoepfe. Jetzt eine
   gemeinsame Klassen-Familie .ah-*; der Aktiv-Zustand haengt an .ah-wt-active.
   Bewusst fest dunkel (wie .mo-ta/.dropdown): eigenstaendige Flaeche, die in
   beiden Themes gleich aussieht. Element + Klasse, damit generische Regeln
   wie ".content > div" oder ".content input[type=text]" den Dialog nicht
   schlagen koennen, falls er je in den Content wandert.
   ========================================================================= */
div.ah-modal{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9000;
  align-items:center; justify-content:center;}
div.ah-modal.ah-open{display:flex;}
.ah-box{background:#1e1e1e; border:1px solid #444; border-radius:12px; padding:28px 32px;
  min-width:360px; max-width:460px; width:90%;}
.ah-box-schmal{min-width:340px; max-width:420px;}
.ah-box h3{margin:0 0 20px 0; color:#fdee17;}
.ah-group{margin-bottom:16px;}
.ah-group-last{margin-bottom:24px;}
.ah-lbl{display:block; margin-bottom:6px; color:#ccc; font-size:0.9em;}
.ah-lbl-wt{margin-bottom:8px;}
.ah-wtrow{display:flex; gap:6px; flex-wrap:wrap;}
.ah-wt{padding:8px 12px; border:2px solid #555; border-radius:6px; background:#2a2a2a;
  color:#ccc; cursor:pointer; font-weight:600; min-width:44px;}
.ah-wt.ah-wt-active{background:#fdee17; color:#111; border-color:#fdee17;}
.ah-zielrow{display:flex; gap:6px; align-items:center;}
input.ah-in, select.ah-in,
.content input.ah-in, .content select.ah-in{padding:8px; background:#2a2a2a; color:#fff;
  border:1px solid #555; border-radius:6px;}
.ah-in-ziel{flex:1;}
.ah-in-voll{width:100%; box-sizing:border-box;}
.ah-status{font-size:0.8em; color:#aaa; white-space:nowrap;}
.ah-note{margin-top:6px; font-size:0.8em; color:#888;}
.ah-actions{display:flex; gap:10px; justify-content:flex-end;}
.ah-btn{padding:9px 20px; border-radius:6px; cursor:pointer;}
.ah-btn-abbrechen{border:1px solid #555; background:#2a2a2a; color:#ccc;}
.ah-btn-ok{border:none; background:#fdee17; color:#111; font-weight:700;}

/* =========================================================================
   Einheitliche Feldhoehen  (Vorgabe, 2026-07-26)
   -------------------------------------------------------------------------
   Alle einzeiligen Formularfelder einer Zeile/Gruppe muessen exakt gleich
   hoch sein. Vorher standen im Vertrags-Reiter des Spielerprofils in
   DERSELBEN Zeile: Dropdown 31,0px | Text 33,8px | Datum 35,8px |
   Datei 37,0px | Buttons 33,3-40,8px.

   Ursachen (beide nicht durch padding loesbar):
   1. Jeder Feldtyp hat eine andere intrinsische Hoehe: das Datumsfeld bringt
      den nativen Kalender mit, das Datei-Feld den "Durchsuchen"-Knopf, und
      <select> ignoriert line-height komplett.
   2. Die generischen Regeln ".content input[type=…] / .content select"
      schlagen per Spezifitaet die Feldklassen (.so-inp, .fk2-in) - daher
      kamen sogar unterschiedliche border-radius-Werte in einer Zeile.

   Deshalb: Hoehe IMMER ueber --feld-hoehe setzen, nie ueber padding. Neue
   Felder bekommen eine bestehende Feldklasse, keine eigene Variante.
   ========================================================================= */

/* --- 1) Generische Felder im Content-Bereich --- */
.content input[type="text"],
.content input[type="number"],
.content input[type="date"],
.content input[type="time"],
.content input[type="datetime-local"],
.content input[type="month"],
.content input[type="week"],
.content input[type="email"],
.content input[type="tel"],
.content input[type="url"],
.content input[type="search"],
.content input[type="password"],
.content input[type="file"],
.content select {
    height: var(--feld-hoehe);
    min-height: var(--feld-hoehe);
    box-sizing: border-box;
    line-height: 1.2;
}

/* --- 2) Feldklassen: Spielerprofil/-organisation (so-), Profil (pf-),
         Fahrtkosten (fk2-) und Stundennachweis (sn2-).
         Element + Klasse, damit die Regel die generischen .content-Regeln
         aus Abschnitt 1 sicher schlaegt. --- */
.content input.so-inp,
.content select.so-inp,
.content input.fk2-in,
.content select.fk2-in,
.content input.sn2-in,
.content select.sn2-in,
.content .so-sel,
input.so-inp,
select.so-inp,
.so-sel,
input.ah-in,
select.ah-in,
.pf-field input:not([type="checkbox"]):not([type="radio"]),
.pf-field select {
    height: var(--feld-hoehe);
    min-height: var(--feld-hoehe);
    box-sizing: border-box;
    line-height: 1.2;
}

/* Einheitliches Innenmass/Radius fuer die so-Familie: ohne das erben Datum
   und Dropdown padding 6px + radius 5px aus Abschnitt 1, das Textfeld aber
   7px + 8px aus .so-inp. */
.content input.so-inp,
.content select.so-inp,
.content .so-sel,
input.so-inp,
select.so-inp,
.so-sel {
    padding: 0 10px;
    border-radius: 8px;
}

/* Mehrzeilige Felder wachsen weiter mit, halten aber dieselbe Mindesthoehe. */
.content textarea,
.content textarea.so-inp,
textarea.so-inp {
    height: auto;
    min-height: var(--feld-hoehe);
    box-sizing: border-box;
    padding: 7px 10px;
}

/* --- 3) Buttons, die neben Feldern stehen (Anlege-Leiste, Aktionsspalte).
         .so-btn-mini ist bewusst ausgenommen: das ist ein Listen-Chip, kein
         Feld-Button. --- */
.so-btn:not(.so-btn-mini) {
    height: var(--feld-hoehe);
    min-height: var(--feld-hoehe);
    box-sizing: border-box;
}

/* Icons in Feld-Buttons: ohne diese Regel zieht die globale Falle
   "* { font-size: 1rem }" jedes <i> auf 16px hoch - ein Button MIT Icon war
   dadurch ~5px hoeher als derselbe Button ohne Icon. */
.so-btn i {
    font-size: 0.85em;
    line-height: 1;
}

/* =====================================================================
   Übungsdatenbank (Prefix ueb-, seit 2026-07-29). "Der Hub" — eine Seite
   mit Reitern, Aktionen laufen per fetch() gegen UebungAktion.php.
   Eigene Klassen statt Wiederverwendung von .ad-* (das ist Admin-Dashboard-
   spezifisch benannt, diese Seite ist es nicht) — gleiche Vereinbarung wie
   mo-/hb-/so- fuer die anderen Features.
   ===================================================================== */
/* Wie bei .content.hb/.content.ad: .content ist von Haus aus eine helle Karte
   (background-color: var(--background-color) = immer weiss, siehe style.css
   weiter oben) — ohne diese Neutralisierung sitzt die ganze Seite in einem
   weissen Kasten fest, unabhaengig vom Theme (genau der gemeldete Bug: "im
   Dark Modus wird das helle Design genommen"). */
.content.ueb { background: transparent; border: none; box-shadow: none; padding: 0; }
.content.ueb h1, .content.ueb h2, .content.ueb h3 { color: rgb(var(--ink)); border: none; padding: 0; margin: 0 0 4px; letter-spacing: normal; text-align: left; }
/* Auch direkte <p>-Kinder entkachelen: ".content > p" gibt jedem Absatz sonst
   --darker-background (hell), waehrend der Text im Dunkelmodus weiss bleibt ->
   der Einleitungssatz war weiss auf hellgrau und damit unlesbar (2026-07-30). */
.content.ueb > div, .content.ueb > p { margin: 0 0 18px; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; }

.ueb-h1 { font-size: 1.5rem; font-weight: 900; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.ueb-h1 i { color: var(--tigers-yellow-text); }
.ueb-lead { color: rgba(var(--ink) / 0.6); font-size: 0.85rem; margin: 0 0 14px; }

.ueb-tabbar { display: flex; gap: 6px; border-bottom: 1px solid rgba(var(--ink) / 0.16); margin-bottom: 18px; flex-wrap: wrap; }
/* Reiterleiste im Stil der Hauptnavigation: ruhender Text gedeckt, Hover und
   aktiver Reiter in Gelb, aktiver zusaetzlich mit 3px-Unterstrich.
   ACHTUNG, das war ein echter Fehler: ohne eigene :hover-Regel greift die
   generische "button:hover { background: var(--bg-table-row-dark) }" — dieser
   Wert ist #f1f3f5, also auch im Dunkelmodus fast weiss, und schlaegt
   ".ueb-tab" per Spezifitaet (0,1,1 gegen 0,1,0). Ergebnis war weisse Schrift
   auf weissem Grund, sobald die Maus ueber einem Reiter stand (2026-07-31).
   Fuer die Schrift --tigers-yellow-ink statt --tigers-yellow: die Leiste liegt
   auf der themenabhaengigen Seitenflaeche, nicht auf der immer dunklen Navileiste. */
.ueb-tab {
    font-weight: 700; font-size: 0.86rem; padding: 11px 12px; margin-right: 6px;
    background: none; border: none; border-bottom: 3px solid transparent;
    color: rgba(var(--ink) / 0.85); cursor: pointer;
    border-radius: 8px 8px 0 0; transition: background-color .15s, color .15s;
}
.ueb-tab i { color: var(--tigers-yellow-ink); }
.ueb-tab:hover, .ueb-tab:focus-visible {
    background: var(--glass-08); color: var(--tigers-yellow-ink);
}
.ueb-tab:hover i, .ueb-tab:focus-visible i { color: var(--tigers-yellow-ink); }
.ueb-tab.on { color: var(--tigers-yellow-ink); border-bottom-color: var(--tigers-yellow); }
.ueb-tab.on i { color: var(--tigers-yellow-ink); }
.ueb-badge { display: inline-block; margin-left: 4px; background: var(--err-icon); color: #fff; font-size: 0.66rem; font-weight: 800; padding: 1px 7px; border-radius: 99px; vertical-align: 2px; }

.ueb-card {
    background: var(--karte-bg); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid var(--karte-border); border-radius: 18px; box-shadow: 0 12px 36px var(--glass-shadow);
    padding: 18px 20px; margin-bottom: 14px;
}
/* Farbe MUSS auch auf den Kindern liegen: "* { color: var(--text-color) }" trifft
   jedes <span> direkt und schlaegt die Vererbung — die Zaehler in dieser Zeile
   ("3 Übungen, 45 Min.") standen sonst dunkel auf dunkel (2026-07-31). */
.ueb-sec, .ueb-sec span, .ueb-sec b { color: rgb(var(--ink)); }
.ueb-sec { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-left: 5px solid var(--tigers-yellow); padding: 0 0 0 12px; margin: 0 0 14px; }

.ueb-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.ueb-fields-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
/* Kopfdaten des Trainingsplans: vier gleich breite Spalten (Datum, Von, Bis,
   Spieler). .ueb-fields-4 passt hier nicht — dessen vierte Spalte ist "auto"
   und fuer einen Knopf gedacht, ein Eingabefeld wuerde dort zusammenlaufen. */
.ueb-fields-kopf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
/* Schalter "Bilder mitdrucken": Kaestchen und Text auf einer Grundlinie.
   Farbe explizit auf dem <span> und <em>, weil "* { color }" die Vererbung schlaegt. */
.ueb-check { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 14px; cursor: pointer; }
.ueb-check input { width: 16px; height: 16px; min-height: 16px; margin-top: 2px; flex: 0 0 auto; }
.ueb-check span { font-size: 0.86rem; color: rgb(var(--ink)); }
.ueb-check em { font-style: normal; color: rgba(var(--ink) / 0.65); }
.ueb-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.ueb-field .l { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(var(--ink) / 0.7); }
/* Einzeilige Felder: Hoehe kommt aus --feld-hoehe (Vorgabe, s. Block
   "Einheitliche Feldhoehen"). Das fruehere padding:10px liess bei 36px
   Feldhoehe nur 16px fuer 16px-Schrift -> Text war unten abgeschnitten. */
.ueb-field input, .ueb-field select, .ueb-field textarea {
    background: var(--bg-flaeche); color: var(--text-input); border: 1px solid rgba(var(--ink) / 0.35);
    border-radius: 10px; padding: 0 12px; width: 100%; font: inherit;
}
.ueb-field textarea { padding: 8px 12px; height: auto; }

.ueb-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.ueb-chip { font-size: 0.76rem; font-weight: 600; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--glass-22); background: var(--glass-12); color: rgba(var(--ink) / 0.7); cursor: pointer; }
.ueb-chip.on { background: var(--tigers-yellow); color: var(--tigers-black); border-color: var(--tigers-yellow); }

.ueb-btn-y { background: var(--tigers-yellow); color: var(--tigers-black); border: none; border-radius: 10px; padding: 10px 16px; font-weight: 800; font-size: 0.82rem; cursor: pointer; }
.ueb-btn-ghost { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(var(--ink) / 0.3); background: transparent; color: rgb(var(--ink)); border-radius: 8px; padding: 8px 13px; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
/* Eigene :hover-Regeln sind hier Pflicht, sonst greift die generische
   "button:hover { background: var(--bg-table-row-dark) }" (#f1f3f5, auch im
   Dunkelmodus fast weiss) und schlaegt die Klasse per Spezifitaet — beim
   Ghost-Button waere das helle Schrift auf fast weissem Grund (2026-07-31). */
.ueb-btn-y:hover { background: var(--tigers-yellow-hover); color: var(--tigers-black); }
.ueb-btn-ghost:hover { background: var(--glass-12); color: rgb(var(--ink)); border-color: rgba(var(--ink) / 0.5); }
.ueb-btn-teal { background: var(--status-teal); color: #0d2a20; border: none; border-radius: 8px; padding: 8px 13px; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.ueb-row-btn { display: flex; gap: 10px; margin-top: 6px; }

.ueb-msg { color: rgb(var(--ink)); background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: 10px; padding: 10px 12px; font-size: 0.82rem; margin-bottom: 14px; }
.ueb-msg-err { color: var(--err-text); background: var(--err-bg); border-color: var(--err-border); }
.ueb-loading { text-align: center; padding: 30px 20px; color: rgba(var(--ink) / 0.7); }

.ueb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ueb-ex-card { background: var(--glass-12); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid var(--glass-22); border-radius: 14px; padding: 15px; display: flex; flex-direction: column; gap: 7px; }
.ueb-ex-galerie-eins { margin: -15px -15px 4px; }
.ueb-ex-galerie-eins img { display: block; width: calc(100% + 30px); aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; }
.ueb-ex-galerie-mehr { display: flex; gap: 6px; overflow-x: auto; margin: -15px -15px 4px; padding: 0 15px 4px; }
.ueb-ex-galerie-mehr img { flex: 0 0 auto; height: 120px; width: auto; border-radius: 8px; object-fit: cover; }
.ueb-freigabe-galerie { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; }
.ueb-ex-bild-freigabe { width: 140px; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.ueb-ex-card h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: rgb(var(--ink)); }
/* Die Farbe MUSS auf den Kindern liegen: das globale "* { color: var(--text-color) }"
   setzt jedem <span> hart #333 und schlaegt damit jede Vererbung vom Container —
   die Meta-Zeile war dunkel auf dunkel (2026-07-30). */
.ueb-ex-meta, .ueb-ex-meta span { font-size: 0.76rem; color: rgba(var(--ink) / 0.62); }

/* Kachel-Angaben: Kategorie, ab welcher Jugend, Spielerzahl */
.ueb-ex-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ueb-ex-chip, .ueb-ex-chip i {
    font-size: 0.74rem; font-weight: 600; color: rgba(var(--ink) / 0.82);
}
.ueb-ex-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
    border-radius: 99px; background: var(--glass-12); border: 1px solid var(--glass-22);
    white-space: nowrap;
}
.ueb-ex-chip i { color: var(--tigers-yellow-ink); font-size: 0.7rem; }

/* Material auf der Kachel: eigene Zeile, damit es nicht mit den Chips verschwimmt */
.ueb-ex-material, .ueb-ex-material span {
    font-size: 0.76rem; color: rgba(var(--ink) / 0.7); line-height: 1.35;
}
.ueb-ex-material { display: flex; align-items: flex-start; gap: 6px; }
.ueb-ex-material i { color: var(--tigers-yellow-ink); font-size: 0.72rem; margin-top: 2px; flex: 0 0 auto; }
.ueb-tag-mat, .ueb-tag-mat i { color: var(--tigers-yellow-ink); }
.ueb-tag-mat { border-color: var(--tigers-yellow-22, rgba(253,238,23,0.22)); }

/* Ganze Kachel ist anklickbar -> Detailansicht */
.ueb-ex-card { cursor: pointer; transition: border-color .15s, transform .15s; }
.ueb-ex-card:hover { border-color: var(--tigers-yellow); transform: translateY(-2px); }
.ueb-ex-card .ueb-plan-add-btn { cursor: pointer; }

/* ---- Detailansicht (Overlay) ----
   :not([hidden]) ist Pflicht: eine Klassenregel mit display schlaegt sonst das
   hidden-Attribut (gleiche Spezifitaet) und der Dialog liegt unsichtbar ueber
   der ganzen Seite — genau der Fehler vom Zuschneide-Dialog (2026-07-29). */
.ueb-detail-scrim:not([hidden]) {
    display: flex; align-items: flex-start; justify-content: center;
    /* z-index MUSS ueber der Navigation liegen (nav hat 1000, position:sticky).
       Mit 200 lag die Navileiste ueber dem Dialog und verdeckte dessen Kopfzeile
       samt Titel und Schliessen-Knopf (2026-07-31). */
    position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, 0.72);
    padding: 24px 16px; overflow-y: auto;
}
/* Flaeche wie beim Zuschneide-Dialog: --karte-bg ist themenabhaengig.
   NICHT --bg-flaeche verwenden - das ist die Eingabefeld-Flaeche und in BEIDEN
   Designs weiss, der weisse Text stand damit auf weissem Grund (2026-07-31). */
.ueb-detail-box {
    position: relative; width: min(900px, 100%); border-radius: 16px; padding: 22px;
    background: var(--karte-bg); border: 1px solid var(--karte-border);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    display: flex; flex-direction: column; gap: 12px;
}
.ueb-detail-box h2 { margin: 0 44px 0 0; font-size: 1.25rem; font-weight: 800; color: rgb(var(--ink)); }
.ueb-detail-box h3 { margin: 6px 0 0; font-size: 0.95rem; font-weight: 700; color: rgb(var(--ink)); }
.ueb-detail-text { margin: 0; font-size: 0.9rem; line-height: 1.55; color: rgba(var(--ink) / 0.85); }
.ueb-detail-close {
    position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
    background: var(--glass-12); border: 1px solid var(--glass-22); color: rgb(var(--ink));
    cursor: pointer; font-size: 1rem; line-height: 1;
}
.ueb-detail-close:hover { background: var(--tigers-yellow); color: var(--tigers-black); }
.ueb-detail-close i { color: inherit; }
/* Ein Bild: einfach gross. Mehrere Bilder: Karussell (s. u.) */
.ueb-detail-galerie { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ueb-detail-galerie img {
    width: 100%; height: auto; border-radius: 10px; display: block;
    background: rgba(255, 255, 255, 0.06);
}

/* ---- Bilderkarussell (nur bei mehreren Bildern, per JS aktiviert) ----
   Sichtbarkeit ueber Klassen statt [hidden]: hier steuern beide Zustaende
   dieselbe Klasse, damit gibt es keinen Spezifitaetskonflikt. */
.ueb-detail-galerie.ueb-karussell { position: relative; }
.ueb-detail-galerie.ueb-karussell img { display: none; }
.ueb-detail-galerie.ueb-karussell img.aktiv { display: block; }
.ueb-karussell-pfeil {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff; font-size: 1.1rem; line-height: 1; display: flex;
    align-items: center; justify-content: center;
}
.ueb-karussell-pfeil i { color: inherit; }
.ueb-karussell-pfeil:hover { background: var(--tigers-yellow); color: var(--tigers-black); border-color: var(--tigers-yellow); }
.ueb-karussell-pfeil.vor { right: 10px; }
.ueb-karussell-pfeil.zurueck { left: 10px; }
.ueb-karussell-zaehler {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    padding: 3px 12px; border-radius: 99px; background: rgba(0, 0, 0, 0.6);
    color: #fff; font-size: 0.76rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ueb-detail-fuss { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
@media (max-width: 760px) {
    .ueb-detail-box { padding: 16px; }
    .ueb-detail-galerie:has(img + img) { grid-template-columns: 1fr; }
}
.ueb-ex-desc { font-size: 0.82rem; color: rgba(var(--ink) / 0.8); margin: 0; line-height: 1.45; }
.ueb-ex-varianten { font-size: 0.78rem; color: rgba(var(--ink) / 0.65); margin: 0; font-style: italic; }
.ueb-ex-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.ueb-tag { font-size: 0.68rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--glass-12); border: 1px solid var(--glass-22); color: rgba(var(--ink) / 0.68); }

.ueb-freigabe-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ueb-freigabe-info h3 { margin: 0 0 4px; font-size: 0.95rem; font-weight: 700; }
.ueb-freigabe-aktionen { display: flex; gap: 8px; flex: 0 0 auto; }

.ueb-plan-slot { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid rgba(var(--ink) / 0.12); }
.ueb-plan-slot:last-child { border-bottom: none; }
.ueb-plan-time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tigers-yellow-ink); min-width: 44px; }
.ueb-plan-total { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(var(--ink) / 0.16); font-weight: 700; }

.ueb-stamm-liste { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ueb-stamm-liste li { display: flex; gap: 8px; align-items: center; }
.ueb-stamm-liste input { flex: 1; }
.ueb-stamm-neu { display: flex; gap: 8px; }
.ueb-stamm-neu input { flex: 1; }

.ueb-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--tigers-black); color: var(--tigers-yellow-text); font-weight: 600; font-size: 0.84rem; padding: 12px 20px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 500; }
.ueb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Bilder-Galerie im Korrektur-Formular (Übung erfassen) */
.ueb-medien-galerie { display: flex; flex-wrap: wrap; gap: 8px; }
.ueb-medien-item { position: relative; width: 110px; height: 90px; border-radius: 8px; overflow: hidden; border: 1px solid var(--glass-22); background: var(--glass-06); }
.ueb-medien-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ueb-medien-pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: rgba(var(--ink) / 0.6); font-size: 0.68rem; }
.ueb-medien-pdf i { font-size: 1.3rem; }
.ueb-medien-aktionen { position: absolute; top: 3px; right: 3px; display: flex; gap: 3px; opacity: 0; transition: opacity .12s; }
.ueb-medien-item:hover .ueb-medien-aktionen { opacity: 1; }
.ueb-medien-btn { width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 0.7rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ueb-medien-btn:hover { background: rgba(0,0,0,.75); }
.ueb-medien-x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 0.7rem; cursor: pointer; }

/* Ausschnitt/Crop-Dialog */
/* WICHTIG: [hidden] (display:none) und eine Klassen-Regel mit "display" haben
   dieselbe Spezifität — die Klassenregel gewinnt und würde [hidden] überschreiben,
   der Dialog stünde unsichtbar-aber-klickbar dauerhaft über der GANZEN Seite
   (so am 2026-07-29 gefunden: Klicks überall landeten auf den Dialog-Buttons).
   Deshalb :not([hidden]) statt der Klasse allein — nur DANN display:flex. */
.ueb-crop-scrim:not([hidden]) { display: flex; }
.ueb-crop-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1100; align-items: center; justify-content: center; padding: 20px; }
.ueb-crop-modal { background: var(--karte-bg); backdrop-filter: blur(20px); border: 1px solid var(--karte-border); border-radius: 16px; padding: 20px; max-width: min(90vw, 640px); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.ueb-crop-stage { position: relative; max-width: 100%; max-height: 60vh; overflow: auto; user-select: none; border: 1px solid var(--glass-22); border-radius: 10px; margin-bottom: 14px; }
.ueb-crop-stage img { display: block; max-width: 100%; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.ueb-crop-auswahl { position: absolute; border: 2px dashed var(--tigers-yellow); background: rgba(253,238,23,.18); pointer-events: none; }

@media (max-width: 760px) {
    .ueb-fields, .ueb-fields-4 { grid-template-columns: 1fr; }
    /* Datum/Von/Bis/Spieler sind kurze Felder – auf dem Handy zwei je Reihe
       statt vier untereinander. */
    .ueb-fields-kopf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Manueller Trainingsplan-Baukasten */
.ueb-plan-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(var(--ink) / 0.1); }
.ueb-plan-item:last-child { border-bottom: none; }
.ueb-plan-item-nav { display: flex; flex-direction: column; gap: 2px; }
.ueb-plan-item-nav button { width: 24px; height: 20px; border: 1px solid var(--glass-22); background: var(--glass-08); color: rgb(var(--ink)); border-radius: 4px; cursor: pointer; font-size: 0.65rem; line-height: 1; }
.ueb-plan-item-nav button:disabled { opacity: 0.25; cursor: default; }
.ueb-plan-item-info { flex: 1 1 auto; min-width: 0; }
/* Quellenangabe einer Übung: bewusst klein und zurückgenommen — sie gehört zur
   Übung, soll aber den Ablauf nicht überlagern.
   BEWUSST NICHT mit `.content.ueb` davor: die Detailansicht (.ueb-detail-scrim)
   haengt am Seitenende AUSSERHALB von .content.ueb, dorthin wird der Inhalt nur
   geklont — eine so eingeschraenkte Regel greift dort nicht. Farben trotzdem
   explizit, sonst faerbt `* { color: var(--text-color) }` auf #333 um. */
.ueb-quelle {
    margin-top: 12px; padding-top: 8px;
    border-top: 1px solid rgba(var(--ink) / 0.12);
    font-size: 0.74rem; line-height: 1.5;
    color: rgba(var(--ink) / 0.72);
}
/* Ergebnisliste nach dem seitenweisen PDF-Import: je erkannter Uebung eine
   Zeile zum Oeffnen. Farben explizit, sonst greift die `* { color }`-Kette. */
.ueb-import-ergebnis { margin-top: 6px; }
.ueb-import-ergebnis b { color: rgb(var(--ink)); }
.ueb-import-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ueb-import-liste li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ueb-import-liste .ueb-lead { margin: 0; font-size: 0.76rem; }

/* Verwaltung der gespeicherten Trainingsplaene (Auswahl + Neu + Loeschen).
   Die Auswahl nimmt den freien Platz, die Knoepfe bleiben in ihrer Breite. */
.ueb-plan-verwaltung-zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ueb-plan-verwaltung-zeile select { flex: 1 1 220px; min-width: 0; }
.ueb-plan-verwaltung .ueb-feldhinweis { display: block; margin-top: 4px; }

/* Kleiner Erklaertext unter einem Eingabefeld (z. B. bei "Quelle"). */
.ueb-field .ueb-feldhinweis { font-size: 0.72rem; line-height: 1.45; color: rgba(var(--ink) / 0.6); }
.ueb-field .ueb-feldhinweis b { color: rgba(var(--ink) / 0.85); }

.ueb-quelle .l {
    display: block; font-size: 0.65rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: rgba(var(--ink) / 0.5); margin-bottom: 2px;
}
.ueb-quelle a { color: var(--tigers-yellow-text); text-decoration: none; white-space: nowrap; }
.ueb-quelle a:hover { text-decoration: underline; }

.ueb-plan-item-info b { display: block; font-size: 0.88rem; }
/* Die Uebungstitel in der Planliste standen dunkel auf dunkel (gefunden
   2026-07-31 beim Erstellen der Handbuch-Screenshots). Ursache ist die Kette
   `* { color: var(--text-color) }` (immer #333, auch im Dunkelmodus) plus
   `.content.ueb b { color: inherit }` — inherit holt sich das #333 des Eltern-
   elements zurueck. Die Farbe muss deshalb MIT `.content.ueb` davor gesetzt
   werden, sonst gewinnt die allgemeinere Regel ueber die Spezifitaet. */
.content.ueb .ueb-plan-item-info b { color: rgb(var(--ink)); }
.ueb-plan-item-dauer { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: rgba(var(--ink) / 0.7); white-space: nowrap; }
.ueb-plan-item-dauer input { width: 56px; background: var(--bg-flaeche); color: var(--text-input); border: 1px solid rgba(var(--ink) / 0.35); border-radius: 8px; padding: 6px 8px; text-align: center; }
.ueb-plan-add-btn { width: 100%; justify-content: center; display: flex; align-items: center; gap: 6px; }

/* Abschnittszeile im Plan: hebt sich klar von den Übungszeilen ab */
.ueb-plan-abschnitt { background: var(--tigers-yellow-06, rgba(253,238,23,0.06)); border-left: 3px solid var(--tigers-yellow); border-radius: 6px; margin-top: 8px; }
.ueb-plan-abschnitt .ueb-plan-item-dauer b { color: var(--tigers-yellow-ink); font-size: 0.82rem; }
.ueb-plan-abschnitt-titel {
    width: 100%; background: transparent; border: none; border-bottom: 1px dashed rgba(var(--ink) / 0.3);
    color: rgb(var(--ink)); font-weight: 800; font-size: 0.9rem; padding: 2px 0;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.ueb-plan-abschnitt-titel:focus { outline: none; border-bottom-color: var(--tigers-yellow); }

/* Anfasser zum Ziehen (ersetzt die ▲▼-Knöpfe) */
.ueb-plan-griff {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 26px; align-self: stretch; cursor: grab; touch-action: none;
    color: rgba(var(--ink) / 0.45);
}
.ueb-plan-griff:hover { color: var(--tigers-yellow-ink); }
.ueb-plan-griff i { color: inherit; font-size: 0.95rem; }
.ueb-plan-item.ueb-zieht { opacity: 0.45; }
.ueb-plan-item.ueb-zieht .ueb-plan-griff { cursor: grabbing; }
/* Einfügemarke, die beim Ziehen mitwandert */
.ueb-plan-marker { height: 3px; margin: 2px 0; border-radius: 2px; background: var(--tigers-yellow); }

/* Notiz je Übung */
.ueb-plan-notiz-btn {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--glass-22); background: var(--glass-08); color: rgba(var(--ink) / 0.7);
    font-size: 0.75rem; line-height: 1;
}
.ueb-plan-notiz-btn i { color: inherit; }
.ueb-plan-notiz-btn:hover { background: var(--tigers-yellow); color: var(--tigers-black); border-color: var(--tigers-yellow); }
.ueb-plan-notiz-btn.hat { color: var(--tigers-yellow-ink); border-color: var(--tigers-yellow); }
.ueb-plan-notiz {
    width: 100%; margin-top: 6px; padding: 6px 8px; border-radius: 8px; font: inherit;
    font-size: 0.82rem; background: var(--bg-flaeche); color: var(--text-input);
    border: 1px solid rgba(var(--ink) / 0.3); resize: vertical;
}

/* =========================
   Freigabe-Seite (quick-approve.php)
   -------------------------
   Wird ohne Login aus der Admin-Mail heraus aufgerufen. Wie index.html laeuft
   die Seite bewusst im hellen Standard (kein data-theme), damit der Wechsel
   aus der hellen Mail nicht bricht. Farben deshalb aus den Hell-Variablen,
   nicht aus rgb(var(--ink)).
   ========================= */
.qa-page {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 16px;
    background: var(--darker-background);
}

.qa-card {
    width: min(100%, 480px);
    background: var(--background-color);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    border-top: 4px solid var(--tigers-yellow);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    padding: 32px;
}

.qa-titel {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--tigers-black);
    text-align: center;
    margin-bottom: 20px;
}

.qa-text {
    font-size: 0.95rem;
    color: var(--text-color);
    text-align: center;
    line-height: 1.7;
    margin-bottom: 12px;
}

.qa-text a { color: var(--primary-blue); }

.qa-icon { font-size: 2.6rem; text-align: center; margin-bottom: 12px; }
.qa-icon.qa-ok i     { color: #2ecc71; }
.qa-icon.qa-fehler i { color: var(--danger-red); }

/* Kopfdaten der Registrierung */
.qa-person {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-table-header);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-small);
    margin-bottom: 20px;
}

.qa-person td {
    padding: 7px 12px;
    font-size: 0.88rem;
    color: var(--text-color);
    vertical-align: top;
}

.qa-person td:first-child { font-weight: 700; width: 116px; color: var(--text-dark); }

/* Rollenauswahl */
.qa-rollen { width: 100%; border-collapse: collapse; margin-bottom: 14px; }

.qa-rollen th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-placeholder);
    text-align: left;
    padding: 0 8px 6px;
    border-bottom: 1px solid var(--border-light);
}

.qa-rollen th:last-child { text-align: center; }

.qa-rollen td {
    padding: 9px 8px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-color);
}

.qa-rollen tbody tr:last-child td { border-bottom: none; }

.qa-td-check { width: 30px; }
.qa-td-std   { width: 54px; text-align: center; }

.qa-td-name label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.95rem;
    color: var(--text-dark);
    cursor: pointer;
}

.qa-td-name label i { color: var(--tigers-yellow-ink); width: 18px; text-align: center; }

.qa-rollen input[type="checkbox"],
.qa-rollen input[type="radio"] {
    width: 17px;
    height: 17px;
    accent-color: var(--tigers-black);
    cursor: pointer;
}

.qa-hinweis {
    font-size: 0.78rem;
    color: var(--text-placeholder);
    line-height: 1.6;
    margin-bottom: 8px;
}

.qa-hinweis-fehler {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--danger-red);
    background: rgba(211,47,47,0.08);
    border: 1px solid var(--danger-red-tint);
    border-radius: var(--radius-small);
    padding: 9px 12px;
    margin-bottom: 16px;
}

.qa-hinweis-fehler i { color: var(--danger-red); margin-right: 6px; }

.qa-btn {
    width: 100%;
    height: 48px;
    margin-top: 10px;
    background: #111111;
    color: var(--tigers-yellow-text);
    -webkit-text-stroke: 0.4px var(--tigers-yellow-outline);
    text-shadow: 0 0 1px var(--tigers-yellow-outline);
    border: none;
    border-radius: var(--radius-small);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s ease, transform 0.12s ease;
}

.qa-btn i { color: var(--tigers-yellow-text); }

.qa-btn:hover { background: #1a1a1a; transform: translateY(-1px); }

/* ---------------------------------------------------------------------
   Honeypot-Feld im Registrierungsformular (2026-08-01)
   ---------------------------------------------------------------------
   Muss fuer Menschen unsichtbar sein, aber fuer Automaten wie ein ganz
   normales Feld aussehen. Deshalb NICHT display:none und NICHT
   visibility:hidden — beides erkennen viele Bots und lassen das Feld
   dann leer. Stattdessen aus dem sichtbaren Bereich schieben.
   Gehoert zu <div class="reg-hp"> in register.html.
   --------------------------------------------------------------------- */
.reg-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}