/* Produkt-Uebersichtsseiten aus dem STW ERP */

/* Die Seite nutzt die volle Breite wie die Produktseiten. Themes stellen normale Seiten
   haeufig schmaler dar oder blenden eine Seitenleiste ein; beides wird hier nur fuer die
   vom ERP verwalteten Seiten aufgehoben. */
body.stw-erp-category-page-active #secondary,
body.stw-erp-category-page-active .widget-area,
body.stw-erp-category-page-active .sidebar,
body.stw-erp-category-page-active #sidebar-primary,
body.stw-erp-category-page-active .sidebar-primary{display:none!important}
body.stw-erp-category-page-active #content,
body.stw-erp-category-page-active #primary,
body.stw-erp-category-page-active #main,
body.stw-erp-category-page-active .site-content,
body.stw-erp-category-page-active .content-area,
body.stw-erp-category-page-active .entry-content,
body.stw-erp-category-page-active .ast-container,
body.stw-erp-category-page-active .container,
body.stw-erp-category-page-active .elementor-section-boxed>.elementor-container{
  max-width:none!important;width:100%!important;float:none!important;
  margin-left:auto!important;margin-right:auto!important
}
/* Unabhaengig vom Theme: Der Inhaltsbereich zieht sich auf die volle Fensterbreite und
   zentriert seinen Inhalt anschliessend selbst. Damit ist keine Kenntnis der Theme-Klassen noetig. */
.stw-category-main{
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  background:#fff
}
body.stw-erp-category-page-active{overflow-x:hidden}
.stw-category-shell{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:24px 0 64px}
.stw-category-article{max-width:none}
.stw-category-breadcrumb{font-size:13px;color:#666;margin-bottom:18px}
.stw-category-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:start}
.stw-category-title{margin:0 0 12px;font-size:clamp(28px,3.4vw,40px);line-height:1.12}
.stw-category-intro-heading{margin:0 0 8px;font-size:clamp(19px,1.8vw,24px)}
.stw-category-copy{font-size:16px;line-height:1.65}
.stw-category-copy p{margin:0 0 12px}
.stw-category-hero-image{margin:0}
.stw-category-hero-picture,.stw-category-section-picture{width:100%;height:auto;border-radius:6px}
.stw-category-section{margin-top:clamp(38px,6vw,74px)}
/* Farbflaeche eines Abschnitts: Die Farbe kommt als Angabe am Element aus dem
   ERP, die Flaeche selbst zeichnet ein Hilfselement ueber die ganze
   Fensterbreite - der Inhalt bleibt in der Spalte. */
.stw-category-section--tinted{
  position:relative;padding:clamp(26px,3.5vw,48px) 0;margin-top:clamp(38px,6vw,74px)
}
.stw-category-section--tinted::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);background:inherit;z-index:0
}
.stw-category-section--tinted>*{position:relative;z-index:1}
/* Ohne diese Zeile koennte die volle Fensterbreite einen waagerechten
   Rollbalken ausloesen. */
