/* spt-header.css — gemeinsamer Kopf aller Swiss-Prime-Taste-Plattformen.
   Liegt in jedem Repo byteidentisch, genau wie spt-footer.css. Nie nur hier
   aendern: eine Aenderung geht gleichzeitig in alle Repos. Seitenbezogenes
   gehoert in die Seiten-CSS, nicht hierher.

   Aufbau:
     <header class="spt-header">
       <div class="spt-header__top"><div class="spt-header__inner"> Marke | Sprache + SPT </div></div>
       <nav   class="spt-header__nav"><div class="spt-header__inner"><ul> Menue + Shop </ul></div></nav>
     </header>

   Zwei Markenvarianten:
     A  eigene Wortmarke  -> __mark + __by + __gluex   (Rolle, icedTEA)
     B  ohne Wortmarke    -> __mark--gluex + __sub     (vending, RTC)
   Die Glueckswelt selbst (gluex.ch) nutzt __mark--gluex ohne __sub.

   Alle Schriftgroessen >= 13 px (Design System).
*/

.spt-header{
  --spth-bg: #0E0D0B;
  --spth-border: #262521;
  --spth-text: #FDFBF7;
  --spth-muted: #9A948A;
  --spth-gold: #D9B44A;
  --spth-gold-h: #C79E33;
  --spth-hover: rgba(253, 251, 247, .06);
  --spth-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --spth-max: 1280px;
  --spth-gutter: 20px;
  --spth-radius: 2px;
  --spth-t: 160ms;
  --spth-ease: cubic-bezier(.2, 0, 0, 1);
  box-sizing: border-box;
  display: block;
  background: var(--spth-bg);
  color: var(--spth-text);
}
.spt-header *, .spt-header *::before, .spt-header *::after{ box-sizing: border-box; }
.spt-header a{ text-decoration: none; }
.spt-header a:focus-visible{ outline: 2px solid var(--spth-gold); outline-offset: 2px; }

.spt-header__top, .spt-header__nav{ border-bottom: 1px solid var(--spth-border); }
.spt-header__inner{ max-width: var(--spth-max); margin: 0 auto; padding: 0 var(--spth-gutter); }
.spt-header__top .spt-header__inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-block: 18px;
}

/* ── Marke ──────────────────────────────────────────────────────────── */
.spt-header__brand{ display: flex; align-items: flex-end; gap: 16px; min-width: 0; }
.spt-header__brand a{ display: inline-flex; line-height: 0; color: inherit; }
.spt-header__mark{ height: 56px; width: auto; flex: 0 0 auto; }
.spt-header__mark--gluex{ height: 44px; }
.spt-header__by{
  font-family: var(--spth-mono); font-size: 13px; line-height: 1;
  letter-spacing: .16em; color: var(--spth-muted); margin: 0 -4px 11px 0;
}
.spt-header__gluex{ height: 26px; width: auto; flex: 0 0 auto; margin-bottom: 7px; }
/* Plattformstempel fuer die Auftritte ohne eigene Wortmarke (vending, RTC).
   Er traegt dort den Namen, den sonst die Wortmarke traegt, und darf darum
   auffallen: Gold im duennen Goldrahmen, leicht angeschraegt. Die Neigung ist
   bewusst klein - 4 Grad liest sich als gesetzt, 10 Grad als verrutscht.

   Zwei Fassungen:
     <span class="spt-header__sub"><em>24/7</em>Tiefkuehl-Automat</span>
     <span class="spt-header__sub spt-header__sub--text">Ready to Cook</span>
   Das <em> ist fuer eine fuehrende Zahl da (Bahnschrift gibt es im Kopf nicht,
   darum Mono). Ohne Zahl steht der Name einzeilig und groesser: --text. */
