/*=========================================================
	CSS Document zu:	motoradreisen.ch/prepare.php
	Autor:				Oswin Baumann (c)2023
	Kontakt:			info(a)motoreisen.ch
=========================================================*/

/*	Inhaltsüberschrift 'Sticky'
=========================================================*/
.prepare-sticky-container {
	display: grid;
	position: sticky;
	top: 70px;
	left: 0px;
	right: 0px;
	background-color: white;
	font-family: 'Roboto Mono', monospace;
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
	width: 70rem;
	height: 90px;
	border: solid;
	border-width: 0px 0px 3px 0px;
	border-color: #d0d0d0;
	padding-left: calc((100% - 70rem) / 2);
	padding-right: calc((100% - 70rem) / 2);
	align-content: center;
}

/*	Tagesübersicht, Container für zwei Tage
=========================================================*/
.prepare-dayLine-container {
	display: grid;
	grid-template-areas:
		'dayLineLeft dayLineRight';
	width:70rem;
	padding-left: calc((100% - 70rem) / 2);
	padding-right: calc((100% - 70rem) / 2);
}
.prepare-dayLine-container > div {
	background-color: transparent;
	text-align: center;
	padding: 20px 0;
}
.prepare-dayLeft { grid-area: dayLineLeft; width: 35rem;}
.prepare-dayRight { grid-area: dayLineRight; width: 35rem;}

/*	Tagesdarstellung, Container für einen Tag
=========================================================*/
.prepare-day-container {
	display: grid;
	grid-template-areas:
		'dayHeader dayHeader dayHeader'
		'dayLeft dayRight dayRight';
	gap: 1px;
	background-color: transparent;
	padding: 10px;
}
.prepare-day-container > div {
	background-color: transparent;
	text-align: center;
}
/*	Header - Datum
=========================================================*/
.prepare-day-item {
	grid-area: dayHeader;
	font-family: 'Coda', cursive;
	font-size: 1.5rem;
	font-weight: bold;
	border: solid;
	padding: 0.5rem;
}
.prepare-day-item>a {
	text-decoration: none;
	color: black;
}
/*	Links - Bilder
=========================================================*/
.prepare-pic-item {
	grid-area: dayLeft;
	font-size: 1rem;
	border: solid;
	padding: 0rem;
	width: 11.5rem;
}
.prepare-pic-item>img {
	width: 100%;
	height: auto;
	border: 0px;
	margin: 0px;
	padding: 0px;
}
/*	Rechts - Beschreibung
=========================================================*/
.prepare-txt-item {
	grid-area: dayRight;
	font-family: 'Coda', cursive;
	font-size: 1.2rem;
	border: solid;
	padding: 0.5rem;
	width: 21rem;
	margin: 0rem;
	text-align: left;
}
.prepare-txt-item>p {
	padding: 5px;
	margin: 0px;
	text-align: left;
}
.prepare-txt-item>ul {
	text-align: left;
}
/*=========================================================
	EOF
=========================================================*/