/*   ====================================================================
CSS Document for screendesign by Annuschka Lochner
Last Update: 27.06.2018
Author: Annuschka Lochner
Media: Screen
 ======================================================================== */


/* Textbereiche links dargestellt */
#col1{
	background-color: #f6f9f9;
	box-sizing: border-box;
	display: table-cell;
	float:left;
	width: 65%;
	padding:1.3rem;
	margin:1.2rem 1rem;
	box-shadow: 0px 1px 2px #4f6366;
}

/* Textbereich rechts dargestellt */
#col2{
	background-color: #f6f9f9;
	box-sizing: border-box;
	display: table-cell;
	float:right;
	width: 28%;
	padding:1.3rem;
	margin:1.2rem 1rem;
	box-shadow: 0px 1px 2px #4f6366;
	vertical-align: top;
}
/* Titel Text rechts */
#col2 b{
	font-weight:400;
}
/* Titel Text */
[id^=col] h2{
	text-align: left;
}
#col1 p{
	line-height: 1.375rem;
	font-weight: 300;
}

#col2 p{
	line-height: 0.875rem;
	font-weight: 300;
	font-size: 0.875rem;
	margin: 0.125rem;
	padding-top: 0.125rem;
}
#col2 a:hover{
	font-weight: bold;
}

/* 2-Spaltige Darstellung */
#col1{
	position: relative;
	-webkit-column-fill:auto;
	column-fill:balance;
	-moz-column-count:2;
	-webkit-column-count:2;
	column-count:2;
	-moz-column-width:20rem;
	-webkit-column-width:20rem;
	column-width:20rem;
	-moz-column-gap:2rem;
	-webkit-column-gap:2rem;
	column-gap:2rem;
	-moz-column-rule: 1px solid #4f6366;
	-webkit-column-rule: 1px solid #4f6366;
	column-rule: 1px solid #4f6366;
}
#col1 h2{
	-moz-column-span:all;
	-webkit-column-span:all;
	column-span:all;
}



/************ Smartphone- und Tablet-Ansicht  max-width:880px  ************************/
/*** Es wir nur eine column angezeigt mit der Breite 95% ***/

@media screen and (max-width:880px){
	
	#col1, #col2 {	
		display:block;
		float: left;
		width:95%;	
	}
	
}