/* ============================================================
   e1ps/site-header

   Alles zu diesem Block an einer Stelle: Aufbau, Gestaltung, Zustaende,
   schmale Breiten und die Sonderfaelle im Editor. Wer den Kopfbereich in
   ein anderes Theme uebernimmt, kopiert diesen Ordner — und hat ihn
   vollstaendig.

   Reihenfolge in dieser Datei, absichtlich immer dieselbe:

     1  Aufbau       Struktur und Masse. Markenneutral.
     2  Gestaltung   Farben, Rahmen, Uebergaenge. Laeuft ausschliesslich
                     ueber Token — hier steht kein fester Farbwert.
     3  Zustaende    gescrollt, ueber dem Hero, aktiv, offen
     4  Schmal       Media Queries dieses Blocks
     5  Editor       was nur im Backend gilt

   Wer nur die Marke wechseln will, fasst Abschnitt 2 gar nicht an, sondern
   ueberschreibt die Token in tokens/e1ps.css.

   Masse 1:1 aus Prototyp.dc.html Zeile 1784-1807:
     Innencontainer  max-width 1180px, padding 22px var(--space-6), gap var(--space-6)
     Logo            height 50px
     Navigation      gap var(--space-6), Links var(--text-sm) in --text-muted
     Umschalter      40x40 rund, 1px Rahmen, Symbol 19px
     Burger          44x44, Symbol 20px
     Unterstrich     2px, --accent-base, radius 2px

   Abweichung vom Prototyp: dort ist die Leiste `position: sticky` und traegt
   ihren milchigen Hintergrund permanent. Hier schwebt sie ueber dem Inhalt
   und blendet den Hintergrund erst beim Scrollen ein.
   ============================================================ */

/* ---------- 1-3  Aufbau, Gestaltung, Zustaende ---------- */

.ps-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out),
              backdrop-filter var(--dur-slow) var(--ease-out);
}

/* Der eingeblendete Zustand. app.js setzt data-scrolled, sobald die Seite
   mehr als eine halbe Leistenhoehe gescrollt ist. */
.ps-header[data-scrolled="true"] {
  background: color-mix(in srgb, var(--surface-page) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border-subtle);
}

/* Seiten ohne Hero: der Platzhalter haelt den Inhalt unter der Leiste frei. */
.ps-header__offset { height: var(--ps-header-h, 94px); }

.ps-header__inner {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-6);
  max-width: 1180px;
  margin-inline: auto;
  /* Der vertikale Innenabstand steht als Variable, weil der Unterstrich daran
     haengt: er sitzt auf der Unterkante des Inhaltsbereichs. */
  --ps-header-pad-y: 22px;
  padding: var(--ps-header-pad-y) var(--space-6);
}

/* ---------- Logo ---------- */

.ps-header__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 0;
}
.ps-header__logo-img {
  height: 50px;
  width: auto;
  max-width: none;
}

/* Welche Fassung sichtbar ist, entscheidet allein das CSS. */
.ps-header__logo-img--dark { display: none; }
[data-theme="dark"] .ps-header__logo-img--light { display: none; }
[data-theme="dark"] .ps-header__logo-img--dark { display: block; }

/* Solange die Leiste transparent ueber dem dunklen Hero steht, braucht es die
   helle Fassung — unabhaengig vom gewaehlten Farbschema. */
.ps-header--overlay:not([data-scrolled="true"]) .ps-header__logo-img--light { display: none; }
.ps-header--overlay:not([data-scrolled="true"]) .ps-header__logo-img--dark { display: block; }

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

.ps-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.ps-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-nav__list a {
  /* Der Innenabstand ist kein Zierrat: ohne ihn ist das Ziel nur 17px hoch
     und verfehlt die 24px aus WCAG 2.2. Die Kopfzeilenhoehe aendert sich
     dadurch nicht — das Logo ist mit 50px ohnehin hoeher. */
  display: inline-block;
  padding: 6px 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  transition: color 200ms var(--ease-out);
}
.ps-nav__list a:hover,
.ps-nav__list a[aria-current] { color: var(--text-strong); }

.ps-nav__empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Der mitlaufende Unterstrich.

   Der Prototyp setzt ihn auf `bottom: 0` — damit klebt er direkt auf der
   Trennlinie der Kopfzeile. Hier sitzt er auf der Unterkante des
   Inhaltsbereichs, also zwischen Schrift und Trenner, und fluchtet mit der
   Unterkante des Logos. */
