/* ═══════════════════════════════════════════════════════════════════
   KRONBERG — header and navigation
   Loaded on every page, after the light/home reskin layers. It owns the
   fixed bar and the overlay menu outright, so there is exactly one
   header on the site instead of one for index.html and one for the rest.

   Measured off buben-zorweg.com and rebuilt to the same pattern:

     · light bar at every width — burger left, wordmark centred, actions
       right; the same treatment on every page, dark hero behind it or not
     · the menu is a translucent column over the page, not a solid sheet:
       blur(64px) saturate(180%) over near-white, the page still readable
       underneath; a soft ink veil separates it from the content behind
     · one product family open at a time. Wide: a second column beside the
       first. Narrow: the family list is replaced by the product list, and
       a back row returns — a drill-down, not an accordion
     · a product is always shown the same way: the piece small on the
       left, its name beside it

   Colours are literal and light: ink on near-white. Do not reintroduce the
   dark bar — it was rolled out on 2026-09-03 and reverted the same day
   because the header and menu must read white across the site.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --kn-ink:#ffffff;
  --kn-line:rgba(11,11,12,.16);
  --kn-line-soft:rgba(11,11,12,.10);
  --kn-text:#0b0b0c;
  --kn-dim:rgba(11,11,12,.58);
  --kn-hover:rgba(11,11,12,.05);
  --kn-hover-2:rgba(11,11,12,.08);
  --kn-ease:cubic-bezier(.2,.7,.2,1);
  --kn-h:74px;
  --kn-h-sm:58px;
}

/* ══════════════════ 1 · the bar ══════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding-top:env(safe-area-inset-top,0px);
  color:var(--kn-text);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid var(--kn-line-soft);
  transition:background .4s var(--kn-ease),border-color .4s var(--kn-ease);
}
/* the bar stays light on every page, dark hero behind it or not */
.nav.nav--dark{background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid var(--kn-line-soft)}
.nav.solid,
.nav--dark.solid{
  background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid var(--kn-line-soft);
}

.nav-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--kn-h);max-width:1360px;margin:0 auto;
  padding:0 clamp(16px,4vw,60px);position:relative;
}
/* the wordmark is centred on the bar, so both flanks need equal weight
   and the flanks must never grow into it */
.nav-left,.nav-right{display:flex;align-items:center;gap:14px;flex:1 1 0;min-width:0}
.nav-right{justify-content:flex-end}
.nav-logo-link{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;z-index:1}
.nav-logo{height:16px;width:auto;max-width:min(52vw,240px);
  filter:brightness(0) !important;opacity:.92}

/* everything the old two-tier header carried is gone: the desktop link
   row, its mega panels, the phone number, the advisory button */
.nav-item,.nav-link,.mega,.nav-phone,.nav-cta{display:none !important}

.ham{
  display:flex !important;flex-direction:column;justify-content:center;gap:5px;
  width:34px;height:34px;padding:0;background:none;border:0;cursor:pointer;
  color:currentColor;flex-shrink:0;
}
.ham span{display:block;width:21px;height:1.3px;background:currentColor;
  transition:transform .35s var(--kn-ease),opacity .2s}
.ham span:nth-child(2){width:15px}
.ham.open span:nth-child(1){transform:translateY(6.3px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0}
.ham.open span:nth-child(3){transform:translateY(-6.3px) rotate(-45deg);width:21px}

.nav-cfg-btn{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 18px;
  background:transparent;border:1px solid var(--kn-line);border-radius:0;
  color:currentColor;text-decoration:none;white-space:nowrap;flex-shrink:0;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  transition:background .25s var(--kn-ease),border-color .25s var(--kn-ease);
}
.nav-cfg-btn:hover{background:var(--kn-hover);border-color:rgba(11,11,12,.38);transform:none}
.nav-icon-btn{
  display:flex !important;align-items:center;justify-content:center;
  width:34px;height:34px;background:none;border:0;border-radius:0;
  color:currentColor;flex-shrink:0;transition:opacity .25s;
}
.nav-icon-btn:hover{opacity:.65}
.nav-icon-btn svg{width:17px;height:17px}

@media(max-width:760px){
  .nav-bar{height:var(--kn-h-sm)}
  .nav-cfg-btn{display:none !important}
  .nav-logo{height:14px}
  .nav-left,.nav-right{gap:6px}
}

/* pages start under a fixed bar that is now opaque on light pages */
body{--kn-offset:var(--kn-h)}

/* ══════════════════ 2 · the overlay ══════════════════ */
.kcnav{
  position:fixed;inset:0;z-index:150;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s var(--kn-ease),visibility .4s;
}
.kcnav.is-open{opacity:1;visibility:visible;pointer-events:auto}
.kcnav-veil{position:absolute;inset:0;background:rgba(11,11,12,.34);border:0;padding:0;cursor:pointer}

.kcnav-panel{
  position:absolute;top:0;bottom:0;left:0;
  display:flex;align-items:stretch;
  max-width:100%;
  transform:translateX(-14px);
  transition:transform .45s var(--kn-ease);
}
.kcnav.is-open .kcnav-panel{transform:none}

.kcnav-col{
  position:relative;
  width:min(430px,86vw);flex-shrink:0;
  padding:calc(var(--kn-h) + env(safe-area-inset-top,0px) + 18px) clamp(20px,2.4vw,34px)
          calc(26px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(64px) saturate(180%);backdrop-filter:blur(64px) saturate(180%);
  color:var(--kn-text);
}
.kcnav-col + .kcnav-col{border-left:1px solid var(--kn-line-soft)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .kcnav-col{background:rgba(255,255,255,.985)}
}

/* ── family list ── */
.kcnav-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--kn-line)}
.kcnav-list li{border-bottom:1px solid var(--kn-line)}
.kcnav-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;padding:13px 2px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:16px;font-weight:400;letter-spacing:-.005em;
  color:var(--kn-text);text-align:left;text-decoration:none;
  transition:background .22s,padding-left .22s var(--kn-ease);
}
.kcnav-row:hover{background:var(--kn-hover);padding-left:10px}
.kcnav-row svg{width:15px;height:15px;flex-shrink:0;color:rgba(11,11,12,.42);
  transition:color .2s,transform .25s var(--kn-ease)}
