/* Bruno Menue-Entwuerfe, gemeinsame Basis.
   Greift nur ab 751px. Das Handy-Menue (<=750px) bleibt unberuehrt. */
.bm{
  --bm-orange:#f6a429; --bm-white:#fff; --bm-ink:#000;
  --bm-font:quicksand,sans-serif;
  --bm-in:cubic-bezier(.22,1,.36,1);     /* Eintritt: weich auslaufend */
  --bm-out:cubic-bezier(.4,0,1,1);       /* Austritt: schneller, beschleunigend */
  position:fixed; inset:0; z-index:2147483000; pointer-events:none;
  font-family:var(--bm-font); -webkit-font-smoothing:antialiased;
}
.bm[hidden]{display:none!important;}
.bm *,.bm *::before,.bm *::after{box-sizing:border-box;}
.bm-panel,.bm-scrim{pointer-events:auto;}
.bm-scrim{position:absolute; inset:0; opacity:0;}
.bm-list{list-style:none; margin:0; padding:0;}
.bm a{color:var(--bm-white); text-decoration:none; font-family:var(--bm-font); font-weight:400; cursor:pointer;}
.bm a[aria-current="page"]{color:var(--bm-ink);}
.bm-num{display:none;}
.bm-close{
  appearance:none; -webkit-appearance:none; border:0; border-radius:0; background:transparent; padding:0; margin:0;
  width:48px; height:48px; display:grid; place-items:center; color:var(--bm-white); cursor:pointer;
}
.bm-close svg{width:30px; height:30px; stroke:currentColor; stroke-width:1.5; fill:none; stroke-linecap:square;}
.bm a:focus-visible,.bm-close:focus-visible{outline:2px solid var(--bm-ink); outline-offset:3px;}
.bm a:focus:not(:focus-visible),.bm-close:focus:not(:focus-visible){outline:none;}

/* Scroll-Sperre nur fuer Varianten mit Abdeckung; die Scrollleiste behaelt ihren Platz. */
body.bm-lock{overflow:hidden!important; scrollbar-gutter:stable;}

@media (max-width:750px){ .bm{display:none!important;} }
@media (min-width:751px){ html.bm-ready [data-hook="hamburger-overlay-root"]{display:none!important;} }

@media (prefers-reduced-motion:reduce){
  .bm *,.bm *::before,.bm *::after{transition-duration:.01ms!important; transition-delay:0s!important; animation:none!important;}
}

/* Entwurf 1 · Seitenblatt
   Schmale Leiste von rechts wie am Handy, mit klarer Liste ohne Nummerierung.
   Signature: die weissen Trennlinien zeichnen sich nacheinander von links nach rechts. */
.bm-v1 .bm-scrim{background:rgba(0,0,0,.2); transition:opacity .24s var(--bm-out);}
.bm-v1[data-state="open"] .bm-scrim{opacity:1; transition:opacity .42s var(--bm-in);}

.bm-v1 .bm-panel{
  position:absolute; top:0; right:0; bottom:0;
  width:max-content; min-width:320px; max-width:calc(100vw - 48px);
  padding:108px 64px 48px 52px; overflow-y:auto; overscroll-behavior:contain;
  background:var(--bm-orange);
  transform:translate3d(100%,0,0); transition:transform .26s var(--bm-out);
}
.bm-v1[data-state="open"] .bm-panel{transform:none; transition:transform .48s var(--bm-in);}
.bm-v1 .bm-close{position:absolute; top:calc(var(--bm-cy) - 24px); right:calc(var(--bm-cr) - 24px);}

.bm-v1 .bm-list li{position:relative;}
.bm-v1 .bm-list li::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--bm-white);
  transform:scaleX(0); transform-origin:left center; transition:transform .18s var(--bm-out);
}
.bm-v1[data-state="open"] .bm-list li::after{
  transform:scaleX(1); transition:transform .56s var(--bm-in) calc(.2s + var(--i) * .08s);
}
.bm-v1 .bm-list a{
  display:flex; align-items:baseline; gap:20px; min-width:230px; padding:16px 12px 16px 0;
  font-size:22px; line-height:1.35; transition:transform .22s var(--bm-in);
}
.bm-v1 .bm-num{
  display:inline-block; min-width:20px; font-size:12px; letter-spacing:.04em; font-variant-numeric:tabular-nums;
  transition:color .2s;
}
.bm-v1 .bm-list a > span{opacity:0; transform:translateX(18px); transition:opacity .12s, transform .18s var(--bm-out);}
.bm-v1[data-state="open"] .bm-list a > span{
  opacity:1; transform:none;
  transition:opacity .4s ease-out calc(.16s + var(--i) * .08s), transform .5s var(--bm-in) calc(.16s + var(--i) * .08s);
}
/* Hover: Eintrag rueckt ein, die Nummer wird schwarz */
.bm-v1 .bm-list a:hover{transform:translateX(8px);}
.bm-v1 .bm-list a:hover .bm-num{color:var(--bm-ink);}

/* Original Wix close geometry, compact icon and original quarter-turn hover. */
.bm-v1 .bm-close svg{width:calc(var(--bm-icon-size,45px) * .7);height:calc(var(--bm-icon-size,45px) * .7);fill:none;stroke:currentColor;stroke-width:9.517;stroke-linecap:butt;transform:rotate(0deg);transition:transform .2s ease;}
.bm-v1 .bm-close:hover svg,.bm-v1 .bm-close:focus-visible svg{transform:rotate(90deg);}