/* miropell.de */
/***************/

/* Artikeldetails: Bereich um PREIS */
.UB_UnvPreisempfehlung {
    font-size: 0.9rem;
    color: #333;
    font-family: 'Lucida Sans Regular';
    font-weight: 300;
    margin-left: 10px;
}
#product-offer .product-info .shortdesc {
    margin-bottom: 4rem;
}
[data-page="1"] .product-detail .product-offer {
    background-color: #ecf3e0;
    padding: 20px 30px 1px;
}
[data-page="1"] button.btn.dropdown-toggle.btn-light {
    border-radius: 25px;
    border: none;
    color: #878787;
}
[data-page="1"] .dropdown.bootstrap-select.show-tick.form-control.custom-select {
        background-color: #ecf3e0 !important;
}
[data-page="1"] input#quantity {
    background-color: #ecf3e0 !important;
}
.btn-primary {
    color: #ffffff;
    background-color: #a1ca59 !important;
    border-color: #a1ca59 !important;
    font-weight: 400;
    font-size: 16px;
    padding: 8px 30px;
    transition: all 0.3s ease;
    border-radius: 25px;
}
[data-page="1"] .price_wrapper {
    margin-bottom: 1.5rem;
    color: #111;
}
[data-page="1"] .price_wrapper,
[data-page="1"] .vat_info,
[data-page="1"] dt.js-btn-slider-wrapper,
[data-page="1"] .delivery-status span,
[data-page="1"] span.vat_info a,
[data-page="1"] .estimated-delivery,
[data-page="1"] .UB_UnvPreisempfehlung {
    color: #111;
}
[data-page="1"] dt.js-btn-slider-wrapper {
    display: none;
}
[data-page="1"] .filter-option-inner-inner {
    color: #111;
    font-weight: 300;
}
[data-page="1"] .alert-info {
    color: #525252;
    background-color: #ffffff;
    border-color: #9a9f92;
}
[data-page="1"] #add-to-cart {
    margin-top: 0rem;
}
#product-offer .product-info .stock-information.stock-information-p {
    padding-top: 0;
    padding-bottom: 0;
}









a:hover,
.btn-link:hover {
    color: #93c940 !important;
    text-decoration: none;
}
.tab-navigation .nav-link::after {
    border-color: #93c940;
}
.carousel-thumbnails .slick-slide.slick-current {
    border: 1px solid #93c940;
}

/* STARTSEITE:  "Dann sind Sie bei MiroPell genau richtig!" */
.GenauRichtig {
    margin-top: 110px;
}
.GenauRichtig h3 {
    font-size: 44px;
    color: #a4d65e;
    font-weight: 600;
    text-align: center;
    font-family: 'Diavlo Bold Regular';
}
.GenauRichtig p {
    font-size: 21px;
    text-align: center;
    color: #7a7a7a;
}



/* STARTSEITE:  Einleitungsbereich */
/* ====== Gesamtbereich ====== */
.DIV-Miropell-Einleitung {
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* ====== Header: Logo + Hauptüberschrift ====== */
.DIV-Miropell-Einleitung .header-section {
  text-align: left;
  margin-bottom: 25px;
}

.DIV-Miropell-Einleitung .header-section img {
  max-width: 220px;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.DIV-Miropell-Einleitung .header-section h1 {
    font-size: 3rem;
    font-weight: 600;
    color: #525252;
    margin: 0;
    font-family: 'Diavlo Black Regular';
}

/* ====== Zweispaltiger Bereich ====== */
/* Umschließender Bereich */
.DIV-Miropell-Einleitung {
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Header oben über den Spalten */
.DIV-Miropell-Einleitung .header-section {
  text-align: left;
  margin-bottom: 30px;
}

.DIV-Miropell-Einleitung .header-section img {
  max-width: 110px;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.DIV-Miropell-Einleitung .header-section h1 {
  font-size: 2.2rem;
  font-weight: 600;
  color: #32424f;
  margin: 0;
}
.DIV-Miropell-Einleitung .header-section h2 {
    color: #525252;
    margin-top: 10px;
    font-size: 1.6rem;
    line-height: 1.9rem;
    font-family: 'Diavlo Medium Regular';
    letter-spacing: 0.03rem;
}
/* Zweispaltiger Aufbau */
.DIV-Miropell-Einleitung .content-section {
  display: grid;
  grid-template-columns: 1fr 1fr; /* zwei gleich breite Spalten */
  align-items: center;            /* vertikal zentriert */
  gap: 40px;
}

/* Linke Spalte: Text */
.DIV-Miropell-Einleitung .text-section {
  text-align: left;
}
.DIV-Miropell-Einleitung .text-section h3 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #a1ca5a;
    margin-bottom: 0.5rem;
    font-family: 'Diavlo Medium Regular';
    letter-spacing: 1px;
}
.DIV-Miropell-Einleitung .text-section p {
    font-size: 1.2rem;
}

/* Rechte Spalte: Bild */
.DIV-Miropell-Einleitung .image-section {
  text-align: right;
  display: flex;
  justify-content: center;
  align-items: center;
}

.DIV-Miropell-Einleitung .image-section img {
  width: 100%;
  max-width: 600px;
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

/* Dezenter Hover-Effekt */
.DIV-Miropell-Einleitung .image-section img:hover {
  transform: translateY(-2px) scale(1.01);
  filter: drop-shadow(0 11px 8px rgba(0, 0, 0, 0.25));
}

/* Responsive Darstellung */
@media (max-width: 900px) {
  .DIV-Miropell-Einleitung .content-section {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .DIV-Miropell-Einleitung .image-section {
    justify-content: center;
    text-align: center;
  }
}
/* STARTSEITE:  Einleitungsbereich - ENDE */


/* ========================================
   Variationen in Artikeldetails; Swatches
   ======================================== */
/* ======================================================
   HANFLEBEN – PREMIUM SWATCH DESIGN V3 (KOMPAKT + ELEGANT)
   ====================================================== */

/* Grundlayout */
.swatches.imgswatches {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 10px;
}

/* Kompakte, elegante Box */
.variation.swatches.swatches-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    width: 130px;
    min-height: 70px;
    padding: 5px 10px;
    background: #fff;
    border: 1.6px solid #aaa !important;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #2b2b2b;
    text-align: center;
    cursor: pointer;
    transition: all 0.20s ease;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    letter-spacing: -0.2px;
}
.swatches.js-slider-items {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* Abstand zwischen den Spalten */
}
.variation-advantage {
    display: block;
    font-size: 12px;
    margin-top: 3px;
    font-weight: 600;
    color: #176262;
}
.variations .swatches .variation-badge {
    white-space: initial;
    margin-left: inherit;
}

/* Hover – fein, edel */
.variation.swatches.swatches-text:hover {
    border-color: #e8c893 !important;
    background: #d69e4191 !important;
}

/* Aktiv – kompakt, aber deutlich */
.variation.swatches.swatches-text.active {
    background: #eaf6ea !important;
    border: 3px solid #176262 !important;
    box-shadow: 0 4px 10px rgba(23, 98, 98, 0.32);
    transform: translateY(-2px);
}

/* Preis-Badge sehr dezent */
.variation.swatches.swatches-text .variation-badge {
    display: block;
    margin-top: 0;
    font-size: 13px;
    font-weight: 400;
    color: #111;
}

/* sr-only raus */
.variation.swatches.swatches-text .sr-only {
    display: none !important;
}

/* Input verstecken */
.variation.swatches.swatches-text input.control-hidden {
    display: none !important;
}

/* Slider neutralisieren */
.variation-wrapper.js-slider-wrapper,
.js-slider-items,
.js-slider-item,
.js-slider-item[style] {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    transition: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
}
/* Optional: Anpassung für kleinere Bildschirme */
@media (max-width: 1024px) {
  .js-slider-item {
    flex: 1 1 calc(33.333% - 1rem); /* 3 Spalten */
  }
}

@media (max-width: 768px) {
  .js-slider-item {
    flex: 1 1 calc(50% - 1rem) !important; /* 2 Spalten */
  }
}

@media (max-width: 480px) {
  .js-slider-item {
    flex: 1 1 100%; /* 1 Spalte */
  }
}



/* Section "GEMEINSAM FÜR DIE UMWELT" */
.DIV-Gemeinsam {
    color: #fff;
    padding: 70px 0 50px;
}
.DIV-Gemeinsam h5 {
    color: #fff;
}
.DIV-Gemeinsam h6 {
    color: #fff;
    font-size: 2rem;
    font-family: 'Diavlo Black Regular';
    margin-top: 50px;
    margin-bottom: 50px;
}
.GRID-Gemeinsam {
    margin-left: auto;
    margin-right: auto;
}
h5.headline1 {
    font-family: 'Diavlo Medium Regular';
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    margin-bottom: 30px;
}
h5.headline2 {
    font-family: 'Diavlo Bold Regular';
    font-size: 3.5rem;
    margin-bottom: 40px;
}
.GRID-Gemeinsam p {
    font-size: 1.3rem;
    line-height: 2.2rem;
}
.GRID-Gemeinsam .btn-primary {
    border-color: #37441F !important;
    box-shadow: none;
    color: #fff;
}
.GRID-Gemeinsam .btn-primary:hover {
    transform: scale(1.05);
    background-color: #37441F !important;
    color: #fff !important;
}










/* ============================================================
   MISCANTHUS SECTION – START
   ============================================================ */

#section-miscanthus {
  width: 100%;
  background-color: #ffffff;
  padding: 80px 20px;
  box-sizing: border-box;
  overflow: hidden;
}

#section-miscanthus .miscanthus-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- TEXTBEREICH --- */
#section-miscanthus .miscanthus-text {
  flex: 1;
  min-width: 300px;
}

#section-miscanthus .miscanthus-text h2 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    color: #222;
    margin-bottom: 25px;
    font-family: 'Diavlo Bold Regular';
}

#section-miscanthus .miscanthus-text p {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
}

