/* 
/////////////////////////////////////////////////////////////////
// Website www.stephanusbuch.de
//
// Autor: Christoph Bartholme
// webmaster@stephanusbuch.de
//  
// CSS main file
//
/////////////////////////////////////////////////////////////////
*/ 

/* Reset - alle Abstaende auf NULL */
*  { padding: 0; margin: 0; }
html { font-size: 100%; }

h1, h2, h3, h4, h5, h6 {margin-bottom: 0;}
h1 {font-size: 1.5em;}
h2 {font-size: 1.3em;}
h3 {font-size: 1.2em;}
h4 {font-size: 1.1em;}
p, ul, ol { margin-bottom: 1em; }
ul ul { margin-bottom: 0; }
li { margin-left: 1.75em ; }
blockquote {margin-left: 2em;}
small {font-size: 0.75em;}
pre {white-space: pre-wrap;}

html, body { scroll-behavior: smooth; } /* weiches Scrollen zum Anker; NICHT bei Safari, MSIE  */

/* Silbentrennung im Fliesstext */
li,
p { 
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

/* Silbentrennung aus */
.sidebar li.subnav a,
.sidebar li.subnav .straight,
.card-gal .title,
.logvalue,
input,
h1, h2, h3, h4, h5,
.no-hyphens,
a { 
	overflow-wrap: normal;
	-webkit-hyphens: manual;
	-ms-hyphens: manual;
	-moz-hyphens: manual;
	hyphens: manual;
}


/******** globale Fonts *****************/
body {
	color: #555;
 	font-family: "Roboto Regular", Arial, Helvetica, sans-serif;
	font-size: 1em;  
	background: #FFFFFF;
	background: linear-gradient(to top, #FFFFFF, #FFE88C) fixed; /* CUSTOM COLOR */
	text-underline-offset: 10%; /* Fix fuer Webfont bei Firefox */ 
/* 	-webkit-font-smoothing: antialiased; */ /* BUGFIX: prevents CHROME rendering Bold as Normal */	
}

.logvalue,
h1, h2, h3, h4, h5 { 
	font-family:  "RobotoSlab Regular", Verdana, Arial, Helvetica, sans-serif; /* Webfont */
 	font-weight: normal;  
	color: #000;
}

b, 
.fat, 
.big, /* default button */ 
strong {
 	font-family: "Roboto Bold", Arial, Helvetica, sans-serif; 
 	font-weight: normal;
}

.typewriter {
 	font-family: courier, monospace;
}

.smaller {font-size: 75%;}
.bigger {font-size: 133%;}

fieldset { /* make it invisible */
	margin: 0;
	border: 0;
}

legend { /* make it invisible */
	display: none;
}

/******** globale inline-Formate ***********/
input,
select,
textarea {
	font-family:"Roboto Regular", Arial, Helvetica, sans-serif; /* Workaround Firefox */
	font-size: 1em;
	padding: 4px; 	
	box-sizing: border-box;
	line-height: 1.25em;
}

/***** workaround fuer Safari */ 
 input[type="search"] {
	-webkit-appearance: none;
	background-color: #fff;
	border: 1px solid #333;   	
}

/******* Links */
a { 
	text-decoration: underline;  
	color: #555;
} 

a:active, 
a:hover {
	color: #616c85;
}

.a-lookalike { 
/*  	text-decoration: underline; */
	color: #000;
} 

.striked { /* replacement for <strike> */
	text-decoration:  line-through;
	text-decoration-color:  #c00;
	text-decoration-thickness: 2px;
}

.striked-red { 
	text-decoration:  line-through;
	text-decoration-style: wavy;
	text-decoration-color: #c00;
}

/******** Warnung */
.alert,
.alert a,
.iconalert,
.iconalert a {
	color: #c00;
}
.alert a:hover,
.alert a:active,
.iconalert a:hover,
.iconalert a:active {
	color: #d20000;
}
.iconalert::before {
	font-family: "IcoFont";
	font-size: 1.25em;
	content: "\f026"; /* icofont-warning */ 
	padding-right: 4px;
}

.infoblue {
	color: #0273be;
}

.listblue {
  	color: #574FAA;  
}

.orangemark {
  	color: #f8aa00;  
}

/******** Erfolg */
.iconsuccess {
 	color: #080;
}
.iconsuccess::before {
	font-family: "IcoFont";
	font-size: 1.25em;
	content: "\eed7"; /* icofont-check-circled */
	padding-right: 4px;
}


.iconhelp {
 	color: #555;
}
.iconhelp::before {
	display: inline-block;
	font-family: "IcoFont";
	font-size: 1.25em;
	content: "\efca"; /* icofont-question-circle */
 	color: #59a0a5;
	padding-right: 4px;
	text-decoration: none;
}

.iconinfo {
 	color: #555;
}
.iconinfo::before {
	display: inline-block;
	font-family: "IcoFont";
	font-size: 1em;
	font-size: 1.25em;
	content: "\ef4f"; /* icofont-info-square */
 	color: #0273be;
	padding-right: 4px;
	text-decoration: none;
}

.iconopen {
 	color: #555;
}
.iconopen::before {
	display: inline-block;
	font-family: "IcoFont";
	font-size: 1em;
	font-size: 1.25em;
	content: "\eabc"; /* icofont-square-right */ 
	color: #567;
	padding-right: 4px;
	text-decoration: none;
}


.stretch { 
	letter-spacing: 0.2em;
	word-spacing: 0em;
}

/* Error-Anchor nach oben versetzen wg. Verdeckung durch sticky menu */
#footnote,
#nachlese,
#eanchor,
#formanchor {
	position: relative;
	top: -7em; /* -6em */
	display: block; 
	visibility: hidden;  
}

.nowrap {
	white-space: nowrap;
}


.float-left {
	float: left;
}

.float-right {
	float: right;
}

.clear-both {
	clear: both;
}

/****** nicht anwaehlbar = grau */
.greyed {
 	color: #6a6a6a; 
}

.greenmark {
	color: #0b7b5c;
} 
.greenmark a {
	color: currentcolor;
} 

.yellowmark {
	color: yellow;
}

/******** zentrierter Text */
.center {
	text-align: center;
}

/******** x-Wertangabe (E-Mail etc.) */
.logvalue {
	color: #000;
	background-color: #ffc;
	padding: 0 0.25em;
}

/******** Veranstaltung faellt aus */
.invalid {
 	background-color: transparent; 
	background-image: url("../pix/faelltaus_trans.gif"); 
	background-position: 0px 200px;
	background-repeat: no-repeat;	
}

/******** Veranstaltung gesperrt */
.locked {
 	background-color: transparent; 
	background-image: url("../pix/gesperrt_trans.gif"); 
 	background-position: center top; 
	background-repeat: no-repeat;
}

/******** Buchtipp noch nicht gueltig */
.future {
 	background-color: transparent; 
	background: url("../pix/inaktiv_trans.gif"); 
	background-position: center top;
	background-repeat: no-repeat;	
}

/******** Seitenbereiche ************************/
#wrapper {
	position: relative;
	border-left: 1px solid #DFBF31;  /* CUSTOM COLOR */
	border-right: 1px solid #DFBF31; /* CUSTOM COLOR */
	min-width: 800px;
	max-width: 1440px; 
	margin: 0 auto;
	background-color: #fff;
}

#area-head { 
	position: relative;
 	background: url("../pix/regal_blur_3600.jpg") #fff center top fixed;  
	background-size: 1800px 200px;  
 	height: 6em;
	padding: 0em 2em 1em 2em;
}

#area-left {
	float: left;
	margin-top: 0em;
	width: 12em;
	display: inline;
	padding: 0 1em 0 0.5em;
	min-height: 50em;	
	height: auto !important;  /* für moderne Browser */
	height: 50em;  /* fuer den IE */	
}

/* LEGACY kann weg */
#area-right {
	float: right;
	margin-top: 0em;
	width: 12em;
	display: inline;
	padding: 0 0.5em 0 1em;
	min-height: 50em;	
	height: auto !important;  /* für moderne Browser */
	height: 50em;  /* fuer den IE */	
}

#area-right-respons { /* bei Breite < 1150: aus */
	display: none; 
}

