/* CSS Dokument */

@import url('/assets/css/lightcase.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');
@font-face {
	font-family: "COBAISSI";

	src: url("/assets/fonts/COBAISSI.woff") format("woff"), /* Modern Browsers */
		url("/assets/fonts/COBAISSI.woff2") format("woff2"); /* Modern Browsers */
	font-weight: normal;
	font-style: normal;
}



/* ALLGEMEIN */

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

html { font-family: "Roboto"; font-size: 16px; font-weight: 300; }
body { position: relative; overflow: hidden; }

h1 { font-family: "COBAISSI"; font-size: 3rem; }
h1:after { content: ""; display: block; margin: 0.25rem auto 0; width: 6rem; }
h2 { font-size: 2.5rem; font-weight: 300; line-height: 1; margin-bottom: 2rem; text-align: center; }
h3 { font-family: "COBAISSI"; font-size: 1.5rem; font-weight: 300; letter-spacing: 1px; line-height: 1.15; margin: 0 0 1.5rem; } 
h3:after { content: ""; display: block; margin: 0.25rem 0 0; width: 4rem; }
h4 { font-size: 1.675rem; font-weight: 500; margin: 2rem 0; } 
h5 { font-size: 1.25rem; margin-bottom: 2rem; text-transform: uppercase; }
a { text-decoration: none; }
p { font-size: 1.25rem; font-weight: 300; margin-bottom: 2rem; }
ul { margin-bottom: 2rem; }
li { font-size: 1.25rem; }
img { display: block; max-width: 100%; }

.logo { min-height: 5vh; padding: 2rem 1.5rem 1.5rem; text-align: center; width: 100%; position: fixed; z-index: 99; }

