/* ============================================================
   Retterline – Mobile / Responsive Overrides
   Ziel: vollständige Mobile-Optimierung auf allen Bildschirmen
   ============================================================ */

/* ── Globale Touch-Optimierungen ── */
*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; height: auto; }

/* Mindestgröße für alle anklickbaren Elemente (Touch) */
a, button, [role="button"],
.firdip-btn, .product__item__link,
.nav-link, .btn { min-height: 44px; }

/* ── Header ─────────────────────────────────────────────── */

/* Logo auf Mobile kleiner */
@media (max-width: 991px) {
  .main-header__logo img { width: 150px !important; }

  /* Header-Buttons: kein negatives Margin mehr */
  .main-header__right__call {
    margin-right: 0 !important;
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
  }

  /* Buttons kompakter */
  .main-header__right__call .firdip-btn {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.75rem !important;
    min-height: 36px;
  }

  .main-header__right__call .text-white-50 {
    display: none; /* "Hallo, Name" verstecken – Platz sparen */
  }
}

@media (max-width: 575px) {
  .main-header__right__call { display: none !important; } /* Mobile-Nav übernimmt */
}

/* ── Kategorie-Karten (Startseite) ──────────────────────── */
/* Verhindert col-3 auf Mobile – muss in PHP auch geändert werden */
@media (max-width: 767px) {
  .service-card { margin-bottom: 1.5rem; }
  .service-card__thumb__item img { height: 120px !important; object-fit: cover; width: 100%; }
}

/* ── Feature-Boxen (Status 2-5) ─────────────────────────── */
@media (max-width: 767px) {
  .feature-one__item { padding: 1.25rem; margin-bottom: 0; }
}

/* ── Produkt-Karten ─────────────────────────────────────── */
.product__item { height: 100%; display: flex; flex-direction: column; }
.product__item__content { flex: 1; display: flex; flex-direction: column; }
.product__item__price { flex: 1; }

@media (max-width: 575px) {
  .product__item__link,
  .firdip-btn.product__item__link {
    width: 100%;
    text-align: center;
    display: block;
  }
}

/* ── Warenkorb ───────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Tabelle scrollbar machen */
  .cart-table, .table-responsive-cart { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Warenkorb-Buttons Stack */
  .cart-actions { flex-direction: column; gap: 0.5rem; }
  .cart-actions .firdip-btn { width: 100%; text-align: center; }

  /* Warenkorb-Summe prominent */
  .cart__total { font-size: 1.1rem; }
}

/* ── Checkout ────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Bestellübersicht unter Formular */
  .checkout__sidebar { margin-top: 2rem; }

  /* Formular-Labels lesbar */
  .checkout__form label { font-size: 0.9rem; }
  .checkout__form .form-control { font-size: 1rem; padding: 0.6rem 0.75rem; }

  /* Zahlungsoptionen besser klickbar */
  .checkout__payment-method label {
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #dee2e6;
    display: block;
    cursor: pointer;
  }
}

/* ── Produktdetail ───────────────────────────────────────── */
@media (max-width: 767px) {
  .product-details .carousel { margin-bottom: 1.5rem; }

  /* Preis prominent */
  .product-details__price { font-size: 1.4rem !important; }

  /* Menge + Button als Stack */
  .product-details form.d-flex { flex-direction: column !important; align-items: stretch !important; }
  .product-details form .input-group { max-width: 100% !important; }
  .product-details form .firdip-btn { width: 100%; text-align: center; }
}

/* ── Allgemein / Kategorie-Seiten ───────────────────────── */
@media (max-width: 767px) {
  /* Suchleiste und Filter untereinander */
  .product-filter-bar { flex-direction: column !important; }
  .product-filter-bar form { width: 100%; }
}

/* ── Formulare (Login, Register, Kontakt) ───────────────── */
@media (max-width: 575px) {
  .login-form, .register-form, .contact-form {
    padding: 1.25rem !important;
  }
  .form-control, .form-select {
    font-size: 1rem !important; /* verhindert iOS Zoom */
    min-height: 44px;
  }
}

/* ── Footer ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .main-footer__top__inner {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .main-footer__top__social { justify-content: center; }

  .main-footer__middle .row > div { margin-bottom: 2rem; }

  .footer-widget__contact { font-size: 0.9rem; }

  .main-footer__bottom__inner { text-align: center; }
}

/* ── Page-Header (Breadcrumb-Banner) ────────────────────── */
@media (max-width: 767px) {
  .page-header { height: auto !important; padding: 3rem 0 1.5rem !important; }
  .page-header__title { font-size: 1.6rem !important; margin-top: 0 !important; }
}

