/*
	Diese Styles für alle Kunden gleich

*/	
BODY {	
	/* margin-top: 100px; */
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
	FONT-SIZE:1.0em;
	Line-Height:150%;		
	background:#EFEFEF; 	    
	-ms-overflow-style: -ms-autohiding-scrollbar;		
}

nav{     
	 /* width: 240px; */
	 min-width: 200px;
	 max-width: 1150px;
     float: left;
     border-bottom: 0px solid black;
     height: 100%;
     padding-left:10px;
	 padding-right:10px;
     padding-top:0px;
	 z-index:5;
}
	/* #banner_anzeigen {display:none;height:0px;visibility:collapse;}  */
	
	header {  					
		padding:10px;
		padding-top:20px;
		padding-left:20px;
		width:100%;  
		height:140px;  		
		max-height: 155px;
		margin-bottom: auto;
		z-index:50;	
	}
	@keyframes fadeOut {
	  from {
		opacity: 1;
		filter:grayscale(0);
	  }
	  to {
		opacity: 0.25;
		filter:grayscale(100%);
	  }
	}
	
	#banner_anzeigen{position:relative;top:0px;}
	#logo{max-width:150px;max-height:60px;float:left;padding:0;padding-bottom:10px;}	
	.logo_db_titel{
		position:relative;			
		
		font-size: clamp(0.9rem, 1.3vw, 2.8rem);
		float:right;
		margin-right:22px;
		/* margin-bottom:20px;
		padding-bottom:20px; */
		padding-top:5px;
		font-weight:bold;
		letter-spacing:0px;
		vertical-align:middle;
		/* Farbe wird in Kundenspezifisch.css definiert */
	}
	#menue_top_rechts{display:inline-block;float:right;margin-top:2px;margin-right:8px;opacity:0.85;background:transparent;}	
	
	#seiteninhalt {
		clear: both;
		margin:10px;
		right:10px;
		margin-left:auto;
		margin-right:20px;
		background:#fff;
		min-height:100vh;
		padding-top:30px;
		padding-left:20px;
		padding-right:20px;		
		padding-bottom:200px;
		
	}
	#seiteninhalt_abgedockt{
		position:relative;
		top:100px;
		width:100%;
		background:#FFFFFF;		
		padding:30px;
		
		
	}
	footer{	   					
		position:fixed;
		bottom:0;	
		padding:20px;
		width: 100%;
	}
	#wrapper {   
		width:100%;		
		background:#ffffff;	 
	}
		
	/* DATENZEILEN bei Mouse-Over */	
	#datenzeile  {background-color:#ffffff;}
	/* #datenzeile_nicht_anzeigen {background-color:#f4e2a3;} */
	#datenzeile_nicht_anzeigen {background-color:#E0E0E0;}	
	#datenzeile:hover {						
		background-color:#efefef;		
		box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
	}	
	#runde_Ecken {border-radius: 10px;}
	#Ecke_links_oben {border-top-left-radius: 10px;}
	#Ecke_rechts_oben {border-top-right-radius: 10px;}
	#Ecke_rechts_unten {border-bottom-right-radius: 30px;}
	#Ecke_links_unten {border-bottom-left-radius: 30px;}

	#vertikaler_text{
		writing-mode: vertical-lr;
		text-orientation: mixed;
		text-align: center;
	}
	#desktop_version{		
		/* Menue am linken Rand - soll helfen, besser navigieren zu können */
		/* Voraussetzung: keine mobile Version */		
		visibility:hidden;		
	}
	/* DATENZEILEN : Formatierung der Tabelle */	
	
	/* vor allen für das Dashboard */
	#runde_infobox_rot {
		background-color: white;    
		width: 40px;
		height: 40px;
		left: 0px;
		border: 2px solid red;
		text-align: center;
		border-radius: 20px;	
	}
	#runde_infobox_gruen {
		background-color: white;
		position: relative;
		width: 40px;
		height: 40px;
		top: 0px;
		left: 0px;
		border: 2px solid #008000;
		text-align: center;
		border-radius: 20px;
	}
	#runde_infobox_grau {
		background-color: white;
		position: relative;
		width: 40px;
		height: 40px;
		top: 0px;
		left: 0px;
		border: 2px solid #E0E0E0;
		text-align: center;
		border-radius: 20px;
	}
