/* [LANDING-L1 20.05.2026 / L1.5-Vercel-Polish 21.05.2026]
 * Read-only Pipeline-Demo für Landing-Hero.
 *
 * VERCEL-NIVEAU-DISZIPLIN:
 * - Kein Container-Rahmen, kein Schatten, kein eigener Background. Die Pipeline
 *   atmet im selben Atmosphären-Raum wie der Hero — kein „aufgeklebter Screenshot".
 * - Pulsing live-dots in Stage-Heads = das System atmet.
 * - Activity-Feed unter dem Board = der User sieht den CRM laufen.
 * - Choreographierter Stagger-Reveal: Cards erscheinen nach dem Hero-Text als
 *   *fließende Fortsetzung* der Animation, nicht als zweites Element.
 *
 * Desktop ≥768px: HTML5-DnD. Mobile ≤767px: Auto-Cycler + Tap-To-Advance.
 * Zero API. Respektiert prefers-reduced-motion. */

/* === Container: transparent, full-bleed-bereit === */
.lp-pipeline-demo{
  position:relative;
  width:100%;
  /* keine border-radius, kein border, kein box-shadow, kein background.
     Die Demo IST Teil des Hero-Atmosphärenraums. */
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:0;
  overflow:visible;
}

/* === Board === */
.lpd-board{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:start;
}

/* === Stage-Spalte === */
.lpd-col{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:12px;
  min-height:240px;
  display:flex;flex-direction:column;gap:8px;
  transition:background 200ms cubic-bezier(0.23,1,0.32,1),border-color 200ms;
  /* [LANDING-L2.2 21.05.2026] Stagger-Reveal animiert NUR „from" → „to" mit backwards-Fill.
     Base ist immer sichtbar (opacity:1). Vorher: opacity:0 als Base + forwards-Animation —
     wenn nachträglich `.lpd-col-pulse` (drop-Feedback) eingehängt wurde, ersetzte das die
     animation-property → Spalte fiel auf Base opacity:0 zurück → Rahmen „verschwand". */
  animation:lpdColIn 600ms cubic-bezier(0.23,1,0.32,1) backwards;
}
.lpd-col:nth-child(1){animation-delay:480ms}
.lpd-col:nth-child(2){animation-delay:540ms}
.lpd-col:nth-child(3){animation-delay:600ms}
.lpd-col:nth-child(4){animation-delay:660ms}
.lpd-col:nth-child(5){animation-delay:720ms}
@keyframes lpdColIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

.lpd-col-over{
  background:rgba(201,168,76,.10);
  border-color:rgba(201,168,76,.45);
}
.lpd-col-pulse{animation:lpdPulse 720ms cubic-bezier(0.23,1,0.32,1)}
@keyframes lpdPulse{
  0%{box-shadow:0 0 0 0 rgba(201,168,76,.55)}
  100%{box-shadow:0 0 0 18px rgba(201,168,76,0)}
}

.lpd-col-head{
  display:flex;align-items:center;gap:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:.74rem;font-weight:600;color:#f5f5f7;letter-spacing:.02em;
}

/* === Pulsing live-dot === */
/* Außen-Aura pulst, der Kern bleibt — signalisiert „läuft live" */
.lpd-dot{
  position:relative;
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  flex-shrink:0;
  z-index:1;
}
.lpd-dot::after{
  content:'';
  position:absolute;inset:0;
  border-radius:50%;
  background:inherit;
  opacity:.55;
  z-index:-1;
  animation:lpdLive 2.6s cubic-bezier(0.23,1,0.32,1) infinite;
}
@keyframes lpdLive{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(2.4);opacity:0}
  100%{transform:scale(2.4);opacity:0}
}

.lpd-col-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpd-col-count{
  font-family:ui-monospace,'JetBrains Mono','SF Mono',Menlo,monospace;
  font-size:.82rem;color:#e0be6a;font-weight:700;
  min-width:18px;text-align:right;display:inline-block;
  font-variant-numeric:tabular-nums;
}
.lpd-col-count.lpd-spin{animation:lpdSpin 360ms cubic-bezier(0.23,1,0.32,1)}
@keyframes lpdSpin{
  0%{transform:rotateX(0deg);opacity:1}
  50%{transform:rotateX(90deg);opacity:.25}
  100%{transform:rotateX(0deg);opacity:1}
}
.lpd-col-cards{display:flex;flex-direction:column;gap:6px;flex:1;min-height:100px}

/* === Card === */
.lpd-card{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:10px 11px;
  cursor:grab;
  display:flex;flex-direction:column;gap:5px;
  color:#f5f5f7;
  font-family:'DM Sans',system-ui,sans-serif;
  position:relative;
  transition:transform 200ms cubic-bezier(0.23,1,0.32,1),border-color 200ms,box-shadow 200ms;
  /* [LANDING-L2.1 21.05.2026] Defensive Drag-Härtung — verhindert Text-Selection statt Drag */
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  /* [LANDING-L2.2 21.05.2026] Stagger via backwards-Fill statt opacity:0 + forwards.
     Base bleibt sichtbar (opacity:1), Animation regelt nur das Einblenden. */
  animation:lpdCardIn 480ms cubic-bezier(0.23,1,0.32,1) backwards;
  animation-delay:calc(800ms + var(--i,0) * 60ms);
}
@keyframes lpdCardIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

