/*
Theme Name: Haaken Child
Theme URI: https://haaken.qodeinteractive.com
Template: haaken
Author: Edge Themes
Author URI: https://qodeinteractive.com
Description: Fashion Store Theme
Tags: one-column,two-columns,three-columns,four-columns,left-sidebar,right-sidebar,custom-menu,featured-images,flexible-header,post-formats,sticky-post,threaded-comments,translation-ready
Version: 1.4.2.1787226889
Updated: 2026-08-20 11:54:49

*/

/* Produktseite: Größenauswahl kompakt + ausgewählte Größe exakt mittig */
.single-product .variations_form table.variations {
  position: relative !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  border: 2px solid #000 !important;
  border-collapse: collapse !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
}

/* Tabellenstruktur neutralisieren */
.single-product .variations_form table.variations tbody,
.single-product .variations_form table.variations tr {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Wort "Größe" links */
.single-product .variations_form table.variations th.label {
  position: absolute !important;
  left: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;

  display: block !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.single-product .variations_form table.variations th.label label {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Rechte Zelle über die gesamte Box legen */
.single-product .variations_form table.variations td.value {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Native Select, falls sichtbar */
.single-product .variations_form table.variations select,
.single-product .variations_form .variations select {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: 130px !important;
  height: 48px !important;
  line-height: 48px !important;

  padding: 0 28px 0 28px !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;

  text-align: center !important;
  text-align-last: center !important;

  font-size: 18px !important;
  font-weight: 700 !important;
  box-sizing: border-box !important;
}

/* Select2 / Theme-Dropdown mittig platzieren */
.single-product .variations_form table.variations .select2-container,
.single-product .variations_form .variations .select2-container {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: 130px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
}

/* Sichtbare Select2-Box */
.single-product .select2-container .select2-selection--single {
  height: 48px !important;
  min-height: 48px !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ausgewählte Größe im Select2 */
.single-product .select2-container .select2-selection__rendered {
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;

  padding: 0 25px 0 0 !important;
  margin: 0 !important;

  text-align: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  box-sizing: border-box !important;
}

/* Dropdown-Pfeil rechts neben der Größe */
.single-product .select2-container .select2-selection__arrow {
  height: 48px !important;
  top: 0 !important;
  right: 0 !important;
}

/* Zurücksetzen ausblenden */
.single-product .variations_form .reset_variations {
  display: none !important;
}

/* "Auswählen" vollständig anzeigen */
.single-product .variations_form table.variations .select2-container,
.single-product .variations_form .variations .select2-container {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
}

.single-product .select2-container .select2-selection--single {
  width: 200px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.single-product .select2-container .select2-selection__rendered {
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;

  padding-left: 35px !important;
  padding-right: 35px !important;

  text-align: center !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;

  font-size: 18px !important;
  font-weight: 700 !important;
}

.single-product .select2-container .select2-selection__arrow {
  height: 48px !important;
  right: 12px !important;
}

/* Mobile Produktgalerie: ein großes Hauptbild + kleine Bilder links */
@media (max-width: 767px) {

  .single-product .woocommerce-product-gallery__wrapper {
    display: grid !important;
    grid-template-columns: 70px 1fr !important;
    gap: 12px !important;
    align-items: start !important;
    width: 100% !important;
  }

  /* Alle Galerie-Bilder erstmal neutralisieren */
  .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
  }

  /* Erstes Bild = großes Hauptbild rechts */
  .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child {
    grid-column: 2 !important;
    grid-row: 1 / span 10 !important;
    width: 100% !important;
  }

  .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img {
    width: 100% !important;
    height: auto !important;
    max-height: 360px !important;
    object-fit: contain !important;
  }

  /* Alle weiteren Bilder = kleine Vorschaubilder links */
  .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) {
    grid-column: 1 !important;
    width: 70px !important;
    height: 70px !important;
    overflow: hidden !important;
  }

  .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) img {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
  }

  .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) a {
    display: block !important;
    width: 70px !important;
    height: 70px !important;
  }
}

/* Produktseite: SKU, Kategorien und Tags ausblenden */
.single-product .product_meta {
  display: none !important;
}

/* Desktop bleibt normal: 4 Spalten nebeneinander */

/* Mobile: Vorteile nacheinander einblenden */
@media (max-width: 767px) {
  .benefit-fader {
    position: relative !important;
    height: 90px !important;
    min-height: 90px !important;
    overflow: hidden !important;
  }

  .benefit-fader.wp-block-columns,
  .benefit-fader .wp-block-columns {
    display: block !important;
    position: relative !important;
    height: 90px !important;
    min-height: 90px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .benefit-fader > .wp-block-column,
  .benefit-fader .wp-block-columns > .wp-block-column {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 90px !important;
    min-height: 90px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 20px !important;

    opacity: 0;
    animation: benefitFadeColumns 16s infinite;

    text-align: center !important;
  }

  .benefit-fader > .wp-block-column p,
  .benefit-fader .wp-block-columns > .wp-block-column p {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-align: center !important;
  }

  .benefit-fader > .wp-block-column:nth-child(1),
  .benefit-fader .wp-block-columns > .wp-block-column:nth-child(1) {
    animation-delay: 0s;
  }

  .benefit-fader > .wp-block-column:nth-child(2),
  .benefit-fader .wp-block-columns > .wp-block-column:nth-child(2) {
    animation-delay: 4s;
  }

  .benefit-fader > .wp-block-column:nth-child(3),
  .benefit-fader .wp-block-columns > .wp-block-column:nth-child(3) {
    animation-delay: 8s;
  }

  .benefit-fader > .wp-block-column:nth-child(4),
  .benefit-fader .wp-block-columns > .wp-block-column:nth-child(4) {
    animation-delay: 12s;
  }

  @keyframes benefitFadeColumns {
    0% {
      opacity: 0;
    }

    8% {
      opacity: 1;
    }

    22% {
      opacity: 1;
    }

    30% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }
}

/* Startseite Hero – Mobile Optimierung */
@media (max-width: 767px) {

  .start-hero {
    min-height: 620px !important;
    height: 620px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Hero Bild auf Mobile besser ausrichten */
  .start-hero img,
  .start-hero .wp-block-cover__image-background {
    object-fit: cover !important;
    object-position: 62% center !important;
  }

  /* Inhalt über dem Bild sauber platzieren */
  .start-hero .wp-block-cover__inner-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;

    padding: 42px 28px 55px 28px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    z-index: 2 !important;
  }

  /* Titel auf Mobile kleiner und oben links */
  .start-hero h1,
  .start-hero h2 {
    font-size: 42px !important;
    line-height: 0.95 !important;
    letter-spacing: 1px !important;
    max-width: 330px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Unterzeile auf Mobile ausblenden, damit es nicht überladen wirkt */
  .start-hero p:not(.link-hero) {
    display: none !important;
  }

  /* Button unten platzieren */
  .start-hero .link-hero,
  .start-hero .wp-block-buttons {
    align-self: center !important;
    margin: auto auto 0 auto !important;
  }

  .start-hero .wp-block-button__link,
  .start-hero .link-hero a {
    min-width: 230px !important;
    height: 56px !important;
    padding: 0 28px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    border: 1.5px solid #000 !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    color: #000 !important;
    text-decoration: none !important;
  }
}

/* Startseite Hero Mobile: "Zum Shop" Button unter die Sneaker setzen */
@media (max-width: 767px) {

  .start-hero {
    position: relative !important;
    overflow: hidden !important;
  }

  .start-hero .wp-block-cover__inner-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 42px 28px 45px 28px !important;
    box-sizing: border-box !important;
  }

  /* Button unten im Cover platzieren */
  .start-hero .wp-block-buttons,
  .start-hero .wp-block-button,
  .start-hero .link-hero {
    position: absolute !important;
    left: 50% !important;
    bottom: 20px !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 5 !important;
  }

  .start-hero .wp-block-button__link,
  .start-hero .link-hero a {
    min-width: 240px !important;
    height: 56px !important;
    padding: 0 30px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(255, 255, 255, 0.85) !important;
    color: #000 !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;

    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-decoration: none !important;
  }
}

/* Mobile: Markenlogos als horizontale Scroll-Leiste */
@media (max-width: 767px) {

  .brand-scroll,
  .brand-scroll.wp-block-columns,
  .brand-scroll .wp-block-columns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    gap: 14px !important;
    padding: 10px 16px 16px 16px !important;
    margin: 0 !important;

    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Einzelne Logo-Spalten */
  .brand-scroll > .wp-block-column,
  .brand-scroll .wp-block-columns > .wp-block-column {
    flex: 0 0 30% !important;
    max-width: 30% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    scroll-snap-align: start !important;
  }

  /* Logo-Bilder kleiner machen */
  .brand-scroll img {
    width: 86px !important;
    height: 86px !important;
    max-width: 86px !important;
    max-height: 86px !important;

    object-fit: contain !important;
  }

  .brand-scroll figure {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Scrollbar etwas sauberer anzeigen */
  .brand-scroll::-webkit-scrollbar {
    height: 5px;
  }

  .brand-scroll::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
  }

  .brand-scroll::-webkit-scrollbar-track {
    background: #e5e5e5;
  }
}

/* Mobile: 3 Service-Zeilen einzeln mit Fade anzeigen */
@media (max-width: 767px) {

  .service-fader {
    position: relative !important;
    height: 72px !important;
    min-height: 72px !important;
    overflow: hidden !important;
    margin: 25px 0 !important;
  }

  /* Falls die 3 Zeilen direkte Kind-Elemente sind */
  .service-fader > * {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;

    opacity: 0;
    animation: serviceFade 9s infinite;
  }

  /* Falls WordPress die Inhalte in einen inneren Container packt */
  .service-fader > .wp-block-group__inner-container {
    position: relative !important;
    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
  }

  .service-fader > .wp-block-group__inner-container > * {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;

    opacity: 0;
    animation: serviceFade 9s infinite;
  }

  .service-fader > *:nth-child(1),
  .service-fader > .wp-block-group__inner-container > *:nth-child(1) {
    animation-delay: 0s;
  }

  .service-fader > *:nth-child(2),
  .service-fader > .wp-block-group__inner-container > *:nth-child(2) {
    animation-delay: 3s;
  }

  .service-fader > *:nth-child(3),
  .service-fader > .wp-block-group__inner-container > *:nth-child(3) {
    animation-delay: 6s;
  }

  .service-fader p,
  .service-fader h2,
  .service-fader h3 {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  @keyframes serviceFade {
    0% {
      opacity: 0;
    }

    10% {
      opacity: 1;
    }

    28% {
      opacity: 1;
    }

    38% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }
}
/* Mobile: Neuheiten & Sale Cover nacheinander als Fade anzeigen */
@media (max-width: 991px) {

  .mobile-cover-fader {
    position: relative !important;
    width: 100% !important;
    height: 300px !important;
    min-height: 300px !important;
    overflow: hidden !important;
    margin: 25px 0 !important;
  }

  /* Falls die Klasse direkt auf dem Spalten-Block liegt */
  .mobile-cover-fader.wp-block-columns,
  .mobile-cover-fader > .wp-block-columns,
  .mobile-cover-fader .wp-block-columns {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    min-height: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Die beiden Spalten/Cover übereinanderlegen */
  .mobile-cover-fader.wp-block-columns > .wp-block-column,
  .mobile-cover-fader > .wp-block-columns > .wp-block-column,
  .mobile-cover-fader .wp-block-columns > .wp-block-column {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;

    height: 300px !important;
    min-height: 300px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0;
    visibility: hidden;
    animation: mobileCoverFade 8s infinite;
  }

  /* Erstes Cover */
  .mobile-cover-fader.wp-block-columns > .wp-block-column:nth-child(1),
  .mobile-cover-fader > .wp-block-columns > .wp-block-column:nth-child(1),
  .mobile-cover-fader .wp-block-columns > .wp-block-column:nth-child(1) {
    animation-delay: 0s;
  }

  /* Zweites Cover */
  .mobile-cover-fader.wp-block-columns > .wp-block-column:nth-child(2),
  .mobile-cover-fader > .wp-block-columns > .wp-block-column:nth-child(2),
  .mobile-cover-fader .wp-block-columns > .wp-block-column:nth-child(2) {
    animation-delay: 4s;
  }

  /* Cover im Inneren auf volle Fläche setzen */
  .mobile-cover-fader .wp-block-cover {
    width: 100% !important;
    height: 300px !important;
    min-height: 300px !important;
    margin: 0 !important;
  }

  .mobile-cover-fader .wp-block-cover__image-background,
  .mobile-cover-fader .wp-block-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  @keyframes mobileCoverFade {
    0% {
      opacity: 0;
      visibility: hidden;
    }

    8% {
      opacity: 1;
      visibility: visible;
    }

    42% {
      opacity: 1;
      visibility: visible;
    }

    50% {
      opacity: 0;
      visibility: hidden;
    }

    100% {
      opacity: 0;
      visibility: hidden;
    }
  }
}

/* Mobile: Abstand + individuelle Button-Positionen für die zwei Cover */
@media (max-width: 991px) {



  /* Cover allgemein */
  .mobile-cover-fader .wp-block-cover {
    position: relative !important;
    overflow: hidden !important;
  }

  .mobile-cover-fader .wp-block-cover__inner-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
  }

  /* Buttons generell absolut setzen */
  .mobile-cover-fader .wp-block-buttons,
  .mobile-cover-fader .wp-block-button {
    position: absolute !important;
    margin: 0 !important;
    z-index: 5 !important;
  }

  /* Weißer Schuh / Neuheiten:
     Button links und mittiger */
  .cover-new .wp-block-buttons,
  .cover-new .wp-block-button {
    left: 24px !important;
    right: auto !important;
    top: 42% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }

  /* Schwarzer Schuh / Sale:
     Button weiter rechts und etwas tiefer */
  .cover-sale .wp-block-buttons,
  .cover-sale .wp-block-button {
    right: 24px !important;
    left: auto !important;
    bottom: 24px !important;
    top: auto !important;
    transform: none !important;
  }

  /* Button-Optik etwas kompakter für Mobile */
  .mobile-cover-fader .wp-block-button__link {
    min-width: 220px !important;
    padding: 14px 22px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
}

/* Mobile: Abstand zu oberem Bild + kleinere Buttons bei Neuheiten/Sale */
@media (max-width: 991px) {

  /* ganzen Neuheiten/Sale-Fader weiter nach unten schieben */
  .mobile-cover-fader {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
    position: relative !important;
    top: 20px !important;
  }

  /* allgemeine Button-Größe kleiner machen */
  .mobile-cover-fader .wp-block-button__link {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;

    padding: 13px 28px !important;
    border-radius: 10px !important;

    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;

    white-space: nowrap !important;
  }

  /* Falls Button zwei Zeilen hat, trotzdem kompakt halten */
  .cover-new .wp-block-button__link {
    padding: 13px 30px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  /* Weißer Schuh / Neuheiten:
     Button weiter nach links und etwas höher, damit der Schuh freier bleibt */
  .cover-new .wp-block-buttons,
  .cover-new .wp-block-button {
    position: absolute !important;
    left: 8% !important;
    right: auto !important;
    top: 28% !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 5 !important;
  }

  /* Schwarzer Schuh / Sale:
     Button kleiner, weiter rechts und etwas tiefer */
  .cover-sale .wp-block-buttons,
  .cover-sale .wp-block-button {
    position: absolute !important;
    right: 8% !important;
    left: auto !important;
    top: auto !important;
    bottom: 15% !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 5 !important;
  }

  /* Sale-Button etwas schmaler */
  .cover-sale .wp-block-button__link {
    padding: 13px 34px !important;
    font-size: 14px !important;
  }
}

/* Mobile: Neuheiten/Sale Cover sauber begrenzen + Neuheiten-Button besser platzieren */
@media (max-width: 991px) {

  /* Fader bekommt genug Abstand nach oben und unten */
  .mobile-cover-fader {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
    margin-top: 35px !important;
    margin-bottom: 35px !important;
    overflow: hidden !important;
  }

  .mobile-cover-fader.wp-block-columns,
  .mobile-cover-fader > .wp-block-columns,
  .mobile-cover-fader .wp-block-columns,
  .mobile-cover-fader.wp-block-columns > .wp-block-column,
  .mobile-cover-fader > .wp-block-columns > .wp-block-column,
  .mobile-cover-fader .wp-block-columns > .wp-block-column {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
    overflow: hidden !important;
  }

  /* Cover selbst fest begrenzen, damit es nicht in die schwarze Zeile läuft */
  .mobile-cover-fader .wp-block-cover {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  .mobile-cover-fader .wp-block-cover__image-background,
  .mobile-cover-fader .wp-block-cover img {
    height: 100% !important;
    max-height: 320px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Button allgemein kleiner */
  .mobile-cover-fader .wp-block-button__link {
    min-width: 0 !important;
    width: auto !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 1px !important;
    border-radius: 10px !important;
  }

  /* Neuheiten-Button: kleiner, links/oben platzieren und nicht über den Schuh */
  .cover-new .wp-block-buttons,
  .cover-new .wp-block-button {
    position: absolute !important;
    left: 8% !important;
    top: 24% !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 5 !important;
  }

  .cover-new .wp-block-button__link {
    width: 230px !important;
    max-width: 230px !important;
    white-space: normal !important;
    text-align: center !important;
    padding: 13px 22px !important;
  }

  /* Sale bleibt ähnlich, aber begrenzt */
  .cover-sale .wp-block-buttons,
  .cover-sale .wp-block-button {
    position: absolute !important;
    right: 8% !important;
    bottom: 14% !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 5 !important;
  }
}
/* Mobile: Neuheiten/Sale-Fader sauber begrenzen, damit Bilder nicht in die Zeile darunter laufen */
@media (max-width: 991px) {

  .mobile-cover-fader {
    position: relative !important;
    display: block !important;

    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;

    overflow: hidden !important;
    contain: layout paint !important;
    isolation: isolate !important;
    clip-path: inset(0) !important;

    margin-top: 35px !important;
    margin-bottom: 75px !important;
    padding: 0 !important;
    z-index: 1 !important;
  }

  .mobile-cover-fader.wp-block-columns,
  .mobile-cover-fader > .wp-block-columns,
  .mobile-cover-fader .wp-block-columns {
    position: relative !important;
    display: block !important;

    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;

    overflow: hidden !important;
    contain: layout paint !important;
    clip-path: inset(0) !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-cover-fader.wp-block-columns > .wp-block-column,
  .mobile-cover-fader > .wp-block-columns > .wp-block-column,
  .mobile-cover-fader .wp-block-columns > .wp-block-column {
    position: absolute !important;
    inset: 0 !important;

    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;

    overflow: hidden !important;
    contain: paint !important;
    clip-path: inset(0) !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-cover-fader .wp-block-cover {
    position: relative !important;

    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;

    overflow: hidden !important;
    contain: paint !important;
    clip-path: inset(0) !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-cover-fader .wp-block-cover__image-background,
  .mobile-cover-fader .wp-block-cover img,
  .mobile-cover-fader img {
    height: 320px !important;
    max-height: 320px !important;
    width: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    overflow: hidden !important;
  }

  /* Folgender Block soll sauber darunter starten */
  .mobile-cover-fader + * {
    position: relative !important;
    z-index: 3 !important;
    margin-top: 0 !important;
  }
}