/* =========================================================
   CUSTOM.CSS – bereinigt für PrestaShop Classic / PS 9.0.3
   Stand: Produktkacheln, Slider, Produktseite, Modal
   ========================================================= */

/* =========================================================
   Startseiten-Slider / Karussell
   ========================================================= */

body {
  font-family: Manrope,sans-serif;
  font-size: 1rem;
  line-height: normal;
}

#header .header-top {
  padding: .5rem 0;
}
#main .page-content, #main .page-footer, #main .page-header {
  margin-bottom: .5rem;
}
.footer-container {
  padding-top: 1.25rem;
  overflow: hidden;
}

/* Logo in KuL ausblenden */
#_desktop_logo,
#_mobile_logo.top-logo {
  display: none;
}

/* Logo breit kleiner */

@media (min-width: 768px) {
  .col-md-2, .col-md-3 {
    float: left;
    width: auto;
  }
}

/* a.quick-view.js-quick-view,
.highlighted-informations,
.all-product-link,
.products-section-title {
  display: none;
} */

a.quick-view.js-quick-view,
.highlighted-informations,
.all-product-link,
.products-section-title {
  display: none;
}

/* Keine automatische Großschreibung im Slider-Titel */
#carousel.carousel.slide ul.carousel-inner li.carousel-item figure figcaption.caption h2.display-1.text-uppercase {
  text-transform: none !important;
}

.carousel .carousel-item .caption .display-1 {
  font-size: 2rem;
  font-weight: 700;
}

/* Slider ab Desktop mittig halten */
#index #carousel.carousel,
#carousel.carousel {
  position: relative !important;
  width: 100% !important;
  max-width: 1110px !important;
  margin: 1rem auto 0 auto !important;
  overflow: hidden !important;
}

#index #carousel .carousel-inner,
#carousel .carousel-inner {
  width: 100% !important;
  max-width: 1110px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
}

#index #carousel .carousel-item,
#carousel .carousel-item {
  width: 100% !important;
  text-align: center !important;
}

#index #carousel .carousel-item figure,
#carousel .carousel-item figure {
  position: relative !important;
  width: 100% !important;
  max-width: 1110px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

#index #carousel .carousel-item img,
#carousel .carousel-item img {
  display: block !important;
  width: 100% !important;
  max-width: 1110px !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* Pfeile innerhalb des Sliderbildes */
#index #carousel .direction,
#carousel .direction {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

#index #carousel .carousel-control.left,
#index #carousel .carousel-control.right,
#carousel .carousel-control.left,
#carousel .carousel-control.right {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 8% !important;
  min-width: 42px !important;
  max-width: 70px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  z-index: 11 !important;
}

#index #carousel .carousel-control.left,
#carousel .carousel-control.left {
  left: 0 !important;
  right: auto !important;
}

#index #carousel .carousel-control.right,
#carousel .carousel-control.right {
  right: 0 !important;
  left: auto !important;
}

#index #carousel .carousel-control .icon-prev,
#index #carousel .carousel-control .icon-next,
#carousel .carousel-control .icon-prev,
#carousel .carousel-control .icon-next {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
}

#index #carousel .carousel-control .material-icons,
#carousel .carousel-control .material-icons {
  position: static !important;
  display: block !important;
  font-size: 42px !important;
  line-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Karussell unter 995px komplett ausblenden */
@media (max-width: 994px) {
  #carousel,
  #carousel.carousel,
  #index #carousel,
  #index #carousel.carousel {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   Startseiten-CMS-Text
   ========================================================= */

.products.row {
  margin: 0 -.3rem;
}

#custom-text {
  text-align: center;
  background: #fff;
  border-radius: 2px;
  padding: 1.25rem 1.5rem;
  margin-bottom: .3rem;
}

#custom-text .page-content.page-cms ul,
#custom-text p,
.page-content.page-cms #custom-text ul {
  font-size: .975rem;
  font-weight: 400;
  color: #000;
}


/* =========================================================
   Allgemeine Ausblendungen
   ========================================================= */

#products .page-not-found {
  max-width: 100%;
  padding: 1rem;
  margin: 0 auto;
  margin-bottom: 0;
  overflow: auto;
  font-size: .875rem;
  color: #7a7a7a;
  background: #fff;
}

/* =========================================================
   Kopfbereich / Menü
   ========================================================= */

:root {
  --mls-aqua: #3ddad7;
  --mls-blue: #2a7de1;
  --mls-green: #3bb273;
  --mls-coral: #ff6f61;
  --mls-white: #ffffff;
  --mls-dark: #000000;
}