@media (hover:hover) and (pointer:fine){
  .lpd-card:hover{transform:translateY(-1px);border-color:rgba(201,168,76,.45);box-shadow:0 6px 18px rgba(0,0,0,.35)}
}
.lpd-card:active{cursor:grabbing}
.lpd-card-dragging{opacity:.45;transform:rotate(-1.5deg)}

.lpd-card-row-top{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
}
.lpd-card-name{
  font-size:.82rem;font-weight:600;color:#f5f5f7;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;
}
.lpd-card-id{
  font-family:ui-monospace,'JetBrains Mono','SF Mono',Menlo,monospace;
  font-size:.6rem;color:#6e6e73;letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.lpd-card-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lpd-chip{
  padding:2px 7px;background:rgba(201,168,76,.16);color:#e0be6a;
  border-radius:99px;font-size:.64rem;font-weight:600;letter-spacing:.02em;
  white-space:nowrap;
}
.lpd-meta{color:#86868b;font-size:.7rem}
.lpd-card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:2px;gap:8px}
.lpd-date{
  font-size:.66rem;color:#6e6e73;
  font-family:ui-monospace,'JetBrains Mono','SF Mono',Menlo,monospace;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.lpd-amount{
  font-family:ui-monospace,'JetBrains Mono','SF Mono',Menlo,monospace;
  font-size:.78rem;color:#e0be6a;font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* === Activity-Feed (unter dem Board) === */
/* Mono-Lines, fader oben/unten, simuliert ein live-laufendes System */
.lpd-feed{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
  font-family:ui-monospace,'JetBrains Mono','SF Mono',Menlo,monospace;
  font-size:.7rem;
  color:#86868b;
  display:flex;flex-direction:column;gap:4px;
  max-height:54px;
  overflow:hidden;
  mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 100%);
  opacity:0;
  animation:lpdFeedReveal 600ms cubic-bezier(0.23,1,0.32,1) 1100ms forwards;
}
@keyframes lpdFeedReveal{to{opacity:1}}
.lpd-feed-line{
  display:flex;gap:12px;align-items:center;
  opacity:0;
  animation:lpdFeedIn 360ms cubic-bezier(0.23,1,0.32,1) forwards;
  font-variant-numeric:tabular-nums;
}
.lpd-feed-line .lpd-fl-t{color:#6e6e73;flex-shrink:0;font-size:.66rem}
.lpd-feed-line .lpd-fl-ev{color:#a1a1a6;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpd-feed-line .lpd-fl-tag{color:#e0be6a;flex-shrink:0;font-size:.66rem;font-weight:600}
@keyframes lpdFeedIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* === Idle-Hint (Desktop) === */
.lpd-hint{
  position:absolute;bottom:-12px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:rgba(20,20,22,.95);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(201,168,76,.30);
  color:#f5f5f7;
  padding:10px 18px;border-radius:99px;
  font-size:.78rem;font-weight:500;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  opacity:0;transition:opacity 280ms cubic-bezier(0.23,1,0.32,1),transform 280ms cubic-bezier(0.23,1,0.32,1);
  pointer-events:none;z-index:10;white-space:nowrap;
}
.lpd-hint-show{opacity:1;transform:translateX(-50%) translateY(0)}

/* === Tap-Hint (Mobile) === */
.lpd-next-hint{
  position:absolute;top:-22px;left:50%;
  transform:translateX(-50%);
  background:#c9a84c;color:#0d0f14;
  font-size:.66rem;font-weight:700;
  padding:3px 10px;border-radius:99px;
  box-shadow:0 6px 18px rgba(201,168,76,.40);
  animation:lpdHintIn 240ms cubic-bezier(0.23,1,0.32,1);
  white-space:nowrap;letter-spacing:.02em;
  z-index:5;
}
@keyframes lpdHintIn{from{opacity:0;transform:translateX(-50%) translateY(4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* === Mobile — horizontal scroll, 78% Col-Breite, Snap === */
@media (max-width: 767px){
  .lpd-board{
    grid-template-columns:none;
    display:flex;gap:8px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }
  .lpd-board::-webkit-scrollbar{height:4px}
  .lpd-board::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px}
  .lpd-col{flex:0 0 78%;scroll-snap-align:start;min-height:200px}
  .lpd-card{cursor:pointer}
  .lpd-hint{font-size:.72rem;padding:8px 14px}
  .lpd-feed{font-size:.66rem;max-height:60px}
  .lpd-feed-line .lpd-fl-t,
  .lpd-feed-line .lpd-fl-tag{font-size:.62rem}
}

/* === Reduced-Motion === */
@media (prefers-reduced-motion: reduce){
  .lpd-card,.lpd-col,.lpd-col-count,.lpd-hint,.lpd-next-hint,.lpd-feed,.lpd-feed-line,.lpd-dot::after{
    animation:none !important;transition:none !important;opacity:1 !important;transform:none !important;
  }
  .lpd-col-pulse{animation:none !important;box-shadow:none !important}
}