/* === Farben === */
/*
Blau:       #1F4E8C
Dunkelgrau: #3D3F45
Hellgrau:   #E5E5E5
Rot:        #A62C21
mod Hellgrau: #F0F0F0
dunkleres Sand: #b6a08f;
#fbfaf7 stufe 1 -> als rgba(251, 250, 247, 0.0)
#f5f2ea stufe 2 -> als rgba(245, 242, 234, 0.0)
#efeadd stufe 3 -> als rgba(239, 234, 221, 0.0)
#483f22 stufe 9 -> als rgba(72, 63, 34, 0.0)
#322c17 stufe 10 -> als rgba(50, 44, 23, 0.0)
....
#483f22 stufe 10
 */
/* === FONTS Einbinden lokal === */
/* ===    Second font Rock Saldfor Headlines (h1, h2,...) 
  https://www.1001fonts.com/rock-salt-font.html
  free for private or commercial use      === */

@font-face {
  font-family: font-rock;
  src:url("../fonts/rock-salt/RockSalt.ttf");
}




 /* === Global === */

html {
    
    color:  #483f22;

}

body {
  margin: 0;
  font-family: 'Lato','Arial', sans-serif;
  background-color: #fbfaf7;

  font-size: 1.2rem;


  
}

* {
  box-sizing: border-box;
}

p {
    /*font-size: 1.1rem; 
    font-size: 1.9vw;
    min-font-size:calc(100% + 0.2vw);
    font-size:calc(100% + 0.2vw);*/
    font-size: 90%;
    line-height: 1.4rem;
}

h1 {
  
  font-family:  font-rock;
  
}
/*
h1 {
  font-size:  3rem; 
  
}
h2 {
  font-size:  1.5rem; 
  
}
h3 {
  font-size:  1rem;
}
*/

    h1{
      font-size: 180%;
      margin-top:  20px;
      margin-bottom:  20px;
    }
    h2{font-size: 150%}
    h3{font-size: 100%}
    h4{font-size: 120%}
    h5{font-size: 110%}

a {
  text-decoration: none;
  color: #A62C21;
  font-weight: 600;
}

em {
  font-weight: 600;
}




/* === BANNER IMAGE === */
#bg-img {
  background-image: url("../images/banner-image.png");
  min-height: 400px;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* Needed to position the navbar*/
  position: relative;
}

/* Position the navbar container inside the image */
#container-nav {

}
 

/* === SKELETON === */

.container{
  width: 80%;
  margin: auto;
  overflow: hidden;
  padding-bottom: 40px;
}

.boxes-main{
  padding-top:  30px;
}

#boxes{
  padding-top:  30px;
}

.box-whole-width{
  /*float:  left; */
  width: 100;
  text-align: justify;
  padding: 30px 5px 0 5px;
}
.box-whole-width h3{
    font-family: lato;
    color: #483f22;
}

.box-two-third{
  float:  left;
  width: 70%;
  text-align: justify;
  padding: 30px 30px 0 5px;
}

.box-two-third h3{
  font-family:  lato;
  color: #483f22;
}
hr{
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  
  color:  rgba(245, 242, 234, 0.5);
  width:  50%;
}

.small-container{
  padding-top: 60px;
  padding-bottom: 20px;

}
.box-one-third{

  float: right;
  width: 30%;
  padding: 15px 10px 15px 20px;
  background-color: #483f22;
  border: 3px;
  border-color: #483f22;
  border-radius: 5px;


}
.box-one-third h2, h3{
  
  color: #fbfaf7;
  padding: 10px 10px 10px 0;

}
.box-one-third p, li{
  font-size: .8rem;
  color: #fbfaf7;
  padding-bottom:  10px;

}

ul {
  list-style: none;
  padding: 0;
}
li {
  padding-left: 1.3em;
  color: #483f22;
  font-size: 90%;
  
}

