/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 5 nov 2022, 11:24:55
    Author     : Utente
*/


/*
  LANDINGPAGE CSS IMPORT VORÜBERGEHEND FALLS KEIN ZUSÄTZLICHER EINTRAG IN DEN METAS REIN SOLL
*/
/* @import "lp.css"; */
/*
    ----------------------------
*/

/*
    lISTEN UND TABELLENEINSTELLUNGEN IN DER PORUDKTSEITE
*/

html {
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
}


.tab-text ul li {
    list-style: square;
    font-size: var(--sm);
    font-weight: 400;
    line-height: 1.71;
    color: var(--grey);
    margin-left: 30px;
}

.tab-text ul li::marker {
    font-size: var(--sm);
    color: var(--sandstone);
    font-weight: 600;
}

.tab-text ul ul li {
    list-style: circle;
    font-size: var(--sm);
    font-weight: 400;
    line-height: 1.71;
    color: var(--grey);
    margin-left: 30px;
}

.tab-text table th {
    font-size: var(--sm);
    font-weight: 500;
    line-height: 1.43;
    color: var(--grey);
}

.tab-text table td {
    color: var(--grey);
}

.alx-table-background-color {
    background-color: var(--lt-color-gray-200);
}

.alx-table-th-dog-background-color {
    background-color: var(--green)
}

.alx-table-th-cat-background-color {
    background-color: var(--cool-blue);
}

/*
    ----------------------------
*/

/*
  LINKEINSTELLUNGEN IN DER PRODUKTSEITE
*/

.tab-text a {
    color: var(--black);
    text-decoration: underline;
}

/*
    ----------------------------
*/

/*
    HR-SPACEEINSTELLUNGEN IN DER PRODUKTSEITE
*/

.alx-hr {
    border-bottom: solid 1px;
    border-color: var(--bs-gray-400);
}

/*
    ----------------------------
*/

/*
    PRODUKTEMPFEHLUNG IN DER PRODUKTSEITE
*/

.alx-product-referral{
    background-color: var(--bs-gray-200);
    border: solid 1px;
    border-radius: 4px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    border-color: var(--bs-gray-400);
    margin-top: 13px;
}

/*
    ----------------------------
*/

/*
    BIOZIDTEXT IN DER PRODUKTSEITE
*/

.alx-p-biozid {
    font-size: var(--xs);
}

/*
    ----------------------------
*/

/*
    TEXT IN WEISS IN DER PRODUKTSEITE
*/

.alx-p-whitetext {
    color: var(--white);
}

/*
    ----------------------------
*/

/*
  LINKEINSTELLUNGEN IN DEN FOOTERSEITEN
*/

.alx-a-underline {
    color: var(--black);
    text-decoration: underline;
}

/*
    ----------------------------
*/

/*
  LISTENEINSTELLUNGEN IN DEN FOOTERSEITEN
*/

.alx-ul-footersites {
    list-style: square;
    font-size: var(--sm);
    font-weight: 400;
    line-height: 1.71;
    color: var(--grey);
    margin-left: 30px;
}

/*
    ----------------------------
*/

/*
  LISTENEINSTELLUNGEN IN DEN ZAHLUNGSEINSTELLUNGEN IM CHECKOUT
*/

.alx-ul-payments-co {
    list-style: square;
    font-size: var(--xs);
    font-weight: 400;
    line-height: 1.71;
    color: var(--grey);
    margin-left: 20px;
    text-align: left;
}

.bold {
    font-size: var(--xs);
    font-weight: 500;
}

@media (max-width: 575px) {
  .paypal-text {
      padding-top: 20px !important;  /* MUSS ICH LEIDER SO MACHEN DA DIE zahlung.css die letzte geladene CSS ist. */
      padding-right: 15px !important; /* MUSS ICH LEIDER SO MACHEN DA DIE zahlung.css die letzte geladene CSS ist. */
      padding-left: 10px !important; /* MUSS ICH LEIDER SO MACHEN DA DIE zahlung.css die letzte geladene CSS ist. */
      padding-bottom: 1px !important; /* MUSS ICH LEIDER SO MACHEN DA DIE zahlung.css die letzte geladene CSS ist. */
  }
}

/*
    ----------------------------
*/

/*
  PARALLEX MOBILE ANZEIGE BANNERBILD IN DEN PRODUKTSEITEN
*/

@media (max-width: 575px) {
  .parallex-bg-area {
      height: 450px;
      background-size: 250%;
      background-repeat: no-repeat;
  }
}

/*
    ----------------------------
*/

/*
  BANNER AREA MOBILE ANZEIGE BANNERBILD IN DEN PRODUKTSEITEN
*/

@media (max-width: 991px) {
  .banner-area {
      background-position: 53%;
  }
}

@media (max-width: 575px) {
  .banner {
      height: 180px;
  }
  .banner h1 {
    padding-bottom: unset;
  }
}

/*
    ----------------------------
*/

/*
  DETAILANZEIGE IN DEN ZAHLUNGSEINSTELLUNGEN IM CHECKOUT
*/

.zahlung-accorderion.active {
    background-color: #fafafa;
}

/*
    ----------------------------
*/


/*
  CHECKOUT-PRODUKTÜERSICHT ÄNDERUNG ALX 30.11.22
*/

@media (max-width: 575px) {
.info-prod-name h3 {
    margin-left: 14px !important; /* MUSS ICH LEIDER SO MACHEN DA DIE information.css NACH DER alx.css GELADEN WIRD. */
  }
}

.co-totals-detail-prod-name {
    text-align: unset;
    margin-left: 14px;
}

.co-totals-detail-prod-size {
    text-align: unset;
    margin-left: 14px;
}
/*
    ----------------------------
*/


/*
  WARENKORB ÄNDERUNG ALX 30.11.22
*/
.warenkorb-product {
    text-align: left !important; /* MUSS ICH LEIDER SO MACHEN DA DIE warenkorb.css NACH DER alx.css GELADEN WIRD. */
  }

@media (max-width: 991px) {
  .warenkorb-product {
    text-align: center !important; /* MUSS ICH LEIDER SO MACHEN DA DIE warenkorb.css NACH DER alx.css GELADEN WIRD. */
  }
}

@media (max-width: 991px) {
  .warenkorb-table tr td:first-child, .warenkorb-table tr th:first-child {
    padding-left: 5px !important; /* MUSS ICH LEIDER SO MACHEN DA DIE warenkorb.css NACH DER alx.css GELADEN WIRD. */
  }
}

@media (max-width: 575px) {
  span.wk-detail-prod-name {
    font-size: 9px;
  }
}

@media (max-width: 575px) {
  span.wk-detail-prod-title {
    font-size: 10px;
  }
}

/*
    ----------------------------
*/

/*
  WARENKORB POPUP ÄNDERUNG ALX 05.12.22
*/
.close-cart-single {
    margin-left: 24px;
}

.cart-title a {
    font-size: 14px;
    color: var(--brownish-grey);

}

.cart-title i {
    color: var(--sandstone);
}

.cart-footer {
    position: sticky;
    bottom: 0;
    background-color: white;
    border-top: 1px solid #ddd;
}

.cart-footer-table {
    margin-top: unset;
    padding-top: 20px;
    border-top: unset;
}

.cartArea {
    width:500px;
}

@media (max-width: 575px) {
  .cartArea-mobile.active, .cartArea-mobile {
      right: 0px;
      top: 47px;
      width:100%;
  }
}

.popup-cart-minimize {
  background:unset;
}

/*
    ----------------------------
*/

/*
 55. CHECKOUT INFO : Accordion Konto anlegen - MGN 05/12/2022 (Liste 4))
*/

.accordion-customer-account-ul {
  list-style: square;
  font-size: var(--xs);
  line-height: 1.71;
  color: var(--grey);
  margin-left: 30px;
}

.accordion-icon {
    cursor: help;
}

/*
    ----------------------------
*/

/*
  POPUP WARENKORB COMMUNITY TEXT ALX 19.12.22
*/
.cart-community p {
    font-weight: 500;
    font-size:16px;
}

/*
    ----------------------------
*/

/*
  WARENKORBTITEL MIT TIERART ANPASSUNG ALX 06.12.22
*/
.info-single-right {
    margin-left: 10px;
}

/*
    ----------------------------
*/

/*
  ÜBERSCHRIFTEN IM CHECKOUT A-HOVER KORREKTUR SOWIE MOBILE PADDING RIGHT ALX 08.12.22
*/
.shopping-menu li a.active a:hover {
    color: var(--black) !important; /* MUSS ICH LEIDER SO MACHEN DA DIE warenkorb.css NACH DER alx.css GELADEN WIRD. */
}

.shopping-menu li a:hover {
    color: #dcdcdc !important; /* MUSS ICH LEIDER SO MACHEN DA DIE warenkorb.css NACH DER alx.css GELADEN WIRD. */
}

@media (max-width: 575px) {
.information-menu {
    padding-right: 80px !important; /* MUSS ICH LEIDER SO MACHEN DA DIE warenkorb.css NACH DER alx.css GELADEN WIRD. */
  }
}

/*
    ----------------------------
*/

/*
  DANKESEITE TEXT FÜR BEWERTUNGSABGABE MOBILE ÄNDERUNG ALX 13.12.22
*/

@media (max-width: 575px) {
  .co-danke-spaeter-bewerten {
      max-width:100%;
      font-size: var(--sm);
  }
}

/*
  FOOTERSEITEN MOBILE KORREKTUR HEADERBEREICH UND POPUPWK ALX 16.12.22
*/

@media (max-width: 400px) {
  .navbar-light .navbar-brand {
    max-width: 150px!important; /* MUSS ICH LEIDER SO MACHEN DA SONST DIE @media Eigenschaft von der style.css:2159 genommen wird */
  }
  .cart {
      top: 33px !important; /* MUSS ICH LEIDER SO MACHEN DA SONST DIE @media Eigenschaft von der style.css:2010 genommen wird */
  }
}
.cart i{
    color: var(--white) !important; /* MUSS ICH LEIDER SO MACHEN DA SONST DIE @media Eigenschaft von der style.css:2007 genommen wird */
}

/*
    ----------------------------
*/

/*
  FOOTERSEITEN POPUP WK KORREKTUR ALX 16.12.22
*/

.btn-border a {
    border: solid 2px var(--black) !important; /* MUSS ICH LEIDER SO MACHEN DA SONST DIE @media Eigenschaft von der style.css:2007 genommen wird */
    background-color: var(--white) !important;/* MUSS ICH LEIDER SO MACHEN DA SONST DIE @media Eigenschaft von der style.css:2007 genommen wird */
    width: 100% !important; /* MUSS ICH LEIDER SO MACHEN DA SONST DIE @media Eigenschaft von der style.css:2007 genommen wird */
}

input.coupon {
      background: var(--sandstone);
}

/*
  ACTIVE EFFECT LINKS UND BUTTONS 19.12.22
*/

.btn-border a:active, .zurKasseBtn:active, .zumVersandButton:active, .coupon:active {
  transform: scale(0.98)!important; /* KANN RAUS ZUM LOADING BUTTON ERSTELLEN, TIMEOUT DER CHECKOUT API AUF 1 SEK SETZEN, WENN MÖGLICH */
  opacity: 0.5 !important; /* KANN RAUS ZUM LOADING BUTTON ERSTELLEN, TIMEOUT DER CHECKOUT API AUF 1 SEK SETZEN, WENN MÖGLICH */
        }

a:active {
  transform: scale(0.98);
    opacity: 0.5;
}

button:active {
    transform: scale(0.98);
      opacity: 0.5;
}

/*
    ----------------------------
*/

/*
  FAVORITEN HERZ AUSGEBLENDET 19.12.22
*/
.heart {
    display: none;
}

/*
    ----------------------------
*/

/*
  PRODUKTBESCHREIBUNG BEWERTUNGSLINKS 19.12.22
*/
.star-in a, .star-in p  {
      text-decoration: underline;
      cursor:pointer;
}

/*
    ----------------------------
*/

/*
  HOME BANNER AREA MOBILE 20.12.22
*/
@media (max-width: 575px) {
  .home-banner-area {
    background-size: cover!important; /* MUSS ICH LEIDER SO MACHEN DA DIE home.css NACH DER alx.css GELADEN WIRD. */
    background-position: 68%!important; /* MUSS ICH LEIDER SO MACHEN DA DIE home.css NACH DER alx.css GELADEN WIRD. */
  }
}

/*
    ----------------------------
*/


/*
  HOME BANNER AREA MOBILE 20.12.22
*/

.checkout-paypal-fees {
    font-size: var(--xxs);
    padding-top: 10px;
}

/*
    ----------------------------
*/

/*
  PRODUKTSEITE ABSTANDKORREKTUR 20.12.22
*/

.product-slider-area {
  padding-bottom: 0px;
}
.tab-area {
    padding-top: 30px;
}
/*
    ----------------------------
*/

/*
  FLEX KORREKTUR GEBINDEGROESSEN FÜR MOBIL 27.12.22
*/

.radio_container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 1em;
}

/*
    ----------------------------
*/

/*
  ÜBERSCHRIFT BEZ 1 UND 2 KEIN UPPERCASE 27.12.22
*/

.product-slider-text h2.sub-title {
    text-transform: none;
}
/*
    ----------------------------
*/

/*
  BREADCRUMP DISPLAY NONE 27.12.22
*/

.breadcrumb {
    display: none;
}

/*
    ----------------------------
*/

/*
  BEWERTUNGSSLIDER KORREKTUR MOBIL 27.12.22
*/

@media (max-width: 575px) {
.slider {
    padding: 0!important; /* MUSS ICH LEIDER SO MACHEN DA DIE home.css NACH DER alx.css GELADEN WIRD. */
  }
}

