@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');
@import url("easys.css");

/* ============================================================
   THE SMART ONES – CUSTOM.CSS
   Font: Inter (Google Fonts)
   ============================================================ */
/* Inter laden */

Startseite (Itemid=101) – Header-Elemente auf Mobile ausblenden
@media (max-width: 768px){

  /* Warenkorb/Icon (EasyStore) */
  body.itemid-101 #sp-header a.easystore-cart-icon{
    display: none !important;
  }

  /* Sign In Button/Link */
  body.itemid-101 #sp-header a.sp-sign-in{
    display: none !important;
  }
}

/* Header: Cart + Sign In auf Mobile überall ausblenden */


/* @media (max-width: 768px){ */

  /* Warenkorb/Icon */
  /* #sp-header a.easystore-cart-icon{ */
    /* display: none !important; */
  /* } */

  /* 1) direkter Link */
  /* #sp-header a.sp-sign-in{ */
    /* display: none !important; */
  /* } */
/* } */
  /* 2) falls es als Wrapper/Block ausgegeben wird */
  /* #sp-header .sp-profile-wrapper, */
  /* #sp-header .sp-profile-wrapper a.sp-sign-in{ */
    /* display: none !important; */
  /* } */

/* -----------------------------------------
   LOGO – Schriftzug THE SMART ONES
------------------------------------------ */

.logo-text {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #e6e9ef;        /* CI-Schwarz */
}

.logo-text span {
    display: block;
    font-size: 0.7em;
    letter-spacing: 0.24em;
}


/* -----------------------------------------
   Premium-Navigation THE SMART ONES
------------------------------------------ */

.sp-megamenu-parent > li > a {
    font-family: "Inter", sans-serif;
    font-weight: 300 !important;          /* leichter Schnitt */
    font-size: 14px !important;           /* klein & edel   */
    letter-spacing: 0.18em !important;    /* Luxus-Laufweite */
    text-transform: uppercase;
    color: #e6e9ef !important;            /* Carbon Black   */
    padding: 10px 16px !important;        /* schlanker Header */
}

.sp-megamenu-parent > li > a:hover {
    color: #4fa3ff !important;            /* Gold Microtone */
}

.sp-megamenu-parent > li.active > a {
    color: #e6e9ef !important;
}


/* -----------------------------------------
   Header-Hintergrund & Layout
------------------------------------------ */

/* Header-Hintergrund flach, keine Blase */
#sp-header,
#sp-header .container,
#sp-header .sp-megamenu-wrapper {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Seite und Header im CI-Hintergrund */
body,
#sp-header {
    background-color: #070b12 !important;   /* Soft Warm White */
}

/* Header-Höhe (Grund-Setup) */
#sp-header {
    padding: 10px 0 !important;
}


/* ============================================
   THE SMART ONES – Premium Minimal Sign-In / User Button
   ============================================ */

/* Grundstil des Buttons (A-Tag) */
#sp-header .sp-module a.sp-sign-in {
    background-color: transparent !important;
    border: 1px solid #9aa4b2 !important;      /* Soft Platinum – feiner Rahmen */
    border-radius: 4px !important;             /* dezente Ecken */
    padding: 4px 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    text-decoration: none !important;
    color: #e6e9ef !important;                  /* Carbon Black */
    box-shadow: none !important;
}

/* Text im Button – gilt für "SIGN IN" und den Username später */
#sp-header .sp-module a.sp-sign-in .signin-text,
#sp-header .sp-module a.sp-sign-in .user-text {
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;               /* filigran */
    letter-spacing: 0.12em !important;         /* wie Menülinks */
    text-transform: uppercase !important;
    color: #e6e9ef !important;                 /* dunkler Text */
}

/* Icons (User Icon + Chevron) dezenter */
#sp-header .sp-module a.sp-sign-in i {
    color: #9aa4b2 !important;                 /* Blue-Gray Steel – edle Ikonenfarbe */
    font-size: 14px !important;
}

/* Hover-Effekt – dezent & edel */
#sp-header .sp-module a.sp-sign-in:hover {
    border-color: #4fa3ff !important;          /* Gold Microtone */
    color: #4fa3ff !important;
    background-color: transparent !important;
}

