/*
-----------------------------------------------
		www.elke-burmeister.de
	 by www.mkreuzer.de
	and www.lichtsignale.de
----------------------------------------------- */


/*		R E S E T
----------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
		margin: 0;
	    padding: 0;
	    border: 0;
	    outline: 0;
	    font-size: 100%;
	    vertical-align: baseline;
	    background: transparent;
	    font-variant-ligatures: none;
}

html {
		height: 100%;
		-ms-text-size-adjust: none;
		-webkit-text-size-adjust: none;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
	    display: block;
}

blockquote, q {
	    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	    content: "";
	    content: none;
}

a {
	    margin: 0;
	    padding: 0;
	    font-size: 100%;
	    vertical-align: baseline;
	    background: transparent;
	    outline: none;
}

table {
	    border-collapse: collapse;
	    border-spacing: 0;
}

input, select {
	    vertical-align: middle;
}


/*		W E B F O N T S
----------------------------------------------- */

@font-face {
        font-family:"EB-Baton";
        font-weight: 300;
		font-display: swap;
		src: url("fonts/Baton-Light-Web.eot");
		src: url("fonts/Baton-Light-Web.eot?#iefix") format("embedded-opentype"),
			url("fonts/Baton-Light-Web.woff") format("woff");
}

@font-face {
		font-family:"EB-Baton";
		font-weight: 400;
		font-display: swap;
		src: url("fonts/Baton-Regular-Web.eot");
		src: url("fonts/Baton-Regular-Web.eot?#iefix") format("embedded-opentype"),
			url("fonts/Baton-Regular-Web.woff") format("woff");
}

@font-face {
        font-family:"EB-Nantes";
        font-weight: 300;
		font-display: swap;
		src: url("fonts/NantesWeb-Book.eot");
		src: url("fonts/NantesWeb-Book.eot?#iefix") format("embedded-opentype"),
			url("fonts/NantesWeb-Book.woff2") format("woff2"),
			url("fonts/NantesWeb-Book.woff") format("woff");
}

@font-face {
		font-family:"EB-Nantes";
		font-weight: 300;
		font-style: italic;
		font-display: swap;
		src: url("fonts/NantesWeb-BookItalic.eot");
		src: url("fonts/NantesWeb-BookItalic.eot?#iefix") format("embedded-opentype"),
			url("fonts/NantesWeb-BookItalic.woff2") format("woff2"),
			url("fonts/NantesWeb-BookItalic.woff") format("woff");
}

@font-face {
		font-family:"EB-Nantes";
		font-weight: 400;
		font-display: swap;
		src: url("fonts/NantesWeb-Regular.eot");
		src: url("fonts/NantesWeb-Regular.eot?#iefix") format("embedded-opentype"),
			url("fonts/NantesWeb-Regular.woff2") format("woff2"),
			url("fonts/NantesWeb-Regular.woff") format("woff");
}

@font-face {
		font-family:"EB-Nantes";
		font-weight: 400;
		font-style: italic;
		font-display: swap;
		src: url("fonts/NantesWeb-RegularItalic.eot");
		src: url("fonts/NantesWeb-RegularItalic.eot?#iefix") format("embedded-opentype"),
			url("fonts/NantesWeb-RegularItalic.woff2") format("woff2"),
			url("fonts/NantesWeb-RegularItalic.woff") format("woff");
}


/*		B A S I C S
----------------------------------------------- */

body {
		font-family: "EB-Nantes", "Georgia", "Times", "Times New Roman", serif;
		font-weight: 400;
		font-size: 18px;
		line-height: 26px;
		letter-spacing: 0.02em;
		text-align: left;
}

#white {
		color: #000;
		background: #fff;
}

#black {
		color: #fff;
		background: #000;
		letter-spacing: 0.03em;
}

a:link, a:visited {
		text-decoration: none;
		border-bottom: none;
		border-bottom-width: 1px;
		border-bottom-style: solid;
}

#white a:link, #white a:visited {
		color: #000;
		border-bottom-color: transparent;
}

#black a:link, #black a:visited {
		color: #fff;
		border-bottom-color: transparent;
}

#white a:hover, #white a:active {
		border-bottom-color: #000;
}

#black a:hover, #black a:active {
		border-bottom-color: #fff;
}

*:focus {
		outline: none;
}

img {
		max-width: 100%;
		height: auto;
}

#gallery-wrapper, #spotLight {
		display: none;
}

.gallery-bildseite {
		display: block !important;
}

#homelink {
	display: block;
	position: absolute;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
}

.owl-dots {
		display: none;
}

.diashow {
		overflow: hidden;
}

#gallery {
	background-size: cover;
	background-repeat: none;
	background-position: center center;
		width:100vw;
		height:100vh;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}


