/* +++++++++++++++++ Content +++++++++++++++++ */

.keyvisual {
    position: relative;
    margin: 0;
    height: calc(100vh - 268px);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.keyvisual_headline {
    position: absolute;
    bottom: calc(50%);
    left: calc(50%);
    transform: translate(-50%, 50%);
    width: 80%;
    max-width: 1055px;
    padding: 40px 40px 50px;
    margin: auto;
    background-color: var(--white);
    border-radius: 12px;
}

.keyvisual_headline p.breadcrumb {
    margin: 0px auto 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: var(--gruen);
}

hr.gruener_trenner {
    border: none;
    height: 10px;
    width: 150px;
    margin: 30px auto 80px;
    background: var(--gruen);
}

hr.tuerkiser_trenner {
    border: none;
    height: 10px;
    width: 150px;
    margin: 0px auto 80px;
    background: var(--tuerkis);
}

p.einleitung {
    font-family: "Hind", sans-serif;
    font-weight: 400;
    font-size: 26px;
    color: var(--tuerkis);
    margin: 1em auto 0em;
    text-align: center;
    line-height: 1.6em;
    max-width: 1055px;
}

/* +++++++++++++++++ Home +++++++++++++++++ */

.keyvisual.home {
    background-image: url(../img/keyvisual_home.jpg);
}

.keyvisual.news {
    background-image: url(../img/keyvisual_news.jpg);
}

.keyvisual.wirtschaftsfoerderung {
    background-image: url(../img/keyvisual_wirtschaftsfoerderung.jpg);
}

.keyvisual.hochbau {
    background-image: url(../img/keyvisual_hochbau.jpg);
}

.keyvisual.stadtentwicklung {
    background-image: url(../img/keyvisual_stadtentwicklung.jpg);
}

.keyvisual.historie {
    background-image: url(../img/keyvisual_historie.jpg);
}

.keyvisual.immobilienangebote {
    background-image: url(../img/keyvisual_immobilienangebote.jpg);
}

.keyvisual.norderstedt {
    background-image: url(../img/keyvisual_norderstedt.jpg);
}

.keyvisual.egno {
    background-image: url(../img/keyvisual_egno.jpg);
    background-position: top center;
}

.keyvisual.impressum {
    background-image: url(../img/keyvisual_impressum.jpg);
}

.keyvisual.datenschutz {
    background-image: url(../img/keyvisual_datenschutz.jpg);
}

.keyvisual.campus_glashuette {
    background-image: url(../img/keyvisual_campus_glashuette.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    background-size: contain;
}

.keyvisual.bildungshaus_norderstedt {
    background-image: url(../img/keyvisual_bildungshaus_norderstedt.jpg),
        linear-gradient(var(--hellgrau), var(--hellgrau));
    background-size: contain;
}

.keyvisual.grundschule_aurikelstieg {
    background-image: url(../img/keyvisual_grundschule_aurikelstieg.jpg),
        linear-gradient(var(--hellgrau), var(--hellgrau));
    background-size: contain;
}

.slider {
    width: calc(100% - 110px);
    max-width: 1076px;
    margin: 40px auto;
    padding-bottom: 40px;
}

.slick-prev,
.slick-next {
    top: calc(50% - 40px) !important;
}

.slick-prev::before,
.slick-next::before {
    content: "" !important;
    background-image: url(../img/sliderpfeil.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 30px;
    height: 75px;
    display: block;
    margin-left: -30px;
}

.slick-next::before {
    transform: rotate(180deg);
    margin-left: 20px;
}

.slick-dots li.slick-active button::before {
    opacity: 0.75;
    color: var(--tuerkis);
}

.slick-dots li button::before {
    width: 30px;
    height: 10px;
    content: "";
    background-color: var(--tuerkis);
    margin: 2px;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 10px;
    margin: 0 2px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    width: 30px;
    height: 10px;
}

.slick-slide {
    padding: 0px 10px;
    height: auto;
}

.slick-slide img {
    width: 100%;
}

.slider h3 {
    font-size: 28px;
    color: var(--text);
    text-transform: uppercase;
    margin: 40px 0px 0px;
    text-align: left;
    hyphens: manual;
}

.slider p.slider_date {
    color: var(--gruen);
    font-weight: 400;
    margin-top: 0px;
    margin-bottom: 30px;
}

.slider a,
.slider a:visited,
.slider a:hover,
.slider a:focus {
    font-weight: 600;
    color: var(--tuerkis);
    padding-left: 20px;
    background-image: url(../img/mehrpfeil);
    background-position: center left;
    background-repeat: no-repeat;
    text-transform: uppercase;
    margin-top: -10px;
    display: block;
}

.slider.veranstaltungen .slick-slide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
}

.slider.veranstaltungen h3 {
    margin: -5px 0px 0px;
}

.startseite_partner {
    display: flex;
    flex-wrap: wrap;
    grid-column-gap: 40px;
    grid-row-gap: 0px;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.startseite_partner img {
    width: 25%;
    min-width: 180px;
    max-width: 220px;
}

/* +++++++++++++++++ Wirtschaftsfoerderung +++++++++++++++++ */

.sprungmarke {
    position: absolute;
    top: -160px;
}

.grau .sprungmarke {
    top: -80px;
}

p.supheadline {
    color: var(--gruen);
    font-family: "Hind", sans-serif;
    font-weight: 300;
    font-size: 28px;
    text-transform: uppercase;
    text-align: center;
}

img.ganze_breite {
    display: block;
    width: 100%;
    margin-bottom: 40px;
}

.zweispalter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
    max-width: 1055px;
    margin: auto;
}

.wirtschaftsfoerderung_kontaktteaser p.kontaktauffoerderung {
    font-family: "Hind", sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--tuerkis);
    padding: 20px 0px 0px;
    border-top: 2px solid var(--tuerkis);
}

a.button_tuerkis {
    padding: 10px;
    background-color: var(--tuerkis);
    width: 100%;
    max-width: 490px;
    color: var(--white) !important;
    display: grid;
    justify-content: center;
    align-content: center;
    margin: auto;
    transition: 0.3s;
}

a.button_tuerkis:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: 0.3s;
}