/*
    ----------------------------
*/

/*
  BANNERLOGO  27.12.22
*/

.banner-logo {
    width: 200px;
    position: absolute;
    right: 0;
    bottom: -100px;
    z-index: 20;
}

@media (max-width: 991px) {
  .banner-logo {
    width: 120px;
    bottom: -60px;
  }
}

@media (max-width: 767px) {
  .banner-logo {
    width: 120px;
    bottom: -60px;
  }
}
@media (max-width: 575px) {
  .banner-logo {
    width: 80px;
    bottom: -40px;
  }
}

/*
    ----------------------------
*/

/*
  KORREKTUR H2 IN DEN BANNER FÜR MOBILE
*/

@media (max-width: 767px) {
  .banner h1 {
    font-size: var(--lg2)!important;
    padding-top: 30px;
    text-align: center;
  }
  .warenkorb-banner-area .banner h2 {
    padding-top: 30px;
  }
}

/*
    ----------------------------
*/

/*
  KORREKTUR CHECKOUT PRDOUKTBILD FÜR MOBILE
*/

@media (max-width: 575px) {
.info-prod-img {
    padding: 4px!important;
    width: 80px!important;
  }
}

/*
    ----------------------------
*/


/*
  PAYPAL EXPRESS AUSGEBLENDET
.checkout-paypal {
    display: none;
}
*/

/*
    ----------------------------
*/

/*
  KORREKTUR PRODUKTSEITE AUSBLENDEN BEWERTUNG ABGEBEN NEBEN DEN RATINGSSTARS
*/

a.revTab {
    display: none;
}


/*
    ----------------------------
*/

/*
  VIDEO EINSTELLUNGEN PRODUKTBESCHREIBUNG
*/
/*

.videoplayer-desc {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    margin-bottom: 20px;
    margin-top: 20px;
}
.prs-video {

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

*/
.videoplayer-desc {
    width: 60%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
    display: block;
    margin: 20px auto;
    position: relative;
}

@media (max-width: 768px) {
    .videoplayer-desc {
    width: 100%;
 }
}
/*
  KORREKTUR PRODUKTSEITEN HAUPTBILD BLENDMODE
*/

.single-slide img.product-img-blend-mode {
    -webkit-mix-blend-mode: normal;
    mix-blend-mode: normal;
    /* mix-blend-mode: darken; */
}
/*
    ----------------------------
*/


/* Kleiner Inline-Spinner im Button */
.alv-btn-loading {
  position: relative;
  pointer-events: none;
  opacity: .9;
}
.alv-btn-loading .alv-btn-spinner {
  width: 1em; height: 1em;
  display: inline-block;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: alv-spin .8s linear infinite;
  vertical-align: -0.2em;
  margin-left: .5em;
}
@keyframes alv-spin { to { transform: rotate(360deg); } }

.alv-page-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: none; align-items: center; justify-content: center;
  background: rgba(17,17,17,.45); backdrop-filter: blur(2px);
}
.alv-page-overlay.is-visible { display: flex; }

/* Herz-Logo pulsierend (Herzschlag) */
.alv-heart-pulse {
  width: 30px; height: 30px;
  animation: alv-pulse 1.2s ease-in-out infinite;
}
@keyframes alv-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.2); opacity: 0.75; }
}

.alv-scroll-lock { overflow: hidden !important; }

.alv-done-pulse {
  position: fixed; z-index: 100000; inset: 20px auto auto 20px;
  background: #12b886; color: #fff; padding: 10px 12px; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.2); font-size: 14px;
  animation: alv-fadeout .8s ease-in 0.4s forwards;
}
@keyframes alv-fadeout { to { opacity: 0; transform: translateY(4px); } }

/* Loader-Container mit Herz + Ring + Dots */
.alv-heart-loader{
  position: relative;
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
}

/* Drehender Ring als eindeutiger Lade-Indikator */
.alv-heart-ring{
  position: absolute; inset: 0;
  border: 4px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: alv-spin 1s linear infinite;
}

/* Drei Ladepunkte darunter für zusätzliches „Laden“-Gefühl */
.alv-loader-dots{
  position: absolute; left: 50%; bottom: -18px;
  transform: translateX(-50%);
  display: flex; gap: 4px;
}
.alv-loader-dots span{
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; opacity: .6;
  animation: alv-dots 1.2s ease-in-out infinite;
}
.alv-loader-dots span:nth-child(2){ animation-delay: .2s; }
.alv-loader-dots span:nth-child(3){ animation-delay: .4s; }

@keyframes alv-dots{
  0%,100%{ transform: translateY(0); opacity: .3; }
  50%    { transform: translateY(-3px); opacity: 1; }
}



/* --- Global Horizontal Scroll aus --- */
html, body {
  overflow-x: hidden;
}



/* ===== Petisave Badge (zustandsabhängig: leer vs. Warenkorb > 0) ===== */

/* Zeilencontainer */
.upsell-rabatt-info-line {
  display: flex;
  align-items: center;
  margin: .5rem 0;
}

/* Ursprungs-PNG bleibt unsichtbar (dient ggf. als Link-Ziel im leeren WK) */
.upsell-help-image-sm {
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

/* --- Badge: Standard (WK leer) = MIT Icon-Platz links --- */
.upsell-rabatt-info-product {
  position: relative;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .7rem .4rem 2rem; /* Platz fürs Icon links */
  border-radius: 4px;
  background: #f2fbf2;
  border: 1px solid rgba(60,150,90,.3);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.06);
  color: #114a2c;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* Icon (Font Awesome „info“) + dezenter Glow – nur im Standardzustand */
.upsell-rabatt-info-product::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;              /* Solid */
  content: "\f129";              /* fa-info */
  position: absolute;
  left: .55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2rem; height: 1.2rem;
  border-radius: 3px;
  background: #3aa66a;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  pointer-events: none;
  z-index: 1;
}
.upsell-rabatt-info-product::after {
  content: "";
  position: absolute;
  left: .55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2rem; height: 1.2rem;
  border-radius: 3px;
  background: #3aa66a;
  animation: petisaveGlow 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes petisaveGlow {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: .5; }
  50%      { transform: translateY(-50%) scale(1.6); opacity: 0; }
}

/* Warenkorb GEFÜLLT → Icon aus + linker Einzug weg (schlichter Badge) */
.alv-has-cart .upsell-rabatt-info-product {
  padding-left: .7rem !important; /* wie rechts – kein Icon-Platz */
}
.alv-has-cart .upsell-rabatt-info-product::before,
.alv-has-cart .upsell-rabatt-info-product::after {
  content: none !important;
  display: none !important;
}

/* Betonung */
.upsell-rabatt-info-product #upsell-rabatt-percent,
.upsell-rabatt-info-product #upsell-rabatt-value {
  font-weight: 700;
}

/* Hover (optional, Desktop) */
@media (hover:hover) and (pointer:fine) {
  .upsell-rabatt-info-product:hover {
    background: #e6f9e6;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
  }
}

/* Tap-Feedback (mobil, nur im Standardzustand relevant) */
.upsell-rabatt-info-product:active::before {
  background: #2d7f52;
}
.upsell-rabatt-info-product:active::after {
  background: #2d7f52;
  animation: none;
  opacity: .6;
  transform: translateY(-50%) scale(1.2);
}

/* Dark Mode 
@media (prefers-color-scheme: dark) {
  .upsell-rabatt-info-product {
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) border-box,
      radial-gradient(120% 120% at 0% 0%, #2d4a37, #284633) border-box;
    border-color: rgba(255,255,255,.08);
    color: #d6f7e5;
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
  }
  .alv-has-cart .upsell-rabatt-info-product::before,
  .alv-has-cart .upsell-rabatt-info-product::after {
    display: none !important;
  }
}
*/


/* ===== Petisave: Kategorie-Ansicht ===== */

/* Zeile optional, falls du sie brauchst */
.rabatt-listing-detail-row {
  display: flex;
  align-items: center;
  margin: .5rem 0;
}

/* --- Badge: Standard (WK leer) = MIT Icon-Platz links --- */
.upsell-rabatt-info-listing-detail {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .7rem .4rem 2rem; /* Platz fürs Icon links */
  border-radius: 4px;
  background: #f2fbf2;
  border: 1px solid rgba(60,150,90,.3);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.06);
  color: #114a2c !important;
  font-weight: 600 !important;
  font-size: .9rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  margin: 10px 0;
}

/* Icon + Glow (nur wenn WK leer, d. h. ohne .alv-has-cart auf <html>) */
.upsell-rabatt-info-listing-detail::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* Solid */
  content: "\f129"; /* fa-info */
  position: absolute;
  left: .55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2rem; height: 1.2rem;
  border-radius: 3px;
  background: #3aa66a;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  pointer-events: none;
  z-index: 1;
}
.upsell-rabatt-info-listing-detail::after {
  content: "";
  position: absolute;
  left: .55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2rem; height: 1.2rem;
  border-radius: 3px;
  background: #3aa66a;
  animation: petisaveGlow 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* WK GEFÜLLT → Icon weg + linker Einzug entfernen */
.alv-has-cart .upsell-rabatt-info-listing-detail {
  padding-left: .7rem !important;
}
.alv-has-cart .upsell-rabatt-info-listing-detail::before,
.alv-has-cart .upsell-rabatt-info-listing-detail::after {
  content: none !important;
  display: none !important;
}

/* Betonung: Prozent & Wert */

span.upsell-rabatt-listing-detail-percent {
  color: #114a2c !important;
}

span.upsell-rabatt-listing-detail-percent,
span.upsell-rabatt-listing-detail-value {
  font-weight: 700 !important;
}

/* Hover (optional) */
@media (hover:hover) and (pointer:fine) {
  .upsell-rabatt-info-listing-detail:hover {
    background: #e6f9e6;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
  }
}

/* Dark Mode (gleich wie Detail) 
@media (prefers-color-scheme: dark) {
  .upsell-rabatt-info-listing-detail {
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) border-box,
      radial-gradient(120% 120% at 0% 0%, #2d4a37, #284633) border-box;
    border-color: rgba(255,255,255,.08);
    color: #d6f7e5;
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
  }
}
*/

/* ===== POPUP: Petisave gesamt (mittig, Icon klickbar) ===== */

p.upsell-gesamt {
  display: inline-flex;
  align-items: center;          /* vertikal mittig */
  gap: .45rem;
  margin-top: .9rem;
  padding: .4rem .7rem;         /* kein extra padding links, Icon zählt mit */
  border-radius: 4px;
  background: #f2fbf2;
  border: 1px solid rgba(60,150,90,.3);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.7),
              0 1px 2px rgba(0,0,0,.06);
  color: #114a2c;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  position: relative;
}

/* Sichtbares Icon (immer da) */
p.upsell-gesamt::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f129";              /* fa-info */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem; 
  height: 1.2rem;
  border-radius: 3px;
  background: #3aa66a;
  color: #fff;
  font-size: .8rem;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  z-index: 1;
  flex-shrink: 0;                /* Icon fix */
}

/* Glow-Animation */
p.upsell-gesamt::after {
  content: "";
  position: absolute;
  left: .7rem;                   /* Icon-Position mittig treffen */
  top: 50%;
  transform: translateY(-50%);
  width: 1.2rem; 
  height: 1.2rem;
  border-radius: 3px;
  background: #3aa66a;
  animation: petisaveGlow 2.4s ease-in-out infinite;
  z-index: 0;
}

/* Unsichtbares, klickbares Overlay (das echte <img>) */
.upsell-help-image-lg {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2rem;
  height: 1.2rem;
  opacity: 0;          /* unsichtbar */
  pointer-events: auto;/* klickbar */
  z-index: 3;
}

/* Spare-Betrag */
p.upsell-gesamt span {
  font-weight: 700 !important;
  color: #008000 !important;
}


/* =========================================================
   HAPPYCOR Manuka – Komplette, aufgeräumte Modul-CSS
   Namespace: .hcintro-scope
   Vorgaben: keine runden Elemente, klare Kanten,
             Chips als Karten (wie Trustcards), kein Slider
   ========================================================= */

/* ===== Scoped Reset (verhindert fremde Vererbungen) ===== */
.hcintro-scope, .hcintro-scope * { box-sizing: border-box; }
.hcintro-scope h1, .hcintro-scope h2, .hcintro-scope h3,
.hcintro-scope h4, .hcintro-scope h5, .hcintro-scope h6,
.hcintro-scope p, .hcintro-scope ul, .hcintro-scope li,
.hcintro-scope figure, .hcintro-scope blockquote { margin: 0; padding: 0; }
.hcintro-scope ul { list-style: none; }

/* ===========================
   Design-Variablen
   =========================== */
.hcintro-scope{
  --hc-text: #111;
  --hc-text-2: #333;

  /* Manuka-Farbwelt */
  --hc-honey-020: #fbf9f4;  /* fast weiß, sehr dezentes Honigbeige */
  --hc-honey-050: #f7f2e3;  /* sehr helles Honigbeige */
  --hc-honey-100: #f2ead6;  /* Honig-Beige (Badge/Chips) */
  --hc-honey-300: #eacb79;  /* lebhafter Honigton (Hover) */
  --hc-honey-400: #c6b371;  /* Sandstone (Border/CTA) */
  --hc-honey-500: #9b7d36;  /* Gold (Akzent) */

  /* Layout */
  --hc-wrap: 960px;
  --hc-pad-y: clamp(28px, 4vw, 48px);
  --hc-pad-x: 24px;
  --hc-gap: 20px;

  /* Effekte */
  --hc-ease: 200ms ease;
  --hc-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --hc-shadow-md: 0 2px 6px rgba(0,0,0,.08);
  --hc-shadow-lg: 0 4px 12px rgba(155,125,54,.25); /* Gold-Schatten */
}

