/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size:20px;
	line-height:30px;
	background-color:#f2f2f2;
}

.content-wrapper {
	width:1280px;
  	margin:0 auto;
  	background-color:white;
}

/* Header */
header {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e73230+0,c1032f+57,c1032f+100 */
	background: rgb(231,50,48); /* Old browsers */
	background: -moz-linear-gradient(top,  rgb(231,50,48) 0%, rgb(193,3,47) 57%, rgb(193,3,47) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgb(231,50,48) 0%,rgb(193,3,47) 57%,rgb(193,3,47) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgb(231,50,48) 0%,rgb(193,3,47) 57%,rgb(193,3,47) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e73230', endColorstr='#c1032f',GradientType=0 ); /* IE6-9 */
	display:flex;
	align-items: center;
  	justify-content:center;
  	
}
header .logo {
	width:calc(100% - 790px);
	display:flex;
	justify-content:center;
}
header .logo img {
	display:block;
	width:280px;
	height:auto;
}

header.imprint .logo {
	min-height:550px;
	width:100%;
	align-items: center;
}
header .image img {
	width:100%;
	height:auto;
}

/* Hamburger */
.hamburger-menu-icon {
	display:none;
	margin-top:15px;
	
}

label.hamburg { 
   display: block;
   background: white; 
   width: 56px; 
   height: 50px; 
   position: relative; 
   margin-left: auto; 
   margin-right: auto;
	cursor:pointer;
}

input#hamburg {display:none}

.line { 
   position: absolute; 
   left:10px;
   height: 4px; width: 36px; 
   background: #c61824; border-radius: 2px;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

#hamburg:checked + .hamburg .line:nth-child(1){
   transform: translateY(12px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
   transform: translateY(-12px) rotate(45deg);
}


/* Menu */
.menu ul {
	list-style-type: none;
	margin:0;
	padding:0;
	display:block;
}
.menu ul li {
	display:inline-block;
	font-family: 'ralewaymedium', Arial, sans-serif;
}
.menu ul li a {
	color:black;
	font-size:19px;
	text-decoration:none;
	display:inline-block;
	line-height:52px;
	padding:0 10px;
	background-color:white;
}

@media (hover: hover) { /* not for mobile */
	.menu > ul > li > a:hover,
	.menu-wrapper.sticky .menu ul li a:hover {
		background-color:#c61824;
		color:white;
	}
}
.menu > ul > li.active > a,
.menu > ul > li.active-and-sub > a,
.menu > ul > li.active-and-sub li.active > a,
.menu-wrapper.sticky .menu > ul > li.active > a,
.menu-wrapper.sticky .menu > ul > li.active-and-sub > a,
.menu-wrapper.sticky .menu > ul > li.active-and-sub li.active > a {
	background-color:#c61824;
	color:white;
}
.menu > ul > li.active-and-sub li.active > a {
	display:block;
}


.menu ul li ul {
	position: absolute;
	width:280px;
	opacity:0;
	height:0;
	overflow:hidden;
	transition: all 0.5s; 
  	-webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);
	box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);
  	
}
.menu ul li.sub {
	position:relative;
}
.menu ul li.sub.active ul {
	display:block;
	opacity:1;
	height:210px;
}

@media (hover: hover) { /* not for mobile */
	.menu ul li.sub:hover ul {
	display:block;
	opacity:1;
	height:210px;
}
}

.menu ul li.sub img {
	cursor:pointer;
}
.menu ul li.sub img.white,
.menu ul li.sub img.desk-white,
.menu ul li.sub img.red {
	display:none;
}
.menu ul li.sub img.desk-red,
.menu ul li.sub img.desk-white {
	position:absolute;
	top:0;
	right:0;
}

.menu ul li ul li {
	display: block;
	background-color:white;
}
.menu ul li ul li a:hover {
	background-color:white;
	color:#c61824;
}
.menu-wrapper {
   position: sticky;
   top: 0;
   background-color:rgba(255,255,255,0.9);
   padding-bottom:0;
   transition: padding-bottom 0.6s;
   z-index: 100;
}
.menu-wrapper.sticky {
	padding-bottom:30px;
}
.menu-wrapper.sticky .menu ul li a {
    background-color: transparent;
}

/* Main */
main { 
	padding-top:120px;
}
main p {
	margin-bottom:18px;
}

