/* 
===========================================================================================
#   VARIABLES
=========================================================================================== 
*/
:root {
    --um-font-family: 'Work Sans', sans-serif;
  
    /* Font sizes */
    --um-font-size-h1: clamp(36px, 13vw, 60px); /* Skaliert die schrift kleiner falls Viewport zu klein */
    --um-font-size-h2: 28px;
    --um-font-size-h3: 12px;
    --um-font-size-h3-button-link: 12px;
    --um-font-size-li-01: 18px;
    --um-font-size-li-02: 16px;
    --um-font-size-li-03: 14px;
    --um-font-size-p: 14px;
    --um-font-size-p-big: 21px;
    --um-font-size-quote: 21px;
  
    /* Letter spacing */
    --um-letter-spacing-default: normal;
    --um-letter-spacing-wide: 1px;
  
    /* Font weights */
    --um-font-weight-regular: 400;
    --um-font-weight-semi-bold: 600;
  
    /* Text transform */
    --um-text-transform-uppercase: uppercase;
    --um-text-transform-none: none;


    /* FARBEN */
    --um-greige: #DAD4C7;
    --um-greige-75: #E3E0D6;
    --um-greige-50: #EDE9E3;
    --um-greige-25: #F5F2EF;
    --um-greige-10: #FAFAFA;
    --um-black: #1D1D1B;
    --um-white: #FFFFFF;

    /* Abstände */
    --um-spacer35: 35px;
    --um-spacer35-70: 35px;
    --um-spacer50: 50px;
    --um-spacer50-100: 50px;
    --um-spacer60: 60px;
    --um-spacer60-120: 60px;

    --um-spacer50-0: 50px;
  }
  body{
    font-size: var(--um-font-size-p);
  }

  /* =======================
     BASE ABSTAENDE
  ======================= */
  .um-paddingy35{
    padding: var(--um-spacer35-70) 0px;
  }
  .um-paddingy50{
    padding: var(--um-spacer50-100) 0px;
  }
  .um-paddingx25{
    padding-left: var(--randabstand);
    padding-right: var(--randabstand);
  }
  .um-margint60{
    margin-top: var(--um-spacer60-120);
  }
  
  /* =======================
     BASE STYLES
  ======================= */
  
  h1 {
    font-family: var(--um-font-family);
    font-size: var(--um-font-size-h1);
    letter-spacing: var(--um-letter-spacing-wide);
    text-transform: var(--um-text-transform-uppercase);
    font-weight: var(--um-font-weight-regular);
    hyphens: auto;
  }

  h2 {
    font-family: var(--um-font-family);
    font-size: var(--um-font-size-h2);
    font-weight: var(--um-font-weight-regular);
  }
  
  h3 {
    font-family: var(--um-font-family);
    font-size: var(--um-font-size-h3);
    letter-spacing: var(--um-letter-spacing-wide);
    text-transform: var(--um-text-transform-uppercase);
    font-weight: var(--um-font-weight-regular);
    margin-top: unset;
  }
  
  li {
    font-family: var(--um-font-family);
    font-size: var(--um-font-size-li-02);
    font-weight: var(--um-font-weight-regular);
  }
  
  p {
    font-family: var(--um-font-family);
    font-size: var(--um-font-size-p);
  }
  a{
    font-size: var(--um-font-size-p);
  }
  cite {
    font-size: var(--um-font-size-quote);
    font-weight: 300;
    font-style: normal;
  }
  .w-100-75{
    width: 100%;
  }
 [id], [id]:target {
    scroll-margin-top: 150px!important; /* Abstand zum oberen Rand beim Scrollen */
}
  /* =======================
     VARIATION CLASSES
  ======================= */
  .um-h1-semi-bold {
    font-family: var(--um-font-family);
    font-size: var(--um-font-size-h1);
    letter-spacing: var(--um-letter-spacing-wide);
    text-transform: var(--um-text-transform-uppercase);
    font-weight: var(--um-font-weight-semi-bold);
  }
  .um-h2-regular {
    font-family: var(--um-font-family);
    font-size: var(--um-font-size-h2);
    font-weight: var(--um-font-weight-regular);
  }
  /* <li> Headline H3 Button/Link */
  .um-h3-button-link {
    font-size: var(--um-font-size-h3-button-link);
    letter-spacing: var(--um-letter-spacing-wide);
    text-transform: var(--um-text-transform-uppercase);
    font-weight: var(--um-font-weight-regular);
    text-decoration: none;
  }
    /* <li> Headline H3 Button/Link */
    .um-h3-button-link-semibold {
      font-size: var(--um-font-size-h3);
      letter-spacing: var(--um-letter-spacing-wide);
      text-transform: var(--um-text-transform-uppercase);
      font-weight: var(--um-font-weight-semi-bold);
      text-decoration: none;
    }
  
  /* <li> 01 Menu/Button */
  .um-li-01-menu-button {
    font-size: var(--um-font-size-li-01);
    font-weight: var(--um-font-weight-regular);
    text-decoration: none;
  }
  /* <li> 01 Menu/Button */
  .um-li-01-menu-button-semi-bold {
    font-size: var(--um-font-size-li-01);
    font-weight: var(--um-font-weight-semi-bold);
    text-decoration: none;
  }
  
  /* <li> 02 Menu/Button */
  .um-li-02-menu-button {
    font-family: var(--um-font-family);
    font-size: var(--um-font-size-li-02);
    font-weight: var(--um-font-weight-regular);
  }
  
  /* <li> 03 Menu/Button */
  .um-li-03-menu-button {
    font-size: var(--um-font-size-li-03);
  }
  
  /* (p) Text variations */
  .um-p-italic {
    font-style: italic;
  }
  .um-p-semi-bold {
    font-weight: var(--um-font-weight-semi-bold);
  }
  .um-p-semi-bold-italic {
    font-weight: var(--um-font-weight-semi-bold);
    font-style: italic;
  }
  
  /* (p) Text Big */
  .um-p-text-big {
    font-size: var(--um-font-size-p-big);
  }