/* ===========================
   Sektionen (Grundlayout)
   =========================== */
.hcintro-scope > section {
  position: relative;
  z-index: 0;
  padding: var(--hc-pad-y) var(--hc-pad-x);
}

/* --- Farbwechsel NUR für Content-Sektionen, NICHT für CTA --- */
.hcintro-scope > section:not(.hcintro-cta):nth-of-type(odd)  { background: #fff; }
.hcintro-scope > section:not(.hcintro-cta):nth-of-type(even) { background: #fafafa; }

/* Gemeinsamer Wrapper */
.hcintro-scope .hcintro-wrap {
  max-width: var(--hc-wrap);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ===========================
   Typografie (Headlines)
   =========================== */
.hcintro-scope .hcintro-title{
  font-weight: 700;
  color: var(--hc-text);
  font-size: clamp(26px, 5vw, 40px);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.hcintro-scope .hcintro-sub{
  font-size: clamp(15px, 2vw, 17px);
  color: var(--hc-text-2);
  line-height: 1.5;
  margin: 12px 0 12px;
}
.hcintro-scope .hcintro-headline,
.hcintro-scope .hcintro-usage h2,
.hcintro-scope .hcintro-application h2,
.hcintro-scope .hcintro-hints h2,
.hcintro-scope .hcintro-social h2,
.hcintro-scope .hcintro-cta h2,
.hcintro-scope .hcintro-tradition h2,
.hcintro-scope .hcintro-mgo h2,
.hcintro-scope .hcintro-trust h2 {
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 600;
  color: var(--hc-text);
  margin: 0 0 16px;
}

/* ===========================
   Badge
   =========================== */
.hcintro-scope .hcintro-badge{
  display:inline-block;
  background: var(--hc-honey-100);
  color: var(--hc-honey-500);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid var(--hc-honey-400);
  margin-bottom: 10px;
  /* keine Rundungen */
}

/* ===========================
   Chips als Karten (wie Trustcards)
   =========================== */
.hcintro-scope .hcintro-chipstrip{ position:relative; margin-top:24px; }
.hcintro-scope .hcintro-chips{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hc-gap);
  list-style:none;
  padding:0;
  margin:12px 0 0 0;
}
@media (max-width: 1024px){
  .hcintro-scope .hcintro-chips{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .hcintro-scope .hcintro-chips{ grid-template-columns: 1fr; }
}
.hcintro-scope .hcchip{
  display:flex; align-items:center; gap:12px;
  background:#fafafa;
  border:1px solid #e6e6e6;
  padding:16px 18px;
  box-shadow: var(--hc-shadow-sm);
  color: var(--hc-text);
  font-size:14px;
  line-height:1.4;
  transition: transform var(--hc-ease), box-shadow var(--hc-ease), border-color var(--hc-ease);
  margin-left: 0 !important;
  /* keine Rundungen */
}
.hcintro-scope .hcchip:hover{
  transform: translateY(-3px);
  border-color: var(--hc-honey-400);
  box-shadow: var(--hc-shadow-lg);
}
.hcintro-scope .hcchip i{
  font-size:18px;
  line-height:1;
  color: var(--hc-honey-500);
  flex:0 0 auto;
}

/* ===========================
   Fließtext / Absätze (Basis)
   =========================== */
.hcintro-scope .hcintro-facts p,
.hcintro-scope .hcintro-usage p,
.hcintro-scope .hcintro-hints p,
.hcintro-scope .hcintro-mgo p,
.hcintro-scope .hcintro-application p,
.hcintro-scope .hcintro-tradition p,
.hcintro-scope .hcintro-trust p {
  margin: 0 0 16px;
  line-height: 1.58;
  color: var(--hc-text);
  letter-spacing: -0.003em;
}

.hcintro-scope .hcintro-trusttext {
  margin: 0 0 16px;
  line-height: 1.55;
  font-size: 15px;
  color: var(--hc-text-2);
}

/* ===========================
   Hinweisbox (global nutzbar)
   =========================== */
.hcintro-scope .hcintro-note{
  display:inline-block;
  max-width:90%;
  margin-top:12px;
  padding:8px 14px;
  border-left:3px solid var(--hc-honey-400);
  background:#fff; color: var(--hc-text);
  box-shadow: var(--hc-shadow-md);
  line-height:1.4; font-size:13px;
  /* keine Rundungen */
}

/* ===========================
   Facts Grid (Social Proof-Karten)
   =========================== */
.hcintro-scope .hcintro-factsgrid{
  display:flex; flex-wrap:wrap; gap: var(--hc-gap);
  /*margin-top:24px;*/
}
.hcintro-scope .factcard{
  flex:1 1 calc(33% - var(--hc-gap));
  min-width:200px;
  background:#fff;
  border:1px solid #e6e6e6;
  padding:20px;
  text-align:center;
  box-shadow: var(--hc-shadow-sm);
  transition: transform var(--hc-ease), box-shadow var(--hc-ease), border-color var(--hc-ease);
  /* keine Rundungen */
}
.hcintro-scope .factcard:hover{
  transform: translateY(-4px);
  border-color: var(--hc-honey-400);
  box-shadow: var(--hc-shadow-lg);
}
.hcintro-scope .fact-icon{
  font-size:22px; font-weight:700; color: var(--hc-honey-500); margin-bottom:6px;
}
.hcintro-scope .fact-text{
  font-size:14px; color: var(--hc-text); line-height:1.4;
}

/* ===========================
   TRUST – Zertifikate & Herkunft
   =========================== */
.hcintro-scope .hcintro-trustgrid{
  display:flex; flex-wrap:wrap; gap: var(--hc-gap);
  margin-top:24px;
}
.hcintro-scope .trustcard{
  flex:1 1 calc(33% - var(--hc-gap));
  min-width:200px; background:#fafafa;
  border:1px solid #e6e6e6; padding:18px; text-align:center;
  box-shadow: var(--hc-shadow-sm);
  transition: transform var(--hc-ease), box-shadow var(--hc-ease), border-color var(--hc-ease);
  /* keine Rundungen */
}
.hcintro-scope .trustcard:hover{
  transform: translateY(-3px);
  border-color: var(--hc-honey-400);
  box-shadow: var(--hc-shadow-lg);
}
.hcintro-scope .trust-icon{
  font-size:22px; font-weight:700; color: var(--hc-honey-500); margin-bottom:6px;
}
.hcintro-scope .trust-text{
  font-size:14px; color: var(--hc-text); line-height:1.4;
}

/* ===========================
   Anwendung & Dosierung – Grid
   =========================== */
.hcintro-scope .hcintro-appgrid{
  margin-top:24px; margin-bottom:24px;
  display:flex; flex-wrap:wrap; gap:24px;
}
.hcintro-scope .appcard{
  flex:1 1 calc(33% - 24px);
  min-width:260px;
  background: var(--hc-honey-020);
  border:1px solid #e6e6e6;
  padding:18px;
  box-shadow: var(--hc-shadow-sm);
  transition: transform var(--hc-ease), box-shadow var(--hc-ease), border-color var(--hc-ease);
  /* keine Rundungen */
}
.hcintro-scope .appcard:hover{
  transform: translateY(-3px);
  border-color: var(--hc-honey-400);
  box-shadow: var(--hc-shadow-lg);
}

/* Überschriften in Appcards – Text links, Icon rechts */
.hcintro-scope .hcintro-application .appcard h3{
  display:flex; justify-content:space-between; align-items:center;
  margin:0 0 12px; font-size:18px; font-weight:700; color: var(--hc-text);
  letter-spacing:.5px; transition:color var(--hc-ease);
}
.hcintro-scope .hcintro-application .appcard h3 i{
  font-size:20px; margin-left:12px;
}
.hcintro-scope .hcintro-application .appcard h3:hover{
  color: var(--hc-honey-400); cursor: default;
}

/* Listen in Appcards */
.hcintro-scope .appcard ul{
  margin:0; 
  list-style: disc inside;
  font-size:14px; line-height:1.5; color:#333;
}

/* ===========================
   Hinweise & Rechtliches
   =========================== */
.hcintro-scope .hcintro-legal{
  margin-top:18px;
  font-size:13px; color: var(--hc-text-2);
  line-height:1.5;
}

/* ===========================
   Social Proof
   =========================== */
.hcintro-scope .hcintro-social h2{ text-align:center; }
.hcintro-scope .hcintro-social .factcard{
  flex:1 1 calc(33% - var(--hc-gap));
  min-width:200px; background:#fafafa;
  border:1px solid #e6e6e6; padding:18px; font-size:14px;
  box-shadow: var(--hc-shadow-sm);
}

/* ===========================
   CTA (bewusst NICHT Teil des Farbwechsels)
   =========================== */
.hcintro-scope .hcintro-cta {
  background: var(--hc-honey-050);  /* ruhiger Abschluss wie vorher */
  text-align: center;
}
.hcintro-scope .hcintro-cta h2{ margin-bottom:16px; }
.hcintro-scope .hcintro-cta p{
  margin:0 auto 24px; max-width:640px;
  line-height:1.55; color: var(--hc-text-2);
}
.hcintro-scope .hcintro-cta .alv-upsell-add-to-cart{
  background: var(--hc-honey-400);
  color:#fff; font-weight:600; font-size:14px;
  padding:14px 28px; border:0; text-transform:uppercase;
  cursor:pointer; box-shadow: var(--hc-shadow-md);
  transition: background var(--hc-ease), box-shadow var(--hc-ease);
  /* keine Rundungen */
}
.hcintro-scope .hcintro-cta .alv-upsell-add-to-cart:hover{
  background: var(--hc-honey-500);
  box-shadow: var(--hc-shadow-lg);
}
.hcintro-scope .hcintro-cta .hcintro-scroll-btn {
  display: inline-block;
  background: var(--hc-honey-400);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 14px 28px;
  margin-top: 16px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--hc-shadow-md);
  transition: background var(--hc-ease), box-shadow var(--hc-ease);
  /* keine Rundungen */
}
.hcintro-scope .hcintro-cta .hcintro-scroll-btn:hover {
  background: var(--hc-honey-500);
  box-shadow: var(--hc-shadow-lg);
}
.hcintro-scope .hcintro-cta .hcintro-scroll-btn i {
  margin-left: 8px;
  font-size: 14px;
  color: #fff;
}

/* ===========================
   Tradition & Einordnung
   =========================== */
.hcintro-scope .hcintro-tradition p {
  margin: 0 0 16px;
  line-height: 1.58;
  font-size: 15px;
  color: var(--hc-text-2);
}

/* ===========================
   Icons / Glanz-Effekt
   =========================== */
.hcintro-scope .hcintro-application .appcard h3 i {
  font-size: 26px;
  color: var(--hc-honey-100); /* sehr hell, wie Wasserzeichen */
  margin-right: 10px;
}
.glanz-icon {
  position: relative;
  display: inline-block;
  color: #bfa04a;
  background: linear-gradient(135deg,#b48a2b 0%,#c6a64f 35%,#e2c75f 50%,#c6a64f 65%,#b48a2b 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: honey-shimmer 3.5s ease-in-out infinite alternate;
}
@keyframes honey-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Badge (mit Glanz-Overlay – optional) */
.hcintro-badge {
  position: relative;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 6px 14px;
  margin-bottom: 10px;
  background: var(--hc-honey-100);
  color: var(--hc-honey-500);
  border: 1px solid var(--hc-honey-400);
  border-radius: 2px; /* minimal, bei Bedarf auf 0 setzen */
  letter-spacing: 0.5px;
  line-height: 1.4;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.hcintro-badge::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg,transparent 0%,rgba(255,230,150,.25) 40%,rgba(255,240,200,.4) 50%,rgba(255,230,150,.25) 60%,transparent 100%);
  transform: rotate(25deg);
  animation: badge-shine 5s infinite linear;
}
@keyframes badge-shine {
  0%   { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(100%) rotate(25deg); }
}

/* ===========================
   Responsive Feinheiten
   =========================== */
@media (max-width: 1024px){
  .hcintro-scope .factcard,
  .hcintro-scope .trustcard { flex:1 1 calc(50% - var(--hc-gap)); }
}
@media (max-width: 600px){
  .hcintro-scope .factcard,
  .hcintro-scope .trustcard { flex:1 1 100%; }
  .hcintro-scope .appcard{ min-width:100%; flex:1 1 100%; }
}

/* ===========================
   Utility
   =========================== */
.hcintro-scope .is-hidden{ display:none !important; }

/* ===========================
   Absatz-Typo vereinheitlichen (nur <p>)
   (am Ende lassen, damit es alles überstimmt)
   =========================== */
.hcintro-scope .hcintro-wrap p{
  font-size: var(--sm);   /* Shop-Standard (≈16px) */
  line-height: 1.58;
}
@media (max-width: 480px){
  .hcintro-scope .hcintro-wrap p{ font-size: var(--sm); /* ≈16px */ }
}

/* ===========================================
   HONEYWEB – weiße Blöcke, Rand-Fade + Parallax
   (einfach ans CSS-Ende packen)
   =========================================== */

/* Steuer-Variablen (dezente Defaults) */
.hcintro-scope{
  --honey-url: url("/themes/sugar/assets/img/honeyweb.svg");

  /* Sichtbarkeit & Optik */
  --honey-intensity: .54;              /* 0..1 (höher = sichtbarer) */
  --honey-size: 600px auto;            /* 600–1200px */
  --honey-pos:  right -40px top -10px; /* z.B. center top | left ... */
  --honey-pos:  center; /* z.B. center top | left ... */
  --honey-repeat: repeat;              /* repeat | no-repeat */

  /* Parallax: Desktop fixed, Mobile scroll */
  --honey-attach: fixed;               /* fixed = Parallax-Gefühl */
  --honey-attach-mobile: scroll;       /* iOS/klein: stabil ohne fixed */
  
  /* Sanftes Ausblenden zum Rand */
  --honey-fade-x: 48px;  /* links/rechts */
  --honey-fade-y: 56px;  /* oben/unten */
}

/* Mobile/Tablet feinjustieren */
@media (max-width: 1024px){
  .hcintro-scope{
    --honey-size: 680px auto;
    --honey-pos:  right -20px top -6px;
    --honey-intensity: .54;
    --honey-fade-x: 32px;
    --honey-fade-y: 40px;
  }
}

/* Anwendung NUR in weißen Sections (odd) – CTA & HERO ausgeschlossen
   → wenn auch im Hero gewünscht, :not(.hcintro-hero) entfernen. */
.hcintro-scope > section:not(.hcintro-cta):not(.hcintro-hero):not(.hcintro-nohoney):nth-of-type(odd){
  position: relative;

  /* aus Intensität eine Dimmung ableiten (je höher intensity, desto weniger Weiß-Overlay) */
  --_dim: clamp(0, calc(1 - var(--honey-intensity)), 1);

  /* Desktop: Parallax (fixed), Mobile: scroll */
  --_attach-svg: var(--honey-attach);
}
@media (max-width:1024px){
  .hcintro-scope > section:not(.hcintro-cta):not(.hcintro-hero):nth-of-type(odd){
    --_attach-svg: var(--honey-attach-mobile);
  }
}

/* Layer-Stack:
   A vertikaler Fade  B horizontaler Fade  C zentrale Dimmung
   D SVG (Parallax)   E Basis-Weiß (deckend) */
.hcintro-scope > section:not(.hcintro-cta):not(.hcintro-hero):nth-of-type(odd){
  background:
    linear-gradient(to bottom,
      #fff 0,
      rgba(255,255,255,0) var(--honey-fade-y),
      rgba(255,255,255,0) calc(100% - var(--honey-fade-y)),
      #fff 100%
    ),
    linear-gradient(to right,
      #fff 0,
      rgba(255,255,255,0) var(--honey-fade-x),
      rgba(255,255,255,0) calc(100% - var(--honey-fade-x)),
      #fff 100%
    ),
    linear-gradient(rgba(255,255,255,var(--_dim)), rgba(255,255,255,var(--_dim))),
    var(--honey-url) var(--honey-pos)/var(--honey-size) var(--honey-repeat),
    #fff;

  /* Nur die SVG-Ebene „fixed“, Rest scrollt mit */
  background-attachment:
    scroll,      /* A */
    scroll,      /* B */
    scroll,      /* C */
    var(--_attach-svg), /* D (Parallax) */
    scroll;      /* E */
}

/* --- Schnelles Tuning pro Abschnitt (optional im HTML via style="...") ---
   Beispiele:
   style="--honey-intensity:.6; --honey-size:900px auto;"
   style="--honey-fade-x:72px; --honey-fade-y:80px; --honey-pos:center top;"
   style="--honey-repeat:no-repeat; --honey-size:1100px auto;"
*/


/* Tabelle (Nährwerte) im Happycor-Stil – passend zu deinen Karten */
.hcintro-scope .hcintro-nutrition{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
  font-size:14px;
  line-height:1.5;
  color:var(--hc-text-2);
  box-shadow: var(--hc-shadow-sm);
}
.hcintro-scope .hcintro-nutrition td{
  border:1px solid #e6e6e6;
  padding:10px 14px;
}
.hcintro-scope .hcintro-nutrition tr:nth-child(even){ background:#fafafa; }
.hcintro-scope .hcintro-nutrition td:first-child{
  font-weight:600; color:var(--hc-text); width:55%;
}
.hcintro-scope .hcintro-nutrition td:last-child{
  text-align:right; color:var(--hc-text);
}


/* =========================================================
   PETDOG CARE – Ergänzung für Happycor-CSS (Zahnsteinpflege)
   Aktivierung: <div class="hcintro-scope dog">…</div>
   ========================================================= */
.hcintro-scope.dog {
  /* Grundfarbe */
  --green: #B8C557;

  /* Neue Grün-Variablen */
  --hc-green-020: #fafbf6;   /* sehr helles Grünweiß */
  --hc-green-050: #f5f8eb;   /* Hintergrund hellgrün */
  --hc-green-100: #e9f0cf;   /* Badge/Chips */
  --hc-green-300: #d4e28b;   /* Hover-Farbe */
  --hc-green-400: #B8C557;   /* Primärgrün */
  --hc-green-500: #8ca22f;   /* dunkler Akzent */

  /* Mapping auf bestehende Honey-Variablen (Kompatibilität) */
  --hc-honey-020: var(--hc-green-020);
  --hc-honey-050: var(--hc-green-050);
  --hc-honey-100: var(--hc-green-100);
  --hc-honey-300: var(--hc-green-300);
  --hc-honey-400: var(--hc-green-400);
  --hc-honey-500: var(--hc-green-500);

  /* Schatten leicht grünlich */
  --hc-shadow-lg: 0 4px 12px rgba(184,197,87,.25);

  /* Parallax-Hintergrund: Dental-Muster */
  --honey-url: url("/themes/sugar/assets/img/dentalweb.svg");
  --honey-intensity: 0.30;
  --honey-size: 350px auto;
  --honey-pos: center;
  --honey-repeat: repeat;
}

.hcintro-scope.corvitalis-tm {
  
  /* Parallax-Hintergrund: Corvitalis */
  --honey-url: url("/themes/sugar/assets/img/corvitalisbg.svg");
    --honey-intensity: .30;
    --honey-size: 600px auto;
    --honey-pos: center;
    --honey-repeat: repeat;
    --honey-attach: fixed;
    --honey-attach-mobile: scroll;
    --honey-fade-x: 48px;
    --honey-fade-y: 300px;
  }

/* Badge-Basis im Grünschema */
.hcintro-scope.dog .hcintro-badge{
  background: var(--hc-honey-100);
  color: #556b2f;
  border-color: var(--hc-honey-400);
}

/* Grüner Glanz für Icons/Symbole */
.hcintro-scope.dog .glanz-icon {
  background: linear-gradient(
    135deg,
    #9fb844 0%,
    #B8C557 35%,
    #d9e77f 50%,
    #B8C557 65%,
    #9fb844 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: green-shimmer 3.5s ease-in-out infinite alternate;
}
@keyframes green-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Badge-Glanz-Overlay */
.hcintro-scope.dog .hcintro-badge::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    360deg,
    transparent 0%,
    rgba(184, 197, 87, 0.18) 35%,
    rgba(210, 226, 120, 0.35) 50%,
    rgba(184, 197, 87, 0.18) 65%,
    transparent 100%
  );
  transform: rotate(25deg);
  animation: badge-shine-green 5s infinite linear;
}
@keyframes badge-shine-green {
  0%   { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(100%) rotate(25deg); }
}

/* Hover-States im Grünschema */
.hcintro-scope.dog .hcchip:hover,
.hcintro-scope.dog .trustcard:hover,
.hcintro-scope.dog .factcard:hover,
.hcintro-scope.dog .appcard:hover{
  border-color: var(--hc-honey-400);
  box-shadow: var(--hc-shadow-lg);
}

/* Appcards: Icon als dezentes Wasserzeichen */
.hcintro-scope.dog .hcintro-application .appcard h3 i {
  color: var(--hc-honey-100);
}

/* Parallax-Tuning für große Screens */
@media (min-width: 1280px){
  .hcintro-scope.dog{ --honey-size: 520px auto; }
}

/* Barrierefreiheit: Bewegung reduzieren */
@media (prefers-reduced-motion: reduce){
  .hcintro-scope.dog .glanz-icon,
  .hcintro-scope.dog .hcintro-badge::after{
    animation: none !important;
  }
  .hcintro-scope.dog{ --honey-attach: scroll; }
}

/* =========================================================
   PETDOG – PRS Video Section (eigenständige Klassen)
   ========================================================= */
.hcintro-scope.dog .dog-prs {
  background: var(--hc-green-050);
  padding: var(--hc-pad-y) var(--hc-pad-x);
}

.hcintro-scope.dog .dog-prs h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 700;
  color: var(--hc-text);
  margin-bottom: 16px;
}

.hcintro-scope.dog .dog-prs-video-box {
  margin: 20px 0;
  background: #fff;
  border: 1px solid #e6e6e6;
  box-shadow: var(--hc-shadow-sm);
  padding: 8px;
}

.hcintro-scope.dog .dog-prs-video {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  background: #000;
}

.hcintro-scope.dog .dog-prs-text {
  font-size: var(--sm);
  color: var(--hc-text-2);
  line-height: 1.6;
  margin-top: 12px;
}
.hcintro-scope.dog .dog-prs-facts { 
  margin-top: 28px; 
}

/* ===============================================
   PRS Video – Loopendes Thumbnail + Play-Button
   =============================================== */

.hcintro-scope .prs-player {
  max-width: 720px;
  margin: 28px auto;
  position: relative;
  box-shadow: var(--hc-shadow-md);  /* leichter Schatten-Effekt */
}

/* 16:9-Ratio-Box für beide Videos */
.hcintro-scope .prs-aspect {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

/* Beide Videos exakt übereinander */
.hcintro-scope .prs-aspect video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Loopendes Thumbnail */
.hcintro-scope .prs-thumb {
  opacity: 1;
  transition: opacity 0.35s ease;
  filter: brightness(0.98);
}

/* Hauptvideo (ausgeblendet bis Klick) */
.hcintro-scope .prs-main {
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* Aktiv-Zustand: Hauptvideo einblenden */
.hcintro-scope .prs-player.is-playing .prs-main {
  opacity: 1;
  pointer-events: auto;
}

/* Aktiv-Zustand: Thumbnail & Button ausblenden */
.hcintro-scope .prs-player.is-playing .prs-thumb,
.hcintro-scope .prs-player.is-playing .prs-playbtn {
   opacity: 0;
  pointer-events: none;
  visibility: hidden;
  animation: none !important;
  transform: translate(-50%, -50%) scale(1); /* stoppt eventuelle Pulsbewegung */
}

/* -----------------------------------------------
   Play-Button (halbtransparent, zentriert)
   ----------------------------------------------- */
.hcintro-scope .prs-playbtn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.35); /* leicht transparentes Weiß */
  backdrop-filter: blur(6px); /* subtiler Glas-Effekt */
  color: rgba(0, 0, 0, 0.65); /* dezentes Grau für das Icon */
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  font-size: 28px;
  transition: all 0.3s ease;
  animation: prs-pulse 2.8s ease-in-out infinite; /* sanftes Atmen */
}

/* Hover-Effekt */
.hcintro-scope .prs-playbtn:hover {
  background: rgba(255, 255, 255, 0.55);
  color: rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Pulsierende Bewegung (vor Klick) */
@keyframes prs-pulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
}

/* Optional: feiner weißer Rand für bessere Sichtbarkeit */
.hcintro-scope .prs-playbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* -----------------------------------------------
   Motion-Reduce & Responsivität
   ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hcintro-scope .prs-thumb,
  .hcintro-scope .prs-main,
  .hcintro-scope .prs-playbtn {
    transition: none;
    animation: none;
  }
}

@media (max-width: 480px) {
  .hcintro-scope .prs-playbtn {
    width: 60px;
    height: 60px;
    font-size: 22px;
  }
}
.hcintro-badge + .hcintro-badge {
  margin-left: 1.2rem;  /* Abstand nur zwischen Enzym und PRS */
  text-decoration:none;
}



/* =========================================================
   ICON GRID – WARUM 2605 (Premium Modul)
========================================================= */

.hcintro-scope .hcintro-reasons {
  padding: var(--hc-pad-y) var(--hc-pad-x);
}

.hcintro-scope .hcintro-reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hc-gap);
  margin-top: 24px;
}

