﻿*{
    margin: 0px;
    padding: 0px;
}

/* ******************************** Grundlayout *****************/

html, body{
    background:url(gold2.jpg);
   /* background:url(stein03.jpg);  
    background-repeat: repeat;*/
}

#wrapper{
    width: 1000px; /* 1000 */
    height: auto;
    margin: 0 auto;
}

h1 {
    color: #4736e4;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
    font-size: 18pt;
    text-align: center;
}

h2 {
    color: #4736e4;
    padding-left: 20px;
    padding-top: 10px;
    font-size: 16pt;
}

h2 {
    color: #4736e4;
    padding-left: 20px;
    padding-top: 10px;
    font-size: 14pt;
}

h5 {
    color: #c0141d;
    padding-left: 0px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 16pt;
    text-align: center;
}

h6 {
    color: #129423;
    padding-left: 0px;
    padding-top: 5px;
    font-size: 12pt;
    text-align: center;
}

/* ******************************** Kopfbereich *****************/

#HeadContainer{
    width: auto;
    height: 130px;
}

.kopfbild {
    border-radius: 10px;
    margin-bottom: 25px;
    margin-top: 10px;
    margin-left: 20px;
    float: left;  
}    

#kopfbild_ersatz {
    width: 120px;
    height: 120px;
    /*border-radius: 10px;   */
    margin-bottom: 25px;
    margin-top: 10px;
    margin-left: 20px;
    float: left;  
    border: solid 1px;
    border-color: #000;
}

#Kopftext {
    width: 600px;
    height: 100px;
    margin-top: 40px;
    margin-left: 50px;
    color: #941616;
    font-size: 40px;
    text-align: center;
    float: left;
}

/* ******************************** Startseite *****************/

.Haupttext1 {
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 20px;;
}

.Haupttext2 {
    margin-top: 10px;
    margin-left: 20px;
}

#Titelfoto1 {
    width: auto;
    height: auto; /* 416*/
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}    

#Titelfoto2 {
    width: auto; /*340*/
    height: auto; /* 416*/
    float: right;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}   

.hauptbild {
    border-radius: 5px;
}


#Hauptinhalt {    
    height: auto;
    width: 100%;
    float: right;
  /*  background: #ffffff;   Hintergrundfarbe des Hauptinhaltes */
    color: # ooo;      /* Textfarbe des Hauptinhaltes */
    color: rgb(85, 59, 12);
    font-size: 20px;
    border-radius: 10px 10px 10px 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 130%; 
    text-align: justify;
}


/* ******************************** Haupt-Navigation **********************/
nav {
    width: 100%;
    }
    nav a:link {text-decoration: none; 
                color: #bababa }   /* das ist für nicht besuchte Seiten */ 
    nav a:visited {text-decoration: none; color: #bababa}  /* Textfarbe normal */
    nav a:hover {text-decoration: none; color: #000000 }  /* Textfarbe wenn Maus über TEXT */

    nav ul {margin:0; padding: 0; float: left; height: 50px; width: auto; color:#f1ee2f;}
    nav ul li {position: relative; list-style:none; float: left; display: block;
                background: #636363; 
                color:#bababa;    /* z. Zt. Text-Farbe  "Productos" */
                padding: 10px; width: 312px; text-align: center; transition: all 500ms; }
    nav ul li:first-child {border-radius: 10px 0 0 10px;}
    nav ul li:last-child {border-radius: 0 10px 10px 0; }
    nav ul li:hover {background: #ffffff}   /* Feldfarbe wenn Maus über Feld */
 
    nav ul li:hover ul {height: auto; opacity: 1;}
    nav ul li ul {height: 0px; overflow: hidden; opacity: 0; position: absolute; top: 35px; left: 10; }
    nav ul li ul li:first-child {border-radius: 10px 10px 0 0}
    nav ul li ul li:last-child {border-radius: 0 0 10px 10px}  


/* ******************************** Produktbereich **********************/


#Produktinhalt{
    height: 870px;
    width: 100%;
    float: left;
    /*background: rgb(250, 250, 138);*/
    color: #666666;
    font-size: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    border-radius: 10px 10px 10px 10px;
}

#Bestellhinweis{
    width: 100%;
    height: 50px;
   /* background-color: greenyellow;*/
    color: indianred;
    float: left;
    font-size: 24px;
    border-radius: 10px;
    margin-top: 45px;
}

#Produktfoto1{
    width: auto; /*340*/
    height: auto; /* 416*/
    float: left;
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 0px;
}

#Produktfoto2{
    width: auto; /*340*/
    height: auto; /* 416*/
    float: right;
    margin-top: 10px;
    
    /*margin-right: 20px;*/
    margin-bottom: 20px;
}

.Produkttext{
   /* float: left;*/
    margin-top: 5px;
   /* margin-left: 50px;  */
}

.IngredientesFeld {
    width: 300px;
    height: auto; /* 416*/
    /*color: #fff;
    background-color: #8f3838;*/
    border: 2px solid #c0141d;
    margin: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    float: left;
}

.Inhalt{
    margin: 10px;
    font-size: 16px;
    line-height: 110%;
}

#Preisfeld1Z{
    height: 35px;
    width: auto;
    color: blue;
    font-size: 20px;
    float: left;
    background-color: gold;
    border-radius: 10px;
    margin: 20px;
}

