/*
Theme Name: Energie Theme
Author: Client Project
Description: Custom WordPress theme for StromAmpel.
Version: 2.5
*/


* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    color: #15324F;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            15px,
            0.35vw + 13.5px,
            17px
        );

    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

.anchor-target {
    position: absolute;
    top: -20px;
}


/* =========================================================
   PAGE
   ========================================================= */

.page-shell {
    width: 85%;
    max-width: 1360px;
    margin: 0 auto;
    background: #ffffff;
}


/* =========================================================
   IMAGE ZOOM
   ========================================================= */

.image-zoom-link {
    display: block;
    width: 100%;
    cursor: zoom-in;
}

.image-zoom-link img {
    transition:
        transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {

    .image-zoom-link:hover img {
        transform:
            scale(1.035);
    }

}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #ffffff;
}

.header-top {
    min-height: 70px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    border-bottom:
        1px solid #e7e7e7;
}

.site-logo {
    flex: 0 0 auto;
}

.site-logo img {
    width:
        clamp(
            118px,
            11vw,
            145px
        );
}

.header-actions {
    display: flex;
    align-items: center;

    gap:
        clamp(
            14px,
            2vw,
            24px
        );
}

.language-switch {
    display: flex;
    align-items: center;

    gap: 9px;

    font-size:
        clamp(
            11px,
            0.9vw,
            13px
        );
}

.language-switch a {
    opacity: 0.55;
}

.language-switch .language-active {
    opacity: 1;

    font-weight: 700;

    text-decoration: underline;
    text-underline-offset: 4px;
}

