/* =========================================================
   AKTUELLES
   NetSphere Security
   ========================================================= */


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

.navbar-sentinel {
    width: 100%;
    height: 1px;

    margin-bottom: -1px;

    pointer-events: none;
}


.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;
}


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


/* Active Navigation */

.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;

    border-radius: 2px;

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


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

    text-decoration:
        none;
}


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

.news-hero {
    position: relative;

    overflow: hidden;

    padding:
        125px 7vw 115px;

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


.news-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;
}


.news-hero h1 {
    max-width:
        1200px;

    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;
}


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


.news-intro {
    max-width:
        790px;

    margin:
        45px 0 0;

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

    font-size:
        1.12rem;

    line-height:
        1.75;
}


/* Brand Accent */

.news-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);
}


/* =========================================================
   NEWS SECTION
   ========================================================= */

.news-section {
    padding:
        105px 7vw 150px;

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

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


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

    margin:
        0 auto;
}


/* =========================================================
   SECTION INTRO
   ========================================================= */

.news-heading {
    display:
        grid;

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

    gap:
        50px;

    align-items:
        start;

    margin-bottom:
        60px;
}


.news-heading-label {
    padding-top:
        5px;

    color:
        var(--netgold);

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

    font-size:
        0.76rem;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.news-heading p {
    margin:
        0;

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

    font-size:
        0.96rem;

    line-height:
        1.75;
}


/* =========================================================
   NEWS LIST
   ========================================================= */

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


/* =========================================================
   SINGLE NEWS CARD
   ========================================================= */

.news-card {
    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
        );

    color:
        inherit;

    text-decoration:
        none;

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


.news-card:hover {
    padding-left:
        20px;

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


.news-card:focus-visible {
    outline:
        2px solid var(--netgreen);

    outline-offset:
        4px;
}


/* =========================================================
   NUMBER
   ========================================================= */

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

    color:
        var(--netgold);

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

    font-size:
        0.78rem;

    letter-spacing:
        0.16em;
}


/* =========================================================
   NEWS CONTENT
   ========================================================= */

.news-content {
    width:
        100%;

    max-width:
        1100px;
}


/* Meta */

.news-meta {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        15px;
}


.news-category {
    color:
        var(--netgreen);

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

    font-size:
        0.72rem;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.news-meta time {
    flex-shrink:
        0;

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

    font-size:
        0.72rem;

    letter-spacing:
        0.03em;
}


/* Title */

.news-content h2 {
    max-width:
        1000px;

    margin:
        0;

    color:
        var(--netdark);

    font-size:
        clamp(
            1.9rem,
            2.6vw,
            2.8rem
        );

    font-weight:
        400;

    letter-spacing:
        -0.038em;

    line-height:
        1.14;
}


/* Subtitle */

.news-subtitle {
    max-width:
        900px;

    margin:
        21px 0 0;

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

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

    font-size:
        0.93rem;

    line-height:
        1.65;
}


/* Summary */

.news-summary {
    max-width:
        900px;

    margin:
        15px 0 0;

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

    font-size:
        0.96rem;

    line-height:
        1.75;
}


/* =========================================================
   CARD BOTTOM
   ========================================================= */

.news-bottom {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        45px;

    margin-top:
        30px;
}


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

.news-tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;
}


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

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

    border-radius:
        100px;

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

    background-color:
        rgba(
            255,
            255,
            254,
            0.70
        );

    font-size:
        0.74rem;

    line-height:
        1;
}


/* =========================================================
   READ LINK
   ========================================================= */

.news-read {
    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        13px;

    padding-bottom:
        7px;

    color:
        var(--netdark);

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

    font-size:
        0.8rem;

    white-space:
        nowrap;

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

    transition:
        color 180ms ease,
        border-color 180ms ease;
}


.news-arrow {
    color:
        var(--netgreen);

    font-size:
        1.15rem;

    line-height:
        1;

    transition:
        transform 180ms ease;
}


