/* ==========================================================================
   leistungen/index.html . Stroemungslinien-Faecher (WP-E2)
   Konventioneller Flow (kein ascent): Starttiefe -600 m, durchgehend
   dunkel-elegant mit twilight-Aufhellung am Ende. Nutzt das globale
   design-system.css; hier nur Seiten-Spezifisches.
   Motiv: aus einem Punkt faechern vier SVG-Stroemungslinien auf, jede
   fuehrt zu einer Cluster-Karte. CSS position:sticky + Scrub-Draw, kein
   ScrollTrigger-Pin (COMMON Sec.3). Process als 4-Schritte-Galerie.
   ========================================================================== */

/* Startzone der Seite (Engine blendet --zone-bg pro data-depth-zone weich) */
body { --zone-bg: var(--zone-midnight); }

.lp-section { position: relative; overflow: hidden; }
.lp-section > .container { position: relative; z-index: 2; }

.lp-head { max-width: 52rem; margin-bottom: clamp(2rem, 5vh, 3.25rem); }
.lp-head h2 { margin-block: 0.5rem 0.75rem; }

/* --------------------------------------------------------------------------
   Section 1 . HERO (ruhig, halbe Hoehe)
   -------------------------------------------------------------------------- */
.lp-hero {
  min-height: 62vh;
  min-height: 62svh;
  display: flex;
  align-items: center;
  padding-block: clamp(5rem, 16vh, 9rem) clamp(3rem, 8vh, 5rem);
}
.lp-hero__inner { max-width: 56rem; }
.lp-hero h1 { margin-bottom: 1.5rem; }
.lp-hero__sub { max-width: 44rem; }
.lp-hero .pill { margin-bottom: 1.75rem; }

/* --------------------------------------------------------------------------
   Section 2 . FAECHER + vier Cluster
   Sticky-Figur (Ursprungspunkt + vier Stroemungslinien), die Karten
   scrollen darunter vorbei; die Linien zeichnen sich per Scrub
   (leistungen-index.js). Kein Pin.
   -------------------------------------------------------------------------- */
.fan-scene { padding-block: clamp(3.5rem, 9vh, 6.5rem); }

.fan-figure {
  position: sticky;
  top: clamp(78px, 12vh, 128px);
  height: clamp(150px, 24vh, 240px);
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
  pointer-events: none;
  z-index: 1;
}
.fan-figure svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fan-line { stroke: var(--accent-caribbean); stroke-width: 1.4; fill: none; opacity: 0.55; stroke-linecap: round; }
.fan-origin { fill: var(--accent-jellofish); }
.fan-origin-halo {
  fill: none; stroke: var(--accent-caribbean); stroke-width: 1;
  opacity: 0.5; transform-origin: center; animation: fan-pulse 3.4s ease-in-out infinite;
}
.fan-node { fill: var(--accent-caribbean); opacity: 0.8; }
@keyframes fan-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.12; transform: scale(1.55); }
}

.cluster-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.8vw, 1.75rem);
}
.lcluster {
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  padding: clamp(1.5rem, 2vw, 2rem);
  transition: transform var(--t-base, 240ms) ease, border-color var(--t-base, 240ms) ease;
}
.lcluster:hover { transform: translateY(-4px); }
.lcluster__top { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; }
.lcluster h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.lcluster__hook { color: var(--accent-caribbean); font-weight: 500; font-size: 0.9375rem; margin-bottom: 1rem; }
.lcluster__list {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
  font-size: 0.875rem; color: var(--text-muted); line-height: 1.45;
}
.lcluster__list li { position: relative; padding-left: 1.1rem; }
.lcluster__list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-caribbean); opacity: 0.7;
}
.lcluster__punch {
  font-size: 0.9375rem; color: var(--text-primary); opacity: 0.92;
  border-left: 2px solid var(--caribbean-25); padding-left: 0.875rem; margin-bottom: 1.5rem;
}
.lcluster .arrow-link { margin-top: auto; }

