@charset "UTF-8";

/********************************************************************************************************************************************************************************

    ALL STYLES BY:
         _______                   _____                _____                    _____            _____                    _____                    _____
        /::\    \                 /\    \              /\    \                  /\    \          /\    \                  /\    \                  /\    \
       /::::\    \               /::\____\            /::\    \                /::\____\        /::\    \                /::\____\                /::\    \
      /::::::\    \             /:::/    /            \:::\    \              /:::/    /        \:::\    \              /::::|   |               /::::\    \
     /::::::::\    \           /:::/    /              \:::\    \            /:::/    /          \:::\    \            /:::::|   |              /::::::\    \
    /:::/~~\:::\    \         /:::/    /                \:::\    \          /:::/    /            \:::\    \          /::::::|   |             /:::/\:::\    \
   /:::/    \:::\    \       /:::/    /                  \:::\    \        /:::/    /              \:::\    \        /:::/|::|   |            /:::/__\:::\    \
  /:::/    / \:::\    \     /:::/    /                   /::::\    \      /:::/    /               /::::\    \      /:::/ |::|   |           /::::\   \:::\    \
 /:::/____/   \:::\____\   /:::/    /      _____        /::::::\    \    /:::/    /       ____    /::::::\    \    /:::/  |::|   | _____    /::::::\   \:::\    \
|:::|    |     |:::|    | /:::/____/      /\    \      /:::/\:::\    \  /:::/    /       /\   \  /:::/\:::\    \  /:::/   |::|   |/\    \  /:::/\:::\   \:::\    \
|:::|____|     |:::|    ||:::|    /      /::\____\    /:::/  \:::\____\/:::/____/       /::\   \/:::/  \:::\____\/:: /    |::|   /::\____\/:::/__\:::\   \:::\____\
 \:::\    \   /:::/    / |:::|____\     /:::/    /   /:::/    \::/    /\:::\    \       \:::\  /:::/    \::/    /\::/    /|::|  /:::/    /\:::\   \:::\   \::/    /
  \:::\    \ /:::/    /   \:::\    \   /:::/    /   /:::/    / \/____/  \:::\    \       \:::\/:::/    / \/____/  \/____/ |::| /:::/    /  \:::\   \:::\   \/____/
   \:::\    /:::/    /     \:::\    \ /:::/    /   /:::/    /            \:::\    \       \::::::/    /                   |::|/:::/    /    \:::\   \:::\    \
    \:::\__/:::/    /       \:::\    /:::/    /   /:::/    /              \:::\    \       \::::/____/                    |::::::/    /      \:::\   \:::\____\
     \::::::::/    /         \:::\__/:::/    /    \::/    /                \:::\    \       \:::\    \                    |:::::/    /        \:::\   \::/    /
      \::::::/    /           \::::::::/    /      \/____/                  \:::\    \       \:::\    \                   |::::/    /          \:::\   \/____/
       \::::/    /             \::::::/    /                                 \:::\    \       \:::\    \                  /:::/    /            \:::\    \
        \::/____/               \::::/    /                                   \:::\____\       \:::\____\                /:::/    /              \:::\____\
         ~~                      \::/____/                                     \::/    /        \::/    /                \::/    /                \::/    /
                                  ~~                                            \/____/          \/____/                  \/____/                  \/____/

*********************************************************************************************************************************************************************************/

:root {
	/*
		grid
	*/
	--grid-gap: 10px;

	/*
		page
	*/
	--page-full-padding: 40px;
	--page-half-padding: 20px;

	--content-max-width: 900px;
	--page-max-width: 1400px;
	--header-height: 83px;
	--footer-height: 158px;
	--aside-width: 208px;
	--main-nav-position: 200px;

	/*
		colors
	*/
	--color-brand: #000;
	--color-text: #000;
	--color-inverted-text: #e7e5dc;
	--color-link: #78777A;
	--color-link-hover: #e7e5dc;
	--color-body-background: #fff;

	/*
		fonts
	*/
	--font-regular-family: "Inter", sans-serif;
	--font-title-family: "Inter", sans-serif;
	--font-bold-family: "Inter", sans-serif;

	/*
		Transformation
	*/
	--ease-speed: 0.2s;
	--transformation: 1.03;
	--transition: all .3s ease-out;
	--transform-slide-fade: transform 0.5s ease-out, opacity 0.5s ease-out;
	--project-transition: background .4s ease, color .4s ease;

	/*
		Forms
	*/
	--link-border-thickness: 1px;
	--line-color: #000;
	--input-border: var(--link-border-thickness) solid var(--line-color);
	--input-border-color: var(--line-color);
	--input-padding: 8px 10px;
	--select-padding: 8px 10px;
	--input-border-radius: 0;
	--input-background-color: var(--color-inverted-text);


	/*
		Animate css
	*/
	--animate-duration: 0.5s;

	/*

		--vw2px (view width to pixel)
		mit 1600px entsprechen die pixel angaben dem design
		der viewport muss mit 1600px übereinstimmen!

	*/
	--vw2px: calc(100vw / 2200);
	--vh2px: calc(100vh / 1260);

	--font-size: 15px;
	--font-weigth: 500;
	--font-line-height: 1.2;
	--body-margin-height: 20px;

	--font-small-size: 12px;
	--font-small-line-height: 1.2;

	--font-nav-size: 27px; --font-nav-line-height: 1.85;

	--font-h1-size: 27px; --font-h1-line-height: 1.3;
	--font-h2-size: 27px; --font-h2-line-height: 1.3;
	--font-h3-size: 17px; --font-h3-line-height: 1.3;
}