/* Banner und Menübereich größer */
@media (min-width: 768px) {
  .col-md-10 {
    float: left;
    width: 100%;
  }
}

.header-top-right {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

.header-top-right .banner img {
  max-width: 100%;
  height: auto;
}

/* =========================================================
   Seitenbreite
   ========================================================= */

/* Container Breite */
@media (min-width: 1411px) {
  .container {
    width: 90%;
    max-width: 100%;
  }
}
@media (min-width: 100px) and (max-width: 1410px) {
  .container {
    width: 100%;
    max-width: 100%;
  }
}
@media (min-width: 1411px) {
.category-depth-level-2 main section#wrapper div.container {
    width: 100%;
    max-width: 100%;
  }
}

#left-column {
    padding-right: 5px;
  }
.category-id-parent-2.category-depth-level-2 main section#wrapper div.container div.row div#content-wrapper.js-content-wrapper.left-column.col-xs-12.col-md-8.col-lg-9 {
    padding-left: 5px;
  }

/* =========================================================
   Kategorieseiten: Sortierbereich ausblenden
   Hinweis: bewusst enger gefasst als .col-sm-3/.col-md-9,
   damit Bootstrap-Spalten nicht global verschwinden.
   ========================================================= */

.products-selection,
#js-product-list-top {
  display: none !important;
}

/* =========================================================
   Produktkacheln: 3 / 2 / 1 pro Reihe, ohne künstliche Höhen
   ========================================================= */

/* Produktlisten als flexibles Raster.
   Wichtig: nicht strecken, sonst entstehen leere Flächen unter Bild/Text. */
#products .products,
.featured-products .products,
.product-accessories .products {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

#contact-infos {
  color: #000;
  padding: 0 .625rem;
  font-size: .925rem;
  line-height: 1.75;
}
.footer-container .links ul > li a {
  color: #000;
  padding: .625rem;
  font-size: .925rem;
}

/* Große Bildschirme: 3 Kacheln pro Reihe */
#products .products .product,
.featured-products .products .product,
.product-accessories .products .product {
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
  width: 33.333333% !important;
  display: block !important;
  padding: 0 .3rem .8rem .3rem;
}

/* Mittlere Bildschirme: 2 Kacheln pro Reihe */
@media (max-width: 991px) {
  #products .products .product,
  .featured-products .products .product,
  .product-accessories .products .product {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}
/* Kleine Bildschirme / iPhone: 1 Kachel pro Reihe */
@media (max-width: 675px) {
  #products .products .product,
  .featured-products .products .product,
  .product-accessories .products .product {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: .4rem 1.5rem;
  }
}
/* Kleine Bildschirme / iPhone: 1 Kachel pro Reihe */
@media (max-width: 575px) {
  #products .products .product,
  .featured-products .products .product,
  .product-accessories .products .product {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: .4rem;
  }
}

/* Kategorie Bildschirm 2 Kacheln pro Reihe ab 1300px */
@media (max-width: 1300px) {
.category-depth-level-2 main section#wrapper div.container div.row div#content-wrapper.js-content-wrapper.left-column.col-xs-12.col-md-8.col-lg-9 section#main section#products div#js-product-list div.products.row div.js-product.product.col-xs-12.col-sm-6.col-xl-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-right: 5px;
    padding-left: 5px;
  }
}

/* Produktartikel und Kachelcontainer nicht künstlich auf gleiche Höhe ziehen */
/* Produktartikel und Kachelcontainer nicht künstlich auf gleiche Höhe ziehen */
#products .product-miniature,
.featured-products .product-miniature,
.product-accessories .product-miniature {
  display: block !important;
  width: 100% !important;
  max-width: 452px !important;
  height: auto !important;
  min-height: 0 !important;
  margin-right: auto !important;
  margin-bottom: 0;
  margin-left: auto !important;
  background: #fff !important;
  overflow: visible;
}

/* Der innere Kachelcontainer füllt die begrenzte Produktkachel vollständig aus */
.product-miniature .thumbnail-container {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin-bottom: 0;
  background: #fff !important;
  overflow: visible;
}

