/* ======================= GENERAL ======================= */
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);

:root {

	/* Input-Background */	
	--InputBackground: rgba(200, 200, 248, 1.0);
	--InputBackgroundOnHover: rgba(221, 255, 229, 1.0);
	--InputBackgroundOnFocus: rgba(207, 221, 251, 1.0);
	--InputDisabledBackground: rgba(204, 204, 204, 1.0);
	--InputDisabledColor: rgba(170, 170, 170, 1.0);

	/*backgroundplates*/
	--bpl-min-height:100px;
	--bpl-min-width: 380px;
	--bpl-width: 100vw;
	--bpl-max-width:1200px;
	--bpl-margin-bottom: 20px;
	--bpl-border: 1px inset rgba(100, 100, 180, 0.35);
	--bpl-border-radius: 2px;
	--bpl-background-blue: rgba(100, 100, 200, 0.15);
	--bpl-background-green: rgba(100, 200, 100, 0.15);
	--bpl-background-red: rgba(200, 100, 100, 0.15);
	--bpl-background-orange:rgba(200, 175, 75, 0.15);
	--bpl-row-gap: 2rem;
	--bpl-caption-margin: 2rem 0;
	--bpl-caption-font-family: 'Lato', Arial;
	--bpl-caption-font-size: 1.4rem;
	--bpl-caption-font-weight: bold;
	--bpl-caption-font-letterspacing: 1px;
	--bpl-caption-font-color: rgba(200, 200, 250, 1.0);

	/*daystartfields / dayendfields*/
	--dayFieldContainer-caption-font-family: 'Lato', Arial;;
	--dayFieldContainer-caption-font-size: 1.2rem;
	--dayFieldContainer-caption-font-color: rgba(200, 200, 250, 1.0);
	--dayFieldContainer-bacground: rgba(20, 20, 40, 0.1);
	--dayFieldContainer-border: 1px groove rgba(100, 100, 180, 0.35);
	--dayFieldContainer-border-radius: 2px;
	--dayFieldContainer-width: 110px; /*145px*/
	--dayFieldContainer-height: 235px;

	/*daystartbuttons / dayendbuttons*/
	--dayValueButton-size: 70px;
	--dayValueButton-border: 1px groove rgba(100, 100, 180, 0.35);
	--dayValueButton-border-radius: 2px;
	--dayValueButton-font-size: 35px;
	--dayValueButton-blur: 15px;
	--dayValueUpButton-background: rgba(155, 255, 155, 0.18);
	--dayValueDownButton-background: rgba(255, 155, 155, 0.18);

	--dayInput-max-height: 30px;
	--dayInput-font-size: 2.5rem;

	/*Touchbuttons*/

}


html, body {
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: rgba(20, 20, 50, 1.0);
	color: rgba(250, 250, 250, 1.0);
	font-family: 'Lato', Arial;
	font-size: 10px;
	 width: 100vw;
	 height: 100vh;
	 margin-bottom: 10px;
	 overflow-x: hidden;
	 overflow-y: auto;
	 z-index: 0;
}

body.logged-out::before {
	content: "";
	position: fixed;
	inset: 0;
	background: url("../../media/backgrounds/WStatBG_2.png") center/cover no-repeat;
	mix-blend-mode: luminosity; 
	opacity: 0.1;
	z-index: -1;
	pointer-events: none;
}

body.logged-in::before {
	content: none;
}

/* ====================================================== */
/* ======================= INPUTS ======================= */
input[disabled], input[disabled]:hover {
	background: var(--InputDisabledBackground);
	color: var(--InputDisabledColor);
}

input {
	background: var(--InputBackground);
	color: rgba(0, 0, 152, 1);
	border-color: rgba(150, 150, 150, 1);
	transition: background 0.4s ease;
	border-radius: 2px;
}

input:hover { background: var(--InputBackgroundOnHover); }
input:focus { background: var(--InputBackgroundOnFocus); }
select {
	background: var(--InputBackground);
	color: rgba(0, 0, 152, 1);
	border-color: rgba(150, 150, 150, 1);
	transition: background 0.4s ease;
}

select:hover { background: var(--InputBackgroundOnHover); }
select:focus { background: var(--InputBackgroundOnFocus); }
textarea {
	background: var(--InputBackground);
	color: rgba(0, 0, 152, 1);
	border-color: rgba(150, 150, 150, 1);
	transition: background 0.4s ease;
}

