/* LAPTOPS & KLEINERE MONITORE */
@media (max-width: 1400px) {
    .book {
        max-height: 600px;
    }

    .content h2 {
        font-size: 26px;
    }

    .content p {
        font-size: 18px;
        line-height: 1.5;
    }

    .page {
        padding: 35px 40px 65px 40px;
    }
}

@media (min-width: 901px) and (max-width: 1250px) {
    .content h2 {
        font-size: 22px !important;
    }

    .content p {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    .page {
        padding: 25px 30px 55px 30px;
    }

    .image img {
        max-height: 30vh !important;
        max-height: 30dvh !important;
    }
}

/* SMARTPHONES & TABLETS (HOCHFORMAT) */
@media (max-width: 900px) {

    html,
    body {
        overflow: hidden !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    .container {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 8px 8px 55px 8px !important;
        overflow: hidden !important;
    }

    .book {
        width: 100% !important;
        height: calc(100vh - 135px) !important;
        height: calc(100dvh - 135px) !important;
        max-height: 460px !important;
        min-height: 250px !important;
        border: 8px solid var(--leather);
        border-radius: 10px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85);
        background: var(--parchment);
        transition: none !important;
    }

    .book:has(#leftpage.hidden) {
        width: 88% !important;
        max-width: 320px !important;
        border-left: 20px solid var(--leather-dark) !important;
        border-radius: 3px 10px 10px 3px !important;
        box-shadow: 4px 3px 0 #dfcea3, 6px 4px 0 #cbb685, 8px 5px 0 var(--leather), 0 20px 45px rgba(0, 0, 0, 0.9) !important;
    }

    .book::after {
        display: none !important;
    }

    .page {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
        padding: 15px 15px 40px 15px;
        display: none;
    }

    /* Mobile Cover-Regel */
    .book:has(#leftpage.hidden) .right {
        display: block !important;
        background:
            radial-gradient(circle at 50% 18%, rgba(218, 165, 32, 0.22), rgba(218, 165, 32, 0) 34%),
            linear-gradient(135deg, #5a351e 0%, var(--leather) 48%, var(--leather-dark) 100%) !important;
    }

    .book:has(#leftpage.hidden) .right #rightContent {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100% !important;
        width: 100% !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        overflow: scroll !important;
    }

    .book:has(#leftpage.hidden) .right .content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100% !important;
        width: 100% !important;
        gap: 6px !important;
    }

    .cover-logo {
        display: block !important;
        max-height: 200px !important;
        max-width: 95% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 5px auto !important;
    }

    /* Mobile Einseiten-Umschaltung */
    .book:not(:has(#leftpage.hidden)):not(.show-right) .left {
        display: flex !important;
        flex-direction: column !important;
    }

    .book:not(:has(#leftpage.hidden)).show-right .right {
        display: block !important;
    }

    .book:not(:has(#leftpage.hidden)).show-right .left {
        display: none !important;
    }

    .book:not(:has(#leftpage.hidden)) #leftContent {
        max-height: 100% !important;
        overflow: scroll !important;
        padding-bottom: 5px;
    }

    .book:not(:has(#leftpage.hidden)) #rightContent {
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden;
        padding-bottom: 35px;
        scrollbar-width: auto !important;
    }

    .image img {
        max-height: 22vh !important;
        max-height: 22dvh !important;
        width: auto;
    }

    .image-stack::before,
    .image-stack::after {
        inset: 7px;
        border-width: 4px;
    }

    .report-text::first-letter {
        font-size: 3.6rem;
        line-height: 0.78;
        margin: 0.08rem 0.38rem 0 0;
    }

    .content h2 {
        font-size: 19px !important;
        text-align: center;
        padding-bottom: 4px;
        margin-top: 2px;
    }

    .content p {
        font-size: 13.5px !important;
        line-height: 1.4;
    }

    /* Mobile Buttons */
    .nav {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 4px !important;
        height: auto;
        justify-content: space-between !important;
    }

    .container:has(#leftpage.hidden) .nav {
        max-width: 320px !important;
        justify-content: center !important;
    }

    .nav button {
        padding: 8px 16px;
        font-size: 12px;
    }

    .page-num-inner {
        bottom: 10px;
        font-size: 10px;
        padding: 1px 8px;
    }

    #floatingTOCBtn {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: absolute !important;
        top: -25px !important;
        /* Weniger Minus = schiebt den Button weiter nach unten aufs Buch */
        left: 10px !important;
        z-index: 99999 !important;
    }

    /* Wenn er ausgeblendet wird, bleibt er komplett weg */
    #floatingTOCBtn.hidden {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Der Hinweis-Bubble wandert automatisch mit nach unten */
    .toc-hint-bubble {
        position: absolute !important;
        top: 15px !important;
        /* Angepasst, damit er wieder perfekt unter dem Button sitzt */
        left: 10px !important;
        z-index: 99999 !important;
    }

    .toc-hint-bubble::before {
        left: 20px !important;
    }

    /* Linie im Footer auf Mobilgeräten entfernen */
    .page-footer {
        border-top: none !important;
        padding-top: 0 !important;
        padding-top: 50px !important;
    }

    .mobile-hint {
        position: absolute;
        bottom: 20px;
        right: 20px;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #5a3d1b;
        opacity: 0.6;
        animation: pulse 2s infinite;
        pointer-events: none; /* Klicks gehen durch */
    }

    .mobile-hint-container {
        display: block !important; /* Auf Handy einblenden */
        text-align: center; /* Dezente Trennung */
    }
}