/* ============================================================
   GTI7 – Theme 2026
   Navigation, Hintergrund, Animationen und Effekte.
   Wird als letztes Stylesheet geladen und überschreibt app.css.
   ============================================================ */

@property --spot { syntax: '<number>'; inherits: false; initial-value: 0; }

:root {
    --nav-h: 60px;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --grad: linear-gradient(135deg, var(--c-accent), var(--c-accent2));
    --panel: rgba(24, 28, 43, .98);
}

::selection { background: rgba(74,158,255,.35); color: #fff; }
html { scrollbar-color: #2a3048 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #262b40; border-radius: 10px; border: 2px solid var(--c-bg); }
::-webkit-scrollbar-thumb:hover { background: #34405f; }

/* ============================================================
   ANIMIERTER HINTERGRUND
   ============================================================ */
.fx-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-blob { position: absolute; border-radius: 50%; filter: blur(100px); will-change: transform; }
.fx-blob--1 { width: 560px; height: 560px; background: #4a9eff; opacity: .18; top: -220px; left: -140px; animation: fxFloat1 24s ease-in-out infinite alternate; }
.fx-blob--2 { width: 480px; height: 480px; background: #6f5aff; opacity: .16; top: 35%; right: -180px; animation: fxFloat2 28s ease-in-out infinite alternate; }
.fx-blob--3 { width: 420px; height: 420px; background: #e74c3c; opacity: .07; bottom: -200px; left: 25%; animation: fxFloat3 32s ease-in-out infinite alternate; }
.fx-grid {
    position: absolute; inset: -48px 0 0;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 75%);
    animation: fxGrid 18s linear infinite;
}
@keyframes fxFloat1 { to { transform: translate(180px, 140px) scale(1.15); } }
@keyframes fxFloat2 { to { transform: translate(-200px, -120px) scale(.9); } }
@keyframes fxFloat3 { to { transform: translate(-160px, -180px) scale(1.2); } }
@keyframes fxGrid   { to { transform: translateY(48px); } }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    height: var(--nav-h);
    background: rgba(13,15,20,.55);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom-color: transparent;
    transition: background .35s, box-shadow .35s, border-color .35s;
}
.navbar.is-scrolled {
    background: rgba(13,15,20,.86);
    border-bottom-color: var(--c-border);
    box-shadow: 0 12px 32px -14px rgba(0,0,0,.75);
}
.navbar::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(74,158,255,.7), rgba(111,90,255,.7), transparent);
    background-size: 200% 100%; opacity: .55;
    animation: navLine 7s linear infinite;
}
@keyframes navLine { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.navbar__progress {
    position: absolute; top: 0; left: 0; z-index: 2; height: 2px; width: 100%;
    transform-origin: 0 50%; transform: scaleX(var(--p, 0));
    background: var(--grad); box-shadow: 0 0 10px rgba(74,158,255,.8);
}
.navbar__inner { gap: 1rem; }

/* Logo */
.navbar__logo { gap: 10px; letter-spacing: .02em; }
.navbar__logo-icon {
    position: relative; overflow: hidden; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 10px;
    display: inline-grid; place-items: center;
    background: var(--grad); font-size: 16px;
    box-shadow: 0 4px 18px -4px rgba(74,158,255,.75);
    transition: transform .45s var(--ease-spring), box-shadow .3s;
}
.navbar__logo .navbar__logo-icon i, .footer__brand .navbar__logo-icon i { color: #fff; }
.navbar__logo-icon::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
    transform: translateX(-130%); animation: logoShine 5s ease-in-out infinite;
}
@keyframes logoShine { 0%, 70% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.navbar__logo:hover .navbar__logo-icon { transform: rotate(-10deg) scale(1.1); box-shadow: 0 6px 24px -4px rgba(111,90,255,.9); }
.navbar__logo strong, .footer__brand strong {
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Hauptmenü */
.navbar__nav { position: relative; align-items: center; gap: .15rem; margin: 0 auto; }
.nav-indicator {
    position: absolute; top: 50%; left: 0; height: 38px; width: var(--w, 0);
    transform: translate(var(--x, 0), -50%);
    border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
    opacity: 0; pointer-events: none; z-index: 0;
    transition: transform .4s var(--ease-out), width .4s var(--ease-out), opacity .25s;
}
.nav-indicator.is-on { opacity: 1; }
.navbar__link {
    position: relative; z-index: 1; height: 38px; padding: 0 .85rem;
    border-radius: 10px; border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 500; color: var(--c-text2);
}
.navbar__link:hover { background: none; color: var(--c-text); }
.navbar__nav:not(.has-indicator) .navbar__link:hover { background: var(--c-surface); }
.navbar__link > i:first-child { transition: transform .35s var(--ease-spring), color .25s; }
.navbar__link:hover > i:first-child { transform: translateY(-2px) scale(1.18); color: var(--c-accent); }
.navbar__link.is-active { color: var(--c-text); }
.navbar__link.is-active::after {
    content: ''; position: absolute; left: 50%; bottom: -11px; width: 26px; height: 3px;
    border-radius: 3px 3px 0 0; transform: translateX(-50%);
    background: var(--grad); box-shadow: 0 0 14px rgba(74,158,255,.9);
    animation: activeIn .6s var(--ease-spring) both;
}
@keyframes activeIn { from { width: 0; opacity: 0; } }
.navbar__link--admin, .navbar__link--admin:hover > i:first-child { color: var(--c-orange); }
.navbar__link--admin:hover { background: none; color: #f39c4a; }
.navbar__link--admin.is-active::after { background: var(--c-orange); box-shadow: 0 0 14px rgba(230,126,34,.9); }

/* Mega-Dropdowns */
.nav-group { position: relative; }
.nav-group__caret { font-size: 9px; opacity: .6; transition: transform .35s var(--ease-out); }
.nav-group:hover .nav-group__caret, .nav-group.is-open .nav-group__caret { transform: rotate(180deg); opacity: 1; }
.nav-mega {
    position: absolute; top: calc(100% + 14px); left: 50%; z-index: 10;
    width: 310px; padding: .5rem;
    background: var(--panel); border: 1px solid var(--c-border2); border-radius: 16px;
    box-shadow: 0 28px 70px -16px rgba(0,0,0,.8), 0 0 0 1px rgba(74,158,255,.05), 0 0 40px -10px rgba(74,158,255,.15);
    opacity: 0; visibility: hidden;
    transform: translate(-50%, 12px) scale(.95); transform-origin: top center;
    transition: opacity .25s var(--ease-out), transform .4s var(--ease-out), visibility 0s .4s;
}
.nav-mega--wide { width: 540px; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; }
.nav-mega::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } /* Hover-Brücke */
.nav-mega::after {
    content: ''; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px;
    background: var(--panel); border-left: 1px solid var(--c-border2); border-top: 1px solid var(--c-border2);
    transform: translateX(-50%) rotate(45deg); border-radius: 3px 0 0 0;
}
.nav-group:hover .nav-mega,
.nav-group.is-open .nav-mega,
.nav-group:has(.nav-mega :focus-visible) .nav-mega {
    opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s;
}
.nav-mega__item {
    position: relative; display: flex; align-items: center; gap: .8rem;
    padding: .65rem .75rem; border-radius: 12px; color: var(--c-text);
    opacity: 0; transform: translateY(8px);
    transition: background .2s, opacity .3s var(--ease-out), transform .4s var(--ease-out);
}
.nav-group:hover .nav-mega__item,
.nav-group.is-open .nav-mega__item,
.nav-group:has(.nav-mega :focus-visible) .nav-mega__item {
    opacity: 1; transform: none;
    transition-delay: 0s, calc(var(--i) * 50ms + 60ms), calc(var(--i) * 50ms + 60ms);
}
.nav-mega__item:hover, .nav-mega__item:focus-visible { background: color-mix(in srgb, var(--c) 12%, transparent); outline: none; }
.nav-mega__item.is-active { background: color-mix(in srgb, var(--c) 9%, transparent); }
.nav-mega__icon {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px;
    display: grid; place-items: center; font-size: 17px; color: var(--c);
    background: color-mix(in srgb, var(--c) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
    transition: transform .4s var(--ease-spring), box-shadow .3s, background .3s, color .3s;
}
.nav-mega__item:hover .nav-mega__icon { transform: scale(1.1) rotate(-8deg); background: var(--c); color: #fff; box-shadow: 0 8px 22px -6px var(--c); }
.nav-mega__text { min-width: 0; }
.nav-mega__text strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; transition: color .2s; }
.nav-mega__text small { display: block; font-size: 12px; color: var(--c-text2); line-height: 1.35; }
.nav-mega__item.is-active strong, .nav-mega__item:hover strong { color: var(--c); }

/* Benutzerbereich */
.navbar__user { gap: .5rem; flex-shrink: 0; }
.navbar__ts {
    width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0;
    border-radius: 10px; border: 1px solid var(--c-border); color: var(--c-text2); font-size: 17px;
    transition: transform .3s var(--ease-spring), background .25s, color .25s, box-shadow .3s, border-color .25s;
}
.navbar__ts:hover { color: #fff; background: #2580c3; border-color: transparent; transform: translateY(-2px); box-shadow: 0 10px 22px -8px #2580c3; }
.navbar__avatar-btn {
    border-radius: 999px; padding: .25rem .75rem .25rem .25rem; cursor: pointer;
    background: rgba(255,255,255,.04); border-color: var(--c-border);
}
.navbar__avatar-btn:hover, .navbar__dropdown:focus-within .navbar__avatar-btn {
    background: rgba(255,255,255,.07); border-color: rgba(74,158,255,.4); box-shadow: 0 0 0 3px rgba(74,158,255,.12);
}
.navbar__avatar-btn .fa-chevron-down { transition: transform .35s var(--ease-out); }
.navbar__dropdown:hover .navbar__avatar-btn .fa-chevron-down,
.navbar__dropdown:focus-within .navbar__avatar-btn .fa-chevron-down { transform: rotate(180deg); }
.navbar__avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.navbar__avatar { width: 30px; height: 30px; }
.navbar__avatar-wrap .online-dot {
    position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
    border: 2px solid var(--c-bg); animation: pulseRing 2.2s infinite;
}
@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(46,204,113,.6); }
    70%  { box-shadow: 0 0 0 7px rgba(46,204,113,0); }
    100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}
.navbar__dropdown-menu {
    z-index: 10; min-width: 230px; border-radius: 16px; background: var(--panel); visibility: hidden;
    box-shadow: 0 28px 70px -16px rgba(0,0,0,.8), 0 0 40px -10px rgba(74,158,255,.15);
    transform: translateY(-10px) scale(.95); transform-origin: top right;
    transition: opacity .25s var(--ease-out), transform .4s var(--ease-out), visibility 0s .4s;
}
.navbar__dropdown:focus-within .navbar__dropdown-menu,
.navbar__dropdown:hover .navbar__dropdown-menu { visibility: visible; transform: none; transition-delay: 0s; }
.navbar__dropdown-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.dropdown-item { border-radius: 10px; cursor: pointer; }
.dropdown-item i { width: 16px; text-align: center; transition: transform .3s var(--ease-spring); }
.dropdown-item:hover { transform: translateX(3px); }
.dropdown-item:hover i { transform: scale(1.2); }

/* Hamburger */
.navbar__mobile-toggle {
    position: relative; width: 40px; height: 40px; padding: 0; cursor: pointer;
    border-radius: 10px; border: 1px solid var(--c-border); background: rgba(255,255,255,.04);
}
.navbar__mobile-toggle span {
    position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--c-text);
    transition: transform .4s var(--ease-out), opacity .2s, top .4s var(--ease-out);
}
.navbar__mobile-toggle span:nth-child(1) { top: 13px; }
.navbar__mobile-toggle span:nth-child(2) { top: 19px; right: 15px; }
.navbar__mobile-toggle span:nth-child(3) { top: 25px; }
.is-drawer-open .navbar__mobile-toggle span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.is-drawer-open .navbar__mobile-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.is-drawer-open .navbar__mobile-toggle span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* ============================================================
   MOBILES MENÜ (Drawer)
   ============================================================ */
.nav-drawer { position: fixed; inset: 0; z-index: 300; visibility: hidden; transition: visibility 0s .5s; }
.nav-drawer.is-open { visibility: visible; transition-delay: 0s; }
.nav-drawer__backdrop {
    position: absolute; inset: 0; background: rgba(5,6,10,.6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .4s;
}
.nav-drawer.is-open .nav-drawer__backdrop { opacity: 1; }
.nav-drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #171b2a, #0f121b);
    border-left: 1px solid var(--c-border2); box-shadow: -30px 0 60px -20px rgba(0,0,0,.75);
    transform: translateX(100%); transition: transform .5s var(--ease-out);
}
.nav-drawer.is-open .nav-drawer__panel { transform: none; }
.nav-drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); padding: 0 1rem; border-bottom: 1px solid var(--c-border); }
.nav-drawer__close {
    width: 40px; height: 40px; border-radius: 10px; cursor: pointer; font-size: 18px;
    border: 1px solid var(--c-border); background: rgba(255,255,255,.04); color: var(--c-text);
    transition: transform .4s var(--ease-spring), background .2s;
}
.nav-drawer__close:hover { transform: rotate(90deg); background: rgba(231,76,60,.15); }
.nav-drawer__body { flex: 1; overflow-y: auto; padding: .5rem .75rem 1rem; overscroll-behavior: contain; }
.nav-drawer__label {
    padding: 1.1rem .75rem .35rem; font-size: 11px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--c-text3);
}
.nav-drawer__link {
    display: flex; align-items: center; gap: .85rem; padding: .55rem .75rem; margin-bottom: 2px;
    border-radius: 12px; color: var(--c-text2); font-size: 15px; font-weight: 500;
}
.nav-drawer__link i {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; font-size: 15px;
    color: var(--c, var(--c-accent)); background: color-mix(in srgb, var(--c, var(--c-accent)) 14%, transparent);
}
.nav-drawer__link:hover, .nav-drawer__link.is-active { background: rgba(255,255,255,.05); color: var(--c-text); }
.nav-drawer__link.is-active { box-shadow: inset 3px 0 0 var(--c, var(--c-accent)); }
.nav-drawer__link, .nav-drawer__label {
    opacity: 0; transform: translateX(28px);
    transition: opacity .4s var(--ease-out), transform .55s var(--ease-out), background .2s, color .2s;
}
.nav-drawer.is-open .nav-drawer__link,
.nav-drawer.is-open .nav-drawer__label {
    opacity: 1; transform: none;
    transition-delay: calc(var(--i) * 35ms + 150ms), calc(var(--i) * 35ms + 150ms), 0s, 0s;
}
.nav-drawer__foot { display: grid; gap: .5rem; padding: 1rem; border-top: 1px solid var(--c-border); }
html.is-drawer-open { overflow: hidden; }

/* ============================================================
   SEITENINHALT
   ============================================================ */
.main-content { position: relative; }

.page-header { animation: fadeDown .7s var(--ease-out) both; }
.page-title i { display: inline-block; animation: iconPop .9s var(--ease-spring) .15s both; }
.page-subtitle { animation: fadeUp .7s var(--ease-out) .1s both; }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(18px); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-14px); } }
@keyframes iconPop  { from { opacity: 0; transform: scale(.3) rotate(-30deg); } }

