/* ============================================================
   StiefCon Skin - Divi- und WooCommerce-Ueberschreibungen
   Greift nur bei body.sc-skin (setzt das Plugin). Farben, Schriften,
   Knoepfe, Kopfzeile, Footer kommen aus basis.css (Startseite).

   Warum so viel !important: Divi schreibt pro Modul eigene Regeln mit
   hoher Spezifitaet (.et_pb_section_0_tb_body.et_pb_section ...), teils
   selbst mit !important. Dagegen hilft nur Gleiches mit Gleichem.
   ============================================================ */

/* ---------- 1. Seite und Divi-Rahmen ---------- */

html:has(body.sc-skin) { background: #05070d; }
body.sc-skin {
  background: var(--bg) !important;
  color: var(--fg) !important;
  font-family: var(--body) !important;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.sc-skin #page-container { padding-top: 0 !important; background: transparent !important; }
body.sc-skin #et-main-area,
body.sc-skin #main-content,
body.sc-skin .et-l--body,
body.sc-skin .et_builder_inner_content { background: transparent !important; }

/* Divi-Kopf, -Fuss und Reste verschwinden; Kopfzeile und Footer kommen aus dem Plugin */
body.sc-skin header.et-l--header,
body.sc-skin footer.et-l--footer,
body.sc-skin #main-header,
body.sc-skin #top-header,
body.sc-skin #main-footer,
body.sc-skin .et_pb_scroll_top,
body.sc-skin .et_mobile_menu,
body.sc-skin .dipi_mobile_menu,
body.sc-skin #moove_gdpr_cookie_info_bar,
body.sc-skin #moove_gdpr_cookie_modal { display: none !important; }

/* Eingeloggt sitzt die WP-Leiste oben - der sticky Kopf rutscht darunter */
body.sc-skin.admin-bar .sc-kopf { top: 32px; }
@media (max-width: 782px) { body.sc-skin.admin-bar .sc-kopf { top: 46px; } }

/* Divi-Container werden durchsichtig und bekommen das Raster der Startseite */
body.sc-skin #page-container #et-boc .et_pb_section { background: transparent !important; background-image: none !important; padding: 0 !important; }
body.sc-skin #page-container #et-boc .et_pb_row {
  width: auto !important;
  max-width: var(--wrap) !important;
  margin: 0 auto !important;
  padding: 0 var(--gutter) !important;
}
body.sc-skin #page-container #et-boc .et_pb_column,
body.sc-skin #page-container #et-boc .et_pb_module,
body.sc-skin #page-container #et-boc .et_pb_module_inner { background: transparent !important; background-image: none !important; }
body.sc-skin #page-container #et-boc .et_pb_with_border { border: 0 !important; }

/* Seitenkopf (Shop / Warenkorb / Kasse / Mein Konto): aus dem schwarzen
   Balken wird der Sektionskopf der Startseite - links, mit Kicker */
body.sc-skin:not(.single-product) #page-container #et-boc .et_pb_section_0_tb_body { padding: 44px 0 26px !important; }
body.sc-skin:not(.single-product) #page-container #et-boc .et_pb_section_0_tb_body .et_pb_text { text-align: left !important; }
body.sc-skin:not(.single-product) #page-container #et-boc .et_pb_section_0_tb_body .et_pb_text_inner::before {
  content: "StiefCon · Shop";
  display: block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
}
body.sc-skin:not(.single-product) #page-container #et-boc .et_pb_section_1_tb_body { padding: 0 0 90px !important; }
body.sc-skin.single-product #page-container #et-boc .et_pb_section_0_tb_body { padding: 34px 0 90px !important; }

/* ---------- 2. Typografie ---------- */

body.sc-skin #page-container #et-boc h1,
body.sc-skin #page-container #et-boc h2,
body.sc-skin #page-container #et-boc h3,
body.sc-skin #page-container #et-boc h4,
body.sc-skin #page-container #et-boc h5 {
  font-family: var(--display) !important;
  color: var(--fg) !important;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  padding: 0;
}
body.sc-skin #page-container #et-boc .et_pb_text,
body.sc-skin #page-container #et-boc .et_pb_text_inner { color: var(--fg-soft) !important; font-size: 16px; line-height: 1.65; }
body.sc-skin #page-container #et-boc .et_pb_text_inner h1 { font-size: clamp(34px, 5vw, 54px); letter-spacing: -.03em; margin: 0 0 10px; }
body.sc-skin #page-container #et-boc .et_pb_text_inner p { margin: 0; font-size: 17px; color: var(--fg-mut-2) !important; }
body.sc-skin #page-container #et-boc p { color: inherit; }

/* ---------- 3. Knoepfe ---------- */

body.sc-skin #page-container #et-boc .button,
body.sc-skin #page-container #et-boc button.button,
body.sc-skin #page-container #et-boc input[type="submit"],
body.sc-skin #page-container #et-boc .et_pb_button,
body.sc-skin #page-container #et-boc a.et_pb_button,
body.sc-skin #page-container #et-boc .woocommerce-button,
body.sc-skin #page-container #et-boc .wc-forward {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px !important;
  border-radius: 11px !important;
  border: 1px solid var(--line-8) !important;
  background: rgba(255,255,255,.03) !important;
  color: var(--fg) !important;
  font-family: var(--body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, transform .3s ease, color .3s ease;
}
body.sc-skin #page-container #et-boc .button:hover,
body.sc-skin #page-container #et-boc button.button:hover,
body.sc-skin #page-container #et-boc input[type="submit"]:hover,
body.sc-skin #page-container #et-boc .et_pb_button:hover { border-color: rgba(255,255,255,.3) !important; color: var(--fg) !important; background: rgba(255,255,255,.05) !important; }
body.sc-skin #page-container #et-boc .et_pb_button::after { display: none !important; }

/* Orange = Handlung: in den Warenkorb, zur Kasse, bestellen.
   Die Grundregel oben nennt auch "button.button" - Element plus Klasse, also
   (2,2,2). Ein reines ".single_add_to_cart_button" (2,1,1) verliert dagegen,
   egal wie spaet es steht. Deshalb hier ebenfalls Element plus zwei Klassen. */
body.sc-skin #page-container #et-boc button.button.single_add_to_cart_button,
body.sc-skin #page-container #et-boc a.button.single_add_to_cart_button,
body.sc-skin #page-container #et-boc .single_add_to_cart_button,
body.sc-skin #page-container #et-boc a.button.checkout-button,
body.sc-skin #page-container #et-boc .checkout-button,
body.sc-skin #page-container #et-boc button#place_order,
body.sc-skin #page-container #et-boc #place_order,
body.sc-skin #page-container #et-boc .wc-proceed-to-checkout a.button,
body.sc-skin #page-container #et-boc .et_pb_wc_description a[href*="add-to-cart"] {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: var(--on-orange) !important;
}
body.sc-skin #page-container #et-boc button.button.single_add_to_cart_button:hover,
body.sc-skin #page-container #et-boc a.button.single_add_to_cart_button:hover,
body.sc-skin #page-container #et-boc .single_add_to_cart_button:hover,
body.sc-skin #page-container #et-boc a.button.checkout-button:hover,
body.sc-skin #page-container #et-boc .checkout-button:hover,
body.sc-skin #page-container #et-boc button#place_order:hover,
body.sc-skin #page-container #et-boc #place_order:hover,
body.sc-skin #page-container #et-boc .wc-proceed-to-checkout a.button:hover,
body.sc-skin #page-container #et-boc .et_pb_wc_description a[href*="add-to-cart"]:hover {
  background: var(--orange-hover) !important;
  border-color: var(--orange-hover) !important;
  color: var(--on-orange) !important;
  transform: translateY(-1px);
}
body.sc-skin #page-container #et-boc .button.disabled,
body.sc-skin #page-container #et-boc .button:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

