/*
Theme name: Hello Elementor Child
template: hello-elementor
*/
/*---------------------------------------------------------------Xmas temporaer*/
.click-here h2 a:hover {
	cursor: pointer;
}
.xmas-state, .together {
  font-style: italic !important;
  font-weight: 700 !important;
}

.xmas-state {
  display: inline-block;
  width: 3ch;          /* Platz für 3 Zeichen – reicht für "OFF" */
  text-align: center;  /* Text im Slot zentrieren */
}


/* ============================
   Top-Bild / XMAS-Mode (Toggle oben)
   ============================ */

/* Normalzustand: Standard-Background */
.xmas-top-image {
  /* hier dein normales Bild eintragen */
  background-image: url('/wp-content/uploads/2025/12/wiethe_xmas_header-02.webp');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease, background 0.3s ease !important;
}

/* WICHTIG: falls du sie noch hast – diese Hover-Regel bitte entfernen:
   .xmas-top-image:hover {
     opacity: 0;
   }
*/

/* XMAS-Mode AN:
   gleiche Box, anderer Background – Inhalt bleibt! */
.xmas-top-image.xmas-top-mode-on {
  /* hier dein XMAS-/Hover-Bild eintragen */
  background-image: url('/wp-content/uploads/2025/12/wiethe_xmas_header_hover-v02.webp');
}


/* =========================================
   MOBILE (max-width: 767px)
   → andere Bilder
   ========================================= */
@media (max-width: 767px) {

  /* Normalzustand der mobilen Version */
  .xmas-top-image {
    background-image: url('/wp-content/uploads/2025/12/wiethe_xmas_header-mobile.webp');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
  }

  /* XMAS-Mode AN (Mobile) */
  .xmas-top-image.xmas-top-mode-on {
    background-image: url('/wp-content/uploads/2025/12/wiethe_xmas_header_hover-v02-mobile-scaled.webp');
  }
}

.xmas-top-image.xmas-top-mode-on::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25); /* 50% Schwarz */
  pointer-events: none;
}

/* Overlay */
.xmas-top-image::before {
  content: "";
  position: absolute;
  inset: 0; 
  background: rgba(0, 0, 0, 0.5) !important; 
  pointer-events: none; 
  
}




/* =======================================
   Headline / Sticky
   ======================================= */

/* Optional: innerer Wrapper, falls du den allgemein animieren willst */
.xmas-headline-wrapper {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* eigentlicher sticky/fixed-Container (ausblenden) */
.elementor-element.elementor-sticky.xmas-sticky-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%); /* schön nach unten rausfahren */
}

/* =======================================
   Layout
   ======================================= */

/* Auf Mobile keine Pointer-Events im Bild-Container
   
  .xmas-container-mobile {
    pointer-events: none;
  }
}*/

/* Headline-Style */
.xmas-headline {
  color: #fff !important;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
}

/* =======================================
   Bilder / Hover / XMAS-Mode
   ======================================= */

/* Basiszustand der Bilder */
.xmas-image {
  opacity: 1;
  transition: opacity 0.3s ease !important;
  will-change: opacity;
}

/* Normaler Hover-Effekt: Bild ausblenden */
.xmas-image:hover {
  opacity: 0;
}

/* XMAS-Mode:
   Wenn der Wrapper #xmas-images-section die Klasse .xmas-mode-on hat,
   sind die Bilder so, als wären sie dauerhaft "gehovered" */
#xmas-images-section.xmas-mode-on .xmas-image {
  opacity: 0;
}

/* Optional: falls dein JS noch mit .hidden arbeitet,
   bleibt das hier zur Sicherheit drin. Wenn du komplett
   auf .xmas-mode-on umstellst, kannst du das entfernen. */
.xmas-image.hidden {
  opacity: 0;
}

/* =======================================
   Toggle-Switch
   ======================================= */

/* Unsichtbares, klickbares Checkbox-Input
   deckt die komplette Toggle-Fläche ab */
.toggle_switch {
  position: absolute;
  inset: 0;            /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  z-index: 2;
  cursor: pointer;
}


