/* =========================================================
   LEISTUNGEN
   NetSphere Security
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    overflow-x: hidden;
}

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


/*
    1px Sentinel direkt über der Navbar.

    Er erlaubt dem JavaScript zu erkennen,
    wann die Navbar den Sticky-Zustand erreicht hat.
*/

.navbar-sentinel {
    width: 100%;
    height: 1px;
    margin-bottom: -1px;
    pointer-events: none;
}


/*
    Desktop:

    Navbar bleibt optisch exakt wie bisher.
    Kein Shadow im Ausgangszustand.
*/

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    padding: 0 7vw;

    box-sizing: border-box;

    border-bottom:
        1px solid rgba(53, 63, 73, 0.10);

    background-color:
        var(--netwhite);

    box-shadow:
        0 0 0 rgba(53, 63, 73, 0);

    transition:
        box-shadow 240ms ease;
}


/*
    Wird durch IntersectionObserver gesetzt,
    sobald die Navbar oben "klebt".
*/

.navbar.is-stuck {
    box-shadow:
        0 8px 28px rgba(53, 63, 73, 0.10);
}


.nav-links a.nav-active {
    position: relative;
    color: var(--netdark) !important;
    text-decoration: none;
}

.nav-links a.nav-active::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;

    height: 4px;

    background-color: var(--netgreen);
    border-radius: 2px;
}

.nav-links a.nav-active:hover {
    color: var(--netdark) !important;
    text-decoration: none;
}


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

.services-hero {
    position: relative;

    overflow: hidden;

    padding:
        125px 7vw 115px;

    background-color:
        var(--netwhite);
}


.services-hero-inner {
    position: relative;

    z-index: 2;

    width:
        min(100%, 1500px);

    margin:
        0 auto;
}


.section-kicker {
    display: block;

    margin-bottom:
        24px;

    color:
        var(--netgold);

    font-family:
        'Montserrat-Bold',
        sans-serif;

    font-size:
        0.76rem;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


.services-hero h1 {
    max-width:
        1100px;

    margin:
        0;

    color:
        var(--netdark);

    font-size:
        clamp(
            3.7rem,
            5.5vw,
            6.5rem
        );

    font-weight:
        400;

    letter-spacing:
        -0.05em;

    line-height:
        1.02;
}


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


.services-intro {
    max-width:
        760px;

    margin:
        45px 0 0;

    color:
        rgba(
            53,
            63,
            73,
            0.72
        );

    font-size:
        1.12rem;

    line-height:
        1.75;
}


/* ---------------------------------------------------------
   Kleiner geometrischer Markenakzent
   --------------------------------------------------------- */

.services-accent {
    position: absolute;

    right:
        7vw;

    bottom:
        0;

    width:
        160px;

    height:
        7px;

    display:
        flex;
}


.accent-green {
    width:
        75%;

    background-color:
        var(--netgreen);
}


.accent-gold {
    width:
        25%;

    background-color:
        var(--netgold);
}


/* =========================================================
   LEISTUNGSÜBERSICHT
   ========================================================= */

.services-section {
    padding:
        20px 7vw 150px;

    background-color:
        var(--netwhite);
}


.services-container {
    width:
        min(100%, 1500px);

    margin:
        0 auto;
}


.services-list {
    border-top:
        1px solid rgba(
            53,
            63,
            73,
            0.16
        );
}


/* ---------------------------------------------------------
   Einzelne Leistung
   --------------------------------------------------------- */

.service-item {
    display:
        grid;

    grid-template-columns:
        120px minmax(0, 1fr);

    gap:
        50px;

    padding:
        58px 20px 58px 0;

    border-bottom:
        1px solid rgba(
            53,
            63,
            73,
            0.16
        );

    transition:
        padding-left 220ms ease,
        background-color 220ms ease;
}


.service-item:hover {
    padding-left:
        20px;

    background-color:
        rgba(
            84,
            138,
            119,
            0.035
        );
}


.service-number {
    padding-top:
        8px;

    color:
        var(--netgold);

    font-family:
        'Montserrat-Bold',
        sans-serif;

    font-size:
        0.78rem;

    letter-spacing:
        0.16em;
}


.service-content {
    max-width:
        950px;
}


.service-category {
    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--netgreen);

    font-family:
        'Montserrat-Bold',
        sans-serif;

    font-size:
        0.72rem;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.service-content h2 {
    margin:
        0 0 18px;

    color:
        var(--netdark);

    font-size:
        clamp(
            1.8rem,
            2.5vw,
            2.7rem
        );

    font-weight:
        400;

    letter-spacing:
        -0.035em;

    line-height:
        1.15;
}


.service-content p {
    max-width:
        850px;

    margin:
        0;

    color:
        rgba(
            53,
            63,
            73,
            0.72
        );

    font-size:
        1rem;

    line-height:
        1.75;
}


/* =========================================================
   TAGS
   ========================================================= */

.service-tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        26px;
}


