:root {
	--fjfp:#bad337;
	--ftxt:#030;
	--fubs:#e02d14;
	--f-grn:#3f6841;
	--f-glb:#ff0;
	--f-ora:#fc0;
	--f-oli:#afc630;
	--f-oli2:#9cb027;
	--f-rotd:#933;
	--f-bei:#ffa;
	
	--fa:#004080;
	--favis:#804000;
	--fahov:#ffa;
	
	--rad:12px;	
}
@font-face {
  font-family: 'Wendy One';
  font-style: normal;
  font-weight: 700;
  src: local('Wendy One'), local('WendyOne-Regular'), url(../assets/fonts/wendy-one-v5-latin-regular.woff2) format('woff2'), url(../assets/fonts/wendy-one-v5-latin-regular.ttf) format('truetype');
}
/* normal nochmal definieren wg konflikt */
@font-face {
  font-family: 'Acme';
  font-style: normal;
  font-weight: 400;
  src: local('Acme Regular'), local('Acme-Regular'), url(../assets/fonts/acme-v7-latin-regular.woff2) format('woff2'),  url(../assets/fonts/acme.ttf) format('truetype');
}
/* Acme fake bold => Wendy */
@font-face {
  font-family: 'Acme';
  font-style: normal;
  font-weight: 700;
  src: local('Wendy One'), local('WendyOne-Regular'), url(../assets/fonts/wendy-one-v5-latin-regular.woff2) format('woff2'), url(../assets/fonts/wendy-one-v5-latin-regular.ttf) format('truetype');
}

html {
	background:var(--fjfp);
	background-image: url("../gfx/palme1.svg");  
	background-position: 1% bottom;
	background-repeat:  no-repeat;
	background-attachment: fixed;
	background-size: contain;	
	}
@media screen and (max-width: 1024px) {
/* für Tablet und kleiner */
	html {background:var(--fjfp);}
}
body {	
	font-family:Acme,Verdana,Helvetica,sans-serif;
	font-size:110%;
	color:var(--ftxt);	
	}
#page {
	display: grid;
    grid-template-areas:
        "hea"
        "con";
    }
@media screen and (min-width:1025px){
	#page {
		display: grid;
	    grid-template-areas:
        "hea hea"
        ".   con";
    	grid-template-columns: 30% 70%;
    	}	
}

header {
	grid-area:hea;
	margin: 1em;
	text-align: right;
}
header img {
	width: 100%;
    max-width: 480px;
    }
main {
	grid-area:con;
	/*background: var(--fjfp);*/    
    border-radius: var(--rad);
    background: #bad337cc;
    padding: 1rem;
    }

h2 {
 	margin-top: 0; 	
	font-size: 180%;
    color: var(--fubs);}

a {
	color:var(--fa);
	}
a:visited {
	color:var(--favis);
	}
a:hover {
	color:var(--fahov);
	}




/* alle tabellen */
table	{
	border:6px solid var(--f-grn);
	border-radius: var(--rad);
	width:100%;
	margin-bottom:2em;
	font-size: 100%;
	}

/* Kundenansicht Kalender */
table.calendar {
	border-collapse:separate;
	border-spacing: 4px; 
	/*! border-collapse:inherit; */
	}
table.calendar td {
	text-align:left;	
	width:12.5%;	
	/*Versuche, die ganze Zelle klickbar zu machen...*/
	/* a muss display=block sein
	kann width=100% bekommen
	height=100% braucht aber eine Berechnungsgrundlage...
	Chrome: td auf 1px höhe -> dehnt sich aus, a kann 100% haben
	FF: td mit 1px höhe schrumpft alles!
	FF: td auf 100% höhe passt --> geht nicht bei Chrome :(		 
	Was dann?
	- JS onclick auf td?
	- divs statt table?
	- Ignorieren?	
	*/
	
	/*height: 1px;*/
	height: 100%; 
	padding:0;
	vertical-align:top;
	border:none;
	/* empty-cells: hide; */
	}
/*wochenende*/	
table.calendar td:nth-of-type(6),table.calendar td:nth-of-type(7) {
	background:#ffa;
	}
/* leere Zellen mit leichtem Higru */
table.calendar td:empty{
	background: #fff2;
	}

