.image
{
	display: inline-flex;
	flex-flow: column nowrap;
	align-items: flex-start;
	vertical-align: top;
	max-width: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
.image img, .image picture
{
	display: block;
	height: auto;
	max-width: 100%;
}
.image figcaption
{
	display: block;
	box-sizing: border-box;
	width: 0;
	min-width: 100%;
	margin-top: .5rem;
	margin-bottom: 1rem;
	word-wrap: break-word;
	text-align: left;
	font-size: 1rem;
}


/*  align  */
.image-align-left { float: left; width: auto; margin-right: 1rem; align-items: flex-start; }
.image-align-center { text-align: center; margin-left: auto; margin-right: auto; align-items: center; }
.image-align-center a, .image-align-center img, .image-align-center picture { text-align: center; margin-left: auto; margin-right: auto; }
.image-align-center figcaption { text-align: center; }
.image-align-right { float: right; width: auto; margin-left: 1rem; align-items: flex-end; }
.image-align-full, .image-align-full :is(a, picture, img) { width: 100%; }
.image-align-full img { object-fit: cover; }
.image-align-left:not(:last-child), .image-align-left:not(:last-child) { margin-bottom: .5rem; }
.image-align-center:not(:last-child) { margin-bottom: 1rem; }

@media (max-width: 1000px) {
	:not(.render-container) > .image-align-left:not(:first-child:last-child),
	:not(.render-container) > .image-align-right:not(:first-child:last-child) {
		max-width: 30%;
	}
}

.pageroot .render-container:has(> .image-align-left) { float: left; }
.pageroot .render-container:has(> .image-align-right) { float: right; }


/*  valign  */
.image-valign-top:first-child:last-child { height: 100%; justify-content: flex-start; }
.image-valign-center:first-child:last-child { height: 100%; justify-content: center; }
.image-valign-bottom:first-child:last-child { height: 100%; justify-content: flex-end; }
.image-valign-full, .image-valign-full picture, .image-valign-full img { height: 100%; justify-content: center; }
.image-valign-full img { object-fit: cover; }
/* repeat for cms backend with separate selector due to incompatibility with older browsers */
.pageroot .render-container:has(> .image-valign-top):first-child:last-child { height: 100%; justify-content: flex-start; }
.pageroot .render-container:has(> .image-valign-center):first-child:last-child { height: 100%; justify-content: center; }
.pageroot .render-container:has(> .image-valign-bottom):first-child:last-child { height: 100%; justify-content: flex-end; }
.pageroot .render-container:has(> .image-valign-full):first-child:last-child { height: 100%; justify-content: center; }


/*  device  */
figure { --image-device-hide: none; --image-device-show: inline-flex; }
.pageroot figure { --image-device-hide: inline-flex; }
@media (max-width: 30rem) {
	.image-device-mobile, .image-device-mobile-tablet { display: var(--image-device-show); }
	figure[class*="image-device-"]:not(.image-device-mobile, .image-device-mobile-tablet) { display: var(--image-device-hide); }
}
@media (min-width: 30.0001rem) and (max-width: 60rem) {
	.image-device-mobile-tablet, .image-device-tablet, .image-device-tablet-desktop { display: var(--image-device-show); }
	figure[class*="image-device-"]:not(.image-device-mobile-tablet, .image-device-tablet, .image-device-tablet-desktop) { display: var(--image-device-hide);  }
}
@media (min-width: 60.0001rem) {
	.image-device-tablet-desktop, .image-device-desktop { display: var(--image-device-show); }
	figure[class*="image-device-"]:not(.image-device-tablet-desktop, .image-device-desktop) { display: var(--image-device-hide); }
}
/*  hint in cms  */
.pageroot figure[class*="image-device-"]:before { position: absolute; display: block; left: .5rem; top: .5rem; padding: .25rem; border-radius: .125rem; z-index: 1; font-size: .75rem; color: #000; background: rgba(255, 255, 255, .75); opacity: 1; }
.pageroot .image-device-mobile:before { content: 'nur Mobil'; }
.pageroot .image-device-mobile-tablet:before { content: 'nur Mobil + Tablet'; }
.pageroot .image-device-tablet:before { content: 'nur Tablet'; }
.pageroot .image-device-tablet-desktop:before { content: 'nur Tablet + Desktop'; }
.pageroot .image-device-desktop:before { content: 'nur Desktop'; }


/*  shape  */
/*.image-shape-round img { border-radius: 50%; }*/
.image-shape-round a { display: block; width: 100%; border-radius: 50% !important; }
.image-shape-round .shape { position: relative; overflow: hidden; width: 100%; border-radius: 50%; aspect-ratio: 1; }
.image-shape-round .shape img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }