@font-face {
	font-family: Roboto-Slab;
	src: url(/assets/fonts/RobotoSlab-VariableFont_wght.ttf)
}

@font-face {
	font-family: Open-Sans;
	src: url(/assets/fonts/OpenSans-VariableFont_wdth,wght.ttf)
}

:root {
	--section-height: 90vh;
	--nav-width: 7rem;
	font-weight: 400;
	color: #efefef
}

@supports (height: 90dvh) {
	:root {
		--section-height: 90dvh
	}
}

@media (max-width: 550px) {
	:root {
		--nav-width: 3rem;
		font-size: 16px
	}
}

@media (min-width: 551px) {
	:root {
		--nav-width: 5rem;
		font-size: 18px
	}
}

@media (min-width: 850px) {
	:root {
		--nav-width: 7rem;
		font-size: 20px
	}
}

* {
	font-family: Roboto-Slab
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0
}

h1 {
	font-size: 2rem
}

h2 {
	font-size: 1.5rem
}

h3 {
	font-size: 1rem
}

button {
	padding: .5rem 2rem;
	font-size: 1rem;
	border-radius: 3rem;
	border: none;
	background-color: #f37d29;
	color: #efefef;
	transition: all ease .5s;
	cursor: pointer;
	box-shadow: #7c3807 0 5px;
	translate: 0px 0px
}

button:hover,
button:focus-visible {
	box-shadow: #7c3807 0 1px;
	translate: 0px 4px;
	background-color: #f69a59
}

@media (max-width: 550px) {
	button {
		padding: .5rem 1.5rem
	}
}

nav {
	position: fixed;
	right: 1rem;
	top: 1rem;
	z-index: 10;
	mix-blend-mode: difference
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0
}

@media (max-width: 550px) {
	nav ul {
		text-align: end
	}
}

nav ul li {
	display: inline-block
}

@media (max-width: 550px) {
	nav ul li {
		display: block
	}
}

nav ul li a {
	padding: 0 .5rem;
	text-decoration: none;
	color: #efefef;
	transition: font-weight ease .5s
}

nav ul li a:hover,
nav ul li a:focus-visible {
	font-weight: 200
}

section {
	background-color: #1a1a1f;
	display: grid;
	grid-template-areas: "nav . content ."
}

@media (max-width: 550px) {
	section {
		grid-template-columns: var(--nav-width) 1rem auto 1rem
	}
}

@media (min-width: 551px) {
	section {
		grid-template-columns: var(--nav-width) 1rem auto 1rem
	}
}

@media (min-width: 850px) {
	section {
		grid-template-columns: var(--nav-width) minmax(4rem, 1fr) minmax(auto, 70%) minmax(4rem, 1fr)
	}
}

section:nth-of-type(2n) {
	background-color: #efefef
}

section:nth-of-type(2n) p,
section:nth-of-type(2n) h1,
section:nth-of-type(2n) h2,
section:nth-of-type(2n) h3,
section:nth-of-type(2n) h4,
section:nth-of-type(2n) h5 {
	color: #1a1a1f
}

section:nth-of-type(2n) aside:before {
	background-color: #1a1a1f
}

section:nth-of-type(2n) .selfie {
	max-width: 100%;
	border-radius: 1rem;
	box-sizing: border-box;
	border: 5px solid #1a1a1f
}

aside {
	grid-area: nav;
	width: var(--nav-width);
	height: 100%;
	position: relative
}

aside p {
	text-wrap: nowrap;
	margin: 0;
	position: sticky;
	top: 0;
	text-decoration: none;
	text-transform: uppercase;
	cursor: default;
	font-weight: 800;
	color: #efefef;
	display: inline-block;
	transform-origin: top left;
	transition: font-weight .5s ease
}

@media (max-width: 550px) {
	aside p {
		font-size: 1.5rem;
		transform: rotate(-90deg) translate(calc(-100% - 1rem), 30%)
	}
}

@media (min-width: 551px) {
	aside p {
		font-size: 2rem;
		transform: rotate(-90deg) translate(calc(-100% - 1rem), 50%)
	}
}

@media (min-width: 850px) {
	aside p {
		font-size: 3rem
	}
}

aside p:hover {
	font-weight: 400
}

aside:before {
	position: absolute;
	content: " ";
	background-color: #efefef;
	height: 100%;
	width: .75rem;
	right: 0
}

@media (max-width: 550px) {
	aside:before {
		width: .5rem
	}
}

.content {
	grid-area: content;
	display: grid;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	min-height: var(--section-height);
	padding: 1rem 0
}

@media (min-width: 850px) {
	.content {
		padding: 4rem 0
	}
}

.column-container {
	grid-template-columns: 1fr 1fr;
	gap: 1rem
}

