/* ============================================================
   klarofix — shared site navigation
   Single source of truth. Included on every page.
   All rules are scoped under #site-nav so they always win over
   a page's own (older) inline nav styles without needing to
   remove them. Brand colours are hard-coded here so the nav
   looks identical on every page regardless of the page theme.
   ============================================================ */

:root {
  --nav-deep:   #0C4FA3;
  --nav-deep2:  #083D84;
  --nav-lime:   #CAFF00;
  --nav-lime-h: #aee000;
  --nav-txt-m:  #2a5f82;
}

/* ---- Bar ---------------------------------------------------- */
#site-nav nav#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 68px; padding: 0 24px; margin: 0;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: none; border-bottom: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
  font-family: 'DM Sans', sans-serif;
  transition: background .3s, box-shadow .3s;
}
#site-nav nav#main-nav.scrolled,
#site-nav nav#main-nav.nav-solid {
  background: rgba(255,255,255,.97);
  box-shadow: 0 2px 20px rgba(12,79,163,.1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

/* ---- Logo --------------------------------------------------- */
#site-nav .nav-logo {
  font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 24px;
  color: #fff; letter-spacing: -.5px; transition: color .3s;
  text-decoration: none;
}
#site-nav nav#main-nav.scrolled .nav-logo,
#site-nav nav#main-nav.nav-solid .nav-logo { color: var(--nav-deep2); }
#site-nav .nav-logo span { color: var(--nav-lime); }

/* ---- Desktop links ------------------------------------------ */
#site-nav .nav-links {
  display: flex; align-items: center; gap: 32px;
  list-style: none; margin: 0; padding: 0;
}
#site-nav .nav-links li { margin: 0; padding: 0; }
#site-nav .nav-links a,
#site-nav .nav-branches-trigger {
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14px;
  color: rgba(255,255,255,.82); transition: color .2s;
  text-decoration: none; cursor: pointer; background: none; border: none;
}
#site-nav nav#main-nav.scrolled .nav-links a,
#site-nav nav#main-nav.scrolled .nav-branches-trigger,
#site-nav nav#main-nav.nav-solid .nav-links a,
#site-nav nav#main-nav.nav-solid .nav-branches-trigger { color: var(--nav-txt-m); }
#site-nav .nav-links a:hover,
#site-nav .nav-branches-trigger:hover { color: #fff; }
#site-nav nav#main-nav.scrolled .nav-links a:hover,
#site-nav nav#main-nav.scrolled .nav-branches-trigger:hover,
#site-nav nav#main-nav.nav-solid .nav-links a:hover,
#site-nav nav#main-nav.nav-solid .nav-branches-trigger:hover { color: var(--nav-deep); }

/* ---- Branchen dropdown (hover / focus, NOT a link) ---------- */
#site-nav .nav-dropdown { position: relative; }
#site-nav .nav-dropdown > .nav-branches-trigger {
  display: inline-flex; align-items: center; gap: 5px;
}
#site-nav .nav-chevron {
  font-size: 9px; line-height: 1; display: inline-block; transition: transform .2s;
}
#site-nav .nav-dropdown:hover .nav-chevron,
#site-nav .nav-dropdown:focus-within .nav-chevron { transform: rotate(180deg); }
#site-nav .nav-dd {
  display: none; position: absolute; top: calc(100% + 6px);
  left: 50%; transform: translateX(-50%);
  background: #fff; border-radius: 14px; padding: 8px;
  min-width: 240px; z-index: 1001;
  box-shadow: 0 8px 40px rgba(12,79,163,.18);
  border: 1px solid rgba(12,79,163,.08);
}
#site-nav .nav-dd::before {
  content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
#site-nav .nav-dropdown:hover .nav-dd,
#site-nav .nav-dropdown:focus-within .nav-dd { display: block; }
#site-nav .nav-dd a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  color: #111827; white-space: nowrap; text-decoration: none;
  transition: background .15s, color .15s;
}
#site-nav .nav-dd a:hover,
#site-nav .nav-dd a.active { background: #f0f6ff; color: var(--nav-deep); }
#site-nav .nav-dd a.active { font-weight: 800; }
#site-nav .nav-dd .dd-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block;
}

/* ---- CTA ---------------------------------------------------- */
/* reset any leaked page-level .nav-cta styling (older inline navs gave this
   a coloured button background) — it is only a flex wrapper here */
#site-nav .nav-cta { display: flex; align-items: center; gap: 10px; background: none; padding: 0; border-radius: 0; }
#site-nav .nav-cta-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--nav-lime); color: var(--nav-deep2);
  padding: 9px 20px; border-radius: 12px;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13px;
  border: none; cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 18px rgba(202,255,0,.35);
  transition: background .18s, transform .15s, box-shadow .18s;
}
#site-nav .nav-cta-btn:hover {
  background: var(--nav-lime-h); transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(202,255,0,.5);
}

/* ---- Hamburger --------------------------------------------- */
#site-nav #hamburger-cb { display: none; }
#site-nav .hamburger-label {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  width: 28px; padding: 4px 0;
}
#site-nav .hamburger-label span {
  display: block; height: 2.5px; background: #fff; border-radius: 2px;
  transition: all .28s;
}
#site-nav nav#main-nav.scrolled .hamburger-label span,
#site-nav nav#main-nav.nav-solid .hamburger-label span { background: var(--nav-deep2); }
#site-nav #hamburger-cb:checked ~ nav .hamburger-label span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
#site-nav #hamburger-cb:checked ~ nav .hamburger-label span:nth-child(2) { opacity: 0; }
#site-nav #hamburger-cb:checked ~ nav .hamburger-label span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ---- Mobile panel ------------------------------------------ */
#site-nav #mobile-nav {
  display: none; position: fixed; top: 68px; left: 0; right: 0;
  background: var(--nav-deep2); padding: 20px 24px 28px;
  flex-direction: column; gap: 0; z-index: 999;
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
#site-nav #hamburger-cb:checked ~ #mobile-nav { display: flex; }
#site-nav #mobile-nav a,
#site-nav #mobile-nav .mobile-branch-heading {
  display: block; color: rgba(255,255,255,.85); font-size: 16px; font-weight: 600;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1);
  text-decoration: none;
}
#site-nav #mobile-nav .mobile-branch-heading {
  color: rgba(255,255,255,.5); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding-bottom: 8px;
}
#site-nav #mobile-nav .mobile-branch-link {
  padding-left: 14px; font-size: 15px; color: rgba(255,255,255,.78);
}
#site-nav #mobile-nav .mobile-branch-link.active { color: var(--nav-lime); }
#site-nav #mobile-nav .nav-cta-btn {
  margin-top: 16px; justify-content: center; font-size: 15px; padding: 14px;
  color: var(--nav-deep2);
}

/* ---- Solid-mode page offset (light pages w/o dark hero) ----- */
body.nav-has-offset { padding-top: 68px; }

/* ---- Responsive -------------------------------------------- */
@media (max-width: 768px) {
  #site-nav .nav-links { display: none; }
  #site-nav .hamburger-label { display: flex; }
  #site-nav .nav-cta-btn { padding: 8px 14px; font-size: 12px; }
}