/* ==========================================================================
   KLINGE — 05-nav.css · Leiste über die volle Breite, Menütafel, Fortschritt
   Keine schwebende Pille: eine schmale Schiene, die sich beim Scrollen
   verdichtet. Die Höhe bleibt konstant, geschrumpft wird nur die Platte
   (scaleY) — dadurch bewegt sich ausschließlich transform/opacity/filter.
   ========================================================================== */

/* ---- Gerüst -------------------------------------------------------------- */
.nav {
  --nav-h-n: 68;      /* Bauhöhe in px, einheitenlos für die Rechnungen */
  --nav-drop-n: 8;    /* so viel schrumpft die Platte beim Verdichten */
  position: fixed;
  inset: 0 0 auto;
  height: calc(var(--nav-h-n) * 1px);
  z-index: var(--z-nav);
}
.nav.is-open { z-index: var(--z-overlay); }

/* Beim Abwärtsscrollen weicht die Leiste aus, beim Aufwärtsscrollen ist sie
   sofort wieder da — Bühne frei für die gepinnten Strecken. */
.nav {
  transition: transform 520ms var(--e-expo);
  will-change: transform;
}
.nav.is-away { transform: translate3d(0, -104%, 0); }
.nav.is-open { transform: none; }

/* Platte: der Grund der Leiste. Startet unsichtbar über dem Heldenbild und
   fährt beim Scrollen von oben zusammen — Kohle, Unschärfe, Hairline.        */
.nav__plate {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  transform-origin: 50% 0;
  background-color: color-mix(in srgb, var(--c-coal) 86%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
          backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: var(--shadow-sm);
  /* Unsichtbar am Seitenanfang: opacity 0 spart auch die Unschärfe ein. */
  opacity: 0;
  transition:
    transform var(--d-base) var(--e-sleek),
    opacity var(--d-base) var(--e-sleek);
  will-change: transform, opacity;
}
.nav.is-dense .nav__plate {
  opacity: 1;
  transform: scaleY(calc((var(--nav-h-n) - var(--nav-drop-n)) / var(--nav-h-n)));
}

/* Unterkante: Hairline + Fortschrittslinie. Wandert mit der Platte nach oben. */
.nav__edge {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  z-index: var(--z-base);
  transition: transform var(--d-base) var(--e-sleek);
}
.nav__edge::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity var(--d-base) var(--e-sleek);
}
.nav.is-dense .nav__edge { transform: translate3d(0, calc(var(--nav-drop-n) * -1px), 0); }
.nav.is-dense .nav__edge::before { opacity: 1; }

.nav__progress {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--c-signal);
  box-shadow: 0 0 12px rgba(196, 64, 44, 0.55);
  transform: scaleX(var(--nav-p, 0));
  transform-origin: 0 50%;
  will-change: transform;
}

/* ---- Inhaltsreihe -------------------------------------------------------- */
.nav__bar {
  position: relative;
  z-index: var(--z-sticky);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  transition: transform var(--d-base) var(--e-sleek);
}
.nav.is-dense .nav__bar { transform: translate3d(0, calc(var(--nav-drop-n) * -0.5px), 0); }

/* ---- Wortmarke ----------------------------------------------------------- */
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 0;
  min-width: 0;
}
.nav__pole {
  width: 6px;
  height: 34px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--stripe);
  background-size: 9px 9px;
  opacity: 0.92;
  transform-origin: 50% 50%;
  transition: transform var(--d-base) var(--e-back), opacity var(--d-base) var(--e-sleek);
}
.nav__brand:hover .nav__pole { transform: scaleY(1.12); opacity: 1; }
.nav__brand-text { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; }
.nav__wordmark {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.45rem, 2.3vw, 1.85rem);
  line-height: 0.84;
  letter-spacing: -0.012em;
  color: var(--t-strong);
}
.nav__sub {
  display: none;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--t-muted);
  white-space: nowrap;
  transition: opacity var(--d-base) var(--e-sleek), transform var(--d-base) var(--e-sleek);
}
.nav.is-dense .nav__sub { opacity: 0; transform: translate3d(0, -4px, 0); }