/*		H E A D E R
----------------------------------------------- */

header {
		padding-top: 13px;
		position: fixed;
		z-index: 9999;
		left: 0;
		top: 0;
		width: 100%;
		padding-bottom: 14px;
}

#white header {
		border-bottom: 1px solid #000;
}

#black header {
		border-bottom: 1px solid #fff;
}

.logo, .logo .full, .logo .half {
		width: 200px;
		margin-left: auto;
		margin-right: auto;
}

.logo .half {
		display: none;
}

#white header {
		background: #fff;
}

#black header {
		background: #000;
}

#mobilenav {
		position: absolute;
		right: 13px;
		top: 14px;
		cursor: pointer;
}

#mobilenav svg {
		width: auto;
		height: 14px;
}

#white #mobilenav svg {
		fill: #000;
}

#black #mobilenav svg {
		fill: #fff;
}

#menu {
	font-family: "EB-Baton", "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
	font-weight: 400;
	font-size: 20px;
	letter-spacing: 0.065em;
	text-transform: uppercase;
}

#secondary {
		font-size: 80%;
		line-height: 1.44;
		margin-top: 26px;
}

nav {
		margin-top: 26px;
		display: none;
		position: relative;
}

nav li {
		list-style: none;
}

nav ul ul {
		font-size: 80%;
		line-height: 1.5;
		margin: 13px 0;
}

nav ul ul li a {
		padding-left: 26px;
}

nav a {
		display: block;
		padding: 4px 13px 3px 13px;
}

#white .active:link, #white .active:visited {
		border-bottom-color: #000;
}

#black .active:link, #black .active:visited {
		border-bottom-color: #fff;
}

#white .active:hover, .active:active {
		border-bottom-color: #000;
}

#black .active:hover, #black .active:active {
		border-bottom-color: #fff;
}


/*		G E N E R A L
----------------------------------------------- */

#switch {
		float: right;
		position: relative;
		z-index: 30;
		margin: -52px 13px 0 0;
}

#switch li {
		list-style: none;
		text-align: center;
		display: inline-block;
		margin-left: 13px;
}

#switch a {
		border-bottom: none;
}

#switch img {
		width: auto;
		height: 20px;
}

main, #mainsub {
		margin: 156px 13px 78px 13px;
}

main::after {
	  content: "";
	  clear: both;
	  display: table;
}


/*		C O L L E C T I O N
----------------------------------------------- */

.colp {
		text-align: center;
		margin-bottom: 52px;
}

.colp h2 {
		font-family: "EB-Baton", "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
		font-weight: 300;
		font-size: 200%;
		line-height: 1;
		letter-spacing: 0.065em;
		text-transform: uppercase;
}

.colp p {
		text-indent: 0;
		margin-bottom: 13px;
}

.colp a {
		font-family: "EB-Baton", "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
		font-weight: 400;
		font-size: 90%;
		letter-spacing: 0.065em;
		text-transform: uppercase;
}

#white .colp a, #white .textsolo a  {
		border-bottom-color: #000;
}

#black .colp a, #black .textsolo a {
		color: #fff;
		border-bottom-color: #fff;
}

main h1 {
		font-family: "EB-Baton", "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
		font-weight: 300;
		font-size: 250%;
		line-height: 1;
		letter-spacing: 0.065em;
		text-transform: uppercase;
		position: relative;
		left: -2px;
		margin-bottom: 26px;
}


/*		J O U R N A L
----------------------------------------------- */

.colj {
		margin-bottom: 52px;
}

.colj h2, .textsolo h2 {
		font-family: "EB-Baton", "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
		font-weight: 300;
		font-size: 150%;
		line-height: 1;
		letter-spacing: 0.065em;
		text-transform: uppercase;
}

.colj p {
		text-indent: 0;
}

.colj a {
		font-family: "EB-Baton", "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
		font-weight: 400;
		font-size: 90%;
		letter-spacing: 0.065em;
		text-transform: uppercase;
}

#white .colj a {
		border-bottom-color: #000;
}

#black .colj a {
		color: #fff;
		border-bottom-color: #fff;
}


/*		V I T A   E T C .
----------------------------------------------- */

.colv {
		margin-bottom: 52px;
}

.colv h2 {
		font-family: "EB-Baton", "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
		font-weight: 300;
		font-size: 150%;
		line-height: 1;
		letter-spacing: 0.065em;
		text-transform: uppercase;
}

.colv p {
		text-indent: 0;
}

.colv img {
		width: 50%;
		margin-left: auto;
		margin-right: auto;
		display: block;
}

.colk {
		text-align: center;
}

.colk img {
		width: 50%;
		max-width: 150px;
		margin-left: auto;
		margin-right: auto;
		display: block;
		margin-top: 78px;
}

