/* =========================================================
   g.g.pub! – Modern stylesheet
   ========================================================= */


/* ---------------------------------------------------------
   LOCAL FONTS
   --------------------------------------------------------- */

@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope-VariableFont_wght.woff2")
         format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-VariableFont_opsz,wght.woff2")
         format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


/* ---------------------------------------------------------
   VARIABLES
   --------------------------------------------------------- */

:root {
    --green: #95c11a;
    --green-dark: #789e0d;
    --green-light: #eef5d8;

    --dark: #202320;
    --dark-soft: #343734;

    --grey: #6e6f6e;
    --grey-light: #f3f4f1;
    --grey-border: #dedfda;

    --white: #ffffff;

    --max-width: 1240px;

    --font-heading: "Manrope", Arial, sans-serif;
    --font-body: "Inter", Arial, sans-serif;

    --radius: 4px;

    --shadow-soft:
        0 18px 50px rgba(32, 35, 32, 0.08);

    --transition:
        180ms ease;
}


/* ---------------------------------------------------------
   RESET
   --------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: var(--white);
    color: var(--dark);

    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

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

button {
    font: inherit;
}

::selection {
    background: var(--green);
    color: var(--white);
}


/* ---------------------------------------------------------
   GENERAL
   --------------------------------------------------------- */

.section {
    width: min(
        calc(100% - 48px),
        var(--max-width)
    );

    margin-inline: auto;

    padding-top: 120px;
    padding-bottom: 120px;
}

.section-label {
    display: flex;
    align-items: center;

    gap: 14px;
    margin-bottom: 50px;

    color: var(--grey);

    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section-label.light {
    color: rgba(255, 255, 255, 0.65);
}

.section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    flex-shrink: 0;
}

.section-icon img {
    width: 23px;
    height: 23px;

    filter:
        invert(67%)
        sepia(88%)
        saturate(790%)
        hue-rotate(28deg)
        brightness(89%)
        contrast(88%);
}

.section-label.light .section-icon img {
    filter: brightness(0) invert(1);
}

h1,
h2,
h3 {
    margin: 0;

    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.08;

    letter-spacing: -0.035em;
}

h2 {
    font-size: clamp(2.5rem, 5vw, 4.8rem);
}

h2 em {
    color: var(--green);
    font-style: normal;
}

p {
    margin-top: 0;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 0 27px;

    border-radius: 2px;

    font-family: var(--font-heading);
    font-size: 0.83rem;
    font-weight: 700;

    letter-spacing: 0.01em;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    background: var(--green);
    color: var(--white);
}

.button-primary:hover {
    background: var(--green-dark);
    color: var(--white);
}

.button-link {
    gap: 10px;
    padding-inline: 0;

    color: var(--dark);
}

.button-link span {
    color: var(--green);
    font-size: 1.2rem;

    transition: transform var(--transition);
}

.button-link:hover {
    color: var(--dark);
}

.button-link:hover span {
    transform: translateX(4px);
}

.button-light {
    margin-top: 25px;

    background: var(--white);
    color: var(--dark);
}

.button-light:hover {
    background: var(--green);
    color: var(--white);
}


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

.site-header {
    position: relative;
    z-index: 1000;

    background: var(--white);

    border-bottom:
        1px solid rgba(32, 35, 32, 0.08);
}

.nav-wrap {
    position: relative;

    width: min(
        calc(100% - 48px),
        var(--max-width)
    );

    min-height: 92px;

    margin-inline: auto;

    display: flex;
    align-items: center;
}

.brand {
    display: block;
    flex-shrink: 0;
}

.brand img {
    width: 190px;
    height: auto;
}

.main-navigation {
    display: flex;
    align-items: center;

    gap: 34px;
    margin-left: auto;

    font-family: var(--font-heading);
    font-size: 0.83rem;
    font-weight: 700;
}

.main-navigation > a:not(.nav-contact),
.nav-dropdown-toggle {
    position: relative;

    padding: 8px 0;

    background: none;
    border: 0;

    color: var(--dark);

    cursor: pointer;
}

.main-navigation > a:not(.nav-contact)::after,
.nav-dropdown-toggle::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: var(--green);

    transition:
        width var(--transition);
}

.main-navigation > a:not(.nav-contact):hover::after,
.main-navigation > a:not(.nav-contact).active::after,
.nav-dropdown-toggle:hover::after,
.nav-dropdown-toggle.active::after {
    width: 100%;
}

.main-navigation > a.active {
    color: var(--dark);
    font-weight: 700;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;

    gap: 7px;
}

.nav-dropdown-toggle span {
    color: var(--green);
    font-size: 1rem;
}

.nav-dropdown-menu {
    position: absolute;

    top: calc(100% + 18px);
    left: -20px;

    width: 230px;

    padding: 12px;

    background: var(--white);

    box-shadow: var(--shadow-soft);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-5px);

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-menu a {
    position: relative;

    display: block;

    padding: 10px 12px;

    font-size: 0.82rem;
}