#section-miscanthus .miscanthus-text .highlight {
    color: #b5d05a;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 4rem;
}
/* --- BUTTON --- */
#section-miscanthus .btn-miscanthus {
  display: inline-block;
  background-color: #37441F;
  color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 10px;
}

#section-miscanthus .btn-miscanthus:hover {
  background-color: #85b44a;
  box-shadow: 0 8px 20px rgba(157, 201, 85, 0.4);
  transform: translateY(-3px);
}

/* --- BILDBEREICH --- */
#section-miscanthus .miscanthus-image {
  flex: 1;
  min-width: 280px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#section-miscanthus .miscanthus-image img {
    width: 60%;
    max-width: 550px;
    transition: transform 0.8s ease, filter 0.8s ease;
    filter: drop-shadow(0 10px 4px rgba(0,0,0,0.15));
}
/* sanfter Hover auf dem Bild */
#section-miscanthus .miscanthus-image:hover img {
  transform: scale(1.05) rotate(-2deg);
  filter: drop-shadow(0 18px 25px rgba(0,0,0,0.25));
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 992px) {
  #section-miscanthus .miscanthus-container {
    flex-direction: column;
    text-align: center;
  }

  #section-miscanthus .miscanthus-image img {
    width: 70%;
    max-width: 400px;
  }

  #section-miscanthus .miscanthus-text h2 {
    font-size: 2.1rem;
  }
}

@media (max-width: 600px) {
  #section-miscanthus {
    padding: 60px 15px;
  }

  #section-miscanthus .miscanthus-text h2 {
    font-size: 1.8rem;
  }

  #section-miscanthus .miscanthus-text p {
    font-size: 1rem;
  }

  #section-miscanthus .btn-miscanthus {
    padding: 10px 24px;
  }
}

/* ============================================================
   MISCANTHUS SECTION – ENDE
   ============================================================ */






/* ============================================================
   SECTION PRODUKTE – FREIGESTELLTE PNG-BILDER (ZENTRIERT)
   ============================================================ */

#section-produkte-bilder {
  width: 100%;
  background: #ffffff;
  text-align: center;
  padding: 100px 20px;
  box-sizing: border-box;
}
#section-produkte-bilder h2 {
    font-size: 3.5rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 0;
    font-family: 'Diavlo Bold Regular';
}
#section-vorteile h4 {
    font-family: "Diavlo Bold Regular";
    font-size: 3rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 30px;
    line-height: 3rem;
}
#section-produkte-bilder .subtitle {
    color: #b5d05a;
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 60px;
}

/* --- GRID --- */
.produkte-bilder-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 60px 80px; /* vertikal / horizontal gleichmäßiger Abstand */
  max-width: 1200px;
  margin: 0 auto;
}

/* --- PRODUKT-ELEMENT --- */
.produkt-item {
  flex: 0 1 300px; /* gleichmäßige Breite */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  transition: transform 0.4s ease;
}

.produkt-item img {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 260px;
  height: auto;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18));
  object-fit: contain;
}

/* --- HOVER-EFFEKT --- */
.produkt-item:hover img {
  transform: scale(1.08) translateY(-8px);
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.25));
}
.produkt-item h3 {
    color: #b5d05a;
    font-weight: 700;
    font-size: 1.35rem;
    margin-top: 20px;
    margin-bottom: 6px;
    letter-spacing: 0.05rem;
}

.produkt-item p {
  color: #555;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
  margin: 0;
}

/* --- NATURDÜNGER – GANZ UNTEN ZENTRIERT & GRÖSSER --- */
.produkt-item.gross {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
}

.produkt-item.gross img {
  max-width: 420px;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  .produkte-bilder-grid {
    gap: 40px;
  }
  .produkt-item img {
    max-width: 200px;
  }
  .produkt-item.gross img {
    max-width: 340px;
  }
}

@media (max-width: 600px) {
  #section-produkte-bilder {
    padding: 60px 15px;
  }
  #section-produkte-bilder h2 {
    font-size: 2rem;
  }
  .produkt-item img {
    max-width: 160px;
  }
  .produkt-item.gross img {
    max-width: 280px;
  }
  .produkt-item p {
    font-size: 0.85rem;
  }
}

/* ============================================================
   ENDE SECTION PRODUKTE
   ============================================================ */





/* ============================================================
   SECTION VORTEILE – START
   ============================================================ */

#section-vorteile {
  width: 100%;
  background-color: #f8f8f8;
  padding: 100px 20px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

#section-vorteile .vorteile-container {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: center;
  gap: 40px;
}

/* --- TEXTBEREICH --- */
#section-vorteile .vorteile-text {
  background: #ffffff;
  padding: 40px 50px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

#section-vorteile .vorteile-text:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

#section-vorteile .vorteile-text h2 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 25px;
}

#section-vorteile .vorteile-text p {
  font-size: 1.1rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* --- BILDER LINKS UND RECHTS --- */
#section-vorteile .vorteile-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#section-vorteile .vorteile-image img {
  width: 90%;
  max-width: 420px;
  transition: transform 0.6s ease, filter 0.6s ease, box-shadow 0.6s ease;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

/* sanfter Hover auf den Bildern */
#section-vorteile .vorteile-image img:hover {
  transform: scale(1.05);
  filter: brightness(95%);
  box-shadow: 0 16px 35px rgba(0,0,0,0.25);
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  #section-vorteile .vorteile-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  #section-vorteile .vorteile-image.left,
  #section-vorteile .vorteile-image.right {
    order: unset;
  }

  #section-vorteile .vorteile-image img {
    max-width: 300px;
    margin: 20px auto;
  }

  #section-vorteile .vorteile-text {
    padding: 30px;
  }
}

@media (max-width: 600px) {
  #section-vorteile {
    padding: 60px 15px;
  }

  #section-vorteile .vorteile-text h2 {
    font-size: 1.9rem;
  }

  #section-vorteile .vorteile-text p {
    font-size: 1rem;
  }

  #section-vorteile .vorteile-image img {
    width: 80%;
  }
}

/* ============================================================
   SECTION VORTEILE – ENDE
   ============================================================ */











/* ============================
   Kundenservice Dropdown Panel (Topbar)
   ============================ */

#header-top-bar {
    position: sticky;
    top: 0;
    z-index: 2000 !important;
    background: #f5e7d3;
    border-bottom: 1px #A4D65E solid;
}

/* Wrapper */
#kundenservice-wrapper {
  position: relative;
  z-index: 2001;
}

/* Chevron-Pfeil am Toggle */
#kundenservice-toggle::after {
    content: "";
    display: inline-block;
    margin-left: 9px;
    border: solid #555;
    border-width: 0 2px 2px 0;
    padding: 2px;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    vertical-align: middle;
    margin-top: -5px;
}
#kundenservice-wrapper.open #kundenservice-toggle::after {
  transform: rotate(-135deg);
}

/* Panel */
#kundenservice-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 850px;
  max-width: 95vw;
  background: #fff;
  border: 1px solid #ddd;
  padding: 20px 20px 0 20px;
  z-index: 2002 !important;
  opacity: 0;
  transform: translateY(10px);
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}
#kundenservice-wrapper.open #kundenservice-panel {
  opacity: 1;
  transform: translateY(0);
  max-height: 1000px;
  pointer-events: auto;
}

/* Overlay */
#kundenservice-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#kundenservice-wrapper.open ~ #kundenservice-overlay {
  display: block;
  opacity: 1;
}

/* Close Button */
#kundenservice-panel .close-btn {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 22px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  transition: transform 0.2s, color 0.2s;
}
#kundenservice-panel .close-btn:hover {
  transform: rotate(90deg);
  color: #e60000;
}

/* Inhalt als Grid */
#kundenservice-panel .info-content {
  display: grid;
  grid-template-columns: 280px 1fr 1fr; /* Bild | FAQ | Kontakt */
  gap: 20px;
  align-items: start;
  grid-template-rows: auto auto;
}

/* Bild */
#kundenservice-panel .info-image img {
  width: 100%;
  max-width: 280px;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* Headline */
#kundenservice-panel .info-text h2 {
    margin: 0 0 5px;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
    font-family: 'Roboto';
}
#kundenservice-panel .info-text {
    width: 300px;
}
#kundenservice-panel .info-text .subline {
    margin: 0 0 25px;
    font-size: 14px;
    color: #666;
    font-weight: 600;
}
/* Links */
#kundenservice-panel .info-links {
    list-style: none;
    margin: 0 0 0 3px;
    padding: 0;
}
#kundenservice-panel .info-links li {
  margin-bottom: 11px;
  position: relative;
  padding-left: 16px; /* Platz für Pfeil */
}
#kundenservice-panel .info-links li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: #555;
}
#kundenservice-panel .info-links a {
  color: #333;
  text-decoration: none;
  transition: color 0.2s;
}
#kundenservice-panel .info-links a:hover {
  color: #0073e6;
}

