/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */

/*
 * ============================================================
 * Swiss-Sale.ch – Product, Category & Brand Description CSS
 * Version: 5.3 · Datei umbenannt zu swiss-sale-v5.css am 17.09.2026 (Cache-Busting, Fixes 17.09.)
 *
 * Basis: V3 (funktionierend) + var()-Fallbacks + Bugfixes + Brand Pages
 * Entfernt: kk-revealer overflow-x (verursacht Rendering-Flicker)
 * Breakpoint: 768px (Original, wie V3)
 *
 * JTL-Theme-Variablen (extern definiert, hier referenziert):
 * --brand, --cd-gray, --cd-gray-medium, --cd-gray-light,
 * --cd-gray-dark, --cd-off-white
 * ============================================================ */

@font-face{
  font-family:Montserrat;
  src:url("/templates/swiss_sale5_3/assets/Montserrat/Montserrat-VariableFont_wght.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   1. CSS-VARIABLEN
   ============================================================ */
:root {
  --ss-red-dk:    var(--cd-primary-dark, rgb(159, 0, 9));
  --ss-red:       var(--cd-primary, rgb(205, 0, 12));
  --ss-red-lt:    var(--cd-primary-light, rgb(243, 0, 14));
  --ss-green:     var(--cd-secondary, rgb(142, 180, 109));
  --ss-dark:      var(--cd-gray-dark, rgb(39, 37, 37));
  --ss-gray:      var(--cd-gray, rgb(73, 73, 73));
  --ss-midgray:   var(--cd-gray-medium, rgb(182, 180, 180));
  --ss-lightgray: var(--cd-gray-light, rgb(226, 226, 226));
  --ss-offwhite:  var(--cd-off-white, rgb(247, 246, 246));
  --ss-white:     #FFFFFF;

  /* Aliasse für Rückwärtskompatibilität */
  --dark:         rgb(39, 37, 37);
  --text:         rgb(73, 73, 73);
  --light:        rgb(247, 246, 246);
  --radius:       6px;
  --shadow:       0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.12);
  --max-w:        980px;
}

/* ============================================================
   2. JTL-CONTAINER: Volle Breite erzwingen
   ============================================================ */
.category-description,
#category-description,
.categoryDesc,
.cat-description,
[class*="category"] .description,
.cmsContent,
.cms-content {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ============================================================
   3. LAYOUT-KORREKTUREN
   ============================================================ */

/* Breadcrumb margin entfernen */
body:has(.pd-hero) #bc-w {
  margin-bottom: 0 !important;
}

/* Hero: pl-heading padding entfernen */
.pl-heading:has(.pd-hero) {
  padding: 0 !important;
}

/* Alten JTL-Kategorie/Marken-H1 ausblenden wenn pd-hero vorhanden */
body:has(.pd-hero) #plh h1.title {
  display: none !important;
}

/* ============================================================
   4. HERO
   ============================================================ */
.pd-hero {
  background: var(--ss-dark, rgb(39, 37, 37)) !important;
  background-image:
    linear-gradient(135deg, rgba(205,0,12,0.12) 0%, transparent 60%),
    repeating-linear-gradient(
      -45deg, transparent, transparent 40px,
      rgba(255,255,255,0.015) 40px, rgba(255,255,255,0.015) 80px
    ) !important;
  padding: 56px 40px 52px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}
.pd-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ss-red, rgb(205, 0, 12)) 0%, var(--ss-red-dk, rgb(159, 0, 9)) 100%);
}
.pd-hero-inner {
  max-width: var(--max-w, 980px) !important;
  margin: 0 auto !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
}

/* Eyebrow – einheitlich var(--ss-red) */
.pd-eyebrow,
.pd-eyebrow--cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--ss-red, rgb(205, 0, 12)) !important;
  margin-bottom: 10px !important;
}
.pd-eyebrow--cat::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ss-red, rgb(205, 0, 12));
}

/* Produkt-H1 */
.pd-title {
  font-size: clamp(28px, 5vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--cd-gray, rgb(73, 73, 73));
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 12px !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* Kategorie/Marken-H1 im Hero */
.pd-hero .pd-title--hero,
.pd-hero h1,
.pd-hero h2 {

  font-size: clamp(32px, 5vw, 52px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.5px !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  margin-bottom: 20px !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}
.pd-hero .pd-title--hero span,
.pd-hero h1 span {
  color: var(--ss-red, rgb(205, 0, 12)) !important;
}

/* Subtitle */
.pd-subtitle {
  font-size: 17px !important;
  font-weight: 400 !important;
  color: var(--cd-gray-medium, rgb(182, 180, 180)) !important;
}
.pd-subtitle--hero {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.72) !important;
}

/* ============================================================
   5. FEATURE-GRID
   ============================================================ */

/* Produkt-Version: Icon-Grid */
.pd-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 9px;
  margin: 32px 0 44px;
}
.pd-feature-item {
  background: var(--cd-off-white, rgb(247, 246, 246));
  border: 1px solid var(--cd-gray-light, rgb(226, 226, 226));
  padding: 20px 12px 16px;
  text-align: center;
}
.pd-feature-icon  { font-size: 26px; line-height: 1; margin-bottom: 10px; display: block; }
.pd-feature-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--cd-gray-dark, rgb(39, 37, 37)); line-height: 1.3; }
.pd-feature-sub   { font-size: 11.5px; color: var(--cd-gray, rgb(73, 73, 73)); margin-top: 3px; line-height: 1.4; }

