@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;

    /* === 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);
}

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 {
    color: inherit;
}

/* 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; }
}

/* =========================
   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; }
.ad-rollen-panel { display: none; position: absolute; z-index: 20; 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; }
.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(var(--ink) / 0.15); }
.ad-std span { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: rgba(var(--ink) / 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; }

/* 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); }

@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 { 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); }
.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; }

/* --- 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 { grid-template-columns: 1fr 1fr; }
    .so-grid2 { grid-template-columns: 1fr; }
    .so-head-right { margin-left: 0; width: 100%; }
}

/* ===== 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-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; }
}