/* ============================================================================
   careshop – PRODUCTDETAILS (laedt nur auf der Artikel-Detailseite,
   via Child layout/header.tpl, Bedingung $Artikel).
   Ersetzt den Backend-Tab "Productdetails". Plain-CSS (kein SCSS!).
   ============================================================================ */


/* === Produktseite: Ueberschrift, Tabs, Preisfarbe ======================== */
/* Titel responsiv: skaliert mit der Breite, damit lange Woerter OHNE Silbentrennung
   reinpassen (clamp: min fuer kleinste Screens, vw-Vorzug skaliert mit, max wie zuvor). */
.product-headline h1 { font-size: clamp(1.5rem, 7.5vw, 2.3rem); line-height: 1.2; }

/* Marken-Logo IMMER (auch Desktop) oben rechts neben die Bewertungssterne setzen.
   Der Titel laeuft so ueber die volle Spaltenbreite -> kein Ueberlauf neben dem Logo
   (sonst drueckt der lange, nicht trennbare Titel das Logo nach rechts raus). */
.product-info-inner { position: relative; }
/* TOT seit Variante D/H1 (2026-07-19) - ENTFERNT.
   .manufacturer-logo und .rating-wrapper entstehen nicht mehr: details.tpl
   ueberschreibt die Bloecke 'productdetails-info-product-brand-logo' und
   'productdetails-info-rating-wrapper' leer, beide Inhalte stehen jetzt in
   .cs-phead (Abschnitt "Kopfzeile H1" weiter unten). Die frueheren Regeln
   (Logo absolut oben rechts, rating-wrapper mit min-height:62px, 15px-Sterne)
   liefen ins Leere. Die 62px waren keine CLS-Reservierung, sondern hielten
   nur das alte Logo-Niveau - .cs-phead hat eine feste Zeilenhoehe. */

.productdetails-tabs {
    background-color: #cbd8a6;
    margin-left: 0; margin-right: 0;
    padding-left: 20px;
    border-radius: 5px;
}
.productdetails-tabs .nav-link.active { color: #000; border-color: #000; }
.productdetails-tabs .nav-link:hover  { color: #000; }

.product-info .price { color: #8da174; }

/* Preis als Link zur Zusammenfassung + Flash-Highlight der Zusammenfassung */
.productdetails-fixed-form .productdetails-fixed-form__price.cfg-summary-link,
.product-info .price_wrapper.cfg-summary-link { cursor: pointer; }
.productdetails-fixed-form .productdetails-fixed-form__price.cfg-summary-link:hover,
.product-info .price_wrapper.cfg-summary-link:hover { opacity: .85; text-decoration: underline; text-underline-offset: 2px; }
#product-configuration-sidebar.cfg-summary-flash { animation: cfgSummaryFlash 1.4s ease-in-out; }
@keyframes cfgSummaryFlash { 0%,100% { box-shadow: none; } 25%,60% { box-shadow: 0 0 0 3px rgba(40,167,69,.55); } }


/* === Produktgalerie: Sticky-Offset (Desktop) ============================= */
@media (min-width: 1031px) {
  .productdetails-gallery { top: 70px !important; }
}


/* === Konfigurator: Grundlayout =========================================== */
#product-configurator > h2 { font-size: 2.1rem; }
#product-configuration-sidebar > div > div.panel-heading > div { font-size: 1.8rem; }
.hr-sect2.h3 { font-size: 1.8rem; }

#cfg-container .hr-sect2 {
    text-align: initial;
    background: #f8f8f8;
    border-top: 0; border-bottom: 0;
    border-radius: 12px;
    margin-top: -20px !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding: 15px 10px 0px 25px !important;
}
#cfg-container .card-body .opc-area { background-color: #fff; }
#cfg-container .kk-image-banner .kk-image-banner-img.kk-image-banner-mode-auto { border-radius: 11px; }

.btn.btn-secondary.start-configuration { padding-right: 15px; padding-bottom: 15px; }

/* schmalere Innenabstaende der Schritt-Spalte */
#cfg-container > [class*="col"]:has(.cfg-group) { padding-left: 4px !important; padding-right: 4px !important; }
/* Schritt-Spalte WEISS (Nutzerwunsch: der Spalt/Zwischenraum soll weiss sein, NICHT
   durch weniger Abstand geschlossen). So ist jeder Zwischenraum zwischen den Karten
   UND jeder Durchscheiner hinter dem klebenden Schritt-Kopf weiss statt grau. */
#cfg-container > [class*="col"]:has(.cfg-group),
#cfg-container .cfg-group-list-wrapper { background: #fff; }


/* === Konfigurator: Gruppen / Akkordeon (inkl. Safari-13-Fallbacks) ======= */
.noborder { border: none; background: transparent; }

.cfg-group-list-wrapper.stack {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal;
      -ms-flex-direction: column; flex-direction: column;
}
.cfg-group-list-wrapper.stack > * + * { margin-top: 1rem; }

.cfg-group.card { position: relative; margin-bottom: 1rem; border-radius: 12px; background-color: #f9f9f9; }
.cfg-group:hover { background-color: #f3f3f3; }
#product-configuration-sidebar .cfg-group { font-weight: 600; }

.cfg-toggle-btn {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  padding: 1rem 12px;
  width: 100%; font-size: 1.1rem; font-weight: 600;
  background: transparent; border: none; text-align: left;
  border-radius: 1.5rem; cursor: pointer;
  -webkit-transition: background-color .2s ease; transition: background-color .2s ease;
}
.cfg-toggle-btn:hover { background-color: #eef3e3; }
.cfg-toggle-btn .cfg-icon i { -webkit-transition: -webkit-transform .3s ease; transition: transform .3s ease; }
.cfg-toggle-btn[aria-expanded="true"] .cfg-icon i { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.cfg-group .card:not(.card-products) .card-header .btn { background: #fff; width: 100%; padding-top: 3px; padding-bottom: 3px; }

.padding20 { padding-left: 4px; padding-right: 4px; padding-bottom: 10px; }
/* KEIN Struktur-Padding über der gelben "Bitte wählen"-Leiste: sie dockt flush
   an den Schritt-Kopf an (eine Einheit); ihr eigener margin-bottom macht die Luft. */
#cfg-container .cfg-group .padding20 { padding-top: 0; }

.cfg-item-description-description { padding-left: 20px; }
.cfg-summary-item { line-height: 1.2rem; }
.group-description { margin-top: -30px; padding-left: 26px; padding-bottom: 15px; }

/* Info-Bild-Thumbnail UNTER dem Namen, am Anfang der Beschreibungszeile
   (js/infoglossar.js -> .csg-thumb im <dd>). Look wie Optionen mit Artikelbild:
   Name oben, rechteckiges Bild links (moeglichst gross), Kurztext RECHTS daneben
   eingerueckt (KEIN flex-wrap -> Text rutscht nicht unter das Bild). Bild zeigt das
   ganze (rechteckige) Motiv (object-fit:contain). Klickbar -> Modal (zoom-in). */
#cfg-container .config-item dd:has(> .csg-thumb) {
  display: flex; align-items: center; gap: 14px;   /* vertikal mittig zum Bild, dichter dran */
}
#cfg-container .config-item dd:has(> .csg-thumb) .cfg-item-description-description {
  padding-left: 0;                                  /* die 20px Extra-Einrueckung neben dem Bild weg */
}
#cfg-container .csg-thumb {
  flex: 0 0 auto;
  height: 90px; width: auto; max-width: 44%;
  margin-left: 1.5rem;               /* = Checkbox-Einzug -> Bild fluchtet mit dem Namen */
  object-fit: contain; background: #fff;
  border: 1px solid #e7ebe0; border-radius: 12px; padding: 4px;
  cursor: zoom-in;
  -webkit-transition: box-shadow .15s ease, border-color .15s ease;
          transition: box-shadow .15s ease, border-color .15s ease;
}
#cfg-container .csg-thumb:hover { border-color: #cbd8a6; box-shadow: 0 3px 10px rgba(47,62,70,.14); }
#cfg-container .config-item dd:has(> .csg-thumb) > :not(.csg-thumb) { flex: 1 1 auto; min-width: 0; }
@media (max-width: 575.98px) {   /* mobil: wie Desktop (Bild links, Beschreibung rechts daneben), nur kleiner */
  #cfg-container .csg-thumb { height: 70px; }
}


/* === Konfigurator: Options-Box (.config-item) ============================ */
.config-item {
  box-sizing: border-box; border: 1px solid transparent; position: relative;
  transition: border-color .2s ease, background-color .2s ease, opacity .2s ease;
  padding-top: .5rem; padding-bottom: .5rem;
  padding-left: 8px; padding-right: 8px;
  z-index: 1;
}
/* Werte = finale Auswahl-Optik (identisch zum Variante-D-Block unten, der via
   .config-item-list gewinnt) — hier nur als Fallback, damit es EINE Design-Wahrheit gibt. */
.config-item.active {
  border: 2px solid #7a9a4e !important; border-radius: 16px;
  background-color: #eaf1dc; box-sizing: border-box; z-index: 2;
}
/* (padding der Checkbox-Optionen: siehe .config-item--custom-input im Variante-D-Block, 8/14px) */

/* Haken-Icon auf aktiver Option */
.config-item.active::after {
  content: "\2713"; font-family: sans-serif; position: absolute;
  top: .75rem; right: .75rem; font-size: 1.1rem; color: #7a9a4e;
}

/* kleinere Abstaende bei aktiver/gewaehlter Option */
#cfg-container .config-item.active,
#cfg-container .config-item:has(input:checked) { margin: 6px 0; }

/* (Entfernt 2026-07-25, Nutzerwunsch: nicht gewaehlte Optionen NICHT mehr ausgrauen.
   Frueher: .config-item:not(:has(input:checked)) { opacity:.8 }) */

/* leere Beschreibung ausblenden */
#cfg-container .config-item .config-item__description:empty { display: none; }


/* === Konfigurator: Options-Kopf (Name links / Preis eigene Zeile rechts) = */
#cfg-container .config-item dl {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "name" "price" "desc";
  column-gap: 14px; row-gap: 2px;
  align-items: start; margin-bottom: 0;
}
#cfg-container .config-item dt { display: contents; }
#cfg-container .config-item dt .custom-control.custom-control-inline {
  grid-area: name; display: block; width: auto; min-width: 0; margin: 0;
}
#cfg-container .config-item dt .custom-control { position: relative; top: 6px; }
#cfg-container .config-item dt .custom-control-label {
  display: inline; line-height: 1.45; overflow-wrap: break-word; word-break: normal;
}
#cfg-container .config-item dt .cfg-item-badge-slot { grid-area: name; }
#cfg-container .config-item dt .cfg-item-badge-slot:empty { display: none; }
#cfg-container .config-item dt .badge.badge-light {
  grid-area: price; justify-self: end !important; align-self: start;
  margin: 3px 0 0 !important; white-space: nowrap;
}
#cfg-container .config-item dd.config-item__description { grid-area: desc; margin: 2px 0 0; }

#cfg-container .badge-light { background: 0 0; border: none; font-size: 1.05rem; color: #46591f; }


/* === Konfigurator: empfohlene Option (WaWi "empfohlen") ================== */
#cfg-container .config-item.bg-recommendation:not(.active) {
  background: #fff !important;                 /* dezent: kein grüner Fill (das ist die Auswahlfarbe) */
  border: 1px solid #dbe6bf !important;        /* nur zarter soft-grüner Rahmen; Signal = das Badge */
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 10px 8px !important;
  margin: 4px 0 !important;
}


/* === Konfigurator: Hinweis "Bitte waehlen" ===============================
   Schmale, VOLLE-BREITE Leiste, die MIT dem Sticky-Schritt-Kopf mitklebt (sticky
   direkt darunter). Farbe = Variante 3: Creme + goldener Links-Akzent (CI-Gold).
   Verschwindet über die ganze Breite, sobald im Schritt etwas gewählt ist (unten). */
/* z-index muss GENAU zwischen Optionen (z1) und Schritt-Kopf (z20) liegen:
   - ÜBER den Optionen (z1), sonst legen die sich beim Scrollen über die klebende
     gelbe Leiste ("läuft unter die Auswahlpunkte").
   - UNTER dem Kopf (z20), sonst fährt die Leiste beim Weiterscrollen ÜBER den
     nächsten Schritt-Kopf (Bild 1) bzw. ragt hinter ihm hervor (Bild 2).
   Früher: z-index:unset !important -> Radio-Schritte auf z-auto (hinter Kopf),
   Select-Sonderregel z21 -> über Kopf. Beides falsch. Jetzt einheitlich z15. */
.cfg-group-info { z-index: 15 !important; }   /* (einzige z-index-Quelle, s. Kommentar oben) */
#cfg-container .cfg-group-info {
  /* NICHT mehr sticky (Nutzerwunsch 2026-07-12): seit die "Schritt für Schritt"-
     Toggle-Pille selbst sticky ist (z30, 62-128px), klebte die "Bitte wählen"-Leiste
     (fruehere top var+56=115) dahinter und wurde von der Pille angeschnitten. Jetzt
     scrollt sie normal mit dem Schritt und laeuft sauber unter die Pille. */
  position: static !important;
  /* KARTENBREIT (aus dem Collapse-Padding ausbrechen, -5px je Seite) -> wirkt als
     EINE Einheit mit dem Kopf, nicht als eigenständige Pille. */
  margin: 0 -5px 10px -5px; padding: 0; text-align: left;
}
#cfg-container .cfg-group-info .badge,
#cfg-container .cfg-group-info .badge-info {
  display: block; width: auto; box-sizing: border-box;
  background: #fff8e6; color: #7a5a12;
  border: 0; border-left: 4px solid #e8a200;
  border-radius: 0 0 14px 14px;                            /* OBEN eckig (an den Kopf angedockt), unten gerundet */
  font-weight: 600; font-size: 13px; letter-spacing: normal;
  padding: 8px 18px; text-align: left;
}
/* Sobald der Schritt fertig ist (Badge = alert-success, gilt für Radio UND Select
   UND erfüllte optionale Schritte): Leiste komplett weg (volle Breite, kein
   Aufblitzen/Sprung beim Öffnen mit Vorauswahl). Nur bei „offen/Pflicht" (alert-info
   / alert-danger) bleibt die gelbe „Bitte wählen"-Leiste sichtbar. */
#cfg-container .cfg-group-info:has(.badge.alert-success) { display: none !important; }
/* Gleiche Leiste, aber schon SERVERSEITIG als "gültig" erkannt (Klasse kommt aus
   config_options_list.tpl): dann gar nicht erst zeigen. Vorher blitzte sie beim
   Laden kurz auf, bis JS/der erste AJAX sie wegnahm. */
#cfg-container .cfg-group-info.cfg-info-prehidden { display: none !important; }
/* (Select-Sonderregel entfällt: das Basis-z-index:15 oben deckt Radio- UND Select-
   Schritte ab und legt die Leiste sicher über das Auswahlfeld/die Optionen z1.) */
/* Collapse-Inhalt FLUSH an den Kopf: das THEME gibt .collapse margin-top:1.5rem
   (22,5px) -> das war die "Lücke" zwischen Kopf und gelber Leiste. (Früher stand
   dafür am Dateiende ein Legacy-Override auf 2px; beim Aufräumen entfernt, ohne
   den Theme-Margin zu kennen -> Lücke kam zurück. Jetzt hier, direkt beim
   Leisten-Block, auf 0 = eine Einheit mit dem Kopf.) */
#cfg-container .cfg-group > .collapse,
#cfg-container .cfg-group > .collapsing { margin-top: 0 !important; }


/* === Konfigurator: Pills (Infos / Empfehlung) =========================== */
.th-varinfo {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  margin: 0 0 0 6px; padding: 3px 11px;
  border: 1px solid #7a9a4e; border-radius: 999px;
  background: #eef3e3; color: #46591f !important;
  font-size: 13px; line-height: 1.4; text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease; vertical-align: middle;
}
.th-varinfo::after { content: "Infos"; line-height: 1; }
.th-varinfo .icon-content {
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 0 !important; vertical-align: middle; line-height: 1; --icon-size-multiplier: 1;
}
.th-varinfo .icon-content svg, .th-varinfo .fa { display: block; font-size: 13px; }
.th-varinfo .tooltip-text { display: none; }
.th-varinfo:hover, .th-varinfo:focus { background: #7a9a4e; color: #fff !important; }

#cfg-container .config-item .cfg-reco-badge {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin: 0 0 0 8px; padding: 3px 11px;
  border: 1px solid transparent; border-radius: 999px;
  background: #dbe6bf; color: #46591f; font-size: 13px; line-height: 1.4; font-weight: 600;
}


/* === Konfigurator: Bilder (Popup-Klick, Groessen, Radien) ================ */
#cfg-container .bild-popup,
#cfg-container .bild-popup .kk-gallery-image-link { cursor: pointer; }
#cfg-container .bild-popup .kk-gallery-image { transition: transform .15s ease, filter .15s ease; }
#cfg-container .bild-popup:hover .kk-gallery-image,
#cfg-container .bild-popup .kk-gallery-image-link:hover .kk-gallery-image {
  transform: scale(1.02); filter: brightness(.97);
}

/* Hilfsklassen fuer Bilder im Konfigurator/Beschreibung.
   HINWEIS: Falls du .bild-150 / .bild-radius12 auch auf ANDEREN Seiten
   nutzt, lass zusaetzlich eine Kopie in global.css stehen. */
.bild-150 img, img.bild-150, .bild-150 .kk-gallery-image { max-width: 150px !important; height: auto !important; }
img.bild-radius12, .bild-radius12 img, .bild-radius12 .kk-gallery-image, .bild-radius12 .mediabox-img { border-radius: 12px !important; }
.bild-radius12 { overflow: hidden; border-radius: 12px; }


/* === Konfigurator: DZM "Mehr erfahren"-Button + Infos-Pille ============== */
#cfg-container .dzm-btn-snippet-wrapper button,
#cfg-container .dzm-btn {
  color: #46591f !important; background-color: transparent !important;
  border: 1px solid #8da174 !important; font-weight: 600 !important;
}
#cfg-container .dzm-btn-snippet-wrapper button:hover,
#cfg-container .dzm-btn:hover {
  color: #fff !important; background-color: #8da174 !important; border-color: #8da174 !important;
}
#cfg-container .dzm-btn-snippet-wrapper .cfg-smallbtn,
#cfg-container .dzm-btn.cfg-smallbtn,
#cfg-container .cfg-smallbtn {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
  width: auto !important; min-height: 0 !important; height: auto !important;
  border: 1px solid #7a9a4e !important; border-radius: 999px !important;
  background: #eef3e3 !important; color: #46591f !important;
  font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important;
  text-transform: none !important; box-shadow: none !important;
}
#cfg-container .dzm-btn-snippet-wrapper .cfg-smallbtn:hover,
#cfg-container .dzm-btn.cfg-smallbtn:hover,
#cfg-container .cfg-smallbtn:hover {
  background: #7a9a4e !important; color: #fff !important; border-color: #7a9a4e !important;
}


/* === DZM-Popup im Bootstrap-Modal-Stil ================================== */
body:has(.dzm-popup-container.show) { overflow: hidden; }
.dzm-popup-container {
  position: fixed !important; inset: 0 !important; z-index: 100000 !important;
  display: block !important; overflow: auto; background: rgba(0,0,0,.5);
}
.dzm-popup-content-wrapper {
  position: relative; width: min(500px, calc(100% - 20px));
  margin: 1.75rem auto !important; max-height: calc(100vh - 3.5rem); overflow: auto;
  background: #fff !important; opacity: 1 !important; border-radius: .4rem;
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.4); padding: 1.25rem 1.5rem !important; line-height: 1.5;
}
.dzm-popup-content-wrapper h4, .dzm-popup-content-wrapper .h5 { margin-top: 0; margin-bottom: .75rem; }
.dzm-popup-content-wrapper ul { margin: 0; padding-left: 1.1rem; }
.dzm-popup-content-wrapper li + li { margin-top: .4rem; }
.dzm-popup-content-wrapper img { max-width: 100%; height: auto; }
.dzm-popup-close-btn {
  position: fixed !important; top: calc(1.75rem + 6px) !important;
  right: max(14px, calc(50% - 250px + 10px)) !important; z-index: 100002 !important;
  width: auto !important; height: auto !important; padding: 2px 6px !important; margin: 0 !important;
  font-size: 1.7rem !important; font-weight: 700 !important; line-height: 1 !important;
  color: #000 !important; opacity: .5; background: transparent !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  cursor: pointer; text-shadow: 0 1px 0 #fff;
}
.dzm-popup-close-btn:hover { opacity: .9; }
@media (max-width: 575.98px) {
  .dzm-popup-content-wrapper { margin: 1rem auto !important; max-height: 76vh; }
  .dzm-popup-close-btn { top: calc(1rem + 6px) !important; right: 18px !important; }
}


