/* =========================================================
   NEWS – GESAMTE KARTE
   ========================================================= */

.box_mitteilungen {
    box-sizing: border-box;
    position: relative;
    overflow: visible;
    margin: 0 15px 42px;
    padding: 31px 32px 46px;
    background:
        linear-gradient(
            135deg,
            #fbfcfc 0%,
            #f4f5f7 65%,
            rgba(216, 222, 229, 0.48) 100%
        );

    border-top: 5px solid var(--farbe2);
    border-bottom: 2px solid var(--farbe2);
    color: var(--farbe1);
    text-align: left;
    box-shadow:
        0 11px 24px rgba(55, 67, 87, 0.12),
        8px 0 18px -15px rgba(55, 67, 87, 0.16),
        -8px 0 18px -15px rgba(55, 67, 87, 0.16);
}


/* =========================================================
   KLEINE ROTE KATEGORIE
   ========================================================= */

.box_mitteilungen::before {
    content: "BOARD NEWS";
    display: block;
    margin: 0 0 12px;
    color: var(--farbe7);
    font-family: 'Playfair Display SC', Cambria, Georgia, serif;
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 2px;
    line-height: 1;
    text-transform: uppercase;
}


/* =========================================================
   GROSSE NEWS-ÜBERSCHRIFT
   ========================================================= */

.box_mitteilungen > h2 {
    margin: 0;
    padding: 0;

    color: var(--farbe2);
    text-align: left;
    text-transform: uppercase;

    font-family: 'Playfair Display SC', Cambria, Georgia, serif;
    font-size: 28px;
    font-weight: normal;
    letter-spacing: 2px;
  
}


/* =========================================================
   DATUM
   ========================================================= */

.header_mitteilungen {
    box-sizing: border-box;
    position: relative;
    margin: 7px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--farbe2);
    text-align: left;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 1.3px;
    line-height: 1.2;

    box-shadow: none;
}


/* Alte BOARD-NEWS-Ausgabe am Datum abschalten */

.header_mitteilungen::before {
    content: none;
}


/* Roter Strich unter dem Datum */

.header_mitteilungen::after {
    content: "";
    display: block;

    width: 265px;
    height: 1px;
    margin-top: 15px;

    background: #c98d8d;
}


/* =========================================================
   NEWS-INHALT
   ========================================================= */

.box_inhalt {
    box-sizing: border-box;
    position: relative;
    z-index: 2;

    margin: 0;
    padding: 29px 0 18px;

    background: transparent;
    border: 0;

    color: var(--farbe1);
    text-align: left;

    font-family: Cambria, Georgia, serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.7;

    box-shadow: none;
}


/* Links innerhalb der News */

.box_inhalt a {
    color: var(--farbe2);
    font-weight: bold;
    text-decoration: none;
}

.box_inhalt a:hover {
    color: #a65353;
    text-decoration: none;
}


/* =========================================================
   DEZENTER HUMMER AUF DER ABSCHLUSSLINIE
   ========================================================= */

.box_mitteilungen::after {
    content: "";
    position: absolute;
    z-index: 3;

    left: 50%;
    bottom: 0;

    width: 180px;
    height: 118px;

    transform: translateX(-50%);

    background-image:
        url(../../../images/songoflobsters/eerie-news-hummer-emblem.png);

    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;

    opacity: 0.22;
    pointer-events: none;
}


/* =========================================================
   KLEINERE BILDSCHIRME
   ========================================================= */

@media (max-width: 700px) {

    .box_mitteilungen {
        margin-right: 8px;
        margin-left: 8px;
        padding: 25px 22px 42px;
    }

    .box_mitteilungen > h2 {
        font-size: 23px;
        letter-spacing: 1.5px;
    }

    .box_inhalt {
        font-size: 12px;
        line-height: 1.65;
    }
}

.box_mitteilungen > br {
    display: none;
}