/* Desktop CSS für www.dieartothek.de 2026 / 01 */

@font-face { 
	font-family: "Open Sans"; 
	src: url("OpenSans-Light.ttf"); 
}
@font-face { 
	font-family: "Amatic"; 
	src: url("AmaticSC-Regular.ttf"); 
}
@font-face { 
	font-family: "Didact Gothic"; 
	src: url("DidactGothic-Regular.ttf"); 
}
@font-face { 
	font-family: "Nunito Sans"; 
	src: url("NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf"); 
}

/* ======== General ============ */

:root {
	/* colors */
	--bg-dark: hsl(60 20% 90%);
	--bg: hsl(60 20% 96%);
	--bg-light: hsl(60 20% 100%);
	
	--text-light: hsl(0 0 40%);
	--text: hsl(0 0 20%);
	--text-strong: hsl(0 0% 0%);
	
	--my-orange: hsl(30 100% 46%);
	--my-pink: hsl(310 94% 48%);
	--my-cyan: hsl(188 90% 37%);
	
	--alert: hsl(0 60% 40%);
	--success: hsl(120 60% 40%);
	
	/* panel margins, paddings & corners */
	--pnl-margin: 1.05rem;
	--pnl-padding: .5rem;
	--pnl-corners: .5rem;
	
	/* button margins, paddings & corners */
	--btn-corners: .25rem;
}

html {
	min-height: 48rem;
	height: 100%;
	min-width: 80rem;
	width: 100%;
}

body	{
	font-family: Nunito Sans, sans-serif;
	margin: 0;
	padding: 0;
	height: calc(100% - 2px);
	background-color: var(--bg-dark);
	border-top: 2px solid var(--my-orange);
	color: var(--text);
	line-height: 1.5;
}

img	{
	border: none;
}

table, th, td	{
border-bottom: 0px solid #AAAAAA;
border-collapse:collapse;
}

ul, li {
	margin-left: 0px;	
	border-bottom: 1px solid #D5D5D5;
	list-style-type: none;	
}

h1, h2, h3, h4	{
	font-family: 'Open Sans', sans-serif;
	line-height: 130%;
	padding-top: 0;
	margin-top: 0;
	font-weight: lighter;		
}

h1 {
	font-size: 1.9rem;
	color: var(--text-strong);
}
h2	{
	font-size: 1.4rem;
	color: var(--text-strong);
}
h3	{
	font-size: 1.1rem;
	color: var(--text-strong);
}
h4	{
	font-size: 1rem;
	color: var(--text-strong);
}

a:link { color: #EC8000; text-decoration: none; } 
a:visited { color: #EC8000; text-decoration: none; } 
a:hover { color: #000; text-decoration: none; } 
a:active { color: #000; text-decoration: none; } 

#linkMenu { color: #555; text-decoration: none; }
#linkMenu:hover { color: #000000; text-decoration: none; }

.mini_lightbox {
	display: none;
	position: absolute;
	margin: auto;
	padding: 25px;
	border: 1px solid #ccc;
	background-color: white;
	z-index:1002;
	overflow: auto;
}
#close_lightbox {
	float: right;
	position: absolute;
	right: 25px;
	bottom: 25px;
}

/* ======== Main Div Framework Formats ============ */

#maindiv	{	
	float: left;
	width: 100%;
	min-height: calc(100vh - 9rem - 2px);
}

#admin_content	{
	display: block;
	float: left;
	min-height: calc(100vh - 14.5rem - 2px);
	width: calc(100% - var(--pnl-margin));
	margin: 0;
	padding: var(--pnl-margin) 0 0 var(--pnl-margin);
	background-color: var(--bg);
	border-radius: var(--pnl-corners);
}

/* ============ Action Buttons =================== */

.buttonNew1 {
	display: inline-block;
	padding: .5rem 1rem;
	margin: .5rem 1rem;
	background: #333;
	color: #fff;
	border: none;
	cursor: pointer;
	text-align: center;
	border-radius: var(--btn-corners);
	font-size: .9rem;
	font-family: Nunito Sans, sans-serif;
}

.smallButton {
	width: 5rem;
}
.mediumButton {
	width: 7rem;
}
.largeButton {
	width: 10rem;
}
.xlButton {
	width: 14rem;
}

/* ============= Form Formats =====================*/

.dataFormBlock {
	width: 24rem;
	display: block;
	float: left;
	margin: .5rem;
}
.dataFormBlockw {
	width: 37rem;
	display: block;
	float: left;
	margin: .5rem;
}
.dataFormBlockW {
	width: 49rem;
	display: block;
	float: left;
	margin: .5rem;
}
.dataFormBlockWW {
	width: 76rem;
	display: block;
	float: left;
	margin: .5rem;
}
.dataFormBlock h2, .dataFormBlockW h2 {
	font-size: 1.4rem;
	margin-bottom: 2.7rem;
}
.formField {
	height: 3.6rem;
	margin-right: 2rem;
	margin-bottom: 1rem;
	float: left;
	text-align: left;
	font-size: .7rem;
	line-height: 1.2;
}

.stdFormField	{
	font-family: Didact Gothic, sans-serif;
	font-size: 1.2rem;
	width: 100%;
	margin: .25rem 0 0 0;
	padding: .25rem;
	background-color: var(--bg-dark);
	color: var(--text);
	border: none;
	display: inline-block;
	border-radius: var(--btn-corners);
}
.stdFormField:focus {
	outline: none;
	background-color: var(--my-orange);
	color: #fff;
}
.stdFormFieldFixed {
	font-family: Didact Gothic, sans-serif;
	font-size: 1.2rem;
	width: 100%;
	margin: .25rem 0 0 0;
	padding: .25rem;
	background-color: var(--bg);
	color: var(--text-light);
	border: none;
	display: inline-block;
	border-radius: var(--btn-corners);
}
.errormsgForm {
	height: .7rem;
	width: 100%;
	color: #d30000;
    line-height: 1.2;
}
.stdFormTxt {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	width: 100%;
	margin: 5px 0 0 0;
	padding-top: 15px;
	background-color: transparent;
	color: #000000;
	border: none;
}
.xxs {
	width: 5rem;
}
.xs {
	width: 10rem;
}
.small {
	width: 15rem;
}
.medium {
	width: 22rem;
}
.doublesmall {
	width: 32rem;
}
.large {
	width: 40rem;
}
.xxl {
	width: 50rem;
}

/* ========== Client Admin Formats ================*/

#clAccWelcome {
	display: block;
	float: left;
	height: 2.4rem;
	width: calc(100% - 4 * var(--pnl-margin));
	padding: 2rem calc(2 * var(--pnl-margin)) 0 calc(2 * var(--pnl-margin));
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	letter-spacing: .125rem;
	text-transform: uppercase;
}

.usermenu {
	display: block;
	float: right;
}
.clAccMenuTab {
	float: right;
	height: 1.1rem;
	padding: .5rem 2rem;
	border-top-left-radius: var(--pnl-corners);
	border-top-right-radius: var(--pnl-corners);
	cursor: pointer;
}
.clAccMenuTabAct {
	float: right;
	padding: .5rem 2rem;
	background-color: var(--bg);
	border-top-left-radius: var(--pnl-corners);
	border-top-right-radius: var(--pnl-corners);
	cursor: default; /* zeigt normalen Pfeil statt Text-Cursor */ 
	user-select: none;
}
.clAccTab {
	display: none;
}
.clAccPanelCol {
	float: left;
}
.clAccPanel {
	display: block;
	float: left;
	margin: 0 var(--pnl-margin) var(--pnl-margin) 0;
	padding: var(--pnl-padding);
	background-color: var(--bg-light);
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	overflow: auto;
}
#clAccContact {
	width: 55rem;
	height: 42rem;
}
#clAccAccount {
	width: 26rem;
	height: 42rem;
}
#clAccAlsv {
	width: 39rem;
	height: 42rem;
}
#clAccAusl {
	width: 78rem;
	height: 42rem;
}
#clAccFavs {
	width: 26rem;
	height: 42rem;
}
#clAccSaldo {
	width: 26.5rem;
	height: 9rem;
}
#clAccLsList {
	width: 26.5rem;
	height: 18rem;
	clear: left;
}
#clAccBills {
	width: 39.5rem;
	height: 42rem;
	float: left;
}



