/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 *
 * maiwell-Farbpalette "Beere & Rosa" (03.09.2026):
 *   Primär-Beere  #ca506e  (Navigation, Buttons, Headlines, Akzente)
 *   Beere dunkel  #a23b53  (Hover)
 *   Beere sehr dk.#8c2e43  (aktive Kategorie, dunkle Text-Akzente)
 *   Markenpink    #e6007e  (nur Preis-/Highlight-Akzent, passend zum Logo)
 *   Rosa          #f6e7ea  (Flächen, Footer, Karten)
 *   Hellrosa      #fdf0f2  (Top-Bar, Info-Boxen)
 *   Trennlinie    #f0dfea  (--bright-color)
 *   Text dunkel   #4f4b4a  / Footer-Text #270C12
 */
 :root {
  --background-color: #f6e7ea;
  --background-header: #f6e7ea;
  --header-font-color: #4f4b4a;
  --line-color: #4f4b4a;
  --hover-groud: #fff;
  --shopbackground: #fff;
  --footer-background: #ececec;
  --ribbon-background: #ca506e;
  --font-color: #ca506e;
  --hover-font: #a23b53;
  --inactive-color: #858585;

  --main-color: #ca506e;
  --hover-color: #a23b53;
  --dark-color: #222;
  --bright-color: #f0dfea;
}
.box-header-startpage {
    display: flex;
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center;     /* Vertikale Zentrierung */
    text-align: center;      /* Zentriert mehrzeiligen Text */
    padding: 12px 0;         /* Sorgt für gleichmäßigen Abstand oben & unten */
    width: 100%;
    background-color: #ca506e;
    color: #fff;
    border-radius: 0px;
    font-size: 2.2em;
    line-height: 1.4em;
    padding: 10px;
}
.account-head-data .account-head-data-credit {
  border-color: var(--main-color);
}
/* #main-wrapper,
header,
#header-top-bar {
  background: var(--bright-color);
} */

#header-top-bar a,
header a {
  color: var(--font-color);
  font-weight: 300;
}

/* header {
  box-shadow: none;
  border-bottom: 5px solid var(--main-color);
} */

.btn-secondary {
  background: var(--dark-color);
  border: none;
}

.form-control {
  border-color: #dfa0a0;
}
/* #header-top-bar .topbar-main a,
#shop-nav a {
  color: var(--dark-color);
}
 */
#header-top-bar a:hover:not(.dropdown-item):not(.btn),
header a:hover:not(.dropdown-item):not(.btn) {
  color: var(--hover-color);
}

/* Hover-/Öffnungs-Unterstrich im Hauptmenü (Desktop): weiß auf Beere-Balken */
header .navbar-nav > .nav-item > .nav-link::before {
  border-color: #ffffff;
}

/* ÄNDERUNGEN 24.11. */

.btn-outline-secondary:hover {
  color: var(--hover-font) !important;
  border-color: var(--hover-font);
  background: white;
}

.dropdown-item {
  font-weight: bold;
  color: var(--font-color);
}

.page-item.active .page-link::after,
.page-item.active .page-text::after {
  border-color: var(--hover-font);
}
.form-counter .btn:hover {
  background: var(--background-color);
}
.btn-outline-primary {
  color: var(--font-color);
}
.btn-outline-primary:hover {
  border-color: var(--hover-font);
  color: var(--hover-font);
  background: white;
}

body[data-page="2"] .btn-primary {
  color: #fff;
  background-color: #ca506e;
  border-color: #ca506e;
}
/*

#gallery_wrapper .square-image .inner img{
top:0px;
-webkit-transform: translate(-10%, 0%);
transform: translate(-10%, 0%);;
}*/

#gallery_wrapper .square-image .inner img {
  max-height: 100%;
  top: 0px;
  left: 0px;
  transform: none;
  display: block;
  position: relative;
  margin: 0 auto;
  height: auto;
  width: 100%;
  width: 100%;
  max-height: 500px !important;
  object-fit: contain;
}

#image_wrapper.fullscreen #gallery .square-image .inner img {
  max-height: 80vh !important;
}
.gallery-with-action .square-image .inner {
  display: block;
  max-height: 100%;
}
body[data-page="4"] {
  background: white !important;
}
body[data-page="4"] #main-wrapper,
body[data-page="4"] header,
body[data-page="4"] #header-top-bar {
  background: white !important;
}

body[data-page="3"] #main-wrapper,
body[data-page="14"] #main-wrapper,
body[data-page="16"] #main-wrapper,
body[data-page="3"] header,
body[data-page="3"] #header-top-bar {
  background: white !important;
}

body[data-page="27"] #main-wrapper,
body[data-page="27"] header,
body[data-page="27"] #header-top-bar {
  background: white !important;
}

body[data-page="19"] #main-wrapper,
body[data-page="19"] header,
body[data-page="19"] #header-top-bar {
  background: white !important;
}

.btn-sm,
.btn-group-sm > .btn {
  font-size: 0.775rem;
}

body[data-page="11"] #existing-customer .card-gray {
  background: var(--font-color);
  color: #fff;
}

body[data-page="11"] .card-title.h3 {
  /*color:#fff !important;*/
}
body[data-page="11"] #order_register_or_login .btn-link {
  /*color:#fff;*/
}

.card-header {
  background: var(--background-color);
}

#footer .btn-secondary {
  background: #4f4b4a;
}
#footer .form-control {
  background: var(--background-color);
}

.basket .basket-summary {
  background: var(--background-color);
}

.badge-primary {
  background: var(--font-color);
  color: #fff;
}

.checkout-steps .step-check {
  color: var(--font-color);
}

.alert-info {
  background: var(--font-color);
  color: #fff;
}

.nav-panel .nav {
  /* list-style-image: url(/media/image/maiwell_blume.png); */
  list-style: none;
}

.card_no_display {
  display: none !important;
}

.btn.compare,
.input-group-text.unit {
  display: none;
}

.categories-recursive-link {
  padding: 0px !important;
}

.subcategory-wrapper .nav-item a {
  padding-left: 0px !important;
}

