/* Allgemein*/
* { 
    font-size:1em;
    letter-spacing:0.005em;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: SourceSansPro;
    font-kerning: normal; 
}

body{	
	
	/*Vollbild*/
	background: no-repeat center center fixed; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	-ms-background-size: cover;
  	background-size: cover;	
	flex: 1 0 auto;
	
	max-width:2600px;
    align-content: center;
	margin-top:auto;
    margin-left:auto;
	margin-right:auto;
    background-color: #f5f5f5;
}

/* SCHRIFTART*/
@font-face {
  font-family: 'SourceSansPro';
  src: local('SourceSansPro-Regular'), url('fonts/SourceSansPro-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'SourceSansPro-Semibold';
  src: local('SourceSansPro-Semibold'), url('fonts/SourceSansPro-Semibold.ttf') format('truetype');
}

@font-face {
  font-family: 'SourceSansPro-Bold';
  src: local('SourceSansPro-Bold'), url('fonts/SourceSansPro-Bold.ttf') format('truetype');
}






/* hyphens */



	 	
	 /*
	 Wie flexibel sich die boxen anpassen:
	 box-flex: 1; (anpassen)
	 box-flex: 0; (nicht anpassen)
	 /*
	

/*–––––––––––––––––––––––––––Headerbilder*/


.header_img { 
    padding-top:11em;
    margin: -0.5em;
    z-index:3;
    position:relative;
    filter:saturate(1.2);
    }	

img{
    max-width:100%;
    height:auto;
    }

.svg {
    width:100%;
    margin-top:0em;
    }

.svg_klein {
    width:74%;
    border:solid 2px white;
    right:0em;
    padding:2em;
    }

.svg_klein:hover{
    background-color:white;
    padding:1.5em;
    transition:ease-in-out;
    transition-duration: .5s;
    }


/*.svg:hover {
       
    animation:fading 0s infinite; 
    opacity:1; 
}

.svg {
    animation:fading 5s infinite;
    animation-timing-function: ease-in-out;
    }

@keyframes fading {
    0% {
        opacity:.1
    }

    50% {
        opacity:1
    }

    100% {
        opacity: .1
    }
}
*/
/* links*/

/* Typo*/   

/*!TIP! p { font-size: 16px; font-size: 1rem; line-height: 1.7; margin-bottom: 12px; }
*/

/*Textauszeichnung a */
a:any-link {
    text-decoration: none;
}

/*Typografie*/
hr{
    margin-top: -1em;
    border-top: 1px solid; 
    opacity: 0.1;
    }

p,h1,h2,h3,h4,h7{
    color:#424242;
    }

p   {
    margin:inherit;
    font-size:1.3em;
    line-height: 1.6em;

    border-bottom: solid 1em transparent;
    /*display: -webkit-box;*/
    /*-webkit-line-clamp: 5;*/
    -webkit-box-orient: vertical;
    overflow: hidden;
    /*text-overflow: ellipsis;*/
    
/*Trennung*/
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

h1	{
    font-family: SourceSansPro-Bold;
	font-size: 3em;
	line-height: 1.3em;	
    }
	
h2	{
    font-family: SourceSansPro-Semibold;
	font-size:1.3em;
	
    max-width:500px;
    line-height: 1.8em;
    letter-spacing:0em;!importnant!
    margin-top:auto;
    }

    /*Table-Typo Spezial*/
h3  {
    font-size:5em;
    opacity:0.1;
    font-family: SourceSansPro-Semibold;
    }


h4  {
    font-size:4em;
    opacity:0.1;
    font-family: SourceSansPro-Semibold;
    line-height: 1.6em;
    margin: -.35em 0em 0em 0em;
    }


h5	{
	font-size:1em;
	line-height: 1.5em;
	color: #a81815;
    }

h6  {
    font-family: SourceSansPro;
    font-size:1em;
    }

h7  {
    font-family: SourceSansPro-Semibold;
	font-size:1.3em;
    margin-bottom:0;
    }

.box-r p{
     -ms-hyphens: inherit;
    -webkit-hyphens: inherit;
    hyphens: inherit;
    }

/* .flexItem {
    flex: 1 1 100px;
          ^ ^   ^
          | |   |
          | |   +---- basis
          | +---- shrink
          +---- grow
}   */
  
/*Div Wrapper*/
.wrapper { 

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  }

.wrapper > * {
/* Abstand in den Boxen*/
  	padding: 0em;
  	/*flex: 1  100%;*/
	/*margin: 1em;*/
}

/*HEADER*/

header {
	top: 0;
	background-color: white;
	
	/* sticky header
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position: sticky;*/
	width:100%;
    justify-content: flex-end;
}



.logo{
	width: 12em;
    margin: 3em;
    position:absolute;
    right: 0;
    z-index:3;
    height:8em;
    background-color: white;    
}
   


.logo-s{
	width: 7em;
    margin: 2.5em;
    padding-top:-1em;
    position:fixed;
    right:1em;
    top:0em;
    z-index:2;
}
			
/*ELEMENTE*/


.aside-left{
	width:15%;	
    /*background-color: lightgoldenrodyellow;*/
    margin:1em;
    height:auto;
    float:left;
    }

.aside-right{
    width:20%;	
    /*background-color: lightcoral;*/
    margin:1em;
    height:auto;
    float:right;
    }

.main{
	flex:1 1 0%;
    /*width:70%;*/	
    /*background: lightgreen;*/
    margin:0em;
    margin-top:5em;
    /*height:3000px;*/
   
    float:left;
    display: flex;
    
    flex-wrap: wrap;
    justify-content: space-around;
    z-index:0;
}

section {
  	display: flex;
    width:100%;
    justify-content: space-around;
  
	}

.box-1, .box-2, .box-3, .box-4, .box-table {
   
  	/*background-color: oldlace;*/
    width:40%;
    
    max-width:600px;
    float:left;
    
    margin-top:2em;
    margin-bottom:2em;    
	padding-left: 2em;
    }

.box-table{
    display: inline-flex;
    }

.box-l{
    width:30%;
    float:left;
    padding-left:.1em;
    }

.box-l-3{
    width:auto;
    float:left;
    padding-left:.1em;
    }

.box-r{
    width:auto;
    float:right;
    padding-left: 1em;
    }

.box-r-2{
    width:70%;
    float:right;
    padding-left: 1em;
    }

.box-r-3{
    width:auto;
    float:left;
    padding-left: 5%;
    text-align: right;
    }

#box_img {
   
  	/* background-color: oldlace; */
    /* width: 40%; */
    /* min-width: 300px; */
    
    float: left;
    padding: 0%;
    width:74%;
    /* margin-bottom: 2em; */
    /* padding-left: 1em; */
    /* filter:grayscale(1);*/

    }

.Verkehrsanbindung{
    
    font-size: 1.4em;
    list-style: square;
    
    color:#424242;
    margin:inherit;
    font-size:1.3em;
    line-height: 1.6em;

    border-bottom: solid 1em transparent;

    }

/*Andere Eigenschaft für 3te Box-1 (3n) 
.box-1:nth-child(3n) {
  width: auto;
}*/


footer {
 	
  	height: 20em;
	background-color:white;
	margin-top:10em;
    margin-bottom:-10px;
    display: flex;	
}

#footermenu{
    flex-direction: row;
    padding-left: auto;
    float: left;
    padding-top: 10em;
    width: 70%; 
    }