.clAccAusl {
	float: left;
	width: 100%;
	padding: var(--pnl-padding);
	background-color: var(--bg);
	border-radius: var(--btn-corners);
	margin-top: var(--pnl-padding);
}
.clAccAuslImg {
	float: left;
	width: 9rem;
	padding: 0 0.5rem;
}
.clAccAuslImg img {
	width: 100%;
	border-radius: var(--btn-corners);
}
.clAccAuslInfo {
	float: left;
	width: 14rem;
	padding: 0 0.5rem;
}
.clAccAuslFee {
	float: left;
	width: 8rem;
	padding: 0 0.5rem;
	text-align: right;
}
.clAccAuslTerm {
	float: left;
	width: 9rem;
	padding: 0 0.5rem;
	text-align: right;
}
.clAccAuslKauf {
	float: left;
	width: 9rem;
	padding: 0 0.5rem;
	text-align: right;
}
.clAccAuslAktion {
	float: left;
	width: 11rem;
	padding: 0 0.5rem;
	text-align: right;
}
.clAccLabel {
	font-size: .7rem;
	color: var(--text-light);
	line-height: 1;
}
.clAccNo {
	font-family: Didact Gothic;
	font-size: 2rem;
}
.clAccProlong, .clAccBuy {
	background-color: var(--bg-dark);
	width: calc(100% - 80px);
	color: var(--text);
}
.clAccProlong:hover {
	background-color: var(--my-cyan);
	color: #fff;
}
.clAccBuy:hover {
	background-color: var(--my-pink);
	color: #fff;
}

#clAccSaldoTxt {
	float: left;
	width: 60%;
}
#clAccSaldoNo {
	float: right;
	width: 40%;
	font-family: Didact Gothic;
	font-size: 2rem;
	text-align: right;
}

.clAccLs {
	float: left;
	width: calc(100% - 2 * var(--pnl-padding));
	padding: var(--pnl-padding);
	background-color: var(--bg);
	border-radius: var(--btn-corners);
	margin-top: var(--pnl-padding);
}
.clAccLsDate {
	float: left;
	width: 100%;
	padding-bottom: .25rem;
	color: var(--text-light);
	font-family: Didact Gothic;
}
.clAccLsKto {
	float: left;
	width: 75%;
	color: var(--text-light);
}
.clAccLsAmount {
	float: left;
	width: 25%;
	text-align: right;
	font-family: Didact Gothic;
}

#alsvJoin {
	display: inline-block;
	width: 100%;
	padding: 1rem 0;
	border-top: 1px solid #ccc;
}

.clAccRg {
	float: left;
	width: 100%;
	padding: var(--pnl-padding);
	background-color: var(--bg);
	border-radius: var(--btn-corners);
	margin-top: var(--pnl-padding);
}
.clAccRgDate {
	float: left;
	width: 20%;
	padding-bottom: .25rem;
	color: var(--text-light);
	font-family: Didact Gothic;
}
.clAccRgNr {
	float: left;
	width: 20%;
	padding-bottom: .25rem;
	color: var(--text-light);
	font-family: Didact Gothic;
}
.clAccRgAmount {
	float: left;
	width: 20%;
	padding-bottom: .25rem;
	text-align: right;
	font-family: Didact Gothic;
}
.clAccRgState {
	float: left;
	width: 20%;
	padding-bottom: .25rem;
	color: var(--text-light);
	text-align: right;
}
.clAccRgPdf {
	float: left;
	width: calc(7% - .2rem);
	margin-left: 13%;
	padding: .3rem 0 .2rem .2rem;
	text-align: right;
	background-color: var(--alert);
	border-radius: var(--btn-corners);
}
.clAccRgPdf img {
	width: 100%;
}



/* ============ Kunstwerk Seite ================== */

#kwContent {
	display: block;
	width: 100%;
	min-height: calc(100vh - 14.5rem - 2px);
}

#kwStatus {
	float: left;
	margin: var(--pnl-margin) calc( 2 * var(--pnl-margin) ) var(--pnl-padding) calc( 2 * var(--pnl-margin) );
	width: calc(100%- 4 * var(--pnl-margin));
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	letter-spacing: .125rem;
	text-transform: uppercase;
}
#kwField {
	display: block;
	padding: var(--pnl-margin);
	width: calc(100% - 2 * var(--pnl-margin));
}
#kwInfoCentered {
	display: grid; 
	grid-template-columns: 69% 31%; /* zwei gleich breite Spalten */
	width: 100%;
}

#hauptbild	{
	max-height: 47rem;
	min-height: 36rem;
	margin: 0;
	padding: var(--pnl-margin);
	text-align: center;
	background: var(--bg-light);
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	position: relative;
}

#hauptbild img	{
	border: none;
	max-width: calc(100% - 7rem);
	max-height: 100%;
	vertical-align: top;
	cursor: pointer;
}

#weitereAnsichten {
	float: left;
	width: 5rem;
	padding: var(--pnl-padding);
	background-color: var(--bg-dark);
	border-radius: var(--pnl-corners);
}

#weitereAnsichten img {
	margin-bottom: var(--pnl-margin);
	width: 5rem;
	max-width: 5rem;
	/*border: 1px solid #ccc; */
}

#weitereAnsichten img:hover {
	border: 1px solid #099eb4;
}

#loveit {
	padding: var(--pnl-margin);
	width: 2.5rem;
	clear: left;
	position: absolute;
	bottom: var(--pnl-margin);
	left: var(--pnl-margin);
}
#loveit img {
	width: 100%;
	max-width: 2.5rem;
}
#loveitMsg {
	display: none;
	position: absolute;
	bottom: var(--pnl-margin);
	left: 5rem;
	padding: var(--pnl-margin);
	width: 8rem;
	border-top: 1px solid #ffffff; 
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2);
  	border-radius: var(--btn-corners);
  	background-color: var(--bg-dark);
}

#werkdata {
	max-height: 47rem;
	min-height: 36rem;
	margin-left: var(--pnl-margin);
	padding: var(--pnl-margin) 1.5rem var(--pnl-margin) var(--pnl-margin);
	background: var(--bg-light);
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	overflow: auto;
}

#werkdata_header {
	float: right;
	width: 100%;
	font-family: 'Open Sans', sans-serif;
}

#werkdata_preis {
	float: right; 
}

.kwH1 {
	font-size: 1.9rem;
	float: left;
	padding: 0 0 0 0;
	width: 9rem;
	margin-left: 1rem;
	text-align: right;
}
.kwH3 {
	float: left;
	padding: 1rem .5rem 0 0;
	font-size: 1rem;
}

#werkdata_action {
	float: right;
	width: 100%;
	padding-bottom: 10px;
	border-bottom: 1px dotted #333;
	
}
.werkdata_title {
	float: left;
	width: 100%;
	font-size: 1.9rem;
	line-height: 130%; 
	margin-top: 1rem;
}

.werkdata_facts {
	float: left;
	width: 100%;
	margin-top: 1rem;
}

#werkdata_descr {
	float: left;
	width: 100%;
	margin-top: 1rem;
}

.weitere_werke {
	float: left;
	margin-top: var(--pnl-margin);
	padding: var(--pnl-margin);
	width: calc(100% - 2 * var(--pnl-margin));
	text-align: center;
	background-color: var(--bg);		
}

.weitere_werke img {
	margin: 0 1rem 0 1rem;
	border-radius: var(--btn-corners);
}

#leihdetails, #lieferdetails {
	display: none;
	position: absolute;
	margin-top: 3.5rem;
	width: 25rem;
	padding: var(--pnl-margin) var(--pnl-margin) calc(2 * var(--pnl-margin)) var(--pnl-margin);
	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2);
  	border-radius: var(--btn-corners);
  	background-color: var(--bg);
  	z-index:1002;
	overflow: auto;
}

.leihdauer, .lieferart {
	padding-bottom: 15px;
	float: left;
	width: 100%;
}
.ldVariant {
	float: left;
	width: calc(50% - 2rem);
	text-align: left;
	font-family: Nunito Sans, sans-serif;
	padding: .24rem .5rem;
	margin: .25rem 1rem .25rem 0;
	cursor: pointer;
	background-color: var(--bg-dark);
	border-radius: var(--btn-corners);
}

.btn:checked ~ .ldVariant { background-color: #333333; color: #fff; }
.btn { display: none; }


/* ============== Artists Seite ================== */

#artistsContent {
	display: block;
	width: 100vw;
	min-height: calc(100vh - 14.5rem - 2px);
}

#artistsTitle {
	margin: var(--pnl-margin) calc( 2 * var(--pnl-margin) ) var(--pnl-padding) calc( 2 * var(--pnl-margin) );
	width: calc(100%- 4 * var(--pnl-margin));
	font-size: 4rem;
	font-family: Amatic;
	letter-spacing: .012rem;
}

