/* ============================================================
   PAKET 2 — KATEGORIESEITE (04.09.2026)
   Produktliste auf Kategorie-, Such- und Herstellerseiten.
   Geprueft im Workflow 03.09. (9 Kategorietypen, 4 Recherchen,
   10 Kundentypen, 3 Kritiker) — Endplan in
   carfoil.ch Shop/analyse/2026-09-03_kategorieseite-paket2-plan.md.
   Alles unterhalb dieser Zeile gehoert zum Paket und kann als
   Block entfernt werden, um zurueckzurollen.

   SCHALTER: jede Regel steht unter html.cf-k2. Die Klasse setzt das
   Modul cfmuster (Hook displayHeader) VOR dem ersten Malen — in der
   Vorschau nur mit ?k2=1, nach der Freigabe immer. Ohne die Klasse
   ist dieser Block wirkungslos (Live-Look bleibt bis zur Freigabe).
   Der Hook laeuft NUR auf category, search und manufacturer — darum
   braucht es hier keine zusaetzliche body.page-*-Kette. Wo eine steht
   (body.page-category), ist sie Absicht: die Regel gilt nur dort.

   WERTE (Brand Guidelines v2, wie Paket 1 / Folienfinder):
     Bedienflaeche  #333e4d   Hover #26303c
     Text           #1a1a1a   Text-Grau #5f6773 (4,8:1 auf Weiss)
     Rahmen         #c9cdd2 (Bedienelemente) / #e0e0e0 (Karten)
     Grund #f6f6f6  Karten #fff  Flaeche aktiv #eef1f4
     Gruen NUR fuer "Ab Lager": #15803d
     Radien 12 (Karten) / 8 (Knoepfe, Felder) / 6 (Etiketten)
     Abstaende 8 / 12 / 16 / 24, Handy-Raster 10
   Gold ist kein Bedienelement (2,6:1 auf Weiss).

   MARKUP-VERTRAG mit dem Modul cfmuster 1.8.0 (serverseitig):
     .cfm-chips > a.cfm-chip[aria-current=page]   Marken-/Serien-Chips
     .cfm-kat  .cfm-kat-frage  .cfm-kat-btn  .cfm-kat-sub   Finder-Band
     .cfm-zeile > .cfm-mwst + a.cfm-alle              MwSt / "Alle N anzeigen"
     .cfm-suche                                       Suchbegriff-Zeile (Suchseite)
     je Kachel im Preisblock: span.cf-k2-daten[hidden][data-name|data-ref|
       data-lager|data-einheit|data-grund], span.cf-k2-lager,
       span.cf-k2-ref, span.cf-k2-einheit
   Was das JS (custom.js, gleicher Blockname) dazu tut: Titel aus
   data-name in Kopf/Name teilen, Sortierzeile beschriften, Kategorietext
   zum Aufklapper machen, Handy-Leiste. Alles Weitere ist reines CSS.
   ============================================================ */

/* --- Sichtbarkeit der Modul-Ergaenzungen ohne Schalter -------------
   Das Modul gibt Chips, Unterzeile, MwSt-Zeile und Kachel-Spans immer
   aus; sichtbar werden sie erst mit html.cf-k2. So kann das Modul vor
   der Freigabe live gehen, ohne dass sich die Seite aendert. */
.cfm-chips, .cfm-kat-sub, .cfm-zeile, .cfm-suche,
.cf-k2-lager, .cf-k2-ref, .cf-k2-einheit, .cf-k2-leiste,
.cf-k2-ab, .cf-k2-abwert, .cf-k2-staffel, .cf-k2-tun { display: none; }

/* --- K2: Layout — linke Spalte weg, Raster 4 / 3 / 2 --------------
   Die Spalte enthaelt seit dem Aus der Facettensuche nur den Baum,
   der auf sechs von neun Seiten nur den eigenen Namen zeigt (Bestand
   03.09.). Vorschau per CSS; bei der Freigabe stellt Simon das Layout
   im Backoffice auf layout-full-width, dann ist #left-column weg und
   diese zwei Regeln laufen leer. */
html.cf-k2 #left-column { display: none; }
html.cf-k2 #content-wrapper {
  flex: 0 0 100%; max-width: 100%; width: 100%;
}

