@charset "UTF-8";
/* ============================================================
   CLARUS — helles, editorial/Swiss-minimales JTL-Child (NOVA)
   Remake-Look 1:1  ·  eigenständig, unabhängig von InfernoHeat
   ------------------------------------------------------------
   Theme-Isolation: dieses Bundle (theme=clarus) importiert NUR
   NOVAs SAUBERE Basis clear.css und NICHT die von InfernoHeat
   gekaperte themes/clear/custom.css. Alle Marken-/Layout-Styles
   liegen ausschließlich hier.
   ============================================================ */
@import url("/templates/NOVA/themes/clear/clear_crit.css");
@import url("/templates/NOVA/themes/clear/clear.css");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&display=swap");

/* ============================================================
   DESIGN-TOKENS  (aus remake.themeheroes.de extrahiert)
   ============================================================ */
/* ============================================================
   DESIGN-TOKENS - EINE Quelle der Wahrheit
   Zusammengefuehrt am 17.08.2026 (Paket 3). Vorher standen diese
   Werte in fuenf konkurrierenden :root-Bloecken aus fuenf
   Entwurfsgenerationen (hell -> dunkelblau -> warm -> Warm Black).
   Die sichtbaren Werte sind unveraendert: Custom Properties werden
   beim VERWENDEN aufgeloest, es galt also ohnehin nur der jeweils
   letzte Wert. Das Theme ist bewusst dark-only.
   ============================================================ */
:root{
  /* Farben - Text */
  --c-ink: #f2f0ee; --c-ink-soft: #d6d3d0; --c-mut: #9a9694; --c-faint: #6f6b69;
  --c-onDark: #eceaf0; --c-onDark-mut: #948fa0;
  /* Farben - Flaechen */
  --c-bg: #0d0c0b; --c-bg-soft: #141312; --c-surf: #151312; --c-fill: #1c1a18;
  --c-cream: #0f0e0d; --c-cream2: #151312; --c-dark: #0a0908;
  /* Farben - Linien */
  --c-line: #26231f; --c-line2: #38332e;
  /* Akzent (Glut) */
  --heat: #ff5a1f; --heat2: #ff8a3d; --heat-ink: #ffb489; --glow: 0 0 22px rgba(255,90,31,.40);
  --glow-sm: 0 0 12px rgba(255,90,31,.34); --c-primary: #ff5a1f; --c-primary-hover: #ff7a45;
  --c-on-primary: #ffffff;
  /* Status (dunkler Grund) */
  --c-success: #7fc79c; --c-danger: #e69084; --c-warning: #e0654a;
  /* Bootstrap-Kompatibilitaet */
  --primary: #ff5a1f; --color-primary: #ff5a1f; --secondary: #ff5a1f; --bs-primary: #ff5a1f;
  --warning: #ff8a3d;
  /* Typografie */
  --f-base: "IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif; --fw-normal: 400;
  --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  /* Radien */
  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-pill: 999px;
  /* Schatten */
  --sh-sm: 0 1px 2px rgba(0,0,0,.05); --sh: 0 6px 24px -12px rgba(0,0,0,.14);
  --sh-lg: 0 22px 48px -24px rgba(0,0,0,.22);
  /* Layout / Bewegung */
  --wrap: 1300px; --sec-pad: clamp(2.6rem,1.8rem + 3vw,5rem); --ease: cubic-bezier(.16,1,.3,1);
}


/* ============================================================
   BASIS / TYPOGRAFIE
   ============================================================ */
/* Schriftbasis: 93.75% statt 15px. Ergibt bei Standardeinstellung exakt
   dieselben 15px, folgt aber der im Browser eingestellten Schriftgroesse -
   eine px-Angabe auf html ignoriert sie und macht die Seite fuer Menschen
   mit Sehschwaeche unbenutzbar. NICHT auf 100% stellen: die gesamte Datei
   ist auf 15px-Basis gerechnet, das wuerde jeden rem-Wert um 6,7% aufblasen. */
html{font-size:93.75%;background:var(--c-bg);}
/* html hier NICHT mitfuehren: font-size:1rem bezieht sich auf dem Wurzel-
   element laut Spezifikation auf den Initialwert (16px) und wuerde die
   93.75%-Basis eine Zeile weiter oben wieder aushebeln. */
body,body.is-nova{
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--f-base);
  font-size:1rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#main-wrapper{background:var(--c-bg);}
#content{background:transparent;}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5{
  font-family:var(--f-base);
  font-weight:var(--fw-semibold);
  color:var(--c-ink);
  letter-spacing:-.01em;
  line-height:1.2;
  text-transform:none;
}
h1,.h1{font-size:clamp(1.9rem,1.4rem + 1.8vw,2.7rem);}
h2,.h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);}
h3,.h3{font-size:1.25rem;}

p,li,td,th,dt,dd,label,small{color:var(--c-ink);}
.text-muted{color:var(--c-mut) !important;}

a{color:var(--c-ink);text-decoration:none;transition:color .18s var(--ease),opacity .18s var(--ease);}
a:hover{color:var(--c-primary-hover);text-decoration:none;}

hr{border-color:var(--c-line);}
:focus-visible{outline:2px solid var(--c-ink);outline-offset:2px;}

/* breiterer Container wie Referenz (xl 1300px) */
@media(min-width:1300px){
  .container{max-width:var(--wrap);}
}

/* ============================================================
   BUTTONS  (near-black,radius ~8px,weight 500,nicht-uppercase)
   ============================================================ */
.btn{
  font-family:var(--f-base);
  font-weight:var(--fw-medium);
  border-radius:var(--r);
  text-transform:none;
  letter-spacing:0;
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn-primary,a.btn-primary,button.btn-primary,.submit_button,input[type="submit"].btn{
  background:var(--c-primary);
  border-color:var(--c-primary);
  color:var(--c-on-primary);
  box-shadow:none;
}
.btn-primary:hover,.btn-primary:focus,.submit_button:hover,input[type="submit"].btn:hover{
  background:var(--c-primary-hover);
  border-color:var(--c-primary-hover);
  color:var(--c-on-primary);
}
.btn-secondary,.btn-default{
  background:var(--c-fill);
  border-color:var(--c-line2);
  color:var(--c-ink);
}
.btn-secondary:hover,.btn-default:hover{
  background:var(--c-cream);
  border-color:var(--c-line2);
  color:var(--c-ink);
}
.btn-outline-primary{
  border:1px solid var(--c-ink);
  color:var(--c-ink);
  background:transparent;
}
.btn-outline-primary:hover{
  background:var(--c-ink);
  color:var(--c-on-primary);
}
.btn-link{color:var(--c-ink);}

/* ============================================================
   FORMS  (dezent,warm-grau umrandet)
   ============================================================ */
.form-control,input,select,textarea{
  border-radius:var(--r-sm);
  border:1px solid var(--c-line2);
  color:var(--c-ink);
  background:var(--c-surf);
}
.form-control:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--c-ink);
  box-shadow:0 0 0 3px rgba(34,34,34,.08);
}
::placeholder{color:var(--c-faint) !important;}

/* Preis dezent-dunkel wie Referenz */
.price,.product-price,.preis,.price.productbox-price{
  color:var(--c-ink);
  font-weight:var(--fw-semibold);
}

/* ============================================================
   HEADER / TOPBAR / NAVIGATION  (Remake-Look)
   creme Topbar · weißer Header + feine Linie · schlichte #222-Nav
   ============================================================ */
/* --- Topbar: warmes Creme,kleine Schrift,feine Unterlinie --- */
#header-top-bar,.topbar-wrapper{
  background:var(--c-cream) !important;
  color:var(--c-ink) !important;
  border-bottom:1px solid #ebe4dd !important;
  box-shadow:none !important;
  font-size:.82rem;
}
#header-top-bar a:not(.btn),.topbar-wrapper a:not(.btn){color:var(--c-ink) !important;}
#header-top-bar a:not(.btn):hover,.topbar-wrapper a:not(.btn):hover{color:#000 !important;}

/* --- Header: weiß,feine Creme-Linie + minimaler Schatten --- */
header#jtl-nav-wrapper,header#jtl-nav-wrapper.theme-clear{
  background:#fff !important;
  border-bottom:1px solid var(--c-cream) !important;
  box-shadow:0 2px 15px 2px rgba(34,34,34,.04) !important;
}
.navbar-brand{background:transparent !important;}
#shop-logo{filter:none !important;}

/* --- Nav-Links: schlicht,weight 400,#222,kein Uppercase --- */
#mainNavigation .navbar-nav>li>.nav-link,header .navbar-nav>.nav-item>.nav-link{
  color:var(--c-ink) !important;
  font-weight:var(--fw-normal) !important;
  font-size:1rem !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
#mainNavigation .navbar-nav .nav-link span,header .navbar-nav .nav-link i{color:var(--c-ink) !important;font-weight:var(--fw-normal) !important;}
/* dezenter Hover-Unterstrich in #222 (NOVA ::before-Balken umgefärbt) */
header .navbar-nav>.nav-item>.nav-link::before{border-bottom:2px solid var(--c-ink) !important;}
.navbar .nav-item:hover>.nav-link,.navbar .nav-item.active>.nav-link,.navbar .nav-item:hover>.nav-link span,.navbar .nav-item.active>.nav-link span{color:#000 !important;}

/* --- Suche: helle Fläche #F2F2F2,radius,randlos --- */
header#jtl-nav-wrapper .form-control,header#jtl-nav-wrapper .form-control:focus,.fixed-search .form-control{
  background:var(--c-fill) !important;
  color:var(--c-ink) !important;
  border:1px solid transparent !important;
  border-radius:var(--r) !important;
  box-shadow:none !important;
}
header#jtl-nav-wrapper .form-control:focus{border-color:var(--c-line2) !important;}
header#jtl-nav-wrapper .form-control::placeholder{color:var(--c-faint) !important;}
.search-form .btn,header .btn-secondary,.fixed-search .btn{
  background:var(--c-primary) !important;color:#fff !important;
  border:none !important;border-radius:var(--r) !important;
}
.search-form .btn:hover,header .btn-secondary:hover{background:var(--c-primary-hover) !important;}

