/* roboto-slab-800 - latin */
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/roboto-slab-v24-latin-800.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/roboto-slab-v24-latin-800.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/roboto-slab-v24-latin-800.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/roboto-slab-v24-latin-800.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/roboto-slab-v24-latin-800.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/roboto-slab-v24-latin-800.svg#RobotoSlab') format('svg');
    /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/open-sans-v29-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/open-sans-v29-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/open-sans-v29-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/open-sans-v29-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/open-sans-v29-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/open-sans-v29-latin-regular.svg#OpenSans') format('svg');
    /* Legacy iOS */
}

/* open-sans-600 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v29-latin-600.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/open-sans-v29-latin-600.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/open-sans-v29-latin-600.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/open-sans-v29-latin-600.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/open-sans-v29-latin-600.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/open-sans-v29-latin-600.svg#OpenSans') format('svg');
    /* Legacy iOS */
}

:root {
    --primary: #01afc9;
    --secondary: #F87200;
    --akzent: #F87200;
    --hellgrau: #647071;
    --hellblau: #E3FBFF;
    --link: #F87200;
    --text: #464646;
    --headline: #006E80;
    --trenner: #01afc9;
    --footer: #006E80;
    --white: #FFF;
}

html * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-display: swap;
    -webkit-font-display: swap;
    hyphens: manuel;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;

}

body {
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: var(--text);
    background-color: var(--hellblau);
}

h1,
h2,
h3 {
    font-family: 'Roboto Slab', serif;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2em;
}

h2 {
    font-size: 54px;
    color: var(--headline);
    text-align: center;
}

h3 {
    text-transform: none;
}

p,
ul,
ol {
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: left;
    line-height: 1.4em;
}

ul,
ol {
    margin-left: 6px;
    margin-top: 10px;
}

li {
    padding-left: 10px;
    line-height: 1.4em;
    margin-bottom: 10px;
    list-style-type: "•";
}

a {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: var(--link);
    text-decoration: none !important;
}

p > a:not(footer a) {
    text-decoration: underline dotted !important;
}

a.underline {
    text-decoration: underline !important;
}

a:hover,
a:visited,
a:active,
a:focus {
    text-decoration: none !important;
    color: var(--link);
    outline: none !important;
}

address {
    font-style: normal !important;
}

/* +++++++++++++++++ Layout +++++++++++++++++ */
#wrapper {
    background-color: var(--helblau);
    margin: 95px auto 0px;
    padding: 0px 40px;
}

section {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 90px auto;
    background-color: var(--white);
}

.content {
    position: relative;
    width: 100%;
    padding: 40px;
}

.content.teaser {
    padding: 0px 0px 20px 0px;
}

.relative {
    position: relative;
}

.zentriert {
    text-align: center;
}

.padding_top_0 {
    padding-top: 0px !important;
}

.padding_top_1 {
    padding-top: 1px !important;
}

.padding_top_40 {
    padding-top: 40px !important;
}

.padding_top_100 {
    padding-top: 100px !important;
}

.padding_top_140 {
    padding-top: 140px !important;
}

.padding_bottom_0 {
    padding-bottom: 0px !important;
}

.padding_bottom_80 {
    padding-bottom: 80px !important;
}

.margin_top_0 {
    margin-top: 0px !important;
}

.margin_top_20 {
    margin-top: 20px !important;
}

.margin_top_40 {
    margin-top: 40px !important;
}

.margin_top_80 {
    margin-top: 80px !important;
}


.margin_bottom_0 {
    margin-bottom: 0px !important;
}

.margin_bottom_20 {
    margin-bottom: 20px !important;
}

.margin_bottom_40 {
    margin-bottom: 40px !important;
}

.margin_bottom_60 {
    margin-bottom: 60px !important;
}

.content.max_width_1100 {
    max-width: 1140px;
    margin: auto;
}

.content.max_width_980 {
    max-width: 980px;
    margin: auto;
}

img.ganze_breite {
    width: 100%;
}

.banderole {
    position: relative;
    top: -1px;
    left: -41px;
    width: calc(100% + 111px);
    background-color: var(--primary);
    margin-bottom: 40px;
    z-index: 100;
}

.banderole:after {
    position: absolute;
    right: 0px;
    bottom: -12px;
    width: 30px;
    height: 12px;
    background-image: linear-gradient(160deg, #004C58 45%, var(--hellblau) 50%);
    content: '';
    z-index: 90;
}

.banderole h2 {
    color: var(--white);
    padding: 20px 40px;
    margin: auto;
    text-align: center;
    font-size: 40px;
    max-width: 1140px;
}

.headlines_keyvisual {
    position: absolute;
    left: -24px;
    bottom: -10px;
    z-index: 1000;
}

.headline_keyvisual {
    transform: rotate(-6deg) skew(-6deg);
    background-color: var(--primary);
    width: min-content;
    padding: 12px 40px 15px;
}

.headline_keyvisual h1 {
    color: var(--white);
    line-height: 1.1em;
    display: inline;
    font-size: clamp(26px, 5vw, 44px);
    transform: skew(6deg);
}

.headline_keyvisual h1:after {
    position: absolute;
    left: 0px;
    bottom: -9px;
    width: 23px;
    height: 10px;
    background-image: linear-gradient(195deg, #004C58 45%, var(--hellblau) 50%);
    content: '';
    z-index: 90;
    transform: rotate(2deg);
}

.subheadline_keyvisual {
    margin-top: 20px;
    transform: rotate(-6deg) skew(-6deg);
    background-color: var(--secondary);
    width: min-content;
    padding: 12px 40px 15px;
}

.subheadline_keyvisual h2 {
    text-transform: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    line-height: 1.2em;
    text-align: left;
    color: var(--white);
    line-height: 1.1em;
    hyphens: none;
    display: inline;
    font-size: clamp(20px, 3vw, 30px);
    transform: skew(6deg);
}

.subheadline_keyvisual h2:after {
    position: absolute;
    left: 0px;
    bottom: -9px;
    width: 23px;
    height: 10px;
    background-image: linear-gradient(195deg, #8d4202 45%, var(--hellblau) 50%);
    content: '';
    z-index: 90;
    transform: rotate(4deg);
}

section.breadcrumb {
    margin: 0px auto;
}

section.breadcrumb p {
    font-size: 16px;
    text-align: center;
    padding: 30px 40px 0px;
    margin: 0px;
    color: var(--secondary)
}

a.btn_tuerkis {
    display: inline-block;
    font-size: 20px;
    color: var(--white);
    padding: 8px 40px 10px;
    background-color: var(--primary);
    margin-top: 20px;
    transition: .3s;
}

a.btn_tuerkis:hover {
    background-color: var(--secondary);
    transition: .3s;
}

hr {
    border: none;
    height: 6px;
    width: 250px;
    margin: 100px auto;
    background: var(--primary);
}

.farbigertext {
    color: var(--primary);
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++ Navigation +++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

nav {
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: var(--primary);
    box-shadow: 0px 5px 8px #0003;
    z-index: 100000;
}

#scrollbody.active nav {
    margin-right: 20px;
}

nav .content {
    display: grid;
    grid-template-columns: 270px 1fr;
    grid-gap: 0px;
    align-items: center;
    width: calc(100% - 80px);
    max-width: 1440px;
    height: 95px;
    margin: auto;
    padding: 0px 0px;
}

.navigation {
    justify-self: end;
}

#hauptnavi {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 30px;
    margin: 0px;
    padding: 0px;
}

@media(max-width:1269px) {
    #hauptnavi.active {
        display: flex;
        grid-gap: 10px;
        justify-content: center;
        align-content: center;
        list-style: none;
    }
}

#hauptnavi .navigrid {
    display: grid;
    grid-template-columns: 300px 300px;
    hyphens: auto;
}

