/* ================================================
   HORIZONTAL SCROLL SECTION
   Based on GSAP & Locomotive Scroll
   ================================================ */

.horizontal-scroll-section {
    position: relative;
    /* Inverted Theme logic from vorlage.html */
    background-color: var(--text-primary);
    color: var(--bg-primary);
    width: 100%;
    overflow: hidden;
}

/* Pin Section Wrapper */
#sectionPin {
    height: 100vh;
    overflow: hidden;
    display: flex;
    left: 0;
    width: 100%;
    /* Ensure it sits above other content if needed, but standard flow is fine */
}

.pin-wrap {
    height: 100vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 50px 10vw;
    /* Ensure width is calculated by JS or content */
    width: fit-content;
    will-change: transform;
}

/* Common Item Styles in Scroll */
.pin-wrap>* {
    min-width: 60vw;
    padding: 0 5vw;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* By default center, but can be overridden */
}

/* Headline Specifics */
.pin-wrap h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    max-width: 800px;
    line-height: 1.2;
    color: var(--bg-primary);
    /* Inverted text color */
}

/* Image Specifics */
.pin-wrap img {
    height: 60vh;
    width: auto;
    max-width: 100%;
    object-fit: cover;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
}

/* Service Card Adaptations for Horizontal Scroll */
.pin-wrap .modern-card {
    background: var(--bg-primary);
    /* Card bg should be normal page bg (light/dark) relative to the inverted section? Or inverted? 
                                      If section is inverted, card bg should probably be the text color (dark in light mode)? 
                                      Let's stick to standard card colors but maybe invert them if they look bad on dark bg.
                                      Actually, if the section is dark, a white card looks good.
                                   */
    color: var(--text-primary);
    /* Reset text color for card content */
    min-width: 400px;
    max-width: 80vw;
    width: auto;
    height: auto;
    /* Ensure text inside card matches card bg context */
}

@media (max-width: 768px) {
    .pin-wrap>* {
        min-width: 85vw;
        padding: 0 2vw;
    }

    .pin-wrap .modern-card {
        min-width: 80vw;
    }

    .pin-wrap img {
        height: 50vh;
    }
}