/* --- Rechte Icons (Konto/Wunschliste/Warenkorb) --- */
#shop-nav .nav-link,#shop-nav .nav-link .fas,#shop-nav .nav-link .far,.cart-icon-dropdown-icon{
  color:var(--c-ink) !important;
}
#shop-nav .nav-link:hover,#shop-nav .nav-link:hover .fas,#shop-nav .nav-link:hover .far{color:#000 !important;}
.cart-icon-dropdown-price{color:var(--c-ink) !important;font-weight:var(--fw-semibold) !important;}
.fa-sup,.cart-quantity,.badge-cart{background:var(--c-primary) !important;color:#fff !important;}

/* --- Dropdown / Mega-Menü: weiß,feiner Rahmen,sanfter Schatten --- */
.dropdown-menu,.mega-dropdown-menu{
  background:#fff !important;
  border:1px solid var(--c-line) !important;
  border-radius:var(--r) !important;
  box-shadow:var(--sh) !important;
}
.dropdown-menu .dropdown-item,.mega-dropdown-menu a{color:var(--c-ink) !important;}
.dropdown-menu .dropdown-item:hover,.mega-dropdown-menu a:hover{background:var(--c-bg-soft) !important;color:#000 !important;}
header .submenu-headline-toplevel{color:var(--c-ink) !important;font-weight:var(--fw-semibold) !important;}

/* ============================================================
   FOOTER  (Remake-Look: dunkel #222,weiße Spalten,Copyright-Leiste)
   ============================================================ */
#footer{
  background:var(--c-dark) !important;
  color:var(--c-onDark) !important;
  border-top:none !important;
  margin-top:3.5rem;
  padding-top:45px;
}
#footer,#footer p,#footer li,#footer span,#footer td,#footer .nav-link{color:var(--c-onDark) !important;}
#footer a,#footer .nav-link{color:var(--c-onDark) !important;opacity:.85;transition:opacity .18s var(--ease);}
#footer a:hover,#footer .nav-link:hover{color:var(--c-onDark) !important;opacity:1;text-decoration:underline;}
#footer h1,#footer h2,#footer h3,#footer h4,#footer h5,#footer .productlist-filter-headline,#footer .footer-headline{
  color:var(--c-onDark) !important;
  font-weight:var(--fw-semibold) !important;
  font-size:1rem !important;
  text-transform:none !important;
  border:none !important;
  margin-bottom:1rem !important;
}
#footer .box{background:transparent !important;border:none !important;}
#footer hr{border-color:rgba(255,255,255,.12) !important;}
/* Newsletter-Feld im dunklen Footer lesbar */
#footer .form-control{background:rgba(255,255,255,.08) !important;border:1px solid rgba(255,255,255,.18) !important;color:#fff !important;}
#footer .form-control::placeholder{color:var(--c-onDark-mut) !important;}
/* Copyright-Leiste: etwas dunkler,grauer Text */
#copyright,.copyright{
  background:#252525 !important;
  color:#8c8c8c !important;
  font-size:.9rem;
  border-top:1px solid rgba(255,255,255,.06) !important;
}
#copyright a,.copyright a{color:#b7b2ab !important;}
#copyright a:hover,.copyright a:hover{color:#fff !important;}
/* Buttons im dunklen Footer hell/umrandet (Kontrast) */
#footer .btn-primary,#footer .btn-secondary,#footer .btn-default,#footer .submit_button{
  background:#fff !important;color:var(--c-ink) !important;border:1px solid #fff !important;
}
#footer .btn-primary:hover,#footer .btn-secondary:hover,#footer .btn-default:hover{
  background:transparent !important;color:#fff !important;border-color:rgba(255,255,255,.6) !important;
}
/* Scroll-to-top im Marken-Stil */
.scroll-to-top,.smoothscroll-top{background:var(--c-primary) !important;color:#fff !important;border-radius:var(--r) !important;}

/* ============================================================
   STARTSEITE  (Remake-Look: Hero,Kacheln,Produkt-Grids)
   ============================================================ */
/* --- Hero --- */
.clarus-hero{
  position:relative;background-size:cover;background-position:center;
  min-height:clamp(340px,48vh,560px);display:flex;align-items:center;
  margin-bottom:var(--sec-pad);
}
.clarus-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.12));}
.clarus-hero-inner{position:relative;color:#fff;}
.clarus-hero-inner>*{max-width:620px;}
.clarus-hero-title{color:#fff !important;font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);font-weight:var(--fw-semibold);margin:0 0 .6rem;letter-spacing:-.02em;}
.clarus-hero-sub{color:rgba(255,255,255,.92) !important;font-size:1.15rem;line-height:1.5;margin:0 0 1.5rem;}
.clarus-hero-cta.btn{background:#fff !important;color:var(--c-ink) !important;border-color:#fff !important;padding:.7rem 1.6rem;}
.clarus-hero-cta.btn:hover{background:var(--c-cream) !important;border-color:var(--c-cream) !important;color:var(--c-ink) !important;}

/* --- Sektions-Kopf --- */
.clarus-section{margin-bottom:var(--sec-pad);}
.clarus-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.4rem;}
.clarus-section-head h2{margin:0;}
.clarus-more{color:var(--c-mut) !important;font-size:.95rem;white-space:nowrap;}
.clarus-more:hover{color:#000 !important;text-decoration:underline;}






@media(max-width:991.98px){}
@media(max-width:575.98px){}

/* --- Produkt-Grid / Karten --- */
.clarus-product-grid>[class*=col-]{margin-bottom:1.6rem;}
.clarus-card{
  display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;
  transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease);
}
.clarus-card:hover{box-shadow:var(--sh);transform:translateY(-3px);border-color:var(--c-line2);}
.clarus-card-img{display:block;position:relative;aspect-ratio:1/1;background:var(--c-bg-soft);overflow:hidden;}
.clarus-card-img img,.clarus-card-image{width:100% !important;height:100% !important;object-fit:cover;display:block;transition:transform .3s var(--ease);}
.clarus-card:hover .clarus-card-img img{transform:scale(1.04);}
.clarus-card-noimg{display:flex;align-items:center;justify-content:center;height:100%;color:var(--c-faint);font-size:2rem;}
.clarus-card-body{display:flex;flex-direction:column;gap:.4rem;padding:.9rem 1rem 1.1rem;flex:1;}
.clarus-card-title{color:var(--c-ink);font-weight:var(--fw-medium);font-size:.98rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.clarus-card-price{color:var(--c-ink);font-weight:var(--fw-semibold);margin-top:auto;}
.clarus-card-price .price{color:var(--c-ink) !important;font-weight:var(--fw-semibold);}

/* ============================================================
   LISTING / KATEGORIE  (Remake-Karten + Filter/Sort/Pagination)
   ============================================================ */
/* --- Produktkarte in Liste/Galerie --- */
.productbox{
  background:#fff !important;border:1px solid var(--c-line) !important;
  border-radius:var(--r-lg) !important;overflow:hidden;
  transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease);
}
.productbox:hover,.productbox-hover:hover{box-shadow:var(--sh) !important;transform:translateY(-3px);border-color:var(--c-line2) !important;}
.productbox-image,.productbox .square-image{background:var(--c-bg-soft);}
.productbox-title{padding:.85rem 1rem .15rem;}
.productbox-title a{color:var(--c-ink) !important;font-weight:var(--fw-medium);font-size:.98rem;line-height:1.3;}
.productbox .price{color:var(--c-ink) !important;font-weight:var(--fw-semibold);}
.productbox [itemprop=offers]{padding:0 1rem 1rem;}
.productbox .rating-stars,.productbox .fa-star{color:#222 !important;padding-left:1rem;}
/* Quick-Actions (Wunschliste/Vergleich) dezent rund */
.productbox-quick-actions .btn,.productbox-quick-actions a{
  background:rgba(255,255,255,.92) !important;color:var(--c-ink) !important;
  border:1px solid var(--c-line) !important;border-radius:var(--r-pill) !important;
}
.productbox-quick-actions .btn:hover,.productbox-quick-actions a:hover{background:#fff !important;color:#000 !important;}
/* Ribbon/Badges */
.ribbon .ribbon-inner,.badge-primary,.productbox .badge{background:var(--c-primary) !important;color:#fff !important;}

/* --- Breadcrumb --- */
.breadcrumb{background:transparent !important;padding-left:0;padding-right:0;font-size:.9rem;}
.breadcrumb a{color:var(--c-mut) !important;}
.breadcrumb a:hover{color:#000 !important;}
.breadcrumb .active,.breadcrumb-item.active{color:var(--c-ink) !important;}

/* --- Filter-Sidebar --- */
.sidebar .box,.filterbox,.boxes-left .box{background:transparent !important;border:none !important;box-shadow:none !important;}
.filter-headline,.box .box-title,.sidebar .box-title,.productlist-filter-headline{
  color:var(--c-ink) !important;font-weight:var(--fw-semibold) !important;
  border-bottom:1px solid var(--c-line) !important;padding-bottom:.5rem;text-transform:none !important;
}
.sidebar a,.filter-option a,.filter-list a{color:var(--c-ink) !important;}
.sidebar a:hover,.filter-option a:hover{color:#000 !important;}

/* --- Sortier-/Ergebnis-Leiste --- */
.productlist-nav,.result-options,.productlist-config,.list-head{
  background:var(--c-bg-soft) !important;border:1px solid var(--c-line) !important;border-radius:var(--r) !important;
}
.custom-select,select.form-control{border-radius:var(--r-sm) !important;border-color:var(--c-line2) !important;}

/* --- Pagination --- */
.pagination .page-link{color:var(--c-ink) !important;border-color:var(--c-line) !important;border-radius:var(--r-sm) !important;margin:0 2px;}
.pagination .page-item.active .page-link{background:var(--c-primary) !important;border-color:var(--c-primary) !important;color:#fff !important;}
.pagination .page-link:hover{background:var(--c-bg-soft) !important;color:#000 !important;}

/* ============================================================
   PRODUKTDETAIL  (Galerie · Info · Preis · Tabs · Empfehlungen)
   ============================================================ */
/* --- Layout: großzügige Zwei-Spalten,viel Weißraum --- */
#product-offer.product-detail{margin-top:1.5rem;}
.product-info-inner{padding-left:0;}
@media(min-width:992px){.product-info-inner{padding-left:2rem;}}

/* --- Galerie: helle Fläche,feiner Rahmen,Thumbnails --- */
.product-gallery #gallery,.product-gallery .gallery-with-action-main{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;
}
.product-gallery .product-image{background:var(--c-bg-soft);}
.product-thumbnails .square-image{
  border:1px solid var(--c-line);border-radius:var(--r-sm);overflow:hidden;
  margin:.5rem .4rem 0 0;cursor:pointer;transition:border-color .2s var(--ease);
}
.product-thumbnails .slick-current .square-image,.product-thumbnails .square-image:hover{border-color:var(--c-ink);}
.product-actions .btn{
  background:rgba(255,255,255,.92);color:var(--c-ink);
  border:1px solid var(--c-line);border-radius:var(--r-pill);
}
.product-actions .btn:hover{background:#fff;color:#000;}

/* --- Titel + Meta --- */
.product-title{
  font-family:var(--f-head,inherit);color:var(--c-ink);
  font-weight:var(--fw-semibold);letter-spacing:-.01em;line-height:1.2;
  font-size:clamp(1.5rem,1.1rem+1.4vw,2rem);text-transform:none;margin-bottom:.75rem;
}
.rating-wrapper{margin-bottom:.9rem;font-size:.9rem;color:var(--c-mut);}
.rating-wrapper .fa-star,.rating-wrapper .rating-stars{color:#222 !important;}
.info-essential{font-size:.9rem;color:var(--c-mut);margin:.5rem 0 1rem;}
.info-essential li{padding:.12rem 0;}
.info-essential strong{color:var(--c-ink);font-weight:var(--fw-medium);}
.info-essential a{color:var(--c-ink);text-decoration:underline;text-underline-offset:2px;}
.shortdesc{color:var(--c-ink);line-height:1.6;margin:0 0 1.25rem;}

/* --- Preisbereich --- */
.product-offer .price,.product-offer [itemprop=price],.price-tag .price{color:var(--c-ink) !important;font-weight:var(--fw-semibold);}
.product-offer .price{font-size:clamp(1.6rem,1.2rem+1.5vw,2.1rem);line-height:1.1;}
.product-offer .price-tag small,.product-offer .priceStarting,.tax-info,.shipping-info{
  color:var(--c-mut) !important;font-size:.82rem;font-weight:400;
}
.product-offer{border-top:1px solid var(--c-line);padding-top:1.25rem;margin-top:.25rem;}

/* --- Lager/Verfügbarkeit --- */
.stock-information{margin:.75rem 0;font-size:.9rem;}
.delivery-status .available,.text-success,.stock-available{color:var(--c-success,#03B452) !important;}
.delivery-status .not-available,.text-danger{color:var(--c-danger,#B90000) !important;}

/* --- Mengen-Counter + In-den-Warenkorb --- */
.product-detail .form-counter .btn,.product-detail .quantity{border-color:var(--c-line2) !important;}
.product-detail .quantity{border-radius:var(--r-sm) !important;}
.add-to-cart,.basket-details-add-to-cart,.product-offer .btn-primary{
  background:var(--c-primary) !important;border-color:var(--c-primary) !important;color:#fff !important;
  border-radius:var(--r) !important;font-weight:var(--fw-medium);text-transform:none !important;
  padding:.7rem 1.4rem;
}
.add-to-cart:hover,.basket-details-add-to-cart:hover,.product-offer .btn-primary:hover{
  background:#000 !important;border-color:#000 !important;
}
.product-offer .btn-secondary,.start-configuration{
  background:#fff !important;color:var(--c-ink) !important;border:1px solid var(--c-line2) !important;
  border-radius:var(--r) !important;
}

/* --- Variationen --- */
.variations .variation-title,.variations label{color:var(--c-ink);font-weight:var(--fw-medium);}
.variations .custom-select,.variations select{border-radius:var(--r-sm) !important;border-color:var(--c-line2) !important;}

/* --- Tabs (Beschreibung / weitere) --- */
.nav-tabs{border-bottom:1px solid var(--c-line);margin-top:2.5rem;}
.nav-tabs .nav-link{
  color:var(--c-mut);border:none;background:transparent;font-weight:var(--fw-medium);
  text-transform:none;padding:.75rem 1.1rem;border-bottom:2px solid transparent;border-radius:0;
}
.nav-tabs .nav-link:hover{color:var(--c-ink);}
.nav-tabs .nav-link.active{color:var(--c-ink);background:transparent;border-bottom-color:var(--c-ink);}
.tab-content{padding:1.75rem 0;line-height:1.65;color:var(--c-ink);}
.tab-content h2,.tab-content h3{color:var(--c-ink);font-weight:var(--fw-semibold);}

/* --- Empfehlungen / Cross-Selling-Slider --- */
.recommendations{margin-top:1rem;}
.recommendations .slider-title,.recommendations h2,.partslist h2,.bundle h2{
  color:var(--c-ink);font-weight:var(--fw-semibold);text-transform:none;
  font-size:1.35rem;margin-bottom:1rem;
}

/* ============================================================
   WARENKORB  (Positionen · Mengen · Summen-Box · Checkout)
   ============================================================ */
.basket-heading{color:var(--c-ink);font-weight:var(--fw-semibold);text-transform:none;}
/* --- Positionsliste: weiße Karte,feine Trennlinien --- */
.basket-items{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;}
.cart-items-header{
  color:var(--c-mut) !important;text-transform:none;font-size:.82rem;letter-spacing:0;
  border-bottom:1px solid var(--c-line);
}
.cart-items-body{border-bottom:1px solid var(--c-line);}
.cart-items-body:last-child{border-bottom:none;}
.cart-items-image{background:var(--c-bg-soft);border:1px solid var(--c-line);border-radius:var(--r-sm);overflow:hidden;}
.cart-items-name{color:var(--c-ink) !important;font-weight:var(--fw-medium);}
.cart-items-name:hover{color:#000 !important;}
.cart-items-single-price,.cart-items-price-text,.price_overall,.text-accent{color:var(--c-ink) !important;}
.cart-items-quantity .form-counter .btn,.qty-wrapper .quantity{border-color:var(--c-line2) !important;}
.qty-wrapper .quantity{border-radius:var(--r-sm) !important;}
.cart-items-body .shortdescription,.small.text-muted-util{color:var(--c-mut) !important;}

/* --- Summen-Box: warme Soft-Fläche,klebrig --- */
.card-gray.basket-summary,.cart-summary .card-gray,.card-gray{
  background:var(--c-bg-soft) !important;border:1px solid var(--c-line) !important;
  border-radius:var(--r-lg) !important;box-shadow:none !important;
}
.cart-summary.sticky-top{top:1.5rem;}
.basket-summary-total,.total-sum,.price.total-sum{color:var(--c-ink) !important;font-weight:var(--fw-semibold);}
.total-net,.basket-summary-notice-weight{color:var(--c-mut) !important;}

/* --- Checkout-Button + Gutschein-Feld --- */
.basket .btn-primary,.cart-summary .btn-primary{
  background:var(--c-primary) !important;border-color:var(--c-primary) !important;color:#fff !important;
  border-radius:var(--r) !important;font-weight:var(--fw-medium);text-transform:none !important;padding:.75rem 1.4rem;
}
.basket .btn-primary:hover,.cart-summary .btn-primary:hover{background:#000 !important;border-color:#000 !important;}
.basket .form-control,.cart-summary .form-control{border-radius:var(--r-sm) !important;border-color:var(--c-line2) !important;}
.basket .btn-outline-secondary{border-radius:var(--r-sm) !important;color:var(--c-ink) !important;border-color:var(--c-line2) !important;}

/* --- Leerer Warenkorb --- */
.basket-empty{color:var(--c-mut);}

/* ============================================================
   SLIDE-IN WARENKORB (Off-Canvas rechts,Remake-Style)
   ============================================================ */
.clarus-cart-backdrop{
  position:fixed;inset:0;background:rgba(34,34,34,.45);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s var(--ease);
  z-index:1090;
}
.clarus-cart-drawer{
  position:fixed;top:0;right:0;height:100%;width:400px;max-width:92vw;
  background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.14);
  transform:translateX(100%);transition:transform .3s var(--ease);
  z-index:1091;display:flex;flex-direction:column;
}
body.clarus-cart-open .clarus-cart-backdrop{opacity:1 !important;visibility:visible !important;}
body.clarus-cart-open .clarus-cart-drawer{transform:translateX(0) !important;}
body.clarus-cart-open{overflow:hidden;}
.clarus-cart-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.25rem;border-bottom:1px solid var(--c-line);
}
.clarus-cart-drawer-title{font-weight:var(--fw-semibold);font-size:1.1rem;color:var(--c-ink);}
.clarus-cart-drawer-close{
  background:none;border:none;font-size:1.6rem;line-height:1;color:var(--c-mut);
  cursor:pointer;padding:0 .25rem;transition:color .15s var(--ease);
}
.clarus-cart-drawer-close:hover{color:#000;}
.clarus-cart-drawer-body{flex:1 1 auto;overflow-y:auto;padding:0;display:flex;flex-direction:column;}
.clarus-cart-drawer-body.is-updating{opacity:.5;pointer-events:none;transition:opacity .15s var(--ease);}
/* injiziertes Mini-Warenkorb-HTML im Drawer sichtbar/entfesselt machen */
.clarus-cart-drawer-body .cart-dropdown,.clarus-cart-drawer-body .dropdown-menu{
  display:flex !important;flex-direction:column;position:static !important;float:none !important;
  transform:none !important;width:100% !important;min-width:0 !important;max-width:100% !important;
  height:100%;border:none !important;box-shadow:none !important;padding:0 !important;margin:0 !important;
  background:transparent !important;font-size:.95rem;color:var(--c-ink);
}

/* ---- Mini-Warenkorb (clarus-mc): Drawer UND Header-Dropdown ---- */
.clarus-mc-items{padding:.5rem 1.25rem;overflow-y:auto;}
.clarus-mc-item{
  display:grid;grid-template-columns:56px 1fr auto;gap:.85rem;align-items:start;
  padding:.9rem 0;border-bottom:1px solid var(--c-line);
}
.clarus-mc-item:last-child{border-bottom:none;}
.clarus-mc-thumb{width:56px;height:56px;border:1px solid var(--c-line);border-radius:var(--r-sm);
  overflow:hidden;background:var(--c-bg-soft);display:flex;align-items:center;justify-content:center;}
.clarus-mc-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.clarus-mc-thumb-empty{color:var(--c-mut);font-size:1.1rem;}
.clarus-mc-info{min-width:0;display:flex;flex-direction:column;gap:.3rem;}
.clarus-mc-name{font-weight:var(--fw-medium);line-height:1.3;}
.clarus-mc-name a{color:var(--c-ink);text-decoration:none;}
.clarus-mc-name a:hover{text-decoration:underline;}
.clarus-mc-unit{font-size:.82rem;color:var(--c-mut);}
.clarus-mc-controls{display:flex;align-items:center;gap:.5rem;margin-top:.15rem;}
.clarus-mc-qty{display:inline-flex;align-items:center;border:1px solid var(--c-line);border-radius:var(--r-sm);overflow:hidden;}
.clarus-mc-qty button{
  width:28px;height:28px;border:none;background:#fff;color:var(--c-ink);font-size:1rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s var(--ease);
}
.clarus-mc-qty button:hover{background:var(--c-bg-soft);}
.clarus-mc-input{
  width:34px;height:28px;border:none;border-left:1px solid var(--c-line);border-right:1px solid var(--c-line);
  text-align:center;font-size:.88rem;color:var(--c-ink);background:#fff;padding:0;-moz-appearance:textfield;
}
.clarus-mc-input:focus{outline:none;}
.clarus-mc-remove{
  border:none;background:none;color:var(--c-mut);cursor:pointer;padding:.25rem;font-size:.9rem;
  transition:color .15s var(--ease);
}
.clarus-mc-remove:hover{color:#c0392b;}
.clarus-mc-qtytext{font-size:.85rem;color:var(--c-mut);}
.clarus-mc-line{font-weight:var(--fw-semibold);color:var(--c-ink);white-space:nowrap;font-size:.95rem;}

.clarus-mc-foot{margin-top:auto;padding:1rem 1.25rem 1.25rem;border-top:1px solid var(--c-line);background:var(--c-bg-soft);}
.clarus-mc-subtotal{display:flex;justify-content:space-between;align-items:baseline;font-size:1.05rem;}
.clarus-mc-subtotal-label{color:var(--c-mut);font-weight:var(--fw-medium);}
.clarus-mc-subtotal-val{font-weight:var(--fw-semibold);color:var(--c-ink);}
.clarus-mc-shipping-hint{font-size:.8rem;color:var(--c-mut);margin-top:.5rem;line-height:1.4;}
.clarus-mc-actions{display:flex;flex-direction:column;gap:.55rem;margin-top:1rem;}
.clarus-mc-actions .btn{border-radius:var(--r-sm);text-transform:none;font-weight:var(--fw-medium);width:100%;padding:.6rem 1rem;}
.clarus-mc-actions .btn-primary{background:var(--c-primary);border-color:var(--c-primary);color:#fff;}
.clarus-mc-actions .btn-primary:hover{background:#000;border-color:#000;}
.clarus-mc-actions .btn-outline-primary{border-color:var(--c-ink);color:var(--c-ink);background:transparent;}
.clarus-mc-actions .btn-outline-primary:hover{background:var(--c-ink);color:#fff;}
.clarus-mc-empty{padding:3rem 1.25rem;text-align:center;color:var(--c-mut);}
.clarus-mc-empty .fas{font-size:2.2rem;opacity:.4;display:block;margin-bottom:.75rem;}

/* Header-Dropdown-Variante: kompakter,scrollbar begrenzt */
/* Bis zu 8 Positionen sichtbar (Nutzerwunsch 15.08.2026),danach interner Scroll */
.cart-icon-dropdown .clarus-mc-items{max-height:min(72vh,760px);}

@media(max-width:480px){.clarus-cart-drawer{width:100%;}}

/* ============================================================
   STICKY KATEGORIE-/FILTER-SIDEBAR (Listing links)
   ============================================================ */
@media(min-width:992px){
  #sidepanel_left{
    position:sticky;
    top:215px;              /* klärt die sticky #jtl-nav-wrapper Navigation (203 px seit der Logo-Vergroesserung) */
    align-self:flex-start;  /* nicht auf Zeilenhöhe strecken -> Sticky wird sichtbar */
    /* KEIN max-height/overflow: seit dem WaWi-Merkmalabgleich stehen hier
       Leistung/Verfuegbarkeit/Preisspanne zusaetzlich zu den Kategorien.
       Der Inhalt uebersteigt calc(100vh - 195px), die Box scrollte dann in
       sich selbst statt mit der Seite. overflow-x:hidden muss ebenfalls weg:
       ist eine Achse hidden, rechnet der Browser die andere auf auto hoch. */
  }
  /* dezente Scrollleiste */
  #sidepanel_left::-webkit-scrollbar{width:8px;}
  #sidepanel_left::-webkit-scrollbar-thumb{background:var(--c-line);border-radius:8px;}
}

/* ============================================================
   ZUBEHÖR ZUM MITBESTELLEN (Detailseite,aus WaWi-Cross-Selling)
   ============================================================ */
.clarus-acc{
  border:1px solid var(--c-line);border-radius:var(--r);background:var(--c-bg-soft);
  padding:.9rem 1rem;margin:0 0 1rem;
}
.clarus-acc-head{font-weight:var(--fw-semibold);color:var(--c-ink);margin-bottom:.6rem;font-size:.98rem;}
.clarus-acc-row{
  display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;
  padding:.55rem 0;border-top:1px solid var(--c-line);
}
.clarus-acc-row:first-of-type{border-top:none;}
.clarus-acc-qty{display:inline-flex;align-items:center;border:1px solid var(--c-line);border-radius:var(--r-sm);overflow:hidden;background:#fff;}
.clarus-acc-qty button{
  width:30px;height:30px;border:none;background:#fff;color:var(--c-ink);font-size:1rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s var(--ease);
}
.clarus-acc-qty button:hover{background:var(--c-bg-soft);}
.clarus-acc-input{
  width:38px;height:30px;border:none;border-left:1px solid var(--c-line);border-right:1px solid var(--c-line);
  text-align:center;font-size:.9rem;color:var(--c-ink);background:#fff;padding:0;-moz-appearance:textfield;
}
.clarus-acc-input:focus{outline:none;}
.clarus-acc-info{min-width:0;font-size:.9rem;line-height:1.4;}

.clarus-acc-name{color:var(--c-ink);font-weight:var(--fw-medium);}
.clarus-acc-price{color:var(--c-primary);font-weight:var(--fw-semibold);white-space:nowrap;}




/* ============================================================
   "GÜNSTIGER IM SET" — auffällige Set-Karte (Detailseite oben)
   ============================================================ */
.clarus-set-card{
  display:block;text-decoration:none;color:inherit;
  border:1.5px solid var(--c-ink);border-radius:var(--r);
  background:var(--c-bg-soft);padding:.85rem 1rem 1rem;margin:0 0 1.1rem;
  transition:box-shadow .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.clarus-set-card:hover{box-shadow:0 6px 22px rgba(0,0,0,.12);border-color:#000;transform:translateY(-1px);}
.clarus-set-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--c-ink);color:#fff;font-size:.72rem;font-weight:var(--fw-semibold);
  letter-spacing:.04em;text-transform:uppercase;padding:.22rem .55rem;border-radius:var(--r-sm);margin-bottom:.6rem;
}
.clarus-set-badge .fas{font-size:.72rem;}
.clarus-set-body{display:grid;grid-template-columns:72px 1fr auto;gap:.9rem;align-items:center;}
.clarus-set-thumb{width:72px;height:72px;border:1px solid var(--c-line);border-radius:var(--r-sm);overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;}
.clarus-set-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.clarus-set-info{min-width:0;display:flex;flex-direction:column;gap:.25rem;}
.clarus-set-name{font-weight:var(--fw-medium);color:var(--c-ink);line-height:1.3;}
.clarus-set-pricing{display:flex;align-items:baseline;gap:.65rem;flex-wrap:wrap;}
.clarus-set-price{font-weight:var(--fw-semibold);font-size:1.1rem;color:var(--c-ink);}
.clarus-set-save{color:var(--c-success);font-weight:var(--fw-semibold);font-size:.86rem;white-space:nowrap;}
.clarus-set-cta{white-space:nowrap;color:var(--c-ink);font-weight:var(--fw-medium);font-size:.9rem;display:inline-flex;align-items:center;gap:.35rem;}
.clarus-set-card:hover .clarus-set-cta{text-decoration:underline;}
.clarus-set-cta .fas{font-size:.8rem;}
@media(max-width:575.98px){
  .clarus-set-body{grid-template-columns:56px 1fr;}
  .clarus-set-thumb{width:56px;height:56px;}
  .clarus-set-cta{grid-column:1 / -1;justify-content:flex-end;margin-top:.25rem;}
}

/* ============================================================
   HEIZUNGS-KONFIGURATOR (eigene Seite)
   ============================================================ */
.clarus-kf{max-width:1100px;margin:0 auto;padding:1.5rem 1rem 3rem;}
.clarus-kf-head{text-align:center;margin-bottom:2rem;}
.clarus-kf-head h1{font-weight:var(--fw-semibold);color:var(--c-ink);font-size:clamp(1.6rem,1.2rem+2vw,2.4rem);margin-bottom:.6rem;}
.clarus-kf-head p{color:var(--c-mut);max-width:640px;margin:0 auto;line-height:1.5;}

@media(max-width:860px){}

.clarus-kf-form{display:flex;flex-direction:column;gap:1.15rem;background:var(--c-bg-soft);border:1px solid var(--c-line);border-radius:var(--r);padding:1.5rem;}
.clarus-kf-field label{display:flex;justify-content:space-between;align-items:baseline;font-weight:var(--fw-medium);color:var(--c-ink);margin-bottom:.45rem;}
.clarus-kf-val{color:var(--c-primary);font-weight:var(--fw-semibold);}
.clarus-kf-field select{width:100%;padding:.55rem .7rem;border:1px solid var(--c-line);border-radius:var(--r-sm);background:#fff;color:var(--c-ink);font-size:.95rem;}
.clarus-kf-field select:focus{outline:none;border-color:var(--c-ink);}





.clarus-kf-result{position:sticky;top:215px;border:1px solid var(--c-line);border-radius:var(--r);padding:1.5rem;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.05);}
@media(max-width:860px){.clarus-kf-result{position:static;}}
.clarus-kf-need{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:1rem;border-bottom:1px solid var(--c-line);margin-bottom:1.25rem;}
.clarus-kf-need-label{color:var(--c-mut);font-weight:var(--fw-medium);}
.clarus-kf-need-val{font-size:1.5rem;font-weight:var(--fw-semibold);color:var(--c-ink);}


.clarus-kf-reco-img{width:96px;height:96px;border:1px solid var(--c-line);border-radius:var(--r-sm);overflow:hidden;background:var(--c-bg-soft);}
.clarus-kf-reco-img img{width:100%;height:100%;object-fit:cover;display:block;}


.clarus-kf-price{display:flex;flex-direction:column;gap:.1rem;}
.clarus-kf-price-old{color:var(--c-mut);text-decoration:line-through;font-size:.9rem;}
.clarus-kf-price-new{font-size:1.4rem;font-weight:var(--fw-semibold);color:var(--c-ink);}
.clarus-kf-price-save{color:var(--c-success);font-weight:var(--fw-semibold);font-size:.85rem;}
.clarus-kf-add{width:100%;border-radius:var(--r-sm);text-transform:none;font-weight:var(--fw-medium);padding:.75rem 1rem;background:var(--c-primary);border-color:var(--c-primary);color:#fff;}
.clarus-kf-add:hover{background:#000;border-color:#000;}
.clarus-kf-add:disabled{opacity:.6;}
.clarus-kf-empty{color:var(--c-mut);line-height:1.5;}
.clarus-kf-note{text-align:center;color:var(--c-mut);font-size:.8rem;margin-top:2rem;max-width:700px;margin-left:auto;margin-right:auto;line-height:1.5;}

/* PV-/Stromkosten-Rechner */
.clarus-kf-pv{margin-top:2.5rem;border-top:1px solid var(--c-line);padding-top:2rem;}
.clarus-kf-pv-head{text-align:center;margin-bottom:1.5rem;}
.clarus-kf-pv-head h2{font-weight:var(--fw-semibold);color:var(--c-ink);font-size:clamp(1.3rem,1rem+1.4vw,1.8rem);margin-bottom:.4rem;}
.clarus-kf-pv-head p{color:var(--c-mut);}
.clarus-kf-pv-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;}
@media(max-width:860px){.clarus-kf-pv-grid{grid-template-columns:1fr;}}
.clarus-kf-pv-form{display:flex;flex-direction:column;gap:1.15rem;background:var(--c-bg-soft);border:1px solid var(--c-line);border-radius:var(--r);padding:1.5rem;}

.clarus-kf-pv-out{border:1px solid var(--c-line);border-radius:var(--r);padding:1.5rem;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.05);}
.clarus-kf-pv-row{display:flex;justify-content:space-between;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--c-line);color:var(--c-mut);}
.clarus-kf-pv-row strong{color:var(--c-ink);font-weight:var(--fw-semibold);}
.clarus-kf-pv-save{display:flex;justify-content:space-between;align-items:baseline;padding:.9rem 0 .3rem;font-size:1.05rem;}
.clarus-kf-pv-save strong{color:var(--c-success);font-weight:var(--fw-semibold);}
.clarus-kf-pv-save em{font-style:normal;font-size:.85rem;}
.clarus-kf-pv-hint{color:var(--c-mut);font-size:.78rem;margin-top:.8rem;line-height:1.4;}

/* Konfigurator-CTA auf Produktseiten */
.clarus-kf-cta{display:flex;align-items:center;gap:.75rem;text-decoration:none;border:1px dashed var(--c-ink);border-radius:var(--r);
  background:var(--c-bg-soft);padding:.7rem .9rem;margin:0 0 1rem;color:var(--c-ink);transition:background .15s var(--ease),box-shadow .15s var(--ease);}
.clarus-kf-cta:hover{background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.08);color:var(--c-ink);}
.clarus-kf-cta-icon{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--c-ink);color:#fff;display:flex;align-items:center;justify-content:center;}
.clarus-kf-cta-text{flex:1 1 auto;font-size:.86rem;line-height:1.35;}
.clarus-kf-cta-arrow{flex:0 0 auto;color:var(--c-mut);}
.clarus-kf-cta:hover .clarus-kf-cta-arrow{color:var(--c-ink);}


@media(max-width:767.98px){}








/* ============================================================
   DARK HEAT — dunkles Theme + warmer Infrarot-Glow.
   Kippt die Tokens auf Dunkel und überschreibt NOVAs helle Basis
   (clear.css) an den sichtbaren Stellen. Layout/Funktionen unverändert.
   Reversibel: diesen Block entfernen = zurück zu Light.
   ============================================================ */

html,body,#main-wrapper{background:#0c0e13 !important;color:var(--c-ink);}
#content-wrapper{background:transparent !important;}
p,li,dt,dd,label,small,figcaption,blockquote{color:var(--c-ink);}
.text-muted,.text-muted-util,.font-size-sm{color:var(--c-mut) !important;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4{color:var(--c-ink) !important;}
a{color:var(--c-ink-soft);}
a:hover{color:var(--heat) !important;}
hr,.border,.border-top,.border-bottom{border-color:var(--c-line) !important;}

/* Header / Topbar / Nav */
#header-top-bar,.header-top-bar,#header,header .navbar,#jtl-nav-wrapper,.navbar,.main-navbar,.mega-menu,.dropdown-menu,.nav-wrapper{background-color:var(--c-cream) !important;border-color:var(--c-line) !important;}
.navbar-nav .nav-link,.nav-link,.navbar a,#jtl-nav-wrapper a{color:var(--c-ink-soft) !important;}
.navbar-nav .nav-link:hover,.nav-link:hover{color:var(--heat) !important;}
.navbar-nav .nav-link:hover{border-color:var(--heat) !important;}
.header-icons a,.header-icons i,.navbar .fas,.navbar .far{color:var(--c-ink-soft) !important;}

/* Suche */
.header-search input,.search input,input.form-control{background:var(--c-fill) !important;color:var(--c-ink) !important;}

/* Flächen: Karten,Boxen,Dropdowns */
.card,.box,.card-gray,.well,.panel,.list-group-item,.tab-content,.modal-content,.popover,.card-body,.card-header{background-color:var(--c-surf) !important;border-color:var(--c-line) !important;color:var(--c-ink);}
.card-gray,.bg-light,.bg-white,[class*="bg-gray"]{background-color:var(--c-bg-soft) !important;}

/* Formulare */
.form-control,input,select,textarea,.custom-select,.input-group-text{background-color:var(--c-fill) !important;border-color:var(--c-line) !important;color:var(--c-ink) !important;}
.form-control:focus,input:focus,select:focus,textarea:focus{border-color:var(--heat) !important;box-shadow:var(--glow-sm) !important;}
::placeholder{color:var(--c-faint) !important;}

/* Tabellen */
.table,.table td,.table th,.table tr{color:var(--c-ink) !important;border-color:var(--c-line) !important;}
.table thead th{border-color:var(--c-line2) !important;}

/* Buttons: primär = Heat mit Glow */
.btn-primary,.btn-buy,button[name="inWarenkorb"]{background-color:var(--heat) !important;border-color:var(--heat) !important;color:#fff !important;box-shadow:var(--glow-sm);}
.btn-primary:hover,.btn-buy:hover,button[name="inWarenkorb"]:hover{background-color:var(--heat2) !important;border-color:var(--heat2) !important;box-shadow:var(--glow);}
.btn-outline-primary,.btn-secondary,.btn-outline-secondary{background-color:transparent !important;border-color:var(--c-line2) !important;color:var(--c-ink) !important;}
.btn-outline-primary:hover,.btn-secondary:hover,.btn-outline-secondary:hover{background-color:var(--c-fill) !important;border-color:var(--heat) !important;color:var(--heat) !important;}

/* Preise: Heat-Akzent + Glow */
.price,.price_overall,.product-offer .price,.cart-items-price .price_overall,.total-sum,.cart-dropdown-total-item-price,.clarus-mc-line,.clarus-mc-subtotal-val,.clarus-set-price,.clarus-kf-price-new,.clarus-kf-need-val,.clarus-acc-price{
  color:var(--heat) !important;text-shadow:0 0 14px rgba(255,90,31,.35);
}
.clarus-kf-price-old{color:var(--c-faint) !important;text-shadow:none;}

/* Produktlisten / Detail */
.productbox,.product-wrapper .productbox,#gallery,.gallery-with-action-main,.product-thumbnails .square-image{background-color:var(--c-surf) !important;border-color:var(--c-line) !important;}
.productbox:hover{box-shadow:var(--glow-sm) !important;border-color:var(--c-line2) !important;}
.breadcrumb,.breadcrumb-item,.breadcrumb-item a{color:var(--c-mut) !important;background:transparent !important;}

/* Badges / Ribbons mit Glow */
.clarus-set-badge,.badge-primary,.ribbon,.product-badge{background-color:var(--heat) !important;color:#fff !important;box-shadow:var(--glow-sm);}
.clarus-acc-name{color:var(--c-ink) !important;}


/* Footer (bleibt dunkel,angeglichen) */
footer,.footer,.footer-dark,#footer,.copyright{background-color:var(--c-dark) !important;color:var(--c-onDark-mut) !important;border-color:var(--c-line) !important;}
footer a,.footer a{color:var(--c-onDark-mut) !important;}
footer a:hover,.footer a:hover{color:var(--heat) !important;}

/* Slide-in Warenkorb dunkel + Glow-Kante */
.clarus-cart-drawer{background:var(--c-surf) !important;box-shadow:-8px 0 40px rgba(0,0,0,.6), var(--glow-sm);}
.clarus-cart-drawer-head{border-color:var(--c-line) !important;}
.clarus-mc-thumb,.clarus-set-thumb,.clarus-kf-reco-img{background:var(--c-fill) !important;border-color:var(--c-line) !important;}

/* Konfigurator: Glow auf Ergebnis + Set-Karte + PV */
.clarus-set-card{border-color:rgba(255,90,31,.55) !important;box-shadow:var(--glow-sm) !important;background:var(--c-bg-soft) !important;}
.clarus-set-card:hover{box-shadow:var(--glow) !important;}
.clarus-kf-result,.clarus-kf-pv-out{box-shadow:var(--glow-sm) !important;background:var(--c-surf) !important;}
.clarus-kf-form,.clarus-kf-pv-form{background:var(--c-bg-soft) !important;}

.clarus-kf-cta{border-color:rgba(255,90,31,.5) !important;background:var(--c-bg-soft) !important;}
.clarus-kf-cta-icon{background:var(--heat) !important;box-shadow:var(--glow-sm);}
input[type="range"]{accent-color:var(--heat) !important;}





/* Hero: dunkler Overlay + Heat-Schimmer */
.clarus-hero-overlay{background:linear-gradient(180deg, rgba(8,9,13,.35), rgba(8,9,13,.82)) !important;}
.clarus-hero-title{text-shadow:0 2px 30px rgba(0,0,0,.6);}
.clarus-hero-cta{background:var(--heat) !important;border-color:var(--heat) !important;color:#fff !important;box-shadow:var(--glow);}

/* Alerts lesbar */
.alert{background-color:var(--c-bg-soft) !important;border-color:var(--c-line) !important;color:var(--c-ink) !important;}

/* Sticky Sidebar-Scrollbar */
#sidepanel_left::-webkit-scrollbar-thumb{background:var(--c-line2);}

/* ============================================================
   DARK HEAT — Nachbesserung (weiße Restflächen,Buttons,Gelb-Reste)
   ============================================================ */
/* Startseiten-/Slider-Produktkarten (clarus_product_card) */
.clarus-card,.clarus-card-body{background-color:var(--c-surf) !important;border-color:var(--c-line) !important;}
.clarus-card{box-shadow:none !important;}
.clarus-card:hover{box-shadow:var(--glow-sm) !important;border-color:var(--c-line2) !important;}
.clarus-card-title,.clarus-card-title a{color:var(--c-ink) !important;}
.clarus-card-img,.productbox-image,.square-image,.square .inner{background-color:var(--c-fill) !important;}

/* Header-Wrapper (weiße Flanken neben der Navbar) */
header,header.full-width-mega,header.fixed-navbar,#header,body > header,.header,.header-main,.sticky-top > .navbar,.navbar-collapse{background-color:var(--c-cream) !important;}
.container,.container-fluid,.container-xl{background-color:transparent !important;}

/* Buttons zuverlässig (höhere Spezifität gegen NOVA) */
.btn.btn-primary,a.btn-primary,button.btn-primary,.btn-primary.btn-lg,.withdrawal-link,.withdrawal-link.btn-primary,.clarus-hero-cta,.btn-buy,input.btn-primary{
  background-color:var(--heat) !important;border-color:var(--heat) !important;color:#fff !important;box-shadow:var(--glow-sm) !important;text-shadow:none !important;
}
.btn.btn-primary:hover,a.btn-primary:hover,button.btn-primary:hover,.withdrawal-link:hover,.clarus-hero-cta:hover{background-color:var(--heat2) !important;border-color:var(--heat2) !important;color:#fff !important;box-shadow:var(--glow) !important;}
.btn.btn-primary *,a.btn-primary *,.clarus-hero-cta *,.withdrawal-link *{color:#fff !important;}
/* helle/neutrale Buttons -> dunkel */
.btn-light,.btn-default,.btn-white,.btn.btn-secondary,.btn-outline-secondary,.btn-outline-dark{background-color:var(--c-fill) !important;border-color:var(--c-line2) !important;color:var(--c-ink) !important;text-shadow:none !important;}
.btn-light:hover,.btn.btn-secondary:hover,.btn-outline-secondary:hover{border-color:var(--heat) !important;color:var(--heat) !important;background-color:var(--c-fill) !important;}

/* Filter-/Kategorie-Sidebar (weiße Box + gelber Aktiv-Balken) */
.snippets-categories-collapse,.snippets-categories,.productlist-filter,.productlist-filter-box,.filterbox,.filter-box,.box,.sidebar .box,.card.filter,.categorylist,.list-group{background-color:var(--c-surf) !important;border-color:var(--c-line) !important;}
.snippets-categories a,.categorylist a,.filter-list a,.list-group-item{color:var(--c-ink-soft) !important;background-color:transparent !important;border-color:var(--c-line) !important;}
.snippets-categories a:hover,.categorylist a:hover,.filter-list a:hover{color:var(--heat) !important;}
.snippets-categories .active,.snippets-categories a.active,.categorylist .active,.list-group-item.active,.filter-item.active,li.active > a{background-color:var(--c-fill) !important;color:var(--c-ink) !important;border-color:var(--heat) !important;box-shadow:inset 3px 0 0 var(--heat) !important;}
.productlist-filter-headline,.filter-headline,.box .headline,.box-headline{color:var(--c-ink) !important;border-color:var(--c-line) !important;}

/* GELB-Reste global auf Heat umbiegen (Slider,Aktiv-Marker,Akzentvariablen) */

/* Preis-Slider (verschiedene Widgets abdecken) */
.noUi-connect,.slider-selection,.ui-slider-range,.irs-bar,.irs-line-mid,.range-slider-fill{background:var(--heat) !important;}
.noUi-handle,.slider-handle,.ui-slider-handle,.irs-slider,.range-slider-handle{background:var(--heat) !important;border-color:var(--heat) !important;box-shadow:var(--glow-sm) !important;}
.slider-track,.noUi-base,.ui-slider,.irs-line{background:var(--c-line) !important;}
/* jegliche gelbe Border-/BG-Reste am aktiven Filter */
.snippets-categories .active,.filter .active{border-top-color:var(--heat) !important;}

/* OPC-Entwurf + Nav-Pfeile */
.opc-draft,li.opc-draft{background-color:var(--c-surf) !important;border-color:var(--c-line) !important;color:var(--c-ink) !important;}
.nav-scrollbar-arrow{background:var(--c-fill) !important;color:var(--c-ink-soft) !important;}

/* Ergebnis-/Sortierleiste Listing */
.result-options,.productlist-nav,.result-wrapper .filter-selected{background-color:transparent !important;color:var(--c-ink) !important;}
.result-options .btn,.productlist-nav .btn{background-color:var(--c-fill) !important;border-color:var(--c-line2) !important;color:var(--c-ink) !important;}

/* Header-Wrapper hart erzwingen (NOVA setzt #jtl-nav-wrapper mit hoher Spezifität) */
html body #jtl-nav-wrapper,html body header#jtl-nav-wrapper,html #jtl-nav-wrapper{background-color:var(--c-cream) !important;background-image:none !important;}
html body #jtl-nav-wrapper .container,html body #jtl-nav-wrapper .container-fluid{background:transparent !important;}
/* deaktivierte Buttons dunkel statt hellgrau */
.btn:disabled,.btn.disabled,.btn[disabled],.withdrawal-link:disabled,.withdrawal-link.disabled,a.btn-primary.disabled{background-color:var(--c-fill) !important;border-color:var(--c-line) !important;color:var(--c-mut) !important;box-shadow:none !important;opacity:1 !important;}

/* Mengen-Stepper (Drawer + Zubehör) dunkel statt weiß */
.clarus-mc-qty,.clarus-acc-qty{background-color:var(--c-fill) !important;border-color:var(--c-line) !important;}
.clarus-mc-qty button,.clarus-acc-qty button,.clarus-mc-input,.clarus-acc-input{background-color:var(--c-fill) !important;color:var(--c-ink) !important;border-color:var(--c-line) !important;}
.clarus-mc-qty button:hover,.clarus-acc-qty button:hover{background-color:var(--c-bg-soft) !important;color:var(--heat) !important;}
.clarus-mc-thumb,.clarus-acc-thumb{background-color:var(--c-fill) !important;}

/* diverse helle Info-Boxen / Tabellenzellen */
.gp-box,.info-box,.hint-box,.alert-info,.notice{background-color:var(--c-surf) !important;border-color:var(--c-line) !important;color:var(--c-ink) !important;}
.table td,.table th,table td,table th{background-color:transparent !important;}
.tab-content,.nav-tabs,.nav-tabs .nav-link{background-color:transparent !important;color:var(--c-ink-soft) !important;border-color:var(--c-line) !important;}
.nav-tabs .nav-link.active{color:var(--c-ink) !important;border-bottom-color:var(--heat) !important;}

/* ============================================================
   DARK HEAT — Nachbesserung 2 (Kategorieseite/Listing,Hover,Footer)
   ============================================================ */
/* Artikelnamen/Texte im Listing lesbar (waren grau) */
.productbox-title a,.productbox-title,.productbox-title a *,.product-title,.product-title a,.productbox a,.productbox .title,.item-title a,.productbox-name a{color:var(--c-ink) !important;}
.productbox-title a:hover,.productbox a:hover,.productbox-name a:hover{color:var(--heat) !important;}
.productbox-description,.productbox .description,.shortdesc,.short-description,.productbox .text-muted,.productbox small{color:var(--c-mut) !important;}
.productbox .price,.productbox .price_overall{color:var(--heat) !important;}

/* Tabellen-Text (Artikelbeschreibung/Attribute) hell */
.table,.table td,.table th,table td,table th,.tab-content td,.tab-content th,.tab-content p,.tab-content li,.info-essential,.info-essential li,.info-essential strong,.description,.description *{color:var(--c-ink) !important;}
.info-essential .text-muted,.table .text-muted{color:var(--c-mut) !important;}

/* Linke Sidebar entgrauen: Boxen in die Seite einblenden */
#sidepanel_left .box,#sidepanel_left [id^="sidebox"],#sidepanel_left .box-normal,#sidepanel_left .box-categorie,.box-categorie,.snippets-categories-collapse{background-color:transparent !important;border-color:var(--c-line) !important;box-shadow:none !important;}
#sidepanel_left .box .headline,#sidepanel_left .box-headline,.box .headline,.productlist-filter-headline{color:var(--c-ink) !important;background:transparent !important;border-bottom:1px solid var(--c-line) !important;border-top:none !important;}
#sidepanel_left a,#sidepanel_left .box a{color:var(--c-ink-soft) !important;}
#sidepanel_left a:hover{color:var(--heat) !important;}

/* Gelbe Aktiv-Marker/Unterstriche der Kategorien -> Heat */
#sidepanel_left a.active,#sidepanel_left li.active,#sidepanel_left li.active > a,#sidepanel_left .active,.box-categorie .active,.snippets-categories .active{color:var(--heat) !important;background-color:var(--c-fill) !important;border-color:var(--heat) !important;box-shadow:inset 3px 0 0 var(--heat) !important;}
#sidepanel_left [class*="active"]{border-top-color:var(--heat) !important;border-bottom-color:var(--heat) !important;}
#sidepanel_left a.active::before,#sidepanel_left a.active::after,#sidepanel_left li.active::before,#sidepanel_left li.active::after,#sidepanel_left .active::before,#sidepanel_left .active::after{background-color:var(--heat) !important;border-color:var(--heat) !important;}

/* Widerruf-Button lesbar */
.withdrawal-link,.withdrawal-link.btn-primary,a.withdrawal-link,.btn.withdrawal-link{background-color:var(--c-fill) !important;border:1px solid var(--heat) !important;color:var(--c-ink) !important;box-shadow:none !important;opacity:1 !important;text-shadow:none !important;}
.withdrawal-link *{color:var(--c-ink) !important;}
.withdrawal-link:hover{background-color:var(--heat) !important;border-color:var(--heat) !important;color:#fff !important;}
.withdrawal-link:hover *{color:#fff !important;}

/* Hover: nur reine Textlinks -> Heat. NICHT blanket auf alle Icons/Spans in Link-Karten
   (sonst invertiert in Komponenten alles in dieselbe Farbe = unsichtbar). Icon-Hover
   wird gezielt gesetzt (Header-Icons,Quick-Actions,Pagination unten). */
a:hover{color:var(--heat) !important;}
.header-icons a:hover,.header-icons a:hover i,.cart-icon-dropdown a:hover,.navbar a:hover i{color:var(--heat) !important;}
.productbox-quick-actions a:hover,.productbox-quick-actions button:hover{color:var(--heat) !important;border-color:var(--heat) !important;}
.pagination .page-link:hover{color:var(--heat) !important;border-color:var(--heat) !important;background:var(--c-fill) !important;}
.pagination .active .page-link,.pagination .page-item.active .page-link{background:var(--heat) !important;border-color:var(--heat) !important;color:#fff !important;}

/* Gelber Unterstrich an Kategorie-Links (auch aufklappbare dropdown-toggle) killen */
#sidepanel_left a,#sidepanel_left .nav-link,#sidepanel_left .nav-link.dropdown-toggle,#sidepanel_left .box-categorie a,.box-categorie .nav-link{border-bottom-color:var(--c-line) !important;border-top-color:var(--c-line) !important;text-decoration:none !important;}
#sidepanel_left .nav-link.dropdown-toggle,#sidepanel_left .nav-link{background-image:none !important;box-shadow:none !important;}
#sidepanel_left .nav-link:hover,#sidepanel_left .nav-link.dropdown-toggle:hover{color:var(--heat) !important;border-bottom-color:var(--heat) !important;}
#sidepanel_left .nav-link.active,#sidepanel_left .nav-link.show,#sidepanel_left .dropdown-toggle[aria-expanded="true"]{color:var(--heat) !important;border-bottom-color:var(--heat) !important;}
#sidepanel_left .nav-link::after,#sidepanel_left .dropdown-toggle::after{color:var(--c-ink-soft) !important;border-top-color:currentColor !important;}

/* ============================================================
   DARK HEAT — Nachbesserung 3 (Finale Politur:
   Ember-Glow-Atmosphäre im Hintergrund,Produktkarten,Sidebar-Balken-Abstand,Preis-Lesbarkeit,Widerruf-Button)
   ============================================================ */

/* --- Ambient Ember-Glow: statt flachem Schwarz ein warmer Schimmer ---
   Fixierte Radial-Verläufe hinter dem transparenten Content-Wrapper.
   Sehr dezent gehalten,damit Text/Karten voll lesbar bleiben. */
html,body{background-color:#0a0c11 !important;}
body{position:relative;}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1150px 640px at 6% -8%, rgba(255,90,31,.13), transparent 60%),
    radial-gradient(900px 520px at 106% 4%, rgba(255,168,70,.07), transparent 58%),
    radial-gradient(1300px 760px at 50% 118%, rgba(255,74,20,.09), transparent 62%);
}
/* zarte,sehr langsame Glut-Bewegung (per reduced-motion unten deaktiviert) */
@media(prefers-reduced-motion:no-preference){
  body::before{animation:clarusEmber 22s ease-in-out infinite alternate;}
  @keyframes clarusEmber{from{opacity:.82;}to{opacity:1;}}
}
#main-wrapper,#content-wrapper,main,.wrapper-content,.page-wrap{background:transparent !important;position:relative;z-index:1;}

/* --- Produktkarten: warmer Rand-Glow + klare Lesbarkeit (Start + Listing) --- */
.clarus-card,.productbox{
  background-color:#141924 !important;border:1px solid var(--c-line) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 12px 32px -20px rgba(0,0,0,.85) !important;
  transition:transform .22s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease) !important;
}
.clarus-card:hover,.productbox:hover,.productbox.productbox-hover:hover{
  transform:translateY(-3px);border-color:rgba(255,90,31,.6) !important;
  box-shadow:0 0 0 1px rgba(255,90,31,.28), 0 20px 44px -22px rgba(255,90,31,.5), 0 12px 28px -18px rgba(0,0,0,.9) !important;
}
/* Bildfläche warm angehaucht,damit sie nie "weiß"/tot wirkt */
.clarus-card-img,.productbox-image,.productbox-image .inner,.square-image .inner,.square .inner,.productbox .square .inner{
  background:linear-gradient(158deg,#1b2231 0%,#141924 52%,#1a1013 100%) !important;
}
/* Titel klar und hell */
.clarus-card-title,.clarus-card-title a,.productbox-title,.productbox-title a,.productbox-title a *{
  color:#f5f3f8 !important;font-weight:var(--fw-medium) !important;
}
.clarus-card-title a:hover,.productbox-title a:hover{color:var(--heat) !important;}
/* Preise: leuchtendes Heat + Glow,überall im Karten-/Listing-Kontext */
.clarus-card .price,.clarus-card .price *,.clarus-card-price,.clarus-card-price *,.productbox .price,.productbox .price *,.productbox .price_overall,.productbox [itemprop="offers"] .price,.productbox [itemprop="offers"] .price *{
  color:#ff7d48 !important;font-weight:var(--fw-semibold) !important;text-shadow:0 0 18px rgba(255,90,31,.5) !important;
}
/* Sternchen/Zusatz beim Preis etwas ruhiger halten */
.clarus-card .price small,.productbox .price small,.productbox .price .star,.productbox .price sup{text-shadow:none !important;color:var(--c-mut) !important;}

/* --- Sidebar: Abstand Text <-> orangem Aktiv-Balken --- */
#sidepanel_left .nav-link,#sidepanel_left .nav-link > a,#sidepanel_left .navbar-nav > li > a,.snippets-categories .nav-link,.box-categorie .nav-link,.categorylist .nav-link{
  padding-left:1.15rem !important;
}
#sidepanel_left .active,#sidepanel_left li.active,#sidepanel_left .nav-item.active,.snippets-categories .active,.snippets-categories a.active,.categorylist .active,.list-group-item.active,.filter-item.active,li.active > a,.box-categorie .active{
  box-shadow:inset 4px 0 0 var(--heat) !important;
}
/* falls der Balken direkt am textführenden Element sitzt,zusätzlich Innenabstand */
#sidepanel_left .active > .nav-link,#sidepanel_left li.active > a,#sidepanel_left .nav-item.active > .nav-link{padding-left:1.15rem !important;}

/* --- Widerruf-Button: klar lesbarer,on-theme Outline-Button (war weiß/unlesbar) --- */
.withdrawal-link,.withdrawal-link.btn-primary,a.withdrawal-link,.btn.withdrawal-link,.btn.btn-primary.withdrawal-link{
  background-color:var(--c-fill) !important;background-image:none !important;
  border:1.5px solid var(--heat) !important;color:#f5f3f8 !important;
  box-shadow:0 0 14px -2px rgba(255,90,31,.35) !important;opacity:1 !important;text-shadow:none !important;font-weight:var(--fw-medium) !important;
}
.withdrawal-link *,.btn.btn-primary.withdrawal-link *{color:#f5f3f8 !important;}
.withdrawal-link:hover,.btn.btn-primary.withdrawal-link:hover{background-color:var(--heat) !important;border-color:var(--heat) !important;color:#fff !important;box-shadow:var(--glow) !important;}
.withdrawal-link:hover *{color:#fff !important;}
/* ‼️ Der helle Theme-Footer whitent Buttons via #footer-ID-Regel (Spezifität 1,1,0),die meine .withdrawal-link-Regeln (0,3,0) schlägt. Darum #footer-scoped übersteuern. */
#footer .btn-primary,#footer .btn-secondary,#footer .btn-default,#footer .submit_button,#footer input[type="submit"],#footer .btn-buy{
  background-color:var(--heat) !important;border-color:var(--heat) !important;color:#fff !important;text-shadow:none !important;
}
#footer .btn-primary:hover,#footer .btn-secondary:hover,#footer .btn-default:hover{background-color:var(--heat2) !important;border-color:var(--heat2) !important;color:#fff !important;box-shadow:var(--glow) !important;}
#footer .withdrawal-link,#footer a.withdrawal-link,#footer .btn.withdrawal-link,#footer .btn.btn-primary.withdrawal-link{
  background-color:var(--c-fill) !important;background-image:none !important;border:1.5px solid var(--heat) !important;color:#f5f3f8 !important;
  box-shadow:0 0 14px -2px rgba(255,90,31,.35) !important;opacity:1 !important;text-shadow:none !important;
}
#footer .withdrawal-link *{color:#f5f3f8 !important;}
#footer .withdrawal-link:hover,#footer .btn.btn-primary.withdrawal-link:hover{background-color:var(--heat) !important;border-color:var(--heat) !important;color:#fff !important;box-shadow:var(--glow) !important;}
#footer .withdrawal-link:hover *{color:#fff !important;}

/* ============================================================
   DARK HEAT — Nachbesserung 4 (Kategorie/Listing entschlacken:
   ruhige Filter-Panels statt "hingeklatscht" + native
   Merkmalfilter im Voraus gestylt für den WaWi-Abgleich)
   ============================================================ */
/* Sidebar als zusammenhängendes Panel: randlose Boxen,Sektionen per Header-Linie getrennt */
#sidepanel_left .box,#sidepanel_left [class*="box-filter"]{
  background:transparent !important;border:none !important;border-radius:0 !important;
  margin:0 !important;padding:0 !important;box-shadow:none !important;
}
/* redundante Trennlinien in den Filterboxen raus (Header-Border reicht) */
#sidepanel_left .box-filter-hr{display:none !important;}
/* Box-Header (dropdown-toggle-Buttons + Headlines) = klare,einheitliche Sektionstitel */
#sidepanel_left .btn-filter-box,#sidepanel_left .box .headline,#sidepanel_left .box-headline,#sidepanel_left .box-title{
  display:flex !important;align-items:center;justify-content:space-between;width:100%;
  padding:.9rem .15rem !important;margin:0 !important;
  font-size:.8rem !important;font-weight:var(--fw-semibold) !important;letter-spacing:.07em;text-transform:uppercase;
  color:var(--c-ink) !important;text-decoration:none !important;background:transparent !important;
  border:none !important;border-top:1px solid var(--c-line) !important;border-radius:0 !important;box-shadow:none !important;
}
#sidepanel_left > *:first-child .btn-filter-box,#sidepanel_left .box:first-child .headline{border-top:none !important;}
#sidepanel_left .btn-filter-box:hover{color:var(--heat) !important;}
#sidepanel_left .characteristic-collapse-btn-inner,#sidepanel_left .btn-filter-box .text-truncate{text-align:left;flex:1 1 auto;min-width:0;}
/* Chevron rechts,dezent → Heat bei offen/hover */
#sidepanel_left .btn-filter-box.dropdown-toggle::after{margin-left:.5rem;color:var(--c-mut) !important;transition:color .15s var(--ease);}
#sidepanel_left .btn-filter-box.dropdown-toggle:hover::after,#sidepanel_left .btn-filter-box[aria-expanded="true"]::after{color:var(--heat) !important;}
/* Collapse-Inhalt bekommt etwas Luft */
#sidepanel_left .collapse.show,#sidepanel_left .box-filter-price-collapse,#sidepanel_left .box-filter-characteristics .collapse{padding:.2rem .15rem .8rem;}

/* Kategorien-Liste: ruhige Zeilen,Hover-Fläche */
#sidepanel_left .snippets-categories .nav-link{padding-top:.5rem !important;padding-bottom:.5rem !important;}
#sidepanel_left .snippets-categories .nav-link:hover{background:var(--c-fill) !important;}

/* Preisspanne-Felder dunkel + aufgeräumt */
#sidepanel_left .box-filter-price input,#sidepanel_left .price-range-box input,#sidepanel_left input.form-control{
  background:var(--c-fill) !important;border:1px solid var(--c-line) !important;color:var(--c-ink) !important;border-radius:var(--r-sm) !important;
}
#sidepanel_left .input-group-text,#sidepanel_left .input-group-append .input-group-text{background:var(--c-cream2) !important;border-color:var(--c-line) !important;color:var(--c-mut) !important;}

/* Native Merkmalfilter-Werte (erscheinen NACH WaWi-Merkmal-Abgleich): Dark-Heat-Look */
#sidepanel_left .box-filter-characteristics a,#sidepanel_left .filter-list a,#sidepanel_left .filter-item a,#sidepanel_left .navi-filter a{
  color:var(--c-ink-soft) !important;text-decoration:none !important;
}
#sidepanel_left .box-filter-characteristics a:hover,#sidepanel_left .filter-list a:hover,#sidepanel_left .navi-filter a:hover{color:var(--heat) !important;}
#sidepanel_left .custom-control-label,#sidepanel_left .form-check-label,#sidepanel_left .checkbox label{color:var(--c-ink-soft) !important;}
#sidepanel_left .custom-control-input:checked ~ .custom-control-label::before,#sidepanel_left .form-check-input:checked{background-color:var(--heat) !important;border-color:var(--heat) !important;}
/* gesetzter Filter als Heat-Pill */
.filter-selected a,.selected-filter,.active-filter,.filterlist-selected a,.filter-tag{background:var(--c-fill) !important;border:1px solid var(--heat) !important;color:var(--c-ink) !important;border-radius:999px !important;padding:.2rem .6rem !important;}

/* Sortier-/Ergebnisleiste oben ruhiger + Filter-Button (falls filter_placement=modal) im Heat-Stil */
.result-options,.productlist-nav,.productlist-header,.result-wrapper .result-options{background:transparent !important;border-bottom:1px solid var(--c-line) !important;}
.result-options .custom-select,.result-options select,.productlist-nav select,.result-options .form-control{background:var(--c-fill) !important;border:1px solid var(--c-line) !important;color:var(--c-ink) !important;border-radius:var(--r-sm) !important;}
.btn-filter-modal,.filter-modal-toggle,.js-filter-modal{background:var(--c-fill) !important;border:1px solid var(--heat) !important;color:var(--c-ink) !important;}
.btn-filter-modal:hover,.filter-modal-toggle:hover{background:var(--heat) !important;color:#fff !important;}

/* ============================================================
   DARK HEAT — Nachbesserung 5 (Cookie-Consent-Banner:
   war weiß/ungestylt = das einzige echte Weiß auf der Seite,das über dem Content lag und die Kacheln "weiß" wirken ließ)
   ============================================================ */
#consent-manager,#consent-manager.active,.consent-manager{background-color:transparent !important;}
#consent-banner{
  background-color:var(--c-surf) !important;color:var(--c-ink) !important;border-color:var(--c-line) !important;
  border-top:1px solid rgba(255,90,31,.35) !important;
  box-shadow:0 -10px 40px rgba(0,0,0,.6), 0 0 22px rgba(255,90,31,.14) !important;
}
#consent-banner,#consent-banner .consent-banner-body,#consent-banner .consent-banner-description,#consent-banner p,#consent-banner span,#consent-banner li,#consent-banner .consent-display-2,#consent-banner label{color:var(--c-ink) !important;}
#consent-banner a{color:var(--heat-ink) !important;text-decoration:underline;}
#consent-banner a:hover{color:var(--heat) !important;}
#consent-banner .consent-banner-icon,#consent-banner .consent-banner-icon svg,#consent-banner .consent-banner-icon path{color:var(--heat) !important;fill:var(--heat) !important;}
/* Zustimmen = Heat,sekundäre = Outline */
#consent-banner .consent-btn{border-radius:var(--r-sm) !important;font-weight:var(--fw-medium) !important;text-shadow:none !important;}
#consent-banner .consent-accept .consent-btn,#consent-banner .consent-btn-primary,#consent-banner .btn-primary{
  background-color:var(--heat) !important;border-color:var(--heat) !important;color:#fff !important;box-shadow:var(--glow-sm) !important;
}
#consent-banner .consent-accept .consent-btn:hover,#consent-banner .consent-btn-primary:hover,#consent-banner .btn-primary:hover{background-color:var(--heat2) !important;border-color:var(--heat2) !important;}
#consent-banner .consent-btn-outline-primary,#consent-banner .btn-outline-primary{background-color:transparent !important;border:1px solid var(--c-line2) !important;color:var(--c-ink) !important;box-shadow:none !important;}
#consent-banner .consent-btn-outline-primary:hover,#consent-banner .btn-outline-primary:hover{border-color:var(--heat) !important;color:var(--heat) !important;background-color:var(--c-fill) !important;}
/* Consent-Modal-Detailansicht (Cookie-Einstellungen) ebenfalls dunkel */
#consent-manager .modal-content,#consent-manager .card,#consent-manager .list-group-item{background-color:var(--c-surf) !important;color:var(--c-ink) !important;border-color:var(--c-line) !important;}

/* ============================================================
   DARK HEAT — Nachbesserung 6 (DER ECHTE „weiße Kachel"-Grund!)
   NOVA legt ab @media(min-width:768px) ein WEISSES Pseudo-Element
   .productbox.productbox-hover .productbox-inner::before {background:#fff}
   als Karten-Hintergrund über die Kachel. ::before ist für Element-
   Scans unsichtbar → wurde lange übersehen. Auf Dark-Heat umstellen.
   ============================================================ */
.productbox.productbox-hover .productbox-inner::before{background-color:#141924 !important;}
.productbox.productbox-hover:hover .productbox-inner::before,.productbox.productbox-hover:focus .productbox-inner::before,.productbox.productbox-hover.focus .productbox-inner::before{
  box-shadow:0 0 1.6rem rgba(255,90,31,.30), 0 0 0 1px rgba(255,90,31,.35) !important;
}
.productbox.productbox-hover:focus-visible .productbox-inner::before,.productbox.productbox-hover:focus-within .productbox-inner::before{outline-color:var(--heat) !important;}
/* Sicherheitsnetz: falls .productbox-inner selbst je weiß gesetzt wird */
.productbox .productbox-inner{background-color:transparent !important;}

/* ============================================================
   DARK HEAT — Nachbesserung 7 (Feintuning: Header-Icons,Detail-Hauptbild randlos,Sidebar-Politur)
   ============================================================ */
/* --- Header-Tools-Icons (Konto/Wunschliste/Vergleich/Warenkorb): größer + klar sichtbarer Heat-Hover --- */
#jtl-nav-wrapper [class*="-icon-dropdown"] > .nav-link,#jtl-nav-wrapper .header-icons > a,#jtl-nav-wrapper .navbar-tools .nav-link{
  color:var(--c-ink-soft) !important;padding-left:.65rem !important;padding-right:.65rem !important;
  transition:color .15s var(--ease),transform .15s var(--ease) !important;
}
#jtl-nav-wrapper [class*="-icon-dropdown"] > .nav-link .fas,#jtl-nav-wrapper [class*="-icon-dropdown"] > .nav-link .far,#jtl-nav-wrapper [class*="-icon-dropdown"] > .nav-link > span,#jtl-nav-wrapper .header-icons .fas,#jtl-nav-wrapper .header-icons .far{
  font-size:1.5rem !important;color:inherit !important;vertical-align:middle;
}
#jtl-nav-wrapper [class*="-icon-dropdown"] > .nav-link:hover,#jtl-nav-wrapper [class*="-icon-dropdown"]:hover > .nav-link,#jtl-nav-wrapper [class*="-icon-dropdown"] > .nav-link:hover .fas,#jtl-nav-wrapper [class*="-icon-dropdown"] > .nav-link:hover .far,#jtl-nav-wrapper [class*="-icon-dropdown"] > .nav-link:hover > span,#jtl-nav-wrapper [class*="-icon-dropdown"] > .nav-link:focus .fas{
  color:var(--heat) !important;transform:translateY(-1px);text-shadow:0 0 14px rgba(255,90,31,.45) !important;
}
/* Warenkorb-Zähler-Badge in Heat statt dunkel */
#jtl-nav-wrapper .cart-icon-dropdown .badge,#jtl-nav-wrapper [class*="-icon-dropdown"] .badge{background-color:var(--heat) !important;color:#fff !important;box-shadow:var(--glow-sm);}

/* --- Detailseite: Hauptbild randlos/abschließend (kein Rahmen links/rechts) --- */
#gallery,.product-gallery #gallery,.gallery-with-action,.gallery-with-action-main,.product-gallery .gallery-with-action-main{
  background:transparent !important;border:none !important;padding:0 !important;box-shadow:none !important;
}
.gallery-with-action-main .square-image,.gallery-with-action-main .inner,#gallery .square-image{border:none !important;background:transparent !important;}

/* --- Sidebar-Politur (weniger "MS-DOS"): weiche Felder,mehr Luft,runde Slider --- */
#sidepanel_left{padding-right:.35rem;}
#sidepanel_left .box-title,#sidepanel_left .btn-filter-box,#sidepanel_left .box .headline,#sidepanel_left .box-headline{letter-spacing:.09em;font-size:.72rem !important;color:var(--c-mut) !important;}
#sidepanel_left .btn-filter-box:hover{color:var(--heat) !important;}
/* Preisspanne: zwei dezente,runde Felder mit EUR-Suffix statt DOS-Kästchen */
#sidepanel_left .box-filter-price input,#sidepanel_left .price-range-box input,#sidepanel_left input.form-control,#sidepanel_left .input-group input{
  background:var(--c-fill) !important;border:1px solid var(--c-line) !important;color:var(--c-ink) !important;
  border-radius:8px !important;height:38px !important;padding:.35rem .6rem !important;font-variant-numeric:tabular-nums;
}
#sidepanel_left .input-group-text,#sidepanel_left .input-group-append .input-group-text{
  background:transparent !important;border:none !important;color:var(--c-mut) !important;font-size:.78rem !important;padding-left:.4rem !important;
}
#sidepanel_left .input-group{gap:.15rem;align-items:center;}
/* Range-Slider (noUi) runder + Heat-Glow */
#sidepanel_left .noUi-target,#sidepanel_left .noUi-base{background:var(--c-line) !important;border:none !important;box-shadow:none !important;height:4px !important;border-radius:999px !important;}
#sidepanel_left .noUi-connect{background:var(--heat) !important;box-shadow:0 0 10px rgba(255,90,31,.5) !important;}
#sidepanel_left .noUi-handle{width:18px !important;height:18px !important;border-radius:50% !important;background:var(--heat) !important;border:2px solid #fff !important;box-shadow:0 0 0 3px rgba(255,90,31,.25) !important;top:-7px !important;right:-9px !important;cursor:grab;}
#sidepanel_left .noUi-handle::before,#sidepanel_left .noUi-handle::after{display:none !important;}
/* Verfügbarkeits-Checkboxen etwas luftiger */
#sidepanel_left .box-filter-availability .custom-control,#sidepanel_left .box-filter-availability .form-check{padding-top:.15rem;padding-bottom:.15rem;}

/* ============================================================
   DARK HEAT — Nachbesserung 8 (Startseite: Use-Case-Kacheln
   mit Glow{position:relative;}




@media(max-width:900px){}
@media(max-width:520px){}







/* Hover: anheben,Heat-Glow-Ring,Scrim wärmer{transform:translateY(-6px);border-color:rgba(255,90,31,.65);
  box-shadow:0 0 0 1px rgba(255,90,31,.35),0 26px 50px -22px rgba(255,90,31,.55),0 16px 34px -20px rgba(0,0,0,.95);outline:none;}



/* Akzent-Kachel (LED) dauerhaft leicht umrandet{border-color:rgba(255,90,31,.4);}




/* ============================================================
   DARK HEAT — Nachbesserung 9 (Zubehör-Hover-Vorschau +
   "Warum Infrarot"-Block unter dem Detailbild)
   ============================================================ */
/* Zubehör-Zeile: Stepper | Thumbnail | Info,plus Hover-Popover */
.clarus-acc-row{grid-template-columns:auto auto 1fr !important;align-items:center !important;position:relative;gap:.7rem !important;}
.clarus-acc-thumb{width:46px;height:46px;border-radius:8px;overflow:hidden;background:var(--c-fill);border:1px solid var(--c-line);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.clarus-acc-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.clarus-acc-info{display:flex;flex-direction:column;gap:.12rem;min-width:0;}
.clarus-acc-name{color:var(--c-ink) !important;font-weight:var(--fw-medium);line-height:1.25;}
.clarus-acc-price{color:var(--heat) !important;font-weight:var(--fw-semibold);white-space:nowrap;text-shadow:0 0 12px rgba(255,90,31,.4);}
.clarus-acc-pop{position:absolute;left:54px;bottom:calc(100% - 8px);z-index:40;width:236px;
  background:var(--c-surf);border:1px solid var(--c-line2);border-radius:12px;padding:.6rem;
  box-shadow:0 14px 36px rgba(0,0,0,.6),var(--glow-sm);opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;pointer-events:none;}
.clarus-acc-pop-img{width:100%;height:150px;object-fit:contain;background:var(--c-fill);border-radius:8px;display:block;}
.clarus-acc-pop-desc{color:var(--c-ink-soft);font-size:.82rem;line-height:1.42;margin-top:.5rem;}
.clarus-acc-row:hover .clarus-acc-pop,.clarus-acc-row:focus-within .clarus-acc-pop{opacity:1;visibility:visible;transform:translateY(0);}
@media(max-width:767.98px){.clarus-acc-pop{display:none !important;}}

/* "Warum Infrarot" unter dem Detailbild (linke Spalte) */
.clarus-why{margin-top:1.6rem;border-top:1px solid var(--c-line);padding-top:1.3rem;}
.clarus-why-head{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--c-mut);font-weight:var(--fw-semibold);margin-bottom:1rem;}

@media(max-width:520px){}

.clarus-why-ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,rgba(255,90,31,.24),rgba(255,90,31,.07));color:var(--heat);font-size:1.08rem;
  border:1px solid rgba(255,90,31,.3);box-shadow:0 0 16px -5px rgba(255,90,31,.55);}
.clarus-why-txt{display:flex;flex-direction:column;gap:.12rem;min-width:0;}
.clarus-why-txt strong{color:var(--c-ink);font-weight:var(--fw-semibold);font-size:.96rem;}
.clarus-why-txt span{color:var(--c-mut);font-size:.85rem;line-height:1.4;}

/* --- Kategorie-Beschreibung ("Darum Infrarot …") ans ENDE der Kategorie (cleaner) ---
   .desc ist direktes Kind von #result-wrapper (neben Sortierleiste + Produktgrid) -> per flex-order nach unten. */
#result-wrapper{display:flex;flex-direction:column;}
#result-wrapper > .desc{order:99;margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--c-line);}
#result-wrapper > .desc h2,#result-wrapper > .desc h3{color:var(--c-ink) !important;}
#result-wrapper > .desc p,#result-wrapper > .desc li{color:var(--c-ink-soft) !important;}

/* ============================================================
   DARK HEAT — Nachbesserung 10 (Runde 2 Feintuning)
   ============================================================ */
/* --- Ambient Glow kräftiger + über die ganze Seite --- */
body::before{
  background:
    radial-gradient(1200px 740px at 3% -6%, rgba(255,90,31,.20), transparent 58%),
    radial-gradient(1000px 640px at 101% 4%, rgba(255,150,60,.13), transparent 56%),
    radial-gradient(1150px 940px at 50% 110%, rgba(255,74,20,.15), transparent 60%),
    radial-gradient(900px 760px at 80% 42%, rgba(255,90,31,.07), transparent 62%) !important;
}

/* --- Hero bündig unter die Navbar (0 Abstand oben; #content-wrapper hat 60px padding-top) --- */
.clarus-hero{margin-top:-60px !important;}

/* --- Logo größer + weiß (war dunkel/unsichtbar; Basis setzt #shop-logo{filter:none!important} → mit ID+!important übersteuern) --- */
#shop-logo,.navbar-brand img,.logo img,#logo img{height:58px !important;max-height:58px !important;width:auto !important;
  filter:brightness(0) invert(1) !important;}

/* --- Detailseite Hover-Invert korrekt (nicht alles in dieselbe Farbe) --- */
.clarus-kf-cta:hover .clarus-kf-cta-icon,.clarus-kf-cta:hover .clarus-kf-cta-icon .fas{color:#fff !important;}
.clarus-kf-cta:hover,.clarus-kf-cta:hover .clarus-kf-cta-text{color:var(--c-ink) !important;}
.clarus-kf-cta:hover .clarus-kf-cta-arrow{color:var(--heat) !important;}
.clarus-set-card:hover .clarus-set-name{color:var(--c-ink) !important;}
.clarus-set-card:hover .clarus-set-price{color:var(--heat) !important;}
.clarus-set-card:hover .clarus-set-save{color:#3fbf6a !important;}
.clarus-set-card:hover .clarus-set-cta,.clarus-set-card:hover .clarus-set-cta .fas{color:var(--heat) !important;}
.clarus-set-badge,.clarus-set-card:hover .clarus-set-badge,.clarus-set-badge .fas{color:#fff !important;}

/* --- "Warum Infrarot" dramatischer + Glut-Glow --- */
.clarus-why-head{font-size:.98rem !important;letter-spacing:.01em !important;text-transform:none !important;color:var(--c-ink) !important;position:relative;padding-left:.95rem;}
.clarus-why-head::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:3px;background:var(--heat);border-radius:2px;box-shadow:0 0 12px rgba(255,90,31,.85);}
.clarus-why-ic{width:48px !important;height:48px !important;border-radius:13px !important;font-size:1.35rem !important;
  background:radial-gradient(circle at 32% 26%,rgba(255,170,80,.55),rgba(255,90,31,.16) 72%) !important;
  color:#ffd8bf !important;border:1px solid rgba(255,90,31,.5) !important;
  box-shadow:0 0 26px -2px rgba(255,90,31,.65),inset 0 0 14px rgba(255,120,40,.3) !important;transition:transform .2s var(--ease),box-shadow .2s var(--ease);}

.clarus-why-txt strong{font-size:1rem !important;}

/* --- Untere Kategorie-Beschreibung: aus MS-DOS -> designte Info-Sektion --- */
#result-wrapper > .desc{
  background:linear-gradient(162deg,var(--c-surf) 0%,#11141c 100%) !important;
  border:1px solid var(--c-line) !important;border-radius:18px !important;padding:2rem 2.2rem !important;margin-top:3rem !important;
  box-shadow:0 0 0 1px rgba(255,90,31,.09),0 24px 55px -32px rgba(255,90,31,.45),0 16px 36px -26px rgba(0,0,0,.9) !important;
  position:relative;overflow:hidden;border-top:1px solid var(--c-line) !important;}
#result-wrapper > .desc::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(65% 85% at 100% 0%,rgba(255,90,31,.14),transparent 60%),radial-gradient(50% 60% at 0% 100%,rgba(255,138,61,.08),transparent 60%);}
#result-wrapper > .desc > *{position:relative;z-index:1;}
#result-wrapper > .desc h2,#result-wrapper > .desc h3{color:#fff !important;font-weight:var(--fw-semibold) !important;margin:1.6rem 0 .8rem;padding-bottom:.35rem;}
#result-wrapper > .desc > :first-child{margin-top:0 !important;}
#result-wrapper > .desc h2::after,#result-wrapper > .desc h3::after{content:"";display:block;width:2.6rem;height:3px;background:var(--heat);margin-top:.5rem;border-radius:2px;box-shadow:0 0 12px rgba(255,90,31,.75);}
#result-wrapper > .desc ul{list-style:none !important;padding-left:0 !important;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.65rem 1.6rem;}
@media(max-width:700px){#result-wrapper > .desc ul{grid-template-columns:1fr;}}
#result-wrapper > .desc li{position:relative;padding-left:1.9rem;color:var(--c-ink-soft) !important;line-height:1.5;list-style:none !important;}
#result-wrapper > .desc li::before{content:"";position:absolute;left:.2rem;top:.42em;width:9px;height:9px;background:var(--heat);border-radius:2px;transform:rotate(45deg);box-shadow:0 0 10px rgba(255,90,31,.85);}
#result-wrapper > .desc p{color:var(--c-ink-soft) !important;line-height:1.65;}
#result-wrapper > .desc strong{color:#fff !important;}

/* --- Sidebar als zusammenhängende Karte (fügt sich zum Karten-Look rechts) --- */
@media(min-width:992px){
  #sidepanel_left{background:linear-gradient(165deg,var(--c-surf) 0%,#12151d 100%) !important;border:1px solid var(--c-line) !important;
    border-radius:18px !important;padding:.4rem 1.1rem 1.2rem !important;box-shadow:0 16px 36px -24px rgba(0,0,0,.85),0 0 0 1px rgba(255,90,31,.05) !important;}
  #sidepanel_left > *:first-child .btn-filter-box,#sidepanel_left .box:first-child .headline{border-top:none !important;}
}

/* ============================================================
   DARK HEAT — Nachbesserung 11 (globaler Verlauf + WaWi-
   Artikelbeschreibung .gp-desc hochwertig auf Dark-Heat)
   ============================================================ */
/* --- Globaler Hintergrund: sanfter Verlauf statt fast-schwarz (war zu dunkel) ---
   background-attachment:fixed -> an Viewport gekoppelt,gleichmaessig; Ember-::before liegt darueber. */
html,body{background:linear-gradient(168deg,#191d28 0%,#12161f 44%,#0c0f16 100%) fixed !important;}

/* --- Artikelbeschreibung (WaWi $Artikel->cBeschreibung,Klasse .gp-desc) ---
   Bringt ihr eingebettetes <style> (dark text #1f2732,rote H2,helle Tabelle) auf Dark-Heat.
   Alles mit !important,da das Inline-<style> im Body nach clarus.css laedt. */
/* 1rem statt 15px: gleiche Groesse, folgt aber der Browser-Schriftgroesse -
   das ist der Haupt-Beschreibungstext, der muss vergroesserbar bleiben. */
.gp-desc{color:var(--c-ink-soft) !important;font-size:1rem !important;line-height:1.75 !important;max-width:none !important;}
.gp-desc h2{color:#fff !important;font-size:1.4rem !important;font-weight:var(--fw-semibold) !important;margin:2.1rem 0 .9rem !important;position:relative;padding-bottom:.4rem;}
.gp-desc h2:first-child{margin-top:.2rem !important;}
.gp-desc h2::after{content:"";display:block;width:2.6rem;height:3px;background:var(--heat);border-radius:2px;margin-top:.55rem;box-shadow:0 0 12px rgba(255,90,31,.75);}
.gp-desc h3{color:var(--heat-ink) !important;font-size:1.08rem !important;font-weight:var(--fw-semibold) !important;margin:1.4rem 0 .5rem !important;}
.gp-desc p,.gp-desc li,.gp-desc span,.gp-desc div{color:var(--c-ink-soft) !important;}
.gp-desc strong,.gp-desc b{color:#fff !important;}
.gp-desc a{color:var(--heat) !important;text-decoration:underline;}
.gp-desc ul{list-style:none !important;padding-left:0 !important;margin:.5rem 0 1rem !important;}
.gp-desc ul li{position:relative;padding-left:1.75rem !important;margin-bottom:.45rem;}
.gp-desc ul li::before{content:"";position:absolute;left:.28rem;top:.55em;width:8px;height:8px;background:var(--heat);border-radius:2px;transform:rotate(45deg);box-shadow:0 0 10px rgba(255,90,31,.85);}
/* Spezifikations-Tabelle (.gp-specs / jede table in der Beschreibung) */
.gp-desc table,.gp-desc .gp-specs{width:100% !important;border-collapse:separate !important;border-spacing:0 !important;background:transparent !important;
  border:1px solid var(--c-line) !important;border-radius:12px !important;overflow:hidden !important;margin:1.1rem 0 1.6rem !important;}
.gp-desc th,.gp-desc td{color:var(--c-ink) !important;padding:.72rem 1rem !important;border:none !important;border-bottom:1px solid var(--c-line) !important;text-align:left !important;vertical-align:top;}
.gp-desc tr:last-child td,.gp-desc tr:last-child th{border-bottom:none !important;}
.gp-desc table tr td:first-child,.gp-desc .gp-specs tr td:first-child{color:var(--c-mut) !important;font-weight:var(--fw-medium) !important;width:42%;background:rgba(255,255,255,.025) !important;}
.gp-desc tbody tr:nth-child(even) td:not(:first-child){background:rgba(255,255,255,.015) !important;}
.gp-desc th{background:rgba(255,90,31,.12) !important;color:#fff !important;font-weight:var(--fw-semibold) !important;}
/* Highlight-Box + FAQ */
.gp-desc .gp-box{background:linear-gradient(160deg,var(--c-surf),#12151d) !important;border:1px solid rgba(255,90,31,.32) !important;border-radius:14px !important;
  padding:1.15rem 1.35rem !important;margin:1.4rem 0 !important;box-shadow:0 0 24px -6px rgba(255,90,31,.4) !important;}
.gp-desc .gp-box *{color:var(--c-ink) !important;}
.gp-desc .gp-faq{margin-top:1.6rem !important;}
.gp-desc .gp-faq h3,.gp-desc .gp-faq strong{color:#fff !important;}

/* ============================================================
   DARK HEAT — Nachbesserung 12 (EIN kohärenter globaler Hintergrund
   für ALLE Seiten; keine konkurrierenden Sektions-Patches)
   ============================================================ */
/* Der fixierte ::before ist ab jetzt DER globale Backdrop: blau-schwarzer
   Verlauf + gleichmäßiger,symmetrischer Rot-Orange-Schimmer (oben/unten).
   Identisch auf Start-,Kategorie-,Detail- und Sitepages. */
html,body{background:#0f1219 !important;}
body::before{
  background:
    radial-gradient(1500px 900px at 50% -12%, rgba(255,96,36,.15), transparent 60%),
    radial-gradient(1400px 1000px at 50% 116%, rgba(255,80,28,.11), transparent 62%),
    linear-gradient(179deg, #191d29 0%, #14171f 42%, #0d1016 100%) !important;
  animation:none !important;
}
/* Startseiten-Teaser blendet in den globalen Backdrop ein — kein eigener Farb-Block mehr{background:transparent !important;border-top:1px solid var(--c-line) !important;border-bottom:1px solid var(--c-line) !important;}




/* ============================================================
   REDESIGN 2.0 — "INFERNO GLOW"
   Kompletter Design-Push: Bild-Fix,Hover-Invertierung,Hero 2.0,USP-Bar,Karten-Polish,Warenkorb/Checkout dark,Slick-Pfeile.
   ============================================================ */

/* ---- 1) KRITISCHER BILD-FIX ------------------------------------
   NOVAs square-image zentriert Bilder via top/left 50% + translate(-50%).
   Die position:absolute-Basis ging verloren -> Bild wurde aus der Box
   geschoben und von overflow:hidden abgeschnitten (Listing + Galerie
   zeigten LEERE Flächen). Basis hier hart wiederherstellen. */
.square-image .inner img,.square .inner img,.productbox-image .inner img{
  position:absolute !important;top:50% !important;left:50% !important;
  transform:translate(-50%,-50%) !important;
  max-width:100% !important;max-height:100% !important;
}
/* NOVA stapelt ZWEI Bilder (Hover-Wechsel): der obere second-wrapper darf
   KEINE opake Flaeche tragen,sonst verdeckt sein .inner-Gradient das
   darunterliegende erste Bild (Karten wirkten leer). */
.productbox .second-wrapper,.productbox .second-wrapper .inner{background:transparent !important;}
.productbox .second-wrapper .inner::after{background:none !important;}

/* ---- 2) HOVER-SYSTEM (invertiert,IMMER lesbar) ----------------
   Regel: Ghost/Sekundär kippt bei Hover auf Heat-Flaeche + WEISSEN Text.
   Primär (Heat) wird bei Hover heller + staerkerer Glow. Nie hell-auf-hell. */
.btn-secondary,.btn-outline-primary,.btn-outline-secondary,.btn-outline-dark,.btn-light,.btn-default,#footer .btn-secondary,#footer .btn-light{
  background:transparent !important;color:var(--c-ink) !important;
  border:1px solid var(--c-line2) !important;box-shadow:none !important;
}
.btn-secondary:hover,.btn-secondary:focus,.btn-outline-primary:hover,.btn-outline-secondary:hover,.btn-outline-dark:hover,.btn-light:hover,.btn-default:hover,#footer .btn-secondary:hover,#footer .btn-light:hover{
  background:var(--heat) !important;border-color:var(--heat) !important;
  color:#fff !important;box-shadow:var(--glow) !important;
}
.btn-primary:hover *,.btn-secondary:hover *,.btn-light:hover *{color:#fff !important;}
/* Quick-Actions / Icon-Buttons: Hover = Heat-Flaeche + weisses Icon */
.productbox-quick-actions .btn,.product-actions .btn{
  background:var(--c-fill) !important;color:var(--c-ink) !important;border-color:var(--c-line) !important;
}
.productbox-quick-actions .btn:hover,.product-actions .btn:hover{
  background:var(--heat) !important;border-color:var(--heat) !important;color:#fff !important;box-shadow:var(--glow-sm) !important;
}
.productbox-quick-actions .btn:hover i,.product-actions .btn:hover i{color:#fff !important;}
/* Pagination: aktiv + Hover = Heat,Text weiss */
.pagination .page-link:hover,.pagination .page-item.active .page-link{
  background:var(--heat) !important;border-color:var(--heat) !important;color:#fff !important;box-shadow:var(--glow-sm);
}
/* Hauptnav: wachsender Heat-Unterstrich statt Farbwechsel-Wirrwarr */
#jtl-nav-wrapper .navbar-nav > li > .nav-link{position:relative;}
#jtl-nav-wrapper .navbar-nav > li > .nav-link::after{
  content:"";position:absolute;left:1rem;right:1rem;bottom:.35rem;height:2px;
  background:var(--heat);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease);box-shadow:0 0 10px rgba(255,90,31,.8);
}
#jtl-nav-wrapper .navbar-nav > li > .nav-link:hover::after,#jtl-nav-wrapper .navbar-nav > li.active > .nav-link::after{transform:scaleX(1);}
/* Footer-Links: Hover heat statt unsichtbar */
#footer a:hover{color:var(--heat) !important;opacity:1 !important;}
/* Sidebar-/Filterlinks */
#sidepanel_left a:hover,#sidepanel_left .nav-link:hover{color:var(--heat) !important;background:var(--c-fill);}

/* ---- 3) HERO 2.0 ------------------------------------------------ */
.clarus-hero{min-height:min(78vh,720px);display:flex;align-items:center;position:relative;overflow:hidden;}
.clarus-hero-overlay{
  background:
    radial-gradient(900px 520px at 18% 78%, rgba(255,90,31,.34), transparent 62%),
    linear-gradient(90deg, rgba(7,8,12,.88) 0%, rgba(7,8,12,.55) 46%, rgba(7,8,12,.18) 100%),
    linear-gradient(0deg, rgba(10,12,18,.92) 0%, transparent 34%) !important;
}
.clarus-hero-inner{position:relative;z-index:2;padding:clamp(3rem,8vw,6rem) 0;}


.clarus-hero-title{
  /* Untergrenze 1.6rem statt 2.2rem: bei 320 px greift die untere Grenze und
     "INFRAROTHEIZUNG" in Bold-Versalien braucht dort rund 322 px gegen 290 px
     verfuegbare Breite - .clarus-hero{overflow:hidden} kappte die wichtigste
     Ueberschrift des Shops lautlos. Ab etwa 407 px verhaelt sich die Groesse
     unveraendert, das Desktop-Layout bleibt also gleich. */
  font-size:clamp(1.6rem,5.4vw,3.9rem) !important;line-height:1.06 !important;
  font-weight:var(--fw-bold) !important;color:#fff !important;max-width:15ch;
  overflow-wrap:break-word;hyphens:auto;
  text-shadow:0 2px 30px rgba(0,0,0,.55);
}
.clarus-hero-title em{
  font-style:normal;
  background:linear-gradient(92deg,#ffb489 0%,#ff8a3d 45%,#ff5a1f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
  filter:drop-shadow(0 0 22px rgba(255,90,31,.45));
}
.clarus-hero-sub{font-size:clamp(1rem,1.6vw,1.2rem) !important;color:#e7e3ec !important;max-width:52ch;margin:1.1rem 0 1.8rem;}
.clarus-hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;}
.clarus-hero-cta{padding:.85rem 1.9rem !important;font-size:1.02rem !important;border-radius:var(--r) !important;}
.clarus-hero-cta2{
  display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.5rem;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.35);color:#fff !important;font-weight:var(--fw-medium);
  background:rgba(12,14,19,.35);backdrop-filter:blur(4px);transition:all .2s var(--ease);
}
.clarus-hero-cta2:hover{background:var(--heat);border-color:var(--heat);color:#fff !important;box-shadow:var(--glow);text-decoration:none;}
.clarus-hero-stats{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem;}
.clarus-hero-stat{
  display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;border-radius:var(--r-pill);
  background:rgba(15,18,26,.62);border:1px solid rgba(255,138,61,.28);backdrop-filter:blur(6px);
  color:#f2eff6;font-size:.88rem;font-weight:var(--fw-medium);
}
.clarus-hero-stat i{color:var(--heat);}
/* Glut-Linie am Hero-Fuss */
.clarus-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,90,31,.85) 30%,rgba(255,180,137,.9) 50%,rgba(255,90,31,.85) 70%,transparent);
  box-shadow:0 0 24px 2px rgba(255,90,31,.55);
}

/* ---- 4) USP-/TRUST-BAR ------------------------------------------ */
.clarus-usp{border-bottom:1px solid var(--c-line);}
.clarus-usp-inner{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  padding:1.15rem 0;max-width:var(--wrap);margin:0 auto;
}
.clarus-usp-item{display:flex;align-items:center;gap:.85rem;justify-content:center;padding:.35rem .5rem;}
.clarus-usp-ico{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 25%,#ff8a3d,#c93a0d 80%);color:#fff;font-size:1rem;
  box-shadow:0 0 16px -2px rgba(255,90,31,.55);
}
.clarus-usp-txt b{display:block;color:var(--c-ink);font-weight:var(--fw-semibold);font-size:.92rem;line-height:1.25;}
.clarus-usp-txt span{color:var(--c-mut);font-size:.8rem;}
@media(max-width:991.98px){.clarus-usp-inner{grid-template-columns:repeat(2,1fr);}}
@media(max-width:575.98px){.clarus-usp-inner{grid-template-columns:1fr 1fr;gap:.5rem;}.clarus-usp-txt span{display:none;}}

/* ---- 5) SEKTIONEN: Eyebrow + Rhythmus --------------------------- */
.clarus-eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:var(--fw-semibold);color:var(--heat-ink);margin-bottom:.5rem;
}
.clarus-eyebrow::before{content:"";width:22px;height:2px;background:var(--heat);box-shadow:0 0 10px rgba(255,90,31,.85);}
.clarus-section-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem) !important;}

/* ---- 6) PRODUKTKARTEN-POLISH ------------------------------------ */
/* Spec-Chips (Watt/Groesse) auf dem Bild */
.clarus-chiprow{position:absolute;top:.65rem;left:.65rem;z-index:3;display:flex;gap:.35rem;flex-wrap:wrap;pointer-events:none;}
.clarus-chip{
  display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .6rem;border-radius:var(--r-pill);
  background:rgba(10,12,18,.78);border:1px solid rgba(255,138,61,.4);backdrop-filter:blur(4px);
  color:#ffd9c2;font-size:.72rem;font-weight:var(--fw-semibold);letter-spacing:.02em;
}
.clarus-chip-hot{background:linear-gradient(120deg,#ff5a1f,#d9430f);border-color:transparent;color:#fff;box-shadow:0 0 14px -2px rgba(255,90,31,.7);}
.clarus-card{position:relative;}
.clarus-card .clarus-card-img{border-radius:calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0 0;}
/* Bild-Zoom auf WRAPPER-Ebene (kollidiert nicht mit dem Zentrier-Fix) */
.productbox .productbox-images{overflow:hidden;}
.productbox .square-image .inner{transition:transform .45s var(--ease);}
.productbox:hover .square-image .inner{transform:scale(1.05);}
.clarus-card-img{overflow:hidden;}
.clarus-card-img img{transition:transform .45s var(--ease);}
.clarus-card:hover .clarus-card-img img{transform:scale(1.06);}
/* Karte: warmer Rand + Glow-Ring beim Hover (Titel bleibt hell = lesbar) */
.productbox,.clarus-card{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);}
.productbox:hover .productbox-title a,.clarus-card:hover .clarus-card-title{color:#fff !important;}
/* "Details ansehen"-Zeile erscheint beim Hover */
.clarus-card-body{position:relative;}
.clarus-card-go{
  display:flex;align-items:center;gap:.4rem;margin-top:.5rem;font-size:.83rem;font-weight:var(--fw-medium);
  color:var(--heat);opacity:0;transform:translateY(4px);transition:all .25s var(--ease);
}
.clarus-card:hover .clarus-card-go{opacity:1;transform:none;}

/* ---- 7) STATEMENT-BAND (Vollbild-Bild + Claim) ------------------- */
.clarus-band{
  position:relative;border-radius:var(--r-lg);overflow:hidden;margin:var(--sec-pad) 0;
  min-height:420px;display:flex;align-items:center;background-size:cover;background-position:center;
  border:1px solid var(--c-line);
}
.clarus-band::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(700px 420px at 82% 88%, rgba(255,90,31,.38), transparent 64%),
    linear-gradient(90deg, rgba(8,9,13,.9) 0%, rgba(8,9,13,.55) 55%, rgba(8,9,13,.25) 100%);
}
.clarus-band-inner{position:relative;z-index:2;padding:clamp(2rem,5vw,4rem);max-width:640px;}
.clarus-band h2{font-size:clamp(1.6rem,3.4vw,2.5rem) !important;color:#fff !important;line-height:1.12 !important;}
.clarus-band p{color:#ddd9e4 !important;margin:.9rem 0 1.5rem;font-size:1.02rem;max-width:48ch;}
.clarus-band .clarus-band-hint{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.4rem;}
.clarus-band-hint b{display:block;font-size:1.35rem;color:var(--heat-ink);font-weight:var(--fw-bold);text-shadow:0 0 18px rgba(255,90,31,.5);}
.clarus-band-hint span{color:#b9b3c4;font-size:.83rem;}








@media(max-width:991.98px){}
@media(max-width:575.98px){}

/* ---- 9) WARENKORB-SEITE dunkel (war weiss/unlesbar!) ------------- */
.basket-items,.basket-items .cart-items-header,.basket-items .cart-items-body,.cart-item,.basket_wrapper .card,.basket-heading{
  background:var(--c-surf) !important;border-color:var(--c-line) !important;color:var(--c-ink) !important;
}
.basket-items{border:1px solid var(--c-line) !important;border-radius:var(--r-lg) !important;overflow:hidden;}
.cart-items-header{background:var(--c-fill) !important;color:var(--c-mut) !important;}
.cart-items-header *,.basket-items th{color:var(--c-mut) !important;background:transparent !important;}
.basket-items td,.basket-items .cart-items-body > div{background:transparent !important;border-color:var(--c-line) !important;}
.cart-items-name,.cart-items-name a,.basket-items a:not(.btn),.basket-items strong,.basket-items b{color:var(--c-ink) !important;}
.basket-items .text-muted,.basket-items small{color:var(--c-mut) !important;}
.cart-items-image{background:var(--c-fill) !important;border-color:var(--c-line) !important;}
.basket-items .price_overall,.basket-items .text-accent{color:#ff7d48 !important;text-shadow:0 0 16px rgba(255,90,31,.45);}
.basket-items .quantity-wrapper input,.basket-items input[type="number"],.basket-items input[type="text"]{
  background:var(--c-fill) !important;color:var(--c-ink) !important;border-color:var(--c-line) !important;
}
.basket-items .btn-decrement,.basket-items .btn-increment{background:var(--c-fill) !important;color:var(--c-ink) !important;border-color:var(--c-line) !important;}
.basket-items .btn-decrement:hover,.basket-items .btn-increment:hover{background:var(--heat) !important;color:#fff !important;border-color:var(--heat) !important;}
.basket-items [class*="wishlist"],.basket-items [class*="remove"],.basket-items .fa-trash{color:var(--c-mut) !important;}
.basket-items a:hover .fa-trash,.basket-items a:hover[class*="remove"]{color:#ff6b6b !important;}

/* ---- 10) CHECKOUT / KONTO / LOGIN generisch dunkel --------------- */
#checkout .card,#checkout .card-body,.checkout-shipping,.checkout-payment,.order-summary,.account .card,#login .card,.registration-form,.checkout .list-group-item,form .card,.card .card-title,fieldset,legend{
  background-color:var(--c-surf) !important;border-color:var(--c-line) !important;color:var(--c-ink) !important;
}
legend,fieldset legend{background:transparent !important;color:var(--c-ink) !important;}
.table,.table td,.table th{color:var(--c-ink) !important;background:transparent !important;border-color:var(--c-line) !important;}
.table thead th{color:var(--c-mut) !important;}
.custom-select,select.form-control,select{background-color:var(--c-fill) !important;color:var(--c-ink) !important;border-color:var(--c-line) !important;}
.custom-control-label::before{background:var(--c-fill) !important;border-color:var(--c-line2) !important;}
.custom-control-input:checked ~ .custom-control-label::before{background:var(--heat) !important;border-color:var(--heat) !important;}
.custom-radio .custom-control-label::before{border-radius:50%;}

/* ---- 11) DETAIL: Galerie-Pfeile + Buy-Box + Doppel-Slider -------- */
/* Slick-Pfeile: runde dunkle Buttons mit Heat-Hover; kein Streuner mehr */
.slick-prev,.slick-next{
  width:42px !important;height:42px !important;border-radius:50% !important;z-index:5 !important;
  background:rgba(15,18,26,.85) !important;border:1px solid var(--c-line2) !important;
  transition:all .2s var(--ease);
}
.slick-prev:hover,.slick-next:hover{background:var(--heat) !important;border-color:var(--heat) !important;box-shadow:var(--glow-sm);}
.slick-prev::before,.slick-next::before{
  font-family:"Font Awesome 5 Free","FontAwesome";font-weight:900;font-size:.95rem !important;
  color:#fff !important;opacity:1 !important;line-height:1;
}
.slick-prev::before{content:"\f053" !important;}
.slick-next::before{content:"\f054" !important;}
.slick-prev{left:8px !important;}
.slick-next{right:8px !important;}
/* Galerie-Hauptslider: Pfeile nur beim Hover einblenden */
#gallery .slick-arrow{opacity:0;transition:opacity .2s;}
#gallery:hover .slick-arrow{opacity:1;}
/* Buy-Box als Karte mit Praesenz */
.product-info-inner{
  background:linear-gradient(168deg,var(--c-surf),#10141c);
  border:1px solid var(--c-line);border-radius:var(--r-lg);
  padding:clamp(1.2rem,2.4vw,2rem) !important;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(255,90,31,.06);
}
@media(min-width:992px){.product-info-inner{position:sticky;top:186px;}}
.product-offer .price{color:#ff7d48 !important;text-shadow:0 0 22px rgba(255,90,31,.5);}




@media(max-width:767.98px){}
#footer{border-top:1px solid rgba(255,90,31,.22);}



/* doppelte Seiten-H1 ausblenden (Widget bringt eigenen Titel mit) */
#content:has(#clarus-konfigurator) > h1,#content-wrapper :has(> #clarus-konfigurator) > h1:first-child,body:has(#clarus-konfigurator) .page-heading h1{display:none;}

/* ---- 14) Diverses ------------------------------------------------- */
/* Ribbons ("Neu"/"Top") mit Glow */
.ribbon,.product-badge{box-shadow:0 0 16px -2px rgba(255,90,31,.7) !important;}
/* Breadcrumb ruhiger */
.breadcrumb-container,.breadcrumb{border-color:var(--c-line) !important;}
/* Alerts lesbar */
.alert{background:var(--c-surf) !important;color:var(--c-ink) !important;border-color:var(--c-line) !important;}
.alert-success{border-left:3px solid var(--c-success) !important;}
.alert-danger{border-left:3px solid #ff6b6b !important;}
.alert-info{border-left:3px solid var(--heat) !important;}

/* ============================================================
   MOCKUP-LOOK — Umsetzung der Design-Vorlage (User 2026-08-10):
   sattes Schwarz,gluehende Panels,Uppercase-Nav/-Headlines,Kategorie-Karten,Warum-Band,4-Spalten-Footer + Newsletter,Kaufbox-USPs,Bild in der Artikelbeschreibung.
   ============================================================ */

/* ---- Topbar + Nav: Uppercase,ruhig,mit Heat-Akzent ---- */
#header-top-bar a,#header-top-bar span{font-size:.74rem !important;letter-spacing:.08em;text-transform:uppercase;}
#jtl-nav-wrapper .navbar-nav > li > .nav-link{
  text-transform:uppercase;font-size:.8rem !important;letter-spacing:.07em;font-weight:var(--fw-medium) !important;
}
#jtl-nav-wrapper .navbar-nav > li{border-right:1px solid rgba(255,255,255,.06);}
#jtl-nav-wrapper .navbar-nav > li:last-child{border-right:none;}

/* ---- Headlines: Uppercase wie im Mockup ---- */
.clarus-hero-title,.clarus-section-head h2,.clarus-band h2,.clarus-why-band h2,#result-wrapper h1,.page-title,h1.productlist-heading{
  text-transform:uppercase;letter-spacing:.02em;
}

/* ---- Glow-Bloom auf Produktbildern (gluehende Panels) ---- */
.productbox .square-image .inner::after,.clarus-card-img::after,#gallery .gallery-with-action-main::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(60% 45% at 50% 62%, rgba(255,122,48,.16), transparent 70%);
  mix-blend-mode:screen;
}
.clarus-card-img{position:relative;}
#gallery .gallery-with-action-main{position:relative;}

/* ---- Karten: Heart/Quick-Actions immer sichtbar oben rechts ---- */
.productbox-quick-actions{
  display:flex !important;flex-direction:column;gap:.4rem;
  position:absolute;top:.6rem;right:.6rem;left:auto !important;z-index:4;opacity:1 !important;
}
.productbox-quick-actions .btn{
  width:36px;height:36px;border-radius:50% !important;padding:0 !important;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,12,18,.78) !important;border:1px solid rgba(255,255,255,.14) !important;
  backdrop-filter:blur(4px);
}

/* ---- Listing: 3 Spalten ab xl (groessere Karten wie im Mockup) ---- */
@media(min-width:1200px){
  #result-wrapper .row:has(> div > .productbox) > [class*="col-"]{flex:0 0 33.333%;max-width:33.333%;}
}

/* ---- Kategorie-Kopf: Beschreibung wieder OBEN als Banner ---- */
#result-wrapper > .desc{order:-1 !important;border-top:none !important;border-bottom:1px solid var(--c-line);
  padding:0 0 1.4rem !important;margin-bottom:1.4rem !important;background:transparent !important;}
#result-wrapper > .desc h2,#result-wrapper > .desc h3{text-transform:none;}
#result-wrapper > .desc p{color:var(--c-ink-soft) !important;max-width:70ch;}

/* ---- Sidebar-Sektionstitel: orange Uppercase (Mockup) ---- */
#sidepanel_left .btn-filter-box,#sidepanel_left .box .headline,#sidepanel_left .box-headline,.productlist-filter-headline{color:var(--heat-ink) !important;letter-spacing:.12em !important;}

/* ---- Pagination: orange Quadrate ---- */
.pagination .page-link{
  background:var(--c-fill) !important;border-color:var(--c-line) !important;color:var(--c-ink) !important;
  border-radius:8px !important;margin:0 .18rem;min-width:38px;text-align:center;
}

/* ---- Detail: Kaufbox-USP-Zeilen + Tabs ---- */
.product-info-inner .stock-information,.product-info-inner .delivery-status,.product-info-inner [class*="shipment"],.product-info-inner .info-essential{
  border-bottom:1px solid var(--c-line);padding-bottom:.7rem;margin-bottom:.7rem;
}
.nav-tabs .nav-link{
  text-transform:uppercase;font-size:.8rem !important;letter-spacing:.08em;
  color:var(--c-mut) !important;border:none !important;padding:.8rem 1.1rem !important;
}
.nav-tabs .nav-link.active{
  color:#fff !important;background:transparent !important;
  border-bottom:2px solid var(--heat) !important;text-shadow:0 0 14px rgba(255,90,31,.4);
}
.nav-tabs .nav-link:hover{color:var(--heat-ink) !important;}

/* ---- Bild in der Artikelbeschreibung (Mockup-Favorit!) ----
   Ambient-Bild schwimmt rechts im Beschreibungstext. */
.gp-desc::before{
  content:"";float:right;width:min(46%,520px);aspect-ratio:4/3;
  background:url('/bilder/inferno/emotion-waerme.jpg') center/cover no-repeat;
  border-radius:16px;border:1px solid var(--c-line);
  margin:0 0 1.3rem 1.7rem;
  box-shadow:0 26px 54px -30px rgba(0,0,0,.9), 0 0 36px -10px rgba(255,90,31,.45);
}
@media(max-width:767.98px){.gp-desc::before{float:none;width:100%;margin:0 0 1.2rem;}}
/* Vorteils-Listen: orange Haken statt Rauten (Mockup) */
.gp-desc ul li::before{
  content:"\f00c";font-family:"Font Awesome 5 Free","FontAwesome";font-weight:900;
  background:none !important;transform:none !important;box-shadow:none !important;
  color:var(--heat);width:auto;height:auto;font-size:.85rem;top:.15em;left:0;
}

/* ---- BELIEBTE KATEGORIEN (echte Kategorien,4er-Grid) ---- */
.clarus-section-head-center{justify-content:center !important;text-align:center;}
.clarus-section-head-center .clarus-eyebrow{justify-content:center;}
.clarus-catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.clarus-cat{
  position:relative;display:block;aspect-ratio:4/4.6;border-radius:var(--r-lg);overflow:hidden;
  background-size:cover;background-position:center;border:1px solid var(--c-line);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.clarus-cat-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,8,12,.92) 0%,rgba(7,8,12,.25) 45%,rgba(7,8,12,.05) 100%);transition:background .25s;}
.clarus-cat-body{position:absolute;left:1.1rem;right:1.1rem;bottom:1rem;z-index:2;}
.clarus-cat-title{display:block;color:#fff;font-weight:var(--fw-semibold);font-size:1.05rem;}
.clarus-cat-sub{display:block;color:#b9b3c4;font-size:.8rem;margin-top:.15rem;}
.clarus-cat:hover{transform:translateY(-4px);border-color:rgba(255,90,31,.6);
  box-shadow:0 0 0 1px rgba(255,90,31,.3), 0 22px 46px -22px rgba(255,90,31,.55);}
.clarus-cat:hover .clarus-cat-title{color:var(--heat-ink);}
@media(max-width:991.98px){.clarus-catgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:575.98px){.clarus-catgrid{grid-template-columns:1fr 1fr;gap:.6rem;}.clarus-cat-sub{display:none;}}

/* ---- WARUM-INFRAROT-BAND (Text links,Bild rechts) ---- */
.clarus-why-band{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;margin:var(--sec-pad) 0;
}
.clarus-why-band-text p{color:var(--c-ink-soft) !important;max-width:52ch;margin:.9rem 0 1.1rem;}
.clarus-why-band-list{list-style:none;padding:0;margin:0 0 1.6rem;}
.clarus-why-band-list li{
  position:relative;padding-left:1.9rem;margin-bottom:.6rem;color:var(--c-ink);
}
.clarus-why-band-list li::before{
  content:"\f00c";font-family:"Font Awesome 5 Free","FontAwesome";font-weight:900;
  position:absolute;left:0;top:.1em;color:var(--heat);font-size:.9rem;
  filter:drop-shadow(0 0 8px rgba(255,90,31,.7));
}
.clarus-why-band-media{
  aspect-ratio:4/3.4;border-radius:var(--r-lg);background-size:cover;background-position:center;
  border:1px solid var(--c-line);
  box-shadow:0 30px 64px -34px rgba(0,0,0,.95), 0 0 44px -12px rgba(255,90,31,.5);
}
@media(max-width:991.98px){.clarus-why-band{grid-template-columns:1fr;}.clarus-why-band-media{order:-1;aspect-ratio:16/9;}}



#footer .box-headline,#footer .box .headline{
  color:#fff !important;font-weight:var(--fw-semibold) !important;text-transform:uppercase;
  font-size:.82rem !important;letter-spacing:.1em;margin-bottom:.9rem;
}
#footer .clarus-foot-cats a{color:rgba(255,255,255,.72);}
#footer .clarus-foot-cats li{margin-bottom:.45rem;}
/* Newsletter-Zeile kompakt + dunkel */
#footer .newsletter-footer-heading{font-size:1.05rem !important;text-transform:uppercase;letter-spacing:.08em;color:#fff !important;}
#footer .newsletter-footer .info{color:rgba(255,255,255,.55) !important;font-size:.85rem;}
#footer .newsletter-footer input[type="email"]{
  background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;border-radius:8px 0 0 8px !important;
}
#footer .newsletter-footer button[type="submit"]{
  background:var(--heat) !important;border-color:var(--heat) !important;color:#fff !important;
  border-radius:0 8px 8px 0 !important;box-shadow:var(--glow-sm);
}
#footer .newsletter-footer button[type="submit"]:hover{background:var(--heat2) !important;border-color:var(--heat2) !important;}

/* ============================================================
   WARM BLACK + MELT (Mockup-Feintuning,User 2026-08-10):
   1) Farbwelt von Blau-Dunkel -> warmes Schwarz wie im Screenshot
   2) Bilder VERSCHMELZEN mit den Flaechen (Bloom + Rand-Vignette)
   3) Kaufbox in Scan-Reihenfolge (CTA zuerst,Zubehoer einklappbar)
   4) LEISTUNG-Filter in der Kategorie-Sidebar
   ============================================================ */

/* ---- 1) Token-Retune: warmes Schwarz statt Blau-Navy ---- */

html,body,#main-wrapper{background:#0b0a09 !important;}
body::before{
  background:
    radial-gradient(1200px 700px at 22% 6%, rgba(255,96,36,.10), transparent 60%),
    radial-gradient(1300px 850px at 82% 102%, rgba(255,80,28,.09), transparent 62%),
    linear-gradient(180deg,#110d0a 0%, #0b0a09 48%, #080706 100%) !important;
}
/* Header/Nav/Footer auf warmes Schwarz */
#header-top-bar,.header-top-bar,#header,header .navbar,#jtl-nav-wrapper,.navbar,.main-navbar,.mega-menu,.dropdown-menu,.nav-wrapper{
  background-color:#0e0c0a !important;border-color:#241d16 !important;
}
html body #jtl-nav-wrapper{background:#0e0c0a !important;}
#footer{background:#080706 !important;}
/* Karten/Flaechen: warme Gradients statt der alten Blau-Toene */
.clarus-card,.productbox,.productbox.productbox-hover{
  background:linear-gradient(165deg,#17120e 0%,#100d0b 100%) !important;border-color:var(--c-line) !important;
}
.productbox.productbox-hover .productbox-inner::before{background-color:#14100d !important;}
.product-info-inner{background:linear-gradient(168deg,#17120e,#0f0c0a) !important;}
.clarus-card-img,.productbox-image,.productbox-image .inner,.square-image .inner,.square .inner,.productbox .square .inner{
  background:linear-gradient(160deg,#1c1510 0%,#141110 55%,#190f08 100%) !important;
}
/* Zweites Hover-Bild bleibt transparent (sonst verdeckt es Bild 1)! */
.productbox .second-wrapper,.productbox .second-wrapper .inner{background:transparent !important;}
.clarus-mc-thumb,.clarus-set-thumb,.clarus-kf-reco-img,.cart-items-image,.clarus-acc-thumb{background:#1d1814 !important;border-color:var(--c-line) !important;}
#gallery .gallery-with-action-main,.product-thumbnails .square-image{background:transparent !important;}
.clarus-hero-stat{background:rgba(13,11,9,.66);}
.consent-banner,#consent-banner{background:#151210 !important;}

/* ---- 2) BILDER VERSCHMELZEN: Bloom (screen) + Rand-Vignette ---- */
/* Listing-/Karten-Bilder: ::before = warmer Licht-Bloom,::after = Vignette
   in der Kartenfarbe -> Fotokanten laufen in die Flaeche aus. */
.productbox .square-image .inner::before,.clarus-card-img::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(58% 44% at 50% 60%, rgba(255,122,48,.16), transparent 72%);
  mix-blend-mode:screen;
}
.productbox .square-image .inner::after,.clarus-card-img::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(142% 142% at 50% 50%, transparent 52%, #14100c 98%) !important;
  mix-blend-mode:normal !important;
}
/* second-wrapper traegt KEINE Overlays (liegt ueber Bild 1) */
.productbox .second-wrapper .inner::before,.productbox .second-wrapper .inner::after{content:none !important;background:none !important;}
/* Detail-Galerie: grosse,weiche Vignette in Seitenfarbe */
#gallery .gallery-with-action-main::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(125% 125% at 50% 48%, transparent 55%, #0b0a09 100%) !important;
  mix-blend-mode:normal !important;
}
/* Thumbnails ebenfalls einschmelzen */
.product-thumbnails .square-image .inner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(150% 150% at 50% 50%, transparent 55%, #0f0c0a 100%);
}
/* Beschreibungs-Bild (gp-desc): Kanten in den Hintergrund auslaufen lassen */
.gp-desc::before{
  border:none !important;border-radius:18px;
  box-shadow:inset 0 0 70px 30px #0b0a09, 0 30px 62px -32px rgba(0,0,0,.9), 0 0 40px -12px rgba(255,90,31,.35) !important;
}
/* Warum-Band-Bild + Statement-Band ebenfalls weich einfassen */
.clarus-why-band-media{border:none !important;box-shadow:inset 0 0 70px 30px #0b0a09, 0 30px 64px -34px rgba(0,0,0,.95), 0 0 44px -12px rgba(255,90,31,.4);}
.clarus-band{border-color:#241d16 !important;}
.clarus-band::before{
  background:
    radial-gradient(700px 420px at 82% 88%, rgba(255,90,31,.34), transparent 64%),
    linear-gradient(90deg, rgba(8,7,6,.92) 0%, rgba(8,7,6,.55) 55%, rgba(8,7,6,.22) 100%),
    radial-gradient(130% 130% at 50% 50%, transparent 60%, rgba(8,7,6,.9) 100%) !important;
}
/* Hero: Vignette unten in Seitenfarbe (fliessender Uebergang) */
.clarus-hero-overlay{
  background:
    radial-gradient(900px 520px at 18% 78%, rgba(255,90,31,.30), transparent 62%),
    linear-gradient(90deg, rgba(8,7,6,.9) 0%, rgba(8,7,6,.55) 46%, rgba(8,7,6,.16) 100%),
    linear-gradient(0deg, #0b0a09 0%, rgba(11,10,9,0) 38%) !important;
}
.clarus-cat-scrim{
  background:linear-gradient(0deg, rgba(8,7,6,.94) 0%, rgba(8,7,6,.28) 48%, rgba(8,7,6,.05) 100%) !important;
}

/* ---- 3) KAUFBOX: Scan-Reihenfolge ---- */
/* Schlanker Konfigurator-Link (ersetzt die grosse CTA-Box) */
.clarus-kf-link{
  display:flex;align-items:center;gap:.6rem;margin:.95rem 0 0;padding:.62rem .9rem;
  border:1px dashed rgba(255,90,31,.42);border-radius:10px;
  color:var(--c-ink-soft) !important;font-size:.85rem;transition:all .2s var(--ease);
}
.clarus-kf-link strong{color:var(--heat-ink);}
.clarus-kf-link i:first-child{color:var(--heat);}
.clarus-kf-link i:last-child{margin-left:auto;color:var(--heat);transition:transform .2s;}
.clarus-kf-link:hover{border-color:var(--heat);background:rgba(255,90,31,.09);color:#fff !important;text-decoration:none;}
.clarus-kf-link:hover i:last-child{transform:translateX(3px);}
/* Zubehoer als <details> — eingeklappt,entlastet die Kaufbox */
details.clarus-acc{margin-top:.9rem;padding:0 !important;background:transparent !important;border:none !important;}
details.clarus-acc > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;
  padding:.66rem .9rem;border:1px solid var(--c-line);border-radius:10px;
  color:var(--c-ink) !important;font-weight:var(--fw-semibold);font-size:.87rem;
  text-transform:none !important;letter-spacing:0 !important;margin:0 !important;
  transition:border-color .2s var(--ease);
}
details.clarus-acc > summary::-webkit-details-marker{display:none;}
details.clarus-acc > summary > .fa-plus-circle{color:var(--heat);}
.clarus-acc-count{
  background:var(--heat);color:#fff;border-radius:999px;padding:.02rem .55rem;
  font-size:.74rem;box-shadow:var(--glow-sm);
}
.clarus-acc-chev{margin-left:auto;color:var(--c-mut);transition:transform .2s;font-size:.8rem;}
details.clarus-acc[open] > summary{border-color:rgba(255,90,31,.5);border-radius:10px 10px 0 0;}
details.clarus-acc[open] .clarus-acc-chev{transform:rotate(180deg);}
details.clarus-acc[open]{border:none !important;}
details.clarus-acc[open] > .clarus-acc-row{
  border:1px solid var(--c-line);border-top:none;margin:0;
}
details.clarus-acc .clarus-acc-row{background:var(--c-bg-soft);}
details.clarus-acc .clarus-acc-row:last-child{border-radius:0 0 10px 10px;}
/* Set-Karte etwas kompakter unter der Kaufzeile */
.clarus-set-card{margin-top:.9rem !important;}

/* ---- 4) LEISTUNG-Filter (Sidebar) ---- */
.clarus-power-filter{background:transparent !important;border:none !important;}
.clarus-pf-head{
  color:var(--heat-ink) !important;text-transform:uppercase !important;
  font-size:.78rem !important;letter-spacing:.12em !important;font-weight:var(--fw-semibold) !important;
  border-top:1px solid var(--c-line);padding-top:1rem;margin-top:.6rem;
}
.clarus-pf-list{list-style:none;margin:.45rem 0 0;padding:0;}
.clarus-pf-list li{margin:.1rem 0;}
.clarus-pf-list label{
  display:flex;align-items:center;gap:.55rem;cursor:pointer;margin:0;
  color:var(--c-ink-soft);font-size:.88rem;font-weight:var(--fw-normal);
  padding:.34rem .4rem;border-radius:7px;transition:background .15s,color .15s;
}
.clarus-pf-list label:hover{color:#fff;background:var(--c-fill);}
.clarus-pf-list input{accent-color:var(--heat);width:15px;height:15px;flex:0 0 auto;}
.clarus-pf-list em{margin-left:auto;font-style:normal;color:var(--c-mut);font-size:.78rem;}

/* ============================================================
   FEINSCHLIFF 3 (User-Feedback 2026-08-10):
   1) Beschreibungsbild ECHT verschmelzen (CSS-Maske) + neues Bild
   2) H2-Balken in der Beschreibung unter der GANZEN Ueberschrift
   3) Sidebar/Filter entkernt wie Mockup (keine Balken,keine Boxen)
   4) Kategorie: kurzes Intro oben,langer Text unten
   ============================================================ */

/* ---- 1) Beschreibungsbild: Kanten laufen per Maske in den Hintergrund ---- */
.tab-content{background:transparent !important;border:none !important;box-shadow:none !important;}
.gp-desc::before{
  background:url('/bilder/inferno/kueche-essen.jpg') center/cover no-repeat !important;
  border:none !important;border-radius:0 !important;box-shadow:none !important;
  -webkit-mask-image:radial-gradient(80% 80% at 50% 50%, #000 50%, transparent 98%);
  mask-image:radial-gradient(80% 80% at 50% 50%, #000 50%, transparent 98%);
  width:min(52%,580px);aspect-ratio:5/4;
  margin:-.5rem -1rem 1rem 1.4rem;
}
@media(max-width:767.98px){.gp-desc::before{width:100%;margin:0 0 1rem;}}

/* ---- 2) H2-Balken unter der ganzen Ueberschrift ---- */
.gp-desc h2{display:table;}
.gp-desc h2::after{width:100% !important;}

/* ---- 3) Sidebar wie Mockup: nur Text + orange Akzente,NICHTS kaestchenhaft ---- */
#sidepanel_left,#sidepanel_left .box,#sidepanel_left [class*="box-filter"],#sidepanel_left .box-categorie,#sidepanel_left [id^="sidebox"]{
  background:transparent !important;background-image:none !important;
  border:none !important;box-shadow:none !important;
}
#sidepanel_left{padding:0 .25rem !important;border-radius:0 !important;}
#sidepanel_left li,#sidepanel_left ul,#sidepanel_left .nav-item{
  border:none !important;background:transparent !important;box-shadow:none !important;
}
#sidepanel_left li::before,#sidepanel_left li::after,#sidepanel_left .nav-link::before,#sidepanel_left .nav-link::after{
  content:none !important;display:none !important;
}
#sidepanel_left .nav-link,#sidepanel_left a{
  border:none !important;box-shadow:none !important;background:transparent !important;
  padding:.3rem .2rem !important;color:var(--c-ink-soft) !important;
}
#sidepanel_left .nav-link:hover,#sidepanel_left a:hover{
  background:transparent !important;color:var(--heat) !important;
}
#sidepanel_left .active > .nav-link,#sidepanel_left .nav-link.active,#sidepanel_left li.active > a,#sidepanel_left .nav-item.active > .nav-link{
  color:var(--heat) !important;background:transparent !important;
  font-weight:var(--fw-semibold) !important;border:none !important;
}
#sidepanel_left .btn-filter-box{border:none !important;background:transparent !important;padding-left:.2rem !important;}
/* Checkboxen: dunkles Quadrat,orange wenn aktiv (Mockup) */
#sidepanel_left .custom-control-label::before{
  border-radius:4px !important;background:#17120e !important;border:1px solid #3a3026 !important;
}
#sidepanel_left .custom-control-input:checked ~ .custom-control-label::before{
  background:var(--heat) !important;border-color:var(--heat) !important;
}
/* Preis-Slider dezent (kein Balken-Look) */
#sidepanel_left .noUi-connect{box-shadow:none !important;}

/* ---- 4) Kategorie: Intro kurz oben,langer Text unten ---- */
#result-wrapper > .desc{
  order:99 !important;border-top:1px solid var(--c-line) !important;border-bottom:none !important;
  padding:1.8rem 0 0 !important;margin-top:1.6rem !important;
}
.clarus-cat-intro{
  color:var(--c-mut) !important;max-width:72ch;margin:.2rem 0 1.3rem !important;
  font-size:.95rem;line-height:1.65;
  display:-webkit-box !important;-webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;overflow:hidden !important;
}

/* ============================================================
   BESCHREIBUNGS-PANEL (New-Style-Mockup,rot markiert):
   neutrales Dunkelgrau (KEIN Braun),Bild rechts buendig,langer horizontaler Fade Bild -> Panelflaeche.
   ============================================================ */
.tab-content{
  background:#181818 !important;
  border:1px solid rgba(255,255,255,.08) !important;border-radius:14px !important;
  padding:clamp(1.4rem,2.5vw,2.1rem) !important;overflow:hidden !important;
  box-shadow:none !important;
}
.nav-tabs{border-bottom:1px solid rgba(255,255,255,.08) !important;margin-bottom:1rem;}
.gp-desc::before{
  content:"" !important;float:right !important;
  background:url('/bilder/inferno/hero-wohnzimmer-led.jpg') center/cover no-repeat !important;
  width:min(46%,560px) !important;aspect-ratio:4/3 !important;
  border:none !important;box-shadow:none !important;
  border-radius:0 14px 0 0 !important;
  margin:calc(-1 * clamp(1.4rem,2.5vw,2.1rem)) calc(-1 * clamp(1.4rem,2.5vw,2.1rem)) 1.2rem 1.6rem !important;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%) !important;
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%) !important;
}
@media(max-width:767.98px){
  .gp-desc::before{
    float:none !important;
    width:calc(100% + 2 * clamp(1.4rem,2.5vw,2.1rem)) !important;
    margin:calc(-1 * clamp(1.4rem,2.5vw,2.1rem)) calc(-1 * clamp(1.4rem,2.5vw,2.1rem)) 1rem !important;
    border-radius:14px 14px 0 0 !important;
    -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent 100%) !important;
    mask-image:linear-gradient(to bottom, #000 55%, transparent 100%) !important;
  }
}
/* Panel-Innenleben auf das neutrale Grau abstimmen.
   Zell-Hintergruende OPAK + hohe Spezifitaet: das Inline-<style> der
   WaWi-Beschreibung (helle Tabelle) darf nie wieder durchschlagen. */
.tab-content .gp-desc table,.tab-content .gp-desc .gp-specs{
  background:#181818 !important;border-color:rgba(255,255,255,.1) !important;
}
.tab-content .gp-desc th{
  background:rgba(255,90,31,.14) !important;color:#fff !important;
  border-color:rgba(255,255,255,.08) !important;
}
.tab-content .gp-desc td{
  background:#1c1c1c !important;color:var(--c-ink) !important;
  border-color:rgba(255,255,255,.08) !important;
}
.tab-content .gp-desc table tr td:first-child,.tab-content .gp-desc .gp-specs tr td:first-child{
  background:#222222 !important;color:var(--c-mut) !important;
}
.tab-content .gp-desc tbody tr:nth-child(even) td:not(:first-child){background:#1f1f1f !important;}
.tab-content .gp-desc .gp-box{background:#1e1e1e !important;}
.tab-content .gp-desc .gp-box *{color:var(--c-ink) !important;}

/* Galerie: aktives Thumbnail ORANGE statt NOVA-Gelb (Border UND Outline) */
.product-thumbnails .slick-current .square-image,.product-thumbnails .square-image:hover,.product-thumbnails .slick-current,.product-thumbnails .slick-slide:focus,#gallery_preview .slick-current .square-image,#gallery_preview .slick-current{
  border-color:var(--heat) !important;outline-color:var(--heat) !important;
  box-shadow:0 0 0 1px rgba(255,90,31,.35) !important;
}

/* Streunender Slick-Pfeil oben links: Pfeile brauchen einen positionierten
   Vorfahren,sonst ankern sie am Dokument; Thumbnail-Pfeile ganz aus. */
#gallery,#image_wrapper,.product-gallery,.gallery-with-action{position:relative !important;}
.product-thumbnails .slick-arrow,#gallery_preview .slick-arrow{display:none !important;}

/* ============================================================
   GLOBAL: NEUTRALE MOCKUP-FARBWELT (User 2026-08-10,final):
   neutrales Schwarz-Grau statt Braun. Kacheln = flache,fast
   hintergrundgleiche Flaechen mit feinem hellen Rahmen —
   Definition durch Linien,nicht durch Flaechenkontrast.
   ============================================================ */

html,body,#main-wrapper{background:#0d0c0b !important;}
body::before{
  background:
    radial-gradient(1100px 650px at 24% 4%, rgba(255,96,36,.07), transparent 60%),
    radial-gradient(1200px 800px at 82% 104%, rgba(255,80,28,.06), transparent 62%),
    linear-gradient(180deg,#12100e 0%, #0d0c0b 46%, #0a0908 100%) !important;
}
/* Header / Topbar / Nav / Dropdowns / Footer */
#header-top-bar,.header-top-bar,#header,header .navbar,#jtl-nav-wrapper,.navbar,.main-navbar,.mega-menu,.dropdown-menu,.nav-wrapper{
  background-color:#0f0e0d !important;border-color:#221f1c !important;
}
html body #jtl-nav-wrapper{background:#0f0e0d !important;}
#footer{background:#0a0908 !important;}
/* Kacheln/Karten: FLACH,fast hintergrundgleich,feiner heller Rahmen */
.clarus-card,.productbox,.productbox.productbox-hover{
  background:#151312 !important;border:1px solid rgba(255,255,255,.07) !important;
}
.productbox.productbox-hover .productbox-inner::before{background-color:#151312 !important;}
.clarus-card-img,.productbox-image,.productbox-image .inner,.square-image .inner,.square .inner,.productbox .square .inner{
  background:#151312 !important;
}
.productbox .second-wrapper,.productbox .second-wrapper .inner{background:transparent !important;}
.productbox .square-image .inner::after,.clarus-card-img::after{
  background:radial-gradient(142% 142% at 50% 50%, transparent 55%, #151312 99%) !important;
}
/* Kaufbox + kleine Flaechen neutral */
.product-info-inner{background:#151413 !important;border:1px solid rgba(255,255,255,.07) !important;}
.clarus-mc-thumb,.clarus-set-thumb,.clarus-kf-reco-img,.cart-items-image,.clarus-acc-thumb{background:#1c1a18 !important;border-color:#26231f !important;}
.clarus-set-card{background:#161414 !important;}
.clarus-kf-result,.clarus-kf-pv-out{background:#151413 !important;}
/* Hero-Chips / Scrims / Band neutral */
.clarus-hero-stat{background:rgba(15,14,13,.68);}
.clarus-cat-scrim{
  background:linear-gradient(0deg, rgba(10,9,8,.94) 0%, rgba(10,9,8,.28) 48%, rgba(10,9,8,.05) 100%) !important;
}
.clarus-hero-overlay{
  background:
    radial-gradient(900px 520px at 18% 78%, rgba(255,90,31,.28), transparent 62%),
    linear-gradient(90deg, rgba(10,9,8,.9) 0%, rgba(10,9,8,.55) 46%, rgba(10,9,8,.16) 100%),
    linear-gradient(0deg, #0d0c0b 0%, rgba(13,12,11,0) 38%) !important;
}
.clarus-band{border-color:#221f1c !important;}
.clarus-band::before{
  background:
    radial-gradient(700px 420px at 82% 88%, rgba(255,90,31,.3), transparent 64%),
    linear-gradient(90deg, rgba(10,9,8,.92) 0%, rgba(10,9,8,.55) 55%, rgba(10,9,8,.22) 100%),
    radial-gradient(130% 130% at 50% 50%, transparent 60%, rgba(10,9,8,.9) 100%) !important;
}
.clarus-why-band-media{box-shadow:inset 0 0 70px 30px #0d0c0b, 0 30px 64px -34px rgba(0,0,0,.95), 0 0 44px -12px rgba(255,90,31,.35) !important;}
/* Galerie-Vignette auf neuen Seitenton */
#gallery .gallery-with-action-main::after{
  background:radial-gradient(125% 125% at 50% 48%, transparent 55%, #0d0c0b 100%) !important;
}
/* Drawer / Consent neutral */
.clarus-cart-drawer{background:#141312 !important;}
.consent-banner,#consent-banner{background:#151312 !important;}

/* ============================================================
   MOCKUP-TRANSFER (User 2026-08-13): Service-Topbar,schlanke
   USP-Leiste mit Linien-Icons,Trust-Leiste ueber dem Footer.
   ============================================================ */

/* ---- 1) SERVICE-TOPBAR ganz oben (rot -> orange -> gelb) ---- */
#header-top-bar{
  background:linear-gradient(90deg,#150c07 0%,#1c0f08 50%,#150c07 100%) !important;
  border-bottom:0 !important;position:relative;
}
#header-top-bar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,#c9340a 0%,#f0560a 34%,#f5a11b 62%,#ffd489 80%,#c9340a 100%);
  opacity:.9;
}
#header-top-bar>.container-fluid{
  flex-direction:row !important;justify-content:space-between !important;align-items:center;
}
.clarus-topbar-usp{
  display:flex;align-items:center;flex:1 1 auto;
  gap:clamp(1rem,3.2vw,3rem);list-style:none;margin:0;padding:.3rem 0;
}
.clarus-topbar-usp li{display:flex;align-items:center;gap:.55rem;white-space:nowrap;}
.clarus-topbar-usp span{
  font-size:.78rem !important;letter-spacing:.015em !important;text-transform:none !important;
  color:#c7bfb9;line-height:1.2;
}
.clarus-topbar-usp b{color:#fff;font-weight:600;}
.clarus-topbar-usp svg{
  width:17px;height:17px;flex:0 0 17px;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.clarus-topbar-usp li:nth-child(1) svg{stroke:#ff5a1f;}
.clarus-topbar-usp li:nth-child(2) svg{stroke:#ff8f3d;}
.clarus-topbar-usp li:nth-child(3) svg{stroke:#f5bb45;}
#header-top-bar .topbar-main{flex:0 0 auto;}
/* Mobil: Topbar sichtbar lassen,aber nur die Service-USPs zeigen */
@media(max-width:991.98px){
  #header-top-bar.d-none{display:flex !important;}
  #header-top-bar .topbar-main,#header-top-bar .topbar-note{display:none !important;}
  .clarus-topbar-usp{justify-content:center;gap:1.15rem;}
  .clarus-topbar-usp li:nth-child(3){display:none;}
  .clarus-topbar-usp span{font-size:.7rem !important;}
}
@media(max-width:420px){
  .clarus-topbar-usp li:nth-child(2){display:none;}
}

/* ---- 1b) HERO-SCRIM: minimal halten ----------------------------------
   Die Headline-Zone des Banners liegt bereits bei ~18/255 Helligkeit,ein
   starker Schleier wuerde nur die warmen Wandtoene plattdruecken. Deshalb
   links nur ein leichter Abdunkler,rechts (Paneel) GAR NICHTS - und keine
   aufhellende Lage,die das Motiv milchig machen wuerde. */
.clarus-hero-overlay{
  background:
    linear-gradient(90deg, rgba(8,7,6,.58) 0%, rgba(8,7,6,.30) 34%, rgba(8,7,6,.05) 62%, rgba(8,7,6,0) 100%),
    linear-gradient(0deg, rgba(13,12,11,.92) 0%, rgba(13,12,11,0) 24%) !important;
}
/* Schmale Viewports beschneiden seitlich - Bildausschnitt aufs Paneel ziehen */
@media(max-width:900px){
  .clarus-hero{background-position:72% center !important;}
}

/* ---- 2) USP-LEISTE: schlank,Linien-Icons statt Kacheln ---- */
.clarus-hero{margin-bottom:0 !important;}
.clarus-usp{
  padding:0 !important;margin:0 !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  background:linear-gradient(180deg,rgba(255,138,61,.05),rgba(255,138,61,0) 76%);
}
.clarus-usp-inner{padding:.8rem 0 !important;gap:.4rem !important;}
.clarus-usp-item{gap:.7rem !important;padding:.1rem .4rem !important;position:relative;}
.clarus-usp-item+.clarus-usp-item::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:28px;background:rgba(255,255,255,.09);
}
.clarus-usp-ico{
  width:auto !important;height:auto !important;border-radius:0 !important;
  background:none !important;box-shadow:none !important;
}
.clarus-usp-ico svg{
  width:27px;height:27px;display:block;fill:none;stroke:#ff7a2f;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.clarus-usp-item:hover .clarus-usp-ico svg{stroke:#ff9a52;}
.clarus-usp-ico svg,.clarus-usp-txt b,.clarus-usp-txt span{transition:color .2s ease,stroke .2s ease;}
.clarus-usp-txt b{font-size:.88rem !important;letter-spacing:.004em;}
.clarus-usp-txt span{font-size:.755rem !important;color:#8e8884 !important;}
@media(max-width:991.98px){
  .clarus-usp-inner{padding:.7rem 0 !important;row-gap:.55rem !important;}
  .clarus-usp-item:nth-child(3)::before{display:none;}
}
@media(max-width:575.98px){
  .clarus-usp-ico svg{width:23px;height:23px;}
  .clarus-usp-txt b{font-size:.8rem !important;}
}

/* ---- 3) TRUST-LEISTE ueber dem Footer ---- */
.clarus-trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  padding:1.5rem 0;margin-top:calc(var(--sec-pad) * -.35);
  border-top:1px solid rgba(255,255,255,.07);
}
.clarus-trust-item{display:flex;align-items:center;justify-content:center;gap:.8rem;padding:.15rem .4rem;}
.clarus-trust-ico svg{
  width:26px;height:26px;display:block;fill:none;stroke:#ff7a2f;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.clarus-trust-txt b{display:block;color:var(--c-ink);font-weight:var(--fw-semibold);font-size:.86rem;line-height:1.25;}
.clarus-trust-txt span{color:#8e8884;font-size:.75rem;}
@media(max-width:991.98px){.clarus-trust{grid-template-columns:repeat(2,1fr);row-gap:1.2rem;}}
@media(max-width:420px){.clarus-trust{grid-template-columns:1fr;}.clarus-trust-item{justify-content:flex-start;}}

/* ============================================================
   KORREKTUREN (User 2026-08-13): Topbar-Hover,Filter-Hoehe,Navigation
   ============================================================ */

/* ---- A) HOVER-BUG: schwarz auf schwarz ----------------------------------
   Zeile 180/229 stammen aus dem alten HELLEN Clarus: :hover setzte #000.
   Auf dunklem Grund war der Text damit unlesbar. */
#header-top-bar a:not(.btn):hover,.topbar-wrapper a:not(.btn):hover,#header-top-bar .nav-link:hover,#shop-nav .nav-link:hover,#shop-nav .nav-link:hover .fas,#shop-nav .nav-link:hover .far{
  color:#ffb066 !important;
}
#header-top-bar a:not(.btn){transition:color .15s ease;}

/* ---- B) FILTER-SPALTE: vollstaendig zeigen,kein Innen-Scroll ----------
   position:static hatte das Mitscrollen abgeschaltet und den sticky-Block
   weiter oben ueberstimmt. Sticky bleibt,nur der Innen-Scroll ist raus. */
@media(min-width:992px){
  #sidepanel_left{
    position:sticky !important;
    top:215px !important;
    max-height:none !important;
    overflow:visible !important;
    align-self:flex-start;
  }
}

/* ---- B2) ARTIKELBESCHREIBUNG: Rahmen erst ab "Technische Eigenschaften"
   Der Tab-Container trug Rahmen,Radius und ein aufgehelltes Grau um den
   GESAMTEN Text. Der Fliesstext steht jetzt frei auf dem Seitenschwarz;
   den Kasten bekommt nur noch der technische Teil. Den Wrapper .gp-tech
   setzt clarus.js,weil die WaWi die Bloecke flach ausliefert. */
#tab-content-product-tabs{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.gp-desc .gp-tech{
  background:var(--c-surf);
  border:1px solid var(--c-line);
  border-radius:14px;
  padding:1.5rem 1.6rem;
  margin-top:2.2rem;
}
.gp-desc .gp-tech > *:first-child{margin-top:0;}
.gp-desc .gp-tech > *:last-child{margin-bottom:0;}

/* ---- C) HAUPTNAVIGATION: warm statt plump weiss-auf-schwarz ------------ */
#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link{
  position:relative;
  font-size:.82rem !important;
  font-weight:600 !important;
  letter-spacing:.11em !important;
  text-transform:uppercase;
  color:#ded7d1 !important;
  padding:.85rem 1.15rem !important;
  border:0 !important;
  border-radius:8px 8px 0 0;
  background:transparent !important;
  transition:color .18s ease, background-color .18s ease;
}
/* Glutlinie waechst aus der Mitte */
#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link::before{
  content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;
  background:linear-gradient(90deg,#c9340a,#f0560a 40%,#f5a11b 75%,#ffd489);
  border-radius:2px;opacity:0;
  transition:left .24s var(--ease,ease), right .24s var(--ease,ease), opacity .18s ease;
}
#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link:hover,#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link:focus-visible,#jtl-nav-wrapper #mainNavigation .navbar-nav > li.active > .nav-link,#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link.show{
  color:#fff !important;
  background:linear-gradient(180deg,rgba(255,138,61,.14),rgba(255,138,61,0)) !important;
}
#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link:hover::before,#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link:focus-visible::before,#jtl-nav-wrapper #mainNavigation .navbar-nav > li.active > .nav-link::before,#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link.show::before{
  left:.9rem;right:.9rem;opacity:1;
  box-shadow:0 0 12px rgba(255,120,40,.65);
}
/* NOVA faerbt das Label in einem inneren span hart dunkel -> mitziehen */
#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link span,#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link i{color:inherit !important;}
/* Dropdown-Pfeil dezent mitfaerben */
#jtl-nav-wrapper #mainNavigation .navbar-nav > li.dropdown > .nav-link::after{
  color:currentColor !important;border-top-color:currentColor !important;opacity:.7;
}

/* ---- D) TOUCH-ZIELE / MOBILE FEINSCHLIFF -------------------------------
   Messung bei 375 px: Burger nur 19x23 px,dazu 11 Bedienelemente unter
   36 px. Empfohlenes Minimum sind 44 px Antippflaeche. */
@media(max-width:991.98px){
  #burger-menu,
  #jtl-nav-wrapper .nav-icons > li > a,
  #jtl-nav-wrapper .nav-right a,
  #jtl-nav-wrapper [class*="-icon-dropdown"] > .nav-link,
  .productbox-quick-actions .btn,
  .pagination .page-link{
    min-width:44px;min-height:44px;
    display:inline-flex !important;align-items:center;justify-content:center;
  }
  #burger-menu{margin-left:-.35rem;}
  /* Filter-Schalter und Sortierung bequem antippbar */
  .productlist-filter-headline,.btn-filter-box,#sidepanel_left .nav-link,#sidepanel_left .custom-control-label{min-height:40px;display:flex;align-items:center;}
}
/* Zweiter Service-Punkt passt auch auf 375 px noch daneben */
@media(max-width:420px){
  .clarus-topbar-usp li:nth-child(2){display:flex;}
  .clarus-topbar-usp{gap:.85rem;}
  .clarus-topbar-usp span{font-size:.66rem !important;}
}
@media(max-width:340px){
  .clarus-topbar-usp li:nth-child(2){display:none;}
}

/* ---- E) KACHEL-HOVER: kein ueberhaengender Rahmen ----------------------
   NOVA laesst die Kachel beim Hover wachsen: .productbox-inner::before
   dehnt sich auf -1rem nach allen Seiten,und .productbox-inner.pos-abs
   wechselt auf position:absolute,damit .productbox-onhover darunter
   aufklappen kann. Ist dieser Bereich leer,sieht man nur einen Rahmen,der unten uebersteht (Kundenmeldung LF18,IR4,IR6). Clarus hat mit
   Anheben + Schatten + Randfarbe bereits ein eigenes Hover-Feedback,deshalb wird NOVAs Groessenaenderung stillgelegt. */
.productbox.productbox-hover:hover .productbox-inner::before,.productbox.productbox-hover:focus .productbox-inner::before,.productbox.productbox-hover.focus .productbox-inner::before{
  left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;
  box-shadow:none !important;
}
.productbox.productbox-hover.productbox-column:hover .productbox-inner.pos-abs,.productbox.productbox-hover.productbox-column:focus .productbox-inner.pos-abs,.productbox.productbox-hover.productbox-column.focus .productbox-inner.pos-abs{
  position:static !important;
}
/* Aufklapp-Inhalte duerfen die Kachelhoehe nicht veraendern */
.productbox.productbox-hover.productbox-column:hover .productbox-onhover,.productbox.productbox-hover.productbox-column:focus .productbox-onhover,.productbox.productbox-hover.productbox-column.focus .productbox-onhover{
  display:block;
}
.productbox.productbox-hover .productbox-quick-actions.productbox-onhover{
  position:absolute;top:.75rem;right:.75rem;left:auto;z-index:3;
  display:flex !important;opacity:1 !important;
}
.productbox.productbox-hover:hover .productbox-ribbon.ribbon,.productbox.productbox-hover:focus .productbox-ribbon.ribbon,.productbox.productbox-hover.focus .productbox-ribbon.ribbon{
  top:0 !important;left:0 !important;
}

/* ============================================================
   Reduced-motion (Automatik-Browser respektieren)
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important;}
  body::before{animation:none !important;}
}

/* ============================================================
   KAUFBERATER (Assistent + Variantenvergleich)
   Loest den frueheren einstufigen Konfigurator ab. Der aeltere
   .clarus-kf-Block weiter oben liefert noch gemeinsame Bausteine
   (Preisfarben,CTA,Teaser); alles Neue steht hier und gewinnt
   per Reihenfolge. Durchgaengig Tokens statt Festwerte,damit
   Light und Dark gleichermassen tragen.
   ============================================================ */
.clarus-kf{max-width:1180px;margin:0 auto;padding:1.5rem 1rem 3.5rem;}
.clarus-kf-head{text-align:center;margin-bottom:2rem;}
.clarus-kf-head p{color:var(--c-mut);max-width:62ch;margin:0 auto;}
.clarus-kf-h2{font-size:clamp(1.15rem,1rem + .7vw,1.5rem);margin:0 0 1.1rem;}

/* ---- Schrittleiste ---- */
.clarus-kf-steps{
  display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:0 0 1.75rem;
}
.clarus-kf-step{flex:1 1 8rem;min-width:0;}
.clarus-kf-step-btn{
  width:100%;display:flex;align-items:center;gap:.55rem;text-align:left;
  padding:.6rem .7rem;border:1px solid var(--c-line);border-radius:var(--r);
  background:var(--c-bg-soft);color:var(--c-mut);font:inherit;cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.clarus-kf-step-btn:disabled{cursor:default;opacity:.55;}
.clarus-kf-step-no{
  flex:0 0 auto;width:1.6rem;height:1.6rem;border-radius:50%;
  display:grid;place-items:center;font-size:.8rem;font-weight:var(--fw-semibold);
  background:var(--c-fill);color:var(--c-mut);
}
.clarus-kf-step-title{font-size:.85rem;line-height:1.2;}
.clarus-kf-step.is-active .clarus-kf-step-btn{border-color:var(--heat);color:var(--c-ink);}
.clarus-kf-step.is-active .clarus-kf-step-no{background:var(--heat);color:#fff;}
.clarus-kf-step.is-done .clarus-kf-step-btn{color:var(--c-ink-soft);}
.clarus-kf-step.is-done .clarus-kf-step-no{background:var(--c-line2);color:var(--c-ink);}

/* ---- Zwei Spalten: Fragen + Live-Anzeige ---- */
.clarus-kf-panel{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start;}
@media(min-width:900px){.clarus-kf-panel{grid-template-columns:minmax(0,1.55fr) minmax(15rem,1fr);}}
.clarus-kf-form{
  display:flex;flex-direction:column;gap:1.6rem;
  background:var(--c-bg-soft);border:1px solid var(--c-line);
  border-radius:var(--r-lg);padding:clamp(1rem,.6rem + 1.6vw,1.75rem);
}
.clarus-kf-field{border:0;padding:0;margin:0;min-width:0;}
.clarus-kf-field legend,.clarus-kf-field > label{
  display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;
  width:100%;float:none;font-size:.95rem;font-weight:var(--fw-medium);
  color:var(--c-ink);margin-bottom:.55rem;padding:0;
}
.clarus-kf-val{color:var(--heat);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;}
.clarus-kf-note-inline{color:var(--c-mut);font-size:.8rem;margin:.5rem 0 0;line-height:1.45;}

/* ---- Auswahlkacheln ---- */
.clarus-kf-tiles{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));}
.clarus-kf-tile{
  display:flex;flex-direction:column;gap:.3rem;min-height:44px;
  padding:.8rem .85rem;text-align:left;font:inherit;cursor:pointer;
  background:var(--c-surf);color:var(--c-ink);
  border:1px solid var(--c-line);border-radius:var(--r);
  transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
}
.clarus-kf-tile:hover{border-color:var(--c-line2);}
.clarus-kf-tile.is-active{border-color:var(--heat);background:var(--c-fill);box-shadow:var(--glow-sm);}
.clarus-kf-tile-icon{width:1.5rem;height:1.5rem;color:var(--heat);}
.clarus-kf-tile-icon svg{width:100%;height:100%;display:block;}
.clarus-kf-tile-label{font-weight:var(--fw-medium);line-height:1.25;}
.clarus-kf-tile-desc{font-size:.78rem;color:var(--c-mut);line-height:1.35;}

/* ---- Segmentauswahl ---- */
.clarus-kf-seg{display:flex;flex-wrap:wrap;gap:.4rem;}
.clarus-kf-segbtn{
  flex:1 1 auto;min-width:3.2rem;min-height:44px;padding:.5rem .9rem;
  font:inherit;cursor:pointer;background:var(--c-surf);color:var(--c-ink);
  border:1px solid var(--c-line);border-radius:var(--r-pill);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.clarus-kf-segbtn.is-active{border-color:var(--heat);background:var(--c-fill);color:var(--c-ink);}

/* ---- Schieberegler ---- */
.clarus-kf-range{width:100%;height:28px;accent-color:var(--heat);cursor:pointer;background:transparent;}

/* ---- Live-Spalte ---- */
.clarus-kf-live{
  position:static;background:var(--c-surf);border:1px solid var(--c-line);
  border-radius:var(--r-lg);padding:1.25rem;
}
@media(min-width:900px){.clarus-kf-live{position:sticky;top:7rem;}}
.clarus-kf-live-label{
  display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-mut);
}
.clarus-kf-live-need .clarus-kf-need-val{display:block;font-size:2rem;line-height:1.1;margin:.2rem 0;}
.clarus-kf-live-sub{display:block;font-size:.82rem;color:var(--c-mut);}
.clarus-kf-live-reco{
  display:flex;gap:.8rem;align-items:center;margin-top:1.1rem;padding-top:1.1rem;
  border-top:1px solid var(--c-line);
}
.clarus-kf-live-reco strong{display:block;font-size:1.05rem;color:var(--c-ink);}
.clarus-kf-live-hint{margin:1rem 0 0;font-size:.75rem;color:var(--c-faint);}

/* ---- Navigation ---- */
.clarus-kf-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem;}
.clarus-kf-nav .btn{min-height:44px;padding:.65rem 1.5rem;border-radius:var(--r-sm);}
.clarus-kf-back{border:1px solid var(--c-line2);background:transparent;color:var(--c-ink);}

/* ---- Ergebnis: Kopf ---- */
.clarus-kf-result-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;
  padding:1.25rem;margin-bottom:2rem;
  background:var(--c-bg-soft);border:1px solid var(--c-line);border-radius:var(--r-lg);
}
.clarus-kf-result-head p{margin:0;flex:1 1 20rem;color:var(--c-mut);}
.clarus-kf-result-head .clarus-kf-need{
  display:flex;flex-direction:column;border:0;padding:0;margin:0;
}
.clarus-kf-need-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-mut);}
.clarus-kf-result-head .clarus-kf-need-val{
  font-size:clamp(1.8rem,1.4rem + 1.4vw,2.4rem);line-height:1.05;
}

/* ---- Vergleichstabelle ---- */
.clarus-kf-compare{margin-bottom:2.5rem;}
.clarus-kf-cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.clarus-kf-cmp{width:100%;min-width:34rem;border-collapse:separate;border-spacing:0;margin:0;}
table.clarus-kf-cmp th,table.clarus-kf-cmp td{
  padding:.7rem .85rem;vertical-align:top;text-align:left;
  border-bottom:1px solid var(--c-line);background:transparent;
}
table.clarus-kf-cmp tbody th[scope="row"]{
  width:11rem;color:var(--c-mut);font-weight:var(--fw-normal);font-size:.88rem;
}
table.clarus-kf-cmp thead th{border-bottom:1px solid var(--c-line2);vertical-align:bottom;}
table.clarus-kf-cmp thead th.is-active,table.clarus-kf-cmp td.is-active{background:var(--c-fill);}
table.clarus-kf-cmp thead th.is-active{border-bottom-color:var(--heat);}
.clarus-kf-cmp-badge{
  display:inline-block;margin-bottom:.35rem;padding:.15rem .5rem;border-radius:var(--r-pill);
  background:var(--heat);color:#fff;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
}
.clarus-kf-cmp-name{display:block;font-size:1.05rem;font-weight:var(--fw-semibold);color:var(--c-ink);}
.clarus-kf-cmp-tag{
  display:block;font-size:.76rem;font-weight:var(--fw-normal);color:var(--c-mut);line-height:1.35;
}
.clarus-kf-cmp-sub{display:block;font-size:.76rem;color:var(--c-mut);}
.clarus-kf-cmp-no{color:var(--c-faint);}
.clarus-kf-cmp-warn{display:block;font-size:.76rem;color:var(--c-warning);}
.clarus-kf-cmp-pricerow .clarus-kf-price-old{display:block;font-size:.82rem;text-decoration:line-through;}
.clarus-kf-cmp-pricerow .clarus-kf-price-new{display:block;font-size:1.15rem;font-weight:var(--fw-semibold);}
.clarus-kf-cmp-ctarow td{border-bottom:0;}
.clarus-kf-choose{
  width:100%;min-height:44px;padding:.55rem .9rem;border-radius:var(--r-sm);
  border:1px solid var(--c-line2);background:transparent;color:var(--c-ink);
}
.clarus-kf-choose.is-active{background:var(--heat);border-color:var(--heat);color:#fff;}

/* ---- Ergebnis: Zusammenstellung ---- */
.clarus-kf-detail{
  background:var(--c-surf);border:1px solid var(--c-line);border-radius:var(--r-lg);
  padding:clamp(1rem,.6rem + 1.6vw,1.75rem);margin-bottom:2.5rem;
}
.clarus-kf-detail-head p{color:var(--c-mut);margin:0 0 .5rem;}
.clarus-kf-warn{
  color:var(--c-ink);background:rgba(243,153,50,.12);border-left:3px solid var(--c-warning);
  padding:.6rem .8rem;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.88rem;
}
.clarus-kf-setswitch{
  margin:1rem 0;padding:.8rem 1rem;border:1px dashed var(--heat);border-radius:var(--r);
  background:var(--c-fill);
}
.clarus-kf-setswitch label{
  display:flex;gap:.6rem;align-items:flex-start;margin:0;cursor:pointer;font-size:.92rem;
}
.clarus-kf-setswitch input{
  margin-top:.25rem;accent-color:var(--heat);width:1.05rem;height:1.05rem;flex:0 0 auto;
}
.clarus-kf-items{list-style:none;margin:1.25rem 0;padding:0;}
.clarus-kf-item{
  display:grid;grid-template-columns:2.2rem 3.5rem minmax(0,1fr) auto;gap:.75rem;
  align-items:center;padding:.7rem 0;border-bottom:1px solid var(--c-line);
}
.clarus-kf-item-qty{font-weight:var(--fw-semibold);color:var(--c-mut);font-variant-numeric:tabular-nums;}
.clarus-kf-item .clarus-kf-reco-img{
  width:3.5rem;height:3.5rem;object-fit:contain;border:1px solid var(--c-line);
  border-radius:var(--r-sm);display:block;
}
.clarus-kf-item-info{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.clarus-kf-item-kind{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-mut);}
.clarus-kf-item-name{color:var(--c-ink);line-height:1.35;}
.clarus-kf-item-price{
  font-weight:var(--fw-semibold);white-space:nowrap;font-variant-numeric:tabular-nums;
}
@media(max-width:520px){
  .clarus-kf-item{grid-template-columns:2.2rem 3.5rem minmax(0,1fr);}
  .clarus-kf-item-price{grid-column:2 / -1;}
}
.clarus-kf-sum{border-top:1px solid var(--c-line2);padding-top:1.1rem;}
.clarus-kf-sum-row,.clarus-kf-sum-total{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;}
.clarus-kf-sum-row{color:var(--c-mut);}
.clarus-kf-sum-total{
  align-items:baseline;padding-top:.7rem;margin-top:.4rem;
  border-top:1px solid var(--c-line);font-size:1.05rem;color:var(--c-ink);
}
.clarus-kf-sum .clarus-kf-price-new{font-size:1.6rem;font-weight:var(--fw-semibold);}
.clarus-kf-sum .clarus-kf-add{width:100%;min-height:52px;margin-top:1rem;border-radius:var(--r-sm);}
.clarus-kf-sum-hint{margin:.8rem 0 0;font-size:.78rem;color:var(--c-mut);line-height:1.45;}
.clarus-kf-price-save{color:var(--c-success);font-weight:var(--fw-semibold);}

/* ---- PV-Block im Ergebnis ---- */
.clarus-kf-pv{margin:0 0 2rem;border-top:1px solid var(--c-line);padding-top:2rem;}
.clarus-kf-pv-head{margin-bottom:1.25rem;}
.clarus-kf-pv-head p{color:var(--c-mut);margin:0;}
.clarus-kf-pv-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start;}
@media(min-width:860px){.clarus-kf-pv-grid{grid-template-columns:1fr 1fr;}}
.clarus-kf-pv-form{
  display:flex;flex-direction:column;gap:1.1rem;background:var(--c-bg-soft);
  border:1px solid var(--c-line);border-radius:var(--r-lg);padding:1.4rem;
}
.clarus-kf-pv-out{
  border:1px solid var(--c-line);border-radius:var(--r-lg);padding:1.4rem;background:var(--c-surf);
}

/* ---- Simulator im Assistenten ---- */
.clarus-kf-sim:empty{display:none;}

/* ============================================================
   LED-LICHTRAHMEN-SIMULATOR
   Bewusst dunkle Buehne (Lichtwirkung braucht dunklen Grund),Rahmen und Beschriftung folgen den Clarus-Tokens.
   ============================================================ */
.clarus-lrs{
  --clarus-lrs-light:#ffb35c;
  border:1px solid var(--c-line);border-radius:var(--r-lg);
  background:var(--c-bg-soft);padding:clamp(.9rem,.6rem + 1.2vw,1.4rem);
  container-type:inline-size;
}
.clarus-lrs-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem;margin-bottom:.9rem;}
.clarus-lrs-title{margin:0;font-size:clamp(1rem,.9rem + .5vw,1.25rem);color:var(--c-ink);}
.clarus-lrs-sub{margin:.15rem 0 0;font-size:.82rem;color:var(--c-mut);}
.clarus-lrs-readout{
  margin-left:auto;display:flex;gap:1.2rem;align-items:baseline;font-variant-numeric:tabular-nums;
}
.clarus-lrs-readout b{
  display:block;font-size:1.1rem;font-weight:var(--fw-semibold);
  color:var(--clarus-lrs-light);transition:color .3s var(--ease);
}
.clarus-lrs-readout span{
  display:block;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--c-mut);
}

/* ---- Foto-Buehne ---- */
.clarus-lrs-stage{
  position:relative;overflow:hidden;border-radius:var(--r);
  /* pan-y statt none: vertikales Wischen muss die Seite scrollen. Der
     Vergleichstrenner wird horizontal gezogen und funktioniert damit weiter.
     Vorher blockierte die Buehne das Scrollen dauerhaft, obwohl das Ziehen
     nur im Vergleichsmodus ueberhaupt aktiv ist. */
  border:1px solid var(--c-line);background:#000;touch-action:pan-y;
}
.clarus-lrs-pane{position:absolute;inset:0;}
.clarus-lrs-base{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:filter .4s var(--ease);
}
/* Licht faellt mit 120 Grad nach VORN: Maskenzentrum sitzt vor dem Paneel. */
.clarus-lrs-lit,.clarus-lrs-tint{
  position:absolute;inset:0;background-size:cover;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 100% 92% at var(--mx) var(--my),
    #000 0%, rgba(0,0,0,.92) 35%, rgba(0,0,0,.5) 65%, rgba(0,0,0,.12) 100%);
  mask-image:radial-gradient(ellipse 100% 92% at var(--mx) var(--my),
    #000 0%, rgba(0,0,0,.92) 35%, rgba(0,0,0,.5) 65%, rgba(0,0,0,.12) 100%);
  transition:opacity .35s var(--ease), filter .35s var(--ease);
}
.clarus-lrs-tint{
  mix-blend-mode:multiply;pointer-events:none;transition:opacity .35s,background-color .35s;
}
.clarus-lrs-frame{
  position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;pointer-events:none;
}
.clarus-lrs-frame polygon{fill:none;stroke-linejoin:round;transition:stroke .35s,opacity .35s;}
.clarus-lrs-frame .f-halo{filter:blur(22px);}
.clarus-lrs-frame .f-outer{filter:blur(13px);}
.clarus-lrs-frame .f-mid{filter:blur(4px);}
.clarus-lrs-frame .f-core{filter:blur(1px);}
/* Polygon-genaue Abdunkelung: loescht bei 0 % den im Foto eingebackenen Schein. */
.clarus-lrs-dampsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.clarus-lrs-dampsvg polygon{
  fill:none;stroke:#241d17;stroke-linejoin:round;filter:blur(6px);transition:opacity .35s;
}
.clarus-lrs-fx{
  position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;transition:opacity .35s;
}
.clarus-lrs-damp{
  position:absolute;inset:0;pointer-events:none;transition:opacity .35s;
  background:radial-gradient(ellipse var(--dampr) at var(--cx) var(--cy),
    rgba(8,6,5,.9), rgba(8,6,5,.5) 55%, transparent 78%);
}
.clarus-lrs-pane[data-pane="b"]{clip-path:inset(0 0 0 50%);}
.clarus-lrs-divider{
  position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;z-index:6;
  background:rgba(255,255,255,.85);box-shadow:0 0 8px rgba(0,0,0,.6);cursor:ew-resize;
}
.clarus-lrs-handle{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;background:#f2ece3;color:#191512;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;
  user-select:none;box-shadow:0 2px 8px rgba(0,0,0,.55);
}
.clarus-lrs-lbl{
  position:absolute;top:.75rem;z-index:5;font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;background:rgba(0,0,0,.55);color:#fff;
  padding:.25rem .7rem;border-radius:var(--r-pill);
}
.clarus-lrs-lbl-l{left:.75rem;}
.clarus-lrs-lbl-r{right:.75rem;}
.clarus-lrs [hidden]{display:none !important;}

/* ---- Bedienung ---- */
.clarus-lrs-controls{margin-top:.9rem;display:grid;gap:.8rem;grid-template-columns:1fr;}
@container (min-width:640px){.clarus-lrs-controls{grid-template-columns:1.35fr 1fr;}}
.clarus-lrs-card{
  background:var(--c-surf);border:1px solid var(--c-line);border-radius:var(--r);padding:.9rem 1rem;
}
.clarus-lrs-card h4{
  margin:0 0 .6rem;font-size:.68rem;font-weight:var(--fw-semibold);
  letter-spacing:.14em;text-transform:uppercase;color:var(--c-mut);
}
.clarus-lrs input[type=range]{
  width:100%;height:28px;cursor:pointer;accent-color:var(--clarus-lrs-light);
}
.clarus-lrs input[type=range]:disabled{opacity:.4;cursor:not-allowed;}
.clarus-lrs-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem;}
.clarus-lrs-chip,.clarus-lrs-seg button,.clarus-lrs-compare{
  font:inherit;font-size:.8rem;min-height:38px;padding:.35rem .8rem;cursor:pointer;
  color:var(--c-ink);background:var(--c-fill);
  border:1px solid var(--c-line);border-radius:var(--r-pill);
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.clarus-lrs-chip[aria-pressed="true"],.clarus-lrs-seg button[aria-pressed="true"],.clarus-lrs-compare[aria-pressed="true"]{
  background:var(--heat);border-color:var(--heat);color:#fff;font-weight:var(--fw-medium);
}
.clarus-lrs-seg{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem;}
.clarus-lrs-compare{margin-top:.7rem;}
.clarus-lrs-modelrow{
  display:flex;align-items:center;gap:.6rem;margin:.7rem 0 0;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-mut);
}
.clarus-lrs-model{
  flex:1 1 auto;min-width:0;min-height:38px;padding:.3rem .6rem;font:inherit;font-size:.85rem;
  text-transform:none;letter-spacing:0;
  color:var(--c-ink);background:var(--c-fill);
  border:1px solid var(--c-line);border-radius:var(--r-sm);
}
.clarus-lrs-desc{margin:.7rem 0 0;font-size:.85rem;color:var(--c-mut);line-height:1.45;}
.clarus-lrs-desc b{color:var(--c-ink);font-weight:var(--fw-semibold);}
.clarus-lrs-foot{margin:.8rem 0 0;font-size:.75rem;color:var(--c-faint);line-height:1.45;}
.clarus-lrs.is-compact .clarus-lrs-foot{display:none;}

/* ---- Eingeklappte Variante (Artikelseite) ----
   Der Simulator wird erst beim Aufklappen aufgebaut,damit das grosse
   Raumfoto nicht bei jedem Seitenaufruf mitlaedt. */
.clarus-lrs-collapse{
  border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-bg-soft);
  overflow:hidden;
}
.clarus-lrs-summary{
  display:flex;align-items:center;gap:.9rem;cursor:pointer;list-style:none;
  padding:clamp(.8rem,.6rem + .6vw,1.1rem);
}
.clarus-lrs-summary::-webkit-details-marker{display:none;}
.clarus-lrs-summary:hover{background:var(--c-fill);}
.clarus-lrs-summary-icon{
  flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:50%;
  display:grid;place-items:center;font-size:1.2rem;
  background:var(--c-fill);color:var(--heat);box-shadow:var(--glow-sm);
}
.clarus-lrs-summary-text{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1 1 auto;}
.clarus-lrs-summary-text b{color:var(--c-ink);font-weight:var(--fw-semibold);}
.clarus-lrs-summary-text span{font-size:.82rem;color:var(--c-mut);line-height:1.35;}
.clarus-lrs-summary-hint{
  flex:0 0 auto;min-height:38px;display:flex;align-items:center;padding:.3rem .9rem;
  border:1px solid var(--heat);border-radius:var(--r-pill);
  color:var(--heat);font-size:.82rem;font-weight:var(--fw-medium);white-space:nowrap;
}
.clarus-lrs-collapse[open] .clarus-lrs-summary-hint{color:var(--c-mut);border-color:var(--c-line2);}
.clarus-lrs-collapse[open] .clarus-lrs-summary-hint::after{content:' schliessen';}
.clarus-lrs-collapse .clarus-lrs{border:0;border-radius:0;border-top:1px solid var(--c-line);}
@media(max-width:560px){
  .clarus-lrs-summary{flex-wrap:wrap;}
  .clarus-lrs-summary-hint{width:100%;justify-content:center;}
}

/* ============================================================
   FEINSCHLIFF 2026-08-13 (Kundenfeedback):
   Navigation,Artikelseite,Kategorie-Raster,Footer.
   Steht bewusst am Dateiende und gewinnt damit ueber die
   aelteren Bloecke,ohne sie zu zerpfluecken.
   ============================================================ */

/* ---- 1) HAUPTNAVIGATION ----
   Beim Hover erschienen zwei Balken. Ursache: am selben ::before
   haengen zwei Regeln – der orange Verlaufsbalken (Redesign,waechst
   aus der Mitte) und ein aelterer weisser border-bottom aus der
   hellen Clarus-Fassung. Dazu kam ein DRITTER Balken auf ::after,der 5 px ueber der Unterkante schwebte. Also: weissen Rand vom
   ::before nehmen,::after ganz abschalten,orange bleibt.
   Ausserdem war die Nav mit 12,3 px sehr leise fuer das wichtigste
   Bedienelement der Seite. */
header .navbar-nav > .nav-item > .nav-link::before,#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link::before{
  border-bottom:0 !important;
}
#jtl-nav-wrapper .navbar-nav > li > .nav-link::after{
  display:none !important;
}
#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link{
  font-size:.95rem !important;
  font-weight:var(--fw-semibold) !important;
  letter-spacing:.02em !important;
  padding:1.05rem 1.15rem !important;
}
/* Der Balken sass am Boden des gepolsterten Link-Kastens und damit rund
   16 px unter der Schrift – er wirkte dadurch frei schwebend und lief in
   die Unterkante der aktiven Flaeche. Jetzt sitzt er als Unterstreichung
   dicht unter dem Wort und exakt auf dessen Breite.
   NOVA baut solche Marker aus einem 6 px gelben border-bottom (#F8BF00)
   plus transform:translateX(-50%) und width:0. Reste davon haben den
   Balken nach links verschoben und links eine senkrechte Kante erzeugt –
   deshalb hier ein vollstaendiger Reset des Pseudo-Elements. */
#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link::before{
  border:0 !important;
  transform:none !important;
  width:auto !important;
  bottom:.55rem;left:1.15rem;right:1.15rem;height:3px;border-radius:3px;
}
#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link:hover::before,#jtl-nav-wrapper #mainNavigation .navbar-nav > li.active > .nav-link::before,#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link.show::before{
  left:1.15rem;right:1.15rem;
}
/* Am aktiven Punkt stand zusaetzlich eine senkrechte Kante an der linken
   Seite. Alles,was neben dem Unterstrich noch eine Kante zeichnen kann,wird hier abgeraeumt. */
#jtl-nav-wrapper #mainNavigation .navbar-nav > li::before,#jtl-nav-wrapper #mainNavigation .navbar-nav > li::after{display:none !important;}
#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link,#jtl-nav-wrapper #mainNavigation .navbar-nav > li.active > .nav-link,#jtl-nav-wrapper #mainNavigation .navbar-nav > li > .nav-link.show{
  border-left:0 !important;border-right:0 !important;box-shadow:none !important;
}

/* ---- 1a) LOGO ----
   Zeile ~1346 faerbt das Logo per filter:brightness(0) invert(1) zu einer
   weissen Silhouette – das stammt aus der Zeit,als ein dunkles Logo auf
   dunklem Grund lag. Das im Backend hinterlegte Logo bringt seine Farben
   selbst mit,der Filter muss also weg. Die Groesse bleibt. */
#shop-logo,.navbar-brand img,.logo img,#logo img{
  filter:none !important;
  /* Die Logodatei hat einen schwarzen Grund, der sich als Kasten vom
     Header abhob. "lighten" nimmt je Kanal den helleren Wert – Schwarz
     verschwindet damit im dunklen Header, Schrift und Flamme bleiben. */
  mix-blend-mode:lighten;
  /* Zeile ~1347 deckelte auf 58 px. Das Motiv fuellt die Datei aber nur zu
     rund 63 % der Hoehe (oben ~15 %, unten ~22 % leerer Rand), die
     Versalhoehe von "HEAT" landete dadurch bei ~6 px und war unlesbar.
     Der Header hat 176 px Bauhoehe, hier ist also Luft. */
  height:clamp(58px, 6.2vw, 88px) !important;
  max-height:none !important;
  width:auto !important;
}

/* ---- 1b) REITER DER ARTIKELBESCHREIBUNG ----
   Unter "Beschreibung" lagen zwei Marker: NOVAs 6 px hoher gelber
   ::after-Balken (.tab-navigation .nav-link::after) und zusaetzlich unser
   oranger border-bottom. Der gelbe wird auf Heat umgefaerbt und schlanker,der doppelte Rahmen entfaellt – ein Indikator,auf Hoehe der Grundlinie. */
.tab-navigation .nav-link::after{
  border-bottom-width:3px !important;
  border-bottom-color:var(--heat) !important;
  border-radius:3px;
}
.nav-tabs .nav-link.active,.tab-navigation .nav-tabs .nav-link.active{
  border-bottom:0 !important;
}

/* Der Prueflauf-Knopf des Kaufformulars ist als .btn gestylt und
   erschien dadurch als leeres oranges Pill ueber dem Produktbild. */
#buy_form > .js-cfg-validate{display:none !important;}
/* ---- 2) ARTIKELSEITE: Bild und Kaufbox auf gleicher Kante ----
   Ueber dem Bild sass ein oranges Pill: der Schliessen-Knopf der
   Vollbildansicht (#image_fullscreen_close in .product-detail-image-topbar).
   Er gehoert nur in den Vollbildmodus,schob aber im Normalzustand die
   Galerie gegenueber der Kaufbox nach unten. */
#image_wrapper:not(.fullscreen) .product-detail-image-topbar{display:none !important;}

/* Kaufbox: vom flachen Kasten zu einer Flaeche mit Tiefe – warmer
   Verlauf,feine Innenkante und eine Heat-Linie an der Oberkante.
   (Kein position-Wert hier: die Box ist ab 992 px sticky,und sticky
   ist bereits ein Positionierungskontext fuer das ::before.) */
.product-info-inner{
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255,90,31,.10), transparent 60%),
    linear-gradient(168deg, #1b1613 0%, #141110 46%, #0f0d0c 100%) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:var(--r-lg);
  padding:clamp(1.1rem,.7rem + 1.4vw,1.9rem) !important;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
}
.product-info-inner::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg, var(--heat), var(--heat2) 55%, transparent);
  opacity:.9;
}
/* Die Galerie bleibt bewusst ohne eigenen Rahmen: das Hauptbild wird
   vom Slick-Carousel mit berechneten Breiten gelegt,zusaetzliches
   Padding an .gallery-with-action laesst das Bild verschwinden. */

/* ---- 3) BESCHREIBUNG: Spezifikationsbalken darf nicht unters Bild ----
   Das Beitragsbild ist ein rechts gefloatetes ::before. Bloecke
   fliessen per Definition UNTER einen Float,nur ihre Textzeilen
   werden gekuerzt – deshalb lief die Box mit "160 W · 320×520 mm ·
   IP44" hinter das Bild. Ein eigener Formatierungskontext stellt sie
   daneben statt darunter.
   NICHT auf <table> anwenden: flow-root nimmt der Tabelle ihre
   Tabellenformatierung,sie schrumpft dann auf Inhaltsbreite. */
.gp-desc .gp-box,.gp-desc blockquote{display:flow-root;}
.gp-desc .gp-box{max-width:100%;}

/* ---- 4) "WARUM INFRAROT" als Gegenueberstellung ---- */
.clarus-why{
  margin-top:1.75rem;padding:1.4rem 1.5rem 1.1rem;
  border:1px solid var(--c-line);border-radius:var(--r-lg);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(255,90,31,.07), transparent 55%),
    linear-gradient(170deg,#151312,#100e0d);
}
.clarus-why-head{display:flex;flex-direction:column;gap:.15rem;margin-bottom:1rem;}
.clarus-why-kicker{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--heat);font-weight:var(--fw-semibold);
}
.clarus-why-title{
  font-size:1.15rem;font-weight:var(--fw-semibold);color:var(--c-ink);line-height:1.25;
  margin:0; /* ist jetzt eine h2 - Element-Defaults neutralisieren, Optik bleibt wie beim span */
}
.clarus-why-list{list-style:none;margin:0;padding:0;}
.clarus-why-row{
  display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:.25rem .9rem;
  align-items:start;padding:.85rem 0;border-top:1px solid var(--c-line);
}
.clarus-why-row:first-child{border-top:0;}
.clarus-why-ic{
  grid-row:1 / span 2;align-self:center;
  width:2.75rem;height:2.75rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  color:var(--heat);background:rgba(255,90,31,.10);
  border:1px solid rgba(255,90,31,.30);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),
             color .2s var(--ease),background .2s var(--ease);
}
.clarus-why-row:hover .clarus-why-ic{
  transform:scale(1.06);color:#fff;
  background:var(--heat);box-shadow:0 0 26px -4px rgba(255,90,31,.85);
}
.clarus-why-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.clarus-why-txt strong{color:var(--c-ink);font-weight:var(--fw-semibold);font-size:1rem;line-height:1.3;}
.clarus-why-sub{color:var(--c-mut);font-size:.86rem;line-height:1.5;}
.clarus-why-vs{
  grid-column:2;font-size:.76rem;color:var(--c-faint);
  padding-left:.85rem;border-left:2px solid rgba(255,90,31,.35);margin-top:.35rem;
}
@media(max-width:420px){
  .clarus-why-row{grid-template-columns:2.25rem minmax(0,1fr);}
  .clarus-why-ic{width:2.25rem;height:2.25rem;font-size:.95rem;}
}

/* ---- 5) KATEGORIE: letzte Kachel ragt nach unten heraus ----
   NOVA gibt jeder Kachel ausser der letzten margin-bottom:4rem
   (#product-list .product-wrapper:not(:last-child),clear.css).
   Die Flex-Zeile richtet sich nach der groessten Aussenhoehe,also
   nach Kachel + 60 px Abstand – und streckt die letzte,die diesen
   Abstand nicht hat,um genau diese 60 px. Gleicher Abstand fuer
   alle loest das an der Wurzel. */
#product-list .product-wrapper,#product-list .product-wrapper:not(:last-child){margin-bottom:4rem;}

/* ---- 6) FOOTER: Preisfussnote ----
   Der Satz stand ohne Rahmen frei unter den Spalten,sichtbar war
   praktisch nur der verlinkte "Versand". Jetzt eine ruhige,klar
   abgesetzte Fussnotenzeile. */
#footer .footnote-vat{
  margin-top:1.5rem;padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.10);
  text-align:center;
}
/* Sichtbar war zuletzt nur der verlinkte "Versand" – der Satz drumherum
   lief in einer Farbe,die auf dem dunklen Grund verschwand. Deshalb die
   Farbe auf dem Container UND allen Kindern setzen. */
/* #footer p traegt eine !important-Farbe – deshalb hier ebenfalls
   !important,sonst faellt der Pflichthinweis wieder ins Dunkle. */
#footer .clarus-vat-note{
  margin:0;line-height:1.55;
  font-size:.8rem !important;
  color:#b7b2ab !important;
  -webkit-text-fill-color:#b7b2ab !important;
}
#footer .clarus-vat-note a{
  color:#b7b2ab !important;text-decoration:underline;text-underline-offset:2px;
}
#footer .clarus-vat-note a:hover{color:var(--heat) !important;}

/* ---- Simulator als eigener Seitenabschnitt (Kategorie/Artikel) ----
   Auf breiten Seiten stehen Buehne und Bedienung nebeneinander,sonst
   schiebt das hohe Foto die Produktliste komplett unter die Falz.
   Bewusst @media statt @container: .clarus-lrs ist selbst der Container
   und kann sich per Container-Query nicht selbst layouten. */
.clarus-lrs-section{padding:clamp(1.5rem,1rem + 2vw,2.75rem) 0;}
@media(min-width:1100px){
  .clarus-lrs-section .clarus-lrs{
    display:grid;align-items:start;gap:0 1.2rem;
    grid-template-columns:minmax(0,1.6fr) minmax(19rem,1fr);
    grid-template-areas:"head head" "stage controls" "foot foot";
  }
  .clarus-lrs-section .clarus-lrs-head{grid-area:head;}
  .clarus-lrs-section .clarus-lrs-stage{grid-area:stage;}
  .clarus-lrs-section .clarus-lrs-controls{
    grid-area:controls;margin-top:0;grid-template-columns:1fr;
  }
  .clarus-lrs-section .clarus-lrs-foot{grid-area:foot;}
}

/* ---- PANEEL-CHECK ("Passt dieses Paneel in meinen Raum?") ----
   Eingeklappter Rahmen: clarus-lrs-collapse/-summary (Lichtrahmen-Simulator).
   Bedienelemente: clarus-kf-field/-seg/-range (Konfigurator).
   Hier nur Layout des Formulars und die Ergebnisbox mit Kennzahl. */
.clarus-pcheck-section{margin:1rem 0;}
.clarus-pcheck .clarus-lrs-summary-icon svg{width:1.2rem;height:1.2rem;display:block;}
.clarus-pcheck-body{padding:1.1rem 1.1rem 1.2rem;border-top:1px solid var(--c-line);display:grid;gap:1.1rem;}
.clarus-pcheck-form{display:grid;gap:1rem;}
.clarus-pcheck-result{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.35rem 1.1rem;align-items:center;
  border:1px solid var(--c-line2);border-left:3px solid var(--c-line2);
  border-radius:var(--r-sm,8px);padding:.9rem 1rem;color:var(--c-ink);
}
.clarus-pcheck-need{display:flex;flex-direction:column;gap:.1rem;min-width:7.5rem;}
.clarus-pcheck-need b{
  font-family:'IBM Plex Serif',Georgia,serif;font-weight:600;font-size:2rem;line-height:1.05;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--c-ink);
}
.clarus-pcheck-need > span{font-size:.72rem;color:var(--c-mut);line-height:1.35;max-width:11ch;}
.clarus-pcheck-verdict{margin:0;font-size:.92rem;line-height:1.55;}
.clarus-pcheck-verdict a{color:var(--heat-ink);text-decoration:underline;}
.clarus-pcheck-result--ok{border-left-color:var(--c-success);}
.clarus-pcheck-result--ok .clarus-pcheck-need b{color:var(--c-success);}
.clarus-pcheck-result--knapp{border-left-color:var(--c-warning);}
.clarus-pcheck-result--knapp .clarus-pcheck-need b{color:var(--c-warning);}
.clarus-pcheck-result--nein{border-left-color:var(--c-danger);}
.clarus-pcheck-result--nein .clarus-pcheck-need b{color:var(--c-danger);}
.clarus-pcheck-note{font-size:.76rem;color:var(--c-mut);margin:0;line-height:1.5;}
@media(max-width:575.98px){
  .clarus-pcheck-result{grid-template-columns:1fr;}
  .clarus-pcheck-need{flex-direction:row;align-items:baseline;gap:.6rem;min-width:0;}
  .clarus-pcheck-need > span{max-width:none;}
}

