/* ============================================================
   27-mobile-perfection.css
   Mobile Perfection Sweep – Finale Touch- und Layout-
   Optimierungen, die in keiner anderen Datei abgedeckt sind.
   ============================================================ */

/* ──────────────────────────────────────────────
   1. TOUCH-TARGET MINDESTGRÖSSE (44×44px)
   Apple HIG & WCAG 2.5.5 Konformität
   ────────────────────────────────────────────── */
@media (max-width: 47.99rem) {

    /* Alle kritischen interaktiven Elemente: Apple/Google Touch-Standard */
    .vault-trigger,
    .drawer-close,
    .cart-qty-btn,
    .cart-icon-btn,
    .dropdown-trigger,
    .modal-close,
    .modal-back-btn,
    .tile-chevron {
        min-height: 2.75rem;
        min-width: 2.75rem;
    }

    /* Hamburger: Touch-Target über width/height direkt (kein min-height-Konflikt
       mit justify-content:space-between) */
    .hamburger {
        width: 2.75rem;
        height: 2.75rem;
    }

    /* Mute-Toggle: Komfortabler auf Touch */
    .video-mute-toggle {
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0.5rem;
    }

    /* ── 2. OPHYR HERO SECTION: Padding-Korrekturen Mobile ── */
    .ophyr-hero {
        padding: 0;
    }

    .ophyr-hero-content {
        padding: clamp(2rem, 6vw, 3rem) var(--container-padding);
    }

    .ophyr-hero-content h2 {
        font-size: clamp(1.4rem, 6vw, 2rem);
        margin-bottom: 1rem;
    }

    .ophyr-hero-content p {
        margin-bottom: 1.5rem;
    }

    /* ── 3. PRODUCT INTRO: Optimales Mobile Spacing ── */
    .product-intro {
        padding: clamp(2.5rem, 8vw, 4rem) var(--container-padding);
    }

    .product-intro-text {
        gap: 1.2rem;
    }

    .product-action {
        margin-top: 1.5rem;
        justify-content: center;
    }

    /* Vault-Body: Leserfreundliche Darstellung auf Mobile */
    .vault-body__inner {
        padding-right: 0;
    }

    /* ── 4. SECTION PADDING: Mobile First Breathing Room ── */
    .magazine-section {
        padding: clamp(3rem, 9vw, 5rem) var(--container-padding);
    }

    .section-header-gold {
        margin-bottom: clamp(2rem, 6vw, 3.5rem);
    }

    .magazine-article {
        gap: clamp(1.5rem, 5vw, 2.5rem);
    }

    /* Magazin-Content: Zentriert auf Mobile */
    .magazine-content {
        text-align: center;
        align-items: center;
    }

    /* ── 5. FOOTER: Payment Logos kleiner auf Mobile ── */
    .payment-methods {
        gap: clamp(0.6rem, 2.5vw, 1rem);
    }

    .payment-logo {
        height: clamp(1.4rem, 3.5vw, 1.8rem);
    }

    /* ── 6. STORE: Mobile Product Tile Verbesserungen ── */
    /* Title-Brand: Optisches Tracking auf Mobile */
    .title-brand {
        letter-spacing: 0.4em;
        font-size: clamp(1.4rem, 6vw, 1.8rem);
    }

    .title-edition {
        font-size: clamp(2.6rem, 11vw, 3.4rem);
    }

    /* Store Quote Tile: Schriftgrösse auf Mobile */
    .store-quote-tile__text {
        font-size: clamp(0.8rem, 3.5vw, 1.1rem);
    }

    /* Drawer: Kompaktere Abstände auf Mobile */
    .drawer-header {
        padding: 1.5rem 1.5rem 0.75rem;
    }

    .drawer-content {
        padding: 1.5rem;
    }

    .drawer-footer {
        padding: 1rem 1.5rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    /* ── 7. FORMULAR-ELEMENTE: Verhindert iOS Auto-Zoom ── */
    .auth-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    select,
    textarea {
        font-size: 1rem !important;
    }

    /* ── 8. CART BUTTONS: Touch-Optimierung ── */
    .cart-qty-btn {
        width: 2.75rem;
        height: 2.75rem;
    }

    .cart-item__remove {
        width: 2.75rem;
        height: 2.75rem;
    }

    /* ── 9. BTN-BUY: Ausreichend hoch für Touch ── */
    .btn-buy {
        height: 3.5rem;
        font-size: 0.75rem;
    }

    /* Btn-Primary: Volle Breite auf Mobile (Intro-Section) */
    .product-action .btn-primary,
    .product-action .btn-text {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* ── 10. OPHYR HERO IMAGE: Besseres Bildformat auf Mobile ── */
    .ophyr-hero-image {
        aspect-ratio: 4 / 3;
    }
}

/* ──────────────────────────────────────────────
   2. SEHR KLEINE SCREENS (< 480px)
   ────────────────────────────────────────────── */
@media (max-width: 30rem) {

    /* Paracelsus Quote Text: skaliert nach unten */
    .hero--quote .quote-text {
        font-size: clamp(0.78rem, 3.8vw, 1.05rem);
        letter-spacing: 0.1em;
        word-spacing: 0.05em;
    }

    /* Store Grid: kein horizontales Overflow */
    .store-grid {
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }

    /* Intro Headline Zeile 2: kleiner Tracking damit kein Umbruch */
    .intro-headline__line[data-line="2"] {
        letter-spacing: 0.1em;
        font-size: clamp(0.75rem, 2.8vw, 1rem);
    }

    /* Vault Body: Noch kleinere Schrift */
    .vault-paragraph {
        font-size: 0.9rem;
        line-height: 1.75;
    }

    /* Footer: Kompaktere Abstände */
    .footer {
        padding: clamp(2.5rem, 7vw, 4rem) var(--container-padding) 0;
    }

    .footer-container {
        gap: clamp(2rem, 5vw, 2.5rem);
        margin-bottom: clamp(2rem, 5vw, 3rem);
    }
}

/* ──────────────────────────────────────────────
   3. LANDSCAPE MOBILE (< 640px height)
      Verhindert Overflow bei horizontaler Ausrichtung
   ────────────────────────────────────────────── */
@media (max-height: 40rem) and (orientation: landscape) {

    /* Mobile Nav: overflow-y beim Landscape scrollen */
    .nav.active {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding-top: 1rem;
    }

    .nav.active .mobile-nav-logo {
        margin-bottom: 1rem;
    }

    .nav-list a {
        padding: 0.4rem var(--container-padding);
        font-size: 1rem;
    }

    /* Hero: Nicht zu hoch im Landscape */
    .hero--quote {
        height: clamp(9rem, 50dvh, 13rem);
    }
}

/* ──────────────────────────────────────────────
   4. TABLET BRIDGE (480px – 768px)
      Mittlerer Bereich zwischen Mobile und Desktop
   ────────────────────────────────────────────── */
@media (min-width: 30rem) and (max-width: 47.99rem) {

    /* Ophyr Hero Image: 16:9 für etwas mehr Horizont */
    .ophyr-hero-image {
        aspect-ratio: 16 / 9;
    }

    /* Store: Tile-Brand-Spacing etwas kompakter */
    .store-page .pp-brand__inner {
        padding: 2rem 2rem 0;
    }
}

/* ──────────────────────────────────────────────
   5. HIGH-DPI / RETINA SCREENS
      Physisch schärfere Linien auf HiDPI-Displays
   ────────────────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

    .fine-gold-line,
    .product-divider {
        /* 0.5px physisch auf Retina → elegantere Trennlinie */
        height: 0.5px;
    }

    .drawer-header::after {
        height: 0.5px;
    }

    .footer-gold-line {
        height: 0.5px;
    }
}

/* ──────────────────────────────────────────────
   6. HOVER MEDIA QUERIES: Nur für echte Maus/Pointer
      Verhindert unerwünschte Hover-Styles auf Touch
   ────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {

    /* Keine Hover-Effekte auf Touch-Geräten */
    .magazine-article:hover .magazine-image img {
        transform: none;
    }

    .footer-links a:hover {
        letter-spacing: 0.05em;
    }

    /* Btn-Primary: Kein Hover-Flip auf Touch */
    .btn-primary:hover {
        background-color: var(--gold);
        color: var(--ivory);
        border-color: var(--gold);
        box-shadow: none;
    }

    .btn-text:hover {
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    /* Logo: Kein Hover-Scale auf Touch */
    .logo:hover img {
        transform: none;
        filter: invert(68%) sepia(28%) saturate(600%) hue-rotate(352deg) brightness(98%) contrast(88%);
    }
}