#artistsList	{
	display: table-cell;
	width: calc(100vw - 2 * var(--pnl-margin));
	padding: var(--pnl-margin);
	background-color: var(--bg-dark);
}

.artistTile {
  	width: 20rem;
  	height: 19rem;
  	margin: var(--pnl-margin);
  	padding: var(--pnl-padding);
  	float: left;
 	cursor: pointer;
  	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	overflow: hidden;
  	background-color: var(--bg-light);
}
.artistTileImage {
  width: 20rem;
  height: 0;
  float: left;
}
.artistTileImage img {
  width: 100%;
  border-radius: var(--btn-corners);
}
.artistTileName {
  float: left;
  width: calc(100% - 2 * var(--pnl-padding));
  height: calc(30% - 2 * var(--pnl-padding));
  margin-top: 70%;
  background: rgb(256,256,256,0.85);
  padding: var(--pnl-padding);
  color: #000;
}
.artistTileName h1 {
	margin-bottom: 0;
}

/* ============ Artist Bio Seite ================= */

#bioContent {
	display: block;
	width: 100vw;
	min-height: calc(100vh - 9rem - 2px);
}

#bioField {
	margin: var(--pnl-margin);
	width: calc(100% - 2 * var(--pnl-margin));
}

#bioImage {
	height: 42rem;
	padding: var(--pnl-margin);
	float: left;
	position: sticky;
	top: var(--pnl-margin);
	width: 21rem;
	background-color: var(--bg-light);
	color: var(--text);
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	overflow: hidden;
}
#bioImage h1 {
	font-family: 'Open Sans'sans-serif;
	font-size: 2rem;
}

#bioImage img {
	width: 100%;
	border-radius: var(--btn-corners);
}

#bioWorks, #bioText, #bioCV {
	display: none;
	width: calc(100% - 23rem - 3 * var(--pnl-margin));
	min-height: 42rem;
	margin-top: 2rem;
	margin-left: calc(23rem + var(--pnl-margin));
	padding:var(--pnl-margin);
	background-color: var(--bg-light);
	color: var(--text);
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	overflow: hidden;
}
#bioWorks {
	width: calc(100% - 23rem - 2 * var(--pnl-margin));
	padding:var(--pnl-padding);
}
#bioTextImages {
	float: right;
	width: 25rem;
}
#bioTextImages img {
	width: 100%;
	margin-top: 1.2rem;
}
#bioTextText {
	float: left;
	width: calc(100% - 30rem);
}

.bio_ueberschriften {
	color: #ec8100;
	padding-bottom: 15px;
	padding-top: 15px;
	font-family: 'Open Sans', Trebuchet, Helvetica, Arial;
}
.bio_ueberschriften h2 {
	font-size: 20pt;
}

#bio_menu {
	margin: 30px 0 30px 0;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
	padding: 8px 0px;
	text-align: center;
	font-size: 11pt;
	letter-spacing: 1.9pt;
}
#bio_menu a {
	width: 100px;
	padding: 0 8px;
	font-family: 'Open Sans', ColaborateLight, Trebuchet MS, Arial, Helvetica, sans-serif;
}

#beschreibung_text {
	float: left;
	width: 70%;
	min-height: 500px;
}
#beschreibung_fotos {
	float: right;
	width: 200px;
	padding-left: 15px;
}
#beschreibung_fotos img {
	padding: 17px 0px 3px 0px;
}


/* ======== Katalog & Artists Formats ============ */

#katalogContent {
	display: grid;
	margin: var(--pnl-margin);
	width: calc(100vw - 2 * var(--pnl-margin));
	min-height: calc(100vh - 9rem - 2px);
	grid-template-columns: 23rem 1fr; 
	gap: 1rem; /* optional */
}

#searchParameters	{
	margin-top: 1rem;
	padding: var(--pnl-margin);
	float: left;
	background-color: var(--bg-light);
	color: var(--text);
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	overflow: hidden;
  	font-size: .9rem;
}

#searchResults	{
	margin-top: 1rem;
	padding: var(--pnl-margin);
	background-color: var(--bg-light);
	color: var(--text);
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	overflow: hidden;
}
#searchParameters	h3 {
	padding-top: 0;
}

.searchParametersField	{
	width: calc(100% - 2 * var(--pnl-padding));
	float: left;
	margin: calc(2 * var(--pnl-margin)) 0 0 0;
	padding: calc(2 * var(--pnl-margin)) var(--pnl-padding) 0 var(--pnl-padding);
	border-top: 1px solid #ccc;
}
.spCat {
	float: left;
	width: calc(50% - 1.5rem);
	height: 1.5rem;
	padding: .5rem;
	margin: .5rem .5rem 0 0;
	cursor: pointer;
	text-align: center;
	background-color: var(--bg-dark);
	border-radius: var(--btn-corners);
}
.btn:checked ~ .spCat { 
	background-color: var(--my-cyan);
	color: #fff;
}
.themeVariant {
	float: left;
	text-align: left;
	padding: .25rem .5rem;
	margin: .5rem .5rem 0 0;
	cursor: pointer;
	background-color: #ccc;
	border-radius: var(--btn-corners);
}
.btn:checked ~ .themeVariant { 
	background-color: var(--my-orange); 
	color: #fff;
}
	
.spVariant {
	float: left;
	width: calc(50% - 1.5rem);
	height: 1.5rem;
	padding: .5rem;
	margin: .5rem .5rem 0 0;
	cursor: pointer;
	text-align: center;
	background-color: var(--bg-dark);
	border-radius: var(--btn-corners);
}
.btn:checked ~ .spVariant { 
	background-color: var(--my-orange); 
	color: #fff;
}
.spTriple {
	width: calc(33.3% - 24px);
}


.range_container {
  display: inline-block;
  width: 95%;
  margin: 16px 5% 12px 0;
}

.sliders_control {
  position: relative;
  min-height: max(2vmin , 12px);
}

.form_control {
  position: relative;
  display: flex;
  justify-content: space-beten;
  color: var(--text-light);
}
.form_control input {
	width: 2rem;
	text-align: center;
}
#toInput {
	float: right;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: max(1.5vmin , 9px);
  height: max(1.5vmin , 9px);
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: max(1.5vmin , 9px);
  height: max(1.5vmin , 9px);
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;  
}

input[type=range]::-webkit-slider-thumb:hover {
  background: #f7f7f7;
}

input[type="range"] {
  -webkit-appearance: none; 
  appearance: none;
  height: 3px;
  width: 100%;
  position: absolute;
  background-color: #C6C6C6;
  pointer-events: none;
}

#fromSlider {
  height: 0;
  z-index: 1;
  margin-top: 2px;
}

.buttonsCentred {
	width: fit-content;
	margin: auto;	
}
#sz1Button {
	height: 1.5rem;
	margin-top: 4rem;
	margin-right: .5rem;
	padding-top: 1rem;
	width: 3.5rem;
}
.btn:checked ~ #sz1Button {
	background-color: #ec8000;
}
#sz2Button {
	height: 1.5rem;
	margin-top: 2rem;
	margin-right: .5rem;
	padding-top: 3rem;
	width: 4.5rem;
}
.btn:checked ~ #sz2Button {
	background-color: #009db4;
}
#sz3Button {
	height: 1.5rem;
	margin-top: 0;
	padding-top: 5rem;
	width: 5.5rem;
}
.btn:checked ~ #sz3Button {
	background-color: #d000c1;
}

#fqeButton {
	width: 6rem;
	height: 2rem;
	padding-top: .5rem;
	text-align: center;
	margin-top: 2.5rem;
}
#fqaButton {
	width: 4.5rem;
	height: 3.5rem;
	padding: .5rem;
	padding-top: 1.5rem;
	text-align: center;
	line-height: 1;
	margin-top: 1rem;
}
#fhButton {
	width: 3rem;
	height: 4.5rem;
	padding: .5rem;
	padding-top: 3rem;
	text-align: center;
	margin-top: 0;
}


#searchPageNav	{
	width: 100%;
	display: inline-block;
	margin-top: 3rem;
	margin-bottom: 1rem;
}
#searchPageNav a {
	color: #333;
	font-family: 'Open Sans', Trebuchet MS, Helvetica;
}
.pageNav {
	padding: var(--pnl-margin);
	margin: var(--pnl-padding);
	background-color: var(--bg-dark);
	display: inline-block;
	width: 1rem;
	height: 1rem;
	text-align: center;
	border-radius: var(--btn-corners);
	line-height: 1;
}
.pNact {
	background-color: var(--my-cyan);
	color: #fff;
}
#pageNavLeft {
	float: left;
}
#pageNavRight {
	float: right;
	margin-right: 40px;
}
.pageNavDots {
	padding: calc(0.3vh + 0.3vw);
	margin: calc(0.1vh + 0.1vw);
	display: inline-block;
}

