/* ═══════════════════════════════════════════════════════════════════════════
   Component: Site Header v2 — Scroll-aware, shadow on scroll
   ═══════════════════════════════════════════════════════════════════════════ */

.c-site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-surface-light);
  border-bottom: 1px solid transparent;
  /* 16px oben und unten: mit dem 52px hohen Logo ergibt das 85px
     Headerhoehe. Mobil gilt weiterhin 12px (siehe unten), damit der
     Header dort bei den eingespielten 69px bleibt. */
  padding-block: var(--space-md);
  transition: padding-block var(--motion-duration-base) var(--motion-ease-out),
              box-shadow var(--motion-duration-base) var(--motion-ease-out),
              border-color var(--motion-duration-base) var(--motion-ease-out);
}

/* Scrolled state — added by JS */
.c-site-header.is-scrolled {
  padding-block: var(--space-2xs);
  border-bottom-color: var(--color-border-default);
  box-shadow: var(--elevation-1);
}

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

/* ── Marke ──────────────────────────────────────────────────────────── */

/* Das Logo sitzt als Bild im Header. Es ist randlos beschnitten (die
   gelieferte Datei hat keine Aussenkante), liegt also genau auf der
   Containerkante — der Abstand nach aussen kommt allein vom Header-Padding.
   Seitenverhaeltnis 512 : 174,78 = 2,929 : 1.

   Kundenwunsch 28.09.2026: im grossen Header das ganze Logo (Bildmarke +
   zweizeilige Wortmarke "ESSIG / MEISTERBETRIEB"), im geschrumpften Header nur
   noch die Bildmarke links. Die Wortmarke wird also rechts abgeschnitten.

   Wo geschnitten wird, ist zweifach belegt:
   1. aus der SVG — die Geometrie der Bildmarke endet bei x = 116,40, die
      Wortmarke beginnt bei x = 193,73 (31 Pfade, kein Text, kein Rasterbild);
      dazwischen liegt also eine echte Luecke.
   2. aus dem gerenderten Bild — das Spaltenprofil des Logos bei 60px Hoehe
      zeigt Tinte bis 41,8px, dann 14,5px nichts, dann erst die Wortmarke.
      41,8px / 176px x 512 = 121,6 Einheiten, passt zur SVG-Luecke.

   Die Schnittkante liegt in dieser Luecke bei 33,1 % der Logobreite
   (58,3px bei 176px); ab dort ist alles abgeschnitten, sichtbar bleibt die
   Bildmarke mit den 155/512 = 30,2734 % der Breite.

   Der Schnitt laeuft ueber clip-path in Prozent, nicht ueber die Breite des
   Links: dadurch bleibt der Schnittpunkt bei jeder Logohoehe (60/48 gross,
   44/40 geschrumpft) an derselben Stelle, und der Browser kann ihn weich
   mitanimieren. Die Klickflaeche folgt dem Beschnitt von selbst — bei
   clip-path trifft ein Klick ausserhalb des sichtbaren Bereichs das Element
   nicht mehr. Deshalb bleibt der Link in seiner vollen Breite stehen und wird
   nur beschnitten, statt auf die Symbolbreite geschrumpft zu werden.

   Das Bild bekommt eine FESTE Breite statt `width: auto`: `height: 60px;
   width: auto` ergibt auf einem Flex-Element NICHT die natuergliche Breite —
   ein gestrecktes Flex-Kind hat eine definite Cross-Size, `auto` loest dann
   auf 0 auf und das Bild wird zusammengequetscht (gemessen: 18px statt 176px). */
.c-site-header {
  /* Volle Logobreite = 2,929003 x Logohoehe (Seitenverhaeltnis der Datei). */
  --essig-logo-w: calc(var(--essig-logo-h, 60px) * 2.929003);
}

.c-site-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 0;
  width: var(--essig-logo-w);
  /* Das Logo ist eine Grafik, kein Textlink. elements.css zeichnet auf
     jeden Link beim Ueberfahren eine 1,5px Linie am unteren Rand
     (a:hover { background-size: 100% 1.5px }). Unter einem Bild wirkt das
     wie ein Fehler — deshalb hier abgeschaltet. Die Tastatur-Markierung
     (a:focus-visible, Umriss) bleibt unberuehrt und damit sichtbar. */
  background-image: none;
}

.c-site-header__logo:hover,
.c-site-header__logo:focus {
  background-image: none;
  background-size: 0 0;
}

/* Grosser Header (vor dem Scrollen): 60px. Die geschrumpfte Fassung ist
   44px — das Verhaeltnis ist damit 1,36 : 1. Ein groesserer Sprung (85px
   wurde getestet) laesst den Header vor dem Scrollen unverhaeltnismaessig
   wuchtig wirken. */