/* Oberer Bildbereich ohne zusätzliche Höhe */
.product-miniature .thumbnail-top {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Bildlink / Bildfläche:
   kein festes 2:1-Feld erzwingen, sondern die Bildhöhe vom Bild bestimmen lassen.
   Dadurch wird nichts oben/unten abgeschnitten und kein Leerraum unter dem Bild erzeugt. */
.product-miniature .product-thumbnail,
.product-miniature .thumbnail-container .product-thumbnail {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: #fff !important;
  aspect-ratio: auto !important;
}

.product-miniature .product-thumbnail picture,
.product-miniature .thumbnail-container .product-thumbnail picture {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Kachelbild: volle Kachelbreite, echte Höhe, kein Beschnitt */
.product-miniature .thumbnail-container .product-thumbnail img,
.product-miniature .product-thumbnail img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Textbereich direkt unter dem Bild, ohne künstliche Leerfläche.
   Die Werte für das Padding werden von custom.js je Kachel berechnet.
   Die Fallback-Werte gelten, solange JavaScript noch nicht ausgeführt wurde. */
.product-miniature .product-description {
  position: relative !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding:
    var(--product-description-pad-top, 0.35rem)
    var(--product-description-pad-x, 0.35rem)
    var(--product-description-pad-bottom, 0.55rem)
    !important;
  background: #fff !important;
}

/* Produkttitel: normale deutsche Schreibweise, mehrzeilig, kompakt */
.product-miniature .product-title {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0.25rem;
  line-height: 1.3;
  text-align: center !important;
  text-transform: none !important;
}

.product-miniature .product-title a {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
  height: auto !important;
  max-height: none !important;

  /* Die Schriftgröße wird von custom.js je Kachel berechnet.
     0.975rem ist der Fallback und zugleich die Obergrenze im JavaScript. */
  font-size: var(--product-title-font-size, 0.975rem) !important;
  font-weight: 500 !important;
  line-height: 1.3;
  color: #000 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;

  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

.product-miniature .product-title a:hover {
  color: #2a7de1 !important;
  text-decoration: none !important;
}
/* Bilder der Vorschau Sub-Kategorine auf Kategorieseiten - diese Bilder gibt es standardmäßig nicht */
#subcategories ul li .subcategory-image {
  display: none !important;
}
#subcategories ul li .subcategory-name {
  text-transform: none;
}
#subcategories ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0;
}
#subcategories ul li {
  flex: 0 0 auto;      /* verhindert 100%-Breite */
  width: auto;         /* NICHT 100% */
  min-width: 50px;
  margin: 5px 10px;
  text-align: left;
}
#subcategories .subcategory-heading {
  margin-bottom: 6px;
  font-weight: 500;
}

/* Nur das letzte Wort der Produktüberschrift nicht trennen */
.product-miniature .product-title a .last-word-no-hyphen {
  white-space: nowrap !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
}

/* Preisbereich nur kompakt halten, nicht nach unten drücken */
.product-miniature .product-price-and-shipping {
  margin-top: 0.25rem !important;
  padding-top: 0 !important;
  text-align: center !important;
}

/* =========================================================
   Produktseite: Thumbnails offen anzeigen, Slider-Pfeile ausblenden
   ========================================================= */

#content.page-content div.scroll-box-arrows.scroll,
#content.page-content div.scroll-box-arrows.scroll i.material-icons.left,
#content.page-content div.scroll-box-arrows.scroll i.material-icons.right,
body#product .scroll-box-arrows,
body#product .scroll-box-arrows .material-icons {
  display: none !important;
}

body#product .js-qv-mask.mask {
  overflow: visible !important;
  width: 100% !important;
  margin-top: 1rem !important;
}

body#product .js-qv-mask.mask ul.product-images,
body#product .js-qv-mask.mask .product-images.js-qv-product-images {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.7rem !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

body#product .js-qv-mask.mask .thumb-container,
body#product .js-qv-mask.mask .js-thumb-container {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body#product .js-qv-mask.mask img.thumb,
body#product .js-qv-mask.mask .js-thumb {
  display: block !important;
  width: auto !important;
  height: 70px !important;
  max-width: 160px !important;
  object-fit: contain !important;
  background: #fff !important;
}

body#product .js-qv-mask.mask img.thumb.selected,
body#product .js-qv-mask.mask .js-thumb-selected {
  border: 2px solid #24b9d7 !important;
}


/* =========================================================
   Produktbild-Popup:
   großes Bild groß und unverzerrt,
   Thumbnails senkrecht untereinander
   ========================================================= */

#product-modal.modal .modal-dialog {
  width: 92vw !important;
  max-width: 1300px !important;
  margin: 30px auto !important;
}

#product-modal.modal .modal-content .modal-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  margin-left: 0 !important;
  padding: 20px !important;
}

