.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}
.cc-head>*:first-child{margin-top:0}.cc-head>*:last-child{margin-bottom:15px}.contao-cookiebar{--ccb-backdrop: rgba(0, 0, 0, .75);--ccb-anim-duration: .5s;--ccb-checked-clr: #399d32;--ccb-checked-bg: #dcf3db;--ccb-unchecked-clr: #9c9b99;--ccb-unchecked-bg: #fff;--ccb-disabled-clr: #c8c7c5;--ccb-disabled-bg: #f4f4f4;--ccb-focus-clr: #00a4f4;position:fixed;inset:0;z-index:9999;display:flex;align-items:var(--ccb-align, center);justify-content:var(--ccb-justify, center);letter-spacing:0;padding:15px;max-height:100dvh;box-sizing:border-box;pointer-events:none;overflow:hidden;color:var(--ccb-clr, #444)}.contao-cookiebar *{box-sizing:border-box}.contao-cookiebar p{color:var(--ccb-text, #868686);line-height:1.4}.contao-cookiebar label{position:relative;display:block;padding:8px 13px 8px 0;line-height:1.2rem}.contao-cookiebar label.group{font-weight:600}.contao-cookiebar input{position:absolute;width:1px;height:1px;outline:0 none;opacity:0}.contao-cookiebar input+label{padding:8px 13px 8px 45px;cursor:pointer}.contao-cookiebar input+label:before,.contao-cookiebar input+label:after{content:"";position:absolute;border-radius:10px}.contao-cookiebar input+label:before{top:7px;left:0;width:35px;height:18px;margin:0;box-sizing:content-box;background:var(--ccb-unchecked-bg);border:1px solid var(--ccb-unchecked-clr);transition:border-color .2s}.contao-cookiebar input+label:after{display:block;top:11px;left:4px;width:12px;height:12px;background:var(--ccb-unchecked-clr);transition:background .2s,margin-left .2s,padding .2s}.contao-cookiebar input+label:active:after{padding-left:5px}.contao-cookiebar input.cc-group-half+label:after{background:linear-gradient(to right, var(--ccb-unchecked-clr) 0%, var(--ccb-unchecked-clr) 50%, var(--ccb-checked-clr) 50%, var(--ccb-checked-clr) 100%)}.contao-cookiebar input:checked+label:after{background:var(--ccb-checked-clr);margin-left:17px}.contao-cookiebar input:checked+label:active:after{margin-left:12px}.contao-cookiebar input:checked+label:before{background:var(--ccb-checked-bg);border-color:var(--ccb-checked-clr)}.contao-cookiebar input:disabled+label{pointer-events:none}.contao-cookiebar input:disabled+label:after{background:var(--ccb-disabled-clr)}.contao-cookiebar input:disabled+label:before{background:var(--ccb-disabled-bg);border-color:var(--ccb-disabled-clr)}.contao-cookiebar input:focus-visible:not(.cc-hide-focus)+label:before{outline:3px dashed var(--ccb-focus-clr);outline-offset:2px}.contao-cookiebar .cc-btn{display:inline-block;cursor:pointer;width:100%;padding:8px 14px;margin-bottom:8px;font-size:15px;outline:0 none;border:1px solid var(--ccb-btn-bdr, #cfcfcf);border-radius:4px;color:var(--ccb-btn-clr, #444);background:var(--ccb-btn-bg, #f5f5f5)}.contao-cookiebar .cc-btn:hover,.contao-cookiebar .cc-btn:focus{background:var(--ccb-btn-bg-hvr, #ececec)}.contao-cookiebar .cc-btn:last-child{margin-bottom:0}.contao-cookiebar .grayscale{--ccb-btn-bg: #f1efef;--ccb-btn-bg-hvr: #ececec}.contao-cookiebar .grayscale .success{--ccb-btn-bg: #fbfbfb;--ccb-btn-bg-hvr: #f7f7f7}.contao-cookiebar .highlight .success{--ccb-btn-bg: #4e9e3e;--ccb-btn-bg-hvr: #4c933f;--ccb-btn-bdr: #3e7830;--ccb-btn-clr: #fff}.cc-focus:not(.cc-hide-focus):focus-visible{outline:3px dashed var(--ccb-focus-clr);outline-offset:-3px}.cc-invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;float:left}.cc-inner{display:inline-block;overflow-y:auto;max-height:100%;max-width:100%;padding:23px;border-radius:3px;opacity:0;pointer-events:none;visibility:hidden;font-size:1rem;text-align:left;background:var(--ccb-bg, #fff);box-shadow:var(--ccb-box-shadow, rgba(99, 99, 99, 0.2)) 0 2px 8px 0;animation:var(--ccb-anim, cookiebar-middle-in) var(--ccb-anim-duration) ease-in-out forwards}.cc-group{position:relative;border:1px solid var(--ccb-bdr, #d0d0d0);border-radius:5px;margin-bottom:10px}.cc-cookie-info{font-size:.875rem;background:var(--ccb-info-bg, #fff);border:1px solid var(--ccb-info-bdr, #efefef);padding:10px;border-radius:5px}.cc-cookie-info>div>span{font-weight:600}.cc-cookie-info>div+div{margin-top:5px;word-wrap:break-word}.cc-cookie-info+button.cc-detail-btn-details{margin-top:15px}.cc-cookies{background:var(--ccb-cookies-bg, #fbfbfb);border-radius:0 0 5px 5px}.cc-cookies>p{font-size:.875rem}.cc-cookies>p,.cc-cookies>.cc-cookie{margin:0;padding:15px;border-top:1px solid var(--ccb-cookies-bdr, #fbfbfb)}.cc-cookie label.cookie+*{margin-top:10px}.cc-cookie p{margin:0 0 15px;font-size:.875rem}.cc-cookie-desc p{margin-bottom:0}.cc-footer,.cc-info{text-align:center}.cc-info{margin-top:15px}.cc-info>p{font-size:.875rem}.cc-info>a{display:inline-block;font-size:.813rem;color:var(--ccb-detail-clr, #a2a2a2);text-decoration:none}.cc-info>a:hover{color:var(--ccb-detail-clr-hvr, #717171)}.cc-info>a+a:before{display:inline-block;content:"·";margin-right:5px}.cc-active .cc-inner{opacity:1;pointer-events:auto;visibility:visible}.cc-active.cc-blocked{pointer-events:auto;animation:cookiebar-overlay-in var(--ccb-anim-duration) ease-in-out forwards}.cc-saved.cc-inner{opacity:0;pointer-events:none;visibility:hidden}.cc-saved.cc-blocked{pointer-events:none;animation:cookiebar-overlay-out var(--ccb-anim-duration) ease-in-out forwards}.cc-left{--ccb-justify: flex-start}.cc-right{--ccb-justify: flex-end}.cc-top{--ccb-align: flex-start}.cc-top.cc-active{--ccb-anim: cookiebar-top-in}.cc-top.cc-saved{--ccb-anim: cookiebar-top-out}.cc-middle.cc-active{--ccb-anim: cookiebar-middle-in}.cc-middle.cc-saved{--ccb-anim: cookiebar-middle-out}.cc-bottom{--ccb-align: flex-end}.cc-bottom.cc-active{--ccb-anim: cookiebar-bottom-in}.cc-bottom.cc-saved{--ccb-anim: cookiebar-bottom-out}@media(min-width: 768px){.contao-cookiebar .cc-btn{width:auto;margin-bottom:0}.cc-inner{max-width:var(--ccb-max-width, 750px)}}@media(forced-colors){.contao-cookiebar input+label:after{border:1px solid currentColor}.cc-inner{border:1px solid currentColor}input.cc-group-half+label:after{margin-left:9px}}@media(prefers-reduced-motion){.contao-cookiebar{--ccb-anim-duration: 2s}}@media print{.contao-cookiebar{opacity:0}}@keyframes cookiebar-overlay-in{0%{background:rgba(0,0,0,0)}to{background:var(--ccb-backdrop)}}@keyframes cookiebar-overlay-out{0%{background:var(--ccb-backdrop)}to{background:rgba(0,0,0,0);visibility:hidden}}@keyframes cookiebar-top-in{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes cookiebar-top-out{0%{opacity:1;visibility:visible;transform:translateY(0)}to{opacity:0;visibility:hidden;transform:translateY(-100%)}}@keyframes cookiebar-middle-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes cookiebar-middle-out{0%{opacity:1;visibility:visible;transform:scale(1)}to{opacity:0;visibility:hidden;transform:scale(0)}}@keyframes cookiebar-bottom-in{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes cookiebar-bottom-out{0%{opacity:1;visibility:visible;transform:translateY(0)}to{opacity:0;visibility:hidden;transform:translateY(100%)}}.cc-group{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center}.cc-group>label{flex-grow:1;margin:5px 0 5px 10px}.cc-cookies{display:none;width:100%}.cc-detail-btn{padding:8px 10px;line-height:1.2rem}.cc-detail-btn-details{text-decoration:underline;padding:0;margin:0 0 10px}.cc-detail-btn,.cc-detail-btn-details{display:inline-block;color:var(--ccb-detail-clr, #a2a2a2);border:0 none;outline:0 none;background:rgba(0,0,0,0);font-size:13px;letter-spacing:0;text-transform:initial;cursor:pointer}.cc-detail-btn span:nth-child(2),.cc-detail-btn-details span:nth-child(2){display:none}.cc-detail-btn.cc-active span:nth-child(1),.cc-detail-btn-details.cc-active span:nth-child(1){display:none}.cc-detail-btn.cc-active span:nth-child(2),.cc-detail-btn-details.cc-active span:nth-child(2){display:inline}.cc-detail-btn:hover,.cc-detail-btn-details:hover{background:rgba(0,0,0,0);color:var(--ccb-detail-clr-hvr, #717171)}
/* 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-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-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-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+ */
}

