/* ************************************************************* */
/*  . = class       # = id          
/* ************************************************************* */
/*  @import "../../main-1.Versuch.css";
 */ 
 
 
 body {background-color:#ffffff;
	font-family:Verdana, Geneva, sans-serif;
 	margin:0px 30% 0 8%;
 	width:100vw;
}
 .bodyIndex {background-color:grey;
 	margin:0px 0% 0 2vw;
 	width: clamp(61em, 86vw, 85em);
	height:518em;
	border-style:solid;
	border-width:1px;
	position:relative;
}
input {
	border-radius: 8px;
    font-size:clamp(0.5em,1.1vw,1.1em);
    font-weight:bold;
    color:black;
    padding: 2px 6px 3px 6px;
}
article {
	position:relative;
	border: 3px solid grey;
	border-radius:8px;
	padding-bottom:5px;
	padding-left:20px;
	padding-right:150px;
	padding-top:10px;
	margin: 1% 0% 0 0;    
	background-color: white;
	/* -webkit-line-clamp: 10; */
	width: clamp(55vw, 55vw, 7vw);
}

/* 
@media screen and (min-width: 993px) {
	 .bodyIndex {background-color:grey;
		width: 130%;
	}
		article{ width:77%;}
	
}
@media screen and (min-width: 1260px) {
	 .bodyIndex {background-color:grey;
		width: 72em;
	}
	article{ width:90%;}
}
 */

.h3 {
	font-size:1em;
	font-weight:600;
	display:inline;
}
div.h4 {
	font-size:1.2em;
	font-weight:1000;
	display:inline;
	
}

.h5 {
	font-size:clamp(0.8em, 1.2vw, 1em);
	font-weight:400;
	display:inline;}

header{
	background-color:rgb(211, 215, 207);
	width:87%;
	text-align:center;
	border: solid medium #babdb6;
	border-width: 1px;
	border-radius:10px;
	margin:20px 0 20px 3em;
	padding-bottom:5px;
	padding-left:10px;
	padding-right:10px;
	padding-top:5px;
	font-size:large;
	font-style:italic;
	font-weight:bold;
}
/* Index Page */

.msgWarenkorbProdukte {
	color: black;
	font-size: 1em;
	font-weight:bold;
	text-align:center;
	padding:5px 0 10px 0;
    margin:0px auto;
}
.msgWeitereEingabe {
	color: black;
	font-size: 0.9em;
	font-weight:bold;
	text-align:center;
	padding:5px 0 10px 0;
    margin:0px auto;
    width: 50%
}
.LibrexHeader {
	line-height: 1;
}
font.wichtig {
	color:#c01c28 !important;
}
#introImage {
	padding-left: 20px;
}
font.LibrexHeader {
	font-weight:bold;
}
/* Für Adresseingabe */
 #container1, #container2 {
	margin:0px auto;
	max-width:990px;
}
article.container1 {
	height:24em;
}
.container {
	margin:0px auto;
	max-width:990px;
}


/*
button {
	border-radius:10px;
    max-width:100%;
    font-weight:bold;
    font-size: 0.7em;
}
*/


.thimage {
	width: auto;
	max-width: 13vw;
	height:17vw;
}
.fullimage {
    width: 300px;
    height:auto;
}

/* Navigation */
  
aside {
	float:left;
	position: fixed;
	left:5%;
	text-align:center;
	width:15%;
	z-index:100;
}
#get_menue_in{
	position: fixed;
	left:150px;
	text-align:center;
	width:10px;
	height:auto;
	display:none;
}
#get_menue_out{
	position: fixed;
	left:150px;
	text-align:center;
	width:10px;
	height:auto;
	display:none;
}

 nav {margin:10px;
    padding-bottom:20px;
    padding-left:5px;
    padding-right:5px;
    padding-top:10px;
    text-align:center;
}

.startpage{
	background-color:#8ff0a4;
}

ul {margin:0; 
    padding:0;
    width:89%;
    list-style-type:none;
}

ul li a, li span, li button{
    padding:10.5px 11px;
    margin:0px auto 10px auto;              
    background-color:#d3d7cf;
    display:block;
    border-radius:10px;
  	width:100%;
  	font-weight:bold;
  	font-size: clamp(0.65em, 1.0vw, 0.9em);
}

