/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding-block: clamp(1rem, 2vw, 1.6rem);
  color: #fff;
  transition: transform var(--dur-slow) var(--ease-out),
    background-color var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    color var(--dur-slow) var(--ease-out),
    padding var(--dur-slow) var(--ease-out);
}

/* Entrance: slides down once the hero image has settled. */
.site-header {
  transform: translate3d(0, -100%, 0);
  opacity: 0;
}

.site-header.is-ready {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition: transform var(--dur-slower) var(--ease-out) 200ms,
    opacity var(--dur-slower) var(--ease-out) 200ms;
}

/* Over imagery the bar is transparent, so the type carries its own contrast. */
.site-header:not(.is-scrolled) .site-header__inner {
  text-shadow: 0 1px 2px rgba(22, 16, 18, 0.3),
    0 1px 18px rgba(22, 16, 18, 0.35);
}

.site-header.is-ready.is-scrolled {
  padding-block: 0.75rem;
  background-color: rgba(252, 248, 247, 0.82);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 var(--c-line), 0 12px 30px -24px rgba(58, 30, 38, 0.5);
  color: var(--c-ink);
  transition: transform var(--dur-slow) var(--ease-out),
    background-color var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    color var(--dur-slow) var(--ease-out),
    padding var(--dur-slow) var(--ease-out);
}

.site-header.is-ready.is-hidden {
  transform: translate3d(0, -100%, 0);
}

/*
   Positioniert, damit die Leiste über dem Mobilmenü liegt: das ist ein
   positioniertes Geschwister weiter unten im Markup und läge sonst über
   Wortmarke und Menüknopf — man käme nicht mehr heraus.
*/
.site-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

/* ------------------------------------------------------------- Wordmark -- */

.wordmark {
  display: grid;
  gap: 0.28rem;
  line-height: 1;
}

/* A touch larger than the nav around it — the brand should lead the bar. */
.wordmark__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  letter-spacing: 0.03em;
}

.wordmark__place {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.62;
}

/* ----------------------------------------------------------- Navigation -- */

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.6rem);
}

.site-nav__link {
  position: relative;
  display: block;
  padding-block: 0.35rem;
  font-size: var(--fs-meta);
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0.86;
  transition: opacity var(--dur-hover) var(--ease-out-soft);
}

.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}

.site-nav__link:hover {
  opacity: 1;
}

.site-nav__link:hover::after,
.site-nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-nav__link.is-active {
  opacity: 1;
}

.is-scrolled .site-nav__link.is-active {
  color: var(--c-accent);
}

/*
   Die Leiste ordnet mit `space-between`, und dieser Kasten ist ihr drittes
   Kind. Über 900 px steht darin nichts mehr — der Anfrage-Knopf ist aus dem
   Markup gefallen, der Menüknopf erscheint erst darunter. Ein leeres drittes
   Kind zählt bei `space-between` trotzdem als Platz: die Navigation rückte
   in die Mitte zwischen Wortmarke und rechtem Rand und stand als einzige
   Zeile der Seite auf keiner Kante — auf 1440 px mit 300 px Nichts hinter
   "Kontakt". Also ist der Kasten weg, solange er leer ist, und die
   Navigation schließt mit dem Satzspiegel ab.
*/
.site-header__actions {
  display: none;
  align-items: center;
  gap: var(--sp-4);
}

/* --------------------------------------------------------- Menu toggle -- */

.menu-toggle {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-end: -0.6rem;
  border-radius: var(--r-pill);
}

.menu-toggle__bars {
  display: grid;
  gap: 6px;
  width: 22px;
}