/* Hover: Text wird ebenfalls Gold */
#sp-header .sp-module a.sp-sign-in:hover .signin-text,
#sp-header .sp-module a.sp-sign-in:hover .user-text {
    color: #4fa3ff !important;
}

/* Button höher positionieren – feiner Pixelabgleich */
#sp-header .sp-module a.sp-sign-in {
    position: relative !important;
    top: -3px !important;
}


/* ============================================
   THE SMART ONES – Perfekter Sticky Header
   Immer CI-Hintergrund, keine Lücken, Premium Minimal
   ============================================ */

/* 1) Header-Hintergrund immer CI-Farbe */
#sp-header,
#sp-header.menu-fixed,
#sp-header.header-sticky,
#sp-header.fixed {
    background-color: #070b12 !important;       /* Soft Warm White – CI */
    box-shadow: none !important;
    border-bottom: 1px solid #9aa4b2 !important;/* super dezente Linie */
    z-index: 9999 !important;
}

/* 2) Header-Höhe (schlank & edel) */
#sp-header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* 3) Sticky-Placeholder entfernen (verursacht „Luft“ oben) */
.sticky-header-placeholder {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4) Kein zusätzliches Padding oben im Body */
.body-innerwrapper {
    padding-top: 0 !important;
}

/* 5) Sicherstellen, dass der Header NAHTLOS oben sitzt */
#sp-header {
    margin-top: 0 !important;
    top: 0 !important;
}

/* 6) Falls Template versucht, sticky-Version abzudunkeln → deaktivieren */
#sp-header.menu-fixed,
#sp-header.header-sticky,
#sp-header.fixed {
    opacity: 1 !important;
}


/* ------------------------------------
   PREMIUM TYPOGRAPHY + COLOR SYSTEM
   THE SMART ONES – LONGEVITY
------------------------------------ */

/* Global body text (Farbe & Grundschrift) */
body {
    font-family: "Inter", sans-serif;
    color: #9aa4b2; /* Soft Gray */
}

/* Headings */
h1, h2, h3, h4, h5 {
    color: #e6e9ef;           /* Premium Charcoal */
    font-weight: 300;         /* filigran */
    letter-spacing: 0.02em;
}

/* (Zusätzlicher) Menü-Selector – falls Template diesen verwendet */
#sp-menu .sp-megamenu-wrapper a {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #e6e9ef;
    letter-spacing: 0.15em;   /* BYREDO-Look */
}

/* Menu hover */
#sp-menu .sp-megamenu-wrapper a:hover {
    color: #4fa3ff;
}


/* CTA Button (green wellness look) */
.btn-primary,
.tso-cta {
    background: #4fa3ff;
    color: #070b12;
    border-radius: 6px;
    padding: 12px 28px;
    font-weight: 400;
}

#addonId .sppb-addon-title {
    font-family: "Inter", sans-serif !important;
    font-weight: 300 !important;        /* edel & filigran */
    font-size: 64px !important;         /* Hero-Größe */
    line-height: 1.1 !important;        /* modernes Tight Leading */
    letter-spacing: 0.01em !important;  /* dezent luxuriös */
    color: #e6e9ef !important;          /* CI-Schwarz */
    margin: 0 0 20px 0 !important;      /* Abstand nach unten */
    padding: 0 !important;
}

/* Mobile-Anpassung */
@media (max-width: 767px) {
    #addonId .sppb-addon-title {
        font-size: 42px !important;
        line-height: 1.15 !important;
    }
}

/****************************************************************
EASY STORE – THE SMART ONES (CD)
Basis: Off-White #F4EFE9 / Text #111111 / Secondary #5F5F5F
*****************************************************************/

/* 0) Helix Variable für EasyStore-Views neutralisieren (entfernt Grün an der Quelle) */
body.com_easystore{
  --bg-color2: #070b12;
}

/* 1) Hintergrund: Shop-Bereich + Page Title (nur EasyStore) */
body.com_easystore #sp-main-body,
body.com_easystore #sp-page-title,
body.com_easystore .sp-page-title{
  background-color: #070b12 !important;
  background-image: none !important;
}

