/* Twemoji: flag emoji images inline at text size */
img.emoji { height:1.1em; width:1.1em; vertical-align:-0.15em; display:inline; margin:0 1px; }

/* ===================== SCROLL-REVEAL ANIMATIONS (data-kv-anim) =====================
   KEIN data-anim! Kollidiert mit Widget-Builder-Buttons die data-anim als State-Attribut nutzen.
   Eigenes Namespace data-kv-anim verhindert side-effects. */
.kv-anim-active [data-kv-anim]{
  opacity:0;
  transition:opacity .65s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1);
  will-change:opacity, transform;
}
.kv-anim-active [data-kv-anim="up"]    { transform: translate3d(0, 28px, 0); }
.kv-anim-active [data-kv-anim="down"]  { transform: translate3d(0, -24px, 0); }
.kv-anim-active [data-kv-anim="left"]  { transform: translate3d(-36px, 0, 0); }
.kv-anim-active [data-kv-anim="right"] { transform: translate3d(36px, 0, 0); }
.kv-anim-active [data-kv-anim="scale"] { transform: scale(.94); }
.kv-anim-active [data-kv-anim="fade"]  { transform: none; }
.kv-anim-active [data-kv-anim].is-in   { opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce){
  .kv-anim-active [data-kv-anim]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ===================== LANDINGPAGE (dein Style) ===================== */
:root{
  --bg-dark:#0b0f0d;
  --bg-light:#f6f7f6;
  --card:#111815;
  --green:#00ff9c;
  --green-soft:#00ff9c33;
  --text:#ffffff;
  --muted:#9aa3a0;
  --border:#1f2a25;

  /* === DESIGN TOKENS, Card-System (vereinheitlicht) === */
  --card-radius: 20px;
  --card-radius-inner: 12px;
  --card-padding: 28px 24px;
  --card-padding-mobile: 22px 18px;
  --card-border: 1px solid rgba(255,255,255,.10);
  --card-border-hover: 1px solid rgba(255,255,255,.28);
  --card-shadow: 0 4px 24px rgba(0,0,0,.5);
  --card-shadow-hover: 0 12px 40px rgba(0,0,0,.6);
  --card-hover-y: -4px;
  --card-transition: border-color .25s, transform .25s, box-shadow .25s;

  /* Typography-Scale für Cards */
  --card-h-size: 18px;
  --card-h-weight: 700;
  --card-p-size: 14px;
  --card-p-line: 1.6;
  --card-p-color: #9aa3a0;

  /* === ANTI-AI Radius-Hierarchie (Phase 14) === */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
}

/* === Phase 14: Anti-AI-Politur === */
.tag, .pill, .badge, .feature-num, .stat-pill, .section-label-pill { border-radius: var(--r-xs) !important; }
.btn-sm, .btn-mini { border-radius: var(--r-sm) !important; }
/* Web&Brand: asymmetrisches Bento-Grid statt 3 gleich große Cards */
@media (min-width:760px){
  .wb-entry-grid{ display:grid !important; grid-template-columns: repeat(6, 1fr) !important; gap:14px !important; }
  .wb-entry-card{ grid-column: span 2; }
  .wb-entry-card:first-child{ grid-column: span 4; }
  .wb-entry-card:first-child h3{ font-size: 22px; letter-spacing: -0.02em; }
  .wb-entry-card:nth-child(3){ grid-column: span 3; }
  .wb-entry-card:nth-child(4){ grid-column: span 3; }
}
/* Typografische Schliff: tabular-nums für Preise */
.tp, .ci-price, .agprice, .kvc-i-price, .kvw-i-price, .dash-mod-price, .modprice{
  font-variant-numeric: tabular-nums;
}
/* Pills + Tags etwas kantiger machen */
.feature-num{ border-radius: var(--r-xs) !important; }

*{box-sizing:border-box;margin:0;padding:0;font-family:'DM Sans',system-ui,sans-serif}
h1,h2,h3,.logo,.hero h1,.section-heading{font-family:'Space Grotesk',system-ui,sans-serif;overflow:visible}

/* ---------- TYPO-POLITUR: Editorial-Qualität statt Default-AI-Look ---------- */
h1, h2, h3, .hero h1, .section-heading, .about-heading, .contact-heading, .bscan-h2{
  font-feature-settings: "ss01" 1, "ss02" 1, "kern" 1, "liga" 1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
p, .lead, .about-lead, .bscan-lead{
  font-feature-settings: "kern" 1, "tnum" 1;
  text-wrap: pretty;
}
/* Section-Labels gedämpfter, weniger laut, mehr editorial */
.section-label{ opacity:.55 !important; }
/* Hero-H1: noch enger und gewichtiger gesetzt */
.hero h1{ letter-spacing:-0.032em; line-height:1.04; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:68px; /* Sticky Header-Höhe kompensieren */
  background:oklch(8% .006 160); /* matched Hero-BG-Farbe → kein Sprung an Section-Boundaries */
}
body{
  background:transparent; /* durchsichtig — der WebGL-3D-Hintergrund #kvBg scheint überall durch */
  color:var(--text);
  overflow-x:clip; /* clip statt hidden → bricht position:sticky NICHT (sonst Header/Cart auf Mobile weg) */
  position:relative;
}

/* WebGL-3D-Hintergrund (kivieo-bg.js) liegt auf z-index:-2.
   body::before ersetzt durch die animierte WebGL-Szene, kein externes Unsplash-Bild mehr (Drittland-Transfer entfernt). */

/* Hintergrund-Gitter entfernt auf User-Wunsch (2026-05-24) */
/* Ambient glow blobs, solid color + filter:blur = Gaussian falloff, zero hard edges */
/* z-index:1 so they're above body background, sections use position:relative to stack above */
.amb{
  position:fixed;
  pointer-events:none;
  border-radius:50%;
  z-index:1;
}
.amb-1{
  width:65vw; height:55vh;
  left:-8vw; top:-8vh;
  background:rgba(0,255,156,.095);
  filter:blur(90px);
}
.amb-2{
  width:48vw; height:65vh;
  right:-6vw; top:16vh;
  background:rgba(34,211,238,.058);
  filter:blur(85px);
}
/* Diagonal Schliere, elongated rotated oval = organic sweep across the page */
.amb-3{
  width:82vw; height:13vh;
  left:4vw; top:22vh;
  transform:rotate(-16deg);
  background:rgba(0,255,156,.050);
  filter:blur(58px);
}
.amb-4{
  width:42vw; height:38vh;
  right:6vw; bottom:6vh;
  background:rgba(129,140,248,.040);
  filter:blur(80px);
}

/* All page sections sit above z:1 amb blobs */
header,section,.hero,footer,#kivieo-dev-banner{position:relative;z-index:2;}

/* ---------- GLOBAL ANIMATIONS ---------- */
@keyframes float {
  0%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}
@keyframes glow {
  0%{box-shadow:0 0 0 transparent}
  50%{box-shadow:0 0 25px var(--green-soft)}
  100%{box-shadow:0 0 0 transparent}
}

/* ---------- HEADER ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  /* Near-opaker Header statt backdrop-filter:blur, ein sticky Header mit Blur
     zwingt den Browser, den Hintergrund pro Scroll-Frame neu zu sampeln (Scroll-Jank).
     .96 Opazitaet sieht praktisch identisch aus, kostet 0 GPU pro Frame. */
  background:rgba(11,15,13,.96);
  border-bottom:1px solid var(--border);
}
#scroll-progress{
  position:absolute;
  bottom:0;left:0;
  height:2px;
  width:100%;
  transform-origin:left;
  background:linear-gradient(90deg,var(--green),#22d3ee,#818cf8);
  transform:scaleX(0);
  pointer-events:none;
}
nav{
  max-width:1300px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 24px 10px 8px;
}
.logo{
  font-weight:800;
  letter-spacing:.5px;
  color:var(--green);
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  overflow:visible;
}
.logo img{
  width:auto;height:32px;object-fit:contain;
  filter: drop-shadow(0 0 10px rgba(0,255,156,.25));
  /* mix-blend-mode entfernt: erzeugte Quadrat um Logo auf iPad/Safari */
  position:relative;z-index:1;
}
.logo>span{position:relative;z-index:1;}


nav a{
  color:var(--muted);
  margin-left:24px;
  text-decoration:none;
  font-size:14px;
}
nav a:hover{color:var(--green)}

/* ---------- HERO ---------- */
.hero{
  max-width:1300px;
  margin:120px auto 80px;
  padding:0 24px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:60px;
  position:relative;
  z-index:0;
}
.hero h1{
  font-size:clamp(36px,4.8vw,66px);
  line-height:1.28;
  letter-spacing:-0.3px;
  font-weight:800;
  overflow:visible;
}
/* gradient accent, inline-block + padding-bottom so descenders (g,p,y...) are never clipped */
.hero h1 .accent{
  display:inline-block;
  background:linear-gradient(90deg,var(--green) 0%,#22d3ee 60%,#818cf8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-bottom:0.25em; /* room for descenders */
  line-height:inherit;
}
.hero p{
  margin-top:20px;
  color:var(--muted);
  font-size:16px;
  line-height:1.65;
}
.hero-actions{
  margin-top:36px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  animation: heroActionsIn 0.6s ease-out 0.75s both;
}
@keyframes heroActionsIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.btn{
  padding:15px 26px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  border:none;
  font-size:14px;
  letter-spacing:.2px;
  transition:box-shadow .25s, transform .2s, background .2s;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn.primary{
  background:var(--green);
  color:#000;
  box-shadow:0 0 0 rgba(0,255,156,0);
}
.btn.primary:hover{
  box-shadow:0 0 28px rgba(0,255,156,.35), 0 4px 16px rgba(0,0,0,.3);
}
.btn.secondary{
  background:rgba(28,34,31,.92);
  border:1px solid var(--border);
  color:var(--text);
}
.btn.secondary:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(0,255,156,.3);
  color:var(--green);
}
.hero-visual{
  position:relative;
  min-height:420px;
  animation:float 6s ease-in-out infinite;
  overflow:visible;
  z-index:0;
}
.hero-orb-canvas{
  display:none !important;  /* CPU-intensive Fabric-Simulation deaktiviert (User-Wunsch: keine hakende Hero-Animation) */
  position:absolute;
  /* canvas is larger than its container so fabric can breathe around the logo */
  top:50%; left:50%;
  width:140%; height:140%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:0;
  /* soft radial vignette, no hard box edge */
  -webkit-mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,black 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,black 30%,transparent 78%);
}
/* ---------- HERO LOGO MARK ---------- */
.hlm{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}
.hlm{cursor:pointer;}
.hlm img{
  width:auto;height:440px;
  object-fit:contain;
  filter:drop-shadow(0 0 56px rgba(0,255,156,.65)) drop-shadow(0 0 140px rgba(0,255,156,.32));
  /* mix-blend-mode entfernt: hat auf iPad/manchen Browsern ein Quadrat um das Logo erzeugt.
     PNG-alpha tut das gleiche zuverlaessiger. */
  transition:transform .3s ease, filter .3s ease;
}
.hlm:hover img{
  transform:scale(1.04);
  filter:drop-shadow(0 0 72px rgba(0,255,156,.85)) drop-shadow(0 0 160px rgba(0,255,156,.45));
}
.hlm:active img{transform:scale(.98)}
/* Visueller Hinweis dass anklickbar */
.hlm::after{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:520px;height:520px;
  margin:-260px 0 0 -260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,255,156,.05) 0%, transparent 65%);
  pointer-events:none;
  animation:hlmPulse 3s ease-in-out infinite;
}
@keyframes hlmPulse{
  0%,100%{opacity:.4;transform:scale(1)}
  50%{opacity:.8;transform:scale(1.06)}
}
/* ---------- HERO AREA ORGANIC SCHLIEREN (solid fill + blur = no hard edges) ---------- */
.hlm-schliere{
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  will-change:opacity;
}
/* Main diagonal sweep, over the logo (z:2 > .hlm z:1), clearly visible */
.hlm-s1{
  width:100%;
  height:110px;
  left:0;
  top:30%;
  transform:rotate(-13deg);
  background:rgba(0,255,156,.70);
  filter:blur(48px);
  z-index:2;
  animation:schlierePulse 9s ease-in-out infinite;
}
/* Upper-left cyan wisp, atmospheric accent, behind logo */
.hlm-s2{
  width:62%;
  height:70px;
  left:-5%;
  top:6%;
  transform:rotate(-38deg);
  transform-origin:left center;
  background:rgba(34,211,238,.42);
  filter:blur(34px);
  z-index:0;
  opacity:.75;
  animation:schlierePulse 13s ease-in-out infinite 5s;
}
@keyframes schlierePulse{
  0%,100%{opacity:.6;}
  50%{opacity:1;}
}

/* ── HERO VISUAL DECORATIVE ELEMENTS ── */
/* local glow blobs within hero area */
.hv-glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.hv-g1{
  width:90%; height:80%;
  top:10%; left:5%;
  background:rgba(0,255,156,.14);
  filter:blur(70px);
  z-index:0;
}
.hv-g2{
  width:55%; height:55%;
  top:-5%; right:-5%;
  background:rgba(34,211,238,.11);
  filter:blur(60px);
  z-index:0;
}
.hv-g3{
  width:45%; height:45%;
  bottom:-5%; left:-5%;
  background:rgba(129,140,248,.09);
  filter:blur(55px);
  z-index:0;
}
/* Konzentrische Kreise (hv-r1, hv-r2) auf User-Wunsch entfernt, Logo soll prominenter sein */
.hv-ring{display:none}
.hv-r1, .hv-r2{display:none}
/* Orbital nodes, glowing dots at ring positions */
.hv-node{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:3;
}
.hv-n1{
  width:9px; height:9px;
  top:8%; left:calc(50% - 4px);
  background:#00ff9c;
  box-shadow:0 0 16px 6px rgba(0,255,156,.60);
  animation:nodePulse 3.5s ease-in-out infinite;
}
.hv-n2{
  width:7px; height:7px;
  top:calc(50% - 3px); right:4%;
  background:#22d3ee;
  box-shadow:0 0 14px 5px rgba(34,211,238,.55);
  animation:nodePulse 3.5s ease-in-out infinite 1.2s;
}
.hv-n3{
  width:7px; height:7px;
  bottom:8%; left:calc(50% - 3px);
  background:#00ff9c;
  box-shadow:0 0 14px 5px rgba(0,255,156,.50);
  animation:nodePulse 3.5s ease-in-out infinite 2.4s;
}
.hv-n4{
  width:6px; height:6px;
  top:calc(50% - 3px); left:4%;
  background:#818cf8;
  box-shadow:0 0 12px 4px rgba(129,140,248,.50);
  animation:nodePulse 3.5s ease-in-out infinite 0.6s;
}
@keyframes nodePulse{
  0%,100%{opacity:.45; transform:scale(1);}
  50%{opacity:1; transform:scale(1.5);}
}


/* ---------- HOVER GLOW ---------- */
.btn:hover, nav a:hover, .feature:hover {
  box-shadow: 0 0 12px rgba(0,255,156,.15);
}

/* ---------- HERO CHAT WIDGET PREVIEW ---------- */
.hcw{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:calc(100% - 48px);
  max-width:300px;
  background:rgba(8,13,10,.92);
  border:1px solid rgba(0,255,156,.18);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(0,255,156,.06),0 0 40px rgba(0,255,156,.06);
  font-family:'Inter',system-ui,sans-serif;
}
.hcw-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  background:linear-gradient(135deg,rgba(0,255,156,.12),rgba(34,211,238,.06));
  border-bottom:1px solid rgba(0,255,156,.12);
}
.hcw-avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#00ff9c,#22d3ee);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.hcw-name{ font-size:12px;font-weight:700;color:#fff;line-height:1.2; }
.hcw-online{ font-size:10px;color:rgba(0,255,156,.8);display:flex;align-items:center;gap:5px; }
.hcw-dot{
  width:6px;height:6px;border-radius:50%;background:#00ff9c;
  display:inline-block;animation:demoPulse 2s ease-in-out infinite;
}
.hcw-msgs{
  padding:14px 14px 8px;
  display:flex;flex-direction:column;gap:8px;
  min-height:190px;
}
.hcw-msg{
  max-width:86%;font-size:11.5px;line-height:1.55;
  border-radius:12px;padding:9px 12px;
  opacity:0;animation:hcwMsgIn .35s ease forwards;
}
.hcw-bot{
  background:rgba(0,255,156,.10);border:1px solid rgba(0,255,156,.15);
  border-radius:12px 12px 12px 3px;color:rgba(255,255,255,.88);
  align-self:flex-start;
}
.hcw-user{
  background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.18);
  border-radius:12px 12px 3px 12px;color:rgba(255,255,255,.88);
  align-self:flex-end;
}
.hcw-typing{ display:flex;align-items:center;gap:4px;padding:10px 14px; }
.hcw-dot-anim{
  width:6px;height:6px;border-radius:50%;background:rgba(0,255,156,.7);
  display:inline-block;animation:hcwDotBounce .9s ease-in-out infinite;
}
.hcw-dot-anim:nth-child(2){ animation-delay:.15s; }
.hcw-dot-anim:nth-child(3){ animation-delay:.30s; }
.hcw-delay-1{ animation-delay:.5s; }
.hcw-delay-2{ animation-delay:1.3s; }
.hcw-delay-3{ animation-delay:2.4s; }
.hcw-delay-4{ animation-delay:3.1s; }
.hcw-input-row{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-top:1px solid rgba(255,255,255,.06);
}
.hcw-input-field{
  flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:20px;padding:7px 13px;font-size:11px;color:rgba(255,255,255,.28);
}
.hcw-send{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#00ff9c,#22d3ee);
  display:flex;align-items:center;justify-content:center;color:#000;
}
.hcw-send svg{ width:12px;height:12px; }
@keyframes hcwMsgIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes hcwDotBounce{
  0%,80%,100%{transform:translateY(0)}
  40%{transform:translateY(-4px)}
}

.hero-stat-badge{
  position:absolute;
  background:#0f1612;
  border:1px solid rgba(0,255,156,.20);
  border-radius:10px;
  padding:8px 13px;
  display:flex;flex-direction:column;gap:2px;
}
.hsb-num{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:16px;font-weight:700;
  color:#fff;line-height:1;
}
.hsb-txt{
  font-size:10px;color:var(--muted);
  white-space:nowrap;
}


/* ---------- SECTION LABEL (SKILL.md editorial style) ---------- */
.section-label{
  display:block;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:18px;
  opacity:.7;
  font-family:'DM Sans',system-ui,sans-serif;
}

/* ---------- STATS ROW ---------- */
.stats-row{
  max-width:1100px;
  margin:100px auto 0;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding-top:56px;
  padding-bottom:56px;
}
.stat-block{display:flex;flex-direction:column}
.stat-num{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:clamp(40px,4.5vw,64px);
  font-weight:700;
  line-height:1.15;
  padding-bottom:0.08em;
  background:linear-gradient(135deg,var(--green) 0%,#22d3ee 60%,#818cf8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:-0.5px;
  display:inline-block;
}
.stat-label{
  font-size:13px;
  color:var(--muted);
  margin-top:10px;
  line-height:1.45;
  max-width:140px;
}

/* ---------- TEXT MARQUEE STRIP (SKILL.md horizontal marquee) ---------- */
.marquee-strip{
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:20px 0;
  margin:80px 0;
}
.marquee-strip-inner{
  display:flex;
  white-space:nowrap;
  animation:stripScroll 22s linear infinite;
  will-change:transform;
}
.marquee-strip-inner span{
  font-size:clamp(12px,1.5vw,15px);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  padding:0 28px;
  flex-shrink:0;
}
.marquee-strip-inner .dot{
  color:var(--green);
  letter-spacing:0;
  padding:0;
  opacity:.6;
}
@keyframes stripScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ---------- FEATURES, open editorial layout ---------- */
.features{
  max-width:1200px;
  margin:100px auto;
  padding:0 24px;
}
.features-header{
  margin-bottom:60px;
}
.features-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.feature{
  /* base, card style is applied below in second pass */
  position:relative;
  overflow:visible;
}
/* editorial overrides removed, card style handles spacing via grid gap */
.feature:last-child{ border-right:none; }
.feature:not(:first-child){ padding-left:32px; }
/* ::before is now a shimmer line (defined in card style below) */
.feature-num{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--green);
  opacity:.55;
  margin-bottom:20px;
  font-family:'DM Sans',system-ui,sans-serif;
}
.feature h3{
  font-size:20px;
  font-weight:700;
  margin-bottom:12px;
  font-family:'Space Grotesk',system-ui,sans-serif;
  line-height:1.2;
}
.feature p{
  font-size:14.5px;
  color:var(--muted);
  line-height:1.65;
}