/* Menü linksbündig ausrichten (vorher zentriert): Bei Überlauf — lange
   Sprachversionen, viele Kategorien — bleibt sonst der linke Bereich
   abgeschnitten, und NOVAs Navscrollbar-Pfeile greifen nur sauber, wenn
   die Liste am linken Rand beginnt. */
#mainNavigation.nav-scrollbar > .nav-mobile-body > .navbar-nav {
  justify-content: flex-start;
}

#header-top-bar a {
  font-weight: normal;
}

body[data-page="21"] #main-wrapper,
body[data-page="20"] #main-wrapper,
body[data-page="21"] #main-wrapper,
body[data-page="31"] #main-wrapper,
body[data-page="21"] #main-wrapper {
  background: white;
}

body[data-page="19"] header,
body[data-page="19"] #header-top-bar {
  background: #f6e7ea !important;
}

.home-logos {
  filter: grayscale(1);
}

body[data-page="11"] #existing-customer .card-gray {
  background: var(--background-color);
}

.product-buy .input-group .form-control {
  width: calc(100% - 86px);
  flex: initial;
}

.estimated-delivery:hover .estimated-delivery-info {
  color: var(--hover-font) !important;
}

.custom-select:focus {
  box-shadow: none;
}

#main-wrapper.aside-active .price_wrapper {
  justify-content: start;
}
.base_price {
  display: block;
}
#main-wrapper.aside-active .price_wrapper {
  display: block;
}

span[itemprop="referenceQuantity"] {
  font-size: 10px;
}
.productbox-title a {
  font-weight: bold;
  text-decoration: none;
}

#product-offer {
  /*  max-height: 600px; */
}

/*
.theme-default .nivoSlider {
  box-shadow: none;
  margin-top: 165px;
} */

@media screen and (max-width: 480px) { 
  .theme-default .nivoSlider {
  box-shadow: none;
  margin-top: 0px;
  }

  }


  body[data-page="18"] #content-wrapper {
  display: none;
  }

  .choose_quantity {
  flex-wrap: nowrap;
  border: 0;

  button {
    background-color: #ca506e;
    color: #fff;
    height: 30px;
  }

  input {
    border: 1px solid #eee !important;
    height: 30px;
  }

}

.row.slick-type-product {
  margin: 0;
}

#image_wrapper .product-detail-image-topbar {
    margin-bottom: 0rem; 
	display:none;
}
.product-detail {
	    margin-top: 30px;
}
.info-essential{ 
	line-height: 1.9em;
}
.product-info .question {
	font-weight: 900;
}
.slick-type-product .product-wrapper div:nth-child(3) {
  order: 2;
  text-align: center;
  margin-top: 10px;
  font-weight: 700;
  color: #ca506e;
}

header.sticky-top.fixed-navbar .form-control {
    /* color: #df7459 !important; */
    border-color: #ffffff !important;
}
.startseite-img a picture img {
	border-radius: 15px;
}
img .rounded  {
	border-radius: 15px;
}
#footer {
    background-color: #f6e7ea;
    color: #270C12;
    padding: 60px 0;
    border-radius: 15px;
}

#search {
  width: 100%;
  max-width: 100%;
}
.modal-backdrop.show {
  opacity: 0.4;
}

/*
.theme-default .nivoSlider {
    box-shadow: none;
    margin-top: 165px;
    border-radius: 15px;
} */

/* prettier-ignore */
@media (max-width: 540px) {
	.home-category-outer .img {
		display: none;
	}	
  
	body {
  		margin-top: 109px;
	}

	.nivoSlider img {
    	object-fit: cover;
    	height: 100%;
	}

/*  .theme-default .nivoSlider {
    box-shadow: none;
    border-radius: 15px;
    margin-top:0px;
    display:none;
  } */

.box-header-startpage {    
    display: flex;
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center;     /* Vertikale Zentrierung */
    text-align: center;      /* Zentriert mehrzeiligen Text */
    padding: 12px 0;         /* Sorgt für gleichmäßigen Abstand oben & unten */
    width: 100%;
    background-color: #ca506e;
    color: #fff;
    border-radius: 0px;
    font-size: 1.2em;
    line-height: 1.4em;
    font-weight: bold;
    padding: 10px;
}
	.product-actions {
		position: relative;
    	top: 45px;
    	z-index: 23;
	}
	.product-detail {
    	margin-top: 35px;
	}
	/*#result-wrapper {
		margin-top:0px;
	} */
	#content-wrapper:not(.has-fluid) {
		padding-top: 0rem;
	}

	#image_wrapper .product-detail-image-topbar {
		margin-bottom: 0rem; 
		display:none;
	}
	.btn.js-cfg-validate.btn-hidden-default.btn-hidden {
		display:none;
	}
}
a.button_nav {   
	margin: 0;   padding: 10px;   text-align: center;   text-transform: uppercase;   color: #ca506e;   background-color: #f6e7ea;   font-weight: 900;   display: block;   text-decoration: none; 
}  
a.button_nav {   
	background-color: #ca506e;   color: #fff;
}
.home-categories .row .col a.button_nav {   
	margin: 0;   padding: 10px;   text-align: center;   text-transform: uppercase;   color: #ca506e;   background-color: #f6e7ea;   font-weight: 900;   display: block;   text-decoration: none; 
}  
.home-categories .row .col:hover a.button_nav {   
	background-color: #ca506e;   color: #fff;
}
a.button_nav:hover  {   
	background-color: #ca506e;   color: #fff;
}

.slider-pause-btn {
  display: none;
}

.nivoSlider .loaded {
  margin-top: 0px;
}

@media (width > 768px) {
  .row .startseite-img {
    margin-top: 30px;
  }
}

.newsmessages-slider {
  padding: 30px;
  background-color: var(--ribbon-background);
  color: #fff;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #8c2e43;
}

.brand-info-box {
    background: #ffffff;
    border-left: 5px solid #e6007e;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(230, 0, 126, 0.1);
    
    /* ZENTRIERUNG */
    display: flex;             /* Wechsel von inline-flex auf flex */
    width: fit-content;        /* Behält die kompakte Breite bei */
    margin: 15px auto;         /* Zentriert das Element horizontal */
    align-items: center;
    justify-content: center;   /* Zentriert den Inhalt innerhalb der Box */
    
    transition: transform 0.2s ease;
    text-transform: uppercase;

}

