/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1761058744

*/
/*@media (max-width: 767px) {
  .toggle-raster-container:not(.elementor-sticky__spacer) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease,
      transform 0.3s ease;
  }

  .toggle-raster-container:not(.elementor-sticky__spacer).is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}*/



.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-week2-xmas-header.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-week2-xmas-header-hover-scaled.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-week2-xmas-header-mobile.webp') !important;
    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-week2-xmas-header-hover-mobile.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);
}

/* Basiszustand des Sticky-Toggles (sichtbar) */
.toggle-raster-container.elementor-sticky {
  transform: translateY(0);
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  will-change: opacity, transform;
}

/* Versteckter Zustand: nach unten "einfahren" */
.toggle-raster-container.elementor-sticky.xmas-sticky-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}


/*.explore-cursor {
  cursor: url('/wp-content/uploads/cursors/xmas-scroll-down-cursor.svg') 64 64, 
	  url('/wp-content/uploads/cursors/xmas-scroll-down-cursor.png') 64 64,
	  auto;
}*/

/*.xmas-image, .xmas-image-hover {
  cursor: url('/wp-content/uploads/cursors/xmas-tree-cursor.svg') 64 64, 
	  url('/wp-content/uploads/cursors/xmas-tree-cursor.png') 64 64,
	  auto;
}*/





#rcb-sc-link-change {
	color: #fff;
}
#rcb-sc-link-change:hover {
	color: #000;
}


.black-w-logo,
.white-w-logo {
  display: none !important; 
}

body.logo-black  .black-w-logo { display: block !important; }
body.logo-white  .white-w-logo { display: block !important; }

.black-w-logo,
.white-w-logo {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

body.logo-black  .black-w-logo,
body.logo-white  .white-w-logo {
  opacity: 1;
}

/* Wenn schwarze Variante aktiv → Text schwarz */
body.logo-black .contact-us-header-button a {
  color: #000000 !important;
}
body.logo-black .contact-us-header-button a:hover {
  color: #FF0064 !important;
}



/*--------------------------------------------------------------------------Contact Form*/
.hdt-contact-form .elementor-field-label,
.pdf-download-form .elementor-field-label {
	display: none;
}

.hdt-contact-form .elementor-field::placeholder {
	color: #ffffff !important;
	opacity: 1 !important;
}

.pdf-download-form .elementor-field::placeholder {
	color: #000000 !important;
	opacity: 1 !important;
}

.hdt-contact-form #form-field-firstname::placeholder, 
.hdt-contact-form #form-field-lastname::placeholder, 
.hdt-contact-form #form-field-email::placeholder, 
.hdt-contact-form #form-field-company::placeholder,
.pdf-download-form  #form-field-firstname::placeholder, 
.pdf-download-form  #form-field-lastname::placeholder, 
.pdf-download-form  #form-field-email::placeholder, 
.pdf-download-form  #form-field-company::placeholder{
	font-weight: 400;
	padding: 0.5rem 1rem 0.5rem 0rem;
} 
.hdt-contact-form #form-field-phone::placeholder{
	font-weight: 400;
	padding: 0.5rem 1rem 0.5rem 0rem;
}

.hdt-contact-form #form-field-message::placeholder{
	font-weight: 400;
}
.hdt-contact-form #form-field-message{
	font-weight: 700;
	border-style: solid;
	border-width: 0.063rem;
	border-color: #fff;
}

.hdt-contact-form #form-field-firstname, 
.hdt-contact-form #form-field-lastname, 
.hdt-contact-form #form-field-email, 
.hdt-contact-form #form-field-company,
.pdf-download-form  #form-field-firstname, 
.pdf-download-form  #form-field-lastname, 
.pdf-download-form  #form-field-email, 
.pdf-download-form  #form-field-company{
	font-weight: 700;
	padding: 0.5rem 1rem 0.5rem 0rem;
} 
.hdt-contact-form #form-field-phone{
	font-weight: 700;
	padding: 0.5rem 1rem 0.5rem 0rem;
}
/*--------------------------------------------------------------------------End Contact Form*/
.hdt-list ul {
	padding: 0rem 0rem 0rem 1.125rem;
}

.elementor-field-group-message {
	padding-right: calc(2.5rem / 2);
    padding-left: calc(2.5rem / 2);
    margin-bottom: 3.438rem !important;
	margin-top: 6.875rem;
}

#hd-fill-txt {
  color: rgba(255, 255, 255, 0); /* Textfarbe */
  -webkit-text-stroke: 0.125rem #fff; /* Outline-Dicke und Farbe */
	display: inline;
}

#hd-fill-txt-black {
  color: rgba(255, 255, 255, 0); /* Textfarbe */
  -webkit-text-stroke: 0.125rem #000; /* Outline-Dicke und Farbe */
	display: inline;
}
@media (max-width: 767px) {
#hd-fill-txt {
  color: rgba(255, 255, 255, 0); /* Textfarbe */
  -webkit-text-stroke: 0.063rem #fff; /* Outline-Dicke und Farbe */
	display: inline;
}

#hd-fill-txt-black {
  color: rgba(255, 255, 255, 0); /* Textfarbe */
  -webkit-text-stroke: 0.063rem #000; /* Outline-Dicke und Farbe */
display: inline;
	}}