/* globale variablen..., so brauch ich nicht immer suchen :-) */
:root{
	/* rot zeige ich zb. wichtigen text in spnas an */
	--ini-katalog-herv-txt-col:#FF0000; /* "red" -> klammer der Größßen, zB.: XL (3x) */
	/**** Artikelfarben, also immer, wenn dataills angezeigt werden ***/
	--ini-katalog-border-col:#000;
	--ini-artikel-nr-col:#000;
	--ini-artikel-bez-col:#5b5b5b;
	--ini-artikel-preis-col:#000;
	--ini-artikel-preis-span-col:var(--ini-katalog-herv-txt-col); 
	
	/* HOME-Seite..*/
	/* der Container dafür */
	/* einzelkachel_grid...*/
	--katalog-kachel-background:#e5e5e5;
	--katalog-kachel-border:thin solid #485462;

	/* Grid Text...*/
	--katalog-kachel-txt-bg:#C9C9C9;
	--katalog-kachel-txt-col:#4D4D4D;
	--katalog-kachel-border-col:darkgrey;
	/* hyperlinks */
	--katalog-kachel-a-col:none; /* die Kacheln der HOME Seite (haben ja eigentlich keine Farbe) */

	/* ENDE HOME-Seite..*/
	/* container für die 2 Seiten, die vor/rück "geblättert" werden können */
	--book-bg:#a9a9a9;
	--book_infotxt-col:#000;
	--book_infotxt-bg:#fff;
	--book_infotxt-span-col:var(--ini-katalog-herv-txt-col);
	--book-tool-arrow-left:url(../pics/arrow_left.png) no-repeat center / 3rem, transparent;
	--book-tool-arrow-right:url(../pics/arrow_right.png) no-repeat center / 3rem, transparent;
	/**** Ende container für 2 Seiten ***********************************/
	/* der "Zurück"-Pfeil auf den Anzeige der Artikel zu Katalogseite */
	--tool-goback_bg_pic:url(../pics/arrow_back_red.png) no-repeat left / 2.5rem, transparent;
	--book-empty-site-col:var(--ini-border-col-heller);
	--book-empty-site-col:#FFB76F;
	--book-empty-site-bg:#FFEFE8;
	/* artikelanzeige nach klick auf die entsprechende Seite */
	--cont-artikel-border-top:thin solid var(--ini-katalog-border-col);
	--cont-artikel-border-bottom:thin solid var(--ini-katalog-border-col);
	--cont-artikel-ca_info-nr-col:var(--ini-artikel-nr-col);
	--cont-artikel-ca_info-preis-span-col:var(--ini-artikel-preis-span-col);
	--cont-artikel-ca_sizes-span-col:var(--ini-katalog-herv-txt-col);
	--cont-artikel-ca_colors-border-top:thin var(--ini-katalog-border-col);
	--cont-artikel-ca_colors-border-bottom:thin solid var(--ini-katalog-border-col);

	/* kleine container zur darstellung einzelner artikel */
	/* bei "alles im Blick, oder "Warenkorb"              */
	--view-artikel-max-width:16.875rem;
	--view-artikel-max-width:20rem;
	--view-artikel-border-col:#808080; /*gray*/
}
/*********************************************************************/
/* Container für die Kollektionen auf der HOME-Seite...*/
kachelcontainer{
	display:flex;  
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-content:center;
	align-items:center;
	margin:1rem 0rem;
	gap:0.4rem;
	height:fit-content;
}
/* die kacheln als grid */
einzelkachel_grid{
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows:auto auto;
	grid-template-areas:
	"beschreibung"
	"pic_kachel";
	background:var(--katalog-kachel-background);
	border:var(--katalog-kachel-border);
	border:.5rem solid var(--katalog-kachel-background);
	margin:5px;
	text-align:center;
}
einzelkachel_grid_txt{
	grid-area:beschreibung;
	display:block;
	text-align:center;
	padding:.3rem;
	background:var(--katalog-kachel-txt-bg);
	color:var(--katalog-kachel-txt-col);
	font-size:1rem;
	width:100%;
	margin:0;
	border-top:thin solid var(--katalog-kachel-border-col);
	border-left:thin solid var(--katalog-kachel-border-col);
	border-right:thin solid var(--katalog-kachel-border-col);
	
}
cont_img{
	grid-area:pic_kachel;
	display:block;
	width:100%;
	height:auto;
	border-left:thin solid var(--katalog-kachel-border-col);
	border-right:thin solid var(--katalog-kachel-border-col);
	border-bottom:thin solid var(--katalog-kachel-border-col);
}

