/* 
Theme Name: Württemberger Medien
Theme URI: https://github.com/elementor/hello-theme/
Description: Württemberger Medien Elementor Child Theme
Author: Württemberger Medien
Author URI: https://w-medien.de/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elemento
r-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

:root { 
 --space-4xs: clamp(0.52rem, calc(-0.03vw + 0.54rem), 0.49rem);
    --space-3xs: clamp(0.66rem, calc(0.04vw + 0.63rem), 0.7rem);
    --space-2xs: clamp(0.82rem, calc(0.17vw + 0.74rem), 0.99rem);
    --space-xs: clamp(1.02rem, calc(0.37vw + 0.85rem), 1.4rem);
    --space-s: clamp(1.28rem, calc(0.69vw + 0.95rem), 1.98rem);
    --space-m: clamp(1.6rem, calc(1.17vw + 1.04rem), 2.8rem);
    --space-l: clamp(2rem, calc(1.92vw + 1.08rem), 3.96rem);
    --space-xl: clamp(2.5rem, calc(3.03vw + 1.05rem), 5.6rem);
    --space-2xl: clamp(3.13rem, calc(4.69vw + 0.88rem), 7.92rem);
    --space-3xl: clamp(3.91rem, calc(7.13vw + 0.5rem), 11.19rem);
    --space-4xl: clamp(4.33rem, calc(10.71vw + -0.24rem), 15.83rem);
    --text-xs: clamp(1.42rem, calc(-0.03vw + 1.44rem), 1.39rem);
    --text-s: clamp(1.6rem, calc(0.07vw + 1.57rem), 1.67rem);
    --text-m: clamp(1.8rem, calc(0.2vw + 1.71rem), 2rem);
    --text-l: clamp(2.02rem, calc(0.37vw + 1.85rem), 2.4rem);
    --text-xl: clamp(2.28rem, calc(0.59vw + 2rem), 2.88rem);
    --text-2xl: clamp(2.56rem, calc(0.87vw + 2.15rem), 3.46rem);
    --text-3xl: clamp(2.88rem, calc(1.24vw + 2.29rem), 4.15rem);
--text-4xl: clamp(2.88rem, calc(1.2vw + 2.43rem), 4.98rem);	
/*--text-4xl: clamp(3.24rem, calc(1.7vw + 2.43rem), 4.98rem);*/
	--text-5xl: clamp(6.48rem, calc(3.4vw + 4.86rem), 9.96rem);
    --radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
    --radius-s: clamp(0.6rem, calc(-0.2vw + 0.89rem), 0.8rem);
    --radius-m: clamp(1rem, calc(-0.2vw + 1.29rem), 1.2rem);
    --radius-l: clamp(1.6rem, calc(-0.39vw + 2.19rem), 2rem);
    --radius-xl: clamp(2.6rem, calc(-0.59vw + 3.48rem), 3.2rem);
    --radius-full: 999rem;
	  --shadow-primary: hsla(0, 0%, 0%, 0.15);
    --shadow-xs: 0 1px 2px var(--shadow-primary);
    --shadow-s: 0 1.5px 3px var(--shadow-primary);
    --shadow-m: 0 2px 6px var(--shadow-primary);
    --shadow-l: 0 3px 12px var(--shadow-primary);
    --shadow-xl: 0 6px 48px var(--shadow-primary);
}
 
body {
    font-size:18px;
}
html{
	font-size:62.5%;
}



.g2 {
    color: var(--e-global-color-c8a63f7);
}
.mbold{
	font-weight:600;
}
/* umbruch bei Datenschutz*/
.page-datenschutzerklaerung p,
.page-datenschutzerklaerung a {
    hyphens: auto;
}

.title{ 
text-wrap: balance; 
} 
.title .balance p, .balance{ 
text-wrap: balance !important; 
} 
.hauto .elementor-heading-title, .hauto p{
hyphens:auto;
}
a.brlbs-cmpnt-cb-btn {
    color: #000 !important;
    background-color: #fff !important;
}
header { 
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100%; 
    transition: transform 0.6s ease-in-out;  
    z-index: 9 !important; 
}

@media screen and (max-width: 1024px) {
.liste-mobile-1sp ul {
    display: flex !important;
    flex-direction: column !important;
	row-gap: 10px;
}
}

@media screen and (max-width: 1024px) {
.menu-item a {
    text-align: center !important; 
    width: 100%;
}
}

  body .hero, .hero-single-product, .hero-produkt-kategorie {
    min-height: 87vh;
  }

.product .elementor-icon-list--layout-inline ul li {
    padding-bottom: var(--space-2xs) !important;
}

