/* ==========================================================================
   Header – schwebend, zu Beginn transparent, beim Scrollen Glas-Kapsel
   ========================================================================== */

.site-header {
  position: fixed;
  top: var(--header-top);
  left: 50%;
  z-index: 50;
  width: var(--shell);
  transform: translateX(-50%);
  color: var(--c-ivory);
  transition: color 0.4s ease;
}

.site-header__bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  /* rechts derselbe Abstand wie oben und unten: (Header-Höhe − CTA-Höhe) / 2 */
  padding-inline: 0.75rem;
  border-radius: 999px;
}

/* Ohne Glas: Inhalte bündig mit dem Raster; mit Glas: eingerückt (nur transform) */
.brand,
.site-header__cta { transition: transform 0.5s var(--ease-out); }
.site-header:not(.is-scrolled) .brand { transform: translateX(-0.75rem); }
.site-header:not(.is-scrolled) .site-header__cta { transform: translateX(0.75rem); }

/* Glasfläche als eigene Ebene, damit sie weich einblenden kann */
.site-header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.015)),
    rgb(24 23 21 / 0.52);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    inset 0 0 0 1px rgb(255 255 255 / 0.06),
    0 12px 40px -18px rgb(0 0 0 / 0.55);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.45s ease, transform 0.6s var(--ease-out), background-color 0.4s ease;
}

.site-header.is-scrolled .site-header__bar::before { opacity: 1; transform: none; }

/* Über hellen Sections: helles Glas, dunkle Schrift */
.site-header[data-tone="light"] { color: var(--c-ink); }
.site-header[data-tone="light"] .site-header__bar::before {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.25)),
    rgb(245 243 238 / 0.5);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.8),
    inset 0 0 0 1px rgb(24 24 23 / 0.07),
    0 12px 40px -20px rgb(24 24 23 / 0.28);
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.5rem 0.9rem 0.5rem 0;
  text-decoration: none;
  line-height: 1;
}
.brand__word {
  font-size: 1.25rem;
  font-weight: 650;
  font-stretch: 118%;
  letter-spacing: 0.08em;
}
.brand__place {
  font-size: 0.6875rem;
  font-weight: 500;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.62;
}

.site-nav ul {
  display: flex;
  gap: clamp(1.5rem, 1rem + 1.4vw, 2.75rem);
}
.site-nav a {
  position: relative;
  display: inline-block;
  padding: 0.6rem 0;
  font-size: 0.875rem;
  font-weight: 450;
  letter-spacing: 0.01em;
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 0.25s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.35rem;
  height: 1px;
  background: var(--c-champagne);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.site-nav a[aria-current="true"] { opacity: 1; }
.site-nav a[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { opacity: 1; }
  .site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
}

.site-header__cta { justify-self: end; }

.menu-toggle {
  display: none;
  justify-self: end;
  width: 2.75rem; height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  position: relative;
}
.menu-toggle__lines,
.menu-toggle__lines::before {
  position: absolute;
  left: 50%;
  width: 1.15rem; height: 1px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out);
}
.menu-toggle__lines { top: calc(50% - 3px); transform: translateX(-50%); }
.menu-toggle__lines::before { content: ""; top: 6px; left: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines { transform: translateX(-50%) translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines::before { transform: translateY(-6px) rotate(-90deg); }

@media (max-width: 860px) {
  :root { --header-h: 3.5rem; }
  .site-header__bar {
    grid-template-columns: 1fr auto auto;
    gap: 0.25rem;
  }
  .site-header__bar { padding-inline: 0.25rem; }
  .site-header:not(.is-scrolled) .brand,
  .site-header:not(.is-scrolled) .site-header__cta { transform: none; }
  .menu-toggle { display: block; }
  /* CTA liegt im Menü, nicht in der Leiste */
  .site-header__bar { grid-template-columns: 1fr auto; }
  .site-nav__cta { padding: 0.5rem; }
  .site-nav__cta .btn { width: 100%; }
  .site-nav li + li.site-nav__cta a,
  .site-nav__cta { border-top: 0; }

  .site-nav {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0; right: 0;
    padding: 0.5rem;
    border-radius: 18px;
    background: rgb(26 25 23 / 0.94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07), 0 20px 50px -20px rgb(0 0 0 / 0.6);
    color: var(--c-ivory);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.2s ease, transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
  }
  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s ease, transform 0.25s var(--ease-out), visibility 0s;
  }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a {
    display: block;
    padding: 0.95rem 1rem;
    font-size: 1.0625rem;
    opacity: 1;
    border-radius: 12px;
  }
  .site-nav li + li a { border-top: 1px solid rgb(255 255 255 / 0.06); border-radius: 0; }
  .site-nav a::after { display: none; }
  /* Auf kleinen Displays ist die Kapsel immer leicht hinterlegt, sobald das Menü offen ist */
  .site-header.menu-open .site-header__bar::before { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
  .brand__place { display: none; }
}