/* ============================================================
   LAYOUT — Header + mobile Navigation + Footer
   Quelle: Translogistik-Codex-V2-Mit (header/footer)
   ============================================================ */

/* ---------------- HEADER ---------------- */
.site-header {
  /* fixed statt sticky: sticky hängt am nächsten Scroll-Container und
     damit an jedem overflow != visible in der Vorfahrenkette — auf
     Mobilgeräten scrollte die Leiste dadurch ab dem Hero einfach nach
     oben weg. fixed bezieht sich immer auf den Viewport.
     Den Platz im Fluss, den die Leiste als sticky-Element belegte,
     ersetzt `body { padding-top: var(--header-h) }` in base.css. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  min-height: var(--header-h);
  max-height: var(--header-h);
  /* isolation: eigener Stacking-Context, damit sticky Descendants weiter
     unten auf der Seite (Wrench-Scene, Standorte-Karte, Timeline-Rail —
     alle ebenfalls position: sticky/top: 0) die Header-Leiste nie
     überzeichnen. Ohne das "flackert"/"schrumpft" der Header beim Scrollen
     sichtbar, weil kurz ihr Inhalt durchscheint statt der Leiste selbst. */
  isolation: isolate;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header { background: var(--bg); }
}

.site-header__inner {
  max-width: var(--container);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}

@media (min-width: 1024px) {
  .site-header__inner { padding-inline: 32px; }
}

.site-header__left {
  display: flex;
  align-items: center;
  gap: 40px;
  min-width: 0;
}

/* --- Logo --- */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.brand__mark {
  flex-shrink: 0;
  max-height: 32px;
  max-width: 120px;
}

.brand__mark img {
  height: 100%;
  width: auto;
  display: block;
}

/* Dunkles Theme: Header-Logo wie im Footer weiß einfärben — sonst
   verschwindet die dunkle Wortmarke auf dem fast schwarzen Header. */
:root[data-theme='dark'] .site-header .brand__mark {
  filter: brightness(0) invert(1);
}

.brand__word {
  line-height: 0.9;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.brand__word span { display: block; }
.brand__word span + span { margin-top: -1px; }

.brand__legal {
  margin-left: 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--muted);
}

@media (max-width: 640px) {
  .brand__legal { display: none; }
}

/* --- Navigation --- */
.site-nav {
  display: none;
  align-items: center;
  gap: 28px;
}

@media (min-width: 1024px) {
  .site-nav { display: flex; }
}

/* Auf schmalen Desktops passen 7 Punkte + Logo + CTA nicht in 1024px:
   Abstände enger ziehen und den Zusatz «Service GmbH» ausblenden. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-nav { gap: 20px; }
  .brand__legal { display: none; }
}

.site-nav a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease);
}

.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}

.site-nav a:hover,
.site-nav a.is-active,
.site-nav a[aria-current='page'] {
  color: var(--ink);
}

/* .is-active setzt der Scroll-Spy anhand der Sektionen der aktuellen Seite.
   [aria-current="page"] — eigene Seite (Über uns): die Hervorhebung ist
   dauerhaft, der Spy setzt sie nicht zurück, da er nur .is-active anfasst. */
.site-nav a.is-active::after,
.site-nav a[aria-current='page']::after { transform: scaleX(1); }

/* --- Rechte Gruppe --- */
.site-header__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.theme-toggle:hover { background: var(--bg-alt); }

.theme-toggle__icon { pointer-events: none; }

.header-cta { display: none; }

@media (min-width: 480px) {
  .header-cta { display: inline-flex; }
}

.burger {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  gap: 5px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
}

@media (min-width: 1024px) {
  .burger { display: none; }
}

.burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.burger span:nth-child(1) { transform: translateY(-4px); }
.burger span:nth-child(3) { transform: translateY(4px); }

body.nav-open .burger span:nth-child(1) { transform: rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: rotate(-45deg); }

.burger span { grid-area: 1 / 1; }

/* --- Mobiles Panel --- */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: 99;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 20px var(--gutter) 28px;
  display: grid;
  gap: 4px;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), visibility var(--dur-fast);
}

body.nav-open .mobile-nav {
  transform: none;
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1024px) {
  .mobile-nav { display: none; }
}

.mobile-nav a {
  padding: 14px 4px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--border);
}

.mobile-nav a[aria-current='page'] { color: var(--accent); }

.mobile-nav .btn { margin-top: 18px; }

