/* --- */
/* general */
*{
font-size:inherit;
margin:0;
padding:0;
border:none;
color:inherit;
text-decoration:none;
font-weight:inherit;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

h1{
margin-bottom:1.5rem;
}

h2{
font-weight:600;
margin-bottom:1.5rem;
font-size:2em;
line-height:1;
}

h3{
font-weight:600;
margin-bottom:1.5rem;
font-size:1.25em;
line-height:1.15;
}

p{
margin-bottom:1.5rem;
}

a{
text-decoration:underline;
}

a:hover,
a:focus{
text-decoration:none;
}

strong{
font-weight:600;
}

/* --- */
/* grid */

html{
width:100%;
min-height:100%;
overflow-y:scroll;
font-family:"Titillium Web",sans-erif;
font-weight:400;
font-size:20px;
line-height:1.45;
background-color:rgb(255,255,255);
color:rgb(0,0,0);
text-align:center;
}

@media (max-width:1440px) and (min-width:720.1px){ html{ font-size:calc(14px + (100vw - 800px) / (1440 - 720) * (20 - 14)); } }
@media (max-width:720px){ html{ font-size:14px; } }


body{
width:100%;
}

body>header{
display:block;
padding:4rem 0;
color:rgb(255,255,255);
background-color:rgb(255,42,0);
background:url(../layout/wunderkerzen.jpg) no-repeat 0 50% / cover;
position:relative;
z-index:10;
}

body>aside{
display:block;
width:100%;
padding:.5rem 0;
color:rgb(255,255,255);
background-color:rgb(255,42,0);
position:fixed;
top:0;
box-shadow:0 0 .25rem rgba(0,0,0,.5);
z-index:9;
}

body>content{
display:block;
padding:3rem 0;
}

body>footer{
display:block;
padding:4rem 0 3rem 0;
color:rgb(255,255,255);
background-color:rgb(40,40,40);
}

/* --- */
/* header */

body>header>section{
display:block;
width:720px;
margin:0 auto;
padding:2rem 1rem;
}

body>header>section>img.logo{
display:inline-block;
height:2.2rem;
}

/* --- */
/* aside */

body>aside>section{
display:block;
width:720px;
margin:0 auto;
padding:0 1rem;
}

body>aside>section>img.logo{
display:inline-block;
height:1rem;
}

/* --- */
/* content */

body>content>section{
display:block;
width:720px;
margin:0 auto;
position:relative;
padding:1rem;
}

body>content>section.usp{
text-align:center;
}

body>content>section.usp>ul{
display:flex;
flex-flow:row wrap;
}

body.js>content>section.usp>ul{
perspective:250px;
transform-style:preserve-3d;
perspective-origin:150% 150%;
transform-origin:50% 50% 50%;
backface-visibility:hidden;
}

body>content>section.usp>ul>li{
display:flex;
flex-flow:row wrap;
flex:0 0 50%;
margin-bottom:1.5rem;
align-content:flex-start;
}

body>content>section.usp>ul>li>header{
display:block;
flex:0 0 100%;
margin-bottom:1rem;
}

body>content>section.usp>ul>li>header>i{
display:inline-block;
line-height:4.25rem;
font-size:2.4rem;
text-align:center;
width:4.5rem;
height:4.5rem;
border:.25rem solid rgb(0,0,0);
}

body.js>content>section.usp>ul>li>header>i{
transform:rotatey(90deg) rotatez(-10deg);
}

body.js>content>section.usp>ul>li:nth-of-type(2n+2)>header>i{
transform:rotatey(-90deg) rotatez(10deg);
}

body.js>content>section.usp>ul>li.scrolled>header>i{
transform:none;
transition:transform .75s .5s;
}

body>content>section.usp>ul>li>content{
display:block;
flex:0 0 100%;
padding:0 1rem;
}

body>content>section.usp>ul>li>content h3{
margin-bottom:.5rem;
}

body>content>section.customer{
width:100%;
margin:0;
position:relative;
padding:1rem calc((100% - 720px) / 2 + 1rem);
background:url(../layout/noisy-texture-200x200.png) repeat,url(../layout/wolken.jpg) no-repeat right top / cover,rgb(12,81,146);
background:url(../layout/noisy-texture-200x200.png) repeat,url(../layout/wolken.jpg) no-repeat right top / cover,rgb(15,15,15);
background-blend-mode:normal,luminosity;
}

body>content>section.customer>ul{
display:block;
columns:2;
column-gap:2rem;
}

body>content>section.customer>ul>li{
display:block;
list-style:none;
margin-bottom:.5rem;
}

body>content>section.contact{
}

body>content>section.contact>ul{
display:flex;
flex-flow:row nowrap;
width:100%;
justify-content:stretch;
}

body>content>section.contact>ul>li{
display:block;
flex:0 0 33%;
margin-bottom:1.5rem;
padding:0 .5rem;
}

body>content>section.contact>ul>li>a{
display:flex;
flex-flow:row wrap;
width:100%;
text-decoration:none;
align-content:flex-start;
}

body>content>section.contact>ul>li>a>header{
display:block;
flex:0 0 100%;
margin-bottom:1rem;
}

body>content>section.contact>ul>li>a>header>i{
display:inline-block;
line-height:4.25rem;
font-size:2.4rem;
text-align:center;
width:4.5rem;
height:4.5rem;
}

body>content>section.contact>ul>li>a>content{
display:block;
flex:0 0 100%;
padding:0 1rem;
}

body>content>section.contact>ul>li>a>content h3{
margin-bottom:.5rem;
}

/* --- */
/* footer */

body>footer>section{
display:block;
width:720px;
margin:0 auto;
padding:0 1rem;
}