.brand-info-box:hover {
    transform: translateX(5px);
}

/* Dezente farbliche Hervorhebung */
.highlight a {
    color: #e6007e; /* Markenpink passend zum Logo */
    font-weight: bold;
    text-decoration: underline;
}

/* Oder als klassischer Textmarker-Effekt */
.highlight {
    background-color: #ffe4f1;
    padding: 2px 4px;
    border-radius: 3px;
}

.info-icon {
    background: #e6007e;
    color: #ffffff;
    width: 28px;        /* Etwas vergrößert für bessere Sichtbarkeit */
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;   /* Icon-Inhalt (z.B. "i") vergrößert */
    font-weight: bold;  /* Icon-Inhalt fett */
    margin-right: 15px;
    flex-shrink: 0;
    /* Optional: Ein leichter Schein, damit es mehr "poppt" */
    box-shadow: 0 2px 5px rgba(230, 0, 126, 0.3); 
}

.brand-info-text {
    font-family: "Open Sans", sans-serif; /* Standard-Font der Seite */
    font-size: 0.95rem;
    color: #333;
    line-height: 1.4;
}

/* Abstand Startseiten-Banner-Slider (Splide) zur folgenden Box,
   angelehnt an den 30px-Rhythmus der Startseite (.row .startseite-img).
   Hohe Spezifitaet noetig, weil splide.css den Wrapper mit margin: 0 -1rem resettet. */
@media (width > 768px) {
  .home-categories .slider-wrapper.theme-default {
    margin-bottom: 30px;
  }
}


/* Haupt-Hintergrund (auf das übergeordnete Element oder body anwenden) */
body, .product-slider-wrapper {
  background-color: #fdf0f2; /* Softes Hellrosa */
}

/* Die Produktkarte (Das <a> Tag) */
a.product-card-link {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;             /* Reines Weiß für die Karte */
  border-radius: 20px;                  /* Abgerundete Karten-Ecken */
  padding: 16px;
  text-decoration: none;
  color: #2d2d2d;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04); /* Weicher Schatten */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
  box-sizing: border-box;
}

/* Hover-Effekt für die Karte */
a.product-card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(202, 80, 110, 0.18);
}

/* Bild-Container mit abgerundeten Ecken */
.productbox-image {
  width: 100%;
  border-radius: 14px;                  /* Leicht kleinere Rundung als die Karte */
  overflow: hidden;
  background-color: #ffffff;
  margin-bottom: 12px;
}

.productbox-image img {
  border-radius: 14px;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Zweitbild-Overlay im Produktgrid (Hover-Bild): darf das Hauptbild nicht verdecken.
   background transparent = Fix fuer "Hauptbild fehlt im Grid" (08.09.2026);
   top/left/width/height vervollstaendigen die Geometrie, da my-nova.css hier nur
   eine unvollstaendige Alt-Regel (.productbox-image.second-wrapper ohne left/height) hat. */
.list-gallery .second-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

/* Produkttitel */
.item-slider-desc {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: #333333;
  margin-bottom: 8px;
  margin-top: 5px;                     /* Schiebt den Inhalt gleichmäßig nach oben */
}

/* Preisbereich */
.price.productbox-price span {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e6007e;                      /* Markenpink als Preis-Akzent */
}

body[data-page="18"] {
    background-color: #ecdadb; /* Gewünschte Hintergrundfarbe */
    /* Oder mit Hintergrundbild: */
    /* background-image: url('pfad/zum/bild.jpg'); */
    /* background-size: cover; */
} 

.bottom-link p a {
  color: #ca506e;
}

.table-background-rosa {
  background-color: #f6e7ea;
}

/* ====================================================================
   Header, Navigation & Megamenü — maiwell-Palette "Beere & Rosa"
   Neufassung 08.09.2026: Regeln auf die tatsächlich gerenderten
   Selektoren des NOVA-Markups umgestellt (#header-top-bar,
   #mainNavigation, .submenu-headline, .subcategory-wrapper,
   .nav-mobile-header ...). Die früheren Regeln für .top-header-bar,
   .main-navigation-bar und .megamenu-* stilten Klassen, die im
   Template nicht vorkommen, und liefen ins Leere.
   Overrides gegen my-nova.css absichtlich mit gleicher Selektor-
   Stärke: custom.css lädt als letzte Datei und gewinnt die Kaskade.
   ==================================================================== */

/* ---------- 1. Top-Bar (Desktop): Hellrosa mit dunkler Schrift ---------- */
#header-top-bar {
  background-color: #fdf0f2;
  border-bottom: 1px solid #f0dfea;
}

#header-top-bar .nav-link {
  color: #4f4b4a;
}

#header-top-bar .nav-link:hover,
#header-top-bar .nav-item.active > .nav-link {
  color: #ca506e;
}

#header-top-bar .topbar-note,
#header-top-bar .topbar-note .nav-link {
  color: #858585;
}