.nav { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(3px); font-size: 1rem; font-weight: 500; position: absolute; z-index: 90; color: #2b2b28; letter-spacing: 1px; text-decoration: none; text-align: center; text-transform: uppercase; width: 8rem; }
.nav_right { height: 5rem; right: 1.5rem; padding: 1rem 1rem 1rem; position: fixed; top: 50%; transform: translateX(50%) rotate(-90deg); }
.nav_left { height: 5rem; left: 1.5rem; padding: 1rem 1rem 1rem; position: fixed; top: 50%; transform: translateX(-50%) rotate(90deg); }
.nav_bottom { height: 4rem; bottom: 0; padding: 1rem 1rem 1rem; position: fixed; left: 50%; transform: translateX(-50%); }

.flex { width: 100%; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: stretch; }
.flex-start { width: 100%; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: flex-start; }

.full { width: 100%; }
.half { width: 50%; }
.threequarter { width: 75%; }
.twothird { width: 66.666%; padding: 2rem; }
.third { width: 33.333%; }
.quarter { width: 25%; }

.space { padding: 2rem 10vw ; }
.center { text-align: center; }
.bold { font-size: 3rem; font-weight: 600; }
.text, .image { margin: 0 auto 3rem; max-width: 900px; }
.text ul { column-count: 3; column-gap: 1rem; }
.text ul li {-webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;  list-style: none; margin: 0 0 0 40px; }
.text ul li:before { content: "•"; margin: 0 0.5rem 0 -1rem; }

#page { height: 100vh; padding: 10rem 5% 5rem; width: 100vw; }
.content { margin: 0 auto; max-width: 1200px; width: 90%; }
.scrollbar { height: 80vh; overflow: hidden; }
/*
#page { 
	overflow: hidden !important;
	-ms-overflow-style: none; }
@supports (-ms-overflow-style: none) {
 #page {
		overflow: auto !important; } }
*/
.impressum { margin: 0 auto 5rem; max-width: 900px; width: 90%; }
.impressum p { font-size: 1rem; }

.news { margin: 0 auto 5rem; max-width: 900px; width: 90%; }
.news .item { margin-bottom: 2rem; }
.news .item img { height: 100%; object-fit: cover; width: 100%; }
.news .item span { display: block; font-size: 0.875rem; font-style: oblique; font-weight: 300; line-height: 1; margin-bottom: 2rem; }

.gallery { margin: 0 auto 5rem; max-width: 1200px; width: 90%; }
.gallery .item { padding: 0.75rem; margin: 1rem 1%; width: 23%; }
.gallery .item:after { content: ""; display: block; margin: 0.5rem auto 0; width: 4rem; }
.gallery .item a { display: block;  position: relative; overflow: hidden; }
.gallery .item a .detail { bottom: -10rem; font-weight: 400; max-height: 10rem; padding: 1.25rem; position: absolute; transition: all ease 0.5s; width: 100%; }
.gallery .item a:hover .detail { bottom: 0rem; transition: all ease 0.5s; }
.gallery .item a .detail span { display: block; font-weight: 300; text-transform: uppercase; }
.gallery .item a .detail .counter { font-family: "COBAISSI"; font-size: 3rem; }

/* FORMULARE */

form { margin: 0 auto; max-width: 900px; width: 70%; }
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: 5px; color: #555555; font-family: 'Open Sans', sans-serif; font-size: 1rem; font-weight: 400; margin: 0 0 1.25rem; padding: 1.125rem; width: 100%; }
form input[type='submit'] { border: none; cursor: pointer; font-family: 'Open Sans', sans-serif; font-size: 1.125rem; font-weight: 600; margin: 0 0 1.25rem; padding: 1.5rem; width: 100%; color: #ffffff; text-transform: uppercase; letter-spacing: 1px;  }
form input[type='submit']:disabled { background: #555555; color: #f5f5f5; cursor: default; }
form select { width: 100%; border-color: #cccccc!important; border-radius: 0; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
form a { font-size: 1rem; }
label { background: #f5f5f5; color: #555555; display: inline-block; margin-left: 0.25rem; padding: 0.25rem 0.5rem; text-align: left !important; width: auto; }

.block { margin: 0 auto; width: 31.333%; }
.blockhalf { margin: 0 auto; width: 48%; }
.blocklong { margin: 0 auto; width: 98%; }
.fieldapprove { text-align: left; margin: 0 0 1.5rem; padding: 1rem; }
.fieldapprove input { margin: 0 0 0; }
.fieldapprove a { 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 { 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: #dd0000; float: right; font-size: 1.375rem; line-height: 1rem; padding: 0.375rem 0 0 0.375rem; }

.banner { margin: 5rem auto; max-width: 900px; width: 90%; }
.banner img { margin: 0 auto; }

.links { position: absolute; left: 2rem; bottom: 0.5rem; }
.imprint { position: absolute; right: 2rem; bottom: 0.5rem; }
.links a, .imprint a { color: #aaaaaa; font-size: 0.75rem; text-decoration: none; text-transform: uppercase; }



/***** MEDIA QUERIES *****/

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

	h1 { font-size: 2rem; }
	h2 {font-size: 1.5rem; }
	h3 { font-size: 1.25rem; }
	h4 { font-size: 1rem; } 
	p { font-size: 1rem; margin-bottom: 1.125rem; }




	.nav { font-size: 0.675rem; width: 6rem; }
	.nav_right { height: 2.5rem; right: 1rem; padding: 0.5rem 1rem 0.5rem;  }
	.nav_left { height: 2.5rem; left: 1rem; padding: 0.5rem 1rem 0.5rem;  }
	.nav_bottom { height: 2rem; bottom: 0; padding: 0.5rem 1rem 0.5rem; }

	#page { padding: 5rem 2.5rem 2.5rem; }
	.scene { margin: 0 0 3rem; }

	.space { padding: 1rem 0 2rem ; }
	.text { margin: 0 auto 1rem; }

	.full { width: 100%; }
	.half { width: 100%; }
	.threequarter { width: 100%; }
	.twothird { width: 100%; padding: 1rem; }
	.third { width: 100%; }
	.quarter { width: 50%; }

	.text ul { column-count: 1; }
	.text ul li { font-size: 1rem }


	.gallery .item { margin: 1rem 1% 1.5rem; width:48%; }

	form { margin: 0 auto 3rem; max-width: 900px; width:100%; }
	.block { margin: 0 auto; width: 98%; }
	.blockhalf { margin: 0 auto; width: 98%; }
	.fieldapprove, .fieldapprove a { font-size: 0.875rem; }

	.links { position: absolute; left: 0.5rem; bottom: 0.5rem; }
	.imprint { position: absolute; right: 0.5rem; bottom: 0.5rem; }
	.links a, .imprint a {  font-size: 0.5rem; }

}


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


}


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



}