/* ==========================================================================
   Shop — Übersicht (/Produkte) und Kategorieseiten
   UHRIG Solutions, 08.10.2026

   Rückmeldung Manuel: „den Shop machst du bisschen moderner, der sieht
   leider bisschen lasch aus." Gemessen vorher (1440x900):
     - Kategorieseiten liefen in container-fluid-xl über die volle Breite;
       die vierte Produktspalte stand bündig am Bildschirmrand (x 1422).
     - Die Kategorie-Seitenleiste war ein flacher Kasten ohne Gewicht.
     - Produktkarten: kantige Kästen, Bild ohne Fläche, Preis ohne Stand.

   Geladen nach dynamik.css und VOR handy.css (layout/header.tpl), damit
   Handy-Korrekturen weiterhin das letzte Wort haben.
   ========================================================================== */

/* ---------- Gemeinsame Bahn ------------------------------------------------ */

.uh-laden {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2rem) clamp(4rem, 8vw, 7rem);
}

#content-wrapper.is-item-list {
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(1rem, 3vw, 2rem) !important;
  padding-right: clamp(1rem, 3vw, 2rem) !important;
}
#content-wrapper.is-item-list #content > .row { margin-left: 0; margin-right: 0; }

/* ---------- Kopf der Übersicht -------------------------------------------- */

.uh-shop-kopf { max-width: 760px; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.uh-shop-marke {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--uh-gruen-hell); margin: 0 0 .7rem; font-weight: 600;
}
.uh-shop-kopf h1 {
  font-family: var(--uh-display);
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  line-height: .95; letter-spacing: -.035em;
  color: var(--uh-kalk); margin: 0 0 .8rem;
}
.uh-shop-lead { font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.6; color: var(--uh-nebel); margin: 0; }

/* ---------- Bühne: Kategoriebaum links, Abschnitte rechts -----------------
   Zweiter Entwurf 08.10.2026 („unfassbar unübersichtlich"): keine Felder in
   wechselnden Breiten und keine Bilder hinter den Karten mehr. Ein
   gemeinsames 4er-Raster für alle Kategorien, jede genau eine Reihe. */

.uh-shop-buehne {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(1.8rem, 3vw, 3rem);
  align-items: start;
}

.uh-shop-baum {
  position: sticky; top: calc(var(--uh-kopf-hoehe, 84px) + 1.2rem);
  padding-top: .3rem;
}
.uh-shop-baum-titel {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--uh-nebel); font-weight: 600; margin: 0 0 .7rem .7rem;
}
.uh-shop-baum ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.uh-shop-baum a {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: .7rem;
  padding: .45rem .6rem .45rem .45rem;
  border-radius: 12px;
  color: var(--uh-kalk) !important; text-decoration: none !important;
  font-size: .95rem; font-weight: 500;
  transition: background .2s var(--uh-kurve), color .2s var(--uh-kurve);
}
.uh-shop-baum a:hover { background: rgba(255,255,255,.05); }
.uh-shop-baum a.ist-aktiv {
  background: rgba(84,184,79,.14);
  color: var(--uh-gruen-hell) !important;
}
.uh-shop-baum-bild {
  width: 32px; height: 32px; border-radius: 9px;
  background-size: cover; background-position: 50% 50%;
}
.uh-shop-baum-zahl { font-size: .8rem; color: var(--uh-nebel); font-variant-numeric: tabular-nums; }

.uh-shop-abschnitt {
  padding: clamp(1.6rem, 2.6vw, 2.2rem) 0;
  border-top: 1px solid rgba(255,255,255,.08);
  scroll-margin-top: calc(var(--uh-kopf-hoehe, 84px) + 1rem);
}
.uh-shop-abschnitt:first-child { border-top: 0; padding-top: 0; }

