/* NavBar — top navigation: animated moe. logo (left), uppercase page links
   (centre, spaced wide), and the personal "Direkt anfragen" CTA (right — the
   secondary-dark pill with a round avatar slot before the label).
   Designed for LIGHT surfaces (page / light section). */

.ds-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gap-24);
  padding: var(--gap-20) var(--padding-x);
  font-family: var(--font-body);
  background: transparent;
}

/* ============ Logo (left) ============ */
.ds-nav__logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  width: 140px;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}

.ds-nav__logo svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Orange period rotates 90° around its own centre on logo hover/focus. */
.ds-nav__logo #moe-dot {
  transition: transform 220ms cubic-bezier(.65, 0, .35, 1);
}
.ds-nav__logo:hover #moe-dot,
.ds-nav__logo:focus-visible #moe-dot {
  transform: rotate(90deg);
}

.ds-nav__logo:focus-visible {
  outline: 2px solid var(--color-orange-600);
  outline-offset: 6px;
}

/* ============ Page links (centre) ============ */
.ds-nav__links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: var(--gap-44);   /* pages sit relatively far apart */
}

.ds-nav__link {
  position: relative;
  display: inline-flex;
  padding-top: 12px;     /* drop links onto the logo/button baseline */
  padding-bottom: 1px;   /* underline sits just under the text */
  text-decoration: none;
  color: var(--color-ink);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-link) ease;
}

.ds-nav__linklabel {
  /* Matches the CTA button text: body face, --text-button size,
     medium weight, default tracking. Black, mixed-case. */
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.9px;
  line-height: 27px;
  white-space: nowrap;
}

/* Underline: enters from the LEFT on hover, exits to the RIGHT on mouse-out.
   scaleX(0) parked at the right edge; hover flips the origin to the left. */
.ds-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-orange-600);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--transition-link) ease;
}

.ds-nav__link:hover::after,
.ds-nav__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.ds-nav__link:focus-visible {
  outline: none;
}

/* Active page — orange font. No underline (colour already marks it). */
.ds-nav__link--active {
  color: var(--color-orange-600);
}
.ds-nav__link--active::after {
  display: none;
}

/* ============ CTA (right) — "Direkt anfragen" ============
   Reuses .ds-btn / .ds-btn--secondary-dark (pill, radius morph, rolodex).
   Overrides tighten the left padding so the avatar hugs the left edge. */
.ds-navcta {
  justify-self: end;
  gap: var(--gap-12);
  padding: 6px 22px 6px 6px;
  text-decoration: none;
}

/* Round avatar slot — a photo drops in here to make the CTA personal. */
.ds-navcta__avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-100);
  overflow: hidden;
  background:
    repeating-linear-gradient(
      45deg,
      #3a3a3a,
      #3a3a3a 4px,
      #474747 4px,
      #474747 8px
    );
}

.ds-navcta__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}