@charset "utf-8";
/* CSS Document */
@media (prefers-color-scheme: dark) {
body {
    	background-color: #000 !important;
}
#oben .main h1,
#oben .main ul li h2,
#oben .main ul li p {
  		color: #fff !important;
}

#oben .site-footer nav ul li h2,
#oben .site-footer nav ul li h3,	 
#oben .site-footer p {
    	color: #fff !important;
}
}
/*HEADER-LOGO*/
.logo{
		display: block;/*Siehe HTML*/
		height: 108px;/*Siehe HTML*/
		margin: 15px 0 10px 15px;		
}
/*MAIN*/

.main ul{
		display: flex;
		flex-direction: column;
	
		width:600px;
		margin:24px auto 24px auto;
}	
.main ul li{
		padding:10px 0;	
		list-style-type: none;		
}	

.main ul li p a{
		color:#f03;
}

.main ul li p a:hover,
.main ul li p a:focus{
		color:#000;
		background-color:#fff;
}	

.main h1{
		
	  	font-size: 2.6875rem;/*43px;*/
	  	line-height: 3.125rem;/*50px;*/
    	font-family: 'Lato', sans-serif;
		font-weight: 500;
		color:#010101;
		
    	padding-bottom: 54px;
    	padding-top:44px;/*Abstand Titel h1 zu header*/

		display: flex;
		flex-direction: column;
	
		width:600px;
		margin:24px auto 24px auto;
}
.main ul li h2{
	  	font-size:1.688rem;/*27px;*/
	  	line-height: 2.313rem;/*37px;*/
	 	font-weight: 500;

		color:#010101;	
		padding-bottom: 0.5rem;
}
/*SCROLL TO TOP ==> Klick nach Oben*/
#oben .main ul li .top{   	
		color: #fff;
    	background: #f03;
    	text-decoration: none;
    	text-transform: lowercase;
    	font-size: 1.125rem; /*18px*/
    	line-height: 1.75rem;/*30px*/
		border: 2px solid #dadbdf;
		/*border-radius: 15px;*/
    	padding: 6px 12px 3px 12px ;
    	
}
#oben .main ul li .top:hover,
#oben .main ul li .top:focus{   
    	color: #fff;
    	background: #000;
    	text-decoration: none;
    	text-transform: lowercase;
    	font-size: 1.125rem; /*18px*/
    	line-height: 1.75rem;/*30px*/
		border: 2px solid #dadbdf;
		/*border-radius: 15px;*/
    	padding: 6px 12px 3px 12px ;
}




/*FOOTER*/
.site-footer{
		color: #060606; /*#333;*/
		margin-top:0;/*Die Anweisung margin-top:auto dr端ckt den Footer nach unten ==> hier entfernt sonst gibt es einen zu grossen Abstand*/		
}

@media screen and (max-width: 667px) {
.main ul{
		width:500px;
		margin:24px auto 24px auto;
}
.main h1{
		
		font-size: 2.5rem;/*40px;*/
		line-height: 3.125rem;/*50px;*/
		color: #000;
		
    	padding-bottom: 50px;
    	padding-top:40px;/*Abstand Titel h1 zu header*/
		width:500px;
		margin:24px auto 24px auto;
}
.main ul li h2{
	  	font-size:1.625rem;/*26px;*/
	  	line-height: 2rem;/*36px;*/
}
}

@media screen and (max-width: 570px) {
 .main ul{
		width:400px;
		margin:24px auto 24px auto;
}
.main h1{
		font-size: 2.25rem;/*36px;*/
		line-height: 2.875rem;/*46px;*/
		color: #000;
		
    	padding-bottom: 48px;
    	padding-top:38px;/*Abstand Titel h1 zu header*/
		width:400px;
		margin:24px auto 24px auto;
}
.main ul li h2{
	  	font-size:1.5rem; /*24px;*/
	  	line-height: 2.125rem;/*34px;*/
}
}

@media screen and (max-width: 418px) {
.main ul{
		width:300px;
		margin:24px auto 24px auto;
}
.main h1{
		font-size: 2rem;/*32px;*/
		line-height: 2.625rem;/*46px;*/
		color: #000;
		
    	padding-bottom: 48px;
    	padding-top:38px;/*Abstand Titel h1 zu header*/
		width:300px;
		margin:24px auto 24px auto;
}
.main ul li h2{
	  	font-size:1.313rem;		/*21px;*/
	  	line-height: 1.938rem;/*31px;*/
}
}

@media screen and (max-width: 320px) {		
.main ul{
		width:244px;
		margin:24px auto 24px auto;
}
.main h1{
		font-size: 2rem;/*32px;*/
		line-height: 2.625rem;/*42px;*/
		color: #000;
		
    	padding-bottom: 48px;
    	padding-top:36px;/*Abstand Titel h1 zu header*/
		width:244px;
		margin:24px auto 24px auto;
}
.main ul li h2{
	  	font-size:1.313rem;/*21px;*/
	  	line-height: 1.938rem;/*31px;*/
}
}

@media screen and (max-width: 270px){
.main h1{
		width:222px;
		margin:24px auto 24px auto;
}
.main ul{
		width:222px;
		margin:24px auto 24px auto;
}	
}