/* ==========================================
   NOCH IM AUFBAU – GRUNDEINSTELLUNGEN
   Alle wichtigen Werte können hier angepasst werden
========================================== */

:root {

    /* Hintergrund */
    --work-background: #faf7f5;

    /* Hauptfarbe */
    --work-text-color: #292929;

    /* Gold */
    --work-gold: #c79a5e;

    /* Breite des Inhalts */
    --work-content-width: 650px;

    /* Abstand oben/unten */
    --work-padding-top: 180px;
    --work-padding-bottom: 180px;

    /* Überschrift */
    --work-title-size: 3.8rem;

    /* Text */
    --work-text-size: 1.15rem;
    --work-text-line-height: 1.8;

    /* Abstand zwischen Texten */
    --work-paragraph-gap: 22px;

    /* Signatur */
    --work-signature-size: 1.8rem;
}


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

.work-page {

    position: relative;

    min-height: calc(100vh - 140px);

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding:
        var(--work-padding-top)
        30px
        var(--work-padding-bottom);

    box-sizing: border-box;

    background: var(--work-background);

    overflow: hidden;
}


/* ==========================================
   INHALT
========================================== */

.work-content {

    width: 100%;

    max-width: var(--work-content-width);

    margin: 0 auto;

    position: relative;

    z-index: 2;
}


/* ==========================================
   KLEINES DEKORATIVES ELEMENT
========================================== */

.work-crown {

    margin-bottom: 18px;

    font-size: 28px;

    color: var(--work-gold);
}


/* ==========================================
   ÜBERSCHRIFT
========================================== */

.work-content h1 {

    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: var(--work-title-size);

    font-weight: 400;

    letter-spacing: 6px;

    color: var(--work-text-color);
}


/* ==========================================
   DIVIDER
========================================== */

.work-divider {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 16px;

    margin: 25px auto 35px;
}


/* Linien */

.work-divider span {

    width: 65px;

    height: 1px;

    background: var(--work-gold);
}


/* Herz */

.work-divider i {

    font-style: normal;

    font-size: 15px;

    color: var(--work-gold);
}


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

.work-text {

    margin: 0 auto var(--work-paragraph-gap);

    max-width: 560px;

    font-family: "Cormorant Garamond", serif;

    font-size: var(--work-text-size);

    font-weight: 400;

    line-height: var(--work-text-line-height);

    letter-spacing: .3px;

    color: #555;
}


/* ==========================================
   SIGNATUR
========================================== */

.work-signature {

    margin-top: 35px;

    font-family: "Great Vibes", cursive;

    font-size: var(--work-signature-size);

    color: var(--work-gold);
}


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

@media (max-width: 600px) {

    :root {

        --work-title-size: 2.7rem;

        --work-text-size: 1rem;

        --work-padding-top: 120px;

        --work-padding-bottom: 120px;

    }

    .work-divider span {

        width: 45px;

    }

}