body.popup_opened
{
    overflow: hidden;
}


/* =========================
   POPUP OVERLAY
   ========================= */

.popup_c
{
    display: none;

    position: fixed;
    inset: 0;
    z-index: 1000;

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

    padding: 30px;
    box-sizing: border-box;

    background: rgba(55, 53, 52, 0.84);

    overflow-y: auto;
}


/* =========================
   POPUP BOX
   ========================= */

.popup
{
    position: relative;

    width: 100%;
    max-width: 620px;

    background: #ffffff;

    box-sizing: border-box;

    box-shadow: 0 18px 60px rgba(0,0,0,.18);
}


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

.popup .content_c
{
    padding: 65px 70px 60px;

    box-sizing: border-box;

    text-align: center;
}


/* Kleine obere Zeile */
.popup .title
{
    margin-bottom: 18px;

    font: 400 0.9rem/140% Montserrat, Arial, sans-serif;

    letter-spacing: 0.45em;

    text-transform: uppercase;

    color: #baa271;
}


/* Hauptbotschaft */
.popup .subtitle
{
    position: relative;

    max-width: 500px;

    margin: 0 auto 32px;

    padding-bottom: 30px;

    font: 400 2rem/125% "Crimson Text", Georgia, serif;

    color: #6b6562;

    text-transform: none;
}


/* Goldene Linie */
.popup .subtitle::after
{
    content: "";

    position: absolute;

    bottom: 0;
    left: 50%;

    width: 70px;
    height: 1px;

    transform: translateX(-50%);

    background: #baa271;
}


/* Beschreibung */
.popup .text
{
    max-width: 440px;

    margin: 0 auto;

    font: 300 1.063rem/175% Montserrat, Arial, sans-serif;

    color: #4f4b48;
}


/* Links im Text */
.popup .text a
{
    color: #baa271;

    text-decoration: underline;
}

.popup .text a:hover,
.popup .text a:focus
{
    text-decoration: none;
}


/* =========================
   SCHLIESSEN-ICON
   ========================= */

.close_popup
{
    position: absolute;

    top: 20px;
    right: 20px;

    width: 34px;
    height: 34px;

    padding: 0;

    border: 0;
    background: transparent;

    cursor: pointer;

    z-index: 10;
}


/* X-Linien */
.close_popup span
{
    position: absolute;

    top: 16px;
    left: 6px;

    width: 22px;
    height: 1px;

    background: #6b6562;

    transition: background-color .3s ease;
}

.close_popup span:first-child
{
    transform: rotate(45deg);
}

.close_popup span:last-child
{
    transform: rotate(-45deg);
}


/* Hover */
.close_popup:hover span,
.close_popup:focus span
{
    background: #baa271;
}


/* Tastatur-Fokus */
.close_popup:focus
{
    outline: 1px solid #baa271;
    outline-offset: 3px;
}


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

@media(max-width: 800px)
{
    .popup
    {
        max-width: 560px;
    }

    .popup .content_c
    {
        padding: 60px 50px 50px;
    }

    .popup .subtitle
    {
        font-size: 1.8rem;
    }
}


/* =========================
   SMARTPHONE
   ========================= */

@media(max-width: 650px)
{
    .popup_c
    {
        padding: 20px;
    }

    .popup
    {
        max-width: 100%;
    }

    .popup .content_c
    {
        padding: 55px 25px 42px;
    }

    .popup .title
    {
        margin-bottom: 15px;

        font-size: 0.75rem;
        line-height: 140%;

        letter-spacing: 0.35em;
    }

    .popup .subtitle
    {
        margin-bottom: 26px;

        padding-bottom: 25px;

        font-size: 1.55rem;
        line-height: 130%;
    }

    .popup .subtitle::after
    {
        width: 55px;
    }

    .popup .text
    {
        max-width: 100%;

        font-size: 0.95rem;
        line-height: 170%;
    }

    .close_popup
    {
        top: 14px;
        right: 14px;

        width: 30px;
        height: 30px;
    }

    .close_popup span

    {
        top: 14px;
        left: 5px;

        width: 20px;
    }
}