:root {
    --book-width-open: 96vw;
    --book-width-closed: 48vw;
    --book-height: 85vh;
    --book-height-dynamic: 85dvh;

    /* Premium Farbpalette */
    --parchment: radial-gradient(circle at 50% 50%, #fbf2db 0%, #f3e3be 60%, #e3ce9c 100%);
    --parchment-dark: #d5be8a;
    --gold: #b8860b;
    --gold-hover: #daa520;
    --leather: #361f11;
    --leather-dark: #1f110a;
    --text-dark: #231405;
}

/* =========================
    GLOBALES LAYOUT & HINTERGRUND
========================= */
html,
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden; /* Verhindert Scrollen der Hauptseite */
    background: radial-gradient(circle at 50% 45%, #6e4e31 0%, #46301c 55%, #1f140a 100%);
}

.container {
    width: 100%;
    margin: 0 auto;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    background: transparent;
    box-sizing: border-box;
    padding: 10px 20px 85px 20px !important;
}

.book-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    max-width: 2560px;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
    gap: 14px;
}

/* =========================
    HIGH-END 3D BUCH-GEHÄUSE
========================= */
.book {
    width: var(--book-width-open);
    max-width: 1800px;
    height: calc(100vh - 220px) !important;
    height: calc(100dvh - 220px) !important;
    max-height: 700px !important;
    min-height: 280px !important;
    position: relative;
    perspective: 1800px;
    font-family: 'Georgia', 'Times New Roman', serif;

    border: 18px solid var(--leather);
    border-radius: 14px;
    box-sizing: border-box;
    box-shadow:
        0 4px 0 var(--leather),  0 8px 0 var(--leather-dark),
        inset 0 0 0 1px rgba(218, 165, 32, 0.3),
        5px 10px 15px rgba(0, 0, 0, 0.5),
        inset 0 0 50px rgba(0, 0, 0, 0.9),
        0 30px 60px rgba(0, 0, 0, 0.85),
        0 0 120px rgba(218, 165, 32, 0.2);

    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        border-left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: repeating-linear-gradient(90deg, #eee3c1, #dfcea3 2px, #eee3c1 4px);
}

.page-turn-sheet {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
}

.page-turn-face {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden !important;
    will-change: transform, opacity, filter;
    box-shadow:
        0 0 18px rgba(0, 0, 0, 0.3),
        inset 0 0 26px rgba(76, 43, 16, 0.2);
}

.page-turn-face-static {
    z-index: 1;
}

.page-turn-face-outgoing {
    z-index: 2;
}

.page-turn-face-incoming {
    z-index: 3;
}

.page-turn-forward .page-turn-face-outgoing {
    transform-origin: left center;
}

.page-turn-forward .page-turn-face-incoming {
    transform-origin: right center;
}

.page-turn-back .page-turn-face-outgoing {
    transform-origin: right center;
}

.page-turn-back .page-turn-face-incoming {
    transform-origin: left center;
}

.page-turn-forward.is-turning .page-turn-face-outgoing,
.page-turn-back.is-turning .page-turn-face-outgoing {
    animation: pageFoldOut 0.72s cubic-bezier(0.12, 0, 0.39, 0) forwards;
}

.page-turn-forward.is-turning .page-turn-face-incoming,
.page-turn-back.is-turning .page-turn-face-incoming {
    animation: pageFoldIn 0.72s cubic-bezier(0.61, 1, 0.88, 1) forwards;
}

.page-hidden-during-turn {
    visibility: hidden !important;
}

@keyframes pageFoldOut {
    0% {
        opacity: 1;
        transform: scaleX(1);
        filter: brightness(1);
    }

    49% {
        opacity: 1;
        transform: scaleX(0.02);
        filter: brightness(0.82);
    }

    50%,
    100% {
        opacity: 0;
        transform: scaleX(0);
        filter: brightness(0.82);
    }
}

@keyframes pageFoldIn {
    0%,
    49% {
        opacity: 0;
        transform: scaleX(0);
        filter: brightness(0.82);
    }

    50% {
        opacity: 1;
        transform: scaleX(0.02);
        filter: brightness(0.82);
    }

    100% {
        opacity: 1;
        transform: scaleX(1);
        filter: brightness(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-turn-sheet {
        animation: none !important;
        display: none;
    }
}

/* COVER-ZUSTAND (Wenn die linke Seite ausgeblendet ist) */
.book:has(#leftpage.hidden) {
    width: var(--book-width-closed) !important;
    max-width: 900px !important;
    border-left: 24px solid var(--leather-dark);
    border-radius: 4px 14px 14px 4px;
    box-shadow:
        6px 4px 0 #dfcea3, 8px 6px 0 #cbb685, 12px 8px 0 var(--leather),
        0 35px 65px rgba(0, 0, 0, 0.9),
        0 0 90px rgba(218, 165, 32, 0.18);
}

/* MITTELPFALZ DES BUCHES */
.book::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 100%;
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.25) 30%,
            rgba(0, 0, 0, 0.55) 46%,
            rgba(0, 0, 0, 0.7) 50%,
            rgba(0, 0, 0, 0.55) 54%,
            rgba(0, 0, 0, 0.25) 70%,
            rgba(0, 0, 0, 0) 100%);
    z-index: 6;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
}

.book:has(#leftpage.hidden)::after {
    opacity: 0;
}
/* Verhindert, dass die linke Seite den Reiter oben abschneidet */
#leftpage {
    overflow: visible !important;
}

/* Der Reiter oben links auf der LINKEN Buchseite (am äußeren oberen Rand) */
.book-top-tab {
    position: absolute;
    top: -29px;       /* Schiebt ihn hoch über den Pergamentrand auf das Leder */
    left: 20px;       /* Platziert ihn links außen am Rand */
    
    /* ABSOLUTE SICHTBARKEIT */
    z-index: 99999 !important; 
    display: block;   /* Erlaubt dem JS, ihn via .hidden ein-/auszublenden */
    
    background: #521010;       /* Dein dunkles Buch-Rot */
    color: #fbf2db;            /* Deine Pergament-Schriftfarbe */
    border: 1px solid #da9a32; /* Dein Goldrand */
    border-bottom: none;       /* Unten offen, damit er fließend aus dem Buch kommt */
    
    padding: 5px 14px;
    font-family: 'Georgia', serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 5px 5px 0 0; /* Schöne abgerundete Ecken oben */
    cursor: pointer;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
    transition: background 0.2s, transform 0.2s;
}

.book-top-tab:hover {
    background: #7a1c1c;
    transform: translateY(-2px); /* Minimaler Zieh-Effekt beim Hover */
}

/* Mobile Anpassung für Smartphones */
@media (max-width: 900px) {
    .book-top-tab {
        left: 15px;      /* Bleibt links perfekt im Griffbereich des Daumens */
        top: -26px;
        font-size: 11px;
        padding: 4px 10px;
    }
}