li button:hover {
    color:black;
    background-color:yellow;
    text-decoration:underline;
}

	/*****************/



input.actions, input.nextStep {
	border-radius:8px;
    font-size:0.8em;
    font-weight:bold;
    color:black;
    height: 2.3em; 
}
input.nextStep {
	width:25em;
	font-size:1em;
}
input.contBox_boxDrei_actions {
    border-radius:8px;
    padding: 2px 6px 3px 6px;
    height: 2.3em; 
}


button#bestellung {
 text-decoration:none;
    font-size: 1em;
    background-color: white;
    border: 0.8rem solid #ef2929;
    width: 12em;
}
/*
ul li a:visited {color:#ffffff;}
 
ul li a:hover, ul li a.current {
    color:black;
    background-color:yellow;}
.actions:hover, ul li input .current {
    color:black;
    background-color:yellow;}
.kontaktactions:hover {
    color:black;
    background-color:yellow;}
.footerleft:hover input{
    color:black;
    background-color:yellow;}
*/
/*   new  */

nav li {
    list-style: none;
    position: relative;
    margin: 0 0 .2em 0;
    padding: 0;

}

nav li {
    font-size: 1em;
}

/* Navigation Ende */

span.anzahl_bestellungen{
	width:120px;
	color:black;  /*#3465a4;*/
	font-size:0.8em;
	font-style:italic;
	font-weight:bold;
	word-wrap: break-word;	
}
.anzahl_bestellungen.zeile1{
	font-size:1.1em;
}
.anzahl_bestellungen.zeile2{
	font-size:1.1em;
}

main {
	position:relative;
	left:1em;
	color: #000000;
	float:left;
	width:100%;
}
main h1 {font-size: xx-large;
 	margin-bottom: 10px;
	margin-top: 0px;}
			
/*******  index.php *******/

.content {
	overflow:hidden;
	width:100%;
	background:white;	
}
/* 	article {
	width: 85%;
		margin: 3% 1% 2% 1%;
		background-color: white;
	}
 */	
.right75, .rightBestellungButton {
	width:75%;
/* 	color:#2e3436;
 */	float:right;
	padding-bottom:1px;
	padding-left:5px;
	padding-right:5px;
	padding-top:1px;
}
.rightAnsehenButton {
	width:30%;
	float:right;
	font-size:15px;
	padding-bottom:1px;
	padding-left:0px;
	padding-right:5px;
	padding-top:1px;
}
.rightShowCartInSingleOfferButton {
    width:30%;
    color:#2e3436;
    float:right;
    padding-right:6.5em;
}
.WarenkorbMessage {
	width:1000%; 
	color:rgb(78, 154, 6);
	font-size: 15px;
	font-style:italic;
	text-decoration: underline;
	font-weight: bold;
	float:left;
/* 	padding-left:12em; */
	display: none;
}	
.left20 {
	width:20%;
	background-color:#ffffff;
	float:left;
}
.leftBestellungButton {
	width:20%;
	background-color:#ffffff;
	float:left;
	padding-left:20px;
}	
	
.left50 {
    width:50%;
    float:left;
} 
.right50 {
	width:45%;
	float:right;
	padding-bottom:1px;
	padding-left:5px;
	padding-right:5px;
	padding-top:1px;
}	
.rightfooter{
	width:20%;
	float:right;
	padding-bottom:1px;
	padding-left:5px;
	padding-right:5px;
	padding-top:1px;
}	
 .left50 {
    width:50%;
    color:#ffffff;
    float:left;
}   
.left50 img {max-width:80%; height:auto; } /* Teil von left50 */

.changeSelection {
	font-size:0.9em;
	font-weight:bold;
	width:60%;  /*clamp(200% 200% 200%);*/
	padding:5px 11px;
    margin-top:0.5em;
    margin-bottom:0.5em;
}
.indexWarenkorbAnsehen{
	display:inline;
	width:100%;
	float:left;
} 
 .actions {
    color:black; 
    padding:10.5px 11px;
	margin-bottom:10px;
	background-color:rgb(211, 215, 207);
	border-radius:10px;
}


