/* ===== Nav — Glass-Morph, Zigarren/Pill-Form (wie navbar-morph.html) ===== */
.nav-header{
  position:fixed;top:0;left:0;width:100%;z-index:60;
  pointer-events:none;padding:0;
}
.nav-pill-wrap{
  pointer-events:auto;
  position:relative;left:50%;transform:translateX(-50%);
  width:min(1180px,calc(100% - 40px));
  margin-top:12px;
  z-index:2;
  border-radius:12px;
  background:transparent;
  overflow:hidden;
  will-change:max-width,margin-top,transform,background,backdrop-filter,border-radius;
  transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .45s cubic-bezier(.4,0,.2,1);
}
.nav-header.is-showcase-hidden .nav-pill-wrap{
  transform:translateX(-50%) translateY(calc(-100% - 28px));
  opacity:0;
  pointer-events:none;
}
@media(max-width:767px){
  .nav-pill-wrap{width:calc(100% - 40px);margin-top:10px}
}
.nav-pill{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:100%;box-sizing:border-box;border:none;
  background:transparent;
  will-change:padding,gap;
}
/* Logo als Text-Wordmark (Theme-Sans, italic) — "true//design"
   true = bold, design = regular, // = Akzentgelb. Farbe via --head. */
.brand-logo{
  flex-shrink:0;display:inline-flex;align-items:baseline;
  font-family:var(--font);font-style:italic;letter-spacing:-.02em;
  font-size:28px;line-height:1;text-decoration:none;
  transition:color .4s var(--ease);
}
.brand-logo .lw{color:#235519}                 /* Navbar friert auf Original-Palette ein — kein Color-Shift */
.brand-logo.is-dark .lw{color:#235519}
.brand-logo .lw.bold{font-weight:700}
.brand-logo .lw.thin{font-weight:400}
.brand-logo .ls{color:var(--accent);font-weight:900;font-style:italic;padding:0 1px;letter-spacing:-.04em}
@media(max-width:560px){ .brand-logo{font-size:22px} }

.nav-links{flex:1;display:flex;justify-content:center;gap:36px;align-items:center;font-size:15px;color:#5d6651;font-weight:500}  /* fixe Original-Farbe, kein Shift */
.nav-links a{transition:color .3s var(--ease);position:relative;padding-bottom:2px}
.nav-links a:hover{color:#235519}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1)}
/* ===== Button-Icon: zwei Schrägstriche // im Logo-Stil (Theme-Font italic => exakte Neigung wie im Logo) ===== */
.btn-icon{
  display:inline-flex;align-items:baseline;
  font-family:var(--font);font-style:italic;font-weight:900;
  font-size:1.12em;line-height:1;letter-spacing:0;
  flex-shrink:0;margin-right:.34em;color:currentColor;
}
.btn-icon i{display:inline-block;transition:transform .45s var(--ease)}
.btn-icon i + i{margin-left:-.04em}
.btn:hover .btn-icon i:first-child{transform:translateX(-.1em)}
.btn:hover .btn-icon i:last-child{transform:translateX(.1em)}

.nav-cta{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--accent);background:var(--accent);color:#fff;
  padding:14px 26px;border-radius:var(--radius);
  font-family:var(--font);font-weight:700;font-style:italic;font-size:17px;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
  white-space:nowrap;
}
.nav-cta:hover{background:#235519;color:#fff;transform:translateY(-1px);box-shadow:0 14px 34px rgba(35,85,25,.35)}
.nav-cta--overlay{width:100%;max-width:320px;padding:20px 28px;font-size:18px}

.nav-toggle{
  display:none;flex-shrink:0;align-items:center;justify-content:center;
  position:relative;
  width:44px;height:44px;padding:0;border:none;border-radius:50%;
  background:transparent;cursor:pointer;color:#235519;
  -webkit-tap-highlight-color:transparent;
  transition:background .3s var(--ease),color .3s var(--ease);
}
@media (hover:hover){
  .nav-toggle:hover{background:rgba(35,85,25,.08)}
}
.nav-header:not(.is-open) .nav-toggle{background:transparent}
.nav-header.is-open .nav-toggle{color:#235519}
.nav-toggle-open{
  display:inline-flex;align-items:baseline;
  font-family:var(--font);font-style:italic;font-weight:900;
  font-size:22px;line-height:1;letter-spacing:-.1em;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.nav-toggle-open i{display:inline-block}
.nav-toggle-open i + i{margin-left:-.06em}
.nav-toggle-close{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease);
}
.nav-toggle-close span{
  position:absolute;width:22px;height:2.4px;border-radius:2px;background:currentColor;
  transition:transform .35s var(--ease);
}
.nav-toggle-close span:nth-child(1){transform:rotate(45deg)}
.nav-toggle-close span:nth-child(2){transform:rotate(-45deg)}
.nav-header.is-open .nav-toggle-open{opacity:0;transform:scale(.85)}
.nav-header.is-open .nav-toggle-close{opacity:1}

.nav-overlay{
  position:fixed;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;
  padding:120px 32px 48px;
  background:rgba(246,246,241,.94);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  clip-path:inset(0 0 100% 0);
  visibility:hidden;pointer-events:none;
  will-change:clip-path;
  transition:
    clip-path .55s cubic-bezier(.4,0,.2,1),
    visibility 0s linear .55s;
}
.nav-header.is-open .nav-overlay{
  clip-path:inset(0 0 0 0);
  visibility:visible;pointer-events:auto;
  transition:
    clip-path .55s cubic-bezier(.4,0,.2,1),
    visibility 0s linear 0s;
}
.nav-overlay-links,
.nav-cta--overlay{
  opacity:0;
  transform:translateY(-14px);
  transition:opacity .38s var(--ease),transform .38s var(--ease);
}
.nav-header.is-open .nav-overlay-links,
.nav-header.is-open .nav-cta--overlay{
  opacity:1;transform:translateY(0);
  transition-delay:.18s;
}
.nav-header:not(.is-open) .nav-overlay-links,
.nav-header:not(.is-open) .nav-cta--overlay{
  transition-delay:0s;
}
.nav-overlay-links{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  width:100%;max-width:320px;
}
.nav-overlay-links a{
  width:100%;text-align:center;
  font-size:clamp(28px,7vw,36px);font-weight:700;letter-spacing:-.03em;
  color:#235519;text-decoration:none;
  padding:10px 0;
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.nav-overlay-links a:hover{color:var(--accent);transform:translateX(4px)}

html.nav-open,html.nav-open body{overflow:hidden}

html.nav-open .to-top,
html.nav-open .to-top.show{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(16px) scale(.9);
}

@media(max-width:760px){
  .nav-links,.nav-cta--pill{display:none}
  .nav-toggle{display:inline-flex}
  .brand-logo{font-size:24px}
}

@media (prefers-reduced-motion:reduce){
  .nav-overlay{transition:visibility .2s var(--ease)}
  .nav-header.is-open .nav-overlay{clip-path:inset(0 0 0 0)}
  .nav-overlay-links,.nav-cta--overlay{opacity:1;transform:none;transition:none}
  .nav-pill-wrap{transition:none}
  .nav-header.is-showcase-hidden .nav-pill-wrap{transform:translateX(-50%);opacity:0}
}