/* ===== LA MESMA Kategorie 2026: Einbettung in Woodmart (CB) =====
   Von Hand gepflegt. kategorie.css wird aus dem Entwurf erzeugt und bei jedem
   Lauf von build-kategorie.py ueberschrieben, diese Datei nicht. Hier steht
   nur, was der Entwurf nicht wissen konnte: wie er sich ins Theme einfuegt. */

/* --- 1. Rueckfallebene fuer die Reveals ---------------------------------
   Der Entwurf setzt .reveal auf opacity:0 und wartet auf ein Skript. Ohne
   JavaScript bliebe die halbe Seite leer. Versteckt wird deshalb erst, wenn
   kategorie.js die Klasse lm-k26-js gesetzt hat. */
.lm-k26 .reveal { opacity: 1; transform: none; }
.lm-k26.lm-k26-js .reveal:not(.in) { opacity: 0; transform: translateY(28px); }

/* --- 2. Textspalte auf Woodmarts Raster -------------------------------
   Der Entwurf rechnet mit 1440px und grosszuegigem Rand, Woodmarts Container
   misst 1222px bei 15px Innenabstand. Beides nebeneinander laesst die
   Ueberschriften gegen die Produktkacheln versetzt stehen. */
.lm-k26 { --maxw: 1222px; --pad: 15px; }

/* --- 3. Volle Breite fuer die Baender ---------------------------------
   Trustbar, Werkzeugleiste und die farbigen Abschnitte brechen aus dem
   Container aus. --lm-vw kommt aus kategorie.js und misst die Breite ohne
   Bildlaufleiste; ohne Skript greift der 100vw-Rueckfall, der um die Breite
   der Leiste danebenliegt. Deshalb zusaetzlich overflow-x: clip am body,
   das im Gegensatz zu hidden position: sticky nicht kaputtmacht. */
:root { --lm-vw: 100vw; }
body.lm-k26-seite { overflow-x: clip; }
.lm-k26-kopf,
.lm-k26-fuss {
  margin-left: calc(50% - var(--lm-vw) / 2);
  margin-right: calc(50% - var(--lm-vw) / 2);
}

/* --- 4. Woodmarts eigene Werkzeugleiste ---------------------------------
   Sie brachte Brotkrumen, Trefferzahl, "Show sidebar" und eine zweite
   Sortierung mit. Der Entwurf hat all das in seiner Leiste, doppelt sieht es
   nach Versehen aus. Nur ausgeblendet, nicht entfernt: ohne das Plugin ist
   die Kategorie wieder Woodmart-Standard. */
body.lm-k26-seite .shop-loop-head { display: none; }

/* --- 5. Abstaende zum Raster -------------------------------------------- */
body.lm-k26-seite .wd-products-holder,
body.lm-k26-seite ul.products { margin-top: clamp(28px, 3.5vw, 48px); }
.lm-k26-fuss { margin-top: clamp(40px, 5vw, 80px); }

/* --- 6. Klebende Leiste unter Woodmarts klebendem Kopf -------------------
   Der Entwurf setzt top:62px fuer seinen eigenen Kopf. Woodmarts
   Sticky-Header ist hoeher; --lm-kopf wird in kategorie.js gemessen. */
.lm-k26 .toolbar { top: var(--lm-kopf, 62px); }

/* --- 7. Werkzeugleiste: Markup des Shops statt des Entwurfs --------------
   Im Entwurf sind Groesse und Sortierung reine Schaltflaechen, hier ist es ein
   Formular, damit die Auswahl ohne JavaScript funktioniert. Das Formular ist
   ein zusaetzlicher Kasten zwischen .tb-right und den beiden Labels und muss
   die Reihe selbst wieder aufmachen, sonst stehen die Felder untereinander. */
.lm-k26 .tb-form { display: flex; align-items: center; gap: 14px; }

/* Die Kacheln sind Links, keine Schaltflaechen: Ein Filter ist eine eigene
   Adresse, damit er teilbar ist und ohne JavaScript greift. Das CSS des
   Entwurfs faerbt ueber [aria-pressed="true"], das es an Links nicht gibt. */
.lm-k26 a.chip { display: inline-flex; align-items: center; }
.lm-k26 .chip.is-aktiv {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* --- 8. Trustbar in voller Breite ---------------------------------------
   Der Entwurf rechnet mit 1296px Innenmass, Woodmarts Container gibt 1192px
   her. Die vier Punkte brauchen 1271px und wurden rechts abgeschnitten. Als
   Band mit eigenem Hintergrund darf die Leiste breiter laufen als die
   Textspalte, genau wie die USP-Leiste im Kopf der Seite. */
.lm-k26 .trustbar .row {
  max-width: 1440px;
  padding-left: clamp(20px, 5vw, 72px);
  padding-right: clamp(20px, 5vw, 72px);
}

/* Beschriftung und Feld gehoeren in eine Zeile; im schmaleren Container
   umbrach "Deine Größe" sonst zwischen den beiden Woertern. */
.lm-k26 .tb-select { white-space: nowrap; }

/* --- 9. Handy: die Kennzahlenzeile darf umbrechen ------------------------
   Im Entwurf steht sie auf white-space:nowrap, damit sie im Kopf rechts neben
   der Ueberschrift in einer Zeile bleibt. Unter 820px stapelt der Entwurf die
   beiden Spalten, laesst aber nowrap stehen: Die Zeile ist dann rund 425px
   breit, und weil sie im selben Raster liegt, zieht sie die ganze Spalte auf
   diese Breite. Der Anrisstext lief dadurch rechts aus dem Bild. Gemessen am
   07.09.2026 bei 390px Fensterbreite. */
@media (max-width: 820px) {
  .lm-k26 .cat-hero .grid > * { min-width: 0; }
  .lm-k26 .cat-hero .meta { white-space: normal; }
}

/* Die Vertrauensleiste scrollt waagerecht, sobald sie nicht passt. Ohne
   Hinweis sieht der abgeschnittene letzte Punkt nach Fehler aus; der Entwurf
   loest das bei den Filterkacheln mit einer weichen Kante, hier genauso. */
@media (max-width: 1100px) {
  .lm-k26 .trustbar .row {
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
    mask-image: linear-gradient(to right, #000 92%, transparent);
  }
}

/* Das Groessenfeld war auf dem Handy 53px breit. Nach 10px Innenabstand links
   und 26px fuer den Pfeil blieben 17px Text, "Alle" braucht 23px und wurde zu
   "All" abgeschnitten, was nach englischer Beschriftung aussah. Der Browser
   bemisst ein Auswahlfeld mit appearance:none nach dem Text der Optionen und
   rechnet den Platz fuer den eigenen Pfeil nicht mit. Gemessen am 10.09.2026. */
.lm-k26 .tb-select select { min-width: 74px; }