@charset "utf-8";
/* =========================================================
   IL NIDO – MENU + SCROLLSPY (Divi)  |  menu-scrollspy.css
   Passend zu deinem JS:
   - Active Anker: .mcw-active
   - Home (oben):  .mcw-home
   ========================================================= */

/* =========================
   Design Tokens / CI Colors
   ========================= */
:root{
  --ilnido-header-bg: #33632a;
  --ilnido-link: #ffffff;
  --ilnido-hover: #79a42b;

  /* Sticky-Aktivfarbe (weiß) + Akzent (rot) */
  --ilnido-active: #ffffff;
  --ilnido-active-accent: #ed1c24;

  --ilnido-sticky-bg: #574f4d;
  --ilnido-sticky-link: #ffffff;
  --ilnido-sticky-active: #ed1c24;

  --ilnido-mobile-bg: #33632a;
  --ilnido-mobile-link: #ffffff;

  --ilnido-underline-h: 2px;

  /* Mobile Header Höhen */
  --ilnido-header-h: 90px;
  --ilnido-header-h-sticky: 56px;
}

/* =========================
   Header Background
   ========================= */
#main-header{
  background-color: var(--ilnido-header-bg) !important;
}

/* =========================
   Base Menu Links (Desktop)
   ========================= */
#top-menu a{
  color: var(--ilnido-link) !important;
  border-bottom: 0 solid transparent !important;
  transition: color 0.2s ease, border-color 0.2s ease;
}

#top-menu a:hover{
  color: var(--ilnido-hover) !important;
}

/* =========================
   Sticky Header (Desktop)
   ========================= */
#main-header.et-fixed-header{
  background-color: var(--ilnido-sticky-bg) !important;
}

.et-fixed-header #top-menu a{
  color: var(--ilnido-sticky-link) !important;
}

.et-fixed-header #top-menu a:hover{
  color: var(--ilnido-hover) !important;
}

/* =========================
   Mobile Menu (Dropdown)
   ========================= */
.et_mobile_menu{
  background-color: var(--ilnido-mobile-bg) !important;
}

.et_mobile_menu li > a{
  color: var(--ilnido-mobile-link) !important;
}

/* =========================================================
   1) WP/Divi "current" nur für ANKERLINKS neutralisieren (#...)
   -> verhindert, dass mehrere Anker gleichzeitig "active" wirken
   ========================================================= */

/* Desktop */
#top-menu li.current-menu-item > a[href*="#"],
#top-menu li.current_page_item > a[href*="#"],
#top-menu li.current-menu-ancestor > a[href*="#"]{
  color: var(--ilnido-link) !important;
  border-bottom: 0 !important;
}

/* Sticky */
.et-fixed-header #top-menu li.current-menu-item > a[href*="#"],
.et-fixed-header #top-menu li.current_page_item > a[href*="#"],
.et-fixed-header #top-menu li.current-menu-ancestor > a[href*="#"]{
  color: var(--ilnido-sticky-link) !important;
  border-bottom: 0 !important;
}

/* Mobile */
.et_mobile_menu li.current-menu-item > a[href*="#"],
.et_mobile_menu li.current_page_item > a[href*="#"],
.et_mobile_menu li.current-menu-ancestor > a[href*="#"]{
  color: var(--ilnido-mobile-link) !important;
}

/* =========================================================
   2) WP/Divi "current" für ECHTE Seitenlinks (ohne #)
   -> Menükarte / Reservierung korrekt aktiv
   WICHTIG: Auf der Startseite wird Home NICHT dauerhaft markiert,
            das übernimmt dein JS mit .mcw-home
   ========================================================= */

/* Desktop: echte Seitenlinks aktiv */
#top-menu li.current-menu-item > a:not([href*="#"]),
#top-menu li.current_page_item > a:not([href*="#"]){
  color: var(--ilnido-sticky-active) !important;
  border-bottom: var(--ilnido-underline-h) solid var(--ilnido-sticky-active) !important;
}

/* Sticky: echte Seitenlinks aktiv */
.et-fixed-header #top-menu li.current-menu-item > a:not([href*="#"]),
.et-fixed-header #top-menu li.current_page_item > a:not([href*="#"]){
  color: var(--ilnido-active) !important;
  border-bottom: var(--ilnido-underline-h) solid var(--ilnido-active) !important;
}

/* Mobile: echte Seitenlinks aktiv */
.et_mobile_menu li.current-menu-item > a:not([href*="#"]),
.et_mobile_menu li.current_page_item > a:not([href*="#"]){
  color: var(--ilnido-active) !important;
}

/* Startseite: Home-Link (/) NICHT dauerhaft als WP-current stylen */
body.home #top-menu li.current-menu-item > a[href="/"],
body.home #top-menu li.current_page_item > a[href="/"],
body.home #top-menu li.current-menu-item > a[href=""],
body.home #top-menu li.current_page_item > a[href=""]{
  color: var(--ilnido-link) !important;
  border-bottom: 0 !important;
}