/* Kontaktbereich */
#kundenservice-panel .info-contact {
  font-size: 14px;
  line-height: 1.6;
  margin-top: 47px; /* Damit KONTAKT exakt mit FAQ fluchtet */
}
#kundenservice-panel .info-contact h3 {
    margin: 27px 0 10px 24px;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
}
#kundenservice-panel .info-contact p {
  margin: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #555;
}
#kundenservice-panel .info-contact i {
    color: #898989;
    min-width: 16px;
    text-align: center;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
  #kundenservice-panel {
    left: 0;
    right: auto;
    width: 95vw;
  }
  #kundenservice-panel .info-content {
    grid-template-columns: 1fr;
    text-align: left;
  }
  #kundenservice-panel .info-image img {
    margin: 0 auto;
  }
  #kundenservice-panel .info-contact {
    margin-top: 20px; /* Reset im Mobile */
  }
}
/* Kundenservice Dropdown Panel (Topbar) - ENDE */

/* Warenkorb rechts oben: Icon mit Anzahl der Produkte */
.fa-sup {
    margin-left: -1.5em;
    margin-top: 2em;
}













/* Startseite: Content-Wrapper oben ohne Abstand; nur Startseite */
[data-page="18"] #content-wrapper:not(.has-fluid) {
    padding-top: 0;
}
header .navbar-brand {
	padding-top: 0;
	padding-bottom: 0;
} 

/* Navigation */
.nav-scrollbar-item .nav-mobile-heading {
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 1rem;
    text-transform: uppercase;
    color: #111;
}
header .navbar-nav>.nav-item>.nav-link {
    color: #111;
    font-family: 'Roboto';
    text-transform: uppercase;
    font-size: 1rem;
}
ul.navbar-nav.nav-scrollbar-inner {
    padding: 0;
}
@media (min-width: 992px) {
	header .navbar-collapse {height: 3.0rem;}
}

/* Startseite: Willkommen DIV */
.DIV-Willkommen {
    min-height: 300px;
	margin-top: 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.DIV-Willkommen .willkommengrafik {
    width: 100%;
    max-width: 992px; /* auf Desktop begrenzen */
    margin: 0 auto;
    text-align: center;
}
.DIV-Willkommen .willkommengrafik img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.DIV-Willkommen p {
    text-align: center;
    font-size: 19px;
    margin-top: 50px;
    max-width: 900px;    /* nicht breiter als 900px */
    width: 100%;         /* passt sich dem Viewport an */
    margin-left: auto;
    margin-right: auto;  /* immer mittig */
    line-height: 1.9rem;
}
/* Tablet und Mobile – volle Breite erlauben */
@media (max-width: 767px) {
	.DIV-Willkommen {min-height: 100px;}	
    .DIV-Willkommen p {
        font-size: 16px;
        line-height: 1.5rem;
        margin-top: 20px;
        padding: 0 15px;  /* links/rechts Luft, damit nix am Rand klebt */
    }	
}

/* Deal des Monats */
.DIV-Willkommen > h2 {
  text-align: center;
  font-size: 59px;
  color: #D5A03A;
  font-family: 'Square721 BT';
}
.DIV-Deal-des-Monats {
    background-color: #fff;
    border: 3px solid #a1ca59;
    margin-top: 50px;
}
div.h2-deal-des-monats {
    text-align: center;
    color: #525252;
    font-size: 59px;
    font-family: 'Diavlo Bold Regular';
}
.hl-divider {
    border: none;                
    border-top: 1px solid #825e24; 
    width: 70%;                  
    margin: 20px auto;           
}
.btn-primary {
    color: #ffffff;
    background-color: #a1ca59 !important;
    border-color: #a1ca59 !important;
    font-weight: 400;
    font-size: 17px;
    padding: 7px 30px;
    transition: all 0.3s ease;
}


.btn-primary:hover {
    background-color: #b2b2b2 !important;
    border-color: #b2b2b2 !important;
    transform: scale(1.05); /* leichte Vergrößerung ohne Layout-Verschiebung */
}

@media (max-width: 767px) {
	.DIV-Willkommen h2 {
		line-height: 3.3rem;
		font-size: 56px;
	}
	.DIV-Willkommen .opc-Countdown .cntdwn-item {
		font-size: 38px;
	}	
}
/* ===== Countdown-Zeile ===== */
.opc-Countdown .row.text-center {
    background-color: #a1ca59;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: stretch;
    text-align: center;
    border-radius: 6px;
    overflow: hidden;
}

/* ===== Spalten ===== */
.opc-Countdown .row.text-center .col {
  flex: 1;
  padding: 15px 10px;
  position: relative;
}

/* ===== Vertikale weiße Trenner NUR zwischen Tage, Stunden, Minuten ===== */
.opc-Countdown .row.text-center .col.days::after,
.opc-Countdown .row.text-center .col.hours::after,
.opc-Countdown .row.text-center .col.minutes::after {
  content: "";
  position: absolute;
  top: 10%;
  right: 0;
  width: 5px;
  height: 80%;
  background-color: #ffffff;
}

/* ===== Zahlen und Einheiten ===== */
.opc-Countdown .cntdwn-item {
  font-size: 2.2rem;
  font-weight: 700;
  color: #ffffff;
}

.opc-Countdown .cntdwn-unit {
  font-size: 1rem;
  color: #ffffff;
}










/* Bereich: Einstreu / Garten / Miropell Welt */
/* ============================================================
   MIROPELL KACHELN – START
   ============================================================ */

#DIV_MiropellKacheln {
  width: 100%;
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* --- GRID LAYOUT --- */
#DIV_MiropellKacheln .image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  justify-content: center;
  align-items: stretch;
}

/* --- KACHEL-BASIS --- */
#DIV_MiropellKacheln .image-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
#DIV_MiropellKacheln .image-card img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s ease, filter 0.6s ease;
}

/* --- OVERLAY --- */
#DIV_MiropellKacheln .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px 25px;
}

/* --- TEXT (unten rechts) --- */
#DIV_MiropellKacheln .overlay-text {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.8rem;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.3;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    transition: all 0.4s ease;
    font-family: 'Diavlo Black Regular';
}
/* --- HOVER --- */
#DIV_MiropellKacheln .image-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
}

#DIV_MiropellKacheln .image-card:hover img {
  transform: scale(1.15);
  filter: brightness(70%);
}

#DIV_MiropellKacheln .image-card:hover .overlay-text {
  color: #ffffff;
  transform: translateY(-4px);
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
  letter-spacing: 2px;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  #DIV_MiropellKacheln .overlay-text {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  #DIV_MiropellKacheln .image-grid {
    gap: 15px;
  }
  #DIV_MiropellKacheln .overlay-text {
    font-size: 1.1rem;
  }
}

/* ============================================================
   MIROPELL KACHELN – ENDE
   ============================================================ */

/* Bereich: Einstreu / Garten / Miropell Welt - ENDE */













/* Slider Startseite */
/* ===========================
   HANFLEBEN – Slider B
   =========================== */

:root{
  --slider-h: 800px;
  --content-max: 1500px;

  /* schmalere Textspalte, größere Stage */
  --left-w: 35%;    /* vorher 45% */
  --stage-w: 65%;

  --b2-w: 900px;
  --b3-w: 500px;

  --fade-time: .9s;
  --delay-b2: .45s;
  --delay-b3: .95s;
}

.hlb-slider{
  position:relative;
  width:100%;
  height:var(--slider-h);
  overflow:hidden;
  background:#0f1216;
  isolation:isolate;
}

/* EINZEL-SLIDE */
.hlb-slide{
  position:absolute;
  inset:0;
}

/* Hintergrund */
.hlb-bg{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.02);
  will-change: opacity, transform;
  transition: opacity .9s ease, transform 1.4s ease;
}
.hlb-bg.is-in{
  opacity:1;
  transform:scale(1);
}

/* Innenlayout */
.hlb-inner {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: 45% 45%;
    align-items: center;
    gap: 1.5rem;
    padding-left: clamp(10px, 2vw, 20px);
    padding-right: clamp(10px, 2vw, 20px);
}

/* Linker Textbereich */
.hlb-left {
    color: #fff;
    opacity: 0;
    transform: translateY(10px);
    /* Dauer verlängert auf 1.8s */
    transition: opacity 2s ease .9s,
                transform 2s ease .9s;
    padding-left: clamp(90px, 1vw, 12px);
}
.hlb-left.is-in{
    opacity:1;
    transform: translateY(0);
}
.hlb-kicker {
    margin: 0 0 clamp(12px, 1.6vw, 418px) 0;
    font-size: clamp(28px, 4.6vw, 62px);
    line-height: 1.05;
    letter-spacing: .02em;
    color: #ffffff;
    text-shadow: 0 10px 28px rgba(0,0,0,.35);
    font-family: 'Square721 BT';
}
.hlb-perc {
    font-size: clamp(90px, 18vw, 170px);
    font-weight: 800;
    line-height: .9;
    color: #000;
    text-shadow: 0 14px 42px rgba(0,0,0,.35);
    -webkit-text-stroke: 0 transparent;
    font-family: 'Square721 BT';
}
.hlb-headline {
    margin-top: clamp(6px, .6vw, 10px);
    font-size: clamp(34px, 6vw, 96px);
    font-weight: 700;
    line-height: 1.02;
    text-shadow: 0 10px 28px rgba(0,0,0,.35);
    font-family: 'Square721 BT';
}
.hlb-footnote{
  margin-top: clamp(16px, 1.8vw, 22px);
  font-size: clamp(12px, 1.4vw, 18px);
  opacity:.9;
}

/* Bühne rechts */
.hlb-stage{
  position:relative;
  height:100%;
}

