/*
 Theme Name:   downup Theme
 Description:  Das downup Theme
 Author:       Lars Badke
 Author URI:   https://www.larsbadke.com
 Version:      1.0
 Text Domain:  downup-theme
*/

@media (min-width: 1200px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1340px;
}
}

.row-large-gutter {
    margin-right: -30px;
    margin-left: -30px;
}

.row-large-gutter > [class*="col-"] {
    padding-right: 30px;
    padding-left: 30px;
}

/* grape-nuts-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: 'Grape Nuts';
    font-style: normal;
    font-weight: 400;
    src: url('/wp-content/themes/downup/fonts/grape-nuts-v7-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fira-sans-100 - 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: 'Fira Sans';
    font-style: normal;
    font-weight: 100;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-sans-100italic - 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: 'Fira Sans';
    font-style: italic;
    font-weight: 100;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-sans-200 - 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: 'Fira Sans';
    font-style: normal;
    font-weight: 200;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-sans-200italic - 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: 'Fira Sans';
    font-style: italic;
    font-weight: 200;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-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: 'Fira Sans';
    font-style: normal;
    font-weight: 300;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-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: 'Fira Sans';
    font-style: italic;
    font-weight: 300;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-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: 'Fira Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-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: 'Fira Sans';
    font-style: italic;
    font-weight: 400;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-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: 'Fira Sans';
    font-style: normal;
    font-weight: 500;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-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: 'Fira Sans';
    font-style: italic;
    font-weight: 500;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-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: 'Fira Sans';
    font-style: normal;
    font-weight: 600;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-sans-600italic - 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: 'Fira Sans';
    font-style: italic;
    font-weight: 600;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-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: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-sans-700italic - 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: 'Fira Sans';
    font-style: italic;
    font-weight: 700;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-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: 'Fira Sans';
    font-style: normal;
    font-weight: 800;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-sans-800italic - 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: 'Fira Sans';
    font-style: italic;
    font-weight: 800;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-sans-900 - 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: 'Fira Sans';
    font-style: normal;
    font-weight: 900;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-sans-900italic - 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: 'Fira Sans';
    font-style: italic;
    font-weight: 900;
    src: url('/wp-content/themes/downup/fonts/fira-sans-v18-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
    margin: 0;
    padding: 0;
    background: #1e6daf;
    font-family: 'Fira Sans';
}

body {
    font-size: 16px;
    line-height: 26px;
    margin: 0;
    padding: 0;
    color: #464646;
    font-family: 'Fira Sans';
    word-break: break-word;
    overflow-x: hidden ;
}

.read_more_ctr{
    display: none;
}

.read_more_ctr br{
    display: none;
}

.read_more_button{
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    text-align: inherit;
    color: #1e6daf;
    font-weight: bold;
    cursor: pointer;
}

.read_more_button:focus{
    outline: none;
}

.read_more_button:focus-visible{
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.read_more_button .arrow{
    display: inline-block;
    transition: 0.3s transform;
}

.read_more_button.offen .arrow{
    transform: rotate(180deg);
}

.brand_text{
    color: #1e6daf;
}

hr{
    border-bottom: 5px solid #92b5db;
}

h1,h2,h3,h4,h5,h5{
    color: #1e6daf;
}

h1, .h1{
    font-size: 34px;
    line-height: 42px;
    font-weight: 600;
    margin-bottom: 20px;
}

h2, .h2{
    font-size: 27px;
    line-height: 32px;
    font-weight: 400;
    margin-bottom: 20px;
}


h3, .h3{
    font-size: 22px;
    margin-bottom: 30px;
    color: #484848;
    font-weight: 500;
}

h4, .h4{
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 0px;
    margin-top: 0;
    color: #484848;
    font-weight: bold;
}


@media (max-width: 992px) {

    h1, .h1{
        font-size: 26px;
        line-height: 34px;
    }

    h2, .h2{
        font-size: 22px;
        line-height: 28px;
    }

    .h3, h3 {
        font-size: 20px
    }
}

a{
    color: #1e6daf;
}


a:focus, a:hover {
    color: #1e6daf;
    text-decoration: underline;
}

/* -------------------------------------------- */
/* ----------------- HEADER ------------------- */
/* -------------------------------------------- */

header{
    background: #FFF;
    padding: 0;
}


#main-header .wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#logo{
    display: inline-block;
    width: 300px;
    height: auto;
    margin-bottom: 15px;
}

#logo img{
    width: 100%;
}

.header-menu{
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.header-menu li{
    display: inline-block;
}

.header-menu li a{
    display: block;
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
    color: #1e6daf;
    padding: 10px 25px;
    font-weight: 400;
    background: white;
}


.header-menu li a:hover{
    color: #e0e0e0;
    transition: 0.3s all;
}

.header-menu li a.active, .header-menu .current-page-ancestor>a, .header-menu .current_page_parent>a{
    color: #e0e0e0;
    transition: 0.3s all;

}

.header-menu .current-page-ancestor>a, .header-menu .current-menu-item>a{
    color: #e0e0e0;
    transition: 0.3s all;

}

.header-menu li.menu-item-has-children {
    position: relative;
}

.header-menu .sub-menu {
    position: absolute;
    display: none;
    padding: 0;
    margin: 0;
    z-index: 999;
    background: #fff;
    width: 100%;
    min-width: 140px;
}
.header-menu .sub-menu li {
    display: block;
}


.header-menu .sub-menu li >a{
    display: block;
    color: black;
}

.header-menu li.menu-item-has-children:hover .sub-menu {
    display: block;
}



@media (max-width: 1200px) {

    #logo {
        display: inline-block;
        width: 175px;
        height: auto;
    }

    .header-menu > li >a{
        font-size: 13px;
    }
}

@media (max-width: 992px) {


    #main-header .wrapper {
     flex-wrap: wrap;
        align-items: center;
        flex-direction: row;
    }

    .menu-header-container{
        order: 4;
        width: 100%;
        display: block;
    }

}

@media (max-width: 768px) {

    .header-menu li a{
        padding: 7px 15px;
    }
}



