/* ===== Catava — High-End Dark (Animations + Mobile) ===== */
:root{
  --bg:#0a0c10; --panel:#0f1319; --ink:#e9eef4; --muted:#9aa5b1; --line:#1b2130;
  --ind:#a5b4fc; --sky:#7dd3fc; --fus:#f0abfc; --ok:#22c55e;

  /* Sprite für den Cursor-Trail (Logo, transparent) */
  --cursorfx-sprite: url("/wp-content/uploads/2025/10/Catava-_lLogo.png");
}

#catava-root{ background:var(--bg); color:var(--ink); min-height:100svh; isolation:isolate; }

/* Layout */
.cv-wrap{ max-width:1200px; margin:0 auto; padding:clamp(20px,4vw,64px); }
.cv-sec{ padding:clamp(28px,5vw,84px) 0; border-top:1px solid var(--line); }
.cv-grid{ display:grid; gap:18px; }
@media (min-width:920px){
  .cv-2{ grid-template-columns:repeat(2,1fr) }
  .cv-3{ grid-template-columns:repeat(3,1fr) }
  .cv-4{ grid-template-columns:repeat(4,1fr) }
}

/* Hero */
.cv-hero{ padding-top:clamp(56px,9vw,132px); position:relative; }
.cv-eyebrow{ letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:#a7b0c0; margin-bottom:8px }
.cv-h1{ font-size:clamp(34px,6.2vw,72px); line-height:1.08; letter-spacing:-.01em; margin:.4rem 0 .6rem; color:#fff; }
.cv-sub{ color:var(--muted); max-width:68ch; font-size:clamp(15px,1.6vw,18px); }
.cv-chips{ display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.cv-chip{ font-size:12px; padding:.38rem .7rem; border-radius:999px; background:#ffffff10; border:1px solid #ffffff1a; color:#cfd7e5; }

/* Buttons */
.cv-actions{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.cv-btn{ background:#fff; color:#000; border-radius:16px; padding:12px 18px; font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease; position:relative; will-change:transform;
}
.cv-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(255,255,255,.08); }
.cv-ghost{ border:1px solid #ffffff26; background:transparent; color:#fff; }

/* Cards / Glass */
.cv-card{ background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  border:1px solid var(--line); border-radius:20px; padding:20px; backdrop-filter:blur(6px);
  transform-style:preserve-3d; transform:translateZ(0);
}
.cv-card:hover{ border-color:#2a3246; box-shadow:0 12px 30px rgba(9,12,18,.45); }

/* Icons */
.cv-icon{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:#ffffff14; border:1px solid #ffffff1f; margin-right:10px; }

/* Work / Thumbs */
.cv-item{ text-decoration:none; color:inherit; }
.cv-thumb{ aspect-ratio:16/10; border-radius:18px; overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid var(--line); position:relative;
}
.cv-thumb::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(1200px 380px at -10% 110%, rgba(125,211,252,.28), rgba(165,180,252,.22), transparent);
  opacity:0; transition:opacity .35s ease;
}
.cv-item:hover .cv-thumb::after{ opacity:1; }
.cv-meta{ display:flex; gap:8px; margin-top:12px; align-items:center; }
.cv-tag{ font-size:12px; padding:.3rem .55rem; border-radius:999px; background:#ffffff12; border:1px solid #ffffff1a; color:#cbd5e1 }

/* Process */
.cv-step{ display:flex; gap:12px; align-items:flex-start; }
.cv-n{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:#3b82f64d; color:#d8ecff; font-weight:800; border:1px solid #60a5fa59; }

/* Pricing */
.cv-tier{ background:linear-gradient(180deg,#11151d,#0b0f16); border:1px solid var(--line); border-radius:22px; padding:22px; }
.cv-tier.accent{ border-color:#4f75ff66; background:linear-gradient(180deg,#151b2c,#0c0f17); }
.cv-price{ color:#fff; font-size:28px; font-weight:800; margin:6px 0 12px; }
.cv-ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.cv-ul li{ display:flex; gap:9px; align-items:center; color:#dbe2ea; font-size:14px; }
.cv-dot{ width:6px; height:6px; border-radius:999px; background:#9fb2c6; }

/* Glows + Reveal */
.cv-glow{ position:absolute; inset:-10% -10% 0 -10%; pointer-events:none; z-index:-1; }
.cv-g{ position:absolute; filter:blur(90px); opacity:.28; }
.cv-g.a{ top:4%; left:8%; width:420px; height:420px; background:radial-gradient(closest-side,#6366f1,transparent); }
.cv-g.b{ right:6%; bottom:8%; width:460px; height:460px; background:radial-gradient(closest-side,#22d3ee,transparent); }
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }

/* ===== Selection – sauber (keine Balken bei mehrzeiliger H1) ===== */
#catava-root ::selection{ background: rgba(120,140,170,.28); color:#fff; text-shadow:none; }
#catava-root ::-moz-selection{ background: rgba(120,140,170,.28); color:#fff; text-shadow:none; }
#catava-root .cv-h1::selection,
#catava-root .cv-h1 *::selection{ background:transparent; color:#fff; -webkit-text-fill-color:#fff; }
#catava-root .cv-h1::-moz-selection,
#catava-root .cv-h1 *::-moz-selection{ background:transparent; color:#fff; }

/* ===== CursorFX — dezenter Logo-Partikel-Trail (Desktop only) ===== */
.cursorfx-canvas{
  position:fixed; inset:0; pointer-events:none; z-index:3; opacity:1;
}
@media (pointer: coarse){
  .cursorfx-canvas{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .cursorfx-canvas{ display:none; }
}

/* Minimal Footer */
.cv-foot{ padding:28px 0; border-top:1px solid var(--line); opacity:.75; font-size:13px; }