/*******************************************************
  indexstyles.css

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

Styles für "Die Morgenlandfahrer" Hauptseite

Verwionsinfo:

13.4.2026 Roswitha Rausgenommen, deswegen nur noch 3 Töpchen. Änderung der class topf_container

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

@font-face {
  font-family: 'Bilbo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Bilbo Regular'), local('Bilbo-Regular'), url(./fonts/Bilbo/o-0EIpgpwWwZ220oroVD4w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bilbo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Bilbo Regular'), local('Bilbo-Regular'), url(./fonts/Bilbo/o-0EIpgpwWwZ220mroU.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;
}

/***********************************
* einige debug-divs. die werden später an die verschiedenen
* @media-query angepasst
*/

/*****************************************************************
* Die Startseite
*/
.vcard {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    width: 100%;
    height: 30%;
    margin: auto;
    text-align: center;
    overflow: hidden;
    border: 0px solid red;
}

.startbild {
    box-sizing: border-box;
    position: absolute;
    top: 25%;
    width: 100%;
    height: 40%;
    margin: auto;
    padding: 0;
    border: 0px solid blue; 
}

.morgenlandimg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/************************************************
* der Container für alle Töpfchen
*/
.alletoepfe {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	top: 70%;
	height: 20%;
	display: flex;
	flex-direction: row;  
	flex-wrap: wrap;
/*	border: 1px solid green;*/
}

.topf_container {
	box-sizing: border-box;
    width: 30%;
    height: 100%;
/*    border: 3px solid red;*/
   
   } 
 
.topf {
	text-align: center;
	background:url("pic/pott.png");
/*    background-attachment: fixed;*/
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: auto;
	height: 40%; /* vom topf-container */
    /*border: 1px solid blue; */
}

.topf:hover {
    background:url("pic/pottoffen.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: auto;
    height: 40%;
 }

.topf_text {
    font-family: 'Bilbo', cursive;
    font-weight: normal;
    font-size: x-large;
    width: auto;
    text-align: center;
    color: Blue;
}
/***************************************************
*  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;
	}

.morgenlandimg{
 height: 90%;
}
  .vcard {
		height: 35%;
	}

	.startbild {
		top: 35%;
		height: 35%;
		padding: 0,3rem;
	}

	.alletoepfe {
		top: 70%;
		height: 20%;
	}
	.topf_container {
		width: 33%;
   } 
}



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

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

.Termintabelle a {
}


.fussnote {
    position: fixed;
    right: 1px;
    bottom: 1px;
    color: #9fb470;
    font-family: sans-serif;
    font-size: xx-small;
}