/*		C O N T E N T   P A G E S
----------------------------------------------- */

.text p {
		text-indent: 26px;
}

.text p:first-child {
		text-indent: 0;
}

.extralink {
		margin-top: 26px;
}

#owly {
		position: absolute;
		z-index: 20;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
}

.owl-nav {
	text-align: center;
	font-size: 75px;
}

.owl-nav button {
	height: 75px;
	margin: 0 10px 0 10px;
}


/*		F O O T E R
----------------------------------------------- */

#wirkt {
		margin: 52px 13px 26px 13px;
		padding-bottom: 10px;
		font-size: 125%;
		line-height: 1.22;
		letter-spacing: 0.02em;
}

#wirkt.bildseite {
	position: absolute;
	z-index: 50;
	bottom: 60px;
}

#wirkt::after {
		content: "";
		clear: both;
		display: table;
}

#wirkt li {
		list-style: none;
		display: inline-block;
}

.owlwirkt {
		display: none;
}

footer {
		padding: 26px 0;
}

footer.bildseite .logo {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 15px;
		z-index: 5000;
}

footer .logo .half {
		display: block;
}

footer .logo .full {
		display: none;
}

footer .logo a:hover .half {
		display: none;
}

footer .logo a:hover .full {
		display: block;
}


/*		R E S P O N S I V E
----------------------------------------------- */

@media screen and (min-width: 660px) {

#white header, #black header {
		position: absolute;
		z-index: 100;
		border: none;
		padding: 0;
}

header .logo {
		display: none;
}

#mobilenav {
		display: none;
}

nav {
		display: block !important;
		position: absolute;
		z-index: 100;
		left: 52px;
		top: 78px;
}

nav a {
		display: inline-block;
		padding: 4px 0 3px 0;
}

nav ul ul {
		margin-left: 26px;
}

nav ul ul li a {
		padding-left: 0;
}

#secondary {
		position: relative;
}

.startseite nav, .startseite footer {
		display: none !important;
}

#homelogo {
		display: block;
		position: absolute;
		z-index: 900;
		left: 0;
		top: 0;
		width: 100vw;
		height: 98vh;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
}

.startseite a {
		border-bottom: none !important;
}

#switch {
		float: right;
		position: relative;
		z-index: 200;
		margin: 80px 52px 0 0;
}

#switch img {
		height: 20px;
}

main {
		margin: 0 52px 0 299px;
		padding-bottom: 104px;
		padding-top: 107px;
		min-height: 400px;
		position: relative;
		z-index: 100;
}

#mainsub {
		margin: 0;
}

#wirkt {
		margin: 0;
		position: fixed;
		z-index: 100;
		left: 52px;
		top: 10px;
		bottom: inherit;
		width: 80%;
		width: calc(100% - 104px);
		font-weight: 300;
		font-size: 175%;
		line-height: 1.22;
		letter-spacing: 0em;
}

#wirkt li {
		display: block;
}

#w1 {
	float: left;
}

#w2 {
		text-align: right;
		float: right;
		clear: none;
}

#w3 {
		float: inherit;
		text-align: center;
		clear: both;
}

footer {
		margin-left: 299px;
		position: fixed;
		z-index: 100;
		bottom: 24px;
		padding: 0;
		display: block;
}

footer .logo {
		bottom: 0;
}

footer .half, footer .full {
		margin: 0 !important;
}

.startseite nav {
		display: none;
}

.owlwirkt {
		display: block;
}

#owly {
		left: 10vw;
		top: 0;
		width: 80vw;
		height: 100vh;
}

.owl-nav {
		position: absolute;
		left: 0;
		top: 38%;
		width: 80vw;
		font-size: 100px;
}

.owl-nav button {
		height: 100px;
		margin: 0;
}

.owl-prev {
		display: none;
}

.owl-next {
		position: relative;
		right: -50px;
		float: right;
}

.startseite #wirkt {
	display: block;
}

}


@media screen and (min-height: 507px) and (min-width: 660px) {

#secondary {
		position: fixed;
		left: 52px;
		bottom: 15px;
}

nav {
		position: fixed;
}

}


@media screen and (min-width: 800px) {

	#gallery-wrapper, #spotLight {
				display: block;
		}
		
		.startseite #gallery {
			display: block;
		}

	html, body {
				width:100%;
				height:100%;
				margin:0px;
				padding:0px;
			}
		#gallery-wrapper {
			position:absolute;
			z-index: 20;
			left: 0;
			top: 0;
			width:100vw;
			height:100vh;
			overflow:hidden;
		}
		#spotLight{
			position:absolute;
		top:0px;
		left:0px;
			width:300px;
			height:300px;
			z-index:9999;
		
		
		box-shadow: 7300px 11300px 11300px 20000px rgba(0,0,0,1);
		}
		
		
		.startseite #spotLight{
		
		
		box-shadow: 7300px 11300px 11300px 20000px rgba(255,255,255,1);
		}

}