.nav-dropdown-menu a:hover {
    background: var(--grey-light);
    color: var(--green-dark);
}

.nav-dropdown-menu a.active {
    color: var(--dark);
    font-weight: 700;
}

.nav-dropdown-menu a.active::after {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 4px;

    height: 2px;

    background: var(--green);
}


/* ---------------------------------------------------------
   NAV CONTACT / CTA
   --------------------------------------------------------- */

.nav-contact {
    position: relative;

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

    padding: 12px 18px !important;

    background-color: var(--dark) !important;
    color: var(--white) !important;

    border: 0;
    border-radius: 2px;

    font-family: var(--font-heading);
    font-size: 0.83rem;
    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.nav-contact:hover {
    background-color: var(--green) !important;
    color: var(--white) !important;

    transform: translateY(-2px);
}

.nav-contact::after {
    content: none !important;
}


/* ---------------------------------------------------------
   LANGUAGE SWITCHER
   --------------------------------------------------------- */

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

    gap: 7px;
    margin-left: 25px;

    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.08em;
}

.language-switcher a {
    color: var(--grey);

    transition:
        color var(--transition),
        opacity var(--transition);
}

.language-switcher a:hover {
    color: var(--green-dark);
}

.language-switcher a.active {
    color: var(--green-dark);
}

.language-switcher span {
    color: var(--grey-border);
}


/* ---------------------------------------------------------
   MOBILE MENU BUTTON
   --------------------------------------------------------- */

.menu-toggle {
    display: none;

    width: 46px;
    height: 46px;

    padding: 10px;

    border: 1px solid var(--grey-border);

    background: var(--white);

    cursor: pointer;
}

.menu-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    background: var(--dark);
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero {
    position: relative;

    min-height: 680px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(420px, 0.85fr);

    background: var(--grey-light);
}

.hero-image {
    min-height: 680px;

    overflow: hidden;
}

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

    object-fit: cover;
    object-position: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        80px
        max(48px, calc((100vw - 1240px) / 2))
        80px
        70px;
}

.eyebrow {
    margin-bottom: 25px;

    color: var(--green-dark);

    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero h1 {
    font-size: clamp(3.2rem, 6vw, 6.4rem);
}

.hero h1 span {
    color: var(--green);
}

.hero-text {
    max-width: 570px;

    margin-top: 32px;
    margin-bottom: 0;

    color: var(--grey);

    font-size: 1.1rem;
    line-height: 1.8;
}

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

    gap: 28px;
    margin-top: 42px;
}


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

.intro-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}

.intro h2 {
    max-width: 520px;
}

.intro-copy {
    max-width: 600px;
}

.intro-copy .lead {
    margin-bottom: 25px;

    color: var(--dark);

    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 600;

    line-height: 1.5;
}

.intro-copy p:not(.lead) {
    color: var(--grey);
}


/* ---------------------------------------------------------
   SERVICES
   --------------------------------------------------------- */

.services {
    width: 100%;
    max-width: none;

    padding-right:
        max(24px, calc((100vw - 1240px) / 2));

    padding-left:
        max(24px, calc((100vw - 1240px) / 2));

    background: var(--grey-light);
}

.services-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    margin-bottom: 65px;
}

.services-heading h2 {
    max-width: 600px;
}

.services-heading p {
    max-width: 390px;

    margin-bottom: 5px;

    color: var(--grey);
}

.service-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 24px;
}

.service-card {
    background: var(--white);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft);
}

.service-image {
    aspect-ratio: 1.8 / 1;

    overflow: hidden;
}

.service-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 500ms ease;
}

.service-card:hover .service-image img {
    transform: scale(1.04);
}

.service-content {
    position: relative;

    min-height: 310px;

    padding: 34px;
}

.service-number {
    display: block;

    margin-bottom: 24px;

    color: var(--green);

    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    margin-bottom: 22px;
}

.service-icon img {
    width: 25px;
    height: 25px;
}

.service-content h3 {
    margin-bottom: 18px;

    font-size: 1.55rem;
}

.service-content p {
    color: var(--grey);
    font-size: 0.94rem;
}

.text-link {
    display: inline-flex;
    align-items: center;

    gap: 9px;
    margin-top: 8px;

    color: var(--dark);

    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 800;
}

.text-link span {
    color: var(--green);
    font-size: 1.1rem;

    transition:
        transform var(--transition);
}

.text-link:hover span {
    transform: translateX(4px);
}


/* ---------------------------------------------------------
   APPROACH
   --------------------------------------------------------- */

.approach {
    width: 100%;
    max-width: none;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    padding: 0;

    background: var(--dark);
}

.approach-image {
    min-height: 680px;
}

.approach-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.approach-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        100px
        max(48px, calc((100vw - 1240px) / 2))
        100px
        80px;

    color: var(--white);
}

.approach-content .section-label {
    margin-bottom: 45px;
}

