/* ═══════════════════════════════════════════════════════════════
   VOCALIS AI — Premium-Layer (shared)

   Wiederverwendbare Premium-Komponenten fuer die dunklen Marketing-Seiten
   (landing.css-Basis): Glass-Nav, Tech-Mesh-Hero, Premium-Glass-Cards,
   Gradient-Section-Labels, Footer-CTA-Glow, Card-Icons.

   Verwendung: NACH landing.css einbinden. Identisch zum home.html-/blog.html-
   Premium-Block, nur generalisiert (keine seiten-spezifischen ID-Selektoren).
   Section-Glow via .lp-section--glow, Icon-Varianten via Modifier-Klassen.

   CI-Schrift (Montserrat/Inter) kommt aus landing.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Glass-Nav mit voller Navigation ─────────────────────────── */
.lp-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); background: rgba(10,14,26,.72); border-bottom: 1px solid rgba(255,255,255,.07); }
.lp-nav-inner { display: flex; align-items: center; gap: 28px; justify-content: flex-start; }
.lp-nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.lp-nav-links a { color: rgba(226,232,240,.82); text-decoration: none; font-size: 15px; font-weight: 500; transition: color .18s ease; white-space: nowrap; }
.lp-nav-links a:hover { color: #fff; }
@media (max-width: 920px) { .lp-nav-links { display: none; } }

/* ── Hero: Tech-Mesh + Grid + Glow (kein Bild-Asset, laedt sofort) ── */
.lp-hero { position: relative; overflow: hidden; padding-top: 64px; padding-bottom: 80px; }
.lp-hero::before { content: ""; position: absolute; inset: -20% -10% 0 -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 58% at 18% 6%, rgba(34,211,238,.22), transparent 62%),
    radial-gradient(46% 58% at 84% 14%, rgba(99,102,241,.26), transparent 62%),
    radial-gradient(60% 60% at 60% 100%, rgba(168,85,247,.16), transparent 64%); }
.lp-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 26%, #000 0%, transparent 82%);
  mask-image: radial-gradient(72% 62% at 50% 26%, #000 0%, transparent 82%); }
.lp-hero > * { position: relative; z-index: 1; }

/* Hero-Typo + Tagline */
.lp-hero h1 { letter-spacing: -.02em; }
.lp-hero-tagline { margin: 14px auto 4px; max-width: 660px; font-size: clamp(17px, 2.2vw, 21px); font-weight: 600; color: #e2e8f0; }
.lp-hero-tagline .accent { background: linear-gradient(90deg,#22d3ee,#818cf8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-hero-subtitle { max-width: 600px; }

/* Premium-CTA-Glow */
.lp-hero-ctas .lp-btn-primary { box-shadow: 0 8px 30px rgba(34,211,238,.28); }
.lp-hero-ctas .lp-btn-primary:hover { box-shadow: 0 12px 40px rgba(34,211,238,.42); transform: translateY(-1px); }

/* Trust-Row als dezente Pills */
.lp-trust { gap: 10px 16px; }
.lp-trust-item { padding: 7px 13px; border: 1px solid rgba(255,255,255,.10); border-radius: 999px; background: rgba(255,255,255,.03); font-size: 13.5px; }

@media (prefers-reduced-motion: no-preference) {
  .lp-hero::before { animation: heroGlow 14s ease-in-out infinite alternate; }
}
@keyframes heroGlow { from { opacity: .82; transform: translateY(0); } to { opacity: 1; transform: translateY(-14px); } }

/* ── Sektionen & Cards — Premium-Polish ──────────────────────── */
.lp-section { position: relative; }
.lp-section--glow::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(54% 72% at 50% 0%, rgba(99,102,241,.10), transparent 62%); }
.lp-section > * { position: relative; z-index: 1; }

/* Section-Label als Gradient-Pill */
.lp-section-label { display: inline-block; padding: 5px 14px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,211,238,.14), rgba(129,140,248,.14));
  border: 1px solid rgba(255,255,255,.10); color: #a5b4fc; font-weight: 600; letter-spacing: .04em; }
.lp-section-title { letter-spacing: -.02em; }

/* Premium Glass-Cards */
.lp-card { position: relative; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.6);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease, box-shadow .25s ease; }
.lp-card:hover { transform: translateY(-4px); border-color: rgba(34,211,238,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 28px 60px -28px rgba(34,211,238,.32); }
.lp-card-title { letter-spacing: -.01em; }
.lp-card a { color: #7dd3fc; text-decoration: none; }
.lp-card a:hover { color: #fff; text-decoration: underline; }

/* Per-Card-Stagger beim Reveal (benoetigt Scroll-Reveal-JS: .lp-animate -> .lp-visible) */
.lp-grid-3.lp-animate.lp-visible > * { animation: cardIn .55s both; }
.lp-grid-3.lp-animate.lp-visible > *:nth-child(1) { animation-delay: .04s; }
.lp-grid-3.lp-animate.lp-visible > *:nth-child(2) { animation-delay: .14s; }
.lp-grid-3.lp-animate.lp-visible > *:nth-child(3) { animation-delay: .24s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp-grid-3.lp-animate.lp-visible > * { animation: none; } }

/* FAQ premium */
.lp-faq-item { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; margin-bottom: 10px;
  background: rgba(255,255,255,.025); overflow: hidden; transition: border-color .2s ease, background .2s ease; }
.lp-faq-item:hover { border-color: rgba(255,255,255,.16); }
.lp-faq-item.open { border-color: rgba(34,211,238,.30); background: rgba(34,211,238,.045); }

/* Footer-CTA premium */
.lp-footer-cta { position: relative; overflow: hidden; border-radius: 24px; padding: 56px 32px; margin-top: 48px;
  background: linear-gradient(135deg, rgba(34,211,238,.10), rgba(129,140,248,.12), rgba(168,85,247,.10));
  border: 1px solid rgba(255,255,255,.10); }
.lp-footer-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 130% at 50% 0%, rgba(34,211,238,.20), transparent 60%); }
.lp-footer-cta > * { position: relative; z-index: 1; }
.lp-footer-cta h2 { letter-spacing: -.02em; }
.lp-footer-cta .lp-btn-primary { box-shadow: 0 10px 30px rgba(34,211,238,.30); }

/* Card-Icons (Chip + Inline-SVG) */
.lp-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(129,140,248,.18));
  border: 1px solid rgba(255,255,255,.10); color: #7dd3fc; }
.lp-card-icon svg { width: 24px; height: 24px; }
.lp-card-icon--violet { color: #a78bfa; background: linear-gradient(135deg, rgba(167,139,250,.22), rgba(129,140,248,.16)); }
.lp-card-icon--orange { color: #fb923c; background: linear-gradient(135deg, rgba(251,146,60,.22), rgba(245,158,11,.14)); }