body.home .et-fixed-header #top-menu li.current-menu-item > a[href="/"],
body.home .et-fixed-header #top-menu li.current_page_item > a[href="/"],
body.home .et-fixed-header #top-menu li.current-menu-item > a[href=""],
body.home .et-fixed-header #top-menu li.current_page_item > a[href=""]{
  color: var(--ilnido-sticky-link) !important;
  border-bottom: 0 !important;
}

/* =========================================================
   3) ScrollSpy Active State (vom JS gesetzt)
   -> .mcw-active (Anker) und .mcw-home (Home oben)
   ========================================================= */

/* Desktop */
#top-menu li.mcw-active > a,
#top-menu a.mcw-active,
#top-menu li.mcw-home > a,
#top-menu a.mcw-home{
  color: var(--ilnido-active-accent) ;
  border-bottom: var(--ilnido-underline-h) solid var(--ilnido-active-accent);
}

/* Sticky */
.et-fixed-header #top-menu li.mcw-active > a,
.et-fixed-header #top-menu a.mcw-active,
.et-fixed-header #top-menu li.mcw-home > a,
.et-fixed-header #top-menu a.mcw-home{
  color: var(--ilnido-active);
  border-bottom: var(--ilnido-underline-h) solid var(--ilnido-active);
}

/* Mobile (falls ihr die Klassen auch im Mobile-Menu setzt) */
.et_mobile_menu li.mcw-active > a,
.et_mobile_menu li.mcw-home > a{
  color: var(--ilnido-active) !important;
}

/* ==================================================
   Mobile Header: fix + transparent beim Scroll + Shrink
   ================================================== */
@media (max-width: 980px){

  /* 1) Header wirklich fixieren (Classic + Theme Builder Wrapper) */
  #main-header,
  .et-l--header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
  }

  /* 2) Startzustand */
  #main-header{
    height: var(--ilnido-header-h);
    background-color: var(--ilnido-header-bg) !important;
    transition:
      height 0.3s ease,
      background-color 0.3s ease,
      backdrop-filter 0.3s ease;
  }

  /* 3) Sticky-Zustand (Divi setzt .et-fixed-header) */
  #main-header.et-fixed-header{
    height: var(--ilnido-header-h-sticky);
    background-color: color-mix(in srgb, var(--ilnido-sticky-bg) 85%, transparent) !important;
    backdrop-filter: blur(6px);
  }

  /* 4) Innenlayout: Divi-Container NICHT kaputt-flexen
        -> nur die et_menu_container sauber zentrieren */
  #main-header .et_menu_container{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
      width: 95% !important;
  }

  /* Logo links */
  #main-header .logo_container{
    height: 100%;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
      width: 100%;
  }

  #main-header #logo{
    max-height: 42px;
    width: auto;
    height: auto;
    display: block;
    transition: max-height 0.3s ease;
  }

  #main-header.et-fixed-header #logo{
    max-height: 32px;
  }

  /* Burger rechts */
  #main-header #et_mobile_nav_menu{
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: auto;
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end;
  }

  #main-header .mobile_menu_bar{
    height: 100%;
    display: flex;
    align-items: center;
  }

  /* 5) Content nach unten schieben */
  #page-container{
    padding-top: var(--ilnido-header-h);
  }
     /* Burger-Icon (3 Linien) wieder weiß */
  #main-header .mobile_menu_bar:before {
    color: #ffffff !important;
  }

  /* auch im Sticky-Zustand erzwingen */
  #main-header.et-fixed-header .mobile_menu_bar:before {
    color: #ffffff !important;
  }
    
    .et_header_style_left #logo {
    max-width: 100% !important;
  }
}

@media (max-width: 980px) {

  /* Button zwischen Logo und Burger */
  #main-header .ilnido-mobile-call{
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-left: -50px;    /*Abstand zum Logo */
    /*margin-right: 12px;  /* Abstand zum Burger */

    color: #fff;
    text-decoration: none;
    font-weight: 600;
    line-height: 1;

    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12); /* dezent auf grün/braun */
    backdrop-filter: blur(6px);
    white-space: nowrap;
  }

  #main-header .ilnido-mobile-call__icon{
    font-size: 18px;
  }

  /* Sticky: etwas kompakter */
  #main-header.et-fixed-header .ilnido-mobile-call{
    padding: 6px 8px;
    font-weight: 600;
  }

  /* sehr kleine Displays: nur Icon, kein Text */
  @media (max-width: 420px){
    #main-header .ilnido-mobile-call__text{ display:none; }
    #main-header .ilnido-mobile-call{ padding: 8px; }
    #main-header.et-fixed-header .ilnido-mobile-call{ padding: 6px; }
  }
}