/* ######################################################*/
/* ====== Grundlayout ======                             */
/* ###################################################### */

body {opacity: 1!important;}

/*body {background-color:transparent!important}*/








/* ######################################################*/
/* Blauen Hintergrund bei Touch auf Link unterbinden */
/* ###################################################### */

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}




/* ###################################################### */
/* Overlays für Landscape und DesktopModus                */
/* ###################################################### */

/* Overlay standardmäßig verstecken */
#landscape_overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh; /* moderne Browser */
    min-height: 100vh; /* Fallback für ältere Browser */
    background: rgba(0,0,0,0.9);
    color: #fff;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 9999;
    font-size: 1.5rem;
}

/* Landscape-Modus */
@media (orientation: landscape) {
    /* Overlay anzeigen */
    #landscape_overlay {display: flex; }

    /* Scrollen im Hintergrund verhindern */
    #section2_m,
    #section3_m,
    #section4_m,
    #section5_m,
    #section6_m,#section6_footer_m,
    #section7_m,
    #section8_m  {display: none!important; }



    /* Overlay Schrift Style */
    #landscape_overlay_text {line-height: 1.4;max-width: 90vw;margin-top:-100px}

    /* Schrift Style für section1 */
    .content_m h1 {line-height: 1.1!important;font-size: clamp(3rem, 12vw, 7.5rem)!important;margin-top:-60px!important;}
    .content_m h3 {line-height: 0.95!important;font-size: clamp(1.6rem, 6.5vw, 3.2rem)!important;}
}









/* ###################################################### */
/* Hintergrundflecken                                     */
/* ###################################################### */

#mobile_background {
position: relative;
z-index: 0;
overflow: visible;
}

#mobile_background section {
position: relative;
z-index: 1; /* Sections über Flecken */
}

/* Flecken-Container */
.rotfleck {
    position: absolute;
    z-index: 0; /* hinter Sections */
    pointer-events: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
}

/* Bild innerhalb Fleck */
.rotfleck img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    opacity: 1;
}





/* ====== SECTION allgemein ====== */


#section1_m,
#section2_m,
#section3_m,
#section5_m,
#section6_m,
#section7_m,
#section8_m  {
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
background-color: transparent!important;
font-family: Montserratbold, arial, Helvetica, Sans-Serif!important;
}





/* ====== SECTION 1 ====== */

/* videohintergrund */
#section1_m .at-bg-video {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

/* Markus Tallen Text */
#section1_m .content_m {
position: absolute;
z-index: 100;
color: #ffffff;
text-align: center;
mix-blend-mode: difference;
}

/* Hauptinhalt */
.content_m h1 {
    color: #ffffff;font-family: Montserratbold, arial, Helvetica, Sans-Serif!important;text-transform: uppercase;margin: 0;line-height: 1.1;
    font-size: clamp(4.25rem, 17vw, 10.2rem);
}

.content_m h3 {
    color: #ffffff;font-family: Montserratlight, arial, Helvetica, Sans-Serif;margin: 0;line-height: normal;
    font-size: clamp(2.1rem, 8.4vw, 4.2rem);

}

/* Logo‑Markus */
#section1_m .logo_m  {
position: absolute;
top: 5vh;
left: 50%;
transform: translateX(-50%);
z-index: 3;
width: 40px;
pointer-events: none;mix-blend-mode:difference;
}

#section1_m .logo_m  svg {
width: 100%;
height: auto;
display: block;
}


/* Pfleil nach unten */
#section1_m .scroll-down {
position: absolute;
bottom: 10vh;
left: 50%;
transform: translateX(-50%);
animation: bounce 2s infinite;
z-index: 3;
width: 30px;
pointer-events: none;mix-blend-mode:difference
}

#section1_m .scroll-down svg {width: 100%;height: auto;display: block;}
@keyframes bounce {
    0%, 100% {transform: translateX(-50%) translateY(0);}
    50% {transform: translateX(-50%) translateY(10px);}
}





/* ====== SECTION 2 ======  */

/* Z-Index */
#section2_m { z-index: 2;}


/* Fade Wrapper */
#section2_m .fade-wrapper {
position: sticky;
top: 0;
width: 100%;
height: 100vh;
}

/* Fade Container mobil */
#section2_m .fade-container.fullviewport {
position: absolute;
top: 0;left: 0;
width: 100%;height: 100%;
display: flex;flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 30px 30px 30px 30px;
box-sizing: border-box;

/*                 transform: scale(1); */
}


