: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);	
	}

p {
    margin: .5em  0;
}

p#nav {
    margin-top: 1.5em;
}
#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;
	display: flex; /* damit Nav vor Tabelle sortiert werden kann */
	flex-direction: column;
	gap: 0;
	}

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; */
	order: 1;
	/*Tabelle nach Monats-Nav verschieben -- sollte im PHP getauscht werden */
	}
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?
	- flex mit grow??
	-> jetzt ist a mit fester höhe ausgestattet, dann sind auch alle Zeilen gleich hoch
	*/
	/*height: 1px;*/
	height: 100%;
	/* height: 5rem; */
	/* padding:0; */
	/* height: auto; */
	/* height: fit-content; */
	vertical-align:top;
	border:none;
	/* empty-cells: hide; */
	/* word-wrap: break-word; */
	/* word-break: break-word; */
	}
/*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;
}
td > div {
    box-sizing: border-box; /* padding wird nicht addiert sondern abgezogen */
    padding: .1rem .5rem;
    /* padding: 0; */
    width: 100%;
    /* height: 100%; */
    min-height: 5.6rem;
    /* outline: aqua 1px inset; */
}
/*.std div,.zu div,.vorbei div {}*/

/* nur(?) xl hat "a"-links, die eigenes padding haben */
.xl div {
	padding: 0;
	/*background:aliceblue*/
}
td a {
	/* display: flex; */
	display: block;
	box-sizing: border-box;
	padding: .1rem .5rem;
	width: 100%;
	height: 100%;
	min-height: 5.6rem;
	text-decoration:none;
	color:var(--ftxt);
	/* background: #8cbbe3; */
	flex-direction: column;
}


td.std {
	color:#0309;
	background:#fff7;
	}
td.zu {
	color:#0307;
	background:#fccb!important;
	/* padding: 0.5em; */
	}
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;
	display: flex;
	flex-direction: column;
	}

span.dname {display:none;}
span.ename {display: block;/* word-break: break-all; */}

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;
	order: 1;
}


/***********************************************************************************/
/* Handyversion */
@media screen and (max-width: 735px)
	{
	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;
		box-sizing: border-box;
		display:flex;
		width:100%;
		vertical-align:middle;
		/* muss 1px überschreiben */
		height: auto;
		max-height: 3em;
		/* border: 1px solid blue; */
		margin-block-end: 3px;
		}

table.calendar td:empty {
    display: none;
    margin: 0;
    padding: 0;
    empty-cells: hide;
}

table.calendar td > div {
	/* border: red 2px solid; */
	display: grid;
	padding: .5rem; 
	padding-left: 1rem;
	grid-template-columns: 3.5em 1fr;
	/* max-height: 3em; */
	/* height: 100%; */
}

	.xl a {
		padding:0;
		/* height: min-content; */
		min-height: 3em;
		display: contents; /* keine box, zeigt die einzelnen teile */
		/* width: 100%; */
		/* height: 100%; */
		/* background: red; */		
	}
		
	table.calendar td[colspan],	table.calendar td span {
	/* padding: .3rem; */ /* hier störts nicht */
	}
		
	
	span.calday {
	/* width: 3.5rem; */ /* schiebt alles andere rüber */
	display: inline-block;
	top: -5px;
	position: relative;
	}
	span.calday+br {display: none;}
		
	span.caldaytext{
		display: grid;
		/* display: inline-flex; */
		/* flex-grow: 1; */
		/* flex-shrink: 1; */
		vertical-align: top;
		/* margin-inline-end: 2em; */
		/* padding-inline-end: 2em; */
		/* border: 1px dotted; */
		grid-template-columns: 5.5em 1fr;
		gap: .2em .5em;
		flex-direction: row;
		/* background: lightblue; */
		height: min-content;
		}

	span.dname {
		display: block;
		width: 5em;
		grid-column: 1;
	}

span.ename {
    /* border: 1px solid; */
	/*gibts nicht immer*/
    grid-column: 2;
}
span.ename:empty {
    display: none;
}
		
span.otext {
    grid-column: 2;
}


	}
	
	
@media print {
	.noprint {display:none;}
	html,main {background:none;	color:black;}
	a, a:hover, a:visited{color:black;}
	
	}