/*------------ Desktop: min 1024px ------------*/
@media (min-width: 1024px) {
    header{
        padding: 0;
    }

    body {
        width: 100%;
        margin: 0 auto;
    }

    .popup {
        width: 50%;
    }
}

/*------------ Tablet: 769px - 1024px ------------*/
@media (min-width: 769px) and (max-width: 1024px) {
    header{
        padding: 0;
    }
    body {
        width: 100%;
        margin: 0 auto;
    }
    footer{
        gap: 2rem;
    }
    #dot-nav:has(nav:hover) #background-nav {
        background:  rgba(255, 255, 255,0.3);
        width: 100vw;
    }
    #dot-nav:has(nav:hover) #background-nav::before {
        content: "";
        position: absolute;
        inset: 0;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        pointer-events: none;
    }

    #landingbanner-overlay {
        position: absolute;
        top: 50%;
        left: 45%; 
        transform: translate(-50%, -50%);
        color: var(--white);
    }

    #bikefitting .card-front-content{
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.0)), var(--bg-image);
    }
    #card-overlay-bikefitting {
        width: 30%;
    }

    /* collage */
    #collage-big {
        grid-template-columns: 0.5fr 0.25fr 0.25fr;
        grid-template-rows: 0.27fr 0.46fr 0.27fr;
    }
    #collage-big-img-3 {
        grid-area: 2 / 2 / 3 / 4;
    }
    #collage-big-img-4 {
        display: none;
    }

    .popup {
        width: 65%;
    }
}

/*------------ Smartphone: max. 769px ------------*/
@media (max-width: 769px) {
    header{
        padding: 0 0;
    }
    
    body {
        width: 100%;
        margin: 0;
    }

    footer{
        gap: 1.5rem;
    }

    #dot-nav:has(nav:hover) #background-nav {
        background:  rgba(255, 255, 255,0.3);
        width: 100vw;
    }
    #dot-nav:has(nav:hover) #background-nav::before {
        content: "";
        position: absolute;
        inset: 0;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        pointer-events: none;
    }

    #landingbanner-overlay {
        position: absolute;
        top: 40%;
        left: 50%; 
        transform: translate(-50%, -50%);
        color: var(--white);
    }

    #site-description-container {
        position: absolute;
        left: 0;
        margin-top: 1rem;
        align-items: center;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    #site-description {
        margin-top: 2rem;
        font-size: clamp(16pt, 2.4vw, 32pt);
        text-align: center;
    }

    .content-slider-slide {
        flex-direction: column-reverse;
        padding-left: 0;
    }
    .content-slider-slide-image{
        width: 100%;  
    }

    #bikefitting .card-front-content{
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)), var(--bg-image);
    }
    #card-overlay-bikefitting {
        width: 50%;
    }

    .scroll-element {
        gap: 1.5rem;
    }
    .about-image-container{
        width: 40%;
    }
    @media (max-width: 500px) {
        .scroll-container {
            scroll-snap-type: unset;
            scroll-snap-stop: unset;
        }
    }
    @media (max-width: 450px) {
        .scroll-element {
            flex-direction: column;
        }
        .about-image-container{
            width: 100%;
        }
        .vertical-line {
            min-height: 3rem;
        }
    }

    #kontakt {
        flex-direction: column;
        
        .adress {
            display: flex;
            flex-direction: row;
            gap: var(--responsive-padding);
        }

        @media (max-width: 500px) {
            .adress {
                display: flex;
                flex-direction: column;
                gap: 1rem;
            }
        }

        #contact-container{
            flex-direction: column;
        }
        address {
            margin-right: 3rem;
        }
        #contact-address {
            flex-direction: row;
            flex-wrap: wrap;
            margin-right: 0;
            width: 100%;
        }
        #contact-map {
            margin-top: 1rem;
        }
    }

    /* collage */
    #bikefitting-back h3 {
        margin: 0;
    }
    #bikefitting-back p {
        margin: 2rem 0;
    }
    #bikefitting-back button {
        margin-top: 2rem;
    }
    #collage-big {
        display: none;
    }
    
    #bikefitting-description{
        width: 100%;
    }
    #bikefitting-description .collage-small {
        display: grid;
    }

    .popup {
        width: 80%;
    }
}

/*------------ MEDIA ------------*/

/* products */
#armpad-card-front-content {
    background-image: url('/images/produktentwicklung/armpad-875.jpg');
}
#toolbox-card-front-content {
    background-image: url('/images/produktentwicklung/toolbox-875.jpg');
}
#spacer-card-front-content {
    background-image: url('/images/produktentwicklung/spacer-875.jpg');
}

@supports (background-image: url('/images/test.webp')) {
    #armpad-card-front-content {
        background-image: url('/images/produktentwicklung/armpad-640.webp');
    }
    #toolbox-card-front-content {
        background-image: url('/images/produktentwicklung/toolbox-640.webp');
    }
    #spacer-card-front-content {
        background-image: url('/images/produktentwicklung/spacer-640.webp');
    }
    
    @media (min-width: 640px) {
        #armpad-card-front-content {
            background-image: url('/images/produktentwicklung/armpad-875.webp');
        }
        #toolbox-card-front-content {
            background-image: url('/images/produktentwicklung/toolbox-875.webp');
        }
        #spacer-card-front-content {
            background-image: url('/images/produktentwicklung/spacer-875.webp');
        }
    }
}

/* bikefitting */
#bikefitting-card-front-content {
    --bg-image: url('/images/bikefitting/Ibert_Fia-1024.jpg');
}

@supports (background-image: url('/images/test.webp')) {
    #bikefitting-card-front-content {
        --bg-image: url('/images/bikefitting/Ibert_Fia-640.webp');
    }

    @media (min-width: 320px) {
        #bikefitting-card-front-content {
            --bg-image: url('/images/bikefitting/Ibert_Fia-1024.webp');
        }
    }

    @media (min-width: 640px) {
        #bikefitting-card-front-content {
            --bg-image: url('/images/bikefitting/Ibert_Fia-1920.webp');
        }
    }
}