/* -------------------------------------------- */
/* ----------------- INTRO  ------------------- */
/* -------------------------------------------- */

#intro{
    position: relative;
}

#intro .swiper-container {
    width: 100%;
}

/* Bild komplett zeigen (kein Beschnitt), Bogen liegt absolut darueber */
#intro .swiper-slide img,
#intro .intro_text.mit_bild img:not(#bogen):not(#layer) {
    width: 100%;
    height: auto;
    display: block;
}

#intro #bogen{
    position: absolute;
    bottom: -2px;
    width: 100%;
    z-index: 9;
    padding-top: 100px;
}

.intro_text #bogen{
    padding-top: 140px;
}


@media (max-width: 992px) {

    #intro .intro_text.mit_bild {
        padding: 0;
    }
}


/* -------------------------------------------- */
/* ----------------- PAGE ------------------- */
/* -------------------------------------------- */

.content{
    padding: 30px 0;
}

.brand_btn{
    background: #1e6daf;
    padding: 5px 15px;
    display: inline-block;
    color: white;
    font-weight: 400;
    transition: 0.4s all;
}

.brand_btn:hover{
    background: #105fa0;
    color: white;
    text-decoration: none;
}

#intro_content hr{
    max-width: 400px;
    text-align: left;
    margin-left: 0;
}

@media (min-width: 1400px) {
    #intro_content .text{
        margin-left: 500px;
    }

    #intro_content .text h1{
        margin-bottom: 5px;
    }
}


@media (min-width: 1400px) {
.headline_transform{
    transform: translateX(-30px);
    margin-bottom: 5px;
}
}

/* -------------------------------------------- */
/* ----------------- FOOTER ------------------- */
/* -------------------------------------------- */

footer#main-footer{
    background: #1e6daf;
    padding-top: 40px;
    padding-bottom: 40px;
    font-size: 14px;
    color: white;
}

footer#main-footer ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    vertical-align: super;
}

footer#main-footer a{
    color: white;
}

#main-footer .wrapper{
    display: flex;
    margin-left: -10px;
    margin-right: -10px;
    justify-content: space-between;
    align-items: center;
}

#main-footer .wrapper > div{
    padding: 0 10px;
    width: 50%;
}

#main-footer .wrapper > div:last-of-type{
   text-align: right;
}

#aim-logo{
    width: 300px;
    margin-left: 30px;
}
#aim-logo img{
   width: 100%;
}
@media(max-width: 992px){
    #main-footer .wrapper{
        flex-direction: column;
    }

    #main-footer .wrapper > div{
        width: 100%!important;
        margin-bottom: 20px;
    }

    #main-footer .wrapper > div:last-of-type{
        text-align: left;
    }


    footer#main-footer{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    footer#main-footer ul>li {
        display: block;
        margin-right: 0px;
    }
}


@media (max-width: 768px) {
    #aim-logo{
        display: block;
        margin-left: 0;
        margin-top: 20px;
        max-width: 100%;
    }

}

#facts{
    margin: 40px 0;
}

#facts .wrapper{
    display: flex;
    margin-left: -15px;
    margin-right: -15px;
}

#facts .wrapper > .left{
    width: calc(50% - 15px);
    margin: 0 15px;
    position: relative;
    display: flex;
    align-items: end;
    padding-bottom: 40px;
}

#facts .wrapper > .left .content_box{
    background: #60c5e3;
    color: white;
    width: 60%;
    padding: 40px 20px;
    position: relative;
}

#facts  .arrow{
    position: absolute;
    right: 0;
    bottom: 0;
}

#facts  .arrow img{
    width: 50px;
}


#facts .wrapper > .left .content_box h2{
    color: white;
    margin-bottom: 10px;
}

#facts .wrapper > .right{
    width: calc(50% - 15px);
    display: flex;
    flex-wrap: wrap;
}

#facts .search{
    background: #60c5e3;
    color: white;
    width: 100%;
    padding: 30px 20px 50px 20px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

#facts .search > div{
    width: 50%;
}

#facts .search h3{
    margin-bottom: 15px;
    color: white;
}

#facts .search a{
    color: white;
}


#facts #map img{
    width: 100%;
    padding-left: 15px;
}

#facts #icons{
    width: 100%;
}

#facts #icons  .icons_ctr{
    display: flex;
    justify-content: center;
    border-top: 1px solid white;
    padding-top: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}

#facts #icons  .icons_ctr img{
    margin: 0 20px;
    height: 75px;
}

#facts ul{
    padding: 0;
    padding-left: 20px;
}


@media (max-width: 1200px) {
    #facts .wrapper{
        flex-direction: column;
        margin: 0;
    }

    #facts .wrapper > .right{
        width: 100%;
    }
    #facts .wrapper > .left{
        width: 100%;
        height: 650px;
        margin: 0;
        margin-bottom: 30px;
    }

}

@media (max-width: 768px) {

    #facts .wrapper > .left{
        padding: 0;
        background-position: center right!important;
    }

    #facts .wrapper > .left .content_box{
        width: 100%;
    }

    #facts #icons  .icons_ctr img{
        margin: 0 10px;
        height: 60px;
    }

    #facts .search > div {
        width: 100%;
    }
}

@media (max-width: 500px) {

    #facts #map {
        margin-top: 10px;
    }
}

#informationen{
    background: #f6f6f6;
    padding-top: 60px;
}

#informationen .h1{
    color: #1e6daf;
    margin-bottom: 10px;
}


#informationen .wrapper{
    display: flex;
    flex-wrap: wrap;
    margin-left: -40px;
    margin-right: -40px;

}

#informationen .wrapper > a{
    display: block;
    width: calc(33.33% - 80px);
    margin: 15px 40px;
    color: white;
    position: relative;
}

#informationen .wrapper > a .body{
    display: inline-block;
    padding: 20px 30px 40px 30px;
    font-weight: 400;

}

#informationen .wrapper > a .body h3{
    color: white;
    margin-bottom: 15px;
}

#informationen .wrapper > a .body .text{
    line-height: 20px;
    display: inline-block;
    padding-left: 20px;
    padding-top: 10px;
    border-left: 1px solid white;
}

