/* Erster Entwurf: Zweizeilige Original-Anmutung, bewusst noch nicht endgültig. */
.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; background: rgba(255,255,255,.96); }
.site-header__inner { height: var(--bgw-header-height); display: flex; flex-direction: column; align-items: center; }
.site-brand { display: block; width: 275px; margin: 55px auto 35px; flex: none; }
.site-brand img { display: block; width: 100%; height: auto; }
.site-navigation ul { list-style: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2rem; margin: 0; padding: 0; }
.site-navigation a { font: 400 .85rem/1.5 var(--bgw-sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: #444; }
.site-navigation a:hover, .site-navigation a.is-current { color: #111; }
.site-navigation .language-link { color: var(--bgw-accent); }
.menu-toggle { display: none; }
@media (max-width: 768px) {
  .site-header__inner { position: relative; }
  .site-brand { margin: 30px auto 20px; width: min(257px, 70vw); }
  .menu-toggle { display: flex; flex-direction: column; gap: 5px; justify-content: center; background: transparent; border: none; padding: 10px; cursor: pointer; }
  .menu-toggle span { display: block; width: 26px; height: 2px; background: #777; }
  .site-navigation { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; border-bottom: 1px solid #eee; padding: 24px 0; }
  .site-navigation.is-open { display: block; }
  .site-navigation ul { flex-direction: column; gap: 1.35rem; }
  .site-navigation a { font-size: .95rem; }
}


/* ABOUT 1.2.1 – der Name weicht beim Abwärtsscrollen,
   die Navigation bleibt als schmale, feste Zeile sichtbar.
   Aufwärtsscrollen und Seitenanfang stellen den ganzen Kopf wieder her. */
.site-header { transition: box-shadow .35s ease; }
.site-header.is-scrolled { box-shadow: 0 2px 10px rgba(0,0,0,.055); }
.site-header__inner { transition: height .42s ease; }
.site-brand {
  max-height: 50px;
  overflow: hidden;
  transition: max-height .42s ease, margin .42s ease, opacity .30s ease, visibility .42s ease;
}
.site-navigation { transition: margin-top .42s ease; }
.site-header.is-compact .site-header__inner { height: 60px; }
.site-header.is-compact .site-brand {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.site-header.is-compact .site-navigation { margin-top: 19px; }
@media (max-width: 768px) {
  .site-header.is-compact .site-header__inner { height: 58px; }
  .site-header.is-compact .menu-toggle { margin-top: 6px; }
  .menu-toggle { transition: margin-top .42s ease; }
  /* Ein geöffnetes Mobilmenü behält den vollständigen Kopf. */
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header__inner, .site-brand, .site-navigation, .menu-toggle {
    transition: none !important;
  }
}

/* ABOUT 1.2.2 – ruhiges, bildschirmfüllendes Mobilmenü.
   Desktop und bisherige Scroll-Kompaktansicht bleiben unverändert. */
@media (max-width: 768px) {
  .site-header.is-menu-open {
    height: 100vh;
    height: 100dvh;
    background: #fff;
    box-shadow: none;
  }
  .site-header.is-menu-open .site-header__inner { height: 100%; }
  .site-header.is-menu-open .site-brand,
  .site-header.is-menu-open .menu-toggle {
    position: relative;
    z-index: 2;
  }
  .site-navigation {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: clamp(160px, 22vh, 205px) 24px 6vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .55s ease, visibility 0s linear .55s;
  }
  .site-navigation.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .6s ease, visibility 0s;
  }
  .site-navigation ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.6rem, 4.4vh, 3.2rem);
    width: 100%;
    min-height: min-content;
    margin: auto 0;
    padding: 0;
    flex-wrap: nowrap;
  }
  .site-navigation li {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .85s cubic-bezier(.22,1,.36,1);
    transition-delay: 0s;
  }
  .site-navigation.is-open li {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(.12s + (var(--menu-position, 0) * .105s));
  }
  .site-navigation li:nth-child(1) { --menu-position: 0; }
  .site-navigation li:nth-child(2) { --menu-position: 1; }
  .site-navigation li:nth-child(3) { --menu-position: 2; }
  .site-navigation li:nth-child(4) { --menu-position: 3; }
  .site-navigation li:nth-child(5) { --menu-position: 4; }
  .site-navigation a {
    display: inline-block;
    padding: .25rem .7rem;
    font-size: .96rem;
    line-height: 1.6;
    letter-spacing: .19em;
    white-space: nowrap;
  }
  .menu-toggle { position: relative; z-index: 2; }
  .menu-toggle span {
    transition: transform .45s ease, opacity .3s ease;
    transform-origin: center;
  }
  .menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.is-active span:nth-child(2) { opacity: 0; }
  .menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  body.menu-is-open { overflow: hidden; }
  /* Das bereits vorhandene Zurückweichen des Namens findet nicht im geöffneten Menü statt. */
  .site-header.is-menu-open .site-brand {
    max-height: 50px;
    margin: 30px auto 20px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
@media (max-width: 768px) and (max-height: 570px) {
  .site-navigation { justify-content: flex-start; padding-top: 145px; padding-bottom: 24px; }
  .site-navigation ul { gap: 1rem; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .site-navigation, .site-navigation li, .menu-toggle span { transition: none !important; }
}