@media only screen and (min-width:1150px) { 
	#area-right-respons {
		float: right;
		margin-top: 0em;
		width: 12em;
		display: inline;
		padding: 0 0.5em 0 1em;
		min-height: 50em;	
		height: auto !important;  
		height: 50em;  		
	}
}

 #area-left-search {
 	float: left;
	margin-top: 0em;
	width: 10em; 
	display: inline;
	padding: 0 1em 0 0.5em;
	min-height: 7em;	
	height: auto !important;  /* für moderne Browser */
	height: 7em;  /* fuer den IE */	
 }

/* LEGACY kann weg */
#area-payload-1col { /* Nutzbereich ueber 1 Spalte = Standard */
	margin: 0 13.5em;
	padding: 1em 0 2em 0; 
/* outline: 1px solid red;		 */
}

/* LEGACY kann weg */
#area-payload-2col { /* Nutzbereich ueber 2 Spalten */
	margin: 0 0.5em 0 13.5em; 
	padding: 1em 1em 2em 0; 
/* outline: 1px solid red;		 */
}

#area-payload-2col-respons { /* Nutzbereich ueber 2 Spalten bei breite < 1150px */
	margin: 0 0.5em 0 13.5em;
	padding: 1em 0 2em 0;
/* outline: 1px solid green; */
}

@media only screen and (min-width:1150px) {
	#area-payload-2col-respons { /* Nutzbereich auf 1 Spalte */
		margin: 0 13.5em;
		padding: 1em 0 2em 0;
	}
}

#area-payload-3col { /* Nutzbereich ueber alle 3 Spalten */
	margin: 0;
	padding: 1em;
}

#area-payload-3col-marlef { /* Nutzbereich ueber alle 3 Spalten, linker Rand */
	margin: 0 0 0 1em;
	padding: 1em 1em 2em 0; 
}

/* Ausnahme, kein Seotentitel */
#search #area-payload-3col-marlef,
#search #area-payload-2col-respons {
	padding-top: 0;
}

/* LEGACY kann weg */
#content-payload-1col {
	font-size: 1em;
	line-height: 1.4;
	overflow: hidden;  /* tables ggf. abschneiden */
	margin: 0em auto;
	max-width: 51em; 
}

/* LEGACY kann weg */
#content-payload-2col {
  	font-size: 1em;
	line-height: 1.4;
}

#content-payload-2col-respons {
  	font-size: 1em;
	line-height: 1.4;
overflow: hidden;  /* tables ggf. abschneiden */ /*???*/
	margin: 0em auto;
	max-width: 51em;
}

/* Ausnahmen, Breite der Texte erfolgt dann mit #content-main */
#start #content-payload-2col-respons, 
#likedbooks #content-payload-2col-respons,
#specialarticles #content-payload-2col-respons,
#about #content-payload-2col-respons, 
#about_z #content-payload-2col-respons,
#about_b #content-payload-2col-respons,
#about_i #content-payload-2col-respons,
#about #content-payload-1col {
	max-width: 60em;
}


#about #content-payload-1col {
	max-width: 60em;
}

#content-payload-3col {
	font-size: 0.9em;
}

#content-payload-3col-marlef {
	font-size: 1em;
	line-height: 1.4;	
}

#content-payload-1col > h1, /* Seitentitel ganz nach oben */
#content-payload-2col > h1,
#content-payload-3col > h1,
#content-payload-2col-respons > h1,
#content-payload-3col-marlef > h1 {
	line-height: 1; /* ganz nach oben */
	margin-bottom: 0.5em;
}
#search h1 {
	display: none; /* Seitentitel Online-Shop ausblenden */
}


/*################################ Footer */

#area-blackfoot {
	clear:both;
	margin-top: 0;
	border-top: 1px solid #8c8c8c;
  	background: url("../pix/regal_blur_3600.jpg") #fff center bottom repeat;
  	background-size: 1800px 200px;  
	padding-top: 1.5em; /* Blur-Streifen */
}

#content-blackfoot {
	padding-left: 9em;
	font-size: 1em;
	color: #fff;
	overflow: hidden; 
	background-color: #444;
	border-top: 2px solid #F8DB3F; /* CUSTOM COLOR */
}

/********* Zentrierte Box fuer 404-Fehlermeldung */
#area-centerbox { 	
	position:absolute;
	height:24em; 
	width:40em;
	margin:-10em 0px 0px -20em;
	top: 50%; 
	left: 50%;
	text-align: left;
	padding: 0px;
	background-color: #fff;
	border: 1px solid #333;
	overflow: auto;
}

#area-centerbox h1 {
	background-color: #f5ba00; /* CUSTOM COLOR */
	color: #fff7d8; /* CUSTOM COLOR */
	color: #7c6800;  
	background-color: #F8DB3F; 	
	padding: 0.25em 0.5em;
	margin-bottom: 0.5em;
	font-size: 1.5em;
	text-align: center;
}

#area-centerbox a.closebutton {
	right: 0.5em;
	top: 0.5em;
}

#content-centerbox {
	padding: 0 2em;
	font-size: 1em;
	line-height: 1.5;
}

#content-centerbox li {
	margin: 0.5em 2em;
}

#content-centerbox p {
	margin: 0.5em 0;
}

#content-centerbox #bottomline {
	position: absolute; 
	bottom: 2em; 
	left: 2em;
	text-align: center;
}


/**************** Skiplinks ***************/
.hide {
	position: absolute;
	left: -9999px;
	top: -9999px;
	display: inline;
	width: 0;
	height: 0;
	font-size: 1em;
	text-align: center;
}
.tab:focus, .tab:active {
	position: absolute;
	left: 9999px;
	top: 9999px;
	width: 9em;
	height: auto;
	padding: 1px 0;
	background-color: #fff;
	color: #000;
	border: 1px solid #000;
}

.startalert {
	font-size: 1.5em;
	font-family: courier, monospace;
	text-align: center;
 	font-weight: bold;  
	color: #c00;
}

/************** Mosaik auf Startseite und "Lesen mit Herz" **************/
#mwrapper {
	position: relative; /* wg buttons */
	margin: 0 auto; 
	margin-bottom: 1em;
	max-width: 60em;
	overflow: hidden; /* scrollbar verhindern bei Slide */
/*  border: 1px solid red;  */
}

#mosaik {
	position: relative;
	max-width: 900px; 
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
	font-size: 1em;
	background-color: #fff;
}

#mosaik .card {	
	position: relative; /* wg. banderole */
	display: inline-block;	
	width: 200px;
	height: 280px;
 	margin: 0 2px 12px 2px; /* Rand so schmal, dass 4 cards bei 1280px */
  	background-repeat: no-repeat; 
  	background-position: center center; 
	background-size: auto 280px;
	line-height: 1;
}

#likedbooks #mosaik .card,
#specialarticles #mosaik .card {	
 	border-bottom: 10px solid #f8d35d;  /* CUSTOM COLOR */
}

/* Beschriftungen Karte */
#mosaik .card .head,
#mosaik .card .canceled,
#mosaik .card .tophint,
#mosaik .card .banderole {
 	position: absolute;
	padding: 0.2em 0.5em; 
	text-align: center;
	color: #000;
	background-color: #F8DB3F;  /* CUSTOM COLOR */	
	border-bottom: 1px solid #888;
	font-size: 0.8em; 
}

#mosaik .card .head {
 	top: 1em; left: 0; right: 0;
}

#mosaik .card .canceled {
 	top: 2.75em; right: 0; left: 0;
	color: #fff;
	background-color: #c00;
 	transform: rotate(355deg); 
	border: 1px solid #fff;
	font-weight: 800;	
}

#mosaik .card .tophint {
 	left: 0;
	bottom: 0em;  
	color: #fff;
	background-color: #c00;
 	transform: rotate(355deg); 
	border: 1px solid #fff;
	font-weight: 800;	
	z-index: 30;
}

#start #mosaik .card .tophint {
	bottom: 2.75em;  
}

#likedbooks #mosaik .card .tophint,
#specialarticles #mosaik .card .tophint {
	bottom: 0em;  
}

#mosaik .card .tophint.stopper {
	background-color: #c00;
}

#mosaik .card .tophint.release {
	background-color: #4459b3;
}

#mosaik .card .banderole {
	bottom: 1em; left:0; right:0;
	text-align: left;
}

#mosaik .card .banderole .straight {
	font-weight: bold; 
}

#mosaik .card .banderole .link {
	float: right;
 	padding-right: 0.2em; 
	font-weight: normal;
}