/* Scroll-Reveal (Klassen setzt app.js) */
.reveal { opacity: 0; transform: translateY(28px) scale(.98); }
.reveal.is-visible {
    opacity: 1; transform: none;
    transition: opacity .7s var(--ease-out) var(--rd, 0s), transform .9s var(--ease-out) var(--rd, 0s);
}

/* Karten: Spotlight folgt der Maus */
.card, .stat-card { position: relative; }
.card::before, .stat-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(74,158,255, calc(var(--spot) * .09)), transparent 45%);
    transition: --spot .45s;
}
.card:hover::before, .stat-card:hover::before { --spot: 1; }
.card { transition: border-color .35s, box-shadow .35s; }
.card:hover { border-color: rgba(74,158,255,.16); box-shadow: 0 18px 50px -24px rgba(74,158,255,.35); }

/* Statistik-Karten */
.stat-card {
    overflow: hidden;
    transition: transform .4s var(--ease-out), border-color .3s, box-shadow .4s;
}
.stat-card:hover { transform: translateY(-5px); border-color: rgba(74,158,255,.3); box-shadow: 0 18px 44px -18px rgba(74,158,255,.5); }
.stat-card__icon { transition: transform .55s var(--ease-spring), box-shadow .3s; }
.stat-card:hover .stat-card__icon { transform: rotate(-12deg) scale(1.15); box-shadow: 0 0 24px -4px currentColor; }
.stat-card__value { font-variant-numeric: tabular-nums; }
.stat-card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%);
    transform: translateX(-110%); transition: transform .9s var(--ease-out);
}
.stat-card:hover::after { transform: translateX(110%); }

