@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/SourceSans3-ExtraLight.eot');
    src: url('../fonts/SourceSans3-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSans3-ExtraLight.woff2') format('woff2'),
        url('../fonts/SourceSans3-ExtraLight.woff') format('woff'),
        url('../fonts/SourceSans3-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/SourceSans3-Regular.eot');
    src: url('../fonts/SourceSans3-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSans3-Regular.woff2') format('woff2'),
        url('../fonts/SourceSans3-Regular.woff') format('woff'),
        url('../fonts/SourceSans3-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/SourceSans3-Medium.eot');
    src: url('../fonts/SourceSans3-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSans3-Medium.woff2') format('woff2'),
        url('../fonts/SourceSans3-Medium.woff') format('woff'),
        url('../fonts/SourceSans3-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/SourceSans3-SemiBold.eot');
    src: url('../fonts/SourceSans3-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSans3-SemiBold.woff2') format('woff2'),
        url('../fonts/SourceSans3-SemiBold.woff') format('woff'),
        url('../fonts/SourceSans3-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: 'Source_Serif_4';
    src: url('../fonts/SourceSerif4-Regular.eot');
    src: url('../fonts/SourceSerif4-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSerif4-Regular.woff2') format('woff2'),
        url('../fonts/SourceSerif4-Regular.woff') format('woff'),
        url('../fonts/SourceSerif4-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source_Serif_4';
    src: url('../fonts/SourceSerif4-Light.eot');
    src: url('../fonts/SourceSerif4-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSerif4-Light.woff2') format('woff2'),
        url('../fonts/SourceSerif4-Light.woff') format('woff'),
        url('../fonts/SourceSerif4-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


.font_weights{
content: "200,normal, 500,600"; 
}

html{
width: 100%; 
height: 100%; 
margin: 0px; 
padding: 0px; 
}

body{
font-family: 'Source Sans 3', 'Segoe', 'Helvetica', 'Arial', 'Verdana', 'Sans', 'Lucida'; 
font-weight: normal;
font-style: normal;
font-size: 1.1em;
color: #333333; 
width: 100%; 
height: 100%; 
margin: 0px; 
padding: 0px; 
background-color: rgb(244, 244, 244);
}
#page{
border: 0px solid #FF0000; 
width: 100%; 
height: 100%; 
margin: 0px; 
padding: 0px; 
}


#navigation{
width: calc(20% - 50px); 
height: calc(20% - 70px); 
min-height: calc(20% - 70px); 
padding: 50px 0px 20px 50px; 
margin: 0px 85% 0px 0px; 
font-size: 1.1em;
}
#navigation ul{
padding: 0px; 
margin: 0px; 
list-style-type: none;  
}
#navigation b a{
color: #333333; 
font-size: 1.8em;
font-weight: normal;
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 0px; 
border: 0px solid #FF0000; 
width: 100%; 
float: left; 
display: block; 
text-decoration: none; 
font-family: 'Source Sans 3', 'Segoe', 'Helvetica', 'Arial', 'Verdana', 'Sans', 'Lucida'; 

}
#navigation ul a{
color: #000000; 
text-decoration: none;  

}

#content{
border: 0px solid #FF0000; 
width: calc(60% - 42px); 
min-height: 65%; 
margin: 0px 20% 0px 20%; 
padding: 0px 20px 0px 20px; 
}
#content h2{
color: #333333; 
font-size: 1.7em;
font-family: 'Source_Serif_4'; 
font-weight: normal; 
font-style: normal;
}
#content a{
color: #000000; 
}
#content table td{
vertical-align: top; 
}

.bildbox{
border: 0px solid #FF0000; 
width: 100%; 
height: auto; 
display: block; 
margin: 0px 0px 0px 0px; 
padding: 0px; 
}
.bild_border, .bildbox a{
margin: 0px; 
padding: 0px; 
}
.bildbox .thumbnail{
width: 100%; 
height: auto; 
margin: 0px; 
padding: 0px; 
}
.bildbox .galeriebild{
width: 100%; 
height: auto; 
margin: 0px; 
padding: 0px; 
}

hr{
border-top: 1px solid #CCCCCC;
border-bottom: 0px solid #999999;
border-right: 0px solid #999999;
border-left: 0px solid #999999;
width: 60%; 
margin: 0px 20% 0px 20%; 
}

.hr_verlauf{
background: linear-gradient(90deg,rgba(244, 244, 244, 1) 0%, rgba(153, 153, 153, 1) 50%, rgba(244, 244, 244, 1) 100%);
width: 40%; 
height: 1px; 
margin: 0px 30% 50px 30%; 
border: 0px solid #FF0000; 
display: inline-block; 
text-align: center; 
line-height: 0px; 
color: #777777; 
text-shadow: -3px -3px 0 #FFFFFF; 
}

.ma_text{
text-align: right; 
width: 100%; 
border: 0px solid #FF0000; 
display: block; 
margin: 0px 0px 5px 0px; 
padding: 0px; 
hyphens: auto;
}
.bildbeschreibung{
border: 0px solid #FF0000; 
margin: 0px 0px 50px 0px; 
padding: 0px; 
text-align: left; 
width: 100%; 
display: inline-block; 
}
.bildbeschreibung h2{
margin: 0px 0px 0px 0px; 
padding: 0px; 
}

.texte{
/*color: #000000; */
font-size: 1.0em;
transition: 0.8s ease-in-out; 
font-family: 'Source_Serif_4'; 
font-weight: 300; 
font-style: normal;
letter-spacing: 0.05em; 
color: #333333; 
hyphens: auto;
}

#footer{
border: 0px solid #FF0000; 

width: calc(20% - 50px); 
height: calc(10% - 20px); 
min-height: calc(10% - 20px); 
padding: 50px 0px 20px 50px; 
margin: 0px 85% 0px 0px; 
}
#footer ul{
padding: 0px; 
margin: 0px 0px 100px 0px; 
list-style-type: none;  
}
#footer ul a{
text-decoration: none; 
color: #000000; 
}


@media screen and (min-width: 300px) and (max-width: 640px) {
#content {
  border: 0px solid #FF0000;
  width: calc(80% - 42px);
  min-height: 65%;
  margin: 50px 10% 0px 10%;
  padding: 0px 20px 0px 20px;
}
.ma_text{
font-size: 0.8em; 
}
.lb-data .lb-caption{
hyphens: auto; 
padding: 0px 50px 0px 0px !important; 
text-align: left !important;
width: calc(100% - 50px) !important; 
font-size: 0.8em !important; 
}
#navigation b a{
font-size: 1.5em;
}
.hr_verlauf{
width: 60%; 
height: 1px; 
margin: 0px 20% 50px 20%; 
font-size: 0.7em; 
}