/* External font(s) */

/* General settings, variables */
:root {
	--divMainWrapperWidth: 100%;
	--divMainContentWidth: 300px;
	--headerHeight: 80px;
	--footerHeight: 100px;
	--borderRadiusGeneral: 6px;
	--colorPri: #002756;
	--colorSec: #e19e20;

	/* neu */
	--primary60:   #ebebeb;
	--secondary30: #001761;
	--accent10:    #614A00;
}

/* Global settings */
*, *:before, *:after {
 	box-sizing: border-box;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	font-weight: 400;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

body,
html {
	margin: 0;
	padding: 0;
}

/* Google Icons */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 48
}

/* Headline settings */
h1 {
	font-size: 2.0rem;
	margin-bottom: 0.25rem;
	color: var(--colorSec);
}

h2 {
	font-size: 0.75rem;
	margin-bottom: 0.25rem;
	color: var(--colorSec);
}

pre {
	font-family: 'Courier New', serif;
}

/* Text for general things and stuff */
.mainText {
	font-size: 1rem;
	color: white;
}

.mainTextMini {
	margin: 5px 0 8px 0;
	font-size: 0.8rem;
	color: #cccccc;
}

.accentText {
	color: white;
	font-weight: bold;
}

	/* Links */
	.mainText a:link,
	.mainText a:visited,
	.mainText a:hover,
	.mainText a:visited {
		text-decoration: none;
		color: white;
	}

	.mainText a:hover {
		color: var(--colorSec);
	}


.alert {
	background-color: yellow;
	color: #101010;
	padding: 5px;
	margin: 10px 0;
	font-size: 12px;
}

