/* ==============================================
   TM24 NOVAChild – Responsive Fine-Tuning
   Datei: css/tm24-responsive-fix.css
   Erstellt: 14.04.2026
   
   HINWEIS: Diese Datei ergänzt die bestehenden
   responsive Regeln. custom.css bleibt unverändert.
   ============================================== */

/* ---- iOS Safari: Input-Zoom verhindern ---- */
@supports (-webkit-touch-callout: none) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
        -webkit-appearance: none;
    }
}

/* ---- Produkttitel nicht abschneiden ---- */
@media (max-width: 575px) {
    .product-wrapper .card-body .card-title,
    .productbox .productbox-title,
    .product-cell .text-clamp-2 {
        -webkit-line-clamp: 3;
        max-height: none;
        overflow: visible;
        font-size: 13px;
        line-height: 1.35;
    }
}

/* ---- PDP: Verfügbarkeit & Frage-Button Abstand ---- */
@media (max-width: 767px) {
    .product-info .availability-status {
        margin-bottom: 12px;
    }
    .product-info .question-link {
        display: block;
        margin-top: 8px;
    }
}

/* ---- Footer: Mobile Spacing ---- */
@media (max-width: 575px) {
    footer .footer-top {
        padding: 24px 12px;
    }
    footer .col-md-3 {
        margin-bottom: 16px;
    }
}

/* ---- Container: kein Overflow ---- */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ---- Fingerprint-Widget: nicht über Content ---- */
#usercentrics-root,
[id*="usercentrics"],
.uc-embed {
    z-index: 2147483646 !important;
}

/* ---- Tablet (768px - 1024px) ---- */
@media (min-width: 768px) and (max-width: 1024px) {
    .product-wrapper .card-body .card-title {
        font-size: 14px;
    }
    .product-wrapper .card-body .price {
        font-size: 16px;
    }
}

/* ---- Sehr große Bildschirme (> 1920px) ---- */
@media (min-width: 1920px) {
    .container {
        max-width: 1440px;
    }
}

/* ---- Landscape Mobile ---- */
@media (max-height: 500px) and (orientation: landscape) {
    .carousel-inner img,
    .hero-banner img {
        max-height: 50vh;
        object-fit: contain;
    }
}

/* ---- Browser-spezifische Fixes ---- */
/* Firefox: Scrollbar-Fix */
@supports (scrollbar-width: thin) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #ccc transparent;
    }
}


/* ===== HEADER MOBILE FIX (14.04.2026) ===== */

/* Mobil < 576px: Header-Bereich */
@media (max-width: 575px) {
    /* Pills kompakter auf Mobile */
    .shop-pills,
    .tm24-pill-nav {
        gap: 3px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        max-width: 52vw;
        margin-left: 2px !important;
    }
    .shop-pills::-webkit-scrollbar,
    .tm24-pill-nav::-webkit-scrollbar {
        display: none;
    }
    .shop-pill,
    .tm24-pill {
        padding: 3px 8px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .shop-pill i,
    .tm24-pill i {
        font-size: 10px !important;
        margin-right: 2px !important;
    }

    /* Header-Grid: Logo kompakter */
    .tm24-header-grid {
        padding: 8px 10px !important;
        gap: 6px !important;
    }

    /* Logo kleiner */
    .shop-logo img,
    .tm24-header-left img {
        max-height: 28px !important;
        width: auto !important;
    }

    /* Icons: kleiner */
    .tm24-header-right {
        gap: 4px !important;
    }
    .tm24-header-right .shop-icon-link {
        padding: 4px 6px !important;
        font-size: 11px !important;
    }

    /* Megamenu-Bar: horizontaler Scroll */
    .shop-megamenu,
    .shop-megamenu-list {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }
    .shop-megamenu::-webkit-scrollbar,
    .shop-megamenu-list::-webkit-scrollbar {
        display: none;
    }
    .shop-megamenu-link {
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
}

/* Mobil < 400px: Noch kompakter */
@media (max-width: 400px) {
    .shop-pills,
    .tm24-pill-nav {
        max-width: 55vw;
    }
    .shop-pill,
    .tm24-pill {
        padding: 3px 8px !important;
        font-size: 10px !important;
    }
    .shop-logo img,
    .tm24-header-left img {
        max-height: 24px !important;
    }
}

/* Tablet 576-768px: Header ausbalanciert */
@media (min-width: 576px) and (max-width: 767px) {
    .shop-pills,
    .tm24-pill-nav {
        gap: 5px !important;
    }
    .shop-pill,
    .tm24-pill {
        padding: 5px 12px !important;
        font-size: 12px !important;
    }
}