.elementor-kit-7{--e-global-color-primary:#57642A;--e-global-color-secondary:#FCF1E0;--e-global-color-text:#57642A;--e-global-color-accent:#C3812D;--e-global-color-6831a6f:#FFFAEA;--e-global-color-56d167d:#FCF1E0;--e-global-color-e7f92ba:#57642A;--e-global-color-9228424:#57642A;--e-global-color-d926275:#C3812D;--e-global-color-c93e0d0:#FFFAEA;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Playfair Display";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"General Sans";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"General Sans";--e-global-typography-accent-font-weight:500;--e-global-typography-c9ba7f5-font-family:"Playfair Display";--e-global-typography-c9ba7f5-font-size:clamp(4rem, 2.8571rem + 3.5714vw, 4rem);--e-global-typography-c9ba7f5-font-weight:700;--e-global-typography-5274af2-font-family:"Playfair Display";--e-global-typography-5274af2-font-size:clamp(3rem, 2.2857rem + 2.6786vw, 3rem);--e-global-typography-5274af2-font-weight:700;--e-global-typography-a218cf5-font-family:"General Sans";--e-global-typography-a218cf5-font-size:clamp(2rem, 1.6429rem + 1.7857vw, 2rem);--e-global-typography-a218cf5-font-weight:500;--e-global-typography-a218cf5-text-transform:uppercase;--e-global-typography-ffa1b61-font-family:"Playfair Display";--e-global-typography-ffa1b61-font-size:clamp(2rem, 1.6429rem + 1.7857vw, 2rem);--e-global-typography-ffa1b61-font-weight:700;--e-global-typography-193f0cf-font-family:"General Sans";--e-global-typography-193f0cf-font-size:clamp(1.3125rem, 1.2147rem + 1.1610vw, 1.3125rem);--e-global-typography-193f0cf-font-weight:700;--e-global-typography-193f0cf-text-transform:uppercase;--e-global-typography-0b48251-font-family:"General Sans";--e-global-typography-0b48251-font-size:clamp(1.3125rem, 1.2147rem + 1.1610vw, 1.3125rem);--e-global-typography-0b48251-font-weight:500;--e-global-typography-0b48251-text-transform:uppercase;--e-global-typography-98f1b38-font-family:"General Sans";--e-global-typography-98f1b38-font-size:16px;--e-global-typography-98f1b38-font-weight:500;--e-global-typography-0b9bf03-font-family:"General Sans";--e-global-typography-0b9bf03-font-size:1.25rem;--e-global-typography-0b9bf03-font-weight:500;--e-global-typography-2e96b25-font-family:"General Sans";--e-global-typography-2e96b25-font-size:0.875rem;--e-global-typography-2e96b25-font-weight:500;background-color:#FFFAEB;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.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);}@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;}}/* Start custom CSS *//* Define custom properties for the toggle button */
.toggleMode {
  --_fill-color:#fff; /* Fill color for SVG */
  --_width: 50px; /* Width of the SVG */
  --_height: 50px; /* Height of the SVG */
  --_transition: 1200ms cubic-bezier(0.11, 0.14, 0.29, 1.32); /* Transition timing function */
}

/* Style for the theme toggle button */
#theme-toggle {
  cursor: pointer; /* Change cursor to pointer on hover */
  background: transparent; /* Transparent background */
  border: 0; /* No border */
  opacity: 0.8; /* Slightly transparent */
  border-radius: 50%; /* Circular button */
  padding: 5px 5px 2px; /* Padding around the button */
  position: relative; /* Position relative to allow for pseudo-element positioning */
  isolation: isolate; /* Isolate stacking context */
}

/* Style for the SVG inside the theme toggle button */
#theme-toggle svg {
  fill: var(--_fill-color); /* Use custom fill color */
  width: var(--_width); /* Use custom width */
  height: var(--_height); /* Use custom height */
  aspect-ratio: 1/1; /* Maintain aspect ratio */
}

/* Style for the pseudo-element before the theme toggle button */
#theme-toggle::before {
  content: ""; /* Empty content */
  position: absolute; /* Absolute positioning */
  inset: 0; /* Stretch to cover the button */
  background: hsl(0 0% 50% / 0.2); /* Semi-transparent background */
  border-radius: inherit; /* Inherit border radius from parent */
  transform: scale(0); /* Initial scale */
  opacity: 0; /* Initial opacity */
  z-index: -1; /* Place behind the button */
}

/* Animation for the pseudo-element when the light theme is active */
.light-theme #theme-toggle::before {
  animation: pulseToLight var(--_transition);
}

