/* ==========================================================================
   Fidan Beauty – Menü "Lotus" (gehört zu js/menu.js)
   Mit JS (html.js): Menüpunkte als Einlinien-Schreibschrift (SVG aus build.js, aria-hidden), der echte Linktext bleibt für
   Screenreader erhalten. Die Klasse .menu--anim setzt erst menu.js; ohne sie gilt das Menü aus style.css (volle Creme-Fläche).
   Ruhezustand = Endzustand "offen"; menu.js animiert nur transform / opacity / filter / clip-path / stroke-dashoffset.
   ========================================================================== */

/* Schreibschrift: Höhe so, dass die Wörter etwa so breit sind wie bisher die Italiana-Wörter; auf schmalen Bildschirmen begrenzt
   die Breite ("Behandlungen" ist das breiteste Wort, Seitenverhältnis ~5,1). Strichstärke in SVG-Einheiten (wächst mit der Schrift). */
.js .menu__nav { --wh: min(clamp(46px, 8.4vh, 64px), calc((100vw - 2 * var(--pad) - 1.6rem) / 5.2)); gap: .25rem; }
.js .menu__nav a { display: block; padding: .3rem .8rem; line-height: 0; border-radius: 6px; }
.js .menu__nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.js .menu__wort { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.js .menu__schrift { display: block; height: var(--wh); width: calc(var(--wh) * var(--sw) / var(--sh)); overflow: visible; }
.js .menu__schrift g { stroke-width: 2.9; }
.menu__schrift path { stroke-dasharray: 1 1; }   /* gezeichnet = stroke-dashoffset 0 (Ruhezustand); menu.js schreibt von 1 nach 0 */

/* Statt voller Creme-Fläche: Seite bleibt sichtbar, verschwommen, mit Creme-Schleier.
   Schleier-Deckkraft .7: selbst über schwarzem Grund bleibt Schokobraun bei ca. 6:1 (geprüft in pruefen.js). */
.menu.menu--anim { background: none; }
.menu__veil { position: fixed; inset: 0; z-index: -1; background: rgba(251, 247, 241, .7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: none; }
.menu--anim .menu__nav { position: relative; z-index: 1; }

/* Lotus: bildschirmfüllendes SVG (1 Einheit = 1 px) über dem Schleier, unter den Menüpunkten. menu.js setzt Mitte und Größe
   (--lx, --ly, --ls, --la) und die Farbe der Kopfzeile beim Klick (--lc). Offen: zartes Wasserzeichen (Deckkraft .15). */
.menu--anim .menu__lotus { display: block; position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; color: var(--lc, var(--gold)); opacity: .15; }
.menu__lotus-g { transform: translate(var(--lx, 50vw), var(--ly, 50vh)) rotate(var(--la, 0deg)) scale(var(--ls, 3)); }
.menu__ader { stroke-width: .5; stroke-dasharray: 1 1; opacity: .7; }   /* Adern in Lotus-Einheiten: groß ~1,5 px, klein unsichtbar */

/* Menü-Knopf während der Animation: menu.js steuert Lotus, Wort und X, CSS-Übergänge ruhen solange */
.menubtn--fly .menubtn__lotus, .menubtn--fly .menubtn__label, .menubtn--fly .menubtn__x { transition: none; }

/* Klang-Schalter (menu.js, js/klang.js): nur mit JS, unten mittig im offenen Menü. Gleiche Linienstärke wie Lotus/X (~1,1 px), Schokobraun,
   Schrift wie "Menü" (Jost, klein, Versalien, gesperrt). Mindestens 44 px Trefferfläche; Fokusring wie bei den Menüpunkten. */
.menu__klang { display: none; }
.js .menu--anim .menu__klang { display: inline-flex; align-items: center; gap: 10px; position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px)); min-width: 44px; min-height: 44px; padding: 0 14px; background: none; border: 0; border-radius: 22px; color: var(--ink); font: 500 .78rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.js .menu--anim .menu__klang[hidden] { display: none; }
.menu__klang svg { display: block; flex: none; width: 22px; height: 22px; overflow: visible; }
.menu__klang-l { stroke-width: 1.1px; vector-effect: non-scaling-stroke; }
.menu__klang-strich { display: none; }
.menu__klang[aria-pressed="false"] .menu__klang-welle { display: none; }
.menu__klang[aria-pressed="false"] .menu__klang-strich { display: inline; }
.menu__klang-text { padding-top: 1px; }
.menu__klang:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Menü-Modus (menu.js setzt data-modus): "haupt" = Menüpunkte, "sprache" = Deutsch / English. Die aktuelle Sprache ist zart markiert. */
.js .menu[data-modus="sprache"] .menu__nav--haupt, .js .menu:not([data-modus="sprache"]) .menu__nav--sprache { display: none; }   /* ohne JS: beide Zeilen sichtbar */
.menu__nav--sprache a[aria-current="page"] { opacity: .45; }