img.logo {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 6px 0px 10px 0px;
}

/* Hoch- und Querformate gemischt. Spaltenbreiten stehen im Markup (--spalte) und sind zu den
   Seitenverhaeltnissen proportional — so ist eine Reihe gleich hoch.

   Breite feststehend, Hoehe folgt aus width/height im Markup. Nur so reserviert der Browser den
   Platz, bevor das verzoegerte Bild da ist; begrenzte Hoehe bei width: auto tut das nicht. */

DIV.bilder {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  max-width: 760px;
  margin: 0px auto 16px auto;
}

DIV.bilder FIGURE {
  /* 8px = halbe Luecke, die sich die beiden Spalten teilen. */
  flex: 0 0 calc(var(--spalte, 100%) - 8px);
  margin: 0;
  line-height: 0;
}

DIV.bilder FIGURE.breit {
  flex-basis: 100%;
}

DIV.bilder FIGURE A {
  display: block;
}

DIV.bilder FIGURE IMG {
  display: block;
  width: 100%;
  /* Ohne height: auto nimmt der Browser die height aus dem Markup woertlich und streckt. */
  height: auto;
}

DIV.bilder FIGCAPTION {
  margin: 6px 0px 0px 0px;
  font-size: 12px;
  font-style: italic;
  line-height: 16px;
  color: #606060;
}

/* Schmale Fenster: jedes Foto fuer sich. */

@media screen and (max-width: 641px) {
  DIV.bilder FIGURE {
    flex-basis: 100%;
  }
}