.button_tuerkis p {
    font-family: "Hind", sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.2em;
    text-transform: uppercase;
    color: var(--white);
    margin: 2px auto 0px;
}

.button_tuerkis.telefon p {
    display: inline;
    line-height: 40px;
}

.button_tuerkis img {
    margin-right: 10px;
    margin-top: 3px;
    float: left;
}

.einspalter {
    max-width: 1055px;
    margin: 40px auto;
}

p.kategorie_headline {
    max-width: 1055px;
    margin: 60px auto 0px;
    font-family: "Hind", sans-serif;
    font-size: 28px;
    color: var(--gruen);
    text-transform: uppercase;
}

.grid_ansprechpartner {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 3vw;
    justify-content: center;
}

.ansprechpartner {
    position: relative;
    flex-basis: calc(33.33% - 40px);
    margin-bottom: 40px;
    text-align: center;
}

.ansprechpartner img {
    width: 340px;
    border-bottom: 6px solid var(--tuerkis);
}

.ansprechpartner p,
.ansprechpartner a {
    text-align: center;
    margin: 5px auto;
}

.ansprechpartner p.name_ansprechpartner {
    font-family: "Hind", sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: var(--tuerkis);
    margin: 20px auto 20px;
    text-align: center;
    line-height: 1.4em;
    text-transform: uppercase;
}

.ansprechpartner p.position_ansprechpartner {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    hyphens: manual;
}

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

.iconteaser {
    display: grid;
    justify-items: center;
    align-content: flex-start;
    flex-basis: 30%;
    margin-bottom: 40px;
}

.iconteaser img {
    width: 162px;
    height: 162px;
    margin: auto;
}

.iconteaser p {
    text-align: center;
    margin: 0px;
}

.iconteaser p.iconteaser_headline {
    font-family: "Hind", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2em;
    text-transform: uppercase;
    margin-top: 20px;
}

.iconteaser p.iconteaser_headline_zahlen {
    font-family: "Hind", sans-serif;
    font-size: 54px;
    font-weight: 700;
    color: var(--tuerkis);
    line-height: 0.86em;
    margin-top: 30px;
}

.iconteaser p.iconteaser_zahlen_text {
    font-family: "Hind", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
}

