/* =====================================================================
   VTS — Anfrage-Seite und Assistent
   Farben und Schriften aus dem bestehenden Auftritt:
   #050582 Dunkelblau, #0063FF Akzent, Poppins für Titel, Source Serif für Text.
   ===================================================================== */

:root {
  --vts-blau: #050582;
  --vts-akzent: #0063FF;
  --vts-text: #14141c;
  --vts-grau: #6b6b7b;
  --vts-linie: #e3e5ef;
  --vts-flaeche: #f5f6fb;
  --vts-fehler: #c62828;
  --vts-ok: #1b7f3b;
}

/* ------------------------------------------------------------- Seitenkopf */
/* Eigene Containerlogik statt der von Mkw: deren Regeln hängen an
   Variablen, die der Baukasten je Element setzt. Ohne diese Variablen fällt
   der Container auf display:inline zurück und die Breitenbegrenzung greift
   nicht — darum hier alles explizit. */
.vts-seite { display: block; width: 100%; padding: 46px 0 64px; }
.vts-seite > .e-con-inner {
  /* gleiche Breite wie Kopfleiste und Inhalt — 1200 stand quer im Raster */
  display: block; width: 100%; max-width: 1000px;
  margin-inline: auto; padding-inline: 20px;
}
.vts-seite-kopf { max-width: 760px; margin-bottom: 30px; }
.vts-seite-kopf h1 {
  font-family: var(--vts-schrift-kopf); font-weight: 700; color: var(--vts-blau);
  font-size: clamp(26px, 3.4vw, 32px); line-height: 1.18;
  letter-spacing: -0.02em; margin: 0 0 12px;
}
.vts-seite-lead {
  font-family: var(--vts-schrift-text);
  font-size: var(--vts-grad-text); line-height: var(--vts-zeile-text);
  color: var(--vts-grau); margin: 0; max-width: 68ch;
}

.vts-seite-marken { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; }
.vts-seite-marken span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--vts-grad-klein); font-weight: 600; color: var(--vts-blau);
}
.vts-seite-marken svg { width: 17px; height: 17px; stroke: var(--vts-akzent); fill: none; stroke-width: 1.8; }

/* ------------------------------------------------------------- Seitenraster */
.vts-seite-raster { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 26px; align-items: start; }
.vts-seite-spalte { display: grid; gap: 16px; position: sticky; top: 96px; }