.approach-content h2 {
    max-width: 600px;
}

.approach-content p {
    max-width: 560px;

    margin-top: 30px;

    color: rgba(255, 255, 255, 0.68);
}

.approach-content p + p {
    margin-top: 15px;
}


/* Rechte Spalte */

.approach-points {
    padding-top: 85px;
    padding-right: max(48px, calc((100vw - 1240px) / 2));
    padding-bottom: 100px;
    padding-left: 40px;

    color: var(--white);
}

.approach-point {
    display: grid;

    grid-template-columns: 55px 1fr;

    column-gap: 22px;

    padding-bottom: 38px;
}

.approach-point:last-child {
    padding-bottom: 0;
}

.approach-number {
    color: var(--green);

    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.approach-point h3 {
    margin-bottom: 10px;

    color: var(--white);

    font-size: 1.25rem;
}

.approach-point p {
    margin: 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 0.92rem;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   PROCESS
   --------------------------------------------------------- */

.process-heading {
    margin-bottom: 65px;
}

.process-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top:
        1px solid var(--grey-border);
}

.process-item {
    min-height: 270px;

    padding:
        30px
        35px
        30px
        0;

    border-right:
        1px solid var(--grey-border);
}

.process-item:not(:first-child) {
    padding-left: 35px;
}

.process-item:last-child {
    border-right: 0;
}

.process-icon {
    display: flex;
    align-items: center;

    margin-bottom: 55px;
}

.process-icon img {
    width: 24px;
    height: 24px;

    filter:
        invert(67%)
        sepia(88%)
        saturate(790%)
        hue-rotate(28deg)
        brightness(89%)
        contrast(88%);
}

.process-item h3 {
    margin-bottom: 13px;

    font-size: 1.25rem;
}

.process-item p {
    max-width: 230px;

    margin: 0;

    color: var(--grey);

    font-size: 0.9rem;
}


/* ---------------------------------------------------------
   CONTACT
   --------------------------------------------------------- */

.contact {
    width: 100%;

    background: var(--green);
}

.contact-inner {
    width: 100%;
    max-width: 1440px;

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    min-height: 620px;
}

.contact-text {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        90px
        max(48px, calc((100vw - 1240px) / 2))
        90px
        max(48px, calc((100vw - 1240px) / 2));
}

.contact-text .section-label {
    color: rgba(255, 255, 255, 0.72);
}

.contact-text .section-icon img {
    filter: brightness(0) invert(1);
}

.contact-text h2 {
    max-width: 700px;

    color: var(--white);
}

.contact-text h2 em {
    color: var(--dark);
}

.contact-text > p {
    max-width: 580px;

    margin-top: 30px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 1.05rem;
}

.contact-actions {
    display: flex;

    gap: 70px;
    margin-top: 55px;
}

.contact-item {
    display: flex;
    flex-direction: column;
}

.contact-label {
    margin-bottom: 5px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.contact-item strong {
    color: var(--white);

    font-family: var(--font-heading);
    font-size: 1.35rem;
}

.contact-item:hover strong {
    color: var(--dark);
}

.contact-image {
    min-height: 620px;

    overflow: hidden;
}

.contact-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ---------------------------------------------------------
   FOOTER – ALTE STRUKTUR / FALLBACK
   --------------------------------------------------------- */

.footer-main {
    width: min(
        calc(100% - 48px),
        var(--max-width)
    );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1.3fr;

    gap: 50px;

    padding-top: 80px;
    padding-bottom: 70px;
}

.footer-brand img {
    width: 170px;
    margin-bottom: 25px;
}

.footer-brand p {
    max-width: 260px;

    color: rgba(255, 255, 255, 0.55);

    font-size: 0.88rem;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-column h3 {
    margin-bottom: 20px;

    color: var(--green);

    font-size: 0.75rem;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-column a {
    margin-bottom: 7px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.84rem;
}

.footer-column a:hover {
    color: var(--green);
}

.footer-column p {
    margin-bottom: 15px;

    color: rgba(255, 255, 255, 0.55);

    font-size: 0.84rem;
    line-height: 1.7;
}

.footer-bottom {
    width: min(
        calc(100% - 48px),
        var(--max-width)
    );

    margin-inline: auto;

    display: flex;
    justify-content: space-between;

    padding:
        22px
        0
        25px;

    border-top:
        1px solid rgba(255, 255, 255, 0.1);

    color: rgba(255, 255, 255, 0.4);

    font-size: 0.72rem;
}


/* =========================================================
   RESPONSIVE – TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .main-navigation {
        gap: 22px;
    }

    .hero {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, 0.8fr);
    }

    .hero-content {
        padding:
            70px
            45px
            70px
            55px;
    }

    .intro-grid {
        gap: 60px;
    }

    .service-grid {
        gap: 18px;
    }

    .service-content {
        padding: 27px;
    }

    .approach-content {
        padding:
            80px
            55px
            80px
            55px;
    }

    .approach-points {
        padding-right: 55px;
        padding-left: 25px;
    }

    .footer-main {
        grid-template-columns:
            1.5fr
            1fr
            1fr;
    }

    .footer-column:last-child {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   RESPONSIVE – MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .section {
        width: min(
            calc(100% - 36px),
            var(--max-width)
        );

        padding-top: 80px;
        padding-bottom: 80px;
    }


    /* -----------------------------------------------------
       NAVIGATION
       ----------------------------------------------------- */

    .nav-wrap {
        width: calc(100% - 36px);

        min-height: 78px;
    }

    .brand img {
        width: 155px;
    }

    .language-switcher {
        margin-left: auto;
        margin-right: 15px;
    }

    .menu-toggle {
        display: block;
        flex-shrink: 0;

        position: relative;
        z-index: 1001;
    }

    .main-navigation {
        position: absolute;

        top: 100%;
        left: -18px;
        right: -18px;

        display: none;

        flex-direction: column;
        align-items: stretch;

        gap: 0;
        margin-left: 0;

        padding:
            15px
            18px
            25px;

        background: var(--white);

        border-bottom:
            1px solid var(--grey-border);

        box-shadow: var(--shadow-soft);

        z-index: 1000;
    }

    .main-navigation.is-open {
        display: flex;
    }

    .main-navigation > a:not(.nav-contact),
    .nav-dropdown-toggle {
        display: flex;
        justify-content: space-between;

        width: 100%;

        padding:
            14px
            5px;
    }

    .nav-dropdown-menu {
        position: static;

        display: none;

        width: 100%;

        padding:
            5px
            10px;

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        transform: none;
    }

    .nav-dropdown.is-open .nav-dropdown-menu {
        display: block;
    }

    .nav-dropdown-menu a.active::after {
        left: 12px;
        right: 12px;
    }

    .nav-contact {
        display: flex;

        width: 100%;

        margin-top: 10px;

        padding:
            14px
            16px !important;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero {
        display: flex;
        flex-direction: column;

        min-height: 0;
    }

    .hero-image {
        min-height: 350px;
        max-height: 52vh;
    }

    .hero-content {
        padding:
            60px
            24px
            70px;
    }

    .hero h1 {
        font-size:
            clamp(2.8rem, 13vw, 4.6rem);
    }

    .hero-text {
        font-size: 1rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;

        gap: 18px;
    }


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

    .intro-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }


    /* -----------------------------------------------------
       SERVICES
       ----------------------------------------------------- */

    .services {
        width: 100%;

        padding-right: 18px;
        padding-left: 18px;
    }

    .services-heading {
        display: block;

        margin-bottom: 45px;
    }

    .services-heading p {
        margin-top: 25px;
    }

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

    .service-content {
        min-height: 0;
    }


    /* -----------------------------------------------------
       APPROACH – MOBILE
       ----------------------------------------------------- */

    .approach {
        display: flex;
        flex-direction: column;

        width: 100%;
    }

    .approach-image {
        min-height: 380px;
    }

    .approach-content {
        width: 100%;

        padding:
            75px
            24px
            55px;
    }

    .approach-points {
        width: 100%;

        padding:
            0
            24px
            75px;

        color: var(--white);
    }

    .approach-point {
        grid-template-columns:
            45px
            1fr;

        column-gap: 18px;

        padding-bottom: 32px;
    }

    .approach-point h3 {
        font-size: 1.2rem;
    }

    .approach-point p {
        font-size: 0.9rem;
    }


    /* -----------------------------------------------------
       PROCESS
       ----------------------------------------------------- */

    .process-heading {
        margin-bottom: 45px;
    }

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

    .process-item,
    .process-item:not(:first-child) {
        min-height: 0;

        padding:
            30px
            0;

        border-right: 0;

        border-bottom:
            1px solid var(--grey-border);
    }

    .process-item:last-child {
        border-bottom: 0;
    }

    .process-icon {
        margin-bottom: 25px;
    }


    /* -----------------------------------------------------
       CONTACT – MOBILE
       ----------------------------------------------------- */

    .contact-inner {
        display: flex;
        flex-direction: column;

        min-height: 0;
    }

    .contact-text {
        padding:
            80px
            18px;
    }

    .contact-actions {
        flex-direction: column;

        gap: 25px;
    }

    .contact-image {
        min-height: 360px;

        order: 2;
    }


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

    .footer-main {
        width: calc(100% - 36px);

        grid-template-columns: 1fr;

        gap: 45px;

        padding-top: 60px;
        padding-bottom: 55px;
    }

    .footer-column:last-child {
        grid-column: auto;
    }

    .footer-bottom {
        width: calc(100% - 36px);

        flex-direction: column;

        gap: 7px;
    }
}


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

@media (max-width: 480px) {

    h2 {
        font-size: 2.6rem;
    }

    .hero-image {
        min-height: 280px;
    }

    .hero-content {
        padding-top: 50px;
    }

    .service-image {
        aspect-ratio: 1.6 / 1;
    }

    .approach-image {
        min-height: 300px;
    }

    .approach-content {
        padding-top: 65px;
        padding-bottom: 50px;
    }

    .approach-points {
        padding:
            0
            18px
            65px;
    }

    .contact-text {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .contact-image {
        min-height: 300px;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible {
    outline:
        3px solid var(--green);

    outline-offset: 4px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}


/* =========================================================
   g.g.pub! – CREATION GRAPHIQUE
   ========================================================= */


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

.page-hero {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(420px, 0.85fr);

    min-height: 620px;

    background: var(--grey-light);
}

.page-hero-image {
    min-height: 620px;

    overflow: hidden;
}

.page-hero-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.page-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        80px
        max(48px, calc((100vw - 1240px) / 2))
        80px
        70px;
}

.page-hero-content .eyebrow {
    margin-bottom: 25px;
}

.page-hero-content h1 {
    font-size:
        clamp(3.2rem, 6vw, 6.2rem);
}

.page-hero-content h1 span {
    color: var(--green);
}

.page-hero-text {
    max-width: 560px;

    margin-top: 32px;
    margin-bottom: 0;

    color: var(--grey);

    font-size: 1.08rem;
    line-height: 1.8;
}

.page-hero-content .button {
    align-self: flex-start;

    margin-top: 40px;
}


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

.detail-intro-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 100px;
}

.detail-intro-grid h2 {
    max-width: 560px;
}

.detail-intro-copy {
    max-width: 600px;
}

.detail-intro-copy .lead {
    margin-bottom: 25px;

    color: var(--dark);

    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 600;

    line-height: 1.5;
}

.detail-intro-copy p:not(.lead) {
    color: var(--grey);
}


/* ---------------------------------------------------------
   FEATURE BLOCK
   --------------------------------------------------------- */

.feature-block {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    background: var(--grey-light);
}

.feature-block-image {
    min-height: 600px;

    overflow: hidden;
}

.feature-block-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.feature-block-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        90px
        max(48px, calc((100vw - 1240px) / 2))
        90px
        80px;
}

.feature-block-content .section-label {
    margin-bottom: 42px;
}

.feature-block-content h2 {
    max-width: 580px;
}

.feature-block-content > p {
    max-width: 560px;

    margin-top: 30px;

    color: var(--grey);
}

.feature-block-content > p + p {
    margin-top: 15px;
}


/* ---------------------------------------------------------
   FEATURE LIST
   --------------------------------------------------------- */

.feature-list {
    display: flex;
    flex-direction: column;

    gap: 14px;

    margin:
        35px
        0
        0;

    padding: 0;

    list-style: none;
}

.feature-list li {
    display: flex;
    align-items: center;

    gap: 13px;

    color: var(--dark);

    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
}

.feature-list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 23px;
    height: 23px;

    flex-shrink: 0;
}

.feature-list-icon img {
    width: 20px;
    height: 20px;

    filter:
        invert(67%)
        sepia(88%)
        saturate(790%)
        hue-rotate(28deg)
        brightness(89%)
        contrast(88%);
}


/* ---------------------------------------------------------
   SUPPORTS
   --------------------------------------------------------- */

.supports {
    width: 100%;
    max-width: none;

    padding-right:
        max(24px, calc((100vw - 1240px) / 2));

    padding-left:
        max(24px, calc((100vw - 1240px) / 2));
}

.supports-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    margin-bottom: 65px;
}

.supports-heading h2 {
    max-width: 600px;
}

.supports-heading > p {
    max-width: 390px;

    margin-bottom: 5px;

    color: var(--grey);
}

.supports-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top:
        1px solid var(--grey-border);
}