/* ============================================================
   UI-PAKET 15.08.2026 (Nutzerliste)
   ============================================================ */
/* Warum-Infrarot: Inline-SVG-Icon (Waermewellen an der Wand) dimensionieren */
.clarus-why-ic svg{width:1.15rem;height:1.15rem;display:block;}

/* Links im Fliesstext IMMER als Links erkennbar - nicht erst beim Hover.
   Gilt global fuer alle Inhaltsbereiche ausserhalb der rg-Ratgeber
   (dort regelt ratgeber.css dasselbe). */
.gp-desc a,.gp-box a,.gp-faq a,.desc a,#result-wrapper .desc a,.clarus-why-sub a,.clarus-why-more a,.clarus-acc-pop-desc a,.kf-intro a,.rg-hubintro a,.ueberuns-v1 a{
  color:var(--heat-ink) !important;text-decoration:underline !important;
  text-underline-offset:2px;text-decoration-color:rgba(255,138,61,.55);
}
.gp-desc a:hover,.gp-box a:hover,.gp-faq a:hover,.desc a:hover,.clarus-why-sub a:hover,.clarus-why-more a:hover,.kf-intro a:hover,.rg-hubintro a:hover,.ueberuns-v1 a:hover{
  color:var(--heat) !important;text-decoration-color:var(--heat);
}