.vts-karte { background: #fff; border: 1px solid var(--vts-linie); border-radius: 12px; padding: 20px 22px; }
.vts-karte h2 {
  font-family: var(--vts-schrift-kopf); font-size: var(--vts-grad-text); font-weight: 700;
  line-height: var(--vts-zeile-kopf); letter-spacing: -0.02em;
  color: var(--vts-blau); margin: 0 0 8px;
}
.vts-karte p {
  margin: 0 0 12px; font-family: var(--vts-schrift-text);
  font-size: var(--vts-grad-klein); line-height: var(--vts-zeile-klein); color: var(--vts-grau);
}
.vts-karte p:last-child { margin-bottom: 0; }
.vts-karte-tel {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-size: 18px; font-weight: 700; color: var(--vts-blau);
}
.vts-karte-tel:hover { color: var(--vts-akzent); }
.vts-karte-tel svg { width: 19px; height: 19px; stroke: var(--vts-akzent); fill: none; stroke-width: 1.8; }
.vts-karte-zeit { margin-top: 10px !important; font-size: var(--vts-grad-mini) !important; }
.vts-karte-still { background: var(--vts-flaeche); border-color: transparent; }
.vts-karte-finma { font-size: 12.5px !important; color: #8a8a98 !important; }

.vts-team { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.vts-team li { display: flex; align-items: center; gap: 12px; }
.vts-team img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; flex: 0 0 auto; }
.vts-team span {
  display: flex; flex-direction: column; font-family: var(--vts-schrift-text);
  font-size: var(--vts-grad-mini); color: var(--vts-grau); line-height: var(--vts-zeile-klein);
}
.vts-team b {
  font-family: var(--vts-schrift-kopf); font-size: var(--vts-grad-klein);
  color: var(--vts-text); font-weight: 600;
}

/* ===================================================================== */
/*  Assistent                                                            */
/* ===================================================================== */
#vts-anfrage {
  /* Bedienoberfläche in der Kopfschrift — Source Serif bleibt dem
     Lauftext vorbehalten, in Feldern und Knöpfen liest eine Grotesk
     besser. Die Grade bleiben, weil die Höhe hier gerechnet ist. */
  font-family: var(--vts-schrift-kopf);
  color: var(--vts-text); background: #fff;
  border: 1px solid var(--vts-linie); border-radius: 14px;
  box-shadow: 0 3px 22px rgba(5, 5, 130, .07);
  /* clip statt hidden: hidden würde den Container zum Scroll-Kontext machen
     und die sticky Fortschrittsleiste sofort nach unten versetzen. */
  overflow: clip;
}
#vts-anfrage *, #vts-anfrage *::before, #vts-anfrage *::after { box-sizing: border-box; }

/* Fortschritt */
.vts-kopf { background: var(--vts-blau); color: #fff; padding: 22px 28px 18px; }
.vts-kopf h2 {
  font-family: "Poppins", sans-serif; margin: 0 0 4px;
  font-size: 20px; font-weight: 700; line-height: 1.3; color: #fff;
}
.vts-kopf p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.78); }
.vts-schritte { display: flex; gap: 7px; margin-top: 18px; }
.vts-schritt { flex: 1; display: flex; flex-direction: column; gap: 7px; font-size: 11.5px; color: rgba(255,255,255,.5); }
.vts-schritt i { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.2); transition: background .2s; }
.vts-schritt.aktiv { color: #fff; font-weight: 600; }
.vts-schritt.aktiv i, .vts-schritt.fertig i { background: #fff; }
.vts-schritt.fertig { color: rgba(255,255,255,.78); }
.vts-schritt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Inhalt */
.vts-inhalt { padding: 26px 28px; min-height: 300px; }
.vts-frage { font-family: "Poppins", sans-serif; margin: 0 0 5px; font-size: 18px; font-weight: 700; }
.vts-lead {
  margin: 0 0 22px; font-family: var(--vts-schrift-text);
  font-size: var(--vts-grad-klein); color: var(--vts-grau); line-height: var(--vts-zeile-klein);
}

/* Auswahlkacheln */
.vts-optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 10px; }
.vts-optionen.eng { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.vts-option {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 52px;
  padding: 13px 15px; text-align: left; cursor: pointer; font: inherit;
  background: #fff; border: 1.5px solid var(--vts-linie); border-radius: 10px;
  font-size: 14.5px; font-weight: 500; color: var(--vts-text); line-height: 1.35;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.vts-option:hover { border-color: #b9ccff; background: #f8faff; }
.vts-option.gewaehlt { border-color: var(--vts-akzent); background: #f1f6ff; font-weight: 600; }
.vts-option.gewaehlt .vts-haken-klein { opacity: 1; }
.vts-option > svg { flex: 0 0 22px; width: 22px; height: 22px; stroke: var(--vts-blau); fill: none; stroke-width: 1.7; }
/* Lange Bezeichnungen wie "Lohn- und Personalwesen" müssen umbrechen dürfen,
   sonst schneidet die Kachel den Text ab. */
.vts-option > span { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.vts-option .vts-haken-klein {
  margin-left: auto; flex: 0 0 18px; width: 18px; height: 18px; opacity: 0;
  stroke: var(--vts-akzent); stroke-width: 2.4; transition: opacity .15s;
}
.vts-option small { display: block; font-size: 12.5px; font-weight: 400; color: var(--vts-grau); margin-top: 2px; }

/* Felder */
.vts-feld { margin-bottom: 20px; }
.vts-feld:last-child { margin-bottom: 0; }
.vts-feld > label, .vts-feldtitel {
  display: block; font-size: 14px; font-weight: 600; margin-bottom: 9px; color: var(--vts-text);
}
.vts-opt { font-weight: 400; color: var(--vts-grau); }
.vts-feld input[type=text], .vts-feld input[type=email], .vts-feld input[type=tel],
.vts-feld select, .vts-feld textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--vts-text);
  background: #fff; border: 1.5px solid var(--vts-linie); border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
}
.vts-feld textarea { min-height: 122px; resize: vertical; line-height: 1.55; }
.vts-feld input:focus, .vts-feld select:focus, .vts-feld textarea:focus {
  outline: none; border-color: var(--vts-akzent); box-shadow: 0 0 0 3px rgba(0,99,255,.12);
}
.vts-feld.fehlt input, .vts-feld.fehlt select, .vts-feld.fehlt textarea { border-color: var(--vts-fehler); }
.vts-feld.fehlt .vts-option { border-color: #f0b9b9; }
.vts-hinweis { margin-top: 7px; font-size: 12.5px; color: var(--vts-grau); line-height: 1.5; }
.vts-feld.fehlt .vts-hinweis { color: var(--vts-fehler); }
.vts-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Infobanner innerhalb eines Themas */
.vts-banner {
  display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; margin-bottom: 20px;
  background: #f1f6ff; border-left: 3px solid var(--vts-akzent); border-radius: 8px;
  font-size: 13.5px; line-height: 1.55; color: #2a2a45;
}
.vts-banner svg { flex: 0 0 17px; width: 17px; height: 17px; stroke: var(--vts-akzent); fill: none; stroke-width: 1.9; margin-top: 1px; }

/* Dateien */
.vts-upload {
  border: 1.5px dashed var(--vts-linie); border-radius: 11px; padding: 26px 18px;
  text-align: center; background: var(--vts-flaeche); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.vts-upload:hover, .vts-upload.zieht { border-color: var(--vts-akzent); background: #f1f6ff; }
.vts-upload svg { width: 26px; height: 26px; stroke: var(--vts-blau); fill: none; stroke-width: 1.6; margin-bottom: 9px; }
.vts-upload b { display: block; font-size: 14.5px; margin-bottom: 4px; font-weight: 600; }
.vts-upload span { font-size: 12.5px; color: var(--vts-grau); }
.vts-upload input[type=file] { display: none; }
.vts-dateien { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.vts-datei {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  background: #fff; border: 1px solid var(--vts-linie); border-radius: 9px; font-size: 13.5px;
}
.vts-datei > svg { flex: 0 0 18px; width: 18px; height: 18px; stroke: var(--vts-blau); fill: none; stroke-width: 1.7; }
.vts-datei .vts-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.vts-datei .vts-groesse { color: var(--vts-grau); font-size: 12.5px; white-space: nowrap; }
.vts-datei button {
  flex: 0 0 auto; width: 27px; height: 27px; border: 0; border-radius: 7px; cursor: pointer;
  background: var(--vts-flaeche); color: var(--vts-grau); font-size: 18px; line-height: 1;
}
.vts-datei button:hover { background: #ffe9e9; color: var(--vts-fehler); }

/* Kalender */
.vts-kalender { border: 1.5px solid var(--vts-linie); border-radius: 11px; padding: 14px 16px 16px; background: #fff; }
.vts-kal-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vts-kal-kopf b { font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 600; }
.vts-kal-kopf button {
  width: 30px; height: 30px; border: 1px solid var(--vts-linie); background: #fff;
  border-radius: 8px; cursor: pointer; color: var(--vts-blau); font-size: 15px; line-height: 1;
}
.vts-kal-kopf button:hover:not([disabled]) { border-color: var(--vts-akzent); color: var(--vts-akzent); }
.vts-kal-kopf button[disabled] { opacity: .35; cursor: not-allowed; }
.vts-kal-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.vts-kal-wt { text-align: center; font-size: 11.5px; color: var(--vts-grau); padding-bottom: 5px; font-weight: 600; }
.vts-kal-tag {
  aspect-ratio: 1; border: 1px solid transparent; border-radius: 8px; background: transparent;
  cursor: pointer; font: inherit; font-size: 13.5px; color: var(--vts-text);
}
.vts-kal-tag:hover:not([disabled]) { background: #f1f6ff; border-color: #b9ccff; }
.vts-kal-tag[disabled] { color: #c9c9d4; cursor: not-allowed; }
.vts-kal-tag.gewaehlt { background: var(--vts-akzent); border-color: var(--vts-akzent); color: #fff; font-weight: 600; }
.vts-kal-tag.heute:not(.gewaehlt) { border-color: var(--vts-linie); font-weight: 600; }

/* Übersicht */
.vts-uebersicht { border: 1px solid var(--vts-linie); border-radius: 11px; overflow: hidden; }
.vts-block-titel {
  padding: 10px 16px; background: var(--vts-flaeche); font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--vts-grau);
}
.vts-zeile { display: flex; gap: 16px; padding: 11px 16px; border-top: 1px solid var(--vts-linie); font-size: 14px; }
.vts-zeile dt { flex: 0 0 38%; margin: 0; color: var(--vts-grau); line-height: 1.45; }
.vts-zeile dd { flex: 1; margin: 0; font-weight: 600; overflow-wrap: anywhere; line-height: 1.45; white-space: pre-wrap; }
.vts-aendern {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 0;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 13.5px;
  font-weight: 600; color: var(--vts-akzent);
}
.vts-aendern:hover { text-decoration: underline; }

/* Zustimmung, Sicherheitshinweis */
.vts-zustimmung { display: flex; gap: 11px; align-items: flex-start; margin-top: 20px; font-size: 13.5px; line-height: 1.55; }
.vts-zustimmung input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--vts-akzent); }
.vts-zustimmung.fehlt { color: var(--vts-fehler); }
.vts-sicher {
  display: flex; gap: 11px; align-items: flex-start; margin-top: 16px;
  padding: 14px 16px; background: var(--vts-flaeche); border-radius: 10px;
  font-size: 12.8px; line-height: 1.55; color: #3a3a52;
}
.vts-sicher svg { flex: 0 0 17px; width: 17px; height: 17px; stroke: var(--vts-ok); fill: none; stroke-width: 1.8; margin-top: 1px; }

/* Meldungen */
.vts-meldung { padding: 12px 15px; border-radius: 9px; font-size: 13.5px; line-height: 1.5; margin-bottom: 20px; }
.vts-meldung.fehler { background: #fdecec; color: var(--vts-fehler); }

/* Fusszeile */
.vts-fuss { display: flex; align-items: center; gap: 12px; padding: 16px 28px; border-top: 1px solid var(--vts-linie); background: #fcfcfe; }
.vts-zaehler { flex: 1; font-size: 12.5px; color: var(--vts-grau); }
.vts-knopf {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px;
  border: 0; border-radius: 9px; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 600;
  background: var(--vts-akzent); color: #fff; transition: background .15s, opacity .15s;
}
.vts-knopf:hover { background: #0052d6; }
.vts-knopf[disabled] { opacity: .55; cursor: not-allowed; }
.vts-knopf.zurueck { background: #fff; color: var(--vts-blau); border: 1.5px solid var(--vts-linie); }
.vts-knopf.zurueck:hover { border-color: var(--vts-blau); background: #fff; }
.vts-knopf svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Abschluss */
.vts-fertig { padding: 52px 32px; text-align: center; }
.vts-fertig .vts-haken {
  width: 66px; height: 66px; margin: 0 auto 20px; border-radius: 50%;
  background: #e8f6ec; display: flex; align-items: center; justify-content: center;
}
.vts-fertig .vts-haken svg { width: 32px; height: 32px; stroke: var(--vts-ok); fill: none; stroke-width: 2.4; }
.vts-fertig h2 {
  font-family: var(--vts-schrift-kopf); margin: 0 0 12px;
  font-size: var(--vts-grad-h2); font-weight: 700; line-height: var(--vts-zeile-kopf);
}
.vts-fertig p { margin: 0 auto 8px; max-width: 470px; font-size: 14.5px; line-height: 1.6; color: var(--vts-grau); }
.vts-fertig .vts-fertig-tel { font-weight: 600; color: var(--vts-blau); text-decoration: none; }

/* Honeypot */
.vts-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ Mobil */
@media (max-width: 1024px) {
  .vts-seite-raster { grid-template-columns: 1fr; }
  .vts-seite-spalte { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 620px) {
  .vts-seite { padding-block: 30px 44px; }
  .vts-inhalt, .vts-kopf, .vts-fuss { padding-left: 18px; padding-right: 18px; }
  .vts-reihe { grid-template-columns: 1fr; }
  .vts-schritt span { display: none; }
  .vts-optionen, .vts-optionen.eng { grid-template-columns: 1fr; }
  .vts-zeile { flex-direction: column; gap: 3px; }
  .vts-zeile dt { flex: none; }
  .vts-fuss { flex-wrap: wrap; }
  .vts-zaehler { order: 3; flex-basis: 100%; text-align: center; }
}

/* =====================================================================
   Kontaktseite
   ===================================================================== */
.vts-kontaktseite .vts-seite-kopf { margin-bottom: 26px; }

.vts-kdaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.vts-kdaten-karte {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border: 1px solid var(--vts-linie); border-radius: 12px; padding: 18px 20px;
}
.vts-kdaten-karte > svg { flex: 0 0 21px; width: 21px; height: 21px; stroke: var(--vts-akzent); stroke-width: 1.7; margin-top: 2px; }
.vts-kdaten-titel {
  display: block; font-family: var(--vts-schrift-text);
  font-size: var(--vts-grad-mini); font-weight: 600; color: var(--vts-grau); margin-bottom: 4px;
}
.vts-kdaten-karte a, .vts-kdaten-karte span:not(.vts-kdaten-titel) {
  font-family: var(--vts-schrift-text); font-size: var(--vts-grad-text); font-weight: 600;
  color: var(--vts-text); text-decoration: none; line-height: var(--vts-zeile-klein);
}
.vts-kdaten-karte a:hover { color: var(--vts-akzent); }

/* Verweis auf die Anfrage-Seite */
.vts-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  margin-top: 34px; padding: 28px 30px; border-radius: 14px;
  background: var(--vts-blau); color: #fff;
}
.vts-cta-text { flex: 1 1 380px; }
.vts-cta h2 {
  font-family: var(--vts-schrift-kopf); margin: 0 0 8px;
  font-size: var(--vts-grad-h2); font-weight: 700;
  line-height: var(--vts-zeile-kopf); letter-spacing: -0.02em; color: #fff;
}
.vts-cta p {
  margin: 0; font-family: var(--vts-schrift-text);
  font-size: var(--vts-grad-klein); line-height: var(--vts-zeile-text);
  color: rgba(255,255,255,.82); max-width: 620px;
}
.vts-cta-knopf {
  display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
  padding: 14px 26px; border-radius: 9px; text-decoration: none;
  background: var(--vts-akzent); color: #fff;
  font-family: var(--vts-schrift-kopf); font-size: var(--vts-grad-klein); font-weight: 600;
  transition: background .15s, transform .1s;
}
.vts-cta-knopf:hover { background: #2a7cff; color: #fff; }
.vts-cta-knopf:active { transform: translateY(1px); }
.vts-cta-knopf svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; }

/* Abschnitte */
.vts-abschnitt { margin-top: 44px; }
.vts-abschnitt-titel {
  font-family: var(--vts-schrift-kopf); font-size: var(--vts-grad-h2); font-weight: 700;
  line-height: var(--vts-zeile-kopf); letter-spacing: -0.02em;
  color: var(--vts-blau); margin: 0 0 20px;
}

/* Personen — liegende Listenkarten: Portrait links, Angaben rechts,
   dieselbe Form wie die Personenspalte im Hero. Vier Karten ergeben
   auf 1000 px zwei Zweierreihen. */
.vts-personen { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.vts-person {
  margin: 0; background: #fff; border: 1px solid var(--vts-linie); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: row; align-items: center; gap: 16px;
  padding: 14px 18px 14px 14px;
}
/* Hochformat-Portraits: fester quadratischer Ausschnitt mit Fokus auf
   das obere Bilddrittel, sonst werden die Köpfe angeschnitten. */
.vts-person img {
  flex: 0 0 88px; width: 88px; height: 88px; border-radius: 10px;
  object-fit: cover; object-position: center 22%; display: block;
}
/* Das Theme kursiviert figcaption — hier nicht erwünscht. */
.vts-person figcaption {
  min-width: 0; display: flex; flex-direction: column; gap: 3px;
  font-style: normal; text-align: left;
}
.vts-person b {
  font-family: var(--vts-schrift-kopf); font-size: var(--vts-grad-text);
  font-weight: 600; line-height: var(--vts-zeile-kopf); color: var(--vts-text);
}
.vts-person span {
  font-family: var(--vts-schrift-text); font-size: var(--vts-grad-klein);
  line-height: var(--vts-zeile-klein); color: var(--vts-grau);
}
.vts-person small {
  font-family: var(--vts-schrift-text); font-size: var(--vts-grad-mini);
  line-height: var(--vts-zeile-klein); color: #9a9aa8; margin-top: 3px;
}

/* Anfahrt */
.vts-anfahrt { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 22px; align-items: start; }
.vts-anfahrt-text {
  background: #fff; border: 1px solid var(--vts-linie); border-radius: 12px; padding: 20px 22px;
}
.vts-anfahrt-text p {
  margin: 0 0 14px; font-family: var(--vts-schrift-text);
  font-size: var(--vts-grad-text); line-height: var(--vts-zeile-text); color: var(--vts-text);
}
.vts-anfahrt-text b { font-weight: 600; }
.vts-link {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--vts-schrift-kopf); font-size: var(--vts-grad-klein);
  font-weight: 600; color: var(--vts-akzent);
}
.vts-link:hover { text-decoration: underline; }
.vts-link svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; }
.vts-anfahrt-bild { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--vts-linie); }
.vts-anfahrt-bild img { width: 100%; height: 100%; max-height: 340px; display: block; object-fit: cover; }

@media (max-width: 820px) {
  .vts-anfahrt { grid-template-columns: 1fr; }
  .vts-cta { padding: 24px 22px; }
}

/* =====================================================================
   Anfrage-Seite: kompakter Einstieg
   Der Seitentitel stand doppelt (Seitenkopf und Formularkopf) und drückte
   das Formular unter die Bildschirmkante. Jetzt trägt der Formularkopf den
   Schritt, der Seitenkopf nur noch die Einordnung.
   ===================================================================== */
.vts-seite-kopf-kompakt { margin-bottom: 18px; max-width: 680px; }
.vts-seite-kopf-kompakt h1 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 7px; }
.vts-seite-kopf-kompakt .vts-seite-lead { font-size: var(--vts-grad-klein); }
.vts-kontaktseite .vts-seite { padding-top: 46px; }
.vts-seite:has(.vts-seite-kopf-kompakt) { padding-top: 30px; padding-bottom: 52px; }

/* Merkmale in der Seitenspalte statt quer unter dem Titel */
.vts-merkmale {
  list-style: none; margin: 0; padding: 16px 20px; display: grid; gap: 11px;
  background: var(--vts-flaeche); border-radius: 12px;
}
.vts-merkmale li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--vts-blau);
}
.vts-merkmale svg { flex: 0 0 17px; width: 17px; height: 17px; stroke: var(--vts-akzent); stroke-width: 1.8; }

/* Bewusst kein sticky Fortschritt: Die Kopfzeile der Website blendet sich beim
   Scrollen selbst ein (132 px). Zusammen mit dem Formularkopf (137 px) blieben
   auf einem 720-px-Laptop nur noch rund 450 px für das eigentliche Formular —
   die Orientierung wäre teurer als ihr Nutzen. */
@media (min-width: 1025px) {
  .vts-seite-raster { grid-template-columns: minmax(0, 1fr) 288px; }
}

/* Acht Anliegen: vier je Reihe ergeben zwei ruhige Zeilen statt 3+3+2. */
/* Zwei Spalten ab Tabletbreite: bei dreien wurde «Lohn- und
   Personalwesen» angeschnitten. Auf schmalen Schirmen gilt weiter die
   einspaltige Grundregel, sonst würden die Beschriftungen gekappt. */
@media (min-width: 641px) {
  .vts-optionen.themen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vts-optionen.themen .vts-option { align-items: flex-start; }

/* Fokus ab Schritt 2: Die Seitenspalte tritt zurück, das Formular bekommt die
   volle Inhaltsbreite. Beim Auswählen hilft die Spalte, beim Ausfüllen nicht. */
.vts-seite-raster { transition: grid-template-columns .25s ease; }
.vts-seite-raster.konzentriert { grid-template-columns: minmax(0, 1fr); }
.vts-seite-raster.konzentriert .vts-seite-spalte { display: none; }
@media (prefers-reduced-motion: reduce) {
  .vts-seite-raster { transition: none; }
}

/* =====================================================================
   Verweis auf den Assistenten am Fuss der Leistungsseiten
   ===================================================================== */
.vts-cta-streifen { padding: 0 0 56px; }
.vts-cta-streifen > .e-con-inner {
  display: block; width: 100%; max-width: 1000px; margin-inline: auto; padding-inline: 20px;
}
.vts-leistung-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 26px 30px; border-radius: 14px;
  background: var(--vts-flaeche); border: 1px solid var(--vts-linie);
}
.vts-leistung-cta-text { flex: 1 1 360px; }
.vts-leistung-cta h2 {
  font-family: var(--vts-schrift-kopf); margin: 0 0 6px;
  font-size: var(--vts-grad-h3); font-weight: 700;
  line-height: var(--vts-zeile-kopf); letter-spacing: -0.02em; color: var(--vts-blau);
}
.vts-leistung-cta p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--vts-grau); max-width: 620px; }
@media (max-width: 620px) {
  .vts-leistung-cta { padding: 22px; }
  .vts-leistung-cta .vts-cta-knopf { width: 100%; justify-content: center; }
}

/* =====================================================================
   Anfrage-Seite als zweispaltiger Assistent
   Links Titel und Schrittliste, rechts der Inhalt des aktuellen Schritts.
   Diese Seite trägt keine Fusszeile und keine weiteren Abschnitte.
   ===================================================================== */
/* Der Assistent liegt genau unter dem Balken der Kopfzeile: Dieser ist
   1000 px breit, also darf das Formular nicht darüber hinausragen. */
.vts-assistent-seite {
  width: 100%; max-width: 1040px; margin-inline: auto;
  padding: 34px 20px 60px;
}
body.vts-formularseite #vts-anfrage {
  display: grid; grid-template-columns: 290px minmax(0, 1fr);
  align-items: stretch; overflow: clip;
}

/* ------------------------------------------------------------ linke Spalte */
.vts-nav {
  display: flex; flex-direction: column; gap: 20px;
  padding: 24px 22px; background: var(--vts-blau); color: #fff;
}
.vts-nav-oben h1 {
  font-family: var(--vts-schrift-kopf); margin: 0 0 6px; color: #fff;
  font-size: 20px; font-weight: 700;
  line-height: var(--vts-zeile-kopf); letter-spacing: -0.02em;
}
.vts-nav-oben p {
  margin: 0; font-family: var(--vts-schrift-text);
  font-size: 13px; line-height: var(--vts-zeile-klein);
  color: rgba(255,255,255,.75);
}

/* align-content: start — sonst streckt das Raster die Zeilen über die
   ganze Spaltenhöhe und der aktive Schritt wird unförmig gross. */
.vts-schrittliste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2px; align-content: start; flex: 1;
}
.vts-schrittpunkt {
  display: flex; gap: 11px; align-items: flex-start; padding: 9px 10px;
  border-radius: 9px; position: relative;
}
/* Verbindungslinie zwischen den Punkten */
.vts-schrittpunkt::before {
  content: ""; position: absolute; left: 23px; top: 33px; bottom: -2px; width: 2px;
  background: rgba(255,255,255,.18);
}
.vts-schrittpunkt:last-child::before { display: none; }
.vts-schrittnummer {
  flex: 0 0 27px; width: 27px; height: 27px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; position: relative; z-index: 1;
  background: rgba(255,255,255,.14); color: rgba(255,255,255,.75);
  transition: background .18s, color .18s;
}
.vts-schrittnummer svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.6; }
.vts-schritttext { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 3px; }
.vts-schritttext b { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.8); }
.vts-schritttext small {
  font-size: 11.5px; line-height: 1.4; color: rgba(255,255,255,.55);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.vts-schrittpunkt.aktiv { background: rgba(255,255,255,.1); }
.vts-schrittpunkt.aktiv .vts-schrittnummer { background: #fff; color: var(--vts-blau); }
.vts-schrittpunkt.aktiv .vts-schritttext b { color: #fff; }
.vts-schrittpunkt.fertig .vts-schrittnummer { background: rgba(255,255,255,.9); color: var(--vts-blau); }
.vts-schrittpunkt.fertig .vts-schritttext b { color: rgba(255,255,255,.9); }
.vts-schrittpunkt.offen .vts-schrittnummer { background: rgba(255,255,255,.09); color: rgba(255,255,255,.45); }
.vts-schrittpunkt.offen .vts-schritttext b { color: rgba(255,255,255,.5); }
.vts-schrittpunkt[data-springe] { cursor: pointer; }
.vts-schrittpunkt[data-springe]:hover { background: rgba(255,255,255,.09); }
.vts-schrittpunkt[data-springe]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* margin-top: auto — bekommt die Spalte mehr Höhe als ihr Inhalt,
   rückt die Gruppe mit Telefon und Merkmalen ans untere Ende */
.vts-nav-unten { display: grid; gap: 12px; margin-top: auto; }
.vts-nav-tel {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  padding: 11px 13px; border-radius: 10px; background: rgba(255,255,255,.1);
  color: #fff; font-size: 16px; font-weight: 700;
}
.vts-nav-tel:hover { background: rgba(255,255,255,.16); color: #fff; }
.vts-nav-tel svg { flex: 0 0 18px; width: 18px; height: 18px; stroke: #fff; stroke-width: 1.8; }
.vts-nav-tel span { display: flex; flex-direction: column; }
.vts-nav-tel small { font-size: 11px; font-weight: 400; color: rgba(255,255,255,.7); margin-bottom: 1px; }

.vts-nav-merkmale { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.vts-nav-merkmale li {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; color: rgba(255,255,255,.75);
}
.vts-nav-merkmale svg { flex: 0 0 14px; width: 14px; height: 14px; stroke: rgba(255,255,255,.6); stroke-width: 1.8; }

/* Die feinen Grade darunter — 12,5 px für Schrittnummern, 12 px für
   die Merkmalsliste — liegen bewusst unter der Seitenskala. Der
   Assistent ist Bedienoberfläche, nicht Fliesstext, und seine Höhe ist
   auf den Bildschirm gerechnet: Jede Vergrösserung hier drückt den
   Inhalt in den Innen-Scroll. Die frühere Registerzeile der Firma ist
   bewusst weg — sie steht schon im fixierten Balken der Seite. */

/* ----------------------------------------------------------- rechte Spalte */
.vts-haupt { display: flex; flex-direction: column; background: #fff; min-width: 0; }
.vts-haupt-kopf { padding: 30px 30px 0; }
.vts-haupt-kopf h2 {
  font-family: var(--vts-schrift-kopf); margin: 0 0 6px;
  font-size: var(--vts-grad-h3); font-weight: 700;
  color: var(--vts-text); line-height: var(--vts-zeile-kopf);
}
.vts-haupt-kopf p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--vts-grau); }
body.vts-formularseite .vts-inhalt { padding: 22px 30px 30px; flex: 1; min-height: 340px; }
body.vts-formularseite .vts-fuss { padding: 16px 30px; }

/* Abschluss über die ganze Breite */
body.vts-formularseite #vts-anfrage:has(.vts-fertig) { grid-template-columns: 1fr; }
.vts-fertig-zurueck { margin-top: 18px !important; }
.vts-fertig-zurueck a { color: var(--vts-akzent); font-weight: 600; text-decoration: none; }
.vts-fertig-zurueck a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  body.vts-formularseite #vts-anfrage { grid-template-columns: 1fr; }
  .vts-nav { padding: 22px 20px; gap: 20px; }
  .vts-nav-oben h1 { font-size: var(--vts-grad-h3); }
  /* Auf schmalen Bildschirmen nur der aktuelle Schritt und der Fortschritt */
  .vts-schrittliste { display: flex; gap: 6px; }
  .vts-schrittpunkt { flex: 1; padding: 0; flex-direction: column; gap: 7px; }
  .vts-schrittpunkt::before { display: none; }
  .vts-schrittnummer { display: none; }
  .vts-schritttext { padding-top: 0; }
  .vts-schritttext b { font-size: 11.5px; }
  .vts-schritttext small { display: none; }
  .vts-schrittpunkt .vts-schritttext { border-top: 3px solid rgba(255,255,255,.2); padding-top: 7px; }
  .vts-schrittpunkt.aktiv .vts-schritttext,
  .vts-schrittpunkt.fertig .vts-schritttext { border-top-color: #fff; }
  .vts-schrittpunkt.aktiv { background: none; }
  .vts-nav-merkmale { display: none; }
  .vts-haupt-kopf { padding: 24px 20px 0; }
  body.vts-formularseite .vts-inhalt { padding: 18px 20px 24px; }
  body.vts-formularseite .vts-fuss { padding: 16px 20px; }
}

/* Sehr schmale Geräte: nur der Fortschrittsbalken. Welcher Schritt gerade
   läuft, steht ohnehin im Kopf rechts und in der Fusszeile. */
@media (max-width: 600px) {
  .vts-schritttext b { display: none; }
  .vts-schrittpunkt .vts-schritttext { border-top-width: 4px; padding-top: 0; min-height: 4px; }
  .vts-schrittliste { margin-bottom: 2px; }
}

/* Der unten fixierte Balken überdeckt sonst den Fuss des Formulars. */
body.vts-formularseite .vts-assistent-seite { padding-bottom: 132px; }

/* =====================================================================
   Anfrage-Seite: alles auf einen Bildschirm
   Kopfzeile, Formular und der fixierte Balken sollen gemeinsam sichtbar
   bleiben — gescrollt wird innerhalb des Formulars, nicht die Seite.
   Die beiden Hoehen misst anfrage.js zur Laufzeit.
   ===================================================================== */
@media (min-width: 901px) {
  body.vts-formularseite .vts-assistent-seite {
    padding-top: 24px;
    /* Der Balken steht selbst im Fluss und bringt seine Hoehe mit — hier
       darf sie kein zweites Mal reserviert werden, sonst scrollt die Seite. */
    padding-bottom: 22px;
  }
  body.vts-formularseite #vts-anfrage {
    /* height statt max-height: Der Kasten füllt die Höhe zwischen Kopf
       und Balken immer ganz — wie der Hero auf der Startseite. Vorher
       blieb er inhaltshoch und liess auf grossen Schirmen Restfläche.
       dvh beruecksichtigt eingeblendete Browserleisten; vh als Rueckfall */
    height: calc(100vh - var(--vts-kopf-hoehe, 132px) - var(--vts-balken-hoehe, 108px) - 46px);
    height: calc(100dvh - var(--vts-kopf-hoehe, 132px) - var(--vts-balken-hoehe, 108px) - 46px);
    min-height: 420px;
    /* minmax(0, 1fr) — sonst waechst die Rasterzeile ueber die begrenzte
       Hoehe hinaus, statt den Inhalt scrollen zu lassen. */
    grid-template-rows: minmax(0, 1fr);
  }
  /* min-height: 0 — ohne das wachsen Raster- und Flex-Kinder ueber ihren
     Platz hinaus, statt zu scrollen. */
  body.vts-formularseite .vts-nav,
  body.vts-formularseite .vts-haupt { min-height: 0; }
  body.vts-formularseite .vts-nav { overflow-y: auto; }
  body.vts-formularseite .vts-inhalt {
    overflow-y: auto; min-height: 0; flex: 1;
    scrollbar-width: thin; scrollbar-color: #c9cddf transparent;
  }
  body.vts-formularseite .vts-inhalt::-webkit-scrollbar { width: 9px; }
  body.vts-formularseite .vts-inhalt::-webkit-scrollbar-thumb {
    background: #c9cddf; border-radius: 5px;
    border: 2px solid #fff; background-clip: padding-box;
  }
  body.vts-formularseite .vts-haupt-kopf,
  body.vts-formularseite .vts-fuss { flex: 0 0 auto; }
  /* Die Bestaetigung braucht keinen Innen-Scroll und keine feste Höhe */
  body.vts-formularseite #vts-anfrage:has(.vts-fertig) { height: auto; max-height: none; }
}

/* Flache Bildschirme: Die linke Spalte lässt zuerst die Zusatzangaben weg,
   damit Schritte und Telefonnummer ganz sichtbar bleiben statt angeschnitten. */
@media (min-width: 901px) and (max-height: 940px) {
  .vts-nav { gap: 16px; }
  .vts-nav-merkmale { display: none; }
  .vts-schrittpunkt { padding: 8px 10px; }
}
@media (min-width: 901px) and (max-height: 720px) {
  .vts-nav-oben p { display: none; }
  .vts-schritttext small { display: none; }
}

/* =====================================================================
   Mobile Ansicht: Formular als App
   Klebender Fortschrittsstreifen unter der Website-Kopfzeile, fixe
   Bedienleiste ueber dem FINMA-Balken — aber es scrollt das DOKUMENT,
   kein innerer Container. Nur dann faehrt die Browserleiste des Handys
   beim Scrollen ein; ein overflow-Scroller haelt sie dauerhaft fest.
   Entscheidungen: ENTSCHEIDUNGEN-mobile-anfrage.md
   ===================================================================== */

/* Auf dem Desktop loest sich der Scrollbereich auf — dort bleibt die
   Ueberschrift stehen und nur der Fragenbereich scrollt. */
.vts-scrollbereich { display: contents; }
.vts-mobilkopf { display: none; }

@media (max-width: 900px) {
  body.vts-formularseite .vts-assistent-seite {
    padding: 0; max-width: none;
  }
  body.vts-formularseite #vts-anfrage {
    display: flex; flex-direction: column;
    /* kein Hoehenkorsett: das Formular ist so hoch wie sein Inhalt und
       scrollt im Dokument — die Mindesthoehe stellt sicher, dass die
       fixe Bedienleiste nie auf dem Fragenbereich klebt */
    min-height: calc(100dvh - var(--vts-kopf-hoehe, 88px) - var(--vts-balken-hoehe, 75px));
    margin: 0; border-radius: 0; border-left: 0; border-right: 0;
    box-shadow: none;
    /* Platz fuer die fixe Bedienleiste am unteren Rand */
    padding-bottom: 78px;
  }
  /* Die blaue Spalte hat mobil keinen Platz — Titel und Telefonnummer
     stehen ohnehin in Kopfzeile und FINMA-Balken. */
  body.vts-formularseite .vts-nav { display: none; }

  /* --- klebender Streifen oben (unter der Website-Kopfzeile) --- */
  .vts-mobilkopf {
    display: flex; flex-direction: column; gap: 7px; flex: 0 0 auto;
    padding: 11px 18px 10px; background: #fff;
    border-bottom: 1px solid var(--vts-linie);
    box-shadow: 0 2px 6px rgba(5, 5, 130, .05);
    position: sticky; top: var(--vts-kopf-hoehe, 88px); z-index: 20;
  }
  .vts-mobil-balken { display: flex; gap: 5px; }
  .vts-mobil-balken i {
    flex: 1; height: 4px; border-radius: 2px;
    background: var(--vts-linie); transition: background .2s;
  }
  .vts-mobil-balken i.fertig { background: var(--vts-blau); }
  .vts-mobil-balken i.aktiv { background: var(--vts-akzent); }
  .vts-mobil-zaehler { font-size: 12px; font-weight: 600; color: var(--vts-grau); }

  /* --- Fragenbereich: scrollt im Dokument, KEIN eigener overflow --- */
  .vts-scrollbereich { display: block; flex: 1; }
  body.vts-formularseite .vts-haupt { flex: 1; display: flex; flex-direction: column; }
  body.vts-formularseite .vts-haupt-kopf { padding: 18px 18px 0; }
  .vts-haupt-kopf h2 { font-size: 19px; }
  .vts-haupt-kopf p { font-size: 14px; }
  body.vts-formularseite .vts-inhalt {
    overflow: visible; min-height: 0; padding: 14px 18px 22px;
  }

  /* --- fixe Bedienleiste unten, direkt ueber dem FINMA-Balken --- */
  body.vts-formularseite .vts-fuss {
    display: flex; gap: 10px; padding: 12px 18px;
    background: #fff; border-top: 1px solid var(--vts-linie);
    box-shadow: 0 -2px 8px rgba(5, 5, 130, .06);
    position: fixed; left: 0; right: 0;
    bottom: var(--vts-balken-hoehe, 75px); z-index: 20;
  }
  /* Die Schrittzaehlung steht jetzt oben im Streifen */
  body.vts-formularseite .vts-zaehler { display: none; }
  body.vts-formularseite .vts-fuss .vts-knopf {
    flex: 1 1 0; justify-content: center; padding: 14px 12px; font-size: 15px;
  }

  /* Bestaetigung: kein festes Geruest, sie darf frei laufen (die fixe
     Bedienleiste ist dann gar nicht mehr im Markup) */
  body.vts-formularseite #vts-anfrage:has(.vts-fertig) {
    height: auto; min-height: 0; padding-bottom: 0;
  }
  .vts-fertig { padding: 40px 22px; }
  .vts-fertig h2 { font-size: 20px; }
}