/* open-sans-700 - 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: 700;
  src: url('../../files/fonts/open-sans-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-800 - 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: 800;
  src: url('../../files/fonts/open-sans-v40-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --white: #fff;
    --red: rgb(204, 18, 53);
    --green: rgb(110, 177, 67);
    --lightblue: rgb(191, 204, 219);
    --footerblue: rgb(150, 183, 220);
    --text: rgb(74, 74, 73);
    --background: rgb(51, 55, 66);
}

*,
*::before,
*::after {
    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 {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-y: scroll;
}


body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--background);

}



h1 {
    margin: 0;
    padding: 0;
    font-size: clamp(1.5rem, 3.704vw + 0.759rem, 4rem);
}

h2 {
    font-size: clamp(1.5rem, 3.704vw + 0.259rem, 3.5rem);
    font-weight: 400;
    line-height: 1.25;
    margin: 0;
    padding: 0;
}

h2 .grey {
    color: var(--text);
}


figure {
    margin: 0;
    padding: 0;
}


#wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    background-image: url(/files/images/hero_smart09.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

}

#header {
    width: 100%;
    height: 16%;
    z-index: 100;
    position: absolute;
    top: 0;

}

#header .inside {
    z-index: 100;
    background-color: var(--background-transparent);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

}

.logo {
    z-index: 100;
    width: 50%;
    max-width: 400px;
    padding-left: 1em;
    margin-left: 1em;
    position: absolute;
    top: 1em;
}

.logo img {
    width: 100%;
    height: auto;
    z-index: 100;

}


footer {
    margin: 0;
    padding: 0;
    background-color: #666;
    color: #fff;
    font-size: 1em;
    background-image: url(/files/gfx/footer_logo.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 200px;
}

footer a {
    text-decoration: none;
    font-weight: 400;
    color: #fff;
}

footer a:hover {
    text-decoration: underline;
}

#footer .inside {
    display: flex;
    flex-wrap: wrap;
    padding: 2em;
}




.claim {
    position: relative;
    z-index: 10;
    height: 100vh;
    height: 100svh;
    margin: 0;
    padding: 0;


}


.teaser {
    color: var(--white);
    width: 100%;
    position: absolute;
    top: 52%;
    margin: 0;
    padding: .5em 2em 1em;
}

.teaser h1 {
    font-size: clamp(1.5rem, 3.704vw + 0.759rem, 4rem);
    margin: 0;
    padding: 0;
    line-height: 1.25;

}

.bottom {
    position: absolute;
    inset: auto 0 0;
    bottom: 0;
    bottom: 0;
    padding: 1rem 2rem;
    background: var(--background);
    color: white;
}

.bottom h3 {
    font-weight: 400;
    font-size: .95em;
    margin: 0;
    padding: 0;
    line-height: 1.25;
    hyphens: auto;
}

.bottom h3 a {
    color: var(--white);
    text-decoration: none;
}

@media (max-width:767px) {

    .teaser2 {
        display: none;
    }

}



@media (min-width: 376px) {

    .teaser {
        position: absolute;
        top: 66%;

    }
}


.bottom {
    position: absolute;
    inset: auto 0 0;
    bottom: 0;
    bottom: 0;
    padding: 1rem 2rem;
    background: var(--background);
    color: white;
}


.teaser h1 {
    font-size: clamp(1.5rem, 3.704vw + 0.759rem, 4rem);
    margin: 0;
    padding: 0;
    line-height: 1;
}

.bottom h3 {
    font-weight: 400;
    font-size: .95em;
    margin: 0;
    padding: 0;
    line-height: 1.25;
    hyphens: auto;
}

.mod_article {
    margin: 0;
    padding: 0;
}

.text {
    background-color: white;
    margin: 0;
    padding: 1em 1.5em;
    hyphens: auto;
}


.infoboxen-container {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 0;
    background-color: var(--white);
    hyphens: none;
}

.infoboxen {
    display: block;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    align-items: center;
    text-align: center;

}

.infoboxen h3 a {
    font-size: 1rem;
    hyphens: auto;
    font-weight: 400;

}


.box1,
.box2,
.box3,
.box4 {
    transition: 0.3s;
    position: relative;
}

.box1,
.box4 {
    display: flex;
    width: 50%;
    background-color: var(--red);
    color: var(--white);
    margin: 0;
    padding: 0 1em;
    aspect-ratio: 1;
    align-items: center;
    text-align: center;

}

.box1 .arrow-white-box,
.box2 .arrow-white-box {
    cursor: pointer;
    width: 100%;
    background-image: url(/files/gfx/arrow_white_box.svg);
    background-position: center center;
    background-repeat: no-repeat;

}

.box1:hover,
.box4:hover {
    background-color: #9b081c;
    /*  box-shadow: 4px 5px 5px rgb(96, 95, 95); */
}