.submenu {
    overflow-y: auto;
    overscroll-behavior: contain;
    /* verhindert "durchscrollen" beim Touch */
}

#hauptnavi ul {
    margin-top: 20px;
    margin-left: 0px;
}

#hauptnavi li {
    margin-bottom: 0px;
    position: relative;
    display: inline-block;
    padding-left: 0px;
}

#hauptnavi li.has-submenu {
    margin-right: 15px;
}

#hauptnavi li ul {
    padding-left: 0px;
    padding-right: 0px;
}

#hauptnavi li a {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
    background-color: var(--primary);
    border-top: 3px solid var(--primary);
    border-bottom: 3px solid var(--primary);
    transition: .5s;
}

#hauptnavi li a:hover,
#hauptnavi li a.active {
    color: var(--white);
    padding: 10px 0px;
    border-top: 3px solid var(--white);
    border-bottom: 3px solid var(--white);
    transition: .5s;
    z-index: 100;
    position: relative;
}

#hauptnavi li.has-submenu a.pfeil_submenu {
    position: absolute;
    font-size: 14px;
    margin-left: 5px;
    padding: 0px;
    border: none;
}

#hauptnavi a.pfeil_submenu:hover,
#hauptnavi a.pfeil_submenu.active {
    border: none;
    padding: 0px;
    transition: 0;
}

#hauptnavi li div#unternavi_interessierte,
#hauptnavi li div#unternavi_ueberuns,
#hauptnavi li div#unternavi_unternehmen {
    position: absolute;
    background-color: var(--hellblau);
    top: 31px;
    left: 0px;
    z-index: 10;
}

#hauptnavi li div#unternavi_interessierte.active,
#hauptnavi li div#unternavi_ueberuns.active,
#hauptnavi li div#unternavi_unternehmen.active {
    display: block;
}

#hauptnavi li div#unternavi_interessierte a.navi_kategorie {
    display: block;
    background-color: var(--hellblau);
    border-top: 0px solid var(--hellblau);
    border-bottom: 0px solid var(--hellblau);
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary);
    text-transform: uppercase;
    padding: 8px 20px;
}

#hauptnavi li div#unternavi_interessierte a.navi_kategorie:hover {
    color: var(--white);
    background-color: var(--primary);
    border-top: 0px solid var(--hellblau);
    border-bottom: 0px solid var(--hellblau);
    padding: 8px 20px;
    ;
}

.navifarbe {
    background-color: var(--primary);
    height: 31px;
}

#hauptnavi li div#unternavi_interessierte p.navi_kategorie {
    color: var(--primary);
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 600;
    padding: 0px 14px;
    margin-bottom: 0px;
}

div#unternavi_interessierte ul li,
div#unternavi_ueberuns ul li,
div#unternavi_unternehmen ul li {
    display: block;
    padding: 5px 0px;
}

div#unternavi_interessierte ul li a,
div#unternavi_ueberuns ul li a,
div#unternavi_unternehmen ul li a {
    background-color: var(--hellblau);
    border: none;
    font-size: 18px;
    line-height: 1.2;
    color: var(--text);
    font-weight: 300;
    display: block;
    text-transform: none;
    padding: 0px 20px;
}

div#unternavi_interessierte ul li a:hover,
div#unternavi_ueberuns ul li a:hover,
div#unternavi_unternehmen ul li a:hover {
    border: none;
    color: var(--primary);
    padding: 0px 20px;
}

.hamburger {
    display: none;
    align-content: center;
    justify-content: center;
    background-color: var(--primary);
    border: 2px solid var(--primary);
    width: 40px;
    height: 40px;
    padding: 5px;
    transition: .3s;
}

.hamburger span {
    display: block;
    width: 40px;
    height: 5px;
    background-color: var(--white);
    margin: 4px;
    transition: .3s;
}

.hamburger:hover span {
    margin: 6px;
    transition: .3s;
}

/* +++++++++++++++++ Navigation Mobile +++++++++++++++++ */

