/* ================= GENERELLE EINSTELLUNGEN =================  */
:root {
	/* BlurBackground  */
	--bb-blur-background-color: rgba(120, 120, 150, 0.1);
	--bb-blur-intensity: 12px;
	--bb-transition-backdrop-time: 0.8s;
	--bb-transition-opacity-time: 0.8s;
	--bb-z-index: 900;

	/* ===================== STANDARD-DIALOG ===================== */
	/* Dialog-Container  */
	--dc-transition-backdrop-time: 0.8s;
	--dc-transition-opacity-time: 0.8s;
	--dc-z-index: 950;

	/* Add-Dialog  */
	--dialog-width: 375px;
	--dialog-height: 250px;
	--dialog-background: rgba(10, 15, 20, 1.0); /* alt -> rgba(200, 200, 250, 1.0); */
	--dialog-border-radius: 3px;
	--dialog-border: 2px groove rgba(25, 25, 40, 1.0);
	--dialog-box-shadow: 0px 4px 8px 4px rgba(20, 20, 40, 0.7);
	--dialog-z-index: 980; 

	/* Dialog-Content-Container*/
	--dcc-z-index: 985;

	/* Dialog -Header*/
	--dh-height: 35px;
	--dh-font-size: 22px;
	--dh-line-height:25px;
	--dh-background: rgba(12, 12, 25, 1); /* alt rgba(150, 150, 200, 0.04) */
	--dh-color: rgba(200, 200, 250, 1.0);
	--dh-border-bottom: 1px solid rgba(50, 50, 80, 1.0);
	--dh-padding: 0 8px;

	/* Dialog-Header-Caption-Icon  */
	--dh_cai-size: 22px;
	--dh_cai-margin-right: 10px;
	--dh_cai-opacity: 1;

	/* Dialog-Header-IconContainer */
	--dh_c-size: 28px;
	--dh_c-border: 1px solid rgba(50, 50, 80, 0.3);
	--dh_c-border-radius: 2px;

	--dh_c-backgroundOnHover: rgba(220, 220, 250, 0.12);

	/* Dialog-Header-Close-Icon */
	--dh_cli-size: 25px;
	--dh_cli-transition: all 0.2s ease;

	--dh_cli-transformOnHover: scale(1.2);

	/* Dialog-Body */
	--db-color: rgba(200, 200, 250, 1.0);

	/* Dialog-Body-Caption */
	--db_c-font-size: 1.8rem;
	--db_c-font-weight: bold;
	--db_c-letter-spacing: 1px;
	--db_c-padding-top: 1rem;
	--db_c-margin-bottom: 1rem;

	/* Dialog-Form */
	--dialog_form-row-gap: 2rem;

	/* Dialog-Footer  */
	--df-height: 55px;
	--df-widht: 100%;

	/* Dialog-Add-Button */
	--dialogAddButton-height: 30px;
	--dialogAddButton-padding: 0 10px;
	--dialogAddButton-background: rgba(155, 255, 155, 0.08);
	--dialogAddButton-border-radius: 2px;
	--dialogAddButton-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	--dialogAddButton-blur: blur(0.6px);
	--dialogAddButton-border: 1px solid rgba(255, 255, 255, 0.59);
	--dialogAddButton-transition: blur 0.7s linear, background 1.2s linear;

	--dialogAddButton-blurOnHover: blur(1.15px);
	--dialogAddButton-backgroundOnHover: rgba(155, 255, 155, 0.18);

		/* Dialog-Storno-Button */
	--dialogStornoButton-height: 30px;
	--dialogStornoButton-padding: 0 10px;
	--dialogStornoButton-background: rgba(255, 255, 155, 0.08);
	--dialogStornoButton-border-radius: 2px;
	--dialogStornoButton-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	--dialogStornoButton-blur: blur(0.6px);
	--dialogStornoButton-border: 1px solid rgba(255, 255, 255, 0.59);
	--dialogStornoButton-transition: blur 0.7s linear, background 1.2s linear;

	--dialogStornoButton-blurOnHover: blur(1.15px);
	--dialogStornoButton-backgroundOnHover: rgba(255, 255, 155, 0.18);

	/*Dialog-Input-Felder */
	--dialogInputField-height: 25px;
	--dialogInputField-width: 200px;
	--dialogInputField-line-height: 20px;
	--dialogInputField-opacity: 0.75;


	/* =======================================================  */

	/* ===================== LOGIN-DIALOG ===================== */

	/* Login-Dialog-Container  */
	--ldc-transition-opacity: 0.8s;
	--ldc-z-index: 950;

	/* Login-Dialog  */
	--lid-width: 375px;
	--lid-height: 250px;
	--lid-background: rgba(10, 15, 20, 1.0); /* alt -> rgba(200, 200, 250, 1.0); */
	--lid-border-radius: 3px;
	--lid-border: 2px groove rgba(25, 25, 40, 1.0);
	--lid-box-shadow: 0px 4px 8px 4px rgba(20, 20, 40, 0.7);
	--lid-z-index: 980; 

	/* Dialog-Content-Container*/
	--lid_dcc-z-index: 985;

	/* Login-Dialog -Header*/
	--lid_dh-height: 35px;
	--lid_dh-font-size: 22px;
	--lid_dh-line-height:25px;
	--lid_dh-background: rgba(12, 12, 25, 1); /* alt rgba(150, 150, 200, 0.04) */
	--lid_dh-color: rgba(200, 200, 250, 1.0);
	--lid_dh-border-bottom: 1px solid rgba(50, 50, 80, 1.0);
	--lid_dh-padding: 0 8px;

	/* Login-Dialog-Header-Caption-Icon  */
	--ldh_cai-size: 22px;
	--ldh_cai-margin-right: 10px;
	--ldh_cai-opacity: 1;

	/* Dialog-Header-IconContainer */
	--ldh_c-size: 28px;
	--ldh_c-border: 1px solid rgba(50, 50, 80, 0.3);
	--ldh_c-border-radius: 2px;

	--ldh_c-backgroundOnHover: rgba(220, 220, 250, 0.12);

	/* Dialog-Header-Close-Icon */
	--ldh_ci-size: 25px;
	--ldh_ci-transition: all 0.2s ease;

	--ldh_ci-transformOnHover: scale(1.2);

	/* Login-Dialog-LoginForm */
	--lf-row-gap: 2rem;

	/* Login-Dialog-Footer  */
	--ld_df-height: 55px;
	--ld_df-widht: 100%;

	/* Zufalls-Dialog-BG-Icon  */
	--rndIcon-size: 40px;
	--rndIcon-opacity: 0.4;

	/* Dialog-Cancel-Button */
	--dialogCancelButton-height: 30px;
	--dialogCancelButton-padding: 0 10px;
	--dialogCancelButton-background: rgba(255, 155, 155, 0.08);
	--dialogCancelButton-border-radius: 2px;
	--dialogCancelButton-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	--dialogCancelButton-blur: blur(0.6px);
	--dialogCancelButton-border: 1px solid rgba(255, 255, 255, 0.59);
	--dialogCancelButton-transition: blur 0.7s linear, background 1.2s linear;

	--dialogCancelButton-blurOnHover: blur(1.15px);
	--dialogCancelButton-backgroundOnHover: rgba(255, 155, 155, 0.18);

	/* Dialog-Login-Button */
	--dialogLoginButton-height: 30px;
	--dialogLoginButton-padding: 0 10px;
	--dialogLoginButton-background: rgba(155, 255, 155, 0.08);
	--dialogLoginButton-border-radius: 2px;
	--dialogLoginButton-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	--dialogLoginButton-blur: blur(0.6px);
	--dialogLoginButton-border: 1px solid rgba(255, 255, 255, 0.59);
	--dialogLoginButton-transition: blur 0.7s linear, background 1.2s linear;

	--dialogLoginButton-blurOnHover: blur(1.15px);
	--dialogLoginButton-backgroundOnHover: rgba(155, 255, 155, 0.18);
	
	/*Login-Dialog-Input-Felder */
	--loginDialogInputField-height: 25px;
	--loginDialogInputField-width: 200px;
	--loginDialogInputField-line-height: 20px;
	--loginDialogInputField-opacity: 0.75;

	/* =======================================================  */
}

	
/* ================= Verschwommener Hintergrund =================  */
.dialogBackground {
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--bb-blur-background-color);
	backdrop-filter: blur(var(--bb-blur-intensity));
	opacity: 0;
	visibility: hidden;
	/*pointer-events: none;*/
	transition: backdrop-filter var(--bb-transition-backdrop-time) ease, opacity var(--bb-transition-opacity-time) ease, visibility 0s linear 0.8s;
	/*z-index: var(--bb-z-index);*/
}

