* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body { min-height: 1100px; font-family: Arial, Helvetica, sans-serif; font-size: 0.95em; line-height: 1.5em; }

header { margin: 1.0em 0.5em 0 0.5em; }

footer { margin: 1.0em 0.5em; font-size: 0.8em; }
footer a { color:#333333; }
footer a:hover { color:#33cc33; }
footer a:visited { color:#333333; }

a { text-decoration: none; }

h1 { font-size: 2.5em; font-weight: 500; line-height: 2.0em; }

h2 { font-size: 1.1em; font-weight: 400; line-height: 1.4em; }

h1 { font-size: 1.4em; font-weight: 700; line-height: 1.4em; }

p { font-size: 1.1em; font-weight: 400; line-height: 1.4em; }  

sup, sub {
   position: relative;
   vertical-align: baseline;
   top: -0.4em;
}
sub { top: 0.4em; }

img { width: 100%; height: auto; border:none; margin:0; padding:0; }  
    
#container { position: relative; margin: 0; padding: 10px; background-color: #fff; width: 100%; }

#introContainer2 { position: relative;  width: 100%; height: 100%; margin: 0; padding:0; }

#metacontent { width: 100%; padding-right: 20px; margin-bottom: 4.0em; }

#metacontent ul { text-align: right; }

#logoStart img { width: 75%; }
#logo img { width: 75%; }

#headline { margin: 1.0em 0.5em 0.5em 0.5em; font-weight:500; clear:both;}
#headlogo { margin: 1.0em 0.5em 1.0em 0.5em; padding-right: 1.0em; width: 50%; clear:both; }

#contentContainer { margin:0.5em; }
#contentContainer img { visibility: visible; width: 50%; float: none; }

#contentText { margin-left: 0; width: 100%; padding-left: 0; padding-right: 0; }
#contentText a { color: #333333; }
#contentText a:hover { color: #33cc33; }
#contentText a:visited { color: #333333; }

#contentSuche { margin-left: 0; width: 100%; padding-left: 0; padding-right: 0; }

#contentSuche a { color: #333333; }
#contentSuche a:hover { color: #33cc33; }

#contentSuche ul { margin: 0; width: 100%; padding: 0; list-style-type: none; }

#contentSuche ul li { margin: 20px 0; padding: 0; }

#contentSuche ul li a { color: #333333; }
#contentSuche ul li a:hover { color: #33cc33; }

#paginierungoben { text-align: right; color: #333; }
#paginierungoben a { color: #33cc33; }
#paginierungoben a:hover { color: #33cc33; }

#paginierungunten { text-align: right; color: #333; }
#paginierungunten a { color: #33cc33; }
#paginierungunten a:hover { color: #33cc33; }

.logotype { margin: 0; font-size: 3.5em; font-weight: 500; line-height: 1.3em; }

.introtext { padding-left:0em; display: none; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(50%, 50%)); /*  */}
.grid div { background: #f0f0f0; color: black; margin: 0.5em; padding: 0; }
.grid img { width: 100%; height: auto; }

.quellen { font-size:1.0em; color:#666; } 

.bildbeschriftung { position: relative; }
.bildbeschriftung img { display: block; }
.bildbeschriftung span a { position: absolute; top: 0.5em; right: 0.5em; left: 0.5em; color: #000; text-align: left; font-size: 1.0em; line-height: 1.3em; }
    
.gridHeader { display: grid; grid-template-columns: repeat(auto-fit, minmax(100%, 100%)); /*  */ }
.gridHeader div { background: #fff; color: black; margin: 0 0.5em 0 0; padding: 0; }
.gridHeader div.hartmut { margin-bottom: 0px; }

/* Slider */

#slider { position:absolute; top: -60px; left: 0; width: 100%; height: 105%; overflow: hidden; z-index: 5000; }
.slides { position: relative; margin: 0; padding: 0; height: 100%; }
.slide { position: absolute; list-style-type: none; text-align: left; width: 100%; height: 100%; top: 0; left: 0; font-size: 1.7em; line-height:1.8em; padding:0.5em; }
.slide span.medium { font-weight:400; color:#fff; }
.slide span.small { font-weight:400; font-size: 0.4em; line-height:0.6em; color:#fff; }
.slide1 {background: #4f93c2; }
.slide2 {background: #848d92; }
.slide3 {background: #7dbd57; }
.slide4 {background: #ea8f45; }
.slide5 {background: #e2ae1c; }


.scip { width: 100%; height: auto; text-align:right; background:#fff; font-size: 1.2em; padding: 0.5em; }
.scip a { font-size: 1.4em; color:#33cc33; }

/* Breadcrumb */

.breadcrumb a { text-decoration: none; color: #000; }

.breadcrumb li { list-style: none; }

.breadcrumb {
	display: none;
    position: relative;
	cursor: default;
	z-index: 600;
    margin: 0.9em;
}

/* Menu List */
.breadcrumb > li {
    font-size: 1.0em;
    line-height: 34px; 
	display: block;
	float: left;
}

/* Menu Links */
.breadcrumb > li > a {
	position: relative;
	z-index: 510;
    height: 54px;
	padding: 0 0 0 0;
    line-height: 34px;      
	font-weight: 400;
	color: #000;
}

/* Search Form */

.navSearch a { text-decoration: none; }

.navSearch li { list-style: none; }

.navSearch {
	display: inline;
    position: relative;
	cursor: default;
	z-index: 600;
    width:100%;
    margin: 0.9em;
}

/* Menu List */
.navSearch > li {
	display: block;
	float: right;
}

/* Menu Links */
.navSearch > li > a {
	position: relative;
	display: block;
	z-index: 510;
    height: 54px;
	padding: 0 0 0 20px;
    line-height: 34px;      
	font-weight: 400;
	font-size: 1.0em;
	color: #000;
}

#suche {
	width: 5em;
    cursor: pointer;
	border: none;
	font-size: 1.0em;
	transition: width 0.5s ease-in-out;
    margin-top: 0.45em;
    z-index: 3000;
}

#suche:focus {
    border-bottom: 1px solid #000;
	font-size: 1.0em;
	width: 100%;
}

.back-to-top {
 background:#f0f0f0;
 position: fixed;
 bottom:20px;
 right:20px;
 padding:1em;
 z-index: 10000;
}

.back-to-top {
 background:#f0f0f0;
 position: fixed;
 bottom:20px;
 right:20px;
 padding:1em;
 z-index: 10000;
}

    
@media screen and (min-width:320px) {  
	
	}


    
@media screen and (min-width:480px) {  
    
h1 { font-size: 4.8em; line-height: 2.0em; }
    
h2 { font-size: 1.1em; font-weight: 400; line-height: 1.4em; }
	
h1 { font-size: 1.4em; font-weight: 700; line-height: 1.4em; }

p { font-size: 1.1em; font-weight: 400; line-height: 1.4em; }
        
#logo img { width: 50%; }
    
#headlogo { width: 25%; margin-top: 30px; }
    
#contentContainer { margin:0.5em; }
#contentContainer img { visibility: visible; width: 25%; float: left; }
    
#contentText { margin-left: 25%; width: 75%; padding-left: 0.25em; padding-right: 0; }
    
#slider { height: 104%; }
    
.slide { font-size: 2.5em; line-height:1.5em; }
	
.grid { grid-template-columns: repeat(auto-fit, minmax(50%, 50%)); /*  */ }
    
.bildbeschriftung span { font-size: 1.2em; line-height: 1.4em; }
    
.logotype { margin: 0; font-size: 5.5em; font-weight: 500; line-height: 1.3em; }
    
.introtext { padding-left:0em; display:inline-block; }
    
.gridHeader { grid-template-columns: repeat(auto-fit, minmax(50%, 50%)); /* Umbrechen, sobald die Box 300 Pixel Breite hat */ }
.gridHeader div.hartmut { margin-bottom: 50px; }

}

@media screen and (min-width:640px) { 
    
#logoStart img { width: 60%; }
    
#slider { height: 111%; }
.slide { font-size: 2.3em; line-height:1.5em; }
    
    .breadcrumb {
	display: inline;
}

    
.grid { grid-template-columns: repeat(auto-fit, minmax(25%, 25%)); /* Umbrechen, sobald die Box 300 Pixel Breite hat */ }
    
.bildbeschriftung span { font-size: 1.0em; line-height: 1.4em; }
    
}
   
@media screen and (min-width:1024px) {  
    
h2 { font-size: 1.3em; font-weight: 400; line-height: 1.6em; }
	
h1 { font-size: 1.5em; font-weight: 700; line-height: 1.6em; }

p { font-size: 1.3em; font-weight: 400; line-height: 1.6em; }
    
#container { margin: 0 auto;  width:80%;}
        
#logoStart img { width: 50%; }

#headlogo { width: 25%; margin-top: 30px; }
    
#contentContainer { margin:0.5em; }
#contentContainer img { visibility: visible; width: 25%; float: left; }
    
#contentText { margin-left: 25%; width: 75%; padding-left: 0.25em; padding-right: 0; } 
    
#slider { height: 108%; }
.slide { font-size: 2.6em; line-height:1.5em; padding:0.5em 0.5em; }
        
.grid { grid-template-columns: repeat(auto-fit, minmax(25%, 25%)); /* Umbrechen, sobald die Box 300 Pixel Breite hat */ }
        
.bildbeschriftung span { font-size: 1.1em; line-height: 1.4em; }

}
    
@media screen and (min-width:1600px) { 
    
h1 { font-size: 5.2em; line-height: 2.2em; }
    
h2 { font-size: 1.2em; font-weight: 400; line-height: 1.6em; }
	
h1 { font-size: 1.5em; font-weight: 700; line-height: 1.6em; }

p { font-size: 1.2em; font-weight: 400; line-height: 1.6em; }
    
#container { width:80%; }
    
#headlogo { width: 25%; }
                        
#logo img { width: 33.33%; }
#logoStart img { width: 50%; }
#headlogo { width: 25%; margin-top: 30px; }
    
#contentContainer { margin:0.5em; }
#contentContainer img { visibility: visible; width: 25%; float: left; }
    
#contentText { margin-left: 25%; width: 75%; padding-left: 0.25em; padding-right: 25%; } 
    
#slider { height: 105%; }
.slide { font-size: 4.1em; line-height:1.5em; padding:0.5em 0.5em; }  
            
.grid { grid-template-columns: repeat(auto-fit, minmax(25%, 25%)); /* Umbrechen, sobald die Box 300 Pixel Breite hat */ }
            
.bildbeschriftung span { font-size: 1.4em; line-height: 1.4em; }
            
.logotype { margin: 0; font-size: 7.5em; font-weight: 500; line-height: 1.3em; }

}
    
@media screen and (min-width:1920px) {  
    
#container { width:70%; }
    
#logoStart img { width: 50%; }
                                
.slide { font-size: 4.9em; line-height:1.5em; padding:0.5em 0.5em; }  
                
.grid { grid-template-columns: repeat(auto-fit, minmax(25%, 25%)); /* Umbrechen, sobald die Box 300 Pixel Breite hat */ }

}