/* Kategorie/Marken-Version: dunkler Hintergrund */
.pd-features-wrap {
  background: var(--ss-dark, rgb(39, 37, 37)) !important;
  padding: 0 40px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.pd-hero + .pd-features-wrap { margin-top: 0 !important; }
.pd-features-wrap .pd-features {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: var(--max-w, 980px) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.pd-features-wrap .pd-feature-item {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  padding: 24px 20px !important;
  text-align: left !important;
  position: relative !important;
}
.pd-features-wrap .pd-feature-item:first-child { background: transparent !important; }
.pd-features-wrap .pd-feature-item:last-child   { border-right: none !important; }
.pd-features-wrap .pd-feature-item:empty        { display: none !important; }
.pd-features-wrap .pd-feature-item::before {
  content: '';
  position: absolute;
  top: 0; left: 20px;
  width: 28px; height: 2px;
  background: var(--ss-red, rgb(205, 0, 12));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.pd-features-wrap .pd-feature-item:hover::before { transform: scaleX(1); }
.pd-features-wrap .pd-feature-item strong {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  margin-bottom: 6px !important;
}
.pd-features-wrap .pd-feature-item p {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.60) !important;
  margin: 0 !important;
}

/* ============================================================
   6. CONTENT WRAP
   ============================================================ */
.pd-content-wrap {
  max-width: var(--max-w, 980px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 48px 40px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
}
.pd-content-wrap h2 {
  font-size: clamp(22px, 3.5vw, 30px) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.2px !important;
  color: var(--ss-dark, rgb(39, 37, 37));
  margin: 48px 0 16px !important;
  padding-bottom: 10px !important;
  border: none !important;
  border-bottom: 2px solid var(--ss-lightgray, rgb(226, 226, 226)) !important;
  position: relative !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}
.pd-content-wrap h2::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important; left: 0 !important;
  width: 48px !important; height: 2px !important;
  background: var(--ss-red, rgb(205, 0, 12)) !important;
}
.pd-content-wrap h2:first-child { margin-top: 0 !important; }
.pd-content-wrap h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  color: var(--ss-gray, rgb(73, 73, 73)) !important;
  margin: 28px 0 10px !important;
  padding: 0 !important;
  border: none !important;
}
.pd-content-wrap p {
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  color: var(--ss-gray, rgb(73, 73, 73)) !important;
  margin-bottom: 14px !important;
}
.pd-content-wrap p:last-child { margin-bottom: 0 !important; }

/* ============================================================
   7. KURZBESCHREIBUNG BOX
   ============================================================ */
.pd-short-desc {
  background: var(--ss-offwhite, rgb(247, 246, 246)) !important;
  border-radius: var(--radius, 6px) !important;
  padding: 24px 28px !important;
  margin-bottom: 40px !important;
  border: 1px solid var(--ss-lightgray, rgb(226, 226, 226)) !important;
}
.pd-short-desc-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--ss-midgray, rgb(182, 180, 180)) !important;
  margin-bottom: 14px !important;
}
.pd-short-desc ul {
  list-style: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px 24px !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 600px) {
  .pd-short-desc ul { grid-template-columns: 1fr !important; }
}
.pd-short-desc li {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  font-size: 14.5px !important;
  color: var(--ss-dark, rgb(39, 37, 37));
  line-height: 1.5 !important;
}
.pd-short-desc li::before {
  content: '—' !important;
  color: var(--ss-red, rgb(205, 0, 12)) !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   8. HIGHLIGHT BOX
   .pd-highlight      → dunkle Box (Produkt & Marke)
   .pd-highlight-info → rote Border-Left-Infobox (Kategorie)
   ============================================================ */
.pd-highlight {
  background: var(--ss-dark, rgb(39, 37, 37)) !important;
  border-radius: var(--radius, 6px) !important;
  padding: 20px 24px !important;
  margin: 24px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Watermark */
.pd-highlight::before {
  content: attr(data-watermark);
  position: absolute;
  right: -10px; top: -10px;
  font-size: 78px; font-weight: 700;
  color: rgba(255,255,255,0.05);
  line-height: 1; pointer-events: none;
  white-space: nowrap;
}
/* Alle Texte hell */
.pd-highlight,
.pd-highlight p,
.pd-highlight * {
  color: rgba(255,255,255,0.90) !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
}
.pd-highlight strong,
.pd-highlight b {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.pd-highlight-label {
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.75) !important;
  margin-bottom: 8px !important;
}
.pd-highlight-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
  color: var(--ss-white, #FFFFFF) !important;
}

/* Kategorie-Infobox – explizite Borders */
.pd-highlight-info {
  background: var(--ss-offwhite, rgb(247, 246, 246)) !important;
  border-radius: var(--radius, 6px) !important;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--ss-dark, rgb(39, 37, 37)) !important;
  border-top: 1px solid var(--ss-lightgray, rgb(226, 226, 226)) !important;
  border-right: 1px solid var(--ss-lightgray, rgb(226, 226, 226)) !important;
  border-bottom: 1px solid var(--ss-lightgray, rgb(226, 226, 226)) !important;
  border-left: 4px solid var(--ss-red, rgb(205, 0, 12)) !important;
}
.pd-highlight-info strong {
  color: var(--ss-red-dk, rgb(159, 0, 9)) !important;
  font-weight: 600 !important;
}

/* ============================================================
   9. STAHL / MATERIAL PROPS (Produkt)
   ============================================================ */
.pd-steel-props {
  display: flex;
  gap: 28px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.pd-steel-prop        { display: flex; align-items: center; gap: 7px; }
.pd-steel-prop-icon   { font-size: 15px; line-height: 1; }
.pd-steel-prop-text   { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ss-white, #FFFFFF); }

/* ============================================================
   10. TARGET GROUP PILLS
   ============================================================ */
.pd-target { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pd-target-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--cd-off-white, rgb(247, 246, 246));
  padding: 8px 16px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--cd-gray-dark, rgb(39, 37, 37));
}
.pd-target-pill span:first-child { font-size: 15px; line-height: 1; }

/* ============================================================
   11. TABELLE
   ============================================================ */
.pd-table-wrap {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  margin: 24px 0 !important;
  padding: 0 !important;
  border-radius: var(--radius, 6px) !important;
  box-shadow: var(--shadow, 0 2px 12px rgba(0,0,0,0.08)) !important;
  border: 1px solid var(--ss-lightgray, rgb(226, 226, 226)) !important;
}
.pd-table-wrap table,
.pd-content-wrap .pd-table {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  font-size: 14.5px !important;
}
/* Header */
.pd-content-wrap table thead,
.pd-content-wrap table thead tr,
.pd-content-wrap .pd-table thead,
.pd-content-wrap .pd-table thead tr {
  background: var(--ss-dark, rgb(39, 37, 37)) !important;
  margin: 0 !important; padding: 0 !important;
}
.pd-content-wrap table thead th,
.pd-content-wrap .pd-table thead th {
  background: var(--ss-dark, rgb(39, 37, 37)) !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 13px 18px !important;
  text-align: left !important;
  border: none !important;
}
/* tbody */
.pd-content-wrap table tbody tr,
.pd-content-wrap .pd-table tbody tr,
.pd-content-wrap table tbody tr:nth-child(even),
.pd-content-wrap table tbody tr:nth-child(odd),
.pd-content-wrap .pd-table tbody tr:nth-child(even),
.pd-content-wrap .pd-table tbody tr:nth-child(odd) {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--ss-lightgray, rgb(226, 226, 226)) !important;
  transition: background 0.15s !important;
}
.pd-content-wrap table tbody tr:hover,
.pd-content-wrap .pd-table tbody tr:hover {
  background-color: var(--ss-offwhite, rgb(247, 246, 246)) !important;
  background: var(--ss-offwhite, rgb(247, 246, 246)) !important;
}
.pd-content-wrap table tbody td,
.pd-content-wrap .pd-table tbody td {
  padding: 12px 18px !important;
  color: var(--ss-dark, rgb(39, 37, 37)) !important;
  vertical-align: middle !important;
  border: none !important;
  border-bottom: 1px solid var(--ss-lightgray, rgb(226, 226, 226)) !important;
  background: transparent !important;
}
.pd-content-wrap table tbody td:first-child,
.pd-content-wrap .pd-table tbody td:first-child { font-weight: 600 !important; }
/* Letzte Zeile: kein Border */
.pd-content-wrap table tbody tr:last-child td,
.pd-content-wrap .pd-table tbody tr:last-child td {
  border-bottom: none !important;
}
/* Preistabelle: letzte Spalte rot (nur mit Modifier-Klasse) */
.pd-table--prices tbody td:last-child {
  font-weight: 700 !important;
  color: var(--ss-red, rgb(205, 0, 12)) !important;
  font-size: 13px !important;
  letter-spacing: 0.3px !important;
}

