.elementor-kit-84{--e-global-color-primary:#74808A;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#2A2925;--e-global-color-accent:#B91826;--e-global-color-d85b7a7:#57B25A;--e-global-color-c16f347:#A1C755;--e-global-color-f9570ae:#313F92;--e-global-color-b16bfe9:#3EB7AC;--e-global-color-73e33a3:#AA2E88;--e-global-color-bdf0f58:#C2B4D9;--e-global-color-4e45ff1:#E27B00;--e-global-color-b2acece:#EDCC0C;--e-global-color-0b9c3d0:#9F9F9F;--e-global-color-c102761:#BFBFBF;--e-global-color-8f0d828:#DFDFDF;--e-global-color-a37ad92:#1C1B19;--e-global-color-835bf50:#EBECED;--e-global-color-895e90b:#FAFAFA;--e-global-color-8fd5ae2:#FAF7F2;--e-global-typography-primary-font-family:"Roboto Slab";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto";--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto Mono";--e-global-typography-accent-font-size:var(--smalltext);--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-fdf71ee-font-family:"Caveat";background-color:#FAF7F2;font-family:"Roboto", Sans-serif;font-size:clamp(1rem, 0.4vw + 0.875rem, 18px);}.elementor-kit-84 button,.elementor-kit-84 input[type="button"],.elementor-kit-84 input[type="submit"],.elementor-kit-84 .elementor-button{background-color:var( --e-global-color-accent );font-family:"Roboto Mono", Sans-serif;font-weight:bold;text-transform:uppercase;color:var( --e-global-color-secondary );border-style:none;border-radius:var(--br) var(--br) var(--br) var(--br);padding:var(--padding) var(--padding) var(--padding) var(--padding);}.elementor-kit-84 button:hover,.elementor-kit-84 button:focus,.elementor-kit-84 input[type="button"]:hover,.elementor-kit-84 input[type="button"]:focus,.elementor-kit-84 input[type="submit"]:hover,.elementor-kit-84 input[type="submit"]:focus,.elementor-kit-84 .elementor-button:hover,.elementor-kit-84 .elementor-button:focus{background-color:var( --e-global-color-primary );color:var( --e-global-color-secondary );border-style:none;}.elementor-kit-84 e-page-transition{background-color:#FFBC7D;}.elementor-kit-84 h1{font-family:"Roboto Slab", Sans-serif;font-size:var(--h1);font-weight:bold;}.elementor-kit-84 h2{font-family:"Roboto Slab", Sans-serif;font-size:var(--h2);font-weight:bold;}.elementor-kit-84 h3{font-family:"Roboto Slab", Sans-serif;font-size:var(--h3);font-weight:bold;}.elementor-kit-84 h4{font-family:"Roboto Slab", Sans-serif;font-size:var(--h4);font-weight:bold;}.elementor-kit-84 h5{font-family:"Roboto Slab", Sans-serif;font-size:var(--h5);font-weight:bold;}.elementor-kit-84 h6{font-family:"Roboto Slab", Sans-serif;font-size:var(--h6);font-weight:bold;}.elementor-kit-84 img{border-radius:var(--br) var(--br) var(--br) var(--br);}.elementor-kit-84 input:not([type="button"]):not([type="submit"]),.elementor-kit-84 textarea,.elementor-kit-84 .elementor-field-textual{border-radius:var(--br) var(--br) var(--br) var(--br);padding:var(--padding) var(--padding) var(--padding) var(--padding);}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1340px;}.e-con{--container-max-width:1340px;--container-default-padding-top:var(--innerpadding);--container-default-padding-right:var(--innerpadding);--container-default-padding-bottom:var(--innerpadding);--container-default-padding-left:var(--innerpadding);}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:var(--innerpadding);--container-default-padding-right:var(--padding);--container-default-padding-bottom:var(--innerpadding);--container-default-padding-left:var(--padding);}}/* Start custom CSS */body {
    
    --padding: 15px;
    --br : 4px;
    /*--h1: 2.027rem;
    --h2: 1.802rem; 
    --h3: 1.602rem; 
    --h4: 1.424rem; 
    --h5: 1.266rem; 
    --h6: 1.125rem; */
  --h1: clamp(1.6rem,  2.5vw + 1rem, 2.281rem);
  --h2: clamp(1.4rem,  2vw   + 1rem, 2.027rem);
  --h3: clamp(1.25rem, 1.5vw + 1rem, 1.802rem);
  --h4: clamp(1.125rem,1vw   + 1rem, 1.602rem);
  --h5: clamp(1rem,    0.75vw + 1rem,1.424rem);
  --h6: clamp(0.95rem, 0.5vw + 1rem, 1.266rem);
    --br: 8px;
    --shadow: 0 0 var(--br) rgba(0,0,0,.125);
    --innerpadding: calc(var(--padding) * 2);
    --smalltext: 12px;
    --outerpadding: 10px;
    
    
    
}
h1 span, 
h2 span, 
h3 span, 
h4 span, 
h5 span, 
h6 span {font-family: "Caveat", Sans-serif !important; color: var(--e-global-color-accent)}
.section { 
    padding-top: calc(var(--padding) * 2);  
    padding-bottom: calc(var(--padding) * 2);
}
.header, .header.section  { padding-top: calc(var(--padding) * 2) !important; }