.td_format {border-bottom: 1px dashed #808080;}



/* ZOOM von BILDERN */
div.image {overflow: hidden;}
div.image img{
	width: 100%;	
	height: auto;	
	/* SCALE */
	-webkit-transform: scale(1);	
	-moz-transform: scale(1);	
	-ms-transform: scale(1);	
	-o-transform: scale(1);	
	transform: scale(1);	
	/* VERZÖGERUNG */	
	-webkit-transition: all 0.3s linear;	
	-moz-transition: all 0.3s linear;	
	-ms-transition: all 0.3s linear;	
	-o-transition: all 0.3s linear;	
	transition: all 0.3s linear;
	}
div.image img:hover {	
	-webkit-transform: scale(1.2);	
	-moz-transform: scale(1.2);	
	-ms-transform: scale(1.2);	
	-o-transform: scale(1.2);	
	transform: scale(1.2);
	}

input[type=text], input[type=password], input[type=file], input[type=date] {    	
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
	font-size: clamp(0.85em, calc(1em + 0.5vw), 1.2em); 
	padding: 5px;
	margin-top:3px;
	margin-bottom:20px;
	margin-right:3px; */ 
    display: inline-block;    
	height:44px;
}

TEXTAREA{        
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
	font-size: clamp(0.85em, calc(1em + 0.5vw), 1.2em); 
	padding-top: 10px;		
	margin-top:10px;
	margin-left:5px;
	padding: 5px;
    /* display: inline-block;  */
	border: 1px solid #ccc;
    
}
fieldset{        
	border-style:dashed;	
	border-width:0px;
	border-color:transparent;
	
}
legend{        
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
	font-size: clamp(0.85em, calc(1em + 0.5vw), 1.2em); 
    color:#404040;
	font-weight:bold;
	
    
}
label{        
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
	font-size: clamp(0.85em, calc(0.85em + 1vw), 1em); 	
	font-weight:normal;	
    color:#404040;
}

select {
    /* width: 100%;*/    
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
	font-size: clamp(1em, calc(0.9em + 0.5vw), 1.2em); 
	padding: 5px;
    margin-left:5px;
	margin-top:10px;
	/* display: inline-block;   
	box-sizing: border-box;     
	height:44px;
	*/
	border: 1px solid #ccc;	
	
}

LI {
	/*  Aufzählungspunkte */
	/* NICHT verändern, hat Einfluss auf das Menü im Burger Modus 
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
	font-size: clamp(0.5em, calc(0.5em + 1vw), 1em); 
	*/
	margin-left:20px; 
	LIST-STYLE-IMAGE: url("images/menue_selected.gif"); 	
	Line-Height:175%;
	
	
}

#auswahl_rechts {
	/* Vorlage für die DIV-Container, wo man per Button etwas bestätigt */
	right:0;
	position:absolute;
	margin-right:20px;
	margin-top:30px;
	margin-bottom:30px;
}
#auswahl_links {
	/* Vorlage für die DIV-Container, wo man per Button etwas bestätigt */
	display:inline-block;
	margin-top:30px;
	margin-bottom:30px;
}

.reiter{
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;		
}

.reiter_not_selected{
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;	
	border-style:solid;
	border-color:#fff;
	border-width:2px;
	height:40px;
}

a.link_in_reiter{
	/*  für Links als Reiter*/
	color:#505050;

	TEXT-DECORATION: none;		
	COLOR: #505050; 	
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
	FONT-SIZE:0.8em; 
	Line-Height:120%;
}
a.link_in_reiter:hover {
	color:#000000;
	background-color: transparent;
    text-decoration: none;
	/*font-weight: bold;    */
}

