/* ════════════════════════════════════════════════════════════════
   Schaad Advisors — c-site-header (shared, single source of truth)
   ──────────────────────────────────────────────────────────────
   Used on every page. Place inside the hero section as the FIRST
   child:
     <section class="bg-studio">
       <header class="c-site-header" data-page="…">…</header>
       … hero content …
     </section>

   The header is absolutely positioned within its parent section,
   so hero content can flow underneath. Subpages use the chrome-
   sized 80h logo. Home adds the `--display` modifier and the
   logo grows fluidly up to 205h on wide viewports.

   Responsive plan:
     ≥1440      logo at full display height (home only)
     736–1440   fluid shrink, paddings narrow, nav still horizontal
     <736       burger replaces nav · panel overlay on toggle

   States:
     .c-site-header                              default 80h logo
     .c-site-header--display                     fluid 80→205 logo
     .c-site-header.is-menu-open                 panel visible
     .c-site-header__nav a[aria-current="page"]  active link
     .c-site-header__cta[aria-current="page"]    ghost variant
   ──────────────────────────────────────────────────────────── */

:root {
  /* Rail padding lives in shared/tokens.css as `--rail-pad` — a single
     source of truth shared between the header, hero content, and every
     page section. Don't redefine it here; just consume it. */

  /* Logo: default chrome height. Display variant overrides this. */
  --c-site-header-logo-h: 80px;

  /* Mobile-menu breakpoint — used by the JS too via getComputedStyle. */
  --c-site-header-bp: 736px;
}

/* ─── Container ─────────────────────────────────────────────── */

.c-site-header {
  position: absolute;               /* in flow with the hero — scrolls away */
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  pointer-events: none;             /* let clicks fall through gaps */
  font-family: var(--font-sans);
}

.c-site-header > * { pointer-events: auto; }

/* ─── Logo · top-left, height-driven ────────────────────────── */

.c-site-header__logo {
  position: absolute;
  top: 0;
  left: var(--rail-pad);
  display: block;
  height: var(--c-site-header-logo-h);
  width: calc(var(--c-site-header-logo-h) * 1.6);   /* 128:80 aspect */
  z-index: 110;            /* sit above the open mobile panel */
}
.c-site-header__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
}

/* Display variant — used on home only.
   Linear ramp 80 → 205 across viewport 736 → 1440. clamp() handles
   the floor and ceiling automatically. Width follows from height
   via the 1.6 aspect already on the parent. */
.c-site-header--display {
  /* Display logo: 180 at 1440 → 80 at the mobile-menu break (736).
     Slope 100/704 ≈ 0.142 px per vw px (= 14.2vw − 24.5px). Clamp
     keeps it pinned at 180 above 1440 and at 80 below 736. */
  --c-site-header-logo-h: clamp(80px, calc(14.2vw - 24.5px), 180px);
}

/* ─── Nav · top-right row, baseline-aligned with the CTA ──────
      Same top (28), same height (40), same font (14 / Inter) so
      the nav links and the "Kontakt" button text sit on a single
      baseline — the chrome reads as one row. */

.c-site-header__nav {
  position: absolute;
  top: 28px;
  /* rail-pad + CTA(102) + gap(32) + lang(40) + gap(32) = rail-pad + 206 */
  right: calc(var(--rail-pad) + 206px);
  height: 40px;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
  z-index: 2;
  color: var(--color-white);
}

.c-site-header__nav a {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  font-size: 14px;
  line-height: 1;
  font-weight: var(--weight-body);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-white);
  transition: color 220ms ease;
}
.c-site-header__nav a:link,
.c-site-header__nav a:visited,
.c-site-header__nav a:active,
.c-site-header__nav a:focus { color: var(--color-white); }
.c-site-header__nav a:hover { color: var(--color-alpine); }

.c-site-header__nav-indicator {
  position: absolute;
  left: 0;
  top: 32px;                /* below the 14px text in a 40h row */
  width: 40px;
  height: 4px;
  background: var(--color-atlas);
  pointer-events: none;
  transition: transform 0.4s var(--ease-out), width 0.4s var(--ease-out), opacity 0.2s ease;
}

/* When no link is marked aria-current="page" the JS sets opacity:0
   to keep the indicator out of view (legal pages, /kontakt/). */