#Querverweis{
    height: 30px;
    width: auto;
    font-size: 20px;
    float: left;
    margin: 20px;
}


#Preisfeld2Z{
    height: 60px;
    width: auto;
    color: blue;
    font-size: 20px;
    float: left;
    background-color: gold;
    border-radius: 10px;
    margin: 20px;
}

.Preis{
    margin-left: 10px;
    margin-right: 10px;
}

.Disponibel{
    margin-left: 15px;
    margin-right: 15px;
    color: red;
    text-align: center;
}

.Vorschaurahmen2 {
	height: 140px;
    width: 300px;
	margin-left: 125px;
    margin-bottom: 20px;
    float: left;
	border-radius: 10px;
    font-size: 12pt;
}

.Vorschaurahmen3 {
	height: 140px;
    width: 300px;
	margin-left: 24px;
    margin-bottom: 50px;
    margin-top: 0px;
    float: left;
	border-radius: 10px;
    font-size: 12pt;
}

.Vorschau{
    border-radius: 10px;
    margin-top: 10px;
    margin-left: 70px;
    margin-right: 70px;
    margin-bottom: 10px;
}

.Vorschau:hover {
    border-bottom: 4px solid #1b1b1bbb;
    border-right: 4px solid #1b1b1bbb;
    margin-bottom: 6px;
}  



/* ******************************** Fußbereich ***********************/

footer {
    height: 70px;
    width: 100%;
    float: left;
    background: #636363;
    border-radius: 10px 10px 10px 10px;
    margin-top: 20px;
}

#desi {
    width: 200px;
    height: 70px;
    /*color: #b8b3b3;*/
    color: #140f0f;
    font-size: 12px;
    float: left;
    /*margin-right: 15px; 
    background-color: #dbc85a;  */
    text-align: right;
}

#ZahlLief{
    font-size: 16px;
    width: 200px;
    height: 70px;
   /* background-color: #dbc85a;  */
    float: left;
    margin-left: 20px;
    text-decoration: none;
    /*margin-bottom: 5px;  */
}

#ZahlLiefA{
    color: #eeeaea;
    margin-bottom: 25px;
}

#Fusstext {
    width: 560px;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    float: left;
    margin-bottom: 25px;
}

.Fussabsatz1 {
    margin-top: 5px;
}


/* ******************************** Kontaktformular ***********************/

#Kontaktinhalt {    
    height: 550px;
    width: 100%;
    text-align: center;  
}

.IPK{
    margin-top: 10px;
    background-color: #f1e289;
    font-size: 12px;
    width:400px;
    color: #06041a;
    height: 40px;
    border-radius: 7px;
    padding-left: 5px;
    border-color: #020000;
}

.NachrichtenText {
    width: 400px;
    height: 200px;
    padding-left: 5px;
    padding-top: 5px;
    font-size: 15px;
    background-color: #f1e289;
    margin-top: 10px;
    border-radius: 10px;
    border-color: #020000;
}

.SendeKnopf{
    margin-top: 20px;
    width: 100px;
    height: 30px;
    background-color: #f1e289;
    color: #000000; 
    border-color: #020000;
    font-size: 16px;
    border-radius: 10px;
}

#gesendet {    
    height: auto;
    width: 100%;
    float: right;
    color: # 000;      /* Textfarbe des Hauptinhaltes */
    color: rgb(85, 59, 12);
    font-size: 20px;
    border-radius: 10px 10px 10px 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 130%; 
    text-align: justify;
}

/* ******************************** Loginbereich **************** */
  

