/* =====================================================
   KIDS AM DÖNBERG E.V.
   NEUIGKEITEN – EINZELARTIKEL
   ===================================================== */


/* =====================================================
   ALLGEMEINER ARTIKEL
   ===================================================== */

.article {
    background-color: var(--white);
}

.article-content {
    width: 100%;
    max-width: 820px;

    margin-inline: auto;
    padding-inline: 20px;
}


/* =====================================================
   ARTIKELKOPF
   ===================================================== */

.article-header {
    padding: 10px 0 20px;
    background-color: var(--background-light);
}


/* Zurück-Link */

.article-back {
    display: inline-block;

    margin-bottom: 32px;

    color: var(--blue);

    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.article-back:hover {
    text-decoration: underline;
}

.article-back:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}


/* Datum */

.article-header time {
    display: block;

    margin-bottom: 8px;

    color: var(--green);

    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* Überschrift */

.article-header h1 {
    max-width: 700px;

    margin: 0 0 18px;

    color: var(--blue);

    font-size: 2.2rem;
    line-height: 1.08;
}

.article-lead {
    max-width: 680px;

    margin: 0;

    font-size: 1.1rem;
    line-height: 1.6;
}


/* =====================================================
   TITELBILD
   ===================================================== */

.article-hero-image {
    overflow: hidden;
    margin: 32px 0;
}

.article-hero-image img {
    width: 100%;
    height: auto;
}

.article-hero-image figcaption {
    margin-top: 8px;

    color: var(--text-muted);

    font-size: 0.85rem;
    line-height: 1.4;
}


/* =====================================================
   ARTIKELINHALT
   ===================================================== */

.article-body {
    max-width: 700px;

    margin-inline: auto;
}

.article-body p {
    margin: 0 0 22px;

    line-height: 1.7;
}

.article-body h2 {
    margin: 42px 0 16px;

    color: var(--blue);

    font-size: 1.55rem;
    line-height: 1.2;
}


/* =====================================================
   HERVORGEHOBENER BEREICH
   ===================================================== */

.article-highlight {
    margin: 40px -4px;
    padding: 24px 18px;

    background-color: var(--background-light);

    border-radius: 20px;
}

.article-highlight h2 {
    margin-top: 0;
}


/* =====================================================
   DOKUMENT / PROTOKOLLAUSSCHNITT
   ===================================================== */

.article-document {
    overflow: hidden;

    margin: 24px 0 0;

    background-color: var(--white);

    border-radius: 12px;
}

.article-document img {
    width: 100%;
    height: auto;
}


/* =====================================================
   NAVIGATION UNTER DEM ARTIKEL
   ===================================================== */

.article-footer-nav {
    display: flex;
    justify-content: center;

    padding: 24px 0 56px;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (min-width: 768px) {

    .article-content {
        padding-inline: 32px;
    }

    .article-content-portrait .article-hero-image {
        max-width: 450px;
        margin-inline: auto;
    }

    .article-header h1 {
        font-size: 3rem;
    }

    .article-lead {
        font-size: 1.2rem;
    }

    .article-hero-image {
        margin-top: 40px;
        margin-bottom: 44px;
        max-width: 500px;
        margin-inline: auto;    
    }

    .article-highlight {
        margin-top: 48px;
        margin-bottom: 48px;

        padding: 32px;
    }

}


/* =====================================================
   DESKTOP
   ===================================================== */

@media (min-width: 1000px) {

    .article-header h1 {
        font-size: 3.4rem;
    }

    .article-content-portrait .article-hero-image {
        max-width: 300px;
    }

}