/* ---------- REZENSIONEN, continuous marquee ---------- */
.reviews{
  margin:120px 0;
  overflow:hidden;
}
.reviews-header{
  max-width:1200px;
  margin:0 auto 52px;
  padding:0 24px;
}
.reviews-marquee-wrap{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.reviews-marquee-row{
  display:flex;
  gap:20px;
  animation:reviewLeft 38s linear infinite;
  will-change:transform;
}
.reviews-marquee-row.row-reverse{
  animation:reviewRight 42s linear infinite;
}
@keyframes reviewLeft{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes reviewRight{
  0%{transform:translateX(-50%)}
  100%{transform:translateX(0)}
}
.review-card{
  flex:0 0 320px;
  background:linear-gradient(145deg,#111815,#0a0e0c);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:24px 26px;
  box-shadow:0 2px 16px rgba(0,0,0,.35);
}
.review-stars{
  color:var(--green);
  font-size:13px;
  letter-spacing:3px;
  margin-bottom:12px;
  display:block;
}
.review-text{
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,.88);
  font-style:italic;
  margin-bottom:14px;
}
.review-author{
  font-size:12.5px;
  color:var(--muted);
  font-weight:600;
  font-style:normal;
}

/* ---------- CAROUSEL WRAPPER & CHEVRONS ---------- */
.carousel-wrapper{
  position:relative;
  padding:0 56px;
}
.carousel-wrapper::before,
.carousel-wrapper::after{ display:none; }

/* ── Premium carousel arrows: full-height gradient edge buttons ── */
.carousel-arrow-btn{
  position:absolute;
  top:0;
  bottom:0;
  z-index:10;
  width:56px;
  height:100%;
  border:none;
  padding:0;
  cursor:pointer;
  font-size:0; /* hide HTML entity */
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .3s;
  opacity:0.6;
}
.carousel-arrow-btn::after{
  content:'';
  width:11px;
  height:20px;
  flex-shrink:0;
  background:no-repeat center/contain;
  opacity:0.75;
  transition:opacity .25s, transform .25s;
  position:relative;
  z-index:1;
}
.carousel-arrow-btn.left-arrow{
  left:0;
  background:linear-gradient(90deg,rgba(8,11,10,.96) 0%,rgba(8,11,10,.7) 55%,transparent 100%);
  border-radius:18px 0 0 18px;
}
.carousel-arrow-btn.right-arrow{
  right:0;
  background:linear-gradient(270deg,rgba(8,11,10,.96) 0%,rgba(8,11,10,.7) 55%,transparent 100%);
  border-radius:0 18px 18px 0;
}
.carousel-arrow-btn.left-arrow::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 20'%3E%3Cpath d='M9 2L2 10l7 8' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform:translateX(-2px);
}
.carousel-arrow-btn.right-arrow::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 20'%3E%3Cpath d='M2 2l7 8-7 8' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform:translateX(2px);
}
.carousel-arrow-btn:hover{ opacity:1; }
.carousel-arrow-btn:hover::after{ opacity:1; }
.carousel-arrow-btn.left-arrow:hover{ background:linear-gradient(90deg,rgba(8,11,10,.99) 0%,rgba(0,255,156,.04) 55%,transparent 100%); }
.carousel-arrow-btn.right-arrow:hover{ background:linear-gradient(270deg,rgba(8,11,10,.99) 0%,rgba(0,255,156,.04) 55%,transparent 100%); }


/* Swipe-Hinweis: nur auf Mobile sichtbar (Default aus) */
.kv-swipe-hint{ display:none; }
@keyframes kvShPulse{ 0%,100%{ opacity:.3; transform:translateX(0);} 50%{ opacity:1; transform:translateX(3px);} }

/* ---------- PACKAGE EMOJI NAV ---------- */
#botSetupScope .pkg-nav{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  justify-content:center;
  margin-bottom:12px;
}
#botSetupScope .pkg-nav-btn{
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  font-size:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .15s, box-shadow .15s;
  padding:0;
  line-height:1;
  color:rgba(255,255,255,.6);
}
#botSetupScope .pkg-nav-icon{
  width:14px;
  height:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0.65;
}
#botSetupScope .pkg-nav-icon svg{
  width:14px;
  height:14px;
}
#botSetupScope .pkg-nav-btn:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.25);
  transform:scale(1.15);
}
#botSetupScope .pkg-nav-btn.active{
  border-color:rgba(0,255,156,.55);
  background:rgba(0,255,156,.12);
  box-shadow:0 0 8px rgba(0,255,156,.2);
  transform:scale(1.2);
}

/* ---------- BOT SETUP SECTION ---------- */
#bot-setup{
  max-width:1200px;
  margin:120px auto;
  padding:0 24px;
  position:relative;
  z-index:2;
}
#bot-setup h2{
  font-size:40px;
  margin-bottom:16px;
}
#bot-setup p{
  color:var(--muted);
  margin-bottom:40px;
}
.bot-wrapper{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
}

/* ---------- FEATURES (card style, second pass, overwrites editorial above) ---------- */
/* .features section itself stays a block container, .features-grid handles the 3-col layout */
.feature{
  background:linear-gradient(145deg,rgba(17,24,21,.88),rgba(10,14,12,.96));
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  transition: var(--card-transition);
  position:relative;
  overflow:hidden;
  border-right:none;
  box-shadow: var(--card-shadow);
}
.feature::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,255,156,.40),transparent);
  opacity:0;
  transition:opacity .3s;
  display:block;
}
.feature:hover{
  transform: translateY(var(--card-hover-y));
  border: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover), 0 0 28px rgba(0,255,156,.07);
}
.feature:hover::before{
  opacity:1;
}

/* ---------- REVIEWS (old rules removed, replaced by marquee CSS above) ---------- */

/* code-preview section removed */

/* ============================================================
   P29: FEATURES Bento-Layout (kein 3-gleiche-Cards-Pattern mehr)
   ============================================================ */
#features .features-grid{
  display:grid !important;
  grid-template-columns:repeat(6, 1fr);
  gap:18px;
}
#features .feature{
  background:none;
  border:none;
  box-shadow:none;
  padding:0;
  border-radius:0;
  position:relative;
  overflow:visible;
  display:flex;
  flex-direction:column;
}
#features .feature::before{display:none}

/* Card 1 — "Liest Website" — groß, mit Visual */
#features .feature:nth-child(1){
  grid-column:span 4;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(0,255,156,.10), transparent 60%),
    linear-gradient(155deg, rgba(17,24,21,.95), rgba(10,14,12,.98));
  border:1px solid rgba(0,255,156,.20);
  border-radius:20px;
  padding:34px 34px 30px;
  min-height:280px;
  overflow:hidden;
}
/* altes leeres Browser-Mockup deaktiviert — durch echte Scan-Vorschau ersetzt */
#features .feature:nth-child(1)::after{ display:none !important; }
#features .feature:nth-child(1){ padding-right:300px; }
#features .feature:nth-child(1) h3{ max-width:300px; }
#features .feature:nth-child(1) p{ max-width:360px; }

/* gemeinsame Deko-Container */
.feat-art{ position:absolute; pointer-events:none; user-select:none; }

/* Card 1 — „Website wird gelesen": Mini-Browser MIT Inhalt + grüner Scan-Strahl */
.feat-art-scan{ top:50%; right:30px; transform:translateY(-50%); width:250px; }
.fas-win{
  position:relative; border-radius:12px; overflow:hidden;
  background:linear-gradient(160deg,#0e1513,#0a0d0c);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 22px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.02);
}
.fas-bar{ display:flex; align-items:center; gap:6px; height:30px; padding:0 12px;
  background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.06); }
.fas-bar i{ width:8px; height:8px; border-radius:50%; flex:none; }
.fas-bar i:nth-child(1){ background:#ff5f56; }
.fas-bar i:nth-child(2){ background:#ffbd2e; }
.fas-bar i:nth-child(3){ background:#27c93f; }
.fas-url{ margin-left:8px; font-size:9px; letter-spacing:.03em; color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.05); border-radius:5px; padding:2px 8px; font-family:'DM Sans',sans-serif; white-space:nowrap; }
.fas-body{ padding:14px; display:flex; flex-direction:column; gap:8px; }
.fas-hero{ height:40px; border-radius:7px;
  background:linear-gradient(135deg, rgba(0,255,156,.22), rgba(34,211,238,.10));
  border:1px solid rgba(0,255,156,.14); }
.fas-line{ height:7px; border-radius:4px; background:rgba(255,255,255,.10); }
.fas-line.w90{ width:90%; } .fas-line.w80{ width:80%; }
.fas-line.w70{ width:70%; } .fas-line.w50{ width:50%; }
.fas-beam{ position:absolute; left:0; right:0; top:30px; height:36px;
  background:linear-gradient(180deg, transparent, rgba(0,255,156,.20), transparent);
  box-shadow:0 0 18px 4px rgba(0,255,156,.10);
  animation:fasScan 3.6s ease-in-out infinite; }
@keyframes fasScan{
  0%{ transform:translateY(0); opacity:0; }
  14%{ opacity:1; }
  86%{ opacity:1; }
  100%{ transform:translateY(150px); opacity:0; }
}
@media(prefers-reduced-motion:reduce){ .fas-beam{ animation:none; opacity:.45; } }
@media(max-width:760px){
  #features .feature:nth-child(1){ padding-right:24px; }
  #features .feature:nth-child(1) h3, #features .feature:nth-child(1) p{ max-width:none; }
  .feat-art-scan{ display:none; }
}

/* Card 2 — "Bucht Termine" — kompakt, vertikal-akzent */
#features .feature:nth-child(2){
  grid-column:span 2;
  background:rgba(17,24,21,.6);
  border-left:3px solid var(--green);
  border-radius:0 14px 14px 0;
  padding:28px 22px;
  min-height:280px;
  position:relative;
}
/* altes Gitter-Quadrat deaktiviert — durch Mini-Kalender ersetzt */
#features .feature:nth-child(2)::after{ display:none !important; }
#features .feature:nth-child(2){ padding-bottom:96px; }

/* Card 2 — „Bucht Termine": Mini-Kalender mit gebuchtem Tag (grün) */
.feat-art-cal{ bottom:22px; right:20px; width:72px; }
.fac{ border-radius:9px; overflow:hidden;
  background:linear-gradient(160deg,#0e1513,#0a0d0c);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 28px rgba(0,0,0,.4); }
.fac-head{ height:13px; background:linear-gradient(90deg, var(--green), #22d3ee); opacity:.85; }
.fac-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; padding:7px; }
.fac-grid i{ aspect-ratio:1; border-radius:2px; background:rgba(255,255,255,.09); }
.fac-grid i.on{ background:var(--green); box-shadow:0 0 7px rgba(0,255,156,.5); }
@media(max-width:760px){
  #features .feature:nth-child(2){ padding-bottom:88px; }
  .feat-art-cal{ width:64px; bottom:16px; right:16px; }
}

/* Card 3 — "Telefon und Chat" — full bleed, horizontal Split */
#features .feature:nth-child(3){
  grid-column:span 6;
  display:grid;
  grid-template-columns:64px 1fr 1fr;
  gap:32px;
  align-items:center;
  background:
    linear-gradient(90deg, rgba(99,102,241,.04) 0%, rgba(34,211,238,.04) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:28px 32px;
  min-height:auto;
  margin-top:6px;
}
#features .feature:nth-child(3) .feature-num{
  margin:0;
  font-size:48px;
  font-weight:800;
  color:rgba(0,255,156,.18);
  text-align:center;
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:-.04em;
  opacity:1;
  text-transform:none;
  line-height:1;
}
#features .feature:nth-child(3) h3{
  grid-column:2;
  margin:0;
  font-size:20px;
}
#features .feature:nth-child(3) p{
  grid-column:3;
  margin:0;
  font-size:14.5px;
  line-height:1.65;
}
@media(max-width:760px){
  #features .features-grid{grid-template-columns:1fr; gap:14px}
  #features .feature:nth-child(1),
  #features .feature:nth-child(2),
  #features .feature:nth-child(3){grid-column:span 1}
  #features .feature:nth-child(3){grid-template-columns:1fr; gap:8px}
  #features .feature:nth-child(3) h3{grid-column:1}
  #features .feature:nth-child(3) p{grid-column:1}
}

/* Hover: subtile Anhebung pro Card */
#features .feature{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
#features .feature:hover{transform:translateY(-3px)}
#features .feature:nth-child(1):hover{border-color:rgba(0,255,156,.35); box-shadow:0 20px 60px rgba(0,255,156,.08)}
#features .feature:nth-child(2):hover{border-left-color:#22d3ee}
#features .feature:nth-child(3):hover{border-color:rgba(255,255,255,.22)}

/* Feature-Num bekommt mehr Kontrast (außer Card 3 oben überschrieben) */
#features .feature:nth-child(1) .feature-num,
#features .feature:nth-child(2) .feature-num{
  opacity:.9;
  color:var(--green);
}

/* ============================================================
   P29: ABOUT Editorial-Storyline (keine 3 gleichen Cards mehr)
   ============================================================ */
#about .about-inner{ max-width:1180px !important; }
#about .about-heading{ max-width:780px; }
#about .about-lead{ max-width:760px; }
#about .about-grid{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:60px !important;
  margin-top:42px !important;
  align-items:start;
  position:relative;
}
#about .about-grid::before{
  content:'';
  position:absolute;
  left:50%;
  top:8px;
  bottom:8px;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.10) 30%, rgba(255,255,255,.10) 70%, transparent);
}
@media(max-width:760px){ #about .about-grid::before{display:none} }

/* Linke Spalte: erster Block als großes Pull-Statement */
#about .about-block:nth-child(1){
  grid-column:1;
  grid-row:1 / span 3;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
}
#about .about-block:nth-child(1) .about-num-ghost,
#about .about-block:nth-child(1) .about-num-badge{ display:none !important; }
#about .about-block:nth-child(1) .about-icon-wrap{
  width:64px; height:64px;
  border-radius:14px;
  margin-bottom:6px;
}
#about .about-block:nth-child(1) .about-icon-wrap svg{ width:30px; height:30px; }
#about .about-block:nth-child(1) h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(26px,2.6vw,34px) !important;
  font-weight:800;
  letter-spacing:-.022em;
  color:#fff;
  line-height:1.15;
  margin:6px 0 8px !important;
}
#about .about-block:nth-child(1) p{
  font-size:16px !important;
  color:#cbd5e1 !important;
  line-height:1.65;
  max-width:460px;
}

/* Rechte Spalte: Blöcke 2+3 als minimale, nummerierte Listen-Items */
#about .about-block:nth-child(2),
#about .about-block:nth-child(3){
  grid-column:2;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 0 0 24px !important;
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 18px;
  align-items:start;
}
#about .about-block:nth-child(2){ grid-row:1; margin-bottom:32px; }
#about .about-block:nth-child(3){ grid-row:2; }

#about .about-block:nth-child(2) .about-num-ghost,
#about .about-block:nth-child(2) .about-num-badge,
#about .about-block:nth-child(3) .about-num-ghost,
#about .about-block:nth-child(3) .about-num-badge{ display:none !important; }

#about .about-block:nth-child(2) .about-icon-wrap,
#about .about-block:nth-child(3) .about-icon-wrap{
  width:40px; height:40px;
  border-radius:10px;
  grid-row:1 / span 2;
}
#about .about-block:nth-child(2) h3,
#about .about-block:nth-child(3) h3{
  grid-column:2;
  margin:4px 0 6px !important;
  font-size:18px !important;
  font-weight:700;
  letter-spacing:-.012em;
  color:#fff;
  line-height:1.3;
}
#about .about-block:nth-child(2) p,
#about .about-block:nth-child(3) p{
  grid-column:2;
  margin:0 !important;
  font-size:14px !important;
  color:#9aa3a0 !important;
  line-height:1.65;
}

/* Numerische Akzent-Linien links neben den Punkten 2+3 */
#about .about-block:nth-child(2)::before,
#about .about-block:nth-child(3)::before{
  content:'';
  position:absolute;
  left:0; top:14px; bottom:14px;
  width:2px;
  background:rgba(var(--ab-c, 255 255 255), .35);
  border-radius:2px;
  opacity:0;
  transition:opacity .3s;
}
#about .about-block:nth-child(2):hover::before,
#about .about-block:nth-child(3):hover::before{ opacity:1; }

#about .about-block:hover{ transform:none !important; }

/* ── ÜBER-UNS: bedeutungsvolle Mini-Visuals (gleicher Stil wie Features) ── */
.about-art{ pointer-events:none; user-select:none; }

/* Block 1 — Anruf-Routing: die meisten Anrufe übernimmt die KI, nur die wertvollen ans Team */
#about .about-block:nth-child(1) .ab-calls{
  margin-top:24px; max-width:330px;
  display:flex; flex-direction:column; gap:9px;
  padding:15px; border-radius:14px;
  background:linear-gradient(160deg, rgba(17,24,21,.72), rgba(10,14,12,.88));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.abc-row{ display:flex; align-items:center; gap:10px; opacity:.5; }
.abc-row .abc-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); flex:none; }
.abc-row .abc-bar{ height:7px; border-radius:4px; background:rgba(255,255,255,.12); }
.abc-row .abc-tag{ margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.05em;
  color:rgba(255,255,255,.5); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08); border-radius:5px; padding:2px 8px; font-family:'DM Sans',sans-serif; }
.abc-row.on{ opacity:1; }
.abc-row.on .abc-dot{ background:var(--green); box-shadow:0 0 8px rgba(0,255,156,.55); }
.abc-row.on .abc-bar{ background:linear-gradient(90deg, rgba(0,255,156,.55), rgba(0,255,156,.16)); }
.abc-row.on .abc-tag{ color:#06140d; background:var(--green); border-color:transparent; }

/* Blöcke 2+3 — kleine Panels in Spalte 2, unter dem Text */
#about .about-block:nth-child(2) .about-art,
#about .about-block:nth-child(3) .about-art{ grid-column:2; margin-top:16px; }

/* Block 2 — transparente Preisliste */
.ab-price{ display:flex; flex-direction:column; gap:8px; max-width:240px;
  padding:12px 15px; border-radius:12px;
  background:rgba(34,211,238,.05); border:1px solid rgba(34,211,238,.16); }
.abp-row{ display:flex; align-items:center; gap:10px; }
.abp-name{ font-size:12px; font-weight:600; color:#cbd5e1; font-family:'DM Sans',sans-serif; }
.abp-dots{ flex:1; height:1px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.20) 0 2px, transparent 2px 6px); }
.abp-chip{ font-size:13px; font-weight:800; color:#22d3ee; font-family:'Space Grotesk',sans-serif; }

/* Block 3 — EU-/Verschlüsselungs-Badge */
.ab-eu{ display:flex; align-items:center; gap:13px; max-width:270px;
  padding:12px 15px; border-radius:12px;
  background:rgba(129,140,248,.06); border:1px solid rgba(129,140,248,.18); }
.abe-ring{ width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(129,140,248,.12); border:1.5px dashed rgba(129,140,248,.5); }
.abe-ring b{ font-size:12px; font-weight:800; color:#aab2ff; letter-spacing:.02em; font-family:'Space Grotesk',sans-serif; }
.abe-tag{ font-size:11.5px; font-weight:600; color:#aeb4d0; font-family:'DM Sans',sans-serif; line-height:1.45; }

@media(max-width:760px){
  #about .about-block:nth-child(1) .ab-calls{ max-width:none; }
}

@media(max-width:760px){
  #about .about-grid{
    grid-template-columns:1fr !important;
    gap:36px !important;
  }
  #about .about-block:nth-child(1),
  #about .about-block:nth-child(2),
  #about .about-block:nth-child(3){
    grid-column:1; grid-row:auto;
  }
  #about .about-block:nth-child(2),
  #about .about-block:nth-child(3){
    padding-left:18px !important;
    margin-bottom:0;
  }
}

/* ---------- CONTACT ---------- */
.contact{
  max-width:900px;
  margin:120px auto;
  padding:0 24px 160px;
}
.contact form{
  display:grid;
  gap:18px;
}
.contact input,.contact textarea{
  background:rgba(14,20,17,.90);
  border:1px solid rgba(255,255,255,.09);
  color:#fff;
  padding:16px;
  border-radius:12px;
  font-size:16px;  /* iOS no-zoom on focus */
  transition:border-color .25s, box-shadow .25s;
  outline:none;
}
.contact input:focus,.contact textarea:focus{
  border-color:rgba(0,255,156,.38);
  box-shadow:0 0 0 3px rgba(0,255,156,.08);
}

