/*
	Animationen
*/

@keyframes pulseScrolldownBtn {
	0% { bottom: .5em; }
	70% { bottom: .5em; }
	85% { bottom: .25em; }
	100% { bottom: .5em; }
}
@keyframes slideInFromLeft {
	0% {
		transform: translateX(-10rem);
		opacity: 0;
	}
	50% {
		transform: translateX(-10rem);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes slideInFromBottom {
	0% {
		transform: translateY(3rem);
		opacity: 0;
	}
}

:root {
	--line-height: 1.5;
	--spaltenbreite: 6rem;
	--max-content-width: 77.811rem;
	--narrow-content-width: 64.484rem;
	--wide-content-width: 90.7795rem;
	--content-width: var(--max-content-width);
	--grid-gap: 14px;
	--page-margin-left: 5.55vw;
	--page-margin-right: 5.55vw;
	--rand-links: max(var(--page-margin-left), 50vw - var(--content-width) / 2);
	--rand-rechts: max(var(--page-margin-right), 50vw - var(--content-width) / 2);
	--inhaltsbereich: min(var(--content-width), 100vw - var(--page-margin-left) - var(--page-margin-right));

	--bg-color: #fff;
	/*--textcolor: #000;
	--highlight-color: blue;
	--linkcolor: green;*/
	--font-family-text: "Open Sans", Arial, icomoon, sans-serif;
	--font-family-title: Montserrat, Arial, icomoon, sans-serif;
	
	--timing-fn: cubic-bezier(.22,.61,.36,1);
	
	font-size: var(--font-size);
}

/*
	Allgemeine Einstellungen
*/

body.loading, body.loading a {
	cursor: progress;
}

/*.banner a.scrolldown {
	animation: 6s ease-in-out 0s infinite pulseScrolldownBtn;
	color: #fff;
	cursor: pointer;
	font-size: 100px;
	line-height: 0;
	text-decoration: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.5em;
	width: 100%;
	text-align: center;
}*/

@layer base-theme {
	:root {
		--font-size: 16px;
	}
	*, *::before, *::after {
		box-sizing: border-box;
		scrollbar-width: thin;
		scrollbar-color: var(--linkcolor) var(--textcolor);
	}
	::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}
	::-webkit-scrollbar-track-piece {
		background: var(--textcolor);
	}
	::-webkit-scrollbar-thumb {
		background: var(--linkcolor);
	}
	body {
		background: none #fff;
		color: var(--textcolor);
		font-family: var(--font-family-text);
		line-height: var(--line-height);
		overflow-x: hidden;
	}
	body.no-js .js,
	body.js .no-js {
		display: none;
	}
	:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	p {
		margin: calc(1em * var(--line-height)) 0;
	}
	a {
		color: var(--linkcolor);
		text-decoration: none;
		transition: color .3s var(--timing-fn);
	}
	a:hover,
	a:focus {
		text-decoration: underline;
	}
	a.mailto[data-server]::after {
		content: '@'attr(data-server);
	}
	.clear{ clear: both; }
	img, svg, video {
		height: auto;
		max-width: 100%;
		object-fit: cover;
		vertical-align: middle;
	}
	ul.nav li {
		display: inline-block;
	}
	ul.nav a {
		color: currentColor;
	}
	small {
		font-size: .889em;
	}

	body > header > *,
	body > .breadcrumb,
	body > nav,
	.banner .inner,
	main > *,
	footer > *,
	.cookie-hinweis {
		/* Fallback für ganz alte Browser */
		padding: 1rem;

		/* Fallback für Browser, die mit 'var()' in 'calc()' noch nicht klarkommen */
		padding: 0 max(1rem, 50% - 41rem);

		/* Moderne Browser */
		padding: 0 var(--rand-rechts) 0 var(--rand-links);
	}
	.textblock.schmal {
		--content-width: var(--narrow-content-width);
	}
	.textblock.breit {
		--content-width: var(--wide-content-width);
	}
	.textblock.randlos {
		/* Fallback für Browser, die mit 'var()' in 'calc()' noch nicht klarkommen */
		padding-left: 0;
		padding-right: 0;
	}
	nav.sidebar {
		display: flex;
			flex-wrap:wrap;
			justify-content: center;
	}
	body.modal-open .sidebar {
		display: none;
	}
	body main > * {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	main > h1,
	main > h2,
	main > h3 {
		margin: 0 15px;
		padding: 0;
	}

	/* BUTTONS */
	button, .button {
		background-clip: padding-box;
		background-color: var(--highlight-color);
		border: 2px solid var(--highlight-color);
		border-radius: .5em;
		box-shadow: 1px 2px 4px #0004;
		color: var(--bg-color);
		cursor: pointer;
		display: inline-block;
		font-family: var(--font-family-title);
		line-height: 1.2;
		padding: .5em 1em;
		position: relative;
		text-decoration: none;
		transition: .3s var(--timing-fn);
	}
	.button.blau {
		--bg-color: #fff;
		--highlight-color: var(--blau);
		border-color: #fff;
	}
	.hg-blau .button.weiss:hover {
		--bg-color: var(--rot);
		--highlight-color: #fff;
	}
	.button.rot {
		--bg-color: #fff;
		--highlight-color: var(--rot);
	}
	.button.weiss {
		--bg-color: var(--blau);
		--highlight-color: #fff;
		border-color: var(--blau);
	}
	a:hover button, a:hover .button,
	button:hover, .button:hover,
	a:focus button, a:focus .button,
	button:focus, .button:focus,
	a:active button, a:active .button,
	button:active, .button:active {
		background-color: var(--bg-color);
		color: var(--highlight-color);
		text-decoration: none;
	}
	button:focus, .button:focus {
		filter: brightness(0.8) contrast(1.5);
	}
	button.ghost, .button.ghost {
		background-color: transparent;
		border: 2px solid currentColor;
		color: var(--textcolor);
	}
	button.fw::after, .button.fw::after {
		content: '\232a';
		font-size: 1.5em;
		font-weight: bold;
		line-height: 1;
		vertical-align: middle;
	}
	button.bw::before, .button.bw::before {
		content: '\2329';
		font-size: 1.5em;
		font-weight: bold;
		line-height: 1;
		vertical-align: middle;
	}
	
	button + button, button + .button,
	.button + button, .button + .button {
		margin-left: .5em;
	}


	/* 12 GRID LAYOUT */
	.row {
		clear: both;
		display: flex;
			flex-wrap: wrap;
			gap: calc(2 * var(--grid-gap));
			justify-content: space-between;
		margin-bottom: calc(var(--grid-gap) * 2);
	}
	.row.boxed > *[class^="col-"] {
		border: 0 none;
		margin: 0;
		padding: 20px 30px;
		position: relative;
	}
	.row.boxed > *[class^="col-"]::before {
		border: 2px solid #e6e6e6;
		content: '';
		position: absolute;
		top: 5px;
		right: var(--grid-gap);
		bottom: .33rem;
		left: var(--grid-gap);
		pointer-events: none;
	}
	*[class^="col-"] {
		--colspan: 12;
		--factor: var(--colspan) / 12;
		flex: 0 0 auto;
		width: calc(100% * var(--factor) - 2 * var(--grid-gap) * (1 - var(--colspan) / 12));
		max-width: 100%;
	}
	.col-1, .sm2, .col-1-5 {
		--colspan: 6;
	}
	.sm1 { --colspan: 3; }
	.sm3 { --colspan: 9; }

	*[class^="col-grow"] {
		flex-grow: 1;
		width: 8%;
	}
	*[class^="col-auto"] {
		width: auto;
	}
	
	/* Bei Spalten mit Buttons am Ende dafür sorgen, dass die Buttons auf der gleichen Höhe sind: */
	/*.row:has(> * > p + p:last-child > .button:only-child) {
		align-items: stretch;
		& > *:has(p + p:last-child > .button:only-child) {
			display: flex;
			flex-direction: column;
			> p {
				margin-top: 0;
				&:nth-last-child(2) {
					flex-grow: 1;
				}
			}
		}
	}*/

	/* DYNAMIC GALLERY GRID */
	.grid {
		--items-per-row: 4;
		--max-grid-width: var(--max-content-width);
	}
	.schmal .grid { --max-grid-width: var(--narrow-content-width); }
	.wide .grid { --max-grid-width: var(--wide-content-width); }
	.grid.w1 { --items-per-row: 1; }
	.grid.w2 { --items-per-row: 2; }
	.grid.w3 { --items-per-row: 3; }
	.grid.w4 { --items-per-row: 4; }
	.grid.w5 { --items-per-row: 5; }
	.grid.w6 { --items-per-row: 6; }
	.grid {
		display: grid;
		grid-gap: calc(var(--grid-gap) * 2);
		grid-template-columns: repeat(auto-fit, minmax(calc((var(--max-grid-width) / var(--items-per-row)) - var(--grid-gap) * (8 - var(--items-per-row))), 1fr));
	}
	.grid > * {
		max-width: calc(100vw - 2 * var(--grid-gap));
	}
	div.grid-2 {
		grid-template-columns: repeat(auto-fit, minmax(385px, 1fr));
	}
	div.grid-3 {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}
	div.grid-4 {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
	.grid img {
		height: 100%;
		object-fit: cover;
	}


	/*
		--------------------------------------
		 Einstellungen für alle Displaygrößen
		--------------------------------------
	*/

	h1, h2, h3, h4, .title {
		color: var(--blau);
		font-family: var(--font-family-title);

		/*Schrift zwischen 450 px und 1000 px langsam von min auf max vergrößern*/
		/* Berechnung: Min-Größe + {Prozentwert} * (Max-Größe - Min-Größe) * 1rem */
		/* Prozentwert = (100vw - Beginn_der_Hochskalierung) / (Ende_Skalierung - Beginn_Skalierung) */
		--scale-start: 450;
		--scale-end: 1000;
		/*--percent: calc((100vw - 1px * var(--scale-start)) / (var(--scale-end) - var(--scale-start)));*/
		/*--dynsize: calc(1em * var(--factor-min) + var(--percent) * (var(--factor-max) - var(--factor-min)) * var(--font-size));*/
		--dynsize: calc(1.5vw * var(--factor-max));
		font-size: clamp(1rem * var(--factor-min), var(--dynsize), 1rem * var(--factor-max));

		font-weight: 700;
		line-height: 1.2;
		margin: .6em 0 0;
	}
	:is(h1, h2, h3, h4, .title) + * {
		margin-top: .6em;
	}
	h1, .h1, main :not(.text) > h2:first-child {
		margin-top: 0;
	}
	h1, .h1, .textblock > h2:not([class^="h"]), .title {
		--factor-min: 2.35;
		--factor-max: 3.33;
	}
	h2, .h2 {
		--factor-min: 1.88;
		--factor-max: 2.44;
	}
	.karte h2, h3, .h3 {
		--factor-min: 1.4;
		--factor-max: 1.56;
	}
	h4, .h4 {
		--factor-min: 1.111;
		--factor-max: 1.111;
		font-weight: 600;
	}
	h1 small,
	h2 small,
	h3 small {
		color: var(--highlight-color);
		display: block;
		font-size: .76rem;
		font-weight: 400;
		margin-bottom: .6em;
		text-transform: uppercase;
	}
	body > header {
		background: #fffd;
		box-shadow: 0 0 4px #0003;
		backdrop-filter: blur(12px);
		position: sticky;
			top: 0;
		z-index: 19;
	}
	body > header > .textblock > .row {
		margin: 0;
	}
	body > header .tel {
		display: none;
		width: auto;
	}
	body > header .tel .button {
		border: none;
		box-shadow: 0px 3px 6px #00000029;
		font-weight: 400;
		padding-left: .4em;
	}
	body > header .tel .button i {
		font-size: 1.4em;
		line-height: 0;
		margin-right: .3em;
		vertical-align: middle;
	}
	
	.lang-nav a {
		opacity: .3;
		transition: .3s var(--timing-fn);
	}
	.lang-nav a:hover {
		opacity: 1;
	}
	.lang-nav img {
		width: 2.15em;
		height: 2.15em;
	}

	/* Social Media Icons */
	.social > a {
		color: transparent;
		font-size: 0;
		line-height: 1;
	}
	.social a::before {
		color: var(--linkcolor);
		display: inline-block;
		font-size: 1.5rem;
		padding: 0 .15em;
	}

	/* BREADCRUMB */
	body div.breadcrumb {
		font-size: 0.93em;
		font-weight: 500;
		padding-top: 1rem;
		padding-bottom: 1rem;
		text-align: left;
	}
	.breadcrumb a {
		color: currentColor;
		margin-right: 10px;
		text-decoration: none;
	}
	.breadcrumb a:not(:first-child)::before {
		content: '»  ';
	}
	.breadcrumb a:last-child {
		font-weight: 500;
	}

	/* SLIDER */
/*	.banner {
		overflow: hidden;
		position: relative;
	}
	.banner .slick-track {
		display: flex;
	}
	.banner .slide {
		float: none;
		height: auto;
		position: relative;
		text-decoration: none;
		width: 100vw;
	}
	.banner .slider > .slide:not(:first-child) {
		display: none;
	}
	.banner .image {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.banner .image > * {
		height: 100%;
		width: 100vw;
		object-fit: cover;
	}
	.banner .inner {
		min-height: 80vh;
		padding-top: 4.5em;
		position: relative;
		z-index: 2;
	}
	.banner .text {
		color: #fff;
		position: relative;
		text-align: center;
		z-index: 5;
	}
	.js .banner .text {
		opacity: 0;
	}
	.js .banner .slick-slide .text {
	}
	.js .banner .slick-current .text {
		opacity: 1;
		animation: 2s ease-out 0s 1 slideInFromLeft;
	}
	.banner .title {
		color: #fff;
		font-size: clamp(1.5em, 4vw, 2.5em);
		text-shadow: 0 0 .17em #000c;
	}
	.banner .desc {
		line-height: 1.2;
		transition: .2s;
	}
	.banner .desc strong {
		font-size: 1.2em;
		font-weight: 500;
	}
	.banner .button small {
		font-size: 1rem;
	}
	.banner .slick-dots {
		line-height: 1.3;
		position: absolute;
		bottom: 10%;
		right: 5%;
	}
	.banner .slick-dots button {
		background: #00356b;
		border-radius: 50%;
		box-shadow: 0 0 5px rgba(255,255,255,0.5);
		font-size: 0;
		height: 20px;
		padding: 0;
		width: 20px;
	}
	.banner .slick-dots .slick-active button {
		background: #34ccff;
	}
*/
	/* Scroll To Top */
	body > button.scrollup {
		background: var(--highlight-color);
		border: 0;
		border-radius: 50%;
		box-shadow: 0 0 0 1px #fff;
		font-size: 1.5em;
		line-height: 2;
		opacity: 0;
		padding: 0;
		pointer-events: none;
		position: fixed;
			bottom: .5rem;
			right: .5rem;
		text-align: center;
		transition: .3s var(--timing-fn);
		width: 2em;
		z-index: 15;
	}
	.scrollup.visible {
		opacity: 1;
		pointer-events: all;
	}

	/* CONTENT */
	body > main {
		box-shadow: 0 0 10px #0003;
		position: relative;
		z-index: 4;
	}
	body > main .textblock {
		--rand-links: max(var(--page-margin-left), 50vw - var(--content-width) / 2);
		--rand-rechts: max(var(--page-margin-right), 50vw - var(--content-width) / 2);
		--inhaltsbereich: min(var(--content-width), 100vw - var(--page-margin-left) - var(--page-margin-right));
		--spaltenbreite: calc(var(--inhaltsbereich) / 12);
	}
	main a[name] {
		padding: 0;
		position: relative;
		top: -80px;
	}
	.textblock.hg-bild {
		background: var(--hgbild) no-repeat top / cover;
	}
	.textblock[class*="hg-"] [class*="hg-"] {
		border-radius: 1em;
		padding: calc(2 * var(--grid-gap));
	}
	/*.textblock ul {
		margin: auto;
		text-align: left;
		width: -moz-fit-content;
		width: fit-content;
	}
	.textblock ul li {
		display: block;
		line-height: 1.2;
		padding: .55em 0 .55em 2em;
		position: relative;
		width: 100%;
	}
	.textblock ul li::before {
		content: '\2714';
		color: var(--linkcolor);
		font-size: 1.7em;
		line-height: 1.1;
		padding-right: .5em;
		position: absolute;
		top: 0;
		left: 0;
	}*/
	.textblock .txt-img-wrap > * {
		position: relative;
	}
	.textblock .txt-img-wrap a {
		color: currentColor;
		display: block;
		text-decoration: none;
	}
	.textblock .txt-img-wrap .caption {
		font-size: 1.5em;
		font-weight: 400;
	}
	.oeffnungszeiten span:first-child {
		display: inline-block;
		width: 8em;
		max-width: 50%;
	}
	.textblock.bild_text .titel > div > :first-child,
	.textblock.text_bild .txt > :first-child {
		margin-top: 0;
	}
	.textblock.text_bild .txt > :last-child {
		margin-bottom: 0;
	}
	
	.js main > * > * {
		opacity: 0;
	}
	.js main > * > *.in-view {
		animation: .8s ease-in-out 0s 1 slideInFromBottom;
		opacity: 1;
	}
	
	.karten .karte {
		border-radius: .75em;
		box-shadow: 0 0 .4em #0003;
		display: flex;
			flex-direction: column;
		overflow: hidden;
		> .img {
			position: relative;
			background: repeating-conic-gradient(#fff 0 25%, #f1f1f1 0 50%) 50% / 39px 39px;
			&::before {
				content: '';
				display: block;
				padding-top: 61.86%;
			}
			img {
				position: absolute;
					top: 0;
					left: 0;
				width: 100%;
				height: 100%;
			}
		}
		> .text {
			display: flex;
				flex-direction: column;
			flex-grow: 1;
			padding: 0 1em;
			& > :not(h2, h3) {
				margin-top: 0;
				&:has(+ p > .button) {
					flex-grow: 1;
				}
			}
			ul {
				margin-bottom: 1em;
			}
			.button {
				display: block;
				text-align: center;
			}
		}
	}
	
	.trust-bar > .row {
		--grid-gap: .5em;
	}
	.iconbox {
		display: flex;
		gap: .7em;
		.icon {
			font-size: 2.5em;
			height: 1em;
			img {
				height: 1em;
				width: 1em;
				vertical-align: top;
			}
		}
		.text {
			font-size: .778em;
			> * {
				margin: 0;
			}
		}
	}
	
	.reviews .review {
		background: #fff;
		border-radius: 1em;
		padding: 1em;
	}
	.reviews .stars {
		color: #f9b805;
		font-size: 2em;
		overflow: hidden;
		white-space: nowrap;
	}
	.reviews .stars::before {
		content: "\2605\2605\2605\2605\2605";
	}
	.reviews .stars.r-1 { width: .85em; }
	.reviews .stars.r-2 { width: 1.7em; }
	.reviews .stars.r-3 { width: 2.55em; }
	.reviews .stars.r-4 { width: 3.3em; }
	.reviews .stars.r-5 { width: 4.15em; }
	.reviews .user {
		display: flex;
		gap: 1em;
	}
	.reviews .user .img {
		width: 20%;
	}
	.reviews .user .img img {
		border-radius: 50%;
	}
	.reviews .user .name {
		width: 80%;
	}
	.reviews .user .name b {
		font-size: 1.111rem;
		color: var(--blau);
	}
	.reviews .user .name small {
		color: #888;
	}
	.reviews .text {
		font-size: .889em;
	}


	/* FOOTER */
	body > footer .row {
		gap: 0 calc(2 * var(--grid-gap));
	}
	footer .hg-blau {
		overflow: hidden;
	}
	footer .hg-blau .row {
		align-items: center;
	}
	footer .hg-blau h2 {
		margin: 0;
	}
	footer .hg-blau li::before {
		content: '\1f5f9';
		color: var(--rot);
		display: inline-block;
		font-size: 1.1em;
		margin-right: .75em;
		vertical-align: middle;
	}
	body > footer .logo-subline {
		container-type: inline-size;
	}
	body > footer .logo-subline big {
		color: var(--rot);
		font-family: var(--font-family-title);
		font-size: 8.2cqw;
		line-height: 1.3;
	}
	body > footer p {
		margin: 1em 0;
	}
	body > footer .nav.main li {
		display: block;
		margin-bottom: .5em;
	}
	body > footer .kontakt [class^="icon-"] {
		color: currentColor;
		display: inline-block;
		margin-bottom: .3em;
		padding-left: 1.75em;
		position: relative;
	}
	body > footer .kontakt [class^="icon-"]::before {
		color: var(--rot);
		font-size: 1.2em;
		position: absolute;
			top: .15em;
			left: 0;
	}
	body > footer .meta .row > .nav {
		align-self: center;
	}
	body > footer .meta li > * {
		display: inline-block;
		line-height: 1.3;
		padding: 0 .2em;
	}
	body > footer .meta label {
		cursor: pointer;
	}


	/* Info "Formular wird gesendet" */
	@keyframes loading {
		0% { font-size: 1em; }
		40% { font-size: 1.5em; }
		80% { font-size: 1em; }
		100% { font-size: 1em; }
	}
	.sending-form main {
		position: static;
	}
	.sending-msg {
		background: #000d;
		color: #fff;
		display: none;
		font-size: clamp(1em, 3vw, 2.5em);
		opacity: 0;
		position: fixed;
			top: 0;
			left: 0;
		width: 100%;
		height: 100%;
		z-index: 20;
	}
	.sending-form .sending-msg {
		display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
		opacity: 1;
	}
	.loading-animation {
		font-size: .5em;
		height: 2em;
	}
	.loading-animation i, .loading-animation::before, .loading-animation::after {
		animation: 2s infinite loading;
		background: currentColor;
		border-radius: 50%;
		display: inline-block;
		margin: 0 .2em;
		vertical-align: middle;
		width: 1em;
		height: 1em;
	}
	.loading-animation::before, .loading-animation::after {
		content: '';
	}
	.loading-animation::before {
		animation-delay: -.2s;
	}
	.loading-animation::after {
		animation-delay: .2s;
	}


	/* Formular */
	.formular form h4 {
		flex-basis: 100%;
		margin-bottom: .5em;
	}
	form > :not(:first-child) h4 {
		border-top: 1px solid var(--hellblau);
		margin-top: .75em;
		padding-top: .75em;
	}
	.formular form .columns-2,
	.formular form .columns-3 {
		display: flex;
		flex-wrap: wrap;
		gap: 0 .8em;
	}
	.formular form [class^="columns-"] > label,
	.formular form [class^="columns-"] > .uploader {
		flex: 1 0 auto;
	}
	@media screen and (min-width: 500px) {
		.formular form .columns-2 > label,
		.formular form .columns-3 > label,
		.formular form .columns-2 > .uploader,
		.formular form .columns-3 > .uploader {
			flex-basis: calc(50% - var(--grid-gap));
		}
	}
	@media screen and (min-width: 650px) {
		.formular form .columns-3 > label,
		.formular form .columns-3 > .uploader {
			flex-basis: calc(33% - var(--grid-gap));
		}
	}
	
	
	/* Youtube */
	.embed-yt {
		color: #333;
		font-size: .93em;
		text-align: center;
		position: relative;
	}
	.embed-yt > img {
		margin: auto;
		width: 560px;
	}
	.embed-yt .overlay {
		background: #fffa;
		margin: 0 auto;
		max-width: 850px;
		padding: 1em 2em 2em;
		position: absolute;
			left: 0;
			right: 0;
			top: 50%;
		transform: translateY(-50%);
	}
	.embed-yt > img,
	.embed-yt > .overlay {
		display: none;
	}
	.embed-yt > iframe {
		display: inline;
	}
	.embed-yt > .yt-decline {
		cursor: pointer;
		display: inline-block;
		margin-left: -12.9em;
		transform: translateY(1em);
	}
	.embed-yt.yt-cookie-not-set > img,
	.embed-yt.yt-cookie-not-set > .overlay {
		display: block;
	}
	.embed-yt.yt-cookie-not-set > iframe,
	.embed-yt.yt-cookie-not-set > .yt-decline {
		display: none;
	}

	/* Map */
	.google_map {
		position: relative;
	}
	.gmap_canvas {
		height: 400px;
		margin-top: 0;
		max-height: 90vh;
	}
	.gmap_canvas.gm-cookie-not-set {
		border: 1px solid #999;
		color: #666;
		display: flex;
			align-items: center;
		font-size: .93em;
		padding: 3em 1em 1em;
		text-align: center;
		height: auto;
		min-height: 17em;
		max-height: none;
	}
	.gmap_canvas.gm-cookie-not-set > * {
		max-width: 850px;
		margin: 0 auto;
	}
	.gmap_canvas .gm-style {
		color: #000;
	}
	.gmap_canvas + .gm-hide-map {
		cursor: pointer;
		display: block;
		font-size: .7em;
		position: absolute;
			top: -1.5em;
			right: .3em;
	}
	.gmap_canvas.gm-cookie-not-set + .gm-hide-map {
		display: none;
	}
	.osm {
		display: inline-block;
		position: relative;
	}
	.osm .copyright {
		background: #fff;
		background: #fffd;
		position: absolute;
		bottom: 0;
		right: 0;
		max-width: 100%;
	}


	/* Impressum */
	.impressum .copyright li {
		display: flex;
		text-align: left;
		margin-bottom: 20px;
	}
	.impressum .copyright li > img {
		align-self: flex-start;
		margin-right: 10px;
	}
	.impressum .copyright li > span {
		align-self: center;
		line-height: 1.3;
	}
	.impressum .os {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.impressum .os > * {
		flex: 1 1 auto;
	}
	.impressum .os .anschrift {
		margin: 2em 2em 2em 0;
	}


	/* Sitemap */
	.sitemap main ul ul {
		margin-left: .75em;
	}


	/* Scrollbox */
		
	.scrollbox {
		display: flex;
			flex-wrap: nowrap;
			justify-content: start;
		overflow: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.scrollbox > * {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
	.immer_scrollbar .dots,
	.mobil_scrollbar .dots {
		display: none;
		text-align: center;
	}
	.scrollbox + .dots {
		display: block;
	}
	.scrollbox + .dots span {
		background: transparent;
		border: 2px solid var(--highlight-color);
		cursor: pointer;
		display: inline-block;
		font-size: 0;
		margin: .25rem;
		width: 1.2rem;
		height: 1.2rem;
	}
	.scrollbox + .dots span.active {
		background: var(--linkcolor);
	}
	
	
	/*
		-----------------------------------------
		 Responsive Einstellungen
		-----------------------------------------
	*/

	a.logo {
		display: inline-block;
	}
	header .logo img {
		height: 46px;
		transition: .2s;
	}


	@media screen and (min-width: 500px) {
		.md1 { --colspan: 3; }
		.md2 { --colspan: 6; }
		.sm1 { --colspan: 3; }
		.sm2 { --colspan: 6; }
		.sm3 { --colspan: 9; }

		/*body > footer {
			display: flex;
			justify-content: space-between;
		}*/
	}

	@media screen and (min-width: 650px) {
		.col-1 { --colspan: 2; }

		.text-align_md-left, .text-align_md-left .row > * {
			text-align: left;
		}
		.text-align_md-center, .text-align_md-center .row > * {
			text-align: center;
		}
		.text-align_md-right, .text-align_md-right .row > * {
			text-align: right;
		}
		.text-align_md-justify, .text-align_md-justify .row > * {
			text-align: justify;
		}
		
		.col-2, .col-1-5 { --colspan: 4; }
		.col-3, .col-4, .col-5, .col-2-5 { --colspan: 6; }
		
		.md1 { --colspan: 2; }
		.md2 { --colspan: 4; }
		.md3 { --colspan: 6; }
		.md4 { --colspan: 8; }
		.md5 { --colspan: 10; }
		.md6 { --colspan: 12; }
	}

	@media (min-width: 800px) {
		:root {
			--font-size: 18px;
		}
		.mobile {
			display: none;
		}
		
		.text-align_lg-left, .text-align_lg-left .row > * {
			text-align: left;
		}
		.text-align_lg-center, .text-align_lg-center .row > * {
			text-align: center;
		}
		.text-align_lg-right, .text-align_lg-right .row > * {
			text-align: right;
		}
		.text-align_lg-justify, .text-align_lg-justify .row > * {
			text-align: justify;
		}
		
		.col-1 { --colspan: 1; }
		.col-2 { --colspan: 2; }
		.col-3, .col-1-4 { --colspan: 3; }
		.col-4 { --colspan: 4; }
		.col-5 { --colspan: 5; }
		.col-6 { --colspan: 6; }
		.col-7 { --colspan: 7; }
		.col-8 { --colspan: 8; }
		.col-9 { --colspan: 9; }
		.col-10 { --colspan: 10; }
		.col-11 { --colspan: 11; }
		.col-1-5 { width: 20%; }
		.col-2-5 { width: 40%; }
		.col-3-5 { width: 60%; }
		.col-4-5 { width: 80%; }
		
		.lg1 { --colspan: 1; }
		.lg2 { --colspan: 2; }
		.lg3 { --colspan: 3; }
		.lg4 { --colspan: 4; }
		.lg5 { --colspan: 5; }
		.lg6 { --colspan: 6; }
		.lg7 { --colspan: 7; }
		.lg8 { --colspan: 8; }
		.lg9 { --colspan: 9; }
		.lg10 { --colspan: 10; }
		.lg11 { --colspan: 11; }
		.lg12 { --colspan: 12; }

		body > header {
			padding-top: 1em;
		}
		body > header .logo {
			height: 3.9em;
		}
		body > header .logo img {
			height: 3em;
		}
		body > header .tel {
			display: block;
			/*position: fixed;
				right: var(--page-margin-right);*/
		}
		
		body > header .social {
			order: 2;
		}
		
		.banner .inner {
			padding-top: 6.5em;
		}
		
		nav.sidebar {
			flex-direction: column;
			opacity: .5;
			padding: 0;
			position: fixed;
				top: 3.5em;
				right: max(5px, var(--rand-rechts) / 2 - 1.5em);
			z-index: 25;
			transition: right .3s var(--timing-fn);
		}
		nav.sidebar:hover {
			opacity: 1;
		}
		nav.sidebar .lang-nav {
			margin-bottom: 6.75em;
		}
		nav.sidebar .lang-nav li {
			margin: 0 0 0.65rem;
		}
		nav.sidebar .social {
			display: flex;
				flex-wrap: wrap;
				justify-content: end;
			text-align: right;
			width: 2.5em;
		}
		nav.sidebar .social a {
			display: block;
			margin: 0 0 0.65rem;
		}
		nav.sidebar .social a::before {
			background: #fff;
			border: 1px solid var(--grau);
			display: inline-flex;
				align-items: center;
				justify-content: center;
			font-size: 1rem;
			margin-right: .25rem;
			width: 2.25rem;
			height: 2.25rem;
		}
		nav.sidebar .kontakt {
			white-space: nowrap;
		}
		.social.kontakt a {
			position: relative;
			left: 0;
			transition: left .2s var(--timing-fn);
		}
		.social.kontakt a:hover,
		.social.kontakt a:focus {
			left: clamp(0px, var(--rand-rechts) / 2 - 1.7rem, 5rem);
			transition: left .1s var(--timing-fn);
		}
		.social.kontakt a span {
			background: #fff;
			box-shadow: 0 0 8px #0003;
			color: var(--highlight-color);
			display: inline-block;
			font-size: 1rem;
			height: 2.25em;
			line-height: 2.1em;
			max-width: 0;
			overflow: hidden;
			padding: 0;
			position: relative;
			transition: padding .2s var(--timing-fn), max-width .3s var(--timing-fn);
			vertical-align: top;
			z-index: -1;
		}
		.social.kontakt a:hover span,
		.social.kontakt a:focus span {
			max-width: 15em;
			padding: 0 1em;
		}
		.social.kontakt a.icon-phone span {
			line-height: 2.25;
		}
		.sidebar .social.highlight {
			margin-top: 1.3em;
		}
		.sidebar .social.highlight a::before,
		.sidebar .social.highlight a span {
			background: #f00;
			color: #fff;
		}
		.sidebar .social.highlight a::before {
			font-size: 1.38rem;
		}
		
		
		/* Text-Bild / Bild-Text: allgemein */
		.bild_text .titel > div > :first-child {
			margin-top: 0;
		}
		.bild_text .txt > :last-child {
			margin-bottom: 0;
		}
		.bild_text img,
		.text_bild img {
			width: 100%;
			height: 100%;
		}*/
	}

	@media (min-width: 1200px) {
		.text-align-left, .text-align-left .row > * {
			text-align: left;
		}
		.text-align-center, .text-align-center .row > * {
			text-align: center;
		}
		.text-align-right, .text-align-right .row > * {
			text-align: right;
		}
		.text-align-justify, .text-align-justify .row > * {
			text-align: justify;
		}
		
		.col-1 { --colspan: 1; }
		.col-2 { --colspan: 2; }
		.col-3, .col-1-4 { --colspan: 3; }
		.col-4 { --colspan: 4; }
		.col-5 { --colspan: 5; }
		.col-6 { --colspan: 6; }
		.col-7 { --colspan: 7; }
		.col-8 { --colspan: 8; }
		.col-9 { --colspan: 9; }
		.col-10 { --colspan: 10; }
		.col-11 { --colspan: 11; }
		.col-1-5 { width: 20%; }
		.col-2-5 { width: 40%; }
		.col-3-5 { width: 60%; }
		.col-4-5 { width: 80%; }
		
		.textblock.columns-2 {
			columns: 2;
			column-gap: calc(3 * var(--grid-gap));
			text-align: left;
		}
		.textblock.columns-2 > h1,
		.textblock.columns-2 > h2,
		.textblock.columns-2 > .txt-img-wrap {
			column-span: all;
			text-align: center;
		}
		.textblock.columns-2 > p {
			margin-top: 0;
		}
		
		.textblock.banner {
			padding-block: 0;
			position: relative;
		}
		.textblock.banner .background,
		.textblock.banner img {
			position: absolute;
				top: 0;
				left: 0;
			width: 100%;
			height: 100%;
		}
		.textblock.banner .text {
			background: #fffc;
			overflow: hidden;
			padding: 4em 2em;
			position: relative;
			width: calc(var(--inhaltsbereich) / 2);
			z-index: 1;
		}
		.textblock.banner .text.left {
			box-shadow: calc(-1 * var(--page-margin-left)) 0 #fffc;
		}
		.textblock.banner .text.right {
			box-shadow: var(--page-margin-left) 0 #fffc;
			translate: 100% 0;
		}
	}

	@media (min-width: 1520px) {
		:root {
			--font-size: max(18px, 14px + .3vw);
		}
		nav.sidebar {
			opacity: 1;
		}
	}

	@media (max-width: 799px) {
		.desktop {
			display: none;
		}
		
		nav.sidebar {
			padding-top: 1em;
		}
		nav.sidebar > :first-child a {
			margin-right: .5rem;
		}
		nav.sidebar > :last-child a {
			margin-left: .5rem;
		}
		
		.bild_text .row > *,
		.text_bild .row > * {
			margin-bottom: 0;
		}
		
		.overflowing {
			max-height: 620px;
			overflow: hidden;
			position: relative;
		}
		.showMore {
			display: none;
		}
		.overflowing > .showMore {
			background: linear-gradient(to bottom, transparent, #fff9 10%, #fff);
			display: flex;
				align-items: center;
				justify-content: center;
			height: 3.5em;
			position: absolute;
				bottom: 0;
				left: 0;
			width: 100%;
		}
		
	}
}


/* Kontakt */
.kontakt .pflichtinfo {
	display: block;
	font-size: 0.8rem;
	font-weight: 400;
	padding: 0.6em 0;
}
form div.send {
	align-self: center;
	text-align: right;
}
.kontakt .textblock.gmap-wrap {
	padding-bottom: 0;
}
.kontakt .google_map {
	margin-top: 3em;
}


/* CMS-Überschreibungen des Layouts */
[class*="_oben-0"] { --anzahl_oben: 0; }
[class*="_oben-1"] { --anzahl_oben: 1; }
[class*="_oben-2"] { --anzahl_oben: 2; }
[class*="_rechts-0"] { --anzahl_rechts: 0; }
[class*="_rechts-1"] { --anzahl_rechts: 1; }
[class*="_rechts-2"] { --anzahl_rechts: 2; }
[class*="_unten-0"] { --anzahl_unten: 0; }
[class*="_unten-1"] { --anzahl_unten: 1; }
[class*="_unten-2"] { --anzahl_unten: 2; }
[class*="_links-0"] { --anzahl_links: 0; }
[class*="_links-1"] { --anzahl_links: 1; }
[class*="_links-2"] { --anzahl_links: 2; }
[class*="abstand_oben"] { margin-top: calc(var(--anzahl_oben) * 1em); }
[class*="abstand_rechts"] { margin-right: calc(var(--anzahl_rechts) * 1em); }
[class*="abstand_unten"] { margin-bottom: calc(var(--anzahl_unten) * 1em); }
[class*="abstand_links"] { margin-left: calc(var(--anzahl_links) * 1em); }
[class*="einzug_oben"] { padding-top: calc(var(--anzahl_oben) * var(--grid-gap) * 2); }
[class*="einzug_rechts"] { padding-right: calc(var(--anzahl_rechts) * var(--grid-gap) * 2); }
[class*="einzug_unten"] { padding-bottom: calc(var(--anzahl_unten) * var(--grid-gap) * 2); }
[class*="einzug_links"] { padding-left: calc(var(--anzahl_links) * var(--grid-gap) * 2); }

@media (max-width: 1199px) {
	[class*="_oben_lg-0"] { --anzahl_oben: 0; }
	[class*="_oben_lg-1"] { --anzahl_oben: 1; }
	[class*="_oben_lg-2"] { --anzahl_oben: 2; }
	[class*="_rechts_lg-0"] { --anzahl_rechts: 0; }
	[class*="_rechts_lg-1"] { --anzahl_rechts: 1; }
	[class*="_rechts_lg-2"] { --anzahl_rechts: 2; }
	[class*="_unten_lg-0"] { --anzahl_unten: 0; }
	[class*="_unten_lg-1"] { --anzahl_unten: 1; }
	[class*="_unten_lg-2"] { --anzahl_unten: 2; }
	[class*="_links_lg-0"] { --anzahl_links: 0; }
	[class*="_links_lg-1"] { --anzahl_links: 1; }
	[class*="_links_lg-2"] { --anzahl_links: 2; }
}

@media (max-width: 799px) {
	[class*="_oben_md-0"] { --anzahl_oben: 0; }
	[class*="_oben_md-1"] { --anzahl_oben: 1; }
	[class*="_oben_md-2"] { --anzahl_oben: 2; }
	[class*="_rechts_md-0"] { --anzahl_rechts: 0; }
	[class*="_rechts_md-1"] { --anzahl_rechts: 1; }
	[class*="_rechts_md-2"] { --anzahl_rechts: 2; }
	[class*="_unten_md-0"] { --anzahl_unten: 0; }
	[class*="_unten_md-1"] { --anzahl_unten: 1; }
	[class*="_unten_md-2"] { --anzahl_unten: 2; }
	[class*="_links_md-0"] { --anzahl_links: 0; }
	[class*="_links_md-1"] { --anzahl_links: 1; }
	[class*="_links_md-2"] { --anzahl_links: 2; }
}

@media (max-width: 499px) {
	[class*="_oben_sm-0"] { --anzahl_oben: 0; }
	[class*="_oben_sm-1"] { --anzahl_oben: 1; }
	[class*="_oben_sm-2"] { --anzahl_oben: 2; }
	[class*="_rechts_sm-0"] { --anzahl_rechts: 0; }
	[class*="_rechts_sm-1"] { --anzahl_rechts: 1; }
	[class*="_rechts_sm-2"] { --anzahl_rechts: 2; }
	[class*="_unten_sm-0"] { --anzahl_unten: 0; }
	[class*="_unten_sm-1"] { --anzahl_unten: 1; }
	[class*="_unten_sm-2"] { --anzahl_unten: 2; }
	[class*="_links_sm-0"] { --anzahl_links: 0; }
	[class*="_links_sm-1"] { --anzahl_links: 1; }
	[class*="_links_sm-2"] { --anzahl_links: 2; }
}


/*
	Plugins
*/


/* Overflowing table */
.table-wrap {
	overflow-x: auto;
	position: relative;
	text-align: left;
	scrollbar-width: none;
}
.table-wrap::-webkit-scrollbar {
	width: 0;
	height: 0;
}
.table-wrap > button,
.table-wrap.scroll.scrollStart > button.btn-l,
.table-wrap.scroll.scrollEnd > button.btn-r {
	display: none;
}
.js .table-wrap.scroll > button {
	display: inline-block;
	opacity: .7;
	padding: 0;
	position: sticky;
	transform: translateY(-0.5em);
	width: 3em;
	height: 1.5em;
	z-index: 1;
}
.table-wrap > button:hover {
	opacity: 1;
}
.table-wrap > button.btn-l {
	left: 0;
}
.table-wrap > button.btn-l::before {
	content: '\276e';
}
.table-wrap > button.btn-r {
	left: calc(var(--inhaltsbereich) - 3em);
}
.table-wrap > button.btn-r::before {
	content: '\276f';
}
.table-wrap table {
	font-weight: 400;
	table-layout: fixed;
	width: 850px;
	min-width: 100%;
}
.table-wrap table tr,
.table-wrap table td {
}
.table-wrap table tr:not(:first-child) th[colspan="4"] {
	padding: .25em 0;
}
.table-wrap table tr:not(:first-child) th[colspan="4"]::before {
	content: '';
	border-top: 1px solid currentColor;
	display: block;
	margin: .5em  0;
}


/* Cookie-Hinweis */
.cookie-hinweis {
	background-color: rgba(0,0,0,0.98);
	box-shadow: 0 0 10px 0 #000;
	color: #fff;
	font-size: 0.85em;
	max-height: 90vh;
	overflow: auto;
	padding-top: 1em;
	padding-bottom: 1em;
	position: fixed;
		bottom: calc(-100vh + 100%);
		left: 0;
	text-align: left;
	transition: max-height .4s var(--timing-fn);
	width: 100%;
	z-index: 99999;
}
.cookie-hinweis .intro {
	width: 40em;
}
.cookie-hinweis .settings {
	flex-grow: 1;
	width: 15em;
}
.cookie-hinweis .title {
	background: #fff2;
	color: currentColor;
	display: inline-flex;
	font-family: var(--font-family-text);
	font-size: 1.2em;
	margin: 0 .5em .5em 0;
	padding: .5em;
	position: relative;
	text-transform: none;
	width: 11em;
}
.cookie-hinweis .title span {
	flex-grow: 1;
}
.cookie-hinweis .title a {
	color: currentColor;
	text-decoration: none;
}
.cookie-hinweis .title input {
	margin-right: .5em;
	vertical-align: text-bottom;
	width: 1em;
	height: 1em;
}
.cookie-hinweis .buttons {
	display: block;
	margin-top: 1em;
}
.cookie-hinweis button,
.cookie-hinweis .button {
	padding-inline: .5em;
	font-size: 1.1em;
	font-weight: 700;
}
.cookie-hinweis .buttons button {
	margin-bottom: .5em;
	width: 100%;
}
.cookie-hinweis .details {
	background: #000e;
	box-shadow: 0 0 0 50vmax #fffe;
	display: none;
	margin: auto;
	overflow: auto;
	padding: 5vh 5vw;
	position: fixed;
		top: 1em;
		right: max(1rem, 50% - var(--content-width) / 2);
		bottom: 1em;
		left: max(1rem, 50% - var(--content-width) / 2);
	z-index: 10000;
}
.cookie-hinweis .details > button {
	--highlight-color: red;
	color: #fff;
}
.cookie-hinweis .details > button:first-child {
	display: block;
	position: sticky;
		left: calc(100% - 3em);
		top: 0;
	transform: translate(5vw, -5vh);
	width: 3em;
}
.cookie-hinweis .details strong {
	display: block;
	font-size: 1.2em;
	margin: 1em 0 .5em;
}
.cookie-hinweis .details ul {
	columns: 20em;
	list-style: '- ' inside;
}
.cookie-hinweis .details li {
	break-inside: avoid;
}
.cookie-hinweis .details li:only-child {
	column-span: all;
}
#cbxCookies {
	display: none;
}
#cbxCookies:not(:checked) + .cookie-hinweis {
	max-height: 0;
	overflow: hidden;
	padding-top: 0;
	padding-bottom: 0;
	visibility: hidden;
}

@media (min-width: 640px) {
	.cookie-hinweis .buttons button {
		margin: 0 4px .5em 3px;
		width: 15.5em;
	}
	.cookie-hinweis .buttons button.none {
		width: 31.6em;
	}
}
@media (min-width: 800px) and (max-width: 950px) {
	.cookie-hinweis .title {
		font-size: 1.2em;
	}
	.cookie-hinweis .title a {
		position: absolute;
			top: 0;
			right: .33em;
	}
}
@media (min-width: 1260px) {
	.cookie-hinweis .settings {
		flex-grow: 0;
	}
	.cookie-hinweis .buttons button {
		padding-inline: 1.5em;
		margin: 0 6px .5em 0;
		width: auto !important;
	}
}


/* Overlay */
@layer overlay {
	input#cbxHideOverlay {
		display: none;
	}
	input#cbxHideOverlay:checked + .overlay {
		display: none;
	}
	body > .overlay {
		background: rgba(0,0,0,0.9);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}
	body > .overlay > .content {
		background: #fff;
		padding: 1em 2em 2em;
		position: absolute;
		left: 50%;
		top: 50%;
		max-height: 90%;
		max-width: 1330px;
		width: 95%;
		overflow: auto;
		transform: translate(-50%, -50%);
	}
	body > .overlay .btn-close {
		background: #c00;
		color: #fff;
		cursor: pointer;
		font-size: 2em;
		line-height: 1.5;
		position: absolute;
		top: 0;
		right: 0;
		text-align: center;
		width: 1.5em;
	}
}

/* Anpassungen für Google Maps */
.textblock .gmap_canvas button::after {
	display: none;
}
.textblock .gmap_canvas img {
	object-fit: contain;
}

/* Spalten als Overlay anzeigen - "content"-Zeile dafür aktivieren */
main::before {
	/*content: '';*/
	--numcols: 2;
	background: linear-gradient(to right, transparent var(--grid-gap), #3ef3 var(--grid-gap), #3ef3 calc(100% - var(--grid-gap)), transparent calc(100% - var(--grid-gap)));
	background-size: calc(100% / var(--numcols));
	pointer-events: none;
	position: fixed;
		left: calc(var(--rand-links) - var(--grid-gap));
		right: calc(var(--rand-rechts) - var(--grid-gap));
		top: 0;
		bottom: 0;
	z-index: 1;
}
@media (min-width: 500px) {
	main::before {
		--numcols: 4;
	}
}
@media (min-width: 650px) {
	main::before {
		--numcols: 6;
	}
}
@media (min-width: 800px) {
	main::before {
		--numcols: 12;
	}
}

.progress-circle {
	--percent-from: 0;
	--percent-to: 0;
	--border-width: 6px;
	border: var(--border-width) solid var(--linkcolor);
	border-radius: 50%;
	display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	position: relative;
	touch-action: none;
	width: 5.3em;
	height: 5.3em;
	z-index: 1;
}
.progress-circle::before {
	content: '';
	position: absolute;
		top: calc(var(--border-width) * -1);
		right: calc(var(--border-width) * -1);
		bottom: calc(var(--border-width) * -1);
		left: calc(var(--border-width) * -1);
	border: var(--border-width) solid var(--highlight-color);
	border-radius: 50%;
	mask: conic-gradient(from 0deg, #000 calc(1% * var(--percent-from)), #fff calc(1% * var(--percent-from)), #fff calc(1% * var(--percent-to)), #000 calc(1% * var(--percent-to)));
	mask-mode: luminance;
	z-index: -1;
}
.progress-circle::after {
	/*content: ' %';*/
}
.from::before,
.to::before {
	content: "";
	background: radial-gradient(
                	circle at 50% calc(var(--border-width) / 2),
                	var(--highlight-color) calc(var(--border-width) / 2),
                	transparent calc(var(--border-width) / 2)
                );
	position: absolute;
		top: calc(var(--border-width) * -1);
		right: calc(var(--border-width) * -1);
		bottom: calc(var(--border-width) * -1);
		left: calc(var(--border-width) * -1);
	transform-origin: center;
}
.from::before {
	transform: rotate(calc(var(--percent-from) * 3.6deg));
}
.to::before {
	transform: rotate(calc(var(--percent-to) * 3.6deg));
}

form > div{
	break-inside: avoid;
}
form .uploader {
	display: flex;
		flex-direction: column;
	flex-grow: 1;
	margin: 0;
	min-width: 300px;
}
.file_div {
	background: var(--hellblau);
	border: 1px solid transparent;
	border-radius: .45em;
	container-type: inline-size;
	display: grid;
		gap: var(--grid-gap);
		grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
	flex-grow: 1;
	margin-bottom: .5em;
	min-height: 6em;
	overflow: hidden;
	padding: 1em 1em 0;
}	
.file_div.filedrag:empty::before {
	content: 'Drag&Drop';
	background: #fff;
	border: 4px dashed #999;
	border-radius: .5em;
	color: #999;
	display: flex;
		align-items: center;
		justify-content: center;
	font-size: 1.5em;
	font-weight: 600;
	height: 5.5rem;
}	
.file_div.filedrag::after {
	content: 'Bitte laden Sie hier Ihre Daten hoch. Sie können die Dateien auch direkt in dieses Feld ziehen.';
	align-self: end;
	background: var(--blau);
	color: #fff;
	font-size: .8em;
	padding: .2em 1em;
	margin: 1em -1rem 0;
	grid-column: 1 / -1;
}
.file_div.filedrag.hover {
	border-color: #3c6;
	box-shadow: inset 2px 2px 10px #0003;
}
.img-wrap {
	
}
.file {
	background: #fff;
	border: 1px solid var(--blau);
	border-radius: .5em;
	overflow: hidden;
	padding: .5em;
	position: relative;
	z-index: 0;
}
.file-ext {
	background: var(--rot);
	box-shadow: 2px 2px 10px #0003;
	display: block;
	color: #fff;
	font-size: 0.8em;
	font-weight: 600;
	margin: 1.3em auto 0.4em;
	padding: 0 0.2em;
	position: relative;
	width: 2.3em;
}
.file-ext::before {
	content: "\1F5CB";
	color: var(--blau);
	font-size: 4.5em;
	position: absolute;
		top: -0.7em;
		left: -0.2em;
	z-index: -1;
}
.file > a {
	display: block;
	overflow: hidden;
	padding-top: 0.3em;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.file .bild_aktionen {
	position: absolute;
		top: 0;
		right: 0;
}
.file .remove_button {
	border-radius: 0 .45em 0 0;
	padding: 0.1em .25em 0.2em;
}
.uploadButtonsContainer.modern {
	margin-bottom: 1.5em;
}
.uploadButtonsContainer.modern input {
	display: none;
}