/* die Kacheln sollen unterschiedliche Ausrichtungen haben...(vorgabe von Lili :-) ) ***/
einzelkachel_grid:first-child{width:330px;margin-top:-20px;margin-left:0px;}
einzelkachel_grid:nth-child(2){width:258px;margin-top:-5px;margin-left:40px;}
einzelkachel_grid:nth-child(3){width:300px;margin-top:-5px;margin-left:5px;}
einzelkachel_grid:nth-child(4){width:380px;margin-top:-10px;margin-left:0px;}
einzelkachel_grid:nth-child(5){width:280px;margin-top:-10px;margin-left:20px;}
einzelkachel_grid:nth-child(6){width:310px;margin-top:-5px;margin-left:0px;}
einzelkachel_grid:nth-child(7){width:230px;margin-top:-30px;margin-left:50px;}
einzelkachel_grid:nth-child(8){width:280px;margin-top:90px;margin-left:20px;}
einzelkachel_grid:nth-child(9){width:340px;margin-top:10px;margin-left:100px;}
cont_img img{
	width:100%;
	height:fit-content;
	margin:0;
}
a.link_grid:link, a.link_grid:active, a.link_grid:visited{
	display:block;
	margin:0px;
	padding:0px;
	font-size:1.0em;
	text-decoration:1.0em;
	color:var(--katalog-kachel-a-col);
	font-weight:600;
	cursor:var(--ini-cursor);
	}