/* ---------- 2. Haupt-Navigationsleiste (Desktop, >= 992px): Beere ---------- */
@media (min-width: 992px) {

  /* Beere-Balken; helle Deckfläche und dunkler Rahmen aus my-nova.css neutralisieren */
  #mainNavigation,
  header.fixed-navbar nav.navbar #mainNavigation {
    background-color: #ca506e;
    border-top: none;
    border-bottom: 2px solid #a23b53;
    height: 44px; /* fest: schneidet die Scrollzone (.nav-scrollbar-inner) sauber ab */
  }

  header.fixed-navbar nav.navbar #mainNavigation:before {
    content: none;
  }

  /* Haupt-Kategorie-Links */
  header.fixed-navbar nav.navbar #mainNavigation > .nav-mobile-body > .navbar-nav > .nav-item > .nav-link {
    padding: 12px 18px;
  }

  #mainNavigation .navbar-nav > .nav-item > .nav-link {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.2;      /* 42px inkl. Padding — passt in die 44px-Leiste */
    white-space: nowrap;   /* Kategorie-Namen nie innerhalb des Items umbrechen */
  }

  #mainNavigation .navbar-nav > .nav-item > .nav-link:hover,
  #mainNavigation .navbar-nav > .nav-item.hover > .nav-link,
  #mainNavigation .navbar-nav > .nav-item.show > .nav-link,
  #mainNavigation .navbar-nav > .nav-item > .nav-link.show {
    color: #ffffff;
    background-color: #a23b53;
  }

  #mainNavigation .navbar-nav > .nav-item.active > .nav-link {
    color: #ffffff;
    background-color: #8c2e43;
  }

  #mainNavigation .navbar-nav > .nav-item > .nav-link:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
  }

  /* Überlauf bei langen Menüs (z. B. Sprachversion VI): Items nicht
     stauchen/umbrechen, sondern NOVAs Navscrollbar nutzen — die Pfeile
     links/rechts erscheinen automatisch, sobald die Kategorienamen in
     der Summe breiter sind als die Leiste. */
  #mainNavigation .navbar-nav > .nav-item {
    flex-shrink: 0;
  }

  #mainNavigation .nav-scrollbar-arrow {
    color: #ffffff;
  }

  /* Native Scrollleiste versteckt (Bedienung über die Pfeile); ohne die
     1.5rem-Scrollzone aus my-nova.css bleibt die Leiste exakt 44px hoch. */
  #mainNavigation .nav-scrollbar-inner {
    padding-bottom: 0;
    scrollbar-width: none;      /* Firefox */
  }

  #mainNavigation .nav-scrollbar-inner::-webkit-scrollbar {
    display: none;              /* Chrome, Edge, Safari */
  }

  /* ---------- 3. Megamenü-Panels (Desktop) ---------- */
  /* Grundoptik (weiß, Beere-Kante, Schatten, Radius) kommt aus den
     globalen .dropdown-menu-Regeln weiter unten; hier nur Layout: */
  #mainNavigation .dropdown-menu {
    padding: 28px 36px;
    margin-top: 0;
  }

  #mainNavigation .dropdown-menu .row {
    row-gap: 28px;
  }

  /* Kategorie-Überschriften (1. Ebene, Hersteller, Linkgruppen) */
  #mainNavigation .dropdown-menu .submenu-headline {
    font-size: 15px;
    font-weight: 700;
    color: #ca506e;
    border-bottom: 1.5px solid #f0dfea;
    padding-bottom: 6px;
    margin-bottom: 12px;
    text-transform: none;
  }

  /* Unterpunkte */
  #mainNavigation .dropdown-menu .nav-link {
    color: #4f4b4a;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.6;
    padding: 3px 0;
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
  }

  #mainNavigation .dropdown-menu .nav-link:not(.submenu-headline):hover {
    color: #ca506e;
    text-decoration: none;
    transform: translateX(4px);
  }

  /* Flyout der 3. Ebene */
  #mainNavigation .categories-recursive-dropdown {
    padding: 12px 16px;
    border-left: 1px solid #f0dfea;
  }

  /* Einzelne Unterkategorien ohne Kinder (vormals ".megamenu-headline.standalone") */
  #mainNavigation .dropdown-menu a.categories-recursive-link:not(.dropdown-toggle) {
    cursor: pointer;
  }

  #mainNavigation .dropdown-menu a.categories-recursive-link:not(.dropdown-toggle):hover {
    color: #8c2e43;
  }
}

/* ---------- 4. Dropdown-Menüs global (Konto, Währung, Sprache, Warenkorb, Sortierung) ---------- */
.dropdown-menu {
  background-color: #ffffff !important;
  border: none;
  border-top: 3px solid #ca506e !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
  border-radius: 0 0 8px 8px;
  margin-top: 0; /* Nahtloser Übergang zum Menü-Balken */
}

.dropdown-menu .nav-link {
  color: #4f4b4a !important; /* Hoher Kontrast auf weißem Grund */
  font-size: 14px;
  padding: 6px 0;
}

.dropdown-menu .nav-link:hover {
  color: #ca506e !important; /* Akzentfarbe beim Hovern */
  text-decoration: underline;
}

