/* ========== Definition: Schriftarten --- START ========== */

@font-face {
	font-family: "Metropolis";
	src: url("../webfonts/Metropolis-Regular.otf?20230221T205000") format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Metropolis";
	src: url("../webfonts/Metropolis-Medium.otf?20230221T205000") format("opentype");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "Domine";
	src: url("../webfonts/Domine-Regular.ttf?20230221T205000") format("truetype");
	font-weight: normal;
	font-style: normal;
}

/* ========== Definition: Schriftarten --- ENDE ========== */

/* ========== Definition: Hintergrund --- START ========== */

html {
	height: auto;
	min-height: 100vh;
	background-color: #111111;
}

#mainContent {
	background: url(../img/bg_sm.jpg?20230221T205000) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* ========== Definition: Hintergrund --- ENDE ========== */

body {
	font-family: "Metropolis", sans-serif;
	color: #CDCDCD;
	padding: 1.75em;
	height: 100%;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

nav {
	position: fixed;
	display: inline-block;
	cursor: pointer;
	z-index: 501;
	color: #888888;
}

nav .nav__iconWrapper {
	font-size: 1.25em;
	width: 1.75em;
	height: 1.75em;
	line-height: 1.75em;
	text-align: center;
	margin-right: 0.5em;
	border: 1px solid #888888;
	position: relative;
	float: left;
}

.nav__iconLinkWrapper,
.nav__iconLinkWrapper:visited,
.nav__iconLinkWrapper:active,
.nav__iconLinkWrapper:focus,
.nav__iconLinkWrapper:hover {
	color: #888888;
	display: block;
}

nav .nav__iconWrapper .nav__icon,
nav .nav__iconWrapper .nav__icon::before,
nav .nav__iconWrapper .nav__icon::after {
	background: #FF0000;
	content: '';
	display: block;
	height: 0.075em;
	position: absolute;
	transition: background ease .3s, top ease .3s .3s, transform ease .3s;
	width: 1.25em;
}

nav .nav__iconWrapper .nav__icon {
	left: 0.25em;
	top: 0.837em;
}

nav .nav__iconWrapper .nav__icon::before {
	top: -0.35em;
}

nav .nav__iconWrapper .nav__icon::after {
	top: 0.35em;
}

nav.closeIt .nav__iconWrapper .nav__icon {
	background: transparent;
}

nav.closeIt .nav__iconWrapper .nav__icon::before {
	transform: rotate(45deg);
}

nav.closeIt .nav__iconWrapper .nav__icon::after {
	transform: rotate(-45deg);
}

nav.closeIt .nav__iconWrapper .nav__icon::before,
nav.closeIt .nav__iconWrapper .nav__icon::after {
	top: 0;
	transition: top ease .3s, transform ease .3s .3s;
}

nav .nav__iconWrapper .nav__icon--back {
	cursor: pointer;
	width: 0.75em;
	height: 0.75em;
	border: solid #FF0000;
	border-width: 0 0.125em 0.125em 0;
	position: absolute;
	bottom: 50%;
	right: 25%;
	transform: translate(25%, 50%) rotate(135deg);
	-webkit-transform: translate(25%, 50%) rotate(135deg);
}

nav .nav__description {
	display: inline-block;
	line-height: 2.35em;
}

main {
	position: absolute;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	left: 0;
	top: 0;
	overflow: hidden;
}

.moreDetailsShown #mainContent {
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
}

.moreDetailsShown #detailContent {
	visibility: visible;
	-webkit-transition: visibility 0s 0s;
	transition: visibility 0s 0s;
}

.detail__contentWrapper {
	min-height: 100%;
	-webkit-overflow-scrolling: touch;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-transition: transform 0.7s cubic-bezier(0.86, 0.01, 0.77, 0.78);
	transition: transform 0.7s cubic-bezier(0.86, 0.01, 0.77, 0.78);
}

.moreDetailsShown .detail__contentWrapper {
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition: transform 0.5s cubic-bezier(0.82, 0.01, 0.77, 0.78);
	transition: transform 0.5s cubic-bezier(0.82, 0.01, 0.77, 0.78);
}

section {
	padding: 1.75em;
	height: 100%;
	min-height: 100vh;
	box-sizing: border-box;
}

#mainContent {
	position: relative;
	width: 100%;
	z-index: 101;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition: -webkit-transform 0.7s;
	transition: transform 0.7s;
	transition-timing-function: ease;
	-webkit-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
	transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
}

#detailContent {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	background-color: #111111;
	z-index: 100;
	visibility: hidden;
	-webkit-transition: visibility 0s 0.7s;
	transition: visibility 0s 0.7s;
}

.logo {
	width: 35%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
	border-right: 2px solid #888888;
}