/* Bento-Karten (Startseite) */
.bento-card { transition: transform .35s var(--ease-out), box-shadow .35s; transform-style: preserve-3d; }
.bento-card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.14), transparent 50%);
    opacity: 0; transition: opacity .35s;
}
.bento-card:hover::after { opacity: 1; }
.bento-card__glow { animation: glowPulse 5s ease-in-out infinite; }
@keyframes glowPulse { 50% { transform: scale(1.25); } }

/* Buttons */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn:active { transform: scale(.96); }
.btn--primary {
    background-image: linear-gradient(110deg, var(--c-accent), var(--c-accent2) 50%, var(--c-accent));
    background-size: 200% 100%; background-position: 0 0;
    transition: background-position .6s var(--ease-out), transform .25s var(--ease-out), box-shadow .3s, filter .2s;
}
.btn--primary:hover { background-position: 100% 0; box-shadow: 0 8px 26px -6px rgba(111,90,255,.6); }
.btn--primary::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-130%); transition: transform .8s var(--ease-out);
}
.btn--primary:hover::after { transform: translateX(130%); }
.btn--ghost:hover { border-color: rgba(74,158,255,.35); }
.btn .ripple {
    position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
    background: rgba(255,255,255,.35); transform: scale(0); animation: ripple .65s ease-out forwards;
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* Formulare */
.form-input { transition: border-color .25s, box-shadow .3s, background .25s; }
.form-input:hover:not(:focus) { border-color: rgba(255,255,255,.2); }
.form-input:focus { background: var(--c-bg3); box-shadow: 0 0 0 4px rgba(74,158,255,.15), 0 0 24px -8px rgba(74,158,255,.5); }

/* Listenzeilen */
.cs-row, .lb-row { transition: background .25s, box-shadow .25s; }
a.cs-row:hover, a.lb-row:hover {
    background: linear-gradient(90deg, rgba(74,158,255,.1), rgba(74,158,255,.02) 60%, transparent);
    box-shadow: inset 3px 0 0 var(--c-accent);
}
tbody tr { transition: background .2s; }

/* Alerts */
.alert { animation: alertIn .6s var(--ease-spring) both; }
@keyframes alertIn { from { opacity: 0; transform: translateY(-12px) scale(.97); } }

/* Hero (Startseite) */
.hero__title span {
    background: linear-gradient(90deg, #4a9eff, #8f7bff, #4a9eff);
    background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: gradientMove 4s linear infinite;
}
@keyframes gradientMove { to { background-position: -200% center; } }
.hero__content > * { animation: fadeUp .8s var(--ease-out) both; }
.hero__content > :nth-child(2) { animation-delay: .08s; }
.hero__content > :nth-child(3) { animation-delay: .16s; }
.hero__content > :nth-child(4) { animation-delay: .24s; }
.server-status-card { animation: floatIn 1s var(--ease-out) .3s both; transition: transform .4s var(--ease-out), box-shadow .4s, border-color .3s; }
.server-status-card:hover { transform: translateY(-4px); border-color: rgba(46,204,113,.3); box-shadow: 0 20px 50px -20px rgba(46,204,113,.35); }
@keyframes floatIn { from { opacity: 0; transform: translateX(30px) scale(.96); } }

/* Abschnitts-Titel */
.section-title i { transition: transform .4s var(--ease-spring); }
.section-header:hover .section-title i { transform: scale(1.2) rotate(-8deg); }
.bento-label::after { width: 0; animation: lineGrow .9s var(--ease-out) .2s forwards; background: var(--grad); }
@keyframes lineGrow { to { width: 40px; } }

/* Podium (CS:S) */
.podium__bar { transform-origin: bottom; animation: growUp 1s var(--ease-out) both; }
.podium__slot:nth-child(1) .podium__bar { animation-delay: .25s; }
.podium__slot:nth-child(2) .podium__bar { animation-delay: .1s; }
.podium__slot:nth-child(3) .podium__bar { animation-delay: .4s; }
@keyframes growUp { from { transform: scaleY(0); } }
.podium__avatar { transition: transform .45s var(--ease-spring); }
.podium__slot:hover .podium__avatar { transform: translateY(-6px) scale(1.08); }

/* Badges der Banliste */
.cs-badge--red { animation: badgeGlow 2.4s ease-in-out infinite; }
@keyframes badgeGlow { 50% { box-shadow: 0 0 12px -2px rgba(231,76,60,.6); } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    position: relative; margin-top: 4rem; padding: 3rem 1.5rem 1.5rem;
    border-top: none; background: linear-gradient(180deg, transparent, rgba(74,158,255,.035));
}
.footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(74,158,255,.5), rgba(111,90,255,.5), transparent);
    background-size: 200% 100%; animation: navLine 9s linear infinite;
}
.footer__inner { max-width: 1152px; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem; align-items: start; }
.footer__brand { gap: 10px; font-size: 18px; color: var(--c-text); }
.footer__brand .navbar__logo-icon { width: 30px; height: 30px; font-size: 14px; }
.footer__about p { margin: .8rem 0 1.1rem; max-width: 320px; font-size: 14px; line-height: 1.65; color: var(--c-text2); }
.footer__title {
    margin-bottom: .8rem; font-family: var(--font-head); font-size: 14px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--c-text);
}
.footer__col { display: flex; flex-direction: column; gap: .5rem; }
.footer__col a { position: relative; width: fit-content; font-size: 14px; color: var(--c-text3); transition: color .2s, transform .3s var(--ease-out); }
.footer__col a::after {
    content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
    background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out);
}
.footer__col a:hover { color: var(--c-text); transform: translateX(3px); }
.footer__col a:hover::after { transform: scaleX(1); }
.footer__copy { grid-column: 1 / -1; padding-top: 1.25rem; border-top: 1px solid var(--c-border); text-align: center; }