/* ---------- 4. Formulare ---------- */

body.sc-skin #page-container #et-boc input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.sc-skin #page-container #et-boc select,
body.sc-skin #page-container #et-boc textarea,
body.sc-skin #page-container #et-boc .select2-container--default .select2-selection--single {
  width: 100%;
  padding: 13px 14px !important;
  border-radius: 10px !important;
  border: 1px solid var(--line-7) !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--fg) !important;
  font-family: var(--body) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  height: auto !important;
  box-shadow: none !important;
  outline: none;
  transition: border-color .3s ease;
}
body.sc-skin #page-container #et-boc input:focus,
body.sc-skin #page-container #et-boc select:focus,
body.sc-skin #page-container #et-boc textarea:focus,
body.sc-skin #page-container #et-boc .select2-container--default.select2-container--open .select2-selection--single { border-color: rgba(46,230,200,.6) !important; }
body.sc-skin ::placeholder { color: var(--fg-faint-2) !important; opacity: 1; }
body.sc-skin #page-container #et-boc select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a7b0c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}
body.sc-skin #page-container #et-boc .select2-container { width: 100% !important; }
body.sc-skin #page-container #et-boc .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--fg) !important; line-height: 1.4 !important; padding: 0 !important; }
body.sc-skin #page-container #et-boc .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50% !important; right: 12px !important; transform: translateY(-50%); height: auto !important; }
body.sc-skin #page-container #et-boc .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--fg-mut) transparent transparent transparent !important; }
body.sc-skin .select2-dropdown {
  background: #0a0e18 !important;
  border: 1px solid var(--line-7) !important;
  border-radius: 12px !important;
  overflow: hidden;
  color: var(--fg);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8);
}
body.sc-skin .select2-results__option { padding: 10px 14px !important; }
body.sc-skin .select2-container--default .select2-results__option--highlighted[aria-selected] { background: rgba(46,230,200,.16) !important; color: var(--fg) !important; }
body.sc-skin .select2-container--default .select2-results__option[aria-selected="true"] { background: rgba(255,255,255,.06) !important; }
body.sc-skin .select2-search--dropdown { padding: 8px !important; }
body.sc-skin .select2-search--dropdown .select2-search__field { padding: 10px 12px !important; }
body.sc-skin #page-container #et-boc label { color: var(--fg-mut) !important; font-size: 13.5px; }
body.sc-skin #page-container #et-boc .form-row { margin: 0 0 14px !important; padding: 0 !important; }
body.sc-skin #page-container #et-boc .form-row label { display: block; margin-bottom: 6px; }
body.sc-skin #page-container #et-boc .form-row .required { color: var(--orange) !important; text-decoration: none; }
body.sc-skin #page-container #et-boc .form-row .optional { color: var(--fg-faint-2); }
body.sc-skin #page-container #et-boc input[type="checkbox"],
body.sc-skin #page-container #et-boc input[type="radio"] {
  accent-color: var(--teal);
  width: 18px; height: 18px;
  margin: 0 9px 0 0 !important;
  vertical-align: middle;
  flex: none;
}
body.sc-skin #page-container #et-boc .woocommerce-form__label-for-checkbox,
body.sc-skin #page-container #et-boc label.checkbox { display: flex !important; align-items: flex-start; gap: 4px; color: var(--fg-soft) !important; font-size: 14px; line-height: 1.55; }
body.sc-skin #page-container #et-boc .woocommerce-form__label-for-checkbox input { margin-top: 2px !important; }

/* ---------- 5. Hinweise ---------- */

body.sc-skin #page-container #et-boc .woocommerce-message,
body.sc-skin #page-container #et-boc .woocommerce-info,
body.sc-skin #page-container #et-boc .woocommerce-error,
body.sc-skin #page-container #et-boc .woocommerce-notice,
body.sc-skin #page-container #et-boc .woocommerce-NoticeGroup ul {
  background: rgba(46,230,200,.06) !important;
  border: 1px solid rgba(46,230,200,.25) !important;
  border-radius: 12px !important;
  color: var(--fg-soft) !important;
  padding: 14px 16px !important;
  margin: 0 0 18px !important;
  font-size: 14.5px;
  line-height: 1.55;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
body.sc-skin #page-container #et-boc .woocommerce-error { background: rgba(255,109,0,.08) !important; border-color: rgba(255,109,0,.4) !important; }
body.sc-skin #page-container #et-boc .woocommerce-message::before,
body.sc-skin #page-container #et-boc .woocommerce-info::before,
body.sc-skin #page-container #et-boc .woocommerce-error::before { display: none !important; }
body.sc-skin #page-container #et-boc .woocommerce-message a,
body.sc-skin #page-container #et-boc .woocommerce-info a,
body.sc-skin #page-container #et-boc .woocommerce-error a { color: var(--teal) !important; }
body.sc-skin #page-container #et-boc .woocommerce-message .button { margin: 0 0 0 auto !important; padding: 10px 16px !important; font-size: 14px !important; }
body.sc-skin #page-container #et-boc .woocommerce-form-coupon-toggle .woocommerce-info,
body.sc-skin #page-container #et-boc .woocommerce-form-login-toggle .woocommerce-info { background: rgba(255,255,255,.03) !important; border-color: var(--line-5) !important; }

/* ---------- 6. Tabellen (Warenkorb, Bestelluebersicht, Bestellungen) ---------- */

body.sc-skin #page-container #et-boc table.shop_table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid var(--line-5) !important;
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  overflow: hidden;
  margin: 0 0 18px !important;
}
body.sc-skin #page-container #et-boc table.shop_table th,
body.sc-skin #page-container #et-boc table.shop_table td { border: 0 !important; border-bottom: 1px solid var(--line-2) !important; padding: 14px 16px !important; text-align: left; vertical-align: middle; }
body.sc-skin #page-container #et-boc table.shop_table th {
  font-family: var(--mono) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim) !important;
  background: rgba(255,255,255,.02);
}
body.sc-skin #page-container #et-boc table.shop_table td { color: var(--fg-soft) !important; font-size: 15px; }
body.sc-skin #page-container #et-boc table.shop_table tr:last-child td,
body.sc-skin #page-container #et-boc table.shop_table tr:last-child th { border-bottom: 0 !important; }
body.sc-skin #page-container #et-boc table.shop_table tfoot th { background: transparent; }
body.sc-skin #page-container #et-boc table.shop_table .product-name a { color: var(--fg) !important; font-weight: 600; }
body.sc-skin #page-container #et-boc table.shop_table .product-thumbnail img { width: 64px; height: auto; border-radius: 10px; }
body.sc-skin #page-container #et-boc table.shop_table .product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-5);
  color: var(--fg-dim) !important;
  background: transparent !important;
  font-size: 18px; line-height: 1;
}
body.sc-skin #page-container #et-boc table.shop_table .product-remove a.remove:hover { color: var(--fg) !important; background: rgba(255,109,0,.15) !important; border-color: rgba(255,109,0,.4); }
body.sc-skin #page-container #et-boc table.shop_table .amount { color: var(--fg) !important; font-weight: 600; }
body.sc-skin #page-container #et-boc table.shop_table .order-total .amount,
body.sc-skin #page-container #et-boc table.shop_table .order-total th { font-family: var(--display) !important; font-size: 20px !important; color: var(--fg) !important; text-transform: none; letter-spacing: -.01em; }
body.sc-skin #page-container #et-boc .quantity input.qty { width: 78px; text-align: center; }
body.sc-skin #page-container #et-boc table.shop_table .wc-gzd-additional-info,
body.sc-skin #page-container #et-boc table.shop_table .woocommerce-price-suffix,
body.sc-skin #page-container #et-boc table.shop_table .tax-label { font-family: var(--mono) !important; font-size: 11.5px !important; color: var(--fg-faint) !important; font-weight: 400; }