#pageNavCenter {
	display: inline-block;
	width: calc(84% - 5.4vh - 5.4vw);
	margin: 0 7%;
	text-align: center;
}

#cancelFilter {
	float: right;
	margin: 0 0 0 0;
	padding: calc(0.5vh + 0.5vw + 2px);
}

/* ============ Item Tile Formats ================ */

.kwTile {
	width: 20rem;
	height: 24.5rem;
	float: left;
	margin: var(--pnl-padding);
	padding: var(--pnl-padding);
	border-radius: var(--btn-corners);
	background-color: var(--bg);
	font-size: .9rem;
}

.kwTileImage {
	width: 17rem;
	height: 15rem;
	float:left;
	text-align: center;
	padding: 1.5rem;
}
.kwTileImgWrapper {
	position: relative; /* Referenzpunkt für das Overlay */ 
	display: inline-block; /* Passt sich der Bildgröße an */
}
.kwTileImage_verl {
	width: 17rem;
	height: 15rem;
	float:left;
	opacity: 0.4;
	text-align: center;
	padding: 1.5rem;
	position: absolute;
}
.kwTileImage img, .kwTileImage_verl img {
	max-width: 17rem;
	max-height: 15rem;
}
.kwTileMainImg { 
	display: block; 
	width: 100%; /* oder eine andere responsive Regel */ 
	height: auto; 
} 
.kwTileOverlImg { 
	position: absolute; 
	top: 0; 
	right: 0; 
	pointer-events: none; /* optional: Overlay nicht klickbar */ 
	width: 4rem; /* Größe des Overlays nach Bedarf */ 
}
.kwTileImgVerl {
	opacity: .6;
}
.kwTileInfo {
	padding: var(--pnl-padding);
	float: left;
	width: 19rem;
	height: 5.5rem;
	overflow:hidden;
	border-top: 1px solid #ccc;
}

.kwTileInfoTitle	{
	font-size: 1.1rem;	
	text-decoration: none;
	color: var(--text);
}

.kwTileInfoArtist {
	float: left;
	text-decoration: none;
	color: var(--text-light);
	width: 60%;
}

.kwTileInfoSize {
	float: right;
	width: fit-content;
	text-decoration: none;
	text-align: right;
	clear: right;
}

.kwTileInfoFormat {
	width: fit-content;
	text-align: left;
	float: right;
	color: var(--text-light);
	clear: right;
	font-family: Didact Gothic;
}
.kwTileInfoFee {
	margin-top: 1rem;
	padding-top: .2rem;
	font-size: 1.1rem;
	text-decoration: none;
	color: var(--text-light);
	float: left;
	width: 40%;
	text-align: left;
	clear: left;
	font-family: Didact Gothic;
}
.kwTileInfoStatus {
	margin-top: 1rem;
	padding-top: .2rem;
	font-size: 1.1rem;
	text-decoration: none;
	color: var(--text-light);
	float: left;
	width: 40%;
	text-align: left;
	clear: left;
}

.sizeIcon {
	float: left;
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	align-items: flex-end;
	width: fit-content;
	height: fit-content;
}
.sizeIcon > div {
	display: flex;	
}
.iconSmallFull {
	width: calc(.7rem - 2px);
	height: calc(.7rem - 2px);
	border: 1px solid #ec8000;
	background-color: #ec8000;
	margin: 0 .25rem 0 0;
	border-radius: var(--btn-corners);
}
.iconSmallEmpty {
	width: calc(.7rem - 2px);
	height: calc(.7rem - 2px);
	border: 1px solid #ec8000;
	margin: 0 .25rem 0 0;
	border-radius: var(--btn-corners);
}
.iconMediumFull {
	width: calc(1.1rem - 2px);
	height: calc(1.2rem - 2px);
	border: 1px solid #099EB4;
	background-color: #099EB4;
	margin: 0 .25rem 0 0;
	border-radius: var(--btn-corners);
}
.iconMediumEmpty {
	width: calc(1.1rem - 2px);
	height: calc(1.2rem - 2px);
	border: 1px solid #099EB4;
	margin: 0 .25rem 0 0;
	border-radius: var(--btn-corners);
}
.iconLargeFull {
	width: calc(1.5rem - 2px);
	height: calc(1.7rem - 2px);
	border: 1px solid #EF08C9;
	background-color: #EF08C9;
	border-radius: var(--btn-corners);
}
.iconLargeEmpty {
	width: calc(1.5rem - 2px);
	height: calc(1.7rem - 2px);
	border: 1px solid #EF08C9;
	border-radius: var(--btn-corners);
}


/* ================= Warenkorb =================== */

#wkContent {
	display: block;
	width: 76rem;
	margin: auto;
	margin-top: 2rem;
	margin-bottom: var(--pnl-margin);
	padding: calc(2 * var(--pnl-margin));
	min-height: calc(100vh - 16rem - 3px);
	background-color: var(--bg-light);
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
}
#wk {
	display: block;
	width: 100%;
}
.wkImp {
	font-size: 1.1rem;
	color: var(--text-strong);
}
.wkComment {
	color: var(--text-light);
}
.wkHeader {
	display: block;
	height: 1rem;
	margin-bottom: var(--pnl-margin);
	padding: var(--pnl-padding);
	width: calc(100% - 2 * var(--pnl-padding));
}
.wkHeaderKw {
	float: left;
	width: calc(50% - 2 * var(--pnl-padding));
	margin: 0 var(--pnl-padding);
}
.wkHeaderTyp {
	float: left;
	width: calc(40% - 2 * var(--pnl-padding));
	margin: 0 var(--pnl-padding);
}
.wkHeaderPreis {
	float: left;
	width: calc(10% - 2 * var(--pnl-padding));
	margin: 0 var(--pnl-padding);
	text-align: right;
}

.wkElement {
	display: block;
	margin-top: var(--pnl-margin);
	height: 7rem;
	padding: var(--pnl-padding);
	width: calc(100% - 2 * var(--pnl-padding));
	background-color: var(--bg);
	border-radius: var(--pnl-corners);
}
.wkElKwImg {
	float: left;
	padding: 0 var(--pnl-padding);
	width: calc(8rem - 2 * var(--pnl-padding));
}
.wkElKwImg img {
	width: 100%;
	border-radius: var(--btn-corners);
}
.wkElKwDes {
	float: left;
	position: relative;
	width: calc(50% - 8em - 2 * var(--pnl-padding));
	margin: 0 var(--pnl-padding);
	height: 7rem;
}
.wkDelLink {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1.4rem;
	height: 1.4rem;
	padding: .25rem;
	border-radius: .95rem;
	background-color: #bbb;
}
.wkDelLink:hover {
	background-color: var(--alert);
}
.wkDelLink img {
	width: 1.4rem;
}
.wkElTyp {
	float: left;
	width: calc(40% - 2 * var(--pnl-padding));
	margin: 0 var(--pnl-padding);
}
.wkPlus {
	background-color: #fff;
}
.wkPlus:hover {
	background-color: #000;
}
.wkElPreis {
	float: left;
	width: calc(10% - 2 * var(--pnl-padding));
	margin: 0 var(--pnl-padding);
	text-align: right;
	font-family: Didact Gothic;
}

.wkElVersand {
	display: block;
	margin-top: var(--pnl-margin);
	height: 3.5rem;
	padding: var(--pnl-padding);
	width: calc(100% - 2 * var(--pnl-padding));
	background-color: var(--bg);
	border-radius: var(--pnl-corners);
}
.wkVersDes {
	float: left;
	width: calc(40% - 2 * var(--pnl-padding));
	margin: 0 var(--pnl-padding) 0 calc(50% + var(--pnl-padding));
}

#wkSum {
	display: block;
	height: 1rem;
	margin-top: var(--pnl-margin);
	padding: var(--pnl-padding);
	width: calc(100% - 2 * var(--pnl-padding));
}
.wkSumDes {
	float: left;
	width: calc(40% - 2 * var(--pnl-padding));
	margin: 0 var(--pnl-padding) 0 calc(50% + var(--pnl-padding));
}
#wkFooter {
	display: block;
	height: 8rem;
	margin-top: 2rem;
}
#wkRemark {
	width:40%; 
	float:left;
	margin-top: .5rem;
	padding: var(--pnl-margin); 
	background-image: url("../imgSys/punkt.jpg");
	border-radius: var(--pnl-corners);	
}
#wkAktion {
	float: right;
	width: 20rem;
}