/* 2) Page Title Typografie (nur EasyStore) */
body.com_easystore #sp-page-title,
body.com_easystore #sp-page-title h1,
body.com_easystore #sp-page-title h2{
  color: #e6e9ef !important;
}

/* 3) Produkt-Titel (Liste/Kachel) */
.easystore-product-title a{
  color: #e6e9ef !important;
  text-decoration: none !important;
}
.easystore-product-title a:hover,
.easystore-product-title a:focus,
.easystore-product-title a:active{
  color: #e6e9ef !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* 4) Preis */
.easystore .price,
.easystore .easystore-product-price{
  color: #e6e9ef !important;
}

/* STEP 1 – Page Title Premium (EasyStore) */
body.com_easystore #sp-page-title .sp-page-title-heading{
  font-family: "Inter", sans-serif !important;
  font-size: 48px !important;      /* kleiner als Template */
  font-weight: 300 !important;     /* filigran */
  line-height: 1.1 !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
  color: #e6e9ef !important;
}

body.com_easystore #sp-page-title .sp-page-title-sub-heading{
  font-family: "Inter", sans-serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em !important;
  margin-top: 10px !important;
  color: #9aa4b2 !important;
}

/**** NEUES *****/

/* STEP 2 – Filter Tabs Premium (EasyStore) */

/* Container: rechts, sauberer Abstand */
body.com_easystore .easystore-filter-list{
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 18px !important;
}

/* Einzelne Items ohne Extra-Margins */
body.com_easystore .easystore-filter-list-item{
  margin: 0 !important;
}

/* Label als Premium-Pill */
body.com_easystore label.easystore-checkbox-label{
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #9aa4b2 !important;
  background: transparent !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
}

/* Häkchen/Radio-Element verstecken (wir wollen nur Pills) */
body.com_easystore .easystore-checkbox-checkmark{
  display: none !important;
}

/* Text-Stil (dein Premium-Menü-Look) */
body.com_easystore .easystore-filter-item-name{
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #e6e9ef !important;
  padding: 0 !important;
}

/* Hover: Gold */
body.com_easystore label.easystore-checkbox-label:hover{
  border-color: #4fa3ff !important;
}
body.com_easystore label.easystore-checkbox-label:hover .easystore-filter-item-name{
  color: #4fa3ff !important;
}

/* Active: Wir setzen eine klare Active-Optik ohne :has()
   (Input ist im Label, daher wirkt checked + sibling zuverlässig) */
body.com_easystore label.easystore-checkbox-label input:checked ~ .easystore-filter-item-label .easystore-filter-item-name{
  color: #070b12 !important;
}
body.com_easystore label.easystore-checkbox-label input:checked ~ .easystore-filter-item-label{
  background: #4fa3ff !important;
  border-radius: 8px !important;
  padding: 0 !important;
}