/* Raster statt Bootstrap-Spalten: gleich hohe Karten, feste Luecken.
   .products ist die Bootstrap-.row (Flex mit -15px Rand), die Kinder
   tragen col-xs-12 col-sm-6 col-xl-4 (Kategorie) bzw. col-xl-3 (Suche)
   — beide werden hier neutralisiert, die Spaltenzahl kommt vom Raster. */
html.cf-k2 #products .products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  justify-content: stretch;
}
html.cf-k2 #products .products > .js-product {
  display: flex;
  flex: none;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
  margin: 0;
}
/* Der "Weitere"/"Zum Seitenanfang"-Block und Fehlermeldungen liegen im
   selben Container — ueber alle Spalten. */
html.cf-k2 #products .products > :not(.js-product) {
  grid-column: 1 / -1;
}
@media (max-width: 1199px) {
  html.cf-k2 #products .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  html.cf-k2 #products .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* --- K6: Kachel als Karte, ganze Flaeche klickbar -----------------
   Theme-Positionierungen auf static, sonst endet der gestreckte Link
   am Bild (Technik-Kritik). Die Karte ist eine Flex-Spalte, der
   Preisblock sitzt unten — gleich hohe Karten ohne Springen. */
html.cf-k2 article.product-miniature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* theme.css zentriert senkrecht (justify-content:center) */
  align-items: stretch;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
html.cf-k2 article.product-miniature:hover,
html.cf-k2 article.product-miniature:focus-within {
  border-color: #c9cdd2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 10px 24px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}
html.cf-k2 .product-miniature .thumbnail-container {
  position: static;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin: 0;
  overflow: visible;
  background: #fff;
}
html.cf-k2 .product-miniature .thumbnail-top {
  position: static;
  overflow: hidden;
}
html.cf-k2 .product-miniature .product-thumbnail {
  position: static;
  display: block;
  height: auto;
}
/* Bildregel Farbfeld (Autofolien, Beschriftung, Lackschutz, Scheinwerfer,
   Suche): randlos, quadratisch, fuellt die Kartenbreite. */
html.cf-k2 .product-miniature .product-thumbnail img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #f6f6f6;
}
/* Bildregel Produktfoto (Werkzeug 8/17/18, Chemie 120, Designed by
   CARFOIL 118/119): Foto auf Weiss mit Innenabstand, nicht beschnitten. */
html.cf-k2 body:is(.category-id-8, .category-id-17, .category-id-18, .category-id-120, .category-id-118, .category-id-119, .category-id-parent-8, .category-id-parent-118) .product-miniature .product-thumbnail img {
  padding: 10px;
  object-fit: contain;
  background: #fff;
}
/* Bildregel Rolle (Scheibentoenung 5, Gebaeude 6 und ihre Kinder): 79
   identische Rollenfotos mit Logoband — 4:3 gedeckelt, Logoband oben
   abgeschnitten, damit keine Streifenwand entsteht (Design-Kritik). */
html.cf-k2 body:is(.category-id-5, .category-id-6, .category-id-parent-5, .category-id-parent-6) .product-miniature .product-thumbnail img {
  /* Gemessen am Rollenbild: die Rolle endet bei 60 % der Hoehe, darunter
     kommen ARMOLAN-Logo und "Automotive". Ein 4:3-Fenster ist 75 % hoch und
     zeigt das Logo zwangslaeufig mit — 5:3 von oben schneidet es weg und
     laesst die Rolle ganz. */
  aspect-ratio: 5 / 3;
  object-fit: cover;
  object-position: center top;
}
html.cf-k2 .product-miniature .product-description {
  position: static;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: auto;
  padding: 12px 14px 14px;
  text-align: left;
  background: #fff;
}
html.cf-k2 .product-miniature .product-description::after { display: none; }

/* --- K7: Titel — drei Zeilen, Code und Name gleich stark ----------
   Das Theme kuerzt serverseitig auf 30 Zeichen (60 von 60 Titel auf
   Autofolien). custom.js setzt den vollen Namen aus data-name ein:
   Kopf "3M 2080-M12 · 152 cm breit" (Schieferblau, 12,5 px) und
   Name "Matte Black" (14 px, dunkel, hoechstens zwei Zeilen). Die Hoehe
   ist reserviert, damit beim Einsetzen nichts springt (CLS). */
html.cf-k2 .product-miniature .product-title {
  flex: 1 1 auto;
  margin: 0 0 8px;
  /* Grundreserve: zwei Namenszeilen. Werkzeug, Chemie, Eigenmarke und die
     Suche haben weder Kopf noch Meta — dort riss die volle Reserve ein leeres
     Band von bis zu 66 px in jede Kachel. */
  min-height: calc(14px * 1.35 * 2);
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  text-transform: none;
}
html.cf-k2 .product-miniature .product-title a {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: left;
  text-decoration: none;
}
/* Gestreckter Link: die ganze Karte fuehrt zur Folie. Bezug ist die
   Karte (position: relative oben), Herz und Quickview sind aus (K9). */
html.cf-k2 .product-miniature .product-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Auf den sechs Folien-Familien kommen Kopf und Meta dazu. Erkennungsmerkmal
   ist das Finder-Band des Moduls: es steht serverseitig im Dokument, die
   Reserve gilt also vor dem ersten Malen — kein Sprung. */
html.cf-k2 body:has(.cfm-kat) .product-miniature .product-title {
  /* Feste Hoehe, nicht nur Mindesthoehe: der Aufbau ist hier bekannt (Kopf
     eine Zeile, Name hoechstens zwei, Meta eine, alle geklemmt). So fluchten
     die Preise einer Reihe auch dann, wenn eine Kachel keinen Kopf hat. */
  flex: 0 0 auto;
  height: calc(12.5px * 1.35 + 4px + 14px * 1.35 * 2 + 2px + 12px * 1.35);
  min-height: 0;
  overflow: hidden;
}
/* Der Preis folgt direkt auf den festen Titelkasten und sitzt damit in jeder
   Karte auf derselben Linie — auch wenn darunter unterschiedlich viel steht
   (Streichpreis, Rabatt-Abzeichen, "Ab Lager", Artikelnummer). Der Rest der
   Karte bleibt Luft; die Karten sind durch das Raster ohnehin gleich hoch. */

html.cf-k2 .cf-k2-kopf {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;      /* eine Zeile — die Hoehe ist unten reserviert */
  overflow: hidden;
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #333e4d;
  letter-spacing: .01em;
}
html.cf-k2 .cf-k2-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #1a1a1a;
  word-break: break-word;
}
html.cf-k2 .cf-k2-meta {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: #5f6773;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- K8: Preis mit Einheit, Rabatt-Optik --------------------------
   Einheit gleich dunkel wie der Preis, auf derselben Zeile:
   "60,95 CHF pro Meter". Streichpreis und Abzeichen darunter. Keine
   Rechnung im Browser — alle Werte kommen vom Shop bzw. vom Modul. */
html.cf-k2 .product-miniature .product-price-and-shipping {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  padding-top: 6px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: left;
}
html.cf-k2 .product-miniature .price {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}
html.cf-k2 .product-miniature .cf-k2-einheit {
  display: inline;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
}
html.cf-k2 .product-miniature .regular-price {
  display: inline-block;
  flex: 0 0 100%;
  order: 3;
  font-size: 12.5px;
  font-weight: 500;
  color: #5f6773;
  text-decoration: line-through;
}
html.cf-k2 .product-miniature .discount-product {
  display: inline-block;
  order: 4;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #333e4d;
  border-radius: 6px;
}
/* Zusatzzeilen aus dem Modul: "Ab Lager" (das einzige Gruen der Seite)
   und die Artikelnummer klein und grau. Verstecktes Datenspan bleibt aus. */
html.cf-k2 .product-miniature .cf-k2-daten { display: none; }
html.cf-k2 .product-miniature .cf-k2-lager {
  display: inline-flex;
  flex: 0 0 100%;
  order: 5;
  align-items: center;
  gap: 5px;
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #15803d;
}
html.cf-k2 .product-miniature .cf-k2-lager::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #15803d;
}
/* --- K21: «ab», Mengenstaffel, Handlungszeichen (1.8.4) -------------
   «ab» steht dort, wo der Endpreis an einer Auswahl haengt, also auf jeder
   Folie: der Kunde entscheidet die Laufmeter. Die Staffelzeile nennt Menge
   und Stueckpreis im Klartext, damit man den Vorteil sieht, ohne zu rechnen.
   Beide Zahlen kommen vom Shop. */