/* ================= Favoriten =================== */

#favsContent {
	display: block;
	width: 76rem;
	margin: auto;
	margin-top: 2rem;
	margin-bottom: var(--pnl-margin);
	padding: calc(2 * var(--pnl-margin));
	min-height: calc(100vh - 16rem - 3px);
	background-color: var(--bg-light);
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
}
#favs {
	display: block;
	width: 100%;
}

#favsLoginMsg {
	display: block;
	width: 40rem;
	margin: 5rem auto 5rem auto;
	text-align: center;
}
.favsEl {
	display: block;
	margin-top: var(--pnl-margin);
	height: 7rem;
	padding: var(--pnl-padding);
	width: calc(100% - 2 * var(--pnl-padding));
	background-color: var(--bg);
	border-radius: var(--pnl-corners);
}
.favsElImg {
	float: left;
	padding: 0 var(--pnl-padding);
	width: calc(8rem - 2 * var(--pnl-padding));
}
.favsElImg img {
	width: 100%;
	border-radius: var(--btn-corners);
}
.favsElDes {
	float: left;
	position: relative;
	width: calc(50% - 8em - 2 * var(--pnl-padding));
	margin: 0 var(--pnl-padding);
	height: 7rem;
}
.favsElFormat {
	float: left;
	width: calc(10% - 2 * var(--pnl-padding));
	margin: var(--pnl-padding);
}
.favsElFormatTxt {
	float: left;
	margin-top: .25rem;
	color: var(--text-light);
	font-family: Didact Gothic;
}
.favsElStatus {
	float: left;
	width: calc(40% - 2 * var(--pnl-padding));
	margin: 0 var(--pnl-padding);
	text-align: right;
}
.favsElPreis {
	float: left;
	width: 100%;
	text-align: right;
	font-family: Didact Gothic;
}
.favsElStatusTxt {
	float: left;
	width: 100%;
	text-align: right;
	padding: 0.5rem 0 .4rem 0;
	color: var(--text-light);
}
.favsAwB {
	background-color: var(--bg-dark);
	color: var(--text);
}
.favsAwB:hover {
	background-color: var(--my-pink);
	color: #fff;
}
#favsFooter {
	display: block;
	height: 8rem;
	margin-top: 2rem;
}
#favsAktion {
	float: left;
	width: 20rem;
}


/* ==================== FAQ ====================== */

#faqContent {
	display: block;
	width: 76rem;
	margin: auto;
	margin-top: 2rem;
	margin-bottom: var(--pnl-margin);
	padding: calc(2 * var(--pnl-margin));
	min-height: calc(100vh - 16rem - 3px);
	background-color: var(--bg-light);
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
}

/* =================== Legal ===================== */

#legalContent {
	display: block;
	width: 76rem;
	margin: auto;
	margin-top: 2rem;
	margin-bottom: var(--pnl-margin);
	padding: calc(2 * var(--pnl-margin));
	min-height: calc(100vh - 16rem - 3px);
	background-color: var(--bg-light);
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
}

/* ============== Gutschein Page  ================ */

#gutscheinContent {
	display: block;
	width: calc(100% - 4rem);
	height: calc(100vh - 14rem - 3px);
	margin: auto;
	margin-top: 2rem;
	margin-bottom: var(--pnl-margin);
	padding: var(--pnl-margin);
	background: url(../imgSys/gsContentBackground.jpg) no-repeat center;
	background-size: auto;
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
}
#gsNavLeft {
	width: 2vw;
	float: left;
	height: calc(50vh - 7rem - 3px);
	padding-left: 1vw;
	padding-top: calc(50vh - 7rem - 1px);
}
#gsNavLeft img, #gsNavRight img {
	cursor: pointer;
}
#gsNavRight {
	width: 2vw;
	float: right;
	height: calc(50vh - 7rem - 3px);
	padding-right: 1vw;
	padding-top: calc(50vh - 7rem - 1px);
	text-align: right;
}
#gsPageArea {
	width: calc(100% - 20vw);
	padding: 0 7vw;
	float: left;
}
.gsPage {
	display: none;
	width: 100%;

}
.gsPageFoto {
	float: left;
	padding-right: 5vw;
}
.gsPageFoto img {
	height: calc(100vh - 14rem - 3px);
	border-radius: var(--pnl-corners);
}

.gsPageInfo {
	padding: 10vh 0 0 0;
}
.gsPageTxt {
	margin: 10vh 0;
	height: 22vh;
}

#gsThumbs img {
	width: 7rem;
	margin: 0 .5rem 2rem .5rem;
	border-radius: var(--btn-corners);
}

#gsOrderForm {
	display: inline-block;
	width: 40rem;
	text-align: center;
	color: #222;
}
#gsValueField {
	width: 30%;
	display: inline-block;
	float: none;
	margin: 0;
	text-align: center;
}
#ww {
	text-align: center;
}
#gsNavigator {
	margin-top: 18vh;
	height: 12px;
	width: 100%;
}
#gsNavigator2 {
	height: 12px;
	width: 96px;
	margin: auto;
	margin-top: 3vh;
}
.gsNavDot {
	float: left;
	margin-right: 20px;
	width: 10px;
	height: 10px;
	background-color: #ccc;
	border: 1px solid #ccc;
	border-radius: 6px;
	cursor: pointer;
}
.gsNavDotActive {
	float: left;
	margin-right: 20px;
	width: 10px;
	height: 10px;
	background-color: #099EB4;
	border: 1px solid #099EB4;
	border-radius: 6px;
}
.gsNavDotCenter {
	margin: 0 10px 0 10px
}
#gsLdTxt {
	display: block;
}
.gsLdVariantFixed {
	width: calc(45% - 20px);
	text-align: left;
	padding: 5px 10px;
	margin: auto;
	margin-bottom: 10px;
	cursor: pointer;
	background-color: #333333; 
	color: #fff;
	text-align: center;
	border-radius: var(--btn-corners);
}

/* =================  New Pass ================== */

#newPassContent {
	display: block;
	width: 36rem;
	margin: auto;
	margin-top: calc(50vh - 20.5rem);
	margin-bottom: calc(50vh - 20.5rem);
	height: calc(28rem - 3px);
	padding: calc( 2 * var(--pnl-margin) );
	z-index: 11;
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	background-color: var(--bg-light);
}

#newPassField {
	display: inline-block;
	padding: 2rem 0 3rem 0;
	width: 100%;
}


/* ==============  Registrierung  ================ */

#registContent {
	display: block;
	width: 76rem;
	margin: auto;
	margin-top: 2rem;
	margin-bottom: 1rem;
	height: calc(100vh - 11rem - 3px);
	min-height: 54rem;
	padding: calc( var(--pnl-margin) );
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	background-color: var(--bg-light);
}


#registErrContent {
	display: block;
	width: 36rem;
	margin: auto;
	margin-top: calc(50vh - 22rem);
	margin-bottom: calc(50vh - 22rem);
	height: calc(31rem - 3px);
	padding: calc( 2 * var(--pnl-margin) );
	z-index: 11;
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	background-color: var(--bg-light);
}

#registConfirmContent {
	display: block;
	width: 76rem;
	margin: auto;
	margin-top: 2rem;
	margin-bottom: 1rem;
	min-height: 28rem;
	padding: calc( var(--pnl-margin) );
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	background-color: var(--bg-light);
}
/* ==============  Logout Confirm  =============== */

#logoutContent {
	display: block;
	width: 36rem;
	margin: auto;
	margin-top: calc(50vh - 15.5rem);
	margin-bottom: calc(50vh - 15.5rem);
	height: calc(18rem - 3px);
	padding: calc( 2 * var(--pnl-margin) );
	z-index: 11;
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	background-color: var(--bg-light);
}

/* ================  Login Error  ================ */

#loginErrContent {
	display: block;
	width: 36rem;
	margin: auto;
	margin-top: calc(50vh - 22.5rem);
	margin-bottom: calc(50vh - 22.5rem);
	height: calc(32rem - 6px);
	padding: calc( 2 * var(--pnl-margin) );
	z-index: 11;
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	background-color: var(--bg-light);
}

/* ================  Neue Werke  ================= */