@media (max-width: 900px){
  .hcintro-scope .hcintro-reasons-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px){
  .hcintro-scope .hcintro-reasons-grid {
    grid-template-columns: 1fr;
  }
}

.hcintro-scope .reasoncard {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  padding: 18px;
  box-shadow: var(--hc-shadow-sm);
  transition: border-color var(--hc-ease), box-shadow var(--hc-ease), transform var(--hc-ease);
}

.hcintro-scope .reasoncard:hover {
  transform: translateY(-3px);
  border-color: var(--hc-honey-400);
  box-shadow: var(--hc-shadow-lg);
}

.hcintro-scope .reason-icon em {
  font-size: 26px;
  color: var(--hc-honey-500);
  flex-shrink: 0;
}

.hcintro-scope .reason-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--hc-text);
}

.hcintro-scope .reason-text strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
}


/* Pflanzenkraft Accordion */
.hcintro-scope .hcintro-herb-accordion {
  margin-top: 24px;
  border-top: 1px solid #e6e6e6;
}

.hcintro-scope .herb-acc-item {
  border-bottom: 1px solid #e6e6e6;
}

.hcintro-scope .herb-acc-btn {
  width: 100%;
  padding: 14px 0;
  background: none;
  border: none;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--hc-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.hcintro-scope .herb-acc-btn em {
  transition: transform 0.25s ease;
  color: var(--hc-honey-500);
}

.hcintro-scope .herb-acc-item.active .herb-acc-btn em {
  transform: rotate(180deg);
}

.hcintro-scope .herb-acc-content {
  display: none;
  padding: 0 0 14px 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hc-text-2);
}