/* Zubehoer "Passend dazu" praesenter: Glut-Akzent auf der Kopfzeile */
details.clarus-acc > summary{
  border-color:rgba(255,90,31,.45) !important;
  background:linear-gradient(90deg,rgba(255,90,31,.12),transparent 60%) !important;
  font-size:.92rem !important;box-shadow:var(--glow-sm);
}
details.clarus-acc > summary:hover{border-color:var(--heat) !important;}

/* Konfigurator-Seite: Glut-Hintergrund statt nackter Flaeche */
.clarus-kf{position:relative;}
.clarus-kf::before{
  /* inset seitlich 0, NICHT -18vw: absolut positionierte Kinder zaehlen zum
     Scrollbereich der Seite, der Bleed erzeugte rechts eine horizontale
     Scrollbar auf allen Breiten (bei 1440 px rund 130 px Ueberstand).
     Die Breite kommt jetzt aus den weit gestreuten Gradient-Radien. */
  content:"";position:absolute;inset:-60px 0 -40px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(880px 520px at 12% -4%,rgba(255,90,31,.16),transparent 62%),
    radial-gradient(1050px 680px at 94% 30%,rgba(255,150,60,.10),transparent 65%),
    radial-gradient(1250px 860px at 45% 108%,rgba(255,74,20,.13),transparent 62%);
}

