.mobile_menu{position:fixed;z-index:100;display:none}.mobile_menu .inner{height:100%;background:#000;overflow-y:scroll}.mobile_menu.active.position_left{box-shadow:2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_top{box-shadow:0 2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_right{box-shadow:-2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_bottom{box-shadow:0 -2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.no_shadow{box-shadow:none!important}.mobile_menu_trigger{display:none}.mobile_menu_wrapper{position:relative;width:100%;overflow:hidden}.mobile_menu_overlay{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:99}.mobile_menu_overlay.background{background:rgba(0,0,0,.5)}.mobile_menu li.submenu_hide>ul{display:none}.mobile_menu li.submenu_show>ul{display:block}body.ie8 .mobile_menu,body.ie8 .mobile_menu_trigger,body.ie9 .mobile_menu,body.ie9 .mobile_menu_trigger{display:none!important}
/* open-sans-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../../files/fonts/open-sans-v40-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* open-sans-300italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
    src: url('../../files/fonts/open-sans-v40-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* open-sans-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../../files/fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* open-sans-italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: url('../../files/fonts/open-sans-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* open-sans-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../../files/fonts/open-sans-v40-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* open-sans-500italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 500;
    src: url('../../files/fonts/open-sans-v40-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* open-sans-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../../files/fonts/open-sans-v40-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
:root {
    --white: #fff;
    --light-grey: rgb(240, 240, 240);
    --text-grey: rgb(76, 76, 76);
    --grün: rgb(181, 204, 130);
    --blau: rgb(138, 158, 179);
    --lila: rgb(119, 68, 102);

    /* font-families */

    --ff-sans-normal: "Open Sans", sans-serif;

    /* font-sizes */
    --fs-900: 9.375rem;
    --fs-800: 6.25rem;
    --fs-700: 3rem;
    --fs-600: 2rem;
    --fs-500: 1.75rem;
    --fs-450: 1.5rem;
    --fs-420: 1.3rem;
    --fs-400: 1.125rem;
    --fs-300: 1rem;
    --fs-200: 0.875rem;
}


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


html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--ff-sans-normal);
    line-height: 1.8;
    font-size: var(--fs-400);
    color: var(--text-grey)
}

body {
    overflow-y: scroll;
}

#wrapper {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}


header {
    margin: 0;
    padding: 0;
}

header .inside {
    margin: 0 auto;
    padding: 1em;
    max-width: 1180px;
}

#container {
    max-width: 1180px;
    margin: 0 auto;
}

#main {
    width: 100%;
}

main .inside {
    margin: 0 auto;
    padding: 0 1em 1em;
}


footer {
    background-color: var(--blau);
}

footer .inside {
    display: flex;
    justify-content: space-between;
    max-width: 1180px;
    margin: 0 auto;
    padding: 1em;
    color: var(--white);
    font-size: var(--fs-200)
}

footer .inside .imprint a {
    color: var(--white);
    text-decoration: none;
}


footer .inside .imprint a:hover {
    text-decoration: underline;
}


.logo {
    text-align: center;
}


.logo_mobile img {
    width: min(400px, 100%);
}

.logo_mobile {
    /*     outline: 1px solid rgb(192, 227, 136); */
    /*   text-align: center; */
}


.logo img {
    width: min(600px, 100%);
}

@media (max-width: 979px) {
    .logo {

        display: none;
    }

    #container {
        max-width: 1180px;
        margin: 0 auto;
        padding-bottom: 2em;
        display: flex;
        /*   flex-wrap: wrap; */
        flex-direction: column;
    }

    #main {
        width: 100%;
    }

    main .inside {
        margin: 0 auto;
        padding: 0 1em;
    }
    

    #right {
        width: 100%;
        margin-top: .5em;
        padding: 1em;
    }

    footer .inside .imprint {
        display: flex;
        flex-direction: column;
        padding-left: 2em;
    }

    footer .inside .imprint span {
        display: none;
    }
}

