:root {
	--colorApp: var(--colorAppSDC);
	--colorAppHover: var(--colorAppHoverSDC);

    /* --------------------------
        typo Landingpage
    -------------------------- */
    --fs_700: var(--step_700, 2rem); /* h2 = 32px  */
    --fs_600: var(--step_600, 1.25rem); /* h3, copy = 20px */

    --lh_600: 2rem;
    
    /* --------------------------
        spacer Landingpage
    -------------------------- */
    --step_spacer_128: clamp(4rem, 3.2174rem + 3.4783vw, 8rem);
    --step_spacer_80: clamp(2.5rem, 2.0109rem + 2.1739vw, 5rem);
    --step_spacer_64: clamp(2rem, 1.6087rem + 1.7391vw, 4rem);
    --step_spacer_40: clamp(1.25rem, 1.0054rem + 1.087vw, 2.5rem);

    --spacer_128: var(--step_spacer_128, 8rem); /* 8rem */
    --spacer_80: var(--step_spacer_80, 5rem); /* 5rem */
    --spacer_64: var(--step_spacer_64,4rem); /* 4rem */
    --spacer_40: var(--step_spacer_40, 2.5rem); /* 2.5rem */
}



/* ------------------
	General 
------------------ */
html {
	scroll-behavior: smooth;
}


body.landingpage .map-section {
    position: relative;
    margin-bottom: var(--spacer_128);
}
body.landingpage .map-container {
    width: 100%;
    height: calc(100vh - 30rem);
}
body.landingpage .map-cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5rem; 
    z-index: 50;   
}
body.landingpage .map-cta .stoerer {
    margin: auto;   
}

body.landingpage .content-section,
body.landingpage .fluid-section-inner {
    width: 100%;
    max-width: 74rem;
    font-family: light;
    margin: 0 auto var(--spacer_128);
}

body.landingpage .content-section h2 {
    display: flex;
    align-items: center;
    font-family: semi-bold;
    font-size: var(--fs_700);
    text-transform: uppercase;
    margin-bottom: var(--spacer_40);
}
body.landingpage .content-section h2 img,
body.landingpage .content-section h4 img {
    width: 4rem;
    margin-right: 1.5rem;
}
body.landingpage .content-section h3,
body.landingpage .content-section p {
    font-size: var(--fs_600);
    line-height: var(--lh_600);
}
body.landingpage .content-section p {
    font-family: light;
}
body.landingpage .content-section h3 {
    font-family: semi-bold;
    text-transform: uppercase;    
    margin-bottom: calc(var(--spacer_80) / 3);
}

body.landingpage .content-section .strong {
    font-family: semi-bold;
}
body.landingpage .content-section img {
    max-width: 100%;
}
body.landingpage .content-section p {
    margin-bottom: var(--spacer_40);
}

body.landingpage .cards {
    --cards_column_count: 3;
    
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(var(--cards_column_count), 1fr);
    margin-bottom: var(--spacer_40);
}
body.landingpage .highlights-card {
    text-align: left;
    padding: var(--spacer_40);
    box-shadow: 0px 0px 10px #00000029;
}
body.landingpage .highlights-card .highlights-card-header {
    text-align: center;
    margin-bottom: var(--spacer_64);
}
body.landingpage .highlights-card img {
    width: auto;
    height: 9rem;
}

body.landingpage .slider-wrap {
    --control_size: 2rem;
    --control_color_dark: hsl(0, 0%, 60%);
    --control_color_light: hsl(0, 0%, 89%);
    
    background-color: var(--colorApp);
    color: #fff;
    padding: var(--spacer_80) var(--spacer_128);
    box-shadow: 0px 0px 10px #00000029;
}
body.landingpage #screen-slider,
body.landingpage .slider-list {
    margin-bottom: var(--spacer_40);
}
body.landingpage .slider-list-grid {
    --sliderlist_column_count: 2;
    
    display: grid;
    column-gap: 3rem;
    row-gap: 1rem;
    grid-template-columns: repeat(var(--sliderlist_column_count), 1fr);
    /* margin-bottom: var(--spacer_40); */
}