#footermenu ul {
    display: flex;
    list-style-type: none;
}
  
#footermenu ul li{
    margin:auto;
}

#footermenu  ul li a:any-link{
    text-decoration:none;
}
/*––––––––––––––––––––––––––––––––––––––NAVIGATION*/
/*NAVIAGTION*/

.menu{
    width: 100%;
    padding-top: 3em;
    padding-bottom: 5em;
    /* padding-left: 11%; */
    height: 7em;
    background-color: #f5f5f5;
    top: 0;
    z-index:1;
    /* height: 3em; */
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
}



.menu-wrap {
   display: flex;
   justify-content: space-between;
   padding: 0 15px;
}

nav {
   /*position: absolute;*/ bleibt fix
  overflow:auto;

}

/*style the links*/
nav ul {
   list-style-type: none;
}

nav ul li {
  padding: 0 .5em;
    display:flex;
}

nav ul li a {
   display: inline-block;
    
   
   /* Add your custom styles below to change appearance of links */
   color: #DAE1E7;
   text-decoration: none;
    width:auto;
}


/*submenue Einzeln*/
nav ul li ul li{
    /*background-color: greenyellow;*/
   margin-left:0em;
    width:auto;
     
    /*padding-left:0px;*/    
}

nav ul li ul li a{
    justify-content: flex-end;
     
    /*padding-left:0px;*/    
}