/* ---------- ABOUT / MISSION ---------- */
.about-mission{
  max-width:1200px;
  margin:120px auto;
  padding:0 24px;
}
.about-inner{
  background:linear-gradient(145deg,rgba(15,22,18,.88),rgba(10,14,12,.96));
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  padding:64px;
  position:relative;
  overflow:hidden;
  box-shadow:0 4px 32px rgba(0,0,0,.40), inset 0 1px 0 rgba(0,255,156,.06);
}
.about-inner::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,255,156,.35),transparent);
}
.about-heading{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:clamp(28px,3vw,46px);
  font-weight:800;
  letter-spacing:-0.3px;
  line-height:1.25;
  margin-bottom:16px;
  overflow:visible;
}
.about-lead{
  font-size:16px;
  color:var(--muted);
  line-height:1.7;
  max-width:680px;
  margin-bottom:52px;
}
.about-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.about-block{
  --ab-c: 0,255,156;
  background:linear-gradient(145deg,rgba(15,22,18,.90),rgba(10,14,12,.95));
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  padding:32px;
  transition:transform .3s,border-color .3s,box-shadow .3s;
  position:relative;overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
  background-image:
    radial-gradient(circle at 100% 0%, rgba(var(--ab-c),.08) 0%, transparent 50%),
    linear-gradient(145deg,rgba(15,22,18,.90),rgba(10,14,12,.95));
}
.about-block::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,255,156,.35),transparent);
  opacity:0;transition:opacity .3s;
}
.about-block:hover{
  transform:translateY(-5px);
  border-color:rgba(0,255,156,.30);
  box-shadow:0 12px 44px rgba(0,0,0,.45),0 0 24px rgba(0,255,156,.07);
}
.about-block:hover::before{ opacity:1; }
.about-icon{
  font-size:28px;
  display:block;
  margin-bottom:16px;
}
.about-num-ghost{
  position:absolute;
  top:-8px; right:16px;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:110px;font-weight:900;
  color:rgba(255,255,255,.03);
  line-height:1;pointer-events:none;
  user-select:none;letter-spacing:-4px;
}
.about-icon-wrap{
  width:46px;height:46px;border-radius:12px;
  border:1px solid rgba(0,255,156,.22);
  background:rgba(0,255,156,.10);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;flex-shrink:0;
}
.about-num-badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(0,255,156,.85);
  background:rgba(0,255,156,.10);
  border:1px solid rgba(0,255,156,.22);
  border-radius:6px;padding:3px 9px;
  margin-bottom:14px;
  font-family:'DM Sans',system-ui,sans-serif;
}
.about-block h3{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:18px;
  font-weight:700;
  margin-bottom:10px;
  line-height:1.3;
}
.about-block p{
  font-size:14.5px;
  color:var(--muted);
  line-height:1.65;
}
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .about-inner{padding:36px 28px}
}

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid var(--border); padding:64px 24px 40px; }
.footer-inner{ max-width:1200px; margin:auto; display:grid; grid-template-columns:1.6fr auto auto; gap:32px 56px; align-items:start; }
.footer-navhead{ font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#6b7280; margin-bottom:2px; }
.footer-trust{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.footer-trust span{ font-size:11px; font-weight:600; color:#a7f3d0; background:rgba(0,255,156,.07); border:1px solid rgba(0,255,156,.18); padding:5px 10px; border-radius:999px; }
.footer-mail{ display:inline-block; margin-top:14px; color:var(--green); font-size:13px; text-decoration:none; font-weight:600; }
.footer-mail:hover{ text-decoration:underline; }

/* ---------- PERFORMANCE: Offscreen-Sektionen überspringen Render-Arbeit ----------
   content-visibility:auto = der Browser rendert eine Sektion erst, wenn sie in die
   Nähe des Viewports kommt -> deutlich flüssigeres Scrollen auf der langen Seite. */
#features, #about, #faq, #contact{
  content-visibility:auto;
  contain-intrinsic-size:auto 720px;
}

/* ---------- BUSINESS-SCAN (Lead-Magnet, weit oben) ---------- */
#business-scan{ max-width:1060px; margin:48px auto 64px; padding:0 24px; }
/* offen statt Kasten — Inhalt schwebt frei auf dem Seiten-Hintergrund (kein Box-in-Box) */
.bscan-card{
  position:relative; border:none; background:none; padding:0; overflow:visible;
}
.bscan-card::before{
  content:''; position:absolute; top:-35%; right:-5%; width:340px; height:340px;
  background:radial-gradient(circle, rgba(0,255,156,.07), transparent 70%); pointer-events:none; z-index:-1;
}
.bscan-eyebrow{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800;
  letter-spacing:.4px; text-transform:uppercase; color:#06120c; background:var(--green);
  padding:5px 11px; border-radius:999px; margin-bottom:14px; font-size:11px;
}
.bscan-h2{
  font-family:'Space Grotesk',system-ui,sans-serif; font-size:clamp(23px,2.6vw,32px);
  font-weight:800; line-height:1.18; letter-spacing:-.5px; color:#fff; margin-bottom:10px; overflow:visible;
}
.bscan-lead{ color:var(--muted); font-size:14px; line-height:1.6; max-width:520px; margin-bottom:18px; }
/* EIN großer CTA statt Formular+Report-Mockup (2026-07): Glow-Atmen + conic-Randlauf
   lenken den Blick auf den einen Klick — volle Analyse lebt auf /business-scan.html */
.bscan-cta-row{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:26px; }
.bscan-cta-btn{
  position:relative; display:inline-flex; align-items:center; gap:12px; isolation:isolate;
  padding:clamp(16px,2vw,21px) clamp(26px,3.4vw,42px); border-radius:16px;
  background:oklch(88% .24 160); color:oklch(15% .03 160); text-decoration:none;
  font-family:'Space Grotesk',system-ui,sans-serif; font-weight:800;
  font-size:clamp(16px,1.8vw,19px); letter-spacing:-.2px;
  box-shadow:0 0 0 1px oklch(88% .24 160 / .40), 0 14px 44px oklch(88% .24 160 / .30);
  animation:bscanBreathe 4.5s ease-in-out infinite;
  transition:transform .18s;
}
.bscan-cta-btn:hover{ transform:translateY(-2px) scale(1.015); animation-play-state:paused; box-shadow:0 0 0 1px oklch(88% .24 160 / .55), 0 18px 60px oklch(88% .24 160 / .45); }
.bscan-cta-btn::before{
  content:''; position:absolute; inset:-3px; border-radius:19px; z-index:-1;
  background:conic-gradient(from var(--bscan-a,0deg), transparent 0 300deg, oklch(95% .18 160 / .9) 330deg, transparent 360deg);
  animation:bscanOrbit 3.6s linear infinite;
}
@property --bscan-a { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes bscanOrbit{ to{ --bscan-a:360deg; } }
@keyframes bscanBreathe{
  0%,100%{ box-shadow:0 0 0 1px oklch(88% .24 160 / .40), 0 14px 44px oklch(88% .24 160 / .30); }
  50%{ box-shadow:0 0 0 1px oklch(88% .24 160 / .60), 0 16px 64px oklch(88% .24 160 / .52); }
}
.bscan-cta-arrow{ transition:transform .18s; }
.bscan-cta-btn:hover .bscan-cta-arrow{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){
  .bscan-cta-btn, .bscan-cta-btn::before{ animation:none; }
}
.bscan-note{ font-size:11.5px; color:#6b7280; line-height:1.6; margin-top:2px; max-width:300px; }
.bscan-note b{ color:#a7f3d0; font-weight:600; }
@media(max-width:760px){
  #business-scan{ margin:44px auto 64px; padding:0 18px; }
  .bscan-cta-row{ gap:14px; }
  .bscan-cta-btn{ width:100%; justify-content:center; }
}
.footer-brand{ grid-column:1; }
.footer-logo{ font-family:'Space Grotesk',system-ui,sans-serif; font-size:22px; font-weight:800; color:var(--green); letter-spacing:.5px; margin-bottom:12px; }
.footer-tagline{ font-size:13px; color:var(--muted); line-height:1.6; max-width:360px; }
.footer-nav{ display:flex; flex-direction:column; gap:10px; }
.footer-nav a{ color:var(--muted); text-decoration:none; font-size:13px; transition:color .2s; }
.footer-nav a:hover{ color:var(--green); }
.footer-copy{ grid-column:1/-1; border-top:1px solid var(--border); padding-top:24px; font-size:12px; color:var(--muted); }
.footer-copy a{ color:var(--muted); text-decoration:none; }
.footer-copy a:hover{ color:var(--green); }
@media(max-width:640px){ .footer-inner{ grid-template-columns:1fr; } }

/* ---------- CONTACT HEADING ---------- */
.contact-heading{ font-family:'Space Grotesk',system-ui,sans-serif; font-size:clamp(28px,3vw,44px); font-weight:800; line-height:1.2; letter-spacing:-0.3px; margin-bottom:40px; overflow:visible; }

/* ---------- ABOUT NUM BADGES ---------- */
.about-num{ font-family:'Space Grotesk',system-ui,sans-serif; font-size:32px; font-weight:800; line-height:1; color:transparent; background:linear-gradient(135deg,var(--green),#22d3ee); -webkit-background-clip:text; background-clip:text; margin-bottom:18px; letter-spacing:-1px; }

/* ---------- HERO MOCKUP CHAT ---------- */
.mockup-chat{ position:absolute; inset:20px; display:flex; flex-direction:column; background:rgba(12,18,15,.96); border:1px solid rgba(0,255,156,.18); border-radius:16px; overflow:hidden; }
.mockup-bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid rgba(0,255,156,.08); }
.mockup-dot{ width:8px;height:8px;border-radius:50%; }
.mockup-dot.r{background:#ff5f57} .mockup-dot.y{background:#febc2e} .mockup-dot.g{background:#28c840}
.mockup-bar span{ margin-left:6px; flex:1; text-align:center; font-size:11px; font-weight:600; color:var(--muted); }
.mockup-head{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); }
.mockup-avatar{ width:36px;height:36px;border-radius:10px; background:linear-gradient(135deg,var(--green),#22d3ee); display:flex;align-items:center;justify-content:center; font-size:10px; font-weight:800; color:#000; flex-shrink:0; }
.mockup-name{ font-size:13px; font-weight:700; color:var(--text); }
.mockup-status{ font-size:11px; color:var(--muted); display:flex; align-items:center; gap:5px; margin-top:2px; }
.mdot{ width:6px;height:6px;border-radius:50%;background:var(--green); box-shadow:0 0 6px var(--green); animation:pulse 2s infinite; }
.mockup-msgs{ flex:1; padding:16px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.mmsg{ max-width:82%; padding:10px 14px; border-radius:14px; font-size:13px; line-height:1.5; }
.mmsg.bot{ background:rgba(0,255,156,.08); border:1px solid rgba(0,255,156,.12); color:rgba(255,255,255,.9); align-self:flex-start; border-bottom-left-radius:4px; }
.mmsg.user{ background:rgba(0,255,156,.18); border:1px solid rgba(0,255,156,.3); color:var(--text); align-self:flex-end; font-weight:500; border-bottom-right-radius:4px; }
.mmsg.typing{ display:flex;gap:5px;align-items:center;padding:12px 16px; background:rgba(0,255,156,.05); border:1px solid rgba(0,255,156,.08); align-self:flex-start; border-radius:14px; border-bottom-left-radius:4px; }
.mmsg.typing span{ width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.4; animation:typingBounce 1.2s infinite; }
.mmsg.typing span:nth-child(2){animation-delay:.2s}
.mmsg.typing span:nth-child(3){animation-delay:.4s}
@keyframes typingBounce{0%,60%,100%{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
/* ═══ MOBILE-POLISH (2026-07-07): Tap-Ziele ≥44px, lesbare Labels, Touch-Feinschliff — Messbefund 390px ═══ */
@media(max-width:640px){
  /* Burger-Menü war 30×30 — unter Apple/Google-Mindestgröße */
  #kvBurger{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  /* „Im Aufbau"-Banner: Schließen-Kreuz war 18×18 */
  #kivieo-dev-banner-close{ min-width:36px; min-height:36px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; }
  /* Footer-Links: 17px hoch + eng gestapelt → bequeme Tap-Zeilen */
  .footer-nav a, .footer-mail{ display:inline-block; padding:9px 4px; }
  /* Sektion-Nummern (Eyebrows) waren 10.5px → lesbar */
  .section-label{ font-size:11.5px !important; letter-spacing:.14em; }
  .bscan-preview-title{ font-size:11px !important; }
  /* Warenkorb „Wagen leeren" war 29px hoch */
  #kvcClear{ padding-top:12px; padding-bottom:12px; }
  /* Text-Links in Fließtext (Datenschutz etc.): vertikale Tap-Zone */
  .faq-list p a, #crForm p a, .kv-about-prose p a{ display:inline-block; padding:6px 2px; }
  /* Paket-Navigation: sauberes Touch-Scrollen + Einrasten */
  #pkgNav{ -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none; }
  #pkgNav::-webkit-scrollbar{ display:none; }
  #pkgNav .pkg-nav-btn{ scroll-snap-align:start; }
}
.mockup-inp{ padding:12px 14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.mockup-inp span{ flex:1; font-size:12px; color:rgba(255,255,255,.28); }
.mockup-send{ width:28px;height:28px; border-radius:8px; background:var(--green); color:#000; display:flex;align-items:center;justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }

/* ---------- CHAT WIDGET CONTAINER ---------- */
.chat-widget{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:1000;
}

/* Responsive */
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
  /* WICHTIG: kein padding-left bei stacked Mobile-Cards (Desktop-Reflex vermeiden) */
  .feature:not(:first-child){padding-left:0;}
  .stats-row{grid-template-columns:1fr 1fr;gap:32px}
  .wb-entry-card{padding: var(--card-padding-mobile);}
  .wb-entry-card{min-height: 180px;}
}
@media(max-width:600px){
  .wb-entry-card h3{font-size: 16px;}
  .wb-entry-card p{font-size: 13px;}
}

/* ===================== BOT-SETUP (SCOPED!) ===================== */
/* WICHTIG: Alles hier ist unter #botSetupScope isoliert, damit es NICHT body/landing überschreibt */
#botSetupScope{
  position:relative;
  width:100%;
}

/* Mini Analyze badge (scoped) - positioned on the LEFT so step indicator is visible */
#botSetupScope .anBadge{
  position:absolute;
  top:14px;
  left:14px;
  right:auto;
  z-index:5;
  width:200px;
  max-width:40%;
  border-radius:18px;
  background:rgba(15,15,15,.88);
  backdrop-filter:blur(14px);
  border:1px solid rgba(22,163,74,.25);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  padding:10px 12px;
  display:none;
}
@media(max-width:640px){
  #botSetupScope .anBadge{
    left:14px;
    top:60px;
    max-width:calc(100% - 28px);
  }
}
#botSetupScope .anBadge.show{display:block}
#botSetupScope .anTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
#botSetupScope .anTitle{font-weight:950;font-size:13px;color:rgba(255,255,255,.92)}
#botSetupScope .anState{font-size:12px;color:rgba(255,255,255,.62)}
#botSetupScope .anBar{height:6px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
#botSetupScope .anBar > div{height:100%;width:12%;background:linear-gradient(90deg,#16a34a,#22c55e);box-shadow:0 0 14px rgba(22,163,74,.45);animation:anMove 1.3s ease-in-out infinite}
@keyframes anMove{0%{transform:translateX(-40%)}50%{transform:translateX(40%)}100%{transform:translateX(-40%)}}

#botSetupScope .wrap{
  width:100%;
  max-width:960px;
  margin:0 auto;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}

#botSetupScope .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;padding-bottom:0;border-bottom:none}
#botSetupScope .brand{display:flex;gap:14px;align-items:center}
#botSetupScope .logoBox{
  width:44px;height:44px;border-radius:14px;
  background:radial-gradient(circle at 35% 30%, rgba(34,197,94,.35), rgba(22,163,74,.08) 55%, transparent 70%);
  border:1px solid rgba(22,163,74,.35);
  box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 22px rgba(22,163,74,.14);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#botSetupScope .logoBox img{width:28px;height:28px;object-fit:contain;mix-blend-mode:screen}
#botSetupScope .titleWrap{display:flex;flex-direction:column;gap:2px}
#botSetupScope .title{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700;font-size:20px;
  background:linear-gradient(135deg,#00ff9c 0%,#22d3ee 60%,#818cf8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1.2;display:inline-block;
}
#botSetupScope .subtitle{font-size:13px;color:rgba(255,255,255,.62);display:flex;gap:10px;align-items:center}
#botSetupScope .dot{
  width:7px;height:7px;border-radius:999px;background:#16a34a;
  box-shadow:0 0 12px rgba(22,163,74,.9);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

#botSetupScope .statusRight{text-align:right}
#botSetupScope .step{font-weight:900;font-size:13px;color:rgba(255,255,255,.65)}
#botSetupScope .bar{height:6px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:10px}
#botSetupScope .bar > div{height:100%;width:0%;background:linear-gradient(90deg,#16a34a,#22c55e);box-shadow:0 0 16px rgba(22,163,74,.5);transition:width .3s}

#botSetupScope .content{margin-top:18px;min-height:540px;overflow-y:auto;}

#botSetupScope .q{animation:in .22s ease}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
#botSetupScope .q h2{font-size:24px;font-weight:950;line-height:1.25;margin-bottom:8px}
#botSetupScope .q p{color:rgba(255,255,255,.62);line-height:1.5;margin-bottom:14px}

#botSetupScope .shell{border-radius:0;border:none;background:transparent;padding:0}

#botSetupScope .tabs{display:flex;gap:10px;margin:12px 0 14px;flex-wrap:wrap}
#botSetupScope .tab{
  border:none;cursor:pointer;font-family:inherit;
  font-weight:950;font-size:13px;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.12);transition:.2s;
  user-select:none;
}
#botSetupScope .tab.active{background:rgba(22,163,74,.16);border-color:rgba(22,163,74,.38);color:#a7f3d0}
#botSetupScope .tab:hover{transform:translateY(-1px);background:rgba(255,255,255,.09)}

/* ===== BOOK-SPINE CAROUSEL (SKILL1 GSAP + SKILL2 glassmorphism) ===== */
#botSetupScope .carousel{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:8px 0;
  align-items:stretch;
  height:540px;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
#botSetupScope .carousel::-webkit-scrollbar{height:6px}
#botSetupScope .carousel::-webkit-scrollbar-thumb{background:rgba(0,255,156,.18);border-radius:10px}

/* ═══════════════════════════════════════════════════════════════════
   3D-CAROUSEL-MODE (Desktop ≥768px, prefers-reduced-motion: no-preference)
   Aktiviert via JS-Klasse .is-3d am #pkgCarousel.
   Active card center, Seiten-Cards depth-staggered via translateZ/scale/rotateY/opacity.
   Premium AI-SaaS-Aesthetic: GSAP smooth interpolation, hover glow, parallax tilt.
   ═══════════════════════════════════════════════════════════════════ */
#botSetupScope .carousel.is-3d{
  position:relative;
  display:block;
  overflow:visible;
  perspective:1700px;
  perspective-origin:50% 45%;
  height:540px;
  padding:20px 0;
  transform:translateZ(0);
}
#botSetupScope .carousel.is-3d::-webkit-scrollbar{display:none}
#botSetupScope .carousel.is-3d .card{
  position:absolute;
  top:50%;
  left:50%;
  width:380px;
  max-width:92vw;
  height:460px;
  min-height:460px;
  max-height:460px;
  flex:none !important;
  flex-basis:380px !important;
  margin:0;
  transform-origin:center center;
  transform-style:preserve-3d;
  transform:translate3d(-50%,-50%,0);
  will-change:transform,opacity;
  transition:box-shadow .35s cubic-bezier(.22,1,.36,1);
  cursor:pointer;
  /* Card scrollable für längeren Inhalt, aber overscroll wird nach oben/unten an
     die Page weitergegeben (kein "stuck" am Card-Ende). */
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-y:auto;
  /* Scrollbar visuell entfernen (Card scrollt ohne sichtbaren Slider) */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
#botSetupScope .carousel.is-3d .card.expandable.expanded{
  flex:none !important;
  flex-basis:380px !important;
  width:380px;
}
/* Webkit-Scrollbar komplett verstecken (Firefox/IE schon via scrollbar-width:none) */
#botSetupScope .carousel.is-3d .card::-webkit-scrollbar{display:none;width:0;height:0}

/* Im 3D-Mode wird die pkg-nav (Icon-Schieber unter den Cards) ausgeblendet —
   Navigation läuft via Pfeile / Klick auf side-Cards / Wheel / Swipe / Tastatur. */
@media (min-width: 768px){
  #botSetupScope:has(.carousel.is-3d) #pkgNav{
    display:none !important;
  }
  /* Außerdem: der Wizard-Content-Container (#bs_content) bekommt overflow-x:hidden
     damit die absolute-positionierten 3D-Cards keinen horizontalen Scrollbar erzeugen. */
  #botSetupScope:has(.carousel.is-3d) #bs_content,
  #botSetupScope:has(.carousel.is-3d) .content{
    overflow-x:hidden !important;
  }
}

/* selectBtn-Row sticky am Card-Boden — IMMER sichtbar ohne scrollen.
   Funktioniert wenn .selectRow direkt im scrollenden Container (.card) liegt. */
#botSetupScope .carousel.is-3d .card .selectRow{
  position:sticky;
  bottom:0;
  background:linear-gradient(180deg, transparent 0%, rgba(8,12,10,.95) 25%, rgba(6,10,8,1) 100%);
  padding:14px 16px 16px;
  margin:18px -16px -16px;
  z-index:6;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#botSetupScope .carousel.is-3d .card[data-cx-active="true"] .selectBtn{
  box-shadow:0 6px 20px oklch(80% .24 145 / .35);
}
#botSetupScope .carousel.is-3d .card-spine{
  /* Spine bleibt sichtbar als Tab-Indikator, nicht mehr als collapsed-state */
  position:absolute;
  top:0;left:0;right:0;
  z-index:5;
}
#botSetupScope .carousel.is-3d .card[data-cx-active="true"]{
  cursor:default;
  box-shadow:
    0 32px 90px rgba(0,0,0,.65),
    0 0 0 1px oklch(80% .24 145 / .45),
    0 0 80px oklch(80% .24 145 / .18);
}
#botSetupScope .carousel.is-3d .card[data-cx-active="false"]:hover{
  box-shadow:
    0 26px 70px rgba(0,0,0,.55),
    0 0 0 1px oklch(80% .24 145 / .42),
    0 0 50px oklch(80% .24 145 / .25);
}
/* Animated conic border-glow nur auf active card */
#botSetupScope .carousel.is-3d .card[data-cx-active="true"]::after{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:conic-gradient(from var(--cx-spin,0deg),
    oklch(80% .24 145 / .55) 0%,
    transparent 22%,
    transparent 78%,
    oklch(80% .24 145 / .55) 100%);
  filter:blur(10px);
  opacity:.32;
  z-index:-1;
  pointer-events:none;
  animation:cxSpinBorder 9s linear infinite;
}
@keyframes cxSpinBorder{
  from{--cx-spin:0deg}
  to{--cx-spin:360deg}
}
@property --cx-spin{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

/* Subtile Licht-Bewegung im Card-Inneren — alle Cards, nicht nur active.
   Verwendet einen injizierten Layer (cx-card-flow), nicht ::after, damit
   active-card's conic-Border (existing ::after) ungestört bleibt.
   Per-card animation-delay sorgt für Phase-Variation. */
#botSetupScope .carousel.is-3d .card .cx-card-flow{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 30% 70%, rgba(var(--card-c),.07), transparent 65%),
    linear-gradient(115deg, transparent 38%, rgba(var(--card-c),.05) 50%, transparent 62%);
  background-size: 220% 220%, 280% 280%;
  background-position: 0% 0%, 100% 0%;
  mix-blend-mode:screen;
  opacity:.55;
  animation: cxCardFlow 32s linear infinite;
  animation-delay: var(--cx-flow-delay, 0s);
  will-change: background-position;
}
@keyframes cxCardFlow{
  0%   { background-position: 0% 0%,   100% 0%;   }
  50%  { background-position: 60% 100%, 30% 60%;  }
  100% { background-position: 0% 0%,   100% 0%;   }
}
/* Card-Content über dem Flow stacken — alles direkt unter .card bekommt z-index:1.
   .card-spine (existing z-index:5) und .selectRow (existing z-index:6) bleiben oben. */