@media(max-width:1270px) {

    #hauptnavi li.has-submenu {
        margin-right: 0px;
    }

    #hauptnavi a.pfeil_submenu {
        display: none;
    }

    .hamburger {
        display: grid;
    }

    #hauptnavi {
        display: none;
    }

    #hauptnavi.active {
        width: calc(100% + 40px);
        height: calc(100vh - 250px);
        overflow-y: scroll;
        display: block;
        position: absolute;
        left: 0px;
        margin: 27px 0px 25px -20px;
        box-shadow: 0px 5px 8px #0003;
    }

    #hauptnavi .navigrid {
        display: block;
    }

    #hauptnavi li {
        display: block;
    }

    #hauptnavi li a {
        display: inline-block;
        width: 100%;
        font-size: 20px;
        text-align: center;
        background-color: var(--hellblau);
        color: var(--primary);
        padding: 10px 15px;
        border-top: 1px solid var(--white);
        border-bottom: 0px solid var(--white);
    }

    #hauptnavi li a.active {
        color: var(--primary);
        border-top: 1px solid var(--white);
        border-bottom: 0px solid var(--white);
    }

    #hauptnavi li a:hover {
        color: var(--white);
        border-top: 1px solid var(--white);
        border-bottom: 0px solid var(--white);
        background-color: var(--primary);
    }

    nav .content {
        padding: 0px 20px;
        width: calc(100% - 40px);
    }

    #hauptnavi li div#unternavi_interessierte,
    #hauptnavi li div#unternavi_interessierte.active,
    #hauptnavi li div#unternavi_ueberuns,
    #hauptnavi li div#unternavi_ueberuns.active,
    #hauptnavi li div#unternavi_unternehmen,
    #hauptnavi li div#unternavi_unternehmen.active {
        background-color: var(--white);
        display: block;
        position: relative;
        top: 0px;
        left: 0px;
        padding-bottom: 0px;
    }

    .navifarbe {
        display: none
    }

    #hauptnavi li div#unternavi_interessierte ul a.navi_kategorie {
        margin-top: 0px;
        text-align: center;
        font-size: 18px;
        margin-top: 0px;
        padding: 8px 15px;
        background-color: var(--white);
        color: var(--primary);
    }

    #hauptnavi li div#unternavi_interessierte ul,
    #hauptnavi li div#unternavi_ueberuns ul,
    #hauptnavi li div#unternavi_unternehmen ul {
        margin: 0px auto;
        padding-top: 0px;
    }

    #hauptnavi li div#unternavi_interessierte ul li,
    #hauptnavi li div#unternavi_ueberuns ul li,
    #hauptnavi li div#unternavi_unternehmen ul li {
        padding: 0px;
    }

    #hauptnavi li div#unternavi_interessierte ul li a,
    #hauptnavi li div#unternavi_ueberuns ul li a,
    #hauptnavi li div#unternavi_unternehmen ul li a {
        padding: 8px 0px;
        background-color: var(--white);
        width: 100%;
        margin: auto;
    }

    #hauptnavi li div#unternavi_interessierte ul li a:hover,
    #hauptnavi li div#unternavi_ueberuns ul li a:hover,
    #hauptnavi li div#unternavi_unternehmen ul li a:hover {
        padding: 8px 10px;
        background-color: var(--hellblau);
        color: var(--primary);

    }
}

@media(max-width:768px) {
    nav .content {
        padding: 0px 20px;
        width: 100%;
    }

    #hauptnavi li div#unternavi_interessierte ul li a,
    #hauptnavi li div#unternavi_ueberuns ul li a,
    #hauptnavi li div#unternavi_unternehmen ul li a {
        padding: 8px 10px;
        background-color: var(--white);
        width: calc(100% - 40px);
        margin: auto;
    }
}

/* +++++++++++++++++++++++++ Servicenavi ++++++++++++++++++++++ */

.servicenavi {
    position: fixed;
    right: 0px;
    top: 320px;
    z-index: 10000;
}

#kontrast,
#kontaktformular,
#phone,
#beratungsteam {
    position: absolute;
    right: -160px;
    display: grid;
    grid-template-columns: 55px 1fr;
    align-items: center;
    background-color: var(--secondary);
    box-shadow: 3px 3px 5px #0005;
    padding: 10px;
    width: 220px;
    transition: .3s;
    cursor: pointer;
}

#phone {
    top: -65px;
}

#beratungsteam {
    top: -130px;
}

#kontrast {
    top: -196px;
}

#kontrast.active,
#kontaktformular.active,
#phone.active,
#beratungsteam.active {
    right: 0px;
    transition: .3s;
}

#kontrast a,
#kontaktformular a,
#phone a,
#beratungsteam a {
    color: var(--white);
    line-height: 1.2em;
    font-weight: 600;
}

#kontaktformular img {
    margin-top: 2px;
    margin-bottom: -2px;
}

#kontrast img,
#kontaktformular img,
#phone img,
#beratungsteam img {
    max-width: 38px;
    max-height: 38px;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++ Content ++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
a.homelink {
    display: block;
}

.logo {
    background-color: var(--white);
    box-shadow: 0px 5px 8px #0003;
    width: 100%;
    max-width: 270px;
    margin-left: -30px;
    margin-bottom: -30px;
    z-index: 1000;
}

.logo img {
    width: 100%;
    padding: 23px 20px 20px;
}