#product-modal.modal .modal-content .modal-body .product-images {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  width: 9.25rem !important;
  min-width: 9.25rem !important;
  max-width: 9.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 10px !important;
}

#product-modal.modal .modal-content .modal-body .product-images li {
  display: block !important;
  width: 9.25rem !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#product-modal.modal .modal-content .modal-body .product-images img {
  display: block !important;
  width: 9.25rem !important;
  height: auto !important;
  object-fit: contain !important;
  cursor: pointer !important;
  background: #fff !important;
}

#product-modal.modal .modal-body figure {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: calc(100% - 9.25rem - 20px) !important;
  margin: 0 !important;
}

#product-modal.modal .modal-body figure picture {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 1 !important;
}

#product-modal.modal .modal-body figure picture img,
#product-modal.modal .modal-body figure img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 80vh !important;
  object-fit: contain !important;
}
/* Banner und Conten mittig */
#wrapper .banner {
  text-align: center;
  margin-bottom: 1rem;
}

/* =========================================================
   Custom-Text: Bild links 45%, Text rechts 55%
   ========================================================= */

#custom-text {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2rem !important;

  font-family: Manrope, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
}

/* erster Absatz: Text rechts */
#custom-text > p:first-of-type {
  order: 2 !important;
  flex: 0 0 calc(55% - 1rem) !important;
  width: calc(55% - 1rem) !important;
  max-width: calc(55% - 1rem) !important;
  margin: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* zweiter Absatz: Bild links */
#custom-text > p:nth-of-type(2) {
  order: 1 !important;
  flex: 0 0 calc(45% - 1rem) !important;
  width: calc(45% - 1rem) !important;
  max-width: calc(45% - 1rem) !important;
  margin: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Bild füllt die linke 45%-Spalte */
#custom-text > p:nth-of-type(2) img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* =========================================================
   Custom-Text und Bild unter px wieder untereinander
   Unter 1100px: Text oben, Bild darunter
   ========================================================= */

/* Unter 1100px: dein Original-Layout */
@media (max-width: 1100px) {
  #custom-text {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  #custom-text > p:first-of-type {
    order: 1 !important;
  }

  #custom-text > p:nth-of-type(2) {
    order: 2 !important;
  }

  #custom-text > p:first-of-type,
  #custom-text > p:nth-of-type(2) {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #custom-text > p:nth-of-type(2) img {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Bildgröße unter 991px: nur Layout, keine Breiten-Verkleinerung */
@media (max-width: 991px) {
  #custom-text > p:first-of-type,
  #custom-text > p:nth-of-type(2) {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #custom-text > p:nth-of-type(2) img {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Bildgröße unter 576px: bleibt 100% */
@media (max-width: 576px) {
  #custom-text > p:first-of-type,
  #custom-text > p:nth-of-type(2) {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #custom-text > p:nth-of-type(2) img {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Ab 1100px: Text + Bildblock 100% Breite, Bild immer 100% */
@media (min-width: 1100px) {
  #custom-text > p:first-of-type,
  #custom-text > p:nth-of-type(2) {
    width: 100% !important;
    max-width: 100% !important;
  }

  #custom-text > p:nth-of-type(2) img {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Media‑Query‑Stufen: Paddings für das custom Textfeld */

/* Ab 1411px: Text 0 6rem, Bildblock 0 */
@media (min-width: 1411px) {
  #custom-text > p:first-of-type {
    padding: 0 3rem;
  }
  #custom-text > p:nth-of-type(2) {
    padding: 0;
  }
}

/* 1331px–1410px: Text 0 4rem, Bildblock 0 */
@media (min-width: 1331px) and (max-width: 1410px) {
  #custom-text > p:first-of-type {
    padding: 0 4rem;
  }
  #custom-text > p:nth-of-type(2) {
    padding: 0;
  }
}

/* 1201px–1330px: Text 0 3rem, Bildblock 0 */
@media (min-width: 1201px) and (max-width: 1330px) {
  #custom-text > p:first-of-type {
    padding: 0 3rem;
  }
  #custom-text > p:nth-of-type(2) {
    padding: 0;
  }
}

/* 1101px–1120px: Text 0 2rem, Bildblock 0 */
@media (min-width: 1101px) and (max-width: 1200px) {
  #custom-text > p:first-of-type {
    padding: 0 2rem;
  }
  #custom-text > p:nth-of-type(2) {
    padding: 0;
  }
}

