@charset "utf-8";
@import url("reset.css");

@import url("animation.css");
@import url("line-awesome.css");
/* @import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Cabin+Condensed:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

@font-face {
	font-family: 'Line Awesome Brands';
	src: url("../fonts/la-brands-400.eot");
	src: url("../fonts/la-brands-400.eot?#iefix") format("embedded-opentype"), 
		 url("../fonts/la-brands-400.woff2") format("woff2"), 
		 url("../fonts/la-brands-400.woff") format("woff"), 
		 url("../fonts/la-brands-400.ttf") format("truetype"), 
		 url("../fonts/la-brands-400.svg#lineawesome") format("svg");
}

@font-face {
	font-family: 'Line Awesome Free';
	src: url("../fonts/la-regular-400.eot");
	src: url("../fonts/la-regular-400.eot?#iefix") format("embedded-opentype"), 
		 url("../fonts/la-regular-400.woff2") format("woff2"), 
		 url("../fonts/la-regular-400.woff") format("woff"), 
		 url("../fonts/la-regular-400.ttf") format("truetype"), 
		 url("../fonts/la-regular-400.svg#lineawesome") format("svg");
}
  
html {
	font-size: calc(16px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
	scroll-snap-type: y proximity;
	overflow-y: scroll;
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
        scroll-behavior: auto;
    }
}

body {
	font-family: 'Cabin Condensed', sans-serif;
	font-weight: 400;
	line-height: normal;
	font-style: normal;
	font-variant: normal;
	text-align: center;
/*	color: rgba(204, 188, 160, .95); */
	-moz-osx-font-smoothing: grayscale;
/*	-webkit-font-smoothing: antialiased;
	text-rendering: auto;
	font-kerning: auto; */
	font-display: fallback;
	background-color: rgba(0, 0, 0, 1);
}

	
	/* ~~~~~~~~~~~~~ GLOBAL | main ~~~~~~~~~~~~~ */

section {
	display: block;
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	scroll-snap-align: start;
}

section .section_content {
	display: inline-block;
	position: relative;
	top: 52%;
	width: 80%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin: 0 auto;
}


	/* ~~~~~~~~~~~~~ GLOBAL | color ~~~~~~~~~~~~~ */

section.light_brown {
/*	background: url(../images/back/back_white.jpg) top left repeat; */
	color: rgba(124, 106, 88, 1);
	background-color: rgba(204, 188, 160, 1);
}

section.dark_brown {
/*	background: url(../images/back/back_white.jpg) top left repeat; */
	color: rgba(204, 188, 160, 1);
	background-color: rgba(124, 106, 88, 1);
}


	/* ~~~~~~~~~~~~~ GLOBAL | typo ~~~~~~~~~~~~~ */

section h1,
.container_info h1 {
	position: relative;
	font-family: 'DM Serif Display', serif;
	font-weight: 400;
	font-size: 3.3rem;
	line-height: 3.5rem;
	text-transform: uppercase;
	letter-spacing: .1rem;
	padding-bottom: 1.7rem;
}

section h2,
.container_info h2 {
	position: relative;
	font-family: 'DM Serif Display', serif;
	font-weight: 400;
	font-size: 2rem;
	line-height: 2.3rem;
	text-transform: uppercase;
	letter-spacing: .08rem;
	padding-bottom: 1.7rem;
}

section h3,
.container_info h3 {
	position: relative;
	font-weight: 600;
	font-size: 1.4rem;						/* Größe checken !!! */
	line-height: 1.7rem;
	padding: 1rem 0 .5rem 0;
}

.section h4,
.container_info h4 {
	position: relative;
/*	font-size: .9rem; */
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.55rem;
	letter-spacing: .07rem;
	text-transform: uppercase;
	padding: .5rem 0 .5rem 0;
/*	margin-bottom: .4rem; */
}

.section h5,
.container_info h5 {
	position: relative;
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1.45rem;
	letter-spacing: .05rem;
	padding-bottom: .3rem;
}

section p {
	font-size: 1rem;
	line-height: 1.3rem;
	margin-bottom: .9rem;
}

section p.last,
.container_info p.last {margin-bottom: 0;}

section span.span_space {margin: 0 .25rem;}


	/* ~~~~~~~~~~~~~ GLOBAL | Links ~~~~~~~~~~~~~ */

section a,
section a:link,
section a:visited,
.container_info a,
.container_info a:link,
.container_info a:visited {
/*	font-weight: 300; */
	text-decoration: none;
	color: rgba(228, 228, 222, .9);
	-webkit-transition: color .35s linear;
	transition: color .35s linear;
}

