@charset "utf-8";
/* CSS Document */


@font-face {
	font-family: AbsaraSansLight;
	src: url("font/AbsaraSans-Light.otf"); /* TTF file for CSS3 browsers */
}
@font-face {
	font-family: AbsaraSanskursiv;
	src: url("font/absarasanslightitalic.eot"); /* EOT file for IE */
	src: url("font/absarasanslightitalic.ttf"); /* EOT file for IE */
}
@font-face {
	font-family: AbsaraSansreg;
	src: url("font/absarasansregular.eot"); /* EOT file for IE */
	src: url("font/absarasansregular.ttf"); /* EOT file for IE */
}
@font-face {
	font-family: AbsaraSansbold;
	src: url("font/AbsaraSans-Bold.otf"); /* EOT file for IE */
}

/* custom scrollbars */
::-webkit-scrollbar{
	width:22px;
}
::-webkit-scrollbar-track{
	background: #fff;
}
::-webkit-scrollbar-thumb{
	background: #e5c4bb;
	border-radius: 100vw;
	border: 3px solid #fff;
}

@supports (scrollbar-color: red blue){
	*{
		scrollbar-color: #e5c4bb #fff;
	}
}
/* custom scrollbars end */

		/*html, body{		
  scroll-snap-type: y mandatory;
  scroll-padding: 120px 0 0 0;
		}
		.einzelbild, .text, footer{
			scroll-snap-align: start;
		}*/

		.on-off{
			display: none;
		}
		@media all and (max-width:850px){
			html, body{
				scroll-padding: 150px 0 0 0;
			}
		}
		@media all and (max-width:780px){
		.on-off{
			display: block;
		}
		}
		@media all and (max-width:670px){
			html, body{
				scroll-padding: 180px 0 0 0;
			}
		}

/*Extras Ende*/

		html *{
			padding: 0;
			margin: 0;
		}
		* {
			box-sizing: border-box;
			text-decoration: none;
		}
		body{
			font-family: AbsaraSansLight, Verdana, Arial, sans-serif;
			font-size: 1.2rem;
		}
		wrap{
			margin: 0 auto;
			display: block;
			width: 92vw;
		}
		header{
			position: sticky;
			top: 0px;
			padding: 24px 0 0 0;
			background-color: rgba(255, 255, 255, 1);
			display: flex;
			flex-direction: column;
			z-index: 500;
		}
		.content{
			margin-top: 60px;
			text-align: center;
			min-height: calc(100vh - 305px);
		}
		nav{
		}
		nav ul{
			list-style: none;
			padding: 0 24px 0 0;
		}
		.flexbox, nav{
			display: flex;
			width: 100%;
		}
		.right{
			padding: 0 12px 12px 0;
            margin-left: 12px;
		}
		.left ul li{
			margin: 8px 0;
		}
		.left a{
			color: #000;
			border-bottom: 0px;
		}
		.left a:hover{
			border-bottom: 2px solid #000;	
		}
.right ul{
    margin-left: 166px;
}
		.right ul li{
			margin: 8px 12px 8px 0;
		}
		.right a{
			color: #b75b40;
			border-bottom: 0px;
		}
		.right a:hover{
			border-bottom: 2px solid #b75b40;	
		}
		h1{
			font-weight: normal;
			font-size: 180%;
			color: #000;
		}
		h2{
			font-weight: normal;
			font-family: AbsaraSansbold, Verdana, Arial, sans-serif;
			color: #b75b40;
			font-size: 180%;
		}
		h3, .bildtitel{
			font-family: AbsaraSansbold, Verdana, Arial, sans-serif;
			color: #b75b40;
			font-weight: normal;
			font-size: 120%;
		}
.bildtitel{
	margin-right: 12px;
}
		.blacklink{
			color: #000;
			padding: 8px 0 24px 0;
		}
		.highlight{
			color: #b75b40;
			padding: 8px 0 24px 0;
		}
		footer{
			margin: 60px 0 24px 0;
			padding-top: 12px;
			border-top: 1px solid #999;
			text-align: center;
		}
		footer ul{
			list-style: none;
		}
		footer ul li{
			display: inline;
			margin: 0 12px;
		}
		footer ul li a{
			color: #999;
		}
		footer ul li a:hover{
			border-bottom: 1px solid #999;	
		}
.trennlinie{
			height: 10px;
			border-top: 1px solid #999;
	border-bottom: 1px solid #b75b40;
	width: 100%;
	margin-bottom: 40px;display: none;
}
.arbeit{
	width: 100%;
	margin: 60px 0;
	border-bottom: 1px solid #999;
	padding-bottom: 60px;
}
.ohne-linie{
	border: none;
}
.arbeit img{
	max-width: 100%;
	max-height: calc(100vh - 220px);
}
@media (min-aspect-ratio: 2/1) {
.arbeit img{
	max-width: 100%;
	max-height: calc(100vh - 220px);
}
}
video{
	width: 100%;
	max-width: 1000px
}
.arbeit a, .text a{
	color: #000;
	border-bottom: 1px dotted #000;
}
.arbeit a:hover{
	border-bottom: 1px solid #000;
}
.content p{
	line-height: 180%;
	padding: 24px 120px;
	width: 100%;
}
.content .arbeit p{
	padding-top: 8px;
line-height: 150%;
}
.einzelbild{
	text-align: center;
}
.content p.linksbund{
	max-width: 900px;
	margin: auto;
}

@media all and (max-width:1280px){
		wrap{
			width: 90vw;
		}
}
@media all and (max-width:850px){
	*, .einzelbild{
		text-align: left;
	}
	.flexbox {
		flex-direction: column;
		/**font-size: 60%;**/
}
	.left{
		text-align: left;
		width: auto;
		padding-right: 60px;
	}
    .right, .right ul{
        margin-left: 0;
    }
    nav .left{
        padding-right: 0;
    }
	.content p{
		padding: 0;
	}
	html, body{
  scroll-padding: 120px 0 0 0;
		}
}