#botSetupScope .carousel.is-3d .card > *:not(.card-spine):not(.selectRow):not(.cx-card-flow){
  position:relative;
  z-index:1;
}
/* Reduced-Motion: kein Flow */
@media (prefers-reduced-motion: reduce){
  #botSetupScope .carousel.is-3d .card .cx-card-flow{ animation:none; opacity:.30; }
}

/* Premium Glassmorphism-Arrows im 3D-Mode — Apple/Stripe-Glas-Optik.
   Klein, transparent, mit echter Tiefe via inset-highlights + grünem Ambient-Glow. */
#botSetupScope .carousel-wrapper:has(.carousel.is-3d) .carousel-arrow-btn{
  opacity:1;
  z-index:50;
  width:44px; height:44px;
  top:50%; transform:translateY(-50%);
  border-radius:50%;
  background:rgba(18,22,20,.42);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(0,255,156,.06),
    0 8px 32px rgba(0,0,0,.45),
    0 0 0 1px rgba(0,255,156,.18),
    0 0 24px rgba(0,255,156,.08);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    background .35s cubic-bezier(.22,1,.36,1),
    border-color .35s cubic-bezier(.22,1,.36,1),
    box-shadow .35s cubic-bezier(.22,1,.36,1);
}
/* Override base linear-gradient (rectangular) → runde glass-pills */
#botSetupScope .carousel-wrapper:has(.carousel.is-3d) .carousel-arrow-btn.left-arrow,
#botSetupScope .carousel-wrapper:has(.carousel.is-3d) .carousel-arrow-btn.right-arrow{
  background:rgba(18,22,20,.42);
  border-radius:50%;
  height:44px;
}
/* Refined chevron — dünner & kleiner */
#botSetupScope .carousel-wrapper:has(.carousel.is-3d) .carousel-arrow-btn::after{
  width:9px; height:16px;
  opacity:.85;
}
#botSetupScope .carousel-wrapper:has(.carousel.is-3d) .carousel-arrow-btn.left-arrow::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 20'%3E%3Cpath d='M9 2L2 10l7 8' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#botSetupScope .carousel-wrapper:has(.carousel.is-3d) .carousel-arrow-btn.right-arrow::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 20'%3E%3Cpath d='M2 2l7 8-7 8' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#botSetupScope .carousel-wrapper:has(.carousel.is-3d) .carousel-arrow-btn:hover{
  transform:translateY(-50%) scale(1.08);
  background:rgba(22,28,24,.55);
  border-color:rgba(0,255,156,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(0,255,156,.12),
    0 12px 40px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,255,156,.40),
    0 0 36px rgba(0,255,156,.22);
}
#botSetupScope .carousel-wrapper:has(.carousel.is-3d) .carousel-arrow-btn:hover::after{
  opacity:1;
}
#botSetupScope .carousel-wrapper:has(.carousel.is-3d) .carousel-arrow-btn:active{
  transform:translateY(-50%) scale(0.96);
  transition-duration:.12s;
}

/* Subtle vignette UNTER dem 3D-Carousel — Kontrast-Lift für Cards.
   Greift nur in der Carousel-Section, andere Sektionen unverändert. */
#botSetupScope .carousel-wrapper:has(.carousel.is-3d){
  position:relative;
  isolation:isolate;
}
#botSetupScope .carousel-wrapper:has(.carousel.is-3d)::before{
  content:'';
  position:absolute;
  inset:-40px -80px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 65% 55% at 50% 50%, oklch(6% .005 160 / .55), transparent 75%),
    radial-gradient(ellipse 85% 30% at 50% 100%, oklch(80% .24 145 / .04), transparent 70%);
  filter:blur(20px);
}

/* Mobile (<768px): 3D komplett aus, classic horizontal scroll bleibt */
@media (max-width: 767px){
  #botSetupScope .carousel.is-3d{
    perspective:none;
    display:flex;
    overflow-x:auto;
    height:540px;
    padding:8px 0;
    scroll-snap-type:x mandatory;
  }
  #botSetupScope .carousel.is-3d .card{
    position:relative;
    top:auto;left:auto;
    transform:none !important;
    opacity:1 !important;
    scroll-snap-align:start;
    flex:0 0 280px;
  }
  #botSetupScope .carousel.is-3d .card[data-cx-active="true"]::after{display:none}
}
/* Reduced-Motion: keine spin-animation, keine GSAP-tweens (JS handled) */
@media (prefers-reduced-motion: reduce){
  #botSetupScope .carousel.is-3d .card[data-cx-active="true"]::after{animation:none}
}

/* BASE CARD, wider spine by default. Nutzt Card-Tokens fuer radius/border. */
#botSetupScope .card{
  position:relative;
  flex:0 0 180px;
  min-height:100%;
  border-radius: var(--card-radius);
  border: var(--card-border);
  background:linear-gradient(180deg,rgba(0,255,156,.08) 0%,rgba(10,10,10,.70) 100%);
  cursor:pointer;
  overflow:hidden;
  transition:flex-basis .28s cubic-bezier(.2,.7,.3,1),
             border-color .2s, box-shadow .2s, transform .2s;
  user-select:none;
}
/* Per-card color themes, --card-c drives glow, shimmer, hover & selected ring */
/* Radial gradient at top-right is the color identity layer, visible at all times */
#botSetupScope .card{ --card-c: 0,255,156; }
#botSetupScope .card[data-color="green"]  { --card-c:0,255,156;   border-color:rgba(0,255,156,.28);   background:radial-gradient(circle at 100% 0%, rgba(0,255,156,.32) 0%, transparent 55%), url(/card-rezeptionist.webp) center/cover no-repeat; }
#botSetupScope .card[data-color="blue"]   { --card-c:59,130,246;  border-color:rgba(59,130,246,.28);  background:radial-gradient(circle at 100% 0%, rgba(59,130,246,.32) 0%, transparent 55%), url(/card-buchhaltung.webp)  center/cover no-repeat; }
#botSetupScope .card[data-color="purple"] { --card-c:167,139,250; border-color:rgba(167,139,250,.28); background:radial-gradient(circle at 100% 0%, rgba(167,139,250,.30) 0%, transparent 55%), url(/card-termin.webp)       center/cover no-repeat; }
#botSetupScope .card[data-color="orange"] { --card-c:249,115,22;  border-color:rgba(249,115,22,.28);  background:radial-gradient(circle at 100% 0%, rgba(249,115,22,.32) 0%, transparent 55%), url(/card-orange.webp) center/cover no-repeat; }
#botSetupScope .card[data-color="cyan"]   { --card-c:34,211,238;  border-color:rgba(34,211,238,.28);  background:radial-gradient(circle at 100% 0%, rgba(34,211,238,.30) 0%, transparent 55%), url(/card-cyan.webp)   center/cover no-repeat; }
#botSetupScope .card[data-color="yellow"] { --card-c:251,191,36;  border-color:rgba(251,191,36,.28);  background:radial-gradient(circle at 100% 0%, rgba(251,191,36,.30) 0%, transparent 55%), url(/card-yellow.webp) center/cover no-repeat; }
#botSetupScope .card[data-color="pink"]   { --card-c:236,72,153;  border-color:rgba(236,72,153,.28);  background:radial-gradient(circle at 100% 0%, rgba(236,72,153,.30) 0%, transparent 55%), url(/card-pink.webp)   center/cover no-repeat; }
#botSetupScope .card[data-color="teal"]   { --card-c:20,184,166;  border-color:rgba(20,184,166,.28);  background:radial-gradient(circle at 100% 0%, rgba(20,184,166,.30) 0%, transparent 55%), url(/card-teal.webp)   center/cover no-repeat; }
#botSetupScope .card[data-color="indigo"] { --card-c:99,102,241;  border-color:rgba(99,102,241,.28);  background:radial-gradient(circle at 100% 0%, rgba(99,102,241,.30) 0%, transparent 55%), url(/card-indigo.webp) center/cover no-repeat; }
#botSetupScope .card[data-color="red"]    { --card-c:239,68,68;   border-color:rgba(239,68,68,.28);   background:radial-gradient(circle at 100% 0%, rgba(239,68,68,.30) 0%, transparent 55%), url(/card-red.webp)    center/cover no-repeat; }
#botSetupScope .card[data-color="amber"]  { --card-c:217,119,6;   border-color:rgba(217,119,6,.28);   background:radial-gradient(circle at 100% 0%, rgba(217,119,6,.32) 0%, transparent 55%), url(/card-amber.webp)  center/cover no-repeat; }
#botSetupScope .card[data-color="lime"]   { --card-c:132,204,22;  border-color:rgba(132,204,22,.28);  background:radial-gradient(circle at 100% 0%, rgba(132,204,22,.30) 0%, transparent 55%), url(/card-lime.webp)   center/cover no-repeat; }
/* Violet (Buchhaltung), eigenes /card-violet.png (Hue-shifted aus indigo, klar lila statt blau) */
#botSetupScope .card[data-color="violet"] { --card-c:139,92,246;  border-color:rgba(139,92,246,.28);  background:radial-gradient(circle at 100% 0%, rgba(139,92,246,.32) 0%, transparent 55%), url(/card-violet.webp) center/cover no-repeat; } /* PERF 2026-07-08: 82KB PNG -> 7KB webp */

/* === Buchhaltung Plan-Tiles in Bot-Setup-Card (vorher inline) === */
.buch-plan-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.buch-plan-tile{
  display: block;
  padding: 12px 14px;
  border-radius: var(--card-radius-inner);
  background: rgba(139,92,246,.10);
  border: 1px solid rgba(139,92,246,.30);
  text-decoration: none;
  color: #fff;
  transition: background .2s, border-color .2s, transform .15s;
}
.buch-plan-tile:hover{
  background: rgba(139,92,246,.18);
  border-color: rgba(139,92,246,.55);
  transform: translateY(-1px);
}
.buch-plan-tile.featured{
  background: rgba(139,92,246,.22);
  border-color: #8b5cf6;
  box-shadow: 0 0 0 1px rgba(139,92,246,.40), 0 4px 18px rgba(139,92,246,.20);
}
.buch-plan-row{
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.buch-plan-name{
  font-size: 13px; font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
}
.buch-plan-star{ color:#fbbf24; }
.buch-plan-prices{
  display: inline-flex; align-items: baseline; gap: 5px;
}
.buch-plan-old{ font-size:11px; color:#94a3b8; text-decoration:line-through; }
.buch-plan-new{ font-size:15px; font-weight:800; color:#c4b5fd; }
.buch-plan-calls{ font-size:11px; color:#a3a3a3; margin-top:3px; }
.buch-detail-btn{
  text-decoration: none; display:inline-block; text-align:center;
  background: rgba(139,92,246,.18);
  color: #c4b5fd;
  border: 1px solid rgba(139,92,246,.30);
}
.buch-detail-btn:hover{ background: rgba(139,92,246,.28); border-color: rgba(139,92,246,.5); color:#fff; }
/* Spine accent line colors */
#botSetupScope .card[data-color="green"]  .spine-line { background:linear-gradient(90deg,rgba(0,255,156,.8),rgba(34,211,238,.6)); }
#botSetupScope .card[data-color="blue"]   .spine-line { background:linear-gradient(90deg,rgba(59,130,246,.8),rgba(147,197,253,.6)); }
#botSetupScope .card[data-color="purple"] .spine-line { background:linear-gradient(90deg,rgba(167,139,250,.8),rgba(196,181,253,.6)); }
#botSetupScope .card[data-color="orange"] .spine-line { background:linear-gradient(90deg,rgba(249,115,22,.8),rgba(253,186,116,.6)); }
#botSetupScope .card[data-color="cyan"]   .spine-line { background:linear-gradient(90deg,rgba(34,211,238,.8),rgba(103,232,249,.6)); }
#botSetupScope .card[data-color="yellow"] .spine-line { background:linear-gradient(90deg,rgba(251,191,36,.8),rgba(253,224,71,.6)); }
#botSetupScope .card[data-color="pink"]   .spine-line { background:linear-gradient(90deg,rgba(236,72,153,.8),rgba(244,114,182,.6)); }
#botSetupScope .card[data-color="teal"]   .spine-line { background:linear-gradient(90deg,rgba(20,184,166,.8),rgba(94,234,212,.6)); }
#botSetupScope .card[data-color="indigo"] .spine-line { background:linear-gradient(90deg,rgba(99,102,241,.8),rgba(165,180,252,.6)); }
#botSetupScope .card[data-color="red"]    .spine-line { background:linear-gradient(90deg,rgba(239,68,68,.8),rgba(252,165,165,.6)); }
#botSetupScope .card[data-color="amber"]  .spine-line { background:linear-gradient(90deg,rgba(217,119,6,.8),rgba(252,211,77,.6)); }
#botSetupScope .card[data-color="lime"]   .spine-line { background:linear-gradient(90deg,rgba(132,204,22,.8),rgba(190,242,100,.6)); }
#botSetupScope .card[data-color="violet"] .spine-line { background:linear-gradient(90deg,rgba(139,92,246,.8),rgba(196,181,253,.6)); }
/* EXPANDED state */
#botSetupScope .card.expandable.expanded{
  flex-basis:640px;
  flex-shrink:0;
  border-color:rgba(var(--card-c),.55);
}
/* shimmer top edge, uses card's own color */
#botSetupScope .card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--card-c),.55),transparent);
  opacity:.6;
}
#botSetupScope .card:hover{
  border-color:rgba(var(--card-c),.55);
  box-shadow:0 8px 28px rgba(0,0,0,.45), 0 0 24px rgba(var(--card-c),.15);
}
#botSetupScope .card.selected{
  /* outline ring, avoids layout shift, PNG background preserved */
  outline: 2px solid rgba(var(--card-c), 0.88);
  outline-offset: 2px;
  border-color:rgba(var(--card-c),.75);
  box-shadow:0 0 0 5px rgba(var(--card-c),.12), 0 16px 56px rgba(var(--card-c),.28);
  /* NO background override, card PNG stays visible */
}
#botSetupScope .card.disabled{opacity:0.55;cursor:pointer} /* disabled cards still expandable */
#botSetupScope .card.disabled .selectBtn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.35);cursor:not-allowed;pointer-events:none}
#botSetupScope .card.disabled .badge{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.40)}

/* ---- SPINE VIEW (visible when card is closed) ---- */
#botSetupScope .card-spine{
  display:flex;
  flex-direction:column;
  align-items:center;
  height:100%;
  padding:16px 0 14px;
  pointer-events:none; /* card itself is the click target */
}
#botSetupScope .card.expandable.expanded .card-spine{
  display:none;
}
/* Title text, BOOK SPINE: bottom → top */
#botSetupScope .spine-name{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:13px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.97);
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  line-height:180px; /* matches card width */
}
/* SVG icon at the bottom of spine */
#botSetupScope .spine-icon{
  width:26px;
  height:26px;
  margin-top:10px;
  flex-shrink:0;
  opacity:0.82;
  color:rgba(255,255,255,0.9);
}
#botSetupScope .spine-icon svg{
  width:100%;
  height:100%;
  display:block;
}
/* Accent line at top of spine */
#botSetupScope .spine-line{
  width:24px;height:2px;
  background:linear-gradient(90deg,rgba(0,255,156,.7),rgba(34,211,238,.5));
  border-radius:2px;
  margin-bottom:14px;
  flex-shrink:0;
}

/* ---- FULL CONTENT (visible when card is EXPANDED) ---- */
#botSetupScope .card-content{
  display:none;
  flex-direction:column;
  height:100%;
  overflow-y:auto;
  padding:28px 32px;
}
#botSetupScope .card.expandable.expanded .card-content{
  display:flex;
}
#botSetupScope .card-content::-webkit-scrollbar{width:4px}
#botSetupScope .card-content::-webkit-scrollbar-thumb{background:rgba(0,255,156,.2);border-radius:4px}

/* expandContent inside card-content, always visible when card is open */
#botSetupScope .expandContent{display:block;margin-top:12px;}