.hcintro-scope .herb-acc-item.active .herb-acc-content {
  display: block;
}


/* =========================================================
   FAQ – identisches Styling wie Pflanzenkraft-Accordion
   ========================================================= */

/* Gesamtbereich */
.hcintro-scope .hcintro-faq {
  padding-top: var(--hc-pad-y);
  padding-bottom: var(--hc-pad-y);
}

/* Einleitungssatz */
.hcintro-scope .hcintro-faq .hcintro-trusttext {
  margin: 0 0 20px 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hc-text-2);
  text-align: left;
}

/* Einzelnes FAQ-Item → exakt wie Herb-Accordion */
.hcintro-scope .hcintro-faq .hcfaq-item {
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  padding: 0;                   /* wie Pflanzenkraft */
  margin: 0 0 12px 0;           /* nur leichter Abstand nach unten */
  background: none !important;  /* kein Block-Hintergrund */
  border-radius: 0;
}

/* Frage-Button */
.hcintro-scope .hcintro-faq .hcfaq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 16px 0;              /* identisch zu Kräuter-Accordion */
  font-size: 17px;
  font-weight: 600;
  color: var(--hc-text);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

/* Pfeil-Icon */
.hcintro-scope .hcintro-faq .hcfaq-question em {
  font-size: 16px;
  transition: transform 0.25s ease;
}

/* Rotation bei aktiv */
.hcintro-scope .hcintro-faq .hcfaq-item.active .hcfaq-question em {
  transform: rotate(180deg);
}

/* Antworttext – wie bei Pflanzenkraft */
.hcintro-scope .hcintro-faq .hcfaq-answer {
  display: none;
  padding: 0 0 16px 0;          /* keine Box, nur Textabstand */
  font-size: 15px;
  line-height: 1.55;
  color: var(--hc-text);
  text-align: left;
}

/* Antwort öffnen */
.hcintro-scope .hcintro-faq .hcfaq-item.active .hcfaq-answer {
  display: block;
}

/* Mobile Tuning */
@media (max-width: 600px) {
  .hcintro-scope .hcintro-faq .hcfaq-question {
    font-size: 16px;
  }
  .hcintro-scope .hcintro-faq .hcfaq-answer {
    font-size: 15px;
  }
}


/* Einheitliche Icon-Größe für das gesamte Happycor-Modul */
.hcintro-scope .fa-solid,
.hcintro-scope .fas,
.hcintro-scope .glanz-icon {
  font-size: 20px !important;
  line-height: 1 !important;
}

/* =========================================================
   Spezielles Hintergrundmuster für petDog Health 2605
   ========================================================= */
.hcintro-scope.dog-2605 {
  --honey-url: url("/themes/sugar/assets/img/plantweb.svg");
}
.hcintro-scope.dog-food {
  --honey-url: url("/themes/sugar/assets/img/plantweb.svg");
}


/* =========================================================
   CORVITALIS® – Funktionskomplex Modul
   ========================================================= */

.hcintro-scope .hcintro-corvitalis {
  padding: var(--hc-pad-y) var(--hc-pad-x);
  background: #fff;
}

/* Layout */
.hcintro-scope .corv-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hc-gap);
}

.hcintro-scope .corv-col {
  flex: 1 1 0;
  min-width: 260px;
}

.hcintro-scope .corv-col--intro {
  flex: 1 1 42%;
}

.hcintro-scope .corv-col--stack {
  flex: 1 1 58%;
}

/* Headline */
.hcintro-scope .corv-heading {
  margin-bottom: 14px;
}

.hcintro-scope .corv-heading-main {
   display: flex;
  align-items: center;
  gap: 14px;
}

.corv-heading-logo {
  height: 48px;
  width: auto;
  flex-shrink: 0;
  align-self: center;
  margin: 0 0 16px;
}

/* Mobile Feintuning */
@media (max-width: 768px) {
  .corv-heading-logo {
    height: 38px;
  }
}

.hcintro-scope .corv-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid #4feb5d;
  background: #f2fff4;
  color: #1f3a22;
}

/* Text Intro */
.hcintro-scope .hcintro-corvitalis-sub {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hc-text-2);
}

.hcintro-scope .corv-tagline {
  font-size: 14px;
  color: var(--hc-text-2);
  margin: 0 0 14px;
}

/* Cards */
.hcintro-scope .corv-card {
  border: 1px solid #e3f1e6;
  background: #fff;
  box-shadow: var(--hc-shadow-sm);
  margin-bottom: 14px;
  transition: box-shadow .25s ease, transform .22s ease;
}

.hcintro-scope .corv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* Card Header */
.hcintro-scope .corv-card-head {
  padding: 14px 16px 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}

.hcintro-scope .corv-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Icons */
.hcintro-scope .corv-icon-figure {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.hcintro-scope .corv-icon-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Title & kicker */
.hcintro-scope .corv-card-meta h3 {
  font-size: 16px;
  margin: 0 0 3px;
}

.hcintro-scope .corv-card-kicker {
  margin: 0;
  font-size: 13px;
  color: var(--hc-text-2);
}

/* Toggle (arrow only) */
.hcintro-scope .corv-toggle {
  border: none;
  background: none;
  padding: 4px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.hcintro-scope .corv-toggle-icon em {
  font-size: 16px;
  color: #4feb5d;
  transition: transform .25s ease;
}

.hcintro-scope .corv-card.is-open .corv-toggle-icon em {
  transform: rotate(180deg);
}

/* Body */
.hcintro-scope .corv-body {
  padding: 0 16px 16px;
  display: none;
  overflow: hidden;
}

.hcintro-scope .corv-body p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 8px;
}

/* Open state */
.hcintro-scope .corv-card.is-open .corv-body {
  display: block;
}

/* Summary */
.hcintro-scope .corv-summary {
  margin-top: 20px;
  background: #f6fff8;
  border-left: 4px solid #4feb5d;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hc-text-2);
}

/* MOBILE */
@media (max-width: 880px) {
  .hcintro-scope .corv-layout {
    flex-direction: column;
  }
  .hcintro-scope .corv-col {
    min-width: 0 !important;
    width: 100% !important;
  }
  .hcintro-scope .corv-card {
    width: 100%;
  }
  .hcintro-scope .corv-card-head,
  .hcintro-scope .corv-body {
    max-width: 100%;
    overflow-x: hidden;
  }
}


/* =======================================================
   HAPPYCOR Flora Flow - Modul-CSS (scoped)
   Namespace: .hc-pdp-scope
======================================================= */

/* =======================================================
   Local Font: Poppins (self-hosted .ttf)
   Font files stored in: /themes/sugar/assets/fonts/
======================================================= */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/themes/sugar/assets/fonts/Poppins-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/themes/sugar/assets/fonts/Poppins-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/themes/sugar/assets/fonts/Poppins-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/themes/sugar/assets/fonts/Poppins-Bold.ttf") format("truetype");
}

/* =======================================================
   Local Font: Commissioner
======================================================= */
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/themes/sugar/assets/fonts/Commissioner-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/themes/sugar/assets/fonts/Commissioner-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/themes/sugar/assets/fonts/Commissioner-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/themes/sugar/assets/fonts/Commissioner-Bold.ttf") format("truetype");
}

/* ===== Scoped Reset ===== */
.hc-pdp-scope, .hc-pdp-scope * { box-sizing: border-box; }
.hc-pdp-scope h1, .hc-pdp-scope h2, .hc-pdp-scope h3,
.hc-pdp-scope h4, .hc-pdp-scope h5, .hc-pdp-scope h6,
.hc-pdp-scope p, .hc-pdp-scope ul, .hc-pdp-scope li,
.hc-pdp-scope figure, .hc-pdp-scope blockquote { margin: 0; padding: 0; }
.hc-pdp-scope ul,
.hc-pdp-scope ol { margin: 0; padding: 0; }

/* Standard-Listen im Modul: Marker in Snack-Akzentfarbe */
.hc-pdp-scope ul { list-style: disc; padding-left: 18px; }
.hc-pdp-scope ol { list-style: decimal; padding-left: 18px; }
.hc-pdp-scope li::marker {
  color: var(--hc-accent)!important;
  font-weight: 600;
}

/* ===========================
   Design-Variablen
   =========================== */
.hc-pdp-scope {
  /* Happycor global font */
  --hc-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --hc-font-light: 300;
  --hc-font-regular: 400;
  --hc-font-semi-bold: 600;
  --hc-font-bold: 700;

  --hc-brand-1: #736b5f;
  --hc-brand-2: #d2d938;

  --hc-text: #111;
  --hc-text-2: #333;

  /* Happycor Basisfarben */
  --hc-honey-020: #fbf9f4;
  --hc-honey-050: #f7f2e3;
  --hc-honey-100: #f2ead6;
  --hc-honey-300: #eacb79;
  --hc-honey-400: #c6b371;
  --hc-honey-500: #9b7d36;

  /* Variant-Farbe */
  --hc-accent: var(--hc-brand-2);
  --hc-accent-soft: #f7f8e1;
  --hc-accent-dark: #9aa000;

  /* Pattern (Hintergrund-SVG pro Variante) */
  --hc-pattern-url: url("/themes/sugar/assets/img/plantweb.svg");

  /* Typo scales (cards/buttons) */
  --hc-card-text: 14px;
  --hc-fs-body: var(--sm, 16px);
  --hc-fs-title: clamp(26px, 5vw, 40px);
  --hc-fs-table-heading: 16px;
  --hc-fs-table-cell: 15px;
  --hc-nutrition-row-strip: #fafafa;
  --hc-fs-sub: clamp(15px, 2vw, 17px);
  --hc-fs-h2: clamp(22px, 3.5vw, 30px);
  --hc-fs-lead: 15px;
  --hc-fs-badge: 12px;
  --hc-fs-small: 14px;
  --hc-fs-icon: 20px;
  --hc-fs-icon-sm: 16px;
  --hc-fs-chip-icon: 18px;
  --hc-fs-trust-icon: 22px;
  --hc-fs-reason-icon: 26px;
  --hc-fs-reason-title: 15px;
  --hc-fs-corv-h3: 16px;
  --hc-fs-corv-kicker: 13px;
  --hc-fs-acc-btn: 16px;
  --hc-fs-acc-content: 15px;
  --hc-fs-faq-q: 14px;
  --hc-fs-faq-a: var(--hc-card-text);
  --hc-fs-app-h3: 18px;
  --hc-fs-cta-btn: 14px;
  --hc-fs-stars: 20px;

  /* Layout */
  --hc-wrap: 960px;
  --hc-pad-y: clamp(28px, 4vw, 48px);
  --hc-pad-x: 24px;
  --hc-gap: 20px;

  /* Effekte */
  --hc-ease: 200ms ease;
  --hc-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --hc-shadow-md: 0 2px 6px rgba(0,0,0,.08);
  --hc-shadow-lg: 0 4px 12px rgba(115,107,95,.2);

  font-family: var(--hc-font);
  font-weight: var(--hc-font-regular);
  color: var(--hc-text);
}

/* ===========================
   happycor Varianten
   =========================== */

.hc-pdp-scope[data-variant="flora-flow"] {
  --hc-accent: #96b1dd;
  --hc-accent-soft: #eef4fb;
  --hc-accent-dark: #6e8fc3;
  --hc-pattern-url: url("/themes/sugar/assets/img/floraflow.svg");
  --hc-nutrition-row-strip: #eef4fb;
}
.hc-pdp-scope[data-variant="mighty-move"] {
  --hc-accent: #becfce;
  --hc-accent-soft: #f2f6f6;
  --hc-accent-dark: #8fa7a6;
  --hc-pattern-url: url("/themes/sugar/assets/img/mightymove.svg");
  --hc-nutrition-row-strip: #f2f6f6;
}
.hc-pdp-scope[data-variant="jumpy-joy"] {
  --hc-accent: #d3cab9;
  --hc-accent-soft: #f6f3ef;
  --hc-accent-dark: #a89d86;
  --hc-pattern-url: url("/themes/sugar/assets/img/jumpyjoy.svg");
  --hc-nutrition-row-strip: #f6f3ef;
}
.hc-pdp-scope[data-variant="pure-power"] {
  --hc-accent: #cddd8f;
  --hc-accent-soft: #f5f8ea;
  --hc-accent-dark: #9eb456;
  --hc-pattern-url: url("/themes/sugar/assets/img/purepower.svg");
  --hc-nutrition-row-strip: #f5f8ea;
}

/* ===========================
   Peticare Varianten
   =========================== */

/* Switch auf Commissioner für alle Peticare Brands */
.hc-pdp-scope[data-variant="petdog"],
.hc-pdp-scope[data-variant="petcat"],
.hc-pdp-scope[data-variant="pethorse"],
.hc-pdp-scope[data-variant="living"],
.hc-pdp-scope[data-variant="human"] {
  --hc-font: "Commissioner", system-ui, sans-serif;
  /* Größen-Korrektur für Commissioner */
  --hc-fs-body: 17px; 
  --hc-fs-title: clamp(28px, 5.5vw, 44px);
  --hc-card-text: 15px;
  --hc-fs-sub: 18px;
  --hc-fs-table-cell: 16px;
  --hc-fs-acc-btn: 17px;
  --hc-fs-faq-q: 16px;
  --hc-fs-faq-a: 15px;
  --hc-fs-small: 15px;
}

/* PETDOG - #bac759 */
.hc-pdp-scope[data-variant="petdog"] {
  --hc-accent: #bac759;
  --hc-accent-soft: #f4f7e6;
  --hc-accent-dark: #8c983d;
  --hc-pattern-url: url("/themes/sugar/assets/img/petdog-pattern.svg");
  --hc-nutrition-row-strip: #f4f7e6;
}

