/* ==========================================================================
   Kopfzeile (alle drei Seiten)
   Seit 12.09.2026 eine gleichfarbige Fläche im Seeblau der Seite: links die
   Signatur in Weiß, rechts ein einziger Weg, „Get the guide“. Keine Liste mit
   Sprungmarken mehr. Die Leiste liegt fest über der Seite, damit der Hero seine
   volle Bildschirmhöhe behält. Beim Scrollen rückt das Logo zusammen
   (js/logo.js), die Fläche selbst bleibt, wie sie ist.
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  min-height: var(--header-h);
  padding-block: clamp(0.75rem, 0.55rem + 0.7vw, 1.25rem);
  /* dasselbe Korn wie die Seite, sonst hebt sich die Leiste als hellerer Streifen ab */
  background: var(--grain) 0 0 / 240px 240px, var(--bg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

.brand {
  display: inline-block;
  color: var(--paper);
  text-decoration: none;
  border-radius: var(--radius-surface);
  transform-origin: left center;
}

.brand__signature {
  width: auto;
  height: clamp(2rem, 1.7rem + 1.2vw, 3rem);
}

.header-cta {
  flex-shrink: 0;
  min-height: 2.75rem;
  padding: 0.6rem 1.25rem;
  font-size: var(--step--1);
}

@media (max-width: 30rem) {
  .header-cta {
    padding-inline: 1rem;
  }
}