li:before {
  content: "\f101"; /* FontAwesome Unicode: https://www.securetech.com.au/font-awesome-icons.php */
  font-family: FontAwesome;
  color: #483f22;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}

.box-one-third li{
  padding-left: 1.3em;
  color: #fbfaf7;
  font-size: 70%;
}

.box-one-third li:before {
  content: "\f101"; /* FontAwesome Unicode: https://www.securetech.com.au/font-awesome-icons.php */
  font-family: FontAwesome;
  color: #fbfaf7;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}




footer .container{
  padding: 20px;
  margin-top: 20px;
  color: #483f22;
  background-color: #fbfaf7;
  border-top: solid 3px;
  border-color: #483f22;
  text-align: center;
}


/********* START NEUER STYLE für Dropdown Nav Menü
 * 
 * https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp
 * 
 *  *********/
/* Add a black background color to the top navigation */
.navbar{
  width:  80%;
  margin: auto;
  background-color: transparent;
  overflow: hidden;
}

/* Style the links inside the navigation bar */

.navbar .logo{
  float: left;
  display: block;
  color: #efeadd;
  text-align: center;
  padding: 16px 10px;
  text-decoration: none;
  font-size: 110%;
}
.navbar a {
  float: left;
  display: block;
  color: #efeadd;
  text-align: center;
  padding: 20px 10px;
  text-decoration: none;
  font-size: 110%;
}

/* Add an active class to highlight the current page */
.active {
  background-color: rgba(166,44,33, 0.8); /* #483f22;  #b6a08f; rot #A62C21;#b6a08f;*/
  color: #efeadd; 
}
/* Hide the link that should open and close the topnav on small screens */
.navbar .icon {
  display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .btn {
  font-size: 110%;
  font-weight: 600;
  border: none;
  outline: none;
  color: #efeadd;
  padding: 20px 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-menu {
  display: none;
  position: absolute;
  background-color: transparent;
  min-width: 80px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-menu a {
  float: none;
  color: #efeadd; /*black; */
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .btn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-menu a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* Für Screens die kleiner als 1024px sind */
@media screen and (max-width: 1024px) {
  body {
    font-size: 0.9rem;
  }
   .navbar a.logo img{
      width: 90px;
    }
    #bg-img {
      min-height:  250px;
    }
    .box-one-third li {
    font-size: 80%;
}
  }

/* Für Screens die kleiner als 768px sind */
@media screen and (max-width: 768px) {
    .navbar a:not(:first-child), .dropdown .btn {
    display: none;
    }
    .navbar a.icon {
    float: right;
    display: block;
    }
        #boxes .box,.box-two-third,.box-one-third{
      float: none;
      text-align: center;
      width: 100%;
  }
      #bg-img {
      min-height:  200px;
    }
    .box-one-third li{
      font-size:  90%;
    }

  @media screen and (max-width: 768px) {
    .navbar.responsive {
      position: relative;
      background-color: rgba(72,63,34, 0.8);
    }
    .navbar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
    }
   .navbar.responsive .logo img{
      width: 90px;
      position:  absolute;
      left: 10px;
      top: 20px;
    }
    .navbar.responsive a {
    float: none;
    display: block;
    text-align: center;
    font-size:  90%;
    padding-bottom:  16px;
    margin-bottom:  20px;


    }
    .navbar.responsive .dropdown {float: none;}
    .navbar.responsive .dropdown-menu {position: relative;}
    .navbar.responsive .dropdown .btn {
    display: block;
    width: 100%;
    text-align: center;
    font-size:  90%;

    }
  }
/********* ENDE NEUER STYLE für Dropdown Nav Menü *********/


/* 60em = 60x16px = 960px weite: */
@media screen and (min-width: 900px){
html, body{
    font-size:120%;
    line-height: 1.2rem};
    h1{font-size: 240%};
    h2{font-size: 230%};
    h3{font-size: 210%};
    h4{font-size: 180%};
    h5{font-size: 150%}
}