.uh-shop-abschnitt-kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.uh-shop-abschnitt-kopf h2 {
  font-family: var(--uh-display);
  font-size: clamp(1.5rem, 2vw, 1.85rem); letter-spacing: -.02em; line-height: 1.1;
  color: var(--uh-kalk); margin: 0 0 .25rem;
}
.uh-shop-abschnitt-kopf p { margin: 0; color: var(--uh-nebel); font-size: .93rem; line-height: 1.45; }
.uh-shop-alle {
  white-space: nowrap; font-weight: 600; font-size: .9rem;
  color: var(--uh-gruen-hell) !important; text-decoration: none !important;
  padding-bottom: .2rem;
}
.uh-shop-alle:hover { text-decoration: underline !important; text-underline-offset: 4px; }
.uh-shop-alle span { display: inline-block; transition: transform .25s var(--uh-kurve); }
.uh-shop-alle:hover span { transform: translateX(3px); }

.uh-shop-raster {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 1.2vw, 1.1rem);
  margin: 0 !important;
}
.uh-shop-raster > .product-wrapper { padding: 0 !important; max-width: none !important; width: auto !important; }

/* Artikel ohne Foto (Malerkalk, Stand 08.10.2026): statt NOVAs grauer
   Kamera eine ruhige Fläche mit „Foto folgt". Gilt überall, wo Produktkarten
   stehen — auch in „Ähnliche Artikel" auf den Artikelseiten (Gesamtprüfung). */
.productbox-image:has(img[src*="keinBild"]),
.product-image:has(img[src*="keinBild"]) {
  background: repeating-linear-gradient(135deg, #ECEAE2 0 12px, #F1EFE8 12px 24px);
}
.productbox-image:has(img[src*="keinBild"]) img { opacity: 0; }
.productbox-image:has(img[src*="keinBild"]) .inner::after {
  content: 'Foto folgt'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #8A8678; font-weight: 600;
}

/* Staffelpreis-Tabelle mit nur einer Staffel („ab 1") sagt nichts, was
   nicht schon darüber steht — bei Variationsartikeln war die Preisspalte
   sogar leer („ab 1 | * |"). Gesamtprüfung 08.10.2026. */
.bulk-prices:has(tbody tr:only-child) { display: none; }

/* ---------- Produktkarte (Übersicht + Kategorieseiten) -------------------- */

.uh-laden .productbox,
#content-wrapper.is-item-list .productbox {
  height: 100%;
  border-radius: 18px !important;
  background: var(--uh-nacht-2) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  overflow: hidden;
  padding: 0 !important;
  transition: transform .35s var(--uh-kurve), border-color .35s var(--uh-kurve), box-shadow .35s var(--uh-kurve) !important;
}
.uh-laden .productbox:hover,
#content-wrapper.is-item-list .productbox:hover {
  transform: translateY(-4px);
  border-color: rgba(111,209,105,.45) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.45) !important;
}
.uh-laden .productbox .productbox-inner,
#content-wrapper.is-item-list .productbox .productbox-inner { padding: 0 !important; }
.uh-laden .productbox .productbox-inner > .row,
#content-wrapper.is-item-list .productbox .productbox-inner > .row { margin: 0; }
.uh-laden .productbox .productbox-inner > .row > .col,
#content-wrapper.is-item-list .productbox .productbox-inner > .row > .col { padding: 0; }

/* Bildfläche: hell, mit Luft — die Eimer stehen auf Weiß fotografiert */
.uh-laden .productbox .productbox-images,
#content-wrapper.is-item-list .productbox .productbox-images {
  background: #F4F3EE !important;
  margin: .55rem .55rem 0 !important;
  border-radius: 13px;
  overflow: hidden;
}
.uh-laden .productbox .productbox-image .inner img,
#content-wrapper.is-item-list .productbox .productbox-image .inner img {
  object-fit: contain !important;
  padding: 8%;
  transition: transform .6s var(--uh-kurve);
}
.uh-laden .productbox:hover .productbox-image .inner img,
#content-wrapper.is-item-list .productbox:hover .productbox-image .inner img { transform: scale(1.05); }