#informationen .wrapper > a > img{
    width: 100%;
}

#informationen .wrapper > a .pfeil{
    width: 50px;
    position: absolute;
    right: 0;
    bottom: 0;
}

@media (max-width: 1200px) {

    #informationen .wrapper{
        margin-left: -20px;
        margin-right: -20px;

    }

    #informationen .wrapper > a{
        width: calc(33.33% - 40px);
        margin: 15px 20px;
    }
}


@media (max-width: 992px) {

    #informationen .wrapper > a{
        width: calc(50% - 40px);
    }
}
@media (max-width: 768px) {

    #informationen .wrapper > a{
        width: calc(100% - 40px);
    }
}

#aktuelles .h1{
    color: #1e6daf;
}

#news_slider{
    display: flex;
    align-items: center;
}

#news_slider .swiper-container{
    width: calc(100% - 120px);
}

#news_slider .nav{
    width: calc(120px);
    display: flex;
    justify-content: space-between;
    padding-left: 30px;
}

#news_slider .nav > div{
    cursor: pointer;
}

@media (min-width: 1200px) {
    #aktuelles #news_slider{
        margin-left: 200px;
    }
}


@media (max-width: 992px) {

    #news_slider .swiper-container{
        width: calc(100% - 0px);
    }

    #news_slider{
        flex-direction: column;
    }

    #news_slider .nav{
        width: 100%;
        justify-content: space-around;
        padding-left: 0px;
    }
}

.block{
    padding: 40px 0;
}

@media (min-width: 992px) {
    .block:first-of-type{
        padding-top: 5px;
    }
}

@media (max-width: 992px) {

    .block{
        padding: 20px 0;
    }
}

/* -------------------------------------------- */
/* ----------------- TRENNER ------------------ */
/* -------------------------------------------- */

.block.trenner_block{
    padding-top: var(--trenner-oben, 40px);
    padding-bottom: var(--trenner-unten, 40px);
}

.trenner_block .trenner{
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid #d7dee2;
    opacity: 1;
}