.section-top { padding-top: calc(var(--padding) * 2);}
.section-bottom { padding-bottom: calc(var(--padding) * 2);}

@media(min-width:768px){
    body {
        --innerpadding: calc(var(--padding) * 2);
        --outerpadding: calc(var(--padding) * 2);
    }
    .section { padding-top: calc(var(--padding) * 5);  padding-bottom: calc(var(--padding) * 5)
}
.section-top { padding-top: calc(var(--padding) * 5);
}

.section-bottom { padding-bottom: calc(var(--padding) * 5);
}

    .header, .header.section { padding-top: calc(var(--padding) * 5) !important; }

}




.rounded {border-radius: var(--br)}
.shadow { box-shadow: var(--shadow)}

 #myt3-logo-main-layer,
        #myt3-logo-color-layer {
            top: calc(var(--innerpadding) * 2);
            left: calc(var(--innerpadding) * 2);
            width: calc(var(--innerpadding) * 2);
            height: calc(var(--innerpadding) * 2);
            z-index: 9999;
            transition: top ease .3s
        }

		   #myt3-logo-main-layer {
			   pointer-events: none;
		}
		
	
		@media(max-width: 767px){
			 #myt3-logo-main-layer,
			#myt3-logo-color-layer {
				left: var(--innerpadding);
				top:  var(--innerpadding);
			}
		}
		
        #myt3-logo-main-layer {
            mix-blend-mode: difference;
        }
        #myt3-logo-main-layer path {
            fill: white;
        }

        #myt3-logo-color-layer path {
            fill: var(--e-global-color-accent); /* logosecondary Farbe */
        }


