.elementor-696 .elementor-element.elementor-element-7af0914:not(.elementor-motion-effects-element-type-background), .elementor-696 .elementor-element.elementor-element-7af0914 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-696 .elementor-element.elementor-element-7af0914 > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(180deg, #00000000 0%, #FFFFFF00 100%);opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-696 .elementor-element.elementor-element-7af0914{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:15px 0px 0px 110px;z-index:80;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-696 .elementor-element.elementor-element-d667cc7{width:var( --container-widget-width, 31% );max-width:31%;margin:85px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 40px;padding:0px 0px 0px 0px;--container-widget-width:31%;--container-widget-flex-grow:0;border-style:none;text-align:center;}.elementor-696 .elementor-element.elementor-element-d667cc7.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-696 .elementor-element.elementor-element-d667cc7:hover{border-style:none;}.elementor-696 .elementor-element.elementor-element-d667cc7 img{width:98%;max-width:98%;height:84px;object-fit:scale-down;object-position:center left;opacity:1;transition-duration:2s;border-style:none;}.elementor-696 .elementor-element.elementor-element-d667cc7:hover img{opacity:1;}.elementor-696 .elementor-element.elementor-element-a18f9c26{text-align:center;}.elementor-696 .elementor-element.elementor-element-a18f9c26 img{width:100%;border-style:none;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-696 .elementor-element.elementor-element-253042a{width:var( --container-widget-width, 47.769% );max-width:47.769%;margin:0px -4px calc(var(--kit-widget-spacing, 0px) + 0px) -30px;padding:16px 0px 0px 0px;--container-widget-width:47.769%;--container-widget-flex-grow:0;text-align:start;}.elementor-696 .elementor-element.elementor-element-253042a.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-696 .elementor-element.elementor-element-253042a img{width:60%;max-width:60%;}.elementor-696 .elementor-element.elementor-element-740a2ed{width:var( --container-widget-width, 17.486% );max-width:17.486%;margin:100px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -140px;padding:0px 0px 0px 0px;--container-widget-width:17.486%;--container-widget-flex-grow:0;border-style:none;text-align:start;}.elementor-696 .elementor-element.elementor-element-740a2ed.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-696 .elementor-element.elementor-element-740a2ed:hover{border-style:none;}.elementor-696 .elementor-element.elementor-element-740a2ed img{width:60%;max-width:41%;height:84px;object-fit:contain;object-position:top center;transition-duration:2s;border-style:none;}.elementor-696 .elementor-element.elementor-element-740a2ed:hover img{opacity:1;}.elementor-696:not(.elementor-motion-effects-element-type-background), .elementor-696 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #000000 64%, #F2295B00 100%);}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-widget-theme-site-logo .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}}@media(max-width:767px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-696 .elementor-element.elementor-element-d667cc7{width:var( --container-widget-width, 83.05px );max-width:83.05px;margin:-19px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -47px;--container-widget-width:83.05px;--container-widget-flex-grow:0;text-align:center;}.elementor-696 .elementor-element.elementor-element-d667cc7 img{width:568px;max-width:604px;height:76px;}.elementor-widget-theme-site-logo .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-696 .elementor-element.elementor-element-253042a{width:var( --container-widget-width, 256px );max-width:256px;margin:-50px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -50px;--container-widget-width:256px;--container-widget-flex-grow:0;text-align:start;}.elementor-696 .elementor-element.elementor-element-253042a img{width:90%;}.elementor-696 .elementor-element.elementor-element-740a2ed{width:var( --container-widget-width, 166px );max-width:166px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 35px;padding:0px 0px 0px 0px;--container-widget-width:166px;--container-widget-flex-grow:0;}}/* Start custom CSS for section, class: .elementor-element-7af0914 *//* HEIDT PERFORMANCE - MOBILER HEADER
   Header 696: Logo -> Konfigurator -> Menü-Grafik
   Nur bis 767px; bestehende Links bleiben erhalten.
*/

@media (max-width: 767px) {

  /* Schwarzer Header ohne seitlichen Versatz */
  .elementor-696.elementor-location-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
  }

  .elementor-696 .elementor-element.elementor-element-7af0914 {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 16px 16px 14px !important;

    background: #000 !important;
    border: 0 !important;
    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .elementor-696 .elementor-element-7af0914 > .elementor-background-overlay {
    display: none !important;
  }

  /* Vorhandene Header-Spalte auf volle Breite setzen */
  .elementor-696 .elementor-element-7af0914 > .elementor-container,
  .elementor-696 .elementor-element.elementor-element-33c3f27 {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Alle drei Grafiken mittig UNTEREINANDER */
  .elementor-696 .elementor-element-33c3f27 > .elementor-widget-wrap {
    display: flex !important;
    flex-flow: column nowrap !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 4px !important;

    width: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Negative Abstände und Einflieg-Animationen entfernen */
  .elementor-696 .elementor-widget-image {
    display: block !important;

    position: relative !important;
    inset: auto !important;

    flex: 0 0 auto !important;
    align-self: center !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
    line-height: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    animation: none !important;
  }

  /* 1. Seitenlogo: groß und mittig */
  .elementor-696 .elementor-element.elementor-element-253042a {
    order: 1 !important;
    width: min(100%, 360px) !important;
  }

  /* 2. Konfigurator: direkt darunter, nur etwas kleiner */
  .elementor-696 .elementor-element.elementor-element-d667cc7 {
    order: 2 !important;
    width: min(94%, 340px) !important;
  }

  /* 3. Vorhandene Drei-Streifen-Grafik */
  .elementor-696 .elementor-element.elementor-element-740a2ed {
    order: 3 !important;
    width: 76px !important;
    margin-top: 6px !important;
  }

  /* Links und optionale Elementor-Innenhüllen */
  .elementor-696 .elementor-widget-image > .elementor-widget-container,
  .elementor-696 .elementor-widget-image a {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  /* Originalgrafiken proportional und ohne Beschnitt */
  .elementor-696 .elementor-widget-image img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 auto !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center !important;

    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;

    border: 0 !important;
    box-shadow: none !important;
  }

  /* Menü-Button mit ausreichend großer Tippfläche */
  .elementor-696 .elementor-element-740a2ed a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 48px !important;
  }

  .elementor-696 .elementor-widget-image a:focus-visible {
    outline: 2px solid #FF7A00 !important;
    outline-offset: 4px;
  }

  /* Unsichtbare Sticky-Kopie darf nicht doppelt erscheinen */
  .elementor-696 .elementor-sticky__spacer,
  .elementor-696 .elementor-sticky__spacer * {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* MOBILER HEADER: KOMPAKTER
   Unter den bereits funktionierenden Header-CSS-Code einfügen.
   Grafiken: 60 % der bisherigen Größe.
   Desktop und Menü-Popup bleiben unverändert.
*/

@media (max-width: 767px) {

  /* Oberen und unteren Abstand verkleinern */
  .elementor-696 .elementor-element.elementor-element-7af0914 {
    padding: 10px 16px 8px !important;
  }

  /* Abstand zwischen den Grafiken proportional reduzieren */
  .elementor-696 .elementor-element-33c3f27 > .elementor-widget-wrap {
    gap: 2.4px !important;
  }

  /* Seitenlogo: bisher maximal 360px, jetzt 216px */
  .elementor-696 .elementor-element.elementor-element-253042a {
    width: min(60%, 216px) !important;
  }

  /* Konfigurator: bisher maximal 340px, jetzt 204px */
  .elementor-696 .elementor-element.elementor-element-d667cc7 {
    width: min(56.4%, 204px) !important;
  }

  /* Menü-Grafik: ebenfalls auf 60 % verkleinern */
  .elementor-696 .elementor-element.elementor-element-740a2ed {
    width: 45.6px !important;
    margin-top: 3.6px !important;
  }

  /* Trotz kleinerer Grafik eine größere Tippfläche behalten */
  .elementor-696 .elementor-element-740a2ed a {
    min-height: 44px !important;
  }
}
/* MOBILER HEADER: ZWEI ZEILEN
   Unter den bisher funktionierenden Header-Code einfügen.
   Oben: Logo links, Menü rechts.
   Darunter: Konfigurator mittig.
*/

@media (max-width: 767px) {

  /* Kompakte Außenabstände */
  .elementor-696 .elementor-element.elementor-element-7af0914 {
    padding: 8px 12px 6px !important;
  }

  /* Zwei Zeilen statt drei Grafiken untereinander */
  .elementor-696 .elementor-element-33c3f27 > .elementor-widget-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "logo menue"
      "konfigurator konfigurator" !important;

    align-items: center !important;
    gap: 2px 12px !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Seitenlogo: oben links */
  .elementor-696 .elementor-element.elementor-element-253042a {
    grid-area: logo !important;
    order: 0 !important;
    justify-self: start !important;

    width: min(100%, 216px) !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Drei-Streifen-Grafik: rechts neben dem Logo */
  .elementor-696 .elementor-element.elementor-element-740a2ed {
    grid-area: menue !important;
    order: 0 !important;
    justify-self: end !important;

    width: 45.6px !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Konfigurator: zweite Zeile, mittig unter beiden Elementen */
  .elementor-696 .elementor-element.elementor-element-d667cc7 {
    grid-area: konfigurator !important;
    order: 0 !important;
    justify-self: center !important;

    width: min(100%, 204px) !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Menü bleibt trotz kleiner Grafik gut antippbar */
  .elementor-696 .elementor-element-740a2ed a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
}

/* MOBILE HEADER: Logo und Menü etwas weiter nach innen */

@media (max-width: 767px) {

  .elementor-696 .elementor-element.elementor-element-7af0914 {
    /* Bisher jeweils 12px, jetzt 24px */
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

}/* End custom CSS */
/* Start custom CSS *//* Header IMMER über Content */
.elementor-sticky,
.elementor-location-header,
header,
.site-header {
  position: relative;
  z-index: 9999 !important;
}

/* Falls es ein Sticky-Header-Container (Section/Container) ist */
.elementor-sticky--effects {
  z-index: 9999 !important;
}

/* Smooth Transition */
.elementor-sticky {
    transition: background 0.4s ease,
                backdrop-filter 0.4s ease,
                -webkit-backdrop-filter 0.4s ease,
                border 0.4s ease,
                box-shadow 0.4s ease;
}

/* Glas Effekt beim Scrollen */
.elementor-sticky--effects {
    background: rgba(10, 10, 10, 0.45) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}


/* HEIDT PERFORMANCE - MOBILER HEADER
   Header 696: Logo -> Konfigurator -> Menü-Grafik
   Nur bis 767px; bestehende Links bleiben erhalten.
*/

@media (max-width: 767px) {

  /* Schwarzer Header ohne seitlichen Versatz */
  .elementor-696.elementor-location-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
  }

  .elementor-696 .elementor-element.elementor-element-7af0914 {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 16px 16px 14px !important;

    background: #000 !important;
    border: 0 !important;
    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .elementor-696 .elementor-element-7af0914 > .elementor-background-overlay {
    display: none !important;
  }

  /* Vorhandene Header-Spalte auf volle Breite setzen */
  .elementor-696 .elementor-element-7af0914 > .elementor-container,
  .elementor-696 .elementor-element.elementor-element-33c3f27 {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Alle drei Grafiken mittig UNTEREINANDER */
  .elementor-696 .elementor-element-33c3f27 > .elementor-widget-wrap {
    display: flex !important;
    flex-flow: column nowrap !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 4px !important;

    width: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Negative Abstände und Einflieg-Animationen entfernen */
  .elementor-696 .elementor-widget-image {
    display: block !important;

    position: relative !important;
    inset: auto !important;

    flex: 0 0 auto !important;
    align-self: center !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
    line-height: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    animation: none !important;
  }

  /* 1. Seitenlogo: groß und mittig */
  .elementor-696 .elementor-element.elementor-element-253042a {
    order: 1 !important;
    width: min(100%, 360px) !important;
  }

  /* 2. Konfigurator: direkt darunter, nur etwas kleiner */
  .elementor-696 .elementor-element.elementor-element-d667cc7 {
    order: 2 !important;
    width: min(94%, 340px) !important;
  }

  /* 3. Vorhandene Drei-Streifen-Grafik */
  .elementor-696 .elementor-element.elementor-element-740a2ed {
    order: 3 !important;
    width: 76px !important;
    margin-top: 6px !important;
  }

  /* Links und optionale Elementor-Innenhüllen */
  .elementor-696 .elementor-widget-image > .elementor-widget-container,
  .elementor-696 .elementor-widget-image a {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  /* Originalgrafiken proportional und ohne Beschnitt */
  .elementor-696 .elementor-widget-image img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 auto !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center !important;

    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;

    border: 0 !important;
    box-shadow: none !important;
  }

  /* Menü-Button mit ausreichend großer Tippfläche */
  .elementor-696 .elementor-element-740a2ed a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 48px !important;
  }

  .elementor-696 .elementor-widget-image a:focus-visible {
    outline: 2px solid #FF7A00 !important;
    outline-offset: 4px;
  }

  /* Unsichtbare Sticky-Kopie darf nicht doppelt erscheinen */
  .elementor-696 .elementor-sticky__spacer,
  .elementor-696 .elementor-sticky__spacer * {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* MOBILER HEADER: KOMPAKTER
   Unter den bereits funktionierenden Header-CSS-Code einfügen.
   Grafiken: 60 % der bisherigen Größe.
   Desktop und Menü-Popup bleiben unverändert.
*/

@media (max-width: 767px) {

  /* Oberen und unteren Abstand verkleinern */
  .elementor-696 .elementor-element.elementor-element-7af0914 {
    padding: 10px 16px 8px !important;
  }

  /* Abstand zwischen den Grafiken proportional reduzieren */
  .elementor-696 .elementor-element-33c3f27 > .elementor-widget-wrap {
    gap: 2.4px !important;
  }

  /* Seitenlogo: bisher maximal 360px, jetzt 216px */
  .elementor-696 .elementor-element.elementor-element-253042a {
    width: min(60%, 216px) !important;
  }

  /* Konfigurator: bisher maximal 340px, jetzt 204px */
  .elementor-696 .elementor-element.elementor-element-d667cc7 {
    width: min(56.4%, 204px) !important;
  }

  /* Menü-Grafik: ebenfalls auf 60 % verkleinern */
  .elementor-696 .elementor-element.elementor-element-740a2ed {
    width: 45.6px !important;
    margin-top: 3.6px !important;
  }

  /* Trotz kleinerer Grafik eine größere Tippfläche behalten */
  .elementor-696 .elementor-element-740a2ed a {
    min-height: 44px !important;
  }
}
/* MOBILER HEADER: ZWEI ZEILEN
   Unter den bisher funktionierenden Header-Code einfügen.
   Oben: Logo links, Menü rechts.
   Darunter: Konfigurator mittig.
*/

@media (max-width: 767px) {

  /* Kompakte Außenabstände */
  .elementor-696 .elementor-element.elementor-element-7af0914 {
    padding: 8px 12px 6px !important;
  }

  /* Zwei Zeilen statt drei Grafiken untereinander */
  .elementor-696 .elementor-element-33c3f27 > .elementor-widget-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "logo menue"
      "konfigurator konfigurator" !important;

    align-items: center !important;
    gap: 2px 12px !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Seitenlogo: oben links */
  .elementor-696 .elementor-element.elementor-element-253042a {
    grid-area: logo !important;
    order: 0 !important;
    justify-self: start !important;

    width: min(100%, 216px) !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Drei-Streifen-Grafik: rechts neben dem Logo */
  .elementor-696 .elementor-element.elementor-element-740a2ed {
    grid-area: menue !important;
    order: 0 !important;
    justify-self: end !important;

    width: 45.6px !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Konfigurator: zweite Zeile, mittig unter beiden Elementen */
  .elementor-696 .elementor-element.elementor-element-d667cc7 {
    grid-area: konfigurator !important;
    order: 0 !important;
    justify-self: center !important;

    width: min(100%, 204px) !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Menü bleibt trotz kleiner Grafik gut antippbar */
  .elementor-696 .elementor-element-740a2ed a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
}

/* MOBILE HEADER: Logo und Menü etwas weiter nach innen */

@media (max-width: 767px) {

  .elementor-696 .elementor-element.elementor-element-7af0914 {
    /* Bisher jeweils 12px, jetzt 24px */
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

}/* End custom CSS */