/*
	@media screen and (min-width: 2200px ) {
		:root {
				falls man Schriften dynamisch vergrössern will,
				nimmt man deren pixel wert (ohne px) und multipliziert es mit --vw2px

				--font-size: calc(var(--vw2px) * 15);
				--body-margin-height: calc(var(--vw2px) * 18);

				--font-small-size: calc(var(--vw2px) * 12);
				--font-nav-size: calc(var(--vw2px) * 27);

				--font-h1-size: calc(var(--vw2px) * 27);
				--font-h2-size: calc(var(--vw2px) * 27);
				--font-h3-size: calc(var(--vw2px) * 17);
		}
	}
*/


/* Set to 100%
------------------------------------------------------------------------------------------------------- */
html, body { }


/* Body
------------------------------------------------------------------------------------------------------- */
body {
	margin: 0;padding: 0;
	font-family: var(--font-regular-family);
	font-optical-sizing: auto;
	font-weight: var(--font-weigth);
	font-style: normal;
	font-feature-settings: "ss02";
	font-size: var(--font-size); line-height: var(--font-line-height);
	background: var(--color-body-background);
	text-rendering: optimizeLegibility;
	transition: all 0.3s ease-in-out;
}



/* Dokument Struktur
------------------------------------------------------------------------------------------------------- */
#page-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--aside-width);
	grid-template-areas: "content aside";
	/* height: 100vh; */
	/* overflow: hidden; */
}

	/*
		@media screen and (min-width: 2200px) {
			#page-wrapper {
				grid-template-columns: 90fr 10fr;
			}
		}
	*/

	/* Home with slider */
	#content-home {
		grid-area: content;
		position: relative;
		position: fixed;
		inset: 0;               /* top right bottom left = 0 */
		z-index: 1;
		overflow-x: auto; overflow-y: hidden;
		height: 100vh;
		padding: var(--page-full-padding); padding-right: 0;
		margin-right: calc(var(--aside-width) + var(--page-half-padding));
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;
	}
		#content-home-left-shade {
			position: fixed; top: 0; left: 0; width: var(--page-full-padding); height: 97%; background: #fff; z-index: 2;
		}

	/* Projects */
	#content-project {
		grid-area: content;

		display: grid;
		grid-template-columns: 33fr 67fr;            /* Left / Media */
		grid-template-rows: auto 1fr;          /* Intro / Text  */
		grid-template-areas:
			"intro media"
			"text  media";
		align-items: flex-start;
		/* height: 100vh; */
		/* overflow: hidden; */
	}
		#content-project #content-left { grid-area: unset; }

	/* Projects */
	#content-list {
		grid-area: content;

		display: grid;
		grid-template-columns: 33fr 67fr;
		grid-template-rows: auto;
		grid-template-areas:
			"left media";
		align-items: flex-start;
	}


	/* Info pages */
	#content-info {
		grid-area: content;

		display: grid;
		grid-template-columns: 33fr 67fr;            /* Left / Media */
		grid-template-rows: auto 1fr auto;          /* Intro / Text / Impressum */
		grid-template-areas:
			"left media";
		align-items: flex-start;
		/* height: 100vh; */
		/* overflow: hidden; */
	}


	#content-footer {
		grid-area: content;
		display: grid;
		grid-template-columns: 33fr 67fr;            /* Left / Media */
		grid-template-areas:
			"left   media";
		grid-template-rows: auto;          /* Intro / Text / Impressum */
		align-items: flex-start;
	}


		/* Bereichs-Zuordnung */
		#content-intro {
			grid-area: intro;
			min-height: calc(var(--main-nav-position) - 5px);
			padding-right: var(--page-full-padding); padding-left: var(--page-full-padding);
		}

		#content-text {
			grid-area: text;
			padding-right: var(--page-full-padding); padding-left: var(--page-full-padding);
			margin-bottom: var(--page-full-padding);
		}

		#content-impressum {
			grid-area: imp;
			/* white-space: nowrap; */
			margin-top: auto!important; /* be at the bottom */
			margin-bottom: var(--page-full-padding);
			padding-right: var(--page-full-padding); padding-left: var(--page-full-padding);
		}

		#content-left.with_impressum #content-impressum {
			white-space: nowrap;
			position: absolute; bottom: 0; left: 0;
		}

		#content-right {
			grid-area: media;
			position: relative;
			top: var(--main-nav-position);
			padding-top: var(--page-full-padding); padding-right: var(--page-half-padding); padding-bottom: var(--page-full-padding); padding-left: var(--page-full-padding);
		}
			#content-right p { max-width: 600px;}

		#content-media   {
			grid-area: media;
			position: sticky; top: var(--page-full-padding);
			text-align: right;
			padding-top: var(--page-full-padding); padding-right: var(--page-half-padding); padding-bottom: var(--page-full-padding); padding-left: var(--page-full-padding);
			margin-bottom: var(--page-full-padding);
		}
			#content-media figure { display: inline-block; width: 100%; }
			#content-info #content-media { text-align: left; top: 0; }



	/* eliminate first margin top */
	#content-left > *:first-child, #content-right > *:first-child, #content-intro > *:first-child, #content-media > *:first-child { margin-top: 0 !important; }

	#content-left {
		grid-area: left;
		position: sticky; top: var(--page-full-padding);
		margin-top: var(--page-full-padding);

		display: flex;
  	  	flex-direction: column;
  		min-height: calc(100vh - var(--page-full-padding)); /* füllt Viewport ab Sticky-Offset */
	}
		#content-left.with_impressum { padding-bottom: 70px; }

