.section {
    /* Spezifisches Padding für diese Sektionstypen */
    &.bg-white, &.bg-slate-50, &.bg-dark {
        padding: 100px 0;

        @media (max-width: 991.98px) {
            padding: 50px 0;
        }
    }

    /* .bg-dark Logik direkt hier kapseln */
    &.bg-dark {
        color: #ffffff;
        .deco-grid { filter: invert(1); }
        .split-description { opacity: 0.6; }
    }
}

.split-info-note {
    margin-top: 24px;
    padding-left: 14px;
    border-left: 2px solid #ea8207; 
    font-size: 0.875rem;
    line-height: 1.4;
    opacity: 0.75; 
}

.split-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;

    /* Desktop-Layout direkt verschachtelt */
    @media (min-width: 1024px) {
        flex-direction: row;
        gap: 80px;

        &.is-reverse {
            flex-direction: row-reverse;
        }

        .split-text-col { width: 50%; }
        .split-image-col { width: 50%; }
    }

    /* Text-Spalte */
    .split-text-col {
        z-index: 2;

        .split-headline {
            font-size: clamp(2rem, 5vw, 2.5rem);
            font-weight: 300; /* Angepasst an deine style.css (.h1) */
            line-height: 1.1;
            margin-bottom: 24px;
            letter-spacing: -0.02em;
            
            span.split-accent {
                color: var(--current-accent, var(--cyan));
            }
        }

        .split-description {
            font-size: 1.125rem;
            line-height: 1.6;
            margin-bottom: 40px;
            opacity: 0.8;
            font-weight: 300;
        }
    }

    /* Bild-Spalte */
    .split-image-wrapper {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;

        .deco-grid {
            position: absolute;
            inset: -6.2rem -10rem;
            opacity: 0.1;
            z-index: 1;
            background-image: 
                linear-gradient(var(--text-main) 1px, transparent 1px), 
                linear-gradient(90deg, var(--text-main) 1px, transparent 1px);
            background-size: 85px 85px;

            /* FIX: Das Gitter nach oben und links "rausschieben" */
            /* Wir verschieben es um 1px, damit die erste Linie exakt außerhalb des Sichtbereichs liegt */
            background-position: -1px -1px; 
            
            /* Optional: Falls du willst, dass die Linien erst nach einem Stück Leerraum anfangen: */
            /* background-position: 40px 40px; */

            @media (max-width: 1023px) {
                display: none;
            }
        }

        .aeyvis-img-frame {
            position: relative;
            z-index: 10;
            max-width: 100%;

            &::before {
                content: "";
                position: absolute;
                inset: 12px -12px -12px 12px;
                border: 2px solid var(--current-accent, var(--cyan));
                z-index: -1;
            }

            .aeyvis-img-element {
                display: block;
                width: 100%;
                height: auto;
                border: 1px solid rgba(0,0,0,0.1);
                box-shadow: 15px 15px 40px rgba(0,0,0,0.05);
            }
        }
    }
}

@media (max-width: 991.98px) {
    .section-split .own-btn {
        width: 100%;
        text-align: center;
    }
}

.logo {
  width: 290px;
}

.section-split:last-of-type .scroll-down-wrapper {
    display: none !important;
}

/* Scroll-Down Pfeil Styling */
.section-split.position-relative {
    position: relative; /* Sicherstellen, dass die Section die Basis für die absolute Positionierung ist */
}

.scroll-down-wrapper {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    text-align: center;

    @media (max-width: 991.98px) {
        display: none;
    }
}

.scroll-down-link {
    display: inline-block;
    color: #fff;
    opacity: 1;
    transition: all 0.3s ease;
    animation: bounce 2s infinite;
    cursor: pointer;
    background: #1e293b;
    border-radius: 25px;
    padding: 5px;
}

.scroll-down-link:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Bounce Animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-8px) translateX(-50%); }
    60% { transform: translateY(-4px) translateX(-50%); }
}

/* Korrektur für Animation in Verbindung mit transform-Center */
.scroll-down-link {
    animation: bounce 2s infinite;
    
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
    60% { transform: translateY(-4px); }
}

/* Farbanpassung für dunklen Hintergrund */
.bg-slate-900 .scroll-down-link {
    color: #ffffff;
}