/* Header: Logo vertikal buendig zur Suche,Suche praesenter */
header .navbar-brand{display:flex;align-items:center;padding-top:0 !important;padding-bottom:0 !important;}
/* KEINE max-width: Shop-Setting menu_search_width=0 bedeutet "volle Breite",eine Begrenzung hier hat die Suchleiste sichtbar geschrumpft (15.08.2026). */
header .main-search-wrapper{align-self:center;flex:1 1 auto;max-width:none;}

/* Logo exakt auf Suchleisten-Hoehe (48px) und vertikal mittig in derselben Zeile */
#shop-logo,header .navbar-brand img{height:48px !important;max-height:48px !important;}
header .navbar-brand{align-self:center;}
header .navbar > .container,header .navbar > .container-fluid,header .navbar .navbar-collapse{align-items:center;}

/* Rechte Icons (Konto / Wunschzettel / Warenkorb) gut lesbar */
#shop-nav .nav-link .fas,#shop-nav .nav-link .far,#shop-nav .nav-link .fab,.cart-icon-dropdown-icon{
  font-size:1.35rem !important;line-height:1;
}
#shop-nav .nav-link{
  display:flex;align-items:center;gap:.45rem;
  padding-left:.85rem !important;padding-right:.85rem !important;
}
#shop-nav .nav-link .fa-sup,#shop-nav .nav-link .cart-quantity,#shop-nav .nav-link .badge-cart{font-size:.72rem !important;}
header .main-search-wrapper .form-control{
  height:48px;font-size:1rem;
  border:1px solid rgba(255,90,31,.35) !important;background:var(--c-fill) !important;
}
header .main-search-wrapper .form-control:focus{
  border-color:var(--heat) !important;box-shadow:0 0 0 3px rgba(255,90,31,.18) !important;
}
header .main-search-wrapper .btn{height:48px;}