.trenner_block.breite_schmal .trenner{
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Ohne Linie dient der Block nur als Abstandhalter */
.trenner_block.nur_abstand{
    line-height: 0;
    font-size: 0;
}

@media (max-width: 992px) {

    .block.trenner_block{
        padding-top: calc(var(--trenner-oben, 40px) / 2);
        padding-bottom: calc(var(--trenner-unten, 40px) / 2);
    }

    .trenner_block.breite_schmal .trenner{
        max-width: 100%;
    }
}

/* -------------------------------------------- */
/* ------------- BOGEN IM BLOCK --------------- */
/* -------------------------------------------- */

.block.has_bogen{
    padding-top: 0;
}

.block .bogen_ctr{
    line-height: 0;
    font-size: 0;
    margin-bottom: 40px;
    transform: translateY(0px);
}

.block .bogen_ctr svg{
    display: block;
    width: 100%;
    height: auto;
}

/* Ueberschreibt das fill-Attribut aus der SVG-Datei */
.block .bogen_ctr svg path{
    fill: var(--bogen-farbe, #FFF);
}

@media (max-width: 992px) {

    .block .bogen_ctr{
        margin-bottom: 20px;
    }
}

.links_block .wrapper{
    display: flex;
    margin-left: -40px;
    margin-right: -40px;
}

.links_block .link_box{
    margin: 0 40px;
    position: relative;
    width: 33.33%;
}

.links_block .link_box .body{
    background: #60c5e3;
}

.links_block .link_box img{
    width: 100%;
}

.links_block .arrow{
    position: absolute;
    right: 0;
    bottom: 0;
}

.links_block .arrow img{
    width: 50px;
}

.links_block  .body{
    display: inline-block;
    padding: 20px 30px 40px 30px;
    font-weight: 400;
    position: relative;
}

.links_block .body h3{
    color: white;
    margin-bottom: 15px;
}

.links_block  .body .text{
    line-height: 20px;
    display: inline-block;
    padding-left: 20px;
    padding-top: 10px;
    border-left: 1px solid white;
    color: white;
}

@media(max-width:1200px) {

    .links_block .wrapper{

        margin-left: -15px;
        margin-right: -15px;
    }

    .links_block .link_box{
        margin: 0 15px;
    }
}

@media(max-width:992px) {


    .links_block .wrapper{
        flex-direction: column;
    }

    .links_block .link_box{
        width: calc(100% - 30px);
        margin: 15px 15px;
    }
}


.hintergrundbild_block{
    background: #f1f1f1;
    padding-bottom: 0;
}

.hintergrundbild_block.has_roten_kasten{
    margin-top: 230px;
}

.hintergrundbild_block .red_box{
    background: #f8594d;
    color: var(--red-box-schriftfarbe, #fff);
    padding: 40px 60px;
    transform: translateY(-250px);
    margin-bottom: -200px;
}

.hintergrundbild_block .red_box h1,
.hintergrundbild_block .red_box h2,
.hintergrundbild_block .red_box h3,
.hintergrundbild_block .red_box h4,
.hintergrundbild_block .red_box h5,
.hintergrundbild_block .red_box h6,
.hintergrundbild_block .red_box a,
.hintergrundbild_block .red_box .read_more_button{
    color: var(--red-box-schriftfarbe, #fff);
}

.hintergrundbild_block .red_box h4{
    margin-bottom: 20px;
}

.hintergrundbild_block .red_box img{
    margin-bottom: 20px;
}


.hintergrundbild_block .red_box h5{
    margin-bottom: 20px;
    font-weight: 400;
}

@media(max-width: 991px){

    .hintergrundbild_block .red_box .row > [class*="col-"] + [class*="col-"]{
        margin-top: 30px;
    }

}

@media(max-width: 768px){

    .hintergrundbild_block .red_box{

        padding: 30px 20px;

    }

}


.galerie_block{
    background: #f1f1f1;
    padding-bottom: 0;
}

.galerie_block.has_roten_kasten{
    margin-top: 250px;
}

.galerie_block .red_box{
    background: #f8594d;
    color: white;
    padding: 40px 60px;
    transform: translateY(-250px);
    margin-bottom: -200px;
}

.galerie_block .red_box h4{
    color: white;
    margin-bottom: 40px;
}

.galerie_block .red_box img{
   margin-bottom: 20px;
}


.galerie_block .red_box h5{
    color: white;
    margin-bottom: 20px;
    font-weight: 400;
}

.galerie_block   .boxen{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    align-items: start;
}

/* Gutter: jede Box bekommt einen eigenen Kasten */
.galerie_block .red_box.has_gutter{
    padding: 0;
}

.galerie_block .red_box.has_gutter .box{
    padding: 40px 30px;
}

.galerie_block   .boxen a{
color: white;
    text-decoration: underline;

}

.galerie_block   .mehr-lesen{
    margin-top: 15px;
    font-weight: bold;
    cursor: pointer;
}

.galerie_block   .beschreibung {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Anzahl Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.galerie_block    .beschreibung.offen {
    display: block;
}


@media (max-width: 992px) {
    .galerie_block   .boxen {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 768px) {
    .galerie_block .red_box{
        padding: 30px 30px;
    }

    .galerie_block .red_box.has_gutter{
        padding: 0;
    }


    .galerie_block .red_box h4{
        text-align: center;
        margin-bottom: 30px;
    }
}


/* -------------------------------------------- */
/* --- 3 SPALTEN TEXT BLOCK: SPALTEN ALS KARTEN --- */
/* -------------------------------------------- */

/* Karte fuellt ihre Spalte, dadurch sind alle Karten einer Reihe gleich hoch. */
.block.has_karten .karte{
    height: 100%;
    padding: 40px 30px;
    color: var(--karten-schriftfarbe, #fff);
}

.block.has_karten .karte h1,
.block.has_karten .karte h2,
.block.has_karten .karte h3,
.block.has_karten .karte h4,
.block.has_karten .karte h5,
.block.has_karten .karte h6,
.block.has_karten .karte a,
.block.has_karten .karte .brand_text,
.block.has_karten .karte .read_more_button{
    color: var(--karten-schriftfarbe, #fff);
}

/* Ein [download] in der Karte waere sonst blau auf blau - Button invertieren. */
.block.has_karten .karte .brand_btn{
    background: var(--karten-schriftfarbe, #fff);
    color: var(--karten-farbe, #1e6daf);
}

.block.has_karten .karte .brand_btn:hover{
    background: var(--karten-schriftfarbe, #fff);
    color: var(--karten-farbe, #1e6daf);
    opacity: 0.85;
}

.block.has_karten .karte > *:last-child{
    margin-bottom: 0;
}

@media (max-width: 991px){

    .block.has_karten .row > [class*="col-"] + [class*="col-"]{
        margin-top: 30px;
    }

}

@media (max-width: 768px){

    .block.has_karten .karte{
        padding: 30px 20px;
    }

}



.galerie_block .button-prev svg{
    width: 25px;
    margin: 0 10px;
    cursor: pointer;
    fill: rgb(29, 110, 176);
}

.galerie_block .button-next svg{
    width: 25px;
    margin: 0 10px;
    cursor: pointer;
    fill: rgb(29, 110, 176);
}

.galerie_block  .buttons{
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.block.zitat_block{
    margin-top: var(--zitat-oben, 0px);
    margin-bottom: var(--zitat-unten, 0px);
}

.zitat_block {
    font-family: 'Grape Nuts';
    background: #dfeaee;
    padding: 100px 0;
    font-size: 56px;
    line-height: 64px;
    color: #2f3f4e;
    text-align: center;
    border-top: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
}

@media(max-width: 992px){
    .block.zitat_block{
        margin-top: calc(var(--zitat-oben, 0px) / 2);
        margin-bottom: calc(var(--zitat-unten, 0px) / 2);
    }

    .zitat_block {
        font-size: 34px;
        line-height: 48px;
    }
}

@media(max-width: 768px){
    .zitat_block {
        padding: 40px 0;
        font-size: 28px;
        line-height: 36px;
    }

    .zitat_block br{
        display: none;
    }

}


.kontakt_block .wrapper{
    display: flex;
    margin-left: -15px;
    margin-right: -15px;
}

.kontakt_block .sidebar{
    width: 33.33%;
    padding: 0 15px;
}

.kontakt_block .content_ctr{
    width: 66.66%;
    padding: 0 15px;
    transform: translateY(-300px);
    margin-bottom: -300px;
}

.kontakt_block .content_ctr .main_content{
    background: #FFF;
    padding: 20px 20px;
}


.kontakt_block .wpcf7-form-control,
#kontakt-flyout .wpcf7-form-control{
    display: block;
    width: 100%;
    height: 36px;
    background: #f0e7e8;
    border: none;
    padding: 5px 7px;
}

.kontakt_block .wpcf7-list-item,
#kontakt-flyout .wpcf7-list-item{
    margin-left: 0;
}

.kontakt_block label,
#kontakt-flyout .kontakt-formular label{
    margin-bottom: 0;
}


.kontakt_block .wpcf7-textarea,
#kontakt-flyout .wpcf7-textarea{
    height: 120px;
}

.kontakt_block .wpcf7-acceptance,
#kontakt-flyout .wpcf7-acceptance{
    background: none;
    height: unset;
}


.kontakt_block .wpcf7-submit,
#kontakt-flyout .wpcf7-submit{

    background: #1e6daf;
    color: white;
    display: inline-block;
    height: unset;

    width: unset;
    padding: 5px 40px;
}

.kontakt_block .wpcf7-response-output,
#kontakt-flyout .wpcf7-response-output{
    margin-left: 0!important;
}

@media(max-width: 992px){

    .kontakt_block .wrapper{
        flex-direction: column;
    }

    .kontakt_block .wrapper > div{
        width: 100%
    }

    .kontakt_block .wrapper > div.sidebar{
        order: 3;
        margin-top: 20px;
    }

}


.team{
    border: 1px solid lightgray;
    position: relative;
    margin-bottom: 40px;
    cursor: pointer;
}

.team.team--ohne_infos{
    cursor: default;
}

.team  .name{
    padding: 30px 20px;
    font-weight: bold;
    font-size: 20px;
    color: #777777;
}

.team  .arrow{
    position: absolute;
    right: 0;
    bottom: 0;
}

.team  .arrow img{
    width: 50px;
}

.team_modal .modal-body{
    padding: 0;
}

.team_modal    .mehr_informationen{
    padding: 1rem;
}

/* Anker fuer Direktlinks - nur fuer eingeloggte Redakteure sichtbar. */
.team_anker_hinweis{
    margin: -30px 0 40px;
    font-size: 13px;
    color: #999999;
    user-select: all;
    -webkit-user-select: all;
}

/* -------------------------------------------- */
/* ------------- STELLENANGEBOT --------------- */
/* -------------------------------------------- */

/* Uebersicht: jede Stelle ist eine Karte, die komplett verlinkt ist. */

.stellenangebot_block .stellen{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.stellenangebot_block .stelle_karte{
    display: flex;
    align-items: flex-start;
    gap: 25px;
    flex: 1 1 100%;
    padding: 30px;
    background: #fff;
    border-left: 8px solid var(--stelle-farbe, #1E6DAF);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease;
}

.stellenangebot_block .stelle_karte:hover,
.stellenangebot_block .stelle_karte:focus{
    box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.stellenangebot_block .stelle_karte:focus-visible{
    outline: 2px solid var(--stelle-farbe, #1E6DAF);
    outline-offset: 3px;
}

.stellenangebot_block .stelle_karte .icon_ctr{
    flex: 0 0 100px;
    text-align: center;
}

.stellenangebot_block .stelle_karte .icon{
    width: 100%;
    max-width: 100px;
}

.stellenangebot_block .stelle_karte .body{
    display: block;
    flex: 1 1 auto;
}

.stellenangebot_block .stelle_karte .eckdaten{
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
}

.stellenangebot_block .stelle_karte .titel{
    display: block;
    margin-bottom: 12px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}

.stellenangebot_block .stelle_karte .text{
    display: block;
    margin-bottom: 15px;
    line-height: 26px;
}

.stellenangebot_block .stelle_karte .mehr{
    display: inline-block;
    font-weight: 600;
    color: var(--stelle-farbe, #1E6DAF);
}

.stellenangebot_block .stelle_karte .mehr::after{
    content: " →";
}

/* Einzelansicht einer Stelle */

.stellenangebot_single .eckdaten{
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 30px;
}

.stellenangebot_single .icon{
    width: 70%;
    max-width: 100px;
}

.stellenangebot_single .preview p,
.stellenangebot_single .details p{
    line-height: 26px;
}

.stellenangebot_single .details ul,
.stellenangebot_single .preview ul{
    padding-left: 20px;
}

.stellenangebot_single .ansprechpartner{
    margin-top: 40px;
    padding: 25px 30px;
    border-left: 8px solid var(--stelle-farbe, #1E6DAF);
    background: #f5f5f5;
}

.stellenangebot_single .ansprechpartner h4{
    margin-bottom: 12px;
}

.stellenangebot_single .ansprechpartner .name{
    font-weight: 600;
}

.stellenangebot_single .bewerbungsfrist{
    margin-top: 25px;
    font-weight: 600;
}

.stellenangebot_single .zurueck{
    margin-top: 40px;
}

@media (max-width: 992px) {

    .stellenangebot_block .stelle_karte{
        flex-direction: column;
        gap: 15px;
        padding: 25px 20px;
    }

    .stellenangebot_block .stelle_karte .icon_ctr{
        flex: 0 0 auto;
    }

    .stellenangebot_block .stelle_karte .titel{
        font-size: 20px;
        line-height: 28px;
    }

    .stellenangebot_block .stelle_karte .eckdaten{
        font-size: 14px;
        line-height: 22px;
    }
}

.text_block .text_block_figure{
    width: var(--tb-bild-breite, 220px);
    position: absolute;
    left: 130px;
    margin: 0;
}

.text_block .text_block_img{
    display: block;
    width: 100%;
    height: auto;
}

.text_block .text_block_img_caption{
    display: block;
    margin-top: 10px;
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: center;
}

.text_block .wrapper{
    display: flex;
    gap: 30px;
}

@media (max-width: 1400px) {
    .text_block   .text_block_figure{

        position: unset;
        width: min(calc(var(--tb-bild-breite, 220px) * 0.9), 40%);
        align-self: center;
    }
}

@media (max-width: 768px) {
    .text_block .wrapper{
        flex-direction: column;
    }

    .text_block .text_block_figure{
        max-width: 100%;
    }
}


@media (min-width: 1400px) {
    .text_block.abstand_links .text{
        margin-left: calc(130px + var(--tb-bild-breite, 220px) + 100px);
    }

}

.intro_text {
    background: #60c5e3;
    padding: 0 0;
    position: relative;
}

.intro_text h1 {
    color: white;
    margin: 0;
    margin-bottom: 10px;
    font-size: 46px;
    line-height: 50px;
    margin-top: 50px;
}

.intro_text h2 {
    color: white;
    margin: 0;
    font-weight: bold;

}

.intro_text .text {
    position: absolute;
    width: 100%;
}

@media (min-width: 1400px) {
    .intro_text .text h1,
    h1.left_margin,
    .h1.left_margin
    {
        margin-left: 450px;
    }

    .intro_text .text h2,
    h2.left_margin,
    .h2.left_margin
    {
        margin-left: 450px;
    }

    .page-id-848 .zwei_spalten_text_block h2.left_margin
    {
        margin-left: 670px;
    }
}

@media (max-width: 992px) {

    .intro_text {
        padding: 20px 0;
    }

    .intro_text .text {
        position: unset;
        width: 100%;
    }
}


@media (max-width: 768px) {
    .intro_text h1 {

        margin-top: 10px;
    }
}


#menu-container {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    left: 0;
    top: 150px;
    z-index: 9999999999;
    transform: translateX(calc(-100% + 40px));
    height: 45px;
    padding: 0 60px;
    transition: 1s all;
}


#menu-container.active {
    padding: 30px 60px;
    height: unset;
    transform: unset;
}

#menu-container ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#menu-container ul.main-menu > li > a {
    border-bottom: 1px solid white;
}

#menu-container ul a {
    color: white;
    display: block;
    font-size: 13px;
    line-height: 16px;
    padding: 4px 0;
}

#menu-container ul.sub-menu {
    padding: 5px 15px 15px 15px;
}

#menu-container ul.sub-menu a {
    padding: 3px 0;
}

#menu-container ul li.menu-item-has-children > a {
    font-size: 18px;
    font-weight: bold;
}

/* Auf grossen Schirmen waere der Kasten sonst winzig. */
@media (min-width: 1600px) {
    #menu-container.active {
        padding: 35px 70px;
    }

    #menu-container ul a {
        font-size: 15px;
        line-height: 19px;
        padding: 5px 0;
    }

    #menu-container ul li.menu-item-has-children > a {
        font-size: 21px;
    }
}

@media (min-width: 2000px) {
    #menu-container.active {
        padding: 40px 80px;
    }

    #menu-container ul a {
        font-size: 17px;
        line-height: 22px;
        padding: 6px 0;
    }

    #menu-container ul li.menu-item-has-children > a {
        font-size: 24px;
    }
}