/* PETCAT - #4a7abd */
.hc-pdp-scope[data-variant="petcat"] {
  --hc-accent: #4a7abd;
  --hc-accent-soft: #edf2f8;
  --hc-accent-dark: #365a8c;
  --hc-pattern-url: url("/themes/sugar/assets/img/peticare-pattern.svg");
  --hc-nutrition-row-strip: #edf2f8;
}

/* PETHORSE - #c63653 */
.hc-pdp-scope[data-variant="pethorse"] {
  --hc-accent: #c63653;
  --hc-accent-soft: #f9ebed;
  --hc-accent-dark: #91273d;
  --hc-pattern-url: url("/themes/sugar/assets/img/peticare-pattern.svg");
  --hc-nutrition-row-strip: #f9ebed;
}

/* LIVING - #00a1b7 */
.hc-pdp-scope[data-variant="living"] {
  --hc-accent: #00a1b7;
  --hc-accent-soft: #e5f6f8;
  --hc-accent-dark: #007686;
  --hc-pattern-url: url("/themes/sugar/assets/img/peticare-pattern.svg");
  --hc-nutrition-row-strip: #e5f6f8;
}

/* HUMAN - #6c62a5 */
.hc-pdp-scope[data-variant="human"] {
  --hc-accent: #6c62a5;
  --hc-accent-soft: #f0eff6;
  --hc-accent-dark: #4f4779;
  --hc-pattern-url: url("/themes/sugar/assets/img/peticare-pattern.svg");
  --hc-nutrition-row-strip: #f0eff6;
}

/* ===========================
   Sektionen (Grundlayout)
   =========================== */
.hc-pdp-scope > section {
  position: relative;
  z-index: 0;
  padding: var(--hc-pad-y) var(--hc-pad-x);
}

.hc-pdp-scope > section:not(.hc-pdp-cta):nth-of-type(odd)  { background: #fff; }
.hc-pdp-scope > section:not(.hc-pdp-cta):nth-of-type(even){
  position: relative;
  z-index: 0;
}

.hc-pdp-scope > section:not(.hc-pdp-cta):nth-of-type(even)::before{
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--hc-accent-soft);
  z-index: -1;
}


.hc-pdp-scope .hc-pdp-wrap {
  max-width: var(--hc-wrap);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ===========================
   Typografie
   =========================== */
.hc-pdp-scope .hc-pdp-title {
  font-weight: var(--hc-font-semi-bold);
  color: var(--hc-text);
  font-size: var(--hc-fs-title) !important;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  text-transform: none !important;
}

.hc-pdp-scope .hc-pdp-sub {
  font-size: var(--hc-fs-sub);
  color: var(--hc-text-2);
  line-height: 1.5;
  margin: 12px 0 12px;
}

.hc-pdp-scope .hc-pdp-headline,
.hc-pdp-scope .hc-pdp-application h2,
.hc-pdp-scope .hc-pdp-social h2,
.hc-pdp-scope .hc-pdp-cta h2,
.hc-pdp-scope .hc-pdp-trust h2 {
   font-size: var(--hc-fs-title) !important;
  font-weight: 600;
  color: var(--hc-text);
  margin: 0 0 16px;
  text-transform: none !important;
}

/* ===========================
   Badge
   =========================== */
.hc-pdp-scope .hc-pdp-badge {
  display: inline-block;
  background: var(--hc-accent-soft);
  color: var(--hc-brand-1);
  font-size: var(--hc-fs-badge);
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid var(--hc-accent);
  border-radius: 6px;
  margin-bottom: 10px;
  text-transform: uppercase !important;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Badge (mit Glanz-Overlay wie in 2501) */
.hc-pdp-scope .hc-pdp-badge::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.10) 40%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.10) 60%,
    transparent 100%
  );
  transform: rotate(25deg);
  animation: hc-pdp-badge-shine 5s infinite linear;
  pointer-events: none;
}

@keyframes hc-pdp-badge-shine {
  0%   { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(100%) rotate(25deg); }
}

.hc-pdp-scope .hc-pdp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}


* /* ===========================
   Spezifisches Styling für Peticare-Produkte
   =========================== */

/* Der Produktname unter der H1 */
.hc-pdp-scope .hc-pdp-product-name {
    margin-top: -10px;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: var(--hc-fs-lead);
    color: var(--hc-brand-1);
    display: block;
}

/* Die Lead-Texte in den Sektionen */
.hc-pdp-scope .hc-pdp-lead {
    margin: 0 0 16px;
    line-height: 1.55;
    font-size: var(--hc-fs-lead);
    color: var(--hc-text-2);
}

/* ===========================
   Chips (als Karten)
   =========================== */
.hc-pdp-scope .hc-pdp-chipstrip { position: relative; margin-top: 24px; }
.hc-pdp-scope .hc-pdp-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hc-gap);
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
}
@media (max-width: 1024px){
  .hc-pdp-scope .hc-pdp-chips { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .hc-pdp-scope .hc-pdp-chips { grid-template-columns: 1fr; }
}

.hc-pdp-scope .hc-pdp-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 16px 18px;
  box-shadow: var(--hc-shadow-sm);
  color: var(--hc-text);
  font-size: var(--hc-card-text);
  line-height: 1.4;
  transition: transform var(--hc-ease), box-shadow var(--hc-ease), border-color var(--hc-ease);
  margin-left: 0 !important;
}

.hc-pdp-scope .hc-pdp-chip:hover {
  transform: translateY(-3px);
  border-color: var(--hc-accent);
  box-shadow: var(--hc-shadow-lg);
}

.hc-pdp-scope .hc-pdp-chip em {
  font-size: 18px;
  line-height: 1;
  color: var(--hc-accent);
  flex: 0 0 auto;
}

/* ===========================
   Fliess-Text
   =========================== */
.hc-pdp-scope .hc-pdp-facts p,
.hc-pdp-scope .hc-pdp-application p,
.hc-pdp-scope .hc-pdp-trust p {
  margin: 0 0 16px;
  line-height: 1.58;
  color: var(--hc-text);
  letter-spacing: -0.003em;
}

.hc-pdp-scope .hc-pdp-lead {
  margin: 0 0 16px;
  line-height: 1.55;
  font-size: var(--hc-fs-lead);
  color: var(--hc-text-2);
}

/* ===========================
   Trust Grid
   =========================== */
.hc-pdp-scope .hc-pdp-trustgrid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hc-gap);
  margin-top: 24px;
}

.hc-pdp-scope .hc-pdp-trustcard {
  flex: 1 1 calc(33% - var(--hc-gap));
  min-width: 200px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 18px;
  text-align: center;
  box-shadow: var(--hc-shadow-sm);
  transition: transform var(--hc-ease), box-shadow var(--hc-ease), border-color var(--hc-ease);
}

.hc-pdp-scope .hc-pdp-trustcard:hover {
  transform: translateY(-3px);
  border-color: var(--hc-accent);
  box-shadow: var(--hc-shadow-lg);
}

.hc-pdp-scope .hc-pdp-trusticon {
  font-size: var(--hc-fs-trust-icon);
  font-weight: 700;
  color: var(--hc-accent);
  margin-bottom: 6px;
}

.hc-pdp-scope .hc-pdp-trusttext {
  font-size: var(--hc-card-text);
  color: var(--hc-text);
  line-height: 1.4;
}

/* ===========================
   Corvitalis Cards
   =========================== */
.hc-pdp-scope .hc-pdp-corv-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hc-gap);
}

.hc-pdp-scope .hc-pdp-corv-col { flex: 1 1 0; min-width: 260px; }
.hc-pdp-scope .hc-pdp-corv-col-intro { flex: 1 1 42%; }
.hc-pdp-scope .hc-pdp-corv-col-stack { flex: 1 1 58%; }

.hc-pdp-scope .hc-pdp-corv-sub {
  margin: 0 0 14px;
  font-size: var(--hc-fs-lead);
  line-height: 1.6;
  color: var(--hc-text-2);
}

.hc-pdp-scope .hc-pdp-corv-card {
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--hc-shadow-sm);
  margin-bottom: 14px;
  transition: box-shadow .25s ease, transform .22s ease;
}

.hc-pdp-scope .hc-pdp-corv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.hc-pdp-scope .hc-pdp-corv-card-head {
  padding: 14px 16px 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}

.hc-pdp-scope .hc-pdp-corv-kicker {
  margin: 0;
  font-size: var(--hc-fs-corv-kicker);
  color: var(--hc-text-2);
}

.hc-pdp-scope .hc-pdp-corv-card-meta h3 {
  font-size: var(--hc-fs-corv-h3);
  font-weight: 600;
  display: flex;
  margin: 0 0 3px 0;
  line-height: 1.25;
  color: var(--hc-text);
}

.hc-pdp-scope .hc-pdp-corv-toggle {
  border: none;
  background: none;
  padding: 4px 0 0;
  cursor: pointer;
}

.hc-pdp-scope .hc-pdp-corv-toggle-icon em {
  font-size: var(--hc-fs-icon-sm);
  color: var(--hc-accent);
  transition: transform .25s ease;
}

.hc-pdp-scope .hc-pdp-corv-card.is-open .hc-pdp-corv-toggle-icon em {
  transform: rotate(180deg);
}

.hc-pdp-scope .hc-pdp-corv-body {
  padding: 0 16px 16px;
  display: none;
  overflow: hidden;
}

.hc-pdp-scope .hc-pdp-corv-card.is-open .hc-pdp-corv-body { display: block; }

.hc-pdp-scope .hc-pdp-corv-summary {
  margin-top: 20px;
  background: var(--hc-accent-soft);
  border-left: 4px solid var(--hc-accent);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: var(--hc-fs-small);
  line-height: 1.6;
  color: var(--hc-text-2);
}

/* =======================================================
   FINAL PRS VIDEO MODUL (Standalone)
======================================================= */
.hc-pdp-scope .peticare-prs-box {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    overflow: hidden;
    margin: 28px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.hc-pdp-scope .prs-visual-part {
    position: relative;
    width: 100%;
    line-height: 0;
    background: #000;
}

.hc-pdp-scope .prs-visual-part video {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
}

.hc-pdp-scope .prs-content-part {
    padding: 20px 24px;
    background: var(--hc-honey-020); /* Nutzt deine Soft-Farbe für den Kontrast */
    border-top: 1px solid #eeeeee;
}

.hc-pdp-scope .prs-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--hc-text);
    margin-bottom: 8px;
    font-size: 16px;
    letter-spacing: 0.3px;
}

.hc-pdp-scope .prs-label em {
    color: var(--hc-accent);
    font-size: 18px;
}

.hc-pdp-scope .prs-description {
    font-size: var(--hc-card-text);
    line-height: 1.55;
    color: var(--hc-text-2);
    margin: 0;
}

@media (max-width: 600px) {
    .hc-pdp-scope .peticare-prs-box {
        margin: 20px 0;
    }
    .hc-pdp-scope .prs-content-part {
        padding: 16px;
    }
}


/* ===========================
   Accordion (Herbs + FAQ)
   =========================== */
.hc-pdp-scope .hc-pdp-acc { margin-top: 24px; border-top: 1px solid #e6e6e6; }
.hc-pdp-scope .hc-pdp-acc-item { border-bottom: 1px solid #e6e6e6; }

.hc-pdp-scope .hc-pdp-acc-btn {
  width: 100%;
  padding: 14px 0;
  background: none;
  border: none;
  text-align: left;
  font-size: var(--hc-fs-acc-btn);
  font-weight: 600;
  color: var(--hc-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.hc-pdp-scope .hc-pdp-acc-btn em {
  transition: transform 0.25s ease;
  color: var(--hc-accent);
}

.hc-pdp-scope .hc-pdp-acc-item.active .hc-pdp-acc-btn em { transform: rotate(180deg); }

.hc-pdp-scope .hc-pdp-acc-content {
  display: none;
  padding: 0 0 14px 0;
  font-size: var(--hc-fs-acc-content);
  line-height: 1.55;
  color: var(--hc-text-2);
}

.hc-pdp-scope .hc-pdp-acc-item.active .hc-pdp-acc-content { display: block; }

.hc-pdp-scope .hc-pdp-faq-item {
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  padding: 0;
  margin: 0 0 12px 0;
}

.hc-pdp-scope .hc-pdp-faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 16px 0;
  font-size: var(--hc-fs-faq-q);
  font-weight: 600;
  color: var(--hc-text);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.hc-pdp-scope .hc-pdp-faq-question em {
  font-size: var(--hc-fs-icon-sm);
  transition: transform 0.25s ease;
}

.hc-pdp-scope .hc-pdp-faq-item.active .hc-pdp-faq-question em { transform: rotate(180deg); }

.hc-pdp-scope .hc-pdp-faq-answer {
  display: none;
  padding: 0 0 16px 0;
  font-size: var(--hc-fs-faq-a);
  line-height: 1.55;
  color: var(--hc-text-2);
}

.hc-pdp-scope .hc-pdp-faq-item.active .hc-pdp-faq-answer { display: block; }

/* ===========================
   Reasons Grid
   =========================== */
.hc-pdp-scope .hc-pdp-reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hc-gap);
  margin-top: 24px;
}

.hc-pdp-scope .hc-pdp-reasoncard {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 18px;
  box-shadow: var(--hc-shadow-sm);
  transition: transform var(--hc-ease), box-shadow var(--hc-ease), border-color var(--hc-ease);
}

.hc-pdp-scope .hc-pdp-reasoncard:hover {
  transform: translateY(-3px);
  border-color: var(--hc-accent);
  box-shadow: var(--hc-shadow-lg);
}

.hc-pdp-scope .hc-pdp-reason-icon em {
  font-size: var(--hc-fs-reason-icon);
  color: var(--hc-accent);
  flex-shrink: 0;
}

.hc-pdp-scope .hc-pdp-reason-text {
  font-size: var(--hc-card-text);
  line-height: 1.5;
  color: var(--hc-text);
}

.hc-pdp-scope .hc-pdp-reason-text strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--hc-fs-reason-title);
}