.support-item {
    min-height: 280px;

    padding:
        35px
        35px
        30px
        0;

    border-right:
        1px solid var(--grey-border);
}

.support-item:not(:first-child) {
    padding-left: 35px;
}

.support-item:last-child {
    border-right: 0;
}

.support-icon {
    display: flex;
    align-items: center;

    width: 25px;
    height: 25px;

    margin-bottom: 45px;
}

.support-icon img {
    width: 24px;
    height: 24px;

    filter:
        invert(67%)
        sepia(88%)
        saturate(790%)
        hue-rotate(28deg)
        brightness(89%)
        contrast(88%);
}

.support-item h3 {
    margin-bottom: 14px;

    font-size: 1.2rem;
}

.support-item p {
    max-width: 240px;

    margin: 0;

    color: var(--grey);

    font-size: 0.88rem;
}


/* ---------------------------------------------------------
   GRAPHIC CTA
   --------------------------------------------------------- */

.graphic-cta {
    width: 100%;

    background: var(--dark);
}

.graphic-cta-content {
    width: min(
        calc(100% - 48px),
        var(--max-width)
    );

    min-height: 560px;

    margin-inline: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        100px
        0;
}

.graphic-cta-content .section-label {
    margin-bottom: 45px;
}

.graphic-cta-content h2 {
    max-width: 800px;

    color: var(--white);
}