/* Objekte */
.hlb-obj{
  position:absolute;
  bottom: clamp(22px, 3vh, 40px);
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.45));
  pointer-events:none;
  opacity:0;
  transform: translateY(20px) scale(.98);
}

/* Bottles (b2): mittig rechts */
.hlb-b2 {
    width: var(--b2-w);
    left: 19%;
    transform-origin: 50% 100%;
}

/* Boxen (b3): rechts außen */
.hlb-b3{
  width: var(--b3-w);
  right: -3%;
  transform-origin: 50% 100%;
}

/* Aktivierungszustände (werden via JS gesetzt) */
.hlb-b2.is-in{
  opacity:1; transform: translateY(0) scale(1);
  transition: opacity 2s ease var(--delay-b2),
              transform 2s ease var(--delay-b2);
}
.hlb-b3.is-in{
  opacity:1; transform: translateY(0) scale(1);
  transition: opacity var(--fade-time) ease var(--delay-b3),
              transform var(--fade-time) ease var(--delay-b3);
}

/* Responsiv justieren */
@media (max-width: 720px){
  :root{
    --slider-h: 460px;   /* statt 680px → viel kompakter */
    --b2-w: 220px;       /* Fläschchen kleiner, aber sichtbar */
    --b3-w: 240px;       /* Boxen kleiner */
  }

  .hlb-inner{
    grid-template-columns: 1fr;
    align-items: flex-start;
    padding: 12px;
  }

  .hlb-left{
    font-size: 14px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .hlb-kicker{
    font-size: clamp(18px, 6vw, 28px);
  }
  .hlb-perc{
    font-size: clamp(60px, 20vw, 110px);
  }
  .hlb-headline{
    font-size: clamp(20px, 7vw, 36px);
  }
  .hlb-footnote{
    font-size: 11px;
  }

  .hlb-b2{ left: 10%; bottom: 10px; }
  .hlb-b3{ right: 0; bottom: 0; }
  .hlb-balance{ width: 220px; right: 4%; bottom: 6px; }
}
/* Slider Startseite - ENDE */













/* ICONs im Header (Anmelden, Warenkorb, usw) */
/* Account-Icon (Inline-SVG) */
.account-icon-dropdown .hl-icon-svg{
  width: 24px; 
  height: 24px;
  display:block;
  color: #3d3a37;           /* Icon-Farbe */
}
.account-icon-dropdown > a:hover .hl-icon-svg{ color:#1f1d1b; }
/* Einheitlicher Icon-Look */
.hl-icon-link{ position:relative; line-height:0; color:#3d3a37; }
.hl-icon-link:hover{ color:#1f1d1b; }

.hl-icon-svg{
  width:26px; height:26px; display:block;
  shape-rendering:geometricPrecision; /* saubere Kanten */
}
/* Badge (Wunschliste + Warenkorb) */
.hl-badge{
  position:absolute;
  top:-8px;
  right:-10px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#e05650; /* Rot */
  color:#fff;
  font: 600 12px/18px system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  text-align:center;
}
@media (max-width: 480px){
  .hl-icon-svg{ width:22px; height:22px; }
  .hl-badge{ top:-6px; right:-8px; min-width:16px; height:16px; line-height:16px; font-size:11px; }
}
/* Warenkorb-Link als Flexbox */
.cart-icon-dropdown .nav-link{
  display: flex;
  align-items: center;   /* vertikal zentriert */
  gap: 6px;              /* Abstand Icon ↔ Preis */
  line-height: 1;        /* verhindert „Springen“ */
}
/* Preis neben dem Icon */
.cart-icon-dropdown-price{
  font-size: 14px;
  font-weight: 500;
  color: #3d3a37;
  display: inline-block;
  margin-top: 1px;
}
/* ICONs im Header (Anmelden, Warenkorb, usw) - ENDE */







/* Suche im Header zum Ausklappen (LUPE) */
/* Altes, großes Suchmodul sicher ausblenden (falls noch irgendwo gerendert) */
.main-search-wrapper,
#search,
#search .search-wrapper {
  display: none !important;
}

/* Einheitliche Icon-Optik (passt zu deinen neuen Icons) */
.hl-icon-link {
  position: relative;
  line-height: 0;
  color: #3d3a37;
}
.hl-icon-link:hover { color: #1f1d1b; }
.hl-icon-svg { width: 26px; height: 26px; display: block; }

/* Such-Flyout (Desktop) mit sanftem Einsliden */
.hl-search-panel {
  padding: 10px;
  min-width: 360px;
  border: 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .10);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .35s ease, transform .35s ease;
  display: block;
  visibility: hidden;
}
.hl-search-panel.show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
div#hl-search-panel {
    top: 7px;
}
.hl-search-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.hl-search-input {
  height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e2d6c3;
  background: #fff;
}
.hl-search-input:focus {
  outline: none;
  border-color: #f1c65c;
  box-shadow: 0 0 0 3px rgba(241, 198, 92, .25);
}
.hl-search-submit {
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
}
.hl-search-submit .hl-icon-svg {
  width: 20px;
  height: 20px;
}

/* Mobil: Panel breit unter der Icon-Leiste */
@media (max-width: 768px) {
  .hl-search-panel {
    position: absolute;
    left: 0 !important;
    right: 0 !important;
    min-width: 100%;
    padding: 8px 12px;
  }
  .hl-search-input { height: 38px; }
  .hl-search-submit { height: 38px; }
}
/* Altes Suchfeld auch mobil komplett verstecken */
@media (max-width: 992px) {
  .main-search-wrapper,
  #search,
  #search .search-wrapper {
    display: none !important;
  }
}
/* Suche im Header zum Ausklappen (LUPE) - ENDE */





/* Orig JTL mobiles Suchformular (oberhalb der Icons) komplett ausblenden */
.search-form-wrapper-fixed {
  display: none !important;
}







/* === Top-Header-Zeile */
.hl-topbar {
    width: 100%;
    background: #f0dec0;
    color: #5a5651;
    font-size: 14px;
}
/* Icons in der Topbar sofort fixieren */
.hl-topbar .hl-ico {
  width: 18px;         /* gewünschte feste Größe */
  height: 18px;
  flex-shrink: 0;      /* verhindert, dass sie gestreckt werden */
  display: inline-block;
  vertical-align: middle;
}
.hl-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0px;
    padding-top: 5px;
}

/* Links linksbündig */
.hl-topbar__left{
  display:flex;
  align-items:center;
  gap:18px;
}

/* Telefon rechtsbündig */
.hl-topbar__right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* allgemeine Link-Optik */
.hl-topbar__link, .hl-topbar__phone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    font-size: 13px;
}
.hl-topbar__link:hover,
.hl-topbar__phone:hover{ color:#3d3a37; }

/* Icons */
.hl-ico{
  width:18px;
  height:18px;
  display:block;
}

/* Option: Telefon stärker hervorheben (goldener Chip wie Musterbild) */
.hl-topbar__phone {
  color: rgb(61, 58, 55);
  padding:6px 10px;
  border-radius:8px;
}
/* ===== Topbar + Header sticky stapeln ===== */
:root { --topbar-h: 38px; }       /* 32px = 27px + etwas Luft; bei Bedarf feinjustieren */

/* Topbar oben anheften */
/* 2) Topbar sticky + keine starre Höhe */
.hl-topbar{
  position: sticky;
  top: 0;
  z-index: 1101;
  height: auto !important;        /* feste Höhe aufheben */
  min-height: var(--topbar-h);    /* stabile Mindesthöhe */
  box-sizing: border-box;
}
.hl-topbar__inner{
  height: auto !important;        /* feste 22px aufheben */
  min-height: var(--topbar-h);
  padding: 4px 0;                 /* vertikaler Innenabstand hier steuern */
}
/* Header klebt direkt UNTER der Topbar */
header.sticky-top,
header.fixed-navbar,
#jtl-nav-wrapper{
  position: sticky;
  top: var(--topbar-h) !important; /* gleicher Wert => kein Sprung */
  z-index: 1100;
}
/* 4) Mobil: Topbar wird höher (zweizeilig) -> Offset anpassen */
@media (max-width: 768px){
  :root { --topbar-h: 44px; }     /* falls deine Topbar mob. höher ist, ggf. 48–56px */
  .hl-topbar__inner{ min-height: var(--topbar-h); }
}
/* Responsiv: unter 768px untereinander, mittig */
@media (max-width:768px){
.hl-topbar__inner {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
	}
   .hl-topbar__left,
   .hl-topbar__right{ width:100%; justify-content:center; }
   .hl-topbar__link, .hl-topbar__phone {gap: 3px;}
}
/* === Top-Header-Zeile - ENDE */