/* ============================================================
   12. USP-LISTE
   ============================================================ */
.pd-usp-list {
  list-style: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  margin: 20px 0 !important;
  padding: 0 !important;
}
@media (max-width: 600px) {
  .pd-usp-list { grid-template-columns: 1fr !important; }
}
.pd-usp-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  background: var(--ss-offwhite, rgb(247, 246, 246)) !important;
  border-radius: var(--radius, 6px) !important;
  padding: 12px 16px !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: var(--ss-dark, rgb(39, 37, 37));
}
.pd-usp-list li::before {
  content: '✓' !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 20px !important; height: 20px !important;
  background: var(--ss-green, rgb(142, 180, 109)) !important;
  color: var(--ss-white, #FFFFFF) !important;
  border-radius: 50% !important;
  font-size: 11px !important; font-weight: 700 !important;
  margin-top: 1px !important;
}

/* ============================================================
   13. FAQ
   ============================================================ */
.pd-faq-wrap {
  background: var(--ss-offwhite, rgb(247, 246, 246)) !important;
  padding: 48px 40px !important;
  border-top: none !important;
  border-bottom: 1px solid var(--ss-lightgray, rgb(226, 226, 226)) !important;
}
.pd-faq-inner {
  max-width: var(--max-w, 980px) !important;
  margin: 0 auto !important;
  float: none !important;
  clear: both !important;
}
/* FAQ-Titel */
.pd-faq-heading {
  font-size: clamp(22px, 3.5vw, 30px) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.2px !important;
  color: var(--ss-dark, rgb(39, 37, 37));
  margin: 0 0 32px 0 !important;
  padding-bottom: 10px !important;
  border: none !important;
  border-bottom: 2px solid var(--ss-lightgray, rgb(226, 226, 226)) !important;
  position: relative !important;
  display: block !important;
}
.pd-faq-heading::before { display: none !important; }
.pd-faq-heading::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important; left: 0 !important;
  width: 48px !important; height: 2px !important;
  background: var(--ss-red, rgb(205, 0, 12)) !important;
  display: block !important;
  flex: unset !important;
}
.pd-faq-item {
  background: #FFFFFF !important;
  border: 1px solid var(--ss-lightgray, rgb(226, 226, 226)) !important;
  border-radius: var(--radius, 6px) !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s !important;
}
.pd-faq-item:hover { box-shadow: var(--shadow, 0 2px 12px rgba(0,0,0,0.08)) !important; }
.pd-faq-item[open] {
  border-color: var(--ss-red, rgb(205, 0, 12)) !important;
  box-shadow: 0 0 0 1px var(--ss-red, rgb(205, 0, 12)), var(--shadow, 0 2px 12px rgba(0,0,0,0.08)) !important;
}
.pd-faq-q {
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2px !important;
  color: var(--ss-dark, rgb(39, 37, 37)) !important;
  padding: 16px 20px !important;
  cursor: pointer !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  user-select: none !important;
}
.pd-faq-q::-webkit-details-marker { display: none !important; }
.pd-faq-q::after {
  content: '+' !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--ss-red, rgb(205, 0, 12)) !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease !important;
}
details[open] .pd-faq-q::after { transform: rotate(45deg) !important; }
.pd-faq-a {
  padding: 14px 20px 18px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--ss-gray, rgb(73, 73, 73)) !important;
  border-top: 1px solid var(--ss-lightgray, rgb(226, 226, 226)) !important;
}