/* === Konfigurator: Schritt-Kopf Status-Badge ============================ */
.cfg-step-status {
  display: inline-block; vertical-align: middle; margin: 0 10px; padding: 2px 10px;
  border-radius: 999px; font-size: 13px; line-height: 1.4; font-weight: normal;
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 1281px) { .cfg-step-status { max-width: 440px; } }   /* breite Desktops: mehr vom gewaehlten Wert zeigen */
.cfg-step-status.is-done     { background:#eef3e3; color:#46591f; border:1px solid #7a9a4e; }
.cfg-step-status.is-open     { background:#f0f0f0; color:#888;    border:1px solid #ddd;    }
.cfg-step-status.is-optional { background:#f3f5ef; color:#6a7b59; border:1px solid #dbe6bf; }
/* Standard = vorbelegter, unveraenderter Pflicht-Schritt: neutral (Anthrazit), NICHT gruen */
.cfg-step-status.is-standard { background:#eaeef0; color:#2f3e46; border:1px solid #cfd8dc; }
#cfg-container .cfg-group-title .cfg-icon { display: none; }
#cfg-container .cfg-toggle-btn .cfg-step-status      { order: 1; }
#cfg-container .cfg-toggle-btn .icon-content--toggle { order: 2; margin-left: 8px; }
@media (max-width: 767.98px) {
  #cfg-container .cfg-toggle-btn { flex-wrap: wrap; align-items: center; }
  #cfg-container .cfg-toggle-btn .cfg-title { flex: 1 1 auto; min-width: 0; }
  #cfg-container .cfg-toggle-btn .icon-content--toggle { order: 1; }
  #cfg-container .cfg-toggle-btn::after { content: ""; flex: 0 0 100%; height: 0; order: 2; }
  #cfg-container .cfg-toggle-btn .cfg-step-status {
    order: 3; flex: 0 1 auto; max-width: 100%; margin: 4px 0 0 30px; white-space: normal;
  }
}


/* === Konfigurator: Collapse-Trigger-Banner (JS baut #cfg-toggle-banner) == */
.cfg-steps-collapsed { display: none !important; }
#cfg-toggle-banner {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:linear-gradient(135deg,#2f3e46,#3b4d57); color:#fff; border-radius:16px; padding:18px 22px;
  cursor:pointer; box-shadow:0 6px 22px rgba(47,62,70,.28); margin:0 0 16px; user-select:none; position:relative; overflow:hidden;
}
#cfg-toggle-banner:hover { box-shadow:0 10px 30px rgba(47,62,70,.38); }
#cfg-toggle-banner:focus-visible { outline:3px solid #8da174; outline-offset:2px; }
#cfg-toggle-banner.is-open { background:#eef3e3; color:#2f3e46; box-shadow:0 3px 12px rgba(0,0,0,.1); border:1px solid #dbe6bf; }
#cfg-toggle-banner .ctb-left { display:flex; align-items:center; gap:14px; }
#cfg-toggle-banner .ctb-icon { font-size:24px; flex:0 0 auto; }
#cfg-toggle-banner .ctb-title { font-size:1.15rem; font-weight:700; line-height:1.2; }
#cfg-toggle-banner .ctb-sub { font-size:.9rem; opacity:.85; margin-top:3px; }
#cfg-toggle-banner.is-open .ctb-sub { opacity:.7; }
#cfg-toggle-banner .ctb-action { display:inline-flex; align-items:center; gap:8px; font-weight:700; white-space:nowrap; background:rgba(255,255,255,.16); padding:9px 16px; border-radius:999px; }
#cfg-toggle-banner.is-open .ctb-action { background:#2f3e46; color:#fff; }
#cfg-toggle-banner .ctb-chev { transition:transform .25s; }
#cfg-toggle-banner.is-open .ctb-chev { transform:rotate(180deg); }
#cfg-toggle-banner:not(.is-open)::after { content:""; position:absolute; inset:0; border-radius:16px; box-shadow:0 0 0 0 rgba(141,161,116,.55); animation:ctbPulse 2.4s ease-out infinite; pointer-events:none; }
@keyframes ctbPulse { 0%{box-shadow:0 0 0 0 rgba(141,161,116,.5);} 70%{box-shadow:0 0 0 14px rgba(141,161,116,0);} 100%{box-shadow:0 0 0 0 rgba(141,161,116,0);} }
/* Fortschrittsbalken nur mobil (Variante 3); Desktop bleibt unveraendert */
#cfg-toggle-banner .ctb-progress { display:none; }

/* Mobil = Variante 3: Titelzeile, Fortschrittsbalken statt Langtext, gruene CTA volle Breite */
@media (max-width:575.98px) {
  #cfg-toggle-banner { flex-direction:column; align-items:stretch; gap:0; padding:14px 16px; border-radius:14px; margin:0 0 12px; }
  #cfg-toggle-banner:not(.is-open)::after { display:none; }                 /* Pulse-Glow aus */
  #cfg-toggle-banner .ctb-left { gap:10px; align-items:center; }
  #cfg-toggle-banner .ctb-icon { font-size:20px; }
  #cfg-toggle-banner .ctb-title { font-size:1.05rem; }
  #cfg-toggle-banner .ctb-sub { display:none; }                            /* langer Satz weg -> Balken zeigt Fortschritt */
  #cfg-toggle-banner .ctb-progress { display:flex; align-items:center; gap:8px; margin:10px 0 12px; }
  #cfg-toggle-banner .ctb-bar { flex:1; height:6px; border-radius:999px; background:rgba(255,255,255,.18); overflow:hidden; }
  #cfg-toggle-banner .ctb-fill { display:block; height:100%; width:0; background:#cbd8a6; transition:width .3s; }
  #cfg-toggle-banner .ctb-count { font-size:.87rem; opacity:.85; white-space:nowrap; }
  #cfg-toggle-banner .ctb-action { display:flex; width:100%; justify-content:center; background:#cbd8a6; color:#2f3e46; padding:11px; border-radius:999px; }
  #cfg-toggle-banner.is-open .ctb-action { background:#2f3e46; color:#fff; }              /* offen: dunkel */
  #cfg-toggle-banner.is-open .ctb-bar { background:rgba(47,62,70,.15); }                  /* heller Hintergrund -> dunklere Spur */
  #cfg-toggle-banner.is-open .ctb-count { color:#2f3e46; opacity:.7; }
}


/* === Konfigurator: "Weiter zum naechsten Schritt"-Button ================= */
.cfg-next-btn {
  display:block; width:100%; margin-top:10px; padding:11px 16px;
  border:0; border-radius:8px; background:#cbd8a6; color:#2f3e46; cursor:pointer;
  font-weight:700; font-size:.95rem; letter-spacing:.02em; text-transform:none;
  transition:background .15s ease;
}
.cfg-next-btn:hover, .cfg-next-btn:focus { background:#bccb92; color:#2f3e46; }


/* === Konfigurator: redundante Wert-Wiederholung unter dem Auswahlfeld ==== */
/* Desktop aus (Wert+Preis stehen im Select), Mobil an (Select schneidet ab) */
.cfg-dropdown-item-description { display: none !important; }
@media (max-width: 767.98px) { .cfg-dropdown-item-description { display: block !important; } }


/* === Zusammenfassung: ganze Optionszeile klickbar ======================= */
#product-configuration-sidebar tr:has(a[href^="#cfg-grp"]) { cursor: pointer; }
#product-configuration-sidebar tr:has(a[href^="#cfg-grp"]):hover { background: rgba(0,0,0,.035); }


/* === Zusammenfassung: Status-Pillen (offen / optional) ================== */
#product-configuration-sidebar .cfg-group-missing:not(.d-none)::after,
#product-configuration-sidebar tr.cfg-group-optional .cfg-group-check:not(.d-none)::before {
  display: inline-block; vertical-align: middle;
  font-size: .87rem; font-weight: 700; line-height: 1;
  padding: .25em .55em; border-radius: 999px; white-space: nowrap;
  text-transform: none; letter-spacing: 0;
}


/* 1) Pflicht-Schritt offen: rotes X -> graue "offen"-Pille */
#product-configuration-sidebar .cfg-group-missing:not(.d-none) > i,
#product-configuration-sidebar .cfg-group-missing:not(.d-none) > svg { display: none; }
#product-configuration-sidebar .cfg-group-missing:not(.d-none)::after { content: "offen"; background: #e9ecef; color: #6c757d; }
/* 2) Optionaler Schritt: nur ein DEZENTES "optional" – kein gruener Haken, keine Pille
      (Nutzerwunsch 2026-07-25: war zu viel). */
#product-configuration-sidebar tr.cfg-group-optional .cfg-group-check > i,
#product-configuration-sidebar tr.cfg-group-optional .cfg-group-check > svg { display: none !important; }
#product-configuration-sidebar tr.cfg-group-optional .cfg-group-check:not(.d-none)::before {
  content: "optional"; margin-right: 0; background: transparent; color: #a0a7a0;
  font-weight: 400; font-size: .87rem; padding: 0; border-radius: 0;
}
/* 3) gruenes Haken bei gewaehltem Pflicht-Schritt bleibt unveraendert */


/* === Konfigurator: Presets-Kacheln ====================================== */
.cfg-preset { cursor: pointer; position: relative; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.cfg-preset > img:first-child,
.cfg-preset .card-img-top { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.cfg-preset:focus-visible { outline: 2px solid #7a9a4e; outline-offset: 2px; }
.cfg-preset--active { box-shadow: 0 0 0 2px #7a9a4e inset; border-color: #7a9a4e !important; }
.cfg-preset--active::after {
  content: "\2713 ausgew\00E4hlt"; position: absolute; top: 8px; right: 8px;
  background: #7a9a4e; color: #fff; font: 600 12px/1 -apple-system, sans-serif;
  padding: 5px 9px; border-radius: 999px; z-index: 2;
}


/* === Konfigurator: Pflicht-Warnungen / Toast ============================ */
.cfg-toast {
  position: fixed; top: 20px; left: 50%; transform: translate(-50%,-20px); z-index: 99999;
  background: #dc3545; color: #fff; padding: 14px 22px; border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.3); font-size: 1.05rem; font-weight: 600; opacity: 0;
  transition: opacity .25s, transform .25s; max-width: 90vw; text-align: center;
  /* WICHTIG: Der Toast wird nach dem Ausblenden (opacity:0) NICHT aus dem DOM
     entfernt (custom.js showToast) und liegt fix ueber Menue + .csh-sticky-bar.
     Ohne pointer-events:none fing dieser unsichtbare Rest dort dauerhaft alle
     Klicks ab -> Menue/Sticky nicht mehr bedienbar. Der Toast ist reiner
     Info-Text (kein Button), daher gefahrlos klick-durchlaessig. */
  pointer-events: none;
}
.cfg-toast.show { opacity: 1; transform: translate(-50%,0); }
.cfg-needs-attention { outline: 3px solid #dc3545 !important; outline-offset: 3px; border-radius: 8px; }
.cfg-needs-attention .cfg-group-title { animation: cfgPulse 1s ease-in-out 3; border-radius: 6px; }
@keyframes cfgPulse { 0%,100% { background: transparent; } 50% { background: rgba(220,53,69,.18); } }


/* === ShopVote-Trust-Tab am Konfigurator (#cfg-trust-mini) =============== */
/* Tab: schmal, am linken Rand, ueber dem aufklappenden Fenster */
#cfg-trust-mini {
  position:fixed; left:0; bottom:308px; top:auto; z-index:951;
  display:none; flex-direction:column; align-items:center; gap:6px;
  background:#fff; border:1px solid #e6e6e6; border-left:none;
  border-radius:0 12px 12px 0; padding:7px 5px 7px 4px;
  box-shadow:0 3px 12px rgba(0,0,0,.18); cursor:pointer;
}
body.cfg-trust-show #cfg-trust-mini { display:flex; }
#cfg-trust-mini .ctm-stars { color:#f5a623; writing-mode:vertical-rl; text-orientation:upright; font-size:9px; line-height:1.15; letter-spacing:1px; }
#cfg-trust-mini .ctm-logo { width:18px; height:18px; }
#cfg-trust-mini .ctm-logo svg, #cfg-trust-mini .ctm-logo img { display:block; width:18px; height:18px; }
/* Fenster IMMER links + ueber der Leisten-Position */
body:has(#cfg-trust-mini) #sv-rbadge-box { left:0 !important; bottom:95px !important; top:auto !important; transform:none !important; transition:opacity .3s ease; }
body:has(#cfg-trust-mini):not(.cfg-trust-show) #sv-rbadge-box { opacity:1 !important; pointer-events:auto !important; }
body.cfg-trust-show #sv-rbadge-box { opacity:0 !important; pointer-events:none !important; }
body.cfg-trust-show:has(#cfg-trust-mini:hover) #sv-rbadge-box,
body.cfg-trust-show:has(#sv-rbadge-box:hover) #sv-rbadge-box { opacity:1 !important; pointer-events:auto !important; }
/* Klick auf den Tab -> Fenster bleibt 15s offen, Tab solange aus */
body.cfg-trust-show.cfg-trust-pinned #sv-rbadge-box { opacity:1 !important; pointer-events:auto !important; }
body.cfg-trust-pinned #cfg-trust-mini { display:none !important; }
@media (max-width:1030px) { #cfg-trust-mini { display:none !important; } }


/* === OPC-Bild/Text-Raster (.Opckonfiggrid) ============================== */
.Opckonfiggrid { flex-wrap:nowrap !important; align-items:flex-start !important; margin:8px 0 0 !important; }
.Opckonfiggrid > .clearfix { display:none !important; }
.Opckonfiggrid > [class*="col-md-4"] { flex:0 0 130px !important; width:130px !important; max-width:130px !important; align-self:flex-start; padding:0 10px 0 0 !important; }
.Opckonfiggrid > [class*="col-md-8"] { flex:1 1 0 !important; width:auto !important; max-width:none !important; min-width:0 !important; padding:0 !important; }
.Opckonfiggrid .bild-150,
.Opckonfiggrid .bild-150 .mediabox-img-wrapper,
.Opckonfiggrid .bild-150 picture,
.Opckonfiggrid .bild-150 img { width:100% !important; height:auto !important; display:block; }
.Opckonfiggrid .bild-150 img { max-width:150px !important; border-radius:8px; }
.Opckonfiggrid .text_before_popup { margin:0 0 8px; line-height:1.45; }
.Opckonfiggrid .text_before_popup p { margin:0 0 .4em; }
.Opckonfiggrid .text_before_popup p:last-child { margin-bottom:0; }
.Opckonfiggrid .d-flex:has(> .dzm-btn) { justify-content:flex-start !important; }


/* === Produktseite: Sektionsliste als CI-Kacheln (Design A, 2026-07-13) =====
   Icons + Unterzeilen setzt das isolierte JS in productdetails/tabs.tpl
   (stichwort-basiert je Titel, .cs-section-row__ic wird eingefuegt). */
/* --- Kapitelmarke ueber der Liste (V1, 2026-07-26) -------------------------
   Vorher: einzeilige H2 mit 1.3rem, eingerueckt im {container} -> ging neben
   der Teaser-Ueberschrift darueber (.csst h2 = 1.5rem, volle Breite) unter.
   Jetzt: gruener Akzentbalken + Kicker + H2 auf 1.5rem/800, gleiche Textkante
   wie der Teaser. Markup: .cs-section-head in productdetails/tabs.tpl.
   Rollback: diesen Block + die Ausrichtungsregel darunter entfernen und in
   tabs.tpl die alte einzeilige H2 wiederherstellen. */
.cs-section-head { margin: 3rem 0 18px; border-left: 4px solid #8da174; padding-left: 18px; }
.cs-section-head__kick {
  display: block; margin: 0 0 4px; font-size: .87rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #7a9a4e;
}
.cs-section-head__h2 { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.25; color: #2f3e46; }
@media (max-width: 575.98px) {
  .cs-section-head { margin: 2.4rem 0 14px; padding-left: 14px; }
}
/* Ausrichtung: der Detailbereich haengt in einem .container (max 1140px + 15px
   padding), die OPC-Drops darueber (Teaser, Berater-Leiste) NICHT -> ~50px
   Versatz. Der Block laeuft jetzt auf derselben Kante wie der Text darueber.
   Betrifft Kapitelmarke, Sektionsliste, Entdecken-Band, Hersteller-Zeile und
   Blaetter-Karten (alle liegen in diesem einen .container). */
.productdetails-additional-info > .container { max-width: none; padding-left: 0; padding-right: 0; }
/* Vorschlag 2 (2026-07-16): 2-Spalten-KACHELGRID in voller Produktbreite statt
   820px-Einspalter - die Liste geht nicht mehr unter. Mobil 1 Spalte. */
.cs-section-list {
  max-width: none; margin: 0 0 3rem; border-top: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 767.98px) { .cs-section-list { grid-template-columns: 1fr; } }
.cs-section-row {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; margin: 0;
  background: #fff; border: 1px solid #e7ebe0; border-radius: 16px; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cs-section-row:hover, .cs-section-row:focus-visible {
  border-color: #cbd8a6; box-shadow: 0 8px 22px rgba(47,62,70,.10);
  transform: translateY(-2px); background: #fff; outline: none;
}
.cs-section-row__ic {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px;
  background: #eef3e3; color: #7a9a4e;
  display: flex; align-items: center; justify-content: center;
}
.cs-section-row__ic svg { width: 25px; height: 25px; }
.cs-section-row__text { flex: 1 1 auto; min-width: 0; }
.cs-section-row__title { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.25; color: #2f3e46; }
.cs-section-row .cs-section-row__sub { display: flex; align-items: center; gap: .4rem; margin: 2px 0 0; font-size: .9rem; line-height: 1.25; color: #6a7b59; }
.cs-section-row__arrow { display: none; }
/* Chevron als Kreis (V1): fuellt sich beim Hover gruen -> die Kachel liest
   sich als Schalter, nicht als Dekoration. Kein Markup noetig, das padding
   verkleinert die Zeichenflaeche des SVG innerhalb des 32px-Kreises. */
.cs-section-row__chevron {
  flex: 0 0 32px; box-sizing: border-box; width: 32px; height: 32px; padding: 9px;
  border-radius: 50%; background: #eef3e3; color: #46591f;
  transition: background .15s ease, color .15s ease;
}
.cs-section-row:hover .cs-section-row__chevron, .cs-section-row:focus-visible .cs-section-row__chevron {
  background: #7a9a4e; color: #fff;
}
@media (max-width: 575px) {
  .cs-section-row { padding: 15px 15px; gap: 13px; }
  .cs-section-row__ic { flex-basis: 42px; width: 42px; height: 42px; }
  .cs-section-row__ic svg { width: 22px; height: 22px; }
  .cs-section-row__title { font-size: 1.06rem; }
}
/* --- Entdecken-Band: Merkmal-Filter als sichtbare Pills (tabs.tpl, A1) --- */
.cs-discover {
  background: #f7f8f4; border: 1px solid #dbe6bf; border-radius: 16px;
  padding: 20px 22px; margin: 0 0 16px;
}
.cs-discover__title { margin: 0 0 12px; font-size: 1.2rem; font-weight: 700; color: #2f3e46; }
.cs-discover__row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cs-discover__row:last-child { margin-bottom: 0; }
.cs-discover__lbl { flex: 0 0 150px; font-size: .95rem; font-weight: 700; color: #6a7b59; }
.cs-discover__pills { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.cs-discover__pill {
  background: #fff; border: 1px solid #cbd8a6; color: #46591f !important;
  border-radius: 999px; padding: 7px 15px; font-size: .95rem; font-weight: 600;
  text-decoration: none !important; transition: background .15s ease;
}
.cs-discover__pill:hover { background: #eef3e3; }
@media (max-width: 575.98px) {
  .cs-discover { padding: 16px; }
  .cs-discover__lbl { flex-basis: 100%; }
}

/* --- Hersteller-/GPSR-Zeile (Pflichtangaben, automatisch; tabs.tpl, A1) --- */
.cs-maker {
  border: 1px solid #e7ebe0; border-radius: 16px;
  padding: 16px 22px; margin: 0 0 3rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
}
.cs-maker__link { display: flex; align-items: center; gap: 12px; }
.cs-maker__link img { max-height: 34px; max-width: 110px; width: auto; }
.cs-maker__link a { font-weight: 700; color: #46591f !important; font-size: 1rem; }
.cs-maker__gpsr { flex: 1 1 260px; min-width: 0; }
/* GPSR als dezentes Collapse (natives <details> aus dem Child-gpsr.tpl,
   kein JS): zugeklappt nur die Zeile "Herstellerinformationen" + Chevron,
   aufgeklappt die vollen Pflichtangaben (Adresse, E-Mail, Homepage) */
.cs-gpsr summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  list-style: none; font-size: .87rem; font-weight: 700; color: #8a958d;
  -webkit-user-select: none; user-select: none;
}
.cs-gpsr summary::-webkit-details-marker { display: none; }
.cs-gpsr summary::after {
  content: ''; width: 7px; height: 7px; flex: 0 0 auto; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.cs-gpsr[open] summary::after { transform: rotate(225deg); margin-top: 2px; }
.cs-gpsr__body { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px 40px; }
.cs-gpsr .gpsr-info { margin: 0; font-size: .87rem; color: #8a958d; line-height: 1.5; }
.cs-gpsr .gpsr-info a { color: #8a958d !important; text-decoration: underline; }
.cs-gpsr__label { font-weight: 700; }
/* folgt darunter die Blaetter-Leiste, ruecken die Bloecke enger zusammen */
.cs-maker:has(+ .cs-pn) { margin-bottom: 16px; }

/* --- N3: Blaetter-Karten voriges/naechstes Produkt (tabs.tpl .cs-pn) ------
   Ersetzt die Chevron-Pfeile der Breadcrumb-Zeile (leerer Override
   snippets/product_pagination.tpl). Sitzt vor den Empfehlungen. */
.cs-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 3rem; }
.cs-pn__card {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid #e7ebe0; border-radius: 14px; padding: 12px 16px;
  text-decoration: none !important; color: #2f3e46 !important;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.cs-pn__card:hover { border-color: #cbd8a6; box-shadow: 0 6px 18px rgba(47,62,70,.10); }
.cs-pn__card--next { flex-direction: row-reverse; text-align: right; }
.cs-pn__card img {
  width: 84px; height: 62px; object-fit: contain;
  background: #f7f8f4; border-radius: 8px; flex: 0 0 auto;
}
.cs-pn__txt { min-width: 0; }
.cs-pn__kicker {
  display: block; font-size: .87rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #7a9a4e;
}
.cs-pn__name { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; margin-top: 3px; }
.cs-pn__price { display: block; font-size: .9rem; color: #6a7b59; margin-top: 2px; }
@media (max-width: 767.98px) {
  .cs-pn { grid-template-columns: 1fr; }
  .cs-pn__card--next { flex-direction: row; text-align: left; }
  .cs-pn__spacer { display: none; }
}

.cs-section-modal .modal-content { border: 0; border-radius: 16px; overflow: hidden; }
.cs-section-modal .modal-header { align-items: center; padding: 1.25rem 1.75rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.cs-section-modal .modal-title { margin: 0; font-size: 1.6rem; font-weight: 700; }
.cs-section-modal .modal-header .close { font-size: 2rem; font-weight: 400; opacity: .6; }
.cs-section-modal .modal-header .close:hover { opacity: 1; }
.cs-section-modal .modal-body { padding: 1.75rem; }
.cs-section-modal .modal-body .product-attributes { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,.08); }
@media (min-width: 992px) { #cs-modal-description .modal-dialog { max-width: 880px; } }

/* Beschreibungs-Modal: Lesetypografie nach CI-Typo-Skala (Root=15px).
   Bewusst NUR #cs-modal-description — andere Modale (Techn. Daten .csd, Bewertungen) haben eigene Styles. */
#cs-modal-description .modal-body { font-size: 1rem; line-height: 1.65; color: #333; }
#cs-modal-description .modal-body p { margin: 0 0 1.05rem; }
#cs-modal-description .modal-body ul { margin: 0 0 1.05rem; padding-left: 1.2rem; }
#cs-modal-description .modal-body li { margin-bottom: .35rem; }
#cs-modal-description .modal-body h2,
#cs-modal-description .modal-body h3,
#cs-modal-description .modal-body h4 {
  margin: 1.8rem 0 .65rem; padding-left: .75rem; border-left: 3px solid #8da174;
  font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: #2f3e46;
}
#cs-modal-description .modal-body h2:first-child,
#cs-modal-description .modal-body h3:first-child,
#cs-modal-description .modal-body h4:first-child { margin-top: 0; }
#cs-modal-description .modal-body a { color: #46591f; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
#cs-modal-description .modal-body a:hover { color: #7a9a4e; }


/* === OPC-Video als Galerie-Bild (Modul in js/custom.js) ================= */
.csv-source-hidden { display: none !important; }
#gallery .csv-slide {
  position: relative; width: 100%; aspect-ratio: var(--csv-aspect, 1 / 1);
  overflow: hidden; border-radius: 18px; background: #000; cursor: pointer;
}
#gallery .csv-slide .csv-poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
#gallery .csv-slide .csv-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; z-index: 2; }
#gallery .csv-slide.csv-playing .csv-poster-img,
#gallery .csv-slide.csv-playing .csv-play { display: none; }
#gallery .csv-slide.csv-consent-shown .csv-play { display: none; }
#gallery .csv-slide .csv-unmute,
.pswp .csv-pswp-frame .csv-unmute {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5;
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px;
  border: 0; border-radius: 999px; background: #cbd8a6; color: #333333;
  font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); opacity: 1; transition: opacity .4s ease;
}
#gallery .csv-slide .csv-unmute:hover,
.pswp .csv-pswp-frame .csv-unmute:hover { filter: brightness(.95); }
#gallery .csv-slide .csv-unmute-ic,
.pswp .csv-pswp-frame .csv-unmute-ic { font-size: 16px; line-height: 1; }
#gallery .csv-slide .csv-unmute--hide,
.pswp .csv-pswp-frame .csv-unmute--hide { opacity: 0; pointer-events: none; }
.csv-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 48px; border-radius: 14px; background: rgba(0,0,0,.55);
  z-index: 3; pointer-events: none; transition: background .15s ease;
}
.csv-play::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%);
  border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff;
}
#gallery .csv-slide:hover .csv-play,
#gallery_preview_wrapper .csv-thumb-li:hover .csv-play { background: #f00; }
.csv-play.csv-play--sm { width: 30px; height: 21px; border-radius: 6px; }
.csv-play.csv-play--sm::before { border-width: 5px 0 5px 8px; }
#gallery_preview_wrapper .csv-thumb-li { position: relative; flex: 0 0 auto; cursor: pointer; }
#gallery_preview_wrapper .csv-thumb-img {
  display: block; width: var(--csv-thumb-w, 80px) !important; height: var(--csv-thumb-h, 50px) !important;
  max-width: none; aspect-ratio: auto; object-fit: cover; border-radius: 6px;
}
.pswp .csv-pswp { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pswp .csv-pswp-frame {
  position: relative; width: min(84vw, 1180px); aspect-ratio: 16 / 9;
  max-height: calc(85vh - 84px); background: #000 center / contain no-repeat;
  border-radius: 8px; overflow: hidden;
}
.pswp .csv-pswp-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pswp .csv-pswp-frame .csv-consent,
#gallery .csv-slide .csv-consent {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 16px; text-align: center;
  background: rgba(0,0,0,.74); border-radius: inherit;
}
.pswp .csv-pswp-frame .csv-consent-txt,
#gallery .csv-slide .csv-consent-txt { margin: 0; max-width: 540px; color: #fff; font-size: 14px; line-height: 1.45; }
.pswp .csv-pswp-frame .csv-consent-btn,
#gallery .csv-slide .csv-consent-btn {
  display: inline-block; padding: 11px 20px; border: 0; border-radius: 8px;
  background: #cbd8a6; color: #333333; font-weight: 700; font-size: 14px; line-height: 1.2; cursor: pointer;
}
.pswp .csv-pswp-frame .csv-consent-btn:hover,
#gallery .csv-slide .csv-consent-btn:hover { filter: brightness(.95); }
.pswp .csv-pswp-thumbs {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1600; display: flex; gap: 8px;
  justify-content: center; align-items: center; padding: 10px 12px; background: rgba(0,0,0,.45);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.pswp .csv-pswp-thumb {
  position: relative; flex: 0 0 auto; width: 64px; height: 42px; padding: 0;
  border: 2px solid transparent; border-radius: 6px; background: #000; overflow: hidden;
  cursor: pointer; opacity: .55; transition: opacity .15s ease, border-color .15s ease;
}
.pswp .csv-pswp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pswp .csv-pswp-thumb:hover { opacity: 1; }
.pswp .csv-pswp-thumb.is-active { opacity: 1; border-color: #fff; }
.pswp .csv-pswp-thumb .csv-play { width: 22px; height: 16px; border-radius: 4px; }
.pswp .csv-pswp-thumb .csv-play::before { border-width: 4px 0 4px 6px; }
.pswp .csv-pswp-frame .csv-blockhint {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center;
  gap: 10px; padding: 12px 16px; background: rgba(176,32,32,.94); color: #fff;
  font-size: 13px; line-height: 1.4; text-align: left;
}
.pswp .csv-pswp-frame .csv-blockhint-x {
  margin-left: auto; flex: 0 0 auto; padding: 0 4px; border: 0; background: transparent;
  color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}


/* Sticky-Offset an den NEUEN eigenen Sticky (.csh-sticky-bar, 54px) angleichen:
   Das Theme misst --adm-sticky-top-offset noch als alte volle Header-Höhe (~113px)
   -> hier auf 58px (54 Sticky + 4px Luft) überschreiben, damit „Ihre Konfiguration"
   (Sidebar) und der Step-Kopf bündig unter der Sticky-Leiste kleben statt mit
   großem Spalt darunter. Gilt für Konfigurator-Container UND Sidebar-Wrapper.
   59px = Sticky 54 + 5px Luft (Nutzerwunsch: kleiner Abstand zur Sticky-Leiste). */
#cfg-container,
.product-configuration-sidebar-wrapper{ --adm-sticky-top-offset: 59px; }

/* GLEICHER Abstand zur Sticky-Leiste wie der Schritt-Kopf (Nutzerwunsch): Der Kopf
   klebt bündig bei var-5 (=54). Die Sidebar „Ihre Konfiguration" klebte bei var (=59,
   5px Spalt) -> wirkte versetzt. Sidebar ebenfalls auf var-5 (=54) -> beide bündig.
   (Ein sichtbarer 5px-Spalt am Kopf ist NICHT sauber möglich: dort scrollen die
   Optionen durch = Peek; deshalb beide flush statt beide mit Spalt.) Nur Desktop –
   mobil bleibt die Sidebar über die @media-Regel unten bei var. */
@media (min-width: 1031px){
  /* Beide sticky-Boxen ("Ihre Konfiguration" rechts + "Schritt für Schritt"-Banner
     links) kleben auf GLEICHER HÖHE, mit ein bisschen ABSTAND zum Mega-Menü
     (Nutzerwunsch): 8px unter der 54px-Sticky-Leiste (= var+3 = 62). So bleiben sie
     beim Scrollen bündig und kleben nicht direkt an der Menüleiste. */
  .product-configuration-sidebar-wrapper{ top: calc(var(--adm-sticky-top-offset, 59px) + 3px) !important; }
  /* Der "Schritt für Schritt"-Banner ist NICHT mehr sticky (Nutzerwunsch: die
     einzelnen Schritt-Köpfe sollen die klebenden "Menüpunkte" sein, nicht die Leiste).
     -> Banner scrollt normal weg (position:relative aus der Basis), die Schritt-Köpfe
     kleben unter der Theme-Sticky-Leiste. */
  #cfg-toggle-banner{ position: relative; }
}

/* Anker-Sprung (#cfg-container, z.B. vom SEO-CTA "Burmeier Regia Konfigurator"):
   Das Theme setzt scroll-margin-top ~122px (alte volle Header-Höhe) -> der Sprung
   landet ~68px zu tief unter dem 54px-Sticky = wirkt "seltsam/springt".
   Auf 64px angleichen (54 Sticky + 10px Luft), damit der Konfigurator sauber direkt
   unter der Sticky-Leiste einrastet. Mobil (72px-Kopf) entsprechend 84px. */
#cfg-container{ scroll-margin-top: 64px !important; }
@media (max-width: 1030px){
  #cfg-container{ scroll-margin-top: 84px !important; }
}

/* === Konfig-Zusammenfassung neben dem Konfigurator (Sidebar, Mobil) ===== */
@media (max-width: 1030px) {
  .product-configuration-sidebar-wrapper { top: var(--adm-sticky-top-offset); z-index: 1019; margin-top: 12px; }
  /* Mobil: die Theme-Kopfzeile ist 72px (nicht 54) -> Offset 77 (72+5), sonst klebt
     der Schritt-Kopf HINTER der Menüleiste und die Option ist verdeckt. */
  #cfg-container, .product-configuration-sidebar-wrapper { --adm-sticky-top-offset: 77px; }
  /* Der Schritt-Kopf ist mobil höher (2-zeilig) -> die gelbe Leiste dort NICHT sticky
     (sonst verrutscht sie), einfach in-flow unter dem Kopf. */
  #cfg-container .cfg-group-info { position: static !important; }
}

/* Lange Texte umbrechen statt horizontal ueberlaufen */
#product-configuration-sidebar .config-table td,
#product-configuration-sidebar .config-table th { overflow-wrap: anywhere; word-break: break-word; }


/* === Konfig-Zusammenfassung (Desktop): Liste scrollt, Fuss bleibt fix ==== */
@media (min-width: 992px) {
  /* etwas schmaler */
  #cfg-container > .col-lg-4 { flex: 0 0 30%; max-width: 30%; }
  #cfg-container > .col-lg-8 { flex: 0 0 70%; max-width: 70%; }

  /* === Karten-Look: Schatten, Rand; neutraler heller Kopf (kein Button-Look) === */
  #product-configuration-sidebar {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.09) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(47,62,70,.14) !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-left: 1.35rem !important;
    padding-right: 1.1rem !important;
  }
  /* Neutraler heller Kopfbereich, dunkler Text */
  #product-configuration-sidebar .panel-heading {
    margin: 0 -1.1rem 1rem -1.35rem !important;
    padding: 1rem 1.35rem .95rem !important;
    background: #f0f1f2 !important;
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
  }
  #product-configuration-sidebar .panel-title {
    color: #2f3e46 !important; font-size: 1.45rem !important;
    margin-bottom: 0 !important; padding-bottom: 0 !important;
    border-bottom: none !important; letter-spacing: -.01em;
  }
  /* Produkt-/Preiszeile absetzen + etwas Zeilen-Luft */
  #product-configuration-sidebar tbody.summary > tr:first-child > * { padding-bottom: .7rem !important; border-bottom: 1px solid rgba(0,0,0,.08); }
  #product-configuration-sidebar tbody.summary > tr > td,
  #product-configuration-sidebar tbody.summary > tr > th { padding-top: .4rem !important; padding-bottom: .4rem !important; }

  /* Liste scrollt, Fuss (Preis + Menge + Button) fix */
  #product-configuration-sidebar {
    display: flex; flex-direction: column;
    max-height: calc(100vh - var(--adm-sticky-top-offset, 67px) - 16px) !important;
    overflow: hidden;
  }
  #product-configuration-sidebar .panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  #product-configuration-sidebar .panel-heading { flex: 0 0 auto; position: relative; }
  #product-configuration-sidebar .cfg-sum-foot { flex: 0 0 auto; position: relative; border-top: 1px solid rgba(0,0,0,.08); padding-top: .5rem; }

  /* Positionsliste: nur vertikal scrollen, Balken sichtbar wenn noetig */
  #product-configuration-sidebar .cfg-sum-scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: #b5b5b5 #ececec;
  }
  #product-configuration-sidebar .cfg-sum-scroll::-webkit-scrollbar { width: 9px; }
  #product-configuration-sidebar .cfg-sum-scroll::-webkit-scrollbar-track { background: #ececec; border-radius: 9px; }
  #product-configuration-sidebar .cfg-sum-scroll::-webkit-scrollbar-thumb { background: #b5b5b5; border-radius: 9px; }

  /* Scroll-Hinweis oben/unten: kleine, abgerundete Pille, mittig schwebend,
     helles Gruen + weicher Schatten -> deckend & gut lesbar. JS = __cfgScrollFade. */
  #product-configuration-sidebar .cfg-more {
    position: absolute; left: 50%; transform: translateX(-50%); z-index: 5;
    display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
    padding: .3rem .85rem; border-radius: 999px;
    background: #eef3e3; color: #46591f !important;
    box-shadow: 0 2px 9px rgba(47,62,70,.20);
    font-size: .8rem !important; font-weight: 600 !important; line-height: 1 !important;
    text-transform: none !important; letter-spacing: .01em;
    cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .18s, background .15s;
  }
  #product-configuration-sidebar .cfg-more.show { opacity: 1; pointer-events: auto; }
  #product-configuration-sidebar .cfg-more:hover { background: #dbe6bf; }
  #product-configuration-sidebar .cfg-more .cfg-more-chev { font-size: .9rem !important; line-height: 1; }
  #product-configuration-sidebar .cfg-more-top    { bottom: -.8rem; }
  #product-configuration-sidebar .cfg-more-bottom { top: -.8rem; }
}


/* === Fixe Warenkorb-Leiste unten (Mobil) =============================== */
.productdetails-fixed-form .productdetails-fixed-form__price.cfg-summary-link { cursor: pointer; }
@media (max-width: 767.98px) {
  .productdetails-fixed-form--bottom { height: auto !important; padding: 5px 0 !important; }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__container {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; padding: 6px 12px !important; gap: 10px !important;
  }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__left {
    flex: 1 1 auto !important; min-width: 0 !important; display: flex !important;
    flex-direction: row !important; align-items: center !important; gap: 10px !important;
  }
  .productdetails-fixed-form--bottom picture { display: block !important; flex: 0 0 auto !important; line-height: 0 !important; }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__image {
    display: block !important; width: 66px !important; height: 50px !important; min-width: 66px !important;
    object-fit: cover !important; border-radius: 6px !important; margin: 0 !important;
  }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__text { flex: 1 1 auto !important; min-width: 0 !important; }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__text h2 {
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important;
    white-space: normal !important; overflow: hidden !important; font-size: .95rem !important; line-height: 1.2 !important; margin: 0 !important;
  }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__right {
    flex: 0 0 auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important;
  }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__price { line-height: 1.12 !important; text-align: right !important; max-width: 106px !important; }
  .productdetails-fixed-form--bottom .price_label.price_as_configured { font-size: 12px !important; line-height: 1.05 !important; display: block; }
  .productdetails-fixed-form--bottom .price_label {
    display: block !important; font-size: .8rem !important; line-height: 1.1 !important;
    color: #6c757d !important; font-weight: 400 !important; white-space: nowrap !important; margin: 0 !important;
  }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__price .price { font-size: 1.15rem !important; line-height: 1.12 !important; white-space: nowrap !important; }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__price .vat_info { display: block !important; font-size: 0 !important; line-height: 1.1 !important; margin: 0 !important; }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__price .vat_info .shipment {
    font-size: .8rem !important; line-height: 1.15 !important; color: #6c757d !important;
    text-decoration: none !important; white-space: normal !important; display: inline !important;
  }
  .productdetails-fixed-form--bottom .productdetails-basket-action__wrapper .add-to-basket > .btn,
  .productdetails-fixed-form--bottom .productdetails-basket-action__wrapper > .btn {
    width: 52px !important; min-width: 52px !important; height: 52px !important; padding: 0 !important;
    display: flex; align-items: center; justify-content: center;
  }
  .productdetails-fixed-form--bottom .productdetails-basket-action__wrapper .icon-content { margin: 0 !important; }
  .productdetails-fixed-form--bottom .productdetails-basket-action__wrapper .js-spinner { display: none !important; }
}

/* === Fixe Warenkorb-Leiste: 768–1199 px kompakt (Variante A) ===========
   Schliesst die Luecke ueber der Mobil-Regel: dort brach das Parent-Layout
   (22px Titel, voller Preisblock, 2-zeiliger Button) auf bis zu 142px Hoehe um.
   Ziel: eine feste, flache Zeile (66px), Bild bleibt sichtbar, Name einzeilig. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .productdetails-fixed-form--bottom { height: 66px !important; padding: 0 !important; }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__container {
    height: 66px !important; gap: 14px !important; padding: 0 16px !important; flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__left {
    gap: 13px !important; min-width: 0 !important; align-items: center !important;
  }

  /* Bild IMMER sichtbar, quadratisch */
  .productdetails-fixed-form--bottom picture { display: block !important; flex: 0 0 auto !important; line-height: 0 !important; }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__image {
    display: block !important; width: 52px !important; height: 52px !important; min-width: 52px !important;
    max-height: none !important; object-fit: cover !important; border-radius: 8px !important; margin: 0 !important;
  }

  /* Name einzeilig, kuerzen statt umbrechen */
  .productdetails-fixed-form--bottom .productdetails-fixed-form__text { min-width: 0 !important; }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__text h2 {
    font-size: 16px !important; line-height: 1.25 !important; margin: 0 !important; display: block !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }

  .productdetails-fixed-form--bottom .productdetails-fixed-form__price { text-align: right !important; white-space: nowrap !important; }
  .productdetails-fixed-form--bottom .price_label {
    display: block !important; font-size: 12px !important; line-height: 1.15 !important;
    color: #6a7b59 !important; font-weight: 500 !important; white-space: nowrap !important; margin: 0 !important;
  }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__price .price {
    font-size: 21px !important; line-height: 1.15 !important; color: #7a9a4e !important; white-space: nowrap !important;
  }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__price .vat_info {
    font-size: 12px !important; line-height: 1.15 !important; color: #6a7b59 !important; margin: 0 !important; white-space: nowrap !important;
  }
  .productdetails-fixed-form--bottom .productdetails-fixed-form__price .vat_info .shipment { color: #6a7b59 !important; }

  .productdetails-fixed-form--bottom .productdetails-fixed-form__right { gap: 16px !important; align-items: center !important; }
  .productdetails-fixed-form--bottom .productdetails-basket-action__wrapper .add-to-basket > .btn,
  .productdetails-fixed-form--bottom .productdetails-basket-action__wrapper > .btn {
    height: 46px !important; padding: 0 22px !important; white-space: nowrap !important; font-size: 14px !important;
  }
}
/* MwSt.-Zeile weg, wo es eng wird (steht in der Kaufbox darueber) */
@media (min-width: 768px) and (max-width: 899.98px) {
  .productdetails-fixed-form--bottom .productdetails-fixed-form__price .vat_info { display: none !important; }
}
/* Mengenwaehler weg, wo es eng wird (steht in der Kaufbox darueber) */
@media (min-width: 768px) and (max-width: 979.98px) {
  .productdetails-fixed-form--bottom .quantity-input { display: none !important; }
}


/* === Produktseite: PayPal-Hinweis, Galerie-Spalte, Lagerbestand/Countdown, Frage-Button === */
#ppc-productDetails-horizontal-container { padding-top: 10px; }

@media (min-width: 1200px) {
  .offset-xl-1 { margin-left: 3.33333%; }
  .col-xl-5 { flex: 0 0 46.6667%; max-width: 46.6667%; }
}

.product-actions__button.btn.btn-link.question { padding-right: 35px !important; }

/* Mobil: Text beim Fragezeichen-Button anzeigen (Desktop zeigt ihn schon).
   Hebt das sr-only aus _actions.scss gezielt nur fuer den Frage-Button auf. */
@media (max-width: 767.98px) {
  .product-actions__button.question .product-actions__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    font-size: 14px;
    line-height: 1.2;
  }
  .product-actions__button.btn.btn-link.question {
    padding-right: 12px !important;   /* breiter Rechts-Abstand entfaellt mobil */
    display: inline-flex;
    align-items: center;
  }
}

.recent-visits-stock { color: #AF3B26 !important; font-size: 16px !important; }
.flip-clock-divider.days { display: none; }
.flip-clock-divider.hours .top,
.flip-clock-divider.hours .bottom { display: none; }
.special_offer_countdown_clock_wrapper .title { font-style: normal !important; font-size: 16px !important; }
.special_offer_countdown_clock_wrapper .shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.05) !important; }


/* --- Lieferzeit-Zeile (Verschachtelung flach gezogen, //-Kommentare ersetzt) --- */
.estimated-delivery {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4em;
}
.estimated-delivery .eta-value {
    display: inline-flex;
    align-items: center;
    gap: .45em;          /* Abstand Werktage -> Info-Icon */
}

/* Info-Icon: theme-eigenen SVG-Versatz (top:.125em) aufheben + sauber zentrieren.
   Sitzt seit 2026-07-22 als eigenes Kind in .estimated-delivery (NICHT mehr im
   .eta-value-span, den das Konfigurator-AJAX ueberschreibt) und oeffnet das
   Aufklapp-Panel .cs-eta-info. */
.estimated-delivery .eta-info-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: 0;
    border: 0;
    background: none;
    color: #6a7b59;
    line-height: 0;
    cursor: pointer;
}
/* Trefferflaeche auf ~32px vergroessern, ohne die Zeile hoeher zu machen */
.estimated-delivery .eta-info-icon::before {
    content: "";
    position: absolute;
    top: -9px;
    right: -9px;
    bottom: -9px;
    left: -9px;
}
.estimated-delivery .eta-info-icon svg {
    position: relative;
    top: 0 !important;          /* entfernt den theme-Versatz nach unten */
    width: 1.05em !important;
    height: 1.05em !important;
    display: block;
}
.estimated-delivery .eta-info-icon:hover,
.estimated-delivery .eta-info-icon:focus { color: #46591f; }
.estimated-delivery .eta-info-icon:focus-visible {
    outline: 2px dashed #8da174;
    outline-offset: 2px;
}

/* --- Lieferzeit-Info-Panel (Aufklappen per Klick auf das i) --- */
.cs-eta-info[hidden] { display: none !important; }
.cs-eta-info {
    margin: .5rem 0 .1rem;
    padding: .7rem .85rem;
    border: 1px solid #e7ebe0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 .3rem .9rem rgba(47, 62, 70, .08);
    /* Einblenden per CSS-Animation (startet beim Wechsel display:none -> sichtbar).
       Bewusst KEINE JS-Klasse + requestAnimationFrame und KEIN animation-fill-mode:
       laeuft die Animation nicht (inaktiver Tab, reduzierte Bewegung), ist das
       Panel trotzdem sofort voll sichtbar statt bei opacity 0 einzufrieren. */
    animation: cs-eta-info-in .16s ease;
}
@keyframes cs-eta-info-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-eta-info { animation: none; }
}
.cs-eta-info__head {
    font-size: .95rem;
    font-weight: 700;
    color: #2f3e46;
    margin-bottom: .45rem;
}
.cs-eta-info__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cs-eta-info__list li {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .6rem;
    padding: .35rem 0;
    border-top: 1px solid #f0f2ec;
    font-size: .95rem;
    line-height: 1.4;
}
.cs-eta-info__list li:first-child { border-top: 0; padding-top: 0; }
.cs-eta-info__art {
    flex: 0 0 auto;
    font-weight: 600;
    color: #2f3e46;
}
/* 14rem-Basis: bleibt neben dem Label, solange dafuer Platz ist, und rutscht in
   schmalen Spalten (Mobil) komplett darunter statt in eine 3-Wort-Saeule. */
.cs-eta-info__time {
    flex: 1 1 14rem;
    color: #6a7b59;
}
.cs-eta-info__note {
    margin: .5rem 0 0;
    padding-top: .45rem;
    border-top: 1px solid #f0f2ec;
    font-size: .87rem;
    line-height: 1.45;
    color: #6a7b59;
}
.cs-eta-info__note a {
    color: #46591f;
    text-decoration: underline;
}

/* --- Versandkostenfreie Lieferung --- */
.delivery-shipping-free {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    margin-top: .4em;
    color: #8da174;
    font-weight: 500;
}
.delivery-shipping-free .icon-content svg {
    top: 0 !important;          /* gleicher Versatz-Fix fuer den Haken */
    width: 1.05em !important;
    height: 1.05em !important;
}
.delivery-shipping-free .shipment {
    color: inherit;
    text-decoration: none;
    cursor: help;
}


/* === Konfig-Zusammenfassung: Mobil (Karten-Look, ohne Scroll-Hinweise) === */
@media (max-width: 991.98px) {
  /* Desktop-Scroll-Hinweise hier ausblenden (kein interner Scroll auf Mobil) */
  #product-configuration-sidebar .cfg-more { display: none !important; }

  #product-configuration-sidebar {
    background: #fff !important; border: 1px solid rgba(0,0,0,.09) !important;
    border-radius: 16px !important; box-shadow: 0 8px 24px rgba(47,62,70,.12) !important;
    overflow: hidden !important; padding: 0 1.1rem 1rem 1.1rem !important;
  }
  #product-configuration-sidebar .panel-heading {
    margin: 0 -1.1rem 1rem -1.1rem !important; padding: .95rem 1.1rem !important;
    background: #f0f1f2 !important; border-bottom: 1px solid rgba(0,0,0,.07) !important;
  }
  #product-configuration-sidebar .panel-title {
    color: #2f3e46 !important; font-size: 1.6rem !important; line-height: 1.2 !important;
    margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: none !important;
    word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important;
  }
  #product-configuration-sidebar tbody.summary > tr:first-child > * { padding-bottom: .6rem !important; border-bottom: 1px solid rgba(0,0,0,.08); }
  #product-configuration-sidebar tbody.summary > tr > td,
  #product-configuration-sidebar tbody.summary > tr > th { padding-top: .4rem !important; padding-bottom: .4rem !important; }
}


/* ===================================================================
   Konfigurator-Look an die Zusammenfassung angeglichen (Karten-Set)
   Desktop + Mobil. Gruen/Anthrazit bleibt Buttons & Auswahl-Zustaenden
   vorbehalten; Neutralflaechen weiss/grau wie die Zusammenfassung.
   =================================================================== */

/* Schritt-Karten: weiss, feiner Rand, weicher Schatten (wie die Zusammenfassung) */
#cfg-container .cfg-group.card {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  box-shadow: 0 6px 20px rgba(47,62,70,.07) !important;
  border-radius: 16px !important;
}
#cfg-container .cfg-group:hover { background: #fafbfc !important; }

/* Auswahl-/Select-Felder: konsistenter Rahmen + Radius */
#cfg-container .cfg-group select.custom-select,
#cfg-container .cfg-group .form-control.custom-select {
  border: 1px solid rgba(0,0,0,.15) !important;
  border-radius: 12px !important;
}

/* Option-Karten: konsistente Radien (aktiver/empfohlener Zustand bleibt gruen = Auswahl) */
#cfg-container .config-item.active,
#cfg-container .config-item.bg-recommendation:not(.active) { border-radius: 16px !important; }

/* Pills/Status an die Summary-Pillen angleichen (gleiche Grau-/Gruentoene) */
#cfg-container .cfg-step-status.is-open { background: #e9ecef !important; color: #6c757d !important; border-color: #dfe3e6 !important; }
#cfg-container .cfg-step-status.is-done,
#cfg-container .cfg-step-status.is-optional { background: #eef3e3 !important; color: #46591f !important; border-color: #dbe6bf !important; }
#cfg-container .cfg-step-status.is-standard { background: #eaeef0 !important; color: #2f3e46 !important; border-color: #cfd8dc !important; }


/* Gruenes Hover des Schritt-Kopfes an die Karte angleichen
   (Karte 16px aussen + 1px Rand -> innen 15px). Vorher 1.5rem=22,5px -> zu rund. */
#cfg-container .cfg-group .cfg-toggle-btn { border-radius: 15px; }


/* ============================================================================
   VARIANTE D — Abgrenzung: nummerierte Schritt-Karte + Options-Kacheln
   - Schritt-Nummer (.cfg-step) als Kreis-Badge (anthrazit)
   - jede Option (Radio/Swatch, nicht Dropdown) als abgegrenzte Kachel
   - empfohlen = DEZENT (weiß + zarter Rahmen + Badge), gewählt = kräftiges Grün + Füllung
   - mehr Luft zwischen den Schritten (Schritt-Identität)
   ============================================================================ */
#cfg-container .cfg-group-list-wrapper{ counter-reset: cfgstep; }
#cfg-container .cfg-group-list-wrapper > .cfg-group{ counter-increment: cfgstep; }
#cfg-container .cfg-toggle-btn .cfg-step{
  flex:0 0 auto; display:inline-flex !important; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 7px; margin-right:10px !important;
  background:#2f3e46; color:#fff !important; border-radius:999px;
  font-size:0 !important;            /* das "N." aus dem Template ausblenden */
  font-weight:700; line-height:1;
}
#cfg-container .cfg-toggle-btn .cfg-step::before{
  content: counter(cfgstep); font-size:14px; line-height:1;   /* Nummer OHNE Punkt */
}
#cfg-container .config-item-list .config-item:not(.config-option-dropdown){
  border:1px solid #d7dbcf !important; border-radius:12px !important; background:#fff !important;
  margin:0 0 9px !important; padding:11px 13px !important;
}
/* Checkbox-Optionen (z.B. Zubehör) wirkten oben-lastig -> oben etwas weniger,
   unten minimal mehr Innenabstand (ausgewogener). */
