/* Seitenuebergreifendes Chrome-CSS (Scrollbar, Navigation, …).
   Lag bis dahin als 12-KB-Inline-Block in inc/header.php und wurde damit bei
   JEDEM Seitenaufruf neu uebertragen. Als Datei ist es cachebar. */
/* ── Scrollbar – Tailwind Blue ──────────────────────────────────────── */
::-webkit-scrollbar              { width: 8px; height: 8px; }
::-webkit-scrollbar-track        { background: #0f172a; }
::-webkit-scrollbar-thumb        { background: #2563eb; border-radius: 99px; border: 2px solid #0f172a; }
::-webkit-scrollbar-thumb:hover  { background: #3b82f6; }
::-webkit-scrollbar-corner       { background: #0f172a; }
:root:not(.dark) ::-webkit-scrollbar-track       { background: #f1f5f9; }
:root:not(.dark) ::-webkit-scrollbar-thumb        { background: #2563eb; border-color: #f1f5f9; }
:root:not(.dark) ::-webkit-scrollbar-thumb:hover  { background: #1d4ed8; }
:root:not(.dark) ::-webkit-scrollbar-corner       { background: #f1f5f9; }
* { scrollbar-color: #2563eb #0f172a; scrollbar-width: thin; }
:root:not(.dark) * { scrollbar-color: #2563eb #f1f5f9; }

/* ═══ Enterprise-Navigation ═══════════════════════════════════════════ */
:root { --vs-ease: cubic-bezier(.32,.72,0,1); }

/* ── Header-Grundzustand + Scroll-Zustand (schwebende Glas-Leiste) ──── */
#vs-header {
    transition: background-color .5s var(--vs-ease),
                border-color .5s var(--vs-ease),
                box-shadow .5s var(--vs-ease),
                backdrop-filter .5s var(--vs-ease);
}
#vs-header.is-scrolled {
    background-color: rgba(255,255,255,.82);
    border-bottom-color: rgba(226,232,240,.9);
    box-shadow: 0 1px 0 rgba(15,23,42,.04),
                0 12px 34px -18px rgba(15,23,42,.28);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
}
.dark #vs-header.is-scrolled {
    background-color: rgba(2,6,23,.72);
    border-bottom-color: rgba(255,255,255,.08);
    box-shadow: 0 1px 0 rgba(255,255,255,.04),
                0 12px 40px -18px rgba(0,0,0,.6);
}

/* ── Logo ───────────────────────────────────────────────────────────── */
.vs-logo-glow {
    position: absolute; inset: -6px; border-radius: 9999px;
    background: radial-gradient(circle, rgba(37,99,235,.35), transparent 70%);
    opacity: 0; transition: opacity .5s var(--vs-ease);
    pointer-events: none;
}
.vs-logo:hover .vs-logo-glow { opacity: 1; }

/* ── Desktop Nav-Item (Pill-Hover + Active-State) ───────────────────── */
.nav-item {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-radius: 9999px;
    font-size: .875rem; font-weight: 500; letter-spacing: -.011em;
    color: #475569; text-decoration: none; white-space: nowrap;
    transition: color .45s var(--vs-ease), background-color .45s var(--vs-ease);
}
.dark .nav-item { color: #94a3b8; }
.nav-item svg { transition: transform .45s var(--vs-ease); opacity: .85; }
.nav-item:hover { color: #0f172a; background: rgba(15,23,42,.045); }
.dark .nav-item:hover { color: #f8fafc; background: rgba(255,255,255,.06); }
.nav-item:hover svg { transform: translateY(-1px) scale(1.06); opacity: 1; }
.nav-item.is-primary { color: #2563eb; }
.dark .nav-item.is-primary { color: #60a5fa; }
.nav-item.is-active { color: #2563eb; background: rgba(37,99,235,.09); }
.dark .nav-item.is-active { color: #93c5fd; background: rgba(37,99,235,.16); }
.nav-item.is-active svg { opacity: 1; }
/* zarter Active-Indikator-Punkt */
.nav-item.is-active::after {
    content: ''; position: absolute; left: 50%; bottom: -7px;
    width: 4px; height: 4px; border-radius: 9999px; background: #2563eb;
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 8px rgba(37,99,235,.7);
}
.dark .nav-item.is-active::after { background: #60a5fa; }

/* ── Icon-Button (Theme, Logout, Hamburger) ─────────────────────────── */
.vs-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 9999px;
    color: #64748b; background: transparent;
    transition: color .4s var(--vs-ease), background-color .4s var(--vs-ease), transform .4s var(--vs-ease);
}
.dark .vs-icon-btn { color: #94a3b8; }
.vs-icon-btn:hover { color: #0f172a; background: rgba(15,23,42,.05); }
.dark .vs-icon-btn:hover { color: #f1f5f9; background: rgba(255,255,255,.07); }
.vs-icon-btn:active { transform: scale(.92); }
.vs-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,.5); }

/* ── Vertikaler Hairline-Divider ────────────────────────────────────── */
.vs-divider { width: 1px; height: 22px; background: linear-gradient(to bottom, transparent, rgba(15,23,42,.14), transparent); }
.dark .vs-divider { background: linear-gradient(to bottom, transparent, rgba(255,255,255,.14), transparent); }

/* ── Primär-CTA: Button-in-Button-Architektur ───────────────────────── */
.nav-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 6px 6px 17px; border-radius: 9999px;
    font-size: .875rem; font-weight: 600; letter-spacing: -.011em;
    color: #fff; text-decoration: none; white-space: nowrap;
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
                0 1px 2px rgba(37,99,235,.35),
                0 10px 22px -10px rgba(37,99,235,.65);
    transition: transform .45s var(--vs-ease), box-shadow .45s var(--vs-ease), filter .45s var(--vs-ease);
}
.nav-cta:hover {
    filter: saturate(1.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
                0 2px 4px rgba(37,99,235,.4),
                0 16px 30px -10px rgba(37,99,235,.75);
}
.nav-cta:active { transform: scale(.97); }
.nav-cta-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 9999px;
    background: rgba(255,255,255,.2);
    transition: transform .45s var(--vs-ease), background-color .45s var(--vs-ease);
}
.nav-cta:hover .nav-cta-icon { transform: translate(2px,-1px); background: rgba(255,255,255,.28); }

/* ── Mobile-Menü: grid-Slide-Animation ──────────────────────────────── */
#mobile-menu {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .4s var(--vs-ease);
}
#mobile-menu.vs-open { grid-template-rows: 1fr; }
#mobile-menu > div { min-height: 0; overflow: hidden; }

/* ── Mobile-Item + gestaffelte Reveal-Animation ─────────────────────── */
.mobile-item {
    position: relative;
    display: flex; align-items: center; gap: 13px;
    padding: 12px 14px; border-radius: 14px;
    font-size: .95rem; font-weight: 500; color: #334155;
    text-decoration: none;
    opacity: 0; transform: translateY(9px);
    transition: opacity .5s var(--vs-ease), transform .5s var(--vs-ease),
                background-color .3s var(--vs-ease), color .3s var(--vs-ease);
}
.dark .mobile-item { color: #cbd5e1; }
#mobile-menu.vs-open .mobile-item { opacity: 1; transform: translateY(0); }
.mobile-item svg { opacity: .75; transition: opacity .3s var(--vs-ease), transform .45s var(--vs-ease); }
.mobile-item:hover { background: rgba(15,23,42,.045); color: #2563eb; }
.dark .mobile-item:hover { background: rgba(255,255,255,.06); color: #93c5fd; }
.mobile-item:hover svg { opacity: 1; transform: translateX(2px); }
.mobile-item.is-active { background: rgba(37,99,235,.09); color: #2563eb; }
.dark .mobile-item.is-active { background: rgba(37,99,235,.16); color: #93c5fd; }
.mobile-item.is-active svg { opacity: 1; }
.mobile-item.is-primary { color: #2563eb; font-weight: 600; }
.dark .mobile-item.is-primary { color: #60a5fa; }

/* ── Hamburger / X Morph ────────────────────────────────────────────── */
#vs-icon-ham { transition: opacity .3s var(--vs-ease), transform .3s var(--vs-ease); }
#vs-icon-x   { position: absolute; top: 50%; left: 50%;
                transform: translate(-50%,-50%) rotate(-45deg);
                opacity: 0; transition: opacity .3s var(--vs-ease), transform .3s var(--vs-ease); }
#mobile-menu-btn { position: relative; }
#mobile-menu-btn.vs-open #vs-icon-ham { opacity: 0; transform: rotate(45deg); }
#mobile-menu-btn.vs-open #vs-icon-x   { opacity: 1; transform: translate(-50%,-50%) rotate(0deg); }

/* ── Benutzer-Dropdown ──────────────────────────────────────────────── */
.vs-account { position: relative; }
.vs-account-trigger {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
    padding: 5px 9px 5px 6px; border: 0; border-radius: 9999px;
    color: #475569; background: transparent; cursor: pointer;
    font: inherit; transition: color .35s var(--vs-ease), background-color .35s var(--vs-ease), transform .35s var(--vs-ease);
}
.dark .vs-account-trigger { color: #cbd5e1; }
.vs-account-trigger:hover, .vs-account-trigger[aria-expanded="true"] { color: #0f172a; background: rgba(15,23,42,.06); }
.dark .vs-account-trigger:hover, .dark .vs-account-trigger[aria-expanded="true"] { color: #f8fafc; background: rgba(255,255,255,.08); }
.vs-account-trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,.5); }
.vs-account-chevron { transition: transform .35s var(--vs-ease); }
.vs-account-trigger[aria-expanded="true"] .vs-account-chevron { transform: rotate(180deg); }
.vs-account-menu {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 232px;
    padding: 7px; border: 1px solid rgba(226,232,240,.9); border-radius: 16px;
    background: rgba(255,255,255,.96); box-shadow: 0 18px 45px -18px rgba(15,23,42,.35), 0 4px 12px rgba(15,23,42,.08);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right;
    transition: opacity .2s var(--vs-ease), visibility .2s var(--vs-ease), transform .2s var(--vs-ease);
}
.dark .vs-account-menu { border-color: rgba(51,65,85,.9); background: rgba(15,23,42,.97); box-shadow: 0 18px 45px -18px rgba(0,0,0,.65); }
.vs-account-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.vs-account-menu-label { padding: 8px 10px 7px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
.vs-account-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: 11px;
    color: #475569; text-decoration: none; font-size: .875rem; font-weight: 600;
    transition: color .25s var(--vs-ease), background-color .25s var(--vs-ease), transform .25s var(--vs-ease);
}
.dark .vs-account-menu-item { color: #cbd5e1; }
.vs-account-menu-item:hover, .vs-account-menu-item:focus-visible, .vs-account-menu-item.is-current { color: #2563eb; background: rgba(37,99,235,.09); outline: none; transform: translateX(2px); }
.dark .vs-account-menu-item:hover, .dark .vs-account-menu-item:focus-visible, .dark .vs-account-menu-item.is-current { color: #93c5fd; background: rgba(37,99,235,.16); }
#mobile-account .vs-account-menu { position: static; width: 100%; margin-top: 4px; padding: 4px; box-shadow: none; border-radius: 13px; }
#mobile-account .vs-account-menu-label { display: none; }
.vs-account-menu-item.is-danger:hover, .vs-account-menu-item.is-danger:focus-visible { color: #dc2626; background: rgba(239,68,68,.08); }
.dark .vs-account-menu-item.is-danger:hover, .dark .vs-account-menu-item.is-danger:focus-visible { color: #fca5a5; background: rgba(239,68,68,.14); }
.vs-account-menu-divider { height: 1px; margin: 6px 4px; background: #e2e8f0; }
.dark .vs-account-menu-divider { background: #334155; }
.vs-account-menu-item svg { flex: 0 0 auto; opacity: .8; }