/* Header auf Hyperspeed – vollständig transparent */
.glossy-header {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: rgba(12, 24, 68, 0.85);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(96, 165, 250, 0.28);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.glossy-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        105deg,
        transparent 28%,
        rgba(255, 255, 255, 0.04) 42%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.04) 58%,
        transparent 72%
    );
    background-size: 220% 100%;
    animation: glossy-header-shimmer 5s ease-in-out infinite;
    pointer-events: none;
}

.glossy-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 15%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0.12) 85%,
        transparent 100%
    );
    pointer-events: none;
}

.glossy-header > * {
    position: relative;
    z-index: 1;
}

.glossy-header.scrolled {
    border-bottom-color: rgba(255, 255, 255, 0.28);
    box-shadow: none;
}

@keyframes glossy-header-shimmer {
    0%, 100% { background-position: 220% 0; }
    50% { background-position: -220% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .glossy-header::before {
        animation: none;
        background-position: 50% 0;
        opacity: 0.6;
    }
}