/* 
   Servus Georg, do is der Joseph

   kurze Erklärung:
   in dieser Datei konnst du Farben und Bilder ändern wie unten beschrieben.
   De HTML Datei konnst du einfach im Browser öffnen.
   Zum Updaten nach ner Änderung muast as css speichern und as HTML oafach nei lon.
   
   Im screenshots Ordner sigst du wias für mi ausschaugt, evtl is bei dir bissl anders
   
   
   Jetz zur Bedienung:


   Bilder:
   do muast du erst de gewollten Buidl im img oder backgrounds Ordner hinterlegen
   danach konn ma de url Adressen oafach abändern 
   (wenns koa jpg is dann muast de enstsprechende Endung übernehma)
   Damit de Buidl dann guad ausschaung muas mas oft nummoi zuaschnein


   Farben:
   des san ois Variabeln für die oanzelnen Farben
   jede Variable bestimmt dann an einigen Stellen die Farbe

   De Farbe werd durch die Werte hinter den Doppelpunkten bestimmt
   Do gibts verschiedene Formate wie:
   #123456 (Hexadecimal)
   oder rgb(256,256,256)

   ma konn entweder mit den codes umanandaspuin (werd nix)

   oder im Internet nach scheene Farben suacha, zB mit:
   https://www.hexcolortool.com/#414949
   https://digitalsynopsis.com/design/minimal-web-color-palettes-combination-hex-code/
   ma konn a einfach nach scheene Farbcodes googlen

   oder Farben kopieren:
   wenn dir a Farb gfoit de du grod sigst, aber den Code ned host, 
   konn ma im Browser mit Rechstclick auf Element untersuchen gehen 
   und dann mit der Pipette auf a Farbe clicken, so konn ma den Farbcode kopieren
*/



/* Bilder */
.main-backgroundimg{
   background-image: url("img/komprimiert/Baumdienst\ Feldkirchen\ Westerham1.jpg");
}
.main-img-1{
   background-image: url("img/komprimiert/Waldpflege\ Feldkirchen\ Westerham.jpg");
   height: 300px;
}
.main-img-1-2{
   background-image: url("img/komprimiert/Baumabtragung\ Feldkirchen-Westerham.jpg");
   height: 300px;
}
.main-img-2{
   background-image: url("img/komprimiert/Baumpflege\ Feldkirchen\ Westerham.jpg");
   height: 300px;
}
.main-img-2-2{
   background-image: url("img/komprimiert/Baumpflege\ Bruckmuehl.JPG");
   height: 300px;
}
.main-img-3{
   background-image: url("img/komprimiert/Forstbetrieb\ Feldkirchen\ Westerham.jpg");
   height: 300px;
}
.main-img-3-2{
   background-image: url("img/komprimiert/Holzernte\ Feldkirchen-Westerham.jpg");
   height: 300px;
}
.main-img-4{
   background-image: url("img/komprimiert/Baumfällung\ Bruckmühl\ 3.jpg");
   height: 300px;
}
.main-img-4-2{
   background-image: url("img/komprimiert/Baumfällung\ 83620.jpg");
   height: 300px;
   /* margin-bottom:200px; */
}
/* Team */
.main-img-5{
   background-image: url("img/Georg3.JPG");
   height: 300px;
}


/* Farben */
:root{
   --maincolor1:#5ea360; 
   /* --maincolor1:#4CAF50;  */
   --navcolor1:darkcyan;
   --textcolor1:rgb(224, 240, 222);
   --heroHeading:rgb(224, 240, 222); /*Herzlich Willkommen*/
   --footerhighlighter:black; /*Email und TNummer*/
}

/*  Falls du de Farben wieder zruckändern megst:
:root{
   --maincolor1:#4CAF50; 
   --navcolor1:darkcyan;
   --textcolor1:rgb(224, 240, 222);
} */

/* des war ois wos für di wichtig is */


body, .brand a, .nav-items a, .f-heading h2{
   color: var(--textcolor1);
}
.heading h2, .text p, .footer, .main-container{
   background-color: var(--maincolor1);
}
.navbar, .nav-items, .f-heading{
   background-color: var(--navcolor1);
}