/* ---- BESCHREIBUNGS-RAUMSZENE (Artikelseite,Wunsch 15.08.2026) ----
   Bild laeuft von rechts schraeg in den Text und wird zur Textseite hin
   transparent. Text liegt auf eigener Ebene darueber und ist in der Breite
   begrenzt{position:relative;}

/* Raumszene rechts oben: der Text UMFLIESST sie (float + shape-outside),liegt also nie darunter - kein Schleier,kein Abdunkeln noetig. Die linke
   Kante ist schraeg und laeuft per Maske weich aus{
  float:right;width:46%;height:clamp(250px,29vw,390px);
  margin:.1rem -.5rem 1.3rem 1.6rem;
  background-size:cover;background-position:center 42%;
  pointer-events:none;
  shape-outside:polygon(13% 0,100% 0,100% 100%,1% 100%);
  shape-margin:.7rem;
  -webkit-mask-image:linear-gradient(103deg,transparent 1%,rgba(0,0,0,.3) 13%,rgba(0,0,0,.85) 27%,#000 40%);
          mask-image:linear-gradient(103deg,transparent 1%,rgba(0,0,0,.3) 13%,rgba(0,0,0,.85) 27%,#000 40%);
}
@media(max-width:767.98px){

}

/* Konfigurator: Umschalter Jahres-/Monatskosten */
.clarus-kf-pv-switch{display:flex;gap:.4rem;margin:0 0 .9rem;}
.clarus-kf-pv-switch .clarus-kf-segbtn{flex:1 1 auto;min-height:38px;font-size:.85rem;}