.box2:hover,
.box3:hover {
    background-color: var(--footerblue);
    /*    box-shadow: 4px 5px 5px rgb(96, 95, 95); */
}

.box1 a,
.box4 a {
    color: var(--white);
    text-decoration: none;
}


.box2,
.box3 {
    display: flex;
    width: 50%;
    background-color: var(--lightblue);
    color: var(--text);
    margin: 0;
    padding: 0 1em;
    aspect-ratio: 1;
    align-items: center;
    text-align: center;

}

.box2 a,
.box3 a {
    color: var(--text);
    text-decoration: none;
}

.pfeil {
    margin-top: 2em;

}

.arrow-grey {
    display: block;
    cursor: pointer;
    width: 100%;
    background-image: url(/files/gfx/arrow_grey.svg);
    background-position: right center;
    background-repeat: no-repeat;

}

a .arrow-grey {
    display: block;
    cursor: pointer;
    width: 150px;
    height: 30px;
    width: 95%;


}


.arrow-white {
    cursor: pointer;
    width: 100%;
    background-image: url(/files/gfx/arrow_white.svg);
    background-position: right center;
    background-repeat: no-repeat;


}

a .arrow-white {
    cursor: pointer;
    width: 150px;
    height: 30px;
    width: 95%;
    color: white;

}


.arrow-white-box {
    bottom: 2em;
    height: 12px;
    display: block;
    cursor: pointer;
    background-image: url(/files/gfx/arrow_white_box.svg);
    background-position: center center;
    background-repeat: no-repeat;
}

/* --------------------BUTTON-------------------- */

.buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 2em;
    padding: 1em 0;
}

