/* =====================================================================
   VTS — Megamenü unter «Kompetenzen»

   Aufbau «Mit Seitenleiste» aus der Menüstudie: links die sieben
   Leistungen zweispaltig mit Symbol und Kurzzeile, rechts der orange
   Anfrage-Knopf, die Telefonnummer und das FINMA-Register.

   Aufsatz statt Umbau: Das Klappmenü des Baukastens bleibt im HTML und
   gilt weiterhin unter 1025 px. Ab 1025 px wird es ausgeblendet und
   megamenu.js baut dieses Menü aus denselben sieben Verweisen.

   Der Kasten hängt in der blauen Leiste (mkw-element-57c08aec,
   position: relative) — er wandert also mit, wenn der Baukasten den
   Kopf beim Scrollen auf fixiert schaltet.
   ===================================================================== */

/* Aus der früheren layout.css übernommen: Der Menüpunkt «Anfrage» braucht
   Platz — die Abstände der Hauptleiste sind vier Pixel je Seite enger,
   sonst bräche die Navigation um. */
.mkw-nav-menu--main .mkw-nav-menu a.mkw-item {
  padding-inline: 14px;
}

@media (min-width: 1025px) {
  /* natives Klappmenü nur in der Hauptleiste abschalten — !important,
     weil das Menüskript des Baukastens display per Inline-Stil setzt */
  .mkw-nav-menu--main ul.sub-menu { display: none !important; }

  /* Anker festschreiben, auch wenn eine spätere Stildatei daran dreht */
  .mkw-element-57c08aec { position: relative; }
}

/* Der Baukasten legt beim Fixieren des Kopfs eine unsichtbare Kopie der
   Leiste als Platzhalter an — samt unserem Menü. Die Kopie bleibt stumm. */
.mkw-sticky__spacer .vts-mm { display: none !important; }

.vts-mm {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 140;
  background: #fff;
  color: #14141c;
  border: 1px solid #e3e5f2;
  border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(5, 5, 60, .28), 0 4px 14px rgba(5, 5, 60, .08);
  overflow: hidden;
  font-family: "Poppins", system-ui, sans-serif;
  text-align: left;
}
.vts-mm.offen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
}
.vts-mm::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #050582, #0063ff);
}