/* ── Hero-Slider ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .main-slider-one__item { min-height: 60vw; }
  .main-slider-one__title { font-size: 1.4rem !important; }
  .main-slider-one__text { font-size: 0.9rem; }
  .main-slider-one__content { margin-top: 0 !important; }
  /* Container-Margin korrigieren */
  .main-slider-one__item .container { margin-top: 0 !important; }
}

/* ── Testimonials ────────────────────────────────────────── */
@media (max-width: 767px) {
  .testimonials-two__item .row { flex-direction: column; }
  .testimonials-two__item__thumb { margin-bottom: 1rem; }
  .carousel-thumb__two { display: none; } /* Thumbnail-Nav auf Mobile verstecken */
}

/* ── Konto / Account ─────────────────────────────────────── */
@media (max-width: 767px) {
  .account-tabs { flex-direction: column; }
  .account-tabs .nav-link { border-radius: 0.5rem; margin-bottom: 0.25rem; }

  /* Bestell-Tabelle scrollbar */
  .order-history-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Allgemeine Utility ───────────────────────────────────── */
@media (max-width: 575px) {
  .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  h1, .h1 { font-size: 1.8rem !important; }
  h2, .h2 { font-size: 1.5rem !important; }
  h3, .h3 { font-size: 1.25rem !important; }
}

/* iOS Safari: kein Zoom bei Focus auf Input */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: 16px !important; }
}

/* ── Warenkorb – Details ─────────────────────────────────── */
@media (max-width: 767px) {
  /* Coupon-Formular stacken */
  .cart-page__coupone-form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem;
  }
  .cart-cupon__input { width: 100% !important; flex: none !important; }
  .cart-page__coupone-form .firdip-btn { width: 100%; text-align: center; }

  /* Warenkorb-Buttons stacken */
  .cart-page__buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem;
  }
  .cart-page__buttons .firdip-btn { width: 100%; text-align: center; }

  /* Summen-Liste besser lesbar */
  .cart-page__cart-total li {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f0f0;
  }

  /* Produkt-Bild im Warenkorb kleiner */
  .cart-page__table__meta-img img { width: 60px !important; height: 60px !important; object-fit: cover; }
  .cart-page__table__meta { gap: 0.5rem; }
  .cart-page__table__meta-title { font-size: 0.9rem; }

  /* Mengen-Steuerung größer für Touch */
  .quantity-box input { width: 40px !important; }
  .quantity-box .sub,
  .quantity-box .add { min-width: 36px; min-height: 36px; }
}

/* ── Checkout – Mobile ───────────────────────────────────── */
@media (max-width: 767px) {
  /* Bestellzusammenfassung unter das Formular */
  .checkout__sticky-sidebar { position: static !important; }

  /* Checkbox-Labels bei Zahlungsoptionen */
  .checkout__shipping-address .form-check-label,
  .cart-page__coupone-form label { font-size: 0.95rem; }

  /* Submit-Button volle Breite */
  .checkout-form__submit { width: 100% !important; }
}

/* ── Produkt-Karten: Preis + Button auf kleinen Screens ─── */
@media (max-width: 480px) {
  .product__item__content { padding: 0.75rem; }
  .product__item__title { font-size: 0.85rem; }
  .product__item__price { font-size: 0.9rem; }
  .product__item__link { font-size: 0.8rem !important; padding: 0.4rem 0.5rem !important; }
}

/* ── Kategorie-Filter auf allgemein.php ──────────────────── */
@media (max-width: 767px) {
  /* Badge-Links umbrechen sauber */
  .d-flex.flex-wrap.gap-2 { gap: 0.4rem !important; }
  .badge.fs-6 { font-size: 0.8rem !important; padding: 0.4rem 0.6rem !important; }

  /* Suchfeld-Zeile stacken */
  .col-md-5 form.d-flex { flex-wrap: wrap; }
  .col-md-5 form .form-control { width: 100%; margin-bottom: 0.5rem; }
}

/* ── Mobile Nav – Touch-Targets verbessern ───────────────── */
.mobile-nav__contact li { padding: 0.5rem 0; }
.mobile-nav__contact a { font-size: 1rem; padding: 0.3rem 0; display: inline-block; }

/* ── Hero Slider: Container-Margin auf Mobile entfernen ─── */
@media (max-width: 767px) {
  .main-slider-one__item .container[style*="margin-top"] {
    margin-top: 0 !important;
  }
}

/* ── Tabellen generell: immer scrollbar ──────────────────── */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ── Login / Register – Formular-Padding ────────────────── */
@media (max-width: 575px) {
  .firdip-form, .firdip-form__inner { padding: 1.5rem !important; }
  .register-form .row .col-md-6 { margin-bottom: 0; }
}