/* ==========================================================================
   Large panel for the meta navigation ("Über uns")
   Markup: partials/meta_mega.antlers.html — behaviour: kyb-meta-mega.js
   Left: intro with key figures. Middle: entries with icon tiles.
   Right: teaser filled from a collection. Full width under the header,
   page below dimmed by a scrim.
   ========================================================================== */

/* The item must not be the positioning context: the panel anchors to
   .kyb-wrap in the header and therefore always starts at the header's
   lower edge — in the full and in the compact state. */
.k-meta__item--mega { position: static; }

.k-mm {
  position: absolute; top: 100%; left: 50%; width: 100vw; margin-left: -50vw;
  display: block; z-index: 70;
  max-height: calc(100vh - var(--mm-top, 120px)); overflow-y: auto; overscroll-behavior: contain;
  background-color: var(--kyb-stage-2);
  background-image: var(--g-flaeche);
  border-top: 1px solid var(--kyb-line); border-bottom: 1px solid var(--kyb-line);
  box-shadow: 0 48px 90px -40px rgba(0, 0, 0, .85);
  opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
  transition: opacity 200ms cubic-bezier(.2,.6,.2,1), transform 240ms cubic-bezier(.2,.6,.2,1), visibility 0s linear 240ms;
}
.k-meta__item--mega.is-offen > .k-mm,
.k-meta__item--mega:not([data-mm-js]):hover > .k-mm,
.k-meta__item--mega:not([data-mm-js]):focus-within > .k-mm {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity 200ms cubic-bezier(.2,.6,.2,1), transform 240ms cubic-bezier(.2,.6,.2,1), visibility 0s;
}
@media (max-width: 999px) { .k-mm { display: none; } }

/* Trigger: stays highlighted while open, chevron follows the state */
.k-meta__auf {
  background: none; border: 0; padding: 0 0 0 4px; margin: 0; cursor: pointer;
  color: inherit; font: inherit; line-height: 1;
}
/* Pfeil wie bei den übrigen Metapunkten: zeigt nach unten, beim Öffnen nach oben */
.k-meta__auf span { display: inline-block; transform: rotate(90deg); transition: transform var(--t); }
.k-meta__item--mega[data-mm-js]:hover .k-meta__auf span,
.k-meta__item--mega[data-mm-js]:focus-within .k-meta__auf span { transform: rotate(-90deg); }
.k-meta__item--mega.is-offen .k-meta__btn,
.k-meta__item--mega.is-offen .k-meta__auf { color: var(--kyb-white); }
.k-meta__item--mega.is-offen .k-meta__auf span { transform: rotate(-90deg); }
.k-meta__auf:focus-visible { outline: 2px solid var(--kyb-neon); outline-offset: 3px; border-radius: 3px; }

/* ---- Grid ---------------------------------------------------------------- */
.k-mm .k-mm__in {
  display: grid; max-width: 1360px; align-items: stretch;
  grid-template-columns: 270px minmax(0, 1fr) 310px;
  padding-block: var(--s6) var(--s6);
}

/* ---- Left: intro --------------------------------------------------------- */
.k-mm__intro { display: flex; flex-direction: column; padding-right: var(--s5); border-right: 1px solid var(--kyb-line); }
.k-mm__h { display: block; font-family: var(--font); font-weight: 600; font-size: 1.7rem; line-height: 1.1;
  letter-spacing: -.022em; color: var(--kyb-white); }
.k-mm__t { display: block; margin-top: var(--s2); font-family: var(--font); font-weight: 300; font-size: .95rem;
  line-height: 1.5; color: var(--kyb-text-2); }

.k-mm__facts { display: grid; margin-top: var(--s4); }
.k-mm__fact { display: flex; align-items: baseline; gap: var(--s2); padding-block: 9px; border-top: 1px solid var(--kyb-line); }
.k-mm__fact:last-child { border-bottom: 1px solid var(--kyb-line); }
.k-mm__fact b { font-family: var(--mono); font-weight: 500; font-size: .86rem; letter-spacing: -.01em;
  color: var(--kyb-neon); min-width: 5.6rem; }
.k-mm__fact span { font-family: var(--font); font-size: .9rem; color: var(--kyb-text-2); }

.k-meta .k-mm__all {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: var(--s4);
  font-family: var(--font); font-weight: 600; font-size: .95rem; letter-spacing: -.005em; color: var(--kyb-neon);
}
.k-meta .k-mm__all:hover { color: var(--kyb-neon); }
.k-meta .k-mm__all span[aria-hidden] { font-size: 1em; opacity: 1; transition: transform var(--t); }
.k-meta .k-mm__all:hover span[aria-hidden] { transform: translateX(3px); }

/* ---- Middle: entries ----------------------------------------------------- */
.k-mm__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start;
  gap: var(--s1) var(--s2); padding-inline: var(--s4);
}
/* Sub links wrap inside the text column of the entry above */
.k-mm__grp { --mm-indent: calc(12px + 46px + var(--s2)); display: flex; flex-wrap: wrap; align-items: center; align-content: start;
  gap: 6px; padding-left: var(--mm-indent); }