section a:hover,
section a:focus,
section a:active,
.container_info a:hover,
.container_info a:focus,
.container_info a:active {color: rgba(228, 228, 222, .6);}


	/* ~~~~~~~~~~~~~ GLOBAL | header ~~~~~~~~~~~~~ */

.header_mobile,
.header_standard {
	display: flex;
	position: fixed;
	top: 0;
	width: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
/*	background-color: none; */
/*	border-bottom: .05rem solid rgba(0, 0, 0, .15);
	-webkit-filter: drop-shadow(0rem .1rem .3rem rgba(36, 36, 36, .5));
	filter: drop-shadow(0rem .1rem .3rem rgba(36, 36, 36, .5));
	-webkit-backdrop-filter: blur(.11rem);
	-o-backdrop-filter: blur(.11rem);
	-moz-backdrop-filter: blur(.11rem);
	backdrop-filter: blur(.11rem); */
	padding: 1.5rem 10%;
	-webkit-transition: all .4s;
	transition: all .4s;
	z-index: 8;
}

.header_mobile.ani_scroll,
.header_standard.ani_scroll {
	background-color: rgba(32, 25, 18, .8);
	border-bottom: .05rem solid rgba(0, 0, 0, .15);
	-webkit-filter: drop-shadow(0rem .1rem .3rem rgba(36, 36, 36, .5));
	filter: drop-shadow(0rem .1rem .3rem rgba(36, 36, 36, .5));
	-webkit-backdrop-filter: blur(.11rem);
	-o-backdrop-filter: blur(.11rem);
	-moz-backdrop-filter: blur(.11rem);
	backdrop-filter: blur(.11rem);
	padding: .5rem 5%;
}

.header_mobile {display: none;}

.logo_standard {
/*	display: block; */
	position: relative;
	width: 30%;
	text-align: left;
	line-height: 0;
	-webkit-transition: all .4s;
	transition: all .4s;
}

.logo_standard.ani_scroll {width: 15%;}

img.header_logo {
/*	display: inline-block; */
	position: relative;
	width: 100%;
	height: auto;
/*	vertical-align: middle; */
	-webkit-transition: all .4s;
	transition: all .4s;
}

img.header_logo:hover,
img.header_logo:focus,
img.header_logo:active {transform: scale(1.15);}

.nav_mobile,
.nav_standard {
/*	display: block; */
	display: flex;
	position: relative;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
/*	font-size: .9rem; */
	font-weight: 600;
	letter-spacing: .08rem;
	text-transform: uppercase;
	text-align: right;
	row-gap: 1.5rem;
	column-gap: 1.5rem;
	gap: 1.5rem;
	-webkit-transition: all .4s;
	transition: all .4s;
}

.nav_standard.ani_scroll {
	font-size: .85rem;
	row-gap: 1.7rem;
	column-gap: 1.7rem;
	gap: 1.7rem;
}

.nav_standard a,
.nav_standard a:link,
.nav_standard a:visited {
/*	display: inline-block; */
	position: relative;
/*	height: 100%; */
	text-decoration: none;
	color: rgba(204, 188, 160, .4);
	-webkit-transition: all .3s linear;
	transition: all .3s linear;
}

.nav_standard a:hover,
.nav_standard a:focus,
.nav_standard a:active {color: rgba(204, 188, 160, .9);}

/*
.nav_item {
	margin-right: 1.5rem;
	-webkit-transition: all .4s;
	transition: all .4s;
}

.nav_item:last-of-type {margin-right: 0;}

.nav_item.ani_scroll,
.nav_item:last-of-type.ani_scroll {margin-right: 1.7rem;} */

.nav_hover_effect_1::before {
	content: '•';
	position: absolute;
	top: 75%;
	left: 50%;
	font-size: .8rem;
	color: transparent;
	text-shadow: 0 0 transparent;
	-webkit-transition: text-shadow .3s, color .3s;
	transition: text-shadow .3s, color .3s;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	pointer-events: none;
}

.nav_hover_effect_1:hover::before,
.nav_hover_effect_1:focus::before,
.nav_hover_effect_1:active::before {
	color: rgba(204, 188, 160, .9);
	text-shadow: .5rem 0 rgba(204, 188, 160, .9), -.5rem 0 rgba(204, 188, 160, .9);
}


	/* ~~~~~~~~~~~~~ GLOBAL | footer ~~~~~~~~~~~~~ */