/*
 * Stand vorher als .d-inline-block im Markup. Bootstrap setzt die
 * display-Utilities mit !important, damit liess sich das Icon im mobil
 * geschlossenen Zustand nicht ausblenden.
 */
#menu-home {
    display: inline-block;
}

#menu_button {
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    line-height: 0;
}

#menu_button:focus {
    outline: none;
}

#menu_button:focus-visible {
    outline: 2px solid #FFF;
    outline-offset: 2px;
}

/* Das X gibt es nur im mobilen Vollbild-Overlay. */
#menu_button .icon-schliessen {
    display: none;
}

/*
 * Mobil ein deckendes Vollbild-Overlay statt des Desktop-Kastens: kein
 * Einfahren von links, keine Transition. Geschlossen deckt der Container zwar
 * schon den ganzen Schirm ab, ist dann aber unsichtbar UND klickdurchlaessig -
 * sonst wuerde er bei z-index 9999999999 die ganze Seite blockieren.
 *
 * Breakpoint 992px, weil main.js die Nav oberhalb davon beim Laden aufklappt.
 */
@media (max-width: 992px) {
    #menu-container {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: auto;
        max-width: none;
        padding: 0;
        background: transparent;
        transform: none;
        transition: none;
    }

    /* Geschlossen ist nur der Griff da - und nur der faengt Taps ab. */
    #menu-container:not(.active) {
        pointer-events: none;
    }

    #menu-container:not(.active) > #menu-home,
    #menu-container:not(.active) > ul.main-menu {
        display: none;
    }

    #menu-container.active {
        pointer-events: auto;
        background: #232323;  /* gleicher Ton wie #kontakt-flyout-panel */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* nur so viel Luft oben, wie das X braucht */
        padding: 60px 25px 25px 25px;
    }

    #menu-container.active > ul.main-menu {
        flex: 1 1 auto;
        min-height: 0;  /* sonst schrumpft der Flex-Kindknoten nicht */
        align-self: stretch;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Der Griff sitzt in beiden Zustaenden an derselben Stelle. */
    #menu_button {
        position: fixed;
        top: 100px;
        left: 0;
        right: auto;
        pointer-events: auto;
        background: rgba(0, 0, 0, 0.55);
        padding: 5px 8px;
    }

    /*
     * Im Overlay sitzt das X ganz oben, damit das Menue direkt darunter
     * beginnt. Geschlossen bleibt der Griff an seinem gewohnten Platz.
     */
    #menu-container.active #menu_button {
        top: 10px;
        left: 10px;
        padding: 0;
        background: none;  /* auf dem Overlay braucht es keine eigene Flaeche */
    }

    #menu-container.active #menu_button .icon-burger {
        display: none;
    }

    #menu-container.active #menu_button .icon-schliessen {
        display: block;
    }

    /* Die Seite dahinter darf nicht mitscrollen - Muster wie kontakt-offen. */
    body.menue-offen {
        overflow: hidden;
    }

    /*
     * Solange ein Panel oder Modal offen ist, ist die Nav weg: der fixierte
     * Burger-Griff wuerde sonst mitten auf dem offenen Panel stehen. Gleiches
     * Muster wie die bestehende Regel fuer #layer.
     */
    body.kontakt-offen #menu-container,
    body.modal-open #menu-container {
        display: none;
    }
}

