html {
  scrollbar-gutter: stable;
}

header {
  --header-height: 73px;
}

body:has(header .floating-navi .wp-block-navigation-submenu__toggle[aria-expanded=true]) {
  overflow: hidden;

  .row-on-top > div { 
    /* position: fixed; */
  }
}

/* logo and cta on top */
.row-on-top > div {
  position: relative;
  z-index: 6000;
}


div.floating-navi-container {
    position: fixed;
    left: 0;
    right: 0;
    margin-inline: auto;
    z-index: 5000;
    pointer-events: none;
}



.floating-navi {
  position: relative;
  background-color: transparent !important;
  pointer-events: all;
  --border-radius: 20px;

  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);

  -webkit-box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.075); 
  box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.075);
}

.floating-navi::before  {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;           /* klicks nicht blocken */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* optional: leichter Weiß-Film, wenn du magst */
      background-color: #ffffffcc;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);

  z-index: 5555;
}


.floating-navi .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  position: fixed;
  inset: 0;
  z-index: 5000;
  padding-top: calc(var(--header-height) + 10vh);
  visibility: visible;
  opacity: .5;
  width: 100%;
  height: 100vh;

  transform: translateY(-100vh);
  transition: all 0.8s ease;
  transition-timing-function: cubic-bezier(.23, 1, .32, 1);


  .wp-block-navigation-item {
    filter: blur(20px);
    transform: translateY(-50px);
    opacity: 0;
    transition: filter .6s 
    cubic-bezier(.59, .12, .85, .33), transform .6s 
    cubic-bezier(.59, .12, .85, .33), opacity .6s 
    cubic-bezier(.59, .12, .85, .33);
    transition-delay: calc(0.08s * var(--index));

    &:nth-child(1) { --index: 1; }
    &:nth-child(2) { --index: 2; }
    &:nth-child(3) { --index: 3; }
    &:nth-child(4) { --index: 4; }
    &:nth-child(5) { --index: 5; }
    &:nth-child(6) { --index: 6; }
    &:nth-child(7) { --index: 7; }
  }
}

.floating-navi .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container {
  transform: translateY(0);

  .wp-block-navigation-item {
    filter: blur(0);
    transform: translateY(0);
    opacity: 1;
  }

  &:has(.wp-block-navigation-item:is(:hover, :focus, :active)) {
    .wp-block-navigation-item {
      transition: filter .1s ease, opacity .1s ease;
      transition-delay: 0s;
      filter: blur(2px);
      opacity: 0.8;
    }

    .wp-block-navigation-item:is(:hover, :focus, :active) {
      filter: blur(0);
      opacity: 1;
    }
  }
}

.floating-navi {
  .wp-block-navigation__submenu-icon, .wp-block-navigation-item__label {
    position: relative;
    z-index: 5700;
  }
}

.fixed-navi.wp-block-navigation {
  > li {
    font-size: var(--wp--preset--font-size--small);

    ul {
      > li {
        font-size: var(--wp--preset--font-size--x-large) !important;
        a {
          padding-top: var(--wp--preset--spacing--20);
          padding-bottom: var(--wp--preset--spacing--20);
         
          padding-right: var(--wp--preset--spacing--30);
          padding-left: var(--wp--preset--spacing--30);
        }
      }
    }
  }
}


@media screen and (max-width: 991px) {
    header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: top 0.3s ease;
    z-index: 9;
  }
  .floating-navi-container {
    position: unset;
    -webkit-transform: unset;
        -ms-transform: unset;
            transform: unset;
    z-index: 5000;
    justify-content: flex-end;
  }
  }