footer.footer_main {
	display: flex;
	position: absolute;
	bottom: 0;
	width: 100%;
/*	height: auto; */
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
/*	color: rgba(124, 106, 88, 1); */
	background-color: rgba(32, 25, 18, .8);
	border-top: .05rem solid rgba(0, 0, 0, .15);
	-webkit-filter: drop-shadow(0 -.3rem .5rem rgba(36, 36, 36, .5));
	filter: drop-shadow(0 -.3rem .5rem rgba(36, 36, 36, .5));
	padding: .7rem 1.7rem;
}

.footer_main > div {
	position: relative;
	font-weight: 300;
	font-size: .7rem;
	line-height: .7rem;
}

.footer_main div:nth-child(1) {text-align: left;}

.footer_main div:nth-child(3) {text-align: right;}

.footer_main span.span_heart {color: rgba(188, 10, 30, 1)}

.footer_main a,
.footer_main a:link,
.footer_main a:visited {
	letter-spacing: .04rem;
	-webkit-transition: border .25s linear, font-weight .35s linear, color .35s linear;
	transition: border .25s linear, font-weight .35s linear, color .35s linear;
}

.footer_main a:hover,
.footer_main a:focus,
.footer_main a:active {
	font-weight: 400;
/*	color: rgba(152, 50, 34, 1); */
	border-bottom: .13rem dotted rgba(228, 228, 222, .6);
}


	/* ~~~~~~~~~~~~~ GLOBAL | arrow ~~~~~~~~~~~~~ */

.footer_scroll_down {
	display: block;
	position: relative;
	margin-top: 4rem;
}

.footer_scroll_down a {
	display: inline-block;
	position: relative;
}

.footer_scroll_down a.scroll_arrow i,
.footer_scroll_down a.scroll_arrow:link i,
.footer_scroll_down a.scroll_arrow:visited i {
	display: inline-block;
	position: relative;
	width: 2.3rem;
	height: 2.3rem;
	line-height: 2.2rem;
	color: rgba(228, 228, 222, .5);
	border: .11rem solid transparent;
	border-radius: 50%;
	-webkit-transition: all .4s;
	transition: all .4s;
}

.footer_scroll_down a.scroll_arrow:hover i,
.footer_scroll_down a.scroll_arrow:focus i,
.footer_scroll_down a.scroll_arrow:active i {
	font-size: 1.6em;
	color: rgba(228, 228, 222, .95);
	border-color: rgba(228, 228, 222, .95);
}

/*
.footer_scroll_down a.scroll_arrow::before, 
.footer_scroll_down a.sroll_arrow:link::before,
.footer_scroll_down a.scroll_arrow:visited::before {
	content: "\F103";
	display: block;
	width: 2.3rem;
	height: 2.3rem;
	font-size: 2.2rem;
	line-height: 2.3rem;
	border: .12rem solid rgba(142, 64, 18, 0);
	border-radius: 50%;
	-webkit-transition: border-color .4s ease-in-out;
	transition: border-color .4s ease-in-out;
}
*/


	/* ~~~~~~~~~~~~~ ICONS | contact ~~~~~~~~~~~~~ */

[class^="cn_contact_"]::before {
	display: inline-block;
	font-family: 'Line Awesome Free';
	font-weight: 900;
	font-size: 1.3rem;
	line-height: 1.3rem;
/*	width: .8rem;
	font-size: .7rem;
	font-weight: lighter;
	color: rgba(60, 148, 254, .95); */
	vertical-align: bottom;
	margin-right: .5rem;
/*	-webkit-transition: all .3s linear;
	transition: all .3s linear; */
}

.cn_contact_phone::before {content: "\F095";}		/* "\F095" oder "\F098" */

.cn_contact_mail::before {content: "\F0E0";}		/* "\F0E0" oder "\F199" */

[class^="cn_contact_"]:hover::before,
[class^="cn_contact_"]:focus::before,
[class^="cn_contact_"]:active::before {				/* "\F064" oder "\F14D" */
	content: "\F14D";
	opacity: .6;
/*	color: rgba(235, 235, 231, .7); */
}


	/* ~~~~~~~~~~~~~ ICONS | social ~~~~~~~~~~~~~ */

[class^="cn_social_"]::before {
	display: inline-block;
	font-family: 'Line Awesome Brands';
	font-weight: lighter;
	font-size: 1.65rem;
	line-height: 2.1rem;
	vertical-align: bottom;
}