/* ─── CTA · top-right · primary fill ─────────────────────────── */

.c-site-header__cta,
.c-site-header__cta:link,
.c-site-header__cta:visited {
  position: absolute;
  top: 28px;
  right: var(--rail-pad);
  height: 40px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-atlas);
  color: var(--color-white);
  font-size: 14px;
  line-height: 1;
  font-weight: var(--weight-body);
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  z-index: 2;
  transition: background 200ms ease;
}
.c-site-header__cta:hover { background: var(--color-atlas-dk); }

/* Ghost state — user is already on /kontakt/. Same footprint, just
   transparent fill + alpine hairline so the slot stays balanced. */
.c-site-header__cta[aria-current="page"],
.c-site-header__cta[aria-current="page"]:link,
.c-site-header__cta[aria-current="page"]:visited,
.c-site-header__cta[aria-current="page"]:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(159, 186, 205, 0.35);
  cursor: default;
  pointer-events: none;
}

/* ─── Language selector · minimal "D ↓" with dropdown ────────
   Sits between the nav and the CTA (right rail anchored). Font
   matches the nav and the CTA — same baseline, same weight, same
   case — so the chrome row reads as one rhythm.                */

.c-site-header__lang {
  position: absolute;
  top: 28px;
  right: calc(var(--rail-pad) + 102px + 32px);   /* after CTA + gap */
  height: 40px;
  display: flex;
  align-items: center;
  z-index: 3;
  font-family: var(--font-sans);
}

.c-site-header__lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 0 4px;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-white);
  cursor: pointer;
  height: 100%;
  transition: color 220ms ease;
}
.c-site-header__lang-toggle:hover { color: var(--color-alpine); }
.c-site-header__lang-toggle:focus-visible {
  outline: 2px solid var(--color-atlas);
  outline-offset: 4px;
  border-radius: 2px;
}

.c-site-header__lang-chevron {
  display: block;
  width: 10px;
  height: 6px;
  flex-shrink: 0;
  transition: transform 220ms var(--ease-out);
}
.c-site-header__lang.is-open .c-site-header__lang-chevron {
  transform: rotate(180deg);
}

.c-site-header__lang-list {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 8px 0 0;
  padding: 6px 0;
  list-style: none;
  background: var(--color-charcoal);
  border-radius: 3px;
  box-shadow: 0 12px 28px -8px rgba(7, 38, 52, 0.55);
  min-width: 88px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              visibility 0s linear 200ms;
}
.c-site-header__lang.is-open .c-site-header__lang-list {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              visibility 0s linear 0s;
}

.c-site-header__lang-list li { margin: 0; }
.c-site-header__lang-list a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: var(--weight-body);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease, background 200ms ease;
}
.c-site-header__lang-list a:hover {
  color: var(--color-alpine);
  background: rgba(255, 255, 255, 0.04);
}
.c-site-header__lang-list a[aria-current="true"] {
  color: var(--color-alpine);
}

/* ─── Burger (40 × 40 white circle) — hidden by default ─────── */

.c-site-header__burger {
  position: absolute;
  top: 22px;
  right: var(--rail-pad);
  display: none;            /* visible only at <736px */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--color-white);
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  z-index: 110;             /* above panel so it stays clickable */
}
.c-site-header__burger:focus-visible {
  outline: 2px solid var(--color-atlas);
  outline-offset: 3px;
}

/* Two thin abyss-color bars, centred. Stacked 4px apart
   (Figma: gap 4px between two 1px lines, total height 6px). */
.c-site-header__burger-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 1px;
  background: var(--color-abyss);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 240ms var(--ease-out);
}
.c-site-header__burger-bar:nth-child(1) { transform: translate(-50%, -3px); }
.c-site-header__burger-bar:nth-child(2) { transform: translate(-50%,  2px); }

/* X state when menu is open */
.c-site-header.is-menu-open .c-site-header__burger-bar:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.c-site-header.is-menu-open .c-site-header__burger-bar:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ─── "Kontakt" mini text-link (mobile, beside burger) ───────── */

