/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue:       #1e6fd9;
  --blue-dark:  #1558b0;
  --blue-light: #3b82f6;
  --indigo:     #6366f1;
  --cyan:       #06b6d4;
  --violet:     #8b5cf6;
  --emerald:    #10b981;
  --white:      #ffffff;
  --bg:         #f8faff;
  --bg2:        #eef2ff;
  --text:       #1e293b;
  --muted:      #64748b;
  --border:     #e2e8f0;
  --shadow:     0 4px 24px rgba(30,111,217,.12);
  --shadow-lg:  0 12px 48px rgba(30,111,217,.18);
  --shadow-xl:  0 24px 64px rgba(0,0,0,.16);
  --r:          16px;
  --r-sm:       10px;
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--text); background: var(--white); line-height: 1.6; overflow-x: hidden; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ===== ANIMATIONS ===== */
.fade-up { opacity: 0; transform: translateY(36px); transition: opacity .65s ease, transform .65s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .12s; } .d2 { transition-delay: .24s; }
.d3 { transition-delay: .36s; } .d4 { transition-delay: .48s; }

@keyframes float1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes float2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulse-ring { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2.4);opacity:0} }
@keyframes pulse-sm-ring { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(2);opacity:0} }
@keyframes phone-ring { 0%,100%{transform:scale(1)} 20%{transform:scale(1.08) rotate(8deg)} 40%{transform:scale(1.08) rotate(-8deg)} 60%{transform:scale(1.08) rotate(4deg)} 80%{transform:scale(1.08) rotate(-4deg)} }
@keyframes ring-expand { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(2.2);opacity:0} }
@keyframes dot-travel { 0%{left:-8px;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{left:calc(100% + 8px);opacity:0} }
@keyframes transfer-pulse { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
@keyframes done-pop { 0%{transform:scale(.6);opacity:0} 70%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }

/* ===== NAVBAR ===== */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; padding:18px 0; transition:background .3s,box-shadow .3s,padding .3s; }
.navbar.scrolled { background:rgba(255,255,255,.96); backdrop-filter:blur(16px); box-shadow:0 2px 24px rgba(0,0,0,.08); padding:12px 0; }
.nav-container { max-width:1160px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; position:relative; }
.nav-logo { display:flex; align-items:center; gap:10px; font-size:1.1rem; font-weight:600; color:white; text-decoration:none; transition:color .2s; }
.navbar.scrolled .nav-logo { color:var(--text); }
.logo-mark { width:38px; height:38px; background:rgba(255,255,255,.2); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; transition:background .2s; }
.navbar.scrolled .logo-mark { background:var(--blue); color:white; }
.nav-logo strong { color:#a8d4ff; } .navbar.scrolled .nav-logo strong { color:var(--blue); }
.nav-links { display:flex; align-items:center; gap:4px; list-style:none; }
.nav-links a { text-decoration:none; color:rgba(255,255,255,.85); font-weight:500; font-size:.9rem; padding:8px 14px; border-radius:8px; transition:color .2s,background .2s; }
.nav-links a:hover { color:white; background:rgba(255,255,255,.12); }
.navbar.scrolled .nav-links a { color:var(--text); }
.navbar.scrolled .nav-links a:hover { color:var(--blue); background:var(--bg2); }
.btn-nav { background:rgba(255,255,255,.2)!important; color:white!important; border:1.5px solid rgba(255,255,255,.4)!important; border-radius:10px!important; }
.btn-nav:hover { background:rgba(255,255,255,.3)!important; }
.navbar.scrolled .btn-nav { background:var(--blue)!important; border-color:transparent!important; }
.nav-phone {
  display:flex; align-items:center; gap:7px;
  color:rgba(255,255,255,.85); text-decoration:none;
  font-size:.87rem; font-weight:500;
  padding:7px 14px; border-radius:8px;
  border:1px solid rgba(255,255,255,.28);
  transition:color .2s, background .2s, border-color .2s;
  flex-shrink:0; white-space:nowrap;
}
.nav-phone:hover { color:white; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.45); }
.navbar.scrolled .nav-phone { color:var(--text); border-color:var(--border); }
.navbar.scrolled .nav-phone:hover { color:var(--blue); background:var(--bg2); border-color:var(--blue); }
.nav-phone i { font-size:.8rem; }

.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-toggle span { display:block; width:24px; height:2px; background:white; border-radius:2px; transition:.3s; }
.navbar.scrolled .nav-toggle span { background:var(--text); }

/* ===== BUTTONS ===== */
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:12px; font-weight:600; font-size:.95rem; text-decoration:none; cursor:pointer; border:none; transition:transform .2s,box-shadow .2s,background .2s; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--blue); color:white; box-shadow:0 4px 16px rgba(30,111,217,.35); }
.btn-primary:hover { background:var(--blue-dark); box-shadow:0 8px 28px rgba(30,111,217,.45); }
.btn-ghost { background:rgba(255,255,255,.15); color:white; border:2px solid rgba(255,255,255,.4); backdrop-filter:blur(8px); }
.btn-ghost:hover { background:rgba(255,255,255,.25); }
.btn-lg { padding:16px 36px; font-size:1rem; }

