/* Gemeinsame Navbar + Vollbild-Mobilmenü (identisch zur Startseite) */

/* nav links (desktop) */
.navlink{ font-family:'Baloo 2',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  font-size:.82rem; color:var(--navy); position:relative; padding:.25rem 0; transition:color .25s; }
.navlink::after{ content:""; position:absolute; left:0; bottom:-3px; height:3px; width:100%; border-radius:3px;
  background:var(--turq); transform:scaleX(0); transform-origin:center; transition:transform .35s var(--easeS); }
.navlink:hover{ color:var(--turqDeep); }
.navlink:hover::after,.navlink.active::after{ transform:scaleX(1); }
.navlink.active{ color:var(--turqDeep); }

/* header scroll state */
#header{ transition:background-color .4s var(--easeS), box-shadow .4s var(--easeS), padding .4s var(--easeS); }
#header.scrolled{ background:rgba(255,251,243,.9); backdrop-filter:blur(12px);
  box-shadow:0 10px 30px -22px rgba(24,49,59,.6); }

/* menu button extra (falls nicht via Tailwind) */
.btn-white{ background:#fff; color:var(--navy); box-shadow:0 12px 24px -10px rgba(0,0,0,.3); }
.btn-white:hover{ transform:translateY(-4px); color:var(--turqDeep); }

/* decorative confetti (menu) */
.confetti{ position:absolute; pointer-events:none; }
.c-dot{ border-radius:50%; }
.c-ring{ border-radius:50%; background:transparent; }

/* full-screen mobile menu */
html.menu-open{ overflow:hidden; }
#mobileMenu{ position:fixed; inset:0; height:100dvh; z-index:60; display:flex; flex-direction:column;
  background:radial-gradient(125% 90% at 82% 8%, #34C4D9, #1BAFC5 52%, #0C7A8A);
  clip-path:circle(0px at calc(100% - 38px) 38px); visibility:hidden;
  transition:clip-path .55s var(--easeS), visibility 0s linear .55s; }
#mobileMenu.open{ clip-path:circle(2400px at calc(100% - 38px) 38px); visibility:visible;
  transition:clip-path .62s var(--easeS); }
.m-link{ opacity:0; transform:translateY(20px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .25s ease; }
#mobileMenu.open .m-link{ opacity:1; transform:none; transition-delay:calc(.12s + var(--i,0) * .07s); }
.m-nav{ position:relative; width:max-content; max-width:100%; }
.m-nav:hover{ color:#FFD984; }
.m-nav::before{ content:""; position:absolute; left:-22px; top:50%; width:11px; height:11px; border-radius:50%;
  background:#ECA82A; transform:translateY(-50%) scale(0); transition:transform .3s var(--ease); }
.m-nav:hover::before{ transform:translateY(-50%) scale(1); }