/* Jahreszahl */
#section2_m .jahreszahl {
font-family: Montserratthin, Arial, Helvetica, Sans-Serif;
font-size: clamp(1.5rem, 2.5vw, 2rem);
line-height: normal;
font-weight: normal;
text-transform: none;
margin-bottom: 10px;
}

/* Text Wrapper */
#section2_m .text-wrapper_m {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 10px;
height: 125px; /* gleiche Höhe für alle Überschriften */
flex-shrink: 0; /* verhindert, dass die Box schrumpft */
}


/* Überschrift */
#section2_m .filled_m {
font-family: Montserratbold, Arial, Helvetica, sans-serif !important;
text-transform: uppercase;
line-height: 1.1;
white-space: nowrap;
font-size: clamp(2.5rem, 7vw, 6.5rem);
mix-blend-mode: normal;
margin: 0;
transform: none;
position: relative;
}

/* Beschreibungstext */
#section2_m .beschreibungstext {
font-size: clamp(1.25rem, 4vw, 2.25rem);
line-height: 1.4;
font-family: Montserratlight, Arial, Helvetica, Sans-Serif;
position: relative;
}

/* Hervorhebung rot */
#section2_m .beschreibungstext .red {color: #F26161;white-space: normal; }



/* Bild unten fixieren */
#section2_m img.image_sec_2_m {
position: absolute;
bottom: 12vh;
left: 30px;
right: 30px;
width: calc(100% - 60px);
height: auto;
border-radius: 12px;
object-fit: cover;
display: block;
z-index: 10;
}

/* Pagination */
#section2_m .pagination {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
z-index: 20;
display: flex;
gap: 16px;
}





/* Hintergrundbilder / Rote Flecken */
#section2_m .bg-img {
position: absolute;
width: 60%;
height: auto;
pointer-events: none;
z-index: -10;
filter: grayscale(100%);
}





/* ====== SECTION 3 ====== */



/* Tabelle allgemein */
.table_section3_m {
    width: 100%;
    border-collapse: collapse;min-height: 120vh;
}
.section3_stroke {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

/* Hintergrundbild oben, über dem Text */
/*.markus_img {
    display: block;
    width: 145%;
    height: auto;
    max-width: none;
    object-fit: cover;
    z-index: 120;
    position: relative;top:-25px;left:-35px;
}*/

.markus_img {
    width: auto;
    height: 105%;
    object-fit: contain;
    display: block;
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%) translateX(50px); /* nach rechts verschieben */
    z-index: 120;
}




.stroke_text_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.2em;
    z-index: 1;
    padding-top: 2vh;
    pointer-events: none;

    /* Moderner vertikaler Fade */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 95%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;

    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 95%);
    mask-repeat: no-repeat;
    mask-size: cover;
}



/* Jede Zeile */
.stroke_line {
    display: flex;
    justify-content: space-between;
    font-size: clamp(8rem, 30vw, 30rem);
    font-family: Montserratbold, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;top:-3vh;
    color: transparent;
    -webkit-text-stroke: 1.2px lightgrey;
    text-stroke: 1.2px lightgrey;
}

/* Buchstaben als einzelne Spans */
.stroke_line span {
    flex: 1;
    text-align: center;
}

/* Das I von BIN (2. Zeile, 2. Buchstabe) */
.stroke_line:nth-child(2) span:nth-child(2) {position: relative; left: -5px; }

/* Das I von ICH (3. Zeile, 1. Buchstabe) */
.stroke_line:nth-child(3) span:nth-child(1) {position: relative;left: -25px; }



/* Zweite Zeile (Überschrift) */
.table_section3_row2 h1  {
    padding: 30px 30px 20px 30px;
    text-align: left;

    color: #ffffff;font-size: clamp(2.5rem, 7vw, 6.5rem);font-family: Montserratbold, arial, Helvetica, Sans-Serif!important;text-transform: uppercase;margin: 0;line-height: 1.1;white-space: nowrap;
}

/* Dritte Zeile (Text) */
.table_section3_row3 {
    font-size: clamp(1.25rem, 4vw, 2.25rem);
    padding: 3px 30px 0px 30px;
    white-space: normal;
    color: #ffffff;
    line-height: 1.4;
    font-family: Montserratlight, Arial, Helvetica, Sans-Serif;
}

.table_section3_row3.desktop {display: none;}
.table_section3_row3.mobile {display: block;}





