/**
 * van den Boom GmbH - Custom Styles
 * 
 * Professionelle Theme-Styles ohne Editor-Interferenzen
 */

/* ==========================================================================
   CSS VARIABLEN
   ========================================================================== */
:root {
  /* Elementor Global Colors – Landingpage-Design (Orange/Türkis) */
  --e-global-color-primary: #091c26;     /* Überschriften, wichtiger Text */
  --e-global-color-secondary: #79D4CC;   /* Sekundärer Akzent – Türkis (Icons, Checkmarks) */
  --e-global-color-text: #555555;        /* Fließtext */
  --e-global-color-accent: #e37403;      /* Primärer Akzent – Orange (CTA, Buttons) */
  --e-global-color-c287ab6: #F9F9F9;     /* Heller Hintergrund – Off-White */
  --e-global-color-section_bg_2: #091c26; /* Navigation / dunkle Bereiche */
  
  /* VDB Theme Farben (kompatibel mit Elementor) */
  --vdb-primary: #091c26;        /* Dunkles Blau/Grau – Überschriften */
  --vdb-secondary: #79D4CC;      /* Türkis – Icons, sekundäre Akzente */
  --vdb-accent: #e37403;         /* Orange – primäre CTAs, Buttons */
  --vdb-text: #555555;           /* Fließtext */
  --vdb-text-heading: #091c26;   /* Überschriften */
  --vdb-text-light: #666666;     /* Leicht abgesetzter Text */
  --vdb-background: #ffffff;     /* Weißer Hintergrund */
  --vdb-background-alt: #F9F9F9; /* Heller Grau-Hintergrund */
  --vdb-border: #e5e5e5;         /* Rahmenfarbe */
  --vdb-border-subtle: rgba(0, 0, 0, 0.06); /* Dezente Trennlinie (wie im Design) */
  --vdb-elementor-border: #E8EDF1; /* Elementor Randfarbe */
  --vdb-button-secondary-bg: #f4f3f3; /* Sekundärer Button – Sekundärfarbe */
  --vdb-accent-hover: #E07A0E;   /* Orange Hover-Zustand */
  --vdb-orange-hover: #E07A0E;   /* Orange Hover (Alias) */
  
  /* Abstände */
  --vdb-spacing-xs: 0.5rem;
  --vdb-spacing-sm: 1rem;
  --vdb-spacing-md: 2rem;
  --vdb-spacing-lg: 3rem;
  --vdb-spacing-xl: 4rem;
  
  /* Elementor Container Standard-Abstände */
  --vdb-container-margin-horizontal: 25px;  /* Nur links/rechts Abstand */
  --vdb-container-margin-nested: 15px;      /* Verschachtelte Container */
  
  /* Schriften – Roboto als Standard */
  --vdb-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --vdb-font-size-sm: 0.875rem;
  --vdb-font-size-base: 1rem;
  --vdb-font-size-lg: 1.125rem;
  --vdb-font-size-xl: 1.5rem;
  
  /* Schatten */
  --vdb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --vdb-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  /* Border Radius */
  --vdb-radius-sm: 4px;
  --vdb-radius-md: 8px;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Text Utilities */
.vdb-text-primary { color: var(--vdb-primary); }
.vdb-text-secondary { color: var(--vdb-secondary); }
.vdb-text-accent { color: var(--vdb-accent); }

/* Background Utilities */
.vdb-bg-primary { background-color: var(--vdb-primary); }
.vdb-bg-secondary { background-color: var(--vdb-secondary); }
.vdb-bg-accent { background-color: var(--vdb-accent); }

/* Spacing Utilities */
.vdb-mt-sm { margin-top: var(--vdb-spacing-sm); }

/* ==========================================================================
   ELEMENTOR GLOBAL COLOR OVERRIDES
   ========================================================================== */

/* Elementor Text Color Override – Fließtext #555555, Überschriften #1E2A3A */
/* Nur für Elemente ohne explizite Farbeinstellungen */
.elementor-widget-text-editor:not([style*="color"]),
.elementor-widget-text-editor p:not([style*="color"]),
.elementor-text-editor:not([style*="color"]),
.elementor-text-editor p:not([style*="color"]),
.elementor-widget-heading .elementor-heading-title:not([style*="color"]),
.elementor-heading-title:not([style*="color"]),
body.elementor-default {
  color: var(--e-global-color-text, #555555);
}

/* Elementor Global Typography – Landingpage-Farben */
.elementor-kit-6 {
  --e-global-color-primary: #091c26;
  --e-global-color-secondary: #79D4CC;
  --e-global-color-text: #555555;
  --e-global-color-accent: #e37403;
  --e-global-color-c287ab6: #F9F9F9;
}

/* Standard Text- und Überschriftfarben für das gesamte Theme */
/* Nur für Elemente ohne explizite Farbdefinitionen */
body:not([style*="color"]),
p:not([style*="color"]):not([class*="color"]),
span:not([style*="color"]):not([class*="color"]),
div:not([style*="color"]):not([class*="color"]) {
  color: var(--e-global-color-text, #555555);
}

/* Überschriften in dunklem Blau/Grau (Landingpage-Design) */
h1:not([style*="color"]):not([class*="color"]),
h2:not([style*="color"]):not([class*="color"]),
h3:not([style*="color"]):not([class*="color"]),
h4:not([style*="color"]):not([class*="color"]),
h5:not([style*="color"]):not([class*="color"]),
h6:not([style*="color"]):not([class*="color"]) {
  color: var(--e-global-color-primary, #091c26);
}

/* Elementor spezifische Selektoren für konsistente Farbgebung */
.elementor *:not(.elementor-icon):not(.elementor-icon-box-icon) {
  color: inherit;
}

/* Links mit Akzentfarbe (Orange) */
a {
  color: var(--e-global-color-accent, #e37403);
}

a:hover {
  color: var(--vdb-accent-hover, #E07A0E);
}

/* ==========================================================================
   ELEMENTOR CONTAINER STANDARD-ABSTÄNDE
   ========================================================================== */

/* Standard horizontaler Padding nur für Elementor Sections - 25px links/rechts
   Nur für die Section selbst, NICHT für Container oder Elemente innerhalb */
.elementor-section:not(.vdb-no-padding):not(.vdb-no-padding-horizontal):not(.vdb-no-padding-left):not(.vdb-no-padding-right):not([style*="padding"]) {
  padding-left: var(--vdb-container-margin-horizontal);
  padding-right: var(--vdb-container-margin-horizontal);
}

/* Für neuere Elementor Container - nur Top-Level Sections */
.elementor-element.e-con:not(.e-con .e-con):not(.vdb-no-padding):not(.vdb-no-padding-horizontal):not(.vdb-no-padding-left):not(.vdb-no-padding-right):not([style*="padding"]) {
  padding-left: var(--vdb-container-margin-horizontal);
  padding-right: var(--vdb-container-margin-horizontal);
}

/* Full Width Sections - kein horizontaler Padding */
.elementor-section.elementor-section-full_width {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.elementor-element.e-con.e-con-full {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Container innerhalb von Sections - KEIN automatisches Padding */
/* Alle Elemente innerhalb von Sections sollen standardmäßig kein zusätzliches Padding bekommen */
/* Nur .elementor-section und Top-Level .e-con Elemente bekommen das 25px Standard-Padding */

/* Mobile Responsive - kleinere Padding auf kleinen Bildschirmen - nur für Sections */
@media (max-width: 768px) {
  .elementor-section:not(.vdb-no-padding):not(.vdb-no-padding-horizontal):not(.vdb-no-padding-left):not(.vdb-no-padding-right):not([style*="padding"]),
  .elementor-element.e-con:not(.e-con .e-con):not(.vdb-no-padding):not(.vdb-no-padding-horizontal):not(.vdb-no-padding-left):not(.vdb-no-padding-right):not([style*="padding"]) {
    padding-left: calc(var(--vdb-container-margin-horizontal) / 2);
    padding-right: calc(var(--vdb-container-margin-horizontal) / 2);
  }
}

/* Utility Classes für manuelles Überschreiben */
.vdb-container-no-horizontal-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.vdb-container-large-horizontal-padding {
  padding-left: calc(var(--vdb-container-margin-horizontal) * 1.5) !important;
  padding-right: calc(var(--vdb-container-margin-horizontal) * 1.5) !important;
}
.vdb-mb-sm { margin-bottom: var(--vdb-spacing-sm); }
.vdb-mt-md { margin-top: var(--vdb-spacing-md); }
.vdb-mb-md { margin-bottom: var(--vdb-spacing-md); }

/* ==========================================================================
   BODY & LAYOUT
   ========================================================================== */

/* Theme Body Styling – helles Design, Außenbereich hellgrau */
body.van-den-boom-theme,
body,
html {
  background-color: #F5F5F5 !important;
  min-height: 100vh;
  color: var(--vdb-text);
  font-family: var(--vdb-font-family);
  margin: 0;
  padding: 0;
}

/* Hauptcontainer für bessere Kontrolle - NUR FRONTEND */
 #page,
.site {
  display: block;
  background-color: #F5F5F5;
}

/* Content-Bereich - NUR FRONTEND */
 #content,
 main {
  display: block;
  background-color: #F5F5F5;
}

/* WordPress Admin Bar Anpassung - entfernt da Header nicht mehr sticky ist */

/* Responsive Anpassungen */
@media (max-width: 1024px) {
  .site-header,
  .site-content,
  .hero-section,
  .site-footer {
    width: 100% !important;
  }

  /* Überschreibe die 20px Margin-Regel für mobile */
  html body .site-header,
  html body .site-content,
  html body .content-section,
  html body .hero-section,
  html body .elementor-section,
  html body .site-footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Content-Bereich volle Breite nutzen */
  html body .site-content,
  html body .content-section,
  html body .hero-section,
  html body .elementor-section {
    max-width: 100% !important;
    width: 100% !important;
  }

  .site-header {
    padding: 15px 20px !important;
  }
  

}

/* Elementor spezifische Anpassungen */
.elementor-page .site {
  display: block; /* Elementor übernimmt das Layout */
}

.elementor-page .site-content {
  flex: none; /* Elementor übernimmt das Layout */
}

/* ==========================================================================
   HEADER NAVIGATION STYLES (integriert in header-inner)
   ========================================================================== */

/* Header Inner – zentrierter Inhalt, volle Breite nutzend */
.header-inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: min(1440px, 96vw) !important;
  margin: 0 auto !important;
  padding: 1rem clamp(20px, 4vw, 48px) !important;
  min-height: 64px !important;
  box-sizing: border-box !important;
}

/* Header Navigation */
.header-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  height: 100%;
  padding-top: 2px; /* 3px nach unten verschieben */
}

/* Header Navigation Menu */
.header-nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.header-nav-menu li {
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   MENÜ: Bullets entfernen + Desktop-Hover für Dropdowns
   ========================================================================== */

/* Menü-Listen: Bullets/Einzüge entfernen (Elementor + WP Menüs) */
.elementor-widget-nav-menu .elementor-nav-menu,
.elementor-widget-nav-menu .elementor-nav-menu ul,
.elementor-widget-nav-menu .elementor-nav-menu li,
.elementor-nav-menu,
.elementor-nav-menu ul,
.elementor-nav-menu li,
.elementor-nav-menu--dropdown ul,
.elementor-nav-menu--dropdown li,
.header-nav-menu,
.header-nav-menu ul,
.header-nav-menu li,
#menu-hauptmenue,
#menu-hauptmenue ul,
#menu-hauptmenue li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Manche Browser/Styles setzen Marker trotz list-style — das killt sie zuverlässig */
.elementor-nav-menu li::marker,
.header-nav-menu li::marker,
#menu-hauptmenue li::marker {
  color: transparent;
}

/* Desktop (nicht mobile): Dropdowns öffnen erst beim Hover/Fokus */
@media (min-width: 997px) {
  /* Fallback-Header-Menü (wp_nav_menu) */
  .header-nav-menu li.menu-item-has-children {
    position: relative;
  }

  .header-nav-menu li.menu-item-has-children > .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1100;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--vdb-border-subtle, rgba(0, 0, 0, 0.06));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 10px 0;
  }

  .header-nav-menu li.menu-item-has-children:hover > .sub-menu,
  .header-nav-menu li.menu-item-has-children:focus-within > .sub-menu {
    display: block;
  }

  /* 3. Ebene (und tiefer): nach rechts öffnen */
  .header-nav-menu .sub-menu li.menu-item-has-children {
    position: relative;
  }

  .header-nav-menu .sub-menu li.menu-item-has-children > .sub-menu {
    top: 0;
    left: 100%;
    margin-left: 6px;
  }

  .header-nav-menu .sub-menu li.menu-item-has-children:hover > .sub-menu,
  .header-nav-menu .sub-menu li.menu-item-has-children:focus-within > .sub-menu {
    display: block;
  }

  .header-nav-menu .sub-menu a {
    padding: 10px 14px !important;
    white-space: nowrap;
  }

  /* Elementor Nav Menu (Main) */
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children {
    position: relative;
  }

  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1100;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--vdb-border-subtle, rgba(0, 0, 0, 0.06));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 10px 0;
  }

  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu,
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:focus-within > .sub-menu {
    display: block;
  }

  /* Elementor: 3. Ebene (und tiefer) nach rechts öffnen */
  .elementor-nav-menu--main .elementor-nav-menu .sub-menu li.menu-item-has-children {
    position: relative;
  }

  .elementor-nav-menu--main .elementor-nav-menu .sub-menu li.menu-item-has-children > .sub-menu {
    top: 0;
    left: 100%;
    margin-left: 6px;
  }

  .elementor-nav-menu--main .elementor-nav-menu .sub-menu li.menu-item-has-children:hover > .sub-menu,
  .elementor-nav-menu--main .elementor-nav-menu .sub-menu li.menu-item-has-children:focus-within > .sub-menu {
    display: block;
  }

  .elementor-nav-menu--main .elementor-nav-menu .sub-menu a {
    padding: 10px 14px !important;
    white-space: nowrap;
  }
}

/* Untermenüs kennzeichnen (Pfeil) */
.header-nav-menu li.menu-item-has-children > a,
.elementor-nav-menu li.menu-item-has-children > a {
  position: relative;
  padding-right: calc(1.35rem + 18px) !important;
}

/* Top-Level: Pfeil nach unten */
.header-nav-menu > li.menu-item-has-children > a::after,
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > a::after,
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > a.elementor-item::after,
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > a > .elementor-item::after {
  content: "▾" !important;
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  line-height: 1;
  opacity: 0.8;
  pointer-events: none;
}

/* In tieferen Ebenen eher Richtung "rechts" wirken lassen */
.header-nav-menu .sub-menu li.menu-item-has-children > a::after,
.elementor-nav-menu .sub-menu li.menu-item-has-children > a::after,
.elementor-nav-menu--main .elementor-nav-menu .sub-menu li.menu-item-has-children > a::after,
.elementor-nav-menu--main .elementor-nav-menu .sub-menu li.menu-item-has-children > a.elementor-item::after,
.elementor-nav-menu--main .elementor-nav-menu .sub-menu li.menu-item-has-children > a > .elementor-item::after {
  content: "▸" !important;
  transform: translateY(-50%);
  right: -2px;
  pointer-events: none;
}

.header-nav-menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--vdb-primary, #333) !important;
  text-decoration: none !important;
  font-family: var(--vdb-font-family);
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  transition: color 0.2s ease;
}

#menu-hauptmenue a,
.menu-item a,
.header-navigation .menu-item a {
  display: block;
  padding: 0.5rem 0.75rem !important;
  color: var(--vdb-primary, #333) !important;
  text-decoration: none !important;
  font-family: var(--vdb-font-family);
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  transition: color 0.2s ease;
}

.header-nav-menu a:hover,
#menu-hauptmenue a:hover,
.menu-item a:hover,
.header-navigation .menu-item a:hover {
  color: var(--vdb-accent, #e37403) !important;
  text-decoration: none !important;
}

/* Letzter Menüpunkt als CTA-Button (Kostenfreie Erstberatung) */
.header-navigation .header-nav-menu > li:last-child > a,
.header-navigation .header-nav-menu > li:last-child > a:visited,
.header-navigation .header-nav-menu > li:last-child > a:active,
.header-nav-menu > li:last-child > a,
.header-nav-menu > li:last-child > a:visited,
.header-nav-menu > li:last-child > a:active,
#header-nav-menu > li:last-child > a,
#header-nav-menu > li:last-child > a:visited,
#header-nav-menu > li:last-child > a:active {
  background-color: var(--vdb-accent, #e37403) !important;
  color: #ffffff !important;
  border-radius: 10px;
  padding: 0.55rem 1.05rem !important;
  margin-left: 0.35rem;
  box-shadow: 0 6px 16px rgba(218, 145, 12, 0.24);
  border: 1px solid transparent;
}

.header-nav-menu > li:last-child > a:hover,
#header-nav-menu > li:last-child > a:hover {
  background-color: var(--vdb-accent-hover, #E07A0E) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(218, 145, 12, 0.32);
}

/* Hover/Fokus immer weiß lassen (sonst greift globale Hover-Regel) */
.header-navigation .header-nav-menu > li:last-child > a:hover,
.header-navigation .header-nav-menu > li:last-child > a:focus,
.header-navigation .header-nav-menu > li:last-child > a:focus-visible,
.header-nav-menu > li:last-child > a:hover,
.header-nav-menu > li:last-child > a:focus,
.header-nav-menu > li:last-child > a:focus-visible,
#header-nav-menu > li:last-child > a:hover,
#header-nav-menu > li:last-child > a:focus,
#header-nav-menu > li:last-child > a:focus-visible {
  color: #ffffff !important;
}

.header-nav-menu > li:last-child.current-menu-item > a,
.header-nav-menu > li:last-child.current_page_item > a {
  color: #ffffff !important;
}

/* CTA-Link-Farbe nochmals hart überschreiben (Spezifität/Reihenfolge) */
html body .header-navigation .header-nav-menu > li:last-child > a,
html body .header-navigation .header-nav-menu > li:last-child > a:visited,
html body .header-navigation .header-nav-menu > li:last-child > a:hover,
html body .header-navigation .header-nav-menu > li:last-child > a:focus,
html body .header-navigation .header-nav-menu > li:last-child > a:focus-visible,
html body .header-navigation .header-nav-menu > li:last-child > a:active {
  color: #ffffff !important;
}

/* Elementor Nav Menu: letzter Punkt als CTA ggf. ebenfalls immer weiß */
html body .elementor-nav-menu--main .elementor-nav-menu > li:last-child > a,
html body .elementor-nav-menu--main .elementor-nav-menu > li:last-child > a:visited,
html body .elementor-nav-menu--main .elementor-nav-menu > li:last-child > a:hover,
html body .elementor-nav-menu--main .elementor-nav-menu > li:last-child > a:focus,
html body .elementor-nav-menu--main .elementor-nav-menu > li:last-child > a:focus-visible,
html body .elementor-nav-menu--main .elementor-nav-menu > li:last-child > a:active {
  color: #ffffff !important;
}

/* Mobile Responsive für Header Navigation */
@media (max-width: 1024px) {
  .header-nav-menu a,
  #menu-hauptmenue a,
  .menu-item a,
  .header-navigation .menu-item a {
    padding: 8px 6px;
    font-size: 0.8rem;
    font-weight: 400;
  }
}

@media (max-width: 768px) {
  html body .site-header,
  html body header,
  html body #site-header {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 15px 20px !important;
  }
  

  
  html body .site-header .header-inner,
  html body .header-inner {
    max-width: none !important;
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    margin: 0 !important;
  }
  
  .site-branding {
    flex: 0 0 auto;
    text-align: left;
  }
  
  .header-navigation {
    width: auto;
    justify-content: flex-end;
  }
  
  .header-nav-menu a,
  #menu-hauptmenue a,
  .menu-item a,
  .header-navigation .menu-item a {
    padding: 8px 10px;
    font-size: 0.75rem;
    font-weight: 400;
  }
}

/* ==========================================================================
   HEADER STYLES
   ========================================================================== */

/* Header – modern, volle Breite, dezenter Schatten statt Border */
.site-header,
header {
  background-color: #fff !important;
  padding: 0 !important;
  margin-top: 0 !important;
  position: relative !important;
  z-index: 1000 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: auto !important;
  border: none !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) !important; /* dezente Trennlinie */
  display: block !important;
}