.keyvisual {
    position: relative;
    margin: 0px auto;
    height: 510px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.keyvisual.startseite {
    background-image: url(../img/startseite_keyvisual.jpg);
}

.keyvisual.interessierte {
    background-image: url(../img/interessierte_keyvisual.jpg);
}

.keyvisual.fachbereiche-bueromanagement-und-e-commerce {
    background-image: url(../img/fachbereiche-bueromanagement-und-e-commerce_keyvisual.jpg);
}

.keyvisual.fachbereiche-media {
    background-image: url(../img/fachbereiche-media_keyvisual.jpg);
}

.keyvisual.fachbereiche-it {
    background-image: url(../img/fachbereiche-it_keyvisual.jpg);
}

.keyvisual.fachbereiche_hauswirtschaft {
    background-image: url(../img/fachbereiche-hauswirtschaft_keyvisual.jpg);
}

.keyvisual.fachbereiche_tischlerei {
    background-image: url(../img/fachbereiche-tischlerei_keyvisual.jpg);
}

.keyvisual.fachbereiche_elektrohandwerk {
    background-image: url(../img/fachbereiche_elektrohandwerk_keyvisual.jpg);
}

.keyvisual.fachbereiche_malerhandwerk {
    background-image: url(../img/fachbereiche_malerhandwerk_keyvisual.jpg);
}

.keyvisual.berufliche_orientierung {
    background-image: url(../img/fachbereiche-berufliche_orientierung_keyvisual.jpg);
}

.keyvisual.unternehmen {
    background-image: url(../img/unternehmen_keyvisual.jpg);
}

.keyvisual.budget_fuer_arbeit {
    background-image: url(../img/budget_fuer_arbeit_keyvisual.jpg);
}


.keyvisual.kostentraeger {
    background-image: url(../img/kostentraeger_keyvisual.jpg);
}


.keyvisual.ueberuns {
    background-image: url(../img/ueberuns_keyvisual.jpg);
}


.keyvisual.news_single {
    background-image: url(../img/ueberuns_keyvisual.jpg);
    background-position: top -20px center;
}

.keyvisual.magazin {
    background-image: url(../img/magazin_keyvisual.jpg);
}

.keyvisual.jobs {
    background-image: url(../img/jobs_keyvisual.jpg);
}

.keyvisual.instagram {
    background-image: url(../img/instagram_keyvisual.jpg);
}

.keyvisual.team {
    background-image: url(../img/team_keyvisual.jpg);
}

section.einleitung {
    margin-top: 0px;
}

.einleitung h2 {
    font-size: 38px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    color: var(--primary);
    text-align: center;
    line-height: 1.3em;
    text-transform: none;
    max-width: 900px;
    margin: 40px auto;
}

.einleitung h2.margin_top_0 {
    margin: 0px auto 40px;
}

.einleitung p {
    font-size: 26px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: var(--text);
    text-align: center;
    line-height: 1.6em;
    max-width: 900px;
    margin: 40px auto 60px;
}

.einleitung p.einleitung-erweitert {
    font-size: 20px;
    margin: 20px auto;
}

a.stoerer_startseite,
a:visited.stoerer_startseite,
a:hover.stoerer_startseite {
    position: absolute;
    top: 20px;
    right: 20px;
    display: grid;
    justify-items: center;
    align-items: center;
    width: 200px;
    height: 200px;
    border-radius: 400px;
    background-color: var(--primary);
    transform: rotate(7deg);
    box-shadow: 3px 3px 8px #0003;
    transition: .3s;
}

a.stoerer_startseite:hover {
    background-color: var(--secondary);
    transform: rotate(0deg);
    transition: .3s;
}

a.stoerer_startseite {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    color: var(--white);
    font-size: 18px;
    line-height: 1.2em;
    text-align: center;
    padding: 25px 25px;
}

a.stoerer_startseite .stoererbtn {
    font-family: 'Open Sans', sans-serif;
    border: 2px solid var(--white);
    padding: 2px 4px;
    font-size: 16px;
    margin-top: -20px;
}

a.stoerer_startseite span {
    font-family: 'Roboto Slab', serif;
    font-size: 28px;
    text-transform: uppercase;
    margin-top: -10px;
}

@media (max-width:900px) {

    a.stoerer_startseite,
    a:visited.stoerer_startseite,
    a:hover.stoerer_startseite {
        left: -10px;
        top: 140px;
        width: 160px;
        height: 160px;
        padding: 25px 10px;
    }

    a.stoerer_startseite .stoererbtn {
        margin-top: 0px;
        font-size: 14px;
        border: none;
    }

    a.stoerer_startseite span {
        font-family: 'Roboto Slab', serif;
        font-size: 25px;
        text-transform: uppercase;
        margin-top: 5px;
    }

    a.stoerer_startseite {
        font-size: 16px;
    }
}

@media (max-width:500px) {

    a.stoerer_startseite,
    a:visited.stoerer_startseite,
    a:hover.stoerer_startseite {
        top: 180px;
    }
}

/* +++++++++++++++++++++++++ Layer und Störer Umfirmierung ANFANG +++++++++++++++++ */
section.claim {
    margin: 0px;
    background-color: transparent;
}

section.claim .content {
    padding-top: 40px;
    padding-bottom: 0px;
    margin-bottom: -50px;
}

section.claim h1 {
    text-align: center;
    font-size: clamp(20px, 4vw, 26px);
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--text);
    text-transform: none;
}

section.claim h1 span {
    color: var(--primary);
    font-family: 'Roboto Slab', serif;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2em;
    font-size: clamp(34px, 6vw, 46px);
    margin-bottom: 10px;
    display: block;
}


.stoerer_umfirmierung {
    position: absolute;
    top: 40px;
    left: -20px;
    width: 23%;
    min-width: 350px;
}

.stoerer_umfirmierung a {
    display: block;
    height: 460px;
}

.stoerer_umfirmierung img {
    width: 100%;
    transition: .3s;
}

.stoerer_umfirmierung img:hover {
    cursor: pointer;
    transform: scale(1.05);
    transition: .3s;
}

.layer {
    display: none;
    position: fixed;
    top: 40px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.layer.active {
    display: flex;
}

.layer-content {
    position: relative;
    background: white;
    padding: 20px 80px 40px;
    max-width: 900px;
    width: 80%;
    height: 80%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
}

.layer-content button {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: transparent;
    border: none;
}

.layer-content button img {
    cursor: pointer;
    float: right;
    width: 40px;
    height: auto;
}

.layer-content .sprechblase {
    display: flex;
    justify-content: center;
    margin: 0px auto;
}

.layer-content p span {
    color: var(--primary);
    font-weight: bold;
}


.layer-content .sprechblase img {
    width: 100%;
    max-width: 320px;
}

.layer-content .layer-zweispalter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 80px;
    justify-items: center;
    margin-bottom: 40px;
}

.layer-content .layer-zweispalter img {
    width: 100%;
    max-width: 240px;
    justify-self: left;
}

.layer-content .layer-zweispalter img:first-child {
    justify-self: right;
}

.layer-content img.unterschrift {
    width: 220px;
    margin-bottom: -20px;
    margin-left: -20px;
}

@media(max-width:1024px) {
    .layer-content {
        padding: 20px 40px 40px;
    }
}

@media(max-width:768px) {
    .stoerer_umfirmierung a {
        height: 350px;
    }

    .stoerer_umfirmierung {
        top: unset;
        bottom: -20px;
        left: -10px;
        width: 15%;
        min-width: 260px;
    }

    .layer-content .layer-zweispalter {
        grid-gap: 20px;
    }

    .layer-content .layer-zweispalter img {
        max-width: 200px;
    }

    .layer-content .layer-zweispalter {
        grid-template-columns: 1fr;
    }

    .layer-content .layer-zweispalter img:first-child,
    .layer-content .layer-zweispalter img {
        justify-self: center;
    }

    .layer-content {
        width: 90%;
        padding: 20px;
        margin-right:20px;
    }
}

/* +++++++++++++++++++++++++ Layer und Störer Umfirmierung ENDE +++++++++++++++++ */

.content.startseite_teaser {
    padding: 0px;
}

.teaser_startseite {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    color: var(--white);
    text-align: center;
}

.teaser_startseite a:first-child {
    padding-bottom: 40px;
}

.teaser_startseite h3 {
    color: var(--white);
    margin: 20px 40px;
    font-size: clamp(18px, 2.5vw, 32px);
    transition: .3s;
}

.teaser_startseite p {
    margin: 20px 40px;
    color: var(--white);
    text-align: center;
    line-height: 1.6em;
    transition: .3s;
}

.teaser_startseite img {
    width: 100%;
}

.teaser_startseite div.btn_light {
    margin: 20px 40px;
}

div.btn_light {
    display: inline-block;
    border: 1px solid var(--white);
    padding: 12px 20px 15px;
    margin: 50px auto;
    text-align: center;
    color: var(--white);
    font-size: 26px;
    transition: .3s;
}

.partnerlogos {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 5%;
    justify-content: center;
    align-items: center;
}

