/* Kopfzeile der Startseite/Innenseiten — blaue Leiste, Wortmarke links,
   Menü mittig, Login + BUCHEN rechts. Alle Regeln unter .impark-nav gescoped.
   Farben/Schrift aus impark-farben.css + impark-fonts.css. */

.impark-nav {
  /* Bleibt beim Scrollen oben stehen — auf ALLEN Seiten gleich. Auf der
     Startseite machte das bisher nur deren eigenes CSS. */
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ipk-blue, #2b7ee2);
  font-family: var(--impark-font, 'Montserrat', system-ui, sans-serif);
  font-weight: 500;
}

.impark-nav__wrap {
  width: min(1220px, calc(100% - 4rem));
  margin: 0 auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Wortmarke */
.impark-nav__logo {
  flex: 0 0 auto;
  display: inline-block;
  color: var(--ipk-white, #fff);
  line-height: 0;
  text-decoration: none;
}

.impark-nav__logo svg { display: block; height: 26px; width: auto; }
.impark-nav__logo img { display: block; height: 26px; width: auto; }

/* Menü mittig */
.impark-nav__menu {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 29px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.impark-nav__menu a {
  font-size: .94rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ipk-white, #fff);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}

.impark-nav__menu a:hover,
.impark-nav__menu a[aria-current="page"] {
  color: var(--ipk-orange, #ffa000);
}

/* Rechts: Login + BUCHEN */
.impark-nav__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 29px;
}

.impark-nav__login {
  font-size: .94rem;
  font-weight: 600;
  color: var(--ipk-white, #fff);
  text-decoration: none;
  white-space: nowrap;
}

.impark-nav__login:hover { color: var(--ipk-orange, #ffa000); }

/* CTA laut Vorlage: GROSSBUCHSTABEN + Laufweite .1em, Orange, ohne Fläche. */
.impark-nav__cta {
  font-size: .94rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ipk-orange, #ffa000);
  text-decoration: none;
  white-space: nowrap;
}

.impark-nav__cta:hover { color: var(--ipk-white, #fff); }

/* DE/EN-Umschalter (FG 17.08.2026).
   Zurückhaltender als Login und CTA — er ist ein Schalter, kein Angebot. Die
   aktive Sprache steht in Weiß, die andere gedimmt; das Trennzeichen kommt aus
   CSS, damit im Markup nur die beiden Links stehen (Screenreader lesen sonst
   einen sinnlosen Schrägstrich mit). */
.impark-nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Gemessen: Weiß auf dem Kopfzeilen-Blau (#2b7fe2) ergibt 4,05:1 — das ist der
   Kontrast, den „Login" und das Hauptmenü hier schon immer haben, und mehr gibt
   dieser Hintergrund für normal große Schrift nicht her. Die nicht aktive
   Sprache wird deshalb NICHT abgedunkelt (ein erster Entwurf mit 62 % Deckkraft
   kam auf 2,49:1 — ausgerechnet der Knopf, den man anklicken soll, wäre der
   schlechter lesbare gewesen). Der aktive Zustand steckt stattdessen in Gewicht
   und Unterstreichung, also nicht allein in der Farbe (WCAG 1.4.1). */
.impark-nav__lang-btn {
  font-size: .94rem;
  font-weight: 600;
  color: var(--ipk-white, #fff);
  text-decoration: none;
  /* WCAG 2.2 2.5.8: klickbare Fläche statt nur zwei Buchstaben. */
  padding: 6px 4px;
  border-radius: 4px;
}

.impark-nav__lang-btn + .impark-nav__lang-btn::before {
  content: "/";
  margin-inline-end: 6px;
  font-weight: 400;
  color: rgba(255, 255, 255, .55);
}

.impark-nav__lang-btn:hover { color: var(--ipk-orange, #ffa000); }

.impark-nav__lang-btn.is-current {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  cursor: default;
}

.impark-nav__lang-btn:focus-visible {
  outline: 2px solid var(--ipk-orange, #ffa000);
  outline-offset: 2px;
}

/* Burger nur mobil */
.impark-nav__burger {
  display: none;
  flex: 0 0 auto;
  padding: 6px;
  border: 0;
  background: none;
  color: var(--ipk-white, #fff);
  cursor: pointer;
  line-height: 0;
}

.impark-nav__burger svg { width: 26px; height: 26px; }

@media (max-width: 1024px) {
  .impark-nav__wrap { width: calc(100% - 2rem); gap: 16px; }
  .impark-nav__menu { display: none; }
  .impark-nav__burger { display: inline-flex; }
  .impark-nav__actions { margin-inline-start: auto; gap: 18px; }
  /* Auf schmalen Geräten steht der Umschalter neben dem Burger und muss die
     Zeile nicht sprengen — nur der Abstand schrumpft, verborgen wird er nie. */
  .impark-nav__lang { gap: 4px; }
  .impark-nav__lang-btn { padding: 6px 2px; }

  /* Aufgeklapptes Menü */
  .impark-nav.is-open .impark-nav__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    order: 9;
    flex-basis: 100%;
    padding: 6px 0 18px;
    border-top: 1px solid rgba(255, 255, 255, .32);
  }
  .impark-nav.is-open .impark-nav__wrap { flex-wrap: wrap; }
  .impark-nav.is-open .impark-nav__menu li { width: 100%; }
  .impark-nav.is-open .impark-nav__menu a { display: block; padding: 12px 0; }
}

/* Telefon: Logo, Burger, DE/EN, Login und BUCHEN teilen sich 375 px. Gemessen
   lief die Zeile schon vor dem Umschalter 23 px über den Rand hinaus (der CTA
   wurde rechts abgeschnitten); mit ihm wären es 42 px. Statt den Umschalter zu
   verstecken — er ist der Grund für diese Änderung — schrumpfen hier Abstände
   und Schrift der Aktionszeile, bis alles hineinpasst. Die Klickflächen bleiben
   dabei über 24 px (WCAG 2.2 2.5.8). */
@media (max-width: 640px) {
  .impark-nav__wrap { gap: 12px; }
  .impark-nav__actions { gap: 10px; }
  .impark-nav__login { font-size: .82rem; }
  .impark-nav__cta { font-size: .82rem; letter-spacing: .04em; }
  .impark-nav__lang { gap: 3px; }
  .impark-nav__lang-btn + .impark-nav__lang-btn::before { margin-inline-end: 3px; }
  /* „DE" wäre bei dieser Schriftgröße nur 22 px breit. min-width hält die
     Klickfläche unabhängig von der Schriftmetrik bei den 24 px, die
     WCAG 2.2 2.5.8 verlangt — die zwei Ziele stehen zu dicht beieinander,
     als dass die Abstands-Ausnahme greifen würde. */
  .impark-nav__lang-btn {
    font-size: .82rem;
    padding: 6px 1px;
    min-width: 24px;
    text-align: center;
  }
}