*, *::before, *::after { box-sizing: border-box; }

/* ---------- Globale Kontrast-Regel: gelblicher Hintergrund → schwarze Schrift (projektweit) ---------- */
[style*="background:#fef3c7"], [style*="background: #fef3c7"],
[style*="background:#fde68a"], [style*="background: #fde68a"],
[style*="background:#fef9c3"], [style*="background: #fef9c3"],
[style*="background:#fffbeb"], [style*="background: #fffbeb"],
[style*="background:#fde047"], [style*="background: #fde047"],
[style*="background:#fbbf24"], [style*="background: #fbbf24"],
[style*="background:#fcd34d"], [style*="background: #fcd34d"],
[style*="background:#facc15"], [style*="background: #facc15"],
[style*="background:#fef0c7"], [style*="background: #fef0c7"],
[style*="linear-gradient(135deg,#fef3c7"], [style*="linear-gradient(135deg, #fef3c7"],
[style*="linear-gradient(135deg,#fde68a"], [style*="linear-gradient(135deg, #fde68a"],
[style*="linear-gradient(135deg,#fef9c3"], [style*="linear-gradient(135deg, #fef9c3"],
[style*="linear-gradient(135deg,#fbbf24"], [style*="linear-gradient(135deg, #fbbf24"] {
    color: #000000 !important;
}
[style*="background:#fef3c7"] *, [style*="background: #fef3c7"] *,
[style*="background:#fde68a"] *, [style*="background: #fde68a"] *,
[style*="background:#fef9c3"] *, [style*="background: #fef9c3"] *,
[style*="background:#fffbeb"] *, [style*="background: #fffbeb"] *,
[style*="background:#fde047"] *, [style*="background: #fde047"] *,
[style*="background:#fbbf24"] *, [style*="background: #fbbf24"] *,
[style*="background:#fcd34d"] *, [style*="background: #fcd34d"] *,
[style*="background:#facc15"] *, [style*="background: #facc15"] *,
[style*="background:#fef0c7"] *, [style*="background: #fef0c7"] *,
[style*="linear-gradient(135deg,#fef3c7"] *, [style*="linear-gradient(135deg, #fef3c7"] *,
[style*="linear-gradient(135deg,#fde68a"] *, [style*="linear-gradient(135deg, #fde68a"] *,
[style*="linear-gradient(135deg,#fef9c3"] *, [style*="linear-gradient(135deg, #fef9c3"] *,
[style*="linear-gradient(135deg,#fbbf24"] *, [style*="linear-gradient(135deg, #fbbf24"] * {
    color: #000000 !important;
}
/* Buttons in solchen Containern behalten ihre eigene Farbe */
[style*="background:#fef3c7"] .btn, [style*="background: #fef3c7"] .btn,
[style*="linear-gradient(135deg,#fef3c7"] .btn, [style*="linear-gradient(135deg, #fef3c7"] .btn,
[style*="linear-gradient(135deg,#fde68a"] .btn, [style*="linear-gradient(135deg, #fde68a"] .btn,
[style*="linear-gradient(135deg,#fbbf24"] .btn, [style*="linear-gradient(135deg, #fbbf24"] .btn {
    color: #ffffff !important;
}

:root, body.theme-light {
    /* Theme: Light (Default) — entspricht historischem Aussehen */
    --bg:         #f6f8fb;
    --surface:    #ffffff;
    --surface-2:  #f1f4f9;
    --border:     #e4e8ef;
    --border-2:   #d7dde6;
    --text:       #0f1729;   /* AAA-Kontrast auf hellem Hintergrund */
    --text-soft:  #475569;   /* WCAG-AA: ~7.5:1 auf #fff */
    --text-muted: #5a6573;   /* WCAG-AA: ~5.5:1 auf #fff */
    --primary:    #2563eb;
    --primary-600:#1d4ed8;
    --primary-50: #eff4ff;
    --accent:     #0ea5e9;
    --success:    #10b981;
    --success-bg: #ecfdf5;
    --danger:     #dc2626;
    --danger-bg:  #fef2f2;
    --warning-bg: #fffbeb;
    --warning-fg: #92400e;
    --row-zebra:  rgba(0,0,0,.012);
    --row-hover:  #fafcff;
    --shadow-sm:  0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
    --shadow:     0 2px 4px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.06);
    --radius:     10px;
    --radius-sm:  6px;
    --radius-lg:  14px;
}