/* Damit das Active-Background wirklich die ganze Pill füllt */
body.com_easystore label.easystore-checkbox-label{
  position: relative !important;
  overflow: hidden !important;
}
body.com_easystore label.easystore-checkbox-label input{
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.com_easystore .easystore-filter-item-label{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}

/**** NEU *****/

/* STEP 3 – Quick Add Button Premium (EasyStore) */

/* Button Grundstil */
body.com_easystore button.easystore-btn-add-to-cart,
body.com_easystore .easystore-btn-add-to-cart{
  background: transparent !important;
  border: 1px solid #9aa4b2 !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  box-shadow: none !important;
}

/* Button Text */
body.com_easystore .easystore-btn-text{
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #e6e9ef !important;
}

/* Hover */
body.com_easystore button.easystore-btn-add-to-cart:hover{
  border-color: #4fa3ff !important;
  background: transparent !important;
}
body.com_easystore button.easystore-btn-add-to-cart:hover .easystore-btn-text{
  color: #4fa3ff !important;
}

/* Fokus/Active sauber */
body.com_easystore button.easystore-btn-add-to-cart:focus,
body.com_easystore button.easystore-btn-add-to-cart:active{
  outline: none !important;
  box-shadow: none !important;
}

/*** NEU ****/


/* STEP 4 – Produktkarten Premium (EasyStore) */

/* Card-Hülle */
body.com_easystore .easystore-product,
body.com_easystore .easystore-product-item,
body.com_easystore .product-item{
  background: transparent !important;
  border-radius: 14px !important;
  padding: 18px 18px 22px 18px !important;
  transition: transform .2s ease !important;
}

/* Leichter Lift beim Hover */
body.com_easystore .easystore-product:hover,
body.com_easystore .easystore-product-item:hover,
body.com_easystore .product-item:hover{
  transform: translateY(-2px);
}

/* Produktbild ruhiger */
body.com_easystore .easystore-product img{
  border-radius: 14px !important;
}

/* Produkt-Titel feiner */
body.com_easystore h6.easystore-product-title{
  margin-top: 14px !important;
}

/* Preis mit mehr Luft */
body.com_easystore .easystore-product-price-block{
  margin: 6px 0 14px 0 !important;
}

/* STEP 4A – Premium Typography unter Produktbildern */

/* Kategorie / Taxonomy (z. B. IcyHeat, Hair Serum) */
body.com_easystore .easystore-product-category,
body.com_easystore .easystore-product-meta,
body.com_easystore .easystore-product-category-name{
  font-family: "Inter", sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #9aa4b2 !important;   /* sehr soft */
  margin-bottom: 6px !important;
}

/* Produktname */
body.com_easystore h6.easystore-product-title,
body.com_easystore h6.easystore-product-title a{
  font-family: "Inter", sans-serif !important;
  font-size: 20px !important;
  font-weight: 300 !important;     /* entscheidend für Premium */
  letter-spacing: 0.01em !important;
  line-height: 1.25 !important;
  color: #e6e9ef !important;
  margin: 0 0 6px 0 !important;
}

/* Hover nur minimal – kein Farbwechsel */
body.com_easystore h6.easystore-product-title a:hover{
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Preis – ruhig, sekundär */
body.com_easystore .easystore-product-price-block,
body.com_easystore .easystore-product-price,
body.com_easystore .price{
  font-family: "Inter", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  color: #9aa4b2 !important;   /* Soft Gray */
}

/* Dezimalstellen subtil */
body.com_easystore .easystore-price-decimal{
  font-size: 12px !important;
  opacity: 0.85 !important;
}

/* FIX – Kategorie-Link (z. B. IcyHeat) Kontrast + Premium CD */
body.com_easystore .easystore-product-category a{
  color: #9aa4b2 !important;            /* Soft Gray – harmonisch */
  font-family: "Inter", sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  opacity: 1 !important;               /* kein „ausgewaschen“ */
}

/* Hover: Gold Microtone (Premium) */
body.com_easystore .easystore-product-category a:hover,
body.com_easystore .easystore-product-category a:focus{
  color: #4fa3ff !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* STEP – Pagination Premium (EasyStore) */

/* Gesamter Pagination-Bereich */
body.com_easystore .pagination,
body.com_easystore .easystore-pagination{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-top: 18px !important;
}

/* Links/Spans (die „Pills“) */
body.com_easystore .pagination a,
body.com_easystore .pagination span,
body.com_easystore .easystore-pagination a,
body.com_easystore .easystore-pagination span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 42px !important;
  height: 40px !important;

  border: 1px solid #9aa4b2 !important;
  border-radius: 10px !important;
  background: transparent !important;

  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;

  color: #e6e9ef !important;          /* genug Kontrast */
  text-decoration: none !important;

  box-shadow: none !important;
  opacity: 1 !important;
}

/* Hover: Gold Microtone */
body.com_easystore .pagination a:hover,
body.com_easystore .easystore-pagination a:hover{
  border-color: #4fa3ff !important;
  color: #4fa3ff !important;
}

/****************************************************************
EASY STORE – PAGINATION (PREMIUM, CLEAN)
- Bootstrap Pagination (.pagination / .page-item / .page-link)
- CD: Off-White / Carbon / Soft Gray / Gold Hover
- Pfeile stabil ohne FontAwesome
*****************************************************************/

/* Grundlayout */
body.com_easystore .pagination{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-top: 18px !important;
}

/* Pills */
body.com_easystore .pagination .page-link{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 42px !important;
  height: 40px !important;

  background: transparent !important;
  border: 1px solid #9aa4b2 !important;
  border-radius: 10px !important;

  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;

  color: #e6e9ef !important;
  text-decoration: none !important;

  box-shadow: none !important;
  opacity: 1 !important;
}

/* Hover */
body.com_easystore .pagination .page-link:hover{
  border-color: #4fa3ff !important;
  color: #4fa3ff !important;
  background: transparent !important;
}

/* Active */
body.com_easystore .pagination .page-item.active .page-link,
body.com_easystore .pagination .page-item.active > span.page-link{
  background: #4fa3ff !important;
  border-color: #4fa3ff !important;
  color: #070b12 !important;
}

/* Disabled (Prev auf Seite 1 etc.) */
body.com_easystore .pagination .page-item.disabled .page-link{
  opacity: 0.55 !important;
  cursor: default !important;
}

/* ----- Pfeile: FontAwesome ausblenden + Unicode setzen ----- */

/* FA-Kästchen verhindern */
body.com_easystore .pagination .page-link .fas,
body.com_easystore .pagination .page-link .fa,
body.com_easystore .pagination .page-link .far,
body.com_easystore .pagination .page-link .fal,
body.com_easystore .pagination .page-link .fab,
body.com_easystore .pagination .page-link svg,
body.com_easystore .pagination .page-link i{
  display: none !important;
}

/* Next */
body.com_easystore .pagination .page-item a.page-link[aria-label="Go to next page"],
body.com_easystore .pagination .page-item span.page-link[aria-label="Go to next page"]{
  font-size: 0 !important; /* killt evtl. Symbol-Kram */
}
body.com_easystore .pagination .page-item a.page-link[aria-label="Go to next page"]::after,
body.com_easystore .pagination .page-item span.page-link[aria-label="Go to next page"]::after{
  content: "›" !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  color: inherit !important;
}

/* Prev */
body.com_easystore .pagination .page-item a.page-link[aria-label="Go to previous page"],
body.com_easystore .pagination .page-item span.page-link[aria-label="Go to previous page"]{
  font-size: 0 !important;
}
body.com_easystore .pagination .page-item a.page-link[aria-label="Go to previous page"]::before,
body.com_easystore .pagination .page-item span.page-link[aria-label="Go to previous page"]::before{
  content: "‹" !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  color: inherit !important;
}

/*****FOOTER*****/

/****************************************************************
FOOTER – THE SMART ONES (CD)
Ziel: Premium, ruhig, wissenschaftlich
Basis: Off-White #F4EFE9 / Charcoal #2A3B47 / Soft Gray #7B8A91 / Gold #C8B99A
*****************************************************************/

/* 1) Footer-Grundfläche */
#sp-footer,
#sp-footer .sppb-section,
#sp-footer .sppb-section-content,
#sp-footer .sppb-row-container{
  background: #070b12 !important;
  color: #e6e9ef !important;
}

/* 2) Footer-Headings (Menu / Products / Social Media) */
#sp-footer .sppb-addon-title,
#sp-footer .sppb-addon-header .sppb-addon-title,
#sp-footer h1, 
#sp-footer h2, 
#sp-footer h3{
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #e6e9ef !important;            /* entfernt Grün */
  margin-bottom: 14px !important;
}