.blurDialogBackground {
	visibility: visible;
	opacity: 1;
	/*pointer-events: auto; *//* initial */
	transition-delay: 0s;
	z-index: var(--bb-z-index);
}

/* ================= Standard-Dialog-Container =================  */
#dialogForm {
	display: flex;
	flex-direction: column;
	/*justify-content: space-evenly;*/
	justify-content: flex-start; /* geändert */
	/*height: 100px;*/
	height: auto; /* geändert */
	padding: 1rem 0;
	row-gap: var(--dialog_form-row-gap);
}

.dialogContainer {
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: transparent;
	opacity: 0;
	visibility: hidden;
	transition: backdrop-filter var(--dc-transition-backdrop-time) ease, opacity var(--dc-transition-opacity-time) ease, visibility 0s linear 0.8s;
	/*z-index: var(--dc-z-index);*/
}

.dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	min-height: var(--dialog-height);
	height: auto; /* geändert von fit-content */
	min-width: var(--dialog-width);
	width: auto; /* geändert von fit-content */
	background: var(--dialog-background);
	border: var(--dialog-border);
	border-radius: var(--dialog-border-radius);
	box-shadow: var(--dialog-box-shadow);
	opacity: 1;
	overflow: hidden;
	z-index: var(--dialog-z-index);
}