.kreis {
     border-radius: 50%;
}
/* KALENDER default */
.kalender {
	BORDER-RIGHT: #3F3B3B 1px solid; 
	BORDER-TOP: #3F3B3B 1px solid; 
	BORDER-LEFT: #3F3B3B 1px solid; 
	BORDER-BOTTOM: #3F3B3B 1px solid; 
	}
.kalender_oben_hg{background: #3F3B3B; }
.kalender_oben_schift{
	FONT-WEIGHT: bolder; 
	FONT-SIZE: 10px; 
	COLOR: #ffffff; 
	font-style: bold; 
	FONT-FAMILY: kundenschrift, Arial, sans-serif;	
}

.kalender_mitte_hg{background: #ffffff;}
.kalender_mitte_schift{
	FONT-WEIGHT: bolder; 
	FONT-SIZE: 16px; 
	COLOR: #3F3B3B; 
	font-style: bold; 
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
	
}

.kalender_unten_hg{
	/* background: #EFEFEF; */
	background-image:url(images/farbverlauf_tabelle.jpg); background-repeat:repeat-x,y;
	}
.kalender_unten_schift{
	FONT-WEIGHT: bolder; 
	FONT-SIZE: 16px; 
	COLOR: #3F3B3B; 
	font-style: bold; 
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
	
}

/*  KALENDER  Neu ab 2025 */
/* First we style the container element.  */
/* AUFRUF:
	<p class="calendar">7 <em>February</em></p>
	
	*/
.calendar{
  margin:.25em 10px 10px 0;
  padding-top:5px;
  float:left;
  width:80px;
  background:#ededef;
  background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); 
  background: -moz-linear-gradient(top,  #ededef,  #ccc); 
  font:bold 30px/60px Arial Black, Arial, Helvetica, sans-serif;
  text-align:center;
  color:#000;
  text-shadow:#fff 0 1px 0; 
  border-radius:3px;  
  position:relative;
  box-shadow:0 2px 2px #888;
  }

/* Em element is also styled, it contains the month’s name. */




/* Now I am styling the pseudo elements. Container’s pseudo elements (:before and :after) are used to create thos circles, "holes in te paper". */
.calendar:before, .calendar:after{
  content:'';
  float:left;
  position:absolute;
  top:5px;  
  width:8px;
  height:8px;
  background:#111;
  z-index:1;
  border-radius:10px;
  box-shadow:0 1px 1px #fff;
  }
.calendar:before{left:11px;}  
.calendar:after{right:11px;}

/*…and em’s pseudo elements are used to create the rings: */
.calendar em:before, .calendar em:after{
  content:'';
  float:left;
  position:absolute;
  top:-5px; 
  width:4px;
  height:14px;
  background:#dadada;
  background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa)); 
  background:-moz-linear-gradient(top,  #f1f1f1,  #aaa); 
  z-index:2;
  border-radius:2px;
  }
.calendar em:before{left:13px;} 
.calendar em:after{right:13px;} 

/* ende Kalender */



.schatten{
		-webkit-box-shadow: 5px 10px 50px grey;
		-moz-box-shadow: 5px 10px 50px grey;
		box-shadow: 5px 10px 40px grey;
}

.box{
	  background-color:#ffffff;
	  border:solid #505050 1px;
	  padding:10px;  
	  position:absolute; 
}

.polaroid {  
  background-color: white;
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /* margin-bottom: 25px;*/
}

.inhalt {
	FONT-SIZE:1.0em; 
	COLOR: #505050; 
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
}
.rahmen {
	border-color: #6699FF;
	
}
a.button { 	
	display: inline-block;
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
	/* font-size: clamp(0.65em, calc(0.65em + 1vw), 1.2em);  */
	font-size: 1em; 
	text-align: center;	   
	color:#404040;		
	border-color: #404040;
	background-color: #EFEFEF; 
	
	border-style: solid;	
	border-width:1px;		
	
	padding:3px;
	padding-left:5px;
	padding-right:5px;
	padding-top:6px; 
	
	margin-top:3px;	
	margin-right:5px;	
	margin-bottom:20px;
	
	height:44px;
	text-decoration:none;
	white-space: nowrap;
	
	/* float:left; */	
}

a.button_rot {
	display: inline-block;
	FONT-FAMILY: kundenschrift, Arial, sans-serif;	
	font-size: 1em; 
	color:#800000;	
	background-color: #FFF; 
	border-color: #800000;	
	
	border-style: solid;	
	border-width:1px;		
	
	padding:3px;
	padding-left:5px;
	padding-right:5px;
	padding-top:6px; 
	
	margin-top:3px;	
	margin-right:5px;	
	margin-bottom:20px;
	
	height:44px;
	text-decoration:none;
	white-space: nowrap;
	

}

a.button_gruen {  
	display: inline-block;
	FONT-FAMILY: kundenschrift, Arial, sans-serif;	
	font-size: 1em; 
	color:#008000;	
	background-color: #FFF;
	border-color: #008000;
	
	border-style: solid;	
	border-width:1px;		
	
	padding:3px;
	padding-left:5px;
	padding-right:5px;
	padding-top:6px; 
	
	margin-top:3px;	
	margin-right:5px;	
	margin-bottom:20px;
	
	height:44px;
	text-decoration:none;
	white-space: nowrap;

}

a.button_normal_backend {
	display: inline-block;
	border-style: solid;
	border-color: #404040;
	border-width:1px;	
	color:#404040;
	background-color: #efefef;
	padding: 1px;		
    text-align: center;
    text-decoration: none;
    vertical-align:middle;	
    /* font-size: 14px;  */
	font-size: 0.85em; 
	/** height:30px; */
    margin-left:3px;
	margin-bottom:3px;
	padding:3px;
	padding-left:5px;
	padding-right:5px;
	position:relative;
	top:0px;
	text-decoration:none;
	margin-bottom:10px;
}
.button_normal_backend:hover {	
	background-color: #808080;
	border-color: #404040;
	color: #fff;	    	
    box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
	
}
.button:hover {			
	background-color: #505050;
	border-color: #FFF;
    color: white;		
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
} 
.button_rot:hover {	
	border-color: #AD0000;	
	color:#fff;
    background-color:#800000;  
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.button_gruen:hover {	
	color:#FFF;
	background-color: #008000; 		        
	border-color: #00FF00;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
} 


input.button,input.button[type=submit],input[type=file] {	
	
	FONT-FAMILY: kundenschrift, Arial, sans-serif;	
	font-size: 1em; 
	text-align: center;
	color:#404040;
	background-color: #FFF;
	border-color: #404040;	
		
	border-style: solid;	
	border-width:1px;		
	
	padding:3px;
	padding-left:5px;
	padding-right:5px;
	/* padding-top:6px; */
	
	margin-top:3px;	
	margin-right:5px;	
	margin-bottom:20px;
	
	height:44px;
	text-decoration:none;
	white-space: nowrap;
	
	
	
}

input.button:hover,input.button[type=submit]:hover,input[type=file]:hover {		
	color:#fff;
	background-color: #404040;
	border-color: #404040;	
		
	border-style: solid;	
	border-width:1px;
}


input.button_rot,input.button_rot[type=button] {
	FONT-FAMILY: kundenschrift, Arial, sans-serif;	
	font-size: 1em; 
	text-align: center;	
	
	color:#800000;
	background-color: #FFF;
	border-color: #800000;
	
	border-style: solid;	
	border-width:1px;		
	
	padding:3px;
	padding-left:5px;
	padding-right:5px;
	/* padding-top:6px; */
	
	margin-top:3px;	
	margin-right:5px;	
	margin-bottom:20px;
	
	height:44px;
	text-decoration:none;
	white-space: nowrap;
	
	
	
}

input.button_gruen,input.button_gruen[type=button] {
	FONT-FAMILY: kundenschrift, Arial, sans-serif;	
	font-size: 1em; 
    text-align: center;	    
	border-style: solid;	
	border-width:1px;
	border-color: #008000;
	color:#008000;       
	background-color: #FFF;
	
	border-style: solid;	
	border-width:1px;		
	
	padding:3px;
	padding-left:5px;
	padding-right:5px;
	/* padding-top:3px; */
	
	margin-top:3px;	
	margin-right:5px;	
	margin-bottom:20px;
	
	height:44px;
	text-decoration:none;
	white-space: nowrap;
	
}



/* 
	Ab hier Mouseover für Referentenprofil etc. 
*/
.container_ref {
  position: relative;
  width: 150px;
  height:200px;  
  padding: 5px; 
  padding-right: 20px; 
  float:right;
  
}

.container_ref:hover .overlay {
  height: 45%;
  opacity: 0.9;
  color:#303030;      
}
.overlay {
  position: absolute;
  bottom: 2px;
  left: 5px;
  right: 0px;
  background-color: #efefef; /* Farbe von Schaltfläche KUNDENFARBE */
  overflow: hidden;
  width: 92%;
  height: 0;  
  /* transition: .8s ease;  */
  
}


.graufilter {
    filter: grayscale(100%); /* Standard */
    -webkit-filter: grayscale(100%); /* Webkit */
    filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
    filter: gray;  /* IE6-9 */
    -webkit-filter: grayscale(1); /* Old WebKit */
}
.graufilter:hover {
    filter: grayscale(0%);
    filter: none;
    -webkit-filter: grayscale(0); /* Old WebKit */
}
.pflichtfeld {
	border: 1px solid #FF0000;
	margin-right: 5px;
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
	font-size: 1em; 
	height:46px;
	border-style:dashed;
	border-color:#AD0000;
	border-width:1px;
	background: #ffe9e5; /* rötlich */
	padding:3px;
}

.eingabefeld {
	border: 1px solid #ccc;
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
	font-size: 1em; 
	background: #fffbe5; /* gelblich */
	height:46px;
	padding:3px;
}
input::placeholder {
  color: #404040;
  font-size: clamp(0.5em, calc(0.5em + 1vw), 0.8em); 
  
}
/*  Gruppierungsbox */
fieldset {
    border-color: #efefef;
}

.shop_einkaufsliste{
	
   position: fixed; width:250px; height:650px;  
   /*background: #FFFFFF;   */
   
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
   border-bottom-left-radius: 25px;
   border-bottom-right-radius: 25px;
   
   /* bottom: +20px;  */
   top: 235px;
	margin-left: 20px;   
   /*  z-index: 90; */
	
}
.shop_einkaufsliste_bild{	
   position: fixed; width:50px; height:50px;  
   /*background: #FFFFFF;   */
   border-top-left-radius: 50%;
   border-top-right-radius: 50%;
   border-bottom-left-radius: 50%;
   border-bottom-right-radius: 50%;
   
   /*
   border-style:solid inset;
   border-width:2px;
   border-color:#a0a0a0;
   */
   /* bottom: +455px;  */
   top:250px;
   left: 30px;   
  /*   z-index: 100; */
   
	
	
}


.infobox_export{	
   position: fixed; width:400px; height:450px;  
   /*background: #FFFFFF;   */
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
   border-bottom-left-radius: 25px;
   border-bottom-right-radius: 25px;
   
   bottom: +100px; 
	right: 20px;   
   z-index: 90; 
}
.infobox_oben{	
   position: fixed;
   width:275px;   
   
   top:20px;
   background: #FFFFFF;   
   /*
   filter:alpha(opacity=90);
   opacity:0.9;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   border-bottom-left-radius: 25px;
   border-bottom-right-radius: 25px;
   */
   
   right: 20px;   
   z-index: 90; 	
}
.infobox_oben_bild{	
   position: fixed;
   width:50px;
   height:50px;
   top:35px;
   right:220px;

   
   /*background: #FFFFFF;   
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;         
   */
   z-index: 100; 	
}
.infobox_unten{	
   position: fixed;
   width:275px;
   /* height:260px;   */
   
   right: 20px;
   bottom:200px;
   background: #FFFFFF;   
   /*
   filter:alpha(opacity=90);
   opacity:0.9;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   border-bottom-left-radius: 25px;
   border-bottom-right-radius: 25px;
   */      
   z-index: 90; 	
}
.infobox_unten_bild{	
   position: fixed;
   width:50px;
   height:50px;
   bottom: +390px;
   right: 220px;

   /*background: #FFFFFF;   
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;         
   */
   
   z-index: 100; 	
}


/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    /* border-bottom: 1px dotted black;  If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext{
    
	visibility: hidden;
    width: 520px;
    background-color: #efefef; 
    /*color: #808080;*/
    text-align: left;
    padding: 15px;    
	border-radius: 10px;
	border-width: 1px;
	border-style:solid;
	border-color:#505050;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
	top:-70px;
	left: 25px;
    z-index: 1;
}
/* Sprechblase*/
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 70px;
    right: 100%; /* To the left of the tooltip */
    margin-top: -7px;
    border-width:10px;
    border-style:solid;
    border-color:transparent #505050 transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}


/* RADIOS und Checkboxen */
input[type="radio"] {
  /*content: "";*/  
  width: 1.25em;
  height: 1.25em;
  border-radius: 10%;    
  box-shadow: inset 1em 1em var(--form-control-color);
}
/* **********************/
/* Checkbox: Text */
/* Ab hier nicht ändern ! */
/* **********************/





.checkboxgruppe label {
	/* SLIDER */
	position: relative;
	display: inline-block;
	width: 5em; /* Abstand zwischen linkem rand des sliders und dem Text */
	height: 3.5em;
}

.checkboxgruppe input {
	display: none;	
}

.checkboxgruppe .slider {
	/* Grundfläche */	
	position: absolute;
	cursor: pointer;
	top: 1.5em;
	left: 0em;
	width: 4em;
	height: 2em;
	background-color: #c32e04;	/* red */	
	transition: all .3s ease-in-out;
	border-radius: 1.1em;
}

.checkboxgruppe .slider:before {
	/* verschiebbarer Button */	
	position: absolute;
	content: "";
	height: 1.6em;
	width: 1.6em;
	left: 0.2em;
	bottom: 0.2em;
	background-color: white;
	border-radius: 50%;
	transition: all .3s ease-in-out;
}

.checkboxgruppe input:checked + .slider {
	background-color: #008000;	/* green */
}

.checkboxgruppe input:checked + .slider:before {
	transform: translateX(1.9em);
}



.fliesstext_backend{	
	TEXT-DECORATION: none;		
	COLOR: #505050; 	
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
	FONT-SIZE:0.85em; 
	Line-Height:120%;
}
.fliesstext_backend_hell{	
	TEXT-DECORATION: none;	
	FONT-SIZE:0.85em; 
	COLOR: #ffffff; 
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
	Line-Height:120%;
}
input.pin{
	/* zum Beispiel Freischaltcode der Mail-Validierung*/
	FONT-FAMILY: kundenschrift, Arial, sans-serif;
	height:80px;
	FONT-SIZE:1.85em;
	margin-top:20px;
	margin-bottom:20px;
	display: inline-block;
	text-align:center;
	width:300px;	
	padding:10px;
	color:#505050;
	font-weight:bold;
}	

/* Zoom container */
.produktbild {
    position: relative;
    display: inline-block;
	/* z-index: 200; */
}

/* ZOOM Inhalt */
.produktbild .zoom_produktbild{
    FONT-FAMILY: kundenschrift, Arial, sans-serif;
	visibility: hidden;
    width: 225px;
    background-color: #FFFFFF;    
    text-align: left;
    padding: 25px;    
	
	border-width: 10px;
	border-style:solid;
	border-color:#EFEFEF;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
	z-index: 100;
	top:-70px;
	left: 25px;
    
}
/* Sprechblase*/
.produktbild .zoom_produktbild::after {
    content: " ";
    position: absolute;
    top: 70px;
    right: 100%; /* To the left of the tooltip */
    margin-top: -7px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent #000080 transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.produktbild:hover .zoom_produktbild {
    visibility: visible;
}




@media all and (max-width: 550px) {
	#menue_top_rechts{display:inline-block;float:right;margin-top:-40px;margin-right:8px;opacity:0.85;background:transparent;}
	.logo_db_titel{font-size: clamp(0.7rem, 1.1vw, 2rem);letter-spacing:0px;}

}
@media all and (min-width: 1320px) {
	
	
	header {    	
		top:0px;
		position:fixed;		
		padding:10px;
		padding-top:30px;
		width:100%;  
		height:120px;  		
		max-height: 150px;
		margin-bottom: auto;		
		z-index:50;
	}
	
	#desktop_version{
		display:flex;
		position:fixed;		
		left:3px;
		top:200px;	
		width:270px;
		min-height:500px;
		text-align:left;
		/* background:#EFEFEF; */
		border-style:solid;
		border-width:1px;
		border-color:#e0e0e0;
		padding:10px;
		visibility:visible;
		
	}
	#logo{max-width:300px;max-height:60px;float:left;padding:0;}
	
	#banner {		
		animation: fadeOut 5s ease-in-out forwards;		
		
	}
	
	
	#seiteninhalt {
		clear: both;
		position:absolute;
		top:190px;
		
		right:5px;
		padding-top:15px;
		padding-left:50px;
		border-top-left-radius: 20px;	
		width:79%; 
		max-width:3200px;		
		min-height:1750px;	
		
		padding-bottom:200px;		
	}
	
	.logo_db_titel{letter-spacing:3px;}
}
@media all and (min-width: 1921px) {
	.shop_einkaufsliste{display:block;}
	.shop_einkaufsliste_bild{display:block;}	
	
	header {  					
		padding:10px;
		padding-top:20px;
		padding-left:20px;
		width:100%;  
		height:140px;  		
		max-height: 155px;
		margin-bottom: auto;
		z-index:50;				
	}
	
	#seiteninhalt {  
		clear: both;	
		position:relative;				
		/* padding-top:30px; 
		display: flex;			
		flex-direction: column;
		*/
		
		
		
		position:absolute;
		top:190px;
		
		
		
		margin-bottom:auto;		 
		margin-right:10px;
		margin-left:auto;		
		width:80%;
		min-width:980px;
		max-width:2200px;		
		
		padding-left:40px;
		padding-bottom:200px;

	
	}
	
	footer{	   				
		position:fixed;
		bottom:0;
		height:150px;
		max-height:150px;	
		padding:15px;
		width: 100%;	
	}
	
	
	
}