html.cf-k2 .product-miniature .cf-k2-ab {
  display: inline;
  order: 0;
  margin-right: 3px;
  font-size: 13px;
  font-weight: 500;
  color: #5f6773;
}
html.cf-k2 .product-miniature .cf-k2-staffel {
  display: block;
  flex: 0 0 100%;
  order: 7;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #333e4d;
}
/* Ein Zeichen an derselben Stelle in jeder Kachel, rechts auf der Preiszeile.
   Warenkorb, wo es ohne Auswahl geht, sonst Ansehen. Liegt ueber der
   gestreckten Klickflaeche der Karte (z-index 1), sonst faengt die Karte
   den Klick ab und legt nichts in den Warenkorb. */
html.cf-k2 .product-miniature .cf-k2-tun {
  display: inline-flex;
  position: relative;
  z-index: 2;
  order: 1;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: auto;
  border: 1px solid #d5d9de;
  border-radius: 9px;
  background: #fff;
  color: #333e4d;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
html.cf-k2 .product-miniature .cf-k2-tun .material-icons { font-size: 20px; line-height: 1; }
html.cf-k2 .product-miniature .cf-k2-tun:hover,
html.cf-k2 .product-miniature .cf-k2-tun:focus-visible {
  border-color: #1d93ab;
  background: #1d93ab;
  color: #fff;
}
html.cf-k2 .product-miniature .cf-k2-tun:focus-visible { outline: 2px solid #1d93ab; outline-offset: 2px; }
/* Waehrend das Ajax laeuft, und danach kurz die Bestaetigung. */
/* Waehrend das Ajax laeuft: gedaempft, aber NICHT pointer-events:none — sonst
   faellt der zweite Klick durch das Zeichen hindurch auf die gestreckte
   Klickflaeche der Karte, und der Kunde landet auf der Produktseite, statt dass
   nichts passiert. Der Klick wird stattdessen im Skript verworfen. */
html.cf-k2 .product-miniature .cf-k2-tun[aria-busy="true"] { opacity: .55; cursor: default; }
html.cf-k2 .product-miniature .cf-k2-tun.cf-k2-tun-fertig {
  border-color: #15803d;
  background: #15803d;
  color: #fff;
}
html.cf-k2 .product-miniature .cf-k2-tun.cf-k2-tun-fehler {
  border-color: #b91c1c;
  color: #b91c1c;
}
html.cf-k2 .product-miniature .cf-k2-ref {
  display: block;
  flex: 0 0 100%;
  order: 6;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: #5f6773;
}

/* --- K9: Flags, Herz, Sterne, Quickview ---------------------------
   Etikett "Auf Anfrage" als ruhiges weisses Schild mit dunkler Schrift
   (Profi: das ist die Warnung, also lesbar, nicht grau). Rabatt in
   Schieferblau. Herz und Vorschau weg (Entscheid E5), leere Sterne weg. */
html.cf-k2 .product-miniature .product-flags {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: auto;
  max-width: calc(100% - 20px);
  pointer-events: none;
}
html.cf-k2 .product-miniature .product-flags li.product-flag {
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  padding: 3px 9px;
  margin: 0;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #333e4d;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #c9cdd2;
  border-radius: 6px;
  pointer-events: none;   /* reine Information — sonst tote Zone auf der Karte */
}
/* Der Rabatt steht schon als Abzeichen beim Streichpreis, wo er hingehoert.
   Ein zweites Etikett ueber dem Bild sagt dasselbe zweimal. */
html.cf-k2 .product-miniature .product-flags li.product-flag:is(.discount, .discount-amount, .discount-percentage, .on-sale) {
  display: none;
}
html.cf-k2 .product-miniature .product-flags li.product-flag.new {
  width: auto;
  color: #fff;
  text-align: left;
  background: #333e4d;
  border-color: #333e4d;
  order: 0;
}
html.cf-k2 .product-miniature .product-flags li.product-flag.online-only { position: static; }
html.cf-k2 .product-miniature .highlighted-informations,
html.cf-k2 .product-miniature .product-list-reviews,
html.cf-k2 .product-miniature .wishlist-button-add,
html.cf-k2 .product-miniature .wishlist-button,
html.cf-k2 .product-miniature .quick-view {
  display: none !important;
}
/* Varianten-Farbpunkte unter dem Bild (variant-links) sind auf den
   Folienlisten nicht belegt; falls doch, unauffaellig. */
html.cf-k2 .product-miniature .variant-links {
  position: static;
  min-height: 0;
  padding: 6px 14px 0;
  text-align: left;
}

/* --- K3: Kopfbereich und Kategorietext ----------------------------
   Keine weisse Kopfkarte mehr: Titel, Teaser, Chips, Band, Liste — in
   dieser Reihenfolge. Der lange Text wandert im Backoffice ins Feld
   "Zusaetzliche Beschreibung" (E7) und wird unten aufklappbar; bis
   dahin macht custom.js aus dem Rest des Textes denselben Aufklapper.
   Ueberschriften im Text dunkel (Schieferblau ist Bedienfarbe). */
html.cf-k2 body.page-category .block-category {
  min-height: 0;
  padding: 0;
  margin: 0 0 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
html.cf-k2 #js-product-list-header h1,
html.cf-k2 h1#js-product-list-header,
html.cf-k2 #product-list-header h1,
html.cf-k2 h1#product-list-header,
html.cf-k2 body.page-category .block-category h1 {
  margin: 4px 0 8px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
  letter-spacing: -.3px;
  text-transform: none;
}
html.cf-k2 body.page-category .block-category .block-category-inner {
  display: block;
}
html.cf-k2 body.page-category .block-category .category-cover { display: none; }
html.cf-k2 body.page-category .block-category .block-category-inner #category-description {
  max-width: 780px;
  font-size: 15px;
  line-height: 1.5;
  color: #4b5563;
}
html.cf-k2 body.page-category .block-category .block-category-inner #category-description p {
  margin: 0 0 8px;
  color: #4b5563;
}
html.cf-k2 body.page-category .block-category .block-category-inner #category-description strong {
  font-weight: 600;
  color: #1a1a1a;
}
html.cf-k2 body.page-category .block-category .block-category-inner #category-description :is(h2, h3, h4) {
  margin: 12px 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}
