/* ============ vs-duel — "Mehr als ein Telefon-Bot", restaged (2026-07-20) ============
   Iman: the comparison must not read like a spreadsheet — the AIOOS column is the hero.
   Pure override layer on landing-upgrades.css .vs-*; markup gains value texts (em.vtx),
   two rows, a WhatsApp-bald qualifier and a CTA strip. Hover/transform only — no loops. */

/* ---------- panel ---------- */
.vs-wrap{max-width:1020px; border-radius:26px;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.92);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.65), 0 34px 80px -44px rgba(20,50,110,.55);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  padding-bottom:14px}
.vs-row{grid-template-columns:1.2fr 1.05fr 1fr}
.vs-row > div{padding:15px 22px}
.vs-row:not(.head):hover{background:rgba(45,108,246,.035)}
.vs-row:not(.head):hover .vlab{color:var(--ink)}

/* labels */
.vs-row .vlab{font-size:15px; transition:color .2s}
.vs-row .vlab small{font-size:12px; margin-top:3px; line-height:1.4}
.vs-row .vlab .soon{margin-left:7px}

/* ---------- the winner column: floating navy pillar ---------- */
.vs-row > .vaio{margin:0 16px; padding:14px 20px;
  background:#0F1B33; border-left:1px solid rgba(120,190,255,.16); border-right:1px solid rgba(120,190,255,.16);
  border-bottom:1px solid rgba(255,255,255,.07)}
.vs-row.head .vaio{border-radius:20px 20px 0 0; justify-content:center; color:#fff;
  background:linear-gradient(180deg,#1A2C54 0%,#122244 70%,#0F1B33 100%);
  border-top:1px solid rgba(120,190,255,.28);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.16)}
.vs-row:last-child .vaio{border-radius:0 0 20px 20px; border-bottom:none;
  box-shadow:0 20px 40px -20px rgba(45,108,246,.6)}
.vs-row .vaio .vck{background:linear-gradient(150deg,#2D6CF6,#22D3EE);
  box-shadow:0 0 14px rgba(34,211,238,.5), inset 0 1px 0 rgba(255,255,255,.35)}

/* value texts (em.vtx — italic reset) */
.vtx{font-style:normal}
.vs-row .vaio .vtx{color:#EAF2FF; font-size:13.5px; font-weight:650; letter-spacing:.005em}
.vs-row .voth .vtx{font-size:13px; font-weight:550}

/* classic column: quiet */
.vs-row .voth{color:#8395AE}
.vs-row .vno{background:rgba(131,149,174,.12); border:1px solid rgba(131,149,174,.22)}

/* note */
.vs-note{margin-top:18px}

/* ---------- CTA strip ---------- */
.vs-cta{display:flex; justify-content:center; align-items:center; gap:16px; margin:26px auto 0; flex-wrap:wrap}
.vs-cta .vgo{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body); font-weight:800; font-size:15px;
  color:#fff; text-decoration:none; padding:14px 26px; border-radius:100px;
  background:linear-gradient(96deg,var(--blue) 0%,#1F5AE0 100%);
  box-shadow:0 16px 34px -14px rgba(45,108,246,.75), inset 0 1.5px 0 rgba(255,255,255,.25);
  transition:transform .18s, box-shadow .2s}
.vs-cta .vgo:hover{transform:translateY(-2px); box-shadow:0 22px 40px -14px rgba(45,108,246,.85), inset 0 1.5px 0 rgba(255,255,255,.25)}
.vs-cta .vgo svg{flex:0 0 auto}
.vs-cta .valt{font-weight:700; font-size:14.5px; color:var(--blue); text-decoration:none; padding:14px 6px}
.vs-cta .valt:hover{text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .vs-row > div{padding:13px 12px}
  .vs-row > .vaio{margin:0 8px; padding:12px 14px}
  .vs-row .vlab{font-size:13.5px}
  .vs-row .vaio .vtx{font-size:12.5px}
  .vs-row .voth .vtx{font-size:12px}
}
@media (max-width:480px){
  .vs-row > .vaio{margin:0 4px}
  .vs-row .vaio .vtx{font-size:11px; line-height:1.35; text-align:center; margin-top:4px}
  .vs-row .voth .vtx{font-size:10.5px; line-height:1.35; text-align:center; margin-top:4px}
  .vs-row .vlab small{font-size:10px}
  .vs-row.head .vaio{border-radius:14px 14px 0 0}
  .vs-row:last-child .vaio{border-radius:0 0 14px 14px}
  .vs-cta .vgo{font-size:14px; padding:13px 22px}
}
@media (prefers-reduced-motion:reduce){
  .vs-cta .vgo{transition:none}
  .vs-cta .vgo:hover{transform:none}
}