#informationswrapperhead{
	background-color:#f0ba20;
	text-align:center;
}

#informationenheadtitle{
	padding: 20px 0px 10px;
	font-size:2.1em;
	color:#870000;	
}

#informationenheadinhalt{
	padding: 0px 30px 20px 30px;
	color:black;	
	font-size:1.3em;
}


#overnav{
	height:112px;
	background-color:#f5f5f5;
	display:flex;
	align-items:center;
}

#overnavdiv{
	display:flex;
	align-items:center;
}

#logo{
	font-size:2em;
	font-weight:200;
	color:white;	
	align-items:center;
	z-index:2;	
	margin:auto;	
}

#logoimg{	
	cursor:pointer;
	object-fit:contain;	
	width:auto;
	height:110px;
}

#headsearchform{	
	position:relative;
	right:0;	
	text-align:center;	
	width:100%;
	margin:0;
	display:none;
	
}

#headsearch{
	background-color:white;
	color:#615f5f;	
	box-shadow:0px 0px 10px 0px lightgray;
	border-radius:5px;	
	font-size:1em;
	height:60px;
	display: grid;
	grid-template-columns: 60px auto 60px;
	grid-template-rows: 100%;
	gap: 0px 0px;
	position:relative;
	top:0px;
	margin: auto;
	width:500px;
}

#headsearchbutton{
	 all:unset;
	 cursor:pointer;
	 border-radius: 5px 0px 0px 5px;	 
}

#headsearchbuttondiv{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
}

#headsearchsvg{
	width:60%;
	height:60%;	
	background:url('../svg/lupe.svg');
	background-size:100%;
	cursor:pointer;
}

#headsuchleiste{
	font-size:1.8em;
	margin:4px 0px 0px 0px;
	color:#615f5f;
	border-radius:5px;
	width:100%;	
	padding:0;
}

#headsearchresetdiv{
	 border-radius: 0px 5px 5px 0px;
	 display:flex;
	align-items:center;
	justify-content:center;
}

#headsearchresetsvg{
	width:40%;
	height:40%;
	cursor:pointer;
	background: url("../svg/kreuz.svg");
	background-size:100%;
}

#overnav ol{
	display:none;
}

#overnav ol li{	
	list-style-type:none;
	float:left;
	margin-left:0.3em;
	margin-top:0.2em;
	font-size:1em;
	color:#615f5f;	
}

#headnav{
	overflow:hidden;
	position:relative;
	width:100%;
	top:0;
	left:0;	
	background-color:#870000; 
	height:70px;
	position:sticky;
	z-index:199;
}

#navdiv, #overnavdiv{
	height:inherit;
	width:100%;
	margin:auto;
	position:relative;
}

#smalllogo{
		display:none;
}

#smalllogoimg{
	height:inherit;
	width:60px;
	display:none;
	cursor:pointer;
	margin-top: 3px;
}

#headnav ul{
	float:left;
	padding:0;
	margin:0;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}

#headnav ul a{
	height:100%;
}

#headnav ul li{	
	list-style-type:none;
	float:left;
	font-size:1.6em;
	background: -webkit-linear-gradient(90deg, #f0ba20 20%, #efd487);
    -webkit-background-clip: text;
	cursor: pointer;
	height:100%;	
	display:flex;
	align-items:center;
	padding: 0px 6px 0px 6px;
	position:relative;
}

#headnav ul li:not(.aktiv):not(#navsaperatorli){
	background: #f5f5f5;
    -webkit-background-clip: text;
	color: #f5f5f5;
}

#navsaperatorli:not(.aktiv){
	cursor:unset;
	padding: 0px 10px;
}

#navsaperator{
	width:6px;
	height:100%;
	background-color:#f5f5f5;
}

.navshowbar{
	position:absolute;
	width:100%;
	height:7px;
	bottom:0px;
	left:0px;
}

.aktiv{
	color:#f0ba20;
}

.aktiv .navshowbar{	
	background:linear-gradient(to top, #f0ba20 20%, #efd487);	
}

#wunschzettelitemsmalldiv.A{
	display:flex;
}

#wunschzettelitemsmall{
	height:50px;
	width:50px;
	background:url("../svg/Watchlist.svg");
	background-size:100%;
	cursor:pointer;
}

#wunschzettelitemsmalldiv{	
	display:none;
	align-items:center;
	cursor:pointer;
	border-radius:10px;			
	height:50px;
	width:50px;
}

