/*
 * responsive to 320px
 */

* {
  --color1: #8AA295;
  --color2: #437C90;
  --color3: #EEEBD3;
  --color4: #255957;
	--color5: #E63244;

	--shadow-light: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	--shadow-heavy:rgba(0, 0, 0, 0.35) 0px 5px 15px;

	--inset-shadow: inset 0.3em 0.3em 0.9em var(--color5);
	--transition-duration-short: 300ms;
}

html {
	padding:0;
	margin:0;
	height: 100%;
	color: #333;
}
a, a:visited, a:hover, a:active {
  color: inherit;
	text-decoration: none;
}

body {
	min-height: 100%;
	width:100%;
	overflow-x:hidden;
	margin:0;
	padding:0;
	background-color: var(--color3);
	display: grid;
	grid-template:
	'header header'
	'menu main' 1fr
	'footer footer'
	/ auto 1fr;
	font-family: "Roboto"
}

textarea {
	box-sizing: border-box;
	overflow-y: hidden;
	padding-bottom: 20px; !important;
}



.contact {
	position: fixed;
	bottom: 20px;
	right: 10px;
	width: 45px;
	height: 45px;
	display :none;
	background-color: var(--color2);
	border-radius: 50%;
	z-index: 20;
}

.contact > div {
	color: var(--color3);
	margin: auto;
	height: 24px;
	width:20px;
}


.image-wrapper > div{
	grid-area: img;
	width: 100%;
}
.image-wrapper img{
	z-index:1;
}
.image-wrapper{
	position:relative;
	display: grid;
	overflow:hidden;
	grid-template-areas: "img";
	z-index:5;
}

#headImageWrap img {
	width:auto;
	height:403px;
}
#headImageWrap {
	height:400px;
	width:100%;
}


#headImageWrap > div {
	position: relative;
}

#personalImageWrap {
	box-shadow: var(--inset-shadow);
	border: 3px solid var(--color5);
	border-radius: 10px 10px 0 0;
	border-bottom-width: 0;
	position: absolute;
	bottom: 0;
	left: 15px;
	height: 300px;
	width: 400px;
}


#personalImageWrap img {
	height: 300px;
	width: 400px;
}

#headerText {
	position: absolute;
	padding-left:435px;
	height: 50px;
	left:0;
	right: 0;
	bottom:0;
	background-image: linear-gradient(#FFFFFF00, #FFFFFF80 55%, var(--color3))
}

#headerText > div.blur {
	position:absolute;
	filter: blur(8px);
	top:0;
	bottom:0;
	left:0;
	right:0;
}

#headerText .text {
	min-height: 40px;
	position:absolute;
	display:flex;
	bottom: -12px;
	color: var(--color5);
	font-weight: 400;
	font-style: italic;
	font-family: "Josefin Slab"; 
	width: 80%;
}
#headerText .text h1{
	margin: 0;
	margin-right: 15px;
	display: inline;
	width:fit-content;
	z-index: 10;
}
#headerText .text >  div{
	height: inherit;
	position: relative;
  padding-top: 3px;
}


#headerText .text div a > div {
	position:relative;
	height: 100%;

}
#headerText .text .svg-wrap {
	margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.Head {
	width: 100%;
	overflow:hidden;
	grid-area: header;
	position: relative;
	z-index: 10;
}

.Head > .head {
	position: relative;
	height:400px;
}
.Menu {
	width: fit-content;
}
.Menu ul {
	width: fit-content;
	padding 0;
	margin-right:20px;
	color:var(--color1);
}

.Menu li {
	list-style-type: none;
	font-size: 22px;
	margin-top: 19px;
	margin-bottom: 19px;
}


.Menu li.active {
	list-style-type: disc;
}

.Menu li:hover {
	list-style-type: disc;
	color:var(--color2);
}

body > .Menu .content.fixed {
	top:0;
	position:fixed;
}


.Body {
	height: 100%;
}

body > .Menu {
	grid-area: menu;
}
.Menu{
	font-family: "Roboto light";
}

.MainSection {
	max-width: 1220px;
	position: relative;
	grid-area: main;
	padding: 20px;
}

.ProductsView {
	display: flex;
	flex-wrap: wrap;
}

.ProductView {
	margin: 10px;
	position: relative;
	height: 150px;
	overflow: hidden;
	background-color: var(--color2);
	color: var(--color3);
	transition-duration: var(--transition-duration-short);
	/* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;*/
	box-shadow: var(--shadow-light);
}
.ProductView:hover {
	box-shadow: var(--shadow-heavy);
}
.ProductView > a > div {
	display: flex;
	flex-wrap: nowrap;
}
.ProductView .imageWrapper {
  height : 150px;
  width : 120px;
	overflow: hidden;
}
.ProductView img {
  height : 150px;
  width : 120px;
}

.ProductView .bodyWrapper {
	width : 250px;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 25px;
}

.ProductView .bodyWrapper div.header{
	height: 50px;
}

.ProductView .bodyWrapper h3{
	margin-top: 10px;
}

.MainSection .item {
	margin-bottom: 20px;
}

footer {
	width: 100%;
	grid-area: footer;
	background-color: var(--color1);
	color: var(--color2);
	position:relative;
	bottom:0;
	height: fit-content;
}


footer > div {
	margin: auto;
	width: fit-content;
}

footer ul {
	display: flex;
	flex-wrap: wrap;
}
footer li {
	margin-right: 40px;
	list-style-type: none;
}

