/* =========================================================
   AKTUELLES – ARTICLE
   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;
}


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

.article-hero {
    padding:
        70px 7vw 0;

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


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

    margin:
        0 auto;
}


/* =========================================================
   BACK LINK
   ========================================================= */

.article-back {
    width:
        fit-content;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        58px;

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

    font-size:
        0.78rem;

    text-decoration:
        none;

    transition:
        color 180ms ease,
        transform 180ms ease;
}


.article-back span:first-child {
    color:
        var(--netgreen);

    font-size:
        1rem;
}


.article-back:hover {
    color:
        var(--netdark);

    transform:
        translateX(-3px);
}


/* =========================================================
   ARTICLE HEADING
   ========================================================= */

.article-heading {
    width:
        100%;
}


.article-heading-main {
    display:
        grid;

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

    gap:
        clamp(
            70px,
            8vw,
            140px
        );

    align-items:
        end;
}


.article-title-column {
    max-width:
        1050px;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.article-category-row {
    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    margin-bottom:
        22px;
}


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

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

    font-size:
        0.72rem;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.article-number {
    color:
        var(--netgold);

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

    font-size:
        0.70rem;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


/* =========================================================
   MAIN TITLE
   ========================================================= */

.article-heading h1 {
    max-width:
        920px;

    margin:
        0;

    color:
        var(--netdark);

    font-size:
    clamp(
        2.4rem,
        3.2vw,
        3.75rem
    );

    font-weight:
        400;

    letter-spacing:
        -0.046em;

    line-height:
        1.055;
}


.article-heading h1 span {
    color:
        var(--netgreen);
}


.article-subtitle {
    max-width:
        730px;

    margin:
        29px 0 0;

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

    font-size:
        1rem;

    line-height:
        1.7;
}


/* =========================================================
   TOP RIGHT TOPICS
   ========================================================= */

.article-topics {
    align-self:
        end;

    padding-bottom:
        2px;
}


.article-topics-label {
    display:
        block;

    margin-bottom:
        18px;

    color:
        var(--netgold);

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

    font-size:
        0.70rem;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.article-topics-tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.article-topics-tags span {
    padding:
        7px 10px;

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

    border-radius:
        100px;

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

    font-size:
        0.70rem;

    line-height:
        1;
}


.article-topics-link {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin-top:
        24px;

    padding-top:
        18px;

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

    color:
        var(--netdark);

    font-size:
        0.80rem;

    text-decoration:
        none;

    transition:
        color 180ms ease;
}


.article-topics-link span:last-child {
    color:
        var(--netgreen);

    font-size:
        1.05rem;

    transition:
        transform 180ms ease;
}


.article-topics-link:hover {
    color:
        var(--netgreen);
}


.article-topics-link:hover span:last-child {
    transform:
        translateX(5px);
}


/* =========================================================
   FULL WIDTH META BAR
   ========================================================= */

.article-meta {
    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin-top:
        60px;

    padding:
        20px 0;

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

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


.article-meta-left {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;

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

    font-size:
        0.75rem;
}


.article-meta-left > span:first-child {
    color:
        var(--netdark);

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


.meta-divider {
    color:
        var(--netgold);
}


.article-reading-time {
    color:
        rgba(
            53,
            63,
            73,
            0.58
        );

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

    font-size:
        0.71rem;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


/* =========================================================
   ARTICLE SECTION
   ========================================================= */

.article-section {
    padding:
        65px 7vw 140px;

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


.article-layout {
    width:
        min(100%, 1500px);

    margin:
        0 auto;
}


.article-content {
    max-width:
        900px;
}


/* =========================================================
   SECTION TITLES
   ========================================================= */

.article-content h2 {
    max-width:
        820px;

    margin:
        58px 0 21px;

    color:
        var(--netdark);

    font-size:
        clamp(
            1.75rem,
            2.35vw,
            2.55rem
        );

    font-weight:
        400;

    letter-spacing:
        -0.033em;

    line-height:
        1.18;
}


.article-content h2:first-child {
    margin-top:
        0;
}


/* =========================================================
   BODY TEXT
   ========================================================= */

.article-content > p {
    max-width:
        800px;

    margin:
        0 0 24px;

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

    font-size:
        1rem;

    line-height:
        1.85;
}


/* =========================================================
   AUTHOR
   Gehört optisch noch zum eigentlichen Artikel.
   ========================================================= */

.article-author {
    max-width:
        800px;

    margin-top:
        72px;

    padding:
        0;
}


.author-signoff {
    margin:
        0 0 22px !important;

    color:
        rgba(
            53,
            63,
            73,
            0.62
        ) !important;

    font-size:
        0.90rem !important;

    line-height:
        1.6 !important;
}


.author-info {
    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.author-info strong {
    color:
        var(--netdark);

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

    font-size:
        0.90rem;
}


.author-info span {
    color:
        rgba(
            53,
            63,
            73,
            0.55
        );

    font-size:
        0.79rem;
}


/* =========================================================
   ARTICLE END DIVIDER
   ========================================================= */

.article-end-divider {
    max-width:
        800px;

    height:
        1px;

    margin:
        58px 0 48px;

    background-color:
        rgba(
            53,
            63,
            73,
            0.17
        );
}


/* =========================================================
   KERNESSSENZ
   ========================================================= */

.article-highlight {
    max-width:
        800px;

    margin:
        0;

    padding:
        31px 35px;

    border:
        1px solid rgba(
            84,
            138,
            119,
            0.18
        );

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


.highlight-label {
    display:
        block;

    margin-bottom:
        16px;

    color:
        var(--netgreen);

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

    font-size:
        0.70rem;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.article-highlight p {
    margin:
        0;

    color:
        var(--netdark);

    font-size:
        0.98rem;

    line-height:
        1.8;
}


/* =========================================================
   SOURCES
   Keine Trennlinie.
   Keine Tags.
   Bewusster Abstand zur Kernessenz.
   ========================================================= */

.article-sources {
    max-width:
        800px;

    margin-top:
        58px;

    padding:
        0;
}


.sources-label {
    display:
        block;

    margin-bottom:
        20px;

    color:
        var(--netdark);

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

    font-size:
        0.75rem;

    letter-spacing:
        0.04em;
}


.article-sources ul {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.article-sources li {
    margin:
        0 0 12px;

    padding:
        0;
}


.article-sources a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

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

    font-size:
        0.85rem;

    line-height:
        1.6;

    text-decoration:
        none;

    transition:
        color 180ms ease;
}


.article-sources a span {
    color:
        var(--netgreen);
}


.article-sources a:hover {
    color:
        var(--netgreen);
}


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


    .article-hero {
        padding:
            62px 6vw 0;
    }


    .article-back {
        margin-bottom:
            52px;
    }


    .article-heading-main {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(220px, 280px);

        gap:
            55px;
    }


    .article-section {
        padding:
            58px 6vw 110px;
    }


}


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

@media (max-width: 760px) {


    .article-hero {
        padding:
            48px 20px 0;
    }


    .article-back {
        margin-bottom:
            43px;
    }


    .article-heading-main {
        display:
            block;
    }


    .article-category-row {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            8px;

        margin-bottom:
            19px;
    }


    .article-heading h1 {
        font-size:
            clamp(
                2.25rem,
                10vw,
                3.35rem
            );

        line-height:
            1.055;
    }


    .article-subtitle {
        margin-top:
            26px;

        font-size:
            0.95rem;
    }


    .article-topics {
        margin-top:
            40px;

        padding-top:
            27px;

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


    .article-meta {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;

        margin-top:
            40px;

        padding:
            17px 0;
    }


    .article-section {
        padding:
            50px 20px 85px;
    }


    .article-content h2 {
        margin-top:
            48px;

        font-size:
            1.72rem;
    }


    .article-content > p {
        font-size:
            0.93rem;

        line-height:
            1.8;
    }


    .article-author {
        margin-top:
            58px;
    }


    .article-end-divider {
        margin:
            48px 0 40px;
    }


    .article-highlight {
        padding:
            25px 22px;
    }


    .article-sources {
        margin-top:
            48px;
    }


    .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) {


    .article-heading h1 {
        font-size:
            2.15rem;
    }


    .article-content h2 {
        font-size:
            1.6rem;
    }


}