/* overwrites */

/* =========================================================
   BO UV 2026-10-24 - Schrift Jost (lokal, DSGVO-konform)
   Eine Schrift fuer alles: leicht, klar, mit Buchstabenabstand
   ========================================================= */

@font-face {
  font-family: 'Jost';
  src: url('../wds_fonts/jost-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../wds_fonts/jost-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../wds_fonts/jost-500.woff2') format('woff2');
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}
/* UV 2026-11-04: Cormorant Garamond nur fuer die Ueberschrift
   im Startseiten-Block "Hallo, ich bin Ulla" */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../wds_fonts/cormorant-garamond-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Grundschrift fuer den ganzen Shop */
body, button, input, select, textarea,
.cssButton, .cssButtonText {
  font-family: 'Jost', sans-serif;
}

/* Jost ist eng gesetzt: etwas mehr Luft zwischen den Buchstaben */
body {
  letter-spacing: 0.03em;
}

/* Ueberschriften: nicht fett, sondern leicht mit etwas Luft */
h1, h2, h3,
.pd_title h1,
.wds_product_about_text h2,
.wds_product_faq h2 {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* Hauptmenue: Grossbuchstaben, leicht, mit Buchstabenabstand */
.layout_wrap li.level1 > a {
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* Untermenues (Mega-Menue und Seitenleiste): normale Schreibweise,
   daher nur der normale Grundabstand wie im ganzen Shop */
.layout_wrap li.level2 > a {
  font-weight: 400;
  letter-spacing: 0.03em;
}

/* Hover in Seitenleiste und Ausklappmenue: Nebelblau mit Denimblau-Schrift
   (vorher Grau). Der aktive Punkt bleibt Denimblau ohne Flaeche. */
/* Seitenleiste "Kategorien" (Aufbau laut Browser-Untersuchung:
   .subcats_menu_hover_box > ul.subcats_menu_hover > li.level0 > ul > li.level1 > a) */

/* Normaler Grundabstand - ueberschreibt die Hauptmenue-Regel,
   die ebenfalls li.level1 heisst. Gilt fuer beide Teile der Seitenleiste:
   Ausklappmenue (subcats_menu_hover) und Unterkategorien (subcats_menu) */
.layout_wrap .subcats_menu_hover_box .subcats_menu_hover li > a,
.layout_wrap .subcats_menu_box .subcats_menu li > a {
  letter-spacing: 0.03em;
}

/* Hauptmenue: feine Linie in Taupe bei Hover und beim aktiven Punkt */
.layout_wrap li.level1:hover > a,
.layout_wrap li.level1.Selected > a {
  text-decoration: underline;
  text-decoration-color: #B1ABA0;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* Kacheln "Weitere Unterkategorien": normal statt fett (Template: 600) */
.layout_wrap .subcats_title > span {
  font-weight: 400;
}

/* Artikelnamen in Produktlisten: normal statt fett, Anthrazit.
   Der Preis bleibt kraeftiger und ist damit der Blickfang der Kachel. */
.layout_wrap .lb_title,
.layout_wrap .lb_title h2,
.layout_wrap .lb_title h2 a,
.layout_wrap .lb_title .lb_title_inner a {
  font-weight: 400;
  color: #343230;
}

/* ...aber nicht in der Seitenleiste, dort gibt es Nebelblau bzw. Denimblau */
.layout_wrap .subcats_menu_hover_box .subcats_menu_hover li > a,
.layout_wrap .subcats_menu_box .subcats_menu li > a {
  text-decoration: none;
}

/* Ausklappmenue weiss statt grau */
.layout_wrap .subcats_menu_hover_box .subcats_menu_hover li.level0 > ul {
  background: #FFFFFF !important;
}

/* Hover: ganze Zeile in Nebelblau, damit links und rechts
   keine grauen Balken stehen bleiben */
.layout_wrap .subcats_menu_hover_box .subcats_menu_hover li:hover,
.layout_wrap .subcats_menu_hover_box .subcats_menu_hover li:hover > a {
  background: #E3E7EC !important;
}
.layout_wrap .subcats_menu_hover_box .subcats_menu_hover li:hover > a {
  color: #3A5675;
}

/* EO UV 2026-10-24 */


/* =========================================================
   WUNDERLAND DER STOFFE – FARBSYSTEM
   ========================================================= */

.layout_wrap.theme_default {

  /* Header & Navigation */
  --header_bg: #F5F3F0;
  --header_menuitems_bg: #F5F3F0;
  --header_menuitems_color: #343230;
  --header_menuitems_border: #B1ABA0;
  --header_menuitems_bg_hover: #B1ABA0;
  --header_menuitems_color_hover: #343230;
  --header_menuitems_border_hover: #B1ABA0;

  /* Count for cart and wishlist */
  --count_cart_wishlist_color: #F5F3F0;
  --count_cart_wishlist_bg: #B1ABA0;

  /* Header search */
  --search_toggle_bg: #F5F3F0;
  --search_toggle_input_border: #B1ABA0;
  --search_toggle_input_bg: #FFFFFF;
  --search_toggle_color_select: #343230;
  --search_toggle_color_input: #343230;
  --search_toggle_color_help: #343230;
  --search_toggle_color_button: #343230;

  /* Categories */
  --categoriesmenu_bg: #343230;
  --categoriesmenu_border: #343230;
  --categoriesitems_level1_color: #F5F3F0;
  /* UV 2026-10-24: Hover ohne Flaeche, stattdessen Unterstreichung
     (vorher Taupe-Flaeche #B1ABA0 mit Anthrazit-Schrift) */
  --categoriesitems_level1_bg_hover: transparent;
  --categoriesitems_level1_color_hover: #F5F3F0;
  --categoriesitems_level1_color_selected: #F5F3F0;
  /* UV 2026-10-24: aktive Menuepunkte auf hellem Grund in Denimblau
     (vorher Taupe #B1ABA0, zu kontrastarm). Hauptleiste bleibt Off-White,
     weil Blau auf Anthrazit nicht lesbar waere. */
  --categoriesitems_level2_selected: #3A5675;
  --categoriesitems_overview_color_selected: #3A5675;

  /* Left submenu selected */
  --subcatsmenu_color_selected: #3A5675;

  /* Mobile menu selected */
  --mobilemenu_color_selected: #3A5675;

  /* Right content menu selected */
  --contentboxlist_color_selected: #3A5675;

  /* Left account menu selected */
  --account_navigation_selected: #3A5675;

  /* Main Buttons */
  /* UV 2026-10-24: Button 1 (Nebenaktionen wie Aktualisieren, Gutschein,
     Newsletter) nur mit Kontur (vorher gefuellt Anthrazit / Schrift Off-White) */
  --button1_background: transparent;
  --button1_border: #343230;
  --button1_color: #343230;

  /* UV 2026-10-24: Kauf-Buttons in Denimblau (vorher Taupe #B1ABA0 / Schrift #343230) */
  --button2_background: #3A5675;
  --button2_border: #3A5675;
  --button2_color: #F5F3F0;

  /* Prices */
  /* UV 2026-10-24: Sonderpreis-Rot etwas tiefer (vorher #f70909) */
  --price_default_color: #343230;
  --price_new_color: #D0021B;
  --price_old_color: #343230;
  --price_save_bg: #D0021B;
  --price_save_color: #ffffff;

  /* Toggle menu closer */
  --toggle_menu_closer_bg: #F5F3F0;
  --toggle_menu_closer_color: #343230;

  /* Subfooter */
  /* UV 2026-10-24: Newsletter-Bereich in Nebelblau (vorher Off-White #F5F3F0) */
  --subfooter_bg: #E3E7EC;
  --subfooter_color_title: #343230;
  --subfooter_color_text: #343230;

  /* Footer */
  --footer_bg: #343230;
  --footer_box_header: #F5F3F0;
  --footer_box_text: #F5F3F0;
  --footer_link_color: #F5F3F0;
  --footer_link_color_underline: #B1ABA0;
  --footer_payment_icons_bg: rgba(255,255,255,0.8);
  --footer_social_icons: #B1ABA0;
  --footer_social_icons_hover: #F5F3F0;
  --footer_copyright: #B1ABA0;
  --footer_copyright_border: #B1ABA0;

}

* {
    scrollbar-width:unset; 
    scrollbar-color: #ccc #eee;
}

/* UV 2026-10-24: Links im Kategorietext in Denimblau statt Kobaltblau,
   feine Unterstreichung mit etwas Abstand zum Text */
.cat_description a {
    color: #3A5675;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.cat_description a:hover {
    color: #343230;
}

.greeting_text {
    column-count:auto;
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: auto;
    white-space: normal;
    line-height: 1.4;
    max-width: 100%;
}

.objectFit--initial .banner_item_image .banner_item_image_inner img{
    object-fit: initial;
}


.pd_addtobasket_input .SumoSelect.sumo_products_qty .search{
    width:auto!important;
}

.of_col_summary{
    display: contents;
}


.of_header_col_qty{
    width: 209px;
    justify-content: right;  
}

.pd_image_small_inner img,
.pd_image_big img{
    width:100%;
    max-width: 100%;
    max-height: 100%;
}



.layout_header_checkout_inner {
    max-width: 1440px;
}
 

/* UV 2026-10-24: Mengenfeld breiter, damit "0,5 Meter" ganz sichtbar ist (vorher 120px) */
@media only screen and (min-width: 340px) {
    .pd_addtobasket_input {
        width: 150px;
    }
}

/* adds schimmer pixelMedia GmbH */
.spm--topbarTicker{
    background: #343230;
    width:100%;
    line-height: 30px;
    overflow: hidden;
}

.spm--topbarTicker .inner{
    max-width: 1440px;
    margin: 0 auto;    
}

.spm--topbarTicker .inner .content {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: marquee 25s linear infinite;
    font-size: 16px;
    color: #fff;
}

@keyframes marquee {
    from {
        transform: translateX(0);          /* Startet rechts */
    }
    to {
        transform: translateX(-100%);      /* L uft komplett nach links */
    }
}

/** youtube inline-player **/
.youtube-lazy {
    position: relative;
    width: 100%;
    max-width: 800px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.youtube-thumbnail {
    width: 100%;
    height: auto;
    display: block;
}

.youtube-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    transition: background 0.3s;
}

.youtube-lazy:hover .youtube-overlay {
    background: rgba(0, 0, 0, 0.55);
}

.youtube-play-btn {
    background: #FF0000;
    color: white;
    border: none;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(255,0,0,0.4);
    transition: transform 0.2s;
}

.youtube-play-btn:hover {
    transform: scale(1.1);
}

.youtube-info {
    color: white;
    margin-top: 12px;
    font-size: 15px;
    opacity: 0.9;
}

#checkoutPageButtonsBlock_waitMessage{
  display:none;
  text-align: right;
}

#checkoutPageButtonsBlock_waitMessage div{
  background: green;
  color: #fff;
  display: inline-block;
  width:100%;
  max-width: 470px;
  font-family: 'Jost', sans-serif; /* UV 2026-10-24, vorher Red Hat Display */
  padding:12px 35px;
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
}
#checkoutPageButtonsBlock_waitMessage div span{
  font-size:11px;
  font-weight: 400;
}