#cfg-container .config-item-list .config-item--custom-input{
  padding-top:8px !important; padding-bottom:14px !important;
}
/* Empfehlung = DEZENT: nur zarter soft-grüner Rahmen (kein grüner Fill), das
   "Empfehlung von uns"-Badge ist das eigentliche Signal. NICHT die Auswahlfarbe. */
#cfg-container .config-item-list .config-item.bg-recommendation:not(.active){
  border:1.5px solid #dbe6bf !important; background:#fff !important;
}
/* Ausgewählt = kräftiger grüner Rahmen + warme Salbei-Füllung (frisch, nicht "traurig"). */
#cfg-container .config-item-list .config-item.active{
  border:2px solid #7a9a4e !important; background:#eaf1dc !important;
}
/* Vorbelegter, NOCH NICHT bestaetigter Schritt (cfg-st-standard): die aktive Option
   NICHT gruen "erledigt" zeigen, sondern nur einen dezenten grauen Rahmen ("das ist
   vorausgewaehlt"). Erst Bestaetigung/Aenderung -> cfg-st-done -> normale gruene Optik. */
#cfg-container .cfg-st-standard .config-item-list .config-item.active,
#cfg-container .cfg-st-standard .config-item.active{
  border:1.5px solid #aab4b8 !important; background:#f7f9fa !important;
}
#cfg-container .cfg-st-standard .config-item.active::after{ content:none !important; }
#cfg-container .cfg-st-standard .custom-control-input:checked ~ .custom-control-label::before{
  background-color:#aab4b8 !important; border-color:#aab4b8 !important;
}
/* "Weiter zum naechsten Schritt" erst zeigen, wenn bestaetigt/geaendert (gruener
   Rahmen = cfg-st-done). Solange nur vorbelegt (cfg-st-standard): Button ausblenden,
   damit der Kunde nicht ungeprueft durchklickt. */