/* 992px–1100px: Text und Bildblock 0 8rem */
@media (min-width: 992px) and (max-width: 1100px) {
  #custom-text > p:first-of-type,
  #custom-text > p:nth-of-type(2) {
    padding: 0 8rem;
  }
}

/* 700px–991px: Text und Bildblock 0 4rem */
@media (min-width: 701px) and (max-width: 991px) {
  #custom-text > p:first-of-type,
  #custom-text > p:nth-of-type(2) {
    padding: 0 3rem;
  }
}

/* 576px–700px: Text und Bildblock 0 4rem */
@media (min-width: 576px) and (max-width: 700px) {
  #custom-text > p:first-of-type,
  #custom-text > p:nth-of-type(2) {
    padding: 0 1rem;
  }
}

/* Unter 575px: Text und Bildblock 0 */
@media (max-width: 575px) {
  #custom-text > p:first-of-type,
  #custom-text > p:nth-of-type(2) {
    padding: 0;
  }
}

/* Sitemap ausgeblendet was nicht aktut ist */ 
body#sitemap .col-md-3:has(#new-product-page),
body#sitemap .col-md-3:has(#manufacturer-page),
body#sitemap .col-md-3:has(#login-page),
body#sitemap .col-md-3:has(#register-page) {
  display: none !important;
}
.sitemap div.col-md-3 ul li a#stores-page  {
  display: none !important;
}

/* ================================
   FORMATE – Layout-Korrekturen
   ================================ */

/* Entfernt die graue Textfarbe von PrestaShop */
#category-description.text-muted {
  color: #000;
}

/* Standard-Spacing neutralisieren */
#category-description .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Spalten sauber ausrichten */
#category-description .col-xs-12.col-sm-4 {
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin-bottom: 15px;
}

/* Einheitliche Box-Gestaltung */
#category-description .cms-box,
#category-description .cms-block {
  background: #fff;
  border: 1px solid #e5e5e5;
  padding: 20px;
  border-radius: 4px;
  min-height: 100%;
}

/* Überschriften angleichen */
#category-description .page-subheading {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #000;
}

/* Starke Zeile */
#category-description .dark {
  color: #000 !important;
  font-weight: 600;
}

/* Abstand zwischen den beiden Boxen in Spalte 3 */
#category-description .col-sm-4 .cms-box + .cms-box {
  margin-top: 30px !important;
}

/* Paragraphen lesbarer machen */
#category-description p {
  line-height: 1.55;
  margin-bottom: 12px;
  color: #000;
}

/* Mobile: Boxen untereinander mit gutem Abstand */
@media (max-width: 767px) {
  #category-description .col-xs-12 {
    margin-bottom: 25px;
  }
}

/* Text angepasst für page-cms*/
b, strong {
  font-weight: bolder;
   color: #000;
}
*, ::after, ::before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
*, ::after, ::before {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
.product-information .product-description ul li,
.page-content.page-cms ul, p {
  font-size: .975rem;
  font-weight: 400;
  color: #000;
}

/* PrestaShop-Hinweis */
p.text-sm-center {
  font-size: .875rem;
  font-weight: 500;
  margin-top: .5rem;
}

/* Anzeige Artikelnummer abgeschaltet */
li.nav-item:nth-child(2) {
  display: none !important;
}

.block-categories .h6 {
  font-size: 1.25rem;
  font-weight: 700;
}
#subcategories {
  margin-bottom: 10px;
  border-top: 1px solid #f6f6f6;
  display: none;
}
.card-block {
  padding: .5rem 1.25rem .2rem;
}
.block-category h1 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
}
.block-category {
  min-height: 2.5rem;
  margin-bottom: .8rem;
}
/* Abstand Menüblock columne left */
.block-categories {
  padding: 1rem;
  margin-bottom: 1rem;
  }