/* Sichtbarer Toggle-Button */
.toggle_switch-button {
  width: 10rem;
  height: 5rem;
  background: rgba(255, 255, 255, 0);
  border-radius: 4rem;
  border-width: 0.125rem;
border-color: #fff;
	border-style: solid;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
  display: inline-block;
  z-index: 1;
}


/* Kreis im Toggle */
.toggle_switch-button::after {
  content: "";
  width: 3.875rem;
  height: 3.875rem;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 0.375rem;
  left: 0.563rem;
  transition: transform 0.3s ease;
}

/* Checked-Hintergrundfarbe */
.toggle_switch:checked + .toggle_switch-button {
  background: #FF0064;
	border-color: #FF0064;
}

/* Kreis nach rechts schieben, wenn checked */
.toggle_switch:checked + .toggle_switch-button::after {
  transform: translateX(4.8rem);
}

.toggle_switch-button-raster {
  width: 5.75rem;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0);
  border-radius: 4rem;
  border-width: 0.125rem;
border-color: #fff;
	border-style: solid;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
  display: inline-block;
  z-index: 1;
}

/* Kreis im Toggle */
.toggle_switch-button-raster::after {
  content: "";
  width: 1.875rem;
  height: 1.875rem;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 0.188rem;
  left: 0.25rem;
  transition: transform 0.3s ease;
}

input:checked + .toggle_switch-button-raster::after {
  background: #FF0064;
}

/* Checked-Hintergrundfarbe */
.toggle_switch:checked + .toggle_switch-button-raster {
  background: #fff;
	border-color: #fff;
}

/* Kreis nach rechts schieben, wenn checked */
.toggle_switch:checked + .toggle_switch-button-raster::after {
  transform: translateX(3.3rem);
}
/*---------------------------------------------------------------Xmas temporaer End*/
/*---------------------------------------------------------------Newsletter*/
#rmOrganism .rmBase__el .comp__input, #rmOrganism .rmBase__el .comp__select {
    background: transparent !important; 
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0em !important;
    box-shadow: none !important;
    color: #666;
    font-family: inherit;
    font-size: 1em;
    font-weight: 400;
    height: 2.5em;
    line-height: 1.5;
    margin: 0;
    outline: none;
    padding: 0.5em;
    vertical-align: top;
    width: 100%;
}


#rmOrganism .rmLayout--horizontal.rmBase .rmBase__container {
    padding: 0em !important;
    overflow: visible !important;
}

#rmOrganism .rmSubscription .rmBase__content {
    overflow: visible !important;
}
/*---------------------------------------------------------------End Newsletter*/

.elementor-location-header {
	position: absolute;
    width: 100% !important;
} 


.elementor-element-62ca254 {
	        min-height: 1vh;
    max-height: 95vh;
}
/* --------------------------------------------------- Header  */
.nav-modal .dialog-close-button i {
    transition: transform .25s, opacity .25s;
}
.nav-modal .dialog-close-button i:hover {
    transform: rotate(90deg);
}

#hover-menus {
    display: none;
}

.nav-modal.elementor-popup-modal .dialog-widget-content {
    width: 90%;
}

#header-nav h2:hover {
    color: #ffffff;
}

#hover-menus h2 a,
.left-side-menus h2 a {
    stroke: #FFFFFF;
    -webkit-text-stroke-width: 1px;
    stroke-width: 1px;
    -webkit-text-stroke-color: #FFFFFF;
}

@media (max-width: 820px) {
    #bottom-menu ul {
        display: inline-block;
    }

    #bottom-menu ul li:last-child {
        margin-top: 25px;
    }

    .dropdown-menu {
        display: none;
    }

    .mobile-menu .dropdown-menu {
        display: flex;
    }

    #header-nav h2.elementor-heading-title {
        color: #ffffff;
    }

    #header-nav .dropdown-menu h2.elementor-heading-title {
        color: #ffffff00 !important;
    }

    .lang_menu {
        margin-top: 12%;
    }
}

@media (min-width: 821px) {
    #hover-menus.open-menu {
        display: flex;
    }

    .dropdown-menu {
        display: none;
    }
}


