body, html {
font-family: 'Roboto', sans-serif;
font-size:1.1rem;
line-height: 1.5;
font-weight:300;
color: #414042;
}
h1, h2, h3, h4 {
font-family: 'Raleway', sans-serif;
font-weight:300;
}

a:link, a:visited {
color: #414042;
text-decoration: none;
}

a:hover {
text-decoration: underline;
color:#000;
}

p {
margin-top:13px;
}

h2 {
font-size:2rem;
line-height:2rem;
padding-bottom:0;
margin-bottom:0;
}
h3 {
font-size:1.5rem;
line-height:1.7rem;
padding-bottom:0;
margin-bottom:0;
}

#head h1 {
font-size:4rem;
line-height: 4rem;
font-weight:300;
}
#head h2 {
font-size:2.5rem;
font-weight:300;
}

#wrapper {
clear:left;
}

#head {
width:100%;
height:100%;
min-height: calc(0px + 100vh);
margin: 0 auto;
text-align: center;
background: rgba(0, 0, 0, 0.2) url("images/natuerliche-babypflege-in-schwabach-windsbach-3.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
color:#fff;
padding-top:1%;
padding-bottom:20%;
background-blend-mode: darken;
}


#navleiste {
margin:0 auto;
max-width:1600px;
margin-bottom:290px;
text-align:right;
font-size:1rem;
}

#logo {
text-align:left;
margin-left:10%;
float:left;
}



.wickeln, .tragen {
 display: flex;
 background-color:#F4F9DF;
 }

 
.wickeln a:hover, .tragen a:hover {
 color:#fff;
}

#navleiste a:link, #navleiste a:visited {
color:#fff;
text-decoration:none;
}
#navleiste a:hover {
color: #414042;
text-decoration:underline;
}
 
 
.nachhaltig {
width:44%;
padding-right:1%;
padding-left:5%;
}
.nachhaltig2 {
width:50%;
}
.baby1 {
width:50%;
text-align:right;
margin:0;
}
.baby2 {
width:45%;
padding-left:3%;
padding-right:2%;
background-color: #fff;
}

.imgSpalte {
width: 100%;
height: 100%;
object-fit: cover ;
}

#angebot {
margin:0 auto;
text-align:center;
width:100%;
 margin-top:80px;
}
#ende {
width: 100%;
margin:0 auto;
text-align:center;
}
#leistungen {
 display: flex;
 padding:2%;
}
#leistung1, #leistung2, #leistung3 {
width:31%;
padding:1%;
}
#leistung1, #leistung3 {
background-color:#FCF5E9;
}
#leistung2 {
background-color: #F5DEB4;
}


.urkunde {
  display: flex;
  padding:4%;
}
.urkunde img {
border: solid 1px #DBDC3F;
}


.urkunde1 {
width:45%; 
text-align: right;
padding-right:2%;
}
.urkunde2 {
width:45%;
text-align: left;
padding-left:2%;
}

.buttonTermin {
background-color:#BDD636;
padding:10px;
/*border: solid 1px #85C040;*/
text-decoration: none;
color: #414042;
border-radius: 5px;
}

.buttonLeistungen {
padding-left:20px;
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
background-color:#F8941E;
color:#fff;
float:left;
margin-right:15px;
margin-bottom:10px;
}

.orange {
color:#F8941E;
font-weight:900;
margin-left:20px;
margin-right:10px;
font-size:200%;
}

.right {
text-align:right;
}
#footer {
width:100%;
text-align:center;
margin-top:35px;
}

/* 1024 ------------------------------------------------------------- */
@media screen and (max-width:1240px) {
.urkunde1 img, .urkunde2 img {
width:80%;
}
}

/* 1024 ------------------------------------------------------------- */
@media screen and (max-width:1024px) {
body, html {
font-size:1rem;
line-height: 1.4;
}

#head {
width:100%;
height:100%;
min-height:100%;
padding-top:1%;
padding-bottom:10%;

}

