@font-face { font-display: swap; font-family: 'Domine'; font-style: normal; font-weight: 400; src: url('fonts/domine-v19-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap;  font-family: 'Lato';  font-style: normal;  font-weight: 400;  src: url('fonts/lato-v24-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap;  font-family: 'Lato';  font-style: normal;  font-weight: 700;  src: url('fonts/lato-v24-latin-700.woff2') format('woff2'); }

/* kalam-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/kalam-v16-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}




* { box-sizing: border-box; }
html {overflow-y: scroll;}
body {
	font-family: 'Lato', sans-serif; 
	background: linear-gradient(to bottom, #14202a, #2c4558);
	padding: 0;
	margin: 0;
	font-size: 18px;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	color: rgba(0,0,0,0.9);
	
}


h1 {
	font-family: 'Domine', serif; 
	letter-spacing:-1.5px;	
	font-size: 38px;
	line-height: 140%;
	text-align: center;
	padding-top: 75px;
	margin-top: 0;
	color: rgba(0,0,0,0.85);
}
h2 {
	font-family: 'Domine', serif; 
	letter-spacing:-1.5px;	
	font-size: 38px;
	line-height: 140%;
	text-align: center;
	padding-top: 75px;
	margin-top: 0;
	color: rgba(0,0,0,0.85);
}
header {
	min-height: 630px;
	padding-left: 100px;
	padding-right: 100px;
	position: relative;
}
header > span {
	position: absolute;
	top: 400px;
	right: 100px;
		line-height: 140%;
}
header > span strong {
	font-family: 'Domine', serif; 
	color: #fff;
	letter-spacing:-1.5px;	
	font-size: 50px;
	display: block;
	text-align: right;
	text-shadow: 0 0 10px rgba(0,0,0,0.5);
		line-height: 140%;
}
header > span u {
	font-family: 'Domine', serif; 
	color: #fff;
	letter-spacing:-.5px;	
	font-size: 20px;
	display: block;
	text-decoration: none;
	text-align: right;
	text-shadow: 0 0 10px rgba(0,0,0,0.5);
		line-height: 140%;
	
}
article {
	padding-left: 100px;
	padding-right: 100px;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
	z-index: 100;
	position: relative;	
	padding-bottom: 50px;
	background-color: #fff;
}
.korsett > img { box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); z-index: 900; position: relative; width: 100%;}
section {
	display: inline-block;
	width: 100%;
	max-width: 450px;
	text-align: center;
	vertical-align: top;
}
section.wolf{
	display: inline-block;
	width: 100%;
	max-width: 100px;
	vertical-align: top;
	padding-top: 200px;
}

section p {
	letter-spacing:-0.35px;	
	line-height: 34px;
	padding-bottom: 20px;
	
}
#logo {
	position: absolute;
	display: inline-block;
	width: 157px;
	height: 235px;
	background-image: url('banner.png');
	text-align: center;
	padding-top: 20px;
		background-size: contain;

	transition: all 300ms;
}
#logo img {
	width: 70%;
	transition: all 300ms;
	
	
}

#logo:hover {
	margin-top: -6px;
	transition: all 300ms;
	padding-top: 15px;
}
#logo:hover img {
	width: 72%;
	transition: all 300ms;
}







div.korsett {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	 line-height: 80%;
	background-color: #445c88;
}


article.darkroom {

	color: rgba(255,255,255,0.9);
	line-height: 130%;
	background: linear-gradient(to bottom, #22292e, #010102);
	z-index: 200;
	
}
.darkroom h2 {color: #fff;}

footer {

	color: rgba(255,255,255,0.9);
	line-height: 130%;
	background: linear-gradient(to bottom, #22292e, #010102);
	z-index: 200;
	
}


.button {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	background-color: #466191;
	color: #fff;
	display: inline-block;
	padding: 15px;
	
	font-family: 'Domine', serif; 
	letter-spacing:-1.5px;	
	font-size: 26px;
	border-radius: 8px;
	line-height: 140%;
	text-align: center;
	text-decoration: none;
	margin-bottom: 10px;
	
}

nav {
	display: block;
	text-align: right;
	padding-top: 40px;
	padding-bottom: 20px;
	transition: 300ms;
}

nav a {
	display: inline-block;
	font-family: 'Domine', serif; 
	color: #fff;
	text-decoration: none;
	margin-left: 10px;
	transition: all 300ms;
	border-bottom: 1px solid rgba(133,213,255,0);
	padding-bottom: 10px;
	line-height: 140%;

}
@media screen and (min-width: 600px) {
	nav a:hover {
		color: #85d5ff;
		border-bottom: 2px solid rgba(133,213,255,1);
		transition: all 300ms;
		padding-bottom: 2px;
		
	}
}



.button {
	color: #000;

	background: rgb(69,69,69);
	background: linear-gradient(312deg, rgba(70,97,145,1) 0%, rgba(70,97,145,1) 34%, rgba(123,142,176,1) 47%, rgba(255,255,255,1) 48%, rgba(70,97,145,1) 66%, rgba(70,97,145,1) 100%);
	background: linear-gradient(312deg, rgba(133,213,255,1) 0%, rgba(133,213,255,1) 34%, rgba(203,237,255,1) 47%, rgba(255,255,255,1) 48%, rgba(70,97,145,1) 66%, rgba(70,97,145,1) 100%);
	background: linear-gradient(110deg, rgba(133,213,255,1) 0%, rgba(133,213,255,1) 34%, rgba(203,237,255,1) 47%, rgba(255,255,255,1) 48%, rgba(70,97,145,1) 62%, rgba(70,97,145,1) 100%);
	background-size: 300% 300%;
	background-position: -150%;
	transition: all 1200ms, color 300ms 300ms;;
}

.button:hover {
	text-shadow: 0 0 0 rgba(0,0,0,0);
	color: #fff;
	background-position: -50%;
	transition: all 1200ms, color 300ms 300ms;;
}


aside {
	position: fixed;
	top: 0;
	left: 0; 
	right: 0;
	width: 100%; 
	z-index: 1000;
}
aside > div {
	display: block;
	width: 100%; 
	max-width: 1200px;
	padding-left: 100px;
	padding-right: 100px;
	margin: 0 auto;
	position: relative;
	transition: background 300ms;
	background-color: rgba(11,11,11,0);
	box-shadow: 0px 8px 20px rgba(0, 0, 0, 0);
}
.whipped aside nav {
	padding-top: 30px;
	transition: 300ms;
}
.scrolled   aside > div {
	display: block;
	width: 100%; 
	max-width: 1200px;
	padding-left: 100px;
	padding-right: 100px;
	margin: 0 auto;
	transition: background 300ms;
		z-index: 1000;
	background-color: #121619;
	box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.5);
}
.scrolled #logo {
	margin-bottom: -150px;
	width: 80px;
	height: 120px;
}

.wolf {cursor: pointer;}
.wolf > span {position: relative; line-height: 140%;}
.wolf > span > u {
	display: block;
	position: absolute;
	background-image: url('oben.svg');
	background-size: contain;
	width: 100%;
	margin-top: -125px;
	z-index: 500;
	height: 50px;
	text-decoration: none;
	opacity: 0;

}
.wolf > span > i {
	display: block;
	position: absolute;
	background-image: url('unten.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70%;
	width: 100%;
	margin-top: -50px;
	z-index: 500;
	height: 50px;
	text-decoration: none;
	opacity: 0;
	
}
.wolf:hover  > span > u {
	animation: oben 1s linear 1;
}
@keyframes oben {
  0% { margin-top: -125px; opacity: 0;}
  50% { margin-top: -125px; opacity: 0;}
  60% { margin-top: -150px; opacity: 1; }
  70% { margin-top: -100px; opacity: 1; }
  80% { margin-top: -100px; opacity: 1; }
  90% { margin-top: -100px; opacity: 0; }
  100% { margin-top: -100px; opacity: 0; }
}
.wolf:hover  > span > i {
	animation: unten 1s linear 1;
}
@keyframes unten {
  0% { margin-top: -50px; opacity: 0;}
  50% { margin-top: -50px; opacity: 0;}
  60% { margin-top: -25px; opacity: 1; }
  70% { margin-top: -75px; opacity: 1; }
  80% { margin-top: -75px; opacity: 1; }
  90% { margin-top: -75px; opacity: 0; }
  100% { margin-top: -75px; opacity: 0; }
}
.wolf:hover {

	animation: wolfhover 1s linear 1;
}
.wolf:hover img {
	animation: wolfhide 1s linear 1;
}
@keyframes wolfhover {
  0% { }
  40% { 
  
  	transform: rotate(0deg);
	margin-left: 0px;
	margin-right: 0px;
	
  
  }
  50% { 

	transform: rotate(-10deg);
	margin-left: -20px;
	margin-right: 20px;
	
  
  }
  90% { 
  	transform: rotate(0deg);
	margin-left: 0px;
	margin-right: 0px;
  }
  100% { }
}


@keyframes wolfhide {
  0% { opacity: 1;}
  40% { opacity: 1;}
  50% { opacity: 0;}
  90% { opacity: 0;}
  100% { opacity: 1;}
}

aside > div { background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); }

@media screen and (max-width: 1200px) {
	div.korsett {max-width: 600px;}
	article {padding-left: 30px; padding-right: 30px;}
	aside > div {padding-left: 30px; padding-right: 30px; max-width: 600px;}
	.scrolled aside > div { max-width: 600px; padding-left: 30px; padding-right: 30px; }
	section {width: 100%; max-width: 100%;}
	article {text-align: center;}
	section.wolf {padding-top: 0; display: inline-block; }
	h1,h2 {font-size: 30px; line-height: 40px;}
	.button {font-size: 20px;}
	#body-index header {background-position: 30% 0%; margin-bottom: 230px;}
	header > span {top: 680px; text-align: center; display: block; right: initial;  }
	header > span strong {text-align: center;}
	header > span u {text-align: center; }
	#logo {width: 130px; height:193px; z-index: 2000;}
}
#whip {display: none;}
@media screen and (max-width: 600px) {
	header {min-height: 500px; background-size: cover; padding-left: 30px; padding-right:30px; text-align: center;}
	header > span {top: 550px; text-align: center; right: 30px; left: 30px;}
	header > span > strong {font-size: 40px; padding-bottom: 20px;}
	
	aside > div {min-height: 75px; background: linear-gradient(to bottom, #22292e, #010102); }
	#whip {display: block;padding: 20px; padding-right: 0; width: 100px; cursor: pointer; display: inline-block; float: right; z-index: 2000; position: relative;}
	#whip img { width: 100%;}
	aside nav {padding-top: 0px; padding-bottom: 0px; display: block; position: fixed; top: 0; right: 0; left: 0; background: linear-gradient(to bottom, #22292e, #010102); z-index: 1500; line-height: 0; transition: 1000ms;}
	aside nav a {display: block; text-align: center; padding: 0px; font-size: 0; opacity: 0; line-height: 0; margin-top: -10px; transition: 1000ms; line-height: 100%;}
	
	body.whipped #logo {width: 68px; height:100px; z-index: 2000;}
	
	#whips {height: 34px; z-index: 1500;}
	#whips, #whip1, #whip2, #whip3 {transition: 1000ms;}
	#whip1 {transition: 500ms 1000ms; opacity: 1;}
	#whips {transition:  1000ms;}
	
	body.whipped aside nav  {padding-top: 100px; padding-bottom: 70px; display: block; position: fixed; top: 0; right: 0; left: 0; background: linear-gradient(to bottom, #22292e, #010102); z-index: 1500; transition: 1000ms;}
	body.whipped aside nav a {display: block; text-align: center; padding: 20px; font-size: 20px; margin-top: 0px; opacity: 1; transition: 1000ms;}
	body.whipped #whips { height: 100px; transition:  1000ms; }
	body.whipped #whip1 { opacity: 0; transition: 200ms; }
	body.whipped #whip2 { transform: translate(30%, 57%) rotate(-135deg) scale(0.3); transition: 1000ms; }
	body.whipped #whip3 { transform: translate(5%, 44%) rotate(-45deg) scale(0.3); transition: 1000ms;}
}
@media screen and (max-width: 440px) {
	#body-index header {margin-bottom: 230px;}
}


.dreier {max-width: 100%;}
.zweier {max-width: 100%;}
.voll {max-width: 100%;}
@media screen and (min-width: 1200px) {
	
	.dreier ul {

	 display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  grid-gap: 0px;  
	
	}
		
	.zweier ul {
		width: 49%;
		display: inline-block;
		vertical-align: top;
	}
	.zweier ul li {
		padding-right: 50px;
	}

}

ul {
  padding: 0;
  list-style: none;

  width: 100%;
}

ul  li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  text-align: left;
  padding-bottom: 5px;
  padding-right: 30px;
  line-height: 140%;
}

li u {
  margin-right: 10px;
  display: flex;
  align-items: center;
  vertical-align: top;
}

li u i{
  width: 30px;
  height: 30px;
  background-image: url('wolf.svg');
  background-size: contain;
  background-repeat: no-repeat;
  backgroupt-position: top left;
}

footer {text-align: center; padding-bottom: 100px;}
footer > nav {text-align: center; padding-top: 70px;}
footer > nav a {margin-left: 20px; margin-right: 20px;}

footer .wolf {padding-top: 0; max-width: 100px;}
.fusswolf {
	max-width: 200px;
}
footer > section > span {padding-top: 30px; font-size: 14px; opacity: 0.5; display: inline-block;}
footer > section a {color: #85d5ff; text-decoration: none;}
footer > section a:hover {color: #465f8d;}
@media screen and (max-width: 600px) {
	footer > nav a {display: block; margin-bottom: 20px;}
}



a.highleid {
	color: #85d5ff;
	
}

.darkroom h1 {color: #fff;}
div.gal {text-align: center; padding-top: 50px; padding-bottom: 50px;}
div.gal img {max-width: 300px; padding: 20px;}

@media screen and (max-width: 1200px) {
	#body-vorlieben header {background-position: 55% 0%; }
	#body-sessions header {background-position: 14% 0%; }
	#body-kontakt header {background-position: 55% 0%; }
	#body-links header {background-position: 55% 0%; }
	#body-erfahrungsberichte header {background-position: 43% 0%; }
}


@media screen and (min-width: 1200px) {
	section.wolf100 {padding-top: 100px;}
	section.wolf50 {padding-top: 50px;}
	section.wolf10 {padding-top: 10px;}
}

article.links img {max-width: 100%;}

.bericht section > * {text-align: left; max-width: 600px; margin: 0 auto;}
.bericht section > h1 {font-family: 'Kalam', serif; font-size: 50px; margin-bottom: 30px; line-height: 130%;}
.bericht section > h1 i { font-style: normal; font-size: 30px; display: block; margin-bottom: -10px; }
.bericht section > h2 {font-family: 'Kalam', serif; }
.bericht section > p {font-family: 'Kalam', serif; font-size: 20px; line-height: 130%; }

.interview section > * {text-align: left; max-width: 700px; margin: 0 auto;}
.interview section > h1 { margin-bottom: 30px; }
.interview section > p.frage { font-weight: bold; color: #85d5ff;  }
.interview section > p { letter-spacing: -0.1px;  }

@media screen and (max-width: 600px) {
.bericht section > h1 {font-family: 'Kalam', serif; font-size: 30px; margin-bottom: 30px; line-height: 120%; }
.bericht section > h1 i { font-style: normal; font-size: 25px; display: block; margin-bottom: 10px; }	
}

a.text {color: #0971a8; font-weight: bold;}
.darkroom a.text {color: #85d5ff;}