/* @font-face {
    font-family: wetterburg;
    src: url("fonts/wetterburg.ttf") format("truetype");
} */
.color1{
    color: #ff90f4;
}
.color1-light{
    color: #f7e8ef;
}
.color1-lighter{
    color: #faf2f0;
}
.color1-dark{
    color: #eaa098;
}
.color2{
    color: #b69375;
}
.color2-light{
    color: #e9dcd4;
}
.color3{
    color: #424242;
}
.color3-sub{
    color: #545454;
}
.color3-light{
    color: #F9F9F9;
}
body{
    background: url("https://webdesign-neu.de/irmabeauty/wp-content/uploads/2025/04/bg2.jpg") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}
body{
    font-family: 'Average Sans', sans-serif !important;
}
.have_center .elms_left, .have_center .elms_center, .have_center .elms_right{
    flex: unset !important;
    display: contents !important;
}
.button-hero .cz_btn_onhover{
    width: 276px;
}
.header_1 {
    border-bottom: 5px solid;
    border-image: linear-gradient(35deg, #f9f4e7, #f1e0c5, #e5c59e, #d8b48a, #ffffd1, #f1e0c5, #bfa074) 1;
}
.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3, .woocommerce.woo-template-2 ul.products li.product .woocommerce-loop-category__title, .woocommerce.woo-template-2 ul.products li.product .woocommerce-loop-product__title, .woocommerce.woo-template-2 ul.products li.product h3,
.xtra-comments, .content.cz_related_posts, .cz_author_box, .related.products, .upsells.products, .up-sells.products, .woocommerce-page .cart-collaterals .cart_totals, .woocommerce-page #customer_details, .woocommerce-page .codevz-checkout-details, .woocommerce-page .woocommerce-order-details, .woocommerce-page .woocommerce-customer-details, .woocommerce-page .cart-collaterals .cross-sells, .woocommerce-account .cz_post_content > .woocommerce{
    color: #424242 !important;
}
.woocommerce-shipping-fields h3{
    font-family: 'Average Sans', sans-serif !important;
    font-size: 18px;
}
.woocommerce-checkout-review-order input[type=checkbox][style="display: none;"] {
    display: none !important;
}
.woocommerce form .form-row label{
    line-height: 1.2 !important;
}
.wpcf7 form.sent .wpcf7-response-output{
    color: #46b450 !important;
}
.irma-gradient{
    background-image: linear-gradient(35deg, #f9f4e7, #f1e0c5, #e5c59e, #d8b48a, #ffffd1, #f1e0c5, #bfa074) 1;
    /* border-image: linear-gradient(35deg, #f9f4e7, #f1e0c5, #e5c59e, #d8b48a, #ffffd1, #f1e0c5, #bfa074) 1; */
}
.cz_title .cz_line_side_solo{
    background-image: linear-gradient(35deg, #f9f4e7, #f1e0c5, #e5c59e, #d8b48a, #ffffd1, #f1e0c5, #bfa074) !important;
}
.elms_shop_cart,
.shop_cart_header_4_right_7 {
    width: 55px !important;
}
.cz_cart_count, .cz_wishlist_count, .cz_compare_count{
    position: absolute !important;
    top: -28px !important;
    right: -2px !important;
    width: 2em !important;
    height: 2em;
    text-align: center;
    line-height: 2em;
    font-size: 12px;
    border-radius: 100%;
    white-space: nowrap;
}
.cz_cart, .cz_cart_edd{
    position: relative;
    /* display: inline-block !important;  */
    /* width: 55px !important; */
}
.woocommerce form.checkout_coupon p:first-child{
    display: block !important;
}
.header_2.header_is_sticky,
.header_2{
    background-color: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(4px);
}
/* @media (min-width: 1600px){
    body{
        background-position: right !important;
    }
} */
.elementor-widget:not(:last-child) {
    margin-block-end: 15px !important;
    margin-bottom: 15px !important;
}
.arial{
    font-family: Arial, Helvetica, sans-serif !important;
}
.page_title{
    border-bottom: 0px !important;
    background-image: linear-gradient(35deg, #f9f4e7, #f1e0c5, #e5c59e, #d8b48a, #ffffd1, #f1e0c5, #bfa074)
}
a.cz-instagram:hover,
a.cz-tiktok:hover,
a.cz-facebook:hover{
    background-image: linear-gradient(#f7e8ef, #f7e8ef),
                      linear-gradient(35deg, #f9f4e7, #f1e0c5, #e5c59e, #d8b48a, #ffffd1, #f1e0c5, #bfa074) ;
}
input, textarea,
a.cz-instagram,
a.cz-tiktok,
a.cz-facebook{
    border-bottom: 4px solid transparent !important;
    background-image: linear-gradient(#ffffff, #ffffff),
                      linear-gradient(35deg, #f9f4e7, #f1e0c5, #e5c59e, #d8b48a, #ffffd1, #f1e0c5, #bfa074) ;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}
.cz_btn{
    border-bottom: 4px solid transparent !important;
    background-image: linear-gradient(#f7e8ef, #f7e8ef),
                      linear-gradient(35deg, #f9f4e7, #f1e0c5, #e5c59e, #d8b48a, #ffffd1, #f1e0c5, #bfa074) ;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    border-radius: 999px !important;
  }
.single_add_to_cart_button, .add_to_cart_button, .button {
    border-bottom: 4px solid transparent !important;
    background-image: linear-gradient(#f7e8ef, #f7e8ef),
                      linear-gradient(35deg, #f9f4e7, #f1e0c5, #e5c59e, #d8b48a, #ffffd1, #f1e0c5, #bfa074) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    border-radius: 999px !important;
  }
.page-id-8 .logo_is_img img {
    width: 160px !important;
}
h1:not(.wp-block-heading), h2:not(.wp-block-heading), h3:not(.wp-block-heading){
    /* font-family: 'wetterburg', serif; */
}
.align-center{
	text-align: center;
}
.align-justify{
	text-align: justify;
}
.white{
	color: #fff;
}
.f24{
	font-size: 24px;
}
.f28{
	font-size: 28px;
}
.f30{
	font-size:30px;
}
.f32{
	font-size: 32px;
}
.fbold{
	font-weight: 700;
}
.fnormal{
	font-weight: normal !important;
}
.bottom-0 p{
	margin-bottom: 0 !important;
}
p {
    margin-bottom: 15px !important;
}
.footer_2_center .elm_icon_text{
    text-align: center;
}
.footer_2_center > div > div {
    width: 100% !important;
}
.underline-magical{
	background-image: linear-gradient(120deg,#fff 0%,#72CAEB 100%);
    background-repeat: no-repeat;
    background-size: 100% .2em;
    background-position: 0 88%;
    transition: background-size .25s ease-in;
}
.underline-magical:hover {
    background-size: 100% 88%;
}
.cz_stylish_list li i{
    transition-duration: 0ms !important;
}
/* =======================================================
   1) Mobile‐Breakpoints („max‐width“) anpassen falls nötig
   ======================================================= */
@media only screen and (max-width: 767px) {
  
  /* -------------------------------------------------------
     1.1) Körper des Warenkorbicons zum flex‐Container zurücksetzen
     ------------------------------------------------------- */
  .elms_shop_cart {
    position: relative !important;
    display: inline-flex !important;       /* verhindert, dass die Counter‐Blase in eine neue Zeile rutscht */
    align-items: center !important;         /* zentriert Icon und Counter vertikal */
    justify-content: center !important;     /* zentriert sie horizontal */
    width: auto !important;                 /* Theme‐Width überschreiben */
    padding: 0 !important;                  /* vorhandene Padding‐Werte zurücksetzen */
    margin: 0 !important;
  }
  
  /* -------------------------------------------------------
     1.2) Shop‐Icon selbst als „Positionierungs‐Context“ festlegen
     ------------------------------------------------------- */
  .elms_shop_cart .shop_icon {
    position: relative !important;
    display: block !important;              /* sicherstellen, dass das Icon den benötigten Platz hat */
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* -------------------------------------------------------
     1.3) Counter absolut an der oberen rechten Ecke platzieren
            (relativ zu .shop_icon)
     ------------------------------------------------------- */
  .elms_shop_cart .shop_icon + .cz_cart .cz_cart_count {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    transform: translate(50%, -50%) !important; /* schiebt den Mittelpunkt des Kreises genau über die Ecke */
    
    /* =============================
       Optional: Badge‐Styling
       ============================= */               /* weiße Schrift */
    font-size: 12px !important;            /* Schriftgröße (bei Bedarf vergrößern/verkleinern) */
    line-height: 1 !important;
    width: 16px !important;                /* Breite des Kreises */
    height: 16px !important;               /* Höhe des Kreises */
    text-align: center !important;
    border-radius: 50% !important;         /* rundes Badge */
    z-index: 9999 !important;              /* sicherstellen, dass das Badge über dem Icon liegt */
    display: flex !important;              /* für zentrierten Text */
    align-items: center !important;
    justify-content: center !important;
    
    /* Entferne jegliches Margin/Padding, das Themen vordefiniert */
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width:768px){
    #site_footer .elementor-widget-container p {
        text-align: center !important;
    }
    .btn-center-tablet{
        text-align: center !important;
    }
    .cz_title_content .cz_line_side_solo{
        width: 30px !important;
    }
}
/* borlabs cookie */
#BorlabsCookieBox .row{
	width: 100% !important;
}
#BorlabsCookieBox ._brlbs-box-wrap {
	max-width: 450px ;
}
#BorlabsCookieBox h3 {
	font-size: 20px !important;
}
.BorlabsCookie .row{
	max-width: 100% !important;
	margin: 0 !important;
}
._brlbs-branding {
	display: none !important;
}
._brlbs-flex-center{
	display: inline !important;
}
#BorlabsCookieBox .cookie-logo {
	max-width: 130px !important;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
}
/*END borlabs cookie*/

/* CF */
.sb-accept{
    font-size: 15px;
    line-height: 17px;
}
.sb-accept .wpcf7-acceptance .wpcf7-list-item label{
    display: table;
}
.sb-accept .wpcf7-acceptance .wpcf7-list-item-label:before {
    content: '';
    background: url(./images/checkbox.svg) no-repeat;
    display: table-cell;
    background-size: contain;
    vertical-align: middle;
    width: 26px;
    height: 26px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}
.sb-accept .wpcf7-acceptance input[type="checkbox"]:checked + span:before {
    background: url(./images/check.svg) no-repeat;
    width: 26px;
    height: 26px;
    padding: 2px;
    background-size: contain;
}
.sb-accept .wpcf7-acceptance label{
    margin: 0 !important;
}
.sb-accept input[type=checkbox]{
    display: none !important;
}
/* END CF */
.blob-cta {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;   /* Adjust size as needed */
    height: 700px;  /* Adjust size as needed */
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0 !important;
  }
  
  /* 
    ::before provides the gradient background with the irregular shape.
    We animate its border-radius to morph the shape.
  */
  .blob-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* The gradient for your stroke */
    background: linear-gradient(35deg, 
                  #f9f4e7, 
                  #f1e0c5, 
                  #e5c59e, 
                  #d8b48a, 
                  #ffffd1, 
                  #f1e0c5, 
                  #bfa074);
    z-index: -1;
    /* Start with an irregular shape */
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    /* Animate the shape */
    animation: blob 10s infinite ease-in-out;
  }
  
  /* 
    ::after acts as a “mask” to cut out the center of the blob so only a stroke is visible.
    The thickness of the stroke is controlled via the inset (here: 5px on all sides).
  */
  .blob-cta::after {
    content: "";
    position: absolute;
    top: 5px;     /* Set this to your desired stroke thickness */
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: transparent; 
    /* 
      If your container has a non‑transparent background or if you want a solid “fill” 
      behind the image, you can set this to that color.
    */
    z-index: 0;
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    animation: blob 10s infinite ease-in-out;
  }
  
  /* Keyframes to animate an irregular (morphing) border-radius */
  @keyframes blob {
    0%, 100% {
      border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }
    20% {
      border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
    }
    40% {
      border-radius: 40% 60% 30% 70% / 50% 50% 60% 40%;
    }
    60% {
      border-radius: 65% 35% 55% 45% / 40% 60% 35% 65%;
    }
    80% {
      border-radius: 55% 45% 65% 35% / 65% 35% 45% 55%;
    }
  }

.bg-rosa-light .elementor-widget:not(:last-child){
    margin-bottom: 0 !important;
}
.bg-rosa-light .elementor-widget-html{
    background-color: #faf2f0 !important;
}
  /* video maks */
  .video-mask {
    /* Set container size to your needs */
    width: 300px;
    height: 160px;
    margin: auto;
    /* Round the corners of the container */
    border-radius: 25px;
    
    /* Hide anything that falls outside the container’s border */
    overflow: hidden;
    
    /* (Optional) Add a background color or box shadow if you like */
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    border-bottom: 5px solid transparent !important;
    background-image: linear-gradient(#f7e8ef, #f7e8ef), linear-gradient(35deg, #f9f4e7, #f1e0c5, #e5c59e, #d8b48a, #ffffd1, #f1e0c5, #bfa074);
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
  }
  
  /* Make sure the video fills its container */
  .video-mask video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the container area */
  }