/* Theme-Karte "Unterkategorien" mit leeren Bildkaesten: weg, die Chips
   des Moduls uebernehmen (K4). */
html.cf-k2 body.page-category #subcategories { display: none; }

/* Kategorietext: gedeckelt statt verschoben (Layoutsprung vermeiden).
   Die Deckelung steht im CSS und greift vor dem ersten Malen; der Knopf
   kommt per JS dazu, nur wenn wirklich mehr Text da ist. Der Text bleibt
   vollstaendig im Dokument — nichts wird versteckt, was Google braucht. */
html.cf-k2 body.page-category #category-description {
  position: relative;
  /* Ueberschrift plus drei Zeilen — genug, dass der Anfang einen Sinn ergibt,
     wenig genug, dass die Produkte im ersten Bildschirm bleiben. */
  max-height: 7.4em;
  overflow: hidden;
}
html.cf-k2 body.page-category #category-description.cf-k2-kurz,
html.cf-k2 body.page-category #category-description.cf-k2-offen {
  max-height: none;
  overflow: visible;
}
html.cf-k2 body.page-category #category-description.cf-k2-gedeckelt:not(.cf-k2-offen)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.6em;
  background: linear-gradient(rgba(246, 246, 246, 0), #f6f6f6);
}
html.cf-k2 body.page-category .cf-k2-mehr-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  margin: 12px 0 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #333e4d;
  cursor: pointer;
  background: #fff;
  border: 1px solid #c9cdd2;
  border-radius: 8px;
}
html.cf-k2 body.page-category .cf-k2-mehr-knopf::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
html.cf-k2 body.page-category .cf-k2-mehr-knopf[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
html.cf-k2 body.page-category .cf-k2-mehr-knopf:hover { background: #eef1f4; border-color: #333e4d; }

/* Bleibt fuer den Fall, dass der Text ueber E7 im Backoffice nach unten zieht:
   das Theme rendert ihn dann als Karte im Fuss. */
html.cf-k2 body.page-category #js-product-list-footer > .card {
  max-width: 780px;
  margin: 24px 0 8px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.55;
  color: #4b5563;
}

/* --- K4 / K18: Marken- und Serien-Chips (Modul) -------------------
   Weisse Pillen, aktive gefuellt Schieferblau. Am Handy eine
   scrollbare Reihe bis an die Bildschirmkante. Der Rahmen liegt auf
   dem Link; ein spaeteres Logo sitzt innen (E6). */
html.cf-k2 .cfm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
html.cf-k2 .cfm-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #333e4d;
  white-space: nowrap;
  text-decoration: none;
  background: #fff;
  border: 1px solid #c9cdd2;
  border-radius: 999px;
  transition: background .12s, border-color .12s, color .12s;
}
html.cf-k2 .cfm-chip:hover {
  color: #333e4d;
  text-decoration: none;
  background: #eef1f4;
  border-color: #333e4d;
}
html.cf-k2 .cfm-chip[aria-current="page"],
html.cf-k2 .cfm-chip.cfm-chip-aktiv {
  color: #fff;
  background: #333e4d;
  border-color: #333e4d;
}
html.cf-k2 .cfm-chip img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
@media (max-width: 767px) {
  html.cf-k2 .cfm-chips {
    flex-wrap: nowrap;
    margin: 0 -15px 12px;
    padding: 0 15px 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  html.cf-k2 .cfm-chips::-webkit-scrollbar { display: none; }
  html.cf-k2 .cfm-chip { min-height: 40px; flex: none; }
}

/* --- K5: Finder-Band — gleiche Sprache wie die Karten ------------- */
html.cf-k2 .cfm-kat {
  gap: 8px 16px;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: #fff;
  border-color: #e0e0e0;
  border-radius: 12px;
}
html.cf-k2 .cfm-kat-frage {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}
html.cf-k2 .cfm-kat-btn {
  border-radius: 8px;
}
html.cf-k2 .cfm-kat-sub {
  display: block;
  flex: 1 0 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #5f6773;
}
/* Farbcode-Feld (Beschriftung): Feld und Knopf als eine Zeile. */
html.cf-k2 .cfm-kat form {
  display: flex;
  flex: 1 1 320px;
  gap: 8px;
  margin: 0;
}
html.cf-k2 .cfm-kat input[type="text"],
html.cf-k2 .cfm-kat input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  font-size: 14px;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid #c9cdd2;
  border-radius: 8px;
}
html.cf-k2 .cfm-kat input:focus {
  outline: 2px solid #333e4d;
  outline-offset: -1px;
}
/* Zweiter Knopf (Beratung) als Umriss. */
html.cf-k2 .cfm-kat-btn.cfm-kat-btn-zweit {
  color: #333e4d;
  background: #fff;
  border-color: #c9cdd2;
  box-shadow: none;
}
html.cf-k2 .cfm-kat-btn.cfm-kat-btn-zweit:hover {
  color: #333e4d;
  background: #eef1f4;
  border-color: #333e4d;
}