.service-tags span {
    padding:
        7px 12px;

    border:
        1px solid rgba(
            53,
            63,
            73,
            0.13
        );

    border-radius:
        100px;

    color:
        rgba(
            53,
            63,
            73,
            0.75
        );

    font-size:
        0.76rem;

    background-color:
        rgba(
            255,
            255,
            254,
            0.7
        );
}


/* =========================================================
   VORGEHENSWEISE
   ========================================================= */

.approach-section {
    padding:
        135px 7vw;

    background-color:
        #f6f8f7;
}


.approach-container {
    width:
        min(100%, 1500px);

    margin:
        0 auto;
}


.approach-heading {
    max-width:
        850px;

    margin-bottom:
        85px;
}


.approach-heading h2 {
    margin:
        0;

    color:
        var(--netdark);

    font-size:
        clamp(
            2.8rem,
            4.5vw,
            5rem
        );

    font-weight:
        400;

    letter-spacing:
        -0.045em;

    line-height:
        1.06;
}


/* ---------------------------------------------------------
   Vier Schritte
   --------------------------------------------------------- */

.approach-grid {
    display:
        grid;

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

    border-top:
        1px solid rgba(
            53,
            63,
            73,
            0.16
        );
}


.approach-item {
    min-height:
        220px;

    padding:
        32px 35px 25px 0;
}


.approach-item:not(:last-child) {
    margin-right:
        35px;

    border-right:
        1px solid rgba(
            53,
            63,
            73,
            0.13
        );
}


.approach-item > span {
    color:
        var(--netgold);

    font-family:
        'Montserrat-Bold',
        sans-serif;

    font-size:
        0.72rem;

    letter-spacing:
        0.15em;
}


.approach-item h3 {
    margin:
        30px 0 15px;

    color:
        var(--netdark);

    font-size:
        1.35rem;

    font-weight:
        500;
}


.approach-item p {
    max-width:
        280px;

    margin:
        0;

    color:
        rgba(
            53,
            63,
            73,
            0.68
        );

    font-size:
        0.92rem;

    line-height:
        1.65;
}


/* =========================================================
   CTA
   ========================================================= */

.services-cta {
    padding:
        135px 7vw;

    background-color:
        var(--netdark);
}


.cta-inner {
    width:
        min(100%, 1500px);

    margin:
        0 auto;
}


.services-cta .section-kicker {
    color:
        var(--netgold);
}


.services-cta h2 {
    margin:
        0;

    color:
        var(--netwhite);

    font-size:
        clamp(
            3rem,
            4.5vw,
            5rem
        );

    font-weight:
        400;

    letter-spacing:
        -0.045em;

    line-height:
        1.05;
}


.services-cta p {
    max-width:
        700px;

    margin:
        35px 0 0;

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

    font-size:
        1rem;

    line-height:
        1.75;
}


.cta-actions {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        30px;

    margin-top:
        45px;
}


/* ---------------------------------------------------------
   CTA Primary
   --------------------------------------------------------- */

.cta-primary {
    display:
        inline-block;

    padding:
        15px 24px;

    border:
        2px solid var(--netgold);

    border-radius:
        6px;

    background-color:
        var(--netgold);

    color:
        white;

    font-family:
        'Montserrat-Bold',
        sans-serif;

    font-size:
        0.9rem;

    text-decoration:
        none;

    transition:
        background-color 200ms ease,
        color 200ms ease,
        transform 200ms ease;
}


.cta-primary:hover {
    background-color:
        transparent;

    color:
        var(--netwhite);

    transform:
        translateY(-2px);
}


/* ---------------------------------------------------------
   CTA Secondary
   --------------------------------------------------------- */

.cta-secondary {
    color:
        rgba(
            255,
            255,
            254,
            0.75
        );

    font-size:
        0.9rem;

    text-decoration:
        none;

    transition:
        color 180ms ease;
}


