body {
	font-family: 'Source Sans Pro', sans-serif;
	line-height: 1.5em;
	background-color: rgb(150, 20, 20);
	width: 100%;
	margin: 0px;}
	
	
header {
	position: relative;		
	height: 210px;
	margin: 10px 10px 10px 10px;
	/*background: rgb(0 0 0) right;*/
	background:  rgb(240, 255, 255) right; 
	background-image: url("../img/start/rgsb.JPG");
	background-size: contain;

	background-repeat: no-repeat;
	opacity: 1;		 
	padding: 0 0 0 20px;
	font: normal 1.2em Arial, sans-serif;  
	z-index: 10;	
}	


 /* Banner */   

	
div.ribbon:hover .nachher
{
  display: block;
}

div.ribbon:hover .vorher
{
  display: none;
}

.ribbon .vorher, 
.ribbon .nachher
 {

	position: absolute;
	left:-10px;
	top: 20px;	
	padding:22px 30px;
	background:  rgb(0,120,180);
	opacity: 0.9;
	box-shadow: 60px 20px 20px rgba(0,0,0,.8);
	z-index: 15;
}

.ribbon .nachher

{
  display: none;
  z-index: 30;

}
.ribbon .vorher
{
  display: block;
  z-index: 20;
}

header .ribbon .vorher h1,
header .ribbon .nachher h1 {
	color: #F0FFFF;
	font-size: 2.2em;}
	

.ribbon .nachher p{
	color:  #000;
	font-size: 1.0em;}

.ribbon .vorher p{
	color: rgb(150, 20, 20);
	font-size: 1.oem;}
	

.ribbon .vorher a,
.ribbon .nachher a {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.0em;
    color: rgb(150, 20, 20);}





/* Schriftarten */

a	{ 
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
	font-size: 1.6em;
	color: rgb(150, 20, 20);
	outline: none; 
	text-decoration: none; }

h1,
h2,
h4	{
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
	font-size: 40px;
	padding-left: 0px; 
	color: #666; 
	text-transform: uppercase;
	line-height: 1.3em;
	}

h1 span {
	color: silver;
	font-size: 30px;}
	
h2 {
	font-weight: normal;
	font-size: 2.2em;
	margin: 0 0 10px
}
	
	
h2 span {
	font-size: 0.70em; 
	color: #818181; 
	text-transform: none;
}




.infoblock-format h1 {
	font-size: 2.6em;
	text-align: center;
	padding-top: 0.6em;}
	
.infoblock-format h2 {
	font-size: 2.6em;
	margin: 0.6em 0em 0em 0em;
	text-align: center;}
	
.infoblock-format h3 {
	font-size: 1.4em;
	margin: 0.2em;
	text-transform: uppercase;
	text-align: center;
	color: grey;}
	
.infoblock-format p,
.infoblock-spalten p {
	font-size: 1.4em;
	padding: 0.6em 1em;
	line-height: 1.4em; 
	margin: 0px;}
    

	
.infoblock-spalten p a{

	font-size: 1.0em;
	color: rgb(150, 20, 20);}
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
.infoblock-spalten a h1 {

	font-size: 1.6em;
	color: rgb(150, 20, 20);
	padding: 0.6em 0em 0em 0em;
	text-align: center;
	margin: 0px;}

.infoblock-spalten a img {
	border-style: hidden;
	border-width: 5px;}
	
	
.infoblock-spalten a h1:hover,
.infoblock-spalten a h4:hover,
.infoblock-spalten p a:hover {
 	color: green;}
 
.infoblock-spalten a img:hover {
	border-bottom: solid;
    border-bottom-color: rgb(150,20, 20);  
 
    border-width: 1px;} 
    
/* Raster - Grid */	  
.raster {
    display: grid;
    grid-template-columns:10% 40% 40% 10%;
    grid-gap: 1.0em;}

.spalte-headline-index-1,
.spalte-headline-index-2,
.spalte-headline-index-3,
.spalte-headline-index-4
  {
	grid-column: 2;
	grid-row: 1;
	align-self: center;}
.spalte-headline-index-2 {
	grid-column: 2;
	grid-row: 1;}	
.spalte-headline-index-3 {
	grid-column: 3;
	grid-row: 1;}
.spalte-headline-index-4 {
	grid-column: 2;
	grid-row: 1;}


.spalte-text-index-1,
.spalte-text-index-2,
.spalte-text-index-3,
.spalte-text-index-4
  {
	grid-column: 2;
	grid-row: 2;
	margin: 1em;
	background: rgba(255, 250, 245, 0.4);
	box-shadow: 30px 10px 10px rgba(210,180,140,.3);
    opacity: 0.8;}
.spalte-text-index-2 {
	grid-column: 2;
	grid-row: 2;}	
.spalte-text-index-3 {
	grid-column: 3;
	grid-row: 2;}
.spalte-text-index-4 {
	grid-column: 2;
	grid-row: 2;
	text-align: center;}