#cancellation_form button,
#cancel_products_form button,
.cancelButton_success {
  position: relative;
  font-family: 'Jost', sans-serif; /* UV 2026-10-24, vorher Red Hat Display */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  cursor: pointer;
  font-weight: 900;
  text-transform: none;
  white-space: nowrap;
  text-decoration: none;
  min-height: 44px;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid var(--button2_border, rgba(0, 0, 0, 0.1));
  background: var(--button2_background, #4d4d4d);
  color: var(--button2_color, #fff);
}
#cancellation_form button:hover,
#cancel_products_form button:hover,
.cancelButton_success:hover {
  opacity: 0.8;
  text-decoration: none !important;
}

/* H2 – Unterstrich entfernen */
h2 {
    border-bottom: none !important;
}


@media only screen and (min-width: 1295px) {
    .apms_form_button.apms_nocheckout.apms_product {
        max-width: 375px;
    }
}

@media only screen and (min-width: 340px) {
    .pd_addtobasket_row_additional {
        padding: 0 54px 0 0px;
    }
}

/* UV 2026-10-27: "Vertrag widerrufen" hervorheben (gesetzliche Widerrufsfunktion).
   Ersetzt die alte Regel a[href*="15"], die jeden Link mit "15" in der
   Adresse fett gemacht hat (auch Produkte wie 1150 oder 2015). */
.layout_wrap a[href*="Vertrag-widerrufen"],
.layout_wrap a[href*=":_:15.html"] {
  font-weight: 500 !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* UV 20260825 lässt kategoriebild in der Größe 985x370 px ohne cropping auf Höhe von 300px wie im stylesheet.css definiert */


.cat_description_image {
    height: auto;
}

.cat_description_image img {
    width: 100%;
    height: auto;
    object-fit: initial;
}

/*added 20260826 UV: damit Unterkategoriebilder quadratisch angezeigt werden*/

.subcats_image_inner:before {
    padding-top: 100%;
}

.subcats_image_inner img {
    object-fit: contain;
}


ul.subcats_menu_hover > li > ul{
    z-index: 3200;
}

.product_listing{
    width:100%;
}

.dm_wishlist .flex_listing_cols{
    display: block;
}

/* BO PSC 2026-09-29 */

.gar-label-checkout{
    width:100%;
    height: auto;
    margin-top:20px;
    text-align: center;
}
.gar-label-checkout img{
    width:100%;
    height: auto;
    cursor: pointer;
}
.gar-label-checkout .info{
    font-size:11px;
    text-decoration: underline;
}

.dm_productinfo .content_box_payment{
    /* display:none */
}
.dm_productinfo .content_box_payment > span{
    background: #fff;
    border:1px solid var(--categoriesmenu_bg, #f0f0f0);
    padding:3px;
    width:40.306pt;
    border-radius: 4px;
    margin-right:8px;
}
.dm_productinfo .content_box_payment > span img{
    opacity: 1;
    filter: unset;
}
.dm_productinfo .content_box_payment > span:last-child{
    margin-right:0px;
}

/* EO PSC 2026-09-29 */

/* BO UV 2026-10-08 Vorteils-Icons unter Zahlarten (Produktseite)
   ersetzt den Block "Vorteils-Icons" vom 2026-10-06 */

.wds_usp_icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 10px;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #e5e2dd;
}
.wds_usp_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #343230;
  line-height: 1.3;
}
.wds_usp_item svg {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wds_usp_title {
  font-size: 13px;
  font-weight: 600;
}
.wds_usp_sub {
  font-size: 12px;
  color: #6b6661;
}

/* schmalere Bildschirme: 2 x 2 */
@media only screen and (max-width: 1199px) {
  .wds_usp_icons { grid-template-columns: repeat(2, 1fr); }
}

/* EO UV 2026-10-08 */


/* =========================================================
   20260930 UV - UEBER UNS & FAQ AUF PRODUKTSEITEN
   ========================================================= */

/* Aeusserer Rahmen: begrenzt die Breite wie der Rest der Seite */
.wds_product_blocks {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}


/* ---------- Block 1: Bild links, Text rechts ---------- */

.wds_product_about {
  margin: 60px 0 50px;
  background: #F5F3F0;
}

.wds_product_about_inner {
  display: flex;
  align-items: stretch;
}

/* Bildspalte: Hoehe ergibt sich aus dem Text, das Bild wird zugeschnitten */
.wds_product_about_image {
  position: relative;
  flex: 0 0 40%;
  width: 40%;
  min-height: 420px;
  overflow: hidden;
}

.wds_product_about_image img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%; /* Bildausschnitt: 0% = oben, 50% = Mitte */
}

.wds_product_about_text {
  flex: 1 1 60%;
  width: 60%;
  padding: 50px 55px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #343230;
}

.wds_product_about_text p {
  margin: 0 0 18px;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.7;
  color: #343230;
}

.wds_product_about_text strong {
  font-weight: 700;
}

.wds_product_about_link {
  display: inline-block;
  margin-top: 8px;
  color: #343230;
  font-weight: 700;
  text-decoration: underline;
}


/* ---------- Ueberschriften beider Bloecke ---------- */
/* UV 2026-10-24: Jost, leicht statt fett (vorher: inherit / 700) */

.wds_product_about_text h2,
.wds_product_faq h2 {
  margin: 0 0 25px;
  font-family: 'Jost', sans-serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: #343230;
  border-bottom: none;
}


/* ---------- Block 2: FAQ ---------- */

.wds_product_faq {
  margin: 50px 0 60px;
}

.wds_product_faq details {
  border-top: 1px solid #D8D5D0;
}

.wds_product_faq details:last-child {
  border-bottom: 1px solid #D8D5D0;
}

.wds_product_faq summary {
  position: relative;
  padding: 20px 45px 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: #343230;
}

.wds_product_faq summary::-webkit-details-marker {
  display: none;
}

.wds_product_faq summary:focus-visible {
  outline: 2px solid #343230;
  outline-offset: 2px;
}

/* Plus-Zeichen: automatisch senkrecht mittig neben der Frage */
.wds_product_faq summary:after {
  content: "+";
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

/* \2212 ist das Minuszeichen als Code - statt des Zeichens selbst */
.wds_product_faq details[open] summary:after {
  content: "\2212";
}

.wds_faq_answer {
  padding: 0 45px 20px 0;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.7;
  color: #343230;
}

.wds_faq_answer p {
  margin: 0;
}


/* ---------- Mobil ---------- */
/* Falls der Block auf dem Tablet gequetscht wirkt: 767px durch 991px ersetzen */

@media (max-width: 767px) {

  .wds_product_blocks {
    padding: 0 15px;
  }

  .wds_product_about {
    margin: 40px 0;
  }

  .wds_product_about_inner {
    display: block;
  }

  .wds_product_about_image {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .wds_product_about_text {
    width: 100%;
    padding: 30px 22px 36px;
  }

  .wds_product_about_text h2,
  .wds_product_faq h2 {
    font-size: 24px;
  }

  .wds_product_faq {
    margin: 40px 0;
  }
}


/* =========================================================
   BO UV 2026-10-24 - Kauf-Buttons in Denimblau
   Button 2 (In den Warenkorb, Sicher zur Kasse, Weiter zu Schritt 2/3,
   Kaufen, Anmelden): Denimblau, ohne Symbole, leicht gesperrt.
   Nebenaktionen nur mit Kontur.
   ========================================================= */

/* ---------- Button 2: Hauptaktionen ---------- */

.cssButton.cssButtonColor2 {
  border-radius: 4px;
  letter-spacing: 0.08em;
  font-weight: 500;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.cssButton.cssButtonColor2 .cssButtonText {
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Einkaufswagen-, Haken- und Pfeil-Symbole ausblenden ... */
.cssButton.cssButtonColor2 .cssButtonIcon {
  display: none;
}

/* ... aber NICHT bei Buttons, die nur aus einem Icon bestehen
   (z. B. "Erneut bestellen" in Meine Bestellungen) - sonst waeren sie leer */
.cssButton.cssButtonColor2:not(:has(.cssButtonText)) .cssButtonIcon,
.cssButton.cssButtonColor2:has(.cssButtonText:empty) .cssButtonIcon,
[class*="dm_account"] .cssButton.cssButtonColor2 .cssButtonIcon {
  display: inline-flex;
  color: #F5F3F0;
}

/* Hover: etwas dunkleres Denimblau */
.cssButton.cssButtonColor2:hover,
.cssButton.cssButtonColor2:focus-within {
  background: #2E4560;
  border-color: #2E4560;
  color: #F5F3F0;
  opacity: 1;
}


/* ---------- Nebenaktion "Weiter" (z. B. Anmeldeseite): nur Kontur ---------- */
/* Greift nur bei Buttons mit genau dem Titel "Weiter",
   nicht bei "Weiter zu Schritt 2/3" oder "Sicher zur Kasse". */

.cssButton.cssButtonColor2[title="Weiter"] {
  background: transparent;
  border: 1px solid #3A5675;
  color: #3A5675;
}

.cssButton.cssButtonColor2[title="Weiter"] .cssButtonText {
  color: inherit;
}

.cssButton.cssButtonColor2[title="Weiter"]:hover,
.cssButton.cssButtonColor2[title="Weiter"]:focus-within {
  background: #3A5675;
  border-color: #3A5675;
  color: #F5F3F0;
}


/* ---------- Merkzettel-Herz neben "In den Warenkorb": nur Kontur ---------- */

.pd_addtobasket_wish .cssButton {
  background: transparent;
  border: 1px solid #3A5675;
  border-radius: 4px;
  color: #3A5675;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.pd_addtobasket_wish .cssButton i,
.pd_addtobasket_wish .cssButton .cssButtonIcon {
  color: inherit;
}

.pd_addtobasket_wish .cssButton:hover,
.pd_addtobasket_wish .cssButton:focus-within {
  background: #3A5675;
  border-color: #3A5675;
  color: #F5F3F0;
  opacity: 1;
}


/* ---------- Button 1: gleiche Schrift wie Button 2 ---------- */

.cssButton.cssButtonColor1 {
  border-radius: 4px;
  letter-spacing: 0.08em;
  font-weight: 500;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.cssButton.cssButtonColor1 .cssButtonText {
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Alle Button-1-Nebenaktionen: beim Darueberfahren gefuellt */
.cssButton.cssButtonColor1:hover,
.cssButton.cssButtonColor1:focus-within {
  background: #343230;
  border-color: #343230;
  color: #F5F3F0;
  opacity: 1;
}

.cssButton.cssButtonColor1:hover .cssButtonText,
.cssButton.cssButtonColor1:hover i {
  color: inherit;
}

/* "Warenkorb anzeigen" (Slide-out-Cart): Nebenaktion, nur Kontur, ohne Pfeil */

.cssButton.cssButtonColor1[title="Warenkorb anzeigen"] {
  background: transparent;
  border: 1px solid #343230;
  color: #343230;
}

.cssButton.cssButtonColor1[title="Warenkorb anzeigen"] .cssButtonText {
  color: inherit;
}

.cssButton.cssButtonColor1[title="Warenkorb anzeigen"] .cssButtonIcon {
  display: none;
}

.cssButton.cssButtonColor1[title="Warenkorb anzeigen"]:hover {
  background: #343230;
  border-color: #343230;
  color: #F5F3F0;
  opacity: 1;
}

/* EO UV 2026-10-24 Kauf-Buttons */


/* =========================================================
   BO UV 2026-10-24 - Checkout: Kopfbereich und Schrittleiste
   ========================================================= */

/* Kopfbereich im Checkout: weiss statt Off-White, feine Linie
   statt dickem Anthrazit-Balken */
.layout_header_checkout {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E2DD !important;
}

.layout_header_checkout .layout_header_checkout_inner {
  background: transparent;
}

/* Schrittleiste: Ueberschriften leichter (Template: 700) */
ul#checkoutnavigation li .title {
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* Aktiver Schritt: Flaeche in Nebelblau, Zahl in Denimblau gefuellt */
ul#checkoutnavigation li span.active {
  background: #E3E7EC;
  border-radius: 4px;
  padding: 8px 12px;
}

ul#checkoutnavigation li span.active .number {
  background: #3A5675;
  border-color: #3A5675;
  color: #F5F3F0;
}

ul#checkoutnavigation li span.active .title {
  color: #3A5675;
}

/* Erledigte Schritte (verlinkt): Haekchen in Denimblau */
ul#checkoutnavigation li a .number {
  border-color: #3A5675;
  color: #3A5675;
}

/* EO UV 2026-10-24 Checkout */


/* =========================================================
   BO UV 2026-10-25 - Newsletter, Mengenfeld Warenkorb, AGB-Hinweis
   ========================================================= */

/* Newsletter-Ueberschrift: normal statt fett (Template: 700) */
.layout_subfooter .sf_newsletter_heading {
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
}

/* Newsletter-Button: Denimblau gefuellt, Wort "Anmelden" statt Pfeil-Icon.
   Aufbau: span.sf_newsletter_button > span.cssButton (sichtbare Huelle)
           > span.cssButtonIcon (sichtbares Icon) + button.cssButtonText
   (unsichtbar darueber, faengt den Klick ab - wird nicht veraendert).
   Das Wort ersetzt daher das Icon in span.cssButtonIcon. */
/* Feste Icon-Breite des Templates aufheben, damit das Wort hineinpasst */
.layout_subfooter .sf_newsletter_button {
  flex: 0 0 auto;
  width: auto !important;
}

.layout_subfooter .sf_newsletter_button .cssButton {
  background: #3A5675;
  border: 1px solid #3A5675;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 18px !important;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.layout_subfooter .sf_newsletter_button .cssButtonIcon {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Pfeil-Icon ausblenden ... */
.layout_subfooter .sf_newsletter_button .cssButtonIcon i,
.layout_subfooter .sf_newsletter_button .cssButtonIcon svg {
  display: none;
}

/* ... und an seiner Stelle das Wort zeigen
   UV 2026-11-04: "JETZT BEITRETEN" fuer den Insider Club (vorher "ANMELDEN") */
.layout_subfooter .sf_newsletter_button .cssButtonIcon::after {
  content: "JETZT BEITRETEN";
  padding: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: #F5F3F0;
  white-space: nowrap;
}

.layout_subfooter .sf_newsletter_button .cssButton:hover,
.layout_subfooter .sf_newsletter_button .cssButton:focus-within {
  background: #2E4560;
  border-color: #2E4560;
}

/* UV 2026-11-10: Newsletter-Formular auf dem Handy nicht breiter als der
   Bildschirm. Seit "JETZT BEITRETEN" ragte der Button rechts hinaus.
   Das E-Mail-Feld darf jetzt schrumpfen, der Button bleibt ganz. */
.layout_subfooter .sf_newsletter_form_inner {
  max-width: 100%;
}
.layout_subfooter .sf_newsletter_input {
  flex: 1 1 auto;
  min-width: 0;
}
.layout_subfooter .sf_newsletter_input input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
@media only screen and (max-width: 400px) {
  .layout_subfooter .sf_newsletter_button .cssButton {
    padding: 0 12px !important;
  }
}

/* Mengenfeld im Warenkorb breiter, damit "1,5 Meter" ganz sichtbar ist.
   !important noetig, weil das Template die Breite (90px) direkt im HTML setzt */
.of_quantity_field .SumoSelect.sumo_cart_quantity,
.of_quantity_field .SumoSelect.sumo_cart_quantity .CaptionCont {
  width: 130px !important;
}

/* Mengenfeld auf der Produktseite: Auswahlfeld fuellt die (150px breite) Box.
   !important noetig, weil das Template die Breite direkt im HTML setzt */
.pd_addtobasket_input .SumoSelect,
.pd_addtobasket_input .SumoSelect .CaptionCont {
  width: 100% !important;
}

/* Mengenangabe ("0,5 Meter") groesser und kraeftiger, damit sofort
   erkennbar ist, wo die Meter ausgewaehlt werden - Produktseite und Warenkorb */
.pd_addtobasket_input .SumoSelect > .CaptionCont > span:first-of-type,
.of_quantity_field .SumoSelect > .CaptionCont > span:first-of-type {
  font-size: 17px;
  font-weight: 500;
  color: #343230;
}

/* Aufgeklappte Auswahlliste gleich gross wie die Anzeige.
   !important noetig, weil das Template die Listen-Schrift staerker gewichtet setzt */
.pd_addtobasket_input .SumoSelect .optWrapper .options li,
.pd_addtobasket_input .SumoSelect .optWrapper .options li label,
.of_quantity_field .SumoSelect .optWrapper .options li,
.of_quantity_field .SumoSelect .optWrapper .options li label {
  font-size: 17px !important;
  color: #343230;
}

/* Gewaehlter Eintrag in der Liste etwas kraeftiger */
.pd_addtobasket_input .SumoSelect .optWrapper .options li.selected label,
.of_quantity_field .SumoSelect .optWrapper .options li.selected label {
  font-weight: 500;
}

/* AGB-Hinweis im Checkout: Nebelblau statt Gelb */
.checkout_accept {
  background: transparent !important;
  border: none !important;
}

.checkout_accept .checkoutconditions {
  background: #E3E7EC !important;
  border: none !important;
  border-radius: 4px;
  padding: 12px 15px;
  color: #343230;
}

.checkout_accept .checkoutconditions a {
  color: #3A5675;
}

/* EO UV 2026-10-25 */


/* =========================================================
   BO UV 2026-10-25 - Guthaben- und Info-Hinweise einheitlich
   Nebelblau-Flaeche, Anthrazit-Schrift, Icon in Denimblau,
   nicht kursiv (vorher Hellblau #eaf2fa / Blau #296aab / kursiv)
   ========================================================= */

/* Alle Info-Hinweise im Shop */
.infomessage {
  background: #E3E7EC !important;
  color: #343230 !important;
  border-radius: 4px;
}

.infomessage::before,
.infomessage i {
  color: #3A5675 !important;
}

/* Guthaben-Hinweis in Schritt 2 (Bezahlart): nicht kursiv */
.checkout_payment_gift .infomessage {
  font-style: normal;
  padding: 10px 12px;
}

/* Guthaben-Zeile im Slide-out-Warenkorb */
.toggle_cart .giftmessage {
  background: #E3E7EC;
  color: #343230;
  border-radius: 4px;
}

.toggle_cart .giftmessage strong,
.toggle_cart .giftmessage b {
  font-weight: 500;
}

/* Geschenk-Icon: Denimblau ohne kraeftig blaue Flaeche */
.toggle_cart .giftmessage::before,
.toggle_cart .giftmessage > i,
.toggle_cart .giftmessage > span:first-child {
  background: transparent !important;
  color: #3A5675 !important;
}

/* EO UV 2026-10-25 Hinweise */


/* =========================================================
   BO UV 2026-10-25 - "Stoffe von A-Z": Unterkategorie-Kacheln
   in der Mitte auf grossen Bildschirmen ausblenden, weil dort
   links bereits der Menuebaum mit allen 50 Unterkategorien steht.
   Auf Handy/Tablet bleiben sie sichtbar (dort keine Seitenleiste).
   Erkennung der Seite: Kachel-Link auf Badelycra (:::18_516.html),
   den es nur auf "Stoffe von A-Z" als direkte Unterkategorie gibt.
   ========================================================= */

@media only screen and (min-width: 992px) {
  .subcats_row:has(a[href*=":::18_516.html"]),
  .subline:has(+ .subcats_row a[href*=":::18_516.html"]),
  /* UV 2026-11-05: auch den umgebenden Rahmen ausblenden - sonst bleiben
     seine Abstaende als grosse weisse Flaeche unter dem Kategorietext stehen */
  .sub_categories_listing:has(a[href*=":::18_516.html"]) {
    display: none;
  }
}

/* EO UV 2026-10-25 Stoffe von A-Z */


/* =========================================================
   BO UV 2026-10-25 - Gewaehrleistungs-Label (EU-Pflichthinweis)
   Nur im Checkout, in Originalgroesse - hier wird nur der Abstand
   zum Kaufen-Button angepasst.
   ========================================================= */

/* Checkout Schritt 3: Label in Originalgroesse unter dem Kaufen-Button,
   aber mit deutlich mehr Abstand, damit der Button fuer sich steht */
.gar-label-checkout {
  margin-top: 60px;
}

/* Kaufen-Button in Schritt 3: groesser und kraeftiger */
.br_btn_checkout .cssButtonPos12 .cssButton.cssButtonColor2 {
  min-height: 56px;
}

.br_btn_checkout .cssButtonPos12 .cssButton.cssButtonColor2 .cssButtonText {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

/* EO UV 2026-10-25 Gewaehrleistungs-Label */


/* =========================================================
   BO UV 2026-10-25 - Anmeldeseite: Gast- und Konto-Button nur Kontur
   (Hauptaktion bleibt "Anmelden" in Denimblau). Die Buttons heissen
   jetzt "Als Gast fortfahren" / "Konto erstellen" statt "Weiter".
   ========================================================= */

.layout_wrap .wds_login_options .cssButton,
.layout_wrap .wds_login_options .cssButton .cssButtonText {
  background: transparent !important;
  border-color: #3A5675 !important;
  color: #3A5675 !important;
}

.layout_wrap .wds_login_options .cssButton {
  border: 1px solid #3A5675 !important;
}

.layout_wrap .wds_login_options .cssButton:hover,
.layout_wrap .wds_login_options .cssButton:focus-within {
  background: #3A5675 !important;
}

.layout_wrap .wds_login_options .cssButton:hover .cssButtonText,
.layout_wrap .wds_login_options .cssButton:focus-within .cssButtonText {
  color: #F5F3F0 !important;
}

/* EO UV 2026-10-25 Anmeldeseite */


/* =========================================================
   BO UV 2026-10-25 - Newsletter-Bereich im Bestellablauf ausblenden
   (Warenkorb, Anmeldeseite, Gast-Bestellung, Konto erstellen), damit nichts vom
   Weg zur Kasse ablenkt. Das Newsletter-Haekchen im Formular bleibt.
   Erkennung ueber die Seitenklasse dm_... an .layout_content
   ========================================================= */

/* Seitenklassen laut Browser: z. B. dm_createaccount (ohne Unterstriche).
   Die Teilworte decken alle Schreibweisen ab:
   dm_login..., dm_create... (Konto und Gast), dm_shopping... (Warenkorb) */
.layout_wrap:has(.layout_content[class*="dm_login"]) .layout_subfooter,
.layout_wrap:has(.layout_content[class*="dm_create"]) .layout_subfooter,
.layout_wrap:has(.layout_content[class*="dm_shopping"]) .layout_subfooter {
  display: none;
}

/* EO UV 2026-10-25 Newsletter im Bestellablauf */


/* =========================================================
   BO UV 2026-10-25 - Checkout Schritt 3: aufklappbare Boxen
   (Versandadresse, Rechnungsadresse, Versandart, Zahlungsweise)
   und klickbare erledigte Schritte
   ========================================================= */

/* Ueberschrift als Klickflaeche mit Pfeil rechts */
details.wds_cbox > summary {
  position: relative;
  padding-right: 30px;
  cursor: pointer;
  list-style: none;
}

details.wds_cbox > summary::-webkit-details-marker {
  display: none;
}

details.wds_cbox > summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #343230;
  border-bottom: 1.5px solid #343230;
  transform: translateY(-75%) rotate(45deg);
  transition: transform 0.2s ease;
}

details.wds_cbox[open] > summary::after {
  transform: translateY(-25%) rotate(-135deg);
}

/* Zugeklappte Boxen enger untereinander */
details.wds_cbox:not([open]) {
  margin-bottom: 0;
}

.wds_cbox_content {
  padding-top: 4px;
}

/* Erledigte Schritte: als Link erkennbar */
ul#checkoutnavigation li > a {
  display: block;
  text-decoration: none;
  color: inherit;
}

ul#checkoutnavigation li > a:hover .title,
ul#checkoutnavigation li > a:focus .title {
  color: #3A5675;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* EO UV 2026-10-25 Checkout Schritt 3 */


/* =========================================================
   BO UV 2026-10-27 - Slide-out-Warenkorb: Preise und Zwischensumme
   (gehoert zur box_cart.html vom 27.10.2026)
   ========================================================= */

/* Preis pro Artikel unter der Mengenangabe */
.toggle_cart .tpc_price {
  margin-top: 4px;
  font-weight: 500;
  color: #343230;
}

/* Zwischensumme unter der Artikelliste */
.toggle_cart .wds_cart_total {
  padding: 15px 0;
  margin-bottom: 15px;
  border-bottom: 1px solid #E5E2DD;
}

.toggle_cart .wds_cart_total_row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.1em;
  font-weight: 500;
  color: #343230;
}

/* MwSt.- und Versandkosten-Hinweis klein darunter */
.toggle_cart .wds_cart_total_info {
  margin-top: 4px;
  font-size: 0.85em;
  color: #6B6661;
}

/* EO UV 2026-10-27 Slide-out-Warenkorb */


/* =========================================================
   BO UV 2026-10-28 - Bild-Buttons auf der Startseite
   (Einstiegs-Kacheln und "Entdecken Sie noch mehr ..."):
   Anthrazit gefuellt mit Pfeil, damit sie als Button erkennbar sind
   (vorher hell auf hellem Bild, wirkten wie Ueberschriften).
   Aufbau: .banner_row a > span.banner_item_content > span (Text)
   ========================================================= */

.banner_row .banner_item_content {
  background: #343230 !important;
  color: #F5F3F0 !important;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  transition: background-color 0.25s ease;
}

.banner_row .banner_item_content > span {
  color: #F5F3F0 !important;
}

/* Pfeil am Ende ("\2192" ist der Pfeil als Code) */
.banner_row .banner_item_content > span::after {
  content: "\2192";
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.25s ease;
}

/* Beim Darueberfahren etwas heller, Pfeil rueckt nach rechts */
.banner_row a:hover .banner_item_content,
.banner_row a:focus .banner_item_content {
  background: #57524E !important;
}

.banner_row a:hover .banner_item_content > span::after,
.banner_row a:focus .banner_item_content > span::after {
  transform: translateX(4px);
}

/* EO UV 2026-10-28 Bild-Buttons */


/* =========================================================
   BO UV 2026-10-28 - Edit-Kachel (BANNER17) auf der Startseite
   Gehoert zur index.html vom 28.10.2026. Greift nur, wenn das Edit
   gesetzt ist (Klasse wds_edit_row am Block von Banner 5-8).
   Desktop/Tablet: links Edit hochkant ueber volle Hoehe,
   rechts die vier Kacheln (Banner 5-8) im Raster 2 x 2.
   UV 2026-10-31: rechte Kacheln einheitlich 8:5 (ueber ::before), Edit-Kachel
   fuellt die Hoehe beider Zeilen.
   Handy: Edit oben volle Breite im Hochformat 4:5, darunter 2 x 2.
   ========================================================= */

@media only screen and (min-width: 768px) {

  /* Drei gleich breite Spalten */
  .banner_row.wds_edit_row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: auto;
    gap: 20px;
    align-items: stretch !important;
  }

  /* Template-Breiten (width_50 / width_33 / width_66) und -Abstaende
     im Raster aufheben, der Abstand kommt einheitlich vom Raster (gap) */
  .banner_row.wds_edit_row > .banner_item {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    order: 0 !important;
    align-self: stretch !important;
  }

  /* Rechte Kacheln (Banner 5-8): Das Template legt das Bildformat ueber
     .banner_item_image::before (padding-top) fest, je nach Kachelbreite
     unterschiedlich. Hier fuer alle vier einheitlich 8:5 (62,5 %),
     damit beide Zeilen gleich hoch sind. Das Bild fuellt den Rahmen
     (object-fit: cover aus dem Template). */
  .banner_row.wds_edit_row > .banner_item:not(.wds_edit_tile) .banner_item_image::before {
    padding-top: 62.5% !important;
  }

  /* Edit-Kachel: erste Spalte, ueber beide Zeilen */
  .banner_row.wds_edit_row > .wds_edit_tile {
    grid-column: 1;
    grid-row: 1 / span 2;
    /* Das grosse Hochkantbild darf die Zeilenhoehe nicht bestimmen:
       die Kachel zaehlt fuer die Hoehe als leer und wird dann auf die
       Hoehe der beiden rechten Zeilen gestreckt */
    contain: size;
  }

  /* Edit-Kachel bekommt kein eigenes Format, sondern fuellt genau die
     Hoehe der beiden rechten Zeilen */
  .banner_row.wds_edit_row > .wds_edit_tile .banner_item_image {
    position: relative;
    height: 100% !important;
  }

  .banner_row.wds_edit_row > .wds_edit_tile .banner_item_image::before {
    display: none !important;
  }

  .banner_row.wds_edit_row > .wds_edit_tile img {
    object-position: center top;
  }
}

/* Handy: Edit-Kachel oben ueber die volle Breite im Hochformat 4:5,
   damit die Frau ganz zu sehen ist; darunter die vier Kacheln 2 x 2.
   Das Format kommt wie beim Template ueber .banner_item_image::before. */
@media only screen and (max-width: 767px) {
  .banner_row.wds_edit_row > .wds_edit_tile {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .banner_row.wds_edit_row > .wds_edit_tile .banner_item_image::before {
    padding-top: 125% !important;
  }

  .banner_row.wds_edit_row > .wds_edit_tile img {
    object-position: center top;
  }
}

/* EO UV 2026-10-28 Edit-Kachel */

/* =========================================================
   UV 2026-10-28 Edit-Looks: Hochkant-Raster in Kategorietext 1
   (z. B. The Office Edit), 3 Outfits nebeneinander, Handy wischen
   ========================================================= */
.wds_looks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 32px;
}
.wds_looks .wds_look {
  display: block;
  text-decoration: none !important;
  color: #343230 !important;
}
.wds_looks .wds_look img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  transition: opacity 0.25s ease;
}
.wds_looks .wds_look span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.wds_looks .wds_look span::after {
  content: "\2192";
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.25s ease;
}
.wds_looks .wds_look:hover img,
.wds_looks .wds_look:focus img { opacity: 0.9; }
.wds_looks .wds_look:hover span::after,
.wds_looks .wds_look:focus span::after { transform: translateX(4px); }

/* Handy: seitlich wischen, ein Look fast bildschirmbreit */
@media only screen and (max-width: 767px) {
  .wds_looks {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 8px;
  }
  .wds_looks .wds_look {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}
/* EO UV 2026-10-28 Edit-Looks */

/* UV 2026-10-28 Edit-Looks: automatische Unterkategorie-Kacheln
   ausblenden, wenn im Kategorietext das Look-Raster steht */
body:has(.wds_looks) .sub_categories_listing {
  display: none !important;
}
/* EO UV 2026-10-28 Edit-Looks Unterkategorien */

/* UV 2026-10-29 Kategorietexte: Zwischenueberschriften deutlicher
   (Medium statt fett, groesser, mit Abstand nach oben) */
.cat_description h2 {
  font-size: 24px;
  font-weight: 400; /* UV 2026-11-05: wie die h1 (vorher 500, wirkte kraeftiger als die Seitenueberschrift) */
  color: #343230;
  margin: 32px 0 12px;
}
.cat_description h3 {
  font-size: 19px;
  font-weight: 500;
  color: #343230;
  margin: 28px 0 8px;
}
.cat_description > h2:first-child,
.cat_description > h3:first-child { margin-top: 0; }
@media only screen and (max-width: 767px) {
  .cat_description h2 { font-size: 21px; }
  .cat_description h3 { font-size: 17px; }
}
/* EO UV 2026-10-29 Kategorietexte */

/* UV 2026-10-31 Kategorietexte: Lesebreite fuer Fliesstext begrenzen,
   Look-Raster und Bilder bleiben voll breit */
.cat_description p,
.cat_description ul,
.cat_description ol,
.cat_description h2,
.cat_description h3 {
  max-width: 850px;
}
/* EO UV 2026-10-31 Lesebreite */

/* =========================================================
   BO UV 2026-11-01 - Startseite: Platz fuer den Slider reservieren
   PageSpeed (Computer): der ganze Inhalt der Startseite springt beim
   Laden zweimal (CLS ca. 1,17), weil der Slider beim Start seines
   Skripts kurz zusammenfaellt. Der Rahmen bekommt deshalb vorab die
   Hoehe der Slider-Bilder (Desktop 1400 x 490, Handy 580 x 348).
   aspect-ratio wirkt als Mindesthoehe, groessere Inhalte duerfen wachsen.
   ========================================================= */

.layout_content.dm_home .slider_row {
  aspect-ratio: 1400 / 490;
}

@media only screen and (max-width: 600px) {
  .layout_content.dm_home .slider_row {
    aspect-ratio: 580 / 348;
  }
}

/* EO UV 2026-11-01 Slider */


/* UV 2026-11-01: Copyright-Zeile im Footer besser lesbar
   (PageSpeed: Kontrast zu gering). Taupe auf Anthrazit. */
.layout_footer .mod_copyright,
.layout_footer .mod_copyright span,
.layout_footer .mod_copyright a {
  color: #B1ABA0 !important;
}
/* EO UV 2026-11-01 Copyright */


/* =========================================================
   BO UV 2026-11-02 - Hinweis "Noch x EUR bis zur versandkostenfreien
   Lieferung" (nur Deutschland, ab 79 EUR) mit Fortschrittsbalken
   Gehoert zur box_cart.html (Slide-out-Cart) und zur
   shopping_cart.html (Warenkorbseite) vom 02.11.2026.
   ========================================================= */

.wds_freeship {
  margin: 0 0 15px;
  padding: 12px 14px;
  background: #E3E7EC;          /* Nebelblau */
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: #343230;               /* Anthrazit */
  text-align: center;
}

/* UV 2026-11-03: Hinweis steht jetzt oben (vor der Artikelliste),
   damit er auch bei vielen Artikeln sichtbar bleibt */
/* Warenkorbseite: ueber Artikelliste und Zusammenfassung */
.shopping_cart .wds_freeship {
  margin: 0 0 25px;
}

/* Slide-out-Cart: zwischen Ueberschrift und Artikelliste */
.toggle_cart .wds_freeship {
  margin: 0 0 15px;
}

/* Fehlbetrag hervorgehoben */
.wds_freeship_text strong {
  font-weight: 500;
  color: #3A5675;               /* Denimblau */
  white-space: nowrap;
}

/* Fortschrittsbalken */
.wds_freeship_bar {
  margin-top: 8px;
  height: 4px;
  background: #F5F3F0;          /* Off-White */
  border-radius: 2px;
  overflow: hidden;
}

.wds_freeship_bar span {
  display: block;
  height: 100%;
  background: #3A5675;          /* Denimblau */
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Grenze erreicht */
.wds_freeship_done .wds_freeship_text {
  color: #3A5675;
  font-weight: 500;
}

/* Handy: etwas kompakter */
@media only screen and (max-width: 767px) {
  .wds_freeship {
    font-size: 13px;
    padding: 10px 12px;
  }
}

/* EO UV 2026-11-02 Versandkostenfrei-Hinweis */


/* =========================================================
   BO UV 2026-11-04 - Startseite: Block "Hallo, ich bin Ulla"
   Gehoert zur index.html vom 04.11.2026 (ersetzt die Anzeige von BANNER9).
   Desktop: Foto quadratisch links | Ueberschrift + Button mittig | Text rechts
   Tablet/Handy: alles untereinander
   ========================================================= */

.wds_home_about {
  display: flex;
  align-items: stretch;
  margin: 0;
  background: #FFFFFF;
  color: #343230;
}

/* Foto: quadratisch, hoechstens 335 x 335 px (Hoehe des alten Banners).
   Wird der Text hoeher, waechst die Spalte mit und das Foto wird zugeschnitten.
   UV 2026-11-04: max. 335 px, vorher 24 % (auf breiten Bildschirmen zu hoch) */
.wds_home_about_image {
  position: relative;
  flex: 0 0 auto;
  width: min(24%, 335px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.wds_home_about_image img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%; /* Bildausschnitt: 0% = oben, 50% = Mitte */
}

/* Mittlere Spalte: Ueberschrift und Button, beides zentriert */
.wds_home_about_head {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px 20px;
  box-sizing: border-box;
}

/* Ueberschrift in Cormorant (ueberschreibt die allgemeine h2-Regel mit Jost) */
.wds_home_about .wds_home_about_head h2 {
  margin: 0 0 22px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 42px; /* UV 2026-11-04: vorher 54px, zu aufdringlich */
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0;
  color: #343230;
  border-bottom: none;
}

/* Button wie die Bild-Buttons der Startseite: Anthrazit mit Pfeil */
/* .layout_wrap und !important noetig: das Template setzt fuer Links
   einen eigenen Hintergrund, sonst ist der Button weiss auf weiss */
.layout_wrap .wds_home_about a.wds_home_about_btn,
.layout_wrap .wds_home_about a.wds_home_about_btn:visited {
  display: inline-block;
  padding: 12px 22px;
  background: #343230 !important;
  color: #F5F3F0 !important;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background-color 0.25s ease;
}

.wds_home_about_btn::after {
  content: "\2192";
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.25s ease;
}

.layout_wrap .wds_home_about a.wds_home_about_btn:hover,
.layout_wrap .wds_home_about a.wds_home_about_btn:focus {
  background: #57524E !important;
}

.wds_home_about_btn:hover::after,
.wds_home_about_btn:focus::after {
  transform: translateX(4px);
}

/* Rechte Spalte: Text zentriert */
.wds_home_about_text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 40px 30px 10px;
  box-sizing: border-box;
  text-align: center;
}

.wds_home_about_text p {
  max-width: 640px; /* auf breiten Bildschirmen keine ueberlangen Zeilen */
  margin: 0 auto 10px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: #343230;
}

.wds_home_about_text p:last-child {
  margin-bottom: 0;
}

/* Tablet und Handy: Foto oben, darunter Ueberschrift, Text und Button.
   display: contents loest die mittlere Spalte auf, damit der Button
   unter den Text rutschen kann. */
@media only screen and (max-width: 991px) {
  .wds_home_about {
    flex-direction: column;
    margin: 30px 0;
  }

  .wds_home_about_image {
    flex: none;
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .wds_home_about_image img {
    object-position: center 15%; /* Kopf nicht anschneiden */
  }

  .wds_home_about_head {
    display: contents;
  }

  .wds_home_about .wds_home_about_head h2 {
    order: 1;
    margin: 0;
    padding: 28px 20px 0;
    font-size: 34px;
    text-align: center;
  }

  .wds_home_about_text {
    order: 2;
    padding: 18px 20px 24px;
  }

  .wds_home_about_btn {
    order: 3;
    align-self: center;
    margin: 0 0 32px;
  }
}

/* EO UV 2026-11-04 Hallo, ich bin Ulla */


/* =========================================================
   BO UV 2026-11-04 - Zahlungsmethoden im Footer in Farbe
   wie auf der Produktseite (siehe Block PSC 2026-09-29):
   Graufilter des Templates aufheben, weisser Hintergrund
   ========================================================= */

.layout_footer .content_box_payment > span {
  background: #FFFFFF !important;
  border-radius: 4px;
}

.layout_footer .content_box_payment > span img {
  opacity: 1 !important;
  filter: none !important;
}

/* EO UV 2026-11-04 Zahlungsmethoden Footer */


/* =========================================================
   BO UV 2026-11-04 - Cookie-Banner (cookieconsent / as-oil)
   "Alle akzeptieren" gefuellt in Denimblau, "Nur notwendige"
   gleich gross mit Kontur - rechtlich muss die Ablehnung auf der
   ersten Ebene gleichwertig sichtbar bleiben (OLG Koeln 6 U 80/23,
   VG Hannover 10 A 5385/22), daher NICHT kleiner oder blasser machen.
   Die Texte stehen im Admin, nicht hier.
   ========================================================= */

/* Beide Buttons: gleiche Groesse, Schrift wie die Shop-Buttons */
.as-oil .as-oil__btn-optin,
.as-oil .as-oil__btn-only-essentials {
  min-width: 175px;
  min-height: 42px;
  border-radius: 4px !important;
  font-family: 'Jost', sans-serif;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Alle akzeptieren: Denimblau gefuellt */
.as-oil .as-oil__btn-optin {
  background-color: #3A5675 !important;
  border: 1px solid #3A5675 !important;
  color: #F5F3F0 !important;
}

.as-oil .as-oil__btn-optin:hover,
.as-oil .as-oil__btn-optin:focus {
  background-color: #2E4560 !important;
  border-color: #2E4560 !important;
  color: #F5F3F0 !important;
}

/* Nur notwendige: gleich gross, nur Kontur in Anthrazit */
.as-oil .as-oil__btn-only-essentials {
  background-color: transparent !important;
  border: 1px solid #343230 !important;
  color: #343230 !important;
}

.as-oil .as-oil__btn-only-essentials:hover,
.as-oil .as-oil__btn-only-essentials:focus {
  background-color: #343230 !important;
  color: #F5F3F0 !important;
}

/* Einstellungsseite (Praeferenzen): Haupt-Button ebenfalls Denimblau */
.as-oil .as-oil__btn-blue {
  background-color: #3A5675 !important;
  border-radius: 4px;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
}

.as-oil .as-oil__btn-blue:hover {
  background-color: #2E4560 !important;
}

/* Schalter "an" in Denimblau statt Grau */
.as-oil .as-oil-cpc__switch input:checked ~ .as-oil-cpc__slider {
  background-color: #3A5675 !important;
}

/* Ueberschrift: leicht statt fett, wie die anderen Shop-Ueberschriften */
.as-oil .as-oil__heading {
  font-family: 'Jost', sans-serif;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  color: #343230;
}

/* EO UV 2026-11-04 Cookie-Banner */


/* =========================================================
   BO UV 2026-11-09 - Mengenauswahl am Handy: Pfeil antippbar
   Am Handy oeffnet sich die Auswahl ueber das unsichtbare
   Original-Auswahlfeld (select.SumoUnder), das ueber der Anzeige liegt.
   Das Template gibt diesem Feld im HTML eine feste Breite von 90px,
   deshalb reagierte nur der linke Teil ("0,5"), nicht der Pfeil rechts.
   Hier wird es ueber das ganze Feld gezogen - nur auf Touch-Geraeten,
   am Computer bleibt die gestaltete Auswahlliste unveraendert.
   ========================================================= */

/* UV 2026-11-09: nur (pointer: coarse) - manche Samsung-Handys melden wegen
   Stift/Air View faelschlich "hover" */
@media (pointer: coarse) {
  .pd_addtobasket_input .SumoSelect,
  .of_quantity_field .SumoSelect {
    position: relative;
  }

  .pd_addtobasket_input .SumoSelect > select.SumoUnder,
  .of_quantity_field .SumoSelect > select.SumoUnder {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2;
  }

  /* Pfeil und Text lassen Fingertipps zum Auswahlfeld durch */
  .pd_addtobasket_input .SumoSelect > .CaptionCont,
  .pd_addtobasket_input .SumoSelect > .CaptionCont *,
  .of_quantity_field .SumoSelect > .CaptionCont,
  .of_quantity_field .SumoSelect > .CaptionCont * {
    pointer-events: none;
  }
}

/* EO UV 2026-11-09 Mengenauswahl Handy */


/* =========================================================
   BO UV 2026-11-10 - CLS-Fix (Google Core Web Vitals)
   PageSpeed Desktop Produktseite: Laufschrift 0,114 + Zahlungs-Icons
   ========================================================= */

/* Laufschrift oben: feste Hoehe und abgeschirmt, damit nichts
   darunter springen kann. Optik bleibt gleich. */
.spm--topbarTicker {
  height: 30px;
  contain: layout paint;
}
.spm--topbarTicker .inner .content {
  will-change: transform;
}
.spm--topbarTicker .inner .content p {
  display: inline;
  margin: 0;
}

/* Zahlungs-Icons (Produktseite und Footer): Seitenverhaeltnis der
   Bilder (240x160) vorgeben, damit der Platz vor dem Laden reserviert ist.
   Groesse bleibt wie bisher. */
.content_box_payment > span img {
  aspect-ratio: 240 / 160;
  height: auto;
}

/* EO UV 2026-11-10 CLS-Fix */