/* =========================================================
   TR BAU, Version 3: Menü nach mohamedshehata.net
   Schmale, mittig schwebende Pille: dunkel, halbtransparent, weichgezeichnet.
   Logo mit Trennstrich, gedämpfte Links, hinter dem aktuellen Abschnitt
   gleitet eine blaue Markierung (setzt main-v2.js), rechts der Button.
   Überschreibt die Kopfzeile aus style.css nur für .nav3.
   ========================================================= */

.site-header.nav3 {
  /* mittig über automatische Ränder; mit left: 50% bliebe nur die halbe Breite Platz */
  top: 22px; left: 0; right: 0;
  width: max-content; max-width: calc(100% - 24px);
  margin: 0 auto;
  height: auto;
  gap: 14px;
  padding: 6px 6px 6px 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(21, 25, 29, .84);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 8px 28px rgba(10, 20, 30, .25);
  color: #fff;
  white-space: nowrap;
}
.nav3 :focus-visible { outline-color: #fff; border-radius: 999px; }

/* Logo mit feinem Trennstrich */
.nav3 .site-header__logo { padding: 8px 16px 8px 0; border-right: 1px solid rgba(255, 255, 255, .14); }
.nav3 .site-header__logo img { height: 24px; }

/* Links */
.nav3 .site-nav { position: relative; margin: 0; }
.nav3 .site-nav ul { gap: 0; }
.nav3 .site-nav a {
  position: relative; z-index: 1;
  display: block;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
  color: rgba(255, 255, 255, .64);
  background: none;
  transition: color .25s;
}
.nav3 .site-nav a:hover,
.nav3 .site-nav a[aria-current="true"] { color: #fff; }
.nav3 .site-nav a[aria-current="true"] { background-size: 0 0; }

/* Gleitende Markierung hinter dem aktuellen Abschnitt */
.nav3__indicator {
  position: absolute; left: 0; top: 0; z-index: 0;
  height: 100%; width: 0;
  border-radius: 999px;
  background: var(--blau);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.nav3__indicator.is-on {
  opacity: 1;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), width .45s cubic-bezier(.16, 1, .3, 1), opacity .3s;
}

/* Button */
.nav3 .site-header__cta {
  height: 36px; padding: 0 18px;
  background: var(--blau); color: #fff;
  font-size: 14px; font-weight: 600;
  transition: background .25s, transform .25s;
}
.nav3 .site-header__cta:hover { background: #3184b6; color: #fff; transform: translateY(-1px); }

/* Menüknopf (nur schmal sichtbar) */
.nav3 .site-header__burger {
  width: 40px; height: 40px; margin-left: 0;
  background: rgba(255, 255, 255, .12); color: #fff;
}
.nav3 .site-header__burger svg { width: 20px; height: 20px; }

/* Offenes Menü: Pille bleibt, wie sie ist */
body.menu-open .site-header.nav3 {
  background: rgba(21, 25, 29, .84);
  box-shadow: 0 8px 28px rgba(10, 20, 30, .25);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}
body.menu-open .nav3 .site-header__burger { background: #fff; color: var(--tinte); }

/* Schmal: Logo, Button und Menüknopf, die Links wandern ins Menü */
@media (max-width: 1000px) {
  .site-header.nav3 .site-header__cta { display: inline-flex; }
}
@media (max-width: 760px) {
  .site-header.nav3 { top: 12px; gap: 10px; padding: 4px 4px 4px 14px; }
  .nav3 .site-header__logo { padding-right: 12px; }
  .nav3 .site-header__logo img { height: 22px; }
  .nav3 .site-header__cta { height: 40px; padding: 0 15px; font-size: 13.5px; }
}
@media (max-width: 359px) {
  .site-header.nav3 .site-header__cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav3__indicator.is-on { transition: opacity .3s; }
}