.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}
.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;
}


/* 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+ */
}

.cards {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    gap: 1em;
}

.cards--2 {
    padding: 2em 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18%, 1fr));
    gap: 1em;
}


.cards>div {
    display: grid;
    place-items: center;
    text-align: center;
    aspect-ratio: 1 / 1;
    padding: 1em;
 

}

.cards--2 >div {
    display: grid;
    place-items: center;
    text-align: center;
    aspect-ratio: 1 / 1;
    padding: 1em;
    font-size: 1.5em;
    hyphens: auto;
    font-weight: 600;
}


.card {
    position: relative;
    aspect-ratio: 1;
}


.card-lightblue {
    background-color: var(--lightblue);
     display: grid;
    place-items: center;
    text-align: center;
}

.card-grey {
    background-color: var(--text);
    color: white;
     display: grid;
    place-items: center;
    text-align: center;

}

.card-red {
    background-color: var(--red);
    color: white;
     display: grid;
    place-items: center;
    text-align: center;
}




.verkaufspreisstrategie {
    background-image: url(/files/gfx/verkaufspreisstrategie_01.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.verkaufsvorbereitungen {
    background-image: url(/files/gfx/verkaufsvorbereitungen_01.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.vermarktungskonzept {
    background-image: url(/files/gfx/vermarktungskonzept_01.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.aktive_vermarktung {
    background-image: url(/files/gfx/aktive_vermarktung_01.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.rundumservice {
    background-image: url(/files/gfx/rundumservice_01.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.aktive_verkaufsabwicklung {
    background-image: url(/files/gfx/aktive_verkaufsabwicklung_01.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* Positioniere Checkbox unten rechts */
.custom-checkbox {
    position: absolute;
    bottom: 4px;
    right: 6px;
}


/* Die restlichen Styles aus dem vorherigen Beispiel bleiben gleich */
.custom-checkbox input[type="checkbox"] {
    opacity: 0;
    position: absolute;
}

.custom-checkbox .checkmark {
    width: 30px;
    height: 30px;
    background-color: #eee;
    border: 2px solid #ccc;
    border-radius: 4px;
    display: inline-block;
    position: relative;
}

.custom-checkbox input:checked~.checkmark {
    background-color: #cc1235;
    border-color: #cc1235;
}

.custom-checkbox .checkmark::after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked~.checkmark::after {
    display: block;
    left: 8px;
    top: 2px;
    width: 10px;
    height: 20px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


#gesamt {
    font-weight: bold;
    margin-top: 20px;
    width: 100%;
}

@media (max-width:666px) {

    .cards {
        gap: 1em;
        grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
    }

    .cards--2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1em;
}
    .cards--2 >div {
    display: flex;
    text-align: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 1em;
    font-size: 80%;

}
}

@media (min-width:667px) {

    .cards {
        gap: 1em;
        grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
    }

    .cards--2 {
        gap: 1em;
        grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
}

    .cards--2 >div {
    font-size: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
     aspect-ratio: 1 / 1;

}
}

@media (min-width:1024px) {

    .cards {
        gap: 2em;
        grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));

    }

     .cards--2 {
        gap: 2em;
          grid-template-columns: repeat(auto-fill, minmax(16%, 1fr));
    
     }

}

: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);
    --background-transparent: rgba(51, 55, 66, .75);
    --background-sections-4: rgb(103, 103, 103);
}

*,
*::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;
    line-height: 1.5;
    font-weight: 300;
    background-color: var(--background);



}

#wrapper {
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;

}

#container {
    background-color: white;
}


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

}

#header .inside {
    background-color: var(--background);
    background-image: url(/files/gfx/header-background-02.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

}

#main {
    /*    outline: 1px solid red; */
    height: 100%;
    margin: 0 auto;
    width: 100%; 
}

#main .inside {
    margin: 0 auto;
    margin-top: 130px;
    padding: 2em;
    max-width: 1300px;

}

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;
}

.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;
}


h1 {
    margin: 0;
    padding: 0;
    font-size: clamp(1.25rem, -0.9375rem + 7vw, 3rem);
    text-transform: uppercase;
    text-align: left;
    line-height: 1.25;
    color: var(--red);

}


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

}

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


    .text {
        margin: 0;
        padding: 1em 0;
        text-align: left;
        font-size: 1.5em;
        font-size: 1em;

    }