/* --------------------Fonts--------------------- */

h1 {
    margin: 0 0 1rem 0;
    padding: 0;
    color: var(--lila);
/*     font-size: var(--fs-600); */
    font-weight: 300;
    line-height: 1.5;
    font-size: clamp(1.5rem, 0.93vw + 1.314rem, 2rem);
}

.untertitel h2 {
    margin: 0 0 1rem 0;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;

}

p {
    margin: 0;
    padding: 0;
}

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

@media (min-width: 980px) {

    .mobile-nav {
        display: none;
    }

    .logo_mobile {
        display: none
    }


}

.mobile-nav {
    z-index: 100;
    position: absolute;
    height: 50px;
    top: 2em;
    right: 2em;
    color: #ff0000;
    background-color: var(--white);

}

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

.menu-btn {
    display: block;
    position: absolute;
    right: 20px;
    top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

.menu-btn__burger {
    width: 30px;
    height: 2px;
    background: var(--text-grey);
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
}

.menu-btn__burger::before,
.menu-btn__burger::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 2px;
    background: var(--text-grey);
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
}

.menu-btn__burger::before {
    transform: translateY(-8px);
}

.menu-btn__burger::after {
    transform: translateY(8px);
}


/* ANIMATION */

.menu-btn.open .menu-btn__burger {
    transform: translateX(-50px);
    background: transparent;
    box-shadow: none;
}

.menu-btn.open .menu-btn__burger::before {
    transform: rotate(45deg) translate(35px, -35px);
}

.menu-btn.open .menu-btn__burger::after {
    transform: rotate(-45deg) translate(35px, 35px);
}

.mobile_menu .inner {
    background-color: var(--white);
    width: 100%;
    color: var(--text-grey);
}

.mobile_menu_overlay {
    width: 71%;
}


nav.mod_customnav .invisible {
    display: none;
}

.logo-mobile-nav {
    width: 100%;
    text-align: center;
    padding: 1em 1em 0;
}

.logo-mobile-nav img {
    width: 92%;
    margin: 0;
    padding: 0;
}

.mobile_menu .contact-box {
    /*     width: 90%; */
    margin: 0 auto;
    text-align: left;
    padding: 1em 0 0 2.25em;
    font-size: var(--fs-200);
    line-height: 1.5;
}

nav.mod_customnav {
    margin: 0;
    padding: 0;
}


nav.mod_customnav a.trail {
    margin: 0;
    padding: 0;
    font-size: var(--fs-400);
}

nav.mod_customnav ul {
    margin: 0;
    padding: 1em 0 0 0;
}

nav.mod_customnav li {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: var(--text-grey);
    line-height: 2;
    border-bottom: 1px solid var(--light-grey);

}

nav.mod_customnav li a {
    color: var(--text-grey);
    text-decoration: none;
    font-size: var(--fs-300);
    padding: 0 0 0 2em;
}

nav.mod_customnav .active {
    color: var(--lila);
    font-size: var(--fs-300);
    padding: 0 0 0 1em;
}

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

@media (max-width: 779px) {
    .main-menu {
        display: none;
    }

    h1 {
        font-weight: var(--fs-400);
    }

    .untertitel h2 {
        margin: 0 0 1rem 0;
        padding: 0;
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.5;
    
    }
}

@media (min-width:780px) {

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


    .main-menu strong {
        font-weight: normal;
    }



    .main-menu ul {
        font-size: var(--fs-300);
        list-style-type: none;
        display: flex;
        margin: 0 auto;
        padding: 1em;
        justify-content: space-between;
        width: 100%;
        max-width: 980px;
    }


    .main-menu li a {
        display: block;
        padding: 0;
        text-decoration: none;
        color: var(--text-grey);
    }


    .main-menu li a:hover {
        text-decoration: underline;
    }


    .main-menu li .active {
        display: block;
        padding: 0;
        font-weight: 600;
        color: var(--lila);

    }

}