/* =========================================================
   Bilder aus dem RTE (EXT:rte_ckeditor_image)
   Ersetzt image-alignment.css der Extension, die jedes nicht
   umflossene Bild mit width: 100% auf Containerbreite zieht und
   damit die im Dialog gesetzte Breite übergeht.
   Eingebunden in page.typoscript, dort wird die Original-Datei entfernt.
   ========================================================= */

/* Standard: eigene Zeile, aber in der eingestellten Breite */
.inhalt .image-block,
.inhalt img.image-block,
.inhalt figure.image-block {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 1rem 0;
}

/* Links, mit Textumfluss */
.inhalt .image-left,
.inhalt img.image-left,
.inhalt figure.image-left {
	float: left;
	max-width: 100%;
	height: auto;
	margin: 0 1rem 1rem 0;
	clear: left;
}

/* Rechts, mit Textumfluss */
.inhalt .image-right,
.inhalt img.image-right,
.inhalt figure.image-right {
	float: right;
	max-width: 100%;
	height: auto;
	margin: 0 0 1rem 1rem;
	clear: right;
}

/* Zentriert */
.inhalt .image-center,
.inhalt img.image-center,
.inhalt figure.image-center {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto 1rem;
}

/* Im Textfluss */
.inhalt .image-inline,
.inhalt img.image-inline,
.inhalt figure.image-inline {
	display: inline-block;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	margin: 0 .25rem;
}

/* Bildunterschrift */
.inhalt figure.image figcaption,
.inhalt figure figcaption {
	display: block;
	margin-top: .5rem;
	color: #777;
	font-size: .875rem;
	line-height: 1.5;
	overflow-wrap: break-word;
}

.inhalt figure.image-center figcaption {
	text-align: center;
}

/* Umflossene Bilder mobil nicht mehr umfließen lassen */
@media (max-width: 767.98px) {

	.inhalt .image-left,
	.inhalt img.image-left,
	.inhalt figure.image-left,
	.inhalt .image-right,
	.inhalt img.image-right,
	.inhalt figure.image-right {
		float: none;
		display: block;
		margin: 1rem 0;
	}
}