.btn {
    min-width: 140px;
    appearance: none;
    background-color: var(--red);
    border: 1px solid rgba(27, 31, 35, .15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;
    line-height: .5;
    padding: 2px 8px;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
}

.btn a {
    color: var(--white);
    text-decoration: none;
}


.btn:hover {
    background-color: #9b081c;
}

/* --------------------INFO-GRIDS------------------ */

.section--0 {
    width: 100%;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    padding: 2em 1em;
}

.section--00 {
    /*     background-color: beige; */
    width: 100%;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    padding: 0 1em 2em;
}


.section--1 {
    background-color: var(--lightblue);
    margin: 0px auto;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-template-areas:
        "text"
        "bild"
    ;
}

.section--1 .infotext {
    background-color: var(--lightblue);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    padding: 2em;
}

.section--1 h2 {
    text-transform: uppercase;
    hyphens: none;
    font-weight: 700;
    color: var(--text);



}

.section--1 img {
    margin: 0px auto;
    width: 100%;
    height: auto;
}

.section--1 figure {
    width: 100%;
}

.section--1 .arrow .content-image {
    display: flex;
    margin-left: auto;
}

.section--1 .arrow a {
    background-color: aqua;
    display: block;
    margin-top: -1em;
    padding: 0;
    width: 20%;
}



.section--2 {
    background-color: var(--red);
    color: var(--white);
    margin: 0px auto;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-template-areas:
        "bild"
        "text"
    ;
}

.section--2 .infotext {
    background-color: var(--red);
    font-size: 1em;
    line-height: 1.5;
    margin: 0;
    padding: 2em;
}

.section--2 h2 {
    text-transform: uppercase;
    hyphens: none;
    font-weight: 700;


}

.section--2 img {
    margin: 0px auto;
    width: 100%;
    height: auto;
}


.section--3 {
    background-color: white;
    color: var(--text);
    margin: 0px auto;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-template-areas:
        "bild"
        "text"
    ;
}

.section--3 .infotext {
    background-color: white;
    font-size: 1em;
    line-height: 1.5;
    margin: 0;
    padding: 2em;
}

.section--3 h2 {
    text-transform: uppercase;
    hyphens: none;
    font-weight: 700;


}

.section--3 img {
    margin: 0px auto;
    width: 100%;
    height: auto;
}

@media (max-width:767px) {

    .box1 .rte,
    .box2 .rte,
    .box3 .rte,
    .box4 .rte {
        margin: 0 auto;
    }

}

@media (min-width:667px) {

    #header {
        height: 150px;
    }

}


@media (min-width:768px) {

    #wrapper {
        display: grid;
        grid-template-rows: auto 1fr auto;
        height: 100vh;
        background-image: url(/files/images/hero768.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .logo {
        z-index: 100;
        width: 50%;
        max-width: 260px;
        padding-left: 1em;
        margin-left: 1em;
        position: absolute;
        top: 1em;

    }

    .logo img {
        width: 100%;
        height: auto;
        z-index: 100;

    }

    .bottom h3 {
        font-weight: 400;
        font-size: 1.25em;
        margin: 0;
        padding: 0;
        line-height: 1.5;
        hyphens: auto;
    }


    .infoboxen-container {
        display: block;
        margin: 0 auto;
        width: 100%;
        padding: 0;
        background-color: var(--white);
        hyphens: none;
    }

    .infoboxen {
        display: block;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        align-items: center;
        text-align: center;

    }

    .infoboxen h3 a {
        font-size: 2rem;
        hyphens: auto;
        font-weight: 400;

    }

    .box1,
    .box4 {
        display: flex;
        width: 50%;
        background-color: var(--red);
        color: var(--white);
        margin: 0;
        padding: 0 1em;
        aspect-ratio: 1;
        align-items: center;
        text-align: center;

    }

    .box1 a,
    .box4 a {
        color: var(--white);
        text-decoration: none;
    }


    .box2,
    .box3 {
        display: flex;
        width: 50%;
        background-color: var(--lightblue);
        color: var(--text);
        margin: 0;
        padding: 0 1em;
        aspect-ratio: 1;
        align-items: center;
        text-align: center;

    }

    .box2 a,
    .box3 a {
        color: var(--text);
        text-decoration: none;
        text-align: center;
    }

    .box2:hover,
    .box3:hover {
        background-color: var(--footerblue);
        /*     box-shadow: 4px 5px 5px rgb(96, 95, 95); */
    }

    .box1:hover,
    .box4:hover {
        background-color: #9b081c;
        /*     box-shadow: 4px 5px 5px rgb(96, 95, 95); */
    }



    #footer .inside {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 1420px;
        margin: 0 auto;
        font-size: 1rem;
        padding: 0 2em 2em;

    }


}