h2 {
font-size:1.8rem;
line-height:1.8rem;
padding-bottom:0;
margin-bottom:0;
}
h3 {
font-size:1.4rem;
line-height:1.6rem;
padding-bottom:0;
margin-bottom:0;
}
p {
margin-top:12px;
}

#head h1 {
font-size:3rem;
line-height: 3rem;
font-weight:300;
}
#head h2 {
font-size:1.9rem;
font-weight:300;
}
#navleiste {
margin-bottom:190px;
text-align:right;
font-size:.9rem;
padding-right:20px;
}
#logo {
text-align:left;
margin-left:5%;
float:left;
}
.nachhaltig {
width:46%;
padding-right:1%;
padding-left:3%;
padding-bottom:30px;
}
.nachhaltig2 {
width:50%;
}

.baby1 {
width:50%;
text-align:right;
margin:0;
}

.urkunde img {
width:450px;
height:auto;
}


.baby2 {
width:45%;
padding-left:3%;
padding-right:2%;
padding-bottom:30px;
}
#leistungen {
 padding:1%;
}
#leistungen h3 {
font-size:1.3rem;
line-height:1.4rem;
padding-bottom:10px;
margin-bottom:0;
}
.urkunde1 img, .urkunde2 img {
width:80%;
}


}

/* 768 ------------------------------------------------------------- */
@media screen and (max-width:768px) {
#navleiste {
margin-bottom:90px;
text-align:right;
font-size:.8rem;
padding-right:7px;
padding-top:0;
margin-top:-10px;
}
#logo img {
max-width:50px;
}
.orange {
color:#F8941E;
font-weight:900;
margin-left:10px;
margin-right:5px;
font-size:160%;
}
#head h1 {
font-size:2rem;
line-height: 2rem;
font-weight:300;
}
#head h2 {
font-size:1.3rem;
font-weight:300;
}
#leistungen {
 display: block;
 padding:2%;
}
#leistung1, #leistung2, #leistung3 {
width:100%;
padding:1%;
}

.urkunde img {
width:350px;
height:auto;
}

#ende h2 {
font-size:1.6rem;
line-height:1.6rem;
}
.urkunde1 img, .urkunde2 img {
width:80%;
}
}

/* 480 ------------------------------------------------------------- */
@media screen and (max-width: 480px) {

#head {
width:100%;
height:100%;
min-height:100%;
padding-top:1%;
padding-bottom:8%;
}


#navleiste {
margin-bottom:60px;
text-align:right;
font-size:.8rem;
line-height:.8rem;
padding-right:0px;
padding-top:0;
margin-top:8px;
padding-left:170px;
max-width:47%;
}

#logo {
padding-top:7px;
}
#logo img {
max-width:40px;
}
.orange {
color:#F8941E;
font-weight:900;
margin-left:0px;
margin-right:5px;
font-size:150%;
}
#head h1, h1 {
font-size:1.3rem;
line-height: 1.3rem;
font-weight:300;
}
#head h2 {
font-size:0.6rem !important;
font-weight:300;
}
.mobileNot {
display:none;
}

#angebot {
margin-top:40px;
}

.wickeln, .tragen, .urkunde {
 display: flex;
 flex-direction: column;
 }
 
.urkunde {
 display:block;
 max-width: 100%;
 }
 
 .urkunde1, .urkunde2 {
 text-align:center;
 padding:0;
 width:98%;
 }
 .urkunde2 {
 padding-top:20px;
 }
 
.urkunde1 img, .urkunde2 img {
max-width:90%;
}
 
 .wickeln {
 margin-top:-10px;
 }
 .nachhaltig {
width:98%;
padding-right:1%;
padding-left:1%;
padding-bottom:30px;
padding-top:20px;
}
.nachhaltig2 {
width:98%;
padding-right:1%;
padding-left:1%;
padding-top:20px;
}
.baby1 {
width:98%;
padding-right:1%;
padding-left:1%;
text-align:left;
padding-top:20px;
order:4;
background-color: #fff !important;
}
.baby2 {
width:98%;
padding-right:1%;
padding-left:1%;
padding-top:20px;
}

}