@media screen and (min-width: 1025px) {
/*info per E-Mail wenn nicht verfügbar*/
.form-group.center-block input {
    min-width: 48% !important;
}
	
	
li.no-desktop.menu-item {
 display: none;
}
	  body .hero {
    height: 92vh;
    min-height: 900px;
  }
	 body .hero, .hero-single-product, .hero-produkt-kategorie {
    min-height: 100vh;
  }
	
	.hero-single-product, .hero-produkt-kategorie{
   height: 100vh;
    min-height: 770px;
}
}


body div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker.brlbs-cmpnt-with-individual-styles[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-google-maps .brlbs-cmpnt-cb-btn{
background-color:#000;
    
}

/*--------------Fonts-------------------*/
.text-weiss {
	color: white;
}

/*----------------Links-------------------*//*-----------------Tabelle-----------------*/table td {
	border: none;
	/*line-height: 0;*/
	padding-left: 0px;
	padding-right: 0px;
}

/*buttons*/
.elementor-widget-button .elementor-button {
  position: relative;
  overflow: hidden;
}

.elementor-widget-button .elementor-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.15);
  transition: left 0.4s ease;
}

.elementor-widget-button .elementor-button:hover::after {
  left: 0;
}

.elementor-widget-button .elementor-button:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* */


main a {
    hyphens: auto !important;
    word-break: break-word;
}



/*sitebar*/

.sitebar-info a, .sitebar-info >div  {
    transition: all ease 0.4s !important;
    right:0;
    
}
/*
.sitebar-info >div:hover {
    right: 326px!important;
    
}
*/
.sitebar-info >div.s:hover, .sitebar-info a.s:hover {
    right: 160px!important;
}
/*
.sitebar-info >div:hover, .sitebar-info a:hover {
    right: 180px!important;
}
*/
.sitebar-info >div.m:hover, .sitebar-info a.m:hover {
    right: 280px!important;
}
.sitebar-info >div.l:hover, .sitebar-info a.l:hover  {
    right: 320px!important;
}
.sitebar-info .elementor-widget-text-editor  {
    color: var(--e-global-color-690b9d9);
}

.sitebar-info > .sitebar-time:has(:is(.sitebar-icon:hover, .sitebar-time-content:hover)) {
    right: 320px!important;
}

/* */
.glass{
	backdrop-filter: blur(10px);
/* bzw. für Edge und ältere Safari-Versionen */
-webkit-backdrop-filter: blur(10px);
}

a._brlbs-btn {
    background-color: #000 !important;
}

.wpforms-field {
    width: 100% !important;
    margin-left: 0 !important;
}


/* Barrierefreiheit*/
	
/* Sticky Buttons Mobil*/
.sr-only-wtv .elementor-button-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
	
span.ti-with-tooltip, span.ti-tooltip{
    color: #000 !important;
    background-color:#F4F4F4 !important;
}

/*überschriften*/


/*header*/
/*nachdem der Header den heor verlassen hat bekommt dieser eine hintergrundfarbe*/
.elementor-element-c2cb465 {
    position: fixed;
}

.elementor-element-c2cb465::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.9) 0%,
        rgb(79 79 79) 60%,
        rgba(249,249,249,0) 98%
    );

    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

.elementor-element-c2cb465.header-after-hero::after {
    opacity: 1;
}

/*Menu*/
body header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, body header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, body header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, body header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus {
    color: var(--e-global-color-accent) !important;
    fill: var(--e-global-color-accent) !important;
}
/*neues Menü*/
.elementor-nav-menu .sub-arrow {
    position: absolute;
    right: 0px;
    top: 36%;
}

a.has-submenu{
padding-right: 30px !important;
}

/*Blog*/
.single-post h2.wp-block-heading {
    margin-top: var(--space-l);
    padding-bottom: var(--space-xs);
}

/* Grundstil */ .shadow-white .elementor-heading-title, .shadow-white .elementor-divider__text.elementor-divider__element{
  display: inline-block;
  text-shadow:
    1px 1px 0 #fff,
    -1px 1px 0 #fff,
    1px -1px 0 #fff,
    -1px -1px 0 #fff;
  transition: color 0.2s ease;
}
 .shadow-white-big .elementor-heading-title, .shadow-white-big .elementor-divider__text.elementor-divider__element{
  display: inline-block;
  text-shadow:
    4px 4px 0 #fff,
    -4px 4px 0 #fff,
    4px -4px 0 #fff,
    -4px -4px 0 #fff;
  transition: color 0.2s ease;
}


 .shadow-green .elementor-heading-title, .shadow-green .elementor-divider__text.elementor-divider__element{
	  text-shadow:
    1px 1px 0 var(--e-global-color-accent),
    -1px 1px 0 var(--e-global-color-accent),
    1px -1px 0 var(--e-global-color-accent),
    -1px -1px 0 var(--e-global-color-accent);
  transition: color 0.2s ease;

}


