/* ############################################################
	FARBKLIMA
###############################################################

	Dunkelblau:	#374f5e - rgba(55,79,94,1)
	Orange:		#f49f27 - rgba(244,159,39,1)
	Weiss:		#ffffff - rgba(255,255,255,1)
	
###############################################################
	ALLGEMEINES
############################################################ */

* {
	margin: 0;
	padding: 0;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
:root {
	--color-darkblue: rgba(55,79,94,1);
	--color-orange: rgba(244,159,39,1);
	--color-white: rgba(255,255,255,1);
}

img, table, tr, td {
	border: 0;
}
/*img {
	max-width: 100% !important;
	height: auto !important;
	display: block;
	-ms-interpolation-mode: bicubic;
	image-rendering: optimizeQuality;
}*/

a, a:focus {
	outline: none;
}

html, body { /* html = IE text resize correction */
	height: 100%;
	font-size: 100%;
}
html {
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow-x: hidden;
	min-height: 100vh;
	min-height: -webkit-fill-available; /* mobile viewport bug fix */
	background-color: var(--color-white);
}
.color-darkblue {
	color: var(--color-darkblue);
}
.color-orange {
	color: var(--color-orange);
}
.color-white {
	color: var(--color-white);
}


/* Effekt: FadeIn / Lightning */
main {
	opacity: 0;
}


/* ############################################################
	SCHRIFTEN / TEXTE / ABSÄTZE / HYPERLINKS / TITEL
############################################################ */

/* Einbettung-Schrift */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url('../Fonts/Roboto/roboto-v32-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../Fonts/Roboto/roboto-v32-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/Roboto/roboto-v32-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../Fonts/Roboto/roboto-v32-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../Fonts/Roboto/roboto-v32-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../Fonts/Roboto/roboto-v32-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url('../Fonts/Roboto/roboto-v32-latin-700.eot'); /* IE9 Compat Modes */
  src: url('../Fonts/Roboto/roboto-v32-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/Roboto/roboto-v32-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../Fonts/Roboto/roboto-v32-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../Fonts/Roboto/roboto-v32-latin-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../Fonts/Roboto/roboto-v32-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* Allgemeines */
body {
	font-family: "Roboto";
	font-weight: 400;
	font-style: normal;
	color: var(--color-darkblue);
}
.font-size-medium {
	font-size: 1.25rem; /* 20px */
	line-height: 1.35;
	letter-spacing: 0.4px; /* 20px */
}
.font-size-normal {
	font-size: 0.9375rem; /* 15px */
	line-height: 1.35;
	letter-spacing: 0.3px; /* 20px */
}
@media (min-width: 1020px) {
	.font-size-medium {
		font-size: 1.75rem; /* 28px */
		letter-spacing: 0.56px; /* 20px */
	}
	.font-size-normal {
		font-size: 1.125rem; /* 18px */
		letter-spacing: 0.36px; /* 20px */
	}
}

/* Schnitte */
i, em, .italic {
}
b, strong {
	font-weight: 700;
}
strong > em, em > strong,
strong > i, i > strong,
b > em, em > b,
b > i, i > b {
}


/* ############################################################
	HYPERLINKS
############################################################ */

a {
	-o-transition: color 0.3s ease-in-out;
	-ms-transition: color 0.3s ease-in-out;
	-moz-transition: color 0.3s ease-in-out;
	-webkit-transition: color 0.3s ease-in-out;
	transition: color 0.3s ease-in-out;
	color: var(--color-darkblue);
	text-decoration: none;
}
a:hover {
	color: var(--color-orange);
}
.color-orange a {
	color: var(--color-orange);
}


/* ############################################################
	LISTEN
############################################################ */

/* Aufzählungslisten */
main ul {
	list-style: none;
	position: relative;
	padding: 0;
}

/* - (—) */
main ul {
}
	main ul li {
		margin-left: 0;
		padding-left: 0;
	}
	main ul li:before {
		content: "\2192";
		position: absolute;
		margin-left: -26px;
	}
@media (min-width: 1020px) {
	main ul li {
		margin-left: 0;
	}
	main ul li:before {
		margin-left: -36px;
	}
}


/* ############################################################
	PANELS/BOXEN
############################################################ */

/* Allgemein */
main,
.contentpanel, .imagepanel,
.intro-box, .text-box, .footer-box {
	position: relative;
	width: 100%;
}
.contentpanel {
	z-index: 2;
	position: absolute;
	top: calc(86.667vw - 50px);
	left: 0;
	padding-left: 36px;
	padding-right: 36px;
	background-color: var(--color-white);
	clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%);
}

/* Inhalte */
.logo-box {
	margin-top: 30px;
	margin-bottom: 56px;
}
	.logo-box img {
		max-width: 210px;
	}
.intro-box {
	margin-bottom: 28px;
}
.text-box {
	margin-bottom: 56px;
}
.footer-box {
	margin-top: auto;
	margin-bottom: 36px;
}

/* Foto */
.imagepanel {
	z-index: 1;
	position: fixed;
	top: 0;
	left: 0;
	height: 86.667vw;
	background-image: url("../Images/MBV_Bagger_Anhaenger.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
@media (min-width: 1020px) {
	/* Allgemein */
	.contentpanel {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		top: 0;
		width: 50%;
		height: 100vh;
		padding-left: 60px;
		padding-right: 40px;
		clip-path: polygon(0 0, calc(100% - 116px) 0, 100% 116px, 100% 100%, 0 100%);
	}

	/* Inhalte */
	.logo-box {
		margin-top: 116px;
		margin-bottom: 76px;
	}
		.logo-box img {
			max-width: 294px;
		}
	.intro-box {
		margin-bottom: 76px;
	}
	.text-box {
		margin-bottom: 76px;
	}
	.footer-box {
		margin-top: auto;
		margin-bottom: 60px;
	}
	
	/* Foto */
	.imagepanel {
		position: absolute;
		left: auto;
		right: 0;
		width: calc(50% + 116px);
		height: 100vh;
	}
}
@media (min-width: 1440px) {
	/* Allgemein */
	.contentpanel {
		clip-path: polygon(0 0, calc(100% - 150px) 0, 100% 150px, 100% 100%, 0 100%);
		padding-right: 60px;
	}
	
	/* Inhalte */
	.logo-box {
		margin-top: 150px;
		margin-bottom: 114px;
	}
	.intro-box {
		margin-bottom: 76px;
	}
	.text-box {
		margin-bottom: 76px;
	}
	
	/* Foto */
	.imagepanel {
		width: calc(50% + 150px);
	}
}
@media (min-width: 1680px) {
	/* Allgemein */
	.contentpanel {
		padding-left: 140px;
		padding-right: 140px;
	}

	/* Inhalte */
	.footer-box {
		margin-bottom: 100px;
	}
}