.kcnav-row:hover svg{color:var(--kn-text);transform:translateX(3px)}
.kcnav-row.is-active{background:var(--kn-hover-2)}
.kcnav-row.is-active svg{color:var(--kn-text)}

.kcnav-minor{margin-top:26px;border-top:1px solid var(--kn-line-soft)}
.kcnav-minor li{border-bottom:1px solid var(--kn-line-soft)}
.kcnav-minor .kcnav-row{font-size:13px;color:var(--kn-dim);padding:11px 2px}
.kcnav-minor .kcnav-row:hover{color:var(--kn-text)}
.kcnav-minor .kcnav-row svg{width:13px;height:13px}

.kcnav-cta{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:26px;padding:15px 18px;
  background:var(--kn-hover);border:1px solid var(--kn-line);
  color:var(--kn-text);text-decoration:none;font-size:14px;
  transition:background .25s var(--kn-ease);
}
.kcnav-cta:hover{background:var(--kn-hover-2)}
.kcnav-cta svg{width:15px;height:15px;flex-shrink:0}

.kcnav-foot{
  margin-top:30px;padding-top:18px;border-top:1px solid var(--kn-line-soft);
  display:flex;flex-direction:column;gap:5px;
  font-size:12px;color:var(--kn-dim);letter-spacing:.01em;
}
.kcnav-foot a{color:var(--kn-dim);text-decoration:none;transition:color .2s}
.kcnav-foot a:hover{color:var(--kn-text)}

/* ── product column ── */
.kcnav-col--sub{display:none}
.kcnav-col--sub.is-open{display:block}
.kcnav-sub-title{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(11,11,12,.45);margin-bottom:12px;
}
.kcnav-prods{list-style:none;margin:0;padding:0;border-top:1px solid var(--kn-line-soft)}
.kcnav-prods li{border-bottom:1px solid var(--kn-line-soft)}
.kcnav-prod{
  display:flex;align-items:center;gap:16px;padding:12px 2px;
  text-decoration:none;color:var(--kn-text);
  transition:background .22s,padding-left .22s var(--kn-ease);
}
.kcnav-prod:hover{background:var(--kn-hover);padding-left:8px}
/* the packshots are cut out on white, so the tile is a deliberate light
   plate rather than an accident of the source files */
.kcnav-fig{
  width:84px;height:60px;flex-shrink:0;overflow:hidden;
  background:#f2f2f0;border:1px solid rgba(11,11,12,.10);
}
.kcnav-fig img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--kn-ease)}
.kcnav-prod:hover .kcnav-fig img{transform:scale(1.06)}
.kcnav-name{font-size:15px;letter-spacing:.01em;line-height:1.25}

/* the back row only exists in the drill-down */
.kcnav-back{display:none}

/* ══════════════════ 3 · narrow: drill-down ══════════════════ */
@media(max-width:860px){
  .kcnav-panel{width:100%}
  .kcnav-col{padding-top:calc(var(--kn-h-sm) + env(safe-area-inset-top,0px) + 22px)}
  .kcnav-col{width:100%;padding-left:clamp(20px,6vw,34px);padding-right:clamp(20px,6vw,34px)}
  .kcnav-col + .kcnav-col{border-left:0}
  /* the product list takes the screen; the family list steps aside */
  .kcnav-col--sub{position:absolute;inset:0;display:none}
  .kcnav-col--sub.is-open{display:block}
  .kcnav.has-sub .kcnav-col--root{visibility:hidden}
  .kcnav-veil{display:none}
  .kcnav-back{
    display:flex;align-items:center;gap:10px;margin-bottom:16px;
    background:none;border:0;padding:4px 0;cursor:pointer;
    font:inherit;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--kn-dim);
  }
  .kcnav-back:hover{color:var(--kn-text)}
  .kcnav-back svg{width:14px;height:14px;transform:rotate(180deg)}
  .kcnav-row{font-size:17px;padding:14px 2px}
  .kcnav-fig{width:96px;height:68px}
  .kcnav-name{font-size:16px}
}

@media(prefers-reduced-motion:reduce){
  .kcnav,.kcnav-panel,.kcnav-row,.kcnav-prod,.kcnav-fig img{transition-duration:.01ms !important}
}

/* ══════════════════ 4 · retired ══════════════════
   index.html's own header/overlay and the first draft of the shared menu
   are gone from the markup; these keep any cached copy from flashing. */
.kb-header,.kb-ov,.mob-panel,.mob-backdrop{display:none !important}