.no-shadow, .no-shadow .elementor-heading-title {
	  text-shadow:none !important;
}

.shadow .elementor-nav-menu li{
     text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;
  transition: color 0.2s ease; 
}
div:not(.normal) h2.elementor-heading-title, .shadow .elementor-heading-title, .shadow .e-n-accordion-item-title-text, .elementor-post__title, .checkout.woocommerce-checkout h3,.checkout.woocommerce-checkout h3 span,  .wp-block-heading,.shadow h1, .shadow h2,  .shadow h3,  .shadow h4   {
    display: inline-block;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,
                 1px -1px 0 #000, -1px -1px 0 #000;
	font-weight: 900;
}

/* Hover */
/* 🔥 Active (wichtiger als default!) */
/******SHOP WOOCOMMERCE*****/

/* Bildcontainer sauber definieren */


/* Beide Bilder identisch behandeln */


/* Zweites Bild exakt drüber legen */


/* Hover Effekt */


/*Produkt*/

/*info per E-Mail wenn nicht verfügbar*/
.form-group.center-block input {
    min-width: 100% !important;
}
.cwginstock-subscribe-form .panel-primary>.panel-heading {
    background-color: var(--e-global-color-primary) !important;
}


/*Produktauflistung */

body .produkt-header .elementor-icon-list-text, body .produkt-header .elementor-icon-list-text {
width: 300px;
min-width:300px;
}


.e-n-accordion-item-title-icon i {
display:none;
}

/* Elementor Icons ausblenden */
.e-n-accordion-item-title-icon {
  display: none;
}

/* eigenes Plus */
.e-n-accordion-item-title::after {
  content: "+";
  font-size: 20px;
  font-weight: 300;
  color: #111;
}

/* Minus wenn offen */
.e-n-accordion-item[open] .e-n-accordion-item-title::after {
  content: "–";
}

summary.e-n-accordion-item-title {
padding-right:0 !important;
padding-left:0 !important;	
}

/* */

/* Produktdetails Tabs*/
div[aria-labelledby="produktdetails"] .elementor-widget-text-editor p {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #c8c8c8;
}

div[aria-labelledby="produktdetails"] .elementor-widget-text-editor p strong {
  font-weight: 600;
}

/* */

p.wc-gzd-additional-info.shipping-costs-info a {
    display: inline-block !important;
    width: auto !important;
    padding-right: 10px !important;
	width: 210px;
}
p.wc-gzd-additional-info.shipping-costs-info a {
padding-right:0 !important;
}

a.elementor-element.e-flex.e-con-boxed.e-con.e-parent.e-lazyloaded {
    width: auto;
}
 
 a.wpc-open-close-filters-button.wpc-show-counts-yes {
    width: 100%;
    margin-top: var(--space-l);
}

/*shop siteleiste*/
a.elementor-button.elementor-button--view-cart.elementor-size-md span {
    color: #000000;
}
a.elementor-button.elementor-button--checkout.elementor-size-md span {
    font-weight: 500;
    text-transform: uppercase;
    color: #000;
    font-weight: 500;
}
a.elementor-button.elementor-button--checkout.elementor-size-md span:hover, a.elementor-button.elementor-button--view-cart.elementor-size-md span:hover {
    color: #fff;
}
/* */

.elementor-add-to-cart input {
    min-width: 82px !important;
    font-size: 18px !important;
    padding: 5px 0 5px 10px !important;
    max-width: 82px;
}
.input-text.qty.text {
    text-align: center;
}
p.price bdi {
    font-weight: 600;
}
/*pordukt - single-product*/
body.single-product .hero {
    background-size: cover !important;
}
/*hero*/

/* */

/* Produktgalerie, Hauptbild.
   Vorher stand hier object-fit:cover bei fester Hoehe. Das beschnitt jedes
   Bild - bei Hochformat-Aufnahmen fehlten oben und unten je rund 160 px.
   Jetzt bleibt die Rahmenhoehe gleich, das Bild wird vollstaendig eingepasst. */
.woocommerce-product-gallery .flex-viewport {
    height: 400px !important;
    max-height: 60vh !important;
}

.woocommerce-product-gallery .flex-viewport img.wp-post-image {
    width: 100% !important;
  /*  height: 100% !important; */
    object-fit: contain !important;
    object-position: center center;
}


.single-product .elementor-widget-n-tabs h3, .single-product .elementor-widget-n-tabs h2, .woocommerce-product-details__short-description p:first-child   {
font-weight:900;
 line-height:140%;  
font-family:  var(--e-global-typography-primary-font-family), Sans-serif;
letter-spacing:4px;
color: var(--e-global-color-primary);
}


