/* LAYOUT-CSS */
@charset "utf-8";
* {	
	box-sizing: 		border-box;	
	margin: 			0px; 
	padding: 			0px; 
	outline: 			0px; 
	border: 			0px; 
	text-transform: 	none;
	text-decoration: 	none;	
	background: 		none;	
	background-repeat: 	no-repeat;
	background-position: center;
	transition: background-color 300ms ease, color 300ms ease;
}		
*:focus:not(:focus-visible) {
	outline: none;
}
:root{	/* FALLBACK */

	/* Basis-Farben FALSCH DEFINIERT*/
	--main-color-1:				#F00;
	--main-color-2:				#F00;
	--main-color-3:				#F00;
	--main-color-4:				#F00;
	--main-color-5:				#F00;
	--main-color-6:				#F00;
	--main-color-7:				#F00;
	--main-color-8:				#F00;
	--line-color-main-0:		#F00;
	--line-color-main-1:		#F00;

	/* Basis-Farben NICHT DEFINIERT*/
	--main_color_1:				#F60;
	--main_color_2:				#F60;
	--main_color_3:				#F60;
	--main_color_4:				#F60;
	--main_color_5:				#F60;
	--main_color_6:				#F60;
	--main_color_7:				#F60;
	--main_color_8:				#F60;
	--line_color_main_0:		#F60;
	--line_color_main_1:		#F60;

	/* FALLBACK */
	--main_color_border: 		rgba(0,0,0,1);
	--main_border:				2px solid var(--main_color_border);	
	
	--shadow_color:				rgba(0,0,0,0.5);	
	--shadow_base: 				4px 4px 5px 0px var(--shadow_color);
	
	--button_ftcol: 	 		rgba(202,202,202,1);
	--button_bgcol: 	 		rgba(2,2,2,1);
	--button_bgcol_hover: 	 	rgba(82,82,82,1);
	--button_bgcol_focus: 	 	rgba(108,108,108,1);
	--button_bgcol_active: 	 	rgba(187,74,0,1);
	
	--stdbox_bgcol:				rgba(238, 238, 238, 0.9); 
	--stdbox_border:			5px solid black; 		
	--stdbox_shadow:			1px 1px 5px 0px #03f;
	--stdbox_h_color:			#CCC;
}

/* Scrollbars weg Iframe : Für Firefox, IE und Edge */
html::-webkit-scrollbar {	display: none;	}
html {
	scrollbar-width: none;     /* Firefox */
	-ms-overflow-style: none;  /* IE/Edge */
}

body, iframe{
	background-color: 	transparent;
	background: 		none;	
	border: 			0px;
	outline:			0;
}
body {
	text-align: center;
}
div{
	justify-content: 	center; 
	align-items: 		center; 
    -ms-overflow-style: none;  /* Scrollbar weg - Für Internet Explorer und Edge */
    scrollbar-width: none;     /* Scrollbar weg - Für Firefox */
}
div::-webkit-scrollbar {
    display: none;             /* Scrollbar weg - Für Google Chrome, Safari und Opera */
}

table{ 		
	border-collapse: 	collapse;
}
th, td, .th, .td {
	vertical-align: 	middle;	
	text-align: 		center;		
	padding: 			2px 5px;		
}
th, .th{
	color:				var(--th_ftcolor);
	background-color: 	var(--th_bgcolor);
}
td, .td {	
	color:				var(--td_ftcolor);
	background-color: 	var(--td_bgcolor);
}
a { 	
    text-decoration: 	none; 
	color: 				var(--a_color);	    
}
b{ 	font-weight: bold; }
hr{ 
	height: 			1px;	
	background-color: 	var(--hr_color);        
    border: 			none;
}
h1, h2, h3, .h1, .h2, .h3 {
	text-align: 		center;
	color:				var(--h_color);	
}

/* FORMULAR ELEMENTE */
form{	width: 100%; }
input, textarea, select {	
	min-height:			22px;	
	padding: 			2px 5px;  
	text-align: 		left;   
	width: 				100%;
	color: 				var(--ipt_ftcolor);
	background-color: 	var(--ipt_bgcolor);
	border: 			var(--ipt_border);
	border-radius: 		var(--ipt_bradius);    
}
/* Input type=number Pfeile ausblenden */
input[type=number] { 
    -moz-appearance: 	textfield;
    appearance: 		textfield;
    margin: 			0; 
	text-align: 		center;
}
input[type=date] {     
	text-align: 		center;
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 			0; 
}
input[type=checkbox]{	
	/*accent-color: var(--main_color_6); */
	height: 		20px;	
	width: 			20px;		
	transform: 		translateY(+2px); 	
}	
input:focus, textarea:focus, select:focus{
	cursor: 			text;	
	outline: 			var(--ipt_focus_outline);
	background-color: 	var(--ipt_focus_bgcol);
}
input:hover, textarea:hover, select:hover{	
	cursor: 			text;	
	outline: 			var(--ipt_hover_outline);
	background-color: 	var(--ipt_hover_bgcol);
}
select:hover{
	cursor: 			pointer;
}
input::placeholder, textarea::placeholder{
	color: 				var(--ipt_placeholder);
	font-weight: 		bold;
}
 fieldset{
	color:             	var(--font_color);
	border:         	var(--main_border);        
	border-radius:     	10px;		
} 
 legend {
	color:            	var(--font_color);
	border:             var(--main_border);    
	background-color:   var(--main_color_0);
	border-radius:      10px;
	padding:            2px 8px;
	margin-left: 		5px;
} 