.ps-nav__bar {
  position: absolute;
  left: 0;
  bottom: var(--ps-header-pad-y, 22px);
  height: 2px;
  width: 0;
  opacity: 0;
  border-radius: 2px;
  background: var(--accent-base);
  transform: translateX(0);
  transition: transform 320ms var(--ease-out),
              width 320ms var(--ease-out),
              opacity 200ms var(--ease-out);
  pointer-events: none;
}

/* ---------- Ueber dem Hero: helle Schrift ---------- */

.ps-header--overlay:not([data-scrolled="true"]) .ps-nav__list a { color: var(--on-media); }
.ps-header--overlay:not([data-scrolled="true"]) .ps-nav__list a:hover,
.ps-header--overlay:not([data-scrolled="true"]) .ps-nav__list a[aria-current] { color: var(--on-media-strong); }
.ps-header--overlay:not([data-scrolled="true"]) .ps-theme-toggle,
.ps-header--overlay:not([data-scrolled="true"]) .ps-burger {
  color: var(--on-media);
  border-color: var(--on-media-line);
}
.ps-header--overlay:not([data-scrolled="true"]) .ps-theme-toggle:hover,
.ps-header--overlay:not([data-scrolled="true"]) .ps-burger:hover {
  color: var(--on-media-strong);
  border-color: var(--on-media-strong);
}

/* ---------- Burger ---------- */

.ps-burger {
  display: none;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  background: transparent;
  border: 1px solid var(--control-line);
  border-radius: var(--radius-sm);
  color: var(--text-strong);
  cursor: pointer;
}

/* ---------- Theme-Umschalter ---------- */

.ps-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  background: transparent;
  border: 1px solid var(--control-line);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.ps-theme-toggle:hover {
  color: var(--text-strong);
  border-color: var(--highlight);
}
.ps-burger:hover { border-color: var(--control-line-hover); }

/* Sonne im dunklen, Mond im hellen Schema — wie im Prototyp ueber
   sunDisp/moonDisp, hier ohne JavaScript. */
.ps-theme-toggle__sun { display: none; }
.ps-theme-toggle__moon { display: inline-flex; }
[data-theme="dark"] .ps-theme-toggle__sun { display: inline-flex; }
[data-theme="dark"] .ps-theme-toggle__moon { display: none; }

/* ---------- Pulsierender Punkt (z. B. vor "Karriere") ---------- */
/*
   Der Prototyp setzt dafuer zwei verschachtelte <span> direkt ins Markup.
   Hier genuegen die beiden Pseudoelemente des Listenpunktes: ::before ist der
   ruhende Punkt, ::after der auslaufende Ring.

   Gesteuert wird das ueber die CSS-Klasse "ps-ping" am Menuepunkt — zu setzen
   unter Design → Menues im Feld "CSS-Klassen". Die Menueverwaltung bleibt also
   vollstaendig erhalten; der Effekt ist eine Eigenschaft des Eintrags, nicht
   fest verdrahtet im Theme.
*/

.ps-nav__list li.ps-ping {
  position: relative;
  padding-left: 15px;      /* 7px Punkt + 8px Abstand, wie im Prototyp */
}
.ps-nav__list li.ps-ping::before,
.ps-nav__list li.ps-ping::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--accent-base);
}
.ps-nav__list li.ps-ping::after {
  animation: ps-ping 2.4s var(--ease-out) infinite;
}

/* Die Keyframes stehen in assets/css/base.css: Der Hero benutzt dieselbe
   Animation, und Keyframes gelten ohnehin global. */

@media (prefers-reduced-motion: reduce) {
  .ps-nav__list li.ps-ping::after { animation: none; opacity: 0; }
}

/* ---------- 4  Schmale Breiten ---------- */