#aside {
	grid-area: aside;
	position: fixed; right: 0; top: 0;
	padding-left: var(--page-half-padding); padding-right: var(--page-full-padding);
	background: #fff;
	width: var(--aside-width); height: 100vh;
	overflow: hidden;
	z-index: 2;

	display: grid;
	grid-template-rows: 2fr 1fr;  /* Header (2×) / Footer (1×) */
	grid-template-areas:
	"header"
	"footer";
}

	#header {
		grid-area: header;
		position: relative;
		overflow: auto; /* falls Inhalt im Header zu groß ist */
	}

		#logo {
			position: absolute; top: var(--page-full-padding); right: 0;
			width: 32%; min-width: 79px;
		}

		#main-nav { position: absolute; top: calc(var(--main-nav-position) + var(--page-full-padding)); left: 0; }

			#main-nav ul {
				display: flex;
				flex-direction: column;
				list-style: none;
				font-family: var(--font-regular-family); font-size: var(--font-nav-size); line-height: var(--font-nav-line-height);
				font-optical-sizing: auto;
				font-weight: var(--font-weigth);
				font-style: normal;
			}

			#main-nav a:hover,
			#main-nav li.here a { color: var(--color-link); }

	#footer {
		grid-area: footer;
		align-self: end;
		margin-bottom: var(--page-full-padding);
	}
		#footer a { color: var(--color-text); }
		#footer a:hover { color: var(--color-link); }

	#footer-mobile-wrapper { margin-top: auto; }
	#footer-mobile { display: none; }

	.impressum { margin-right: var(--page-full-padding); }
	.impressum.last { margin-right: 0; }



/* Mobile Version
------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1600px) {

	:root {
		--font-nav-size: 23px;
		--font-h1-size: 23px;
		--font-h2-size: 23px;

		--page-full-padding: 30px;
		--page-half-padding: 15px;
	}

	#content-project, #content-info { grid-template-columns: 40fr 60fr; }
	.project-toggle { padding: 5px var(--page-full-padding); }

}
/* Mobile Version
------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1100px) {

	:root {
		--font-size: 14px;
		--body-margin-height: 20px;
		--font-small-size: 12px;
		--font-nav-size: 17px; --font-nav-line-height: 1.2;
		--font-h1-size: 17px;
		--font-h2-size: 17px;
		--font-h3-size: 14px;

		--page-full-padding: 20px;
		--page-half-padding: 10px;
	}

	body, html { height: 100%; }

	/* eliminate first margin top */
	#content-left > *:first-child, #content-right > *:first-child, #content-intro > *:first-child, #content-media > *:first-child { margin-top: var(--body-margin-height)!important; }

	/* 1spaltiges Wrapper-Grid: Content unter Aside */
	#page-wrapper {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"aside"
			"content";
		grid-template-rows:
			var(--header-height)
			auto;
		height: 100%;
		overflow: visible;
	}

	#aside {
		grid-area: aside;
		grid-template-rows: 1fr; grid-template-areas: "header";  padding: 0;
		width: 100%; height: var(--header-height);
    }

		#header {
			z-index: 1;
			background: #fff;
			position: fixed; left: 0; top: 0;
			width: 100%; height: var(--header-height);
			border-bottom: 1px solid #000;
			opacity: 0.95;
		}

			#logo {
				position: absolute; top: var(--page-full-padding); left: var(--page-full-padding);
				width: 32px; min-width: auto;
			}

			#main-nav { position: absolute; top: var(--page-full-padding); right: var(--page-full-padding); left: auto; }
				#main-nav ul { flex-direction: row; text-align: right; }
				#main-nav ul > li  { margin-left: var(--page-full-padding); }

		#footer { display: none; }
		#footer-mobile { display: block; }


	/* Content-Grid mit 2 Spalten für mobile Zone-Definition */
	#content-project {
		grid-area: content;

		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows:
			auto   /* intro */
			auto   /* media */
			auto;   /* text */
		grid-template-areas:
			"intro"
			"media"
			"text";
		gap: 0; height: auto; overflow: visible; padding: 0;
		margin-top: var(--header-height);
	}

	#content-info {
		grid-area: content;

		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows:
			auto   /* intro */
			auto   /* media */
			auto   /* text */
			auto;  /* last row */
		grid-template-areas:
			"intro"
			"media"
			"text"
			"imp";
		gap: 0; height: auto; overflow: visible; padding: 0;
		margin-top: var(--header-height);
	}
		#content-info #content-intro { padding-top: 0; }
		#content-info #content-media { top: var(--page-full-padding); }

	#content-footer {
		grid-area: content;

		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows:
			auto   /* media */
			auto;  /* last row */
		grid-template-areas:
			"media"
			"imp";
		gap: 0; height: auto; overflow: visible; padding: 0;
		margin-top: var(--header-height);
	}


	#content-list {
		grid-area: content;
		display: block;
		margin-top: var(--header-height);
	}

		#content-list #content-left { display: none; }
		#content-list #content-right { top: 0; margin-top: 36px; padding: 0; }


	/* bestehendes #content-home überschreiben */
	#content-home {
		grid-area: content;

		position: fixed;
		left: 0; right: 0; bottom: 0;
		top: var(--header-height); /* Höhe von aside/header abziehen */
		margin: 0;
		height: calc(100% - var(--header-height));

		/* Scrollbar unten über volle Breite */
		overflow-x: auto; overflow-y: hidden;
		-webkit-overflow-scrolling: touch;

		/* vertikal zentrieren, links ausrichten */
		display: flex;
		align-items: center;

		/* linker Rand: 40px oder --page-full-padding, was grösser ist */
		padding-left: var(--page-full-padding);
		padding-right: var(--page-full-padding);

		/* optionaler vertikaler „Atemraum“ */
		padding-top: calc(max(10dvh, 50px) - 8px);
		padding-bottom: calc(max(10dvh, 50px) + 8px);
	}

		#content-home-left-shade {
			position: fixed; top: var(--header-height); left: 0; width: var(--page-full-padding); height: calc(100% - var(--header-height)); z-index: 1;
		}

	#content-left { display: contents; position: unset; height: auto; }


	#content-intro {
		grid-area: intro; min-height: auto;
	}

	#content-media {
		grid-area: media;
		padding: 0; margin-top: 0; text-align: left;
		position: relative;
		margin-bottom: 0;
	}

	#content-right {
		grid-area: media;
		padding-top: 0; padding-bottom: 0; margin-top: calc(1 * var(--body-margin-height));
		position: relative; top: 0;
	}

	#content-text {
		grid-area: text;
		margin-top: calc(2 * var(--body-margin-height));
	}
		#content-text p { max-width: 600px; }


	#content-impressum { display: none; }
	#footer-mobile {
		background: #000;
		color: var(--color-inverted-text);

		padding: var(--page-full-padding);
		margin-top: calc(1 * var(--page-full-padding));
		align-self: end;
	}
		#footer-mobile a { color: var(--color-inverted-text); }
		#footer-mobile a:hover { color: var(--color-link); }

		.footer-mobile {
			display: grid;
			grid-template-columns: auto 140px;
		}
}