.partnerlogos img {
    width: 12%;
}

.teaser_tuerkis {
    background-color: var(--primary);
    transition: .3s;
}

.teaser_orange {
    background-color: var(--secondary);
    transition: .3s;
}

.teaser_grau {
    background-color: var(--hellgrau);
    transition: .3s;
}

.teaser_tuerkis:hover,
.teaser_orange:hover,
.teaser_grau:hover {
    background-color: var(--hellblau);
    transition: .3s;
    color: var(--primary);
}

.teaser_tuerkis:hover h3,
.teaser_orange:hover h3,
.teaser_grau:hover h3,
.teaser_tuerkis:hover p,
.teaser_orange:hover p,
.teaser_grau:hover p {
    color: var(--primary);
    transition: .3s;
}

.teaser_tuerkis:hover div.btn_light,
.teaser_orange:hover div.btn_light,
.teaser_grau:hover div.btn_light {
    background-color: var(--primary);
    border: 1px solid var(--primary);
    transition: .3s;
}

.jobs_teaser {
    display: grid;
    grid-template-columns: calc(75% - 40px) 25%;
    grid-gap: 40px;
    max-width: 1100px;
    margin: 40px auto 20px;
}

.jobs_teaser img {
    width: 100%;
    max-width: 400px;
    justify-self: center;
    border-radius: 500px;
}

.jobs_teaser h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--text);
}

.jobs_teaser h3 span {
    font-family: 'Open Sans', sans-serif;
    color: var(--primary);
}

.jobs_teaser .jobs_kennziffer {
    color: var(--primary);
    margin-top: 10px;
}

.teaser_news {
    display: grid;
    grid-template-columns: calc(33.333% - 20px) calc(33.333% - 20px) calc(33.333% - 20px);
    grid-gap: 30px;
}

.teaser_news img {
    width: 100%;
    height: auto;
}

.newsteaser h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: clamp(18px, 2.2vw, 28px);
    font-weight: 600;
    color: var(--text);
    margin-top: 0px;
}

.newsteaser {
    position: relative;
    padding-bottom: 60px;
}

.newsteaser .teaser_news_datum {
    color: var(--primary);
    margin: 20px 0px 10px;
    font-size: 16px;
}

.newsteaser .btn_tuerkis {
    position: absolute;
    bottom: 0px;
}

/* +++++++++++++++++++++++++ Für Interessierte +++++++++++++++++++++++ */

h2.ohne_banderole {
    margin: 0px auto 60px;
    padding-top: 60px;
}

.einleitung a.btn_tuerkis {
    margin: 40px auto;
    display: block;
    max-width: 360px;
    text-align: center;
}

.einleitung a.btn_tuerkis.abstand_bottom80 {
    margin-bottom: 80px;
}

#fachbereiche,
#arbeitsbereiche {
    position: absolute;
    top: -95px;
}

a.teaser_uebersicht {
    margin: 20px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    line-height: 0px;
}

.teaser_uebersicht div.bild img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.teaser_uebersicht h3 {
    font-size: 32px;
    color: var(--white);
    text-align: center;
    margin: 40px 40px 20px;
    hyphens: manual;
}

.teaser_uebersicht p {
    font-size: 20px;
    color: var(--white);
    text-align: center;
    margin: 20px 40px 20px;
}

.content.teaser {
    padding: 0px 0px 1px 0px;
}

.teaser_uebersicht .btn_light {
    margin: 40px auto;
    display: block;
    width: 100%;
    max-width: 290px;
    line-height: 1.2em;
}

.zweispalter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 40px;
}

.zweispalter h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--primary);
    margin-top: 40px;
}

.zweispalter img {
    width: 100%;
}

.fuerinteressierte {
    background-image: url('../img/background_fuerinteressierte.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 25%;
}

.einleitung.margin_bottom_0 p {
    margin-bottom: 0px;
}

.zweidrittel_eindrittel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
}

.kurzbeschreibung h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--primary);
    margin-top: 40px;
}

.marginalienbox {
    background-color: var(--hellblau);
    color: var(--headline);
    padding: 40px;
}

.marginalienbox p,
.marginalienbox ul {
    color: var(--headline);
}

.marginalienbox li {
    margin-bottom: 0px;
}

.marginalienbox h3 {
    color: var(--headline);
    font-family: 'Roboto Slab', serif;
    font-size: 26px;
}