/* ============================================================
   14. CTA-BAND
   ============================================================ */
.pd-cta-wrap {
  background: linear-gradient(135deg, var(--ss-dark, rgb(39, 37, 37)) 0%, var(--ss-gray, rgb(73, 73, 73)) 100%) !important;
  padding: 48px 40px !important;
  text-align: center !important;
}
.pd-cta-inner {
  max-width: 640px !important;
  margin: 0 auto !important;
  float: none !important;
}
.pd-cta-title {
  font-size: clamp(22px, 4vw, 34px) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--ss-white, #FFFFFF) !important;
  margin-bottom: 12px !important;
}
.pd-cta-sub {
  font-size: 15px !important;
  color: rgba(255,255,255,0.65) !important;
  margin-bottom: 0 !important;
  line-height: 1.65 !important;
}

/* ============================================================
   15. MARKENSEITEN – Brand Logo
   ============================================================ */
.pd-brand-logo {
  position: absolute;
  top: 32px;
  right: 40px;
  z-index: 10;
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.pd-brand-logo img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  width: auto !important;
  height: auto !important;
}

/* H1 + Subtitle: Platz für Logo rechts */
.pd-hero:has(.pd-brand-logo) .pd-hero-inner h1,
.pd-hero:has(.pd-brand-logo) .pd-hero-inner .pd-title--hero {
  padding-right: 140px !important;
}
.pd-hero:has(.pd-brand-logo) .pd-hero-inner .pd-subtitle--hero {
  padding-right: 140px !important;
}

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .pd-content-wrap  { padding: 36px 16px !important; }
  .pd-hero          { padding: 40px 16px 36px !important; }
  .pd-features-wrap { padding: 0 !important; }
  .pd-faq-wrap      { padding: 36px 16px !important; }
  .pd-cta-wrap      { padding: 36px 16px !important; }
  .pd-highlight     { padding: 16px 16px !important; }
  .pd-short-desc    { padding: 16px 16px !important; }
  .pd-short-desc ul { grid-template-columns: 1fr !important; }
  .pd-usp-list      { grid-template-columns: 1fr !important; }

  /* Feature-Items: 1 Spalte */
  .pd-features-wrap .pd-features {
    grid-template-columns: 1fr !important;
  }
  .pd-features-wrap .pd-feature-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 20px 16px !important;
  }
  .pd-features-wrap .pd-feature-item:last-child {
    border-bottom: none !important;
  }

  /* Brand Logo */
  .pd-brand-logo {
    width: 72px;
    height: 72px;
    top: 20px;
    right: 16px;
    padding: 8px;
  }
  .pd-hero:has(.pd-brand-logo) .pd-hero-inner h1,
  .pd-hero:has(.pd-brand-logo) .pd-hero-inner .pd-title--hero,
  .pd-hero:has(.pd-brand-logo) .pd-hero-inner .pd-subtitle--hero {
    padding-right: 90px !important;
  }
}

/* ============================================================
   17. HEADER ANPASSUNGEN
   ============================================================ */
