@charset "utf-8";
html{color: #fff;}
body{font-size: 16px; scroll-behavior: smooth; font-family: 'Montserrat'; overflow-x: hidden; hyphens: auto;}

@font-face {font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 500;
    src: url('../fonts/montserrat-v29-latin-500.woff2') format('woff2'),
         url('../fonts/montserrat-v29-latin-500.ttf') format('truetype');}
 
  @font-face {font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 800;
    src: url('../fonts/montserrat-v29-latin-800.woff2') format('woff2'),
         url('../fonts/montserrat-v29-latin-800.ttf') format('truetype');}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{font-family: 'Montserrat';}
p, li{font-family: 'Montserrat'; font-style: normal; font-weight: 500;}
a{text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;}

:root{
--petrol: rgba(26, 140, 165, 1);
--h-petrol: rgba(125, 216, 234, 1);
--blue: rgba(0, 56, 123, 1);
--grau: rgba(102, 102, 102, 1);
--dark: rgba(33, 37, 41, 1);
--white: rgba(255, 255, 255, 1);
}

.bg-petrol{background: var(--petrol); color: var(--white);}
.bg-h-petrol{background: var(--h-petrol); color: var(--white);}
.icons{display: none;}
.bold{font-weight: 800;}
::-moz-selection {background: var(--grau); text-shadow: none; color: var(--white);}
::selection {background: var(--grau); text-shadow: none; color: var(--white);}

#top-bar{background: var(--white); border-bottom: 1px solid var(--blue);}
.top-bar-brand{font-weight: 800; line-height: 40px; font-size: 1.75rem;}
.top-bar-kontakt:hover{  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;}
.top-bar-kontakt:hover{-moz-transform: scale(1.1) rotate(4deg);
  -webkit-transform: scale(1.1) rotate(4deg);
  -o-transform: scale(1.1) rotate(4deg);
  -ms-transform: scale(1.1) rotate(4deg);
  transform: scale(1.1) rotate(4deg);}
.menubutton{line-height: 40px; font-size: 2rem;
}
.menubutton{color: var(--dark);}
.menubutton:hover, .menubutton:focus, .menubuton:active{color: var(--dark); opacity: .6;}

#site-header{
    min-height: 80vh;
    padding-top: 100px;
    padding-bottom: 40px;
    background: url(../images/hero-petrol-bg.svg) center bottom;
    background-size: cover;}
.logo-text{max-width: 500px; height: auto;}

#site-main{min-height: 800px;}
.leistungen-list{font-size: 1.25rem; font-weight: 800; line-height: 2rem;}

#site-footer{
    background: var(--petrol);
    color: var(--white);
    font-size: 0.75rem;}

#site-footer a{color: var(--white);}
#site-footer a:hover, a:focus{color: var(--white); opacity: .6;}


/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {

}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {

}