/* 3) Footer-Navigation (Links unter den Headings) */
#sp-footer a{
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;
  color: #9aa4b2 !important;            /* sichtbar, aber ruhig */
  text-decoration: none !important;
}

/* Hover: Gold Microtone */
#sp-footer a:hover,
#sp-footer a:focus{
  color: #4fa3ff !important;
  text-decoration: none !important;
}

/* 4) Listen sauber (keine komischen Einzüge) */
#sp-footer ul{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#sp-footer li{
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}

/* 5) Social Icons (Icons Group) – sichtbar + clean */
#sp-footer .sppb-icon,
#sp-footer .sppb-icon-container,
#sp-footer i,
#sp-footer svg{
  color: #9aa4b2 !important;
  fill: currentColor !important;
  opacity: 1 !important;
}

/* Hover Icons */
#sp-footer a:hover i,
#sp-footer a:hover svg{
  color: #4fa3ff !important;
  fill: currentColor !important;
}

/* 6) Optional: dezente Trennlinie oben im Footer (edler Abschluss) */
#sp-footer{
  border-top: 1px solid #9aa4b2 !important;
}


/* TEXT FELD START SEITE - MOBIL */

/* Premium Checklist – nur dieses Textfeld */
.sppb-text-checklist ul{
  list-style: none;
  padding-left: 0;
  margin: 2rem 0;
}