/* ---------- 7. Shop-Uebersicht und Produktkarten ---------- */

body.sc-skin #page-container #et-boc .woocommerce-result-count {
  margin: 0 0 18px !important;
  font-family: var(--mono) !important;
  font-size: 11.5px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-faint-2) !important;
}
body.sc-skin #page-container #et-boc .woocommerce-ordering { margin: 0 0 18px !important; }
body.sc-skin #page-container #et-boc .woocommerce-ordering select { width: auto; min-width: 220px; padding: 10px 40px 10px 14px !important; font-size: 14px !important; }

body.sc-skin #page-container #et-boc ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(212px, 100%), 1fr)) !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
body.sc-skin #page-container #et-boc ul.products::before,
body.sc-skin #page-container #et-boc ul.products::after { display: none !important; }
body.sc-skin #page-container #et-boc ul.products li.product {
  position: relative;
  width: auto !important;
  margin: 0 !important;
  padding: 14px !important;
  float: none !important;
  clear: none !important;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid var(--line-5);
  background: rgba(255,255,255,.03);
  transition: border-color .3s ease, transform .3s ease;
}
body.sc-skin #page-container #et-boc ul.products li.product:hover { border-color: rgba(46,230,200,.55); transform: translateY(-3px); }
body.sc-skin #page-container #et-boc ul.products li.product .et_shop_image,
body.sc-skin #page-container #et-boc ul.products li.product img { width: 100%; height: auto; border-radius: 12px; display: block; }
body.sc-skin #page-container #et-boc ul.products li.product .et_overlay { display: none !important; }
body.sc-skin #page-container #et-boc ul.products li.product h2,
body.sc-skin #page-container #et-boc ul.products li.product h3,
body.sc-skin #page-container #et-boc ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--display) !important;
  font-size: 16.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em;
  color: var(--fg) !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}
body.sc-skin #page-container #et-boc ul.products li.product .price {
  margin-top: auto !important;
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-family: var(--display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--fg) !important;
}
body.sc-skin #page-container #et-boc ul.products li.product .price del { font-size: 13px; }
body.sc-skin #page-container #et-boc ul.products li.product .price .woocommerce-price-suffix,
body.sc-skin #page-container #et-boc ul.products li.product .wc-gzd-additional-info,
body.sc-skin #page-container #et-boc ul.products li.product .price-unit,
body.sc-skin #page-container #et-boc ul.products li.product .tax-info,
body.sc-skin #page-container #et-boc ul.products li.product .shipping-costs-info { flex-basis: 100%; }
body.sc-skin #page-container #et-boc ul.products li.product .button { margin-top: 12px !important; width: 100%; }
body.sc-skin #page-container #et-boc ul.products li.product .added_to_cart { display: block; margin-top: 8px; font-size: 13px; }

/* Angebotsetikett */
body.sc-skin #page-container #et-boc .onsale {
  position: absolute !important;
  top: 22px !important; left: 22px !important; right: auto !important;
  z-index: 2;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: var(--teal) !important;
  color: #05070d !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1 !important;
  min-height: 0 !important; min-width: 0 !important;
  margin: 0 !important;
}

/* Preise ueberall: gestrichener Altpreis dezent, Neupreis ohne Unterstrich */
body.sc-skin #page-container #et-boc .price del,
body.sc-skin #page-container #et-boc del .amount { color: var(--fg-faint-2) !important; font-weight: 400 !important; text-decoration: line-through; opacity: 1 !important; }
body.sc-skin #page-container #et-boc .price ins { text-decoration: none !important; background: none !important; }
body.sc-skin #page-container #et-boc .price ins .amount { color: var(--fg) !important; }

/* ---------- 8. Produktseite ---------- */

/* Das Produktbild klebt beim Scrollen (Nachtrag 04.09., siehe Abschnitt 16 e). */
body.sc-skin #page-container #et-boc .woocommerce-product-gallery {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line-5);
  background: rgba(255,255,255,.03);
}
body.sc-skin #page-container #et-boc .woocommerce-product-gallery img { width: 100%; height: auto; display: block; }
body.sc-skin #page-container #et-boc .woocommerce-product-gallery__trigger { display: none !important; }
body.sc-skin #page-container #et-boc .flex-control-thumbs { padding: 10px !important; margin: 0 !important; display: flex; gap: 8px; }
body.sc-skin #page-container #et-boc .flex-control-thumbs li { width: 64px !important; float: none !important; margin: 0 !important; }
body.sc-skin #page-container #et-boc .flex-control-thumbs img { border-radius: 8px; opacity: .55; }
body.sc-skin #page-container #et-boc .flex-control-thumbs img.flex-active { opacity: 1; }

body.sc-skin #page-container #et-boc .et_pb_wc_breadcrumb {
  margin: 0 0 18px !important;
  font-family: var(--mono) !important;
  font-size: 11.5px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim) !important;
}
body.sc-skin #page-container #et-boc .et_pb_wc_breadcrumb * { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_breadcrumb a:hover { color: var(--teal) !important; }

body.sc-skin #page-container #et-boc .et_pb_wc_title h1 {
  font-size: clamp(30px, 3.6vw, 44px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.03em;
  margin: 0 0 18px !important;
}

/* Reihenfolge in der rechten Spalte: Kurzbeschreibung, Preis, Kaufknopf,
   Meta - und erst dann die lange Verkaufsbeschreibung. Im Original steht
   der Kaufknopf unter 7.000 Pixeln Text. */
body.sc-skin #page-container #et-boc .et_pb_column:has(> .et_pb_wc_title) { display: flex; flex-direction: column; }
body.sc-skin #page-container #et-boc .et_pb_column:has(> .et_pb_wc_title) > * { order: 0; }
body.sc-skin #page-container #et-boc .et_pb_wc_add_to_cart { order: 5 !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_meta { order: 6 !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_description_1_tb_body { order: 9 !important; }

body.sc-skin #page-container #et-boc .et_pb_wc_price { margin: 6px 0 0 !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_price .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-family: var(--display) !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  color: var(--fg) !important;
  line-height: 1.1;
  margin: 0 !important;
}
body.sc-skin #page-container #et-boc .et_pb_wc_price .price del { font-size: 20px; }
body.sc-skin #page-container #et-boc .et_pb_wc_price .woocommerce-price-suffix,
body.sc-skin #page-container #et-boc .et_pb_wc_price .wc-gzd-additional-info,
body.sc-skin #page-container #et-boc .legal-price-info,
body.sc-skin #page-container #et-boc .legal-price-info * {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .04em;
  color: var(--fg-faint) !important;
}
body.sc-skin #page-container #et-boc .legal-price-info { margin: 6px 0 4px !important; display: flex; flex-wrap: wrap; gap: 4px 14px; }

