/* ==========================================================================
   nav.css — Kopf von searchit-agent.ai (Plan SITE-15, S2; gestaltung.md R-GEST-039).

   Zwei Ebenen, ein Kopf, beide fest (E11):
     Ebene 1  .head__seiten  — Seiten (Agent · Chatbot), rechts Knopf + Sprache
     Ebene 2  .head__marken  — Sprungmarken der aktuellen Seite, eigene Zeile darunter
   Beim Scrollen setzt nav.js .head--klein: Ebene 1 schrumpft, der Knopf bleibt sichtbar.
   Unter 56 rem: Menüschalter; geöffnet stehen Seiten, eingerückt die Sprungmarken,
   dann Knopf und Sprache untereinander. Eine Liste, zwei Darstellungen.

   Werte kommen aus den Tokens der Trägerseite (styles.css :root); die Rückfallwerte
   gelten für Seiten ohne den vollen Satz (Preisrechner) und sind dieselben Zahlen.
   ========================================================================== */
.head {
  position: sticky; top: 0; z-index: 30;
  background: var(--white, #fff); box-shadow: var(--e-0, 0 1px 2px rgba(43, 48, 51, 0.14));
}
.head__inner {
  position: relative; max-width: var(--breite, 1180px); margin: 0 auto;
  padding: var(--a-1, 0.5rem) var(--rand-seite, clamp(1rem, 3vw, 2rem));
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--a-3, 1rem);
  transition: padding var(--d-2, 200ms) ease;
}
.head__brand {
  display: flex; align-items: center; min-height: var(--ziel, 2.75rem); margin-right: auto;
  transition: opacity var(--d-2, 200ms) ease, visibility var(--d-2, 200ms) ease;
}
.head__brand img { height: var(--ziel, 2.75rem); width: auto; display: block; transition: height var(--d-2, 200ms) ease; }
/* Solange die große Marke im Einstieg zu sehen ist, bleibt die kleine weg (js/kopfmarke.js). */
.marke-aus .head__brand { opacity: 0; visibility: hidden; }

