/*******************************************************
  tea.css 

Projekt: DieMorgenlandfahrer.de
Autor:   Robert Kesseler
Datum:   29.4.2020
Version: 9.11.2020

Styles für "Allerley Teespezereien"

*******************************************************/



/*****************************************************************
* Die Startseite
*/

.vcard {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    width: 100%;
    height: 15%;
    margin: auto;
    border: 0px solid red;
}

.startbild {
    box-sizing: border-box;
    position: absolute;
    top: 15%;
    width: 100%;
    height: 50%;
    padding: 0;
    border: 0px solid blue; 
}

.starttext {
    box-sizing: border-box;
    position: absolute;
    top: 65%;
    width: 100%;
    height: 15%;
    padding: 0;
    border: 0px solid blue;
    font-size: 80%; 
}

.starttext h3 {
margin: 0;
}


/************************************************
* der Container für alle Töpfchen
* überschreiben der globals.css
*/
.alletoepfe {
	top: 80%;
	height: 15%;
	border: 0px solid green;
}

.topf_container {
    width: 25%;
    height: 100%;
    border: 0px solid red;
   
   } 
 
.topf {
	height: 50%; /* vom topf-container */
    /*border: 1px solid blue; */
}

.topf:hover {
    height: 50%;
 }

/***************************************************
*  Media Querry für Desktop. Ab einem Seitenverhältniss
*  von 2 / 3 wird auf Desktop umgeschaltet
*/


@media only screen and (min-aspect-ratio: 2/3 ) {
	.debug_1 {
		background-color: red;
	}

  .vcard {
    top: 0%;
    left: 2%;
    width: 40%;
    height: 60%;
    margin: auto;
	}
	
.startbild {
    top: 0;
    left: 40%;
    width: 60%;
    height: 60%;
}
.starttext {
    top: 60%;
    width: 100%;
    height: 15%;
    padding: 0;
    font-size: 90%;
}

	.alletoepfe {
		top: 75%;
		height: 20%;
	}
}

@media only screen and (min-aspect-ratio: 2/3) and (max-height: 500px) {
.starttext {
font-size: 60%;
}

}
































.maintabelle   {
    /*border: 2px solid #dc3737;*/
    text-align: center;
    margin-left: auto;
    margin-right: auto;
		width:100%;
}

.maintabelle td {
 /*   border: 2px dotted blue; */
   
}

.thumbimg {
    width: 48%;
}

@media only screen and (min-width: 1500px) {
    
.thumbimg {
    width: 32%;
}
    
}

@media only screen and (min-width: 2000px) {
    
.thumbimg {
    width: 24%;
}
    
}



.Topftabelle {
    /*border: 2px solid #dc3737;*/
    text-align: center;
    margin-left: auto;
    margin-right: auto;
		width:100%;
}



.Topftabelle .spalte   {
    width: 15%;
    vertical-align: central;
    text-align: center;
    /* border: 2px solid #3748dc; */
    background:url("pic/pott.png");
    background-size: contain;
    background-repeat: no-repeat;
    /* cursor: pointer; */
        
}
.Topftabelle .spalte:hover   {
    width: 15%;
    vertical-align: central;
    text-align: center;
    background:url("pic/pottoffen.png");
    background-size: contain;
    background-repeat: no-repeat;
    /* cursor: pointer; */
}

.Termintabelle {
    margin-left: auto;
    margin-right: auto;
    border-spacing: 1em;
    /* border: 12px solid #374867; */
 
}

.Termintabelle td {
    font-size: large;
    padding-left: 1em;
    
}

.Termintabelle a {
    
    
}

.bw {
    width: 120px;
    height: 94px;
    background:url("pic/pott3_g.png");
		background-repeat: no-repeat;
    
}
.bw:hover {
    background: url("pic/pott3_o.png");
    background-repeat: no-repeat;
}
.bw a {
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none;
}

.bw a span {
    display: block;
    width: 100%;
    vertical-align: bottom;
}

.bw2 {
	text-align:Left;
	padding-left:1em;
}


.bigger1 {
   text-decoration: underline;
	 font-size:large;
}



.bildwechsel       {width: 100%; height: 100%; background:url("pic/pott.png");     background-size: contain; background-repeat: no-repeat; }
.bildwechsel:hover {background:url("pic/pottoffen.png"); background-size: contain; background-repeat: no-repeat; }

.bildwechsel2 {width:100%;background:url("pic/pott.png");}
.bildwechsel2:hover {background:url("pic/pottoffen.png");}