/* --- K10: Zeile ueber der Liste + Sortierleiste -------------------
   Links "582 Folien · Preise inkl. 8,1 % MwSt", rechts "Sortieren:
   Relevanz". Bootstrap-Spalten neutralisiert, Gold-Rahmen des Themes
   (select-title: 3px #B89F47) weg. */
html.cf-k2 .cfm-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  margin: 0 0 8px;
  font-size: 13px;
  color: #5f6773;
}
html.cf-k2 .cfm-alle {
  font-weight: 600;
  color: #333e4d;
  text-decoration: none;
}
html.cf-k2 .cfm-alle:hover { text-decoration: underline; }
html.cf-k2 .cfm-suche {
  display: block;
  margin: 0 0 12px;
  font-size: 14px;
  color: #4b5563;
}
html.cf-k2 .cfm-suche a {
  font-weight: 600;
  color: #333e4d;
}
html.cf-k2 #js-product-list-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 16px;
  padding: 0;
}
html.cf-k2 #js-product-list-top > [class*="col-"] {
  flex: none;
  width: auto;
  max-width: none;
  padding: 0;
}
html.cf-k2 #js-product-list-top .total-products {
  padding: 0;
}
html.cf-k2 #js-product-list-top .total-products p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
html.cf-k2 #js-product-list-top .sort-by-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
html.cf-k2 #js-product-list-top .sort-by {
  flex: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: #5f6773;
  text-align: left;
  white-space: nowrap;
}
html.cf-k2 #js-product-list-top .products-sort-order {
  flex: none;
  width: auto;
  max-width: none;
  padding: 0;
}
html.cf-k2 #js-product-list-top .select-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 200px;
  min-height: 40px;
  padding: 6px 10px 6px 14px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
  background: #fff;
  border: 1px solid #c9cdd2;
  border-radius: 8px;
}
html.cf-k2 #js-product-list-top .select-title:hover { border-color: #333e4d; background: #fff; }
html.cf-k2 #js-product-list-top .select-title > i {
  margin-left: auto;
  font-size: 20px;
  color: #5f6773;
}
html.cf-k2 #js-product-list-top .dropdown-menu {
  width: auto;
  min-width: 220px;
  margin: 4px 0 0;
  padding: 6px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