body.sc-skin #page-container #et-boc .et_pb_wc_add_to_cart { margin: 12px 0 0 !important; }
body.sc-skin #page-container #et-boc form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 !important; }
body.sc-skin #page-container #et-boc form.cart .quantity { margin: 0 !important; float: none !important; }
body.sc-skin #page-container #et-boc form.cart .single_add_to_cart_button { flex: 1 1 260px; padding: 17px 26px !important; font-size: 16px !important; margin: 0 !important; float: none !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_add_to_cart .wc-gzd-additional-info,
body.sc-skin #page-container #et-boc .et_pb_wc_add_to_cart .delivery-time-info,
body.sc-skin #page-container #et-boc .et_pb_wc_add_to_cart .shipping-costs-info,
body.sc-skin #page-container #et-boc .et_pb_wc_add_to_cart .product-units,
body.sc-skin #page-container #et-boc .et_pb_wc_add_to_cart .legal-price-info { flex-basis: 100%; margin: 4px 0 0 !important; font-family: var(--mono) !important; font-size: 12px !important; color: var(--fg-faint) !important; }

body.sc-skin #page-container #et-boc .et_pb_wc_meta {
  margin: 16px 0 0 !important;
  font-family: var(--mono) !important;
  font-size: 11.5px !important;
  letter-spacing: .04em;
  color: var(--fg-faint-2) !important;
}
body.sc-skin #page-container #et-boc .et_pb_wc_meta * { font-family: inherit !important; font-size: inherit !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_meta a { color: var(--fg-dim) !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_meta a:hover { color: var(--teal) !important; }
body.sc-skin #page-container #et-boc .product_meta > span { display: block; margin-bottom: 6px; }
/* 20 Schlagwort-Links unter dem Kaufknopf sind Rauschen fuer den Kaeufer */
body.sc-skin #page-container #et-boc .product_meta .tagged_as { display: none !important; }

/* Beschreibungen: die Inhalte sind mit Inline-Styles fuer weissen Grund
   geschrieben (weisse Karten, goldene Etiketten, ein dunkler Verlaufskasten).
   Die Attribut-Selektoren unten lenken genau dieses Vokabular auf die
   Startseiten-Palette um - ohne die Inhalte anzufassen. */
body.sc-skin #page-container #et-boc .et_pb_wc_description { color: var(--fg-soft) !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_description .et_pb_module_inner > div { margin: 0 !important; max-width: none !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_description_0_tb_body { margin: 0 0 4px !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_description_1_tb_body { margin: 44px 0 0 !important; padding-top: 36px; border-top: 1px solid var(--line-3); }
body.sc-skin #page-container #et-boc .et_pb_wc_description * { font-family: var(--body) !important; box-shadow: none !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_description p,
body.sc-skin #page-container #et-boc .et_pb_wc_description li,
body.sc-skin #page-container #et-boc .et_pb_wc_description span,
body.sc-skin #page-container #et-boc .et_pb_wc_description div { color: var(--fg-soft) !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_description p { font-size: 16px !important; line-height: 1.65 !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_description li { line-height: 1.55; }
body.sc-skin #page-container #et-boc .et_pb_wc_description strong { color: var(--fg) !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_description h2,
body.sc-skin #page-container #et-boc .et_pb_wc_description h3,
body.sc-skin #page-container #et-boc .et_pb_wc_description h4 {
  font-family: var(--display) !important;
  color: var(--fg) !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em;
  margin: 0 0 14px !important;
}
body.sc-skin #page-container #et-boc .et_pb_wc_description h2 br { display: none; }
/* Weisse und hellblaue Karten */
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="background:#ffffff"],
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="background:#f8fbff"],
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="background: #ffffff"],
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="background: #f8fbff"] {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--line-5) !important;
}
/* Dunkle Kaesten (Preis, Kernnutzen) */
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="background:#071421"],
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="background: #071421"] {
  background: rgba(46,230,200,.07) !important;
  border: 1px solid rgba(46,230,200,.28) !important;
}
/* Verlaufskasten oben in der Langbeschreibung */
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="background:linear-gradient"],
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="background: linear-gradient"] {
  background: linear-gradient(150deg, rgba(46,230,200,.12), rgba(109,94,252,.16) 60%, rgba(5,7,13,.3)) !important;
  border: 1px solid rgba(46,230,200,.24) !important;
}
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="background:rgba(255,255,255,0.08)"] { background: rgba(255,255,255,.05) !important; border-color: var(--line-6) !important; }
/* Gelbe Hinweiskaesten */
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="background:#fff9e8"],
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="background: #fff9e8"] {
  background: rgba(255,109,0,.07) !important;
  border: 1px solid rgba(255,109,0,.32) !important;
}
/* Goldene Etiketten werden zu Kicker-Chips */
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="background:#f3ead2"],
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="background: #f3ead2"] {
  background: rgba(46,230,200,.1) !important;
  border: 1px solid rgba(46,230,200,.35) !important;
  color: var(--teal) !important;
  font-family: var(--mono) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
}
/* Textfarben aus dem Vokabular */
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="color:#526174"] { color: var(--fg-mut-2) !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="color:#f4d47c"] { color: var(--teal-lite) !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="color:#d8ccff"],
body.sc-skin #page-container #et-boc .et_pb_wc_description [style*="color:#e6ddff"] { color: var(--fg-mut) !important; }
/* Kaufknopf mitten im Text */
body.sc-skin #page-container #et-boc .et_pb_wc_description a[href*="add-to-cart"] {
  display: inline-flex !important;
  align-items: center;
  padding: 15px 24px !important;
  border-radius: 11px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Aehnliche Produkte / Upsells */
body.sc-skin #page-container #et-boc .et_pb_wc_related_products,
body.sc-skin #page-container #et-boc .et_pb_wc_upsells { margin: 70px 0 0 !important; padding-top: 40px; border-top: 1px solid var(--line-3); }
body.sc-skin #page-container #et-boc .et_pb_wc_related_products h2,
body.sc-skin #page-container #et-boc .et_pb_wc_upsells h2 { font-size: 26px !important; margin: 0 0 22px !important; }

/* ---------- 9. Warenkorb ---------- */

body.sc-skin #page-container #et-boc .et_pb_wc_cart_totals .et_pb_module_inner,
body.sc-skin #page-container #et-boc .cart_totals {
  padding: 24px;
  border-radius: 20px;
  border: 1px solid var(--line-5);
  background: rgba(255,255,255,.025);
  position: sticky; top: 100px;
}
body.sc-skin #page-container #et-boc .cart_totals { padding: 0; border: 0; background: transparent; position: static; }
body.sc-skin #page-container #et-boc .cart_totals h2 { font-size: 22px !important; margin: 0 0 16px !important; }
body.sc-skin #page-container #et-boc .cart_totals table.shop_table { background: transparent; border: 0 !important; margin: 0 0 14px !important; }
body.sc-skin #page-container #et-boc .cart_totals table.shop_table th,
body.sc-skin #page-container #et-boc .cart_totals table.shop_table td { padding: 12px 0 !important; }
body.sc-skin #page-container #et-boc .wc-proceed-to-checkout { padding: 0 !important; }
body.sc-skin #page-container #et-boc .wc-proceed-to-checkout a.button { display: flex; width: 100%; padding: 17px 24px !important; font-size: 16px !important; }
body.sc-skin #page-container #et-boc .woocommerce-cart-form .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
body.sc-skin #page-container #et-boc .woocommerce-cart-form .coupon { display: flex; gap: 10px; flex: 1 1 320px; }
body.sc-skin #page-container #et-boc .woocommerce-cart-form .coupon input { width: auto !important; flex: 1; }
body.sc-skin #page-container #et-boc .woocommerce-cart-form .coupon label { display: none; }
body.sc-skin #page-container #et-boc .woocommerce-cart-form button[name="update_cart"] { margin-left: auto; }
body.sc-skin #page-container #et-boc .cart-empty,
body.sc-skin #page-container #et-boc .wc-empty-cart-message { font-size: 18px; color: var(--fg-mut) !important; }
body.sc-skin #page-container #et-boc .return-to-shop { margin-top: 18px; }