/* Project List
------------------------------------------------------------------------------------------------------- */

.project-item {
	border-top: 1px solid var(--line-color);
	display: grid;
	grid-template-columns: 1fr; /* 60fr 40fr */
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"title image"
		"text  image";
	/* gap: var(--page-half-padding); */
	align-items: stretch;
	transition: var(--project-transition);
}

	.project-item.full { display: block; width: 100%; }
	.project-item.full .project-title a { display: inline-block; width: 100%; }

/* Toggle */
.project-toggle {
  all: unset;
  grid-area: title;
  display: block;
  width: 100%;
  cursor: pointer;
  padding: 7px var(--page-full-padding);
  transition: var(--project-transition);
  box-sizing: border-box;
}

.project-item:hover,
.project-item.is-open { background:#000; color:var(--color-inverted-text); }

.project-title {
  font-family: var(--font-title-family);
  font-size: var(--font-h2-size);
  line-height: var(--font-h2-line-height);
}


/* Textpanel unten links */
.project-panel[hidden] { display: none; }
.project-panel {
  grid-area: text;
  background:#000;
  color:var(--color-inverted-text);
  padding: 8px var(--page-full-padding);
  display:flex; /* Subtitle unten anschlagen */
}
	.project-panel a { color: var(--color-inverted-text)!important; }
	.project-panel a:hover { color: var(--color-link)!important; }

.project-text { margin-top:auto; }

/* Bild rechts ueber volle Hoehe */
.project-media {
  background: #000;
  grid-area: image;
  display:none;                  /* nur offen zeigen */
  padding: 8px var(--page-full-padding); padding-right: 8px;
  text-align: right;

}
.project-item.is-open .project-media { display:block; }

.project-media figure { margin:0; height:100%; display: inline-block; }
.project-media img {
	width:100%; height:auto; object-fit: cover; display:inline-block; margin-left: auto;
}

	/* Liste */
	.project-list {
	list-style:none;
	border-top:1px solid var(--line-color);
	border-bottom:1px solid var(--line-color);
	}
	.project-item:first-child { border-top:none; }


@media (max-width: 1600px) {
	.project-item {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		grid-template-areas:
		"title"
		"image"
		"text";
	}

	.project-toggle { padding: 6px var(--page-full-padding); }

	/* Panel normal fließen lassen */
	.project-panel { display: block; }
	.project-text { margin-top: 0; }

	/* Bild nicht mehr auf volle Hoehe zerren */
	.project-media { padding: 8px var(--page-full-padding); text-align: left; }
	.project-media figure { margin: 0; height: auto; }
	.project-media img { width: 100%; height: auto; object-fit: contain; margin-left: unset; }
}

@media (max-width: 1100px) {
	.project-list { border-top: none; }
}


/* Home Slider
------------------------------------------------------------------------------------------------------- */

.slider-wrap {
	height: calc(100% + 13px);
	position: relative;
}

.slider {
  display: inline-flex;
  width: max-content;
  gap: 8px;
  height: 100%;
  overflow: visible;
}

.slider figure {
	position: relative;
	height: 100%;
}

	.slider img {
		height: 100%;
		width: auto;
		display: block;
		vertical-align: bottom; /* gegen inline-gap */
	}

	.slider figcaption {
		position: absolute; left: 0; bottom: 0px;
		background: #fff; padding: 4px 8px;
		padding-left: 0; padding-bottom: 0;
		font-size: var(--font-small-size); line-height: var(--font-small-line-height);
	}
		.slider figcaption a { color: var(--color-link); }
		.slider figcaption a:hover { color: var(--color-text); }

		.slider-btn {
			position: fixed; top: 50%;
			transform: translateY(-50%);
			opacity: 1;
			z-index: 2;
			width: 25px;
			height: 60px;

			background-color: transparent;      /* kein pill */
			background-repeat: no-repeat;
			background-position: center;
			background-size: 25px 78px;
			cursor: pointer;
		}

		.slider-btn.prev { left: calc(var(--page-full-padding) + var(--page-half-padding)); background-image: url('/assets/images/arrow-left.svg'); }
		.slider-btn.next { right: calc(var(--aside-width) + var(--page-half-padding) + var(--page-half-padding)); background-image: url('/assets/images/arrow-right.svg'); }

		.slider-btn:hover { opacity: 0.5; }


@media screen and (max-width: 1100px) {
	/* Slider: nur breit sein, selbst nicht scrollen */
	.slider-wrap { height: 100%; }

	.slider { align-items: center; height: 100%; }

		.slider img {
			height: 100%; width: auto;
			object-fit: cover;
		}

		.slider-btn { width: 24px; height: 40px; display: none; }
			.slider-btn.next { right: 8px; }

		.slider figcaption {
			left: 20px; bottom: -26px;
		}
}



/* Widths
------------------------------------------------------------------------------------------------------- */
.page_width {
	width: 100%;
	max-width: var(--page-max-width);
	margin-left: auto; margin-right: auto;
}

	.content_width {
		width: 100%;
		/* max-width: var(--content-max-width); */
		padding-left: var(--page-padding); padding-right: var(--page-padding);
		margin-left: auto; margin-right: auto;
	}

	@media screen and (min-width: 1400px) {
		:root {
			--page-max-width: 1800px;
			--lottie-height: 900px;
		}
	}

	@media screen and (max-width: 500px) {
		:root { --page-padding: 10px; }
	}

.small_page_width {
	width: 100%;
	max-width: var(--page-small-max-width);
	padding-left: var(--page-padding); padding-right: var(--page-padding);
	margin-left: auto; margin-right: auto;
}

/* Layout styles
------------------------------------------------------------------------------------------------------- */
.layout { }

	.layout-with-backgound {
		padding: 1px var(--body-margin-height) calc(var(--body-margin-height) * 2) var(--body-margin-height);
	}

	.layout-with-backgound.layout-1-2_1-2 + .layout-with-backgound.layout-1-2_1-2 .grid,
	.layout-with-backgound.layout-1-3_2-3 + .layout-with-backgound.layout-1-3_2-3 .grid,
	.layout-with-backgound.layout-2-3_1-3 + .layout-with-backgound.layout-2-3_1-3 .grid,
	.layout-with-backgound.layout-1-3_2-3 + .layout-with-backgound.layout-2-3_1-3 .grid,
	.layout-with-backgound.layout-2-3_1-3 + .layout-with-backgound.layout-1-3_2-3 .grid {
		margin-top: 0;
	}

/* Headings & Formatting
------------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4, .h0, .h1, .h2, .h3, .h4 {
	color: inherit;
	font-family: var(--font-title-family);
	font-optical-sizing: auto;
	font-weight: var(--font-weigth);
	font-style: normal;
}

h1, .h1 { font-size: var(--font-h1-size); line-height: var(--font-h1-line-height); }
h2, .h2 { font-size: var(--font-h2-size); line-height: var(--font-h2-line-height); }
h3, .h3 { font-size: var(--font-h3-size); line-height: var(--font-h3-line-height); }


/* Links
------------------------------------------------------------------------------------------------------- */
a { color: inherit; text-decoration: none; transition: var(--transition); }
a:hover, a:focus, a:active { color: var(--color-link-hover); text-decoration: none; }

.brand_color { color: var(--color-brand); }

/* Format
------------------------------------------------------------------------------------------------------- */
.main_format img { display: inline-block; vertical-align: bottom; }
.main_format a { color: var(--color-link); text-decoration: none; }
.main_format a:hover { color: var(--color-link-hover); text-decoration: none; }
.main_format a h1, .main_format a h2, .main_format a h3, .main_format a p { text-decoration: none; border-bottom: none; }
.main_format h1, .main_format h2, .main_format h3, .main_format h4, .main_format .h1, .main_format .h2, .main_format .h3 { margin-top: var(--body-margin-height);  }
.main_format p, .main_format figure, .main_format iframe, .main_format ul, .main_format table { margin-top: var(--body-margin-height); }
.main_format figcaption {
	font-size: var(--font-small-size); line-height: var(--font-small-line-height); text-align: left;
	margin-top: calc(var(--body-margin-height)/3);
	margin-left: var(--page-full-padding);
}
.main_format table { }
.main_format td, .main_format th { padding-right: 15px; vertical-align: top;}
.main_format th { text-align: left; }
.main_format td:last-child, .main_format th:last-child { padding-right: 0px; }
.main_format hr { background-color: var(--line-color); border-width:0; color: var(--line-color); height:1px; line-height:0; margin-top: var(--body-margin-height); margin-bottom: var(--body-margin-height); text-align:center; width:100%; }

p.small { font-size: var(--font-small-size); line-height: var(--font-small-line-height); }

.main_format ul { list-style: none; padding-right: var(--body-margin-height); }
.main_format li { position: relative; padding-left: var(--page-padding); text-indent: calc(-1 * var(--page-padding)); /* Negative indent to pull the first line back */ }

	/* for small Text Block */
	.small {
		font-size: var(--font-small-size)!important; line-height: var(--font-small-line-height)!important;
	}

.smaller { font-size: 10px; line-height: 1.2; }

/* main Info Vertical Format
------------------------------------------------------------------------------------------------------- */
.info_vertical_format h2 { margin-top: calc(2 * var(--page-half-padding)); }
.info_vertical_format h2 + p { margin-top: calc(2 * var(--page-half-padding)); }

/* Grid with fractions col-1-2 etc.
------------------------------------------------------------------------------------------------------- */
.title-content-main > .grid { margin-top: 0; }

.grid {
		display: grid;
		grid-template-columns: repeat(12, 1fr); /* Define 12 columns by default */
		grid-gap: var(--body-margin-height);
		margin-top: var(--body-margin-height); /* one is coming from main_format */
	}

	/* Einstellungen für jede Spalte in layouts */
	.column {
		grid-column: span var(--span);
	}

	.col-1-1 { grid-column: span 12; }	/* full */
	.col-1-2 { grid-column: span 6; }	/* half */
	.col-1-3 { grid-column: span 4; }	/* thirds */
	.col-2-3 { grid-column: span 8; }	/* two-thirds */
	.col-1-4 { grid-column: span 3; }	/* quarters */
	.col-2-4 { grid-column: span 6; }	/* half */
	.col-3-4 { grid-column: span 9; }	/* three-quarters */


	@media (max-width: 700px) {
		.column[style*="--span:3"], /* 1/4 spannt normalerweise 3 von 12 Spalten */
		.column[style*="--span:8"], /* 2/3 spannt normalerweise 8 von 12 Spalten */
		.column[style*="--span:4"]  /* 1/3 spannt normalerweise 4 von 12 Spalten */ {
			grid-column: span 6; /* 1/2 von 12 Spalten */
		}

		.col-1-4, .col-3-4 {
			grid-column: span 6;	/* half */
		}
	}
	@media (max-width: 500px) {
		.column[style*="--span:8"], /* 2/3 spannt normalerweise 8 von 12 Spalten */
		.column[style*="--span:4"], /* 1/3 spannt normalerweise 4 von 12 Spalten */
		.column[style*="--span:3"], /* 1/4 spannt normalerweise 3 von 12 Spalten */
		.column[style*="--span:9"], /* 3/4 spannt normalerweise 9 von 12 Spalten */
		.column[style*="--span:6"], /* 1/2 spannt normalerweise 6 von 12 Spalten */
		.col-1-2, .col-1-3, .col-2-3, .col-1-4, .col-3-4 {
			grid-column: span 12; /* full */
		}
	}


/* General Semantic Tags
------------------------------------------------------------------------------------------------------- */
nav h1 { display: none; } /* Being friendly to newsreaders */




/*
//
//	Blocks
//
//
------------------------------------------------------------------------------------------------------- */
.block { }



/* Gallery block
------------------------------------------------------------------------------------------------------- */
.carousel-container { position: relative; }

	.arrow-right, .arrow-left  {
		position: absolute;
		width: 100px; height: 70px;
		background-size: contain;
		opacity: 0.7;
		margin-top: calc(-1 * 70px / 2);
	}

		.arrow-right:hover, .arrow-left:hover { opacity: 1; }
		.arrow-right {
			right: 0; top: 50%;
			background: url(/assets/images/arrow-right-2.svg) no-repeat 0 0 transparent;
		}
		.arrow-left {
			display: none;
			left: 0; top: 50%;
			background: url(/assets/images/arrow-left-2.svg) no-repeat 0 0 transparent;
		}

.carousel{
	display:block;
	width: 100%;
	height: var(--carousel-height);
	background: white;
	overflow-x: scroll;
	white-space: nowrap;
	scrollbar-width: none;
	cursor: ew-resize; /* Horizontal resize cursor */
	font-size: 0; line-height: 0;
}
	.carousel::-webkit-scrollbar {
		display: none; /* Webkit-based browsers */
	}

	.carousel-item {
		display: inline-block;
		border-right: var(--border-white);
		background-color: var(--color-light-gray);
		/* background-image: url(/assets/images/loading.gif); */
	}
		.carousel-item img,
		.carousel-item video { width: auto; height: var(--carousel-height); display: block; }


	@media screen and (max-width: 700px) {
		.arrow-left { display: none; }

		:root {
			--carousel-height: 590px;
		}
	}



/* Footer
------------------------------------------------------------------------------------------------------- */
#footer { }


/* Blocks
----------------------------------------------------------------------------------------------------*/

	/* Block Titel
	------------------------------------------------------------------------------------------------------- */
	.titel_block.centered { text-align: center; }

	/* Block text
	------------------------------------------------------------------------------------------------------- */
	.text_block.centered { text-align: center; }

	/* Block image / Bild Block
	------------------------------------------------------------------------------------------------------- */
	.image_full_width, .img_full_width { width: 100%; height: auto; }
	.image_full_height, .img_full_height { width: auto; height: 100%; }

	.image_percentage_height { height: auto; } /* the width is set within the block */

		/* image alignement for inline content */
		img.left {display: inline-block; float: left; padding-right: var(--body-margin-height); padding-bottom: calc(var(--body-margin-height) / 2); }
		img.right {display: inline-block; float: right; padding-left: var(--body-margin-height); padding-bottom: calc(var(--body-margin-height) / 2); }
		img.center {display: inline-block; text-align: center;}

		/* lightbox
		------------------------------------------------------------------------------------------------------- */
		body.lightbox-open { overflow: hidden; }
        .lightbox-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; z-index: 10; }
        .lightbox-overlay.open { display: flex; }
        .lightbox-overlay img { max-width: 90%; max-height: 90%; }
        .lightbox-overlay .close { position: absolute; top: 20px; right: 20px; background: white; color: black; text-decoration: none; font-size: 20px; padding: 5px 10px; border-radius: 5px; cursor: pointer; }


	/*  Line Block
	------------------------------------------------------------------------------------------------------- */
	.line { width: 100%; border-top: var(--border-white); border-left: var(--border-white); border-right: var(--border-white);  }
		.line.normal { }
		.line.bigger { border-top-width: 5px; }
		.line.grid_gap { border-top-width: var(--grid-gap); }


	/*  Line Space
	------------------------------------------------------------------------------------------------------- */
	.space { width: 100%; height: 0; background-color: var(--color-body-background);  }

	/* Block divider
	------------------------------------------------------------------------------------------------------- */
	.white_space {
		margin: 0 auto; text-align: center; height: var(--body-margin-height); padding: 0px; width: 100%; max-width: 370px;
		background: #fff;
	}

	/* Block video
	------------------------------------------------------------------------------------------------------- */
	.video_full_width_container { position: relative; aspect-ratio: 16/9; padding-top: 25px; height: 0; margin-top: var(--body-margin-height); background: var(--color-block-background); }
		.video_full_width_container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; margin-top: 0; }

	.block_video video {
		width: 100%!important;
		height: auto!important;
	}

	/* Google Maps
	------------------------------------------------------------------------------------------------------- */
	.google_maps_item {
		margin-bottom: calc(var(--body-margin-height) * 2);
	}
		.google_maps { width:100%; height:700px; position: relative; overflow:hidden; margin-bottom: var(--body-margin-height); }

		/* Responsive Google Maps */
		.google_maps_full_width {
			position: relative;
			aspect-ratio: 3/4;
			  height: 0;
		 }

		.google_maps_full_width iframe {
			position: absolute; top: 0; left: 0;
			width: 100% !important; height: 100% !important;
		}

	/* Block imageImage
	------------------------------------------------------------------------------------------------------- */
 	.image_left { float:left; width: 50%; padding-right: calc(var(--body-margin-height) / 2); }

		@media screen and (max-width: 500px) {
			.image_left { float: none; width: 100%; padding-right: 0; }
		}

	.image_right { float:left; width: 50%; padding-left: calc(var(--body-margin-height) / 2); }

		@media screen and (max-width: 500px) {
			.image_left { float: none; width: 100%; padding-left: 0; }
		}


