/* CSS Document */

/*########################################################################################*/
/*######################################## HTML TAGS #####################################*/
/*########################################################################################*/
body, html { margin:0; padding:0; width:100%; height:100%; }

/*########################################################################################*/
/*######################################## GEMEINSAME FORMATIERUNGEN #####################*/
/*########################################################################################*/
header #menu ul li a, .menu_titel, header #slogan, article, footer #footer_menu, h2, h3, p
{  font-family:Arial, Helvetica, sans-serif;  }

header #menu ul li a, header #slogan, footer #footer_menu, footer #footer_menu a, footer #footer_menu span a:hover
{ color:#FFF; }

/*########################################################################################*/
/*######################################## HEADER ########################################*/
/*########################################################################################*/
header.startseite { width:100%; height:100%; background:url(bilder/bg_header.jpg) no-repeat center center; background-size:cover; overflow:hidden; float:left; }
header.unterseite { width:100%; height:50%; background:url(bilder/bg_header.jpg) no-repeat center center; background-size:cover; overflow:hidden; float:left; }

header #logo { width:150px; float:left; position:absolute; top:0; left:0; z-index:50; }
header #logo img { width:100%; height:auto; }

@media screen and (max-width: 800px) {
header #logo { width:20%; }
}

header #menu ul { margin:0; padding:0; float:right; }
header #menu ul li { list-style:none; float:left; margin:20px 20px 0 0; }
header #menu ul li a { text-transform:uppercase; font-weight:bold; font-size:20px; text-decoration:none; }
header #menu ul li a:hover { color:#e11219; }
header #menu ul li.menu_titel a:hover { color:#fff; }
header #menu ul li a.active { color:#e11219; }

.menu_titel { display:none; color:#FFF; text-transform:uppercase; font-weight:bold; font-size:20px; text-decoration:none; }

@media screen and (max-width: 800px) {
header #menu ul { position:absolute; top:0; left:0; height:45px; background:rgba(0,0,0,0.8); overflow:hidden; width:100%; z-index:40; }
header #menu ul:hover { height:auto; }
header #menu ul li { float:none; margin:0; text-align:right; padding:13px 10px 0 0; height:32px; }

.menu_titel { display:block; }
}

header #slogan { width:650px; padding:25px; text-align:center; position:absolute; bottom:1%; left:50%; background:rgba(225,18,25,0.5); font-size:35px; text-transform:uppercase; margin:0 0 0 -325px; }

@media screen and (max-width: 800px) {
header #slogan { width:100%; margin:0; padding:25px 0 25px 0; left:0; }
}

/*########################################################################################*/
/*######################################## INHALT ########################################*/
/*########################################################################################*/
article { margin:0 20% 0 20%; padding:10px 0 10px 0; width:60%; float:left; }

article #team ul { margin:0 0 5px 0; padding:0; width:100%; float:left; background:#F2F2F2; }
article #team ul li { list-style:none; width:47%; float:left; margin:0 0 0 20px; padding:10px 0 10px 0; line-height:25px; }
article #team ul li a { text-decoration:none; }
article #team h3 { padding:25px 0 0 0; }

article #oper div.infobox { display:flex; height:100%; width:100%; margin:0 -3px 35px -3px; padding:0; background-color:#F2F2F2; border:3px solid #D8D8D8; }
article #oper div.infobox div:nth-child(1) { flex:3; }
article #oper div.infobox div:nth-child(2) { flex:1; }
article #oper ul.einfach { padding:0; font-size:15px; }
article #oper ul.einfach li { margin:0 0 0 25px; padding:7px 0 7px 0; line-height:25px; }
article #oper ul.einfach li a { text-decoration:none; }

article #oper div.infobox_bereiche { display:flex; flex-direction:column; margin:0 0 35px 0; padding:0; width:100%; background-color:#D8D8D8; }
article #oper div.infofeld_bereiche { display:flex; flex-direction:row; }
article #oper div.infofeld_bereiche div:nth-child(1) { flex:3; }
article #oper div.infofeld_bereiche div:nth-child(2) { flex:1; }
article #oper ol { margin:0; padding:2%; width:96%; float:left; list-style:none; background:#D8D8D8; }
article #oper ol li { margin:0; padding:0; font-size:20px; line-height:20px; }
article #oper ol li ul { margin:5px 0 0 0; padding:5px 1% 5px 6%; width:93%; list-style:none; background:#F2F2F2; }
article #oper ol li ul li { margin:10px 0 10px 0; width:100%; list-style:disc; font-size:15px; line-height:20px; }
article #oper ol li ul li ul li { list-style:circle; }

article #schauspiel div.infobox { display:flex; height:100%; width:100%; margin:0 -3px 35px -3px; padding:0; background-color:#F2F2F2; border:3px solid #D8D8D8; }
article #schauspiel div.infobox div:nth-child(1) { flex:3; }
article #schauspiel div.infobox div:nth-child(2) { flex:1; }
article #schauspiel ul.einfach { padding:0; font-size:15px; }
article #schauspiel ul.einfach li { margin:0 0 0 25px; padding:7px 0 7px 0; line-height:25px; }
article #schauspiel ul.einfach li a { text-decoration:none; }

article #schauspiel div.infobox_bereiche { display:flex; flex-direction:column; margin:0 0 35px 0; padding:0; width:100%; background-color:#D8D8D8; }
article #schauspiel div.infofeld_bereiche { display:flex; flex-direction:row; }
article #schauspiel div.infofeld_bereiche div:nth-child(1) { flex:3; }
article #schauspiel div.infofeld_bereiche div:nth-child(2) { flex:1; }
article #schauspiel ol { margin:0; padding:2%; width:96%; float:left; list-style:none; background:#D8D8D8; }
article #schauspiel ol li { margin:0; padding:0; font-size:20px; line-height:20px; }
article #schauspiel ol li ul { margin:5px 0 0 0; padding:5px 1% 5px 6%; width:93%; list-style:none; background:#F2F2F2; }
article #schauspiel ol li ul li { margin:10px 0 10px 0; width:100%; list-style:disc; font-size:15px; line-height:20px; }
article #schauspiel ol li ul li ul li { list-style:circle; }

article div.infobild { margin:3%; }
article .infobild img { margin:0 0 20px;  width:100%; height:auto; }

@media screen and (max-width: 1100px) {
article { margin:0 12% 0 12%; width:76%; }
}

@media screen and (max-width: 800px) {
article { margin:0 5% 0 5%; width:90%; }
}

@media screen and (max-width: 700px) {
article .bild_200px { width:75%; float:left; margin:3%; }
article .bild_200px img { width:30%; margin:0 0 20px 0; height:auto; }
}

@media screen and (max-width: 500px) {
article { margin:0 1% 0 1%; width:98%; }
article #team ul li { width:100%; float:none; }
}

h2 { margin:35px 0 20px 0; width:100%; font-size:25px; font-weight:700; text-transform:uppercase; border-bottom:5px inset #e11219; }
h3 { margin:35px 0 20px 0; width:100%; clear:both; font-size:22px; font-weight:700; }
h4 { margin:35px 0 20px 0; float:clear; width:100%; font-size:20px; font-weight:300; background:#D8D8D8; }

p { color:#333; margin:5px 0 5px 0; font-size:16px; font-weight:200; word-spacing:4px; line-height:20px; }
p span { color:#e11219; }

img { width:100%; height:auto; float:left; }

/*########################################################################################*/
/*######################################## DOWNLOADS ########################################*/
/*########################################################################################*/

#downloads_separat { display:block; overflow:hidden; position:fixed; bottom:0%; right:0px; float: right; width:15%; background:#F2F2F2; border-radius: 1em 1em; border: 1px solid #e11219; padding: 1%; margin: 1%; }
#downloads_separat ul.einfach li { margin:0 0 15px -10%; padding:0; line-height:20px; }
#downloads_separat ul.einfach li a { text-decoration:none; color:#e11219; }
.downloads_eingebettet { display:none; }
.downloads_eingebettet ul.einfach li a { text-decoration:none; color:#e11219; }

#linie_500 { display:block; overflow:hidden; position:fixed; bottom:50px; left:0; float: right; width:500px; background:yellow; }
#linie_800 { display:block; overflow:hidden; position:fixed; bottom:30px; left:0; float: right; width:800px; background:yellow; }
#linie_1100 { display:block; overflow:hidden; position:fixed; bottom:10px; left:0; float: right; width:1100px; background:yellow; }

@media screen and (max-width: 1100px) {
#downloads_separat { width:20%; opacity:0.8; }
}

@media screen and (max-width: 800px) {
#downloads_separat { display:none; }
.downloads_eingebettet { display:block; }
}

/*########################################################################################*/
/*######################################## FOOTER ########################################*/
/*########################################################################################*/
footer { width:100%; background:#000; height:200px; float:left; }

footer #footer_menu { text-align:center; font-size:14px; margin:25px 0 0 0; }
footer #footer_menu a { text-decoration:none; }
footer #footer_menu a:hover { color:#e11219; }
footer #footer_menu span { display:block; margin:15px 0 0 0; }
footer #footer_menu span a { color:#e11219; text-decoration:none; }
footer #footer_menu a.active { color:#e11219; }
footer p { color:#FFF; width:100%; margin:15px 0 0 0; text-align:center; color:#FFF; }

footer #social_icons { text-align:center; width:100%; margin:10px 0 0 0; }
footer #social_icons .social { width:50px; height:50px; display:inline-table; text-align:center; margin:0 10px 0 0; }
footer #social_icons .social img { width:100%; height:auto; }
footer #social_icons .social img:hover { opacity:0.5; }