/*
	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.6;
	--max-content-width: 1400px;
	--narrow-content-width: 686px;
	--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;
	--highlight-color: var(--gelb);
	--linkcolor: var(--highlight-color);
	--font-family-text: Lexend, Arial, icomoon, sans-serif;
	--font-family-title: Lexend, 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: 17;
	}
	*, *::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);
	}
	
	a[class*="icon-"],
	a:has(i[class*="icon-"]) {
		color: currentColor;
	}
	*[class*="icon-"]::before {
		background: var(--highlight-color);
		border-radius: 50%;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
		color: #fff;
		display: inline-block;
		font-family: icomoon;
		line-height: 2em;
		margin-right: .4em;
		text-align: center;
		vertical-align: middle;
		width: 2em;
		height: 2em;
	}
	p > a:only-child {
		color: var(--textcolor);
		display: inline-flex;
			align-items: center;
		min-height: 2.4em;
		padding: 0 .4em 0 3em;
		position: relative;
		text-transform: uppercase;
		transition: padding .3s var(--timing-fn);
		z-index: 1;
	}
	p > a:only-child::before,
	p > a:only-child i::before {
		background: var(--highlight-color);
		border-radius: .8em;
		color: #fff;
		display: inline-block;
		font-family: icomoon;
		font-size: 1.5em;
		line-height: 1.6em;
		padding: 0 .3em;
		position: absolute;
			top: 0;
			left: 0;
		text-align: left;
		transition: width .3s var(--timing-fn);
		vertical-align: middle;
		width: 1.6em;
		height: 1.6em;
		z-index: -1;
	}
	p > a:only-child:hover {
		padding: 0 1em 0 2.4em;
		text-decoration: none;
	}
	p > a:only-child:hover::before,
	p > a:only-child:hover i::before {
		width: 100%;
	}
	p > a:not([class^="icon-"]):not(:has(i)):only-child::before {
		content: '\2192';
	}
	.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;
	}

	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);
		text-align: center;
	}
	.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;
	}
	body main > * {
		padding-top: 3.5rem;
		padding-bottom: 4rem;
	}
	body main > *:first-child {
		padding-top: 4.33rem;
		padding-bottom: 2.5rem;
	}
	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-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;
			justify-content: center;
		gap: calc(2 * 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;
	}
	
	a[class^="col-"] {
		color: inherit;
		text-decoration: none;
	}


	/* 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 {
		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: 700;
		line-height: 1.2;
		margin: 0.6em 0;
		text-transform: uppercase;
	}
	h1, h2, .title { --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: #f5f5f5ee;
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		box-shadow: 0 0 6px #0002;
		position: fixed;
			top: 0;
			right: 0;
			left: 0;
		z-index: 19;
	}
	body > header .textblock {
		padding-top: var(--grid-gap);
	}
	body > header .kontakt {
		display: none;
		transition: font-size .3s var(--timing-fn);
	}
	body > header.small .kontakt {
		font-size: 0;
	}
	body > header .kontakt p {
		display: inline-block;
		line-height: .5;
		margin: .3em 0 0;
	}
	body > header .kontakt .social {
		padding-right: 2.1em;
		text-align: right;
	}
	body > header .kontakt .social a::before {
		color: #fff;
		font-size: 1rem;
	}
	
	.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 .img-wrap {
		background: #000;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.banner .img-wrap > * {
		width: 100vw;
		height: 100%;
		object-fit: cover;
	}
	.banner .image > * {
		opacity: .5;
	}
	.banner .inner {
		min-height: 85vh;
		padding-top: 40vh;
		position: relative;
		z-index: 2;
	}
	.banner .text {
		color: #fff;
		line-height: 1.2;
		position: relative;
		text-transform: uppercase;
		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 .title1 {
		font-size: clamp(1.5em, 4vw, 2em);
	}
	.banner .title2 {
		font-size: clamp(1.75em, 4.66vw, 3.25em);
		font-weight: 700;
	}
	.banner .text p:first-child {
		margin-top: .1em;
	}
	.banner .text p:last-child {
		margin-bottom: 0;
	}
	.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%;
		color: #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 {
		border-top: 7px solid var(--highlight-color);
		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[class*=" hg-"] {
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	}
	.textblock.hg-bild {
		background: var(--hgbild) no-repeat top / cover;
	}
	
	.textblock.karten .karte .text {
		background: #fff;
		box-shadow: 2px 3px 6px rgba(0, 0, 0, .16);
		hyphens: none;
		margin: -1em 6% 0;
		padding: 1em 6%;
		position: relative;
		text-align: center;
	}
	.textblock.karten .karte .text h3 {
		font-weight: 600;
		text-transform: none;
	}
	.textblock.karten .karte .img {
		box-shadow: 2px 3px 6px rgba(0, 0, 0, .16);
	}
	
	.textblock.text_bild.eyecatcher .img {
		margin-bottom: -4em;
	}
	.textblock.text_bild.eyecatcher .img img {
		max-height: 100vh;
		object-fit: contain;
		object-position: bottom;
	}
	
	/*.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 {
		border-top: 7px solid var(--highlight-color);
		flex-wrap: wrap;
		font-size: min(4.5vw, 1rem);
		overflow: hidden;
		text-align: center;
	}
	body > footer > * {
		padding-top: 3em;
		padding-bottom: 2.5em;
	}
	body > footer .row {
		margin: 0;
	}
	body > footer .row > * {
		margin: 0;
		padding: 0;
		min-width: min(100%, 22em);
	}
	body > footer .textblock > .row {
		align-items: end;
		gap: 1em;
	}
	body > footer .logo a {
		display: inline-block;
	}
	body > footer .logo img {
		margin-bottom: .7em;
		width: 18em;
	}
	body > footer p {
		margin: 0;
	}
	body > footer .kontakt strong {
		line-height: 2;
	}
	body > footer .social-media a {
		display: inline-block;
		margin-left: .7rem;
	}
	body > footer .social a::before {
		background: transparent;
		color: var(--highlight-color);
		font-size: 1.7rem;
		margin: 0;
		width: auto;
	}
	body > footer .meta li:not(:last-child)::after {
		content: '|';
		display: inline-block;
		text-align: center;
		width: .8em;
	}
	body > footer .meta a {
		display: inline-block;
		line-height: 1.3;
		padding: 0 .2em;
	}
	body > footer .meta label {
		cursor: pointer;
		padding-left: .2em;
		position: relative;
		top: .1em;
	}
	
	@media (width > 800px) {
		body > footer {
			text-align: left;
		}
		body > footer .rechts {
			text-align: right;
		}
		body > footer .rechts .row {
			gap: 0;
		}
	}


	/* 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: 17em;
		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
		-----------------------------------------
	*/

	header .logo {
		display: inline-block;
	}
	header .logo img {
		width: 15em;
		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; }
		.sm4 { --colspan: 12; }
	}

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

	@media (min-width: 800px) {
		:root {
			--font-size: 20;
		}
		.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 {
			background: var(--grau);
			backdrop-filter: none;
			position: relative;
		}
		body > header .logo {
			padding-left: 0;
		}
		body > header .logo img {
			margin: 1em 0 .3em;
			width: 100%;
		}
		body > header .row {
			align-items: center;
		}
		body > header .row > * {
			margin: 0;
		}
		body > header .kontakt {
			display: block;
			text-align: right;
			padding-bottom: 0;
		}
		body > header.small .kontakt {
			font-size: inherit;
		}
		body > header .kontakt p {
			margin-right: .5em;
		}
		body > header .kontakt p > * {
			display: inline-block;
			margin-right: 2em;
		}
		body > header .navigation {
			background: #000;
			color: #fff;
			font-size: 1.1em;
			line-height: 4.5rem;
			margin: -.66em 0 -2.25rem;
			padding-block: 0;
		}
		
		
		/* Text-Bild / Bild-Text: allgemein */
		.textblock.text_bild .row > * {
			padding-block: 0;
		}
		.textblock.text_bild p:first-child {
			margin-top: 0;
		}
		.textblock.text_bild p:last-child {
			margin-bottom: 0;
		}
		.textblock.bild_text img,
		.textblock.text_bild img {
			width: 100%;
			height: 100%;
		}
		.textblock.text_bild .img {
			position: relative;
		}
		.textblock.text_bild img {
			position: absolute;
				top: 0;
				left: 0;
			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 (max-width: 799px) {
		.desktop {
			display: none;
		}
		
		.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%;
		}
		
	}
}


