/* ==========================================================================
   careshop Produktkarten – "warmer Look" (alle Theme-.product-cell)
   NUR CSS auf vorhandene Theme-Klassen. Kein Override von item_box.tpl ->
   das buy_form (wke=1, Hidden-Felder, Variationen) bleibt unberuehrt.
   Farben = CI. Geladen via layout/header.tpl GLOBAL -> Kategorie-/Suchlisten
   UND Startseiten-Highlights-Slider UND Produkt-Slider (Aehnliche/Zubehoer).
   Slider bleiben heil: 1 Karte je .product-wrapper.slider (Gleichhoehe-Kette
   :has()-geschuetzt), Einspaltig-Mobil nur auf .row.productlist--gallery.
   ========================================================================== */

/* ---- Karte ---- */
.product-cell__wrapper{
  background:#fff;
  border:1px solid #EDE4D3;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(47,62,70,.08);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  height:100%;
}
.product-cell:hover .product-cell__wrapper{
  box-shadow:0 12px 26px rgba(47,62,70,.14);
  border-color:#DBE6BF;
  transform:translateY(-3px);
}

/* Bildbuehne: neutraler Fond (Bild fuellt via cover; kein brauner Streifen mehr) */
.product-cell__wrapper .image-link-wrapper{
  background:#fff;
}

/* Innenabstand des Textkoerpers */
.product-cell__body{
  padding:14px 16px 16px;
}