.kontakt_shortcut {
    display:flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
    margin-bottom: 30px;
    color: #1e6daf;
}

.kontakt_shortcut > div{
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.kontakt_shortcut svg,
.kontakt_shortcut .kontakt_shortcut__icon_leer{
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.kontakt_shortcut svg{
    stroke: rgb(30, 109, 175);
    transform: translateY(2px);
}

.page-id-247 .intro_text img{
    width: 700px!important;
}

.page-id-247 #layer{
    display:none;
}

.page-id-247 .intro_text .container{
    display: flex;
    justify-content: center;
}

.page-id-247 .intro_text{
    padding-bottom: 100px;
}

@media (max-width: 992px) {
    .page-id-247 .intro_text img{
        width: 100%!important;
    }
    .page-id-247 .intro_text{
        padding-bottom: 30px;
    }

}


.red_box .read_more_button{
    color: white;
}

#layer{
    position: absolute;
    right: 10px;
    width: 70px;
    bottom: 50px;
    z-index: 99999999;
}

@media (min-width: 500px) {
    #layer{
        bottom: 80px;
    }
}

@media (min-width: 768px) {
    #layer{
        bottom: 100px;
    }
}

@media (min-width: 1024px) {
    #layer{
        width: 200px;
        bottom: 150px;
    }
}

@media (min-width: 1400px) {
    #layer{
        bottom: 175px;
    }
}

@media (min-width: 1600px) {
    #layer{
        bottom: 220px;
    }
}