/* WERTE Section auf Startseite */
/* WERTE Section auf Startseite */
/* ===== Vollbreite Section mit Hanfblatt-Hintergrund ===== */
/* Full-Bleed Trick */
.full-bleed{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Section */
.hl-werte{
  position: relative;
  background: #f5e7d3; /* Grundfarbe */
  overflow: hidden;
  transition: background-color .35s ease;
}

/* Hanfblatt Hintergrund */
.hl-werte::before{
  content: "";
  position: absolute;
  inset: 0;                    
  background:
    url("https://hanfleben.erita.de/media/image/storage/opc/grafiken/hanflebens-slider-blatt-gespiegelt.webp")
    no-repeat 4% 70%;         
  background-size: clamp(260px, 38vw, 520px);
  opacity: 0;                  
  transform: translateY(14px) scale(1.02);  
  transition: opacity .45s ease, transform .6s ease;
  pointer-events: none;
  z-index: 0;
}

/* Hover-Effekt */
.hl-werte:hover{ background: #faeee0; }
.hl-werte:hover::before{
  opacity: .72;
  transform: translateY(0) scale(1);
}

/* Content auf 1274px begrenzen */
.hl-werte__inner {
    max-width: 1274px;
    margin: 0 auto;
    padding: clamp(10px, 6vw, 10px) clamp(16px, 3vw, 24px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 5vw, 56px);
    position: relative;
    z-index: 1; /* Inhalt über dem Blatt */
}

/* Standard: <br> sichtbar */
.hl-break br {
  display: inline;
}

/* Linke Spalte */
.hl-werte__kicker {
    margin: 0 0 15px 0;
    font-size: 1.125rem;
    letter-spacing: .08em;
    color: #d69e41;
    text-transform: uppercase;
}
.hl-werte__title{
  margin: 0;
  color: #111;
  font-family: 'Square721 BT', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.02;
  font-size: clamp(34px, 6.4vw, 60px);
}
.hl-werte__divider{
  border: 0;
  border-top: 2px solid #d5a03a;
  width: 68px;
  margin: 18px 0 0 0;
}

/* Rechte Spalte */
.hl-werte__list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.hl-werte__list li{
  position: relative;
  padding-left: 22px;
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}
.hl-werte__list li::before {
    content: "»";
    position: absolute;
    left: 0;
    top: -2px;
    color: #666;
    font-weight: 700;
    font-size: 1.3rem;
}
.hl-werte__list strong{
  display: block;
  color: #d5a03a;
  font-size: 20px;
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 992px){
  .hl-werte__inner{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hl-werte::before{
    background-position: center top;
    background-size: min(80vw, 520px);
  }
  .hl-werte__divider{ margin-left: auto; margin-right: auto; }
  .hl-werte__list li{ padding-left: 0; }
  .hl-werte__list li::before{ display: none; }
  .hl-break br {display: none;}
  .hl-break::after {content: " ";}
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce){
  .hl-werte::before{ transition: opacity .2s linear; transform: none; }
  .hl-werte:hover::before{ transform: none; }
}
/* WERTE Section auf Startseite - ENDE */







/* Section HANFGENUSS (3 Bilder auf Startseite) */
.full-bleed{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* --- Section-Hintergrund --- */
.hl-kacheln{
  background: #f5e7d3; /* Site-Beige */
  padding: clamp(24px, 5vw, 48px) 0;
}

/* --- Grid-Layout --- */
.hl-kacheln__inner{
  width: min(1220px, 92vw);    /* Contentbreite, aber Section bleibt full-bleed */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 28px);
}

/* --- Kachel --- */
.hl-kachel{
  display: block;
  text-decoration: none;
  will-change: transform, filter;
}
.hl-kachel figure{
  margin: 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);             /* leichter Schatten */
  transition: transform .35s ease, box-shadow .35s ease;
}
.hl-kachel img{
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform .35s ease;
}

/* Hover-Effekt: größer + stärkerer Schatten */
.hl-kachel:hover figure{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,0,0,.28);
}
.hl-kachel:hover img{
  transform: scale(1.04);
}

/* --- Responsiv --- */
@media (max-width: 992px){
  .hl-kacheln__inner{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .hl-kacheln__inner{ grid-template-columns: 1fr; }
}
/* Section HANFGENUSS (3 Bilder auf Startseite) - ENDE */







/* === CBD-Welt Section === */
#hl-cbdwelt.full-bleed{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #f5e7d3;
  padding: clamp(28px, 6vw, 64px) 0;
}
#hl-cbdwelt .hl-cbdwelt__inner{
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 24px);
}

/* Kopfbereich */
#hl-cbdwelt .hl-cbdwelt__head {
    text-align: center;
    margin-bottom: clamp(18px, 4vw, 15px);
}
#hl-cbdwelt .hl-cbdwelt__title{
  margin: 0; /* kein Rand drumherum */
  color: #111;
  font-family: 'Square721 BT', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.02;
  font-size: clamp(34px, 6.4vw, 60px);
}
#hl-cbdwelt .hl-cbdwelt__lead{
  margin: 8px auto 0 auto;
  max-width: 860px;
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.6;
  color: #3a3a3a;
}
/* Grid */
#hl-cbdwelt .hl-cbdwelt__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 28px);
}
/* Karten */
#hl-cbdwelt .hl-cbdwelt__card{
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: inherit;
  padding: clamp(8px, 1.2vw, 14px);
  border-radius: 14px;
  transition: transform .35s ease;
}
#hl-cbdwelt .hl-cbdwelt__card:focus-visible{
  outline: 2px solid #d5a03a;
  outline-offset: 4px;
}
/* Bild */
#hl-cbdwelt .hl-cbdwelt__media{
  display: grid;
  place-items: center;
  min-height: clamp(220px, 28vw, 360px);
}
#hl-cbdwelt .hl-cbdwelt__media img{
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform .35s ease, filter .35s ease;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.12));
}
#hl-cbdwelt .hl-cbdwelt__card:hover .hl-cbdwelt__media img{
  transform: scale(1.05);
  filter: drop-shadow(0 20px 34px rgba(0,0,0,.32));
}
/* Texte */
#hl-cbdwelt .hl-cbdwelt__text{
  text-align: center;
  margin-top: clamp(10px, 1.6vw, 4px);
}
#hl-cbdwelt .hl-cbdwelt__subtitle{
  margin: 0 0 6px 0;
  font-family: 'Square721 BT', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 2.6vw, 26px);
  color: #111;
  transition: color .25s ease;
}
#hl-cbdwelt .hl-cbdwelt__desc{
  margin: 0 auto;
  max-width: 36ch;
  font-size: clamp(14px, 2.1vw, 16px);
  line-height: 1.55;
  color: #3a3a3a;
}
#hl-cbdwelt .hl-cbdwelt__card:hover .hl-cbdwelt__subtitle{
  color: #d5a03a;
}
hr.hl-divider.cbdwelt-divider {
    margin-top: 40px;
    margin-bottom: 0;
}
/* Responsiv */
@media (max-width: 992px){
  #hl-cbdwelt .hl-cbdwelt__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  #hl-cbdwelt .hl-cbdwelt__grid{ grid-template-columns: 1fr; }
  #hl-cbdwelt .hl-cbdwelt__lead{ max-width: 92%; }
}
/* === CBD-Welt Section === - ENDE */








/* Section: Wir lieben Hand */
/* === Grundlayout wie vorher === */
#hl-liebenhanf.full-bleed{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #f5e7d3;
  padding: clamp(28px, 6vw, 64px) 0;
}
#hl-liebenhanf .hl-liebenhanf__inner{
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 24px);
}
#hl-liebenhanf .hl-liebenhanf__card{
  position: relative;
  background: #f2e4ce;
  border-radius: 6px;
  padding: clamp(28px, 6vw, 72px) clamp(18px, 4vw, 72px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  overflow: hidden;
  transition: box-shadow .35s ease, transform .35s ease, background-color .35s ease;
}
#hl-liebenhanf .hl-liebenhanf__card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 46px rgba(0,0,0,.18);
  background-color: #f6ead7;
}

/* Blatt – sicher ÜBER dem Card-Hintergrund, aber UNTER dem Text */
#hl-liebenhanf .hl-liebenhanf__leaf{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -28px);    /* Start leicht oberhalb */
  width: clamp(200px, 38vw, 520px);
  height: auto;
  opacity: 0;                            /* Start unsichtbar */
  pointer-events: none;
  z-index: 0;                            /* unter Text */
  transition: opacity .9s cubic-bezier(.2,.7,.2,1),
              transform .9s cubic-bezier(.2,.7,.2,1);
}
/* Sichtbar-Status (wird per JS gesetzt) */
#hl-liebenhanf .hl-liebenhanf__leaf.is-visible{
  opacity: .42;                          /* kräftiger sichtbar */
  transform: translate(-50%, 0);         /* sanft einschweben */
}
/* Text-Ebene über das Blatt heben */
#hl-liebenhanf .hl-liebenhanf__kicker,
#hl-liebenhanf .hl-liebenhanf__title,
#hl-liebenhanf .hl-liebenhanf__text{
  position: relative;
  z-index: 1;
}
/* Typo */
#hl-liebenhanf .hl-liebenhanf__kicker{
  margin: 0 0 10px 0;
  text-align: center;
  color: #d5a03a;
  letter-spacing: .08em;
  font-size: 14px;
  text-transform: uppercase;
}
#hl-liebenhanf .hl-liebenhanf__title{
  margin: 0;
  text-align: center;
  color: #111;
  font-family: 'Square721 BT', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.02;
  font-size: clamp(34px, 6.4vw, 72px);
}
#hl-liebenhanf .hl-liebenhanf__text{
  max-width: 90ch;
  margin: clamp(14px, 3vw, 26px) auto 0 auto;
  text-align: center;
  color: #1f1f1f;
  font-size: clamp(16px, 2.1vw, 20px);
  line-height: 1.8;
}
/* Section: Wir lieben Hand - ENDE */
/* DEBUG – nur kurz aktiv lassen! */
/* DEBUG – nach Test wieder löschen */
#hl-liebenhanf .hl-liebenhanf__leaf{
  opacity: .5 !important;
  transform: translate(-50%, 0) !important;
}





/* HANFLEBEN – Slider */

:root{
  --slider-height: 800px;
  --bags-h: 680px;   /* Drei Tüten – bei Bedarf anpassen */
  --pack-h: 520px;   /* Rechte Packung */

  --dot-size: 10px;
  --dot-gap: 10px;
  --nav-size: 48px;
}

