@charset "UTF-8";

/********** futurwild.com [ö] **********/

html,
body {
	width: 100%;
	height: 100%;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	background-color: #FFF;
	/*
	scroll-behavior: smooth;
	*/
}

*.hidden {
	display: none;
}

*.nobr,
*.nowrap {
	white-space: nowrap;
}

* {
	font-family: Times New Roman, Times, Serif;
	/*
	letter-spacing: 0.015em;
	*/
}
*:focus {
	outline: none;
}



/********** Inhalt Rahmen **********/

#inhalt_rahmen {
	position: absolute;
	left: 50%;
	overflow: visible;
	/*
	background-color: #FCA;
	*/
}



/********** Layout **********/

* {
	color: rgba(0,204,0,1);
}

span.caps {
	text-transform: uppercase;
	font-size: inherit;
	font-weight: inherit;
}

#titel {
	position: absolute;
	top: -26px;
	left: 50%;
	margin-left: -50%;
	width: 100%;
	text-align: center;
	font-weight: normal;
}

#logo {
	position: absolute;
	top: 42%;
	left: 50%;
	width: 50vh;
	height: 50vh;
	margin-top: -25vh;
	margin-left: -25vh;
	background-image: url("../pics/Logo_futurwild.svg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	/*
	background-color: #ACF;
	*/
}

#text {
	position: absolute;
	left: 50%;
	text-align: center;
}

#legal_rahmen {
	position: absolute;
	top: calc(100% - 13px);
	width: 100%;
	left: 50%;
	margin-left: -50%;
}

#legal_navigation {
	position: relative;
	text-align: center;
	cursor: pointer;
	font-size: 14px;
	line-height: 16px;
}
#legal_navigation:hover {
	text-decoration: underline;
}

#legal_anchor {
	position: absolute;
	width: 0px;
	height: 0px;
	top: -50vh;
	left: 0px;
}

#legal_content {
	/*
	*/
	display: none;
	position: relative;
	padding: 30px 0px 30px 0px;
}

#legal_content h4,
#legal_content h5,
#legal_content h4 + p {
	font-size: 14px;
	line-height: 16px;
	font-weight: bold;
	margin: 24px 0px 0px 0px;
}

#legal_content p,
#legal_content p * {
	font-size: 14px;
	line-height: 16px;
	margin: 8px 0px 0px 0px;
}



/********** Responsive Layout **********/

@media (max-width: 500px) {
	#inhalt_rahmen {
		top: 20px;
		left: 50%;
		margin-left: calc(-50% + 25px);
		width: calc(100% - 50px);
		height: calc(100% - 40px);
	}
	#titel {
		font-size: 26px;
		line-height: 30px;
	}
	#logo {
		top: 41.5%;
		left: 50%;
		width: 30vh;
		height: 30vh;
		margin-top: -15vh;
		margin-left: -15vh;
	}
	#text {
		bottom: 25px;
		width: 100%;
		margin-left: -50%;
		font-size: 14px;
		line-height: 16px;
	}
	#legal_content {
		margin: 0px 0px 0px 0px;
	}
}

@media (min-width: 501px) and (max-width: 650px) {
	#inhalt_rahmen {
		top: 20px;
		left: 50%;
		margin-left: calc(-50% + 25px);
		width: calc(100% - 50px);
		height: calc(100% - 40px);
	}
	#titel {
		font-size: 26px;
		line-height: 30px;
	}
	#logo {
		top: 39%;
		left: 50%;
		width: 38vh;
		height: 38vh;
		margin-top: -19vh;
		margin-left: -19vh;
	}
	#text {
		bottom: 30px;
		width: 100%;
		margin-left: -50%;
		font-size: 16px;
		line-height: 19px;
	}
	#legal_content {
		margin: 0px 0px 0px 0px;
	}
}

@media (min-width: 651px) and (max-width: 1200px) {
	#inhalt_rahmen {
		top: 25px;
		left: 50%;
		margin-left: calc(-50% + 25px);
		width: calc(100% - 50px);
		height: calc(100% - 50px);
	}
	#titel {
		font-size: 30px;
		line-height: 34px;
	}
	#logo {
		top: 43%;
		left: 50%;
		width: 46vh;
		height: 46vh;
		margin-top: -23vh;
		margin-left: -23vh;
	}
	#text {
		bottom: 35px;
		width: 70%;
		margin-left: -35%;
		font-size: 16px;
		line-height: 20px;
	}
	#legal_content {
		margin: 0px 15% 0px 15%;
	}
}

@media (min-width: 1201px) {
	#inhalt_rahmen {
		top: 30px;
		left: 50%;
		margin-left: calc(-50% + 30px);
		width: calc(100% - 60px);
		height: calc(100% - 60px);
	}
	#titel {
		font-size: 30px;
		line-height: 34px;
	}
	#logo {
		top: 43%;
		left: 50%;
		width: 50vh;
		height: 50vh;
		margin-top: -25vh;
		margin-left: -25vh;
	}
	#text {
		bottom: 40px;
		width: 50%;
		margin-left: -25%;
		font-size: 18px;
		line-height: 22px;
	}
	#legal_content {
		margin: 0px 25% 0px 25%;
	}
}