.image-text {
  --image-stacked-above:      "image"
                        "text";
  --image-stacked-below:      "text"
                        "image";
  --image-left:   "image text"
                  "....  text";
  --image-right:  "text image"
                  "text  ....";
  --headline-stacked-above:  "headline"
                             "text";
  --headline-stacked-below:  "text"
                           "headline";
  --headline-left:  "headline text"
                    "....  text";
  --headline-right: "text headline"
                    "text  ....";
  --text-only:         "text";
}

.image-text div[id='motif-carousel']{
  grid-area: image;
}
.image-text ul.motif-files{
  grid-area: image;
}

.image-text  div[id*='body']{
  grid-area: text;
}
.image-text .grid-headline{
  grid-area: headline;
}

.image-text .floated-left img,
.image-text .floated-left .motif-carousel,
.image-text .floated-left .grid-headline {
  float: left;
  margin-right: 1rem; /* Optional: Add some space between the image and the text */
}

.image-text .floated-right img,
.image-text .floated-right .motif-carousel,
.image-text .floated-right .grid-headline {
  float: right;
  margin-left: 1rem; /* Optional: Add some space between the image and the text */
}

.image-text .floated-left div[id*='body']::after,
.image-text .floated-right div[id*='body']::after {
  clear: both;
}