:root {
  /*--accent_dark: #893232;  old color*/
  /*--accent_light: #d65050; old color*/
  --accent_disabled: #808080;
  --accent_light: #3271bf;
  --accent_dark: #27588b;
  /*--accent_dark: #214b77;*/
}


body {
	font-family: sans-serif ;
	background: white ;
	color: black;
	margin: 0;
}

main {
	margin: auto;
	max-width:1200px;
	width: 95%;
	padding-bottom: 3em;

}
a{
	line-height: 1.5;
	text-decoration: none;
	color: var(--accent_dark);
}
a:hover{
	color: var(--accent_light);
}
h1{
	text-align: center;
}
h2{
  color: var(--accent_light);
}

img {
	max-width: 100% ;
}

header h1 {
	text-align: center ;
}

footer {
	background-color: black;
    height: 3em;
    position:sticky;
    bottom:0;
	text-align: center ;
	width: 100%;
	z-index: 99;
}
footer div{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
footer a{
	clear: both;
	text-decoration: none;
	color: white;
}
.showicons{
	display: none;
}
.showname{
	display: unset;
}

.events{
 	padding: 2px 16px;
}
.singleevent h3{
	margin: 0;
}
.singleevent{
	width: 70%;
	min-width: 300px;
	background-color: #f2f2f2;
	box-shadow: 1px 4px 8px 1px rgba(0,0,0,0.2);
  	transition: 0.3s;
	text-align: left; 
	display: flex;
  	flex-wrap: wrap;
	padding: 5px;
	margin-bottom: 20px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
}
.singleevent:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
	background-color: #d9d9d9;
}
.left-singleevent {
  flex-grow: 1;
  flex: 1;
  flex-basis: 20%;
  padding: 3px;
  text-align: center; 
}
.left-singleevent p{
	margin: 0;
}
.right-singleevent {
  flex-grow: 1;
  flex-basis: 75%;
  padding-top: 3px;
  padding-bottom: 3px;
}
.datenumber{
	font-size: 70px;
	font-weight: bold;
}


nav{
	width: 100%;
	background-color: black;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 99;
}
nav div{
	display: flex;
  	justify-content: center;
}
#navbar{
	display: flex;
  	justify-content: center;
	align-items: center;
}
#navbar li{
	float: left;
	list-style-type:none;
}
#navbar-left{
	float: left;
	width:fit-content;
}
#navbar{
	float: right;
	padding: 0;
}
#navbar li a{
	display: block;
	color: white;
	text-align: center;
	padding: 5px 15px;
	text-decoration: none;
}
hr { 
 	display: block;
 	margin-top: 0.5em;
 	margin-bottom: 0.5em;
 	margin-left: auto;
 	margin-right: auto;
 	border-style: inset;
 	border-width: 0px;
	color: var(--accent_light);
	background-color: var(--accent_light);
 	width: 5em;
 	height: 2px;
 	margin-bottom: 3em;
} 

li{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

fieldset{
	border: none;
	margin: 0px;
	padding: 0px;
}
/*
.showtext{
	transform:translateY(-100%);
	opacity: 0.8;
	font-weight: bolder;
	background-color: black;
	padding-top: 4px; 
	padding-bottom: 4px;
	z-index: 99;
	width: 100%;
	text-align: center;
	height: fit-content;
}
*/
.showtext{
	font-size: x-large;
	cursor: pointer;
}

.td-2-right 
{
	max-width: 100%;
	min-width: 50%;
}
.td-2-right td+td{
	text-align: right;
}
button{
	border-color: var(--accent_light);
	background-color: var(--accent_light);
	font-weight: bold;
	color:white;
	text-decoration: none;
	border-radius: 2%;
	border-width: 3px;
	text-align: center;
	padding: 15px;
	margin: 10px;
	box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2);
}
button:hover{
	border-color: var(--accent_dark);
	background-color: var(--accent_dark);

  box-shadow: 10px 10px 16px 0 rgba(0,0,0,0.4);
}

button:disabled{
	border-color: var(--accent_disabled);
	background-color: var(--accent_disabled);
}