textarea:hover { background: var(--InputBackgroundOnHover); }
textarea:focus { background: var(--InputBackgroundOnFocus); }

.formInput {
	line-height: 2.5;
	height: 20px;
	font-family: 'Lato', Arial;
	min-width: 250px;
}

/* ====================================================== */
/* ======================= GENERAL-CONTENT ======================= */
#content {
	display: flex;
	flex-direction: column;
	flex: 1;
	align-items: center;
	position: relative;
	top: 30px;
	/*height: 100vh;*/
	margin-bottom: 70px;
	width: 100%;
	max-width: 1600px;
	overflow-y: scroll;
}
#contentCaption {
/*	position: relative;
	top: 50px;
	*/
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	text-align: center;
	width: 100vw;
	margin-bottom: 25px;
	font-size: 1.5rem;
}

#listTabelButtonContainer {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	width: 400px;
}
/* ====================================================== */
/* ======================= BUTTONS ======================= */
/*  kommt später in die effects.css */
@keyframes blinkBox {
  	0%, 100% { opacity: 1; }
  	50% { opacity: 0.3; }
}

.touchButtonContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	width: 100%;
	margin-bottom: 75px;
}

.touchButton {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 40px;
	width: 120px;
	border: 1px groove rgba(100, 100, 180, 0.5);
	border-radius: 2px;
}
/*
.touchButtonRed {background: rgba(200, 100, 100, 0.75);}
.touchButtonGreen {background: rgba(100, 200, 100, 0.75);}
.touchButtonyellow {background: rgba(200, 200, 100, 0.75);}
*/
.list-head-button-icon {
	height: 50px;
	width: 50px;
}
/* ====================================================== */




/* ======================= Background-Plates ======================= */
.backgroundplate {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	min-height: var(--bpl-min-height);
	min-width: var(--bpl-min-width);
	width: var(--bpl-width);
	max-width: var(--bpl-max-width);
	margin-bottom: var(--bpl-margin-bottom);
	border: var(--bpl-border);
	border-radius: var(--bpl-border-radius);
}
.backgroundplate.backgroundplateBlue {
	background: var(--bpl-background-blue);
}
.backgroundplate.backgroundplateGreen {
	background: var(--bpl-background-green);
}
.backgroundplate.backgroundplateRed {
	background: var(--bpl-background-red);
}
.backgroundplate.backgroundplateOrange {
	background: var(--bpl-background-orange);
}
.backgroundplateCaption {
	margin: var(--bpl-caption-margin);
	font-family: var(--bpl-caption-font-family);
	font-size: var(--bpl-caption-font-size);
	font-weight: var(--bpl-caption-font-weight);
	letter-spacing: var(--bpl-caption-font-letterspacing);
	color: var(--bpl-caption-font-color);
}
.backgroundplateContent {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	row-gap: var(--bpl-row-gap);
	width: 100%;
	font-family: var(--bpl-caption-font-family);
	font-size: var(--bpl-caption-font-size);
	color: var(--bpl-caption-font-color);

}
/* ======================= Daystart / Dayend ======================= */
.dayFieldContainer {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	height: var(--dayFieldContainer-height);
	width: var(--dayFieldContainer-width);
	font-family: var(--dayFieldContainer-caption-font-family);
	font-size: var(--dayFieldContainer-caption-font-size);
	background: var(--dayFieldContainer-bacground);
	color: var(--dayFieldContainer-caption-font-color);
	border: var(--dayFieldContainer-border);
	border-radius: var(--dayFieldContainer-border-radius);
	overflow: hidden;
}

.dayFieldWrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dayValueUpButton {
	height: var(--dayValueButton-size);
	width: calc(var(--dayValueButton-size)*1.75);
	/*background: var(--valueUpButton-background);*/
	border: var(--dayValueButton-border);
	border-radius: var(--dayValueButton-border-radius);
	font-size: var(--dayValueButton-font-size);
	text-align: center;
	line-height: var(--dayValueButton-size);
	backdrop-filter: blur(var(--dayValueButton-blur));
}

.dayInputField {
	max-height: var(--dayInput-max-height);
	line-height: var(--dayInput-font-size);
	width: calc(var(--dayValueButton-size)*1.75);
	font-size: var(--dayInput-font-size);
	text-align: center;
}