.spalte-text-index-5 {
	grid-column: 1;
	grid-row: 6;}


.spalte-text-index-1 img,
.spalte-text-index-2 img,
.spalte-text-index-3 img,
.spalte-text-index-4 img
 {
     width: 90%;
	 float: left;
	 margin-top: 0.4em;
	 margin-right: 0.4em;
	 margin-left: 0.4em;
	 margin-bottom: .2em;}	
.spalte-text-index-1 img {
	     width: 30%;}	 
.spalte-text-index-2 img {
	     width: 50%;
	 margin-left: 1em;
     margin-right: 1em;}
.spalte-text-index-3 img {
     width: 30%;
     margin-left: 0.8em;
     margin-right: 0.4em;
     margin-bottom: 0.2em;}
     
.spalte-text-index-4 img {
	     float: left;
	     width: 40%;
	 margin-left: 1.6em;
     margin-right: 1.4em;
     margin-bottom: 0em;
    }
     
 .start {
	     float: left;
	    width: 100%;
	height: auto;
	     
	          margin-left: 0.8em;
     margin-right: 0.4em;
     margin-bottom: 0.2em;}
	
	
.infoblock-format,
.infoblock-spalten {
	background-color: #fffbf0;
	background-size: cover;
	margin: 10px;
	padding: 10px;}
		
.infoblock-spalten {
	margin: 0px 10px 10px 10px;
	padding: 0px;}

    
.infoblock-format {
	margin: 10px 10px 0px 10px;}
	

.alben {
	margin: 0em 1em 2em 1em;
	padding: 0em 0em 0em 1em;
	color: grey;
	 list-style: none;}
	 
form label {
  display: block;
}


form input,
form select,
form button{
	font-size: 1.6em;
    color: #fffbf0;
	background:  rgb(150,20,20);
	text-align: center;
	align-self: center;
	width: 50%;
	height: 2.0em;
	text-transform: uppercase; 
	text-align: center;
	border-radius: 40px;
	margin: 0.6em;
	padding: 0;
}

select option {
	font-size: 1.2em;
	background:  rgb(150,20,20);
	color: #fffbf0;
	position: center;
	position: relative;
	z-index: 1000;
}


.full-width {
  grid-column: 1/5;
  grid-row: auto;
  margin:0px 0px 10px 0px;
  text-align: center;
  width: 80%;
}

form button {
	background: rgb(150,20,20);
	color: #fffbf0;
	width: 80%;
	border: 0;
	border-radius: 40px;
	font-size: 1.6em;
	text-transform: uppercase; 
	text-align: center;

}

form p{
	font-size: 2em;
	color: black;
	margin: 0px 0px 0px 0px ;
	padding: 10px 10px 10px 10px ;
	line-height: 1.2em;		
	justify-content: center;
	align-content: stretch;
	align-items: center;}
    
	 
	@media screen and (max-width: 2048px) {
	
	.infoblock-format h1 {
		font-size: 2em;
		text-align: center;} 
	
	.raster {
	    grid-template-columns: 100%;
	    grid-gap: 1em;}
	
	.spalte-headline-index-1,
	.spalte-headline-index-2,
	.spalte-headline-index-3,
	.spalte-headline-index-4,
	.spalte-headline-index-5,
	.spalte-headline-index-6,
	.spalte-headline-index-7,
	.spalte-headline-index-8 {
		grid-column: 1;
		grid-row: 1;
		align-self: center;}
	.spalte-headline-index-2 {
		grid-column: 1;
		grid-row: 1;}	
	.spalte-headline-index-3 {
		grid-column: 1;
		grid-row: 1;}
	.spalte-headline-index-4 {
		grid-column: 1;
		grid-row: 1;}

	
	.spalte-text-index-1,
	.spalte-text-index-2,
	.spalte-text-index-3,
	.spalte-text-index-4,
	.spalte-text-index-5,
	.spalte-text-index-6 {
		grid-column: 1;
		grid-row: 2;
		padding: 0em 0em 1.4em 0em;}
	.spalte-text-index-2 {
		grid-column: 1;
		grid-row: 2;}	
	.spalte-text-index-3 {
		grid-column: 1;
		grid-row: 2;}
	.spalte-text-index-4 {
		grid-column: 1;
		grid-row: 2;
		}

	
	.spalte-text-index-1 img,
	.spalte-text-index-2 img,
	.spalte-text-index-3 img,
	.spalte-text-index-4 img,
	.spalte-text-index-5 img,
	.spalte-text-index-6 img {
	     width: 50%;}
	.spalte-text-index-2 img {
	     width: 80%;}

	
	.spalte-text-index-3 img {
	     width: 50%;
	     float: left;}
	     
	.spalte-text-index-4 img {
	     width: 40%;}
	}   

select option {
	font-size: 1.2em;
	background:  #000080;
	color: yellow;
	position: center;
	position: relative;
	z-index: 1000;
}