/* ===========================
   Anwendung
   =========================== */
.hc-pdp-scope .hc-pdp-appgrid {
  margin-top: 24px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.hc-pdp-scope .hc-pdp-appcard {
  flex: 1 1 calc(33% - 24px);
  min-width: 260px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 18px;
  box-shadow: var(--hc-shadow-sm);
  transition: transform var(--hc-ease), box-shadow var(--hc-ease), border-color var(--hc-ease);
}

.hc-pdp-scope .hc-pdp-appcard:hover {
  transform: translateY(-3px);
  border-color: var(--hc-accent);
  box-shadow: var(--hc-shadow-lg);
}

.hc-pdp-scope .hc-pdp-application .hc-pdp-appcard h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 12px;
  font-size: var(--hc-fs-app-h3);
  font-weight: var(--hc-font-semi-bold);
  color: var(--hc-text);
  letter-spacing: .5px;
  transition: color var(--hc-ease);
}

.hc-pdp-scope .hc-pdp-application .hc-pdp-appcard h3:hover {
  color: var(--hc-accent);
}

.hc-pdp-scope .hc-pdp-application .hc-pdp-appcard em {
  font-size: var(--hc-fs-icon);
  margin-left: 12px;
  color: var(--hc-accent);
}

.hc-pdp-scope .hc-pdp-appcard ul {
  margin: 0;
  list-style: disc;
  padding-left: 18px;
  font-size: var(--hc-card-text);
  line-height: 1.5;
  color: #333;
}
.hc-pdp-scope .hc-pdp-application-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hc-pdp-scope .hc-pdp-application-list {
  list-style: disc;
  padding-left: 24px;
}
.hc-pdp-scope .hc-pdp-application-list li {
  padding-bottom: 12px;
  font-size: var(--hc-fs-table-cell);
  line-height: 1.6;
  color: var(--hc-text);
}
.hc-pdp-scope .hc-pdp-application-list li::marker {
  color: var(--hc-accent);
  font-size: 16px;
}
.hc-pdp-scope .hc-pdp-application-list .hc-pdp-application-item {
  list-style: disc;
  margin: 0;
}

/* ===========================
   Social Proof
   =========================== */
.hc-pdp-scope .hc-pdp-social h2 { text-align: center; }

.hc-pdp-scope .hc-pdp-factsgrid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hc-gap);
}

.hc-pdp-scope .hc-pdp-factcard {
  flex: 1 1 calc(33% - var(--hc-gap));
  min-width: 200px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 18px;
  font-size: var(--hc-card-text);
  box-shadow: var(--hc-shadow-sm);
  text-align: center;
}

.hc-pdp-scope .hc-pdp-fact-icon {
  margin-bottom: 6px;
  font-size: var(--hc-fs-stars);
  font-weight: 700;
}
.hc-pdp-scope .hc-pdp-fact-text {
  font-size: var(--hc-card-text);
  line-height: 1.4;
  color: var(--hc-text);
}

/* ===========================
   CTA
   =========================== */
.hc-pdp-scope .hc-pdp-cta {
  background: var(--hc-accent-soft);
  text-align: center;
}

.hc-pdp-scope .hc-pdp-cta h2 { margin-bottom: 16px; }

.hc-pdp-scope .hc-pdp-cta p {
  margin: 0 auto 24px;
  max-width: 640px;
  line-height: 1.55;
  color: var(--hc-text-2);
}

.hc-pdp-scope .hc-pdp-scroll-btn {
  display: inline-block;
  background: var(--hc-accent);
  color: #fff;
  font-weight: 600;
  font-size: var(--hc-fs-cta-btn);
  padding: 14px 28px;
  margin-top: 16px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--hc-shadow-md);
  transition: background var(--hc-ease), box-shadow var(--hc-ease);
}

.hc-pdp-scope .hc-pdp-scroll-btn:hover {
  background: var(--hc-accent-dark);
  box-shadow: var(--hc-shadow-lg);
}

.hc-pdp-scope .hc-pdp-scroll-btn em {
  margin-left: 8px;
  font-size: var(--hc-fs-icon-sm);
  color: #fff;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 1024px){
  .hc-pdp-scope .hc-pdp-trustcard,
  .hc-pdp-scope .hc-pdp-factcard { flex: 1 1 calc(50% - var(--hc-gap)); }
}

@media (max-width: 900px){
  .hc-pdp-scope .hc-pdp-reasons-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px){
  .hc-pdp-scope .hc-pdp-trustcard,
  .hc-pdp-scope .hc-pdp-factcard { flex: 1 1 100%; }
  .hc-pdp-scope .hc-pdp-appcard { min-width: 100%; flex: 1 1 100%; }
  .hc-pdp-scope .hc-pdp-reasons-grid { grid-template-columns: 1fr; }
}

/* ===========================
   Einheitliche Icon-Groesse
   =========================== */
.hc-pdp-scope .fa-solid,
.hc-pdp-scope .fas {
  font-size: var(--hc-fs-icon) !important;
  line-height: 1 !important;
}

/* Glanz-Effekt (wie bei 2501, aber in Snack-Farbwelt) */
.hc-pdp-scope .glanz-icon {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    135deg,
    var(--hc-accent-dark) 0%,
    var(--hc-accent) 35%,
    var(--hc-accent-soft) 50%,
    var(--hc-accent) 65%,
    var(--hc-accent-dark) 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hc-pdp-shimmer 3.5s ease-in-out infinite alternate;
}
@keyframes hc-pdp-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


/* ===========================
   Absatz-Typo vereinheitlichen
   =========================== */
.hc-pdp-scope .hc-pdp-wrap p {
  font-size: var(--hc-fs-body);
  line-height: 1.58;
}

/* ===========================================
   HONEYWEB - Hintergrund in weissen Blocks
   =========================================== */
.hc-pdp-scope {
  --honey-url: var(--hc-pattern-url);
  --honey-intensity: .54;
  --honey-size: 600px auto;
  --honey-pos: center;
  --honey-repeat: repeat;
  --honey-attach: fixed;
  --honey-attach-mobile: scroll;
  --honey-fade-x: 48px;
  --honey-fade-y: 56px;
}

@media (max-width: 1024px){
  .hc-pdp-scope{
    --honey-size: 680px auto;
    --honey-pos: right -20px top -6px;
    --honey-intensity: .54;
    --honey-fade-x: 32px;
    --honey-fade-y: 40px;
  }
}

.hc-pdp-scope > section:not(.hc-pdp-cta):not(.hc-pdp-hero):not(.hc-pdp-nohoney):nth-of-type(odd){
  position: relative;
  --_dim: clamp(0, calc(1 - var(--honey-intensity)), 1);
  --_attach-svg: var(--honey-attach);
}
@media (max-width: 1024px){
  .hc-pdp-scope > section:not(.hc-pdp-cta):not(.hc-pdp-hero):not(.hc-pdp-nohoney):nth-of-type(odd){
    --_attach-svg: var(--honey-attach-mobile);
  }
}

.hc-pdp-scope > section:not(.hc-pdp-cta):not(.hc-pdp-hero):not(.hc-pdp-nohoney):nth-of-type(odd){
  background:
    linear-gradient(to bottom,
      #fff 0,
      rgba(255,255,255,0) var(--honey-fade-y),
      rgba(255,255,255,0) calc(100% - var(--honey-fade-y)),
      #fff 100%
    ),
    linear-gradient(to right,
      #fff 0,
      rgba(255,255,255,0) var(--honey-fade-x),
      rgba(255,255,255,0) calc(100% - var(--honey-fade-x)),
      #fff 100%
    ),
    linear-gradient(rgba(255,255,255,var(--_dim)), rgba(255,255,255,var(--_dim))),
    var(--honey-url) var(--honey-pos)/var(--honey-size) var(--honey-repeat),
    #fff;

  background-attachment:
    scroll,
    scroll,
    scroll,
    var(--_attach-svg),
    scroll;
}

/* ===========================
   Nährstofftabelle
   =========================== */
  
.hc-pdp-scope .hc-pdp-nutrition-table-wrap {
  margin-top: 16px;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.hc-pdp-scope .hc-pdp-nutrition-table-wrap h3 {
  margin: 0;
  padding: 10px 14px;
  background: var(--hc-accent);
  font-size: var(--hc-fs-table-heading);
  font-weight: 600;
  color: var(--hc-text);
  border-bottom: 1px solid #e6e6e6;
}
.hc-pdp-scope .hc-pdp-nutrition-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.hc-pdp-scope .hc-pdp-nutrition-table th,
.hc-pdp-scope .hc-pdp-nutrition-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e6e6e6;
  text-align: left;
  font-size: var(--hc-fs-table-cell);
  line-height: 1.5;
  color: var(--hc-text);
}
.hc-pdp-scope .hc-pdp-nutrition-table td {
  vertical-align: top;
}
.hc-pdp-scope .hc-pdp-nutrition-table td:first-child {
  width: 50%;
}
.hc-pdp-scope .hc-pdp-nutrition-table td:last-child {
  width: 50%;
}
.hc-pdp-scope .hc-pdp-nutrition-table th {
  background: var(--hc-honey-020);
  font-weight: 600;
}
.hc-pdp-scope .hc-pdp-nutrition-table tbody tr:last-child td {
  border-bottom: none;
}
.hc-pdp-scope .hc-pdp-nutrition-table tbody tr:nth-child(even) {
  background: var(--hc-nutrition-row-strip);
}

@media (max-width: 600px) {
  .hc-pdp-scope .hc-pdp-nutrition-table-wrap h3 {
    font-size: calc(var(--hc-fs-table-heading) - 2px);
    padding: 8px 12px;
  }
  .hc-pdp-scope .hc-pdp-nutrition-table th,
  .hc-pdp-scope .hc-pdp-nutrition-table td {
    padding: 10px 12px;
    font-size: calc(var(--hc-fs-table-cell) - 2px);
  }
}


/* ===========================
   Substanzcheck / Mehr pro Snack
   =========================== */

.hc-pdp-substanzcheck {
  background: #fff;
}

.hc-pdp-substanzcheck .hc-pdp-sc-head {
  margin-bottom: 28px;
}


/* 
  Claims wie Hero-Chips
 */
.hc-pdp-scope .hc-pdp-substanzcheck .hc-pdp-sc-claimrow{
  /* display: flex; */
  gap: var(--hc-gap);
  margin: 20px 0 36px;
  flex-wrap: wrap;
}

/* Wenn du das optionale UL nutzt */
.hc-pdp-scope .hc-pdp-substanzcheck .hc-pdp-sc-claims{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hc-gap);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hc-pdp-scope .hc-pdp-substanzcheck .hc-pdp-sc-claim{
  /* wie .hc-pdp-chip */
  display: inline-flex;
  margin-left: 0px!important;
  align-items: center;
  gap: 12px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 16px 18px;
  box-shadow: var(--hc-shadow-sm);
  color: var(--hc-text);
  font-size: var(--hc-card-text);
  line-height: 1.4;
  transition: transform var(--hc-ease), box-shadow var(--hc-ease), border-color var(--hc-ease);
}

/* Hover exakt wie Chips */
.hc-pdp-scope .hc-pdp-substanzcheck .hc-pdp-sc-claim:hover{
  transform: translateY(-3px);
  border-color: var(--hc-accent);
  box-shadow: var(--hc-shadow-lg);
}

/* Icon wie bei Chips (Akzentfarbe, klare Größe) */
.hc-pdp-scope .hc-pdp-substanzcheck .hc-pdp-sc-claim em{
  font-size: var(--hc-fs-chip-icon);
  line-height: 1;
  color: var(--hc-accent);
  flex: 0 0 auto;
}

/* Mobile: Claims auf volle Breite, wenn du das willst */
@media (max-width: 600px){
  .hc-pdp-scope .hc-pdp-substanzcheck .hc-pdp-sc-claim{
    width: 100%;
    justify-content: flex-start;
  }

  .hc-pdp-scope .hc-pdp-substanzcheck .hc-pdp-sc-claims {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hc-gap);
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}
}

/* --- Grid --- */
.hc-pdp-substanzcheck .hc-pdp-sc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  /* align-items: center; */
}

@media (max-width: 900px) {
  .hc-pdp-substanzcheck .hc-pdp-sc-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* --- Big Number --- */
.hc-pdp-substanzcheck .hc-pdp-sc-big {
  background: var(--hc-accent-soft);
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 28px 24px;
  text-align: center;
  align-content: center;
  box-shadow: var(--hc-shadow-sm);
}

.hc-pdp-substanzcheck .hc-pdp-sc-bignum {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.hc-pdp-substanzcheck .hc-pdp-sc-num {
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 700;
  line-height: 1;
  color: var(--hc-accent-dark);
}

.hc-pdp-substanzcheck .hc-pdp-sc-label {
  font-size: var(--hc-fs-body);
  letter-spacing: 0.5px;
  color: var(--hc-text-2);
  margin-top: 6px;
}

.hc-pdp-substanzcheck .hc-pdp-sc-note {
  font-size: var(--hc-fs-small);
  color: var(--hc-text-2);
  line-height: 1.5;
}

/* --- Vergleichsseite --- */
.hc-pdp-substanzcheck .hc-pdp-sc-vs {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hc-pdp-substanzcheck .hc-pdp-sc-pill {
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 18px;
  text-align: center;
  box-shadow: var(--hc-shadow-sm);
}

.hc-pdp-substanzcheck .hc-pdp-sc-pilltop {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--hc-text-2);
  margin-bottom: 4px;
}

.hc-pdp-substanzcheck .hc-pdp-sc-pillnum {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--hc-text-2);
}

.hc-pdp-substanzcheck .hc-pdp-sc-pillsub {
  font-size: 14px;
  color: var(--hc-text-2);
}

/* --- Divider --- */
.hc-pdp-substanzcheck .hc-pdp-sc-divider {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--hc-accent),
    transparent
  );
}

