/* ==========================================================================
   Menüfelder der Hauptnavigation (Leistungen, Partner) im Stil des
   Über-uns-Menüfelds (kyb-meta-mega.css): gleiche Fläche, Typografie,
   Aufteilung und Icon-Kacheln. Überschreibt die älteren .k-mega-Regeln
   aus kyberio.css. (16.09.2026)
   ========================================================================== */

/* ---- Fläche ---------------------------------------------------------------- */
.kyb-nav .k-mega {
  border-radius: 0;
  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);
}

/* ---- Raster: Einleitung | Einträge | Anreißer ------------------------------ */
.kyb-nav .k-mega .k-mega__in {
  max-width: 1360px; gap: 0; align-items: stretch;
  grid-template-columns: 270px minmax(0, 1fr) 310px;
  padding-block: var(--s6);
}

/* ---- Links: Einleitung ----------------------------------------------------- */
.kyb-nav .k-mega__intro { display: flex; flex-direction: column; padding-right: var(--s5); border-right: 1px solid var(--kyb-line); }
.kyb-nav .k-mega__h { font-family: var(--font); font-weight: 600; font-size: 1.7rem; line-height: 1.1;
  letter-spacing: -.022em; color: var(--kyb-white); }
.kyb-nav .k-mega__t { margin-top: var(--s2); max-width: none; font-family: var(--font); font-weight: 300;
  font-size: .95rem; line-height: 1.5; color: var(--kyb-text-2); }
.kyb-nav .k-mega .k-mega__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);
  text-decoration: none;
}
.kyb-nav .k-mega .k-mega__all span[aria-hidden] { transition: transform var(--t); }
.kyb-nav .k-mega .k-mega__all:hover { text-decoration: none; color: var(--kyb-neon); }
.kyb-nav .k-mega .k-mega__all:hover span[aria-hidden] { transform: translateX(3px); }

/* ---- Mitte: Einträge ------------------------------------------------------- */
.kyb-nav .k-mega__cols {
  grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start;
  gap: var(--s1) var(--s2); padding-inline: var(--s4);
}
/* Gruppe (Unterpunkt mit Kindern) über die volle Breite, ihre Einträge im
   selben Spaltenraster — so bleiben die Zeilen bündig. */
.kyb-nav .k-mega__cols { align-items: start; }
.kyb-nav .k-mega__group {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  gap: 2px var(--s2); align-content: start;
}
.kyb-nav .k-mega__group > .k-mega__grouphead { grid-column: 1 / -1; }
.kyb-nav .k-mega .k-mega__grouphead {
  margin: var(--s2) 12px var(--s1); padding-bottom: var(--s1);
  font-family: var(--mono); font-weight: 500; font-size: .7rem; text-transform: uppercase; letter-spacing: .22em;
  color: var(--kyb-neon); border-bottom: 1px solid var(--kyb-line);
}
.kyb-nav .k-mega .k-mega__grouphead:hover { color: var(--kyb-white); }

.kyb-nav .k-mega .k-mega__item {
  /* oben statt mittig: gleiche Titelhöhe auch bei unterschiedlich langen Beschreibungen */
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--s2);
  padding: 12px; border-left: 0; border-radius: var(--r-3); color: var(--kyb-text);
  transition: background-color var(--t), box-shadow var(--t);
}
.kyb-nav .k-mega .k-mega__item--icon { grid-template-columns: 46px minmax(0, 1fr); }
.kyb-nav .k-mega .k-mega__item:hover { background-color: var(--kyb-card); box-shadow: inset 0 0 0 1px var(--kyb-line); }

.kyb-nav .k-mega__ic {
  width: 46px; height: 46px; margin: 0; display: grid; place-items: center; border-radius: var(--r-2);
  color: var(--kyb-neon); opacity: 1;
  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);
}
.kyb-nav .k-mega__ic svg { width: 22px; height: 22px; overflow: visible; }
.kyb-nav .k-mega .k-mega__item--icon:hover .k-mega__ic {
  transform: none; background: var(--kyb-grad); color: var(--kyb-stage);
  box-shadow: 0 6px 22px -8px rgba(15, 255, 155, .55);
}

