@charset "UTF-8";

/* Universal-Selektoren */

html            {
                box-sizing: border-box;
                }

*, ::before, ::after  {
                      box-sizing: inherit;
                      }

*				{
				padding: 0;
				margin: 0;
				font-family: 'Calibri', 'Arial', sans-serif;
				}

p, h1, h2,h3, h4, h5, h6, address	{
							margin: 0.5rem;
							}

p							{
							line-height: 1.7;
							}

a							{
							text-decoration: none;
							}

a::before, address::before			{
							padding-right: 0.2rem;
							font-family: FontAwesome;
							font-size: 0.8em;
							}


a[href^="mailto"]::before	{
							content: "\f003";
							}

a[href^="http"]::before	{
							content: "\f08e";
							}

a[href^="https"]::before	{
							content: "\f023";
							color: green;
							}

a[href*="twitter.com"]::before	{
							content: "\f099";
							color: #1DA1F2;
							}

a[href*="facebook.com"]::before	{
							content: "\f230";
							color: #3B5998;
							}

a[href*="plus.google.com"]::before	{
								content: "\f2b3";
								color: #db4437;
								}

a[href*="youtube.com"]::before		{
								content: "\f167";
								color: #FF0000;
								}

address::before		{
							content: "\f015";
							}

a[href^="tel"]::before		{
							content: "\f095";
							}

a[href^="tel:+491"]::before		{
							content: "\f10b";
							}


a[href^="fax"]::before		{
							content: "\f1ac";
							}

html			{
				background-color: #b7b7b7;
				min-width: 18rem;
				}

img				{
					max-width: 100%;
					}

body			{
				display: flex;
				position: relative;
				flex-flow: column;
				margin: 0 auto;
				max-width:1200px;
				background-color: #FFFFFF;
				box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
				}

header			{
				background-color: #9B009B;
				color: #FFFFFF;
				padding-right: 4rem;
				min-height: 5rem;
				}

header h1		{
				flex: 1 1 auto;
				min-height: 3rem;
				height: auto;
				font-size: 1.7em;
				line-height: 1em;
				font-weight: normal;
				}

header h1 small {
				font-size: 0.5em;
				text-transform: none;
				}

nav				{
				margin-right: -3rem;
				}

#breadcrumbs	{
				list-style-type: none;
				display: flex;
				flex-flow: row;
				height: 2rem;
				line-height: 2rem;
				padding: 0 1rem;
				background-color: rgba(0,0,0,0.05);
				color: #9B009B;
				}

#breadcrumbs li			{
						margin-left:0.5rem;
						}

#breadcrumbs li:first-child a::before		{
										content: "\f015";
										color: #000000;
										font-family: FontAwesome;
										}

#breadcrumbs li::after	{
						content: "\f054";
						font-family: FontAwesome;
						font-size: 0.7em;
						margin-left: 0.5rem;
						}

#breadcrumbs li:last-child::after	{
						content: "";
						}

main			{
				flex: 1 0 auto;
				display: flex;
				flex-flow: row wrap;
				margin-bottom: 2rem;
				padding: 0 2rem;
				}

main header       {
                  background-color: inherit;
                  color:#9B009B;
                  font-variant: small-caps;
                  border-bottom: 5px dotted #9B009B;
                  min-height: auto;
                  line-height: inherit;
                  margin-top: 1rem;
                  width: 100%;
                  }

main > section		{
									flex: 2 1 0%;
                  max-width: 100%;
									}

main > aside			{
									flex: 1 0 100%;
									max-width: 220px;
									margin: 1rem;
									}

footer			{
				background-color: #9B009B;
				color: #FFFFFF;
				min-height: 5rem;
				display: flex;
				flex-flow: row wrap;
				justify-content: center;
				margin-top: 1rem;
				}

footer *	{
				background-color: inherit;
				color: inherit;
				}

footer nav			{
								background-color: none;
                width: 100%;
                margin: inherit;
								}

footer nav ul		{
								flex: 1 1 auto;
								height: auto;
								display: flex;
								flex-flow: row wrap;
								visibility: visible;
								background-color: inherit;
								}

footer nav li		{
						flex: 0 0 100%;
						line-height: inherit;
						height:inherit;
						border-bottom: none;
            padding: 0;
						}