.um-black-white{
  color: #ffffff;
}

.um-menu-link a{
  font-size: var(--um-font-size-li-01);
}
.row-menu-items{
  display: flex;
  align-items: center;
}
.row-menu-items .currency-switcher, .row-menu-items .language-switcher, .row-menu-items .store-marker-desktop, 
.row-menu-items .col-cart-menu, .row-menu-items .col-account-menu, .row-menu-items .col-suche-menu, .row-menu-items .col-menu-toggle{
  height: fit-content;
}

.kopfgrafik-headline {
  --bs-heading-color: #ffffff;
}

.kopfgrafik-headline:has(.um-mix-blend){
  color: var(--um-black);
  mix-blend-mode: difference;
}
  /* =======================
     Base Animationen
  ======================= */
/* WICHTIG FÜR AOS, da ohne die Seite horizontal scrollt.*/
/* div:has([class*="data-aos-"]){
  overflow: hidden;
}  */

.um-img-zoom1 img{
  animation: umimagescaleAnimation 30s ease-in-out infinite;
  animation-delay: 0s;
}
.um-img-zoom2 img{
   animation: umimagescaleAnimation 30s ease-in-out infinite;
  animation-delay: .8s;
}
.um-img-zoom3 img{
   animation: umimagescaleAnimation 30s ease-in-out infinite;
  animation-delay: 1.2s;
}
 [class*="um-img-zoom"] .cms-image-container.is-standard {
  overflow: hidden;
}
@keyframes umimagescaleAnimation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  50% {
    transform: scale(1.12) translate(4%, 4%);
  }
  100% {
    transform: scale(1) translate(0%, 0%);
  }
}


/* 
========================================================================================================================
# Slider-Bereich !!!!!
========================================================================================================================
*/

:root {
  --randabstand: 25px;
  --scrollbarabstand: 25px;
}

/* Scrollbar Scrollbar Scrollbar*/
.um-swiper-produkt .swiper-wrapper{
    padding-bottom: var(--scrollbarabstand); /*Abstand nach unten zur Scrollbar*/
}
.um-swiper-produkt .swiper-scrollbar,
.um-swiper-intro-auswahl .swiper-scrollbar,
.um-swiper-submenu .swiper-scrollbar{
    position: absolute;
    left: 0;
    width: calc(100% - 13.5%);
    border-radius: 2px;
    height: 1px;
    bottom: 0;
    background-color: #00000025;
}
.um-swiper-produkt .swiper-scrollbar .swiper-scrollbar-drag, 
.um-swiper-intro-auswahl .swiper-scrollbar .swiper-scrollbar-drag, 
.um-swiper-submenu .swiper-scrollbar .swiper-scrollbar-drag{
    height: inherit;
    background-color: var(--um-black);
}
.um-swiper-produkt > h3{
  margin-bottom: 35px;
}
.um-swiper-produkt.rtl > h3{
  text-align: left;
  padding-left: var(--randabstand);
}
/* Slider mit Abstand rechts und Bild links angeschnitten */
.um-swiper-produkt.swiper {
  margin-left: var(--randabstand);
  margin-bottom: 60px;
  position: relative;
}
/* Slider mit Abstand links und Bild rechts angeschnitten */
.um-swiper-produkt.rtl.swiper {
  margin-right: var(--randabstand);
  margin-left: 0;
  position: relative;
}
.um-swiper-produkt.rtl .swiper-scrollbar {    
  right:  0px;
  left: unset;
}