html.cf-k2 #js-product-list-top .select-list {
  display: block;
  padding: 9px 12px;
  font-size: 13px;
  color: #1a1a1a;
  border-radius: 6px;
}
html.cf-k2 #js-product-list-top .select-list:hover {
  color: #1a1a1a;
  text-decoration: none;
  background: #eef1f4;
}
html.cf-k2 #js-product-list-top .showing {
  flex: 1 0 100%;
  padding: 0;
  font-size: 13px;
  color: #5f6773;
  text-align: left;
}
@media (max-width: 767px) {
  html.cf-k2 #js-product-list-top > .col-lg-7 { flex: 1 1 100%; }
  html.cf-k2 #js-product-list-top .products-sort-order { flex: 1 1 auto; }
  html.cf-k2 #js-product-list-top .select-title { width: 100%; min-height: 44px; }
}

/* --- K12: Seitenzahlen als Knoepfe -------------------------------- */
html.cf-k2 .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 24px 0 8px;
  font-size: 13px;
  color: #5f6773;
}
html.cf-k2 .pagination > div {
  flex: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  line-height: 1.4;
}
html.cf-k2 .pagination .page-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  background: transparent;
}
html.cf-k2 .pagination .page-list li { display: inline-flex; }
html.cf-k2 .pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #333e4d;
  letter-spacing: 0;
  text-decoration: none;
  background: #fff;
  border: 1px solid #c9cdd2;
  border-radius: 8px;
}
html.cf-k2 .pagination a:not(.previous):not(.next) { letter-spacing: 0; }
html.cf-k2 .pagination a:hover { background: #eef1f4; border-color: #333e4d; }
html.cf-k2 .pagination .current a,
html.cf-k2 .pagination a.disabled {
  font-size: 13px;
  color: #fff;
  background: #333e4d;
  border-color: #333e4d;
}
html.cf-k2 .pagination .previous,
html.cf-k2 .pagination .next { float: none; }
html.cf-k2 .pagination .spacer {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 4px;
  color: #5f6773;
}
html.cf-k2 .pagination .material-icons { font-size: 18px; }
html.cf-k2 #products .up { margin: 4px 0 16px; }
html.cf-k2 #products .up .btn {
  min-height: 44px;
  font-size: 13px;
  color: #333e4d;
  background: #fff;
  border: 1px solid #c9cdd2;
  border-radius: 8px;
}