#mosaik .card .badge {
 	position: absolute;
 	top: 0; left: 0;
	padding: 0 0.5em;
	color: #fff;
	background-color: #c00; 
 	font-size: 1em;
	line-height: 2.5;
	font-weight: 800;	
	border-radius: 50%;
	border: 1px solid #fff;
	transform: rotate(350deg); 
}
#mosaik .card .badge.smaller {
 	font-size: 0.8em; 
}

#mosaik .card img { 
	width: 200px;
	height: 280px;
 	border: 0;
}

#mwrapper #pageswitch-l,
#mwrapper #pageswitch-r {
	position: absolute;
  /* position: fixed;	  */
	top: 42%;
/* top: 5em;	 */
	font-size: 2.5em;
	background: linear-gradient(to bottom, #efefef, #ccc);
	padding: 0.25em 0;
	opacity: 0.75; 
 	border: 2px solid #fff; 
	min-width: 0.75em; /* fallback iconfont */
}
#mwrapper #pageswitch-l {
	left: 0;
	border-radius: 50% 0 0 50%;
}
#mwrapper #pageswitch-r {
	right: 0; 
	border-radius: 0 50% 50% 0;
}

#mwrapper #pageswitch-l a::before { /* icofont-curved-left */
	font-family: "IcoFont";
	content: "\ea74";
}

#mwrapper #pageswitch-r a::before { /* icofont-curved-right */
	font-family: "IcoFont";
  	content: "\ea75";
}

#mwrapper #pageswitch-l a,
#mwrapper #pageswitch-r a {
	color: #000;
	text-decoration: none;
}
#mwrapper #pageswitch-l a:hover,
#mwrapper #pageswitch-r a:hover {
	color: #7b850e; 
}


/******* Auswahlanzeige Dots ************/
#mosdotswitch {
	text-align: center;
	margin-top: 1em;
}
#mosdotswitch a, 
#mosdotswitch .thispage {
	display: inline-block;
	height: 10px;
	width: 10px;
	border-radius: 5px;
 	text-decoration: none; 
 	margin: 0.4em;
}
#mosdotswitch a {
	background-color: #7b859e;
}
#mosdotswitch a:hover {
	background-color: #aaa;
}
#mosdotswitch .thispage {
	background-color: #F8CB37; /* CUSTOM COLOR */
}
#mosdotswitch ul {
	margin: 0 0.5em;
}
#mosdotswitch li {
	display: inline;
	list-style-type: none;
	margin: 0;
}

/******** Anzeigemodus Galerie **************/
#mosaik-gal {
	position: relative;
	max-width: 900px; 
	text-align: center;
	overflow: hidden;
	font-size: 1em;
	margin-top: 1em;
}

#mosaik-gal .card-gal {	
	position: relative; 
	display: inline-block;	
	width: 150px;
	height: 250px;
	margin: 0 5px 16px 5px;
	background: #fff no-repeat center top;	
 	background-size: auto 150px; /* Größe Image */
	line-height: 1;	
}

#mosaik-gal .card-gal img { 
	width: 150px;
	height: 250px;
 	border: 0;
}

#mosaik-gal .card-gal .title {	
	display: block;
 	position: absolute;
 	top: 11em; 	
 	text-align: center;
 	width: 100%;
	font-size: 0.9em;
}

#mosaik-gal .card-gal .price {	
	display: block;
 	position: absolute;
 	top: 9em; right: 1em;
	color: #600;
	font-size: 0.8em;
	font-weight: bold; 
	padding: 5px 10px;
	background-color: #fff; 
	border: 1px solid #000;
}


#mosaik-gal .card-gal .price sup {	
	font-weight: normal; 
	color: #555;
}

#mosaik-gal .card-gal .edition {	
	display: block;
 	position: absolute;
 	top: 7em; right: 1em;
	padding: 2px 4px;
	background-color: #fff;
	font-size: 0.8em;
	color: #555;
	border: 1px solid #555;
}

#mosaik-gal .card-gal .neubanner,
#mosaik-gal .card-gal .releasebanner,
#mosaik-gal .card-gal .alertbanner,
#mosaik-gal .card-gal .ticketbanner {
	display: block;
 	position: absolute;
 	top: 0.5em; left: 0em;
	padding: 2px 4px;
	font-size: 0.8em;
	color: #fff;
	transform: rotate(350deg);
	border: 1px solid #fff;
	text-shadow: 0 0 8px #fff; 	
}
#mosaik-gal .card-gal .neubanner {
	background-color: #080; /* grün */
}
#mosaik-gal .card-gal .releasebanner {
	background-color: #c00; /* rot */
}
#mosaik-gal .card-gal .ticketbanner {
	background-color: #4459b3; /* blau */
}
#mosaik-gal .card-gal .infobanner {
	display: block;
 	position: absolute;
 	top: 0.5em; left: 0em;
	padding: 0px;
	font-size: 1.5em;
	color: #0273be;
	background-color: #fff;
}
#mosaik-gal .card-gal .alertbanner {
	border-width: 0;
	background-color: #fff;
}
#mosaik-gal .card-gal .alertbanner::before {
	font-family: "IcoFont";
	font-size: 2em;
	content: "\f026"; /* icofont-warning */ 
	color: #c00;
}

/**************** Seitenspalten links/rechts ***************/
 .sidebar {
	font-size: 1em;  /* Workaround FireFox Webfont */
	line-height: 1.25; /* Workaround FireFox Webfont  */
}

.sidebar ul { 
	width: 12em;
	list-style-type: none;
} 

.sidebar li.framebox { 
	font-size: 1.1em;
	background-color: #fff7d8; /* CUSTOM COLOR */
	margin: 1em 0; 
	overflow: hidden;
 } 

.sidebar li.framebox h3.head {
	padding: 0.5em;	
	font-size: 1em; 	
	color: #6F5B00; /* CUSTOM COLOR */
	border-top: 4px solid #F9D656; /* CUSTOM COLOR */
}

.sidebar li.framebox h3.head.narrow {
	margin: 0;	
}

.sidebar li.framebox .content { 
	padding: 0 0.5em 0.5em 0.5em;
	font-size: 0.9em;
/* font-size: 1em;  */ /* TEST */	
	color: #555;
} 

.sidebar li.framebox .content ul,    
.sidebar li.framebox .content p { /* p einfach */  
	margin: 0;
}

.sidebar li.framebox .content p ~ p {  /* p mehrfach */
	margin: 0.5em 0 0 0;
}

.sidebar li.framebox .content strong { 
	font-family: "Roboto Regular", Arial, Helvetica, sans-serif; /* Webfont */
	font-weight: 400;
	color: #9c8800; /* CUSTOM COLOR */
	background-color: #FFE88C;  /* CUSTOM COLOR */
} 

/*TEST*/
.sidebar li.framebox .content li.straight { 
	color: #000;
	background-color: #fff;  
	padding: 0.5em 0em;
	border-top: 1px solid #555;
	border-bottom: 1px solid #555;
} 

.sidebar li.framebox .content h1,
.sidebar li.framebox .content h2,
.sidebar li.framebox .content h3,
.sidebar li.framebox .content h4 {
	font-size: 1.0em;
	margin-bottom: 0.25em;
} 

/* Box Veranstaltungstermine */
.sidebar li#box-aktevents .content li {
	line-height: 1.25;  
	margin-bottom: 0.3em;
}

/* Die Linklisten */
.sidebar ul ul {
	width: auto; 
}

.sidebar li li {
	margin-bottom: 0.5em;
	margin-left: 0em;
}

.sidebar .link-noprint {
	font-size: 0.9em;
}

.sidebar a.closebutton {
	display: none;
}

/****** Bannerbar links oder unten darstellen ***********/
#show-banner-left {
	display: block;
}
#show-banner-bottom {
	display: none;
}

.show-button-mobil {
	display: block;
}
.show-button-desktop {
	display: none;
}

/* Liste der Link-Banner */
.bannerbar ul { 
	list-style-type: none;
} 
.bannerbar li { 
	list-style-type: none;
	margin: 0.5em 0;
	border-bottom: 2px solid #F9D656;  /* CUSTOM COLOR */	
}
.bannerbar li .legend {
/* 	font-size: 0.75em; */
font-size: 0.9em;
	white-space: nowrap;
	padding: 0 0 0.5em 0.5em;
}