@keyframes fillCycle {
  0%   { 
      fill: var(--e-global-color-accent); 
      background-color: var(--e-global-color-accent); }
      
  5%   {
    fill: var(--e-global-color-4e45ff1);
    background-color: var(--e-global-color-4e45ff1);}
  10%  {
    fill: var(--e-global-color-b2acece) ;
    background-color: var(--e-global-color-b2acece) ;}
  15%  {
    fill: var(--e-global-color-c16f347); 
    background-color: var(--e-global-color-c16f347);  }
  20%  {
    fill: var(--e-global-color-d85b7a7);
    background-color: var(--e-global-color-d85b7a7); }
  25%  {
    fill: var(--e-global-color-b16bfe9); 
    background-color: var(--e-global-color-b16bfe9); }
  30%  {
    fill: var(--e-global-color-f9570ae); 
    background-color: var(--e-global-color-f9570ae); }
  35%  {
    fill: var(--e-global-color-73e33a3); 
    background-color: var(--e-global-color-73e33a3); }
  40%  {
    fill: var(--e-global-color-bdf0f58); 
    background-color: var(--e-global-color-bdf0f58); }
  45%  {
      fill: var(--e-global-color-accent);
      background-color: var(--e-global-color-accent);}
  50%  {
    fill: var(--e-global-color-4e45ff1); 
      background-color: var(--e-global-color-4e45ff1); 
  }
  55%  {
    fill: var(--e-global-color-b2acece) ;
    background-color: var(--e-global-color-b2acece) ;}
  60%  {
    fill: var(--e-global-color-c16f347); 
    background-color: var(--e-global-color-c16f347); }
  65%  {
    fill: var(--e-global-color-d85b7a7); 
    background-color: var(--e-global-color-d85b7a7); }
  70%  {
    fill: var(--e-global-color-b16bfe9); 
    background-color: var(--e-global-color-b16bfe9); }
  75%  {
    fill: var(--e-global-color-f9570ae); 
    background-color: var(--e-global-color-f9570ae); }
  80%  {
    fill: var(--e-global-color-73e33a3);
    background-color: var(--e-global-color-73e33a3); }
  85%  {
    fill: var(--e-global-color-bdf0f58); 
    background-color: var(--e-global-color-bdf0f58); }
  90%  {
      fill: var(--e-global-color-accent); 
      background-color: var(--e-global-color-accent);
  }
  95%  {
      fill: var(--e-global-color-accent);
      background-color: var(--e-global-color-accent);}
  100% {
      fill: var(--e-global-color-accent);
      background-color: var(--e-global-color-accent);}
}
    #myt3-logo-main .logosecondary {
        fill: var(--e-global-colo-accent);
  animation: fillCycle 15s linear infinite;
}
.colors,
/*
#colorspace-1.colorspace {
    fill: var(--e-global-colo-accent);
  animation: fillCycle 15s linear infinite;
}*/
.konfig-colorpresets { display: Flex; width: 100%; flex-direction: row; flex-wrap: wrap; }

