/* ===========================================================================
   megamenu.css — Mega-Menue der Hauptnavigation

   NEU geschrieben aus Figma 229:3727, NICHT aus dem Astro-Build extrahiert:
   ProductMegaMenu.astro war zwar angelegt, wurde aber nie eingebunden — die
   Klassen stehen deshalb in keiner gebauten Seite und fehlen in components.css.

   Eigene Datei statt Anhaengen an components.css, weil die dort auto-extrahiert
   ist. Handgeschriebenes dazwischen wuerde bei einer Neu-Extraktion verloren
   gehen.

   Masse verbatim aus Figma:
     Karte 1280 · padding 40px 40px 20px · radius 8 · shadow 0 12px 15px rgba(0,0,0,.37)
     Reihe 1200 · Raster 709 (3 Spalten a 200) · CTA-Karte 323
   =========================================================================== */

/* --- Panel ---------------------------------------------------------------- */

/* Beide Panels haengen am Header-CONTAINER und sind seitenzentriert.
   Grund: Figma zeigt die Karte seitenzentriert (x=80 bei 1440er Frame), nicht
   mittig unter dem Trigger. Waere der Menuepunkt positioniert, laege die Karte
   zentriert unter "Produkte" — und weil "Produkte" links im Menue steht, ragte
   sie links aus dem Bild. Gleiches gilt fuer "Support" nach rechts.
   Deshalb Menuepunkt static, Bezug ist .header__inner. */
.header__inner {
  position: relative;
}

.header__item--mega,
.header__item--compact {
  position: static;
}

.mmenu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 60;
  padding-top: 12px; /* Brueckenflaeche: haelt den Hover beim Weg zum Panel */

  /* Ein- und Ausblenden.
     "hidden" bleibt der massgebliche Zustand fuer Screenreader und die
     Tab-Reihenfolge — animierbar ist es aber nicht (display:none). Deshalb
     zweistufig: megamenu.js nimmt hidden ZUERST weg und setzt .is-visible einen
     Frame spaeter; beim Schliessen andersherum, hidden kommt erst NACH der
     Transition zurueck. Ohne das gaebe es kein Schliessen zu sehen. */
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  pointer-events: none;
}

.mmenu.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Direkter Wechsel: Das neue Panel liegt UEBER dem alten, waehrend es einblendet.
   megamenu.js nimmt das alte erst weg, wenn das neue steht.

   Und es faehrt NICHT noch einmal herein: Die 6px Einfahr-Bewegung sind fuer das
   erste Oeffnen gedacht. Beim Wechsel steht die Karte laengst — das neue Panel
   wuerde sonst 6px hoeher starten und herunterfahren, waehrend es einblendet.
   Das liest sich als kleiner Sprung nach oben. Beim Wechsel blendet deshalb nur
   die Opazitaet. Diese Regel steht bewusst NACH .is-visible, damit sie gewinnt. */
.mmenu.is-incoming {
  z-index: 61;
}

.mmenu.is-incoming,
.mmenu.is-incoming.is-visible {
  transform: translateX(-50%) translateY(0);
}

/* Waehrend des Wechsels traegt nur die ALTE Karte den Schatten.
   Beide Karten liegen deckungsgleich uebereinander — zwei identische Schatten
   addieren sich, der Rand wird sichtbar dunkler und hellt wieder auf, sobald das
   alte Panel weg ist. Das sieht man als Flackern am Kartenrand.
   Weil beide waehrend des Morphs exakt gleich gross sind (das ist ja der Zweck),
   ist die Uebergabe des Schattens am Ende unsichtbar: Die neue Karte steht exakt
   dort, wo die alte stand. */
.mmenu.is-incoming .mmenu__card {
  box-shadow: none;
}

/* Wechsel: Beide Karten fahren gemeinsam von der alten auf die neue Groesse.
   "Produkte" ist 1280 breit, die uebrigen rund 790 — ohne diesen Morph schaute
   die breitere Karte hinter der schmaleren hervor.
   Die Groessen selbst kommen als px-Werte aus megamenu.js (width:max-content
   ist nicht animierbar). overflow nur waehrend des Morphs: Der Inhalt behaelt
   seine natuerliche Groesse und wird beschnitten, statt sich zu stauchen.
   Dauer MUSS zur Blende der .mmenu-Transition passen. */
