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%;
	}
}