/* menu items use flex layout so that visibility:collapse will work */
nav > ul > li {
  display: flex;
}

/* dynamically collapse submenus when not targeted */
nav > ul > li:not(:target):not(:hover) > ul {
  visibility: collapse;

   
}


/*hover*/
nav ul li a:hover, nav ul li a:focus,nav ul li a:active{
    border-bottom: 2px solid white;
    border-bottom-width: medium;
    }

label.responsive-nav-label,
input#responsive-nav {
  display: none;
}

#checkbox:checked ~ nav ul {
   max-height: 200px;
   padding: 15px 0;
}

nav ul li {
  position: relative;
  float: left;
  list-style: none;
  transition: all 0.5s;

}

nav ul li a {
  padding: 1em;
  
    color:#a81815;
    
}


nav ul li a:hover {
    /*border:1px solid #a81815;*/
}


.Zusatzelement{
    visibility:hidden;  
    opacity:0;
    transform:none;
    -ms-transform:none; /* IE 9 */
    -moz-transform:none; /* Firefox */
    -webkit-transform:none; /* Safari and Chrome */
    -o-transform:none;/* Opera */
	display: flex;
    position: fixed;
    right: 4%;
    top:40%;
    
    transition: all 1s;
    transition-timing-function: ease-in-out;
    }


#ps_l_1{
	/*width: 5em;*/
    /* height: 1em; */
    color: #a81815;
    border: 1px solid #a81815;
    background-color: white;
    padding: .2em;
    padding-left:1em;
    padding-right:1em;
    text-align: center;
	
    }	
	
#ps_l_2{
	/*width: 5em;*/
    /* height: 1em; */
    color: #a81815;
    border: 1px solid #a81815;
    background-color: white;
    padding: .2em;
    padding-left:1em;
    padding-right:1em;
    /* position: fixed; */
	}		

#ps_r{
	/* width: 4.4em; */
    height: 100%;
    color: #a81815;
    border: 1px solid #a81815;
    background-color: white;
    display: flex;
    padding-left: 1em;
    padding-right: 1em;
    align-items: center;
    justify-content: center;
    }

/*Hovereffekt Zusatzelement*/
#ps_l_1:hover, #ps_l_2:hover{
    background-color: #a81815;
    color: white;
    }		

#ps_r:hover{
    background-color: #a81815;
    color: white;
		}

section:hover > div  { 
    visibility:visible; 
    opacity:1;
    transform:none;
   	-ms-transform:none;/* IE 9 */
    -moz-transform:none; /* Firefox */
    -webkit-transform:none; /* Safari and Chrome */
    -o-transform:none; /* Opera */   
    }
		


.Zusatzelement_links{	
	float:left;
    }	

.Zusatzelement_rechts{
    float:right;
    }




/*–––––––––––––––––––––––––––Screengrößen*/

/*–––––––––––––––––––––––––––bis 1800px */
/*@media screen and (max-width : 1800px) {

h1  {
    font-size:2em;
    line-height:1.4em}
    
    p,h2,th{
        font-size:1.2em;} 
}
*/
/*–––––––––––––––––––––––––––bis 1600px */
@media all and (max-width : 1800px) {
  
/* Typo*/
h1{
     font-size:2em;
    line-height:1.6em;
    }
    
p,h2,h7,th{
    font-size:1.2em;
    }   

    
/*Box-Model*/    
.box-1      { order: 1; flex:2;} 
.box-2 	    { order: 2; flex:2;}
.box-3      { order: 1; flex:2;} 
.box-4      { order: 1; flex:2;}     
.box-table 	{ order: 2; flex:2;}    

.footer     { order: 10;}
    
.aside-left{
    width:10%;
    }  
    
/*Navigation*/

    
nav ul li {
    padding: 1 0em;
    display:flex;  
    }
    
nav ul li a{
    padding:.5em;
        
    }    
    
#ps_l_1, #ps_l_2, #ps_r{
        font-size:.7em;
    }     
    
    
}