#cfg-container .cfg-st-standard .cfg-next-btn{ display:none !important; }
/* Details-Button im vorbelegten Schritt bleibt DEZENT (Variante C, nicht gruen) —
   erst nach Bestaetigung (cfg-st-done) darf er gruen fuellen. Wie die Option selbst. */
#cfg-container .cfg-st-standard .config-item.active .careakko .opc-Accordion-head.btn-link{
  background:#fff !important; color:#6a7b59 !important; box-shadow:inset 0 0 0 1.5px #e2e5e0 !important;
}
#cfg-container .cfg-st-standard .config-item.active .careakko .opc-Accordion-head .icon-content--toggle{
  background:#eef0ec !important;
}
#cfg-container .cfg-st-standard .config-item.active .careakko .icon-content--toggle svg{
  color:#8a9282 !important;
}
/* Erste Option nicht flush unter dem Schritt-Kopf: etwas Luft, sobald der Schritt
   GEFUELLT ist (done/standard = kein "Bitte waehlen"-Balken davor). Der aktuelle
   Schritt (cfg-st-open/-current mit Balken) bleibt unveraendert. */
#cfg-container .cfg-st-done .padding20,
#cfg-container .cfg-st-standard .padding20,
#cfg-container .cfg-st-optional .padding20{ padding-top:12px !important; }
#cfg-container .cfg-group.card{ margin-bottom:16px !important; }

/* Schritt-Kopf bleibt sichtbar, solange man die Optionen des Schritts scrollt
   (sticky innerhalb der Schritt-Karte; löst sich, wenn der Schritt durchgescrollt ist).
   top = unter der klebenden Seiten-Navi. Hintergrund deckt die durchscrollenden Optionen ab. */
#cfg-container .cfg-group.card > .cfg-group-title{
  position: sticky;
  /* FLUSH unter der Sticky-Leiste (var 59 - 5 = 54 = Sticky-Höhe). KEIN 5px-Spalt hier,
     sonst scheinen Optionen/Hintergrund zwischen Sticky-Leiste und Kopf durch (Peek).
     Die 5px Luft bleiben nur an der Sidebar (var), nicht am Schritt-Kopf. */
  top: calc(var(--adm-sticky-top-offset, 59px) - 5px);
  z-index: 20;                             /* deckt die durchscrollenden Optionen sicher ab */
  background: #fff;
  border-left: 1px solid rgba(0,0,0,.09);  /* Karten-Rahmen seitlich fortführen */
  border-right: 1px solid rgba(0,0,0,.09);
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 7px 12px -7px rgba(47,62,70,.20);   /* trennt den Kopf klar von den Optionen darunter */
  border-radius: 15px 15px 0 0;
  margin-left: -1px; margin-right: -1px;   /* Seitenrahmen bündig auf den Kartenrand legen */
}


/* ============================================================================
   M2 — Schritt-Status sichtbar machen (Aufsatz auf Variante D):
   - farbiger Status-Balken links an jeder Schritt-Karte
   - Nummer-Badge in Statusfarbe (erledigt=grün+Haken, offen=grau, optional=salbei)
   - der aktuell fällige Schritt (erster offener Pflicht-Schritt = .cfg-current)
     wird GOLD hervorgehoben (Karte, Ring, Badge, Pille "jetzt wählen")
   Status-Klassen (cfg-st-done/-open/-optional, cfg-current) setzt config_container.tpl.
   ============================================================================ */
/* Status-Balken = inset box-shadow (4px links). Folgt dem border-radius an ALLEN
   Ecken -> rundet oben wie unten sauber mit, KEIN Border-Wrap um die Ecke und KEINE
   Ecken-Luecken. Auf Karte (Body) UND Sticky-Kopf (Header) legen, damit der Balken
   durchgeht (Kopf hat oben 15px-Radius, Karte unten 16px). */
#cfg-container .cfg-group.card                    { box-shadow: 0 6px 20px rgba(47,62,70,.07), inset 4px 0 0 #c7cdbe !important; }
#cfg-container .cfg-group.cfg-st-done             { box-shadow: 0 6px 20px rgba(47,62,70,.07), inset 4px 0 0 #7a9a4e !important; }
#cfg-container .cfg-group.cfg-st-optional         { box-shadow: 0 6px 20px rgba(47,62,70,.07), inset 4px 0 0 #cbd8a6 !important; }
#cfg-container .cfg-group.cfg-st-standard         { box-shadow: 0 6px 20px rgba(47,62,70,.07), inset 4px 0 0 #aab4b8 !important; }
#cfg-container .cfg-group.card > .cfg-group-title { box-shadow: 0 7px 12px -7px rgba(47,62,70,.20), inset 4px 0 0 #c7cdbe; }
#cfg-container .cfg-st-done > .cfg-group-title    { box-shadow: 0 7px 12px -7px rgba(47,62,70,.20), inset 4px 0 0 #7a9a4e; }
#cfg-container .cfg-st-optional > .cfg-group-title{ box-shadow: 0 7px 12px -7px rgba(47,62,70,.20), inset 4px 0 0 #cbd8a6; }
#cfg-container .cfg-st-standard > .cfg-group-title{ box-shadow: 0 7px 12px -7px rgba(47,62,70,.20), inset 4px 0 0 #aab4b8; }

/* Nummer-Badge je Status (Basis = anthrazit aus Variante D) */
#cfg-container .cfg-st-open .cfg-toggle-btn .cfg-step     { background:#eef1ec !important; color:#8a938a !important; }
#cfg-container .cfg-st-optional .cfg-toggle-btn .cfg-step { background:#f3f5ef !important; color:#6a7b59 !important; }
#cfg-container .cfg-st-standard .cfg-toggle-btn .cfg-step { background:#e7ebed !important; color:#2f3e46 !important; }
#cfg-container .cfg-st-done .cfg-toggle-btn .cfg-step     { background:#7a9a4e !important; color:#fff !important; }
#cfg-container .cfg-st-done .cfg-toggle-btn .cfg-step::before{ content:"\2713"; }   /* Haken statt Nummer */
#cfg-container .cfg-current .cfg-toggle-btn .cfg-step     { background:#E8A200 !important; color:#fff !important; }

/* Aktueller Schritt: GANZE Box im Gelbton (Nutzerwunsch) + Gold-Rahmen + weicher
   Ring. Kopf gleich getoent -> eine Einheit. */
#cfg-container .cfg-group.cfg-current{
  border-color:#E8A200 !important; background:#fdf9ef !important;
  box-shadow:0 0 0 2px rgba(232,162,0,.28), 0 6px 20px rgba(47,62,70,.10), inset 4px 0 0 #E8A200 !important;
}
#cfg-container .cfg-group.cfg-current > .cfg-group-title{
  background:#fdf9ef !important;
  box-shadow:0 7px 12px -7px rgba(47,62,70,.20), inset 4px 0 0 #E8A200;
}
#cfg-container .cfg-current .cfg-step-status.is-open{
  background:#fff !important; color:#8a6a12 !important; border-color:#e6d199 !important;
}
/* Weil die ganze Box schon gelb ist: die "Bitte waehlen Sie eine Option"-Leiste
   ENTRAHMEN (kein eigener Kasten/Rand mehr) -> nur noch Text im Gelbton, sonst
   doppelt-gemoppelt (Nutzerwunsch: Rahmen weg). */
/* ALLE Schritte (nicht nur der aktive): etwas Luft links (Inhalt klebt sonst am
   Farbbalken) -> alles im Body startet an DIESER Kante. */
#cfg-container .padding20{ padding-left:14px !important; padding-right:14px !important; }
/* "Bitte waehlen" auf den TEXT im Dropdown ausrichten (nicht die Box-Kante) + Luft
   zum Kopf; entrahmt (nur Text, kein gelber Kasten) -> einheitlich in JEDEM Schritt.
   padding20 hat 14px + der Select-Text ist noch ~16px eingerueckt -> hier 16px. */
#cfg-container .cfg-group-info{ margin:16px 0 12px !important; padding-left:16px !important; }
#cfg-container .cfg-group-info .badge,
#cfg-container .cfg-group-info .badge-info{
  display:block !important; margin:0 !important;
  background:transparent !important; border:0 !important; border-radius:0 !important;
  padding:0 !important; color:#8a6a12 !important;
}
/* Dropdown-Feld linksbuendig zur "Bitte waehlen"-Zeile (Basis .config-item hat
   padding-left:8px -> das Feld sass 8px eingerueckt). Voll ausrichten. */
#cfg-container .config-item.config-option-dropdown{ padding-left:0 !important; padding-right:0 !important; }

/* EINGEKLAPPTE Karten: der Sticky-Kopf ist die ganze Karte, war aber unten eckig
   (border-radius 15px 15px 0 0) -> unten links "fehlte" der Radius und der Balken
   endete eckig. Fix: Kopf voll runden (16px) + Body-Trenn-Schatten weg (kein Body da),
   nur der inset-Balken bleibt -> rundet unten sauber mit. */
#cfg-container .cfg-group.card:not(:has(> .collapse.show)) > .cfg-group-title{ border-radius:16px !important; }
#cfg-container .cfg-st-done.card:not(:has(> .collapse.show)) > .cfg-group-title    { box-shadow: inset 4px 0 0 #7a9a4e !important; }
#cfg-container .cfg-st-open.card:not(:has(> .collapse.show)) > .cfg-group-title    { box-shadow: inset 4px 0 0 #c7cdbe !important; }
#cfg-container .cfg-st-optional.card:not(:has(> .collapse.show)) > .cfg-group-title{ box-shadow: inset 4px 0 0 #cbd8a6 !important; }
#cfg-container .cfg-st-standard.card:not(:has(> .collapse.show)) > .cfg-group-title{ box-shadow: inset 4px 0 0 #aab4b8 !important; }
/* Hover-Flaeche des Kopfes darf den Kartenradius nicht ueberlagern: Button-Radius
   an die Karte angleichen (16px) statt 15px (15px war "eckiger" -> ragte in die
   runde Ecke). */
#cfg-container .cfg-group .cfg-toggle-btn{ border-radius:16px; }
/* Angepinnter Schritt-Kopf (sticky "stuck", Klasse via Scroll-Check in
   config_container.tpl): obere Radien weg -> sitzt buendig unter der Menueleiste,
   einheitlicher Look. Zweiter Selektor = hoehere Spezifitaet, damit is-stuck auch
   die Collapsed-Regel (border-radius:16px) schlaegt. */
#cfg-container .cfg-group.card > .cfg-group-title.is-stuck,
#cfg-container .cfg-group.card:not(:has(> .collapse.show)) > .cfg-group-title.is-stuck{
  border-top-left-radius:0 !important; border-top-right-radius:0 !important;
}


/* Galerie-Bild (Lightbox) mit .bild-radius12: den eckigen Thumbnail-Rahmen an den Radius
   angleichen. Rahmen + Schatten BLEIBEN (zeigt, dass es klickbar ist), werden aber rund;
   das Bild rundet innen mit. Greift NUR, wenn .bild-radius12 gesetzt ist. */
#cfg-container .bild-radius12 .kk-gallery-image-link{ border-radius:12px !important; overflow:hidden; }
#cfg-container .bild-radius12 .kk-gallery-image{ border-radius:11px !important; }


/* ============================================================================
   Menge + Warenkorb (B1) — Kaufbox (#cs-buybox) + Zusammenfassungs-Fuss.
   EIN Block, Desktop + Mobil. Ersetzt alle frueheren #cs-buybox- und
   .product-configuration-basket-add-Stepper-Regeln.
   ============================================================================ */

/* Kaufbox unter dem Produktbild.
   flex:0 0 100% + width:100% ZWINGEND: der Flex-Parent .basket-action-wrapper.product-buy
   ist justify-content:space-between -> ohne das saesse die Buybox neben den Aktions-Icons
   statt in eigener voller Zeile. (Fehlte im Backend-Paste.) */
#cs-buybox{ flex:0 0 100% !important; width:100% !important; margin:0 0 .75rem; display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; }
.cs-delivery-with-actions{ flex:0 0 100%; }
#cs-buybox > a{ flex:0 0 100%; order:0; margin:0; }                              /* Konfigurieren = volle Zeile */
/* Konfigurieren-Button anthrazit (Theme-Default .btn-secondary waere #6c757d-Grau).
   Diese Regel fehlte im Backend-Paste -> hier nachgetragen. */
#cs-buybox .js-start-configuration.start-configuration{
  color:#fff; background:#2f3e46; border-color:#2f3e46;
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:50px; border-radius:24px;
  padding:0 18px;                                /* symmetrisch -> Inhalt mittig (Theme-Padding 15px re/unten neutralisiert) */
}
#cs-buybox .js-start-configuration.start-configuration:hover,
#cs-buybox .js-start-configuration.start-configuration:focus{
  color:#fff; background:#26333a; border-color:#26333a;
}
#cs-buybox > #cs-qty-row{ flex:0 0 auto; order:1; width:auto; margin:0; display:flex; align-items:stretch; }
#cs-buybox > .basket-action-wrapper{ flex:1 1 0; width:auto !important; order:2; margin:0; min-width:0; display:flex; align-items:stretch; }
#cs-buybox .product-actions__spacer{ display:none; }                             /* Spacer zwischen Menge u. Warenkorb aus */
/* Warenkorb mobil = Icon + Text (rein per CSS, KEIN Template/templates_c noetig).
   Das Theme rendert <=768 (isMobile) nur das Cart-Icon im Label; den Text haengen
   wir per ::after an – nur wenn ein Icon da ist (:has -> keine Dopplung auf Desktop,
   wo schon der Text steht). */