/* Produkt Slider Small ### Produkt Slider Small */
/* Produkt Slider Small ### Produkt Slider Small */
/* Produkt Slider Small ### Produkt Slider Small */
.um-swiper-produkt.small{
  display:flex;
  margin-left: var(--randabstand); /*Abstand nach Links zum Rand*/
  flex-direction: column;
  margin-top: var(--um-spacer50-100);
  margin-bottom: var(--um-spacer60-120);
}
.um-swiper-produkt.small .swiper-slide {
  aspect-ratio: 1/1;
}
.um-swiper-produkt.small .um-swiper-inner img{
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.um-swiper-produkt.small .um-swiper-inner .um-swiper-text{
  position: absolute;
  text-align: center;
  bottom: 0px;
  width: 100%;
  color: white;
}



/* Produkt Slider Regular ### Produkt Slider Regular */
/* Produkt Slider Regular ### Produkt Slider Regular */
/* Produkt Slider Regular ### Produkt Slider Regular */
.um-swiper-produkt.regular a {
  text-decoration: none;
  color: inherit;
}
.um-swiper-produkt.regular .swiper-slide img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center center;
}
.um-swiper-produkt.regular .swiper-slide p {
  text-align: center;
  text-transform: uppercase;
  font-size: var(--um-font-size-h3);
  margin-top: 20px;
  margin-bottom: 0px;
}

/* Submenu Slider ############### Submenu Slider  */
/* Submenu Slider ############### Submenu Slider  */
/* Submenu Slider ############### Submenu Slider  */
/* Submenu Slider ############### Submenu Slider  */
/* Submenu Slider ############### Submenu Slider  */
 .cms-section:has(.um-swiper-submenu) {
      position: sticky;
      top: 50px;
      background-color: var(--um-white);
      margin-bottom: 15px;
      z-index: 2;
      overflow:visible;
    }
.um-swiper-submenu .swiper-slide {
  width: fit-content;
  padding: 12px 0px;
}
.um-swiper-submenu .swiper-slide:last-of-type {
padding-right: calc(var(--randabstand) * 2);
}
.um-swiper-submenu .swiper-wrapper {
padding-left: var(--randabstand);
}
.um-swiper-submenu .swiper-slide h3{
text-wrap: nowrap;
display: inline;
}
.um-swiper-submenu .swiper-scrollbar{
width: calc(100% - var(--randabstand) * 2);
left:  var(--randabstand);
display: block!important;
}
/* Intro Slider ############### Intro Slider  */
/* Intro Slider ############### Intro Slider  */
/* Intro Slider ############### Intro Slider  */
/* Intro Slider ############### Intro Slider  */
/* Intro Slider ############### Intro Slider  */
.um-swiper-intro-content .swiper-slide, 
 .um-swiper-intro-auswahl .swiper-slide {
    display: flex;
  }

  .um-swiper-intro-content {
    height: 100vh;
    width: 100%;
    color: var(--um-white)!important;
  }
  .um-swiper-intro-content h1, 
  .um-swiper-intro-content h2, 
  .um-swiper-intro-content a{
    color: inherit;
  }
  .um-swiper-intro-auswahl {
    position: relative;
    height: 100px;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 0px 0px var(--randabstand);
    margin-top: calc(-100px - var(--um-spacer35));
    z-index: 1;
    color: var(--um-white);
  }

  .um-swiper-intro-auswahl .swiper-slide {
    justify-content: start;
    align-items: end;
    cursor: pointer;
    width: fit-content;
  }

  .um-swiper-intro-auswahl .swiper-slide h3{
    font-weight: var(--um-font-weight-regular);
    padding: 0px 0px var(--um-spacer35) 0px;
    color: inherit;
    text-wrap: nowrap;
    margin: 0;
  }
  .um-swiper-intro-auswahl .swiper-slide-thumb-active h3{
    font-weight: var(--um-font-weight-semi-bold);
  }

  .um-swiper-intro-content .swiper-slide {
    justify-content: start;
    align-items: center;
  }
  .um-swiper-intro-content .um-inner-content {
    padding: var(--randabstand);
  }
  .um-swiper-intro-content .um-inner-content *{
    margin: 0;
    margin-bottom: 35px;
  }
 
  .um-swiper-intro-content .swiper-slide picture {
    position: absolute;
    z-index: -1;
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .um-swiper-intro-content .swiper-slide picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
    .um-swiper-intro-auswahl .swiper-scrollbar {    
    width: calc(100% - var(--randabstand) * 2);
    left:  var(--randabstand);
    background-color: #ffffff52;
  }
  .um-swiper-intro-auswahl .swiper-scrollbar .swiper-scrollbar-drag {
    background-color: #fff;
  }
  .um-swiper-intro-auswahl .swiper-wrapper {
  transition-timing-function: cubic-bezier(.18,.66,.2,.99); /* Eine benutzerdefinierte Easing-Funktion */
}
.um-inner-content a, .um-link-button{
  position: relative;
}
.um-inner-content a:after, .um-link-button:after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" data-name="Ebene 2" viewBox="0 0 106.396 99.84"><script/><path d="m104.809 45.451-43.84-43.84a5.5 5.5 0 0 0-7.777 0 5.5 5.5 0 0 0 0 7.777l35.031 35.031H5.5a5.5 5.5 0 0 0 0 11h82.723L53.192 90.45a5.498 5.498 0 0 0 3.889 9.388 5.48 5.48 0 0 0 3.889-1.611l43.84-43.84c1.223-1.222 1.724-2.874 1.556-4.469.169-1.595-.333-3.247-1.556-4.469Z" data-name="Ebene 1" style="fill:%23fff;stroke-width:0"/></svg>');
  display: block;
  position: absolute;
  right: -30px;
  top: 0;
  height: inherit;
  width: 15px;
  transition: right .4s ease;
  line-height: normal;
}
.um-inner-content a:before, .um-link-button:before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0%; 
  height: 1px;
  background-color: currentColor;
  transition: width 0.4s ease;
}
.um-swiper-intro-content a:hover:before, .um-link-button:hover:before {
  width: calc(100% + 35px);
}
.um-inner-content a:hover:after, .um-link-button:hover:after,
 #offcanvas-menu .liste-base > li:hover::after {
  right: -35px;
}  
  /* 
===================================================================================================
=============   Dark Slider Menü UI Invertierung (Bei hellen Bildern von Intro-Slider verwenden)
===================================================================================================
*/
 /* Falls Bild weiß/hell ist kann mit der .dark Klasse in dem jeweiligen .swiper-slide der Text dunkel gesetzt werden */
  .um-swiper-intro-content .swiper-slide.dark .um-inner-content *{
    color: var(--um-black);
  }
  .um-swiper-intro-content .swiper-slide.dark a:after,   .um-swiper-intro-content .swiper-slide.dark .um-link-button:after {
    filter: brightness(0);
}
 .kopfbereich:has(.swiper-slide-active.dark)  .um-swiper-intro-auswahl {
    color: var(--um-black);
 }