.dialogContentContainer {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	width: 100%;
	z-index: var(--dcc-z-index);
}

.dialogHeader {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: var(--dh-height);
	padding: var(--dh-padding);
	line-height: var(--dh-line-height);
	font-size: var(--dh-font-size);
	background: var(--dh-background);
	color: var(--dh-color);
	border-bottom: var(--dh-border-bottom);
}

.dialogHeader__Caption{
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 100%;
}

.dialogHeader__CaptionIcon {
	height: var(--dh_cai-size);
	width: var(--dh_cai-size);
	margin-right: var(--dh_cai-margin-right);
	opacity: var(--dh_cai-opacity);
}

.dialogHeader__Close {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--dh_c-size);
	width: var(--dh_c-size);
	border: var(--dh_c-border); 
	border-radius: var(--dh_c-border-radius);
	cursor: pointer;
}

.dialogHeader__CloseIcon {
	height: var(--dh_cli-size);
	width: var(--dh_cli-size);
	transition:  var(--dh_cli-transition);
}

.dialogHeader__Close:hover {
	background-color: var(--dh_c-backgroundOnHover);
}

.DialogHeader__Close:hover .dialogHeader__CloseIcon {
	transform: var(--dh_cli-transformOnHover);
}

.dialogBody {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	/*height: 100%;*/
	height: auto; /* geändert */
	max-height: calc(90vh - var(--dh-height) - var(--df-height));
	width: fit-content;
	color: var(--db-color);
	overflow-y: auto;
}

.dialogBody__caption {
	padding-top: var(--db_c-padding-top);
	margin-bottom: var(--db_c-margin-bottom);
	font-family: 'Lato', Arial;
	font-size: var(--db_c-font-size);
	font-weight: var(--db_c-font-weight);
	letter-spacing: var(--db_c-letter-spacing);
}

.dialogFooter {
	height: var(--df-height);
	width: var(--df-widht);
	flex-shrink: 0;
}

.dialogFooter__buttonContainer {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	height: 100%;
	width: 100%;
}

.dialogAddButton {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: var(--dialogAddButton-height);
	width: fit-content;	
	padding: var(--dialogAddButton-padding);
	background: var(--dialogAddButton-background);
	border-radius: var(--dialogAddButton-border-radius);
	box-shadow: var(--dialogAddButton-box-shadow);
	backdrop-filter: var(--dialogAddButton-blur);
	border: var(--dialogAddButton-border);
	transition: var(--dialogAddButton-transition);
}

.dialogAddButton:hover {
	backdrop-filter: var(--dialogAddButton-blurOnHover);
	background: var(--dialogAddButton-backgroundOnHover);
}

.dialogInputField {
	height:var(--dialogInputField-height);
	width: var(--dialogInputField-width);
	line-height: var(--dialogInputField-line-height);
	font-family: 'Lato', Arial;
}


.getdown {margin-top: 250px;}



/* ================= Login-Dialog-Container =================  */
.loginDialogContainer {
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: transparent;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ldc-transition-opacity) ease-in;
	z-index: var(--ldc-z-index);
}

/* ================= Dialog-Toggle =================  */
.showDialogContainer {
	visibility: visible;
	opacity: 1;
	/*display: flex;*/
	pointer-events: initial;
	transition-delay: 0s;
	z-index: var(--dc-z-index);
}

/* ================= Login-Dialog =================  */
#loginForm {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	height: 100px;
	row-gap: var(--lf-row-gap);
}

.loginDialog {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: var(--lid-height);
	width: var(--lid-width);
	background: var(--lid-background);
	border: var(--lid-border);
	border-radius: var(--lid-border-radius);
	box-shadow: var(--lid-box-shadow);
	opacity: 1;
	overflow: hidden;
	z-index: var(--lid-z-index);
}

.loginDialogContentContainer {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	width: 100%;
	z-index: var(--lid_dcc-z-index);
}

.loginDialog__dialogHeader {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: var(--lid_dh-height);
	padding: var(--lid_dh-padding);
	line-height: var(--lid_dh-line-height);
	font-size: var(--lid_dh-font-size);
	background: var(--lid_dh-background);
	color: var(--lid_dh-color);
	border-bottom: var(--lid_dh-border-bottom);
}