/* Buttons & Icons */
button, .button {	
	margin: 				2px;
	padding: 				0px;	
	background-position:	10px;
	background-repeat: 		no-repeat;
	background-size: 		22px;
	padding: 				5px;	
	border-radius: 			var(--button_bradius);	
	border:					var(--button_border);
	outline: 				var(--button_outline);	
	box-shadow: 			var(--button_shadow);
	color:					var(--button_ftcol);
   	background-color: 		var(--button_bgcol);	
	cursor:					pointer;	
}
button:hover, .button:hover {	
	transform: 				scale(1.05);		
	background-color:		var(--button_bgcol_hover);
}
button:focus, .button:focus {	
	transform: 				scale(0.95);		
	background-color:		var(--button_bgcol_focus);
}
button:active, .button:active {
	background-color:		var(--button_bgcol_active);
}
.button_icontext{		/* button mit icon und text */
	padding-left: 		40px;	
	padding-right: 		10px;
}
.button_icon{			/* button nur mit icon */
	min-height: 			28px;
	width:					36px;	
	background-position: 	center; 
	background-size: 		60%;
}
.icon{
	margin: 			0px;					
	padding: 			0px;  
	line-height: 		20px;	
	height: 			20px;
	width: 				20px;
	vertical-align: 	middle
}

.centerX{
/* Allgemeine Formatierungen */
	position: 	absolute;
	left: 		50%;
	transform:	translateX(-50%);
}
.centerMe{
	position: 	absolute;
	left: 		50%; 
	top: 		50dvh; 
	transform: 	translate(-50%, -50%);
} 
.rahmen{        
	border: 				var(--main_border);	
}

/* TMessage */
.tmessage{
	display: 				inline-flex;
	background-color: 		var(--message_bgcol); 
	border: 				var(--message_border);
	outline: 				var(--message_outline);
	color: 					var(--message_ftcolor);
	border-radius: 			10px;
	padding:				5px 5px 5px 35px;	
	max-width: 				400px;
	min-height:				50px;
	margin: 				5px 20px;
	box-shadow: 			var(--message_shadow);
	background-position:	5px;
	background-repeat:		no-repeat;	
	background-size: 		24px;
	transition:				opacity 1s;		
	font-weight: 			bold;
	justify-content:		center;
	text-align: 			center;
	align-items: 			center;
	text-wrap: 				balance;
}
.tmessage_text{		color: 		var(--message_ftcolor);						}
.tmessage_icon{ 	height: 	18px;	width: 18px;		 				}
.tmessage_lev0{		
	background-image: 		var(--iconc_ok);			
	border-color: 			var(--message_color_0); 	/* 369d03 */
	outline-color:  		var(--message_colorO_0);	/* 225807 */	
}
.tmessage_lev1{		
	background-image: 		var(--iconc_wichtig);	
	border-color: 			var(--message_color_1); 	/* 3366FF */
	outline-color:  		var(--message_colorO_1);	/* 0634BE */	
}
.tmessage_lev2{		
	background-image: 		var(--iconc_delete);	
	border-color: 			var(--message_color_2); 	/* E60023 */
	outline-color:  		var(--message_colorO_2);	/* 8C0015 */		
}
.tmessage_lev3{		
	background-image: 		var(--iconc_minus);	
	border-color: 			var(--message_color_3); 	/* 970101 */
	outline-color:  		var(--message_colorO_3);	/* 630303 */		
}

/* Zeilen highlighting */
.row_highlight:hover{						
	border-radius: 	5px;					
	outline: 		var(--rowhl_border);
	box-shadow: 	inset 50px 50px var(--rowhl_shadow);
}
.row_highlight_aktiv{		
	border-radius: 	5px;					
	outline: 		var(--rowhl_border);
	box-shadow: 	inset 50px 50px var(--rowhl_shadow_aktiv);    		
}


