/****************************************************************************************************/
/*  D O C S E T T I N G S  */
/****************************************************************************************************/

@charset "UTF-8";

*, *::before, *::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

* {
  -webkit-tap-highlight-color: transparent;
}

* {
	border-width: 0;
	border: 0;
	margin: 0;
	padding: 0;
}

*:focus {
    outline: none;
}

::selection {
  background: rgba(224,223,218,.6);
  color: black;
}

::-moz-selection {
  background: rgba(224,223,218,.6);
  color: black;
}

a {
	text-decoration: none;
	color: black;
	padding: 3px 0px;
	border-radius: 0px;
	transition: 0.5s;
}

a:hover {
	text-decoration: none;
	color: black;
	padding: 3px 10px;
	background: #e6e6e6;
	border-radius: 5px;
}

b, strong {
    font-family: 'CormorantGaramond-Medium', serif;
}

/****************************************************************************************************/

body {
	padding: 0;
	margin: 0;
	font-family: 'CormorantGaramond-Medium', serif;
	font-size: clamp(1rem, 0.9714rem + 0.1905vw, 1.2rem);
    line-height: 1.5em;
	font-style: normal;
	color: black;
}

/* Scrollen bei Overlays verhindern (Datenschutz-Overlay) --> wird beim Klick auf Overlay dem body zugewiesen*/
body.no-scroll {
  overflow: hidden;
}

.wrapper {
	padding: 50px 75px 0 75px;
	background: white;
	max-width: 1920px;
	margin: auto;
	transition: 0.5s;
	overflow: hidden;
}

@media only screen and (max-width: 960px) {
	.wrapper { padding: 25px 50px 0 50px; }
}

@media only screen and (max-width: 600px) {
	.wrapper { padding: 10px 20px 0 20px; }
}

.Logo {
	width: 25%;
	max-width: 450px;
	min-width: 220px;
	margin-left: -1.5vw;
}

.headsplitter {
	position: relative;
	display: inline-block;
}

.headsmalltext {
	position: absolute;
	width: 100%;
	text-align: center;
	top: -3.5em;
	font-size: 0.25em;
	letter-spacing: 0.02em;
	user-select: none;
}

h1 {
	font-family: 'CormorantGaramond-Medium', serif;
	font-size: 4.5em;
	line-height: 2.0em;
	text-align: center;
	cursor: default;
	user-select: none;
}

h2 {
	font-family: 'CormorantGaramond-Medium', serif;
	font-size: 1.8em;
	line-height: 1.3em;
}


/****************************************************************************************************/
/*  I T A L I C   A N I M A T I O N  */

.headline .italic {
	position: relative;
	display: inline-block;
	font-family: 'CormorantGaramond-MediumItalic', serif;
	margin: 0 -0.1em 0 0;
	transform-origin: bottom center;
	transform: skewX(10deg);
	transition: transform 1.5s ease-out, margin 0.5s ease-out;
}

/* Wird mit Javascript animiert */

/****************************************************************************************************/

#frame1 {
	margin-top: 0;
}

#frame2 {
	margin-top: 200px;
}

#frame3 {
	margin-top: 0;
}

.Textboxleft {
	width: 47.5%;
	margin-right: 2.5%;
}

.Textboxright {
	width: 47.5%;
	margin-left: 52.5%;
}

.Referenz {
	position: relative;
	display: inline-block;
	width: 85%;
	height: auto;
	margin: 10px 0;
	/*transition: 0.5s;*/
}

.Portrait {
	width: 47.5%;
	margin-top: 2em;
	margin-left: 2.5%;
	height: auto;
}

.spacer-small { height: 50px; }
.spacer-medium { height: 150px;}
.spacer-large {	height: 200px;}
.spacer-xlarge { height: 750px;}


.Info {
	height: 0px;
	padding: 0 5vw;
	overflow: hidden; 
	opacity: 1.0;
	transition: 0.5s ease-out;
}

.Info-active { 
	background: rgba(224,223,218,.3);
	opacity: 1.0; 
	height: auto;
}


.Impressum {
	font-size: 0.85em;
	line-height: 1.2em;
}

.Datenschutz {
	position: fixed;
	top: -100vh;
	left: 0;
	height: 100vh;
	width: 100vw;
	max-width: 1920px;
	padding: 50px 25vw 0 25vw;
	background: white;
	z-index: 1;
	overflow: scroll;
	opacity: 0;
	transition: 0.5s ease-out;
}
.Datenschutz-active {
	opacity: 1.0;
	top: 0px;
}



@media only screen and (max-width: 1200px) {
	.Textboxleft { width: 75%; margin-right: 25%; }
	.Textboxright { width: 75%; margin-left: 25%; }
	.Portrait { width: 47.5%; padding-top: 60px; margin-left: 0; }
	.spacer-xlarge { height: 300px;}
}

@media only screen and (max-width: 960px) {
	.Textboxleft { width: 47.5%; margin-right: 52.5%; }
	.Textboxright { width: 47.5%; margin-left: 52.5%; }
	.Referenz { width: 72.5%; }
	.Portrait { width: 47.5%; padding-top: 30px; margin-left: 52.5%; }
	.spacer-medium { height: 50px;}
	.spacer-large {	height: 100px;}
	.spacer-xlarge { height: 250px;}
}

@media only screen and (max-width: 768px) {
	.Textboxleft { width: 75%; margin-right: 25%; }
	.Textboxright { width: 75%; margin-left: 25%; }
	.Referenz { width: 100%; }
	.Portrait { width: 47.5%; padding-top: 60px; margin-left: 52.5%; }
	.Datenschutz { padding: 50px 10vw 0 10vw; }
}

@media only screen and (max-width: 600px) {
	.Portrait { width: 72.5%; padding-top: 60px; margin-left: 27.5%; }
}

.uk-slider .uk-slidenav {
	color: white !important;
	opacity: 1 !important;
}

.uk-slider .uk-slidenav:hover {
	background: none !important;
}

.plus-active {
	background: rgba(0,0,0,.2);
	border-radius: 50%;
}