footer nav li:hover   {
                  background:none;
                  font-weight: bold;
}


footer address, footer a	{
                display: inline-table;
								margin: 0;
								margin-left: 1rem;
								padding: 0;
								}

footer address::before, footer a::before		{
							display: table-cell;
							width: 1.5rem;
							text-align: center;
							color: inherit;
							}

footer div	{
				flex: 1 1 0%;
        width: 100%;
				min-width: 17rem;
				margin: 0.5rem;
				}

footer div h2	{
						font-size: 1rem;
						text-transform: uppercase;
						border-bottom: 0.05rem dotted;
						margin-bottom: 0.25rem;
						margin-right: 1rem;
						text-align: center;
						}

footer div#copyright				{
										flex: 0 0 100%;
                    max-width: 100%;
										text-align: center;
                    margin-top:1rem;
										}

footer div#copyright a				{
                    margin-left:0rem;
										}

/* Navigation */

nav label				{
						border: 1px solid;
						border-radius: 0.125rem;
						padding: 0.25rem;
						position: absolute;
						right:0.5rem;
						top: 2.3rem;
						height: 2rem;
						line-height: 2rem;
						width: 2rem;
						text-align: center;
						font-family: FontAwesome;
						}

nav label:after		{
						content: "\f0c9";
            line-height: 1.4rem;
            height: 1.4rem;
            display:block;
						}

nav input 				{
						display: none;
						}

nav input:checked ~ ul	{
									visibility: visible;
									height: auto;
									}

nav input:checked ~ label			{
									background-color: #000000;
									background-color: rgba(0,0,0,0.3);
									}

nav input:checked ~ label::after	{
									content: "\f00d";
									}



nav ul			{
				background-color: rgba(255,255,255,0.4);
				list-style-type: none;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin: 0;
				padding: 0;
				height: 0;
				visibility: hidden;
				justify-content: flex-start;
				box-sizing: -ms-border-box;
				box-sizing: border-box;
				}

nav ul ul		{
				visibility: visible;
				height: auto;
				width: 100%;
				}

nav a			{
				text-decoration: none;
				display: block;
				color: inherit;
				}

nav li			{
				flex: 0 0 100%;
				height: auto;
				line-height: 3rem;
				text-align: center;
				box-sizing: inherit;
				height: inherit;
				}

nav li li:nth-of-type(even)		{
							background-color: rgba(255,255,255,0.1);
							}

@media screen and (min-width: 20rem)	{

footer div		{
				min-width: 17rem;
				width: calc(100%/2 - 20px);
				max-width: 25rem;
				}

nav li			{
				flex: 0 0 50%;
				border-left: none;
				}

nav li li		{
				flex: 0 0 100%;
				}
										}

@media screen and (min-width: 40rem)	{

#breadcrumbs::before	{
						Content: "Current page:";
						margin-right: 0.5rem;
						}

#breadcrumbs[lang="de"]::before	{
						Content: "Aktuelle Seite:";
						}

header			{
				display: flex;
				flex-flow: row wrap;
				}

nav				{
				align-self: flex-end;
				}

nav label		{
				visibility: hidden;
				height: 0;
				font: 0/0 sans-serif;
				}

nav ul			{
				flex: 0 0 auto;
				align-content: flex-end;
				visibility: visible;
				height: auto;
				background-color: inherit;
				}

nav ul ul		{
				visibility: hidden;
				font: 0/0 serif;
				height: 0;
				width: 0;
				background-color: #3B3B3B;
				border-radius:10px;
				border-top-left-radius: 0;
				}

nav li			{
				flex: 1 0 auto;
				padding: 0 1rem;
				width: auto;
				border-bottom: 5px solid transparent;
				position: relative;
				}

nav li li		{
				border-bottom: none;
				white-space: pre;
				text-align: left;
				}

nav li:hover, nav li.active	{

				border-bottom-color: #4C004C;
				}

nav li:hover ul	{
				z-index:1;
				display: block;
				visibility: visible;
				height: auto;
				width: auto;
				font: inherit;
				position: absolute;
				top: 3rem;
				left: 0rem;
				color: inherit;
				}

}

nav li:hover	{
				background-color: rgba(0,0,0,0.3);
				}

.gallery		{
				flex: 0 0 100%;
				display: flex;
				flex-flow: row wrap;
				align-content: center;
				justify-content: center;
				margin-bottom: 2rem;
				}