main h1 {
	color:#c61824;
	font-size:42px;
	line-height:52px;
	margin-bottom:48px;
	font-weight:normal;
}
main h2 {
	color:#c61824;
	font-size:30px;
	line-height:40px;
	margin-bottom:28px;
	font-weight:normal;
}
main h3 {
	color:#c61824;
	font-size:24px;
	line-height:34px;
	margin-bottom:20px;
	font-weight:normal;
}
main strong, main b {
	font-weight: 700;
}
main a {
	color:#c61824;
	text-decoration: none;
}
main a:hover {
	text-decoration: underline;
}
.menu-wrapper,
main .wrapper,
footer .wrapper {
	width:710px;
	margin:0 auto;
}
main ul {
	margin-left:-15px;
}


/* Footer */
footer {
	background-color:#666666;
	color:white;
	font-family: 'fira_sansregular', Arial, sans-serif;
	font-size:18px;
	padding:90px 0 110px;
	margin-top:145px;
}
footer h3 {
	font-size:24px;
	line-height:34px;
	font-weight:normal;
	margin-bottom:45px;
}
footer .footer-menu ul {
	list-style-type: none;
	margin:0;
	padding:0;
}
footer .footer-menu ul li {
	display:inline-block;
}
footer .footer-menu ul li a {
	color:#a9a9a9;
	font-size:18px;
	text-decoration:none;
	text-transform: uppercase;
	display:inline-block;
	line-height:52px;
	padding:0 20px;
}
footer .footer-menu ul li:first-child a {
	padding-left:0;
}
footer .footer-menu ul li a:hover {
	text-decoration: underline;
}





@media only screen and (min-width: 771px) {
	.menu > ul {
		display:block !important;
	}
}
@media only screen and (max-width: 1280px) {
	.content-wrapper {
		width:100%;
	}
	header .logo {
		width:35%;
	}
	header .image  {
		width:65%;
	}
}
@media only screen and (max-width: 940px) {

	header .logo img {
		width:100%;
		height:auto;
	}
}
@media only screen and (max-width: 770px) {

	
  	
  	.menu-wrapper,
	main .wrapper,
	footer .wrapper {
		width:100%;
		padding:0 30px;
	}
	.menu-wrapper {
		width:100%;
		padding:0;
	}
	
	/* Hamburger */
	.hamburger-menu-icon {
		display:block;
	}
	
	/* Menu */
	.menu  {
		margin-bottom:30px;
	}
	.menu > ul {
		display:none;
	}
	.menu ul li {
		display:block;
		border-bottom: 1px solid #c61824;
	}
	.menu ul li:first-child { 
		border-top: 1px solid #c61824;
	}

	.menu ul li.sub.active > a {
		color:#c61824;
	}
	.menu ul li.sub.active > a:hover {
		color:white;
	}
	.menu ul li ul li:first-child {
		border-top:none;
	}
	.menu ul li a {
		padding-left:30px;
		display:block;
	}
	
	.menu ul li ul {
		position:relative;
		width:100%;
		/*opacity:1;
		height:auto;*/
		overflow:hidden;
		-webkit-box-shadow: none;
		box-shadow: none;
		 
	}
	.menu ul li.sub ul {
		
		/*display: none;*/
	}
	.menu ul li.sub.active ul {
		position: relative;
		height:210px;
	}
	.menu ul li ul li {
		border:none;
	}
	.menu ul li.sub img {
		position:absolute;
		display:block;
		top:0;
		right:14px;
	}
	.menu ul li.sub:hover img.red {
		display:none;
	}
	
	.menu ul li.sub.active img,
	.menu ul li.subXXX:hover img {
		transform:rotate(180deg);
	}
	
	.menu-wrapper.sticky {
		padding-bottom:1px;
	}
	.menu-wrapper.sticky .menu ul li a {
		background-color: white;
	}
	.menu-wrapper.sticky label.hamburg {
		background-color: transparent;
	}
	
	@media (hover: none) {
		.menu ul li.sub.active img,
		.menu ul li.sub img {
			background-color:transparent !important;
		}
	}
}
@media only screen and (max-width: 660px) {
	header {
		flex-direction:column-reverse;
	}
	header .logo {
		width:100%;
		box-sizing:border-box;
		padding:10vw 0;
		height:70vw;
		align-items: center;
	}
	header .logo img {
		width:240px;
	}
	header .image {
		width:100%;
		justify-content:center;
		
	}

}
@media only screen and (max-width: 550px) {
	header.imprint .logo {
		min-height:100vw;
	}
	
}
@media only screen and (max-width: 480px) {
	body {
		font-size:18px;
		line-height:26px;
	}
}