/* ── CARD SCENE & VEIL: organic SVG art per card ── */
.card-veil{position:absolute;top:-25%;right:-18%;width:75%;height:150%;border-radius:42% 58% 55% 45%/52% 48% 52% 48%;background:radial-gradient(ellipse at 62% 44%,rgba(var(--veil-rgb),.22) 0%,rgba(var(--veil-rgb),.08) 42%,transparent 68%);filter:blur(38px);pointer-events:none;z-index:0;animation:cardVeilFloat 13s ease-in-out infinite;will-change:transform;mix-blend-mode:screen;}
.card-veil-2{position:absolute;bottom:-18%;right:8%;width:55%;height:65%;border-radius:55% 45% 38% 62%/48% 62% 38% 52%;background:radial-gradient(ellipse at 50% 58%,rgba(var(--veil-rgb),.13) 0%,transparent 65%);filter:blur(22px);pointer-events:none;z-index:0;animation:cardVeilFloat2 17s ease-in-out infinite reverse;will-change:transform;mix-blend-mode:screen;}
@keyframes cardVeilFloat{0%{border-radius:42% 58% 55% 45%/52% 48% 52% 48%;transform:translate(0,0) scale(1)}18%{border-radius:56% 44% 42% 58%/44% 56% 48% 52%;transform:translate(-4%,-8%) scale(1.06)}36%{border-radius:44% 56% 62% 38%/60% 40% 56% 44%;transform:translate(3%,6%) scale(.95)}54%{border-radius:62% 38% 44% 56%/48% 60% 40% 52%;transform:translate(-2%,-3%) scale(1.04)}72%{border-radius:46% 54% 52% 48%/40% 54% 62% 46%;transform:translate(5%,8%) scale(.97)}88%{border-radius:54% 46% 38% 62%/56% 44% 50% 50%;transform:translate(-3%,2%) scale(1.02)}100%{border-radius:42% 58% 55% 45%/52% 48% 52% 48%;transform:translate(0,0) scale(1)}}
@keyframes cardVeilFloat2{0%{border-radius:55% 45% 38% 62%/48% 62% 38% 52%;transform:translate(0,0)}28%{border-radius:42% 58% 56% 44%/60% 40% 54% 46%;transform:translate(7%,-12%)}55%{border-radius:60% 40% 48% 52%/40% 60% 62% 38%;transform:translate(-5%,9%)}78%{border-radius:48% 52% 60% 40%/55% 45% 44% 56%;transform:translate(4%,-6%)}100%{border-radius:55% 45% 38% 62%/48% 62% 38% 52%;transform:translate(0,0)}}
.card-fabric{position:absolute;inset:0;border-radius:18px;pointer-events:none;z-index:1;background-image:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,rgba(255,255,255,.024) 3px,rgba(255,255,255,.024) 4px),repeating-linear-gradient(90deg,transparent 0px,transparent 3px,rgba(255,255,255,.024) 3px,rgba(255,255,255,.024) 4px),repeating-linear-gradient(45deg,transparent 0px,transparent 5px,rgba(255,255,255,.009) 5px,rgba(255,255,255,.009) 6px);background-size:4px 4px,4px 4px,6px 6px;mix-blend-mode:overlay;}
.card-scene{position:absolute;bottom:-12px;right:-12px;width:72%;height:62%;pointer-events:none;z-index:1;opacity:.55;mix-blend-mode:screen;transition:opacity .5s ease;animation:cardSceneDrift 22s ease-in-out infinite;transform-origin:80% 85%;}
#botSetupScope .card[data-color="green"]  .card-scene,
#botSetupScope .card[data-color="blue"]   .card-scene,
#botSetupScope .card[data-color="purple"] .card-scene{display:none;}
#botSetupScope .card[data-color="green"]  .card-veil,
#botSetupScope .card[data-color="green"]  .card-veil-2,
#botSetupScope .card[data-color="blue"]   .card-veil,
#botSetupScope .card[data-color="blue"]   .card-veil-2,
#botSetupScope .card[data-color="purple"] .card-veil,
#botSetupScope .card[data-color="purple"] .card-veil-2,
#botSetupScope .card[data-color="orange"] .card-veil,
#botSetupScope .card[data-color="orange"] .card-veil-2,
#botSetupScope .card[data-color="cyan"]   .card-veil,
#botSetupScope .card[data-color="cyan"]   .card-veil-2,
#botSetupScope .card[data-color="yellow"] .card-veil,
#botSetupScope .card[data-color="yellow"] .card-veil-2,
#botSetupScope .card[data-color="pink"]   .card-veil,
#botSetupScope .card[data-color="pink"]   .card-veil-2,
#botSetupScope .card[data-color="teal"]   .card-veil,
#botSetupScope .card[data-color="teal"]   .card-veil-2,
#botSetupScope .card[data-color="indigo"] .card-veil,
#botSetupScope .card[data-color="indigo"] .card-veil-2,
#botSetupScope .card[data-color="red"]    .card-veil,
#botSetupScope .card[data-color="red"]    .card-veil-2,
#botSetupScope .card[data-color="amber"]  .card-veil,
#botSetupScope .card[data-color="amber"]  .card-veil-2,
#botSetupScope .card[data-color="lime"]   .card-veil,
#botSetupScope .card[data-color="lime"]   .card-veil-2,
#botSetupScope .card[data-color="violet"] .card-veil,
#botSetupScope .card[data-color="violet"] .card-veil-2{display:none;}
#botSetupScope .card[data-color="orange"] .card-scene,
#botSetupScope .card[data-color="cyan"]   .card-scene,
#botSetupScope .card[data-color="yellow"] .card-scene,
#botSetupScope .card[data-color="pink"]   .card-scene,
#botSetupScope .card[data-color="teal"]   .card-scene,
#botSetupScope .card[data-color="indigo"] .card-scene,
#botSetupScope .card[data-color="red"]    .card-scene,
#botSetupScope .card[data-color="amber"]  .card-scene,
#botSetupScope .card[data-color="lime"]   .card-scene,
#botSetupScope .card[data-color="violet"] .card-scene{display:none;}
.card-scene svg{width:100%;height:100%;display:block;}
#botSetupScope .card.expandable.expanded .card-scene{opacity:.72;}
@keyframes cardSceneDrift{0%{transform:translate(0,0) scale(1) rotate(0deg)}20%{transform:translate(-4px,-6px) scale(1.03) rotate(.4deg)}40%{transform:translate(3px,-4px) scale(.98) rotate(-.3deg)}60%{transform:translate(-2px,5px) scale(1.02) rotate(.5deg)}80%{transform:translate(4px,2px) scale(.99) rotate(-.2deg)}100%{transform:translate(0,0) scale(1) rotate(0deg)}}
#botSetupScope .card[data-color="green"]{--veil-rgb:0,255,156}
#botSetupScope .card[data-color="blue"]{--veil-rgb:59,130,246}
#botSetupScope .card[data-color="purple"]{--veil-rgb:167,139,250}
#botSetupScope .card[data-color="orange"]{--veil-rgb:249,115,22}
#botSetupScope .card[data-color="cyan"]{--veil-rgb:34,211,238}
#botSetupScope .card[data-color="yellow"]{--veil-rgb:251,191,36}
#botSetupScope .card[data-color="pink"]{--veil-rgb:236,72,153}
#botSetupScope .card[data-color="teal"]{--veil-rgb:20,184,166}
#botSetupScope .card[data-color="indigo"]{--veil-rgb:99,102,241}
#botSetupScope .card[data-color="red"]{--veil-rgb:239,68,68}
#botSetupScope .card[data-color="amber"]{--veil-rgb:217,119,6}
#botSetupScope .card[data-color="lime"]{--veil-rgb:132,204,22}

#botSetupScope .cardTop{display:flex;justify-content:space-between;gap:10px;margin-bottom:16px;align-items:flex-start;flex-wrap:wrap}
#botSetupScope .name{font-weight:900;font-size:22px;letter-spacing:-.3px}
#botSetupScope .badge{
  font-size:12px;font-weight:800;color:#a7f3d0;
  background:rgba(0,255,156,.12);
  border:1px solid rgba(0,255,156,.30);
  padding:5px 12px;border-radius:999px;white-space:nowrap;
  letter-spacing:.3px;flex-shrink:0;
}
#botSetupScope .price{
  font-size:38px;font-weight:950;margin:10px 0 6px;
  background:linear-gradient(135deg,#00ff9c 0%,#22d3ee 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-0.5px;
}
#botSetupScope .sub{font-size:15px;color:rgba(255,255,255,.55);margin-bottom:16px;line-height:1.5}
#botSetupScope .feat{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:rgba(255,255,255,.88);margin-bottom:10px;line-height:1.45}
#botSetupScope .feat i{
  width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(22,163,74,.35);background:rgba(22,163,74,.12);color:#a7f3d0;font-style:normal;font-weight:950;font-size:13px;
  flex:0 0 auto;margin-top:2px
}
#botSetupScope .selectRow{margin-top:auto;display:flex;gap:12px;align-items:center}
#botSetupScope .selectBtn{
  border:none;cursor:pointer;font-family:inherit;
  font-weight:950;font-size:15px;padding:16px 28px;border-radius:14px;
  background:rgba(22,163,74,.18);border:1px solid rgba(22,163,74,.35);color:#a7f3d0;transition:.2s;
}
#botSetupScope .selectBtn:hover{background:rgba(22,163,74,.24);transform:translateY(-1px)}
#botSetupScope .hint{font-size:12px;color:rgba(255,255,255,.62)}
#botSetupScope .divider{height:1px;background:rgba(255,255,255,.08);margin:14px 0}

#botSetupScope .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){#botSetupScope .grid2{grid-template-columns:1fr}}
#botSetupScope .module{
  border-radius:16px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);padding:14px;cursor:pointer;transition:.2s;user-select:none;
  display:flex;flex-direction:column;gap:8px;
}
#botSetupScope .module:hover{transform:translateY(-2px);border-color:rgba(22,163,74,.35);background:rgba(255,255,255,.06)}
#botSetupScope .module.selected{border-color:rgba(22,163,74,.75);background:rgba(22,163,74,.12);box-shadow:0 10px 28px rgba(0,0,0,.45)}
#botSetupScope .module.disabled{opacity:0.55;cursor:not-allowed;pointer-events:none}
#botSetupScope .module.disabled:hover{transform:none;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
#botSetupScope .module.disabled .modulePrice{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.45)}
#botSetupScope .moduleHead{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;}
#botSetupScope .moduleTitle{font-weight:950;flex:1;min-width:0}
#botSetupScope .modulePrice{font-size:12px;color:#a7f3d0;background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.30);padding:6px 10px;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .2s;flex-shrink:0}
#botSetupScope .module:hover .modulePrice{opacity:1}
#botSetupScope .module.expanded .modulePrice{opacity:1}
@media(hover:none){#botSetupScope .modulePrice{opacity:1}}
/* Mobile-Fix: Module-Preise sichtbar + nicht abgeschnitten */
@media(max-width:600px){
  #botSetupScope .moduleHead{flex-direction:column;align-items:flex-start;gap:6px}
  #botSetupScope .modulePrice{opacity:1!important;font-size:13px;padding:5px 12px;align-self:flex-start}
  #botSetupScope .moduleTitle{font-size:14px;line-height:1.3}
}
#botSetupScope .moduleDesc{font-size:13px;color:rgba(255,255,255,.62);line-height:1.45}
#botSetupScope .module .moduleExpandContent{display:none;margin-top:12px}
#botSetupScope .module.expanded .moduleExpandContent{display:block}
#botSetupScope .module.expanded{border-color:rgba(22,163,74,.65)}

#botSetupScope .err{display:none;margin-top:10px;color:#fca5a5;font-size:13px}
#botSetupScope .err.show{display:block}

#botSetupScope .field{display:flex;flex-direction:column;gap:8px;margin-top:8px}
#botSetupScope input[type="text"],
#botSetupScope input[type="email"],
#botSetupScope input[type="tel"],
#botSetupScope textarea{
  width:100%;
  padding:16px 18px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#fff;font-size:16px;outline:none;transition:.2s;  /* 16px statt 15px, verhindert iOS Auto-Zoom + Layout-Shift */
}
#botSetupScope textarea{min-height:120px;resize:vertical}
#botSetupScope input:focus,#botSetupScope textarea:focus{
  border-color:rgba(22,163,74,.7);
  box-shadow:0 0 0 3px rgba(22,163,74,.14), 0 0 22px rgba(22,163,74,.18)
}
#botSetupScope input.error,#botSetupScope textarea.error{border-color:rgba(239,68,68,.75);background:rgba(239,68,68,.05)}
#botSetupScope .errorMsg{display:none;font-size:12.5px;color:#fca5a5;margin-top:2px}
#botSetupScope .errorMsg.show{display:block}

#botSetupScope .options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}
#botSetupScope .optBtn{
  border:none;cursor:pointer;font-family:inherit;
  padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
  text-align:left;transition:.2s;font-weight:850;
  position:relative;
}
#botSetupScope .optBtn:hover{transform:translateY(-2px);border-color:rgba(22,163,74,.35);background:rgba(255,255,255,.07)}
#botSetupScope .optBtn.selected{border-color:rgba(22,163,74,.75);background:rgba(22,163,74,.12);box-shadow:0 10px 28px rgba(0,0,0,.45)}
#botSetupScope .optBtn.selected::after{content:"✓";position:absolute;top:10px;right:12px;color:#a7f3d0;font-weight:950}

#botSetupScope .checkRow{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px;border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  cursor:pointer;user-select:none;
  margin-top:10px;
}
#botSetupScope .checkRow:hover{background:rgba(255,255,255,.05)}
#botSetupScope .checkRow input{accent-color:#16a34a;width:18px;height:18px;margin-top:2px}
#botSetupScope .checkRow label{cursor:pointer;color:rgba(255,255,255,.88);line-height:1.5;font-size:13.5px}

#botSetupScope .nav{display:flex;gap:14px;justify-content:space-between;align-items:center;margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
#botSetupScope .back{
  display:none;
  padding:12px 22px;border-radius:14px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.88);
  font-weight:950;cursor:pointer;transition:.2s;
}
#botSetupScope .back.show{display:block}
#botSetupScope .back:hover{background:rgba(255,255,255,.08);transform:translateX(-2px)}
#botSetupScope .next{
  margin-left:auto;
  padding:16px 44px;border-radius:14px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;font-weight:950;font-size:16px;
  box-shadow:0 4px 16px rgba(22,163,74,.4);transition:.2s;
}
#botSetupScope .next:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
#botSetupScope .next:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px rgba(22,163,74,.5)}

/* File Upload Styles */
#botSetupScope .fileUploadArea{
  border:2px dashed rgba(22,163,74,.35);
  border-radius:14px;
  padding:24px;
  text-align:center;
  cursor:pointer;
  transition:.2s;
  background:rgba(255,255,255,.02);
  margin-top:12px;
}
#botSetupScope .fileUploadArea:hover{
  border-color:rgba(22,163,74,.6);
  background:rgba(22,163,74,.05);
}
#botSetupScope .fileUploadArea.dragover{
  border-color:rgba(22,163,74,.8);
  background:rgba(22,163,74,.1);
}
#botSetupScope .fileUploadArea input[type="file"]{display:none}
#botSetupScope .fileUploadIcon{font-size:32px;margin-bottom:8px;opacity:.7}
#botSetupScope .fileUploadText{color:rgba(255,255,255,.7);font-size:14px}
#botSetupScope .fileUploadHint{color:rgba(255,255,255,.5);font-size:12px;margin-top:6px}
#botSetupScope .fileList{margin-top:14px;display:flex;flex-direction:column;gap:8px}
#botSetupScope .fileItem{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
}
#botSetupScope .fileItem .fileIcon{font-size:20px;opacity:.7}
#botSetupScope .fileItem .fileInfo{flex:1;min-width:0}
#botSetupScope .fileItem .fileName{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#botSetupScope .fileItem .fileSize{color:rgba(255,255,255,.5);font-size:12px}
#botSetupScope .fileItem .fileRemove{
  background:rgba(239,68,68,.15);
  border:1px solid rgba(239,68,68,.3);
  color:#fca5a5;
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  transition:.2s;
}
#botSetupScope .fileItem .fileRemove:hover{background:rgba(239,68,68,.25)}

/* Two column field layout */
#botSetupScope .fieldRow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
#botSetupScope .fieldGroup{display:flex;flex-direction:column;gap:6px}
#botSetupScope .fieldGroup label{font-weight:600;font-size:14px;color:rgba(255,255,255,.85)}
#botSetupScope .fieldGroup .fieldHint{font-size:12px;color:rgba(255,255,255,.5);line-height:1.4}
#botSetupScope .fieldGroup .smallNote{font-size:11px;color:rgba(255,255,255,.45);font-style:italic;margin-top:4px}

/* Same as checkbox */
#botSetupScope .sameAsCheck{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  padding:10px 14px;
  background:rgba(22,163,74,.08);
  border:1px solid rgba(22,163,74,.25);
  border-radius:10px;
  cursor:pointer;
  user-select:none;
}
#botSetupScope .sameAsCheck input{accent-color:#16a34a;width:16px;height:16px}
#botSetupScope .sameAsCheck span{font-size:13px;color:rgba(255,255,255,.8)}

/* Email notice box for success */
#botSetupScope .emailNotice{
  margin-top:24px;
  padding:20px 24px;
  background:rgba(22,163,74,.12);
  border:1px solid rgba(22,163,74,.35);
  border-radius:16px;
  text-align:left;
}
#botSetupScope .emailNotice strong{color:#a7f3d0;font-size:16px}
#botSetupScope .emailNotice p{margin-top:8px;color:rgba(255,255,255,.75);font-size:14px;line-height:1.5}
#botSetupScope .emailNotice .emailHighlight{
  display:inline-block;
  margin-top:6px;
  padding:6px 12px;
  background:rgba(0,0,0,.3);
  border-radius:8px;
  font-family:monospace;
  color:#a7f3d0;
  font-weight:600;
}

/* Review Section Edit Buttons */
#botSetupScope .reviewSectionHeader{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
#botSetupScope .reviewEditBtn{
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.6);
  font-size:11px;
  padding:4px 10px;
  border-radius:6px;
  cursor:pointer;
  margin-left:auto;
  transition:all .2s;
}
#botSetupScope .reviewEditBtn:hover{
  border-color:rgba(22,163,74,.6);
  color:#a7f3d0;
  background:rgba(22,163,74,.1);
}

/* Change Plan Button */
#botSetupScope .changePlanBtn{
  margin-top:12px;
  background:linear-gradient(135deg,#16a34a 0%,#15803d 100%);
  color:white;
  border:none;
  padding:10px 20px;
  border-radius:8px;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
#botSetupScope .changePlanBtn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(22,163,74,.35);
}

@media (max-width:640px){
  #botSetupScope .fieldRow{grid-template-columns:1fr}
  #botSetupScope .wrap{padding:0}
  #botSetupScope .card{flex:0 0 92%}
  #botSetupScope .q h2{font-size:20px}
  #botSetupScope .options{grid-template-columns:1fr}
  #botSetupScope .grid2{grid-template-columns:1fr}
}