body .site-header,
body header,
#site-header {
  margin-top: 0 !important;
  display: block !important;
}

html body .site-header,
html body header,
html body #site-header {
  margin-top: 0 !important;
  display: block !important;
}

/* ==========================================================================
   STICKY HEADER (ohne Content-Jump)
   ========================================================================== */

/*
  Wichtig: "sticky" bleibt im normalen Dokumentfluss (anders als fixed),
  dadurch rutscht der Content nicht nach oben.
*/
html body .site-header,
html body #site-header,
html body header.site-header,
html body .elementor-location-header,
html body .elementor-section[data-id="header-section"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 2000 !important; /* über Content/Dropdowns */
}

/* WordPress Admin Bar berücksichtigen */
body.admin-bar .site-header,
body.admin-bar #site-header,
body.admin-bar header.site-header,
body.admin-bar .elementor-location-header,
body.admin-bar .elementor-section[data-id="header-section"] {
  top: 32px !important;
}

@media (max-width: 782px) {
  body.admin-bar .site-header,
  body.admin-bar #site-header,
  body.admin-bar header.site-header,
  body.admin-bar .elementor-location-header,
  body.admin-bar .elementor-section[data-id="header-section"] {
    top: 0 !important;
  }
}

/* Verstecke Elementor Header wenn Fallback Header aktiv ist */
body:not(.elementor-page) .elementor-location-header,
.elementor-location-header.elementor-hidden {
  display: none !important;
}