#newWorksContent {
	display: block;
	width: calc(100% - 4rem);
	height: calc(100vh - 13rem - 3px);
	margin: auto;
	margin-top: 1rem;
	margin-bottom: var(--pnl-margin);
	padding: var(--pnl-margin);
	background: url(../imgSys/gsContentBackground.jpg) no-repeat center;
	background-size: auto;
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
	overflow: hidden;
}
#nWNavLeft {
	width: max(3vmin , 18px);
	float: left;
	padding: calc(50vh - 81px) max(1vmin , 6px) 0 max(2vmin , 12px);
}
#nWNavLeft img, #nWNavRight img {
	cursor: pointer;
}
#nWNavRight {
	width: max(3vmin , 18px);
	float: right;
	padding: calc(50vh - 81px) max(2vmin , 12px) 0 max(1vmin , 6px);
	text-align: right;
}
#newWorksArea {
	width: calc(100% - 12vmin);
	min-width: calc(1200px - 12vmin);
	height: 100%;
	padding: max(4vmin , 24px) 0 0 0;
	overflow: hidden;
	float: left;
}
#newWorksArea h1 {
	font-size: 48pt;
	font-family: Amatic;
	letter-spacing: .15pt;
	color: var(--text-strong);
}
#newWorksSlider {
	width: 19999vmin;
	height: max(60vmin , 360px );
	margin-top: max(6vmin , 36px);
}
.newsTile {
	float: left;
	width: fit-content;
	max-width: max(80vmin , 480px);
	height: max(62vmin , 372px);
	margin-right: max(5vmin , 30px);
	background: #f7f8f3;
}
.newsTileImage {
	float: left;
	width: fit-content;
	height: max(45vmin , 270px );
}
.notAvailable {
	opacity: 0.5;
}
.newsTileImage img {
	max-height: 100%;
	max-width: 100%;
	box-shadow: max(0.5vmin , 3px) max(0.5vmin , 3px) max(1vmin , 6px) #888;
}
.naOverlay {
	position: relative;
	height: max(45vmin , 270px );
	left: calc(100% - max(10vmin , 60px));
	bottom: calc(100% - 17vmin);
}
.naOverlay img {
	width: max(10vmin , 60px);
}
.newsTileInfo {
	float: left;
	clear: both;
	width: 100%;
	opacity: 0;
	padding-top: max(1vmin , 6px);
	font-size: .9rem;
}
.newsTile:hover .newsTileInfo {
	opacity: 1;
	transition: opacity 0.8s;
}

.simpleTileInfo {
	display: block;
	opacity: 0;
	padding: max(2vmin , 12px) max(2vmin , 12px) max(1vmin , 6px) max(2vmin , 12px);
	float:left;
	width: calc(100% - 4vmin - 2px);
	max-width: calc(100% - 24px);
	min-height: calc(100% - 3vmin - 2px);
	background-color: #f7f8f3;
	font-size: .9rem;
}
.simpleTile:hover .simpleTileInfo {
	opacity: 1;
	transition: opacity 0.8s;
}

.simpleTileInfoImg {
	display: block;
	height: max(16vmin , 96px);
}
.simpleTileInfoImg img {
	max-height: max(16vmin , 96px);
	max-width: 100%;
}

.simpleTileInfoTitle	{
	font-size: 1.1rem;	
	text-decoration: none;
	color: #222;
	padding-top: max(1vmin , 6px);
}

.simpleTileInfoArtist {	
	text-decoration: none;
	color: #555;
	width: 100%;
}

.simpleTileInfoSize {
	float: left;
	width: 60%;
	text-decoration: none;
	text-align: left;
	padding-top: .2rem;
}

.simpleTileInfoFormat {
	color: var(--text-light);
	padding-top: .6rem;
	padding-left: .5rem;
	width: fit-content;
	text-align: left;
	float: left;
}
.simpleTileInfoFee {
	font-size: 1.1rem;
	text-decoration: none;
	color: var(--my-orange);
	float: right;
	width: 40%;
	text-align: right;
	padding-top: .6rem;
}
.simpleTileInfoStatus {
	font-family: 'Open Sans', ColaborateThin, Helvetica;
	font-size: max(1.5vmin , 9px);
	text-decoration: none;
	color: #EF08C9;
	float: left;
	width: 40%;
	text-align: right;
	padding-top: max(1.7vmin , 10.2px);
}



/* ===================  Info  ==================== */

#infoContent {
	display: block;
	width: 100%;
}

.indexInfo	{
	width: 60rem;
	margin: auto;
	margin-top: 4rem;
}

#wePresent {
	display: block;
	height: 20.5rem;
	background: url("../imgSys/wePbg.png");
	width: calc(100% - 2 * var(--pnl-margin));
	margin: var(--pnl-margin);
	padding: var(--pnl-maring);
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	overflow: hidden;
}

#tdWpTableLeft {
	float: left;
	width: calc(50% - 3 * var(--pnl-margin));
	height: 17.5rem;
	background-image:url("../imgSys/lager.jpg"); 
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-align: right;
	padding: calc(3rem + var(--pnl-margin)) calc(2 * var(--pnl-margin)) var(--pnl-margin) var(--pnl-margin);
}
#tdWpTableRight {
	float: right;
	width: calc(32% - 2 * var(--pnl-margin));
	height: calc(20rem - 2 * var(--pnl-margin));
	padding: var(--pnl-margin) 18% var(--pnl-margin) var(--pnl-margin);
}

#functionTable {
	background-image:url("../imgSys/lines.png"); 
	background-repeat:no-repeat;
	background-size: contain;
	font-size: .9rem;
}
#functionTable h1 {
	font-size: 32pt;
  	font-family: Amatic;
  	letter-spacing: .1pt;
  	color: var(--text-strong);
  	margin-bottom: 1rem;
  	line-height: 1;
	
}
.tdFunctionTable {
	width: 33%;
	height: 18rem;
}
#funktion td .teaser {
	opacity: 0;	
	transition: opacity 1.5s ease-in 0s; /* explorer 10 */
   -webkit-transition: opacity 1.5s ease-in 0s; /* chrome & safari */
   -moz-transition: opacity 1.5s ease-in 0s; /* firefox */
   -o-transition: opacity 1.5s ease-in 0s; /* opera */
}

#funktion td:hover .teaser {
	opacity: 1;	
}

#funktion table img, #funktionInfo table img {
	width: max(10vmin , 60px);
	height: max(10vmin , 60px);;
}

#seiDabei {
	display: block;
	height: fit-content;
	width: 66rem;
	margin: 4rem auto;
	padding: calc(2 * var(--pnl-margin));
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	background-color: var(--bg);
  	overflow: hidden;
}
#seiDabeiButtons {
	display: inline-block;
	width: 22rem;
	margin: auto;
	height: fit-content;
}

#gutscheinInfo {
	display: block;
	height: 20rem;
	width: calc(100% - 4 * var(--pnl-margin));
	margin: 4rem auto;
}
#gsInfoLeft {
	float: left;
	width: calc(32% - 2 * var(--pnl-margin));
	height: calc(19rem - 2 * var(--pnl-margin));
	padding: calc(2rem + var(--pnl-margin)) var(--pnl-margin) var(--pnl-margin) calc(18% + var(--pnl-margin));
	background-image:url("../imgSys/grau2.jpg"); 
	border-top-left-radius: var(--pnl-corners);
	border-bottom-left-radius: var(--pnl-corners);
	text-align: right;
}
#gsInfoRight {
	float: right;
	height: calc(21rem - 2 * var(--pnl-margin));
	width: calc(50% - 2 * var(--pnl-margin));
	padding: var(--pnl-margin);
	background-image:url("../imgSys/gutscheinfeld1.jpg"); 
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-top-right-radius: var(--pnl-corners);
	border-bottom-right-radius: var(--pnl-corners);
}

#infoMedien {
	display: block;
	width: 66rem;
	margin: 4rem auto;
	padding: calc(2 * var(--pnl-margin));
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	background-color: var(--bg-light);
  	overflow: hidden;
}
#infoMedien h1 {
	margin-bottom: 4rem;
}

#kontakt {
	height: fit-content;
	width: 100%;
	background: url("../imgSys/blau.jpg");
	background-color: #099EB4;
	padding: 4rem 0;
	color: #fff;
}
#kontaktTable {
	width: max(100vmin , 600px);
	margin: auto;
	height: max(15vmin , 90px);
	margin-top: max(5vmin , 30px);
}
.tdKontaktTable {
	width: 33.33%;
	height: max(4vmin , 24px);
}

/* ==================  Index  ==================== */

