/*	
Layout für Home
--------------------
used in: home.php
*/

/* Variablen 
   ---------
 */
 /* Mobile */
:root {  
  --mobil-display: block;
  --pc-display: none;
  --a-color: white;
  --header-large-display: none;
  --header-small-display: block;
  --header-height: 50px;
  --menu-toggle-display: block;
  --display-header-table: table-cell;
  --display-header-table_pc: none;
  --main-top: 50px;
  --main-green: #4CAF50;
}
/* PC */
@media all and (min-width: 900px) {  
  :root {  
  --mobil-display: none;
  --pc-display: block;
  --a-color: white;
  --header-large-display: block;
  --header-small-display: none;
  --header-height: 40px;
  --menu-toggle-display: block;
  --display-header-table: none;
  --display-header-table_pc: table-cell;
  --main-top: 50px;
  }
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v13/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
  /* unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; */
}

/* Typselektoren */
html, body {
  font-family: 'Raleway';
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: auto;
}
body {
  top: var(--main-top);
  background-color: white;
}
body, .wrapper {
  margin: 0px auto;
}
main {
  position:relative;
  display: block;
  margin-top: var(--main-top);
  margin-left: auto;
  margin-right: auto;
  background-color: #f9f9f9;
}
div.container_home{
    position:relative;
    margin: 20px auto; 
    padding: 20px 10px; 
    width:90%;
    max-width:750px;
    text-align: justify;
    background-color: white;
    box-shadow: 0 0 5px 0 lightgrey;
    border:0px;
    border-radius: 5px;
}
.container_home table{
    width:100%;
    font-size:15px;
}
.container_home table tr{
    height:25px;
}
.container_home table tr td:nth-child(2){
    color:var(--main-green);
    float:right;
    font-weight:bold;
}
.container_home table tr:nth-child(2) td:nth-child(2){
  color:var(--main-green);
  /*  color:#f44336; */
}
.container_home table#liefer_table{
    width:100%;
    font-size:15px;
}
.container_home table#liefer_table tr{
    height:25px;
}
.container_home table#liefer_table tr td:nth-child(2){
    color:var(--main-green);
    float:right;
    font-weight:bold;
}
h1{
    font-size:1.8em;
}
h2{
    font-size:1.3em;
}
h3{
    font-size:1.1em;
}
h1,h2,h3,h4{
    position:relative;
    display:table;
    padding: 10px 0px;
    border-bottom:2px solid var(--main-green);
    margin:auto;
}
header {
  z-index: 2;
  display: var(--header-display);
  position: relative;
  height: var(--header-height);
  width: 100%;
  top: 0px;
  left: 0px; 
  right: 0px;
}

a {
  text-decoration: none;
  color: var(--a-color);
}
a:hover {
  color: gray;
}
a.nav {
  height:100%;
  width:100%;
  text-decoration: none;
  color: black;
}
a.nav:hover {
  color: white;
}

table#hel_NavTable {
  z-index: 2;
  position: fixed;
  display: table;
  height: 50px;
  width: calc(100% - 12px);
  top: 0px;
  left: 0px;
  padding: 0;
  border-collapse: collapse;
  margin: 0;
  background-color: lightgray;
  cursor: pointer;
}
tr.hel_NavRow {
  padding: 0;
  margin: 0;
}
table#footer_table {
  z-index: 2;
  position: relative;
  display: table;
  height: 100px;
  width: 100%;
  padding: 0;
  border-collapse: collapse;
  margin: 0;
  background-color: lightgray;
}

th.navbar_col {
  padding: 0px;
  border: solid 1px;
  margin: 0;
  background-color: lightgray;
}
th#hel_NavToUser:hover {
  background-color: gray;
}
/* ID-Selektoren (für Einzelelemente) */
#hel_NavColMenu {
  width:auto;
  display: var(--display-header-table);
}
#hel_NavColMenuPC {
  width:auto;
  display: var(--display-header-table_pc);  
}
#menu2{
  position:absolute;
  top: 0px;
  right: 0px;
  margin:0px;
}
#menu2 li{
  display:inline;
  padding: 10px 20px;
  font-size: 20px; 
  font-weight:normal;
}
#menu2 li a{
    color:black;
}
#menu2 li a:hover{
    color: var(--main-green);
}

#hel_NavToUser {
  width:calc(60px + 1vw);
}
#order_col {
  width:calc(130px + 1.5vw);
  background-color:var(--main-green);
}
#order_col:hover {
  background-color:green;
}
.navbar_span {
  display:block;
  position: relative;
  height: 50px;
  width:100%;
  line-height: 50px;
}
.navbar_div {
  display:block;
  position: relative;
  top: 0px;
  right: 0px;
  height: 50px;
  width:100%;
  line-height:50px;
}
div#menu_toggle{
  display: var(--menu-toggle-display);
}

i.nav {
  display: block;
  position: relative;
  top: 10px;
  font-size: 30px;
}
#hel_NavToShop {
  position: absolute;
  left:0px;
  right:0px;
  font-size: calc(15px + 0.2vw);
  color: white;
}
.homebutton{
  position:relative;
  display:table;
  background-color: var(--main-green);
  border: none;
  border-radius: 3px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  width:auto;
  margin: 30px auto;
  cursor: pointer;
  box-shadow: 0 0 10px 0 darkgrey;
}
#hel_MapOpen{
    position:absolute;
    margin: auto;
    top:0;
    right:0;
    left: 0;
    bottom:0;
    height: 50px;
}

#footer_li{
  margin:0;
  padding:0;
  position:absolute;
  top: 0px;
  width:100%;
}
#footer_li li{
  display:inline;
  padding: 10px calc(5px + 1vw);
  font-size: calc(12px + 0.3vw); 
  font-weight:normal;
  cursor:pointer;
}
#footer_li li a{
    color:black;
}
#footer_li li a:hover{
    color: var(--main-green);
}

div#map {
    position:relative;
    height:400px;
    width:100%;
    background-color:lightgrey;
}
div#home_image_container{
    position:relative;
    top:50px;
    background-color:white;
    width:100%;
    height:auto;
    margin:auto;
    margin-bottom:70px;
}
div#dummy_home{
    position:absolute;
    left:0px;
    width:50%;
    height:100%;
    background-color:rgb(40, 47, 92);
}
div#dummy_home2{
    position:absolute;
    right:0px;
    width:50%;
    height:100%;
    background-color:rgb(34, 34, 59);
}
#home_image_container img#mainimg{
    position:relative;
    margin:auto;
    max-width:100%;
    max-height:500px;
    display:block;
}
#home_image_container img#logo2{
    position:absolute;
    margin:auto;
    z-index:1;
    left:0px;
    right:0px;
    bottom:calc(10px + 1vw);
    max-width:100%;
    height:calc(10px + 10vw);
    max-height:100px;
    display:block;
    background-color:white;
    border-radius:5px;
    box-shadow: 0 0 5px 0 lightgrey;
}

a[href^=tel], a[href^=mailto] {
  color: blue;
  display: inline-block;
  font-style: normal;
  text-decoration: none;
}

a#desk_btn{
  color:white;
  display:table;
}


::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(128,128,128,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(0,0,0,0.4); 
}