/**
 * @file menu.css
 * Wellen-Header (SN8 2026), Navigation, grüner Hamburger und mobiles Dropdown.
 *
 * Der Header ist fixiert und teiltransparent; seine markante Form entsteht aus
 * drei Flächen + einer Wellen-SVG (siehe .header-shape in page.html.twig):
 *   - hoher linker Balken (.hb-left)
 *   - Wellen-SVG dazwischen (.header-wave)
 *   - niedriger rechter Balken (.hb-right)
 *   - durchgehender Füllbalken in kompakter Höhe (.hb-fill), damit beim
 *     Einfahren der Welle kein „Loch" entsteht.
 *
 * Mobile-first: Navigation steckt im Dropdown und klappt per Hamburger auf.
 * Ab 1024px wird sie zur horizontalen Leiste, der Hamburger verschwindet.
 * Die Maße stehen als Tokens in tokens.css (--header-h, --wave-h …).
 */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  color: var(--color-pure-white);
  /* Keine Hintergrundfarbe – die Form kommt aus .header-shape (teiltransparent),
     sodass der Hero darunter durchscheint. */
}

.toolbar-horizontal header {
    margin-top: 3rem;
}

.toolbar-horizontal.toolbar-tray-open header {
    margin-top: 6rem;
}

/* ========================================================================
   Header-Form (rein dekorativ)
   ======================================================================== */
.header-shape {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--wave-h);
  z-index: 0;
  color: var(--color-header);   /* speist currentColor von Balken + Welle */
  opacity: 0.82;                /* gemeinsame Transparenz – keine Nahtdopplung */
  pointer-events: none;
  transition: opacity 0.35s ease, height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Solide Balken links/rechts der Welle. */
