/* =========================================================
   FALLENANGELS
   GÄSTEBUCH – COMPACT ORNATE GOTHIC
   ========================================================= */


/* =========================================================
   GÄSTEBUCH-BEREICH
   ========================================================= */

.guestbook-content {
    width: 92%;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}


/* =========================================================
   BANNER
   ========================================================= */

.banner {
    display: block;
    width: 68%;
    max-width: 700px;
    height: auto;
    margin: 15px auto 32px;
}


/* =========================================================
   HAUPTRAHMEN
   ========================================================= */

.gothic-frame {
    position: relative;

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

    margin: 0 auto;
    padding: 27px 28px 24px;

    box-sizing: border-box;

    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(120, 0, 0, .18) 0,
            transparent 70px
        ),
        radial-gradient(
            circle at 92% 8%,
            rgba(120, 0, 0, .18) 0,
            transparent 70px
        ),
        radial-gradient(
            circle at 8% 92%,
            rgba(120, 0, 0, .18) 0,
            transparent 70px
        ),
        radial-gradient(
            circle at 92% 92%,
            rgba(120, 0, 0, .18) 0,
            transparent 70px
        ),
        radial-gradient(
            ellipse at center,
            #181818 0%,
            #101010 58%,
            #070707 100%
        );

    border: 1px solid #777;

    box-shadow:
        0 0 0 2px #050505,
        0 0 0 4px #292929,
        0 0 0 5px #280000,
        0 0 22px rgba(100, 0, 0, .28),
        inset 0 0 35px rgba(0, 0, 0, .95);

    overflow: visible;
}


/* =========================================================
   ÄUSSERE FEINE LINIE
   ========================================================= */

.gothic-frame::before {
    content: "";

    position: absolute;

    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;

    border: 1px solid rgba(125, 0, 0, .65);

    pointer-events: none;
}


/* =========================================================
   INNERE SILBERLINIE
   ========================================================= */

.gothic-frame::after {
    content: "";

    position: absolute;

    top: 14px;
    left: 14px;
    right: 14px;
    bottom: 14px;

    border: 1px solid rgba(190, 190, 190, .16);

    pointer-events: none;
}


/* =========================================================
   DEKORATIVE GOTHIC-ECKEN
   ========================================================= */

/* Oben links */

.gothic-frame h1::before {
    content: "";

    position: absolute;

    width: 25px;
    height: 25px;

    left: -20px;
    top: -14px;

    border-left: 2px solid #6f0000;
    border-top: 2px solid #777;

    box-shadow:
        -4px -4px 0 -2px #260000,
        inset 4px 4px 0 -3px #8b0000;

    transform: rotate(-2deg);

    opacity: .9;
}


/* Oben rechts */

.gothic-frame h1::after {
    content: "";

    position: absolute;

    width: 25px;
    height: 25px;

    right: -20px;
    top: -14px;

    border-right: 2px solid #6f0000;
    border-top: 2px solid #777;

    box-shadow:
        4px -4px 0 -2px #260000,
        inset -4px 4px 0 -3px #8b0000;

    transform: rotate(2deg);

    opacity: .9;
}


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

.gothic-frame h1 {
    position: relative;
    z-index: 2;

    margin: 0 auto;

    max-width: 650px;

    font-family: "Cinzel", serif;

    font-size: 29px;
    font-weight: 600;

    line-height: 1.25;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #e5e5e5;

    text-shadow:
        0 2px 4px #000,
        0 0 10px rgba(255,255,255,.10),
        0 0 18px rgba(120,0,0,.25);
}


/* =========================================================
   TRENNLINIE
   ========================================================= */

.gothic-line {
    position: relative;

    width: 170px;
    height: 1px;

    margin: 15px auto 17px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #650000,
            #aaa,
            #650000,
            transparent
        );

    box-shadow:
        0 0 7px rgba(139,0,0,.55);
}


/* kleines mittleres Detail */

.gothic-line::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 7px;
    height: 7px;

    transform: translate(-50%, -50%) rotate(45deg);

    background: #160000;

    border: 1px solid #9a9a9a;

    box-shadow:
        0 0 7px rgba(139,0,0,.8);
}


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