/* Layout */
body{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
   overflow-x: hidden;
}
body p{
   font-size: 15px;
}

/* navbar ----------------------------------------------------------*/
.navbar{
   position: fixed;
   z-index: 6;
   width: 100%;
   height: 8vh;
   /* box-shadow: 0px 1px 2px black; */
   display: flex;
   justify-content: space-around;
   align-items: center;
}
.brand{
   font-size: 24px;
   letter-spacing: 1px;
}
.brand a{
   text-decoration: none;
}
.nav-items{
   position:absolute;
   margin: 0;
   padding: 0px;
   right: 0px;
   top:8vh;
   height: 92vh;
   width: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   transform: translateX(100%);
   transition: transform 0.5s ease-in;
   justify-content: space-around;
}
.nav-items li{
   list-style: none;
}
.nav-items a{
   text-decoration: none;
   letter-spacing: 1px;
   padding: 20px;
}
.dd-button div{
   width: 25px;
   height: 3px;
   border-radius: 1.5px;
   background-color: var(--textcolor1);
   margin: 5px;
}
.dd-button{
   cursor: pointer;
}
.nav-active{
   transform: translateX(0%);
}



/* main ------------------------------------------------------------------------*/
.home-screen{
   width: 100%;
}
.main-backgroundimg{
   width: 100%;
   position:fixed;
   z-index: -1;
   height: 100%;
   /* contain oder cover */
   background-size: cover;
}
.hero{
   /* background-color: indianred; */
   /* background-color: rgb(201, 230, 205); */
   width: 100%;
   height: 100vh;
}
.hero-text{
   margin: 0;
   padding: 15px;
   text-align: center;
   justify-content: center;
   text-shadow: 2px 2px black;

}
.hero-text p{
   color: var(--heroHeading);
}
.hero-text-top{
   padding-top: 45vh;
   font-size: 25px;
}
.hero-text-main{
   font-size: 50px;
}
.main-container{
   margin: 0;
   padding: 0;
}
.nav-adjustment{
   display: block;
   height: 0px;
}
.main-img{
   width: 100%;
   background-size: cover;
}
.img-l{
   display: none;
}
.heading h2{
   padding: 30px 30px 20px;
   margin: 0;
   font-size: 40px;
   line-height: 44px;
   text-align: center;
}
.bulletpoints{
   /* text-align: center; */
   padding-left: 30px;
   padding-top: 8px;
}
.text p{
   padding: 0px 30px 20px;
   margin: 0;
   line-height: 22px;
}
.text :last-child{
   padding-bottom: 20px;
}





/* footer ---------------------------------------------------------------- */
.footer{
   padding-bottom: 80px;
}
div,p{
   margin: 0;
   padding: 0;
}
.f-item{
   padding: 10px;
   text-align: center;
}
.f-text-highlight{
   font-size: 20px;
}

.f-heading{
   margin: 0px;
   margin-bottom: 5px;
   padding: 20px;
   text-align: center;
}
.f-popup-wrapper{
   width: 100vw;
   align-items: center;
   text-align: center;
   padding-bottom: 50px;
}
.f-popup {
   position: absolute;
   display: inline-block;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   border-radius: 5px;
   left: 0;

 }
 .f-popup-header{
   width: 40vw;
   margin-left: 27vw;
   margin-top: 20px;
   padding: 10px;
   background-color: var(--navcolor1);
 }
.f-popup-text {
   /* visibility: hidden; */
   display: none;
   width: 100vw;
   background-color: #555;
   color: #fff;
   border-radius: 6px;
   /* padding: 8px 0; */
   z-index: 1;
   bottom: 125%;
 }
 .f-popup .show {
   /* visibility: visible; */
   display: block;
   -webkit-animation: fadeIn 1s;
   animation: fadeIn 1s;
}
 @-webkit-keyframes fadeIn {
   from {opacity: 0;} 
   to {opacity: 1;}
 }
 
 @keyframes fadeIn {
   from {opacity: 0;}
   to {opacity:1 ;}
 }




