.animated-gallery{
    display: flex;
    align-items: center;
    position: relative;
    margin-block:  var(--gallery-margin-top, 30px) var(--gallery-margin-bottom, 30px);
    justify-content: var(--gallery-justify-content, center);
    container: gallery-container / inline-size;
    padding-block: clamp(10px, 5%, 2rem);
    background: var(--gallery-bgcolor, transparent);
	width: 100%;
	max-width: var(--gallery-max-width, 100%);
}

.animated-gallery .gal {
	flex-grow: 1;
}
.animated-gallery .canv {
	width: 100%;
}
.animated-gallery img ,.animated-gallery  video {
	width: var(--gallery-img-width, 100%);
	height: var(--gallery-img-height, 100%);
	object-fit: var(--gallery-img-object-fit, cover);
	border-radius: var(--gallery-img-border-radius, 0.5em);
	    flex-shrink: 0;
}
.animated-gallery .innerdiv {
	x-xxdisplay: none;
}
.animated-gallery .image-title {
    margin-block: 0 4px;
}
.animated-gallery .image-text {
    font-size: 0.9rem;
}
.animated-gallery .outerdiv {
	position: relative;
	border-radius: var(--gallery-img-border-radius, 0.5em);
	cursor: grab;
}
.animated-gallery .outerdiv::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
	width: calc(var(--gallery-img-width, 100%) - 1%);
	height: calc(var(--gallery-img-height, 100%) - 1%);
    border-radius: inherit;
    background-color: var(--bgcolor2);
    z-index: -1;
}
.animated-gallery .imgcollection {
	perspective: 1000px;
	overflow: hidden;
	otouch-action: none;
}
.animated-gallery .pfeil {
	font-size: var(--gallery-pfeil-font-size, 1.25em);
	display: var(--gallery-pfeil-display, flex);
	flex-direction: var(--gallery-pfeil-flex-direction, row);
	background: var(--gallery-pfeil-background, transparent);

	border: var(--gallery-pfeil-border-width, 1px) solid var(--gallery-pfeil-border-color, var(--bgcolor2));
	border-radius: var(--gallery-pfeil-border-radius, 20px);
	z-index: 1;
	position: absolute;
	user-select: none;
	cursor: pointer;
	transition: 0.3s;
	gap: 0.25em;
	transform: translateY(-50%);
}
.animated-gallery .pfeil.rechts{
    padding:var(--gallery-pfeil-r-padding-t, 0.25em) var(--gallery-pfeil-r-padding-r, 0.5em) var(--gallery-pfeil-r-padding-b, 0.25em) var(--gallery-pfeil-r-padding-l, 0.5em);
}
.animated-gallery .pfeil.links{
    padding:var(--gallery-pfeil-l-padding-t, 0.25em) var(--gallery-pfeil-l-padding-r, 0.5em) var(--gallery-pfeil-l-padding-b, 0.25em) var(--gallery-pfeil-l-padding-l, 0.5em);
}
.animated-gallery .pfeil i {
	align-self: center;
}
.animated-gallery .pfeil:hover {
	color: var(--gallery-pfeil-hover-color, var(--hicolor));
	border: var(--gallery-pfeil-hover-border-width, 1px) solid var(--gallery-pfeil-hover-border-color, var(--hicolor));
}
.animated-gallery .pfeil:active {
	box-shadow: 3px 2px 8px 0px color-mix(in lab, var(--hicolor) 20%, transparent);
}

.animated-gallery .pfeil.rechts::before {
	content: var(--gallery-pfeil-rechts-content, "Weiter");
}
.animated-gallery .pfeil.links::after {
	content: var(--gallery-pfeil-links-content, "Zurück");
}
.animated-gallery .ag-hidden {
	display: none !important;
}
.animated-gallery .image-number {
	position: absolute;
	bottom: var(--gallery-image-number-bottom, 8px);
	right: var(--gallery-image-number-right, 8px);
	font-size: 0.7em;
	color: white;
	opacity: 0.6;
	display: none;
}

@container gallery-container (max-width:1024px) {
	{
		justify-content: var(--gallery-justify-content-tablet, center);
	}


	.animated-gallery .pfeil {
    	display: var(--gallery-pfeil-display-tablet);
		font-size: var(--gallery-pfeil-font-size-tablet, 0.75rem);
		padding-inline: var(--gallery-pfeil-padding-inline-tablet, 8px);
	}

}

@container gallery-container (max-width:576px) {

	.animated-gallery .canv {
		max-width: var(--gallery-max-width-phone, 100%);
	}

	.animated-gallery .pfeil {
    	display: var(--gallery-pfeil-display-phone,none);
		font-size: var(--gallery-pfeil-font-size-phone, 0.75rem);
		padding-inline: var(--gallery-pfeil-padding-inline-phone, 8px);
	}

}