/* =========================================================
   FOREN-STATISTIKEN – MIT FEINEN DIAGONALLINIEN
   ========================================================= */

#newsflash {
    width: 950px;
    margin: 28px auto 35px auto;
    font-family: Arial, sans-serif;
    color: #bdbdc8;
    box-sizing: border-box;
}


/* =========================================================
   FOREN-STATISTIKEN TITEL
   ========================================================= */

.nfmaintitle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    height: 32px;
    margin-bottom: 16px;

    font-family: 'Exo 2', sans-serif;
    font-size: 15px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 8px;

    color: #bdbdc8;
}

.nfmaintitle span {
    position: relative;
    z-index: 2;
    padding: 0 25px;
}

.nfmaintitle::before,
.nfmaintitle::after {
    content: "";
    position: absolute;
    top: 50%;

    width: 36%;
    height: 1px;

    background: #4A3A75;
}

.nfmaintitle::before {
    left: 0;
}

.nfmaintitle::after {
    right: 0;
}


/* =========================================================
   GRUPPENBOX
   ========================================================= */

.nfgruppen {
    position: relative;

    margin-bottom: 14px;
    padding: 16px 20px 15px 20px;

    background:
        linear-gradient(
            rgba(17, 19, 29, .92),
            rgba(17, 19, 29, .92)
        ),
        url(https://s13.gifyu.com/images/blf7f.png);

    background-size: cover;
    background-position: center 45%;

    border: 1px solid #4A3A75;

    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

.nfgruppen::after {
    content: "";
    position: absolute;
    inset: 0;

    box-shadow:
        inset 0 0 30px rgba(74, 58, 117, .08);

    pointer-events: none;
}


/* obere Gruppenzeile */

.nfgruppenoben {
    position: relative;
    z-index: 2;

    font-family: 'Exo 2', sans-serif;
    font-size: 50px;
    line-height: 22px;
    font-weight: 600;

    color: #bdbdc8;

    text-transform: uppercase;
    letter-spacing: .5px;
}

.nfgruppenoben span {
    padding: 0 4px;
}


/* untere Gruppenzeile */

.nfgruppenunten {
    position: relative;
    z-index: 2;

    margin-top: 4px;

    font-family: 'Exo 2', sans-serif;
    font-size: 50px;
    line-height: 20px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.nfgruppenunten b {
    padding: 0 4px;
    color: #bdbdc8;
    font-weight: 400;
}


/* =========================================================
   REIHEN
   ========================================================= */

.nfrow {
    display: grid;
    width: 100%;

    gap: 0;

    box-sizing: border-box;
}


/* obere Reihe */

.nftop {
    grid-template-columns: 1fr 1.08fr 1fr;
}


/* untere Reihe */

.nfbottom {
    grid-template-columns: 1.08fr 1fr;

    margin-top: 8px;
}


/* =========================================================
   ALLGEMEINE BOXEN
   ========================================================= */

.nfbox {
    position: relative;

    height: 225px;

    background: #11131D;

    border-top: 1px solid #4A3A75;
    border-bottom: 1px solid #4A3A75;

    box-sizing: border-box;

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   OBEN LINKS – WER IST ONLINE
   ========================================================= */

.nfbox-left {
    position: relative;
    z-index: 3;

    clip-path: polygon(
        0 0,
        100% 0,
        93% 100%,
        0 100%
    );

    border-left: 1px solid #4A3A75;
}


/* =========================================================
   OBEN MITTE – STATISTIKEN
   ========================================================= */

.nfbox-middle {
    position: relative;
    z-index: 2;

    /*
       stärkeres Ineinanderschieben:
       dadurch wird der schwarze Zwischenraum schmaler
    */

    margin-left: -34px;
    margin-right: -34px;

    clip-path: polygon(
        7% 0,
        100% 0,
        93% 100%,
        0 100%
    );
}


/* =========================================================
   OBEN RECHTS – WER WAR ONLINE
   ========================================================= */

.nfbox-right {
    position: relative;
    z-index: 1;

    /*
       zusätzlich etwas nach links ziehen
    */

    margin-left: -12px;

    clip-path: polygon(
        7% 0,
        100% 0,
        100% 100%,
        0 100%
    );

    border-right: 1px solid #4A3A75;
}


/* =========================================================
   VIOLETTE DIAGONALLINIE LINKS
   ========================================================= */

.nfbox-left::after {
    content: "";

    position: absolute;

    top: -15px;
    right: 12px;

    width: 1px;
    height: 260px;

    background: #4A3A75;

    transform: rotate(7deg);
    transform-origin: top center;

    z-index: 50;

    pointer-events: none;
}


/* =========================================================
   VIOLETTE DIAGONALLINIE MITTE
   ========================================================= */

.nfbox-middle::after {
    content: "";

    position: absolute;

    top: -15px;
    right: 12px;

    width: 1px;
    height: 260px;

    background: #4A3A75;

    transform: rotate(7deg);
    transform-origin: top center;

    z-index: 50;

    pointer-events: none;
}


/* =========================================================
   INNENABSTÄNDE OBEN
   ========================================================= */

.nfbox-left .nfheadline,
.nfbox-left .nfcontent {
    padding-right: 30px;
}


.nfbox-middle .nfheadline,
.nfbox-middle .nfcontent {
    padding-left: 35px;
    padding-right: 35px;
}


.nfbox-right .nfheadline,
.nfbox-right .nfcontent {
    padding-left: 30px;
}


/* =========================================================
   UNTERE BOXEN
   ========================================================= */

.nfbottom .nfbox {
    height: 175px;
}


/* =========================================================
   AKTUELLE ABWESENHEITEN
   ========================================================= */

.nfabsence {
    position: relative;
    z-index: 2;

    clip-path: polygon(
        0 0,
        100% 0,
        92% 100%,
        0 100%
    );

    border-left: 1px solid #4A3A75;
}


/* =========================================================
   SISTERS
   ========================================================= */

.nfsisterbox {
    position: relative;
    z-index: 1;

    /*
       deutlich weiter unter die linke Box ziehen
       = schwarzer Keil wird schmal
    */

    margin-left: -40px;

    clip-path: polygon(
        8% 0,
        100% 0,
        100% 100%,
        0 100%
    );

    border-right: 1px solid #4A3A75;
}


/* =========================================================
   VIOLETTE DIAGONALLINIE UNTEN
   ========================================================= */

.nfabsence::after {
    content: "";

    position: absolute;

    top: -15px;
    right: 13px;

    width: 1px;
    height: 210px;

    background: #4A3A75;

    transform: rotate(8deg);
    transform-origin: top center;

    z-index: 50;

    pointer-events: none;
}


/* =========================================================
   INNENABSTÄNDE UNTEN
   ========================================================= */

.nfabsence .nfheadline,
.nfabsence .nfcontent {
    padding-right: 35px;
}


.nfsisterbox .nfheadline,
.nfsisterbox .nfcontent {
    padding-left: 42px;
}


/* =========================================================
   HEADLINE-BEREICH
   ========================================================= */

.nfheadline {
    position: relative;

    height: 70px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 10px 18px;

    box-sizing: border-box;

    border-bottom: 1px solid #4A3A75;

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   HEADLINE HINTERGRUNDBILD
   ========================================================= */

.nfheadline::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    background-image:
        linear-gradient(
            rgba(17, 19, 29, .52),
            rgba(17, 19, 29, .52)
        ),
        url(https://s13.gifyu.com/images/blf7f.png);

    background-size: cover;
    background-position: center 50%;
}


/* dunkler Verlauf */

.nfheadline::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(17, 19, 29, .18) 0%,
            rgba(17, 19, 29, .30) 45%,
            rgba(17, 19, 29, .92) 100%
        );
}


/* =========================================================
   HEADLINE TEXT
   ========================================================= */

.nfheadline-title {
    position: relative;
    z-index: 3;

    font-family: 'Exo 2', sans-serif;

    font-size: 16px;
    font-weight: 400;
    line-height: 20px;

    color: #bdbdc8;

    text-transform: uppercase;

    letter-spacing: 0;
}


/* erster Buchstabe violett */

.nfheadline-title::first-letter {
    color: #9567E6;

    font-size: 25px;
}


/* =========================================================
   VOLLSTÄNDIGE LISTE
   ========================================================= */

.nfheadline-sub {
    position: relative;
    z-index: 3;

    margin-top: 3px;

    font-family: 'Exo 2', sans-serif;

    font-size: 8px;
    line-height: 10px;

    text-transform: uppercase;
    letter-spacing: .8px;

    color: #A9A9B5;
}


/* =========================================================
   INHALT
   ========================================================= */

.nfcontent {
    position: relative;
    z-index: 2;

    height: calc(100% - 70px);

    padding: 20px 18px;

    box-sizing: border-box;

    overflow: auto;

    font-family: Arial, sans-serif;

    font-size: 10px;
    line-height: 17px;

    color: #BDBDC8;
}


.nfcontent .smalltext {
    font-family: Arial, sans-serif;

    font-size: 10px;
    line-height: 17px;

    color: #BDBDC8;
}


/* =========================================================
   DEZENTE TEXTUR IM INHALT
   ========================================================= */

.nfcontent::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background-image:
        linear-gradient(
            rgba(17, 19, 29, .96),
            rgba(17, 19, 29, .96)
        ),
        url(https://s13.gifyu.com/images/blf7f.png);

    background-size: cover;
    background-position: center;

    opacity: .45;
}


/* =========================================================
   LINKS
   ========================================================= */

#newsflash a {
    font-family: 'Exo 2', sans-serif;

    color: #7556A8;

    text-decoration: none;

    font-weight: 600;

    transition:
        color .2s ease,
        letter-spacing .2s ease;
}


#newsflash a:hover {
    color: #9567E6;

    letter-spacing: .4px;
}


/* =========================================================
   THEME SELECT
   ========================================================= */

.nftheme {
    margin-top: 12px;

    text-align: center;
}


.nftheme select {
    min-width: 150px;

    padding: 4px 10px;

    box-sizing: border-box;

    background: #0A0B12;

    border: 1px solid #4A3A75;

    color: #bdbdc8;

    font-family: Arial, sans-serif;

    font-size: 10px;

    outline: none;
}


.nfmarkread {
    margin-top: 12px;

    text-align: center;
}


/* =========================================================
   SISTERS INHALT
   ========================================================= */

.nfsisters {
    display: flex;

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

    text-align: center;

    overflow: hidden;
}


.nfteamtext {
    width: auto;

    margin: 0;

    float: none;

    text-align: center;
}


.nfteamtext img {
    display: block;

    max-width: 100%;
    max-height: 75px;

    margin: auto;

    padding: 4px;

    box-sizing: border-box;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

#newsflash ::-webkit-scrollbar {
    width: 5px;
}


#newsflash ::-webkit-scrollbar-track {
    background: #11131D;
}