.single-product .elementor-widget-n-tabs h3, .single-product .elementor-widget-n-tabs h2  {
font-size:var(--text-xl);
}

.woocommerce-product-details__short-description p:first-child {
	font-size:var(--text-3xl);
}


/*verwandte Produkte*/
a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
    mix-blend-mode: multiply;
}


/* */


/*wenn Produkt outofstock*/
.text-center {
    text-align: center;
}
.e-atc-qty-button-holder:has(.bm-out-of-stock) .quantity {
    display: none;
}
.bm-out-of-stock {
    background-color: #cfcfcf !important;
    color: #666666 !important;
    pointer-events: none;
    cursor: not-allowed;
    opacity: 1;
}
/*
.product.type-product .price-hidden {
    opacity: 0;
transition:all ease .6s;
}
.outofstock .price-hidden .elementor-button {
pointer-events: none;
    cursor: not-allowed;
 color: #666666 !important;
	background-color:#ccc;
     opacity: 0.4;
}

.product.type-product:hover .price-hidden {
   opacity: 1;
}

*/
/*"warenkorb ansehen hinter dem icon" raus wenn man auf den in den warenkorb icon klickt  */
a.added_to_cart.wc-forward {
    display: none;
}

/*bei nicht vorrätig "zum warenkorb" ausblenden*/
/* Standard erstmal ausblenden */
/*
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
    display: none;
}
*/
/* Nur bei lagernden Produkten zeigen */
/*
.e-loop-item.instock .elementor-widget-woocommerce-product-add-to-cart {
    display: block;
}
*/
/* Wenn Produkt nicht auf Lager ist, Button Widget komplett ausblenden */
/*
.e-loop-item.outofstock .elementor-widget-woocommerce-product-add-to-cart {
    display: none !important;
}
*/
/*Bildwechler beim hover*/

.product-image-wrap {
    position: relative;
    overflow: hidden;
   /* aspect-ratio: 4 / 3;*/
}

.product-image-wrap .main-image {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.product-image-wrap .main-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.35s ease;
}

.product-image-wrap .elementor-widget-shortcode {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0 !important;
    width: 100%;
    height: 100%;
}

.product-image-wrap .elementor-widget-shortcode .elementor-widget-container,
.product-image-wrap .elementor-widget-shortcode .elementor-shortcode {
    width: 100%;
    height: 100%;
}

.product-image-wrap .ak-hover-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.product-image-wrap:hover .ak-hover-image {
    opacity: 1;
}

.product-image-wrap:hover .main-image img {
    opacity: 0;
}
/* *//* =====================================================
   1) MARKER HIGHLIGHT (global)
   ===================================================== */
/* =====================================================
   1) MARKER HIGHLIGHT (global)
   ===================================================== */