#section3_m .bg-img {position: absolute;width: 60%;height: auto;pointer-events: none;z-index: -10;}
/* Bild 1 – oben rechts */
#section3_m .img1 {top: -33vw;left: 30vw;}
/* Bild 2 –  mitte */
#section3_m .img2 {bottom: -5vw;left: 5vw;}





/* ====== SECTION 4 ======  */


#section4_m {
    position: relative;
    width: 100%;
    min-height: 130vh;
    overflow: hidden;
    display: block;
    color: #ffffff;
    font-family: Montserratbold, arial, Helvetica, Sans-Serif!important;
    background-color: transparent!important;
}


/* Splide Styles */
#section4_m .slider-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    height: 66vh;margin-top:5vh;
}

#section4_m .splide {
    margin-top: 10px;background-color: transparent!important;
    visibility: hidden;
}
#section4_m .splide.is-initialized {
    visibility: visible;
}
#section4_m .splide__slide {
    flex: 0 0 auto;
    width: 35vh;
    margin-right: 20px;
    border-radius: 10px;
    overflow: hidden;
    will-change: transform;
}

.splide__track {
    overflow: hidden;
    position: relative;
}
#section4_m .splide__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
#section4_m .splide__slide img,
#section4_m .splide__slide video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4vh;
    backface-visibility: hidden;
    transform: translateZ(0);
}
#section4_m .splide__track--ltr {
    color: transparent !important;
}



/* text Styles */
#section4_m .text-block {
    margin-top:5vh;
}


#section4_m .text-block .title {
    font-size: clamp(2.5rem, 7vw, 6.5rem);
    padding: 0px 30px 0px 30px;
    color: #ffffff;
    z-index: 100;
}

#section4_m .text-block .desc {
    font-size: clamp(1.25rem, 4vw, 2.25rem);line-height: 1.4;
    color: #ffffff;
    padding: 0px 30px 0px 30px;
    max-width: 90%;
    font-family: Montserrat, arial, Helvetica, Sans-Serif;
}








/* ===== Menü Styles  ===== */
#section4_m .menu {
    position: absolute;
    bottom: 4.5vh; /* sitzt am unteren Rand */
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.4vh clamp(2px, 1vw, 6px); /* kleinerer Abstand zwischen Buttons */
    padding: 0 30px; /* linker/rechter Rand */
    box-sizing: border-box;
    text-align: center;
    font-size: clamp(1.25rem, 4vw, 2.25rem);
}

/* Buttons */
#section4_m .menu button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.6s ease;
    font-size: inherit;
    white-space: nowrap;
}

/* Active */
#section4_m .menu button.active {color: #f26161;}







/* ===== SECTION 5 (responsive, vertikal zentriert) ===== */

#section5_m { min-height: 120vh;
    box-sizing: border-box; position: relative; overflow: hidden; z-index: 999999!important; }


/* Bild-Container */
#section5_m .casestudywrapper_image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cs-gap, clamp(16px, 4.5vh, 48px));
    padding: 0 30px;
    box-sizing: border-box;
}

#section5_m .casestudywrapper_image img {
    display: block;
    width: 100%;
    aspect-ratio: 655 / 354;
    object-fit: contain;
    border-radius: 10px;
    cursor: pointer;
}










/* Overlay */
#section5_m .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1F1723;
    display: none;
    z-index: 1000;
    overflow: hidden;
    padding: 30px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    transition: background-color 0.4s ease;
}

#section5_m .overlay.show {
    background-color: rgba(0,0,0,0.9);
    display: flex;
}

/* Overlay Content */
#section5_m .overlay-content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;border-radius: 10px;
}

#section5_m .overlay-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    opacity: 0;
    transform: scale(0.1);
    transition: all 0.4s ease;
}





/* Close Button */
#section5_m .close-btn {
    position: fixed;
    top: 0px;right: 0px;
    cursor: pointer;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;mix-blend-mode: difference;

    /* Startzustand: unsichtbar */
    opacity: 0;
    transform: scale(0.1);
    transition: all 0.4s ease;

}

#section5_m .close-btn svg {width: 2rem;height: 2rem;pointer-events: none;}


/* Overlay-Show: Fade-In */
#section5_m .overlay.show .close-btn {opacity: 1;top: 40px;right: 50px;transform: scale(1);}






/* Scroll-Down Button */
#section5_m .scroll-down-wrapper {
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;mix-blend-mode: difference;
    opacity: 0;
    transition: opacity 0.4s ease, bottom 0.4s ease;
}
.sec5scrolldown{padding: 20px;}