#loginitemdiv.A #logindiv, #wunschzettelitemdiv.A #watchlistdiv{
	height:auto;
	width:100%;	
	background-color:#e6e6e6;		
	position:fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);			
	border-radius:30px;	
	padding:15px;
	padding-bottom:25px;
}

#loginitem, #logintitle, #wunschzettelitemdiv, #wunschzettelitemdiv.A, #wunschzettelitem{
		display:none;		
	}

#loginitemdiv, #wunschzettelitemdiv{	
	all:unset;
	display:none;	
	background:none;
	z-index:200;		
	position:fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width:80%;
	height:800px;
}

#invisibleloginbackground, #invisiblewatchlistbackground{
		display:block;	
		width:100%;	
		height:100%;
		position:absolute;	
		z-index:1;
		left:-20%;
		top:-200%;					
	}

#invisiblechecker{
	display:block;	
	width:100%;	
	height:0%;
	position:absolute;
	right:-5px;
	top:2px;	
	z-index:2;
}

 #invisiblecheckerwatchlist{
	display:block;	
	width:100%;	
	height:100%;
	position:absolute;
	right:150px;
	top:10px;	
	z-index:2;
 }
 
#invisibleloginitemdiv{
	height:35px;
	width:150px;
	position:absolute;
	right:5px;
	top:0;
	border-radius:5px;
}

#logindiv{	
	width:100%;	
	height:100%;
	background-color:#e6e6e6;		
	position:fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);			
	border-radius:30px;	
	padding:15px;	
}

#watchlistdiv{
	height:310px;
	width:100%;	
	height:100%;
	background-color:#e6e6e6;		
	position:fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);			
	border-radius:30px;	
	padding:15px;
}

#invisibledivlogin{
	width: 100%;
    height: 100%;
    color: red;
    position: absolute;
    left: 0%;
    top: 0px;
    z-index: -10;
    border-radius: 30px;
}

#dreieck{
	display:none;
}

#loginform.A{
	display:none;
}	

#loginform{	
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap: 10px;
	color:#615f5f;	
}

#loginformheadline{
		width:100%;
		font-size:4.5em;
		text-align:center;
		margin:0;
		margin-bottom:30px;
		margin-top:0px;
		padding:0;
		color:#870000;
		font-style:italic;		
}

#loginmessage{
	color:#d90026;
	margin-top:20px;
	display:none;
	width:100%;
	text-align:center;
	font-size:1.8em;
}

.loginforminputdescriptionwrapper{	
	width:100%;
	position:relative;
	margin-top:0px;
	font-size:2em;
	margin-left:5%;
	margin-bottom:20px;
}

.loginforminputdescription{
	margin:0;
	padding:0;
	color:#870000;
	margin-left:30px;
}

#loginformkeinpasswort{	
	font-size:0.8em;
	margin-right:10%;
	margin-top:5px;
	float:right;
}

#tonewpassword{	
	color:#615f5f;	
	text-decoration:none;
}

#loginmail {
	all:unset;
	cursor:text;
	background-color:white;	
	margin:0;	
	box-shadow:0px 0px 10px 0px lightgray;
	border-radius:10px;	
	color:#615f5f;
	border: solid 1px white;	
	width:80%;
	font-size:2.3em;
	padding:15px;
}

#loginpassworddiv{
	background-color:white;
	margin:0;	
	box-shadow:0px 0px 10px 0px lightgray;
	border-radius:10px;		
	display: grid;	
	grid-template-rows: 100%;
	gap: 0px 0px;
	position:relative;		
	width:84%;
	grid-template-columns: auto 4.8em;
	height:4.8em;
}

#passwordshowchoose{	
	 border-radius: 0px 5px 5px 0px;
	 display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	right:0;
	top:0;	
	width:4.8em;
	height:4.8em;
}

#passwordshowchoosesvg{
	width:50%;
	height:50%;
	cursor:pointer;
	background: url("../svg/deselecteye.svg");
	background-size:100%;
}

#loginpassword{
	all:unset;
	cursor:text;	
	border-radius:10px;	
	color:#615f5f;
	padding:8px 1.6em 8px 15px;
	border: solid 1px white;
	width:100%;
	font-size:2.3em;
}

#loginmail:focus, #loginpassword:focus {
	border: solid 1px #870000;
}

#keeploginfield + label span{
	background-image: url("../svg/Haken-none-hell.svg");
	width: 40px;
	height: 40px;
	padding:0;
	margin:0;
    display: inline-block;
    cursor: pointer;
}

