/* HANFLEBEN.EU */
/****************/



/* ========================================
   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 */
  }
}


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

/* Topbar über Header */
#header-top-bar {
    position: sticky;
    top: 0;
    z-index: 2000 !important;
    background: #f5e7d3;
    border-bottom: 1px #cc9a4370 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);
}
li#kundenservice-wrapper {
    list-style: none;
}


/* 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;
}
#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;
}
#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;
}
#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: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.DIV-Willkommen .willkommengrafik {
    width: 100%;
    max-width: 992px;
    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; 
    width: 100%; 
    margin-left: auto;
    margin-right: auto;
    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; 
    }	
}

/* 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 #d5a03a;
    margin-top: 50px;
}
h2.h2-deal-des-monats {
    text-align: center;
    color: rgb(213, 160, 58);
	font-size: 59px;
}
.hl-divider {
    border: none;                
    border-top: 1px solid #825e24; 
    width: 70%;                  
    margin: 20px auto;           
}
.btn-primary {
    color: #ffffff;
    background-color: #D5A03A !important;
    border-color: #D5A03A !important;
    font-weight: 400;
}
@media (max-width: 767px) {
	.DIV-Willkommen h2 {
		line-height: 3.3rem;
		font-size: 56px;
	}
	.DIV-Willkommen .opc-Countdown .cntdwn-item {
		font-size: 38px;
	}	
}















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

:root{
  --slider-h: 800px;
  --content-max: 1500px;
  /* schmalere Textspalte, größere Stage */
  --left-w: 35%; 
  --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);
    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;
    --b2-w: 220px; 
    --b3-w: 240px; 
  }

  .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; 
}
.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;
}
/* 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;  
  gap: 6px;              
  line-height: 1;      
}
/* 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; 
  height: 18px;
  flex-shrink: 0; 
  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; 
  min-height: var(--topbar-h); 
  box-sizing: border-box;
}
.hl-topbar__inner{
  height: auto !important; 
  min-height: var(--topbar-h);
  padding: 4px 0;    
}
/* Header klebt direkt UNTER der Topbar */
header.sticky-top,
header.fixed-navbar,
#jtl-nav-wrapper{
  position: sticky;
  top: var(--topbar-h) !important;
  z-index: 1100;
}
/* 4) Mobil: Topbar wird höher (zweizeilig) -> Offset anpassen */
@media (max-width: 768px){
  :root { --topbar-h: 44px; } 
  .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 */
/* ===== 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;
  overflow: hidden;
  transition: background-color .35s ease;
}

/* Hanfblatt Hintergrund */
.hl-werte::before{
  content: "";
  position: absolute;
  inset: 0;                    
  background:
    url("/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;
}

/* 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); 
  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); 
  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;
  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 Hanf */
/* === 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); 
  width: clamp(200px, 38vw, 520px);
  height: auto;
  opacity: 0;       
  pointer-events: none;
  z-index: 0;          
  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;                   
  transform: translate(-50%, 0);     
}
/* 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 Hanf - ENDE */

#hl-liebenhanf .hl-liebenhanf__leaf{
  opacity: .5 !important;
  transform: translate(-50%, 0) !important;
}





/* HANFLEBEN – Slider */
:root{
  --slider-height: 800px;
  --bags-h: 680px; 
  --pack-h: 520px;

  --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;
  isolation:isolate;
}

.hl-slide{
  position:absolute;
  inset:0;
  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 */



#header-top-bar, header {
    background-color: #F5E7D3;
    color: #7a7a7a;
}
#main-wrapper {
    background: #fff;
}
[data-page="18"] #main-wrapper {
    background: #F5E7D3;
}
header {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
#footer {
    padding: 2.5rem 0 0;
    background-color: #DDD4C7;
}
[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: 26px;color: #d69e41;font-weight: 400;}
[data-page="1"] .product-sku {display: none;}

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

#box130 .nav-item:last-child::after {
    content: "CZ-BIO-002";
    display: block;
    width: 80px;
    height: auto;
    margin-top: 10px;
    background: url("/media/image/storage/opc/grafiken/eu-organic-logo-colour.jpg") no-repeat left top;
    background-size: 80px auto; 
    padding-top: 55px;
    font-size: 11px;
    color: #333;
    line-height: 1.4;
}
#footer .productlist-filter-headline {
    border-bottom: 0 solid #ebebeb;
    font-size: 17px;
    font-weight: 600;
    font-family: 'Square721 BT';
    padding-bottom: 0;
    color: #54595f !important;
}


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

.hanfleben-card{
  max-width: 520px;
}
img.hanfleben-logo-footer {
    width: 70%;
    margin-bottom: 30px;
}
.hanfleben-logo{
  width: clamp(120px, 40%, 200px);
  height: auto;
  display: block;
  margin-bottom: clamp(8px, 1.5vw, 12px);
}
.hanfleben-title{
  font-size: clamp(18px, 2.8vw, 22px);
  line-height: 1.3;
  color: var(--heading);
  margin: 0 0 10px 0;
  letter-spacing: 0.02em;
}
.hanfleben-lead {
    color: #7A7A7A;
}
.hanfleben-text {
    color: #7A7A7A;
}
@media (max-width: 768px) {
    img.hanfleben-logo-footer {
        width: 50%;
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
    }
	.hanfleben-text, .hanfleben-lead {text-align: center;}
	p.hanfleben-text {margin-bottom: 30px;}	
  .hanfleben-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: #cc9a43;
    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: #cc9a43;
    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;
  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));
  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%; 
    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;
  color: #fff;              
  font-size: 20px;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  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;    
  transform: scale(1.08);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22), 0 4px 10px rgba(0,0,0,0.14);
}

@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;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* Section-Rahmen */
.hl-blog{
  --maxw: 1250px;    
  --gap: 56px;
  max-width:var(--maxw);
  margin:0 auto;
  padding:64px 24px 72px; 
}
/* 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 */



/* roboto-regular */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/templates/NOVAChild/fonts/roboto-v48-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600 */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('/templates/NOVAChild/fonts/roboto-v48-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Square721 BT */
@font-face {
    font-family: 'Square721 BT';
    src: url('/templates/NOVAChild/fonts/SQR721B.eot');
    src: url('/templates/NOVAChild/fonts/SQR721B.eot?#iefix') format('embedded-opentype'),
         url('/templates/NOVAChild/fonts/SQR721B.woff2') format('woff2'),
         url('/templates/NOVAChild/fonts/SQR721B.woff') format('woff'),
         url('/templates/NOVAChild/fonts/SQR721B.ttf')  format('truetype'),
         url('/templates/NOVAChild/fonts/SQR721B.svg#Square721 BT') format('svg');
}
h1, h2, .h1, .h2 {font-family: 'Square721 BT';font-weight: 400;font-size: 18px;}
#footer a:not(.btn):hover {color: #D69E41;}		/* Footer: Hover-Farbe */



/* 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: #cc9a43 !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); 
}

header .navbar-nav > .nav-item > .nav-link:hover::before {
    transform: translateX(-50%) scaleY(1);
}
header .navbar-nav > .nav-item.dropdown > .nav-link::after {
    content: "▾";           
    font-size: 0.7rem;    
    margin-left: 6px;
    color: #111;            
    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);
}





/* ********************************
   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;}
}

/* 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;}
}

/* 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) {
   
}