/* ---------- 5. Mobiles Menü / Offcanvas-Panel (< 992px) ---------- */
@media (max-width: 991.98px) {

  /* Panel: weiß (die Beere gilt nur >= 992px), Schattenkante nach rechts */
  header .navbar-collapse,
  #mainNavigation {
    background-color: #ffffff;
    box-shadow: 4px 0 24px rgba(76, 29, 39, 0.18);
  }

  /* Titelzeile: Hellrosa wie die Top-Bar, dunkle Schrift, Beere-X */
  header .nav-mobile-header {
    background-color: #fdf0f2;
    border-bottom: 1px solid #f0dfea;
  }

  header .nav-mobile-header .nav-offcanvas-title {
    color: #4f4b4a;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none; /* „Zurück" ist ein <a> */
  }

  /* Chevron vor „Zurück" etwas deutlicher */
  header .nav-mobile-header .nav-offcanvas-title .fas {
    font-size: 0.95em;
  }

  header .nav-mobile-header .nav-mobile-header-hr {
    display: none; /* eigener Border unten ersetzt die Trennlinie */
  }

  header .nav-mobile-header .navbar-toggler {
    color: #ca506e; /* Burger/X-Zeichen folgt currentColor */
    width: 44px;    /* Touch-Target wie der äußere Burger */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Burger/X-Balken kräftiger: 24x3px statt 20x2px (die ::before/::after-
     Balken der NOVA-Animation erben die Höhe automatisch) */
  header .nav-mobile-header .navbar-toggler .navbar-toggler-icon,
  #burger-menu .navbar-toggler-icon {
    width: 1.5rem;
    height: 0.1875rem;
  }

  /* Menü-Einträge */
  #mainNavigation .navbar-nav .nav-link,
  #mainNavigation .navbar-nav a:not(.nav-link):not(.dropdown-close-btn) {
    color: #4f4b4a;
    font-size: 15px;
    font-weight: 500;
  }

  #mainNavigation .navbar-nav .nav-link:hover,
  #mainNavigation .navbar-nav .nav-link:focus {
    background-color: #f6e7ea;
    color: #8c2e43;
  }

  #mainNavigation .navbar-nav .nav-item.active > .nav-link {
    color: #8c2e43;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #ca506e; /* Aktiv-Marker links, ohne Layout-Shift */
  }

  /* Ebenen-Pfeile (Chevron) in Beere */
  #mainNavigation .navbar-nav .nav-item.dropdown > .nav-link::after {
    color: #ca506e;
  }

  /* Unterkategorien: Pfeil bleibt rechts neben dem Namen. Bootstrap-.d-block
     erzwingt display:block (!important) auf den Links — der Chevron (::after)
     rutscht dadurch als Inline-Element unter den vollen Breite belegenden
     Namen. Flex-Layout mit nicht schrumpfendem Pfeil fixiert das. */
  #mainNavigation .navbar-nav a.nav-link.d-block {
    display: flex !important;   /* .d-block (!important) übersteuern */
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  #mainNavigation .navbar-nav a.nav-link.d-block > span {
    flex: 1 1 auto;
    min-width: 0;               /* Name darf schrumpfen (Ellipsis/Umbruch) */
  }

  #mainNavigation .navbar-nav a.nav-link.d-block::after {
    flex-shrink: 0;
    margin-left: 0;             /* Abstand übernimmt gap */
  }

  /* Ebenen-Titel ("Alle X zeigen") */
  #mainNavigation .nav-mobile-heading {
    font-size: 15px;
    font-weight: 600;
    color: #4f4b4a;
  }

  #mainNavigation .nav-mobile-heading.font-weight-bold-util {
    color: #ca506e;
  }

  /* Trennlinien (vor Merkzettel/Vergleich/Kopf-Links) dezent */
  #mainNavigation .navbar-nav hr {
    border-color: #f0dfea;
    opacity: 1;
    margin: 0.25rem 1rem;
  }

  /* Zähler-Badges (Merkzettel, Vergleichsliste) */
  #mainNavigation .product-count {
    background-color: #ca506e;
    color: #ffffff;
  }

  /* Kontakt-Karte am Menüende (Kopf-Links: Adresse/Telefon/E-Mail).
     Markup rendert das Child-Override snippets/categories_mega.tpl,
     tel:-/Maps-Rewrite übernimmt custom.js (Selektor a.contact-link).
     Selektoren bewusst so spezifisch, dass sie die allgemeinere Regel
     „#mainNavigation .navbar-nav a:not(.nav-link)…“ (15px) übersteuern. */
  #mainNavigation .navbar-nav > li.mobile-contact {
    padding: 0.375rem 1rem 1rem;
  }

  .mobile-contact-card {
    background-color: #fdf0f2;
    border: 1px solid #f0dfea;
    border-radius: 12px;
    padding: 0.5rem 1rem 0.625rem;
  }

  .mobile-contact-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a23b53;
    padding: 0.25rem 0;
  }

  #mainNavigation .navbar-nav li.mobile-contact a.contact-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px; /* Touch-Target */
    padding: 0.375rem 0;
    color: #4f4b4a;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    white-space: normal; /* lange Adresse darf zweizeilig umbrechen */
  }

  #mainNavigation .navbar-nav li.mobile-contact a.contact-link + a.contact-link {
    border-top: 1px solid #f0dfea;
  }

  #mainNavigation .navbar-nav li.mobile-contact a.contact-link:hover,
  #mainNavigation .navbar-nav li.mobile-contact a.contact-link:focus {
    color: #8c2e43;
    text-decoration: underline;
  }

  .contact-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #ca506e;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #mainNavigation .navbar-nav li.mobile-contact a.contact-link:hover .contact-icon,
  #mainNavigation .navbar-nav li.mobile-contact a.contact-link:focus .contact-icon {
    background-color: #f6e7ea;
  }

  .contact-text {
    min-width: 0;
    /* KEIN overflow-wrap:anywhere — würde E-Mail/Telefon mitten im Wort
       zerbrechen („mai@maiwell.co / m"). Adresse/Telefon brechen dank
       Leerzeichen ohnehin sauber; alle drei Werte passen einzeilig. */
    overflow-wrap: normal;
  }

  /* Burger im Kopfbereich: Beere, großzügiges Touch-Target */
  #burger-menu {
    color: #ca506e;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Suchleiste unter dem Header im Paletten-Rosa */
  .resp-search#search .input-group {
    background-color: #f6e7ea;
  }

  /* Logo: Die fixe 80px-Höhe aus my-nova.css (header.fixed-navbar .navbar-brand
     img) quetscht das Seitenverhältnis (Original 300x75) auf ~120x80 zusammen —
     Höhe automatisch lassen, Breite zur 50px-Zeile passend. */
  header.fixed-navbar .navbar-brand img {
    height: auto;
    width: 130px;
    max-width: 34vw;
  }

  /* Konto-/Merkzettel-/Warenkorb-Icons etwas größer (my-nova: 16px) */
  header nav.navbar #shop-nav .nav-link svg {
    width: 20px;
    height: 20px;
  }
}

/* ---------- 6. Konto-Dropdown mobil: Vollbild-Overlay mit Titelzeile + X ---------- */
/* Titelzeile & X-Button rendert layout/header_shop_nav_account.tpl
   (.dropdown-overlay-header / .dropdown-close-btn). */
.dropdown-overlay-header,
.dropdown-close-btn {
  display: none; /* nur im Overlay (< 768px) sichtbar */
}