/* Startseite */
@media (min-width: 800px) {
	.textblock.text_bild.eyecatcher {
		margin-top: 5rem;
		padding-bottom: 2em;
	}
	.textblock.text_bild.eyecatcher .img {
		margin: -16rem 0 -2rem;
	}
	.textblock.text_bild.eyecatcher .img img {
		margin: auto;
		top: auto;
		right: var(--grid-gap);
		bottom: 0;
		left: var(--grid-gap);
		width: auto;
		max-width: calc(100% - 2 * var(--grid-gap));
	}
}


.textblock.icons > .row {
	justify-content: center;
}
.iconbox, .bildbox {
	flex-grow: 0;
	text-align: center;
}
.iconbox.col-6 {
	flex-grow: 1;
}
.iconbox .container {
	display: block;
	color: currentColor;
}
.iconbox.inset .container, .bildbox .text {
	box-shadow: 2px 3px 6px #00000028;
	hyphens: none;
}
.iconbox.inset .container, .bildbox .container > * {
	--padding-block: 10%;
	--padding-inline: 5%;
	
	height: 100%;
	padding: var(--padding-block) var(--padding-inline);
}
.iconbox a:target + .container {
	box-shadow: 0px 0px .5em var(--highlight-color);
}
.iconbox [class^="icon-"] {
	color: var(--highlight-color);
	font-size: 6.55em;
	line-height: 1;
	margin-top: 1rem;
}
.iconbox [class^="icon-"]::before {
	box-shadow: none;
	margin: 0;
}
.iconbox [class^="icon-"]:not(.filled)::before {
	background: transparent;
	color: inherit;
	line-height: 1;
	vertical-align: top;
	width: auto;
	height: auto;
}
.iconbox [class^="icon-"].filled {
	--bg-size: 1.6em;
	font-size: 5rem;
}
.iconbox [class^="icon-"].filled::before {
	width: var(--bg-size);
	height: var(--bg-size);
	line-height: var(--bg-size);
}
.iconbox h2, .bildbox h2,
.iconbox h3, .bildbox h3 {
	font-size: 1.5rem;
	hyphens: auto;
	margin: 1.5rem 0 .5em;
}
.iconbox.col-4 h2, .bildbox.col-4 h2,
.iconbox.col-4 h3, .bildbox.col-4 h3 {
	font-size: 1.15rem
}
.bildbox .container > .img {
	margin-bottom: 1em;
	padding-top: calc((100% - 2 * var(--padding-inline)) * 0.54);
	position: relative;
}
.bildbox .container .img img {
	object-fit: contain;
	object-position: bottom;
	padding: var(--padding-block) var(--padding-inline);
	position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
}
@media (width > 800px) {
	.iconbox .container, .bildbox .container > * {
		--padding-block: calc(var(--colspan) * 5.5px);
		--padding-inline: clamp(1rem, 40% - 9em, var(--spaltenbreite));
	}
	.bildbox.col-5 .container > * {
		--padding-inline: clamp(1rem, 40% - 7em, var(--spaltenbreite));
	}
}


/* Kontakt */
.textblock.kontakt form .col-grow {
	width: 18.3em;
}
form div.send {
	align-self: center;
	text-align: right;
}
.textblock.kontakt .logo {
	max-width: 16.5em;
	margin-bottom: 3.7em;
}
.textblock.kontakt .anschrift > * {
	color: currentColor;
	display: block;
	margin-bottom: calc(2 * var(--grid-gap));
}
.kontakt .textblock.gmap-wrap {
	padding-bottom: 0;
}
.kontakt .google_map {
	margin-top: 3em;
}


/*
	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: 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 var(--grid-gap), #0ac6 var(--grid-gap), #0ac6 calc(100% - var(--grid-gap)), transparent calc(100% - var(--grid-gap)));
	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;
}