/* PUBLIC-NAV — geteilte Kopf-Navigation für alle öffentlichen Seiten.
   Vor der jeweiligen seiteneigenen CSS-Datei einbinden, damit deren
   Overrides (z.B. dauerhaft solide Nav ohne Hero-Transparenz) weiterhin
   Vorrang haben. Farb-/Abstandswerte identisch zur bisherigen Umsetzung
   in main.css / inspirehub.css. */

:root{
  --bg: var(--bg, #f0efe9);
  --black: var(--black, #0a0a0a);
  --gold: var(--gold, #b8954e);
  --muted: var(--muted, #8a8a82);
  --border: var(--border, rgba(10,10,10,0.1));
  --border-md: var(--border-md, rgba(10,10,10,0.18));
  --nav-h: var(--nav-h, 60px);
}

.nav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  height:var(--nav-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 48px;
  background:transparent;
  transition:background .3s,border-bottom .3s;
}
.nav.solid{
  background:rgba(240,239,233,0.97);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links-r{justify-content:flex-end;gap:20px}
.nl{
  background:none;border:none;
  font-family:'Inter',sans-serif;font-size:11px;font-weight:400;
  letter-spacing:1.8px;text-transform:uppercase;
  color:var(--muted);cursor:pointer;padding:0;
  text-decoration:none;display:inline-block;
  transition:color .2s;white-space:nowrap;
}
.nl:hover{color:var(--black)}

/* NAV LOGO */
.nav-logo{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;text-decoration:none;
}
.nav-ring{
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(184,149,78,0.5);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--gold);font-weight:300;letter-spacing:1px;
}
.nav-word{
  font-size:8px;letter-spacing:4px;text-transform:uppercase;
  color:var(--muted);font-weight:400;
}

.nav-btn{
  background:none;border:1px solid var(--border-md);
  font-family:'Inter',sans-serif;font-size:10px;font-weight:400;
  letter-spacing:1.8px;text-transform:uppercase;
  color:var(--black);padding:8px 18px;
  text-decoration:none;display:inline-block;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.nav-btn:hover{background:var(--black);color:var(--bg)}
.ham{display:none;background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;padding:4px}

@media(max-width:1100px){
  .nav{padding:0 28px}
  .nav-links:not(.nav-links-r) .nl:not(:last-child){display:none}/* auf schmalen Bildschirmen nur 1 linken Link zeigen */
}

@media(max-width:768px){
  :root{--nav-h:54px}

  .nav{
    padding:0 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .nav-links:not(.nav-links-r){display:none}
  .nav-links-r{display:contents}/* Kinder in die Flex-Zeile fließen lassen */
  .nav-links-r .nl{display:none}
  .nav-btn{display:none}
  .nav-logo{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
  .ham{display:flex;align-items:center;margin-left:auto}
  .nav-word{display:none}
}