/** Shopify CDN: Minification failed

Line 765:10 Expected identifier but found whitespace
Line 765:16 Unexpected "!"

**/
/* =============================================
   CUSTOM OVERRIDES
   ============================================= */

/* Schrift: DM Sans Standard (nicht 9pt-Optical-Size) */
html {
  font-optical-sizing: none;
}

body,
button,
input,
select,
textarea {
  font-family: "DM Sans", sans-serif !important;
  font-weight: 500 !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading-font {
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600 !important;
}

.thb-product-detail .product-title {
  font-family: "DM Sans", sans-serif !important;
  font-weight: 500 !important;
}

/* Announcement Bar: Farbe erzwingen */
.announcement-bar {
  background: #00493D !important;
  color: #ffffff !important;
}

/* Announcement Bar: Static USP Layout */
.announcement-bar--static {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  width: 100%;
  flex-wrap: nowrap;
  font-size: 14px;
}
.announcement-bar--static .announcement-bar--item {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}
.announcement-bar--static .announcement-bar--item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 0;
}
/* Kasten (erste path = Rahmen) ausblenden, nur Haken anzeigen */
.announcement-bar--static .announcement-bar--item svg path:first-child {
  display: none;
}
/* Kurztext-Umschaltung: Desktop = lang, Mobile = kurz */
.announcement-bar--text-short {
  display: none;
}
@media only screen and (max-width: 767px) {
  .announcement-bar--inner {
    padding: 0 10px !important;
  }
  /* Mittleren USP ("Versand oder Abholung") auf Mobile ausblenden */
  .announcement-bar--static .announcement-bar--item:nth-child(2) {
    display: none;
  }
  .announcement-bar--static {
    gap: 10px;
    justify-content: center;
    font-size: 14px;
  }
  .announcement-bar--static .announcement-bar--item svg {
    width: 20px;
    height: 20px;
    margin-right: 0;
  }
  /* Auf Mobile Kurztext statt Langtext */
  .announcement-bar--text-full {
    display: none;
  }
  .announcement-bar--text-short {
    display: inline;
  }
}

/* Desktop: Suchleiste horizontal zentriert im Header */
@media only screen and (min-width: 1068px) {
  .header.style5 .header--inner {
    position: relative;
    /* Breite des rechten Blocks (Beratung inkl. 60px Abstand + Icons), vom
       Header-Rand gemessen. Nachgemessen 15.09.2026: nur Text 336px, mit
       Fotos 432px, Angebots-Icon +36px. Werte leicht aufgerundet. */
    --kopf-rechts: 340px;
    --kopf-plus: 0px;
  }
  html.hat-angebot .header.style5 .header--inner {
    --kopf-plus: 36px;
  }
  .header.style5 .thb-secondary-area .searchform {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 10;
    width: 380px;
    /* Die Suche ist mittig: sie darf hoechstens Headerbreite minus zweimal
       (rechter Block + 24px Abstand) breit sein, sonst laeuft sie in die
       Beratung. Vorher fest 780px abgezogen, das reichte mit Fotos nicht
       (bei 1340px ragte die Suche 2px in die Fotos). */
    max-width: calc(100% - 2 * (var(--kopf-rechts) + var(--kopf-plus) + 24px));
  }

  /* Header-Icons minimal kleiner (vorher 20px), gleiches Seitenverhältnis. */
  .header.style5 .thb-secondary-area-item svg {
    height: 18px;
    width: auto;
  }

  /* Das Herz ist eine Kontur und wirkt bei gleicher Höhe optisch größer als
     die gefüllten Icons daneben – deshalb etwas kleiner. */
  .header.style5 .thb-secondary-wishlist svg {
    height: 16px;
  }
}

/* Mobile: Such-Icon ausblenden, da Suchleiste immer sichtbar */
@media only screen and (max-width: 1067px) {
  .thb-quick-search--mobile-only {
    display: none !important;
  }
}

/* Mobile: Suchleiste immer ausgeklappt unterhalb der Header-Leiste */
.header-mobile-search {
  grid-column: 1 / -1;
  padding: 0 0 10px;
}
.header-mobile-search .searchform {
  display: block !important;
  width: 100%;
  margin: 0;
}
@media only screen and (min-width: 1068px) {
  .header-mobile-search {
    display: none;
  }
}

