:root {
    --white: #fff;
    --mkl-maincolor: hsl(189, 77%, 17%);
    --mkl-boxcolor: hsl(0, 0%, 96%);
    --mkl-text: #888;
    --mkl-box_headline: hsla(190, 91%, 9%, 0.495);
        --mkl-boxcolor: hsl(0, 0%, 100%);

}


*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

html {
    scroll-behavior: smooth;
}


html,
body {
    height: 100%;
    margin: 0;
    padding: 0;

}



body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.125em;
    color: #555;
    overflow-y: scroll;
}




#wrapper {
    position: absolute;
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;

}


video {
    background-color: var(--mkl-maincolor);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
}







#header {
    color: var(--white);
    z-index: 2;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;

}


#header .inside {
    margin: 0 auto;
    padding: 2.5em;
    display: flex;
    /*  align-items: baseline; */

}

/*  #header .inside .claim {
     font-size: clamp(1rem, -1.5rem + 5vw, 2rem);
     width: 70%;
     font-weight: 300;

 } */

#header .inside .logo {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 auto;
    z-index: 10;
}


/* 
 #footer {
    background-color: var(--mkl-maincolor);
    color: var(--white);

    & a {
        color: var(--white);
    }

}

#footer .inside {
    text-align: center;
    padding: 1em;
    font-size: .9rem;
    z-index: 1
}


#footer >div {
    display: flex;
    align-items: center;
   justify-content: center;
 }
 


 .footer-logo img  {
        width:80px;
    } 
 */

#main {
    right: 0;
    width: 100%;
    min-height: 100vh;
    z-index: 2;
}



.mod_article {
    padding: 0 40px;
}


h1 {
    font-size: clamp(2rem, -1.5rem + 8vw, 3rem);
    font-weight: 300;
    line-height: 1.2;
    padding: .5em 0;
    font-family: 'Times New Roman', Times, serif
}

h2 {
    font-size: clamp(1.5rem, -1.5rem + 6vw, 2rem);
    font-weight: 300;
    line-height: 1.2;
    padding: .5em 0;
    font-family: 'Times New Roman', Times, serif
}


p {
    line-height: 1.5;
}

img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
}

.content {

    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.content:nth-child(odd) {
    flex-direction: row-reverse;
}

.content>div {
    flex: 1 1 calc(991px / 2);
}

.text {

    padding: 2em;
}


.ce_headline {
    padding: 1em 0;
}

/* -------------Navigation----------------- */



.mod_navigation {

    z-index: 1;
    position: absolute;
    top: 120px;
    width: 100%;
    /*    border-bottom: 1px solid #e5e5e5; */
    display: flex;
    justify-content: flex-end;
    padding: 1em 5em 1em 1em;

    display: none;

    & a {
        text-decoration: none;
        color: #fff;
    }
}


nav strong {
    font-weight: normal;
}


nav li {
    color: #fff;
    list-style: none;
    display: inline-block;
    padding: 0 1em;
    justify-content: flex-end;

}


.columns {
    margin: 0 auto;
    padding: 0 0 2rem 0;
    width: 100%;
    max-width: 1280px;
    display: grid;
    /*  grid-auto-flow: column; */
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.box {
    background-color: var(--mkl-boxcolor);
    border-radius: .5em;
    height: 100%;
max-height: 280px
}

.box h2 {
    position: relative;
    top: -46px;
    z-index: 10;
    font-size: clamp(1.5rem, -1.5rem + 2.5vw, 1.8rem);
    font-weight: 300;
    line-height: 1.2;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    margin: 0;
    padding: 0.5rem;
    background-color: var(--mkl-box_headline);
}

.box .ce_text {
    position: relative;
    top: -40px;
    margin: 0;
    padding: 0 2em;
    display: none;

}

.box .ce_image img {
    border-radius: .5em;

}

.box .content-text .rte h2 a {
	color: var(--white);
    text-decoration: none;
    display: block;
}




.teaser {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 100vh;
    z-index: 4;
    /*  text-align: center; */
}

 .teaser h2 {
     margin-top: 30vh;
     color: #ffffff;
     font-size: clamp(2.4rem, -1.5rem + 8vw, 4rem);
     font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-weight: 400;
     text-shadow: 2px 2px 5px #333;
     text-align: center;
     background-color: hsla(183, 23%, 16%, 0.464);
     padding: .5em 1.5em;
 } 

 footer {
    background-color: var(--mkl-maincolor);
}





#footer {
    position: relative;
    bottom: 0px;
    background-color: var(--mkl-maincolor);
    color: var(--white);

    & a {
        color: var(--white);
    }

}

#footer .inside {
    margin: 0 auto;
    padding: 1em;
    font-size: .75rem;
    width: 100%;
    max-width: 1080px;
}

#footer>div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

#footer>div h2 {
    font-size: 1.25em;
}


.footernav-partner {
    margin-left: 1em;
}

#footer .footernav-partner h2,
#footer .footernav-partner ul {
    text-align: left;
}

#footer .footernav-partner ul {
    text-align: left;
    margin-left: 0;
    padding-left: 0;
    line-height: 1.5;
}

.footernav-partner a {
    text-decoration: none;
}


.footernav-anschrift p {
    font-size: .75rem;
}




 @media (max-width: 767px) {
     .teaser {
         max-width: 80%;
         margin: 0 auto;
         padding: 0 1em;

     }
    }




@media (max-width: 960px) {
    .columns {
        grid-template-columns: repeat(2, 1fr);

    }

}

@media (max-width: 620px) {

    .columns {
        grid-template-columns: repeat(1, 1fr);

    }

    .teaser {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding-top: 25vh;


    }

    .teaser h2 {
        color: #fff;
        background-color: hsla(183, 23%, 16%, 0.464);
        margin: 0 auto;
        font-size: clamp(1.7rem, -1.5rem + 8vw, 4rem);
        line-height: 1.4;
        text-shadow: 2px 2px 5px #333;
        text-align: center;
        padding: 0.5em 0.25em;
    }

}

.down {
   position: relative;
  bottom: 150px; 
    width: 60px;
    height: auto;
    margin: 0 auto;
    z-index: 5;
}



nav.mod_customnav {
    margin: 0;
    padding: 0;
    text-align: left;

}

nav.mod_customnav  h2 {
    padding-top: 1em;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

nav.mod_customnav li {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: #fff;
    line-height: 2;
    margin: 0;
    padding: 0;


}

nav.mod_customnav li a {
    color: #fff;
    text-decoration: none;
}


@media (max-width: 600px){
    
    footer .inside {
/*         background-color: aquamarine; */
        display: flex;
        flex-direction: column;
    }

/*     footer .inside>div {
        outline: 1px solid red;
    } */

      .footernav-partner h2, .footernav-anschrift h2 {
        padding-top: 1em;
       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

      }

    .footernav-partner ul li, .footernav-anschrift p {
    margin: 0;
    padding: 0;
    list-style-type: none;
    line-height: 2;

    }
    .footernav-anschrift {
        padding-bottom: 2em;
    }
}