#buttonsForIndexPage {
	display: inline-grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	width: 95%;
	height: 3em;
	padding:6px 0 0 0;
}
#buttonsForIndexPageBookSearch {
	display: inline-grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	width: 95%;
	height: 3em;
	padding:6px 0 0 0;
}
#buttonsForIndexPageBestell1 {
	display: inline-grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	width: 95%;
	height: 3em;
	padding:6px 0 0 0;
}

.itemGridIndexPage{
	width:100%;
	height:2.5em;
/*	font-size:clamp(0.75rem,2.333vw, 1.8rem);*/
	background-color:rgb(211, 215, 207);
	justify-items:center;
}
.itemGridIndexPage.long{
	width:auto !important;
}  

.item1 {
	grid-column:1;
	grid-row:1;
	justify-self: center;
	width:90%
}
.item2 {
	grid-column:2;
	grid-row:1;
	justify-self: center;
	width:90%
}
.item3 {
	grid-column:3;
	grid-row:1;
	justify-self: center;
	width:90%
}
.itemGridIndexPage:hover{
	background-color:yellow;
}

/*********  Bestell1  *****/
.divcenter, .bestellungsansicht {
	font-size:1.5em !important;
}

li a {
	width:30%;
	margin: auto;
	text-align:center;
}
.bestell_nr {
    width:10%;
    text-align:center;
}
/* * {
  margin: 0;
  padding: 0;
} */
div.cont {
	padding:0 5px 10px 15px;
	font-size:0.9em;
}

div.contBox {
  float: left;
  background-color: white;
  font-weight:400;
}

div.boxEins {
  width: 15%;
  height: auto;
}
div.boxZwei {
  width: 30%;
  height: auto;
}
div.boxDrei {
  width: 28%;
  height: auto;
}
div.boxVier {
  width: 15%;
  height: auto;
}
div.boxFuenf {
  width: 20%;
  height: auto;
}
div.boxSechs {
  width: 75%;
  height: auto;
}
div.boxFett{
	font-weight: bold;
	font-size: 1em;	
}
div.boxSieben {
  width: 75%;
  height: auto;
}
div.clear {
  clear: both;
}
.divcenter {
	position: relative;
	width: 100%;
	text-align:center;
	font-weight:bold;
	font-size:1em;
	padding:5px 0 10px 0;
    margin:0px auto;
    color: white;
}
.leftShowImageButton {
	width:20%;
	background-color:#ffffff;
	float:left;
	margin-bottom:0.5em;
}	

/*********  Bestell2  *****/
input[type="radio"] {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
  transform: scale(1.8);
}
.lieferAdressDatenAnsicht {
	font-size:1.1em !important;
	color: black !important;
}
#divHintWindow {         
    left:25%;
    top:4em;
    height:15em;
    width:45%;
    border:4px solid red;
    font-size:1em; color:#000; 
    font-weight:bold;
    text-align:center;
    position:fixed;
    background:white;
    opacity:0.85;
    filter:alpha(opacity=90);  /*Nur für Internet Explorer */
    display:none;
    z-index:100;    
}
/* div.Bestellung{
	width:100%;
}
*/
#AdressCustomer {
	height: 500px;
}
.hint_text {
	padding:40px 0 5px 9px;
	height: auto;	
}
#LieferAdressDatenCheckbox{
	height: 40px;
	width:50%;
}
.Anredebox {
	float:right;
  	width: 70%;
  	height: 1.5em;
  	background-color: white;
	font-weight:bold;
	font-size:1em	
}
div.Bestell2boxEins {
  position:relative;
  float: left;
  width: 30%;
  height: 2.5em;
  background-color: #eeeeec;
  font-weight:600;
}
div.Bestell2boxZwei {
  float:right;
  width: 70%;
  height: 2.5em;
  background-color: white;
}
.Bestell2boxEins, .Bestell2boxZwei {
	margin-bottom:0.3em !important;
}
input[type=text], input[type=email], select{
	border: 2px solid blue;
	border-radius:4px;
	width: 92%;
	height: 1.9em;
	font-size:1em;
	font-weight:bold;
}
#Versandkosten, #VersandkostenText, #VersandkostenTextLieferAddress, #VersandkostenLieferAddress {
	font-size: 1.0em;
	font-weight: 600;
}
#Versandkosten, #VersandkostenText {
	margin-top:3em !important;
}
 input[type=text]:focus, input[type=email]:focus, select:focus, textarea:focus  {
	border:2px solid #4e9a06;
}
input.PLZInputField_1 {
	width: 19%;
}
input.ORTInputField_1 {
	width: 70.5%;
}
textarea {
	width: 92%;
/* 	height: 8em;
 */	border: 2px solid blue;
	font-size: 1.2em;
	font-weight:600;
	resize: none;
}
div#bestell2 {
	float: left;
	width: 70%;
	height: 3em;
	padding: 0 0 15px 0;	
}
.nextStepInOrderProcess {
	width:100%;
}
.buttonBestell2 {
	border: 2px solid blue;
	border-radius:10px;
    width: 92%;
    height: 2em;
    font-size:1.2em;
    font-weight:bold;	
}
/******* SendOrder  ***/
font.copyText {
    font-size: 14pt;
    font-weight: bold;
    text-decoration: underline;
    color: red;
}

