/* ============ AIOOS landing — upgrades: trust strip, ZUX voice-setup, comparison, branchen ============ */

/* ---------- 0) onepage: dogfooded widget + nav scroll-spy ---------- */
.aw.aw-fixed{position:fixed; bottom:22px; right:22px; z-index:140}
@media (max-width:640px){ .aw.aw-fixed .aw-label{display:none} }
.nav-links a{position:relative}
.nav-links a.act{color:var(--ink); font-weight:700}
.nav-links a.act::after{content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:-7px;
  width:4px; height:4px; border-radius:50%; background:var(--blue);
  box-shadow:0 0 0 3px rgba(0,132,255,.18)}


/* ---------- 1) compliance / trust strip ---------- */
.assure{position:relative; z-index:5; display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
  max-width:1200px; margin:26px auto 0; padding:0 32px}
.assure .as-item{display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:100px;
  font-size:13px; font-weight:600; color:var(--ink-2);
  background:rgba(255,255,255,.55); border:1px solid rgba(24,54,120,.09);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.5)}
.assure .as-item svg{flex:0 0 auto; color:var(--blue)}
.assure .as-item b{font-weight:700; color:var(--ink)}

/* ---------- 2) ZUX — setup by voice ---------- */
.zux-grid{display:grid; grid-template-columns:1fr 1.12fr; gap:22px; align-items:stretch; max-width:1040px; margin:0 auto}
.zux-col{position:relative; border-radius:24px; padding:26px 26px 24px; overflow:hidden;
  background:rgba(255,255,255,.6); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 3px 4px rgba(255,255,255,.5), 0 30px 70px -38px rgba(20,50,110,.45)}
.zux-tag{display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:100px;
  font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px}