/* Programmer  */
.div_progtools{
	color: 				black; 
	background-color: 	white; 
	width: 				max-content; 
	padding: 			5px;
	border: 			3px solid orange; 
	border-radius: 		10px; 	
}
.programmer_div_tools_btn{
	position: 			fixed;
	right: 				5px;
	bottom: 			5px;
	width:				40px;
	height: 			40px;
	border-radius:		50% 25% 15% 25%;	
	background-size: 	80%;	
	background-color: 	var(--button_bgcol);
	border:				var(--button_border);
	box-shadow: 		var(--button_shadow);
	cursor:				pointer;	
	font-weight: 		bold;
	font-size:			20px;
	align-items: 		center;
	display: 			flex;
}
.programmer_div_tools{	
	position: 			fixed;
	display: 			none;
	width:				450px;
	max-width: 			98%;
	height: 			450px;
	border-radius:		20px;		
	padding: 			10px;
	opacity:			95%;
	overflow: 			scroll;
	max-height: 		100dvh;	
	background-color: 	var(--stdbox_bgcol);	
	border: 			var(--stdbox_border);
	box-shadow: 		var(--stdbox_shadow);	
	z-index:			100;
}
body:has(.programmer_div_tools_btn:hover){	
	border: 			2px solid red;    
	box-shadow: 		inset 0 0 15px 2px rgba(255, 0, 0, 0.5); 
	padding: 			5px;
}

.table_tpr td{ 	
	text-align: left; background-color: #DDD; color: #000; 
}


/*   ####################  Tediframe TConfirm  ######################### */
/* TEdiframe */
.area_teditframe{	
	left: 				50%;
	transform: 			translateX(-50%);
	top: 				10%;	
	z-index: 			2;
	background: 		none;
	display: 			none;
	position: 			fixed;
	height: 			500px;
	width: 				500px;				
	border: 			0;
	border-radius: 		5px;						
}
.area_teditframe_back	{		
	z-index: 			1;
	display: 			none;
	position: 			fixed; 
	top: 				0;
	left:				0;
	width: 				100%;
	height: 			1800px;
	background-color:	black;		
	opacity:			0%;
	transition: 		opacity .75s; 			
}
/* Tconfirm */
.area_tconfirm_fade	{		
	display: 			none;
	position: 			fixed; 
	top: 				0;
	left:				0;
	width: 				100%;
	height: 			100dvh;
	background-color:	black;		
	opacity:			var(--tconfedit_fade_opacity);
	transition: 		opacity .75s;
	z-index:			1;
}			
.area_tconfirm{
	display: 			none;
	position: 			fixed; 
	left: 				50%; 
	transform:			translateX(-50%);
	top: 				100px;	
	width: 				40%; 
	min-width: 			400px;
	height: 			50dvh;
	min-height: 		500px;	
	line-height: 		18px;
	z-index: 			10;	
	opacity:			var(--tconfirm_opacity);
	background-color: 	var(--tconfirm_bgcol);				
	outline:			var(--tconfirm_outline);
	box-shadow: 		var(--tconfirm_shadow);				
	border:				var(--tconfirm_border);
	border-radius: 		var(--tconfirm_bradius); 				
	padding: 			60px 20px;
	overflow: 			scroll;
}				
.area_tconfirm_text{
	font: 				var(--f0);
	font-weight: 		bold;
	line-height: 		3rem;
	overflow: 			scroll; 
	height: 			100%;	
	display: 			flex;
	
}
.btn_tconfirm {
	width: 150px;	
}
.tconfirm_close, .tconfirm_btnctrl { 	
	width: 					40px; 
	height:					40px; 
	position: 				absolute; 
	top: 					0px;
	right: 					0px; 
	border-radius: 			10px; 
	background-size: 		80%;		
	background-color: 		var(--tconfirm_btnctrl_bgcol);
	border: 				var(--tconfirm_btnctrl_border); 
	cursor:					pointer;
}		
.tconfirm_close{
	background-image: 		var(--iconc_close);
}


@media(max-width: 500px){	/* Handy-Size */
	.area_tconfirm{
		top: 				20dvh; 
		width: 				80%; 
		height: 			70dvh; 
	}
	.btn_tconfirm {
		width: 150px;
		height:	50px;
	}		
} 
@media(width < 480px){
	.area_tconfirm{		width: 98%;  min-width: 98%;	}
	.btn_tconfirm {		width: 100%;		}
}