@media (min-width: 2000px) {
    #layer{
        bottom: 275px;
    }
}

@media (min-width: 2400px) {
    #layer{
        bottom: 320px;
    }
}

@media (min-width: 2700px) {
    #layer{
        bottom: 370px;
    }
}

@media (min-width: 3000px) {
    #layer{
        bottom: 450px;
    }
}

#pre-footer {
    background: #7a7a7a;
    padding-bottom: 100px;
}

#pre-footer ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#pre-footer ul a{
    color: white;
    width: 230px;
    display: inline-block;
    text-align: right;
}

li.menu-item-has-children{
    position: relative;
}

li.menu-item-has-children > a{
    border-bottom: 2px solid white;
}

#pre-footer ul.sub-menu{
    padding-top: 10px;
    display: none;
}

#pre-footer ul.sub-menu a{
   font-size: 14px;
    line-height: 20px;
}


#pre-footer .submenu-toggle {
    background: none;
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    padding: 0 6px;
    font-size: 12px;
    vertical-align: middle;
    line-height: 1;
    display: inline-block;
    transition: transform 0.2s ease;
}

#pre-footer .submenu-toggle.open {
    transform: rotate(180deg);
}

@media (max-width: 1200px) {
    #pre-footer ul a{
        width: 180px;
    }
}

@media (max-width: 992px) {
    #pre-footer ul a{
        width: 250px;
    }
}

/* -------------------------------------------------- */
/* --------------- Kontakt-Button ------------------- */
/* -------------------------------------------------- */

/*
 * Die Nav steht auf top:150px und ist im eingeklappten Zustand 45px hoch,
 * waechst beim Aufklappen aber nach unten - ein relativer Offset waere daher
 * nicht stabil, deshalb ein eigener fester top-Wert.
 *
 * Der Griff soll immer sichtbar und klickbar sein, also liegt er ueber allem,
 * was ihn sonst verdecken wuerde: #menu-container (9999999999 - mobil ein
 * deckendes Vollbild-Overlay, auf dem Desktop beim Laden aufgeklappt und damit
 * ueber top:215px gewachsen) und das Siegel #layer (99999999).
 */
#kontakt-flyout {
    position: fixed;
    left: 0;
    top: 215px;
    z-index: 10000000000;
    display: flex;
    align-items: flex-start;
    color: #FFF;
    transform: translateX(calc(-100% + 40px));
    transition: transform .4s ease;
}

#kontakt-flyout.active {
    transform: none;
}

/*
 * Der Panel bleibt im Layout stehen (visibility statt display), damit
 * translateX(-100%) eine stabile Breite hat und der Slide nicht springt.
 * visibility nimmt ihn trotzdem aus Tab-Reihenfolge und Screenreader.
 */
#kontakt-flyout-panel {
    order: 1;
    width: 380px;
    max-height: calc(100vh - 260px);
    overflow-y: auto;
    padding: 25px 30px;
    background: #232323;
    visibility: hidden;
    transition: visibility 0s .4s;
    overscroll-behavior: contain;
}

#kontakt-flyout.active #kontakt-flyout-panel {
    visibility: visible;
    transition: visibility 0s 0s;
}

/*
 * Markenblau statt des Nav-Schwarz: auf dem Desktop ist die Navigation beim
 * Laden aufgeklappt, ein dunkler Tab auf dunklem Grund waere kaum zu sehen.
 */
#kontakt-flyout-toggle {
    order: 2;
    width: 40px;
    background: #1e6daf;
    border: none;
    color: #FFF;
    cursor: pointer;
    padding: 12px 0 18px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#kontakt-flyout-toggle svg {
    height: 22px;
    width: 22px;
    stroke: #FFF;
    flex: none;
}

#kontakt-flyout-toggle .label {
    writing-mode: vertical-rl;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.kontakt-flyout-close {
    float: right;
    background: none;
    border: none;
    color: #FFF;
    font-size: 26px;
    line-height: 1;
    padding: 0 0 0 10px;
    cursor: pointer;
}

#kontakt-flyout-panel h2 {
    font-size: 24px;
    line-height: 30px;
    color: #FFF;
    margin-bottom: 20px;
}

#kontakt-flyout-panel h3 {
    font-size: 18px;
    line-height: 24px;
    color: #FFF;
    margin-bottom: 10px;
}

#kontakt-flyout ul.kontakt-zielgruppen {
    list-style-type: none;
    padding: 0;
    margin: 0 0 25px 0;
}

#kontakt-flyout .zielgruppe {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

#kontakt-flyout .zielgruppe-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    color: #FFF;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    text-align: left;
    padding: 10px 0;
    cursor: pointer;
}

#kontakt-flyout .zielgruppe-toggle .arrow {
    font-size: 11px;
    transition: transform .2s ease;
}

#kontakt-flyout .zielgruppe-toggle.offen .arrow {
    transform: rotate(180deg);
}

#kontakt-flyout .zielgruppe-body {
    display: none;
    padding: 0 0 15px 0;
}

#kontakt-flyout .zielgruppe-body .hinweis {
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 10px;
}

#kontakt-flyout .nummer {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

#kontakt-flyout .nummer svg {
    height: 20px;
    width: 20px;
    stroke: #FFF;
    margin-right: 7px;
    flex: none;
    transform: translateY(1px);
}

#kontakt-flyout .nummer a {
    color: #FFF;
    font-size: 16px;
    line-height: 20px;
    display: block;
}

#kontakt-flyout .nummer small {
    display: block;
    font-size: 12px;
    line-height: 16px;
    opacity: .8;
}

#kontakt-flyout .zielgruppe-body .mehr {
    display: inline-block;
    color: #FFF;
    font-size: 13px;
    text-decoration: underline;
    margin-top: 5px;
}

#kontakt-flyout .kontakt-bewerbung {
    margin-bottom: 25px;
}

#kontakt-flyout .kontakt-bewerbung ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#kontakt-flyout .kontakt-bewerbung a {
    color: #FFF;
    display: block;
    font-size: 15px;
    line-height: 20px;
    padding: 4px 0;
    text-decoration: underline;
}

