@import url(https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600&display=swap);


/* =========================================================
   FORUMBIT – VARIANTE 2
   ========================================================= */

.forumbitindex1 {
    position: relative;

    width: 945px;
    height: 82px;

    margin: 6px 5px;

    display: grid;
    grid-template-columns: 300px 75px 350px 210px;

    background: #11131D;

    border: 1px solid #4A3A75;

    box-sizing: border-box;
    overflow: hidden;
}


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

.forumbitindex1 a:link,
.forumbitindex1 a:visited {
    color: #bdbdc8;
    text-decoration: none;
}

.forumbitindex1 a:hover,
.forumbitindex1 a:active {
    color: #8A6FD1;
    text-decoration: none;
}


/* =========================================================
   01 — BILDBEREICH
   ========================================================= */

.forumbitvisual {
    position: relative;

    width: 300px;
    height: 80px;

    display: flex;
    align-items: center;

    padding: 0 20px;

    box-sizing: border-box;

    background-color: #151722;

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

    overflow: hidden;
}


/* Abdunklung über Hintergrundbild */

.forumbitvisual::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(17,19,29,.50) 0%,
        rgba(17,19,29,.62) 60%,
        rgba(17,19,29,.95) 100%
    );

    z-index: 1;
}


/* Schräge Kante */

.forumbitvisual::after {
    content: "";

    position: absolute;

    right: -15px;
    top: -15px;

    width: 31px;
    height: 115px;

    background: #11131D;

    border-left: 1px solid #4A3A75;

    transform: rotate(-12deg);

    z-index: 2;
}


/* =========================================================
   FORENNAME
   ========================================================= */

.forumbitindex4 {
    position: relative;

    z-index: 3;

    width: 255px;

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

    font-size: 19px;
    line-height: 28px;

    font-weight: 300;

    letter-spacing: 2px;

    text-transform: uppercase;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Erster Buchstabe violett + größer */

.forumbitindex4::first-letter {
    color: #9567E6;

    font-size: 27px;
    line-height: 20px;

    font-weight: 500;
}


/* =========================================================
   02 — STATISTIKEN
   ========================================================= */

.forumbitindex5 {
    width: 75px;
    height: 80px;

    display: flex;
    flex-direction: column;

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

    gap: 5px;

    box-sizing: border-box;

    border-right: 1px solid rgba(74,58,117,.45);
}


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

    align-items: center;

    text-align: center;
}


.forumbitnumber {
    font-family: 'Exo 2', sans-serif;

    font-size: 16px;
    line-height: 14px;

    font-weight: 400;

    letter-spacing: .5px;

    color: #9567E6;
margin-bottom: 5px;
}


.forumbitlabel {
    margin-top: 1px;

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

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

    font-weight: 400;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: #AAA9B5;
}


/* =========================================================
   03 — BESCHREIBUNG
   ========================================================= */

.forumbitindex6 {
    position: relative;

    width: 350px;
    height: 80px;

    padding: 0 18px;

    box-sizing: border-box;

    border-right: 1px solid rgba(74,58,117,.45);

    overflow: hidden;
}


/* Beschreibung mit Blocksatz + Scrollbox */

.forumbitdescription {
    position: relative;

    top: 50%;
    transform: translateY(-50%);

    width: 100%;
    height: 58px;

    padding-right: 5px;

    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;

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

    font-size: 11px;
    line-height: 13px;

    font-weight: 300;

    letter-spacing: .15px;

    text-align: justify;
    text-transform: none;

    color: #B8B6BF;
}


.forumbitdescription * {
    max-width: 100%;
    box-sizing: border-box;
}


/* Scrollbar Beschreibung */

.forumbitdescription::-webkit-scrollbar {
    width: 3px;
}

.forumbitdescription::-webkit-scrollbar-track {
    background: transparent;
}

.forumbitdescription::-webkit-scrollbar-thumb {
    background: #4A3A75;
    border-radius: 3px;
}


