/*
*
* ==========================================
* #Farben
* ==========================================
*
*/
@media only screen and (max-width: 1024px) {
    :root {
        --rolex-green: #006039;
        --green: #127749;
        --ocean-green: #61BD93;
        --brown: #452C1E;
        --black: #212121;
        --dark-grey: #767676;
        --dark-grey-op50: rgba(118, 118, 118, 0.5);
        --dark-grey-op30: rgba(118, 118, 118, 0.3);
        --grey: #D4D4D4;
        --grey-op30: rgba(212, 212, 212, 0.3);
        --beige: #F4EFEA;
        --light-beige: #F9F7F4;
        --white: #FFFFFF;
        --white-op80: rgba(255, 255, 255, 0.8);
        --white-op40: rgba(155, 255, 255, 0.4);
        --navigation-gradient: linear-gradient(to right, #0b3e27, #197149);

        --font-weight-bold: 700;
        --font-weight-regular: 400;
        --font-weight-light: 300;
    }


    /*
    *
    * ==========================================
    * #Schriftarten
    * ==========================================
    *
    */
    .rolex-2024 .headline70 {
        font-size: 53px;
        line-height: 1.1;
    }
    .rolex-2024 .headline50 {
        font-size: 40px;
        line-height: 1.2;
    }
    .rolex-2024 .headline36 {
        font-size: 30px;
        line-height: 1.2;
    }
    .rolex-2024 .headline30 {
        font-size: 26px;
        line-height: 1.2;
    }
    .rolex-2024 .headline26 {
        font-size: 24px;
        line-height: 1.2;
    }
    .rolex-2024 .body24-bold {
        font-size: 21px;
        line-height: 1.2;
    }
    .rolex-2024 .body24-light {
        font-size: 21px;
        line-height: 1.2;
    }
    .rolex-2024 .body20-bold {
        font-size: 19px;
        line-height: 1.6;
    }
    .rolex-2024 .body20-light {
        font-size: 19px;
        line-height: 1.6;
    }
    .rolex-2024 .legend16-bold {
        font-size: 14px;
        line-height: 1.1;
    }
    .rolex-2024 .legend16-light {
        font-size: 14px;
        line-height: 1.1;
    }
    .rolex-2024 .legend14-bold {
        font-size: 12px;
        line-height: 1.1;
    }
    .rolex-2024 .fixed22 {
        font-size: 22px;
        line-height: 1.6;
    }
    .rolex-2024 .fixed16 {
        font-size: 16px;
        line-height: 1.1;
    }
    .rolex-2024 .fixed14 {
        font-size: 14px;
        line-height: 1.1;
    }
    .rolex-2024 .quote50 {
        font-size: 40px;
        line-height: 1.6;
    }



    /*
    *
    * ==========================================
    * #Grid
    * ==========================================
    *
    */
    .rolex-2024 .grid {
        /*width: 100%;*/
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 0px 8px;
        margin: 0 8%;
        justify-content: space-between;
    }

    .rolex-2024 .one {
        grid-column: span 1;
    }

    .rolex-2024 .two {
        grid-column: span 2;
    }

    .rolex-2024 .three {
        grid-column: span 3;
    }

    .rolex-2024 .four {
        grid-column: span 4;
    }

    .rolex-2024 .five {
        grid-column: span 5;
    }

    .rolex-2024 .six {
        grid-column: span 6;
    }

    .rolex-2024 .seven {
        grid-column: span 7;
    }

    .rolex-2024 .eight {
        grid-column: span 8;
    }

    .rolex-2024 .nine {
        grid-column: span 9;
    }

    .rolex-2024 .ten {
        grid-column: span 10;
    }

    .rolex-2024 .eleven {
        grid-column: span 11;
    }

    .rolex-2024 .twelve {
        grid-column: span 12;
    }

    .rolex-2024 .one-two-two{
        grid-column: span 2;
    }

    .rolex-2024 .one-twelve-six {
        grid-column: span 12;
    }

    .rolex-2024 .two-four-four{
        grid-column: span 4;
    }

    .rolex-2024 .three-one-zero{
        grid-column: span 1;
    }

    .rolex-2024 .three-two-zero {
        grid-column: span 2;
    }

    .rolex-2024 .three-four-six {
        grid-column: span 4;
    }

    .rolex-2024 .three-five-three{
        grid-column: span 5;
    }

    .rolex-2024 .four-four-three {
        grid-column: span 4;
    }

    .rolex-2024 .four-four-six {
        grid-column: span 4;
    }

    .rolex-2024 .four-five-six{
        grid-column: span 5;
    }

    .rolex-2024 .five-eight-four{
        grid-column: span 8;
    }
    .rolex-2024 .five-nine-six {
        grid-column: span 9;
    }

    .rolex-2024 .five-six-four{
        grid-column: span 6;
    }

    .rolex-2024 .five-twelve-six {
        grid-column: span 12;
    }

    .rolex-2024 .six-eight-six, .rolex-2024 .s {
        grid-column: span 8;
    }

    .rolex-2024 .six-ten-six{
        grid-column: span 10;
    }

    .rolex-2024 .twelve-twelve-six, .rolex-2024 .l {
        grid-column: span 12;
    }


    /*
    *
    * ==========================================
    * #Bildkomponenten
    * ==========================================
    *
    */
    .rolex-2024 .xl {
        width: 100vw;
    }

    .rolex-2024 .m {
        grid-column: span 10;
    }

    /*

    /*
    *
    * ==========================================
    * #Kollektionsseiten
    * ==========================================
    *
    */
    .rolex-2024 .rolex-kollektion {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 8px;
        margin: 50px 8% 40px 8%;
        justify-content: space-between;
        flex-wrap: unset;
        align-items: unset;
        padding: 0;
    }

    .rolex-2024 .rolex-kollektion-kachel {
        background: var(--beige);
        padding-top: 5%;
        grid-column: span 4;
        margin: 0;
        width: unset;
    }

    .rolex-2024 .rolex-kollektion-kachel-content {
        padding: 0px 30px 50px 30px;
    }

    .rolex-2024 .rolex-kollektion-kachel img{
        max-width: 90%;
    }
    /*
*
* ==========================================
* #Uhrenmerkmale (Produkt-Seite)
* ==========================================
*
*/
    .rolex-2024 .rolex-uhrenmerkmale-content{
        grid-column: span 12;
        grid-template-columns: repeat(12, 1fr);
        margin: 0px 0px 10vh 0px;
        order: 2;
    }
    .rolex-2024 .rolex-uhrenmerkmale-image{
        order: 1;
        grid-column-end: span 8;
        grid-column-start: 3;
        justify-content: center;

    }



    /*
    *
    * ==========================================
    * #Modellverfuegbarkeit
    * ==========================================
    *
    */
    .rolex-2024 .modellverfuegbarkeit p{
        grid-column-start: 3;
        grid-column-end: 11;
    }






    /*
    *
    * ==========================================
    * #Weiterlesen
    * ==========================================
    *
    */

    .rolex-2024 .swiper-button-next{
        position:absolute;
        right:50px;
        left:auto;
        width: 44px;
        margin-right: -25px;
        top: 42%;
        transform: translateY(-50%)
    }

    .rolex-2024 .swiper-button-prev{
        position:absolute;
        left: 50px;
        right:auto;
        width: 44px;
        margin-left: -25px;
        top: 42%;
        transform: translateY(-50%)
    }

    /*
    *
    * ==========================================
    * #Slider-Komponente
    * ==========================================
    *
    */

    .rolex-2024 .slide-component-button-next {
        top: 50%;
        transform: translateY(-50%)
    }

    .rolex-2024 .slide-component-button-prev {
        top: 50%;
        transform: translateY(-50%) scaleX(-1);
    }

    .rolex-2024 .slider-content .slider-text {
        position: absolute;
        top: 30%;
    }

    /*
*
* ==========================================
* #Kontakt-Komponente
* ==========================================
*
*/
    .rolex-2024 .map {
        width:
    }

}