@media (min-width:1280px) {
    body {
        background-color: var(--white);
    }


    #wrapper {
        background-image: url(/files/images/hero000.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: right center;
    }


    .infoboxen-container {
        margin: 0 auto;
        width: 100%;
        max-width: 1420px;
        padding: 0 2em;
        height: 140px;
        background-color: var(--white);
        hyphens: none;
    }

    .infoboxen {
        position: relative;
        bottom: 120px;
        width: 100%;
        max-width: 1416px;
        padding: 0 2em;
        display: flex;
        margin: 0;
        justify-content: space-between;

    }

    .infoboxen h3 a {
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.25;
        hyphens: none;
    }



    .box1,
    .box3 {
        display: flex;
        width: 260px;
        background-color: var(--red);
        color: var(--white);
        margin: 0;
        padding: 1.5em;
        align-items: center;
        text-align: center;

    }

    .box1 .arrow-white,
    box3 .arrow-white {
        cursor: pointer;
        width: 100%;
        background-image: url(/files/gfx/arrow_white.svg);
        background-position: center center;
        background-repeat: no-repeat;

    }

    .box2,
    .box4 {
        display: flex;
        width: 260px;
        background-color: var(--lightblue);
        color: var(--text);
        margin: 0;
        padding: 1.5em;
        align-items: center;
        text-align: center;

    }

    .box1 a,
    .box3 a {
        color: var(--white);
        text-decoration: none;
        hyphens: none;
        text-align: center;
    }

    .box2 a,
    .box4 a {
        color: var(--text);
        text-decoration: none;
        hyphens: none;
        text-align: center;
    }

    .box1:hover,
    .box3:hover {
        background-color: #9b081c;
        box-shadow: 4px 5px 5px rgb(96, 95, 95);
    }

    .box2:hover,
    .box4:hover {
        background-color: var(--footerblue);
        box-shadow: 4px 5px 5px rgb(96, 95, 95);
    }


    .section--0 {
        margin: 0 auto;
        width: 100%;
        font-size: 1.3rem;
        max-width: 1340px;
        padding: 3em 1em 3em;
    }

    .section--00 {
        margin: 0 auto;
        width: 100%;
        font-size: 1.3rem;
        max-width: 1340px;
        padding: 0 1em 3em;
    }

    .btn {
        min-width: 220px;
    }

    .section-wrapper-grey {
        margin: 0 auto;
        width: 100%;
        background-color: var(--background);
    }

    .section-wrapper-lightblue {
        margin: 0 auto;
        width: 100%;
        background-color: var(--lightblue);
    }

    .section-wrapper-red {
        margin: 0 auto;
        width: 100%;
        background-color: var(--red);
    }

    .section-wrapper-white {
        margin: 0 auto;
        width: 100%;
        background-color: var(--white);
    }

    .section-wrapper-red {
        margin: 0 auto;
        width: 100%;
        background-color: var(--red);
    }

    .section--1 {
        color: var(--text);
        margin: 0px auto;
        padding: 0;
        width: 100%;
        max-width: 1440px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "info-text bild"
        ;
    }

    .section--1 .infotext {
        grid-area: info-text;
        background-color: var(--lightblue);
        font-size: 1.3rem;
        line-height: 1.5;
        margin: 0;
        padding: 2em;
    }

    .section--1 h2 {
        text-transform: uppercase;
        hyphens: none;
        font-weight: 700;


    }

    .section--1 img {
        display: block;
        grid-area: bild;
        margin: 0px auto;
        padding: 0;
        width: 100%;
        height: auto;
    }

    .section--1 figure {
        width: 100%;
    }

    .section--1 .arrow .content-image {
        display: flex;
        margin-left: auto;
    }

    .section--1 .arrow a {
        background-color: aqua;
        display: block;
        margin-top: -1em;
        padding: 0;
        width: 20%;
    }

    .section--2 {
        background-color: var(--red);
        color: var(--white);
        margin: 0px auto;
        padding: 0;
        width: 100%;
        max-width: 1440px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "bild info-text"
        ;
    }

    .section--2 .infotext {
        background-color: var(--red);
        grid-area: info-text;
        font-size: 1.3rem;
        line-height: 1.5;
        margin: 0;
        padding: 2em;
    }

    .section--2 h2 {
        text-transform: uppercase;
        hyphens: none;
        font-weight: 700;


    }

    .section--2 img {
        display: block;
        grid-area: bild;
        margin: 0px auto;
        width: 100%;
        height: auto;
    }

    .section--2 figure {
        width: 100%;
    }

    .section--2 .arrow .content-image {
        display: flex;
        margin-left: auto;
    }

    .arrow-white {
        cursor: pointer;
        width: 100%;
        background-image: url(/files/gfx/arrow_white_left.svg);
        background-position: left center;
        background-repeat: no-repeat;

    }

    .section--2 .arrow a {
        background-color: aqua;
        display: block;
        margin-top: -1em;
        padding: 0;
        width: 20%;
    }




    .section--3 {
        background-color: var(--white);
        margin: 0px auto;
        padding: 0;
        width: 100%;
        max-width: 1440px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "info-text bild"
        ;
    }

    .section--3 .infotext {
        grid-area: info-text;
        background-color: var(--white);
        font-size: 1.3rem;
        line-height: 1.5;
        margin: 0;
        padding: 2em;
    }

    .section--3 h2 {
        text-transform: uppercase;
        hyphens: none;
        font-weight: 700;



    }

    .section--3 img {
        display: block;
        grid-area: bild;
        margin: 0px auto;
        width: 100%;
        height: auto;
    }

    .section--3 figure {
        width: 100%;
    }

    .section--3 .arrow .content-image {
        display: flex;
        margin-left: auto;
    }

    .section--3 .arrow a {

        display: block;
        margin-top: -1em;
        padding: 0;
        width: 20%;
    }

    .infotext a {
        text-decoration: none;
    }

}


@media (min-width:768px) {

    #wrapper {
        display: grid;
        grid-template-rows: auto 1fr auto;
        height: 100vh;
        background-image: url(/files/images/hero001.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .teaser {
        display: none;
    }

    .teaser2 {
        color: var(--white);
        width: 100%;
        max-width: 70%;
        position: relative;
        top: 60%;
        margin: 0;
        padding: .5em 2em 1em;
    }

    .teaser2 h1 {
        line-height: 1.25;
    }

    .teaser2 h3 {
        font-size: clamp(1rem, 0.545vw + 0.891rem, 1.3rem);
        font-weight: 400;

    }

    .teaser2 h3 a {
        color: var(--white);
        text-decoration: none;
    }

    .teaser2 h3 a:hover {
        text-decoration: underline;
    }

    .bottom {
        display: none;
    }


}



@media (min-width:1280px) {


    #wrapper {
        display: grid;
        grid-template-rows: auto 1fr auto;
        height: 100vh;
        background-image: url(/files/images/hero000.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: right center;


    }

    #header {
        margin: 0 auto;
        width: 100%;
        height: 16%;
        z-index: 100;
        position: absolute;
        top: 0;


    }

    #header .inside {
        margin: 0 auto;
        z-index: 100;
        background-color: var(--background-transparent);
        width: 100%;
        max-width: 1340px;
        padding: 0 2em;
        height: 100%;
        display: flex;

    }

    .logo {
        z-index: 100;
        width: 260px;
        padding-left: 0;
        margin-left: 0;
        position: relative;
        top: 1em;
        /*     outline: 1px solid red; */
    }



    .logo img {
        width: 100%;
        height: auto;
        z-index: 100;

    }




    .claim {
        background-color: transparent;
        margin: 0 auto;
        width: 100%;
        max-width: 1340px;
    }



    .teaser {
        display: none;
    }

    .teaser2 {
        color: var(--white);
        width: 100%;
        max-width: 70%;
        position: relative;
        top: 35%;
        margin: 0;
        padding: .5em 2em 1em;
    }

    .teaser2 h3 {
        font-size: clamp(1rem, 0.545vw + 0.891rem, 1.3rem);
        font-weight: 400;

    }

    .bottom {
        display: none;
    }


    #main .inside {
        width: 100%;
        /* max-width: 1480px; */
        padding: 0;
        margin: 0 auto;

    }


}