.teaser_fachbereiche {
    position: relative;
    background-image: linear-gradient(to right, #000a 30%, transparent 50%), url('../img/interessierte_teaser_fachbereiche.jpg');
    background-position: top right;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 340px;
    margin-top: 40px;
}

.teaser_fachbereiche h3 {
    position: absolute;
    left: 40px;
    top: 40px;
    padding-right: 40px;
    max-width: 50%;
    font-family: 'Open Sans', serif;
    font-size: 38px;
    color: var(--white);
}

.teaser_fachbereiche a {
    position: absolute;
    left: 40px;
    bottom: 40px;
    background-color: var(--primary);
    color: var(--white);
    font-size: 20px;
    text-align: center;
    padding: 8px 10px 10px;
    max-width: calc(100% - 40px);
    transition: .3s;
}

.teaser_fachbereiche a:hover {
    background-color: var(--secondary);
    transition: .3s;
}

/* +++++++++++++++++++++++++ Für Unternehmen +++++++++++++++++++++++ */

p.texthighlight {
    text-transform: uppercase;
    color: var(--primary);
    font-size: 32px;
}

p.bigtext {
    font-size: 26px;
    font-weight: 600;
    color: var(--primary);
    margin-top: 40px;
}

p.bigtext a {
    font-size: 26px;
    font-weight: 600;
    color: var(--link);
}

.teaser_unternehmen_tuerkis {
    position: relative;
    background-color: var(--primary);
    padding-bottom: 80px;
}

.teaser_unternehmen_orange {
    position: relative;
    background-color: var(--secondary);
    padding-bottom: 80px;
}

.teaser_unternehmen_grau {
    position: relative;
    background-color: var(--hellgrau);
    padding-bottom: 80px;
}

.teaser_unternehmen_tuerkis a,
.teaser_unternehmen_orange a,
.teaser_unternehmen_grau a {
    color: var(--white);
    text-decoration: underline !important;
}

.teaser_unternehmen_tuerkis p,
.teaser_unternehmen_orange p,
.teaser_unternehmen_grau p {
    text-align: left;
}

.teaser_unternehmen_tuerkis a.mail,
.teaser_unternehmen_orange a.mail,
.teaser_unternehmen_grau a.mail {
    position: absolute;
    bottom: 0px;
}

.dreispalter {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 40px;
}

.dreispalter .zertifikat {
    display: grid;
    grid-template-rows: 275px auto 66px;
    justify-items: center;
    margin-bottom: 60px;
}

.dreispalter p {
    font-size: 16px;
    text-align: center;
    margin-bottom: 0px;
}

.dreispalter img {
    width: 100%;
    max-width: 200px;
    border: 1px solid #ddd;
}

/* +++++++++++++++++++++++++ Team +++++++++++++++++++++++ */

.mitarbeiterraster {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-column-gap: 40px;
}

.mitarbeiterraster .mitarbeiter {
    max-width: 280px;
    display: grid;
    grid-template-rows: 240px 50px 120px;
    grid-row-gap: 10px;
    justify-items: center;
    margin: 40px 0px 0px;
    background-color: var(--hellblau);
}

.mitarbeiterraster .mitarbeiter.zitat_aktiv {
    grid-template-rows: 240px 50px 120px 48px auto;
}

.mitarbeiterraster.einzeilig .mitarbeiter {
    grid-template-rows: 240px 50px 50px;
}

.mitarbeiterraster.einzeilig .mitarbeiter.zitat_aktiv {
    grid-template-rows: 240px 50px 50px 48px auto;
}

.mitarbeiterraster.zweizeilig .mitarbeiter {
    grid-template-rows: 240px 50px 70px;
}

.mitarbeiterraster.zweizeilig .mitarbeiter.zitat_aktiv {
    grid-template-rows: 240px 50px 70px 48px auto;
}

.mitarbeiterraster.dreizeilig .mitarbeiter {
    grid-template-rows: 240px 50px 100px;
}

.mitarbeiterraster.dreizeilig .mitarbeiter.zitat_aktiv {
    grid-template-rows: 240px 50px 100px 48px auto;
}

h3.kategorie_mitarbeiter {
    font-size: 32px;
    color: var(--headline);
    text-align: center;
}

.mitarbeiter img {
    width: 100%;
    max-width: 280px;
    height: auto;
    max-height: 280px;
    padding: 40px 40px 0px 40px;
}

h3.mitarbeitername {
    padding: 0px 10px 0px;
    align-self: center;
    text-align: center
}

p.position {
    color: var(--primary);
    margin: 0px;
    padding: 0px 10px;
    text-align: center;
}

.mitarbeiter a.motivation {
    display: none;
}

.mitarbeiter.zitat_aktiv a.motivation {
    display: block;
    padding: 3px 10px 5px;
    margin-bottom: 20px;
    height: 38px;
    background-color: var(--primary);
    color: var(--white);
    transition: .3s;
}

.mitarbeiter.zitat_aktiv a.motivation:hover {
    cursor: pointer;
    background-color: var(--secondary);
    color: var(--white);
    transition: .3s;
}

div.zitat {
    font-style: italic;
    position: relative;
    width: 100%;
    height: auto;
    background-color: var(--white);
}

div.zitat p {
    font-size: 16px;
    display: none;
    padding: 0px 30px 20px;
    margin-top: 0px;
}

div.zitat.active p {
    display: block;
    background-color: var(--hellblau);
}

div.zitat p span {
    content: '“';
    font-family: 'Roboto Slab', serif;
    font-size: 20px;
    color: var(--primary);
    padding-right: 2px;
    line-height: 1.2em;
}

div.zitat p span:nth-child(2) {
    margin-left: 0px;
}

h2.ohne_banderole.mitarbeitersektion {
    margin-bottom: 0px;
}

.beratungsteam_bg {
    background-color: var(--hellblau);
}

.beratungsteam_bg .mitarbeiterraster .mitarbeiter {
    background-color: var(--white);
}

.beratungsteam_bg div.zitat {
    background-color: var(--hellblau);
}

.beratungsteam_bg div.zitat.active p {
    display: block;
    background-color: var(--white);
}

#anker_beratungsteam {
    margin-top: -120px;
    margin-bottom: 160px;
}

a.kontaktbutton {
    display: block;
    padding: 3px 10px 5px;
    margin: 40px auto 0px;
    height: 38px;
    width: 100%;
    max-width: 320px;
    background-color: var(--primary);
    color: var(--white);
    text-align: center;
    transition: .3s;
}

a.kontaktbutton:hover {
    cursor: pointer;
    background-color: var(--secondary);
    color: var(--white);
    transition: .3s;
}

/* +++++++++++++++++++++++++ Jobs +++++++++++++++++++++++ */

.jobs {
    position: relative;
}

#job_sprungmarke_all {
    position: absolute;
    top: -100px;
}

h3.hl_jobangebot a {
    text-align: left;
    color: var(--primary);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.2em;
    cursor: pointer;
    display: block;
    padding: 20px 0px;
    border-top: 1px solid var(--primary);
    transition: .3s;
}

h3.hl_jobangebot a:hover {
    color: var(--link);
    transition: .3s;
}

.jobs_kennziffer {
    color: var(--primary);
    margin-top: 0px;
}

p.infokasten_jobs {
    background-color: var(--hellblau);
    padding: 20px 40px;
    margin: 0px;
}

p.infokasten_jobs a {
    color: var(--primary) !important;
    text-decoration: underline !important;
}

p.jobs_small_font {
    font-size: 13px;
}

.jobs hr {
    width: 100%;
    margin: 40px 0px;
    height: 2px;
}

.jobs_trenner {
    border-top: 1px solid var(--primary);
}

/* +++++++++++++++++++++++++ News +++++++++++++++++++++++ */
.keyvisual.news_single {
    height: 300px;
}

.news_uebersicht_grid {
    display: grid;
    grid-template-columns: calc(33.333% - 20px) calc(33.333% - 20px) calc(33.333% - 20px);
    grid-column-gap: 30px;
    grid-row-gap: 80px;
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.news_uebersicht_grid article {
    position: relative;
    padding-bottom: 60px;
}

.news_uebersicht_grid article a {
    position: absolute;
    bottom: 0px;
}

.news_uebersicht_grid img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.news_date {
    margin-top: 0px;
    font-size: 16px;
    color: var(--primary);
}

.news_aufmacher h1,
h1.hl_news {
    font-size: 38px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    color: var(--primary);
    text-align: center;
    line-height: 1.3em;
}

.news_aufmacher h1 {
    margin-top: 60px;
}

.news_aufmacher h2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--primary);
    text-align: left;
    margin-top: 40px;
}

.news_aufmacher h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    margin-top: 40px;
}