#keeploginfieldlabel{
	color:#615f5f;
	font-size:0.95em;
	margin:10px 0px -5px 5%;
	float:left;
	display:flex;
	align-items:center;
}

no{
margin-top:-1px;
font-size:1.1em;
margin-left:10px;		
}

#keeploginfield:checked  + label span{
   background-image: url("../svg/Haken-checked.svg");
}

#loginbuttondiv{
	width:50%;
	height:80px;
	font-size:2em;		
	margin-top:30px;
}

#loginbutton{
	all:unset;
	background:#f0ba20;
	color:#870000;	
	border-radius:10px;
	text-align:center;
	font-weight: bold;
	font-size:1.4em;	
	box-shadow:0px 0px 10px 0px gray;
	position:relative;
	top:10px;
	cursor:pointer;	
	width:100%;
	height:100%;
	margin: 0;
	padding:0;
}

#loginformkeinaccount{
	margin:0;
	padding:0;
	color:#870000;
	position:absolute;	
	font-size:2em;
	left:40px;
	bottom:20px;	
}

#toregistration{	
	color:#615f5f;	
	text-decoration:underline;
}

#meinkontoreferenzestitle{
	
	text-align:center;
	margin: -5px 0px 20px 0px;
}



#meinkontoreferenzestitlelink.titlelink, #meinkontomerklisttitlelink.titlelink{	
	color:#870000;
	white-space: nowrap;
	font-size:4.3em;
}

#meinkontoreferenzes{
	display:none;
}

#meinkontoreferenzes.A{
	all:unset;
	display:block;
	position:relative;
	padding: 0px 20px;
	margin:10px 0px 10px 0px;
}

#meinkontoreferenzes li{
	float:none;	
	margin-left:0px;
	width:100%;
	text-align:center;
	white-space: nowrap;
	cursor: default;
	list-style-type: none;
}

#meinkontoreferenzes a{
	text-decoration:none;
	color:#615f5f;
	font-size:3em;	
	cursor:pointer;
}

#logintitlewrapper{
	width:auto;
	max-width:80px;
	height:40px;
	display:flex;
	align-items:center;
	text-overflow:ellipsis;
	overflow:hidden;
}

#smallheaditems{
	display:flex;
	position:absolute;
	right:0;
	top:0;
	width:150px;
	height:100%;
	justify-content:flex-end;
	align-items:center;	
}

.loginclosediv, .watchlistclosediv{
	border-radius: 0px 5px 5px 0px;
	display:flex;
	align-items:center;
	justify-content:center;
	height:80px;
	width:80px;
	top:5px;
	right:10px;
	position:absolute;
	cursor:pointer;
	z-index:5;
}
	
.loginclosesvg, .watchlistclosesvg{
	width:66.66%;
	height:66.66%;
	background: url("../svg/kreuz.svg");
	background-size:100%;
	cursor:pointer;
}

#invisiblewatchlistitemdiv{
	height:35px;
	width:150px;
	position:absolute;
	right:5px;
	top:0;
	cursor:pointer;
	border-radius:5px;
}

#watchlistdiv.A  {
	height:auto;
	width:auto;
}

#watchlistreferenzestitle{
	color:#870000;
	text-align:center;
	margin: -5px 0px 20px 0px;
}

#watchlistreferenzes{
	display:none;
}

#watchlistreferenzes.A{
	all:unset;
	display:block;
	position:relative;
	padding:0px 20px;
	margin:10px 0px 10px 0px;
}

#watchlistreferenzes li{
	float:none;	
	margin-left:0px;
	width:100%;
	text-align:center;
	white-space: nowrap;
	cursor: default;
	list-style-type: none;
}

#watchlistreferenzes a{
	text-decoration:none;
	color:#615f5f;
	font-size:3em;	
	cursor:pointer;
}
#Logoutbutton{
	text-decoration:none;
	color:#615f5f;
	margin-top:30px;
	font-size:2.5em;	
	cursor:pointer;	
	text-decoration:underline;
	font-style:italic;
}
#loginitemsmall{
	height:50px;
	width:50px;
	background:url("../svg/user.svg");
	background-size:100%;
	cursor:pointer;
}

#loginitemsmalldiv{	
	display:flex;
	align-items:center;
	cursor:pointer;
	border-radius:10px;			
	height:50px;
	width:50px;
	margin:0px 4px 0px 5px;
}