.sppb-text-checklist li{
  position: relative;
  padding-left: 2.2rem;
  margin-bottom: 1.1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #9aa4b2;
}

/* Häkchen */
.sppb-text-checklist li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 1.1rem;
  font-weight: 600;
  color: #4fa3ff; /* CD-Gold */
}
















/* Ausblenden gewisser Warenkorb und Sign-Btn auf den mobilen Seiten */

/* ============================================================
   MOBILE: HEADER – Sign In + Warenkorb auf ALLEN Seiten ausblenden
   (Helix/Nectar + EasyStore, robust)
============================================================ */
@media (max-width: 768px){

  /* EasyStore Warenkorb/Icon */
  #sp-header a.easystore-cart-icon,
  #sp-header .easystore-cart-icon{
    display: none !important;
    visibility: hidden !important;
  }

  /* Sign In / Login Links (verschiedene Ausgaben) */
  #sp-header a.sp-sign-in,
  #sp-header .sp-sign-in,
  #sp-header .sp-profile-wrapper,
  #sp-header .sp-profile-wrapper a,
  #sp-header .sp-profile-dropdown,
  #sp-header .sp-profile-dropdown a,
  #sp-header .signin-text{
    display: none !important;
    visibility: hidden !important;
  }

  /* Falls das Sign-In als Modulblock kommt: kompletten Modulblock killen,
     aber NUR wenn er ein Sign-In enthält */
  #sp-header .sp-module:has(a.sp-sign-in),
  #sp-header .sp-module:has(.signin-text){
    display: none !important;
  }
}

/* ============================================================
   MOBILE: Ausnahmen – Warenkorb wieder EIN
   (Startseite + Shop-Seiten)
============================================================ */
@media (max-width: 768px){

  /* Startseite (Itemid=101) */
  body.itemid-101 #sp-header a.easystore-cart-icon{
    display: inline-flex !important;
    visibility: visible !important;
  }

  /* Shop-Seiten (typisch) */
  body.view-category  #sp-header a.easystore-cart-icon,
  body.view-product   #sp-header a.easystore-cart-icon,
  body.view-cart      #sp-header a.easystore-cart-icon,
  body.view-checkout  #sp-header a.easystore-cart-icon{
    display: inline-flex !important;
    visibility: visible !important;
  }
}

/*****EINBINDUNGEN****/

/*@import url("login.css"); */

/* ============================================================
   GRUNDIG.AI – CD Override (FORCE)
   Ziel: System/Template-Variablen + tatsächliche Elemente sicher überschreiben
   (nur Farben, keine Layout-/Typo-Optimierungen)
   ============================================================ */