.mmenu__card.is-morphing {
  overflow: hidden;
  transition:
    width 0.18s ease,
    height 0.18s ease;
}

/* Zustandswechsel ohne Blende (Startzustand beim Laden, Wechsel Desktop/Mobil). */
.mmenu.is-instant {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .mmenu__card.is-morphing {
    transition: none;
  }
}

.mmenu.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Waehrend des Ausblendens faengt die Karte keine Klicks mehr ab
   (.is-visible ist dann schon weg -> pointer-events: none). */

.mmenu[hidden] {
  display: none;
}

/* Das Caret dreht mit. */
.header__link[aria-expanded="true"] .header__caret {
  transform: rotate(180deg);
}

.header__caret {
  transition: transform 0.18s ease;
}

.mmenu__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  /* Rundum GLEICHER Innenabstand, Referenz ist der obere (Vorgabe Atilla,
     23.07.2026). Vorher unten nur space-4 — das stammte aus dem Figma-Stand
     mit der Hinweiszeile unter der Trennlinie, wirkte aber gedrungen. */
  padding: var(--space-7);
  border-radius: var(--radius-md, 8px);
  background: var(--color-neutral-100);
  box-shadow: 0 12px 15px rgb(0 0 0 / 0.37);
}

/* Mega: feste Figma-Breite (1280), drei Spalten + CTA. */
.mmenu--mega .mmenu__card {
  width: min(1280px, calc(100vw - 2 * var(--space-4)));
}

/* OHNE CTA-Karte gibt die Mega-Karte den Platz frei (Vorgabe Atilla,
   23.07.2026): Die feste 1280er-Breite ist fuer "Spalten + CTA" gedacht.
   Sind die CTA-Felder am Menuepunkt leer (benker_megamenu_cta() rendert dann
   nichts), stand rechts eine grosse weisse Leerflaeche. Deshalb richtet sich
   die Karte in dem Fall wie die Kompakt-Variante am Inhalt aus — und wird
   automatisch wieder 1280 breit, sobald jemand die CTA-Karte pflegt.
   :has() koennen alle aktuellen Browser; aeltere zeigen schlicht weiter die
   breite Karte (rein kosmetisch). */
.mmenu--mega .mmenu__card:not(:has(.mmenu__cta)) {
  width: max-content;
  max-width: min(1280px, calc(100vw - 2 * var(--space-4)));
}

.mmenu--mega .mmenu__card:not(:has(.mmenu__cta)) .mmenu__row {
  width: auto;
}

.mmenu--mega .mmenu__card:not(:has(.mmenu__cta)) .mmenu__grid {
  flex: 0 0 auto;
  max-width: none;
  gap: var(--space-8);
}

/* Kompakt: gleiche Optik, nur so breit wie noetig.
   Eine 1280er Karte fuer EINE Spalte mit sechs Links waere Unsinn — deshalb
   richtet sich die Breite hier am Inhalt aus (eine Spalte + CTA-Karte).

   Abstand und Spaltenbreite weichen bewusst vom Mega-Layout ab: Dort stehen
   709px Spalten gegen 323px CTA, der Inhalt fuehrt also klar. Bei EINER Spalte
   mit 200px kippt das Verhaeltnis — die CTA-Karte wuerde die Menuepunkte
   erschlagen, obwohl sie die Nebensache ist. Breitere Spalte plus groesserer
   Abstand stellen die Rangfolge wieder her. */
.mmenu--compact .mmenu__card {
  width: max-content;
  max-width: min(1280px, calc(100vw - 2 * var(--space-4)));
}

.mmenu--compact .mmenu__row {
  width: auto;
  gap: var(--space-9);
}

.mmenu--compact .mmenu__grid {
  flex: 0 0 auto;
  max-width: none;
}

.mmenu--compact .mmenu__block {
  flex: 0 0 auto;
  min-width: 260px;
}

.mmenu__row {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* --- Spaltenraster -------------------------------------------------------- */

.mmenu__grid {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-6);
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  max-width: 709px;
}

