:root {
    --color1:#f05b00;
    --color2:#000;
    --color3:#c6ccce;
    --color4:#777;
    --color5:#000;
    
}

* {padding:0; margin:0; font-family:'Open Sans', sans-serif;}
body {background-color:#e3e3e3;}

h1 {color:var(--color1); font-size:34px; font-weight:bold; margin-bottom:10px;}
h2 {font-size:22px; font-weight:normal; margin-bottom:20px; position:relative; padding-bottom:20px; color:#000;}
h2::before {content:""; position:absolute; width:200px; height:4px; background-color:var(--color2); left:0; bottom:0;}
h3 {width:100%; font-size:25px; font-weight:normal; margin-bottom:20px;}
p {font-size:16px; font-weight:400;}
ul {margin:20px 0;}
li {margin-left:20px; margin-bottom:10px;}


#wrapper {display:flex; flex-direction:column;}
.header {padding:40px; background-color:var(--color2); color:#c2c2c2; background-image:url(/assets/img/elektromotor.webp); background-repeat:no-repeat; background-size:cover;}
.header a {text-decoration:none; color:#fff; font-weight:bold; font-size:35px; text-transform:uppercase;}
.container {width:100%; margin-top:40px;}
.banner {width:100%;}
.banner img {width:100%;}
.content {background-color:#fff; padding:40px; margin-bottom:20px; min-height:700px; -webkit-box-shadow: 0px 1px 5px 1px #777; box-shadow: 0px 1px 5px 1px #777;}
.content p {max-width:900px;}
.kontakt-content {background-color:#1d4a67; color:#fff; padding:40px; -webkit-box-shadow: 0px 1px 7px 1px #777; box-shadow: 0px 1px 5px 1px #777;}
.kontakt-content h4 {font-size:20px; font-weight:normal; margin-bottom:20px;}
.kontakt-content h3 {text-align:center; border-bottom:solid 1px #fff;}
.kontakt-content li {list-style-type:none; margin-bottom:10px; margin-left:0;}
.kontakt-content li a {color:#fff; text-decoration:none;}
.kontakt-content li a b {text-decoration:none;}
.hinweis {margin-top:20px; padding-top:20px; border-top:solid 1px #c2c2c2; max-width:900px;}
.hinweis b {color:var(--color1);}

footer {width:100%; max-width:100%; background-color:#777; }
.footer-content {padding:20px; color:#fff; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end;}
.footer-content a {margin-right:10px; padding-right:10px; color:#fff; text-decoration:none; border-right:solid 1px #c2c2c2;}

.kontakt-content {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:start;}
.f-headline {flex-basis:100%;}
.f-links {flex-basis:100%;}
.f-rechts {flex-basis:100%;}
.kontakt-content a {color:#fff; text-decoration:none; margin-left:10px;}

.leistungen {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; margin-top:40px; background-color:#f1f1f1; padding:20px;}
.leistungen h3 {margin-bottom:30px; text-align:left; border-bottom:solid 1px #c2c2c2; padding-bottom:10px;}
.leistung {padding:10px; flex-basis:100%; margin-bottom:20px; display:flex; flex-direction:column;}
.leistung strong {margin-bottom:10px; font-size:22px; color:#1d4a67;}
.leistung .l-l {width:100px; height:100px; background-color:#1d4a67;}
.leistung .l-l img {width:80%; margin-left:10%; margin-top:10px;}
.leistung .l-r p {padding-left:0;}



@media screen and (min-width: 1200px) {
    .container {width:1200px; margin-left:calc(50% - 600px);}
    .kontakt-content {justify-content:space-between;}
    .leistung {flex-direction:row; flex-wrap:wrap; justify-content:space-between;}
    .leistung .l-r {flex-basis:calc(100% - 120px)}
    
    .leistungen p {padding:10px; flex-basis:45%}
    
    .f-headline {flex-basis:100%;}
    .f-links {flex-basis:45%; border-right:solid 1px #c2c2c2;}
    .f-rechts {flex-basis:45%;}
}