.guestbook-intro {
    position: relative;
    z-index: 2;

    max-width: 570px;

    margin: 0 auto 20px;

    font-family: "Cormorant Garamond", serif;

    font-size: 18px;
    font-style: italic;

    line-height: 1.35;

    color: #aaa;
}


/* =========================================================
   ATABOOK-BEREICH
   ========================================================= */

.atabook-container {
    position: relative;
    z-index: 2;

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

    margin: 0 auto;

    padding: 12px;

    box-sizing: border-box;

    background:
        radial-gradient(
            ellipse at center,
            #151515,
            #080808
        );

    border: 1px solid #555;

    box-shadow:
        inset 0 0 22px rgba(0,0,0,.95),
        0 0 14px rgba(0,0,0,.8);
}


/* rote Innenlinie */

.atabook-container::before {
    content: "";

    position: absolute;

    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;

    border: 1px solid rgba(120,0,0,.55);

    pointer-events: none;
}


/* =========================================================
   ATABOOK-TITEL
   ========================================================= */

.atabook-title {
    position: relative;
    z-index: 3;

    margin: 0 0 8px;

    font-family: "Cinzel", serif;

    font-size: 13px;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #9b9b9b;
}


/* =========================================================
   ATABOOK
   ========================================================= */

.atabook-frame {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;

    /*
       bewusst kompakt
    */
    height: 390px;

    margin: 0 auto;

    border: 1px solid #333;

    background: #fff;

    box-sizing: border-box;
}


/* =========================================================
   ZURÜCK-BEREICH
   ========================================================= */

.back-area {
    display: flex;

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

    width: 100%;

    margin: 24px auto 35px;
}


/* =========================================================
   ZURÜCK-BUTTON
   ========================================================= */

.back-button {
    display: inline-block;

    padding: 10px 23px;

    color: #b5b5b5;

    background:
        linear-gradient(
            180deg,
            #181818,
            #080808
        );

    border: 1px solid #484848;

    text-decoration: none;

    font-family: "Cinzel", serif;

    font-size: 11px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    box-shadow:
        inset 0 0 10px rgba(0,0,0,.8),
        0 0 8px rgba(0,0,0,.7);

    transition:
        color .3s,
        border-color .3s,
        box-shadow .3s,
        background .3s,
        transform .25s;
}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

.back-button:hover {
    color: #fff;

    background:
        linear-gradient(
            180deg,
            #280000,
            #0d0000
        );

    border-color: #760000;

    box-shadow:
        inset 0 0 12px rgba(139,0,0,.35),
        0 0 15px rgba(139,0,0,.4);

    transform: translateY(-2px);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
    text-align: center;

    color: #444;

    font-family: "Cormorant Garamond", serif;

    font-size: 12px;

    margin: 0 auto 22px;
}


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

@media (max-width: 900px) {

    .guestbook-content {
        width: 94%;
    }

    .banner {
        width: 90%;
        margin-bottom: 28px;
    }

    .gothic-frame {
        max-width: 100%;
        padding: 24px 17px 22px;
    }

    .gothic-frame h1 {
        font-size: 24px;
        letter-spacing: 1.3px;
    }

    .gothic-frame h1::before {
        left: -10px;
        top: -10px;
        width: 18px;
        height: 18px;
    }

    .gothic-frame h1::after {
        right: -10px;
        top: -10px;
        width: 18px;
        height: 18px;
    }

    .guestbook-intro {
        font-size: 17px;
    }

    .atabook-container {
        padding: 9px;
    }

    .atabook-frame {
        height: 390px;
    }

    .back-area {
        margin-top: 21px;
        margin-bottom: 32px;
    }
}


/* =========================================================
   SEHR KLEINE HANDYS
   ========================================================= */

@media (max-width: 500px) {

    .guestbook-content {
        width: 96%;
    }

    .gothic-frame {
        padding: 21px 11px 20px;
    }

    .gothic-frame h1 {
        font-size: 20px;
        letter-spacing: 1px;
    }

    .gothic-frame h1::before,
    .gothic-frame h1::after {
        display: none;
    }

    .gothic-line {
        width: 140px;
    }

    .guestbook-intro {
        font-size: 16px;
    }

    .atabook-title {
        font-size: 11px;
        letter-spacing: 1.3px;
    }

    .atabook-frame {
        height: 370px;
    }

    .back-button {
        font-size: 10px;
        padding: 9px 17px;
    }
}