.c-site-header__cta-mini {
  position: absolute;
  top: 22px;
  right: calc(var(--rail-pad) + 40px + 16px);  /* burger 40 + 16 gap */
  display: none;            /* visible only at <736px */
  align-items: center;
  height: 40px;
  font-size: 14px;
  line-height: 1;
  font-weight: var(--weight-body);
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-white);
  z-index: 110;
  transition: color 200ms ease;
}
.c-site-header__cta-mini:hover { color: var(--color-alpine); }

/* Ghost state on /kontakt/ */
.c-site-header__cta-mini[aria-current="page"] {
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  cursor: default;
}

/* ─── Mobile breakpoint · swap chrome ───────────────────────── */

@media (max-width: 735.98px) {
  /* Logo: still fixed at 80h on mobile (display variant collapses).
     Horizontal anchor stays on the global --rail-pad so the logo
     tracks the same edge as the chrome and the page content. */
  .c-site-header__logo {
    --c-site-header-logo-h: 80px;
  }
  .c-site-header--display .c-site-header__logo {
    --c-site-header-logo-h: 80px;
  }

  .c-site-header__nav { display: none; }
  .c-site-header__lang { display: none; }

  /* Match the desktop CTA's specificity (it sets display via a comma
     list that includes :link/:visited) so we win the cascade. */
  .c-site-header__cta,
  .c-site-header__cta:link,
  .c-site-header__cta:visited {
    display: none;
  }

  .c-site-header__burger { display: inline-flex; }
  .c-site-header__cta-mini {
    display: inline-flex;
    right: calc(var(--rail-pad) + 40px + 16px);
  }

  /* Hide mini CTA when panel is open — only X remains visible */
  .c-site-header.is-menu-open .c-site-header__cta-mini { display: none; }
}

/* ─── Mobile menu panel · full-viewport overlay ──────────────── */

.c-site-header__panel {
  position: fixed;
  inset: 0;
  background: var(--color-charcoal);
  color: var(--color-white);
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  visibility: hidden;
  opacity: 0;
  transition: opacity 280ms var(--ease-out), visibility 0s linear 280ms;
}

.c-site-header.is-menu-open .c-site-header__panel {
  visibility: visible;
  opacity: 1;
  transition: opacity 280ms var(--ease-out), visibility 0s linear 0s;
}

/* Inner stack — equal padding on the eyebrow/nav indent so it lines up
   with Figma (left:91 from viewport when overall padding is 20). */
.c-site-header__panel-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Logo inside the panel — always visible regardless of how the user
   opened the menu (top of page or after scrolling), so the brand mark
   never disappears when the in-hero header has scrolled away. Sits
   exactly where the in-hero logo sits, so when at top of page the
   two overlap pixel-perfectly and read as one logo. */
.c-site-header__panel-logo {
  position: absolute;
  top: 0;
  left: var(--rail-pad);
  display: block;
  height: 80px;
  width: calc(80px * 1.6);
}
.c-site-header__panel-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
}

/* Eyebrow row at top of panel · 16px hairline + label */
.c-site-header__panel-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 90px;          /* 22 (panel padding-top) + 80 (logo) + 12 = visually 22+80=102; we want 112 → margin-top from 80h logo ≈ 32 → totals top 112 */
  font-size: 12px;
  line-height: 1.2;
  font-weight: var(--weight-body);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-alpine);
}
.c-site-header__panel-eyebrow-line {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--color-alpine);
  flex-shrink: 0;
}

/* Vertical nav · large display-size links */
.c-site-header__panel-nav {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 24px;          /* 8-grid: eyebrow → list */
  margin-left: 71px;         /* Figma 91 - 20 panel pad */
}
.c-site-header__panel-nav a {
  font-size: 40px;
  line-height: 1;
  font-weight: var(--weight-body);
  color: var(--color-white);
  text-decoration: none;
  letter-spacing: var(--track-tight);
  transition: color 200ms ease;
}
.c-site-header__panel-nav a:hover { color: var(--color-alpine); }
.c-site-header__panel-nav a[aria-current="page"] { color: var(--color-alpine); }