#newsflash ::-webkit-scrollbar-thumb {
    background: #4A3A75;
}


/* =========================================================
   ALTE KLASSEN ABSICHERN
   ========================================================= */

.nftextfeldlinks,
.nftextfeldbig,
.nftextfeldsmall {
    box-sizing: border-box;
}

/* =========================================================
   AUSRICHTUNG DER BOXEN
   ========================================================= */


/* =========================
   STATISTIKEN – ALLES MITTIG
   ========================= */

.nfbox-middle .nfheadline {
    align-items: center;
    text-align: center;
}

.nfbox-middle .nfcontent {
    text-align: center;
}


/* Theme-Auswahl ebenfalls mittig */

.nfbox-middle .nftheme,
.nfbox-middle .nfmarkread {
    text-align: center;
}


/* =========================
   WER WAR ONLINE – ALLES RECHTS
   ========================= */

.nfbox-right .nfheadline {
    align-items: flex-end;
    text-align: right;

    padding-right: 22px;
}

.nfbox-right .nfcontent {
    text-align: right;

    padding-right: 22px;
    padding-left: 35px;
}


/* auch MyBB smalltext rechts */

.nfbox-right .smalltext {
    text-align: right;
}


/* =========================
   SISTERS – ALLES RECHTS
   ========================= */

.nfsisterbox .nfheadline {
    align-items: flex-end;
    text-align: right;

    padding-right: 22px;
}

.nfsisterbox .nfcontent {
    text-align: right;

    padding-right: 22px;
    padding-left: 42px;
}


/* Sister-Inhalt ebenfalls rechts */

.nfsisterbox .nfsisters {
    justify-content: flex-end;
    text-align: right;
}

.nfsisterbox .nfteamtext {
    text-align: right;
    margin-left: auto;
    margin-right: 0;
}

/* =========================
   LEGENDE – FINAL RUHIGER
   ========================= */

.nfgruppen {
    width: auto;
    margin: 0 0 14px 0;

    padding: 7px 20px 6px;

    background: rgba(17, 19, 29, .55);
}


/* obere Zeile */

.nfgruppenoben {
    font-size: 9px;
    line-height: 16px;
    letter-spacing: .15px;
}


/* Gruppenfarben */

.nfgruppenunten {
    margin-top: 0;

    font-size: 9px;
    line-height: 14px;
    letter-spacing: .7px;
}