@media (max-width: 991px) {
    #cd-header-usps {
        justify-content: center;
        width: 100%;
    }
}

@media (min-width: 991px) and (max-width: 1430px) {
    #cd-super-header {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto !important;
    }
    #cd-header-usps {
        grid-column: 1;
        grid-row: 1;
    }
    #cd-topbar-menu {
        grid-column: 2;
        grid-row: 1;
        flex-wrap: nowrap;
    }
    .cd-header-usp {
        white-space: nowrap;
        font-size: 0.8em;
    }
}

/* ============================================================
   BLOG DETAIL – Full-Width Sections (wie Kategorie/Marke)
   ============================================================ */

/* Parent-Container auf volle Breite (wie .category-description) */
body:has(#nw-ct .pd-hero) #content > .container,
body:has(#nw-ct .pd-hero) #content > .container-fluid,
body:has(#nw-ct .pd-hero) #content > div > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Article & Content-Wrapper: volle Breite, kein Padding */
body:has(#nw-ct .pd-hero) article,
#nw-ct,
#nw-ct > .mb-sm {
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Breadcrumb-Margin entfernen wenn Hero vorhanden */
body:has(#nw-ct .pd-hero) #bc-w {
  margin-bottom: 0 !important;
}

/* Hero direkt an Features anschliessen */
#nw-ct .pd-hero + .pd-features-wrap {
  margin-top: 0 !important;
}

/* Subcats (Kategorie-Links) zentrieren */
#nw-ct .newscats {
  max-width: var(--max-w, 980px);
  margin-left: auto;
  margin-right: auto;
  padding: 0 40px;
}

/* Highlight-Box im Blog: auf Content-Breite begrenzen */
#nw-ct .pd-highlight {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* ============================================================
   BLOG – Related Links (cp-related)
   ============================================================ */
#nw-ct .cp-related {
  max-width: 900px !important;
  margin: 48px auto 0 !important;
  padding: 32px 0 !important;
  box-sizing: border-box !important;
}

/* Titel: gleicher Stil wie pd-content-wrap h2 */
#nw-ct .cp-related-title {
  font-size: clamp(22px, 3.5vw, 30px) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.2px !important;
  color: var(--ss-dark, rgb(39, 37, 37)) !important;
  margin: 0 0 20px 0 !important;
  padding-bottom: 10px !important;
  border: none !important;
  border-bottom: 2px solid var(--ss-lightgray, rgb(226, 226, 226)) !important;
  position: relative !important;
}
#nw-ct .cp-related-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 48px !important;
  height: 2px !important;
  background: var(--ss-red, rgb(205, 0, 12)) !important;
}

/* Karten-Grid */
#nw-ct .cp-related-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

/* Einzelne Karte */
#nw-ct .cp-related-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: var(--ss-white, #FFFFFF) !important;
  border: 1px solid var(--ss-lightgray, rgb(226, 226, 226)) !important;
  border-radius: var(--radius, 6px) !important;
  padding: 16px 20px !important;
  text-decoration: none !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
}
#nw-ct .cp-related-card:hover {
  border-color: var(--ss-red, rgb(205, 0, 12)) !important;
  box-shadow: var(--shadow, 0 2px 12px rgba(0,0,0,0.08)) !important;
}

/* Karten-Titel */
#nw-ct .cp-related-card strong,
#nw-ct .cp-related-card span:not(.cp-related-card-desc) {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--ss-dark, rgb(39, 37, 37)) !important;
}

/* Beschreibung */
#nw-ct .cp-related-card-desc {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--ss-gray, rgb(73, 73, 73)) !important;
  margin-top: 3px !important;
}

/* Einzelne Karte */
#nw-ct .cp-related-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  background: var(--ss-white, #FFFFFF) !important;
  border: 1px solid var(--ss-lightgray, rgb(226, 226, 226)) !important;
  border-radius: var(--radius, 6px) !important;
  padding: 16px 20px !important;
  text-decoration: none !important;
  position: relative !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
}
#nw-ct .cp-related-card:hover {
  border-color: var(--ss-red, rgb(205, 0, 12)) !important;
  box-shadow: var(--shadow, 0 2px 12px rgba(0,0,0,0.08)) !important;
}

/* Pfeil rechts oben */
#nw-ct .cp-related-card::after {
  content: '›' !important;
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  font-size: 20px !important;
  color: var(--ss-red, rgb(205, 0, 12)) !important;
}

#nw-ct .pd-content-wrap + .cp-related {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Responsive: 1 Spalte */
@media (max-width: 768px) {
  #nw-ct .cp-related-grid {
    grid-template-columns: 1fr !important;
  }
  #nw-ct .cp-related {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* CLS-Fix: kk-revealer (Dropper-Plugin) Vor-Init-Höhe festlegen */
.kk-revealer:not(.revealed):not(.unrevealable):not(.kk-revealer-animating) > .kk-revealer-content {
    max-height: 500px;
    overflow: hidden;
}

/* ===== ProvenExpert Trust-Sektion – Konzept B (mit Kompetenz-Leiste + Zitat-Slider) =====
   Ersetzt die bisherige pe-* Sektion in swiss-sale-v4.css vollständig.
   Farben dezent gehalten – an deine CI anpassbar.
========================================================================================= */

