/**
 * dosortiment — Sortiment-Panel (Slide-in von rechts; gleiche Optik/Mechanik
 * wie Lieferland-/Service-Navigation-Panel, siehe global.css).
 */
/* Panel-Optik (Sortiment, Service, Lieferland) steht gemeinsam in
   themes/dorwhite26/css/custom/global.css (Abschnitt Header). */

/* ── Kategorieseite /sortiment/{slug}: Produkt-Teaser-Grid ── */
/* Volle Inhaltsbreite wie Vorlage node/10 (1176px); Brotkrumen, linksbündige
   Überschrift mit Linie, grauer Bereich über die ganze Breite, Teaser in
   einer mittigen Spalte (2 x 295px – wie im alten Shop, damit die Titel
   nicht umbrechen; Wunsch Denis 26.10.2026, vorher 271px aus node/10). */
.dw-kategorie {
  max-width: none;
  margin: 0;
}
.dw-kategorie__crumbs {
  font-size: 14.4px;
  line-height: 14.4px;
  color: #212529;
  margin: 0 0 30px;
}
.dw-kategorie__crumbs a { color: #b32d2f; text-decoration: none; }
.dw-kategorie h1.dw-kategorie__title {
  text-align: left;
  line-height: 48px;
  margin: 0 0 30px;
  padding: 0 0 24px;
  border-bottom: 2px solid #c4c7d2;
}
/* Hintergrund wie Vorlage node/10: hellvioletter Grund (#f3f2f7) mit dem
   dekorativen Banner oben – nur hinter dem Produktraster (Titel/Filter
   bleiben auf weiß). Zentriert, Breite wie die Vorlage (kein Full-Bleed). */
.dw-kategorie__grid {
  display: grid;
  grid-template-columns: repeat(2, 295px);
  justify-content: center;      /* mittige Spalte 2 x 295px + 14px */
  column-gap: 14px;             /* Abstände wie im alten Shop (Andre 05.11.2026) */
  row-gap: 19px;
  align-items: stretch;
  max-width: none;              /* grauer Bereich über die volle Breite */
  margin: 0 0 24px;
  padding: 40px 0 68px;
  background-color: #f3f2f7;
  background-image: url(../img/kategorie_bg.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
}
@media (max-width: 640px) {
  .dw-kategorie__grid {
    grid-template-columns: minmax(0, 320px);
  }
}
/* Kachel-Optik liegt in produkt.css (.produkt-teaser) – Live-Shop-Stil. */
.dw-kategorie__leer {
  grid-column: 1 / -1;
  text-align: center;
  color: #6b7680;
}

/* Texte der Kategorie (gepflegt am Kategorie-Begriff). */
.dw-kategorie__kurztext {
  margin: 0 0 24px;
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
  color: #416681;
}
.dw-kategorie__kurztext p { margin: 0; }
.dw-kategorie__beschreibung {
  margin: 56px 0 0;
  font-size: 17.6px;
  line-height: 1.6;
}
.dw-kategorie__beschreibung img { max-width: 100%; height: auto; }
.dw-kategorie__reiter { margin: 48px 0 0; }
.dw-kategorie h2,
.dw-kategorie h3 { color: #416681; }
.dw-kategorie table { max-width: 100%; }
.dw-kategorie .dw-akk__body { overflow-x: auto; }

/* ── Kategorie-Filterleiste (Ziele / Eigenschaften) ────────── */
.dw-filter {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px auto 30px;
  padding: 0;
  background: transparent;      /* kein grauer Kasten – klar wie node/10 */
}
.dw-filter__group {
  display: flex;
  align-items: center;
  justify-content: center;      /* zentriert wie in der Vorlage */
  flex-wrap: wrap;
  gap: 10px;
}
.dw-filter__label {
  font-family: 'Anton', sans-serif;
  color: #416681;
  font-size: 16px;
}
.dw-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dw-filter__chip {
  background: #fff;
  border: 1px solid #c9d2d9;
  border-radius: 20px;
  color: #416681;
  font-size: 14px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.dw-filter__chip:hover {
  border-color: #416681;
}
.dw-filter__chip.is-active {
  background: #416681;
  border-color: #416681;
  color: #fff;
}
.dw-filter__reset {
  align-self: flex-start;
  background: none;
  border: none;
  color: #b32d2f;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  margin-bottom: -8px;          /* näher an die Trefferzahl (Abstand 4px statt 12px) */
  text-decoration: underline;
}
.dw-filter__count {
  color: #6b7680;
  font-size: 14px;
}
@media (max-width: 560px) {
  .dw-filter__label { min-width: 0; width: 100%; }
}

/* Kategorie-Banner (Inhaltstyp kategorie_banner): Kachel im Produktraster,
   Karte auf Höhe der Produktkarten, ganze Kachel verlinkt. */
.dw-banner-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 3px solid #c4c7d2;
  border-radius: 12px;
  overflow: hidden;
  padding: 0 16px 32px;
  box-sizing: border-box;
  color: #416681;
  transition: box-shadow .15s ease, transform .15s ease;
}
.dw-banner-kachel:hover {
  box-shadow: 0 6.4px 17.6px rgba(65,102,129,0.112);   /* 20 % schwächer, wie Produkt-Teaser */
  transform: translateY(-1.6px);
}
.dw-banner-kachel img {
  display: block;
  max-width: calc(100% + 32px);
  width: calc(100% + 32px);
  height: auto;
  margin: 0 -16px;
}
.dw-banner-kachel p { margin: 0 0 12px; }
.dw-banner-kachel h2 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: #416681;
  margin: 18px 0 10px;
}
.dw-banner-kachel hr {
  width: 110px;
  border: 0;
  border-top: 3px solid #b32d2f;
  margin: 0 auto 18px;
  opacity: 1;
}
.dw-banner-kachel__button span {
  display: inline-block;
  background: #b32d2f;
  color: #fff;
  border-radius: 4px;
  padding: 17px 30px;
  margin-top: 12px;
}
.dw-banner-kachel__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.dw-banner-kachel__link:focus-visible {
  outline: 2px solid #416681;
  outline-offset: -4px;
  border-radius: 12px;
}
@media (max-width: 560px) {
  .dw-banner-kachel { margin-top: 0; }
}