:root {
	--bg_color: none;
	--bg_img:none;
	--stripe_scale: 800px;

	--font_size: min(max(6px, 2.5vw), 13px);
	--font_size_info: min(max(6px, 3vw), 13px);
	--font_size_big: min(max(6px, 3vw), 13px);
	--font_var: sans-serif;
	--font_color: black;
	--font_weight: lighter;
	--font_weight_menue: lighter;
	--font_spacing: 2px;
	--font_uppercase: uppercase;
	
	--font_hover_color:black;
	
	--line_h:4vh;
	
	--line_margin : 1.5vw;
	--line_w: 40vw;
	--line_w_mobil: 25vw;
	--line_w_news: 2vw;
	--line_w_news_mobil: 25vw;
	--window_w:100vw;
	--img_w:30vw;
	
	--menue_hh: 5vh;
	--menue_padding: 2vh;
	--menue_h: 7vh;
	--menue_stripe_img :none;
	--menue_stripe_color:white; 
	--menue_line_border: none;

	--shadow_v: inset 0vw 0vw 0.15vh 0.15vh white;
	
	--stripe_light:url("img/stripe_gray_022.png");
	--stripe_lightt:url("img/stripe_gray_022.png");
	--stripe_light_bg:none;
	--stripe_dark: url("img/stripe_gray_0222.png");
	--stripe_darkk: url("img/stripe_gray_0222.png");
	--stripe_color: none;	
	--stripe_dark_bg:none;
	
	--newsletter_stripe_img :url("img/stripe_gray_0222.png");
	--newsletter_stripe_bg : white;
	
	--line_border: black solid 0.5px;
	--line_border_plus: none;
	--line_border_side: none;
	--line_border_main: none;
	
	--index_stripe_img : url("img/stripe_gray_022.png");
	--index_stripe_bg: white;
	--index_stripe_color: black;
	--index_stripe_border: black solid 0.5px;
	
	--last_stripe_img :none;
	--last_stripe_bg: none;
	--last_stripe_color: black;
	
	--fill_stripe_img: none;
	--fill_stripe_bg: none;
	--fill_stripe_h: 3vh;
	
	--news_stripe_light :none;
	--news_stripe_light_bg: white;
	--news_stripe_dark: none;
	--news_stripe_dark_bg: white;
	--news_line_border:gray solid 0.5px;
	--news_space_h: 30vh;
	--news_color: white;
	
	--img_w:26vw;
	
}


html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

body {
	background-color: var(--bg_color);
	background-image: var(--bg_img);
	background-size: 30vh; 
	background-position: center;
	background-repeat: no-repeat;
	height: 100vh;
	width: 100vw;
	margin: 0; 
	padding: 0;
	
	font-size: var(--font_size);
	font-family: var(--font_var);
	font-weight: var(--font_weight);
	color: var(--font_color);
	letter-spacing: var(--font_spacing);
}


#mid_pic {
	display: block;
	position: absolute;
	width: 35vw;
	left: 50%;
	top: 65%;
	transform: translate(-50%, -50%);
	z-index: 99999;
}

@media screen and (max-width: 1100px) {
	body{
		letter-spacing: 0px;
	}
	#mid_pic {
		width: 20vw;
	}
}

#archive_pic{
	height: 3vh;
}

@media screen and (max-width: 1100px) {	
	#archive_pic{
	height: 2.5vh;
	}
}

.height_normal {
	height: var(--line_h);
	display: flex;
	flex-direction: row;
	align-items:center;
}

.height_fill {
	height:var(--fill_stripe_h);
	display: flex;
	flex-direction: row;
	align-items:center;
}

.height_archiv {
	height: var(--line_h);
	display: flex;
	flex-direction: row;
	align-items:center;
	margin-bottom: 0vh;
}


.height_archiv:hover {
	font-weight: normal;
	font-style: italic;
	font-size: min(max(6px, 3vw), 13px)!important;
}



#main_menue {
	display: flex;
	position: fixed;
	flex-direction: row;
	width: var(--window_w);
	left: 50%;
	transform: translateX(-50%);
	z-index: 99999;
	height: var(--menue_hh);
	align-items: flex-start;
	padding-top: var(--menue_padding);
	background-image: var(--menue_stripe_img);
	background-size: var(--stripe_scale);
	background-color: var(--menue_stripe_color);
	border: var(--menue_line_border);
}


.menue_line {
	font-size: var(--font_size_big);
	width: var(--line_w);
	margin-left: var(--line_margin);
	cursor: pointer;
}

.menue_line:hover {
	text-decoration: underline;
	color: var(--font_hover_color);
	font-weight: bold;;
}


@media screen and (max-width: 1100px) {
	.menue_line {
		width:var(--line_w_mobil);
	}
}


#menue_archiv{
	text-decoration: underline;
	font-weight: normal !important;
}



