@charset "utf-8";
/* CSS Document */


/* Fonts */
@import url('fonts/stylesheet.css');



/* Vorgaben */
:root {
	--col-primary: rgb(56,97,122);				/* globale 1. Projektfarbe */
	--col-secondary: #3f65b0;			/* globale 2. Projektfarbe */
	--col-text: rgb(40,40,40);					/* globale Schriftfarbe */
	
	--font-header: 'Raleway', sans-serif;		/* globale Schriftart für Überschriften */
}




/* Standard */
* { margin: 0px; padding: 0px; box-sizing: border-box; transition: all 0.3s ease; }

html { scroll-behavior: smooth; }
body { background: #FFF; padding: 50px; font-family: var(--font-header); font-size: 14px; font-weight: normal; /*text-transform: uppercase;*/  letter-spacing: 2px; color: var(--col-text); line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }




/* Blöcke */
header, section { display: block; position: relative; z-index: 5; }

header { display: flex; justify-content: center; padding: 0px; margin: 0px 0px 60px; color: #FFF; text-align: center; }
	header .inner { max-width: 800px; margin: 0px auto; }
	header img { width: auto; max-height: 180px; opacity: 0.65; }

section { position: absolute; top: 50px; right: 50px; bottom: 50px; left: 50px; margin: 0px; padding: 100px; background: var(--col-secondary); }
section#content { background: rgb(238,238,238); margin: 0px 0px; padding: 80px 0px 80px; position: relative; z-index: 10; }

.content-wrapper { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.content { display: flex; justify-content: space-between; padding: 0px 50px; margin: 0px auto; max-width: 1200px; /*position: absolute; top: 50%; left: 50%;*/ width: 100%; /*transform: translate(-50%, -50%);*/ }
	.content > div { position: relative; flex: 0 1 400px; max-width: 400px; margin: 20px 50px; padding: 30px; background: rgba(255,255,255, 0.85) no-repeat center center; background-size: contain; border-radius: 5px; transition: all 0.3s ease; text-align: center; text-transform: uppercase; }
		.content > div:hover { background-color: rgba(255,255,255, 1.0); }
	/*.content > div:before { content:''; display: block; padding-top: 50%; height: 0; }*/
	.content a { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10; padding: 60px; text-align: center; }
	.content img { display: block; width: 100%; height: auto; margin: 0px 0px 25px; }

.footernav { position: fixed; left: 50%; bottom: 6px; text-align: center; transform: translateX(-50%); }
	.footernav ul { display: block; list-style-type: none; margin: 10px; padding: 0px; line-height: normal; text-align: center; }
	.footernav li { display: inline-block; margin: 0px 15px; padding: 0px; line-height: normal; }
	.footernav a { color: var(--col-primary); font-size: 12px; font-weight: normal; text-transform: uppercase; text-decoration: none; letter-spacing: 2px; white-space: nowrap; text-rendering: optimizeLegibility; transition: all 0.3s ease; }
		.footernav a:hover { color: var(--col-secondary); }
		
		
		

@media screen and (max-width:920px){
	body { padding-bottom: 7px; }
	section { position: static; }
	.content, .content-wrapper { display: block; transform: none; position: static; padding: 0px; }
	.content > div { margin: 50px auto; }
		.content > div:last-child { margin-bottom: 0px; }
	.footernav { position: relative; transform: translate(-50%, 8px); }
}

@media screen and (max-width:640px){
	body { padding: 25px 25px 0px; }
	section { padding: 70px; }
	header { margin-bottom: 70px; }
	.footernav { transform: translate(-50%, 6px); }
}

@media screen and (max-width:520px){
	header img { max-height: 140px; }
	.content a { padding: 40px; }
}

@media screen and (max-width:450px){
	header img { max-height: 120px; }
	section { padding: 50px; }
	.content a { padding: 25px; }
}


/* Querformat-Anpassungen */
@media screen and (min-width:400px) and (max-height:600px){
	body { padding-bottom: 7px; }
	section { position: static; }
	.content, .content-wrapper { position: static; transform: none; padding: 0px; }
	.footernav { position: relative; transform: translate(-50%, 8px); }
	
}

@media screen and (max-width:1300px) and (max-height:1100px){
	body { padding-bottom: 7px; }
	section { position: static; }
	.content, .content-wrapper { position: static; transform: none; padding: 0px; }
	.footernav { position: relative; transform: translate(-50%, 8px); }
	
}