.img-fluid{max-width:100%;height:auto;display:block}

.hl-slider{
  position:relative;
  width:100%;
  height:var(--slider-height);
  overflow:hidden;
  background:#0f1216; /* Fallback-Farbe */
  isolation:isolate;
}

.hl-slide{
  position:absolute;
  inset:0;
  /* NICHT der Shorthand 'background', damit wir die background-image aus dem HTML nicht killen */
  background-color:#0e1115;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  opacity:0;
  transform:scale(1.02);
  transition:opacity .8s ease, transform 1.2s ease;
  will-change:opacity, transform;
}
.hl-slide.is-active{ opacity:1; transform:scale(1); z-index:1; }

.hl-slide__inner{
  position:relative;
  width:min(1500px, 94vw);
  margin:0 auto;
  height:100%;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  align-items:center;
  gap:2.2rem;
  padding: clamp(16px, 3vw, 32px);
}

/* Headline */
.hl-deal-headline{
  position:absolute;
  top: clamp(18px, 3vh, 42px);
  left: clamp(16px, 3vw, 40px);
  margin:0;
  font-size: clamp(28px, 5vw, 72px);
  line-height:1.05;
  letter-spacing:.02em;
  color:#e0b15c;
  text-shadow: 0 8px 24px rgba(0,0,0,.35);
  transform: translateY(-40px);
  opacity:0;
}
.hl-deal-headline.anim-in{ animation: slideDownIn .9s cubic-bezier(.2,.7,.2,1) forwards; }

/* Textbox links */
.hl-left-copy{
  color:#fff;
  font-size: clamp(16px, 2.2vw, 26px);
  line-height:1.35;
  background: linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,.15));
  padding: clamp(14px, 2vw, 22px) clamp(16px, 2.4vw, 28px);
  border-radius:16px;
  backdrop-filter: blur(2px);
  max-width: 58ch;
  transform: translateX(-40px);
  opacity:0;
  box-shadow: 0 15px 40px rgba(0,0,0,.25);
}
.hl-left-copy.anim-in{ animation: slideLeftIn 1s cubic-bezier(.2,.7,.2,1) .15s forwards; }
.hl-left-copy strong{ color:#e9d9a8; }

/* Stage rechts */
.hl-stage{ position:relative; min-height: 420px; }

/* Basiseigenschaften für Motive */
.hl-stage__img{
  position:absolute;
  bottom: clamp(18px, 3vh, 46px);
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.45));
  transform: translateY(34px) translateZ(0) scale(.96);
  opacity:0;
  pointer-events:none;
}

/* Drei Tüten – groß */
.hl-stage__three-bags{
  right: 22%;
  height: var(--bags-h);
  width: auto;
  z-index: 2;
}
.hl-stage__three-bags.anim-in{
  animation: floatUp .9s cubic-bezier(.2,.7,.2,1) forwards;
}

/* Rechte Packung – KEINE Rotation/kein Bobbing */
.hl-stage__dark-pack{
  right: 5%;
  height: var(--pack-h);
  width: auto;
  bottom: 40px;
  transform: translateY(30px) translateX(20px) scale(.95);
  opacity: 0;
  z-index: 2;
}
.hl-stage__dark-pack.anim-in{
  animation: floatUp .9s cubic-bezier(.2,.7,.2,1) .1s forwards;
}

/* Dots / Navigation */
.hl-dots{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:16px; display:flex; gap:var(--dot-gap); z-index:5;
}
.hl-dot{ width:var(--dot-size); height:var(--dot-size); border-radius:50%;
  background: rgba(255,255,255,.45); border:0; cursor:pointer;
  transition: transform .2s ease, background .2s ease; }
.hl-dot.is-active{ transform: scale(1.4); background:#fff; }

.hl-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:var(--nav-size); height:var(--nav-size); border-radius:50%;
  background: rgba(0,0,0,.35); color:#fff; border:0; cursor:pointer;
  display:grid; place-items:center; font-size:28px; line-height:1;
  transition: background .2s ease, transform .2s ease; z-index:5;
}
.hl-prev{ left:12px; } .hl-next{ right:12px; }
.hl-nav:hover{ background: rgba(0,0,0,.55); transform: translateY(-50%) scale(1.05); }

/* Keyframes */
@keyframes slideDownIn{ from{transform:translateY(-40px);opacity:0;} to{transform:translateY(0);opacity:1;} }
@keyframes slideLeftIn{ from{transform:translateX(-40px);opacity:0;} to{transform:translateX(0);opacity:1;} }
@keyframes floatUp{ 0%{transform:translateY(34px) scale(.96);opacity:0;} 100%{transform:translateY(0) scale(1);opacity:1;} }

/* Responsive Downscaling */
@media (max-width: 1200px){
  :root{ --bags-h: 560px; --pack-h: 440px; }
  .hl-slide__inner{ width:min(1400px, 94vw); }
}
@media (max-width: 980px){
  :root{ --bags-h: 480px; --pack-h: 380px; }
  .hl-slide__inner{ grid-template-columns:1fr; align-items:flex-start; padding-top:clamp(18px,4vh,40px); }
}
@media (max-width: 720px){
  :root{ --nav-size:42px; --bags-h: 360px; --pack-h: 300px; }
  .hl-slider{ height: clamp(420px, 70vh, 740px); }
  .hl-deal-headline{ font-size: clamp(22px, 7vw, 40px); left:14px; right:14px; }
  .hl-left-copy{ padding:14px 16px; background:linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,.25)); }
  .hl-stage{ min-height:260px; }
}

/* HANFLEBEN – Slider - ENDE */






/* Newsletter */
#newsletter-section {
    background-color: #a6d65d;
    padding: 30px 15px 60px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    color: #fff;
}

.newsletter-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.newsletter-community,
.newsletter-signup {
    flex: 1 1 400px;
    min-width: 280px;
}

.newsletter-community h3,
.newsletter-signup h3 {
    font-size: 1.5rem;
    margin-bottom: 6px;
    font-weight: 400;
    font-family: 'Diavlo Bold Regular';
    color: #fff;
}

.newsletter-community p,
.newsletter-signup p {
    font-size: 1rem;
    margin-bottom: 15px;
    color: #fff;
}

.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

.social-icons img {
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
    width: 36px;
    height: 36px;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-icons a:hover img {
    transform: scale(1.15);
}

.fake-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    color: #333;
    border-radius: 25px;
    padding: 12px 20px;
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

.fake-input span {
    font-size: 1rem;
    color: #333;
}

.fake-input i {
    color: #525252;
    font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .newsletter-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }
#newsletter-section {
    padding: 20px 15px;
}
    .newsletter-community,
    .newsletter-signup {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .social-icons {
        justify-content: center;
        margin-top: 30px;		
    }

    .fake-input {
        justify-content: center;
        gap: 10px;
        padding: 12px 16px;
        max-width: 360px;
        margin: 0 auto;
		margin-bottom: 20px;
    }

    .fake-input span {
        font-size: 1rem;
    }

    .fake-input i {
        font-size: 1.2rem;
    }
}
/* Newsletter Ende */











/* Eigene Copyright-Zeile im Footer */
.custom-footer-section {
    background-color: #282F37;
    color: #ffffff6b;
    padding: 5px 2px;
    font-size: 14px;
}
.custom-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1250px;
    margin: 0 auto;
}
.custom-footer-column {
    flex: 1;
    padding: 10px;
}

	.custom-footer-column.left {
		text-align: left;
	}

	.custom-footer-column.center {
		text-align: center;
	}

	.custom-footer-column.right {
		text-align: right;
	}

	.custom-footer-column img {
		max-height: 24px;
		margin: 0 6px;
		vertical-align: middle;
	}

@media (max-width: 768px) {
    .custom-footer-column {
        flex: 1 1 100%;
        text-align: center !important;
    }
}
/* Eigene Copyright-Zeile im Footer - ENDE */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  


#header-top-bar, header {
    background-color: #fff;
    color: #7a7a7a;
}
#main-wrapper {
    background: #fff;
}

header {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
[data-page="18"] #footer {
    padding: 2.5rem 0 0;
    background-color: #E3E3E3;
    margin-top: -4rem;
}
[data-page="1"] {
    color: #7A7A7A;
}
[data-page="1"] h1 {font-family: 'Square721 BT';font-size: 26px;color: #3A3A3A;}
[data-page="1"] h2 {font-size: 20px;font-family: 'Square721 BT';font-weight: 400;color: #3a3a3a;}
[data-page="1"] .price.h1 {
    font-size: 37px;
    color: #010005;
    font-weight: 600;
    font-family: 'Roboto';
}
[data-page="1"] .product-sku {display: none;}

#box130 .nav-item:last-child {
    display: block;
    margin-bottom: 70px;
    text-align: left; /* linksbündig */
}

#footer .productlist-filter-headline {
    border-bottom: 0 solid #ebebeb;
    font-size: 17px;
    font-weight: 600;
    font-family: 'Diavlo Black Regular';
    padding-bottom: 0;
    color: #54595f !important;
}

/* Footer: Handleben Box mit Logo */
.miropell-wrap {
    display: grid;
    place-items: start;
    margin-top: 0;
}

