/* ============================================
   LokalFlow Landingpage V2 — Designsystem
   ============================================ */

:root{
  /* Surfaces */
  --bg: #0a0f1a;
  --bg-1: #0d1520;
  --bg-2: #111c2c;
  --bg-soft: #0c1320;
  --surface: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.06);
  --surface-hi: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.08);
  --border-hi: rgba(20,184,166,0.22);

  /* Text */
  --text: #e7eef7;
  --text-2: #b6c2d4;
  --text-3: #7e8aa1;

  /* Brand & status */
  --teal: #14b8a6;
  --teal-2: #2dd4bf;
  --teal-soft: rgba(20,184,166,0.14);
  --emerald: #34d399;
  --emerald-soft: rgba(52,211,153,0.14);
  --lime: #34d399;
  --lime-soft: rgba(52,211,153,0.14);
  --amber: #f59e0b;
  --amber-soft: rgba(245,158,11,0.14);
  --red: #fb7185;
  --red-soft: rgba(251,113,133,0.14);
  --indigo: #818cf8;
  --purple: #a78bfa;
  --pink: #f472b6;

  /* Effects */
  --shadow-soft: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 60px -30px rgba(0,0,0,0.6);
  --shadow-hi: 0 20px 60px -20px rgba(20,184,166,0.35);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 28px;

  --container: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  max-width:100vw;
}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  max-width:100vw;
  position:relative;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* ============ Typography ============ */
h1,h2,h3,h4{ font-weight:700; letter-spacing:-0.02em; line-height:1.1; margin:0; }
h1{ font-size:clamp(2.4rem, 5vw, 4rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.8rem); }
h3{ font-size:clamp(1.4rem, 2.6vw, 1.9rem); }
h4{ font-size:clamp(1.05rem, 1.6vw, 1.2rem); }
p{ margin:0; color:var(--text-2); }

.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal); font-weight:600;
  padding:6px 12px;
  border:1px solid var(--border-hi);
  border-radius:999px;
  background:var(--teal-soft);
  margin-bottom:14px;
}