#kontakt-flyout .kontakt-formular {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    padding-top: 20px;
}

#kontakt-flyout .kontakt-formular label {
    color: #FFF;
    font-size: 14px;
}

#kontakt-flyout .kontakt-formular .wpcf7-acceptance .wpcf7-list-item-label,
#kontakt-flyout .kontakt-formular .wpcf7-acceptance a {
    color: #FFF;
}

#kontakt-flyout .kontakt-formular .row {
    margin-left: -7px;
    margin-right: -7px;
}

#kontakt-flyout .kontakt-formular .row > div {
    padding-left: 7px;
    padding-right: 7px;
    flex: 0 0 100%;
    max-width: 100%;
}

#kontakt-flyout button:focus {
    outline: none;
}

#kontakt-flyout button:focus-visible {
    outline: 2px solid #FFF;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #kontakt-flyout,
    #kontakt-flyout .zielgruppe-toggle .arrow {
        transition: none;
    }
}

/*
 * Zwischen 769 und 992px ist die Nav schon das Vollbild-Overlay, der Griff aber
 * noch der schmale Streifen links - und liegt jetzt darueber. Ohne das Polster
 * schnitte er den Anfang der Menuepunkte an.
 */
@media (min-width: 769px) and (max-width: 992px) {
    #menu-container.active {
        padding-left: 65px;
    }
}

/* Mobil: Leiste unten, Panel als Overlay - der 40px-Griff waere zu schmal. */
@media (max-width: 768px) {
    #kontakt-flyout {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: column;
        transform: none;
    }

    /* Das Siegel liegt auf z-index 99999999 und wuerde ueber dem Panel stehen. */
    body.kontakt-offen #layer {
        display: none;
    }

    /* Die Leiste liegt ueber dem Overlay - der letzte Menuepunkt braucht Luft. */
    #menu-container.active {
        padding-bottom: 70px;
    }

    #kontakt-flyout-toggle {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        padding: 12px 0;
    }

    #kontakt-flyout-toggle .label {
        writing-mode: horizontal-tb;
    }

    #kontakt-flyout-panel {
        width: 100%;
        max-height: 85vh;
        display: none;
        visibility: visible;
    }

    #kontakt-flyout.active #kontakt-flyout-panel {
        display: block;
    }

    body.kontakt-offen {
        overflow: hidden;
    }
}

/* -------------------------------------------- */
/* ------ SHORTCODES: DOWNLOAD & CTA ---------- */
/* -------------------------------------------- */

/* Setzt auf .brand_btn auf, ergaenzt nur die Icon-Ausrichtung. */
.download_btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 8px 10px 0;
    text-decoration: none;
}

.download_btn:hover{
    text-decoration: none;
}

.download_btn .download_btn_icon{
    display: inline-flex;
    flex: 0 0 auto;
}

.download_btn svg{
    width: 1.1em;
    height: 1.1em;
    display: block;
}

.download_btn .download_btn_typ{
    font-size: 0.85em;
    opacity: 0.8;
}

.download_btn:focus-visible{
    outline: 2px solid #1e6daf;
    outline-offset: 2px;
}

/* CTA-Box: Hintergrundfarbe kommt als Inline-Style aus dem Shortcode. */
.cta_box{
    padding: 30px;
    margin: 30px 0;
    color: #fff;
}

/* Die globale h1-h5-Regel faerbt Ueberschriften blau, in der Box waere das unlesbar. */
.cta_box .cta_titel{
    color: #fff;
    margin-top: 0;
    margin-bottom: 15px;
}

.cta_box .cta_text{
    color: #fff;
}

/* h1-h5 und [blau] sind global markenblau - in der Box waere das unlesbar. */
.cta_box .cta_text h1,
.cta_box .cta_text h2,
.cta_box .cta_text h3,
.cta_box .cta_text h4,
.cta_box .cta_text h5,
.cta_box .cta_text .brand_text{
    color: #fff;
}

.cta_box .cta_text a{
    color: #fff;
    text-decoration: underline;
}

/* wpautop haengt der Box sonst unten einen leeren Absatz-Abstand an. */
.cta_box .cta_text p:last-child{
    margin-bottom: 0;
}

.cta_box .cta_buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.cta_box .cta_btn{
    padding: 5px 15px;
    display: inline-block;
    font-weight: 400;
    transition: 0.4s all;
    text-decoration: none;
    border: 2px solid #fff;
}

.cta_box .cta_btn_primaer{
    background: #fff;
    color: #1e6daf;
}

.cta_box .cta_btn_primaer:hover{
    background: #f0f0f0;
    border-color: #f0f0f0;
    color: #1e6daf;
    text-decoration: none;
}

.cta_box .cta_btn_sekundaer{
    background: transparent;
    color: #fff;
}

.cta_box .cta_btn_sekundaer:hover{
    background: #fff;
    color: #1e6daf;
    text-decoration: none;
}

.cta_box .cta_btn:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Ein [download] in der CTA-Box waere sonst blau auf blau. */
.cta_box .download_btn{
    background: #fff;
    color: #1e6daf;
}

.cta_box .download_btn:hover{
    background: #f0f0f0;
    color: #1e6daf;
}

@media (max-width: 768px) {

    .cta_box{
        padding: 20px;
    }

    .cta_box .cta_btn{
        flex: 1 1 100%;
        text-align: center;
    }
}

ul{
    padding-left: 20px;
}
/* ------ ICON-LISTE ---------- */
/* Spalte mit CSS-Klasse "icon_liste": Icon links, Text mittig daneben. */

.icon_liste .icon_text{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.icon_liste .icon_text_icon{
    flex: 0 0 auto;
    width: 60px;
    display: flex;
    justify-content: center;
}

.icon_liste .icon_text_icon img{
    display: block;
    width: auto;
    height: 55px;
    max-width: 100%;
}

.icon_liste .icon_text_body{
    flex: 1 1 auto;
    min-width: 0;
}

.icon_liste .icon_text_body > p:last-child{
    margin-bottom: 0;
}

@media(max-width: 576px){

    .icon_liste .icon_text{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}