:root {
	--color-main: #3c0078;
	--color-main-light: #c8b4f0;
	--color-secondary: #ffa932;
	--color-background: #f3eee4;
	
	--fontsize-small: 0.6rem;
	--fontsize-base: 23px;
	--fontsize-nav: 1rem;
	--fontsize-large:2.2rem;
	
	--abstand: 60px;
	--abstand-half: calc(var(--abstand) / 2);
	--abstand-double: calc(var(--abstand) * 2);
	--header-height: 40px;
	
	--grid: 24;
	--grid-gap: 20px;
	--grid-gap-half: calc(var(--grid-gap) / 2);
	
	--border-width: 1.5px;
}

@font-face {
	font-family: 'Epicene-Regular';
	src: url('../fonts/epicene-text-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Epicene-Italic';
	src: url('../fonts/epicene-text-regular-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* PREVENT SCROLL BOUNCE AT TOP */
html,body{
	overscroll-behavior: none;
}
/* HIDE SCROLLBAR */
body::-webkit-scrollbar{
	display: none;
}
body {
	-ms-overflow-style: none;
}
html {
	scrollbar-width: none;
}



html{
	font-size:var(--fontsize-base);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	background-color:var(--color-background);
	color:var(--color-main);
	font-family: 'Epicene-Regular',serif;
	
	
	line-height:1.2;
	
	overflow-y: scroll; /* TODO */
}

em{
	font-family: 'Epicene-Italic';
	font-style:italic;
}

h1{
	text-transform: uppercase;
	font-family: 'Epicene-Italic';
	font-style:italic;
	padding-bottom:var(--abstand-half);
}
h2{
	text-transform: uppercase;
	font-family: 'Epicene-Italic';
	font-style:italic;
	padding-bottom:var(--abstand-half);
}

h3{
	text-transform: uppercase;
	padding-bottom:var(--abstand-half);
}
.section-accordeon h3{
	font-family: 'Epicene-Italic';
	font-style:italic;
}

a{
	text-decoration: underline;
	text-decoration-thickness: var(--border-width);
	text-underline-offset: 0.2rem;
	transition:all .2s ease;
	color:var(--color-secondary);
}

a:hover{
	color:var(--color-main);
}


main a{
	font-family: 'Epicene-Italic';
	font-style:italic;
}

main a.btn{
	border:1px solid var(--color-main);
	border-radius:9999px;
	font-family: 'Epicene-Regular';
	display:inline-block;
	color:var(--color-main);
	text-decoration: none;
	padding:0.2em 0.6em;
	font-style:normal;
}

main a.btn:hover{
	color:var(--color-background);
	background-color:var(--color-main);
}

blockquote{
	font-family: 'Epicene-Italic';
	font-style:italic;
}
i{
	font-family: 'Epicene-Italic';
	font-style:italic;
}
p:not(:last-child),
ul{
	padding-bottom:var(--abstand-half);
}

.hidden-desktop{
	display:none;
}
.noScroll{
	overflow-y:hidden;
}

/* ---------------------------------
	
	GENERAL LAYOUT STUFF
	
-----------------------------------*/

.container{
	max-width:1920px;
	margin:0 auto;
}
.container-wide{
	max-width:100%;
}
main{
	padding-top:calc(var(--header-height) + var(--grid-gap-half) * 2);
	padding-left:var(--grid-gap-half);
	padding-right:var(--grid-gap-half);
}
main > section:first-of-type{
	padding-top:var(--abstand-double);
}
section{
	padding-bottom:var(--abstand);
}

section.section-text{
	text-align:center;
}
section.section-text .section-inner{
	grid-column:3/23;
}
section.section-images{
	
}
section.section-teasers{
	
}
section.section-carousel{
	/*height:200px;
	border:1px dotted var(--color-main);
	display:flex;
	justify-content: center;
	align-items: center;
	padding-bottom:0px;
	margin-bottom: var(--abstand);*/
}
section.section-team{
	text-align:center;
}

section.section-accordeon{
	
}
.section-accordeon--title{
	display:flex;
	justify-content: space-between;
	border-top:var(--border-width) solid var(--color-main);
	text-decoration: none;
	color:var(--color-main);
	padding:10px 0;
}
.section-accordeon--title h2{
	padding-bottom:0px;
}

.section-accordeon--title span{
	display:flex;
	align-items: center;
	font-family: 'Epicene-Italic';
	font-style:italic;
	transition:color .2s ease;
}
.section-accordeon--title:hover span{
	color:var(--color-main-light);
}
.open .section-accordeon--title span{
	color:var(--color-background);
}
.section-accordeon--title span::after{
	content:'';
	display:inline-block;
	height:12px;
	width:12px;
	background:url(../bilder/icon_pfeil_down.svg) no-repeat scroll center center;
	margin:0 var(--grid-gap);
}
.open .section-accordeon--title span::after{
	background-image:url(../bilder/icon_pfeil_up.svg);
}
.section-accordeon--content{
	padding-top:var(--abstand-half);
	padding-bottom:var(--abstand-half);
	display:none !important;
}
.open .section-accordeon--content{
	display:grid !important;
}
.section-accordeon--content .grid-11,
.section-text-residency .grid-11{
	padding-right:var(--abstand);
}

main ul{
	list-style-position: inside;
	
}
main li::marker{
	content:'• ';
	margin-right:7px;
}
main li{
	/*padding-right:5px;*/
}
main li p{
	display:inline;
}



/* ---------------------------------
	
	GRID SETUP
	
-----------------------------------*/

.grid-container{
	display:grid;
	grid-template-columns: repeat(var(--grid), 1fr);
	column-gap: var(--grid-gap);
	row-gap: var(--grid-gap);
}

.grid-item{  }
.grid-1{ grid-column: span 1; }
.grid-2{ grid-column: span 2; }
.grid-3{ grid-column: span 3; }
.grid-4{ grid-column: span 4; }
.grid-5{ grid-column: span 5; }
.grid-6{ grid-column: span 6; }
.grid-7{ grid-column: span 7; }
.grid-8{ grid-column: span 8; }
.grid-9{ grid-column: span 9; }
.grid-10{ grid-column: span 10; }
.grid-11{ grid-column: span 11; }
.grid-12{ grid-column: span 12; }
.grid-13{ grid-column: span 13; }
.grid-14{ grid-column: span 14; }
.grid-15{ grid-column: span 15; }
.grid-16{ grid-column: span 16; }
.grid-all{ grid-column: 1/-1; }


.padding-1{
	grid-column: 2/24;
	grid-template-columns: repeat(22, 1fr);
}
.padding-2{
	grid-column: 3/23;
	grid-template-columns: repeat(20, 1fr);
}

.grid-container .padding-1 .grid-container{
	grid-template-columns: repeat(22, 1fr);
}
.grid-container .padding-2 .grid-container{
	grid-template-columns: repeat(20, 1fr);
}


/* ---------------------------------
	
	SWIPER
	
-----------------------------------*/


.swiper-wrapper{
	height:100%;
}

.slideshow{
	position:relative;
}
.slideshow--nav-next,
.slideshow--nav-prev{
	position:absolute;
	top:0px;
	bottom:0px;
	width:50%;
	z-index:3;
}
.slideshow--nav-prev{
	left:0px;
	cursor: w-resize;
}
.slideshow--nav-next{
	left:50%;
	cursor: e-resize;
}


.slideshow--nav-prev,
.slideshow--nav-next,
.slideshow--nav-prev:focus,
.slideshow--nav-next:focus{
	outline:none
}


/* ---------------------------------
	
	HEADER / NAV
	
-----------------------------------*/

header{
	position:fixed;
	top:var(--grid-gap-half);
	left:0;
	width:100%;
	

	z-index:3;
	
	/* WITH BACKGROUND
	top:0;
	height:calc(var(--header-height) + var(--grid-gap));
	padding-top:var(--grid-gap-half);
	background: rgb(243,238,228);
	background: linear-gradient(0deg, rgba(243,238,228,0) 0%, rgba(243,238,228,1) 20%);
	*/
}
.header-background{
	position:fixed;
	left:0;
	top:0;
	right:0;
	height:calc(var(--header-height) + var(--grid-gap-half) * 2);
	z-index:2;
	background:var(--color-background);
}


nav{
	height:var(--header-height);
	line-height:var(--header-height);
	text-transform: uppercase;
	padding-left:var(--grid-gap-half);
	padding-right:var(--grid-gap-half);
	font-size:var(--fontsize-nav);
}
nav ul{
	
}
nav ul li{
	display:inline-block;

}
/* ABOUT */
nav ul li:nth-child(1){
	grid-column: 2 / span 4;
	height:var(--header-height);
}
/* STAY */
nav ul li:nth-child(2){
	grid-column: 8 / span 4;
	height:var(--header-height);
}
/* ICON */
/*nav ul li:nth-child(3){
	grid-column: 12 / span 2;
	text-align: center;
	
}
nav ul li:nth-child(3) img{
	height:calc(var(--header-height) * 2.75);
	width:auto;
	position:relative;
	left:50%;
	transform: translateX(-50%);
}*/
/* ATELIER */
nav ul li:nth-child(3){
	grid-column: 14 / span 4;
	height:var(--header-height);
	text-align: right;
}
/* RESIDENCY */
nav ul li:nth-child(4){
	grid-column: 20 / span 4;
	height:var(--header-height);
	text-align: right;
}
nav ul li a{
	color:var(--color-main);
	text-decoration: none;
}
nav ul li.act a{
	text-decoration: underline;
	text-decoration-thickness: var(--border-width);
}
nav ul li a:hover{
	color:var(--color-main-light);
}
#mobile-nav{
	display:none;
}
/*.hamburger{
	padding:var(--grid-gap);
	margin-right:calc(var(--grid-gap) * -1)
}*/
.nav-icon{
	width:150px;
	position:fixed;
	left:50%;
	transform: translateX(-50%);
	top: var(--grid-gap-half);
	z-index:7;
	opacity:1;
	transition:opacity .5s ease;
	/*transition-delay:.2s;*/
}
.nav-icon img{
	width:100%;
}
.b-intro .nav-icon,
.b-intro .hamburger{
	opacity:0;
}


/* HOME INTRO + OVERLAY */

.b-intro{
	overflow-y:hidden;
}
.b-intro main{
	display:none;
}
.home-introimage{
	opacity:0;
	pointer-events: none;
	transition:opacity .5s ease;
	position:absolute;
	z-index:5;
	background-image:url(../bilder/home_introimage.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position: center center;
	left:0;
	top:0;
	right:0;
	bottom:0;
}
.b-intro .home-introimage{
	display:block;
	opacity:1;
}


.header-overlay{
	position:absolute;
	padding-top:var(--grid-gap-half);
	left:0;
	width:100%;
	pointer-events: none;
	z-index:6;
}
.header-overlay .section-inner{
	display:flex;
	justify-content: space-between;
	padding-bottom:30px;
}


.header-overlay .section-inner div:last-child{
	text-align: right;
}
.header-overlay img{
	height:var(--header-height);
	margin-top:var(--grid-gap-half);
	display:inline-block;
	width:auto;
}
.header-overlay--background{
	position:absolute;
	left:0;
	width:100%;
	height:100px;
	pointer-events: none;
	background: rgb(243,238,228);
	background: linear-gradient(0deg, rgba(243,238,228,0) 0%, rgba(243,238,228,1) 20%);
	z-index:4;
}


/* ---------------------------------
	
	SITE: HOME
	
-----------------------------------*/

.section-teasers figure{
	position:relative;
	overflow:hidden; 
}

.section-teasers figcaption{
	position:absolute;
	left:0;
	right:0;
	top:50%;
	transform: translateY(-50%);
	text-align: center;
	font-family: 'Epicene-Italic';
	font-style:italic;
	font-size:var(--fontsize-large);
	color:white;
	text-decoration: none;
	
}
.section-teasers figure img{
	/*transition: transform .5s ease;*/
}
.section-teasers figure:hover img{
	/*transform: scale(1.05);
	transform-origin: center center;*/
}

/* ---------------------------------
	
	SITE: ABOUT
	
-----------------------------------*/

.section-team .grid-12:first-child{
	grid-column: 2 / span 11;
}
.section-team .grid-12:last-child{
	grid-column: 13 / span 11;
}

/* ---------------------------------
	
	SITE: STAY
	
-----------------------------------*/

.section-rooms--infos article{
	
}
.section-rooms--images figure{
	height:100%;
	overflow:hidden;
}
.section-rooms--images img{
	height:100%;
	/* TODO */
}

/* ---------------------------------
	
	SITE: ATELIER
	
-----------------------------------*/

body.b-atelier .section-accordeon--title{
	/*position:relative;*/
}
body.b-atelier .section-accordeon--title h2{
	
}
body.b-atelier .section-accordeon--content{
	padding-bottom:var(--abstand)
}

/* ---------------------------------
	
	SITE: RESIDENCY
	
-----------------------------------*/

/* ---------------------------------
	
	SITE: IMPRINT
	
-----------------------------------*/

.section-imprint h2{
	font-family: 'Epicene-Regular';
	padding-bottom:0px;
}
.section-imprint h2:not(:first-of-type){
	/*padding-top:var(--abstand-half);*/
}
.section-imprint a{
	color:var(--color-main);
	font-style: normal;
	text-decoration: none;
}
.section-imprint a:hover{
	color:var(--color-secondary);
}


/* ---------------------------------
	
	FOOTER
	
-----------------------------------*/


footer{
	font-size:var(--fontsize-small);
	margin-left: var(--grid-gap-half);
	margin-right: var(--grid-gap-half);
	padding-bottom: var(--abstand);
}
footer a{
	font-family: 'Epicene-Italic';
	font-style:italic;
	color:var(--color-main-light);
	text-decoration: none;
}
footer a:hover{
	text-decoration: underline;
	color:var(--color-main-light);
}
footer .section-inner .grid-item:last-child{
	text-align: right;
}
.language-nav a{
	font-family: 'Epicene-Regular';
	display:inline-block;
	color:var(--color-main);
	font-size:0.75rem;
	border:var(--border-width) solid var(--color-main);
	padding:2px 12px;
	border-radius: 50%;
	text-transform: uppercase;
}
.language-nav a:hover{
	text-decoration: none;
	border-color:var(--color-main-light);
}
.language-nav a:first-child{
	/*margin-right:5px;*/
}

/* ---------------------------------
	
	ANIMATIONS
	
-----------------------------------*/

main,footer{
	animation: fadeIn 1s;
}


@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ---------------------------------
	
	RESPONSIVE
	
-----------------------------------*/



@media screen and (max-width: 1300px) {
	/*:root{
		--fontsize-base: 23px;
	}*/
}


/* TABLET */
@media screen and (max-width: 1024px) {
	
	:root{
		--fontsize-base: 20px;
		--fontsize-nav: 25px;
	
	}	
	
	.hidden-desktop{
		display:block;
	}
	.hidden-tablet{
		display:none;
	}
	
	header{
		display:flex;
		justify-content: space-between;
		padding: var(--grid-gap-half);
		background-color:var(--color-background);
		top:0;
		z-index:6;
	}
	.header-background{
		height:calc(var(--header-height) + var(--grid-gap-half) );
	}
	.b-home header{
		background-color:transparent;
	}
	
	.logo-text-mobile{
		
	}
	.logo-text-mobile img{
		height:30px;
	}
	
	main > section:first-of-type{
		padding-top: var(--abstand);
	}
	
	
	/* MOBILE NAV */
	.nav-mobile{
		display:none !important;
		position:fixed;
		background:var(--color-background);
		left:0;
		right:0;
		top:0px;
		padding-top:calc(var(--grid-gap-half) * 2 + var(--header-height) );
		flex-direction: column;
		justify-content: center;	
		height:auto;
		text-align: center;
		font-size:var(--fontsize-nav);
		
	}
	
	.nav-mobile--icon img{
		display:inline-block;
		width:70px;
	}
	
	.nav-mobile--address a{
		color:var(--color-main-light);
	}
	.nav-mobile--address a:hover{
		color:var(--color-main);
	}
	
	
	.nav-mobile nav{
		height: auto;
		text-transform: none;
		line-height:inherit;
		font-size:inherit;
	}
	.nav-mobile nav ul{
		padding-bottom:0px;
	}
	.nav-mobile nav li{
		display:block;
		border-bottom:var(--border-width) solid var(--color-main);
	}
	.nav-mobile nav li:first-child{
		border-top:var(--border-width) solid var(--color-main);
	}
	nav ul li:nth-child(1),nav ul li:nth-child(2),nav ul li:nth-child(3),nav ul li:nth-child(4), nav ul li:nth-child(5){
		text-align: center;
		height:auto;
	}
	.nav-mobile nav a{
		display:block;
		background-color:var(--color-main-light);
		padding:7px;
	}
	.nav-mobile nav a:hover{
		color:var(--color-background);
	}
	.nav-mobile nav li.act a{
		text-decoration: none;
		color:var(--color-background);
	}
	.nav-mobile nav .nav-mobile--link-instagram{
		display:flex;
		justify-content: space-evenly;
	}
	.nav-mobile nav .nav-mobile--link-language-nav{
		padding:7px;
	}
	.nav-mobile nav .nav-mobile--link-instagram a,
	.nav-mobile nav .nav-mobile--link-newsletter a,
	.nav-mobile nav .nav-mobile--link-language-nav a{
		background-color:transparent;
	}
	.nav-mobile nav .nav-mobile--link-language-nav a{
		display:inline-block;
		padding: 2px 12px;
	}
	.nav-mobile nav .nav-mobile--link-instagram a:hover,
	.nav-mobile nav .nav-mobile--link-newsletter a:hover,
	.nav-mobile nav .nav-mobile--link-language-nav a:hover{
		color:var(--color-main-light);
	}
	.nav-mobile--icon,
	.nav-mobile--address,
	.nav-mobile nav{
		padding-bottom:var(--grid-gap-half);
	}
	.nav-mobile--address{
		padding-bottom:var(--grid-gap);
	}
	
	
	
	#mobile-nav{
		display:block;
	}

	.nav-mobile.is-active{
		display:block !important;
	}
	
	/* HAMBURGER ICON */
	.hamburger{
		padding:0px;
		opacity:1;
		transition:opacity .5s ease;
	}
	.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before{
		border-radius: 0px;
		height:var(--border-width);
		background-color:var(--color-main);
	}
	.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before{
		background-color:var(--color-main);
	}
	
	.hamburger-box{
		height:16px;
	}
	.hamburger-inner{
		margin-top:0px;
	}
	.hamburger-inner:before{
		top:-8px;
	}
	.hamburger-inner:after{
		bottom:-8px;
	}
	
	
	/* GENERAL STUFF */
	.section-accordeon--title:hover span{
		color:var(--color-main);
	}
	
	/* HOME */
	
	.header-overlay{
		display:none;
	}
	.b-home main{
		padding-top:0px;
	}
	.b-home main section:first-child{
		padding-top:0px;
	}
	.mobile-logo-icon{
		margin:var(--grid-gap-half);
		position:relative;
		z-index:2;
		margin-top:calc(var(--header-height) + var(--grid-gap-half));
	}
	
	
	
	footer.grid-container{
		display:none;
	}

}

/* MOBILE */
@media screen and (max-width: 800px) {
	:root{
		--abstand: 30px;
		--fontsize-base: 15px;
		--fontsize-nav: 20px;
		--fontsize-small:13px; 
	}	
	.hidden-desktop{
		display:block;
	}
	.hidden-mobile{
		display:none;
	}
	
	.grid-container{
		display:block;
	}
	.grid-item{
		grid-column: 1/-1;
	}
	.grid-item:not(:last-child){
		padding-bottom:var(--grid-gap-half);
	}
	
	
	/* GENERAL LAYOUT STUFF */
	.section-text,
	.section-imprint,
	.section-accordeon--content,
	.section-text-residency {
		padding-left:calc(var(--abstand) - var(--grid-gap-half));
		padding-right:calc(var(--abstand) - var(--grid-gap-half));
	}
	main > section:first-of-type{
		padding-top: var(--abstand);
	}
	.open .section-accordeon--content {
		display: block !important;
		padding-top:calc(var(--abstand) - var(--grid-gap-half));
	}
	.section-accordeon--title span::after{
		margin: 0 var(--grid-gap-half);
	}
	.b-atelier .grid-item:not(:last-child),
	.section-text-residency .grid-item:not(:last-child){
		padding-bottom: var(--grid-gap);
	}
	
	.section-accordeon--content .grid-11,
	.section-text-residency .grid-11{
		padding-right:0px;
	}
	
	.mobile-onlyfirst .grid-item:not(:first-child){
		display:none;
	}
	
	
	
	
	
	/* SLIDESHOW */
	
	.slideshow--nav-prev,
	.slideshow--nav-next{
		display:none;
	}
	
	/* ---------------------------------
		
		SITE: HOME
		
	-----------------------------------*/


	.header-overlay{
		display:none;
	}
	
	
	
	/* ---------------------------------
		
		SITE: STAY
		
	-----------------------------------*/
	
	.section-rooms--images{
		display:grid;
		row-gap:0px;
		column-gap: var(--grid-gap-half);
	}
	.section-rooms--images .grid-12{
		grid-column: 1 / -1;
		
	}
	.section-rooms--images .grid-6{
		grid-column: span 12;
		padding-bottom:0px;
	}
	.section-rooms--images img{
		height:100%;
		/*width:auto;*/
		/* TODO */
	}
	

	
	/* ---------------------------------
		
		SITE: IMPRINT
		
	-----------------------------------*/
	
	.section-imprint .section-inner .grid-item:first-child{
		text-align:center;
		padding-bottom:var(--abstand-half);
	}
	
}

@media screen and (max-width: 500px) {
	.section-accordeon--title span i{
		display:none;
	}
}