/* Meta block · LinkedIn label + claim/loc row */
.c-site-header__panel-meta {
  margin-top: 32px;
  margin-left: 71px;
  margin-right: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.c-site-header__panel-linkedin {
  display: inline-block;
  width: max-content;
  font-size: 13px;
  line-height: 1.5;
  font-weight: var(--weight-body);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  transition: color 200ms ease;
}
.c-site-header__panel-linkedin:hover { color: var(--color-alpine); }

.c-site-header__panel-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-white);
}
.c-site-header__panel-claim {
  margin: 0;
}
.c-site-header__panel-loc {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 64px;
  flex-shrink: 0;
}

/* Language selector inside the mobile panel · simple flat DE/EN row.
   No dropdown — there are only two languages and the panel already
   gives them their own visible row. The active one picks up the alpine
   accent, mirroring the desktop lang-list active state. */
.c-site-header__panel-lang {
  margin-top: 24px;
  margin-left: 71px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: var(--weight-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.c-site-header__panel-lang a {
  color: var(--color-white);
  text-decoration: none;
  transition: color 200ms ease;
}
.c-site-header__panel-lang a:hover { color: var(--color-alpine); }
.c-site-header__panel-lang a[aria-current="true"] { color: var(--color-alpine); }
.c-site-header__panel-lang-sep { color: rgba(255, 255, 255, 0.3); }

/* Signature near bottom (between meta and CTA), pushed by mt:auto */
.c-site-header__panel-signature {
  display: block;
  margin: auto auto 21px;       /* Figma: signature bottom 572 → CTA top 593 */
  height: 58px;
  width: 100%;
  max-width: 312px;
  object-fit: contain;
}

/* Bottom CTA · full-width pill, pinned via the safe-area padding
   on the panel container. */
.c-site-header__panel-cta,
.c-site-header__panel-cta:link,
.c-site-header__panel-cta:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 100%;
  background: var(--color-atlas);
  color: var(--color-white);
  font-size: 14px;
  line-height: 1;
  font-weight: var(--weight-body);
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  transition: background 200ms ease;
}
.c-site-header__panel-cta:hover { background: var(--color-atlas-dk); }

/* Lock body scroll while panel is open · added by JS via class on <html>.
   Belt-and-braces: also clip overflow on the panel itself. */
html.c-site-header-menu-open,
html.c-site-header-menu-open body {
  overflow: hidden;
}

/* ─── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .c-site-header__panel,
  .c-site-header__burger-bar,
  .c-site-header__nav-indicator,
  .c-site-header__cta,
  .c-site-header__panel-cta,
  .c-site-header__panel-nav a {
    transition: none !important;
  }
}

/* ─── Stagger · panel items · entry only when opening ────────── */

@keyframes c-site-header-panel-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.c-site-header.is-menu-open .c-site-header__panel-eyebrow,
.c-site-header.is-menu-open .c-site-header__panel-lang,
.c-site-header.is-menu-open .c-site-header__panel-nav > a,
.c-site-header.is-menu-open .c-site-header__panel-meta > *,
.c-site-header.is-menu-open .c-site-header__panel-signature,
.c-site-header.is-menu-open .c-site-header__panel-cta {
  animation: c-site-header-panel-rise 480ms var(--ease-out) backwards;
}

.c-site-header.is-menu-open .c-site-header__panel-eyebrow      { animation-delay:  60ms; }
.c-site-header.is-menu-open .c-site-header__panel-lang         { animation-delay: 100ms; }
.c-site-header.is-menu-open .c-site-header__panel-nav > a:nth-child(1) { animation-delay: 140ms; }
.c-site-header.is-menu-open .c-site-header__panel-nav > a:nth-child(2) { animation-delay: 180ms; }
.c-site-header.is-menu-open .c-site-header__panel-nav > a:nth-child(3) { animation-delay: 220ms; }
.c-site-header.is-menu-open .c-site-header__panel-meta > *:nth-child(1) { animation-delay: 260ms; }
.c-site-header.is-menu-open .c-site-header__panel-meta > *:nth-child(2) { animation-delay: 300ms; }
.c-site-header.is-menu-open .c-site-header__panel-signature { animation-delay: 340ms; }
.c-site-header.is-menu-open .c-site-header__panel-cta      { animation-delay: 380ms; }

@media (prefers-reduced-motion: reduce) {
  .c-site-header.is-menu-open .c-site-header__panel-eyebrow,
  .c-site-header.is-menu-open .c-site-header__panel-lang,
  .c-site-header.is-menu-open .c-site-header__panel-nav > a,
  .c-site-header.is-menu-open .c-site-header__panel-meta > *,
  .c-site-header.is-menu-open .c-site-header__panel-signature,
  .c-site-header.is-menu-open .c-site-header__panel-cta {
    animation: none;
  }
}


/* ════════════════════════════════════════════════════════════════
   Floating compact nav · separate from the in-hero c-site-header.
   ──────────────────────────────────────────────────────────────
   The main header lives inside the hero (position: absolute) and
   scrolls away with the page. This compact bar is its own element,
   position: fixed at the top, hidden by default (translateY -100%),
   and slides into view ONLY when the user scrolls UP after having
   scrolled past a small threshold. Slides back out on down-scroll.
   Hidden entirely under the mobile-menu break — phones use the
   burger panel instead.
   ──────────────────────────────────────────────────────────── */

.c-site-floating-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--rail-pad);
  gap: clamp(20px, 2.4vw, 36px);
  background: rgba(7, 38, 52, 0.80);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transform: translateY(-100%);
  transition: transform 320ms var(--ease-out);
  font-family: var(--font-sans);
  color: var(--color-white);
  pointer-events: none;             /* invisible until revealed */
}
.c-site-floating-nav.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.c-site-floating-nav a {
  font-size: 14px;
  line-height: 1;
  font-weight: var(--weight-body);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  transition: color 200ms ease;
}
.c-site-floating-nav a:hover { color: var(--color-alpine); }
/* Active link uses the indicator (atlas-blue underline) — no colour
   change on the link itself, mirroring the in-hero header nav. */