.bannerbar li.but {
	margin-top: 1.5em;
	border: 0;
}	

/******* Box fuer Buchtipp oder Veranstaltung */

.booktipp {
	position: relative; /* wg. tocart */
 	padding: 0.5em 1em; 	 
	overflow: hidden;	/* am ende des divs muss ge-clear-t werden! */
	margin: 1em auto; 	/* horizontal zentriert */
	border-width: 3px;
	border-style: solid;
	border-radius: 10px; 
	border-top-color: #89a;	
	border-left-color: #fff;	
	border-right-color: #fff;	
	border-bottom-color: #fff;	
}

#partner .booktipp {
	margin-bottom: 2em;
}

.booktipp.extend { /* farbig verstärkt */
}

.booktipp h2.title {
	font-size: 1.45em;
	color: #567;
}

.booktipp h2.author {
	font-size: 1.3em;
	color: #567;
}

.booktipp h3.subtitle {
	font-size: 1.1em;
	color: #567;
}

.booktipp .subsubtitle {
	margin-bottom: 1em;
}

.booktipp h2.eventauthor {
	color: #567;
	font-size: 1.45em;
}

.booktipp h2.eventtitle {
	color: #567;
	font-size: 1.3em;
}

.booktipp h3.eventsubtitle {
	color: #567;
	font-size: 1.2em;
}
.booktipp h3.eventsubtitle a{
	color: #567;
}

.booktipp h2.title a, 
.booktipp h2.eventauthor a {
	text-decoration: none; 
	color: #567;
}

/* Markierung als Link */
.booktipp h2.title a::after, 
.booktipp h2.eventauthor a::after {
	font-family: "IcoFont";
	content: "\eabc"; /* icofont-square-right */ 
	margin-left: 0.5em;
	font-size: 0.75em;
	text-decoration: none;
}

.booktipp h2.title a:hover,
.booktipp h2.title a:active,
.booktipp h2.eventauthor a:hover,
.booktipp h2.eventauthor a:active {
	color: #8b95ae;
 	text-decoration: underline;  
}
.booktipp h2.title a:hover::after,
.booktipp h2.title a:active::after,
.booktipp h2.eventauthor a:hover::after,
.booktipp h2.eventauthor a:active::after {
	text-decoration: none; 
	display: inline-block; /* workaround for above */
}

.booktipp .header,
.booktipp .date {
	font-family:  "RobotoSlab Regular", Verdana, Arial, Helvetica, sans-serif; /* Webfont */
 	font-weight: normal;  
	color: #000;
}

.booktipp .header {
	font-size: 0.95em;
	margin: 0 0 0.5em 0;
}

.booktipp .date {
	font-size: 1em;
	margin-bottom: 0.5em;
}

.booktipp .date .straight {
	font-size: 1.5em;
	color: #000;
}

.booktipp .created {
	float: right; 
	color: currentcolor;
}

.booktipp .editor {
	font-style: italic; 
	font-size: 0.8em;
	margin-top: -0.5em;
}

.booktipp .flag,
.booktipp .flag-left {
	float: right;
	padding: 0.5em; 
	margin: 0 0 0.25em 1em;
	letter-spacing: 1px;
	color: #9c8800;  /* CUSTOM COLOR */
	background-color: #F8DB3F;  /* CUSTOM COLOR */	
	text-shadow: 0 0 8px #fff; 
}
.booktipp .flag-left {
	float: left;
	margin: 0 1em 0.25em 0;
}
 
.booktipp > .content {
	margin: 0.5em 0 0 0;
}

.booktipp .content h1,
.booktipp .content h2,
.booktipp .content h3,
.booktipp .content h4,
.booktipp .content h5 {
	color: #567;
}

.booktipp .content p {
	margin: 0 0 0.5em 0;
}

.booktipp .content p.opener {
	color: #000;
}

.booktipp .foot {
	font-size: 1em;
	color: #567;
 	margin: -0.5em 0 0.5em 0; 
 	line-height: 2.5; 
	clear: both; /* immer unter dem Cover */
}

.booktipp .foot .price {
	font-size: 1.2em;
	color: #600; 	
}

.booktipp .ordernr {
 	color: currentcolor; 	
}

.booktipp .links2ecs {
	margin: 0 0 1em 0;
}

.booktipp .linkbutton-noprint {
	float: right;
/* 	color: #333; */ /* mother immer schwarz */
}

.booktipp .hint {
	padding: 0.25em;
	margin: 0.25em 0;
	background-color: #f0f0f0;
}

.booktipp p.stockhint {
	border-top: 1em solid #fff; /* fallback  */ 
	padding: 0.5em;
	background-color: #eaeaea; 
	clear: both;
	overflow: hidden;
}

.banner,
.booktipp .neubanner,
.booktipp .releasebanner,
.booktipp .ticketbanner {
	display: inline-block;
	transform: rotate(355deg); 
	margin-right: 0.25em; 
	padding: 1px 4px;
	font-size: 0.9em;
	color: #fff;
	text-shadow: 0 0 8px #fff; 	
	background-color: #c00;
}
.booktipp .neubanner {
	background-color: #080; /* grün */
}
.booktipp .releasebanner {
	background-color: #c00; /* rot */
}
.booktipp .ticketbanner {
	background-color: #4459b3; /* blau */
}

.booktipp .infobanner {
	display: inline-block;
	padding: 0px;
	font-size: 1.25em;
	color: #0273be;
}

.booktipp p.nomargin {
	margin: 0;
}

.booktipp a {
	color: currentcolor;
}

.booktipp a:active,
.booktipp a:hover {
	color: #7b859e;
}

.booktipp .tickethint {
	position: relative; 
	top: -2em; 
	left: 12em; 
}

.booktipp .piclegend {
    display: inline-block;
	font-size: 0.75em;
	position: relative; 
	top: -0.5em;
	line-height: 1;
}

.booktipp .iconalert,
.booktipp .alert {
	background-color: #fff;
}
.booktipp .alert.transback {
	background: none;
}


/****** Box fuer Buchtipp gekauft */
#tocart {
	position: absolute;
	right: 2em;
	bottom: 3em;
	width: 21em;
	height: 5em;
	background-color: #fff;
	border: 3px #999 outset;
	padding: 1.5em;
	font-size: 1em; 
	color: #333;
	z-index: 11; 
}
#tocart #content {
	padding: 0.5em 0 1.5em 0em;
}

#tocart #content::before {
	font-family: "IcoFont";
	font-size: 1.25em;
	color: #080;
	content: "\eed7"; /* icofont-check-circled */
	padding-right: .5em;
}

.link-right {
	float: right;
	line-height: 2;
	padding-right: 1em;
}

/* Box mit Formular fuer Direktkauf */
#buydirect, 
#buycoupon {
	position: relative; /* wg. tocart */
}

/* Box mit Formular fuer Fundkiste */
#buyorphans {
	position: relative; /* wg. tocart */
}

/* Box fuer Fundkiste */
.orphanbox {
	border: 2px solid #99a;
  	padding: 1em 1em 0em;
 	background-color: #f8f8fe; 
 	margin-bottom: 1em;
 	margin-top: 0;
	height: auto !important; /* moderne Browser  */  
	height: 20em; /* NSIE */ 	
	max-height: 20em;
	overflow: auto;  	
}
.orphanbox .linkbutton-noprint {
	line-height: 2;
	font-size: 0.9em;
	margin-right: 0.5em;
}

/*  Box Overlay-Info */
#overlay-info {
	position: fixed;  /* Lightbox */
	padding: 1em 1em 0.5em;	
	left: 50%; /* zentriert ... */	
	top: 50%;
/* 
	-webkit-transform: translate(-50%, -50%);  
	-moz-transform: translate(-50%, -50%);  
	-ms-transform: translate(-50%, -50%);  
 */
	transform: translate(-50%, -50%);
	max-width: 25em;
	font-size: 1em; 	 
	color: #000;
	line-height: 1.4;
	border: 3px solid #f5ba00; /* CUSTOM COLOR */
	background-color: #fff;
	z-index: 55;
}	 	

#overlay-info .straight {
	color: #567;
}

#overlay-info::before {
	position: absolute;
	top: 0;
	left: 0.25em;
	font-size: 2em;
	color: #0273be;
	font-family: "IcoFont";
	content: "\ef4f"; /* icofont-info-square */
}