#slideshow {
	display: block;
	width: calc(100% - 2 * var(--pnl-margin));
	margin: var(--pnl-margin);
	padding: var(--pnl-maring);
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	overflow: hidden;
}

.slide {
	position: relative;
	height: 37.5vw;
	min-height: 500px;
	max-height: 70vh;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	padding-left: 0;
	opacity: 1.0;
}

slide {
	position: relative;
	height: 37.5vw;
	min-height: 500px;
	max-height: 70vh;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	padding-left: 0;
	opacity: 1.0;
}
.slide a {
	display: inline-block;
	height: 100%;
	width: 100%;
}
#slide0 { background: url("../imgSys/insta__desktop.jpg") no-repeat center center; background-size: cover; }
#slide1 { background: url("../images/front_cg_newworks1_desktop.jpg") no-repeat center center; background-size: cover; }
#slide2 { background: url("../imgSys/front_gs__desktop.jpg") no-repeat center center; background-size: cover; }
#slide3 { background: url("../images/front_tu__neueArbeiten_2_desktop.jpg") no-repeat center center; background-size: cover; }

#buttons {
	width: fit-content;
	margin: auto;
	height: max(15vmin , 90px);
}
.buttonFeld {
	float: left;
	width: max(17vmin , 102px);
	height: max(10vmin , 60px);
	margin: max(2vmin , 12px) 0;
}
.infoButton {
	float: left;
	width: max(5vmin , 30px);
	height: max(5vmin , 30px);
	padding: max(2vmin , 12px);
	margin: 0 max(4vmin , 24px);
	border-radius: max(4.5vmin , 27px);
	text-align: center;
	cursor: pointer;
}
.infoButton img {
	width: max(4vmin , 24px);
	margin: auto;
	margin-top: max(0.3vmin , 1.8px);
}
.buttonFeldTxt {
	float: left;
	width: 100%;
	height: max(3vmin , 18px);
	padding-top: max(0.5vmin , 3px);
	text-align: center;
	overflow: visible;
	opacity: 0;
}
#buttons .buttonFeld:hover .buttonFeldTxt {
	opacity: 1;	
	transition: opacity 1s ease-in 0s;
}
#buttonFunktion { 
	background-color: #EF08C9;
}
#buttonGutschein { background-color: #099EB4; }
#buttonNeu { 
	background-color: #ec8000; 
	font-size: max(3.4vmin , 20.4px);
	transform: rotate(-30deg);
	font-family: Amatic; 
	color: #f7f8f3;
	text-shadow: 1px 0 0 #f7f8f3;
}
#buttonFAQ { 
	background-color: #666;
}

#functionTable {
	background-image:url("../imgSys/lines.png"); 
	background-repeat:no-repeat;
	background-size: contain;
	width: max(90vmin , 540px);
}

/* ==================  Presse  =================== */

#presseContent {
	display: block;
	width: 100%;
}

#presseInfo {
	display: block;
	height: 20.5rem;
	width: calc(100% - 2 * var(--pnl-margin));
	height: 16rem;
	margin: var(--pnl-margin);
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	overflow: hidden;
}

#presseInfoLeft {
	float: left;
	width: calc(50% - 3 * var(--pnl-margin));
	height: calc(13rem - 2 * var(--pnl-margin));
	background-image:url("../imgSys/lager.jpg"); 
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-align: right;
	padding: calc(3rem + var(--pnl-margin)) calc(2 * var(--pnl-margin)) var(--pnl-margin) var(--pnl-margin);
}
#presseInfoRight {
	float: right;
	width: calc(32% - 2 * var(--pnl-margin));
	height: calc(13rem - 2 * var(--pnl-margin));
	padding: calc(3rem + var(--pnl-margin)) 18% var(--pnl-margin) calc(2 * var(--pnl-margin));
	background-image: url(../imgSys/grau.png);
}

#presseReports {
	display: block;
	width: 76rem;
	margin: 5rem auto 3rem auto;
}

.presseReport {
	display: grid;
	grid-template-columns: auto 1fr; 
	gap: 2rem;
	width: 76rem;
	margin: 2rem 0;
	padding:var(--pnl-margin);
	border-radius: var(--pnl-corners);
  	background-color: var(--bg);
  	overflow: hidden;
}


/* ==================  Order  ==================== */

#orderContent {
	display: block;
	width: 76rem;
	margin: auto;
	margin-top: 2rem;
	margin-bottom: var(--pnl-margin);
	padding: calc(2 * var(--pnl-margin));
	min-height: calc(100vh - 16rem - 3px);
	background-color: var(--bg-light);
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
}

#orderDeliv {
	display: block;
	width: calc(100% - 2 * var(--pnl-margin));
	padding: var(--pnl-margin);
	background-color: var(--bg);
	border-radius: var(--pnl-corners);
	margin: var(--pnl-margin) 0;
}

#orderOrder {
	display: block;
	width: calc(100% - 2 * var(--pnl-margin));
	padding: var(--pnl-margin);
	background-color: var(--bg);
	border-radius: var(--pnl-corners);
	margin: var(--pnl-margin) 0;
}

#orderPayment {
	display: block;
	min-height: 13rem;
	width: calc(100% - 2 * var(--pnl-margin));
	padding: var(--pnl-margin);
	background-color: var(--bg-light);
	border-radius: var(--pnl-corners);
	margin: var(--pnl-margin) 0;
}

.bemerkung {
	width:300px; 
	float:left; 
	margin-right:50px; 
	margin-bottom: 70px;
	padding: 20px; 
	background-image:url(../../imgSys/punkt.jpg)	
	}

#changePayment {
	float: left;
	width: calc(100% - 2 * var(--pnl-padding));
	padding: var(--pnl-padding);
	background-image: url(../imgSys/punkt.jpg);
	border-radius: var(--pnl-corners);
}
#changePayment a {
	color: var(--text-light);
}

#orderFinish {
	display: block;
	width: calc(100% - 2 * var(--pnl-margin));
	height: 6rem;
	padding: var(--pnl-margin);
	background-color: var(--bg-light);
	border-radius: var(--pnl-corners);
	margin: var(--pnl-margin) 0;
}
.orderFinishLeft {
	width: 75%;
	padding-top: 1rem;
	float: left;
}
.orderFinishRight {
	width: 25%;
	float: right;
}

#orderPaymentChoice {
	display: block;
	height: 8rem;
	width: calc(100% - 2 * var(--pnl-margin));
	padding: var(--pnl-margin);
	background-color: var(--bg-light);
	border-radius: var(--pnl-corners);
	margin: var(--pnl-margin) 0;
}

#orderPaymentLS {
	display: block;
	height: 16rem;
	width: calc(100% - 2 * var(--pnl-margin));
	padding: var(--pnl-margin);
	background-color: var(--bg-light);
	border-radius: var(--pnl-corners);
	margin: var(--pnl-margin) 0;
}
#change_zahlung {
	float: right;
	width: 20rem;
	padding: var(--pnl-padding);
	background-image: url(../imgSys/punkt.jpg);
	border-radius: var(--pnl-corners);
}
#change_zahlung a {
	color: var(--text-light);
}
	
#otherAccount {
	margin: 40px 20px 0 -10px;
	float: left;
	width: calc(100% - 20px);
	background-image: url(../imgSys/punkt.jpg);
}
#otherAccount a {
	color: #555;
}

#paymentFinalise {
	display: inline-block;
	padding-top: 10px;
}

#orderConfirmContent {
	display: block;
	width: 52rem;
	margin: auto;
	margin-top: calc(50vh - 19.5rem);
	margin-bottom: calc(50vh - 19.5rem);
	height: calc(26rem - 3px);
	padding: calc( 2 * var(--pnl-margin) );
	z-index: 11;
	border-radius: var(--pnl-corners);
	border-top: 1px solid #ffffff; /* helle Lichtkante oben */
  	box-shadow: 0 .2rem .4rem rgba(0,0,0,0.2); /* Schatten nach unten */
  	background-color: var(--bg-light);
}


/* ======== Specific Formats ============ */


#kuenstlerlogin {
	font-size: 10pt;
	height: 140px;
	width: 300px;
	color:#000000;
	margin-left: auto;
	margin-right: auto;
	padding: 250px 0 50px 0;
	text-align: left;
}

#login {
	font-size: 10pt;
	height: 140px;
	width: 550px;
	color:#000000;
	margin-left: auto;
	margin-right: auto;
	padding: 250px 0 50px 0;
	text-align: left;
}

#login td {
	padding-left: 30px;
	padding-right: 20px;
}