@media (max-width: 1024px) {
  .ps-burger { display: inline-flex; }

  /* ---------- gemeinsam ---------- */

  /*
     Das Panel bleibt im Dokument und wird ueber transform verborgen — nur so
     laesst sich das Auf- und Zurollen in BEIDE Richtungen animieren. Mit
     `display: none` gaebe es beim Schliessen nichts mehr zu bewegen.

     `visibility` haelt es dabei aus der Tabulatorreihenfolge heraus und wird
     verzoegert umgeschaltet, damit die Bewegung noch zu Ende laeuft.
  */
  .ps-nav {
    display: flex;
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--surface-page);

    visibility: hidden;
    transform: translateY(-100%);
    transition:
      transform 280ms var(--ease-out),
      visibility 0s linear 280ms;
  }
  .ps-nav[data-open="true"] {
    visibility: visible;
    transform: translateY(0);
    /* Die eigene Ebene vorab anfordern, damit der erste Frame nicht mit dem
       Anlegen der Textur vergeht. */
    will-change: transform;
    transition:
      transform 280ms var(--ease-out),
      visibility 0s;
  }

  @media (prefers-reduced-motion: reduce) {
    .ps-nav,
    .ps-nav[data-open="true"] { transition: none; }
  }

  .ps-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
  }
  .ps-nav__list a {
    /* Tap-Ziel nach WCAG 2.2 mindestens 44px hoch. */
    display: block;
    width: 100%;
    padding: 12px 0;
  }

  /* Der mitlaufende Balken ergibt in der Klappliste keinen Sinn. */
  .ps-nav__bar { display: none; }

  /* Solange das Menue offen ist, darf der Hintergrund nicht mitscrollen. */
  body[data-nav-open="true"] { overflow: hidden; }

  /* Logo, Burger und Umschalter bleiben ueber dem geoeffneten Panel. */
  .ps-header__logo,
  .ps-burger,
  .ps-theme-toggle {
    position: relative;
    z-index: 2;
  }

  /* Der Burger wird zum Schliessen — an derselben Stelle. */
  .ps-burger__close { display: none; }
  [data-nav-open="true"] .ps-burger__open { display: none; }
  [data-nav-open="true"] .ps-burger__close { display: inline-flex; }

  /* Ein offenes Menue braucht dunkle Schrift und einen deckenden Grund, auch
     wenn die Leiste sonst transparent ueber dem Hero steht.

     Wichtig ist die Ebene: Der Hintergrund der Kopfzeile liegt als Elternteil
     UNTER dem Panel — das Panel wanderte deshalb sichtbar hinter dem Logo
     vorbei, man sah den letzten Menuepunkt von oben durchlaufen. Ein eigenes
     Pseudoelement mit z-index 1 schiebt sich zwischen Panel (0) und
     Bedienelemente (2) und deckt die Bewegung ab.

     `transition: none` ist kein Schoenheitsfehler, sondern der Kern der zweiten
     Korrektur: Ohne sie animiert die Leiste beim Oeffnen `backdrop-filter` von
     blur(12px) auf none — 360ms lang, gleichzeitig zur Panelbewegung. Ein
     animierter Backdrop-Filter zwingt den Browser in jedem Frame zum
     Neuberechnen der Unschaerfe; genau das war das Stocken, das nur auftrat,
     wenn die Seite schon gescrollt war (oben gibt es keinen Filter). */
  .ps-header[data-nav-open="true"] {
    background: var(--surface-page);
    backdrop-filter: none;
    transition: none;
  }
  .ps-header[data-nav-open="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--surface-page);
    pointer-events: none;
  }
  .ps-header--overlay[data-nav-open="true"] .ps-nav__list a { color: var(--text-muted); }
  .ps-header--overlay[data-nav-open="true"] .ps-nav__list a:hover,
  .ps-header--overlay[data-nav-open="true"] .ps-nav__list a[aria-current] { color: var(--text-strong); }
  .ps-header--overlay[data-nav-open="true"] .ps-theme-toggle,
  .ps-header--overlay[data-nav-open="true"] .ps-burger {
    color: var(--text-muted);
    border-color: var(--control-line);
  }
  .ps-header--overlay[data-nav-open="true"] .ps-header__logo-img--light { display: block; }
  .ps-header--overlay[data-nav-open="true"] .ps-header__logo-img--dark { display: none; }
  [data-theme="dark"] .ps-header--overlay[data-nav-open="true"] .ps-header__logo-img--light { display: none; }
  [data-theme="dark"] .ps-header--overlay[data-nav-open="true"] .ps-header__logo-img--dark { display: block; }

  /* ---------- Variante: Ausklappen ----------
     Das Verhalten des Prototyps: die Liste haengt unter der Kopfzeile. */

  /* z-index 1 statt hoeher: Das Panel soll UNTER der Logo-Zeile hervorrollen.
     Die Kopfzeile bekommt bei geoeffnetem Menue einen deckenden Hintergrund
     und verdeckt damit den Teil, der noch oberhalb steht. */
  [data-nav-style="dropdown"] .ps-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 0;
    gap: var(--space-4);
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-default);
  }
  [data-nav-style="dropdown"] .ps-nav__list a { font-size: var(--text-base); }
  [data-nav-style="dropdown"][data-nav-open="true"] { border-bottom-color: transparent; }

  /* ---------- Variante: Vollbild ----------
     z-index 45 liegt unter der Kopfzeile (50): Logo und Schliessen-Knopf
     bleiben sichtbar und bedienbar, das Panel fuellt alles darunter.

     Die Eintraege sitzen unten statt oben — dort kommt der Daumen hin. */

  /*
     z-index wirkt hier INNERHALB der Kopfzeile: die traegt selbst z-index 50
     und position fixed, bildet also einen eigenen Stapelkontext. Ein hoeherer
     Wert am Panel wuerde es nicht ueber die Leiste heben — er wuerde nur Logo
     und Knoepfe verdecken, weil das Panel spaeter im Markup steht. Deshalb
     bekommen die Bedienelemente eine eigene Ebene (siehe unten) und das Panel
     bleibt darunter. */
  [data-nav-style="fullscreen"] .ps-nav {
    position: fixed;
    inset: 0;
    z-index: 0;
    justify-content: flex-end;
    gap: var(--space-6);
    /*
       Gerechnet fuer den engsten Fall (iPhone SE, 667px): Kopfzeile 95 +
       Innenabstand oben 16 + sechs Eintraege zu je 73 + fuenf Zwischenraeume
       zu 4 + Innenabstand unten 48 = 616. Es bleibt Luft, also entsteht kein
       Balken. `auto` bleibt als Netz fuer laengere Menues stehen.
    */
    padding: calc(var(--ps-header-h, 94px) + var(--space-4)) var(--space-6) var(--space-7);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /*
     Das Vollbild legt rund 667px zurueck, die Klappliste nur 400. Mit
     derselben Dauer wirkt die lange Strecke wie ein Schnappen — gemessen war
     die Bewegung nach 120ms bereits abgeschlossen. --dur-slow (360ms) laesst
     sie als Rollen lesen, ohne traege zu werden.
  */
  [data-nav-style="fullscreen"] .ps-nav {
    transition:
      transform var(--dur-slow) var(--ease-out),
      visibility 0s linear var(--dur-slow);
  }
  [data-nav-style="fullscreen"] .ps-nav[data-open="true"] {
    transition:
      transform var(--dur-slow) var(--ease-out),
      visibility 0s;
  }

  [data-nav-style="fullscreen"] .ps-nav__list { gap: var(--space-1); }
  /* Mit .ps-header davor, damit die Regel die Overlay-Zuweisung weiter oben
     schlaegt: dort steht --text-muted, was bei 28px Displaygroesse zu blass
     wirkt. Im Vollbild sind die Eintraege der Hauptinhalt, nicht Beiwerk. */
  .ps-header[data-nav-style="fullscreen"] .ps-nav__list a {
    padding: 14px 0;
    font-size: var(--text-2xl);
    font-family: var(--font-display);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    color: var(--text-strong);
  }
  .ps-header[data-nav-style="fullscreen"] .ps-nav__list a:hover,
  .ps-header[data-nav-style="fullscreen"] .ps-nav__list a[aria-current] { color: var(--highlight); }
  [data-nav-style="fullscreen"] .ps-nav__list li.ps-ping { padding-left: 22px; }
  [data-nav-style="fullscreen"] .ps-nav__list li.ps-ping::before,
  [data-nav-style="fullscreen"] .ps-nav__list li.ps-ping::after {
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
  }

}

