.site_article{width:100%; max-width:1024px; padding:15px; box-sizing:border-box; margin:140px auto 60px auto;}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{background:var(--blue); margin:30px 0 0 0}
footer .content{display:flex; margin:0 auto; align-items:center; justify-content: center; height:100px}
footer p{margin:0; color:var(--font)}
footer >.content p a{color:var(--font)}
footer >.content p a:hover{color:#FFF}

/* LOCATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.location{margin:0 auto!important;padding-bottom:0!important; display:flex; flex-wrap:wrap; position:relative}
.googlemaps{width:100%; height:400px; border:none;}
address{font-style: normal; width:100%}
address strong{font-size:33px}
address p a{display:flex; align-items: center; color:var(--font)}
address img{padding:0 15px 0 0; filter:brightness(0); width:30px; height:auto}
address p a:hover{color:var(--yellow)}
address p a:hover img{filter:brightness(1);}
.location > .image{width:50%; height:360px; background:url(../images/content/firma-800x400.jpg) center center; background-repeat: no-repeat; background-size: cover; position:absolute; bottom:0; right:0; padding:25px; box-sizing: border-box; display:flex; align-items: flex-end; justify-content: center}

@media only screen and (max-width:700px){
    .location > .image{position:relative; bottom:auto; right:auto; width:100%; height:200px}
}

/* ISSUU
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.issuu{position:relative;padding-top:max(60%,326px);height:0;width:100%}
.issuu iframe{position:absolute;border:none;width:100%;height:100%;left:0;right:0;top:0;bottom:0;}
.flexbox{display:flex; flex-wrap:wrap;}
.flexbox .item{width:50%; padding:0 15px 0 0; box-sizing: border-box}

@media only screen and (max-width:700px){
    .flexbox .item{width:100%}
}

/* KOMPETENZEN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#kompetenzen,#haushaltsgeraete{position:absolute; top:-120px; left:0; width:0; height:0}
.kompetenzen ul{display:flex;flex-wrap:wrap; margin:0;list-style-type: none; margin-block-start:0; margin-block-end:0; padding:0}
.kompetenzen ul li{margin:0; width:calc(33.33% - 30px); padding:15px; box-sizing: border-box; margin:15px; min-height:100px; display:flex; align-items: center; justify-content: flex-start; text-align: left; border-radius:15px; font-weight:700; color:#FFF; border:#FFF solid 1px; background:var(--blue); position:relative}
.kompetenzen span{position:absolute; top:15px; left:15px; width:calc(100% - 30px); height:calc(100% - 30px); z-index:2; background:rgba(0,0,0,0.5); display:flex; justify-content: center; align-items:center; text-align: center}
.kompetenzen img{width:100%; height:auto}

@media only screen and (max-width:700px){
    .kompetenzen ul li{width:100%}
}

/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{position:fixed; z-index:3; top:0; left:0; width:100%; height:100px; background:rgba(255,255,255,1); border-bottom:solid 15px var(--yellow)}
header:after{position:absolute; content:""; width:100%; height:15px; bottom:-15px; left:0; background:linear-gradient(90deg, #6CF 0%, rgba(255,255,255,1) 50%, #6CF 100%)}
header > .logo{position:fixed; top:10px; left:10px;}
header > .logo p{margin:0}
header > .logo img{width:auto; height:80px; cursor: pointer}
header > .btns{width:150px; height:40px; position:fixed; top:30px; left:50%; transform:translateX(-50%); display:flex; justify-content: space-between}
header > .btns a{width:40px; height:40px; background:#000; display:block; border-radius:50%; padding:10px; box-sizing:border-box; position:relative}
header > .btns a:hover{background:var(--yellow)}
header > .btns img{width:auto;height:auto; filter:brightness(0) invert(1)}
header > .btns a:hover img{filter:brightness(0) invert(0)}
header > .btns a:after{position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); font-size:16px; color:#000; width:160px; text-align: center}
header > .btns p:nth-child(1) a:hover:after{content:"+41 44 761 00 05"}
header > .btns p:nth-child(2) a:hover:after{content:"markus@freielektro.ch"}
header > .btns p:nth-child(3) a:hover:after{content:"8909 Hedingen"}
header > .elite{position:absolute; top:50%; right:30px; transform:translateY(-50%)}
header > .elite p{margin:0; line-height: 0}
header > .elite img{width:auto; height:40px; filter:brightness(0); cursor: pointer}
header > .elite:hover img{filter:brightness(1)}

@media only screen and (max-width:700px){
    header > .btns{width:120px; height:30px; top:15px; left:auto; right:15px; transform:none}
    header > .btns a{width:30px; height:30px;padding:5px;}
    header > .elite{right:15px; top:auto; bottom:15px; transform:none}
    header > .elite img{height:30px}
    header > .logo img{height:60px}
    header > .btns a:after{display:none}
}

/* START
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.start{width:100%; height:calc(100vh - 100px); margin:100px 0 0 0; display:flex; flex-wrap:wrap; }
.start h1,.start h2,.start p{color:#FFF}
.start > .frei, .start > .welcome, .start > .links{height:100%; box-sizing:border-box}

.start > .welcome, .start > .links{width:40%}
.start > .welcome{padding:45px; box-sizing:border-box; display:flex; flex-wrap:wrap; align-content: flex-end; background:rgba(0,0,0,0.7); position:relative; border-right:7.5px solid #FFF; }
.start > .welcome:after{content:"";position:absolute; top:0; left:0; height:100%; width:100%; background:url(../images/content/elektroplanung-1920x1280.jpg) center center; background-repeat: no-repeat; background-size: cover; z-index:-1}
.start > .welcome > p{width:100%;}
.start > .welcome .space{margin:0 0 40px 0}
.start > .welcome .contact{display:flex; flex-wrap:wrap;}
.start > .welcome .contact a{margin:0 50px 0 0; display:flex; align-items: center;color:#FFF; line-height: 50px}
.start > .welcome .contact a img{margin:0 10px 0 0; filter:brightness(0) invert(1); width:30px; height:auto}
.start > .welcome .contact a:hover{color:var(--yellow)}
.start > .welcome .contact a:hover img{filter:brightness(1) invert(0);}

.start > .links,.start > .frei{position:relative; display:flex; flex-wrap:wrap;}
.start > .links p, .start > .frei p{height:50%; width:100%; margin:0; background:rgba(0,0,0,0.5); box-sizing: border-box; border-color:#FFF; border-style:solid}

.start > .frei{width:20%}
.start > .frei p:first-child{border-width:0 0 7.5px 7.5px; background:url(../images/content/familie-a-350x480.jpg) center center; background-repeat: no-repeat; background-size: cover;}
.start > .frei p:last-child{border-width:7.5px 0 0 7.5px; background:url(../images/content/familie-b-350x480.jpg) center center; background-repeat: no-repeat; background-size: cover;}
.start > .frei p span{width:100%; height:100%; display:flex; justify-content: center; align-items: flex-end; position:relative; font-weight:700; color:rgba(255,255,255,1); font-size:30px; background:rgba(0,0,0,0.3); padding:70px 0; box-sizing:border-box}
.start > .frei p span:hover{background:rgba(0,0,0,0)}

.start > .links p:first-child{border-width:0 7.5px 7.5px 7.5px; }
.start > .links p:last-child{border-width:7.5px 7.5px 0 7.5px}
.start > .links p a{width:100%; height:100%; display:flex; justify-content: center; align-items: flex-end; position:relative; font-weight:700; color:rgba(255,255,255,1); font-size:30px; padding:70px 0; box-sizing:border-box}
.start > .links p:hover{background:rgba(0,0,0,0);}
.start > .links p a:hover{color:var(--yellow); text-shadow:0 0 3px rgba(0,0,0,0.5)}
.start > .links p:nth-child(1) a:after{content:"";position:absolute; top:0; left:0; height:100%; width:100%; background:url(../images/content/elektrokontrolle-1920x1280.jpg) center center; background-repeat: no-repeat; background-size: cover; z-index:-1}
.start > .links p:nth-child(2) a:after{content:"";position:absolute; top:0; left:0; height:100%; width:100%; background:url(../images/content/haushaltsgeraete-1920x1280.jpg) center center; background-repeat: no-repeat; background-size: cover; z-index:-1}

@media only screen and (max-width:1800px){
    .start > .welcome{padding:30px}
    .start > .frei span,.start > .links a{padding:60px 0!important}
}

@media only screen and (max-width:1400px){
    .start > .welcome{padding:15px}
    .start > .frei span,.start > .links a{padding:45px 0!important}
    .start > .welcome .contact a{margin:0 15px 0 0}
    .start > .welcome{width:50%} 
    .start > .links{width:30%}
}
@media only screen and (max-width:1000px){
    .start > .welcome{width:100%; height:70%; border-right:none; border-bottom:7.5px solid #FFF}
    .start > .links{width:60%;}
    .start > .links p{height:30%; width:50%;}
    .start > .links p a{font-size:20px}
    .start > .links p:first-child{border-width:7.5px 7.5px 0 0}
    .start > .links p:last-child{border-width:7.5px 7.5px 0 7.5px}
    .start > .frei{width:40%}
    .start > .frei p{height:30%; width:50%}
    .start > .frei p span{font-size:20px}
    .start > .frei p:first-child{border-width:7.5px 7.5px 0 7.5px}
    .start > .frei p:last-child{border-width:7.5px 0 0 7.5px}
}
@media only screen and (max-width:700px){
    .start{height:auto}
    .start > .welcome{width:100%; height:100%; padding:45px 15px 15px 15px}
    .start > .links,.start > .frei{width:100%;}
    .start > .links p{width:100%; height:200px}
    .start > .frei p{height:240px}
    .start > .links p:first-child{border-width:7.5px 0 7.5px 0}
    .start > .links p:last-child{border-width:7.5px 0 0 0}
}

/* CONTENT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.content{width:100%; max-width:1024px; padding:15px; box-sizing:border-box; margin:60px auto; position:relative}

/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {--blue: #6CF;--font: #000;--yellow: #ffed00}

@font-face {font-family: 'ubuntobold'; src: url('../fonts/Ubuntu-Bold.woff2') format('woff2'), url('../fonts/Ubuntu-Bold.woff') format('woff'); font-weight: 700; font-style: normal;}
@font-face {font-family: 'ubuntoregular'; src: url('../fonts/Ubuntu-Regular.woff2') format('woff2'), url('../fonts/Ubuntu-Regular.woff') format('woff'); font-weight: 300; font-style: normal;}

html {font-size: 62.5%; scroll-behavior:smooth}
body {background: #FFF; font-size: 20px;line-height: 30px; font-weight: 300; font-family: 'ubuntoregular', sans-serif; color:var(--font)}

a,a:visited {color: var(--font); text-decoration: none;}
a:hover{color:var(--font)}
strong {font-weight: 700}
p {margin:0 0 20px 0}

h1{font-size: 60px; line-height:70px}
h2{font-size: 40px;line-height: 50px}
h1,h2{margin:0 0 30px 0; font-weight: 700; color:var(--font); -webkit-hyphens:none; -moz-hyphens:none; hyphens:none}

@media only screen and (max-width:1400px){
    h1{font-size: 40px; line-height:50px;}
    h2{font-size: 30px;line-height: 40px}
}

/* TRANSISTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.transition{-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}
.transition:hover{-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}
.transition:after{-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}
.transition:after:hover{-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}

/* COOKIE-BANNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.cookie-banner{position:fixed; width: calc(100% - 40px);bottom:10px;right:10px;padding:15px 10px 10px 10px; background:rgba(0,0,0,0.8);border:1px solid #333;border-radius:9px;color:#fff;text-align: center;z-index:100002;}
.cookie-banner button{background:#fff;color:#000;margin:10px 0 0 0;border-radius:5px;padding:0 10px}
.cookie-banner a{color:#FFF; text-decoration: underline}
.cookie-banner a:hover{text-decoration:none;}
.cookie-vorhanden{display:none;}