/* --- Takeaway --- */
.hc-pdp-substanzcheck .hc-pdp-sc-takeaway {
  background: #fff;
  border-left: 4px solid var(--hc-accent);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: var(--hc-fs-small);
  line-height: 1.55;
  color: var(--hc-text-2);
}

.hc-pdp-substanzcheck .hc-pdp-sc-takeaway strong {
  margin-bottom: 4px;
  color: var(--hc-text-2);
}


/* ===========================
   Journey / 3-Monats-Block
   =========================== */
.hc-pdp-scope .hc-pdp-journey-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hc-gap);
  margin-top: 24px;
}

.hc-pdp-scope .hc-pdp-journey-card{
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  box-shadow: var(--hc-shadow-sm);
  overflow: hidden;
  transition: transform var(--hc-ease), box-shadow var(--hc-ease), border-color var(--hc-ease);
}

.hc-pdp-scope .hc-pdp-journey-card:hover{
  transform: translateY(-3px);
  border-color: var(--hc-accent);
  box-shadow: var(--hc-shadow-lg);
}

.hc-pdp-scope .hc-pdp-journey-img{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f3f3f3;
}

.hc-pdp-scope .hc-pdp-journey-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hc-pdp-scope .hc-pdp-journey-chip{
  margin-top: -18px;
  padding: 0 18px;
  position: relative;
}

.hc-pdp-scope .hc-pdp-journey-chip-inner{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hc-accent-soft);
  border: 1px solid var(--hc-accent);
  color: var(--hc-text);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--hc-shadow-sm);
}

.hc-pdp-scope .hc-pdp-journey-chip-inner em{
  color: var(--hc-accent-dark);
  font-size: var(--hc-fs-icon-sm) !important;
}

.hc-pdp-scope .hc-pdp-journey-title{
  font-size: 18px;
  font-weight: var(--hc-font-semi-bold);
  color: var(--hc-text);
  margin: 14px 18px 8px;
  line-height: 1.25;
}

.hc-pdp-scope .hc-pdp-journey-text{
  margin: 0 18px 18px;
  font-size: var(--hc-card-text);
  line-height: 1.55;
  color: var(--hc-text-2);
}

.hc-pdp-scope .hc-pdp-journey-disclaimer{
  margin-top: 14px;
  color: var(--hc-text-2);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 1024px){
  .hc-pdp-scope .hc-pdp-journey-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px){
  .hc-pdp-scope .hc-pdp-journey-grid{
    grid-template-columns: 1fr;
  }
  .hc-pdp-scope .hc-pdp-journey-title{
    font-size: var(--hc-fs-corv-h3);
  }
}

.hc-pdp-scope .hc-pdp-corv-h3-icon{
  display: flex;
  align-items: center;
  gap: 10px;
}

.hc-pdp-scope .hc-pdp-corv-h3-ico{
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hc-pdp-scope .hc-pdp-corv-h3-ico img{
  width: 100%;
  height: 100%;
  display: block;
}

.hc-pdp-scope .hc-pdp-corv-card-meta h3 em{
  margin-right: 8px;
  color: var(--hc-accent);
}


/* BLIND SECTION – schiebt nur den odd/even Wechsel, ohne sichtbaren Inhalt */
.hc-pdp-scope .hc-pdp-blank{
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
}


/*Korrekturen Shop*/
.slider-product .slider-img img, .slider-product .slider-img-set img {
    object-fit: contain!important;
}

.seller-img img {
    object-fit: contain!important;
}


@media (max-width: 767px) {
  #___ratingbadge_0 {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/*Korrekturen WK Buttons aufgrund Express CO*/
.cart-footer-btn .zum-wk-minitext {
    line-height: 0;
    font-weight: normal;
    text-transform: none;
    margin-top: 0;
    margin-bottom: 0;
}

.cart-footer-below-btn {
    font-size: var(--xxs);
    color: var(--brownish-grey);
    text-align: center;
    padding-top: 10px;
    display: none;
}

.cart-footer-btn {
    display: flex;
    flex-direction: column-reverse;
    row-gap: 10px;
}



@media only screen and (max-width: 767px) {

    /* 1. Hintergrund-Sperre */
    body.cart-is-open {
        overflow: hidden !important;
        position: fixed !important; 
        width: 100% !important;
        height: 100% !important;
    }

    /* 2. Blur-Effekt Ebene */
    .cartArea-mobileContainer::before {
        content: "";
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        z-index: 9998;
        pointer-events: none;
        transition: all 0.3s ease;
    }

    .cartArea-mobileContainer:has(.cartArea-mobile.active)::before {
        background: rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* 3. Der mobile Warenkorb */
    .cartArea-mobile.active {
        position: fixed !important;
        right: 0px;
        top: 47px;
        bottom: 0px !important;
        width: 100%;
        height: auto !important;
        background-color: #ffffff;
        z-index: 9999;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 10px 40px rgba(0,0,0,0.3);
        border-radius: 0 !important;
    }

    /* 4. Glassmorphism Footer (Apple-Style) */
    .cart-footer {
        position: sticky;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        /* Leicht transparentes Weiß */
        background: rgba(255, 255, 255, 0.82) !important;
        /* Der magische Blur-Effekt */
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        
        /* Schatten nach oben, der den Scroll-Bereich markiert */
        box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.06);
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        
        padding-bottom: env(safe-area-inset-bottom, 15px);
    }

    /* 5. Haptisches Feedback (Button Klick-Effekt) */
    .cart-footer a, 
    .cart-footer button {
        transition: transform 0.1s ease-in-out !important;
    }

    .cart-footer a:active, 
    .cart-footer button:active {
        transform: scale(0.95) !important; /* Button wird beim Drücken kleiner */
    }
}

/* 6. Goldene Scrollbar (Sichtbar beim Wischen) */
.cartArea-mobile.active::-webkit-scrollbar {
    width: 5px !important;
}
.cartArea-mobile.active::-webkit-scrollbar-thumb {
    background: #C6B371;
    border-radius: 10px;
}

/*Korrekturen Shop h5 zu h1 /h2 */

.tab-text h1, 
.tab-text h2, 
.tab-text h3 {
    all: unset; /* Löscht alle hässlichen globalen Styles (Rahmen, Padding, etc.) */
    display: block;
    font-family: inherit;
    color: #333;
    line-height: 1.2;
}

.tab-text h1 {
    font-size: 1.75rem;    /* ca. 28px */
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.tab-text h2 {
    font-size: 1.375rem;   /* ca. 22px */
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.tab-text h3 {
    font-size: 1.125rem;   /* ca. 18px */
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;    
}

    /* --- Mobile Styles (bis 768px) --- */

@media screen and (max-width: 768px) {
    .tab-text h1 {
        font-size: 1.5rem;     /* ca. 24px */
        margin-bottom: 1rem;
    }

    .tab-text h2 {
        font-size: 1.25rem;    /* ca. 20px */
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .tab-text h3 {
        font-size: 1.05rem;    /* ca. 17px */
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
    }
}

    /* --- Sauberkeits-Check für den Inhalt --- */

    /* Verhindert doppeltes Fett-Design durch die <strong> Tags im HTML */
.tab-text h1 strong, 
.tab-text h2 strong, 
.tab-text h3 strong {
    font-weight: inherit;
    color: inherit;
}

/* FAQS in den alten Beschreibungen */

/* --- FAQ Styles --- */
.pdp-old-faq-wrapper {
    max-width: 100%;
    margin: 2.5rem 0;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

/* Hauptüberschrift - dezent verkleinert */
.pdp-old-faq-main-title {
    all: unset;
    display: block;
    font-size: 1.25rem; /* ca. 20px statt 24px */
    font-weight: 700;
    color: #333;
    margin-bottom: 0.4rem;
}

/* Subtext - schlichter */
.pdp-old-faq-subtitle {
    font-size: 0.95rem; /* ca. 15px */
    color: #666;
    margin-bottom: 1.75rem;
    line-height: 1.4;
}

.pdp-old-faq-container {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pdp-old-faq-item {
    background: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-radius: 0.3rem;
    transition: all 0.2s ease;
    overflow: hidden;
}

.pdp-old-faq-item[open] {
    background: #ffffff;
    border-color: #cccccc;
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
}

/* Frage - Schriftgröße optimiert */
.pdp-old-faq-question {
    padding: 0.85rem 1.1rem;
    font-size: 1rem; /* Standard 16px für bessere Lesbarkeit ohne "Erschlagen" */
    font-weight: 600;
    color: #333;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    outline: none;
}

.pdp-old-faq-question::-webkit-details-marker {
    display: none;
}

/* Icon */
.pdp-old-faq-question::after {
    content: '+';
    font-size: 1.25rem;
    color: #999;
    font-weight: 300;
    transition: transform 0.25s ease;
}

.pdp-old-faq-item[open] .pdp-old-faq-question::after {
    transform: rotate(45deg);
    color: #222;
}

/* Antwort-Text */
.pdp-old-faq-answer {
    padding: 0 1.1rem 1.1rem 1.1rem;
    font-size: 0.95rem; /* Etwas kleiner als die Frage */
    line-height: 1.55;
    color: #555;
    border-top: 1px solid #f2f2f2;
    padding-top: 0.85rem;
}

.pdp-old-faq-answer p {
    margin: 0;
}

/* --- Mobile Optimierung (Handys & kleine Tablets) --- */
@media screen and (max-width: 768px) {
    .pdp-old-faq-wrapper {
        margin: 2rem 0;
    }

    .pdp-old-faq-main-title {
        font-size: 1.15rem;
    }

    .pdp-old-faq-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.25rem;
    }

    .pdp-old-faq-question {
        font-size: 0.95rem;
        padding: 0.8rem 1rem;
    }

    .pdp-old-faq-answer {
        font-size: 0.9rem;
        padding: 0 1rem 1rem 1rem;
        padding-top: 0.75rem;
    }
}

.pdp-old-faq-hr-simple {
    border: 0;
    height: 1.5px; /* Ein Mü dicker als Standard für Sichtbarkeit */
    margin: 1rem 0;
    width: 100%;
    /* Kräftiger Sandstone-Ton, der an den Enden (0% und 100%) auf transparent geht */
    background: linear-gradient(to right, 
        rgba(179, 143, 109, 0) 0%, 
        rgba(179, 143, 109, 1) 15%, 
        rgba(179, 143, 109, 1) 85%, 
        rgba(179, 143, 109, 0) 100%
    );
}


/* Kategorien Mobil verbessert - Struktur-Optimiert */
@media (max-width: 991px) {
    /* 1. Ebene 0: Master-Container & Toggle */
    .category-menu {
        display: block !important;
        width: 100% !important;
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .category-menu ul {
        display: block !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .menu-master-toggle {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 16px 15px !important;
        background: #f5f5f5 !important;
        color: #000000 !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        cursor: pointer !important;
        border-bottom: 1px solid #000000 !important;
        letter-spacing: 0.5px;
        text-transform: none !important;
    }

    .menu-master-toggle span {
        display: flex !important;
        align-items: center !important;
        margin-right: 10px;
    }

    .menu-master-toggle span.is-current::before {
        font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f02b";
        margin-right: 12px;
        color: var(--sandstone) !important;
        font-size: 13px;
        margin-top: 0 !important; 
        flex-shrink: 0;
    }

    .menu-master-toggle::after {
        font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f078";
        font-size: 16px;
        color: #333;
        transition: transform 0.3s ease;
    }

    .category-menu > ul {
        display: none !important;
        border-top: none !important;
    }

    .category-menu.is-expanded > ul {
        display: block !important;
    }

    .category-menu.is-expanded .menu-master-toggle::after {
        transform: rotate(180deg);
    }

    /* 2. Ebene 1 (sub1) */
    .category-menu li.sub1 {
        display: block !important;
        border-bottom: 1px solid #eeeeee !important;
    }

    .category-menu li.sub1 > a {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 15px !important;
        color: #000000 !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        background: #ffffff !important;
        border: none !important;
    }

    .category-menu li.sub1 > a::after {
        content: '\2304'; 
        font-size: 16px;
        color: #cccccc;
        transition: transform 0.2s;
    }

    .category-menu li.sub1.open > a::after {
        transform: rotate(180deg);
    }

    /* 3. Ebene 2 (sub2) */
    .category-menu li.sub1 + ul {
        display: none !important;
        background: #fafafa !important;
        border: none !important;
    }

    .category-menu li.sub1.open + ul {
        display: block !important;
    }

    .category-menu li.sub2 {
        border-bottom: 1px solid #f2f2f2 !important;
    }

    .category-menu li.sub2:last-child {
        border-bottom: none !important;
    }

    .category-menu li.sub2 a {
        display: block !important;
        padding: 10px 15px 10px 30px !important;
        color: #666666 !important;
        text-decoration: none !important;
        font-size: 14px !important;
        border: none !important;
        background: transparent !important;
    }

    .category-menu li.sub2.active a {
        color: #000000 !important;
        font-weight: 500;
    }
}