#section5_m .scroll-down-wrapper svg {
    width: 2rem;
    height: auto;
    display: block;
}

/* Overlay-Show: Fade-In */
#section5_m .overlay.show .scroll-down-wrapper {
    opacity: 1;
    bottom: 70px;
    /* Bounce erst starten nach Fade-In */
    animation: bounce 2s infinite;
    animation-delay: 0.4s; /* nach der Fade-In Dauer */
}

/* Bounce Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(10px);
    }
}
























/* ===== SECTION 6 ===== */

#section6_m { min-height: 100vh;position: relative; z-index: 1!important;   }

#section6_m .kontakt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 30px;
    width: 100%;
    box-sizing: border-box;
}


/* Kontakt-Blöcke */
#section6_m .kontakt-block {
    width: 100%;
    max-width: 600px;
    margin-bottom: 10px;
}

/* Rechte Seite (Textblock) */
#section6_m .kontakt-block.rechts .roteschrift {
    color: #F26161;
    font-size: clamp(1.5rem, 5vw, 3rem);
    margin: 0;
    font-family: Montserratbold, arial, Helvetica, Sans-Serif!important;
}

#section6_m .kontakt-block.rechts .kontaktueberschrift {
    color: #ffffff;
    font-size: clamp(2.5rem, 7vw, 6.5rem);
    margin-bottom: 12px;
    font-family: Montserratbold, arial, Helvetica, Sans-Serif!important;
    text-transform: uppercase;
}

#section6_m .kontakt-block.rechts .kontakttext {
    color: #ffffff;
    font-size: clamp(1.25rem, 4vw, 2.25rem);
    line-height: 1.3;
    font-family: Montserratlight, Arial, Helvetica, Sans-Serif;
    margin-bottom: 30px;
}

/* PDF Button */
#section6_m .kontakt-block.rechts .pdf_button {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 55px;
    height: 45px;
    background-image: url("/wp-content/themes/blankslate-child/icons/download.svg");
    background-size: 45px 45px;
    background-repeat: no-repeat;
    background-position: left center;
    white-space: nowrap;
    text-decoration: none;
    color: #000;
}

#section6_m .kontakt-block.rechts .pdf_button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 45px;
    background-image: url("/wp-content/themes/blankslate-child/icons/download_hover.svg");
    background-size: 45px 45px;
    background-repeat: no-repeat;
    background-position: left center;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

#section6_m .kontakt-block.rechts .pdf_button:hover::before { opacity: 1; }

/* Download Link  */
#section6_m .kontakt-block.rechts a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #ffffff!important;
    margin-left: 0px;
    font-size: clamp(1.25rem, 4vw, 2.25rem);
    font-family: Montserratlight, Arial, Helvetica, Sans-Serif;
    margin-bottom: 52px;
}





/* Links-Seite (Formular) */
#section6_m .kontakt-block.unten {width: 100%; max-width: 100%;}



/* name und vorname untereinander */
#section6_m .atkf-namensfelder {
    flex-direction: column;
    gap: 0; /* Optional: Entfernt den horizontalen Abstand */
}

/* 2. Da der Abstand im HTML nur mit <br> und flex: 1 gemacht wird, müssen wir den Platz
 *  zwischen den Feldern manuell wieder herstellen */
#section6_m .atkf-namensfelder > div {
    /* Stellt sicher, dass der Container für Vor- und Nachname die volle Breite hat */
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 1rem; /* Fügt den gewünschten vertikalen Abstand hinzu */
}




/* ============= Kontaktformular ================= */
    #section6_m .at-kontaktformular {
        position: relative; border-radius: 15px; width: 100%!important; max-width: 100%!important; left: 50%;
        transform: translateX(-50%); font-size: clamp(1.25rem, 4vw, 2.25rem); box-sizing: border-box; padding: 25px;}
    #section6_m .at-kontaktformular input[type="text"], #section6_m .at-kontaktformular input[type="email"],
    #section6_m .at-kontaktformular textarea {font-size: clamp(1rem, 3.2vw, 1.8rem);}
    #section6_m .at-kontaktformular button {font-size: clamp(1rem, 3.2vw, 1.8rem);}

    /*Datenschutz Hinweis*/
    .atkf-daschusatz {font-size: clamp(0.9rem, 2.6vw, 1.5rem);}

    /* Pflichtfelder */
    #section6_m .atkf-message-box {font-size: clamp(0.9rem, 2.6vw, 1.5rem);}





