/* Lunela Premium-Topnav — geteilt über alle Seiten (Cache-Buster ?v hochzählen bei Änderung) */
:root{ --nav-h:66px }

.topnav{
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:nowrap;
  padding:0 clamp(18px,4vw,40px);
  background:linear-gradient(180deg, rgba(251,248,241,.94) 0%, rgba(251,248,241,.82) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15);
  border-bottom:1px solid rgba(192,143,55,.18);
  transition:box-shadow .35s ease, background .35s ease;
}
.topnav.scrolled{
  box-shadow:0 8px 30px -12px rgba(29,36,71,.18);
  background:linear-gradient(180deg, rgba(251,248,241,.97) 0%, rgba(251,248,241,.90) 100%);
}
.topnav::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, rgba(220,184,106,.55) 22%, rgba(220,184,106,.55) 78%, transparent 100%);
}

.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0}
.brand img{ width:36px; height:36px; display:block; filter:drop-shadow(0 2px 6px rgba(111,100,196,.22)); transition:transform .5s cubic-bezier(.2,.8,.2,1) }
.brand:hover img{ transform:rotate(8deg) scale(1.06) }
.brand-txt{display:flex; flex-direction:column}
.brand span{
  font-family:'Prata',serif; font-size:23px; letter-spacing:.3px; line-height:1;
  background:linear-gradient(135deg,var(--ink) 30%,var(--lav) 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand small{ display:block; font-family:'Manrope',system-ui,sans-serif; font-size:9.5px; letter-spacing:2.4px; text-transform:uppercase; color:var(--gold); margin-top:3px; font-weight:600 }

.navlinks{display:flex; align-items:center; gap:4px}
.navlinks a{
  position:relative; text-decoration:none; color:var(--ink-soft);
  font-size:14.5px; font-weight:500; letter-spacing:.2px;
  padding:9px 14px; border-radius:10px; transition:color .25s ease; background:none;
}
.navlinks a:not(.cta)::after{
  content:""; position:absolute; left:14px; right:14px; bottom:5px; height:1.5px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold-grad-a),var(--gold-grad-b));
  transform:scaleX(0); transform-origin:center; transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.navlinks a:not(.cta):hover{color:var(--ink)}
.navlinks a:not(.cta):hover,.navlinks a.active:not(.cta){background:none}
.navlinks a:not(.cta):hover::after{transform:scaleX(1)}
.navlinks a.active{color:var(--ink); font-weight:600}
.navlinks a.active:not(.cta)::after{transform:scaleX(1); opacity:.85}

.navlinks a.cta{
  margin-left:8px; color:#fff; font-weight:600; letter-spacing:.3px;
  background:linear-gradient(135deg,var(--gold-grad-a),var(--gold-grad-b));
  box-shadow:0 4px 14px -4px rgba(192,143,55,.55), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s ease, box-shadow .3s ease, filter .3s ease; overflow:hidden;
}
.navlinks a.cta:hover{ transform:translateY(-1px); box-shadow:0 8px 22px -6px rgba(192,143,55,.7), inset 0 1px 0 rgba(255,255,255,.45); filter:brightness(1.04); color:#fff }
.navlinks a.cta::after{display:none}
.navlinks a.cta::before{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); transition:left .6s ease;
}
.navlinks a.cta:hover::before{left:140%}

/* Sprach-Switch */
.langswitch{position:relative;display:flex;align-items:center}
.lang-btn{display:flex;align-items:center;gap:5px;background:none;border:1px solid rgba(192,143,55,.30);color:var(--ink-soft);font-family:inherit;font-size:13px;font-weight:600;padding:7px 11px;border-radius:10px;cursor:pointer;transition:border-color .2s,color .2s}
.lang-btn:hover{border-color:var(--gold);color:var(--ink)}
.lang-caret{font-size:10px;opacity:.7}
.lang-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:172px;background:#fff;border:1px solid rgba(192,143,55,.22);border-radius:12px;box-shadow:0 16px 40px -12px rgba(29,36,71,.26);padding:6px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:200}
.langswitch.open .lang-menu{opacity:1;transform:translateY(0);pointer-events:auto}
.lang-menu a{display:block;padding:9px 12px;border-radius:8px;text-decoration:none;color:var(--ink-soft);font-size:14px;font-weight:500;background:none}
.lang-menu a::after{content:none}
.lang-menu a:hover{background:var(--mist);color:var(--ink)}
.lang-menu a.active{color:var(--gold);font-weight:700}

.nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; border-radius:9px }
.nav-burger span{ width:22px; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s ease, opacity .3s ease }
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* konsistentes „Kosmos-Band" direkt unter der Nav auf Seiten OHNE Hero */
.topband{ height:118px; margin-bottom:-118px; pointer-events:none;
  background:radial-gradient(120% 100% at 50% -20%, rgba(111,100,196,.10), transparent 60%), linear-gradient(180deg,var(--mist) 0%, transparent 100%); }

@media(max-width:860px){
  :root{--nav-h:58px}
  .nav-burger{display:flex}
  .navlinks{
    position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:stretch; gap:2px;
    padding:14px 18px 20px; background:rgba(251,248,241,.98);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(192,143,55,.18); box-shadow:0 20px 40px -16px rgba(29,36,71,.22);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:transform .3s ease, opacity .3s ease;
  }
  .navlinks.open{transform:translateY(0); opacity:1; pointer-events:auto}
  .navlinks a{padding:13px 12px; font-size:15.5px}
  .navlinks a:not(.cta)::after{left:12px; bottom:8px}
  .navlinks a.cta{margin:8px 0 0; text-align:center; padding:14px}
  .brand small{display:none}
  /* Sprachumschalter mobil: immer sichtbar in der Top-Leiste, rechts vor dem Burger */
  .langswitch.lang-mobile{margin-left:auto; margin-right:8px}
  .langswitch.lang-mobile .lang-btn{padding:8px 10px}
  .langswitch.lang-mobile .lang-menu{right:0; top:calc(100% + 12px)}
}