.zux-old .zux-tag{color:#8395AE; background:rgba(24,54,120,.06); border:1px solid rgba(24,54,120,.1)}
.zux-new .zux-tag{color:#fff; background:linear-gradient(150deg,#319AFF,#0B63E0);
  box-shadow:0 8px 18px -8px rgba(0,132,255,.6)}

/* old way: dimmed dashboard mock */
.zux-mock{filter:grayscale(.65); opacity:.62; border-radius:16px; overflow:hidden;
  border:1px solid rgba(24,54,120,.12); background:#fff;
  box-shadow:0 14px 30px -22px rgba(20,50,110,.5)}
.zux-mock .zm-bar{display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid rgba(24,54,120,.08); background:#F4F7FC}
.zux-mock .zm-bar i{width:9px; height:9px; border-radius:50%; background:#D5DEEA}
.zux-mock .zm-tabs{display:flex; gap:4px; padding:10px 14px 0}
.zux-mock .zm-tabs span{padding:7px 13px; border-radius:8px 8px 0 0; font-size:11.5px; font-weight:700; color:#8395AE; background:#EEF3FA}
.zux-mock .zm-tabs span:first-child{background:#fff; color:#46546B; border:1px solid rgba(24,54,120,.1); border-bottom:none}
.zux-mock .zm-body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:11px; border-top:1px solid rgba(24,54,120,.08)}
.zux-mock .zm-row{display:flex; flex-direction:column; gap:5px}
.zux-mock .zm-row label{font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#9AA8BD}
.zux-mock .zm-row i{height:30px; border-radius:8px; background:#F1F5FB; border:1px solid rgba(24,54,120,.1)}
.zux-mock .zm-row.half{flex-direction:row; gap:10px}
.zux-mock .zm-row.half span{flex:1; display:flex; flex-direction:column; gap:5px}
.zux-mock .zm-save{align-self:flex-end; padding:8px 18px; border-radius:9px; font-size:12px; font-weight:700; color:#fff; background:#9AA8BD}
.zux-old .zux-cap{margin-top:14px; font-size:13px; color:var(--ink-2); line-height:1.55}
.zux-old .zux-cap b{color:var(--ink)}

/* new way: orb + spoken command */
.zux-new{display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(45,108,246,.07), rgba(34,211,238,.04)), rgba(255,255,255,.6)}
.zux-stage{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:8px 4px 4px; text-align:center}
.zorb{position:relative; width:84px; height:84px}
.zorb .glw{position:absolute; inset:-38%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(49,154,255,.45), transparent 68%); filter:blur(9px)}
.zorb .sph{position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,.95), transparent 28%),
    radial-gradient(circle at 36% 32%, #7FB9FF 0%, #2D6CF6 55%, #102A66 100%);
  box-shadow:inset 0 -10px 20px rgba(8,20,60,.55), inset 0 4px 9px rgba(255,255,255,.35),
    0 18px 36px -12px rgba(45,108,246,.6)}
.zorb .bars{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:3px}
.zorb .bars i{width:3px; height:7px; border-radius:2px; background:rgba(255,255,255,.95); box-shadow:0 0 8px rgba(255,255,255,.6)}
@media (prefers-reduced-motion:no-preference){
  .zorb{animation:zorbBreath 3.6s ease-in-out infinite}
  .zux-new.talk .zorb .bars i{animation:bar 1s ease-in-out infinite}
  .zux-new.talk .zorb .bars i:nth-child(2){animation-delay:.14s}
  .zux-new.talk .zorb .bars i:nth-child(3){animation-delay:.28s}
  .zux-new.talk .zorb .bars i:nth-child(4){animation-delay:.08s}
  .zux-new.talk .zorb .bars i:nth-child(5){animation-delay:.21s}
}
@keyframes zorbBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.zux-say{min-height:84px; display:flex; align-items:center; justify-content:center; max-width:420px}
.zux-say p{font-family:'Instrument Serif',Georgia,serif; font-size:24px; line-height:1.4; color:var(--ink-soft); text-wrap:pretty}
.zux-say p::before{content:'„'}
.zux-say p::after{content:'“'}
.zux-done{display:inline-flex; align-items:center; gap:9px; padding:9px 18px; border-radius:100px;
  font-size:13.5px; font-weight:700; color:#0E7A3D; background:rgba(43,217,138,.13);
  border:1px solid rgba(43,217,138,.32); transition:opacity .4s, transform .4s; opacity:0; transform:translateY(6px)}
.zux-done.on{opacity:1; transform:none}
.zux-done .zck{width:18px; height:18px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg,#2BD98A,#12A14A)}
.zux-foot{margin-top:18px; padding-top:16px; border-top:1px solid rgba(24,54,120,.08);
  font-size:13px; color:var(--ink-2); text-align:center; line-height:1.55}
.zux-foot b{color:var(--ink)}

/* ---------- 3) comparison ---------- */
.vs-wrap{max-width:980px; margin:0 auto; border-radius:26px; overflow:hidden;
  background:rgba(255,255,255,.6); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:inset 0 3px 4px rgba(255,255,255,.5), 0 36px 80px -40px rgba(20,50,110,.5)}
.vs-row{display:grid; grid-template-columns:1.25fr 1fr 1fr; align-items:stretch}
.vs-row > div{padding:17px 22px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(24,54,120,.07)}
.vs-row:last-child > div{border-bottom:none}
.vs-row .vlab{font-size:14.5px; font-weight:600; color:var(--ink-soft)}
.vs-row .vlab small{display:block; font-size:12px; font-weight:500; color:#8395AE; margin-top:2px}
.vs-row .vaio{background:rgba(0,132,255,.055); border-left:1px solid rgba(0,132,255,.14); border-right:1px solid rgba(0,132,255,.14);
  font-size:14px; font-weight:600; color:var(--ink)}
.vs-row .voth{font-size:13.5px; font-weight:500; color:#8395AE}
.vs-row.head > div{padding:20px 22px 16px; border-bottom:1px solid rgba(24,54,120,.1)}
.vs-row.head .vaio{font-family:var(--font-head); font-weight:800; font-size:16px; letter-spacing:-.01em;
  display:flex; align-items:center; gap:9px; color:var(--ink);
  background:linear-gradient(180deg, rgba(0,132,255,.1), rgba(0,132,255,.05))}
.vs-row.head .vaio .mk2{width:26px; height:21px}
.vs-row.head .vaio .mk2 svg{display:block; width:100%; height:100%}
.vs-row.head .voth{font-family:var(--font-head); font-weight:700; font-size:14.5px; color:#8395AE}
.vck{width:21px; height:21px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg,#319AFF,#0B63E0); box-shadow:0 6px 12px -6px rgba(0,132,255,.6)}
.vck.teal{background:linear-gradient(150deg,#2DD4BF,#14B8A6); box-shadow:0 6px 12px -6px rgba(20,184,166,.6)}
.vno{width:21px; height:21px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; color:#9AA8BD;
  background:rgba(24,54,120,.07)}
.vs-note{text-align:center; font-size:12.5px; color:#8395AE; margin-top:16px}

/* ---------- 4) branchen ---------- */
.br-band{max-width:980px; margin:0 auto; text-align:center}
.br-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px}
.br-chip{display:inline-flex; align-items:center; gap:9px; padding:11px 19px; border-radius:100px;
  font-size:14px; font-weight:600; color:var(--ink-soft); text-decoration:none; cursor:pointer;
  background:rgba(255,255,255,.6); border:1px solid rgba(24,54,120,.1);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.5);
  transition:transform .2s, background .2s, border-color .2s}
.br-chip:hover{transform:translateY(-2px); background:#fff; border-color:rgba(0,132,255,.3)}
.br-chip .bi{width:24px; height:24px; border-radius:8px; display:grid; place-items:center; color:#fff; flex:0 0 auto;
  background:linear-gradient(150deg,#319AFF,#0B63E0)}
.br-chip:nth-child(2n) .bi{background:linear-gradient(150deg,#22D3EE,#2D6CF6)}
.br-chip:nth-child(3n) .bi{background:linear-gradient(150deg,#2DD4BF,#14B8A6)}
.br-chip.more{color:#fff; background:linear-gradient(150deg,#319AFF,#0B63E0); border-color:transparent;
  box-shadow:0 14px 28px -14px rgba(0,132,255,.7)}
.br-chip.more:hover{background:linear-gradient(150deg,#3FA2FF,#1670EE)}

@media (max-width:880px){
  .zux-grid{grid-template-columns:1fr}
  .vs-row{grid-template-columns:1.1fr 1fr 1fr}
  .vs-row > div{padding:13px 12px}
  .vs-row .vlab{font-size:13px}
  .vs-row .vaio{font-size:12.5px}
  .vs-row .voth{font-size:12px}
}