/* ===== Footer ===== */



#section6_footer_m {
    display: flex;position: relative;
    flex-direction: column; /* alles untereinander */
    justify-content: center; /* vertikal zentrieren */
    align-items: flex-start;
    width: 100%;
    padding: 15px 30px 40px 30px;
    background-color: #1F1723;
    color: #ffffff;
    font-family: Montserrat, arial, Helvetica, Sans-Serif;
    min-height: 20vh;
    box-sizing: border-box;
    bottom:-15px!important;
}

/* Jede Spalte */
.footer_column {
    display: flex;margin-top:40px;
    flex-direction: column;
    gap: 4px; /* Abstand zwischen Titel und Items */
}

/* Titel */
.footer_title {
    font-size: clamp(2.5rem, 7vw, 6.5rem);
    margin-bottom: 5px;color:#F26161;
    font-family: Montserratbold, arial, Helvetica, Sans-Serif;

}

/* Items (Links) */
.footer_item a {color: #ffffff;text-decoration: none;font-weight: normal;font-size: clamp(1.25rem, 4vw, 2.25rem);}


.footer_item a:link {color: #ffffff!important;}
.footer_item a:visited {color: #ffffff!important;}
.footer_item a:hover {color: #ffffff!important;}
.footer_item a:active {color: #ffffff!important;}

/* Optional: responsive Layout für größere Bildschirme */
@media (min-width: 768px) {
    #section6_footer_m {
        flex-direction: row;         /* nebeneinander */
        justify-content: space-between;
    }
}















/* ===== #section7_m Impressum  ===== */

/* Grundlegendes Styling für Section */
#section7_m {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-family: Montserrat, arial, Helvetica, Sans-Serif!important;
    padding-top: 30px;

}

#section7_m .impressum_wrapper_m {
    width: 100%;
    margin: 0;
    padding: 0;
}

#section7_m .impressum {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 0 30px; /* Abstand links/rechts */
    box-sizing: border-box;
}

/* Überschriften */
#section7_m .impr_daschu_ueberschrift {
    font-size: clamp(2.5rem, 7vw, 6.5rem);
    font-family: Montserratbold, arial, Helvetica, Sans-Serif;
    margin-bottom: 20px;

}

#section7_m .impr_daschu_kleine_ueberschrift {
    font-size: clamp(1.5rem, 5vw, 3rem);
    font-family: Montserratbold, arial, Helvetica, Sans-Serif;
    margin-top: 1px;
    margin-bottom: 10px;
}

/* Textabsätze */
#section7_m .impressum p {
    line-height: 1.4;font-size: clamp(1.25rem, 4vw, 2.25rem);
    margin: 0 0 20px 0;
    color: #ffffff;
}

#section7_m a {
    color: #ffffff;
color: #ffffff;text-decoration: none;font-weight: normal;font-size: clamp(1.25rem, 4vw, 2.25rem);
}

#section7_m a:link {color: #ffffff!important;}
#section7_m a:visited {color: #ffffff!important;}
#section7_m a:hover {color: #ffffff!important;}
#section7_m a:active {color: #ffffff!important;}




/* ===== #section8_m Impressum  ===== */

#section8_m {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* flex-start, weil viel Text */
    color: #ffffff;
    font-family: Montserrat, Arial, Helvetica, Sans-Serif !important;
    overflow: hidden;
    padding-top: 30px;

    word-break: break-word;
}

/* Wrapper für die eigentliche Datenschutzerklärung */
#section8_m .daschu_wrapper {
    max-width: 1200px;       /* maximale Breite */
    width: calc(100% - 60px); /* 30px links + 30px rechts */
    margin: 0 auto;           /* zentriert den Container */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* Hauptüberschrift */
#section8_m .impr_daschu_ueberschrift {
    font-size: clamp(2.5rem, 7vw, 6.5rem);
    font-family: Montserratbold, Arial, Helvetica, Sans-Serif;
    margin-bottom: 20px;
    position: relative;line-height:1;
}


/* Unterüberschriften */
#section8_m .impr_daschu_kleine_ueberschrift {
    font-size: clamp(1.4rem, 3.5vw, 2.4rem);
    font-family: Montserratbold, Arial, Helvetica, Sans-Serif;
    margin-bottom: 10px;    margin-top: 10px;

    line-height: 1.3;
}

/* Textabsätze */
#section8_m p {
    font-size: clamp(1.25rem, 4vw, 2.25rem);
    line-height: 1.4;
    color: #ffffff;
    margin-bottom: 20px;
}

