/* Ergänzungen zum Header – Theme-Dateien bleiben unangetastet.

   Hintergrund: Das kompilierte Theme-CSS wurde ohne die Option
   „Sticky-Header verkleinern" erzeugt. Die Verkleinerung selbst erledigt
   das Theme-Skript (Logo + Header-Höhe), die vertikale Position der
   Menüpunkte hängt dort aber an einem festen padding-top (52px,
   !important) und bleibt deshalb beim Schrumpfen stehen.
   Diese Datei führt sie nach und macht den Wechsel weich. */

/* Der verkleinerte Header ist 65px hoch (Vorgabe des Theme-Skripts),
   ein Menüpunkt 46px -> (65 - 46) / 2 = 9.5px für mittige Ausrichtung. */
:root {
  --gjs-sticky-header-height: 65px;
  --gjs-nav-height: 46px;
  --gjs-sticky-nav-padding: calc((var(--gjs-sticky-header-height) - var(--gjs-nav-height)) / 2);
}

.gj-main-menu > ul > li {
  transition: padding-top .3s cubic-bezier(.215, .61, .355, 1);
}

.gj-is-sticky .gj-header-v1 .gj-main-menu > ul > li,
.gj-is-sticky .gj-header-v2 .gj-main-menu > ul > li,
.gj-is-sticky .gj-header-v3 .gj-main-menu > ul > li {
  padding-top: var(--gjs-sticky-nav-padding) !important;
  padding-bottom: 0 !important;
}

/* Sprachumschalter und übrige Kopfelemente mitziehen */
.gj-is-sticky .gj-header-v1 .gj-main-menu > ul > li.menu-item-language,
.gj-is-sticky .gj-header-v1 .gj-main-menu > ul > li.gj-menu-item-button {
  padding-top: var(--gjs-sticky-nav-padding) !important;
}

/* Weicher Übergang für Logo und Kopfzeile, damit nichts springt */
.gj-header-wrapper .gj-header,
.gj-header-wrapper .gj-logo img {
  transition: height .3s cubic-bezier(.215, .61, .355, 1),
              max-height .3s cubic-bezier(.215, .61, .355, 1),
              padding-top .3s cubic-bezier(.215, .61, .355, 1),
              padding-bottom .3s cubic-bezier(.215, .61, .355, 1);
}

/* ------------------------------------------------------------------
   Mobiler Header: Logo links, Umschalter rechts daneben – eine Zeile.
   Der Umschalter selbst fehlte im Markup des Altsystems (es lieferte die
   Variante „classic") und wird beim Bauen ergänzt; hier folgt die
   Anordnung. 800px ist der Umbruchpunkt aus den Theme-Einstellungen.
   ------------------------------------------------------------------ */
@media (max-width: 800px) {
  .gj-header-wrapper .gj-header > .gj-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* kein gap: der Menü-Container zählt als Flex-Element mit und der
       Zwischenraum würde die Außenkanten verschieben. Abstand entsteht
       über den automatischen Außenabstand am Umschalter. */
    gap: 0;
    /* umbrechen, damit das aufgeklappte Menü eine eigene Zeile bekommt */
    flex-wrap: wrap;
  }

  /* Leere Hilfselemente des Themes zählen als Flex-Elemente mit und
     verschieben die Verteilung (der Umschalter landete dadurch 39px vor
     der Content-Kante). Im mobilen Kopf werden sie ausgeblendet. */
  .gj-header-wrapper .gj-header > .gj-row > .gj-clearfix,
  .gj-header-wrapper .gj-header > .gj-row > .gj-mobile-menu-search {
    display: none !important;
  }

  /* Logo an die linke, Umschalter an die rechte Content-Kante –
     über automatische Außenabstände statt space-between, damit
     zusätzliche Elemente die Position nicht mehr verschieben können. */
  .gj-header-wrapper .gj-logo { margin-right: auto !important; }
  .gj-header-wrapper .gj-mobile-menu-icons { margin-left: auto !important; }

  /* Logo bündig an der linken Content-Kante */
  .gj-header-wrapper .gj-logo {
    flex: 0 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
  }

  .gj-header-wrapper .gj-logo a { display: block; }

  .gj-header-wrapper .gj-logo img {
    max-height: 45px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* Umschalter rechts, gleiche Höhe wie das Logo */
  .gj-header-wrapper .gj-mobile-menu-icons {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin: 0;
  }

  .gj-header-wrapper .gj-mobile-menu-icons a {
    display: flex;
    align-items: center;
    /* Icon rechtsbündig: die Tippfläche ist bequem groß, das Zeichen
       sitzt trotzdem genau auf der rechten Content-Kante. */
    justify-content: flex-end;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    font-size: 22px;
    color: #212934;
    text-decoration: none;
    transition: color .2s ease;
  }

  .gj-header-wrapper .gj-mobile-menu-icons a:hover,
  .gj-header-wrapper .gj-mobile-menu-icons a[aria-expanded="true"] {
    color: #df694d;
  }

  .gj-header-wrapper .gj-header {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    /* Schatten unterhalb des Headers – wie auf der Referenzseite */
    box-shadow: 0 2px 8px rgba(33, 41, 52, .12);
  }

  /* Aufklapper wie auf der Referenzseite: eigene Zeile unter Logo und
     Umschalter, dabei über die volle Fensterbreite – die Einträge reichen
     also bis an beide Ränder, der Text beginnt an der Content-Kante.
     Der negative Außenabstand des Themes hebt dafür die Zeilenränder auf. */
  .gj-header-wrapper .gj-mobile-nav-holder {
    order: 3;
    flex: 0 0 auto;
    width: calc(100% + 60px);
    max-width: none;
    margin-left: -30px !important;
    margin-right: -30px !important;
  }

  .gj-header-wrapper .gj-mobile-nav-holder ul,
  .gj-header-wrapper .gj-mobile-nav-holder li {
    width: 100%;
    border: 0;
    background: none;
  }

  /* Schrift und Farbe kommen aus dem Theme (Jensen) – hier nur die
     Geometrie: volle Breite, Text an der linken Content-Kante. */
  .gj-header-wrapper .gj-mobile-nav-holder .gj-mobile-nav-item > a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px 0 30px;
    line-height: 1.3;
    border: 0;
  }

  /* Im mitlaufenden Zustand nicht zusätzlich verkleinern –
     mobil ist der Header ohnehin schon kompakt. */
  .gj-header-wrapper.gjs-shrink .gj-logo img { max-height: 46px !important; }
}

/* Nutzer mit reduzierter Bewegung: Zustandswechsel ohne Animation */
@media (prefers-reduced-motion: reduce) {
  .gj-main-menu > ul > li,
  .gj-header-wrapper .gj-header,
  .gj-header-wrapper .gj-logo img { transition: none !important; }
}