.grad-teal{
  background:linear-gradient(135deg,#14b8a6 0%,#2dd4bf 50%,#14b8a6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-lime{
  background:linear-gradient(135deg,#34d399 0%,#a7f3d0 50%,#34d399 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-amber{
  background:linear-gradient(135deg,#f59e0b 0%,#fbbf24 50%,#f59e0b 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-teal-text{ color:var(--teal); }
.grad-lime-text{ color:var(--lime); }
.grad-amber-text{ color:var(--amber); }

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px;
  border-radius:12px;
  font-weight:600; font-size:.95rem;
  transition:transform .15s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn-lg{ padding:14px 22px; font-size:1rem; border-radius:14px; }
.btn-sm{ padding:8px 14px; font-size:.85rem; border-radius:10px; }
.btn-block{ width:100%; }

.btn-primary{
  background:linear-gradient(135deg,#14b8a6,#0891b2);
  color:#001018;
  box-shadow:0 10px 30px -10px rgba(20,184,166,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 16px 40px -10px rgba(20,184,166,0.7); }

.btn-ghost{
  color:var(--text);
  border-color:var(--border);
  background:var(--surface);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{ border-color:var(--border-hi); background:var(--surface-hi); transform:translateY(-1px); }

.btn-amber{
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:#1a0f00;
  box-shadow:0 8px 22px -10px rgba(245,158,11,0.6);
}

.play-ico{ font-size:.7em; }

/* ============ Status Chips ============ */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  letter-spacing:.04em;
  border:1px solid transparent;
}
.chip-teal{ background:var(--teal-soft); color:var(--teal-2); border-color:rgba(20,184,166,0.3); }
.chip-lime{ background:var(--lime-soft); color:#86efac; border-color:rgba(52,211,153,0.3); }
.chip-amber{ background:var(--amber-soft); color:#fbbf24; border-color:rgba(245,158,11,0.3); }
.chip-red{ background:var(--red-soft); color:#fda4af; border-color:rgba(251,113,133,0.3); }

.badge-new{
  display:inline-block; font-size:.6rem; font-weight:700;
  padding:2px 7px; border-radius:6px; margin-left:6px;
  background:linear-gradient(135deg,#f472b6,#ec4899);
  color:white; letter-spacing:.08em;
  vertical-align:middle;
}

/* ============ Layout helpers ============ */
.section{ padding:clamp(60px,8vw,110px) 0; position:relative; }
.section-soft{ background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.025)); }
.section-head{ text-align:center; max-width:760px; margin:0 auto clamp(40px,5vw,64px); }
.section-head p{ margin-top:14px; font-size:1.05rem; }

/* ============ Reveal animation ============ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation:none !important; transition:none !important; }
}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  padding:14px 0;
  background:rgba(5,10,20,0.55);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .2s ease, border-color .2s ease;
}
.nav.scrolled{ background:rgba(5,10,20,0.85); border-bottom-color:var(--border); }

/* Mobile-Menü offen */
.nav.open .nav-links{ display:flex; }
.nav.open .nav-cta{ display:inline-flex; }

/* Demo-Card aktiver Zustand */
.demo-card.active{ box-shadow:0 0 0 1px var(--teal), 0 18px 50px -20px rgba(25,227,194,0.35); }

/* Hub-Satellit Hover */
.hub-sat.hot{ transform:scale(1.08); transition:transform .25s ease; }

/* WhatsApp-Mockup Eingangs-Animation */
@keyframes waPop { from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:translateY(0) } }
.wa-mockup.animate .wa-msg{ animation:waPop .5s ease both; }
.wa-mockup.animate .wa-msg:nth-child(2){ animation-delay:.4s }
.wa-mockup.animate .wa-msg:nth-child(3){ animation-delay:.8s }
.wa-mockup.animate .wa-msg:nth-child(4){ animation-delay:1.2s }
.nav-inner{
  max-width:var(--container); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:24px;
}
.logo{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:1.05rem;
}
.logo img{ display:block; width:auto; height:32px; object-fit:contain; border-radius:8px; }
.logo .logo-mark{ height:32px; width:32px; }
.footer-brand .logo img{ height:26px; }
.final-logo{ width:160px; height:160px; object-fit:cover; border-radius:50%; filter:drop-shadow(0 0 32px rgba(20,184,166,0.45)); }
.nav-links{
  display:flex; gap:28px; margin-left:24px; flex:1;
  font-size:.95rem; color:var(--text-2);
}
.nav-links a{ position:relative; padding:6px 0; transition:color .2s ease; }
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg, var(--teal), transparent);
  border-radius:2px;
}
.nav-cta{ display:flex; gap:10px; align-items:center; }
.nav-burger{ display:none; }

@media (max-width:980px){
  .nav-links{ display:none; }
  .nav-burger{
    display:flex; flex-direction:column; gap:4px; padding:8px;
    margin-left:auto;
  }
  .nav-burger span{ width:22px; height:2px; background:var(--text); border-radius:2px; }
  .nav-cta .btn-ghost{ display:none; }

  .nav.open .nav-links{
    display:flex; flex-direction:column; gap:4px;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(5,10,20,0.98); border-bottom:1px solid var(--border);
    padding:16px 20px; margin:0;
    backdrop-filter:blur(12px);
  }
  .nav.open .nav-links a{ padding:10px 0; font-size:1rem; color:var(--text-2); }
  .nav.open .nav-links a:hover{ color:var(--teal); }

  /* Beta-CTA im aufgeklappten Mobile-Menü anzeigen */
  .nav.open .nav-cta{
    display:flex; flex-direction:column; gap:8px;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(5,10,20,0.98);
    border-bottom:1px solid var(--border);
    padding:0 20px 16px; margin:0;
    backdrop-filter:blur(12px);
    z-index:5;
  }
  .nav.open .nav-cta .btn-ghost,
  .nav.open .nav-cta .btn-primary{ display:inline-flex; justify-content:center; }
  .nav.open .nav-links{ padding-bottom:8px; border-bottom:none; }
}

/* ============ HERO ============ */
.hero{
  position:relative; padding:clamp(88px, 10vw, 116px) 0 40px;
  overflow:hidden;
}
.bg-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(20,184,166,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,184,166,0.05) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
}
.bg-glow{
  position:absolute; pointer-events:none; filter:blur(80px); opacity:.45;
  border-radius:50%;
}
.bg-glow-1{ width:520px; height:520px; background:radial-gradient(circle,#14b8a6,transparent 60%); top:-100px; left:-150px; }
.bg-glow-2{ width:420px; height:420px; background:radial-gradient(circle,#34d399,transparent 60%); bottom:-100px; right:-100px; opacity:.3; }

/* Hero V2: Headline zentriert oben, darunter Stage mit Phone+Hub */
.hero-headline{
  max-width: 1180px;
  margin: 0 auto 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-headline .hero-title{
  text-wrap: balance;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  line-height:1.05;
}
.hero-pre{
  display:block;
  font-size:clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight:500;
  letter-spacing:0.01em;
  color:var(--text-2);
  text-transform:none;
}
.hero-main{
  display:block;
  font-size:clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight:700;
  letter-spacing:-0.025em;
  line-height:1.06;
  text-wrap:balance;
  white-space:normal;
}
@media (min-width:1100px){
  .hero-main{ white-space:nowrap; }
}
.hero-headline .hero-sub{ margin-left: auto; margin-right: auto; margin-top:6px; }
.hero-headline .hero-ctas{ justify-content: center; }
.hero-headline .hero-trust{ justify-content: center; }

.hero-stage{
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.hero-stage .phone-frame{ order: 1; justify-self: end; max-width:360px; padding:14px 12px 24px; border-radius:40px; }
.hero-stage .hero-hub{ order: 2; justify-self: start; width: 100%; }
.hero-stage .hub-stage{ max-width:560px; margin-left:0; }
@media (max-width:1080px){
  .hero-stage{ grid-template-columns: 1fr; gap: 40px; }
  .hero-stage .phone-frame{ justify-self: center; order: 2; }
  .hero-stage .hero-hub{ justify-self: center; order: 1; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.85rem; font-weight:500;
  padding:7px 14px; border-radius:999px;
  background:var(--teal-soft); color:var(--teal-2);
  border:1px solid var(--border-hi);
  margin-bottom:14px;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 12px var(--teal); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.5; transform:scale(1.4); } }

.hero-title{ margin-bottom:12px; }
.hero-sub{ font-size:1.1rem; color:var(--text-2); max-width:640px; margin-bottom:20px; line-height:1.5; }

.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.hero-trust{
  display:flex; gap:16px; flex-wrap:wrap;
  font-size:.88rem; color:var(--text-3);
}
.hero-trust span{ display:inline-flex; align-items:center; gap:7px; }
.ico-check{ width:14px; height:14px; color:var(--lime); }

/* ============ HUB ============ */
.hero-hub{
  position:relative;
  display:flex; flex-direction:column; gap:24px;
  align-items:center;
}
.hub-stage{
  position:relative;
  width:100%; max-width:520px; aspect-ratio:1;
  margin:0 auto;
}
.hub-orbits{ width:100%; height:100%; position:absolute; inset:0; }

.hub-rays line{
  stroke-dasharray:4 4;
  animation:dash 12s linear infinite;
}
@keyframes dash{ to{ stroke-dashoffset:-100; } }

.hub-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:210px; height:210px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(20,184,166,0.2), rgba(20,184,166,0.05) 60%, transparent);
  display:grid; place-items:center;
  z-index:2;
}
.hub-core::before{
  content:''; position:absolute; inset:18px;
  border-radius:50%; border:1.5px solid var(--teal);
  box-shadow:0 0 50px rgba(20,184,166,0.5), inset 0 0 30px rgba(20,184,166,0.18);
  animation:hubPulse 3s ease-in-out infinite;
}
@keyframes hubPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.05); opacity:.85; } }
.hub-core-inner{
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  text-align:center;
  padding:0 18px;
  max-width:170px;
}
.hub-core-inner strong{ font-size:1.05rem; font-weight:700; line-height:1.1; }
.hub-core-inner span{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); }
.hub-core-inner em{
  font-size:.62rem; color:var(--text-3); font-style:normal;
  display:inline-flex; align-items:center; gap:5px; margin-top:4px;
  white-space:nowrap;
}
@media (max-width: 880px){
  /* Hub-Bereich auf Mobile komplett ausblenden — Phone-Frame ist Visual genug */
  .hero-hub{ display:none; }
}
.pulse-dot{ width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime); animation:pulse 1.6s infinite; }

.sat{
  position:absolute;
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:rgba(10,18,31,0.85);
  border:1px solid var(--border-hi);
  border-radius:12px;
  backdrop-filter:blur(10px);
  font-size:.78rem;
  box-shadow:0 12px 30px -12px rgba(0,0,0,0.7);
  white-space:nowrap;
  animation:satFloat 6s ease-in-out infinite;
}
.sat .sat-ico{ font-size:1.1rem; }
.sat b{ display:block; font-size:.82rem; font-weight:600; }
.sat i{ display:block; font-size:.68rem; color:var(--text-3); font-style:normal; }

@keyframes satFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

.sat-tl{ top:6%; left:6%; animation-delay:0s; }
.sat-tr{ top:6%; right:6%; animation-delay:.6s; }
.sat-l{ top:42%; left:-2%; animation-delay:1.2s; }
.sat-r{ top:42%; right:-2%; animation-delay:1.8s; }
.sat-bl{ bottom:6%; left:6%; animation-delay:2.4s; }
.sat-br{ bottom:6%; right:6%; animation-delay:3s; }
.sat-t{ top:-3%; left:50%; transform:translateX(-50%); animation-delay:.3s; }
.sat-b{ bottom:-3%; left:50%; transform:translateX(-50%); animation-delay:1.5s; }
.sat-t,.sat-b{ animation-name:satFloatX; }
@keyframes satFloatX{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(-6px); }
}

/* ============ Phone-Frame (umschließt wa-card) ============ */
.phone-frame{
  position:relative;
  width:100%;
  max-width:380px;
  margin:0 auto;
  padding:16px 14px 28px;
  background:linear-gradient(180deg,#0a0f18 0%,#070b13 100%);
  border:2px solid #1a2230;
  border-radius:42px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 28px 60px rgba(0,0,0,0.55),
    0 0 0 6px rgba(0,0,0,0.4);
}
.phone-frame::before{
  /* subtiler Glow um den Phone-Frame */
  content:""; position:absolute; inset:-20px;
  background:radial-gradient(60% 50% at 50% 30%, rgba(20,184,166,0.18), transparent 70%);
  z-index:-1;
  border-radius:60px;
  pointer-events:none;
}
.phone-notch{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:110px; height:24px;
  background:#000;
  border-radius:0 0 16px 16px;
  z-index:2;
}
.phone-notch::after{
  /* Kamera-Punkt */
  content:""; position:absolute;
  right:18px; top:7px;
  width:8px; height:8px; border-radius:50%;
  background:#0a1018;
  box-shadow:inset 0 0 0 1px rgba(20,184,166,0.4);
}
.phone-statusbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 22px 10px;
  font-size:.72rem; font-weight:600;
  color:var(--text);
  margin-top:18px;
}
.phone-time{ letter-spacing:.02em; }
.phone-icons{ display:inline-flex; gap:5px; align-items:center; color:var(--text); }
.phone-icons svg{ opacity:.85; }
.phone-channels{
  display:flex; gap:6px; flex-wrap:wrap;
  padding:4px 10px 12px;
  justify-content:center;
}
.channel-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  font-size:.72rem; font-weight:600;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;
  color:var(--text);
}
.channel-pill svg{ flex-shrink:0; }
.phone-home{
  /* Home-Indicator-Bar unten */
  position:absolute; bottom:9px; left:50%; transform:translateX(-50%);
  width:120px; height:4px;
  background:rgba(255,255,255,0.4);
  border-radius:999px;
}

/* ============ WhatsApp Card (im Phone-Frame) ============ */
.wa-card{
  width:100%;
  background:linear-gradient(180deg,#0b141f,#091221);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.wa-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
  background:rgba(255,255,255,0.03);
  border-bottom:1px solid var(--border);
}
.wa-head-l{ display:flex; align-items:center; gap:10px; }
.wa-avatar{
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--lime));
  display:grid; place-items:center;
  font-weight:700; color:#001018;
}
.wa-head-l b{ font-size:.95rem; }
.wa-head-l i{ display:block; font-size:.72rem; color:var(--lime); font-style:normal; }
.verified{ color:var(--teal); font-size:.85em; }
.wa-head-r{ color:var(--text-3); font-size:1rem; letter-spacing:.4em; }