/* Animation for the pseudo-element when the dark theme is active */
.dark-theme #theme-toggle::before {
  animation: pulseToDark var(--_transition);
}

/* Style for the theme toggle button on hover and focus */
#theme-toggle:hover,
#theme-toggle:focus {
  outline: none; /* Remove outline */
  opacity: 1; /* Fully opaque */
  background: hsl(0 0% 50% / 0.15); /* Slightly darker background */
}

/* Transition for the circle inside the toggle button */
.toggle-circle {
  transition: transform var(--_transition);
}

/* Position adjustment for the circle in light theme */
.light-theme .toggle-circle {
  transform: translateX(-15%);
}

/* Transition for the sun icon inside the toggle button */
.toggle-sun {
  transform-origin: center center; /* Set transform origin to center */
  transition: transform var(--_transition);
}

/* Rotation for the sun icon in light theme */
.light-theme .toggle-sun {
  transform: rotate(50deg); /* Rotate by 50 degrees */
  transform: rotate(0.5turn); /* Rotate by half a turn */
}

/* Keyframes for the light theme pulse animation */
@keyframes pulseToLight {
  0% {
    transform: scale(0); /* Initial scale */
    opacity: 0.5; /* Initial opacity */
  }
  10% {
    transform: scale(1); /* Full scale */
  }
  75% {
    opacity: 1; /* Full opacity */
  }
  100% {
    opacity: 0; /* Fade out */
    transform: scale(1); /* Maintain full scale */
  }
}

/* Keyframes for the dark theme pulse animation */
@keyframes pulseToDark {
  0% {
    transform: scale(0); /* Initial scale */
    opacity: 0.5; /* Initial opacity */
  }
  10% {
    transform: scale(1); /* Full scale */
  }
  75% {
    opacity: 1; /* Full opacity */
  }
  100% {
    opacity: 0; /* Fade out */
    transform: scale(1); /* Maintain full scale */
  }
}

.theme-transition {
  transition: background-color 0.75s ease, color 0.75s ease;
}

/* Grundlegende Farb-Transitions */
body,
.elementor-section,
.elementor-column,
.elementor-widget-container,
.elementor-heading-title,
.elementor-button,
button,
input,
textarea {
  transition:
    background-color 0.75s ease,
    color 0.75s ease,
    border-color 0.75s ease;
}


/* Kannst du auch noch auf andere Elemente ausweiten */

/* Weicher Übergang für das Logo */
.bg-logo path {
  transition: fill 0.45s ease;
}

/* Light-Theme / Sommer-Farbe */
.light-theme .bg-logo path {
  fill: #5b6f3b; /*  Beachgarten-Grün */
}

/* Dark-Theme / Winter-Farbe */
.dark-theme .bg-logo path {
  fill: #e8e6e1; /* z.B. das helle Cream für dunklen Hintergrund */
}



/* Mobile: Basiszustand für alle Hero-Elemente */
@media (max-width: 767px) {
  .hero-mobile,
  .hero-layer-1,
  .hero-layer-2 {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;

    opacity: 0;
    transform: translate3d(0, 20px, 0);
    will-change: opacity, transform;
  }

  .hero-mobile {
    width: 240px;
    height: auto;
  }

  /* Animation wird nur abgespielt, wenn JS 'animate' hinzufügt */
  .hero-mobile.animate {
    animation: logoSlideIn 0.6s ease-out forwards;
    animation-delay: 0.1s;
  }

  .hero-layer-1.animate {
    animation: logoSlideIn 0.6s ease-out forwards;
    animation-delay: 0.2s;
  }

  .hero-layer-2.animate {
    animation: logoSlideIn 0.6s ease-out forwards;
    animation-delay: 0.3s;
  }
}

/* Keyframes bleiben global */
@keyframes logoSlideIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.wordmark {
  width: 100%;
  max-width: 611px; /* Originalbreite */
  height: auto;
}

/* Mobile kleiner ziehen, falls nötig */
@media (max-width: 767px) {
  .wordmark {
    max-width: 320px; /* oder was für deinen Hero gut passt */
  }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://puchermeer-beachgarten.de/wp-content/uploads/2025/11/PlayfairDisplay-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://puchermeer-beachgarten.de/wp-content/uploads/2025/11/PlayfairDisplay-Regular.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'General Sans';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://puchermeer-beachgarten.de/wp-content/uploads/2025/11/GeneralSans-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'General Sans';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://puchermeer-beachgarten.de/wp-content/uploads/2025/11/GeneralSans-Bold.woff2') format('woff2');
}
/* End Custom Fonts CSS */