.mmenu__block {
  display: flex;
  flex: 0 1 200px;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  min-width: 0;
}

.mmenu__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.mmenu__title {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-4xs, 16px);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: var(--color-primary-800);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: break-word;
}

.mmenu__desc {
  font-family: var(--font-body);
  font-size: var(--fs-body-xs, 12px);
  line-height: 1.3;
  color: var(--color-neutral-500, #999);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: break-word;
}

/* Finder-Karte ("Schnell zum Ziel"): Kategorie-Ueberschrift im Produkt-Popup.
   Die Textformatierung kommt aus .mmenu__title (identisch zum Mega-Menue),
   hier nur Abstaende und Ausrichtung innerhalb der Optionsliste
   (.finder__branchen). */
.finder__group {
  padding: var(--space-3) var(--space-3) 4px;
}

.finder__group:not(:first-child) {
  margin-top: var(--space-3);
}

/* Kein Trennstrich direkt unter einer Ueberschrift
   (uebersteuert .finder__branchen li + li .finder__option aus components.css). */
.finder__group + li .finder__option {
  border-top: none;
}

/* Finder-Popup: dezente Auf-/Zublende wie im Mega-Menue (opacity + 6px Versatz,
   0.18s ease). Zweistufig ueber .is-open (finder.js); "hidden" bleibt fuer
   Screenreader/Tab massgeblich. Das Chevron dreht bereits ueber [aria-expanded]
   (components.css). Positionierung des Popups (position/top) kommt aus
   components.css und wird hier nicht angetastet. */
.finder__popup {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  pointer-events: none;
}

.finder__popup.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .finder__popup {
    transition: none;
  }
}

/* ===========================================================================
   Mobile Navigation — App-artiges Bottom-Sheet (Apple-Glas-Stil).
   Faehrt von unten ein; Unterpunkte klappen als Akkordeon auf. Nur unter 900px
   aktiv, darueber greift das Desktop-Mega-Menue. Zweistufig: mnav.js nimmt
   "hidden" weg und setzt .is-open einen Frame spaeter (siehe Finder/Mega-Menue).
   =========================================================================== */

@media (min-width: 900px) {
  .mnav { display: none !important; }
}

@media (max-width: 899px) {
  /* Auf dem Handy nicht mehr das Desktop-Menue, sondern das Sheet. */
  .header__nav { display: none !important; }
}

body.mnav-lock { overflow: hidden; }

.mnav {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mnav[hidden] { display: none; }

.mnav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 20, 33, 0.42);
  opacity: 0;
  transition: opacity 0.34s ease;
}

.mnav.is-open .mnav__backdrop { opacity: 1; }

.mnav__sheet {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  box-shadow: 0 -18px 50px rgba(8, 20, 33, 0.28);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.mnav.is-open .mnav__sheet { transform: translateY(0); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mnav__sheet { background: rgba(255, 255, 255, 0.97); }
}

.mnav__handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 0 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.mnav__handle-bar {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(8, 20, 33, 0.22);
}

.mnav__scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 16px calc(22px + env(safe-area-inset-bottom, 0px));
}

.mnav__list,
.mnav__list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Punkte MIT Unterpunkten sind <button> (sie klappen nur auf, siehe
   inc/nav.php), Endpunkte sind <a>. Beide sehen gleich aus — die
   Button-Eigenheiten (Hintergrund, Rahmen, Breite, zentrierter Text) werden
   hier mit zurueckgesetzt. */
.mnav__list .menu-item > a,
.mnav__list .menu-item > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 15px 8px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-align: left;
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(8, 20, 33, 0.08);
  cursor: pointer;
}

/* Chevron nur bei Punkten mit Unterpunkten; dreht beim Aufklappen. */
.mnav__list .menu-item-has-children > button::after,
.mnav__list .menu-item-has-children > a::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.mnav__list .menu-item-has-children.is-open > button::after,
.mnav__list .menu-item-has-children.is-open > a::after {
  transform: rotate(-135deg);
}

.mnav__list .menu-item-has-children.is-open > button,
.mnav__list .menu-item-has-children.is-open > a { color: var(--color-accent); }

