/* ============================================================
   SG Neustadt 1485 — Navigation (dropdowns + responsive burger)
   Single source for the landing page AND all /seiten/ subpages.
   Desktop: horizontal bar with hover/click dropdowns.
   ≤1024px (Handys & Tablets): burger → off-canvas drawer with
   accordion submenus. Depends on tokens in colors_and_type.css.
   ============================================================ */

/* ---------------- topbar shell ---------------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .3s,box-shadow .3s,border-color .3s}
.topbar.sub{position:sticky}
.topbar .bar{display:flex;align-items:center;gap:18px;padding:13px 28px;max-width:1180px;margin:0 auto;transition:padding .3s}
@media(max-width:560px){.topbar .bar{padding:11px 18px;gap:12px}}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#10130c;box-shadow:0 0 0 1px rgba(226,195,65,.5)}
.brand > span{display:flex;flex-direction:column;justify-content:center;line-height:1.1}
.brand br{display:none}
.brand .bn{font-family:var(--font-serif);font-weight:700;font-size:17px;line-height:1.1;color:#fff;white-space:nowrap;transition:color .3s}
.brand .bs{font-family:var(--font-sans);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-title);white-space:nowrap;margin-top:2px;transition:color .3s}
@media(max-width:380px){.brand .bn{font-size:15px}.brand img{width:38px;height:38px}}

/* ---------------- desktop nav ---------------- */
.topnav{margin-left:auto;display:flex;align-items:center;gap:2px}
.topnav .nav-item{position:relative}
.topnav .nav-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:13.5px;font-weight:600;
  color:rgba(255,255,255,.85);text-decoration:none;padding:9px 13px;border-radius:6px;background:transparent;border:0;cursor:pointer;
  transition:color .2s,background .2s;white-space:nowrap}