.loginDialogHeader__Caption{
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 100%;
}

.loginDialogHeader__CaptionIcon {
	height: var(--ldh_cai-size);
	width: var(--ldh_cai-size);
	margin-right: var(--ldh_cai-margin-right);
	opacity: var(--ldh_cai-opacity);
}

.loginDialogHeader__Close {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--ldh_c-size);
	width: var(--ldh_c-size);
	border: var(--ldh_c-border); 
	border-radius: var(--ldh_c-border-radius);
	cursor: pointer;
}

.loginDialogHeader__CloseIcon {
	height: var(--ldh_ci-size);
	width: var(--ldh_ci-size);
	transition:  var(--ldh_ci-transition);
}

.loginDialogHeader__Close:hover {
	background-color: var(--ldh_c-backgroundOnHover);
}

.loginDialogHeader__Close:hover .loginDialogHeader__CloseIcon {
	transform: var(--ldh_ci-transformOnHover);
}

.loginDialog__dialogBody {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: fit-content;
}

.loginDialog__dialogFooter {
	height: var(--ld_df-height);
	width: var(--ld_df-widht);
}

.loginDialogFooter__buttonContainer {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	height: 100%;
	width: 100%;
}

/* ================= Zufalls-BG-Icon für Dialog =================  */
.rndIcon {
  position: absolute;
  width: var(--rndIcon-size);
  height: var(--rndIcon-size);
  opacity: var(--rndIcon-opacity);
}

.dialogCancelButton {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: var(--dialogCancelButton-height);
	width: fit-content;	
	padding: var(--dialogCancelButton-padding);
	background: var(--dialogCancelButton-background);
	border-radius: var(--dialogCancelButton-border-radius);
	box-shadow: var(--dialogCancelButton-box-shadow);
	backdrop-filter: var(--dialogCancelButton-blur);
	border: var(--dialogCancelButton-border);
	transition: var(--dialogCancelButton-transition);
}

.dialogCancelButton:hover {
	backdrop-filter: var(--dialogCancelButton-blurOnHover);
	background: var(--dialogCancelButton-backgroundOnHover);
}

.dialogLoginButton {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: var(--dialogLoginButton-height);
	width: fit-content;	
	padding: var(--dialogLoginButton-padding);
	background: var(--dialogLoginButton-background);
	border-radius: var(--dialogLoginButton-border-radius);
	box-shadow: var(--dialogLoginButton-box-shadow);
	backdrop-filter: var(--dialogLoginButton-blur);
	border: var(--dialogLoginButton-border);
	transition: var(--dialogLoginButton-transition);
}

.dialogLoginButton:hover {
	backdrop-filter: var(--dialogLoginButton-blurOnHover);
	background: var(--dialogLoginButton-backgroundOnHover);
}

.loginDialogInputField {
	height:var(--loginDialogInputField-height);
	width: var(--loginDialogInputField-width);
	line-height: var(--loginDialogInputField-line-height);
	font-family: 'Lato', Arial;
}

.dialogAddButton {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: var(--dialogAddButton-height);
	width: fit-content;	
	padding: var(--dialogAddButton-padding);
	background: var(--dialogAddButton-background);
	border-radius: var(--dialogAddButton-border-radius);
	box-shadow: var(--dialogAddButton-box-shadow);
	backdrop-filter: var(--dialogAddButton-blur);
	border: var(--dialogAddButton-border);
	transition: var(--dialogAddButton-transition);
}

.dialogAddButton:hover {
	backdrop-filter: var(--dialogAddButton-blurOnHover);
	background: var(--dialogAddButton-backgroundOnHover);
}

.dialogStornoButton {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: var(--dialogStornoButton-height);
	width: fit-content;	
	padding: var(--dialogStornoButton-padding);
	background: var(--dialogStornoButton-background);
	border-radius: var(--dialogStornoButton-border-radius);
	box-shadow: var(--dialogStornoButton-box-shadow);
	backdrop-filter: var(--dialogStornoButton-blur);
	border: var(--dialogStornoButton-border);
	transition: var(--dialogStornoButton-transition);
}

.dialogStornoButton:hover {
	backdrop-filter: var(--dialogStornoButton-blurOnHover);
	background: var(--dialogStornoButton-backgroundOnHover);
}

.dialogInputField {
	height:var(--dialogInputField-height);
	width: var(--dialogInputField-width);
	line-height: var(--dialogInputField-line-height);
	font-family: 'Lato', Arial;
}

/* Bessere Textarea-Handhabung */
.dialogTextarea {
	min-height: 120px;
	height: auto;
	resize: vertical;
}