/*
	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.75;
	--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: #050E10;
	--highlight-color: #05B2C8;
	--linkcolor: #05B2C8;
	--font-family-text: Arial, icomoon, sans-serif;
	--font-family-title: 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 {
	:root {
		--font-size: 20;
	}
	*, *::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 #eee;
		color: var(--textcolor);
		font-family: var(--font-family-text);
		line-height: var(--line-height);
		max-width: 40em;
		margin: auto;
		overflow-x: hidden;
		padding: 2em 2em;
	}
	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;
	}
	big {
		font-size: 1.3em;
	}
	small {
		font-size: 0.8em;
	}
	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;
	}

	.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;
	}

	/* BUTTONS */
	button, .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;
			gap: calc(2 * var(--grid-gap));
	}
	.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-"] {
		--colspan: 12;
		--factor: var(--colspan) / 12;
		flex: 0 0 auto;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		width: calc(100% * var(--factor) - 2 * var(--grid-gap) * (1 - var(--colspan) / 12));
		max-width: 100%;
	}
	.col-1, .sm1, .col-1-5 {
		--colspan: 6;
	}

	*[class^="col-grow"] {
		flex-grow: 1;
		width: 8%;
	}
	*[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 {
		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 {
		--factor-min: 1.5;
		--factor-max: 2.5;
	}
	h2 {
		--factor-min: 1.33;
		--factor-max: 2.0;
	}
	h3 {
		--factor-min: 1.2;
		--factor-max: 1.5;
	}
	h1 small,
	h2 small,
	h3 small {
		display: block;
		font-size: .5em;
		font-weight: 400;
		text-transform: none;
	}
	body > header {
		background: #fff;
		box-shadow: 0 0 5px #0005;
		/*display: flex;
			align-items: center;
			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(--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 {
		position: relative;
	}
	.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: 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 {
		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 {
		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 {
		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] {
		position: relative;
		top: -80px;
	}
	.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-size: 1.5em;
		font-weight: 400;
	}
	.oeffnungszeiten span:first-child {
		display: inline-block;
		width: 8em;
		max-width: 50%;
	}

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


	/* FOOTER */
	body > footer {
		background-color: var(--textcolor);
		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);*/
	}
	body > footer > * {
		margin-bottom: 1em;
		text-align: center;
	}
	body > footer .meta a {
		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;
	}


	/* 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: 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;
		margin: 7px 0;
		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; }
		.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; }
		
		body > footer .meta li:not(:last-child)::after {
			content: '|';
		}
	}

	@media (min-width: 800px) {
		.mobile {
			display: none;
		}
		
		.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 .logo img {
			margin: 2em 0;
			height: 6em;
		}
		
		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 */
		.textblock.bild_text img,
		.textblock.text_bild img {
			width: 100%;
			height: 100%;
		}
		
		.bild_text .grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 0 var(--grid-gap);
			justify-content: center;
		}
		.grid.r4x8 { grid-template-columns: 4fr 8fr; }
		.bild_text .grid > :first-child {
			align-self: end;
			margin: 0;
		}
		.bild_text .grid > .img {
			grid-row: span 2;
			order: -1;
		}
	}

	@media (min-width: 1200px) {
		.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;
		}
	}

	@media (min-width: 1520px) {
		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 > * {
			margin-bottom: 0;
		}
		.bild_text .grid > :first-child {
			grid-column: span 2;
		}
		.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%;
		}
		
	}
}


/* 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;
}


/*
	Plugins
*/


/* Overflowing table */
th, td {
	line-height: 1.4;
	padding-right: .4em;
	padding-bottom: .4em;
	text-align: left;
	vertical-align: top;
}
.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: 0;
		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: '';*/
	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;
}

.vcards .vcard {
	background: #fff;
	box-shadow: 0 0 10px #0003;
	display: inline-block;
	line-height: 1.3;
	margin: 15px 10px 0 0;
	padding: .75em 1em;
	text-decoration: none;
	width: 16em;
	height: 6.5em;
	vertical-align: top;
}