/* ------------------------------------------------------- die Einträge */
.vts-mm-raster {
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  align-content: start;
}
.vts-mm-eintrag {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  padding: 12px 13px;
  border-radius: 10px;
  transition: background .14s;
}
.vts-mm-eintrag:hover,
.vts-mm-eintrag:focus-visible { background: #f2f4fb; }
.vts-mm-eintrag:focus-visible { outline: 2px solid #0063ff; outline-offset: -2px; }
.vts-mm-symbol {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 9px;
  background: #eef1fa;
  display: grid; place-items: center;
  transition: background .14s;
}
.vts-mm-symbol svg {
  width: 19px; height: 19px;
  stroke: #050582; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .14s;
}
.vts-mm-eintrag:hover .vts-mm-symbol { background: #050582; }
.vts-mm-eintrag:hover .vts-mm-symbol svg { stroke: #fff; }
.vts-mm-eintrag b {
  display: block;
  font: 600 14.5px/1.3 "Poppins", sans-serif;
  color: #14141c;
  margin-bottom: 2px;
}
.vts-mm-eintrag:hover b { color: #0063ff; }
.vts-mm-eintrag span {
  display: block;
  font: 400 12.5px/1.45 "Source Serif 4", Georgia, serif;
  color: #6b6b7b;
}

/* --------------------------------------------------- die Seitenleiste */
.vts-mm-seite {
  background: #f5f6fb;
  border-left: 1px solid #e7e9f4;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.vts-mm-seite h3 {
  margin: 0;
  font: 700 15px/1.35 "Poppins", sans-serif;
  color: #050582;
}
.vts-mm-seite p {
  margin: 0;
  font: 400 13px/1.55 "Source Serif 4", Georgia, serif;
  color: #55596e;
}
.vts-mm-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ff5a00;
  color: #fff;
  text-decoration: none;
  font: 700 13px/1 "Poppins", sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 13px 18px;
  border-radius: 8px;
  transition: background .14s;
}
.vts-mm-knopf:hover { background: #e14f00; color: #fff; }
.vts-mm-knopf:focus-visible { outline: 3px solid #050582; outline-offset: 2px; }
.vts-mm-tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font: 600 15px/1 "Poppins", sans-serif;
  color: #050582;
}
.vts-mm-tel:hover { color: #0063ff; }
.vts-mm-tel svg { width: 16px; height: 16px; stroke: #0063ff; fill: none; stroke-width: 1.8; }
.vts-mm-finma {
  margin-top: auto;
  font: 400 11.5px/1.5 "Poppins", sans-serif;
  color: #8a8fa8;
}

@media (prefers-reduced-motion: reduce) {
  .vts-mm * { transition: none !important; }
}

/* =====================================================================
   Mobile Navigation als App-Overlay (unter 1025 px)
   Vollbildpanel: Kopfzeile mit Schliessen, scrollende Liste, feste
   Aktionsleiste mit Anfrage-Knopf und Telefon. Das native Klappmenü
   wird erst ausgeblendet, wenn das Overlay wirklich gebaut ist.
   ===================================================================== */
@media (max-width: 1024px) {
  html.vts-mnav-bereit nav.mkw-nav-menu--dropdown { display: none !important; }
}

.vts-mnav {
  position: fixed; inset: 0; z-index: 9500;
  background: #fff; color: #14141c;
  font-family: "Poppins", system-ui, sans-serif;
  display: none; flex-direction: column;
}
.vts-mnav.offen { display: flex; }
html.vts-mnav-offen, html.vts-mnav-offen body { overflow: hidden; }

.vts-mnav-kopf {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 14px 20px; border-bottom: 1px solid #eceef6;
}
.vts-mnav-kopf b { font-size: 16px; font-weight: 700; color: #050582; }
.vts-mnav-zu {
  width: 44px; height: 44px; border: 0; border-radius: 10px;
  /* padding: 0 — das Standardpolster des Browsers verschob das X aus
     der Mitte; das SVG als Block nimmt den Zeilen-Versatz heraus */
  padding: 0;
  background: #f2f4fb; color: #14141c; cursor: pointer;
  display: grid; place-items: center; font-size: 0; line-height: 0;
}
.vts-mnav-zu svg { display: block; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.vts-mnav-zu:focus-visible { outline: 3px solid #0063ff; outline-offset: 2px; }

.vts-mnav-mitte { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 12px 16px; }
.vts-mnav-zeile {
  display: flex; align-items: center; gap: 13px;
  min-height: 52px; padding: 8px 10px; border-radius: 12px;
  text-decoration: none; color: #14141c;
  font-size: 16px; font-weight: 600;
}
.vts-mnav-zeile:active { background: #f2f4fb; }
.vts-mnav-zeile:focus-visible { outline: 3px solid #0063ff; outline-offset: -3px; }
.vts-mnav-zeile .vts-mnav-pfeil { margin-left: auto; width: 16px; height: 16px; stroke: #9aa0b8; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vts-mnav-zeile + .vts-mnav-zeile { border-top: 1px solid #f2f3f9; }

.vts-mnav-label {
  margin: 18px 10px 6px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #8a8fa8;
}
.vts-mnav-symbol {
  flex: none; width: 38px; height: 38px; border-radius: 9px;
  background: #eef1fa; display: grid; place-items: center;
}
.vts-mnav-symbol svg { width: 19px; height: 19px; stroke: #050582; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.vts-mnav-fuss {
  flex: 0 0 auto; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #eceef6; display: grid; gap: 10px;
  background: #fff;
}
.vts-mnav-anfrage {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; border-radius: 10px; text-decoration: none;
  background: #ff5a00; color: #fff;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.vts-mnav-anfrage:active { background: #e14f00; }
.vts-mnav-anfrage:focus-visible { outline: 3px solid #050582; outline-offset: 2px; }
.vts-mnav-telefon {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; text-decoration: none;
  color: #050582; font-size: 15px; font-weight: 600;
}
.vts-mnav-telefon svg { width: 16px; height: 16px; stroke: #0063ff; fill: none; stroke-width: 1.8; }

@media (min-width: 1025px) { .vts-mnav { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .vts-mnav * { transition: none !important; } }