.menue_line_project {
	font-size: var(--font_size_info);
	margin-left: 1vh;
}



#main_archiv {
	display: block;
	position: relative;
	font-size: var(--font_size_big);
	top: var(--menue_h);
	left: 50%;
	transform: translateX(-50%);
	width: var(--window_w);
	text-transform: var(--font_uppercase);
	overflow-y: hidden;
	overflow-x: hidden;
}

#main_news,
#main_contact,
#main_info{
	top:  var(--menue_h);
	display: none;
	position: relative;
	align-items: flex-start;
	flex-direction: row;
	width: var(--window_w);
	left: 50%;
	transform: translateX(-50%);
}


#main_project_2{
	display: flex;
	position: relative;
	flex-direction: column;
	width: 100vw;
}

#project_nav_close{
	display: flex;
	position: fixed;
	padding-right: 2vw;
	justify-content: flex-end;
	width: 98vw;
	padding-top: var(--menue_padding);
	font-size: 20px;
	cursor: pointer;
	z-index: 99999;
}


.project_image{
	display: flex;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	flex-direction: column;
	width: var(--img_w);
	margin-top: 12vh;
}

#project_img{
	display: flex;
	position: relative;
	flex-direction: column;
	width: 100vw;
	margin-bottom: 20vh;
}

#project_text{
	display: block;
	position: fixed;
	flex-direction: column;
	margin-top: 9vh;
	margin-left: var(--line_margin) ;
	width: 25vw;
	z-index: 9999;
}

@media screen and (max-width: 1100px) {
	#project_text{
		display: flex;
		position: relative;
		flex-direction: column;
		margin-top: var(--menue_h);
		margin-left: var(--line_margin) ;
		width: 80vw;
		margin-bottom: 20vw;
	}
	.project_image{
		width: 60vw;
		margin-bottom: 20vw;
		margin-top: 0vh;
	}
	#project_img{
		margin-top: 0vh;
		margin-bottom: 0vh;
	}
}

#project_text_name{
	display: flex;
	text-decoration: underline;
}
#project_text_info{
	margin-top: var(--line_h);
}
#project_text_text{
	margin-top: var(--line_h);
}
#project_text_request{
	margin-top: var(--line_h);
	color: blue;
	text-decoration: underline;
}

#news_space {
	height: var(--news_space_h);
	
}

#news_block {
	position: sticky;
	width: 100%;
	height: 2.4vh;
	top: 0;
	z-index: 9999;
	background: white;
}


.sticky-title {
	position: sticky;
	top: calc(0vh + var(--news-offset, 0vh));
	z-index: 2;
	flex-direction: row;
	overflow: auto;
}

.height_news {
	height: var(--line_h);
	display: flex;
	align-items:center;
	flex-direction: row;
	justify-content: flex-start;
	color: var(--news_color);
	cursor: pointer;
}

.height_news:hover {
	color: black;
	font-weight: normal;
}

.line_1,
.line_2,
.line_3,
.line_4 {
	display: flex;
	width: var(--line_w);
	flex-direction: column;
	justify-content: center;
	border-right: var(--line_border_side);
	align-items: flex-start;
	margin-left: var(--line_margin);
}

.line_1_m,
.line_2_m,
.line_3_m,
.line_4_m {
	display: flex;
	width: var(--line_w);
	flex-direction: column;
	justify-content: center;
	border-right: var(--line_border_side);
	align-items: flex-start;
	margin-left: var(--line_margin);
}

.line_info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	margin-left: 52vw;
	margin-top: var(--line_h);
}

.line_contact {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	margin-top: var(--line_h);
	margin-left: 77vw;
}

.line_news {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-left: var(--line_w_news);
	color: var(--news_color);
}


.line_news_text {
	display: flex;
	justify-content:flex-start;
	width: 30vw;
	margin-bottom: 2vh;
	position: relative;
	margin-left: 27%;
	font-weight: lighter !important;
}
.news_window{
	width: 100%;
}

.text_normal{
	color: var(--font_color);
	font-size: var(--font_size);
	text-decoration: none;
	
}

.news_height_picture {
	width: 25vw;
	display: flex;
	position: relative;
	margin-left: 27%;
}

@media screen and (max-width: 1100px) {
	.line_info {
		margin-left: var(--line_margin);
	}
	.line_contact {
		margin-left: var(--line_margin);
	}
	.line_1{
		width:38vw;
	}
	.line_2{
		width:47vw;
	}
	.line_3{
		width:15vw;
		margin-right: 1.5vw;
	}
	.line_4 {
		width:0vw;
		display: none;
	}
	.line_1_m{
		width:38vw;
	}
	.line_2_m{
		width:27vw;
	}
	.line_3_m{
		width:20vw;
	}
	.line_4_m {
		width:15vw;
		margin-right: 1.5vw;
	}
	.line_news {
		margin-left: var(--line_w_news_mobil);
	}
	.news_height_picture {
		width: 70vw;
		margin-left: 15%;
	}
	.line_news_text {
		width: 70vw;
		margin-left: 15%;
	}
	.line_news {
		margin-left: var(--line_margin);
	}
}


