/* Lune Beauty — site header (markup: tools/site-kit.cjs `header()`, behaviour: assets/js/lune-header.js).
 * Desktop: logo | Behandlungen ▾ · Preise · Shop · Studio ▾ | Termin anfragen · ☾
 * Mobile/tablet (< 1024px): logo | ☾ | ☰ with an accordion drawer. */
:root{
  --lh-h:76px;
  --lh-bg:rgba(251,248,243,.86);
  --lh-bg-solid:#fbf8f3;
  --lh-ink:#2b2217;
  --lh-muted:#7a6a55;
  --lh-gold:#b38743;
  --lh-gold-soft:#dec184;
  --lh-line:rgba(179,135,67,.22);
  --lh-panel:#fffdf9;
  --lh-shadow:0 18px 50px rgba(47,38,27,.10),0 2px 8px rgba(47,38,27,.04);
  --lh-hover:rgba(179,135,67,.08);
}
html[data-theme="dark"]{
  --lh-bg:rgba(18,16,14,.86);
  --lh-bg-solid:#14110e;
  --lh-ink:#fff8ee;
  --lh-muted:#cdbfab;
  --lh-gold:#d9b467;
  --lh-gold-soft:#f0d59b;
  --lh-line:rgba(217,180,103,.22);
  --lh-panel:#1d1813;
  --lh-shadow:0 22px 60px rgba(0,0,0,.45);
  --lh-hover:rgba(217,180,103,.09);
}

.lx-header{position:fixed;inset:0 0 auto 0;z-index:10050;height:var(--lh-h);
  background:var(--lh-bg)!important;backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;box-shadow:none;transition:box-shadow .3s ease,border-color .3s ease,background-color .3s ease;
  font-family:'Inter',system-ui,sans-serif}
.lx-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--lh-gold) 18%,var(--lh-gold) 82%,transparent);opacity:.45;transition:opacity .3s}
.lx-header.is-scrolled{box-shadow:0 10px 30px rgba(47,38,27,.07)!important}
.lx-header.is-scrolled::after{opacity:.25}
.lx-header-space{height:var(--lh-h)}

.lx-h-inner{height:100%;max-width:1240px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:24px}
.lx-brand{display:flex;align-items:center;flex:0 0 auto;height:100%}
.lx-brand img{display:block;height:58px;width:auto;transition:height .3s ease}
.lx-header.is-scrolled .lx-brand img{height:52px}

/* desktop navigation */
.lx-menu{flex:1;display:flex;justify-content:center}
.lx-menu>ul{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.lx-menu>ul>li{position:relative}
.lx-header .lx-top{position:relative;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 14px;border:0;border-radius:999px;background:none;
  color:var(--lh-ink)!important;font:500 .95rem/1 'Inter',system-ui,sans-serif;letter-spacing:.01em;text-decoration:none;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;white-space:nowrap}
.lx-header .lx-top:hover,.lx-header .lx-top:focus-visible,.lx-header li.is-open>.lx-top{background:var(--lh-hover);color:var(--lh-gold)!important}
.lx-header .lx-top[aria-current="page"],.lx-header .lx-top.is-active{color:var(--lh-gold)!important}
.lx-header .lx-top[aria-current="page"]::after,.lx-header .lx-top.is-active::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--lh-gold)}
.lx-caret{width:10px;height:10px;transition:transform .25s ease;opacity:.7}
.lx-header li.is-open .lx-caret{transform:rotate(180deg)}
.lx-header :focus-visible{outline:2px solid var(--lh-gold);outline-offset:2px}