.gallery header, .gallery footer  {
                                  flex: 0 0 100%;
                                  background-color: inherit;
                                  color: #9B009B;
                                  }

.gallery figure	{
				flex: 1 0 calc(100%);
				display: flex;
				flex-flow: column;
				max-width: 15rem;
				border-radius: 2px;
				margin: 1rem;
				padding: 0rem;
				box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
				transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        align-self: flex-end;
				}

.gallery figure:hover	{
						box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
	          }

.gallery figure *	{
					max-width: inherit;
					height: auto;
					margin: 0 auto;
					}

.gallery figure img		{
							width: 100%;
							height: auto;
							}

.gallery figure figcaption	{
							font-size: 0.8em;
							vertical-align: top;
							text-align: center;
							padding: 0.12rem 1rem 0.5rem 1rem;
							}

.button			{
				display: flex;
				flex: 1 1 auto;
				justify-content: center;
				flex-flow: row wrap;
				font-size: 3rem;
				padding: 0.5rem;
				color: #333333;
				}

.button a		{
				border-radius: 10px;
				display: flex;
				flex-direction: column;
				margin: 1rem;
				width: 15rem;
				height: 15rem;
				justify-content: center;
				background-color: #EEEEEE;
				box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
				transition: all 1.0s cubic-bezier(.25,.8,.25,1);
				}

.button a:hover	{
						box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
						background-color: #333333;
						color: #FFFFFF;
						}

.button span, .button img				{
						flex: 0 0 3rem;
						width: 100%;
						text-align: center;
						}

a[href*="#top"]			{
						display: block;
						z-index: 1;
						position: absolute;
						right: 25px;
						bottom: 25px;
						visibility: hidden;
						font: 0/0 serif;
						width: 0px;
						height: 0px;
						vertical-align: middle;
						text-align: center;
						padding: 5px;
						border-radius: 50%;
						background-color: rgba(255,255,255,0.2);
						}

a[href*="#top"]:hover	{
						background-color: rgba(255,255,255,0.6);
						transition: 0.5s ease-in-out;
						}

@media screen and (min-height: 110vh)	{

a[href*="#top"]	{
							visibility: visible;
							font: inherit;
							line-height: 50px;
							height: 50px;
							width: 50px;
							}

a[href*="#top"]	i			{
							font-size: 2.5em;
							background-color: transparent;
							color: inherit;
							height: inherit;
										}

}

#sprachauswahl          {
                        position:absolute;
                        right:10px;
                        top:10px;
                        }

#sprachauswahl ul       {
                        list-style-type: none;
                        display: flex;
                        }

#sprachauswahl ul li    {
												font-weight: bold;
                        display:inline-flex;
                        border-right:1px solid;
                        padding:0 0.2rem;
												margin: 0;
                        }

#sprachauswahl ul li:last-child     {
                                    border-right:none;
                                    }

#sprachauswahl ul li a              {
                                    text-decoration: none;
                                    color:inherit;
                                    font-size: 0;
                                    }

#sprachauswahl ul li a::before      {
                                    font-family: inherit;
                                    font-size: 1rem;
                                    }

#sprachauswahl ul li a[hreflang*="de"]::before            {
                                    content:'DE';

                                    }

#sprachauswahl ul li a[hreflang*="en"]::before            {
                                    content:'EN';
                                    }

@media screen and (min-width: 35rem)  {

#sprachauswahl ul li a              {
                                    font: inherit;
                                    }

#sprachauswahl ul li a::before      {
                                    font: 0/0 sans-serif;
                                    }}

#skip-link                          {
                                    position: absolute;
                                    left: 0;
                                    top: 0;
                                    transform: translateY(-100%);
                                    }

#skip-link:focus                    {
                                    transform: translateY(0);
                                    }

#skip-link
{
  background: black;
  color: white;
  padding: 0.25em;
}

figcaption span::before					{
                                font-family: FontAwesome;
                                }

figcaption span::after					{
                                content: ' ';
                                }

figcaption span.artist::after			{
                                content: ': ';
                                }

figcaption span.material::before			{
                                content: '- ';
                                }

figcaption span.title           {
                                text-transform: capitalize;
                                }

figcaption span.title::before   {
                                content: '\f10d';
                                }
}