@charset "UTF-8";
@import url('/assets/css/fonts.css');
@import url('/assets/css/justified.css');
@import url('/assets/css/lightcase.css');

* { margin: 0; padding: 0; box-sizing: border-box!important; -webkit-box-sizing: border-box!important; outline: none; }

html { background: url(/data/site/hex.png); color: #f2f2f2; font-family: 'Asap', sans-serif; font-size: 16px; line-height: 1.35; }
h1 { color: #d9bd89; font-size: 2.75rem; font-weight: 400; text-transform: uppercase; text-align: center; }
h2 { font-weight: 400; letter-spacing: 1px; margin-bottom: 3rem; text-align: center; text-transform: uppercase; }
h2 .top { color: #d9bd89; display: block; font-size: 1.75rem; margin-bottom: 0.5rem; }
h2 .sub { color: #735a3c; display: block; font-size: 1.375rem; }
h3 { font-size: 1.25rem; font-weight: 400; letter-spacing: 1px; margin-bottom: 3rem; text-align: center; text-transform: uppercase; }
h4 { color: #1f1e1e; font-size: 1.5rem; font-weight: 600; letter-spacing: 1px; margin-bottom: 2rem; text-align: center; text-transform: uppercase; }
a { color: #d9bd89; cursor: pointer; display: inline-block; text-decoration: none; }
a:hover { color: #735a3c; }
p { margin-bottom: 1rem; }
img { display: block; max-width: 100%; }
hr { border: none; border-top: 2px solid #736e6c; margin-bottom: 1rem; }

#bgvid { background-size: cover; bottom: 0; position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; right: 0; width: auto; height: auto; z-index: -100;  }

.flex { width: 100%; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.content { margin: 0 auto; max-width: 80rem; width: 98%; }

.background { background-color: hsla(33,48%,45%,0.3); }
.between { justify-content: space-evenly; }
.topborder { border-top: 7px solid; border-image: linear-gradient(90deg, #735a3c 0%, #d9bd89 50%, #735a3c 100%); border-image-slice: 1; }
.fullborder { border: 2px solid; border-image: linear-gradient(90deg, #735a3c 0%, #d9bd89 50%, #735a3c 100%); border-image-slice: 1; }
.column { column-count: 2; column-gap: 2rem; }
.listing { column-count: 3; column-gap: 2rem; }
.heading { color: #d9bd89; display: block; font-size: 1.125rem; font-weight: 600; margin-bottom: 1.5rem; padding: 0.5rem; }
.justify { justify-content: flex-start; }
.more { background-color: hsla(0,3%,12%,0.5); border: 2px solid #736e6c; box-shadow: 0 0 10px #1f1e1e; color: #d9bd89; display: block; letter-spacing: 1px; margin: 3rem auto 0; max-width: 18rem; padding: 0.5rem 1rem; text-align: center; text-transform: uppercase; }
.more img { border: none !important; padding: 0 !important; margin: 0 auto !important; }
.small { color: #736e6c; font-size: 0.875rem; font-style: italic; }
.whitespace { padding: 1rem 9vw 3rem; }

.enter { height: 100vh; }
.enter .logo { padding-top: 30vh; }
.enter .icon { bottom: 5vh; color: #d9bd89; left: 0; margin: 0 auto; position: absolute; right: 0; text-align: center; }
.enter .icon span { display: block; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }

.logo { text-align: center; }
.logo img { max-height: 10rem; margin: 0 auto; }

.navigation { width: 18rem; position: fixed; top: 5vh; z-index: 10; }
.navigation .toggle { border: solid; border-width: 2px 0 2px 2px; border-image: linear-gradient(90deg, #735a3c 0%, #d9bd89 50%, #735a3c 100%); border-image-slice: 1; cursor: pointer; height: 3.5rem; padding: 0.5rem; width: 3.5rem; }
.navigation .toggle svg { height: auto; width: 100%; }
.navigation .menu { background-color: hsla(0,3%,12%,0.95); border: 2px solid #736e6c; padding: 0.875rem 0.75rem; width: 14.5rem; }
.navigation .menu span { display: block; margin-bottom: 0.5rem; }
.navigation .menu ul { list-style: none; margin-bottom: 1rem; }
.navigation .menu ul li { padding: 0.25rem 0.375rem; text-transform: uppercase; }
.navigation .menu ul li a { font-size: 1.25rem; font-weight: 600; letter-spacing: 1px;}
.navigation .menu ul li a.current { color: #735a3c; }
.navigation img { display: inline-block; height: 2rem; padding: 0.25rem 0.375rem; }
.inactive { right: -14.5rem; transition: 1s ease all; }
.active { right: 0; transition: 0.5s ease all; }

.intro { background: rgb(31,30,30); background: linear-gradient(hsl(0,3%,12%) 0%, hsl(0,3%,18%) 25%, hsla(17,6%,24%) 50%, hsl(0,3%,18%) 75%, hsla(0,3%,12%) 100%); box-shadow: 0 0 10px #1f1e1e; padding: 3rem 0; }
.intro img { border: 2px solid #736e6c; box-shadow: 0 0 5px #1f1e1e; margin: 0 auto 3rem; max-width: 90%; }
.info p { font-size: 1rem; text-align: justify; }

.modul { padding: 3rem 0; }
.modul ul { list-style: none; margin: 1rem; } 
.modul ul li { margin-bottom: 1rem; margin-left: 1rem; break-inside: avoid;}
.modul ul li:before { color: #d9bd89; content: '•'; margin-right: 0.5rem; margin-left: -0.875rem; }

.contact { background: #736e6c; padding: 2rem 0 0; }
.contact .phone { color: #d9bd89; display: block; font-size: 3rem; margin-bottom: 1rem; text-align: center; }
.contact .social a { color: #d9bd89; }
.contact .social a:hover { color: #1f1e1e; }
.contact .social svg { width: 3rem; height: auto; }

.seal { text-align: center; }
.seal img { max-height: 10rem; margin: 2rem auto 1rem; }

/* REISEDATEN */

.next { margin-bottom: 1.5rem; width: 18rem; }
.next span { display: block; line-height: 1; }
.next .calendar { background-color: hsla(33,48%,45%,0.3); border-width: 8px 2px 2px 2px; border-style: solid; border-image: linear-gradient(90deg, #735a3c 0%, #d9bd89 50%, #735a3c 100%); border-image-slice: 1; padding: 0.375rem 0.25rem 0.25rem; position: relative; text-align: center; width: 4.5rem; z-index: 2; }
.next .calendar .day { font-size: 1.75rem; }
.next .calendar .month { color: #d9bd89; font-size: 0.875rem; text-transform: uppercase; }
.next .calendar .year { color: #d9bd89; font-size: 0.75rem; }
.next .location { background-color: hsla(0,3%,12%,0.5); border: solid #736e6c; border-width: 2px 2px 2px 0; box-shadow: 0 0 10px #1f1e1e; flex-grow: 2; margin-top: 6px; padding: 0.5rem 1rem ; }
.next .location .city { color: #d9bd89; font-size: 1.5rem; }
.next .location .studio { color: #736e6c; font-size: 0.875rem; }
.next .location a { display: block; }
.next .location svg { color: #736e6c; height: 1rem; float: left; width: 1rem; }

.date { margin-bottom: 2.5rem; width: 100%; page-break-inside: avoid; break-inside: avoid; }
.date::after { border-bottom: 3px solid #d9bd89; height: 1rem; width: 3rem; display: block; }
.date span { display: block; line-height: 1; }
.date .calendar { border-width: 8px 2px 2px 2px; border-style: solid; border-image: linear-gradient(90deg, #735a3c 0%, #d9bd89 50%, #735a3c 100%); border-image-slice: 1; margin: 0 2% 1rem 0; padding: 0.375rem 0.25rem 0.25rem; position: relative; text-align: center; width: 4.5rem; z-index: 2; }
.date .calendar .day { font-size: 1.75rem; }
.date .calendar .month { color: #d9bd89; font-size: 0.875rem; text-transform: uppercase; }
.date .calendar .year { color: #d9bd89; font-size: 0.75rem; }
.date .location { margin-bottom: 1.5rem; }
.date .location .city { color: #d9bd89; font-size: 1.5rem; margin-bottom: 0.25rem; }
.date .location .studio { color: #736e6c; font-size: 0.875rem; margin-bottom: 0.25rem; }
.date .location .note { color: #736e6c; font-size: 0.875rem; }
.date .location a { display: block; }
.date .location svg { color: #736e6c; height: 1rem; float: left; width: 1rem; }

/* PORTFOLIO */

.portfolio .item { margin-bottom: 2rem; }

.setcard table { background-color: hsla(0,3%,12%,0.5); border-collapse: collapse; width: 100%; }
.setcard table td { border: 2px solid #736e6c; padding: 0.25rem 0.5rem; width: 50%; vertical-align: top; }

/* GALERIE */

.gallery .item { margin-bottom: 2rem; }
.gallery .item img { box-shadow: 0 0 10px #1f1e1e; }

/* VIDEO */

.video .item { border: 2px solid #736e6c; color: #d9bd89; margin: 1rem 1% 0; position: relative; overflow: hidden; text-align: center; width: 48%; }
.video .item .controls { background-color: hsla(0,3%,12%,0.5); bottom: 0; display: block; left: 0; padding: 20% 1rem 0; position: absolute; right: 0; top: 0; width: 100%; }
.video a.item:hover .controls { color: #735a3c; }
.video .item .controls svg { height: auto; position: relative; width: 4rem; z-index: 5; }


/* INTERVIEW */

.interview .item {font-size: 1.125rem; padding: 1rem ; }
.interview .item:first-child { border-width: 0; }
.interview .item .question { font-weight: 600; }

/* KONTAKT */

form { margin: 0 auto; width: 80%; }
form input[type='text'], form input[type='email'], form input[type='date'], form input[type='tel'], form textarea, form select { background: #ffffff; border: 1px solid #cccccc; border-radius: 3px; color: #555555; font-family: 'Asap', sans-serif; font-size: 1.125rem; font-weight: 300; margin: 0 0 1.25rem; padding: 1.25rem; width: 100%; }
form input[type='submit'] { background: #d9bd89; border: none; cursor: pointer; font-family: 'Asap', sans-serif; font-size: 1.125rem; font-weight: 400; margin: 0 0 1.25rem; padding: 1.5rem; width: 100%; color: #ffffff; text-transform: uppercase; letter-spacing: 1px;  }
form input[type='submit']:disabled { background: #735a3c; color: #736e6c; cursor: default; }
form select { width: 100%; border-color: #cccccc!important; border-radius: 0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
form a { font-size: 1rem; }

.block { margin: 0 auto; width: 31.333%; }
.blocklong { margin: 0 auto; width: 98%; }
.fieldapprove { border: 1px solid #d9bd89; border-radius: 3px; text-align: left; margin: 0 0 1.5rem; padding: 1rem; }
.fieldapprove input { margin: 0 0 0; }
.fieldapprove a { color: #d9bd89; display: inline-block; }
.fielddate table { margin: 0; width: 100%; }
.fielddate table tbody, .fielddate table tr, .fielddate table td { display: block; width: 100%; }
.fielddate select { display: inline-block; width: 32%; }
.captchapic img { background: #d9bd89; border: none; margin: 0 0 2rem; float: left; width: 100%; }
.captchafield input { height: 70px; float: left; width: 100%; margin: 0 0 2rem 3%; }
.required:after { content: '*'; color: #8c8c8c; float: right; font-size: 1.375rem; line-height: 1rem; padding: 0.375rem 0 0 0.375rem; }

/* LINKS */

.code { background-color: hsla(0,3%,12%,0.5); border: 2px solid #736e6c; box-shadow: 0 0 10px #1f1e1e; font-size: 0.875rem; padding: 1rem; }

.banner .item { margin-bottom: 2rem; text-align: center; }
.banner .item img { margin: 0 auto; }
.banner .item a { color: #d9bd89; display: inline-block; }

/* IMPRESSUM */

iframe { border: 2px solid #736e6c; box-shadow: 0 0 10px #1f1e1e; height: 200px; width: 100%; }

/* MEDIA QUERIES */

@media only screen and (max-width: 1280px) {

	.whitespace { padding: 1rem 5vw ; }
	h1 { font-size: 2.5rem; }
	h2 .top { font-size: 1.5rem; }
	h2 .sub { font-size: 1.25rem; }

}

@media only screen and (max-width: 720px) {

	.whitespace { padding: 1rem 2vw ; }
	h1 { font-size: 1.75rem; }
	h2 .top { font-size: 1.25rem; }
	h2 .sub { font-size: 1rem; }
	.logo img { max-height: 7rem; }
	.date { width: 100%; }
	.video .item { width: 100%; }
	.contact .phone { font-size: 2.125rem;}
	.contact .social svg { width: 2.125rem; height: auto; }
	.seal img { max-height: 7rem; margin: 1rem auto 1rem; }

	.column { column-count: 2; column-gap: 2rem; }
}

@media only screen and (max-width: 480px) {

	.navigation { width: 17rem; }
	.navigation .toggle { height: 3rem; padding: 0.5rem; width: 3rem; }
	.navigation .menu { width: 14rem; }
	.navigation .menu ul li a { font-size: 1.125rem; }
	.inactive { right: -14rem; }
	
	.column { column-count: 1; column-gap: 2rem; }
	form { margin: 0 auto; width: 100%; }
	.block { margin: 0 auto; width: 100%; }
}