.head__seiten, .head__marken ul { display: flex; align-items: center; gap: var(--a-1, 0.5rem); margin: 0; padding: 0; list-style: none; }
.head__link {
  display: inline-flex; align-items: center; min-height: var(--ziel, 2.75rem); padding: 0 var(--a-1, 0.5rem);
  color: var(--grey, #61686c); text-decoration: none; font-size: var(--s-02, 1.0625rem); font-weight: 600; line-height: 1;
  border-radius: var(--r-pille, 999px); transition: color var(--d-1, 120ms) ease;
}
.head__link:active { color: var(--accent-dark, #0147B1); }
/* Aktiv: page = diese Seite, location = sichtbarer Abschnitt (MASTER-36 §4; das Portal kopiert diese Werte). */
.head__link[aria-current] { color: var(--accent, #026CDF); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.head__link:focus-visible, .head__tat:focus-visible, .menue-knopf:focus-visible { outline: 3px solid var(--accent, #026CDF); outline-offset: 2px; }

/* Handlung (R-GEST-040): genau ein Knopf je Kopf, ruhend Markenblau, Orange beim Überfahren/aktiv. */
.head__tat {
  display: inline-flex; align-items: center; min-height: var(--ziel, 2.75rem); padding: 0 var(--a-3, 1rem);
  background: var(--accent, #026CDF); color: var(--white, #fff); text-decoration: none; white-space: nowrap;
  font-size: var(--s-02, 1.0625rem); font-weight: 700; line-height: 1; border-radius: var(--r-pille, 999px);
  transition: background-color var(--d-1, 120ms) ease;
}
.head__tat:active { background: var(--handlung, #FFA245); color: var(--handlung-text, #fff); }

/* Ebene 2: eigene Zeile über die volle Breite des Kopfs. */
.head__marken { order: 9; flex-basis: 100%; border-top: 1px solid var(--border, #e9e9e9); overflow-x: auto; scrollbar-width: none; }
.head__marken::-webkit-scrollbar { display: none; }
.head__marken .head__link { min-height: 2.5rem; font-size: var(--s-01, 0.875rem); white-space: nowrap; }

/* Beim Scrollen: Ebene 1 schrumpft (E11, ca. 64 → 48 px). */
.head--klein .head__inner { padding-top: 0.125rem; padding-bottom: 0; }
.head--klein .head__brand, .head--klein .head__seiten .head__link, .head--klein .head__tat, .head--klein .sprache > summary { min-height: 2.5rem; }
.head--klein .head__brand img { height: 2rem; }

.menue-knopf {
  display: none; align-items: center; gap: var(--a-1, 0.5rem);
  min-height: var(--ziel, 2.75rem); padding: 0 var(--a-3, 1rem);
  font: inherit; font-size: var(--s-01, 0.875rem); font-weight: 700; line-height: 1;
  color: var(--ink, #2b3033); background: transparent; border: 1px solid var(--border, #e9e9e9); border-radius: var(--r-pille, 999px);
  cursor: pointer; transition: background-color var(--d-1, 120ms) ease, border-color var(--d-1, 120ms) ease;
}
.menue-knopf:active, .menue-knopf[aria-expanded="true"] { background: var(--accent-soft, #DCEBFF); }
.menue-knopf__zu, .menue-knopf[aria-expanded="true"] .menue-knopf__auf { display: none; }
.menue-knopf[aria-expanded="true"] .menue-knopf__zu { display: inline; }

@media (hover: hover) {
  .head__link:hover { color: var(--accent, #026CDF); }
  .head__tat:hover { background: var(--handlung, #FFA245); color: var(--handlung-text, #fff); }
  .menue-knopf:hover { border-color: var(--accent, #026CDF); }
}

/* b-m: Menüschalter (R-GEST-033/039). Ebene 2 als feste Leiste entfällt zugunsten der Höhe. */
@media (max-width: 56rem) {
  .menue-knopf { display: inline-flex; }
  .head__klappe { display: none; }
  .head.ist-offen .head__klappe { display: block; flex-basis: 100%; }
  .head.ist-offen .head__tat { display: flex; }
  .head.ist-offen .head__inner {
    max-height: calc(100vh - 0.5rem); max-height: calc(100dvh - 0.5rem); overflow-y: auto;
    padding-bottom: max(var(--a-3, 1rem), env(safe-area-inset-bottom));
    animation: kopfmenueEin var(--d-2, 200ms) ease-out;
  }
  .head.ist-offen { box-shadow: var(--e-2, 0 18px 48px rgba(43, 48, 51, 0.12)); }
  .head__seiten, .head__marken ul { flex-direction: column; align-items: stretch; gap: 0; }
  .head__klappe .head__link { width: 100%; padding: 0; border-top: 1px solid var(--border, #e9e9e9); border-radius: 0; color: var(--ink, #2b3033); }
  .head__marken { order: 0; border-top: 0; overflow: visible; }
  .head__marken .head__link { padding-left: var(--a-4, 1.5rem); font-size: var(--s-02, 1.0625rem); min-height: var(--ziel, 2.75rem); }
  .head__tat { margin-top: var(--a-2, 0.75rem); width: 100%; justify-content: center; }
  .head .sprache { margin-top: var(--a-2, 0.75rem); padding-top: var(--a-2, 0.75rem); border-top: 1px solid var(--border, #e9e9e9); }
}
@media (max-width: 40rem) {
  .head__brand img { height: 2.25rem; }
}
@keyframes kopfmenueEin { from { opacity: 0; } to { opacity: 1; } }

/* Bewegung abschaltbar (R-GEST-071). */
@media (prefers-reduced-motion: reduce) {
  .head__inner, .head__brand, .head__brand img, .head__link, .head__tat, .menue-knopf { transition: none; }
  .head.ist-offen .head__inner { animation: none; }
}