.miropell-card{
  max-width: 520px;
}
img.miropell-logo-footer {
    width: 70%;
    margin-bottom: 30px;
}
.miropell-logo{
  width: clamp(120px, 40%, 200px);
  height: auto;
  display: block;
  margin-bottom: clamp(8px, 1.5vw, 12px);
}
.miropell-title{
  font-size: clamp(18px, 2.8vw, 22px);
  line-height: 1.3;
  color: var(--heading);
  margin: 0 0 10px 0;
  letter-spacing: 0.02em;
}
.miropell-lead {
    color: #7A7A7A;
}
.miropell-text {
    color: #7A7A7A;
}
@media (max-width: 768px) {
    img.miropell-logo-footer {
        width: 50%;
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
    }
	.miropell-text, .miropell-lead {text-align: center;}
	p.miropell-text {margin-bottom: 30px;}	
  .miropell-card{
    /* optional etwas mehr Luft am Desktop */
    padding-right: 8px;
  }
}
.img-fluid{ max-width:100%; height:auto; display:block; }
/* Footer: Handleben Box mit Logo - ENDE */







/* Startseite: Unsere Produkte Slider */
.DIV-UnsereProdukte {
    text-align: center;
}
.DIV-UnsereProdukte p {
    font-size: 15px;
    color: #A4D65E;
    font-weight: 600;
    letter-spacing: 0.05rem;
}
.DIV-UnsereProdukte h3 {
    font-size: 65px;
    font-family: 'Square721 BT';
    color: #212121;
    line-height: 4rem;
}
hr.hl-divider.produkte {
    width: 20%;
    margin-top: 20px;
    margin-bottom: 10px;
}
.GRID-Produkte {
    margin-top: 60px;
}
.GRID-Produkte a {
    text-decoration: none;
    color: #A4D65E;
    font-weight: 600;
}
.product-wrapper.product-wrapper-product {
    background-color: #fff;
}
@media (max-width: 768px){
	 .DIV-UnsereProdukte h3 {
		font-size: 55px;
		line-height: 3rem;
		margin-bottom: 30px;
	}
}

/* Startseite: Unsere Produkte Slider - ENDE */












/* Startseite: Section Nachhaltig */
/* ===== Wrapper Hintergrund ===== */
#DIV_HanflebenNachhaltigkeit {
    background: #f5e7d3;
    margin-top: 30px;
}
/* ===== Section Grid ===== */
.hl-nachhaltigkeit {
  --maxw: 1400px;
  --gap: 40px;
  --shadow-base: 0 8px 20px rgba(0,0,0,0.10);
  --shadow-strong: 0 18px 20px rgba(0, 0, 0, 0.44);
  --accent: #d8b166;
  --title: #111;
  --text: #1f1f1f;
  --eyebrow: #b58b35;

  margin-inline: auto;
  max-width: var(--maxw);
  padding: clamp(32px, 4vw, 64px) 24px;
  display: grid;
  align-items: center;
  grid-template-columns: 1.1fr 1fr 0.7fr; /* links – mitte – rechts */
  gap: var(--gap);
}

/* ===== Linke Spalte ===== */
.hl-nachhaltigkeit__left {
  position: relative;
  isolation: isolate;
}

.hl-nachhaltigkeit__eyebrow {
  margin: 0 0 8px 0;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eyebrow);
  font-weight: 600;
}
.hl-nachhaltigkeit__title {
    margin: 0;
    line-height: 1.1;
    font-weight: 800;
    color: var(--title);
    font-size: clamp(2rem, 5vw, 4.2rem);
    letter-spacing: -0.02em;
    position: relative;
    z-index: 2;
    font-family: 'Square721 BT';
}

/* dekoratives Hanfblatt */
.hl-nachhaltigkeit__leaf {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(-6%, 8%);
  width: clamp(220px, 36vw, 520px);
  height: auto;
  opacity: 0.25;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  filter: saturate(0.9) contrast(0.95);
}


/* ===== Copy (mittlere Spalte) ===== */
.hl-nachhaltigkeit__copy {
  color: var(--text);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.7;
}
.hl-nachhaltigkeit__copy p {
    margin: 0 0 14px 0;
    text-align: center;
}
.hl-nachhaltigkeit__copy .hl-nachhaltigkeit__accent {
    color: #b58b35;
    font-weight: 700;
    margin: 10px 0 12px;
    font-size: 23px;
}
/* ===== Fläschchen (rechte Spalte) ===== */
.hl-nachhaltigkeit__bottle {
  display: grid;
  place-items: center;
}

.hl-nachhaltigkeit__bottle-img {
  display: block;
  width: min(280px, 100%);
  height: auto;
  filter: drop-shadow(var(--shadow-base));     /* leichter Grundschatten */
  transform: translateY(0) scale(1);
  transition: transform 260ms ease, filter 260ms ease;
  will-change: transform, filter;
}

/* Hover: größer + stärkerer Schatten */
.hl-nachhaltigkeit__bottle:hover .hl-nachhaltigkeit__bottle-img,
.hl-nachhaltigkeit__bottle-img:hover {
  transform: translateY(-4px) scale(1.06);
  filter: drop-shadow(var(--shadow-strong));
}

/* ===== Responsiv ===== */
@media (max-width: 1200px) {
  .hl-nachhaltigkeit {
    grid-template-columns: 1fr 1fr 0.8fr;
    --gap: 28px;
  }
  .hl-nachhaltigkeit__leaf {
    transform: translate(-4%, 6%);
    width: clamp(220px, 42vw, 480px);
  }
}

@media (max-width: 960px) {
  .hl-nachhaltigkeit {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }

  .hl-nachhaltigkeit__title {
    line-height: 1;
  }
  .hl-nachhaltigkeit__leaf {
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 10%);
    width: min(90vw, 520px);
  }
  .hl-nachhaltigkeit__copy {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
  }
  .hl-nachhaltigkeit__bottle-img {
    width: min(220px, 60%);
    margin-inline: auto;
  }
  .hl-nachhaltigkeit__leaf {
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translate(-50%, 10%);
    width: min(90vw, 520px);
  }  
}
@media (min-width: 768px){
  .hl-nachhaltigkeit__left {
	min-height: 130px;
  }  
  .hl-nachhaltigkeit__left {
    min-height: 260px;
  }  
}
/* ===== Motion-Preference ===== */
@media (prefers-reduced-motion: reduce) {
  .hl-nachhaltigkeit__bottle-img {
    transition: none !important;
  }
}

/* Utility: jedes Bild fluid */
img.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Blatt wie im Original sichtbar & exakt hinter der H5 platzieren */
.hl-nachhaltigkeit__left {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.hl-nachhaltigkeit__title,
.hl-nachhaltigkeit__eyebrow {
  position: relative;
  z-index: 2; /* Text oben */
}

.hl-nachhaltigkeit__leaf {
    position: absolute !important;
    top: -140px !important;
    left: -220px !important;
    width: 490px !important;
    opacity: 1 !important;
    z-index: 9999 !important;
}

/* Startseite: Section Nachhaltig - ENDE */










/* Footer: Agronaro Box mit Logo */
.agronaro-wrap {
  display: grid;
  place-items: start;
  margin-top: -20px;
}

.agronaro-card {
  max-width: 520px;
}

img.agronaro-logo-footer {
  width: 70%;
  margin-bottom: 30px;
}

.agronaro-lead, .agronaro-text, .agronaro-cta {
  color: #7A7A7A;
}

.agronaro-cta {
  margin-top: 20px;
  font-weight: 500;
}

@media (min-width: 768px) {
  .agronaro-card {
    padding-right: 8px; /* optional */
  }
}

@media (max-width: 768px) {
  img.agronaro-logo-footer {
    width: 50%;
    margin: 10px auto 30px auto;
  }

  .agronaro-lead, .agronaro-text, .agronaro-cta {
    text-align: center;
  }

  p.agronaro-text {
    margin-bottom: 30px;
  }
}
.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Footer: Agronaro Box mit Logo - ENDE */


/* Footer: Spalten auf 5 erhöhen */
/* Nur Footer-Spalten auf 5 Stück umbrechen */
@media (min-width: 1200px) {
  #footer-boxes > .col {
    flex: 0 0 20%;   /* jede Spalte bekommt 20% */
    max-width: 20%;
  }
}
.nav-tabs .nav-link.active {
    color: #7A7A7A;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16px;
}

/* Artikeldetails: LKW und "Sofort lieferbar */
.delivery-status .status-2, .signal_image .status-2 {
    color: #666;
}

/* Social Media STARTSEITE */
.hl-social-icons {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin: 40px 0 20px;
}

.hl-social-icons a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #d8b166; /* Gold/Ocker */
  color: #fff;               /* weiße Icons */
  font-size: 20px;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(0,0,0,0); /* no base shadow */
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.hl-social-icons a:hover,
.hl-social-icons a:focus-visible {
  background-color: #b58b35;         /* leicht dunkler */
  transform: scale(1.08);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22), 0 4px 10px rgba(0,0,0,0.14); /* Hover-Schatten */
}

@media (prefers-reduced-motion: reduce) {
  .hl-social-icons a {
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
    transform: none !important;
  }
}

/* Social Media STARTSEITE - ENDE */




/* Startseite: Hanfleben-Blog */
/* FULL-BLEED Wrapper (ohne Rand links/rechts) */
#DIV_HanflebenBlog{
  background:#f3e0c6;
  position:relative;
  width:100vw;
  /* bricht aus zentralen Containern aus, ohne horizontales Scrollen */
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* Section-Rahmen */
.hl-blog{
  --maxw: 1250px;          /* Contentbreite gewünscht */
  --gap: 56px;
  max-width:var(--maxw);
  margin:0 auto;
  padding:64px 24px 72px;  /* Innenabstand */
}

