/*
	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 {
	--font-size: 20;
	--line-height: 1.6;
	--max-content-width: 1400px;
	--narrow-content-width: 924px;
	--wide-content-width: 1400px;
	--content-width: var(--max-content-width);
	--grid-gap: 14px;
	--page-margin-left: 1rem;
	--page-margin-right: 1rem;
	--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);

	--bg-color: #fff;
	--textcolor: #000;
	--linkcolor: var(--grau);
	--highlight-color: var(--grau);
	--font-family-text: Roboto, Arial, icomoon, sans-serif;
	--font-family-title: 'Roboto Condensed', Verdana, Arial, icomoon, sans-serif;
	
	--timing-fn: cubic-bezier(.22,.61,.36,1);
	
	font-size: calc(1px * 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 {
	*, *::before, *::after {
		box-sizing: border-box;
		scrollbar-width: thin;
		scrollbar-color: var(--grau) #000;
	}
	::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}
	::-webkit-scrollbar-track-piece {
		background: #000;
	}
	::-webkit-scrollbar-thumb {
		background: var(--grau);
	}
	body {
		background: none var(--grau);
		color: var(--textcolor);
		font-family: var(--font-family-text);
		font-weight: 300;
		line-height: var(--line-height);
		overflow-x: hidden;
		text-align: right;
	}
	body.modal-open {
		overflow: hidden;
	}
	body.no-js .js,
	body.js .no-js {
		display: none;
	}

	p {
		margin: calc(1em * var(--line-height)) 0;
	}
	a {
		color: var(--linkcolor);
		transition: color .3s var(--timing-fn);
	}
	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;
		text-decoration: none;
	}

	body > header,
	body > .breadcrumb,
	body > nav,
	.banner .inner,
	main > *,
	footer,
	body > .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 {
		background: #fff;
		display: flex;
			flex-wrap:wrap;
			justify-content: center;
		padding-top: 1em;
		padding-bottom: .5em;
	}
	.sidebar .social.highlight a::Before {
		color: #f00;
	}

	body main > * {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	main > h1,
	main > h2,
	main > h3 {
		margin: 0 15px;
		padding: 0;
	}

	/* BUTTONS */
	header ~ * button, header ~ * .button {
		background-clip: padding-box;
		background-color: var(--highlight-color);
		border: 1px solid var(--highlight-color);
		color: var(--bg-color);
		cursor: pointer;
		display: inline-block;
		font-family: var(--font-family-title);
		font-size: .75rem;
		font-weight: 700;
		letter-spacing: .1em;
		line-height: 1.2;
		padding: .5em 2em;
		position: relative;
		text-decoration: none;
		text-transform: uppercase;
		transition: .3s var(--timing-fn);
	}
	a:hover button, a:hover .button,
	button:hover, .button:hover,
	a:active button, a:active .button,
	button:active, .button:active {
		background-color: var(--bg-color);
		color: var(--highlight-color);
	}
	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;
	}


	/* 12 GRID LAYOUT */
	.row {
		clear: both;
		display: flex;
		flex-wrap: wrap;
		margin: 0 calc(var(--grid-gap) * -1);
	}
	.row > * {
		margin-bottom: calc(var(--grid-gap) * 2);
		padding: var(--grid-gap);
	}
	.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-"] {
		flex: 0 0 auto;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		width: 100%;
		max-width: 100%;
	}
	*[class^="col-grow"] {
		flex-grow: 1;
		width: auto;
	}
	*[class^="col-auto"] {
		width: auto;
	}


	/* 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, .title, [data-title]::before {
		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));
		font-size: clamp(1em * var(--factor-min), var(--dynsize), 1em * var(--factor-max));

		font-weight: 500;
		line-height: 1.2;
		margin: 0.6em 0;
	}
	h1 {
		margin-top: 0;
	}
	h1, h2, .title, [data-title]::before { --factor-min: 1.5; --factor-max: 2.5; }
	h3 {
		--factor-min: 1.2;
		--factor-max: 1.5;
	}
	h1 small,
	h2 small,
	h3 small {
		display: block;
		font-size: 1.5rem;
		font-weight: 400;
		text-transform: none;
	}
	body > header {
		background: var(--grau);
		display: flex;
			align-items: flex-start;
			justify-content: space-between;
		position: sticky;
			top: 0;
		z-index: 19;
	}
	
	.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(--grau);
		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 {
		background: var(--grau);
		position: relative;
	}
	.banner .slider {
		max-width: calc(var(--rand-links) + var(--max-content-width));
	}
	.banner .slick-track {
		display: flex;
	}
	.banner .slide {
		float: none;
		height: auto;
		position: relative;
		text-decoration: none; /* falls der Slide ein Link ist */
		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: left;
		z-index: 5;
	}
	.js .banner .text {
		visibility: hidden;
	}
	.js .banner .slick-slide .text {
	}
	.js .banner .slick-current .text {
		visibility: visible;
		animation: 2s ease-out 0s 1 slideInFromLeft;
	}
	.banner .title {
		color: #fff;
		font-size: clamp(2em, 5vw, 3em);
		font-weight: 400;
		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 {
		font-size: 1.5rem;
	}
	.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 {
		border: 0;
		box-shadow: 0 0 0 1px #fff;
		font-size: 1.5em;
		line-height: 2;
		opacity: 0;
		padding: 0;
		pointer-events: none;
		position: sticky;
			bottom: .5rem;
			right: .5rem;
		text-align: center;
		transition: .8s ease-in-out;
		width: 2em;
		z-index: 20;
	}
	.scrollup.visible {
		opacity: 1;
		pointer-events: all;
	}

	/* CONTENT */
	body > main {
		background: #fff;
		border-top: .1px solid var(--grau);
		position: relative;
		text-align: center;
		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);
	}
	body > main .textblock:first-child {
		padding-top: 1.5rem;
	}
	main a[name] {
		position: relative;
		top: -80px;
	}
	.textblock.hg-grau,
	.textblock .hg-grau {
		--highlight-color: #fff;
	}
	.textblock.hg-grau:last-child {
		margin-bottom: 2em;
	}
	.textblock.hg-bild {
		background: var(--hgbild) no-repeat top / cover;
	}
	/*.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-family: var(--font-family-title);
		font-size: 1.5em;
		font-weight: 400;
	}
	
	.textblock .iconbox i {
		font-size: 2.6em;
	}
	.textblock .iconbox a {
		border: 1px solid var(--grau);
		color: currentcolor;
		display: block;
		height: 100%;
		padding: 1.5em 2em;
		text-decoration: none;
		transition: background .3s var(--timing-fn);
	}
	.textblock .iconbox a:hover {
		background: var(--highlight-color);
		color: var(--bg-color);
	}
	
	.oeffnungszeiten span:first-child {
		display: inline-block;
		width: 8em;
		max-width: 50%;
	}

	.js main > * > * {
		visibility: hidden;
	}
	.js main > * > *.in-view {
		animation: .8s ease-in-out 0s 1 slideInFromBottom;
		visibility: visible;
	}


	/* FOOTER */
	body > footer {
		background-color: var(--grau);
		color: #fff;
		flex-wrap: wrap;
		font-size: min(4.5vw, 1rem);
		overflow: hidden;
		padding-top: 1em;
		/*padding-right: max(3.75rem, 50% - var(--content-width) / 2);*/
		text-align: left;
	}
	body > footer > * {
		margin-bottom: 1em;
	}
	body > footer a {
		color: currentcolor;
		text-decoration: none;
	}
	body > footer .adresse {
		columns: 2 20em;
	}
	body > footer .adresse * {
		display: block;
		margin-bottom: .3em;
	}
	body > footer .adresse *::before {
		font-size: 1.15em;
		margin-right: .4rem;
		vertical-align: sub;
	}
	body > footer .meta a {
		display: inline-block;
		padding: 0 .4em .3em;;
	}
	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-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;
	}


	/* Youtube */
	.embed-yt {
		color: #333;
		font-size: .93em;
		text-align: center;
		position: relative;
	}
	.embed-yt > img {
		margin: auto;
		max-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: min(8vw, 3rem);
		text-align: center;
		height: auto;
		min-height: 31em;
		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;
		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(--highlight-color);
	}
	/*
		-----------------------------------------
		 Einstellungen für Displaygrößen < 500px
		-----------------------------------------
	*/

	.col-1, .col-1-5 {
		width: 50%;
	}

	header .logo {
		background: #fff;
		display: inline-block;
		margin-bottom: -1.65em;
	}
	header .logo img {
		padding: 7.3% 6.9%;
		transition: .3s var(--timing-fn);
		width: 250px;
	}


	@media screen and (min-width: 500px) {
		.md1 { width: 25%; }
		.md2 { width: 50%; }
		.sm1 { width: 25%; }
		.sm2 { width: 50%; }
		.sm3 { width: 75%; }
		.sm4 { width: 100%; }

		body > footer {
			display: flex;
				align-items: flex-end;
				justify-content: space-between;
		}
		body > button.scrollup {
			position: fixed;
		}
	}

	@media screen and (min-width: 650px) {
		.col-1 { width: 16.66%; }
		.col-2, .col-1-5 { width: 33.33%; }
		.col-3, .col-4, .col-5, .col-2-5 { width: 50%; flex-grow: 1; }
		
		.md1 { width: 16.66%; }
		.md2 { width: 33.33%; }
		.md3 { width: 50%; }
		.md4 { width: 66.66%; }
		.md5 { width: 83.33%; }
		.md6 { width: 100%; }
	}

	@media (min-width: 800px) {
		.mobile {
			display: none;
		}
		
		.col-1 { width: 8.333%; }
		.col-2 { width: 16.667%; }
		.col-3, .col-1-4 { width: 25%; }
		.col-4 { width: 33.333%; }
		.col-5 { width: 41.667%; }
		.col-6 { width: 50%; }
		.col-7 { width: 58.333%; }
		.col-8 { width: 66.667%; }
		.col-9 { width: 75%; }
		.col-10 { width: 83.333%; }
		.col-11 { width: 91.667%; }
		.col-1-5 { width: 20%; }
		.col-2-5 { width: 40%; }
		.col-3-5 { width: 60%; }
		.col-4-5 { width: 80%; }
		
		.lg1 { width: 8.333%; }
		.lg2 { width: 16.667%; }
		.lg3 { width: 25%; }
		.lg4 { width: 33.333%; }
		.lg5 { width: 41.667%; }
		.lg6 { width: 50%; }
		.lg7 { width: 58.333%; }
		.lg8 { width: 66.667%; }
		.lg9 { width: 75%; }
		.lg10 { width: 83.333%; }
		.lg11 { width: 91.667%; }
		.lg12 { width: 100%; }

		body > header {
			align-items: center;
			position: relative;
		}
		body > header .logo img {
			width: 448px;
		}
		
		body > header .social {
			order: 2;
		}
		
		.banner .image::before {
			content: '';
			background: #fff6;
			position: absolute;
				top: 0;
				left: 0;
			width: 100%;
			height: 1.65rem;
		}
		.banner .inner {
			padding-top: 6.5em;
		}
		
		@media (min-height: 500px) {
			nav.sidebar {
				background: transparent;
				flex-direction: column;
				opacity: .5;
				padding: 0;
				position: fixed;
					top: min(37vh, 15em);
					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 .social {
				display: flex;
					flex-wrap: wrap;
					justify-content: end;
				text-align: right;
				width: 2.5em;
			}
			nav.sidebar .social a {
				display: block;
				margin: 0 0 min(1.5vh, .65rem);
			}
			nav.sidebar .social a::before {
				background: #fff;
				border: 1px solid var(--grau);
				box-shadow: 0 0 6px #0003;
				display: inline-flex;
					align-items: center;
					justify-content: center;
				font-size: 1rem;
				margin-right: 0;
				width: 2.25rem;
				height: 2.25rem;
				transition: margin .3s var(--timing-fn);
			}
			nav.sidebar .social:not(.kontakt) a:hover::before,
			nav.sidebar .social:not(.kontakt) a:focus::before {
				background: var(--highlight-color);
				color: var(--bg-color);
			}
			.social.kontakt a.active::before,
			.social.kontakt a:hover::before,
			.social.kontakt a:focus::before {
				margin-right: .25rem;
			}
			nav.sidebar .kontakt {
				white-space: nowrap;
			}
			.social.kontakt a {
				position: relative;
				left: 0;
				/*transition: left .2s var(--timing-fn);*/
			}
			.social.kontakt a.active,
			.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.active span,
			.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: min(2.7vh, 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 */
		.textblock.bild_text img,
		.textblock.text_bild img {
			width: 100%;
			height: 100%;
		}
		
		/* Bild/Text: Überschrift "verschieben"; H2 ausblenden, Titel aus Data-Attribut bei .txt einblenden */
		.bild_text h2 {
			display: none;
		}
		[data-title]::before {
			content: attr(data-title);
			display: block;
		}
	}

	@media (min-width: 1200px) {
		.col-1 { width: 8.333%; }
		.col-2 { width: 16.667%; }
		.col-3, .col-1-4 { width: 25%; }
		.col-4 { width: 33.333%; }
		.col-5 { width: 41.667%; }
		.col-6 { width: 50%; }
		.col-7 { width: 58.333%; }
		.col-8 { width: 66.667%; }
		.col-9 { width: 75%; }
		.col-10 { width: 83.333%; }
		.col-11 { width: 91.667%; }
		.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;
		}
	}

	@media (min-width: 1520px) {
		nav.sidebar {
			opacity: 1;
		}
	}

	@media (max-width: 799px) {
		.desktop {
			display: none;
		}
		
		nav.sidebar > :first-child a {
			margin-right: .5rem;
		}
		nav.sidebar > :last-child a {
			margin-left: .5rem;
		}
		
		.bild_text .row > * {
			margin-bottom: 0;
		}
		.bild_text .txt p:first-child {
			margin-top: 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%;
		}
		
	}
}


/* Startseite */
@media (min-width: 800px) {
	.startseite .textblock .row .bilder + div {
		text-align: left;
	}
}
@media (min-width: 800px) and (max-width: 1199px) {
	.startseite .textblock .row .bilder.col-8 {
		width: 58.333%;
	}
	.startseite .textblock .row .bilder.col-8 + div {
		width: 41.667%;
	}
}
@media (min-width: 1200px) {
	.startseite main form textarea {
		height: calc(var(--input-height) * 5 + 4rem);
	}
}


/* Produkte */
.textblock.produkte > .row > * {
	flex-grow: 0;
}
.produkte label.switch {
	background: var(--grau);
	display: block;
	position: relative;
}
.produkte label.switch img {
	clip-path: polygon(22% 22%, 22% 78%, 78% 78%, 78% 22%);
	transition: clip-path .3s var(--timing-fn);
}
.produkte label.switch:hover img {
	clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}
.produkte label.switch:hover + h3 {
	font-weight: 700;
}
/*.produkte label.switch i {
	background: var(--bg-color);
	border: 2px solid var(--highlight-color);
	color: var(--bg-color);
	font-size: 1.7em;
	line-height: 0;
	padding: .25em;
	position: absolute;
		left: 50%;
		bottom: 22%;
	transform: translate(-50%, 50%);
}
.produkte label.switch i::before {
	background: var(--highlight-color);
	border-radius: 50%;
	display: block;
	padding: .25em;
}
.produkte label.switch:hover i {
	--bg-color: var(--grau);
	--highlight-color: #fff;
}*/
.produkte .modal {
	text-align: left;
}
.produkte .modal .modal-content {
	padding: 1em max(50vw - 960px, 2em) 0;
}
.produkte .modal .modal-content .btn-close {
	background: #fff;
	color: var(--grau) !important;
	display: inline-block;
	float: right;
	font-size: 1em;
	line-height: 1;
	padding: 1em;
	position: sticky;
		top: 0;
	transform: translate(2em, -0.5em);
}
.produkte .modal .modal-content .btn-close::before {
	display: block;
	transform: scale(.8) translateX(-1.3em);
	transition: .3s var(--timing-fn);
}
.produkte .modal .modal-content .btn-close:hover::before {
	transform: scale(1.5) translateX(.5em);
}
.produkte .modal .title {
	font-weight: 400;
	margin: 0;
}
.produkte .modal .col-5 {
	padding-bottom: 0.4em;
	padding-left: 0.4em;
}
.produkte .modal .gallery {
	display: flex;
		flex-wrap: wrap;
	padding-right: 2%;
}
.produkte .modal .gallery .img {
	padding: 10px;
}
.produkte .modal .gallery .img:not(.landscape) {
	width: 50%;
	order: 1;
}
.produkte .modal .col-7 {
	display: flex;
		flex-direction: column;
	padding-left: 4%;
	padding-right: 4%;
}
.produkte .modal .txt {
	flex-grow: 1;
}
.produkte .modal .txt p {
	break-inside: avoid;
	margin-top: 0;
}
.produkte .modal table caption {
	text-align: left;
}
.produkte .modal .txt + .kontakt {
	margin-bottom: 0;
}
.produkte .modal .kontakt .button {
	margin-top: 1rem;
}
.produkte .columns-2 .modal .txt {
	columns: 2 350px;
	column-gap: calc(3 * var(--grid-gap));
}
body.modal-open .lang-nav,
body.modal-open .sidebar {
	display: none;
}


/*
	Oberflächen
*/
.oberflaechen .grid .lightbox {
	margin-bottom: 1.5em;
}
.oberflaechen .grid img {
	background: var(--grau);
	height: auto;
	padding: 22%;
	transition: padding .3s var(--timing-fn);
}
.oberflaechen .grid a:hover img {
	padding: 0;
}
.oberflaechen .grid .caption {
	display: block;
	margin-top: .66em;
}
.oberflaechen .grid a:hover .caption {
	font-weight: 700;
}
.smartphoto .smartphoto-caption {
	font-size: 1.5em;
}


/*
	Downloads
*/
.downloads .dl {
	color: var(--grau);
	container-type: inline-size;
	flex-grow: 0;
	margin: 0;
	text-decoration: none;
}
.downloads .dl .wrap {
	background: #fff;
	border: 1px solid currentcolor;
	box-shadow: 0 0 15px #0003;
	transition: .3s var(--timing-fn);
	transition-property: background, color;
}
.downloads .dl:hover .wrap {
	background: var(--grau);
	color: #fff;
}
.downloads .dl .icon {
	line-height: 1;
	/*margin: 20cqw 0 15cqw;*/
	margin: 7cqw 21.3cqw 6.7cqw;
	position: relative;	
}
.downloads .dl .icon img {
	filter: drop-shadow(0 0 2.2cqw #fff);
}
.dl .icon span {
	color: #fff;
	font-size: 2.7cqw;
	line-height: 1.6;
	position: absolute;
		top: 29.5%;
		right: 26.75%;
	transform-origin: top right;
	transform: skew(20deg, -14deg) scaleY(0.9);
	text-align: right;
}
/*
.downloads .dl .icon-pdf {
	font-size: 33.5cqw;
}
.downloads .dl .icon-darr {
	font-size: 10cqw;
	margin-left: -3.5cqw;
	position: absolute;
		bottom: -5.6cqw;
		left: 50%;
	transition: bottom .3s var(--timing-fn);
}
.downloads .dl:hover .icon-darr {
	bottom: -16cqw;
}
*/
.downloads .dl .caption {
	display: flex;
		align-items: center;
		justify-content: center;
	font-size: calc(4.5cqw + 10px);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 5cqw;
	min-height: 2.4em;
}


/* Kontakt */
.kontakt .textblock.hg-grau {
	margin-bottom: 3rem;
}
.kontakt .textblock.kontaktdaten {
	font-size: 1.25em;
	font-weight: 500;
}
.kontakt .textblock.kontaktdaten a {
	display: inline-block;
	margin: 0 1.1em .7em;
	text-decoration: none;
}
.kontakt .textblock.kontaktdaten a::before {
	font-size: 1.5em;
	margin-right: .4em;
	vertical-align: middle;
}
.kontakt .textblock form {
	padding: 3em 0;
}
.kontakt form .col-6 {
	container-type: inline-size;
	flex-grow: 1;
	width: 594px;
}
.kontakt form .col-6:first-child {
	display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	padding: 0;
}
.kontakt form .col-6:first-child label {
	flex-grow: 1;
	margin: 0 var(--grid-gap) 1em;
	width: 400px;
}
.kontakt .interesse {
	display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
	gap: .3rem;
	margin-bottom: .85em;
}
.kontakt .interesse strong {
	display: block;
	line-height: 1.3;
	margin-bottom: .2em;
	width: 100%;
}
.kontakt .interesse .lbl-chk {
	display: inline-flex;
	flex-grow: 1;
	margin: 0;
	width: 12em;
}
.kontakt .interesse .lbl-chk .label {
	font-size: 1rem;
	hyphens: none;
}
.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;
}

@container (max-width: 421px) {
	.kontakt .interesse {
		background: #fff;
		border: 1px solid gray;
		margin-top: 2em;
	}
	.kontakt .interesse strong {
		margin-top: -2em;
	}
	.kontakt .interesse .lbl-chk {
		left: 0;
		margin: 0;
	}
	.kontakt .interesse .lbl-chk .label {
		padding: 5px;
		width: 100%;
	}
	.kontakt .interesse input:checked + .label {
		background: var(--grau);
		color: #fff;
	}
	form label.lbl-chk .icon {
		display: none;
	}
}


/*
	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: -webkit-sticky;
	position: sticky;
		bottom: 0;
	text-align: left;
	transition: max-height .4s ease-out;
	z-index: 99999;
}
.cookie-hinweis .intro {
	margin-bottom: 2em;
	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: 2em;
}
.cookie-hinweis button,
.cookie-hinweis .button {
	font-size: 1.3em;
	padding: .3em .5em;
}
.cookie-hinweis .buttons button {
	letter-spacing: 0;
	margin-bottom: .5em;
	width: 100%;
}
/*.cookie-hinweis .buttons .all {
	background: green;
}
.cookie-hinweis .buttons .none {
	background: red;
}*/
.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 {
	background: red;
}
.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 {
	/*background: green;
	opacity: 0;
	overflow: hidden;
	padding: 0;*/
	max-height: 0;
	overflow: hidden;
	padding: 0;
}

@media (min-width: 530px) {
	.cookie-hinweis .buttons button {
		margin: 0 4px .5em 3px;
		width: 10.5em;
	}
	.cookie-hinweis .buttons button.none {
		width: 21.5em;
	}
}
@media (min-width: 950px) {
	.cookie-hinweis .buttons {
		margin: 0;
	}
}
@media (min-width: 1200px) {
	.cookie-hinweis .settings {
		flex-grow: 0;
	}
	.cookie-hinweis .buttons button {
		margin: 0 6px .5em 0;
		padding: .3em 1.5em;
		width: auto !important;
	}
}


label.switch {
	cursor: pointer;
}
input.toggle-modal,
.modal {
	display: none;
}
input:checked + .modal {
	display: block;
}

/* 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: '';*/
	background: linear-gradient(to right, transparent 11.765%, #0ac6 11.765%, #0ac6 88.235%, transparent 88.235%);
	background-size: calc(100% / 12);
	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;
}