/* Header Sticky Fix - Überschreibt problematische Styles */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Nur auf der Index-Seite transparenter Header initial */
body.page-index .header:not(.scrolled) {
    background: transparent !important;
    box-shadow: none !important;
}

body.page-index .header.scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Mobile Fix */
@media (max-width: 968px) {
    .header {
        position: fixed !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        z-index: 9999 !important;
    }
    
    .header.scrolled {
        background: rgba(255, 255, 255, 0.98) !important;
    }
    
    body.page-index .header:not(.scrolled) {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Sorge für genug Platz unter dem Header */
main {
    padding-top: 80px;
}

@media (max-width: 1024px) {
    main {
        padding-top: 70px;
    }
}

@media (max-width: 768px) {
    main {
        padding-top: 65px;
    }
}

/* Index-Seite braucht kein padding-top wegen Hero */
body.page-index main {
    padding-top: 0;
}