/******** Box fuer Suchergebnis Buchtipp, Infobox, etc. */
.searchtipp {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
  	margin: 0 0 1em 0;
	background-color: #f3f3f3; 
	border: 1px solid #89a; 
	margin-top: 1em;
	margin-right: 0.5em;
}

.searchtipp.long {
	overflow: auto;
	max-height: 30em;
}

.searchtipp h2 {
	font-size: 1.0em; 
	padding: 0.5em 1em 0.5em 0.5em; 
	color: #567;
	display: inline-block; 
}

.searchtipp .content {
	font-size: 1em; 
	padding: 0 1em 0.5em 1em;
}

/* Link-Ausnahme*/
.searchtipp a {
	hyphens: auto;
}

.searchtipp .infoicon {
	display: inline-block;
	font-size: 1.75em;
	color: #0273be;
	margin-left: 0.25em; 
}
.searchtipp .infoicon::before {
	font-family: "IcoFont";
	content: "\ef4f"; /* icofont-info-square */
}
.searchtipp .infoicon:hover {
	color: #2293de;
}

.searchtipp .item {
	float: left;
	margin: 0 1em 0.5em 0; 
}

.searchtipp .picholder {
	float: left; 
	margin: 0 0.5em 0.5em 0.5em;
}
	
.searchtipp img {
	border: 0;
}

/* Fahrradkurier */
.searchtipp.green {
	border: 1px solid #0EA87F;
	background-color: #eaefea; /* #e2f3e1 */
	max-width: 40em;
}
.searchtipp.green img { 
	float: right; 
	width: 75px;
	height:100px;
}	

/* Info GPSR */
.searchtipp.gpsr {
	background-color: #fff;
}
.searchtipp.gpsr h2 {
	padding: 0 0.5em; 
}
.searchtipp.gpsr .content {
	padding: 0 0.75em;
}
.searchtipp.gpsr .about {
	color: #567;
}

/* Geburtstag */
.searchtipp.gold {
 	 border: 2px solid #ccbb66; 
	 outline: 1px solid #aa9933;
}

/* Box für Hinweis auf signiertes Buch oder Veranstaltung */
.signedhintbox {
	display: inline-block;
	position: relative; /* wg. (c) */ 
	font-size: 1.0em; 
	background-color: #f3f3f3;
	padding: 0.5em 1em;
	border-left: 10px solid #f9d656; /* Stephanus-gelber Balken */
	max-width: 25em;
	margin: 0.5em 0;
}
.signedhintbox p:last-child {
	margin-bottom: 0;
	color: currentcolor;
}
.signedhintbox.event { 
	min-width: 20em;
	border-color: green;
}
/**
.signedhintbox.event a { 
	float: right;
border: 1px solid green;
}
**/

.eventrulesbox {
	font-size: 1.0em; 
	background-color: #fff;
	border: 1px solid #00f;
	padding: 0.5em 1em;
	max-width: 30em;
	margin: 0.5em 0;
}

.eventrulesbox h1, .eventrulesbox h2, .eventrulesbox h3, .eventrulesbox h4, .eventrulesbox h5 {
	color: #00f !important;
}

/* Blau hinterlegter Hinweis */
.bluebox {
	color: #fff;
	background-color: #00008B;
	padding: 2px 4px;
}

/***** Schalter zum Ein/Ausblenden einer Box via Javascript***********/
/* klappzeile underline off */
 a.switchline { 
  	text-decoration: none;	
}

a.switchline.on:hover,
a.switchline.on:active,
a.switchline.off:hover,
a.switchline.off:active {
 	text-decoration: underline;	
}

a.switchline.on::before,
a.switchline.off::before {
	font-family: "IcoFont";
 	font-size: 1.25em; 
	padding-right: 0.25em;
	display: inline-block;
 	text-decoration: none; 
}
a.switchline.on::before {
	content: "\ea67"; /* icofont-caret-down */ 
}
a.switchline.off::before {
	content: "\ea69"; /* icofont-caret-right */ 
}

/********* Generalschalter alles auf/zu */
#klapp-switch-all {
 	margin-left:   calc(100% - 5em); 
}
a#switch-all::before {
	font-family: "IcoFont";
	display: inline-block;
	text-decoration: none;
}
a#switch-all.on::before {
 	content: "\ea67"; /* icofont-caret-down */ 
}
a#switch-all.off::before {
 	content: "\ea69"; /* icofont-caret-right */   
}

.ebooklist {
	overflow: hidden;	/* am ende des divs muss ge-clear-t werden! */
}
.ebooklist .cover {
	float:left; 
	margin: 0 1em 1.5em 0;
}

/*Headline mit Abstand vertikal */
h2.freeline,
h3.freeline {
	margin-bottom: 1em;
}

/* Auflistung mit Links */
ul.storelist li {
 	margin-top: 0.2em; 
 	margin-bottom: 0.2em;
}

/******** Haupttitel Startseite */
.welcome {
	text-align: center;
	color: #555; /* CUSTOM COLOR */
	margin-top: 1em;
}	

#piccopy {
	font-size: 0.75em;
	padding: 0 2.5em 1em 2.5em;
}

/******* Zweispaltige Liste, zentriert */
ul.cent-2col {
	list-style-type: none;
	margin-top: 1em;
	padding: 0 0 20px 0;
	overflow: hidden;	/* am ende muss ge-clear-t werden! */
}

li.left-col {
	width: 10em;
	color: #567;
	float: left;
	margin: 0;
	padding: 0 1em 1em 0;
	text-align: right;
}

li.right-col {
	float: left;
	margin: 0;
	padding: 0 0 1em 0;
	width: 25em;
	text-align: left;
}

li.clr { /* Listenelement erzeugt ... */ 
	display: block;
	margin: 0;
	padding: 0;
	float: none;
} 

br.clr { /* ... neue Eintragszeile */
	clear: both; 
	width: 1px;
	font-size:1px;
	margin: 0;
	padding: 0;
	overflow:hidden;
}

/******** Sitemap ***********/

#sitemaplist {
	margin: 0 1em;
	font-size:1em;
}
#sitemaplist ul {
 	list-style-type: none;  
}
#sitemaplist li {
 	margin-bottom: 0.5em;  
}


/********* Elemente fuer Kopfbereich *******/
#addressbox-po {
	display: none;
}

/* Tag-Zeile */
#tagline { 
	position: absolute;
	font-size: 1em;
	right: 15px;
	top: 1.5em;
	text-align: right; 
	display: block;
	left: 324px; /* ab dem logo */	
	bottom: 2.5em;
	overflow: hidden;
	line-height: 1.25;
	white-space: nowrap;
}

#tagline h2,
#tagline h3 {
 	display: inline-block; 
	font-size: 1.1em;
	padding: 0.25em 0.5em;
	margin: 0;
	color: #9c8800;  /* CUSTOM COLOR */
	background-color: #fff8e0;  /* CUSTOM COLOR */	
 	border-top: 2px solid #F8DB3F; /* CUSTOM COLOR */	
 	border-bottom: 2px solid #F8DB3F;/* CUSTOM COLOR */	
}
#tagline h2 {
	font-size: 1.1em;
}
#tagline h3 {
	font-size: 0.8em;
	margin-left: 1em;
}
#tagline a:active h2,
#tagline a:hover h2,
#tagline a:active h3,
#tagline a:hover h3 {
	color: #7B859E; 
	background-color: #fff;
}

/* Banner am Firmenlogo */
#logobanner {
	display: block; 
	position: absolute;
	left: 1em; 
	top: 0.5em;
	transform: rotate(350deg);
	font-size: 0.75em;
	background-color: #c00;
	text-shadow: 0 0 8px #fff; 
	font-size: 1em;
}
#logobanner a {
	color: #fff;
	font-style: italic; 
	padding: 1px 10px;
}
#logobanner a:hover,
#logobanner a:active {
	background-color: #fff;
	color: #c00;
}

/* Infobox "Weiter" */
#closebutton-info a {
	display: inline-block;
	width: 75%;
	text-align: center;
}


.socialbanners {
	padding-top: 0.5em;
}

a.closebutton {
	position: absolute; 
	right: -0.5em;
	top: -0.5em;
}
a.closebutton::after {
	display: inline-block; /*?*/
	line-height: 1;
 	font-family: "IcoFont";
	content: "\eee4"; /* icofont-close */
 	font-size: 1em;
 	color: #fff; 
 	border-radius: 50%;
 	background-color: #000;
 	padding: 1px;
 	border: 1px solid #fff;
}
a.closebutton:hover::after,
a.closebutton:active::after {
 	font-weight: bold; 
	background-color: #666;
}