.menu-toggle__bars i {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.is-menu-open .menu-toggle__bars i:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.is-menu-open .menu-toggle__bars i:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* --------------------------------------------------------- Mobile menu -- */

.mobile-menu {
  position: fixed;
  /*
     Kein `inset: 0`. Der Kopf trägt einen `transform` (Einblendung von oben,
     Wegblenden beim Abwärtsscrollen) und ist damit der Bezugsrahmen seiner
     fixierten Kinder — `bottom: 0` endete an der Unterkante der Leiste, und
     das Menü klappte in einen 144 Pixel hohen Streifen auf statt über den
     Schirm. Der Kopf sitzt selbst oben links am Schirmrand und über dessen
     volle Breite, top/left/right stimmen also mit dem Schirm überein; allein
     die Höhe muss ausdrücklich stehen. Auf der Datenschutzseite gilt
     dasselbe: dort steht kein `transform`, aber ein `backdrop-filter`, und
     der spannt denselben Rahmen auf.
  */
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  /*
     Über Hintergrund, Weichzeichner und Schatten der Leiste, unter deren
     Inhalt (siehe `.site-header__inner`). Vorher stand hier -1 — damit lag
     das Menü *hinter* dem Hintergrund der Leiste und blieb überall dort
     unsichtbar, wo der nicht eigens abgeschaltet wurde.
  */
  z-index: 0;
  display: grid;
  align-content: center;
  /* Im Querformat ist der Schirm kürzer als die Liste: lieber scrollen. */
  align-content: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6rem var(--gutter) 3rem;
  background: var(--c-cream);
  color: var(--c-ink);
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: opacity var(--dur-base) var(--ease-out),
    clip-path var(--dur-slower) var(--ease-out);
}

/*
   `hidden` allein genügt nicht: das `display: grid` oben ist eine
   Autorenregel und schlägt das `display: none`, das der Browser dem Attribut
   mitgibt. Ohne diese Zeile stand das Menü immer im Layout — auf dem
   Schreibtisch-Schirm ebenso, mit anspringbaren Links im Fokuslauf und im
   Baum für Screenreader.
*/
.mobile-menu[hidden] {
  display: none;
}

.mobile-menu.is-open {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.mobile-menu__list {
  display: grid;
  gap: 0.4rem;
  border-block-start: 1px solid var(--c-line);
}

.mobile-menu__list li {
  border-block-end: 1px solid var(--c-line);
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(120ms + var(--i) * 70ms);
}

.mobile-menu.is-open .mobile-menu__list li {
  opacity: 1;
  transform: none;
}

.mobile-menu__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 2.9rem);
  letter-spacing: var(--ls-display);
  color: var(--c-ink);
  transition: color var(--dur-hover) var(--ease-out-soft);
}

.mobile-menu__list a:hover {
  color: var(--c-accent);
}

.mobile-menu__index {
  font-family: var(--font-text);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--c-ink-muted);
}

.mobile-menu__foot {
  margin-block-start: var(--sp-7);
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(120ms + var(--i) * 70ms);
}

.mobile-menu.is-open .mobile-menu__foot {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------ Responsive -- */

@media (max-width: 900px) {
  .site-nav {
    display: none;
  }

  .site-header__actions {
    display: flex;
  }

  .menu-toggle {
    display: grid;
  }

  /*
     Once open, the bar sits on the cream overlay — nur die Schriftfarbe muss
     mit. Hintergrund, Weichzeichner und Schatten der Leiste liegen jetzt
     unter dem Menü und brauchen nicht mehr abgeschaltet zu werden; der
     Versuch scheiterte ohnehin an `.is-ready.is-scrolled`, das eine Klasse
     mehr wiegt.
  */
  .site-header.is-menu-open {
    color: var(--c-ink);
  }
}

/* ==========================================================================
   Seiten ohne Hero — `.page-plain` am <body>, gesetzt von den Seitenmodulen
   (js/pages/legal.js und js/pages/contact.js).

   Über dem Hero beginnt die Leiste durchsichtig und wird erst von hero.js
   (`.is-ready`) und vom Scrollen (`.is-scrolled`) eingeschaltet. Auf einer
   Seite ohne Hero passiert beides nie: die Leiste bliebe verborgen und
   setzte danach weiße Schrift auf Creme. Hier steht sie von Anfang an in dem
   festen Zustand, den sie auf der Startseite nach dem ersten Scrollen
   annimmt — damit es nicht zwei verschiedene Köpfe gibt.
   ========================================================================== */

.page-plain .site-header {
  transform: none;
  opacity: 1;
  padding-block: 0.75rem;
  background-color: rgba(252, 248, 247, 0.82);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 var(--c-line), 0 12px 30px -24px rgba(58, 30, 38, 0.5);
  color: var(--c-ink);
}

/* Der Schein hebt weiße Schrift von Bildern ab; auf Creme ist er nur Schmutz. */
.page-plain .site-header:not(.is-scrolled) .site-header__inner {
  text-shadow: none;
}