/* =========================================================
   GEDANKE DES TAGES
   ========================================================= */


/* =========================================================
   QUOTE-BEREICH
   ========================================================= */

.quote_body {
    width: 100%;

    max-width: 760px;

    margin-top: 64px;

    margin-bottom: 0;

    text-align: left;
}


/* =========================================================
   EINLEITUNG
   ========================================================= */

.quote_body > h2 {
    margin: 0 0 12px;

    color: #3d3933;

    font-size: 1.65rem;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: -0.01em;

    text-shadow: 2px 2px 2px #c8c8c8;

    text-align: left;
}


.quote_body > h2::after {
    display: block;

    width: 45px;

    height: 2px;

    margin-top: 18px;

    background: #b49b73;

    content: "";
}


.quote_body > p {
    max-width: 680px;

    margin: 0 0 28px;

    color: #837b70;

    font-size: 0.92rem;

    line-height: 1.65;

    text-align: left;
}


/* =========================================================
   QUOTE-KARTE
   ========================================================= */

.quote_body > section {
    position: relative;

    width: 100%;

    margin: 0;

    padding: 42px 46px 40px;

    background: #f7f4ee;

    border: 1px solid #ddd5c8;

    border-left: 4px solid #b49b73;

    border-radius: 8px;

    box-shadow:
        0 3px 10px rgba(80, 70, 55, 0.06);

    text-align: left;
}


/* =========================================================
   ZITAT
   ========================================================= */

.quote-text {
    display: block;

    margin: 0;

    color: #3d3933;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.35rem;

    font-style: italic;

    line-height: 1.75;

    letter-spacing: 0.005em;

    text-align: left;
}


.quote-text::before {
    display: block;

    margin-bottom: 12px;

    color: #b49b73;

    content: "„";

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 4rem;

    font-style: normal;

    font-weight: 700;

    line-height: 0.6;
}


/* =========================================================
   AUTOR
   ========================================================= */

.quote-author {
    display: block;

    margin-top: 30px;

    color: #514b43;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 0.98rem;

    font-weight: 700;

    line-height: 1.4;

    text-align: left;
}


.quote-author-life {
    display: inline-block;

    margin-left: 8px;

    color: #958d81;

    font-size: 0.82rem;

    font-weight: 400;

    letter-spacing: 0.02em;
}


.quote-author-life::before {
    margin-right: 8px;

    color: #b8a991;

    content: "·";
}


/* =========================================================
   QUELLE
   ========================================================= */

.quote-source {
    display: block;

    margin-top: 5px;

    color: #837b70;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 0.78rem;

    line-height: 1.5;

    text-align: left;
}


/* =========================================================
   AUTOREN-NOTIZ
   ========================================================= */

.quote-author-note {
    display: block;

    margin-top: 28px;

    padding-top: 22px;

    border-top: 1px solid #d8d0c3;

    color: #837b70;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 0.78rem;

    line-height: 1.65;

    text-align: left;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .quote_body {
        margin-top: 50px;

        text-align: left;
    }


    .quote_body > h2 {
        font-size: 1.45rem;

        text-align: left;
    }


    .quote_body > p {
        margin-bottom: 24px;

        font-size: 0.88rem;

        text-align: left;
    }


    .quote_body > section {
        padding: 32px 26px 30px;

        border-left-width: 3px;
    }


    .quote-text {
        font-size: 1.15rem;

        line-height: 1.7;
    }


    .quote-text::before {
        margin-bottom: 10px;

        font-size: 3.4rem;
    }


    .quote-author {
        margin-top: 25px;

        font-size: 0.92rem;
    }


    .quote-author-note {
        margin-top: 24px;

        padding-top: 19px;

        font-size: 0.76rem;
    }

}


/* =========================================================
   SEHR KLEINE BILDSCHIRME
   ========================================================= */

@media (max-width: 420px) {

    .quote_body {
        margin-top: 42px;
    }


    .quote_body > h2 {
        font-size: 1.35rem;
    }


    .quote_body > p {
        font-size: 0.84rem;
    }


    .quote_body > section {
        padding: 27px 19px 25px;
    }


    .quote-text {
        font-size: 1.05rem;

        line-height: 1.65;
    }


    .quote-text::before {
        font-size: 3rem;
    }


    .quote-author {
        margin-top: 22px;

        font-size: 0.88rem;
    }


    .quote-author-life {
        font-size: 0.77rem;
    }


    .quote-source {
        font-size: 0.74rem;
    }


    .quote-author-note {
        margin-top: 21px;

        padding-top: 17px;

        font-size: 0.74rem;

        line-height: 1.6;
    }

}