/* ========================================================================
   Malerbosch Shop – Mobile Enhancement Sheet
   ------------------------------------------------------------------------
   Additive Overrides NUR für Mobile-Screens. Wird nach style.css geladen,
   um bestehende Regeln gezielt zu verbessern ohne sie anzufassen.
   Rollback: Datei löschen + eine Zeile in includes/header.php entfernen.
   ======================================================================== */

/* ========================================================================
   Tablet & kleiner: 1024px unten
   ======================================================================== */
@media (max-width: 1024px) {
    .container,
    .container-wide {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* ========================================================================
   Breakpoint <= 900px: Navigation auf Hamburger umschalten
   (ursprünglich erst bei 834px – dazwischen war's sehr eng)
   ======================================================================== */
@media (max-width: 900px) {
    /* Hauptnavigation versteckt, Hamburger an */
    .main-nav { display: none !important; }
    .mobile-menu-btn { display: inline-flex !important; }

    /* Header etwas kompakter */
    .header-inner {
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }
    .logo-img {
        height: 48px !important;
    }

    /* Header Icons etwas kleiner */
    .header-icon-btn {
        width: 38px;
        height: 38px;
    }
}

/* ========================================================================
   Breakpoint <= 768px: Klassisches Tablet/Mobile
   ======================================================================== */
@media (max-width: 768px) {

    /* Announcement Bar kleiner */
    .announcement-bar {
        font-size: 0.72rem;
        padding: 0.4rem 0.8rem;
    }
    .announcement-bar p { margin: 0; }

    /* Section-Paddings generell kleiner */
    section,
    .section-featured,
    .section-categories,
    .section-why,
    .section-service,
    .section-accordion,
    .section-newsletter,
    .page-section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Headline-Größen auf Mobile einkürzen */
    h1 { font-size: clamp(1.8rem, 6vw, 2.4rem) !important; }
    h2 { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
    h3 { font-size: 1.2rem !important; }

    .section-headline {
        font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
    }

    /* Cart Drawer auf Mobile fast vollflächig */
    .cart-drawer {
        right: -100% !important;
        width: 100% !important;
        max-width: min(400px, 92vw) !important;
    }
    .cart-drawer.active {
        right: 0 !important;
    }
    .cart-drawer-header,
    .cart-drawer-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .cart-drawer-content {
        padding: 0.8rem;
    }

    /* Search Overlay: Padding-Top reduziert, damit Input sichtbar */
    .search-overlay {
        padding-top: 6rem !important;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .search-container {
        max-width: 100% !important;
    }
    .search-input {
        font-size: 1.1rem !important;
        padding: 1rem !important;
    }
    .search-close {
        right: 1rem !important;
        top: 1rem !important;
    }

    /* Buttons: volle Breite */
    .btn,
    .btn-primary,
    .btn-secondary {
        width: 100%;
        max-width: 360px;
    }
    .btn-block { width: 100%; }

    /* Formulare */
    .form-row,
    .contact-form .form-row {
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
    }
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important; /* verhindert iOS Zoom */
    }

    /* Produkt-Grid */
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    .product-card-title {
        font-size: 0.92rem !important;
    }
    .product-card-body {
        padding: 0.8rem !important;
    }
    .product-card-action {
        padding: 0 0.8rem 0.8rem !important;
    }

    /* Produkt-Detail: Galerie + Info stacked */
    .product-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .product-title {
        font-size: 1.6rem !important;
    }
    .product-price {
        font-size: 1.3rem !important;
    }

    /* Warenkorb */
    .cart-layout {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .cart-item {
        grid-template-columns: 80px 1fr !important;
        gap: 0.8rem !important;
        padding: 0.8rem !important;
    }
    .cart-item-image {
        width: 80px !important;
        height: 80px !important;
    }
    .cart-item-title {
        font-size: 0.95rem !important;
    }
    .cart-item-price,
    .cart-item-total {
        font-size: 0.95rem !important;
    }
    .cart-summary {
        position: static !important;
    }

    /* Checkout */
    .checkout-layout {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .checkout-section {
        padding: 1.2rem !important;
    }
    .checkout-summary {
        position: static !important;
    }

    /* Konto / Dashboard */
    .konto-layout,
    .account-layout {
        grid-template-columns: 1fr !important;
    }

    /* Footer: 2 Spalten → 1 auf Mobile */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Tabellen scrollbar machen statt platzen */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ========================================================================
   Breakpoint <= 600px: Smartphone
   ======================================================================== */
@media (max-width: 600px) {
    .container,
    .container-wide {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Produkt-Grid: 1 Spalte bei ganz kleinem Screen */
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Kategorien-Grid max. 2 Spalten */
    .kategorie-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.8rem !important;
    }

    /* Hero-Inhalte nicht zu klein werden lassen */
    .hero-section .container {
        gap: 2rem !important;
    }
    .hero-headline {
        font-size: clamp(2rem, 8vw, 2.6rem) !important;
    }
    .hero-subtitle {
        font-size: 0.95rem !important;
    }
    .hero-buttons {
        gap: 0.7rem !important;
    }
    .btn-hero-primary,
    .btn-hero-glass,
    .btn-hero-glass-dark {
        width: 100%;
        padding: 0.9rem 1.5rem !important;
    }

    /* Section Labels */
    .section-label {
        font-size: 0.72rem !important;
    }

    /* "Über uns"-Sektion & Co */
    .ueber-uns-hero h1,
    .page-hero h1 {
        font-size: 2rem !important;
    }

    /* Padding kompakter */
    section,
    .page-section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Admin-Ausnahme: Admin-Bereich nicht anfassen */
    body.admin-page { /* no-op, nur Marker falls Admin-CSS eigene Regeln braucht */ }
}

/* ========================================================================
   Breakpoint <= 420px: kleine Smartphones (iPhone SE etc.)
   ======================================================================== */
@media (max-width: 420px) {
    .logo-img {
        height: 42px !important;
    }
    .header-icon-btn {
        width: 34px;
        height: 34px;
    }
    .header-actions {
        gap: 0.3rem;
    }
    .announcement-bar {
        font-size: 0.68rem;
    }
    .hero-headline {
        font-size: 1.9rem !important;
    }
    h2, .section-headline {
        font-size: 1.5rem !important;
    }

    /* Kategorien: 1 Spalte bei ganz kleinem Screen */
    .kategorie-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================================================
   Touch-Targets & iOS-Feinheiten
   ======================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Hover-Effekte auf Touch-Geräten deaktivieren, damit nichts "hängen bleibt" */
    .glass-card:hover {
        transform: none !important;
    }
    /* Mindestgröße für Touch-Ziele */
    a, button {
        min-height: 40px;
    }
    /* Buttons in Header ausnehmen – sonst wird der Header riesig */
    .header-icon-btn {
        min-height: auto;
    }
}