@media (max-width: 1080px) { .cluster-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .cluster-grid { grid-template-columns: 1fr; }
  .fan-figure { display: none; }
}

/* --------------------------------------------------------------------------
   Section 3 . PROCESS "So arbeiten wir" . 4-Schritte-Galerie
   Horizontal auf Desktop, vertikaler Stack auf Mobile. Kein Pin.
   -------------------------------------------------------------------------- */
.process-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  position: relative;
}
.process-line {
  position: absolute; left: 0; right: 0; top: 28px; height: 2px;
  pointer-events: none; z-index: 0;
}
.process-line svg { width: 100%; height: 100%; overflow: visible; }
.process-step { position: relative; z-index: 1; }
.process-step__num {
  font-family: var(--font-mono); font-size: 2.5rem; font-weight: 500;
  color: var(--accent-caribbean); line-height: 1; margin-bottom: 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--caribbean-25); background: var(--bg-deep);
  font-size: 1.25rem;
}
.process-step h3 { font-size: 1.1875rem; margin: 0.85rem 0 0.5rem; }
.process-step p { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.55; }
@media (max-width: 860px) {
  .process-track { grid-template-columns: 1fr; gap: 1.5rem; }
  .process-line { display: none; }
}

/* --------------------------------------------------------------------------
   Section 4 . ENGAGEMENT "Vier Tiefen" . Tiefenstufen-Karten
   AI Audit leicht hervorgehoben als Einstieg.
   -------------------------------------------------------------------------- */
.depth-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
.depth-card { display: flex; flex-direction: column; padding: clamp(1.5rem, 2vw, 1.85rem); }
.depth-card__name { font-size: 1.1875rem; font-weight: 600; margin-bottom: 0.4rem; }
.depth-card__meta {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.2rem;
}
.depth-card__price {
  font-family: var(--font-mono); font-size: 0.8125rem; color: var(--accent-caribbean);
  margin-bottom: 1rem;
}
.depth-card__desc { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.6; }
.depth-card--audit {
  border-color: var(--caribbean-25);
  background: linear-gradient(180deg, var(--caribbean-08, rgba(160,239,255,0.06)), var(--bg-elevated));
}
.depth-card--audit .depth-card__badge {
  align-self: flex-start; margin-bottom: 0.75rem;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-caribbean); border: 1px solid var(--caribbean-25);
  border-radius: 999px; padding: 0.15rem 0.5rem;
}
@media (max-width: 1080px) { .depth-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .depth-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Section 5 . DSGVO-Anker (kompakt)
   -------------------------------------------------------------------------- */
.dsgvo-compact { border-radius: var(--radius-lg); background: var(--bg-abyss); padding: clamp(2rem, 5vw, 3.25rem); }
.dsgvo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.dsgvo-point__num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-caribbean); letter-spacing: 0.08em; }
.dsgvo-point h3 { font-size: 1.0625rem; margin: 0.5rem 0; }
.dsgvo-point p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; }
@media (max-width: 760px) { .dsgvo-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Section 6 . BEWEIS-Anker (Logo-Stroemung, kein Karten-Grid)
   -------------------------------------------------------------------------- */
.proof-scene { padding-block: clamp(3rem, 8vh, 5.5rem); }
.proof-scene .stream-band { margin-block: clamp(1.5rem, 4vh, 2.5rem); }
.proof-link { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Section 7 . Final CTA
   -------------------------------------------------------------------------- */
.lp-final { text-align: center; padding-block: clamp(4rem, 11vh, 7rem); }
.lp-final__inner { max-width: 46rem; margin-inline: auto; }
.lp-final h2 { margin-bottom: 1rem; }
.lp-final__actions { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.lp-final__alt { font-size: 0.9375rem; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   reduced-motion: Faecher-Puls aus (Linien bleiben sichtbar/voll gezeichnet)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fan-origin-halo { animation: none; }
}
html[data-user-motion="off"] .fan-origin-halo { animation: none; }