.k-meta .k-mm__item {
  flex: 1 0 calc(100% + var(--mm-indent)); margin-left: calc(-1 * var(--mm-indent)); display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: start; gap: var(--s2);
  padding: 12px; border-radius: var(--r-3); color: var(--kyb-text);
  transition: background-color var(--t), box-shadow var(--t);
}
.k-meta .k-mm__item:hover { background-color: var(--kyb-card); box-shadow: inset 0 0 0 1px var(--kyb-line); color: var(--kyb-text); }

.k-mm__ic {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r-2);
  color: var(--kyb-neon);
  background: linear-gradient(145deg, rgba(15, 255, 222, .13), rgba(0, 255, 130, .045));
  box-shadow: inset 0 0 0 1px rgba(15, 255, 155, .2);
  transition: background var(--t), box-shadow var(--t), color var(--t);
}
.k-meta .k-mm__item .k-mm__ic { opacity: 1; font-size: inherit; }
.k-mm__ic svg { width: 22px; height: 22px; overflow: visible; }
.k-meta .k-mm__item:hover .k-mm__ic {
  background: var(--kyb-grad); color: var(--kyb-stage); box-shadow: 0 6px 22px -8px rgba(15, 255, 155, .55);
}

/* Oben ausgerichtet statt zentriert: Sonst steht der Titel einer Kachel mit
   zweizeiliger Beschreibung höher als der ihrer Nachbarin mit einzeiliger —
   Titel derselben Reihe liefen nicht auf einer Höhe (22.09.2026). */
.k-mm__txt { display: grid; gap: 2px; min-width: 0; padding-top: 3px; }
.k-mm__nm { display: block; font-family: var(--font); font-weight: 600; font-size: 1.02rem; line-height: 1.25;
  letter-spacing: -.008em; color: var(--kyb-white); }
.k-mm__de { display: block; font-family: var(--font); font-weight: 400; font-size: .86rem; line-height: 1.35;
  letter-spacing: normal; color: var(--kyb-text-3); }

/* Anchor links below the previous entry, aligned with its text column */
.k-meta .k-mm__sub {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 3px 10px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--kyb-line);
  font-family: var(--font); font-weight: 400; font-size: .8rem; letter-spacing: normal; color: var(--kyb-text-2);
  transition: color var(--t), box-shadow var(--t), background-color var(--t);
}
.k-meta .k-mm__sub::before { content: "#"; font-family: var(--mono); font-size: .78em; color: var(--kyb-neon); opacity: .8; }
.k-meta .k-mm__sub:hover { color: var(--kyb-white); box-shadow: inset 0 0 0 1px rgba(15, 255, 155, .45); background-color: rgba(15, 255, 155, .06); }

/* ---- Right: teaser card -------------------------------------------------- */
.k-mm__teaser {
  position: relative; display: flex; flex-direction: column; align-self: stretch;
  padding: var(--s4); border-radius: var(--r-3);
  background-color: var(--kyb-surface); background-image: var(--g-akzent);
  box-shadow: var(--kante-oben), inset 0 0 0 1px var(--kyb-line);
  transition: box-shadow var(--t), background-image var(--t);
}
.k-mm__teaser:hover { box-shadow: var(--kante-oben), inset 0 0 0 1px rgba(15, 255, 155, .35); }

.k-mm__kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-weight: 500; font-size: .7rem; text-transform: uppercase; letter-spacing: .22em;
  color: var(--kyb-neon);
}
.k-mm__kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kyb-neon);
  box-shadow: 0 0 0 0 rgba(15, 255, 155, .6); animation: k-mm-puls 2.4s ease-out infinite;
}
@keyframes k-mm-puls {
  0% { box-shadow: 0 0 0 0 rgba(15, 255, 155, .55); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(15, 255, 155, 0); }
}

.k-meta .k-mm__tt {
  display: block; margin-top: var(--s2); font-family: var(--font); font-weight: 600; font-size: 1.28rem;
  line-height: 1.22; letter-spacing: -.015em; color: var(--kyb-white); text-wrap: balance;
}
.k-meta .k-mm__tt:hover { color: var(--kyb-white); }
/* Whole card clickable via the title link */
.k-meta .k-mm__tt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.k-meta .k-mm__tt:focus-visible { outline: none; }
.k-meta .k-mm__tt:focus-visible::after { outline: 2px solid var(--kyb-neon); outline-offset: 2px; border-radius: var(--r-3); }

.k-mm__meta { display: block; margin-top: 8px; font-family: var(--mono); font-size: .74rem; letter-spacing: .01em; color: var(--kyb-text-3); }
.k-mm__tx { display: block; margin-top: var(--s2); font-family: var(--font); font-weight: 300; font-size: .9rem;
  line-height: 1.5; color: var(--kyb-text-2); }