.is-act-home:has(.swiper-slide-active.dark) .header-main.clear-header .header-logo-col {
  filter: brightness(0); /* Stellt transparenten header schwarz wenn .dark Slider aktiv ist */
}

.is-act-home:has(.swiper-slide-active.dark) .header-main.clear-header .header-search-col > div > div:not(.language-switcher):not(.currency-switcher) svg .icon-path {
  stroke: var(--um-black)!important;
}

.is-act-home:has(.swiper-slide-active.dark) .header-main.clear-header #languagesDropdown-top-bar, 
.is-act-home:has(.swiper-slide-active.dark) .header-main.clear-header #currenciesDropdown-top-bar {
  color: var(--um-black);/* Stellt transparenten header schwarz wenn .dark Slider aktiv ist */
}
.is-act-home:has(.swiper-slide-active.dark)  .um-swiper-intro-auswahl .swiper-scrollbar .swiper-scrollbar-drag {
  background-color: var(--um-black);/* Stellt scrollbar-Thumb im Intro header schwarz wenn .dark Slider aktiv ist */

}
.is-act-home:has(.swiper-slide-active.dark) .um-swiper-intro-auswahl .swiper-scrollbar {
  background-color: #1d1d1b9b;/* Stellt scrollbar im Intro header schwarz wenn .dark Slider aktiv ist */
}
/* Dark-Slider Ende */
/* Dark-Slider Ende */

.header-search-col #languagesDropdown-top-bar, .header-search-col #currenciesDropdown-top-bar {
  padding: 0rem 1rem;
  display: none;
}

/* LINK- BUTTON */
.um-link-button:after{
  filter: invert(1);
  width: 13px;
}  

.um-link-button{
  margin-top: 10px;
  width: fit-content;
}
/* 
===================================================================================================
====================   Menü Desktop
===================================================================================================
*/
#offcanvas-menu .liste-secondary a, 
#offcanvas-menu .um-desktopmenu h3 > a,
#offcanvas-menu .um-desktopmenu ul.liste-base > li > a {
  position: relative;
}
#offcanvas-menu .liste-secondary a:before, 
#offcanvas-menu .um-desktopmenu h3 > a:before,
#offcanvas-menu .um-desktopmenu ul.liste-base > li > a:before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0%; 
  height: 1px;
  background-color: currentColor;
  transition: width 0.4s ease;
}
#offcanvas-menu .liste-secondary:hover a:before, 
#offcanvas-menu .um-desktopmenu h3:hover > a:before  {
  width: 100%;
}
#offcanvas-menu .um-desktopmenu ul.liste-base > li:hover > a:before {
  width: calc(100% + 60px);
}