input.personenDaten {
  position:relative;
  left:5em;
  width: 30em;
  height: 1.5em;
  font-size:1em;
  margin:0 0 0 0em;
  border:0
}
textarea.personenDaten {
  position:relative;
  left:5em;
  width: 30em;
  height: 4.5em;
  border-style:solid;
  border-color:black;
  border-width:1px;
  font-size:1em;
  margin:0 0 0 0em;
}
.label {
  display:inline-block;
  position:relative;
  left:1em;
  width: 10em;
  height: 1.5em;
  font-size:1em;
  font-weight:bold;
}
.Belehrung { 
  white-space:pre; 
  font-size: 0.9em; 
  border:1px solid #807055;
  font-variant: normal; 
  background: transparent; 
  color: #000;
  text-align:justify; 
  padding: 5px 10px 5px 10px;
  display: block;
  width: 95%;
  overflow:hidden;
}
/**** Suche  ***/
.suchKritBox {
	float:right;
  	width: 70%;
  	height: auto;
  	background-color: white;
	font-weight:bold;
	font-size:0.8em;
}
.ueberschriftsuchansicht {
	font-size: clamp(0.3em, 1.3vw, 1em) !important;
}
.preisangabe {
	font-weight:bold;
	font-size:1.0em;
	margin-top:0.5em;
	margin-bottom:0.5em;
}

div#closeImage {
	display:none;
}
div#showImage {
	display:block;
}

/*** Kontaktform **/
.AdressInputField_2 {
	width: 92%;
	height: 8em;
	overflow: scroll;
	resize: none;
}
div.Kontaktform{
	width:100%;
	height: auto
}
div.KontaktboxEins {
  position:relative;
  float: left;
  width: 30%;
  height: 6.9em;
  background-color: #eeeeec;
}
.kontaktactions{
	background-color: #eeeeec;
    color:black; 
    padding:0.5em 2em 0.5em 2em;
	margin-bottom:10px;
    display:block;
	border-radius:10px;
	font-size:0.8em;
	font-weight:bold;
}
.KontaktSendbox {
	padding: 5px 0 0 35%;
}
#KontaktFormCaptcha{
	display: block;
}
article#ResultKontaktMessage {
	display: none;
	text-align: center;
	font-size: 1em;
	font-weight: bold;
}
article#SendKontaktMessage {
	display:block;
}
article#ErrorKontaktMessage {
	display: none;
	text-align: center;
	font-size: 1em;
	font-weight: bold;
}
	/*** BookListing ***/
