/** ROOT-Variablen für Formulare ******************************************/
:root{
	--frm_gaeste-header-bg:#616161;
	--frm_gaeste-data-bg:#F7F7F7;
	--frm_gaeste-header-col:var(--ini-bg);
	--frm_dsgv-agb-col:#400000;
}

/* das Bestellformular für die Gäste */
form_bestell_gast{
	display: grid; 
	grid-template-columns:1fr 2fr;
	grid-template-rows:10.5rem auto;
	grid-template-rows:auto auto;
	grid-template-areas:
		"thumb daten"
		"tools tools";
		border:thin solid var(--ini-border-col);
		margin:.3rem;
		width:21rem;
}
/* clearfix */
form_bestell_gast:after {
	content: '';
	display: block;
	clear: both;
}
form_bestell_gast * {padding:.1rem;}
thumb{
		grid-area:thumb;
		border-right:thin solid var(--ini-border-col);
		border-bottom:thin solid var(--ini-border-col);
		padding:.2rem;
		overflow:hidden;
}
thumb img{
	width: 100%; 
  height:10rem; 
  object-fit: cover;
}
daten{grid-area:daten;border-bottom:thin solid var(--ini-border-col);}
tools_ohne{
	grid-area:tools;
	display:flex;
	color:var(--ini-col);
	font-weight:var(--ini-font-weight);
	flex-direction:row;
	justify-content:center;
	align-items:center;
	height:4.5rem;
}
tools{
	grid-area:tools;
	display: grid; 
	grid-template-columns:1fr;
	grid-template-areas:
		"t_info"
		"t_content";
}
tools_haendler{
	grid-area:tools;
	display: grid; 
	grid-template-columns:1fr;
	grid-template-areas:
		"t_info"
		"t_content";	
	height:fit-content;
}
t_info{
	grid-area:t_info;
	font-size:0.9rem;
	padding-left:2.5rem;
	height:2rem;
	background:url(../pics/icon_info_black.png) no-repeat center left 0.6rem/ 1.3rem, transparent;
}
t_info_haendler{
	grid-area:t_info;
	display:flex;
	align-items:flex-start;
	font-size:0.9rem;
	margin-top:.2rem;
	padding-left:2.5rem;
	height:auto;
	background:url(../pics/icon_info_black.png) no-repeat top left 0.6rem/ 1.3rem, transparent;
	min-height:1.6rem;
}
t_info_haendler_red{
	grid-area:t_info;
	display:flex;
	align-items:flex-start;
	font-size:0.9rem;
	margin-top:.2rem;
	padding-left:2.5rem;
	height:auto;
	background:url(../pics/icon_info_black.png) no-repeat top left 0.6rem/ 1.3rem, transparent;
	background-color:#FFE6E6;
	min-height:1.6rem;
}
info_box_red{
	grid-area:t_info;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	height:2rem;
	width:100%;
	border:thin solid red;
	background:url(../pics/icon_achtung_red.png) no-repeat center left 0.6rem/ 1.3rem, transparent;
	background-color:#FFE6E6;
	color:red;
	align-self:start;
}
t_content{
	grid-area:t_content;
}
t_content_haendler{
	grid-area:t_content;
	height:fit-content;
}
tools_none{grid-area:tools;display:none;}
art_nr{} art_bez{} art_preis, art_info{}
art_info{font-size:.9rem;color:var(--ini-col);}
art_nr, art_bez, art_preis, art_info{display:block;height:fit-content;}
art_nr, art_bez{font-weight:var(--ini-font-weight);}
art_nr{color:var(--ini-col);}
art_bez{color:var(--ini-artikel-bez-col);}
art_preis{margin:1rem .4rem;color:var(--ini-col);}
art_preis span{
	color:var(--cont-artikel-ca_info-preis-span-col);
	color:var(--ini-artikel-preis-span-col);
	font-weight:var(--cont-artikel-ca_info-preis-span-font-weight);
}
art_info span {
	color:var(--cont-artikel-ca_sizes-span-col);
}
art_info span.haendler_info{
	display:inline-block;width:100%;text-align:center;color:var(--ini-col);font-weight:var(--ini-font-weight);}