/* Firefox */

.forumbitdescription {
    scrollbar-width: thin;
    scrollbar-color: #4A3A75 transparent;
}


/* =========================================================
   04 — LETZTER BEITRAG
   ========================================================= */

.forumbitindex7 {
    width: 210px;
    height: 80px;

    padding: 0 14px;

    box-sizing: border-box;

    overflow: hidden;

    display: flex;
    align-items: center;
}


/* =========================================================
   LASTPOST INNERER AUFBAU
   ========================================================= */

.forumbitlastpost {
    width: 100%;

    display: flex;

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

    box-sizing: border-box;
}


/* =========================================================
   LASTPOST TEXT
   ========================================================= */

.forumbittext {
    flex: 1;

    min-width: 0;

    order: 2;

    padding-left: 10px;

    box-sizing: border-box;
}


/* =========================================================
   AVATAR CONTAINER
   ========================================================= */

.forumbitindexava {
    order: 1;

    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    margin: 0;

    transform: none;

    overflow: hidden;

    border-radius: 50%;
}


/* =========================================================
   AVATAR
   ========================================================= */

.forumbitindexava img {
    display: block;

    width: 46px !important;
    height: 46px !important;

    object-fit: cover;

    border-radius: 50% !important;

    border: 1px solid #4A3A75;

    box-sizing: border-box;
}


/* =========================================================
   SZENENTITEL
   ========================================================= */

