/* ============================================================
   NAVIGATION — geteilt über ALLE Seiten (Startseite + Unterseiten)
   ------------------------------------------------------------
   EINZIGE QUELLE für Nav-CSS. Wird via functions.php (Handle 'ob-nav')
   auf jeder ob-Seite geladen. Vorher lag dieses CSS dupliziert in
   startseite.css UND unterseiten.css und ist auseinandergedriftet.
   → NICHT zurück in die Seiten-CSS kopieren. Nav-Änderungen NUR hier.
   ============================================================ */
.ob-nav {
  background: #fff; border-bottom: 1px solid #EFEFEF;
  position: sticky; top: 0; z-index: 100;
}
.ob-nav__inner {
  max-width: var(--ob-maxw); margin: 0 auto;
  display: flex; align-items: center; height: 72px; padding: 0 var(--ob-gutter); gap: 0;
}
/* Header bündig auf 1200px: ab 1264px (1200 + 2×32) liefert die Zentrierung selbst
   ≥32px Rand → Padding weg. Darunter bleiben die 32px als Mobil-/Tablet-Seitenrand. */
@media (min-width: 1264px) {
  .ob-nav__inner { padding-left: 0; padding-right: 0; }
}
.ob-nav__logo {
  font-family: 'Jost', sans-serif; font-weight: 700; font-size: 1.25rem;
  color: var(--ob-dark); letter-spacing: -0.3px; margin-right: auto; flex: none;
}
.ob-nav__links { display: flex; gap: 30px; align-items: center; }
.ob-nav__links a { font-size: 0.9375rem; font-weight: 500; color: var(--ob-dark); transition: color .2s; cursor: pointer; }
.ob-nav__links a:hover { color: var(--ob-teal); }
.ob-nav__cta   { color: var(--ob-teal) !important; font-weight: 600 !important; }
.ob-nav__link--active { color: var(--ob-teal) !important; font-weight: 600 !important; }
.ob-nav__social { display: flex; gap: 20px; align-items: center; margin-left: 40px; }
.ob-nav__social a { color: var(--ob-dark); display: flex; transition: color .2s; }
.ob-nav__social a:hover { color: var(--ob-teal); }
.ob-nav__sep { width: 1px; height: 22px; background: #E5E7EB; flex: none; }
.ob-lang { display: inline-flex; align-items: center; background: #F3F4F6; border-radius: 100px; padding: 3px; }
.ob-lang__btn { font-size: 0.75rem; font-weight: 700; letter-spacing: .05em; padding: 5px 13px; border-radius: 100px; background: transparent; color: #9CA3AF; text-decoration: none; line-height: 1; transition: background .15s, color .15s; }
.ob-lang__btn--active { background: var(--ob-teal); color: #fff; }

/* ---- Mobile-Header (Hamburger + Dropdown) — < 860px ---- */
.ob-nav__burger {
  display: none; margin-left: auto; flex: none; width: 44px; height: 44px; padding: 0;
  cursor: pointer; align-items: center; justify-content: center; line-height: 0;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  outline: none; color: var(--ob-dark); -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.ob-nav__burger:hover, .ob-nav__burger:focus, .ob-nav__burger:active, .ob-nav__burger:focus-visible {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  outline: none; color: var(--ob-teal);
}
.ob-nav__burger-close { display: none; }
.ob-nav__mobile { display: none; }
.ob-nav__mobile-links { display: flex; flex-direction: column; }
.ob-nav__mobile-links a {
  font-size: 1.1875rem; font-weight: 500; color: var(--ob-dark); text-decoration: none;
  padding: 15px 0; border-bottom: 1px solid #F3F4F6;
}
.ob-nav__mobile-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.ob-nav__mobile-li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--ob-dark); text-decoration: none; }
.ob-nav__mobile-li:hover { color: var(--ob-teal); }

@media (max-width: 859px) {
  .ob-nav__links,
  .ob-nav__social { display: none !important; }
  .ob-nav__burger { display: flex; }
  .ob-nav.is-open .ob-nav__burger-open  { display: none; }
  .ob-nav.is-open .ob-nav__burger-close { display: block; }
  .ob-nav.is-open .ob-nav__mobile {
    display: block; border-top: 1px solid #EFEFEF; background: #fff;
    padding: 8px 32px 28px; max-height: calc(100vh - 72px); overflow-y: auto;
  }
}