.page-wrap {
  position: relative;
  z-index: 200;
  min-height: 100vh;
  background: var(--bg);
  transition: transform .55s var(--ease), border-radius .55s var(--ease), box-shadow .55s var(--ease);
  will-change: transform;
}
body.menu-open .page-wrap {
  transform: translateX(var(--drawer-w, 240px));
}

/* Hamburger + Menu (Icon 04 + Variante A) */
.hb {
  position: fixed; top: 14px; left: 20px;
  z-index: 500;
  background: transparent; border: none; cursor: pointer;
  width: 48px; height: 48px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .55s var(--ease);
}
body.menu-open .hb { transform: translateX(var(--drawer-w, 240px)); }
.hb__lines { position: relative; width: 32px; height: 22px; }
.hb__lines span {
  position: absolute; left: 0;
  height: 2px; background: var(--ink);
  border-radius: 2px; transform-origin: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.55), 0 0 8px rgba(0,0,0,.35);
  transition: transform .5s var(--ease), opacity .3s var(--ease), top .5s var(--ease), width .5s var(--ease), background .5s var(--ease);
}
.hb__lines span:nth-child(1) { top: 0; width: 32px; }
.hb__lines span:nth-child(2) { top: 10px; width: 22px; }
.hb__lines span:nth-child(3) { top: 20px; width: 26px; }
.menu {
  position: fixed;
  top: 0; left: 0;
  width: max-content; max-width: 82vw; height: 100vh;
  z-index: 100;
  background: var(--bg);
  padding: 90px 28px 24px 20px;
  display: flex; flex-direction: column;
  justify-content: flex-start;
  transform: translateX(0);
}

.menu ul { list-style: none; display: flex; flex-direction: column; gap: 1.4rem; text-align: left; }
.menu ul li { opacity: 1; transform: none; }




.menu ul li a {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  color: var(--ink); text-decoration: none;
  letter-spacing: -0.02em; padding: 4px 0;
  transition: color .25s var(--ease); position: relative;
}
.menu ul li a { display: inline-flex; align-items: center; gap: .8rem; }
.menu ul li a .home-ico { width: 30px; height: 30px; display: inline-block; }
.menu ul li a .home-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu ul li a::after {
  content: ""; position: absolute;
  left: 50%; right: 50%; bottom: -6px;
  height: 2px; background: var(--brass);
  transition: left .4s var(--ease), right .4s var(--ease);
}
.menu ul li a:hover::after,
.menu ul li a.current::after { left: 0; right: 0; }
.menu .foot {
  position: absolute; bottom: 32px; left: 20px; right: 16px;
  font-family: var(--f-mono); font-size: .65rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--grey); opacity: .55;
}
.menu .foot b { color: var(--brass); font-weight: 500; }

/* === 3D-Drawer: bildschirm-festes Fenster, auf allen Seiten IDENTISCH ===
   Fester Layer in Viewport-Groesse, schiebt mit dem Menue mit. Zeichnet nur die
   linke Kante (helles Kantenlicht + Schatten) und rundet die Ecken oben/unten
   mit --bg-Masken. Unabhaengig von Seitenhoehe/Inhalt/Scroll -> ueberall gleich. */