.pe-trust {
    display: flex;
    flex-direction: column;
    max-width: 960px;
    margin: 2.5rem auto;
    padding: 1.75rem 2rem;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    min-height: 150px;            /* CLS-Schutz */
    box-sizing: border-box;
}

/* ----- obere Reihe: Score | Zitat ----- */
.pe-trust__main {
    display: flex;
    gap: 2rem;
    align-items: center;
}

/* ----- linker Score-Block ----- */
.pe-trust__score {
    flex: 0 0 200px;
    text-align: center;
    border-right: 1px solid #ececec;
    padding-right: 2rem;
}
.pe-trust__value {
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1;
    color: #1a1a1a;
}
.pe-trust__value span {
    font-size: 1rem;
    font-weight: 400;
    color: #888;
    margin-left: 2px;
}
.pe-stars {
    position: relative;
    display: inline-block;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 2px;
    margin: 8px 0 6px;
}
.pe-stars__bg { color: #d9d9d9; }
.pe-stars__fg {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--pe-fill);
    overflow: hidden;
    white-space: nowrap;
    color: #e6a817;
}
.pe-trust__count {
    font-size: 0.8rem;
    color: #666;
}
.pe-trust__brand {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.72rem;
    color: #999;
    text-decoration: none;
}
.pe-trust__brand:hover { text-decoration: underline; }