/* ─── Indicator · 4-px atlas-blue bar that slides under the
   active link and follows hover (managed by site-header.js). */
.c-site-floating-nav__indicator {
  position: absolute;
  left: 0;
  bottom: 12px;                      /* sits below the centred link text */
  width: 40px;
  height: 4px;
  background: var(--color-atlas);
  pointer-events: none;
  transition: transform 0.4s var(--ease-out),
              width 0.4s var(--ease-out),
              opacity 0.2s ease;
}

/* ─── Lang selector inside the floating bar.
   Visual-clone of the in-hero header lang (DE ↓), but laid out as
   a regular flex item rather than absolutely positioned. */

.c-site-floating-nav__lang {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  font-family: var(--font-sans);
}

.c-site-floating-nav__lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 0 4px;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-white);
  cursor: pointer;
  height: 100%;
  transition: color 220ms ease;
}
.c-site-floating-nav__lang-toggle:hover { color: var(--color-alpine); }
.c-site-floating-nav__lang-toggle:focus-visible {
  outline: 2px solid var(--color-atlas);
  outline-offset: 4px;
  border-radius: 2px;
}

.c-site-floating-nav__lang-chevron {
  display: block;
  width: 10px;
  height: 6px;
  flex-shrink: 0;
  transition: transform 220ms var(--ease-out);
}
.c-site-floating-nav__lang.is-open .c-site-floating-nav__lang-chevron {
  transform: rotate(180deg);
}

.c-site-floating-nav__lang-list {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 8px 0 0;
  padding: 6px 0;
  list-style: none;
  background: var(--color-charcoal);
  border-radius: 3px;
  box-shadow: 0 12px 28px -8px rgba(7, 38, 52, 0.55);
  min-width: 88px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              visibility 0s linear 200ms;
}
.c-site-floating-nav__lang.is-open .c-site-floating-nav__lang-list {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              visibility 0s linear 0s;
}
.c-site-floating-nav__lang-list li { margin: 0; }
.c-site-floating-nav__lang-list a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: var(--weight-body);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease, background 200ms ease;
}
.c-site-floating-nav__lang-list a:hover {
  color: var(--color-alpine);
  background: rgba(255, 255, 255, 0.04);
}
.c-site-floating-nav__lang-list a[aria-current="true"] {
  color: var(--color-alpine);
}

/* CTA button on the right · matches the in-hero Kontakt button. */
.c-site-floating-nav__cta,
.c-site-floating-nav__cta:link,
.c-site-floating-nav__cta:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  background: var(--color-atlas);
  color: var(--color-white);
  border-radius: 3px;
  margin-left: 16px;
  transition: background 200ms ease;
}
.c-site-floating-nav__cta:hover { background: var(--color-atlas-dk); }

