/* -------------------------------------------------- */
/* BASIS FÜR IFRAME-INHALT                            */
/* -------------------------------------------------- */

html, body {
    margin: 0;
    padding: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden; /* verhindert Scrollbalken */

    background: transparent !important; /* WICHTIG */
    font-family: "Georgia", serif;
    color: #4a341c;
}

/* -------------------------------------------------- */
/* BUCH-HINTERGRUND                                    */
/* -------------------------------------------------- */

.gaestebuch-box {
    position: relative;

    width: 100vw;
    height: 100vh;

    background: url('Gaestebuch.png') center no-repeat;
    background-size: contain; /* verhindert weiße Ränder */
    background-color: transparent !important;

    overflow: hidden;
}

/* -------------------------------------------------- */
/* SCHREIB-SEITE                                       */
/* -------------------------------------------------- */

.gaestebuch-text {
    position: absolute;

    top: calc(20% + 4.5em);
    left: 54%;

    width: 17em;
    height: 18em;

    background: transparent !important;
    border: none;
    resize: none;

    font-size: 1.3rem;
    line-height: 1.5;
    color: #4a341c;

    outline: none;
    padding: 5px;

    overflow: hidden;
}

/* -------------------------------------------------- */
/* ANZEIGE-SEITE                                       */
/* -------------------------------------------------- */

#eintraege-container {
    position: absolute;

    top: calc(20% + 4em);
    left: 54%;

    width: 17em;
    height: 18em;

    font-size: 1.3rem;
    line-height: 1.5;
    color: #4a341c;

    background: transparent !important;
    padding: 5px;
    overflow: hidden;
}

/* -------------------------------------------------- */
/* NAVIGATION                                          */
/* -------------------------------------------------- */

.nav-buttons {
    position: absolute;

    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    gap: 40px;

    font-size: 1.5rem;
    color: #6a4a2c;

    white-space: nowrap;
    background: transparent !important;
}

.nav-buttons span {
    cursor: pointer;
    user-select: none;
}

/* -------------------------------------------------- */
/* PAGEFLIP ANIMATION                                  */
/* -------------------------------------------------- */

.pageflip {
    animation: flip 0.6s ease forwards;
    transform-origin: left center;
}

@keyframes flip {
    0%   { transform: rotateY(0deg);   opacity: 1; }
    40%  { transform: rotateY(-80deg); opacity: 0.3; }
    60%  { transform: rotateY(-90deg); opacity: 0.0; }
    100% { transform: rotateY(0deg);   opacity: 1; }
}