:root{
  /* CD-Token */
  --ga-black: #070b12;
  --ga-blue:  #4fa3ff;
  --ga-white: #e6e9ef;
  --ga-gray:  #9aa4b2;

  /* --- SPPB Variablen (FORCE) --- */
  --sppb-topbar-bg-color: var(--ga-black) !important;
  --sppb-topbar-text-color: var(--ga-gray) !important;

  --sppb-header-bg-color: var(--ga-black) !important;
  --sppb-logo-text-color: var(--ga-white) !important;

  --sppb-menu-text-color: var(--ga-white) !important;
  --sppb-menu-text-hover-color: var(--ga-blue) !important;
  --sppb-menu-text-active-color: var(--ga-blue) !important;

  --sppb-menu-dropdown-bg-color: var(--ga-black) !important;
  --sppb-menu-dropdown-text-color: var(--ga-white) !important;
  --sppb-menu-dropdown-text-hover-color: var(--ga-blue) !important;
  --sppb-menu-dropdown-text-active-color: var(--ga-blue) !important;

  --sppb-text-color: var(--ga-gray) !important;
  --sppb-bg-color: var(--ga-black) !important;

  --sppb-link-color: var(--ga-blue) !important;
  --sppb-link-hover-color: var(--ga-white) !important;

  --sppb-footer-bg-color: var(--ga-black) !important;
  --sppb-footer-text-color: var(--ga-gray) !important;
  --sppb-footer-link-color: var(--ga-blue) !important;
  --sppb-footer-link-hover-color: var(--ga-white) !important;

  /* --- Template/Global Variablen (FORCE) --- */
  --link-color: var(--ga-blue) !important;
  --link-hover-color: var(--ga-white) !important;
  --text-color: var(--ga-gray) !important;

  --secondary-link-color: var(--ga-blue) !important;
  --secondary-primary-color: var(--ga-blue) !important;
  --bg-color2: var(--ga-black) !important;

  --template-bg-light: var(--ga-black) !important;
  --template-text-dark: var(--ga-gray) !important;
  --template-text-light: var(--ga-white) !important;
  --template-link-color: var(--ga-blue) !important;
  --template-special-color: var(--ga-blue) !important;
}

/* ============================================================
   HARD OVERRIDES: reale Elemente (damit es auch „sichtbar“ greift)
   ============================================================ */

/* Seitenbasis */
html, body{
  background-color: #070b12 !important;
  color: #9aa4b2 !important;
}

/* Standardlinks */
a, a:visited{
  color: #4fa3ff !important;
}
a:hover, a:focus{
  color: #e6e9ef !important;
}

/* Header / Topbar / Menü (Helix/Nectar typischer Aufbau) */
#sp-top-bar,
#sp-header,
#sp-header .container,
#sp-header .sp-megamenu-wrapper{
  background-color: #070b12 !important;
}

/* Menü-Links */
.sp-megamenu-parent > li > a,
#sp-menu .sp-megamenu-wrapper a{
  color: #e6e9ef !important;
}
.sp-megamenu-parent > li > a:hover,
#sp-menu .sp-megamenu-wrapper a:hover{
  color: #4fa3ff !important;
}
.sp-megamenu-parent > li.active > a{
  color: #4fa3ff !important;
}

/* Dropdowns */
.sp-megamenu-parent .sp-dropdown,
.sp-megamenu-parent .sp-dropdown-inner{
  background-color: #070b12 !important;
}
.sp-megamenu-parent .sp-dropdown a{
  color: #e6e9ef !important;
}
.sp-megamenu-parent .sp-dropdown a:hover{
  color: #4fa3ff !important;
}

/* SPPB Content */
#sp-main-body,
.sppb-section,
.sppb-section-content{
  background-color: #070b12 !important;
  color: #9aa4b2 !important;
}

/* Headings */
h1,h2,h3,h4,h5,h6{
  color: #e6e9ef !important;
}

/* Footer */
#sp-footer,
#sp-footer .sppb-section,
#sp-footer .sppb-row-container{
  background-color: #070b12 !important;
  color: #9aa4b2 !important;
}
#sp-footer a{
  color: #4fa3ff !important;
}
#sp-footer a:hover{
  color: #e6e9ef !important;
}

/* Buttons (Bootstrap + Helix/Template) */
.btn-primary,
.sppb-btn-primary{
  background-color: #4fa3ff !important;
  border-color: #4fa3ff !important;
  color: #070b12 !important;
}
.btn-primary:hover,
.sppb-btn-primary:hover{
  background-color: #e6e9ef !important;
  border-color: #e6e9ef !important;
  color: #070b12 !important;
}

/* Outline Buttons */
.btn-outline-primary,
.sppb-btn-outline-primary{
  border-color: #4fa3ff !important;
  color: #4fa3ff !important;
  background: transparent !important;
}
.btn-outline-primary:hover,
.sppb-btn-outline-primary:hover{
  background-color: #4fa3ff !important;
  color: #070b12 !important;
}