.block-category .block-category-inner #category-description .page-content.page-cms ul:first-child, .block-category .block-category-inner #category-description p:first-child, .page-content.page-cms .block-category .block-category-inner #category-description ul:first-child {
  margin-bottom: .5rem;
}
.block-category .block-category-inner #category-description .page-content.page-cms ul, .block-category .block-category-inner #category-description p, .page-content.page-cms .block-category .block-category-inner #category-description ul {
  font-weight: 400;
  margin-bottom: 12px;
  color: #000000;
  word-break: break-word;
}
.block-categories .category-sub-menu {
  margin-top: .5rem;
}
.block-categories .category-sub-menu li {
  margin-top: .5rem;
}
.block-categories .category-sub-menu li[data-depth="1"], .product-prices div {
  margin-bottom: .5rem;
}
.block-categories .category-sub-menu li[data-depth="0"] > a {
  display: inline-block;
  width: 100%;
  padding-bottom: 0;
  font-weight: 600;
}
.block-category .block-category-inner #category-description strong {
  font-weight: 900;
  color: #000000;
}
.block-categories .category-sub-menu .category-sub-link {
  font-size: .9rem;
  color: #000000;
}
/* Kategoriebaum in der linken Spalte immer vollständig geöffnet */
.block-categories .collapse {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
}
/* Auf- und Zuklapp-Steuerung im Kategoriebaum ausblenden */
.block-categories .navbar-toggler.collapse-icons,
.block-categories .category-sub-menu .arrows {
  display: none !important;
}

#main {
    display: flex;
    flex-direction: column;
}
#products {
    order: 1;
}
#js-product-list-header {
    order: 2;
}
.pagination {
display: none;
}

@media (max-width: 767px) {
  .links .collapse, .links .title[aria-expanded="true"] .collapse-icons .remove {
    display: block;
  }
}

/* Facetten Filter Abstände anpassen */
#search_filters, #search_filters_brands, #search_filters_suppliers {
  padding: 1rem;
  margin-bottom: 1rem;
}

#search_filters .facet, #search_filters_brands .facet, #search_filters_suppliers .facet {
  padding-top: 0;
}

@media (max-width: 767px) {
  .footer-container .links ul > li {
    padding: .1rem;
    font-weight: 600;
    border-bottom: 1px solid #fff;
  }
}
#footer {
  padding-top: 0;
}
.text-uppercase {
  text-transform: none !important;
}

#products .products-section-title, .featured-products .products-section-title, .product-accessories .products-section-title {
  margin: .9rem 0 .5rem 0;
  font-weight: 500;
  text-align: center;
}

#products .all-product-link, .featured-products .all-product-link, .product-accessories .all-product-link {
  margin-top: 0;
  margin-bottom: 0;
  clear: both;
  font-size: 1.1rem;
  font-weight: 900;
  color: #24b9d7;
}

.mt-3 {
  margin-top: 0 !important;
}

/* =========================================================
   Produkt-Flags auf Produktkacheln

   Obere Reihe:
   Neu | Rabatt | Sonderpreis

   Untere Reihe:
   Artikelbündel
   ========================================================= */

.product-miniature .thumbnail-container {
  position: relative !important;
}

/* Gemeinsamer Container für alle Produkt-Flags */
.product-miniature ul.product-flags.js-product-flags,
.product-miniature .product-flags {
  position: absolute !important;
  top: -15px !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 10 !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;

  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
  white-space: nowrap !important;
}

/* Grundformat aller einzelnen Flags */
.product-miniature .product-flags li.product-flag {
  position: static !important;
  float: none !important;

  display: block !important;
  flex: 0 0 auto !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0.3125rem 0.4375rem !important;

  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;

  color: #ffffff !important;
  background: #24b9d7 !important;
  overflow: visible !important;
}

/* Neu: links, helles Türkis */
.product-miniature .product-flags li.product-flag.new {
  order: 1 !important;
  background: #55d6d0 !important;
}

/* Rabatt-Prozent */
.product-miniature .product-flags li.product-flag.discount {
  order: 2 !important;
  background: #24b9d7 !important;
}

/* Sonderpreis */
.product-miniature .product-flags li.product-flag.on-sale {
  order: 3 !important;
  background: #b00 !important;
}

/* Artikelbündel:
   unterhalb der oberen Reihe,
   kleiner und dunkelblau */
.product-miniature .product-flags li.product-flag.pack {
  position: absolute !important;
  top: calc(100% + 3px) !important;
  left: 0 !important;

  order: 4 !important;
  flex: none !important;

  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0.22rem 0.4rem !important;

  font-size: 0.82rem !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: nowrap !important;

  color: #ffffff !important;
  background: #2567a8 !important;
}

/* =========================================================
   Produkt-Flags auf der Artikelseite

   Obere Reihe:
   Neu | Rabatt | Sonderpreis

   Untere Reihe:
   Artikelbündel
   ========================================================= */

/* Bildbereich als Bezugspunkt für die Flaggen */
body#product section#content.page-content {
  position: relative !important;
}

/* Flaggencontainer auf der normalen Artikelseite */
body#product section#content.page-content
> ul.product-flags.js-product-flags {
  position: absolute !important;
  top: -15px !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 20 !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;

  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
  white-space: nowrap !important;
}