.content.zweispalter {
    justify-items: center;
}

.kreisdiagramm {
    width: 100%;
    max-width: 600px;
    margin-top: -20px;
}

.dreispalter {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 60px;
}

.dreispalter p {
    hyphens: manual;
}

.dreispalter .referenz img,
.zweispalter.referenz img {
    width: 100%;
    border-bottom: 6px solid var(--tuerkis);
}

.dreispalter .referenz p.referenz_headline,
.zweispalter.referenz p.referenz_headline {
    font-family: "Hind", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--tuerkis);
    text-transform: uppercase;
    margin-bottom: 0px;
}

.zweispalter.referenz {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 40px;
    margin: auto;
    margin-bottom: 80px;
    max-width: 100%;
}

.zweispalter.referenz p.referenz_headline {
    margin-top: -8px;
}

p.blockheadline {
    font-family: "Hind", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2em;
    color: var(--tuerkis);
    text-transform: uppercase;
    margin-top: -5px;
}

p.text_tuerkis {
    color: var(--tuerkis);
}

.button_tuerkis.breit {
    max-width: 100%;
}

p.text_center {
    text-align: center;
    max-width: 1055px;
    margin: auto;
}

.historie_jahreszahl {
    font-family: "Hind", sans-serif;
    font-size: 60px;
    font-weight: 700;
    color: var(--gruen);
    margin-top: 7px;
    margin-bottom: 20px;
    line-height: 0.6em;
}

.teaser_karriere_text {
    font-family: "Hind", sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--tuerkis);
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2em;
    max-width: 490px;
}

section.grau .content.karriereteaser {
    padding: 0px 40px;
    height: 360px;
    grid-gap: 0px;
    background-image: linear-gradient(-90deg, var(--hellgrau) 50%, transparent 70%), url("../img/teaser_karriere.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 40px center;
}

section.grau .content.karriereteaser img {
    display: none;
}

section.grau .content.karriereteaser div {
    object-fit: cover;
    overflow: hidden;
}

.karriereteaser img {
    width: 100%;
}

.karriereteaser_text {
    display: grid;
    justify-content: center;
    align-content: center;
}

.aktuelle_projekte {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
}

.aktuelle_projekte p {
    font-family: "Hind", sans-serif;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2em;
}

.aktuelle_projekte img {
    width: 100%;
}

a.zur_projektseite {
    font-weight: 600;
    color: var(--tuerkis);
    padding-left: 20px;
    background-image: url(../img/mehrpfeil);
    background-position: center left;
    background-repeat: no-repeat;
    text-transform: uppercase;
    margin-top: -10px;
    display: block;
}

p.eckdaten {
    font-family: "Hind", sans-serif;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2em;
    color: var(--tuerkis);
    max-width: 1055px;
    margin: auto;
    margin-bottom: 40px;
}

.eckdaten_tabellarisch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 80px;
    grid-row-gap: 40px;
    max-width: 1055px;
    margin: auto;
}

.eckdaten_tabellarisch_einzeln:nth-child(1),
.eckdaten_tabellarisch_einzeln:nth-child(2) {
    padding-bottom: 40px;
    border-bottom: 2px solid var(--gruen);
}

p.eckdaten_tabellarisch_beschreibung {
    color: var(--tuerkis);
    margin-bottom: 0px;
    font-weight: 700;
    font-size: 24px;
}

p.eckdaten_tabellarisch_werte {
    margin-top: 0px;
}

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

.grid_taetigkeitsfelder .iconteaser {
    flex-basis: 46%;
}

.news section:nth-child(odd) {
    background-color: var(--hellgrau);
}

.news section .content {
    padding: 60px 40px;
}

.news section:nth-child(even) .content {
    padding: 0px 40px;
}

.has-small-font-size {
    margin-top: 0px;
}

@media (min-width: 768px) {
    .news section:nth-child(even) .content div {
        grid-row: 1 / -1;
    }
}

.zweispalter.news {
    grid-gap: 60px;
    max-width: 1280px;
}

.news .news_datum {
    color: var(--gruen);
    font-weight: 600;
    margin-top: -5px;
    margin-bottom: 5px;
}