.c-site-header__logo img {
  display: block;
  height: var(--essig-logo-h, 60px);
  /* Feste Breite statt width:auto — siehe Begruendung oben. */
  width: var(--essig-logo-w);
  max-width: none;
  flex: 0 0 auto;
  /* Voll sichtbar: kein Beschnitt. */
  clip-path: inset(0 0 0 0);
  transition: width var(--motion-duration-base) var(--motion-ease-out),
              height var(--motion-duration-base) var(--motion-ease-out),
              clip-path var(--motion-duration-base) var(--motion-ease-out);
}

/* Beim Scrollen faehrt der Header zusammen. 44px ist genau die Hoehe des
   Telefon-Knopfs — der geschrumpfte Header bleibt damit so hoch wie vor dem
   Logo-Einbau und wie vorher geprueft.
   Zusaetzlich wird rechts die Wortmarke weggeschnitten. Gemessenes
   Spaltenprofil des gerenderten Logos bei 60px Hoehe (176px breit):
     Bildmarke  Tinte 0,5 .. 40,5px   = 22,90 % der Logobreite
     Luecke     40,5 .. 54,8px
     Wortmarke  Tinte ab 54,8px       = 31,15 %
   Der Schnitt liegt in der Luecke bei 47,5px = 27,03 %, also bleiben 72,97 %
   von rechts weggeschnitten. Die Bildmarke bleibt damit vollstaendig stehen
   (sie endet 7px vor der Schnittkante), die Wortmarke faellt komplett weg. */
.c-site-header.is-scrolled {
  --essig-logo-h: 44px;
}

.c-site-header.is-scrolled .c-site-header__logo img {
  clip-path: inset(0 72.97% 0 0);
}

/* ── Navigation ─────────────────────────────────────────────────────── */

.c-nav-primary__list {
  display: flex;
  align-items: center;
  gap: 2.5rem; /* 40px — bewusst zwischen --space-xl (32) und --space-2xl (48) */
  list-style: none;
}

.c-nav-primary__list a {
  position: relative; /* anchor for the "+" indicator */
  display: inline-flex;
  align-items: center;
  /* Tap-Ziel: ohne vertikale Groesse war der Link nur 18px hoch und damit
     unter der Grenze von WCAG 2.5.8 (24x24). 44px entspricht der AAA-Stufe
     und ist bequem mit dem Daumen. Der Header waechst dadurch nicht, weil
     Marke und Telefon-Chip hoeher sind als der Link. */
  min-height: 44px;
  font-family: var(--font-family-body);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  background: none;
  transition: color var(--motion-duration-fast) var(--motion-ease-out);
}

/* "+" wayfinding mark — drawn BEFORE the label via ::before, absolutely
   positioned in the flex gap (2.5rem = 40px). It never takes layout
   space, so the label position is identical in every state. */
.c-nav-primary__list a::before {
  content: '+';
  position: absolute;
  left: -0.95em;
  top: 50%;
  line-height: 1;
  font-weight: var(--font-weight-bold);
  color: var(--color-orange-500);
  opacity: 0;
  /* Optische Ausrichtung, gemessen statt geschaetzt (28.09.2026, Hanken
     Grotesk 14px/600): die Tinte des Pluszeichens ist 7px hoch und sitzt genau
     auf der x-Hoehe, ihre Mitte also 3,5px ueber der Grundlinie. Die optische
     Mitte der Zeile liegt bei 5px (Versalhoehe 10px). Die Differenz von 1,5px
     wird hier ausgeglichen — vorher hing das Plus messbar zu tief. */
  transform: translate(-0.25em, calc(-50% - 1.5px));
  user-select: none;
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease-out),
    transform var(--motion-duration-fast) var(--motion-ease-out);
}

/* Hover / keyboard focus — neutral "+" in the label color */
.c-nav-primary__list a:hover::before,
.c-nav-primary__list a:focus-visible::before {
  opacity: 1;
  transform: translate(0, calc(-50% - 1.5px));
  color: var(--color-text-primary);
}

/* Active page — brand orange "+", permanent (kept on hover, wins by order) */
.c-nav-primary__list li.current-menu-item > a::before,
.c-nav-primary__list li.current_page_item > a::before {
  opacity: 1;
  transform: translate(0, calc(-50% - 1.5px));
  color: var(--color-orange-500);
}

/* Aktive Seite — Primaerfarbe statt Grau. Orange-600, nicht orange-500:
   der Hintergrund ist --color-surface-light (#f4f4f6), dort erreicht
   orange-600 4,8:1 (WCAG AA fuer Text) und ist dieselbe Farbe, die der
   Kicker-Text (region-map) und die Standard-Linkfarbe des Themes nutzen. */
.c-nav-primary__list li.current-menu-item > a,
.c-nav-primary__list li.current_page_item > a {
  color: var(--color-orange-600);
}

/* ── Phone CTA — Solid orange, magnetic ─────────────────────────────── */
/* Fläche orange-600 statt orange-500: die weiße Beschriftung „0151 10538030"
   erreicht auf orange-500 nur 3,7:1, auf orange-600 sind es 5,2:1. */