/* Listen (z. B. bei Aufzählungen in DSGVO-Texten) */
#section8_m ul {
    list-style: disc;
    margin: 0 0 20px 25px;
    padding: 0;
}

#section8_m li {
    margin-bottom: 8px;
    line-height: 1.4;
}




/* Links */
#section8_m a {color: #ffffff;text-decoration: none;font-size: clamp(1.25rem, 4vw, 2.25rem);}
#section8_m a:link {color: #ffffff!important;}
#section8_m a:visited {color: #ffffff!important;}
#section8_m a:hover {color: #ffffff!important;}
#section8_m a:active {color: #ffffff!important;}







#section7_m .button,
#section8_m .button {
display: inline-block;       /* damit width/height wirken */
width: 40px;
height: 40px;
background-image: url("/wp-content/themes/blankslate-child/icons/close.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 25px;right:25px;
border-bottom: 0px dashed transparent;

}


/* Button für #section7_m #section8_m  */
#section8_m .button {

}


/* Button rechts */
#section7_m .button {
}

#section7_m, #section8_m {display:none}








/*######################################################*/
/* ====== Breakpoints - Handy ====== */


/* #section2_m */
/*#############*/
/* Breakpoint für sehr kurze Displays / beschreibungstext u. containerbreite */
@media (max-height: 670px) {
    #section2_m .beschreibungstext {font-size: clamp(1.1rem, 3.8vw, 2.1rem)!important;line-height: 1.32;}
    #section2_m .fade-container.fullviewport {padding: 30px 20px 30px 30px;}
    #section4_m .text-block .desc {line-height: 1.3;}
}
/* Breakpoint für sehr schmale Displays / Überschrift */
@media (max-width: 380px) {
    #section2_m .filled_m {font-size: clamp(2.3rem, 6.2vw, 6.5rem);}
    #section4_m .menu {font-size: clamp(1rem, 3.2vw, 1.8rem);}
}





/*######################################################*/
/* ====== Breakpoints - Tablet ====== */


/* Tablets im Portrait-Modus */
/*@media (min-width: 768px) and (max-width: 1024px) {

    .content_m h3 {color:#000000!important}


    .section3_stroke {height: 750px!important;}
    .stroke_text_wrapper {top: 150px!important;}
    .markus_img {height: 70%!important;bottom: 6px!important;right: -130px!important;}

    section, #section5_m .overlay, #section6_footer_m {width: 100%;max-width: 480px;min-height: auto;margin: 0 auto;}
    #section5_m .overlay { left: 50%; transform: translateX(-50%); }

    #section6_m {padding-bottom:40vh!important;align-items: flex-start!important;}
    #section6_footer_m {height: 60vh;}


}*/

/* Kleinere Tablets / große Smartphones (Portrait) */
@media (min-width: 600px) and (max-width: 767px) and (orientation: portrait) {
    .section3_stroke {height: 780px!important;}
    .stroke_text_wrapper {top: 150px!important;}
    .markus_img {height: 70%!important;bottom: 1px!important;left: 60%;transform: translateX(-50%) translateX(80px);}

    #section5_m   {min-height: 150vh!important;}

    #section6_footer_m {flex-direction: column;align-items: flex-start;   }
    .footer_column {display: flex;flex-direction: column; gap: 4px;margin-top: 40px;}
}

/* Standard Tablets (Portrait) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .section3_stroke {height: 820px!important;}
    .stroke_text_wrapper {top: 150px!important;}
    .markus_img {height: 70%!important;bottom: 1px!important;left: 60%;transform: translateX(-50%) translateX(80px);}

    #section5_m   {min-height: 180vh!important;}

    #section6_footer_m {flex-direction: column;align-items: flex-start;   }
    .footer_column {display: flex;flex-direction: column; gap: 4px;margin-top: 40px;}
}

/* Große Tablets / kleine Desktops */
@media (min-width: 1025px) and (max-width: 1366px) and (orientation: portrait) {
    .section3_stroke {height: 820px!important;}
    .stroke_text_wrapper {top: 150px!important;}
    .markus_img {height: 70%!important;bottom: 1px!important;left: 60%;transform: translateX(-50%) translateX(80px);}

    #section5_m   {min-height: 180vh!important;}

    #section6_footer_m {flex-direction: column;align-items: flex-start;   }
    .footer_column {display: flex;flex-direction: column; gap: 4px;margin-top: 40px;}
}