/* Entire page */
.divPageWrapper {
	width: var(--divMainWrapperWidth);
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-image: url('../img/bg000001.jpg');
	background-size: cover;
} 

	/* Main content to display
	Later: Content width depends on the type of the device */
	.divMainContent {
		padding: 60px 0 0 0;
		margin: 0 auto;
		width: var(--divMainContentWidth);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

		.summaryNotBilledEvent {
			display: flex;
			margin: 0 0 30px 0;
		}

		.summaryNotBilledEvent > div:nth-child(1){
			width: 260px;
			border: 1px solid #808080;
			border-radius: 9px;
			background-color: #00000033;
			padding: 6px;
		}

		.summaryNotBilledEvent > div:nth-child(2){
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			min-width: 40px;
		}
		
		.vereinHeadline {
			overflow: hidden;
			height: 40px;
			width: 100%;
			display: flex;
			flex-direction: row;
			border-radius: 9px;
			border: 2px solid var(--colorPri);
			margin: 0 0 10px 0;
			align-items: center;
			justify-content: space-between;
		}
		
		.vereinHeadlineText {
			font-size: 16px;
			font-weight: bold;
			color: #eeeeee;
		}		
		
		.vereinDatumText {
			font-size: 14px;
			font-weight: bold;
			color: #eeeeee;
		}
		
			.vereinHeadline > div:nth-child(1) {
				display: flex;
				align-items: center;
				padding: 0 0 0 7px;
				height: 100%;
				width: 80%;
				background-color: #60606080;
				color: #eeeeee;
			}
			
			.vereinHeadline > div:nth-child(2) {
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				width: 20%;
				background-color: #009900;
				color: #eeeeee;
			}		
			
		.btnInvoicePreview {
			padding: 0;
			margin: 0;
			border: none;
			background-color: #00000000;
			color: #eeeeee;
		}	
		
		.divInvoicePreviewWrapper {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 100%;
			min-height: 100vh;
			background-color: #585858;
		}
		
		.divInvoicePreviewLetter {
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			max-width: 593px;
			min-height: 839px;
			margin: 30px 0 30px 0;
			background-color: #eeeeee;
			box-shadow: 5px 5px 10px 10px #11111180;
		}

		.btnInvoice {
			cursor: pinter;
			padding: 0;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 35px;
			color: white;
			border-radius: 6px;
			border: 1px solid white;
			background-color: #009900;
		}

		.btnAbrechnen {
			padding: 0;
			justify-content: center;
			align-items: center;
			width: 35px;
			height: 35px;
			color: white;
			border-radius: 6px;
			border: 1px solid white;
			background-color: #009900;
		}

		.chkBoxInfo {
			padding: 0;
			margin: 0;
			color: #808080;
			font-size: 0.5rem;
		}

		/* General settings for all images */
		.imgGeneral {
			margin: 0px;
			padding: 0px;
		}

		/* Header, top of the page */
			header {
			display: flex;
			flex-direction: column;
			align-items: center;
			min-height: var(--headerHeight);
			padding: 22px 0px 30px 0px;
		}

			/* Settings for company logo in the header area */
			.imgHeaderIcon {
				width: 32px;
				height: 32px;
			}

		/* Content */
		main {
			display: flex;
			flex-direction: column;
			align-items: center;
			min-height: calc(100vh - (var(--headerHeight)) - (var(--footerHeight)));
			width: 100%;
			overflow: hidden;
		}

			/* Show or hide elements via javascript */
			.elementHidden {
				display: none;
			}

			.elementVisible {
				display: block;
			}

			.radioButtonContainer {
				overflow: hidden;
				width: 100%;
				display: flex;
				flex-direction: row;
				border: 1px solid #808080;
				border-radius: 9px;
			}

				.radioButtonContainer > div:nth-child(1) {
					cursor: pointer;
					padding: 8px;
					display: flex;
					width: 50%;
					height: 100%;
					justify-content: center;
					text-align: center;
				}

				.radioButtonContainer > div:nth-child(2) {
					cursor: pointer;
					padding: 8px;
					width: 50%;
					height: 100%;
					padding: 8px;
					display: flex;
					justify-content: center;
					text-align: center;
				}

			/* Horizontal line with margins */
			hr {
				border: none;
				width: 80%;
				height: 1px;
				background-color: #ffffff40;
				margin: 35px 0px;
			}

			.hrSmall {
				border: none;
				width: 260px;
				height: 1px;
				background-color: #ffffff40;
				margin: 2px 0px;
			}

			.headlineEventSection {
				color: var(--colorSec);
				font-size: 1rem;
				font-weight: 700;
			}

			/* General settings for all forms */
			.formGeneral {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 100%;
				margin: 0px;
				padding: 0px;
				border-radius: var(--borderRadiusGeneral);
			}

				/* Make checkboxes bigger as usual */
				input[type=checkbox] {
					height: 20px;
					width: 20px;
					border: none;
				}

				/* Labels for form elements */
				label {
					color: white;
				}

				/* A vertical gap between, for example, a text field and a button */
				.gapBetweenFormElements {
					height: 22px;
				}

				/* Hidden form elements which appearing later through java script code */
				.hiddenFormElement {
					display: none;
				}

				/* Visible form elements which vahish later through java script code */
				.visibleFormElement {
					display: block;
				}

				/* Tiny text below a form element to inform the user what does the element do */
				.formElementTextNotice {
					padding-left: calc(var(--borderRadiusGeneral) - 2px);
					color: #999999;
					font-size: 0.65rem;
				}

				/* Tiny text below a form element to inform the user what's wrong */
				.formElementTextError {
					padding-left: calc(var(--borderRadiusGeneral) - 2px);
					color: #ff0000;
					font-size: 0.65rem;
					font-weight: bold;
				}

				/* Editable list with names from players and verein */
				.playerList {
					margin: 0px 0px 7px 0px;
					width: 100%;
					display: flex;
					justify-content: space-between;
				}

					/* Players last name */
					.playerList input {
						width: 31%;
						margin: 0% 2% 0% 0%;
						border: none;
						border-bottom: 1px solid #ffffff66;
						padding: 0px 0px 2px 0px;
						color: #ffffff;
						background-color: #ffffff00;
					}

					/* Currently not in the project */
					.playerList button {
						width: 25%;
						display: flex;
						justify-content: center;
  						align-items: center;
						margin-left: 10px;
						height: 35px;
						width: 35px;
						color: #cccccc;
						background-color: #ff0000;
						border: none;
						border-radius: var(--borderRadiusGeneral);
					}

				/* Show a nice plus icon and a friendly text which provides the user a option to add a new verein */
				.divGroupAddNewVerein,
				.divGroupAddNewPlayer {
					cursor: pointer;
					display: flex;
					flex-direction: row;
					width: 100%;
					height: 35px;
				}

					/* The plus icon */
					.divGroupAddNewVerein div:nth-child(1),
					.divGroupAddNewPlayer div:nth-child(1) {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 35px;
						width: 35px;
						color: white;
						background-color: #31B404;
						border-radius: var(--borderRadiusGeneral);
					}


					/* The text */
					.divGroupAddNewVerein div:nth-child(2),
					.divGroupAddNewPlayer div:nth-child(2) {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-left: 7px;
						height: 35px;
						color: white;
					}

				/* Row-aligned div's for name of verein, save button and delete button */
				.divGroupShowEditDeleteVerein {
					display: flex;
					flex-direction: row;
					width: 100%;
					justify-content: center;
  					align-items: center;
				}
					/* Save button */
					.divGroupShowEditDeleteVerein div:nth-child(2) {
						display: flex;
						justify-content: center;
  						align-items: center;
						margin-left: 10px;
						height: 35px;
						width: 35px;
						color: white;
						background-color: #ffaa00;
						border-radius: var(--borderRadiusGeneral);
					}

					/* Delete button */
					.divGroupShowEditDeleteVerein div:nth-child(3) {
						display: flex;
						justify-content: center;
  						align-items: center;
						margin-left: 10px;
						height: 35px;
						width: 35px;
						color: #cccccc;
						background-color: #ff0000;
						border-radius: var(--borderRadiusGeneral);
					}

				/* Editable list with names from players and verein */
				.vereinList {
					margin: 0px 0px 7px 0px;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

					/* Players last name */
					.vereinList input {
						width: 100%;
						border: none;
						border-bottom: 1px solid #ffffff66;
						padding: 0px 0px 2px 0px;
						color: #ffffff;
						background-color: #ffffff00;
					}

				.showSpielerFromSelectedVerein {
					display: flex;
					flex-direction: column;
					min-height: 10px;
					width: 100%;
					margin-top: 10px;
					background-color: fuchsia;
				}

				.horizontalFormElementsFullWidth {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}

				/* Group for selecting day, month and year */
				.formDateMonthYearPickerGroup {
					min-width: 300px;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}

				/* Datei hochladen, Button */
				.fileBrowser {
					display: flex;
					justify-self: center;
					color: #e9e9e9;
					padding-left: 3px;
					width: 100%;
					height: 35px;
					font-size: 1rem;
					border: none;
					border-radius: var(--borderRadiusGeneral);					
				}

				/* Viereckische Checkbox */
				.formCheckBox {
					width: 35px;
					height: 35px;
					background-color: #dddddd;
				}

				/* General settings for form input fields */
				.formInputGeneral {
					width: 100%;
					margin: 5px 0px;
					padding: 0px 10px;
					height: 35px;
					font-size: 1.0rem;
					border: none;
					background-color: #eeeeee;
					border-radius: var(--borderRadiusGeneral);
				}

				/* Beschreibung hinter (rechts neben) Checkboxen */
				.checkBoxTxt {
					color: var(--colorSec);
					padding: 0 0 8px 0;
				}

				/* Select option form element with 1/3 width */
				.formSelectOption {
					padding-left: 3px;
					width: 90px;
					height: 35px;
					font-size: 1rem;
					border: none;
					border-radius: var(--borderRadiusGeneral);
					color: var(--colorPri);
				}

				/* Select option form element full width */
				.formSelectOptionFullWidth {
					padding-left: 3px;
					width: 100%;
					height: 35px;
					font-size: 1rem;
					border: none;
					border-radius: var(--borderRadiusGeneral);
					color: var(--colorPri);
				}

				.formSelectOption75percWidth {
					width: 75%;
					height: 35px;
					font-size: 1rem;
					border: none;
					border-radius: var(--borderRadiusGeneral);
					color: var(--colorPri);
				}

				/* General settings for form input buttons */
				.formInputButton {
					width: 100%;
					cursor: pointer;
					height: 3rem;
					margin: 20px 0px 20px 0px;
					padding: 0px 10px;
					margin: 5px;
					font-size: 1.00rem;
					font-weight: 700;
					border: none;
					background-color: var(--colorPri);
					color: var(--colorSec);
					border-radius: var(--borderRadiusGeneral);
				}

				/* Form input buttons with inverted colors */
				.formInputButtonInverted {
					width: 100%;
					cursor: pointer;
					height: 3rem;
					padding: 0px 10px;
					margin: 5px;
					font-size: 1.00rem;
					font-weight: 700;
					border: none;
					background-color: var(--colorSec);
					color: var(--colorPri);
					border-radius: var(--borderRadiusGeneral);
				}

				/* Form input buttons with a border */
				.formInputButtonOutlined {
					width: 100%;
					cursor: pointer;
					height: 3rem;
					padding: 0px 10px;
					margin: 10px 0px;
					font-size: 1.00rem;
					font-weight: 700;
					border: 2px solid var(--colorSec);
					background-color: #00000000;
					color: var(--colorSec);
					border-radius: var(--borderRadiusGeneral);
				}

				/* Form delete buttons with trashcan on it */
				.formDeleteButton {
					cursor: pointer;
					width: 35px;
					height: 35px;
					font-size: 1.00rem;
					font-weight: 700;
					border: none;
					background-color: red;
					color: white;
					border-radius: var(--borderRadiusGeneral);
				}

			/* Login form settings */
			.formLogin {
				display: flex;
				flex-direction: column;
			}

		/* Footer, bottom of page */
		footer {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 50px;
			padding-bottom: 100px;
			min-height: var(--footerHeight);
		}

			/* Copyright info text */
			.footerCopyrightInfo {
				font-size: 0.55rem;
				color: var(--colorSec);
			}

			.hidden {
				display: none;
			}

			.flex {
				display: flex;
			}

			.vertical {
				flex-direction: column;
			}

			.selectFieldAndDelButton {
				display: flex;
				flex-direction: row;
				width: 300px;
			}

			select {
				height: 40px;
				width: 250px;
				background-color: #FFFFCD;
				font-size: 1.00rem;
				border-radius: 7px;
				border: 2px solid #1D2975;
				padding: 7px;
			}

			button {
				cursor: pointer;
				font-size: 1.00rem;
				border-radius: 7px;
				border: 2px solid #FFFEAE;
				padding: 7px;
			}

			.btnDelete {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 0 4px 0;
				background-color: #ff0000;
				font-size: 2rem;
				color: #ffffff;
				width: 40px;
				height: 40px;
				border-radius: 20px;
				border: 1px solid white;
				margin: 0 0 0 10px;
			}

			.btnAdd {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: var(--colorSec);
				color: var(--colorPri);
				height: 40px;
				border-radius: 5px;
				border: 1px solid var(--colorPri);
				width: 100%;
				margin: 0 0 20px 0;
			}

			.btnCancel {
			  text-decoration: none; 
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: var(--colorSec);
				color: var(--colorPri);
				height: 40px;
				border-radius: 5px;
				border: 1px solid var(--colorPri);
				width: 100%;
				margin: 0 0 20px 0;
			}

			.btnCTA {
			  text-decoration: none; 
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: var(--colorPri);
				color: var(--colorSec);
				height: 40px;
				border-radius: 5px;
				border: 1px solid var(--colorSec);
				width: 100%;
				margin: 0 0 20px 0;
			}

			input[type=checkbox] {
				width: 24px;
				height: 24px;
				margin: 0 10px 10px 0;
			}

			input[type=radio] {
				width: 24px;
				height: 24px;
				margin: 0 10px 10px 0;
			}

			.radioSection {
				display: flex;
				justify-content: center;
				margin: 12px 0 0 0;
				background-color: #0000ff;
			}

			.playerGroupGeneral {
				border: 1px solid #acacac;
				padding: 7px;
				margin: 5px 0px 30px 0px;
				max-width: 300px;
				border-radius: 7px;
				background-color: #F3F3F3;
			}

			.playerCheckbox {
				margin: 7px 0;
			}

.formRow {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.formRow > div:nth-child(1) {
	display: flex;
	flex-direction: column;
	width: 80%;
}

.formRow > div:nth-child(2) {
	display: flex;
	flex-direction: column;	
	width: 20%;
}

.selectInvoiceDate {
	width: 98%;
}

.reloadInvoiceList {
	background-color: darkorange;
	height: 40px;
	width: 40px;
	border: 2px solid #101010;
	width: 100%;
	color: white;
}

.fileLink a:link,
.fileLink a:visited {
	color: darkorange;
}

.fileLink a:hover {
	color: orange;
}

/* ******************************************************************************************
NAV MENU
****************************************************************************************** */

.NAVstickyHeader {
	position: fixed;
	top: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* Kompletter Headerbalken */
.NAVstickyHeaderTop {
	display: flex;
	flex-direction: row; 
	width: 100%;
	height: 60px;
	padding: 12px 24px;
	justify-content: space-between;
	align-items; center;
	background: rgb(17,52,77);
	background: radial-gradient(circle, rgba(17,52,77,1) 59%, rgba(0,40,48,1) 100%);
}

/* Links der Hamburger, Logo in der Mitte und Profilbild rechts */
.NAVstickyHeaderTop > div {
	display: flex;
	align-items: center; 
}

/* Container für das Hamburger Icon */
.NAVhamburgerIcon {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	margin: auto 0;
	width: 24px;
}

/* 3 Striche für das Hamburger Icon */
.NAVhamburgerIcon > div { 
	width: 100%;
	height: 2px;
	margin: 3px 0;
	background-color: #bbbbbb;
	border-radius: 2px;
}

nav {
	z-index: 99;
	position: absolute;
	top: 60px;
	margin: 0 48px 48px -400px;
	padding: 0 20px 0 0;
	background-color: #cacacaef;
	border-radius: 0 0 16px 0;
	box-shadow: 10px 10px 30px 6px rgba(0,0,0,0.25);

	opacity: 0;
	-webkit-transition: opacity 0.3s ease, margin 0.3s ease;
	   -moz-transition: opacity 0.3s ease, margin 0.3s ease;
		 -o-transition: opacity 0.3s ease, margin 0.3s ease;
			transition: opacity 0.3s ease, margin 0.3s ease;
}

.NAVvisible {
	margin: 0 48px 48px 0;
	opacity: 1;
	-webkit-transition: opacity 0.9s ease, margin 0.9s ease;
	   -moz-transition: opacity 0.9s ease, margin 0.9s ease;
		 -o-transition: opacity 0.9s ease, margin 0.9s ease;
			transition: opacity 0.9s ease, margin 0.9s ease;
}

.NAVnavListText,
.NAVnavListText a:link,
.NAVnavListText a:hover,
.NAVnavListText a:visited {
	color: inherit;
	text-decoration: none;
	margin: -3px 0 0 18px;
}

menu {
}

ul {
	list-style-type: none;
	width: 100%;
	padding: 24px 0 28px 24px;
}

li {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-family: 'Darker Grotesque', sans-serif;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 1px;
	color: #646464;
	padding: 12px 0 12px 0;
}

.NAVtxtEbene2 {
	color: #727272;
	cursor: pointer;
	font-family: 'Darker Grotesque', sans-serif;
	font-size: 12px;
	font-weight: 300;
	line-height: 36px;
	padding: 0 0 0 51px;
}

.NAVuserPic {
	cursor: pointer;
	height: 24px;
	width: 24px;
	border-radius: 50%;
	margin: auto 0;
	background-color: #929292;
	align-items: center;
	justify-content: center;
	font-family: 'Darker Grotesque', sans-serif;
	font-size: 12px;
	line-height: 14px;
	color: #e0e0e0;
}

.NAVuserPic a:link,
.NAVuserPic a:hover,
.NAVuserPic a:visited {
	font-size: inherit;
	text-decoration: none;
	color: #dddddd;
}

.editVereinFromList {
	background-color: rgb(255, 160, 71);
	height: 35px;
	width: 35px;
	margin: 4px 0 4px 0;
	border-radius: 5px;
	color: white;
	border: 1px solid white;
}

.editEventFromList {
	background-color: rgb(255, 160, 71);
	height: 25px;
	width: 25px;
	margin: 0;
	padding: 0;
	border-radius: 5px;
	color: white;
	border: 1px solid white;
}

.allEventsSingleEventBox {
  margin-bottom: -10px;
  align-self: center;
  display: flex;
  flex-direction: column;
  border: 1px solid gray;
  border-radius: 5px;
  min-width: 300px;
  max-width: 700px;
  width: 95%;
  box-shadow: 2px 2px 10px 5px #00000050;
}

.allEventsSingleEventBox .header {
  display: flex;
  justify-content: space-between; /* Stellt sicher, dass die Inhalte verteilt werden */
  width: 100%; /* Nimmt die volle Breite der Box ein */
}

.allEventsSingleEventBox .header .vereine {
  display: flex;
  width: 100%;
  text-align: center;
  flex-direction: column;
  justify-content: center; 
  background-color: #00000060;
}

.allEventsSingleEventBox .header .vereine .vereinGast {
	font-size: 16px;
  display: block;
  color: #E0E0E0;
}

.allEventsSingleEventBox .header .vereine .vereinZwischentext{
  font-size: 10px;
  display: inline;
  color: #C0C0C0;
}

.allEventsSingleEventBox .header .vereine .vereinHost {
  display: inline;
  color: #C0C0C0;
  font-size: 10px;
}

.allEventsSingleEventBox .header .datum {
  background-color: #80808060;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 6px 4px 6px;
}

.allEventsSingleEventBox .header .datum .wochentag {
  font-size: 26px;
  font-weight: 700;
  color: #e19e20;
}

.allEventsSingleEventBox .header .datum .tagundmonat {
  font-size: 14px;
  font-weight: 600;
  color: #d69b2d;
}

.allEventsSingleEventBox .header .infofeld {
  background-color: #14571f;
  display: flex;
  justify-content: center;
  align-items: center; 
	width: 48px;
}

.allEventsSingleEventBox.hiddenBox {
	box-sizing: border-box;
	margin-top:16px;
	border:1px solid #808080;
	width:90%;
	max-width:680px;
	background-color:#FFFFFF80;
	border-radius:5px;
	padding: 0;
  opacity: 0;
  max-height: 0;
  transition: opacity 0.5s ease, max-height 0.5s ease;
  overflow: hidden;
}

.allEventsSingleEventBox.hiddenBox.show {
  opacity: 1;
  max-height: 1500px; /* Eine ausreichende Höhe angeben */
  margin-bottom: 16px;
  padding: 16px; 
}

.allEventsSingleEventBox .buttonBox {
	display: flex;
	width: 100%;
	justify-content: center;
	border-top: 1px solid #646464;
}

/* links, abbrechen */
.allEventsSingleEventBox .buttonBox a:nth-child(1) {
	text-decoration: none;
	cursor: pointer;
	display: flex;
	justify-content: center;
	padding: 10px 0;
	width: 100%;
	font-size:12px;
  background-color: var(--colorSec);
  color: var(--colorPri);
}

/* rechts, action */
.allEventsSingleEventBox .buttonBox a:nth-child(2) {
	text-decoration: none;
	cursor: pointer;
	display: flex;
	justify-content: center;
	padding: 10px 0;
	width: 100%;
	font-size: 12px;
  background-color: var(--colorPri);
  color: var(--colorSec);
}

.dashboardWrapper {
  width: 100vw; /* Volle Breite des Viewports */
  display: flex;
  justify-content: center; /* Zentriert die gesamte Kachelbox */
  padding: 0 16px;
}

.dashboardCardsBox {
  width: 100%; /* DashboardCardsBox nimmt 100% der Breite des umgebenden Containers ein */
  display: flex;
  flex-wrap: wrap; /* Kacheln umbrechen, wenn kein Platz mehr ist */
  gap: 10px; /* Abstand zwischen den Kacheln */
  background-color: #FFFFFF10;
}

.dashboardCardsBox .tile {
  display: flex;
  flex-direction: column; 
  justify-content: space-between; /* Verteilt den Inhalt gleichmäßig, damit er sich über die Höhe der Kachel streckt */
  align-items: stretch; /* Stellt sicher, dass Kinder-Elemente die volle Breite einnehmen */
  flex: 1 1 300px; /* Flexibler Start bei 300px, wächst oder schrumpft */
  min-height: 145px; /* Höhe der Kacheln */
  background-color: #FFFFFFB8;
  border: 1px solid #808080;
  border-radius: 5px;
  box-sizing: border-box; /* Bezieht Padding und Border in die Breite mit ein */
  padding: 10px; /* Füge Padding hinzu, um den Inhalt innerhalb der Kachel etwas abzusetzen */
}

.dashboardCardsBox .tile .headline .left {
  font-size: 24px;
  font-weight: 400;
  color: #232323;
}

.dashboardCardsBox .tile .value {
  font-size: 44px;
  font-weight: 900;
  color: #120e61;
}

.dashboardCardsBox .tile .key {
  font-size: 11px;
  font-weight: 400;
  color: #120e61;
}

.dashboardCardsBox .tile .bottom {
  font-size: 10px;
  color: #808080
}

/* Säulendiagramme */
.diagram.bar {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 10px; /* Abstand zwischen den Spalten */
}

/* Säulen der Säulendiagramme */
.diagram.bar * {
  display: flex;
  align-items: flex-end;
  background-color: #00000010;
  min-width: 10px;
  height: 100px;
}

/* Farbiger Wertebereich */
.diagram.bar .value {
  background-color: #990000;
  width: 100%;
}

/* Beschriftung der Säulen */
.barcaption {
  margin-top: 8px;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 10px; /* Abstand zwischen den Spalten */
}

.barcaption * {
  color: #808080;
  display: flex;
  justify-content: center;
}

.diagrambartext {
	background: none !important;
	color: #F0F0F0;
	font-size: 11px;
	position: absolute;
	transform: translateX(13px) translateY(-32px) rotate(-90deg);
	transform-origin: bottom center; /* Optional: Ankerpunkt für die Drehung */
	white-space: nowrap; /* Verhindert Zeilenumbruch, sodass der Text in einer Linie bleibt */
	display: inline-block; /* Erforderlich, um die Drehung korrekt anzuwenden */
}



























/* END */