@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600&display=swap');

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

blockquote, input, textarea, button, select, ul, ol, li, h1, h2, h3, a, p, q {
	background-color: transparent;
	color: inherit;
	margin: 0;
	outline: none;
	padding: 0;
	text-decoration: none;
}

:root {
	--font-family: 'Archivo', sans-serif;
	--font-family--quote: 'Times', serif;
	--font-size: max(20px, calc(1rem + 0.25vw));
	--font-size--h1: calc( var(--font-size) * 2 );
	--font-size--h2: calc( var(--font-size) * 1.75 );
	--font-size--h3: calc( var(--font-size) * 1.5 );
	--font-size--lead: calc( var(--font-size) * 1.2 );
	--font-size--quote: calc( var(--font-size) * 2 );
	--font-size--footer: calc( var(--font-size) * 0.8 );
	--font-line-height: calc( var(--font-size) * 1.3 );
	--max-content-width: max(800px, 45vw);
	--padding--layout-top: 50px;
	--padding--layout-left: 50px;
	--padding--content-gap: 30px;
	--color-href--normal: #ba3a35;
	--color-href--hover: #851e1e;
	--color-red: #ba3a35;
	--color-brown: #dad0c1;
	--color-green: #5f6433;
	--color-green-footer: #606437;
	--cms--spacer: 500px;
}

html, body {
	font-family: var(--font-family);
	font-size: var(--font-size);
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	width: 100%;
}

body {
	display: flex;
	flex-direction: column;
	height: fit-content;
	overflow-anchor: none;
	min-height: 100vh;
	height: 100%;
	align-items: start;
}

a {
	cursor: pointer;
}

img {
	max-width: 100%;
	max-height: 100%;
}

picture {
	display: block;
}

strong {
	font-weight: 600;
}

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

.align-center {
	align-items: center;
	justify-items: center;
	display: flex;
	flex-direction: column;
	width: 100%;
}

q::before, q::after {
	content: '';
}

/* --- Header --- */

.header-wrapper {
	background-color: var(--color-brown);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: relative;
	width: 100vw;
	height: fit-content;
}

.header-start,
.header-image {
	height: 100vh;
}

.header-start--video {
	align-items: center;
	display: flex;
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
	text-align: center;
	justify-content: center;
}