.logo__img {
	width: 40em;
	max-width: 80%;
	transform: translate(50%, 50%);
	right: 50%;
	bottom: 50%;
	position: absolute;
}

.content--scrollable main {
	overflow: auto !important;
}

.content--scrollable .detail__contentWrapperInner {
	bottom: unset !important;
	transform: translateX(50%) !important;
}

.maininfo_container {
	width: calc(65% - 4em);
	position: relative;
	margin-left: 4em;
}

.maininfo {
	transform: translate(50%, 50%);
	right: 50%;
	bottom: 50%;
	position: absolute;
	width: 100%;
}

.maininfo_company {
	font-weight: bold;
	font-size: 1.25em;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	position: relative;
	padding-left: 3em;
}

.maininfo_company::before {
	content: "";
	display: block;
	background-color: #FF0000;
	width: 2.25em;
	height: 1px;
	position: absolute;
	left: 0;
	top: 47%;
}

.maininfo_headline {
	font-size: 3.5em;
	font-family: 'Domine';
	margin: 0.35em 0 0.5em;
	font-weight: normal;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	border: 0;
}

.maininfo_description p {
	font-size: 1.125em;
	line-height: 2em;
	color: #888888;
	margin: 0;
}

.maininfo_contactIcons {
	margin: 2em auto;
}

.detailInfo_facts_social>a,
.maininfo_contactIcons>a {
	color: #888888;
	text-decoration: none;
	font-size: 2em;
	transition: color 200ms linear;
}

.detailInfo_facts_social>a:hover>svg,
.detailInfo_facts_social>a:focus>svg,
.maininfo_contactIcons>a:hover>svg,
.maininfo_contactIcons>a:focus>svg {
	border-color: #FF0000;
	fill: #FF0000;
	color: #FF0000;
}

.maininfo_contactIcons>a:not(:first-of-type) {
	margin-left: 0.3em;
}

.maininfo_contactIcons>a:not(:last-of-type) {
	margin-right: 0.3em;
}

.detailInfo_facts_social>a>svg,
.maininfo_contactIcons>a>svg {
	width: 1.5em;
	height: 1.5em;
	border: 1px solid transparent;
	text-align: center;
	line-height: 1.5em;
	transition: border 200ms linear;
	fill: #888888;
	box-sizing: border-box;
	padding: 0.25em;
}

.maininfo_contactIcons > a.maininfo_contactIcons_meisterbetrieb > svg {
    padding: 0.15em;
}

.wordContainer {
	width: 100%;
	height: 1em;
	margin-bottom: 0;
	display: block;
}

.wordContainer+p {
	margin: 0;
}

.word {
	position: absolute;
	opacity: 0;
}

.letter {
	display: inline-block;
	position: relative;
	transform: translateZ(25px);
	transform-origin: 50% 50% 25px;
}

.letter.out {
	transform: rotateX(90deg);
	transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
	transform: rotateX(-90deg);
}

.letter.in {
	transform: rotateX(0deg);
	transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.centeredDemoMessage {
	position: absolute;
	right: 50%;
	bottom: 50%;
	transform: translate(50%, 50%);
	font-size: 3em;
}

.detail__contentWrapper {
	position: relative;
}


#detailContent.detailContent--only {
	visibility: visible;
	position: relative;
}

#detailContent.detailContent--only > .detail__contentWrapper {
	transform: unset;
}

#detailContent.detailContent--noRightBar .detailInfo_container {
    width: 100%;
}

.detail__contentWrapperInner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 94%;
	max-width: 1200px;
	position: absolute;
	right: 50%;
	bottom: 50%;
	transform: translate(50%, 50%);
}

.detailInfo_container {
	width: calc(66.66% - 2em);
}

.detailInfo_facts {
	width: calc(33.33% - 2em);
}

.detailInfo_facts h3 {
	color: #FF0000;
	font-weight: normal;
}

.detailInfo_container:before {
	content: "";
	display: block;
	background-color: #FF0000;
	width: 3em;
	top: 3.65em;
	height: 1px;
	position: absolute;
}

.detailInfo_imgOwner {
	max-width: 25%;
	float: left;
	margin: 0 1em 0.25em 0;
}

.detailInfo_container h3,
.detailInfo_container h4 {
	font-family: 'Domine';
	margin: 0.35em 0 0.5em;
	font-weight: normal;
	color: #FFF;
}

.detailInfo_container h3 {
	font-size: 4em;
	padding-left: 1.25em;
}

.detailInfo_container h4 {
	font-size: 2em;
}

.detailInfo_container h3>small {
	font-size: 0.45em;
}

.detailInfo_container p,
.detailInfo_container ul {
	font-size: 1em;
	line-height: 1.75em;
	color: #CDCDCD;
}

