/* ============================================================================
   careshop – GLOBAL (laedt auf JEDER Seite via Child layout/header.tpl)
   Ersetzt den Backend-Tab "User-Styles". Plain-CSS (kein SCSS!).
   Produktseiten-/Konfigurator-CSS liegt in productdetails.css.
   ============================================================================ */


/* === Header & Navigation =============================================== */
.header__desktop-nav .row-1 {
    --header-row-bg-color: #fcfcfc;
    --header-row-text-color: #6b6b6b;
    --header-row-font-size: 12px;
    --header-row-text-transform: none;
    --header-row-font-weight: 400;
    --header-row-padding-top: 0px;
    --header-row-padding-bottom: 0px;
    --header-row-padding-left: 0;
    --header-row-padding-right: 0;
    --header-row-margin-top: 0;
    --header-row-margin-bottom: 0;
    --header-row-border-radius-top-left: 0;
    --header-row-border-radius-top-right: 0;
    --header-row-border-radius-bottom-left: 0;
    --header-row-border-radius-bottom-right: 0;
    --header-row-border: solid 1px #bebebe;
}
.header__desktop-nav .row-2 {
    --header-row-bg-color: #fff;
    --header-row-text-color: #333;
    --header-row-font-size: 15.5px;
    --header-row-text-transform: none;
    --header-row-font-weight: 600;
    --header-row-padding-top: 25px;
    --header-row-padding-bottom: 20px;
    --header-row-padding-left: 0;
    --header-row-padding-right: 0;
    --header-row-margin-top: 0;
    --header-row-margin-bottom: 0;
    --header-row-border-radius-top-left: 0;
    --header-row-border-radius-top-right: 0;
    --header-row-border-radius-bottom-left: 0;
    --header-row-border-radius-bottom-right: 0;
    --header-row-border: solid 0px rgba(238, 238, 238, .49);
}
.header__nav-wrapper:not(.boxed-header) .row-3 { margin-bottom: -5px; }
.header__nav-wrapper.sticky .header__mobile-nav .row-2 { --header-row-bg-color: #ffffff; }
.header__mobile-nav .row-2 {
    --header-row-bg-color: #fff;
    --header-row-text-color: #333;
    --header-row-font-size: 14px;
    --header-row-text-transform: none;
    --header-row-font-weight: 600;
    --header-row-padding-top: 5px;
    --header-row-padding-bottom: 5px;
    --header-row-padding-left: 0;
    --header-row-padding-right: 0;
    --header-row-margin-top: 0px;
    --header-row-margin-bottom: 0px;
    --header-row-border-radius-top-left: 0px;
    --header-row-border-radius-top-right: 0px;
    --header-row-border-radius-bottom-left: 0px;
    --header-row-border-radius-bottom-right: 0px;
    --header-row-border: solid 0px #eee;
}

.nav2-item.has-dropdown { position: relative; }
.nav2-item.has-dropdown:hover > .dropdown-menu {
    display: block !important; position: absolute; top: 100%; right: 0; left: auto; z-index: 1000;
}
.nav3-item.has-dropdown { position: relative; }
.nav3-item.has-dropdown:hover > .dropdown-menu {
    display: block !important; position: absolute; top: 100%; left: -15px; z-index: 1000;
}
.nav3-link { padding-top: 11px; padding-right: 10px; }

/* Hauptmenue-Label "Unser Sortiment" */
.main-menu-label {
  display: flex; align-items: center; position: sticky; top: 0; z-index: 1000;
  font-size: 1.4rem; font-weight: 600; color: #333; background: none;
}
.main-menu-label i { font-size: 2.2rem; color: #333; flex-shrink: 0; }
.menu-text { margin-left: 10px; font-size: 1.4rem; transition: opacity 0.3s ease; white-space: nowrap; }
.menu-text.hidden { display: none; }
.menu-text::before, .menu-text::after { content: none; display: none; }

.button_15 { margin-top: -15px; position: relative; z-index: 2; }


/* === Layout & Container ================================================= */
.maxbreit { max-width: 1640px; margin: 0 auto; }
.main-content-wrapper { padding-top: 25px; padding-bottom: 25px; }
.textcenter { text-align: center; }
.word-break { hyphens: unset; }
/* .desc/.shortdesc/.product-title werden unten EINHEITLICH behandelt (eine Quelle der Wahrheit). */


/* === Warenkorb / Cart / Angebot ======================================== */
.cart-dropdown .btn-link { border-color: #000; }
.basket-items { margin-bottom: 0rem !important; }
.cart-item-remove-form button { padding: 0; border: none; background: none; }
.cart-item-remove-form i { font-size: 1rem; color: #dc3545; }
.amazonpay-button-view1-gold { border-radius: 20px !important; }
.scroll-cart-hidden { display: none !important; }
.scroll-cart-visible { display: list-item !important; }

.openOfferRequestWrapper .btn-danger {
    color: #fff; box-shadow: none; background-color: #7a9a4e;
    text-align: center; border-color: #7a9a4e;
}
#openOfferRequestWrapper > div > div.lpa-button.lpa-button-pay.lpa-button-context-pay { display: none; }
#openOfferRequestWrapper { background: #fff !important; }


/* === Suche ============================================================= */
.ajax-suche-wrapper .price { font-size: 1rem !important; }
.close { z-index: 9999 !important; }
.header-search--input .search__form .search__input { padding-bottom: 6px !important; }
@media (max-width: 767px) {
    .ajax-suche-wrapper { position: fixed !important; }
    .ajax-suche-wrapper .card { top: 72px !important; }
}


/* === ShopVote-Badge + Trust-Tab (global) =============================== */
/* Mobil: Badge + Tab aus */
@media (max-width: 1030px) {
  #shopvote-badge-wrapper,
  #sv-rbadge-box,
  #cfg-trust-mini { display: none !important; }
}

/* Grundzustand des grossen Badges. Position setzt custom.js per Inline-!important
   (unten links buendig, hebt sich ueber die Warenkorbleiste) – hier nur weiche Uebergaenge. */
#sv-rbadge-box {
  position: fixed; left: 0; bottom: 0; z-index: 9999;
  opacity: 1; transition: bottom .25s ease, opacity .4s ease;
}
#sv-rbadge-box.hidden { opacity: 0; pointer-events: none; }

/* MITTE-Zone: grosses Badge aus, kleiner Tab an; sonst Badge an */
body.cfg-trust-show #sv-rbadge-box { opacity: 0 !important; pointer-events: none !important; }
body:not(.cfg-trust-show) #sv-rbadge-box { opacity: 1 !important; pointer-events: auto !important; }
/* Hover (untere linke Ecke) oder 15s-Klick -> grosses Badge wieder einblenden */
body.cfg-trust-show.cfg-trust-hover #sv-rbadge-box,
body.cfg-trust-show:has(#cfg-trust-mini:hover) #sv-rbadge-box,
body.cfg-trust-show:has(#sv-rbadge-box:hover) #sv-rbadge-box,
body.cfg-trust-show.cfg-trust-pinned #sv-rbadge-box { opacity: 1 !important; pointer-events: auto !important; }

/* Kleiner Trust-Tab */
#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; }
body.cfg-trust-pinned #cfg-trust-mini { display: none !important; }
#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; }


/* === Cookie-Banner ===================================================== */
#consent-banner-btn-all { background-color: #cbd8a6 !important; }


/* === Cards & Akkordeon (global) ======================================== */
.card { margin-bottom: 0.2rem; background: #f8f8f8; border-radius: 16px; }
.card-header:first-child { border-radius: unset; }
.card-header { background-color: #f8f8f8 !important; }
.dzm-csup-wrapper .card, .card-body, .card-header { background-color: #f8f8f8 !important; border: none; }
.alert-success { color: #000; background-color: #cbd8a6; }

.akkordeon_normal .card:not(.card-products) .card-header .btn { padding-top: 15px; padding-bottom: 15px; }
.card:not(.card-products) .card-header .btn { padding-top: 15px; padding-bottom: 15px; }

.faq .btn  { text-transform: unset !important; font-size: 1.4rem; }
.faq2 .btn { text-transform: unset !important; font-size: 1.2rem; }
.opc-Accordion-head.btn-link { width: 100%; white-space: normal; text-align: left; }
.rahmen1 { border-radius: 16px; border: 1px; }

.badge:not(.badge-pill,.badge-outline-secondary) { text-transform: unset; }


/* === Produkt-Slider / Produktkacheln (global – auf vielen Seiten) ======
   (Verschachtelung flach gezogen – war SCSS-Nesting.) */
.product-wrapper.slider { height: 100%; }
.product-wrapper.slider .product-cell { height: 100%; }
.product-wrapper.slider .product-cell .product-cell__wrapper { height: 100%; }
.product-wrapper.slider .product-cell .product-cell__wrapper .stack { height: 100%; }
.product-wrapper.slider .expandable { height: 100%; }
.product-cell { display: flex; flex-direction: column; height: 100%; }
.product-wrapper .stack { height: 100%; }
.kk-article-slider .int-nova-article-wrapper,
.kk-article-slider .kk-nova-article-wrapper { max-width: unset; }

/* Overlay-Labels auf Produktkacheln (global) */
.overlay-label {
	z-index: 10; color: #444; white-space: nowrap; text-transform: uppercase;
	border-radius: 16px !important; padding: .5em .9em !important;
	font-size: .8rem; font-weight: 700; position: absolute; top: 5px !important; left: 0;
}
/* CI-Grüntöne mit Emphasis-Abstufung (dunkel -> hell), Pill-Radius wie die übrigen Pillen. */
.overlay-label.topangebote { background-color: #7a9a4e; color: #fff; }   /* Kräftig-Grün */
.overlay-label.topbewertet { background-color: #8da174; color: #fff; }   /* Akzent-Grün */
.overlay-label.bestseller  { background-color: #cbd8a6; color: #333; }   /* Salbei */

@media (max-width: 992px) {
  .overlay-label { display: none; }
  .am-discount--overlay { display: none; }
  .product-cell__actions { display: none; }
  .overlay-label.bestseller { background-color: none; }
}


/* === Startseite ======================================================== */
.kk-powerslide .slide .content {
	text-align: left; padding: 2em; background: none !important; border-radius: 16px;
	color: #fff; margin: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); white-space: normal;
}


/* === Bilder / Schatten / OPC-Banner (global) =========================== */
.image-alex1 { transition: all 0.3s linear; }
.image-alex1:hover { transform: scale(1.02); }
.shadow { text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.shadow .top25 .dzm-opcis-content-container {
    background: rgba(0, 0, 0, .0); height: 100%; width: 100%; position: absolute;
    left: 0; top: 25px; right: 0; bottom: 0;
}
.dzm-btn { text-shadow: none; }
.opc-Button { text-shadow: none; }


/* === YouTube (global) ================================================== */
.ytp-impression-link {
	background: none !important; border-bottom-right-radius: 2px; border-top-right-radius: 2px;
	bottom: 5px; height: 47px; position: absolute; display: none !important;
}
.ytp-impression-link-text { display: none !important; }
.ytp-impression-link-content { display: none !important; }
.ytp-gradient-top, .ytp-gradient-bottom {
	width: 100%; position: absolute; background: none !important;
	transition: opacity .25s cubic-bezier(0,0,.2,1); pointer-events: none;
}
.youtube { min-height: 0px !important; }


/* Beschreibungstexte: langer Wortbruch als Notnagel ok (eine Quelle der Wahrheit). */
.desc, .shortdesc {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;               /* deutsche Silbentrennung, dank lang="de" */
}

/* Produkt-Titel: KEINE Silbentrennung mitten im Wort. Es darf NUR an echten
   Bindestrichen und Leerzeichen umgebrochen werden (z.B. "höhenverstell-" / "und"),
   also an ganzen Wortgrenzen - nie "höhenvers-tellbar". !important schlaegt das
   Eltern-Theme (.product-title{hyphens:auto;word-break:break-word}) unabhaengig von
   der Lade-Reihenfolge. */
.product-title {
    overflow-wrap: normal !important;
    word-break: normal !important;
    word-wrap: normal !important;
    hyphens: manual !important;             /* keine automatische Silbentrennung */
    -webkit-hyphens: manual !important;
    -ms-hyphens: manual !important;
    min-width: 0;                           /* Flex-Item darf schrumpfen (steht neben dem Marken-Logo) */
}
/* Titelgroesse + Logo-Anordnung werden in productdetails.css (.product-headline) geregelt. */


/* === Honeypot (Spam-Falle) =============================================== */
/* JTL-Core blendet das Feld per Inline-<style>#hpiXXX{display:none} aus, die
   ID ist aber pro Aufruf zufaellig (uniqid) und wird beim CSS-Zusammenfassen
   gecacht -> Feld wird sichtbar. Hier cache-unabhaengig per Name ausblenden. */
input[name="jtl_hp_input"] { display: none !important; }


/* ============================================================================
   WARENKORB (Stand 2026-07-05, nach Nutzer-Rueckbau): NUR noch zwei Bausteine —
   1. Kompakter Ergaenzungs-Drop ".Passt zu Ihrem Pflegebett" (.csw-*)
   2. Mobile Kassen-Leiste unten (#csw-kassenbar)
   Beides gehoert zu opc/warenkorb-ergaenzungen.html (kkDropper-Drop, Smarty AUS).
   ALLES ANDERE (mobiler Spalten-Tausch, Slider-Fallback-Deckel, Stufe-3-Template
   .cswt-*) wurde auf Nutzerwunsch ZURUECKGENOMMEN.
   Komplett-Rollback: diesen Block loeschen + Drop im kkDropper deaktivieren
   (Original-Slider-Drop dort reaktivieren); Backup:
   _backups/warenkorb-ausgangszustand/global.css.original
   ============================================================================ */

/* Kompakter Ergaenzungs-Drop (.csw-*): Stile fuer opc/warenkorb-ergaenzungen.html */
.csw-box { border: 1px solid #e7ebe0; border-radius: 14px; margin: 14px 0 4px; overflow: hidden; background: #fff; }
.csw-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #eef3e3; color: #46591f; font-size: .95rem; font-weight: 700; }
.csw-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid #f0f2ec; }
.csw-row img { width: 46px; height: 40px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.csw-name { flex: 1 1 auto; min-width: 0; font-size: .95rem; color: #2f3e46; line-height: 1.3; }
.csw-name small { display: block; color: #6a7b59; font-size: .87rem; }
.csw-price { font-size: .95rem; font-weight: 700; color: #2f3e46; white-space: nowrap; }
.csw-add { flex: 0 0 auto; }
.csw-add button { border: 0; background: #7a9a4e; color: #fff; font-size: .87rem; font-weight: 700; padding: 7px 14px; border-radius: 16px; cursor: pointer; transition: background .15s; }
.csw-add button:hover { background: #6c8a44; }

/* Mobile Kassen-Leiste (#csw-kassenbar, baut das Script im Drop): fixe Leiste
   unten mit Gesamtsumme + Zur-Kasse; nur <992px und nur wenn die echte
   Summen-Box NICHT im Bild ist. */
#csw-kassenbar { display: none; }
@media (max-width: 991.98px) {
  #csw-kassenbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; align-items: center; gap: 12px; padding: 9px 14px;
    background: #fff; border-top: 1px solid #e7ebe0; box-shadow: 0 -4px 14px rgba(47,62,70,.10);
    transform: translateY(110%); transition: transform .2s ease;
  }
  #csw-kassenbar.show { transform: translateY(0); }
  #csw-kassenbar .csw-total { flex: 1 1 auto; line-height: 1.15; }
  #csw-kassenbar .csw-total small { display: block; font-size: .8rem; color: #6a7b59; }
  #csw-kassenbar .csw-total b { font-size: 1.15rem; color: #2f3e46; }
  #csw-kassenbar .csw-kasse {
    flex: 0 0 auto; border: 0; background: #7a9a4e; color: #fff; font-size: 1rem;
    font-weight: 700; padding: 11px 26px; border-radius: 24px; cursor: pointer;
  }
}

/* --- Warenkorb-Positionen als Karte (Child basket/cart_items.tpl, .cswc-*) ---
   Nutzer-Design 2026-07-05: eine Einheit mit dezentem Rahmen; Bild links,
   Name rechts daneben; Herz/Loeschen oben rechts; Konfigurations-Box
   (mobil zu / Desktop offen); Fusszeile Anzahl links + Konfigurierter Preis
   rechts. Rollback: cart_items.tpl loeschen + diesen Teilblock. */
.row.basket .cart-items-header { display: none !important; }   /* Tabellenkopf obsolet */
.row.basket .cart-items-body {
  position: relative; border: 1px solid #dbe6bf; border-radius: 16px;
  background: #fff; padding: 12px 12px 10px; margin: 0 0 14px;
}
.cswc-spacer { display: none; }                                /* ersetzt die alte <hr> */
.row.basket .cart-items-body > .cart-items-image { flex: 0 0 84px; max-width: 84px; padding-right: 0; }
.row.basket .cart-items-body > .cart-items-image img { border-radius: 10px; }
.row.basket .cart-items-name { font-weight: 600; line-height: 1.3; }
/* Aktionen oben rechts: nur noch Loeschen (Teilen je Position ist raus -
   geteilt wird der gesamte Korb ueber das Panel in der Titelzeile).
   Das Herz sitzt unten in der Fusszeile (.cswc-heart). */
.row.basket .cart-items-delete {
  position: absolute; top: 8px; right: 10px; width: auto; max-width: none;
  padding: 0; display: flex; align-items: center; gap: 6px;
}
/* Bei ARTIKEL sitzt der Papierkorb jetzt unten neben dem Herz -> die alte
   oben-rechts-Spalte enthaelt dann nur noch den (versteckten) Merk-Marker -> weg. */
.row.basket .cart-items-delete:not(:has(.cart-items-delete-button)) { display: none; }
/* Merken (Herz) + Loeschen (Papierkorb) als rundes Icon-Paar unten links */
.cswc-actions { display: inline-flex; align-items: center; gap: 6px; }
/* WICHTIG: Der Herz-Wrapper (.cswc-heart) ist nur eine Huelle - der klickbare
   Submit-Button liegt DARIN. Die runde 38px-Optik muss deshalb auf den echten
   Button, sonst ist nur der ~23px-Icon-Kern klickbar und der Rand ist tot
   ("Klick aufs Herz passiert nichts"). */
.cswc-actions .cswc-heart { display: inline-flex; padding: 0; margin: 0; vertical-align: middle; }
.cswc-actions .cswc-heart .wishlist-button,
.cswc-actions .cswc-heart .btn,
.cart-items-quantity .cswc-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #e7ebe0; background: #fff; color: #6a7b59;
  padding: 0; margin: 0; vertical-align: middle;
}
.cswc-actions .cswc-heart .wishlist-button svg,
.cswc-actions .cswc-heart .wishlist-button .icon-content,
.cart-items-quantity .cswc-del svg,
.cart-items-quantity .cswc-del .icon-content { width: 18px; height: 18px; }
.cart-items-quantity .cswc-del:hover { color: #a5341f; border-color: #f0c9c0; background: #fdf3f1; }
.cswc-actions .cswc-heart .wishlist-button:hover { color: #46591f; border-color: #cbd8a6; background: #f3f6ec; }
.cswc-actions .cswc-heart .wishlist-button.on-list,
.cswc-actions .cswc-heart .wishlist-button.on-list .icon-content { color: #c0392b; }

/* ============================================================================
   EINHEITLICHE HINWEIS-TOASTS  (js/cs-notify.js -> window.csNotify)
   ----------------------------------------------------------------------------
   Loest .cswc-toast (warenkorb.js) + .cshcfg-toast (cfg-memory.js) optisch ab.
   Der Stack #cs-notify-stack wird von cs-notify.js per Inline-`bottom` GENAU
   ueber die gerade sichtbare fixe Warenkorb-Leiste gehoben (Produktseite:
   .productdetails-fixed-form--bottom, Warenkorbseite: #csw-kassenbar) -> die
   Hinweise verdecken die Sticky-Leiste nie mehr. Alt-Klassen bleiben als
   Fallback (weiter unten), falls cs-notify.js mal nicht laedt.
   ============================================================================ */
#cs-notify-stack {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 100090;                              /* ueber Sticky-Leisten + Teilen-Modal (100080) */
  width: min(94vw, 440px);
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;                         /* Klicks nur auf die Toasts selbst */
}
.cs-notify {
  pointer-events: auto; position: relative;
  display: flex; align-items: flex-start; gap: 11px;
  background: #fff; color: #2f3e46;
  border: 1px solid #e7ebe0; border-left: 4px solid #8da174;
  border-radius: 14px; padding: 13px 40px 13px 14px;
  box-shadow: 0 12px 34px rgba(47,62,70,.20);
  font-size: .95rem; line-height: 1.4;
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.3,1);
}
.cs-notify.is-in  { opacity: 1; transform: translateY(0) scale(1); }
.cs-notify.is-out { opacity: 0; transform: translateY(8px) scale(.98); }
.cs-notify__icon {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef3e3; color: #4c6b2f;
}
.cs-notify__icon svg { width: 15px; height: 15px; display: block; }
.cs-notify__body { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.cs-notify__msg  { display: block; font-weight: 600; }
.cs-notify__msg a { color: #4c6b2f; text-decoration: underline; }
.cs-notify__action {
  flex: 0 0 auto; align-self: center;
  border: 0; border-radius: 999px; padding: 6px 14px;
  background: #cbd8a6; color: #333; font-size: .87rem; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.cs-notify__action:hover { background: #bccb92; }
.cs-notify__close {
  position: absolute; top: 8px; right: 9px;
  border: 0; background: transparent; color: #9aa89a;
  width: 22px; height: 22px; line-height: 1; font-size: 19px; padding: 0;
  cursor: pointer; border-radius: 50%; transition: color .15s, background .15s;
}
.cs-notify__close:hover { color: #2f3e46; background: #f0f2ec; }
/* Typ-Akzente (Farb-CI: Gruen=ok, Rot=Fehler) */
.cs-notify--success { border-left-color: #7a9a4e; }
.cs-notify--success .cs-notify__icon { background: #e9f1d9; color: #4c6b2f; }
.cs-notify--error   { border-left-color: #c0392b; }
.cs-notify--error .cs-notify__icon   { background: #fbe7e4; color: #c0392b; }
.cs-notify--info    { border-left-color: #8da174; }
.cs-notify--loading { border-left-color: #8da174; }
.cs-notify__spin {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid #cbd8a6; border-top-color: #7a9a4e;
  animation: csNotifySpin .7s linear infinite;
}
@keyframes csNotifySpin { to { transform: rotate(360deg); } }
@media (max-width: 575.98px) {
  #cs-notify-stack { width: calc(100vw - 20px); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-notify { transition: opacity .2s ease; transform: none; }
  .cs-notify.is-in, .cs-notify.is-out { transform: none; }
  .cs-notify__spin { animation-duration: 1.4s; }
}

/* Teilen-Toast (ALT-Fallback, nur aktiv wenn cs-notify.js fehlt) */
.cswc-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 12px);
  z-index: 100090; background: #2f3e46; color: #fff; padding: 11px 18px;   /* ueber dem Teilen-Modal (100080) */
  border-radius: 999px; font-size: .95rem; font-weight: 600;
  box-shadow: 0 10px 28px rgba(0,0,0,.3); opacity: 0;
  transition: opacity .3s, transform .3s; max-width: 92vw; text-align: center;
}
.cswc-toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Artikel-Infos: NUR Art.-Nr. + Hersteller als EINE Zeile; Variationen
   (Dicke/Groesse/Bezug ...) sauber untereinander (liefen sonst als Brei ineinander) */
.row.basket .cart-items-body ul.list-unstyled { margin: 2px 0 6px; font-size: .9rem; color: #6a7b59; }
.row.basket .cart-items-body ul.list-unstyled li { display: block; padding: 1px 0; }
.row.basket .cart-items-body ul.list-unstyled li strong { font-weight: 400; }
.row.basket .cart-items-body ul.list-unstyled li.sku,
.row.basket .cart-items-body ul.list-unstyled li.manufacturer { display: inline; }
.row.basket .cart-items-body ul.list-unstyled li.manufacturer::before { content: " \00b7 "; }
.row.basket .cart-items-body ul.list-unstyled li.variation strong { color: #8a9282; }
/* Menge-Zeile (Konfig-Artikel) dezent */
/* Preis: Label klein, Betrag deutlich - EINZIGE Preisanzeige der Karte */
/* white-space normal: als nowrap lief "Konfigurierter Preis" (112px) auf
   Mobil aus der 99px-Preisspalte - darf zweizeilig umbrechen */
.cswc-pricelabel { display: block; font-size: .87rem; color: #6a7b59; white-space: normal; }
.row.basket .cart-items-price .price_overall { font-size: 1.15rem; font-weight: 700; }

/* Konfigurations-Box */
/* Detailbox (Konfiguration UND Ausfuehrung/Variationen - EIN Layout fuer
   alle Artikeltypen, Nutzerwunsch): DEZENT hellgrau statt gruen, Kopf
   schlicht, "aendern" als Textlink. Mobil zu / Desktop offen wie gehabt. */
.cswc-cfg { border: 1px solid #eef0e9; border-radius: 10px; margin: 6px 0 4px; overflow: hidden; background: #f7f8f4; }
.cswc-cfg-head {
  display: flex; align-items: center; gap: 8px; width: 100%; border: 0;
  background: transparent; color: #6a7b59; font-size: .95rem; font-weight: 600;
  padding: 8px 12px; cursor: pointer; text-align: left;
}
.cswc-cfg-head svg { width: 14px; height: 14px; flex: 0 0 auto; color: #8da174; }
/* Titel + Pfeil zusammen = Aufklapp-Signal; "aendern" als Link rechts */
.cswc-cfg-title { flex: 0 1 auto; }
.cswc-spring { flex: 1 1 auto; }
.cswc-edit {
  flex: 0 0 auto; font-size: .9rem; font-weight: 600; color: #46591f !important;
  text-decoration: underline !important; background: none; border: 0; padding: 0;
}
.cswc-edit:hover { color: #2f3e46 !important; }
.cswc-chev { width: 8px; height: 8px; border-right: 2px solid #8da174; border-bottom: 2px solid #8da174; transform: rotate(45deg); transition: transform .2s; margin-top: -3px; flex: 0 0 auto; }
.cswc-cfg.is-open .cswc-chev { transform: rotate(-135deg); margin-top: 3px; }
.cswc-cfg-body { display: none; padding: 0 12px 9px; }
.cswc-cfg--var .cswc-iname strong { color: #6a7b59; font-weight: 600; }
.cswc-cfg.is-open .cswc-cfg-body { display: block; }
.cswc-list { margin: 0 !important; padding: 0; list-style: none; }
.cswc-list li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: .95rem; color: #2f3e46; }
.cswc-list .cswc-iname .qty { color: #6a7b59; }
.cswc-list .cswc-iprice { color: #6a7b59; font-size: .9rem; white-space: nowrap; }   /* Aufpreise DEZENT */
.cswc-oneoff { color: #6a7b59; }
/* Desktop (>=992px): Konfigurations-Box IMMER offen, Pfeil weg */
@media (min-width: 992px) {
  .cswc-cfg-body { display: block !important; }
  .cswc-cfg .cswc-chev { display: none; }
  .cswc-cfg-head { cursor: default; }
}

/* "(N Artikel)" in der Warenkorb-Ueberschrift klein/grau (basket/index.tpl) */
.basket-heading .cswc-count {
  font-size: 1rem; font-weight: 600; color: #6a7b59; margin-left: 6px;
  vertical-align: 2px; white-space: nowrap;
}

/* Leere Stueckpreis-Spalte (Konfig-Artikel) komplett raus, sonst Leer-Zeile im Grid */
.row.basket .cart-items-body .cart-items-single-price:not(:has(strong)) { display: none; }

/* GRID-Karte auf ALLEN Bildschirmgroessen (vorher nur mobil -> auf Desktop
   kollidierten die absoluten Icons mit Preis/Anzahl in der alten Spalten-Zeile).
   display:contents loest die Bootstrap-Zwischencontainer auf, damit die inneren
   Spalten direkte Grid-Kinder werden. Feste Zeilen (sonst platziert die Grid-
   Auto-Logik Elemente uebereinander):
     Zeile 1 = Bild | Name        Zeile 2 = Stueckpreis (nur Nicht-Konfig)
     Zeile 3 = Infos + Konfigurations-Box (VOLLE Breite, nutzt Platz unterm Bild)
     Zeile 4 = Herz + Anzahl | Preis */
.row.basket .cart-items-body {
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 12px; align-items: start;
}
.row.basket .cart-items-body > .cart-items-image {
  grid-column: 1; grid-row: 1; flex: none; max-width: none; width: 84px; padding: 0;
}
.row.basket .cart-items-body > .col,
.row.basket .cart-items-body > .col > .row { display: contents; }
.row.basket .cart-items-body > .col > .row > .col-12:first-child {
  grid-column: 2 / 4; grid-row: 1; padding: 0 8px 0 0;   /* Papierkorb ist jetzt unten (bei ARTIKEL) -> kein 64px-Reserve oben rechts mehr */
}
.row.basket .cart-items-body .cart-items-single-price {
  grid-column: 1 / 4; grid-row: 2; padding: 0;
  font-size: .87rem; color: #6a7b59;                        /* Stueckpreis dezent */
}
.row.basket .cart-items-body .cart-items-single-price .cart-items-price-text { font-weight: 400; }
.row.basket .cart-items-body > .col > .row > .ml-auto { grid-column: 1 / 4; grid-row: 3; padding: 0; margin-top: 8px; }
/* Desktop: Infos + Detailbox an der TEXT-Kante (Spalte 2) statt unterm
   Bild - die volle Kartenbreite nutzt nur Mobil (Nutzerwunsch) */
@media (min-width: 992px) {
  .row.basket .cart-items-body > .col > .row > .ml-auto { grid-column: 2 / 4; }
  .row.basket .cart-items-body .cart-items-single-price { grid-column: 2 / 4; }
}
.row.basket .cart-items-body .cart-items-quantity {
  grid-column: 1 / 3; grid-row: 4; text-align: left !important; padding: 8px 0 2px;
  border-top: 1px solid #eef3e3; margin-top: 8px; align-self: stretch;
  /* Herz + Papierkorb + Stepper als eine saubere, mittig ausgerichtete Gruppe
     links (einheitliche Button-Groesse, gleichmaessiger Abstand). */
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
}
.row.basket .cart-items-body .cart-items-price {
  grid-column: 3 / 4; grid-row: 4; text-align: right; padding: 8px 0 0;
  border-top: 1px solid #eef3e3; margin-top: 8px; align-self: end;
}
/* Preis-Label (auch bei normalen Artikeln) klein/grau UEBER dem Betrag - Betrag buendig */
.row.basket .cart-items-price .cart-items-price-text {
  display: block; font-size: .87rem; color: #6a7b59; font-weight: 400;
}
/* Herz + Papierkorb + Stepper bleiben als kompakte Gruppe links beisammen
   (frueher riss margin-right:auto sie auf Desktop weit auseinander -> unruhig).
   Preis sitzt in der eigenen Spalte rechtsbuendig. */
@media (min-width: 992px) {
  .row.basket .cart-items-body .cart-items-quantity { justify-content: flex-start; }
  .row.basket .cart-items-body .cart-items-quantity .cswc-actions { margin-right: 0; }
}
/* SCHMALE Handys (<=575px): "Konfigurierter Preis" (langes Label) + Betrag passten
   nicht in die schmale Preis-Spalte (1fr ~104px neben der 200px-Steuerung -> Label
   2-zeilig, Betrag gequetscht). Preis auf eine EIGENE volle Zeile UNTER die Steuerung
   -> Label + Betrag nebeneinander, rechtsbuendig, genug Platz. */
@media (max-width: 575px) {
  .row.basket .cart-items-body .cart-items-quantity { grid-column: 1 / 4; grid-row: 4; }
  .row.basket .cart-items-body .cart-items-price {
    grid-column: 1 / 4; grid-row: 5; text-align: right;
    padding: 2px 0 0; border-top: 0; margin-top: 0;
  }
  .cswc-pricelabel,
  .row.basket .cart-items-body .cart-items-price .cart-items-price-text { display: inline; margin-right: 8px; }
  .row.basket .cart-items-body .cart-items-price .price_overall { white-space: nowrap; }
}

/* Bootstrap-Spaltenbreiten (col-xl-4/-2 usw.) kappen die Grid-Zellen per
   max-width -> Anzahl-Zelle rueckte an die Preisspalte und die Preisbox war
   nur 49px schmal (Betrag lief nach rechts in den Stepper). Im Grid zaehlen
   nur die Spaltendefinitionen der Karte. */
.row.basket .cart-items-body > .col > .row > .col,
.row.basket .cart-items-body > .col > .row > [class*="col-"] { max-width: none; }

/* Mengen-Stepper fuer Konfig-Positionen (eigener Bau: js/warenkorb.js legt
   die Position mit neuer Menge neu ein und loescht danach die alte) */
.cswc-cfgqty { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.cswc-cq-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid #c9d3bc;
  background: #fff; color: #333; font-size: 1rem; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.cswc-cq-btn:hover { background: #f3f6ec; }
.cswc-cq-val { min-width: 28px; text-align: center; font-size: .95rem; }
.cswc-cfgqty.is-busy { opacity: .45; pointer-events: none; }

/* Mengen-Stepper kompakt (war riesig) */
.row.basket .cart-items-quantity .quantity-input--cart { max-width: 132px; margin: 0; }
.row.basket .cart-items-quantity .quantity-input--cart .btn,
.row.basket .cart-items-quantity .quantity-input--cart button {
  width: 36px; height: 36px; min-width: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.row.basket .cart-items-quantity .quantity-input--cart input {
  height: 36px; width: 44px; padding: 2px 4px; font-size: .95rem; text-align: center;
}

/* ---- Bestelluebersicht "Variante 1" ----
   Zwischensumme gross, MwSt klein darunter, gruene Versandkostenfrei-Zeile,
   ZUR KASSE = Primaer-CTA (#7a9a4e), Trust-Zeile, Express-Teiler, Coupon als
   Link, Angebots-Button Salbei + Bewertungszeile. CI: corporate-identity.

   ANTI-FLACKER-KONZEPT (langsame Seiten): Alles, was reines STYLING ist,
   haengt an direkten Theme-Selektoren (.row.basket .basket-summary ...) und
   wirkt ab dem ersten Paint - NICHT an der JS-Klasse .cs-sum. Die REIHENFOLGE
   der Zeilen macht Flex-Order (ebenfalls sofort). js/warenkorb.js ergaenzt
   nur noch Inhalte (Trust-Zeile, Teiler, Texte, Coupon/Angebot-Umzug); bis
   dahin haelt das Gate unten die Spalte unsichtbar. */

/* Gate: rechte Spalte erst zeigen, wenn styleSummary fertig ist (.cs-ready).
   Sicherheitsnetz: nach 3s erscheint sie auch OHNE JS (Animation) - dann im
   CSS-Grundlook, der dank direkter Selektoren schon fast fertig aussieht. */
.row.basket .cart-summary.stack { visibility: hidden; animation: csReveal 0s 3s forwards; }
.row.basket .cart-summary.stack.cs-ready { visibility: visible; animation: none; }
@keyframes csReveal { to { visibility: visible; } }

/* Reihenfolge per Flex-Order (sofort, ohne JS): Summe / MwSt / Versand /
   Kasse / Trust / Express-Teiler / Zahlarten (Quellreihenfolge im 20er-Block)
   / Coupon / Beratungs-Teiler / Angebot / Sterne */
.row.basket .basket-summary .card-body { display: flex; flex-direction: column; }
.row.basket .basket-summary .card-body > * { order: 20; min-width: 0; }
.row.basket .basket-summary .card-body > .basket-summary-total { order: 1; }
.row.basket .basket-summary .card-body > .tax { order: 2; }
.row.basket .basket-summary .card-body > .shipping-costs { order: 3; }
.row.basket .basket-summary .card-body > a.btn-primary { order: 4; }
.row.basket .basket-summary .card-body > .cs-sum-trust { order: 5; }
.row.basket .basket-summary .card-body > .cs-sum-div { order: 6; }
.row.basket .basket-summary .card-body > .cs-sum-coupon { order: 30; }
.row.basket .basket-summary .card-body > .cs-sum-div--offer { order: 31; }
.row.basket .basket-summary .card-body > #openOfferRequestWrapper { order: 32; }
.row.basket .basket-summary .card-body > .cs-sum-stars { order: 33; }

.row.basket .basket-summary .row.basket-summary-total { align-items: baseline; }
.row.basket .basket-summary .row.basket-summary-total .col:first-child {
  font-weight: 700; color: #2f3e46; font-size: 1.1rem;
}
.row.basket .basket-summary .row.basket-summary-total .price-col {
  font-size: 1.5rem; font-weight: 800; color: #2f3e46; white-space: nowrap;
}
.row.basket .basket-summary .row.tax { font-size: .9rem; color: #6a7b59; }
.row.basket .basket-summary .row.tax strong,
.row.basket .basket-summary .row.tax .price-col { font-weight: 400; }
.cs-sum-free {
  display: inline-flex; align-items: center; gap: 7px;
  color: #46591f; font-size: .95rem; font-weight: 600; margin: 8px 0 2px;
}
.cs-sum-free svg { flex: none; }
.row.basket .basket-summary .card-body > a.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #7a9a4e !important; border-color: #7a9a4e !important; color: #fff !important;
  font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  border-radius: 28px; padding: 15px 20px; font-size: 1rem;
}
.row.basket .basket-summary .card-body > a.btn-primary:hover,
.row.basket .basket-summary .card-body > a.btn-primary:focus {
  background: #6c8a44 !important; border-color: #6c8a44 !important;
}
.row.basket .basket-summary .card-body > a.btn-primary::after { content: '\2192'; font-weight: 800; }
.cs-sum-trust {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  font-size: .87rem; color: #6a7b59; margin: 10px 0 0;
}
.cs-sum-trust span { display: inline-flex; align-items: center; gap: 5px; }
.cs-sum-div {
  display: flex; align-items: center; gap: 12px;
  color: #6a7b59; font-size: .87rem; margin: 16px 0 2px;
}
.cs-sum-div::before, .cs-sum-div::after { content: ''; flex: 1; height: 1px; background: #e7ebe0; }
.cs-sum-coupon { border: 0 !important; background: transparent !important; box-shadow: none; margin: 8px 0 0; }
.cs-sum-coupon > .card-header { background: transparent; border: 0; padding: 4px 0 0; }
.cs-sum-coupon .card-header .h5 {
  justify-content: center !important; gap: 6px;
  font-size: .95rem; color: #46591f; font-weight: 600; text-decoration: underline;
}
.cs-sum-coupon .card-body { padding: 10px 0 0; }
#openOfferRequestWrapper.cs-sum-offer {
  background: transparent !important; border: 0 !important; margin-top: 10px !important;
}
#openOfferRequestWrapper.cs-sum-offer .card-body { padding: 0 !important; background: transparent !important; }
#openOfferRequestWrapper.cs-sum-offer .openOfferRequestWrapper { display: block; width: 100%; }
.cs-sum-offer a.openOfferRequest {
  display: block; width: 100%;
  background: #cbd8a6 !important; border-color: #cbd8a6 !important; color: #333 !important;
  font-weight: 700; border-radius: 24px; padding: 13px; font-size: 1rem;
}
.cs-sum-offer a.openOfferRequest:hover { background: #bccb92 !important; border-color: #bccb92 !important; }
.cs-sum-stars { text-align: center; font-size: .8rem; color: #6a7b59; margin: 10px 0 0; }
.cs-sum-stars b { color: #e8a200; letter-spacing: 1px; font-size: .9rem; font-weight: 400; }
/* Amazon-Pay-Button (Plugin .lpa-button) rund wie die anderen Buttons */
/* Sprungmarke #amazonpay: Amazon-Button pulsiert kurz auf (Trust-Gold) */
.cs-azp-blink { animation: csAzpPulse 1.1s ease-in-out 3; border-radius: 12px; }
@keyframes csAzpPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 162, 0, 0); }
  50% { box-shadow: 0 0 0 7px rgba(232, 162, 0, .45); }
}

/* Amazon-Button: KEIN aeusseres overflow-Clipping! Der sichtbare Gold-Button
   ist .amazonpay-button-view1 im Shadow DOM (39px hoch, eigener Rand) - ein
   aeusserer Clip (64px-Box) schneidet mit versetzter Kurve hinein und
   zerstoert den Rahmen. Die Rundung macht allein der Shadow-Patch in
   js/warenkorb.js (border-radius: 50rem auf view1). */
/* PayPal-Ratenzahlungs-Hinweis (iframe-Banner): Seitenabstand */
.row.basket .basket-summary #ppc-cart-instalment-banner { padding: 0 14px; }

/* ==== MINI-WARENKORB (Header-Panel, js/warenkorb.js initMiniCart) ====
   Design "Variante 3": Kopf mit Titel+X, kompakte Artikelzeilen mit
   Entfernen, Gesamtsumme, ZUR KASSE + ZUM WARENKORB - der Rest (Coupon,
   Steuer-Detail, Express-Zahlarten, Ratenbanner) fliegt raus. */
#cart-dropdown-container.cs-mc .cart-siderbar-close-button { display: none; }
/* Scroll-Zone: Liste scrollt, Kopf + Summe/Buttons bleiben immer sichtbar */
#cart-dropdown-container.cs-mc { display: flex; flex-direction: column; }
.cs-mc .cs-mc-head, .cs-mc #cart-dropdown-bottom, .cs-mc .cs-mc-more { flex: 0 0 auto; }
.cs-mc #mini-cart-form { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.cs-mc-more {
  display: none; align-items: center; justify-content: center; gap: 6px;
  width: 100%; border: 0; background: #eef3e3; color: #46591f;
  font-size: .87rem; font-weight: 600; padding: 6px; cursor: pointer;
}
.cs-mc-more.show { display: flex; }
.cs-mc-more:hover { background: #e4ecd2; }
.cs-mc-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid #e7ebe0; background: #fff;
}
.cs-mc-head b { font-size: 1.1rem; color: #2f3e46; }
.cs-mc-x {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid #dbe6bf;
  background: #fff; color: #46591f; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.cs-mc-x:hover { background: #f3f6ec; }
/* Ballast raus */
.cs-mc #mini-basket-coupon-form,
.cs-mc .cart-dropdown-buttons,
.cs-mc #ppc-miniCart-instalment-banner,
.cs-mc tr.tax,
.cs-mc tr.shipping-costs.cs-mc-hide { display: none !important; }
/* Summe gross */
.cs-mc tr.total td, .cs-mc tr.total th { border: 0; }
.cs-mc tr.total { font-size: 1.1rem; }
.cs-mc tr.total td:last-child, .cs-mc tr.total strong { font-size: 1.3rem; font-weight: 800; color: #2f3e46; white-space: nowrap; }
.cs-mc-free {
  display: flex; gap: 6px; align-items: center;
  color: #46591f; font-size: .95rem; font-weight: 600; margin: 2px 0 10px;
}
/* Buttons: Kasse primaer, Warenkorb als echter Button (Outline) */
.cs-mc #cart-dropdown-bottom > a.btn-primary {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  background: #7a9a4e !important; border-color: #7a9a4e !important; color: #fff !important;
  font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
  border-radius: 26px; padding: 13px;
}
.cs-mc #cart-dropdown-bottom > a.btn-primary:hover { background: #6c8a44 !important; border-color: #6c8a44 !important; }
.cs-mc #cart-dropdown-bottom > a.btn-link.btn-block {
  display: block; background: #fff; border: 1.5px solid #cbd8a6 !important;
  color: #46591f !important; font-weight: 700; border-radius: 24px; padding: 11px;
  text-decoration: none; margin-top: 8px;
}
.cs-mc #cart-dropdown-bottom > a.btn-link.btn-block:hover { background: #f3f6ec; }
/* Loesch-Button dezent + Warteschlangen-Zustand */
.cs-mc .cart-items-delete-button { color: #8a9282; }
.cs-mc .cs-mc-removing { opacity: .45; pointer-events: none; }


/* Panel "Warenkorb merken & teilen" (#cswp-panel, baut js/warenkorb.js).
   Der Kopf-Button sitzt bevorzugt OBEN in der Titelzeile "Warenkorb (N)"
   (.cs-cart-head, Nutzerwunsch) - dann ist er ein kompakter Pill-Schalter
   (.cswp-head--top) und das Panel (#cswp-panel.cswp-top) klappt direkt
   unter der Ueberschrift auf. Fallback ohne Titel: Kopf im Panel selbst. */
.cs-cart-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.cs-cart-head > h1 { margin: 0; }
#cswp-panel {
  border: 1px solid #dbe6bf; border-radius: 16px; background: #fff;
  margin: 14px 0 4px; overflow: hidden;
}
/* Im Titel-Modus traegt der BODY die Karten-Optik - das Panel selbst ist
   unsichtbar (sonst bliebe zugeklappt eine leere Rahmenlinie stehen) */
#cswp-panel.cswp-top { border: 0; background: transparent; margin: 0; overflow: visible; }
#cswp-panel.cswp-top .cswp-body {
  border: 1px solid #dbe6bf; border-radius: 16px; background: #fff;
  margin: 0 0 16px; padding: 14px 16px;
}
/* Kopf = Collapse-Schalter (Panel standardmaessig ZU) */
.cswp-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: #eef3e3; cursor: pointer; text-align: left;
  font-size: .95rem; font-weight: 700; color: #46591f; padding: 10px 14px;
}
/* In der Titelzeile bewusst DEZENT: Link-Optik statt Pill (Nutzerwunsch) */
.cswp-head--top {
  width: auto; flex: 0 0 auto;
  border: 0; background: none; border-radius: 0; padding: 4px 0;
  font-size: .9rem; font-weight: 600; color: #46591f;
}
.cswp-head--top .cswp-head-title { text-decoration: underline; }
.cswp-head--top:hover { background: none; color: #2f3e46; }
.cswp-head--top .cswp-count { text-decoration: none; }
.cswp-head svg { width: 16px; height: 16px; flex: 0 0 auto; }
.cswp-head-title { flex: 1 1 auto; }
.cswp-count { font-weight: 400; font-size: .87rem; color: #6a7b59; }
.cswp-chev {
  width: 8px; height: 8px; flex: 0 0 auto; margin-top: -3px;
  border-right: 2px solid #46591f; border-bottom: 2px solid #46591f;
  transform: rotate(45deg); transition: transform .2s;
}
#cswp-panel.is-open .cswp-chev, .cswp-head.is-open .cswp-chev { transform: rotate(-135deg); margin-top: 3px; }
#cswp-panel .cswp-body { display: none; padding: 12px 14px; }
#cswp-panel.is-open .cswp-body { display: block; }
#cswp-panel .cswp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#cswp-panel .cswp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #cbd8a6; background: #fff; color: #46591f !important;
  font-size: .87rem; font-weight: 600; padding: 7px 13px; border-radius: 17px;
  cursor: pointer; text-decoration: none !important; transition: background .15s;
}
#cswp-panel .cswp-btn:hover { background: #f3f6ec; }
#cswp-panel .cswp-primary { background: #cbd8a6; color: #333 !important; border-color: #cbd8a6; }
#cswp-panel .cswp-primary:hover { background: #bccb92; }
#cswp-panel .cswp-hint { margin: 8px 0 0; font-size: .87rem; color: #6a7b59; }
/* Gespeicherte Warenkoerbe: seit 2026-07-16 im MODAL (#cswp-modal, Merkzettel-
   Optik) - die #cswp-panel-Selektoren bleiben nur als Rollback stehen. */
#cswp-panel .cswp-saved-title, #cswp-modal .cswp-saved-title { font-size: .87rem; font-weight: 700; color: #6a7b59; margin: 16px 0 4px; }
#cswp-panel .cswp-row, #cswp-modal .cswp-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-top: 1px solid #f0f2ec; font-size: .9rem; color: #2f3e46;
}
#cswp-panel .cswp-meta, #cswp-modal .cswp-meta { flex: 1 1 auto; min-width: 0; }
#cswp-panel .cswp-rowbtns, #cswp-modal .cswp-rowbtns { display: flex; gap: 6px; flex: 0 0 auto; }
#cswp-panel .cswp-mini, #cswp-modal .cswp-mini {
  border: 1px solid #e7ebe0; background: #fff; color: #46591f;
  font-size: .87rem; font-weight: 600; padding: 3px 10px; border-radius: 12px; cursor: pointer;
}
#cswp-panel .cswp-load, #cswp-modal .cswp-load { background: #7a9a4e; color: #fff; border-color: #7a9a4e; }
#cswp-panel .cswp-load:hover, #cswp-modal .cswp-load:hover { background: #6c8a44; }
#cswp-panel .cswp-del, #cswp-modal .cswp-del { color: #b05252; }

/* === Info-Glossar: Pille + Modal (Engine: js/infoglossar.js) ============= */
/* Daten-Drops (Wort + Erklaerung) sind reine Datenquelle -> im Frontend versteckt,
   im OPC-Editor (kein .csg-live an <html>) sichtbar & editierbar. */
.csg-live .csg-config,
.csg-live .csg-entry { display: none !important; }

/* Info-Pille als "ⓘ Infos"-Button hinter Varianten-/Konfig-Labels */
.csg-pill {
  display: inline-flex; align-items: center; gap: .32em; vertical-align: middle;
  margin-left: .45em; padding: .12em .62em .12em .5em;
  border: 1.5px solid #b6c98f; border-radius: 999px; background: #fff;
  color: #46591f; font-size: .87rem; font-weight: 700; line-height: 1.2;
  white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none;
  flex: 0 0 auto; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.csg-pill:hover, .csg-pill:focus-visible {
  background: #eef3e3; border-color: #8da174; color: #46591f; outline: none;
}
.csg-pill:focus-visible { box-shadow: 0 0 0 3px rgba(141,161,116,.35); }
.csg-pill__ic { width: 1.15em; height: 1.15em; display: block; flex: 0 0 auto; }
/* Text optisch mittig zum Icon: "Infos" hat keine Unterlaengen und wirkt sonst leicht
   zu hoch -> minimal nach unten ausgleichen. */
.csg-pill__label { line-height: 1; transform: translateY(0.03em); }

/* Modal (eigenstaendig, ueber Sticky-Header z-index 99990) */
.csg-modal { position: fixed; inset: 0; z-index: 100060; display: none; }
.csg-modal.is-open { display: block; }
/* cursor:pointer ist NOETIG, damit iOS-Safari den Backdrop-Tap als Klick feuert. */
.csg-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); cursor: pointer; transition: opacity .2s ease; }
.csg-modal__dialog {
  position: relative; z-index: 1; margin: 6vh auto; width: calc(100% - 2rem);
  max-width: 560px; max-height: 88vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  transition: transform .25s ease;      /* Zurueckschnappen / Rausgleiten der Wisch-Geste */
  will-change: transform;
}
.csg-modal__dialog.csg-dragging { transition: none; }   /* waehrend des Ziehens dem Finger folgen */
/* Greif-Leiste oben – nur auf Touch-Geraeten (Signal fuers Wisch-Schliessen) */
.csg-modal__handle { display: none; }
@media (pointer: coarse) {
  .csg-modal__handle {
    display: block; width: 40px; height: 4px; flex: 0 0 auto;
    margin: 9px auto 2px; border-radius: 999px; background: rgba(0,0,0,.18);
  }
}
.csg-modal__head {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.5rem; border-bottom: 1px solid rgba(0,0,0,.08);
}
.csg-modal__title { margin: 0; flex: 1 1 auto; font-size: 1.3rem; font-weight: 700; color: #2f3e46; line-height: 1.25; }
.csg-modal__close { flex: 0 0 auto; border: 0; background: none; font-size: 1.9rem; line-height: 1; color: #6a7b59; cursor: pointer; opacity: .7; padding: 0 .1em; }
.csg-modal__close:hover { opacity: 1; color: #2f3e46; }
.csg-modal__body { padding: 1.5rem; overflow-y: auto; -webkit-overflow-scrolling: touch; color: #2f3e46; }
.csg-modal__body p { margin: 0 0 .8em; }
.csg-modal__body img { max-width: 100%; height: auto; border-radius: 8px; cursor: zoom-out; }

/* Einheitliches Warenkorb-Modal (js/warenkorb.js). Nutzt die .csh-mz-*-Bausteine
   des Merkzettel-Modals (zentriert, gleicher Look) + diese Zusatz-Bausteine fuer
   Angebots-Block, Zwischensumme und Fusszeile. Oeffnet ueber das Header-Icon
   (statt Side-Cart) sowie ueber "Angebot anfordern". global.css laedt ueberall. */
.csh-mz-oc-offer { background: #f7f8f4; border: 1px solid #dbe6bf; border-radius: 12px; padding: 13px 14px; margin-top: 14px; }
.csh-mz-oc-offer-h { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: #46591f; margin-bottom: 4px; }
.csh-mz-oc-offer-s { font-size: 13px; color: #6a7b59; margin: 0 0 10px; line-height: 1.5; }
.csh-mz-oc-offerbtn { display: flex; width: 100%; align-items: center; justify-content: center; gap: 7px; background: #7a9a4e; color: #fff; border: 0; border-radius: 9px; height: 42px; font-size: 14px; font-weight: 700; cursor: pointer; }
.csh-mz-oc-offerbtn:hover { background: #6a8743; }
.csh-mz-oc-foot { border-top: 1px solid #e7ebe0; padding: 14px 18px 18px; flex: none; }
.csh-mz-oc-sum { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; color: #2f3e46; margin-bottom: 12px; }
.csh-mz-oc-sumval { font-size: 19px; }
.csh-mz-oc-btns { display: flex; gap: 10px; }
.csh-mz-oc-more { flex: 1; background: #fff; border: 1px solid #cbd8a6; color: #46591f; border-radius: 10px; height: 44px; font-size: 13.5px; cursor: pointer; }
.csh-mz-oc-more:hover { background: #f7f8f4; }
.csh-mz-oc-checkout { flex: 1.4; display: flex; align-items: center; justify-content: center; background: #7a9a4e; color: #fff; border: 0; border-radius: 10px; height: 44px; font-size: 14px; font-weight: 700; text-decoration: none; }
.csh-mz-oc-checkout:hover { background: #6a8743; color: #fff; text-decoration: none; }
.csh-mz-oc-busy .csh-mz-body { opacity: .5; pointer-events: none; }
.csh-mz-oc .csh-mz-ic-heart { color: #7a9a4e; }
/* Mengen-Stepper + Menge-Text in der Artikelzeile (Stepper nur Nicht-Konfig) */
.csh-mz-oc .csh-mz-row { flex-wrap: wrap; }
.csh-mz-oc-stepper { display: inline-flex; align-items: center; border: 1px solid #e7ebe0; border-radius: 20px; overflow: hidden; margin-left: auto; }
.csh-mz-oc-stepper button { width: 28px; height: 28px; border: 0; background: #fff; cursor: pointer; color: #2f3e46; font-size: 15px; line-height: 1; }
.csh-mz-oc-stepper button:hover { background: #f1f3ec; }
.csh-mz-oc-qnum { min-width: 24px; text-align: center; font-size: 13px; }
.csh-mz-oc-qty { margin-left: auto; font-size: 13px; color: #6a7b59; }
.csh-mz-oc .csh-mz-del { margin-left: 8px; }
/* "Warenkorb ansehen"-Link in der Fusszeile */
.csh-mz-oc-cartlink { display: block; text-align: center; margin-top: 10px; font-size: 13px; color: #46591f; text-decoration: underline; }
.csh-mz-oc-cartlink:hover { color: #2f3e46; }
/* Cross-Sell "Kunden kauften dazu" klein am Modal-Ende */
.csh-mz-oc-xs { margin-top: 16px; border-top: 1px solid #e7ebe0; padding-top: 12px; }
.csh-mz-oc-xs-h { font-size: 13px; font-weight: 600; color: #6a7b59; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; }
.csh-mz-oc-xs-list { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.csh-mz-oc-xs-card { flex: 0 0 92px; width: 92px; text-decoration: none; color: #2f3e46; }
.csh-mz-oc-xs-card:hover .csh-mz-oc-xs-n { color: #46591f; }
.csh-mz-oc-xs-card img, .csh-mz-oc-xs-ph { display: block; width: 92px; height: 64px; object-fit: contain; background: #f7f8f4; border: 1px solid #e7ebe0; border-radius: 8px; }
.csh-mz-oc-xs-n { display: block; font-size: 13px; line-height: 1.25; margin-top: 4px; max-height: 2.5em; overflow: hidden; }
.csh-mz-oc-xs-p { display: block; font-size: 13px; font-weight: 600; color: #46591f; margin-top: 2px; }

/* === Angebots-Formular (NETZdinge-Plugin) auf careshop-CI ==================
   Nur per CSS gestylt (Plugin-PHP ist lizenziert/verschluesselt). Das Modal
   #OfferRequestModal wird ins DOM injiziert; global.css laedt ueberall. Ziel:
   schmaler + uebersichtlicher, Soft-Gruen statt Blau, CI-Inputs, gruener CTA. */
#OfferRequestModal .modal-dialog.modal-xl { max-width: 720px; }
@media (max-width: 767.98px) { #OfferRequestModal .modal-dialog.modal-xl { max-width: 100%; margin: 0; } }
#OfferRequestModal .modal-content { border: 0; border-radius: 16px; padding: 26px 28px 30px; box-shadow: 0 18px 50px rgba(47, 62, 70, .28); }
#OfferRequestModal .h3, #OfferRequestModal #openOfferRequestTitle, #OfferRequestModal .modal-title {
  font-size: 1.4rem; font-weight: 700; color: #2f3e46; margin: 0 0 6px; line-height: 1.25;
}
/* Info-Box: Blau -> Soft-Gruen */
#OfferRequestModal .alert-info {
  background: #eef3e3; border: 1px solid #dbe6bf; color: #46591f;
  border-radius: 12px; font-size: .95rem; line-height: 1.5; padding: 12px 16px; margin-bottom: 20px;
}
/* Labels */
#OfferRequestModal .control-label { font-size: .87rem; font-weight: 600; color: #6a7b59; margin-bottom: 5px; }
#OfferRequestModal .form-group.required .control-label::after { color: #7a9a4e; }
#OfferRequestModal #offerSalutation .control-label { font-weight: 500; color: #2f3e46; }
/* Inputs / Selects / Textarea */
#OfferRequestModal .form-control {
  border: 1px solid #e7ebe0; border-radius: 12px; height: 46px; color: #2f3e46;
  box-shadow: none; font-size: 1rem; padding: 0 14px; background: #fff;
}
#OfferRequestModal select.form-control { padding-right: 32px; }
#OfferRequestModal textarea.form-control { height: auto; min-height: 96px; padding: 12px 14px; }
#OfferRequestModal .form-control:focus { border-color: #8da174; box-shadow: 0 0 0 3px rgba(141, 161, 116, .18); }
#OfferRequestModal .form-control::placeholder { color: #a9b39c; }
/* Uebersichtlichkeit: gleichmaessiger vertikaler Rhythmus */
#OfferRequestModal .form-group, #OfferRequestModal .form-group.float-label-control { margin-bottom: 16px; }
/* Absende-Button -> gruener CI-Pill */
#OfferRequestModal #requestOffer, #OfferRequestModal button#requestOffer {
  background: #7a9a4e; border: 0; color: #fff; font-weight: 700; font-size: 1rem;
  border-radius: 28px; padding: 14px 30px; letter-spacing: .2px;
}
#OfferRequestModal #requestOffer:hover, #OfferRequestModal button#requestOffer:hover { background: #6a8743; }
/* Schliessen-X + Info-Icons in CI */
#OfferRequestModal .close { color: #6a7b59; opacity: 1; text-shadow: none; }
#OfferRequestModal .close:hover { color: #2f3e46; }
#OfferRequestModal .fa-info-circle { color: #8da174; }
.csg-modal__body :last-child { margin-bottom: 0; }

/* --- Modal-Inhalt: CI-Bausteine (gilt fuer jeden csg-info-Inhalt) --------
   Damit reicht EINFACHES Markup ohne Inline-Styles:
     <p>Text …</p>
     <ul><li>Punkt</li></ul>                      -> automatisch gruener Haken
     <div class="csg-box"><p>Titel</p><ul>…</ul></div>  -> soft-gruene Box
   Farben aus der CI (siehe corporate-identity-colors). */
.csg-modal__body { font-size: 1rem; line-height: 1.6; }
.csg-modal__body > :first-child { margin-top: 0; }
.csg-modal__body h3, .csg-modal__body h4 { margin: 1.1rem 0 .5rem; font-size: 1.05rem; font-weight: 700; color: #2f3e46; }
.csg-modal__body strong, .csg-modal__body b { color: #2f3e46; font-weight: 700; }
.csg-modal__body a { color: #46591f; text-decoration: underline; }
/* Listen automatisch mit gruenem CI-Haken – KEIN Inline-Markup mehr noetig */
.csg-modal__body ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.csg-modal__body ul li { position: relative; padding: 0 0 .5rem 1.6rem; }
.csg-modal__body ul li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #8da174; font-weight: 700; }
.csg-modal__body ul li:last-child { padding-bottom: 0; }
/* Opt-in: soft-gruene "Vorteile"-Box; erstes <p> darin wird zum Titel */
.csg-modal__body .csg-box { margin: 0 0 1rem; padding: 14px 16px; border: 1px solid #e7ebe0; border-radius: 12px; background: #f3f6ec; }
.csg-modal__body .csg-box > p:first-child { margin: 0 0 .6rem; font-weight: 700; color: #46591f; }
.csg-modal__body .csg-box > :last-child { margin-bottom: 0; }
body.csg-modal-open { overflow: hidden; }
@media (max-width: 575px) {
  .csg-modal__dialog { margin: 4vh auto; max-height: 92vh; }
  .csg-modal__head { padding: 1rem 1.15rem; }
  .csg-modal__body { padding: 1.15rem; }
}

/* ==========================================================================
   kkDropper "Mehr anzeigen"-Revealer – Optik (Kategorie-Beschreibung)
   NUR Styling. Die kkDropper-JS bleibt unberuehrt, der Text bleibt im OPC
   pflegbar. Zustaende des Plugins: eingeklappt = .kk-revealer ohne .revealing,
   aufgeklappt = .kk-revealer.revealing. Display der Buttons steuert das Plugin
   selbst (hier NICHT ueberschreiben).
   ========================================================================== */

/* Variante "Inline weiterlesen" (Nutzerwahl 2026-07-13, ersetzt das fruehere
   Kasten-Feld = zu prominent): KEIN Kasten/Rahmen, der Text steht direkt auf der
   Seite, wird nach ~3 Zeilen hart gekappt (kein Fade) und darunter steht
   linksbuendig ein dezenter Textlink "… Mehr anzeigen". kkDropper-JS unberuehrt;
   die Plugin-Maske (--kk-revealer-gradient-height) wird abgeschaltet. */
.kk-revealer { position: relative; }
.kk-revealer:not(.revealed) .kk-revealer-content {
  height: auto !important;                /* Box passt sich dem Text an (override der
                                             Plugin-Inline-Hoehe) */
  max-height: 3.2em !important;           /* exakt 2 Zeilen (line-height 1.6) -> die Box endet
                                             direkt nach dem Text, kein Absatz-Leerraum darunter;
                                             "weiterlesen" sitzt dicht am Text (breit + mobil) */
  overflow: hidden;
  -webkit-mask-image: none !important;    /* Plugin-Fade aus */
  mask-image: none !important;
}
.kk-revealer:not(.revealed) .kk-revealer-content::after { content: none; }
.kk-revealer.revealed .kk-revealer-content {
  -webkit-mask-image: none !important;    /* auch offen kein Rest-Fade */
  mask-image: none !important;
}

/* Lesbarkeit + CI-Typo der Beschreibung */
.kk-revealer-content { line-height: 1.6; color: #4a5a52; }
.kk-revealer-content h2 {
  font-size: 1.15rem; font-weight: 700; color: #2f3e46;
  margin: 1.1em 0 .35em; letter-spacing: -.01em;
}
.kk-revealer-content h2:first-child { margin-top: .2em; }
.kk-revealer-content h3 { font-size: 1rem; font-weight: 700; color: #2f3e46; margin: .9em 0 .3em; }
.kk-revealer-content a {
  color: #46591f; font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid #dbe6bf; transition: border-color .15s ease;
}
.kk-revealer-content a:hover { border-bottom-color: #7a9a4e; }

/* "Mehr/Weniger anzeigen" als dezenter Inline-Textlink UNTER dem Text (keine
   Pille mehr). Doppelte Klasse = hoehere Spezifitaet, kein !important; KEIN
   display auf den Buttons (Plugin-Toggle bleibt intakt). Eingeklappt ein "… "
   davor als Fortsetzungs-Hinweis; das Chevron-Icon wird ausgeblendet. */
.kk-revealer-btns { text-align: left; margin-top: .15em; }
.kk-revealer:not(.revealed) .kk-revealer-btns::before { content: "\2026\00a0"; color: #6a7b59; font-weight: 700; }
.kk-revealer-btn.kk-revealer-btn {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important;
  color: #46591f; font-weight: 700; font-size: inherit; line-height: 1.6; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #dbe6bf;
  transition: text-decoration-color .15s ease, color .15s ease;
}
.kk-revealer-btn.kk-revealer-btn:hover { text-decoration-color: #7a9a4e; color: #2f3e46; }
.kk-revealer-btn .kk-icon { display: none; }

/* Vollbreiter Inhalt dicht unter der Navi: die allgemeinen 25px
   `.main-content-wrapper`-Padding wirken sonst als Luecke.
   2026-07-21: Die frueheren `.cscat-hero`-Regeln (Kategorie-Hero) sind mit dem
   Rueckbau des Bild-Headers entfallen – hier bleibt NUR die Startseite
   (body[data-page="18"] = Startseiten-Link-ID), die den Full-Bleed-Hero
   weiterhin nutzt. */
body[data-page="18"] .main-content-wrapper { padding-top: 10px; }
@media (max-width: 991.98px) {   /* ab hier ist der Shop-HEADER mobil (Bootstrap lg, Burger) */
  body[data-page="18"] .main-content-wrapper { padding-top: 0; }
}


/* ============================================================
   MERKZETTEL-Styles – 2026-07-12 aus css/merkzettel.css hierher
   integriert (global.css laedt auf jeder Seite, filemtime-Bust).
   ============================================================ */
/* =====================================================================
   careshop Merkzettel (Gast-Wunschzettel) – Styles
   Modal + Toast + Herz-Aktiv-Status + Merkzettel-Seite (#csh-merkzettel-page)
   Icons: Inline-SVG als CSS-Mask (kein FontAwesome). CI-Farben.
   Laedt via child layout/header.tpl (filemtime-Cachebuster).
   ===================================================================== */

/* ---------- Icons (Mask) ------------------------------------------- */
.csh-mz-ic-heart,.csh-mz-ic-save,.csh-mz-ic-copy,.csh-mz-ic-mail,.csh-mz-ic-wa,
.csh-mz-ic-share,.csh-mz-ic-info,.csh-mz-close i,.csh-mz-del i,
.csh-mz-empty-heart,.csh-mz-noimg{
  display:inline-block;width:1em;height:1em;flex:none;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;}
.csh-mz-ic-heart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22black%22%3E%3Cpath%20d=%22M12%2020l-1.45-1.32C5.4%2014.05%202%2010.95%202%207.5%202%205%204%203%206.5%203c1.74%200%203.41.81%204.5%202.09C12.09%203.81%2013.76%203%2015.5%203%2018%203%2020%205%2020%207.5c0%203.45-3.4%206.55-8.55%2011.18z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22black%22%3E%3Cpath%20d=%22M12%2020l-1.45-1.32C5.4%2014.05%202%2010.95%202%207.5%202%205%204%203%206.5%203c1.74%200%203.41.81%204.5%202.09C12.09%203.81%2013.76%203%2015.5%203%2018%203%2020%205%2020%207.5c0%203.45-3.4%206.55-8.55%2011.18z%22/%3E%3C/svg%3E");}
.csh-mz-close i{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M6%206l12%2012M18%206L6%2018%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M6%206l12%2012M18%206L6%2018%22/%3E%3C/svg%3E");}
.csh-mz-del i{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%207h16M10%2011v6M14%2011v6M6%207l1%2012a2%202%200%20002%202h6a2%202%200%20002-2l1-12M9%207V4h6v3%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%207h16M10%2011v6M14%2011v6M6%207l1%2012a2%202%200%20002%202h6a2%202%200%20002-2l1-12M9%207V4h6v3%22/%3E%3C/svg%3E");}
.csh-mz-ic-copy{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%229%22%20y=%229%22%20width=%2211%22%20height=%2211%22%20rx=%222%22/%3E%3Cpath%20d=%22M5%2015V5a2%202%200%20012-2h8%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%229%22%20y=%229%22%20width=%2211%22%20height=%2211%22%20rx=%222%22/%3E%3Cpath%20d=%22M5%2015V5a2%202%200%20012-2h8%22/%3E%3C/svg%3E");}
.csh-mz-ic-mail{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%225%22%20width=%2218%22%20height=%2214%22%20rx=%222%22/%3E%3Cpath%20d=%22M3%207l9%206%209-6%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%225%22%20width=%2218%22%20height=%2214%22%20rx=%222%22/%3E%3Cpath%20d=%22M3%207l9%206%209-6%22/%3E%3C/svg%3E");}
.csh-mz-ic-wa{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22black%22%3E%3Cpath%20d=%22M12.04%202C6.58%202%202.13%206.45%202.13%2011.91c0%201.75.46%203.45%201.32%204.95L2%2022l5.25-1.38a9.9%209.9%200%20004.79%201.22h.01c5.46%200%209.91-4.45%209.91-9.91S17.5%202%2012.04%202zm5.8%2014.16c-.24.68-1.4%201.3-1.94%201.35-.5.05-1.13.07-1.82-.11-.42-.13-.96-.31-1.65-.61-2.9-1.25-4.8-4.17-4.94-4.36-.15-.19-1.19-1.58-1.19-3.01s.75-2.14%201.02-2.43c.27-.29.58-.36.78-.36l.56.01c.18.01.42-.07.66.5.24.58.82%202.01.89%202.16.07.14.12.31.02.5-.09.19-.14.31-.28.48l-.42.49c-.14.14-.28.29-.12.57.15.29.68%201.12%201.46%201.81%201%20.89%201.85%201.17%202.13%201.31.27.14.43.12.59-.07.15-.19.68-.79.86-1.06.18-.27.36-.22.61-.13.24.09%201.55.73%201.82.86.27.14.44.2.51.31.07.11.07.65-.17%201.33z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22black%22%3E%3Cpath%20d=%22M12.04%202C6.58%202%202.13%206.45%202.13%2011.91c0%201.75.46%203.45%201.32%204.95L2%2022l5.25-1.38a9.9%209.9%200%20004.79%201.22h.01c5.46%200%209.91-4.45%209.91-9.91S17.5%202%2012.04%202zm5.8%2014.16c-.24.68-1.4%201.3-1.94%201.35-.5.05-1.13.07-1.82-.11-.42-.13-.96-.31-1.65-.61-2.9-1.25-4.8-4.17-4.94-4.36-.15-.19-1.19-1.58-1.19-3.01s.75-2.14%201.02-2.43c.27-.29.58-.36.78-.36l.56.01c.18.01.42-.07.66.5.24.58.82%202.01.89%202.16.07.14.12.31.02.5-.09.19-.14.31-.28.48l-.42.49c-.14.14-.28.29-.12.57.15.29.68%201.12%201.46%201.81%201%20.89%201.85%201.17%202.13%201.31.27.14.43.12.59-.07.15-.19.68-.79.86-1.06.18-.27.36-.22.61-.13.24.09%201.55.73%201.82.86.27.14.44.2.51.31.07.11.07.65-.17%201.33z%22/%3E%3C/svg%3E");}
.csh-mz-ic-share{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%226%22%20cy=%2212%22%20r=%222.2%22/%3E%3Ccircle%20cx=%2217%22%20cy=%226%22%20r=%222.2%22/%3E%3Ccircle%20cx=%2217%22%20cy=%2218%22%20r=%222.2%22/%3E%3Cpath%20d=%22M8%2011l7-4M8%2013l7%204%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%226%22%20cy=%2212%22%20r=%222.2%22/%3E%3Ccircle%20cx=%2217%22%20cy=%226%22%20r=%222.2%22/%3E%3Ccircle%20cx=%2217%22%20cy=%2218%22%20r=%222.2%22/%3E%3Cpath%20d=%22M8%2011l7-4M8%2013l7%204%22/%3E%3C/svg%3E");}
.csh-mz-ic-save{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%204h9l5%205v11H4V4z%22/%3E%3Cpath%20d=%22M8%204v5h6M8%2014h8v6H8z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%204h9l5%205v11H4V4z%22/%3E%3Cpath%20d=%22M8%204v5h6M8%2014h8v6H8z%22/%3E%3C/svg%3E");}
.csh-mz-ic-info{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M12%2011v5M12%207.6h.01%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M12%2011v5M12%207.6h.01%22/%3E%3C/svg%3E");}
.csh-mz-empty-heart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.5%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2020l-1.45-1.32C5.4%2014.05%202%2010.95%202%207.5%202%205%204%203%206.5%203c1.74%200%203.41.81%204.5%202.09C12.09%203.81%2013.76%203%2015.5%203%2018%203%2020%205%2020%207.5c0%203.45-3.4%206.55-8.55%2011.18z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.5%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2020l-1.45-1.32C5.4%2014.05%202%2010.95%202%207.5%202%205%204%203%206.5%203c1.74%200%203.41.81%204.5%202.09C12.09%203.81%2013.76%203%2015.5%203%2018%203%2020%205%2020%207.5c0%203.45-3.4%206.55-8.55%2011.18z%22/%3E%3C/svg%3E");}
.csh-mz-noimg{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.5%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%224%22%20width=%2218%22%20height=%2216%22%20rx=%222%22/%3E%3Ccircle%20cx=%228.5%22%20cy=%229.5%22%20r=%221.5%22/%3E%3Cpath%20d=%22M4%2018l5-5%203.5%203.5L16%2013l4%204%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.5%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%224%22%20width=%2218%22%20height=%2216%22%20rx=%222%22/%3E%3Ccircle%20cx=%228.5%22%20cy=%229.5%22%20r=%221.5%22/%3E%3Cpath%20d=%22M4%2018l5-5%203.5%203.5L16%2013l4%204%22/%3E%3C/svg%3E");}

/* ---------- Overlay + Modal ---------------------------------------- */
body.csh-mz-lock{overflow:hidden;}
.csh-mz-overlay{
  position:fixed;inset:0;z-index:100080;display:none;
  align-items:center;justify-content:center;padding:20px 12px;
  background:rgba(47,62,70,.45);}
.csh-mz-overlay.is-open{display:flex;}
.csh-mz-modal{
  width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;
  background:#fff;border-radius:14px;overflow:hidden;
  font-family:inherit;color:#2f3e46;box-shadow:0 18px 50px rgba(47,62,70,.28);
  animation:cshmzIn .18s ease;}
@keyframes cshmzIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.csh-mz-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid #e7ebe0;flex:none;}
.csh-mz-head .csh-mz-ic-heart{font-size:22px;color:#7a9a4e;}
.csh-mz-title{font-size:17px;font-weight:600;}
.csh-mz-count{background:#eef3e3;color:#46591f;font-size:13px;padding:3px 10px;border-radius:20px;}
.csh-mz-close{margin-left:auto;background:none;border:0;cursor:pointer;color:#6a7b59;font-size:20px;line-height:1;padding:4px;border-radius:8px;}
.csh-mz-close:hover{background:#f1f3ec;color:#2f3e46;}
.csh-mz-body{padding:14px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* ---------- Item-Karten -------------------------------------------- */
.csh-mz-list{display:flex;flex-direction:column;gap:12px;}
.csh-mz-item{display:flex;gap:12px;border:1px solid #e7ebe0;border-radius:12px;padding:10px;}
.csh-mz-thumb{width:74px;height:74px;border-radius:8px;background:#eef3e3;flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.csh-mz-thumb img{width:100%;height:100%;object-fit:contain;}
.csh-mz-thumb .csh-mz-noimg{font-size:30px;color:#9fb27a;}
.csh-mz-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.csh-mz-name{font-size:15px;font-weight:500;color:#2f3e46;text-decoration:none;line-height:1.3;}
.csh-mz-name:hover{color:#46591f;text-decoration:underline;}
.csh-mz-cfg{font-size:13px;color:#6a7b59;margin:2px 0 0;}
.csh-mz-row{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px;}
.csh-mz-price{font-size:15px;font-weight:600;color:#2f3e46;white-space:nowrap;}
.csh-mz-cart{margin-left:auto;background:#cbd8a6;color:#333;border:0;border-radius:8px;padding:7px 12px;font-size:13px;text-decoration:none;white-space:nowrap;line-height:1;}
.csh-mz-cart:hover{background:#bccb92;color:#2f3e46;text-decoration:none;}
.csh-mz-del{background:none;border:0;cursor:pointer;color:#a5745f;font-size:18px;padding:4px;line-height:1;border-radius:6px;}
.csh-mz-del:hover{color:#a5341f;background:#fdf3f1;}

/* ---------- Teilen-Block ------------------------------------------- */
.csh-mz-share{background:#f7f8f4;border:1px solid #dbe6bf;border-radius:12px;padding:12px 14px;margin-top:14px;}
.csh-mz-share-h{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:#46591f;margin-bottom:9px;}
.csh-mz-share-h .csh-mz-ic-save{font-size:17px;}
.csh-mz-share-link{display:flex;gap:8px;align-items:center;margin-bottom:9px;}
.csh-mz-url{flex:1;min-width:0;height:34px;border:1px solid #e7ebe0;border-radius:8px;padding:0 10px;font-size:13px;color:#2f3e46;background:#fff;}
.csh-mz-copy{display:inline-flex;align-items:center;gap:5px;background:#7a9a4e;color:#fff;border:0;border-radius:8px;height:34px;padding:0 12px;font-size:13px;cursor:pointer;white-space:nowrap;}
.csh-mz-copy:hover{background:#6a8743;}
.csh-mz-copy.is-ok{background:#46591f;}
.csh-mz-copy .csh-mz-ic-copy{font-size:15px;}
.csh-mz-share-btns{display:flex;gap:8px;}
.csh-mz-sb{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#fff;border:1px solid #e7ebe0;border-radius:8px;height:34px;font-size:13px;color:#46591f;cursor:pointer;text-decoration:none;}
.csh-mz-sb:hover{background:#f1f3ec;border-color:#cbd8a6;color:#46591f;text-decoration:none;}
.csh-mz-sb i{font-size:15px;}
.csh-mz-hint{display:flex;gap:6px;align-items:flex-start;font-size:12.5px;color:#6a7b59;margin-top:9px;line-height:1.5;}
.csh-mz-hint .csh-mz-ic-info{font-size:14px;flex:none;margin-top:1px;}

/* ---------- Geteilte Modal-Bausteine (Konfigurator-/Warenkorb-Teilen) ------
   Die Modale "Konfiguration speichern & teilen" (js/cfg-memory.js) und
   "Warenkorb merken & teilen" (js/warenkorb.js) nutzen dieselben .csh-mz-*-
   Klassen wie das Merkzettel-Modal; hier nur die Zusatz-Bausteine. */
.csh-mz-head .csh-mz-ic-save{font-size:22px;color:#7a9a4e;}
.csh-mz-sum{font-size:14px;color:#2f3e46;line-height:1.55;margin:2px 0 0;}
.csh-mz-lbl{font-size:12.5px;font-weight:600;color:#6a7b59;margin:0 0 4px;}
.csh-mz-lbl--load{margin:16px 0 6px;font-size:13px;color:#46591f;}
.csh-mz-actbtn{display:inline-flex;align-items:center;justify-content:center;background:#7a9a4e;color:#fff;border:0;border-radius:8px;height:34px;padding:0 16px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;}
.csh-mz-actbtn:hover{background:#6a8743;}
.csh-mz-mainbtn{display:flex;width:100%;align-items:center;justify-content:center;gap:7px;background:#cbd8a6;color:#333;border:0;border-radius:8px;height:38px;font-size:13.5px;font-weight:600;cursor:pointer;margin-top:10px;}
.csh-mz-mainbtn:hover{background:#bccb92;}
.csh-mz-mainbtn i{font-size:16px;}

/* ---------- Leerzustand -------------------------------------------- */
.csh-mz-empty{text-align:center;padding:26px 10px 20px;}
.csh-mz-empty-heart{font-size:46px;color:#cbd8a6;}
.csh-mz-empty-t{font-size:16px;font-weight:600;color:#2f3e46;margin:12px 0 4px;}
.csh-mz-empty-s{font-size:13px;color:#6a7b59;margin:0 0 16px;line-height:1.5;}
.csh-mz-empty-btn{display:inline-block;background:#7a9a4e;color:#fff;text-decoration:none;border-radius:9px;padding:10px 20px;font-size:14px;font-weight:500;}
.csh-mz-empty-btn:hover{background:#6a8743;color:#fff;text-decoration:none;}

/* ---------- Fusszeile ---------------------------------------------- */
.csh-mz-foot{padding:0;}
.csh-mz-foot:empty{display:none;}
.csh-mz-shop{width:100%;background:#fff;border:1px solid #cbd8a6;color:#46591f;border-radius:0;height:46px;font-size:13.5px;cursor:pointer;border-left:0;border-right:0;border-bottom:0;}
.csh-mz-shop:hover{background:#f7f8f4;}

/* ---------- Toast --------------------------------------------------- */
.csh-mz-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  z-index:100090;background:#2f3e46;color:#fff;border-radius:10px;
  padding:11px 16px;font-size:13.5px;display:flex;align-items:center;gap:14px;
  box-shadow:0 10px 30px rgba(47,62,70,.3);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;max-width:90vw;}
.csh-mz-toast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
.csh-mz-toast-a{background:none;border:0;color:#cbd8a6;font-weight:600;font-size:13.5px;cursor:pointer;padding:0;white-space:nowrap;}
.csh-mz-toast-a:hover{color:#fff;text-decoration:underline;}

/* ---------- Herz-Aktiv-Status (alle Herzen auf der Seite) ---------- */
.wishlist-button.csh-mz-on,
.cswc-heart .btn.csh-mz-on,
button[name="Wunschliste"].csh-mz-on{color:#c0392b;}
.wishlist-button.csh-mz-on .icon-content,
.cswc-heart .btn.csh-mz-on .icon-content{color:#c0392b;}

/* ---------- Merkzettel-SEITE (#csh-merkzettel-page) ---------------- */
#csh-merkzettel-page{max-width:820px;margin:0 auto;padding:8px 0 40px;color:#2f3e46;}
.csh-mz-page-head{display:flex;align-items:center;gap:12px;margin:0 0 18px;}
.csh-mz-page-head h1{font-size:26px;font-weight:600;margin:0;color:#2f3e46;}
.csh-mz-page-head .csh-mz-ic-heart{font-size:26px;color:#7a9a4e;}
.csh-mz-page-count{background:#eef3e3;color:#46591f;font-size:13px;padding:4px 12px;border-radius:20px;}
#csh-merkzettel-page .csh-mz-share{margin-top:20px;}

/* ---------- Mobil --------------------------------------------------- */
@media (max-width:560px){
  .csh-mz-modal{max-height:92vh;border-radius:14px 14px 0 0;align-self:flex-end;}
  .csh-mz-overlay{padding:0;align-items:flex-end;}
  .csh-mz-thumb{width:60px;height:60px;}
  .csh-mz-share-btns{flex-wrap:wrap;}
  .csh-mz-page-head h1{font-size:22px;}
}


/* === Merkzettel: "In den Warenkorb"-Hinweis, wenn erst konfiguriert/variiert
   werden muss (autoAddToCart in header.js zeigt ihn bei Timeout). ============ */
.csh-add-hint {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fdf6e3; border: 1px solid #e8c877; border-radius: 12px;
  padding: 13px 16px; margin: 0 0 16px; color: #6b5316;
  font-size: 14px; line-height: 1.5;
}
.csh-add-hint b { color: #5a4512; font-weight: 600; }
.csh-add-hint-ic {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: #e8a200; color: #fff; font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.csh-add-hint-ic::before { content: "!"; }

/* ==========================================================================
   Sektionsueberschriften SHOPWEIT (OPC-Content-<h2> in .main-content.stack)
   Das sind KEINE Slider-Titel, sondern einfache <h2> als DIREKTE Kinder des
   OPC-Inhalts-Stacks ("Unsere exklusivsten Premium-Matratzen", "Unser Tipp: ...",
   "Bestseller" ... auf der Startseite; kuenftig auch auf Landing-/CMS-Seiten).
   Theme-Default war 34.6px / Gewicht 600 / #333 / ohne CI -> zu gross, generisch.
   Neu (verbindlicher Shop-Standard): CI-Anthrazit, kompakter (28.5px), feine
   negative Laufweite + kurze Salbei->Gruen-Akzentlinie (echot Button-/Pfeil-Palette).
   SHOPWEIT (kein Startseiten-Riegel mehr). Sicher, weil `.main-content.stack > h2`
   NUR OPC-authorte Top-Level-Ueberschriften trifft: Kategorie- UND Produktseiten
   haben davon NULL (geprueft), verschachtelte H2 (Tabs/Karten/Slider) sind keine
   direkten Kinder -> unberuehrt. Akzentlinie folgt der Ausrichtung: links als
   Standard, mittig bei zentrierten Ueberschriften (OPC-Inline text-align:center
   bzw. .text-center). Global geladen.
   ========================================================================== */
/* Direkte Content-Ueberschriften (h2) UND OPC-Portlet-Ueberschriften, die eine
   Ebene tiefer sitzen (> div > h2/h3, z.B. "Passendes Zubehör für Pflegebetten"
   ueber dem OPC-ProductStream). Alle Sektions-Ueberschriften sind zentriert ->
   Akzentlinie mittig. */
.main-content.stack > h2,
.main-content.stack > h3,
.main-content.stack > div > h2,
.main-content.stack > div > h3 {
  color: #2F3E46;
  font-size: 1.9rem;          /* ~28.5px @ Root 15px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 1.7rem 0 1.35rem;
}
.main-content.stack > h2::after,
.main-content.stack > h3::after,
.main-content.stack > div > h2::after,
.main-content.stack > div > h3::after {
  content: "";
  display: block;
  width: 60px; height: 3px;
  margin: .8rem auto 0;       /* zentriert */
  border-radius: 999px;
  background: linear-gradient(90deg, #CBD8A6 0%, #7A9A4E 100%);
}
@media (max-width: 767px) {
  .main-content.stack > h2,
  .main-content.stack > h3,
  .main-content.stack > div > h2,
  .main-content.stack > div > h3 { font-size: 1.45rem; margin: 1.2rem 0 1rem; }
  .main-content.stack > h2::after,
  .main-content.stack > h3::after,
  .main-content.stack > div > h2::after,
  .main-content.stack > div > h3::after { width: 48px; margin-top: .6rem; }
}

/* --------------------------------------------------------------------------
   SLIDER-UEBERSCHRIFTEN (.product-slider__title) – gleiche CI-Akzentlinie wie
   die Sektionsueberschriften oben. Diese Titel ("Kunden kauften dazu...",
   "Aehnliche Artikel", kkDropper "Empfehlung fuer ...") sitzen zu tief
   verschachtelt fuer die obige Regel -> hier separat. Shopweit (auch Startseite).
   margin-top = Luft UEBER der Ueberschrift = Sektionstrennung, damit jede
   Ueberschrift optisch zu IHREN Karten darunter gehoert (Titel->Karten 28px,
   Sektion->Sektion ~42px). global.css ist shopweit geladen. */
.product-slider__title::after {
  content: ""; display: block;
  width: 60px; height: 3px;
  margin: .8rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #CBD8A6 0%, #7A9A4E 100%);
}
.product-slider__title { margin-top: 1.3rem; }
@media (max-width: 767px) {
  .product-slider__title::after { width: 48px; margin-top: .6rem; }
  .product-slider__title { margin-top: 1rem; }
}

/* ==========================================================================
   Slider-Pfeile SHOPWEIT – einheitliches CI-Design (Variante A, Nutzerwahl)
   Deckt ALLE Slider-Systeme ab:
   - Slick (Theme): Produkt-Slider (Startseite/Detail), News-/Box-Slider,
     Aehnliche/Zubehoer. Markup <button class="slick-prev slick-prev__custom-icon
     slick-arrow"><span class="icon-content--large"><svg><use #icon-chevronLeft>.
   - Splide (dzm-Plugin): Bild-/Hero-Slider. Markup <button class="splide__arrow
     splide__arrow--prev"><svg viewBox="0 0 40 40"><path>.
   Optik (edel, Nutzerwunsch "schoener"): 48px WEISSER "Milchglas"-Kreis
   (rgba(255,255,255,.94) + backdrop-blur), feiner Doppelschatten, Chevron
   Dunkelgruen (#46591f); HOVER = kraeftig-gruene Fuellung (#7A9A4E) + weisser
   Chevron + staerkerer Schatten. Focus-Ring fuer a11y. !important, weil
   Theme/Plugin background/border/box-shadow/SVG-fill selbst setzen.
   POSITION: ALLE Pfeile LINKS/RECHTS vertikal mittig (Nutzerwahl 2. Runde) –
   die Produkt-Slider stellt das Theme oben rechts, hier auf seitlich mittig
   umgestellt; Titel-Freiraum entfaellt, oberer Slider-Abstand reduziert.
   WICHTIG: display OHNE !important -> Slicks "nichts-zu-scrollen"-Ausblenden
   (.slick-arrow.slick-hidden{display:none}) bleibt wirksam (keine toten Pfeile).
   Sollen Pfeile ueberall erzwungen werden: .slick-arrow.slick-hidden{display:flex}.
   ========================================================================== */

/* ---- Button-Optik (alle Systeme): edler weisser "Milchglas"-Kreis ---- */
.slick-prev, .slick-next, .splide__arrow {
  width: 48px !important; height: 48px !important; padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid rgba(47, 62, 70, .10) !important;
  box-shadow: 0 8px 22px rgba(47, 62, 70, .18), 0 2px 6px rgba(47, 62, 70, .10) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 1 !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  z-index: 5;
}
.slick-prev:hover, .slick-next:hover, .splide__arrow:hover {
  background: #7A9A4E !important;
  border-color: #7A9A4E !important;
  box-shadow: 0 12px 28px rgba(122, 154, 78, .40), 0 3px 8px rgba(47, 62, 70, .14) !important;
}
.slick-prev:focus-visible, .slick-next:focus-visible, .splide__arrow:focus-visible {
  outline: 2px solid #7A9A4E !important; outline-offset: 2px;
}
/* ---- Chevron: EIGENER, sauberer Single-Chevron ----
   Ersetzt das Theme-Icon (mal Einzel-, mal Doppelpfeil «») -> shopweit EIN
   einheitlicher, huebscher Chevron. Als ::before-Grafik = volle Kontrolle ueber
   Form + Farbe. Gruen (#46591f) in Ruhe, weiss auf Hover. Theme-SVG/Icon aus. */
.slick-prev svg, .slick-next svg, .splide__arrow svg,
.slick-prev .icon-content, .slick-next .icon-content { display: none !important; }
.slick-prev::before, .slick-next::before, .splide__arrow::before {
  content: "" !important; display: block; width: 22px; height: 22px;
  background: no-repeat center / 22px 22px;
}
.slick-prev::before, .splide__arrow--prev::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346591f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
}
.slick-next::before, .splide__arrow--next::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346591f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}
.slick-prev:hover::before, .splide__arrow--prev:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
}
.slick-next:hover::before, .splide__arrow--next:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}
/* ---- Deaktiviert (Anfang/Ende): sichtbar, aber gedaempft, kein Hover-Effekt ---- */
.slick-prev.slick-disabled, .slick-next.slick-disabled,
.splide__arrow:disabled, .splide__arrow.is-disabled { opacity: .38 !important; }
.slick-prev.slick-disabled:hover, .slick-next.slick-disabled:hover,
.splide__arrow:disabled:hover {
  background: rgba(255, 255, 255, .94) !important; border-color: rgba(47, 62, 70, .10) !important;
  box-shadow: 0 8px 22px rgba(47, 62, 70, .18), 0 2px 6px rgba(47, 62, 70, .10) !important; cursor: default;
}
.slick-prev.slick-disabled:hover svg, .slick-next.slick-disabled:hover svg,
.splide__arrow:disabled:hover svg { fill: #46591f !important; }

/* ---- Position: links/rechts ----
   Bild-/Hero-Slider (Slick-Basis + Splide): vertikal MITTIG (top:50%).
   PRODUKT-Slider (.product-slider, hohe Karten): NICHT mittig, sondern auf
   HOEHE DES PRODUKTBILDS (~110px v. oben) -> Pfeil ueberdeckt nie mehr Preis/
   Text (Preis liegt ~240–340px tief), egal wie lang die Beschreibung ist.
   Bilder sind ~200–260px hoch -> 110px sitzt sicher ueber dem Bild.
   (.product-slider braucht hoehere Spezifitaet, um Theme-oben-rechts zu schlagen.) */
.slick-prev, .splide__arrow--prev { left: 12px !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; }
.slick-next, .splide__arrow--next { right: 12px !important; left: auto !important; top: 50% !important; transform: translateY(-50%) !important; }
.product-slider .slick-prev { left: 12px !important; right: auto !important; top: 110px !important; transform: translateY(-50%) !important; }
.product-slider .slick-next { right: 12px !important; left: auto !important; top: 110px !important; transform: translateY(-50%) !important; }
.product-slider .slick-slider { margin-top: 1.25rem !important; }

@media (max-width: 767px) {
  .slick-prev, .slick-next, .splide__arrow { width: 40px !important; height: 40px !important; }
  .slick-prev::before, .slick-next::before, .splide__arrow::before { width: 19px; height: 19px; background-size: 19px 19px; }
  .slick-prev, .splide__arrow--prev, .product-slider .slick-prev { left: 6px !important; }
  .slick-next, .splide__arrow--next, .product-slider .slick-next { right: 6px !important; }
  /* Produkt-Slider mobil: Pfeil auf Bildhoehe (Bilder ~180–220px) */
  .product-slider .slick-prev, .product-slider .slick-next { top: 100px !important; }
}

/* =========================================================================
   Beschreibungs-Skins (Nutzer 2026-07-12) – zwei OPC-Bausteine, reines CSS:
   A  .cst-teaser  = Kurz-Teaser (Produktseite oben): 2 Zeilen sichtbar,
                     Aufklappen per CSS-Checkbox-Hack (KEIN JS).
   B  .cst-guide   = Ratgeber-Block (Mitteltexte): immer voll, Lesebreite 760px.
   CI: gruen #7a9a4e / #46591f, salbei #dbe6bf/#eef3e3, creme #FBF6EC.
   Typo-Skala: Lead .95rem, Titel 1.1rem, Small .8rem (Root 15px).
   ========================================================================= */
.cst-teaser .cst-body a, .cst-guide .cst-lead a, .cst-guide p a { color:#46591f; font-weight:700; text-decoration:none; border-bottom:1.5px solid #dbe6bf; }
.cst-teaser .cst-body a:hover, .cst-guide .cst-lead a:hover, .cst-guide p a:hover { border-color:#7a9a4e; }

/* ---- A · Kurz-Teaser (2 Zeilen -> Aufklappen) ---- */
.cst-teaser { border-top:1px solid #e7ebe0; padding-top:14px; margin:6px 0 10px; }
.cst-teaser > input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.cst-teaser .cst-body { position:relative; overflow:hidden; max-height:3.2em; font-size:1rem; line-height:1.6; color:#3a4a44; transition:max-height .35s ease; }
.cst-teaser .cst-body p { margin:0 0 .7em; }
.cst-teaser .cst-body::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1.7em; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff); transition:opacity .2s; }
.cst-teaser > input:checked ~ .cst-body { max-height:1600px; }
.cst-teaser > input:checked ~ .cst-body::after { opacity:0; }
.cst-toggle { display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:.95rem; font-weight:700; color:#46591f; background:#eef3e3; border:1px solid #dbe6bf; padding:8px 18px; border-radius:22px; cursor:pointer; user-select:none; }
.cst-toggle:hover { background:#e4ecd3; }
.cst-toggle svg { width:15px; height:15px; transition:transform .25s; }
.cst-toggle .cst-less { display:none; }
.cst-teaser > input:checked ~ .cst-toggle svg { transform:rotate(180deg); }
.cst-teaser > input:checked ~ .cst-toggle .cst-more { display:none; }
.cst-teaser > input:checked ~ .cst-toggle .cst-less { display:inline; }

/* ---- B · Ratgeber-Block (immer voll, Lesebreite begrenzt) ---- */
.cst-guide { max-width:760px; margin:18px auto; background:#FBF6EC; border:1px solid #e7ebe0; border-radius:16px; padding:24px 28px; }
.cst-guide .cst-kick { display:inline-block; font-size:.87rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#46591f; background:#eef3e3; border:1px solid #dbe6bf; padding:4px 12px; border-radius:20px; margin-bottom:12px; }
.cst-guide .cst-lead { font-size:1.1rem; font-weight:600; line-height:1.45; color:#2f3e46; margin:0 0 .7em; }
.cst-guide p { font-size:1rem; line-height:1.6; color:#3a4a44; margin:0 0 .8em; }
.cst-guide p:last-of-type { margin-bottom:0; }
.cst-guide .cst-cats { margin-top:16px; padding-top:16px; border-top:1px solid #e7ebe0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cst-guide .cst-cats-label { font-size:.87rem; font-weight:700; color:#6a7b59; }
.cst-guide .cst-chip { display:inline-flex; align-items:center; font-size:.87rem; font-weight:600; color:#46591f; background:#fff; border:1px solid #dbe6bf; padding:5px 13px; border-radius:20px; text-decoration:none; }
.cst-guide .cst-chip:hover { background:#eef3e3; border-color:#7a9a4e; }

@media (max-width: 767px) {
  .cst-guide { max-width:100%; margin:14px 0; padding:18px 18px; border-radius:14px; }
  .cst-guide .cst-lead { font-size:1rem; }
}

/* === CLS: Platz fuer das elfsight-Bewertungs-Widget reservieren (GLOBAL) ==
   Das Google-Bewertungs-Widget (elfsight, .elfsight-app-*) steckt sowohl auf
   Produktseiten ALS AUCH auf der Startseite und laedt als Drittanbieter nach
   (~800px, reserviert selbst KEINEN Platz -> Inhalt darunter springt = CLS).
   Reservierung hier in global.css, damit BEIDE Seiten abgedeckt sind (loest
   den frueheren, nur produktseiten-lokalen Fix ab). Nur mobil (Desktop-CWV
   gruen, Widget dort flacher -> keine Reservierung, sonst Leerflaeche).
   Greift nur, wo ein elfsight-Placeholder existiert (sonst no-op). Rueckbaubar.
   Wert ggf. an reale Widget-Hoehe anpassen. */
@media (max-width: 767px) {
  [class*="elfsight-app-"] { min-height: 800px; }
}

/* === Kategorieseite: aktive Filter-Leiste in CI (2026-07-16) ==============
   JTL rendert aktive Filter als tuerkise .badge-info-Chips (Klick = Filter
   ENTFERNEN, daher roter Hover) + orangen badge-warning-Reset-Link
   (#improve_search .active-filters). Hier nur Umfaerbung auf CI-Pillen. */
.active-filters .badge { margin: 0 8px 8px 0; }
.active-filters a.badge-info {
  background: #eef3e3 !important; color: #46591f !important;
  border: 1px solid #cbd8a6; border-radius: 999px;
  padding: .55em 1.05em; font-size: .9rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .4em;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.active-filters a.badge-info:hover {
  background: #fdf3f1 !important; border-color: #e0b9ae; color: #a5341f !important;
}
.active-filters a.badge-warning {
  background: #fff !important; color: #6a7b59 !important;
  border: 1px solid #e7ebe0; border-radius: 999px;
  padding: .55em 1.05em; font-size: .9rem; font-weight: 600;
  display: inline-flex; align-items: center;
  transition: background .15s ease, color .15s ease;
}
.active-filters a.badge-warning:hover { background: #f1f3ec !important; color: #2f3e46 !important; }

/* === Content-Seiten: H1 .page-heading auf CI-Groesse (2026-07-24) =========
   Parent-Theme (styles/admorris/styles.css) setzt ab 992px hart
   .page-heading { font-size: 4.1538rem } = 62px bei Root 15px — betrifft
   ALLE CMS-/Link-Seiten (Versandinformationen, AGB, Kontakt ...).
   Staffelung wie Kategorie-Kopf V2 (css/productlist.css .cs-cathead):
   1.55 / 1.9 / 2.3rem, Gewicht 800, CI-Anthrazit. Selektor h1.page-heading
   (0,1,1) schlaegt die Parent-Klasse (0,1,0) unabhaengig von der
   Ladereihenfolge; kein !important noetig. */
h1.page-heading {
  font-size: 1.55rem;
  line-height: 1.2;
  font-weight: 800;
  color: #2f3e46;
  text-align: center;
  margin-bottom: 22px;
}
/* Zierstrich wie .cs-cathead__rule (Kategorie-Kopf V2) */
h1.page-heading::after {
  content: "";
  display: block;
  width: 42px; height: 3px;
  margin: 11px auto 0;
  background: #cbd8a6;
  border-radius: 2px;
}
@media (min-width: 576px) {
  h1.page-heading { font-size: 1.9rem; }
  h1.page-heading::after { width: 52px; margin-top: 14px; }
}
@media (min-width: 992px) {
  h1.page-heading { font-size: 2.3rem; margin-bottom: 30px; }
  /* Parent zieht .subheading dort um -36px hoch (passend zu 60px Abstand);
     bei 30px Abstand wuerde das ueberlappen -> auf Basiswert zurueck */
  h1.page-heading + .subheading { margin-top: -6px; }
}


/* === Seite Versandinformationen: Inhalts-Drop .csvi (2026-07-24) ==========
   Der Seiten-Editor entfernt <style>-Bloecke aus eingefuegtem HTML -> die
   Komponenten-Styles der Content-Drops liegen deshalb HIER statt im Drop.
   Markup: opc/versandinformationen.html */
.csvi{--csvi-gruen:#7a9a4e;--csvi-akzent:#8da174;--csvi-dgruen:#46591f;--csvi-anthrazit:#2f3e46;--csvi-grau:#6a7b59;--csvi-soft:#eef3e3;--csvi-rand:#e7ebe0;--csvi-salbei:#cbd8a6;font-size:15px;color:var(--csvi-anthrazit);line-height:1.65;text-align:left}
.csvi *{box-sizing:border-box}
.csvi p{margin:0 0 .9em;text-align:left}
.csvi a{color:var(--csvi-dgruen);text-decoration:underline;text-underline-offset:2px}
.csvi a:hover{color:var(--csvi-gruen)}
.csvi h2{margin:2.2rem 0 .6rem;font-size:1.35rem;line-height:1.3;font-weight:700;color:var(--csvi-anthrazit)}
.csvi h2:first-of-type{margin-top:.4rem}
.csvi h3{margin:0 0 .35rem;font-size:1.1rem;font-weight:700;color:var(--csvi-anthrazit)}
.csvi__lead{font-size:1.05rem;color:#3d4a52}
/* einheitliche Lesebreite fuer alle Fliesstext-Absaetze (Karten-Grids bleiben voll breit) */
.csvi > p{max-width:72ch}

/* Eckdaten-Kacheln */
.csvi__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:22px 0 6px;padding:0;list-style:none}
.csvi__facts li{border:1px solid var(--csvi-rand);border-radius:14px;background:#fff;padding:16px 18px}
.csvi__facts svg{color:var(--csvi-gruen);margin-bottom:8px}
.csvi__facts strong{display:block;font-size:1.15rem;font-weight:700;color:var(--csvi-anthrazit);line-height:1.3}
.csvi__facts span{display:block;font-size:.9rem;color:var(--csvi-grau);margin-top:2px}

/* Zwei Versandwege */
.csvi__wege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:14px 0 4px}
.csvi__weg{border:1px solid var(--csvi-rand);border-radius:16px;background:#fff;padding:22px;box-shadow:0 .4rem 1.4rem rgba(47,62,70,.06)}
.csvi__weg-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.csvi__weg-head svg{flex:0 0 auto;color:var(--csvi-gruen)}
.csvi__weg p{font-size:1rem;margin-bottom:.7em}
.csvi__weg p:last-child{margin-bottom:0}
.csvi__tag{display:inline-block;padding:.25em .9em;border-radius:999px;background:var(--csvi-soft);color:var(--csvi-dgruen);font-size:.87rem;font-weight:700;margin-bottom:10px}

/* Hinweis-Box */
.csvi__hinweis{border-left:4px solid var(--csvi-salbei);background:var(--csvi-soft);border-radius:0 12px 12px 0;padding:14px 18px;margin:10px 0 4px;font-size:.95rem;color:#3d4a52}
.csvi__hinweis p{margin:0;font-size:.95rem}
.csvi__hinweis p + p{margin-top:.6em}

/* Beratungs-Karte */
.csvi__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;border:1px solid var(--csvi-rand);border-radius:16px;background:#fff;box-shadow:0 .4rem 1.4rem rgba(47,62,70,.07);padding:22px;margin-top:30px}
.csvi__cta-text{flex:1 1 320px}
.csvi__cta-text p{margin:0;font-size:1rem;color:var(--csvi-grau)}
.csvi .csvi__tel{display:block;font-size:1.45rem;font-weight:800;color:var(--csvi-dgruen);text-decoration:none;margin:.1rem 0 .15rem}
.csvi .csvi__tel:hover{color:var(--csvi-gruen);text-decoration:none}
.csvi .csvi__btn{display:inline-block;padding:12px 26px;border-radius:999px;background:var(--csvi-salbei);color:#333;font-weight:700;font-size:1rem;text-decoration:none;transition:background .15s ease,transform .15s ease}
.csvi .csvi__btn:hover{background:#bccb92;color:#333;text-decoration:none;transform:translateY(-1px)}

@media (max-width:991.98px){
.csvi__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.csvi__wege{grid-template-columns:1fr}
}
@media (max-width:575.98px){
.csvi__facts{grid-template-columns:1fr;gap:10px}
.csvi h2{font-size:1.2rem}
.csvi__weg{padding:18px}
.csvi__cta{padding:18px}
}

/* === NEUE Seite Zahlungsarten: Inhalts-Drop .cszb (2026-07-24) ============
   Gleiches Prinzip wie .csvi. Markup: opc/zahlungsarten.html */
.cszb{--cszb-gruen:#7a9a4e;--cszb-akzent:#8da174;--cszb-dgruen:#46591f;--cszb-anthrazit:#2f3e46;--cszb-grau:#6a7b59;--cszb-soft:#eef3e3;--cszb-rand:#e7ebe0;--cszb-salbei:#cbd8a6;font-size:15px;color:var(--cszb-anthrazit);line-height:1.65;text-align:left}
.cszb *{box-sizing:border-box}
.cszb p{margin:0 0 .9em;text-align:left}
.cszb a{color:var(--cszb-dgruen);text-decoration:underline;text-underline-offset:2px}
.cszb a:hover{color:var(--cszb-gruen)}
.cszb h2{margin:2.2rem 0 .6rem;font-size:1.35rem;line-height:1.3;font-weight:700;color:var(--cszb-anthrazit)}
.cszb h2:first-of-type{margin-top:.4rem}
.cszb h3{margin:0;font-size:1.1rem;font-weight:700;color:var(--cszb-anthrazit)}
.cszb__lead{font-size:1.05rem;color:#3d4a52}
.cszb > p{max-width:72ch}

.cszb__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0 4px}
.cszb__karte{border:1px solid var(--cszb-rand);border-radius:16px;background:#fff;padding:20px 22px;box-shadow:0 .4rem 1.4rem rgba(47,62,70,.06)}
.cszb__karte-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cszb__karte-head svg{flex:0 0 auto;color:var(--cszb-gruen)}
.cszb__karte p{font-size:.95rem;color:#3d4a52;margin:0}
.cszb__badge{display:inline-block;margin-top:10px;padding:.25em .9em;border-radius:999px;background:var(--cszb-soft);color:var(--cszb-dgruen);font-size:.87rem;font-weight:700}

.cszb__hinweis{border-left:4px solid var(--cszb-salbei);background:var(--cszb-soft);border-radius:0 12px 12px 0;padding:14px 18px;margin:10px 0 4px}
.cszb__hinweis p{margin:0;font-size:.95rem;color:#3d4a52}
.cszb__hinweis p + p{margin-top:.6em}

.cszb__sicher{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.cszb__sicher li{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--cszb-rand);border-radius:999px;background:#fff;font-size:.9rem;font-weight:600;color:var(--cszb-anthrazit)}
.cszb__sicher svg{flex:0 0 auto;color:var(--cszb-gruen)}

.cszb__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;border:1px solid var(--cszb-rand);border-radius:16px;background:#fff;box-shadow:0 .4rem 1.4rem rgba(47,62,70,.07);padding:22px;margin-top:30px}
.cszb__cta-text{flex:1 1 320px}
.cszb__cta-text p{margin:0;font-size:1rem;color:var(--cszb-grau)}
.cszb .cszb__tel{display:block;font-size:1.45rem;font-weight:800;color:var(--cszb-dgruen);text-decoration:none;margin:.1rem 0 .15rem}
.cszb .cszb__tel:hover{color:var(--cszb-gruen);text-decoration:none}
.cszb .cszb__btn{display:inline-block;padding:12px 26px;border-radius:999px;background:var(--cszb-salbei);color:#333;font-weight:700;font-size:1rem;text-decoration:none;transition:background .15s ease,transform .15s ease}
.cszb .cszb__btn:hover{background:#bccb92;color:#333;text-decoration:none;transform:translateY(-1px)}

@media (max-width:991.98px){
.cszb__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:575.98px){
.cszb__grid{grid-template-columns:1fr;gap:12px}
.cszb h2{font-size:1.2rem}
.cszb__karte{padding:16px 18px}
.cszb__cta{padding:18px}
}

/* === Seite Impressum: Inhalts-Drop .csim (2026-07-24) =====================
   Gleiches Prinzip wie .csvi/.cszb (Editor entfernt <style>-Bloecke).
   Markup: opc/impressum.html */
.csim{--csim-gruen:#7a9a4e;--csim-akzent:#8da174;--csim-dgruen:#46591f;--csim-anthrazit:#2f3e46;--csim-grau:#6a7b59;--csim-soft:#eef3e3;--csim-rand:#e7ebe0;--csim-salbei:#cbd8a6;font-size:15px;color:var(--csim-anthrazit);line-height:1.65;text-align:left}
.csim *{box-sizing:border-box}
.csim p{margin:0 0 .9em;text-align:left}
.csim > p{max-width:72ch}
.csim a{color:var(--csim-dgruen);text-decoration:underline;text-underline-offset:2px}
.csim a:hover{color:var(--csim-gruen)}
.csim h2{margin:2.2rem 0 .6rem;font-size:1.35rem;line-height:1.3;font-weight:700;color:var(--csim-anthrazit)}
.csim h2:first-of-type{margin-top:.4rem}
.csim h3{margin:0;font-size:1.1rem;font-weight:700;color:var(--csim-anthrazit)}
.csim__lead{font-size:1.05rem;color:#3d4a52}

.csim__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;margin:20px 0 4px;align-items:start}
.csim__spalte{display:grid;gap:16px}
.csim__karte{border:1px solid var(--csim-rand);border-radius:16px;background:#fff;padding:20px 22px;box-shadow:0 .4rem 1.4rem rgba(47,62,70,.06)}
.csim__karte--haupt{border-color:var(--csim-salbei);background:linear-gradient(180deg,#fff 0%,#fdfef9 100%)}
.csim__karte-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.csim__karte-head svg{flex:0 0 auto;color:var(--csim-gruen)}
.csim__karte p{font-size:1rem;margin:0 0 .6em}
.csim__karte p:last-child{margin-bottom:0}
.csim__adresse{line-height:1.7}
.csim__kontakt{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--csim-rand)}
.csim__kontakt li{display:flex;align-items:flex-start;gap:9px;font-size:1rem}
.csim__kontakt li + li{margin-top:8px}
.csim__kontakt svg{flex:0 0 auto;margin-top:4px;color:var(--csim-akzent)}
.csim__ustid{font-size:1.15rem;font-weight:700;letter-spacing:.03em;color:var(--csim-dgruen)}

.csim__abschnitt{margin:1.5rem 0 .4rem}
.csim__powered{margin-top:34px;padding-top:14px;border-top:1px solid var(--csim-rand);font-size:.87rem;color:var(--csim-grau);text-align:right}
.csim__powered a{color:var(--csim-grau)}

@media (max-width:991.98px){
.csim__grid{grid-template-columns:1fr}
}
@media (max-width:575.98px){
.csim h2{font-size:1.2rem}
.csim__karte{padding:16px 18px}
}

/* === Seite AGB: Inhalts-Drop .csag (2026-07-24) ===========================
   Gleiches Prinzip wie .csvi/.cszb/.csim (Editor entfernt <style>-Bloecke).
   Markup: opc/agb.html - Rechtstext wortgleich, nur Form. */
.csag{--csag-gruen:#7a9a4e;--csag-dgruen:#46591f;--csag-anthrazit:#2f3e46;--csag-grau:#6a7b59;--csag-soft:#eef3e3;--csag-rand:#e7ebe0;--csag-salbei:#cbd8a6;font-size:15px;color:var(--csag-anthrazit);line-height:1.65;text-align:left;max-width:860px}
.csag *{box-sizing:border-box}
.csag p{margin:0 0 .9em;text-align:left}
.csag a{color:var(--csag-dgruen);text-decoration:underline;text-underline-offset:2px}
.csag a:hover{color:var(--csag-gruen)}
.csag h3{margin:0 0 .4rem;font-size:1.1rem;font-weight:700;color:var(--csag-anthrazit)}

.csag__abschnitt{display:flex;gap:18px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--csag-rand)}
.csag__abschnitt:first-child{padding-top:6px}
.csag__par{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:.35em .7em;border-radius:999px;background:var(--csag-soft);color:var(--csag-dgruen);font-size:1rem;font-weight:800;letter-spacing:.02em}
.csag__inhalt{flex:1 1 auto;min-width:0}
.csag__inhalt p{font-size:1rem;max-width:72ch}
.csag__inhalt p:last-child{margin-bottom:0}

.csag__frage{margin-top:26px;border-left:4px solid var(--csag-salbei);background:var(--csag-soft);border-radius:0 12px 12px 0;padding:14px 18px}
.csag__frage p{margin:0;font-size:.95rem;color:#3d4a52}

@media (max-width:575.98px){
.csag__abschnitt{flex-direction:column;gap:8px;padding:18px 0}
}

/* === Seite Datenschutzerklaerung: Inhalts-Drop .csds (2026-07-24) =========
   Gleiches Prinzip wie .csvi/.cszb/.csim/.csag (Editor entfernt <style>).
   Markup: opc/datenschutz.html - Rechtstext wortgleich, nur Form.
   Einfuegen im Backend: AGB/WRB -> Reiter Datenschutzerklaerung (HTML). */
.csds{--csds-gruen:#7a9a4e;--csds-dgruen:#46591f;--csds-anthrazit:#2f3e46;--csds-grau:#6a7b59;--csds-soft:#eef3e3;--csds-rand:#e7ebe0;--csds-salbei:#cbd8a6;font-size:15px;color:var(--csds-anthrazit);line-height:1.65;text-align:left;max-width:860px}
.csds *{box-sizing:border-box}
.csds p{margin:0 0 .9em;text-align:left}
.csds a{color:var(--csds-dgruen);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.csds a:hover{color:var(--csds-gruen)}
.csds h2{margin:0 0 .5rem;font-size:1.2rem;line-height:1.3;font-weight:700;color:var(--csds-anthrazit)}
.csds h3{margin:1.4rem 0 .4rem;font-size:1rem;font-weight:700;color:var(--csds-anthrazit)}

/* Inhaltsverzeichnis */
.csds__toc{border:1px solid var(--csds-rand);border-radius:16px;background:#fff;box-shadow:0 .4rem 1.4rem rgba(47,62,70,.06);padding:20px 22px;margin:4px 0 10px}
.csds__toc-titel{font-size:1.1rem;font-weight:700;margin:0 0 10px}
.csds__toc ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px;counter-reset:csdstoc}
.csds__toc li{counter-increment:csdstoc;font-size:.95rem}
.csds__toc li::before{content:counter(csdstoc) ". ";color:var(--csds-gruen);font-weight:800}
.csds__toc a{text-decoration:none;color:var(--csds-anthrazit)}
.csds__toc a:hover{color:var(--csds-dgruen);text-decoration:underline}

/* Abschnitte mit Nummern-Chip */
.csds__abschnitt{display:flex;gap:18px;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--csds-rand);scroll-margin-top:110px}
.csds__nr{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:999px;background:var(--csds-soft);color:var(--csds-dgruen);font-size:1rem;font-weight:800}
.csds__inhalt{flex:1 1 auto;min-width:0}
.csds__inhalt p{font-size:1rem;max-width:72ch}
.csds__inhalt p:last-child{margin-bottom:0}
.csds__links{margin:0 0 .9em;padding-left:1.2em;font-size:1rem}
.csds__links li{margin-bottom:4px}

/* Kontaktkarten am Ende */
.csds__kontaktblock{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px}
.csds__kontaktkarte{border:1px solid var(--csds-rand);border-radius:16px;background:#fff;box-shadow:0 .4rem 1.4rem rgba(47,62,70,.06);padding:20px 22px}
.csds__kontaktkarte p{font-size:1rem;line-height:1.7;margin:0}
.csds__kontakt-titel{font-weight:700;margin:0 0 8px !important;font-size:1rem !important}

@media (max-width:575.98px){
.csds__toc ol{grid-template-columns:1fr}
.csds__abschnitt{flex-direction:column;gap:8px;padding:18px 0}
.csds__kontaktblock{grid-template-columns:1fr}
}

/* === Seite Batteriegesetzhinweise: Inhalts-Drop .csbg (2026-07-24) ========
   Gleiches Prinzip wie die uebrigen Content-Drops (Editor entfernt <style>).
   Markup: opc/batteriegesetzhinweise.html */
.csbg{--csbg-gruen:#7a9a4e;--csbg-dgruen:#46591f;--csbg-anthrazit:#2f3e46;--csbg-grau:#6a7b59;--csbg-soft:#eef3e3;--csbg-rand:#e7ebe0;--csbg-salbei:#cbd8a6;font-size:15px;color:var(--csbg-anthrazit);line-height:1.65;text-align:left;max-width:860px}
.csbg *{box-sizing:border-box}
.csbg p{margin:0 0 .9em;text-align:left;max-width:72ch}
.csbg a{color:var(--csbg-dgruen);text-decoration:underline;text-underline-offset:2px}
.csbg a:hover{color:var(--csbg-gruen)}
.csbg h2{margin:1.8rem 0 .6rem;font-size:1.2rem;line-height:1.3;font-weight:700;color:var(--csbg-anthrazit)}
.csbg__lead{font-size:1.05rem;color:#3d4a52}

.csbg__symbol{display:flex;align-items:center;gap:18px;border:1px solid var(--csbg-rand);border-radius:16px;background:#fff;box-shadow:0 .4rem 1.4rem rgba(47,62,70,.06);padding:18px 22px;margin:0 0 14px;max-width:560px}
.csbg__symbol svg{flex:0 0 auto;color:var(--csbg-anthrazit)}
.csbg__symbol p{margin:0;font-size:1rem}

.csbg__stoffe{list-style:none;margin:0 0 .9em;padding:0}
.csbg__stoffe li{display:flex;align-items:center;gap:12px;font-size:1rem;padding:7px 0}
.csbg__stoff{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:.3em .6em;border-radius:999px;background:var(--csbg-soft);color:var(--csbg-dgruen);font-weight:800;font-size:.95rem}

.csbg__adresse{border-left:4px solid var(--csbg-salbei);padding:6px 0 6px 16px;line-height:1.7;font-weight:600}

.csbg__frage{margin-top:24px;border-left:4px solid var(--csbg-salbei);background:var(--csbg-soft);border-radius:0 12px 12px 0;padding:14px 18px}
.csbg__frage p{margin:0;font-size:.95rem;color:#3d4a52}

@media (max-width:575.98px){
.csbg__symbol{gap:14px;padding:14px 16px}
}

/* === Seite Widerrufsrecht: Inhalts-Drop .cswr (2026-07-24) ================
   Gleiches Prinzip wie die uebrigen Content-Drops (Editor entfernt <style>).
   Markup: opc/widerrufsrecht.html - Rechtstext wortgleich, nur Form.
   Pflege im Backend: AGB/WRB -> Reiter Widerrufsbelehrung (HTML). */
.cswr{--cswr-gruen:#7a9a4e;--cswr-dgruen:#46591f;--cswr-anthrazit:#2f3e46;--cswr-grau:#6a7b59;--cswr-soft:#eef3e3;--cswr-rand:#e7ebe0;--cswr-salbei:#cbd8a6;font-size:15px;color:var(--cswr-anthrazit);line-height:1.65;text-align:left;max-width:860px}
.cswr *{box-sizing:border-box}
.cswr p{margin:0 0 .9em;text-align:left;max-width:72ch}
.cswr a{color:var(--cswr-dgruen);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.cswr a:hover{color:var(--cswr-gruen)}
.cswr h2{margin:2rem 0 .6rem;font-size:1.2rem;line-height:1.3;font-weight:700;color:var(--cswr-anthrazit);scroll-margin-top:110px}

.cswr__toc{border:1px solid var(--cswr-rand);border-radius:16px;background:#fff;box-shadow:0 .4rem 1.4rem rgba(47,62,70,.06);padding:20px 22px;margin:4px 0 10px}
.cswr__toc-titel{font-size:1.1rem;font-weight:700;margin:0 0 10px}
.cswr__toc ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px;counter-reset:cswrtoc}
.cswr__toc li{counter-increment:cswrtoc;font-size:.95rem}
.cswr__toc li::before{content:counter(cswrtoc) ". ";color:var(--cswr-gruen);font-weight:800}
.cswr__toc a{text-decoration:none;color:var(--cswr-anthrazit)}
.cswr__toc a:hover{color:var(--cswr-dgruen);text-decoration:underline}

.cswr__adresse{border-left:4px solid var(--cswr-salbei);padding:6px 0 6px 16px;line-height:1.75}
.cswr__liste{margin:0 0 .9em;padding-left:1.2em;max-width:72ch}
.cswr__liste li{margin-bottom:6px;font-size:1rem}
.cswr__zitat{font-style:italic;color:#3d4a52}

.cswr__formular{border:1px solid var(--cswr-rand);border-radius:16px;background:#fff;box-shadow:0 .4rem 1.4rem rgba(47,62,70,.06);padding:22px;margin:0 0 14px;max-width:640px}
.cswr__feld{border-bottom:1px dotted #b9c2ae;padding-bottom:14px;margin-bottom:12px !important}
.cswr__sternchen{font-size:.8rem;color:var(--cswr-grau);margin-bottom:0 !important}
.cswr__ende{margin-top:22px;padding-top:14px;border-top:1px solid var(--cswr-rand);font-size:.9rem;color:var(--cswr-grau)}

@media (max-width:575.98px){
.cswr__toc ol{grid-template-columns:1fr}
.cswr__formular{padding:16px 18px}
}

/* === Seite Muster-Widerrufsformular: Inhalts-Drop .cswf (2026-07-24) ======
   Gleiches Prinzip wie .csvi/.cszb/.csim/.csag/.csds (Editor entfernt
   <style>). Markup: opc/muster-widerrufsformular.html */
.cswf{--cswf-gruen:#7a9a4e;--cswf-dgruen:#46591f;--cswf-anthrazit:#2f3e46;--cswf-grau:#6a7b59;--cswf-soft:#eef3e3;--cswf-rand:#e7ebe0;--cswf-salbei:#cbd8a6;font-size:15px;color:var(--cswf-anthrazit);line-height:1.65;text-align:left;max-width:760px}
.cswf *{box-sizing:border-box}
.cswf p{margin:0 0 .9em;text-align:left}
.cswf a{color:var(--cswf-dgruen);text-decoration:underline;text-underline-offset:2px}
.cswf a:hover{color:var(--cswf-gruen)}
.cswf__lead{font-size:1.05rem;color:#3d4a52;max-width:66ch}

/* Formular-Karte */
.cswf__karte{border:1px solid var(--cswf-rand);border-radius:16px;background:#fff;box-shadow:0 .4rem 1.4rem rgba(47,62,70,.06);padding:26px 28px;margin:18px 0 4px}
.cswf__hint{font-size:1rem;color:var(--cswf-grau)}
.cswf__an{border-left:4px solid var(--cswf-salbei);background:var(--cswf-soft);border-radius:0 12px 12px 0;padding:14px 18px;margin:0 0 18px}
.cswf__an p{margin:0;font-size:1rem;line-height:1.6}
.cswf__an-titel{font-weight:700;color:var(--cswf-anthrazit);margin-bottom:4px !important}
.cswf__feld p{font-size:1rem;margin-bottom:14px}
.cswf__mk{color:var(--cswf-gruen);font-weight:700}

/* Schreiblinien */
.cswf__linie{display:block;height:0;border-bottom:1px dashed #c4ccbb;margin:0 0 16px}
.cswf__linie--lang{margin-top:2px}

.cswf__zeilen{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--cswf-rand)}
.cswf__zeilen li{margin-bottom:16px}
.cswf__label{display:block;font-size:.9rem;font-weight:600;color:var(--cswf-grau);margin-bottom:8px}
.cswf__klein{font-weight:400;font-style:italic}
.cswf__zeilen .cswf__linie{margin-bottom:0}
.cswf__stern{margin:18px 0 0;font-size:.82rem;color:var(--cswf-grau)}

/* Download-Button */
.cswf__cta{margin-top:24px}
.cswf .cswf__btn{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:999px;background:var(--cswf-gruen);color:#fff;font-weight:700;font-size:1rem;text-decoration:none;transition:background .15s ease,transform .15s ease}
.cswf .cswf__btn:hover{background:#6c8a44;color:#fff;text-decoration:none;transform:translateY(-1px)}
.cswf .cswf__btn svg{flex:0 0 auto}
.cswf__cta-sub{margin:12px 0 0;font-size:.9rem;color:var(--cswf-grau)}

@media (max-width:575.98px){
.cswf__karte{padding:20px 18px}
.cswf .cswf__btn{width:100%;justify-content:center}
}

/* === Seite Sicheres Einkaufen: Inhalts-Drop .csse (2026-07-24) ============
   Neuaufbau (ersetzt SSL-Technikvortrag). Gleiches Prinzip wie .csvi &co.
   Markup: opc/sicheres-einkaufen.html */
.csse{--csse-gruen:#7a9a4e;--csse-dgruen:#46591f;--csse-anthrazit:#2f3e46;--csse-grau:#6a7b59;--csse-soft:#eef3e3;--csse-rand:#e7ebe0;--csse-salbei:#cbd8a6;font-size:15px;color:var(--csse-anthrazit);line-height:1.65;text-align:left}
.csse *{box-sizing:border-box}
.csse p{margin:0 0 .9em;text-align:left}
.csse a{color:var(--csse-dgruen);text-decoration:underline;text-underline-offset:2px}
.csse a:hover{color:var(--csse-gruen)}
.csse__intro-titel{margin:.4rem 0 .5rem;font-size:1.35rem;line-height:1.3;font-weight:700;color:var(--csse-anthrazit)}
.csse__lead{font-size:1.05rem;color:#3d4a52;max-width:70ch}

.csse__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 4px}
.csse__karte{border:1px solid var(--csse-rand);border-radius:16px;background:#fff;box-shadow:0 .4rem 1.4rem rgba(47,62,70,.06);padding:22px 22px 20px}
.csse__ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:var(--csse-soft);color:var(--csse-gruen);margin-bottom:12px}
.csse__karte h3{margin:0 0 .4rem;font-size:1.1rem;font-weight:700;color:var(--csse-anthrazit)}
.csse__karte p{font-size:.95rem;color:#3d4a52;margin:0}

.csse__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;border:1px solid var(--csse-rand);border-radius:16px;background:linear-gradient(180deg,#fff 0%,#fdfef9 100%);box-shadow:0 .4rem 1.4rem rgba(47,62,70,.07);padding:24px 26px;margin-top:28px}
.csse__cta-text{flex:1 1 300px}
.csse__cta-text p{margin:0;font-size:1rem;color:var(--csse-grau)}
.csse__cta-titel{font-size:1.1rem;font-weight:700;color:var(--csse-anthrazit) !important;margin-bottom:2px !important}
.csse__cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.csse .csse__btn{display:inline-block;padding:12px 24px;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;transition:background .15s ease,transform .15s ease}
.csse .csse__btn:hover{text-decoration:none;transform:translateY(-1px)}
.csse .csse__btn--primaer{background:var(--csse-gruen);color:#fff}
.csse .csse__btn--primaer:hover{background:#6c8a44;color:#fff}
.csse .csse__btn--zweit{background:var(--csse-salbei);color:#333}
.csse .csse__btn--zweit:hover{background:#bccb92;color:#333}

@media (max-width:991.98px){
.csse__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:575.98px){
.csse__grid{grid-template-columns:1fr}
.csse__intro-titel{font-size:1.2rem}
.csse__cta{padding:20px}
.csse .csse__btn{flex:1 1 auto;text-align:center}
}

/* === Blog / News (/News): CI-Redesign (2026-07-24) ========================
   JTL-eigenes News-/Blog-Modul (blog/overview.tpl, preview.tpl, details.tpl).
   Rein CSS, alle Regeln haengen an .blog-* / .newsbox -> nur auf News-Seiten
   aktiv, sonst no-op. Kein Template-Override noetig.
   Zielbild: Karten-Grid wie die uebrigen CI-Seiten. */

/* --- Kopf der Uebersicht (eigene <h1>, NICHT .page-heading) ---
   Die <h1> steht in overview.tpl VOR .blog-overview (Geschwister), daher
   per :has() sicher auf News-Seiten begrenzt. Trifft keine anderen Seiten. */
#content:has(.blog-overview) > h1{
  text-align:center;font-size:2.3rem;line-height:1.2;font-weight:800;color:#2f3e46;margin:.2rem 0 8px;
}
#content:has(.blog-overview) > h1::after{content:"";display:block;width:52px;height:3px;margin:14px auto 22px;background:#cbd8a6;border-radius:2px}
@media (max-width:575.98px){#content:has(.blog-overview) > h1{font-size:1.55rem}}

/* --- Filter-/Sortierleiste --- */
.blog-overview-hr{border:0;border-top:1px solid #e7ebe0;margin:6px 0 22px}
.blog-overview .custom-select{border-radius:10px;border-color:#e7ebe0;color:#2f3e46;font-size:.95rem}

/* --- Liste als Karten (Standard-Layout preview.tpl) --- */
.blog-overview-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.newsbox.blog-preview{
  border:1px solid #e7ebe0;border-radius:16px;background:#fff;overflow:hidden;
  box-shadow:0 .4rem 1.4rem rgba(47,62,70,.06);padding:0;margin:0;
  transition:box-shadow .18s ease, transform .18s ease;display:flex;flex-direction:column;
}
.newsbox.blog-preview:hover{box-shadow:0 .8rem 2rem rgba(47,62,70,.12);transform:translateY(-2px)}
/* Bootstrap-row im Card auf Spalten-Layout zwingen */
.newsbox.blog-preview > .row{margin:0;flex-direction:column;flex:1}
.newsbox.blog-preview > .row > [class*="col-"]{max-width:100%;flex:0 0 auto;padding:0}
.newsbox-header{margin:0}
.newsbox-image{aspect-ratio:16/10;overflow:hidden;background:#eef3e3}
.newsbox-image .blog-img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.newsbox.blog-preview:hover .newsbox-image .blog-img{transform:scale(1.04)}
.newsbox-body{padding:18px 20px 6px;display:flex;flex-direction:column;gap:8px;flex:1}
.newsbox-headline.h4{font-size:1.15rem;font-weight:800;line-height:1.3;color:#2f3e46;margin:0}
.newsbox-headline.h4:hover{color:#46591f}
.newsbox-body .row{margin:0;align-items:center;gap:12px}
.newsbox-body .row > [class*="col-"]{padding:0}
.blog-preview-author{font-size:.87rem;color:#6a7b59}
.newsbox-author{display:inline}
.blog-preview-comment a{font-size:.87rem;color:#6a7b59;text-decoration:none}
.blog-preview-comment a:hover{color:#46591f}
.newsbox-body p[itemprop="description"]{font-size:.95rem;color:#3d4a52;margin:2px 0 0;line-height:1.55}
.newsbox-footer{padding:12px 20px 18px;margin:auto 0 0}
.newsbox-footer a{
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;
  background:#eef3e3;color:#46591f;font-weight:700;font-size:.95rem;text-decoration:none;
  transition:background .15s ease;
}
.newsbox-footer a:hover{background:#dbe6bf;color:#46591f}

/* --- Galerie-Layout (falls blog_layout_type=gallery) --- */
.blog-overview__gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

/* --- Detailseite --- */
.blog-details{max-width:820px;margin:0 auto}
.blog-details h1{text-align:left;font-size:2rem;line-height:1.25;font-weight:800;color:#2f3e46;margin:.2rem 0 10px}
.blog-details-content{font-size:1rem;line-height:1.7;color:#2f3e46}
.blog-details-content h2{font-size:1.4rem;font-weight:700;margin:1.8rem 0 .6rem;color:#2f3e46}
.blog-details-content h3{font-size:1.15rem;font-weight:700;margin:1.4rem 0 .4rem;color:#2f3e46}
.blog-details-content p{margin:0 0 1em;max-width:72ch}
.blog-details-content a{color:#46591f;text-decoration:underline;text-underline-offset:2px}
.blog-details-content a:hover{color:#7a9a4e}
.blog-details-content img{max-width:100%;height:auto;border-radius:12px}
.blog-details-hr{border:0;border-top:1px solid #e7ebe0;margin:26px 0}

@media (max-width:991.98px){
  .blog-overview__gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767.98px){
  .blog-overview-preview{grid-template-columns:1fr}
  .blog-overview__gallery-grid{grid-template-columns:1fr}
}

/* === Newsletter + Kontakt: CI-Formulare (2026-07-24) ======================
   JTL-System-Seiten. Rein CSS, ENG gescopt auf #newsletter-subscribe /
   #newsletter-unsubscribe / .contact-form -> keine anderen Karten/Formulare
   betroffen. Float-Label-Animation bleibt unangetastet (nur Farben/Radius). */

/* --- Newsletter-Seite: eigene <h1> (plain, nicht .page-heading) --- */
#content:has(#newsletter-subscribe) > div > h1,
#content:has(#newsletter-subscribe) > h1{
  text-align:center;font-size:2.3rem;line-height:1.2;font-weight:800;color:#2f3e46;margin:.2rem 0 8px;
}
#content:has(#newsletter-subscribe) > div > h1::after,
#content:has(#newsletter-subscribe) > h1::after{
  content:"";display:block;width:52px;height:3px;margin:14px auto 24px;background:#cbd8a6;border-radius:2px;
}
@media (max-width:575.98px){
  #content:has(#newsletter-subscribe) > div > h1,
  #content:has(#newsletter-subscribe) > h1{font-size:1.55rem}
}

/* --- Newsletter-Karten in CI --- */
#newsletter-subscribe, #newsletter-unsubscribe{max-width:640px;margin-left:auto;margin-right:auto}
#newsletter-subscribe .card,
#newsletter-unsubscribe .card{
  border:1px solid #e7ebe0;border-radius:16px;overflow:hidden;
  box-shadow:0 .4rem 1.4rem rgba(47,62,70,.06);
}
#newsletter-subscribe .card-header,
#newsletter-unsubscribe .card-header{
  /* dzm-Plugin setzt .card-header bg mit !important -> hier ebenfalls noetig */
  background:#eef3e3 !important;border-bottom:1px solid #e7ebe0;color:#2f3e46;
  font-size:1.1rem;font-weight:700;padding:16px 22px;
}
#newsletter-subscribe .card-body,
#newsletter-unsubscribe .card-body{padding:22px}
#newsletter-subscribe .card-body > p:first-child,
#newsletter-unsubscribe .card-body > p:first-child{color:#3d4a52;font-size:1rem}
#newsletter-subscribe hr, #newsletter-unsubscribe hr{border-color:#e7ebe0}
#newsletter-subscribe .info.small{font-size:.87rem;color:#6a7b59}

/* --- CI-Eingabefelder (Newsletter + Kontakt) --- */
#newsletter-subscribe .form-control,
#newsletter-unsubscribe .form-control,
.contact-form .form-control{
  border:1px solid #d8ddd0;border-radius:10px;color:#2f3e46;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#newsletter-subscribe .form-control:focus,
#newsletter-unsubscribe .form-control:focus,
.contact-form .form-control:focus{
  border-color:#8da174;box-shadow:0 0 0 3px rgba(141,161,116,.25);
}

/* --- CI-Buttons --- */
#newsletter-subscribe .btn-primary,
.contact-form button[type="submit"],
.contact-form .btn-primary{
  background:#7a9a4e;border-color:#7a9a4e;color:#fff;font-weight:700;
  border-radius:999px;padding:11px 28px;transition:background .15s ease, transform .15s ease;
}
#newsletter-subscribe .btn-primary:hover,
.contact-form button[type="submit"]:hover,
.contact-form .btn-primary:hover{
  background:#6c8a44;border-color:#6c8a44;color:#fff;transform:translateY(-1px);
}
#newsletter-unsubscribe .btn-secondary{
  background:#cbd8a6;border-color:#cbd8a6;color:#333;font-weight:700;
  border-radius:999px;padding:11px 28px;transition:background .15s ease, transform .15s ease;
}
#newsletter-unsubscribe .btn-secondary:hover{
  background:#bccb92;border-color:#bccb92;color:#333;transform:translateY(-1px);
}

/* --- Kontaktformular: Karte drumherum + Abstand --- */
.contact-form{
  border:1px solid #e7ebe0;border-radius:16px;background:#fff;
  box-shadow:0 .4rem 1.4rem rgba(47,62,70,.06);padding:26px 28px;
}
@media (max-width:575.98px){ .contact-form{padding:20px 18px} }

/* === Sitemap (/Sitemap): CI-Redesign (2026-07-24) =========================
   JTL-System-Seite page/sitemap.tpl. Rein CSS, gescopt auf .sitemap-group
   -> keine anderen Karten betroffen. H1 .page-heading kommt schon vom
   globalen Fix (zentriert + Strich). Karten = CI, Gruppen klar getrennt,
   Kategorie-Kopf je Spalte als Mini-Ueberschrift. */

.sitemap-group.card{
  border:1px solid #e7ebe0;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 .4rem 1.4rem rgba(47,62,70,.06);margin-bottom:22px;
}
.sitemap-group > .card-header{
  /* dzm-Plugin setzt .card-header bg mit !important -> hier ebenfalls */
  background:#eef3e3 !important;border-bottom:1px solid #e7ebe0;
  color:#2f3e46;font-size:1.15rem;font-weight:800;padding:15px 22px;
  position:relative;padding-left:34px;
}
.sitemap-group > .card-header::before{
  content:"";position:absolute;left:22px;top:50%;transform:translateY(-50%);
  width:5px;height:1.15em;border-radius:3px;background:#7a9a4e;
}
.sitemap-group > .card-body{padding:22px 24px 10px;background:#fff !important}

/* Spalte je Gruppe */
.sitemap-group .sitemap-group-item,
.sitemap-group [class*="col-"]{margin-bottom:18px}

/* Listen */
.sitemap-group ul{margin:0;padding:0;list-style:none}
.sitemap-group li{margin:0 0 6px;line-height:1.5}

/* Kategorie-Kopf je Spalte (der fette Top-Link) als Mini-Ueberschrift */
.sitemap-group li:first-child > a.nice-deco strong,
.sitemap-group li > a.nice-deco strong{
  display:block;color:#2f3e46;font-size:1rem;font-weight:800;
  padding-bottom:7px;margin-bottom:6px;border-bottom:1px solid #edf0e7;
}

/* Links */
.sitemap-group a.nice-deco,
.sitemap-group a{
  color:#46591f;text-decoration:none;font-size:.95rem;
  transition:color .12s ease;
}
.sitemap-group a.nice-deco:hover,
.sitemap-group a:hover{color:#7a9a4e;text-decoration:underline;text-underline-offset:2px}

/* Unterkategorien einruecken + dezenter */
.sitemap-group .sub-categories{margin:4px 0 6px 14px;padding-left:12px;border-left:2px solid #edf0e7}
.sitemap-group .sub-categories a{color:#6a7b59;font-size:.9rem}
.sitemap-group .sub-categories a:hover{color:#46591f}

@media (max-width:575.98px){
  .sitemap-group > .card-body{padding:18px 18px 6px}
  .sitemap-group > .card-header{font-size:1.05rem}
}

/* =====================================================================
   TYPOGRAFIE 2026-07-26 — em-Verkettungen kappen
   ---------------------------------------------------------------------
   Zwei Regeln von aussen rechnen in Prozent VOM ELTERNELEMENT und
   stapeln sich dadurch mit unseren rem-Groessen:
     Bootstrap  small     { font-size:.875em }
     Eltern-Theme .vat_info { font-size:.9em }
   Sitzt die Zeile schon auf .8rem, landet der Text bei 9-10px.
   Gemessen am 26.07.2026: "Sofort verfuegbar" auf der Kategorieseite
   stand bei 9,5px, 20x pro Seite. Hier bekommen die betroffenen
   Stellen feste Groessen statt Prozentwerte.
   Rueckbau: diesen Block loeschen.
   ===================================================================== */

/* Produktkacheln: Verfuegbarkeit + Lieferzeit erben die Zeilengroesse,
   statt sie ein zweites Mal zu verkleinern. */
.product-cell__delivery-status small,
.product-cell__delivery-status .signal_image,
.product-cell__delivery-status .estimated_delivery{ font-size:1em; }

/* MwSt.-/Versandzeile: Pflichtangabe, darf nirgends unter 13px rutschen.
   Feste Groesse statt .9em, damit sie in kleinen Containern nicht
   weiter mitschrumpft. Die Sticky-Warenkorbleiste setzt eigene Werte
   mit !important und bleibt davon unberuehrt. */
.vat_info{ font-size:.87rem; }
.vat_info small,
.vat_info .shipment{ font-size:1em; }

/* =====================================================================
   SCHRIFT 2026-07-26 — Inter statt Poppins
   ---------------------------------------------------------------------
   Die @font-face-Deklaration steht in layout/header.tpl (Block
   'webfont-loading'), damit sie im <head> liegt und frueh gefunden wird.
   Hier wird sie nur zugewiesen — an genau denselben Stellen, an denen das
   Eltern-Theme Poppins setzt (styles.css: body, die Ueberschriften-Liste,
   .heading-font, .hr-sect) plus Formularelemente und die Tooltips/Popover
   aus non-critical.css.
   'Inter Fallback' = Arial mit angeglichenen Metriken, verhindert den
   Layout-Sprung waehrend Inter laedt.
   Rueckbau: diesen Block loeschen.
   ===================================================================== */
:root{
  --cs-font: 'Inter', 'Inter Fallback', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body{ font-family: var(--cs-font); }
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.sidepanel-left .box-normal .box-normal-link,
.product-slider__title,
.heading-font,
.hr-sect{ font-family: var(--cs-font); }
/* Formularelemente erben die Schrift nicht von selbst */
button, input, optgroup, select, textarea,
.btn, .form-control, .custom-select{ font-family: inherit; }
/* aus non-critical.css, laedt asynchron NACH global.css */
.tooltip, .popover{ font-family: var(--cs-font) !important; }

/* Echte Halbfett-Stufe nutzen: Poppins hatte keinen 600er, deshalb rendern
   heute 87 Elemente mit font-weight:600 faelschlich in 700. Inter bringt den
   Schnitt mit — hier ist nichts zu tun, die Stufe stimmt jetzt von allein.
   Falls einzelne Stellen dadurch zu leicht wirken, dort gezielt auf 700
   gehen statt global nachzuschaerfen. */

/* ---------------------------------------------------------------------
   Kleinstschrift aus BACKEND-INHALTEN abfangen (2026-07-26)
   Diese Groessen stehen nicht im Theme, sondern in OPC-Drops und
   Produktbeschreibungen — an sie kommt man nur ueber !important heran.
   Beim naechsten Anfassen des jeweiligen Inhalts dort sauber korrigieren,
   dann kann die Regel hier weg.
   --------------------------------------------------------------------- */

/* Produktkopf-Kicker ("Pflegebett - Made in Germany"), gemessen 11,7px.
   Steht als <style> im OPC-Drop und laedt damit NACH global.css. */
.cs-kicker{ font-size:.87rem !important; }

/* Der WYSIWYG-Editor schreibt Punkt-Groessen direkt ins Markup.
   8pt = 10,7px, z.B. beim Hinweis "Farben und Ausstattungen koennen von
   den Bildern abweichen" auf der Produktseite. 6-9pt sind ausnahmslos
   zu klein; 10pt (13,3px) liegt schon in der Skala und bleibt. */
[style*="font-size:6pt"], [style*="font-size: 6pt"],
[style*="font-size:7pt"], [style*="font-size: 7pt"],
[style*="font-size:8pt"], [style*="font-size: 8pt"],
[style*="font-size:9pt"], [style*="font-size: 9pt"]{ font-size:.87rem !important; }

/* ---------------------------------------------------------------------
   CLS: Platzhalter fuer kkDropper-Banner ohne Hoehenangabe (2026-07-27)
   Problem: Die Drop-Bilder kommen als <img width="500" loading="lazy">
   OHNE height. Der Browser kennt vor dem Laden kein Seitenverhaeltnis,
   reserviert 0 Pixel Hoehe und schiebt beim Nachladen alles darunter weg.
   Gemessen auf der Regia-Seite: 9 solcher Bilder im Konfigurator-Bereich.
   Passt zu Feld-CLS 0,15 bei Labor-CLS 0,002 — der Sprung entsteht erst
   beim Scrollen, nicht beim ersten Aufbau.

   "aspect-ratio: auto 1.6" heisst: das ECHTE Verhaeltnis des Bildes gilt,
   sobald es geladen ist; bis dahin wird 1,6:1 reserviert. Das Bild kann
   dadurch nicht verzerren. 1,6:1 ist der hauseigene Bildstandard, die
   vorhandenen Drop-Bilder liegen bei 1,60 bis 1,67.

   Dauerhafte Loesung: im Dropper zu jedem Bild die Hoehe mitgeben oder die
   Motive auf 1,6:1 exportieren. Dann kann diese Regel weg.
   --------------------------------------------------------------------- */
img.kk-image-banner-img:not([height]){ aspect-ratio: auto 1.6; height: auto; }

/* ---------------------------------------------------------------------
   CLS: Platz fuer Ajax-nachgeladene kkDropper-Drops (2026-07-27)
   Die Drops mit "Inhalt erst laden, sobald sichtbar = Ja, via Ajax laden"
   liefern zunaechst nur einen leeren Container mit Lade-Kringel. Der ist
   zusammengefallen (0 px hoch) und schiebt beim Nachladen alles darunter
   weg. Gemessen: 44 solcher Container allein auf der Regia-Seite.

   Diese Regel macht in EINEM Zug das, was im Dropper-Dialog pro Drop unter
   "Platzhalter verwenden -> Ja, mit Seitenverhaeltnis" eingestellt wuerde:
   sie reserviert 1,6:1, solange der Kringel drinsteht. Sobald der Inhalt
   ankommt, verschwindet der Kringel, :has() trifft nicht mehr, und der
   Container nimmt seine echte Hoehe an.

   1,6 ist der hauseigene Bildstandard und passt fuer die Bild-Drops. Bei
   Text-Drops ist es eine Naeherung — aber eine Abweichung von 50 px ist
   unendlich besser als ein Sprung aus dem Nichts.

   Feinschliff fuer einzelne Drops: die UUID in data-lazy-load-container-drop
   ist ueber Seitenaufrufe stabil (die Klassen-Endung NICHT!), man kann also
   gezielt nachjustieren. Muster steht auskommentiert darunter.
   --------------------------------------------------------------------- */
.kk-drop-lazy-load-container:has(> .kk-loader){ aspect-ratio: 1.6; }

/* Beispiel fuer eine Ausnahme, wenn ein Drop deutlich anders proportioniert
   ist (UUID aus dem Quelltext der Seite ablesen):
.kk-drop-lazy-load-container[data-lazy-load-container-drop="43206eaf-bfe7-46f7-900b-26bb84757750"]:has(> .kk-loader){
  aspect-ratio: auto; min-height: 420px;
}
*/


/* ===== ANFANG PRODUKTSUCHE (erzeugt von suche/einbetten.py) ===== */
/* ============================================================================
   suche.css — Vorschlagsliste der eigenen Produktsuche
   ----------------------------------------------------------------------------
   Gehoert zu js/cs-suche.js. Zwei Bausteine:

     .cssu*          die Vorschlagsliste unter dem Suchfeld
     .cssu-rettung*  das Sicherheitsnetz auf der Ergebnisseite, wenn die
                     JTL-Suche nichts gefunden hat

   FARBEN nach Farb-CI: Anthrazit #2f3e46 (Text), Gruen-Grau #6a7b59
   (Sekundaertext), Akzent-Gruen #8da174 (aktive Zustaende, Fokus),
   Soft-Gruen #eef3e3 (Flaechen), Leisten-Gruen #dbe6bf, Dunkelgruen #46591f
   (gruene Textlinks), Rahmen #e7ebe0. Keine neuen Gruentoene.

   GROESSEN nach Typo-CI (Root = 15px). Gewaehlte Rollen:
     Produktname  Lead     1rem      die Zeile ist der Lesetext der Liste
     Preis        Body     .95rem/700
     Marke        Small    .87rem
     Gruppenlabel Small    .87rem in Versalien
   Nichts unter 13px.

   BREAKPOINT: Der Shop schaltet bei 1030px auf den Mobil-Header. Ab da
   klappt die Liste ueber die volle Breite auf, weil das mobile Suchfeld
   die ganze Zeile einnimmt.
   ============================================================================ */

/* --------------------------------------------------------------------------
   Vorschlagsliste
   -------------------------------------------------------------------------- */

.cssu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1040;                    /* ueber dem Sticky-Header, unter Modalen */
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;               /* nie seitlich scrollen, egal wie eng */
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #e7ebe0;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(47, 62, 70, .16);
  padding: 6px 0 0;
  text-align: left;
}

.cssu[hidden] { display: none; }

.cssu__gruppe + .cssu__gruppe { border-top: 1px solid #f0f2ec; }

.cssu__label {
  margin: 0;
  padding: 10px 14px 4px;
  font-size: .87rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6a7b59;
}

.cssu__liste {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
}

.cssu__zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color .12s ease;
}

.cssu__zeile:hover,
.cssu__zeile.is-aktiv {
  background: #eef3e3;
}

/* Tastaturauswahl zusaetzlich mit einer Kante markieren, damit sie sich vom
   blossen Mausueberfahren unterscheidet. */
.cssu__zeile.is-aktiv {
  box-shadow: inset 3px 0 0 #8da174;
}

.cssu__bild {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #f0f2ec;
  border-radius: 8px;
  overflow: hidden;
}

.cssu__bild img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cssu__kein-bild {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #eef3e3;
}

.cssu__text {
  flex: 1 1 auto;
  min-width: 0;                     /* sonst sprengen lange Namen die Zeile */
}

.cssu__name {
  display: block;
  font-size: 1rem;
  line-height: 1.3;
  color: #2f3e46;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Die Treffer im Namen. Kein greller Marker, nur etwas mehr Gewicht und
   ein Hauch Farbe, damit die Zeile ruhig bleibt. */
.cssu__name mark {
  background: transparent;
  color: #46591f;
  font-weight: 700;
  padding: 0;
}

.cssu__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;                  /* lieber umbrechen als abschneiden */
  gap: 2px 8px;
  margin-top: 2px;
  min-width: 0;
}

.cssu__marke {
  font-size: .87rem;
  color: #6a7b59;
  white-space: nowrap;
}

.cssu__preis {
  font-size: .95rem;
  font-weight: 700;
  color: #2f3e46;
  white-space: nowrap;              /* "ab 11.599,00 €" nie zerreissen */
}

.cssu__anzahl {
  flex: 0 0 auto;
  font-size: .87rem;
  color: #6a7b59;
}

/* Kategorien und Marken kommen ohne Bild, brauchen aber denselben Einzug,
   damit die Liste eine gemeinsame Kante behaelt. */
.cssu__zeile--kategorie .cssu__text,
.cssu__zeile--marke .cssu__text {
  padding-left: 60px;
  position: relative;
}

.cssu__zeile--kategorie .cssu__text::before,
.cssu__zeile--marke .cssu__text::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid #8da174;
  border-radius: 3px;
}

.cssu__zeile--marke .cssu__text::before {
  border-radius: 50%;
}

.cssu__alle {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-top: 1px solid #f0f2ec;
  background: #f7f9f3;
  font-size: .95rem;
  font-weight: 700;
  color: #46591f;
  text-align: center;
  cursor: pointer;
  border-radius: 0 0 11px 11px;
}

.cssu__alle:hover,
.cssu__alle:focus {
  background: #dbe6bf;
  color: #2f3e46;
}

/* --- Startzustand: leeres Feld, aber angeklickt --------------------------- */

/* Frühere Suchen als anklickbare Pillen. Bewusst kompakter als die
   Produktzeilen darüber — sie sind ein Nebenangebot, kein Hauptweg. */
.cssu__pillen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 14px 10px;
}

.cssu__pille {
  font: inherit;
  font-size: .87rem;
  padding: 5px 12px;
  background: #eef3e3;
  color: #46591f;
  border: 1px solid #dbe6bf;
  border-radius: 999px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cssu__pille:hover,
.cssu__pille:focus {
  background: #dbe6bf;
  color: #2f3e46;
}

/* --- nichts gefunden ------------------------------------------------------ */

.cssu__leer {
  padding: 16px 16px 18px;
}

.cssu__leer-titel {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: #2f3e46;
}

.cssu__leer-tipp,
.cssu__leer-hilfe {
  margin: 0 0 4px;
  font-size: .95rem;
  color: #6a7b59;
}

.cssu__korrektur {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: #46591f;
  text-decoration: underline;
  cursor: pointer;
}

.cssu__tel {
  font-weight: 700;
  color: #46591f;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Mobil. Ab hier traegt der Shop den Mobil-Header, das Suchfeld nimmt die
   volle Zeile ein und die Liste darf sie mitnehmen.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Suchebene fuer Mobil (js/cs-suche.js, ebeneOeffnen)
   --------------------------------------------------------------------------
   Die Lupe oeffnet auf kleinen Geraeten diese Ebene statt des versteckten
   Theme-Feldes. Grund: Jenes liegt hinter "inert" und "opacity:0", ein
   Skript muss es freischalten und fokussieren — und diesen Fokus verweigert
   iOS (kein Cursor, keine Tastatur). Hier ist das Feld von Anfang an
   sichtbar und mit einem Tipp erreichbar.
   -------------------------------------------------------------------------- */

.cssv {
  position: fixed;
  inset: 0;
  z-index: 1100;                    /* ueber Kopfzeile und Sticky-Leiste */
  background: rgba(47, 62, 70, .45);
  display: flex;
  flex-direction: column;
}

.cssv[hidden] { display: none; }

/* Die Vorschlagsliste haengt am KOPF, nicht am Suchfeld — sonst waere sie
   nur so breit wie das Feld, also um die Schaltflaeche "Abbrechen" schmaler
   als die Ebene. */
.cssv__kopf {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid #e7ebe0;
}

/* Bewusst static, obwohl js/cs-suche.js sonst jedem .search__wrapper ein
   position:relative gibt: Nur so findet die Liste den Kopf als Bezug und
   nicht das Feld. Das !important schlaegt den Inline-Stil aus dem Skript. */
.cssv__feld {
  position: static !important;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: #fff;
  border: 1px solid #8da174;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(141, 161, 116, .22);
}

.cssv__lupe {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: #6a7b59;
}

/* 16px exakt — darunter zoomt iOS beim Antippen hinein. Nicht 1rem: Der
   Shop steht auf 15px Root, das waere zu klein. */
.cssv__eingabe {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-size: 16px !important;
  line-height: 1.3;
  color: #2f3e46;
  padding: 0;
  height: auto;
}

.cssv__eingabe::placeholder { color: #96a08f; }

.cssv__abbrechen {
  flex: 0 0 auto;
  border: 0;
  background: none;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: #46591f;
  padding: 8px 2px;
  cursor: pointer;
  white-space: nowrap;
}

/* Die Vorschlagsliste sitzt hier direkt unter dem Feld und nimmt die ganze
   Breite — die Regeln fuer die Kopfzeile gelten in dieser Ebene nicht. */
.cssv .cssu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  max-height: calc(100vh - 96px);
  border-radius: 0 0 12px 12px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: 0 14px 30px rgba(47, 62, 70, .18);
}

/* Seite hinter der Ebene nicht mitscrollen lassen */
html.cs-suchebene-offen,
html.cs-suchebene-offen body {
  overflow: hidden;
}

/* Ab Desktop gibt es die Ebene nicht — dort ist das Kopf-Suchfeld sichtbar. */
@media (min-width: 1031px) {
  .cssv { display: none !important; }
}

/* --------------------------------------------------------------------------
   Mobiles Suchfeld
   --------------------------------------------------------------------------
   Ausgangslage (gemessen 2026-07-27 auf careshop-24.de, 390px Viewport):
   Die Lupe klappt ein Formular auf, das nur 200px breit ist — das Eingabefeld
   darin misst ganze 118px. Zwei Folgen:
     1. Die Vorschlagsliste erbt diese Breite. Preise brechen um, Namen werden
        abgeschnitten, die Liste bekommt einen eigenen Querscroller.
     2. Die Schrift im Feld war 14px. iOS zoomt beim Antippen automatisch auf
        jedes Eingabefeld unter 16px — danach muss der Kunde die Seite
        seitlich schieben.

   Loesung: nicht die Liste verbiegen, sondern das FELD breit machen. Die
   Liste haengt daran und wird automatisch mitbreit.

   --cssearch-top setzt js/cs-suche.js auf die Unterkante der Kopfzeile; der
   Wert hier ist nur der Rueckfall, falls das Skript nicht laeuft.
   -------------------------------------------------------------------------- */

@media (max-width: 1030px) {
  .header-search--dropdown .search__form {
    position: fixed !important;
    top: var(--cssearch-top, 104px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    transform: none !important;
    z-index: 1039;
  }

  /* 16px ist die Schwelle, unter der iOS beim Fokus hineinzoomt. Exakt 16px,
     nicht 1rem — der Shop steht auf 15px Root, das wuerde wieder zoomen. */
  .search__input,
  .header-search--dropdown .search__input {
    font-size: 16px !important;
  }

  /* Das Feld die neue Breite auch wirklich ausnutzen lassen. typeahead legt
     einen eigenen Wrapper (.twitter-typeahead) um das Eingabefeld. */
  .header-search--dropdown .search__wrapper,
  .header-search--dropdown .twitter-typeahead {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
  }

  .cssu {
    border-radius: 10px;
    max-height: min(72vh, 460px);
  }

  .cssu__zeile {
    padding: 10px 12px;             /* groessere Tippflaeche */
  }

  .cssu__bild {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .cssu__zeile--kategorie .cssu__text,
  .cssu__zeile--marke .cssu__text {
    padding-left: 54px;
  }

  .cssu__zeile--kategorie .cssu__text::before,
  .cssu__zeile--marke .cssu__text::before {
    left: 18px;
  }
}

/* Tablet und iPad (Hochformat 768px, Querformat 1024px liegt schon im
   Desktop-Bereich). Volle Breite waere hier zu viel — ein Suchfeld ueber
   950px wirkt verloren und die Vorschlagsliste zieht sich unlesbar breit.
   Deshalb rechtsbuendig unter der Lupe und auf eine ruhige Breite gedeckelt.

   Warum 520px und nicht weniger: Gemessen an den echten Produktnamen
   (2026-07-27, 33 Treffer auf "pfl") passen bei 460px nur 24 von 33 Namen in
   eine Zeile, bei 520px sind es 28. Darueber flacht der Gewinn ab (560px: 29,
   600px: 30), waehrend das Feld auf einem 768px-iPad immer breiter wirkt.
   520px sind dort 68 % der Fensterbreite. */
@media (min-width: 768px) and (max-width: 1030px) {
  .header-search--dropdown .search__form {
    left: auto !important;
    right: 16px !important;
    width: 520px !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* --------------------------------------------------------------------------
   Vorschlagsliste im Sticky-Kopf und im Hamburger-Menue
   --------------------------------------------------------------------------
   Beide bauen ihr Suchfeld selbst (js/header.js, js/csmenu.js) und haben
   keinen .search__wrapper. Die Liste haengt dort direkt am <form>. Im
   Sticky-Kopf ist das Eingabefeld nur 120px breit — die Liste braucht dort
   eine eigene Breite, sonst waere sie unlesbar schmal.
   -------------------------------------------------------------------------- */

.csh-sb-search,
.oc-search {
  position: relative;
}

.csh-sb-search .cssu {
  left: auto;
  right: 0;
  width: 420px;
  max-width: calc(100vw - 24px);
}

/* Im Menue nimmt die Liste die Breite des Menues — dort ist Platz. */
.oc-search .cssu {
  left: 0;
  right: 0;
  max-height: min(60vh, 400px);
}

/* --------------------------------------------------------------------------
   Sicherheitsnetz auf der Ergebnisseite
   -------------------------------------------------------------------------- */

.cssu-hinweis {
  margin: 8px 0 16px;
  padding: 10px 14px;
  background: #eef3e3;
  border-left: 3px solid #8da174;
  border-radius: 6px;
  font-size: .95rem;
  color: #2f3e46;
}

.cssu-hinweis a {
  color: #46591f;
  text-decoration: underline;
}

.cssu-rettung {
  margin: 0 0 28px;
  padding: 18px;
  background: #f7f9f3;
  border: 1px solid #e7ebe0;
  border-radius: 12px;
}

.cssu-rettung__kopf {
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #2f3e46;
}

.cssu-rettung__kopf a {
  color: #46591f;
  text-decoration: underline;
}

.cssu-rettung__hilfe {
  margin: 0;
  font-size: .95rem;
  color: #6a7b59;
}

.cssu-rettung__hilfe a {
  font-weight: 700;
  color: #46591f;
  white-space: nowrap;
}

.cssu-rettung__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.cssu-rettung__karte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e7ebe0;
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.cssu-rettung__karte:hover {
  border-color: #8da174;
  box-shadow: 0 4px 14px rgba(47, 62, 70, .1);
  text-decoration: none;
}

.cssu-rettung__karte img {
  width: 100%;
  height: 110px;
  object-fit: contain;
}

.cssu-rettung__leer {
  display: block;
  width: 100%;
  height: 110px;
  background: #eef3e3;
  border-radius: 6px;
}

.cssu-rettung__name {
  font-size: .95rem;
  line-height: 1.3;
  color: #2f3e46;
}

.cssu-rettung__preis {
  margin-top: auto;
  font-size: 1rem;
  font-weight: 700;
  color: #2f3e46;
}
/* ===== ENDE PRODUKTSUCHE ===== */