/* 
===================================================================================================
====================   Seiten Elemente
===================================================================================================
*/
.um-simpel-text{
  max-width: 1400px;
  margin: auto;
}

.um-header-unterseite{
  position: relative;
}
.um-header-unterseite .um-kopfgrafik img{
  height: 50vh !important;
  object-fit: cover;
}
.um-header-unterseite .kopfgrafik-headline h1{
  font-size: var(--um-font-size-h2); 
  text-transform: none;
  font-weight: 400;
}

.um-header-unterseite .kopfgrafik-headline{
   text-align: start;
   padding: 25px 50px;
   position: absolute;
   bottom: 0px;
   z-index: 2;
}

/* Links im accordion un terschtrichen*/
.um-faq-akkordeon a{
  font-weight: 600;
}


.um-bild-text{
  padding-left: var(--randabstand);
  padding-right: var(--randabstand);
  margin-top: var(--um-spacer50-0);
  margin-bottom: var(--um-spacer50-0);
}
.um-bild-text.text-links [class^="col"]:has(p){
  order: 2;
  padding-top: 40px;
}
.um-bild-text.text-links [class^="col"]:has(img){
  order: 1;
}

.um-bild-text.text-rechts [class^="col"]:has(p){
  order: unset;
}

.um-inhaltsblock-einfuehrung{
  padding: var(--randabstand);
}
/* Quote element, Zitat Element */
.um-stoerer {
  background-color: var(--um-greige-75);
}
.stoerer-RJC {
  padding: 40px 0px;
  max-width: 330px;
  width: 75vw;
}