.graphic-cta-content p {
    max-width: 620px;

    margin-top: 30px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 1rem;
}

.graphic-cta-content .button {
    align-self: flex-start;

    margin-top: 28px;
}


/* ---------------------------------------------------------
   CREATION PAGE – TABLET
   --------------------------------------------------------- */

@media (max-width: 1050px) {

    .page-hero {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, 0.8fr);
    }

    .page-hero-content {
        padding:
            70px
            45px
            70px
            55px;
    }

    .detail-intro-grid {
        gap: 60px;
    }

    .feature-block-content {
        padding:
            70px
            45px
            70px
            55px;
    }

    .supports-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .support-item:nth-child(2) {
        border-right: 0;
    }

    .support-item:nth-child(3),
    .support-item:nth-child(4) {
        border-top:
            1px solid var(--grey-border);
    }
}


/* ---------------------------------------------------------
   CREATION PAGE – MOBILE
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .page-hero {
        display: flex;
        flex-direction: column;

        min-height: 0;
    }

    .page-hero-image {
        min-height: 350px;
        max-height: 52vh;
    }

    .page-hero-content {
        padding:
            60px
            24px
            70px;
    }

    .page-hero-content h1 {
        font-size:
            clamp(2.8rem, 13vw, 4.6rem);
    }

    .page-hero-text {
        font-size: 1rem;
    }

    .detail-intro-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .feature-block {
        display: flex;
        flex-direction: column;
    }

    .feature-block-image {
        min-height: 380px;
        order: 1;
    }

    .feature-block-content {
        padding:
            75px
            24px
            80px;

        order: 2;
    }

    .supports {
        padding-right: 18px;
        padding-left: 18px;
    }

    .supports-heading {
        display: block;

        margin-bottom: 45px;
    }

    .supports-heading > p {
        margin-top: 25px;
    }

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

    .support-item,
    .support-item:not(:first-child) {
        min-height: 0;

        padding:
            30px
            0;

        border-right: 0;

        border-bottom:
            1px solid var(--grey-border);
    }

    .support-item:first-child {
        padding-top: 0;
    }

    .support-item:last-child {
        border-bottom: 0;
    }

    .support-item:nth-child(3),
    .support-item:nth-child(4) {
        border-top: 0;
    }

    .support-icon {
        margin-bottom: 25px;
    }

    .graphic-cta-content {
        width: calc(100% - 36px);

        min-height: 0;

        padding:
            80px
            0;
    }
}


/* ---------------------------------------------------------
   CREATION PAGE – SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .page-hero-image {
        min-height: 280px;
    }

    .page-hero-content {
        padding-top: 50px;
    }

    .feature-block-image {
        min-height: 300px;
    }

    .graphic-cta-content {
        padding:
            65px
            0;
    }
}


/* =========================================================
   g.g.pub! – LEGAL PAGES
   ========================================================= */