/* erste 2 Zeilen */
table.calendar tr:first-of-type,table.calendar tr:nth-of-type(2){
	background:#ffa9;
	font-size: 1.5rem;	
}
table.calendar tr:first-of-type td,table.calendar tr:nth-of-type(2) td{
	box-sizing: border-box; /* padding wird nicht addiert sondern abgezogen */    
    padding: .5rem;
}
table.calendar td > div {
    box-sizing: border-box; /* padding wird nicht addiert sondern abgezogen */   
    padding: .5rem;
    width: 100%;
    height: 100%;    
}
/*.std div,.zu div,.vorbei div {}*/
.xl div { padding: 0!important; }
.xl a {
	display:block;
	box-sizing: border-box;    
    padding: .5rem;
    width: 100%;
    height: 100%;
	text-decoration:none;
	color:var(--ftxt);
}


td.std {
	color:#0309;
	background:#fff7;
	}
td.zu {
	color:#0307;
	background:#fccb!important;
	}
td.xl {background:#efa;}
td.vorbei {
	color:#0306;
	background:#fff3!important;
	}

table.calendar td.xl:hover {background:#fff;color:#b00;}
table.calendar td a:hover{color:#b00;}
span.calday {
	font-size:2.1rem;
	font-weight:bold;
	}
span.caldaytext {
	font-size:.8rem;
	}
	
p#nav a {display:inline;}



/* book.php Auswahl Zeit */
@media screen and (min-width:500px)
{
.bookgr{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	}
}
.bookam, .bookpm {
    background: var(--f-ora);
    border-radius: var(--rad);
    padding: .5rem;
    text-align: center;
    margin-bottom: 1rem;
	}

.bookgr a{
	text-decoration: none;
	display: block;
	width: 85%;
    margin: 0 auto;
	}
.bookgr a:hover {
    transform-origin: center;
    transform: rotate(-2deg) scale(1.1);
    }	
.bookgr a::before {
    content: "\a0";
    margin: 0 auto -5px auto;
    background: url(../gfx/mat.png) no-repeat;
    background-position: 21.05% 0%;
    background-size: 2000% 100%;
    width: 70px;
    height: 70px;
    display: block;
}

/* Belegungshinweis Buchung */
p.cap_ok {color:#090;font-weight:bold;}
p.cap_limited {color:#c00;font-weight:bold;}



/* Formular */

form {
	margin: 1em auto 1em 0;	
	width: 100%;
	max-width: 50rem;
	font-size: 1rem;
	}
table#formt td,table#formt th	{
	min-width:50px;
	border-right:1px solid var(--f-grn);
	border-bottom:1px solid var(--f-grn);
	padding:.6em;
	vertical-align:top;
	overflow-wrap: anywhere;    
    hyphens: auto;
	}
table#formt td:last-child,table#formt th:last-child {
	border-right:none;
	}
table#formt tr:last-child td{
	border-bottom:none;
	}
/* linke spalte */
table#formt td:first-child {
	text-align:right;
	padding-right:1em;
	width:30%;
	}
textarea,input {
	/* border:1px solid #ccc; */
	border:none;
	padding: .3em;	
	}
.ftext, .ftextarea {
	width: 100%;
	max-width:600px;
 }
.fnum {width:5em;}
.ftextarea {	
	height: 5em;	
	font-family:Tahoma,Arial,sans-serif;	
	}

textarea,input:focus {/* border:1px solid #0c0; */}
button[type=submit] {
	display:block;
	width: 80%;
	margin:0 auto;	
	padding: .5em;
}
#form_capinfo{text-align:left;}

.booking_confirmed {
	/*margin:20px;border:1px solid #ccc;width:480px;padding:5px;*/
	}

#page_foot{
	font-size: 80%;
	/*text-align: center;*/
	margin-top: 3rem;
}


@media screen and (max-width:760px)
	{
	table.calendar tr:nth-child(2) {display:none;}
	table.calendar {
		display:table;		
		width:99%;
		border-collapse: inherit;
		border-spacing: 0px; 
		}
	table.calendar td {
		/* padding macht die td breiter als den table (box-sizing...) */
		padding: 0;
		display:flex;		
		width:100%;
		vertical-align:middle;
		/* muss 1px überschreiben */
		height: auto;
		/* border:1px solid red; */
		}
	
	table.calendar td[colspan],	table.calendar td span { 
	padding: .3rem; /* hier störts nicht */
	}
	table.calendar td span.calday {
	width: 3.5rem; /* schiebt alles andere rüber */
	display: inline-block;
	top: -4px;
	position: relative;
	}
	table.calendar td span.calday+br {display: none;}
	table.calendar td span.caldaytext{			
		display:inline-block;
		vertical-align: top;
				
		}
	}
	
	
@media print {
	.noprint {display:none;}
	html,main {background:none;	color:black;}
	a, a:hover, a:visited{color:black;}
	
	}