@media (min-width:1480px) {

    .teaser2 {
        top: 45%;

    }

}

@media only screen and (max-device-width : 1024px) and (orientation : landscape) {

    #wrapper {
        background-image: url(/files/images/hero1024.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .teaser {
        display: none;
    }

    .teaser2 {
        color: var(--white);
        width: 100%;
        max-width: 70%;
        position: relative;
        top: 35%;
        margin: 0;
        padding: .5em 2em 1em;
    }

    .teaser2 h3 {
        font-size: clamp(1rem, 0.545vw + 0.891rem, 1.3rem);
        font-weight: 400;

    }

    .bottom {
        display: none;
    }


    .infoboxen-container {
        margin: 0 auto;
        width: 100%;
        max-width: 1420px;
        padding: 0 1.5em;
        height: 140px;
        background-color: var(--white);
        hyphens: none;
    }

    .infoboxen {
        position: relative;
        bottom: 120px;
        width: 100%;
        max-width: 1416px;
        padding: 0;
        display: flex;
        margin: 0;
        justify-content: space-between;

    }

    .infoboxen h3 a {
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.25;
        hyphens: none;
    }



    .box1,
    .box3 {
        display: flex;
        width: 220px;
        background-color: var(--red);
        color: var(--white);
        margin: 0;
        padding: 1.5em;
        align-items: center;
        text-align: center;

    }

    .box2,
    .box4 {
        display: flex;
        width: 220px;
        background-color: var(--lightblue);
        color: var(--text);
        margin: 0;
        padding: 1.5em;
        align-items: center;
        text-align: center;

    }

    .box1 a,
    .box3 a {
        color: var(--white);
        text-decoration: none;
        hyphens: none;
    }

    .box2 a,
    .box4 a {
        color: var(--text);
        text-decoration: none;
        hyphens: none;
    }
}


/* ---------------------INFOBUTTON---------------------- */

.infobtn {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 1320px;
    margin: 0 auto;

}

.button-container a {
    color: var(--white);
    text-decoration: none;
    display: block;
    height: 100%
}


.button-container {
    padding: 1em;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.button-container button {
    padding: 14px 20px;
    font-size: 1.5rem;
    line-height: 1.5;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.15));
    background-blend-mode: overlay;
    display: block;
}


.btn-red {
    background-color: #b30000;
    color: white;


}

.btn-gray {
    background-color: #555;
    color: white;
}

.button-container button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
}

@media (min-width:360px) {

    .button-container {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 14px;
        width: 100%;
        background-color: var(--white);
    }

    .button-container button {
        width: 100%;
    }
}


@media (min-width:768px) {

    .button-container {

        flex-direction: row;
        flex-wrap: wrap;
        gap: 14px;
        width: 100%;
    }

    .button-container button {
        width: 48.75%;
        padding: 2em;
        font-size: 1.125rem;
        text-transform: uppercase;

    }


}

@media (min-width: 1152px) {

    .infobtn {
        position: absolut;
        bottom: 100px;
        width: 100%;
        height: 100px;
        max-width: 1320px;
        margin: 0 auto 2em;
    }


    .button-container {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 14px;
        width: 100%;
        background-color: transparent;
    }

    .button-container button {
        width: 48.75%;
        font-size: 1.125rem;
       /*  line-height: 1.5; */
        text-transform: uppercase;

    }

    .button-container  a {
        display: block;
    }




}

.button-container button  {
    color: var(--white);
    text-decoration: none;
    display: block;
   font-size: 1.3rem;
}

.button-container {
                display: flex;
                width: 100%;
                gap: 1em;
                font-weight: 400;
            }


            .btn-red {
                z-index: 20;
                display: inline-block;
                padding: 2em 4em;
                background-color: var(--red);
                color: white;
                text-decoration: none;
                /* entfernt Unterstreichung */
                border-radius: 5px;
                font-size: 1em;
                font-weight: 400;
                transition: background-color 0.3s ease;
            }

            .btn-gray {
                   z-index: 20;
                display: inline-block;
                padding: 2em 4em;
                background-color: var(--text);
                color: white;
                text-decoration: none;
                /* entfernt Unterstreichung */
                border-radius: 5px;
                font-size: 1em;
                transition: background-color 0.3s ease;

            }

            .btn-red:hover {
                background-color: #a80000;
            }

            .btn-gray:hover {
                background-color: #363636;
            }




/* @media (max-width:522px) {
/* .button-container button {
    width: 50%;
} */
/*
.button-container {
padding: 1em;
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  width: 100%;
  background-color: var(--white);
  background-color: chartreuse;
}
}
 */

/* @media (min-width:1024px) {
.button-container button {
    width: 24%;
}
} */
/* 

@media (orientation: landscape) and (min-device-width : 375px) and (max-device-width : 854px) {

    #wrapper {
        display: grid;
        grid-template-rows: auto 1fr auto;
        height: 100vh;
        background-image: url(/files/images/hero-landscape.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;

    }

    .logo {
        z-index: 100;
        width: 50%;
        max-width: 200px;
        padding-left: 1em;
        margin-left: 1em;
        position: absolute;
        top: 1em;
    }




    .teaser {
        color: var(--white);
        width: 100%;
        position: absolute;
        top: 40%;
        margin: 0;
        padding: .5em 2em 1em;
    }

    .teaser h1 {
        font-size: 2rem;
        margin: 0;
        padding: 0;
        line-height: 1.25;
    }

    .bottom h3 {
        font-weight: 400;
        font-size: .8rem;
        margin: 0;
        padding: 0;
        line-height: 1.25;
        hyphens: auto;
    }

} */
.mod_navigation {
    margin-left: auto;
    padding-right: 3em;
    padding-top: 3em;
} 

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


