/* =========================================================
   RESPONSIVE V2
   Ausgangspunkt: stabiler Desktop-Master V4
   Desktop >= 1201 px bleibt unverändert.
   ========================================================= */

/* ---------------------------------------------------------
   MOBILE NAVIGATION – Grundzustand
   --------------------------------------------------------- */
.mobile-nav-toggle,
.mobile-navigation {
    display: none;
}

/* ---------------------------------------------------------
   iPHONE – mobile Navigation
   --------------------------------------------------------- */
@media (max-width: 767px) {
    .mobile-nav-toggle {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        z-index: 9999 !important;
        width: 46px !important;
        height: 46px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 0 !important;
        border: 1px solid rgba(255,255,255,.62) !important;
        border-radius: 50% !important;
        background: rgba(24,16,10,.72) !important;
        color: #f4eee4 !important;
        box-shadow: 0 8px 22px rgba(0,0,0,.26) !important;
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
        cursor: pointer;
        appearance: none;
    }

    .mobile-nav-toggle span {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        border-radius: 2px !important;
        background: #f4eee4 !important;
        transition: transform .22s ease, opacity .22s ease !important;
    }

    .mobile-navigation {
        position: absolute !important;
        top: 70px !important;
        left: 14px !important;
        right: 14px !important;
        z-index: 9998 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 12px !important;
        border: 1px solid rgba(255,255,255,.20) !important;
        border-radius: 14px !important;
        background: rgba(23,16,10,.96) !important;
        box-shadow: 0 18px 35px rgba(0,0,0,.28) !important;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        opacity: 0 !important;
        transform: translateY(-8px) !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
    }

    .mobile-navigation a {
        display: block !important;
        padding: 12px !important;
        border-radius: 8px !important;
        color: #f4eee4 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        letter-spacing: .04em !important;
        text-decoration: none !important;
    }

    .mobile-navigation a:hover,
    .mobile-navigation a:focus-visible {
        background: rgba(183,145,74,.16) !important;
        color: #d7b265 !important;
        outline: none;
    }

    .mobile-navigation .mobile-nav-order {
        margin-top: 5px !important;
        padding-top: 15px !important;
        border-top: 1px solid rgba(255,255,255,.12) !important;
        color: #d7b265 !important;
    }

    body.mobile-menu-open .mobile-navigation {
        opacity: 1 !important;
        transform: translateY(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.mobile-menu-open .mobile-nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    body.mobile-menu-open .mobile-nav-toggle span:nth-child(2) {
        opacity: 0 !important;
    }

    body.mobile-menu-open .mobile-nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }
}

/* ---------------------------------------------------------
   iPHONE QUERFORMAT – Hero vollständig vertikal sichtbar
   und Sektionen kompakter.
   --------------------------------------------------------- */
@media (max-width: 767px) and (orientation: landscape) {
    .hero::after {
        top: 50% !important;
        left: 50% !important;
        width: auto !important;
        height: 100% !important;
        aspect-ratio: 3 / 2 !important;
        transform: translate(-50%, -50%) !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
    }

    .hero::before {
        background-size: cover !important;
        background-position: center center !important;
    }

    .content-section {
        min-height: auto !important;
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }

    .world-tastes-section,
    .book-section,
    .book-preview,
    .countries-editorial-section,
    .about-merged-section,
    .thailand-story-section,
    .curiosity-section {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }

    .story-block__inner {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .story-block__inner--closing {
        padding-top: 42px !important;
        padding-bottom: 46px !important;
    }

    .book-preview-navigation {
        margin-top: 14px !important;
    }
}

/* ---------------------------------------------------------
   iPAD HOCHFORMAT – Hero proportional, nicht verzerren.
   --------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
    .hero {
        height: 92dvh !important;
        min-height: 92dvh !important;
    }

    .hero::after {
        top: 0 !important;
        left: 50% !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        transform: translateX(-50%) !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}

/* ---------------------------------------------------------
   iPAD QUERFORMAT – Hero proportional, nicht verzerren.
   Gilt nur bis 1200 px; Desktop/13" Landscape bleibt unverändert.
   --------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) {
    .hero::after {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        transform: none !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}

/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mobile-navigation,
    .mobile-nav-toggle span {
        transition: none !important;
    }
}

/* =========================================================
   RESPONSIVE V3 – gezielte Korrekturen nach V2-Test
   ========================================================= */

/* iPHONE: mobile navigation zuverlässig sichtbar */
@media (max-width: 767px) {
    .mobile-nav-toggle {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 10000 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .mobile-navigation {
        z-index: 9999 !important;
    }
}

/* iPHONE QUERFORMAT: komplette Hero-Komposition sichtbar,
   ohne Streckung oder vertikales Abschneiden. */
@media (max-width: 767px) and (orientation: landscape) {
    .hero {
        overflow: hidden !important;
    }

    .hero::after {
        top: 50% !important;
        left: 50% !important;
        width: auto !important;
        height: 100% !important;
        aspect-ratio: 3 / 2 !important;
        transform: translate(-50%, -50%) !important;
        background-size: 100% 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .hero-content {
        transform: scale(.78) !important;
        transform-origin: center top !important;
    }

    .world-tastes-section,
    .book-section,
    .book-preview,
    .countries-editorial-section,
    .about-merged-section,
    .thailand-story-section,
    .curiosity-section {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    .story-block__inner {
        padding-top: 38px !important;
        padding-bottom: 38px !important;
    }
}

/* iPAD HOCHFORMAT: echtes Seitenverhältnis der zentralen Hero-Ebene.
   Die Grafik wird nicht mehr in einen Hochformat-Rahmen gezwungen. */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
    .hero::after {
        top: 50% !important;
        left: 50% !important;
        width: auto !important;
        height: 100% !important;
        aspect-ratio: 3 / 2 !important;
        transform: translate(-50%, -50%) !important;
        background-size: 100% 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}

/* iPHONE/iPAD: Bounce-Verhalten am Ende des Scrollbereichs reduzieren.
   Dies beeinflusst nicht das normale Scrollen. */
html, body {
    overscroll-behavior-y: contain;
}

/* =========================================================
   INTEGRATED V4.1 – iPad Hochformat
   Tested and approved on iPad 11" and 13"
   ========================================================= */

/* =========================================================
   RESPONSIVE V4.1 – iPad Portrait
   Basis: getesteter Responsive V3
   Ziel:
   - 3:2-Hero in der Mitte proportional erhalten
   - freie Flächen NICHT weiß lassen
   - Navigation oben sichtbar lassen
   - iPhone, iPad Querformat und Desktop unverändert
   ========================================================= */

@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {

    /*
       Der V4-Patch hatte hier "contain" verwendet.
       Dadurch entstanden die weißen Flächen oben/unten.
       Wir verwenden deshalb wieder den Hero-Hintergrund
       als vollflächige Füllung.
    */
    .hero {
        height: 92dvh !important;
        min-height: 92dvh !important;

        background-color: #080604 !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: cover !important;
    }

    /*
       Darüber liegt die zentrale 3:2-Komposition.
       Sie bleibt unverzerrt.
    */
    .hero::after {
        top: 50% !important;
        left: 50% !important;

        width: 100% !important;
        height: auto !important;

        aspect-ratio: 3 / 2 !important;

        transform: translate(-50%, -50%) !important;

        background-size: 100% 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /*
       Navigation ausdrücklich über dem Hero halten.
    */
    .main-navigation {
        z-index: 100 !important;
    }
}