@media (max-width:768px){
  #cs-buybox .basket-action-wrapper .add-to-basket__label:has(.icon-content){
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
  }
  #cs-buybox .basket-action-wrapper .add-to-basket__label:has(.icon-content)::after{
    content:"In den Warenkorb"; white-space:nowrap; font-weight:inherit; line-height:1;
  }
  #cs-buybox .basket-action-wrapper .add-to-basket__label .icon-content{ display:inline-flex; align-items:center; }
  #cs-buybox .basket-action-wrapper .add-to-basket__label .icon-content svg{ width:20px; height:20px; }
}
#cs-buybox > .basket-action-wrapper .btn{
  width:100%; min-height:48px; border-radius:24px;
  display:flex; align-items:center; justify-content:center; white-space:nowrap; font-size:14px;
}
@media (max-width:768px){
  /* 10px Abstand symmetrisch: per padding INNERHALB der width:100% (border-box),
     NICHT per margin – sonst schiebt der linke Margin die volle Breite nach rechts
     und sie laeuft rechts ueber (links 32 / rechts 12). */
  #cs-buybox{ margin:10px 0 !important; padding:0 6px !important; box-sizing:border-box !important; align-items:center !important; }
  #cs-buybox #cs-qty-row, #cs-buybox #cs-qty-row .form-group,
  #cs-buybox > .basket-action-wrapper{ align-items:center !important; }
  /* Menge + Warenkorb gleich hoch = 52px (Icon darf nicht aufblähen) */
  #cs-buybox #cs-qty-row .js-spinner,
  #cs-buybox > .basket-action-wrapper .btn,
  #cs-buybox .basket-action-wrapper .btn{
    height:52px !important; min-height:52px !important; max-height:52px !important;
    padding-top:0 !important; padding-bottom:0 !important; align-self:center !important;
  }
  /* Mengen-Pille 10px nach unten verschoben (rein optisch, Layout bleibt) */
  #cs-buybox #cs-qty-row .js-spinner{ position:relative; top:6px; }
  #cs-buybox .basket-action-wrapper .icon-content{ height:20px !important; padding:0 !important; line-height:1 !important; }
  #cs-buybox .basket-action-wrapper .icon-content svg{ width:20px !important; height:20px !important; }
}

/* Zusammenfassungs-Fuss */
.panel-footer.product-configuration-basket-add{ display:flex; align-items:stretch; flex-wrap:nowrap; gap:8px; }
.panel-footer.product-configuration-basket-add .form-group{ margin:0; flex:0 0 auto; }
.panel-footer.product-configuration-basket-add .product-actions__spacer{ display:none; }
.panel-footer.product-configuration-basket-add .add-to-basket{ flex:1 1 0; min-width:0; }
.panel-footer.product-configuration-basket-add .add-to-basket .btn{
  width:100%; height:48px; border-radius:24px; white-space:nowrap; font-size:13px; padding:0 8px;
  display:flex; align-items:center; justify-content:center;
}

/* Mengen-Pille — beide Stellen identisch */
#cs-buybox #cs-qty-row .js-spinner,
.panel-footer.product-configuration-basket-add .js-spinner{
  display:inline-flex !important; align-items:center; align-self:stretch;
  width:auto !important; min-height:48px; border:1px solid #d4d8dc; border-radius:24px; padding:0 2px; background:#fff;
}
#cs-buybox #cs-qty-row .js-spinner .js-spinner-button,
.panel-footer.product-configuration-basket-add .js-spinner .js-spinner-button{
  border:0 !important; border-radius:0 !important; background:transparent !important; opacity:1 !important;
  width:34px !important; min-width:34px !important; height:auto !important; align-self:stretch; color:#2f3e46;
}
#cs-buybox #cs-qty-row .js-spinner-input > input,
.panel-footer.product-configuration-basket-add .js-spinner-input input{ min-width:24px !important; }


/* ============================================================================
   careshop – Konfigurator-Option: VARIANTE 3c  (ueber eigene Klassen)
   - careakko  = Collapse/Accordion-Wrapper  -> "DETAILS ANZEIGEN" als Balken
                 mit Chevron im gruenen Kreis
   - caredrop  = Drop-Container (ganzer Option-Inhalt) -> Styling-Hook
   - Kopf responsiv: Optionsname bleibt einzeilig (Preis weicht via dl-Grid aus)
   ============================================================================ */

/* --- Card-Huelle des Collapse neutralisieren, damit der Button frei als Balken steht. --- */
#cfg-container .careakko,
#cfg-container .careakko .card,
#cfg-container .careakko .opc-Accordion-group,
#cfg-container .careakko .card-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
#cfg-container .careakko h2 { margin: 0; }

/* --- "Details anzeigen" als Balken --- */
#cfg-container .careakko .opc-Accordion-head.btn-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #fff;                 /* Variante C: Outline/Ghost — weiß + dünner grauer Rahmen */
    color: #6a7b59;
    box-shadow: inset 0 0 0 1.5px #e2e5e0;
    border: 0;
    border-radius: 24px;
    padding: 6px 8px 6px 18px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
/* GRÜN gefüllt (Rahmen weg) nur bei Hover/Fokus ODER wenn die Option ausgewählt ist. */
#cfg-container .careakko .opc-Accordion-head.btn-link:hover,
#cfg-container .careakko .opc-Accordion-head.btn-link:focus,
#cfg-container .config-item.active .careakko .opc-Accordion-head.btn-link {
    background: #d8e6bf;
    color: #46591f;
    box-shadow: none;
}

/* Chevron rechts in gruenem Kreis */
#cfg-container .careakko .opc-Accordion-head .icon-content--toggle {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-left: 12px;
    border-radius: 50%;
    background: #eef0ec;              /* Chevron-Kreis dezent grau (Variante C) */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    --size: .6;
}
#cfg-container .careakko .opc-Accordion-head .icon-content--toggle svg {
    width: 14px;
    height: 14px;
    color: #8a9282;                  /* grauer Chevron als Standard */
    fill: currentColor;
}
/* Chevron-Kreis grün bei Hover/Fokus ODER Auswahl */
#cfg-container .careakko .opc-Accordion-head.btn-link:hover .icon-content--toggle,
#cfg-container .careakko .opc-Accordion-head.btn-link:focus .icon-content--toggle,
#cfg-container .config-item.active .careakko .opc-Accordion-head .icon-content--toggle {
    background: #8da174;
}
#cfg-container .careakko .opc-Accordion-head.btn-link:hover .icon-content--toggle svg,
#cfg-container .careakko .opc-Accordion-head.btn-link:focus .icon-content--toggle svg,
#cfg-container .config-item.active .careakko .icon-content--toggle svg {
    color: #fff;
}

/* --- Drop-Container: .caredrop = Hook fuer den ganzen Option-Inhalt.
   (Aktuell ohne eigene Regeln; bei Bedarf hier einen Regelsatz anlegen, um
   Abstaende/Hintergrund der ganzen Option zu steuern.) --- */
/* Optional: Feature-Pillen, falls du im Drop <span class="cfg-chip">…</span> nutzt */
.caredrop .cfg-chip,
.cfg-chip {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #46591f;
    background: #dbe6bf;
    border-radius: 16px;
    padding: 4px 11px;
    margin: 0 6px 6px 0;
    white-space: nowrap;
}

/* --- Kopf: Preis NEBEN den Namen. Zu schmal (<560px) -> Preis zweite Zeile. --- */
#cfg-container .config-item dl {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
}
#cfg-container .config-item dl .custom-control { flex: 1 1 auto; }
#cfg-container .config-item dl .badge.border-primary,
#cfg-container .config-item dl .badge.badge-light { margin-left: auto !important; }
#cfg-container .config-item dl .config-item__description { flex: 1 1 100%; width: 100%; }

/* --- Option-Layout: Bild + Text nebeneinander, kompakt – AUCH auf Mobil. --- */
.caredrop .grid-system-row {
    flex-wrap: nowrap !important;
    column-gap: 14px !important;
    align-items: flex-start !important;
}
.caredrop .grid-system-row > .grid-space:first-child {
    flex: 0 0 150px !important;
    width: 150px !important;
    max-width: 150px !important;
}
.caredrop .grid-system-row > .grid-space:last-child {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
}
/* Mobil (<=768px): kleines Bild links als Float, Details darunter ueber ganze Breite. */
@media (max-width: 768px) {
    .caredrop .grid-system-row { display: block !important; }
    .caredrop .grid-system-row > .grid-space:first-child {
        float: left !important;
        width: 120px !important;
        max-width: 120px !important;
        margin: 0 12px 6px 0 !important;
    }
    .caredrop .grid-system-row > .grid-space:last-child {
        display: block !important;
        width: auto !important;
        min-width: 0;
    }
    .caredrop .careakko { clear: both; }
    /* Options-Bild NICHT beschneiden, sondern verkleinern: Bild + Radius-Box fluid in die
       schmale Spalte (Bild ist sonst fix 150px in einem overflow:hidden-Container .bild-radius12
       -> der Ueberstand wird abgeschnitten). Greift fuer alle Konfig-Options-Bilder. */
    #cfg-container .bild-radius12,
    #cfg-container .bild-radius12 .kk-image-banner,
    #cfg-container .bild-radius12 .kk-image-banner-img,
    #cfg-container .bild-radius12 img {
        width: 100% !important; max-width: 100% !important; height: auto !important;
    }
}
/* Abstaende in der Optionsspalte verkleinern (Dropper-Standard war margin-top:10px) */
.caredrop .text_before_popup { margin-top: 5px !important; }

/* --- "Pille" caretextpill: GRAU und schlank. --- */
.caretextpill {
    display: block;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 2px 0;
    color: #46591f;
    font-weight: 500;
    font-size: .87rem;
    line-height: 1.5;
}
.caretextpill::before {
    content: "\2713";
    color: #8da174;
    font-weight: 700;
    margin-right: 6px;
}

/* --- "Weiter zum naechsten Schritt": runder + leicht eingerueckt --- */
#cfg-container .cfg-next-btn {
    display: block;
    width: calc(100% - 20px) !important;
    margin: 14px auto 8px !important;
    border-radius: 22px !important;
}

/* --- NUR Desktop (>=768px): die zwei langen Balken kuerzen und am Bild/Text ausrichten. --- */
@media (min-width: 768px) {
    .caredrop .careakko {
        margin-right: 150px;
    }
    #cfg-container .cfg-next-btn {
        width: calc(100% - 349px) !important;
        margin: 14px 0 8px 184px !important;
    }
}

/* --- (ENTFERNT 2026-07-01) Legacy-Regeln der ALTEN "Bitte wählen"-Pille.
   Sie stachen mit !important die neue gelbe Sticky-Leiste (Block "Hinweis
   Bitte waehlen" oben) aus und verursachten die wiederkehrenden Bugs:
   - badge border-radius:12px !important  -> obere Radien kamen zurück
   - cfg-group-info margin-top:10px !important -> Spalt/Peek unterm Kopf
   Werte, die bleiben sollten, sind in die Ursprungs-Blöcke gewandert
   (padding20 padding-top:0 -> Zeile ~110; collapse-margin entfällt = flush). --- */


/* ============================================================================
   Konfigurator-Gedaechtnis (js/cfg-memory.js): Speichern/Laden-Box in der
   Zusammenfassung + Wiederherstellungs-Toast. CI-Farben.
   ============================================================================ */
#cshcfg-box { margin: 14px 0 2px; text-align: center; }   /* mittige Pille UNTER dem Warenkorb-Button */
#cshcfg-box .cshcfg-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: #f7f9f2; border: 1px solid #dbe6bf; border-radius: 999px;
  padding: 9px 18px; cursor: pointer;
  font-size: .87rem; font-weight: 600; color: #6a7b59;
}
#cshcfg-box .cshcfg-toggle svg { width: 15px; height: 15px; flex: 0 0 auto; }
#cshcfg-box .cshcfg-toggle:hover { color: #46591f; background: #eef3e3; text-decoration: none; }
#cshcfg-box .cshcfg-panel { margin-top: 8px; }
#cshcfg-box .cshcfg-row { display: flex; gap: 6px; margin-bottom: 7px; }
#cshcfg-box .cshcfg-row input {
  flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px;
  border: 1px solid #dbe6bf; border-radius: 17px; font-size: .87rem; color: #2f3e46;
}
#cshcfg-box .cshcfg-row input:focus { outline: none; border-color: #8da174; box-shadow: 0 0 0 3px rgba(141,161,116,.18); }
#cshcfg-box .cshcfg-out { background: #f7f9f2; font-weight: 700; letter-spacing: .03em; }
#cshcfg-box .cshcfg-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 13px; border: 0; border-radius: 17px;
  background: #cbd8a6; color: #333 !important; font-size: .87rem; font-weight: 700; cursor: pointer;
  white-space: nowrap; text-decoration: none !important; transition: background .15s;
}
#cshcfg-box .cshcfg-btn:hover { background: #bccb92; }
/* Teilen-Zeile: Buttons duerfen umbrechen (schmale Sidebar) */
#cshcfg-box .cshcfg-share { flex-wrap: wrap; }
#cshcfg-box .cshcfg-load { background: #7a9a4e; color: #fff; }
#cshcfg-box .cshcfg-load:hover { background: #6c8a44; }
#cshcfg-box .cshcfg-hint { margin: 0; font-size: .87rem; line-height: 1.45; color: #6a7b59; }