div[data-id=bg-photo] {
    background-size: 50% !important;
    background-position: 42% 0;
}

div[data-id=bg-video] {
    background-size: 50% !important;
    background-position: 0 20%;
}

div[data-id=bg-cgi] {
    background-size: 50% !important;
    background-position: 40% 32%;
}

.service_menu {
    cursor: pointer;
}

@media (max-width: 767px) {
    .menu_item_title {
        -webkit-text-fill-color: white;
    }
}

@media (max-width: 599px) {
    .newsletter_form .elementor-size-sm {
        /* 		width: 100% */
    }
}

.photo-background {
    background-image: url('https://wpbase.wiethe-preview.com/wp-content/uploads/2023/05/shoe_3-scaled.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100px;
    height: 100px
}

.test_image_no_active {
    display: none;
}

.test_image_active {
    display: block;
}

.menu_item_title:hover {
    -webkit-text-fill-color: white;
}

.menu_dropdown_item_title:hover {
    -webkit-text-fill-color: white;
}

.dropdown_menus {
    display: none
}

.dropdown_menus.active {
    display: block
}

.text-stroke span {
    -webkit-text-stroke: 1px #fff;
    line-break: auto;
}

.text-stroke span:hover {
    cursor: pointer;
}

.elementor-41 .elementor-element.elementor-element-7ac57d7 .ha-threesixty-rotation-wrapper {
    margin: 0 auto !important
}

.cgi_headline {
    pointer-events: none;
}

.from-all-pages h2 {
    background-color: #000;
    background-image: linear-gradient(0deg, #fff 32.666%, #000 31.666%);
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

/*--------------------------------------------------------------CGI */

@media (max-width: 599px) {
	/*
    .color_variations.color_variations img {
        border-right: 0;
    }

    .color_variations.color_variations .elementor-widget-image:first-child img {
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
    }

    .color_variations.color_variations .elementor-widget-image:last-child img {
        border-right: 1px solid #ffffff;
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
    }

    .color_variations .elementor-widget-image.elementor-widget-image img.active {
        border-top-color: red;
    } */
}


.img_variation_container .elementor-widget-image:first-child .elementor-widget-container {
        border-top-left-radius: 60px;
        border-top-right-radius: 60px;
		padding: 20px 0 0 0;
}

.img_variation_container .elementor-widget-image:last-child .elementor-widget-container {
        border-bottom-left-radius: 60px;
        border-bottom-right-radius: 60px;
		padding: 0 0 20px 0;
}



.img_variation_container  .elementor-widget-container.active{
	border-inline-start: 4px solid #EA0054;
}

@media screen and (max-width: 1023px) {
	
	.img_variation_container .elementor-widget-image:first-child .elementor-widget-container {
	border-radius: 0;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
		padding: 0 0 0 10px;
}

.img_variation_container .elementor-widget-image:last-child .elementor-widget-container {
	border-radius: 0;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    padding: 0 10px 0 0;
}

}



@media screen and (max-width: 767px) {
	/*
	.img_variation_container .elementor-widget-image:first-child {
		padding: 0;
		border-radius: 0;
	}
	
	.img_variation_container .elementor-widget-image:last-child {
		padding: 0;
		border-radius: 0;
}
	
	.img_variation_container .elementor-widget-image .elementor-image img {
		width: 80px;
		height: 80px
	} */
	
}

@media (max-width: 600px) {
   #video_container .e-hosted-video {
        aspect-ratio: 9 / 16 !important;
    }
}
@media (min-width: 600px) {
	/*
    .color_variations.color_variations img {
        border-bottom: 0;
    }

    .color_variations.color_variations .elementor-widget-image:last-child img {
        border-bottom: 1px solid #ffffff;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
    }

    .color_variations.color_variations .elementor-widget-image:first-child img {
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
    }

    .color_variations .elementor-widget-image.elementor-widget-image img.active {
        border-left-color: red;
    }
	*/

}

.img_variations .elementor-widget-container img 
.img_variations .elementor-widget-container img {
    cursor: pointer;
}

.stroke_headlines .elementor-widget-heading:hover h4 {
    color: #ffffff !important;
    cursor: pointer;
}

/*---------------------------------------------------------------news_slider */
.news_slider .swiper-slide {
    margin-right: 0 !important
}

.news_slider article {
    padding: 0 !important
}

.news_slider .swiper-wrapper {
    margin-left: 40px;
}

/*---------------------------------------------------------------Video Page */

#clickable_images #left_images img {
    cursor: pointer;
    border: 1px solid #6A6A6A;
    border-left: 0;
}

#clickable_images #left_images img.active {
    border: 1px solid #000;
}