.c-site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  background-color: var(--color-orange-600);
  border-radius: var(--radius-full);
  text-decoration: none;
  background-image: none;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out),
              transform var(--motion-duration-fast) var(--motion-ease-spring);
}

.c-site-header__phone:hover {
  background-color: var(--color-orange-700);
  color: var(--color-text-inverse);
  transform: scale(1.03);
}

.c-site-header__phone:active {
  transform: scale(0.97);
}

.c-site-header__phone svg {
  width: 18px;
  height: 18px;
}

/* ── Mobile Toggle ──────────────────────────────────────────────────── */

.c-nav-primary__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  /* Zielgröße 44x44px — gemessen war der Schalter 40x18px. */
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-xs);
  background: none;
  border: none;
  cursor: pointer;
}

.c-nav-primary__toggle-icon,
.c-nav-primary__toggle-icon::before,
.c-nav-primary__toggle-icon::after {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text-primary);
  border-radius: 1px;
  transition: transform var(--motion-duration-base) var(--motion-ease-out);
}

.c-nav-primary__toggle-icon {
  position: relative;
}

.c-nav-primary__toggle-icon::before,
.c-nav-primary__toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.c-nav-primary__toggle-icon::before { top: -7px; }
.c-nav-primary__toggle-icon::after  { top: 7px; }

.c-nav-primary__toggle[aria-expanded="true"] .c-nav-primary__toggle-icon {
  background-color: transparent;
}
.c-nav-primary__toggle[aria-expanded="true"] .c-nav-primary__toggle-icon::before {
  transform: translateY(7px) rotate(45deg);
}
.c-nav-primary__toggle[aria-expanded="true"] .c-nav-primary__toggle-icon::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Scroll-Lock, solange das Mobile-Menue offen ist (main.js setzt die Klasse) */
  body.has-open-menu {
    overflow: hidden;
  }

  /* Mobil: 48px Logo plus 2x12px = 73px Header. Etwas mehr als die
     eingespielten 69px, weil sonst die Unterzeile "Meisterbetrieb" im Logo
     unter 12px faellt und nicht mehr lesbar ist.
     Die Hoehe steht als Variable am Header, nicht am Bild — die Breite des
     Links rechnet sich daraus (siehe oben). */
  .c-site-header {
    padding-block: var(--space-sm);
    --essig-logo-h: 48px;
  }

  .c-site-header.is-scrolled {
    --essig-logo-h: 40px;
  }

  /* Mobile-Reihenfolge: Marke | Telefon | Hamburger (rechtsbündig) */
  .c-site-header__logo {
    order: 1;
  }

  .c-site-header__phone {
    order: 2;
    margin-left: auto;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
  }

  .c-site-header__phone svg {
    width: 16px;
    height: 16px;
  }

  .c-nav-primary {
    order: 3;
  }

  .c-site-header__inner {
    gap: var(--space-sm);
  }

  .c-nav-primary__toggle {
    display: flex;
  }

  .c-nav-primary__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    /* Vorher: align-items:center und gap:2.5rem. Die 40px Luecke war tote
       Flaeche, waehrend die Links selbst padding 0 hatten und nur 17px hoch
       waren - das "+" hing neben dem zentrierten Text. Die Luecke ist jetzt
       Klickflaeche geworden, die Panelhoehe bleibt praktisch gleich. */
    align-items: stretch;
    gap: 0;
    background: var(--color-surface-light);
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--color-border-default);
    box-shadow: var(--elevation-2);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition:
      visibility 0s var(--motion-duration-base),
      opacity var(--motion-duration-base) var(--motion-ease-out),
      transform var(--motion-duration-base) var(--motion-ease-out);
  }

  /* Eine Zeile pro Ziel: linksbuendig, ueber die volle Breite antippbar. */
  .c-nav-primary__list li + li {
    border-top: 1px solid var(--color-border-default);
  }

  .c-nav-primary__list a {
    display: block;
    min-height: 0;
    padding: 0.75rem 0 0.75rem 1.5em;
    font-size: var(--font-size-base);
  }

  /* Das "+" markiert den Zeilenanfang statt neben dem Text zu schweben. */
  .c-nav-primary__list a::before {
    left: 0;
  }

  .c-nav-primary__list.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition:
      visibility 0s 0s,
      opacity var(--motion-duration-base) var(--motion-ease-out),
      transform var(--motion-duration-base) var(--motion-ease-out);
  }
}

/* Kleine Handys — Telefon als Icon-only (44px Tap-Target), Nummer via aria-label */
@media (max-width: 480px) {
  .c-site-header__phone {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
  }

  .c-site-header__phone-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ── Tablet ─────────────────────────────────────────────────────────── */

@media (min-width: 769px) and (max-width: 900px) {
  .c-site-header__phone {
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-md);
  }

  .c-site-header__phone svg {
    display: none;
  }
}