a.link_grid:hover{opacity:600;}
/*********************************************************************/	
/* der container für die 2 Seiten */
book_kollektion{
	display: grid; 
	grid-template-columns:1fr 1fr;
	grid-template-rows: minmax(6.25rem, auto); 
	grid-template-areas:
		"links rechts";
	background:var(--book_bg);
	border:none;
	width:85%;
	gap:1%;
	margin:0 auto;
}
/*linke seite */
book_left{
	grid-area:links;
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows: 1fr; 
	grid-template-areas:
		"bk_left";
}
a.left_img{
	grid-area:bk_left;
	text-decoration:none;
}
left_img_null{
	grid-area:bk_left;
}
left_info{
	grid-area:bk_left;
	display:grid;
	grid-template-columns:12% 88%;
	grid-template-areas:
	"inf_seite_left inf_anzahl_left";
	height:fit-content;
	align-self: end;
	width:100%;
	text-align:center;
	color:var(--book_infotxt-col);
	background:var(--book_infotxt-bg);
	padding:0.5rem;
	opacity:.8;
}
inf_seite_left{
	grid-area:inf_seite_left;
	text-align:left;
}
inf_anzahl_left{
	grid-area:inf_anzahl_left;	
	text-align:center;
}
a.left_tool{
	position:relative;
	left:-2rem;
	grid-area:bk_left;
	height:3rem;
	width:3rem;
	align-self: start;	
	justify-self:start;
	background:var(--book-tool-arrow-left);
	text-decoration:none;
	cursor:var(--ini-cursor);
	opacity:.5;
}
book_left img{
	width: 100%;
  max-width: 100%;
  height: auto;	
}
/*rechte seite */
book_right{
	grid-area:rechts;
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows: 1fr; 
	grid-template-areas:
		"bk_right";
}
book_right_leer{
	grid-area:rechts;
	display:flex;
	justify-content:center;
	align-items:center;
	font-family:BradleyHandITC;
	font-size:3rem;
	font-style:italic;
	font-weight:600;
	color:var(--book-empty-site-col);
	background:var(--book-empty-site-bg);
	width:100%;
	height:100%;
}
a.right_img{
	grid-area:bk_right;
	text-decoration:none;
}
right_img_null{
	grid-area:bk_right;
}
right_info{
	grid-area:bk_right;
	display:grid;
	grid-template-columns:88% 12%;
	grid-template-areas:
		"inf_anzahl_right inf_seite_right ";
	height:fit-content;
	align-self:end;
	width:100%;
	text-align:center;
	color:var(--book_infotxt-col);
	background:var(--book_infotxt-bg);
	padding:0.5rem;
	opacity:.8;
}
inf_seite_right{
	grid-area:inf_seite_right;
	text-align:right;
}
inf_anzahl_right{
	grid-area:inf_anzahl_right;	
	text-align:center;
}
a.right_tool{
	position:relative;
	right:-2rem;
	grid-area:bk_right;
	height:3rem;
	width:3rem;
	align-self: start;	
	justify-self:end;
	background:var(--book-tool-arrow-right);
	text-decoration:none;
	cursor:var(--ini-cursor);
	opacity:.5;
}
book_right img{
	width: 100%;
  max-width: 100%;
  height: auto;
}
left_info span{
	color:var(--book_infotxt-span-col);
	font-weight:600;
}
right_info span{
	color:var(--book_infotxt-span-col);
	font-weight:600;
}
/* ein Link, den man oben auf der seite (im content-> also "main" fixieren kann) */
/* wahlweise auch als "absolute" in jedem container positionieren*/
a.tool_go_back, button.tool_go_back_b{
	/*position:fixed;*/
	position:absolute;
	margin:1rem 0 0 -0.5rem;
	height:2.5rem;
	width:2.5rem;
	background:var(--tool-goback_bg_pic);
	text-decoration:2.5rem;
	cursor:var(--ini-cursor);
	opacity:.8;
}
div_go_back_dok{
	position:relative;
	top:0;
	border:none;
}
button.tool_go_back_dok{
	width:2.5rem;
	height:2.5rem; 
	border:none;
	background:url(../pics/arrow_left.png) no-repeat center / 2.5rem, transparent;
	opacity:.6;
	margin-bottom:.3rem;
}
button.tool_go_back_b{border:none;margin-top:-.5rem;margin-left:.2rem;}
/*** 	der umschliesst "tool_go_back", 
			so kann ich den seiteninhalt mit margin-bottom auf "Abstand" halten :-)
******************************************************************************/
div_go_back{
	position:absolute;
	display:block;
}
/* artikelanzeige nach klick auf die entsprechende Seite */
container_artikel{
	display:grid;
	grid-template-columns:1.5fr 2fr;
	grid-template-rows:1fr auto auto auto;
	grid-template-areas:
	"ca_pics ca_info"
	"ca_pics  ca_sizes"
	"ca_colors ca_colors"
	"ca_tools ca_tools";
	width:calc(100vw - (12rem));
	border-top:var(--cont-artikel-border-top);
	border-bottom:var(--cont-artikel-border-bottom);
	margin:0.3rem auto;
	padding:0;
	height:fit-content;
}
ca_pics{
	grid-area:ca_pics;
	display:flex;
	flex-direction:column;
	align-items:center;
	width:98%;
	gap:.2rem;
	padding:0.8rem;
	margin:.4rem 0 0 .4rem;
	max-height:80vh;
	overflow:auto;
	border:thin solid var(--ini-border-col-heller);
}
ca_pics img.only_one{
	width: auto; 
  height:90%; 
  object-fit: cover;/* Schneidet das Bild ggf. passend zu, ohne Verzerrung */
}
ca_pics img.more_pic{
	width: 90%; 
  height: auto; 
  object-fit: cover;/* Schneidet das Bild ggf. passend zu, ohne Verzerrung */
}
/* ein grid *********************************************************************/
ca_info{
	grid-area:ca_info;
	display:grid;
	grid-template-rows:2rem 2rem auto 2rem;
	grid-template-areas:
	"ca_info_nr"
	"ca_info_name"
	"ca_info_beschr"
	"ca_info_preis";
	font-family:BradleyHandITC;
	font-size:1.5rem;
	padding:0.5rem;
	height:fit-content;
}
ca_info_nr{
	grid-area:ca_info_nr;
	color:var(--cont-artikel-ca_info-nr-col);
	font-weight:600;
}
ca_info_name{
	grid-area:ca_info_name;
	color:var(--ini-artikel-bez-col);
	font-size:1.7rem;
	font-weight:600;
}
ca_info_beschr{
	grid-area:ca_info_beschr;
	/*word-break: break-all;*/
	margin:0.7rem;
}
ca_info_preis{
	grid-area:ca_info_preis;
	color:var(--ini-artikel-preis-col);
}
ca_info_preis span{
	color:var(--ini-artikel-preis-span-col);
	font-weight:600;
}
/*************************************************************************************/
ca_sizes{
	grid-area:ca_sizes;
	font-family:BradleyHandITC;
	font-size:1.3rem;
	font-weight:600;
	padding:0.5rem;
	height:fit-content;
	color:var(--ini-artikel-preis-col);
}
ca_sizes span{color:var(--cont-artikel-ca_sizes-span-col);}
ca_sizes_color{
	grid-area:ca_sizes;
	font-family:BradleyHandITC;
	font-size:1.3rem;
	font-weight:600;
	padding:0.5rem;
	height:fit-content;
	color:var(--cont-artikel-ca_sizes-span-col);
}
ca_colors_none{
	grid-area:ca_colors;
	display:none;	
}
ca_colors{
	grid-area:ca_colors;
	grid-template-rows:auto 1fr;
	grid-template-areas:
	"ca_col_verfuegbar"
	"ca_col_colors";
	margin:0.5rem 0;
	border-top:var(--cont-artikel-ca_colors-border-top);
	border-bottom:var(--cont-artikel-ca_colors-border-bottom);
}
ca_col_verfuegbar{
	grid-area:ca_col_verfuegbar;
	font-size:0.9rem;
	font-weight:600;
}
ca_col_colors{
	grid-area:ca_col_colors;
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	flex-wrap:wrap;
	margin-top:.5rem;
}
ca_col_colors img{
	display:block;
	width:3rem;height:3rem;
	margin:1px;
	border:1px solid var(--ini-border-col);
	border-radius:7px;
	object-fit: none;	
}
ca_tools{
	grid-area:ca_tools;
}
ca_tools_none{
	grid-area:ca_tools;
	display:none;
}
ca_sizes, ca_colors, ca_tools{
	padding:0.5rem;
}
/* ENDE artikelanzeige nach klick auf die entspr. Seite **/
/* container, der das positionieren "justify-content" erleichtert :-) */
container_artikel_show{
	display:flex;
	/*flex-direction:row;*/
	justify-content:start;
	justify-content:center;
	flex-wrap:wrap;
	gap:.4rem;
}
/* das ist eine MATRIX, man kann "Kindelemente", die bereiche auf display:none; setzen */
view_artikel_komplett{
	display:grid;
	grid-template-columns:3fr 2fr;
	grid-template-rows:1.2rem 17rem .9rem auto 3.5rem;
	grid-template-areas:
	"cak_art cak_art"
	"cak_thump cak_zus"
	"cak_preis cak_preis"
	"cak_sizes cak_sizes"
	"cak_btn cak_btn";
	border:thin solid var(--view-artikel-border-col);
	max-width:var(--view-artikel-max-width);
	align-items: start;
	gap:.5rem;
	padding:.5rem;
}