.cshcfg-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  z-index: 100090;                       /* ueber Sticky, Theme-Modals UND dem Teilen-Modal (100080) */
  display: flex; align-items: center; gap: 12px;
  background: #2f3e46; color: #fff; padding: 12px 18px; border-radius: 999px;
  font-size: .9rem; font-weight: 600; box-shadow: 0 10px 28px rgba(0,0,0,.3);
  opacity: 0; transition: opacity .3s, transform .3s; max-width: 92vw;
}
.cshcfg-toast.show { opacity: 1; transform: translate(-50%, 0); }
.cshcfg-toast .cshcfg-toast-reset {
  flex: 0 0 auto; border: 0; border-radius: 999px; padding: 5px 12px;
  background: #cbd8a6; color: #333; font-size: .87rem; font-weight: 700; cursor: pointer;
}
.cshcfg-toast .cshcfg-toast-reset:hover { background: #bccb92; }

/* ===== Phase 2a: Warenkorb-Button (Konfigurator-Sidebar) spiegelt Pflicht-Fortschritt =====
   pending = Pflichtschritte offen (gedämpft grau), ready = alles gewählt (kräftiges Grün).
   Klassen setzt syncCartBtn() in config_container.tpl. */
#product-configuration-sidebar button.cfg-cart-pending { background: #e6e9e1 !important; }
#product-configuration-sidebar button.cfg-cart-pending,
#product-configuration-sidebar button.cfg-cart-pending .add-to-basket__label { color: #6a7b59 !important; font-weight: 600; }
#product-configuration-sidebar button.cfg-cart-ready { background: #7a9a4e !important; }
#product-configuration-sidebar button.cfg-cart-ready,
#product-configuration-sidebar button.cfg-cart-ready .add-to-basket__label { color: #ffffff !important; }

/* ===== Konfigurator-Feinschliff (2026-07-10) ===== */
/* #1: Offener Banner schlanker + "einklappen" dezent (kein prominenter "schließen"-Schalter) */
#cfg-toggle-banner.is-open { padding:12px 18px; }
#cfg-toggle-banner.is-open .ctb-title { font-size:1rem; }
#cfg-toggle-banner.is-open .ctb-action { background:transparent; color:#6a7b59; font-weight:600; padding:6px 6px; font-size:.87rem; }
#cfg-toggle-banner.is-open .ctb-action:hover { color:#2f3e46; }

/* #2: Trenner "Optional ergänzen" vor dem ersten optionalen Schritt (JS setzt .cfg-optional-divider) */
.cfg-optional-divider { display:flex; align-items:center; gap:12px; margin:22px 0 12px; color:#6a7b59; font-size:.95rem; font-weight:700; }
.cfg-optional-divider::before, .cfg-optional-divider::after { content:""; flex:1; height:1px; background:#e0e4d8; }
.cfg-optional-divider span { flex:0 0 auto; }

/* #5: "Alter Preis" (UVP, durchgestrichen) dezent + kompakt – nicht als dritte prominente Preiszahl */
.price_wrapper .instead_of.old_price { font-size:.87rem; color:#9aa593; margin-top:1px; }
.price_wrapper .instead_of.old_price del,
.price_wrapper .instead_of.old_price del.value { color:#9aa593; text-decoration-thickness:1px; }

/* Mobil-Fix: Pending-Warenkorb-Button ("Noch N Angaben wählen") lief mobil über den
   Button-Rand (Versalien zu breit für den schmalen Button neben dem Mengen-Stepper).
   Gemischte Schreibweise + Umbruch-Sicherheit + etwas kleiner auf schmalen Screens. */
#product-configuration-sidebar button.cfg-cart-pending,
#product-configuration-sidebar button.cfg-cart-pending .add-to-basket__label {
  text-transform: none; white-space: normal; line-height: 1.15;
}
@media (max-width: 767px) {
  #product-configuration-sidebar button.cfg-cart-pending { font-size: .87rem; padding-left: 8px; padding-right: 8px; }
}

/* Summary "Ihre Konfiguration": Gruppenname als Block, damit der ERSTE Punkt einer
   Gruppe nicht neben dem Gruppennamen fließt (war eingerückt + Preis nicht rechtsbündig).
   So richten alle Punkte einer Gruppe gleich aus. */
#product-configuration-sidebar .cfg-summary-item a.cfg-group { display: block; margin-bottom: 2px; }

/* === Variations-Label (Freifeld) auf CI-Typo-Skala ====================== */
/* Theme-Default war 1.5rem/700 (= CI-Rolle "Gesamtsumme", viel zu gross fuer ein
   Label). Auf CI-Rolle "Titel" 1.1rem/700 gebracht. Die Info-Pille (.csg-pill,
   font-size .82em) skaliert relativ mit -> automatisch ~0.9rem. Siehe
   corporate-identity-typografie. */
legend.freifeld__label { font-size: 1.1rem; font-weight: 700; line-height: 1.3; }

/* Konfigurator-Gedächtnis: Rückfrage-Banner (gespeicherte Konfig >30 s alt -> fragen statt still anwenden) */
.cshcfg-restore { display:flex; align-items:flex-start; gap:12px; background:#eef3e3; border:1px solid #dbe6bf; border-radius:12px; padding:13px 15px; margin:0 0 14px; font-family:inherit; }
.cshcfg-restore > svg { flex:0 0 auto; margin-top:1px; color:#46591f; }
.cshcfg-restore-body { flex:1; min-width:0; }
.cshcfg-restore-title { font-size:1rem; font-weight:700; color:#2f3e46; line-height:1.3; }
.cshcfg-restore-meta { font-size:.87rem; color:#6a7b59; margin-top:2px; }
.cshcfg-restore-meta b { color:#2f3e46; font-weight:700; }
.cshcfg-restore-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.cshcfg-restore-yes { background:#7a9a4e; color:#fff; border:0; border-radius:999px; padding:7px 16px; font-size:.87rem; font-weight:700; cursor:pointer; }
.cshcfg-restore-yes:hover { background:#6c8a44; }
.cshcfg-restore-no { background:#fff; border:1px solid #dbe6bf; color:#46591f; border-radius:999px; padding:7px 16px; font-size:.87rem; font-weight:700; cursor:pointer; }
.cshcfg-restore-no:hover { background:#f3f6ec; }


/* === Produktgalerie: Bilder im CI-Radius (Card = 16px) ================== */
/* Die Galeriebilder wirkten eckig, obwohl die Bilder selbst schon Radius
   hatten: die aeusseren overflow:hidden-Clipper (.productdetails-gallery__
   main-image + dessen .slick-list, jeweils radius 0) beschnitten den ganzen
   Slider quadratisch und uebersteuerten damit die inneren Rundungen. Runden
   wir diese Clipper, wird das komplette Hauptbild rund. Thumbs etwas kleiner
   (10px), damit sie bei ~70px nicht zu bauchig wirken. */
.productdetails-gallery__main-image,
.productdetails-gallery__main-image .slick-list { border-radius: 16px; overflow: hidden; }
/* Robust gegen "wird beim Scrollen wieder eckig": zusaetzlich JEDE innere Ebene
   runden (Slick klont/re-layoutet Slides + easyzoom initialisiert lazy -> die
   aeussere Rundung kann dabei kurz umgangen werden). So bleibt das Bild an der
   Quelle rund, egal was der Slider tut. */
.productdetails-gallery__main-image .slick-slide,
.productdetails-gallery__main-image .easyzoom,
.productdetails-gallery__main-image .slick-slide > a,
.productdetails-gallery__main-image .slick-slide picture,
.productdetails-gallery__main-image .gallery-img,
.productdetails-gallery__main-image .product-image { border-radius: 16px; overflow: hidden; }
.productdetails-gallery__thumbs .productdetails-gallery__thumb-image { border-radius: 10px !important; }


/* === Produkttitel <-> Hersteller-Logo: Kollision verhindern ============= */
/* Das Hersteller-Logo (.manufacturer-logo, kkDropper-Banner) ist absolut in
   .product-headline oben rechts positioniert. Lange Titel liefen mit dem Text
   darunter/dagegen. Wir reservieren rechts Platz fuer das Logo (72px + Abstand)
   – NUR wenn ein Logo vorhanden ist (:has), sonst nutzt der Titel die volle
   Breite. */
/* TOT seit Variante D/H1 (2026-07-19) - ENTFERNT. Die Einrueckung reservierte
   Platz fuer das absolut positionierte Logo oben rechts; das Logo sitzt jetzt
   in .cs-phead ueber dem Titel, der Titel braucht die volle Breite. */

/* === Kurzbeschreibung als USP-Liste (Artikeldetail, .shortdesc) =========
   Schlichtes <ul><li> in der Kurzbeschreibung -> gruene CI-Haken, KEINE
   Inline-Styles noetig. Pendant zur Listenansicht (.product-cell__shortdescription,
   dort Pfeil-Icon); hier CI-Haken #8da174 wie in der Vorteile-Box/Modal. */
.shortdesc { color: #2f3e46; }
.shortdesc ul { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.shortdesc ul li { position: relative; padding-left: 1.65rem; font-size: 1rem; line-height: 1.4; color: #2f3e46; }
.shortdesc ul li::before {
  content: ""; position: absolute; left: .05rem; top: .12em; width: 1.05em; height: 1.05em;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238da174' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.shortdesc ul li strong, .shortdesc ul li b { font-weight: 700; }

/* === Bewertungen "Vorschlag B1" (Child-Override productdetails/reviews.tpl +
   review_item.tpl, 2026-07-16): Score-Band + Gold-Balken + Karten voller
   Breite. Sterne im Bewertungsbereich = CI-Gold. ========================== */
.cs-rev .rating__stars, .cs-rev .icon-content--star { color: #E8A200; fill: #E8A200; }
/* Theme faerbt das SVG-Element DIREKT (fill auf svg, live gemessen #cbd8a6) ->
   dort ueberschreiben, sonst bleiben die Sterne blass */
.cs-rev .icon-content--star svg { fill: #E8A200 !important; color: #E8A200 !important; }
/* Theme-Klasse .hide versteckt nichts -> "5 von 5"-Rohtext ausblenden */
.cs-rev .review-comment .hide { display: none !important; }
/* Score-Band */
.cs-rev-top {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: #eef3e3; border-radius: 14px; padding: 16px 20px; margin-bottom: 14px;
}
.cs-rev-score { font-size: 2.3rem; font-weight: 800; line-height: 1; color: #2f3e46; }
.cs-rev-score small { font-size: 1rem; color: #6a7b59; font-weight: 600; }
.cs-rev-scoretxt .rating { font-size: 1.15rem; }
.cs-rev-n { color: #6a7b59; font-size: .95rem; margin-top: 3px; }
.cs-rev-ctaform { margin-left: auto; }
.cs-rev-cta {
  background: #7a9a4e; color: #fff; border: 0; border-radius: 999px;
  padding: 11px 22px; font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: background .15s ease;
}
.cs-rev-cta:hover { background: #6a8743; }
/* Verteilungs-Balken (Zeile = Sterne-Filter) */
.cs-rev-dist { display: flex; flex-direction: column; gap: 6px; margin: 0 4px 20px; }
.cs-rev-row { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: #6a7b59; }
.cs-rev-row.is-active .cs-rev-lbl { font-weight: 800; }
.cs-rev-lbl { flex: 0 0 38px; font-weight: 700; color: #2f3e46; white-space: nowrap; }
.cs-rev-lbl a { color: #46591f; text-decoration: none; }
.cs-rev-lbl a:hover { text-decoration: underline; }
.cs-rev-bar { flex: 1; height: 8px; background: #f1f3ec; border-radius: 99px; overflow: hidden; }
.cs-rev-fill { display: block; height: 100%; background: #E8A200; border-radius: 99px; }
.cs-rev-count { flex: 0 0 24px; text-align: right; }
.cs-rev-reset { margin: 6px 0 0; font-size: .9rem; }
/* Bewertungs-Karten */
.cs-rev-card {
  position: relative; background: #fff;
  border: 1px solid #e7ebe0; border-radius: 14px;
  padding: 16px 18px; margin-bottom: 12px;
}
.cs-rev-best { background: #fdf9ef; border-color: #ecd9a8; }
.cs-rev-badge {
  display: inline-block; background: #E8A200; color: #fff;
  font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 6px; padding: 3px 9px; margin-bottom: 8px;
}
/* Innenleben entruempeln */
.cs-rev .review-comment .hr-sm { display: none; }
.cs-rev .review-comment blockquote { margin: 8px 0 0; padding: 0; border: 0; font-size: 1rem; }
.cs-rev .review-comment blockquote p { line-height: 1.6; color: #4a5a62; margin-bottom: 8px; }
.cs-rev .blockquote-footer { color: #6a7b59; font-size: .9rem; }
.cs-rev .blockquote-footer::before { content: ""; }   /* Bootstrap-Gedankenstrich weg */
.cs-rev .blockquote-footer cite { font-style: normal; font-weight: 600; }
/* "N von M fanden das hilfreich" ans KARTEN-ENDE statt neben die Sterne
   (float kollidierte mit den float-right-Sternen der Titelzeile) */
.cs-rev .review-comment { display: flex; flex-direction: column; }
.cs-rev .review-comment > .top5 { order: 1; }
.cs-rev .review-comment > .review-helpful-total { order: 9; float: none; margin: 6px 0 0; font-size: .87rem; color: #8a958d; }
.cs-rev .verified-purchase { color: #7a9a4e; font-weight: 600; }
.cs-rev .review-reply { margin-top: 12px; background: #f7f8f4; border-radius: 10px; padding: 10px 14px; font-size: .95rem; }
.cs-rev .subheadline strong { font-size: 1.05rem; }
@media (max-width: 575.98px) {
  .cs-rev-top { gap: 12px; }
  .cs-rev-ctaform { margin-left: 0; width: 100%; }
  .cs-rev-cta { width: 100%; }
}

/* === Galerie-Thumbnails: groesser + CI (Vorschlag V1, 2026-07-16) =========
   Theme rendert die Thumbs winzig (60x38) + dimmt das aktive auf opacity .4.
   Hier: gleichmaessig ueber die Hauptbild-Breite, gerundet, aktiv = gruener
   Rahmen. Bildquelle = sm (image.tpl-Override) fuer Schaerfe.
   - flex mit max-width-DECKEL: 2 Bilder werden NICHT riesig (bleiben ~132px),
     4-5 Bilder fuellen die Reihe, >6 Bilder scrollen horizontal (Streifen). */
.productdetails-gallery__image-thumbs { gap: 12px; align-items: stretch; }
.productdetails-gallery__image-thumbs li {
  margin: 0 !important; padding: 0 !important;
  flex: 1 1 96px; min-width: 84px; max-width: 132px;
  border: 1px solid #e7ebe0; border-radius: 12px; overflow: hidden;
  aspect-ratio: 1.6 / 1;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.productdetails-gallery__image-thumbs li:hover {
  border-color: #cbd8a6; box-shadow: 0 4px 12px rgba(47,62,70,.10);
}
.productdetails-gallery__image-thumbs li.active {
  border-color: #7a9a4e; box-shadow: inset 0 0 0 1px #7a9a4e;
}
.productdetails-gallery__image-thumbs li.active img { opacity: 1 !important; }  /* Theme-Dimmung .4 aufheben */
.productdetails-gallery__image-thumbs li picture { display: block; width: 100%; height: 100%; }
.productdetails-gallery__thumb-image {
  width: 100% !important; height: 100% !important;
  max-width: none !important; object-fit: cover;
}
/* Mobil: bequemer, wischbarer Streifen (kein Vollbreite-Stretch) - Container
   ist bereits overflow-x:scroll; feste Kachelbreite haelt sie gut greifbar. */
@media (max-width: 767.98px) {
  .productdetails-gallery__image-thumbs { gap: 8px; }
  .productdetails-gallery__image-thumbs li {
    flex: 0 0 78px; min-width: 78px; max-width: 78px;
  }
}

/* === Galerie Variante A: Kanten-Fade + "+N"-Badge (2026-07-17) ============
   Signalisiert weitere Bilder rechts: weisser Verlauf an der rechten Kante
   (nur mit Klasse cs-th-more, setzt js/gallery-enhance.js) + dunkle "+N"-
   Kachel ueber dem letzten voll sichtbaren Thumb (Overlay-Button, von
   gallery-enhance positioniert; Klick blaettert die Leiste weiter). */
.productdetails-gallery__thumbs { position: relative; }
.productdetails-gallery__thumbs::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 10px;                     /* Scrollbar-Zone freilassen */
  width: 64px;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff 85%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 1;
}
.productdetails-gallery__thumbs.cs-th-more::after { opacity: 1; }
.cs-th-morebtn {
  position: absolute;
  display: none;                    /* gallery-enhance schaltet auf flex */
  align-items: center;
  justify-content: center;
  background: rgba(47, 62, 70, .55);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  border: 0;
  border-radius: 12px;              /* wie die Thumb-Kacheln */
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: background .15s ease;
}
.cs-th-morebtn:hover,
.cs-th-morebtn:focus { background: rgba(47, 62, 70, .7); outline: 0; }
/* Kein Scroll-Anchoring im Streifen: das Einfuegen/Tauschen des Video-Thumbs
   verschob sonst die Startposition (erstes Bild links angeschnitten). */
#gallery_preview_wrapper { overflow-anchor: none; }

/* --- Galerie: moderne duenne Scrollbar unter den Thumbnails (2026-07-16) ---
   Theme versteckt die Scrollbar komplett (scrollbar-width:none). Bei mehr
   Bildern als in eine Reihe passen war dadurch NICHT erkennbar, dass man
   wischen/scrollen kann. Jetzt: schlanke CI-Scrollbar, erscheint nur bei
   Ueberlauf (sonst nichts sichtbar). */
.productdetails-gallery__image-thumbs {
  scrollbar-width: thin !important;
  scrollbar-color: #cbd8a6 #eef0e9;
  padding-bottom: 6px;
}
.productdetails-gallery__image-thumbs::-webkit-scrollbar {
  display: block !important; height: 4px !important; width: 4px !important;
}
/* zarte Schiene -> liest sich als Scrollbalken, nicht als Deko-Linie;
   nur ueber die scrollbare Breite (inset), nicht randlos */
.productdetails-gallery__image-thumbs::-webkit-scrollbar-track {
  background: #eef0e9; border-radius: 99px; margin: 0 2px;
}
.productdetails-gallery__image-thumbs::-webkit-scrollbar-thumb {
  background: #cbd8a6; border-radius: 99px;
}
.productdetails-gallery__image-thumbs::-webkit-scrollbar-thumb:hover { background: #b3c489; }

/* Video-Thumb-Platzhalter des Thumb-Gates (image.tpl, 2026-07-17): sieht aus
   wie der echte Video-Thumb (Poster + Play) und ist KLICKBAR - der Klick wird
   von js/gallery-enhance.js vorgemerkt und beim Galerie-Start ausgefuehrt
   (gleiche Position wie der spaetere echte Video-Slide). Beim Eintreffen des
   echten csv-thumb-li wird er laut- und ruckfrei ersetzt. */
.productdetails-gallery__image-thumbs li.cs-thumb-spacer {
  position: relative;
  cursor: pointer;
}

/* Video-QUELLE im Thumb-Bereich von Anfang an unsichtbar (2026-07-17):
   Das OPC-Video-Portlet hinterm Thumb-<ul> dient NUR als Datenquelle fuer
   custom.js; das blendet es aber erst am Galerie-Init aus (csv-source-hidden).
   Bis dahin drueckte der Consent-/Iframe-Kasten (~250px) die Seite auseinander
   und kollabierte dann - GEMESSEN groesster Layout-Shift der Seite (CLS ~.15)
   und Ursache fuer "Seite ist beim Laden schon gescrollt" (Scroll-Anchoring
   gleicht den Kollaps aus). display:none stoert custom.js nicht (liest nur
   data-src) und ist exakt der Endzustand, den es selbst herstellt. */
.productdetails-gallery__thumbs .opc-Video,
.productdetails-gallery__thumbs .opc-Video-iframe-wrapper,
.productdetails-gallery__thumbs [id^="uid_"]:has(iframe[src*="youtube"], iframe[data-src*="youtube"]) {
  display: none !important;
}

/* --- Galerie-FOUC: Layout FRUEHER stabil (2026-07-16) ---------------------
   Vor dem Slick-Init stehen alle Hauptbild-Folien untereinander (riesige
   Hoehe) und klappen dann zusammen = sichtbares Springen. Fix ab erstem
   Paint (kein JS noetig):
   1) Nur die ERSTE Folie zeigen, bis Slick initialisiert ist.
   2) Hauptbild-Hoehe ueber aspect-ratio reservieren (Produktbilder = 1,6:1),
      damit vor dem Bild-Load nichts nachrueckt (CLS). */
.product-images:not(.slick-initialized) { overflow: hidden; }
.product-images:not(.slick-initialized) > *:not(:first-child) { display: none !important; }
.productdetails-gallery__main-image .gallery-img { aspect-ratio: 1.6 / 1; object-fit: cover; }

/* Init-Hoehendeckel (2026-07-17): WAEHREND des Slick-Aufbaus haelt der
   Container seine Soll-Hoehe fest (contain:size ignoriert die Kinder,
   aspect-ratio liefert die Hoehe aus der Breite). GEMESSEN: beim Init
   stapelten die Folien den Container fuer ~30ms um ~230px hoeher - alles
   darunter ruckte runter und wieder rauf (Layout-Shift-Paar bei ~1.2s).
   js/gallery-enhance.js setzt .cs-gallery-ready, sobald Slick fertig ist
   (bzw. bei Aufgabe) -> Deckel loest sich. 1.577 statt 1.6, weil der
   Container real minimal hoeher ist als das reine Bildformat (Rahmen);
   Restdifferenz beim Umschalten ~5px statt 230. */
.productdetails-gallery:not(.cs-gallery-ready) .product-images {
  aspect-ratio: 1.577 / 1;
  overflow: hidden;
  contain: size;
}

/* --- Hauptbild: zarter CI-Rahmen wie bei Karten/Thumbnails (2026-07-16) ---
   Rahmt das grosse Produktbild sauber ein -> wirkt hochwertiger und
   einheitlich zur restlichen CI. Auch die Zoom-Lupe (easyzoom-flyout) und
   die PhotoSwipe-Ansicht-Basis bekommen denselben Rand. */
.productdetails-gallery__main-image .gallery-img,
.productdetails-gallery__main-image .easyzoom-flyout {
  border: 1px solid #e7ebe0;
  background: #fff;
}


/* =====================================================================
   Lieferblock "2A Zweizeilige Liste" (2026-07-17)
   Status + Lieferzeit in einer Zeile, Countdown als gruener Balken,
   Angebots-Accordeon + Aktions-Buttons als einheitliche Liste mit
   Kurztexten. Zugehoeriges JS: details.tpl, Modul __csActionList
   (baut .cs-al-title/.cs-al-sub in Accordeon-Kopf + Button-Labels).
   REVERT: diesen Block loeschen + JS-Modul entfernen; Baseline liegt in
   _backups/lieferblock-basis-2026-07-17/.
   ===================================================================== */

/* --- 1) Status-Zeile: gruener Punkt statt LKW, Lieferzeit daneben --- */
.delivery-status > .status.status-2 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1rem;
  font-weight: 600;
  color: #2f3e46;
}
.delivery-status > .status.status-2 > .icon-content { display: none; }  /* LKW raus (Punkt uebernimmt) */
.delivery-status > .status.status-2::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7a9a4e;
  box-shadow: 0 0 0 3px #dbe6bf;
  flex: 0 0 auto;
}
/* Lieferzeit direkt hinter den Status, mit Mittelpunkt als Trenner */
.delivery-status > .status.status-2 + .estimated-delivery {
  display: inline-flex;
  margin-left: .55em;
}
.delivery-status > .status.status-2 + .estimated-delivery::before {
  content: "\00B7";
  color: #c9cfc3;
  margin-right: .5em;
}

/* --- 2) Versandkostenfrei-Zeile an die CI-Rollen angleichen --- */
.delivery-status > .delivery-shipping-free {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: .95rem;
  font-weight: 600;
  color: #46591f;
}

/* --- 3) Countdown-Drop (#countdown-text) als Balken ---
   !important noetig: der Drop bringt style="font-size:1rem;color:#333" inline
   + einen eigenen <style>-Block mit. */
.delivery-status #countdown-text {
  position: relative;
  margin: 12px 0 0;
  padding: 11px 15px 11px 44px;
  background: #eef3e3;
  border-left: 4px solid #7a9a4e;
  border-radius: 8px;
  font-size: .95rem !important;
  line-height: 1.45 !important;
  color: #2f3e46 !important;
}
.delivery-status #countdown-text::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346591F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.delivery-status #countdown-text .countdown-number,
.delivery-status #countdown-text .shipping-day {
  color: #46591f;
  font-weight: 700;
}

/* --- 4) Gemeinsame Listen-Bausteine (Accordeon-Kopf + Aktions-Buttons) --- */
.cs-al-tx {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
}
.cs-al-title {
  font-size: .95rem;
  font-weight: 600;
  color: #2f3e46;
  line-height: 1.35;
}
.cs-al-sub {
  font-size: .87rem;
  font-weight: 400;
  color: #6a7b59;
  line-height: 1.35;
  margin-top: 1px;
}
.cs-al-row::after {                     /* Chevron rechts */
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #8da174;
  border-bottom: 2px solid #8da174;
  transform: rotate(-45deg);
  margin-left: auto;
  margin-right: 4px;
  flex: 0 0 auto;
}
.cs-al-row:hover .cs-al-title { color: #46591f; }

/* --- 5) Angebots-Accordeon als erste Listenzeile --- */
.delivery-status .drop-container:has(.kk-accordeon) { margin-top: 14px !important; }  /* inline 20px vom Drop */
.delivery-status .kk-accordeon { border-top: 1px solid #ececec; }
.delivery-status .kk-accordeon .kk-accordeon-tab.card {
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
}
.delivery-status .kk-accordeon .kk-accordeon-tab-title.cs-al-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ececec;
  cursor: pointer;
}
.delivery-status .kk-accordeon .cs-al-row .kk-accordeon-tab-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef3e3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;                 /* _m-05-right aufheben */
  flex: 0 0 auto;
}
.delivery-status .kk-accordeon .cs-al-row .kk-icon { display: block; line-height: 0; }
.delivery-status .kk-accordeon .cs-al-row .kk-icon svg {
  width: 15px;
  height: 15px;
  fill: #46591f;
  display: block;
}
/* aufgeklappter Inhalt: eingerueckt unter dem Titel, ruhige Typo */
.delivery-status .kk-accordeon .kk-accordeon-tab-content .card-body {
  padding: 2px 2px 14px 49px;
  font-size: .9rem;
  color: #2f3e46;
}
.delivery-status .kk-accordeon .kk-accordeon-tab-content .card-body a { color: #46591f; }

/* --- 5b) Angebots-Zeile: echte Plugin-Anbindung statt Collapse (2026-07-25)
   Ersetzt das Accordeon oben. Die Primaerzeile loest das Angebots-Modal des
   Plugins "NETZdinge.de Angebot anfragen" fuer diesen Artikel aus, der
   Sekundaerlink sammelt ueber den Warenkorb. Der native Plugin-Button
   (.openOfferRequest) wird auf der Detailseite ausgeblendet (wir liefern die
   schoenere Zeile), bleibt aber als Trigger im DOM. details.tpl -> __csActionList. */
.cs-al-offer-wrap { display: flex; flex-direction: column; margin-top: 14px; }
body[data-page="1"] .openOfferRequest,
body.page_type_1 .openOfferRequest { display: none !important; }

.cs-al-offer {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  margin: 0;
  padding: 13px 2px;
  border: 0;
  border-bottom: 1px solid #ececec;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.cs-al-offer .cs-al-ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef3e3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.cs-al-offer .cs-al-ic svg { width: 16px; height: 16px; display: block; }
.cs-al-offer:hover .cs-al-title { color: #46591f; }
.cs-al-offer:focus { outline: 0; box-shadow: none; }
.cs-al-offer:focus-visible { outline: 2px dashed #8da174; outline-offset: -2px; border-radius: 8px; }

/* Sekundaerlink "Mehrere Artikel zum Angebot sammeln": eingerueckt unter der Zeile */
.cs-al-offer-collect {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 9px 2px 11px 47px;
  border: 0;
  border-bottom: 1px solid #ececec;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: .9rem;
  font-weight: 600;
  color: #46591f;
}
.cs-al-offer-collect:hover { color: #2f3e46; }
.cs-al-offer-collect:focus { outline: 0; box-shadow: none; }
.cs-al-offer-collect:focus-visible { outline: 2px dashed #8da174; outline-offset: -2px; border-radius: 8px; }
.cs-al-offer-collect__ic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eef3e3;
  color: #46591f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}
.cs-al-offer-collect:hover .cs-al-offer-collect__ic { background: #dfe9cb; }

/* Hinweis nach dem Sammeln (Guidance, kein Erfolgs-Claim); auto-dismiss via JS */
.cs-al-offer-note {
  padding: 8px 2px 10px 47px;
  font-size: .87rem;
  line-height: 1.4;
  color: #46591f;
  border-bottom: 1px solid #ececec;
}
.cs-al-offer-note a { color: #46591f; font-weight: 600; text-decoration: underline; }

/* Angebots-Info-Modal (details.tpl openOfferInfo): erklaert den Kostenvoranschlag,
   bevor der Artikel zum Angebot in den Warenkorb wandert. z-index > Sticky-Leisten
   (99990). Optik an .csg-modal/CI angelehnt. */
.cs-offer-ov { position: fixed; inset: 0; z-index: 100060; display: none; }
.cs-offer-ov.is-open { display: block; }
.cs-offer-bg { position: absolute; inset: 0; background: rgba(47, 62, 70, .55); cursor: pointer; }
.cs-offer-dlg {
  position: relative; max-width: 460px; margin: 12vh auto 0;
  background: #fff; border-radius: 16px; padding: 26px 26px 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
}
@media (max-width: 575.98px) {
  .cs-offer-dlg { max-width: none; margin: 0 12px; top: 8vh; }
}
.cs-offer-x {
  position: absolute; top: 8px; right: 12px; border: 0; background: none;
  font-size: 26px; line-height: 1; color: #6a7b59; cursor: pointer; padding: 4px;
}
.cs-offer-x:hover { color: #2f3e46; }
.cs-offer-h { margin: 0 0 12px; font-size: 1.2rem; font-weight: 700; color: #2f3e46; }
.cs-offer-dlg p { margin: 0 0 12px; font-size: 1rem; line-height: 1.55; color: #2f3e46; }
.cs-offer-acts { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.cs-offer-collect {
  display: block; text-align: center; text-decoration: none;
  background: #7a9a4e; border: 0; border-radius: 26px; padding: 13px 20px;
  color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.cs-offer-collect:hover { background: #6c8a44; color: #fff; text-decoration: none; }
.cs-offer-call { text-align: center; color: #46591f; font-weight: 600; text-decoration: none; padding: 6px; }
.cs-offer-call:hover { text-decoration: underline; color: #2f3e46; }

/* --- 6) Aktions-Buttons (Merkzettel/Frage/Vergleich) als Listenzeilen --- */
.product-actions--details.cs-al-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
}
.cs-al-list .wishlist { order: 1; }
.cs-al-list .question { order: 2; }
.cs-al-list .compare  { order: 3; }
/* Selektor bewusst "schwer" (4 Klassen): muss die alten Frage-Button-Regeln
   weiter oben (.product-actions__button.btn.btn-link.question, padding/display
   mit !important) in beiden Media-Zustaenden schlagen. */
.product-actions--details.cs-al-list .product-actions__button.cs-al-row {
  display: flex !important;
  align-items: center;
  gap: 13px;
  width: 100%;
  margin: 0;
  padding: 13px 2px !important;
  border: 0;
  border-bottom: 1px solid #ececec;
  border-radius: 0;
  background: transparent;
  text-align: left;
  text-transform: none;
}
.cs-al-list .cs-al-row .icon-content--productdetails {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef3e3;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #46591f;
  margin: 0;
  flex: 0 0 auto;
}
.cs-al-list .cs-al-row .icon-content--productdetails svg {
  width: 16px;
  height: 16px;
  top: 0 !important;
}
/* Label: zweizeilig; hebt zugleich das sr-only des Parent-Themes unter 768px auf */
.cs-al-list .cs-al-row .product-actions__label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
}

/* --- 6b) Mobil-Reihenfolge: Das Theme zieht die Aktions-Buttons unter 768px
   per order:-2 VOR die Kaufbox (pages/_productdetails.scss, war als kleine
   Icon-Zeile gedacht). Als 2A-Liste gehoert sie ans ENDE des Blocks, wie auf
   Desktop (dort DOM-letzter + order:2). Selektor (5 Klassen) schlaegt die
   Theme-Regel (3 Klassen) in beiden Media-Zustaenden ohne !important. */
.basket-action-wrapper.product-buy.is-buyable .product-actions--details.cs-al-list { order: 99; }

/* --- 7) Vergleichsliste vorerst raus (Nutzerwunsch 2026-07-17).
   Gilt fuer neuen UND alten (Fallback-)Zustand; Wiedereinbau = Regel loeschen.
   Der erste Selektor wiegt bewusst 4 Klassen: er muss das display:flex
   !important der Listenzeilen-Regel oben (Abschnitt 6) schlagen. */
.product-actions--details.cs-al-list .product-actions__button.compare,
.product-actions--details .compare { display: none !important; }

/* --- 8) Hover/Fokus aufgeraeumt: keine btn-link-Unterstreichung (kam u.a. als
   rote Linie durch), Fokus stattdessen als dezenter CI-Rahmen. */
.cs-al-list .cs-al-row,
.cs-al-list .cs-al-row:hover,
.cs-al-list .cs-al-row:focus,
.cs-al-list .cs-al-row:active,
.delivery-status .kk-accordeon .cs-al-row,
.delivery-status .kk-accordeon .cs-al-row:hover { text-decoration: none !important; }
.cs-al-list .cs-al-row:focus,
.delivery-status .kk-accordeon .cs-al-row:focus { outline: 0; box-shadow: none; }
.cs-al-list .cs-al-row:focus-visible,
.delivery-status .kk-accordeon .cs-al-row:focus-visible {
  outline: 2px dashed #8da174;
  outline-offset: -2px;
  border-radius: 8px;
}
.cs-al-list .cs-al-row:focus .cs-al-title,
.cs-al-list .cs-al-row:active .cs-al-title { color: #46591f; }

/* --- 9) Merkzettel-Zeile: "schon gemerkt"-Zustand (2026-07-25).
   header.js/refreshHearts setzt .on-list auf den .wishlist-Button, sobald der
   Artikel auf dem Merkzettel liegt (rein aus unserem localStorage). Dann wird
   das On-Fassungs-Label ein-, das Standard-Label ausgeblendet; das Herz-Icon
   fuellt sich gruen. Reaktiv per Klasse -> kein extra JS noetig, folgt jedem
   Hinzufuegen/Entfernen. Klickverhalten (oeffnet dann die Merkliste) steckt
   in header.js/onHeartClick. */
.cs-al-list .cs-al-row .cs-al-title--on,
.cs-al-list .cs-al-row .cs-al-sub--on { display: none; }
.cs-al-list .wishlist.on-list .cs-al-title:not(.cs-al-title--on),
.cs-al-list .wishlist.on-list .cs-al-sub:not(.cs-al-sub--on) { display: none; }
.cs-al-list .wishlist.on-list .cs-al-title--on,
.cs-al-list .wishlist.on-list .cs-al-sub--on { display: block; }
.cs-al-list .wishlist.on-list .cs-al-title--on { color: #46591f; }
/* Icon-Kreis + gefuelltes Herz im gemerkten Zustand */
.cs-al-list .wishlist.on-list .icon-content--productdetails {
  background: #46591f;
  color: #fff;
}
.cs-al-list .wishlist.on-list .icon-content--productdetails svg {
  fill: #fff;
  stroke: #fff;
}
/* Zweite Option "Erneut in den Merkzettel legen": eigener Button, den
   details.tpl direkt hinter den .wishlist-Button haengt. Nur sichtbar, wenn der
   Artikel schon gemerkt ist (.wishlist.on-list). order:1 = direkt unter der
   Merkzettel-Zeile (sonst zoege der Flex-Default order:0 ihn nach ganz oben).
   Der Zeilen-Klick oben oeffnet die Merkliste, dieser Button legt neu ab. */
.cs-al-list .cs-al-wish-add { display: none; }
/* gemerkte Zeile + "Erneut"-Aktion als eine Gruppe: Trennlinie dazwischen weg */
.cs-al-list .wishlist.on-list.cs-al-row { border-bottom-color: transparent; }
.cs-al-list .wishlist.on-list + .cs-al-wish-add {
  order: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 9px 2px 11px 47px;
  border: 0;
  border-bottom: 1px solid #ececec;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: .9rem;
  font-weight: 600;
  color: #46591f;
}
.cs-al-list .wishlist.on-list + .cs-al-wish-add:hover { color: #2f3e46; }
.cs-al-list .wishlist.on-list + .cs-al-wish-add:focus { outline: 0; box-shadow: none; }
.cs-al-list .wishlist.on-list + .cs-al-wish-add:focus-visible {
  outline: 2px dashed #8da174;
  outline-offset: -2px;
  border-radius: 8px;
}
.cs-al-wish-add__ic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eef3e3;
  color: #46591f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}
.cs-al-wish-add:hover .cs-al-wish-add__ic { background: #dfe9cb; }

/* === Produktkopf "Variante D" (2026-07-17) ================================
   Kopfzeile Marke+Bewertung ueber dem Titel (details.tpl .cs-phead), Preis
   als weisse Karte mit gruener Akzentlinie + Spar-Ribbon, USPs zweispaltig,
   Trust-Leiste unter den Buttons (Ribbon/Verfuegbarkeit/Trust: gallery-enhance.js). */
/* Kopfzeile "H1 - reduzierte Markenzeile" (2026-07-19, ersetzt die Pillen-
   Variante): keine Kaesten mehr, damit ueber dem Titel nichts mehr mit der
   rahmenlosen Preisansicht (P1) konkurriert. Logo | Marke | Sterne | Note. */
.cs-phead { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 20px; }
/* Titelblock aufs gleiche 20px-Raster wie der restliche Kaufbereich: der Block
   aus Kicker + H1 hatte oben 12px und unten 23px Luft und klebte dadurch an der
   Markenzeile. Kicker und H1 bleiben eng beieinander (sie gehoeren zusammen),
   nur der Block als Ganzes bekommt gleiche Abstaende.
   Reihenfolge der Rechnung: .product-headline und .price_wrapper haben
   aneinandergrenzende Margins, die verschmelzen - der groessere gewinnt.
   Deshalb muss die H1-Margin auf 0, sonst zieht sie den Abstand hoch. */
.product-info-inner .product-headline { margin-bottom: 20px; }
.product-info-inner .product-headline .product-title { margin-bottom: 0; }
.cs-brandchip {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 0; border-radius: 0; padding: 0;
  text-decoration: none !important; color: #2f3e46 !important;
  font-weight: 800; font-size: 1rem;
}
.cs-brandchip:hover { color: #46591f !important; }
/* Herstellerlogo RAHMENLOS (2026-07-22, Nutzerwunsch): der graue Kasten war ein
   zweiter Rahmen neben der ohnehin rahmenlosen Preisansicht (P1) und fiel bei
   Marken ohne Logo als leeres Kaestchen auf. object-fit haelt Querformat-Logos
   heil. Hersteller ohne eigenes Bild bekommen gar kein <img> mehr - der Shop
   liefert dort den Platzhalter gfx/keinBild.gif, der wird in details.tpl
   herausgefiltert. */
.cs-brandchip img {
  width: 30px; height: 30px; max-width: none; max-height: none;
  object-fit: contain; background: none; border: 0;
  border-radius: 0; padding: 0;
}
.cs-phead__sep { flex: 0 0 auto; width: 1px; height: 20px; background: #e3e8dd; }
.cs-phead__rate {
  text-decoration: none !important; display: inline-flex;
  align-items: center; gap: 7px; color: #2f3e46 !important;
}
/* .product-headline ist im Theme flex/row (war fuer "H1 links, Logo rechts").
   Das Logo sitzt jetzt in .cs-phead -> Container wieder stapeln lassen, sonst
   landet der OPC-Inhalt aus opc_before_headline NEBEN dem Titel statt darueber. */
.product-info-inner .product-headline { display: block; }

/* Sterne in Gold. Das Theme faerbt das SVG selbst (fill auf dem <svg>), deshalb
   muss die Regel dort greifen - color auf dem Span reicht nicht. */
.cs-phead .rating { font-size: 1rem; display: inline-flex; align-items: center; }
.cs-phead .rating__stars { display: inline-flex; align-items: center; gap: 2px; }
/* margin-right:0 muss sein: das Theme gibt jedem Stern ueber .icon-content--star
   3px Aussenabstand mit, sonst addiert sich das auf das gap und die Reihe wird
   ungleichmaessig breit. */
.cs-phead .rating__stars .icon-content { display: block; line-height: 0; margin-right: 0; }
/* top:0 muss ebenfalls sein: das Theme schiebt JEDES Icon-SVG per
   'position:relative; top:.125em * 1.3' nach unten (optischer Ausgleich fuer
   Icons in Textzeilen). In dieser Zeile stehen die Sterne dadurch rund 2px zu
   tief und sitzen nicht auf der Grundlinie von Marke und Note. */
.cs-phead .rating__stars svg {
  width: 16px; height: 16px; fill: #E8A200 !important;
  display: block; top: 0;
}
/* Theme-Ausgabe "(5 Bewertungen)" ausblenden - die Klammern stehen als nackte
   Textknoten im Markup und sind per CSS nicht greifbar. Ersatztext kommt aus
   details.tpl (.cs-rate-avg + .cs-rate-cnt). */
.cs-phead .rating__total { display: none !important; }
.cs-rate-avg { font-size: 1rem; font-weight: 800; color: #2f3e46; }
.cs-rate-cnt { font-size: .9rem; color: #6a7b59; }
.cs-phead__rate:hover .cs-rate-cnt { text-decoration: underline; }
/* Auf dem Handy alles eine Spur kleiner, damit die Zeile bei kurzen Markennamen
   noch einzeilig bleibt. Der Trennstrich faellt hier komplett weg: sobald die
   Zeile umbricht (lange Markennamen, schmale Geraete) haenge er sonst als
   Stummel am Ende der ersten Zeile - und ob umbrochen wird, kann CSS nicht
   abfragen. Ohne Strich sehen beide Faelle richtig aus. */
@media (max-width: 575.98px) {
  .cs-phead { gap: 8px 12px; }
  .cs-phead__sep { display: none; }
  .cs-brandchip { font-size: .95rem; gap: 7px; }
  .cs-brandchip img { width: 26px; height: 26px; }
  .cs-phead__rate { gap: 6px; }
  .cs-phead .rating__stars svg { width: 14px; height: 14px; }
  .cs-rate-avg { font-size: .95rem; }
  .cs-rate-cnt { font-size: .87rem; }
}

/* Preisbereich "P1" (2026-07-17): RAHMENLOS, nur zwei feine Trennlinien.
   Der fruehere Kasten mit gruener Oberkante + ueberlappendem Ribbon wirkte
   unruhig (das Ribbon schnitt die Kante an, Nutzerhinweis). Jetzt steht der
   Preis frei; die Ersparnis ist eine ruhige Pille IN der Preiszeile. */
.product-info-inner .price_wrapper.cs-pricecard {
  background: transparent; border: 0;
  border-top: 1px solid #eef0e9; border-bottom: 1px solid #eef0e9;
  border-radius: 0; padding: 16px 0; margin: 20px 0 0; box-shadow: none;
}
.cs-save-ribbon {
  display: inline-block; margin-left: 10px; vertical-align: baseline;
  background: #eef3e3; color: #46591f; border-radius: 999px;
  padding: 4px 12px; font-size: .87rem; font-weight: 800; letter-spacing: .01em;
  box-shadow: none;
}
/* Streichpreis neben den Preis statt darunter (Umhaengen: gallery-enhance.js) */
.cs-pricecard .price { display: inline-block; vertical-align: baseline; }
.cs-oldprice { display: inline-block; margin-left: 10px; font-size: 1rem; color: #9aa6ad; text-decoration: line-through; vertical-align: baseline; }
.cs-pricecard .instead_of.cs-oldprice-hidden { display: none !important; }
/* Zeile "Grundpreis 1.799,00 EUR statt 2.598,99 EUR - Sie sparen 31%".
   Erscheint NUR, wenn vom Grundzustand abgewichen wurde (siehe renderPrice()
   in js/gallery-enhance.js). Bewusst klein und ruhig: der grosse Preis ist der,
   den der Kunde zahlt, das hier ist die Einordnung. */
.cs-baseprice {
  margin: 6px 0 0; font-size: .9rem; line-height: 1.4; color: #6a7b59;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px;
}
.cs-baseprice b { font-weight: 700; color: #46591f; }
.cs-baseprice del { color: #9aa6ad; }
.cs-baseprice__sep { color: #c3cbb8; }
.cs-baseprice__save { font-weight: 700; color: #46591f; }
@media (max-width: 575.98px) { .cs-baseprice { font-size: .87rem; } }
/* Label ueber den Preis (Theme rendert es inline -> wirkt gedraengt) */
.cs-pricecard .price_label { display: block; margin-bottom: 2px; }

/* USPs (Kurzbeschreibung) zweispaltig -> Buttons ruecken nach oben.
   Abstand oben/unten bewusst GLEICH (Nutzerhinweis 2026-07-17: war 14px oben
   vs. 30px unten). Einheitliches 20px-Raster fuer den ganzen Kaufbereich. */
.product-info-inner .shortdesc { margin-bottom: 0; }
.product-info-inner .shortdesc ul {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
  list-style: none; margin: 20px 0 0; padding: 0;
}
.product-info-inner .shortdesc ul li { display: flex; gap: 8px; align-items: flex-start; font-size: 1rem; line-height: 1.35; }
.product-info-inner .shortdesc ul li::before { content: "\2713"; color: #7a9a4e; font-weight: 900; flex: 0 0 auto; }
@media (max-width: 575.98px) { .product-info-inner .shortdesc ul { grid-template-columns: 1fr; } }

/* Vertikales Raster im Kaufbereich vereinheitlicht (2026-07-17) */
.product-info-inner hr { margin: 20px 0; }
/* Theme setzt ~37px ueber den Lieferblock -> zu grosse Luecke unter den Buttons.
   Der Button-Block bringt selbst 10px margin-bottom mit (Flex, kein Collapse),
   deshalb hier 10px -> zusammen die gleichen 20px wie im restlichen Raster. */
.product-info-inner .basket-action-wrapper > .delivery-status { margin-top: 10px !important; }

/* Aktionsliste: Die "Angebot/Kostenvoranschlag"-Zeile ist ein kkDropper-
   Accordeon und bringt einen grauen .card-header mit (#f8f8f8) - dadurch sah
   sie anders aus als Merkzettel/Frage. Alle Zeilen gleich (Nutzerhinweis). */
.cs-al-row.card-header, .product-info-inner .cs-al-row { background: transparent !important; }

/* Aktionsliste zusammenhalten (2026-07-19):
   "Angebot" steckt im kkDropper-Drop INNERHALB von .delivery-status, Merkzettel
   und Frage stehen als .product-actions DANEBEN. Das Theme setzt dort 30px
   margin-top -> die Angebots-Zeile hing oben am Lieferblock und die beiden
   anderen Zeilen standen abgesetzt darunter. Jetzt: 20px Luft ueber der Liste
   (gleiches Raster wie oben), zwischen den Zeilen nur noch die Trennlinien. */
.product-info-inner .delivery-status > .drop-container:last-child { margin-top: 20px !important; }
.product-info-inner .product-actions--details.cs-al-list { margin-top: 0 !important; }

/* === FAQ-Accordion in den Sektions-Modalen: CI "Soft-Gruen-Karten" ==========
   (Vorschlag 1, abgenommen 2026-07-17.) Gilt fuer jedes OPC-Accordion, das im
   .cs-section-modal landet (aktuell FAQ aus dem Beschreibungs-HTML "faqbesch");
   die Konfigurator-Accordions (careakko) sind #cfg-container-gescoped und
   bleiben unberuehrt. Fuehrender "- " im Titel wird per JS entfernt
   (tabs.tpl, polishModalAccordions). Erste Frage kommt serverseitig mit
   .show = bereits ausgeklappt, das bleibt so. Rueckbau: Block loeschen. */
.cs-section-modal .opc-Accordion .opc-Accordion-group {
  background: #f3f6ec;
  border: 0;
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.cs-section-modal .opc-Accordion .opc-Accordion-group:has(.opc-Accordion-collapse.show) {
  background: #eef3e3;
}
.cs-section-modal .opc-Accordion .card-header {
  background: transparent;
  border: 0;
  padding: 0;
}
.cs-section-modal .opc-Accordion .opc-Accordion-head.btn-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: #2f3e46;
  text-decoration: none !important;
  box-shadow: none;
  white-space: normal;
  background: transparent;   /* UA-/Theme-Button-Optik sicher neutralisieren */
  border: 0;
}
.cs-section-modal .opc-Accordion .opc-Accordion-head.btn-link:hover,
.cs-section-modal .opc-Accordion .opc-Accordion-head.btn-link:focus {
  color: #46591f;
  text-decoration: none !important;
}
/* Pfeil rechts im weissen Kreis; dreht sich beim Oeffnen */
.cs-section-modal .opc-Accordion .opc-Accordion-head .icon-content--toggle {
  margin-left: auto;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(47,62,70,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #46591f;
  transition: transform .2s ease;
}
.cs-section-modal .opc-Accordion .opc-Accordion-head[aria-expanded="true"] .icon-content--toggle {
  transform: rotate(180deg);
}
/* Pfeil als reines CSS-Chevron zeichnen - das Theme-Icon haengt am
   SVG-Sprite-Cache und zeigte je nach Kontext nichts/anderes an. */
.cs-section-modal .opc-Accordion .opc-Accordion-head .icon-content--toggle svg { display: none; }
.cs-section-modal .opc-Accordion .opc-Accordion-head .icon-content--toggle::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2.4px solid #46591f;
  border-bottom: 2.4px solid #46591f;
  border-radius: 1px;
  transform: rotate(45deg) translate(-1px, -1px);
}
.cs-section-modal .opc-Accordion .card-body {
  padding: 0 16px 15px;
  font-size: .95rem;
  line-height: 1.65;
  color: #2f3e46;
}
.cs-section-modal .opc-Accordion .card-body p:last-child { margin-bottom: 0; }
/* Intro-Zeile ueber dem Accordion (dzm-Textbox im faqbesch-Grid) dezent */
.cs-section-modal .faqbesch [data-dzm-expander] p {
  font-size: .95rem;
  color: #6a7b59;
}

/* ============================================================================
   SEO-TEASER + "Auf einen Blick"  (Produkt-Slot seo-teaser.html)
   ----------------------------------------------------------------------------
   ZENTRAL seit 2026-07-22. Vorher trug JEDE Produktdatei diesen Block als
   eigenes <style> mit - bei einem Ausrollen auf alle Produkte waere dasselbe
   CSS in jeder Seite gelandet (die Regia-Seite liefert ohnehin schon rund
   810 KB HTML mit 49 <style>-Bloecken aus). Die Produktdateien unter
   opc/produkte/<cSeo>/seo-teaser.html enthalten jetzt NUR noch Inhalt.
   ⚠️ Reihenfolge beim Deploy: erst diese Datei hoch, dann die Produktdateien -
   umgekehrt steht der Teaser kurzzeitig ohne Gestaltung auf der Seite.
   ----------------------------------------------------------------------------
   LAYOUT "Variante 2 / Editorial" seit 2026-07-26 (Nutzerwahl aus 3 Mockups,
   entwuerfe/seo-teaser-3-layouts.html): Text oben in Lesebreite, Fakten als
   Band ueber die volle Breite darunter, Button + Bewertung als Fusszeile.
   Grund fuer den Wechsel vom 2-Spalten-Split: ueber 112 Produkte schwankt die
   Zahl der USP-Zeilen zwischen 3 und 8 und die Textlaenge zwischen zwei
   Saetzen und zwei Absaetzen. Im Split entstand daraus eine halb leere
   Spalte, das auto-fit-Raster hier faengt beides ab.
   ============================================================================ */
.csst { margin: 6px 0 26px; }
.csst h2 { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.25; color: #2f3e46; }
.csst h2 span { color: #7a9a4e; }
/* 46rem = 690 px = rund 75 Zeichen je Zeile. Ueber die volle Produktbreite
   (1206 px) waeren es 95 und der Text wuerde nicht mehr gelesen.
   Typografie auf den Container, nicht nur auf <p>: kommt der Text aus einem
   Wawi-Attribut, tippt dort auch mal jemand ohne <p>-Tags. So sieht nackter
   Text genauso aus wie ausgezeichneter. */
.csst-txt { max-width: 46rem; font-size: 1rem; line-height: 1.65; color: #4a5a62; }
.csst-txt p { margin: 0 0 12px; font-size: 1rem; line-height: 1.65; color: #4a5a62; }
.csst-more {
  display: inline-flex; align-items: center; gap: 8px;
  background: #cbd8a6; color: #333 !important; border-radius: 999px; padding: 10px 20px;
  font-weight: 700; font-size: 1rem; text-decoration: none !important; cursor: pointer;
  transition: background .15s ease;
}
.csst-more:hover { background: #bccb92; }
.csst-facts { margin-top: 18px; background: #f7f8f4; border: 1px solid #dbe6bf; border-radius: 16px; padding: 18px 22px; }
.csst-facts h3 {
  margin: 0 0 14px; font-size: .95rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #46591f; display: flex; gap: 8px; align-items: center;
}
.csst-facts h3 svg { width: 19px; height: 19px; flex: 0 0 auto; }
/* auto-fit statt fester Spaltenzahl: 6 Punkte werden 2x3, 3 Punkte eine Reihe,
   8 Punkte 3+3+2 - kein Produkt reisst eine Luecke. Bei 1206 px sind es drei
   Spalten a 369 px. */
.csst-facts ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 26px;
}
.csst-facts li { display: flex; gap: 9px; font-size: 1rem; line-height: 1.4; color: #2f3e46; }
.csst-facts li::before { content: "✓"; color: #7a9a4e; font-weight: 900; flex: 0 0 auto; }
.csst-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #e7ebe0;
}
/* Ohne Fakten-Band sitzt die Fusszeile direkt unter dem Text. */
.csst--nofacts .csst-foot { margin-top: 14px; }
.csst-rating { font-size: .95rem; color: #6a7b59; }
.csst-rating b { color: #2f3e46; }
.csst-stars { color: #E8A200; letter-spacing: 2px; }
/* Mobil-Breakpoint des Themes (991.98px), NICHT 767 - siehe Memory. */
@media (max-width: 991.98px) {
  .csst-facts { padding: 16px; }
  .csst-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .csst-more { width: 100%; justify-content: center; }
}

/* === FAQ-Accordion (Produkt-Slot faq.html) ===============================
   Datei-Slot opc/produkte/<cSeo>/faq.html, von tabs.tpl als beschpos3-Grid
   gewickelt -> Sektionsliste-Zeile + Modal. Klapp-JS liegt einmalig in
   tabs.tpl (window.__csFaqAcc). Die Produktdateien enthalten NUR Inhalt.
   600px bewusst: nur engere Polster auf sehr schmalen Schirmen, kein
   Layout-Umschlag (der Theme-Mobil-Breakpoint 991.98 gilt hier nicht). */
.csf { font-family: inherit; color: #2f3e46; }
.csf * { box-sizing: border-box; }
.csf .csf-sub { margin: 0 0 16px; font-size: .98rem; color: #7a9a4e; font-weight: 600; }
.csf .csf-item { background: #f5f6f2; border: 1px solid #eef1ea; border-radius: 14px;
  margin: 0 0 12px; overflow: hidden; transition: border-color .15s ease; }
.csf .csf-item:last-child { margin-bottom: 0; }
.csf .csf-item.is-open { border-color: #d9e2c6; }
.csf .csf-q { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 20px; background: none; border: 0; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 1.02rem; font-weight: 700; color: #2f3e46; line-height: 1.3; }
.csf .csf-q:hover { color: #46591f; }
.csf .csf-q:focus-visible { outline: 2px solid #7a9a4e; outline-offset: -2px; border-radius: 12px; }
.csf .csf-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #fff;
  border: 1px solid #e7ebe0; display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background .15s ease; }
.csf .csf-item.is-open .csf-ic { transform: rotate(180deg); background: #eef3e3; }
.csf .csf-ic svg { width: 16px; height: 16px; fill: none; stroke: #7a9a4e; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; display: block; }
.csf .csf-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.csf .csf-a-inner { padding: 0 20px 18px; font-size: .97rem; line-height: 1.6; color: #3a4750; }
.csf .csf-a-inner p { margin: 0 0 10px; }
.csf .csf-a-inner p:last-child { margin-bottom: 0; }
.csf .csf-a-inner a { color: #46591f; font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; }
.csf .csf-tel { white-space: nowrap; }
@media (max-width: 600px) {
  .csf .csf-q { padding: 15px 15px; font-size: .98rem; gap: 12px; }
  .csf .csf-a-inner { padding: 0 15px 15px; }
  .csf .csf-ic { width: 30px; height: 30px; }
}

/* === Variationen: Auswahlliste bleibt im Bildschirm ======================
   Problem (mobil): Die Auswahlliste der Variationen ist kein natives Select,
   sondern ein bootstrap-select-Dropdown. Bootstrap 4 setzt .dropdown-item auf
   white-space:nowrap, und bootstrap-select gibt dem Menue nur min-width:100%
   ohne Deckel. Eine lange Option ("mit 2 Holzhauben (Kopf- und Fussseitig)
   + 199,00 EUR") macht das Menue damit breiter als das Feld und schiebt es aus
   dem Bild. Live gemessen bei 375px Viewport: Menue 421px breit, rechte Kante
   bei 443px -> 68px ausserhalb des Schirms.
   Fix: Menue exakt auf Feldbreite deckeln, langen Namen umbrechen lassen,
   Aufpreis rechtsbuendig in dieselbe Zeile. Nach dem Fix: 331px breit, rechte
   Kante 353px. Greift praktisch nur dort, wo der Text sonst ueberlaufen wuerde. */
.variations .bootstrap-select > .dropdown-menu {
  width: 100%;
  max-width: 100%;
}
.variations .bootstrap-select .dropdown-menu li a.dropdown-item {
  white-space: normal;
  align-items: center;
}
.variations .bootstrap-select .dropdown-menu li a.dropdown-item > .text {
  flex: 1 1 auto;
  min-width: 0;
}
/* Der innere <span> traegt Name + Aufpreis-Badge: Name umbricht, Preis rechts. */
.variations .bootstrap-select .dropdown-menu li a.dropdown-item > .text > span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .5em;
  overflow-wrap: anywhere;
}
.variations .bootstrap-select .dropdown-menu li a.dropdown-item .badge-surcharge {
  flex: 0 0 auto;
  margin-left: auto;
}
/* Geschlossenes Feld: langer Text wurde hart abgeschnitten (text-overflow:clip)
   und klebte am Pfeil -> jetzt Auslassungspunkte + kleiner Abstand. */
.variations .bootstrap-select > .dropdown-toggle .filter-option { padding-right: 8px; }
.variations .bootstrap-select > .dropdown-toggle .filter-option-inner-inner { text-overflow: ellipsis; }

/* === Variationen: Auswahlliste - Zeilen-Layout ===========================
   Der bootstrap-select-Default gibt den Zeilen nur 3,75px/22,5px Innenabstand
   und line-height 15px -> 22px hohe Zeilen, viel zu gedraengt und auf dem Handy
   kaum zu treffen. Zeilen jetzt einheitlich 46px hoch (Trefferflaeche), mit
   Trennlinie, klarer Auswahlfarbe und lesbarem Aufpreis-Chip.
   min-height + align-items:center sorgen dafuer, dass eine Zeile MIT Aufpreis
   genauso hoch ist wie eine ohne (vorher 47 vs 42px). Farben nach CI:
   corporate-identity-colors. */
.variations .bootstrap-select > .dropdown-menu {
  margin-top: 6px;
  border: 1px solid #e7ebe0;
  box-shadow: 0 10px 28px rgba(47, 62, 70, .14);
}
.variations .bootstrap-select .dropdown-menu li + li { border-top: 1px solid #eef0ea; }
.variations .bootstrap-select .dropdown-menu li a.dropdown-item {
  padding: 11px 18px;
  min-height: 46px;
  line-height: 1.35;
  color: #2f3e46;
  box-shadow: inset 3px 0 0 transparent;
  transition: background-color .12s ease;
}
.variations .bootstrap-select .dropdown-menu li a.dropdown-item:hover,
.variations .bootstrap-select .dropdown-menu li a.dropdown-item:focus {
  background-color: #eef3e3;
  color: #2f3e46;
}
/* Gewaehlte Zeile: Salbei-Flaeche mit dunklem Text (weiss auf #cbd8a6 war
   ~2:1 Kontrast und kaum lesbar) + gruener Balken links als zweites Signal. */
.variations .bootstrap-select .dropdown-menu li a.dropdown-item.active,
.variations .bootstrap-select .dropdown-menu li a.dropdown-item.selected {
  background-color: #cbd8a6;
  color: #2f3e46;
  font-weight: 700;
  box-shadow: inset 3px 0 0 #7a9a4e;
}
/* === Variationen: Aufpreis-Chip auf CI ===================================
   Der Aufpreis kommt aus dem Theme als .badge.badge-primary und erbt damit
   aus styles.css `background-color:#cbd8a6` - also SALBEI, das per Farb-CI
   den gruenen BUTTONS gehoert. Im geschlossenen Feld sah der Aufpreis dadurch
   aus wie ein anklickbarer Button.
   Jetzt CI-Chip: Soft-Gruen #EEF3E3 (CI-Rolle "helle Karten/Chips") mit Rand
   #DBE6BF (CI "gruene Chips/Raender") und Text #46591F (CI "starke gruene
   Textakzente"), Groesse .86rem = CI-Rolle "Sekundaer/Aufpreise".
   Kontrast #46591F auf #EEF3E3 ~6,8:1. Gilt fuer geschlossenes Feld UND Liste. */
.variations .bootstrap-select .badge-surcharge {
  background: #eef3e3;
  color: #46591f;
  border: 1px solid #dbe6bf;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 1px 10px;
  border-radius: 999px;
  text-transform: none;
  margin-left: 8px;
}
/* Auf der gewaehlten (salbeigruenen) Zeile wuerde der Soft-Gruen-Chip mit dem
   Untergrund verschwimmen -> dort weiss. */
.variations .bootstrap-select .dropdown-menu li a.dropdown-item.active .badge-surcharge,
.variations .bootstrap-select .dropdown-menu li a.dropdown-item.selected .badge-surcharge {
  background: #fff;
}


/* =====================================================================
   Varianten-Auswahl Typ RADIO ("Version") — CI-Styling (2026-07-25).
   Markup (admorris_pro/productdetails/variation.tpl):
     .variations .radio-buttons > label.variation
        > input[type=radio] + span.label-variation (+ span.badge-surcharge)
   Vorher: nackte Browser-Radios. Optik konsistent zu den Konfigurator-Optionen.
   ===================================================================== */
.variations legend.freifeld__label{
  font-size:1.05rem; font-weight:700; color:#2f3e46;
  border:0; padding:0; margin:0 0 10px; width:auto; float:none;
}
.variations .radio-buttons{ display:flex; flex-direction:column; gap:9px; }
.variations .radio-buttons label.variation{
  display:flex; align-items:center; gap:12px; margin:0;
  border:1px solid #d7dbcf; border-radius:12px; background:#fff;
  padding:12px 14px; cursor:pointer; font-weight:600; color:#2f3e46;
  transition:border-color .15s, background-color .15s, box-shadow .15s;
}
.variations .radio-buttons label.variation:hover{ border-color:#8da174; background:#f7f9f2; }
.variations .radio-buttons label.variation .label-variation{ flex:1 1 auto; min-width:0; line-height:1.3; }
/* custom Radio-Kreis (native Radio umgestylt) */
.variations .radio-buttons label.variation input[type=radio]{
  -webkit-appearance:none; appearance:none; margin:0; flex:0 0 auto;
  width:20px; height:20px; border-radius:50%;
  border:2px solid #c3ccc0; background:#fff; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.variations .radio-buttons label.variation input[type=radio]:checked{
  border-color:#7a9a4e; background:#7a9a4e; box-shadow:inset 0 0 0 3px #fff;
}
.variations .radio-buttons label.variation input[type=radio]:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(141,161,116,.35);
}
/* ausgewaehlte Zeile = gruen (wie Konfigurator-Option) */
.variations .radio-buttons label.variation:has(input[type=radio]:checked){
  border:2px solid #7a9a4e; background:#eaf1dc;
}
/* Aufpreis-Badge rechts, CI */
.variations .radio-buttons label.variation .badge-surcharge{
  margin-left:auto; flex:0 0 auto;
  background:#eef3e3 !important; color:#46591f !important; font-weight:700;
  border-radius:999px; padding:.3em .7em; font-size:.87rem; white-space:nowrap;
}
/* nicht verfuegbar */
.variations .radio-buttons label.variation.not-available{ opacity:.5; }
.variations .radio-buttons label.variation.not-available .badge-not-available{
  margin-left:auto; background:#e9ecef; color:#6c757d; border-radius:999px;
  padding:.25em .6em; font-size:.8rem; font-weight:600;
}


/* =====================================================================
   VARIANTE 1 — Zusammenfassung "Ihre Konfiguration" optisch aufgewertet
   (Nutzer 2026-07-25). RUECKBAU ("Basisvariante"): diesen Block loeschen
   ODER Datei aus _backups/konfigurator-vor-variante-1-2026-07-25 zuruecksetzen.
   Absichtlich OHNE Trust-/USP-Zeilen (Nutzer: "raus").
   ===================================================================== */
@media (min-width: 992px) {
  /* Kopf: FLACHER Leisten-Gruen-Balken (#DBE6BF) = gleiche CI-Rolle wie die
     Shop-Kopf-/Kategorie-Leiste (Variante A, Nutzerwahl 2026-07-25). Kein Verlauf. */
  #product-configuration-sidebar .panel-heading {
    background: #dbe6bf !important;
    border-bottom: 1px solid #cdd9ae !important;
  }
  /* kleines Checklisten-Icon vor dem Titel (dunkelgruen) */
  #product-configuration-sidebar .panel-title::before {
    content: ""; display: inline-block; width: 18px; height: 18px;
    margin-right: 8px; vertical-align: -3px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2346591f'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2011l3%203L22%204'/%3E%3Cpath%20d='M21%2012v7a2%202%200%2001-2%202H5a2%202%200%2001-2-2V5a2%202%200%20012-2h11'/%3E%3C/svg%3E") no-repeat center/contain;
  }
  /* Grundbett-Zeile: Preis kraeftiger, Name klar */
  #product-configuration-sidebar tbody.summary > tr:first-child .cfg-price {
    font-weight: 800 !important; color: #2f3e46;
  }
  /* Gesamtsumme im Fuss deutlich (falls Theme sie kleiner rendert) */
  #product-configuration-sidebar .cfg-sum-foot .price {
    color: #2f3e46; letter-spacing: -.01em;
  }
  /* OPTIONALE Gruppen = NUR SCHRIFT: leicht, kompakt, keine "Kaestchen"-Wirkung.
     (Der Gruppenname ist sonst 600/dunkel wie eine echte Position.) */
  #product-configuration-sidebar tr.cfg-group-optional .cfg-group {
    font-weight: 400 !important; color: #9aa1a6 !important; font-size: .95rem;
  }
  #product-configuration-sidebar tr.cfg-group-optional > td.cfg-summary-item {
    padding-top: .2rem !important; padding-bottom: .2rem !important;
  }
}
/* VARIANTE 1 — END */

/* ---- Kleines Produkt-Thumbnail vor dem Namen in "Ihre Zusammenstellung"
   (2026-07-25). Quelle = cURLMini (xs, ~80px, ~2-4 KB) -> keine Ladezeit
   verschenkt; Anzeige bewusst klein. CI: weisser Grund, dezenter Rahmen, weiche
   Ecke. Breite fix / Hoehe auto -> kein Verzerren bei 1,6:1-Produktbildern; die
   width/height-Attribute am <img> liefern das Seitenverhaeltnis (kein CLS).
   Rueckbau: diesen Block + das <img> in config_container.tpl & config_summary.tpl
   entfernen. */
.cfg-sum-prod { display: flex; flex-wrap: nowrap; align-items: center; gap: 9px; }
.cfg-sum-thumb {
  flex: 0 0 auto; width: 40px; height: auto; display: block;
  border-radius: 8px; overflow: hidden;           /* runde Ecken zuverlaessig */
  border: 1px solid #e4e8dd; background: #fff;
}
/* Name bleibt NEBEN dem Bild und darf schrumpfen statt umzubrechen-erzwingen;
   min-width:0 laesst ihn im Flex normal umbrechen wie zuvor (keine Extra-Zeile
   durch das Bild). */
.cfg-sum-prod-name { flex: 1 1 auto; min-width: 0; }

/* ============================================================================
   Frage-zum-Produkt (CI-Popup)  —  2026-07-25
   ----------------------------------------------------------------------------
   Der "Frage zum Artikel"-Button (.question, popup-dep) oeffnet ein eModal.
   eModal klont #popupz{kArtikel} (productdetails/question_on_item.tpl,
   position=popup) in .modal-body. Das Child-Template haengt dort eine
   CI-Einleitung (.csq-wrap) an. Der Modal-Rahmen wird ueber
   .modal-content:has(.csq-wrap) gescoped -> trifft NUR dieses Popup, nicht die
   anderen eModals (Verfuegbarkeitsbenachrichtigung, "In den Warenkorb").
   Farben/Typo nach CI (Root=15px). Revert: diesen Block + Child-Template raus.
   ============================================================================ */

/* --- Modal-Rahmen (nur wenn die Frage-Box drin ist) --- */
.modal-content:has(.csq-wrap) {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(47, 62, 70, .22);
}
.modal-content:has(.csq-wrap) .modal-header {
  background: #eef3e3;
  border-bottom: 1px solid #dbe6bf;
  padding: 15px 20px;
  align-items: center;
}
.modal-content:has(.csq-wrap) .modal-title {
  color: #2f3e46;
  font-size: 1.15rem;
  font-weight: 700;
}
.modal-content:has(.csq-wrap) .modal-title small { display: none; }
.modal-content:has(.csq-wrap) .close,
.modal-content:has(.csq-wrap) .x.close {
  color: #2f3e46;
  opacity: .55;
  text-shadow: none;
}
.modal-content:has(.csq-wrap) .close:hover,
.modal-content:has(.csq-wrap) .x.close:hover { opacity: 1; }
.modal-content:has(.csq-wrap) .modal-body { padding: 20px; }

/* --- Wrapper --- */
.csq-wrap { font-size: 1rem; color: #2f3e46; }

/* --- Einleitung --- */
.csq-lead {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.5;
  color: #2f3e46;
}

/* --- Telefon-Box (unterstuetzendes Element, gut sichtbar) --- */
.csq-call {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 15px;
  margin: 0 0 15px;
  background: #fff;
  border: 1.5px solid #8da174;
  border-radius: 12px;
  text-decoration: none !important;
  color: #2f3e46;
  transition: background .15s ease, border-color .15s ease;
}
.csq-call:hover,
.csq-call:focus { background: #f3f6ec; border-color: #7a9a4e; }
.csq-call-ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #7a9a4e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.csq-call-ic svg { width: 22px; height: 22px; display: block; }
.csq-call-tx { display: flex; flex-direction: column; min-width: 0; }
.csq-call-k { font-size: .87rem; color: #6a7b59; }
.csq-call-n { font-size: 1.2rem; font-weight: 800; color: #46591f; line-height: 1.2; }
.csq-call-s { font-size: .87rem; color: #6a7b59; }

/* --- Vertrauens-Chips --- */
.csq-trust {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 16px;
}
.csq-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .87rem;
  color: #2f3e46;
  line-height: 1.3;
}
.csq-trust li strong { font-weight: 700; color: #46591f; }
.csq-trust-ic {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8da174;
}
.csq-trust-ic svg { width: 17px; height: 17px; display: block; }
.csq-trust-ic.csq-star { color: #e8a200; }

/* --- Formular in CI --- */
.csq-wrap fieldset { border: 0; margin: 0; padding: 0; }
.csq-wrap legend {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2f3e46;
  border: 0;
  margin: 18px 0 10px;
  padding: 0;
  width: auto;
}
/* Submit = primaere Aktion pro Popup -> Kraeftig-Gruen (CI) statt Salbei */
.csq-wrap button[type="submit"],
.csq-wrap .btn-primary {
  background: #7a9a4e !important;
  border-color: #7a9a4e !important;
  color: #fff !important;
  font-weight: 700;
}
.csq-wrap button[type="submit"]:hover,
.csq-wrap .btn-primary:hover {
  background: #6c8a44 !important;
  border-color: #6c8a44 !important;
}
.csq-wrap .privacy { margin-top: 10px; }

/* --- Datenschutz-/E-Mail-Fusszeile --- */
.csq-support {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #ececec;
  font-size: .87rem;
  color: #6a7b59;
  line-height: 1.45;
}
.csq-support-ic { flex: 0 0 auto; color: #8da174; margin-top: 1px; }
.csq-support-ic svg { width: 16px; height: 16px; display: block; }
.csq-support a { color: #46591f; }

/* --- Mobil --- */
@media (max-width: 575.98px) {
  .modal-content:has(.csq-wrap) .modal-body { padding: 16px; }
  /* Chips einspaltig -> saubere einzeilige Zeilen auf schmalen Phones */
  .csq-trust { grid-template-columns: 1fr; gap: 9px; }
  .csq-call-n { font-size: 1.15rem; }
}

/* ==========================================================================
   MOBIL (<992px): Schritt-Kopf schliesst BUENDIG an die Kopfzeile an
   (2026-07-26). Vorher landete ein angetippter Schritt ein paar Pixel unter
   der Kopfzeile – in diesem schmalen Streifen scrollten die anderen Schritte
   sichtbar durch, und der Kopf war oben rund (wirkte losgeloest).
   - "top" kommt jetzt aus --cs-cfg-stick-top: der in config_container.tpl
     GEMESSENEN Unterkante der Kopfzeile (der Theme-Schaetzwert
     --adm-sticky-top-offset lag mobil daneben). Fallback = alter Wert.
   - Obere Radien im angepinnten Zustand weg: macht schon die is-stuck-Regel
     weiter oben; hier zusaetzlich fuer den EINGEKLAPPTEN Kopf abgesichert.
   Desktop bleibt unveraendert.
   ========================================================================== */
@media (max-width: 991.98px) {
  #cfg-container .cfg-group.card > .cfg-group-title {
    top: var(--cs-cfg-stick-top, calc(var(--adm-sticky-top-offset, 59px) - 5px));
  }
  #cfg-container .cfg-group.card > .cfg-group-title.is-stuck,
  #cfg-container .cfg-group.card:not(:has(> .collapse.show)) > .cfg-group-title.is-stuck {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  /* Die Karte selbst hat overflow:clip -> sie wuerde den eckigen Kopf wieder
     rund BESCHNEIDEN. Also auch die Karte oben eckig, solange ihr Kopf klebt. */
  #cfg-container .cfg-group.card:has(> .cfg-group-title.is-stuck) {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
}