/* Wissens-Block auf der Startseite: die Punkte sind jetzt Ratgeber-Links und
   muessen als solche erkennbar sein (Haekchen-Liste hat eigenes Styling). */
.clarus-why-band-list li a{
  color:var(--c-ink) !important;text-decoration:underline !important;
  text-underline-offset:3px;text-decoration-color:rgba(255,138,61,.5);
  transition:color .18s var(--ease),text-decoration-color .18s var(--ease);
}
.clarus-why-band-list li a:hover{
  color:var(--heat-ink) !important;text-decoration-color:var(--heat);
}

/* ============================================================
   PAKET 1 - 17.08.2026: Fehler mit Geldbezug
   Ergebnis der Design-/Mobil-/UX-Pruefung. Jeder Punkt ist am
   Ist-Zustand gemessen,nicht vermutet.
   ============================================================ */

/* ---- 1) Deutsche Komposita duerfen die Seite nicht sprengen ----
   Im gesamten Theme gab es keine einzige Umbruchregel. Bei 320 px
   braucht "Stromverbrauchsberechnung" in einer 31-px-Ueberschrift rund
   388 px gegen 290 px Innenbreite - und anders als beim Hero gibt es in
   den Ratgebern keinen kappenden Vorfahren,also echte Seiten-Scrollbar. */