.dayValueDownButton {
	height: var(--dayValueButton-size);
	width: calc(var(--dayValueButton-size)*1.75);
	/*background: var(--valueDownButton-background);*/
	border: var(--dayValueButton-border);
	border-radius: var(--dayValueButton-border-radius);
	font-size: var(--dayValueButton-font-size);
	text-align: center;
	line-height: var(--dayValueButton-size);
	backdrop-filter: blur(var(--dayValueButton-blur));
}



/* ====================================================== */
/*
#submitBtn {
	background-color: #45a049;
	color: white;
	padding: 10px;
	text-align: center;
	cursor: pointer;
	border-radius: 4px;
	margin-top: 10px;
	width: 150px;
}

#submitBtn:hover { background-color: #4CAF50; }

.indexButton {
	background: rgba(120, 120, 150, 1);
	color: rgba(150, 150, 250, 1);
	padding: 10px 10px;
	margin-top: 25px;
	height: 45px;
	border: 2px solid rgba(200, 200, 200, 1.0);
	border-radius: 4px;
	text-align: center;
	font-family: Lato, Arial;
	font-size: 20px;
	font font-weight: bold;
	line-height: 20px;
}

.indexButton:hover {
	background: rgba(150, 150, 150, 1);
	color: rgba(250, 250, 250, 1);
	transition: background 500ms linear, color 500ms linear;
}

.saveButton {
	background: rgba(50, 150, 50, 0.5);
	color: rgba(150, 150, 250, 1);
	padding: 5px 10px;
	margin-top: 25px;
	border: 2px solid rgba(200, 200, 200, 1.0);
	border-radius: 4px;
	text-align: center;
	font-family: Lato, Arial;
	font-size: 18px;
	font font-weight: bold;
	line-height: 18px;
}

.saveButton:hover {
	background: rgba(50, 150, 50, 1);
	color: rgba(250, 250, 250, 1);
	transition: background 500ms linear, color 500ms linear;
}

.formCancelButton {
	background: rgba(150, 50, 50, 1.0);
	color: rgba(20, 20, 50, 1.0);
	padding: 6px 15px;
	border: 1px solid rgba(50, 50, 100, 1.0);
	border-radius: 4px;
	font-family: 'Lato', Arial;
	font-size: 14px;
	line-height: 14px;
	font-weight: 700;
}

.formCancelButton:hover {
	background: rgba(200, 100, 100, 1.0);
	color: rgba(50, 50, 80, 1.0);
	transition: background 500ms linear, color 500ms linear;
}

.formSaveButton {
	background: rgba(50, 150, 50, 1.0);
	color: rgba(20, 20, 50, 1.0);
	padding: 6px 15px;
	border: 1px solid rgba(50, 50, 100, 1.0);
	border-radius: 4px;
	font-family: 'Lato', Arial;
	font-size: 14px;
	line-height: 14px;
	font-weight: 700;
}

.formSaveButton:hover {
	background: rgba(100, 200, 100, 1.0);
	color: rgba(50, 50, 80, 1.0);
	transition: background 500ms linear, color 500ms linear;
}

.linkButtonBlue {
	background: rgba(150, 150, 250, 0.5);
	color: rgba(150, 150, 150, 1);
}

.linkButtonBlue:hover {
	background: rgba(150, 150, 250, 0.5);
	color: rgba(200, 200, 250, 1);
	transition: background 500ms linear, color 500ms linear;
}

.linkButtonRed {
	background: rgba(250, 150, 150, 0.5);
	color: rgba(150, 150, 150, 1);
}

.linkButtonRed:hover {
	background: rgba(250, 150, 150, 0.5);
	color: rgba(250, 200, 200, 1);
	transition: background 500ms linear, color 500ms linear;
}

.linkButtonGreen {
	background: rgba(150, 250, 150, 0.5);
	color: rgba(150, 150, 150, 1);
}

.linkButtonGreen:hover {
	background: rgba(150, 250, 150, 0.5);
	color: rgba(200, 250, 200, 1);
	transition: background 500ms linear, color 500ms linear;
}

.linkButtonYellow {
	background: rgba(250, 250, 150, 0.5);
	color: rgba(100, 100, 50, 1);
}

.linkButtonYellow:hover {
	background: rgba(250, 250, 150, 0.5);
	color: rgba(250, 250, 200, 1);
	transition: background 500ms linear, color 500ms linear;
}

.valueDownButton {
	width: 60px;
	height: 60px;
	background: rgba(180, 0, 0, 1.0);
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	line-height: 60px;
}

.valueUpButton {
	width: 60px;
	height: 60px;
	background: rgba(0, 180, 0, 1.0);
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	line-height: 60px;
}
*/
/* ====================================================== */