.cases .elementor-image-box-content {
    padding: 0 20px
}

.apparel_slider .swiper-pagination-bullets.swiper-pagination-bullets,
.cgi_slider .swiper-pagination-bullets.swiper-pagination-bullets,
.mobile_slider .swiper-pagination-bullets.swiper-pagination-bullets {
    bottom: 6%;
}

/*---------------------------------------------------------------Popup Style */

@media (min-width: 821px) {
    .news-modal .overlay {
        width: 60%;
        display: flex;
    }

    .news-modal .overlay .thumbnail {
        width: 40%;
    }

    .news-modal .overlay .content {
        width: 60%;
        padding: 5% 5% 0;
    }
}

@media (max-width: 820px) {
    .news-modal .overlay {
        width: 100%;
        display: flex;
    }

    .news-modal .overlay .thumbnail {
        width: 40%;
    }

    .news-modal .overlay .content {
        width: 60%;
        padding: 5% 5% 0;
    }
	
	.news-modal .overlay #content {
    	padding: 0 0 15% 0;
	}
}

@media (max-width: 599px) {
    .news-modal .overlay {
        width: 100%;
        display: block;
    }

    .news-modal .overlay .thumbnail {
        width: 100%;
        padding: 0 5%;
    }

    .news-modal .overlay .content {
        width: 100%;
        padding: 5% 5% 0 !important;
    }
}

.news-modal {
    width: 100%;
    top: 0;
    height: 100vh;
    position: fixed;
    z-index: 10000;
    display: none;
    background: #fff;
    overflow: auto;
}

.news-modal.open-modal {
    display: block !important;
}

.news-modal .overlay {
    margin: 10% auto;
}

.news-modal .overlay .post_date {
    text-transform: uppercase;
    color: #828282;
    font-weight: 700;
    font-size: 12px;
    line-height: 14px
}

.news-modal .overlay .content {
    padding: 0 5% 0;
}

.news-modal .overlay .post_title {
    font-size: 26px;
    line-height: 30px;
    font-weight: 700;
}

.news-modal .overlay #content {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #000000;
}

.news-modal .close_btn {
    position: absolute;
    top: 3%;
    right: 5%;
    font-size: 25px;
    cursor: pointer;
}

/*---------------------------------------------------------------trailing-images */

#trailing-images .imgBox {
    position: absolute;
    width: 300px;
    height: 400px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

#trailing-images  .imgBox img {
    position: absolute;
    left: 0;
    top: -150%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#trailing-images.stop {
    transition: opacity 2s;
    opacity: 0;
}


#trailing-images.moving {
    opacity: 1;
}

/*---------------------------------------------------------------trailing-images */
@media (max-width: 1024px){
.image-move-mouse {
	height: 50vh;
}}

/* @media (max-width: 767px){
.image-move-mouse {
	height: 50vh;
}} */

/*---------------------------------------------------------------Contact Button */
.contact_us_button {
  transition: 0.3s;
}
.contact_us_button:hover {
  transform: translate(-10px, 0);
}
/*---------------------------------------------------------------We Are - Animation */
.we-are-animation .e-hosted-video .elementor-video {
    object-fit: contain !important;
}
/*---------------------------------------------------------------Footer  */
.footer-privacy a {
color: #828282;
}

.footer-privacy a:hover {
color: #fff;
}
/*---------------------------------------------------------------More Cases Sticky Button  */
.bg_pink  {
	background-color: #EA0054 !important;
}
.bg_pink:hover  {
	background-color: #000 !important;
	    border: 1px solid #fff;
}