.colorpreset,
.ak-konfigurator__option { padding: 10px 15px; display: block; width:100%; border:1px solid #ddd; margin-bottom: 3px;}
.ak-konfigurator__option.is-active {font-weight: bold;}

.konfigurierbarlabel {display: none; pointer-events:none}
.produkt-konfigurierbar-1 .konfigurierbarlabel {display: flex;}

.colorbutton .elementor-button {animation: fillCycle 15s linear infinite;}


/** GRID **/

.griditem .loop-images .elementor-image-carousel  img  { transition: transform ease .3s;  filter: drop-shadow(0 0 0 rgba(0,0,0,0)); transform-origin: top}
/*.griditem:hover .loop-images .elementor-image-carousel .swiper-slide[aria-label="1 von 1"] figure img,*/
/*
.griditem:hover .loop-images .elementor-image-carousel .swiper-slide-active img {transform: scale(1.1);  filter: drop-shadow(var(--shadow));}*/

/* Hover-Zoom: funktioniert bei 1 Bild UND bei Slider */
.griditem:hover .vorschauholder ,
.griditem:hover .loop-images img.swiper-slide-image{
  transform: scale(1.1);
  filter: drop-shadow(var(--shadow));
}

/* Optional: damit das Zoom nicht “rausläuft” */
.loop-images .swiper-slide-inner{
  overflow: hidden;
}

/* Optional: saubere Transition (falls nicht schon vorhanden) */
.loop-images img.swiper-slide-image{
  transition: transform .3s ease, filter .3s ease;
}


.griditem .loop-images .elementor-swiper-button-prev,
.griditem .loop-images .elementor-swiper-button-next { transition: left ease .3s, right ease .3s, transform ease .3s, opacity ease .3s; transform-origin: center; opacity: .25}

.griditem:hover .loop-images .elementor-swiper-button-prev {    transform: translateY(-50%) translateX(30px) scale(2); transform-origin: center center; filter:drop-shadow(0 0 5px rgba(0,0,0,.25)); opacity: 1;}
.griditem:hover .loop-images .elementor-swiper-button-next {     transform: translateY(-50%) translateX(-30px) scale(2);  transform-origin: center center; filter:drop-shadow(0 0 5px rgba(0,0,0,.25)); opacity: 1;}
    
    .griditem:hover .elementor-swiper-button-prev:hover svg,
.griditem:hover .loop-images .elementor-swiper-button-next:hover svg {fill: var(--e-global-color-text) !important}
.price ins {
    text-decoration: none !important;
}
a.griditem .price .woocommerce-Price-amount ins { text-decoration: none !important}
a.griditem .price  .woocommerce-Price-amount + span,
a.griditem .price  span.woocommerce-Price-amount.amount {color: var(--e-global-color-primary) !important; text-decoration: none !important}
.product.sale a.griditem  .price  ins span.woocommerce-Price-amount.amount {color: var(--e-global-color-accent) !important}

.elementor-widget-text-editor p:last-child {
    margin: 0;
}

.menu-item-svg-icon svg {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 6px;
    fill: currentColor
}

/** FACETS **/
	.facetwp-checkbox,
   .facetwp-radio {
    background: none !important;
    padding: 7px !important;
    border: 1px solid #999 !important;
    border-radius: var(--br) !important;
    font-size: var(--smalltext);
    color: var(--e-global-color-text) !important;
    font-weight: bold;
    line-height:1;
    display: flex;
    align-items: center;
text-transform: uppercase;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
}
.facetwp-checkbox.checked,
.facetwp-radio.checked {
    border-color: rgba(116, 188, 98,.35) !important;
    background-color: var(--e-global-color-primary) !important;
        color: #fff !important; font-weight: bold;
}
.facetwp-radio:hover,
.facetwp-checkbox:hover,
.facetwp-checkbox.checked:hover,
.facetwp-radio.checked:hover {
    border-color: rgba(116, 188, 98,.35) !important;
    background-color: var(--e-global-color-text) !important;
        color: #fff !important;
}


.facetwp-facet.facetwp-type-checkboxes { display: flex; gap: 5px; margin-bottom: 0 !important; flex-wrap: wrap;}

.facetwp-display-value {
    white-space: nowrap;
}

.facetwp-slider.noUi-target:hover .noUi-connect {
    background-color: var(--e-global-color-secondary) !important;
}
.noUi-connect {
    background-color: var(--e-global-color-primary) !important;
}

input.facetwp-slider-reset {
    background: #fff !important;
    color: var(--e-global-color-text) !important;
    padding: 7px 15px !important;
    font-size: var(--smalltext); box-shadow: none !important;
    text-transform: uppercase;

    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
}
input.facetwp-slider-reset:hover { background-color: #eee !important; }

.facetwp-facet.facetwp-facet-preis.facetwp-type-slider {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between
}

.facetwp-slider-wrap {
    width: 100%;
    padding-bottom: 7px !important;
}

    span.facetwp-slider-label { font-size: var(--smalltext); align-self: center}
    
    .facetwp-facet { margin-bottom: calc(var(--padding) / 3) !important}
    
    .facetwp-facet.facetwp-facet-anzahl.facetwp-type-pager {
    font-size: var(--smalltext);
    font-weight: bold;
    margin: 0 !important;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
     text-transform: uppercase;
}

.facetwp-type-sort select {
    border-radius: var(--br);
    border-color: var(--e-global-color-c67fcab);
    font-size:var(--smalltext);
}

.facetwp-color {
    box-shadow: none !important;
    border-radius: 50% !important;
    border: 1px solid var(--e-global-color-text) !important;
    width: 20px !important; height: 20px !important; margin: 0 5px 5px 0 !important;
}
.facetwp-color.checked::after {
    width: 10px !important;
    margin: 5px 0 0 4px !important;
}

 .facetwp-type-sort { margin-bottom: 0 !important}
.facetwp-type-sort select {    padding: 4px 7px;
    line-height: 1;
    margin: 0 !important;
     text-transform: uppercase;

    font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-weight: bold;
 }
 
 a.facetwp-reset {   text-transform: uppercase;

    font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-weight: bold; color: var(--e-global-color-primary); font-size: var(--smalltext)}
 .facetwp-facet-konfigurierbar .facetwp-checkbox { color: var(--e-global-color-accent) !important;}
 .facetwp-facet-konfigurierbar .facetwp-checkbox:hover,
 .facetwp-facet-konfigurierbar .facetwp-checkbox.checked { color: #fff !important}
  .facetwp-facet-konfigurierbar .facetwp-checkbox.checked {background-color: var(--e-global-color-accent) !important; color:#fff !important}
    .facetwp-facet-konfigurierbar .facetwp-checkbox.checked:hover {
        background-color: var(--e-global-color-text) !important;
    }
    
/* ─────────────────────────────────────────────────────────
   .konfigurierbar — nur in konfigurierbaren Loop-Items sichtbar.
   Greift unabhängig von State-Utilities; kombinierbar mit bk-only-*.
   ───────────────────────────────────────────────────────── */

/* Default: versteckt */
.konfigurierbar {
    display: none !important;
}

/* Sichtbar, wenn das Loop-Item (oder ein anderer Vorfahre) konfigurierbar ist */
.product_tag-konfigurierbar .konfigurierbar {
    display: flex !important;
}
    
/* ─────────────────────────────────────────────────────────
   Bulli State Visibility Utilities

   Body-Klassen (auto via inc/bulli-config-state.php):
     .bulli-config-set       → Konfig im localStorage
     .bulli-config-empty     → keine Konfig

   Element-Klassen auf der Mini-Garage (auto via JS):
     .bulli-minigarage.is-populated → ≥1 Eintrag in Garage
     .bulli-minigarage.is-empty     → 0 Einträge

   Voraussetzung: :has()-Support (alle modernen Browser ab 2023).
   ───────────────────────────────────────────────────────── */


/* ── Config-State ─────────────────────────────────────── */
body.bulli-config-empty .bk-only-config       { display: none !important; }
body.bulli-config-set   .bk-only-no-config    { display: none !important; }


/* ── Garage-State ─────────────────────────────────────── */
body:not(:has(.bulli-minigarage.is-populated)) .bk-only-garage    { display: none !important; }
body:has(.bulli-minigarage.is-populated)       .bk-only-no-garage { display: none !important; }


/* ── Kombinierte States ───────────────────────────────── */

/* "Fresh" — Erstbesucher, hat noch nichts gemacht */
body.bulli-config-set                          .bk-only-fresh { display: none !important; }
body:has(.bulli-minigarage.is-populated)       .bk-only-fresh { display: none !important; }

/* "Any" — irgendwas vorhanden (Config ODER Garage) */
body.bulli-config-empty:not(:has(.bulli-minigarage.is-populated)) .bk-only-any { display: none !important; }

/* "Both" — vollständig ausgestatteter User */
body.bulli-config-empty                        .bk-only-both { display: none !important; }
body:not(:has(.bulli-minigarage.is-populated)) .bk-only-both { display: none !important; }

/* ── Elementor-Editor: alle State-Utilities sichtbar ──
   Damit du beim Bearbeiten alle Varianten sehen kannst. */
body.elementor-editor-active [class*="bk-only-"] {
    display: revert !important;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://myt3.love/wp-content/uploads/2025/12/roboto-slab-v36-latin-regular.woff2') format('woff2'),
		url('https://myt3.love/wp-content/uploads/2025/12/roboto-slab-v36-latin-regular-1.ttf') format('truetype');
}
@font-face {
	font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://myt3.love/wp-content/uploads/2025/12/roboto-slab-v36-latin-900.woff2') format('woff2'),
		url('https://myt3.love/wp-content/uploads/2025/12/roboto-slab-v36-latin-900.ttf') format('truetype');
}
@font-face {
	font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('https://myt3.love/wp-content/uploads/2025/12/roboto-slab-v36-latin-900.woff2') format('woff2'),
		url('https://myt3.love/wp-content/uploads/2025/12/roboto-slab-v36-latin-900.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://myt3.love/wp-content/uploads/2025/12/roboto-v50-latin-regular.woff2') format('woff2'),
		url('https://myt3.love/wp-content/uploads/2025/12/roboto-v50-latin-regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://myt3.love/wp-content/uploads/2025/12/roboto-v50-latin-900.woff2') format('woff2'),
		url('https://myt3.love/wp-content/uploads/2025/12/roboto-v50-latin-900.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://myt3.love/wp-content/uploads/2026/03/caveat-v23-latin-regular.woff2') format('woff2'),
		url('https://myt3.love/wp-content/uploads/2026/03/caveat-v23-latin-regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://myt3.love/wp-content/uploads/2026/03/caveat-v23-latin-700.woff2') format('woff2'),
		url('https://myt3.love/wp-content/uploads/2026/03/caveat-v23-latin-700.ttf') format('truetype');
}
/* End Custom Fonts CSS */