.wa-body{ padding:18px; display:flex; flex-direction:column; gap:12px; }
.wa-msg{
  position:relative;
  max-width:78%;
  padding:10px 14px;
  border-radius:14px;
  font-size:.9rem; line-height:1.5;
}
.wa-msg-out{
  align-self:flex-end;
  background:linear-gradient(135deg,#0e3a44,#0b2a32);
  border:1px solid rgba(20,184,166,0.15);
  border-bottom-right-radius:4px;
}
.wa-msg-in{
  align-self:flex-start;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  border-bottom-left-radius:4px;
}
.wa-msg ul{ margin-top:8px; display:flex; flex-direction:column; gap:8px; padding:0; list-style:none; }
.wa-msg ul li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:.82rem; line-height:1.35;
}
.wa-li-ico{ flex: 0 0 auto; font-size: 1rem; line-height: 1.2; }
.wa-li-text{ flex: 1 1 auto; min-width: 0; }
.wa-li-text b{ display:block; font-size:.82rem; font-weight:600; line-height:1.3; }
.wa-li-text i{ display:block; font-size:.72rem; color:var(--text-3); font-style:normal; margin-top:2px; line-height:1.3; }
.wa-time{
  display:block; font-size:.65rem; color:var(--text-3);
  text-align:right; margin-top:5px;
}
.wa-quick{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.wa-quick button{
  padding:7px 12px;
  font-size:.78rem; font-weight:500;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border-hi);
  border-radius:999px;
  color:var(--text);
  transition:background .2s;
}
.wa-quick button:hover{ background:var(--teal-soft); }

/* ============ AGENT PROCESS ROW (Icon + Text, kein Außenrahmen) ============ */
.agent-flow-head{
  text-align:center;
  max-width:640px;
  margin:60px auto 28px;
}
.agent-flow-head .kicker{ display:inline-block; margin-bottom:8px; }
.agent-flow-head p{
  font-size:.95rem; color:var(--text-3);
  line-height:1.5;
}
.process-row{
  list-style:none;
  margin:0 auto;
  padding:14px 0 8px;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:0;
  max-width:1080px;
}
.pstep{
  position:relative;
  flex:1 1 0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px;
  padding:0 6px;
  /* Start-Zustand */
  opacity:0;
  transform:translateY(8px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i, 0) * 140ms);
}
.pstep::after{
  /* Verbindungslinie nach rechts */
  content:"";
  position:absolute;
  top:28px;
  left:calc(50% + 32px);
  right:calc(-50% + 32px);
  height:1px;
  background:linear-gradient(90deg, rgba(20,184,166,0.45), rgba(20,184,166,0.05));
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s ease;
  transition-delay:calc(var(--i, 0) * 140ms + 200ms);
}
.pstep:last-child::after{ display:none; }

.pstep-ico{
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(20,184,166,0.22), rgba(20,184,166,0.10));
  border:1px solid rgba(20,184,166,0.35);
  color:var(--teal);
  box-shadow:0 6px 18px -10px rgba(20,184,166,0.6), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.pstep b{
  display:block;
  color:var(--teal);
  font-size:.92rem; font-weight:600;
  margin-top:2px;
}
.pstep i{
  display:block;
  color:var(--text-3);
  font-style:normal;
  font-size:.78rem;
  line-height:1.4;
  max-width:160px;
}

/* Aktivierter Zustand */
.process-row.in .pstep{ opacity:1; transform:none; }
.process-row.in .pstep::after{ transform:scaleX(1); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .pstep{ opacity:1; transform:none; transition:none; }
  .pstep::after{ transform:scaleX(1); transition:none; }
}

