/* CSS Stylesheet for Berger Haushaltgeraete */
/* Author: eev | aae */

@import "cookies.css";
@import "hamburger.css";
@import "responsive.css";

/* Conditions */
:root {--grau_1: #F7F7F7; --grau_2: #707070; --blau: #1070C3;}
html {scroll-behavior:smooth}
body {font-family: "ff-dax-pro", sans-serif; width:100%; height:100vh}
img {pointer-events: none;}

/* Fontstyle */
h1 {color: var(--blau); font-weight:600; font-size:40px; line-height:1.2em; margin-bottom:30px}
h2 {color: var(--blau); font-weight:600; font-size:24px; line-height:1.2em; margin-bottom:20px}
p {color:#343A40; font-weight:400; font-size:20px; line-height:1.2em}
a {text-decoration:none; color:var(--blau); font-weight:600}
a:hover {color:black}

/*Top Banner */
.top-banner {margin:0; background-color:white; width:100%; padding-top:25px;}
.logo {width:280px}
.topcall {position:fixed; top:25px; left:0; width:100%; display:flex; justify-content:center; align-items:center; z-index:20}
.topcall-mobile {display:none}
.btn-topcall {width:50px; height:50px; border-radius:50%; background-color:var(--blau); margin-right:20px; text-align:center}
.btn-topcall:last-child {margin-right: 0}
.btn-topcall:hover {background-color:black; color:white}
.btn-topcall a {color:white !important; font-size:25px; line-height:50px}

/* Intro */
.intro {width:100%; height:80vh; display:flex; justify-content:center; align-items:center; margin-bottom:100px}
.home {background-image: url(../images/intro-electrolux-2.jpg); background-position:center; background-size:cover; background-attachment:fixed;}
.geraete {background-image: url(../images/intro-haushaltgeraete.jpeg); background-position:center; background-size:cover; background-attachment:fixed;}
.service {background-image: url(../images/intro-service.jpg); background-position:center; background-size:cover; background-attachment:fixed;}
.berger {background-image: url(../images/groupe.jpg); background-position:center; background-size:cover; background-attachment:fixed;}

/* Call Intro */
.flexbox-callintro {display:flex; flex-wrap:wrap; justify-content:center; gap:50px}
.flexbox-callintro > div {width:150px; height:150px; border-radius:50%; background-color:white}
.flexbox-callintro img {width:100%}
.flexbox-callintro > div:hover {background-color:var(--blau)}
.active {background-color:var(--blau) !important}
.active:hover {background-color:white !important}
.hidden {display:none}

/* Content */
.top100 {margin-top:100px}
.bottom100 {margin-bottom:100px}
.current-bild {width:100%; height:40vh; object-fit:cover; margin-bottom:50px}

/* Kompetenzen */
.kompetenzen {width:100%; margin:0; background-color:var(--grau_1); padding-top:50px; padding-bottom:75px; text-align:center; margin-bottom:-50px}
.flexbox-kompetenzen {display:flex; flex-wrap:wrap; justify-content:center; gap:25px;}
.flexbox-kompetenzen > div {width: 300px; text-align:center}
.picto {width:125px; height:125px; border-radius:50%; background-color:white; margin:0 auto}
.picto img {width:100%; margin-bottom:25px}

/* Issuu */
.issuu {position:relative; width:100%; overflow:hidden; padding-top:75%}
.responsive-iframe {position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none}

/* Partner */
.flexbox-partner {display:flex; flex-wrap:wrap; justify-content:center; gap:50px; margin-bottom:50px}
.flexbox-partner > div {display:flex; align-items:center; justify-content:center; width:180px; height:120px; border:solid 1px var(--blau); background-color:white; padding:15px}
.flexbox-partner > div:hover {box-shadow: 10px 10px var(--blau);}

/* Portrait */
.flexbox-portrait {display:flex; flex-wrap:wrap; justify-content:center; gap:100px; margin-top:100px}
.flexbox-portrait > div {width:240px; text-align:center; margin-bottom:50px}
.flexbox-portrait img {width:180px; height:180px; border-radius:50%; object-fit:cover; object-position:top; margin-bottom:25px}

/* Call to Action + Google Map*/
.content-call {position:relative; width:400px; background-color:var(--blau); border-radius:3px; padding:15px; text-align:center; z-index:10; margin: 0 auto}
.content-call h2 {margin-bottom:0; color:white}
.map {width:100%; height:600px; border:0; margin-top:-70px; margin-bottom:-6px}

/* Adresse */
.adresse {width:100%; background-color: var(--blau); margin-top:0px}
.flexbox-adresse {display:flex; flex-wrap:wrap; justify-content:stretch; align-items:center}
.flexbox-adresse > div {flex-grow:1}
.flexbox-adresse > div:last-child {padding:25px}
.flexbox-adresse h2 {color:white !important}
.flexbox-adresse i {color:white !important; margin-right:10px}
.flexbox-adresse td {font-weight:600; font-size:20px; line-height:1.2em; color:white}
.flexbox-adresse a {color:white !important; text-decoration:none !important}
.flexbox-adresse a:hover {color:black !important}
.adresse-bild {width:100%; height:400px; object-fit:cover}
.adresse-bild img {width:100%; margin-bottom:25px}

/* Footer */
.footer {background-color:black; width:100%; padding:50px 0; color:white; font-size:18px}
.footer a {color:var(--grau_2); text-decoration:none;}
.footer a:hover {color:var(--grau_1)}