@media (max-width: 780px) {

  .wp-block-navigation 
  .wp-block-navigation-item.has-child 
  .wp-block-navigation-submenu__toggle ~ .wp-block-navigation__submenu-container {
    all: unset !important;
    
  }

  .floating-navi-container {
    transform: none !important;
  }

  .floating-navi { 
    box-shadow: none !important; 
    backdrop-filter: none !important; 
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 0rem;

    .wp-block-navigation__container {
      width: 100% !important;
    }
  }
  
  .floating-navi:has(.wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]) {
    background-color: #ffffffb3 !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
  }

  #modal-1-content ul {
        width: 100% !important; 
        align-items: flex-start;

        li {
          align-items: flex-start;
        }

      }

  /* Menü-Container */
  .floating-navi-container .wp-block-navigation__responsive-container.is-menu-open {
    top: var(--header-height); 
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    height: fit-content !important;
    background: var(--wp--preset--color--base) !important;
    color: var(--wp--preset--color--contrast) !important;
    padding: 1.5rem;
    overflow-y: auto;
    -webkit-box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.075); 
    box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.075);
  }

  /* Hauptpunkte */
  .floating-navi-container .wp-block-navigation__container > .wp-block-navigation-item {
    width: 100%;
    margin-bottom: 0.75rem;
  }

  /* Links der Hauptpunkte */
  .floating-navi-container .wp-block-navigation__container > .wp-block-navigation-item > a,
  .floating-navi-container .wp-block-navigation__container > .wp-block-navigation-item > button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.75rem 0;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    color: var(--wp--preset--color--contrast) !important;
  }

  /* Toggle-Icon (Caret) */
  .floating-navi-container .wp-block-navigation-submenu__toggle {
    background: none !important;
    border: none !important;
    color: var(--wp--preset--color--contrast) !important;
    cursor: pointer;
    padding: 0;
    margin: 0;
  }

  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
  }

  /* Burger sichtbar */
  .floating-navi-container .wp-block-navigation__responsive-container-open {
    display: inline-flex !important;
  }

  /* Mobile Overlay anzeigen, wenn geöffnet */
  .floating-navi-container .wp-block-navigation__responsive-container.is-menu-open {
    display: flex !important;
    flex-direction: column;
  }
    .fixed-navi {
    gap: 0 !important;
  }

  /* hier die richtige Klasse ohne SCSS-Verschachtelung */
  .fixed-navi .wp-container-core-navigation-is-layout-bbf59bfc {
    gap: 0 !important;
  }
}

.wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container  {}

/*-----------------------------------------------------------------------------------------------------------*/

/* .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container { 
    position: absolute;
    left: -32px;
    top:-8px;
    padding-left: 16px;
    padding-top: 50px;
    padding-bottom: 20px;
    z-index: 1000;
    border-radius: 2vh;
    background-color: rgba(0,0,0,0) !important;
} */


/* 1) Aktuelle Unterseite (Kind) unterstreichen */
.floating-navi .wp-block-navigation a[aria-current="page"] {
  text-decoration: underline;
}

/* 2) Elternpunkt unterstreichen, WENN in seinem Submenü ein aktives Kind liegt */
/* a) Falls der Parent ein Link wäre */
.floating-navi .wp-block-navigation
  .wp-block-navigation-item.has-child:has(.wp-block-navigation__submenu-container a[aria-current="page"]) > a {
  text-decoration: underline;
}

/* b) Parent ist ein BUTTON (Block-Navigation Submenu Toggle) */
.floating-navi .wp-block-navigation
  .wp-block-navigation-item.has-child:has(.wp-block-navigation__submenu-container a[aria-current="page"]) 
  > .wp-block-navigation-submenu__toggle,
.floating-navi .wp-block-navigation
  .wp-block-navigation-item.has-child:has(.wp-block-navigation__submenu-container a[aria-current="page"]) 
  > .wp-block-navigation-item__content {
  text-decoration: underline;
}

/* c) Falls das Theme den Text im Label-Span stylt, hier zusätzlich */
.floating-navi .wp-block-navigation
  .wp-block-navigation-item.has-child:has(.wp-block-navigation__submenu-container a[aria-current="page"]) 
  > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label {
  text-decoration: underline;
}

/* Bonus: klassische WP-"current"-Klassen als Fallback abdecken */
.floating-navi .wp-block-navigation .current-menu-ancestor > a,
.floating-navi .wp-block-navigation .current-menu-parent > a,
.floating-navi .wp-block-navigation .current_page_parent > a,
.floating-navi .wp-block-navigation .current_page_ancestor > a {
  text-decoration: underline;
}