.hb {
  position: absolute;
  top: 0;
  background: currentColor;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Durchgehender Füllbalken in kompakter Höhe. */
.hb-fill {
  left: 0;
  right: 0;
  height: var(--header-c);
  z-index: 0;
}

/* Balken enden bündig an den Wellenrändern (2px Überlappung deckt die Welle ab). */
.hb-left {
  left: 0;
  width: calc(var(--wave-left) + 2px);
  height: var(--wave-h);
}

.hb-right {
  left: calc(var(--wave-left) + var(--wave-w) - 2px);
  right: 0;
  height: var(--header-h);
  /* Identisches Timing wie .hb-left und .header-wave (aus .hb, 0.4s) –
     Synchronität entsteht über gleiche Dauer + Kurve, NICHT über
     unterschiedliche Dauern. */
}

.header-wave {
  position: absolute;
  top: 0;
  left: var(--wave-left);
  width: var(--wave-w);
  height: var(--wave-h);
  display: block;
  z-index: 1;                   /* deckt die 2px-Überlappung der Balken ab */
  color: var(--color-header);
  /* Identisches Timing wie die Balken (.hb), damit alles synchron als ein
     Stück kollabiert/aufgeht. */
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================================================
   Header-Bar (Logo · Navigation · Hamburger)
   ======================================================================== */
.header-bar {
  position: relative;
  z-index: 1;                   /* über der Form */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-h);
  padding-block: 1.1rem;
  transition: min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-branding {
  position: relative;
  z-index: calc(var(--z-drawer) + 1);   /* Logo bleibt über dem Vollbild-Menü sichtbar */
  display: inline-flex;
  align-items: center;
}

.site-branding a {
  display: inline-flex;
  align-items: center;
  color: var(--color-pure-white);
  text-decoration: none;
}

.site-branding img {
  height: 42px;
  width: auto;
  display: block;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Drupal gibt im Branding-Block zusätzlich den Site-Namen als Textlink aus.
   Das Logo zeigt die Marke bereits – den Text-Link daher visuell ausblenden,
   aber für Screenreader/SEO im DOM behalten. (Der Logo-Link enthält ein <img>,
   der Namens-Link nicht – darüber unterscheiden wir sie.) */
.site-branding a:not(:has(img)) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ========================================================================
   Hamburger – zwei grüne Balken, die zum X klappen
   ======================================================================== */
.menu-toggle {
  position: relative;
  z-index: calc(var(--z-drawer) + 1);   /* über dem Vollbild-Menü → bleibt als X klickbar */
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 30px;
  height: 7px;
  background: var(--color-accent);
  border-radius: 40px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.site-header.is-menu-open .menu-toggle span:first-child {
  transform: translateY(6.5px) rotate(45deg);
}

.site-header.is-menu-open .menu-toggle span:last-child {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ========================================================================
   Navigation – Drupal rendert ul.menu > li.menu__item > a.menu__link
   ========================================================================
   Mobile-first: Vollbild-Overlay, das per Hamburger ein-/ausgeblendet wird. */
.menu-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--color-dark);
  overflow-y: auto;
  /* Inhalt vertikal zentriert; oben Platz für Header/Logo/X-Toggle. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--header-h) var(--space-lg) var(--space-2xl);
  /* geschlossen: ausgeblendet (sanfter Fade). */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.site-header.is-menu-open .menu-drawer {
  opacity: 1;
  visibility: visible;
}

/* Wrapper aus Region/Block neutralisieren – alle Elemente an derselben linken
   Kante (= drawer-Padding), damit Menüpunkte UND Sprachswitch bündig sind. */
.menu-drawer .region,
.menu-drawer .block {
  margin: 0;
  padding: 0;
}

/* Menü + Sprachswitch als Spalte, gleiche linke Kante. */
.menu-drawer .region-primary-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.menu .menu {
  padding: 0 0 0 var(--space-md);   /* Untermenü eingerückt */
}

.menu__item {
  position: relative;
}

.menu__link {
  display: inline-block;
  padding: 0.15em 0;
  text-decoration: none;
  color: var(--color-pure-white);
  font-size: clamp(2.5rem, 11vw, 4.5rem);   /* mobil: viel größer */
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* "====" Unterstrich (grün) bei aktiv/hover – ASCII-Look des Prototyps. */
.menu__link.is-active,
.menu__link:hover,
.menu__link:focus-visible {
  color: var(--color-pure-white);
}

/* Overlay des alten Off-Canvas-Drawers wird hier nicht gebraucht. */
.menu-drawer-overlay {
  display: none;
}

/* ========================================================================
   Sprachumschalter (DE/EN) – kompakt im Header, hinter dem Menü
   ======================================================================== */
.menu-drawer .block-language .links {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Eigene Größe (mobil größer, Desktop unten zurückgesetzt) – gilt auch für
     den "/"-Trenner im ::before, der sonst die große Fließtext-Basis erbt. */
  font-size: 1.5rem;
}

.menu-drawer .block-language .links li {
  margin: 0;
}

/* Dezenter Trenner zwischen den Sprachen: DE / EN. */
.menu-drawer .block-language .links li + li::before {
  content: "/";
  margin: 0 var(--space-2xs);
  color: var(--color-pure-white);
  opacity: 0.4;
}

.menu-drawer .language-link {
  text-decoration: none;
  color: var(--color-pure-white);
  font-size: inherit;            /* Größe kommt von .links (mobil/Desktop) */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;                 /* inaktive Sprache gedämpft */
  transition: opacity var(--transition-base), color var(--transition-base);
}

.menu-drawer .language-link:hover,
.menu-drawer .language-link:focus-visible {
  opacity: 1;
}

.menu-drawer .language-link.is-active {
  opacity: 1;
  color: var(--color-accent);    /* aktive Sprache grün */
}

/* ========================================================================
   Scroll-Zustand: Welle fährt ein, Header wird kompakt
   ======================================================================== */
.site-header.scrolled .header-shape {
  height: var(--header-c);
  opacity: 0.94;
}

/* Linker Balken = Wellenhöhe (Wellen-Linkskante), kollabiert auf header-c. */
.site-header.scrolled .hb-left {
  height: var(--header-c);
}

/* Rechter Balken kollabiert NICHT auf header-c, sondern auf denselben Anteil,
   den die rechte Wellenkante erreicht: header-c × (header-h / wave-h) = 120/184.
   Nur so bleiben hb-right und die rechte Wellenkante über die GESAMTE Animation
   deckungsgleich. Der durchgehende hb-fill (header-c) bildet darunter den
   eigentlichen Balkenboden. (Bei Änderung von --header-h/--wave-h hier 120/184
   anpassen.) */
.site-header.scrolled .hb-right {
  height: calc(var(--header-c) * 120 / 184);
}

/* Welle schrumpft vertikal mit (wie die Balken), statt seitlich rauszugleiten –
   so wirkt der ganze Header als ein Stück, das von oben kommt. Dank
   preserveAspectRatio="none" staucht die SVG einfach mit; darunter liegt der
   durchgehende Füllbalken (hb-fill), daher entsteht keine Lücke. */
.site-header.scrolled .header-wave {
  height: var(--header-c);
}

.site-header.scrolled .header-bar {
  min-height: var(--header-c);
}

.site-header.scrolled .site-branding img {
  height: 30px;
}

/* ========================================================================
   Desktop ab 1024px: horizontale Navigationsleiste
   ======================================================================== */
@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }

  /* Vollbild-Overlay des Mobilmenüs zurücksetzen → statisch und inline. */
  .menu-drawer {
    position: static;
    overflow: visible;
    background: transparent;
    margin-left: auto;          /* Navigation nach rechts */
    display: block;
    padding: 0;
    opacity: 1;
    visibility: visible;
  }

  /* Menü und Sprachumschalter in einer Zeile – der Umschalter sitzt damit
     platzsparend hinter dem Menü statt darunter. baseline statt center, damit
     DE/EN auf derselben Textlinie wie die Menüpunkte sitzt (die Menü-Links
     haben unten 0.4rem Padding für den Unterstrich und säßen sonst höher). */
  .menu-drawer .region-primary-menu {
    display: flex;
    flex-direction: row;        /* mobil ist es eine Spalte */
    align-items: baseline;
    gap: clamp(0.8rem, 2vw, 1.8rem);
  }

  /* Oberste Menüliste horizontal (verschachtelte Untermenüs ausgenommen). */
  .menu-drawer .menu:not(.menu .menu) {
    display: flex;
    flex-direction: row;        /* mobil ist es eine Spalte */
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.8rem, 2vw, 1.8rem);
    padding: 0;
  }

  /* Menüpunkte wieder klein (mobil sind sie groß). */
  .menu-drawer .menu__link {
    font-size: 0.95rem;
    line-height: 1.2;
    letter-spacing: 0.1em;
  }

  .menu-drawer .menu:not(.menu .menu) > .menu__item > .menu__link {
    padding: 0 0 0.4rem;
    position: relative;
  }

  /* Sprachswitch wieder kompakt. */
  .menu-drawer .block-language .links {
    font-size: 0.95rem;
  }

  /* "====" Unterstrich als Pseudo-Element – Background-Pattern statt
     content:"===", damit er sich der Linkbreite anpasst. */
  .menu-drawer .menu__link.is-active::after,
  .menu-drawer .menu__link:hover::after,
  .menu-drawer .menu__link:focus-visible::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.3rem;
    height: 6px;
    background: var(--underline-equals);
  }

  /* Untermenü als Dropdown. */
  .menu-drawer .menu .menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    padding: var(--space-2xs) var(--space-sm);
    background: var(--color-dark);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-sm);
    display: none;
  }

  .menu-drawer .menu__item:hover > .menu,
  .menu-drawer .menu__item:focus-within > .menu {
    display: block;
  }
}