/* ---------- 10. Kasse ---------- */

body.sc-skin #page-container #et-boc .et_pb_wc_checkout_billing,
body.sc-skin #page-container #et-boc .et_pb_wc_checkout_shipping,
body.sc-skin #page-container #et-boc .et_pb_wc_checkout_additional_info,
body.sc-skin #page-container #et-boc .et_pb_wc_checkout_order_details,
body.sc-skin #page-container #et-boc .et_pb_wc_checkout_payment_info {
  padding: 26px !important;
  border-radius: 20px;
  border: 1px solid var(--line-5) !important;
  background: rgba(255,255,255,.025) !important;
  margin: 0 0 18px !important;
}
body.sc-skin #page-container #et-boc .et_pb_wc_checkout_shipping:empty,
body.sc-skin #page-container #et-boc .et_pb_wc_checkout_shipping .et_pb_module_inner:empty { display: none; }
body.sc-skin #page-container #et-boc .et_pb_wc_cart_notice { margin: 0 0 6px !important; padding: 0 !important; }
body.sc-skin #page-container #et-boc .woocommerce-checkout h3,
body.sc-skin #page-container #et-boc .woocommerce-checkout h2 { font-size: 20px !important; margin: 0 0 18px !important; }
body.sc-skin #page-container #et-boc .woocommerce-billing-fields__field-wrapper,
body.sc-skin #page-container #et-boc .woocommerce-shipping-fields__field-wrapper,
body.sc-skin #page-container #et-boc .woocommerce-additional-fields__field-wrapper { display: flow-root; }
body.sc-skin #page-container #et-boc .woocommerce-checkout .form-row-first,
body.sc-skin #page-container #et-boc .woocommerce-checkout .form-row-last { width: 48% !important; }
body.sc-skin #page-container #et-boc .woocommerce-checkout .form-row-wide { clear: both; }
body.sc-skin #page-container #et-boc .woocommerce-account-fields .create-account { margin-top: 6px; }
body.sc-skin #page-container #et-boc .woocommerce-privacy-policy-text,
body.sc-skin #page-container #et-boc .woocommerce-privacy-policy-text p,
body.sc-skin #page-container #et-boc .wc-gzd-checkbox-placeholder,
body.sc-skin #page-container #et-boc .woocommerce-terms-and-conditions-wrapper { font-size: 13px; color: var(--fg-faint) !important; line-height: 1.55; }
body.sc-skin #page-container #et-boc .woocommerce-privacy-policy-text a { color: var(--teal) !important; }

body.sc-skin #page-container #et-boc #order_review table.shop_table { background: transparent; border: 0 !important; margin: 0 !important; }
body.sc-skin #page-container #et-boc #order_review table.shop_table th,
body.sc-skin #page-container #et-boc #order_review table.shop_table td { padding: 12px 0 !important; }
body.sc-skin #page-container #et-boc #order_review table.shop_table thead th { padding-top: 0 !important; }
body.sc-skin #page-container #et-boc #order_review .product-name { color: var(--fg) !important; font-weight: 500; }
body.sc-skin #page-container #et-boc #order_review .product-quantity { color: var(--fg-faint-2); font-weight: 400; }
body.sc-skin #page-container #et-boc #order_review .product-total,
body.sc-skin #page-container #et-boc #order_review .cart-subtotal td,
body.sc-skin #page-container #et-boc #order_review .order-total td { text-align: right; }
body.sc-skin #page-container #et-boc #order_review td.product-total .amount { font-weight: 500; }

body.sc-skin #page-container #et-boc #payment { background: transparent !important; border-radius: 0; }
body.sc-skin #page-container #et-boc #payment ul.wc_payment_methods { list-style: none; margin: 0 !important; padding: 0 !important; border: 0 !important; }
body.sc-skin #page-container #et-boc #payment li.wc_payment_method { padding: 12px 0 !important; border-bottom: 1px solid var(--line-3); }
body.sc-skin #page-container #et-boc #payment li.wc_payment_method:last-child { border-bottom: 0; }
body.sc-skin #page-container #et-boc #payment li.wc_payment_method > label { display: inline-flex; align-items: center; gap: 8px; color: var(--fg) !important; font-weight: 600; font-size: 15px; }
body.sc-skin #page-container #et-boc #payment li.wc_payment_method > label img { max-height: 22px; width: auto; }
body.sc-skin #page-container #et-boc #payment div.payment_box {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--line-5);
  border-radius: 12px;
  padding: 16px !important;
  margin: 12px 0 0 !important;
  color: var(--fg-mut-2) !important;
  font-size: 14px;
}
body.sc-skin #page-container #et-boc #payment div.payment_box::before { display: none !important; }
body.sc-skin #page-container #et-boc #payment div.payment_box p { color: var(--fg-mut-2) !important; margin: 0 0 8px; font-size: 14px; }
body.sc-skin #page-container #et-boc .wcpay-upe-element,
body.sc-skin #page-container #et-boc #wcpay-upe-element,
body.sc-skin #page-container #et-boc #wcpay-card-element,
body.sc-skin #page-container #et-boc .wcpay-card-element,
body.sc-skin #page-container #et-boc .wc-stripe-elements-field,
body.sc-skin #page-container #et-boc .StripeElement {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--line-7) !important;
  border-radius: 10px !important;
  padding: 12px !important;
}
body.sc-skin #page-container #et-boc .place-order { padding: 0 !important; margin-top: 18px; }
body.sc-skin #page-container #et-boc #place_order { display: flex; width: 100%; padding: 17px 24px !important; font-size: 16px !important; margin: 0 !important; }
body.sc-skin #page-container #et-boc .woocommerce-checkout .legal,
body.sc-skin #page-container #et-boc .woocommerce-checkout .wc-gzd-legal-checkbox,
body.sc-skin #page-container #et-boc .woocommerce-checkout .form-row.legal { margin: 0 0 12px !important; }
body.sc-skin #page-container #et-boc .woocommerce-gzd-legal-checkbox-text,
body.sc-skin #page-container #et-boc .wc-gzd-legal-checkbox-text,
body.sc-skin #page-container #et-boc .legal label { color: var(--fg-soft) !important; font-size: 13.5px; line-height: 1.45; }
body.sc-skin #page-container #et-boc .legal a,
body.sc-skin #page-container #et-boc .wc-gzd-legal-checkbox-text a { color: var(--teal) !important; text-decoration: underline; text-underline-offset: 3px; }