@media (max-width: 550px) {
	.column-container {
		grid-template-columns: 1fr
	}
}

#home .content {
	place-items: center
}

#home h1 {
	color: #f37d29;
	text-transform: uppercase;
	line-height: 1em;
	margin-bottom: 0
}

@media (max-width: 550px) {
	#home h1 {
		font-size: 2rem
	}
}

@media (min-width: 551px) {
	#home h1 {
		font-size: 3rem
	}
}

@media (min-width: 850px) {
	#home h1 {
		font-size: 5rem
	}
}

#home .spacing {
	display: flex;
	justify-content: space-between
}

#home .subheadline {
	font-size: 1.75rem
}

@media (min-width: 551px) {
	#home .subheadline {
		font-size: 1.3rem
	}
}

@media (max-width: 550px) {
	#home .subheadline {
		font-size: 1rem
	}
}

#ofgcertWrapper {
	position: absolute;
	right: -.5rem;
	transform-origin: bottom right
}

@media (max-width: 550px) {
	#ofgcertWrapper {
		scale: .5;
		bottom: 1rem
	}
}

@media (min-width: 551px) {
	#ofgcertWrapper {
		scale: .75;
		bottom: .1rem
	}
}

@media (min-width: 850px) {
	#ofgcertWrapper {
		scale: 1;
		bottom: 3.1rem
	}
}

#gallery {
	contain: paint
}

#gallery #galleryContent {
	max-height: 500vh;
	transition: max-height ease .5s;
	display: grid;
	grid-auto-flow: dense;
	gap: 1rem;
	padding-bottom: 4.7rem
}

@media (max-width: 550px) {
	#gallery #galleryContent {
		grid-auto-rows: min-content
	}
}

@media (min-width: 551px) {
	#gallery #galleryContent {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		grid-auto-rows: 200px
	}
}

@media (min-width: 850px) {
	#gallery #galleryContent {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		grid-auto-rows: 30vw
	}
}

@media (min-width: 1200px) {
	#gallery #galleryContent {
		grid-auto-rows: 20vw
	}
}

@media (min-width: 1800px) {
	#gallery #galleryContent {
		grid-auto-rows: 15vw
	}
}

#gallery #galleryContent button.hidden~#galleryContent {
	padding-bottom: 4rem
}

#gallery #galleryContent:after {
	position: absolute;
	content: " ";
	bottom: 0;
	width: 100%;
	height: 0rem;
	z-index: 5;
	transition: height ease .5s;
	background-color: #1a1a1f
}

#gallery #galleryContent:nth-child(2n):after {
	background-color: #efefef
}

#gallery #galleryContent.collapsed {
	max-height: var(--section-height)
}

#gallery #galleryContent.collapsed:after {
	height: 4.25rem
}

.galleryItem {
	margin: 0;
	width: 100%;
	height: 100%;
	border-radius: 1rem;
	display: grid;
	place-items: center;
	grid-template-areas: "stack";
	overflow: hidden;
	position: relative;
	cursor: pointer
}

@media (max-width: 550px) {
	.galleryItem {
		min-width: auto
	}
}

@media (min-width: 551px) {
	.galleryItem {
		min-width: 150px
	}
}

@media (min-width: 850px) {
	.galleryItem {
		min-width: 200px
	}
}

.galleryItem.tall {
	grid-row: span 2
}

.galleryItem.wide {
	grid-column: span 2
}

@media (max-width: 550px) {

	.galleryItem.tall,
	.galleryItem.wide {
		grid-column: auto;
		max-height: none
	}
}

.galleryItem p,
.galleryItem a {
	display: none
}

.galleryItem * {
	grid-area: stack
}

.galleryItem:hover figcaption {
	translate: 0px 0px
}

.galleryItem:hover img.galleryImg {
	scale: 1.1
}

.galleryItem .galleryImg {
	height: 100%;
	width: 100%;
	position: absolute;
	object-fit: cover;
	object-position: center center;
	transition: scale ease .5s
}

@media (max-width: 550px) {
	.galleryItem .galleryImg {
		position: relative;
		object-fit: contain
	}
}

.galleryItem figcaption {
	padding: .5rem;
	width: 100%;
	background-color: #1a1a1f80;
	color: #efefef;
	position: absolute;
	bottom: 0;
	z-index: 2;
	text-align: center;
	translate: 0px 100%;
	transition: translate ease .5s;
	box-sizing: border-box
}

.galleryItem.viewImage {
	border-radius: 0;
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: center;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 7rem;
	z-index: 100;
	max-height: 100%;
	box-sizing: border-box;
	background-color: #1a1a1fe6
}

.galleryItem.viewImage:hover .galleryImg {
	scale: 1
}