.header-start--video video {
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.header-start--batch {
	bottom: -65px;
	right: 200px;
	position: absolute;
	width: 250px;
	z-index: 100;
}

.banner-wrapper {
	background-color: var(--color-brown);
	color: var(--color-green);
	position: relative;
	width: 100%;
}

.banner-inner {
	margin: 0 auto;
	max-width: var(--max-content-width);
	padding: var(--padding--layout-top) var(--padding--layout-left);
}

.header-image img {
	object-fit: cover;
	height: 100vh;
	width: 100vw;
}

/* --- Menu --- */

.menu-wrapper--screen {
	color: white;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 20px;
	padding: var(--padding--layout-top) var(--padding--layout-left);
	position: absolute;
	top: 0;
	width: 100%;
	transition: all 0.5s;
	z-index: 200;
}

.menu-wrapper--screen .menu-logo img {
	width: max(200px, 1vw);
}

.menu-wrapper--screen-shrink {
	background-color: var(--color-green);
	padding: calc( var(--padding--layout-left) / 2 ) var(--padding--layout-left);
	position: fixed;
	z-index: 200;
}

.menu-wrapper--screen-shrink .menu-logo img {
	width: max(150px, 1vw);
}

.menu-wrapper--mobile {
	background-color: var(--color-green);
}

.menu-icon-mobile {
	align-items: flex-start;
	justify-content: right;
	display: none;
	cursor: pointer;
	width: 50px;
	z-index: 900;
}

.menu-icon-mobile img {
	width: 35px;
	z-index: 900;
}

.menu-nav {
	align-items: center;
	display: flex;
	justify-content: flex-end;
}

.menu-nav ul {
	cursor: pointer;
	list-style: none;
}

.menu-nav li {
	position: relative;
}

.menu-nav ul.nav-first {
	align-items: left;
	display: flex;
	column-gap: 10px;
}

.menu-nav ul.nav-first > li a {
	padding: 20px;
}

.menu-nav ul.nav-first > li {
	align-items: center;
	border-top-right-radius: 2px;
	border-top-left-radius: 2px;
	font-weight: 600;
	display: flex;
}

.menu-nav ul.nav-first li:not(.menu-icon-insta):hover {
	background-color: var(--color-red);
	color: white;
}

.menu-icon-insta:hover {
	filter: brightness(0) saturate(100%) invert(24%) sepia(49%) saturate(2695%) hue-rotate(339deg) brightness(98%) contrast(86%);
}

.menu-nav ul.nav-first li:hover ul {
	border-top-right-radius: 2px;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	background-color: var(--color-red);
	visibility: visible;
}

.menu-nav ul.nav-second {
	display: flex;
	flex-direction: column;
	gap: 7.5px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	position: absolute;
	left: 0;
	top: 65px;
	visibility: hidden;
	white-space: nowrap;
	z-index: 150;
}

.menu-nav ul.nav-second li {
	position: relative;
}

.menu-nav ul.nav-second li a {
	display: inline-block;
	padding: 0 20px;
	width: 100%;
}

.menu-nav ul.nav-second > li {
	font-weight: 400;
}

.menu-nav li.selected {
	color: var(--color-green);
	background-color: white;
	border-radius: 2px;
}

/* --- Menu Overlay --- */

.freeze-scroll {
	/* .freeze-scroll ist notwendig, damit der Scroll-Effekt auf dem Inhalt blockiert wird, sobald das Overlay Menu offen ist.
	Diese Class wird via jQuery auf den body-Tag vergeben und wieder entfernt. */
	overflow: hidden;
}

.menu-overlay--wrapper {
	background-color: var(--color-green);
	display: none;
	position: fixed;
	width: 100vw;
	height: 100vh;
	overflow: scroll;
	z-index: 900;
}

.menu-overlay--icon {
	position: fixed;
	top: var(--padding--layout-top);
	right: var(--padding--layout-left);
}

.menu-overlay--content {
	color: white;
	text-align: center;
	padding-top: calc(var(--padding--layout-top) * 3);
	padding-left: var(--padding--layout-left);
	padding-right: var(--padding--layout-left);
	padding-bottom: var(--padding--layout-top);
}

.menu-overlay ul {
	cursor: pointer;
	list-style: none;
	line-height: calc( var(--font-line-height) * 0.9);
}

li.nav-overlay--first {
	font-size: calc( var(--font-size) * 1.5 );
	font-weight: 600;
	padding-bottom: 50px;
}

.nav-overlay--second-wrapper {
	padding-top: 10px;
}

li.nav-overlay--second {
	font-size: calc( var(--font-size) * 1.25 );
	font-weight: 100;
	margin: 10px 0;
}

/* --- Content --- */

.content-wrapper {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

.content-inner {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--padding--content-gap);
	margin: 0 auto;
	max-width: var(--max-content-width);
	padding: calc( var(--padding--layout-top) * 1.5 ) var(--padding--layout-left);
	width: 100%;
	height: 100%;
}

.content-inner--without-image {
	padding-top: 225px;
}

.content-inner--page {
	padding-top: 175px;
}

.content--error-404 {
	align-items: center;
	display: flex;
	justify-content: center;
}

/* --- Footer --- */

.footer-wrapper {
	background-color: var(--color-green-footer);
	color: white;
	flex-shrink: 0;
	font-size: var(--font-size--footer);
	line-height: calc( var(--font-size--footer) * 1.25 );
	width: 100%;
}

.footer-inner {
	display: grid;
	gap: var(--padding--content-gap);
	grid-template-columns: 1fr 1fr auto;
	margin: 0 auto;
	max-width: var(--max-content-width);
	padding: var(--padding--layout-top) var(--padding--layout-left);
	width: 100%;
}

.footer-inner strong {
	display: block;
	margin-bottom: 15px;
}

.footer-inner--right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: right;
}

.footer-inner--right img {
	width: max(150px, 2vw);
}

.footer-inner--right div {
	align-content: flex-end;
	display: flex;
	flex-direction: column;
}

/* --- News --- */

.news-wrapper {
	max-width: var(--max-content-width);
	margin-bottom: var(--padding--layout-top);
}

.news-grid {
	display: flex;
	flex-direction: column;
	gap: var(--padding--layout-top);
}

.news--main-title {
	font-size: var(--font-size--h3);
	color: var(--color-red);
	font-weight: 600;
}

.news-grid--inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: var(--padding--content-gap);
}

.news-grid--right {
	display: flex;
	flex-direction: column;
	gap: calc(var(--padding--content-gap) / 2);
}

.news-grid--title {
	color: var(--color-green);
	font-size: var(--font-size--h3);
	font-weight: 600;
	line-height: var(--font-size--h3);
}

.news-grid--text {
	line-height: var(--font-line-height);
}

/* --- Events Startpage --- */