@media (min-width: 1024px) {
    .mobile-nav {
        display: none;
    }

}

.mobile-nav {
    z-index: 100;
    position: absolute;
    height: 50px;
    top: 2em;
    right: 2em;
    color: #fff;

}

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

.menu-btn {
/*     background-color: darkorange;
 */    display: block;
    position: absolute;
    right: 20px;
    top: 2.6em;
    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(--white);
    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(--white);
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
}

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

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

#navigation.sticky .menu-btn {
    z-index: 1000;
    position: absolute;
    right: 20px;
    top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

/* 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(--red);
    width: 100%;
}

.mobile_menu_overlay {
    width: 80%;
}

.mobile_menu .logo_neg {
    padding: 2em 3em 1em;
}

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

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

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

nav.mod_customnav li {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: #fff;
    line-height: 2;
    border-bottom: 1px solid white;
    padding: 0 0 0 1em;
}

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


nav.mod_customnav .active {
    background-color: var(--red);
    color: var(--white);
}

.mobile_menu .cookie-settings a {
    border-bottom: 1px solid #999;
    color: #666;
    display: block;
    padding: 8px 0 8px 20px;
    text-decoration: none;
    font-weight: 400;
}

.mobile_menu .contact-box {
    color: #fff;
    display: block;
    padding: 1em 0 3em 2.25em;
    text-decoration: none;
    font-weight: 400;
    line-height: 1.5;
    font-size: 1rem;
}

.mobile_menu .contact-box a {
    color: #fff;
    text-decoration: none;
}


.mobile-navi {
    z-index: 100;
    margin: 0;
    padding: 0;
    margin-top: .5rem;
    background-color: var(--red);

}

nav.mobile-navi ul {
    margin: 0;
    padding: 1em 0 0 1.5rem;
    list-style: none;
    font-size: 1rem;
}

nav.mobile-navi ul li {
    color: #fff;
    line-height: 2;
border-bottom: 1px solid white; 
 padding: 0 0 0 1em;
}


nav.mobile-navi ul .level_2  {
    margin: 0;
    padding: 0;
}

nav.mobile-navi ul li ul li {
    border-bottom: none; 
    border-top: 1px solid white;
}

nav.mobile-navi ul li a {
    text-decoration: none;
    color: white;
}







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

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



@media (min-width:1024px) {

/*     .mod_navigation {
        margin: 0;
        padding: 0;
        color: var(--white);
        text-align: center;
        line-height: 1;
    } */


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

    .main-menu ul {
        list-style-type: none;
        display: inline-flex;
        margin: 0;
        padding: 0;
        color: white;
        text-transform: uppercase;
        margin-left: auto;
        }

    .main-menu li {
        margin: 0;
        padding: 0;


    }

 .main-menu li.active {
        margin: 0;
        padding: .75rem 1rem;
        color: var(--white);
      text-decoration: underline;

    } 


    .main-menu li a {
        display: block;
        color: white;
        padding: .75rem 1rem;
        margin: 0;
        text-decoration: none;
        transition: .2s;
    }

    .main-menu li a {
        font-weight: normal;
        display: flex;
        align-items: center;
    }


    .main-menu li a:hover {
     /*    background-color: var(--white); */
        color: var(--white);
        text-decoration: underline;
    }

    .main-menu ul.level_2 {
        margin: 0;
        padding: 0;
        display: none;
        position: absolute;
        top: 4rem;
        z-index: 1000;

    }

    .main-menu li:hover ul.level_2 {
        list-style: none;
        display: block !important;
        margin: 0;
        padding: 0;


    }

}

@media (max-width:1180px) {
    .mod_navigation {
        font-size: 0.833rem;
    }

    .main-menu.block .level_1 .submenu.trail .level_2,
    .main-menu.block .level_1 .submenu .level_2,
    .main-menu .level_1 .submenu.sibling .level_2,
    .main-menu .level_1 .active.submenu .level_2,
    .main-menu .level_1 .submenu.trail .level_2 .main-menu .level_1 .submenu .level_2 {
        top: 68px;

    }

}


@media (min-width:1181px) {
    .mod_navigation {
        font-size: 1rem;
    }

    .main-menu.block .level_1 .submenu.trail .level_2,
    .main-menu.block .level_1 .submenu .level_2,
    .main-menu .level_1 .submenu.sibling .level_2,
    .main-menu .level_1 .active.submenu .level_2,
    .main-menu .level_1 .submenu.trail .level_2 .main-menu .level_1 .submenu .level_2 {
        top: 84px;

    }
}


@media (min-width:1381px) {
    .mod_navigation {
        font-size: 1.15rem;

    }

    .main-menu.block .level_1 .submenu.trail .level_2,
    .main-menu.block .level_1 .submenu .level_2,
    .main-menu .level_1 .submenu.sibling .level_2,
    .main-menu .level_1 .active.submenu .level_2,
    .main-menu .level_1 .submenu.trail .level_2 .main-menu .level_1 .submenu .level_2 {
        top: 100px;

    }
}

.main-menu ul.level_2 li {
    display: list-item !important;
    margin: 0;
    padding: 0;
    text-align: left;
 
}

.main-menu ul.level_2 li {
    background-color: var(--background);
}

.main-menu ul.level_2 li {
    display: list-item !important;
    margin: 0;
    padding: 0;
    text-align: left;
 
}

.main-menu li.active.submenu ul.level_2 {
    margin: 0;
    padding: 0;
    transition: all 1s ease-out;

}

.main-menu ul.level_2 li:hover {
    color: var(--white);
    background-color: var(--background);
}

.main-menu ul.level_2 li.active {
    margin: 0;
    padding: 1em;
}