.news-card:hover .news-read {
    color:
        var(--netgreen);

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


.news-card:hover .news-arrow {
    transform:
        translateX(5px);
}


/* =========================================================
   TOPICS SECTION
   ========================================================= */

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

    background-color:
        #f6f8f7;
}


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

    margin:
        0 auto;
}


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

    margin-bottom:
        80px;
}


.topics-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;
}


.topics-heading p {
    max-width:
        680px;

    margin:
        30px 0 0;

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

    font-size:
        0.98rem;

    line-height:
        1.75;
}


/* =========================================================
   TOPIC GRID
   ========================================================= */

.topics-grid {
    display:
        grid;

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

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


.topic-item {
    min-height:
        230px;

    padding:
        34px 30px 40px 0;

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


.topic-item:not(:first-child) {
    padding-left:
        30px;
}


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


.topic-number {
    display:
        block;

    margin-bottom:
        35px;

    color:
        var(--netgold);

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

    font-size:
        0.73rem;

    letter-spacing:
        0.16em;
}


.topic-item h3 {
    margin:
        0;

    color:
        var(--netdark);

    font-size:
        1.25rem;

    font-weight:
        400;

    letter-spacing:
        -0.025em;

    line-height:
        1.3;
}


.topic-item p {
    margin:
        19px 0 0;

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

    font-size:
        0.87rem;

    line-height:
        1.7;
}


/* =========================================================
   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) {


    .navbar,
    .navbar.is-stuck {
        position:
            sticky;

        top:
            0;

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


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


    .news-section {
        padding:
            90px 6vw 115px;
    }


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

        gap:
            30px;
    }


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

        gap:
            30px;
    }


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


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


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


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


    .topic-item:nth-child(3) {
        padding-left:
            0;
    }


}


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

@media (max-width: 640px) {


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

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


    .news-hero h1 {
        font-size:
            clamp(
                2.55rem,
                11.5vw,
                3.8rem
            );

        line-height:
            1.04;
    }


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

        font-size:
            0.96rem;

        line-height:
            1.7;
    }


    .news-accent {
        right:
            20px;

        width:
            100px;
    }


    /* -----------------------------------------------------
       News
       ----------------------------------------------------- */

    .news-section {
        padding:
            75px 20px 90px;
    }


    .news-heading {
        display:
            block;

        margin-bottom:
            45px;
    }


    .news-heading-label {
        display:
            block;

        margin-bottom:
            20px;
    }


    .news-card {
        display:
            block;

        padding:
            38px 0;
    }


    .news-card:hover {
        padding-left:
            0;

        background-color:
            transparent;
    }


    .news-number {
        display:
            block;

        margin-bottom:
            23px;
    }


    .news-meta {
        display:
            flex;

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            8px;

        margin-bottom:
            14px;
    }


    .news-content h2 {
        font-size:
            1.72rem;

        line-height:
            1.17;
    }


    .news-subtitle {
        margin-top:
            18px;

        font-size:
            0.89rem;
    }


    .news-summary {
        margin-top:
            14px;

        font-size:
            0.92rem;
    }


    .news-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            28px;

        margin-top:
            27px;
    }


    .news-tags {
        gap:
            7px;
    }


    .news-read {
        padding-bottom:
            6px;
    }


    /* -----------------------------------------------------
       Topics
       ----------------------------------------------------- */

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


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


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


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


    .topic-item,
    .topic-item:not(:first-child),
    .topic-item:nth-child(3) {
        min-height:
            auto;

        padding:
            30px 0;

        border-right:
            0;

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


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


    .topic-number {
        margin-bottom:
            22px;
    }


    /* -----------------------------------------------------
       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;
    }


}


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

@media (max-width: 380px) {


    .news-hero h1 {
        font-size:
            2.35rem;
    }


    .news-content h2 {
        font-size:
            1.58rem;
    }


    .topics-heading h2 {
        font-size:
            2.35rem;
    }


}