@media all and (max-width : 1200px) {


h1{
    font-size:  1.5em;
    }    
    
nav ul li {
    padding: 0 0em;
    display:flex;  
    }    
    
.aside-left{
    width:5%;
    }
    
#ps_l_1, #ps_l_2, #ps_r{
        font-size:.5em;
    }   



}


/*–––––––––––––––––––––––––––ab 1024px */
@media all and (max-width: 1024px){
    
.aside-left, .aside-right{
    width:2%;
    }  
    
.Zusatzelement, .logo{
    display: none;        
    } 
    
#Klick_1,#Klick_2,#Klick_3{
        display: none; 
    }
}
/*–––––––––––––––––––––––––––ab 850px */
@media all and (max-width : 850px){

.wrapper > * {
padding: 0em;
/*flex: 1  100%;
/* margin: 1em; */
}    

header{    
   /* top: 0;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
    position: sticky;*/
} 

.header_img {
    padding-top: 8em;
    }    
    
.logo{
    width: 10em;
    margin:2em;
    float: right;    
    }

.logo-s{
	width: 7em;
    margin: 2em;
    padding-top:-1em;
    position:fixed;
    right:1em;
    top:0em;
    z-index:2;
}
    
    
/*h1{
     font-size:1.7em;
    }
    
p,h2{
    font-size:1em;
    }     
*/    
section{
    flex-flow: column;
    }
 
.main {
    flex: 1 1 0%;
    /* width: 100%; */
    /* background: lightgreen; */
    margin: 0em;
    margin-top: 0em; */
    /* height: 3000px; */
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    z-index: 0;    
    }
    
.box-1, .box-2, .box-table, #box_img, .svg_klein,.box-4{
    width:auto;
    }    
 
    .box-1, .box-2, .box-3, .box-4, .box-table{
        padding-left:0;
    }    
    
.box-table{
    float:inherit;
    width:100%;
    display: inline-flex;
    }  
    
.box-3{
    display:none;
    }

#box_img{
    padding: 1em 0% 0% 0%;   
    }   
    
/* Boxmodel bei tablet*/
    .box-1 	 { order: 1; } 
    .box-2 	 { order: 2; }
    .box-table { order: 2;}
    .box-img { order: 3;}
    .footer  { order: 10;}

/*NAVIGATION*/
    /* Declarations for the responsive menu */

input#responsive-nav,
label.responsive-nav-label, {
  display: none;
}
  
label.responsive-nav-label {
    display:block;
}
  
label.responsive-nav-label span {
  font-size:1em; 
}
	
nav {
    position: absolute;
    display:  block;
    top: -1000px;
    padding: 10%;
    width:100%;
    background:#fff;
    margin-left:0;
    visibility:inherit;
    flex-wrap: wrap;
    justify-content: space-between;
    transition: all 1s;
    
    
}
   
.menu{
    padding-top:3em;
    padding-bottom:2em;
    height:7em;    
    z-index:1;
    }   
    
.menu-wrap{
    padding:0;
    }
    
input#responsive-nav[type=checkbox]:checked ~ nav {
    position: absolute;
    top: 7em;
    height: 100%;
    visibility: visible;
    z-index: 10;
    height: 100%;
    background-color: white;
    display: table;
    }

nav a:after {
  display: none;
}

nav li {
  float: none !important;
  width: 100% !important;
    border-bottom: none !important; 
    flex-direction: column;
    }
  
nav li a {
  margin-bottom: 10px !important;
  padding: 10px 20px !important; 
  background: #fff;
    border:1px solid #a81815;
}
  
nav ul li{
flex-direction: column; /*volle breite*/       
    }    
    
nav ul li:hover {
  background: none;
}
  
nav ul li a:hover {
  background: #a81815;
  color:#fff;
}
   
/*submenu*/
 
.submenu{
    display: flex; 
       /*padding: 0px 20px !important;*/     
}

nav ul li ul li{
    position: relative !important;
    width: 100%;
    left: 0 !important;
    top: 0 !important;
    background: none !important;
    box-shadow: none;
    padding:0;
    }