.cta-secondary:hover {
    color:
        var(--netwhite);
}


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

.site-footer {
    padding:
        40px 7vw;

    background-color:
        #2d363f;

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


.footer-inner {
    width:
        min(100%, 1500px);

    margin:
        0 auto;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        40px;
}


.footer-brand {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    font-size:
        0.8rem;
}


.footer-brand strong {
    color:
        var(--netwhite);

    font-family:
        'Montserrat-Bold',
        sans-serif;

    font-size:
        0.9rem;
}


.footer-links {
    display:
        flex;

    gap:
        30px;
}


.footer-links a {
    color:
        rgba(
            255,
            255,
            254,
            0.65
        );

    font-size:
        0.8rem;

    text-decoration:
        none;

    transition:
        color 180ms ease;
}


.footer-links a:hover {
    color:
        var(--netwhite);
}


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

@media (max-width: 1080px) {

    /*
        Globales style.css setzt die Navbar bei Tablet
        auf position: relative.

        Hier überschreiben wir es wieder,
        damit sie auch auf Tablet sticky bleibt.
    */

    .navbar {
        position:
            sticky;

        top:
            0;

        z-index:
            1000;

        /*
            Tablet / Mobile:
            Shadow bleibt dauerhaft sichtbar.
        */

        box-shadow:
            0 7px 24px rgba(
                53,
                63,
                73,
                0.09
            );
    }


    /*
        JS-Klasse hat auf Tablet keine optische
        Auswirkung auf den Shadow.
    */

    .navbar.is-stuck {
        box-shadow:
            0 7px 24px rgba(
                53,
                63,
                73,
                0.09
            );
    }


    .services-hero {
        padding:
            90px 6vw 90px;
    }


    .services-section {
        padding:
            10px 6vw 110px;
    }


    .service-item {
        grid-template-columns:
            80px minmax(0, 1fr);

        gap:
            30px;
    }


    .approach-section {
        padding:
            100px 6vw;
    }


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


    .approach-item {
        border-bottom:
            1px solid rgba(
                53,
                63,
                73,
                0.13
            );
    }


    .approach-item:not(:last-child) {
        margin-right:
            25px;
    }


    .services-cta {
        padding:
            100px 6vw;
    }

}


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

@media (max-width: 640px) {

    /* -----------------------------------------------------
       Hero
       ----------------------------------------------------- */

    .services-hero {
        padding:
            70px 20px 70px;
    }


    .services-hero h1 {
        font-size:
            clamp(
                2.7rem,
                12vw,
                4rem
            );

        line-height:
            1.04;
    }


    .services-intro {
        margin-top:
            32px;

        font-size:
            0.96rem;

        line-height:
            1.7;
    }


    .services-accent {
        right:
            20px;

        width:
            100px;
    }


    /* -----------------------------------------------------
       Leistungen
       ----------------------------------------------------- */

    .services-section {
        padding:
            0 20px 90px;
    }


    .service-item {
        display:
            block;

        padding:
            36px 0;
    }


    .service-item:hover {
        padding-left:
            0;
    }


    .service-number {
        display:
            block;

        margin-bottom:
            22px;
    }


    .service-content h2 {
        font-size:
            1.7rem;
    }


    .service-content p {
        font-size:
            0.93rem;
    }


    .service-tags {
        gap:
            7px;

        margin-top:
            22px;
    }


    /* -----------------------------------------------------
       Vorgehen
       ----------------------------------------------------- */

    .approach-section {
        padding:
            85px 20px;
    }


    .approach-heading {
        margin-bottom:
            55px;
    }


    .approach-heading h2 {
        font-size:
            2.6rem;
    }


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


    .approach-item {
        min-height:
            auto;

        padding:
            30px 0;
    }


    .approach-item:not(:last-child) {
        margin-right:
            0;

        border-right:
            0;
    }


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

    .services-cta {
        padding:
            85px 20px;
    }


    .services-cta h2 {
        font-size:
            2.7rem;
    }


    .cta-actions {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            24px;
    }


    /* -----------------------------------------------------
       Footer
       ----------------------------------------------------- */

    .site-footer {
        padding:
            35px 20px;
    }


    .footer-inner {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            30px;
    }


    .footer-links {
        flex-wrap:
            wrap;

        gap:
            16px 24px;
    }

}