/* Ganzer Titel — nur wenn .marker gesetzt, kein span */
.elementor-widget-heading.marker:not(.marker-span) .elementor-heading-title,
.marker:not(.marker-span) p {
  display: inline;
  background-image: linear-gradient(
    to bottom,
    transparent 35%,
    var(--e-global-color-accent) 35%,
    var(--e-global-color-accent) 85%,
    transparent 85%
  );
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 100%;
  padding: 0 0.4em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Nur span — wenn .marker-span gesetzt */
.elementor-widget-heading.marker-span .elementor-heading-title span,
.marker.marker-span p span {
  display: inline;
  background-image: linear-gradient(
    to bottom,
    transparent 35%,
    var(--e-global-color-accent) 35%,
    var(--e-global-color-accent) 85%,
    transparent 85%
  );
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 100%;
  padding: 0 0.4em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Animation ganzer Titel */
.elementor-widget-heading.marker:not(.marker-span).marker-visible .elementor-heading-title,
.marker:not(.marker-span).marker-visible p {
  animation: markerDraw 3.0s cubic-bezier(.22,1,.36,1) 0.8s forwards;
}

/* Animation nur span */
.elementor-widget-heading.marker-span.marker-visible .elementor-heading-title span,
.marker.marker-span.marker-visible p span {
  animation: markerDraw 3.0s cubic-bezier(.22,1,.36,1) 0.8s forwards;
}

@keyframes markerDraw {
  to { background-size: 100% 100%; }
}

/* =====================================================
   2) MARKER-NO ausschließen
   ===================================================== */
.elementor-widget-heading.marker-no .elementor-heading-title {
  background: none !important;
  padding: 0 !important;
}

/* =====================================================
   3) ICON LIST (global, mehrzeilig korrekt)
   ===================================================== */
.elementor-widget-icon-list.marker .elementor-icon-list-item {
  display: flex;
  align-items: flex-start;
  gap: .6em;
}

.elementor-widget-icon-list.marker .elementor-icon-list-text {
  flex: 0 0 auto;
  display: inline-block;
  width: fit-content;
  line-height: 1.35;
  padding: 0 0.35em;
  background-image: linear-gradient(
    to bottom,
    transparent 34%,
    var(--e-global-color-accent) 34%,
    var(--e-global-color-accent) 92%,
    transparent 92%
  );
  background-repeat: repeat-y;
  background-position: 0 0;
  background-size: 0% 1.35em;
}

.elementor-widget-icon-list.marker.marker-visible .elementor-icon-list-text {
  animation: markerDrawIcon 3.0s cubic-bezier(.22,1,.36,1) 0.8s forwards;
}

@keyframes markerDrawIcon {
  to { background-size: 100% 1.35em; }
}

/* =====================================================
   4) MARKER.FH Heading
   ===================================================== */
.marker.fh .elementor-heading-title {
  background-image: linear-gradient(
    to bottom,
    transparent 10%,
    var(--e-global-color-accent) 10%,
    var(--e-global-color-accent) 90%,
    transparent 90%
  );
  background-size: 0% 100%;
}

.marker.fh.marker-visible .elementor-heading-title {
  animation: markerDraw 3.0s cubic-bezier(.22,1,.36,1) 0.8s forwards;
}

/* =====================================================
   5) TEXT-AUSWAHL
   ===================================================== */
::selection {
  background-color: var(--e-global-color-accent);
  color: #000;
}

/* Loop-Karte: Badge-Leiste nur zeigen, wenn sie Inhalt hat.
   Container produkt-hero trägt "Produkt auf Lager" + "Beitrag Information".
   Bei vorrätigen Produkten ohne Beitrag-Info rendern beide Widgets nichts,
   der Container blieb wegen eigenem Hintergrund als graue Leiste stehen. */
.produkt-hero:not(:has(> div)) { display: none; }

/* =====================================================
   Produktfilter (Filter Everything) — Schriftgröße
   =====================================================
   Greift nur im Filter-Widget der Kategorieseiten,
   Elementor-Klasse .wtrx-filter.
*/

.wtrx-filter .wpc-filters-widget-select,
.wtrx-filter .wpc-filters-widget-select option,
.wtrx-filter .wpc-filter-title,
.wtrx-filter .wpc-filters-main-wrap,
.wtrx-filter .wpc-chip-content,
.wtrx-filter .wpc-posts-found {
    font-size: var(--text-m, 1.8rem);
}

/* Auswahlliste an die übrige Gestaltung angleichen.
   .wpc-filter-content muss mit im Selektor stehen, sonst gewinnt
   die gleich starke Plugin-Regel beim Innenabstand. */
.wtrx-filter .wpc-filter-content .wpc-filters-widget-select {
    line-height: 1.4;
    padding: 10px 14px;
    border: 1px solid #e3e0e8;
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--e-global-color-text, #090909);
}

/* Leere Filter ausblenden.
   Beispiel Leinen: sie haben keine Größen, das Plugin zeigte dort
   „Größe – Es gibt noch keine Filterbegriffe“. Das Plugin markiert
   solche Abschnitte selbst mit .wpc-filter-terms-count-0. */
.wtrx-filter .wpc-filters-section.wpc-filter-terms-count-0 {
    display: none;
}

/* Sicherheitsnetz, falls die Zählklasse einmal fehlt */
.wtrx-filter .wpc-filters-section:has(.wpc-no-filter-terms) {
    display: none;
}

/* Bleibt kein einziger Filter übrig, verschwindet der ganze Kasten */
.wtrx-filter .wpc-filters-main-wrap:not(:has(.wpc-filters-section:not(.wpc-filter-terms-count-0))) {
    display: none;
}

/* Produktgalerie, Vorschaubilder: bewusst unverändert.
   Geprüft am 09.08.2026 — die Dateien sind saubere 100×100-Ausschnitte
   und füllen ihre Kacheln vollständig. Ein Umbau auf ein Raster ließ
   die Kacheln auf 19 px schrumpfen und wurde zurückgenommen. */
/* 
Hochkantbilder werden richtig dargestellt in dem größerem vorschaufenster
*/
.woocommerce-product-gallery__image.flex-active-slide img {
    height: 400px !important;
    object-fit: contain;
}

/* Galerie-Bereich nur zeigen, wenn die Kategorie Bilder hinterlegt hat.
   Elementors Anzeigebedingungen koennen Taxonomie-Felder nicht auswerten. */
.kat-galerie:not(:has(.elementor-widget-gallery)) {
    display: none;
}

/* =====================================================
   Shop-Seite — Filterspalte links, Produkte rechts
   ===================================================== */


/* --- Filterspalte ---------------------------------- */

/* Der weisse Kasten um die Filter steht in Elementor am Baustein
   "shop-filter" (Erweitert -> Hintergrund, Rahmen, Innenabstand). */

/* Überschrift „Filter“ */
.shop-sidebar .wpc-filter-set-widget-title {
    font-size: var(--text-s, 1.6rem);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--e-global-color-text, #090909);
    padding: 16px 0 12px;
    margin: 0;
    border-bottom: 1px solid #e3e0e8;
}

/* Ein Filterblock */

.shop-sidebar .wpc-filters-section {
    padding: 16px 0;
    border-bottom: 1px solid #efedf2;
}
.shop-sidebar .wpc-filters-section:last-child { border-bottom: 0; }

.shop-sidebar .wpc-filter-title {
    font-size: var(--text-s, 1.6rem);
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--e-global-color-text, #090909);
}

/* Ankreuzlisten */
.shop-sidebar li.wpc-term-item input[type="checkbox"] {
    width: 18px; height: 18px;
 
}

/* Auswahllisten (Größe, Farbe) */

/* Preisbereich */

.shop-sidebar .wpc-filters-range-column input[type="number"] {
    width: 100%;
    font-size: var(--text-s, 1.6rem);
    border: 1px solid #e3e0e8;
    border-radius: 8px;
    padding: 8px 10px;
}
.shop-sidebar .ui-slider .ui-slider-range { background: var(--e-global-color-primary, #8477fe); }
.shop-sidebar .ui-slider .ui-slider-handle {
    background: #fff;
    border: 2px solid var(--e-global-color-primary, #8477fe);
    border-radius: 50%;
}









/* =====================================================================
   MailPoet: Best\u00e4tigung, Abo-Verwaltung, Abmeldung (Seite 3245)
   MailPoet ersetzt bei diesen Ansichten den gesamten Seiteninhalt und
   umgeht dabei Elementor \u2014 am 30.08.2026 nachgewiesen: ohne Router-
   Parameter rendert die Elementor-Seite, mit Parameter nicht. Deshalb
   hier per CSS statt im Baukasten.
   ===================================================================== */
body.mailpoet-seite { background: #F4F0ED; }

body.mailpoet-seite .page-content {
    max-width: 640px;
    margin: 0 auto;
    padding: 170px 24px 120px;
    text-align: center;
    font-size: 17px;
    line-height: 1.6;
}

body.mailpoet-seite .mailpoet_form,
body.mailpoet-seite #mailpoet_subscription_form {
    text-align: left;
    background: #fff;
    border-radius: 24px;
    padding: 32px;
    margin-top: 28px;
}

body.mailpoet-seite .mailpoet_text,
body.mailpoet-seite .mailpoet_email,
body.mailpoet-seite .mailpoet_select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #DFE0E1;
    border-radius: 10px;
}

body.mailpoet-seite .mailpoet_submit {
    background: #5FFD21;
    color: #090909;
    border: 0;
    border-radius: 99px;
    padding: 14px 30px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

@media (max-width: 767px) {
    body.mailpoet-seite .page-content { padding: 120px 20px 80px; }
    body.mailpoet-seite .mailpoet_form,
    body.mailpoet-seite #mailpoet_subscription_form { padding: 22px; }
	
	.elementor-2066 .elementor-element.elementor-element-8e603cb .elementor-nav-menu--dropdown a.elementor-item-active {

 background-color: #C9CDD1;
}

.elementor-2066 .elementor-element.elementor-element-8e603cb .elementor-nav-menu--dropdown {
    height: 80vh;
    background-color: #C9CDD1;
    display: flex;
    justify-content: center;
    align-items: center;
}
}


/* =====================================================================
   Absende-Knopf des Widerrufsformulars (Germanized)
   Beides steckt in Shortcode-Auszeichnung des Plugins \u2014 weder im Footer
   noch auf der Seite kommt Elementor dort hinein. Deshalb hier.
   ===================================================================== */
.wtrx-widerrufsformular button[type="submit"] {
    display: inline-block;
    background: #5FFD21;
    color: #090909;
    border: 0;
    border-radius: var(--radius-full, 999rem);
    padding: 12px 26px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.wtrx-widerrufsformular button[type="submit"]:hover {
    filter: brightness(0.94);
}

/* =====================================================================
   Filter-Chips ans Seitendesign angleichen
   Das Plugin setzt Rand, Rundung und Farbe am aeusseren <a>/<span>; die
   Beschriftung sitzt in einem eigenen <span> darin und erbt die Farbe
   nicht zuverlaessig. Deshalb beides ausdruecklich setzen.
   Die Plugin-Regeln tragen ein `body` davor, hier ebenfalls.
   Der Chips-Baustein von Elementor hat keine Gestaltungsoptionen.
   ===================================================================== */
body .wpc-filter-chips-list li.wpc-filter-chip:not(.x) > a,
body .wpc-filter-chips-list li.wpc-filter-chip:not(.x) > span {
    padding: 11px 22px;
    border: 1px solid var(--e-global-color-primary, #8477FE);
    border-radius: var(--radius-full, 999rem);
    background: var(--e-global-color-primary, #8477FE);
    font-size: var(--text-s);
    font-weight: 600;
    line-height: 1.25;
    transition: background .15s ease, border-color .15s ease;
}

body .wpc-filter-chips-list li.wpc-filter-chip > a,
body .wpc-filter-chips-list li.wpc-filter-chip > span,
body .wpc-filter-chips-list li.wpc-filter-chip .wpc-filter-chip-name,
body .wpc-filter-chips-list li.wpc-filter-chip .wpc-chip-remove-icon {
    color: #fff;
}

body .wpc-filter-chips-list li.wpc-filter-chip.wpc-chip-reset-all > a {
    background: transparent;
    border-color: #C8CCD0;
}

body .wpc-filter-chips-list li.wpc-filter-chip.wpc-chip-reset-all > a,
body .wpc-filter-chips-list li.wpc-filter-chip.wpc-chip-reset-all .wpc-filter-chip-name,
body .wpc-filter-chips-list li.wpc-filter-chip.wpc-chip-reset-all .wpc-chip-remove-icon {
    color: #6b6875;
}

body .wpc-filter-chips-list li.wpc-filter-chip > a:hover,
body .wpc-filter-chips-list li.wpc-filter-chip > span:hover {
    background: #090909;
    border-color: #090909;
}

body .wpc-filter-chips-list li.wpc-filter-chip > a:hover,
body .wpc-filter-chips-list li.wpc-filter-chip > a:hover .wpc-filter-chip-name,
body .wpc-filter-chips-list li.wpc-filter-chip > a:hover .wpc-chip-remove-icon,
body .wpc-filter-chips-list li.wpc-filter-chip > span:hover,
body .wpc-filter-chips-list li.wpc-filter-chip > span:hover .wpc-filter-chip-name,
body .wpc-filter-chips-list li.wpc-filter-chip > span:hover .wpc-chip-remove-icon {
    color: #fff;
}

body .wpc-filter-chips-list .wpc-chip-content {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body .wpc-filter-chips-list .wpc-chip-remove-icon {
    opacity: .75;
    font-size: 1.1em;
    line-height: 1;
}


/* ===============================================================
   Bewertungsbereich — was die Elementor-Einstellungen nicht können
   (Konturschrift, Sterne im Panel, Ausrichtung, Einzug).
   Farben, Typografie und Reiter stehen im Widget selbst.
   =============================================================== */
:root {
    --wtrx-stern: #D4AF37;
    --wtrx-stern-leer: #DAD4C4;
}

/* Konturschrift wie .shadow — Elementor kennt keinen Textschatten */
.woocommerce #reviews h2.woocommerce-Reviews-title,
.woocommerce #reviews #reply-title {
    display: inline-block;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,
                 1px -1px 0 #000, -1px -1px 0 #000;
    font-weight: 900 !important;
}

/* Sterne in Gold */
.woocommerce #reviews .star-rating,
.woocommerce p.stars a {
    color: var(--wtrx-stern);
}
.woocommerce #reviews .star-rating::before {
    color: var(--wtrx-stern-leer);
}

/* Sterne links statt rechts */
.woocommerce #reviews .comment-text .star-rating {
    float: none;
    margin: 0 0 .4em 0;
}

/* Einzug der Bewertungsliste entfernen */
.woocommerce #reviews ol.commentlist {
    padding-left: 0;
    margin-left: 0;
}
.woocommerce #reviews ol.commentlist li .comment_container {
    padding-left: 0;
}

/* Produkttitel: Umbruch vor dem Gedankenstrich.
   Den Trennpunkt setzt der Filter wtrx_titel_umbruch in der functions.php,
   die volle Breite hier sorgt dafuer, dass der Rest in die naechste Zeile rutscht. */
.wtrx-titel-zeile {
    display: inline-block;
    width: 100%;
}

/* Zahlungsarten im Fuss (Shortcode wtrx_zahlungsarten) */
.wtrx-zahlungsarten__titel {
    display: inline-block;
    margin: 0 0 .5em;
    font-size: var(--text-xl, 1.6rem);
    line-height: 1.15;
    /* gleiche Konturschrift wie die uebrigen Ueberschriften (.shadow) */
    color: #FFFFFF;
    font-weight: 900;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,
                 1px -1px 0 #000, -1px -1px 0 #000;
}
.wtrx-zahlungsarten__titel a {
    color: inherit;
    text-decoration: none;
}
.wtrx-zahlungsarten__titel a:hover {
    opacity: .82;
}
.wtrx-zahlungsarten__titel a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
.wtrx-zahlungsarten__liste {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin: 0;
    padding: 0;
    list-style: none;
}
.wtrx-zahlungsarten__liste li {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 4px;
    padding: .25em .4em;
}
.wtrx-zahlungsarten__liste img {
    display: block;
    height: 22px;
    width: auto;
}

/* Gutscheinfeld an der Kasse dauerhaft offen.
   Elementor klappt es per Inline-Stil zu und oeffnet es ueber einen Link;
   beides wird hier aufgehoben. Die zweite Erklaerzeile entfaellt, sie stand
   in der Sie-Form und wiederholt nur, was schon in der Ueberschrift steht. */
.e-coupon-box .e-coupon-anchor {
    display: block !important;
}
.e-coupon-box .e-show-coupon-form,
.e-coupon-box .e-coupon-anchor-description {
    display: none;
}
.e-coupon-box .e-woocommerce-coupon-nudge {
    margin-bottom: .6em;
}

/* Hero-Liste im Produktkopf - Inhalt kommt je Produkt aus dem ACF-Feld "hero_liste" */
.wtrx-heroliste ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 32px;
    max-width: 720px;
}
.wtrx-heroliste li {
    position: relative;
    margin: 0;
    padding-left: 34px;
    font-family: "Montserrat", Sans-serif;
    font-size: var(--text-m);
    font-weight: 500;
    line-height: 1.4em;
    color: var(--e-global-color-4956bf0, #FFFFFF);
}
.wtrx-heroliste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 24px;
    height: 24px;
    background-color: var(--e-global-color-primary, #8477FE);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 14.6 3.2 10.2l1.6-1.6 2.8 2.8 7.6-7.6 1.6 1.6z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 14.6 3.2 10.2l1.6-1.6 2.8 2.8 7.6-7.6 1.6 1.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 767px) {
    .wtrx-heroliste ul { grid-template-columns: 1fr; gap: 8px; }
    .wtrx-heroliste li { padding-left: 30px; }
    .wtrx-heroliste li::before { width: 22px; height: 22px; }
}

/*bug fixing*/

.elementor-menu-cart__container[aria-hidden="false"] .elementor-menu-cart__main {
    transform: translateX(0) !important;
    left: auto !important;
    right: 0 !important;
    height: 100vh !important;
    z-index: 9 !important;
    overflow: visible;
}

/* Warenkorb-Schublade im Kopfbereich (mobil).
   Der Container stand auf overflow:hidden und schnitt die Schublade ab;
   sichtbar war nur ein schmaler Streifen am rechten Rand. */
.elementor-menu-cart__container[aria-hidden="false"] {
    overflow: visible !important;
}
.elementor-menu-cart__main {
    max-width: 100% !important;
}

/* wtrx-warenkorb-abstaende
   1. Gutscheinzeile: Code und Betrag standen ohne Abstand aneinander.
   2. Die Hinweise von Klarna und PayPal lagen uebereinander. */
.woocommerce-cart .cart-discount th,
.woocommerce-cart .cart-discount td {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.5;
}
.woocommerce-cart .cart-discount th { padding-right: 16px; }
.woocommerce-cart .cart-discount td { text-align: right; white-space: nowrap; }
.woocommerce-cart .cart-discount .woocommerce-remove-coupon {
    display: block;
    margin-top: 4px;
    font-size: var(--text-s);
}
.woocommerce-cart .ppcp-messages,
.woocommerce-cart klarna-placement,
.woocommerce-cart [data-pp-message],
.woocommerce-cart .wc-stripe-bnpl-message {
    position: relative !important;
    display: block !important;
    clear: both !important;
    margin: 12px 0 !important;
    float: none !important;
}

a.checkout-button.button.alt.wc-forward {
    border-radius: 3px;
    margin-bottom: 20px;
}
.woocommerce-cart .cart-discount td {
    white-space:unset;
}

body .message__container.locale--DE {
    display: flex;
    margin-top: 40px !important;
}
@media only screen and (min-width: 300px) {
    .paypal-button.paypal-button-shape-pill {
        border-radius: 3px;
    }
}

h3#jsectionwiderrufsbelehrung {
    width: 100%;
}