/* Logo/Site Title Styling */
.site-header .site-branding {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  min-height: auto !important;
}

.site-header .site-title {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  min-height: auto !important;
  margin: 0 !important;
}

.site-header .site-title a,
.site-header .logo {
  font-weight: bold !important;
  font-size: 1.4rem !important; /* Vergrößerte Schrift für Logo */
  color: var(--vdb-text) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  min-height: 50px !important;
}

/* Logo Styling */
.site-logo {
  height: 40px !important; /* Gleiche Höhe wie der Text vorher */
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
}

/* Navigation Links - NUR FRONTEND (Nav-Leiste: Text #333333, normal nicht fett) */
 .site-header nav a,
 .site-header .header-nav a {
  color: #333333 !important;
  text-decoration: none !important;
  margin-left: 25px !important;
  font-family: var(--vdb-font-family);
  font-weight: 400 !important;
  font-size: 1.1rem !important;
}

.site-header nav a:hover,
.site-header .header-nav a:hover {
  text-decoration: underline !important;
}

/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */

/* Footer – modern, volle Breite, dezenter Abschluss */
.site-footer,
footer,
#site-footer {
  display: block !important;
  visibility: visible !important;
  background-color: #fafafa !important;
  color: #333333 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  font-size: 0.9rem !important;
  position: relative !important;
  z-index: 1 !important;
  border: none !important;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06) !important; /* dezente Linie oben */
}

