/* ========================================================================
   GLOBAL PROJECT STYLES (HEFE BUNDLE)
   - Enthält sämtliche Klassen mit __hefe-Suffix
=========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800;900&display=swap');


html, body {
    margin: 0;
    padding: 0;
    font-family: Roboto, Helvetica, sans-serif;
    font-size: 16px;
    overflow-x: hidden;
    background: #ffffff;
    color: #ffffff;
}

.blk__hefe{
    color: #000;
}

.mobile-hero-text__hefe{
    display: none;
    padding: 10%;
    position: relative;
    z-index: 9999;
}

.mobile-hero-text__hefe h1 {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    color: #000 !important;
}
.mobile-hero-text__hefe h4 {
    line-height: 1.2 !important;
    font-size: 1.4rem !important;
    color: #000 !important; 
}




/* ========================================================================
   SEKTION 1 --- HERO SCROLL-ANIMATION (Canvas + 2 Overlays)
=========================================================================== */

/* Scroll-Track definiert Scroll-Länge */
.canvas-wrapper__hefe {
    position: relative;
    width: 100%;
    height: 300vh;
    overflow: hidden;
}

/* Canvas */
#hero-canvas__hefe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    max-width: none;
    max-height: none;
    display: block;
}

/* Linkes Overlay */
.overlay-left__hefe {
    position: absolute;
    z-index: 10;
    width: 50%;
    height: 100vh;
    top: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rechtes Overlay */
.overlay-right__hefe {
    position: absolute;
    z-index: 10;
    width: 50%;
    height: 100vh;
    top: 0;
    margin-top: 200vh;
    margin-left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Karten */
.card-0__hefe {
    display: flex;
    flex-direction: column;
    width: 75%;
    padding: 10%;
    color: #000;
}

.card-0__hefe h1 {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    color: #000 !important;
}
.card-0__hefe h4 {
    line-height: 1.4 !important;
    color: #000 !important; 
}

/* Button-Layout */
.btn-flex__hefe {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-top: 2rem;
}


.hero-section__hefe {
    position: relative;
}


.scroll-helper__hefe {
  opacity: 0;
  pointer-events: none;
}

/* ================================
   SCROLL HELPER — MOBILE ONLY
================================ */
@media (max-width: 991px) {

  .scroll-helper__hefe {
    position: fixed;
    top: 85%;
    left: 50%;
    width: 50vw;

    transform: translate(-50%, calc(-50% + 12px));
    z-index: 9998;

    opacity: 0;
    pointer-events: none;

    transition:
      opacity 0.6s ease,
      transform 0.4s ease;
  }

  .scroll-helper__hefe.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .scroll-helper__hefe img {
    width: 100%;
    height: auto;
    display: block;
  }
}

@media (max-width: 767px) {
  .scroll-helper__hefe {
    width: 80vw;
  }
}







/* ========================================================================
   SEKTION 2 --- TEXT-SYNC SCROLL-ANIMATION
=========================================================================== */

.canvas-textsync-wrapper__hefe {
    position: relative;
    width: 100%;
    height: 500vh;
    overflow: hidden;
}

/* eigenes Canvas */
#hero-canvas-textsync__hefe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: block;
}

/* Text Overlay */
.overlay-text__hefe {
    position: fixed;
    top: 50%;
    right: 10%;      
    transform: translateY(-50%);
    color: white;
    letter-spacing: 0.6em;
    font-size: 3rem;
    opacity: 0;
    pointer-events: none;
    text-align: right; 
    font-size: larger;
    font-weight: 100;
}

/* Testelement */
.test-textsync__hefe {
    height: 100vh;
    background: green;
}

/* Wrapper der gesamten zweiten Scrollanimation */
.canvas-textsync-wrapper__hefe {
    position: relative;
    width: 100vw;
    height: 500vh;
}

/* Overlay div*/
.textsync-overlay__hefe {
    position: relative;
    top: 0;
    left: 0;
    width: 50%;
    height: 100vh;
    z-index: 20; 
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5% 10% 5% 5%;
}

.textsync-overlay__hefe h4 {
    font-weight: 400 !important;
    line-height: 1.4 !important;
    font-size: 1.4rem !important;
    color: #fff !important;
}

.textsync-overlay__hefe h2 {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
    color: #fff !important;
}
/* ========================================================================
   SEKTION 4 --- VIDEO SWITCH SECTION
=========================================================================== */

.vidsection__hefe {
    position: relative;
    width: 100vw;
    padding-bottom: 56.25%;
    overflow: hidden;
    text-align: center;
}

/* Video Handling */
.vidsection__hefe video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* Overlay-Video */
#target-element__hefe {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

/* Content innerhalb Video */
.content-wrap__hefe {
    position: absolute;
    z-index: 3;
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: start;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
}

/* Abstand */
.mrg-top-4rem__hefe {
    margin-top: 4rem;
}

/* SWITCH */
.switch__hefe {
    position: relative;
    width: 60px;
    height: 30px;
}

.switch__hefe input {
    display: none;
}

.slider__hefe {
    position: absolute;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 30px;
    inset: 0;
    transition: 0.3s;
}

.slider__hefe:before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    background: white;
    border-radius: 50%;
    left: 4px;
    bottom: 4px;
    transition: 0.3s;
}