/* Ghost variant on /kontakt/ — the compact bar lives on every page,
   so we mirror the in-hero ghost state here too. */
.c-site-floating-nav__cta[aria-current="page"],
.c-site-floating-nav__cta[aria-current="page"]:link,
.c-site-floating-nav__cta[aria-current="page"]:visited,
.c-site-floating-nav__cta[aria-current="page"]:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(159, 186, 205, 0.35);
  cursor: default;
  pointer-events: none;
}

/* ─── Floating burger · visual clone of the in-hero one ─────── */

.c-site-floating-nav__burger {
  display: none;                /* default — visible only at <736 (mobile rule below) */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--color-white);
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin-left: 16px;            /* matches the cta's left margin */
}
.c-site-floating-nav__burger:focus-visible {
  outline: 2px solid var(--color-atlas);
  outline-offset: 3px;
}

.c-site-floating-nav__burger-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 1px;
  background: var(--color-abyss);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 240ms var(--ease-out);
}
.c-site-floating-nav__burger-bar:nth-child(1) { transform: translate(-50%, -3px); }
.c-site-floating-nav__burger-bar:nth-child(2) { transform: translate(-50%,  2px); }

/* X-state — driven by the global `html.c-site-header-menu-open` class
   (added by initBurger), so both the in-hero and the floating burgers
   morph together regardless of their position on the page. */
html.c-site-header-menu-open .c-site-floating-nav__burger-bar:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
html.c-site-header-menu-open .c-site-floating-nav__burger-bar:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* When the panel is open, force the floating bar visible AND
   transparent regardless of its prior is-visible state — so the
   panel-logo + content show through, and only the burger reads as a
   floating "X" on top of the panel. The in-hero burger is also
   hidden so we never have two X buttons collision when at the top of
   the page. Mobile-only — desktop has no burger to begin with. */
@media (max-width: 735.98px) {
  html.c-site-header-menu-open .c-site-floating-nav {
    transform: translateY(0);
    z-index: 110;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
    transition: none;
  }
  html.c-site-header-menu-open .c-site-floating-nav .c-site-floating-nav__cta {
    display: none;
  }
  html.c-site-header-menu-open .c-site-floating-nav .c-site-floating-nav__burger {
    pointer-events: auto;
  }
  /* Single X button — hide the in-hero burger when menu is open, the
     floating burger is the canonical close button at any scroll pos. */
  html.c-site-header-menu-open .c-site-header__burger { display: none; }
}

/* ─── Mobile · floating bar shows just CTA + burger ─────────────
   At <736 we hide the nav links / indicator / lang-dropdown inside
   the floating bar (language switching moves into the burger panel)
   and reveal the burger so users can tap the menu from any scroll
   position without scrolling back to the in-hero header. The CTA
   sheds its button styling and reads as a plain text link, matching
   the in-hero cta-mini aesthetic, with a 16-px gap to the burger
   (same as the in-hero header). */
@media (max-width: 735.98px) {
  .c-site-floating-nav > a:not([class*="cta"]),
  .c-site-floating-nav__indicator,
  .c-site-floating-nav__lang {
    display: none;
  }
  .c-site-floating-nav__burger { display: inline-flex; margin-left: 0; }
  .c-site-floating-nav { gap: 16px; }

  .c-site-floating-nav__cta,
  .c-site-floating-nav__cta:link,
  .c-site-floating-nav__cta:visited {
    background: transparent;
    height: auto;
    padding: 0;
    color: var(--color-white);
    border-radius: 0;
    margin-left: 0;
  }
  .c-site-floating-nav__cta:hover {
    background: transparent;
    color: var(--color-alpine);
  }
  /* Ghost state on /kontakt/ — drop the box-shadow ring (it only
     made sense as a button outline). */
  .c-site-floating-nav__cta[aria-current="page"],
  .c-site-floating-nav__cta[aria-current="page"]:link,
  .c-site-floating-nav__cta[aria-current="page"]:visited {
    box-shadow: none;
    color: rgba(255, 255, 255, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-site-floating-nav { transition: none; }
}