/* Grundformat aller Flaggen auf der Artikelseite */
body#product section#content.page-content
> ul.product-flags.js-product-flags
> li.product-flag {
  position: static !important;
  float: none !important;

  display: block !important;
  flex: 0 0 auto !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0.3125rem 0.4375rem !important;

  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;

  color: #ffffff !important;
  background: #24b9d7 !important;
  overflow: visible !important;
}

/* Neu: links und helltürkis */
body#product section#content.page-content
> ul.product-flags.js-product-flags
> li.product-flag.new {
  order: 1 !important;
  background: #55d6d0 !important;
}

/* Rabatt-Prozent */
body#product section#content.page-content
> ul.product-flags.js-product-flags
> li.product-flag.discount {
  order: 2 !important;
  background: #24b9d7 !important;
}

/* Sonderpreis */
body#product section#content.page-content
> ul.product-flags.js-product-flags
> li.product-flag.on-sale {
  order: 3 !important;
  background: #b00 !important;
}

/* Artikelbündel:
   unterhalb der oberen Reihe,
   kleiner und dunkelblau */
body#product section#content.page-content
> ul.product-flags.js-product-flags
> li.product-flag.pack {
  position: absolute !important;
  top: calc(100% + 3px) !important;
  left: 0 !important;

  order: 4 !important;
  flex: none !important;

  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0.22rem 0.4rem !important;

  font-size: 0.82rem !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: nowrap !important;

  color: #ffffff !important;
  background: #2567a8 !important;
}


/* Sparpreise auf den Artikelseiten */
.has-discount .page-content.page-cms ul,
.has-discount p,
.has-discount.product-price,
.page-content.page-cms .has-discount ul {
  color: #b00;
}

/* Korrekturen der H-Headline-Texte */
.h1, h1 {
  font-size: 1.2rem;
  margin-bottom: .5rem;
}

.h2, h2 {
  font-size: 1.1rem;
  margin-bottom: .4rem;
}

.h3, h3 {
  font-size: 1rem;
  margin-bottom: .3rem;
}

.h4, h4 {
  font-size: .975rem;
  margin-bottom: .3rem;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6, body {
  color: #000;
  line-height: 1.3;
  text-transform: none;
}

/* Auf Artikelseiten den Artikelnamen aus der Brotkrümelnavigation entfernen */
body#product .breadcrumb ol > li:last-child {
  display: none !important;
}

/* Trennzeichen hinter dem nun letzten sichtbaren Eintrag entfernen */
body#product .breadcrumb ol > li:nth-last-child(2)::after {
  display: none !important;
}

/* Produktbilder-Container auf Artikelseiten größer */
#product #content {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}
#wrapper {
  padding-top: 1rem;
  background: #d3e7fb;
}
.page-product #wrapper {
  padding-top: .5rem !important;
  background: #f6f6f6;
}
#category-description {
 /* max-width: 635px; */
  margin: 0 0 0 1rem;
}
.category-id-12 #category-description, .category-id-13 #category-description, .category-id-16 #category-description {
  max-width: 635px;
}
#content-wrapper {
  padding-left: .4rem;
}
.breadcrumb {
  text-align: center !important;
  margin-bottom: .5rem;
}

.breadcrumb > ol:nth-child(1) > li:nth-child(2) > span:nth-child(1),
.breadcrumb > ol:nth-child(1) > li:nth-child(3) > span:nth-child(1) {
  color: #24b9d7;
  text-decoration: none;
  font-weight: 700;
}

/* -----------------------------------------------------------
   Menü Gestaltung Custom
   -----------------------------------------------------------
   Grundlayout des Menüs
   ----------------------------------------------------------- */
#_desktop_top_menu {
  width: 100%;
}
#_desktop_top_menu .top-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  padding: 0;
  margin: 0;
}
#_desktop_top_menu .top-menu > li {
  width: auto;
  list-style: none;
  flex: 0 0 auto;
  position: relative;
}
#header .header-top a[data-depth="0"] {
  color: #666;
  text-transform: uppercase;
}
/* -----------------------------------------------------------
   Hauptmenü-Buttons
   ----------------------------------------------------------- */