/* ---------------------------------------------------------
   LEGAL HERO
   --------------------------------------------------------- */

.legal-hero {
    min-height: 520px;
}

.legal-hero .page-hero-image {
    min-height: 520px;
}

.legal-hero .page-hero-content {
    padding-top: 70px;
    padding-bottom: 70px;
}


/* ---------------------------------------------------------
   LEGAL CONTENT
   --------------------------------------------------------- */

.legal-content {
    width: min(
        calc(100% - 48px),
        var(--max-width)
    );

    margin-left: auto;
    margin-right: auto;

    padding-top: 100px;
    padding-bottom: 100px;
}

.legal-content > .section-label {
    margin-bottom: 60px;
}


/* ---------------------------------------------------------
   LEGAL GRID
   --------------------------------------------------------- */

.legal-grid {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.8fr)
        minmax(0, 1.2fr);

    column-gap: 100px;

    align-items: start;
}

.legal-intro h2 {
    max-width: 500px;
}

.legal-text {
    max-width: 680px;

    color: var(--grey);

    font-size: 0.95rem;
    line-height: 1.8;
}

.legal-text p {
    margin-top: 0;
    margin-bottom: 24px;
}

.legal-text p:last-child {
    margin-bottom: 0;
}

.legal-text h3 {
    margin-top: 40px;
    margin-bottom: 15px;

    color: var(--dark);

    font-size: 1.15rem;
}

.legal-text a {
    color: var(--dark);

    text-decoration: underline;

    text-decoration-color:
        var(--green);

    text-underline-offset: 3px;
}

.legal-text a:hover {
    color: var(--green);
}


/* ---------------------------------------------------------
   LEGAL FACTS
   --------------------------------------------------------- */

.legal-facts {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    margin-top: 80px;

    border-top:
        1px solid var(--grey-border);

    border-bottom:
        1px solid var(--grey-border);
}