/* ===================== WEBSITE COOKIE BANNER ===================== */
.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#fff;
  border-top:1px solid #e5e5e5;
  box-shadow:0 -4px 20px rgba(0,0,0,0.1);
  z-index:9998;
  padding:12px 20px;
  opacity:0;
  visibility:hidden;
  transform:translateY(100%);
  transition:all 0.3s ease;
}
.cookie-banner.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.cookie-banner-content{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.cookie-banner-content p{
  color:#333;
  font-size:14px;
  margin:0;
  flex:1;
  min-width:200px;
}
.cookie-banner-content a{
  color:#16a34a;
  text-decoration:underline;
}
.cookie-banner-content a:hover{
  color:#22c55e;
}
.cookie-banner-buttons{
  display:flex;
  align-items:center;
  gap:12px;
}
.cookie-btn{
  border:none;
  cursor:pointer;
  font-family:inherit;
  transition:all 0.2s ease;
}
.cookie-btn.accept{
  background:#16a34a;
  color:#fff;
  padding:10px 24px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
}
.cookie-btn.accept:hover{
  background:#15803d;
}
.cookie-btn.close{
  background:transparent;
  color:#666;
  font-size:24px;
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.cookie-btn.close:hover{
  background:#f0f0f0;
  color:#333;
}
@media (max-width:600px){
  .cookie-banner{padding:16px}
  .cookie-banner-content{flex-direction:column;text-align:center;gap:12px}
  .cookie-banner-content p{min-width:auto}
}

/* ===================== CHAT WIDGET (SCOPED) ===================== */
#chatWidgetScope{
  --chat-green:#16a34a;
  --chat-bg:#f5f5f5;
}
#chatWidgetScope #chat-widget-button{
  position:fixed;
  bottom:20px;
  right:20px;
  width:56px;height:56px;
  border-radius:50%;
  background:var(--chat-green);
  border:none;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  z-index:9999;
}
#chatWidgetScope #chat-widget-button span{width:22px;height:2px;background:#fff;border-radius:2px}
#chatWidgetScope #chat-widget{
  position:fixed;
  bottom:90px;
  right:20px;
  width:320px;height:420px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
  display:none;
  flex-direction:column;
  overflow:hidden;
  z-index:9999;
  animation:fadeUp .25s ease;
  transition:bottom .15s ease, height .15s ease;
}
@media(max-width:640px){
  /* Mobile Chat = full-screen, robuste flex-column. svh (small viewport) ignoriert Tastatur.
     Messages = flex:1 + min-height:0 (entscheidend fuer korrektes overflow in flex-column).
     Input = flex:0 0 auto, bleibt IMMER sichtbar. */
  /* Mobile-Layout NUR wenn Widget per JS geoeffnet (display:flex), kein !important auf display sonst auto-open + X kaputt */
  #chatWidgetScope #chat-widget[style*="display: flex"],
  #chatWidgetScope #chat-widget[style*="display:flex"]{
    position:fixed !important;
    left:0 !important;right:0 !important;
    top:0 !important;bottom:0 !important;
    width:100% !important;
    height:100vh !important;
    height:100svh !important;
    max-height:none !important;
    border-radius:0 !important;
    transition:none !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  #chatWidgetScope #chat-widget-header{
    flex:0 0 auto;
    padding:14px 16px;
    padding-top:max(14px, env(safe-area-inset-top,0px));
    min-height:56px;
  }
  #chatWidgetScope .chat-lang-btn{width:38px;height:38px;font-size:18px;flex-shrink:0}
  #chatWidgetScope #chat-widget-close{width:40px;height:40px;font-size:24px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);border-radius:50%;border:none;color:#fff;cursor:pointer;margin-left:6px;flex-shrink:0;font-family:inherit;padding:0}
  #chatWidgetScope #chat-quick-actions, #chatWidgetScope #chat-quick-actions-wrap{flex:0 0 auto;padding:8px 14px}
  #chatWidgetScope .chat-chip{font-size:12px;padding:6px 12px}
  /* Messages: nimmt verbleibenden Raum, scrollt intern. min-height:0 ist KRITISCH fuer flex-overflow */
  #chatWidgetScope #chat-widget-messages{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:14px 14px 8px;
  }
  #chatWidgetScope .message{font-size:15px;max-width:88%;padding:10px 13px;line-height:1.5}
  /* Input bleibt unten, font-size 16px verhindert iOS Auto-Zoom on focus */
  #chatWidgetScope #chat-widget-input{
    flex:0 0 auto !important;
    padding:10px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
    background:#fff;
    border-top:1px solid #e5e5e5;
    display:flex;
    gap:8px;
    align-items:flex-end;
  }
  #chatWidgetScope #chat-widget-input input{
    font-size:16px !important;
    min-height:48px;
    padding:12px 14px;
    border:1px solid #d4d4d4;
    border-radius:10px;
    flex:1;
    color:#111;
    background:#fff;
  }
  #chatWidgetScope #chat-widget-input button{
    min-width:54px;
    min-height:48px;
    font-size:18px;
    border-radius:10px;
    flex-shrink:0;
  }
  #chatWidgetScope #chat-widget-button{
    bottom:max(20px, env(safe-area-inset-bottom, 20px));
    right:16px;
    width:60px;height:60px;
  }
  #chatWidgetScope .chat-consent-popup{
    left:0 !important;right:0 !important;
    bottom:0 !important;
    width:100% !important;
    border-radius:16px 16px 0 0 !important;
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px)) !important;
  }
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
#chatWidgetScope #chat-widget-header{background:var(--chat-green);color:#fff;padding:12px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:8px;position:relative}
#chatWidgetScope #chat-widget-close{background:rgba(255,255,255,.18);border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;font-family:inherit;padding:0}
#chatWidgetScope #chat-widget-close:hover{background:rgba(255,255,255,.32)}
#chatWidgetScope .chat-lang-btn{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:transparent;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:border-color .2s}
#chatWidgetScope .chat-lang-btn:hover{border-color:rgba(255,255,255,.6)}
#chatWidgetScope .chat-lang-dropdown{position:absolute;top:100%;right:12px;margin-top:6px;background:#fff;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.3);display:none;z-index:100;overflow:hidden;min-width:180px;max-height:300px;overflow-y:auto}
#chatWidgetScope .chat-lang-dropdown.show{display:block}
#chatWidgetScope .chat-lang-dropdown::-webkit-scrollbar{width:6px}
#chatWidgetScope .chat-lang-dropdown::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:3px}
#chatWidgetScope .chat-lang-dropdown::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25)}
#chatWidgetScope .chat-lang-option{padding:10px 14px;font-size:14px;color:#333;cursor:pointer;display:flex;align-items:center;gap:10px;border:none;background:transparent;width:100%;text-align:left;font-family:inherit;transition:background .15s}
#chatWidgetScope .chat-lang-option:hover{background:#f0f0f0}
#chatWidgetScope .chat-lang-option.active{background:#e8f5e9;font-weight:600}
#chatWidgetScope .chat-lang-option .lang-flag{width:22px;height:16px;object-fit:cover;border-radius:2px;flex-shrink:0}
#chatWidgetScope .chat-lang-option .lang-name{flex:1}
#chatWidgetScope #chat-widget-messages{
  flex:1;padding:10px;overflow-y:auto;
  background:var(--chat-bg);
  display:flex;flex-direction:column;gap:8px
}
#chatWidgetScope .message{
  padding:8px 10px;border-radius:10px;max-width:85%;
  font-size:14px;line-height:1.4;
  white-space:pre-wrap;word-break:break-word;
}
#chatWidgetScope .message.bot{background:#fff;color:#111;border:1px solid #ddd;align-self:flex-start}
#chatWidgetScope .message.user{background:var(--chat-green);color:#fff;align-self:flex-end}
#chatWidgetScope #chat-quick-actions{
  display:flex;gap:6px;padding:7px 10px 5px;
  overflow-x:scroll;background:var(--chat-bg);border-top:1px solid #e8e8e8;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;flex-shrink:0;
  -ms-overflow-style:none;
  touch-action:pan-x;
  cursor:grab;
}
#chatWidgetScope #chat-quick-actions::-webkit-scrollbar{display:none}
#chatWidgetScope .chat-chip{
  scroll-snap-align:start;
}
#chatWidgetScope .chat-chip{
  flex-shrink:0;padding:4px 10px;border-radius:20px;border:1px solid #d0d0d0;
  background:#fff;color:#333;font-size:12px;cursor:pointer;white-space:nowrap;
  font-family:inherit;transition:background .15s,border-color .15s,color .15s;
}
#chatWidgetScope .chat-chip:hover{background:var(--chat-green);border-color:var(--chat-green);color:#fff}
/* Fade-out rechts zeigt an dass mehr Chips vorhanden sind */
#chatWidgetScope #chat-quick-actions-wrap{
  position:relative;flex-shrink:0;
}
#chatWidgetScope #chat-quick-actions-wrap::after{
  content:'';position:absolute;top:0;right:0;width:28px;height:100%;
  background:linear-gradient(to right,transparent,var(--chat-bg));
  pointer-events:none;
}
#chatWidgetScope #chat-widget-input{display:flex;border-top:1px solid #ddd}
#chatWidgetScope #chat-widget-input input{
  flex:1;padding:10px;border:none;font-size:14px;outline:none;font-family:inherit
}
#chatWidgetScope #chat-widget-input button{
  background:var(--chat-green);color:#fff;border:none;padding:0 16px;cursor:pointer;font-size:16px
}

/* ===================== GDPR CONSENT POPUP ===================== */
#chatWidgetScope .chat-consent-popup{
  position:fixed;
  bottom:90px;
  right:20px;
  width:320px;
  background:linear-gradient(180deg, #1a1a1a, #0f0f0f);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;
  padding:24px;
  z-index:10000;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:all 0.25s ease;
}
#chatWidgetScope .chat-consent-popup.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
#chatWidgetScope .chat-consent-popup h3{
  color:#fff;
  font-size:16px;
  font-weight:700;
  margin:0 0 12px 0;
}
#chatWidgetScope .chat-consent-popup p{
  color:rgba(255,255,255,0.75);
  font-size:13px;
  line-height:1.5;
  margin:0 0 8px 0;
}
#chatWidgetScope .chat-consent-popup a{
  color:var(--chat-green);
  text-decoration:underline;
  cursor:pointer;
}
#chatWidgetScope .chat-consent-popup a:hover{
  color:#22c55e;
}
#chatWidgetScope .chat-consent-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}
#chatWidgetScope .consent-btn{
  padding:12px 16px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s ease;
  font-family:inherit;
  border:none;
}
#chatWidgetScope .consent-btn.primary{
  background:linear-gradient(135deg, #16a34a, #22c55e);
  color:#fff;
  box-shadow:0 4px 12px rgba(22,163,74,0.3);
}
#chatWidgetScope .consent-btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(22,163,74,0.4);
}
#chatWidgetScope .consent-btn.secondary{
  background:transparent;
  border:1px solid rgba(255,255,255,0.2);
  color:#a3a3a3;
}
#chatWidgetScope .consent-btn.secondary:hover{
  border-color:rgba(255,255,255,0.35);
  color:#d4d4d4;
}

/* ===================== PRIVACY POLICY MODAL ===================== */
#chatWidgetScope .privacy-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(4px);
  z-index:10001;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:all 0.3s ease;
}
#chatWidgetScope .privacy-modal-overlay.show{
  opacity:1;
  visibility:visible;
}
#chatWidgetScope .privacy-modal-content{
  background:linear-gradient(180deg, #1a1a1a, #0f0f0f);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;
  max-width:700px;
  width:90%;
  max-height:85vh;
  overflow-y:auto;
  padding:32px;
  margin:20px;
  position:relative;
  box-shadow:0 16px 48px rgba(0,0,0,0.5);
}
#chatWidgetScope .privacy-modal-content::-webkit-scrollbar{width:8px}
#chatWidgetScope .privacy-modal-content::-webkit-scrollbar-track{background:rgba(255,255,255,0.05);border-radius:4px}
#chatWidgetScope .privacy-modal-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:4px}
#chatWidgetScope .privacy-modal-content::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.25)}
#chatWidgetScope .privacy-close-btn{
  position:absolute;
  top:16px;
  right:16px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:none;
  color:#fff;
  font-size:24px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
  line-height:1;
}
#chatWidgetScope .privacy-close-btn:hover{
  background:rgba(255,255,255,0.2);
  transform:scale(1.1);
}
#chatWidgetScope .privacy-modal-body{
  color:rgba(255,255,255,0.85);
  font-size:14px;
  line-height:1.6;
}
#chatWidgetScope .privacy-modal-body h1{
  color:#fff;
  font-size:24px;
  font-weight:700;
  margin:0 0 8px 0;
}
#chatWidgetScope .privacy-modal-body h2{
  color:#fff;
  font-size:18px;
  font-weight:600;
  margin:24px 0 12px 0;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.1);
}
#chatWidgetScope .privacy-modal-body h3{
  color:rgba(255,255,255,0.95);
  font-size:15px;
  font-weight:600;
  margin:16px 0 8px 0;
}
#chatWidgetScope .privacy-modal-body p{
  margin:0 0 12px 0;
}
#chatWidgetScope .privacy-modal-body ul{
  margin:0 0 12px 0;
  padding-left:20px;
}
#chatWidgetScope .privacy-modal-body li{
  margin-bottom:6px;
}
#chatWidgetScope .privacy-modal-body a{
  color:var(--chat-green);
}
#chatWidgetScope .privacy-brand{
  color:var(--chat-green);
  font-weight:600;
}

/* ===================== WEBSITE BUILDER ENTRY ===================== */
.wb-entry-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:16px;max-width:1100px;}
@media(max-width:900px){.wb-entry-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.wb-entry-grid{grid-template-columns:1fr;}}
.wb-badge-new{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;background:#f59e0b22;color:#f59e0b;border:1px solid #f59e0b44;border-radius:6px;padding:2px 7px;margin-bottom:10px;}
/* === wb-entry-card, vereinheitlicht via Card-Tokens. Alle 3 Cards nutzen GLEICHES Pattern === */
.wb-entry-card{
  display:block;
  position:relative; overflow:hidden;
  border-radius: var(--card-radius);
  border: var(--card-border);
  background:#111 center/cover no-repeat;
  padding: var(--card-padding);
  text-align:left; cursor:pointer;
  transition: var(--card-transition);
  box-shadow: var(--card-shadow);
  min-height: 200px;  /* einheitliche Hoehe, vorher 160px war zu kurz fuer alle Inhalte */
  text-decoration:none;
  color:inherit; font-family:inherit; font-size:inherit;
  width:100%;
  display:flex; flex-direction:column;  /* Inhalt sauber gestapelt */
}
a.wb-entry-card,
a.wb-entry-card:hover{text-decoration:none}
.wb-entry-card::after{
  content:''; position:absolute; inset:0;
  border-radius: var(--card-radius);
  background: linear-gradient(160deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.10) 100%);
  pointer-events:none;
}
.wb-entry-card>*{position:relative; z-index:1;}
.wb-entry-card:hover{
  border: var(--card-border-hover);
  transform: translateY(var(--card-hover-y));
  box-shadow: var(--card-shadow-hover);
}

/* Card-spezifische Backgrounds, alle nutzen PNG-Pattern (konsistent) */
.wb-entry-card[data-builder-path="website"]{background-image:url(/wb-new.webp);}
.wb-entry-card[data-builder-path="shopify"]{background-image:url(/wb-redesign.webp);}
.wb-entry-card[data-builder-path="logo"]{background-image:url(/wb-logo.jpg?v=2);}
/* Automation: rotes Hexagon-Pattern (wb-automation.webp = wb-new grün→rot umgefärbt, wie die blaue Schwester) */
.wb-entry-card[data-builder-path="automation"]{background-image:url(/wb-automation.webp);}

/* Card-Inhalt, vereinheitlicht via Tokens */
.wb-entry-card .wb-icon{
  width:44px; height:44px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 16px;
  font-size: 22px;
}
.wb-entry-card h3{
  font-family:'Space Grotesk',sans-serif;
  font-size: var(--card-h-size);
  font-weight: var(--card-h-weight);
  color:#fff; margin:0 0 8px;
  line-height: 1.25;
}
.wb-entry-card p{
  font-size: var(--card-p-size);
  color: var(--card-p-color);
  line-height: var(--card-p-line);
  margin: 0 0 16px;
  flex: 1;  /* arrow bleibt unten */
}
.wb-entry-card .wb-arrow{
  font-size: 13px;
  color: var(--card-p-color);
  transition: color .2s, transform .2s;
  display:inline-flex; align-items:center; gap:6px;
  font-weight: 600;
}
.wb-entry-card:hover .wb-arrow{color:#fff; transform:translateX(2px);}

/* Fullscreen Builder Overlay */
#builderOverlay{
  position:fixed;inset:0;z-index:9999;
  background:#0b0f0d;
  display:none;flex-direction:column;
}
#builderOverlay.open{display:flex;}
#builderOverlayBar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;border-bottom:1px solid #1f2a25;
  background:#0b0f0d;flex-shrink:0;
}
#builderOverlayBar span{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:#fff;}
#builderOverlayClose{
  background:none;border:1px solid #1f2a25;color:#9aa3a0;
  border-radius:8px;padding:6px 14px;cursor:pointer;font-size:13px;
  transition:all .2s;
}
#builderOverlayClose:hover{border-color:#fff;color:#fff;}
#builderOverlayFrame{flex:1;width:100%;border:none;}
/* ===================== WEBSITE BUILDER WIZARD ===================== */
#wbWizard{position:fixed;inset:0;z-index:9999;background:#080b0a;display:none;flex-direction:column;overflow:hidden;}
#wbWizard.open{display:flex;}
#wbWizardHeader{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid #1f2a25;background:rgba(8,11,10,.97);backdrop-filter:blur(8px);flex-shrink:0;gap:16px;}
#wbWizardTitle{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:#fff;white-space:nowrap;}
#wbStepBar{display:flex;align-items:center;gap:6px;flex:1;justify-content:center;}
.wbStep{display:flex;align-items:center;gap:6px;font-size:12px;color:#4a5e56;transition:color .3s;}
.wbStep.active{color:#fff;}
.wbStep.done{color:var(--green);}
.wbStepDot{width:24px;height:24px;border-radius:50%;border:2px solid #1f2a25;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:#111815;transition:all .3s;flex-shrink:0;}
.wbStep.active .wbStepDot{border-color:var(--green);color:var(--green);}
.wbStep.done .wbStepDot{border-color:var(--green);background:var(--green);color:#000;}
.wbStepLine{width:20px;height:2px;background:#1f2a25;flex-shrink:0;transition:background .3s;}
.wbStepLine.done{background:var(--green);}
.wbStepLabel{display:none;}
@media(min-width:640px){.wbStepLabel{display:inline;font-size:11px;}}
#wbWizardClose{background:none;border:1px solid #1f2a25;color:#9aa3a0;border-radius:8px;padding:6px 14px;cursor:pointer;font-size:13px;transition:all .2s;flex-shrink:0;}
#wbWizardClose:hover{border-color:#fff;color:#fff;}
#wbWizardBody{flex:1;overflow-y:auto;padding:48px 24px;max-width:860px;width:100%;margin:0 auto;}
#wbWizardFooter{border-top:1px solid #1f2a25;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;background:rgba(8,11,10,.97);}
.wb-back-btn{background:none;border:1px solid #1f2a25;color:#9aa3a0;border-radius:10px;padding:10px 20px;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s;}
.wb-back-btn:hover{border-color:rgba(255,255,255,.3);color:#fff;}
.wb-next-btn{background:var(--green);color:#000;border:none;border-radius:10px;padding:12px 28px;cursor:pointer;font-size:14px;font-weight:700;transition:all .2s;}
.wb-next-btn:hover{box-shadow:0 0 24px rgba(0,255,156,.35);}
.wb-next-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;}
.wb-step-heading{font-family:'Space Grotesk',sans-serif;font-size:clamp(20px,2.5vw,30px);font-weight:800;color:#fff;margin-bottom:8px;line-height:1.3;}
.wb-step-sub{color:var(--muted);font-size:14px;margin-bottom:32px;line-height:1.5;}
.wb-industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(max-width:480px){.wb-industry-grid{grid-template-columns:1fr 1fr;}}
.wb-industry-tile{background:rgba(255,255,255,.04);border:2px solid #1f2a25;border-radius:14px;padding:20px 16px;cursor:pointer;text-align:center;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:10px;}
.wb-industry-tile:hover{border-color:rgba(0,255,156,.35);background:rgba(0,255,156,.04);}
.wb-industry-tile.selected{border-color:var(--green);background:rgba(0,255,156,.08);box-shadow:0 0 20px rgba(0,255,156,.12);}
.wb-ind-icon{font-size:28px;line-height:1;}
.wb-ind-name{font-size:13px;font-weight:600;color:#fff;}
.wb-goal-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
@media(max-width:600px){.wb-goal-grid{grid-template-columns:1fr;}}
.wb-goal-card{background:rgba(255,255,255,.04);border:2px solid #1f2a25;border-radius:16px;padding:24px 20px;cursor:pointer;transition:all .2s;text-align:left;}
.wb-goal-card:hover{border-color:rgba(0,255,156,.35);}
.wb-goal-card.selected{border-color:var(--green);background:rgba(0,255,156,.06);}
.wb-goal-card .wb-goal-icon{font-size:32px;margin-bottom:12px;}
.wb-goal-card h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:#fff;margin:0 0 6px;}
.wb-goal-card p{font-size:12px;color:var(--muted);line-height:1.5;margin:0;}
.wb-goal-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:5px;margin-bottom:10px;border:1px solid;}
.wb-goal-badge.green{background:#00ff9c22;color:#00ff9c;border-color:#00ff9c44;}
.wb-goal-badge.cyan{background:#22d3ee22;color:#22d3ee;border-color:#22d3ee44;}
.wb-goal-badge.amber{background:#f59e0b22;color:#f59e0b;border-color:#f59e0b44;}
.wb-form-group{margin-bottom:20px;}
.wb-form-label{font-size:12px;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:.5px;text-transform:uppercase;margin-bottom:8px;display:block;}
.wb-form-label span{font-size:11px;font-weight:400;text-transform:none;color:var(--muted);letter-spacing:0;margin-left:4px;}
.wb-form-input,.wb-form-textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid #1f2a25;border-radius:10px;color:#fff;font-size:14px;font-family:'DM Sans',sans-serif;padding:12px 14px;transition:border-color .2s;resize:vertical;}
.wb-form-input:focus,.wb-form-textarea:focus{outline:none;border-color:rgba(0,255,156,.4);background:rgba(0,255,156,.03);}
.wb-form-textarea{min-height:80px;}
.wb-style-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;}
@media(max-width:480px){.wb-style-grid{grid-template-columns:1fr;}}
.wb-style-card{border:2px solid #1f2a25;border-radius:14px;padding:18px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:14px;}
.wb-style-card:hover{border-color:rgba(0,255,156,.35);}
.wb-style-card.selected{border-color:var(--green);background:rgba(0,255,156,.05);}
.wb-style-preview{width:56px;height:40px;border-radius:6px;flex-shrink:0;overflow:hidden;position:relative;}
.wb-style-info h4{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:#fff;margin:0 0 3px;}
.wb-style-info p{font-size:12px;color:var(--muted);margin:0;line-height:1.4;}
.wb-color-row{display:flex;gap:8px;flex-wrap:wrap;}
.wb-color-swatch{width:32px;height:32px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .2s;}
.wb-color-swatch.selected{border-color:#fff;transform:scale(1.12);}
#wbPreviewStep{display:flex;gap:0;height:calc(100vh - 58px);overflow:hidden;}
#wbPreviewIframeWrap{flex:1;position:relative;border-right:1px solid #1f2a25;overflow:hidden;}
#wbPreviewIframe{width:100%;height:100%;border:none;}
#wbEditPanel{width:300px;flex-shrink:0;overflow-y:auto;padding:24px 20px;background:#0b0f0d;}
@media(max-width:768px){#wbPreviewStep{flex-direction:column;height:auto;}#wbPreviewIframeWrap{height:45vh;border-right:none;border-bottom:1px solid #1f2a25;}#wbEditPanel{width:100%;}}
#wbEditPanel h3{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.5px;margin:0 0 20px;}
.wb-edit-field{margin-bottom:14px;}
.wb-edit-field label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:5px;}
.wb-edit-field input,.wb-edit-field textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid #1f2a25;border-radius:8px;color:#fff;font-size:13px;font-family:'DM Sans',sans-serif;padding:9px 11px;transition:border-color .2s;resize:vertical;}
.wb-edit-field input:focus,.wb-edit-field textarea:focus{outline:none;border-color:rgba(0,255,156,.4);}
.wb-edit-colors{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;}
.wb-request-btn{width:100%;background:var(--green);color:#000;border:none;border-radius:10px;padding:14px;cursor:pointer;font-size:14px;font-weight:700;margin-top:12px;transition:all .2s;}
.wb-request-btn:hover{box-shadow:0 0 20px rgba(0,255,156,.35);}

/* ===================== COLOR PICKER ===================== */
#botSetupScope .colorGrid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  margin-top:12px;
  max-height:280px;
  overflow-y:auto;
  padding:4px;
}
#botSetupScope .colorTile{
  width:100%;
  aspect-ratio:1;
  border-radius:10px;
  cursor:pointer;
  border:3px solid rgba(255,255,255,.1);
  transition:transform .2s, border-color .2s, box-shadow .2s;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
#botSetupScope .colorTile:hover{
  transform:scale(1.08);
  border-color:rgba(255,255,255,.3);
}
#botSetupScope .colorTile.selected{
  border-color:#16a34a;
  box-shadow:0 0 0 3px rgba(22,163,74,.4), 0 4px 12px rgba(0,0,0,.3);
}
#botSetupScope .colorTile.selected::after{
  content:"✓";
  font-size:18px;
  font-weight:900;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
#botSetupScope .colorCounter{
  margin-top:12px;
  font-size:13px;
  color:rgba(255,255,255,.7);
}

/* ===================== VOICE OPTIONS WITH AUDIO ===================== */
#botSetupScope .voiceOptions{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:12px;
}
#botSetupScope .voiceOptBtn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
  cursor:pointer;
  transition:.2s;
  font-weight:850;
  font-family:inherit;
}
#botSetupScope .voiceOptBtn:hover{
  transform:translateY(-2px);
  border-color:rgba(22,163,74,.35);
  background:rgba(255,255,255,.07);
}
#botSetupScope .voiceOptBtn.selected{
  border-color:rgba(22,163,74,.75);
  background:rgba(22,163,74,.12);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}
#botSetupScope .voiceOptBtn.selected .voiceOptLabel::after{
  content:" ✓";
  color:#a7f3d0;
}
#botSetupScope .voiceOptLabel{
  flex:1;
  text-align:left;
}
#botSetupScope .voicePlayBtn{
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(22,163,74,.2);
  border:1px solid rgba(22,163,74,.4);
  color:#a7f3d0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  transition:.2s;
  flex-shrink:0;
  margin-left:12px;
}
#botSetupScope .voicePlayBtn:hover{
  background:rgba(22,163,74,.35);
  transform:scale(1.1);
}

/* ===================== VOICE EXAMPLES GRID ===================== */
#botSetupScope .voiceExamplesGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:12px;
}
@media(max-width:768px){
  #botSetupScope .voiceExamplesGrid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:500px){
  #botSetupScope .voiceExamplesGrid{grid-template-columns:1fr;}
}
#botSetupScope .voiceExampleCard{
  border-radius:16px;
  border:2px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  padding:16px;
  cursor:pointer;
  transition:.2s;
  display:flex;
  flex-direction:column;
  gap:12px;
}
#botSetupScope .voiceExampleCard:hover{
  border-color:rgba(22,163,74,.4);
  background:rgba(255,255,255,.06);
}
#botSetupScope .voiceExampleCard.selected{
  border-color:rgba(22,163,74,.8);
  background:rgba(22,163,74,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
#botSetupScope .voiceExampleInfo{
  flex:1;
}
#botSetupScope .voiceExampleName{
  font-weight:900;
  font-size:14px;
}
#botSetupScope .voiceExampleActions{
  display:flex;
  gap:10px;
  align-items:center;
}
#botSetupScope .voiceExamplePlay{
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(22,163,74,.2);
  border:2px solid rgba(22,163,74,.4);
  color:#a7f3d0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  transition:.2s;
  flex-shrink:0;
}
#botSetupScope .voiceExamplePlay:hover{
  background:rgba(22,163,74,.35);
  transform:scale(1.1);
}
#botSetupScope .voiceExampleSelect{
  flex:1;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.9);
  font-weight:850;
  cursor:pointer;
  transition:.2s;
  font-family:inherit;
  font-size:13px;
}
#botSetupScope .voiceExampleSelect:hover{
  background:rgba(22,163,74,.15);
  border-color:rgba(22,163,74,.4);
}
#botSetupScope .voiceExampleSelect.selected{
  background:rgba(22,163,74,.25);
  border-color:rgba(22,163,74,.6);
  color:#a7f3d0;
}

