/* ~~~ Style ~~~ */
/* Colors and Fonts */

h1, #hero-text, .nav-li > a, .tel-btn,
#footer-content p, .related-topic-name, .s-tile-btn, #contact-text, #offer-btn{
  color: white; /* white */
}

.related-hastag{
  color: rgb(217,151,47); /* Yellow */
}

#leistung-titel, #company-name{ /* Black  */
  color: black;
}



/* Backgrond-colors */

#nav, #nav-bar, #offer-btn, #contact-text, .related-box{
  background-color: rgb(56,43,40); /* Brown */

}

.s-tile-btn, .tel-btn, #offer-btn{
  background-color: rgb(217,151,47); /* Yellow */
}

h1, h2, h3, a, p, button, input{
  font-family:  Rubik;
}

/* ______ General ______ */

a{
  text-decoration: none;
}


main{
  width: 100%;
}

body{
  position: sticky;
  top: 0;

  margin: 0;
}

h1{
  font-size: clamp(24px, 6vw, 48px);
}

h2{
  margin: 1rem;
}

h3{
 margin: 0; 
}

p{
  text-align: justify;
}

/* ______ Reuseable Elements ______ */

.tel-btn{
  border-radius: 10vw;

  height: 5vh;
  width: clamp(175px, 35vw, 400px);

  padding: .5vw;
  font-size: clamp(15px, 3.5vw, 31px);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* _______ Footer ______ */

footer{
  position: relative;

  height: 30vh;

  padding: 2vw;
}

footer::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8); /* overlay */
  z-index: 1;
}

footer>div{
  position: relative;
  z-index: 2;

  padding: 2vh 0;
}



/* ______ Hero ______ */

#hero{
  width: 100%;
}

#hero-div{
  width: 100%;
  height: 33vh;

  display: block;

  position: relative;
}

#hero-cover{
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: linear-gradient(
    to top,
    rgba(56,43,40, 1) 0%,
    rgba(120, 105, 101, .8) 40%,
    rgba(120, 105, 101, .01) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

#hero-text-div{
  position: absolute;
  bottom: 0;
  left: 0;

  padding: 2vw;
}

#hero-text{
  display: none;
  font-size: clamp(18px, 4vw, 36px);
}

/* ______ Nav ______ */

#nav-div{
  position: sticky;
  top: 0;
  background: white;
  z-index: 1000;

  border-bottom: black solid 1px;

  height: 9vh;
  width: 100%;

}

#nav-div > div{

  height: 9vh;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

#h1-nav{
  display:none;
}

#logo-nav{

  height: 8vh;
  width: 8vh;
}

#nav-ul {
  list-style: none;
  margin: 0;

  padding: 0.5rem;
}

.nav-li{
  margin: 2vw;
  list-style: none;
}

.nav-li > a{
  font-size: clamp(15px, 3.5vw, 31px);
}

#nav {
  display: none; 

  position: relative;
  top: 0;
  left: 100vw;
  width: 60vw;
  height: 92vh;

  transition: left 0.3s ease;
}

#nav-bar{
  padding:1vw;
}

#tel-icon{
  height: 4vh;
  width: 5vh;
}

#menu{
  border:none;
  border-radius: 10px;

  height: 8vh;
  width: 8vh;

  font-size: clamp(36px, 8vw, 72px);
}

.footer-text{
  margin: 0;
  font-size: clamp(15px, 3.5vw, 31px);
}


/* ______ Tel ______ */

#phone-nummer-div{
  display: none;
}

/* ______ Home text ______ */
#home-text-image{
  position: relative;

  height: auto;
}

#home-text-overlay{
  position: absolute;
  inset: 0;
  background: rgba(205, 205, 205, 0.8);
}

#home-text{
  position: relative;

  padding: 10vw;
}

#company-name{
  font-size: clamp(20px, 8vw, 300px);
}


#intro-div, #years-sec{
  height: auto;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#intro-sec{

  border-top: rgb(56,43,40) solid 1px;
  border-bottom: rgb(56,43,40) solid 1px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#intro-sec > h2{
  text-align: center;
}

