.elementor-kit-8{--e-global-color-primary:#0287B2;--e-global-color-secondary:#00B1D5;--e-global-color-text:#4B4B4B;--e-global-color-accent:#FFB204;--e-global-color-fb7e6ee:#FFFFFF;--e-global-color-09b9710:#727272;--e-global-color-78f5181:#F1F1F1;--e-global-color-c636c3f:#727272B8;--e-global-color-e992d67:#0287B2B8;--e-global-typography-primary-font-family:"Lobster";--e-global-typography-primary-font-size:2.5em;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Barlow Condensed";--e-global-typography-secondary-font-size:1.8em;--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Barlow";--e-global-typography-text-font-size:1.1em;--e-global-typography-text-font-weight:500;--e-global-typography-accent-font-family:"Barlow";--e-global-typography-accent-font-size:1.1em;--e-global-typography-accent-font-weight:500;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{background-color:var( --e-global-color-09b9710 );font-family:"Barlow Condensed", Sans-serif;font-size:1.4em;font-weight:500;color:var( --e-global-color-fb7e6ee );border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-accent );border-radius:0px 0px 0px 0px;padding:0.4em 0.4em 0.5em 0.4em;}.elementor-kit-8 button:hover,.elementor-kit-8 button:focus,.elementor-kit-8 input[type="button"]:hover,.elementor-kit-8 input[type="button"]:focus,.elementor-kit-8 input[type="submit"]:hover,.elementor-kit-8 input[type="submit"]:focus,.elementor-kit-8 .elementor-button:hover,.elementor-kit-8 .elementor-button:focus{background-color:var( --e-global-color-accent );color:var( --e-global-color-fb7e6ee );}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 a{color:var( --e-global-color-primary );}.elementor-kit-8 h1{color:var( --e-global-color-primary );}.elementor-kit-8 h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-kit-8 h3{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-kit-8 h4{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-8 h2{font-size:var( --e-global-typography-secondary-font-size );}.elementor-kit-8 h3{font-size:var( --e-global-typography-accent-font-size );}.elementor-kit-8 h4{font-size:var( --e-global-typography-accent-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8{--e-global-typography-primary-font-size:2em;}.elementor-kit-8 h2{font-size:var( --e-global-typography-secondary-font-size );}.elementor-kit-8 h3{font-size:var( --e-global-typography-accent-font-size );}.elementor-kit-8 h4{font-size:var( --e-global-typography-accent-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =====================================
  HEADER: GRUNDLAGEN===================================== */
.elementor-location-header {
  position: relative;
  z-index: 10;
  transition: background-color 0.8s ease;
}

/* =====================================
   HEADER-HINTERGRUND via cf-header::before
   (IDs wie von dir verwendet)
===================================== */
.elementor-element-4e3af688.cf-header {
  position: relative;
  z-index: 10;
}

.elementor-element-4e3af688.cf-header:before {
  content: "";
  position: absolute;
  inset: 0;

  z-index: -1;
  transition: background 0.8s ease;
}

.elementor-element-bd8bfeb .cf-header-links:before  {background-color: var( --e-global-color-primary ) !important; border-style: solid;}

/* SCROLL-ZUSTAND: Verlauf */
.elementor-location-header.scrolled
  .elementor-element-4e3af688.cf-header::before {
  background: linear-gradient(
    to bottom,
    rgba(2, 135, 178, 1) 95%,
    rgba(29, 29, 29, 0.3) 30%,
    transparent 100%
  );
}

/* =====================================
   MENÜFARBEN
===========================

/* Nach Scroll */
.elementor-location-header.scrolled .elementor-item,
.elementor-location-header.scrolled .menu-separator {
  color: var( --e-global-color-accent ) !important;
  border-color: var( --e-global-color-accent ) !important;
}
.elementor-location-header.scrolled .elementor-item:hover,
.elementor-location-header.scrolled .elementor-item.elementor-item-active {
  color: var( --e-global-color-accent ) !important;
}




.elementor-location-header.scrolled .elementor-element-bd8bfeb {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* =====================================
   Mobile/Tablet: rechter Headerteil im Default = primary
   Beim Scrollen wieder transparent -> Verlauf übernimmt
===================================== */
@media (max-width: 1024px) {
  .elementor-element-bd8bfeb .cf-header-rechts,
  .elementor-element-bd8bfeb .cf-header-rechts .e-con,
  .elementor-element-bd8bfeb .cf-header-rechts .e-con-inner,
  .elementor-element-bd8bfeb .cf-header-rechts .elementor-container,
  .elementor-element-bd8bfeb .cf-header-rechts .elementor-widget-wrap {
    background-color: var(--e-global-color-primary) !important;
    background-image: none !important;
  }

  .elementor-location-header.scrolled
    .elementor-element-bd8bfeb .cf-header-rechts,
  .elementor-location-header.scrolled
    .elementor-element-bd8bfeb .cf-header-rechts .e-con,
  .elementor-location-header.scrolled
    .elementor-element-bd8bfeb .cf-header-rechts .e-con-inner,
  .elementor-location-header.scrolled
    .elementor-element-bd8bfeb .cf-header-rechts .elementor-container,
  .elementor-location-header.scrolled
    .elementor-element-bd8bfeb .cf-header-rechts .elementor-widget-wrap {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }
}

/* =====================================
   Mobile/Tablet: rechter Bereich im Default = primary
   Beim Scroll: ausblenden -> globaler Verlauf sichtbar
===================================== */
@media (max-width: 1024px) {

  /* Rechts-Block als eigener Layer */
  .cf-header-rechts {
    position: relative;
    z-index: 1; /* über dem globalen Header-::before */
  }

  /* Default: rechte Fläche einfärben */
  .cf-header-rechts::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--e-global-color-primary) !important;
    z-index: 0;               /* hinter Inhalt, vor globalem Verlauf */
    transition: opacity 0.8s ease;
  }

  /* Inhalt bleibt klickbar/oben */
  .cf-header-rechts > * {
    position: relative;
    z-index: 1;
  }

  /* Beim Scroll: rechte Fläche transparent -> Verlauf übernimmt */
  .elementor-location-header.scrolled .cf-header-rechts::before {
    opacity: 0;
  }
}