/* .text {
    outline: 1 px solid red;
    background-color: white;
    margin: 0;
    padding: 0 1em 1em;
    text-align: left;
    hyphens: auto;
} */

#gesamt {
font-size: clamp(1rem, 0.8806rem + 0.5161vw, 1.5rem);
    font-weight: 400;
    color: var(--red);
    margin: 1em 0;

}

.hinweis {
    margin-top: 1em;
    padding: 0.5em 1em;
    margin: 0;
    outline: 2px solid var(--red);
    color: var(--text);
    font-size: clamp(1rem, 0.8806rem + 0.5161vw, 1.5rem);

}

.hinweis a {
    text-decoration: none;
    font-size: 1.125rem;
    color: var(--text);
   font-size: 1em;

}


.hinweis-red {
    width: 100%;
    max-width: 1300px;
    padding: 2em;
    margin: 1em 0 ;
    color: var(--white);
    background-color: var(--red);
font-size: 1em;
}

.hinweis h3 {
    color: var(--text);
    font-weight: 400;
    font-size: .9rem;
}

.hinweis-red a {
    text-decoration: none;
    color: var(--white);

}


.content-image {
    display: block;
    outline: 1px solid goldenrod;
    margin: 0;
    padding: 0;

}

figure {
    margin: 0;
    padding: 0;

}

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

table {
    font-size: 0.9rem;
    text-align: left;
}


/* ---------------SECTIONS----------------- */

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

.section--4 {
    background-color: var(--background-sections-4);
    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--4 .content-text {
    color: var(--white);
    font-size: 1em;
    line-height: 1.5;
    text-align: left;
    margin: 0;
    padding: 0 1em 1em;
}

.section--4 h2 {
    text-transform: uppercase;
    hyphens: none;
    font-weight: 600;


}

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

.section--5 {
    background-color: var(--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--5 .content-text {
    font-size: 1em;
    line-height: 1.5;
    text-align: left;
    margin: 0;
    padding: 0 1em 1em;
}

.section--5 h2 {
    text-transform: uppercase;
    hyphens: none;
    font-weight: 600;


}

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

.section--6 {
    background-color: var(--lightblue);
    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--6 .content-text {
    font-size: 1em;
    line-height: 1.5;
    text-align: left;
    margin: 0;
    padding: 0 1em 1em;
}

.section--6 h2 {
    text-transform: uppercase;
    hyphens: none;
    font-weight: 600;


}

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

.buttons {
    display: flex;
    justify-content: space-between;
}

.btn {
    margin: 0 auto;
    min-width: 150px;
    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: 1.1em;
    font-weight: 600;
    text-transform: uppercase;
    line-height: .5;
    padding: 2px 20px;
    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;
}

@media (max-width:666px) {

    #header {
        height: 120px;
    }

    #main .inside {
        margin-top: 130px;
        padding: 0 1em 2em;

    }
}


@media (min-width:667px) {

    #header {
        height: 150px;
    }

    #main .inside {
        margin-top: 150px;
        padding: 0 1em 2em;

    }
}




@media (min-width:768px) {

    h1 {
        hyphens: none;
    }

        .text {
        margin: 0;
        padding: 1em 0;
        text-align: left;
        font-size: 1.5em;
        font-size: 1.3em;

    }

    .hinweis-red {
    width: 100%;
    max-width: 1300px;
    padding: 2em;
    margin: 1em 0 ;
    color: var(--white);
    background-color: var(--red);
font-size: 1.3em;
}

    #main .inside {
        margin-top: 170px;
        padding: 0 1em 2em;

    }



    #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) {

    #header {
        margin: 0 auto;
        width: 100%;
        height: 160px;
        z-index: 100;
        position: absolute;
        top: 0;
        background-color: var(--background-transparent);
        background-image: url(/files/gfx/header-background-02.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: right center;


    }

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

    }

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


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

    }
}

@media (max-width: 1024px) {
    #main .inside {
        padding: 0 2em 2em;
    }
}