/* Footer Inner – zentrierter Inhalt */
.site-footer .footer-inner,
.site-footer > div {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  max-width: min(1440px, 96vw) !important;
  margin: 0 auto !important;
  padding: 1.5rem clamp(20px, 4vw, 48px) !important;
  box-sizing: border-box !important;
  gap: 1rem !important;
}

/* Fallback Footer falls Hello Elementor Footer nicht funktioniert */
body:not(.elementor-page) .site-footer:empty:after {
  content: "© 2024 van den Boom GmbH";
  display: block;
  text-align: center;
  color: #333333;
  padding: 20px;
}

/* Footer Text - dunkle Schrift (helles Design) */
.site-footer,
.site-footer *,
footer,
footer * {
  color: #333333 !important;
}

/* Footer Links */
.site-footer a,
footer a {
  color: #333333 !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.site-footer a:hover,
footer a:hover {
  color: var(--vdb-accent, #e37403) !important;
  text-decoration: none !important;
}

/* Copyright Links */
.site-footer .copyright a,
footer .copyright a {
  color: #555555 !important;
}

.site-footer .copyright a:hover,
footer .copyright a:hover {
  color: var(--vdb-accent, #F8931F) !important;
  text-decoration: none !important;
}

/* Elementor Footer Widgets */
.elementor-location-footer,
.elementor-location-footer *,
.site-footer .elementor-widget,
.site-footer .elementor-widget * {
  color: #333333 !important;
}

/* Elementor Footer Links */
.elementor-location-footer a,
.site-footer .elementor-widget a {
  color: #333333 !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.elementor-location-footer a:hover,
.site-footer .elementor-widget a:hover {
  color: var(--vdb-accent, #F8931F) !important;
  text-decoration: none !important;
}

/* Footer Navigation/Menu Links – normal, nicht fett */
.site-footer .menu a,
.site-footer nav a,
footer .menu a,
footer nav a {
  color: #333333 !important;
  font-family: var(--vdb-font-family);
  font-weight: 400 !important;
  padding: 5px 10px !important;
  display: inline-block !important;
  transition: color 0.3s ease !important;
}

.site-footer .menu a:hover,
.site-footer nav a:hover,
footer .menu a:hover,
footer nav a:hover {
  color: var(--vdb-accent, #e37403) !important;
  text-decoration: none !important;
}

/* ==========================================================================
   CONTENT SECTIONS
   ========================================================================== */

/* Content Sections für Elementor-Kompatibilität */
.content-section,
.elementor-section {
  max-width: 1024px;
  margin: 0 auto;
  background: white;
  padding: 0; /* Innenabstand wie im Header */
}

/* Container Grid-Layout - gleiche Regeln wie Sections */
.elementor-element.e-con:not(.e-con .e-con) {
  max-width: 1024px !important;
  margin: 0 auto !important;
  background: white;
  padding: 0;
}

/* Nur für Top-Level Elementor Sections – dezente Linien (wie im Design) */
.elementor-section:not(.elementor-inner-section) {
  border-left: 1px solid var(--vdb-border-subtle);
  border-right: 1px solid var(--vdb-border-subtle);
}

/* Container Border - nur für Top-Level Container */
.elementor-element.e-con:not(.e-con .e-con):not(.elementor-inner-section) {
  border-left: 1px solid var(--vdb-border-subtle);
  border-right: 1px solid var(--vdb-border-subtle);
}

/* Verschachtelte Elemente haben keinen Border */
.elementor-inner-section,
.elementor-section .elementor-section,
.elementor-container .elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget,
.elementor-widget-wrap {
  border: none !important;
}

/* Spezielle Anpassungen für besseres Layout */
.elementor-section-wrap,
.elementor-inner {
  max-width: 1024px;
  margin: 0 auto;
}

/* Hauptinhalt Container */
.site-content {
  background: transparent;
  max-width: 1024px; /* Gleiche Breite wie Header */
  margin: 0 auto; /* Zentriert */
}

/* Elementor Container Anpassungen für bessere Zentrierung */
.elementor-container {
  max-width: 1024px !important;
  margin: 0 auto !important;
}

/* Content-Bereich Wrapper für konsistente Breite */
#content,
main {
  max-width: 1024px;
  margin: 0 auto;
  width: 100%;
}

.content-section h2,
.elementor-section h2,
.elementor-element.e-con h2 {
  color: var(--vdb-secondary);
  font-weight: 700;
  margin-bottom: 20px;
  font-size: 1.5rem;
}

.content-section p,
.elementor-section p,
.elementor-element.e-con p {
  line-height: 1.5;
  margin-bottom: 9px;
  font-size: 1rem;
}

/* Hero Section Styling */
.hero-section,
.elementor-section.hero,
.elementor-element.e-con.hero {
  background-color: #1b4662; /* Innenfarbe */
  color: white;
  padding: 50px 40px;
  max-width: 1024px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.hero-section h1,
.elementor-section.hero h1,
.elementor-element.e-con.hero h1 {
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.3;
  margin-bottom: 20px;
}

.hero-section p,
.elementor-section.hero p,
.elementor-element.e-con.hero p {
  font-size: 1.1rem;
  margin-bottom: 25px;
  line-height: 1.5;
  max-width: 640px;
}

/* ==========================================================================
   CUSTOM COMPONENTS
   ========================================================================== */

/* Button Styles – nur Theme-Klassen, wenn NICHT Elementor-Button.
   So bleiben border-radius, Textfarbe etc. in Elementor einstellbar. */
.vdb-button:not(.elementor-button),
.cta-button:not(.elementor-button),
.contact-btn:not(.elementor-button) {
  display: inline-block;
  background-color: var(--vdb-accent);
  color: white !important;
  padding: 12px 25px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none !important;
  font-family: var(--vdb-font-family);
  font-size: var(--vdb-font-size-base);
  transition: background-color 0.3s ease;
}

.vdb-button:not(.elementor-button):hover,
.cta-button:not(.elementor-button):hover,
.contact-btn:not(.elementor-button):hover {
  background-color: var(--vdb-orange-hover) !important;
  color: white !important;
  text-decoration: none !important;
}

/* Features Section Styling (für Elementor Widgets) */
.features-section,
.elementor-section.features,
.elementor-element.e-con.features {
  display: flex;
  padding: 0;
  border-bottom: 1px solid var(--vdb-border);
  max-width: 1024px;
  margin: 0 auto;
  background: white;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.feature,
.feature-item {
  flex: 1;
  border-right: 1px solid var(--vdb-border);
  padding: 25px 15px;
  text-align: center;
  font-size: 0.95rem;
}

.feature:last-child,
.feature-item:last-child {
  border-right: none;
}

.feature p,
.feature-item p {
  margin-top: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--vdb-secondary);
}

/* Mobile Responsive für Features */
@media (max-width: 768px) {
  .features-section,
  .elementor-section.features,
  .elementor-element.e-con.features {
    flex-direction: column;
  }
  
  .feature,
  .feature-item {
    border-right: none;
    border-bottom: 1px solid var(--vdb-border);
    padding: 15px 10px;
  }
  
  .feature:last-child,
  .feature-item:last-child {
    border-bottom: none;
  }
}

/* ==========================================================================
   THEME SPECIFIC CLASSES (Optional für manuelle Verwendung)
   ========================================================================== */

/* VDB Theme Button Klasse – nur wenn manuell hinzugefügt, nicht bei Elementor-Buttons */
.vdb-button:not(.elementor-button) {
  background-color: var(--vdb-accent);
  color: white;
  padding: 12px 25px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.vdb-button:not(.elementor-button):hover {
  background-color: var(--vdb-accent-hover);
  color: white;
  text-decoration: none;
}


/* ==========================================================================
   ELEMENTOR PADDING OVERRIDES
   ========================================================================== */

/* Vollständiges Padding entfernen - für Elemente die ganz an den Rand sollen */
.vdb-no-padding,
.elementor-section.vdb-no-padding,
.elementor-container.vdb-no-padding {
  padding: 0 !important;
}

/* Nur horizontales Padding entfernen */
.vdb-no-padding-horizontal,
.elementor-section.vdb-no-padding-horizontal,
.elementor-container.vdb-no-padding-horizontal {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Nur vertikales Padding entfernen */
.vdb-no-padding-vertical,
.elementor-section.vdb-no-padding-vertical,
.elementor-container.vdb-no-padding-vertical {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Nur oben kein Padding */
.vdb-no-padding-top,
.elementor-section.vdb-no-padding-top,
.elementor-container.vdb-no-padding-top {
  padding-top: 0 !important;
}

/* Nur unten kein Padding */
.vdb-no-padding-bottom,
.elementor-section.vdb-no-padding-bottom,
.elementor-container.vdb-no-padding-bottom {
  padding-bottom: 0 !important;
}

/* Nur links kein Padding */
.vdb-no-padding-left,
.elementor-section.vdb-no-padding-left,
.elementor-container.vdb-no-padding-left {
  padding-left: 0 !important;
}

/* Nur rechts kein Padding */
.vdb-no-padding-right,
.elementor-section.vdb-no-padding-right,
.elementor-container.vdb-no-padding-right {
  padding-right: 0 !important;
}

/* Elementor Standard-Margins auch überschreiben wenn nötig */
.vdb-no-margin,
.elementor-section.vdb-no-margin,
.elementor-container.vdb-no-margin {
  margin: 0 !important;
}

/* Für Elemente die über die Container-Breite hinausgehen sollen */
.vdb-full-width {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Kombination: Vollbreite ohne Padding */
.vdb-full-width-no-padding {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Min-Height Overrides */
.vdb-no-min-height,
.elementor-section.vdb-no-min-height {
  min-height: auto !important;
}

.vdb-min-height-auto,
.elementor-section.vdb-min-height-auto {
  min-height: auto !important;
}

.vdb-min-height-none,
.elementor-section.vdb-min-height-none {
  min-height: 0 !important;
}


/* ==========================================================================
   CONTACT FORM STYLES
   ========================================================================== */

/* Contact Form Wrapper - Volle Breite */
.vdb-contact-form-wrapper {
  width: 100%;
  margin: 0;
  padding: 0; /* Kein Padding für volle Breite */
}

/* Contact Form Container - Saubere Grid-Struktur */
.vdb-contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vdb-spacing-sm);
  align-items: start;
  background: transparent;
  width: 100%;
  max-width: none;
}

/* Linke Spalte für Textfelder */
.vdb-form-left {
  display: flex;
  flex-direction: column;
  gap: var(--vdb-spacing-xs); /* Weniger Gap zwischen Feldern */
}

/* Rechte Spalte für Textarea */
.vdb-form-right {
  display: flex;
  flex-direction: column;
}

/* Submit Button Container */
.vdb-form-submit {
  grid-column: 1 / -1;
  margin-top: calc(var(--vdb-spacing-xs) - 10px); /* 10px weniger Abstand nach oben */
  text-align: center; /* Button mittig */
}

/* Form Field Container */
.vdb-form-field {
  display: flex;
  flex-direction: column;
}

/* Labels ausblenden da wir Placeholder verwenden */
.vdb-contact-form label {
  display: none;
}

/* Contact Form 7 Input Fields - alle Varianten abdecken */
.vdb-contact-form input[type="text"],
.vdb-contact-form input[type="email"],
.vdb-contact-form .wpcf7-text,
.vdb-contact-form .wpcf7-email {
  width: 100% !important;
  padding: 8px 12px !important; /* Noch weniger Padding für niedrigere Felder */
  margin-top: 0 !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: var(--vdb-radius-sm) !important;
  font-size: var(--vdb-font-size-base) !important;
  font-family: var(--vdb-font-family) !important;
  color: var(--vdb-text) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
  box-sizing: border-box !important;
  height: 42px !important; /* Feste niedrigere Höhe */
}

/* Textarea separat - höher */
.vdb-contact-form textarea,
.vdb-contact-form .wpcf7-textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  margin-top: 0 !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: var(--vdb-radius-sm) !important;
  font-size: var(--vdb-font-size-base) !important;
  font-family: var(--vdb-font-family) !important;
  color: var(--vdb-text) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
  box-sizing: border-box !important;
}

/* Placeholder Styling für bessere Sichtbarkeit */
.vdb-contact-form input::placeholder,
.vdb-contact-form textarea::placeholder {
  color: rgba(30, 42, 56, 0.6) !important;
  font-style: italic;
}

/* Focus States */
.vdb-contact-form input[type="text"]:focus,
.vdb-contact-form input[type="email"]:focus,
.vdb-contact-form textarea:focus,
.vdb-contact-form .wpcf7-form-control:focus {
  outline: none !important;
  border-color: var(--vdb-accent) !important;
  background-color: white !important;
  box-shadow: 0 0 0 3px rgba(58, 141, 103, 0.3) !important;
}

/* Textarea Specific Styling - höhere Höhe */
.vdb-contact-form textarea,
.vdb-contact-form .wpcf7-textarea {
  min-height: 160px !important; /* Höhere Höhe */
  height: 160px !important;
  resize: vertical !important;
}

/* Submit Button - Maximale Spezifität für Orange (CTA) */
body .vdb-contact-form input[type="submit"],
body .vdb-contact-form .wpcf7-submit,
body .vdb-contact-form-wrapper input[type="submit"],
body .vdb-contact-form-wrapper .wpcf7-submit,
body .vdb-form-submit input[type="submit"],
body .vdb-form-submit .wpcf7-submit,
body div.vdb-contact-form input[type="submit"],
body div.vdb-contact-form .wpcf7-submit,
body .wpcf7-form .vdb-contact-form input[type="submit"],
body .wpcf7-form .vdb-contact-form .wpcf7-submit,
html body .vdb-contact-form input[type="submit"],
html body .vdb-contact-form .wpcf7-submit {
  display: inline-block !important;
  background: var(--vdb-accent, #e37403) !important;
  background-color: var(--vdb-accent, #e37403) !important;
  background-image: none !important;
  background-attachment: initial !important;
  background-origin: initial !important;
  background-clip: initial !important;
  background-size: initial !important;
  background-repeat: initial !important;
  background-position: initial !important;
  color: #ffffff !important;
  padding: 14px 171px !important; /* Spezifisches Padding links/rechts */
  font-weight: 600 !important;
  border: 2px solid var(--vdb-accent, #e37403) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-family: var(--vdb-font-family) !important;
  font-size: 16px !important;
  transition: all 0.3s ease !important;
  margin: 0 !important;
  min-width: 200px !important; /* Breiterer Button */
  box-shadow: 0 2px 4px rgba(248, 147, 31, 0.2) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
  height: auto !important;
  width: auto !important;
}

.vdb-contact-form input[type="submit"]:hover,
.vdb-contact-form .wpcf7-submit:hover,
.vdb-contact-form-wrapper input[type="submit"]:hover,
.vdb-contact-form-wrapper .wpcf7-submit:hover,
.vdb-form-submit input[type="submit"]:hover,
.vdb-form-submit .wpcf7-submit:hover {
  background-color: var(--vdb-accent-hover, #E07A0E) !important;
  background: var(--vdb-accent-hover, #E07A0E) !important;
  background-image: none !important;
  color: white !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Elementor Button Content Wrapper Styling für Contact Form */
.vdb-contact-form .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vdb-contact-form .elementor-button-text {
  font-weight: 600;
  color: white;
}

/* Contact Form 7 Wrapper Styling */
.wpcf7-form .vdb-contact-form .wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
}

/* Contact Form 7 Specific Overrides - alle möglichen Selektoren */
.wpcf7-form .vdb-contact-form input,
.wpcf7-form .vdb-contact-form textarea,
.vdb-contact-form .wpcf7-form-control-wrap input,
.vdb-contact-form .wpcf7-form-control-wrap textarea {
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: var(--vdb-text) !important;
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: var(--vdb-radius-sm) !important;
  font-size: var(--vdb-font-size-base) !important;
  font-family: var(--vdb-font-family) !important;
}

.wpcf7-form .vdb-contact-form input:focus,
.wpcf7-form .vdb-contact-form textarea:focus,
.vdb-contact-form .wpcf7-form-control-wrap input:focus,
.vdb-contact-form .wpcf7-form-control-wrap textarea:focus {
  border-color: var(--vdb-accent) !important;
  background-color: white !important;
  box-shadow: 0 0 0 3px rgba(58, 141, 103, 0.3) !important;
  outline: none !important;
}

/* Error and Success Messages */
.vdb-contact-form .wpcf7-validation-errors,
.vdb-contact-form .wpcf7-mail-sent-ok {
  padding: var(--vdb-spacing-sm);
  border-radius: var(--vdb-radius-sm);
  margin-top: var(--vdb-spacing-sm);
  font-size: var(--vdb-font-size-sm);
}

.vdb-contact-form .wpcf7-validation-errors {
  background-color: #ffeaea;
  border: 1px solid #ff6b6b;
  color: #d63031;
}

.vdb-contact-form .wpcf7-mail-sent-ok {
  background-color: #eafaf1;
  border: 1px solid var(--vdb-accent);
  color: var(--vdb-accent);
}

/* Field Validation Errors */
.vdb-contact-form .wpcf7-not-valid {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1) !important;
}

.vdb-contact-form .wpcf7-not-valid-tip {
  color: #d63031;
  font-size: var(--vdb-font-size-sm);
  margin-top: 4px;
  display: block;
}

/* Mobile Responsive Design for Contact Form */
@media (max-width: 768px) {
  .vdb-contact-form-wrapper {
    padding: var(--vdb-spacing-sm);
  }
  
  .vdb-contact-form {
    grid-template-columns: 1fr; /* Einspaltig auf mobil */
    gap: var(--vdb-spacing-sm);
  }
  
  .vdb-form-left {
    gap: var(--vdb-spacing-xs);
  }
  
  .vdb-contact-form input[type="text"],
  .vdb-contact-form input[type="email"],
  .vdb-contact-form textarea,
  .vdb-contact-form .wpcf7-form-control {
    padding: 10px 14px !important;
    font-size: var(--vdb-font-size-sm) !important;
  }
  
  .vdb-contact-form textarea,
  .vdb-contact-form .wpcf7-textarea {
    min-height: 120px !important;
    height: auto !important;
  }
  
  /* Submit: gleiche/ höhere Spezifität wie Desktop-Regel, damit Mobile wirklich gewinnt */
  html body .vdb-contact-form input[type="submit"],
  html body .vdb-contact-form .wpcf7-submit,
  html body .vdb-contact-form-wrapper input[type="submit"],
  html body .vdb-contact-form-wrapper .wpcf7-submit,
  html body .vdb-form-submit input[type="submit"],
  html body .vdb-form-submit .wpcf7-submit,
  html body div.vdb-contact-form input[type="submit"],
  html body div.vdb-contact-form .wpcf7-submit,
  html body .wpcf7-form .vdb-contact-form input[type="submit"],
  html body .wpcf7-form .vdb-contact-form .wpcf7-submit {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: var(--vdb-font-size-base) !important;
    line-height: 1.25 !important;
    height: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Falls der Submit als <button> kommt: Umbruch erlauben */
  html body .vdb-contact-form button.wpcf7-submit,
  html body .vdb-contact-form-wrapper button.wpcf7-submit,
  html body .vdb-form-submit button.wpcf7-submit,
  html body .wpcf7-form .vdb-contact-form button.wpcf7-submit {
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  
  .vdb-form-submit {
    text-align: center;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --vdb-spacing-md: 1.5rem;
    --vdb-spacing-lg: 2rem;
    --vdb-spacing-xl: 2.5rem;
  }
}

/* ==========================================================================
   BURGER MENU STYLES
   ========================================================================== */

/* Burger Menu Toggle Button - versteckt auf Desktop */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
  transition: all 0.3s ease;
}

.mobile-menu-toggle:focus {
  outline: 2px solid var(--vdb-accent);
  outline-offset: 2px;
}

/* Burger Lines */
.burger-line {
  width: 100%;
  height: 3px;
  background-color: var(--vdb-text);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Burger Animation when active */
.mobile-menu-toggle.active .burger-line:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px);
}

.mobile-menu-toggle.active .burger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .burger-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* Header-inner volle Breite für mittlere Bildschirme */
@media (max-width: 1200px) {
  html body .site-header .header-inner,
  html body .header-inner {
    max-width: none !important;
    width: 100% !important;
  }
}

/* Mobile Menu Styles ab 996px Breite */
@media (max-width: 996px) {

  /* Header/Logo immer weiß (kein grauer Hintergrund im Mobile-Layout) */
  html body .site-header,
  html body #site-header,
  html body .site-header .header-inner,
  html body .header-inner {
    background-color: #ffffff !important;
  }

  .site-branding,
  .site-title,
  .site-title a,
  .site-branding a,
  .site-logo {
    background: transparent !important;
  }
  
  /* Header-inner volle Breite für mobile */
  html body .site-header .header-inner,
  html body .header-inner {
    max-width: none !important;
    width: 100% !important;
  }
  
  /* Burger Button anzeigen */
  .mobile-menu-toggle {
    display: flex;
    order: 2; /* Hamburger nach rechts */
  }
  
  /* Logo nach links */
  .site-branding {
    order: 1;
  }
  
  /* Desktop Navigation verstecken */
  .header-navigation {
    display: block !important; /* wichtig: nicht vertikal zentrieren (Flex-Erbe aus Desktop) */
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    height: 100dvh; /* stabiler auf Mobile/Tablet (Browser-UI) */
    background-color: #ffffff;
    box-shadow: var(--vdb-shadow-md);
    transition: right 0.3s ease;
    z-index: 3000; /* über sticky header (z-index: 2000) */
    padding-top: calc(env(safe-area-inset-top, 0px) + 30px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    box-sizing: border-box;
    overflow-y: auto;
  }
  
  /* Navigation aktiv */
  .header-navigation.active {
    right: 0;
  }
  
  /* Menu Liste vertikal */
  .header-nav-menu {
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 20px !important;
    margin: 0;
    width: 100%;
  }

  /* Absicherung: erster Top-Level Menüpunkt darf nicht "verschluckt" werden */
  .header-navigation .header-nav-menu > li:first-child {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .header-navigation .header-nav-menu > li:first-child > a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Mobile: Submenus bitte einrücken */
  .header-nav-menu .sub-menu {
    display: block; /* Mobile: alles sichtbar (kein Accordion) */
    padding-left: 30px !important;
    margin: 0 !important;
  }

  /* Mobile/Hamburger: Parent-Menüpunkte nur informativ (nicht klickbar) */
  .header-nav-menu li.menu-item-has-children > a,
  .elementor-nav-menu li.menu-item-has-children > a {
    pointer-events: none;
    cursor: default;
    opacity: 0.9;
    font-weight: 700 !important;
  }

  /* (Accordion-Regeln entfernt) */

  .header-nav-menu .sub-menu a {
    padding: 14px 30px 14px 64px !important; /* links stärker eingerückt */
    font-size: 1rem !important;
    font-weight: 500 !important;
  }

  .header-nav-menu .sub-menu .sub-menu {
    padding-left: 18px !important;
  }
  
  .header-nav-menu li {
    border-bottom: 1px solid var(--vdb-border);
    width: 100%;
  }
  
  .header-nav-menu li:last-child {
    border-bottom: none;
  }
  
  .header-nav-menu a {
    padding: 20px 30px !important;
    font-size: 1.1rem !important;
    border-right: none !important;
    display: block;
    color: var(--vdb-text) !important;
    transition: all 0.3s ease;
    width: 100%;
    text-align: left;
  }

  /* Hauptmenü (Top-Level) im Hamburger-Menü: fett (muss #menu-hauptmenue a schlagen) */
  .header-navigation #menu-hauptmenue > li > a,
  .header-navigation .header-nav-menu > li > a {
    font-weight: 700 !important;
  }

  /* Pfeile (Submenu-Indikator) im Hamburger-Menü entfernen */
  .header-nav-menu > li > a::after,
  .header-nav-menu > li.menu-item-has-children > a::after,
  .header-nav-menu .sub-menu li.menu-item-has-children > a::after,
  .header-navigation #menu-hauptmenue > li.menu-item-has-children > a::after,
  .header-navigation #menu-hauptmenue .sub-menu li.menu-item-has-children > a::after,
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > a::after,
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > a.elementor-item::after,
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > a > .elementor-item::after,
  .elementor-nav-menu--main .elementor-nav-menu .sub-menu li.menu-item-has-children > a::after,
  .elementor-nav-menu--main .elementor-nav-menu .sub-menu li.menu-item-has-children > a.elementor-item::after,
  .elementor-nav-menu--main .elementor-nav-menu .sub-menu li.menu-item-has-children > a > .elementor-item::after {
    content: none !important;
    display: none !important;
  }

  /* Mobile CTA (letzter Menüpunkt) als echter Button */
  .header-nav-menu > li:last-child {
    border-bottom: none !important;
    padding: 26px 20px 30px; /* mehr Luft rundum */
  }

  .header-nav-menu > li:last-child > a {
    background: linear-gradient(180deg, var(--vdb-accent, #F8931F) 0%, #e37403 100%) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    box-shadow: 0 14px 30px rgba(218, 145, 12, 0.30) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    padding: 16px 18px !important;
    text-align: center !important;
    margin: auto; /* Außenabstand kommt über das LI-Padding */
    width: 80% !important;
    font-weight: 700 !important;
    font-size: 1.02rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    margin-top: 10px !important;
  }

  .header-nav-menu > li:last-child > a:hover,
  .header-nav-menu > li:last-child > a:focus,
  .header-nav-menu > li:last-child > a:focus-visible {
    background: linear-gradient(180deg, var(--vdb-accent-hover, #E07A0E) 0%, #d86700 100%) !important;
    color: #ffffff !important;
    padding-left: 18px !important; /* verhindert "Slide" durch generelles Hover */
    box-shadow: 0 18px 38px rgba(218, 145, 12, 0.34) !important;
    transform: translateY(-1px);
  }
  
  .header-nav-menu a:hover {
    background-color: var(--vdb-elementor-border);
    color: var(--vdb-accent) !important;
    padding-left: 40px !important;
  }
  
  /* Overlay für Mobile Menu */
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2999; /* unter Menü, über Content */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  
  .mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* Close-Button muss immer erreichbar sein */
  body.mobile-menu-open .mobile-menu-toggle {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--vdb-mobile-menu-gap, 16px));
    right: var(--vdb-mobile-menu-gap, 16px);
    z-index: 3501;
  }
  
  /* Header Layout Anpassungen für Mobile */
  html body .site-header,
  html body header,
  html body #site-header {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  html body .site-header .header-inner,
  html body .header-inner {
    max-width: none !important;
    width: 100% !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
  }
  
  .site-branding {
    flex: 0 0 auto;
    order: 1;
    text-align: left;
  }
  
  .mobile-menu-toggle {
    order: 2;
  }
}


/* Kleinere Bildschirme - weitere Anpassungen */
@media (max-width: 768px) {
  /* Overlay auf "echtem Mobile" nicht abdunkeln */
  .mobile-menu-overlay.active {
    background-color: transparent !important;
  }

  .header-navigation {
    width: 100%;
    right: -100%;
  }

  .mobile-menu-toggle {
    width: 28px;
    height: 28px;
  }
  
  .burger-line {
    height: 2.5px;
  }
  
  .header-nav-menu {
    padding: 15px 0;
  }
  
  .header-nav-menu a {
    padding: 18px 25px !important;
    font-size: 1rem !important;
    text-align: left;
  }
  
  .header-nav-menu a:hover {
    padding-left: 35px !important;
  }
}

/* Sehr kleine Bildschirme */
@media (max-width: 480px) {
  .header-nav-menu {
    padding: 10px 0;
  }
  
  .header-nav-menu a {
    padding: 16px 20px !important;
    font-size: 0.95rem !important;
    text-align: left;
  }
  
  .header-nav-menu a:hover {
    padding-left: 30px !important;
  }
}

/* Body Scroll sperren wenn Mobile Menu geöffnet */
body.mobile-menu-open {
  overflow: hidden;
}

@media (max-width: 1060px) {
  .break-early-container {
    flex-wrap: wrap !important;
  }

  .break-early-container > .elementor-element {
    width: 100% !important;
  }
}


.action-button-start > a{
  max-width: 250px !important;
  margin: auto;
}

@media (max-width: 1060px) and (min-width: 768px){
  .action-button-start {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
}

/* ==========================================================================
   FINAL OVERRIDES: CTA "Kostenfreie Erstberatung" immer weiß
   (am Dateiende, um alle späteren Regeln zu schlagen)
   ========================================================================== */

html body .header-navigation .header-nav-menu > li:last-child > a,
html body .header-navigation .header-nav-menu > li:last-child > a:visited,
html body .header-navigation .header-nav-menu > li:last-child > a:hover,
html body .header-navigation .header-nav-menu > li:last-child > a:focus,
html body .header-navigation .header-nav-menu > li:last-child > a:focus-visible,
html body .header-navigation .header-nav-menu > li:last-child > a:active,
html body .elementor-nav-menu--main .elementor-nav-menu > li:last-child > a,
html body .elementor-nav-menu--main .elementor-nav-menu > li:last-child > a:visited,
html body .elementor-nav-menu--main .elementor-nav-menu > li:last-child > a:hover,
html body .elementor-nav-menu--main .elementor-nav-menu > li:last-child > a:focus,
html body .elementor-nav-menu--main .elementor-nav-menu > li:last-child > a:focus-visible,
html body .elementor-nav-menu--main .elementor-nav-menu > li:last-child > a:active,
html body .action-button-start > a,
html body .action-button-start > a:visited,
html body .action-button-start > a:hover,
html body .action-button-start > a:focus,
html body .action-button-start > a:focus-visible,
html body .action-button-start > a:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .header-navigation .header-nav-menu > li:last-child > a *,
html body .elementor-nav-menu--main .elementor-nav-menu > li:last-child > a *,
html body .action-button-start > a * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}