/* Zwei Fotostapel im Einstieg, je drei Bilder, 11.09.2026.
   Die Idee stammt von Boksi: Bilder liegen übereinander, sind leicht gedreht
   und laufen an den Rändern aus dem Bild. Maße, Drehung, Ecken und Farben sind
   unsere eigenen. Die Bilder treten einmal ein und stehen danach still.

   Jeder Stapel ist ein eigener Kasten. Die Bilder darin stehen in Prozent,
   deshalb lässt sich ein ganzer Stapel an einem Wert verschieben, ohne dass
   die Bilder ihre Lage zueinander verlieren. */
.automation-home .hero-stack {
  position:absolute;
  z-index:1;
  top:50%;
  translate:0 -50%;
  width:clamp(236px, 21.5vw, 344px);
  height:clamp(400px, 58vh, 640px);
  pointer-events:none;
}
.automation-home .hero-stack-left { left:clamp(-30px, 0.4vw, 22px); }
.automation-home .hero-stack-right { right:clamp(-30px, 0.4vw, 22px); }

/* Die Bilder sitzen im Stapel, nicht im Einstieg. */
.automation-home .hero-stack .hero-photo {
  position:absolute;
  border-radius:0;
  background:#efece9;
  transform:rotate(var(--rotation, 0deg));
  will-change:auto;
  /* Ein weißer Rand trennt die Bilder dort, wo sie sich überdecken, und lässt
     den Stapel wie abgelegte Abzüge wirken. Der Schatten ist flach, er hebt
     nur die Reihenfolge hervor. */
  box-shadow:0 0 0 5px #fff, 0 18px 44px rgba(20,20,19,.12);
}

/* Ein Stapel liegt wie abgelegte Abzüge: jedes Bild ein Stück tiefer und
   versetzt, das nächste liegt obenauf. Die Drehung wechselt die Richtung,
   damit keine Reihe entsteht. */
.automation-home .hero-stack-left .stack-a { left:0;    top:0;   width:68%; height:40%; --rotation:-7deg; z-index:1; }
.automation-home .hero-stack-left .stack-b { left:26%;  top:26%; width:62%; height:37%; --rotation:5deg;  z-index:2; }
.automation-home .hero-stack-left .stack-c { left:3%;   top:52%; width:66%; height:40%; --rotation:-3deg; z-index:3; }

/* Rechts spiegelbildlich, damit die Mitte frei bleibt. */
.automation-home .hero-stack-right .stack-a { right:0;   top:0;   width:68%; height:40%; --rotation:7deg;  z-index:1; }
.automation-home .hero-stack-right .stack-b { right:26%; top:26%; width:62%; height:37%; --rotation:-5deg; z-index:2; }
.automation-home .hero-stack-right .stack-c { right:3%;  top:52%; width:66%; height:40%; --rotation:3deg;  z-index:3; }

/* Ausschnitte, damit Gesichter und Hände im Bild bleiben. */
.automation-home .hero-stack .stack-a img { object-position:50% 42%; }
.automation-home .hero-stack .stack-b img { object-position:50% 50%; }
.automation-home .hero-stack .stack-c img { object-position:52% 45%; }

/* Der Einstieg legt die Stapel unter den Text, sobald die Spalte zu eng wird. */
@media (max-width:1100px) {
  .automation-home .hero-stack { width:clamp(196px, 19vw, 250px); height:clamp(330px, 46vh, 470px); }
}
@media (max-width:900px) {
  /* Der Einstieg braucht unten nur noch Platz für zwei flache Stapel. */
  .automation-home .hero { min-height:0; padding-bottom:286px; }
  .automation-home .hero-stack {
    top:auto; bottom:56px; translate:none;
    width:45%; height:210px;
  }
  .automation-home .hero-stack-left { left:14px; }
  .automation-home .hero-stack-right { right:14px; }
  .automation-home .hero-stack .stack-a { top:0;   width:58%; height:82%; }
  .automation-home .hero-stack-left .stack-b  { left:46%;  top:16%; width:52%; height:60%; }
  .automation-home .hero-stack-right .stack-b { right:46%; top:16%; width:52%; height:60%; }
  .automation-home .hero-stack .stack-c { display:none; }
}
@media (max-width:560px) {
  .automation-home .hero { min-height:0; padding-bottom:252px; }
  .automation-home .hero-stack { width:44%; height:158px; bottom:58px; }
  .automation-home .hero-stack .stack-a { top:0; width:100%; height:100%; }
  .automation-home .hero-stack .stack-b { display:none; }
}

/* Wer weniger Bewegung eingestellt hat, sieht die Stapel sofort im Ruhezustand. */
@media (prefers-reduced-motion:reduce) {
  .automation-home .hero-stack .hero-photo { transform:rotate(var(--rotation, 0deg)); }
}