/* Editframe */
.area_editframe {			
	z-index: 			100;
	display: 			none;
	position: 			fixed;
	height: 			550px;
	width: 				450px;				
	left: 				50%; 
	transform:			translateX(-50%);
	top: 				10dvh; 		
	overflow: 			hidden;
	border: 			var(--teditframe_border);
	border-radius: 		var(--teditframe_bradius);			
	background-color: 	var(--teditframe_bgcol); 
	box-shadow: 		var(--teditframe_shadow);	
}	
.area_editframe_back	{		
	z-index: 			10;
	display: 			none;
	position: 			fixed; 
	top: 				0;
	left:				0;
	width: 				100%;
	height: 			100dvh;
	background-color:	black;		
	opacity:			var(--tconfedit_fade_opacity);
	transition: 		opacity .75s; 			
}
@media(width < 500px){
	.area_editframe {	width: 	98%;}	
}	
@media(height < 600px){
	.area_editframe {	
		top: 			0px;		
		height: 		100dvh;
	}	
}	

/* Select One (Radio-Buttons) fn get_select_one($pool, $name, $aktiv) */
.tbutton_selone_active {
	background-image: 		var(--iconc_on);	
	background-position: 	10px;
	background-size: 		20px;
	padding-left: 			35px;
}


/* NAV */
.nav__row {			
	width: 				100dvw;	
	justify-content: 	center;	
	text-align: 		center; 
	align-items: 		center;
	display: 			inline-flex;
	flex-wrap: 			nowrap;
}
.nav__button {	
	cursor: 			pointer;	
    margin: 			1px 3px;
	overflow: 			hidden;
	line-height:		16px;	
	padding: 			2px 5px;	
	word-break: 		break-word;			
	min-height: 		var(--btnnav_min_height);		
	background-color: 	var(--btnnav_bgcol);
	border: 			var(--btnnav_border);
	border-radius: 		var(--btnnav_bradius);			
	box-shadow: 		var(--btnnav_shadow);
	color: 				var(--btnnav_ftcolor);	
	font-weight: 		var(--btnnav_font_weight);		
	opacity:	 		var(--btnnav_opacity);
	margin: 			3px;
}
.nav__button:hover{	
	background-color:	var(--btnnav_bgcol_hover);
	transform: 			scale(1.1);		
}
.nav__button:focus{	
	background-color:	var(--btnnav_bgcol_focus);
	transform: 			scale(0.95);		
}
.nav__button:active, .nav__aktiv {
	background-color: 	var(--btnnav_bgcol_active); 	
	box-shadow:			var(--btnnav_shadow_aktiv);	
}
.nav__button_image{		/* (big) */
	border-radius: 			var(--btnnav_big_bradius);
	height: 				60px;	
	width:	 				60px;		
	background-size: 		80%;
	background-position: 	center;
}




/* Standart-Box */
.stdbox{
	width: 				max-content;
	max-width: 			98vw;
	margin: 			5px auto;
	background-color: 	var(--stdbox_bgcol); 
	border: 			var(--stdbox_border); 
	border-radius: 		20px; 
	box-shadow:  		var(--stdbox_shadow);
	color: 				var(--stdbox_color);
	overflow: 			hidden;	
	display: 			flex;
	flex-direction: 	row;
	flex-wrap: 			wrap;
	text-align: 		center; 	
	justify-content: 	center;
	align-items:		flex-start;
}
.stdbox_head {	
	display:			flex;	
	gap: 				10px;
	padding: 			5px 10px;
	text-align: 		center;
    text-transform: 	uppercase;			
	min-height: 		24px;	
	align-items:		center;
	justify-content:	center;
	place-content: 		center;	
	margin-bottom:		var(--stdbox_head_margbot);
	width: 				100%;
	border-bottom: 		var(--stdbox_head_bbottom);	
	background-color: 	var(--stdbox_head_bgcol);
	color: 				var(--stdbox_head_ftcol);	
	box-shadow:			var(--stdbox_head_shadow);
	font:				var(--f2);
	font-weight: 		bold;
	text-transform: 	uppercase;
}
.stdbox_headfont{
	text-transform: 	uppercase;
	font-weight: 		bold;
	font:				var(--f2);
	font-weight: 		bold;
}
.stdbox h1, .stdbox h2, .stdbox h3, .stdbox .h1, .stdbox .h2, .stdbox .h3{	
	color: 		var(--stdbox_h_color);
}
@media(max-width: 500px){
	.stdbox { width: 470px;  }
}
@media(width < 500px){
	.stdbox { width: 98%;  }
}




/* Programmer - Borders  - Zuletzt um alle anderen vorbelegungen zu überschreiben */
.bds{	border: 2px solid black;	}
.bdb{	border: 2px solid blue;		}
.bdr{	border: 2px solid red;		}
.bdy{	border: 2px solid yellow;	}
.bdg{	border: 2px solid green;	}
.bdo{	border: 2px solid orange;	}
.bdw{	border: 2px solid white;	}