.detailInfo__imgContainer {
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.detailInfo__imgContainer .detailInfo__imgItem {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: calc(25% - 1em);
}

.detailInfo__imgContainer .detailInfo__imgItem > img {
	max-width: 100%;
	height: auto;
}

.detailInfo_facts {
	margin-top: 3em;
}

.detailInfo_facts>div {
	margin-bottom: 3em;
}

.detailInfo_facts h4 {
	color: #FF0000;
	font-size: 0.9em;
	font-weight: lighter;
	margin-bottom: 0.75em;
}

.detailInfo_facts a,
a.mailTelLink {
	color: #CDCDCD;
	text-decoration: none;
	line-height: 1.75em;
}

.detailInfo_facts .detailInfo_facts_social>a {
	display: inline-block;
	line-height: 0.5em;
	margin-right: 0.75em;
}

.detailInfo_facts .detailInfo_facts_conversation a,
.detailInfo_facts .detailInfo_facts_law a {
	display: block;
}

.detailInfo_facts a:hover,
.detailInfo_facts a:focus {
	text-decoration: underline;
}

a.detailInfo_button {
	text-align: center;
	border: 2px solid #888;
	position: relative;
	display: inline-block;
	padding: 0.75em 2em 0.5em;
	font-weight: 900;
	color: #FFF;
	text-decoration: none;
	margin: 1em 0.5em 1em 0;
	transition: all linear 250ms;
	box-sizing: border-box;
}

a.detailInfo_button:hover,
a.detailInfo_button:focus {
	background: #F00;
}

@media screen and (max-width: 568px) {
	#mainContent {
		-webkit-background-size: auto;
		-moz-background-size: auto;
		-o-background-size: auto;
		background-size: auto;
		background-repeat: repeat;
	}
}

@media screen and (min-width: 568px) and (max-width: 960px) {
	#mainContent {
		background-image: url(../img/bg_md.jpg?20230221T205000);
	}
}

@media screen and (min-width: 960px) and (max-width: 1920px) {
	#mainContent {
		background-image: url(../img/bg.jpg?20230221T205000);
	}
}

@media screen and (min-width: 1920px) and (max-width: 2560px) {
	#mainContent {
		background-image: url(../img/bg_xl.jpg?20230221T205000);
	}
}

@media screen and (min-width: 2560px) {
	#mainContent {
		background-image: url(../img/bg_xxl.jpg?20230221T205000);
	}
}

@media screen and (max-width: 1450px) {
	html {
		font-size: 0.8em;
	}
}

@media screen and (max-width: 1120px) {
	.maininfo_headline {
		font-size: 2.5em;
		line-height: 1.25em;
	}
	.wordContainer {
		height: 1.25em;
	}
}

@media screen and (max-width: 900px) {
	.detailInfo_container h3 {
		font-size: 3em;
	}
	.detailInfo_container:before {
		top: 2.85em;
	}
	.detailInfo_facts {
		font-size: 1.125em;
	}
	.detailInfo_facts h4 {
		font-size: 1em;
	}
}

@media screen and (max-width: 800px) {
	main {
		overflow-y: unset;
		height: auto;
	}
	#mainContent,
	#detailContent {
		display: block;
		flex-wrap: unset;
		justify-content: unset;
		height: unset;
	}
	nav {
		position: relative;
	}
	.logo {
		width: 100%;
		border: 0;
		height: unset;
		display: block;
		margin-top: 5em;
	}
	.logo__img {
		position: relative;
		margin: 0 auto;
		margin-left: auto;
		margin-right: auto;
		display: block;
		right: unset;
		bottom: unset;
		transform: unset;
	}
	.maininfo_container {
		margin-left: 0;
		width: 100%;
		margin-top: 2em;
	}
	.maininfo {
		position: relative;
		transform: unset;
		right: unset;
		bottom: unset;
	}
	.detail__contentWrapper {
		height: auto;
	}
	.detail__contentWrapperInner {
		width: unset;
		max-width: unset;
		position: unset;
		right: unset;
		bottom: unset;
		transform: unset;
		margin-top: 3em;
	}
	.detailInfo_container {
		width: 100%;
	}
	.detailInfo_facts {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 1em;
		justify-content: space-between;
	}
	.detailInfo_facts>div {
		margin-bottom: 0;
		width: 33.33%;
	}
}

@media screen and (max-width: 680px) {
	.detailInfo_container h3 {
		font-size: 2.5em;
	}
	.detailInfo_container:before {
		top: 2.25em;
		width: 2.25em;
	}
	.detailInfo_facts>div {
		width: 50%;
		margin-bottom: 1em;
	}
}

@media screen and (max-width: 450px) {
	.detailInfo_facts>div {
		width: 100%;
	}
}