/*
.inputFieldContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-evenly;
	font-family: Lato, Arial;
	font-size: 14px;
}

.inputFieldContainerVertical {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	width: 100%;
	align-content: center;
	font-family: Lato, Arial;
	font-size: 14px;
}

.inputFieldConteinerCaption {
	font-family: Lato, Arial;
	font-size: 16px;
	font font-weight: bold;
	margin-bottom: 5px;
}



.linkButtonLineContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
*/
/* ====================================================== */
/* ======================= LOGGED-OFF-CONTENT ======================= */
#loggedOffContent {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	font-family: 'Lato', Arial;
}





.bigSiteName {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: inherit;
	width: 70vw;
	overflow: hidden;
}

.startTitle {
	font-size: 6.3vw;
	font-weight: 700;
	letter-spacing: 0.05vw;
	white-space: nowrap;
}



/*
.loginCaption {
	line-height: 2;
	font-size: 3.5rem;
	font-family: 'Lato', Arial;
	color: rgba(20, 20, 50, 1.0);
}

.formInput {
	line-height: 2.5;
	min-width: 250px;
}
*/
.linkButtonContainer {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	width: 100%;
	margin-bottom: 25px;
}
/*
.formCancelButton {
	background: rgba(150, 50, 50, 1.0);
	color: rgba(20, 20, 50, 1.0);
	padding: 6px 15px;
	border: 1px solid rgba(50, 50, 100, 1.0);
	border-radius: 4px;
	font-family: 'Lato', Arial;
	font-size: 14px;
	line-height: 14px;
	font-weight: 700;
}

.formCancelButton:hover {
	background: rgba(200, 100, 100, 1.0);
	color: rgba(50, 50, 80, 1.0);
	transition: background 500ms linear, color 500ms linear;
}

.formSaveButton {
	background: rgba(50, 150, 50, 1.0);
	color: rgba(20, 20, 50, 1.0);
	padding: 6px 15px;
	border: 1px solid rgba(50, 50, 100, 1.0);
	border-radius: 4px;
	font-family: 'Lato', Arial;
	font-size: 14px;
	line-height: 14px;
	font-weight: 700;
}

.formSaveButton:hover {
	background: rgba(100, 200, 100, 1.0);
	color: rgba(50, 50, 80, 1.0);
	transition: background 500ms linear, color 500ms linear;
}*/
/* ====================================================== */
/* ======================= EFFEKTE ======================= */
.no-data {
	color: rgba(200, 0, 0, 1.0);
	background: rgba(50, 0, 0, 1.0);
	animation: blink 2s ease-in-out infinite;
	font-family: 'Lato', Arial;
	text-align: center;
	font-weight:  bold;
	padding: 5px;
	border-top: 1px solid rgba(200, 220, 250, 0.1);
	border-bottom-radius:  4px;
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

/* Blink-Animation für Priorität 0 (Fehler) */
@keyframes priorityBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Alternative Animationen */
@keyframes priorityPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

@keyframes priorityGlow {
  0%, 100% { 
    box-shadow: 0 0 5px rgba(250, 0, 255, 0.3);
  }
  50% { 
    box-shadow: 0 0 15px rgba(250, 0, 255, 0.6);
  }
}
/* ====================================================== */
/* ###################################### MEDIAQUERIES ###################################### */
/* Smartphones (alles bis 640px) */
@media (max-width: 640px) {	

}
/* --------------------------------------------------------------------------------------------------------------------------------- */
/* Tablets (641px – 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {

}
/* --------------------------------------------------------------------------------------------------------------------------------- */
/* Standard-Desktops / kleine Laptops (1025px – 1280px) */
@media (min-width: 1025px) and (max-width: 1280px) {

}
/* --------------------------------------------------------------------------------------------------------------------------------- */
/* Große Desktops / Wide Screens (ab 1281px) */
@media (min-width: 1281px) {

}
/* --------------------------------------------------------------------------------------------------------------------------------- */
/* ######################################################################################### */