/** ROOT-Variablen für Standardelemente ************************************/
:root{
/*---------------------------------------------------------------------------------*/	
/* alle verwendeten farben */	
	--standard-col:#000;
	--standard-bg:#fff;
	--standard-sonderh1-col:#a9a9a9;
	--standard-sonderh1-border-col:#d3d3d3;
	--standard-info-col:red;
	--standard-info-bg:#FFE6E6;
	--standard-button-allg-bg:#E4E4E4;
	--standard-dezent-col:#ccc;
	--standard-tbl-hdr-bg:#808080;
	--standard-tbl-altern-dunkel-bg:#EFEFEF;

	/* granular verteilt, damit Teile bei Bedarf separate Farben bekommen können */
	--h-color:var(--standard-col);
	--ueberschrift-background:var(--standard-bg);
	--ueberschrift-color:var(--standard-sonderh1-col);
	--ueberschrift-info-col:var(--standard-info-col);
	--ueberschrift-info-bg:var(--standard-info-bg);
	--ueberschrift-info-border-col:var(--standard-info-col);
	--ueberschrift-border-col:var(--standard-sonderh1-border-col);
	--p-color:var(--standard-col);
	/* <hr> */
	--h-bg-color:var(--standard-sonderh1-border-col);
	--button-allgemein-col:var(--standard-col);
	--button-allgemein-bg:var(--standard-button-allg-bg);
	--button-allgemein-border:thin outset var(--standard-col);
	--button-allgemein-hoover-background:var(--standard-button-allg-bg);
	--button-allgemein-hoover-col:var(--standard-col);
	--form-input-text-border: thin solid var(--standard-dezent-col) ;
	--form-input-text-color:var(--standard-col);
	/* Tabellen LIKE! Datendarstellung in Tabelle */
	--table-border:thin solid var(--standard-col);
	--table--bg:var(--standard-bg);
	--th-bg-col:var(--standard-tbl-hdr-bg);
	--th-col:var(--standard-bg);
	/* dunklere alternierede zeilen in tabellen... */
	--bg-col-nth-child-odd:var(--standard-tbl-altern-dunkel-bg);
	--col-nth-child-odd:var(--standard-col);
	/* hellere alternierende zeile... */
	--bg-col-nth-child-even:var(--standard-bg);
	--col-nth-child-even:var(--standard-col);

/*---------------------------------------------------------------------------------*/		
	/*** die überschriften... *************************************/
	--h-font-family:var(--ini-font-family);
	--h-font-style:normal;
	--h1-size:1.3rem;
	--h2-size:1.2rem;
	--h3-size:1.1rem;
	--h4-size:1rem;
	--h5-size:0.9rem;
	--h6-size:0.8rem;
	/*** ein Überschriftenbalken (h1)... ***************************/	
	--ueberschrift-width:100%;
	--ueberschrift-font-style:normal;
	--ueberschrift-font-size:1.2rem;
	--ueberschrift-padding:0.3rem;
	--ueberschrift-border-radius:;
	--ueberschrift-margin:-0.4rem 0rem .3rem 0;	
	/* <p>-elemente */
	--p-font-family:var(--ini-font-family);
	--p-font-size:var(--ini-font-size);
	--p-font-weigt:normal; 
	--p-margin:5px;
	/* für die msgbox */
	--msgbox-font-size:var(--ini-font-size);
	/* ein button für allgemeinen gebrauch */
	--button-allgemein-width:auto;
	--button-allgemein-font-size:0.9em;
	--button-allgemein-border-radius:5px;
	--button-allgemein-margin:0.4rem 0rem;
	--button-allgemein-padding:0.3rem 1.5rem;
	--button-allgemein-cursor:var(--ini-cursor);
	--button-allgemein-hoover-opacity:0.45;
	/* eingabe feld für text in formularen */
	--form-input-text-border-radius:2px;	/* Abgerundete Ecken */
	--form-input-text-width:200px;	/* Standardlänge */
	--form-input-text-short-width:50px; /* zB. PLZ */
	--form-input-text-font-size:0.9rem;
	--form-input-text-padding:0rem 0.25rem;
/* Tabellen LIKE! Datendarstellung in Tabelle */
	--table-font-size:1rem;
}
h1,h2,h3,h4,h5,h6 {
	font-family:var(--h-font-family);
	font-style:var(--h-font-style);
	color:var(--h-color);
	overflow-wrap: break-word;
}
/* überschriften-> grössen...*/
h1{font-size:var(--h1-size);}
h2{font-size:var(--h2-size);}
h3{font-size:var(--h3-size);}
h4{font-size:var(--h4-size);}
h5{font-size:var(--h5-size);}
h6{font-size:var(--h6-size);}
/* auf den Seiten kann man so einen schönen Überschriftbalken darstellen */
ueberschrift_hinweis{}
ueberschrift, ueberschrift_hinweis{
	position:relative;
	top:-8;
	display:block;
	width:var(--ueberschrift-width);
	font-style:var(--ueberschrift-font-style);
	font-size:var(--ueberschrift-font-size);
	background:var(--ueberschrift-background);
	color:var(--ueberschrift-color);
	padding:var(--ueberschrift-padding);
	border-bottom:thin solid var(--ueberschrift-border-col);
	border-radius:var(--ueberschrift-border-radius);
}
ueberschrift_hinweis{
	color:var(--ueberschrift-info-col);
	background:var(--ueberschrift-info-bg);
	border-top:thin solid var(--ueberschrift-info-border-col);
	border-bottom:thin solid var(--ueberschrift-info-border-col);
}
.ueberschr_center{text-align:center;}
p{
	font-family:var(--p-font-family);
	font-size:var(--p-font-size);
	font-weight:var(--p-font-weigt);
	color:var(--p-color);
	margin:var(--p-margin);	
}
hr{
	border:none;
	background:transparent;
	border-bottom:thin solid var(--h-bg-color);
	margin:0.7rem 0rem;
	width:100%;
}
/* ab hier verschiedene eigene styles */
/* ich beginne mit einem Grid für eine meldungsfenster*/
msgbox{
	display:grid;
	grid-template-columns:1fr;
	grid-template-areas:
		"msg_header"
		"msg_content"
		"msg_btn";
		margin:2rem auto;
		border:2px outset var(--ini-border-col);
		width:fit-content;
		font-size:var(--msgbox-font-size);
}
msg_header{
	grid-area:msg_header;
	font-size:var(--msgbox-font-size);
	font-weight:var(--ini-font-weight);
	border-bottom:thin solid var(--ini-border-col);
	padding:.3rem;
}
.msg_hdr_rot{
	background:red;
	color:yellow;
}
msg_content{
	grid-area:msg_content;
	font-size:var(--msgbox-font-size);
	padding:.8rem;
}
msg_btn{
	grid-area:msg_btn;
	font-size:var(--msgbox-font-size);
	padding:0 0.8rem;
	border-top:thin solid var(--ini-border-col);
}
/* NICHT IN GEBRAUCH */
error_div{
	display:block;
	position:absolute;
	top:0;left:0;
	background:var(--ini-col);
	color:#fff;
	width:800px;
	min-height:500px;
	z-index:100;
}
/* ein button für allgemeinen gebrauch */
button.simpel{}
button.allgemein, button.simpel{
	display:inline-block;
	font-weight:600;
	font-size:var(--msgbox-font-size);
	font-size:0.9rem;
	color:var(--button-allgemein-col);
	background:var(--button-allgemein-bg);
	width:var(--button-allgemein-width);
	border:var(--button-allgemein-border);
	border-radius:var(--button-allgemein-border-radius);
	margin:var(--button-allgemein-margin); 
	padding:var(--button-allgemein-padding);
	cursor:var(--button-allgemein-cursor);
}
button.allgemein:hover{
	color:var(--button-allgemein-hoover-col);
	opacity:var(--button-allgemein-hoover-opacity);
	background:var(--button-allgemein-hoover-background);
}
button.msgbox:hover{opacity:0.8;}
button.simpel{background:transparent;}
button.simpel:hover{background:var(--button-allgemein-bg);}
.span_rot{display:inline-block;color:red;}
.bold_{font-weight:var(--ini-font-weight);}
/* generelle elemente, wie eingabefelder etc. */
input[type="text"]{
  box-sizing: border-box;  /* Verhindert, dass Padding die Breite vergrößert */
  border:var(--form-input-text-border);
  border-radius:var(--form-input-text-border-radius);
  width:var(--form-input-text-width);
  font-size:var(--form-input-text-font-size);
  color:var(--form-input-text-color);
  padding:var(--form-input-text-padding);
}
input.suche_art[type="text"]{
  box-sizing: border-box;  /* Verhindert, dass Padding die Breite vergrößert */
  border:var(--form-input-text-border);
  border-radius:var(--form-input-text-border-radius);
  width:var(--form-input-text-width);
  font-size:1rem;
	height:1.5rem;
  color:var(--ini-col);
  padding:var(--form-input-text-padding);
}
/*** Artikelsuche formular ********************************************/
/* NICHT IN GEBRAUCH */
.suche_lupe{
	display:block;
	width:3rem;
	height:3rem;
	border:2px outset gray;
	background:url(../pics/lupe.png) no-repeat center / 2.4rem #E0E0E0;
	cursor: pointer;
}
.suche_lupe:hover{opacity:.6;}
form_suche{
	display:grid;
	grid-template-columns:1fr;
	grid-template-areas:
	"such_hdr"
	"such_input";
	width:fit-content;
	background:#F4F4F4;
	border:.1rem outset var(--ini-border-col);
	margin:0 auto;
}
form_suche h3{padding:.3rem;font-size:1rem;text-align:center;border-bottom:thin solid var(--ini-border-col);}
form.artikelsuche{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	border:none;
	gap:0.5rem;
}
such_hdr{
	grid-area:such_hdr;
	padding:.4rem;
	height:fit-content;
	border-bottom:thin solid var(--ini-border-col);
}
such_hdr p{
	color:blue;
	margin:0.3rem 0;
	font-weight:var(--ini-font-weight);
	font-size:1rem;
}
such_hdr span{color:#804040;font-weight:var(--ini-font-weight);}
such_input{
	grid-area:such_input;
	padding:.4rem;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	background:#C8C8C8;
	height:fit-content;
}
.inp_txt{font-size:1rem;color:var(--ini-col);height:1.2rem;
}
/**********************************************************************/
/*für kurze eingaben...hier PLZ */
input[type="text"].w_short{width:var(--form-input-text-short-width);}
/**********************************************************************/
table_data_einfach{}
table-data, table_data_einfach{
	display:table;
	border-collapse:collapse;
	border:var(--table-border);
	width:fit-content;
	font-size:var(--table-font-size);
	background:var(--table--bg);
}
table_data_einfach{
	width:96%;
	margin:0 auto;
	font-size:0.9rem;
}
table_data_einfach td-data, th-data{
	text-align:center;
	vertical-align: middle;
	padding:0 .3rem;
}
tr-data{ 
	display:table-row;
}
th-data{
	display:table-cell;
	background:var(--th-bg-col);
	color:var(--th-col);
	font-weight:var(--th-font-weight);
	padding:var(--cell-padding);
	vertical-align:var(--th-vertical-align);
	border:var(--table-border);
}
td-data-img{
	text-align:center;
	vertical-align: middle;	
}
td-data, td-data-img{
	display:table-cell;
	padding:var(--cell-padding);
	vertical-align:var(--td-vertical-align);
	border:var(--table-border);
}
/*listung der bereits bestellten artikel in bestellform der händler */
/*da wird ggf. die farbe als bild dargestellt*/
td-data-img img{
	width:1.3rem; 
  height:auto; 
  object-fit: cover;
}
.listung_artikel * {padding:.2rem .4rem;}
.txt_data_center{text-align:center;}
.txt_data_right{text-align:right;}
container_artikel_desk{display:block;}
container_artikel_mob{display:none;}
listung_mobile{}
listung_adressdaten{}
listung_bestellung,
listung_mobile,
listung_adressdaten{
	display:grid;
	grid-template-columns:1fr;
	grid-template-areas:
	"headline"
	"data_cont"
	"footer_info"
	"zusatz_info";
	width:fit-content;
}
listung_mobile table-data{
	width:100%;
}
.th_data_bezeichnung{border-right:none;}
.th_data_bezeichnung_left{border-left:none;min-width:7rem;}
headline{grid-area:headline;padding:.2rem .4rem;}
data_cont{grid-area:data_cont;}
footer_info{
	grid-area:footer_info;
}
zusatz_info{
	grid-area:zusatz_info;
	font-weight:var(--ini-font-weight);
	font-size:.8rem;
	color:red;
	padding:.2rem .4rem;
}
.summe_anzeige{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	padding:.2rem .4rem;
	border-top:thin solid var(--ini-border-col);
	border-left:.14rem solid var(--ini-border-col);
	border-right:.14rem solid var(--ini-border-col);
	border-bottom:.14rem solid var(--ini-border-col);
}
.info-header{
	background:#616161;color:var(--ini-bg);
	border:thin solid var(--ini-border-col);
}
listung_adressdaten{margin-top:.5rem;}
listung_adressdaten * {padding:.2rem .4rem;}
/* alternierende zeilen */
tr-data:nth-child(odd){
	background:var(--bg-col-nth-child-odd);
	color:var(--col-nth-child-odd);
}
tr-data:nth-child(even){
	background-color:var(--bg-col-nth-child-even);
	color:var(--col-nth-child-even);
}
listung_adressdaten, listung_mobile tr-data:nth-child(odd){
	background:none;
	color:var(--ini-col);
}
listung_adressdaten. listung_mobile tr-data:nth-child(even){
	background-color:none;
	color:var(--ini-col);
}