/* =============================================================================
   EDGE-NAV — die mobile Navigation von SNX Solutions
   „Magnetic Handle": Burger oben rechts, der beim Scrollen an die rechte Kante
   wandert und zu drei Punkten wird; dahinter ein Off-Canvas-Panel, das per Tap
   ODER Wischen von der rechten Kante geoeffnet wird.

   GEMEINSAM NUTZBAR: Alle Farben laufen ueber Fallback-Ketten, damit dieselbe
   Datei im dunklen Design-System der Startseite (--color-*) UND im hellen von
   /websites (--navy/--cyan/--muted) funktioniert. Ziel ist EINE Quelle statt
   zweier driftender Kopien.
   Original: assets/css/site.css (Startseite). Wenn die Startseite auf diese
   Datei umgestellt wird, dort den Block entfernen.
   ============================================================================= */

@media(max-width:768px){

  /* --- Griff ------------------------------------------------------------- */
  .edge-handle{position:fixed;z-index:34;display:flex;
    /* Standardzustand = BURGER oben rechts. Fixiert, damit er beim Wegscrollen
       des Headers an seiner Stelle bleibt, bis er sich umwandelt. */
    top:36px;right:18px;
    width:44px;height:64px;margin:0;border:0;background:none;
    flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;
    transform:translateY(-50%);cursor:pointer;-webkit-tap-highlight-color:transparent;
    /* Bewegung NUR beim Zustandswechsel: Position + Balkengeometrie morphen. */
    transition:top .34s cubic-bezier(.4,0,.2,1),right .34s cubic-bezier(.4,0,.2,1),opacity .3s ease}
  .edge-handle i{position:relative;width:24px;height:2px;border-radius:2px;
    background:rgba(245,248,252,.9);box-shadow:0 0 9px rgba(25,191,244,.55);
    transition:width .34s cubic-bezier(.4,0,.2,1),height .34s cubic-bezier(.4,0,.2,1),border-radius .34s cubic-bezier(.4,0,.2,1)}
  /* Dunkle Kopie ueber jedem Balken, von ZWEI Seiten beschneidbar. Beide Werte
     sind Anteile der Balkenhoehe, beide sagen "hier ist die Kopie weg, der
     Balken also hell".

     --hell schneidet von OBEN. Das ist die Startseite: sie laeuft aus dem
     Dunkeln in helle Sektionen, die von unten hereinkommen — der Balken muss
     also von UNTEN nach oben dunkel werden, was heisst, dass die Kopie von oben
     her stehen bleibt. 100% = ganz weg (heller Balken), 0% = ganz da.

     --dunkel schneidet von UNTEN, fuer den umgekehrten Fall: eine helle Seite
     mit dunklem Abschluss. Der schiebt sich von unten ins Bild, also muss der
     Balken von UNTEN nach oben hell werden.

     Ohne die zweite Kante lief die Kante seitenverkehrt durch den Griff: oben
     hell auf hellem Grund, unten dunkel auf dunklem — beide Haelften
     unsichtbar, der Punkt sah nur noch grau aus.

     Zwischenwerte schreibt edge-nav.js, damit die Kante beim Scrollen durch den
     Griff wandert statt hart umzuspringen. */
  .edge-handle i::after{position:absolute;inset:0;content:"";border-radius:inherit;
    background:var(--color-navy,var(--navy,#020914));box-shadow:0 0 8px rgba(2,9,20,.4);
    clip-path:inset(var(--hell,100%) 0 var(--dunkel,0%) 0)}
  /* Gescrollt: an die rechte Kante als drei Punkte — OBEN RECHTS, dort erwartet
     man Navigation. Das Original stand auf top:24px und klebte damit direkt am
     Bildrand („etwas weit oben"); mittig war zu weit unten. 52px gibt Luft zur
     Kante und bleibt eindeutig oben. env() haelt die Punkte unter der
     Statusleiste von Geraeten mit Notch. */
  .nav-compact .edge-handle{top:calc(52px + env(safe-area-inset-top,0px));right:10px}
  .nav-compact .edge-handle i{width:4px;height:4px;border-radius:50%}
  .edge-handle:active i{transform:translateX(-3px)}
  .is-edge-open .edge-handle{opacity:0;transform:translate(-24px,-50%);pointer-events:none}

  /* --- Schleier ---------------------------------------------------------- */
  .edge-scrim{position:fixed;z-index:35;inset:0;display:block;
    background:rgba(2,9,20,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .42s ease}
  .is-edge-open .edge-scrim{opacity:1;pointer-events:auto}

  /* --- Panel ------------------------------------------------------------- */
  .edge-menu{position:fixed;z-index:36;top:0;right:0;display:flex;
    /* --achse ist die eine senkrechte Linie, an der ALLES startet: Text der
       Menuepunkte, linke Kante des Buttons und die Fusszeile. */
    --achse:46px;
    width:min(78vw,330px);height:100%;
    padding:calc(28px + env(safe-area-inset-top,0px)) 22px calc(28px + env(safe-area-inset-bottom,0px)) var(--achse);
    flex-direction:column;justify-content:center;gap:2px;
    border-left:1px solid rgba(25,191,244,.22);
    background:rgba(4,12,24,.92);-webkit-backdrop-filter:blur(22px) saturate(150%);
    backdrop-filter:blur(22px) saturate(150%);
    /* KEIN box-shadow: geschlossen steht das Panel rechts ausserhalb des Bildes,
       sein Schatten ragte aber nach links und malte ein dunkles Band ueber den
       rechten Rand. Die Kante traegt der cyane Rahmen, Tiefe der Weichzeichner. */
    transform:translateX(calc((1 - var(--ez,0)) * 100%));
    transition:transform .52s cubic-bezier(.22,1,.36,1);
    overscroll-behavior:contain;overflow-y:auto}
  .is-edge-drag .edge-menu,.is-edge-drag .edge-scrim{transition:none}
  .edge-menu:focus{outline:none}

  .edge-menu__close{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));right:18px;
    width:46px;height:46px;padding:0;border:0;background:none;cursor:pointer;
    -webkit-tap-highlight-color:transparent;opacity:0;
    transition:opacity .35s ease .18s,transform .3s ease}
  .is-edge-open .edge-menu__close{opacity:.75}
  .edge-menu__close:active{transform:scale(.9);opacity:1}
  .edge-menu__close i{position:absolute;inset:0}
  .edge-menu__close i::before,.edge-menu__close i::after{position:absolute;top:50%;left:50%;
    width:19px;height:1.5px;content:"";background:var(--color-paper,var(--paper,#f5f8fc));border-radius:1px}
  .edge-menu__close i::before{transform:translate(-50%,-50%) rotate(45deg)}
  .edge-menu__close i::after{transform:translate(-50%,-50%) rotate(-45deg)}

  .edge-menu>a{position:relative;display:block;padding:15px 0;text-decoration:none;
    color:var(--color-paper,var(--paper,#f5f8fc));font-size:1.5rem;font-weight:700;letter-spacing:-.02em;
    /* Gestaffelt herein, damit der Blick eine Leserichtung bekommt statt einer
       fertigen Wand. --i kommt aus dem JS. */
    opacity:0;transform:translateX(18px);
    transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1),color .2s ease}
  .is-edge-open .edge-menu>a{opacity:1;transform:none;
    transition-delay:calc(.08s + var(--i,0) * .055s)}
  .edge-menu>a span{display:none}
  .edge-menu>a:active{color:var(--color-cyan,var(--cyan,#19bff4))}
  .edge-menu>a.is-current{color:var(--color-cyan,var(--cyan,#19bff4))}

  .edge-menu__cta{align-self:flex-start;margin-top:30px;padding:15px 30px!important;
    color:#001019!important;background:var(--color-cyan,var(--cyan,#19bff4));border-radius:2px;
    font-size:.92rem!important;font-weight:720;letter-spacing:.05em!important}

  .edge-menu__fuss{position:absolute;left:var(--achse);
    bottom:calc(30px + env(safe-area-inset-bottom,0px));
    display:flex;gap:10px;align-items:center;color:var(--color-muted,var(--muted,#6b7d8f));
    font-family:"Geist Mono",monospace;font-size:.78rem;letter-spacing:.1em;
    opacity:0;transition:opacity .4s ease .38s}
  .is-edge-open .edge-menu__fuss{opacity:1}
  .edge-menu__fuss a{color:var(--color-paper,var(--paper,#f5f8fc));opacity:.45;transition:opacity .2s ease;text-decoration:none}
  .edge-menu__fuss a.is-current{opacity:1}
  .edge-menu__fuss i{opacity:.3;font-style:normal}

  /* Helle Seiten (body.web): Ruhezustand dunkel, weil die Seite ueberwiegend
     hell ist. Das ist ausdruecklich nur der Ruhewert — ueber dem dunklen
     Abschluss-Abschnitt hebt edge-nav.js (data-edge-dark) ihn per Inline-Stil
     wieder auf 100% an, und Inline schlaegt diese Regel.

     Frueher stand hier "hier kommen KEINE dunklen Sektionen". Das stimmte, bis
     die Unterseiten einen bildschirmfuellenden dunklen Abschluss bekamen —
     seitdem standen am Seitenende dunkle Balken auf dunklem Grund. */
  body.web .edge-handle i{--hell:0%;box-shadow:0 0 8px rgba(25,191,244,.28)}
}

/* Ausserhalb der Mobilbreite existiert die Komponente nicht. */
@media(min-width:769px){
  .edge-handle,.edge-scrim,.edge-menu{display:none}
}
@media(prefers-reduced-motion:reduce){
  .edge-handle,.edge-handle i,.edge-menu,.edge-scrim,.edge-menu>a,
  .edge-menu__close,.edge-menu__fuss{transition:none}
}