/* Blendet die oberen WP Grid Builder Bereiche komplett aus */
.wp-grid-builder .wpgb-area-top-1, 
.wp-grid-builder .wpgb-area-top-2 {
    display: none !important;
}
.wp-grid-builder {
    margin-top: 80px !important;
}

/* =====================================
   Weitere Arbeiten - Full Width + Starker Verlauf
   ===================================== */

/* Haupt-Sektion mit Abstand nach oben */
.weitere-arbeiten-grid {
    margin-top: 40px;
}

/* Überschrift */
.weitere-arbeiten-title {
    margin: 0 0 20px 0;
}

/* Outer Fullwidth Container */
.wpgb-fullwidth-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden; /* VERHINDERT VERLAUF-ÜBERLAUF NACH UNTEN UND SEITLICH */
}

/* 1. STARKER WEISSER VERLAUF AUF DEM VIEWPORT */
.wpgb-fullwidth-wrapper .wpgb-viewport {
    position: relative;
}

/* Linker Verlauf */
.wpgb-fullwidth-wrapper .wpgb-viewport::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to right, #ffffff 0%, #ffffff 35%, transparent 100%);
}

/* Rechter Verlauf */
.wpgb-fullwidth-wrapper .wpgb-viewport::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to left, #ffffff 0%, #ffffff 35%, transparent 100%);
}

/* 2. PFEIL-BUTTONS (STYLING & POSITIONIERUNG) */
.wpgb-fullwidth-wrapper .wpgb-prev-button,
.wpgb-fullwidth-wrapper .wpgb-next-button {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    background-color: #222222 !important;
    opacity: 1 !important;
    visibility: visible !important;
    
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

.wpgb-fullwidth-wrapper .wpgb-prev-button {
    left: 20px !important;
}

.wpgb-fullwidth-wrapper .wpgb-next-button {
    right: 20px !important;
}

.wpgb-fullwidth-wrapper .wpgb-prev-button:disabled,
.wpgb-fullwidth-wrapper .wpgb-next-button:disabled {
    opacity: 0.5 !important;
    background-color: #222222 !important;
}

/* 3. PLUGIN-SVG AUSBLENDEN */
.wpgb-fullwidth-wrapper .wpgb-prev-button svg,
.wpgb-fullwidth-wrapper .wpgb-next-button svg {
    display: none !important;
}

/* 4. CSS PFEILE */
.wpgb-fullwidth-wrapper .wpgb-prev-button::before,
.wpgb-fullwidth-wrapper .wpgb-next-button::before {
    content: "" !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-top: 3px solid #ffffff !important;
    border-right: 3px solid #ffffff !important;
}

.wpgb-fullwidth-wrapper .wpgb-prev-button::before {
    transform: rotate(-135deg) !important;
    margin-left: 3px !important;
}

.wpgb-fullwidth-wrapper .wpgb-next-button::before {
    transform: rotate(45deg) !important;
    margin-right: 3px !important;
}

/* 5. FOOTER ABSICHERN (Holt den Footer über den Verlauf) */
footer,
#colophon,
.site-footer {
    position: relative !important;
    z-index: 50 !important;
}

/* =====================================
 ===================================== */

.site-header img.custom-logo {
    animation: rainbow-logo 25s linear infinite;
}

@keyframes rainbow-logo {
    from {
        filter: hue-rotate(0deg) saturate(1.6) brightness(1.3);
    }
    to {
        filter: hue-rotate(360deg) saturate(1.6) brightness(1.3);
    }
}

/* 2. Hover-Effekt */
.site-header img.custom-logo:hover {
    animation: glitch-bounce 0.6s ease-in-out infinite alternate;
}

/* 3. Der Glitch-Effekt */
@keyframes glitch-bounce {
    0% {
        transform: scale(1.1) rotate(-1deg) translate(0, 0);
        filter: hue-rotate(0deg) saturate(1.5);
    }
    20% {
        transform: scale(1.15) rotate(2deg) translate(-2px, 1px);
        filter: hue-rotate(90deg) brightness(1.2);
    }
    40% {
        transform: scale(1.1) rotate(-2deg) translate(1px, -1px);
        filter: hue-rotate(180deg) contrast(1.3);
    }
    60% {
        transform: scale(1.2) rotate(1deg) translate(-1px, 2px);
        filter: hue-rotate(270deg) saturate(2);
    }
    80% {
        transform: scale(1.15) rotate(0deg) translate(2px, -2px);
        filter: hue-rotate(360deg) contrast(1);
    }
    100% {
        transform: scale(1.1) rotate(-1deg) translate(0, 0);
        filter: hue-rotate(0deg);
    }
}








/* Zeilenabstand für die Links in beiden Menüs einstellen */
#menu-kategorien a,
#menu-branchen a {
    line-height: 1.4 !important;
}