/* Mobile: iOS Auto-Zoom beim Fokus des Suchfelds verhindern (font-size >= 16px) */
@media only screen and (max-width: 1067px) {
  .header .searchform .search-field,
  .header-mobile-search .search-field {
    font-size: 16px;
  }

  /* Einheitliches Grid-Layout: geschlossen und offen gleich, damit nichts springt */
  .header-mobile-search .searchform--form {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    align-items: stretch;
    position: relative;
    width: 100%;
  }

  .header-mobile-search .searchform--form .search-field-wrap {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: stretch;
    position: relative;
    flex: 1;
    min-width: 0;
    width: 100%;
    background-color: rgba(var(--color-header-text-rgb, --color-body-rgb), 0.07);
    border-radius: var(--input-border-radius, 6px);
    overflow: hidden;
  }

  .header-mobile-search .searchform--form .search-field-wrap .search-field {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 44px;
    padding-right: 8px;
    border-radius: 0;
    background-color: transparent !important;
    box-shadow: none !important;
    transition:
      height 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      background-color 0.35s ease,
      box-shadow 0.35s ease,
      border-color 0.35s ease;
  }

  .header-mobile-search .search-field-wrap:focus-within {
    box-shadow: inset 0 0 0 1px var(--color-header-text, --color-body);
  }

  /* Nur Placeholder-Text ausfaden — graue Leiste bleibt voll sichtbar */
  .header-mobile-search .search-field:placeholder-shown {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 58%, transparent 84%);
    mask-image: linear-gradient(to right, #000 0%, #000 58%, transparent 84%);
  }

  .header-mobile-search .search-field:not(:placeholder-shown) {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .header-mobile-search .search-field:focus {
    background-color: transparent !important;
    box-shadow: none !important;
  }

  body.open-search:not(.open-search--expanded) .header-mobile-search .search-field-wrap {
    background-color: rgba(var(--color-header-text-rgb, --color-body-rgb), 0.07);
  }

  body.open-search:not(.open-search--expanded) .header-mobile-search .search-field-wrap:focus-within {
    box-shadow: inset 0 0 0 1px var(--color-header-text, --color-body);
  }

  .header-mobile-search .searchform--form .search-field-wrap .thb-search-submit {
    position: static !important;
    flex-shrink: 0;
    width: 50px;
    height: 44px;
    background: transparent;
    transition:
      height 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      width 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.25s ease;
  }

  .header-mobile-search .thb-search-back {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    width: 0;
    min-width: 0;
    height: 44px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--color-body, #2c2d2e);
    overflow: hidden;
    opacity: 0;
    flex-shrink: 0;
    cursor: pointer;
    pointer-events: none;
    transition:
      width 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.28s ease,
      height 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .header-mobile-search .thb-search-back svg {
    width: 12px;
    height: auto;
    flex-shrink: 0;
  }

  .header-mobile-search .thb-search-back svg path {
    stroke: var(--color-body, #2c2d2e);
  }
}

/* Mobile: Vollbild-Suche — nahtlose Morph-Animation von Leiste zu Vollbild */
@media only screen and (max-width: 1067px) {
  body.open-search {
    overflow: hidden;
  }

  html:has(body.open-search) {
    overflow: hidden;
  }

  body.open-search .header-mobile-search .searchform {
    touch-action: auto;
  }

  body.open-search .header-mobile-search {
    padding: 0;
  }

  body.open-search .header-mobile-search .searchform {
    position: fixed;
    top: var(--mobile-search-top, var(--announcement-height, 0px));
    left: 0;
    width: 100%;
    height: auto;
    border-radius: 0;
    z-index: 120;
    max-width: none;
    margin: 0;
    overflow: hidden;
    background: var(--color-drawer-bg, #fff);
    transition: none !important;
  }

  body.open-search.open-search--expanded .header-mobile-search .searchform {
    top: var(--mobile-search-top, var(--announcement-height, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: var(--mobile-search-height, auto) !important;
    /* Die Hoehe kommt aus dem Skript und beschreibt den wirklich sichtbaren
       Bereich. 100dvh ist dafuer unbrauchbar, es liefert je nach Browser mehr
       als das Fenster hoch ist, dann waechst die Suche unten heraus und der
       Knopf Alle Ergebnisse anzeigen wird angeschnitten. Der dvh Wert bleibt
       nur als Rueckfallebene, falls das Skript nicht laeuft. */
    min-height: var(
      --mobile-search-height,
      calc(100dvh - var(--mobile-search-top, var(--announcement-height, 0px)))
    ) !important;
    max-height: var(
      --mobile-search-height,
      calc(100dvh - var(--mobile-search-top, var(--announcement-height, 0px)))
    ) !important;
    border-radius: 0 !important;
    background: var(--color-drawer-bg, #fff);
  }

  body.open-search.open-search--expanded.open-search--keyboard-open .header-mobile-search .searchform {
    min-height: 0 !important;
    max-height: var(--mobile-search-height, none) !important;
  }

  /* Volle weiße Fläche hinter der Suche — kein Durchblitzen der Seite */
  body.open-search.open-search--expanded .header-mobile-search::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 119;
    background: var(--color-drawer-bg, #fff);
    pointer-events: none;
  }

  body.open-search .announcement-bar-section {
    position: relative;
    z-index: 121;
  }

  body.open-search .header-mobile-search .searchform--click-capture {
    display: none;
  }

  body.open-search .header-mobile-search .searchform--form {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--color-drawer-bg, #fff);
  }

  body.open-search.open-search--expanded .header-mobile-search .searchform--form {
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* Zwischen-<form> muss die Höhe durchreichen, sonst kollabiert die
     Ergebnisliste und nur der Footer-Button bleibt sichtbar. */
  body.open-search.open-search--expanded .header-mobile-search .searchform > form {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  body.open-search.open-search--expanded .header-mobile-search .thb-search-back {
    width: 52px;
    opacity: 1;
    height: 52px;
    pointer-events: auto;
    border-bottom: 1px solid var(--color-border, #d6d6d6);
    background: var(--color-drawer-bg, #fff);
  }

  body.open-search.open-search--expanded .header-mobile-search .searchform--form .search-field-wrap {
    background-color: var(--color-drawer-bg, #fff);
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--color-border, #d6d6d6);
  }

  body.open-search.open-search--expanded .header-mobile-search .searchform--form .search-field-wrap:focus-within {
    box-shadow: none;
  }

  body.open-search.open-search--expanded .header-mobile-search .searchform--form .search-field-wrap .search-field {
    height: 52px;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
    background-color: transparent !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body.open-search.open-search--expanded .header-mobile-search .searchform--form .search-field-wrap .thb-search-submit {
    height: 52px;
    border-bottom: none;
    background-color: transparent;
  }

  body.open-search .header-mobile-search .searchform--form .thb-predictive-search {
    grid-column: 1 / -1;
    grid-row: 2;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none !important;
  }

  body.open-search.open-search--expanded .header-mobile-search .searchform--form .thb-predictive-search {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: none !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-drawer-bg, #fff);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    touch-action: auto;
  }

  body.open-search.open-search--expanded .header-mobile-search .searchform--form .thb-predictive-search scroll-shadow,
  body.open-search.open-search--expanded .header-mobile-search .searchform--form .thb-predictive-search .side-panel-content--inner {
    touch-action: pan-y;
  }

  body.open-search.open-search--expanded .header-mobile-search .searchform--form .thb-predictive-search[inert] {
    display: none;
  }

  /* Ergebnisliste: scroll-shadow füllt den Platz, inner scrollt absolut darin */
  body.open-search.open-search--expanded .header .searchform--form .thb-predictive-search scroll-shadow,
  body.open-search.open-search--expanded .header-mobile-search .searchform--form .thb-predictive-search scroll-shadow {
    display: block !important;
    position: relative !important;
    flex: 1 1 0% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    background: var(--color-drawer-bg, #fff);
  }

  body.open-search.open-search--expanded .header-mobile-search .searchform--form .thb-predictive-search .side-panel-content--inner {
    position: absolute !important;
    inset: 0;
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 0 16px 12px;
    background: var(--color-drawer-bg, #fff);
  }

  body.open-search.open-search--expanded .header-mobile-search .searchform--form .thb-predictive-search .side-panel-content--search-footer {
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-top: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border, #d6d6d6);
    background: var(--color-drawer-bg, #fff);
  }

  body.open-search.open-search--expanded .header-mobile-search .searchform--form .thb-predictive-search .side-panel-content--search-footer .search-results-submit,
  body.open-search.open-search--expanded .header-mobile-search .searchform--form .thb-predictive-search .search-results-submit--mobile {
    display: block;
    width: 100%;
    margin: 0;
    padding: 14px 20px;
    border: none;
    border-radius: 8px;
    background: var(--color-accent, #f0c417);
    color: var(--color-accent-text, #2c2d2e);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  }

  body.open-search.open-search--expanded .header-mobile-search .searchform--form .thb-predictive-search .side-panel-content--search-footer .search-results-submit:active {
    transform: scale(0.98);
  }

  /* Button-Text lesbar halten: --color-accent-text ist auf diesem Theme leer,
     sonst faellt die Schrift auf ein dunkles Grau zurueck (dunkel auf dunkel). */
  body.open-search .header-mobile-search .thb-predictive-search .search-results-submit,
  body.open-search .header-mobile-search .thb-predictive-search .search-results-submit span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  /* Preis bleibt immer sichtbar — kein Hover-Austausch mit „In den Warenkorb“ */
  body.open-search .header-mobile-search .thb-predictive-search .product-card-small--add-to-cart-button {
    display: none !important;
  }

  body.open-search .header-mobile-search .thb-predictive-search .product-card-small .price,
  body.open-search .header-mobile-search .thb-predictive-search .product-card-small:hover .price,
  body.open-search .header-mobile-search .thb-predictive-search .product-card-small:active .price {
    transform: none !important;
  }

  body.open-search .header-mobile-search .thb-predictive-search .product-card-small--add-to-cart {
    overflow: visible;
  }

  body.open-search.open-search--expanded .header-mobile-search .searchform--form .thb-predictive-search .side-panel-content--tabs {
    flex-shrink: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    body.open-search .header-mobile-search .searchform,
    body.open-search .header-mobile-search .searchform--form .search-field-wrap .search-field,
    body.open-search .header-mobile-search .searchform--form .thb-search-submit,
    body.open-search .header-mobile-search .thb-search-back,
    body.open-search .header-mobile-search .searchform--form .thb-predictive-search {
      transition: none !important;
    }
  }
}

/* Collection list: Abstand zwischen Bild und Unterschrift reduzieren
   (!important, da list-collections.css nach custom.css im Body geladen wird) */
.collection-card.style1 .collection-card--image {
  margin-bottom: 8px !important;
}

/* Collection list: auf Mobile 3 Spalten (Bilder kleiner) */
@media only screen and (max-width: 767px) {
  .collection-grid__grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px 8px !important;
  }
  .collection-grid__grid .collection-card--link {
    font-size: 0.8125rem;
    line-height: 1.2;
  }
}

/* Collection list: Desktop-Abstände reduzieren, damit alle Kacheln (7) in eine Reihe passen */
@media only screen and (min-width: 768px) {
  .collection-grid__grid {
    gap: 16px !important;
  }
  .collection-grid__grid .collection-card--link {
    font-size: 0.9375rem;
  }
}

/* Logo list ("Unsere Marken & Partner"): auf Mobile 3 Spalten */
@media only screen and (max-width: 767px) {
  .logo-list--inner:not(.swipe-on-mobile) {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Header: "Persönliche Beratung"-Hinweis neben der Suche (nur Desktop) */
.header-beratung {
  display: none;
}
@media only screen and (min-width: 1068px) {
  .header-beratung {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 60px;
    white-space: nowrap;
    line-height: 1;
  }
  .header-beratung:hover {
    opacity: 0.9;
  }
  .header-beratung--img {
    height: 38px;
    width: auto;
    display: block;
    border-radius: 0;
  }
  .header-beratung--text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .header-beratung--title {
    color: #00493D;
    font-weight: var(--font-body-bold-weight, 700);
    font-size: 15px;
    line-height: 1.1;
  }
  .header-beratung--phone {
    color: var(--color-header-text, #2c2d2e);
    font-weight: var(--font-body-medium-weight, 500);
    font-size: 13px;
    line-height: 1.1;
  }
}
/* Beratung stufenweise zurueckbauen, damit Suche und Beratung sich nie
   beruehren (die Grenzen gelten im Schiebe-Modus fuer die Breite neben dem
   Drawer, assets/pd-medien):
   - Fotos erst ab 1360px, mit Angebots-Icon ab 1400px
   - darunter nur Titel + Telefon
   - unter 1160px (mit Angebots-Icon unter 1200px) nur noch die Suche mittig */
@media only screen and (min-width: 1068px) and (max-width: 1359px) {
  .header-beratung--img {
    display: none;
  }
}
@media only screen and (min-width: 1360px) {
  .header.style5 .header--inner {
    --kopf-rechts: 435px;
  }
}
@media only screen and (min-width: 1360px) and (max-width: 1399px) {
  html.hat-angebot .header-beratung--img {
    display: none;
  }
  html.hat-angebot .header.style5 .header--inner {
    --kopf-rechts: 340px;
  }
}
@media only screen and (min-width: 1068px) and (max-width: 1159px) {
  .header-beratung {
    display: none !important;
  }
  .header.style5 .header--inner {
    --kopf-rechts: 115px;
  }
}
@media only screen and (min-width: 1160px) and (max-width: 1199px) {
  html.hat-angebot .header-beratung {
    display: none !important;
  }
  html.hat-angebot .header.style5 .header--inner {
    --kopf-rechts: 115px;
  }
}

/* Produktseite: Titel-Größe (!important, da product.css nach custom.css geladen wird) */
.thb-product-detail .product-title {
  font-size: 22px !important;
  line-height: 1.3 !important;
  margin-bottom: 16px !important;
}

/* Preise kräftiger (Shop-weit) */
.price ins .amount,
.price > .amount {
  font-weight: 700 !important;
}

/* Produktseite: Preis (immer 36px, mit und ohne Rabatt) */
.thb-product-detail .product-price-container .price ins .amount {
  font-size: 36px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

/* Produktseite: Trennlinie unter dem Titel, Abstand zur Preiszeile.
   Sie hing frueher an der Zeile mit der Artikelnummer. Seit Hersteller und
   Artikelnummer ueber dem Titel stehen, waere sie mit nach oben gewandert;
   deshalb traegt sie jetzt der Titel. Die Zeile darueber gibt ihren
   Innenabstand ab, damit der Abstand zum Preis derselbe bleibt. */
.thb-product-detail .product-title-container .product-sku {
  margin-top: -4px !important;
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
.thb-product-detail .product-title-container .product-title {
  margin-bottom: 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--color-border, #d6d6d6) !important;
}
.thb-product-detail .product-title-container .product-price-container {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 28px !important;
}
.thb-product-detail .product-title-container:not(:has(.product-sku)) .product-price-container {
  border-top: 1px solid var(--color-border, #d6d6d6) !important;
  margin-top: 16px !important;
}

/* Produktseite: MwSt.-Hinweis näher am Preis */
.thb-product-detail .product-title-container {
  margin-bottom: 6px !important;
}
.thb-product-detail .product-title-container + .product--text.style_body {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* Produktseite: Menge + Warenkorb-Button nebeneinander */
.product-quantity-cart-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  width: 100%;
}
.product-quantity-cart-row .quantity {
  flex: 0 0 112px;
  margin-bottom: 0;
  height: 50px;
  padding: 0 34px;
}
.product-quantity-cart-row .quantity .qty {
  width: 40px;
}
.product-quantity-cart-row .quantity .qty,
.product-quantity-cart-row .quantity .minus,
.product-quantity-cart-row .quantity .plus {
  height: 50px;
  line-height: 50px;
}
.product-quantity-cart-row .single-add-to-cart-button {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
  padding-left: 18px;
  padding-right: 18px;
}

/* Sticky Warenkorb-Leiste: Preis links, Button rechts, volle Breite unten */
  display: none !important;
}

.product-add-to-cart-sticky {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  z-index: 35;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-radius: 0 !important;
  border: none;
  border-top: 1px solid var(--color-border, #d6d6d6);
  box-shadow: none;
  transform: translateY(calc(100% + 20px)) !important;
}

.product-add-to-cart-sticky.sticky--visible {
  transform: translateY(0) !important;
}

.product-add-to-cart-sticky--inner {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-right: 0 !important;
  min-height: 0 !important;
  text-align: left;
}

.product-add-to-cart-sticky--row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding-right: 0;
}

.product-add-to-cart-sticky--inner:has(.product-add-to-cart-sticky--toggle) .product-add-to-cart-sticky--row {
  padding-right: 0;
}

.product-add-to-cart-sticky--title {
  display: none !important;
}

.product-add-to-cart-sticky--price {
  flex: 0 0 auto;
  flex-shrink: 0;
  align-self: center;
  text-align: left;
}

.product-add-to-cart-sticky--price .price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  margin: 0;
}

.product-add-to-cart-sticky--price .price del {
  font-size: 0.75rem;
  line-height: 1.2;
  color: #888;
}

.product-add-to-cart-sticky--price .price del .amount {
  font-weight: 500 !important;
}

.product-add-to-cart-sticky--price .price ins {
  text-decoration: none;
  /* Auf der Produktseite stehen alter und neuer Preis nebeneinander, dort
     erzeugt margin-left den Abstand. Im Sticky-Balken stehen sie untereinander
     - der Einzug wuerde den reduzierten Preis nach rechts versetzen. */
  margin-left: 0;
}

.product-add-to-cart-sticky--price .price ins .amount {
  font-size: 1.375rem;
  line-height: 1.1;
  font-weight: 700 !important;
  color: #2c2d2e;
}

.product-add-to-cart-sticky--price .price ins .amount.discounted,
.product-add-to-cart-sticky--price .price:has(del) ins .amount {
  color: #e93636;
}

.product-add-to-cart-sticky--row > .single-add-to-cart-button {
  flex: 1 1 auto;
  width: auto;
  max-width: none !important;
  min-width: 0;
  min-height: 50px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  display: flex !important;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.product-add-to-cart-sticky--row > .single-add-to-cart-button .single-add-to-cart-button--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.product-add-to-cart-sticky--cart-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.product-add-to-cart-sticky--cart-icon svg {
  width: 18px;
  height: auto;
}

.product-add-to-cart-sticky--row > .single-add-to-cart-button .product-add-to-cart-sticky--cart-icon svg path {
  fill: currentColor !important;
}

.product-add-to-cart-sticky--toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border, #d6d6d6);
  border-radius: 50%;
  background: #fff;
  color: var(--color-body, #2c2d2e);
  flex-shrink: 0;
  cursor: pointer;
}

.product-add-to-cart-sticky--toggle.sticky-open {
  transform: translateY(-50%);
}

.product-add-to-cart-sticky--toggle .plus {
  position: static;
  width: 12px;
  height: 12px;
  display: block;
}

.product-add-to-cart-sticky--toggle.sticky-open .plus {
  transform: rotateX(180deg);
}

.product-add-to-cart-sticky--inner:has(.product-add-to-cart-sticky--toggle) .product-add-to-cart-sticky--row > .single-add-to-cart-button {
  padding-right: 44px;
}

.product-add-to-cart-sticky--content {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border, #d6d6d6);
}

@media only screen and (max-width: 767px) {
  .product-add-to-cart-sticky {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .product-add-to-cart-sticky--price .price ins .amount {
    font-size: 1.25rem;
  }

  .product-add-to-cart-sticky--row > .single-add-to-cart-button {
    font-size: 0.9375rem;
    min-height: 48px;
  }
}
.product-quantity-cart-row > .shopify-app-block[id*="quotify_button"] {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
}
.product-quantity-cart-row > .shopify-app-block[id*="quotify_button"]:not(.is-visible) {
  display: none !important;
}
.product-quantity-cart-row > .shopify-app-block[id*="quotify_button"] quotify-button {
  display: block !important;
  width: 100% !important;
}
.product-quantity-cart-row > .shopify-app-block[id*="quotify_button"] .quotify-request-quote-btn,
.product-quantity-cart-row > .shopify-app-block[id*="quotify_button"] button {
  width: 100% !important;
  min-height: 50px !important;
  height: 50px !important;
  margin: 0 !important;
  white-space: nowrap;
  background: var(--color-accent, #00493d) !important;
  color: #fff !important;
}
.product-quantity-cart-row > .shopify-app-block[id*="quotify_button"] .quotify-request-quote-btn *,
.product-quantity-cart-row > .shopify-app-block[id*="quotify_button"] button * {
  color: #fff !important;
}

/* Produktseite: Abholhinweis ohne Hintergrund, kleiner Haken */
.pickup-availability-wrapper,
.pickup-availability-wrapper[available] {
  background: none !important;
}
.pickup-availability-information {
  padding: 0 !important;
  min-height: 0 !important;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.pickup-availability-information > svg {
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin-top: 2px !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
}
.pickup-availability-information-container {
  flex: 1;
  min-width: 0;
}

/* Warenkorb-Aktionen: Teilen + PDF (Cart-Drawer + Warenkorbseite) */
.cart-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.thb-cart-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.thb-cart-sidebar .thb-cart-collaterals {
  margin-bottom: 0;
}
.thb-cart-sidebar .cart-actions {
  margin-top: 0;
  width: 100%;
}
.thb-cart-sidebar .cart-actions__btn {
  flex: 1 1 0;
  min-width: 0;
}
.cart-actions__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--color-border, #d6d6d6);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: var(--font-body-medium-weight, 500);
  line-height: 1.2;
  color: var(--color-body, #2c2d2e);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.cart-actions__btn:hover {
  border-color: #00493D;
  color: #00493D;
}
.cart-actions__share.is-copied,
.cart-actions__share.is-copied:hover {
  animation: cart-share-success 2.5s ease forwards;
  color: #00493D;
}
@keyframes cart-share-success {
  0% {
    background-color: #fff;
    border-color: var(--color-border, #d6d6d6);
  }
  10% {
    background-color: #C0E8E2;
    border-color: #C0E8E2;
  }
  65% {
    background-color: #C0E8E2;
    border-color: #C0E8E2;
  }
  100% {
    background-color: #fff;
    border-color: var(--color-border, #d6d6d6);
  }
}
.cart-actions__btn svg {
  flex-shrink: 0;
}
/* Auf schmalen Screens untereinander (nur Cart-Drawer) */
@media only screen and (max-width: 480px) {
  .side-panel .cart-actions {
    flex-direction: column;
  }
}

/* Produktgalerie: Thumbnails links */
.thb-product-detail .product-gallery-container.thumbnails-left .product-image-container .product-images {
  max-width: 100%;
}

/* Produktgalerie Mobile: zentriert & abgerundet (Fullwidth-Modus korrigieren) */
@media only screen and (max-width: 767px) {
  .thb-product-detail .product-gallery-container,
  .thb-product-detail .product-gallery-container .product-image-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .thb-product-detail .product-images--fullwidth-mobile-true {
    margin-left: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
  }

  .thb-product-detail .product-image-container .product-images .flickity-viewport,
  .thb-product-detail .product-images--fullwidth-mobile-true .flickity-viewport {
    border-radius: calc(var(--block-border-radius, 16px) / 2) !important;
    overflow: hidden;
  }

  .thb-product-detail .product-single__media-image {
    border-radius: calc(var(--block-border-radius, 16px) / 2);
    overflow: hidden;
  }

  .thb-product-detail .product-gallery-container scroll-shadow {
    display: none !important;
  }

  /* Produktseite Mobile: weniger Abstand Breadcrumb → Bild → Badge */
  .template-product .breadcrumbs-section .breadcrumbs {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .template-product .breadcrumbs-section + .section-spacer .spacer {
    height: 10px !important;
  }

  .template-product .thb-product-detail .product-gallery-container {
    margin-bottom: 12px !important;
  }

  .template-product .product-information--inner > div:first-child {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
}

/* Produkt-Tabs: wie Collection-Switcher auf der Startseite */
.template-product .tabbed-content--scroll {
  margin-bottom: 20px;
}

.template-product .tabbed-content--tabs {
  display: block !important;
  text-align: left;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 100%;
}

.template-product .tabbed-content--tabs::-webkit-scrollbar {
  display: none;
}

.template-product .tabbed-content--tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  white-space: nowrap;
  font-size: 0.8125rem !important;
  font-weight: var(--font-body-medium-weight, 500);
  line-height: 1;
  height: 31px;
  min-height: 31px;
  margin: 0 10px 2px 0 !important;
  padding: 5px 15px;
  border: none;
  border-radius: var(--button-border-radius, 6px);
  background: rgba(var(--color-body-rgb), 0.05);
  color: rgba(var(--color-body-rgb), 0.8);
  opacity: 1;
  position: relative;
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
}

.template-product .tabbed-content--tabs button:after {
  display: none;
}

.template-product .tabbed-content--tabs button:hover,
.template-product .tabbed-content--tabs button.active {
  color: #fff;
  background: var(--color-accent);
}

.template-product .tabbed-content--tabs button svg {
  display: none;
}

.template-product .tabbed-content--tabs.tabs-center button,
.template-product .tabbed-content--tabs.tabs-right button {
  margin: 0 10px 2px 0 !important;
}

/* Produktseite: Infobereich (Preis, Name etc.) etwas breiter */
@media only screen and (min-width: 1068px) {
  .thb-product-detail .product-grid-container {
    grid-template-columns: minmax(44%, 700px) clamp(380px, 48%, calc(var(--grid-width, 1280px) - 40px - 700px)) !important;
  }
}

/* Produktkarten: mehr Abstand zwischen Titel und Preis */
.product-card .product-card-title {
  margin-bottom: 12px;
}

.product-card .price + .product-card-title {
  margin-top: 12px;
  margin-bottom: 0;
}

/* Warenkorb: Lagerbestand + Rabatt pro Position */
.cart-line-item-meta {
  margin-top: 8px;
}
.cart-line-item-meta .product-inventory-notice {
  font-size: 0.8125rem;
  line-height: 1.3;
  margin-bottom: 0;
  color: var(--color-inventory-instock, #279a4b);
}
.cart-line-item-meta .product-inventory-notice--text {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.cart-line-item-meta .product-inventory-notice--pulse {
  display: inline-flex;
  width: 8px;
  height: 8px;
  margin: 0 10px 0 2px;
  position: relative;
  border-radius: 50%;
  background: var(--color-inventory-instock, #279a4b);
  flex-shrink: 0;
}
.cart-line-item-meta .product-inventory-notice--pulse:after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--color-inventory-instock, #279a4b);
  animation: inventory-pulse 2s ease-out infinite;
}
.cart-line-item-meta .product-inventory-notice--low {
  color: var(--color-inventory-lowstock, #e97f32);
}
.cart-line-item-meta .product-inventory-notice--low .product-inventory-notice--pulse,
.cart-line-item-meta .product-inventory-notice--low .product-inventory-notice--pulse:after {
  background: var(--color-inventory-lowstock, #e97f32);
}

.cart-line-item-subtotal__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.cart-items tbody tr td.product-subtotal .price ins .amount {
  font-size: 1.375rem;
  font-weight: var(--font-body-medium-weight, 600);
  line-height: 1.2;
}
.cart-items tbody tr td.product-subtotal .price--stacked del .amount {
  font-size: 0.875rem;
  font-weight: 400;
  opacity: 0.65;
}
.cart-items tbody tr td.product-subtotal .price--stacked del,
.cart-items tbody tr td.product-subtotal .price--stacked ins {
  display: block;
}
.cart-items tbody tr td.product-subtotal .price--stacked del + ins {
  margin-left: 0;
  margin-top: 2px;
}
.cart-items tbody tr td.product-subtotal .price--stacked .unit-price {
  margin-left: 0;
  margin-top: 4px;
  text-align: right;
}
.cart-line-item-subtotal__badge {
  height: 24px;
  padding: 6px 10px;
}

@keyframes inventory-pulse {
  0% {
    opacity: 0.5;
    transform: scale(0.5);
  }
  to {
    opacity: 0;
    transform: scale(1);
  }
}

/* Suchergebnisseite: Suchbegriff + X links, Anzahl rechts */
.template-header--search-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.template-header--search-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0;
}

.template-header--search-term {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-header--search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-body, #2c2d2e);
  cursor: pointer;
}

.template-header--search-clear svg {
  width: 14px;
  height: 14px;
}

.template-header--search-count {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(var(--color-body-rgb, 44, 45, 46), 0.55);
}

.template-header--search-count .facets__label {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.thb-filter-count--search-hidden {
  display: none !important;
}

/* Quotify Sticky-Angebots-Button: kompakt & gerade, oben rechts unter Header + Mobile-Nav */
.quotify-sticky-cart-btn {
  position: fixed !important;
  top: var(
    --quotify-sticky-top,
    calc(var(--announcement-height, 0px) + var(--header-height, 136px) + 40px - 3px)
  ) !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  border-radius: 0 0 0 12px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 12px 18px !important;
  z-index: 29 !important;
  background: var(--color-accent, #00493d) !important;
  color: #fff !important;
}
@media only screen and (min-width: 768px) {
  .quotify-sticky-cart-btn {
    top: var(
      --quotify-sticky-top,
      calc(var(--announcement-height, 0px) + var(--header-height, 136px))
    ) !important;
  }
}
.quotify-sticky-cart-btn * {
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  color: #fff !important;
}

/* Hamburger-Menue (oben links): Balken breiter + dicker, weiter auseinander,
   und beim Oeffnen ein sauber mittig zentriertes X.
   Zentrierte Rotation (transform-origin:center) + translateY(=Abstand) laesst
   beide Diagonalen exakt im Box-Zentrum kreuzen. */
.mobile-toggle span {
  width: 24px !important;
  height: 2px !important;
  left: 12px !important;
  transform-origin: center center !important;
}
.mobile-toggle span:nth-child(1) { top: 15px !important; }
.mobile-toggle span:nth-child(2) { top: 23px !important; }
.mobile-toggle span:nth-child(3) { top: 31px !important; }

.js .mobile-toggle-wrapper[open].active .mobile-toggle span:nth-child(1),
.no-js .mobile-toggle-wrapper[open] .mobile-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg) !important;
}
.js .mobile-toggle-wrapper[open].active .mobile-toggle span:nth-child(2),
.no-js .mobile-toggle-wrapper[open] .mobile-toggle span:nth-child(2) {
  opacity: 0 !important;
}
.js .mobile-toggle-wrapper[open].active .mobile-toggle span:nth-child(3),
.no-js .mobile-toggle-wrapper[open] .mobile-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg) !important;
}

/* Mobile: Hamburger (links) und Warenkorb (rechts) etwas nach innen ruecken,
   damit mehr Abstand zum jeweiligen Bildschirmrand entsteht. Nur Mobile-Header. */
@media only screen and (max-width: 1067px) {
  .mobile-toggle {
    margin-left: -5px !important; /* vorher -15px -> ~10px weiter innen */
  }
  .thb-secondary-area.thb-header-right {
    margin-right: 8px !important;
  }
}

/* Angebotsprodukte (Quotify): In der Sticky-Leiste ersetzt "Angebot anfragen" den
   Warenkorb-Button. Der Preis daneben ist bereits ueber quotify-hide-price-<id>
   ausgeblendet, sodass unten weder Preis noch Kauf-Weg auftauchen. */
.product-add-to-cart-sticky--row > .single-add-to-cart-button[hidden] {
  display: none !important;
}
.product-add-to-cart-sticky--quote {
  white-space: nowrap;
}

/* eTrusted Bewertungs-Widget im Warenkorb, unter der Bezahlen-Spalte */
.cart-trust-widget {
  margin-top: 4px;
  width: 100%;
}
.cart-trust-widget etrusted-widget {
  display: block;
  width: 100%;
}

/* Header faehrt beim Runterscrollen aus dem Bild und beim Hochscrollen zurueck.
   Geschaltet wird die Klasse in header.js, der sticky Teil ist der Section
   Wrapper .header-section, nicht das Header Element darin. */
.header-section {
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform;
}
/* Zusaetzlich zur Verschiebung ausgeblendet, damit sie beim Hochscrollen
   hereinfadet statt nur hereinzurutschen. */
.header-section.header-scrolled-away {
  transform: translateY(-100%);
  opacity: 0;
}
/* Nur fuer den einen Bildlauf, in dem die Kopfzeile vom Mitscrollen ins
   Kleben wechselt. Ohne das animierte sie diesen Sprung und ploppte kurz auf. */
.header-section.header-ohne-uebergang {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .header-section {
    transition: none;
  }
}

/* Zusaetzliche Hoehenstufe fuer den Slider. Das Theme kennt ab Werk nur
   450, 550, 650 und 750. Michel wollte 500. */
@media only screen and (min-width: 768px) {
  .desktop-height-500 {
    min-height: 500px;
  }
}

/* Slider: Inhalte naeher an die Bildkante. Der Standard des Themes sind 50 px
   rundum, das schiebt Ueberschrift und Text unnoetig weit in die Flaeche. */
@media only screen and (min-width: 768px) {
  .main-slideshow .slideshow__slide-content {
    padding-left: 30px;
  }
}

/* Slider: sekundaerer Button als reiner Text. Kein Rahmen, keine Flaeche,
   Unterstreichung zieht bei Hover von links auf. Werte sind dieselben wie im
   Hauptmenue (.thb-full-menu--link) und in der USP Leiste. */
.slideshow__slide-content .button.link {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  height: auto;
  color: var(--color-text, #f7f7f7);
  position: relative;
  align-self: flex-start;
}
.slideshow__slide-content .button.link:after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1px;
  will-change: transform;
  transform: scale(0, 1);
  transform-origin: left center;
  background: currentColor;
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
}
.slideshow__slide-content .button.link:hover,
.slideshow__slide-content .button.link:focus-visible {
  background: none;
  color: var(--color-text, #f7f7f7);
}
.slideshow__slide-content .button.link:hover:after,
.slideshow__slide-content .button.link:focus-visible:after {
  transform: scale(1, 1);
}

/* Steuerhinweis im Warenkorb, sitzt ueber der Summen-Box in der rechten Spalte.
   Die Box selbst hat 40px Abstand nach unten, der Hinweis haengt mit 10px direkt
   darueber, damit beide optisch zusammengehoeren. */
.cart-tax-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  padding: 12px 16px;
  border-radius: var(--block-border-radius, 16px);
  background: rgba(var(--color-accent-rgb), 0.07);
  color: var(--color-accent);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.cart-tax-note__icon {
  flex: 0 0 auto;
  /* Icon auf die erste Textzeile ausrichten statt auf die Oberkante */
  margin-top: 1px;
}

/* Der Seitenrahmen #wrapper ist ganzflaechig in der Fussfarbe eingefaerbt
   (footer.js), damit die abgerundete Fusszeile darunter durchscheint. Sobald
   die Kopfzeile beim Scrollen verschoben oder ausgeblendet ist, gaebe ihr
   Platz diese dunkelgruene Flaeche frei. Der Verlauf legt oben einen Streifen
   in der Kopfzeilenfarbe darueber: reines Malen, keine Verschiebung im
   Aufbau. Der Streifen liegt hinter allen Abschnitten, sichtbar wird er nur
   dort, wo sonst nichts ist.
   Hinweis: background-image gewinnt gegen die background-color, die footer.js
   direkt am Element setzt. */
#wrapper {
  background-image: linear-gradient(var(--color-header-bg, #f7f7f7), var(--color-header-bg, #f7f7f7));
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 320px;
}

/* Ladezustand der Angebot-anfragen-Knoepfe. Quotify holt den Inhalt des
   Angebotsfensters erst nach dem Klick, das dauert gemessen 0,5 bis 1,0
   Sekunden. Der Ring zeigt, dass der Klick angekommen ist.

   Der Ring sitzt NEBEN der Beschriftung, nicht darueber: Quotify faerbt den
   Text mit hoeherer Spezifitaet und !important, ein color: transparent von
   hier verliert. Nebeneinander braucht es diesen Kampf gar nicht. */
.quotify-laedt {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
  padding-right: 34px !important;
}
.quotify-laedt::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: quotify-dreht 0.7s linear infinite;
}
@keyframes quotify-dreht {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .quotify-laedt::after { animation-duration: 2s; }
}

/* Zahl am Warenkorb-Icon (Michel 15.09.2026): nur mit Inhalt sichtbar und
   pulsierend wie der gruene „Auf Lager"-Punkt. Die Theme-Skripte ersetzen beim
   Hinzufuegen nur den Inhalt von .thb-item-count; die Anzahl steckt deshalb im
   Inhalt (data-anzahl), nicht als Klasse am Kreis. Das Angebots-Icon ist ohnehin
   nur mit Inhalt sichtbar und pulsiert mit. */
.thb-secondary-area .thb-item-count:has([data-anzahl="0"]) {
  display: none !important;
}
.thb-secondary-area .thb-item-count {
  isolation: isolate;
}
.thb-secondary-area .thb-item-count::after {
  content: "";
  position: absolute;
  /* doppelt so gross wie der Kreis, wie beim „Auf Lager"-Punkt (8px Punkt,
     16px Puls): inventory-pulse skaliert von 0.5 (Kreisgroesse) auf 1. */
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -1;
  border-radius: 50%;
  background: inherit;
  animation: inventory-pulse 2s ease-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .thb-secondary-area .thb-item-count::after { animation: none; }
}

/* Verfuegbarkeit wie auf der PDP in Warenkorb und Angebotsliste
   (Werte aus product.css + pdp-feinschliff.css: 14px, Gruen, Puls-Punkt). */
.verfuegbarkeit-pdp .product-inventory-notice {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-inventory-instock, #279a4b);
}
.verfuegbarkeit-pdp .product-inventory-notice--text {
  display: flex;
  align-items: center;
  margin: 0;
}
.verfuegbarkeit-pdp .product-inventory-notice--pulse {
  display: inline-flex;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin: 4px 12px 4px 4px;
  position: relative;
  border-radius: 50%;
  background: var(--color-inventory-instock, #279a4b);
}
.verfuegbarkeit-pdp .product-inventory-notice--pulse:after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--color-inventory-instock, #279a4b);
  animation: inventory-pulse 2s ease-out infinite;
}


/* Michel 15.09.2026: Randlasche "Priority Member werden" (energie-popup) und
   schwebender iubenda-Knopf zum Wiederoeffnen des Cookie-Banners ausgeblendet. */
.ep-teaser-wrap,
.ep-root.show-teaser .ep-teaser-wrap {
  display: none !important;
}
/* iubenda setzt display per !important aus seinem eigenen (fremden) Stylesheet;
   :not(#x) hebt die Regel auf ID-Spezifitaet, damit sie gewinnt. */
html body .iubenda-tp-btn:not(#x):not(#y) {
  display: none !important;
}

/* Ausverkauft: „Bald wieder verfügbar" orange mit Puls, auf PDP und Produktkarte
   (Michel 15.09.2026). Farbe = Theme-Farbe fuer niedrigen Bestand. */
.product-inventory-notice.product-inventory-notice--bald {
  color: var(--color-inventory-lowstock, #e97f32);
}
.product-inventory-notice--bald .product-inventory-notice--pulse,
.product-inventory-notice--bald .product-inventory-notice--pulse:after {
  background: var(--color-inventory-lowstock, #e97f32);
}