/* Danke-Seite */
body.sc-skin #page-container #et-boc .woocommerce-order .woocommerce-thankyou-order-received { font-family: var(--display) !important; font-size: 26px; font-weight: 700; color: var(--fg) !important; margin: 0 0 22px; }
body.sc-skin #page-container #et-boc ul.woocommerce-order-overview {
  list-style: none; margin: 0 0 24px !important; padding: 0 !important;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px;
}
body.sc-skin #page-container #et-boc ul.woocommerce-order-overview li {
  border: 1px solid var(--line-5) !important; border-radius: 14px; padding: 14px 16px !important; margin: 0 !important;
  font-family: var(--mono) !important; font-size: 11.5px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint-2) !important;
  float: none !important;
}
body.sc-skin #page-container #et-boc ul.woocommerce-order-overview li strong { display: block; margin-top: 6px; font-family: var(--body) !important; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--fg) !important; }
body.sc-skin #page-container #et-boc .woocommerce-order-downloads a.button,
body.sc-skin #page-container #et-boc .woocommerce-order-downloads .button,
body.sc-skin #page-container #et-boc a.button.woocommerce-MyAccount-downloads-file,
body.sc-skin #page-container #et-boc .woocommerce-MyAccount-downloads-file { background: var(--orange) !important; border-color: var(--orange) !important; color: var(--on-orange) !important; }

/* ---------- 11. Mein Konto ---------- */

body.sc-skin #page-container #et-boc .woocommerce-MyAccount-navigation { float: none !important; width: auto !important; }
body.sc-skin #page-container #et-boc .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
body.sc-skin #page-container #et-boc .woocommerce-MyAccount-navigation li { margin: 0 !important; padding: 0 !important; border: 0 !important; }
body.sc-skin #page-container #et-boc .woocommerce-MyAccount-navigation a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-7);
  background: rgba(255,255,255,.03);
  color: var(--fg-mut) !important;
  font-size: 13.5px;
  text-decoration: none !important;
}
body.sc-skin #page-container #et-boc .woocommerce-MyAccount-navigation li.is-active a { border-color: rgba(46,230,200,.5); color: var(--fg) !important; background: rgba(46,230,200,.08); }
body.sc-skin #page-container #et-boc .woocommerce-MyAccount-content {
  float: none !important; width: auto !important;
  padding: 26px;
  border-radius: 20px;
  border: 1px solid var(--line-5);
  background: rgba(255,255,255,.025);
  color: var(--fg-soft) !important;
}
body.sc-skin #page-container #et-boc .woocommerce-MyAccount-content p { color: var(--fg-soft) !important; }
body.sc-skin #page-container #et-boc .u-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px; }
body.sc-skin #page-container #et-boc .u-columns > div { width: auto !important; float: none !important; }
body.sc-skin #page-container #et-boc form.woocommerce-form-login,
body.sc-skin #page-container #et-boc form.woocommerce-form-register,
body.sc-skin #page-container #et-boc form.woocommerce-ResetPassword,
body.sc-skin #page-container #et-boc form.woocommerce-EditAccountForm,
body.sc-skin #page-container #et-boc .woocommerce-address-fields {
  padding: 26px !important;
  border: 1px solid var(--line-5) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.025);
  margin: 0 !important;
}
body.sc-skin #page-container #et-boc .woocommerce-form-login .lost_password { font-size: 13.5px; margin-top: 10px; }
body.sc-skin #page-container #et-boc .woocommerce-orders-table__cell-order-actions .button { padding: 8px 14px !important; font-size: 13px !important; }
body.sc-skin #page-container #et-boc .woocommerce-Address { padding: 18px; border: 1px solid var(--line-5); border-radius: 14px; }
body.sc-skin #page-container #et-boc .woocommerce-Address-title h3 { font-size: 17px !important; }

/* ---------- 12. Links im Inhalt ---------- */

body.sc-skin #main-content a:not(.button):not(.btn):not(.et_pb_button):not(.linkbtn) { color: var(--teal); }
body.sc-skin #main-content a:not(.button):not(.btn):not(.et_pb_button):not(.linkbtn):hover { color: var(--teal-lite); }

/* ---------- 13. Kopfzeile: Erweiterungen fuer den Shop ---------- */

body.sc-skin .iconbtn--cart { display: inline-flex; align-items: center; justify-content: center; padding: 12px !important; line-height: 0; }
body.sc-skin .sc-kasse-hinweis {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-mut);
}
body.sc-skin .sc-kasse-zurueck { font-size: 14px; color: var(--fg-mut); }
body.sc-skin .sc-kasse-zurueck:hover { color: var(--fg); }
@media (max-width: 639px) {
  body.sc-skin .sc-kasse-hinweis { display: none; }
}

/* ---------- 14. Schmale Schirme ---------- */

@media (max-width: 980px) {
  body.sc-skin #page-container #et-boc .et_pb_row { padding: 0 18px !important; }
  body.sc-skin #page-container #et-boc .et_pb_wc_images { position: static; }
  body.sc-skin #page-container #et-boc .et_pb_wc_images { margin-bottom: 24px !important; }
  body.sc-skin #page-container #et-boc .et_pb_column { margin-bottom: 0 !important; }
  body.sc-skin #page-container #et-boc .et_pb_wc_cart_totals .et_pb_module_inner { position: static; }
  body.sc-skin #page-container #et-boc .et_pb_wc_checkout_payment_info { position: static !important; }
  body.sc-skin #page-container #et-boc .et_pb_wc_price .price { font-size: 32px !important; }
  body.sc-skin #page-container #et-boc .woocommerce-checkout .form-row-first,
body.sc-skin #page-container #et-boc .woocommerce-checkout .form-row-last { width: 100% !important; float: none !important; }
}
@media (max-width: 639px) {
  body.sc-skin:not(.single-product) #page-container #et-boc .et_pb_section_0_tb_body { padding: 28px 0 18px !important; }
  body.sc-skin #page-container #et-boc .et_pb_text_inner h1 { font-size: 32px; }
  body.sc-skin #page-container #et-boc ul.products { grid-template-columns: repeat(auto-fill, minmax(min(156px, 100%), 1fr)) !important; gap: 12px !important; }
  body.sc-skin #page-container #et-boc ul.products li.product { padding: 10px !important; border-radius: 16px; }
  body.sc-skin #page-container #et-boc ul.products li.product h2,
body.sc-skin #page-container #et-boc ul.products li.product .woocommerce-loop-product__title { font-size: 14.5px !important; }
  body.sc-skin #page-container #et-boc ul.products li.product .price { font-size: 17px !important; }
  body.sc-skin #page-container #et-boc .et_pb_wc_checkout_billing,
body.sc-skin #page-container #et-boc .et_pb_wc_checkout_shipping,
body.sc-skin #page-container #et-boc .et_pb_wc_checkout_additional_info,
body.sc-skin #page-container #et-boc .et_pb_wc_checkout_order_details,
body.sc-skin #page-container #et-boc .et_pb_wc_checkout_payment_info,
body.sc-skin #page-container #et-boc .woocommerce-MyAccount-content { padding: 18px !important; border-radius: 16px; }
  body.sc-skin #page-container #et-boc table.shop_table .product-thumbnail { display: none; }
  body.sc-skin #page-container #et-boc .woocommerce-cart-form .coupon { flex: 1 1 100%; }
  body.sc-skin #page-container #et-boc .woocommerce-cart-form button[name="update_cart"] { margin-left: 0; width: 100%; }
}

/* ============================================================
   15. Nachtraege nach der ersten Vorschau (03.09.)
   Divi stellt seine Theme-Builder-Regeln mit ".et-db #et-boc .et-l" voran -
   eine ID, oft mit !important. Deshalb tragen alle Inhaltsregeln in dieser
   Datei zwei IDs (#page-container #et-boc), das setzt tools/spezifitaet.mjs.
   Neue Regeln fuer Inhalte im Divi-Layout immer so schreiben.
   ============================================================ */

