/* Navbar mobil (Burger-Bereich, bis 899px) - 20.09.2026. Nur index.html.

   Wird als LETZTES Stylesheet geladen (nach home.css und scrolly-hero.css).
   Das ist Absicht: die Kopfzeile ist ueber mehrere Dateien fuer den Desktop
   gebaut, und mehrere dieser Regeln haben dieselbe Spezifitaet wie die hier -
   bei Gleichstand entscheidet die Reihenfolge. Oberhalb von 900px steht hier
   nichts, der Desktop bleibt unveraendert.

   Warum es das gibt: Seit dem Farbtausch im Hero (19.09.2026) ist die mobile
   Hero-Flaeche WEISS (.hero-split__dark = #fff, .hero-split__light ist mobil
   ausgeblendet). Die Kopfzeile traegt aber schon im Markup .over-dark - also
   weisses Logo und weisser Burger auf weissem Grund, beide unsichtbar. Dazu
   kamen vom Desktop geerbte Reste: 8px Versatz nach unten (Logo und Burger
   standen dadurch nicht auf einer Mittellinie), 251px breiter Logo-Rahmen,
   und nach dem ersten Scrollen rutschte der Inhalt um 3vw nach innen.

   Farbzustaende (Klassen setzt das Skript in index.html, siehe
   "Kopfzeile: sichtbar ab 10px"):
     HELL   - .on-hero (Hero ist mobil weiss) und alles ohne .over-dark:
              dunkles Logo (.header-logo-light = Tinte auf hell) + dunkler Burger
     DUNKEL - .over-dark ohne .on-hero, sowie .menu-open:
              weisses Logo (.header-logo-dark) + weisser Burger
   Wird die mobile Hero-Flaeche wieder schwarz, die beiden Regeln unter
   "HELL auf dem Hero" loeschen - dann greift wieder .over-dark aus
   scrolly-hero.css. */
@media (max-width: 899px) {

  /* ── Geometrie: eine Mittellinie fuer Logo und Burger ───────────────── */
  #site-header .header-inner,
  #site-header:not(.scrolled) .header-inner,
  #site-header.scrolled .header-inner {
    transform: none;
    padding-inline: var(--gutter);
    gap: 12px;
  }
  #site-header .header-logo,
  #site-header.scrolled .header-logo {
    width: auto;
    height: auto;
    min-width: 0;
    display: flex;
    align-items: center;
  }
  #site-header .header-logo img {
    position: static;
    width: auto;
    max-width: 100%;
    height: 50px;
    margin: 0;
  }
  /* Der Burger ist 44px breit (Tippflaeche), seine Linien nur 22px: -11px
     rueckt die sichtbare Kante buendig an den Rand, an dem das Logo links
     beginnt. Die Tippflaeche bleibt 44px. */
  #site-header .nav-burger {
    margin-right: -11px;
  }
  #site-header .nav-burger:focus-visible {
    outline: 2px solid #0757F7;
    outline-offset: 2px;
  }

  /* ── HELL auf dem Hero (mobil weiss) ────────────────────────────────── */
  #site-header.on-hero:not(.menu-open) .header-logo-light { display: block; }
  #site-header.on-hero:not(.menu-open) .header-logo-dark { display: none; }
  #site-header.on-hero:not(.menu-open) .nav-burger {
    color: #14233d;
    filter: none;
  }

  /* ── DUNKEL bei geoeffnetem Menue (Kopfzeile + Panel: #0A0F1A) ──────── */
  #site-header.menu-open .header-logo .header-logo-light { display: none; }
  #site-header.menu-open .header-logo .header-logo-dark { display: block; }

  /* CTA im Panel in der Blaufarbe des Desktop-CTAs. Der Standardknopf
     (dunkles Marineblau) ist auf dem dunklen Panel kaum vom Grund zu
     unterscheiden. */
  .mobile-menu__foot .btn-primary {
    background: #0757F7;
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow: 0 10px 24px -12px rgba(7, 87, 247, .6);
  }
  .mobile-menu__foot .btn-primary:active {
    background: #004CE0;
  }
}