.news_aufmacher img {
    margin-top: 20px;
}

/* +++++++++++++++++++++++++ Magazin Pulsschlag +++++++++++++++++++++++ */

.magazin_uebersicht_grid div.artikel_grid {
    display: grid;
    grid-template-columns: calc(40% - 30px) calc(60% - 30px);
    grid-gap: 60px;
    margin-bottom: 100px;
    padding-bottom: 0px;
}

.magazin_uebersicht_grid img {
    width: 100%;
    height: auto;
}

.magazin_uebersicht_grid ul li {
    margin-bottom: 2px;
}

.magazin_uebersicht_grid hr {
    width: 100%;
    height: 2px;
    margin-top: 0px;
}

.magazin_uebersicht_grid hr:last-child {
    display: none;
}

/* +++++++++++++++++++++++++ Blog +++++++++++++++++++++++ */

.blog_uebersicht_grid {
    display: grid;
    grid-template-columns: calc(40% - 20px) calc(60% - 20px);
    grid-gap: 40px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 3px solid var(--primary);
}

.blog_uebersicht_grid:last-child {
    border-bottom: 0px solid var(--primary);
    margin-bottom: 0px;
}

.blog_uebersicht_bild {
    margin-top: 5px;
}

.blog_uebersicht_bild img {
    width: 100%;
    height: auto;
}

.blog_date {
    margin-top: 5px;
    font-size: 16px;
    color: var(--primary);
}

.single_blog img {
    margin-top: 25px;
}


/* +++++++++++++++++++++++++ Kontakt +++++++++++++++++++++++ */

.wpforms-one-half {
    width: 100% !important;
    max-width: calc(50% - 10px) !important;
    ;
    float: left !important;
}

.wpforms-one-half input,
textarea {
    width: 100% !important;
    max-width: calc(100% - 40px) !important;
}

.wpforms-submit.btn_tuerkis {
    display: inline-block !important;
    font-size: 20px !important;
    color: var(--white) !important;
    padding: 8px 40px 10px !important;
    background-color: var(--primary) !important;
    margin-top: 0px !important;
    transition: .3s !important;
}

.wpforms-submit.btn_tuerkis:hover {
    background-color: var(--secondary) !important;
    transition: .3s !important;
}

/* +++++++++++++++++++++++++ Instagram Linkseite +++++++++++++++++++++++ */

#wrapper.instagram_linkseite {
    margin-top: 160px;
}

.instagram_linkseite figure {
    margin: 0px !important;
}

.instagram_linkseite .wp-block-columns {
    gap: 10px !important;
    margin: 0px !important;
    border-bottom: 1px solid var(--hellblau);
    border-top: 1px solid var(--hellblau);
}

.instagram_linkseite .wp-block-columns p {
    margin: 10px;
}