.stripe_2 {
	background-image: var(--stripe_light);
	background-size: var(--stripe_scale);
	background-color: var(--stripe_light_bg);
	box-shadow: var(--shadow_v);
	border-top: var(--line_border);
	border-bottom: var(--line_border_plus);
	border-left: var(--index_stripe_border);
	border-right: var(--index_stripe_border);
}



.stripe_1 {
	background-image: var(--stripe_dark);
	background-size: var(--stripe_scale);
	background-color: var(--stripe_dark_bg);
	box-shadow: var(--shadow_v);
	border-top: var(--line_border);
	border-bottom: var(--line_border_plus);
	border-left: var(--index_stripe_border);
	border-right: var(--index_stripe_border);
}



.stripe_22 {
	background-image: var(--stripe_lightt);
	background-size: var(--stripe_scale);
	background-color: var(--stripe_light_bg);
	box-shadow: var(--shadow_v);
	border-top: var(--line_border);
	border-bottom: var(--line_border_plus);
	border-left: var(--index_stripe_border);
	border-right: var(--index_stripe_border);
}

.stripe_11 {
	background-image: var(--stripe_darkk);
	background-size: var(--stripe_scale);
	background-color: var(--stripe_dark_bg);
	box-shadow: var(--shadow_v);
	border-top: var(--line_border);
	border-bottom: var(--line_border_plus);
	border-left: var(--index_stripe_border);
	border-right: var(--index_stripe_border);
}

.news_stripe_1 {
	background-image: var(--news_stripe_dark);
	background-size: var(--stripe_scale);
	background-color: var(--news_stripe_dark_bg);
	box-shadow: var(--shadow_v);
	border-bottom: var(--news_line_border);
	border-top: var(--news_line_border);
	color: var(--news_color)!important;

}

.news_stripe_2 {
	background-image: var(--news_stripe_light);
	background-size: var(--stripe_scale);
	background-color: var(--news_stripe_light_bg);
	box-shadow: var(--shadow_v);
	border-bottom: var(--news_line_border);
	border-top: var(--news_line_border);
	color: var(--news_color)!important;
	
}


.stripe_fill {
	background-color: var(--bg_color);
	background-size: var(--stripe_scale);
	background-image: var(--fill_stripe_img);
	background-color: var(--fill_stripe_bg);
	border-left: var(--index_stripe_border);
	border-right: var(--index_stripe_border);
	box-shadow: var(--shadow_v);
}

.stripe_index {
	background-image: var(--index_stripe_img);
	background-size: var(--stripe_scale);
	background-color: var(--index_stripe_bg);
	box-shadow: var(--shadow_v);
	border-bottom: var(--index_stripe_border);
	border-left: var(--index_stripe_border);
	border-right: var(--index_stripe_border);
	border-top: var(--index_stripe_border);
	color: var(--index_stripe_color);
	font-style: italic;
}

.stripe_last {
	background-image: var(--last_stripe_img);
	background-size: var(--stripe_scale);
	background-color: var(--last_stripe_bg);
	box-shadow: var(--shadow_v);
	border-top: var(--line_border);
	color: var(--last_stripe_color);
	
}


#customCursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 450px; /* beliebige Größe */
	height: 450px;
	pointer-events: none;
	z-index: 9999;
	background-image: url('DEIN_CURSOR_BILD.png');
	background-size: contain;
	background-repeat: no-repeat;
	transform: translate(-50%, -50%);
	display: none; /* nur anzeigen, wenn nötig */
}

#intro_overlay {
	display: flex;
	position: fixed;
	
	background-color: none;
	background-image:  url("img/bacgground3.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	
	align-items: center;
	justify-content: center;
	z-index: 999999;
	
	transition: opacity 3s ease-in-out;
	opacity: 1;
	
	pointer-events: none;

}
	
	#newsletter {
		position: sticky;
		top: var(--menue_h);
		z-index: 99999;
		
		background-image: var(--newsletter_stripe_img);
		background-size: var(--stripe_scale);
		background-color: var(--newsletter_stripe_bg);
		box-shadow: var(--shadow_v);
		border-top: var(--news_line_border);
		color: black;
		text-transform: uppercase;
		font-weight: lighter;
		

	}
#newsletter:hover {
	color: black;
	font-weight: normal;
	cursor: pointer;
}




.news_window {
	scroll-margin-top: 20vh; /* Höhe des Sticky-Headers anpassen */
}

@media screen and (max-width: 500px) {
	.mobile{
		display: none
	}

}