/* Rahmen-Container: Divi faerbt #main-content und #et-main-area weiss */
body.sc-skin #page-container,
body.sc-skin #page-container #et-boc,
body.sc-skin #page-container #et-main-area,
body.sc-skin #page-container #main-content,
body.sc-skin #page-container #et-boc #main-content,
body.sc-skin #page-container #et-boc .et-l,
body.sc-skin #page-container #et-boc .et-l--body,
body.sc-skin #page-container #et-boc .et-l--post { background: transparent !important; background-color: transparent !important; }
body.sc-skin #page-container #et-boc .et_pb_section,
body.sc-skin #page-container #et-boc .et_pb_row,
body.sc-skin #page-container #et-boc .et_pb_column,
body.sc-skin #page-container #et-boc .et_pb_module { background-color: transparent !important; background-image: none !important; }
body.sc-skin #page-container #et-boc .et_pb_section_parallax,
body.sc-skin #page-container #et-boc .et_parallax_bg_wrap,
body.sc-skin #page-container #et-boc .et_pb_background_pattern,
body.sc-skin #page-container #et-boc .et_pb_background_mask { display: none !important; }

/* Seitenkopf wirklich linksbuendig - Divi setzt die Ausrichtung auch auf die Ueberschrift */
body.sc-skin:not(.single-product) #page-container #et-boc .et_pb_section_0_tb_body .et_pb_text_inner,
body.sc-skin:not(.single-product) #page-container #et-boc .et_pb_section_0_tb_body .et_pb_text_inner * { text-align: left !important; }

/* Preise: Divi faerbt .amount im Shop-Modul orange (!important) */
body.sc-skin #page-container #et-boc .price,
body.sc-skin #page-container #et-boc .price .amount,
body.sc-skin #page-container #et-boc .price .woocommerce-Price-amount,
body.sc-skin #page-container #et-boc .price bdi,
body.sc-skin #page-container #et-boc .amount { color: var(--fg) !important; }
body.sc-skin #page-container #et-boc .price del,
body.sc-skin #page-container #et-boc .price del .amount,
body.sc-skin #page-container #et-boc del .amount { color: var(--fg-faint-2) !important; font-weight: 400 !important; }
body.sc-skin #page-container #et-boc .price .woocommerce-price-suffix,
body.sc-skin #page-container #et-boc .price .tax-label,
body.sc-skin #page-container #et-boc .wc-gzd-additional-info,
body.sc-skin #page-container #et-boc .price-unit,
body.sc-skin #page-container #et-boc .shipping-costs-info,
body.sc-skin #page-container #et-boc .delivery-time-info,
body.sc-skin #page-container #et-boc .tax-info,
body.sc-skin #page-container #et-boc .legal-price-info,
body.sc-skin #page-container #et-boc .legal-price-info * {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .04em;
  color: var(--fg-faint) !important;
  text-transform: none !important;
}
body.sc-skin #page-container #et-boc ul.products li.product .price .woocommerce-price-suffix { flex-basis: 100%; }

/* Tabellen: Divi/Woo legen graue Hintergruende auf thead und tfoot */
body.sc-skin #page-container #et-boc table.shop_table { background: rgba(255,255,255,.02) !important; }
body.sc-skin #page-container #et-boc table.shop_table thead,
body.sc-skin #page-container #et-boc table.shop_table tbody,
body.sc-skin #page-container #et-boc table.shop_table tfoot,
body.sc-skin #page-container #et-boc table.shop_table tr,
body.sc-skin #page-container #et-boc table.shop_table td { background: transparent !important; }
body.sc-skin #page-container #et-boc table.shop_table th { background: rgba(255,255,255,.02) !important; }
body.sc-skin #page-container #et-boc #order_review table.shop_table,
body.sc-skin #page-container #et-boc #order_review table.shop_table th,
body.sc-skin #page-container #et-boc .cart_totals table.shop_table,
body.sc-skin #page-container #et-boc .cart_totals table.shop_table th { background: transparent !important; }

/* Kasse: Zahlungsbox grau von WooCommerce, leeres Versand-Modul */
body.sc-skin #page-container #et-boc #payment,
body.sc-skin #page-container #et-boc .woocommerce-checkout-payment,
body.sc-skin #page-container #et-boc .et_pb_wc_checkout_payment_info .et_pb_module_inner,
body.sc-skin #page-container #et-boc #payment ul.payment_methods,
body.sc-skin #page-container #et-boc #payment ul.wc_payment_methods li,
body.sc-skin #page-container #et-boc #payment .place-order { background: transparent !important; }
body.sc-skin #page-container #et-boc .et_pb_wc_checkout_shipping:not(:has(input,select)) { display: none !important; }

/* Produktkarten linksbuendig - Divi zentriert den Karteninhalt */
body.sc-skin #page-container #et-boc ul.products li.product,
body.sc-skin #page-container #et-boc ul.products li.product * { text-align: left !important; }

/* Lade-Schleier von WooCommerce (blockUI) ist weiss - im Dunkeln blitzt das */
body.sc-skin #page-container #et-boc .blockUI.blockOverlay { background: rgba(5,7,13,.75) !important; }
body.sc-skin #page-container #et-boc .blockUI.blockMsg { color: var(--fg) !important; background: transparent !important; }

/* Kopfzeile auf dem Handy: Warenkorb-Symbol neben den Burger, nicht in die Mitte */
@media (max-width: 639px) {
  body.sc-skin .iconbtn--cart { margin-left: auto; }
}

/* Warenkorb auf schmalen Schirmen: Zeilen werden Karten. WooCommerces eigene
   Kleinbildschirm-Regeln greifen im Divi-Modul nicht - deshalb hier. */
@media (max-width: 760px) {
  body.sc-skin #page-container #et-boc table.shop_table_responsive thead { display: none !important; }
  body.sc-skin #page-container #et-boc table.shop_table_responsive,
body.sc-skin #page-container #et-boc table.shop_table_responsive tbody,
body.sc-skin #page-container #et-boc table.shop_table_responsive tr { display: block !important; width: 100% !important; }
  body.sc-skin #page-container #et-boc table.shop_table_responsive tr { padding: 6px 0; border-bottom: 1px solid var(--line-3); }
  body.sc-skin #page-container #et-boc table.shop_table_responsive tr:last-child { border-bottom: 0; }
  body.sc-skin #page-container #et-boc table.shop_table_responsive td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100% !important;
    padding: 8px 14px !important;
    border: 0 !important;
    text-align: right;
  }
  body.sc-skin #page-container #et-boc table.shop_table_responsive td::before {
    content: attr(data-title);
    display: block !important;
    float: none !important;
    flex: none;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg-dim);
    text-align: left;
  }
  body.sc-skin #page-container #et-boc table.shop_table_responsive td.product-thumbnail { display: none !important; }
  body.sc-skin #page-container #et-boc table.shop_table_responsive td.product-remove { justify-content: flex-end; padding-bottom: 0 !important; }
  body.sc-skin #page-container #et-boc table.shop_table_responsive td.product-remove::before,
body.sc-skin #page-container #et-boc table.shop_table_responsive td.product-name::before,
body.sc-skin #page-container #et-boc table.shop_table_responsive td.actions::before { display: none; }
  body.sc-skin #page-container #et-boc table.shop_table_responsive td.product-name,