/* ---------------- FOOTER ---------------- */
.site-footer {
  background: #111;
  color: #fff;
  border-top: 1px solid var(--border);
}

:root[data-theme='dark'] .site-footer { background: #0A0A0A; }

.site-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 56px var(--gutter) 32px;
}

@media (min-width: 1024px) {
  .site-footer__inner { padding-inline: 32px; }
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}

@media (min-width: 1024px) {
  .site-footer__top { flex-direction: row; }
}

.site-footer .brand__word,
.site-footer .brand__legal { color: #fff; }

/* Logo ist dunkel gezeichnet und auf dem schwarzen Footer sonst unlesbar */
.site-footer .brand__mark { filter: brightness(0) invert(1); }

.site-footer__about {
  margin-top: 16px;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
  font-size: 13px;
}

@media (min-width: 768px) {
  .footer-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }
}

/* Die vierte Spalte «Karriere» kam mit den Stellenanzeigen-Seiten dazu */
@media (min-width: 1100px) {
  .footer-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
  }
}

.footer-cols h4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 12px;
}

.footer-cols ul {
  display: grid;
  gap: 8px;
  color: rgba(255, 255, 255, 0.6);
}

.footer-cols a:hover { color: #fff; }
.footer-cols a[aria-current='page'] { color: #fff; }

.footer-cols address {
  font-style: normal;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  overflow-wrap: anywhere;
}

/* Städte-Zeile der Filialen — zwischen den Spalten und dem Copyright */
.site-footer__cities {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.38);
}

.site-footer__cities-label {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__cities a { color: inherit; }
.site-footer__cities a:hover { color: #fff; }

.site-footer__bottom {
  margin-top: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.4);
}

@media (min-width: 640px) {
  .site-footer__bottom { flex-direction: row; align-items: center; }
}

/* ============================================================
   STANDORT-WÄHLER IM HEADER
   ------------------------------------------------------------
   Markup kommt aus assets/js/standort-context.js — der Wähler wird
   zur Laufzeit vor den Theme-Umschalter gehängt, damit die Leiste
   nicht in jeder HTML-Datei einzeln gepflegt werden muss.
   Ohne JS fehlt der Knopf komplett; die Seite bleibt vollständig
   benutzbar, weil jeder Standort auch in Liste, Footer und
   Karriere-Pillen verlinkt ist.
   ============================================================ */

.standort-picker {
  position: relative;
  display: flex;
  align-items: center;
}

.standort-picker__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding-inline: 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.standort-picker__trigger:hover { background: var(--bg-alt); }

/* Geöffnetes Panel wird GRAU hervorgehoben, nicht rot. Rot ist in diesem
   Knopf ausschließlich für Aktivität reserviert (siehe Animationen unten) —
   vorher trug der Knopf einen dauerhaften roten Rand, sobald ein Standort
   gesetzt war, und weil praktisch immer einer gesetzt ist, war das ein
   Signal, das nie aus ging und darum nichts mehr aussagte. */
.standort-picker.is-open .standort-picker__trigger {
  border-color: var(--border-strong);
  background: var(--bg-alt);
}

/* Ob ein Standort gewählt ist, sagt die Helligkeit des Pins — grau ohne,
   volle Tinte mit Auswahl. Das ist auch unter 560px lesbar, wo der Name
   neben dem Pin ausgeblendet ist. */
.standort-picker__pin { color: var(--muted); }
.standort-picker.has-value .standort-picker__pin { color: var(--ink); }

.standort-picker__pin,
.standort-picker__caret {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Träger für den Such-Ring: der Ring ist ein ::after auf diesem <span>,
   nicht auf dem <svg> — Pseudo-Elemente an SVG sind nicht verlässlich. */
.standort-picker__icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  pointer-events: none;
}

.standort-picker__icon::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}

/* --- Suche läuft: Ring wächst aus dem Icon heraus und verblasst, endlos.
       Das ist die übliche Ortungs-Geste (Radar-Puls), nicht ein Spinner:
       gesucht wird eine Position, nicht gewartet auf einen Server. --- */
@keyframes standort-ping {
  0%   { transform: scale(0.5); opacity: 0; }
  22%  { opacity: 0.9; }
  100% { transform: scale(1.55); opacity: 0; }
}

.standort-picker.is-locating .standort-picker__icon::after {
  animation: standort-ping 1.15s var(--ease) infinite;
}

.standort-picker.is-locating .standort-picker__pin { color: var(--accent); }

/* --- Treffer: drei kurze, blasse Blinker, danach wieder Grau. Die Klasse
       nimmt JS nach PULSE_MS wieder weg (gleiche Klasse = kein Neustart
       der Animation beim nächsten Mal). --- */
@keyframes standort-blink {
  0%, 100% { color: var(--ink); opacity: 1; }
  50%      { color: var(--accent); opacity: 0.72; }
}

.standort-picker.is-located .standort-picker__pin {
  animation: standort-blink 0.44s var(--ease) 3;
}

/* Ohne Bewegung bleibt die Aussage, nur eben statisch: während der Suche
   ein stehender roter Ring, danach kein Blinken. */
@media (prefers-reduced-motion: reduce) {
  .standort-picker.is-locating .standort-picker__icon::after {
    animation: none;
    opacity: 0.85;
  }

  .standort-picker.is-located .standort-picker__pin { animation: none; }
}

.standort-picker__caret {
  width: 13px;
  height: 13px;
  opacity: 0.5;
  transition: transform var(--dur-fast) var(--ease);
}

.standort-picker.is-open .standort-picker__caret { transform: rotate(180deg); }

/* Auf schmalen Geräten trägt der Knopf nur den Pin: Logo, Burger und
   Theme-Umschalter brauchen den Platz. Der Standortname steht dann im
   Panel selbst (dort ist die aktive Zeile markiert). */
.standort-picker__value {
  display: none;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 560px) {
  .standort-picker__value { display: inline; }
}

/* --- Panel --- */
.standort-picker__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 120;
  /* Eigener Stacking-Context + explizit deaktivierter Blur: der Header
     selbst ist absichtlich halbtransparent (color-mix + backdrop-filter,
     siehe .site-header), sonst schimmert dessen Effekt in das Panel
     hinein und der Inhalt (Hero-Grafik, Footer-Links) wird durch die
     Standortliste hindurch lesbar — genau das soll das Panel verhindern. */
  isolation: isolate;
  width: min(320px, calc(100vw - 2 * var(--gutter)));
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--shadow-lift);
  display: grid;
  gap: 12px;
}