/* ===== HERO ===== */
.hero { min-height:100vh; background:linear-gradient(140deg,#0c2d6b 0%,#1a5fc8 45%,#2d8fff 100%); position:relative; display:flex; align-items:center; padding:120px 0 80px; overflow:hidden; }
.hero-shapes { position:absolute; inset:0; pointer-events:none; }
.hs { position:absolute; border-radius:50%; background:rgba(255,255,255,.055); }
.hs1 { width:700px; height:700px; top:-250px; right:-120px; }
.hs2 { width:450px; height:450px; bottom:-180px; left:-120px; }
.hs3 { width:280px; height:280px; top:35%; right:22%; }
.hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:white; padding:8px 16px; border-radius:100px; font-size:.84rem; font-weight:500; margin-bottom:20px; backdrop-filter:blur(8px); }
h1 { font-size:clamp(2rem,4vw,3.1rem); font-weight:800; color:white; line-height:1.15; margin-bottom:8px; }
.h1-dash { letter-spacing:-.05em; }
.grad { background:linear-gradient(90deg,#a8d4ff,#e2f0ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-tagline { font-family:'Playfair Display',serif; font-style:italic; font-size:1.05rem; color:rgba(255,255,255,.65); margin-bottom:18px; letter-spacing:.02em; }
.hero-sub { font-size:1rem; color:rgba(255,255,255,.8); max-width:480px; line-height:1.75; margin-bottom:36px; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px; }
.hero-stats { display:flex; align-items:center; gap:24px; }
.stat { text-align:center; }
.stat strong { display:block; font-size:1.6rem; font-weight:800; color:white; }
.stat span   { font-size:.75rem; color:rgba(255,255,255,.6); }
.stat-sep    { width:1px; height:40px; background:rgba(255,255,255,.22); }

/* Phone mockup */
.hero-visual { position:relative; display:flex; justify-content:center; }
.phone-wrap { position:relative; z-index:2; }
.phone-frame { width:268px; background:#091524; border-radius:38px; padding:14px; box-shadow:0 28px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08); }
.phone-notch { width:80px; height:18px; background:#091524; border-radius:0 0 14px 14px; margin:0 auto 8px; }
.phone-screen { background:linear-gradient(160deg,#0d2444,#1a3e70); border-radius:26px; padding:16px; min-height:390px; }
.roka-app-header { display:flex; align-items:center; gap:7px; background:rgba(30,111,217,.35); border-radius:10px; padding:8px 12px; margin-bottom:16px; font-size:.75rem; color:white; font-weight:600; border:1px solid rgba(255,255,255,.12); }
.roka-app-header i { font-size:.85rem; color:#60a5fa; }
.roka-live { margin-left:auto; display:flex; align-items:center; gap:5px; font-size:.7rem; color:#4ade80; }
.pulse-sm { width:6px; height:6px; background:#4ade80; border-radius:50%; position:relative; }
.pulse-sm::after { content:''; position:absolute; inset:0; border-radius:50%; background:#4ade80; animation:pulse-sm-ring 1.4s ease-out infinite; }
.call-avatar { width:52px; height:52px; background:var(--blue); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:1.2rem; margin:0 auto 10px; box-shadow:0 0 0 4px rgba(59,130,246,.3); }
.call-name { text-align:center; color:white; font-weight:600; font-size:.88rem; margin-bottom:3px; }
.call-num  { text-align:center; color:rgba(255,255,255,.55); font-size:.72rem; margin-bottom:12px; }
.call-status { display:flex; align-items:center; justify-content:center; gap:7px; color:#4ade80; font-size:.75rem; font-weight:500; margin-bottom:14px; }
.pulse { width:8px; height:8px; background:#4ade80; border-radius:50%; position:relative; }
.pulse::after { content:''; position:absolute; inset:0; border-radius:50%; background:#4ade80; animation:pulse-ring 1.4s ease-out infinite; }
.transcript { display:flex; flex-direction:column; gap:7px; }
.tl { padding:7px 10px; border-radius:10px; font-size:.7rem; line-height:1.4; display:flex; align-items:flex-start; gap:6px; }
.tl i { margin-top:1px; flex-shrink:0; font-size:.72rem; }
.tl.ai  { background:rgba(59,130,246,.22); color:#93c5fd; }
.tl.usr { background:rgba(255,255,255,.1);  color:rgba(255,255,255,.8); }
.phone-glow { position:absolute; bottom:-24px; left:50%; transform:translateX(-50%); width:200px; height:50px; background:radial-gradient(ellipse,rgba(59,130,246,.55),transparent 70%); filter:blur(14px); }
.fc { position:absolute; background:white; border-radius:14px; padding:12px 16px; display:flex; align-items:center; gap:12px; box-shadow:0 10px 36px rgba(0,0,0,.16); min-width:170px; z-index:3; }
.fc i { font-size:1.35rem; }
.fc strong { display:block; font-size:.83rem; font-weight:600; color:var(--text); }
.fc p { font-size:.7rem; color:var(--muted); margin:0; }
.fc1 { top:8%; right:-24px; } .fc1 i { color:var(--blue); }
.fc2 { bottom:14%; left:-24px; } .fc2 i { color:var(--emerald); }
.float1 { animation:float1 3.5s ease-in-out infinite; }
.float2 { animation:float2 4.5s ease-in-out infinite; }
.hero-wave { position:absolute; bottom:0; left:0; right:0; line-height:0; }
.hero-wave svg { width:100%; height:80px; display:block; }

/* ===== SECTIONS ===== */
.section { padding:100px 0; }
.prozess-sec { background:white; }
.zug-sec { background:var(--bg); }
.sec-head { text-align:center; margin-bottom:64px; }
.sec-tag { display:inline-block; background:var(--bg2); color:var(--blue); font-size:.78rem; font-weight:700; padding:6px 14px; border-radius:100px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
.sec-head h2 { font-size:clamp(1.65rem,3vw,2.5rem); font-weight:800; color:var(--text); margin-bottom:12px; }
.sec-head p { color:var(--muted); font-size:.98rem; max-width:520px; margin:0 auto; }

/* ===== STATUS TAGS ===== */
.status-tag { display:inline-block; padding:2px 8px; border-radius:100px; font-size:.72rem; font-weight:700; margin:0 2px; }
.s-neu      { background:#fef3f2; color:#e53e3e; }
.s-offen    { background:#fefce8; color:#d97706; }
.s-zurueck  { background:#eff6ff; color:#2563eb; }
.s-erledigt { background:#f0fdf4; color:#16a34a; }

/* ===== PROZESS TIMELINE ===== */
.ps-timeline { position:relative; }
.ps-timeline::before {
  content:''; position:absolute;
  left:50%; top:64px; bottom:64px;
  width:2px;
  background:linear-gradient(to bottom,var(--blue-light),rgba(30,111,217,.2));
  transform:translateX(-50%); z-index:0;
}

.ps-step {
  display:grid;
  grid-template-columns:1fr 90px 1fr;
  gap:0 48px;
  align-items:center;
  padding:56px 0;
  position:relative;
  z-index:2;
}
.ps-step:not(:last-child)::after {
  content:''; position:absolute;
  left:50%; bottom:0;
  width:1px; height:56px;
  background:transparent;
  transform:translateX(-50%);
}

/* Alternating placement */
.ps-step .ps-text   { grid-column:1; grid-row:1; }
.ps-step .ps-center { grid-column:2; grid-row:1; }
.ps-step .ps-vis    { grid-column:3; grid-row:1; }
.ps-flip .ps-text   { grid-column:3; grid-row:1; }
.ps-flip .ps-vis    { grid-column:1; grid-row:1; }

.ps-center { display:flex; flex-direction:column; align-items:center; position:relative; z-index:2; }
.ps-center-last .ps-node::after { display:none; }

.ps-node-mask {
  position:relative;
  z-index:10;
  background:#ffffff !important;
  border-radius:50%;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.ps-node {
  width:68px; height:68px; border-radius:50%;
  background:white; border:3px solid var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:var(--blue);
  box-shadow:0 0 0 8px rgba(30,111,217,.08), var(--shadow);
  position:relative; z-index:3; flex-shrink:0;
  transition:transform .3s, box-shadow .3s;
}
.ps-node:hover { transform:scale(1.08); box-shadow:0 0 0 12px rgba(30,111,217,.12), var(--shadow-lg); }
.ps-node-indigo { border-color:var(--indigo); color:var(--indigo); box-shadow:0 0 0 8px rgba(99,102,241,.08), var(--shadow); }
.ps-node-cyan   { border-color:var(--cyan);   color:var(--cyan);   box-shadow:0 0 0 8px rgba(6,182,212,.08),  var(--shadow); }
.ps-node-violet { border-color:var(--violet); color:var(--violet); box-shadow:0 0 0 8px rgba(139,92,246,.08), var(--shadow); }
.ps-node-emerald{ border-color:var(--emerald);color:var(--emerald);box-shadow:0 0 0 8px rgba(16,185,129,.08), var(--shadow); }

/* Step text content */
.ps-label { margin-bottom:16px; }
.ps-num-tag { display:inline-block; font-size:.72rem; font-weight:800; color:var(--blue); letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; opacity:.7; }
.ps-step:nth-child(2) .ps-num-tag { color:var(--indigo); }
.ps-step:nth-child(3) .ps-num-tag { color:var(--cyan); }
.ps-step:nth-child(4) .ps-num-tag { color:var(--violet); }
.ps-step:nth-child(5) .ps-num-tag { color:var(--emerald); }
.ps-label h3 { font-size:1.4rem; font-weight:800; color:var(--text); }

.ps-list { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.ps-list li { display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--muted); line-height:1.5; }
.ps-list li > i { color:var(--emerald); font-size:.75rem; margin-top:4px; flex-shrink:0; }
.ps-list li > span { flex:1; }

.ps-badge { display:inline-flex; align-items:center; gap:7px; background:var(--bg2); color:var(--blue); font-size:.78rem; font-weight:700; padding:7px 14px; border-radius:100px; }
.ps-badge-violet { background:#f3f0ff; color:var(--violet); }
.ps-badge-cyan   { background:#f0fdfe; color:var(--cyan); }
.ps-badge-emerald{ background:#f0fdf4; color:var(--emerald); }

/* ===== STEP VISUALS ===== */

/* Step 1: Phone animation */
.sv-phone-anim { display:flex; flex-direction:column; align-items:center; gap:20px; }
.sva-rings { position:relative; width:120px; height:120px; display:flex; align-items:center; justify-content:center; }
.sva-ring { position:absolute; border-radius:50%; border:2px solid rgba(30,111,217,.3); animation:ring-expand 2s ease-out infinite; }
.sva-r1 { width:120px; height:120px; animation-delay:0s; }
.sva-r2 { width:120px; height:120px; animation-delay:.7s; }
.sva-r3 { width:120px; height:120px; animation-delay:1.4s; }
.sva-center-icon { width:68px; height:68px; background:linear-gradient(135deg,var(--blue),var(--blue-light)); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:1.4rem; position:relative; z-index:2; box-shadow:0 8px 24px rgba(30,111,217,.4); animation:phone-ring 3s ease-in-out infinite; }
.sva-call-card { display:flex; align-items:center; gap:10px; background:white; border:1px solid var(--border); border-radius:14px; padding:14px 18px; box-shadow:var(--shadow); width:100%; max-width:280px; }
.sva-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.sva-dot-red { background:#ef4444; animation:pulse-ring 1.5s ease-out infinite; }
.sva-call-info { display:flex; flex-direction:column; flex:1; }
.sva-call-info strong { font-size:.85rem; font-weight:700; }
.sva-call-info span  { font-size:.72rem; color:var(--muted); }
.sva-topic { color:var(--blue)!important; }
.sva-status { background:#fef3f2; color:#e53e3e; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:100px; flex-shrink:0; }
.sva-tags { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.sva-tags span { background:var(--bg2); color:var(--blue); font-size:.72rem; font-weight:600; padding:5px 12px; border-radius:100px; display:flex; align-items:center; gap:5px; }

/* Step 2: Data transfer */
.sv-transfer { display:flex; align-items:center; gap:16px; padding:24px; background:white; border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); }
.svt-device { display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0; }
.svt-icon { width:56px; height:56px; background:var(--bg2); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--muted); }
.svt-icon-blue { background:linear-gradient(135deg,var(--blue),var(--blue-light)); color:white; }
.svt-device span { font-size:.72rem; color:var(--muted); font-weight:600; }
.svt-flow { flex:1; display:flex; flex-direction:column; gap:10px; }
.svt-line { height:3px; background:var(--border); border-radius:2px; position:relative; overflow:visible; margin-bottom:4px; }
.svt-dot { position:absolute; top:50%; transform:translateY(-50%); width:10px; height:10px; background:var(--blue); border-radius:50%; box-shadow:0 0 0 3px rgba(30,111,217,.2); animation:dot-travel 2s linear infinite; }
.svt-dot.d2 { animation-delay:.7s; }
.svt-dot.d3 { animation-delay:1.4s; }
.svt-items { display:flex; flex-direction:column; gap:6px; }
.svt-item { display:flex; align-items:center; gap:7px; font-size:.75rem; color:var(--muted); background:var(--bg); border-radius:8px; padding:6px 10px; animation:transfer-pulse 2s ease-in-out infinite; }
.svt-item:nth-child(2) { animation-delay:.5s; }
.svt-item:nth-child(3) { animation-delay:1s; }
.svt-item i { color:var(--blue); font-size:.72rem; }

/* Step 3: Overview — mini laptop + phone */
.sv-overview { position:relative; display:flex; align-items:flex-end; gap:-20px; }
.svo-laptop { flex:1; position:relative; }
.svo-lscreen { background:#1a1a2e; border-radius:10px 10px 0 0; padding:8px 8px 0; box-shadow:0 0 0 1px rgba(0,0,0,.15); overflow:hidden; }
.svo-lbar { background:#2c2c3e; border-radius:6px 6px 0 0; padding:6px 10px; display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.svo-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.svo-dot.rd { background:#ff5f57; } .svo-dot.yw { background:#febc2e; } .svo-dot.gn { background:#28c840; }
.svo-url { flex:1; background:rgba(255,255,255,.08); border-radius:4px; padding:2px 8px; font-size:.6rem; color:rgba(255,255,255,.4); }
.svo-lscreen img { width:100%; display:block; border-radius:0 0 4px 4px; }
.svo-lbase-bar { height:8px; background:linear-gradient(to bottom,#d0d0d0,#c0c0c0); }
.svo-lneck { width:30%; height:16px; background:linear-gradient(to bottom,#c0c0c0,#b0b0b0); margin:0 auto; }
.svo-lfoot { width:70%; height:6px; background:linear-gradient(to bottom,#b0b0b0,#a0a0a0); border-radius:0 0 6px 6px; margin:0 auto; box-shadow:0 3px 8px rgba(0,0,0,.12); }
.svo-phone { position:absolute; right:-24px; bottom:-10px; z-index:3; }
.svo-pbody { width:90px; background:#111; border-radius:18px; padding:6px; box-shadow:0 12px 32px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.08); }
.svo-pisland { width:36px; height:10px; background:black; border-radius:8px; margin:0 auto 4px; }
.svo-pbody img { width:100%; border-radius:12px; display:block; }
.svo-phomebar { width:28px; height:3px; background:rgba(255,255,255,.25); border-radius:2px; margin:4px auto 0; }
.svo-pglow { position:absolute; bottom:-12px; left:50%; transform:translateX(-50%); width:70px; height:20px; background:radial-gradient(ellipse,rgba(30,111,217,.4),transparent 70%); filter:blur(6px); }
.svo-badge { position:absolute; bottom:-28px; left:0; right:0; text-align:center; background:rgba(255,255,255,.95); border:1px solid var(--border); border-radius:100px; padding:5px 14px; font-size:.73rem; font-weight:600; color:var(--text); display:flex; align-items:center; justify-content:center; gap:6px; box-shadow:var(--shadow); }

/* Step 4: Customer assignment */
.sv-customer { display:flex; flex-direction:column; align-items:center; gap:16px; position:relative; }
.svc-phone { position:relative; }
.svc-pbody { width:180px; background:#1a1a1a; border-radius:36px; padding:12px 10px; box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.1); }
.svc-island { width:72px; height:22px; background:black; border-radius:14px; margin:0 auto 8px; }
.svc-screen { border-radius:24px; overflow:hidden; }
.svc-screen img { width:100%; display:block; }
.svc-homebar { width:48px; height:4px; background:rgba(255,255,255,.25); border-radius:2px; margin:8px auto 0; }
.svc-glow { position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); width:140px; height:36px; background:radial-gradient(ellipse,rgba(30,111,217,.4),transparent 70%); filter:blur(10px); }
.svc-badge { display:flex; align-items:center; gap:8px; background:white; border:1px solid var(--border); border-radius:14px; padding:12px 18px; font-size:.82rem; font-weight:600; color:var(--text); box-shadow:var(--shadow); animation:done-pop .5s ease both; }
.svc-badge i { font-size:1.1rem; }

/* Step 5: Order creation */
.sv-order { display:flex; flex-direction:column; align-items:center; gap:16px; }
.svo2-phone { position:relative; }
.svo2-pbody { width:200px; background:#1a1a1a; border-radius:38px; padding:13px 11px; box-shadow:0 20px 56px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.1); }
.svo2-island { width:80px; height:24px; background:black; border-radius:16px; margin:0 auto 8px; }
.svo2-screen { border-radius:26px; overflow:hidden; }
.svo2-screen img { width:100%; display:block; }
.svo2-homebar { width:52px; height:4px; background:rgba(255,255,255,.25); border-radius:2px; margin:9px auto 0; }
.svo2-glow { position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); width:160px; height:40px; background:radial-gradient(ellipse,rgba(16,185,129,.4),transparent 70%); filter:blur(10px); }
.svo2-done { display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,var(--emerald),#059669); border-radius:14px; padding:14px 18px; color:white; box-shadow:0 8px 24px rgba(16,185,129,.35); animation:done-pop .5s .3s ease both; }
.svo2-done i { font-size:1.5rem; flex-shrink:0; }
.svo2-done strong { display:block; font-size:.9rem; font-weight:700; }
.svo2-done span { font-size:.75rem; opacity:.85; }
.svo2-badge { display:flex; align-items:center; gap:8px; background:white; border:1px solid var(--border); border-radius:100px; padding:7px 16px; font-size:.78rem; font-weight:600; color:var(--text); box-shadow:var(--shadow); }

/* ===== ZUGANGSWEGE ===== */
.zug-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.zug-card { background:white; border-radius:var(--r); border:1px solid var(--border); padding:36px; display:flex; flex-direction:column; gap:28px; transition:box-shadow .3s,transform .3s; }
.zug-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.zug-card-top h3 { font-size:1.4rem; font-weight:800; margin-bottom:8px; }
.zug-card-top p  { font-size:.88rem; color:var(--muted); line-height:1.65; }
.zug-badge { display:inline-flex; align-items:center; gap:7px; font-size:.75rem; font-weight:700; padding:6px 14px; border-radius:100px; margin-bottom:12px; }
.zug-office { background:var(--bg2); color:var(--blue); }
.zug-mobile { background:#f3f0ff; color:var(--violet); }
.zug-features { list-style:none; display:flex; flex-direction:column; gap:10px; }
.zug-features li { display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--muted); }
.zug-features li i { color:var(--emerald); font-size:.78rem; flex-shrink:0; }
.zug-features-mobile li i { color:var(--violet); }

/* Monitor mockup */
.monitor-wrap { display:flex; flex-direction:column; align-items:center; position:relative; }
.monitor-display { width:100%; background:#1a1a2e; border-radius:12px 12px 0 0; padding:10px 10px 0; box-shadow:0 0 0 1px rgba(0,0,0,.18); }
.monitor-chrome { background:#2c2c3e; border-radius:8px 8px 0 0; padding:8px 12px; display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.monitor-dots { display:flex; gap:5px; }
.md { width:12px; height:12px; border-radius:50%; display:inline-block; }
.md.rd { background:#ff5f57; } .md.yw { background:#febc2e; } .md.gn { background:#28c840; }
.monitor-url-bar { flex:1; background:rgba(255,255,255,.08); border-radius:6px; padding:4px 10px; font-size:.68rem; color:rgba(255,255,255,.45); display:flex; align-items:center; gap:5px; }
.monitor-screen { position:relative; overflow:hidden; }
.monitor-screen img { width:100%; display:block; }
.monitor-screen-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 75%,rgba(26,26,46,.5)); pointer-events:none; }
.monitor-chin { width:100%; height:10px; background:linear-gradient(to bottom,#2a2a3e,#222); border-radius:0 0 4px 4px; }
.monitor-neck { width:18%; height:24px; background:linear-gradient(to bottom,#ccc,#bbb); margin:0 auto; }
.monitor-base { width:50%; height:8px; background:linear-gradient(to bottom,#bbb,#aaa); border-radius:0 0 8px 8px; margin:0 auto; box-shadow:0 4px 12px rgba(0,0,0,.12); }
.monitor-glow { position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); width:60%; height:30px; background:radial-gradient(ellipse,rgba(30,111,217,.3),transparent 70%); filter:blur(12px); }

/* iPhone mockup */
.iphone-wrap { display:flex; justify-content:center; position:relative; }
.iphone-body { width:220px; background:linear-gradient(145deg,#2d2d2d,#1a1a1a); border-radius:50px; padding:15px 12px 14px; box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 0 2px rgba(0,0,0,.5),0 28px 64px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1); position:relative; }
.iphone-side-btns { position:absolute; left:-3px; top:90px; width:3px; height:32px; background:#333; border-radius:2px 0 0 2px; box-shadow:0 44px 0 #333,0 64px 0 #333; }
.iphone-power-btn { position:absolute; right:-3px; top:110px; width:3px; height:56px; background:#333; border-radius:0 2px 2px 0; }
.dynamic-island { width:110px; height:32px; background:black; border-radius:20px; margin:0 auto 12px; }
.iphone-screen-area { border-radius:38px; overflow:hidden; background:black; }
.iphone-screen-area img { width:100%; display:block; }
.iphone-home-bar { width:64px; height:4px; background:rgba(255,255,255,.28); border-radius:3px; margin:12px auto 0; }
.iphone-glow { position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); width:180px; height:40px; background:radial-gradient(ellipse,rgba(139,92,246,.4),transparent 70%); filter:blur(14px); }

/* ===== CTA ===== */
.cta-sec { background:linear-gradient(140deg,#0c2d6b 0%,#1a5fc8 55%,#2d8fff 100%); position:relative; overflow:hidden; }
.cta-shapes { position:absolute; inset:0; pointer-events:none; }
.cs { position:absolute; border-radius:50%; background:rgba(255,255,255,.055); }
.cs1 { width:500px; height:500px; top:-200px; right:-100px; }
.cs2 { width:360px; height:360px; bottom:-140px; left:-80px; }
.cta-box { text-align:center; position:relative; z-index:2; max-width:680px; margin:0 auto; }
.cta-ico { width:72px; height:72px; background:rgba(255,255,255,.15); border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:white; margin:0 auto 24px; backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25); }
.cta-box h2 { font-size:clamp(1.6rem,3vw,2.25rem); font-weight:800; color:white; margin-bottom:12px; }
.cta-box > p { color:rgba(255,255,255,.78); font-size:.98rem; margin-bottom:36px; }
.cta-form { display:flex; flex-direction:column; gap:12px; max-width:560px; margin:0 auto 16px; }
.cta-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cta-in { padding:13px 18px; border-radius:12px; border:2px solid rgba(255,255,255,.22); background:rgba(255,255,255,.12); color:white; font-size:.9rem; font-family:inherit; backdrop-filter:blur(8px); transition:border .2s,background .2s; }
.cta-in::placeholder { color:rgba(255,255,255,.5); }
.cta-in:focus { outline:none; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.18); }
.cta-ta { resize:vertical; min-height:80px; }
.cta-form .btn-primary { background:white; color:var(--blue); justify-content:center; box-shadow:0 6px 24px rgba(0,0,0,.2); }
.cta-form .btn-primary:hover { background:#f0f7ff; }
.cta-note { color:rgba(255,255,255,.5); font-size:.78rem; display:flex; align-items:center; justify-content:center; gap:6px; margin-top:16px!important; }

/* ===== CTA SUCCESS MESSAGE ===== */
.cta-success {
  display:none;
  flex-direction:column; align-items:center; text-align:center;
  padding:40px 32px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r);
  backdrop-filter:blur(12px);
  max-width:420px; margin:0 auto;
  animation:done-pop .5s ease both;
}
.cta-success.visible { display:flex; }
.cta-success-ico {
  width:76px; height:76px;
  background:rgba(16,185,129,.2);
  border:2px solid rgba(74,222,128,.5);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; color:#4ade80;
  margin-bottom:20px;
  box-shadow:0 0 0 8px rgba(16,185,129,.08);
}
.cta-success h3 { font-size:1.4rem; font-weight:800; color:white; margin-bottom:10px; }
.cta-success > p { font-size:.98rem; color:rgba(255,255,255,.8); line-height:1.6; }

/* ===== FOOTER ===== */
.footer { background:#080f1e; padding:32px 0; }
.footer-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.f-logo { display:flex; align-items:center; gap:10px; color:white; font-weight:600; font-size:1.05rem; }
.f-logo i { color:var(--blue-light); }
.f-logo strong { color:var(--blue-light); }
.footer p { color:rgba(255,255,255,.38); font-size:.83rem; }
.f-links { display:flex; gap:20px; }
.f-links a { color:rgba(255,255,255,.38); text-decoration:none; font-size:.83rem; transition:color .2s; }
.f-links a:hover { color:white; }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
  .zug-grid { grid-template-columns:1fr; }
  .iphone-wrap { max-width:280px; margin:0 auto; }
  .ps-timeline::before { left:40px; }
  .ps-step { grid-template-columns:80px 1fr; gap:0 24px; }
  .ps-step .ps-text,.ps-flip .ps-text { grid-column:2; grid-row:1; }
  .ps-step .ps-center,.ps-flip .ps-center { grid-column:1; grid-row:1; }
  .ps-step .ps-vis,.ps-flip .ps-vis { grid-column:2; grid-row:2; margin-top:24px; }
  .ps-timeline::before { left:36px; top:40px; bottom:40px; }
}
@media (max-width:900px) {
  .hero-inner { grid-template-columns:1fr; text-align:center; gap:48px; }
  .hero-sub,.hero-tagline { max-width:100%; }
  .hero-btns,.hero-stats { justify-content:center; }
  .fc1 { right:-10px; } .fc2 { left:-10px; }
}
@media (max-width:768px) {
  .nav-phone { display:none; }
  /* position:static damit nav-links relativ zu .navbar (fixed) positioniert wird, nicht zum Container */
  .nav-container { position:static; }
  .nav-links {
    display:none;
    flex-direction:column;
    align-items:stretch;
    position:absolute; top:100%; left:0; right:0;
    background:white;
    box-shadow:0 8px 32px rgba(0,0,0,.12);
    padding:8px 16px 16px;
    border-top:1px solid var(--border);
    z-index:999;
  }
  .nav-links.open { display:flex; }
  .nav-links li { width:100%; }
  .nav-links a { color:var(--text)!important; width:100%; display:block; padding:12px 16px; border-radius:8px; }
  .btn-nav { background:var(--blue)!important; color:white!important; border-color:transparent!important; text-align:center; border-radius:10px!important; display:block; margin-top:4px; }
  .nav-toggle { display:flex; }
  .cta-row { grid-template-columns:1fr; }
  .sv-transfer { flex-direction:column; text-align:center; }
  .svt-flow { width:100%; }
  .svo-laptop { max-width:300px; }
}
@media (max-width:520px) {
  .hero-stats { flex-direction:column; gap:12px; }
  .stat-sep { width:50px; height:1px; }
  .fc1,.fc2 { display:none; }
  .footer-row { flex-direction:column; text-align:center; }
  .svo2-phone,.svc-phone { transform:scale(.85); }
}

/* ===== PREMIUM MOTION UPGRADE ===== */

/* Kein verschwommener Hover */
*,
*::before,
*::after{
  -webkit-font-smoothing:antialiased;
}

.fade-up,
.fade-up.visible,
.btn,
.zug-card,
.cta-box,
.ps-step,
.ps-node,
.phone-frame,
.monitor-display,
.iphone-body,
.cta-in,
.navbar,
.nav-links a{
  filter:none!important;
}

/* Hero lebendiger */
.hero-visual{
  will-change:transform;
}

.phone-frame{
  animation:phoneFloat 5.5s ease-in-out infinite;
  position:relative;
}

@keyframes phoneFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.phone-screen{
  position:relative;
  overflow:hidden;
}

.phone-screen::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.18),transparent 75%);
  transform:translateX(-120%);
  animation:screenScan 4.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes screenScan{
  0%,42%{transform:translateX(-120%)}
  76%,100%{transform:translateX(120%)}
}

/* Gesprächszeilen erscheinen lebendiger */
.transcript .tl{
  opacity:0;
  transform:translateY(10px);
  animation:chatLineIn 9s ease-in-out infinite;
}

.transcript .tl:nth-child(1){animation-delay:.4s}
.transcript .tl:nth-child(2){animation-delay:2.2s}
.transcript .tl:nth-child(3){animation-delay:4s}

@keyframes chatLineIn{
  0%{opacity:0;transform:translateY(10px)}
  12%,70%{opacity:1;transform:translateY(0)}
  100%{opacity:.62}
}

/* Hero Hintergrund mit mehr Tiefe */
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.13),transparent 25%),
    radial-gradient(circle at 80% 72%,rgba(255,255,255,.10),transparent 28%);
  pointer-events:none;
  animation:heroAtmosphere 14s ease-in-out infinite;
}

@keyframes heroAtmosphere{
  0%,100%{opacity:.8;transform:scale(1)}
  50%{opacity:1;transform:scale(1.04)}
}

.hero-inner{
  position:relative;
  z-index:2;
}

/* Buttons hochwertiger */
.btn-primary{
  background:linear-gradient(135deg,var(--blue),#2d8fff,var(--blue-dark));
  background-size:220% 220%;
  animation:btnGradient 6s ease infinite;
}

@keyframes btnGradient{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* Prozess-Timeline aktiver */
.ps-timeline::before{
  background:linear-gradient(to bottom,transparent,var(--blue-light),var(--cyan),var(--blue),transparent)!important;
  background-size:100% 220%!important;
  animation:timelineFlow 4.5s linear infinite;
  opacity:.72;
}

@keyframes timelineFlow{
  from{background-position:0 0}
  to{background-position:0 220%}
}

.ps-step{
  transition:opacity .45s ease, transform .45s ease;
}

.ps-step.is-active .ps-node{
  box-shadow:0 0 0 12px rgba(30,111,217,.12),0 0 36px rgba(30,111,217,.50);
  transform:scale(1.13);
}

.ps-step.is-active .ps-text,
.ps-step.is-active .ps-vis{
  transform:translateY(-4px);
}

.ps-step.is-active .ps-num-tag{
  background:linear-gradient(135deg,var(--blue),#2d8fff);
  color:#fff!important;
  opacity:1;
  padding:4px 10px;
  border-radius:999px;
}

.ps-text,
.ps-vis,
.ps-node,
.ps-num-tag{
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease, color .35s ease, opacity .35s ease;
}

/* Karten und Mockups cleaner hover */
.zug-card,
.cta-box,
.monitor-display,
.iphone-body,
.phone-frame,
.sva-call-card,
.sv-transfer,
.svc-badge,
.svo2-done{
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.zug-card:hover,
.cta-box:hover{
  transform:translateY(-7px);
  box-shadow:0 26px 68px rgba(30,111,217,.18);
}

.zug-card:hover .monitor-display,
.zug-card:hover .iphone-body{
  transform:translateY(-4px);
}

/* Scan-Effekt auf Desktop/Mobile Screens */
.monitor-screen,
.iphone-screen-area,
.svo-lscreen,
.svc-screen,
.svo2-screen{
  position:relative;
  overflow:hidden;
}

.monitor-screen::after,
.iphone-screen-area::after,
.svo-lscreen::after,
.svc-screen::after,
.svo2-screen::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.22),transparent 75%);
  transform:translateX(-120%);
  animation:deviceScan 5.4s ease-in-out infinite;
  pointer-events:none;
}

@keyframes deviceScan{
  0%,45%{transform:translateX(-120%)}
  75%,100%{transform:translateX(120%)}
}

/* CTA schöner */
.cta-ico{
  animation:ctaPulse 2.8s ease-in-out infinite;
}

@keyframes ctaPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.22)}
  50%{box-shadow:0 0 0 16px rgba(255,255,255,0)}
}

.cta-in:hover,
.cta-in:focus{
  transform:translateY(-1px);
}

/* Dezenter globaler KI-Orb */
body::before{
  content:'';
  position:fixed;
  width:380px;
  height:380px;
  right:-170px;
  top:180px;
  background:radial-gradient(circle,rgba(30,111,217,.10),transparent 70%);
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  animation:bgOrb 16s ease-in-out infinite;
}

@keyframes bgOrb{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-42px,34px) scale(1.15)}
}

/* Mobile optimiert */
@media(max-width:1024px){
  .ps-step.is-active .ps-text,
  .ps-step.is-active .ps-vis{
    transform:none;
  }
}

@media(max-width:768px){
  .phone-frame{
    animation:phoneFloat 6s ease-in-out infinite;
  }

  .ps-step.is-active .ps-node{
    transform:scale(1.08);
    box-shadow:0 0 0 8px rgba(30,111,217,.13),0 0 26px rgba(30,111,217,.40);
  }

  .ps-timeline::before{
    opacity:.9;
  }

  .zug-card:hover,
  .cta-box:hover{
    transform:translateY(-3px);
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}