@media all and (max-height: 1080px) {		
	
	/* #banner_anzeigen {visibility:collapse;height:150px;} */	
	#menue_top_rechts{display:inline-block;float:right;margin-top:0px;margin-right:8px;opacity:0.85;background:transparent;}
	/* #banner_anzeigen {display:none;height:50px;} /* visibility:collapse; */
	/*
	header {  				
		position:relative;		

	}
	*/
	footer{	   				
		display:none;
		
		
		
		
	}

	
}	

@media all and (max-width: 1319px) {
	/* 950
 */	.shop_einkaufsliste{display:none;}
	.shop_einkaufsliste_bild{display:none;}	
	
	#menue_top_rechts{display:none;} 
	.logo_db_titel{margin-top:10px;}
	
	#seiteninhalt {
		position:relative;		
		top:0px;		
		min-height:100vh;
		display:inline-block;
		width:100%;
		padding-bottom:200px;
		
	}



	h1{margin-top:10px;}
	
	#menue_top_rechts{display:none;}
	
	#seiteninhalt_abgedockt{
		position:relative;
		top:100px;
		width:100%;
		background:#FFF;		
		padding:30px;
		
		
	}	
	
}

@media print {	
	/* MUSS hier am Ende stehen */
	header{display: none;}
	footer{display: none;}
	.button{display: none;}
	#banner_anzeigen{display: none;}
	
	
	#nichtdrucken {display: none;}
    .pagebreak {
        clear: both;
        page-break-after: always;		
	
    }