body.sc-skin #page-container #et-boc table.shop_table_responsive td.product-name * { justify-content: flex-start; text-align: left !important; font-weight: 600; }
  body.sc-skin #page-container #et-boc table.shop_table_responsive td.actions { display: block !important; padding-top: 14px !important; }
  body.sc-skin #page-container #et-boc .woocommerce-cart-form .actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  body.sc-skin #page-container #et-boc .woocommerce-cart-form .coupon { flex-wrap: wrap; flex: 1 1 100%; }
  body.sc-skin #page-container #et-boc .woocommerce-cart-form .coupon input,
body.sc-skin #page-container #et-boc .woocommerce-cart-form .coupon .button { flex: 1 1 100% !important; width: 100% !important; }
  body.sc-skin #page-container #et-boc .woocommerce-cart-form button[name="update_cart"] { margin-left: 0; width: 100%; }
}

/* ============================================================
   16. Nachtraege v0.2.5 (04.09.) - aus dem Drei-Agenten-Audit
   Alles hier gemessen am Live-HTML vom 04.09.2026 (curl auf /shop/,
   /product/dein-unsichtbarer-mitarbeiter/ und die Bestandsaufnahme
   shots/base-kasse.json), nicht geraten.
   ============================================================ */

/* a) Shop-Raster: Knopf "Ansehen" unter jeder Karte.
      Das Markup kommt aus dem PHP-Hook woocommerce_after_shop_loop_item
      (SC_Skin::loop_ansehen, Prioritaet 15). Farben wie der Kaufknopf:
      CI-Orange #FF6D00 (var(--orange)), schwarze Schrift, Hover #FF9A4D.
      Volle Kartenbreite, unten: der Knopf ist direktes Flex-Kind von
      li.product, margin-top:auto schiebt ihn auf allen Karten buendig nach
      unten (der Preis steckt im Kartenlink und hilft dabei nicht). */
body.sc-skin #page-container #et-boc ul.products li.product a.button.sc-ansehen {
  display: block;
  width: 100%;
  margin: 16px 0 0 !important;
  margin-top: auto !important;
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--orange) !important;
  color: var(--on-orange) !important;
  font-family: var(--body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  box-shadow: none !important;
}
body.sc-skin #page-container #et-boc ul.products li.product a.button.sc-ansehen:hover {
  background: #FF9A4D !important;
  color: var(--on-orange) !important;
}
/* Divi haengt an .woocommerce a.button ein Pfeil-Icon per ::after - hier stoert es. */
body.sc-skin #page-container #et-boc ul.products li.product a.button.sc-ansehen::after { display: none !important; }

/* b) Produkte ohne Preis: "Auf Anfrage" (kommt aus SC_Skin::preis_auf_anfrage).
      Mono wie die uebrigen Preisangaben, Groesse aus der Preiszeile geerbt -
      auf der Produktseite waeren die vollen 38px fuer einen Satz zu laut. */
body.sc-skin #page-container #et-boc .price .sc-preis-anfrage {
  font-family: var(--mono) !important;
  font-size: inherit;
  font-weight: 500 !important;
  letter-spacing: -.01em;
  color: var(--fg) !important;
}
body.sc-skin #page-container #et-boc .et_pb_wc_price .price .sc-preis-anfrage { font-size: 28px !important; }

/* c) Brotkrume auf Produktseiten: der letzte Krumen ist der ganze Produkttitel
      und lief ueber drei Zeilen. skin.js (krumeKuerzen) legt eine Huelle um den
      Textknoten, hier wird sie auf eine Zeile begrenzt. Der volle Titel steht
      im title-Attribut, die Ueberschrift darunter zeigt ihn ohnehin komplett. */
body.sc-skin #page-container #et-boc .woocommerce-breadcrumb .sc-krume-letzte {
  display: inline-block;
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* d) Zwei orange Knoepfe klebten aneinander: Kaufknopf und darunter der
      Express-Kauf (Google Pay) bzw. - ohne Einwilligung - unser Platzhalter.
      16px Abstand, und der Express-Knopf wird zur Umriss-Variante, damit nur
      EIN gefuellter Knopf um die Aufmerksamkeit wirbt. */
body.sc-skin.single-product #page-container #et-boc .wcpay-express-checkout-wrapper,
body.sc-skin.single-product #page-container #et-boc .et_pb_wc_add_to_cart .sc-extern { margin-top: 16px !important; }
body.sc-skin #page-container #et-boc .sc-extern--stripe .sc-extern__btn {
  background: transparent !important;
  border: 1px solid var(--orange) !important;
  color: var(--orange) !important;
}
body.sc-skin #page-container #et-boc .sc-extern--stripe .sc-extern__btn:hover {
  background: var(--orange) !important;
  color: var(--on-orange) !important;
}

@media (min-width: 981px) {
  /* e) Produktseite: das Bild klebt beim Scrollen.
        Die Zeile ist et_pb_equal_columns, also ein Flex-Container - die
        Bildspalte ist damit so hoch wie die Textspalte (gemessen: Spalte
        8409px, Bild 524px) und lief unterhalb des Bildes leer mit.
        Bis v0.2.4 stand sticky auf .et_pb_wc_images .et_pb_module_inner -
        dessen Bezugsrahmen ist aber das Modul selbst und damit nur so hoch
        wie das Bild; sticky hatte keinen Weg. Jetzt klebt das MODUL in der
        Spalte. Kasse und Warenkorb sind ueber body.single-product ausgenommen. */
  body.sc-skin.single-product #page-container #et-boc .et_pb_wc_images { position: sticky; top: 90px; }

  /* f) Kasse: die rechte Spalte war zu schmal (Divi-Gutter 2: 65,5 % / 3,5 % /
        31 %; das Stripe-Kartenfeld kam auf 298px, die Germanized-Rechtstexte
        brachen auf 8-10 Zeilen). Neu 55 / 3,5 / 41,5 - bei der 1080px-Zeile
        rund 448px statt 335px fuer die rechte Spalte, das Kartenfeld liegt
        damit ueber den geforderten 420px. Die Summe bleibt exakt 100 %.
        Die Spalten werden ueber ihren INHALT gewaehlt (:has), nicht ueber
        Divis Modulnummern - so trifft die Regel weder die Footer-Zeilen noch
        den Warenkorb. Browser ohne :has() behalten die alte Aufteilung. */
  body.sc-skin.woocommerce-checkout #page-container #et-boc .et_pb_row > .et_pb_column:has(> .et_pb_wc_checkout_billing) {
    width: 55% !important;
    margin-right: 3.5% !important;
  }
  body.sc-skin.woocommerce-checkout #page-container #et-boc .et_pb_row > .et_pb_column:has(> .et_pb_wc_checkout_payment_info) {
    width: 41.5% !important;
    margin-right: 0 !important;
  }
}

/* g) Brotkrume auf dem Handy kleiner. Achtung: der Ausgangswert ist bereits
      11,5px (Abschnitt 8) - die im Auftrag genannten 12px waeren groesser
      gewesen, deshalb 10,5px plus enger gesetzter Krumen. */
@media (max-width: 639px) {
  body.sc-skin #page-container #et-boc .et_pb_wc_breadcrumb { font-size: 10.5px !important; letter-spacing: .06em; }
  body.sc-skin #page-container #et-boc .woocommerce-breadcrumb .sc-krume-letzte { max-width: 20ch; }
}