/******** iframe fuer buchkatalog-integration ********/
.inline {
	border: 0;
	width: 100%;
	height: 4000px;
	border: 0;
	overflow: auto;
	background: url("../pix/wait.gif") #fff 50% 20em no-repeat; 	
	z-index: 30; 
}

/******** iframe fuer TPC-Test *******/
#test-tpc {
	margin-top: -1em;
	border: 0;
	overflow: hidden;
	height: 2.5em;
	width: 90%; /* fallback */	
	width: calc(100% - 5em); /* abzueglich Breite des Hilfe-Links */
}

/******** iframe fuer OSM-integration ******** DEAKTIVIERT
.inline-map {
	width: 100%;
	height: 900px;
	border: 0;
	overflow: auto;
}
********/

/******** iframe fuer Video Youtube/Vimeo */
.tippyt {
	border: 0;
}

/******** Link als Button nicht druckbar ******/
.linkbutton-noprint a {
	color: #333 !important;
	text-decoration: none;
	white-space: nowrap;
	padding: 4px 12px;
	background: #ddd;
	background: linear-gradient(to bottom, #efefef, #ccc);
	border: 1px solid #555; 
	border-radius: 1em; 
	text-align: left;
  }

.linkbutton-noprint a:hover,
.linkbutton-noprint a:active {
	position: relative; left: 1px; top: 1px; 
 	color: #7b859e;
	text-decoration: none;
	background: #f8f8f8;
	border-color: #aaa;
}

.linkbutton-noprint a + a {
	margin-left: 1em !important;
}

/****** Kopfbereich beim Laden geschlossen (Spezialartikel)  *****/
.klapp-off { 
 	display: none;
} 

/******* Liste mit ausklappbaren Bereichen (FAQ, Kundenkontoarchiv) ********/
ul.klapplist {
	list-style-type: none;
}
ul.klapplist li {
 	margin: 0; 
}
ul.klapplist li h3 a {
 	font-size: 0.85em; 
	color: #545d73;

}
ul.klapplist li h3 a:hover,
ul.klapplist li h3 a:active {
	color: #697591;
	text-decoration: underline; 
}
ul.klapplist li h2 {
 	font-size: 1.2em; 
	margin-top: 0.75em;
}
ul.klapplist li div {
 	margin: 0 0 1em 1.25em; 
}

/******** Button fuer Formular *******/
button {
	position: relative; 
	color: #333;
	font-size: 1em;
	padding: 0em 1em; 
	background: #ddd;
	background: linear-gradient(to bottom, #efefef, #ccc);
 	border: 1px solid #555; 
 	border-radius: 1em; 
	text-align: center;
	height: 2em;
	white-space: nowrap;
	cursor: pointer;
}

button:hover,
button.big:hover {
	position: relative; left: 1px; top: 1px; 
 	color: #7b859e;
	background: #f8f8f8;
	border-color: #aaa;
}

button.wide.hi.busy:hover { /* Aufruf per JS nach Tastendruck */
	background: url("../pix/wait.gif") #f8f8f8 95% center no-repeat; 	
}

button.search::before { 
	font-family: "IcoFont";
	text-align: center;
	content: "\ed11"; /* icofont search-1 */
}

button.search {
	border-radius: 0;
/* 	border: 1px solid #333; */
}


button.wide {
	min-width: 20em;
}

button.hi {
	min-height: 2.5em;
	border-radius: 1.5em; 
}


.buttondescr {
	margin-left: 1em;
	white-space: nowrap;
}

button.distance,
button + button {
	margin-left: 1em !important;
}

/******** Merkliste, modifiziert table.order */
.wishlist {
	display: block;	
	position: relative; /* fuer Eselsohr */	
	margin-bottom: 0.5em;
	padding: 1em;
}

.theme-1,
.theme-1 .mycomment {
	background-color: #f0f0fb; 
	color: #574FAA !important;
}
.theme-2,
.theme-2 .mycomment {
	background-color: #f1f4ff; 
	color: #064ec1 !important; 
}
.theme-3,
.theme-3 .mycomment {
	background-color: #fff6e9; 
	color: #b00e0e !important; 
}
.theme-4,
.theme-4 .mycomment {
	background-color: #e7f4de; 
	color: #397113 !important; 
}
.theme-5,
.theme-5 .mycomment {
	background-color: #fff4ca; 
	color: #605610 !important; 
}
 
.theme-6,
.theme-6 .mycomment {
	background-color: #f7f3f2; 
	color: #1c1b1b !important; 
}

.themeselect {
	display: inline-block;
	border: 2px solid #000;
	border-color: currentcolor;
	min-width: 2em; 
	height: 1.5em;
	text-align: center;
}

.wishlist h1,
.wishlist h2,
.wishlist h2 a {
	color: currentcolor;	
	max-width: 40em; 
}

.wishlist small {
	color: #555;
}

.wishlist .result {
	display: inline-block;
	float: right;
	padding: 0 0.5em;
	margin: 1em 0 0 1em;
  	color: #080;
  	background-color: #fff; 
}

.wishlist table.order {
	padding: 3px;
	border: 2px solid currentcolor;	
	margin-bottom: 1em;
	margin-top: 0.5em;
}

.wishlist table.order tr.settings,
.wishlist table.order th {
	background-color: inherit;  
  	color: currentcolor; 	 

}

.wishlist table.order tr.zebrawhite {
	background-color: #F9F9FF;
}

.wishlist table.order tr.zebrablack {
	background-color: #eeeef4;
}

.wishlist .mycomment {
	background-color: #eee;
}

.wishlist::before { /* Eselsohr */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: currentcolor;
  border-right-color: #fff;
  border-left-color: #fff;
}

/******** Tabelle fuer Einkauf */
.scrollable-table {
	overflow-x: auto;
}

table.order {
	padding: 2px;
	border: 2px solid #ccc;
	min-width: 20em; 
	margin-bottom: 1em;
	line-height: 1.1;
	width: 100%; 
}

table.order tr.zebrawhite {
	background-color: #f9f9f9;
}

table.order tr.zebrablack{
	background-color: #eee;
}

table.order td.summe{
	text-align: right;
	border-top: 1px solid #777;
}

table.order td.settings {
	background-color: #d1d1d1;
}

table.order td.summeart{
	text-align: left;
	border-top: 1px solid #777;
}

table.order td.empty {
	padding: 3em 1em;
}

table.order th,
table.order td {
	vertical-align: top;
	text-align: left;
	padding: 0.5em;
color: #555;
}

table.order th{
	font-size: 0.75em;
	background-color: #d1d1d1;
	font-weight: normal;
	color: #555;
}

table.order td.l{
	text-align: left;
}

table.order td.c {
	text-align: center;
}

table.order td.r {
	text-align: right;
 	white-space: nowrap; 
}

table.order td.comment {
	text-align: right;
	vertical-align: top;
	font-size: 0.75em;
}

table.order td.cartbanner {
	background-color: #080; 
	color: #fff; 
	width: 100%; 
	padding: 0.25em;
	text-align: center; 
}

/*********** personal message */
table.order .mycomment {
	font-style: italic;
 	color: #574FAA; 
}

/* Formular fuer Kontaktdaten etc. */
form.order ul {
	list-style-type: none;  
	margin-bottom: 0; 
}

form.order li {
	padding: 0.25em 1em;
	margin-left: 0em;
}

form.order li.block {
	background-color : #f7f7f7;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #eee; 
	overflow: hidden; /* Workaround iPad */	
}

form.order li.commentblock {
	background-color : #f7f7f7;
	text-align: right;
	border-top: 1px solid #fff; 	
	border-bottom: 1px solid #eee; 
}

form.order li.darkblock {
	background-color : #eee;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #ddd;
	overflow: hidden; /* Workaround iPad */
}
/* Honeypot */
form.order li.darkblock.repeat {
	display: none;
}

form.order li.altblock {
	background-color : #eeeefa;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #ddd;
	overflow: hidden; /* Workaround iPad */
	border-left: 1px solid #669;
	border-right: 1px solid #669;
}

form.order li.buttonblock {
	position: relative; /* wg .stepnr */
	background-color : #eee;
	padding: 1em 1em 1em 10em;
	border-top: 1px solid #fff; 	
	border-bottom: 1px solid #ddd; 
}

form.order li.noblock {
	background-color : #fff;
	padding: 0 1em; 
}

form.order li.resultblock {
	background-color : #f8f8ff;
	padding: 1em 1em 1em 10em;
	border-top: 1px solid #fff; 	
	border-bottom: 1px solid #ddd; 
}

form.order input, 
form.order textarea,
form.order button, 
form.order select {
	margin: 0.5em 0; 
}

/*****  Formularfeld ********/
table.order input[type="text"],
form.order input[type="text"],
form.order input[type="email"],
form.order input[type="tel"],
form.order input[type="password"],
form.order textarea {
	border: 1px dotted #888;
	font-size: 1.1em;
	padding: 6px;
}

table.order input[type="text"],
form.order li.darkblock input[type="text"],
form.order li.darkblock input[type="email"],
form.order li.darkblock input[type="tel"],
form.order li.darkblock input[type="password"],
form.order li.darkblock textarea {
	box-shadow: 0px 0px 30px 5px #ddd;
}
form.order li.block input[type="text"],
form.order li.block input[type="email"],
form.order li.block input[type="tel"],
form.order li.block input[type="password"],
form.order li.block textarea {
	box-shadow: 0px 0px 30px 5px #e8e8e8;
}
form.order li.altblock input[type="text"],
form.order li.altblock input[type="email"],
form.order li.altblock input[type="tel"],
form.order li.altblock input[type="password"],
form.order li.altblock textarea {
	box-shadow: 0px 0px 30px 5px #dde;
}

form.order input.error,
form.order textarea.error,
form.order p.error,
form.order select.error {
	border: 2px solid #c00;
	box-shadow: 0px 0px 30px 5px #eaa !important;
}

form.order ul .comment {
	float: right;
	margin: 0 2em;
}

form.order h2.blocktitle {
	margin: 0 1em 0 0;	 
	font-size: 1.1em;
 	color: #669; 
}

/** CHANGED
form.order h3 {
	margin-right: 1em;
	font-size: 1.1em;
 	color: #669; 
}
**/

form.order label.right {
	padding-left: 0.5em;
	margin: 0.5em 0; 
}

form.order .nolabel.left,
form.order label.left {
	text-align: right;
	float: left;
	width: 8em;
	padding-right: 1em;
	margin-top: 0.75em;	
}

/*** Label vertikal anpasssen an text-input *****/
form.order label.left:has(+input[type="text"]),
form.order label.left:has(+input[type="email"]),
form.order label.left:has(+input[type="tel"]),
form.order label.left:has(+input[type="password"]) {
	padding-top: 4px;
	padding-bottom: 4px;
}

form.order .nolabel.radiobutton-left.left,
form.order label.radiobutton-left { /* Korrektur bei links von Radiobutton-Leiste  */
	margin-top: 0.2em;
}

form .buttonlabel {
	padding-right: 0.75em;
	white-space: nowrap;
	line-height: 2;	
}

form.order .inputline {
	display: inline;
	white-space: nowrap;
}

form.order .klapp:link,
form.order .klapp:visited {
 	text-decoration: underline; 
}

form.order .stepnr {
	position: absolute;
	top: 0em;
	left: 1em;
	font-size: 0.9em;
	color: #669;
}

form.order .erroralert {
	margin-left: 1em;
	cursor: pointer;
	color: #c00;
}

/******** Link zum Aendern der Angaben */
.changelink-l {
	text-align: left;
}
.changelink-r {
	text-align: right;
}

.changelink-c {
	text-align: center;
}

/******* hauseigener Newsletter, Titel */ 
.newsletter {
	position: relative; /* fuer Eselsohr */
	display: inline;
	padding: 0.25em 1em 0.25em 0.5em;
	font-size: 1.5em;
	color: #9c8800;  /* CUSTOM COLOR */
	background-color: #F8DB3F;  /* CUSTOM COLOR */	
}

.newsletter::before { /* Eselsohr */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #C8C8C8 #fff;
}


/******* AGB/Datenschutz/ueber uns */
#content-main {
	overflow: hidden;
	margin: 0em auto;
	max-width: 51em;
}
#content-main > p {
	margin: 0 0 0.5em 0;
}
#content-main > h1,
#content-main > h2,
#content-main > h3,
#content-main > h4 {
	margin: 1em 0 0 0;
}

