/** ROOT-Variablen für Navigation ******************************************/
/** bei Bedarf kann das hier schnell separat angepasst werden! **************/
:root{
	/*** Hamburger*/
	--hamb-bg-col:#000;
	--hamb-col:#fff;
	/*** das Bild für den HOME-Button... **************************/
	--img-home-button:transparent url(../pics/home.png);
	/*** BACK-Links (Buttons) *************************************/
	--back-to-top-bgimg:transparent url(../pics/arrow_top.png); /* der page-top-button */
	--ini-nav-desk-link-border-col:#000;
	/* desktop-Links... */
	--desk-link-font-family:var(--ini-font-family);
	--desk-link-col:#000;
	--desk-link-bg:#fff;
	--ini-nav-desk-link-border-col:#000;
	--desk-link-font-family:var(--ini-font-family);
	--desk-link-border-left:thin solid var(--ini-nav-desk-link-border-col);
	--desk-link-border-right:thin solid var(--ini-nav-desk-link-border-col);
	/* der Button zum Hinzufügen/entfernen von artikeln in die Artikelliste */
	--btn-artikel-font-family:BradleyHandITC;
	--btn-artikel-col:#000;
	--btn-artikel-bg:#fff;
	--btn-artikel-border:.15rem outset var(--ini-nav-desk-link-border-col);
	--btn-artikel-cursor:pointer;
	--btn-artikel-col_rein:blue;
	--btn-artikel-col_raus:red;
	--drop-down_hoover-bg:#f1f1f1;
}
/*********** hamburger-menü ******************/
.container_hamb1{
	display:block;
	margin-left:0.8rem;
	margin-bottom:-.2rem;
	padding:0;
}
nav.topmenu { 
	position: absolute; 
	/*********************************************************/
	color:var(--hamb-col);
	background:var(--hamb-bg-col);
	width:fit-content;
	width:auto;
	min-width:18rem;
	padding:0;
	height: auto; 
	max-height:0; 
	overflow:hidden;
	overflow:auto;
	border:none;
	text-align:left;
	font-size:0.8rem;
	line-height:1.1rem;
	cursor:var(--ini-cursor);
	z-index:9999;
}
ul.menue {color:var(--hamb-col);list-style:none;}
li.menue {margin:0;padding:0;}
li.menue_sub {margin-left:1.4rem;padding:0;}
li.menue_sub a{font-style:italic;}
a:link.menue, a:active.menue, a:visited.menue, nav.topmenu h6{
	color:var(--hamb-col);
	height:fit-content;
	width:auto;padding-top:0px;
	margin-left:1em;
	margin-top:0.1rem;
	margin-bottom:0.1rem;
	margin-right:1rem;
	text-decoration:none;
	display:inline-block;
	font-size:1rem;
	cursor:var(--ini-cursor);
}
a:hover.menue{opacity:0.5;}
nav.topmenu h6{
	border-bottom:thin solid var(--ini-bg);
	width:80%;
	margin-left:1rem;
}
hr.menue{
	background:var(--hamb-col);
	width:90%;
	height: 1px;
	border: none;
	margin:5px 10px;
	width:auto;
}
label.hamburg { 
	display: none;
	/*display: block;*/ /* bei Entwicklung */
	background:var(--hamb-bg-col);
	width: 3.125rem; 
	height: 2.7rem; 
	position: relative; 
	top:0;
	margin-left: 0.5%; 
	margin-right: auto;
	border:thin solid var(--ini-nav-desk-link-border-col);
	border-radius: 4px;
	cursor:var(--ini-cursor);
	overflow:auto;
	z-index:9999;
}
input#hamburg {display:none}
#hamburg:checked + .hamburg  + nav.topmenu {
	max-height:90vh;
	padding-right:10px;
	border:thin solid var(--ini-nav-desk-link-border-col);
}
.line { 
   position: absolute; 
   left:5px;
   background:var(--hamb-col); 
   height: 4px; 
   width: 38px; 
   border-radius: 2px;
   display: block; 
   /**/
   transition: 0.2s; 
   transform-origin: center; 
   /**/
}
.line:nth-child(1) { top: 6px;}
.line:nth-child(2) { top: 18px; }
.line:nth-child(3) { top: 30px; }
#hamburg:checked + .hamburg .line:nth-child(1){
   transform: translateY(12px) rotate(-45deg);
}
#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}
#hamburg:checked + .hamburg .line:nth-child(3){
   transform: translateY(-12px) rotate(45deg);
}
/*********** ende hamburger-menü ************/
/*** HOME-ICON ***/
.b_home_gross, .b_home_mittel, .b_home_klein{
	background:var(--img-home-button);
	background-repeat: no-repeat;
	background-size: contain;
	cursor:var(--ini-cursor);
	display:block;
	width:82px;
	height:70px;
	margin-left:0.5em;
	margin-top:0.8rem;
	border:none;
	z-index:99998;
}
.b_home_mittel{width:41px;height:35px;margin:0;}
.b_home_klein{width:27px;height:23px;margin:0;}
/*** buttons für lineares menü (DESK-LINKS) ***********/
a:link.mybuttons_klapp,
a:link.mybuttons_reverse,
a:link.mybuttons,
a:active.mybuttons,
a:visited.mybuttons {
	display: inline-block;
	font-family: var(--desk-link-font-family);
	font-size:0.8rem;
	font-weight:400;
	text-align:center;
	text-decoration: none;
	color:var(--desk-link-col);
	width:auto;
	background:var(--desk-link-bg);
	border-top:;
	border-left:var(--desk-link-border-left);
	border-bottom:;
	border-right:var(--desk-link-border-right);
	padding:0.2rem;
	margin:0 0.3rem 0.2rem 0;
	width:auto;
	white-space: nowrap;
	cursor:var(--ini-cursor);
}
a:link.mybuttons_reverse{
	color:;
	background:;
}
a:hover.mybuttons, .mybuttons_reverse, .mybuttons_klapp {
    opacity:0.7;
}
a:link.mybuttons_klapp{
	text-align:right;
	font-size:0.8rem;
}
/******************************************************************************
bei langen Inhalten blende ich einen "GoToTop"-Button mittels JQuery.js ein 
******************************************************************************/
.back-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width:50px;
	height:50px;
	background:var(--back-to-top-bgimg);
	background-repeat: no-repeat;
	background-size: contain;
	text-decoration:none;
	cursor:var(--ini-cursor);
	opacity:0.6;
	z-index: 100;
}
.back_link {
	position:fixed;
	right:.6rem;
	bottom:2.3rem;
	display:block;
	width:40px;
	height:40px;
	background:var(--back-to-top-bgimg);
	background-repeat: no-repeat;
	background-size: contain;
	text-decoration:none;
	cursor:var(--ini-cursor);
	opacity:0.6;
	z-index: 100;
}
artikel{
		grid-area:artikel;
		display:block;
		font-size:0.8rem;
		font-weight:0;
		align-self: end;
		width:1.8rem;
		width:auto;
		text-align:left;
}
anzahl{}
artikel anzahl{
	display:inline-block;
	color:red;
	font-weight:var(--ini-font-weight);
	margin:0 0.1rem;
}
nur_desk{
	display:block;
	width:100%;
	height:fit-content;
}
/******** Ende Warenkorb ****/
/* der Button zum Hinzufügen/entfernen von artikel in die Artikelliste */
.btn_hndl_artikel{
	font-family:var(--btn-artikel-font-family);
	font-size:1.2rem;
	font-weight:600;
	padding:.3rem;
	color:var(--btn-artikel-col);
	background:var(--btn-artikel-bg);
	border:var(--btn-artikel-border);
	border-radius:.5rem;
	cursor:var(--btn-artikel-cursor);
}
.btn_hndl_artikel:hover{
	opacity:0.7;
}
.btn_red{color:var(--btn-artikel-col_raus);}
.btn_blue{color:var(--btn-artikel-col_rein);}
.b_save_klein{
	background: url(../pics/save_klein.png) no-repeat center top 0rem/ cover, transparent;
	width:1.7rem;height:1.7rem;
	display:inline-block;
	border:none;
	margin:0;
	cursor:var(--ini-cursor);
}
.b_delete_klein{
	background: url(../pics/delete.gif) no-repeat center top 0rem/ cover, transparent;
	width:1rem;height:1rem;
	display:inline-block;
	border:none;
	margin:.2rem;
	cursor:var(--ini-cursor);
}
/* Grundlegende Formatierung */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Klick-Button stylen */
.dropdown-btn {
	display: inline-block;
	font-size:0.8rem;
	font-weight:400;
	text-align:center;
	text-decoration: none;
	color:var(--desk-link-col);
	background:var(--desk-link-bg);
	border-top:;
	border-left:var(--desk-link-border-left);
	border-bottom:;
	border-right:var(--desk-link-border-right);
	padding:0.2rem;
	margin:0 0.3rem 0.2rem 0;
	width:auto;
  cursor:var(--ini-cursor);
  list-style:none; /* Entfernt den Standard-Pfeil im Details-Tag */
}
/* Entfernt den Marker in Webkit-Browsern (Chrome, Safari) */
.dropdown-btn::-webkit-details-marker {
  display: none;
}
/* Das Dropdown-Menü absolut positionieren */
.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 0;
  margin: 5px 0 0 0;
  border-radius: 4px;
  list-style: none;
  z-index:1000;
}
.w_280{min-width:18rem;}
/* Menü-Links formatieren */
.dropdown-content li a {
	font-size:0.8rem;
	font-weight:400;
  color: black;
  padding: .5rem 1rem;
  display: block;
	white-space: nowrap;
  text-decoration: none;
}
.dropdown-content li a:hover {
  background-color:var(--drop-down_hoover-bg);
}