/* WICHTIG: Der Block oben setzt display: grid und schlägt damit die
   UA-Regel für [hidden] (display: none) — ohne diese Zeile stünde das
   Panel dauerhaft offen. Gleiche Falle wie bei .job-card[hidden] in
   karriere.css. */
.standort-picker__panel[hidden] { display: none; }

/* Schmale Screens: das Panel hängt an .standort-picker (position: relative),
   und der Knopf steckt links in der Icon-Gruppe von .site-header__right —
   nicht am rechten Rand. `right: 0` misst dann ab dessen eigener Kante,
   wodurch das 320px breite Panel weit nach LINKS über Logo/Nav hinausragt.
   Ab hier fest am Viewport verankert statt am Knopf: kompakter und bleibt
   garantiert innerhalb der Bildschirmkante. */
@media (max-width: 640px) {
  .standort-picker__panel {
    position: fixed;
    top: calc(var(--header-h) + 8px);
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
  }
}

.standort-picker__head { display: grid; gap: 3px; }

.standort-picker__title {
  font-size: 14px;
  font-weight: 700;
}

.standort-picker__hint {
  font-size: 12px;
  color: var(--muted);
}

.standort-picker__geo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding-inline: 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-strong);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.standort-picker__geo svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
}

.standort-picker__geo:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.standort-picker__geo:disabled { opacity: 0.55; }

.standort-picker__status {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.standort-picker__status--ok { color: var(--accent); }
.standort-picker__status--warn { color: var(--muted); }

/* Die Liste scrollt, damit das Panel bei 10 Standorten nicht über den
   Viewport hinauswächst; max-height in vh, nicht in px. */
.standort-picker__list {
  display: grid;
  gap: 2px;
  max-height: min(46vh, 320px);
  overflow-y: auto;
  margin-inline: -6px;
  padding-inline: 6px;
}

.standort-picker__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 13px;
  text-align: left;
  color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.standort-picker__option:hover { background: var(--bg-alt); }

.standort-picker__option.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.standort-picker__option-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.standort-picker__option-region {
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}

.standort-picker__tag {
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.standort-picker__reset {
  justify-self: start;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.standort-picker__reset:hover { color: var(--ink); }