/* === Unterseiten zwischen Sektion: es geht um die Hauptbereiche der Unterseiten wo der Text überm Bild liegt === */
.um-inhaltsblock-header{
  position: relative;
}
.um-inhaltsblock-header .bildbereich img{
  object-fit: cover;
  width: 100vw !important;
  max-height: 800px;
}
.um-inhaltsblock-header .textbereich{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding: 100px 50px 10px 50px;
  background: linear-gradient(0deg, rgb(14.51% 14.51% 14.51% / 0.6705882352941176) 0%, 
  rgb(14.51% 14.51% 14.51% / 0.6641456528410831) 6.25%, 
  rgb(14.51% 14.51% 14.51% / 0.6450654903126078) 12.5%, 
  rgb(14.51% 14.51% 14.51% / 0.6140809876543828) 18.75%, 
  rgb(14.51% 14.51% 14.51% / 0.5723828619272542) 25%, rgb(14.51% 14.51% 14.51% / 0.5215735487183372) 31.25%, 
  rgb(14.51% 14.51% 14.51% / 0.4636056214400595) 37.5%, rgb(14.51% 14.51% 14.51% / 0.4007067550289371) 43.75%, 
  rgb(14.51% 14.51% 14.51% / 0.33529411764705885) 50%, rgb(14.51% 14.51% 14.51% / 0.26988148026518055) 56.25%, 
  rgb(14.51% 14.51% 14.51% / 0.2069826138540582) 62.5%, rgb(14.51% 14.51% 14.51% / 0.14901468657578054) 68.75%, 
  rgb(14.51% 14.51% 14.51% / 0.09820537336686352) 75%, rgb(14.51% 14.51% 14.51% / 0.0565072476397348) 81.25%, 
  rgb(14.51% 14.51% 14.51% / 0.02552274498150975) 87.5%, rgb(14.51% 14.51% 14.51% / 0.006442582453034529) 93.75%,
  rgb(14.51% 14.51% 14.51% / 0) 100%);
}
.um-inhaltsblock-header .textbereich h2, .um-inhaltsblock-header .textbereich h3{
  color: #ffffff;
}
.um-inhaltsblock-header .textbereich h3{
  margin-bottom: 5px;
}
.um-partner-sektion {
  padding: 50px var(--randabstand);
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.um-simpel-text {
  padding: 50px var(--randabstand);
}

/* Korrigiert Ränder der Produktauflistung von Erlebniswelt um-BINDER-Kategorie-Layout V2 */
.um-produkt-kategorie-sektion .cms-block:not(.cms-block-image-text){
  padding-left: var(--randabstand);
  padding-right: var(--randabstand);
}
.um-produkt-kategorie-sektion .cms-element-product-listing .cms-listing-row {
  margin: 0;
}
.cms-element-product-listing div.sorting {
  margin-bottom: 1.5em;
}
/* ########## ACCORDION ########## */
.um-bootstrap-akkordion.accordion{
  border-radius: 0px;
}
.um-bootstrap-akkordion .accordion-item{
  border-top: 2px solid #dbd5c8;
  border-bottom: 2px solid #dbd5c8;
  border-right: none;
  border-left: none;
  border-radius: 0px !important;
}

.um-bootstrap-akkordion .accordion-button:after{
    content: '+';
    background-image: none;
    transform: none;
    font-size: 30px;
    height: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 300;
    padding-bottom: 6px;
}
.um-bootstrap-akkordion .accordion-button:not(.collapsed)::after{
  content:'-';
  background-image: none;
  transform: none;
}
.um-bootstrap-akkordion .accordion-button{
  padding: 20px var(--randabstand);
  font-size: var(--um-font-size-p-big);
  background: none;
}
.um-bootstrap-akkordion .accordion-button:not(.collapsed){
  background: none;
  color: unset;
  box-shadow: none;
}
.um-bootstrap-akkordion .accordion-button:focus{
  border-color: unset;
  outline: none;
  box-shadow: none;
}
.um-bootstrap-akkordion .accordion-body{
  padding: 1px var(--randabstand) 20px var(--randabstand);
}

/* FAQ Seite */
.um-faq-akkordeon {
  padding: 25px 0;
}
.um-faq-akkordeon .um-akkordeon-titel {
  padding: 10px var(--randabstand) 0px var(--randabstand);
}
/* 
===================================================================================================
====================   Juwelier Suchen
===================================================================================================
*/
/* Händler Suche  Suchfeld*/
.um-header-unterseite .kopfgrafik-juwelier {
  padding: 25px var(--randabstand);
}
 .um-such-feld {
    padding: 30px var(--randabstand);
}
.um-such-feld .input, .um-such-feld .form-control {
  border: unset;
  border-bottom: 2px solid var(--um-black);
}
.um-juwelier-slider {
  padding: 20px calc(-20px + var(--randabstand));
}
.cms-element-moorl-listing {
  margin-top: 0;
}
/* Slider */
  .moorl-listing-item-image-content .moorl-listing-item-image{
    position: relative;
    height: fit-content;
    
  }
  .moorl-listing-item-image img {
    aspect-ratio: 1 / 1;
    display: flex;
    width: 100%;
    height: auto;
    margin-bottom: auto;
  }  
  .moorl-listing-item-content, .moorl-listing-item-title, .moorl-listing-item-meta {
    position: relative;
    height: unset;
    text-align: center;
    background-color: none;
    font-size: var(--um-font-size-h3-button-link);
    font-family: var(--um-font-family);
    font-weight: var(--um-font-weight-regular);
    letter-spacing: var(--um-letter-spacing-wide);
    margin-bottom: 0!important;
  }
  .moorl-listing-item-title h2 {
    hyphens: auto;
    text-transform: var(--um-text-transform-uppercase);
    font-weight: var(--um-font-weight-semi-bold);
    margin-bottom: 10px;
  }
  .moorl-listing-item-title h3 {
    hyphens: auto;
    font-size: var(--um-font-size-p-big);
    text-transform: var(--um-text-transform-uppercase);
    margin-bottom: 30px;
  }
  .moorl-listing-item-content {
    margin-bottom: auto!important;
    text-transform: var(--um-letter-spacing-default);
    font-size: var(--um-font-size-li-03);
    line-height: 1.4;
  }
  .moorl-listing-item-image-content .moorl-listing-item-content {
    margin-top: 25px;
  }
.moorl-merchant-listing-box {
  grid-template: unset;
  padding: 25px 25px;
  min-height: 375px;
}


/* 
===================================================================================================
====================   Juwelier Details
===================================================================================================
*/
.um-haendler-bild .cms-block-container {
    padding: 0 !important;
}
.um-haendler-bild img{
    max-height: 80vh;
    width: 100vw;
    object-fit: cover;
}
.um-haendler-bild .cms-image-container:after {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2;
    background: linear-gradient(0deg, rgb(14.51% 14.51% 14.51% / 0.6705882352941176) 0%, 
  rgb(14.51% 14.51% 14.51% / 0.6641456528410831) 6.25%, 
  rgb(14.51% 14.51% 14.51% / 0.6450654903126078) 12.5%, 
  rgb(14.51% 14.51% 14.51% / 0.6140809876543828) 18.75%, 
  rgb(14.51% 14.51% 14.51% / 0.5723828619272542) 25%, rgb(14.51% 14.51% 14.51% / 0.5215735487183372) 31.25%, 
  rgb(14.51% 14.51% 14.51% / 0.4636056214400595) 37.5%, rgb(14.51% 14.51% 14.51% / 0.4007067550289371) 43.75%, 
  rgb(14.51% 14.51% 14.51% / 0.33529411764705885) 50%, rgb(14.51% 14.51% 14.51% / 0.26988148026518055) 56.25%, 
  rgb(14.51% 14.51% 14.51% / 0.2069826138540582) 62.5%, rgb(14.51% 14.51% 14.51% / 0.14901468657578054) 68.75%, 
  rgb(14.51% 14.51% 14.51% / 0.09820537336686352) 75%, rgb(14.51% 14.51% 14.51% / 0.0565072476397348) 81.25%, 
  rgb(14.51% 14.51% 14.51% / 0.02552274498150975) 87.5%, rgb(14.51% 14.51% 14.51% / 0.006442582453034529) 93.75%,
  rgb(14.51% 14.51% 14.51% / 0) 100%);;
    top: 0;
    left: 0;
}

#Beschreibung, #Kontakt{
  padding-left: var(--randabstand);
  padding-right: var(--randabstand);
  max-width: unset;
}
#Beschreibung .col, #Kontakt .col{
  padding-left: 0;
  padding-right: 0;
}
#Beschreibung .um-haendler-name{
    position: absolute;
    margin-top: -100px;
    z-index: 2;
}
#Beschreibung .um-haendler-name h1{
    color: var(--um-white) !important;
}
#Beschreibung .um-haendler-beschreibung{
  width: 100%;
}
.um-haendler-kontakt .icon{
    display: none;
}
.um-haendler-adresse a{
  text-decoration: underline;
  text-underline-offset: 6px;
}