h1,h2,h3,h4,.clarus-section-head h2,.clarus-band h2,.clarus-why-band h2,.clarus-kf-h2,.clarus-cat-title,.productbox-title a,.clarus-card-title{
  overflow-wrap: break-word;
  hyphens: auto;              /* wirkt, weil <html lang="de"> gesetzt ist */
}

/* ---- 2) Technische Daten brauchen einen Scroll-Container ----
   .gp-specs steht auf width:100%,aber ein einzelner langer WaWi-Wert ohne
   Trennmoeglichkeit sprengt die Tabelle ueber die Seitenbreite hinaus.
   Gleiches Muster wie .rg-table und .clarus-kf-cmp-scroll,die es
   bereits richtig machen. */
.gp-desc .gp-tech{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gp-specs td{ overflow-wrap: break-word; }

/* ---- 3) Meldungen des Konfigurators (neu) ----
   Fehler beim Zusammenstellen wurden vorher stillschweigend verschluckt.
   Leer bleibt der Absatz unsichtbar,damit im Normalfall keine Luecke steht. */
.clarus-kf-add-msg{
  margin: .75rem 0 0; font-size: .9rem; line-height: 1.5;
  color: var(--c-ink); border-left: 3px solid var(--c-warning);
  background: rgba(224, 101, 74, .10);
  padding: .7rem .9rem; border-radius: var(--r-sm);
}
.clarus-kf-add-msg:empty{ display: none; }
.clarus-kf-add-msg a{ color: var(--heat); text-decoration: underline; }

/* ---- 4) Touch-Ziele im Kaufpfad auf 44 px ----
   Der bestehende 44-px-Block (Abschnitt D) deckt Header,Filter und
   Pagination ab - aber nicht die Stellen,an denen Geld bewegt wird:
   Mengensteuerung im Mini-Warenkorb (28 px),Artikel entfernen (24 px),Zubehoer (30 px) und die Schieberegler (28 px). Nur mobil,damit die
   Maus-Bedienung am Desktop kompakt bleibt. */
@media (max-width: 991.98px){
  .clarus-mc-qty button,
  .clarus-acc-qty button { min-width: 44px; min-height: 44px; }
  .clarus-mc-input{ width: 44px; height: 44px; }
  .clarus-acc-input{ width: 46px; height: 44px; }
  .clarus-mc-remove,.clarus-cart-drawer-close{
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Preis in eine eigene Zeile,sonst ueberlaeuft die Warenkorb-Zeile bei
     320 px: die Mittelspalte kann wegen des fixen Steppers nicht schrumpfen. */
  @media (max-width: 420px){
    .clarus-mc-item { grid-template-columns: 48px 1fr; }
    .clarus-mc-line{ grid-column: 1 / -1; white-space: normal; text-align: right; }
  }
}
/* Der Drawer soll bei <=480 px wirklich die ganze Breite nutzen - das
   max-width:92vw aus der Grunddefinition blieb bisher stehen. */
@media (max-width: 480px){
  .clarus-cart-drawer { max-width: 100%; }
}

/* ---- 5) Schieberegler: dicke Trefferflaeche,duenne Spur ----
   28 px sind zu wenig zum Treffen; die Spur bleibt optisch schlank,weil
   nur die Hoehe des Bedienelements waechst. */
.clarus-kf-range,.clarus-lrs input[type=range]{ min-height: 44px; }
/* Diese Zeile senkte die korrekten 44 px aus der Grunddefinition auf 38 ab. */
.clarus-kf-pv-switch .clarus-kf-segbtn{ min-height: 44px; }
.clarus-lrs-chip,.clarus-lrs-seg button,.clarus-lrs-compare,.clarus-lrs-model{ min-height: 44px; }

/* ---- 6) Hero-Abstand an den tatsaechlichen Breakpoint koppeln ----
   NOVA gibt #content-wrapper mobil 2rem und erst ab 992 px 4rem Innenabstand.
   Der feste -60px zog den Hero mobil 30 px zu weit nach oben,seine Oberkante
   verschwand hinter dem Header. */
@media (max-width: 991.98px){
  .clarus-hero { margin-top: -30px !important; }
}