/* ---- Mittelblock --------------------------------------------------------- */
.nav__links { display: none; }
.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.85rem 0.15rem;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--t-muted);
  transition: color var(--d-fast) var(--e-sleek);
}
.nav__link::before {   /* Hairline-Wischer beim Zeigen */
  content: '';
  position: absolute;
  inset: auto 0 0.5rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--d-base) var(--e-sleek);
}
.nav__link::after {    /* Signalquadrat für den aktiven Abschnitt */
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.15rem;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  background: var(--c-signal);
  opacity: 0;
  transform: scale(0.2);
  transition: opacity var(--d-fast) var(--e-sleek), transform var(--d-base) var(--e-back);
}
.nav__link:hover { color: var(--t-strong); }
.nav__link:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
.nav__link.is-active { color: var(--t-strong); }
.nav__link.is-active::after { opacity: 1; transform: none; }
.nav__link.is-active::before { transform: scaleX(0); }

/* ---- Rechter Block ------------------------------------------------------- */
/* Gleich große Außenspalten — dadurch sitzt der Mittelblock exakt mittig. */
.nav__side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  flex: 1 1 0;
}
.nav__status { display: none; align-items: center; gap: 0.5rem; }
.nav__status-text {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--t-body);
  white-space: nowrap;
}
.nav__dot { background: var(--c-signal); }
.nav__dot.is-closed { background: var(--c-blade); }

.nav__seam { display: none; width: 1px; height: 22px; background: var(--line); flex: none; }

.nav__tel { display: none; align-items: center; gap: 0.55rem; }
.nav__nest {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--t-muted);
  transition: background-color var(--d-base) var(--e-sleek), color var(--d-base) var(--e-sleek);
}
.nav__nest svg { width: 14px; height: 14px; }
.nav__tel-num {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--t-body);
  white-space: nowrap;
  transition: color var(--d-fast) var(--e-sleek);
}
.nav__tel:hover .nav__nest { background: var(--surface-deep); color: var(--t-strong); }
.nav__tel:hover .nav__tel-num { color: var(--t-strong); }

/* ---- Burger: zwei Balken, die zum X kippen ------------------------------- */
.nav__burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color var(--d-base) var(--e-sleek), box-shadow var(--d-base) var(--e-sleek);
}
.nav__burger:hover { background: var(--surface-deep); box-shadow: inset 0 0 0 1px var(--line-strong); }
.nav__burger-box { position: relative; width: 18px; height: 12px; }
.nav__burger-bar {
  position: absolute;
  inset-inline: 0;
  height: 1.5px;
  background: var(--t-strong);
  transform-origin: 50% 50%;
  transition: transform var(--d-base) var(--e-back);
}
.nav__burger-bar:nth-child(1) { top: 0; }
.nav__burger-bar:nth-child(2) { bottom: 0; }
.nav.is-open .nav__burger { background: var(--surface-deep); }
.nav.is-open .nav__burger-bar:nth-child(1) { transform: translate3d(0, 5.25px, 0) rotate(45deg); }
.nav.is-open .nav__burger-bar:nth-child(2) { transform: translate3d(0, -5.25px, 0) rotate(-45deg); }

/* ---- Menütafel ----------------------------------------------------------- */
.nav__sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: color-mix(in srgb, var(--c-coal) 96%, transparent);
  -webkit-backdrop-filter: blur(22px);
          backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--d-base) var(--e-sleek),
    visibility 0s var(--e-sleek) var(--d-base);
}
.nav.is-open .nav__sheet { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }

.nav__sheet-inner {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: var(--sp-6);
  padding-block: calc(var(--nav-h-n) * 1px + var(--sp-6)) var(--sp-6);
}

