@charset "UTF-8";
* {
   font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'fira sans', 'droid sans', 'Open Sans', 'Helvetica Neue', sans-serif;
}
:root {
   --grid-rows: 10;
	--grid-columns: 5;
 }
*,
*::before,
*::after {
	box-sizing: inherit;
}
html {
	box-sizing: border-box;
	background-color: #ededed;
	font-size: 16px;
}
body {
	margin: 0px;
	padding: 0px;
	display: flex;
	justify-content: center;
}
/* CSS Loginmenu */
.loginmenu{
	width: 100%;
	height: 25px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	background-color: #333;
	color: #eee;
	overflow: hidden;
	position: fixed;
}
.loginmenu svg {
	margin-right: 5px;
}
.loginmenu a {
	margin-right: 20px;
}
.loginmenu path {
	fill: #eee;
}
/* Contentbereich */
.contentbox{
	margin: 35px 10px 10px 10px;
	width: 100%
}
.w-breit {
	max-width: 1200px;
}
.w-ipad {
	max-width: 820px;
}
/*Logocontainer */
.logocontainer, .flex-container-column {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.logocontainer img{
	width: 100%;
	max-width: 200px;
}
.logocontainer h2 {
	text-align: center;
}
/* Inhaltskarte */
.card {
	background-color: #fff;
	padding: 10px 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 4px;
}
/* Überschriften */
h1, h1 a {
	margin: 0 0 10px 0;
	color: #ee7f00;
	font-weight: 600;
	font-size: 1.75rem;
}
h2, h2 a {
	margin: 0 0 5px 0;
	color: #ee7f00;
	font-weight: 600;
	font-size: 1.25rem;
}
h3, h3 a {
	margin: 0 0 5px 0;
	color: #ee7f00;
	font-weight: 600;
	font-size: 1.17rem;
}
.hervorhebung {
	font-weight: bold;
	font-size: 1em;
	margin-bottom: 0.5em;
}
/* Buttons */
.btn400 {
	width: 100%;
	max-width: 400px;
}
.btn140 {
	width: 140px;
	padding: 5px !important;
}
.btn70 {
	width: 100%;
	max-width: 70px;
}
.btnx {
	width: 100%;
}
.button, .buttongrid a {
	padding: 10px;
}
.button {
	margin: 5px;
}
.button, 
.buttongrid a {
	text-align: center;
	color: white;
	font-weight: 600;
	border-radius: 4px;
	transition-duration: 0.2s;
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19);
	cursor: pointer;
}
.button:hover, 
.button:active, 
.buttongrid a:active, 
.buttongrid a:hover {
	opacity: 0.7;
}
.buttongrid {
	display: grid;
	margin-bottom: 20px;
	grid-template-columns: repeat(auto-fill, minmax(3.6em, 1fr));
	gap: 8px;
}

.flex-container-row {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin-bottom: 0.5em;
}
.aktiv {
	border: 2px solid #333;
	color: #333;
	background-color: #E8F0FE;;
}
a {
	text-decoration: none;
	color: inherit;
}
.grid-container-column {
	display: grid;
	justify-content: center;
	grid-auto-flow: row;
	grid-gap: 3px;
	grid-template-columns: 1fr;
}
.grid-item, 
.grid-item-header  {
	color: white;
	text-align: center;
}
.grid-item-header {
	background-color: #7c7c7c;
	font-weight: bold;
	padding: 5px 0;
	font-size: 1.10rem;
}
.grid-item {
	padding: 10px 0;
	font-size: 0.9rem;
	display: block;
}
.grid-item-info-bar {
	grid-column: 1 / -1;
}
.form-group {
	margin: 0px auto 8px auto;
	width: 100%;
	max-width: 320px;
}
.form-label {
	font-weight: 600;
	font-size: 0.75rem;
}
.form-control {
	padding: 10px 12px;
	font-size: 1.10rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-bottom: 2px;
	width: 100%;
	background-color: #E8F0FE;
}
/* Tabelle für Kalender, zwei Spalten */
.tgrid{
	display:grid;
	grid-template-columns: auto auto;
 }
 .tgrid-item, 
 .tgrid-item-header  {
	border-bottom: 1px solid black;
	padding: 5px 7px;
 }
 .tgrid-item-header {
	 background-color: #e67e00;
	 font-weight: bold;
 }
 .tgrid-item {
	 font-size: 0.9rem;
	 display: block;
 }
 .tgrid > .r1 {
	background-color: #f8f9f9;
 }
.blau {background-color: #008cba;}
.orange {background-color: #e67e00;}
.grau {background-color: #7c7c7c;}
.gruen {background-color: #58ad55;}
.hellgruen {background-color: #04b900;}
.rot {background-color: #f85423;}
.dunkelbrombeer {background-color: #930062;}
.brombeer {background-color: #BC007E;}
.dunkelrot {background-color: #d10000;}
.tuerkis {background-color: #21c6c1;}
.unsichtbar, .unsichtbar-wenn-schmal {display: none;}
.warnung {
	background-color: #FF0000;
	padding: 5px;
	text-align: center;
	border-radius: 4px;
	border: 2px solid black;
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19);
}
.neu {
	background-color: rgb(255, 230, 0);
	padding: 5px;
	text-align: justify;
	border-radius: 4px;
	border: 2px solid black;
	hyphens: auto;
}
/* min-width schlägt max-width schlägt width */
@media (min-width: 770px) {
	.links-wenn-breit {
		align-items: start;
	}
}
@media (min-width: 300px) {
	.grid-container-column {
		grid-template-columns: repeat(var(--grid-columns), 1fr);
		grid-auto-flow: column;
	}
	/* Zeilen für die Buchungs-Grids */
	.grid-rows{
		grid-template-rows: repeat(var(--grid-rows), auto);
	}
	.unsichtbar-wenn-breit {
		display: none;
	}
   .unsichtbar-wenn-schmal {
		display: flex;
	}
}