.drawer-fx {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  pointer-events: none; z-index: 210;
  opacity: 0;
  transition: transform .55s var(--ease), opacity .35s var(--ease);
}
body.menu-open .drawer-fx { transform: translateX(var(--drawer-w, 240px)); opacity: 1; }
.drawer-fx::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background: rgba(244,241,232,.18);
  box-shadow: -16px 0 40px 4px rgba(0,0,0,.55);
}
.drawer-fx i { position: absolute; left: 0; width: 22px; height: 22px; background: var(--bg); }
.drawer-fx i.t { top: 0; -webkit-mask: radial-gradient(circle 22px at 100% 100%, transparent 21.3px, #000 22px); mask: radial-gradient(circle 22px at 100% 100%, transparent 21.3px, #000 22px); }
.drawer-fx i.b { bottom: 0; -webkit-mask: radial-gradient(circle 22px at 100% 0, transparent 21.3px, #000 22px); mask: radial-gradient(circle 22px at 100% 0, transparent 21.3px, #000 22px); }

/* === Menu-Typografie "Etikett" (Martins Wahl 2026-09-02) ===
   Hauptpunkte durch Haarlinien getrennt, aktuelle Seite orange (kein Unterstrich).
   "Leistungen" ist ein kleines Mono-Etikett mit Chevron, die Unterseiten darunter
   sind GROSS (gleiche Groesse wie Hauptpunkte), gestrichelte Haarlinien, Pfeil rechts. */
.menu > ul { gap: 0; }
/* Keine Trennlinien (Martin 02.09.), Abstand nur ueber Padding */
.menu > ul > li { border: 0; padding: .7rem 0; }
.menu > ul > li:first-child { padding-top: 0; }
.menu ul li a { font-weight: 600; }
.menu ul li a::after { display: none; }
.menu ul li a:hover, .menu ul li a.current { color: var(--brass); }
/* "Leistungen" steht zu GROSS wie die anderen Punkte (g-big). Beim Klick schrumpft
   es zum Mono-Etikett (g-small) und die Unterseiten fahren aus. Beide Zustaende
   liegen uebereinander, Hoehe animiert per grid-template-rows 1fr/0fr. */
.menu .grp { display: block; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
.menu .grp .g-big, .menu .grp .g-small {
  display: grid; grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows .45s var(--ease), opacity .3s var(--ease);
}
.menu .grp .g-big > span, .menu .grp .g-small > span { display: block; overflow: hidden; min-height: 0; }
.menu .grp .g-big > span > span {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.1;
  color: var(--ink); display: inline-block; padding: 4px 0;
  transition: color .25s var(--ease);
}
.menu .grp:hover .g-big > span > span, .menu .grp:focus-visible .g-big > span > span { color: var(--brass); }
/* Chevron sitzt auf der Grundlinie: inline-block-Unterkante = Baseline, dann um die
   Pfeilhoehe unter der Spitze (8/24 der Box = .14em) nach unten, Spitze = Baseline. */
.menu .grp .g-big .chev {
  display: inline-block; vertical-align: baseline; line-height: 0;
  width: .42em; height: .42em; margin-left: .3em; color: var(--brass);
}
/* Chevron-Mitte auf der Mitte der Kleinbuchstaben (x-Hoehe Bricolage 600 = .529em,
   Mitte .264em ueber Baseline). Chevron-Mitte ohne Shift bei 11.5/24*.42em = .201em
   -> um .063em = 15% der Box nach oben. */
.menu .grp .g-big .chev svg { transform: translateY(-15%); }
.menu .grp .g-small .chev { display: inline-block; }
.menu .grp .g-small > span > span {
  font-family: var(--f-mono); font-weight: 500; font-size: .66rem;
  letter-spacing: .3em; text-transform: uppercase; color: rgba(244,241,232,.42);
  display: inline-flex; align-items: center; gap: .7em; padding: .15rem 0 .3rem;
}
.menu .grp .g-small .chev { width: .9em; height: .9em; color: var(--brass); }
.menu .grp .chev { flex: none; transition: transform .45s var(--ease); }
.menu .grp .chev svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.menu .grp .count { color: var(--brass); letter-spacing: .1em; }
.menu .grp .count:empty { display: none; }
.menu .grp[aria-expanded="false"] .g-small { grid-template-rows: 0fr; opacity: 0; }
.menu .grp[aria-expanded="true"]  .g-big   { grid-template-rows: 0fr; opacity: 0; }
.menu .grp[aria-expanded="false"] + .sub { grid-template-rows: 0fr; opacity: 0; }
.menu .sub {
  display: grid; grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows .5s var(--ease), opacity .35s var(--ease);
}
.menu .sub > div { overflow: hidden; min-height: 0; }
.menu .sub ul { list-style: none; display: flex; flex-direction: column; gap: 0; padding: 0; }
.menu .sub li { border: 0; }
.menu .sub a {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.1;
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: .45rem 10px .45rem 0;
  transition: color .25s var(--ease), padding-left .35s var(--ease);
}
.menu .sub a .arr { width: .6em; height: .6em; flex: none; color: rgba(244,241,232,.38); transition: transform .35s var(--ease), color .25s var(--ease); }
.menu .sub a .arr svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu .sub a:hover { padding-left: 6px; }
.menu .sub a:hover .arr, .menu .sub a.current .arr { color: var(--brass); transform: translateX(6px); }