@media (max-width: 768px) {
  .ps-header__inner {
    --ps-header-pad-y: 16px;
    padding: var(--ps-header-pad-y) var(--space-4);
  }
  .ps-header__logo-img { height: 38px; }
}

@media (max-width: 480px) {
  .ps-header__logo-img { height: 32px; }
}

/* ---------- 5  Editor ---------- */

/*
   Im Editor liegt die Leiste in einem iframe. `position: fixed` wuerde sie
   dort an den Rand der Bearbeitungsflaeche heften und den Block darunter
   leerlaufen lassen — in der Vorschau soll sie einfach mitfliessen.
*/

.editor-styles-wrapper .ps-header {
  position: relative;
}
.editor-styles-wrapper .ps-header__offset {
  display: none;
}
/* Ohne Scrollen gibt es kein data-scrolled: die Vorschau zeigt sonst dauerhaft
   den transparenten Zustand, in dem man auf hellem Grund nichts sieht. */
.editor-styles-wrapper .ps-header--overlay {
  background: color-mix(in srgb, var(--surface-page) 88%, transparent);
  border-bottom-color: var(--border-subtle);
}
.editor-styles-wrapper .ps-header--overlay .ps-nav__list a { color: var(--text-muted); }
.editor-styles-wrapper .ps-header--overlay .ps-theme-toggle,
.editor-styles-wrapper .ps-header--overlay .ps-burger {
  color: var(--text-muted);
  border-color: var(--control-line);
}
.editor-styles-wrapper .ps-header--overlay .ps-header__logo-img--light { display: block; }
.editor-styles-wrapper .ps-header--overlay .ps-header__logo-img--dark { display: none; }