@media (max-width: 767.98px) {
  .account-icon-dropdown .dropdown-menu.show {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* Berücksichtigt dynamische Browser-Leisten */
    max-width: 100% !important;
    margin: 0 !important;
    padding: 64px 24px 30px 24px !important; /* Platz für Titelzeile + X */
    border: none !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
    z-index: 99999 !important;
    overflow-y: auto;
    transform: none !important;
  }

  .account-icon-dropdown .dropdown-overlay-header {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    align-items: center;
    justify-content: center;
    background-color: #fdf0f2;
    border-bottom: 1px solid #f0dfea;
    font-size: 16px;
    font-weight: 600;
    color: #4f4b4a;
  }

  .dropdown-close-btn {
    display: block;
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: none;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    color: #ca506e; /* Haupt-Farbe für das X */
    cursor: pointer;
    z-index: 100000;
    padding: 8px 12px; /* großzügiges Touch-Target */
  }

  /* Formularinhalte im Overlay optimal ausrichten */
  .account-icon-dropdown .dropdown-body {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---------- 7. Tablet-Range (541–991px): Header-Offset ohne Topbar-Anteil ---------- */
/* my-nova.css setzt global margin-top 161px (40px Topbar + 121px Header);
   unter 992px ist die Topbar versteckt, der mobile Header ist ~109px hoch
   (gleicher Wert wie im Bestands-MQ <= 540px). */
@media (min-width: 540.02px) and (max-width: 991.98px) {
  body {
    margin-top: 109px;
  }
}

/* ---------- 8. Breadcrumb: Trenner nie allein am Zeilenanfang ---------- */
/* NOVA hängt den Trenner als ::before an den FOLGENDEN Eintrag
   (.breadcrumb-item + .breadcrumb-item::before) — bricht die Kette um,
   beginnt die neue Zeile mit einem vereinsamten Trennzeichen. Stattdessen:
   Trenner ans Ende des vorherigen Eintrags binden; unter 768px sind die
   Einträge ohnehin ausgeblendet (nur Rück-Pfeil), die Regeln sind dort wirkungslos. */
.breadcrumb-item + .breadcrumb-item::before {
  content: none;
}

.breadcrumb-item:not(:last-child)::after {
  content: "/";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  color: #707070;
}

/* ---------- 9. Sprachschalter: Flagge + ISO-Code ---------- */
/* SVG-Flaggen liegen in themes/my-nova/img/flags/<iso>.svg und werden von
   snippets/language_dropdown.tpl eingebunden (Fallback: reiner Text). */
.lang-flag {
  display: inline-block;
  width: 21px;
  height: 14px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); /* sanfte Kante auf hellem Grund */
  margin-right: 8px;
  vertical-align: -2px;
  object-fit: cover;
}

/* ---------- 10. Artikelseite: Empfehlungs-Slider mit Startseiten-Optik ---------- */
/* NOVA rendert diese Überschriften als <div class="hr-sect h2"> — das Element
   trägt BEIDE Klassen selbst. Der Bestands-Selektor ".hr-sect h2" (Nachfahre)
   trifft sie daher nicht. Verbund-Selektor nehmen, damit die Balken wie auf
   der Startseite aussehen (x-sell "Kunden kauften dazu", x-related
   "Ähnliche Artikel", x-supplies Kategorie-/Cross-Slider). */
.hr-sect.h2 {
  background-color: #ca506e;
  color: #ffffff;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0;
  margin-bottom: 18px;
}

/* Mehr Luft zwischen den Empfehlungs-Blöcken */
.recommendations .slick-slider-other {
  margin-top: 28px;
  margin-bottom: 28px;
}

/* Styling für die Kauf-Mengenbegrenzung (Info-Box) */
.alert.purchase-info.alert-info {
  background-color: #fdf0f2 !important;      /* Hellrosa passend zur Top-Bar */
  border: 1px solid #f0dfea !important;      /* Dezenter rosa Rahmen */
  border-left: 4px solid #ca506e !important; /* Beeren-Akzentstreifen für Signalwirkung */
  color: #4f4b4a !important;                 /* Gut lesbare, dunkle Schrift */
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
}

/* Entfernt ungewollte Paragraphen-Abstände innerhalb der Box */
.alert.purchase-info.alert-info p {
  margin: 0;
  line-height: 1.4;
}

.hr-sect h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 12px 0;
  width: 100%;
  background-color: #ca506e;
  color: #fff;
  border-radius: 0px;
  font-size: 2.2em;
  line-height: 1.4em;
  padding: 10px;
}

/* ====================================================================
   Variations-Swatches im maiwell-Design "Beere & Rosa" — 09.09.2026
   Quadratische, gleich große Kacheln; kein Text-Überlauf; mobil 4/Reihe.
   Überschreibt NOVA-Defaults (Grau #707070, Aktiv-Gelb #F8BF00, Rot #b90000)
   aus my-nova.css; custom.css lädt als letzte Datei und gewinnt die Kaskade.
   ==================================================================== */

/* Grundform: quadratische Kacheln, füllt die Slider-Spalte (Bild + Text-Ersatz) */
.js-slider-items .variation.swatches-image,
.js-slider-items .variation.swatches-text {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid #dfa0a0;
  border-radius: 8px;
  background: #fff;
  color: #4f4b4a;
  text-align: center;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Bild füllt die Kachel (object-fit statt fixer 5.5rem-Breite + img-Padding) */
.js-slider-items .variation.swatches-image { padding: 4px; }
.js-slider-items .variation.swatches-image .square-image { width: 100%; height: 100%; }
.js-slider-items .variation.swatches-image .square-image .inner img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 0;
}