/* --- K15: Brotkrume, Fokus, Ladezustand, leerer Zustand ----------- */
html.cf-k2 #wrapper .breadcrumb {
  margin: 0 0 12px;
  padding: 0;
  overflow-x: auto;
  font-size: 13px;
  white-space: nowrap;
  scrollbar-width: none;
}
html.cf-k2 #wrapper .breadcrumb li a {
  display: inline-block;
  padding: 6px 0;
  color: #5f6773;
}
html.cf-k2 #wrapper .breadcrumb li:last-child { color: #1a1a1a; }
html.cf-k2 #wrapper .breadcrumb li::after { margin: 0 6px; color: #c9cdd2; }
html.cf-k2 :is(.cfm-chip, .cfm-kat-btn, .cfm-alle, .pagination a, .select-title, .select-list, .cf-k2-mehr-knopf, .cf-k2-leiste a, .cf-k2-leiste button):focus-visible {
  outline: 2px solid #333e4d;
  outline-offset: 2px;
}
html.cf-k2 .product-miniature:has(.product-title a:focus-visible) {
  outline: 2px solid #333e4d;
  outline-offset: 2px;
}
/* Waehrend der Ajax-Neuaufbau laeuft (Sortieren, Seite), bleibt die
   alte Liste sichtbar, aber gedimmt — statt eines leeren Sprungs. */
html.cf-k2 #js-product-list.cf-k2-laedt {
  opacity: .5;
  pointer-events: none;
  transition: opacity .15s;
}
html.cf-k2 #products .page-not-found {
  max-width: none;
  padding: 24px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
}

/* --- K11: Handy — haftende Leiste, Reihenfolge, Tippziele ---------
   Nur unter 768 px, nur wenn custom.js sie eingehaengt hat (Finder-Band
   vorhanden und mehr als eine Seite). Chatling-Blase und Klaviyo-Teaser
   werden um die Leistenhoehe angehoben (Inline-bottom braucht
   !important, gemessen 03.09.). Weg, sobald die Seitenzahlen im Bild
   sind — dann auch das Body-Polster. */