/* ============ VS SECTION (zwei echte Karten) ============ */
.vs-grid{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:24px; align-items:stretch;
  margin-top:32px;
}
.vs-card{
  display:flex; flex-direction:column; gap:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:28px clamp(22px,2.4vw,32px);
  position:relative;
  transition:transform .25s ease, border-color .25s ease, box-shadow .3s ease;
}
.vs-card-bad{
  border-color:rgba(244,114,114,0.18);
}
.vs-card-good{
  border-color:rgba(25,227,194,0.28);
  background:linear-gradient(180deg, rgba(25,227,194,0.06), rgba(25,227,194,0.01));
  box-shadow:0 18px 60px -28px rgba(25,227,194,0.4);
}
.vs-head{ display:flex; flex-direction:column; gap:8px; }
.vs-tag{
  align-self:flex-start;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
}
.vs-tag-bad{ color:#f47272; background:rgba(244,114,114,0.1); border:1px solid rgba(244,114,114,0.22); }
.vs-tag-good{ color:var(--teal); background:var(--teal-soft); border:1px solid var(--border-hi); }
.vs-card h3{ font-size:1.4rem; font-weight:700; line-height:1.2; }
.vs-list{ list-style:none; display:flex; flex-direction:column; gap:10px; padding:0; margin:0; }
.vs-list li{
  display:grid; grid-template-columns:22px 1fr; gap:10px;
  font-size:.95rem; color:var(--text-2); line-height:1.5;
}
.vs-bullet{
  display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:7px;
  font-weight:800; font-size:.85rem;
}
.vs-bullet-bad{ color:#f47272; background:rgba(244,114,114,0.12); border:1px solid rgba(244,114,114,0.24); }
.vs-bullet-good{ color:var(--teal); background:var(--teal-soft); border:1px solid var(--border-hi); }
.vs-result{
  margin-top:auto; padding-top:14px;
  border-top:1px dashed var(--border);
  font-weight:800; font-size:1.05rem;
}
.vs-result-bad{ color:#f47272; }
.vs-result-good{
  color:var(--lime);
  background:linear-gradient(90deg, var(--teal), var(--lime));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.vs-mid{
  display:grid; place-items:center;
}
.vs-mid span{
  font-weight:800; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal);
  padding:10px 14px; border-radius:999px;
  background:var(--teal-soft);
  border:1px solid var(--border-hi);
  box-shadow:0 0 24px rgba(25,227,194,0.18);
}
@media (max-width:880px){
  .vs-grid{ grid-template-columns:1fr; gap:16px; }
  .vs-mid{ padding:4px 0; }
}

/* ============ DEMO TRACK ============ */
.demo-track{
  display:flex; gap:18px; align-items:stretch;
  overflow-x:auto;
  padding:8px max(4px, calc(50% - 180px)) 24px;  /* Inset, damit erste/letzte Karte mittig snappen */
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  mask-image:linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
/* Desktop: 3 Karten nebeneinander, mittlere snapped */
@media (min-width: 900px){
  .demo-track{
    /* Inset = 1.5 Karten + Gap, damit die mittlere Karte zentriert snappt und links+rechts je eine Karte sichtbar bleibt */
    padding:8px max(4px, calc(50% - 519px)) 24px;
  }
}
.demo-track::-webkit-scrollbar{ display:none; height:0; width:0; }
.demo-card{
  scroll-snap-align:center;
  flex:0 0 320px;
  background:linear-gradient(180deg, rgba(20,184,166,0.04), rgba(255,255,255,0.02));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:22px;
  display:flex; flex-direction:column; gap:14px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .3s ease;
}
.demo-card:hover{ transform:translateY(-4px); border-color:var(--border-hi); box-shadow:var(--shadow-hi); }
.demo-num{
  width:30px; height:30px; border-radius:8px;
  background:linear-gradient(135deg, rgba(20,184,166,0.25), rgba(20,184,166,0.1));
  border:1px solid var(--border-hi);
  display:grid; place-items:center;
  font-weight:700; color:var(--teal);
  font-size:.9rem;
}
.demo-arrow{
  display:flex; align-items:center;
  font-size:1.4rem; color:var(--teal);
  flex-shrink:0;
  align-self:center;
}
.demo-card h4{ font-size:1.05rem; }
.demo-card > p{ font-size:.85rem; color:var(--text-3); margin-top:auto; }
.demo-visual{
  background:rgba(0,0,0,0.3);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  min-height:180px;
  display:flex; flex-direction:column; gap:10px;
  justify-content:flex-start;
  font-size:.82rem;
}

/* Demo visuals */
.file-card{ display:flex; gap:10px; align-items:center; padding:8px; background:var(--surface); border-radius:8px; }
.file-card span{ font-size:1.4rem; }
.file-card b{ font-size:.85rem; }
.file-card i{ font-style:normal; font-size:.72rem; color:var(--text-3); }
.file-progress{ height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.file-progress span{ display:block; height:100%; background:linear-gradient(90deg, var(--teal), var(--lime)); transition:width 1.2s ease; }

/* Status-Line: kein Pill-Button, sondern Status-Indikator mit farbigem Dot */
.status-line{
  display:flex; align-items:center; gap:10px;
  font-size:.78rem; line-height:1.35;
  padding:8px 4px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.status-line:last-child{ border-bottom:none; }
.status-line b{ font-weight:600; color:var(--text); font-size:.82rem; flex-shrink:0; }
.status-line i{ font-style:normal; color:var(--text-3); font-size:.72rem; margin-left:auto; text-align:right; }
.status-line-muted b{ color:var(--text-2); font-weight:500; }
.status-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  box-shadow:0 0 0 3px rgba(255,255,255,0.02);
}
.status-dot-lime{ background:#34d399; box-shadow:0 0 8px rgba(52,211,153,0.6), 0 0 0 3px rgba(52,211,153,0.12); }
.status-dot-teal{ background:var(--teal); box-shadow:0 0 8px rgba(20,184,166,0.5), 0 0 0 3px rgba(20,184,166,0.12); }
.status-dot-amber{ background:#fbbf24; box-shadow:0 0 8px rgba(245,158,11,0.5), 0 0 0 3px rgba(245,158,11,0.12); }

.cb{
  max-width:90%;
  padding:8px 12px;
  border-radius:12px;
  font-size:.8rem; line-height:1.5;
  position:relative;
}
.cb i{ display:block; font-size:.65rem; color:var(--text-3); font-style:normal; margin-top:4px; }
.cb-in{ align-self:flex-start; background:var(--surface); border-bottom-left-radius:4px; }
.cb-out{ align-self:flex-end; background:linear-gradient(135deg,#0e3a44,#0b2a32); border:1px solid rgba(20,184,166,0.15); border-bottom-right-radius:4px; }
.cb-large{ font-size:.92rem; padding:14px 18px; }

.risk-card{ width:100%; background:var(--surface); border:1px solid rgba(251,113,133,0.25); border-radius:10px; padding:12px; }
.risk-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.risk-head b{ font-size:.85rem; }
.risk-body{ font-size:.78rem; color:var(--text-2); margin-bottom:10px; }

.report-card{ width:100%; background:var(--surface); border-radius:10px; padding:12px; }
.report-head{ display:flex; justify-content:space-between; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.report-head b{ font-size:.9rem; }
.report-head i{ font-size:.7rem; color:var(--text-3); font-style:normal; }
.report-card ul{ display:flex; flex-direction:column; gap:5px; font-size:.78rem; }
.report-card ul li{ display:flex; justify-content:space-between; }
.report-card ul li span{ font-weight:600; }
.report-foot{ font-size:.75rem; color:var(--text-3); margin-top:8px; display:flex; justify-content:space-between; }

.demo-controls{
  display:flex; align-items:center; justify-content:center; gap:24px;
  margin-top:24px; flex-wrap:wrap;
}
.demo-nav{ display:flex; align-items:center; gap:14px; }
.demo-btn{
  width:38px; height:38px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text); font-size:1.05rem;
  transition:background .2s;
}
.demo-btn:hover{ background:var(--surface-hi); border-color:var(--border-hi); }
.demo-dots{ display:flex; gap:6px; }
.demo-dots button{
  width:8px; height:8px; border-radius:50%;
  background:var(--surface-hi); transition:width .2s, background .2s;
}
.demo-dots button.active{ width:22px; background:var(--teal); border-radius:4px; }
@media (max-width:560px){
  .demo-controls{ gap:14px; }
}

/* ============ CAPABILITIES GRID ============ */
.cap-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
@media (max-width:1080px){ .cap-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cap-grid{ grid-template-columns:1fr; } }

.cap{
  position:relative;
  padding:26px 22px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  transition:transform .25s, border-color .25s, box-shadow .3s;
  display:flex; flex-direction:column; gap:10px;
}
.cap:hover{ transform:translateY(-4px); border-color:var(--border-hi); box-shadow:var(--shadow-hi); }
.cap-highlight{
  background:linear-gradient(180deg, rgba(244,114,182,0.08), rgba(244,114,182,0.02));
  border-color:rgba(244,114,182,0.25);
}
.cap-ico{
  width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center;
  font-size:1.4rem;
  margin-bottom:4px;
}
.cap-ico-teal{ background:rgba(20,184,166,0.15); color:var(--teal); }
.cap-ico-purple{ background:rgba(167,139,250,0.15); color:var(--purple); }
.cap-ico-pink{ background:rgba(244,114,182,0.15); color:var(--pink); }
.cap-ico-blue{ background:rgba(96,165,250,0.15); color:#60a5fa; }
.cap-ico-amber{ background:rgba(245,158,11,0.15); color:var(--amber); }
.cap-ico-rose{ background:rgba(251,113,133,0.15); color:var(--red); }
.cap-ico-indigo{ background:rgba(129,140,248,0.15); color:var(--indigo); }
.cap-ico-teal{ background:rgba(45,212,191,0.15); color:var(--teal-2); }
.cap-ico-violet{ background:rgba(196,181,253,0.15); color:#c4b5fd; }
.cap-ico-emerald{ background:rgba(52,211,153,0.15); color:#34d399; }
.cap-ico-orange{ background:rgba(251,146,60,0.15); color:#fb923c; }
.cap-ico-sky{ background:rgba(56,189,248,0.15); color:#38bdf8; }
.cap p{ font-size:.88rem; }
.cap .chip{ align-self:flex-start; margin-top:4px; }

/* ============ RADAR ============ */
.radar-grid{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:48px; align-items:center;
}
@media (max-width:1080px){ .radar-grid{ grid-template-columns:1fr; } }

.radar-copy h2{ margin-bottom:18px; }
.radar-copy p{ margin-bottom:24px; font-size:1.05rem; }
.radar-bullets{ display:flex; flex-direction:column; gap:12px; }
.radar-bullets li{ display:flex; gap:10px; align-items:center; font-size:.95rem; }
.radar-bullets .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dot-teal{ background:var(--teal); box-shadow:0 0 8px var(--teal); }
.dot-lime{ background:var(--lime); box-shadow:0 0 8px var(--lime); }
.dot-amber{ background:var(--amber); box-shadow:0 0 8px var(--amber); }

.radar-card{
  background:linear-gradient(180deg, rgba(20,184,166,0.06), rgba(20,184,166,0.02));
  border:1px solid var(--border-hi);
  border-radius:var(--r-lg);
  padding:24px;
  box-shadow:var(--shadow-hi);
  max-width:100%;
  overflow:hidden;
}
@media (max-width:560px){
  .radar-card{ padding:16px; }
  .radar-head{ flex-direction:column; gap:6px; }
  .radar-total{ text-align:left; }
  .radar-total b{ font-size:1.35rem; }
  .radar-vis{ height:160px; }
  .radar-table{ font-size:.78rem; }
  .radar-table th, .radar-table td{ padding:8px 4px; }
  .radar-table th:last-child, .radar-table td:last-child{ font-size:.7rem; }
}
.radar-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; }
.radar-head h4{ font-size:1.05rem; }
.radar-total{ text-align:right; }
.radar-total i{ display:block; font-size:.7rem; color:var(--text-3); font-style:normal; }
.radar-total b{ display:block; font-size:1.6rem; font-weight:700; color:var(--text); margin:2px 0; }
.radar-total span{ font-size:.78rem; }

.radar-vis{ margin:14px 0; height:200px; display:grid; place-items:center; }
.radar-svg{ width:100%; height:100%; }
.radar-sweep{ transform-origin:160px 100px; animation:sweep 4s linear infinite; }
@keyframes sweep{ to{ transform:rotate(360deg); } }
.radar-blips circle{ animation:blink 2.4s ease-in-out infinite; }
.radar-blips circle:nth-child(2){ animation-delay:.4s; }
.radar-blips circle:nth-child(3){ animation-delay:.8s; }
.radar-blips circle:nth-child(4){ animation-delay:1.2s; }
.radar-blips circle:nth-child(5){ animation-delay:1.6s; }
@keyframes blink{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }

.radar-table{ width:100%; border-collapse:collapse; font-size:.85rem; margin-top:10px; }
.radar-table th{ text-align:left; font-weight:600; color:var(--text-3); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; padding:8px; border-bottom:1px solid var(--border); }
.radar-table th:nth-child(2),.radar-table th:nth-child(3){ text-align:right; }
.radar-table th:last-child{ text-align:center; }
.radar-table td{ padding:10px 8px; border-bottom:1px solid var(--border); }
.radar-table td:nth-child(2),.radar-table td:nth-child(3){ text-align:right; }
.radar-table td:last-child{ text-align:center; }
.radar-table tr:last-child td{ border-bottom:none; }
.radar-table td b{ color:var(--teal); }

/* ============ INVOICE ============ */
.invoice-grid{
  display:grid; grid-template-columns:1fr 1.2fr;
  gap:36px; align-items:start;
}
@media (max-width:1080px){ .invoice-grid{ grid-template-columns:1fr; } }

.invoice-cmd{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:24px;
}
.cb-head{ display:flex; gap:10px; align-items:center; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.cb-avatar{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--lime));
  color:#001018; font-weight:700; font-size:.85rem;
  display:grid; place-items:center;
}

.voice-wave{
  display:flex; gap:3px; align-items:flex-end; height:32px;
  padding:8px 14px;
  background:rgba(0,0,0,0.3);
  border-radius:10px;
  margin-top:14px;
}
.voice-wave span{
  display:block; width:3px;
  background:linear-gradient(180deg, var(--teal-2), var(--teal));
  border-radius:2px;
  animation:wave 1.4s ease-in-out infinite;
}
.voice-wave span:nth-child(1){ height:30%; animation-delay:0s; }
.voice-wave span:nth-child(2){ height:60%; animation-delay:.1s; }
.voice-wave span:nth-child(3){ height:80%; animation-delay:.2s; }
.voice-wave span:nth-child(4){ height:50%; animation-delay:.3s; }
.voice-wave span:nth-child(5){ height:90%; animation-delay:.4s; }
.voice-wave span:nth-child(6){ height:40%; animation-delay:.5s; }
.voice-wave span:nth-child(7){ height:70%; animation-delay:.6s; }
.voice-wave span:nth-child(8){ height:55%; animation-delay:.7s; }
.voice-wave span:nth-child(9){ height:85%; animation-delay:.8s; }
.voice-wave span:nth-child(10){ height:35%; animation-delay:.9s; }
.voice-wave span:nth-child(11){ height:65%; animation-delay:1s; }
.voice-wave span:nth-child(12){ height:45%; animation-delay:1.1s; }
@keyframes wave{ 0%,100%{ transform:scaleY(.4); } 50%{ transform:scaleY(1); } }

.invoice-card{
  background:linear-gradient(180deg, #fafafa, #ededed);
  color:#0a0a0a;
  border-radius:var(--r-lg);
  padding:24px;
  position:relative;
  box-shadow:var(--shadow-soft);
}
.inv-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid #d4d4d4; }
.inv-head b{ font-size:1.4rem; letter-spacing:.04em; font-weight:800; color:#171717; display:inline-block; margin-right:10px; }
.inv-head i{ font-size:.78rem; color:#525252; font-style:normal; }
.inv-body{ display:flex; flex-direction:column; gap:10px; }
.inv-row{ display:flex; justify-content:space-between; align-items:flex-start; padding:6px 0; }
.inv-row-head{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:#737373; padding:0; }
.inv-row b{ display:block; color:#171717; font-weight:600; }
.inv-row i{ display:block; font-size:.78rem; color:#525252; font-style:normal; }
.inv-row-sub{ font-size:.85rem; color:#525252; padding:0; }
.inv-row-total{
  font-size:1.05rem; font-weight:700;
  padding-top:12px; margin-top:6px; border-top:1px solid #d4d4d4;
  color:#171717;
}
.inv-row-total b{ color:var(--teal); font-size:1.2rem; display:inline; }
.inv-checks{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.inv-trust{
  margin-top:18px; padding-top:14px;
  border-top:1px dashed #a3a3a3;
  font-size:.78rem; color:#404040; line-height:1.5;
}

/* ============ APPROVAL ============ */
.approval-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:32px;
  display:grid; grid-template-columns:1fr 1.2fr; gap:32px; align-items:start;
}
@media (max-width:980px){ .approval-card{ grid-template-columns:1fr; } }

.risk-meter .risk-bar{
  position:relative;
  height:14px; border-radius:8px;
  background:linear-gradient(90deg, var(--lime) 0%, var(--lime) 25%, var(--amber) 25%, var(--amber) 50%, #f59e0b 50%, #fb7185 75%, #fb7185 75%, #ef4444 100%);
  margin-bottom:20px;
}
.risk-pointer{
  position:absolute; top:50%;
  width:18px; height:18px; border-radius:50%;
  background:white; border:3px solid var(--bg);
  box-shadow:0 0 14px rgba(20,184,166,0.5);
  transform:translate(-50%,-50%);
  transition:left .4s cubic-bezier(.2,.8,.2,1);
}
.risk-labels{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.risk-label{
  text-align:center; padding:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  transition:all .2s;
}
.risk-label b{ display:block; font-size:.85rem; }
.risk-label i{ display:block; font-size:.7rem; color:var(--text-3); font-style:normal; margin-top:2px; }
.risk-label.active{ background:var(--teal-soft); border-color:var(--border-hi); }
.risk-label[data-risk="low"].active{ background:var(--lime-soft); border-color:rgba(52,211,153,0.4); }
.risk-label[data-risk="medium"].active{ background:var(--amber-soft); border-color:rgba(245,158,11,0.4); }
.risk-label[data-risk="high"].active{ background:rgba(245,158,11,0.18); border-color:rgba(245,158,11,0.5); }
.risk-label[data-risk="critical"].active{ background:var(--red-soft); border-color:rgba(251,113,133,0.5); }

.risk-detail{ display:flex; flex-direction:column; gap:18px; }
.risk-scenario h4{ font-size:.95rem; margin-bottom:10px; color:var(--text-2); }
.risk-scenarios{ display:flex; flex-wrap:wrap; gap:8px; }
.rs{
  padding:8px 14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:999px;
  font-size:.82rem; color:var(--text-2);
  transition:all .2s;
}
.rs:hover{ background:var(--surface-hi); border-color:var(--border-hi); color:var(--text); }
.rs.active{ background:var(--teal-soft); border-color:var(--border-hi); color:var(--teal-2); }

.risk-result{
  background:rgba(0,0,0,0.3);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
}
.risk-result-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.risk-dot{ width:10px; height:10px; border-radius:50%; }
.risk-dot-lime{ background:var(--lime); box-shadow:0 0 10px var(--lime); }
.risk-dot-amber{ background:var(--amber); box-shadow:0 0 10px var(--amber); }
.risk-dot-red{ background:var(--red); box-shadow:0 0 10px var(--red); }
.risk-result p{ font-size:.92rem; margin-bottom:10px; }
.risk-result ul{ display:flex; flex-direction:column; gap:5px; font-size:.85rem; color:var(--text-2); }

.approval-note{ text-align:center; margin-top:22px; font-size:.95rem; color:var(--text-3); }

/* ============ COMPETITOR TABLE ============ */
.vs-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  max-width:100%;
  border-radius:var(--r-lg);
  border:1px solid var(--border);
}
.vs-table{
  width:100%; min-width:800px;
  border-collapse:collapse;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}
.vs-table th, .vs-table td{
  padding:14px 18px;
  text-align:center;
  border-bottom:1px solid var(--border);
  font-size:.88rem;
}
.vs-table th{
  background:rgba(0,0,0,0.25);
  font-weight:600; color:var(--text-2);
  position:sticky; top:0;
}
.vs-table th:first-child, .vs-table td:first-child{ text-align:left; font-weight:500; }
.vs-table tr:last-child td{ border-bottom:none; }
.vs-table tr:hover td{ background:rgba(255,255,255,0.02); }
.vs-us{
  background:linear-gradient(180deg, rgba(20,184,166,0.18), rgba(20,184,166,0.06)) !important;
  color:var(--teal-2);
}
.vs-us-cell{
  background:rgba(20,184,166,0.06);
  position:relative;
}
.vs-us-logo{ display:inline-flex; align-items:center; gap:8px; font-weight:700; }
/* Status-Labels (Text statt Symbole) */
.vs-yes{ color:var(--text-2); font-weight:500; font-size:.82rem; opacity:.7; }
/* LokalFlow-Spalte: weiterhin betont */
.vs-yes.vs-us-cell{ color:var(--teal); font-weight:700; font-size:.92rem; opacity:1; }
.vs-no{ color:var(--text-3); font-size:.82rem; opacity:.55; font-style:italic; }
.vs-partial{ color:var(--amber); font-size:.82rem; font-weight:500; opacity:.85; }
.vs-table sup a{ color:var(--text-3); text-decoration:none; font-weight:600; padding:0 2px; }
.vs-table sup a:hover{ color:var(--teal-2); }

.vs-footnotes{
  margin-top:32px; padding:20px 22px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  display:flex; flex-direction:column; gap:10px;
}
.vs-footnotes p{
  font-size:.78rem; line-height:1.55;
  color:var(--text-3); margin:0;
}
.vs-footnotes p b{ color:var(--text-2); margin-right:4px; }
.vs-footnotes a{ color:var(--teal-2); text-decoration:underline; text-underline-offset:2px; }
.vs-summary sup a{ color:var(--text-3); text-decoration:none; padding:0 2px; }

.vs-summary{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-top:36px;
}
@media (max-width:880px){ .vs-summary{ grid-template-columns:1fr; } }
.vs-sum-card{
  text-align:center; padding:18px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.vs-sum-card .big{ font-size:1.7rem; font-weight:800; display:block; margin-bottom:4px; }
.vs-sum-card p{ font-size:.85rem; color:var(--text-3); line-height:1.4; margin:0; }

/* ============ INDUSTRY (Foto-Karten) ============ */
.ind-tabs{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  margin-bottom:32px;
}
.ind-tab{
  padding:10px 18px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:999px;
  font-size:.9rem; color:var(--text-2);
  cursor:pointer;
  transition:all .2s;
}
.ind-tab:hover{ background:var(--surface-hi); color:var(--text); }
.ind-tab.active{
  background:var(--teal-soft);
  border-color:var(--border-hi);
  color:var(--teal-2);
}

.ind-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  align-items:stretch;
}
@media (max-width:980px){ .ind-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; } }
@media (max-width:560px){ .ind-grid{ grid-template-columns:1fr; } }

.ind-photo-card{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .35s ease, border-color .25s ease, box-shadow .25s ease, opacity .35s ease;
  will-change:transform;
}
.ind-photo-card:hover{
  transform:translateY(-4px);
  border-color:var(--border-hi);
  box-shadow:0 18px 44px rgba(0,0,0,0.35), 0 0 0 1px rgba(20,184,166,0.18) inset;
}
.ind-photo-card.is-dim{ opacity:.32; filter:saturate(.6); }
.ind-photo-card.is-active{
  border-color:var(--teal);
  box-shadow:0 0 0 1px var(--teal) inset, 0 24px 60px rgba(20,184,166,0.18);
}

.ind-photo{
  height:170px;
  background-size:cover; background-position:center;
  position:relative;
}
.ind-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,10,20,0) 35%, rgba(5,10,20,0.78) 100%);
}

.ind-photo-body{
  padding:18px 18px 20px;
  display:flex; flex-direction:column; gap:10px;
  flex:1;
}
.ind-photo-body h4{
  font-size:1.15rem; font-weight:700;
  margin:0;
}
.ind-chip{
  align-self:flex-start;
  display:inline-block;
  padding:3px 10px;
  font-size:.7rem; font-weight:600;
  text-transform:none;
  background:var(--surface); border:1px solid var(--border);
  border-radius:999px;
  color:var(--text-2);
}
.ind-q{
  font-size:.92rem; color:var(--text);
  font-style:italic;
  margin:2px 0 4px;
  line-height:1.4;
}
.ind-bg{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.ind-bg h5{
  font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--teal-2);
  margin:0 0 10px;
}
.ind-bg ul{
  display:flex; flex-direction:column; gap:6px;
  list-style:none; padding:0; margin:0;
}
.ind-bg ul li{
  font-size:.83rem; color:var(--text-2);
  padding-left:16px; position:relative;
  line-height:1.45;
}
.ind-bg ul li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%;
  background:var(--teal);
}
.ind-done{
  align-self:flex-start;
  margin-top:14px;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px;
  font-size:.78rem; font-weight:600;
  background:rgba(168,255,96,0.12);
  border:1px solid rgba(168,255,96,0.28);
  color:var(--lime);
  border-radius:999px;
}

/* ============ PRICING ============ */
.pricing-grid{
  display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:stretch;
}
@media (max-width:980px){ .pricing-grid{ grid-template-columns:1fr; } }

.pricing-card{
  padding:36px;
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
}
.pricing-main{
  background:linear-gradient(180deg, rgba(20,184,166,0.08), rgba(20,184,166,0.02));
  border-color:var(--border-hi);
  box-shadow:var(--shadow-hi);
  position:relative;
}
.pricing-head .chip{ margin-bottom:14px; }
.pricing-head h3{ margin-bottom:6px; }
.pricing-head p{ font-size:.95rem; }
.pricing-price{ margin:24px 0; padding:18px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.pricing-old{ font-size:.92rem; color:var(--text-3); text-decoration:line-through; }
.pricing-old i{ font-style:normal; text-decoration:none; }
.pricing-new{ display:flex; align-items:baseline; gap:6px; margin:6px 0; }
.pricing-new b{ font-size:3rem; font-weight:800; line-height:1; color:var(--teal); }
.pricing-new span{ font-size:1rem; color:var(--text-2); }
.pricing-price > i{ font-size:.78rem; color:var(--text-3); font-style:normal; }
.pricing-list{ display:flex; flex-direction:column; gap:10px; margin-top:20px; list-style:none; padding:0; }
.pricing-list li{
  font-size:.92rem; color:var(--text-2);
  padding-left:18px; text-indent:-18px;   /* Hanging-Indent: Folgezeilen rücken nicht unter den Haken */
}

.pricing-side{
  padding:22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  display:flex; flex-direction:column;
}
.pricing-side h4{ margin-bottom:14px; }
.addon{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}
.addon:last-of-type{ border-bottom:none; }
.addon b{ display:block; font-size:.95rem; }
.addon i{ display:block; font-size:.78rem; color:var(--text-3); font-style:normal; }
.addon span{ color:var(--teal); font-weight:600; font-size:.95rem; flex-shrink:0; }
.pricing-trust{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:14px; border-top:1px solid var(--border); }
.pricing-side > p{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--border); font-size:.78rem; color:var(--text-3); line-height:1.5; }

/* ============ FINAL CTA ============ */
.final-cta{
  display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center;
  padding:48px clamp(24px,4vw,56px);
  background:linear-gradient(135deg, rgba(20,184,166,0.08), rgba(52,211,153,0.04));
  border:1px solid var(--border-hi);
  border-radius:var(--r-xl);
  position:relative;
  overflow:hidden;
}
@media (max-width:880px){
  .final-cta{ grid-template-columns:1fr; text-align:center; }
  .final-cta .hero-ctas{ justify-content:center; }
  .final-cta .hero-trust{ justify-content:center; }
}
.final-cta::before{
  content:''; position:absolute;
  width:300px; height:300px;
  right:-100px; top:-100px;
  background:radial-gradient(circle,#14b8a6,transparent 60%);
  opacity:.2;
  filter:blur(60px);
  pointer-events:none;
}
.final-illustration{ position:relative; }
.final-orb{
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, rgba(20,184,166,0.4), transparent 70%);
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  animation:orbPulse 3s ease-in-out infinite;
}
@keyframes orbPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:1; } 50%{ transform:translate(-50%,-50%) scale(1.2); opacity:.6; } }
.final-cta h2{ margin-bottom:10px; }
.final-cta > div:last-child > p{ font-size:1.05rem; margin-bottom:20px; }

/* ============ FOOTER ============ */
.footer{
  border-top:1px solid var(--border);
  padding:60px 0 30px;
  background:var(--bg-soft);
  margin-top:30px;
}
.footer-inner{
  display:grid; grid-template-columns:1.5fr 2fr; gap:48px;
  margin-bottom:40px;
}
@media (max-width:880px){ .footer-inner{ grid-template-columns:1fr; gap:32px; } }
.footer-brand p{ font-size:.92rem; max-width:380px; margin-top:14px; }
.footer-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer-cols h5{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:14px; font-weight:600; }
.footer-cols a{
  display:block; padding:5px 0;
  font-size:.92rem; color:var(--text-2);
  transition:color .2s;
}
.footer-cols a:hover{ color:var(--teal); }

.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top:20px;
  border-top:1px solid var(--border);
  font-size:.82rem; color:var(--text-3);
}

/* ============ INDUSTRY GALLERY (Beispielbilder pro Branche) ============ */
.ind-gallery{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:16px;
  margin:32px 0 28px;
}
@media (max-width:980px){ .ind-gallery{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:560px){ .ind-gallery{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; } }
.ind-card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--bg-2);
  aspect-ratio: 4/3;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.ind-card:hover{
  transform:translateY(-3px);
  border-color:var(--teal);
  box-shadow:0 14px 36px -18px rgba(25,227,194,0.45);
}
.ind-illu{ position:absolute; inset:0; }
.ind-illu svg{ display:block; width:100%; height:100%; }
.ind-card-label{
  position:absolute; left:10px; bottom:8px;
  font-size:.78rem; font-weight:600; letter-spacing:.02em;
  color:#e6f6f3;
  background:rgba(5,10,20,0.55);
  backdrop-filter:blur(6px);
  padding:4px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
}

/* ============ PRICING — vollständige Liste & Add-ons ============ */
.pricing-fineprint{
  text-align:center;
  font-size:.78rem; color:var(--text-3);
  margin-top:10px;
}
.pricing-fineprint-side{
  text-align:left;
  margin-top:14px;
  line-height:1.55;
  font-size:.74rem;
}
.pricing-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 24px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
@media (max-width:560px){ .pricing-features{ grid-template-columns:1fr; } }
.pf-group h5{
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--teal);
  font-weight:700;
  margin:0 0 8px;
}
.pf-group ul{ list-style:none; padding:0; margin:0; display:grid; gap:5px; }
.pf-group li{
  font-size:.86rem;
  color:var(--text-2);
  line-height:1.45;
  padding-left:18px;
  text-indent:-18px;   /* Hanging-Indent: Folgezeilen bleiben rechts vom ✓ */
}
.pf-hint{
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--text-3);
  margin-left:8px;
  text-transform:none;
}

/* ========================================================
   FAQ
   ======================================================== */
.faq{
  max-width:780px;
  margin:0 auto;
  display:grid;
  gap:10px;
}
.faq-item{
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .2s ease, background .2s ease;
}
.faq-item[open]{
  border-color:rgba(0,234,212,.35);
  background:linear-gradient(180deg,rgba(0,234,212,.04),rgba(255,255,255,.02));
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-weight:600;
  font-size:1rem;
  color:var(--text-1);
  user-select:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--teal-soft); }
.faq-chev{
  width:20px; height:20px;
  flex-shrink:0;
  color:var(--text-3);
  transition:transform .25s ease, color .25s ease;
}
.faq-item[open] .faq-chev{
  transform:rotate(180deg);
  color:var(--teal);
}
.faq-body{
  padding:0 22px 18px;
  color:var(--text-2);
  font-size:.93rem;
  line-height:1.65;
  animation:faqIn .3s ease;
}
.faq-body p{ margin:0; }
@keyframes faqIn{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (max-width:640px){
  .faq-item summary{ padding:16px 18px; font-size:.95rem; }
  .faq-body{ padding:0 18px 16px; font-size:.88rem; }
}
@media (prefers-reduced-motion: reduce){
  .faq-body{ animation:none; }
  .faq-chev{ transition:none; }
}

/* ========================================================
   DEMO Auto-Play UI
   ======================================================== */
.demo-play{
  height:38px;
  padding:0 16px 0 12px;
  border-radius:999px;
  border:1px solid rgba(25,227,194,0.35);
  background:rgba(25,227,194,0.10);
  color:var(--teal-2);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  transition:all .2s ease;
  font-size:.82rem; font-weight:600; letter-spacing:0.02em;
}
.demo-play:hover{
  background:rgba(25,227,194,0.18);
  border-color:var(--teal);
  color:var(--teal);
}
.demo-play svg{ width:13px; height:13px; }
.demo-play .demo-play-label{ display:inline-block; }
.demo-play[data-state="playing"] .demo-play-play{ display:none; }
.demo-play[data-state="paused"]  .demo-play-pause{ display:none; }
.demo-play[data-state="playing"] .demo-play-label::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--teal); margin-right:6px; box-shadow:0 0 8px var(--teal); animation:pulse 1.8s ease-in-out infinite; vertical-align:middle; }

@media (prefers-reduced-motion: reduce){
  .demo-play{ transition:none; }
}

/* ========================================================
   MOBILE-OPTIMIERUNGEN (P0)
   ======================================================== */

/* --- Hero Hub: kompaktere Variante ab 880px, weiter vereinfacht ab 640px --- */
@media (max-width:880px){
  .hub-stage{ max-width:420px; }
  .hub-core{ width:170px; height:170px; }
}
@media (max-width:640px){
  /* Stage skaliert mit, Satellites kleiner & in 2-Spalten-Grid unter dem Core */
  .hub-stage{ max-width:340px; aspect-ratio:1; }
  .hub-core{ width:140px; height:140px; }
  .hub-core-inner strong{ font-size:.9rem; }
  .hub-core-inner span{ font-size:.55rem; }
  .hub-core-inner em{ font-size:.55rem; }

  /* Satellites bleiben rund um den Hub, aber kleiner */
  .sat{
    padding:7px 9px !important;
    font-size:.62rem !important;
    border-radius:10px !important;
  }
  .sat b{ font-size:.7rem; }
  .sat i{ font-size:.58rem; }
  .sat-ico{ font-size:.85rem !important; }

  /* Linien dezenter auf Mobile */
  .hub-rays line{ stroke-opacity:.35; }
}
/* Sehr schmal (≤420): Hub-Stage komplett weg, durch kompakte Karten-Grid ersetzen */
@media (max-width:420px){
  .hub-stage{ display:none; }
  .hero-hub::before{
    content:"Flowy Command";
    display:block;
    text-align:center;
    font-size:.7rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--teal);
    margin-bottom:14px;
  }
  /* Auto-Grid für Satellites als Fallback gibt's nicht, weil sat absolute positioniert sind.
     Stattdessen: WhatsApp-Mockup wird auf Mobile zur Hauptattraktion. */
  .wa-card{ margin-top:0; }
}

/* --- Process Row: Tablet 3-spaltig, Mobile 2-spaltig --- */
@media (max-width:980px){
  .process-row{
    flex-wrap:wrap;
    gap:24px 0;
    max-width:560px;
  }
  .pstep{ flex:0 0 33.333%; }
  .pstep::after{ display:none; }
}
@media (max-width:560px){
  .pstep{ flex:0 0 50%; }
  .pstep i{ font-size:.74rem; }
}

/* --- Rechnungs-Karte Mobile: deutlicherer Schatten/Border für bessere Lesbarkeit --- */
@media (max-width:640px){
  .invoice-card{
    box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
    margin-top:8px;
  }
  .invoice-cmd{ margin-bottom:14px; }
}

/* --- Mobile Nav: Auf kleinen Phones nur Logo + Burger sichtbar, CTAs im Mobile-Menü --- */
@media (max-width:640px){
  .nav .nav-cta .btn-ghost,
  .nav .nav-cta .btn-primary{ display:none; }
  .nav.open .nav-cta .btn-ghost,
  .nav.open .nav-cta .btn-primary{ display:inline-flex; }
  .nav-burger{ margin-left:auto; }
}

/* ===== Trust-Strip Pro (Outline-Icons mit Glow-Ring) ===== */
.trust-strip{
  padding: 32px 0 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(25,227,194,0.04), transparent 60%);
}
.trust-row{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  align-items: stretch;
}
.trust-badge{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  text-align: center;
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.trust-badge:hover{
  border-color: rgba(25,227,194,0.35);
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(25,227,194,0.05), rgba(255,255,255,0.01));
}
.trust-ico{
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(25,227,194,0.08);
  border: 1px solid rgba(25,227,194,0.22);
  color: var(--teal);
  flex: 0 0 auto;
}
.trust-ico::before{
  /* sanfter Glow */
  content:""; position:absolute; inset:-1px;
  border-radius: 13px;
  box-shadow: 0 0 14px rgba(25,227,194,0.18);
  pointer-events: none;
}
.trust-ico svg{ width: 22px; height: 22px; display: block; }
.trust-badge b{
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  line-height: 1.2;
}
.trust-badge i{
  font-style: normal;
  font-size: 0.76rem;
  color: var(--text-3);
  line-height: 1.35;
  display: block;
}
@media (max-width: 1100px){
  .trust-row{ grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (max-width: 760px){
  .trust-strip{ padding: 22px 0 16px; }
  .trust-row{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .trust-badge{ padding: 14px 10px 12px; gap: 8px; }
  .trust-ico{ width: 36px; height: 36px; border-radius: 10px; }
  .trust-ico svg{ width: 18px; height: 18px; }
  .trust-badge b{ font-size: 0.82rem; margin-bottom: 2px; }
  .trust-badge i{ font-size: 0.7rem; }
  .trust-badge:last-child{ grid-column: 1 / -1; }
}

/* ===== Cookie-Banner (Toast unten links) ===== */
.cookie-banner{
  position: fixed;
  left: 16px;
  bottom: 16px;
  right: auto;
  width: min(380px, calc(100% - 32px));
  z-index: 9999;
  background: rgba(8, 14, 26, 0.96);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  animation: cookieIn .35s ease both;
}
.cookie-banner[hidden]{ display: none !important; }
@keyframes cookieIn{
  from{ opacity: 0; transform: translateY(12px); }
  to{ opacity: 1; transform: translateY(0); }
}
.cookie-inner{
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cookie-text b{
  display: block;
  color: var(--text);
  margin-bottom: 4px;
  font-size: 0.95rem;
}
.cookie-text p{
  margin: 0;
  color: var(--text-3);
  font-size: 0.85rem;
  line-height: 1.45;
}
.cookie-text a{
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: rgba(25,227,194,0.4);
  text-underline-offset: 2px;
}
.cookie-text a:hover{ text-decoration-color: var(--teal); }
.cookie-actions{
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}
.btn-sm{
  padding: 8px 14px;
  font-size: 0.85rem;
}
@media (max-width: 720px){
  .cookie-banner{ left: 8px; right: 8px; bottom: 8px; width: auto; }
  .cookie-inner{ padding: 12px 14px; gap: 10px; }
  .cookie-actions{ width: 100%; }
  .cookie-actions .btn{ flex: 1; }
}