/* =====================================================
   Sprudelmann – Mobile CSS (Gela/FrachtPilot, FINAL v2)
   - Desktop: unverändert
   - Mobile (<= 991.98px): 1 Spalte Produktliste, Filter oben (Collapse bleibt)
   - Filter-Typografie & Touch-Ziele vergrößert
   - Header/Warenkorb/Navigation unangetastet
   ===================================================== */

/* --- Base hygiene (keine Header-Manipulation) -------------------------- */
img, video, canvas, svg { max-width: 100%; height: auto; display: block; }
.content-container, .wrapper, .row { overflow-x: hidden; }

/* --- Produktliste & Spalten (mobil) ------------------------------------ */
@media (max-width: 991.98px) {
  /* Filter- und Hauptspalte volle Breite */
  .s-filter-column,
  .s-main-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Filter vor die Produktliste ziehen */
  .s-filter-column { order: -1; margin-bottom: 12px; }

  /* Jegliche Produkt-Spalten in der Hauptspalte -> 1 Spalte */
  .s-main-column .row > [class^="col-"],
  .s-main-column .row > [class*=" col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Karten/Produkte volle Breite + saubere Abstände */
  .s-main-column .card,
  .s-main-column .product,
  .s-main-column .product-list-item,
  .s-main-column .article,
  .s-main-column .item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px 0 !important;
    box-sizing: border-box !important;
  }

  /* Toolbar/Suchergebniszeile nicht quetschen */
  .s-main-column .filter-by-label-wrapper,
  .s-main-column .input-group,
  .s-main-column .form-row {
    width: 100% !important;
  }

  /* Modals auf volle Breite */
  .modal, .modal-dialog {
    max-width: 100% !important;
    margin: 10px auto !important;
  }
}

/* --- Filter-Bereich lesbar & klickbar machen (mobil) ------------------- */
@media (max-width: 991.98px) {
  /* Grundgröße im gesamten Filter */
  .s-filter-column,
  .s-filter-column label,
  .s-filter-column .card,
  .s-filter-column .card-header,
  .s-filter-column .card-body {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  /* Überschrift-Leiste "Filtern nach" */
  .s-filter-column .s-filter-header h4 {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0;
  }

  /* Kategorie/Abschnittsüberschriften */
  .s-filter-column .s-filter-category {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-top: 6px;
    margin-bottom: 6px;
  }

  /* Checkbox-Listenpunkte */
  .s-filter-column .ilx-filter-item label.small {
    font-size: 16px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
  }
  .s-filter-column .ilx-filter-item input[type="checkbox"] {
    width: 18px; height: 18px;
  }

  /* Suchfeld im Filter */
  .s-filter-column input[type="text"],
  .s-filter-column .form-control {
    font-size: 16px !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
  }

  /* Collapse-Button (oben rechts bei XS) vollbreit darstellen */
  .s-filter-column .d-block.d-xl-none .form-row .col-auto > .btn {
    width: 100% !important;
    display: block;
    font-weight: 700;
    padding: .6rem .8rem;
    margin-top: 8px;
  }

  /* Card-Rahmen des Filter-Panels etwas weicher */
  #uid1316005271.card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
  }
  .s-filter-body { padding-top: 10px !important; }
  .s-filter-footer .btn { font-size: 15px !important; }
}

/* --- Kleiner Feinschliff XS ------------------------------------------- */
@media (max-width: 575.98px) {
  .navbar-brand img { max-height: 40px; }
  .content-container .btn,
  .content-container .form-control { font-size: 16px; }
}