.k-mm__cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--s3);
  font-family: var(--font); font-weight: 600; font-size: .95rem; color: var(--kyb-neon); }
.k-mm__cta span { transition: transform var(--t); }
.k-mm__teaser:hover .k-mm__cta span { transform: translateX(4px); }

.k-meta .k-mm__more {
  position: relative; z-index: 1; display: block; margin-top: auto; padding-top: var(--s2);
  border-top: 1px solid var(--kyb-line); font-family: var(--font); font-size: .86rem; color: var(--kyb-text-3);
}
.k-mm__cta + .k-mm__more { margin-top: var(--s3); }
.k-meta .k-mm__more:hover { color: var(--kyb-white); }

/* ---- Focus --------------------------------------------------------------- */
.k-meta .k-mm a:focus-visible { outline: 2px solid var(--kyb-neon); outline-offset: 2px; }
.k-meta .k-mm__item:focus-visible { outline-offset: 0; }

/* ---- Medium widths: teaser moves below the entries ----------------------- */
@media (max-width: 1239px) {
  .k-mm .k-mm__in { grid-template-columns: 240px minmax(0, 1fr); row-gap: var(--s4); }
  .k-mm__list { padding-right: 0; padding-left: var(--s4); gap: 2px var(--s2); }
  .k-mm__intro { grid-row: span 2; padding-right: var(--s4); }
  .k-mm__h { font-size: 1.5rem; }
  .k-mm__teaser {
    grid-column: 2; margin-left: var(--s4);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); align-items: end;
  }
  .k-mm__teaser > * { grid-column: 1; }
  .k-mm__teaser .k-mm__tx { display: none; }
  .k-mm__teaser .k-mm__cta { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; align-self: center; }
  .k-meta .k-mm__more { grid-column: 1 / -1; }
  .k-meta .k-mm__item { padding: 10px; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; }
  .k-mm__ic { width: 42px; height: 42px; }
  .k-mm__grp { --mm-indent: calc(10px + 42px + 12px); }
}

/* ---- Header while the panel is open -------------------------------------- */
/* Solid header so it merges with the panel instead of showing the page. */
.kyb-nav.has-mm { background: rgba(30, 30, 40, .98); }
/* The main navigation's panels stay closed while the pointer crosses them
   on its way from the trigger down into this panel. */
.kyb-nav.has-mm .k-nav__item:hover .k-mega,
.kyb-nav.has-mm .k-nav__item:focus-within .k-mega { opacity: 0; visibility: hidden; }

/* Compact header: the meta row collapses. Hide its links individually
   instead of fading the whole row, so an open panel inside it stays
   visible and follows the slimmer header.

   Vorsicht, hier steckt eine Falle: Diese Regel hebt `opacity` und
   `overflow` aus kyberio.css wieder auf (dort steht `opacity: 0;
   overflow: hidden`). Zusammen mit `max-height: 0` heisst das — jedes
   Kind der Leiste, das hier nicht ausdruecklich genannt ist, ragt aus der
   nullhohen Zeile heraus und bleibt am oberen Rand sichtbar. Genau das
   passierte bis zum 02.10.2026 mit `.k-meta__auf`, dem Aufklapp-Pfeil
   von „Ueber uns": 12 Pixel davon standen beim Scrollen ueber der
   Kopfzeile. Wer der Metaleiste ein Element hinzufuegt, nimmt es hier
   mit auf. Der Sprachumschalter hat seine eigene Zeile in kyberio.css. */
.kyb-nav.is-kompakt .k-meta { opacity: 1; overflow: visible; }
.k-meta > a, .k-meta__btn, .k-meta__auf, .k-meta__drop { transition: color var(--t), opacity .2s ease, visibility .2s ease; }
.kyb-nav.is-kompakt .k-meta > a,
.kyb-nav.is-kompakt .k-meta__btn,
.kyb-nav.is-kompakt .k-meta__auf,
.kyb-nav.is-kompakt .k-meta__drop { opacity: 0; visibility: hidden; }

/* ---- Scrim over the page ------------------------------------------------- */
.k-mm-scrim {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--mm-top, 0px); z-index: 59;
  background: rgba(8, 8, 12, .62);
  opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.k-mm-scrim.is-sichtbar { opacity: 1; visibility: visible; transition: opacity 220ms ease, visibility 0s; }

/* ---- Mobile menu: sub entries as a simple nested list -------------------- */
.k-nav__mobilesub--meta { margin-block: calc(-1 * var(--s1)) var(--s1); }
.k-nav__mobilesub--meta a { font-size: .86rem; color: var(--kyb-text-3); }
.k-nav__mobilesub--meta a.is-einzug { padding-left: var(--s3); }

@media (prefers-reduced-motion: reduce) {
  .k-mm, .k-mm-scrim, .k-mm__item, .k-mm__ic, .k-mm__cta span, .k-mm__all span { transition: none !important; }
  .k-mm { transform: none; }
  .k-mm__kicker::before { animation: none; }
}