body.stw-erp-category-page-active{overflow-x:hidden}
.stw-category-subsection{margin-top:clamp(24px,3vw,38px);padding-left:clamp(12px,1.5vw,20px);border-left:3px solid #e6e6e6}
.stw-category-subsection .stw-category-section-heading{font-size:clamp(18px,1.7vw,22px);border-bottom-width:1px}
.stw-category-section-heading{
  margin:0 0 14px;font-size:clamp(21px,2.2vw,28px);display:inline-block;
  border-bottom:2px solid #171717;padding-bottom:5px
}
.stw-category-section-image{margin:0 0 16px}
.stw-category-tiles{display:grid;gap:clamp(16px,2vw,26px);margin:18px 0}
.stw-category-tiles--1{grid-template-columns:minmax(0,1fr)}
.stw-category-tiles--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stw-category-tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stw-category-tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stw-category-tiles--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.stw-category-tiles--6{grid-template-columns:repeat(6,minmax(0,1fr))}
/* Ohne Rahmen, dafuer leicht abgesetzt: Der Schatten traegt die Kachel auch
   auf einer Farbflaeche. */
.stw-category-tile{
  border:0;border-radius:8px;overflow:hidden;background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 16px rgba(16,24,40,.07);
  transition:box-shadow .15s ease,transform .15s ease
}
.stw-category-tile:hover{
  box-shadow:0 2px 4px rgba(16,24,40,.08),0 14px 30px rgba(16,24,40,.12);
  transform:translateY(-1px)
}
/* Die ganze Kachel ist ein Link. Beschriftung und Kurztext sollen darin
   trotzdem wie Text aussehen - das Theme unterstreicht sonst alles. Nur die
   Linkzeile bleibt als Link erkennbar. */
.stw-category-tile-link{display:block;color:inherit;text-decoration:none!important;height:100%}
.stw-category-tile-link:hover,.stw-category-tile-link:focus{text-decoration:none!important}
.stw-category-tile-headline,.stw-category-tile-text,.stw-category-tile-text *,
.stw-category-tile-badge{text-decoration:none!important}
.stw-category-tile-image{display:block;background:#f7f7f7}
.stw-category-tile-picture{display:block;width:100%;height:210px;object-fit:contain}
/* Schmale Kacheln bekommen ein flacheres Bild und kleinere Schrift - sonst
   steht ein hohes Bild ueber einer schmalen Spalte. */
.stw-category-tiles--5 .stw-category-tile-picture,
.stw-category-tiles--6 .stw-category-tile-picture{height:150px}
.stw-category-tiles--5 .stw-category-tile-body,
.stw-category-tiles--6 .stw-category-tile-body{padding:11px 12px 14px}
.stw-category-tiles--5 .stw-category-tile-headline,
.stw-category-tiles--6 .stw-category-tile-headline{font-size:15px}
.stw-category-tiles--5 .stw-category-tile-text,
.stw-category-tiles--6 .stw-category-tile-text{font-size:13px;line-height:1.45}
.stw-category-tile-body{display:block;padding:14px 16px 18px}
.stw-category-tile-badge{
  display:inline-block;margin-bottom:8px;padding:2px 9px;border-radius:999px;
  background:#ffce00;color:#171717;font-size:11px;font-weight:600;letter-spacing:.02em
}
.stw-category-tile-headline{display:block;font-size:17px;line-height:1.3;margin-bottom:6px}
.stw-category-tile-text{display:block;font-size:14px;line-height:1.55;color:#444}
.stw-category-tile-text p{margin:0 0 8px}
.stw-category-tile-cta{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:#0066b4}
.stw-category-tile-link:hover .stw-category-tile-cta{text-decoration:underline}
.stw-category-closing{margin-top:clamp(38px,6vw,74px)}
.stw-category-contact{
  margin-top:clamp(38px,6vw,74px);padding:clamp(18px,3vw,28px);background:#f6f6f6;border-radius:8px
}
.stw-category-contact-heading{margin:0 0 8px;font-size:22px}
.stw-category-contact-button{
  display:inline-block;margin-top:12px;padding:11px 20px;border-radius:6px;background:#ffce00;
  color:#171717;font-weight:600;text-decoration:none
}
.stw-category-contact-button:hover{filter:brightness(.95)}
.stw-category-catalog-link,.stw-category-fallback-link{margin-top:28px;font-size:15px}
/* Die Spaltenzahl steht als Angabe am Element (sie kommt aus dem ERP mit dem
   Seiteninhalt). Fuer schmale Bildschirme muss sie hier ueberstimmt werden -
   deshalb !important. */
@media (max-width:1200px){
  .stw-category-tiles--5,.stw-category-tiles--6{
    grid-template-columns:repeat(4,minmax(0,1fr))!important
  }
}
@media (max-width:900px){
  .stw-category-hero{grid-template-columns:1fr}
  .stw-category-tiles--3,.stw-category-tiles--4,
  .stw-category-tiles--5,.stw-category-tiles--6{
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }
  .stw-category-tile-picture{height:180px}
}
@media (max-width:600px){
  .stw-category-shell{width:min(1180px,calc(100% - 20px))}
  .stw-category-tiles{grid-template-columns:1fr!important}
}

/* Ausrichtung: zentriert wie in den bestehenden Uebersichtsseiten */
.stw-category-page--center .stw-category-section-heading{
  display:block;text-align:center;border-bottom:0;padding-bottom:0;margin-bottom:18px
}
.stw-category-page--center .stw-category-subsection .stw-category-section-heading{text-align:center}
.stw-category-page--center .stw-category-tile-body{text-align:center}
.stw-category-page--center .stw-category-tile-text p{margin-left:auto;margin-right:auto}
.stw-category-page--center .stw-category-contact{text-align:center}
.stw-category-page--left .stw-category-tile-body{text-align:left}
.stw-category-tile-image{background:#fff}
.stw-category-tile{display:flex;flex-direction:column}
.stw-category-tile-link{display:flex;flex-direction:column;height:100%}