:root {
	--text: #010203;
	--weiss: #FFFFFF;
	--font: Arial, Helvetica, Verdana;
	--light: 300;
	--regular: 400;
	--medium: 500;
	--bold: 700;
	
	--actioncolor: #5A7825;
	
	--abstand1: 1vh;
	--abstand2: 2vh;
	--abstand3: 3vh;
	--abstand4: 4vh;
	--abstand5: 5vh;
	--abstand7: 7vh;
	--abstand10: 10vh;
	--padding: 3vw;
	
	--fontsize: 100%;
	--lineheight: 145%;
}

html, body {
	padding: 0px;
	margin: 0px;
	background-color: var(--weiss);
	font-size: var(--fontsize);
	line-height: var(--lineheight);
	height: 100%;
	font-family: var(--font);
	font-weight: var(--light);
}

body {
	color: var(--text);
}

.maxwidth {
	margin-left: 5vw;
	margin-right: 5vw;
}



a, 
a:visited {
	color: var(--text);
}

a.tel {
	text-decoration: none;
}

a:hover, 
a:active {
	color: var(--actioncolor);
	text-decoration: underline;
}



p {
	margin: 0px 0px 20px 0px;
}


.bold, strong, b {
	font-weight: var(--bold);
}

.layout-container {
	box-sizing: border-box;
	padding: 0px;
	position: relative;
}

.layout-content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	z-index: 20;
}

.layout-content-left {
	flex-basis: 70%;
	align-self: stretch;
	padding: var(--abstand10)  calc(var(--padding) / 2) var(--padding) var(--padding);
	box-sizing: border-box;
	position: relative;
}

.layout-content-right {
	flex-basis: 30%;
	align-self: stretch;
	padding: 0px var(--padding) var(--padding) 0px;
	box-sizing: border-box;
	position: relative;

}

/* calc((var(--padding) / 2) - 10px) */

.logo {
	position: absolute;
	left: calc(var(--padding) + 3vw);
	top: calc(var(--abstand10) + 8vw) ;
	width: 28%;
}

.logo img {
	width: 100%;
	height: auto;
}

.kontaktblock {
	position: relative;
	padding-left: calc((var(--padding) / 2) + 10px);
	padding-top: calc(var(--abstand10) * 2);
	padding-bottom: 0px;
	box-sizing: border-box;
	background: url("/images/linie.png");
	background-repeat: no-repeat;
	background-size: 10px auto;
	background-position: bottom left;

}

.rest-block {
	background: var(--weiss);
	padding-left: calc(var(--padding) / 2);
	box-sizing: border-box;
}


.layout-content-left img {
	width: 100%;
	height: auto;
}


.fisilogo {
	margin-top: 3vw;
	margin-bottom: 30px;
}

.fisilogo img {
	width: 60px;
	height: auto;
}


p.text-s {
	font-style: italic;
	font-size: 90%;
	line-height: var(--lineheight);
	margin: 0px;
	padding: 0px;
}


.social-media-block {
	display: flex;
	flex-direction: row;
}

.social-media-block > div:not(:last-child) {
	margin-right: 10px;
}

.social-media-block > div:hover {
	opacity: 0.6;
}


.social-media-block img {
	width: 34px;
	height: auto;
}


@media all and (min-width: 1920px) {

	:root {
		--fontsize: 110%;
		--lineheight: 145%;
	}
}

@media all and (max-width: 1440px) {
	
	.layout-content-left {
		flex-basis: 65%;
	}
	
	.layout-content-right {
		flex-basis: 35%;
	
	}
	
	.kontaktblock {
		padding-top: calc(var(--abstand10) * 1);
	
	}


	
}


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

	:root {
		--fontsize: 95%;
		--lineheight: 145%;
	}
	
	.fisilogo img {
		width: 40px;
		height: auto;
	}
	
	.social-media-block img {
		width: 25px;
		height: auto;
	}

	.fisilogo {
		margin-top: 2vw;
		margin-bottom: 20px;
	}

	
}

@media all and (max-width: 1024px) {
	
	.layout-content {
		flex-wrap: wrap;
		padding: var(--padding);
	}

	.layout-content-left {
		flex-basis: 100%;
		padding: 0px;
	}
	
	.layout-content-right {
		flex-basis: 100%;
		padding: 0px 0px calc(var(--padding) * 4) calc(var(--padding) * 4);
	}
	
	.kontaktblock,
	.rest-block {
		padding-left: calc(var(--padding) *2);
		background-size: 8px auto;
	}
	
	.logo {
		top: 10vw ;
	}



}

@media all and (max-width: 667px) {

	
	
}

@media all and (max-width: 667px) {
	
}


@media all and (max-width: 550px) {
	
	.kontaktblock,
	.rest-block {
		padding-left: calc(var(--padding) *2);
		background-size: 8px auto;
	}	
	
	.layout-content-right {
		flex-basis: 100%;
		padding: 0px 0px calc(var(--padding) * 2) calc(var(--padding) * 2);
	}
	
	.fisilogo {
		margin-top: 20px;
	}
		
}


@media all and (max-width: 375px) {
	

}


@media all and (max-width: 320px) {
		
}



@media only screen and (max-width: 834px) and (orientation:portrait)  {
	
}