#logo-main{
  height: 40vw;
  width: 40vw;
}

#janos{
  border-radius: 50%;

  height: 40vw;
  width: 40vw;
}

#years-div{
  align-self: center;
}

#years{
  height: 40vw;
  width: 40vw;
}

#tel-main{
  margin-top: 0;
  text-align: left;
}


/* ______ Servise tiles ______ */

#s-tiles{
  height: 550vh;
  padding-top: 10vh;
}

.s-tile{
  margin: 2vh 5vw;
  position: relative; 

  height: 43vh;
  width: 90vw;
}

.s-tile-border{
  position: absolute;
  bottom: 0;

  border: solid black 1px;
  border-radius: 4px;

  height: 40vh;
  width: 85vw;
}

.s-tile-sec{
  position: absolute;
  bottom: 2vw;

  padding: 0 4vw 2vw 4vw;
}

.s-tile-image{
  position: absolute;
  right: 0;

  border-radius: 4px;

  height: 22vh;
  width: 75vw;
  object-fit: cover;

  z-index: 10;
}

.image-top{
    object-position: top;
}

.s-tile-title{

}

.s-tile-text{
  margin: 0.5rem 0;
}

.s-tile-btn{
  border: none;
  border-radius: 3px;

  height: 9vw;
  width: 35vw;

  font-weight: 700;
}
/* ______ Kontakt Text ______ */

#contact-text{
  padding: 5vw;
}

/* ______ Offer Form ______ */

#offer-form-div{
  position: relative;
  
  height: auto;

  padding: 10vw 6vw;
}

#offer-overlay{
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
}

#offer-form{
  position: relative;

  height: auto;

  padding: 2vw;
}

#offer-form-top{
  display: flex;
  flex-direction: column;
}

.offer-input{
  margin-bottom: 0.5rem;

  border: solid gray 1px;
  border-radius: 4px;

  background-color: rgb(255, 255, 255, .5);
}

#offer-text{
  height: 12vh;
  width: 82vw;

  border: solid gray 1px;
  border-radius: 4px;

  background-color: rgb(255, 255, 255, .5);
}

#offer-selects{
  display: flex;
  flex-direction: column;
}


#offer-form-bottom{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#offer-btn{
  margin: 2vh;

  border: none;
  border-radius: 3px;

  height: 9vw;
  width: 35vw;

  font-weight: 700;
}

/* ______ Leistungen Page ______ */
/* ______ Offer Body ______ */

#leistung-titel{

}

#leistung-body{
  padding: 5vw;
  width: 90vw;
}

#leistung-image{
  width: 90vw;
}

/* ______ Related Topics ______ */

#related-topics{
  padding: 5vw;

  display: flex;
  flex-wrap: wrap;
}

.related-box{
  margin: 1vw;

  height: 3vh;

  padding: 1vw;
  display: flex;
}

.related-hastag{
  margin: 3px;
}

.related-topic-name{
  margin: 3px;
}

/* ______ Referenz Page ______ */
/* ______  ______ */

.ref-div{
  margin-top: 5vh;
  background-color: rgb(56, 43 ,40 , .1);

  padding: 1rem;

}

.ref-images{
  padding: 1rem 0;
}

.ref-arrow{
  height: 40vw;
  width: 10vw;  
}

.ref-r-arrow{
  transform: scaleX(-1);
}

.ref-images{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.ref-image-container{
}

.ref-img{

  height: 70vw;
  width: 70vw;

  object-fit: cover;
}


.ref-datum{
  text-align: right;

  color: rgb(0, 0, 0, .3);
}

.not-current-img{
  display: none;
}

/* media: query:  tablets and bigger devices*/
@media screen and (min-width: 786px) {

}

/* media query: laptops and bigger device */
@media screen and (min-width: 992px) {

#hero-div{
  width: 100%;
  height: 30vh;
  display: block;

  background: url("Static/hero_image.jpg") no-repeat center top/cover;

  position: relative;
}

/* ______ phone-nummer ______ */

#phone-nummer-div{
  display: block;
}

}

/* media query: bigger device */
@media screen and (min-width: 1500px) {
  
}