.topnav .nav-link:hover{color:#fff;background:rgba(255,255,255,.1)}
.topnav .nav-link .car{width:14px;height:14px;transition:transform .22s}
.topnav .nav-item.open > .nav-link .car{transform:rotate(180deg)}
.topnav .nav-item.active > .nav-link{color:var(--gold-title)}

/* dropdown panel */
.topnav .nav-menu{position:absolute;left:0;top:calc(100% + 8px);min-width:248px;background:#fff;border:1px solid var(--border);
  border-radius:10px;box-shadow:var(--shadow-lg);padding:7px;opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .18s,transform .18s,visibility .18s;z-index:90}
.topnav .nav-item:hover > .nav-menu,
.topnav .nav-item.open > .nav-menu{opacity:1;visibility:visible;transform:none}
.topnav .nav-menu a{display:flex;align-items:center;gap:11px;font-family:var(--font-sans);font-size:13.5px;font-weight:600;
  color:var(--ink-700);text-decoration:none;padding:10px 12px;border-radius:7px;transition:background .15s,color .15s}
.topnav .nav-menu a:hover{background:var(--green-100);color:var(--green-700)}
.topnav .nav-menu a .mi{width:17px;height:17px;color:var(--gold-700);flex:none}
.topnav .nav-menu a:hover .mi{color:var(--green-700)}
.topnav .nav-menu .sep{height:1px;background:var(--border);margin:6px 8px}

/* actions (mitglied werden) */
.nav-actions{display:flex;align-items:center;gap:10px;flex:none}

/* solid state (scrolled landing + all subpages) */
.topbar.solid,.topbar.sub{background:rgba(255,255,255,.97);box-shadow:0 1px 0 var(--border),0 6px 24px -16px rgba(20,18,10,.5);backdrop-filter:saturate(1.1) blur(7px)}
.topbar.solid .bn,.topbar.sub .bn{color:var(--ink-900)}
.topbar.solid .bs,.topbar.sub .bs{color:var(--gold-700)}
.topbar.solid .nav-link,.topbar.sub .nav-link{color:var(--ink-700)}
.topbar.solid .nav-link:hover,.topbar.sub .nav-link:hover{color:var(--green-700);background:var(--green-100)}
.topbar.solid .nav-item.active > .nav-link,.topbar.sub .nav-item.active > .nav-link{color:var(--green-700)}

/* ---------------- burger button ---------------- */
.nav-burger{display:none;flex:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  align-items:center;justify-content:center;border-radius:8px;color:#fff;transition:background .2s,color .2s}
.nav-burger:hover{background:rgba(255,255,255,.12)}
.topbar.solid .nav-burger,.topbar.sub .nav-burger{color:var(--ink-900)}
.topbar.solid .nav-burger:hover,.topbar.sub .nav-burger:hover{background:var(--green-100)}
.nav-burger .lines{position:relative;width:22px;height:16px}
.nav-burger .lines span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .26s,opacity .2s,top .26s}
.nav-burger .lines span:nth-child(1){top:0}
.nav-burger .lines span:nth-child(2){top:7px}
.nav-burger .lines span:nth-child(3){top:14px}

/* ---------------- mobile drawer ---------------- */
.nav-scrim{position:fixed;inset:0;background:rgba(7,8,6,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:95}
.nav-scrim.show{opacity:1;visibility:visible}
.nav-drawer{position:fixed;top:0;right:0;height:100%;width:min(360px,86vw);background:linear-gradient(180deg,#11160f,#0a0c07);
  color:#fff;z-index:96;transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:-20px 0 50px -20px rgba(0,0,0,.7);overflow:hidden}
.nav-drawer.open{transform:none}
.nav-drawer .d-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid rgba(226,195,65,.18);flex:none}
.nav-drawer .d-head img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 1px rgba(226,195,65,.5)}
.nav-drawer .d-head .dn{font-family:var(--font-serif);font-weight:700;font-size:16px;line-height:1.1;white-space:nowrap}
.nav-drawer .d-head br{display:none}
.nav-drawer .d-head > span{display:flex;flex-direction:column}
.nav-drawer .d-head .ds{font-family:var(--font-sans);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-title);margin-top:2px}
.nav-drawer .d-close{margin-left:auto;width:40px;height:40px;border:0;background:transparent;color:rgba(255,255,255,.75);cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center}
.nav-drawer .d-close:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-drawer .d-close i{width:22px;height:22px}

.nav-drawer .d-scroll{flex:1;overflow-y:auto;padding:8px 14px 18px;-webkit-overflow-scrolling:touch}
.nav-drawer .m-item{border-bottom:1px solid rgba(255,255,255,.08)}
.nav-drawer .m-link{display:flex;align-items:center;gap:10px;width:100%;font-family:var(--font-sans);font-size:16px;font-weight:600;
  color:#fff;text-decoration:none;background:transparent;border:0;cursor:pointer;padding:16px 8px;text-align:left}
.nav-drawer .m-link .car{margin-left:auto;width:18px;height:18px;color:var(--gold-title);transition:transform .25s}
.nav-drawer .m-item.open > .m-link .car{transform:rotate(180deg)}
.nav-drawer .m-link:hover{color:var(--gold-title)}

.nav-drawer .m-sub{max-height:0;overflow:hidden;transition:max-height .3s ease}
.nav-drawer .m-sub .inner{padding:2px 0 12px}
.nav-drawer .m-sub a{display:flex;align-items:center;gap:11px;font-family:var(--font-sans);font-size:14.5px;font-weight:500;
  color:rgba(255,255,255,.78);text-decoration:none;padding:11px 8px 11px 14px;border-left:2px solid rgba(226,195,65,.3);margin-left:8px}
.nav-drawer .m-sub a:hover{color:#fff;border-left-color:var(--gold-title)}
.nav-drawer .m-sub a .mi{width:16px;height:16px;color:var(--gold-700);flex:none}

.nav-drawer .d-foot{flex:none;padding:16px 20px 22px;border-top:1px solid rgba(226,195,65,.18);display:flex;flex-direction:column;gap:10px}
.nav-drawer .d-foot .btn{width:100%;justify-content:center}

body.nav-lock{overflow:hidden}

/* ---------------- breakpoint switch ---------------- */
@media(max-width:1024px){
  .topnav{display:none}
  .nav-actions .btn-gold{display:none}      /* CTA lives in the drawer on mobile */
  .nav-burger{display:inline-flex;margin-left:auto;order:3}
}
@media(min-width:1025px){
  .nav-drawer,.nav-scrim{display:none}
}