.um-haendler-adresse .icon, .um-haendler-zeiten .icon{
    display:none
}
.um-haendler-zeiten .moorl-opening-hours .row > div{
    padding: 6px 10px;
}
.moorl-opening-hours .row:nth-child(odd){
  background-color: #ffffff;
  border-bottom: 1px solid var(--um-greige);
}
.um-haendler-karte .cms-block-container{
  padding: 0px !important;
}
/* 
===================================================================================================
====================   Warenkorb / Ceckout
===================================================================================================
*/

.header-minimal .header-minimal-back-to-shop-button {
  width: 100%;
  margin-top: 20px;
}
.header-minimal .header-minimal-logo {
  margin: 8px 0px;
}
.is-ctl-register.is-act-checkoutregisterpage h1{
  font-size: var(--um-font-size-h2);
}
.form-select:focus, .form-control:focus {
    box-shadow: 0 0 0 0.04rem rgba(29, 29, 27, 0.6);
}
.offcanvas-cart-promotion-form span.icon.icon-checkmark {
  display: flex;
}
.offcanvas-cart-promotion-form a.begin-checkout-btn {
  margin-bottom: 10px;
}

@media only screen and (min-width: 640px) {
  /* Submenu Slider Submenu  */
  /* Submenu Slider Submenu  */
  .cms-section:has(.um-swiper-submenu) {
      top: 87px;
    }

    .header-search-col #languagesDropdown-top-bar, .header-search-col #currenciesDropdown-top-bar {
  display: inline-block;
}
#currenciesDropdown-top-bar .top-bar-nav-text, #languagesDropdown-top-bar .top-bar-nav-text {
  display: inline;
}
}
@media  screen and (min-width: 768px) {
/* Für Abstand falls Kopfbild und Text-Bild nicht durch Einleser getrennt werden. */
  .um-kein-einleser-desktop {
    margin-bottom: 200px;
  }
  .um-bild-text .cms-element-text,  .um-bild-text.text-links .cms-element-text{
      width: 100%;
      padding: 50px var(--randabstand);
  }
  
  .um-bild-text.text-links [class^="col"]:has(p){
    order:1;
  }
  .um-bild-text.text-links [class^="col"]:has(img){
    order: 2;
  }
  .um-bild-text.text-rechts [class^="col"]:has(p){
    order: 2;
  }

}

