.elementor-707 .elementor-element.elementor-element-04120a8{--display:flex;--min-height:100px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--margin-top:0px;--margin-bottom:-115px;--margin-left:0px;--margin-right:0px;--padding-top:1%;--padding-bottom:1%;--padding-left:12%;--padding-right:12%;--z-index:10;}.elementor-707 .elementor-element.elementor-element-4af8c51{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-707 .elementor-element.elementor-element-9b7a956 img{width:90%;}.elementor-707 .elementor-element.elementor-element-9b7a956 > .elementor-widget-container{padding:0% 0% 0% 0%;}.elementor-707 .elementor-element.elementor-element-9b7a956{z-index:12;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-707 .elementor-element.elementor-element-081b717 .elementor-icon-wrapper{text-align:center;}.elementor-707 .elementor-element.elementor-element-081b717.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-707 .elementor-element.elementor-element-081b717.elementor-view-framed .elementor-icon, .elementor-707 .elementor-element.elementor-element-081b717.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-707 .elementor-element.elementor-element-081b717.elementor-view-framed .elementor-icon, .elementor-707 .elementor-element.elementor-element-081b717.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-707 .elementor-element.elementor-element-f3af637{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 12px;--row-gap:0px;--column-gap:12px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-button .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );background-color:var( --e-global-color-accent );}.elementor-707 .elementor-element.elementor-element-d6fb740 .elementor-button{font-family:"Manrope", Sans-serif;font-size:16px;font-weight:800;background-color:#61CE7000;transition-duration:400ms;padding:12px 24px 12px 24px;}.elementor-707 .elementor-element.elementor-element-dd24806 .elementor-button{font-family:"Manrope", Sans-serif;font-size:16px;font-weight:800;background-color:#61CE7000;transition-duration:400ms;padding:12px 24px 12px 24px;}.elementor-707 .elementor-element.elementor-element-68ed4ad .elementor-button{font-family:"Manrope", Sans-serif;font-size:16px;font-weight:800;background-color:#61CE7000;transition-duration:400ms;padding:12px 24px 12px 24px;}.elementor-707 .elementor-element.elementor-element-323122b .elementor-button{font-family:"Manrope", Sans-serif;font-size:16px;font-weight:800;background-color:#61CE7000;transition-duration:400ms;padding:12px 24px 12px 24px;}.elementor-707 .elementor-element.elementor-element-eb2a0e8 .elementor-button{font-family:"Manrope", Sans-serif;font-size:16px;font-weight:800;background-color:#61CE7000;transition-duration:400ms;padding:12px 24px 12px 24px;}.elementor-707 .elementor-element.elementor-element-e16312b{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-707 .elementor-element.elementor-element-44f5015 .elementor-button{font-family:"Manrope", Sans-serif;font-size:16px;font-weight:800;fill:#FFFFFF;color:#FFFFFF;background-color:#AB1C2C;transition-duration:400ms;padding:16px 32px 16px 32px;}.elementor-707 .elementor-element.elementor-element-44f5015 .elementor-button:hover, .elementor-707 .elementor-element.elementor-element-44f5015 .elementor-button:focus{color:#FFFFFF;background-color:#CA2C3D;}.elementor-707 .elementor-element.elementor-element-44f5015 .elementor-button:hover svg, .elementor-707 .elementor-element.elementor-element-44f5015 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-707 .elementor-element.elementor-element-4af8c51{--width:15%;}.elementor-707 .elementor-element.elementor-element-f3af637{--width:70%;}.elementor-707 .elementor-element.elementor-element-e16312b{--width:15%;}}@media(max-width:1366px){.elementor-707 .elementor-element.elementor-element-04120a8{--padding-top:0%;--padding-bottom:0%;--padding-left:2%;--padding-right:2%;}}@media(max-width:767px){.elementor-707 .elementor-element.elementor-element-04120a8{--min-height:80px;--padding-top:4%;--padding-bottom:3%;--padding-left:0%;--padding-right:0%;}.elementor-707 .elementor-element.elementor-element-4af8c51{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--align-items:center;--gap:24px 0px;--row-gap:24px;--column-gap:0px;}.elementor-707 .elementor-element.elementor-element-081b717 .elementor-icon{font-size:24px;}.elementor-707 .elementor-element.elementor-element-081b717 .elementor-icon svg{height:24px;}}/* Start custom CSS for container, class: .elementor-element-04120a8 *//* Default Menu Styles */
.menu {
  background-color: transparent; /* Or your desired initial background */
  transition: background-color 0.15s ease-in-out 0.1s; /* Faster transition and delay */
}

.menu-logo {
  display: inline-block; /* Or 'block', depending on your layout */
  width: 158px;          /* Original width of your SVG */
  height: 60px;           /* Original height of your SVG */
  background-image: url('https://vs-schubert.de/wp-content/uploads/2025/05/schubert-weiss.svg'); /* URL for the WHITE SVG */
  background-size: contain; /* Or 'cover', '100% 100%', etc. */
  background-repeat: no-repeat;
  background-position: center center;
  position: relative; /* This is crucial for absolute positioning of child elements */
  /* To hide any text if .menu-logo is an <a> tag or contains text */
  font-size: 0;
  line-height: 0;
  text-indent: -9999px; /* Moves text off-screen */
  overflow: hidden; /* Ensures no content spills out */
  /* FOR CLICKABILITY: The .menu-logo (this element) has the background image.
     The link (a tag) inside .elementor-widget-container needs to overlay this. */
}

/* Ensure the widget container inside .menu-logo fills it */
.menu-logo .elementor-widget-container {
  width: 100%;
  height: 100%;
  position: static; /* Or relative if needed, but static should allow child 'a' to be absolute to .menu-logo */
}

/* Make the <a> tag (inside .elementor-widget-container) fill the .menu-logo area and be clickable */
.menu-logo .elementor-widget-container > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute; /* Positioned relative to .menu-logo */
  top: 0;
  left: 0;
  z-index: 1; /* Ensure the link is on top to be clickable */
  /* This 'a' tag is an invisible overlay for the link. */
}

/* Hide the actual <img> tag rendered by the Elementor Image widget,
   so our background-image on .menu-logo is what's visible. */
.menu-logo .elementor-widget-container a img {
  display: none !important;
}
/* Also hide any direct img/svg children of .menu-logo if they somehow exist (fallback) */
.menu-logo > img,
.menu-logo > svg {
  display: none !important;
}


/* Default Menu Item Styles (for transitions and base appearance) */
.menu-item a, /* Target the link within the menu item */
.menu-item > span { /* Target if it's just text in a span */
  color: white; /* Default non-sticky text color */
  background-color: transparent; /* Initial background for menu items */
  padding: 10px 15px; /* Example padding, adjust as needed */
  display: inline-block; /* Needed for transform and padding to work well */
  text-decoration: none; /* Remove underline from links */
  border-radius: 5px; /* Optional: rounded corners for the background */
  transition: color 0.15s ease-in-out 0.1s, /* Faster transition and delay for color */
              background-color 0.15s ease-in-out, /* Faster transition for hover background */
              transform 0.15s ease-in-out; /* Faster transition for hover transform */
}

/* Hover effects for menu items (Non-Sticky State) */
.menu-item a:hover,
.menu-item > span:hover {
  color: white !important; /* Text color on hover */
  background-color: #AB1C2C !important; /* Background color on hover */
  transform: scale(1.1); /* Grow effect on hover */
}

/* Default Mobile Menu Trigger Icon Styles */
/* This targets the wrapper you've given the class .menu-mobile-trigger */
/* And then the .elementor-icon class typically used by Elementor icon widgets */
.menu-mobile-trigger .elementor-icon {
  color: white !important; /* Default color for the icon (overriding Elementor's) */
  transition: color 0.15s ease-in-out; /* Delay removed for harmonization */
}
/* For the SVG paths themselves, if the above doesn't work due to inline SVG fills */
.menu-mobile-trigger .elementor-icon svg, /* Target SVG element directly */
.menu-mobile-trigger .elementor-icon svg path { /* Target paths within the SVG */
    fill: white !important; /* Default fill for SVG paths */
    transition: fill 0.15s ease-in-out; /* Delay removed for harmonization */
}


/* Styles for when the menu is sticky */
/* Adjust '.elementor-sticky--effects' if Elementor uses a different class */

/* Scenario 1: If the SECTION containing the menu is sticky */
.elementor-section.elementor-sticky--effects .menu,
.elementor-widget-wrap.elementor-sticky--effects .menu,
.elementor-container.elementor-sticky--effects .menu {
  background-color: #E6E7ED !important; /* Updated sticky background color */
}

.elementor-section.elementor-sticky--effects .menu-logo,
.elementor-widget-wrap.elementor-sticky--effects .menu-logo,
.elementor-container.elementor-sticky--effects .menu-logo {
  background-image: url('https://vs-schubert.de/wp-content/uploads/2025/05/schubert-color.svg') !important; /* URL for the COLORED SVG */
}

/* Text color for menu items when sticky (before hover) - Scenario 1 */
.elementor-section.elementor-sticky--effects .menu-item a,
.elementor-section.elementor-sticky--effects .menu-item > span,
.elementor-widget-wrap.elementor-sticky--effects .menu-item a,
.elementor-widget-wrap.elementor-sticky--effects .menu-item > span,
.elementor-container.elementor-sticky--effects .menu-item a,
.elementor-container.elementor-sticky--effects .menu-item > span {
  color: black !important; /* Text color changes to black when sticky (before hover) */
}

/* Hover effects for menu items WHEN STICKY - Scenario 1 */
.elementor-section.elementor-sticky--effects .menu-item a:hover,
.elementor-section.elementor-sticky--effects .menu-item > span:hover,
.elementor-widget-wrap.elementor-sticky--effects .menu-item a:hover,
.elementor-widget-wrap.elementor-sticky--effects .menu-item > span:hover,
.elementor-container.elementor-sticky--effects .menu-item a:hover,
.elementor-container.elementor-sticky--effects .menu-item > span:hover {
  color: white !important; /* Keep text white on hover, even when sticky */
  background-color: #AB1C2C !important; /* Keep hover background color, even when sticky */
  transform: scale(1.1); /* Keep grow effect */
}

/* Mobile Menu Trigger Icon color when sticky - Scenario 1 */
.elementor-section.elementor-sticky--effects .menu-mobile-trigger .elementor-icon {
  color: black !important; /* Icon color when sticky */
}
.elementor-section.elementor-sticky--effects .menu-mobile-trigger .elementor-icon svg,
.elementor-section.elementor-sticky--effects .menu-mobile-trigger .elementor-icon svg path {
    fill: black !important; /* SVG path fill when sticky */
}


/* Scenario 2: If the MENU WIDGET ITSELF is made sticky */
.elementor-widget-nav-menu.elementor-sticky--effects .menu {
   background-color: #E6E7ED !important; /* Updated sticky background color */
}
.elementor-widget-nav-menu.elementor-sticky--effects .menu-logo {
  background-image: url('https://vs-schubert.de/wp-content/uploads/2025/05/schubert-color.svg') !important; /* URL for the COLORED SVG */
}

/* Text color for menu items when sticky (before hover) - Scenario 2 */
.elementor-widget-nav-menu.elementor-sticky--effects .menu-item a,
.elementor-widget-nav-menu.elementor-sticky--effects .menu-item > span {
  color: black !important; /* Text color changes to black when sticky (before hover) */
}

/* Hover effects for menu items WHEN STICKY - Scenario 2 */
.elementor-widget-nav-menu.elementor-sticky--effects .menu-item a:hover,
.elementor-widget-nav-menu.elementor-sticky--effects .menu-item > span:hover {
  color: white !important;
  background-color: #AB1C2C !important;
  transform: scale(1.1);
}

/* Mobile Menu Trigger Icon color when sticky - Scenario 2 */
.elementor-widget-nav-menu.elementor-sticky--effects .menu-mobile-trigger .elementor-icon {
  color: black !important; /* Icon color when sticky */
}
.elementor-widget-nav-menu.elementor-sticky--effects .menu-mobile-trigger .elementor-icon svg,
.elementor-widget-nav-menu.elementor-sticky--effects .menu-mobile-trigger .elementor-icon svg path {
    fill: black !important; /* SVG path fill when sticky */
}

/* A more general approach if '.menu' itself gets the sticky class directly */
.menu.elementor-sticky--effects {
  background-color: #E6E7ED !important; /* Updated sticky background color */
}

.menu.elementor-sticky--effects .menu-logo {
  background-image: url('https://vs-schubert.de/wp-content/uploads/2025/05/schubert-color.svg') !important; /* URL for the COLORED SVG */
}

/* Text color for menu items when sticky (before hover) - General approach */
.menu.elementor-sticky--effects .menu-item a,
.menu.elementor-sticky--effects .menu-item > span {
  color: black !important; /* Text color changes to black when sticky (before hover) */
}

/* Hover effects for menu items WHEN STICKY - General approach */
.menu.elementor-sticky--effects .menu-item a:hover,
.menu.elementor-sticky--effects .menu-item > span:hover {
  color: white !important;
  background-color: #AB1C2C !important;
  transform: scale(1.1);
}

/* Mobile Menu Trigger Icon color when sticky - General approach */
.menu.elementor-sticky--effects .menu-mobile-trigger .elementor-icon {
  color: black !important; /* Icon color when sticky */
}
.menu.elementor-sticky--effects .menu-mobile-trigger .elementor-icon svg,
.menu.elementor-sticky--effects .menu-mobile-trigger .elementor-icon svg path {
    fill: black !important; /* SVG path fill when sticky */
}

/*
  Important Notes:
  1. Combined Styles: This CSS block now includes styles for the overall menu sticky behavior
     (background, logo swap) and the menu item hover effects (grow, text/background color change).
  2. Logo SVG Source Change: Uses `background-image` to switch between two SVG files for your logo.
  3. **CRITICAL - SVG URLs**:
     - WHITE SVG: `https://vs-schubert.de/wp-content/uploads/2025/05/schubert-weiss.svg`
     - COLORED SVG: `https://vs-schubert.de/wp-content/uploads/2025/05/schubert-color.svg`
     - Verify the `2025/05/` path in URLs and ensure files exist.
  4. HTML Structure for Logo: `.menu-logo` (which has `position: relative`) should be a container.
     **For clickability**:
       - The `.elementor-widget-container` inside `.menu-logo` is styled to fill its parent.
       - The `<a>` tag inside `.elementor-widget-container` is styled as an absolute positioned overlay
         (width: 100%, height: 100%, z-index: 1) to make the logo area clickable.
       - The `<img>` tag inside this `<a>` tag is hidden using `.menu-logo .elementor-widget-container a img { display: none !important; }`.
  5. Image Transition: Logo swap via `background-image` is abrupt, not a fade.
  6. Sticky Class: Adjust `.elementor-sticky--effects` if Elementor uses a different class.
     Use browser developer tools to inspect and find the correct class.
  7. Specificity & `!important`: Used to override potential conflicting styles.
  8. Transitions & Delay: Transition durations for menu background and item color are 0.15s with a 0.1s delay.
     Mobile menu trigger icon transition delay has been removed to harmonize with the instant logo swap.
     Its color/fill will now start changing immediately with a 0.15s duration.
  9. Menu Item Hover:
     - Base styles for `.menu-item a` include padding, `display: inline-block`, etc.
     - Hover includes `transform: scale(1.1)`, `color: white`, and `background-color: #AB1C2C`.
     - Sticky state hover effects are consistent.
  10. Mobile Menu Trigger:
      - Styles now target `.menu-mobile-trigger .elementor-icon` for the `color` property to override Elementor's default.
      - Fallback styles for `.menu-mobile-trigger .elementor-icon svg path` using `fill` are also included.
      - This assumes your `.menu-mobile-trigger` class is on a wrapper around Elementor's icon structure.
      - **If the SVG icon itself has inline `fill` attributes on its `<path>` elements, those might still take precedence.**
        The ideal solution for SVGs is often to ensure their paths use `fill="currentColor"` or have no fill attributes,
        allowing CSS `color` on a parent (like `.elementor-icon`) to dictate the visual color.
        Alternatively, ensure the SVG code itself is clean of inline fills if you want the `svg path { fill: ... }` rules to work reliably.
*//* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Manrope';
	font-display: auto;
	src: url('https://vs-schubert.de/wp-content/uploads/2024/12/Manrope-VariableFont_wght.ttf') format('truetype');
}
/* End Custom Fonts CSS */