.galleryItem.viewImage:before {
	position: absolute;
	content: " ";
	content: "X";
	z-index: 10;
	top: 2rem;
	right: 2rem;
	color: #efefef;
	font-size: 2rem
}

.galleryItem.viewImage .galleryImg {
	object-fit: contain;
	position: relative;
	max-width: 100%;
	max-height: 100%;
	height: auto !important;
	width: auto !important
}

.galleryItem.viewImage video.galleryImg {
	cursor: auto
}

.galleryItem.viewImage figcaption {
	padding-top: .8rem;
	background-color: transparent;
	translate: none;
	position: relative;
	font-size: 1.25rem;
	font-weight: 700
}

.galleryItem.viewImage p,
.galleryItem.viewImage a {
	display: block;
	color: #efefef;
	grid-area: description;
	max-width: 50%
}

@media (max-width: 550px) {

	.galleryItem.viewImage p,
	.galleryItem.viewImage a {
		max-width: none
	}
}

@media (max-width: 550px) {
	.galleryItem.viewImage {
		padding: 1rem
	}
}

.toggleMore {
	z-index: 10;
	bottom: 1rem;
	position: absolute;
	left: 50%;
	white-space: nowrap;
	padding: .5rem 2rem;
	font-size: 1rem;
	border-radius: 3rem;
	border: none;
	background-color: #f37d29;
	color: #efefef;
	transition: all ease .5s;
	cursor: pointer;
	box-shadow: #7c3807 0 5px;
	translate: 0px 0px
}

.toggleMore:hover,
.toggleMore:focus-visible {
	box-shadow: #7c3807 0 1px;
	translate: 0px 4px;
	background-color: #f69a59
}

@media (max-width: 550px) {
	.toggleMore {
		padding: .5rem 1.5rem
	}
}

.toggleMore {
	translate: -50% 0px
}

.toggleMore:hover,
.toggleMore:focus-visible {
	translate: -50% 4px
}

.toggleMore.hidden {
	display: none
}

#contact .content {
	min-height: auto
}

#contact .content form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem
}

@media (max-width: 550px) {
	#contact .content form {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(5, auto);
		grid-gap: 1rem
	}

	#contact .content form .pflichtfelder {
		grid-row: -1
	}
}

#contact .content form .formGroup {
	display: grid;
	gap: .5rem
}

#contact .content form .formGroup.fullwidth {
	grid-column: 1/-1
}

@media (max-width: 550px) {
	#contact .content form .formGroup {
		gap: .25rem
	}

	#contact .content form .formGroup.fullwidth {
		grid-column: auto
	}
}

#contact .content form .formGroup input,
#contact .content form .formGroup textarea {
	height: 2rem;
	padding: .25rem;
	outline: rgb(251.1238938053, 213.0088495575, 185.8761061947) 1px solid;
	transition: outline ease .5s;
	border: none;
	border-radius: .25rem
}

#contact .content form .formGroup input:focus,
#contact .content form .formGroup textarea:focus {
	outline: #f37d29 1px solid
}

#contact .content form .formGroup textarea {
	height: 10rem;
	resize: none
}

#contact .content form .submit {
	height: auto;
	grid-column-start: 2;
	padding: .5rem 2rem;
	font-size: 1rem;
	border-radius: 3rem;
	border: none;
	background-color: #f37d29;
	color: #efefef;
	transition: all ease .5s;
	cursor: pointer;
	box-shadow: #7c3807 0 5px;
	translate: 0px 0px
}

#contact .content form .submit:hover,
#contact .content form .submit:focus-visible {
	box-shadow: #7c3807 0 1px;
	translate: 0px 4px;
	background-color: #f69a59
}

@media (max-width: 550px) {
	#contact .content form .submit {
		padding: .5rem 1.5rem
	}
}

@media (max-width: 550px) {
	#contact .content form .submit {
		grid-column: auto
	}
}

.dropdownItem {
	cursor: pointer
}

.dropdownItem .dropdownTitle {
	display: flex;
	gap: 1rem;
	align-items: center;
	-webkit-user-select: none;
	user-select: none
}

.dropdownItem .dropdownTitle img {
	width: 4rem;
	height: auto;
	border-radius: .5rem
}

.dropdownItem .dropdownContent {
	max-height: 0;
	overflow: hidden;
	transition: max-height ease .1s
}

.dropdownItem .dropdownContent h3 {
	padding-left: 5rem;
	-webkit-user-select: none;
	user-select: none
}

.dropdownItem .dropdownContent img~h3 {
	padding-left: 0
}

.dropdownItem.activeDropdown .dropdownContent {
	max-height: 1000px;
	transition: max-height ease .5s
}

#impressum div p,
#impressum div li {
	font-family: Open-Sans;
	font-weight: 200;
	font-size: .85rem
}

#impressum div a {
	color: currentColor
}