/* ----- rechte Kundenstimme / Slider ----- */
.pe-trust__quote {
    position: relative;
    flex: 1;
    margin: 0;
    min-width: 0;
}
.pe-trust__quote-text {
    margin: 0 0 8px;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #2a2a2a;
    /* auf max. 3 Zeilen begrenzen -> konstante Folienhöhe */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pe-trust__quote-meta {
    font-size: 0.78rem;
    color: #999;
}

/* eine einzelne Stimme: statisch, kein Slider */
.pe-trust__quote--n1 .pe-quote { position: static; opacity: 1; }

/* Slider ab 2 Stimmen: Folien übereinander, feste Höhe, sanftes Überblenden.
   min-height an die längste Stimme anpassbar. */
.pe-trust__quote--n2,
.pe-trust__quote--n3 {
    min-height: 6.5em;
}
.pe-trust__quote--n2 .pe-quote,
.pe-trust__quote--n3 .pe-quote {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* 2 Folien: 12s Zyklus (je 6s) */
.pe-trust__quote--n2 .pe-quote { animation-name: peFade2; animation-duration: 12s; }
.pe-trust__quote--n2 .pe-quote:nth-child(2) { animation-delay: 6s; }
@keyframes peFade2 {
    0%, 50%, 100% { opacity: 0; }
    4%, 46%       { opacity: 1; }
}

/* 3 Folien: 18s Zyklus (je 6s) */
.pe-trust__quote--n3 .pe-quote { animation-name: peFade3; animation-duration: 18s; }
.pe-trust__quote--n3 .pe-quote:nth-child(2) { animation-delay: 6s; }
.pe-trust__quote--n3 .pe-quote:nth-child(3) { animation-delay: 12s; }
@keyframes peFade3 {
    0%, 33.34%, 100% { opacity: 0; }
    3%, 30%          { opacity: 1; }
}

/* Barrierefreiheit: keine Bewegung -> nur die erste Stimme, statisch */
@media (prefers-reduced-motion: reduce) {
    .pe-trust__quote--n2,
    .pe-trust__quote--n3 { min-height: 0; }
    .pe-trust__quote .pe-quote { animation: none; position: static; }
    .pe-trust__quote .pe-quote:not(:first-child) { display: none; }
    .pe-trust__quote .pe-quote:first-child { opacity: 1; }
}

/* ----- untere Kompetenz-Leiste ----- */
.pe-trust__competences {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid #ececec;
    font-size: 0.82rem;
    color: #555;
}
.pe-trust__comp-label {
    font-weight: 600;
    color: #333;
}
.pe-comp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pe-comp__check {
    color: #1d9e75;
    font-weight: 700;
}
.pe-comp__val { color: #999; }

/* ----- Mobile ----- */
@media (max-width: 640px) {
    .pe-trust {
        min-height: 0;
        padding: 1.5rem;
    }
    .pe-trust__main {
        flex-direction: column;
        gap: 1.25rem;
        text-align: center;
    }
    .pe-trust__score {
        flex-basis: auto;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ececec;
        padding-right: 0;
        padding-bottom: 1.25rem;
    }
    .pe-trust__competences {
        justify-content: center;
    }

    /* Mobile: kein Slider – nur die erste Stimme, statisch */
    .pe-trust__quote--n2,
    .pe-trust__quote--n3 {
        min-height: 0;
    }
    .pe-trust__quote .pe-quote {
        position: static;
        animation: none;
    }
    .pe-trust__quote .pe-quote:not(:first-child) {
        display: none;
    }
    .pe-trust__quote .pe-quote:first-child {
        opacity: 1;
    }
}

@media (min-width: 992px) {
    li.dropdown-style:last-child > ul.dropdown-menu {
        left: auto !important;
        right: 0 !important;
    }
}

/* =====================================================================
   Swiss-Sale.ch — Performance-Fixes, Teil 2: CSS
   ---------------------------------------------------------------------
   Einbauort: ans Ende von
              templates/swiss_sale5_3/css/swiss-sale-v4.css

   Alle Werte unten wurden am 9.8.2026 live auf swiss-sale.ch gemessen,
   nicht geschätzt.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1) Header-Video
   ---------------------------------------------------------------------
   ENTWARNUNG — nachgemessen: hier ist NICHTS zu tun.

   Das Theme reserviert den Platz bereits:
       .cd-section-hero .cd-video-container { height:35vh; }
       .cd-section-hero .cd-video-container video {
           height:100%; width:100%; object-fit:cover;
       }

   Damit steht die Höhe fest, bevor irgendetwas geladen ist. Ein
   aspect-ratio wäre hier sogar schädlich, weil es die 35vh überschreibt
   und das Layout verändern würde.

   Das Video ist also KEINE CLS-Ursache — bei ihm geht es ausschliesslich
   um Datenmenge und LCP (siehe Doku Punkt 3).

   Einzige sinnvolle Ergänzung: eine dunkle Platzhalterfarbe, damit die
   Fläche nicht weiss blitzt, bis das Poster da ist.
   --------------------------------------------------------------------- */
.cd-section-hero .cd-video-container{
  background:#14181a;
}


/* ---------------------------------------------------------------------
   2) Mega-Menü: Höhe der Navigationsleiste fixieren
   GTmetrix meldet einen Shift von 0.09 auf li.mgm-fw.dropdown-style.
   Gemessene Ist-Höhe: 37 px.
   --------------------------------------------------------------------- */
ul.blanklist.flx-w{ min-height:37px; }
ul.blanklist.flx-w > li.mgm-fw{ min-height:37px; }


/* ---------------------------------------------------------------------
   3) Nicht-komponierte Animationen entfernen
   GTmetrix: "47 animated elements — Unsupported CSS Property: visibility".

   Ursache gefunden: die Regel
       .btn, .modal-dialog .answer > a, #amazonpayments .lpa-cancel a,
       .consent-btn { transition: .3s; }
   Die Kurzschreibweise bedeutet transition-property: all — damit wird
   auch visibility animiert, und visibility läuft nicht auf der GPU.

   Fix: dieselben Übergänge, aber nur auf Eigenschaften, die sich
   komponieren lassen. Optisch identisch.
   --------------------------------------------------------------------- */
.btn,
.modal-dialog .answer > a,
#amazonpayments .lpa-cancel a,
.consent-btn{
  transition:color .3s ease,
             background-color .3s ease,
             border-color .3s ease,
             box-shadow .3s ease,
             opacity .3s ease,
             transform .3s ease;
}
#consent-settings-btn{
  transition:color .2s ease,
             background-color .2s ease,
             border-color .2s ease,
             box-shadow .2s ease,
             opacity .2s ease;
}


/* ---------------------------------------------------------------------
   4) OPC-Bilder: Seitenverhältnis reservieren
   ---------------------------------------------------------------------
   WICHTIG — geprüft: Produktkacheln brauchen NICHTS. Das Theme reserviert
   dort bereits Platz über .img-ct::before{padding-top:100%} (1:1). Bitte
   nicht zusätzlich anfassen.

   Handlungsbedarf besteht nur bei den OPC-Elementen. Die Klasse
   "img-aspect-ratio" im Markup hat keinerlei CSS hinterlegt — sie ist
   eine reine Marker-Klasse ohne Wirkung. Die Höhe entsteht also erst
   beim Laden des Bildes.

   Gemessen:
     .cd-advantage-image     480 x 345  = 1.39 : 1  (Bild 562 x 403)
     .cd-hover-panel-image   variabel (Grid, je Panel unterschiedlich)
     .cd-about-image         800 x 553  = 1.45 : 1  (Bild 1020 x 1037)

   Nur der eindeutige Fall ist unten gesetzt. Für die anderen beiden ist
   width/height im Markup der richtige Weg (siehe Doku Punkt 4a) — ein
   pauschales aspect-ratio würde dort Bilder beschneiden.
   --------------------------------------------------------------------- */
.cd-section-advantages .cd-advantage-image{
  aspect-ratio:562 / 403;
  overflow:hidden;
}
.cd-section-advantages .cd-advantage-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ---------------------------------------------------------------------
   5) Markenliste im Menü: Rendering-Kosten sparen
   ul.dropdown-menu.keepopen hat 101 Kindelemente, steht auf
   display:block und wird deshalb bei jedem Layout mitgerechnet — einer
   der Haupttreiber der 3'555 DOM-Elemente und der 514 ms Style & Layout.
   content-visibility überspringt Layout und Paint, solange die Liste
   ausserhalb des Viewports liegt.

   >>> Im Testsystem prüfen: Menü "Unsere Marken" öffnen, scrollen,
       Position der Liste kontrollieren. Falls es springt: Regel
       entfernen und stattdessen die Liste per AJAX nachladen.
   --------------------------------------------------------------------- */
ul.dropdown-menu.keepopen{
  content-visibility:auto;
  contain-intrinsic-size:auto 600px;
}


/* ---------------------------------------------------------------------
   6) Hinweis zu #bms
   #bms liegt mit ~28 KB Markup auf jeder Seite im DOM und ist über
   "#bms{display:none}" nur versteckt. Per CSS ist hier nichts zu holen —
   der Container muss serverseitig weg (siehe Doku Punkt 1c).
   --------------------------------------------------------------------- */

/* ==========================================================================
   Fix 17.09.2026 — Topbar in der Mobil-Variante auf Tablets ab 992 px
   Snackys liefert Android-Tablets das Smartphone-Markup (#cd-mobile-slider mit Slick).
   In einem Grid mit fr-Spalten (minmax(auto,1fr)) zwingt der Slick-Track die Spalte auf
   Track-Breite (gemessen 267'883 px) — USPs und Topbar-Menü landen ausserhalb des Bildschirms.
   min-width:0 erlaubt den Grid-Kindern zu schrumpfen; für body.mobile eigene 2-Spalten-Zuweisung.
   ========================================================================== */
@media (min-width: 992px) {
  #cd-super-header > * { min-width: 0; }
  body.mobile #cd-super-header { grid-template-columns: minmax(0, 1fr) auto; }
  body.mobile #cd-super-header #cd-mobile-slider { grid-column: 1; grid-row: 1; overflow: hidden; }
  body.mobile #cd-super-header #cd-topbar-menu { grid-column: 2; grid-row: 1; }
}

/* Pfeile der Hauptnavigation in der Mobil-/Tablet-Variante (.ar statt .caret) weiss statt grau */
@media (min-width: 768px) {
  #cat-w .blanklist > .mgm-fw > .mm-mainlink > .ar-r { border-color: #fff; }
}


/* Fix 17.09.2026 — horizontaler Scrollbalken zwischen 768 und ~1'100 px:
   Snackys versteckt die Hover-Dropdowns der Hauptnavigation per transform: translateY(-2000%).
   Transformierte Boxen zählen weiter zur Scrollbreite; steht «Unsere Marken» als letzter Punkt rechts,
   ragt sein 288 px breites Menü über den Viewport und erzeugt die Scrollleiste (gemessen 30–45 px).
   1) Markenmenü am rechten Rand seines Menüpunkts verankern, damit es nach links aufklappt.
   2) Horizontales Überlaufen der Seite unterbinden — Snackys macht dasselbe mobil via #main-wrapper. */
@media (min-width: 768px) {
  #cat-ul .mm-mainlink[href*="marken"] + .dropdown-menu,
  #cat-ul .mm-mainlink[href*="brand"] + .dropdown-menu,
  #cat-ul .mm-mainlink[href*="marque"] + .dropdown-menu { left: auto; right: 0; }
  html { overflow-x: clip; }
  /* Touch-Browser ignorieren overflow auf html beim Wischen — deshalb zusätzlich die Navigation selbst:
     clip erzeugt keinen Scroll-Container, Sticky bleibt erhalten, nur der Teil eines Dropdowns
     ausserhalb des Viewports wird abgeschnitten. */
  #cat-w { overflow-x: clip; }
}

/* Fix 17.09.2026 — Markenmenü in der Smartphone-Variante auf Tablets:
   Die Desktop-Variante gibt dem Markenmenü die Klassen «dropdown-manu first» (absolutes Overlay), die
   Smartphone-Variante nicht — Snackys behandelt es dort wie ein Untermenü der Off-Canvas-Navigation
   (position: static, im Fluss, die rote Leiste dehnt sich mit). Ab 768 px wie am Desktop als Overlay
   unter dem Menüpunkt darstellen; das Ein-/Ausblenden per Tap (display) bleibt Snackys überlassen. */
@media (min-width: 768px) {
  body.mobile #cat-ul > li.dropdown-style > .mm-mainlink[href*="marken"] + .dropdown-menu:not(.first),
  body.mobile #cat-ul > li.dropdown-style > .mm-mainlink[href*="brand"] + .dropdown-menu:not(.first),
  body.mobile #cat-ul > li.dropdown-style > .mm-mainlink[href*="marque"] + .dropdown-menu:not(.first) {
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    z-index: 12;
    min-width: 12rem;
    max-width: 18rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: 1rem 0;
    font-size: 0.95rem;
    background: var(--meg-b);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
    border-radius: 0 0 0.3rem 0.3rem;
    transform: none; /* Snackys' translateY(-2000%) gilt für Hover-Menüs; hier steuert display den Zustand */
    transition: none;
  }
}

/* Fix 17.09.2026 — Slider-Pfeile zwischen 992 und 1008 px:
   layout/header.tpl (Block head-resources) setzt ab 992 px --cd-content-width auf 960 px. Die 24 px breiten Slick-Pfeile der
   OPC-Produktslider sitzen ausserhalb des Inhaltsrahmens; bei Viewports unter 1008 px bleiben ihnen
   weniger als 24 px Rand, und sie ragen bis 8 px über den Viewport (Restüberlauf, auf Touch-Geräten
   wischbar, z. B. Galaxy Tab S6 Lite quer mit 1000 px). Im Band 992–1008 px die Inhaltsbreite wie
   unter 992 px vom Viewport ableiten, damit beidseitig 24 px Rand bleiben. */
@media (min-width: 992px) and (max-width: 1008px) {
  :root { --cd-content-width: calc(100vw - 48px); }
}