/* ==========================================================================
   modules/header/header.css — Seitenkopf
   Geteilte Navigation, mittiges Logo, andockend beim Scrollen.
   ========================================================================== */

/* Masse am Bestand nachgemessen (09.09.2026):
   Topbar 40 px hoch, #444444, Schrift 15 px weiss.
   Kopfzeile 80 px hoch, transparent, Inhaltsbreite 1170 px.
   Menue 15 px Poppins, Gewicht 400, Versalien, Innenabstand 0 17px, #1a1a1a.
   Logo 340 x 137 px, mittig, haengt 57 px unter die Kopfzeile. */

.site-header {
  --hd-height:         80px;
  --hd-height-stuck:   64px;
  --hd-logo:          340px;

  position: sticky;
  top: 0;
  z-index: var(--z-nav);

  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

/* Ueber dem Hero: transparent, helles Logo, weisse Schrift.
   Der Kopf bleibt im normalen Fluss unter der Topbar; der Hero wird um die
   Kopfhoehe nach oben gezogen und liegt damit dahinter. Frueher stand hier
   position:fixed - das legte den Kopf ueber die Topbar. */
.site-header--transparent:not(.is-stuck) {
  background: transparent;
  border-bottom-color: transparent;
}

/* Hero unter den transparenten Kopf schieben. Im Bestand beginnt die
   Hero-Zeile bei y = 0 und ist 900 px hoch; Topbar (40) und Kopfzeile (80)
   liegen darueber. Also um beides nach oben ziehen, nicht nur um die
   Kopfzeile. */
.site-header--transparent + .hero,
.site-header--transparent ~ .site-main .hero:first-child {
  margin-top: calc(-1 * (var(--hd-height) + 40px));
}

.site-header.is-stuck {
  box-shadow: var(--shadow-soft);
}

.site-header__inner {
  position: relative;
  display: grid;
  /* Mittlere Spalte haelt den Platz fuer das Logo frei, das absolut darin steht. */
  grid-template-columns: 1fr clamp(180px, 24vw, var(--hd-logo)) 1fr;
  align-items: center;
  gap: var(--space-4);

  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--hd-height);
  transition: height var(--transition-base);
}

.site-header.is-stuck .site-header__inner { height: var(--hd-height-stuck); }

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

/* Im Bestand ist das Logo 340 px breit und ragt unten aus der Kopfzeile
   heraus ins Hero-Bild. Damit es die Kopfhoehe nicht aufblaeht, steht es
   absolut — die Kopfzeile bleibt 80 px hoch. */
.site-header__logo {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: block;
  line-height: 0;
  z-index: 2;
}

.site-header__logo-img {
  display: block;
  width: clamp(180px, 24vw, var(--hd-logo));
  height: auto;
  transition: width var(--transition-base), opacity var(--transition-base);
}

.site-header.is-stuck .site-header__logo-img { width: clamp(140px, 16vw, 200px); }

/* Der Bestand zeigt auch ueber dem Hero das rote Logo (logo_batch_140_alt),
   nicht die weisse Fassung — nachgesehen am Original: dark-logo ist dort das
   einzige mit Ausmassen, light-logo und sticky-logo liegen auf 0x0. Die
   weisse Fassung bleibt fuer dunkle Hintergruende im Bestand hinterlegt,
   wird aber nicht ausgespielt. */
.site-header__logo-img--light { display: none; }

.site-header__wordmark {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--color-heading);
  line-height: 1;
}

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

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0;              /* Der Abstand steckt im Innenabstand der Links (0 17px). */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Die Spalten muessen ausdruecklich gesetzt werden: das Logo dazwischen
   steht absolut und belegt seine Rasterzelle nicht mehr — ohne das rutschte
   die rechte Navigation in die Mitte. */
.site-nav--left  { grid-column: 1; }
.site-nav--right { grid-column: 3; }

.site-nav--left  .site-nav__list { justify-content: flex-start; }
.site-nav--right .site-nav__list { justify-content: flex-end; }

.site-nav__list > li { position: relative; }

.site-nav__list a {
  display: block;
  padding: 0 17px;
  line-height: var(--hd-height);

  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  text-decoration: none;
  color: #1a1a1a;
  white-space: nowrap;

  transition: color var(--transition-base);
}

.site-header.is-stuck .site-nav__list a { line-height: var(--hd-height-stuck); }

/* Im Bestand bleibt die Menueschrift auch ueber dem Hero dunkel (#1a1a1a) —
   das Hero-Bild ist oben hell. Weisse Schrift war eine Annahme von mir. */

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-ancestor > a { color: var(--color-primary); }

.site-nav__list a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* --- Untermenues ----------------------------------------------------------- */

.site-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;

  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition-base), transform var(--transition-base),
              visibility var(--transition-base);
}

.site-nav--right .sub-menu { left: auto; right: 0; }