.main-menu .level_1 .forward.trail.submenu .forward.trail.submenu {
    display: block;
        padding: .75rem 1rem;
        color: var(--white);
}


/* .main-menu .level_1 .submenu.schule.sibling .level_2 {
    background-color: var(--orange);
}

.main-menu .level_1 .submenu.hofschule.sibling .level_2 {
    background-color: var(--green);
}

.main-menu .level_1 .submenu.kindergarten.sibling .level_2 {
    background-color: var(--lila);
} */
 
/*
.main-menu a:hover.schule {
    color: var(--white);
    background-color: var(--orange);
    display: block;
}

.main-menu a:hover.hofschule {
    color: var(--white);
    background-color: var(--green);
}

.main-menu a:hover.kindergarten {
    color: var(--white);
    background-color: var(--lila);
}

.main-menu li:hover.schule {
    background-color: var(--orange);
    color: var(--white);
    display: block;
}

.main-menu li:hover.hofschule {
    background-color: var(--green);
    color: var(--white);
    display: block;
}

.main-menu li:hover.kindergarten {
    background-color: var(--lila);
    color: var(--white);
    display: block;
}


.main-menu .active.schule {
    background-color: var(--orange);
    color: var(--white);
    display: block;
}

.main-menu .active.hofschule {
    background-color: var(--green);
    color: var(--white);
    display: block;
}

.main-menu .active.kindergarten {
    background-color: var(--lila);
    color: var(--white);
    display: block;
}



.main-menu li .active .schule {
    background-color: var(--white);
    color: var(--orange);
    display: block;
}

.main-menu li .active .hofschule {
    background-color: var(--white);
    color: var(--green);
    display: block;

}

.main-menu li .active .kindergarten {
    background-color: var(--white);
    color: var(--lila);
    display: block;

}



.main-menu ul.level_2 li {
    display: list-item !important;
    margin: 0;
    padding: 0;
    text-align: left;
 
}

.main-menu ul.level_2 li {
    background-color: var(--red);
}


.main-menu ul.level_2 li.schule {
    background-color: var(--orange);

}

.main-menu ul.level_2 li.hofschule {
    background-color: var(--green);
}

.main-menu ul.level_2 li.kindergarten {
    background-color: var(--lila);
}

.main-menu .schule.trail {
    color: var(--white);
    background-color: var(--orange);
}


.main-menu ul.level_2 li {
    display: list-item !important;
    margin: 0;
    padding: 0;
    text-align: left;
}


.main-menu li.active.submenu ul.level_2 {
    margin: 0 -.75rem;
    padding: 0;
    transition: all 1s ease-out;

}

.main-menu li.active.submenu.schule ul.level_2 {
    margin: 0 -.75rem;
    padding: 0;

}

.main-menu li.active.submenu.hofschule ul.level_2 {
    margin: 0 -.75rem;
    padding: 0;
}

.main-menu li.active.submenu.kindergarten ul.level_2 {
    margin: 0 -.75rem;
    padding: 0;
}

.main-menu ul.level_2 li:hover {
    color: var(--orange);
    background-color: var(--white);
}


.main-menu ul.level_2 li .schule:hover {
    color: var(--orange);
    background-color: var(--white);
}

.main-menu ul.level_2 li .hofschule:hover {
    color: var(--green);
    background-color: var(--white);
}

.main-menu ul.level_2 li .kindergarten:hover {
    color: var(--lila);
    background-color: var(--white);
}


.main-menu .trail {
    color: var(--red);
    background-color: var(--white);
}


.main-menu .hofschule.trail {
    color: var(--white);
    background-color: var(--green);
}

.main-menu .level_1 .submenu.trail.hofschule .level_2 {
    background-color: var(--green);
}

.main-menu .level_1 .submenu.hofschule .level_2 {
    background-color: var(--green);
}

.main-menu .level_1 .submenu.trail.schule .level_2 .active.schule .active.verein {
    background-color: var(--white);
    padding: .75rem;
}

.main-menu .level_1 .submenu.trail.schule .level_2 .active.schule .active.schule {
    background-color: var(--white);
    padding: .75rem;
}

.main-menu .level_1 .submenu.trail.hofschule .level_2 .active.hofschule .active.hofschule {
    background-color: var(--white);
    padding: .75rem;
}

.main-menu .level_1 .submenu.trail.kindergarten .level_2 .active.kindergarten .active.kindergarten {
    background-color: var(--white);
    padding: .75rem;
}

.main-menu .level_1 .submenu.trail.kindergarten .submenu.trail.kindergarten {
    background-color: var(--lila);
    color:var(--white)

}



.mod_navigation.main-menu .level_1 .submenu.trail.stellenangebote .submenu.trail
 {
	background-color: var(--white);
    color: var(--red);
    padding: .75rem;
}

.mod_navigation.main-menu .level_1 .submenu.trail.stellenangebote .level_2 .active .active {
	background-color: var(--white);
    color: var(--red);
    padding: .75rem;
    display: block;

}

.mod_navigation.main-menu .level_1 .forward.trail.submenu.schule .forward.trail.submenu.schule {
    background-color: var(--white);
    color: var(--orange);
    padding: .75rem;
    display: block;
}

.mod_navigation.main-menu .level_1 .forward.trail.submenu.hofschule .forward.trail.submenu.hofschule {
    background-color: var(--white);
    color: var(--green);
    padding: .75rem;
    display: block;
}

.mod_navigation.main-menu .level_1 .forward.trail.submenu.kindergarten .forward.trail.submenu.kindergarten {
    background-color: var(--white);
    color: var(--lila);
    padding: .75rem;
    display: block;
}
.mod_navigation.main-menu.block .level_1 .forward.trail.submenu.stellenangebote .forward.trail.submenu.stellenangebote {
        padding: .75rem;
    display: block;
}