cak_zus{
	grid-area:cak_zus;
	display:grid;
	grid-template-areas:
	"cak_nr"
	"cak_bez"
	"cak_beschr";
	gap:.5rem;
}
.font_kleiner{font-size:.9rem;}
cak_art{
	grid-area:cak_art;
	display:flex;
	flex-direction:column;
	justify-content:center;
	background:gray;
	color:var(--ini-bg);
	font-weight:var(--ini-font-weight);
	padding:.2rem .4rem;
}
cak_nr{
	grid-area:cak_nr;
	font-weight:600;
	color:var(--cont-artikel-ca_info-nr-col);
	word-break: break-word;
}
cak_bez{
	grid-area:cak_bez;
	color:var(--ini-artikel-bez-col);
	font-weight:600;
	word-break: break-word;
}
cak_beschr{
	grid-area:cak_beschr;
	word-break: break-word;
}

cak_thump{
	grid-area:cak_thump;
	margin-top:.3rem;
	display:block;
}
cak_thump img{
	width: 100%;  
  height: auto;
	max-height:16.4rem;
  object-fit: cover; /* Schneidet das Bild ggf. passend zu, ohne Verzerrung */
}
cak_info{
	grid-area:cak_info;
	display:block;
}
cak_preis{
	grid-area:cak_preis;
	height:fit-content;
}
cak_preis span{
	color:var(--cont-artikel-ca_info-preis-span-col);
	font-weight:600;
}
cak_sizes{
	grid-area:cak_sizes;
	display:block;
}
cak_sizes span{color:var(--cont-artikel-ca_sizes-span-col);}
/* es soll rote und schwarze farben geben für cak_sizes*/
.farbe_verkauft{color:red;font-weight:var(--ini-font-weight);font-size:1.1rem;margin-top:.5rem;}
.farbe_schwarz{color:#000;}
.bg_verkauft{background:#ffe6e6;}
/*view_artikel_redused cak_sizes{display:none;}*/
cak_btn{
	grid-area:cak_btn;
	align-self:end;
	height:fit-content;
}

/*  eine kleinere Variante der Buttons */
.btn_angepasst{
		font-size:.9rem;
		font-family:unset;
		width:100%;
		display:block;
}