.instagram_linkseite .wp-block-columns a {
    color: var(--primary) !important;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++ footer +++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

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

.grid_footer {
    display: flex;
    grid-gap: 100px;
    max-width: 1440px;
    margin: auto;
    padding: 0px;
    flex-wrap: wrap;
    justify-content: center;
}

.grid_footer p,
.grid_footer a {
    color: var(--hellblau);
    font-size: 20px;
    line-height: 1.6em;
    transition: .3s;
}

.grid_footer a:hover {
    color: var(--link);
    transition: .3s;
}

.footer_sm {
    display: grid;
    grid-template-columns: 80px 80px;
    grid-gap: 20px;
    justify-items: center;
    margin-top: 40px;
    justify-content: center;
}

.footer_sm a:hover {
    opacity: .5;
    transition: .3s;
}

.servicenavi a {
    font-size: 18px;
    text-decoration: none;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++ Media Query ++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

@media(max-width:1440px) {
    .logo {
        margin-bottom: 0px;
        max-width: 180px;
    }

    .logo img {
        padding: 10px;
    }

    nav .content {
        grid-template-columns: 180px 1fr;
    }
}


/* +++++++++++++++++++++ 1200px  ++++++++++++++++++++++ */

@media(max-width:1200px) {
    .teaser_startseite.unternehmen {
        grid-template-columns: 1fr 1fr;

    }

    .grid_footer p,
    .grid_footer a {
        font-size: 18px;
    }

    .footer_rights {
        grid-gap: 10px;
    }
}

/* +++++++++++++++++++++ 1024px  ++++++++++++++++++++++ */

@media(max-width:1024px) {

    .content {
        padding: 20px;
    }

    p,
    ul,
    ol {
        font-size: 18px;
    }

    .jobs_teaser h3 {
        font-size: clamp(18px, 3.5vw, 28px);
    }

    .einleitung h2 {
        font-size: 34px;
        margin-top: 40px;
    }

    .einleitung p {
        font-size: 22px;
    }

    .banderole {
        left: -21px;
        width: calc(100% + 71px);
    }

    .banderole h2 {
        font-size: 34px;
        padding: 20px;
    }

    .teaser_startseite h3 {
        margin: 20px;
    }

    .teaser_startseite p {
        margin: 20px;
    }

    .teaser_startseite div.btn_light {
        margin: 20px 20px 20px 20px;
    }

    .jobs_teaser,
    .teaser_news {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    div.btn_light {
        padding: 8px 10px 11px;
        font-size: 22px;
    }

    a.teaser_uebersicht {
        margin: 20px;
    }

    .einleitung p.einleitung-erweitert {
        font-size: 18px;
    }

    .fuerinteressierte {
        background-size: 40%;
    }

    .zweidrittel_eindrittel {
        grid-template-columns: 1fr 1fr;
    }

    .marginalienbox {
        padding: 20px;
    }

    .teaser_fachbereiche h3 {
        left: 20px;
        top: 20px;
        font-size: 34px;
    }

    .teaser_fachbereiche a {
        left: 20px;
        bottom: 20px;
    }

    .keyvisual.budget_fuer_arbeit {
        background-position: right -350px center;
    }

    .dreispalter {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* +++++++++++++++++++++ 890px  ++++++++++++++++++++++ */

@media(max-width:890px) {
    a.teaser_uebersicht {
        grid-template-columns: 1fr;
    }

    .grid_footer {
        grid-gap: 40px;
    }

    .footer_rights {
        display: block;
    }

    .footer_rights p {
        text-align: left;
    }

    .footer_sm {
        margin-top: 40px;
    }
}

/* +++++++++++++++++++++ 768px  ++++++++++++++++++++++ */

@media(max-width:768px) {
    #wrapper {
        padding: 0px 20px;
    }

    section {
        margin: 70px auto;
    }

    .mobile_margin_top_0 {
        margin-top: 0px !important;
    }

    .mobile.padding_top_40 {
        padding-top: 20px !important;
    }

    section.breadcrumb p {
        font-size: 14px;
        padding: 20px 20px 0px;
    }

    .logo {
        margin-left: 0px;
    }

    .headlines_keyvisual {
        left: -14px;
    }

    .headline_keyvisual {
        padding: 12px 20px 15px;
    }

    .subheadline_keyvisual {
        padding: 12px 20px 15px;
    }

    .headline_keyvisual h1::after {
        left: 0px;
        bottom: -7px;
        width: 14px;
        height: 7px;
    }

    .subheadline_keyvisual {
        margin-top: 10px;
    }

    .subheadline_keyvisual h2::after {
        left: 0px;
        bottom: -7px;
        width: 14px;
        height: 7px;
    }

    .banderole {
        width: calc(100% + 50px);
    }

    .banderole::after {
        bottom: -7px;
        width: 10px;
        height: 7px;
        background-image: linear-gradient(160deg, #004C58 40%, var(--hellblau) 50%);
    }

    .banderole h2 {
        font-size: 28px;
        hyphens: manual;
    }

    .teaser_startseite {
        grid-template-columns: 1fr;
    }

    .jobs_teaser {
        grid-template-columns: 1fr;
    }

    .jobs_teaser img {
        grid-row: 1 / 2;
    }

    .teaser_news {
        grid-template-columns: 1fr;
        grid-gap: 70px;
    }

    h2.ohne_banderole {
        font-size: 32px;
    }

    .teaser_uebersicht div.bild {
        grid-row: 1 / 2;
    }

    .teaser_uebersicht h3 {
        font-size: 28px;
        margin: 20px;
    }

    .teaser_uebersicht p {
        margin: 20px;
    }

    .teaser_uebersicht .btn_light {
        font-size: 18px;
        max-width: 220px;
    }

    .zweispalter {
        grid-template-columns: 1fr;
    }

    .fuerinteressierte {
        background-size: 60%;
    }

    .zweidrittel_eindrittel {
        grid-template-columns: 1fr;
        grid-gap: 20px;
    }

    .teaser_fachbereiche h3 {
        max-width: 100%;
        font-size: clamp(30px, 8vw, 42px);
        padding-right: 20px;
    }

    .teaser_fachbereiche {
        margin-top: 40px;
        background-image: linear-gradient(to right, #0007 0%, #0007 100%), url('../img/interessierte_teaser_fachbereiche');
        background-position: top center;
    }

    p.infokasten_jobs {
        padding: 20px;
    }

    h3.hl_jobangebot a {
        font-size: 24px;
    }

    .teaser_startseite.unternehmen {
        grid-template-columns: 1fr;

    }

    .news_uebersicht_grid {
        grid-template-columns: 1fr;
        grid-gap: 60px;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }

    .hl_news {
        height: auto;
    }

    .news_uebersicht_grid img {

        margin-bottom: 20px;
    }

    .blog_uebersicht_grid {
        grid-template-columns: 1fr;
    }

    .single_blog figure {
        margin: 0px;
    }

    h3.kategorie_mitarbeiter {
        font-size: 24px;
    }

    .wpforms-one-half,
    .wpforms-container .wpforms-field.wpforms-one-half {
        max-width: 100% !important;
        float: none !important;
        margin-left: 0px !important;
    }

    .wpforms-one-half input,
    textarea {
        max-width: 100% !important;
    }

    .partnerlogos {
        display: flex;
        flex-wrap: wrap;
        grid-gap: 3%;
        justify-content: center;
        align-items: center;
    }

    .partnerlogos img {
        width: 30%;
    }

    .magazin_uebersicht_grid div.artikel_grid {
        grid-template-columns: 1fr;
        grid-gap: 0px;
        margin-bottom: 60px;
    }

    .magazin_uebersicht_grid hr {
        margin-bottom: 60px;
    }

    .news_date {
        margin-top: 20px;
        margin-bottom: 5px;
    }

    .dreispalter {
        grid-template-columns: 1fr;
        grid-gap: 20px;
    }

    .grid_footer {
        display: block;
    }
}


/* -------------------------------------------------------------------*/
/* ---------------------- BARRIEREFREIHEIT ---------------------------*/
/* -------------------------------------------------------------------*/
body.barrierefrei {
    --primary: #000;
    --secondary: #333;
    --akzent: #333;
    --hellgrau: #000;
    --hellblau: #fff;
    --link: #000;
    --text: #000;
    --headline: #000;
    --trenner: #000;
    --footer: #000;
    --white: #FFF;
}

.servicenavi div#kontrast:focus-within,
.servicenavi div#beratungsteam:focus-within,
.servicenavi div#phone:focus-within,
.servicenavi div#kontaktformular:focus-within {
    right: 0px;
}

a:focus-visible {
    outline: 2px solid blue !important;
    outline-offset: -2px;
}

.servicenavi div:focus-within a:focus-visible {
    outline: none;
    /* Link selbst ohne Fokus */
}

.servicenavi div:focus-within:has(a:focus-visible) {
    outline: 2px solid blue !important;
}

/* Schriftgröße verändert (per JS wurde .large-font gesetzt) */
html.large-font * {
    font-size: clamp(14px, 3vw, 17px) !important;
    hyphens: auto !important;
}

html.large-font #kontrast,
html.large-font #kontaktformular,
html.large-font #phone,
html.large-font #beratungsteam {
    align-items: start;
    width: 330px;
    right: -270px;
}

html.large-font #kontrast.active,
html.large-font #kontaktformular.active,
html.large-font #phone.active,
html.large-font #beratungsteam.active {
    right: 0px;
}

html.large-font #kontrast a,
html.large-font #kontaktformula a,
html.large-font #phone a,
html.large-font #beratungsteam a {
    align-items: start;
    font-size: 14px !important;
}

html.large-font a.stoerer_startseite {
    display: none;
}

html.large-font .headline_keyvisual h1,
html.large-font .subheadline_keyvisual h2 {
    font-size: clamp(16px, 3vw, 20px);
    hyphens: none !important;
}

html.large-font .mitarbeiter {
    grid-template-rows: auto auto auto !important;
}

@media(max-width:768px) {

    html.large-font .headline_keyvisual h1,
    html.large-font .subheadline_keyvisual h2 {
        font-size: 14px !important;
        hyphens: manual !important;

    }

    html.large-font .teaser_fachbereiche {
        display: none;
    }
}