@media screen and (min-width: 960px) {

.colj, .colp, .colv {
		width: 45%;
		width: calc(50% - 20px);
		float: left;
		margin-bottom: 72px;
}

.colj:nth-child(odd), .colp:nth-child(odd), .colv:nth-child(odd) {
		margin-right: 40px;
		clear: both;
}

.colv:last-child {
		float: right;
		margin-right: 0;
}

.colp {
		width: 45%;
		width: calc(50% - 20px);
		float: left;
		margin-top: 48px;
		margin-bottom: 24px;
}

.text p {
	text-indent: 52px;
}

.text p:first-child {
	text-indent: 0;
}

footer {
		margin-left: 40%;
		margin-left: calc(50% - 100px);
}

.logocentered {
		margin-left: 50%;
		margin-left: calc(50% - 124px + 147px);
}

main h1 {
		font-size: 325%;
		line-height: 1;
		letter-spacing: 0.035em;
		left: -3px;
		margin-bottom: 0;
}

.texth {
		width: 45%;
		width: calc(50% - 20px);
		float: left;
		margin-top: 48px;
}

.textp {
		width: 45%;
		width: calc(50% - 20px);
		float: right;
		margin-top: 48px;
}

.textsolo {
		margin-left: 20%;
		margin-left: calc(50vw - 399px);
}

.owl-nav {
		top: 40%;
}


}


@media screen and (min-width: 1200px) {
	
.colj, .colp, .colv {
		width: 30%;
		width: calc(100% / 3 - 30px);
		max-width: 650px;
		float: left;
		margin-bottom: 72px;
}

.colj:nth-child(odd), .colp:nth-child(odd), .colv:nth-child(odd) {
		margin-right: 0;
		clear: none;
}

.colj:nth-child(3n-2), .colp:nth-child(3n-2), .colv:nth-child(3n-2) {
		margin-right: 45px;
		clear: both;
}

.colj:nth-child(3n-1), .colp:nth-child(3n-1), .colv:nth-child(3n-1) {
	margin-right: 45px;
}

.colv:last-child {
		float: right;
		margin-right: 0;
}

.colv img {
		width: 100%;
		margin-top: 48px;
}

.colk {
		margin-top: 132px;
}

.colp {
		margin-top: 48px;
		margin-bottom: 24px;
}

main h1 {
		font-size: 325%;
		line-height: 1;
		letter-spacing: 0.035em;
		left: -3px;
		margin-bottom: 0;
}

.texth {
		width: 30%;
		width: calc(100% / 3 - 20px);
}

.textp {
		width: 30%;
		width: calc(100% / 3 * 2 - 20px);
}

.owl-nav {
	top: 42%;
}

#spotLight{
	width: 15vw;
	height: 15vw;
	min-width: 300px;
	min-height: 300px;
}

}


@media screen and (min-width: 1500px) {

body {
		font-size: 24px;
		line-height: 33px;
		letter-spacing: 0.02em;
}

.logo .full, .logo .half {
	width: 350px;
}

#menu {
	font-size: 28px;
	letter-spacing: 0.035em;
}

#secondary {
	font-size: 75%;
}

nav li {
		margin-bottom: 5px;
}

#secondary li, nav li li {
	margin-bottom: 0;
}

nav ul ul {
	font-size: 75%;
	line-height: 1.44;
}

#switch img {
	height: 25px;
}

nav {
	left: 66px;
	top: 132px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

nav ul ul {
	margin-left: 33px;
}

#switch {
	margin: 168px 66px 0 0;
}

main {
	margin: 0 66px 0 403px;
	padding-bottom: 165px;
	padding-top: 165px;
}

.text p {
	text-indent: 66px;
}

.text p:first-child {
	text-indent: 0;
}

#wirkt {
	left: 66px;
	width: calc(100% - 132px);
}

.owl-nav {
	top: 45%;
}

footer {
	margin-left: calc(50% - 175px) !important;
}

.colk {
		margin-right: 360px;
}

.textp, .textsolo {
	max-width: 1000px;
	float: left;
	margin-left: 33px;
	margin-top: 13px;
	width: calc(100% / 3 * 2 - 120px);
}

#switch {
		margin-top: 185px;
}

.textsolo {
	margin-left: 34%;
	margin-left: 34.1%;
}

.colv:last-child {
	float: left;
	margin-right: 0;
}

}


@media screen and (min-width: 1800px) {

#owly {
	left: 12vw;
	top: 0;
	width: 76vw;
	height: 100vh;
}

.owl-nav {
	width: 76vw;
}

}