/* Untermenues: eingeklappt, sanft aufklappend. Die Hoehe steuert mnav.js inline
   (max-height = tatsaechliche scrollHeight bzw. 0), damit die Animation die
   echte Hoehe nimmt und nicht abrupt auf einen Grosswert springt. */
.mnav__list .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* Verschachtelung: eingerueckt und dezenter.
   Auch hier gibt es beides: "Industrieverpackung" hat Unterpunkte und ist ein
   Button, "Trays" ist ein Link. */
.mnav__list .sub-menu .menu-item > a,
.mnav__list .sub-menu .menu-item > button {
  padding-left: 22px;
  font-size: 16.5px;
  font-weight: 400;
  color: var(--color-neutral-700, #37475a);
}

.mnav__list .sub-menu .sub-menu .menu-item > a,
.mnav__list .sub-menu .sub-menu .menu-item > button {
  padding-left: 38px;
  font-size: 15.5px;
}

.mnav__cta { margin-top: 18px; }
.mnav__cta .button { width: 100%; justify-content: center; }

/* --- Eintraege ------------------------------------------------------------ */

.mmenu__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  list-style: none;
}

.mmenu__item + .mmenu__item {
  padding-top: 8px;
  border-top: 1px solid var(--color-neutral-200);
}

.mmenu__link {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-body-m, 16px);
  line-height: 1.4;
  color: var(--color-neutral-800);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  overflow-wrap: break-word;
  transition: color 0.15s ease;
}

.mmenu__link:hover,
.mmenu__link:focus-visible {
  color: var(--color-primary-800);
}

.mmenu__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* --- CTA-Karte ------------------------------------------------------------ */

.mmenu__cta {
  display: flex;
  flex: 0 0 323px;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md, 8px);
  background: linear-gradient(to right, #002756, #005ba8);
}

.mmenu__cta-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.mmenu__cta-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-5xs, 14px);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--color-neutral-100);
  letter-spacing: var(--tracking-tight);
}

.mmenu__cta-title {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-2xs, 20px);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  color: var(--color-neutral-100);
  letter-spacing: var(--tracking-tight);
}

.mmenu__cta-media {
  width: 100%;
}

.mmenu__cta-img {
  display: block;
  width: 100%;
  height: 104px;
  border-radius: 3px;
  object-fit: cover;
}

.mmenu__cta-btn {
  /* Umkehrung fuer dunklen Grund.
     Der Standard-"secondary" ist blau auf transparent (Rahmen und Schrift in
     --color-accent) — auf dem blauen Verlauf der CTA-Karte also Blau auf Blau
     und praktisch unsichtbar. Auf dunklem Grund muss der Button hell sein. */
  background-color: var(--color-neutral-100);
  color: var(--color-primary-900);
  box-shadow: none;
}

.mmenu__cta-btn:hover {
  background-color: var(--color-neutral-200);
}

.mmenu__cta-btn:focus-visible {
  outline: 2px solid var(--color-neutral-100);
  outline-offset: 3px;
}

/* --- Trennlinie + Hinweiszeile -------------------------------------------- */

.mmenu__divider {
  width: 100%;
  height: 1px;
  background: var(--color-neutral-200);
}

.mmenu__note {
  font-family: var(--font-body);
  font-size: var(--fs-body-s, 14px);
  line-height: 1.4;
  color: var(--color-neutral-800);
  text-align: center;
  letter-spacing: var(--tracking-tight);
}

/* --- Mobil ---------------------------------------------------------------- */
/* Unter 900px (Burger-Schwelle) gibt es kein Mega-Menue: Das Layout ist 1280px
   breit und hat keine schmale Entsprechung im Design. megamenu.js haelt sich
   dort ebenfalls raus, der Top-Level-Punkt fuehrt auf seine eigene Seite.
   FLAG(design): mobiler Zustand fehlt in Figma. */
@media (max-width: 899px) {
  .mmenu {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mmenu,
  .mmenu__link,
  .header__caret {
    transition: none;
  }

  /* Ohne Transition faellt der Versatz weg — sonst "springt" die Karte. */
  .mmenu {
    transform: translateX(-50%) translateY(0);
  }
}