/* Menüpunkte: große Versalien hinter einer Maske, gestaffelt enthüllt */
.nav__menu { display: grid; }
.nav__menu-item { position: relative; }
.nav__menu-link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: 0.55rem;
  transition: transform var(--d-base) var(--e-sleek);
}
.nav__menu-num {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  line-height: 1;
  color: var(--t-faint);
  flex: none;
  transition: color var(--d-base) var(--e-sleek);
}
.nav__menu-mask { display: block; overflow: hidden; padding-block: 0.06em; }
.nav__menu-mask > span {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 13vw, 4.6rem);
  line-height: 0.86;
  letter-spacing: -0.006em;
  color: var(--t-strong);
  transform: translate3d(0, 110%, 0);
  transition: transform var(--d-slow) var(--e-expo);
}
.nav.is-open .nav__menu-mask > span { transform: none; }
.nav.is-open .nav__menu-item:nth-child(2) .nav__menu-mask > span { transition-delay: 70ms; }
.nav.is-open .nav__menu-item:nth-child(3) .nav__menu-mask > span { transition-delay: 140ms; }
.nav.is-open .nav__menu-item:nth-child(4) .nav__menu-mask > span { transition-delay: 210ms; }

.nav__menu-line {
  display: block;
  height: 1px;
  background: var(--line-soft);
}
.nav__menu-line::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--c-signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--d-base) var(--e-sleek);
}
.nav__menu-link:hover { transform: translate3d(10px, 0, 0); }
.nav__menu-link:hover .nav__menu-num { color: var(--c-signal); }
.nav__menu-link:hover + .nav__menu-line::before { transform: scaleX(1); }
.nav__menu-link.is-active .nav__menu-num { color: var(--c-signal); }
.nav__menu-link--signal .nav__menu-mask > span { color: var(--c-signal); }

/* Kontaktblock: Schale + konzentrischer Kern */
.nav__card {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity var(--d-base) var(--e-sleek) 200ms, transform var(--d-slow) var(--e-expo) 200ms;
}
.nav.is-open .nav__card { opacity: 1; transform: none; }
.nav__card-core { padding: var(--sp-4); display: grid; gap: 0.6rem; }
.nav__card-status { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.nav__card-state {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--t-strong);
}
.nav__card-until {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--t-muted);
}
.nav__card-label {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  line-height: 1;
  color: var(--t-faint);
  margin-top: 0.35rem;
}
.nav__card-adr,
.nav__card-hours {
  font-style: normal;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--t-body);
}
.nav__card-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: 0.5rem; }

/* Sperrt die Seite, solange die Tafel offen ist (ergänzt KLINGE.lock()) */
.nav-open { overflow: hidden; }

/* ---- Größer als Handy ---------------------------------------------------- */
@media (min-width: 480px) {
  .nav__sub { display: block; }
}

@media (min-width: 700px) {
  .nav__sheet-inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    align-items: end;
    gap: var(--sp-7);
  }
  .nav__card { align-self: end; }
}

@media (min-width: 900px) {
  .nav { --nav-h-n: 92; --nav-drop-n: 16; }
  .nav__links {
    display: flex;
    gap: clamp(1.4rem, 2.8vw, 2.6rem);
    flex: none;
  }
  .nav__burger { display: none; }
}

@media (min-width: 1024px) {
  .nav__tel { display: inline-flex; }
  .nav__seam { display: block; }
}

@media (min-width: 1180px) {
  .nav__status { display: inline-flex; }
}

/* Flaches Fenster (Handy quer): die Tafel muss ohne Scrollen lesbar bleiben */
@media (max-height: 580px) {
  .nav__sheet-inner {
    padding-block: calc(var(--nav-h-n) * 1px + var(--sp-4)) var(--sp-4);
    gap: var(--sp-4);
  }
  .nav__menu-mask > span { font-size: clamp(1.75rem, 6.5vw, 2.5rem); }
  .nav__menu-link { padding-block: 0.3rem; }
  .nav__card-core { padding: var(--sp-3); }
}

/* ---- Weniger Bewegung ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nav__menu-mask > span { transform: none; }
  .nav__card { opacity: 1; transform: none; }
  .nav__progress { box-shadow: none; }
}