/* menu: Vollbildmaske, leicht transparent, faehrt von oben herein (Vorhang).
   --cap-menu: Titelgroesse, solange acht Punkte in die Fensterhoehe passen, sonst so viel kleiner wie noetig
   (8 Zeilen a 717/690 Versalhoehen (Origin; Akzidenz war 754/706) + 7 Abstaende a 0,16 = 9,66 Versalhoehen; Rand oben und unten frei). */
.menu{--cap-menu:min(var(--cap-titel), calc((100vh - 6 * var(--rand)) / 9.66))}
.menu{position:fixed;inset:0;z-index:100;background:rgba(18,18,18,.93);color:#fbfbfb;
  transform:translateY(-100%);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.menu.offen{transform:none}
.menu-name{position:absolute;top:var(--rand);left:var(--rand)}
.menu-uhr{position:absolute;top:var(--rand);left:var(--mitte);white-space:nowrap;color:#fbfbfb}
.menu-zu{position:absolute;top:var(--rand);right:var(--rand);color:#fbfbfb}
.menu-liste{position:absolute;left:var(--rand);top:50%;transform:translateY(-50%);display:grid;gap:calc(var(--cap-menu) * .16);max-height:calc(100vh - 3 * var(--rand));overflow:auto}
.menu-punkt{display:flex;align-items:flex-start;gap:.4em;height:calc(var(--cap-menu) * 717 / 690);color:#fbfbfb}
.menu-zahl{font-family:var(--schrift-display);word-spacing:.145em;font-size:var(--t-mittel);line-height:calc(1 * var(--lh-faktor));color:var(--akzent)}
.menu-punkt svg{height:100%;width:auto;display:block;fill:currentColor}
.menu-punkt svg path{fill:currentColor;stroke:currentColor}
.menu-punkt:hover,.menu-punkt.an{color:var(--akzent)}
.menu-legal{position:absolute;left:var(--rand);bottom:var(--rand);display:flex;gap:calc(var(--steg) * 1.6);color:rgba(251,251,251,.55)}
.menu-legal a:hover,.menu-legal a.an{color:var(--akzent)}
@media (prefers-reduced-motion:reduce){.menu{transition:none}}