.events-wrapper {
	background-color: var(--color-brown);
	width: 100%;
	padding-bottom: 25px;
}

.events-wrapper .dot {
	width: 12px;
	height: 12px;
	opacity: 1;
	background: white;
}

.events-wrapper .dot.is-selected {
	background: var(--color-green);
}

.events-flex {
	display: flex;
	flex-direction: column;
	gap: var(--padding--layout-top);
	max-width: calc( var(--max-content-width) / 1.25);
	margin: 0 auto;
	padding: var(--padding--layout-top);
}

.events--main-title {
	color: var(--color-red);
	font-size: var(--font-size--h3);
	font-weight: 600;
}

.events-inner {
  margin: 0 auto;
	align-content: center;
	width: 75%;
	padding-bottom: calc(var(--padding--layout-top) / 2);
}

.events-element {
	align-items: center;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: calc(var(--padding--content-gap) / 2);
}

.events-element--title {
	color: var(--color-green);
	font-size: var(--font-size--h3);
	font-weight: 600;
}

.events-element--text {
	line-height: var(--font-line-height);
	padding-bottom: 25px;
}

.events-element--button {
	background-color: var(--color-green);
	font-size: calc(var(--font-size) * 0.8);
	color: var(--color-brown);
	margin-top: 20px;
	padding: 5px 10px;
}

/* --- Agenda --- */

.agenda {
	display: flex;
	flex-direction: column;
	gap: calc( var(--padding--content-gap) );
}

.agenda--group {
	border-top: 1px solid black;
}

.agenda--group + h2 {
	margin-top: var(--padding--layout-top);
}

.agenda--elem {
	border-bottom: 1px solid black;
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: var(--padding--layout-left);
	padding: calc( var(--padding--layout-top) / 2 ) 0;
}

.agenda--right {
	display: flex;
	flex-direction: column;
	gap: calc( var(--padding--content-gap) / 2 );
}

.agenda--day {
	font-weight: 600;
	font-size: calc( var(--font-size) * 0.8 );
	text-align: center;
	padding-bottom: 10px;
}

.agenda--date {
	font-weight: 600;
	font-size: calc( var(--font-size) * 3 );
	text-align: center;
	line-height: calc( var(--font-size) * 2);
}

.agenda--title {
	color: var(--color-green);
	font-size: var(--font-size--h3);
	font-weight: 600;
	line-height: var(--font-size--h3);
}

.agenda--time {
	font-weight: 600;
}

/* --- Slideshow --- */

.slideshow-wrapper {
	position: relative;
	left: -10%;
	width: 120%;
	height: 100%;
}

.slideshow-wrapper .flickity-page-dots {
	bottom: 25px;
}

.slideshow-wrapper .dot {
	width: 12px;
	height: 12px;
	opacity: 1;
	background: white;
}

.slideshow-wrapper .dot.is-selected {
	background: var(--color-green);
}

/* --- Map --- */

.map-wrapper {
	width: 100%;
}

.map-wrapper iframe {
	filter: grayscale(1);
	display: block;
}

/* --- Responsive --- */

@media screen and (orientation:portrait) {

}

@media (pointer: coarse) {

	@media (orientation : landscape) {}

}

@media only screen and (max-width: 1200px) {

	:root {
		--padding--layout-left: 20px;
		--padding--layout-top: 35px;
	}

	.menu-nav {
		display: none;
	}

	.menu-wrapper--screen .menu-logo img {
		width: max(150px, 1vw);
	}

	.menu-wrapper--screen-shrink {
		padding: var(--padding--layout-left);
	}

	.menu-wrapper--screen-shrink .menu-logo img {
		width: max(100px, 1vw);
	}

	.menu-icon-mobile {
		display: flex;
	}

	.header-start--batch {
		bottom: -45px;
		right: var(--padding--layout-left);
		width: 150px;
	}

	.content-inner--without-image {
		padding-top: 175px;
	}

	.footer-inner--right {
		text-align: left;
	}

}

@media only screen and (max-width: 725px) {

	.cms-grid-1-1,
	.cms-grid-1-2,
	.cms-grid-2-1,
	.form-grid-1-1,
	.form-grid-1-2,
	.form-grid-2-1 {
		grid-template-columns: none;
	}

	.news-grid--inner {
		display: flex;
		flex-direction: column;
		gap: var(--padding--content-gap);
	}

	.events-inner {
		width: 100%;
	}

	.footer-inner {
		display: flex;
		flex-direction: column;
	}

	picture,
	.slideshow-wrapper {
		width: 100%;
		left: 0;
	}

}