@charset "UTF-8";


/* phones */
@media only screen and (max-width: 850px) {
.header, .navi, div.navi, .content {
	/* Ränder */
	padding-left: 10%;
	padding-right: 10%;	
	}

.navi {

	font-size: 0.8em;
}

.content {
	/* Footer-Ausgleich */
	margin-bottom: 1.5em;
	
	/* Typografie */
	font-size: 0.9em;
}

.footer {
	font-size: 0.6em;
	}
	
.start {
	/* Ränder */
	padding-left: 15%;
	padding-right: 15%;
	padding-top: 15%;

}
	
p {
	margin-bottom: 2.0em;
}
	
.ref-img {
    position: absolute;
    left: 0;
	width: 300px;
	height: 300px; 
}
	
.ref-content {
    width: 300px;
	height: 300px;
	margin: 0px auto 25px auto;
}
	
} 


/* portrait tablets and large phones */
@media only screen and (min-width: 850px) {
.header, .navi, div.navi, .content {
	/* Ränder */
	padding-left: 13%;
	padding-right: 13%;	
	}

.navi {

	font-size: 0.9em;
}
	
	
.content {
	/* Footer-Ausgleich */
	margin-bottom: 1.75em;
	
	/* Typografie */
	font-size: 0.95em;
}

.footer {
	font-size: 0.7em;
	}	
	
.start {
	/* Ränder */
	padding-left: 25%;
	padding-right: 25%;
	padding-top: 15%;

}	
	
	
p {
	margin-bottom: 1.0em;
}

.ref-img {
    position: absolute;
    left: 0;
	width: 315px;
	height: 315px; 
}

.ref-content {
    width: 315px;
	height: 315px;
}
	
#contentgrid {
	
	width: 100%;
	display: grid;
	grid-template-columns:  1fr 1fr; 
	gap: 30px;
}
	
} 





/* landscape tablets, laptops/desktops */
@media only screen and (min-width: 1200px) {
.header, .navi, div.navi, .content {
	/* Ränder */
	padding-left: 23%;
	padding-right: 23%;	
	}

.navi {

	font-size: 1.0em;
}
	
.content {	
	/* Footer-Ausgleich */
	margin-bottom: 2em;
	
	/* Typografie */
	font-size: 1.0em;
}

.footer {
	font-size: 0.8em;
	}	
	
.start {
	/* Ränder */
	padding-left: 30%;
	padding-right: 30%;
	padding-top: 15%;

}	

#contentgrid {
	
	width: 100%;
	display: grid;
	grid-template-columns:  1fr 1fr; 
	gap: 30px;
}

p {
	margin-bottom: 1.0em;
}
	
.ref-img {
    position: absolute;
    left: 0;
	width: 325px;
	height: 325px; 
}
	
.ref-content {
    width: 325px;
	height: 325px;
}
}