.uh-laden .productbox .productbox-ribbon,
#content-wrapper.is-item-list .productbox .productbox-ribbon {
  top: 1.1rem !important; left: 1.1rem !important;
  border-radius: 999px !important;
  padding: .22rem .65rem !important;
  font-size: .7rem !important; letter-spacing: .04em;
  background: rgba(20,24,15,.82) !important; color: var(--uh-gruen-hell) !important;
  backdrop-filter: blur(4px);
}
.uh-laden .productbox .productbox-ribbon::before,
.uh-laden .productbox .productbox-ribbon::after,
#content-wrapper.is-item-list .productbox .productbox-ribbon::before,
#content-wrapper.is-item-list .productbox .productbox-ribbon::after { display: none !important; }

.uh-laden .productbox .productbox-title,
#content-wrapper.is-item-list .productbox .productbox-title {
  padding: 1rem 1.1rem 0 !important; margin: 0 !important;
}
.uh-laden .productbox .productbox-title a,
#content-wrapper.is-item-list .productbox .productbox-title a {
  font-size: 1rem !important; font-weight: 600 !important; line-height: 1.35 !important;
  color: var(--uh-kalk) !important; min-height: 2.7em;
}
.uh-laden .productbox .price_wrapper,
#content-wrapper.is-item-list .productbox .price_wrapper { padding: .55rem 1.1rem 1.15rem !important; }
.uh-laden .productbox .productbox-price,
#content-wrapper.is-item-list .productbox .productbox-price {
  font-family: var(--uh-display); font-size: 1.32rem !important; letter-spacing: -.01em;
  color: var(--uh-signal) !important;
}
.uh-laden .productbox .base-price,
#content-wrapper.is-item-list .productbox .base-price { font-size: .8rem; color: var(--uh-nebel); margin-top: .15rem; }

/* ---------- Kategorieseite: Kopf und Seitenleiste ------------------------- */

#content-wrapper.is-item-list #result-wrapper > .title h1 {
  font-family: var(--uh-display) !important;
  font-size: clamp(2.4rem, 5vw, 4rem) !important; line-height: 1 !important; letter-spacing: -.03em;
  color: var(--uh-kalk) !important; margin-bottom: .6rem !important;
}
#content-wrapper.is-item-list #result-wrapper > .desc { color: var(--uh-nebel); max-width: 680px; }

.uh-kat-kopf {
  position: relative; overflow: hidden;
  border-radius: 22px;
  margin: .4rem 0 1.6rem;
  min-height: 190px;
  display: flex; align-items: flex-end;
  padding: clamp(1.2rem, 2.4vw, 2rem);
  background: var(--uh-nacht-2);
}
.uh-kat-kopf::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--uh-kat-bild); background-size: cover; background-position: 50% 50%;
  opacity: .55;
}
.uh-kat-kopf::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,24,15,.92) 0%, rgba(20,24,15,.55) 55%, rgba(20,24,15,.15) 100%);
}
.uh-kat-kopf > * { position: relative; z-index: 1; }
.uh-kat-kopf-marke { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--uh-gruen-hell); margin: 0 0 .4rem; font-weight: 600; }
.uh-kat-kopf-text { color: var(--uh-kalk); opacity: .85; margin: 0; max-width: 520px; }

/* Seitenleiste: Kategoriebaum */
#sidepanel_left .box-categories {
  background: var(--uh-nacht-2) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 18px !important;
  padding: 1.1rem .7rem .8rem !important;
  position: sticky; top: calc(var(--uh-kopf-hoehe, 84px) + 1rem);
}
#sidepanel_left .box-categories .productlist-filter-headline {
  font-size: .76rem !important; letter-spacing: .16em; text-transform: uppercase;
  color: var(--uh-gruen-hell) !important; border: 0 !important;
  padding: 0 .55rem .6rem !important; margin: 0 !important;
}
#sidepanel_left .box-categories .nav-link {
  display: flex; align-items: center;
  border-radius: 10px !important;
  padding: .55rem .7rem !important;
  color: var(--uh-kalk) !important;
  border: 0 !important;
  transition: background .2s var(--uh-kurve), transform .2s var(--uh-kurve);
}
#sidepanel_left .box-categories .nav-link:hover { background: var(--uh-nacht-3) !important; transform: translateX(3px); }
#sidepanel_left .box-categories .nav-item.active > .nav-link {
  background: rgba(84,184,79,.16) !important;
  color: var(--uh-gruen-hell) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--uh-gruen-hell);
}
#sidepanel_left .box-categories .nav-item { border: 0 !important; }
#sidepanel_left .box-categories .nav-item.active { border-bottom: 0 !important; }