@media all and (min-width: 451px) {
	#headnav ul li{
		padding: 0px 8px 0px 8px;	
	}
			
	#informationenheadtitle{
		padding: 10px 0px 0px;
		font-size:1.45em;
	}

	#informationenheadinhalt{
		padding: 0px 20px 15px 20px;
		font-size:1em;
	}	
	
	#headsearch/svg:hover{	
		background:url("../svg/lupehover.svg");
		background-size:100%;
	}

	#headsearchreset/svg:hover{
		background: url("../svg/kreuzhover.svg");
		background-size:100%;	
	}

	#overnav ol li:not(.divider):hover{	
		color:#870000;
		cursor: pointer;
	}

	#headnav ul li:not(.aktiv):hover{	
		background: -webkit-linear-gradient(90deg, #ebc351,#f0e4bf);
		-webkit-background-clip: text;
		color:#efd487;
	}
	
	.navshowbar{
		height:4px;
	}

	#headnav ul li:not(.aktiv):hover .navshowbar{
		background:linear-gradient(to top, #ebc351,#f0e4bf);
	}	
	
	#tonewpassword:hover{
		color:#f0ba20;		
	}

	#loginbutton:hover{
		background:#870000;  
		color:#f0ba20;
	}

	#toregistration:hover{	
		color:#f0ba20;	
		text-decoration:underline;
	}


	#meinkontoreferenzes a:hover{
		color:#f0ba20;
		text-decoration:underline;
	}

	.loginclosediv:hover .loginclosesvg, .watchlistclosediv:hover .watchlistclosesvg{
		background: url("../svg/kreuzhover.svg");
		background-size:100%;
	}

	#watchlistreferenzestitle a:hover{
		color:#f0ba20;
		text-decoration:underline;
	}


	#watchlistreferenzes a:hover{
		color:#f0ba20;
		text-decoration:underline;
	}


	#Logoutbutton:hover{
		color:#f0ba20;
	}
	
	#headsuchleiste {
		font-size:1.1em;
		margin:0;
	}
	
	#headnav{
		overflow:visible;
		height:54px;
	}
	
		
	#headsearchform{
		position:absolute;
		right:1%;
		width: auto;
	}		
	
	#logo{
		height:120px;
		width:320px;
		margin-left:-30px;
		display:block;
		z-index:0;
		margin-top:-4px;
	}
	
	#logoimg{
		width:100%;
		height:100%;
	}
		
	#smalllogo{
		position:absolute;
		top:0;
		height:50px;
		width:13.5%;
		left:3.5%;
		display:flex;
		align-items:center;
		justify-content:center;
	}

	#headsearch{
		width: 300px;
		height: 40px;
		grid-template-columns: 40px auto 40px;	
		top:20px;
	}
	
	#smallheaditems{
		display:none;
	}
	
	#wunschzettelitemsmall{
		display:none;
	}

	#wunschzettelitemsmalldiv{	
		display:none;
	}
	
	#loginitemsmall{
		display:none;
	}

	#loginitemsmalldiv{	
		display:none;
	}
	
	#loginitem{
		height:35px;
		width:35px;
		margin-left:4px;
		background:url("../svg/user.svg");
		background-size:100%;
		background-repeat:no-repeat;
		background-position:center;
		display:block;
	}

	#logintitle{
		all:unset;
		display:block;
		color:#f5f5f5;
		font-size:0.9vw;
		margin-top:-2px;	
	}
	
	#wunschzettelitemdiv{	
		float:right;
		margin:7.5px 10px 0px 0px;
		display:none;
		align-items:center;
		border-radius:10px;	
		position: static;
		 top: auto; 
		 left: auto; 
		 transform: none; 
		 width: auto; 
		 height: auto;
	}
	
	 #logindiv, #watchlistdiv{
		height:auto;
		width:auto;
		position:absolute;		
		top: 45px;
		left: auto;
		right:0;
		transform: translate(0%, 0%);
		border-radius: 5px;
		padding: 0px;
	}
	
	#Logoutbutton {
		margin-top: 2px;
		font-size:1.2em;
	}
	
	#loginitemdiv.A , #wunschzettelitemdiv.A {
		height:auto;
		width:auto;
	}
	
	#wunschzettelitemdiv.A, #wunschzettelitemsmalldiv.A{
		display:flex;
	}
	
	#wunschzettelitem{
		height:40px;
		width:40px;
		background:url("../svg/Watchlist.svg");
		background-size:100%;
		display:block;
	}
		
	#loginitemdiv {
		height:40px;
		width:auto;	
		border-radius:10px;	
		float:right;
		display:flex;
		align-items:center;
		margin:7.5px 1% 0px 0px;
		position:relative;
		color:#f5f5f5;	
		transform: translate(0%, 0%);
		top:0;
		left:0;
	}
		
	#invisibleloginbackground,#invisiblewatchlistbackground{		
		display:none;
		width:138%;
		height:400%;
	}
		
	#dreieck{
	  position:absolute;
	  width: 0;
	  height: 0;
	   border-left: 15px solid transparent;
	  border-right: 15px solid transparent;
	  border-bottom: 30px solid #e6e6e6;
	  top:-15px;
	  right:10px;	
	  display:block;
	}
	
	#invisiblechecker{
		display:none;
		width:160px;
		height:345px;	
	}
	
	 #invisiblecheckerwatchlist{
		display:none;
		width:80px;
		height:345px;		
	}

	#loginitemdiv.A #logindiv, #wunschzettelitemdiv.A #watchlistdiv{
		position:absolute;
		background-color:#e6e6e6;
		box-shadow:0px 0px 10px 0px gray;
		border-radius:5px;
		top:45px;
		right:0;
		padding:0;	
		left:auto;
		height:auto;
		width:auto;
		transform: none;
	}
	
	#logindiv{		
		height:310px;
		width:300px; /*Achtung wenn hier Größen geändert werden, auch bei invisiblechecker , da diese die unsichtbare Klickfläche darstellen*/
		position:absolute;
		box-shadow:0px 0px 10px 0px gray;
		border-radius:5px;
		top:45px;
		left:auto;
		right:0;
		transform: translate(0%, 0%);	
		padding:0px;
	}
		
	#watchlistreferenzestitle,#meinkontoreferenzestitle{		
		font-size:0.35em;
	}
	
	#meinkontoreferenzestitle, #watchlistreferenzestitle{		
		margin-bottom:5px;
	}	

	#meinkontoreferenzes a, #watchlistreferenzes a{		
		font-size:1.1em;	
	}

	#loginformheadline{
		margin:0;
		margin-top:5px;
		font-size:1.4em;
	}

	.loginforminputdescriptionwrapper{
		margin-top:-8px;
		font-size: 1em; 
		margin-left: 0; 
		margin-bottom: 0px;
	}
	
	#loginbuttondiv {
	all:unset	
	}

	#loginformkeinpasswort{	
		font-size:0.8em;	
		margin-top:2px;
		margin-right:20px;
	}

	#loginmail {
		width:250px;
		font-size:1em;
		padding:8px;
	}

	#loginpassworddiv{
		width:266px;
		grid-template-columns: auto 2.2em;
		height:2.2em;	
	}

	#passwordshowchoose{
		width:2.2em;
		height:2.2em;		
	}
	
	.loginclosediv, .watchlistclosediv {
		display:none;
	}

	#loginpassword{
		width:226px;
		font-size:1em;	
		padding:8px 30px 8px 8px;
	}

	#keeploginfield + label span{
		background-image: url("../svg/Haken-none-hell.svg");
		width: 15px;
		height: 15px;
	}

	#keeploginfieldlabel{
		margin-left:20px;
	}

	no{
		font-size:1em;
		margin-left:4px;
	}
	
	#loginbutton{
		width:110px;
		height:35px;
		margin: 0px 30px 0px 30px;
	}

	#loginformkeinaccount{
		font-size:1em;
		left:15px;
		bottom:15px;
	}
	
	#loginclosediv{
		display:none;
	}
	
	#loginmessage{
		margin-top:3px;
		font-size:1em;
	}
	
	#headnav ul li{	
		font-size:1.5em;
	}
	
	#navdiv, #overnavdiv{
		min-width: 900px;
	}
	
	#overnav ol{
		position:absolute;	
		right:10px;
		top:-0.5em;
		display:block;
	}
	
}

@media all and (min-width: 950px) {
	#logintitlewrapper{
		max-width:120px;
	}
}

@media all and (min-width: 1000px) {
	#logintitlewrapper{
		max-width:170px;
	}
}

@media all and (min-width: 1401px) {	
	
	#navdiv, #overnavdiv{
		width:73%;
	}
		
	#headnav ul{
		margin-left:10px;
	}
}