/* ==========================================
   KEWALU.NOIR – EINHEITLICHE UNTERSEITEN-NAV
   ========================================== */

:root{
  --kn-nav-bg:rgba(8,7,6,.92);
  --kn-nav-paper:#e8dfd0;
  --kn-nav-gold:#CDBA96;
  --kn-nav-line:rgba(232,223,208,.19);
  --kn-nav-serif:'Cormorant Garamond',Georgia,serif;
  --kn-nav-sans:'Montserrat',Arial,sans-serif;
}

/* Unterseiten bekommen Platz für die feste Navigation */
body.kewalu-subpage{
  padding-top:88px !important;
}

/* Alte individuelle Navigationsleisten verstecken */
body.kewalu-subpage > nav:not(#kewalu-global-nav),
body.kewalu-subpage > header.topbar,
body.kewalu-subpage > .topbar,
body.kewalu-subpage > .page > header.topbar,
body.kewalu-subpage > .page > .topbar{
  display:none !important;
}

/* Einheitliche Hauptnavigation */
#kewalu-global-nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:10000;

  height:88px;

  display:flex;
  align-items:center;

  padding:0 5vw;

  background:var(--kn-nav-bg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  border-bottom:1px solid var(--kn-nav-line);

  font-family:var(--kn-nav-sans);
}

/* Logo */
#kewalu-global-nav .kn-brand{
  flex:0 0 auto;

  font-family:var(--kn-nav-serif);
  font-size:18px;
  letter-spacing:.28em;

  color:#f2eee8;
  text-decoration:none;

  white-space:nowrap;
}

/* Mittlere Links */
#kewalu-global-nav .kn-links{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:22px;

  margin-left:auto;
  margin-right:26px;

  font-size:9.5px;
  letter-spacing:.20em;
  text-transform:uppercase;

  white-space:nowrap;
}

#kewalu-global-nav .kn-links a{
  color:#f2eee8;
  text-decoration:none;

  opacity:.70;
  transition:
    opacity .2s ease,
    color .2s ease;
}

#kewalu-global-nav .kn-links a:hover,
#kewalu-global-nav .kn-links a.active{
  opacity:1;
  color:var(--kn-nav-paper);
}

/* Zurück-Button */
#kewalu-global-nav .kn-back{
  flex:0 0 auto;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:42px;
  padding:0 17px;

  border:1px solid var(--kn-nav-gold);

  color:#eee8de;
  text-decoration:none;

  font-size:9px;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;

  white-space:nowrap;

  background:rgba(8,7,6,.30);

  transition:
    background .2s ease,
    color .2s ease;
}

#kewalu-global-nav .kn-back:hover{
  background:var(--kn-nav-paper);
  color:#14110e;
}

/* Mobile Menü Button */
#kewalu-global-nav .kn-menu{
  display:none;

  margin-left:auto;

  border:1px solid rgba(205,186,150,.45);
  background:transparent;
  color:#f2eee8;

  width:44px;
  height:40px;

  font-size:22px;
  cursor:pointer;
}

/* Etwas enger auf kleineren Desktop-/Laptop-Breiten */
@media (max-width:1280px){
  #kewalu-global-nav{
    padding-left:3vw;
    padding-right:3vw;
  }

  #kewalu-global-nav .kn-links{
    gap:15px;
    margin-right:18px;
    font-size:8.5px;
    letter-spacing:.15em;
  }

  #kewalu-global-nav .kn-back{
    padding:0 12px;
    font-size:8px;
  }
}

/* Mobile / Tablet */
@media (max-width:1600px){

  body.kewalu-subpage{
    padding-top:74px !important;
  }

  #kewalu-global-nav{
    height:74px;
    padding:0 5vw;
  }

  #kewalu-global-nav .kn-brand{
    font-size:15px;
  }

  #kewalu-global-nav .kn-menu{
    display:block;
  }

  #kewalu-global-nav .kn-back{
    margin-left:10px;
    min-height:38px;
    padding:0 11px;
    font-size:7.5px;
  }

  #kewalu-global-nav .kn-links{
    position:absolute;

    top:74px;
    left:0;
    right:0;

    display:none;
    flex-direction:column;
    align-items:stretch;

    gap:0;

    margin:0;
    padding:12px 5vw 18px;

    background:rgba(8,7,6,.98);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    border-bottom:1px solid var(--kn-nav-line);
  }

  #kewalu-global-nav.open .kn-links{
    display:flex;
  }

  #kewalu-global-nav .kn-links a{
    display:block;
    padding:14px 4px;

    border-bottom:
      1px solid rgba(232,223,208,.08);

    font-size:10px;
  }
}