/* Specials
----------------------------------------------------------------------------------------------------*/


	/* Pagination
	------------------------------------------------------------------------------------------------------- */
	.pagination .page { display: inline-block; padding: 10px 20px; border: 1px solid var(--color-link); background: var(--color-link); color: var(--color-inverted-text); }
	.pagination .page.active, .page:hover { background: var(--color-text); border: 1px solid var(--color-text); color: var(--color-inverted-text); }

	/* Hide
	------------------------------------------------------------------------------------------------------- */
	.hidden, .hide { display: none; }
	.hide-text { font: 0/0 a; text-shadow: none; color: transparent; }

	/* Blockquote
	------------------------------------------------------------------------------------------------------- */
	blockquote { appearance: none; display: block; margin-top: var(--body-margin-height); background: var(--color-block-background); padding: var(--body-margin-height); text-align: center; }
		blockquote p { font-family: var(--font-title-family); font-size: var(--font-size); line-height: var(--font-line-height); }
		blockquote cite { font-style: italic; }

	/* Tags
	------------------------------------------------------------------------------------------------------- */
	a.tag { background: #999; padding: 3px 5px; white-space: nowrap; border-radius: var(--border-radius); border-bottom: none!important; color: white; }
	a:hover.tag { background: var(--color-link); }

	/* Alignement
	------------------------------------------------------------------------------------------------------- */
	.align_right { text-align: right; }
	.align_left { text-align: left; }
	.align_center, .center { text-align: center; }

	/* Hyphen
	------------------------------------------------------------------------------------------------------- */
	.hyphen{ hyphens:auto; hyphenate-limit-chars: 6 3 3; hyphenate-limit-lines: 2; hyphenate-limit-last: always; hyphenate-limit-zone: 8%; }

	/* Text Styles
	------------------------------------------------------------------------------------------------------- */
	.uppercase {text-transform: uppercase;}
	.small { font-size: var(--font-small-size); line-height: var(--font-small-line-height); }
	.ident { padding-left: 15px; }

	/* Margin Top Classes
	------------------------------------------------------------------------------------------------------- */
	.margin_top {margin-top: var(--body-margin-height);}
	.tiny_margin_top {margin-top: calc(var(--body-margin-height) / 3);}
	.small_margin_top {margin-top: calc(var(--body-margin-height) / 2);}
	.big_margin_top {margin-top: calc(var(--body-margin-height) * 2);}
	.very_big_margin_top {margin-top: calc(var(--body-margin-height) * 3);}
	.medium_margin_top {margin-top: calc(var(--body-margin-height) * 1.2);}
	.huge_margin_top {margin-top: calc(var(--body-margin-height) * 5);}
	.no_margin_top {margin-top: 0px!important;}

	.padding_top {padding-top: var(--body-margin-height);}
	.tiny_padding_top {padding-top: calc(var(--body-margin-height) / 3);}
	.small_padding_top {padding-top: calc(var(--body-margin-height) / 2);}
	.big_padding_top {padding-top: calc(var(--body-margin-height) * 2);}
	.very_big_padding_top {padding-top: calc(var(--body-margin-height) * 3);}
	.medium_padding_top {padding-top: calc(var(--body-margin-height) * 1.2);}
	.huge_padding_top {padding-top: calc(var(--body-margin-height) * 5);}
	.no_padding_top {padding-top: 0px!important;}


	/* Margin Bottom Classes
	------------------------------------------------------------------------------------------------------- */
	.margin_btm {margin-bottom: var(--body-margin-height);}
	.tiny_margin_btm {margin-bottom: calc(var(--body-margin-height) / 3);}
	.small_margin_btm {margin-bottom: calc(var(--body-margin-height) / 2);}
	.big_margin_btm {margin-bottom: calc(var(--body-margin-height) * 2);}
	.very_big_margin_btm {margin-bottom: calc(var(--body-margin-height) * 3);}
	.medium_margin_btm {margin-bottom: calc(var(--body-margin-height) * 1.2);}
	.huge_margin_btm {margin-bottom: calc(var(--body-margin-height) * 5);}
	.no_margin_btm {margin-bottom: 0px!important;}

	.padding_btm {padding-bottom: var(--body-margin-height);}
	.tiny_padding_btm {padding-bottom: calc(var(--body-margin-height) / 3);}
	.small_padding_btm {padding-bottom: calc(var(--body-margin-height) / 2);}
	.big_padding_btm {padding-bottom: calc(var(--body-margin-height) * 2);}
	.very_big_padding_btm {padding-bottom: calc(var(--body-margin-height) * 3);}
	.medium_padding_btm {padding-bottom: calc(var(--body-margin-height) * 1.2);}
	.huge_padding_btm {padding-bottom: calc(var(--body-margin-height) * 5);}
	.no_padding_btm {padding-bottom: 0px!important;}

	/* Clear Floated Elements
	----------------------------------------------------------------------------------------------------*/
	.clearfix::after { clear: both; content: ""; display: table; }


	/* Truncate Text
	----------------------------------------------------------------------------------------------------*/
	.ellipsis  { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; }
	.no_wrap { white-space: nowrap; }

	a.modalbox_edit, a.admin_link { color : var(--color-inverted-text)!important; background: #999!important; font-size: 11px; padding: 2px 6px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; /* future proofing */ -khtml-border-radius: 3px; /* for old Konqueror browsers */ text-decoration: none;}
	a:hover.modalbox_edit, a:hover.admin_link { color : var(--color-inverted-text); background: #333!important; text-decoration: none;}


	/* Forms
	------------------------------------------------------------------------------------------------------- */
	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="url"],
	input[type="date"],
	input[type="month"],
	input[type="time"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="week"],
	input[type="number"],
	input[type="search"],
	input[type="tel"],
	input[type="color"],
	select,
	textarea {
		display: inline-block;
		padding: var(--input-padding);
		border: var(--input-border);
		border-radius: var(--input-border-radius);
		background: var(--input-background-color);
		vertical-align: middle;
		font-size: var(--font-size); line-height: var(--body-line-height); font-family: var(--font-regular-family); color: var(--color-text); font-weight: normal;
		width: 100%;
		appearance: none;
		box-sizing: border-box
	}

	/* Style the Placeholder */
	input::-webkit-input-placeholder, input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder { font-size: var(--body-font-size); line-height: var(--font-line-height); font-family: var(--font-regular-family); color: var(--color-text); font-weight: normal; }

	/*
	Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
	since IE8 won't execute CSS that contains a CSS3 selector.
	*/
	input:not([type]) { display: inline-block; padding: var(--input-padding); border: var(--input-border); border-radius: var(--input-border-radius); appearance: none; box-sizing: border-box }


	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	input[type="url"]:focus,
	input[type="date"]:focus,
	input[type="month"]:focus,
	input[type="time"]:focus,
	input[type="datetime"]:focus,
	input[type="datetime-local"]:focus,
	input[type="week"]:focus,
	input[type="number"]:focus,
	input[type="search"]:focus,
	input[type="tel"]:focus,
	input[type="color"]:focus,
	select:focus,
	textarea:focus {
		outline: 0;
		border-color: var(--input-border-color);
	}


	input[type="file"]:focus,
	input[type="radio"]:focus,
	input[type="checkbox"]:focus {
		outline: 0;
		border-color: var(--input-border-color);
	}

	input[type="checkbox"],
	input[type="radio"] {
		margin-right: 11px;
		display: inline-block;
	}

	input[type="text"][disabled],
	input[type="password"][disabled],
	input[type="email"][disabled],
	input[type="url"][disabled],
	input[type="date"][disabled],
	input[type="month"][disabled],
	input[type="time"][disabled],
	input[type="datetime"][disabled],
	input[type="datetime-local"][disabled],
	input[type="week"][disabled],
	input[type="number"][disabled],
	input[type="search"][disabled],
	input[type="tel"][disabled],
	input[type="color"][disabled],
	select[disabled],
	textarea[disabled] {
		cursor: not-allowed;
		background-color: var(--input-border-color);
		color: #333;
	}

	input[type="submit"]:disabled {
		background: gray!important;
		color: #b3b3b3!important;
		cursor: not-allowed!important;
	}

	input:focus:invalid,
	textarea:focus:invalid,
	select:focus:invalid {
	}

	input[type="file"]:focus:invalid:focus,
	input[type="radio"]:focus:invalid:focus,
	input[type="checkbox"]:focus:invalid:focus {

	}

	/* don't display IE's own arrow! */
	select::-ms-expand {
		display: none;
	}

	select {
		font-size: var(--font-size);
		line-height: var(--font-line-height);
		font-family: var(--font-regular-family);
		color: var(--color-text);
		font-weight: normal;
		border: var(--input-border);
		width: 100%;
		max-width: 100%;
		height: auto;

		padding: var(--select-padding);
		padding-right: 30px;

		background: url(/assets/images/arrows/arrow-down.svg) no-repeat calc(100% - 10px) center var(--input-background-color);
		background-size: 14px;
	}

	select[multiple] {
		height: auto;
	}

	input[type="date"] { }

	input[type="checkbox"], input[type="radio"] {
		accent-color: var(--color-text);
	}