/* +++++++++++++++++ Media Query +++++++++++++++++ */
/* +++++++++++++++++ 1440px +++++++++++++++++ */

@media(max-width:1320px) {
    .keyvisual.news {
        background-image: url(../img/keyvisual_news_1440.jpg);
    }

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

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

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

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

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

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

    .keyvisual.egno {
        background-image: url(../img/keyvisual_egno_1440.jpg);
    }

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

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

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

    .keyvisual.frederikspark_B-284 {
        background-image: url(../img/FRED-880x420-F1.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    }

    .keyvisual.frederikspark_B-255 {
        background-image: url(../img/FRED-880x420-F2.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    }

    .keyvisual.frederikspark_B-255_2 {
        background-image: url(../img/FRED-880x420-F3.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    }

    .keyvisual.frederikspark_B-256 {
        background-image: url(../img/FRED-880x420-F5.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    }

    .keyvisual.nordport_f1 {
        background-image: url(../img/NORD-880x420-F1.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    }

    .keyvisual.nordport_f4 {
        background-image: url(../img/NORD-880x420-F4.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    }

    .keyvisual.nordport_f5 {
        background-image: url(../img/NORD-880x420-F5.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    }

    .keyvisual.nordport_f6 {
        background-image: url(../img/NORD-880x420-F6.jpg), linear-gradient(var(--hellgrau), var(--hellgrau));
    }
}

/* +++++++++++++++++ 1100px +++++++++++++++++ */

@media(max-width:1100px) {
    .keyvisual_headline {
        width: calc(100% - 80px);
        margin: 0px 40px;
        left: 0px;
    }

    .layer .keyvisual_headline {
        width: calc(100% - 80px);
        margin: 0px 40px;
        left: 0px;
    }

    h1 {
        font-size: 42px;
    }
}

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

@media(max-width:1024px) {
    .keyvisual .stoerer_startseite {
        bottom: 120px;
        right: 20px;
        width: 180px;
        height: 180px;
        padding: 50px 20px 40px;
    }

    .keyvisual .stoerer_startseite p {
        font-size: 16px;
        margin-top: 10px;
        background-size: 10px;
        padding-left: 15px;
    }

    section {
        margin: 60px 0px;
    }

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

    .iconteaser {
        flex-basis: 40%;
    }

    .iconteaser .iconteaser_headline {
        font-size: 24px;
    }

    .iconteaser .iconteaser_headline_zahlen {
        font-size: 50px;
    }

    .content.zweispalter {
        grid-template-columns: auto;
    }

    .mobile_margin_top60 {
        margin-top: 60px;
    }

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

    section.grau .content.karriereteaser {
        height: auto;
    }

    .karriereteaser_text .button_tuerkis {
        margin-bottom: 40px;
    }

    .karriereteaser.zweispalter {
        grid-gap: 0px;
    }

    section.grau .content.karriereteaser {
        padding: 0px 20px;
    }

    section.grau .content.karriereteaser {
        background-image: none;
    }

    section.grau .content.karriereteaser img {
        display: block;
        margin-top: 20px;
    }

    .zweispalter.news {
        grid-gap: 40px;
    }

    .dreispalter.flex {
        flex-wrap: wrap;
    }

    .dreispalter.flex .luftansicht {
        flex-basis: calc(50% - 40px);
    }

    .teaser {
        grid-template-columns: 1fr;
        max-width: 540px;
        margin: 60px auto 0;
    }

    .teaser_einzeln img {
        object-position: center 20%;
    }

    .teaser_einzeln h2 {
        hyphens: manual;
    }
}

/* +++++++++++++++++ 900px +++++++++++++++++ */
@media(max-width:900px) {
    h1 {
        font-size: clamp(28px, 5vw, 50px);
    }

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

    .slider.veranstaltungen h3 {
        margin: 40px 0px 0px;
    }

    .layer .keyvisual {
        height: 300px;
    }

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

    .frederikspark nav .content .servicenavi .btn_schriftgroesse,
    .frederikspark nav .content .servicenavi .btn_kontrast,
    .frederikspark nav .content .servicenavi .btn_telefon,
    .frederikspark nav .content .servicenavi .btn_email,
    .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: none;
        box-shadow: none;
    }

    .gt_float_switcher {
        box-shadow: none !important;
    }

    .gt_float_switcher .gt-selected .gt-current-lang {
        color: var(--text) !important;
    }

    .nordport nav .content .logo img {
        max-width: 145px;
    }

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

/* +++++++++++++++++ 768px +++++++++++++++++ */
@media(max-width:768px) {

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


    h1 {
        font-size: clamp(28px, 5vw, 50px);
        hyphens: manual;
    }

    h2 {
        font-size: 34px;
        hyphens: auto;
    }

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

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

    section.grau .content {
        padding: 60px 20px 60px;
    }

    .content {
        padding: 0px 20px;
    }

    hr.gruener_trenner {
        margin: 20px auto 60px;
    }

    hr.tuerkiser_trenner {
        margin: 0px auto 60px;
    }

    .keyvisual {
        height: 80vw;
        min-height: 500px;
    }

    .frederikspark .keyvisual {
        height: 360px;
    }

    .logo_frederikspark img {
        max-width: 280px;
    }

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

    .layer .keyvisual_headline {
        width: calc(100% - 40px);
        padding: 20px 20px 0px;
        margin: 0px 20px;
    }

    .layer .keyvisual_headline h1 {
        font-size: clamp(22px, 6vw, 36px);
        margin-top: 0px;
    }

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

    .slider {
        width: calc(100% - 60px);
    }

    .slick-prev::before {
        width: 20px;
        margin-left: -10px;
    }

    .slick-next::before {
        width: 20px;
        margin-left: 10px;
    }

    .slider h3 {
        font-size: 22px;
    }

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

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

    .zweispalter.mobile_grid_gap_40 {
        grid-gap: 40px;
    }

    .ansprechpartner {
        flex-basis: 66%;
    }

    .ansprechpartner:not(:nth-child(1)) {
        margin-top: 40px;
    }

    .ansprechpartner img {
        width: 300px;
    }

    .iconteaser {
        flex-basis: 100%;
    }

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

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

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

    .zweispalter.referenz.mobile_reverse img {
        grid-row: 1 / -1;
    }

    .historie_jahreszahl {
        font-family: 'Hind', sans-serif;
        margin-top: 40px;
        margin-bottom: -10px;
    }

    .button_tuerkis p {
        font-size: 22px;
        text-align: center;
    }

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

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

    .frederikspark .lage02,
    .nordport .lage02 {
        grid-row-start: 1;
    }

    .frederikspark .lage03,
    .nordport .lage03 {
        margin-top: 40px;
    }

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

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

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

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

    .logo_nordport img {
        max-width: 180px;
    }

    .news_responsive_image img {
        width: 100% !important;
    }

    .news.single figure.bild_neben_text img {
        margin-bottom: 0px;
    }
}