/* dynamically collapse submenus when not targeted */
nav > ul > li:not(:target):not(:hover) > ul {
  visibility: visible;
    }

    
#footermenu{
    padding-top: 6em;    
    }    
    
#footermenu ul {
    display: inherit;	
    }    
    
#footermenu ul li {
    display: inline-flex;		
    }
    
#footermenu ul li a{
    /* margin: auto; */
    width:100%;
    padding: 1em;
    padding: 1em;
    }   
    
}
    
/*–––––––––––––––––––––––––––Tablets*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
    
    
}
	
/*–––––––––––––––––––––––––––Mobile*/

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}




/*––––––––Animation Zusatzelement - PROZESS STRATEGIE*/


.Animation{
    height:20em;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

#Zusatzelement{
    display: flex;
    /* padding-block-end: 5em; */
    }

#Zusatzelement_links{
    display: inline-flex;
    margin:auto;
    }

.ps_l_1, .ps_l_2, .ps_l_3, .ps_l_4,.ps_l_5 {
	/*width: 5em;*/
    /* height: 1em; */
    color: #a81815;
    border: 1px solid #a81815;
    /*background-color: white;*/
    padding: .2em;
    padding-left:1em;
    padding-right:1em;
    text-align: center;
    }	
		

.ps_l_2 {
    position:relative;
    margin:1em;
    margin-left:1em;
    animation:position_1 15s infinite;
    animation-timing-function: ease-in-out;
    }

@keyframes position_1 {
    0% {        
        right:0em;
        }

    50% {
        right:1em;
    }

    100% {
        right:0em;  
        }
}

.ps_l_3 {
    position:relative;
    margin:1em;
    margin-left:1em;
    animation:position_2 15s infinite;
    animation-timing-function: ease-in-out;
    }

@keyframes position_2 {
    0% {  
        top:0em;
        right:2em;
        }

    50% {
        
        right:0em;
    }

    100% {
        
        right:2em;  
        }
}

.ps_l_4 {
    position:relative;
    margin:.2em;
    justify-content: flex-end;
    animation:margin 15s infinite;
    animation-timing-function: ease-in-out;
    }

@keyframes margin {
    0% {  
        margin: .5em;
        }

    50% {
        
        margin:0em;
    }

    100% {
        margin:.5em; 
        }
}

    
    
.ps_l_5 {    
    animation:background-color 15s infinite;
    animation-timing-function: ease-in-out;
    }

@keyframes background-color {
    0%,30% {  
        
        color:#a81815;
        
        }

    32%,60%{
        background-color: #a81815;
        color:white;
        
    }

    70,100% {
        
        color:#a81815;
        
        
        }
}


.ps_r, .ps_r_1, .ps_r_2, .ps_r_3{
	/* width: 4.4em; */
    height: 100%;
    color: #a81815;
    border: 1px solid #a81815;
    /*background-color: white;*/
    display: flex;
    padding-left: 1em;
    padding-right: 1em;
    align-items: center;
    justify-content: center;
    }


.ps_r_1 {
    height:9em;
    margin-top:3em;
}

.ps_r_2{
    
    margin-left:2em;
    }
    
.ps_r_3{  
    margin-left:2em;
    animation:position 15s infinite;
    animation-timing-function: ease-in-out;
    }

@keyframes position {
    0% {
        margin-left: 2em;
    }

    30%,70% {
        
        margin-left: 0em;
    }

    100% {
        margin-left: 2em;
    } 
}

/*Klickelemente Karte*/ 
#Klick_1{
	position:absolute;
	/*background-color:red;*/
	height: 3%;
    width: 5%;
	margin-top: 11.5%;
    margin-left: 5.5%;
	} 
	
#Klick_2{
	position:absolute;
	/*background-color:blue;*/
	height: 3%;
    width: 5%;
	margin-top:13%;
	margin-left:9%;
	} 
	
#Klick_3{
	position:absolute;
	/*background-color:green;*/
	height: 3%;
    width: 5%;
    margin-top: 4%;
    margin-left: 17%;
	} 		 

#Klick_1:hover,#Klick_2:hover,#Klick_3:hover{
	}