input.produktAnschauen {
	max-width:max-content;
	height:auto;
	font-size: 1em;
}
#showProduct{
	display:none;
}
#showImage{
    display:none;
}
#produktBild > img {
	max-width:60%; height:auto;
}
#Sortbox {
	height:3em;
	padding:8px 0 8px 0;
	background-color: white;
}
.SortboxLeft {
	float:left;
	width: 50%;
	height: 2.5em;
	padding: 5px 0 0 20px;
}
.SortboxRight {
	float:right;
	width: 40%;
	height: auto;
	padding: 5px 0 0 20px;
}
 .SortboxLeft, .SortboxRight{
	font-size:0.9em;
	font-weight:600;
}
.booklist {
	max-height:200em;
	height: auto;
	overflow: auto;
	padding:20px 0 10px 0;
	margin-top:10px;
	border: 2px solid grey;
	width:100%
}
.bookEntryWhite {
	background-color: white;
	margin-left: 4px;
}
.bookEntryGrey {
	background-color: #eeeeec;
	margin-left: 4px;
}
.bookEntryGrey, .bookEntryWhite {
	border: 1px solid grey;
	padding: 3px 0 5px 5px;
	font-size:0.9em;
	width:98%;
	float:left;
}
.bookEntryShow {
	float:right;
}
/*** Fenster zum Anschauen ***/
.contentBookList {
	overflow:hidden;
	height: auto;
	width:100%;
	background:white;	
}
/*** Footer ***/

footer {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	width: 100%;
	height: 2.6em;
	border: 2px solid grey;
	border-radius:8px;
	background-color:rgb(211, 215, 207);
	padding:6px 0 0 50px;
	margin: 0 0 10px 0;
	background-color:grey;
}
article.footerDark {
	background-color: grey !important;
	border: 2px solid white !important;
	margin-top: 40px !important;
}	

button.hilfeSubmit, button.hilfeSubmitBestell2 {
	width:12vw;
	border: 3px solid grey;
	border-radius:8px;
	font-size:clamp(10px, 1.2vw, 19px);
	font-weight:bold;
	padding: 0.2em 0em 0.2em 0em;
	margin: 0.2em 0.8em 0.2em 0.2em;	
}
button.hilfeSubmitBestell2 {
	width:25em !important;
}

button.hilfeSubmitindexphp {
	width:50em !important;
	font-size:clamp(10px, 1.2vw, 20px) !important;
	margin-top:1em;
	margin-bottom:1em;
	height:3em;
}
/* für index.php Javascript not enabled */
#NoScript {
    z-index: 300;
    position: fixed;
/*     margin:0 115em 0 6%; */
}
#NoScript .content {
    font-weight: bold;
    font-size: 15px;
    text-align:center;
}
#NoScript article {
    width: 65em;
    height: 30em;
    border: 5px solid red;
    border-radius:8px;
    margin: 20px 10px 20px 0;
    padding-bottom:10px;
    padding-left:20px;
    padding-right:20px;
    padding-top:5px;
}

/* für index.php Cookie Erlaubnisabfrage */
#NoCookie {
    z-index: 200;
    position: fixed;
    top: 10px;
    left: 25vw;
    opacity: 0.9;
/*     margin:0 115em 0 6%; */
}
#NoHttps {
    z-index: 200;
    position: fixed;
    opacity: 0.9;
}
#NoHttps article {
	width: 55em;
    height: auto;
    border: 5px solid red;
    border-radius:8px;
    margin: 20px 10px 20px 0;
    padding-bottom:10px;
    padding-left:20px;
    padding-right:20px;
    padding-top:5px;
    text-align:center;
}
  
#NoCookie .content {
    font-weight: bold;
    font-size: 15px;
    }
    
#NoCookie article {
	width: 55vw;
    height: auto;
    border: 5px solid red;
    border-radius:8px;
    margin: 20px 10px 20px 0;
    padding-bottom:10px;
    padding-left:20px;
    padding-right:20px;
    padding-top:5px;
    text-align:center;
}
#NoCookie main {background-color:#ffffff;
    position:relative;
    left:0.4em;
    height: 18em;
    margin-top: 15em;
    color: #000000;
    float:left;
}
.CookieAcceptButton, .DatenschutzAnsehenButton {
	width:40%;
	height: 35px;
	float:right;
	font-size:16px;
	padding-bottom:1px;
	padding-left:0px;
	padding-right:5px;
	padding-top:1px;
	border: 2px solid grey;
    border-radius:8px;
}
.DatenschutzAnsehenButton {
	float:left !important;
}