html, body { height: 100%; }
.will-transform { will-change: transform, opacity; }

.mask-window {
  --window:600px; --fade:24px;
  -webkit-mask-image:linear-gradient(
    to right,
    rgba(0,0,0,0)  calc((100% - var(--window))/2 - var(--fade)),
    rgba(0,0,0,1)  calc((100% - var(--window))/2 + .001px),
    rgba(0,0,0,1)  calc((100% + var(--window))/2 - .001px),
    rgba(0,0,0,0)  calc((100% + var(--window))/2 + var(--fade))
  );
          mask-image:linear-gradient(
    to right,
    rgba(0,0,0,0)  calc((100% - var(--window))/2 - var(--fade)),
    rgba(0,0,0,1)  calc((100% - var(--window))/2 + .001px),
    rgba(0,0,0,1)  calc((100% + var(--window))/2 - .001px),
    rgba(0,0,0,0)  calc((100% + var(--window))/2 + var(--fade))
  );
}

.connector-line {
  stroke: rgba(217,70,239,0.9);
  stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round; fill:none;
  filter: drop-shadow(0 0 8px rgba(217,70,239,0.55))
          drop-shadow(0 0 16px rgba(217,70,239,0.35));
  transition: opacity 120ms linear;
  opacity: 0;
}

/* EINFACHE LÖSUNG: Kreis komplett ausblenden */
#lineEndCircle {
  display: none !important;
}

/* Stacking Card Stabilisierung */
[data-stack-card] {
  isolation: isolate;              /* eigener Stacking-Context */
  transform-style: preserve-3d;    /* stabilisiert 3D */
  backface-visibility: hidden;
  will-change: transform, filter, opacity;
}

[data-stack-card] * {
  backface-visibility: hidden;     /* kein Rückseitenflimmern */
}

[data-stack-card] .blur-2xl {
  transform: translateZ(0);        /* eigenes GPU-Layer */
  will-change: filter, opacity;
  contain: paint;                  /* Overlay kapseln */
}

/* Scrollbar auf Mobile verstecken */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Mobile improvements for "Section 3 - Cards Critical Areas" */
@media (max-width: 768px) {
  /* Make individual cards much wider (avoid 23vw on mobile) */
  #hscroll #track .card {
    width: 72vw !important; /* narrower so all 7 cards scroll through */
    max-width: none !important;
    padding: 1.25rem !important; /* a touch more than base */
    border-radius: 1.25rem !important;
  }

  /* Slightly reduce inner typography pressure and improve readability */
  #hscroll #track .card h4 {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
  }
  #hscroll #track .card p {
    line-height: 1.6 !important;
  }
  #hscroll #track .card p.text-4xl {
    font-size: 1.75rem !important; /* make the 01..07 number smaller on mobile */
  }

  /* Tidy up spacing between cards and from edges */
  #hscroll #track {
    gap: 30vw !important; /* 🔻 HIER: Vergrößert von 15vw auf 30vw für mehr Abstand zwischen Critical Cards */
    padding-left: 6vw !important;
    padding-right: 6vw !important;
  }

  /* Keep the connector line visible on mobile */
  #hscroll #connectorSvg {
    display: block !important;
  }
}