/************** farben in bestellform ******************************************/
colors_haendler{
	grid-template-rows:auto 1fr;
	grid-template-areas:
	"col_verfuegbar"
	"col_colors";
	margin:var(--cont-artikel-ca_colors-margin);
}
col_verfuegbar{
	grid-area:col_verfuegbar;
	font-size:var(--cont-artikel-ca_colors-verfuegbar-font-size);
	font-weight:var(--cont-artikel-ca_colors-verfuegbar-font-weight);
}
col_colors{
	grid-area:col_colors;
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	flex-wrap:wrap;
	margin-top:.5rem;
	padding:0;
}
col_colors img{
	display:block;
	width:1.5rem;height:1.5rem;
	margin:1px;
	padding:0;
	border:thin solid var(--ini-border-col);
}
/*******************************************************************************/
/* Erstellung der verfügbaren Grössen */
/* umgebender container ...*/
container_sizes{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
}
/* eingabe elemente */
/* auswahlfeld MIT Label */
cont_select {
	appearance: base-select;
	line-height: .9rem;
  width:fit-content;
}
cont_select label {
  font-weight:var(--ini-font-weight);
  color:var(--ini-col);
	padding:.3rem .3rem 0 0;
	margin-bottom:3px;
}
cont_select select {
	appearance: base-select;
	line-height: .9rem;
  padding:.1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color:var(--ini-bg);
  cursor:var(--ini-cursor);
}
select option {
		appearance: base-select;
		font-size:.9rem;
		line-height: .9rem;
  }
/* Optional: Fokus-Design für bessere Barrierefreiheit */
select:focus {
  border-color: #0066cc;
  outline: none;
	line-height: .9rem;
}
select.cont_select,
select.cont_select::picker(select) {
  appearance: base-select;
	line-height: .9rem;
}
select.custom-select,
select.custom-select::picker(select) {
  appearance: base-select;
	line-height: .9rem;
}