footer li:hover {
 text-decoration: underline;
}

.BurgerMenu {
	position: relative;
	display: none;
}

.BurgerMenu .Menu{
	height: 0;
	transition-duration: 800ms;
	width:100%;
	background-color: var(--color3);
}

.BurgerMenu .Menu > .content{
	float:right;
}

.BurgerMenu.collapsed .Menu{
	display: none;
}
.BurgerMenu.expanded .Menu{
	overflow-y: scroll;
}

.BurgerMenu .Bbutton{
	cursor: pointer;
	z-index: 10000;
	position:absolute;
	top: -43px;
	right: 10px;
	display: inline-block;
	height: 30px;
	width: 30px;
}

.BurgerMenu .Bbutton span {
	transition-duration: 800ms;
	height: 0;
}
.BurgerMenu.collapsed .Bbutton span,
.BurgerMenu .Bbutton span::before,
.BurgerMenu .Bbutton span::after{
	height:2px;
}
.BurgerMenu .Bbutton span::before,
.BurgerMenu .Bbutton span::after{
	transition-duration: 800ms;
	position:absolute;
	content: '';
	width:100%;
	background-color: var(--color5);
}
.BurgerMenu .Bbutton span{
	position:absolute;
	display:inline-block;
	background-color: var(--color5);
	width:80%;
	top:50%;
	left:50%;
  transform: translate(-50%,-50%);
}

.BurgerMenu .Bbutton span::before{
	top: -8px;
}
.BurgerMenu .Bbutton span::after{
	top: 8px;
}

.BurgerMenu.expanded .Bbutton span{
	height: 0px;
}
.BurgerMenu.expanded .Bbutton span::before,
.BurgerMenu.expanded .Bbutton span::after{
	top:0;
}
.BurgerMenu.expanded .Bbutton span::before{
	transform: rotate(45deg);
}
.BurgerMenu.expanded .Bbutton span::after{
	transform: rotate(-45deg);
}


span.required,
form > h2 {
	display:none;
}

form .input {
	flex: 1;
	display: flex;
}

form .form-group {
	display: flex;
	flex-flow: wrap;
	margin-bottom: 12px;
	font-size: 15px;
	/* border-top: 1px solid var(--color4); */
}
form .form-group label {
	color: var(--color2);
	min-width: 100px;
	padding: 10px 0px;
}

form .form-group textarea {
	height:200px;
	min-height:200px;
}
form .form-group textarea,
form .form-group input {
	flex: 1;
	resize:none;
	min-width: 250px;
	background-color: #FFF;
	color: var(--color2);
	border: 0;
	outline: none;
	padding: 10px 3px;
	margin: 0;
	border: 0;
	box-shadow: var(--shadow-light);
	transition-duration: var(--transition-duration-short);
	transition-property: box-shadow;
}
form .form-group textarea:focus,
form .form-group input:focus {
	caret-color : var(--color5);
	box-shadow: var(--shadow-heavy);
}

form .form-group input[type="checkbox"] {
	min-width:0;
	width: auto;
}

form .form-group .input {
	flex-direction: column-reverse;
}

form .form-actions * {
	position:relative;
	height: fit-content;
	height:50px;
	padding: 0;
	margin:0;
	border: 0;
}
form .form-actions button {
	position:relative;
	background-color: var(--color2);
	color: var(--color3);
	min-width: 50px;
	padding: 10px 15px;
	cursor: pointer;
	width: fit-content;
	box-shadow: var(--shadow-light);
  float: right;
}
form .form-actions button:hover {
	box-shadow: var(--shadow-heavy);
}


.ce-textpic.ce-right {
	display: flex;
	flex-flow: wrap;
	flex-direction: row-reverse;
	justify-content: space-around;

}

@media (max-width: 750px) {
	#headerText {
		z-index: 10;
		padding-left: 23px;
	}
}

@media (max-width: 800px) {
	#headerText .blur,
  #headImageWrap,
  body> .Menu{
		display:none;
	}
	#headerText {
		background-image: none;
		padding-left: 0;
	}
	#headerText .text{
		position:relative;
		height: 100%;
		margin: auto;
		bottom: auto;
	}
	#headerText .text h1{
		margin:auto;
	}
	
	.Head {
		background-color: var(--color2);
	}

	.Head > .head {
		height:fit-content;
	}
  #personalImageWrap {
		position: relative;
		left:auto;
		width: 50px;
		height: 50px;
		margin: 2px;
		border-radius: 50%;
		border-width: 1px;
	}

  #personalImageWrap img {
		width: auto;
		height: 50px;
	}

	body {

	grid-template-areas:
	'header'
	'main' 1fr
	'footer';
	}

  #headImageWrap img {
		width: 681;
	}

	.contact {
		display :flex;
		box-shadow: var(--shadow-light);
	}
	.contact:hover {
		box-shadow: var(--shadow-heavy);
	}

	footer ul {
		display: inline-block;
	}

	.MainSection{
		padding: 6px;
	}
	.BurgerMenu {
		display:block;
	}
  .ProductView {
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10px;
	}
}

@media (max-width: 400px) {
	.ProductView .imageWrapper {
		display:none;
	}
}

.hidden {
	display: none;
}

/* special rules */
img[src*=QR-Kontakt] {
	width: 200px;
	height: auto;
}
@media (max-width: 600px) {
 	img[src*=QR-Kontakt] {
		display:none;
	}
}