/* Hover: Beere-Rahmen + weicher Schatten (NOVA-Bildzoom scale(1.2) entfällt) */
.js-slider-items .variation.swatches-image:hover,
.js-slider-items .variation.swatches-text:hover {
  border-color: var(--main-color, #ca506e);
}
.js-slider-items .variation.swatches-image:hover {
  box-shadow: 0 4px 12px rgba(202, 80, 110, .18);
}
.js-slider-items .variation.swatches-image img:hover { transform: none; }

/* Aktiv: Beere-Rahmen als Innenring (kein Layout-Shift, wie Navigation), Hellrosa-Fläche */
.js-slider-items .variation.swatches-image.active,
.js-slider-items .variation.swatches-text.active {
  border-color: var(--main-color, #ca506e);
  background: #fdf0f2;
  box-shadow: inset 0 0 0 2px var(--main-color, #ca506e), 0 4px 12px rgba(202, 80, 110, .18);
}
.js-slider-items .variation.swatches-text.active {
  color: #8c2e43;
  font-weight: 700;
}

/* Text-Ersatzkacheln (Wert ohne Bild in der IMGSWATCHES-Reihe):
   Text bricht in der Kachel um und läuft nie über die Kachel hinaus */
.js-slider-items .variation.swatches-text {
  font-size: .75rem;
  line-height: 1.15;
  font-weight: 500;
  padding: .25rem;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Nicht verfügbar: Grau gestrichelt (Kombination nicht wählbar),
   dunkle Beere gestrichelt (ausverkauft); Deckkraft .5 kommt von NOVA */
.swatches .variation.not-available {
  border: 1px dashed #858585;
}
.swatches .variation.swatches-sold-out {
  border-color: #a23b53;
}

/* TEXTSWATCHES-Eigenreihe (Typ ohne Bilder, Auto-Breite ohne Slider):
   gleiche Farbwelt — Beere aktiv/hover, Rosé-Standard, 8px Radius */
.swatches.textswatches .variation.swatches-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  border: 1px solid #dfa0a0;
  border-radius: 8px;
  background: #fff;
  color: #4f4b4a;
  transition: border-color .2s ease, background-color .2s ease;
}
.swatches.textswatches .variation.swatches-text:hover {
  border-color: var(--main-color, #ca506e);
}
.swatches.textswatches .variation.swatches-text.active {
  border-color: var(--main-color, #ca506e);
  background: #fdf0f2;
  color: #8c2e43;
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--main-color, #ca506e);
}
.swatches.textswatches .variation.swatches-text.focus,
.swatches.textswatches .variation:focus-within {
  outline: 2px solid var(--main-color, #ca506e);
  outline-offset: 2px;
}
/* Nicht-verfügbar-Strichrahmen mit passender Spezifität zur Basisregel oben */
.swatches.textswatches .variation.swatches-text.not-available {
  border: 1px dashed #858585;
}
.swatches.textswatches .variation.swatches-text.swatches-sold-out {
  border-color: #a23b53;
}

/* Tastatur-Fokus: Beere statt NOVA-Gelb */
.js-slider-items .variation.swatches-image.focus,
.js-slider-items .variation.swatches-text.focus,
.js-slider-items .variation:focus-within {
  outline: 2px solid var(--main-color, #ca506e);
  outline-offset: 2px;
}

/* Aufpreis-Badge (falls aktiv) als Bändchen unten, statt die Kachel zu sprengen */
.js-slider-items .variation .variation-badge {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  font-size: .625rem;
  line-height: 1.2;
  padding: 0 4px;
  background: #fdf0f2;
  color: #8c2e43;
  border-radius: 4px;
}

/* Gewählter Wert im dt: dunkle Beere statt Bootstrap-Grün
   (text-success nutzt !important, daher hier ebenfalls) */
.variations .swatches-selected.text-success {
  color: #8c2e43 !important;
  font-weight: 600;
}

/* Slider-Chevrons in Beere */
.variation-wrapper .js-btn-slider-btns .btn-link { color: var(--main-color, #ca506e); }
.variation-wrapper .js-btn-slider-btns .btn-link:hover { color: var(--hover-color, #a23b53); }

/* Slider-Spalten inkl. Padding in der Prozentbreite halten (content-box
   lässt die letzte Kachel jeder Reihe überlaufen) */
.js-slider-wrapper .js-slider-items .js-slider-item {
  box-sizing: border-box;
}

/* Mobil: 4 Kacheln pro Reihe (NOVA-Standard: 5), kleinere Schrift;
   dd-Standard-Einrückung (UA margin-left 40px) kostet sonst fast eine ganze Kachel */
@media (max-width: 540px) {
  .variations dd.form-group {
    margin-left: 0;
  }
  .js-slider-wrapper .js-slider-items .js-slider-item {
    width: 25%;
    min-width: 25%;
  }
  .js-slider-items .variation.swatches-text {
    font-size: .6875rem;
  }
}


/* ====================================================================
   Produktkarten: Varianten-Auswahl IMMER sICHTBAR — 10.09.2026
   (v1.8.16: gekappte Vorschau mit „+N weitere"-Chip, einzeilige Farbnamen)
   Passend zum A77-Override productlist/item_box.tpl + eigene Vorschau-
   Datei variation_gallery_card.tpl (3 Text-/6 Bild-Kacheln sichtbar, Rest
   als More-Chip zur Detailseite): Der Wrapper ist kein Bootstrap-Collapse
   mehr (.variations-preview statt .productbox-onhover .collapse), damit
   versteckt NOVA die Auswahl nicht mehr bis zum Hover.
   Kompaktes Karten-Layout im Beere-Design; die Kachel-Styles des
   Detailseiten-Blocks oben greifen hier unverändert mit.
   ==================================================================== */

/* Abstände: NOVA gibt der Spalte margin-bottom:0, das entfallene
   Collapse-Padding (spacer) kommt hier kompakt zurück */
.productbox .productbox-variations .variations-preview {
  padding: .25rem .15rem .5rem;
}

/* Gruppen-Label (dt "Farbe") klein, dunkle Beere */
.productbox .productbox-variations .variations dt {
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 600;
  color: #8c2e43;
  margin-bottom: .125rem;
}
.productbox .productbox-variations .variations dd.form-group {
  margin: 0;
}

/* Bild-Swatch-Kacheln (IMGSWATCHES, quadratisch): füllen die Kartenbreite —
   ca. 3 pro Reihe, nie schmaler als 72px, nie breiter als halbe Karte;
   Kacheln umbrechen in die nächste Reihe (kein Slide; js-slider-wrapper
   ist auf Karten entfallen — siehe variation_gallery_card.tpl). Fixe 56px
   (v1.8.14) waren auf Desktop zu schmal. */
.productbox .productbox-variations .js-slider-items {
  flex-wrap: wrap;
}
.productbox .productbox-variations .js-slider-items .js-slider-item {
  flex: 1 1 30%;
  min-width: 72px;
  max-width: 50%;
  padding-left: 4px;
  padding-right: 4px;
}

/* Text-Swatch-Kacheln: EINZEILIG und auto-breit — Farbnamen brechen nicht
   mehr um und silbentrennen sich nicht (v1.8.14/15 pressten sie ins
   Quadrat: „Cappucino/Weiß" → „Cap-puci-no"); lange Namen werden einfach
   breiter. Gilt im Karten-Kontext für TEXTSWATCHES-Chips und Text-Ersatz-
   kacheln in Bild-Reihen; überschreibt das quadratische Detailseiten-
   Styling (gleiche Spezifität 0,4,0, aber später in der Datei). */
.productbox .productbox-variations .swatches .variation.swatches-text {
  width: auto;
  min-width: 0;
  aspect-ratio: auto;
  min-height: 2.25rem;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  font-size: .78rem;
  line-height: 1.2;
  padding: .3rem .55rem;
}

/* „+N weitere"-Chip (variation_gallery_card.tpl): Link auf die Detailseite,
   macht weitere Varianten sichtbar, ohne die Karte in die Länge zu ziehen */
.productbox .productbox-variations .swatches .variation-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: .3rem .55rem;
  border: 1px dashed var(--main-color, #ca506e);
  border-radius: 8px;
  background: #fdf0f2;
  color: #8c2e43;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.productbox .productbox-variations .swatches .variation-more:hover,
.productbox .productbox-variations .swatches .variation-more:focus {
  border-style: solid;
  background: #fff;
  color: var(--hover-color, #a23b53);
  box-shadow: 0 4px 12px rgba(202, 80, 110, .18);
}

/* Weißer Hintergrund, während die gehoverte Karte über Nachbarkarten hebt
   (NOVA koppelte ihn an die entfallene Klasse .show-variation-collapse) */
#product-list.layout-gallery .productbox-hover.productbox-show-variations:hover {
  background-color: #fff;
}

/* Mobil: Bild-Kacheln mit 25% der Kartenbreite wie auf der Detailseite
   (4/Reihe); flex-Basis/Max-Breite der Desktop-Regel komplett zurücksetzen
   (gleiche Selektor-Spezifität, darum zuletzt). Text-Chips/More-Chips
   kleiner, weiterhin einzeilig. */
@media (max-width: 540px) {
  .productbox .productbox-variations .js-slider-items .js-slider-item {
    flex: 0 0 25%;
    width: 25%;
    min-width: 0;
    max-width: 25%;
    padding-left: 3px;
    padding-right: 3px;
  }
  .productbox .productbox-variations .swatches .variation.swatches-text,
  .productbox .productbox-variations .swatches .variation-more {
    min-height: 2rem;
    font-size: .6875rem;
    padding: .22rem .4rem;
  }
}


/* ====================================================================
   Unterkategorien-Boxen auf Kategorieseiten (z.B. "Salonaustattung")
   — maiwell-Design "Beere & Rosa", 10.09.2026
   Markup (NOVA-Parent, productlist/header.tpl):
   .row.content-cats-small > .col-12/.col-md-4/.col-lg-3
     > .sub-categories > div > .caption > a
   Im Karten-Stil der Produktkarten (weiße Karte, weicher Schatten,
   Beere-Hover mit Lift). Ganze Karte klickbar über Stretched-Link-
   ::before (Title-Link bleibt static, damit sich ::before an der
   Karte .sub-categories ausrichtet).
   ==================================================================== */

/* --- Desktop (>= 768px): Karte im Produktkarten-Stil ---------------- */
@media (min-width: 768px) {
  .content-cats-small .sub-categories {
    position: relative;                /* Anker für die Klickfläche des Titel-Links */
    background: #ffffff;
    border-radius: 16px;
    padding: 1.6rem 1rem;
    justify-content: center;           /* Titel auch bei Einzeilern vertikal zentrieren */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .content-cats-small .sub-categories:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(202, 80, 110, 0.18);
  }
}

/* Titel-Link: Typo wie Produkttitel, wachsende Beere-Unterstreichung */
.content-cats-small .caption {
  margin-bottom: 0;
}
.content-cats-small .caption a {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: #2d2d2d;
  text-decoration: none;
}
/* Klickfläche über die gesamte Karte legen (Stretched Link) */
.content-cats-small .caption a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.content-cats-small .caption a::after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  margin: 0.4rem auto 0;
  background: var(--main-color, #ca506e);
  border-radius: 2px;
  transition: width 0.22s ease;
}
.content-cats-small .sub-categories:hover .caption a,
.content-cats-small .caption a:hover,
.content-cats-small .caption a:focus {
  color: var(--hover-color, #a23b53);
}
.content-cats-small .sub-categories:hover .caption a::after,
.content-cats-small .caption a:hover::after,
.content-cats-small .caption a:focus::after {
  width: 2rem;
}
/* Tastatur-Fokus wie bei den Swatches: Beere-Outline */
.content-cats-small .caption a:focus-visible {
  outline: 2px solid var(--main-color, #ca506e);
  outline-offset: 4px;
}

/* --- Mobil (< 768px): 2 Spalten statt gestapelter Vollzeilen -------- */
@media (max-width: 767px) {
  /* Bootstrap-.row-Negative-Margins und .col-12-Gutter-Padding für
     den Grid-Betrieb neutralisieren, Abstand über gap */
  .content-cats-small {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-left: 0;
    margin-right: 0;
  }
  .content-cats-small > .col-12 {
    padding-left: 0;
    padding-right: 0;
  }
  .content-cats-small .sub-categories {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    padding: 0.9rem 0.5rem;
    min-height: 84px;                 /* einheitliche Tippflächen, auch bei kurzen Namen */
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
  }
  .content-cats-small .sub-categories:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(202, 80, 110, 0.15);
  }
  .content-cats-small .caption a {
    font-size: 0.875rem;
  }
  .content-cats-small .caption a::after {
    margin-top: 0.3rem;
  }
}

/* --- Absicherung für Kategorien mit Bild/Beschreibung/Lvl2-Liste ---- */
.content-cats-small .subcategories-image {
  margin-bottom: 1rem;
  justify-content: center;
}
.content-cats-small .item_desc {
  color: #858585;
}
.content-cats-small hr {
  border-top: 1px solid var(--bright-color, #f0dfea);
}
/* Lvl2-Links müssen über der Klickfläche der Karte liegen bleiben */
.content-cats-small ul {
  position: relative;
  z-index: 1;
  padding-left: 0;
  list-style: none;
}
.content-cats-small ul li a {
  font-size: 0.875rem;
  color: #4f4b4a;
}
.content-cats-small ul li a:hover {
  color: var(--hover-color, #a23b53);
}