/* =========================================================
   GOLDEN DAYS NEWS ARTICLE
   geschlossener Magazin-/Update-Look
   ========================================================= */

.gd-news-article,
.gd-news-article * {
    box-sizing: border-box;
    border-radius: 0;
}

.gd-news-article {
    --news-dark: var(--rpg-dark, #1c2b31);
    --news-dark-2: var(--rpg-dark-2, #142025);
    --news-paper: var(--rpg-paper, #f7f6f2);
    --news-paper-2: var(--rpg-paper-2, #ece8df);
    --news-brick: var(--rpg-brick, #732C26);
    --news-gold: var(--rpg-gold, #D5AA43);

    position: relative;
    margin: 18px 0 24px 0;
    padding: 0;

    border: 1px solid rgba(28,43,49,.13);
    background:
        linear-gradient(90deg, rgba(255,255,255,.50), rgba(236,232,223,.22)),
        rgba(247,246,242,.68);

    box-shadow: 0 14px 30px rgba(28,43,49,.065);
    overflow: hidden;

    color: rgba(28,43,49,.74);
    font-family: Arial, Helvetica, sans-serif;
}

.gd-news-article::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg, rgba(28,43,49,.018) 1px, transparent 1px),
        linear-gradient(180deg, rgba(28,43,49,.012) 1px, transparent 1px);
    background-size: 38px 38px;

    opacity: .48;
    pointer-events: none;
}

/* Kopfbereich */

.gd-news-article__head {
    position: relative;
    z-index: 1;

    padding: 22px 24px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 22px;
    align-items: stretch;

    border-bottom: 1px solid rgba(28,43,49,.10);
    background:
        linear-gradient(90deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
}

.gd-news-article__head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin: 0 0 10px 0;

    color: rgba(28,43,49,.48);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.gd-news-article__head span::before {
    content: "";
    width: 25px;
    height: 1px;
    display: inline-block;

    background: rgba(28,43,49,.34);
}

.gd-news-article h2 {
    margin: 0;

    color: var(--news-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 31px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: .045em;
}

/* rechter Statuskasten oben */

.gd-news-article__head aside {
    position: relative;

    padding: 15px 16px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border: 1px solid rgba(213,170,67,.28);
    background:
        linear-gradient(180deg, var(--news-dark), var(--news-dark-2));

    color: var(--news-paper);
    overflow: hidden;
}

.gd-news-article__head aside::after {
    content: "NEWS";
    position: absolute;
    right: -5px;
    bottom: -5px;

    color: rgba(247,246,242,.055);
    font-size: 36px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
}

.gd-news-article__head aside strong {
    position: relative;
    z-index: 1;

    color: var(--news-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.2;
}

.gd-news-article__head aside em {
    position: relative;
    z-index: 1;

    margin-top: 7px;

    color: rgba(247,246,242,.70);
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.45;
    text-transform: uppercase;
}

/* Leadbox */

.gd-news-article__lead {
    position: relative;
    z-index: 1;

    margin: 22px 24px 0 24px;
    padding: 14px 17px;

    border: 1px solid rgba(28,43,49,.10);
    border-left: 3px solid var(--news-gold);

    background:
        linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.10)),
        rgba(247,246,242,.34);

    color: rgba(28,43,49,.68);
    font-size: 12px;
    line-height: 1.75;
    text-align: justify;
    hyphens: auto;
}

/* Hauptbereich: Text links, Statusliste rechts */

.gd-news-article__body {
    position: relative;
    z-index: 1;

    padding: 22px 24px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 245px;
    gap: 24px;
    align-items: start;
}

.gd-news-article__text {
    color: rgba(28,43,49,.74);
    font-size: 12px;
    line-height: 1.9;

    text-align: justify;
    hyphens: auto;
}

.gd-news-article__text p {
    margin: 0 0 1em 0;
}

/* Statusliste nicht mehr als verstreute Karten */

.gd-news-article__status {
    border: 1px solid rgba(28,43,49,.10);
    background: rgba(255,255,255,.18);
}

.gd-news-article__status div {
    position: relative;

    padding: 13px 14px 14px 46px;

    border-top: 1px solid rgba(28,43,49,.08);
}

.gd-news-article__status div:first-child {
    border-top: 0;
}

.gd-news-article__status span {
    position: absolute;
    left: 13px;
    top: 14px;

    color: rgba(28,43,49,.25);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    line-height: 1;
}

.gd-news-article__status strong {
    display: block;
    margin: 0 0 6px 0;

    color: var(--news-dark);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.gd-news-article__status em {
    display: block;

    color: rgba(28,43,49,.62);
    font-size: 11px;
    font-style: normal;
    line-height: 1.55;
}

/* Hinweis unten */

.gd-news-article__note {
    position: relative;
    z-index: 1;

    margin: 0 24px 24px 24px;
    padding: 13px 15px;

    border: 1px solid rgba(28,43,49,.11);
    background:
        linear-gradient(90deg, rgba(28,43,49,.050), rgba(255,255,255,.12));

    color: rgba(28,43,49,.68);
    font-size: 11px;
    line-height: 1.7;
}

.gd-news-article__note strong {
    color: var(--news-dark);
    font-weight: 700;
}

/* Links */

.gd-news-article a {
    color: var(--news-dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(28,43,49,.18);
}

.gd-news-article a:hover {
    color: var(--news-brick);
    border-bottom-color: rgba(115,44,38,.34);
}

/* Responsive */

@media screen and (max-width: 850px) {
    .gd-news-article__head,
    .gd-news-article__body {
        grid-template-columns: 1fr;
    }

    .gd-news-article__head aside {
        min-height: 78px;
    }
}

@media screen and (max-width: 520px) {
    .gd-news-article__head,
    .gd-news-article__body {
        padding: 18px;
    }

    .gd-news-article__lead {
        margin: 18px 18px 0 18px;
    }

    .gd-news-article__note {
        margin: 0 18px 18px 18px;
    }

    .gd-news-article h2 {
        font-size: 24px;
    }

    .gd-news-article__lead,
    .gd-news-article__text {
        text-align: left;
    }
}