.spt-header__sub{
  display: inline-block;
  font-family: var(--spth-mono); font-size: 13px; font-weight: 600;
  line-height: 1.25; letter-spacing: .16em; text-transform: uppercase;
  color: var(--spth-gold); white-space: nowrap; text-align: left;
  border: 1px solid var(--spth-gold); border-radius: var(--spth-radius);
  padding: 7px 12px 6px;
  transform: rotate(-4deg); transform-origin: left bottom;
  /* Der Stempel steht ebenerdig mit dem Glueux-Logo: die Unterkante liegt auf
     derselben Linie, nicht darueber. Darum kein Abstand nach unten, und die
     Neigung dreht um genau diese untere linke Ecke. */
  margin: 0 10px 0 4px;
}
.spt-header__sub em{
  display: block; font-style: normal; font-weight: 600;
  font-size: 26px; line-height: 1; letter-spacing: .02em; margin-bottom: 4px;
}
.spt-header__sub--text{ font-size: 18px; letter-spacing: .1em; line-height: 1; padding: 9px 13px 8px; }
.spt-header__claim{
  font-family: var(--spth-mono); font-size: 13px; line-height: 1.4;
  letter-spacing: .18em; text-transform: uppercase; color: var(--spth-muted);
  border-left: 1px solid var(--spth-border); padding-left: 16px;
  margin-bottom: 6px; white-space: nowrap;
}

/* ── Sprache und Dachmarke ──────────────────────────────────────────── */
.spt-header__right{ display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.spt-header__lang{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--spth-border); border-radius: var(--spth-radius);
  font-family: var(--spth-mono); font-size: 13px; line-height: 1;
  letter-spacing: .1em; color: var(--spth-text);
  transition: color var(--spth-t) var(--spth-ease),
              border-color var(--spth-t) var(--spth-ease),
              background-color var(--spth-t) var(--spth-ease);
}
.spt-header__lang:hover{ background: var(--spth-hover); color: var(--spth-gold); border-color: var(--spth-gold); }
.spt-header__spt img{ height: 38px; width: auto; }

/* ── Menueleiste ────────────────────────────────────────────────────── */
.spt-header__nav ul{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 28px; list-style: none; margin: 0; padding: 0;
}
.spt-header__nav li{ margin: 0; padding: 0; }
.spt-header__nav a{
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--spth-mono); font-size: 14px; line-height: 1;
  /* Klickbares nie gedaempft: Menuepunkte stehen in Creme, nicht in Grau
     (Regel aus PROJEKTE/CLAUDE.md). Gedaempft ist nur, was nicht klickbar ist. */
  letter-spacing: .12em; text-transform: uppercase; color: var(--spth-text);
  transition: color var(--spth-t) var(--spth-ease);
}
.spt-header__nav a:hover{ color: var(--spth-gold); }
.spt-header__nav a[aria-current="page"]{ color: var(--spth-gold); box-shadow: inset 0 -1px 0 var(--spth-gold); }
.spt-header__shop{ margin-left: auto; }
.spt-header__shop a{ color: var(--spth-gold); }
.spt-header__shop a:hover{ color: var(--spth-gold-h); }

@media (max-width: 860px){
  .spt-header__claim{ display: none; }
  .spt-header__top .spt-header__inner{ flex-wrap: wrap; gap: 14px; }
  .spt-header__brand{ gap: 11px; }
  .spt-header__mark{ height: 42px; }
  .spt-header__mark--gluex{ height: 34px; }
  .spt-header__gluex{ height: 20px; margin-bottom: 5px; }
  .spt-header__by{ margin-bottom: 8px; }
  .spt-header__sub{ letter-spacing: .12em; padding: 5px 9px 4px; margin: 0 8px 0 3px; }
  .spt-header__sub em{ font-size: 20px; margin-bottom: 3px; }
  .spt-header__sub--text{ font-size: 15px; padding: 7px 10px 6px; }
  .spt-header__right{ gap: 12px; margin-left: auto; }
  .spt-header__spt img{ height: 30px; }
  .spt-header__nav ul{ gap: 0 18px; }
  .spt-header__shop{ margin-left: 0; }
}