.switch__hefe input:checked + .slider__hefe {
    background: #ED1C24;
}

.switch__hefe input:checked + .slider__hefe:before {
    transform: translateX(30px);
}

.content-wrap__hefe p {
    line-height: 1.4 !important;
    color: #fff !important;
}

.content-wrap__hefe h2 {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
    color: #fff !important;
}

.content-wrap__hefe h3 {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #fff !important;
}


/* ========================================================================
    SEKTION 3 --- BENTO-BOX
=========================================================================== */


.center-block__hefe{
    margin: auto;
    color: black !important; 
    text-align: center; 
    max-width: 650px; 
    padding: 8rem 0rem 4rem 0rem;
}

.center-block__hefe h2 {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    padding-bottom: 1rem;
    color: black !important; 
}


    .bento-grid__hefe {
        display: grid;
        grid-template-columns: repeat(12, 1fr); /* 12-column grid for flexibility */
        grid-auto-rows: auto;
        gap: 32px;
        width: 80%;
        max-width: 964px;
        margin: 0 auto 6rem auto;
        grid-template-areas:
        "a a a a a a b b b b b b"
        "c c c c c c c c c c c c"
        "d d d d d d e e e e e e"
        "f f f f f f f f g g g g"
        "h h h h h h h h h h h h"
        "i i i i j j j j k k k k"
        ;
    }

    .bento-grid__hefe > * {
        /* styles for all grid items */
        padding: 1.5rem;
        background-color: #f4f4f4;
        min-height: 300px;
        color: #000;
    }

    .bento-grid__hefe h3 {
        font-weight: 900 !important;
        font-size: 2rem !important;
        color: #000;
        margin: 0 !important;
        
    }

    .bento-grid__hefe p {
        font-weight: 500 !important;
        font-size: 1.1rem !important;
        color: #000;
    }

    .flir_hefe{
        grid-area: a; 
        background-image: url("https://www.ried.de/fileadmin/user_files/custom/FLIR-img.jpg");
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
    }

    .flir_hefe p{
        color: #fff !important;
    }

    .flir-logo__hefe{
        max-width: 40%;
        height: auto;
        margin-bottom: 0.5rem;
    }


    .temp1__hefe{
        grid-area: b; 
        background-image: url("https://www.ried.de/fileadmin/user_files/custom/temp-img.jpg");
        background-size: cover;
        background-position: right;
        background-repeat: no-repeat;
    }

    .temp1__hefe p{
        color: #fff !important;
    }

    .temp1__hefe h3{
        color: #fff !important;
    }

    .f_200m__hefe { 
        grid-area: c; 
        background-image: url("https://www.ried.de/fileadmin/user_files/custom/Sichtweite-2000m.jpg");
        background-size: cover;
        background-position: right center;
        background-repeat: no-repeat;
    } 

    .temp__hefe { 
        grid-area: d; 
        background-image: url("https://www.ried.de/fileadmin/user_files/custom/Eis__Wueste.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .temp__hefe p{
        color: #fff !important;
    }
                    
    .emv__hefe           { grid-area: e; }
    .iso__hefe           { grid-area: f; }
    .ip68__hefe { 
        grid-area: g;
        background-image: url("https://www.ried.de/fileadmin/user_files/custom/Kamera__Nass.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .ip68__hefe h3{
        color: #fff !important;
    }

    .ip68__hefe p{
        color: #fff !important;
    }

    .blitz__hefe         { grid-area: h; }
    .analog__hefe        { grid-area: i; }
    .kompakt__hefe       { grid-area: j; }
    .latenzfrei__hefe    { grid-area: k; }

    

    .flx-cc__hefe {
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content: center;
        text-align: center;
    }

    .flx-bl__hefe{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: end;

    }

    .flx-ic__hefe{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 32px;
        padding-left: 10%;
        padding-right: 10%;
    }


    .flx-txt__hefe {
        display: flex;
        flex-direction: column;
        max-width: 75%;
    }

    .svg__hefe{
        max-width: 25%;
        height: auto;
        max-height: 8rem;
    }

    .gradient-text__hefe {
        background: linear-gradient(
            90deg,
            #B1EDFF 35%,
            #ED1E26 65%
        );
        text-shadow: -2px 2px 10px rgba(0, 0, 0, 0.25);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        /* for Firefox */
        background-clip: text;
        color: transparent;
        }

    

/* ========================================================================
   SEKTION 5 --- EINSATZBEREICHE -- 3-COL
=========================================================================== */

.flx-row__hefe{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 2rem;
}

.card-1__hefe{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: stretch;
    background-color: #f4f4f4;
    gap: 0.5rem;
    border: 1px solid #d0d0d0;
}



.card-txt__hefe{
    padding: 0rem 1rem 0.5rem 1rem;
    height: 100%;
}

.link__hefe{
    margin-top: auto;
    justify-self: end;
}

.section-mrg__hefe{
    margin-bottom: 8rem;
}


.card-txt__hefe h3 {
    color: #000 !important;
    font-weight: 800 !important;
}

.card-txt__hefe p {
    color: #000 !important;
}

/* ========================================================================
   SEKTION 6 --- STATIC VIDEO
=========================================================================== */


.vidsection2__hefe {
    position: relative;
    width: 100vw;
    padding-bottom: 56.25%;
    overflow: hidden;
    text-align: center;
}

/* Video Handling */
.vidsection2__hefe video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.txt-overlay-6__hefe{
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: 30; 
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 5% 10% 5% 5%;
    text-align: left;
}

.txt-overlay-6__hefe h2 {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
    color: #fff !important;
}

.txt-overlay-6__hefe h4 {
    line-height: 1.5 !important;
    font-weight: 400 !important;
    font-size: 1.4rem !important;
    color: #fff !important;
}

.mobile-hide{
    display: block;
}

.desktop-hide{
    display: none;
}



/* ========================================================================
   SEKTION 7 --- FUHRPARK
=========================================================================== */

.sec-2col__hefe{
    width: 100%;
    padding-top: 8rem;
    padding-bottom: 8rem;
    padding-left: 10%;
    padding-right: 10%;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #000;
    gap: 8rem;
    background-color: #F0F0F0;
}

.sec-col21__hefe h2{
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.5;
}



.sec-col21__hefe {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.sec-col22__hefe {
    width: 50%;
    /*display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    row-gap: 2rem;
    column-gap: 2rem;*/
}

.grid-cell-logo__hefe{
    display: flex;
    align-items: center;
    justify-content: center;
}

.car-brand-logo__hefe{
    height: 2rem;
    width: auto;
    filter: grayscale(100%);
}

.sec-col21__hefe h4 {
    line-height: 1.4 !important;
    font-size: 1.4rem !important;
    color: #000 !important; 
}

.sec-col21__hefe h2 {
    line-height: 1.4 !important;
    color: #000 !important; 
    font-size: 2.5rem;
}
.fuhrpark-img__hefe{
    width: 100%;
    height: auto;
}
/* ========================================================================
   SEKTION 8 --- STATS TABELLE
=========================================================================== */

.specs-grid__hefe {
    width: 60%;
    display: flex;
    flex-direction: column;
    color: #000;
}

.specs-grid-3col__hefe {
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    color: #000;
}


.specs-grid-row__hefe{
    display: flex;
    width: 100%;
}

.spec-type__hefe{
    display: flex;
    justify-content: left;
    align-items: center;
    text-align: left;
    width: 100%;
    padding: 8px 0 0 1em;
}

.spec-type__hefe h5{
    font-weight: 600;
    color: #000 !important;
    font-size: 1.2rem !important;
    margin-bottom: 8px !important;
}

.spec__hefe{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    padding-top: 8px;
    padding-left: 24px;
}

.spec__hefe h6{
    font-weight: 500;
    color: #000 !important;
    font-size: 1.2rem !important;
    margin-bottom: 8px !important;
}

.line__hefe{
    width: 100%;
    height: 1px;
    background-color: #a9a9a9;
}

/* ========================================================================
   BREAKPOINTS / MEDIA QUERIES
=========================================================================== */
@media (min-width: 1921px){
    .textsync-overlay__hefe {
        width: 35%;
    }

    .content-wrap__hefe {
        width: 25%;
    }

    .txt-overlay-6__hefe{
        width: 35%;
    }
}


@media (max-width: 1600px) {
    .sec-2col__hefe{
    gap: 6rem;
    }
}

@media (max-width: 991px) {

    .overlay-left__hefe,
    .overlay-right__hefe {
        display: none;
    }

    .overlay-left__hefe {
        display: none;
    }

    .content-wrap__hefe {
        width: 60%;
        justify-content: center;
    }


    .mobile-hero-text__hefe{
        display: flex;
        flex-direction: column;
        align-items: start;
        height: auto;
        width: 100%;
        background-color: #fff;
    }

    /* Der große Content-Overlay wird in die Mitte gesetzt */
    .textsync-overlay__hefe {
        width: 100vw;
        left: 0;
        padding: 5% 5%;
        text-align: center;
        align-items: center;
    }

    /* Die Frame-basierten Texteinblendungen wieder zentriert */
    .overlay-text__hefe {
        top: 50%;
        left: 50%;  
        right: auto;           
        transform: translate(-50%, -50%);
        text-align: center;
        letter-spacing: 0.2em;
        font-weight: 100;
    }

    .bento-grid__hefe {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 12-column grid for flexibility */
        grid-auto-rows: auto;
        gap: 32px;
        width: 80%;
        max-width: 964px;
        margin: 0rem auto 8rem auto;
        grid-template-areas:
        "a a"
        "b b"
        "c d"
        "e e"
        "f f"
        "g g"
        "h h"
        "i i"
        "j j"
        "k k"
        ;
    }

    .flx-txt__hefe {
        max-width: 100%;
        text-align: center;
    }

    .flx-ic__hefe{
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 10%;
    }

    .bento-grid__hefe > * {
        padding: 1.5rem;
        background-color: #E5E5E5;
        min-height: 300px;
    }

    .flx-row__hefe{
        gap: 1rem;
    }


    .sec-2col__hefe{
        flex-direction: column;
        padding-left: 5%;
        padding-right: 5%;
    }

    .sec-col21__hefe, .sec-col22__hefe{
        width: 100%;
    }

    /*.sec-col22__hefe{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: auto;
        row-gap: 2rem;
        
    }*/

    .grid-cell-logo__hefe{
    justify-content: center;
    }


    .txt-overlay-6__hefe{
        width: 75%;
    }

    .mrg-top-4rem__hefe{
        margin-top: 3rem;
        font-size: 1.2rem !important;
    }

    .f_200m__hefe { 
        grid-area: c; 
        background-image: url("https://www.ried.de/fileadmin/user_files/custom/Sichtweite-2000m-MOBILE.jpg");
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
    } 

}



@media (max-width: 767px) {

    .content-wrap__hefe {
        width: 90%;
    }

    .vidsection__hefe {
        padding-bottom: 133.33%;
    }

    .center-block__hefe{
        max-width: 80%; 
    }

    .bento-grid__hefe {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 32px;
        width: 80%;
        max-width: 964px;
        margin: 0 auto 6rem auto;
        grid-template-areas:
        "a"
        "b"
        "c"
        "d"
        "e"
        "f"
        "g"
        "h"
        "i"
        "j"
        "k";
    }

    .txt-overlay-6__hefe{
        width: 100%;
    }

    .txt-overlay-6__hefe h2 {
    font-size: 2rem !important;
    line-height: 1.3 !important;
    }

    .txt-overlay-6__hefe h4 {
        line-height: 1.4 !important;
        font-size: 1.2rem !important;
    }
    
    .flx-row__hefe, .sec-2col__hefe{
        gap: 2rem;
        flex-direction: column;
    }

    .sec-col21__hefe, .sec-col22__hefe{
        width: 100%;
    }

    .specs-grid__hefe {
        width: 80%;
    }

    


    .btn-flex__hefe {
        flex-direction: column;
        row-gap: 0;
    }

    .vidsection2__hefe {
    position: relative;
    width: 100vw;
    padding-bottom: 133.33%;
    overflow: hidden;
    text-align: center;
    }

    
    .vidsection2__hefe video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        object-fit: cover;
    }


    .mobile-vid-txt__hefe{
        display: block;
        padding-top: 4rem;
        padding-bottom: 4rem;
        padding-left: 5%;
        padding-right: 5%;
        background-color: #000;
        color: #fff;
    }

    .mobile-hide{
        display: none;
    }

    .desktop-hide{
        display: block;
    }

    .mobile-vid-txt__hefe h2 {
        color: #fff !important;
        font-weight: 900;
    }

    .mobile-vid-txt__hefe h4 {
        color: #fff !important;
        line-height: 1.4;
    }

    h4 {
        font-size: 1.2rem !important;
    }

    h2 {
        font-size: 1.4rem !important;
    }

    .f_200m__hefe { 
        grid-area: c; 
        background-image: url("https://www.ried.de/fileadmin/user_files/custom/Sichtweite-2000m-MOBILE.jpg");
        background-size: cover;
        background-position: right center;
        background-repeat: no-repeat;
    } 

}


@media (max-width: 420px) {

    .vidsection__hefe {
        padding-bottom: 180%;
    }

    

    .content-wrap__hefe {
        width: 95%;
        gap: 0.5rem;
        padding-top: 3rem;
    }

    .specs-grid__hefe {
        width: 90%;
    }

    .mrg-top-4rem__hefe{
        margin-top: 1.5rem;
        font-size: 1rem !important;
    }
    
    .f_200m__hefe { 
        grid-area: c; 
        background-image: url("https://www.ried.de/fileadmin/user_files/custom/Sichtweite-2000m-MOBILE.jpg");
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
    } 

    
}