#_desktop_top_menu .top-menu > li > a {
  display: inline-block;
  width: auto;
  padding: 6px 10px;
  border-radius: 12px;
  border: 2px solid var(--mls-aqua);
  background: var(--mls-white);
  color: var(--mls-dark);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: all 0.25s ease;
}
#_desktop_top_menu .top-menu > li > a:hover {
  background: var(--mls-white);
  color: #ff6633 !important;
}
/* -----------------------------------------------------------
   Manueller aktiver Zustand NUR auf den Startseiten
   DE-Startseite: body#index.lang-de
   EN-Startseite: body#index.lang-en
   ----------------------------------------------------------- */

/* DE-Startseite */
body#index.lang-de #_desktop_top_menu #top-menu #lnk-kultur-und-leben-ev.link > a {
  background: var(--mls-aqua);
  color: #ffffff !important;
  border: 2px solid var(--mls-aqua);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

body#index.lang-de #_desktop_top_menu #top-menu #lnk-kultur-und-leben-ev.link > a:hover {
  background: var(--mls-aqua);
  color: #000000 !important;
  border: 2px solid var(--mls-aqua);
}

/* EN-Startseite */
body#index.lang-en #_desktop_top_menu #top-menu #lnk-culture-and-life-ra.link > a {
  background: var(--mls-aqua);
  color: #ffffff !important;
  border: 2px solid var(--mls-aqua);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

body#index.lang-en #_desktop_top_menu #top-menu #lnk-culture-and-life-ra.link > a:hover {
  background: var(--mls-aqua);
  color: #000000 !important;
  border: 2px solid var(--mls-aqua);
}



/* -----------------------------------------------------------
   Aktiver Zustand Kategorie
   ----------------------------------------------------------- */
#_desktop_top_menu .top-menu[data-depth="0"] > li.current > a {
  background: var(--mls-aqua);
  color: #ffffff !important;
  border: 2px solid var(--mls-aqua);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
#_desktop_top_menu .top-menu[data-depth="0"] > li.current > a:hover {
  background: var(--mls-aqua);
  color: #000000 !important;
}
/* -----------------------------------------------------------
   Header Feinjustierung
   ----------------------------------------------------------- */
#header .header-top .menu {
  padding-left: 0;
}
/* -----------------------------------------------------------
   Submenü Positionierung
   Vertikale Darstellung aller Ebenen
   ----------------------------------------------------------- */
#_desktop_top_menu .popover.sub-menu.js-sub-menu {
  position: absolute;
  top: 100% !important;
  left: 0 !important;
  display: block !important;
  min-width: max-content;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  z-index: 1000;
}
/* -----------------------------------------------------------
   Submenü Listen
   ----------------------------------------------------------- */
#_desktop_top_menu .popover.sub-menu.js-sub-menu ul {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}
#_desktop_top_menu .popover.sub-menu.js-sub-menu ul > li {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
/* -----------------------------------------------------------
   Submenü Buttons Ebene 1–3
   ----------------------------------------------------------- */
#_desktop_top_menu .top-menu[data-depth="1"] > li > a,
#_desktop_top_menu .top-menu[data-depth="2"] > li > a,
#_desktop_top_menu .top-menu[data-depth="3"] > li > a {
  display: block !important;
  width: 100% !important;
  margin: 2px 0;
  padding: 6px 12px;
  border-radius: 12px;
  border: 2px solid var(--mls-aqua);
  background: var(--mls-white);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-align: left;
  white-space: nowrap;
  transition: all 0.25s ease;
}
/* -----------------------------------------------------------
   Submenü Hover
   ----------------------------------------------------------- */
#_desktop_top_menu .top-menu[data-depth="1"] > li > a:hover,
#_desktop_top_menu .top-menu[data-depth="2"] > li > a:hover,
#_desktop_top_menu .top-menu[data-depth="3"] > li > a:hover {
  background: var(--mls-white);
  color: #ff6633 !important;
}
/* -----------------------------------------------------------
   Submenü-Hierarchie sichtbar machen
   Ebene 1 / 2 / 3
   ----------------------------------------------------------- */
/* Ebene 1 */
#_desktop_top_menu .top-menu[data-depth="1"] > li > a {
  padding-left: 12px !important;
  font-size: 1rem !important;
}
/* Ebene 2 */
#_desktop_top_menu .top-menu[data-depth="2"] > li > a {
  margin-left: 18px !important;
  padding-left: 12px !important;
  font-size: 0.95rem !important;
  border-color: #8edbd8 !important;
}
/* Ebene 3 */
#_desktop_top_menu .top-menu[data-depth="3"] > li > a {
  margin-left: 36px !important;
  padding-left: 12px !important;
  font-size: 0.9rem !important;
  border-color: #b8e9e7 !important;
}