/* ===================== LANGUAGE CONFIG ===================== */
#botSetupScope .langConfigOptions{
  display:grid;
  gap:10px;
  margin-top:12px;
}
#botSetupScope .langPresetBtn{
  padding:10px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
  cursor:pointer;
  transition:.2s;
  font-family:inherit;
  display:flex;
  align-items:center;
  gap:8px;
}
#botSetupScope .langPresetBtn:hover{
  transform:translateY(-2px);
  border-color:rgba(22,163,74,.35);
  background:rgba(255,255,255,.07);
}
#botSetupScope .langPresetBtn.selected{
  border-color:rgba(22,163,74,.75);
  background:rgba(22,163,74,.12);
  box-shadow:0 4px 16px rgba(22,163,74,.2);
}
#botSetupScope .langCustomGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:12px;
  max-height:320px;
  overflow-y:auto;
  padding:4px;
}
#botSetupScope .langCustomBtn{
  padding:10px 12px;
  border-radius:10px;
  background:rgba(100,100,100,.15);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.45);
  cursor:pointer;
  transition:.2s;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:inherit;
  opacity:0.6;
}
#botSetupScope .langCustomBtn:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(22,163,74,.3);
  opacity:0.85;
}
#botSetupScope .langCustomBtn.selected{
  background:rgba(22,163,74,.25);
  border-color:rgba(22,163,74,.7);
  color:rgba(255,255,255,.95);
  opacity:1;
  box-shadow:0 0 12px rgba(22,163,74,.3);
}
#botSetupScope .langCustomBtn .langFlag{
  width:20px;
  height:14px;
  object-fit:cover;
  border-radius:2px;
  flex-shrink:0;
}
#botSetupScope .langSearchInput{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:14px;
  margin-bottom:12px;
  outline:none;
}
#botSetupScope .langSearchInput:focus{
  border-color:rgba(22,163,74,.5);
  box-shadow:0 0 0 2px rgba(22,163,74,.15);
}
#botSetupScope .langSelectAllBtn{
  padding:10px 16px;
  border-radius:10px;
  background:rgba(22,163,74,.15);
  border:1px solid rgba(22,163,74,.4);
  color:#a7f3d0;
  cursor:pointer;
  font-weight:850;
  font-size:13px;
  margin-bottom:12px;
  transition:.2s;
  font-family:inherit;
}
#botSetupScope .langSelectAllBtn:hover{
  background:rgba(22,163,74,.25);
}

/* ===================== WIDGET ICON PICKER ===================== */
#botSetupScope .widgetIconGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:16px;
}
@media(max-width:640px){
  #botSetupScope .widgetIconGrid{grid-template-columns:repeat(2,1fr);}
}
#botSetupScope .widgetIconCard{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:18px 10px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:2px solid rgba(255,255,255,.1);
  cursor:pointer;
  transition:.2s;
  font-family:inherit;
  color:#a7f3d0;
}
#botSetupScope .widgetIconCard:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(22,163,74,.4);
  transform:translateY(-3px);
}
#botSetupScope .widgetIconCard.selected{
  border-color:rgba(22,163,74,.85);
  background:rgba(22,163,74,.15);
  box-shadow:0 0 20px rgba(22,163,74,.25);
}
#botSetupScope .widgetIconSvg{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#botSetupScope .widgetIconSvg svg{
  width:100%;
  height:100%;
}
#botSetupScope .widgetIconLabel{
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.85);
  text-align:center;
}
#botSetupScope .widgetIconCard.selected .widgetIconLabel{
  color:#a7f3d0;
}
#botSetupScope .logoUploadArea{
  margin-top:18px;
  padding:18px;
  border:2px dashed rgba(22,163,74,.4);
  border-radius:14px;
  background:rgba(22,163,74,.05);
}
#botSetupScope .logoUploadLabel{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  border-radius:10px;
  background:rgba(22,163,74,.15);
  border:1px solid rgba(22,163,74,.4);
  color:#a7f3d0;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  transition:.2s;
  font-family:inherit;
}
#botSetupScope .logoUploadLabel:hover{
  background:rgba(22,163,74,.25);
}
#botSetupScope .logoPreview{
  max-width:160px;
  max-height:80px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  object-fit:contain;
  background:rgba(255,255,255,.08);
  padding:6px;
}

/* ===================== PLAN PICKER, Split layout (list left + detail right) ===================== */
#botSetupScope .planPicker{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:14px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}
/* Pill tabs row */
#botSetupScope .planPickerTabs{
  display:flex;
  flex-wrap:wrap;
  background:rgba(0,0,0,.30);
  border-bottom:1px solid rgba(255,255,255,.08);
}
#botSetupScope .planPickerTab{
  flex:1;
  min-width:72px;
  padding:10px 12px;
  background:none;
  border:none;
  border-right:1px solid rgba(255,255,255,.06);
  cursor:pointer;
  transition:background .2s, border-color .2s;
  display:flex;
  flex-direction:column;
  gap:2px;
  text-align:left;
  position:relative;
}
#botSetupScope .planPickerTab:last-child{ border-right:none; }
#botSetupScope .planPickerTab:hover{ background:rgba(255,255,255,.04); }
#botSetupScope .planPickerTab.active{
  background:rgba(0,255,156,.09);
}
#botSetupScope .planPickerTab.active::after{
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:2px;
  background:var(--green);
  border-radius:2px 2px 0 0;
}
#botSetupScope .planTabName{
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,.88);
  letter-spacing:.2px;
  display:block;
}
#botSetupScope .planTabPrice{
  font-size:11px;
  color:var(--green);
  font-weight:600;
  display:block;
}
#botSetupScope .pdc-label{
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,.45);
  text-transform:uppercase;
  letter-spacing:.4px;
}
/* Thin separator between list and detail */
#botSetupScope .planPickerPlus{
  width:1px;
  flex-shrink:0;
  background:rgba(255,255,255,.09);
  font-size:0; /* no text content */
  user-select:none;
}
/* Right: plan detail panel */
#botSetupScope .planPickerDetail{
  flex:1;
  padding:22px 24px;
  background:rgba(255,255,255,.02);
  overflow-y:auto;
  min-height:260px;
}
#botSetupScope .planDetailName{
  font-size:20px;
  font-weight:900;
  margin-bottom:4px;
  color:#fff;
}
#botSetupScope .planDetailPrice{
  font-size:32px;
  font-weight:950;
  letter-spacing:-.5px;
  background:linear-gradient(135deg,#00ff9c 0%,#22d3ee 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1.1;
  margin-bottom:4px;
}
#botSetupScope .planDetailPriceLabel{
  font-size:13px;
  color:rgba(255,255,255,.45);
  margin-bottom:12px;
}
#botSetupScope .planDetailCalls{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:#a7f3d0;
  background:rgba(0,255,156,.1);
  border:1px solid rgba(0,255,156,.25);
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:16px;
}
#botSetupScope .planDetailFeats{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:18px;
}
#botSetupScope .planDetailFeat{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13.5px;
  color:rgba(255,255,255,.85);
  line-height:1.4;
}
#botSetupScope .planDetailFeat i{
  width:18px;height:18px;
  border-radius:5px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(22,163,74,.35);
  background:rgba(22,163,74,.12);
  color:#a7f3d0;
  font-style:normal;font-weight:950;font-size:11px;
  flex:0 0 auto;margin-top:1px;
}
@media(max-width:640px){
  #botSetupScope .planPickerTab{ min-width:60px; padding:8px 10px; }
}

/* ===================== 5-TIER PLAN CARDS, SKILL2 GLASSMORPHISM ===================== */
#botSetupScope .planTiersGrid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-top:16px;
}
@media(max-width:900px){
  #botSetupScope .planTiersGrid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:640px){
  #botSetupScope .planTiersGrid{grid-template-columns:1fr;}
}

/* Base card, SKILL2 glassmorphism style */
#botSetupScope .planTier{
  position:relative;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  /* Solid statt backdrop-filter:blur, Blur zwingt den Browser pro Frame
     den Hintergrund neu zu sampeln -> Jank beim Paket-Wechsel & Carousel-Scroll.
     Opaker Background sieht identisch aus, kostet 0 GPU pro Frame. */
  background:#121615;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.05,.6,.4,.9),
             border-color .25s,
             box-shadow .25s,
             background .25s;
  cursor:pointer;
  will-change:transform;
}
/* Gradient top-edge shimmer line */
#botSetupScope .planTier::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(0,255,156,.35) 50%,transparent 100%);
  opacity:0;
  transition:opacity .25s;
}
#botSetupScope .planTier:hover{
  transform:translateY(-4px);
  border-color:rgba(0,255,156,.30);
  background:rgba(255,255,255,.07);
  box-shadow:0 12px 40px rgba(0,0,0,.45), 0 0 0 0 rgba(0,255,156,0);
}
#botSetupScope .planTier:hover::before{
  opacity:1;
}
#botSetupScope .planTier.expanded{
  transform:translateY(-3px);
  border-color:rgba(0,255,156,.55);
  background:rgba(0,255,156,.06);
  box-shadow:0 8px 32px rgba(0,0,0,.4), 0 0 20px rgba(0,255,156,.12);
}
#botSetupScope .planTier.expanded::before{
  opacity:1;
}
/* Selected / highlighted plan, "popular" treatment */
#botSetupScope .planTier.preselected{
  border-color:rgba(0,255,156,.75);
  background:linear-gradient(160deg,rgba(0,255,156,.12) 0%,rgba(34,211,238,.06) 100%);
  box-shadow:0 8px 36px rgba(0,0,0,.5), 0 0 28px rgba(0,255,156,.20);
  transform:translateY(-4px) scale(1.02);
}
#botSetupScope .planTier.preselected::before{
  background:linear-gradient(90deg,transparent,rgba(0,255,156,.6),rgba(34,211,238,.4),transparent);
  opacity:1;
}

#botSetupScope .planTierHeader{
  padding:20px 14px 16px;
  text-align:center;
}
#botSetupScope .planTierName{
  font-weight:900;
  font-size:13px;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  margin-bottom:10px;
}
#botSetupScope .planTierPrice{
  font-size:28px;
  font-weight:950;
  line-height:1;
  background:linear-gradient(135deg,#00ff9c 0%,#22d3ee 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:-0.5px;
}
#botSetupScope .planOldPrice{
  text-decoration:line-through;
  color:rgba(255,255,255,.35);
  font-size:.68em;
  margin-right:5px;
  font-weight:400;
  background:none;
  -webkit-background-clip:unset;
  background-clip:unset;
}
#botSetupScope .sprungDealBadge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:linear-gradient(135deg,#00ff9c,#22d3ee);
  color:#000;
  font-size:11px;
  font-weight:900;
  padding:4px 12px;
  border-radius:100px;
  margin-bottom:8px;
  letter-spacing:.8px;
  box-shadow:0 0 16px rgba(0,255,156,.45), 0 2px 8px rgba(0,0,0,.3);
  text-transform:uppercase;
}
#botSetupScope .trialBadge{
  font-size:12px;
  color:#00ff9c;
  margin-top:6px;
  font-weight:700;
  letter-spacing:.2px;
}
#botSetupScope .planTierCalls{
  font-size:11px;
  color:rgba(255,255,255,.50);
  margin-top:6px;
  letter-spacing:.2px;
}
#botSetupScope .planTierContent{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s cubic-bezier(.05,.6,.4,.9);
}
#botSetupScope .planTier.expanded .planTierContent{
  max-height:320px;
}
#botSetupScope .planTierInner{
  padding:14px 16px 18px;
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.15);
}
#botSetupScope .planTierFeat{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:12px;
  color:rgba(255,255,255,.72);
  margin-bottom:8px;
  line-height:1.4;
}
#botSetupScope .planTierFeat i{
  flex-shrink:0;
  width:16px;height:16px;
  border-radius:50%;
  background:rgba(0,255,156,.15);
  border:1px solid rgba(0,255,156,.35);
  display:flex;align-items:center;justify-content:center;
  color:#a7f3d0;
  font-style:normal;
  font-size:9px;
  font-weight:900;
  margin-top:1px;
  font-weight:950;
}
#botSetupScope .trialInfo{
  margin-top:16px;
  padding:14px 16px;
  background:linear-gradient(135deg,rgba(0,255,156,.06),rgba(34,211,238,.04));
  border:1px solid rgba(0,255,156,.22);
  border-radius:12px;
  font-size:12.5px;
  color:rgba(255,255,255,.75);
  line-height:1.65;
}
#botSetupScope .trialInfo strong{
  color:#00ff9c;
  font-weight:700;
}
#botSetupScope .recommendBadge{
  display:inline-block;
  padding:4px 10px;
  background:rgba(22,163,74,.2);
  border:1px solid rgba(22,163,74,.4);
  border-radius:999px;
  font-size:11px;
  font-weight:950;
  color:#a7f3d0;
  margin-left:8px;
}
#botSetupScope .planRecommendation{
  margin-top:16px;
  padding:16px;
  background:rgba(22,163,74,.1);
  border:1px solid rgba(22,163,74,.3);
  border-radius:14px;
}
#botSetupScope .planRecommendation h4{
  font-weight:950;
  margin-bottom:8px;
  color:#a7f3d0;
}
#botSetupScope .planRecommendation p{
  font-size:13px;
  color:rgba(255,255,255,.75);
  line-height:1.5;
}

/* Module Plan Modal */
#botSetupScope .modulePlanOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(4px);
  z-index:10001;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:.3s;
}
#botSetupScope .modulePlanOverlay.show{
  opacity:1;
  visibility:visible;
}
#botSetupScope .modulePlanModal{
  background:linear-gradient(180deg,#1a1a1a,#0f0f0f);
  border:1px solid rgba(22,163,74,.3);
  border-radius:20px;
  max-width:800px;
  width:90%;
  max-height:85vh;
  overflow-y:auto;
  padding:28px;
}
#botSetupScope .modulePlanClose{
  position:absolute;
  top:16px;
  right:16px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  border:none;
  color:#fff;
  font-size:24px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ========== KIVEO CODE SECTION ========== */
#botSetupScope .kiveoDivider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}
#botSetupScope .kiveoDividerLine {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.12);
}
#botSetupScope .kiveoDividerText {
  font-size: 11px;
  font-weight: 950;
  color: rgba(255,255,255,.4);
  letter-spacing: 2px;
  white-space: nowrap;
}
#botSetupScope .kiveoBox {
  border-radius: 18px;
  border: 1px solid rgba(96,165,250,.25);
  background: rgba(96,165,250,.05);
  padding: 18px;
}
#botSetupScope .kiveoBox--verified {
  border-color: rgba(22,163,74,.5);
  background: rgba(22,163,74,.08);
}
#botSetupScope .kiveoBoxHeader {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#botSetupScope .kiveoBoxTitle {
  font-weight: 950;
  font-size: 15px;
  color: #93c5fd;
}
#botSetupScope .kiveoBox--verified .kiveoBoxTitle { color: #a7f3d0; }
#botSetupScope .kiveoBoxSubtitle {
  font-size: 13px;
  color: rgba(255,255,255,.55);
}
#botSetupScope .kiveoVerifyBtn {
  flex-shrink: 0;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg,#2563eb,#1d4ed8);
  color: white;
  font-weight: 950;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: .2s;
}
#botSetupScope .kiveoVerifyBtn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37,99,235,.4);
}
#botSetupScope .kiveoVerifyBtn:disabled { opacity: .45; cursor: not-allowed; }
#botSetupScope .kiveoVerifiedBadge {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(22,163,74,.15);
  border: 1px solid rgba(22,163,74,.4);
  border-radius: 10px;
  color: #a7f3d0;
  font-weight: 700;
  font-size: 14px;
}
#botSetupScope .kiveoAttemptCount {
  font-size: 12px;
  color: #fbbf24;
  margin-top: 6px;
}
#botSetupScope .kiveoAttemptCount--disabled { color: #fca5a5; }

