/* Der lokale Validator behauptet: CSS: aspect-ratio: Property aspect-ratio doesn't exist. 
 * Deshalb wird das hier gesetzt. */
.aspect-ratio-heinz_metropolis {
  aspect-ratio:	13/10;
  width: 	unset;	/* notwendig fuer Position von class="foto" */
}

/* animierte Bilder */

/* .img_container_ratio_3_2 picture notwendig fuer Animation in 
 * ausstellungen/2020_heinz/touch_v.html usw. */
.img_container_ratio_3_2 picture {
  max-width:	1080px;		/* width von img 7/* im Querformat */
  max-height:	calc(100vh - 75px - 13em); /* header 75px + hamburger + 1em+ Bildbeschriftung */
  aspect-ratio:	3/2;
  min-height:	50px;
  margin-left:	auto;
  margin-right:	auto;
  width:	100%;	/* notwendig fuer Bilder im Hochformat */
  			/* Bei Problemen mit   class=foto: 
			 * Siehe 2020_heinz/heinz_metropolis.html */
}

/* <div> um <img> als Rahmen fuer "position: absolute".               */
/* width muss entsprechend der Image-Breite gesetzt werden, damit das */
/* Bild in .move > img mit "left: 0" zentriert wird.                  */
.move {
  position:	relative;
}

/* Uebereinander liegende Bilder: Letztes Bild liegt oben */
.move picture {
  position:	absolute;
  top: 		0;
  left:		0;
}

/* @media print wird nicht animiert. 
 * Animation bei Bildschirmen nur, wenn der Benutzer sie nicht ablehnt */
@media screen and ( prefers-reduced-motion: no-preference ) {

.move picture {
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

.move img {
  aspect-ratio:	3 / 2; 
}

/* Sequenz aus 3 Bildern: */
/* unterstes (d.h. erstes) Bild */
@keyframes move_3a {
        0% {opacity: 1;}
      100% {opacity: 1;}
}

/* mittleres Bild */
@keyframes move_3b {
        0% {opacity: 1;}
       33% {opacity: 1;}
       48% {opacity: 0;}
       66% {opacity: 0;}
       84% {opacity: 1;}
      100% {opacity: 1;}
}

/* oberes (d.h. letztes) Bild */
@keyframes move_3c {
        0% {opacity: 1;}
       16% {opacity: 1;}
       33% {opacity: 0;}
       84% {opacity: 0;}
      100% {opacity: 1;}
}

/* Sequenz aus 4 Bildern: */
/* unterstes (d.h. erstes) Bild */
@keyframes move_4a {
        0% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_4b {
        0% {opacity: 1;}
       38% {opacity: 1;}
       50% {opacity: 0;}
       62% {opacity: 0;}
       75% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_4c {
        0% {opacity: 1;}
       25% {opacity: 1;}
       37% {opacity: 0;}
       75% {opacity: 0;}
       88% {opacity: 1;}
      100% {opacity: 1;}
}

/* oberes (d.h. letztes) Bild */
@keyframes move_4d {
        0% {opacity: 1;}
       12% {opacity: 1;}
       25% {opacity: 0;}
       88% {opacity: 0;}
      100% {opacity: 1;}
}


/* Sequenz aus 10 Bildern: */
/* unterstes (d.h. erstes) Bild */
@keyframes move_10a {
        0% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_10b {
        0% {opacity: 0;}
        7% {opacity: 0;}
       13% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_10c {
        0% {opacity: 0;}
       17% {opacity: 0;}
       23% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_10d {
        0% {opacity: 0;}
       27% {opacity: 0;}
       33% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_10e {
        0% {opacity: 0;}
       37% {opacity: 0;}
       43% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_10f {
        0% {opacity: 0;}
       47% {opacity: 0;}
       53% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_10g {
        0% {opacity: 0;}
       57% {opacity: 0;}
       63% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_10h {
        0% {opacity: 0;}
       67% {opacity: 0;}
       73% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_10i {
        0% {opacity: 0;}
       77% {opacity: 0;}
       83% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_10j {
        0% {opacity: 0;}
       87% {opacity: 0;}
       93% {opacity: 1;}
      100% {opacity: 1;}
}

/* Sequenz aus 11 Bildern: */
/* unterstes (d.h. erstes) Bild */
@keyframes move_11a {
        0% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_11b {
        0% {opacity: 0;}
        9% {opacity: 0;}
       15% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_11c {
        0% {opacity: 0;}
       18% {opacity: 0;}
       24% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_11d {
        0% {opacity: 0;}
       27% {opacity: 0;}
       33% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_11e {
        0% {opacity: 0;}
       36% {opacity: 0;}
       42% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_11f {
        0% {opacity: 0;}
       45% {opacity: 0;}
       51% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_11g {
        0% {opacity: 0;}
       54% {opacity: 0;}
       60% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_11h {
        0% {opacity: 0;}
       63% {opacity: 0;}
       69% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_11i {
        0% {opacity: 0;}
       72% {opacity: 0;}
       78% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_11j {
        0% {opacity: 0;}
       81% {opacity: 0;}
       87% {opacity: 1;}
      100% {opacity: 1;}
}

@keyframes move_11k {
        0% {opacity: 0;}
       90% {opacity: 0;}
       96% {opacity: 1;}
      100% {opacity: 1;}
}

}	/* @media screen */