/* =====================================================
   KIDS AM DÖNBERG E.V.
   ESSAY
   ===================================================== */


/* =====================================================
   ALLGEMEINER ESSAY
   ===================================================== */

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

.essay-content {
    width: 100%;
    max-width: 800px;

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


/* =====================================================
   ESSAY-KOPF
   ===================================================== */

.essay-header {
    background-color: var(--background-light);
}

.essay-header .essay-content {
    padding-top: 40px;
    padding-bottom: 40px;
}

.essay-header h1 {
    margin: 0 0 18px;

    color: var(--blue);

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

.essay-lead {
    margin: 0;

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


/* =====================================================
   BILD
   ===================================================== */

.essay-image {
    margin: 0 0 40px;
}

.essay-image img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 24px;
}

.essay-image figcaption {
    margin-top: 10px;

    color: --text-muted;

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


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

.essay-body {
    font-size: 1rem;
    line-height: 1.75;
}

.essay-body > p {
    margin: 0 0 20px;
}

.essay-body h2 {
    margin: 48px 0 18px;

    color: var(--blue);

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


/* Einleitung */

.essay-opening {
    color: var(--blue);

    font-size: 1.15rem;
    line-height: 1.65;
}


/* Hervorhebungen */

.essay-emphasis {
    color: var(--blue);

    font-weight: 700;
}


/* =====================================================
   ZITATE
   ===================================================== */

.essay-body blockquote {
    margin: 30px 0;
    padding: 20px 22px;

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

    border-radius: 20px;
}

.essay-body blockquote p {
    margin: 0;

    color: var(--blue);

    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.6;
}

.essay-body blockquote p + p {
    margin-top: 14px;
}


/* =====================================================
   SCHLUSS
   ===================================================== */

.essay-conclusion {
    margin-top: 52px;
}

.essay-conclusion > p {
    margin: 0 0 20px;

    font-weight: 700;
}


/* =====================================================
   NAVIGATION UNTER DEM ESSAY
   ===================================================== */

.essay-footer-nav {
    margin-top: 56px;

    text-align: center;
}

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

@media (min-width: 768px) {

    .essay-content {
        padding-inline: 28px;
    }

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

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

    .essay-body {
        font-size: 1.05rem;
    }

    .essay-body h2 {
        font-size: 1.8rem;
    }

    .essay-opening {
        font-size: 1.25rem;
    }

}