.news .news_headline {
    font-family: "Hind", sans-serif;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2em;
    color: var(--tuerkis);
    margin-top: 0px;
    margin-bottom: 20px;
}

.news_mehr {
    font-weight: 600;
    color: var(--tuerkis);
    padding-left: 20px;
    background-image: url(../img/mehrpfeil);
    background-position: center left;
    background-repeat: no-repeat;
    text-transform: uppercase;
    margin-top: -10px;
    display: block;
}

#newsstart {
    position: absolute;
    top: -80px;
}

.news.single section {
    background-color: var(--white);
}

.news.single section .content {
    padding: 0px 40px;
}

.news.single h1 {
    text-align: left;
    margin-top: 20px;
    margin-bottom: 0em;
}

.news.single h2,
.news.single h3,
.news.single h4 {
    text-align: left;
    margin-top: 1em;
    margin-bottom: 0em;
}

.news.single img {
    width: 100%;
    margin-top: 8px;
    margin-bottom: 1em;
}

.news.single ul {
    margin-left: 15px;
}

.karte_norderstedt {
    display: grid;
    justify-items: center;
}

.karte_norderstedt img {
    width: 100%;
    max-width: 990px;
}

/* +++++++++++++++ Frederikspark +++++++++++++++ */

.frederikspark nav .content .servicenavi {
    color: var(--tuerkis);
}

.frederikspark nav .naviheader {
    background-color: var(--white);
}

.frederikspark nav .content .servicenavi .btn_schriftgroesse,
.frederikspark nav .content .servicenavi .btn_kontrast,
.frederikspark nav .content .servicenavi .btn_telefon,
.frederikspark nav .content .servicenavi .btn_email {
    border: 2px solid var(--tuerkis);
    border-top: none;
    box-shadow: 0px 3px 5px #0003;
}

.frederikspark .keyvisual {
    background-image: url(../img/keyvisual_frederikspark.jpg);
}

.logo_frederikspark {
    display: flex;
    justify-content: center;
}

.logo_frederikspark img {
    max-width: 380px;
    margin: 10px auto 20px;
}

.frederikspark img.lage {
    width: 100%;
    max-width: 300px;
}

.frederikspark .lage01,
.frederikspark .lage04 {
    justify-self: center;
}

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

.frederikspark_unternehmen div {
    margin-bottom: -20px;
}

.frederikspark_unternehmen p,
p.frederikspark_uvm {
    text-align: center;
    font-family: "Hind";
    font-weight: 700;
    line-height: 1.1em;
    text-transform: uppercase;
}

.slider div a {
    cursor: pointer;
}

.luftansicht img {
    width: 100%;
    transition: 0.3s;
}

.luftansicht a:hover img {
    box-shadow: 3px 3px 5px #0007;
    margin-top: -5px;
    margin-bottom: 5px;
    margin-left: 5px;
    transition: 0.3s;
}

.luftansicht p {
    text-align: center;
    text-transform: uppercase;
}

.textalign_left {
    text-align: left;
}

ul {
    list-style-type: disc;
    margin-left: 20px;
}