@media only screen and (min-width:992px){
  :root {
    /* Font sizes */
    --um-font-size-p: 18px;
    --um-font-size-quote: 24px;
    --um-font-size-h3: 14px;
    --um-font-size-li-02: 20px;

    --scrollbarabstand: 50px;
    --randabstand: 50px;
    /* Abstände */
    --um-spacer35-70: 70px;
    --um-spacer50-100: 100px;
    --um-spacer60-120: 120px;
    --um-spacer50-0: 0px;
  }
  h1 {
     hyphens: none;
  }
  .um-header-unterseite .um-kopfgrafik img{
    height: 80vh !important;
  }
  .um-paddingl-100{
    padding-left: 100px;
  }
  .w-100-75{
    width: 75%;
  }
  .header-search-col #languagesDropdown-top-bar, .header-search-col #currenciesDropdown-top-bar {
  padding: 0rem 2rem;
}
  .um-swiper-intro-auswahl {
    border-bottom: solid 1px #ffffff47;
    margin-top: calc(-100px - 35px); 
    transition: border-color .3s ease-in-out;
  }
  .um-swiper-intro-auswahl .swiper-slide.swiper-slide-thumb-active h3 {
    border-bottom: solid 1px var(--um-white);
    transition: border-color .3s ease-in-out;
  }
  /* Stellt beim Slider mit der klasse .dark den Slider auf schwarz damit helle Grafiken zur Geltung kommen. Logik suche nach: Dark Slider */
  .kopfbereich:has(.swiper-slide-active.dark) .um-swiper-intro-auswahl .swiper-slide.swiper-slide-thumb-active h3,
    .kopfbereich:has(.swiper-slide-active.dark) .um-swiper-intro-auswahl{
    border-color: #0000007b;

  }
  .um-swiper-intro-auswahl .swiper-slide h3{
    padding: 0px 0px 35px 0px; 
    border-bottom: solid 1px transparent;
  }
  /* Slider Scrollbar Desktop */
  .um-swiper-produkt.small .swiper-scrollbar, 
  .um-swiper-produkt.regular .swiper-scrollbar,
  .um-swiper-intro-auswahl .swiper-scrollbar {
    width: calc(100% - var(--randabstand));
  }

  /* Regular Slider */
  .um-swiper-produkt-regular h3{
    margin-top: 20px;
  }

  .um-black-white{
    color: #000000;
  }

  /* Submenu Slider Submenu  */
  /* Submenu Slider Submenu  */
  .cms-section:has(.um-swiper-submenu) {
      top: 70px;
    }
  .um-swiper-submenu {
    margin: 0px var(--randabstand);
  }
   .um-swiper-submenu .swiper-wrapper{
    padding-left: unset;
  }
  .um-swiper-submenu .swiper-slide {
    padding: 25px 0px;
    transition: text-shadow .25s ease-in-out;
  }
    .um-swiper-submenu .swiper-slide:hover h3.um-h3-button-link {
    text-shadow: .3px 0 black;
  }
  .um-swiper-submenu .swiper-scrollbar {
    left: 0;
    width: 100%;
  }
  .um-swiper-submenu .swiper-slide:last-of-type{
    padding-right: unset;
  }


  .um-header-unterseite .kopfgrafik-headline{
    padding: 25px 100px;
  }

  .um-inhaltsblock-einfuehrung .textbereich{
    width: 50%;
  }


  .um-inhaltsblock-header .textbereich{
    padding: 100px 50px 50px 100px;
  }


  .um-bild-text  {
    padding-left: 0px;
    padding-right: 0px;
  }




  .um-bild-text [class^="col"]:has(img){
    padding-right: 0px;
    padding-left: 0px;
  }

  .um-bootstrap-akkordion.accordion{
    width: 50%;
    padding-left: var(--randabstand);
  }
 .um-bootstrap-akkordion .accordion-button {
    padding: 20px 20px;
}
.um-bootstrap-akkordion .accordion-body {
  padding: 1px 20px 20px 20px;
}
/* FAQ Seite */
.um-faq-akkordeon {
  padding: 25px var(--randabstand);
}
.um-faq-akkordeon:first-of-type {
  padding: 0px var(--randabstand) 25px var(--randabstand) ;
}
.um-faq-akkordeon .accordion {
  padding: 0px;
}
.um-faq-akkordeon .um-akkordeon-titel {
  padding: 10px 0px 0px 0px ;
}
/* Böser Hack K.P. ist schuld */
.cms-block-container-row.row.cms-row:has(#wrapwrap) {
  margin: 0!important;
}


/* binder x capolavoror brosche bild groeße*/
.brosche-soul-connect img{
  max-height: 600px;
  margin: auto;
}



  /* 
  =========================================
  ====================   Juwelier Details
  =========================================
  */
  .moorl-merchant-listing-box{
    display: block !important;
}
  #Beschreibung .um-haendler-name{
      margin-top: -150px;
  }
  #Beschreibung .um-haendler-beschreibung {
      width: 50%;
      margin-top: 50px;
  }

  #Kontakt{
      display: flex;
      justify-content: start;
      gap:50px;
  }
  #Kontakt .um-haendler-adresse{
      width: 40%;
      max-width: 400px;
  }
  #Kontakt .um-haendler-zeiten{
      width: 40%;
      max-width: 400px;
  }


/* Illegaler Selektor. Geben Sie Shopware die Schuld */
.um-bild-text div.col-md-6:has(.cms-element-barn-picture) *{
  display: flex!important;
  flex: 1;
}
.um-bild-text div.col-md-6:has(.cms-element-barn-picture) img{
  object-fit: cover;
  object-position: 50% 50%;
}
}


@media only screen and (min-width:1400px){
  :root {
    --randabstand: 100px;
  }
    .um-bild-text .cms-element-text{
    width: 75%;
    padding: 50px 50px 50px 100px;
  }
    .um-bild-text.text-links .cms-element-text{
    width: 75%;
    padding: 50px 50px 50px 100px;
  }

}