/* ==========================================================================
   Jeddeloh – Responsive-Layout (fluide Container, selbst-skalierendes Produkt-
   raster Smartphone → 4K, Touch-Ziele, Mobil-Filter).
   Reine Selektoren/Media-/Container-Queries – KEINE Token-Definitionen mehr.
   Alle Tokens (inkl. der fluiden) liegen kanonisch in design-tokens.css.
   Siehe responsive.md für Begründung und Zielbild.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Erweiterte Breakpoint-Leiter (zur Orientierung – in Media-Queries nutzen):
     sm 576 · md 768 · lg 992 · xl 1200 · xxl 1600 · 3xl 1920 (2K) · 4k 2560
   4K-Panels laufen oft mit 150% Skalierung → effektiv ~2560 CSS-px.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.container-read {
  width: 100%;
  max-width: var(--container-read);
  margin-inline: auto;
  padding-inline: var(--page-pad-x);
}
/* .container-wide ist in theme.css definiert (Header/Footer/Home, weite Breite). */

/* --------------------------------------------------------------------------
   Produktraster – EMPFOHLEN: selbst-skalierend (2 → 8+ Spalten)
   <div class="product-grid"> … Karten … </div>
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  gap: var(--gutter-fluid);
  grid-template-columns: repeat(auto-fill, minmax(min(clamp(var(--card-min), var(--card-ideal), var(--card-max)), 100%), 1fr));
  /* stretch (Default): Karten einer Zeile gleich hoch -> Add-Kreise bündig */
}
/* Kleine Phones: kleinere Mindestbreite -> 2 Spalten statt 1 auf 360px */
@media (max-width: 575px) {
  .product-grid, .has-sidebar .product-grid { --card-min: 150px; }
}
/* Karten im Auto-Grid füllen ihre Spalte (max-width:400px aus components.css aufheben) */
.product-grid .product-box.box-standard { max-width: none; margin: 0; }

/* Variante mit Filter-Sidebar: etwas größere Mindestbreite → eine Spalte weniger.
   Erst ab 576px: auf dem Handy hat die Regel die 150px von oben wieder überschrieben,
   deshalb stand der Katalog dort einspaltig (Uwe, 22.09.2026). */
@media (min-width: 576px) { .has-sidebar .product-grid { --card-min: 210px; } }

/* Breite Bildschirme: Karten NICHT weiter aufziehen, sondern das Raster mittig setzen.
   Vorher füllten vier riesige Kacheln einen 2000er-Monitor; jetzt behalten sie ihre
   Größe, es passen mehr Treffer nebeneinander, und der Block steht in der Mitte.
   Unter 1200px bleibt alles wie gehabt (dort sollen die Karten die Breite füllen). */
@media (min-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--card-min), var(--card-max)));
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Produktraster – ALTERNATIVE: explizite Breakpoint-Leiter (volle Kontrolle)
   <div class="product-grid--fixed"> … </div>
   -------------------------------------------------------------------------- */
.product-grid--fixed {
  display: grid;
  gap: var(--gutter-fluid);
  grid-template-columns: repeat(2, 1fr);     /* Phone: 2 */
}
@media (min-width: 768px)  { .product-grid--fixed { grid-template-columns: repeat(3, 1fr); } }  /* Tablet */
@media (min-width: 992px)  { .product-grid--fixed { grid-template-columns: repeat(4, 1fr); } }  /* Laptop */
@media (min-width: 1200px) { .product-grid--fixed { grid-template-columns: repeat(5, 1fr); } }  /* Desktop */
@media (min-width: 1600px) { .product-grid--fixed { grid-template-columns: repeat(6, 1fr); } }  /* Großbild */
@media (min-width: 1920px) { .product-grid--fixed { grid-template-columns: repeat(7, 1fr); } }  /* 2K */
@media (min-width: 2560px) { .product-grid--fixed { grid-template-columns: repeat(8, 1fr); } }  /* 4K */
/* mit Filter-Sidebar jeweils eine Spalte weniger */
.has-sidebar .product-grid--fixed { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px)  { .has-sidebar .product-grid--fixed { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .has-sidebar .product-grid--fixed { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .has-sidebar .product-grid--fixed { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1600px) { .has-sidebar .product-grid--fixed { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1920px) { .has-sidebar .product-grid--fixed { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 2560px) { .has-sidebar .product-grid--fixed { grid-template-columns: repeat(7, 1fr); } }

/* --------------------------------------------------------------------------
   Produktkarte: an die SPALTENBREITE anpassen (Container Queries) statt an
   den Viewport – robuster als die alte Sonder-Breakpoint-Verkettung.
   -------------------------------------------------------------------------- */
.product-grid > * { container-type: inline-size; }
@container (min-width: 240px) {
  .product-box.box-standard .product-name  { font-size: var(--fs-card-name); }
  .product-box.box-standard .product-price { font-size: var(--fs-card-price); }
}

/* --------------------------------------------------------------------------
   Responsive Bilder (mit srcset im HTML kombinieren)
   <img class="fluid-img" srcset="…300w …600w …1200w" sizes="(min-width:1200px) 18vw, 45vw">
   -------------------------------------------------------------------------- */
.fluid-img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   Mobil/Tablet: Filter & Sortierung als Drawer/Bottom-Sheet + Sticky-Bar
   -------------------------------------------------------------------------- */
.filter-bar-mobile {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky-bar);
  display: flex;
  gap: 8px;
  padding: 8px var(--page-pad-x);
  background: var(--color-white);
  box-shadow: var(--shadow-bar);
}
.filter-bar-mobile .btn { flex: 1; min-height: var(--tap-target); }
@media (min-width: 992px) { .filter-bar-mobile { display: none; } }  /* ab Laptop: echte Sidebar */

/* Touch-Ziele auf Touch-Geräten vergrößern (Selektoren = real existierende Klassen;
   die alte Liste zielte auf Phantom-Klassen und war wirkungslos). */
@media (pointer: coarse) {
  .btn, .main-navigation-link, .filter-toggle-btn { min-height: var(--tap-target); }
  .header-tool, .header-cart, .az-grid a, .lang-switch summary, .cart-remove-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--tap-target); min-width: var(--tap-target);
  }
}

/* --------------------------------------------------------------------------
   4K/Großbild: persistente Sidebar, mehr Luft, kein „verloren in der Mitte"
   (Die größere Basisschrift ab 2560px ist als Token-Override in design-tokens.css.)
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  .listing-layout { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 2vw, 48px); }
  .listing-layout .filter-sidebar { position: sticky; align-self: start; }  /* top: app.css (unter dem Header) */
}
@media (min-width: 2560px) {
  .listing-layout { grid-template-columns: 340px 1fr; }
}

/* --------------------------------------------------------------------------
   Reduced motion respektieren
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}