.standardSubmit {
	font-size: 12px;
	color: #000;
	margin-top: 10px;
	float: right;
}

.divfaq ul li	{
	border: none;   
}

.indexTitle {
	margin-top: 20px;
	margin-bottom: 30px;	
}

.anleitungLinks {
	float: left;
	text-align:center;
	padding-bottom: 30px;
	margin-right: 53px;
	width: 220px;
	font-size: 14px;
}
.anleitungMitte {
	float: left;
	text-align:center;
	padding-bottom: 30px;
	margin-right: 51px;
	width: 322px;
	font-size: 14px;
}
.anleitungRechts {
	float: left;
	text-align:center;
	padding-bottom: 30px;
	width: 206px;
	font-size: 14px;
}


/* ===================== BUTTONS ======================= */

.arrow_r {
	background: url(../imgSys/arrow_r.png) no-repeat center;
	border: none;
	height: 29px;
	width: 29px;
	padding-right: 8px;
	vertical-align: bottom;
}
.arrow_r:hover	{
	cursor: pointer;	
}
.arrow_l {
	background: url(../imgSys/arrow_l.png) no-repeat center;
	border: none;
	height: 29px;
	width: 29px;
	padding-right: 8px;
}
.arrow_l:hover	{
	cursor: pointer;	
}

.erledigtButton:hover {
	background: url(../imgSys/gebuchtBG.gif) no-repeat center;
}




/* ===================== TABELLEN ======================= */


.formular_table td, th	{
	text-align: left;
	padding-bottom: 3px;
	padding-top: 3px;
}

.formular_table th {
	font-weight: normal;
	font-size: 13px;
	padding-bottom: 5px;
}

.errormsg {
	color: #d30000;
	font-size: 8pt;
	vertical-align: top;
}

.abstand td {
	margin-left: 50px;
}

.adminInnerTable {
	width: 800px;
	background: url(../imgSys/adminBg.gif);
}
	





/* ========== Index Formats ================*/
.slide span {
	position: absolute;
	display: block;
	width: 280px;
	opacity: 1;
	margin: 7px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 10px;
	margin-bottom: 50px;
	background-color: #555;
	bottom: 0px;
	left: 0px;
	font-size: 16px;
	text-align: center;
	font-weight: normal;
}


#slideshow .navigation {
	position: absolute;
	bottom: 0px;
	right: 0px;
	display: block;
	z-index: 100;
	color: #ffffff;
	margin: 10px;
	padding: 10px;
	background-color: #D5D5D5;
	opacity: 0.85;
}

#slideshow .navigation a {
	color: #ffffff;
	text-decoration: none;
	outline: none;
}

#funktion td .teaser {
	opacity: 0;	
	transition: opacity 1.5s ease-in 0s; /* explorer 10 */
   -webkit-transition: opacity 1.5s ease-in 0s; /* chrome & safari */
   -moz-transition: opacity 1.5s ease-in 0s; /* firefox */
   -o-transition: opacity 1.5s ease-in 0s; /* opera */
}

#funktion td:hover .teaser {
	opacity: 1;	
}

#funktion table img {
	width: 95px;
	height: 95px;
}



/* ========== Registrierung Formats ================*/

#pwError {
	font-size: 8pt;
}

.gsField {
	width: 60px;
	margin-right: 0;
}
.gsDash {
	float: left;
	width: 30px;
	text-align: center;
	padding-top: 10px;
}

.nlVariant {
	padding: .5rem;
	margin: .5rem .5rem .5rem 0;
	border: 1px solid #ccc;
	width: 10rem;
	height: 3rem;
	float: left;
	border-radius: var(--btn-corners);
}
.ok { 
	display: none; 
	float: left; 
	margin-right: 1rem; }
.btn:checked ~ .nlVariant { border: 1px solid var(--my-pink); background-color: var(--my-pink); color: #fff; }
.btn:checked ~ .nlVariant .ok { display: block; float: left; height: 100%; width: calc(20% - 1rem); }
.nlTxt { 
	float: left; 
	text-align: left; 
	width: 80%; 
	font-size: .8rem; 
}



/* ========== Formats for LoginOverlay / part of the header ================*/


#loginField {
	padding-bottom: calc(2vh + 2vw);
	border-right: 1px solid #ccc;
	width: calc(50% - 10px);
	padding-right: 10px;
	float: left;
}
#newUserField {
	width: calc(50% - 20px);
	float: right;
}
.loginLabel {
	float: left;
	width: 60px;
}
.loginInp {
	float: left;
	width: 150px;
}
.loginField {
	width: 150px;
}
#loginField .button {
	margin-top: 20px;
}
    



#gutschein {
	bottom: 0px;
	left: auto;
	right: auto;
	width: 324px;
	height: 170px;
}




/**
----------------  N E U E   S T Y L E S ----------------------------------------------
**/

/** ------------------ Promo Text Designs ------------------------- */

.h1promo2020 {
	font-size: 64pt;
	font-family: Amatic;
	letter-spacing: .2pt;
	color: #000;
}



/** -------------------- Image Overlay ---------------------------- */

#imageOverlayBg {
	display: none;
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(85, 85, 85, .8);
}
#imageOverlayCanvas {
	display: none;
	margin: auto;
	margin-top: 6vh;
	margin-bottom: 0;
	padding: calc(1vh + 1vw) calc(1vh + 1vw) 0 calc(1vh + 1vw);
	background: #fff;
	width: 70vw;
	height: 85vh;
}
.imageOverlayImg {
	display: none;
}
#imageOverlayImgCanvas {
	width: 70vw;
	height: calc(85vh - 22px - 1.5vh - 1.5vw);
	text-align: center;
}
#imageOverlayImgCanvas img {
	max-width: 100%;
	max-height: calc(85vh - 22px - 1.5vh - 1.5vw);
}

#imageOverlayDescrCanvas {
	margin: auto;
	width: 70vw;
	height: 22px;
	padding: calc(1vh + 1vw) 0 calc(0.5vh + 0.5vw) 0;
	background: #fff;
}
#imageOverlayDescr {
	float: left;
}
#imageOverlayCls {
	float: right;
	cursor: pointer;
	width: 18px;
	height: 22px;
}

/** ----------------- Termination Formats ------------------------- */

.termOption {
	display: block;
	float: left;
	width: calc(33% - 4vh - 4vw);
	padding: calc(1vh + 1vw);
	margin: calc(1vh + 1vw) calc(1.5vh + 1.5vw) calc(1vh + 1vw) 0;
	background-color: #ccc;
	cursor: pointer;
}
.termOption:hover {
	background-color: #EC8000;
}
.medHeight {
	height: calc(1.5vh + 1.5vw);
}
.fullHeight {
	height: calc(3.8vh + 3.8vw);
}
.termBlock {
	display: inline-block;
	width: 100%;
	margin-top: calc(1vh + 1vw); 
	margin-bottom: calc(2vh + 2vw);
}
#termPage1, #termPage2 {
	display: none;
}

#termAuswahlAusl {
	float: left;
	width: 100%;
	display: none;
}
.termAusl {
	float: left;
	width: 100%;
	display: none;
}

.termBtn { display: none;}
.termBtn:checked ~ .termOption { background-color: #EF08C9; color: #fff; }

.termAction {
	display: inline-block;
	width: 100%;
	padding-bottom: calc(2vh + 2vw);
}

#termDateSpec {
	float: left;
	width: 100%;
	display: none;
}
#termExoSpec {
	float: left;
	width: 100%;
	display: none;
}
#termTextFieldFixed {
	display: inline-block;
	width: 700px;
	height: 200px;
	border: 1px solid #555;
	padding: calc(0.5vh + 0.5vw);
	margin: calc(0.5vh + 0.5vw) 0;
}





/** ------------------- overwriting styles ----------------- */

.left {
	float: left;
	margin-left: 0;
}

.right {
	float: right;
	margin-right: 0;
}
.block {
	display: inline-block;
	width: 100%;
}



.turquoiseTxt {
	color: #099EB4;
}
.darkText {
	color: #333333;
}
.magentaText {
	color: var(--my-pink);
}

.rightTxt {
	text-align: right;
}
.centerTxt {
	text-align: center;
}
.whiteTxt {
	color: #fff;
}
.alert {
	color: var(--alert);
}
.success {
	color: var(--success);
}


.orange {
	background-color: #EC8000;
}
.turquoise {
	background-color: #099EB4;
}
.magenta {
	background-color: #B60699;
}
.beige {
	background-color: #F7F8F3;
}

.number {
	font-family: Didact Gothic;
}