/* dropdowns: absolutely positioned → no layout shift */
.lx-drop{position:absolute;top:calc(100% + 10px);left:50%;min-width:270px;padding:10px;border:1px solid var(--lh-line);border-radius:20px;
  background:var(--lh-panel);box-shadow:var(--lh-shadow);opacity:0;visibility:hidden;transform:translate(-50%,6px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.lx-drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px} /* hover bridge between title and panel */
.lx-header li.is-open>.lx-drop{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s ease,transform .2s ease,visibility 0s}
.lx-drop.wide{min-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;padding:14px}
.lx-drop .lx-grp{padding:2px 0}
.lx-drop .lx-grp-t{display:block;padding:8px 12px 4px;color:var(--lh-gold);font:800 .66rem/1.2 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase}
.lx-header .lx-drop a{display:block;padding:10px 12px;border-radius:12px;color:var(--lh-ink)!important;text-decoration:none;transition:background-color .18s ease}
.lx-header .lx-drop a b{display:block;font:600 .93rem/1.25 'Inter',sans-serif}
.lx-header .lx-drop a span{display:block;margin-top:2px;color:var(--lh-muted);font:400 .8rem/1.35 'Inter',sans-serif}
.lx-header .lx-drop a:hover,.lx-header .lx-drop a:focus-visible{background:var(--lh-hover)}
.lx-header .lx-drop a:hover b{color:var(--lh-gold)}
.lx-header .lx-drop a[aria-current="page"] b{color:var(--lh-gold)}
.lx-drop .lx-all{grid-column:1/-1;margin-top:4px;padding-top:8px;border-top:1px solid var(--lh-line)}
.lx-header .lx-drop .lx-all a{display:flex;justify-content:space-between;align-items:center;font:600 .86rem 'Inter',sans-serif;color:var(--lh-gold)!important}

/* right side */
.lx-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.lx-header .lx-cta{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;
  background:linear-gradient(135deg,#2f2a24,#6f5226);color:#fff!important;font:600 .9rem/1 'Inter',sans-serif;letter-spacing:.01em;text-decoration:none;
  box-shadow:0 8px 22px rgba(47,38,27,.16);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;white-space:nowrap}
.lx-header .lx-cta:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(47,38,27,.22);filter:brightness(1.06)}
html[data-theme="dark"] .lx-header .lx-cta{background:linear-gradient(135deg,#d9b467,#a97c35);color:#17120d!important}
.lx-icon-btn,.lx-header .lune-theme-toggle,.lx-header .nav-cart{position:relative!important;inset:auto!important;width:42px!important;height:42px!important;margin:0!important;
  display:inline-grid!important;place-items:center;border:1px solid var(--lh-line)!important;border-radius:50%;background:transparent!important;
  color:var(--lh-ink)!important;box-shadow:none!important;cursor:pointer;backdrop-filter:none!important;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.lx-icon-btn:hover,.lx-header .lune-theme-toggle:hover,.lx-header .nav-cart:hover{background:var(--lh-hover)!important;color:var(--lh-gold)!important;border-color:var(--lh-gold)!important;transform:none}
.lx-header .lune-theme-toggle svg,.lx-header .nav-cart svg,.lx-icon-btn svg{width:19px;height:19px}
.lx-burger{display:none!important;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.lx-burger span{display:block;width:18px;height:1.6px;margin:0;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease}

/* mobile drawer */
.lx-sheet{display:none}
@media (max-width:1023px){
  :root{--lh-h:66px}
  .lx-h-inner{padding:0 16px;gap:10px}
  .lx-brand{margin-right:auto}
  .lx-brand img,.lx-header.is-scrolled .lx-brand img{height:48px}
  .lx-menu,.lx-actions .lx-cta{display:none}
  .lx-burger{display:inline-flex!important}
  .lx-sheet{display:block;position:fixed;top:var(--lh-h);left:0;right:0;height:calc(100dvh - var(--lh-h));z-index:1;visibility:hidden;pointer-events:none}
  .lx-sheet-scrim{position:absolute;inset:0;background:rgba(20,15,10,.32);opacity:0;transition:opacity .25s ease}
  .lx-sheet-panel{position:absolute;inset:0 0 auto 0;max-height:calc(100dvh - var(--lh-h));overflow:auto;overscroll-behavior:contain;
    background:var(--lh-bg-solid);border-bottom:1px solid var(--lh-line);box-shadow:0 30px 60px rgba(0,0,0,.14);
    padding:8px 16px 22px;transform:translateY(-10px);opacity:0;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
  .lx-header.is-menu .lx-sheet{visibility:visible;pointer-events:auto}
  .lx-header.is-menu .lx-sheet-scrim{opacity:1}
  .lx-header.is-menu .lx-sheet-panel{transform:none;opacity:1}
  .lx-header.is-menu .lx-burger span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
  .lx-header.is-menu .lx-burger span:nth-child(2){opacity:0}
  .lx-header.is-menu .lx-burger span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
  .lx-m-list{list-style:none;margin:0;padding:0}
  .lx-m-list>li{border-bottom:1px solid var(--lh-line)}
  .lx-header .lx-m-link,.lx-header .lx-m-acc{display:flex;width:100%;align-items:center;justify-content:space-between;min-height:56px;padding:0 4px;border:0;background:none;
    color:var(--lh-ink)!important;font:500 1.06rem 'Inter',sans-serif;text-decoration:none;text-align:left;cursor:pointer}
  .lx-m-acc .lx-caret{width:12px;height:12px}
  .lx-m-acc[aria-expanded="true"] .lx-caret{transform:rotate(180deg)}
  .lx-m-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
  .lx-m-sub>div{overflow:hidden}
  .lx-m-acc[aria-expanded="true"]+.lx-m-sub{grid-template-rows:1fr}
  .lx-header .lx-m-sub a{display:flex;align-items:center;min-height:46px;padding:0 4px 0 14px;color:var(--lh-muted)!important;font:400 .98rem 'Inter',sans-serif;text-decoration:none;border-left:1px solid var(--lh-line)}
  .lx-header .lx-m-sub a[aria-current="page"]{color:var(--lh-gold)!important}
  .lx-m-sub .lx-m-t{display:block;padding:12px 4px 2px 14px;color:var(--lh-gold);font:800 .64rem 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase}
  .lx-m-sub>div>:last-child{margin-bottom:10px}
  .lx-header .lx-m-cta{display:flex;align-items:center;justify-content:center;min-height:54px;margin-top:18px;border-radius:999px;
    background:linear-gradient(135deg,#2f2a24,#6f5226);color:#fff!important;font:600 1rem 'Inter',sans-serif;text-decoration:none}
  html[data-theme="dark"] .lx-header .lx-m-cta{background:linear-gradient(135deg,#d9b467,#a97c35);color:#17120d!important}
  .lx-m-contact{display:flex;justify-content:center;gap:18px;margin-top:14px;font:.88rem 'Inter',sans-serif}
  .lx-header .lx-m-contact a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--lh-muted)!important;text-decoration:none}
  body.lx-lock{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.lx-header *,.lx-header{transition:none!important}}