/* ========== EMAIL VERIFICATION STEP ========== */
#botSetupScope .verifyAttemptBadge {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(251,191,36,.1);
  border: 1px solid rgba(251,191,36,.3);
  border-radius: 8px;
  color: #fbbf24;
  font-size: 13px;
  font-weight: 600;
}
#botSetupScope .verifyAttemptBadge--failed {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.3);
  color: #fca5a5;
}
#botSetupScope .verifySuccessBadge {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(22,163,74,.12);
  border: 1px solid rgba(22,163,74,.4);
  border-radius: 10px;
  color: #a7f3d0;
  font-weight: 700;
  font-size: 14px;
}
#botSetupScope .resendCodeBtn {
  width: 100%;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.75);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: .2s;
}
#botSetupScope .resendCodeBtn:hover:not(:disabled) {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.35);
}
#botSetupScope .resendCodeBtn:disabled { opacity: .4; cursor: not-allowed; }

/* ========== PAYMENT STEP ========== */
#botSetupScope .paymentSummary { margin-top: 16px; }
#botSetupScope .paymentLineItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
#botSetupScope .paymentLineItem--sub {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  padding-left: 12px;
}
#botSetupScope .paymentDivider {
  height: 1px;
  background: rgba(255,255,255,.15);
  margin: 12px 0;
}
#botSetupScope .paymentAction {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#botSetupScope .stripePayBtn {
  width: 100%;
  padding: 18px 32px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg,#635bff,#5145e8);
  color: white;
  font-weight: 950;
  font-size: 17px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(99,91,255,.45);
  transition: .2s;
  letter-spacing: .3px;
}
#botSetupScope .stripePayBtn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(99,91,255,.55);
}
#botSetupScope .stripePayBtn:disabled { opacity: .5; cursor: not-allowed; }
#botSetupScope .paymentSecure {
  font-size: 12px;
  color: rgba(255,255,255,.45);
}

/* ========== SUCCESS STEP (enhanced) ========== */
#botSetupScope .successKiveoBox {
  margin: 24px auto 0;
  max-width: 480px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(22,163,74,.18), rgba(22,163,74,.08));
  border: 2px solid rgba(22,163,74,.6);
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 0 40px rgba(22,163,74,.15);
}
#botSetupScope .successKiveoLabel {
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.55);
  margin-bottom: 10px;
}
#botSetupScope .successKiveoCode {
  font-family: monospace;
  font-size: 22px;
  font-weight: 700;
  color: #a7f3d0;
  letter-spacing: 3px;
  padding: 10px 16px;
  background: rgba(0,0,0,.35);
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 12px;
  word-break: break-all;
}
#botSetupScope .successKiveoNote {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  line-height: 1.5;
}
#botSetupScope .successCodeTimer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.45);
}
#botSetupScope .successCodeTimer .timerValue {
  display: block;
  font-size: 26px;
  font-family: monospace;
  font-weight: 900;
  color: #a7f3d0;
  margin-top: 4px;
  letter-spacing: 3px;
}
#botSetupScope .successCodeTimer .timerValue.expired {
  color: #fca5a5;
  font-size: 14px;
  letter-spacing: normal;
  font-family: inherit;
}
#botSetupScope .successCopyBtn {
  display: inline-block;
  margin: 8px 0 4px;
  padding: 8px 22px;
  background: rgba(22,163,74,.22);
  border: 1px solid rgba(22,163,74,.6);
  border-radius: 10px;
  color: #a7f3d0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
#botSetupScope .successCopyBtn:hover {
  background: rgba(22,163,74,.38);
  border-color: rgba(22,163,74,.9);
}
#botSetupScope .successSummaryBox {
  margin: 0 auto;
  max-width: 480px;
  padding: 14px 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  font-size: 14px;
  color: rgba(255,255,255,.8);
}
#botSetupScope .successSummaryTitle {
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.4);
  margin-bottom: 8px;
}
#botSetupScope .successCongrats {
  margin: 24px auto 0;
  max-width: 520px;
  font-size: 15px;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
}
#botSetupScope .successHomeBtn {
  display: inline-block;
  margin-top: 24px;
  padding: 14px 32px;
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-weight: 950;
  font-size: 14px;
  transition: .2s;
}
#botSetupScope .successHomeBtn:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.3);
}
@media (max-width:640px) {
  #botSetupScope .kiveoVerifyBtn { width: 100%; }
}

/* ═══════════════════════════════════════════════════
   DEMO VIDEO SECTION
   ═══════════════════════════════════════════════════ */
/* ── HOW IT WORKS STEPS ────────────────────────────────────────────────── */
.how-steps{ display:flex;align-items:flex-start;gap:0;margin-bottom:36px; }
.how-step{
  flex:1;
  background:linear-gradient(145deg,rgba(12,20,16,.88),rgba(8,13,10,.94));
  border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:20px 18px;
  position:relative;transition:.25s;
}
.how-step:hover{
  border-color:rgba(0,255,156,.20);transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 16px rgba(0,255,156,.05);
}
.how-step-num{
  font-size:10px;font-weight:700;letter-spacing:.14em;
  color:rgba(0,255,156,.45);margin-bottom:12px;font-family:monospace;
}
.how-step-icon{
  width:36px;height:36px;border-radius:10px;
  background:rgba(0,255,156,.08);border:1px solid rgba(0,255,156,.15);
  display:flex;align-items:center;justify-content:center;
  color:rgba(0,255,156,.85);margin-bottom:12px;
}
.how-step-icon svg{ width:17px;height:17px; }
.how-step h3{ font-size:13.5px;font-weight:700;color:rgba(255,255,255,.90);margin-bottom:7px;line-height:1.3; }
.how-step p{ font-size:12px;color:rgba(255,255,255,.48);line-height:1.58;margin-bottom:10px; }
.how-step-tags{ display:flex;flex-wrap:wrap;gap:4px; }
.how-step-tag{
  font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:99px;
  background:rgba(0,255,156,.07);border:1px solid rgba(0,255,156,.13);
  color:rgba(0,255,156,.70);white-space:nowrap;
}
.how-step-arrow{
  flex-shrink:0;width:44px;
  display:flex;align-items:center;justify-content:center;padding-top:55px;
}
.how-step-arrow svg{ width:34px;height:13px; }

/* ── RESULTS CHART ─────────────────────────────────────────────────────── */
.results-block{
  background:linear-gradient(145deg,rgba(10,17,13,.90),rgba(6,10,8,.95));
  border:1px solid rgba(255,255,255,.07);border-radius:16px;
  padding:28px 32px;position:relative;overflow:hidden;
}
.results-block::before{
  content:'';position:absolute;top:-30px;right:-30px;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,156,.05) 0%,transparent 70%);
  pointer-events:none;
}
.results-header{
  display:flex;align-items:baseline;gap:14px;margin-bottom:20px;flex-wrap:wrap;
}
.results-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(0,255,156,.52);
}
.results-title{ font-size:clamp(16px,1.8vw,22px);font-weight:800;color:rgba(255,255,255,.88);letter-spacing:-.15px; }
.results-bars{ display:grid;grid-template-columns:1fr 1fr;gap:14px 32px; }
.bar-row{ display:flex;flex-direction:column;gap:5px; }
.bar-row-top{ display:flex;justify-content:space-between;align-items:baseline; }
.bar-label{ font-size:11.5px;color:rgba(255,255,255,.55);font-weight:500; }
.bar-val{ font-size:14px;font-weight:800;color:rgba(255,255,255,.80);font-variant-numeric:tabular-nums; }
.bar-track{ height:6px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden; }
.bar-fill{
  height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,rgba(var(--bc),.62),rgba(var(--bc),1));
  box-shadow:0 0 8px rgba(var(--bc),.28);
  transition:width 1.1s cubic-bezier(.22,.61,.36,1);
}
.bar-fill.animated{ width:var(--bar-w); }

@media(max-width:768px){
  .how-steps{ flex-direction:column; }
  .how-step-arrow{ width:100%;padding:2px 0;transform:rotate(90deg); }
  .results-bars{ grid-template-columns:1fr; }
  .results-block{ padding:20px 18px; }
}

/* ── EXISTING DEMO SECTION WRAPPER ─────────────────────────────────────── */
.demo-video-section{
  max-width:1100px;
  margin:100px auto;
  padding:0 24px;
  position:relative;
}
/* Ambient glow bloom behind the entire demo section */
.demo-video-section::before{
  content:'';
  position:absolute;
  top:40%;left:50%;
  transform:translate(-50%,-50%);
  width:70%;height:55%;
  background:radial-gradient(ellipse,rgba(0,255,156,.07) 0%,rgba(34,211,238,.04) 40%,transparent 70%);
  pointer-events:none;
  z-index:0;
  filter:blur(40px);
}
.demo-video-section>*{ position:relative;z-index:1; }
.demo-video-section .section-label{ margin-bottom:18px; }
.demo-video-heading{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:clamp(28px,3.2vw,48px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.4px;
  margin-bottom:10px;
  overflow:visible;
}
.demo-video-lead{
  color:var(--muted);
  font-size:16px;
  line-height:1.65;
  margin-bottom:48px;
  max-width:560px;
}

/* ── Player shell ── */
.demo-player{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(0,255,156,.18);
  background:#09100d;
  box-shadow:
    0 40px 96px rgba(0,0,0,.65),
    0 0 0 1px rgba(0,255,156,.08),
    0 0 60px rgba(0,255,156,.06),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(2px);
}
/* Top shimmer line */
.demo-player::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent 5%,rgba(0,255,156,.55) 40%,rgba(34,211,238,.40) 60%,transparent 95%);
  z-index:10;
}
/* Corner accent, bottom-right ambient glow reflection */
.demo-player::after{
  content:'';
  position:absolute;
  bottom:-30px;right:-30px;
  width:200px;height:200px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,156,.10) 0%,transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* ── Screen area ── */
.demo-screen{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#070a08;
}
/* scanline overlay, subtle texture like a real display */
.demo-screen::after{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,.06) 3px,
    rgba(0,0,0,.06) 4px
  );
  pointer-events:none;
  z-index:20;
}

/* ── Scenes ── */
.demo-scene{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  background:#070a08;
  padding:28px 32px;
  overflow:hidden;
}
.demo-scene.active{ display:flex; }

/* Shared scene header (mac dots) */
.ds-header{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:20px;
  flex-shrink:0;
}
.ds-header .ds-dot{
  width:10px;height:10px;border-radius:50%;
}
.ds-header .ds-dot.r{background:#ff5f57;}
.ds-header .ds-dot.y{background:#ffbd2e;}
.ds-header .ds-dot.g{background:#27c93f;}
.ds-header .ds-title{
  margin-left:10px;
  font-size:12px;
  color:rgba(255,255,255,.45);
  font-weight:600;
  letter-spacing:.3px;
}

/* ── SCENE 1: Setup ── */
.ds1-layout{ display:grid; grid-template-columns:180px 1fr; gap:24px; flex:1; min-height:0; }
.ds-steps{ display:flex; flex-direction:column; gap:10px; }
.ds-step{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:10px;
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.06);
  background:transparent;
  transition:.3s;
  white-space:nowrap;
}
.ds-step .ds-step-num{
  width:22px;height:22px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;
  flex-shrink:0;
}
.ds-step.active{
  color:rgba(255,255,255,.9);
  background:rgba(0,255,156,.06);
  border-color:rgba(0,255,156,.25);
}
.ds-step.active .ds-step-num{
  border-color:var(--green);
  color:var(--green);
  box-shadow:0 0 8px rgba(0,255,156,.3);
}
.ds-step.done{
  color:rgba(255,255,255,.5);
}
.ds-step.done .ds-step-num{
  background:rgba(0,255,156,.15);
  border-color:rgba(0,255,156,.4);
  color:var(--green);
}
.ds-step.done .ds-step-num::after{ content:'✓'; font-size:9px; }
.ds-step.done .ds-step-label{ display:none; }

.ds1-form{ display:flex; flex-direction:column; gap:14px; }
.ds-field-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin-bottom:4px;
}
.ds-input-mock{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:10px 14px;
  font-size:14px;
  color:rgba(255,255,255,.88);
  min-height:40px;
  display:flex;
  align-items:center;
}
.ds-cursor{
  display:inline-block;
  width:2px;height:15px;
  background:var(--green);
  margin-left:2px;
  vertical-align:middle;
  animation:blink .8s steps(1) infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.ds-select-mock{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:10px 14px;
  font-size:14px;
  color:rgba(255,255,255,.55);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.ds-terminal{
  margin-top:16px;
  background:rgba(0,0,0,.4);
  border-radius:8px;
  border:1px solid rgba(0,255,156,.1);
  padding:10px 14px;
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:12px;
  color:rgba(0,255,156,.8);
  min-height:38px;
  flex-shrink:0;
}

/* ── SCENE 2: Installation ── */
.ds2-layout{ display:grid; grid-template-columns:1fr 1fr; gap:16px; flex:1; min-height:0; }
.ds-panel{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.ds-panel-bar{
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:8px 14px;
  font-size:11.5px;
  color:rgba(255,255,255,.45);
  display:flex;
  align-items:center;
  gap:8px;
}
.ds-browser-dots{ display:flex; gap:5px; }
.ds-browser-dots i{ width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12); display:block; }
.ds-code-body{
  padding:16px;
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:12px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:hidden;
}
.ds-code-row{ color:rgba(255,255,255,.3); white-space:nowrap; }
.ds-code-row.highlight{ color:#22d3ee; }
.ds-code-row.new-line{
  color:var(--green);
  background:rgba(0,255,156,.06);
  border-radius:4px;
  padding:2px 6px;
  margin:-2px -6px;
  opacity:0;
  transform:translateX(-6px);
}

.ds-website-mock{
  flex:1;
  padding:12px;
  position:relative;
  background:rgba(255,255,255,.02);
  overflow:hidden;
}
.ds-mock-nav{
  height:8px;
  background:rgba(255,255,255,.08);
  border-radius:3px;
  margin-bottom:10px;
}
.ds-mock-hero{
  height:55px;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border-radius:6px;
  margin-bottom:8px;
}
.ds-mock-blocks{ display:flex; gap:6px; }
.ds-mock-block{
  height:30px;
  flex:1;
  background:rgba(255,255,255,.04);
  border-radius:5px;
}
.ds-mock-block.wide{ flex:2; }

/* Chat widget that appears */
.ds-widget-bubble{
  position:absolute;
  bottom:12px;right:12px;
  width:140px;
  background:linear-gradient(160deg,rgba(8,20,14,.95),rgba(4,12,8,.98));
  border:1px solid rgba(0,255,156,.3);
  border-radius:16px;
  padding:12px;
  opacity:0;
  transform:translateY(16px) scale(.94);
  box-shadow:0 8px 32px rgba(0,0,0,.5), 0 0 20px rgba(0,255,156,.08);
}
.ds-widget-dot{
  width:7px;height:7px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 8px rgba(34,197,94,.8);
  animation:pulse 2s infinite;
  display:inline-block;
  margin-right:6px;
}
.ds-widget-name{ font-size:11px;font-weight:700;color:#fff;display:flex;align-items:center; }
.ds-widget-msg{ font-size:10px;color:rgba(255,255,255,.55);margin-top:6px;line-height:1.4; }

.ds2-status{
  margin-top:14px;
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,.7);
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  min-height:22px;
}
.ds-online-dot{
  width:8px;height:8px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 10px rgba(34,197,94,.9);
  flex-shrink:0;
  animation:pulse 2s infinite;
}

/* ── SCENE 3: Revenue ── */
.ds3-layout{ display:flex; flex-direction:column; flex:1; gap:16px; min-height:0; }
.ds-dash-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
}
.ds-dash-title{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:15px;
  font-weight:700;
  color:rgba(255,255,255,.85);
}
.ds-growth-badge{
  font-size:12px;
  font-weight:800;
  color:#a7f3d0;
  background:rgba(0,255,156,.12);
  border:1px solid rgba(0,255,156,.25);
  padding:4px 12px;
  border-radius:999px;
  letter-spacing:.3px;
  opacity:0;
}

.ds-chart-wrap{
  flex:1;
  position:relative;
  min-height:0;
}
.ds-chart-wrap svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.ds-grid-line{
  stroke:rgba(255,255,255,.05);
  stroke-width:1;
}
.ds-chart-path{
  fill:none;
  stroke:url(#revGrad);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ds-chart-area-fill{
  opacity:0;
}
.ds-chart-labels{
  display:flex;
  justify-content:space-between;
  padding:0 4px;
  font-size:10px;
  color:rgba(255,255,255,.3);
  letter-spacing:.3px;
  margin-top:4px;
  flex-shrink:0;
}

.ds3-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  flex-shrink:0;
}
.ds-kpi{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  padding:12px 14px;
}
.ds-kpi-num{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:22px;
  font-weight:800;
  background:linear-gradient(135deg,var(--green) 0%,#22d3ee 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
  letter-spacing:-.5px;
  line-height:1.2;
}
.ds-kpi-label{
  font-size:11px;
  color:rgba(255,255,255,.4);
  margin-top:3px;
  line-height:1.3;
}

/* ── Play overlay ── */
.demo-play-overlay{
  position:absolute;
  inset:0;
  z-index:30;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  background:rgba(7,10,8,.7);
  backdrop-filter:blur(2px);
  transition:opacity .35s;
}
.demo-play-ring{
  position:relative;
  width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;
}
.demo-play-ring::before{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:1px solid rgba(0,255,156,.2);
  animation:ring-pulse 2.5s ease-in-out infinite;
}
.demo-play-ring::after{
  content:'';
  position:absolute;
  inset:-22px;
  border-radius:50%;
  border:1px solid rgba(0,255,156,.1);
  animation:ring-pulse 2.5s ease-in-out .6s infinite;
}
@keyframes ring-pulse{
  0%,100%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.08);opacity:1}
}
.demo-play-btn{
  width:72px;height:72px;
  border-radius:50%;
  background:var(--green);
  border:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#000;
  transition:transform .2s, box-shadow .2s;
  box-shadow:0 0 28px rgba(0,255,156,.35), 0 8px 24px rgba(0,0,0,.4);
  position:relative;
  z-index:1;
}
.demo-play-btn:hover{
  transform:scale(1.08);
  box-shadow:0 0 40px rgba(0,255,156,.5), 0 8px 32px rgba(0,0,0,.5);
}
.demo-play-btn svg{ width:26px;height:26px;margin-left:4px; }
.demo-play-overlay p{
  font-size:13px;
  color:rgba(255,255,255,.6);
  font-weight:600;
  letter-spacing:.5px;
}
.demo-play-overlay p span{
  color:rgba(255,255,255,.3);
  margin-left:8px;
}

/* ── Timeline bar ── */
.demo-timeline{
  padding:18px 24px 6px;
  border-top:1px solid rgba(255,255,255,.06);
}
.demo-progress-track{
  position:relative;
  height:3px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  margin-bottom:14px;
  cursor:pointer;
}
.demo-progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--green),#22d3ee);
  border-radius:999px;
  transition:width .1s linear;
  box-shadow:0 0 8px rgba(0,255,156,.4);
}
.demo-progress-thumb{
  position:absolute;
  top:50%;
  left:0%;
  transform:translate(-50%,-50%);
  width:11px;height:11px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px rgba(0,255,156,.6);
  transition:left .1s linear;
}

/* ── Chapter buttons ── */
.demo-chapters{
  display:flex;
  gap:0;
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  width:fit-content;
  margin-bottom:14px;
}
.demo-chapter{
  padding:8px 20px;
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.4);
  background:none;
  border:none;
  cursor:pointer;
  transition:color .2s, background .2s;
  letter-spacing:.2px;
  border-right:1px solid rgba(255,255,255,.07);
}
.demo-chapter:last-child{ border-right:none; }
.demo-chapter.active{
  color:var(--green);
  background:rgba(0,255,156,.08);
}
.demo-chapter:hover:not(.active){ color:rgba(255,255,255,.7); }

/* ── Controls bar ── */
.demo-controls{
  padding:0 24px 18px;
  display:flex;
  align-items:center;
  gap:12px;
}
.demo-ctrl-btn{
  width:34px;height:34px;
  border-radius:8px;
  background:rgba(0,255,156,.1);
  border:1px solid rgba(0,255,156,.2);
  color:var(--green);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.2s;
}
.demo-ctrl-btn svg{ width:16px;height:16px; }
.demo-ctrl-btn:hover{ background:rgba(0,255,156,.18); }
.demo-time{
  font-size:12px;
  color:rgba(255,255,255,.35);
  font-family:'JetBrains Mono','Fira Code',monospace;
  letter-spacing:.5px;
}
.demo-restart-btn{
  margin-left:auto;
  background:none;
  border:none;
  color:rgba(255,255,255,.35);
  font-size:18px;
  cursor:pointer;
  transition:color .2s;
  padding:4px 8px;
}
.demo-restart-btn:hover{ color:rgba(255,255,255,.7); }
@keyframes demoPulse{0%,100%{transform:scale(1);box-shadow:0 4px 20px rgba(0,255,156,.45)}50%{transform:scale(1.08);box-shadow:0 4px 28px rgba(0,255,156,.7)}}
@keyframes demoMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}