input[type=file]::file-selector-button {
	border-color: var(--accent_light);
	background-color: var(--accent_light);
	font-weight: bold;
	color:white;
	text-decoration: none;
	border-radius: 2%;
	border-width: 3px;
	text-align: center;
	padding: 5px;
	margin: 5px;
	box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2);
}
input[type=file]::file-selector-button:hover {
	border-color: var(--accent_dark);
	background-color: var(--accent_dark);

  	box-shadow: 10px 10px 16px 0 rgba(0,0,0,0.4);
}

input[type="text"],
input[type="checkbox"]:checked,
input[type="radio"]:checked{
	accent-color: var(--accent_dark);
}
input::selection {
    background-color:var(--accent_dark);	
	color: white;
}

.slideshow{
	width: 100%;
}
.slide{
	max-height: 100%;
}

.cards {
	/*text-align: center;*/
  	display: grid;
	justify-items: center;
	column-gap: 5px;

}
.container {
  padding: 2px 16px;
}
/*
.card {
  	color: white;
  	padding: 10px;
	width: 450px;
	display: grid;
}
*/
.card {
  box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.2);
  transition: 0.3s;
  /*max-width: 75%;*/
  border-radius: 5px;
  margin: 2em;
  margin-bottom: 10px;
  color: var(--accent_light);
  font-weight: bold;
  justify-content: center;
  text-align: center;
  padding-top: 10px;
	display: grid;
	
}

.card:hover {
  box-shadow: 2px 8px 16px 2px rgba(0,0,0,0.8);
}
@media (min-width: 1200px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	/*
	.card {
  		color: white;
  		padding: 10px;
		max-width: 90%;
		width: 90%;
	}
	/*.card .abteilbutton{
		transform: translateY(100%);
	}
	*/
}

.card:active .image {
	opacity: 0.3;
	filter: hue-rotate(45);
}

.card:active .abteilbutton {
  opacity: 1;
}

#navbar li a:active {
	background-color: lightgray;
	color: black;
}

@media(hover: hover) {
	.card:hover .image {
	  /*filter: grayscale(100%);*/
	filter: saturate(0.8);
	}

	.card:hover .abteilbutton {
	  opacity: 1;
	}

	#navbar li a:hover {
		background-color: lightgray;
		color: black;
	}
}

.image {
  	opacity: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
  	display: block;
  	transition: .5s ease;
	z-index: -10;
}

/*
.backgroundimage,
.abteilbutton {
	grid-area: 1 / 1;
}
.abteilbutton{
	height: fit-content;
	transform: translateY(100px);
  	transition: .5s ease;
	pointer-events:none;
  	opacity: 0;
	background-color: var(--accent_dark);
}
*/

@media screen and (max-width: 1000px) {
	nav{
		position:static;
	}
	#navbar-left{
		display: none;
	}
	#navbar li{
		padding: 0px 15px;
		list-style-type:none;
	}
	#navbar li a{
		color: white;
		text-decoration: none;
	}
	footer{
		position: static;
	}
	.showicons{
		display: unset;
	}
	.showname{
		display: none;
	}
	.left-singleevent {
  		flex-basis: 25%;
	}
	.right-singleevent {
  		flex-basis: 72%;
	}
}
@media screen and (max-width: 700px) {
	#navbar li{
		padding: 0px 5px;
	}
	.left-singleevent {
  		flex-basis: 35%;
	}
	.right-singleevent {
  		flex-basis: 63%;
	}

}
@media screen and (max-width: 600px) {
	#navbar li{
		padding: 0px 0px;
	}
	.singleevent{
		text-align: center;
		flex-direction: column;
	}
	.datenumber{
		font-size:xx-large;
	}

}
@media screen and (max-width: 450px) {
	#navbar li a img{
		width: 15px;
		height: 15px;
	}
}


* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body { font-family: sans-serif; }

.gallery {
  background: #EEE;
}

.gallery-cell {
  width: 100%;
  height: calc(calc(100vw * 400) / 1024);
}

/* cell number */
.gallery-cell:before {
  display: block;
  color: white;
}



/* pricetable stuff */
.pricetable {
	margin-left:auto;
	margin-right:auto;
	border-collapse: collapse;
	border-bottom: 2px solid var(--accent_light);
	border-top: 2px solid var(--accent_light);
	text-align: center;

}
.pricetable td, .pricetable th{
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 1.5em;
	padding-right: 1.5em;
}
.pricetable thead{
	border-bottom: 2px dotted var(--accent_light);
}