/* Nach-oben-Button */
.to-top {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
    width: 46px; height: 46px; border-radius: 14px; cursor: pointer; font-size: 16px;
    border: 1px solid rgba(74,158,255,.35); background: rgba(19,22,32,.85); color: var(--c-accent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; transform: translateY(24px) scale(.8); pointer-events: none;
    transition: opacity .35s, transform .45s var(--ease-spring), background .25s, color .25s, box-shadow .3s;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--grad); color: #fff; border-color: transparent; transform: translateY(-4px); box-shadow: 0 14px 30px -10px rgba(111,90,255,.8); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 1001px) {
    .nav-drawer { display: none; }
}
@media (max-width: 1000px) {
    .navbar__nav, .navbar__nav.open { display: none; }
    .navbar__mobile-toggle { display: block; }
    .navbar__user { margin-left: auto; }
    .footer__inner { grid-template-columns: repeat(2, 1fr); }
    .footer__about { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .navbar__username, .navbar__avatar-btn > .fa-chevron-down { display: none; }
    .navbar__avatar-btn { padding: .25rem; }
    .fx-blob { filter: blur(70px); }
    .fx-blob--1 { width: 340px; height: 340px; }
    .fx-blob--2 { width: 300px; height: 300px; }
    .fx-blob--3 { display: none; }
    .to-top { right: .9rem; bottom: .9rem; }
}
@media (max-width: 420px) {
    .navbar__login span, .navbar__ts { display: none; }
}

/* Weniger Bewegung, wenn im System so eingestellt */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
    }
    .fx-blob, .fx-grid { animation: none !important; }
    .reveal { opacity: 1; transform: none; }
}