/* =================================================================
   WEBGLÜCK — GLOBAL (alle Seiten): Mobilmenü (OxyExtras Off-Canvas) im Mockup-Look
   Upload: /wp-content/uploads/webglueck/css/wg-global.css
   Vollbild, dunkel verschwommen, große Links mit gestaffeltem Einblenden, Header + Burger bleiben darüber.
   Button im Menü: In Oxygen einen Link Button ins Off-Canvas setzen und ihm die Klasse „wg-menu-cta“ geben.
   ================================================================= */

/* Grauen Standard-Hintergrund von OxyExtras ausblenden – die Fläche selbst ist verschwommen */
.oxy-off-canvas .oxy-offcanvas_backdrop{display:none!important;}

/* Menüfläche: Vollbild, unter dem Header (Header hat z-index 100) */
.oxy-off-canvas .offcanvas-inner{
  position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;height:100dvh!important;
  z-index:90!important;transform:none!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;
  padding:calc(110px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))!important;
  overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;
  background:rgba(3,6,15,.82)!important;-webkit-backdrop-filter:blur(40px) saturate(140%);backdrop-filter:blur(40px) saturate(140%);
  opacity:0;visibility:hidden;transition:opacity .7s cubic-bezier(.32,.72,0,1),visibility .7s cubic-bezier(.32,.72,0,1)!important;
}
.oxy-off-canvas.oxy-off-canvas-toggled .offcanvas-inner{opacity:1;visibility:visible;}

/* Container der Links */
.oxy-off-canvas .offcanvas-inner > .ct-div-block{width:100%!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:6px!important;
  padding:0!important;margin:0!important;background:none!important;}

/* Große Menü-Links (Oxygen-Link-Buttons) */
.oxy-off-canvas .offcanvas-inner a.ct-link-button:not(.wg-menu-cta){
  display:block!important;width:auto!important;margin:0!important;padding:4px 0!important;border:0!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;text-align:left!important;text-decoration:none!important;
  font-family:'Archivo',ui-sans-serif,system-ui,sans-serif!important;font-weight:700!important;font-size:clamp(2.2rem,9vw,3.4rem)!important;
  line-height:1.15!important;letter-spacing:-.03em!important;color:#ECF1FF!important;
  opacity:0;transform:translateY(40%);transition:transform .9s cubic-bezier(.32,.72,0,1),opacity .9s cubic-bezier(.32,.72,0,1),color .4s ease;
}
.oxy-off-canvas .offcanvas-inner a.ct-link-button:not(.wg-menu-cta):hover,
.oxy-off-canvas .offcanvas-inner a.ct-link-button:not(.wg-menu-cta):focus-visible{color:#5CD6FF!important;}
.oxy-off-canvas.oxy-off-canvas-toggled .offcanvas-inner a.ct-link-button{opacity:1;transform:none;}
/* gestaffelt einblenden */
.oxy-off-canvas.oxy-off-canvas-toggled .offcanvas-inner a:nth-child(1){transition-delay:.08s;}
.oxy-off-canvas.oxy-off-canvas-toggled .offcanvas-inner a:nth-child(2){transition-delay:.13s;}
.oxy-off-canvas.oxy-off-canvas-toggled .offcanvas-inner a:nth-child(3){transition-delay:.18s;}
.oxy-off-canvas.oxy-off-canvas-toggled .offcanvas-inner a:nth-child(4){transition-delay:.23s;}
.oxy-off-canvas.oxy-off-canvas-toggled .offcanvas-inner a:nth-child(5){transition-delay:.28s;}
.oxy-off-canvas.oxy-off-canvas-toggled .offcanvas-inner a:nth-child(6){transition-delay:.33s;}

/* Button im Menü (Link Button mit Klasse wg-menu-cta) – blaue Pill wie auf der Seite */
.oxy-off-canvas .offcanvas-inner a.wg-menu-cta{
  display:inline-flex!important;align-items:center;gap:14px;margin:40px 0 0!important;min-height:56px;padding:6px 6px 6px 26px!important;border:0!important;border-radius:999px!important;
  background:#0057FF!important;color:#fff!important;text-decoration:none!important;font:500 1rem/1 'Geist',ui-sans-serif,system-ui,sans-serif!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 18px 50px -18px rgba(0,87,255,.8);
  opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.32,.72,0,1) .34s,transform .9s cubic-bezier(.32,.72,0,1) .34s;
}
.oxy-off-canvas .offcanvas-inner a.wg-menu-cta::after{content:"";width:44px;height:44px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.4'%3E%3Cpath d='M4 12L12 4M6 4h6v6'/%3E%3C/svg%3E") center/16px no-repeat;}
.oxy-off-canvas.oxy-off-canvas-toggled .offcanvas-inner a.wg-menu-cta{opacity:1;transform:none;}

/* Seite dahinter nicht scrollen, solange das Menü offen ist */
/* nur auf <html> sperren – overflow auf <body> würde den Sticky-Header aushebeln */
html.off-canvas-toggled{overflow:hidden!important;}
html.off-canvas-toggled body{overflow-x:clip!important;overflow-y:visible!important;}

@media (prefers-reduced-motion:reduce){
  .oxy-off-canvas .offcanvas-inner,.oxy-off-canvas .offcanvas-inner a{transition:none!important;transform:none!important;}
}

/* WhatsApp-Button ausblenden, solange das Menü offen ist */
html.off-canvas-toggled .wg-wa{opacity:0;pointer-events:none;}

/* =================================================================
   HEADER AUF DEM HANDY STICKY
   Oxygen schaltet „Sticky“ unterhalb einer Breite ab – hier für alle Größen erzwingen.
   position:sticky behält den Platz im Seitenfluss (kein Springen des Inhalts).
   ================================================================= */
@media (max-width:1120px){
  html body{overflow-x:clip!important;}            /* overflow-x:hidden würde sticky verhindern */
  .oxy-header-wrapper.oxy-sticky-header{position:sticky!important;top:0;z-index:1000!important;}
  /* eingeloggt: WordPress-Adminleiste ist ab 601 px fest oben */
  html.admin-bar .oxy-header-wrapper.oxy-sticky-header{top:var(--wp-admin--admin-bar--height,32px);}
}
@media (max-width:600px){
  html.admin-bar .oxy-header-wrapper.oxy-sticky-header{top:0;}
}