/* Werkzeugleiste (Sortierung, Anzahl, Ansicht) */
#content-wrapper.is-item-list .productlist-page-nav .btn-outline-secondary {
  border-radius: 999px !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--uh-kalk) !important;
  background: transparent !important;
}
#content-wrapper.is-item-list .productlist-page-nav .btn-outline-secondary:hover,
#content-wrapper.is-item-list .productlist-page-nav .btn-outline-secondary.active {
  border-color: var(--uh-gruen) !important; background: rgba(84,184,79,.12) !important;
}
#content-wrapper.is-item-list .productlist-item-info { color: var(--uh-nebel); }
#content-wrapper.is-item-list #product-list { row-gap: 1.2rem; }

/* ---------- Handy --------------------------------------------------------- */

@media (max-width: 1199.98px) {
  /* Kategoriebaum wird zur waagrechten Leiste, die unter der Kopfleiste klebt */
  .uh-shop-buehne { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .uh-shop-baum {
    top: var(--uh-kopf-hoehe, 84px); z-index: 20;
    margin: 0 calc(-1 * clamp(1rem, 3vw, 2rem)) 1.4rem;
    padding: .7rem clamp(1rem, 3vw, 2rem);
    background: var(--uh-nacht);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .uh-shop-baum-titel { display: none; }
  .uh-shop-baum ul { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
  .uh-shop-baum ul::-webkit-scrollbar { display: none; }
  .uh-shop-baum li { flex: none; }
  .uh-shop-baum a {
    grid-template-columns: 26px auto auto; gap: .5rem;
    padding: .3rem .8rem .3rem .3rem; border-radius: 999px;
    background: var(--uh-nacht-2); font-size: .88rem;
  }
  .uh-shop-baum-bild { width: 26px; height: 26px; border-radius: 50%; }
  .uh-shop-abschnitt { scroll-margin-top: calc(var(--uh-kopf-hoehe, 84px) + 70px); }
}

@media (max-width: 767.98px) {
  .uh-laden { padding-left: .9rem; padding-right: .9rem; }
  .uh-shop-baum { margin-left: -.9rem; margin-right: -.9rem; padding-left: .9rem; padding-right: .9rem; }
  .uh-shop-abschnitt-kopf { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .uh-shop-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .uh-laden .productbox .productbox-title a { -webkit-line-clamp: 3 !important; font-size: .92rem !important; }
  .uh-laden .productbox .productbox-title { padding: .8rem .8rem 0 !important; }
  .uh-laden .productbox .price_wrapper { padding: .45rem .8rem .9rem !important; }
  .uh-laden .productbox .productbox-price { font-size: 1.12rem !important; }
  .uh-kat-kopf { min-height: 140px; border-radius: 16px; }
  #sidepanel_left .box-categories { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .uh-laden .productbox, #content-wrapper.is-item-list .productbox,
  .uh-laden .productbox .productbox-image .inner img { transition: none !important; }
  .uh-laden .productbox:hover, #content-wrapper.is-item-list .productbox:hover { transform: none; }
}
.uh-kat-kopf-titel {
  font-family: var(--uh-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: .98; letter-spacing: -.03em;
  color: var(--uh-kalk); margin: 0 0 .55rem;
}

/* ---------- Artikelseite: „Ähnliche Artikel" ----------------------------
   Gesamtprüfung 08.10.2026: Die Leiste lief von Bildschirmrand zu
   Bildschirmrand (1393 px), während Beschreibung und Kaufbereich in einer
   1218-px-Bahn stehen; die Überschrift war dünn, zentriert und in Inter
   statt in der Überschriftenschrift. Jetzt in derselben Bahn, Überschrift
   wie alle anderen Abschnittstitel. */
.recommendations {
  max-width: 1250px; margin-inline: auto !important;
  padding-inline: 16px;
}
.recommendations .hr-sect {
  font-family: var(--uh-display) !important;
  font-size: clamp(1.5rem, 2vw, 1.85rem) !important; letter-spacing: -.02em;
  color: var(--uh-kalk) !important;
  justify-content: flex-start !important; text-align: left !important;
  margin: clamp(2.5rem, 5vw, 4rem) 0 1.2rem !important;
}
.recommendations .hr-sect::before,
.recommendations .hr-sect::after { display: none !important; }

/* Kartenaufbau: Bild, Titel, Preis untereinander. NOVAs Kartenzeile ist
   ein umbrechendes Flex mit align-content: stretch — war eine Karte höher
   als ihr Inhalt, landete der Überschuss ZWISCHEN Bild und Titel
   (Putzträger: Titel 44 px tiefer als nebenan). Gesamtprüfung 08.10.2026. */
.uh-laden .productbox .productbox-inner,
#content-wrapper.is-item-list .productbox .productbox-inner,
.recommendations .productbox .productbox-inner { height: 100%; }
.uh-laden .productbox .productbox-inner > .row,
#content-wrapper.is-item-list .productbox .productbox-inner > .row,
.recommendations .productbox .productbox-inner > .row {
  flex-direction: column; flex-wrap: nowrap; align-content: normal; height: 100%;
}
.uh-laden .productbox .productbox-inner > .row > .col,
#content-wrapper.is-item-list .productbox .productbox-inner > .row > .col,
.recommendations .productbox .productbox-inner > .row > .col { flex: 0 0 auto; }

/* Leere Kategorie: Hinweis statt leerer Fläche (Gesamtprüfung 08.10.2026) */
.uh-kat-leer {
  border: 1px dashed rgba(255,255,255,.18); border-radius: 18px;
  padding: clamp(1.4rem, 3vw, 2.2rem); margin-bottom: 2rem; max-width: 720px;
}
.uh-kat-leer p { color: var(--uh-nebel); margin: 0 0 .6rem; }
.uh-kat-leer-titel { font-family: var(--uh-display); font-size: 1.35rem; color: var(--uh-kalk) !important; }
.uh-kat-leer-knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.1rem 0 0 !important; }

/* ---------- Artikelseite Sumpfkalk: häufige Fragen (09.10.2026) ----------
   snippets/uh_faq_sumpfkalk.tpl. Gleiche Bahn und Überschrift wie
   „Ähnliche Artikel“, aufklappbar, damit die Seite nicht lang wird. */
.uh-faq {
  max-width: 1250px; margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding-inline: 16px;
}
.uh-faq-titel {
  font-family: var(--uh-display) !important;
  font-size: clamp(1.5rem, 2vw, 1.85rem) !important; letter-spacing: -.02em;
  color: var(--uh-kalk); margin: 0 0 1.2rem;
}
.uh-faq-eintrag { border-top: 1px solid rgba(244,243,238,.14); }
.uh-faq-eintrag:last-of-type { border-bottom: 1px solid rgba(244,243,238,.14); }
.uh-faq-eintrag summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; padding: 1.05rem 0;
}
.uh-faq-eintrag summary::-webkit-details-marker { display: none; }
.uh-faq-eintrag summary h3 {
  font-family: var(--uh-text); font-weight: 700; font-size: 1.05rem;
  color: var(--uh-kalk); margin: 0; letter-spacing: 0;
}
.uh-faq-eintrag summary::after {
  content: "+"; flex: 0 0 auto; font-size: 1.4rem; line-height: 1;
  color: var(--uh-signal); transition: transform .2s var(--uh-kurve, ease);
}
.uh-faq-eintrag[open] summary::after { transform: rotate(45deg); }
.uh-faq-eintrag summary:hover h3 { color: var(--uh-signal); }
.uh-faq-eintrag p {
  margin: 0 0 1.15rem; max-width: 72ch; color: var(--uh-nebel, #9AA093);
  line-height: 1.65;
}
.uh-faq-weiter { margin-top: 1.4rem; color: var(--uh-nebel, #9AA093); }
.uh-faq-weiter a { color: var(--uh-signal); }