/* ---- Badges (TOP ANGEBOT / TOP BEWERTET / BESTSELLER) ---- */
.product-cell .overlay-label{
  border-radius:16px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  padding:4px 12px;
  box-shadow:0 2px 6px rgba(47,62,70,.15);
}
.product-cell .overlay-label.topangebote{ background:#7A9A4E; color:#fff; }
.product-cell .overlay-label.topbewertet{ background:#8DA174; color:#fff; }
.product-cell .overlay-label.bestseller{ background:#CBD8A6; color:#333; }

/* ---- Titel ---- */
.product-cell__title a{
  color:#2f3e46;
  font-weight:600;
  transition:color .15s ease;
}
.product-cell__title a:hover{ color:#46591f; }

/* ---- Preis hervorheben ---- */
.product-cell__price-wrapper .price_label.pricestarting{
  color:#6a7b59;
  font-size:.87rem;
}
.product-cell__price-wrapper .price{
  color:#46591f;
  font-weight:700;
  font-size:1.15rem;
  line-height:1.2;
}

/* ---- Verfuegbarkeit / Lieferzeit ---- */
.product-cell__delivery-status{
  color:#6a7b59;
  font-size:.87rem;
}
.product-cell__delivery-status .signal_image.status-2 small,
.product-cell__delivery-status .status-2 small{ color:#7A9A4E; }

/* ---- Buttons ----
   "Artikel-Details" (Sekundaeraktion) = Salbei-Pille (CI-Standard).
   "In den Warenkorb" (Primaeraktion)   = kraeftiges Gruen. */
.product-cell__add-to-basket-button{
  border-radius:10px;
  font-weight:600;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.product-cell__add-to-basket-button.btn-outline-secondary,
a.product-cell__add-to-basket-button.btn-outline-secondary{
  background:#CBD8A6;
  border-color:#CBD8A6;
  color:#333;
}
.product-cell__add-to-basket-button.btn-outline-secondary:hover,
a.product-cell__add-to-basket-button.btn-outline-secondary:hover{
  background:#BCCB92;
  border-color:#BCCB92;
  color:#2f3e46;
}
.product-cell__add-to-basket-button.btn-primary{
  background:#7A9A4E;
  border-color:#7A9A4E;
  color:#fff;
}
.product-cell__add-to-basket-button.btn-primary:hover{
  background:#6C8A44;
  border-color:#6C8A44;
  color:#fff;
}

/* ==========================================================================
   Layout A · verfeinert
   Reihenfolge in der Karte: Bild → Titel → Sterne → Preis (P2, gross) →
   Verfuegbarkeit + Versandkostenfrei → USP-Bullets → Button.
   Bild feste Hoehe (gleiche Kartenhoehe), Piktogramme raus, straffe Abstaende.
   ========================================================================== */

/* Bild: NATUERLICH (Theme-Default, .img-fluid = width:100%, height:auto).
   KEIN aspect-ratio / kein height:100%-Zwang mehr -> war fragil (brauner
   Streifen, Riesenbilder, Konflikt mit Theme-JS/Lazy-Load). Bild fuellt die
   Breite, Buehne fittet die Bildhoehe -> kein Streifen. */
.product-cell__wrapper .image-link-wrapper img{ width:100%; height:auto; display:block; }

/* Textkoerper straffen */
.product-cell__body{ padding:12px 14px 14px; }
/* Caption (Titel/Sterne/Preis) darf in der Flex-Kette NICHT wachsen und KEINE
   erzwungene Hoehe bekommen -> Abstand Preis->"Sofort verfuegbar" bleibt IMMER
   konstant (8px), der freie Ausgleichsraum wandert komplett in .expandable ueber
   den Button. WICHTIG: das Theme setzt der Caption sonst eine groessere Hoehe
   (flex/min-height) -> Leerraum unter dem Preis. Daher height/min-height/flex
   hart zuruecksetzen. Live verifiziert: Abstand 8/8/8, Buttons bleiben buendig. */
.product-cell__caption{
  display:block !important;
  flex:0 0 auto !important;
  height:auto !important;
  min-height:0 !important;
}
/* Titel auf ~2 Zeilen reservieren -> Sterne/Preis starten auf gleicher Hoehe */
.product-cell__title{ margin:0 0 4px; min-height:2.4rem; }
.product-cell__title a{ font-size:1rem; line-height:1.25; }

/* Bewertung: Sterne in Trust-Gold, kompakt (ohne Anzahl).
   Feste Zeilenhoehe -> Preis bleibt auch bei Artikeln OHNE Bewertung buendig
   (leerer Platzhalter .product-cell__rating--empty aus item_box.tpl). */
.product-cell__rating{ margin:2px 0 6px; min-height:22px; }
.product-cell__rating .rating__stars svg,
.product-cell__rating .icon-content svg,
.product-cell__rating .icon-content svg use{ fill:#E8A200 !important; color:#E8A200 !important; }

/* Preis P2: kleines "ab" ueber grosser Zahl */
.product-cell__price-wrapper{ margin:2px 0 0; }
.product-cell__price-wrapper .price_label.pricestarting{
  display:block; font-size:.8rem; font-weight:400; color:#6a7b59; margin:0 0 1px;
}
.product-cell__price-wrapper .price{
  color:#46591f; font-weight:700; font-size:1.5rem; line-height:1.1;
}

/* Verfuegbarkeit + Versandkostenfrei als ruhige Meta-Zeilen */
.product-cell__delivery-status{ margin:8px 0 0; color:#6a7b59; font-size:.87rem; }
.product-cell__shippingfree{
  display:flex; align-items:center; justify-content:center; gap:5px;
  margin:4px 0 0; font-size:.87rem; font-weight:600; color:#46591f;
}
.product-cell__shippingfree svg{ flex:0 0 auto; }

/* USP-Bullet-Liste (2–5 Zeilen) aus der Kurzbeschreibung; Piktogramme raus */
.product-cell__shortdescription{
  margin:9px 0 0; font-size:.87rem; line-height:1.45; color:#4a5a52;
  min-height:3.2em; text-align:left;
}
/* Kategorie-Raster: feste USP-Flaeche reservieren, damit der Abstand USP->Button
   NICHT variiert (bei kuerzerer USP-Liste sammelte sich der Gleichhoehe-Ausgleich
   dort). ~4-5 Zeilen. Live verifiziert: Abstand USP->Button 0/3/6 statt 0/21/28,
   Buttons bleiben buendig. Nur Kategorie-Grid -> OPC-Stream/Slider unberuehrt. */
.row.productlist--gallery .product-cell__shortdescription{ min-height:88px; }
.product-cell__shortdescription ul{ list-style:none; margin:0; padding:0; }
/* WICHTIG: Abstand auf die <li> (margin), NICHT auf die <ul> (gap). Manche
   Wawi-Kurzbeschreibungen enthalten die <li> OHNE <ul>-Container (nur nackte
   <li>) -> ein ul{gap} greift dort nicht, die Punkte haetten Browser-Standard-
   Abstaende (ungleich zu Karten MIT <ul>). Ueber li{margin-bottom} ist der
   Abstand IMMER gleich (mit oder ohne <ul>). Umbrechende Punkte: haengender
   Einzug (2. Zeile unter dem Text, nicht unterm Pfeil). */
.product-cell__shortdescription li{
  list-style:none; position:relative; padding-left:22px; margin:0 0 7px;
}
.product-cell__shortdescription li:last-child{ margin-bottom:0; }
.product-cell__shortdescription li::before{
  content:""; position:absolute; left:0; top:.15em; width:14px; height:14px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a9a4e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.product-cell__shortdescription br{ display:none; }
.product-cell__shortdescription img,
.product-cell__shortdescription .kk-image-banner,
.product-cell__shortdescription .pflegebettregiakurz{ display:none !important; }

/* Button-Wrapper Grundabstand (wird bei gleicher Hoehe unten auf auto gesetzt) */
.product-cell__button-wrapper{ margin-top:11px; }

/* ==========================================================================
   Feinschliff: Reihenabstand + GLEICHE Kartenhoehe (Button unten buendig)
   Wichtig: :not(:has(> .product-wrapper)) nimmt einen evtl. VERSCHACHTELTEN
   Batch-Container aus (sonst Flex-nowrap-Ueberlauf). Der Normalisierer
   (js/productlist-fix.js) loest die Verschachtelung ohnehin auf, und die
   Bilder sind jetzt NATUERLICH (kein aspect-ratio) -> keine Riesen-Streckung
   mehr wie frueher. Damit ist die Gleichhoehe-Kette wieder sicher.
   ========================================================================== */

.row.productlist--gallery{ row-gap:1.4rem; }

/* Horizontales Verhalten: verschachtelte Charge umbricht statt wegzulaufen */
.product-wrapper{ display:flex; flex-wrap:wrap; }
.product-wrapper > .product-cell{ width:100%; }

/* Gleiche Kartenhoehe: Spalte -> Karte -> Body strecken; Button margin:auto */
.product-wrapper:not(:has(> .product-wrapper)){ display:flex; flex-wrap:nowrap; }
.product-wrapper:not(:has(> .product-wrapper)) > .product-cell{ display:flex; }
.product-cell > .product-cell__wrapper{ display:flex; flex-direction:column; width:100%; height:100%; }
.product-cell__body{ display:flex; flex-direction:column; flex:1 1 auto; }
.product-cell__body > .expandable{ display:flex; flex-direction:column; flex:1 1 auto; }
.product-cell__body > .expandable > form{ display:flex; flex-direction:column; flex:1 1 auto; }
.product-cell__body > .expandable > form > .stack{ display:flex; flex-direction:column; flex:1 1 auto; }
.product-cell__button-wrapper{ margin-top:auto; padding-top:14px; }

/* USP-Bereich: Sicherheitskappe gegen ausufernden Alt-Fliesstext */
.product-cell__shortdescription{ max-height:14em; overflow:hidden; }

/* Edler Button: Pille, Sperrung, gruener Pfeil der auf Hover gleitet */
.product-cell__add-to-basket-button{
  border-radius:999px;
  font-weight:600;
  letter-spacing:.03em;
  font-size:.87rem;
  padding:11px 20px;
  width:100%;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.product-cell__add-to-basket-button.btn-outline-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  background:#CBD8A6; border-color:#CBD8A6; color:#333;
}
.product-cell__add-to-basket-button.btn-outline-secondary::after{
  content:"→"; font-weight:700; color:#46591f; transition:transform .18s ease;
}
.product-cell__add-to-basket-button.btn-outline-secondary:hover{
  background:#BCCB92; border-color:#BCCB92; color:#2f3e46;
  box-shadow:0 5px 14px rgba(122,154,78,.30);
}
.product-cell__add-to-basket-button.btn-outline-secondary:hover::after{ transform:translateX(3px); }
.product-cell__add-to-basket-button.btn-primary{ border-radius:999px; padding:11px 20px; }

/* ==========================================================================
   Mobil (≤767px) · ZWEISPALTIG (2026-07-21)
   Vorher einspaltig ("Option A"): gemessen nur 1,3 Produkte je Bildschirm und
   27 Bildschirme zum Durchscrollen der 20 Pflegebetten - die hinteren Betten
   sah praktisch niemand. Zweispaltig zeigt ~5 Produkte je Bildschirm.
   HINWEIS: Das Theme liefert die Karten ohnehin als `col-6` (= zweispaltig);
   einspaltig war ALLEIN unsere frueher erzwungene 100%-Breite. Die faellt hier
   weg, statt eine neue Breite zu erzwingen -> Bootstrap regelt das Raster.
   Die Karte wird nur um das erleichtert, was auf ~170px Breite unlesbar waere.
   ========================================================================== */
@media (max-width:767px){
  .row.productlist--gallery{ row-gap:.85rem; }

  /* VOLLE BILDSCHIRMBREITE fuer die Produktreihe (Nutzer 2026-07-21: "es ist
     noch Platz nach links oder rechts"). Der Shop-Container legt seitlich
     21,8px an - auf 375px sind das fast 12% der Bildschirmbreite. Die Reihe
     zieht sich per negativem Margin darueber hinaus auf ~10px Rand; jeder so
     gewonnene Pixel landet direkt im Produktfoto. Bewusst NICHT das Container-
     Padding selbst angefasst: das gilt fuer die ganze Seite (Ueberschrift,
     Text, Filterzeile) und die sollen ihren ruhigen Rand behalten. */
  .row.productlist--gallery{ margin-left:-12px; margin-right:-12px; }
  .row.productlist--gallery > .product-wrapper{ padding-left:5px; padding-right:5px; }

  /* PRODUKTFOTO IM ORIGINALFORMAT (Nutzer: "teilweise abgeschnitten").
     Gemessen sind die Quellbilder 1,61:1 bis 1,66:1, also praktisch der
     Bildstandard 1,6:1 (1600x1000). Das zuvor gesetzte 4:3 schnitt davon rund
     ein Viertel links/rechts weg. `8/5` = exakt 1,6:1 -> das Bett ist
     vollstaendig zu sehen, und weil die Karte jetzt breiter ist, bleibt das
     Foto trotzdem so gross wie vorher (Flaeche praktisch unveraendert).
     Das feste Verhaeltnis bleibt noetig, damit alle Karten gleich hoch starten
     (die 1,66er wuerden sonst 3px abweichen). Nur hier gescoped: globale
     aspect-ratio-Regeln waren frueher fragil (Riesenbilder, Lazy-Load). */
  .row.productlist--gallery .image-link-wrapper img{
    aspect-ratio:8/5; width:100%; height:auto; object-fit:cover;
  }

  /* Linke Kante beibehalten (Theme zentriert sonst -> Zeilen sprangen) */
  .product-cell__body,
  .product-cell__body--center,
  .product-cell__caption,
  .product-cell__caption.text-center,
  .product-cell__delivery-status.text-center,
  .product-cell__rating{ text-align:left !important; }
  .row.productlist--gallery .product-cell__body{ padding:10px 11px 12px; }

  /* Titel auf zwei Zeilen deckeln -> Preise stehen in beiden Spalten auf
     gleicher Hoehe, ohne dass lange Namen die Karte aufblaehen. */
  .row.productlist--gallery .product-cell__title{ min-height:2.6em; margin-bottom:2px; }
  .row.productlist--gallery .product-cell__title a{
    font-size:.9rem; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .row.productlist--gallery .product-cell__rating{ min-height:0 !important; margin:1px 0 3px; }
  .row.productlist--gallery .product-cell__price-wrapper .price{ font-size:1.15rem; }
  .row.productlist--gallery .product-cell__price-wrapper .price_label.pricestarting{ font-size:.8rem; }
  .row.productlist--gallery .product-cell__delivery-status{ font-size:.87rem; margin-top:5px; }
  .row.productlist--gallery .product-cell__shippingfree{
    display:flex; justify-content:flex-start; margin-top:3px; font-size:.87rem;
  }

  /* WAS AUF ~170px BREITE NICHT MEHR TRAEGT:
     - Lieferzeit-Spanne: Detailinfo, steht auf der Produktseite (die Zeile
       "Sofort verfuegbar" darueber bleibt und ist die wichtigere Aussage).
     - USP-Liste: bei dieser Breite nur noch zwei Woerter je Zeile.
     - Warenkorb-Button: ein Pflegebett wird konfiguriert, nicht direkt
       gekauft; die ganze Karte fuehrt zur Produktseite. */
  .row.productlist--gallery .estimated_delivery,
  .row.productlist--gallery .product-cell__shortdescription,
  .row.productlist--gallery .product-cell__button-wrapper{ display:none !important; }

  /* Badge auf der kleineren Karte etwas zurueckhaltender */
  .row.productlist--gallery .product-cell .overlay-label{
    font-size:12px; padding:3px 8px;
  }
}

/* (Frueherer OPC-Schutzblock entfernt: die damaligen Kollisionen kamen von
   aspect-ratio-Riesenbildern + verschachteltem Batch. Beides ist jetzt weg
   -> OPC-ProductStream/Zubehoer bekommt dieselbe saubere Gleichhoehe wie das
   Hauptgrid; die :has()-Bedingung schuetzt weiterhin vor Batch-Ueberlauf.) */

/* ==========================================================================
   Unterkategorien UNTER der Produktliste (Child productlist/subcategories.tpl)
   CI-Kacheln: Bild + Name + 2. Ebene (Unter-Unterkategorien) + "ansehen".
   Karte = <div> mit SEPARATEN Links (kein <a> in <a>). Zusaetzliche interne
   Verlinkung (UX + SEO). Ueberschrift traegt den Kategorienamen.
   ========================================================================== */
.cs-subcats{
  margin:2.6rem auto 0; width:100%;
  /* defensiv: falls die Sektion in einem Flex-/Grid-Kontext landet (z.B. neben
     der Produktreihe), NICHT als schmale Spalte danebenrutschen, sondern volle
     Breite als eigene Reihe. In Block-Kontexten harmlos/ignoriert. */
  flex-basis:100%; grid-column:1 / -1;
}
.cs-subcats__title{
  text-align:center; color:#2F3E46; font-size:1.6rem; font-weight:700;
  letter-spacing:-.01em; line-height:1.2; margin:0 0 1.5rem;
}
.cs-subcats__title::after{
  content:""; display:block; width:56px; height:3px; margin:.7rem auto 0;
  border-radius:999px; background:linear-gradient(90deg,#CBD8A6 0%,#7A9A4E 100%);
}
.cs-subcats__grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px;
}
.cs-subcat{
  display:flex; flex-direction:column; background:#fff; border:1px solid #EDE4D3;
  border-radius:14px; overflow:hidden;
  box-shadow:0 6px 16px rgba(47,62,70,.07);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cs-subcat:hover{
  transform:translateY(-3px); box-shadow:0 12px 26px rgba(47,62,70,.13); border-color:#DBE6BF;
}
/* Bildbuehne: fixe Hoehe -> gleiche Kacheln; fehlt ein Bild, bleibt die
   Soft-Gruen-Flaeche als sauberer Fallback. */
.cs-subcat__media{
  display:flex; align-items:center; justify-content:center;
  height:160px; background:#EEF3E3; overflow:hidden;
}
.cs-subcat__img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Fallback ohne eigenes Kategoriebild: sanfte Soft-Gruen-Kachel + dezentes
   Kategorie-Icon (statt Kamera-Dummy). */
.cs-subcat__media--empty{ background:linear-gradient(135deg,#EEF3E3 0%,#E2ECD1 100%); }
.cs-subcat__ph{ width:44px; height:44px; color:#AAC087; }
.cs-subcat:hover .cs-subcat__ph{ color:#8DA174; }
.cs-subcat__body{
  display:flex; flex-direction:column; padding:14px 16px 16px; flex:1 1 auto;
}
.cs-subcat__name{
  color:#2F3E46; font-weight:700; font-size:1.05rem; line-height:1.3;
  text-decoration:none; margin:0 0 8px; transition:color .15s ease;
}
.cs-subcat__name:hover{ color:#46591f; }
/* 2. Ebene: Unter-Unterkategorien als kompakte Link-Liste */
.cs-subcat__children{ margin:0 0 12px; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px; }
.cs-subcat__children li{ position:relative; padding-left:14px; }
.cs-subcat__children li::before{
  content:""; position:absolute; left:0; top:.5em; width:5px; height:5px;
  border-radius:50%; background:#8DA174;
}
.cs-subcat__children a{
  color:#4a5a52; font-size:.9rem; line-height:1.3; text-decoration:none; transition:color .15s ease;
}
.cs-subcat__children a:hover{ color:#46591f; text-decoration:underline; }
/* "ansehen" unten buendig (auch bei unterschiedlich langen Kinder-Listen) */
.cs-subcat__go{
  margin-top:auto; padding-top:6px; color:#46591F; font-weight:600; font-size:.9rem;
  text-decoration:none; display:inline-flex; align-items:center; gap:.4em;
}
.cs-subcat__go:hover{ color:#2f3e46; }
.cs-subcat__arw{ transition:transform .18s ease; }
.cs-subcat:hover .cs-subcat__arw{ transform:translateX(3px); }

@media (max-width:767px){
  .cs-subcats{ margin-top:2rem; }
  .cs-subcats__title{ font-size:1.35rem; margin-bottom:1.1rem; }
  .cs-subcats__grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .cs-subcat__media{ height:128px; }
  .cs-subcat__name{ font-size:1rem; }
  .cs-subcat__children a{ font-size:.87rem; }
}

/* ==========================================================================
   FALLBACK: Theme-eigener Unterkategorie-Block (.productlist-subcategories /
   .subcategory-card...). Greift, wenn der Child-Override subcategories.tpl
   (noch) nicht aktiv ist, das Theme aber – dank Backend "Unterkategorie
   anzeigen: Ja, als Text und Bild" – seine native Version rendert. So sieht
   der Block SO ODER SO im CI aus. (Child-Version nutzt .cs-subcats*, oben.)
   ========================================================================== */
.productlist-subcategories{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap:16px; margin:2.6rem auto 0;
}
.subcategory-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid #EDE4D3;
  border-radius:14px; overflow:hidden; box-shadow:0 6px 16px rgba(47,62,70,.07);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.subcategory-card:hover{
  transform:translateY(-3px); box-shadow:0 12px 26px rgba(47,62,70,.13); border-color:#DBE6BF;
}
.subcategory-card__link{ display:block; line-height:0; }
.subcategory-card__image{
  width:100%; height:160px; object-fit:cover; display:block; background:#EEF3E3;
}
.subcategory-card__image--missing{ background:#EEF3E3; }
.subcategory-card__title{
  display:block; color:#2F3E46; font-weight:700; font-size:1.05rem; line-height:1.3;
  text-decoration:none; padding:14px 16px 0; transition:color .15s ease;
}
.subcategory-card__title:hover{ color:#46591f; }
.subcategory-card__desc{ color:#4a5a52; font-size:.9rem; line-height:1.45; padding:6px 16px 0; }
.subcategory-card__sub-list{
  list-style:none; margin:8px 0 0; padding:8px 16px 14px;
  display:flex; flex-direction:column; gap:5px;
}
.subcategory-card__sub-list li{ position:relative; padding-left:14px; }
.subcategory-card__sub-list li::before{
  content:""; position:absolute; left:0; top:.5em; width:5px; height:5px;
  border-radius:50%; background:#8DA174;
}
.subcategory-card__sub-list a{ color:#4a5a52; font-size:.9rem; line-height:1.3; text-decoration:none; }
.subcategory-card__sub-list a:hover{ color:#46591f; text-decoration:underline; }
@media (max-width:767px){
  .productlist-subcategories{ grid-template-columns:repeat(2, 1fr) !important; gap:12px; }
  .subcategory-card__image{ height:128px; }
}

/* ==========================================================================
   Slider-Produktkarten: Abstand Preis -> "Sofort verfuegbar" IMMER gleich.
   Slick macht die Slides gleich hoch; der Ausgleichsraum soll sich NUR ueber
   dem Button sammeln, nie zwischen Preis und Verfuegbarkeit. Im Slider ist die
   Flex-Kette anders (.caption = block), daher hier explizit: alle Inhaltsbloecke
   wachsen NICHT (flex:0 0 auto), der Button-Wrapper zieht den Rest (margin-auto).
   Nur .product-slider (Startseiten-/Detail-Slider) – Kategorie-Grid unberuehrt.
   ========================================================================== */
.product-slider .product-cell__body{ display:flex; flex-direction:column; }
.product-slider .product-cell__caption,
.product-slider .product-cell__delivery-status,
.product-slider .product-cell__shippingfree,
.product-slider .product-cell__shortdescription{ flex:0 0 auto !important; }
.product-slider .product-cell__delivery-status{ margin-top:8px !important; }
.product-slider .product-cell__button-wrapper{ margin-top:auto !important; }

/* ==========================================================================
   Sterne IMMER horizontal in einer Zeile.
   In schmalen Rating-Bereichen (v.a. OPC-ProductStream) ist .rating__stars
   nur display:inline + schmal -> die inline-block-Sterne brachen um und
   stapelten sich (Rating 123px hoch, Preis dadurch verschoben). Fix: nowrap.
   ========================================================================== */
.product-cell__rating .rating__stars{
  display:inline-flex !important; flex-wrap:nowrap !important;
  white-space:nowrap; width:auto !important;
}
.product-cell__rating .rating__stars .icon-content{ flex:0 0 auto; }

/* ==========================================================================
   OPC-ProductStream ("Passendes Zubehör ..."): Preise/Sterne auf EINE Hoehe.
   Die Theme-Gleichhoehe-JS (row-eq-height) streckt die Titel unterschiedlich
   (bis >200px) -> Preise unterschiedlich hoch. Fix: Titel fest auf 3 Zeilen
   klemmen (gleiche Hoehe -> Preise fluchten), Rating feste Platzhalter-Zeile.
   ========================================================================== */
.opc-ProductStream .product-cell__title{
  min-height:3.75rem !important; max-height:3.75rem !important; height:auto !important; overflow:hidden;
}
.opc-ProductStream .product-cell__title a{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.opc-ProductStream .product-cell__rating{ min-height:22px !important; height:auto !important; }

/* Hauptkategorie-Karte (Blatt-Unterkategorie zeigt Eltern + Geschwister) */
.cs-subcat__eyebrow{
  display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:#7A9A4E; margin:0 0 4px;
}
.cs-subcat--parent .cs-subcat__media--empty{ background:linear-gradient(135deg,#DBE6BF 0%,#CBD8A6 100%); }
.cs-subcat--parent .cs-subcat__ph{ width:34px; height:34px; color:#46591F; }

/* ==========================================================================
   kkDropper-Artikel-Slider (OPC-Element "EMPFEHLUNG FÜR ..." auf Produktseiten)
   an den CI-Look der Theme-Produkt-Slider angleichen. Diese Karten haben KEIN
   .product-cell__wrapper -> die .product-cell selbst als weisse CI-Karte stylen.
   Rating-Klasse hier ist .item-box__rating (NICHT .product-cell__rating) ->
   Gold-Sterne separat. Preis/Titel/Badges greifen bereits ueber .product-cell*.
   ========================================================================== */
.kk-article-slider .product-cell{
  background:#fff !important;
  border:1px solid #EDE4D3 !important;
  border-radius:14px; overflow:hidden;
  box-shadow:0 6px 16px rgba(47,62,70,.08);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.kk-article-slider .product-cell:hover{
  box-shadow:0 12px 26px rgba(47,62,70,.14); border-color:#DBE6BF !important; transform:translateY(-3px);
}
.kk-article-slider .product-cell .image-link-wrapper{ background:#fff; }
.kk-article-slider .product-cell .product-cell__body{ padding:12px 14px 16px; }

/* Gold-Sterne auch fuer die Slider-Rating-Variante .item-box__rating
   (kkDropper-Artikel-Slider) – nicht nur .product-cell__rating. */
.item-box__rating .rating__stars svg,
.item-box__rating .icon-content svg,
.item-box__rating .icon-content svg use{ fill:#E8A200 !important; color:#E8A200 !important; }

/* ==========================================================================
   kkDropper-Artikel-Slider – Teil 2: Pfeile + gleiche Kartenhoehe.
   Pfeile: eigene Klassen .kk-item-slider-prev/-next (volle-Hoehe-Streifen,
   Chevron = Plugin-Background-SVG) -> als CI-Kreise (wie .slick/.splide).
   Karten: der Slider stretcht NICHT (Slides block) -> feste Bildhoehe (172px
   cover, wie der Theme-x-sell-Slider) + Titel-Mindesthoehe + Karten-Mindesthoehe
   -> gleich hohe Boxen. Live verifiziert: 300/300/300/300.
   ========================================================================== */
.kk-item-slider-prev,
.kk-item-slider-next{
  width:44px !important; height:44px !important;
  /* top = vertikales Zentrum der Bildbuehne (172px hoch) -> Pfeile UEBER dem Bild,
     wie bei den nativen Slidern (nicht in der Kartenmitte). */
  top:86px !important; bottom:auto !important; transform:translateY(-50%) !important;
  border-radius:999px !important;
  background-color:#ffffff !important;
  border:1px solid rgba(47,62,70,.22) !important;
  box-shadow:0 6px 18px rgba(47,62,70,.28), 0 2px 6px rgba(47,62,70,.18) !important;
  background-size:20px 20px !important; background-position:center !important; background-repeat:no-repeat !important;
  /* WICHTIG: der Slider-Track .kk-article-slider hat z-index:110, und .kk-item-
     slider-root (position:relative + z-index:auto) bildet KEINEN Stacking-Context
     -> das z:110 konkurriert direkt mit den Pfeilen. Bei z:5 lagen die Pfeile
     hinter den Karten, sobald der Track beim Scrollen/Bewegen seinen Transform
     aktiviert ("beim Hovern weg"). Pfeile MUESSEN ueber 110 liegen. */
  z-index:120 !important;
  /* Das Plugin setzt im Ruhezustand opacity:0.5 -> ueber bunten Produktbildern
     wirken die weissen Pfeile ausgewaschen/"verdeckt". Voll deckend erzwingen. */
  opacity:1 !important;
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.kk-item-slider-prev{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346591f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important; }
.kk-item-slider-next{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346591f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important; }
.kk-item-slider-prev:hover, .kk-item-slider-next:hover{ background-color:#7A9A4E !important; border-color:#7A9A4E !important; box-shadow:0 12px 28px rgba(122,154,78,.40) !important; }
.kk-item-slider-prev:hover{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important; }
.kk-item-slider-next:hover{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important; }
/* Deaktivierte Pfeile am Slider-Anfang/-Ende: das Plugin setzt .disallowed ->
   opacity:0.15 (fast unsichtbar = "weg"). Sichtbar-aber-gedimmt statt weg. */
.kk-item-slider-prev.disallowed,
.kk-item-slider-next.disallowed{ opacity:.45 !important; }

/* Gleiche Kartenhoehe + Bildbuehne + CONTAINER-HOEHE.
   WICHTIG: das kkDropper-JS setzt .kk-item-slider-root eine feste Inline-Hoehe
   (basierend auf den urspruenglich grossen Bildern, z.B. 600px). Die Slides sind
   absolut positioniert -> height:auto kollabiert den Root auf 0. Darum die Root-
   Hoehe HART auf die Kartenhoehe setzen -> keine Riesenluecke mehr, und die
   (mittig positionierten) Pfeile sitzen wieder auf Kartenhoehe.
   Hoehe = 404px: Inhaltshoehe der Karten MIT Sternen + "ab" (~336px) PLUS der
   unten angedockte "Artikel-Details"-Button (~56px). Niedrigere Werte schneiden
   Preis/Button ab.
   Bild = contain (kein Crop -> Produkt komplett sichtbar, Zubehoer sind oft
   Freisteller). Bild OBEN buendig (align-items:flex-start) -> keine Lücke ueber
   dem Bild bei kurzen Motiven. Titel auf 3 Zeilen geklemmt. */
.kk-item-slider-root{ height:404px !important; }
.kk-item-slider-style-wrap{ height:auto !important; }
.kk-item-slider-root .int-nova-article-wrapper.product-wrapper{ height:100% !important; }
.kk-item-slider-root .product-cell{ min-height:404px; height:404px !important; }
.kk-item-slider-root .product-cell .image-link-wrapper{
  height:172px !important; min-height:172px !important; max-height:172px !important; flex:0 0 172px !important;
  display:flex !important; align-items:flex-start !important; justify-content:center !important; background:#fff; overflow:hidden;
}
.kk-item-slider-root .product-cell .image-link-wrapper img{
  height:auto !important; max-height:168px !important; width:auto !important; max-width:100% !important; object-fit:contain !important;
}
.kk-item-slider-root .product-cell__title{
  min-height:3.4em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
/* "Artikel-Details"-Button (per js/kk-slider-enhance.js injiziert; die Plugin-
   Karte hat keinen). Caption fuellt die Restkartenhoehe -> Button per margin-top:
   auto UNTEN angedockt = einheitliche Button-Grundlinie ueber alle Karten.
   Stil = CI-Salbei-Button (#CBD8A6/#333, Versalien-Pille in der Shop-Schrift –
   font-family:inherit, damit er den Schriftwechsel mitmacht) wie der native
   "Artikel-Details"-Button der Theme-Karten -> [siehe button-styles-green]. */
.kk-item-slider-root .product-cell .product-cell__caption{
  display:flex !important; flex-direction:column !important; flex:1 1 auto !important; height:auto !important;
}
/* Preise auf gleicher Grundlinie: der Preis-Block wird per margin-top:auto nach
   UNTEN (knapp ueber den Button) geschoben -> Titel/Sterne/"ab" oben, Preis ueber
   alle Karten auf gleicher Hoehe (unabhaengig von Sternen/"ab"). Der Button haengt
   mit festem Abstand darunter (nicht mehr per auto). */
.kk-item-slider-root .product-cell .product-cell__caption .price_wrapper,
.kk-item-slider-root .product-cell .product-cell__caption .product-cell__price{ margin-top:auto !important; }
.cs-kk-detailbtn{
  margin-top:14px; display:flex; align-items:center; justify-content:center; gap:7px;
  background:#CBD8A6; color:#333 !important; text-decoration:none;
  font-family:inherit; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.37px;
  padding:11px 20px; border-radius:999px; transition:background-color .2s ease;
}
.cs-kk-detailbtn:hover{ background:#bccb90; color:#333 !important; }
/* VOLLE BREITE (alle Screens): der kkDropper-Wrapper reserviert 30px seitliches
   Padding als Pfeil-Gutter -> der Slider ist dadurch schmaler als die nativen
   x-sell-Slider. Padding entfernen -> der Slider spannt exakt so breit wie der
   native "Kunden kauften dazu"-Slider (verifiziert: gleiche linke/rechte Kante).
   Die Spaltenzahl bleibt die des OPC-Drops (hier nicht erzwungen). */
.kk-item-slider-style-wrap{ padding-left:0 !important; padding-right:0 !important; }
/* Ohne Gutter liegen die Pfeile jetzt UEBER dem Bild an den Slider-Raendern
   (wie bei den nativen Slidern) -> leicht eingerueckt, top bereits auf Bildmitte. */
.kk-item-slider-prev{ left:8px !important; right:auto !important; }
.kk-item-slider-next{ right:8px !important; left:auto !important; }
/* MOBIL (<=991px): Pfeile ausblenden – die nativen Theme-Slider zeigen auf Mobil
   ebenfalls KEINE Pfeile (Bedienung per Swipe/Drag, im Plugin aktiv). Am Rand
   lagen die weissen Pfeile sonst ueberm weissen Seitenrand bzw. hinter den
   fixierten Seiten-Widgets -> "verdeckt". */
@media (max-width:991px){
  .kk-item-slider-prev,
  .kk-item-slider-next{ display:none !important; }
}
/* Ueberschrift-Abstand angleichen: der kkDropper-Slider sitzt in einem OPC-Grid
   (.grid-space mit padding:15px oben+unten). Der native x-sell-Slider hat das
   nicht -> dort waeren es +30px Luft zwischen Titel und Karten. Nur im kk-Kontext
   die vertikalen Grid-Paddings kappen, damit der Abstand identisch ist (28px). */
.grid-space._dgs:has(.kk-item-slider-root){ padding-top:0 !important; }
.grid-space._dgs:has(.product-slider__heading){ padding-bottom:0 !important; }
/* Der kkDropper-Slider sitzt im OPC-Grid (Row mit -15px-Margins). Etwas Abstand
   nach unten, damit der Sektionsabstand zum naechsten (nativen x-sell) Slider
   gleich gross ist wie zwischen den nativen Slidern (~42px). */
.grid-system:has(.kk-item-slider-root){ margin-bottom:8px !important; }

/* ==========================================================================
   Native Theme-Produkt-Slider (.product-slider): Preise auf gleicher Hoehe.
   Gilt fuer alle nativen Slider (Warenkorb "Kunden kauften dazu", Detailseiten
   "Aehnliche Artikel"/"Zubehoer" usw.). Der Preis sitzt direkt nach Titel + Sterne;
   variiert also mit Titel-Zeilenzahl, Sterne-Praesenz und dem "ab"-Label.
   NICHT die Gallery (.row.productlist--gallery) – die ist separat getunt.
   Die fruehere 21px-Platzreservierung fuer Karten OHNE "ab"-Label ist seit
   Runde 5 RAUS: das "ab" steht jetzt INLINE in der Preiszeile (Flex-Regel
   im Karten-Block unten), die Zeilenhoehe ist mit und ohne Label gleich -
   die Reservierung wuerde Festpreis-Karten jetzt nach unten schieben. */
.product-slider .product-cell__title,
.product-slider .product-cell__title a{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.product-slider .product-cell__title{ min-height:50px; }
.product-slider .product-cell__rating{ min-height:24px !important; }

/* === Kategorie-Filter-Karten (Variante 1 + Darstellung C) ===================
   Markup baut js/kategorie-filter.js aus der vorhandenen Filter-Sidebar und
   haengt es unter die Produktliste. Nur .cs-catfilter-Klassen -> beruehrt
   weder die Produktkarten noch OPC-Streams. Rueckbau: Block loeschen.
   Farben/Groessen nach CI (corporate-identity-colors / -typografie). */
.cs-catfilter {
  margin: 2.6rem 0 1rem;
}
.cs-catfilter__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2f3e46;
  margin: 0 0 .3rem;
}
.cs-catfilter__lead {
  font-size: 1rem;
  color: #6a7b59;
  margin: 0 0 1.1rem;
}
.cs-catfilter__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
.cs-catfilter__card {
  border: 1px solid #e7ebe0;
  border-radius: 16px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(47, 62, 70, .05);
}
.cs-catfilter__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.cs-catfilter__head b {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2f3e46;
}
.cs-catfilter__ic {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #eef3e3;
  color: #46591f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-catfilter__ic svg { width: 19px; height: 19px; }

/* Mobil-Umschalter: nur unter 768px sichtbar (Regel im Media-Query unten) */
.cs-catfilter__toggle { display: none; }

/* --- Zeile mit Auswahl-Kaestchen (Darstellung C) --- */
.cs-catfilter__items { display: flex; flex-direction: column; gap: 2px; }
.cs-catfilter__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 8px;
  border-radius: 9px;
  font-size: .95rem;
  font-weight: 500;
  color: #2f3e46;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease;
}
.cs-catfilter__row:hover,
.cs-catfilter__row:focus { background: #f3f6ec; color: #46591f; }
.cs-catfilter__row:focus-visible { outline: 2px dashed #8da174; outline-offset: -2px; }
.cs-catfilter__box {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  border: 1.8px solid #cbd3c2;
  border-radius: 5px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.cs-catfilter__box svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 3.4; opacity: 0; }
.cs-catfilter__row:hover .cs-catfilter__box { border-color: #8da174; }
.cs-catfilter__row.is-on { background: #f3f6ec; color: #46591f; font-weight: 600; }
.cs-catfilter__row.is-on .cs-catfilter__box { background: #7a9a4e; border-color: #7a9a4e; }
.cs-catfilter__row.is-on .cs-catfilter__box svg { opacity: 1; }
.cs-catfilter__label { min-width: 0; }
.cs-catfilter__n {
  margin-left: auto;
  padding-left: 8px;
  font-size: .87rem;
  color: #6a7b59;
  font-weight: 500;
}
/* Eintraege jenseits der ersten sechs erst nach Klick auf "Alle … anzeigen" */
.cs-catfilter__row.is-extra { display: none; }
.cs-catfilter__card.is-open .cs-catfilter__row.is-extra { display: flex; }
.cs-catfilter__more {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .87rem;
  font-weight: 600;
  color: #46591f;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cs-catfilter__more:hover { color: #2f3e46; }
.cs-catfilter__reset {
  display: inline-block;
  margin-top: 14px;
  font-size: .9rem;
  font-weight: 600;
  color: #46591f;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tablet: zwei Spalten, Mobil: gestapelt */
@media (max-width: 991.98px) {
  .cs-catfilter__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .cs-catfilter { margin-top: 2rem; }
  .cs-catfilter__grid { grid-template-columns: 1fr; gap: 12px; }
  .cs-catfilter__title { font-size: 1.3rem; margin-bottom: .6rem; }
  .cs-catfilter__card { padding: 16px; }
  /* Tippziele etwas groesser */
  .cs-catfilter__row { padding: 10px 8px; }

  /* KOLLAPS: die Kartenwand braucht auf dem Handy zu viel Platz -> hinter
     einen Umschalter legen. Inhalt bleibt im DOM (nur display), Reset-Link
     steht bewusst AUSSERHALB und bleibt sichtbar. */
  .cs-catfilter__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #dbe6bf;
    border-radius: 12px;
    background: #f3f6ec;
    color: #2f3e46;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .cs-catfilter__toggle-n {
    margin-left: auto;
    font-size: .87rem;
    font-weight: 700;
    color: #fff;
    background: #7a9a4e;
    border-radius: 11px;
    padding: 2px 9px;
  }
  .cs-catfilter__toggle-chev {
    margin-left: auto;
    display: flex;
    color: #46591f;
    transition: transform .2s ease;
  }
  .cs-catfilter__toggle-n + .cs-catfilter__toggle-chev { margin-left: 0; }
  .cs-catfilter__toggle-chev svg { width: 17px; height: 17px; }
  .cs-catfilter.is-expanded .cs-catfilter__toggle-chev { transform: rotate(180deg); }
  .cs-catfilter.is-expanded .cs-catfilter__toggle {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .cs-catfilter__body { display: none; padding-top: 12px; }
  .cs-catfilter.is-expanded .cs-catfilter__body { display: block; }
  .cs-catfilter__lead { font-size: .95rem; margin-bottom: .9rem; }
}

/* === Gefilterte Kategorieseiten: schlanker Kopf ============================
   Auf /Kategorie__Filter wiederholten sich Hero und Beschreibungstext der
   Hauptkategorie - viel Platz ohne neue Information, die Treffer rutschten
   nach unten. js/kategorie-filter.js setzt bei aktivem Filter die Klasse
   .cs-is-filtered auf <html> und baut den kompakten Kopf .cs-fhead.
   SEO unkritisch: JTL kanonisiert diese Seiten ohnehin auf die
   Hauptkategorie (live geprueft). Rueckbau: diesen Block loeschen. */
.cs-is-filtered .cscat-hero,
.cs-is-filtered .cs-cat-hero,
.cs-is-filtered .kk-revealer { display: none !important; }
/* Seit dem Hero-Rueckbau (2026-07-21) steht die Kategorie-Ueberschrift als
   eigener .cs-cathead-Block VOR der Liste und die Wawi-Beschreibung im
   .category-header - beide wiederholen auf Filterseiten nur die Haupt-
   kategorie und standen als zweite Riesen-Ueberschrift unter dem kompakten
   Kopf. Der .cs-fhead traegt hier Kicker + H1, der Rest weicht.
   (.cs-fhead nutzt selbst die Klasse .cs-cathead -> :not ausnehmen.) */
.cs-is-filtered .cs-cathead:not(.cs-fhead),
.cs-is-filtered .category-header { display: none !important; }
/* Das Theme zeigt oben bereits eine eigene Filter-Leiste (.active-filters,
   "besondere Merkmale: X | Alle Filter zuruecksetzen"). Zusammen mit dem
   neuen Kopf waeren es zwei Leisten mit derselben Aussage -> die Theme-
   Variante weicht, unsere sitzt direkt an der Ueberschrift und ist gestylt. */
.cs-is-filtered .active-filters { display: none !important; }

/* Der Kopf nutzt die Klassen des vorhandenen Kategorie-Kopfs V2
   (.cs-cathead: Kicker, H1, Zierstrich) -> Groesse, Zentrierung und Strich
   kommen automatisch aus css/category-hero.css. Hier nur die Ergaenzungen
   darunter: Trefferzeile und Filter-Chips, ebenfalls mittig. */
.cs-fhead { margin-bottom: 26px; }
.cs-fhead .cs-fhead__sub {
  font-size: 1rem;
  color: #6a7b59;
  margin: 10px 0 0;
}
.cs-fhead__chips {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin-top: 12px;
}
/* Chip = aktiver Filter; Klick entfernt ihn (Link kommt aus der Sidebar) */
.cs-fhead__chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: 20px;
  background: #eef3e3;
  border: 1.5px solid #dbe6bf;
  font-size: .9rem; font-weight: 600;
  color: #46591f !important;
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease;
}
.cs-fhead__chip:hover { background: #dbe6bf; border-color: #8da174; }
.cs-fhead__chip svg { width: 13px; height: 13px; opacity: .75; }
.cs-fhead__reset {
  font-size: .9rem; font-weight: 600;
  color: #46591f !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
@media (max-width: 767.98px) {
  .cs-fhead { margin-bottom: 20px; }
  .cs-fhead .cs-fhead__sub { font-size: .95rem; margin-top: 8px; }
}

/* ==========================================================================
   VERTIKALE ABSTAENDE im Kategoriekopf  ("Stufe 2 · straff", 2026-07-21)
   Nutzer: "es ist sehr viel abstand". Gemessen war die Strecke von der gruenen
   Navi bis zur ersten Produktkarte 329px; vier Stellen verursachten das:
     45px   margin-bottom .productlist-heading
     37,5px margin-bottom .category-header
     51px   hr.v-spacing (25px oben + 25px unten fuer eine 1px-Linie)
     25px   padding-top .main-content-wrapper
   Stufe 2 nimmt Luft raus, LAESST ABER ALLES STEHEN (auch die Trennlinie).
   Ergebnis 241px, also 88px kuerzer -> die erste Produktreihe rutscht mit
   Preis und Verfuegbarkeit ins erste Bild.

   ⚠️ SCOPE: Alle Regeln haengen an `:has(.cs-cathead)` bzw. an Klassen, die
   es NUR auf Listenseiten gibt. `.main-content-wrapper` allein waere fatal -
   das Element traegt auf JEDER Seite (Produkt, Warenkorb, Checkout) den
   oberen Abstand. Die Startseite regelt ihr padding-top weiterhin selbst
   ueber `body[data-page="18"]` in global.css.
   Rueckbau: diesen Block loeschen -> Theme-Werte gelten wieder.
   ========================================================================== */
/* padding-top NICHT mehr verkuerzt: Nutzerwunsch 2026-07-24, oben ueberall
   derselbe Abstand wie auf den Content-Seiten (25px aus global.css).
   Die Straffung darunter (Heading-/Header-Margins, hr) bleibt. */
.productlist-heading.cs-cathead { margin: 0 0 16px; }
.category-header { margin-bottom: 14px; }
.main-content:has(.cs-cathead) hr.v-spacing { margin: 12px 0; }

@media (max-width: 991.98px) {   /* mobiler Header -> noch etwas straffer */
  .productlist-heading.cs-cathead { margin: 0 0 12px; }
  .category-header { margin-bottom: 12px; }
  .main-content:has(.cs-cathead) hr.v-spacing { margin: 10px 0; }
}

/* ==========================================================================
   KATEGORIE-KOPF V2 (.cs-cathead: Kicker, H1, Zierstrich)
   2026-07-21 aus css/category-hero.css HIERHER GERETTET: Beim Rueckbau des
   Kategorie-Heros wurde jene Datei entfernt - sie enthielt aber NICHT NUR den
   Hero, sondern auch diesen Kopf. Ohne die Rettung waere die H1 auf die
   Theme-Groesse zurueckgefallen (ab 992px 4rem = 60px) und der Zierstrich
   ganz verschwunden.
   Markup: productlist/category_heading.tpl (Child-Override).
   Selektor bewusst zweistufig (.cs-cathead .productlist-heading__title),
   damit er ohne !important ueber die Theme-Regel gewinnt.
   Groesse gestaffelt (Handy 1.55rem -> Desktop 2.3rem = 34,5px, gleiche
   Groesse wie der Produkttitel, Typo-CI "gleiche Rolle = gleiche Groesse").
   ========================================================================== */
.cs-cathead { padding: 0 0 4px; }

.cs-cathead .productlist-heading__title {
  font-size: 1.55rem;
  line-height: 1.2;
  font-weight: 800;
  color: #2f3e46;
  margin: 0;
}
@media (min-width: 576px) {
  .cs-cathead .productlist-heading__title { font-size: 1.9rem; }
}
@media (min-width: 992px) {
  .cs-cathead .productlist-heading__title { font-size: 2.3rem; }
}

/* Kicker = Elternkategorie, klickbar wenn URL vorhanden (interner Link nach oben) */
.cs-cathead__kicker {
  display: block;
  margin: 0 0 6px;
  font-size: .87rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7a9a4e;
  text-decoration: none !important;
}
a.cs-cathead__kicker:hover { color: #46591f; }
a.cs-cathead__kicker:focus-visible {
  outline: 2px solid #7a9a4e; outline-offset: 3px; border-radius: 4px;
}

.cs-cathead__rule {
  display: block;
  width: 52px; height: 3px;
  margin: 14px auto 0;
  background: #cbd8a6;
  border-radius: 2px;
}

@media (max-width: 575.98px) {
  .cs-cathead__kicker { font-size: .8rem; letter-spacing: .1em; }
  .cs-cathead__rule { width: 42px; margin-top: 11px; }
}

/* ==========================================================================
   KATEGORIE-BESCHREIBUNG aus der Wawi (.category-header) + Weiterlesen-Collapse
   (2026-07-21, v2 THEME-SEITIG). v1 setzte auf ein <details>-Tag IM Wawi-HTML -
   das hat den Weg ins Feld nicht ueberlebt (Editor entfernt unbekannte Tags).
   Jetzt uebernimmt das Theme: Dieses CSS DECKELT die Beschreibung per Default
   (max-height + Ausblend-Verlauf) - dadurch ist der Zustand schon beim ersten
   Paint richtig, nichts springt (Flacker-Regel). js/kategorie-filter.js misst
   danach: kurzer Text -> Klasse csk-open (Deckel weg, kein Knopf); langer
   Text -> Salbei-Knopf "Mehr lesen" wird eingefuegt und schaltet csk-open.
   Bewusster Kompromiss: Besucher GANZ OHNE JS sehen den gedeckelten Text ohne
   Knopf - der Inhalt steht aber vollstaendig im HTML (Suchmaschinen lesen ihn).
   Gilt automatisch fuer JEDE Kategorie-/Merkmalwert-Beschreibung.
   v3 (2026-07-26): Der Knopf steht zugeklappt IN der zweiten Zeile (rechts,
   mit weissem Auslauf) statt in einer eigenen dritten Zeile - Desktop wie
   Mobil bleiben es genau zwei Zeilen. Auf-/Zuklappen laeuft animiert.
   ========================================================================== */
/* KEINE eigene Breitenbegrenzung: der Text laeuft wie frueher im kkDropper-
   Revealer ueber die volle Container-Breite und steht damit buendig unter
   Hero und Produktraster (Nutzer 2026-07-21: "die breite passt noch nicht").
   Der Theme-Cluster zentriert sonst auf Inhaltsbreite -> Einrueckung. */
.category-header__description { max-width: none; width: 100%; }
.category-header__description .item_desc { font-size: .95rem; line-height: 1.7; color: #2f3e46; }
/* h1 = Sicherheitsnetz: header.tpl stuft h1 aus Wawi-Beschreibungen zu h2 herab;
   falls doch eins durchrutscht, darf es nicht mit Theme-Default 2.77rem rendern
   (Befund 2026-07-26: /Burmeier zeigte 41,5px-Riesenzeile in der 2-Zeilen-Klammer) */
.category-header__description .item_desc h1,
.category-header__description .item_desc h2 { font-size: 1.15rem; font-weight: 700; margin: 22px 0 8px; }
.category-header__description .item_desc h3 { font-size: 1rem; font-weight: 700; margin: 16px 0 6px; }
/* Erste Ueberschrift im zugeklappten 2-Zeilen-Zustand nicht nach unten schieben */
.category-header__description .item_desc > :first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   HERSTELLER-/KATEGORIE-BILD im Kopf (z.B. /Burmeier: kkDropper-Logo-Drop
   ODER Theme-Bild aus snippets/image.tpl). Nutzer 2026-07-26: "Logo kleiner
   und alles im CI". Vorher: 140x140 nackt, vertikal mittig neben dem Text.
   Jetzt: 96px in einem Soft-Gruen-Chip (#eef3e3, CI "helle Karten/Chips"),
   oben mit der Ueberschrift ausgerichtet. Gilt fuer alle Hersteller-/
   Merkmal-/Kategorie-Koepfe mit Bild. */
.category-header { align-items: flex-start; }
.category-header .kk-image-banner,
.category-header img.productlist-header-description-image {
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef3e3; border-radius: 14px;
  padding: 16px 18px;
  margin-top: 4px;   /* optisch auf Ueberschrift-Grundlinie */
}
.category-header .kk-image-banner-img,
.category-header img.productlist-header-description-image {
  width: 96px; height: auto;
  box-sizing: content-box;   /* Chip-Padding sitzt beim Theme-Bild direkt am
                                img -> 96px muessen das Logo meinen, nicht
                                Logo+Padding (Bootstrap setzt border-box) */
}
@media (max-width: 767.98px) {
  .category-header .kk-image-banner,
  .category-header img.productlist-header-description-image {
    margin: 0 auto; padding: 12px 14px;
  }
  .category-header .kk-image-banner-img,
  .category-header img.productlist-header-description-image { width: 80px; }
}

/* Deckel (Default-Zustand vor/ohne JS) */
/* GENAU ZWEI ZEILEN im zugeklappten Zustand (Nutzervorgabe 2026-07-21:
   "den text mit einem unauffaelligen collapse auf max 2 zeilen").
   line-clamp statt max-height: bindet die Kante an die ZEILENZAHL, nicht an
   Pixel -> bei jeder Spaltenbreite, Schriftgroesse und auf dem Handy sind es
   exakt zwei Zeilen, nie eine angeschnittene dritte. Der Zustand stimmt schon
   beim ersten Paint (reines CSS), es springt nichts.
   KEIN Ausblend-Verlauf: line-clamp setzt selbst ein Auslassungszeichen,
   ein Fade daneben waere doppelt gemoppelt. */
.category-header__description .item_desc {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.category-header__description .item_desc.csk-open {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
/* Waehrend der Auf-/Zuklapp-Animation steuert JS die max-height direkt.
   Wichtig: hier ist die Klammer AUS und display:block an - sonst laesst sich
   die Hoehe nicht animieren. Diese Regel steht ABSICHTLICH hinter .csk-open,
   damit sie in beide Richtungen gewinnt; sichtbar begrenzt waehrend der
   Animation allein die max-height. Am Ende nimmt das JS .csk-anim wieder weg,
   der Endwert entspricht exakt zwei Zeilen -> kein Nachspringen. */
.category-header__description .item_desc.csk-anim {
  display: block;
  -webkit-line-clamp: none;
  overflow: hidden;
  transition: max-height .38s cubic-bezier(.32,.72,0,1);
}
@media (prefers-reduced-motion: reduce) {
  .category-header__description .item_desc.csk-anim { transition: none; }
}

/* Weiterlesen-Schalter, vom JS eingefuegt.
   BEWUSST ZURUeCKHALTEND (Nutzer 2026-07-21: "der button ist zu auffaellig,
   das war beim drop anders und besser geloest"): Der alte kkDropper-Revealer
   nutzte einen schlichten, ZENTRIERTEN Textlink mit Chevron davor und ohne
   jeden Hintergrund (.kk-revealer-btn: nur cursor+margin). Genau das hier
   nachgebildet, nur in CI-Dunkelgruen und mit CSS-Chevron statt Icon-Font.
   Die Salbei-Pille bleibt der PRIMAeR-Aktion vorbehalten. */
.csk-toggle {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 12px auto 4px;
  background: none; border: 0; padding: 4px 8px;
  font-family: inherit; font-size: .9rem; font-weight: 600;
  color: #46591f; cursor: pointer;
  transition: color .15s ease;
}
.csk-toggle:hover { color: #7a9a4e; }
.csk-toggle::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s cubic-bezier(.32,.72,0,1);
}
.csk-toggle[aria-expanded="true"]::before { transform: rotate(-135deg) translate(-1px, -1px); }

/* ZUGEKLAPPT: "weiterlesen" sitzt AM ENDE DER ZWEITEN ZEILE, nicht in einer
   dritten (Nutzer 2026-07-26: "keine neue zusaetzliche Zeile ... Platzgewinn").
   Umsetzung: der Knopf wird aus dem Fluss genommen und unten rechts auf den
   Textdeckel gelegt; ein weisser Verlauf laesst den Text darunter sauber
   auslaufen (und verdeckt das Auslassungszeichen der Klammer).
   Schriftgroesse und Zeilenhoehe sind BEWUSST identisch zum Beschreibungstext
   - so sitzen beide Grundlinien exakt auf einer Linie. Gilt auch mobil, dort
   ist der Verlauf nur schmaler. */
.category-header__description { position: relative; }
.category-header__description .item_desc:not(.csk-open) + .csk-toggle {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  margin: 0; padding: 0 0 0 62px;
  line-height: 1.7;   /* gleiche Zeilenhoehe wie der Text (.9rem x 1.7) ->
                         der Knopf sitzt exakt auf der zweiten Zeile */
  background: linear-gradient(to right, rgba(255,255,255,0) 0, #fff 46px);
}
@media (max-width: 575.98px) {
  .category-header__description .item_desc:not(.csk-open) + .csk-toggle {
    padding-left: 44px;
    background: linear-gradient(to right, rgba(255,255,255,0) 0, #fff 30px);
  }
}

/* Sanfter Wechsel, wenn der Knopf seinen Platz tauscht (Zeilenende <-> unter
   dem Text). Ohne das wuerde er hart umspringen. */
@keyframes cskToggleIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
.csk-toggle.csk-swap { animation: cskToggleIn .3s cubic-bezier(.32,.72,0,1) both; }
@media (prefers-reduced-motion: reduce) {
  .csk-toggle.csk-swap { animation: none; }
}

/* ==========================================================================
   TOUCH: Hover-Effekte auf Kacheln abschalten (2026-07-26)
   Safari (iPadOS) wertet den ERSTEN Tipp nur als Hover, wenn sich dabei am
   Inhalt etwas aendert -> das Produkt oeffnete erst beim zweiten Tipp.
   Ausloeser auf den Kacheln: das Theme blendet per :hover das zweite
   Produktbild ein, und unsere Karte hebt sich per transform an.

   ZWEI Ausloeser fuer die Abschaltung, das ist wichtig:
   (a) @media (hover: none)  -> iPad/iPhone ohne Zeigergeraet
   (b) html.cs-touch         -> setzt js/kachel-tap.js beim ersten echten
       Fingertipp. Noetig, weil ein iPad MIT Tastatur/Maus/Trackpad
       `hover: hover` meldet und die Media-Query dort NICHT greift -
       getippt wird trotzdem mit dem Finger.
   Desktop-Optik bleibt unveraendert.
   ========================================================================== */
@media (hover: none) {
  .image-wrapper--switch-image:hover .second-image { opacity: 0 !important; }
  .product-cell:hover .product-cell__wrapper {
    transform: none;
    box-shadow: 0 6px 16px rgba(47,62,70,.08);
    border-color: #EDE4D3;
  }
  .cs-subcat:hover,
  .cs-subcat:hover .cs-subcat__arw,
  .subcategory-card:hover { transform: none; }
}
html.cs-touch .image-wrapper--switch-image:hover .second-image { opacity: 0 !important; }
html.cs-touch .product-cell:hover .product-cell__wrapper {
  transform: none;
  box-shadow: 0 6px 16px rgba(47,62,70,.08);
  border-color: #EDE4D3;
}
html.cs-touch .product-cell:hover .product-cell__actions { opacity: 1; }
html.cs-touch .cs-subcat:hover,
html.cs-touch .cs-subcat:hover .cs-subcat__arw,
html.cs-touch .subcategory-card:hover { transform: none; }

/* ==========================================================================
   KATEGORIE-KARTE "PREISFELD" (Variante B, 2026-07-26)
   Entwurf: entwuerfe/kategorie-karte-runde2.html (Vorschlag B).
   Aufgeraeumte Karte (linke Kante, Marke, EINE Statuszeile, Punkte statt
   Pfeile) + Preisfeld, das alles zum Geld einsammelt: UVP, Ersparnis,
   Betrag, MwSt., Versandkosten.

   SCOPE (erweitert 2026-07-26, "Runde 5"): Der Karten-Stil gilt jetzt fuer
   ALLE Produktkarten. Gemeinsamer Praefix ist
   :is(.row.productlist--gallery, .product-slider, .opc-ProductStream).
   ⚠️ .product-slider, NICHT .product-wrapper.slider: die .slider-Klasse am
   Wrapper gibt es nur im Startseiten-Highlights-Slider; die x-sell-Slider
   der Produktseiten haben nur ".product-wrapper" (live verifiziert
   2026-07-26). .product-slider umfasst AUCH den kkDropper-Slider (dessen
   Track traegt die Klasse selbst) - dort laufen die Regeln mangels
   cs-pricebox/delivery-status/btn-primary ins Leere (live geprueft),
   nur der Marken-Platzhalter braucht eine explizite kk-Ausnahme (unten),
   weil die kk-Kartenhoehe hart auf 404px steht (Block weiter oben).
   Markup dazu: productlist/item_box.tpl (Bloecke item-box-brand,
   item-box-uvp, item-box-pricenote, item-box-to-article-link).
   Rueckbau: diesen Block loeschen + die vier Bloecke im Template.
   ========================================================================== */

/* --- 1) Linke Kante im Kategorie-Raster -----------------------------------
   Das Theme zentriert per Einstellung (productCellTextAlignment). Die
   Vorteilsliste stand aber schon immer links -> zwei Ausrichtungen in einer
   Karte. Mobil war das bereits gerichtet, hier gilt es fuer alle Breiten.
   ⚠️ !important ist hier PFLICHT: die Caption traegt die Bootstrap-Utility
   .text-center, und die setzt text-align:center!important — ohne eigenes
   !important blieb Marke/Titel/Bewertung live zentriert (Bug 2026-07-26,
   der Mobil-Block weiter oben hatte es von Anfang an richtig). */
.product-cell .product-cell__body,
.product-cell .product-cell__body--center,
.product-cell .product-cell__caption,
.product-cell .product-cell__caption.text-center,
.product-cell .product-cell__delivery-status,
.product-cell .product-cell__delivery-status.text-center,
.product-cell .estimated_delivery.text-center,
.product-cell .product-cell__rating { text-align: left !important; }

/* --- 2) Marke ueber dem Namen --------------------------------------------
   Gruen-Grau statt Akzent-Gruen: #8da174 kaeme auf Weiss nur auf 2,5:1 und
   ist fuer 13px Text zu blass (Farb-CI, Kontrastnotiz). */
.product-cell__brand {
  font-size: .9rem;   /* Typo-CI: Rolle "Sekundaer" = Artikelnr./Hersteller */
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6a7b59;
  line-height: 1.2;
  margin: 0 0 3px;
  /* Lange Herstellernamen (z.B. mit Rechtsform) laufen nicht um, sondern
     enden mit "..." — sonst schiebt eine 2. Marken-Zeile die ganze Karte. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Artikel OHNE Hersteller: Platz der Marken-Zeile reservieren, sonst rutschen
   Titel/Sterne/Preis gegenueber den Nachbarkarten eine Zeile nach oben.
   19px = .87rem*1.2 Zeilenhoehe + 3px margin. NICHT im kkDropper-Slider -
   dessen Kartenhoehe steht hart auf 404px, zusaetzliche Hoehe wuerde clippen. */
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .product-cell__caption:not(:has(.product-cell__brand)) .product-cell__title-wrapper {
  padding-top: 19px;
}
/* kk-Ausnahme: die Plugin-Karten haben NIE eine Marken-Zeile -> die 19px
   traefen dort jede Karte und wuerden bei der harten 404px-Hoehe clippen. */
.kk-item-slider-root .product-cell .product-cell__caption:not(:has(.product-cell__brand)) .product-cell__title-wrapper {
  padding-top: 0 !important;
}

/* --- 3) Preisblock --------------------------------------------------------
   Runde 4 (2026-07-26, finale Entscheidung "Vorschlag 1"): GANZ OHNE FELD.
   Das Soft-Gruen-Feld mit gruenem Rand um den Preis war zu dominant; der
   Preis steht jetzt frei und ist dafuer eine Stufe groesser (1.6rem, Regel
   unten). .cs-pricebox bleibt als Gruppierungs-Container im Template
   (UVP-Zeile + Preis + MwSt./Versand-Notiz zusammen).
   Rueckweg, falls doch wieder Flaeche gewuenscht (der zwischenzeitlich
   erwogene "Vorschlag 2"): background:#f3f6ec; border-radius:10px;
   padding:9px 11px; + Guard .cs-pricebox:not(:has(.price)){background:none;
   padding:0;} gegen die leere Flaeche ohne Preisrecht. */
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .cs-pricebox {
  margin-top: 6px;
}
.cs-pricebox__uvp { font-size: .87rem; color: #6a7b59; line-height: 1.4; }
.cs-pricebox__uvp del { text-decoration-thickness: 1.5px; }
.cs-pricebox__save {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  /* Leisten-Gruen + Dunkelgruen statt Kraeftig-Gruen/Weiss: #7a9a4e traegt
     laut Farb-CI nur ~3,2:1 - fuer 12px-Text zu wenig (AA nur fette/GROSSE
     Schrift). #dbe6bf/#46591f liegt bei ~5,8:1 und ist zugleich leiser. */
  background: #dbe6bf;
  color: #46591f;
  font-size: .8rem;      /* Micro = Pille in Versalienhoehe, Typo-CI */
  font-weight: 700;
  white-space: nowrap;
}
/* "ab" NEBEN den Preis (bisher als eigene Zeile darueber) */
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .cs-pricebox .price_wrapper {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 7px;
  margin: 1px 0 0;
}
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .cs-pricebox .price_label.pricestarting,
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .cs-pricebox .price_label.nowonly {
  display: inline; font-size: .87rem; margin: 0;
}
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .cs-pricebox .price {
  /* 1.6rem statt 1.5rem: ohne Feld-Hintergrund traegt die Zahl die
     Hierarchie allein (bewusste Ausnahme oberhalb der Typo-Skala,
     im Entwurf kategorie-karte-preisfeld-rahmen.html so abgenommen). */
  font-size: 1.6rem; font-weight: 800; line-height: 1.15;
}
/* Die Preisnotiz des Themes (Grundpreis / "statt"-Preis / Rabatt) liegt IM
   price_wrapper -> im Flex-Kontext braucht sie eine eigene Zeile. */
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .cs-pricebox .price-note {
  flex: 0 0 100%;
  margin: 2px 0 0;
  font-size: .87rem;
  color: #6a7b59;
}
/* Bootstrap rechnet small mit .875em vom Elternwert -> sonst 11,5px
   (Typo-CI: kein Lesetext unter 13px). */
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .cs-pricebox .price-note small { font-size: 1em; }
.cs-pricebox__note { font-size: .87rem; color: #6a7b59; margin-top: 3px; line-height: 1.4; }

/* --- 4) EINE Statuszeile statt drei Info-Zeilen ---------------------------
   Verfuegbarkeit + Lieferzeit nebeneinander, davor ein Punkt in der Farbe
   der Lagerampel (nStatus: 0 nicht verfuegbar, 1 knapp, 2 verfuegbar). */
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .product-cell__delivery-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 7px;
  margin-top: 9px;
  font-size: .87rem;
  color: #6a7b59;
}
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .product-cell__delivery-status small { font-size: 1em; }
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .product-cell__delivery-status .signal_image {
  display: inline-flex; align-items: center; gap: 7px;
}
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .product-cell__delivery-status .signal_image::before {
  content: ""; flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: #c3c9c0;
}
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .product-cell__delivery-status .signal_image.status-2::before { background: #7a9a4e; }
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .product-cell__delivery-status .signal_image.status-1::before { background: #e8a200; }
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .product-cell__delivery-status .signal_image.status-2 small {
  color: #7a9a4e; font-weight: 600;
}
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .product-cell__delivery-status .estimated_delivery::before {
  content: "·"; margin-right: 7px; color: #c3c9c0;
}
/* Ohne Ampel davor (Lageranzeige "nichts" / unverkaeuflich) kein verwaister
   Trennpunkt am Zeilenanfang. */
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .product-cell__delivery-status .estimated_delivery:first-child::before {
  content: none;
}

/* --- 5) Vorteilspunkte: Punkt statt Pfeil --------------------------------
   Ruhiger im Raster, weil der Pfeil optisch mit dem Button konkurrierte.
   Zurueck zu Pfeilen: diese eine Regel loeschen (die Pfeil-Regel weiter oben
   greift dann wieder). */
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .product-cell__shortdescription li::before {
  background: #8da174;
  width: 6px; height: 6px;
  border-radius: 50%;
  top: .5em;
}

/* --- 6) Buttons: EIN Stil fuer alle (Runde 3, Vorschlag A, 2026-07-26) ----
   Nutzer: 20 kraeftig gruene Balken im Raster zu dominant. Alle Karten-
   Buttons tragen jetzt den Salbei-Standard (btn-outline-secondary-Regeln
   weiter oben, inkl. Wander-Pfeil); .cs-btn-konfig bleibt als Marker im
   Template (liefert den Text "Jetzt konfigurieren"), aber ohne Sonderfarbe.
   Auch "In den Warenkorb" wird IN DEN KARTEN Salbei - Kraeftig-Gruen
   bleibt der Produktseite vorbehalten (Farb-CI: die EINE wichtigste
   Kauf-Aktion pro Seite). Seit Runde 5 gilt das auch in den Slidern
   (einheitlicher Karten-Stil ueberall). */
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .product-cell__add-to-basket-button.btn-primary {
  background: #CBD8A6; border-color: #CBD8A6; color: #333;
}
:is(.row.productlist--gallery, .product-slider, .opc-ProductStream) .product-cell__add-to-basket-button.btn-primary:hover {
  background: #BCCB92; border-color: #BCCB92; color: #2f3e46;
  box-shadow: 0 5px 14px rgba(122,154,78,.30);
}

/* --- 7) kkDropper-Slider: Preis wieder unten andocken ---------------------
   Dort schiebt margin-top:auto den Preisblock nach unten. Der sitzt jetzt im
   Preisfeld, also muss das Feld selbst geschoben werden. */
.kk-item-slider-root .product-cell .product-cell__caption .cs-pricebox { margin-top: auto !important; }

/* --- 7b) Native Slider: Phantom-Luft raus (Diagnose 2026-07-26) -----------
   Der Slick-Track ist ein Flex-Container -> ALLE Slides strecken sich auf
   den hoechsten. Der hoechste war aber nie sichtbar: noch nicht gescrollte
   Lazy-Slides tragen ein 1x1-Platzhalterbild, das quadratisch auf volle
   Kartenbreite (~275px statt 172px) aufgeht, und Direktkauf-Karten stapeln
   Menge + Warenkorb (~114px statt 57px Button). Ergebnis: Track 650px,
   sichtbare Karten ~480px Inhalt -> ~170px Leerraum ueber dem unten
   angedockten Button ("so viel Luft").
   Fix 1: Bildbuehne im Slider aufs Standard-Seitenverhaeltnis zwingen
   (Produktbild-Standard 1600x1000 = 1,6:1) - gilt auch fuer den 1x1-
   Platzhalter, der damit dieselbe Hoehe bekommt wie das echte Bild.
   Fix 2: Menge + Warenkorb in EINE Zeile (Menge schmal, Button fuellt).
   Scope .product-slider (siehe SCOPE-Notiz oben), :not(.kk-slider-item)
   schuetzt die kk-Karten - deren Bildbuehne ist separat hart getunt
   (172px-Block weiter oben) und vertraegt kein aspect-ratio. */
.product-slider .product-wrapper:not(.kk-slider-item) .image-link-wrapper img {
  aspect-ratio: 1.6 / 1;
  width: 100%; height: auto;
  object-fit: contain;
}
.product-slider .product-wrapper:not(.kk-slider-item) .quantity-wrapper {
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
}
.product-slider .product-wrapper:not(.kk-slider-item) .quantity-wrapper .form-group {
  flex: 0 0 auto;
  width: 92px;
  margin: 0;
}
.product-slider .product-wrapper:not(.kk-slider-item) .quantity-wrapper .add-to-basket { flex: 1 1 auto; }

/* --- 8) Mobil (zweispaltig) ---------------------------------------------- */
@media (max-width: 767px) {
  /* kein Feld mehr (Vorschlag 1) -> nur noch Abstand */
  .row.productlist--gallery .cs-pricebox { margin-top: 3px; }
  .row.productlist--gallery .cs-pricebox .price { font-size: 1.15rem; }
  .row.productlist--gallery .cs-pricebox .price_wrapper { gap: 0 5px; }
  .cs-pricebox__save { margin-left: 0; padding: 1px 8px; }
  /* Auf ~170px Breite bricht "UVP … − 300 €" sonst ungleichmaessig um */
  .cs-pricebox__uvp { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; }
  /* .87rem statt .8rem: 12px ist laut Typo-CI nur fuer Badges/Pillen,
     die Marke ist ein Textlabel. */
  .product-cell__brand { font-size: .87rem; letter-spacing: .04em; }
  .row.productlist--gallery .product-cell__delivery-status { margin-top: 7px; }
}