.legal-fact {
    min-height: 125px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        25px
        30px
        25px
        0;

    border-right:
        1px solid var(--grey-border);
}

.legal-fact:not(:first-child) {
    padding-left: 30px;
}

.legal-fact:last-child {
    border-right: 0;
}

.legal-fact-label {
    display: block;

    margin-bottom: 9px;

    color: var(--grey);

    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-fact strong {
    color: var(--dark);

    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
}


/* ---------------------------------------------------------
   LEGAL DARK SECTION
   --------------------------------------------------------- */

.legal-dark {
    width: 100%;

    background: var(--dark);
}

.legal-dark-inner {
    width: min(
        calc(100% - 48px),
        var(--max-width)
    );

    margin-left: auto;
    margin-right: auto;

    padding-top: 100px;
    padding-bottom: 100px;
}

.legal-dark-inner > .section-label {
    margin-bottom: 50px;
}

.legal-dark-inner h2 {
    max-width: 720px;

    margin-bottom: 65px;

    color: var(--white);
}

.legal-dark-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 80px;

    max-width: 800px;
}

.legal-dark-grid > div {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.legal-dark-label {
    color: rgba(255, 255, 255, 0.55);

    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-dark-grid strong {
    color: var(--white);

    font-family: var(--font-heading);
    font-size: 1.05rem;
}


/* ---------------------------------------------------------
   LEGAL SIMPLE
   --------------------------------------------------------- */

.legal-simple {
    width: 100%;

    padding-top: 100px;
    padding-bottom: 100px;
}

.legal-simple-inner {
    width: min(
        calc(100% - 48px),
        var(--max-width)
    );

    margin-left: auto;
    margin-right: auto;
}

.legal-simple-inner > .section-label {
    margin-bottom: 50px;
}

.legal-simple-inner h2 {
    max-width: 850px;

    margin-bottom: 35px;
}

.legal-simple-inner p {
    max-width: 760px;

    margin-top: 0;
    margin-bottom: 20px;

    color: var(--grey);

    font-size: 0.95rem;
    line-height: 1.8;
}

.legal-simple-inner p:last-child {
    margin-bottom: 0;
}

.legal-simple-inner a {
    color: var(--dark);

    text-decoration: underline;

    text-decoration-color:
        var(--green);

    text-underline-offset: 3px;
}

.legal-simple-inner a:hover {
    color: var(--green);
}


/* ---------------------------------------------------------
   ALTERNATING BACKGROUND
   --------------------------------------------------------- */

.legal-simple-grey {
    background: var(--grey-light);
}


/* ---------------------------------------------------------
   LEGAL SECTION ICONS
   --------------------------------------------------------- */

.legal-content .section-icon,
.legal-simple .section-icon,
.legal-dark .section-icon {
    display: inline-flex;

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

    width: 28px;
    height: 28px;
}

.legal-content .section-icon img,
.legal-simple .section-icon img,
.legal-dark .section-icon img {
    width: 24px;
    height: 24px;
}


/* ---------------------------------------------------------
   LEGAL LIST
   --------------------------------------------------------- */

.legal-list {
    margin:
        0
        0
        25px;

    padding-left: 1.25rem;

    color: var(--grey);

    font-size: 0.95rem;
    line-height: 1.8;
}

.legal-list li {
    margin-bottom: 8px;
}

.legal-list li:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   LEGAL TEXT ON DARK BACKGROUND
   --------------------------------------------------------- */

.legal-text-light {
    max-width: 800px;

    color: rgba(255, 255, 255, 0.72);
}

.legal-text-light p {
    margin-top: 0;
    margin-bottom: 24px;

    color: rgba(255, 255, 255, 0.72);
}

.legal-text-light p:last-child {
    margin-bottom: 0;
}

.legal-text-light a {
    color: var(--white);

    text-decoration: underline;

    text-decoration-color:
        var(--green);

    text-underline-offset: 3px;
}


/* ---------------------------------------------------------
   LEGAL – TABLET
   --------------------------------------------------------- */

@media (max-width: 1050px) {

    .legal-grid {
        column-gap: 60px;
    }

    .legal-facts {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .legal-fact:nth-child(2) {
        border-right: 0;
    }

    .legal-fact:nth-child(3),
    .legal-fact:nth-child(4) {
        border-top:
            1px solid var(--grey-border);
    }

    .legal-dark-grid {
        column-gap: 50px;
    }
}


/* ---------------------------------------------------------
   LEGAL – MOBILE
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .legal-hero {
        min-height: 0;
    }

    .legal-hero .page-hero-image {
        min-height: 300px;
    }

    .legal-hero .page-hero-content {
        padding-top: 55px;
        padding-bottom: 65px;
    }

    .legal-content {
        width: calc(100% - 36px);

        padding-top: 75px;
        padding-bottom: 75px;
    }

    .legal-content > .section-label {
        margin-bottom: 40px;
    }

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

        row-gap: 35px;
    }

    .legal-facts {
        grid-template-columns: 1fr;

        margin-top: 55px;
    }

    .legal-fact,
    .legal-fact:not(:first-child) {
        min-height: 100px;

        padding:
            22px
            0;

        border-right: 0;

        border-bottom:
            1px solid var(--grey-border);
    }

    .legal-fact:first-child {
        padding-top: 25px;
    }

    .legal-fact:last-child {
        border-bottom: 0;
    }

    .legal-fact:nth-child(3),
    .legal-fact:nth-child(4) {
        border-top: 0;
    }

    .legal-dark-inner {
        width: calc(100% - 36px);

        padding-top: 75px;
        padding-bottom: 75px;
    }

    .legal-dark-inner > .section-label {
        margin-bottom: 40px;
    }

    .legal-dark-inner h2 {
        margin-bottom: 45px;
    }

    .legal-dark-grid {
        grid-template-columns: 1fr;

        row-gap: 30px;
    }

    .legal-simple {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .legal-simple-inner {
        width: calc(100% - 36px);
    }

    .legal-simple-inner > .section-label {
        margin-bottom: 40px;
    }
}


/* ---------------------------------------------------------
   LEGAL – SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .legal-content,
    .legal-simple {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .legal-dark-inner {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}


/* =========================================================
   FOOTER – NEUE STRUKTUR
   ========================================================= */

.site-footer {
    background: var(--dark);

    color:
        rgba(255, 255, 255, 0.68);
}

.site-footer-inner {
    width: min(
        calc(100% - 48px),
        var(--max-width)
    );

    margin-left: auto;
    margin-right: auto;

    padding-top: 75px;
    padding-bottom: 70px;

    display: grid;

    grid-template-columns:
        1.1fr
        1.4fr
        0.9fr;

    gap: 70px;

    align-items: start;
}


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

.site-footer-brand img {
    display: block;

    width: 170px;
    height: auto;

    margin-bottom: 22px;
}

.site-footer-brand p {
    max-width: 280px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 0.85rem;
    line-height: 1.7;
}


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

.site-footer-links {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 45px;
}

.site-footer h3 {
    margin:
        0
        0
        20px;

    color: var(--white);

    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-footer-links a,
.site-footer-contact a {
    display: block;

    width: fit-content;

    margin-bottom: 11px;

    color:
        rgba(255, 255, 255, 0.65);

    font-size: 0.9rem;

    text-decoration: none;

    transition:
        color 0.2s ease;
}

.site-footer-links a:hover,
.site-footer-contact a:hover {
    color: var(--green);
}


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

.site-footer-contact p {
    margin-top: 22px;

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 0.85rem;
    line-height: 1.7;
}


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

.site-footer-bottom {
    width: min(
        calc(100% - 48px),
        var(--max-width)
    );

    margin-left: auto;
    margin-right: auto;

    padding-top: 22px;
    padding-bottom: 25px;

    border-top:
        1px solid rgba(255, 255, 255, 0.12);

    display: flex;

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

    gap: 25px;
}

.site-footer-bottom p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.4);

    font-size: 0.75rem;
}

.site-footer-bottom div {
    display: flex;

    align-items: center;

    gap: 10px;
}

.site-footer-bottom a {
    color:
        rgba(255, 255, 255, 0.48);

    font-size: 0.75rem;

    text-decoration: none;
}

.site-footer-bottom a:hover {
    color: var(--green);
}


/* ---------------------------------------------------------
   FOOTER – RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 950px) {

    .site-footer-inner {
        grid-template-columns:
            1fr 1fr;

        gap: 55px;
    }

    .site-footer-contact {
        grid-column: 1 / -1;
    }
}


@media (max-width: 650px) {

    .site-footer-inner {
        width: calc(100% - 36px);

        grid-template-columns: 1fr;

        gap: 45px;

        padding-top: 60px;
        padding-bottom: 55px;
    }

    .site-footer-contact {
        grid-column: auto;
    }

    .site-footer-links {
        grid-template-columns:
            1fr 1fr;

        gap: 30px;
    }

    .site-footer-bottom {
        width: calc(100% - 36px);

        flex-direction: column;

        align-items: flex-start;

        padding-top: 20px;
        padding-bottom: 22px;
    }
}


@media (max-width: 420px) {

    .site-footer-links {
        grid-template-columns: 1fr;
    }
}

.approach-icon {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    width: 25px;
    height: 25px;
}

.approach-icon img {
    width: 23px;
    height: 23px;

    filter:
        invert(67%)
        sepia(88%)
        saturate(790%)
        hue-rotate(28deg)
        brightness(89%)
        contrast(88%);
}

/* =========================================================
   STARTSEITE – APPROACH PUNKTE AUF DESKTOP AUSRICHTEN
   ========================================================= */

@media (min-width: 801px) {

    body.home .approach-content {
        display: flex;
        flex-direction: column;
    }

    body.home .approach-points {
        padding-top: 85px;
        margin-top: auto;
    }

}