.forumbitindex8 {
    width: 100%;

    padding-bottom: 3px;

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

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

    font-weight: 400;

    letter-spacing: .5px;

    text-transform: uppercase;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;

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


/* Erster Buchstabe violett */

.forumbitindex8::first-letter {
    color: #9567E6;

    font-size: 13px;

    font-weight: 500;
}


/* =========================================================
   AUTOR + DATUM
   ========================================================= */

.forumbitindex9 {
    width: 100%;

    margin-top: 3px;

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

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

    font-weight: 300;

    letter-spacing: .5px;

    text-transform: uppercase;

    text-align: right;

    color: #AAA9B3;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   KEINE NEUEN BEITRÄGE
   Avatar grau
   ========================================================= */

.forumbitindex1:not(.forumstatus_on) .forumbitindexava img {
    filter: grayscale(70%) brightness(55%);

    opacity: .55;

    border-color: #3B3A46;

    box-shadow: none;
}


/* =========================================================
   NEUE BEITRÄGE
   Avatar farbig
   ========================================================= */

.forumbitindex1.forumstatus_on .forumbitindexava img {
    filter: grayscale(0%) brightness(100%);

    opacity: 1;

    border-color: #8A6FD1;

    box-shadow: 0 0 8px rgba(138,111,209,.30);
}


/* =========================================================
   MYBB FORUMSTATUS
   ========================================================= */

.forumbitindex1 > .forum_status {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    opacity: 0 !important;

    overflow: hidden !important;

    pointer-events: none;
}


/* =========================================================
   HINTERGRUNDBILDER
   ========================================================= */


/* =========================
   DENVER
   ========================= */

.forumbitvisual[data-forum="11"] {
    background-image: url(https://s13.gifyu.com/images/blfKb.png) !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.forumbitvisual[data-forum="11"]::before {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(17, 19, 29, 0.55) !important;

    pointer-events: none;
}


/* =========================
   AROUND THE WORLD
   ========================= */

.forumbitvisual[data-forum="28"] {
    background-image: url(https://s13.gifyu.com/images/blfmS.png) !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.forumbitvisual[data-forum="28"]::before {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(17, 19, 29, 0.55) !important;

    pointer-events: none;
}


/* =========================
   SIDEPLAY
   ========================= */

.forumbitvisual[data-forum="16"] {
    background-image: url(https://s13.gifyu.com/images/blfqY.png) !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.forumbitvisual[data-forum="16"]::before {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(17, 19, 29, 0.65) !important;

    pointer-events: none;
}


/* =========================
   COMMUNICATION
   ========================= */

.forumbitvisual[data-forum="29"] {
    background-image: url(https://s13.gifyu.com/images/blf7K.png) !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.forumbitvisual[data-forum="29"]::before {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(17, 19, 29, 0.45) !important;

    pointer-events: none;
}


/* =========================
   GEMEINSAMES KATEGORIEBILD
   ========================= */

.forumbitvisual[data-forum="2"],
.forumbitvisual[data-forum="9"],
.forumbitvisual[data-forum="42"],
.forumbitvisual[data-forum="10"],
.forumbitvisual[data-forum="41"],
.forumbitvisual[data-forum="12"],
.forumbitvisual[data-forum="13"],
.forumbitvisual[data-forum="33"],
.forumbitvisual[data-forum="30"],
.forumbitvisual[data-forum="14"],
.forumbitvisual[data-forum="43"],
.forumbitvisual[data-forum="44"],
.forumbitvisual[data-forum="45"],
.forumbitvisual[data-forum="46"],
.forumbitvisual[data-forum="48"],
.forumbitvisual[data-forum="49"],
.forumbitvisual[data-forum="47"],
.forumbitvisual[data-forum="54"],
.forumbitvisual[data-forum="35"],
.forumbitvisual[data-forum="36"],
.forumbitvisual[data-forum="55"],
.forumbitvisual[data-forum="31"],
.forumbitvisual[data-forum="32"],
.forumbitvisual[data-forum="34"],
.forumbitvisual[data-forum="37"],
.forumbitvisual[data-forum="38"],
.forumbitvisual[data-forum="39"],
.forumbitvisual[data-forum="25"],
.forumbitvisual[data-forum="26"],
.forumbitvisual[data-forum="24"],
.forumbitvisual[data-forum="19"],
.forumbitvisual[data-forum="56"],
.forumbitvisual[data-forum="57"],
.forumbitvisual[data-forum="40"] {
    background-image: url(https://s13.gifyu.com/images/blf7f.png) !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}


/* gemeinsame Abdunklung */

.forumbitvisual[data-forum="2"]::before,
.forumbitvisual[data-forum="9"]::before,
.forumbitvisual[data-forum="42"]::before,
.forumbitvisual[data-forum="10"]::before,
.forumbitvisual[data-forum="41"]::before,
.forumbitvisual[data-forum="12"]::before,
.forumbitvisual[data-forum="13"]::before,
.forumbitvisual[data-forum="33"]::before,
.forumbitvisual[data-forum="30"]::before,
.forumbitvisual[data-forum="14"]::before
.forumbitvisual[data-forum="43"]::before,
.forumbitvisual[data-forum="44"]::before,
.forumbitvisual[data-forum="45"]::before,
.forumbitvisual[data-forum="46"]::before,
.forumbitvisual[data-forum="48"]::before,
.forumbitvisual[data-forum="49"]::before,
.forumbitvisual[data-forum="47"]::before,
.forumbitvisual[data-forum="54"]::before,
.forumbitvisual[data-forum="35"]::before,
.forumbitvisual[data-forum="36"]::before,
.forumbitvisual[data-forum="55"]::before,
.forumbitvisual[data-forum="31"]::before,
.forumbitvisual[data-forum="32"]::before,
.forumbitvisual[data-forum="34"]::before,
.forumbitvisual[data-forum="37"]::before,
.forumbitvisual[data-forum="38"]::before,
.forumbitvisual[data-forum="39"]::before,
.forumbitvisual[data-forum="25"]::before,
.forumbitvisual[data-forum="26"]::before,
.forumbitvisual[data-forum="24"]::before,
.forumbitvisual[data-forum="19"]::before,
.forumbitvisual[data-forum="56"]::before,
.forumbitvisual[data-forum="57"]::before,
.forumbitvisual[data-forum="40"]::before {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(17, 19, 29, 0.55) !important;

    pointer-events: none;
}