.keyvisual.frederikspark_B-284 {
    background-image: url(../img/FRED-880x420-F1.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    background-size: cover;
    height: 420px;
    margin: 4px;
}

.keyvisual.frederikspark_B-255 {
    background-image: url(../img/FRED-880x420-F2.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    background-size: cover;
    height: 420px;
    margin: 4px;
}

.keyvisual.frederikspark_B-255_2 {
    background-image: url(../img/FRED-880x420-F3.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    background-size: cover;
    height: 420px;
    margin: 4px;
}

.keyvisual.frederikspark_B-256 {
    background-image: url(../img/FRED-880x420-F5.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    background-size: cover;
    height: 420px;
    margin: 4px;
}

.layer .keyvisual_headline {
    left: calc(50% - 385px);
    width: 765px;
}

.layer .keyvisual_headline h1 {
    font-size: 32px;
    margin-top: 10px;
}

.zweispalter.pdf-downloads {
    max-width: 880px;
}

.pdf-download {
    justify-self: center;
}

.pdf-download a {
    display: grid;
    justify-items: center;
}

.pdf-download img {
    width: 100%;
    max-width: 260px;
    border: 1px solid var(--tuerkis);
    box-shadow: 0px 0px 5px #0003;
    transition: 0.3s;
}

.pdf-download a:hover img {
    box-shadow: 5px 5px 12px #0006;
    margin-top: -5px;
    margin-left: 5px;
    margin-bottom: 5px;
    transition: 0.3s;
}

.pdf-download p {
    text-align: center;
}

#fp_b284,
#fp_b255,
#fp_b255_2,
#fp_b256,
#flaeche1,
#flaeche4,
#flaeche5,
#flaeche6 {
    display: none;
}

#fp_b284.active,
#fp_b255.active,
#fp_b255_2.active,
#fp_b256.active,
#flaeche1.active,
#flaeche4.active,
#flaeche5.active,
#flaeche6.active {
    display: block;
}

.layer {
    position: fixed;
    top: 0px;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: #000c;
}

.layer_inside {
    position: relative;
    width: 90vw;
    max-width: 900px;
    height: 90vh;
    margin: 40px auto 40px;
    overflow-y: scroll;
    background-color: var(--white);
    box-shadow: 0px 0px 15px #000;
}

.closelayer {
    position: absolute;
    z-index: 1000;
    top: 10px;
    right: 10px;
    width: 50px;
    background-color: var(--tuerkis);
    border-radius: 50px;
    padding: 3px;
    line-height: 0px;
    cursor: pointer;
    transition: 0.3s;
}

.closelayer:hover {
    background-color: var(--gruen);
}

#bodycontainer {
    overflow: auto;
}

#bodycontainer.active {
    overflow: hidden;
}

.schliessenbtn {
    display: flex;
    justify-items: center;
    margin-top: 40px;
}

.schliessenbtn a {
    text-align: center;
    padding: 5px 20px;
    background-color: var(--tuerkis);
    border-radius: 12px;
    color: var(--white);
    margin: auto;
    cursor: pointer;
    transition: 0.3s;
}

.schliessenbtn a:hover {
    background-color: var(--gruen);
    transition: 0.3s;
}

/* +++++++++++++++ Nordport +++++++++++++++ */

.nordport .keyvisual {
    background-image: url(../img/keyvisual_nordport.jpg);
}

.logo_nordport {
    display: flex;
    justify-content: center;
}

.logo_nordport img {
    max-width: 200px;
    margin: 0px auto 20px;
}

.keyvisual.nordport_f1 {
    background-image: url(../img/NORD-880x420-F1.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    background-size: cover;
    height: 420px;
    margin: 4px;
}

.keyvisual.nordport_f4 {
    background-image: url(../img/NORD-880x420-F4.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    background-size: cover;
    height: 420px;
    margin: 4px;
}

.keyvisual.nordport_f5 {
    background-image: url(../img/NORD-880x420-F5.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    background-size: cover;
    height: 420px;
    margin: 4px;
}

.keyvisual.nordport_f6 {
    background-image: url(../img/NORD-880x420-F6.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    background-size: cover;
    height: 420px;
    margin: 4px;
}

.nordport nav .content .servicenavi {
    color: var(--tuerkis);
}

.nordport nav .naviheader {
    background-color: var(--white);
}

.nordport nav .content .servicenavi .btn_schriftgroesse,
.nordport nav .content .servicenavi .btn_kontrast,
.nordport nav .content .servicenavi .btn_telefon,
.nordport nav .content .servicenavi .btn_email {
    border: 2px solid var(--tuerkis);
    border-top: none;
    box-shadow: 0px 3px 5px #0003;
}

.nordport nav .content .logo {
    max-height: 70px;
    margin-top: -5px;
}

.nordport nav .content .logo img {
    width: 100%;
    max-width: 180px;
}

.nordport img.lage {
    width: 100%;
    max-width: 400px;
}

.nordport .lage01,
.nordport .lage04 {
    justify-self: center;
}

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

.nordport_unternehmen div {
    justify-self: center;
}

.nordport_unternehmen img {
    width: 100%;
    max-width: 600px;
}

.nordport_unternehmen p {
    margin-top: 10px;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.2em;
}

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

.dreispalter.flex .luftansicht {
    flex-basis: auto;
}

.nordport_gewerbeflaechen p {
    margin-top: 0px;
}