*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f4f4+0,e8eeef+100 */
	background: linear-gradient(135deg,  #f2f4f4 0%,#e8eeef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	height: 100%;
	font-family: 'Assistant', sans-serif;
	color: #005AAA;
	font-weight: normal;
}
.contact-button{
	color: #005AAA;
}
body{
	min-height:. 100vh;
}
html, body {
  margin: 0;
}
h1, h2, h3, h4, h5, b, strong{
	font-size: 2rem;
	font-weight: normal;
}
a{
	color: #005AAA;
}

#logoWrap, #telWrap{
	max-width: 100%;
	width: 30rem;
	margin: 0 auto;
}
#logoWrap{
	padding-top: 2rem;
}
#telWrap a{
	text-decoration: none;
	display: block;
	text-align: right;
	font-size: 3rem;
	
	background-image: url(/bilder/telephone.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
}
.round-corners{
	border-radius: 50px!important;
}
#logoWrap span{
	position: absolute;
	top: -3000px;
	left: -3000px;
}
#logo{
	display: block;
	max-width: 100%;
	width: 30rem;
	height: 5.8rem;
	background-image: url(/bilder/logo.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

/* angebots bilder */
#angebot{
	padding: .5rem 0;
	min-height: 20rem;
	height: 50vh;
	max-height: 30rem;
	box-shadow: inset 0 0 .5rem 0 #00101F;
	background-color: #0461B5;
	
	margin-bottom: 2rem;
  display: flex;
  flex-direction: row;
}
#angebot div{
  height: 100%;
  width: 33%;
  flex-grow: 1;
  transition: width 1s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#angebot div h2{
  width: 100%;
  overflow: hidden;
  text-align: center;
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(200,200,200,0) 0%, rgba(255,255,255,.8) 50%, rgba(200,200,200,0) 100%);
}
#angebot .grow:hover, #angebot .grow:active{
  width: 66%; 
}

/* form */
Stilattribut {
}
.bottomMarginHalf {
margin-bottom: 10px;
}
.topMargin {
margin-top: 20px;
}
.gridThirds {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}

input, input[type="submit"], select, .inputStyle, textarea {
background: transparent;
border: 1px solid transparent;
border-bottom: 1px solid #2B587F;
border-radius: 2px;
width: 100%;
outline: none;
transition: 0.2s;
padding: 5px 10px 5px 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition: border .3s ease-out;
color: color: #005AAA;
font-size: 1rem;
margin-bottom: 1rem;
}
input:focus, input[type="submit"]:focus, select:focus, .inputStyle:focus, textarea:focus {
	border: 1px solid #2B587F;
}

.half-name, .half-address {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}

.half-name, .half-address {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}

.inpextra {
position: absolute;
left: -999vh;
resize: vertical;
}

.panel{
	width: 100%;
}
.form-bestellen-warapper{
	max-width: 100%;
	width: 30rem;
	margin: 0 auto 2rem auto;
	padding: 20px;
	border-radius: 2px;
	
	box-shadow: 1px 1px 20px 1px #C1C6C8,
				1px 1px 6px -2px #8D9193;
}
.form-bestellen-warapper{
	text-align: center;
}

/* flex */
.flexWrap{
	display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.flexGrow{
	flex-grow: 1;
}

/* Footer */
.footer{
	text-align: center;
	line-height: 5rem;
	height: 6rem;
	background-color: #D3D9DB;
	box-shadow: -1px 1px 20px 1px #C1C6C8,
				-1px 1px 6px 0 #8D9193;
				
}
.footer p{
	padding: 0 1rem;
}

.impressum{
	line-height: 1rem;
	margin-top: -1.5rem;
}

.content{
	max-width: 100%;
	width: 30rem;
	color: #fff;
	padding: 2rem;
}

@media only screen and (max-width: 700px) {
	
}

@media only screen and (max-width: 450px) {
	.footer{
		padding-top: 1rem;
		line-height: 1.5rem;
	}
	#angebot div {
		width: 100vw;
	}
	#angebot{
		flex-direction: column;
		height: 120vh;
		max-height: 120vh;
	}
	.impressum{
		line-height: 1rem;
		margin-top: 0rem;
	}
	.round-corners{
		width: 90vw;
	}
	#telWrap{
		letter-spacing: -1px;
		word-spacing: -2px;
	}
	.round-corners{
		padding: 15px!important;
	}
}

@media only screen and (max-width: 380px) {
	
}