/** Links ggf. einfärben */
#content-main span > a { 
 	color: currentcolor;
}

/******** AGB bei Bestellvorgang */
.agb {
	font-size: 1em; /*0,8*/
 	padding: 1em;
 	border: 1px solid #999;
    border-bottom: 2px solid #999;
 	background-color: #f7f7fa; 
   	min-height: 10em;
	height: auto !important;  /* für moderne Browser */
	height: 10em;  /* fuer den IE */	
	max-height: 30em;
	overflow: auto;
	margin-bottom: 1em; 
}

.agb ul {
	list-style-type: none;
}

/* Datenschutzerklaerung (Textauszuege)*/
.dataprotection {
	margin-bottom: 1em;
}

.dataprotection a {
	color: #669;
}

.dataprotection .content {
 	font-size: 0.9em; 
	color: #669;
	background-color: #f9f9ff;
	border: 1px dotted #669; 
	padding: 0.5em 0.5em 0 0.5em; 
	min-height: 5em;
	height: auto !important;  /* für moderne Browser */
	height: 10em;  /* fuer den IE */	
	max-height: 10em;
	overflow: auto;
}

/******* Bild mit Beschreibung bei Nachlese */
figure.reviewbox {
	margin: 3em auto;
	padding: 1em;
	font-family: courier, monospace;
    font-size: 1.1em;
    color: #555;	/* dujkelblau */
	background-color: #fff;
  	border: 1px solid #ddd;  
	box-shadow: 2px 2px 13px 2px #ccc;
}
figure.reviewbox:nth-child(odd){
 	transform: rotate(358deg); 	
}
figure.reviewbox:nth-child(even){
 	transform: rotate(2deg); 	
}

/* Box mit Warnung */
.alertbox {
	max-width: 45em;
	font-size: 1em;
	padding: 1em;
	background-color: #fff;
	border: 3px solid #c00;
	margin: 1em 0;
}
.alertbox h3.alert {
	color: #c00;
}


/* Fixer Balken mit Alert oder Info an Seitenfuß */
#fixbar-alert,
#fixbar-info {
	position: fixed;	
	bottom: 0;
	left: 0;
	width: 100%;
	opacity: 0.9; 
	z-index: 33;
}
#fixbar-alert {
/* 	background-color: #d33; */
	background-color: #b00;
	font-size: 1em;
}
#fixbar-info {
	background-color: #333; 
	border-top: 1px solid #fff;
	font-size: 0.9em;
}
#fixbar-alert p,
#fixbar-info p {
	color: #fff;
	padding: 0.5em 2em 0em 2em;
	margin-bottom: 0.5em;
}
#fixbar-alert .closebutton {
	right: 0.25em;
	top: 0;
}

#fixbar-alert a,
#fixbar-info a {
	color: currentcolor;
}
#fixbar-info .okbutton a {
	border: 1px solid #fff;
	margin-left: 1em;
	background-color: #070;
	padding: 0 0.25em;
	text-decoration: none;
	cursor: pointer; 
}
#fixbar-info .okbutton a:hover {
	background-color: #6a6;
}

#fixbar-alert p::before {
	font-family: "IcoFont";
	color: #fff;
	content: "\f026"; /* icofont-warning */ 
	padding-right: 5px;
}

/******** Ausgabe der E-Mails */
.orderemail {
	font-family: courier, monospace;
	border: 1px solid #999; 
	padding: 1em 2em;
	width: 40em; /* 55em */
	margin: 1em auto;
}

/******** Debug-Ausgabe der E-Mails */
.debugemail {
	position: relative; /* wg. closebutton */
	border: 2px dotted #f99; 
	background-color: #fee;
	padding: 1em;
	margin: 1em;
}

/******** Debugausgabe von variablen, wenn $test gesetzt */
#debugbox {
	position: fixed;
	right: 0;
	top: 0;
	border: 4px groove #c00;
	background-color: #fff;
	min-width: 2em; 
	min-height: 2em;
	z-index: 60;
	}	