.site-nav .menu-item:hover > .sub-menu,
.site-nav .menu-item:focus-within > .sub-menu,
.site-nav .menu-item.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.site-nav .sub-menu a {
  padding: var(--space-2) var(--space-4);
  line-height: 1.5;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text);
  white-space: normal;
}

.site-header--transparent:not(.is-stuck) .site-nav .sub-menu a { color: var(--color-text); }

/* --- Sprachumschalter ------------------------------------------------------- */

.site-lang {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.site-lang a {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  color: var(--color-text-muted);
}

.site-lang a[aria-current="true"] { color: var(--color-primary); }

/* --- Umschalter und Mobilmenue ---------------------------------------------- */

.site-header__toggle {
  display: none;
  justify-self: end;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.site-header__burger,
.site-header__burger::before,
.site-header__burger::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-heading);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.site-header__burger { margin-inline: auto; position: relative; }
.site-header__burger::before,
.site-header__burger::after { content: ""; position: absolute; left: 0; }
.site-header__burger::before { top: -7px; }
.site-header__burger::after  { top:  7px; }

.site-header--transparent:not(.is-stuck) .site-header__burger,
.site-header--transparent:not(.is-stuck) .site-header__burger::before,
.site-header--transparent:not(.is-stuck) .site-header__burger::after {
  background: var(--color-white);
}

[aria-expanded="true"] .site-header__burger { background: transparent; }
[aria-expanded="true"] .site-header__burger::before { top: 0; transform: rotate(45deg); }
[aria-expanded="true"] .site-header__burger::after  { top: 0; transform: rotate(-45deg); }

.site-menu {
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--gutter) var(--space-6);
  max-height: calc(100dvh - var(--hd-height-stuck));
  overflow-y: auto;
}

.site-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-menu__list a {
  display: block;
  padding: var(--space-3) 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  text-decoration: none;
  color: var(--color-heading);
  border-bottom: 1px solid var(--color-border);
}

.site-menu .sub-menu {
  margin: 0 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.site-menu .sub-menu a {
  font-size: var(--text-small);
  color: var(--color-text);
}

/* --- Umbruch --------------------------------------------------------------- */

@media (max-width: 991px) {
  .site-header__inner { grid-template-columns: 1fr auto auto; }
  .site-nav           { display: none; }
  .site-header__toggle { display: block; }
  .site-header__logo  { justify-self: start; order: -1; }
}

@media (min-width: 992px) {
  .site-menu { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__inner,
  .site-header__logo-img,
  .site-nav .sub-menu { transition: none; }
}

/* --- Schalter für Untermenüs (von header.js eingefügt) ---------------------- */
/* Im Bestand oeffnen Untermenues nur per Hover — mit Tastatur oder auf
   Touch war der Elternpunkt damit nicht erreichbar. */

.site-nav__sub-toggle {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: var(--space-1);
  padding: 0;
  vertical-align: middle;

  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: transform var(--transition-base);
}

.site-nav .menu-item.is-open > .site-nav__sub-toggle { transform: rotate(180deg); }

.site-nav__sub-toggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.site-nav__list > li > a { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .site-nav__sub-toggle { transition: none; }
}

/* ==========================================================================
   Topbar — dunkler Streifen ueber der Navigation, wie im Bestand.
   ========================================================================== */

.site-topbar {
  background: #444444;        /* am Bestand gemessen */
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: normal;
  position: relative;
  z-index: calc(var(--z-nav) + 1);
}

.site-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);

  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 40px;
}

.site-topbar a {
  color: inherit;
  opacity: 0.85;
  transition: opacity var(--transition-base);
}

.site-topbar a:hover { opacity: 1; }

.site-topbar a:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* --- Kontaktangaben links ---------------------------------------------- */

.site-topbar__kontakt {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  max-width: none;
}

.site-topbar__kontakt a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.site-topbar__kontakt svg { flex: none; opacity: 0.7; }

/* --- Zweitnavigation, Sprache und Social rechts -------------------------- */

.site-topbar__rechts {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-topbar__nav a { white-space: nowrap; }

/* Der Sprachumschalter steht auch im Kopf; hier ohne linken Aussenabstand. */
.site-topbar .site-lang { margin-left: 0; }
.site-topbar .site-lang a { color: var(--color-white); }
.site-topbar .site-lang a[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.site-topbar__social {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

/* --- Schmale Schirme ------------------------------------------------------ */
/* Der Bestand blendet die Topbar unter 992 px aus. Die Kontaktangaben
   bleiben, weil sie fuer eine Hausverwaltung der haeufigste Klick sind. */

@media (max-width: 991px) {
  .site-topbar__rechts { display: none; }
  .site-topbar__inner  { justify-content: center; }
  .site-topbar__kontakt { gap: var(--space-4); font-size: 0.7rem; }
}

/* Die Topbar steht ueber dem Hero — der Kopf darunter bleibt transparent,
   klebt aber erst ab dem Verschwinden der Topbar oben fest. */
.site-header--transparent:not(.is-stuck) { top: 0; }