#Regist {
    margin-top: 10px;
    height: 120px;
    width: 150px;
    float: right;
    background: #dbc85a;  /*     dbc85a           */
    margin-right: 20px;
    text-align: center;
    font-size: 12pt;
    border-radius: 10px;
    color: rgb(22, 119, 72);
    /*a {text-decoration: none;} */
}

.RegistText {
    margin-top: 5px;
}

.ZA10{
    font-size: 8pt;
}

#Welcome {
    margin-top: 5px;
    height: 22px;
    width: 150px;
    float: right;
    background: #dbc85a;
    margin-right: 10px;
    text-align: center;
    font-size: 10pt;
    border-radius: 5px;
    color: rgb(45, 158, 102);
}

#BestList {
    margin-top: 5px;
    height: 22px;
    width: 150px;
    float: right;
    background: #dbc85a;
    margin-right: 10px;
    text-align: left;
    font-size: 10pt;
    border-radius: 5px;
    color: rgb(45, 158, 102);
}

.BestListText {
   margin-left: 10px;
}

#signup-form {   
    height: 400px;
    width: 100%;
    float: left;
    /*background: #f1f0f0;*/
    color: #4334ca;
    font-size: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    border-radius: 10px;
}

#pwwh-form {   
    height: 250px;
    width: 100%;
    float: left;
    /*background: #f1f0f0;*/
    color: #4334ca;
    font-size: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    border-radius: 10px;
}

.SignUp{
    font-size: 14px;
    color: #28814a;
    margin-top: 20px;
}

/* ******************************** Bestellungen **************** */

.BestellFeld{
    float: left;
    margin-top: 20px;
    margin-left: 10px;
}

.tooltip {
    margin-top: 5px;;
    border-radius: 3px; 
    border: solid 2px;
    cursor: pointer;
  }
  
.tooltip .tooltiptext {
    visibility: hidden;
    width: 130px;
    height: 20px;
    background-color: rgb(86, 20, 209);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    font-size: 14px;
    margin-left: 10px;
    /* Position the tooltip */
    position: absolute;
    z-index: 2;
  }
  
.tooltip:hover .tooltiptext {
    visibility: visible;    
}


/* *********************** Bereich BestellListe  ********************** */

.IPAnz{                    /* Das Feld, wo die Anzahl geändert werden kann */
    width: 50px;
    height: 20px;
    text-align: center;
    background-color: rgb(229, 225, 160);
  }

#Recalc{
    width: 100px;
    height: 30px;
    font-size: 14px;
    font-weight: bold;
    margin-left: 20px;
    /*background-color: #c0141d; */
}

#GesamtSumme{
    height: 50px;
    border: 1px solid black;
    text-align:right;
    font-size: 18px;
    font-weight: bold;
    padding-right: 10px;
}

#Eliminieren{
    margin-left: 20px;
    color:#c0141d;
}

#BestellKnopf{
    width: 120px;
    height: 20px;
    font-size: 15px;
    font-weight: bold;
    float: right; 
    margin-right: 30px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 3px;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.16, rgb(207, 207, 207)), color-stop(0.79, rgb(252, 252, 252)));
    background-image: -moz-linear-gradient(center bottom, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%);
    background-image: linear-gradient(to top, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%); 
    padding-bottom: 5px;
    border: 1px solid #000;
    color: black;
    text-decoration: none;
    text-align: center;
}


.TabBest {
    border: 2px solid black;
    width:950px;
    margin-left: 20px;
    background-color: rgb(240, 235, 166);
  }

.TabBestK2 {
    border: 1px solid black;
    text-align:center;
    width:100px;
    height: 40px;
    font-size: 14px;
}

.TabBestK1 {
    border: 1px solid black;
    text-align:center;
    width:350px;
}

.TabBestI1{
    border: 1px solid black;
    text-align:left;
    height: 30px;
    padding-left: 5px;
}

.TabBestI2{
    border: 1px solid black;
    text-align:center;
}

.TabBestI3{
    border: 1px solid black;
    text-align:right;
    padding-right: 10px;
}

.TabBestK3 {
    width:20px;
}   

.aprox {
    font-size: 14px;
    padding-right: 15px;
}

/* ******************* HinweisDrin *******************************/

.inList {
    width: 400px;
    height: 50px;
    margin-left: 300px;
    margin-top: 200px;
    background-color: #c23a41;
    color:rgb(229, 225, 160);
    font-size: 18px;
    text-align: center;
    padding-top: 20px;
    border-radius: 3px;
}