body.landingpage .slider-list li {
    font-size: var(--fs_600);
    line-height: var(--lh_600);
    font-family: regular;
}
body.landingpage .slider-list li::marker {
    color: #fff;
}
body.landingpage .slider-list li::before {
    content: "\2022";
    color: #fff;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    font-size: 1.5rem;
    position: relative;
    top: 0.1rem;
    left: 0.4rem;
}
body.landingpage .slider-cta .stoerer {
    margin: auto;
}
body.landingpage .tns-liveregion {
   display: none;
}


body.landingpage ul.controls {
    display: none;
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}
body.landingpage ul.controls [data-controls] {
    border: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    z-index: 1;
    background: transparent;
    cursor: pointer;
}
body.landingpage ul.controls [data-controls="prev"] {
    left: 0;
}
body.landingpage ul.controls [data-controls="next"] {
    right: 0;
}
body.landingpage ul.controls [data-controls] svg {
    font-size: var(--control_size);
    color: var(--control_color_dark);
}
body.landingpage ul.controls [data-controls].disabled {
    cursor: initial;
}
body.landingpage ul.controls [data-controls].disabled svg {
    color: var(--control_color_light);
}

body.landingpage .fluid-section {
    width: 100%;
    max-width: 100%;
    padding: var(--spacer_80) 0;
}
body.landingpage .bg-grey {
    background-color: #E1E1E1;
}
body.landingpage .fluid-section.bg-grey {
    margin-bottom: 0;
}
body.landingpage .fluid-section-inner {
    margin-bottom: 0;
}
body.landingpage .faq-items {
    --faqlist_column_count: 2;
    
    display: grid;
    column-gap: 3rem;
    row-gap: 1rem;
    grid-template-columns: repeat(var(--faqlist_column_count), 1fr);
}

body.landingpage .stoerer {
    display: flex;
    align-items: center;
    width: 28rem;
    height: 6rem;
    background-color: #fff;
    box-shadow: 0px 0px 6px #00000029;
}
body.landingpage .stoerer-text {
    flex: 1;
    font-size: var(--fs_600);
    line-height: 1.2;
    text-transform: uppercase;
    padding: 0 2rem 0 2.2rem;
}
body.landingpage .stoerer-text span {
    font-family: semi-bold;
}
body.landingpage .stoerer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    background-color: var(--colorApp);
}
body.landingpage .stoerer-icon img {
    height: 3rem;
}

#welcome_modal .modal-body {
    padding-bottom: 1rem;
}
#welcome_modal .modal-body p,
#welcome_modal .app {    
    margin-bottom: 2rem;
}
#welcome_modal .app header {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
#welcome_modal .app header div {
    border-bottom: 1px solid var(--n1Blue) ;
}
#welcome_modal .app ul {
    margin-left: 4.5rem;
}
#welcome_modal .app a {
    color: var(--colorApp);
}
#welcome_modal .info p {
    margin-bottom: 0;
}
#welcome_modal .info p img {
    max-height: 1rem;
    position: relative;
    top: -0.1rem;
}

 #modalRegister .modal-footer {
    padding: 0;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: end;
}
 #modalRegister .modal-footer .mandatory {
    position: static;
}

@media (max-width: 80em) { 
    body.landingpage.with-mobile .content-section {
        padding-inline: 3rem;
    }
   
    body.landingpage.with-mobile .fluid-section-inner {
        padding-inline: 0;
    }
}

@media (max-width: 34em) {
    body.landingpage.with-mobile .map-container {
        height: calc(100vh - 40rem);
    }

    body.landingpage.with-mobile .stoerer {
        width: 23rem;
    }
    body.landingpage.with-mobile .stoerer-icon {
        display: none;
    }

    body.landingpage.with-mobile .cards {
        --cards_column_count: 1;
    }

    body.landingpage.with-mobile .slider-wrap {
        padding-inline: 2rem;
    }
    body.landingpage.with-mobile .slider-list-grid {
        --sliderlist_column_count: 1;
    }
    body.landingpage.with-mobile .slider-wrap .slider-cta {
        display: none;
    }

    body.landingpage.with-mobile .faq-items {
        --faqlist_column_count: 1;
    }

    body.landingpage.with-mobile footer .row {
        margin: 0;
    }
}

@media (min-width: 59em) {  /* ca 950er Auflösung */
    body.landingpage ul.controls [data-controls="prev"] {
        left: calc(var(--control_size) *-1);
    }
    body.landingpage ul.controls [data-controls="next"] {
        right: calc(var(--control_size) *-1);
    }
}