.contact-button {
    min-width:
        clamp(
            74px,
            7vw,
            84px
        );

    height:
        clamp(
            36px,
            3vw,
            40px
        );

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        clamp(
            12px,
            1.4vw,
            18px
        );

    background: #e51b2b;
    color: #ffffff;

    font-size:
        clamp(
            10.5px,
            0.8vw,
            12px
        );

    font-weight: 700;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.main-navigation {
    min-height: 48px;

    display: flex;
    align-items: center;

    gap:
        clamp(
            12px,
            1.3vw,
            20px
        );

    overflow-x: auto;
    overflow-y: hidden;

    white-space: nowrap;

    color: #6c747b;

    font-size:
        clamp(
            12px,
            0.95vw,
            16px
        );

    border-bottom:
        1px solid #eeeeee;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}

.main-navigation::-webkit-scrollbar {
    display: none;
}

.main-navigation a {
    position: relative;

    flex: 0 0 auto;

    color: #6c747b;
}

.main-navigation a:hover {
    color: #15324F;
}


/* =========================================================
   ACTIVE NAVIGATION
   ========================================================= */

body:not(:has(
    #energie:target,
    #prinzip:target,
    #nutzen:target,
    #anwendungen:target,
    #entwicklung:target,
    #pilotprojekt:target,
    #kompetenzen:target,
    #zusammenarbeit:target,
    #team:target,
    #ausblick:target,
    #kontakt:target
)) .main-navigation a[href="#start"] {
    color: #15324F;
    font-weight: 700;
}

body:has(#start:target) .main-navigation a[href="#start"],
body:has(#energie:target) .main-navigation a[href="#energie"],
body:has(#prinzip:target) .main-navigation a[href="#prinzip"],
body:has(#nutzen:target) .main-navigation a[href="#nutzen"],
body:has(#anwendungen:target) .main-navigation a[href="#anwendungen"],
body:has(#entwicklung:target) .main-navigation a[href="#entwicklung"],
body:has(#pilotprojekt:target) .main-navigation a[href="#pilotprojekt"],
body:has(#kompetenzen:target) .main-navigation a[href="#kompetenzen"],
body:has(#zusammenarbeit:target) .main-navigation a[href="#zusammenarbeit"],
body:has(#team:target) .main-navigation a[href="#team"],
body:has(#ausblick:target) .main-navigation a[href="#ausblick"],
body:has(#kontakt:target) .main-navigation a[href="#ausblick"] {
    color: #15324F;
    font-weight: 700;
}


/* =========================================================
   ANCHORS
   ========================================================= */

#start,
#energie,
#prinzip,
#nutzen,
#anwendungen,
#entwicklung,
#pilotprojekt,
#kompetenzen,
#zusammenarbeit,
#team,
#ausblick,
#kontakt {
    scroll-margin-top: 125px;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    width: 100%;
}

.hero-content {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(280px, 0.75fr);

    gap:
        clamp(
            34px,
            5vw,
            70px
        );

    align-items: center;

    padding:
        clamp(34px, 3.2vw, 40px)
        clamp(32px, 4.1vw, 52px)
        clamp(38px, 3.6vw, 46px);

    background: #205BA4;
    color: #ffffff;
}

.hero-kicker {
    margin-bottom:
        clamp(
            18px,
            2vw,
            24px
        );

    font-size:
        clamp(
            10px,
            0.8vw,
            12px
        );

    font-weight: 700;
    letter-spacing: 0.14em;
}

.hero-left h1 {
    margin: 0;

    font-size:
        clamp(
            34px,
            3.7vw,
            60px
        );

    line-height: 1.02;

    font-weight: 700;

    letter-spacing: -0.03em;
}

.hero-right p {
    max-width: 480px;

    margin: 0;

    font-size:
        clamp(
            19px,
            1.45vw,
            25px
        );

    line-height: 1.4;
}

.hero-image {
    position: relative;

    width: 100%;

    overflow: hidden;
}

.hero-image img {
    width: 100%;
}

.hero-video-link {
    position: absolute;

    z-index: 5;

    top:
        clamp(
            16px,
            1.7vw,
            22px
        );

    left:
        clamp(
            28px,
            4.1vw,
            52px
        );

    color: #ffffff;

    font-size:
        clamp(
            12px,
            1vw,
            15px
        );

    border-bottom:
        1px solid #ffffff;
}


/* =========================================================
   ORANGE LABEL
   ========================================================= */

.section-label {
    width:
        clamp(
            170px,
            17vw,
            230px
        );

    min-height:
        clamp(
            36px,
            3.2vw,
            44px
        );

    display: inline-flex;
    align-items: center;

    margin-bottom:
        clamp(
            14px,
            1.5vw,
            22px
        );

    padding:
        clamp(
            9px,
            0.8vw,
            12px
        )
        clamp(
            12px,
            1vw,
            16px
        );

    background: #F2AA3B;
    color: #ffffff;

    font-size:
        clamp(
            10px,
            0.75vw,
            13px
        );

    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


/* =========================================================
   GENERAL
   ========================================================= */

.aligned-section {
    position: relative;

    padding:
        clamp(34px, 3.2vw, 40px)
        clamp(30px, 4.1vw, 52px)
        clamp(38px, 3.5vw, 44px);

    background: #ffffff;
}

.section-heading-row {
    position: relative;
    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(260px, 0.65fr);

    gap:
        clamp(
            32px,
            5vw,
            68px
        );

    align-items: start;
}

.section-heading-row h2,
.cooperation__blue-band h2,
.outlook__blue-band h2,
.team h2 {
    font-size:
        clamp(
            27px,
            2.35vw,
            42px
        );

    line-height: 1.06;
}

.section-heading-row h2 {
    margin: 0;

    max-width: 780px;

    color: #15324F;

    font-weight: 700;
}

.section-blue-card {
    position: relative;
    z-index: 5;

    padding:
        clamp(
            20px,
            2vw,
            25px
        )
        clamp(
            22px,
            2.2vw,
            28px
        );

    background: #205BA4;
    color: #ffffff;

    font-size:
        clamp(
            14px,
            0.95vw,
            17px
        );

    line-height: 1.48;
}

.section-visual {
    position: relative;

    width: 100%;
}

.section-visual img {
    width: 100%;

    height: auto;
}


/* =========================================================
   01 / ENERGIERESSOURCE
   ========================================================= */

.energy-resource {
    padding-top: 0;
}

.energy-resource .section-label {
    transform:
        translateY(
            clamp(
                -48px,
                -3.5vw,
                -28px
            )
        );

    margin-bottom:
        clamp(
            -26px,
            -2vw,
            -14px
        );
}

.energy-resource__visual {
    margin-top:
        clamp(
            -186px,
            -13vw,
            -131px
        );

    transform:
        translateY(19px);
}

.energy-resource__visual img {
    width: 104%;

    max-width: none;

    margin-left: -2%;
}


/* =========================================================
   02 / PRINZIP
   ========================================================= */

.energy-logic__visual {
    margin-top:
        clamp(
            -38px,
            -2.8vw,
            -18px
        );
}


/* =========================================================
   03 / NUTZEN
   ========================================================= */

.benefits {
    position: relative;

    overflow: visible;

    transform:
        translateY(-49px);

    margin-bottom: -49px;
}

.benefits__content {
    display: grid;

    grid-template-columns:
        minmax(170px, 0.9fr)
        minmax(260px, 1.25fr)
        minmax(170px, 0.9fr);

    gap:
        clamp(
            18px,
            2.2vw,
            28px
        );

    align-items: start;

    margin-top: 19px;

    overflow: visible;
}

.benefits__list--left,
.benefits__list--right {
    position: relative;

    z-index: 5;
}

.benefits__visual-wrap {
    position: relative;

    z-index: 1;

    width: 100%;

    min-width: 0;

    overflow: visible;

    /* поднято еще примерно на 1 см */
    transform:
        translateY(-66px);
}

.benefits__visual-wrap .image-zoom-link {
    width: 117%;

    margin-left: -8.5%;

    overflow: visible;
}

.benefits__visual {
    display: block;

    width: 100%;

    max-width: none;

    height: auto;

    margin: 0;
}

.benefits__list h3 {
    margin:
        0
        0
        16px;

    color: #15324F;

    font-size:
        clamp(
            16px,
            1.2vw,
            20px
        );

    line-height: 1.25;
}

.benefits__list h3 span {
    font-size:
        clamp(
            13px,
            0.95vw,
            15px
        );

    font-weight: 400;
}

.benefits__list ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.benefits__list li {
    padding:
        8px
        0;

    border-bottom:
        1px solid #dce3e8;

    color: #526675;

    font-size:
        clamp(
            12.5px,
            0.85vw,
            15px
        );

    line-height: 1.4;
}

.benefits__list li:last-child {
    border-bottom: 0;
}

.benefits__list--left ul {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}

.benefits__list--left li {
    display: inline-block;

    width: auto;

    max-width: 100%;
}


/* =========================================================
   04 / ANWENDUNGEN
   поднят еще примерно на 2 см
   ========================================================= */

.applications {
    transform:
        translateY(-125px);

    margin-bottom: -125px;
}

.applications__visual {
    width: 85%;

    margin:
        clamp(
            -78px,
            -5.8vw,
            -35px
        )
        auto
        0;

    transform:
        translateY(19px);
}


/* =========================================================
   05 / ENTWICKLUNG
   ========================================================= */

.development__visual {
    width: 80%;

    margin-top:
        clamp(
            38px,
            3vw,
            43px
        );

    margin-left: auto;

    margin-right: auto;
}


/* =========================================================
   06 / PILOTPROJEKT
   ========================================================= */

.pilot {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding-bottom:
        clamp(
            18px,
            2vw,
            28px
        );
}

.pilot .section-label,
.pilot .section-heading-row {
    position: relative;

    z-index: 5;
}

.pilot__visual {
    position: relative;

    z-index: 1;

    margin-top:
        clamp(
            -150px,
            -10vw,
            -80px
        );
}

.pilot__visual img {
    width: 97%;

    max-width: none;

    height: auto;

    margin-left: 1.5%;
}


/* =========================================================
   07 / KOMPETENZEN
   ========================================================= */

.competencies {
    padding-top:
        clamp(
            24px,
            2.2vw,
            32px
        );
}

.competencies__visual {
    margin-top: 8px;

    overflow: visible;
}

.competencies__visual img {
    width: 100%;

    max-width: 100%;

    min-width: 0;

    height: auto;
}


/* =========================================================
   08 / ZUSAMMENARBEIT
   ========================================================= */

.cooperation {
    padding:
        clamp(34px, 3.2vw, 40px)
        clamp(30px, 4.1vw, 52px)
        clamp(38px, 3.5vw, 44px);
}

.cooperation__blue-band {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(260px, 0.9fr);

    gap:
        clamp(
            35px,
            5vw,
            68px
        );

    padding:
        clamp(
            30px,
            3vw,
            38px
        )
        clamp(
            32px,
            3.8vw,
            48px
        );

    background: #205BA4;
    color: #ffffff;
}

.cooperation__blue-band h2 {
    margin: 0;
}

.cooperation__blue-band p {
    margin: 0;

    font-size:
        clamp(
            14px,
            0.95vw,
            17px
        );

    line-height: 1.5;
}


/* =========================================================
   09 / TEAM
   ========================================================= */

.team {
    --team-side-padding:
        clamp(
            30px,
            4.1vw,
            52px
        );

    --team-photo-width:
        clamp(
            145px,
            12vw,
            185px
        );

    --team-photo-gap:
        clamp(
            18px,
            2.5vw,
            38px
        );

    position: relative;

    overflow: hidden;

    min-height:
        clamp(
            430px,
            34vw,
            520px
        );

    padding:
        clamp(
            34px,
            3.2vw,
            40px
        )
        var(--team-side-padding)
        clamp(
            38px,
            3.5vw,
            44px
        );

    background: #ffffff;
}

.team::after {
    content: "";

    position: absolute;

    z-index: 0;

    right:
        var(--team-side-padding);

    bottom: 175px;

    width: 138%;

    height:
        calc(
            var(--team-photo-width) * 2.64
        );

    background-image:
        url("assets/images/team-bild.png");

    background-repeat: no-repeat;

    background-position:
        right bottom;

    background-size: contain;

    transform:
        translateY(30%);

    pointer-events: none;
}

.team .section-label,
.team h2,
.team__grid {
    position: relative;

    z-index: 2;
}

.team h2 {
    margin:
        0
        0
        clamp(
            24px,
            2.5vw,
            32px
        );
}

.team__grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            var(--team-photo-width)
        );

    column-gap:
        var(--team-photo-gap);

    justify-content: start;

    align-items: start;

    width: 100%;
}

.team-card {
    width:
        var(--team-photo-width);

    min-width: 0;
}

.team-card__photo {
    width: 100%;

    aspect-ratio:
        4 / 4.8;

    overflow: hidden;

    background: #ffffff;
}

.team-card__photo .image-zoom-link {
    width: 100%;
    height: 100%;

    overflow: hidden;
}

.team-card__photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {

    .team-card__photo:hover img {
        transform:
            scale(1.08);
    }

}

.team-card__photo-placeholder {
    width: 100%;
    height: 100%;

    background: #ffffff;

    color: transparent;
}

.team-card__info {
    width: 100%;

    padding-top:
        clamp(
            7px,
            0.8vw,
            10px
        );
}

.team-card__info p {
    margin:
        0
        0
        6px;

    color: #526675;

    font-size:
        clamp(
            11.5px,
            0.85vw,
            15px
        );

    line-height: 1.35;
}

.team-card__name {
    margin-bottom: 8px !important;

    color: #15324F !important;

    font-size:
        clamp(
            12.5px,
            1vw,
            16px
        ) !important;

    font-weight: 700;
}

.team-card__name-line {
    display: block;
}

.team-card__role {
    margin: 0;

    color: #526675;
}

.team-card__role-line {
    display: block;
}

.team-card__role-line:first-child {
    font-size:
        clamp(
            10.5px,
            0.78vw,
            14px
        );

    font-weight: 700;

    color: #526675;
}


/* =========================================================
   10 / AUSBLICK
   ========================================================= */

.outlook {
    position: relative;

    transform:
        translateY(-38px);

    margin-bottom: -38px;

    padding:
        clamp(34px, 3.2vw, 40px)
        clamp(30px, 4.1vw, 52px)
        0;
}

.outlook__blue-band {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(260px, 0.9fr);

    gap:
        clamp(
            35px,
            5vw,
            68px
        );

    padding:
        clamp(
            32px,
            3.2vw,
            40px
        )
        clamp(
            32px,
            3.8vw,
            48px
        );

    background: #205BA4;

    color: #ffffff;
}

.outlook__blue-band h2 {
    margin: 0;
}

.outlook__blue-band p {
    margin: 0;

    font-size:
        clamp(
            14px,
            0.95vw,
            17px
        );

    line-height: 1.5;
}

.outlook__mountains {
    overflow: hidden;
}

.outlook__mountains img {
    width: 100%;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    padding:
        30px
        clamp(
            30px,
            4.1vw,
            52px
        )
        22px;

    border-top:
        1px solid #e4e9ed;
}

.footer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-bottom: 28px;
}

.footer-logo img {
    width:
        clamp(
            105px,
            11vw,
            145px
        );
}

.footer-links {
    display: flex;
    align-items: center;

    gap:
        clamp(
            28px,
            4vw,
            55px
        );
}

.footer-primary-links {
    display: flex;
    align-items: center;

    gap: 10px;
}

.footer-primary-links > a:not(.footer-contact-button) {
    color: #15324F;

    font-size:
        clamp(
            12px,
            0.9vw,
            14px
        );

    opacity: 0.55;
}

.footer-language-separator {
    color: #8a959d;

    font-size: 13px;
}

.footer-primary-links .footer-language-active {
    opacity: 1;

    font-weight: 700;

    text-decoration: underline;

    text-underline-offset: 4px;
}

.footer-contact-button {
    min-width:
        clamp(
            74px,
            7vw,
            84px
        );

    height:
        clamp(
            36px,
            3vw,
            40px
        );

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: 6px;

    padding:
        0
        clamp(
            12px,
            1.4vw,
            18px
        );

    background: #e51b2b;

    color: #ffffff;

    font-size:
        clamp(
            10.5px,
            0.8vw,
            12px
        );

    font-weight: 700;
}

.footer-legal-links {
    display: flex;

    gap:
        clamp(
            18px,
            2vw,
            28px
        );
}

.footer-legal-links a {
    color: #526675;

    font-size:
        clamp(
            12px,
            0.9vw,
            14px
        );
}

.footer-bottom {
    display: flex;

    gap: 8px;

    padding-top: 16px;

    border-top:
        1px solid #e4e9ed;

    font-size: 12px;

    color: #7b8992;
}


/* =========================================================
   LEGAL
   ========================================================= */

.legal-page {
    padding:
        clamp(45px, 5vw, 60px)
        clamp(30px, 4.1vw, 52px)
        clamp(60px, 6vw, 80px);
}

.legal-page h1 {
    margin:
        0
        0
        32px;

    font-size:
        clamp(
            32px,
            3.8vw,
            54px
        );
}

.legal-page__content {
    max-width: 850px;

    color: #526675;

    font-size:
        clamp(
            15px,
            1vw,
            17px
        );

    line-height: 1.65;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .page-shell {
        width:
            calc(
                100% - 32px
            );

        max-width: none;
    }

    .main-navigation {
        min-height: 38px;

        gap: 12px;

        font-size: 12px;
    }

    .hero-content {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(220px, 0.95fr);

        gap: 28px;

        padding: 30px;
    }

    .hero-right p {
        font-size:
            clamp(
                18px,
                2.1vw,
                22px
            );
    }

    .aligned-section {
        padding:
            32px
            30px
            36px;
    }

    .section-heading-row {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(220px, 0.72fr);

        gap: 28px;
    }

    .energy-resource__visual {
        margin-top: -95px;
    }

    .energy-resource__visual img {
        width: 100%;

        margin-left: 0;
    }


    /* NUTZEN */

    .benefits {
        transform: none;

        margin-bottom: 0;
    }

    .benefits__content {
        grid-template-columns:
            minmax(150px, 0.9fr)
            minmax(240px, 1.1fr);

        gap: 24px;

        margin-top: 19px;
    }

    .benefits__list--right {
        grid-column:
            1 / -1;

        width: 48%;

        margin-left: auto;
    }

    .benefits__visual-wrap {
        z-index: 1;

        transform:
            translateY(-18px);
    }

    .benefits__visual-wrap .image-zoom-link {
        width: 112%;

        margin-left: -6%;
    }


    /* ANWENDUNGEN */

    .applications {
        transform: none;

        margin-bottom: 0;
    }

    .applications__visual {
        width: 100%;

        margin-top: 20px;

        transform: none;
    }


    /* ENTWICKLUNG */

    .development__visual {
        width: 100%;

        margin-left: 0;

        margin-right: 0;
    }


    /* PILOT */

    .pilot__visual {
        margin-top: -70px;
    }

    .pilot__visual img {
        width: 100%;

        max-width: 100%;

        margin: 0;
    }

    .competencies__visual {
        margin-top: 24px;
    }


    /* TEAM */

    .team {
        --team-side-padding: 30px;

        --team-photo-width:
            clamp(
                105px,
                13vw,
                140px
            );

        --team-photo-gap:
            clamp(
                14px,
                2.2vw,
                24px
            );

        min-height:
            clamp(
                330px,
                40vw,
                420px
            );
    }

    .team__grid {
        grid-template-columns:
            repeat(
                3,
                var(--team-photo-width)
            );

        column-gap:
            var(--team-photo-gap);

        justify-content: start;
    }

    .team-card {
        width:
            var(--team-photo-width);
    }

    .team::after {
        right:
            var(--team-side-padding);

        bottom: 125px;

        width: 115%;
    }


    /* AUSBLICK */

    .outlook {
        transform: none;

        margin-bottom: 0;
    }


    .cooperation,
    .outlook {
        padding-left: 30px;

        padding-right: 30px;
    }

}


/* =========================================================
   TABLET PORTRAIT
   ========================================================= */

@media (max-width: 900px) {

    .section-heading-row {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .section-blue-card {
        max-width: 560px;

        margin-left: auto;
    }

    .energy-resource__visual,
    .energy-logic__visual,
    .applications__visual,
    .development__visual,
    .competencies__visual {
        margin-top: 26px;
    }

    .cooperation__blue-band,
    .outlook__blue-band {
        grid-template-columns: 1fr;
    }

    .pilot__visual {
        margin-top: -30px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .page-shell {
        width: 100%;

        max-width: none;
    }

    .main-navigation {
        display: none;
    }

    #start,
    #energie,
    #prinzip,
    #nutzen,
    #anwendungen,
    #entwicklung,
    #pilotprojekt,
    #kompetenzen,
    #zusammenarbeit,
    #team,
    #ausblick,
    #kontakt {
        scroll-margin-top: 76px;
    }

    .header-top {
        min-height: 58px;

        padding:
            0
            16px;
    }

    .site-logo img {
        width:
            clamp(
                92px,
                27vw,
                112px
            );
    }

    .hero-content {
        grid-template-columns: 1fr;

        gap: 20px;

        padding:
            26px
            18px
            30px;
    }

    .hero-left h1 {
        font-size:
            clamp(
                29px,
                8.5vw,
                38px
            );
    }

    .hero-right p {
        font-size:
            clamp(
                17px,
                4.7vw,
                20px
            );
    }

    .section-label {
        width:
            clamp(
                160px,
                56vw,
                205px
            );

        font-size:
            clamp(
                9.5px,
                2.8vw,
                11.5px
            );
    }

    .aligned-section {
        padding:
            28px
            18px
            32px;
    }

    .section-heading-row {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .section-visual img {
        width: 100%;

        max-width: 100%;

        min-width: 0;

        margin-left: 0;

        margin-right: 0;
    }

    .energy-resource {
        padding-top: 28px;
    }

    .energy-resource .section-label {
        transform: none;

        margin-bottom: 17px;
    }

    .energy-resource__visual {
        margin-top: 26px;

        transform: none;
    }


    /* NUTZEN */

    .benefits {
        transform: none;

        margin-bottom: 0;
    }

    .benefits__content {
        grid-template-columns: 1fr;

        gap: 28px;

        margin-top: 19px;
    }

    .benefits__list--left {
        order: 1;
    }

    .benefits__visual-wrap {
        order: 2;

        width: 100%;

        z-index: 1;

        transform: none;
    }

    .benefits__list--right {
        order: 3;

        width: 100%;

        margin: 0;
    }

    .benefits__visual-wrap .image-zoom-link {
        width: 100%;

        margin: 0;
    }

    .benefits__visual {
        width: 100%;

        max-width: 100%;
    }


    /* ANWENDUNGEN */

    .applications {
        transform: none;

        margin-bottom: 0;
    }

    .applications__visual {
        width: 100%;

        margin-top: 26px;

        transform: none;
    }


    /* ENTWICKLUNG */

    .development__visual {
        width: 100%;

        margin-left: 0;

        margin-right: 0;
    }


    /* PILOT */

    .pilot {
        overflow: visible;
    }

    .pilot__visual {
        margin-top: 24px;
    }

    .pilot__visual img {
        width: 100%;

        max-width: 100%;

        margin: 0;
    }

    .competencies__visual {
        width: 100%;

        margin-top: 26px;

        overflow: visible;
    }

    .cooperation {
        padding:
            28px
            18px
            32px;
    }

    .cooperation__blue-band {
        grid-template-columns: 1fr;

        padding:
            24px
            20px;
    }


    /* TEAM */

    .team {
        --team-side-padding: 18px;

        --team-photo-width:
            clamp(
                95px,
                17vw,
                130px
            );

        --team-photo-gap:
            clamp(
                9px,
                2.3vw,
                16px
            );

        min-height: 0;

        padding:
            28px
            var(--team-side-padding)
            34px;
    }

    .team::after {
        display: none;
    }

    .team__grid {
        grid-template-columns:
            repeat(
                3,
                var(--team-photo-width)
            );

        column-gap:
            var(--team-photo-gap);

        justify-content: start;
    }

    .team-card {
        width:
            var(--team-photo-width);

        max-width:
            var(--team-photo-width);
    }

    .team-card__info p {
        font-size:
            clamp(
                10.5px,
                2.3vw,
                13px
            );
    }

    .team-card__name {
        font-size:
            clamp(
                11px,
                2.6vw,
                14px
            ) !important;
    }

    .team-card__role-line:first-child {
        font-size:
            clamp(
                9.5px,
                2.1vw,
                12px
            );
    }


    /* AUSBLICK */

    .outlook {
        transform: none;

        margin-bottom: 0;

        padding:
            28px
            18px
            0;
    }

    .outlook__blue-band {
        grid-template-columns: 1fr;

        padding:
            24px
            20px;
    }


    /* FOOTER */

    .site-footer {
        padding:
            26px
            18px
            18px;
    }

    .footer-main {
        flex-direction: column;

        align-items: flex-start;

        gap: 22px;
    }

    .footer-links {
        width: 100%;

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .header-top {
        padding:
            0
            14px;
    }

    .site-logo img {
        width: 100px;
    }

    .hero-content {
        padding:
            25px
            16px
            28px;
    }

    .aligned-section,
    .cooperation,
    .team,
    .outlook {
        padding-left: 16px;

        padding-right: 16px;
    }

    .team {
        --team-side-padding: 16px;

        --team-photo-width:
            clamp(
                92px,
                31vw,
                125px
            );

        --team-photo-gap:
            clamp(
                8px,
                2vw,
                12px
            );
    }

    .team__grid {
        grid-template-columns:
            repeat(
                3,
                var(--team-photo-width)
            );

        column-gap:
            var(--team-photo-gap);

        justify-content: start;
    }

    .team-card {
        width:
            var(--team-photo-width);

        max-width:
            var(--team-photo-width);
    }

    .footer-legal-links {
        flex-wrap: wrap;
    }

    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 5px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .header-top {
        padding:
            0
            10px;
    }

    .site-logo img {
        width: 88px;
    }

    .header-actions {
        gap: 6px;
    }

    .language-switch {
        font-size: 10px;
    }

    .contact-button {
        min-width: 60px;

        height: 31px;

        padding:
            0
            7px;

        font-size: 9.5px;
    }

    .team {
        --team-photo-width:
            clamp(
                88px,
                29vw,
                112px
            );

        --team-photo-gap:
            8px;
    }

    .team__grid {
        grid-template-columns:
            repeat(
                3,
                var(--team-photo-width)
            );

        column-gap:
            var(--team-photo-gap);
    }

    .team-card {
        width:
            var(--team-photo-width);

        max-width:
            var(--team-photo-width);
    }

}
.cooperation__blue-band p{font-size:clamp(16px,calc(0.95vw + 2px),19px)!important;}


.cooperation__blue-band p{font-size:19px!important;}