@media (max-width:560px){

  #kewalu-global-nav .kn-back{
    font-size:0;
    width:44px;
    padding:0;
  }

  #kewalu-global-nav .kn-back::before{
    content:"←";
    font-size:18px;
  }
}



/* ==========================================
   MOBILE NAV – EINHEITLICH AUF ALLEN SEITEN
   ========================================== */

@media (max-width:1600px){

  #kewalu-global-nav{
    display:grid !important;
    grid-template-columns:auto 1fr auto auto;
    align-items:center;
    gap:10px;
  }

  #kewalu-global-nav .kn-brand{
    grid-column:1;
  }

  #kewalu-global-nav .kn-menu{
    display:flex !important;
    align-items:center;
    justify-content:center;

    grid-column:3;

    width:44px;
    height:42px;

    margin:0 !important;
    padding:0;

    border:1px solid rgba(205,186,150,.55);
    border-radius:8px;

    background:rgba(8,7,6,.42);
    color:#f2eee8;

    font-size:24px;
    line-height:1;

    cursor:pointer;

    position:relative;
    z-index:10002;
  }

  #kewalu-global-nav .kn-back{
    grid-column:4;
    margin:0 !important;
  }

  #kewalu-global-nav .kn-links{
    position:absolute;

    top:74px;
    left:0;
    right:0;

    display:none !important;

    flex-direction:column;
    align-items:stretch;

    gap:0 !important;

    margin:0 !important;
    padding:14px 5vw 18px !important;

    background:rgba(8,7,6,.985);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-top:1px solid rgba(232,223,208,.08);
    border-bottom:1px solid rgba(232,223,208,.16);

    box-shadow:0 16px 34px rgba(0,0,0,.32);

    z-index:10001;
  }

  #kewalu-global-nav.open .kn-links{
    display:flex !important;
  }

  #kewalu-global-nav .kn-links a{
    display:block;

    padding:15px 4px;

    color:#f2eee8;

    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;

    border-bottom:
      1px solid rgba(232,223,208,.08);
  }

  #kewalu-global-nav .kn-links a:last-child{
    border-bottom:0;
  }

  #kewalu-global-nav .kn-links a.active{
    color:#CDBA96;
  }
}

@media (max-width:560px){

  #kewalu-global-nav{
    grid-template-columns:auto 1fr auto auto;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  #kewalu-global-nav .kn-brand{
    font-size:14px !important;
  }

  #kewalu-global-nav .kn-menu{
    width:42px;
    height:40px;
  }

  #kewalu-global-nav .kn-back{
    width:42px;
    height:40px;
    min-height:40px;
  }
}

/* KEWALU_GLOBAL_FIXED_NAV_BEGIN */

/* ==========================================================
   KEWALU.NOIR – PERSISTENT GLOBAL NAVIGATION
   Nur Position / Sichtbarkeit der Navigation
   ========================================================== */

#nav,
.kewalu-global-nav,
nav[data-kewalu-nav]{
    position:sticky !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;

    z-index:9999 !important;

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

    transform:none !important;

    background:
        rgba(8,7,6,.95) !important;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid rgba(205,186,150,.14);
}


/* Scroll-Zustand darf die Navigation
   ebenfalls nicht verstecken */

#nav.scrolled,
.kewalu-global-nav.scrolled,
nav[data-kewalu-nav].scrolled{
    top:0 !important;

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

    transform:none !important;
}


/* Handy */

@media(max-width:920px){

    #nav,
    #nav.scrolled,
    .kewalu-global-nav,
    .kewalu-global-nav.scrolled,
    nav[data-kewalu-nav],
    nav[data-kewalu-nav].scrolled{
        top:0 !important;

        z-index:9999 !important;

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

        transform:none !important;
    }

}


/* KEWALU_GLOBAL_FIXED_NAV_END */