/* formular der adressdaten etc. für gäste */
form_widerruf{
	display: grid; 
	grid-template-columns:8.5rem auto;
	grid-template-areas:	
	"hdr_wider hdr_wider"
	"hinweis hinweis"
	"l_bestell_id bestell_id"
	"lbl_hinweis lbl_hinweis"
	"l_mail_w data_mail_w"
	"space_w space_w"
	"info_nachr info_nachr"
	"txt_nachr txt_nachr"
	"button_w button_w"
	;
	width:fit-content;
	max-width:32rem;
	margin:.5rem auto;
	background:var(--frm_gaeste-data-bg);
	border:thin solid var(--frm_gaeste-header-bg);		
}
form_widerruf * {
		display:flex;align-items:center;
		padding:.15rem .4rem .1rem .2rem;
		font-size:.9rem;
		max-width:26rem;
}
hinweis{
	grid-area:hinweis;
	display:block;
	border:thin solid red;
	font-size:.9rem;
	padding:.6rem;
	margin-bottom:.5rem;
	color:red;
	font-weight:var(--ini-font-weight);
	background:url(../pics/icon_achtung_red.png) no-repeat center right 0.6rem/ 1.3rem, transparent;
	background-color:#FFE6E6;
}
hinweis_blank{
	grid-area:hinweis;
	display:block;
	border:thin solid var(--ini-border-col);
	font-size:.9rem;
	padding:.6rem;
	margin-top:-.2rem;
	margin-bottom:.5rem;
	color:var(--ini-col);
	background:var(--ini-bg);
}
hinweis_blank span{
		color:red;
		display:inline-block;
		padding:0rem;
		font-weight:var(--ini-font-weight);
}
hinweis_blank h4{color:red;padding:0rem;}
hdr_wider{
		grid-area:hdr_wider;
		background:var(--frm_gaeste-header-bg);
		color:var(--frm_gaeste-header-col);
		margin-bottom:.2rem;
}
l_bestell_id{grid-area:l_bestell_id;}
bestell_id{grid-area:bestell_id;}
$meldung["txt"]
l_mail_w{grid-area:l_mail_w;}
data_mail_w{
		grid-area:data_mail_w;
		display:flex;
		flex-direction:column;
		justify-content:flex-start;
		align-items:flex-start;
		background:var(--frm_gaeste-data-bg);
}
space_w{
		grid-area:space_w;
		background:var(--frm_gaeste-data-bg);
		border-top:.1rem solid var(--ini-border-col-heller);margin-top:1rem;
}
space_w span{color:var(--ini-artikel-preis-span-col)}
info_nachr{grid-area:info_nachr;margin-top:.2rem;	font-weight:var(--ini-font-weight);}
txt_nachr{grid-area:txt_nachr;}
button_w{
	grid-area:button_w;background:var(--frm_gaeste-header-bg);
	margin-top:.5rem;padding-left:1.5rem;
}
l_bestell_id, l_vname, l_nname, l_mail_w{
	justify-content:flex-end;
}
lbl_hinweis{
	grid-area:lbl_hinweis;
	display:block;
	font-weight:bold;
	padding:0.2rem .8rem;
	border-top:.1rem solid var(--ini-border-col-heller);
	margin-top:1rem;
	margin-top:0.2rem;
	margin-bottom:0.5rem;
}
lbl_hinweis span{color:var(--ini-artikel-preis-span-col);display:inline-block;}
lbl_hinweis_none{
	grid-area:lbl_hinweis;
	display:block;
	height:.3rem;
}
.view_yellow{background:#FFFFDF;}
/***************************************************************************/
form_kontakt{
	display: grid; 
	grid-template-columns:8.5rem auto;
	grid-template-areas:	
	"hdr_pers hdr_pers"
	"l_vname data_vname"
	"l_name data_name"
	"l_mail data_mail"
	"l_tel data_tel"
	"space space"
	"info_txt info_txt"
	"txt_input txt_input"
	"info_spam info_spam"
	"tool_button tool_button"
	;
	width:fit-content;
	max-width:32rem;
	margin:.5rem auto;
	background:var(--frm_gaeste-data-bg);
	border:thin solid var(--frm_gaeste-header-bg);	
}
form_kontakt * {
		display:flex;align-items:center;
		padding:.15rem .4rem .1rem .2rem;
		font-size:.9rem;
		max-width:26rem;
}
txt_input{
	grid-area:txt_input;
}
info_txt{grid-area:info_txt;margin-top:.8rem;	font-weight:var(--ini-font-weight);}
.msgeingabe{
	width:100%;
	padding:0 auto;
	min-height:6rem;
}
textarea.msgeingabe_yellow{
	width:100%;
	padding:0 auto;
	field-sizing: content;
  resize: none; /* Verhindert das manuelle Verändern der Größe */
	background:#FFFFDF;
}
info_spam{
	grid-area:info_spam;
	display:block;
	width:100%;
}
info_spam span{color:var(--ini-artikel-preis-span-col);display:inline-block;}
space{grid-area:space;background:var(--frm_gaeste-data-bg);border-top:thin solid var(--ini-border-col-heller);}
space span{color:red;}
failed_nachricht{
		display:block;
		font-size:.9rem;
		border:thin solid red;
		padding:.3rem;
		width:15rem;
		background:#FFFFDF;
}
frm_gaeste_daten{
		display: grid; 
		grid-template-columns:8.5rem auto;
		grid-template-areas:
			"hdr_pers hdr_pers"
			"l_vname data_vname"
			"l_name data_name"
			"l_mail data_mail"
			"l_tel data_tel"
			"info info"
			"l_land data_land"
			"l_strasse data_strasse"
			"l_ort data_ort"
			"l_plz data_plz"
			"spacer check_agb"
			"spacer check_dsgv"
			"tool_button tool_button";
			width:fit-content;
			/*margin:.5rem auto;*/
			margin:.5rem;
			background:var(--frm_gaeste-data-bg);
			border:thin solid var(--frm_gaeste-header-bg);
}
frm_gaeste_daten * {display:flex;align-items:center;padding:.15rem .4rem .1rem .2rem;font-size:.9rem;}
hdr_pers{grid-area:hdr_pers;background:var(--frm_gaeste-header-bg);color:var(--frm_gaeste-header-col);margin-bottom:.2rem;}
l_name{grid-area:l_name;background:var(--frm_gaeste-data-bg);}
data_name{grid-area:data_name;background:var(--frm_gaeste-data-bg);}
l_vname{grid-area:l_vname;background:var(--frm_gaeste-data-bg);}
data_vname{grid-area:data_vname;background:var(--frm_gaeste-data-bg);}
l_mail{grid-area:l_mail;background:var(--frm_gaeste-data-bg);}
data_mail{
		grid-area:data_mail;
		display:flex;
		flex-direction:column;
		justify-content:flex-start;
		align-items:flex-start;
		background:var(--frm_gaeste-data-bg);
}
l_tel{grid-area:l_tel;background:var(--frm_gaeste-data-bg);}
data_tel{grid-area:data_tel;background:var(--frm_gaeste-data-bg);}
data_tel span{color:var(--ini-artikel-preis-span-col);margin-left:.3rem;}
info{grid-area:info;background:var(--frm_gaeste-header-bg);color:var(--frm_gaeste-header-col);}
l_land{grid-area:l_land;background:var(--frm_gaeste-data-bg);}
data_land{grid-area:data_land;background:var(--frm_gaeste-data-bg);}
l_strasse{grid-area:l_strasse;background:var(--frm_gaeste-data-bg);}
data_strasse{grid-area:data_strasse;background:var(--frm_gaeste-data-bg);}
l_ort{grid-area:l_ort;background:var(--frm_gaeste-data-bg);}
data_ort{grid-area:data_ort;background:var(--frm_gaeste-data-bg);}
l_plz{grid-area:l_plz;background:var(--frm_gaeste-data-bg);}
data_plz{grid-area:data_plz;background:var(--frm_gaeste-data-bg);}
info_liefer{grid-area:info_liefer;background:var(--frm_gaeste-header-bg);border:2px solid red;}
spacer{grid-area:spacer;background:var(--frm_gaeste-data-bg);}
check_agb{grid-area:check_agb;background:var(--frm_gaeste-data-bg);}
check_dsgv{grid-area:check_dsgv;background:var(--frm_gaeste-data-bg);}
tool_button{
	grid-area:tool_button;background:var(--frm_gaeste-header-bg);
	margin-top:.5rem;padding-left:1.5rem;
}
hdr_pers, info{height:2rem;padding-left:1rem;font-weight:var(--ini-font-weight);font-size:1rem;}
info{margin:.2rem 0;}
check_dsgv span{color:var(--ini-artikel-preis-span-col);display:inline-block;}
check_agb span{color:var(--ini-artikel-preis-span-col);display:inline-block;}
l_name,l_vname,l_mail,l_tel,
l_land,l_strasse,l_ort,l_plz{justify-content:flex-end;}
/* input-elemente */
input[type="text"], input[type="password"], input[type="number"] {
  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);
  font-size:1rem;
	height:1.5rem;
	width:15rem;
  color:var(--ini-col);
	font-size:.9rem;
  padding:var(--form-input-text-padding);
}
input.form_pers[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);
  font-size:1rem;
	height:1.5rem;
	width:15rem;
  color:var(--ini-col);
	font-size:.9rem;
  padding:var(--form-input-text-padding);
}
.haendler_disabled{background:#FFFFDF;}
spacer{justify-content:center;align-items:flex-end;}
spacer span{color:var(--ini-artikel-preis-span-col);}
input.inp_plz[type="text"]{width:5rem;}
input.inp_bestell_id[type="text"]{width:3.2rem;text-align:center;}
input.inp_str[type="text"]{width:20rem;}
input.inp_hndler_nr[type="text"]{width:5rem;}
failed_email{
		display:block;
		font-size:.9rem;
		border:thin solid red;
		padding:.3rem;
		width:15rem;
		background:#FFFFDF;
}
.empty_data{
	background:url(../pics/icon_achtung_red.png) no-repeat top .1rem right 0.6rem/ 1.3rem, transparent;
	background-color:#FFE6E6;
}
fehlende_adressdaten p{color:red;font-size:1rem;}
fehlende_adressdaten ul{margin-left:1.5rem;}
.lesen_agb_dsgv{
	width:auto;font-weight:bold;
	background:transparent;border:none;
	display:inline-block;font-size:0.9em;
	color:var(--frm_dsgv-agb-col);
}
.lesen_agb_dsgv:hover{cursor:pointer;}
input.form_check[type="checkbox"]{cursor:var(--ini-cursor);}
/* ein container zum Lesen von agb oder dsgv */
container_dokumente{
	position:relative;
	top:1;
	display:block;
	margin:0 .2rem;
	padding:.6rem;
	overflow:auto;
	border:thin solid #c9c9c9;
	max-height:calc(100vh -(9.35rem));
}
/* formular für das Händlerloggin */
form_login{
	display:grid;
	grid-template-columns:1fr;
	grid-template-areas:
	"login_error"
	"login_msg"
	"login_info"
	"lbl_nr"
	"input_nr"
	"lbl_pw"
	"input_pw"
	"tool_btn";
	font-size:.8rem;
	margin:.8rem auto;
	width:fit-content;
	background:var(--frm_gaeste-data-bg);
	border:thin solid var(--frm_gaeste-header-bg);
}
form_login * {font-weight:var(--ini-font-weight);justify-self:start;align-self:center;height:2rem;}
login_error{
	grid-area:login_error;
	display:flex;
	align-items:center;
	background:#ffe6e6;
	border:thin solid red;
	color:red;
	padding:.3rem;
	justify-content:center;
	height:fit-content;
	width:100%;
}
login_msg{grid-area:login_msg;}
login_info{
	grid-area:login_info;
	color:red;
	font-weight:var(--ini-font-weight);
}
lbl_nr{grid-area:lbl_nr;}
input_nr{grid-area:input_nr;}
lbl_pw{grid-area:lbl_pw;}
input_pw{grid-area:input_pw;}
tool_btn{grid-area:tool_btn;}
login_msg, login_info, tool_btn, lbl_nr, lbl_pw, input_nr, input_pw{
	display:flex;
	align-items:center;
	height:1.8rem;
	width:100%;
	margin:0 1.5rem;
}
lbl_nr, lbl_pw{height:fit-content;}
tool_btn{height:3rem;}
/* ein Grid für die Farben mit Radiobutton */
container_color_grid{
	display:flex;
	flex-direction:row;
	border-bottom:thin solid var(--ini-border-col);
}	
grid_color_card{
	display:grid;
	grid-template-areas:
	"color_card";
	width:2.5rem;
	height:2.5rem;
	margin:.1rem;
	padding:0rem;
	border:thin solid var(--ini-border-col);
}
col_img{
	grid-area:color_card;
	margin:0;
	padding:0;
	width:fit-content;
	height:fit-content;
}
col_img img{
	width:2.3rem;
	height:auto;
	margin:0;
  object-fit: cover;
}
col_radio{
	grid-area:color_card;
	width:auto;
	height:auto;
	margin-right:.1rem;
	margin-bottom:.1rem;
	align-self:end; 
	justify-self:end; 
}
fieldset.col_set {
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:flex-start;	
  flex-wrap: wrap;
  border:none;
}
/* speichern der Konfiguration */
.tool_save_konfig{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	font-size:0.9em;
	width:100%;
	margin:.5rem 0;
	padding-left:.5rem;
}
.tool_save_konfig span{
	color:red;font-weight:var(--ini-font-weight);display:inline-block;margin-left:.5rem;
}