.kyb-nav .k-mega__txt { display: grid; gap: 2px; min-width: 0; padding-top: 3px; }
.kyb-nav .k-mega .k-mega__nm { font-family: var(--font); font-weight: 600; font-size: 1.02rem; line-height: 1.25;
  letter-spacing: -.008em; color: var(--kyb-white); }
.kyb-nav .k-mega .k-mega__de { margin-top: 0; font-family: var(--font); font-weight: 400; font-size: .86rem;
  line-height: 1.35; letter-spacing: normal; color: var(--kyb-text-3); }

/* ---- Rechts: Anreißer-Karte ------------------------------------------------ */
.kyb-nav .k-mega .k-mega__teaser {
  position: relative; display: flex; flex-direction: column; align-self: stretch;
  padding: var(--s4); border: 0; 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);
}
.kyb-nav .k-mega .k-mega__teaser:hover { box-shadow: var(--kante-oben), inset 0 0 0 1px rgba(15, 255, 155, .35); }
/* Der Kicker trug bis zum 03.10.2026 einen pulsenden neonfarbenen Punkt
   davor (::before mit k-mm-puls). Entfernt auf Wunsch Simons: Über „Weg von
   VMware" und „In Planung" zog er den Blick auf eine Beschriftung, die nur
   einordnet — die Überschrift darunter trägt die Aussage. Die Laufschrift
   k-mm-puls bleibt, sie wird in kyb-meta-mega.css weiter verwendet. */
.kyb-nav .k-mega__kicker {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-weight: 500; font-size: .7rem; text-transform: uppercase; letter-spacing: .22em;
  color: var(--kyb-neon);
}
.kyb-nav .k-mega__tt { 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; }
.kyb-nav .k-mega__tx { margin-top: var(--s2); font-family: var(--font); font-weight: 300; font-size: .9rem;
  line-height: 1.5; color: var(--kyb-text-2); }
.kyb-nav .k-mega__tl { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: var(--s3);
  font-family: var(--font); font-weight: 600; font-size: .95rem; letter-spacing: -.005em; color: var(--kyb-neon); }
.kyb-nav .k-mega__tl span { transition: transform var(--t); }
.kyb-nav .k-mega__teaser:hover .k-mega__tl span { transform: translateX(4px); }

/* Ohne Anreißer (Partner): Einträge nehmen die freie Breite */
.kyb-nav .k-mega .k-mega__in:not(:has(.k-mega__teaser)) { grid-template-columns: 270px minmax(0, 1fr); }
.kyb-nav .k-mega .k-mega__in:not(:has(.k-mega__teaser)) .k-mega__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-right: 0; }

.kyb-nav .k-mega a:focus-visible { outline: 2px solid var(--kyb-neon); outline-offset: 2px; }

/* ---- Mittlere Breiten: Anreißer unter die Einträge ------------------------- */
@media (max-width: 1239px) {
  .kyb-nav .k-mega .k-mega__in { grid-template-columns: 240px minmax(0, 1fr); row-gap: var(--s4); }
  .kyb-nav .k-mega__intro { grid-row: span 2; padding-right: var(--s4); }
  .kyb-nav .k-mega__h { font-size: 1.5rem; }
  .kyb-nav .k-mega__cols { padding-right: 0; gap: 2px var(--s2); }
  .kyb-nav .k-mega .k-mega__teaser { grid-column: 2; margin-left: var(--s4); }
  .kyb-nav .k-mega .k-mega__teaser .k-mega__tx { display: none; }
  .kyb-nav .k-mega .k-mega__item--icon { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .kyb-nav .k-mega__ic { width: 42px; height: 42px; }
  .kyb-nav .k-mega .k-mega__in:not(:has(.k-mega__teaser)) .k-mega__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .kyb-nav .k-mega__item, .kyb-nav .k-mega__ic, .kyb-nav .k-mega__tl span { transition: none !important; }
}