/* ---------- Theme: Dark ---------- */
body.theme-dark {
    --bg:         #0f172a;
    --surface:    #1e293b;
    --surface-2:  #273449;
    --border:     #334155;
    --border-2:   #475569;
    --text:       #ffffff;
    --text-soft:  #f5f5f5;
    --text-muted: #e5e5e5;
    --primary:    #60a5fa;
    --primary-600:#3b82f6;
    --primary-50: #1e3a8a;
    --accent:     #38bdf8;
    --success:    #34d399;
    --success-bg: #064e3b;
    --danger:     #f87171;
    --danger-bg:  #7f1d1d;
    --warning-bg: #78350f;
    --warning-fg: #fde68a;
    --row-zebra:  rgba(255,255,255,.025);
    --row-hover:  #2a3955;
    --shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
    --shadow:     0 2px 4px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.5);
}
/* Dark-spezifische Anpassungen für Komponenten */
body.theme-dark thead th { background: var(--surface-2); color: var(--text-soft); border-bottom-color: var(--border); }
body.theme-dark tbody tr:hover { background: var(--row-hover); }
body.theme-dark .flash.ok  { background: var(--success-bg); color: #d1fae5; border-color: #047857; }
body.theme-dark .flash.err { background: var(--danger-bg);  color: #fee2e2; border-color: #b91c1c; }
body.theme-dark input, body.theme-dark select, body.theme-dark textarea {
    background: var(--surface-2); color: var(--text); border-color: var(--border-2);
}

/* ---------- Theme: Blue ---------- */
body.theme-blue {
    --bg:         #eff6ff;
    --surface:    #ffffff;
    --surface-2:  #dbeafe;
    --border:     #bfdbfe;
    --border-2:   #93c5fd;
    --text:       #0c1e3d;
    --text-soft:  #1e3a8a;
    --text-muted: #1e40af;
    --primary:    #1d4ed8;
    --primary-600:#1e3a8a;
    --primary-50: #dbeafe;
    --accent:     #0284c7;
    --row-zebra:  rgba(29,78,216,.04);
    --row-hover:  #e0ecff;
}

/* ---------- Theme: Warm ---------- */
body.theme-warm {
    --bg:         #fef7ed;
    --surface:    #ffffff;
    --surface-2:  #fed7aa;
    --border:     #fdba74;
    --border-2:   #fb923c;
    --text:       #3b1d0a;
    --text-soft:  #7c2d12;
    --text-muted: #9a3412;
    --primary:    #c2410c;
    --primary-600:#9a3412;
    --primary-50: #ffedd5;
    --accent:     #ea580c;
    --row-zebra:  rgba(194,65,12,.05);
    --row-hover:  #fff1e0;
}

/* ---------- Theme: Mint ---------- */
body.theme-mint {
    --bg:         #f0fdf4;
    --surface:    #ffffff;
    --surface-2:  #dcfce7;
    --border:     #bbf7d0;
    --border-2:   #86efac;
    --text:       #052e16;
    --text-soft:  #14532d;
    --text-muted: #166534;
    --primary:    #059669;
    --primary-600:#047857;
    --primary-50: #d1fae5;
    --accent:     #10b981;
    --row-zebra:  rgba(5,150,105,.04);
    --row-hover:  #e6fff0;
}

/* ---------- Theme: Construction (Anthrazit + Liebherr-Gelb) ---------- */
body.theme-construction {
    --bg:         #1e1f23;
    --surface:    #2a2c33;
    --surface-2:  #353841;
    --border:     #3f424c;
    --border-2:   #535662;
    --text:       #ffffff;
    --text-soft:  #f5f5f5;
    --text-muted: #e5e5e5;
    --primary:    #fecc00;
    --primary-600:#d4a800;
    --primary-50: #4a3d00;
    --accent:     #f97316;
    --success:    #10b981;
    --success-bg: #064e3b;
    --danger:     #ef4444;
    --danger-bg:  #7f1d1d;
    --warning-bg: #78350f;
    --warning-fg: #fde68a;
    --row-zebra:  rgba(254,204,0,.04);
    --row-hover:  #3a3d47;
    --shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
    --shadow:     0 2px 4px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.5);
}
body.theme-construction thead th { background: var(--surface-2); color: var(--text-soft); border-bottom-color: var(--border); }
body.theme-construction tbody tr:hover { background: var(--row-hover); }
body.theme-construction .flash.ok  { background: var(--success-bg); color: #d1fae5; border-color: #047857; }
body.theme-construction .flash.err { background: var(--danger-bg);  color: #fee2e2; border-color: #b91c1c; }
body.theme-construction input, body.theme-construction select, body.theme-construction textarea {
    background: var(--surface-2); color: var(--text); border-color: var(--border-2);
}

/* ---------- Dark-Themes: ALLE Texte/Links/Anmerkungen in Weiß ---------- */
/* Überschreibt auch Inline-Styles in PHP-Templates (#94a3b8, #475569, #64748b, #666 …) */
body.theme-dark, body.theme-construction, body.theme-midnight,
body.theme-dark *, body.theme-construction *, body.theme-midnight * {
    color: #ffffff !important;
}
/* Ausnahmen: Badges, Buttons, Flash-Banner sollen ihre eigene Farbe behalten */
body.theme-dark .btn, body.theme-construction .btn, body.theme-midnight .btn,
body.theme-dark .btn *, body.theme-construction .btn *, body.theme-midnight .btn * {
    color: inherit !important;
}
body.theme-dark .flash, body.theme-construction .flash, body.theme-midnight .flash,
body.theme-dark .flash *, body.theme-construction .flash *, body.theme-midnight .flash * {
    color: inherit !important;
}
body.theme-dark .badge, body.theme-construction .badge, body.theme-midnight .badge {
    color: inherit !important;
}
/* Helle Hintergründe (inline gesetzt): Text dunkel zurückholen
   Erkennt typische Pastell-/Weiß-Hintergründe in inline-styles aus den PHP-Templates */
body.theme-dark [style*="background:#f"], body.theme-construction [style*="background:#f"], body.theme-midnight [style*="background:#f"],
body.theme-dark [style*="background: #f"], body.theme-construction [style*="background: #f"], body.theme-midnight [style*="background: #f"],
body.theme-dark [style*="background:#e"], body.theme-construction [style*="background:#e"], body.theme-midnight [style*="background:#e"],
body.theme-dark [style*="background: #e"], body.theme-construction [style*="background: #e"], body.theme-midnight [style*="background: #e"],
body.theme-dark [style*="background:#d"], body.theme-construction [style*="background:#d"], body.theme-midnight [style*="background:#d"],
body.theme-dark [style*="background: #d"], body.theme-construction [style*="background: #d"], body.theme-midnight [style*="background: #d"],
body.theme-dark [style*="linear-gradient(135deg,#f"], body.theme-construction [style*="linear-gradient(135deg,#f"], body.theme-midnight [style*="linear-gradient(135deg,#f"],
body.theme-dark [style*="linear-gradient(135deg, #f"], body.theme-construction [style*="linear-gradient(135deg, #f"], body.theme-midnight [style*="linear-gradient(135deg, #f"],
body.theme-dark .info-copyright, body.theme-construction .info-copyright, body.theme-midnight .info-copyright,
body.theme-dark .info-card, body.theme-construction .info-card, body.theme-midnight .info-card {
    color: #1a1a1a !important;
}
/* Auch Kindelemente innerhalb dieser hellen Container */
body.theme-dark [style*="background:#f"] *, body.theme-construction [style*="background:#f"] *, body.theme-midnight [style*="background:#f"] *,
body.theme-dark [style*="background: #f"] *, body.theme-construction [style*="background: #f"] *, body.theme-midnight [style*="background: #f"] *,
body.theme-dark [style*="background:#e"] *, body.theme-construction [style*="background:#e"] *, body.theme-midnight [style*="background:#e"] *,
body.theme-dark [style*="background: #e"] *, body.theme-construction [style*="background: #e"] *, body.theme-midnight [style*="background: #e"] *,
body.theme-dark [style*="background:#d"] *, body.theme-construction [style*="background:#d"] *, body.theme-midnight [style*="background:#d"] *,
body.theme-dark [style*="background: #d"] *, body.theme-construction [style*="background: #d"] *, body.theme-midnight [style*="background: #d"] *,
body.theme-dark [style*="linear-gradient(135deg,#f"] *, body.theme-construction [style*="linear-gradient(135deg,#f"] *, body.theme-midnight [style*="linear-gradient(135deg,#f"] *,
body.theme-dark [style*="linear-gradient(135deg, #f"] *, body.theme-construction [style*="linear-gradient(135deg, #f"] *, body.theme-midnight [style*="linear-gradient(135deg, #f"] *,
body.theme-dark .info-copyright *, body.theme-construction .info-copyright *, body.theme-midnight .info-copyright *,
body.theme-dark .info-card *, body.theme-construction .info-card *, body.theme-midnight .info-card * {
    color: #1a1a1a !important;
}
/* Aber NICHT den Buttons in solchen Containern den Farbe-Override machen — die haben weiße Schrift auf Gradient */
body.theme-dark .btn, body.theme-construction .btn, body.theme-midnight .btn,
body.theme-dark .btn *, body.theme-construction .btn *, body.theme-midnight .btn *,
body.theme-dark .tech-vienna-link, body.theme-construction .tech-vienna-link, body.theme-midnight .tech-vienna-link {
    color: #ffffff !important;
}

/* ---------- Theme: Slate (kühles Profi-Grau) ---------- */
body.theme-slate {
    --bg:         #f8fafc;
    --surface:    #ffffff;
    --surface-2:  #e2e8f0;
    --border:     #cbd5e1;
    --border-2:   #94a3b8;
    --text:       #0f172a;
    --text-soft:  #334155;
    --text-muted: #475569;
    --primary:    #475569;
    --primary-600:#334155;
    --primary-50: #f1f5f9;
    --accent:     #64748b;
    --row-zebra:  rgba(100,116,139,.04);
    --row-hover:  #f0f4f8;
}

/* ---------- Theme: Midnight (premium dark, lila-Schimmer) ---------- */
body.theme-midnight {
    --bg:         #0a0b1e;
    --surface:    #16182b;
    --surface-2:  #1a1c3a;
    --border:     #2a2d52;
    --border-2:   #3a3d6e;
    --text:       #ffffff;
    --text-soft:  #f5f5f5;
    --text-muted: #e5e5e5;
    --primary:    #a78bfa;
    --primary-600:#8b5cf6;
    --primary-50: #2e1065;
    --accent:     #c084fc;
    --success:    #34d399;
    --success-bg: #064e3b;
    --danger:     #fb7185;
    --danger-bg:  #7f1d1d;
    --warning-bg: #713f12;
    --warning-fg: #fde68a;
    --row-zebra:  rgba(167,139,250,.04);
    --row-hover:  #232545;
    --shadow-sm:  0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    --shadow:     0 2px 4px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.6);
}
body.theme-midnight thead th { background: var(--surface-2); color: var(--text-soft); border-bottom-color: var(--border); }
body.theme-midnight tbody tr:hover { background: var(--row-hover); }
body.theme-midnight .flash.ok  { background: var(--success-bg); color: #d1fae5; border-color: #047857; }
body.theme-midnight .flash.err { background: var(--danger-bg);  color: #fee2e2; border-color: #b91c1c; }
body.theme-midnight input, body.theme-midnight select, body.theme-midnight textarea {
    background: var(--surface-2); color: var(--text); border-color: var(--border-2);
}

/* ---------- Theme: Forest (sattes Waldgrün) ---------- */
body.theme-forest {
    --bg:         #f5f7f4;
    --surface:    #ffffff;
    --surface-2:  #dde6d8;
    --border:     #c7d3c0;
    --border-2:   #9eb097;
    --text:       #1a2e1a;
    --text-soft:  #2d4a2d;
    --text-muted: #4a6e4a;
    --primary:    #15803d;
    --primary-600:#166534;
    --primary-50: #dcfce7;
    --accent:     #65a30d;
    --row-zebra:  rgba(21,128,61,.04);
    --row-hover:  #ebf2e6;
}

/* ---------- Theme: Ocean (frisches Türkis) ---------- */
body.theme-ocean {
    --bg:         #ecfeff;
    --surface:    #ffffff;
    --surface-2:  #cffafe;
    --border:     #a5f3fc;
    --border-2:   #67e8f9;
    --text:       #083344;
    --text-soft:  #155e75;
    --text-muted: #0e7490;
    --primary:    #0891b2;
    --primary-600:#0e7490;
    --primary-50: #cffafe;
    --accent:     #06b6d4;
    --row-zebra:  rgba(8,145,178,.04);
    --row-hover:  #d6f8fc;
}

/* ---------- Theme: Sepia (augenschonend, papier-look) ---------- */
body.theme-sepia {
    --bg:         #f4ecd8;
    --surface:    #fbf6e8;
    --surface-2:  #e8dcc4;
    --border:     #d4c5a3;
    --border-2:   #b8a780;
    --text:       #3b2f1f;
    --text-soft:  #5e4a32;
    --text-muted: #7a6243;
    --primary:    #92400e;
    --primary-600:#78350f;
    --primary-50: #fef3c7;
    --accent:     #c2410c;
    --row-zebra:  rgba(146,64,14,.04);
    --row-hover:  #f0e7cf;
}

/* ---------- Theme: Rose (sanft warm) ---------- */
body.theme-rose {
    --bg:         #fdf2f8;
    --surface:    #ffffff;
    --surface-2:  #fce7f3;
    --border:     #fbcfe8;
    --border-2:   #f9a8d4;
    --text:       #500724;
    --text-soft:  #831843;
    --text-muted: #9d174d;
    --primary:    #be185d;
    --primary-600:#9d174d;
    --primary-50: #fce7f3;
    --accent:     #db2777;
    --row-zebra:  rgba(190,24,93,.04);
    --row-hover:  #fdebf3;
}

/* ---------- Theme: Contrast (Editorial B&W — hoher Kontrast, professioneller Look) ---------- */
body.theme-contrast {
    --bg:         #fafafa;
    --surface:    #ffffff;
    --surface-2:  #f4f4f5;
    --border:     #d4d4d8;
    --border-2:   #a1a1aa;
    --text:       #09090b;
    --text-soft:  #27272a;
    --text-muted: #3f3f46;
    --primary:    #18181b;
    --primary-600:#000000;
    --primary-50: #f4f4f5;
    --accent:     #1e40af;
    --success:    #14532d;
    --success-bg: #f0fdf4;
    --danger:     #7f1d1d;
    --danger-bg:  #fef2f2;
    --warning-bg: #fffbeb;
    --warning-fg: #78350f;
    --row-zebra:  rgba(0,0,0,.025);
    --row-hover:  #f4f4f5;
    --shadow-sm:  0 1px 0 rgba(0,0,0,.06);
    --shadow:     0 1px 0 rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
}
body.theme-contrast .card { border: 1px solid #18181b; box-shadow: 0 2px 0 rgba(0,0,0,.06); }
body.theme-contrast input,
body.theme-contrast select,
body.theme-contrast textarea { border-color: #3f3f46; }
body.theme-contrast .btn { border-radius: 4px; }
body.theme-contrast h1, body.theme-contrast h2, body.theme-contrast h3 {
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -.01em;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Font-Familien (per body.font-<key>) ---------- */
body.font-system       { --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
body.font-inter        { --font-family: 'Inter', system-ui, sans-serif; }
body.font-manrope      { --font-family: 'Manrope', system-ui, sans-serif; }
body.font-merriweather { --font-family: 'Merriweather', Georgia, serif; }
body.font-playfair     { --font-family: 'Playfair Display', Georgia, serif; }
body.font-lora         { --font-family: 'Lora', Georgia, serif; }
body.font-slab         { --font-family: 'Roboto Slab', Georgia, serif; }
body.font-oswald       { --font-family: 'Oswald', Impact, sans-serif; letter-spacing: .01em; }
body.font-jetbrains    { --font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
h2 { font-size: 22px; margin-bottom: 18px; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout ---------- */
.layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    transition: grid-template-columns .2s ease;
}
.sidebar {
    background: #0f172a;
    color: #cbd5e1;
    padding: 24px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    transition: padding .2s ease;
}

/* Hamburger-Toggle (floating, stylish) */
.sidebar-toggle {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1100;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    display: none;          /* default: ausgeblendet, nur bei collapsed/mobile sichtbar */
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-600) 60%, #1e3a8a 100%);
    box-shadow:
        0 4px 12px rgba(37,99,235,.35),
        0 1px 2px rgba(15,23,42,.3),
        inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.sidebar-toggle::before {
    /* dezenter Glow-Ring beim Hover */
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    background: radial-gradient(circle, rgba(37,99,235,.45), transparent 70%);
    opacity: 0;
    transition: opacity .2s ease;
    z-index: -1;
}
.sidebar-toggle:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow:
        0 6px 18px rgba(37,99,235,.45),
        0 2px 4px rgba(15,23,42,.4),
        inset 0 1px 0 rgba(255,255,255,.25);
}
.sidebar-toggle:hover::before { opacity: 1; }
.sidebar-toggle:active { transform: translateY(0) scale(0.97); }
.sidebar-toggle svg { width: 22px; height: 22px; stroke-width: 2.4; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }

/* Scroll-Up/Down-Buttons (global, rechts unten) — gleicher Stil wie Hamburger */
.scroll-fab {
    position: fixed;
    right: 14px;
    bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1050;
}
.scroll-fab-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    display: none;            /* JS schaltet je nach Scroll-Position auf 'grid' */
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-600) 60%, #1e3a8a 100%);
    box-shadow:
        0 4px 12px rgba(37,99,235,.35),
        0 1px 2px rgba(15,23,42,.3),
        inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .18s ease, box-shadow .18s ease;
}
.scroll-fab-btn::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    background: radial-gradient(circle, rgba(37,99,235,.45), transparent 70%);
    opacity: 0;
    transition: opacity .2s ease;
    z-index: -1;
}
.scroll-fab-btn:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow:
        0 6px 18px rgba(37,99,235,.45),
        0 2px 4px rgba(15,23,42,.4),
        inset 0 1px 0 rgba(255,255,255,.25);
}
.scroll-fab-btn:hover::before { opacity: 1; }
.scroll-fab-btn:active { transform: translateY(0) scale(.97); }
.scroll-fab-btn svg { width: 22px; height: 22px; stroke-width: 2.4; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
body.sidebar-collapsed .sidebar-toggle { display: grid; }

/* Inline-Toggle innerhalb der ausgeklappten Sidebar (oben rechts) */
.sidebar-collapse-btn {
    background: rgba(255,255,255,.06);
    color: #cbd5e1;
    border: 0;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: grid;
    place-items: center;
    margin-left: auto;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
body.sidebar-collapsed .sidebar-collapse-btn { display: none; }

/* Backdrop nur auf Mobile sichtbar wenn Sidebar offen */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.5);
    z-index: 999;
}
body.sidebar-open .sidebar-backdrop { display: block; }

/* Eingeklappt auf Desktop: Sidebar komplett aus dem Layout, Content nimmt volle Breite */
body.sidebar-collapsed .layout {
    display: block;            /* Grid auflösen */
    grid-template-columns: none;
}
body.sidebar-collapsed .sidebar { display: none; }
body.sidebar-collapsed .content {
    width: 100%;
    max-width: none;           /* darf gesamte Breite nutzen */
    padding-left: 60px;        /* Platz für Hamburger */
    padding-top: 56px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 22px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 18px;
}
.brand-mark {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.brand-mark svg { display: block; }
.brand-text { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.2; }
.brand-text small { display: block; font-weight: 400; color: #94a3b8; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 500;
}
.sidebar nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.sidebar nav a.active { background: rgba(37,99,235,.18); color: #fff; }
.sidebar nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar nav a.submenu { padding-left: 32px; font-size: 13px; opacity: .85; }
.sidebar nav a.submenu svg { width: 14px; height: 14px; }

.content {
    padding: 28px 36px 60px;
    max-width: 1500px;
    min-width: 0;
    box-sizing: border-box;   /* Padding fließt in max-width — verhindert Überlauf rechts */
}
/* Grid-Items dürfen schmaler als ihr Content werden — sonst pushen breite Tabellen das Layout über den Viewport */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 16px;
    flex-wrap: wrap;
}
.page-header .subtitle { color: var(--text-muted); font-size: 13px; margin-top: 4px; }

footer { text-align: center; padding: 24px; color: var(--text-muted); font-size: 12px; }

/* ---------- Flash messages ---------- */
.flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    font-size: 14px;
    border: 1px solid transparent;
}
.flash svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.flash .flash-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.flash.ok   { background: var(--success-bg); color: #065f46; border-color: #a7f3d0; }
.flash.err  { background: var(--danger-bg);  color: #991b1b; border-color: #fecaca; }
.flash.warn { background: #fef3c7;            color: #78350f; border-color: #fcd34d; }
.flash ul   { margin: 6px 0 0 18px; padding: 0; }

/* ---------- ÖNORM A 2063 Text-Tags ----------
   Lückentext-Tags und Rechenwerte sind XML-Custom-Elements ohne Default-Styling.
   Wir machen sie sichtbar, damit Anwender erkennen, wo der Text Lücken/Werte enthält.
   Quelle: ÖNORM A 2063-1:2021-03 §9.4 Tabelle 4 + ontext.xsd. */
al, bl, blo, rw {
    display: inline-block;
    padding: 0 4px;
    border-radius: 3px;
    font-size: .92em;
    border: 1px dashed transparent;
    cursor: help;
}
al  { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }   /* Ausschreiberlücke */
bl  { background: #fee2e2; color: #7f1d1d; border-color: #fca5a5; }   /* echte Bieterlücke */
blo { background: #fef3c7; color: #78350f; border-color: #fcd34d; }   /* unechte Bieterlücke */
rw  { background: #ede9fe; color: #4c1d95; border-color: #c4b5fd; font-family: ui-monospace, 'JetBrains Mono', monospace; }
al::before  { content: "[A] "; opacity: .7; font-weight: 600; font-size: .85em; }
bl::before  { content: "[B!] "; opacity: .7; font-weight: 600; font-size: .85em; }
blo::before { content: "[B?] "; opacity: .7; font-weight: 600; font-size: .85em; }
rw::before  { content: "= ";   opacity: .7; font-weight: 600; }

/* Dark-Theme-Anpassungen für die Tags */
body.theme-dark al, body.theme-midnight al, body.theme-construction al,
body.theme-slate al, body.theme-forest al, body.theme-ocean al {
    background: rgba(59, 130, 246, .18); color: #bfdbfe; border-color: rgba(147, 197, 253, .4);
}
body.theme-dark bl, body.theme-midnight bl, body.theme-construction bl,
body.theme-slate bl, body.theme-forest bl, body.theme-ocean bl {
    background: rgba(220, 38, 38, .18); color: #fecaca; border-color: rgba(252, 165, 165, .4);
}
body.theme-dark blo, body.theme-midnight blo, body.theme-construction blo,
body.theme-slate blo, body.theme-forest blo, body.theme-ocean blo {
    background: rgba(202, 138, 4, .2);  color: #fde68a; border-color: rgba(252, 211, 77, .4);
}
body.theme-dark rw, body.theme-midnight rw, body.theme-construction rw,
body.theme-slate rw, body.theme-forest rw, body.theme-ocean rw {
    background: rgba(124, 58, 237, .2);  color: #ddd6fe; border-color: rgba(196, 181, 253, .4);
}

/* ---------- Cards / Forms ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    margin-bottom: 20px;
}
.card.section + .card.section { margin-top: -4px; }
.card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 14px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px 18px;
}
.grid.full { grid-template-columns: 1fr; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
    .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
}

.field { display: flex; flex-direction: column; }
label {
    display: block;
    font-size: 12px;
    color: var(--text-soft);
    margin-bottom: 6px;
    font-weight: 500;
}
label .req { color: var(--danger); margin-left: 2px; }

input[type=text], input[type=number], input[type=date], select, textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
input:hover:not(:focus):not([readonly]), select:hover:not(:focus), textarea:hover:not(:focus) {
    border-color: #b9c2cf;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
textarea { min-height: 72px; resize: vertical; }
input[readonly].computed {
    background: var(--primary-50);
    border-color: #c7dafd;
    color: var(--primary-600);
    font-weight: 600;
    cursor: default;
}
input[readonly].computed:hover { border-color: #c7dafd; }

.hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, transform .05s, box-shadow .15s;
    line-height: 1;
    white-space: nowrap;
}
.btn:hover { background: var(--primary-600); text-decoration: none; box-shadow: 0 1px 3px rgba(37,99,235,.3); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }

.btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border-2); }
.btn.secondary:hover { background: var(--surface-2); box-shadow: none; }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #b91c1c; box-shadow: 0 1px 3px rgba(220,38,38,.3); }
.btn.ghost { background: transparent; color: var(--text-soft); border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); box-shadow: none; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.icon-only { padding: 7px; }

.actions { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Filter / summary ---------- */
.filterbar {
    display: grid;
    /* repeat(auto-fit, …) darf laut CSS-Spec NICHT mit weiteren Track-Definitionen
       gemischt werden — Firefox lehnt das streng ab. Daher nur auto-fit, und die
       .filter-actions reihen sich am Ende mit ein. */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    align-items: end;
}
.filterbar .filter-actions { display: flex; gap: 8px; }

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}
.stat-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.stat-value { font-size: 22px; font-weight: 700; color: var(--text); margin-top: 6px; letter-spacing: -.01em; }
.stat-value.accent { color: var(--primary); }

/* ---------- Table ---------- */
.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.table-scroll { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
thead th {
    background: var(--surface-2);
    padding: 11px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--text-soft);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: #fafcff; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.strong { font-weight: 600; color: var(--text); }

/* LG/ULG/Pos.-Nr.-Spalten: nur so breit wie nötig, lassen den freien Platz den Textspalten */
td.col-lg, th.col-lg,
td.col-pos, th.col-pos,
td.col-ulg, th.col-ulg {
    width: 1%;
}
td.col-pos, th.col-pos { white-space: nowrap; }

/* Badges projektweit deaktiviert — als Plain-Inline-Text rendern */
.badge,
.badge.lb,
.badge.lg,
.badge.pos {
    display: inline;
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: inherit;
    font-weight: 600;
    color: inherit;
    letter-spacing: 0;
    line-height: inherit;
}
.badge.pos { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

.empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--text-muted);
}
.empty-icon {
    width: 48px; height: 48px;
    margin: 0 auto 12px;
    border-radius: 12px;
    background: var(--surface-2);
    display: grid; place-items: center;
    color: var(--text-muted);
}
.empty-icon svg { width: 24px; height: 24px; }
.empty h3 { color: var(--text); margin-bottom: 6px; font-size: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: 240px;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .25s ease;
        padding: 24px 16px;
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .content { padding: 60px 20px 20px; }
    .sidebar-toggle { display: grid; top: 10px; left: 10px; }
    body.sidebar-open .sidebar-toggle { display: none; }   /* offene Sidebar überdeckt → Hamburger weg */
    body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
    body.sidebar-collapsed .layout  { grid-template-columns: 1fr; }
}
@media (min-width: 821px) {
    /* Hamburger nur sichtbar zum Einklappen, schwebt über der Sidebar */
    .sidebar-toggle { left: 12px; top: 12px; }
}

/* ============================================================================
 * STYLE-POLISH v2026-04 — 12 Quick-Win-Verbesserungen
 * Dieses Modul kann komplett gelöscht werden, wenn unerwünscht.
 * Punkte aus dem Vorschlag: 2,3,4,5,6,7,8,10,11,12,13,15
 * ============================================================================ */

/* --- (8) Smooth Transitions auf interaktiven Elementen ------------------ */
.btn, .card, .nav-link, .submenu, a, button, input, select, textarea,
.stat-card, .filter-grid .field, table tr, .flash, .badge {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease,
                box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}

/* --- (4) Globaler Border-Radius leicht erhöht --------------------------- */
.card, .stat-card, .flash, .modal, .filter-grid {
    border-radius: 10px;
}
.btn { border-radius: 8px; }
input, select, textarea { border-radius: 6px; }

/* --- (5) Soft-Shadow-Stack (2 Ebenen) auf Cards ------------------------- */
.card, .stat-card {
    box-shadow:
        0 1px 2px rgba(15, 23, 41, .04),
        0 4px 12px rgba(15, 23, 41, .06);
}
.card:hover, .stat-card:hover {
    box-shadow:
        0 2px 4px rgba(15, 23, 41, .06),
        0 8px 24px rgba(15, 23, 41, .10);
}
body.theme-dark .card,
body.theme-dark .stat-card {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .4),
        0 4px 12px rgba(0, 0, 0, .5);
}

/* --- (2) Sticky Table-Header beim Scrollen ----------------------------- */
/*
 * Drei Voraussetzungen für funktionierendes sticky thead:
 * 1) Kein overflow:hidden/auto auf Vorfahren  → .table-wrap auf overflow:clip
 * 2) border-collapse:separate (NICHT collapse)  → sonst ignoriert der Browser sticky auf <th>
 * 3) position:sticky + top:0 auf <th>           → mit !important gegen bestehende Regeln
 *
 * Borders werden so umgebaut, dass das visuelle Ergebnis gleich bleibt.
 */
.table-wrap { overflow: clip !important; }
.table-wrap, .scroll-table { position: relative; }

/* .table-scroll erzeugte overflow-x:auto → CSS-Spec zwingt overflow-y auch auf auto
   → Scroll-Container → sticky klebt im Container statt am Viewport. Neutralisieren. */
.table-scroll { overflow: visible !important; }

html body table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
/* Border-Bottom an Zellen statt am tr/table — verhindert Doppel-Linien */
html body table tbody td,
html body table tbody th {
    border-bottom: 1px solid var(--border) !important;
    border-top: none !important;
}
html body table tbody tr:last-child td,
html body table tbody tr:last-child th {
    border-bottom: none !important;
}

html body table thead th,
html body thead th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: var(--surface-2, #f1f4f9) !important;
    /* Doppelter Border (top+bottom) als Pseudo-Trennung, da border-collapse:separate
       sonst zwischen Zellen Lücken lassen würde. box-shadow simuliert die Trennlinie. */
    border-bottom: 1px solid var(--border) !important;
    box-shadow: inset 0 -1px 0 var(--border, #e4e8ef);
}
html body.theme-dark table thead th {
    background: var(--surface-2) !important;
    box-shadow: inset 0 -1px 0 var(--border);
}

/* --- (3) Zebra-Streifen + tieferer Hover-Schatten ---------------------- */
table tbody tr:nth-child(even) td {
    background: rgba(15, 23, 41, .015);
}
body.theme-dark table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, .025);
}
table tbody tr:hover td {
    background: rgba(37, 99, 235, .06);
    box-shadow: inset 3px 0 0 #2563eb;
}
body.theme-dark table tbody tr:hover td {
    background: rgba(96, 165, 250, .10);
    box-shadow: inset 3px 0 0 #60a5fa;
}

/* --- (6) Buttons mit Gradient + Inset-Highlight ------------------------ */
.btn:not(.secondary):not(.btn-link) {
    background-image: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 50%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 1px 2px rgba(15, 23, 41, .12);
}
.btn:not(.secondary):not(.btn-link):hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 4px 10px rgba(15, 23, 41, .15);
}
.btn:not(.secondary):not(.btn-link):active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.15),
        0 1px 1px rgba(15, 23, 41, .08);
}

/* --- (12) Größere H2 mit leicht negativer letter-spacing -------------- */
h1 { font-size: 32px; letter-spacing: -0.025em; line-height: 1.2; }
h2 { font-size: 26px; letter-spacing: -0.02em;  line-height: 1.25; }
h3 { font-size: 19px; letter-spacing: -0.015em; line-height: 1.3; }
.page-header h1, .page-header h2 { margin-top: 0; }

/* --- (15) Mehr Whitespace zwischen Sektionen --------------------------- */
.card + .card,
.card + form.card,
.stat-card-grid + .card,
.section + .section {
    margin-top: 24px;
}
.page-header { margin-bottom: 24px; }
.card { padding: 16px 18px; }

/* --- (7) Empty-State-Styling ------------------------------------------ */
.empty-state {
    text-align: center;
    padding: 60px 30px;
    color: var(--text-soft, #475569);
}
.empty-state .empty-icon {
    width: 80px; height: 80px; margin: 0 auto 16px;
    opacity: .35;
    color: var(--text-soft, #475569);
}
.empty-state h3 {
    color: var(--text, #0f1729);
    margin: 0 0 8px;
}
.empty-state p { margin: 0 0 16px; max-width: 400px; margin-left: auto; margin-right: auto; }

/* --- (10) Toast / Flash Slide-in von rechts --------------------------- */
@keyframes flashSlideIn {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
.flash, .flash-success, .flash-error, .flash-warning {
    animation: flashSlideIn .35s ease-out;
}

/* --- (11) Breadcrumbs ------------------------------------------------- */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    color: var(--text-soft, #475569);
    margin: 0 0 14px;
    padding: 6px 0;
}
.breadcrumbs a {
    color: var(--text-soft, #475569);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
}
.breadcrumbs a:hover {
    background: var(--surface-2, #f1f4f9);
    color: var(--primary, #2563eb);
}
.breadcrumbs .sep {
    color: var(--border-2, #d7dde6);
    user-select: none;
}
.breadcrumbs .current {
    color: var(--text, #0f1729);
    font-weight: 600;
    padding: 2px 6px;
}

/* --- (13) Login-Seite: dezenter Pattern-Hintergrund + Hero-Card ------- */
body.login-page {
    background:
        radial-gradient(circle at 12% 20%, rgba(37, 99, 235, .08) 0%, transparent 40%),
        radial-gradient(circle at 88% 70%, rgba(99, 102, 241, .06) 0%, transparent 45%),
        var(--bg, #f6f8fb);
}
body.login-page .login-card,
body.login-page .auth-card,
body.login-page form.card {
    box-shadow:
        0 1px 2px rgba(15, 23, 41, .04),
        0 20px 60px rgba(15, 23, 41, .12);
    border-radius: 14px;
}
body.login-page.theme-dark {
    background:
        radial-gradient(circle at 12% 20%, rgba(96, 165, 250, .12) 0%, transparent 40%),
        radial-gradient(circle at 88% 70%, rgba(99, 102, 241, .10) 0%, transparent 45%),
        var(--bg);
}

/* --- Reduced-Motion-Support (Accessibility) --------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* === Rang-Pokal-Symbole — Gold/Silber/Bronze via CSS-Filter === */
.rang-zahl {
    display: inline-block;
    font-weight: 600;
    margin-right: 4px;
    color: #1e293b;
}
.pokal {
    display: inline-block;
    font-size: 1.05em;
    vertical-align: middle;
    line-height: 1;
}
/* Gold (Default) — Emoji 🏆 ist nativ goldfarben, keine Filter nötig */
.pokal-gold {
    /* slight saturation boost for emphasis */
    filter: saturate(1.2) drop-shadow(0 1px 1px rgba(245,158,11,.4));
}
/* Silber — Graustufen + leichte Aufhellung */
.pokal-silver {
    filter: grayscale(1) brightness(1.25) contrast(0.9);
}
/* Bronze — rotbrauner Hue-Shift */
.pokal-bronze {
    filter: hue-rotate(-30deg) saturate(0.7) brightness(0.7);
}
body.theme-dark .rang-zahl { color: #e2e8f0; }

/* === Ende Style-Polish-Modul === */