@media (max-width: 1024px) {
  /* Default: sofort sichtbar */
  .cf-header-rechts::before {
    transition: opacity 0s linear 0s !important;
    opacity: 1;
  }

  /* Beim Scroll: sanft ausblenden */
  .elementor-location-header.scrolled .cf-header-rechts::before {
    transition: opacity 0.25s ease 0s !important;
    opacity: 0;
  }
}


/* =====================================
   Menü-Farbwechsel beim Scrollen NUR Desktop
===================================== */
@media (min-width: 1025px) {

  /* Nach Scroll – nur Desktop */
  .elementor-location-header.scrolled .elementor-item,
  .elementor-location-header.scrolled .menu-separator {
    color: var(--e-global-color-accent) !important;
    border-color: var(--e-global-color-accent) !important;
  }

  .elementor-location-header.scrolled .elementor-item:hover,
  .elementor-location-header.scrolled .elementor-item.elementor-item-active {
    color: var(--e-global-color-accent) !important;
  }
}

/* =====================================
   Mobile/Tablet Dropdown – Farben im SCROLLED Zustand
   INAKTIV = PRIMARY
   AKTIV   = ACCENT
===================================== */
@media (max-width: 1024px) {

  /* 1) Standard (alle Dropdown-Links) = PRIMARY */
  .elementor-location-header.scrolled
    .elementor-nav-menu--dropdown a.elementor-item {
    color: var(--e-global-color-primary) !important;
  }

  /* optional: Hover wie Standard (PRIMARY) */
  .elementor-location-header.scrolled
    .elementor-nav-menu--dropdown a.elementor-item:hover {
    color: var(--e-global-color-primary) !important;
  }

  /* 2) Aktiver Eintrag = ACCENT (Elementor markiert mal <a>, mal <li>) */
  .elementor-location-header.scrolled
    .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
  .elementor-location-header.scrolled
    .elementor-nav-menu--dropdown li.current-menu-item > a.elementor-item,
  .elementor-location-header.scrolled
    .elementor-nav-menu--dropdown li.current_page_item > a.elementor-item,
  .elementor-location-header.scrolled
    .elementor-nav-menu--dropdown li.current-menu-ancestor > a.elementor-item {
    color: var(--e-global-color-accent) !important;
  }
}

/* =====================================
   TRENNER (Desktop sichtbar, Mobile aus)
   Default: --e-global-color-text
   Scrolled: --e-global-color-accent
===================================== */

/* 1) Variable am Nav-Menu-Widget im Header setzen (ID-unabhängig) */
.elementor-location-header .elementor-nav-menu {
  --cf-divider-color: var(--e-global-color-text);
}
.elementor-location-header.scrolled .elementor-nav-menu {
  --cf-divider-color: var(--e-global-color-accent);
}

/* 2) Keine doppelten Border-Trenner (falls Elementor irgendwo border-right setzt) */
.elementor-location-header .elementor-nav-menu > li > a.elementor-item {
  border-right: 0 !important;
  position: relative;
}

/* 3) Desktop: optischer Trenner rechts am Link */
@media (min-width: 1025px) {
  .elementor-location-header
    .elementor-nav-menu > li:not(:last-child) > a.elementor-item {
    background-image: linear-gradient(var(--cf-divider-color), var(--cf-divider-color));
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 2px 60%;
  }
}

/* 4) Mobile/Tablet: Trenner im Dropdown aus */
@media (max-width: 1024px) {
  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item {
    background-image: none !important;
  }
}

/* =====================================
   TRENNER – Feinjustierung (Desktop)
   +1px breiter, etwas niedriger
===================================== */
@media (min-width: 1025px) {
  .elementor-location-header
    .elementor-nav-menu > li:not(:last-child) > a.elementor-item {
    background-image: linear-gradient(var(--cf-divider-color), var(--cf-divider-color));
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 2px 50%; /* ← HIER: 3px breit, 45% hoch */
  }
}

.cf-image-flip .elementor-flip-box__front .elementor-flip-box__layer__title {background-color: var(--e-global-color-primary) !important; width:80% !important; padding: 1em !important;}



.cf-icon-flip .elementor-icon svg {
    width: 100% !important;
}


/* === Formatierung Cookie-Buttons für das Menu unten === */

.cf-footer-button .elementor-button {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0px !important;
        padding: 0px !important;
    text-align: left !important;
    font-family: var(--e-global-typography-text-font-family) Sans-serif !important; font-size: 1em !important; font-weight: var(--e-global-typography-text-font-weight) !important;
    color: var(--e-global-color-fb7e6ee) !important;
}
.cf-footer-button .elementor-button:hover {
    color: var(--e-global-color-accent) !important;
}/* End custom CSS */