.cf-k2-leiste {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1029;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .10);
}
.cf-k2-leiste a, .cf-k2-leiste button {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  background: #333e4d;
  border: 1px solid #333e4d;
  border-radius: 8px;
}
.cf-k2-leiste .cf-k2-leiste-zweit {
  color: #333e4d;
  background: #fff;
  border-color: #c9cdd2;
}
@media (max-width: 767px) {
  html.cf-k2 body.cf-k2-leiste-an .cf-k2-leiste { display: flex; }
  html.cf-k2 body.cf-k2-leiste-an { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  html.cf-k2 body.cf-k2-leiste-an #chtl-chat-icon-container {
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    transition: bottom .2s;
  }
  html.cf-k2 body.cf-k2-leiste-an [class*="kl-teaser-"] {
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
  html.cf-k2 .block-category h1,
  html.cf-k2 #js-product-list-header h1,
  html.cf-k2 h1#js-product-list-header,
  html.cf-k2 #product-list-header h1,
  html.cf-k2 h1#product-list-header { font-size: 22px; }
  html.cf-k2 .product-miniature .product-description { padding: 10px 10px 12px; }
  html.cf-k2 .product-miniature .product-title a,
  html.cf-k2 .cf-k2-name { font-size: 13px; }
  html.cf-k2 .cf-k2-kopf { font-size: 11.5px; }
  html.cf-k2 .product-miniature .price { font-size: 15px; }
  html.cf-k2 .product-miniature .cf-k2-einheit { font-size: 12px; }
  html.cf-k2 .product-miniature .cf-k2-tun { width: 34px; height: 34px; }
  html.cf-k2 .product-miniature .cf-k2-tun .material-icons { font-size: 18px; }
  html.cf-k2 .cfm-kat { padding: 12px 14px; }
  html.cf-k2 .cfm-kat-frage { font-size: 14px; }
  html.cf-k2 .cfm-kat-btn { flex: 1 1 100%; justify-content: center; min-height: 44px; }
  /* Farbcode-Feld: am Handy volle Breite, der Knopf darunter — sonst bleibt
     vom Platzhalter "Farbcode oder Farbname" nur "Farbcode ode" uebrig. */
  html.cf-k2 .cfm-kat form { flex-wrap: wrap; }
  html.cf-k2 .cfm-kat input[type="search"],
  html.cf-k2 .cfm-kat input[type="text"] { flex: 1 1 100%; min-height: 44px; }
  /* Erste Kachel in den ersten Bildschirm holen: Teaser drei Zeilen (der
     Knopf "Mehr lesen" steht darunter), nur EIN Zaehler, engere Zeile. */
  html.cf-k2 body.page-category #category-description { max-height: 4.5em; }
  html.cf-k2 #js-product-list-top .showing { display: none; }
  html.cf-k2 #js-product-list-top .total-products { display: block; }
  html.cf-k2 .cfm-zeile { margin: 0 0 4px; }
  /* Tippziele: Brotkrume und "Mehr lesen" waren die letzten unter 44 px. */
  html.cf-k2 #wrapper .breadcrumb li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  html.cf-k2 body.page-category .cf-k2-mehr-knopf { min-height: 44px; }
  html.cf-k2 .pagination { justify-content: center; }
  html.cf-k2 .pagination .page-list { justify-content: center; }
  /* Tippziele am Handy: 44 px (Seitenzahlen, Sortierung, Chips). */
  html.cf-k2 .pagination a,
  html.cf-k2 .pagination .spacer { min-width: 44px; height: 44px; }
  html.cf-k2 .cfm-chip { min-height: 44px; }
}

/* --- Ruhe fuer alle, die keine Bewegung wollen -------------------- */
@media (prefers-reduced-motion: reduce) {
  html.cf-k2 article.product-miniature,
  html.cf-k2 .cfm-chip,
  html.cf-k2 .cf-k2-mehr > summary::after,
  html.cf-k2 #js-product-list,
  html.cf-k2 body.cf-k2-leiste-an #chtl-chat-icon-container { transition: none; }
  html.cf-k2 article.product-miniature:hover { transform: none; }
}
/* ===================== ENDE PAKET 2 ===================== */