/* phone ---------------------------------------------------------------------------- */
@media only screen and (min-width:990px) {
   
   /* body p{
      font-size: 16px;
   } */
   .brand{
      padding: 12px;
      padding-left: 50px;
      float: left;
      font-size: 30px;
   }
   .nav-items{
      position: relative;
      flex-direction: row;
      top: 0;
      height: 8vh;
      transform: translateX(0%);
   }
   .nav-item a{
      font-size: 12px;
      margin-right: 10px;
      white-space: nowrap;
      padding: 1.7vh;
      padding-inline: 0.5vw;;
      border-radius: 3px;
   }
   .nav-item a:hover{
      background-color: var(--textcolor1);
      color: darkcyan;
      transition: 0.15s ease-in;
   }
   .dd-button{
      display:none;
   }
   .nav-active{
      transform: translateX(0%);
   }
   .nav-adjustment{
      display:block;
      margin-top: -15vh;
      width: 0;
   }

   /* main -------------------------------------------------------------- */
   .main-container{
      display: flex;
      margin-bottom: 70px;
      border-radius: 10px;
      padding: 20px 40px 70px 40px;
   }
   .main1-container{
      display: block;
      margin-bottom: 70px;
      border-radius: 10px;
      padding: 70px 40px 70px 40px;
   }
   .main-img-container{
      width: 384px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
   }
   .main1-img-container{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   
   .main-img{
      border-radius: 10px;
   }
   .main-img-split{
      margin: 20px;
      /* border-radius: 10px; */
   }
   .img-l{
      display: flex;
   }
   .img-sm{
      display: none;
   }
   .main2-img-container{
      width: 384px;
      display: block;
      justify-content: center;
      align-items: center;
      padding-top: 50px;
   }
   .main3-img-container{
      width: 384px;
      padding-top: 50px;
      display: block;
      justify-content: center;
      align-items: center;
   }
   .main4-img-container{
      width:384px;
      padding: 30px;

      display: block;
      justify-content: center;
      align-items: center;
   }
   .main-text-container{
      width: 384px;
      padding: 30px;
   }
   .main1-text-container{
      /* width: 384px; */
      padding: 30px;
   }
   .home-screen{
      width: 100%;
      min-height: 1300px;
   }
   .screenwrapper{
      width: 768px;
      margin:0 auto;
   }
   .img-eiche{
      width: 100%;
   }
   .heading{
      padding: 0;
      font-size: 40px;
      line-height: 44px;
   }
   .text p{
      padding: 20px;
      line-height: 28px;
   }
   .bulletpoints p{
      line-height: 35px;
   }
   
/* footer------------------------------------------------------------------ */
   .footer{
      width: 100%;
      align-items: center;
   }
   .f-items{
      width: 768px;
      margin: 0 auto;
      padding-top: 20px;
      display: flex;
   }
   .f-item{
      width: 50%;
      text-align: center;
   }
   .f-text-highlight{
      font-size: 25px;
      color: var(--footerhighlighter);
   }
   .f-adress{
      margin-top: 30px;
      margin-left: 25%;
   }
   .footer p{
      font-size:20px;
   }
   .f-popup-header{
      margin-left: 29vw;
   }
}



/* PC -------------------------------------------------------------------- */
@media only screen and (min-width:1000px){
   .screenwrapper{
      width: 1000px;
      padding-top: 4vh;
   }
   .nav-item a{
      font-size: 15px;
      margin-right: 10px;
      white-space: nowrap;
      padding: 1.7vh;
      padding-inline: 1.2vw;;
      border-radius: 3px;
   }
   .main-text-container{
      width: 500px;
   }
   .main-img-container{
      width: 500px;
   }
   .heading{
      padding-bottom: 25px;
   }
   .text p{
      padding: 0;
   }
   .f-items{
      width: 1000px;
      margin: 0 auto;
   }
   .f-text-highlight{
      font-size: 28px;
      color: black;
   }
   .main-container{
      margin-bottom: 100px;
   }
}

@media only screen and (min-width:1400px){
   .screenwrapper{
      width: 1200px;
   }
   .main-text-container{
      width: 600px;
   }
   .main-img-container{
      width: 600px;
   }
   .f-text-highlight{
      font-size: 30px;
      color: black;
   }
}