/* Headline oben */
.hl-blog__headline{
  text-align:center;
  font:800 clamp(2rem, 4vw, 2.8rem) 'Square721 BT', system-ui, sans-serif;
  color:#111;
  margin:0 0 40px;
}

/* Zweispaltige Reihen, alternierend */
.hl-blog__row{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:var(--gap);
  align-items:center;
  margin:48px 0;
}
.hl-blog__row:nth-of-type(even){ grid-auto-flow:dense; }
.hl-blog__row:nth-of-type(even) .hl-blog__media{ order:2; }
.hl-blog__row:nth-of-type(even) .hl-blog__content{ order:1; }

/* Bilder */
.hl-blog__media img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  transition:transform .25s ease, box-shadow .25s ease;
}
.hl-blog__media img:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 18px 42px rgba(0,0,0,.22);
}

/* Content */
.hl-blog__content{ color:#1f1f1f; }

/* Überschriften als h6 – exakt 1.56rem */
.hl-blog__title,
.hl-blog__subtitle{
  font-family:'Square721 BT', system-ui, sans-serif;
  font-weight:700;
  font-size:1.56rem;
  line-height:1.3;
  margin:0 0 10px;
}
.hl-blog__title--gold,
.hl-blog__subtitle{ color:#d8b166; }

.hl-blog__text{
  margin:0 0 18px;
  line-height:1.65;
  font-size:1rem;
}

/* Button */
.hl-blog__button{
  display:inline-block;
  background:#D5A03A;
  color:#fff;
  padding:10px 22px;
  border-radius:0.125rem;
  font-weight:500;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.16);
  transition:background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.hl-blog__button:hover,
.hl-blog__button:focus-visible{
  background:#111;
  box-shadow:0 12px 26px rgba(0,0,0,.22);
  transform:translateY(-1px);
}
.hl-blog__content a{ color:#fff; }

/* Responsiv */
@media (max-width: 1120px){
  .hl-blog{ --gap:36px; }
}
@media (max-width: 980px){
  .hl-blog{ --gap:28px; }
  .hl-blog__row{
    grid-template-columns:1fr;
    text-align:center;
    margin:40px 0;
  }
  .hl-blog__content{
    max-width:720px;
    margin:0 auto;
  }
}
@media (max-width: 768px){
.hl-blog__title, .hl-blog__subtitle {line-height: 1.1;}
}
.hl-blog__content h6 {margin-bottom: 0;}
/* Utility */
img.img-fluid{ max-width:100%; height:auto; display:block; }
/* Startseite: Hanfleben-Blog - ENDE */



















/* Beispiel: auf Mobil kleinerer Abstand */
@media (max-width: 767px) {
    .hl-spacer {
        height: 20px;
    }
}
/* Hoverfarbe Navigation */
header .navbar-nav>.nav-item>.nav-link::before {
    border-color: #A4D65E !important;
}

header .navbar-nav>.nav-item>.nav-link {
    position: relative;
    padding: 0 1.5rem 0.5rem !important;
}


/* Universeller 50px-Spacer */
.hl-spacer,
.h1-spacer {
  display: block;
  width: 100%;
  height: 50px;
  min-height: 50px;     
  flex: 0 0 50px;       
  clear: both;          
}



/* Burger-Menü MOBIL */
.toggler-logo-wrapper .burger-menu-wrapper {
    float: left;
    padding-top: 1.2rem;
}
@media (max-width: 768px) {
	header .navbar-brand {padding: 0;}
	header .navbar-brand img {height: 3rem;width: auto;margin-top: -2px;}
}



/* Neuer Hover-Effekt bei der Navigation */
/* Menülinks Standard */
header .navbar-nav > .nav-item > .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    color: #111;
    padding: 10px 18px;
}
/* Unterstreichung-Effekt (schmaler, nur unter Text) */
header .navbar-nav > .nav-item > .nav-link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 60%; /* nicht volle Breite */
    height: 3px; /* dünner */
    background-color: #d4a017;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.35s ease;
    border-radius: 2px;
    transform: translateX(-50%) scaleY(0); /* zentrieren + unsichtbar */
}

header .navbar-nav > .nav-item > .nav-link:hover::before {
    transform: translateX(-50%) scaleY(1);
}
header .navbar-nav > .nav-item.dropdown > .nav-link::after {
    content: "▾";                  /* sauberes Unicode-Chevron */
    font-size: 0.7rem;             /* dezente Größe */
    margin-left: 6px;
    color: #111;                   /* schwarz */
    transition: transform 0.3s ease;
    display: inline-block;
    line-height: 1;
}

header .navbar-nav > .nav-item.dropdown:hover > .nav-link::after,
header .navbar-nav > .nav-item.dropdown.show > .nav-link::after {
    transform: rotate(180deg); /* Pfeil nach oben */
}


/*************/
/* SCHRIFTEN */
/*************/

/* Font: LUCIDA */
    @font-face {
    font-family: 'Lucida Sans Regular';
    font-style: normal;
    font-weight: normal;
    src: local('/templates/NOVAChild/fonts/lucida/Lucida Sans Regular'), url('LSANS.woff') format('woff');
    }
    @font-face {
    font-family: 'Lucida Sans Italic';
    font-style: normal;
    font-weight: normal;
    src: local('/templates/NOVAChild/fonts/lucida/Lucida Sans Italic'), url('LSANSI.woff') format('woff');
    }
    @font-face {
    font-family: 'Lucida Sans Demibold Roman';
    font-style: normal;
    font-weight: normal;
    src: local('/templates/NOVAChild/fonts/lucida/Lucida Sans Demibold Roman'), url('LSANSD.woff') format('woff');
    }
    @font-face {
    font-family: 'Lucida Sans Demibold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('/templates/NOVAChild/fonts/lucida/Lucida Sans Demibold Italic'), url('LSANSDI.woff') format('woff');
    }
    @font-face {
    font-family: 'Lucida Sans Typewriter Regular';
    font-style: normal;
    font-weight: normal;
    src: local('/templates/NOVAChild/fonts/lucida/Lucida Sans Typewriter Regular'), url('LTYPE.woff') format('woff');
    }
    @font-face {
    font-family: 'Lucida Sans Unicode Regular';
    font-style: normal;
    font-weight: normal;
    src: local('/templates/NOVAChild/fonts/lucida/Lucida Sans Unicode Regular'), url('l_10646.woff') format('woff');
    }
    @font-face {
    font-family: 'Lucida Sans Typewriter Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('/templates/NOVAChild/fonts/lucida/Lucida Sans Typewriter Oblique'), url('LTYPEO.woff') format('woff');
    }
    @font-face {
    font-family: 'Lucida Sans Typewriter Bold';
    font-style: normal;
    font-weight: normal;
    src: local('/templates/NOVAChild/fonts/lucida/Lucida Sans Typewriter Bold'), url('LTYPEB.woff') format('woff');
    }
    @font-face {
    font-family: 'Lucida Sans Typewriter Bold Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('/templates/NOVAChild/fonts/lucida/Lucida Sans Typewriter Bold Oblique'), url('LTYPEBO.woff') format('woff');
    }
	
/* Font: DIAVLO */
    @font-face {
    font-family: 'Diavlo Black Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Diavlo Black Regular'), url('/templates/NOVAChild/fonts/diavlo/Diavlo_BLACK_II_37.woff') format('woff');
    }
    @font-face {
    font-family: 'Diavlo Book Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Diavlo Book Regular'), url('/templates/NOVAChild/fonts/diavlo/Diavlo_BOOK_II_37.woff') format('woff');
    }
    @font-face {
    font-family: 'Diavlo Light Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Diavlo Light Regular'), url('/templates/NOVAChild/fonts/diavlo/Diavlo_LIGHT_II_37.woff') format('woff');
    }
    @font-face {
    font-family: 'Diavlo Medium Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Diavlo Medium Regular'), url('/templates/NOVAChild/fonts/diavlo/Diavlo_MEDIUM_II_37.woff') format('woff');
    }
    @font-face {
    font-family: 'Diavlo Bold Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Diavlo Bold Regular'), url('/templates/NOVAChild/fonts/diavlo/Diavlo_BOLD_II_37.woff') format('woff');
    }
	
	
body {
    background-color: #7a7a7a;
    font-family: 'Lucida Sans Regular';
}

	h1, h2, .h1, .h2 {
	font-family: 'Square721 BT';font-weight: 400;
	font-size: 18px;
	}
















/* ********************************
   MEDIA QUERIES
   ******************************** */

/* 320px bis 479px */
@media (min-width: 320px) and (max-width: 479px) {
	#jtl-nav-wrapper, header.sticky-top, header.fixed-navbar {top: 0px !important;}
	div#hl-search-panel {top: 46px;}
	.UB_UnvPreisempfehlung {font-size: 0.9rem;margin-left: 0;display: block;}
}

/* 480px bis 767px */
@media (min-width: 480px) and (max-width: 767px) {
	#jtl-nav-wrapper, header.sticky-top, header.fixed-navbar {top: 0px !important;}
	div#hl-search-panel {top: 46px;}
	.UB_UnvPreisempfehlung {font-size: 0.8rem;margin-left: 0;display: block;}
}

/* 768px bis 991px */
@media (min-width: 768px) and (max-width: 991px) {
   
}

/* 992px bis 1299px */
@media (min-width: 992px) and (max-width: 1299px) {
   
}

/* 1300px bis 1599px */
@media (min-width: 1300px) and (max-width: 1599px) {
   
}

/*  ab 1600px */
@media (min-width: 1600px) {
   
}