#debugbox h4 {
	font-size: 0.9em;
	margin-right: 1em;
}
#debugbox pre {
	padding: 0.5em;	
	height: auto !important;  /* für moderne Browser */
	height: 15em;  /* fuer den IE */	
	max-height: 15em;
	overflow: auto;
	font-size: 0.9em;
}

/**** pretix-Ticketstore */
.pretix-widget {
	background-color: #f3f3f3; 
	border-width: 0; 
	border-left: 10px solid #4459b3;
	padding-top: 0.5em;
}

.pretix-widget-action button { /* mehr Kontrast wg. WCAG */
	color: #fff;
 	opacity: 1 !important; 
 }
 	
.pretix-widget input[type=number] {  /* mehr Kontrast wg. WCAG */
 	border: 1px dotted #888;	
}	

.pretix-widget-alert-holder .pretix-widget-alert-icon { /* Alert-Icon  ausblenden */ 
	display: none;
}

.pretix-widget button { /* Buttons gerundet */
	border-radius: 1em;
	padding: 0;
	font-size: 18px;
}

/*******************************  E Y E  C A N D Y  via CSS3 **************************/
 
/******* Radio-Button, Checkbox eigenes Layout, skaliert mit font-size  ************************/
input[type="radio"],
input[type="checkbox"] {
	width: 1em;
	font-size: inherit;
	margin: 0;
	transform: translateX(-9999px);
}

input[type="radio"] + label,
input[type="checkbox"] + label {
	position: relative;
	padding-left: 0.5em;
 	line-height: 1.4; 
}

/* Radiobox */
input[type="radio"] + label::before,
input[type="radio"] + label::after,
input[type="radio"]:checked + label::before,
input[type="radio"]:checked + label::after {
	position: absolute;
	content: '';
	left: -1em;
	top: 0.2em;
	width: 1em;
	height: 1em;
	margin: 0;
	border:none;
	border-radius: 50%;
}
input[type="radio"] + label::before {
	background-color: #67738e;	 	
}
input[type="radio"] + label::after {
 	background-color: #fff;
 	transform: scale(0.9); 
}
input[type="radio"]:checked + label::before {
	background-color: #67738e;	
}
input[type="radio"]:checked + label::after {
 	background-color: #fff;
	transform: scale(0.3);
}
input[type="radio"]:disabled + label::before {
	background-color: #a7b3ce;
}
input[type="radio"]:checked:disabled + label::before {
	background-color: #a7b3ce;
}

/* Checkbox */
input[type="checkbox"] + label::before,
input[type="checkbox"] + label::after,
input[type="checkbox"]:checked + label::before,
input[type="checkbox"]:checked + label::after {
	position: absolute;
	content: '';
	left: -1em;
	top: 0.2em;
	width: 1em;
	height: 1em;
	margin: 0;
	border:none;
	border-radius: 10%;
}
input[type="checkbox"] + label::before {
	background-color: #67738e;	
}
input[type="checkbox"] + label::after {
	background-color: #fff;
	transform: scale(0.9);
}
input[type="checkbox"]:checked + label::before {
	background-color: #67738e;
}
input[type="checkbox"]:checked + label::after {
	content: "\2713";
	background-color: #67738e;
	color: #fff;
	text-align: center;
	line-height: 1;
}
input[type="checkbox"]:disabled + label::before {
	background-color: #a7b3ce;
}
input[type="checkbox"]:checked:disabled + label::before,
input[type="checkbox"]:checked:disabled + label::after {
	background-color: #a7b3ce;
}
/******** Ende Radiobutton, checkbox *********/

select {
	padding: 3px 25px 3px 10px;
	border: 1px solid #567;
	color: #555;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #eee; /* fallback */
	background: url("../pix/klapp_select.png") right center no-repeat, linear-gradient(to bottom, #efefef, #ccc);	
	border-radius: 0.5em;
}
select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

select:hover {
 	color: #7b859e;
 	cursor: pointer; 
}

option {
	color: #333;
}

textarea,
input[type="password"],
input[type="text"] {
	border: 1px solid #567;
}
/*** selektierter Input */
textarea:focus,
input[type="password"]:focus,
input[type="text"]:focus {
	border-color: #00f;
}

/* Hinweisbox mit Schatten */
#area-centerbox,
#tocart { 
	box-shadow: 5px 5px 20px -5px rgba(0,0,0,0.58);
}

/* Banner, Overlays etc. mit Schatten */
#overlay-info,
#tagline h2,
#tagline h3, 
#debugbox,
#logobanner {
	box-shadow: 1px 1px 10px 1px #555;
}

/****************** Overlays Slide-in (vertikal) ********************/
/** not used **/
@-webkit-keyframes slideInFromTop { 
	from {top: -50%; left: 50%;}
	to {top: 50%; left: 50%;}
}
@keyframes slideInFromTop { 
	from {top: -50%; left: 50%;}
	to {top: 50%; left: 50%;}
}

@-webkit-keyframes slideInFromBottom { 
	from {top: 100%; left: 50%;}
	to {top: 50%; left: 50%;}  
 }
@keyframes slideInFromBottom {
	from {top: 100%; left: 50%;}
	to {top: 50%; left: 50%;}  
}

/****************** Overlays scaleIn ********************/
/* not used, "jump" issue in safari! */ 
@webkit-keyframes scaleIn {
	from {-webkit-transform: translate(-50%, -50%) scale(0);}
 	to {-webkit-transform: translate(-50%, -50%) scale(1);}   
}

@keyframes scaleIn {
	from {transform: translate(-50%, -50%) scale(0);}
 	to {transform: translate(-50%, -50%); scale(1);}   
}

/****************** Overlays fadeIn ********************/
@webkit-keyframes fadeIn {
	from {-webkit-transform: opacity: 0;}
 	to {-webkit-transform: opacity: 1;}   
}

@keyframes fadeIn {
	from {opacity: 0;}
 	to {opacity: 1;}   
}

#overlay-info,
#overlay {
   	-webkit-animation: 0.6s ease-out 0s 1 fadeIn;	 
   	animation: 0.6s ease-out 0s 1 fadeIn;	 	
}

/****************** Overlays dimmIn ********************/
@webkit-keyframes dimmIn {
	from {background-color: rgba(0,0,0,0);}
	to {background-color: rgba(0,0,0,0.4);}
}	
@keyframes dimmIn {
	from {background-color: rgba(0,0,0,0);}
	to {background-color: rgba(0,0,0,0.4);}
}

#overlay-dimmer {
	-webkit-animation: 0.4s ease-out 0s 1 dimmIn;
   	animation: 0.4s ease-out 0s 1 dimmIn;
}

/****************** Slide-in (horizontal) ********************/
/* siehe https://stackoverflow.com/questions/16989585/css-3-slide-in-from-left-transition */
.slide-in {
    animation: 0.6s ease-out 0s slide-in forwards;
	-webkit-animation: 0.6s ease-out 0s slide-in forwards;
}

@keyframes slide-in {
   	100% { transform: translateX(0%); }
}
@-webkit-keyframes slide-in {
   	100% { -webkit-transform: translateX(0%); }
}
.slide-in.from-left {
	transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
}
.slide-in.from-right {
	transform: translateX(100%);
	-webkit-transform: translateX(100%);
}

/************* sline-on (vertikal) ********************/
.slide-on {
    animation: 0.6s ease-out 0s slide-on forwards;
	-webkit-animation: 0.6s ease-out 0s slide-on forwards;
}

@keyframes slide-on {
   	100% { transform: translateY(0%); }
}
@-webkit-keyframes slide-on {
   	100% { -webkit-transform: translateY(0%); }
}
.slide-on.from-top {
	transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
}
.slide-on.from-bottom {
	transform: translateY(100%);
	-webkit-transform: translateY(100%);
}

/************* slide-out (horizontal) ******************** DEAKTIVIERT
.slide-out {
	animation: 0.2s ease-out 0s slide-out reverse;
	-webkit-animation: 0.2s ease-out 0s slide-out reverse;
}

@keyframes slide-out {
   	100% { transform: translateX(0%); }
}
@-webkit-keyframes slide-out {
   	100% { -webkit-transform: translateX(0%); }
}
.slide-out.to-left {
	transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
}
.slide-out.to-right {
	transform: translateX(100%);
	-webkit-transform: translateX(100%);
}
***********************/
/* EOF */