/* Startseite #start: drei Screenshot-Kacheln (Installer-DMG → Aktivierung →
   App-Raster) mit gezeichneten Verbindungspfeilen — Variante A aus
   design-lab/homepage-2026-09/protos/steps.html.
   Endzustand ist das Markup; reveal.js setzt .is-pre nur, wenn ein
   IntersectionObserver existiert und Bewegung erlaubt ist. Ohne JS, ohne IO,
   bei prefers-reduced-motion oder Footer-Motion-off bleibt alles sofort
   vollständig sichtbar. Sprachumschaltung der Medien über
   20260912-homepage/media.js (-en-/-de--Infix); das DMG-Bild ist
   sprachneutral und traegt keinen Infix. */

.steps-flow {
  --agap: clamp(48px, 5.5vw, 76px);
  list-style: none;
  margin: 56px 0 42px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--agap);
}
.step-tile {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px 20px 24px;
  background: linear-gradient(160deg, #ffffff09, transparent 46%), var(--panel);
  box-shadow: 0 18px 44px #0003;
  transition: opacity .55s cubic-bezier(.2, .75, .3, 1), transform .55s cubic-bezier(.2, .75, .3, 1);
  transition-delay: calc(var(--i) * .18s);
}
.step-tile.is-pre {
  opacity: 0;
  transform: translateY(24px) scale(.985);
  transition: none;
}
.step-digit {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.7rem, 3.2vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--amber);
  margin: 4px 0 16px;
}
.step-shot {
  margin: 0 0 20px;
  border: 1px solid #ffffff21;
  border-radius: 11px;
  overflow: hidden;
  background: #20211f;
}
/* Volle Bildhoehe: kein aspect-ratio/object-fit-Crop, das DMG-Fenster
   (960×633) bleibt komplett sichtbar. */
.step-shot img { display: block; width: 100%; height: auto; }
/* DMG-Quelle existiert nur in 960 px: max. 480 CSS px halten 2x-Dichte. */
.step-shot-dmg { max-width: 480px; }
.step-tile h3 { font-size: 1.1rem; font-weight: 500; letter-spacing: -.02em; margin: 0 0 10px; }
.step-tile p { color: var(--muted); font-size: .92rem; line-height: 1.6; margin: 0; }

.flow-arrow {
  position: absolute;
  right: calc(100% + 8px);
  top: 30%;
  width: calc(var(--agap) - 14px);
  min-width: 38px;
  color: #b9c6a6;
  overflow: visible;
}
.flow-arrow path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .5s cubic-bezier(.4, 0, .2, 1);
  transition-delay: calc(var(--i) * .18s + .5s);
}
.step-tile.is-pre .flow-arrow path { stroke-dashoffset: 1; transition: none; }

@media (max-width: 760px) {
  .steps-flow { --agap: 56px; grid-template-columns: 1fr; }
  .flow-arrow {
    right: auto;
    left: 50%;
    top: auto;
    bottom: calc(100% + 9px);
    width: 34px;
    transform: translateX(-50%) rotate(90deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .step-tile,
  .flow-arrow path { transition: none; }
}
.motion-off .step-tile,
.motion-off .flow-arrow path { transition: none; }