html, body {width:100%; margin:0; padding:0;}
body {font-family:'Open Sans', Arial, sans-serif; font-size:16px; line-height:125%; color:#551285; background-color:#f6d0ff;}
div,* {box-sizing:border-box;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, main, section {display:block;}
ol, ul {list-style:none;}
table {border-collapse:collapse; border-spacing:0;}

.aural, #navskip p {position:absolute; top:-100em; left:-100em	}
#navskip p a {color:#cc0000; font-size:1em; position:absolute; width:10em;}

#wrapper {width:100%; min-width:320px; max-width:736px; margin:0 auto; overflow:hidden;}
#inner {position:relative; padding:0.875em 0.875em 0; margin:0 0 14px; background-color:#f6a7ff;}
#inner {width:100%; max-width:740px; min-width:320px; border-top:2.9em #5a2572 solid; padding-bottom:0;}
#inner:after {content:""; display:table; clear:both;}
#mainOuter {}

header {position:relative;}
#logoflaeche {position:relative; width:100%; height:9.5em; margin:0 0 0.875em; background-color:#870aa5;}
#logo {display:block; float:left; position:relative; margin:0; height:8.5em; width:100%; background-image:url('../img/sperrgebiet-hamburg.png'); background-repeat:no-repeat; background-size:auto 80%; background-position:15px center;}
#logoOrig {display:block; float:left; position:relative; width:400px; height:240px; background:url('../img/sperrgebiet-hamburg.png') no-repeat scroll 15px 25px;}
#logoflaeche h1 {position:absolute; bottom:10px; right:10px; color:#fff; font-weight:400; font-size:0.9em; text-align:right;}
#themennav {position:relative; padding:10px; margin:0 0 0.875em; background-color:#870aa5;}
#themennav ul, #themennav ul li, #subnav ul, #subnav ul li {margin:0; padding:0; list-style-type:none;}
#themennav ul {font-size:0.9em;}
#themennav ul li {font-size:1.0625em; font-weight:700; color:#fff; margin:0; }
#themennav ul li a {display:block; margin:0 0 0.2em; padding:0.5em 0.4em; text-decoration:none; color:#fff; background-color:#5a2572/*#00c8ef*/;}
#themennav ul li a.aMain {font-size:0.9em; padding-top:0.35em;}
#subnav ul li {font-size:1.2em; font-weight:800; margin:0 0 0.25em 0; background-color:#00c8ef; color:#551285;}
#subnav ul li a {display:block; padding:0.5em 0.25em 0.5em 0.25em; text-decoration:none; color:#551285;}
#themennav ul li a:focus, #themennav ul li a.act, #subnav ul li a:focus, #subnav ul li a.act {color:#f3f3f3;}

/*#hauptnavBtn {height:30px; background-image:url(../img/btn_mainnav.png); background-position:center; background-repeat:no-repeat; cursor:pointer;}*/
#hauptnavBtn {position:relative; height:3em; width:3em; margin:0 auto; background-color:#f3f3f3; cursor:pointer;}
#hauptnavBtn:before {content:""; display:block; position:absolute; top:0.8em; left:0.5em; height:3px; width:2em; background:#5a2572; transition:0.3s;}
#hauptnavBtn:after {content:""; display:block; position:absolute; bottom:0.8em; left:0.5em; height:3px; width:2em; background:#5a2572; transition:0.3s;}
.opened #hauptnavBtn:before {transform:rotate(45deg); top:1.25em;}
.opened #hauptnavBtn:after {transform:rotate(-45deg); top:1.25em;}

#hauptnav {margin-bottom:1em;}
#hauptnav ul {position:relative; margin:0; padding:0; z-index:90;}
#hauptnav ul.navMain {height:auto; padding-bottom:0.6em; background-color:#f3f3f3;}
#hauptnav ul, #hauptnav ul li {font-size:1em; line-height:1.2em;}
.de #hauptnav .liMain {padding-bottom:1em;}
#hauptnav a {display:block; padding:0.6em; text-decoration:none;}
#hauptnav .aMain {font-weight:bold;}
#hauptnav li ul {position:relative; display:block; padding-left:1em;}
#hauptnav .liAct .aMain, #hauptnav li .liAct a {color:#551285;}
#hauptnav a:focus-visible, #hauptnavBtn:focus-visible {outline-style:auto; outline-offset:-2px;}

#main {position:relative; padding:1em 1.125em; margin:0 0 0.875em; background-color:#f3f3f3;}
#maininner {background:url("../img/bg-streifen-bottom.gif") repeat-x 0 bottom; padding:0 0 55px;}
main {background:url("../img/bg-streifen-top.gif") repeat-x scroll 0 0; padding:10px 0;}
.box {position:relative;}
.box:after {content:""; display:table; clear:both;}
.box img {height:auto; width:auto; max-width:100%;}
.boxColored .boxContent {padding:0.1em 10px; margin-bottom:1em; background-color:#f6a7ff;}

.sidebar {}
.sidebar .box {padding:10px; background-color:#f3f3f3; margin:0 0 0.875em;}
.sidebar .slidebox {margin-top:-20px;}
.sidebar .slidebox .box {padding-top:0;}
.sidebar .slidebox .boxHead h3 {margin:0; padding:0.2em; font-size:1em; font-weight:normal; color:#fff; background-color:#870aa5; cursor:pointer;}
.sidebar .slidebox .boxHead h3:before {content:"+"; display:inline-block; width:1em; text-align:center;}
.sidebar .slidebox.boxOpened .boxHead h3:before {content:"-";}
.sidebar .slidebox .boxContent {display:none;}

.sideLang {position:absolute; top:-2.2em; left:0.875em; z-index:98;}
ul.langNav {margin:0 0 0.875em; padding:0;}
.langNav li {float:left; margin:0 0 2px; padding:0; list-style-type:none;}
.langNav li a {display:block; height:26px; width:44px; overflow:hidden; padding-left:45px; background-repeat:no-repeat; background-size:auto 75%; background-position:center center;}
.langNav li.en a {background-image:url('../img/english.gif');}
.langNav li.es a {background-image:url('../img/es.gif');}
.langNav li.bg a {background-image:url('../img/bg2.gif');}
.langNav li.ro a {background-image:url('../img/ro.gif');}

#footer {clear:left; position:relative; margin:0 0 2em; padding:18px 0 0; background:url("../img/bg-footer-top.gif") repeat-x 0 0;}
#footerinner {padding:0.875em; background-color:#f3f3f3;}
#footerinner:after {content:""; display:table; clear:both;}
#links {position:relative; margin: 0 0 0.875em 0; padding:0 1.125em; background-image:url("../img/bg-footer.gif");}
#footer ul {margin:1em 0 0.125em 0; padding:0;}
#footerOrig  ul {margin:105px 0 15px; padding:0;}
#footer ul li {display:inline; float:left; font-size:0.875em; font-weight:normal; color:#d93fff; background-color:#f3f3f3; padding:0.25em 0.375em 0.25em 0.375em; margin: 0 1.5em 0.875em 0;}
#footer ul li a {text-decoration:none;}
#footer ul li a.act {color:#551285; text-decoration:underline;}
#links:before, #footer ul:after {content:""; display:table; clear:both;}

#diakonie {padding:2px 0.525em 0; background-image:none; background-color:#5a2572;}
#diakonieOrig {float:right; position:relative; height:240px; width:240px; padding:10px; background-image:url(../img/bg-footer.gif);}
.quadMain {height:100%; padding:0.6em; background-color:#5a2572;}
.quadMain img {display:block; width:110px; height:auto;}
#copyright {position:absolute; bottom:-1.4em;}

#fixedTop {position:fixed; top:0; left:0; height:1px; width:100%; z-index:99;}
#fixedWrapper {position:relative; width:100%; min-width:320px; max-width:736px; margin:0 auto;}
#fixedInner {position:absolute; top:0; right:0; padding-right:10px; color:#fff; background-color:#5a2572; cursor:pointer;}
#fixedInnerOrig {position:absolute; top:0.875em; right:270px; padding-right:10px; color:#fff; background-color:#870aa5; cursor:pointer;}
#fixedInner:before {content:"Notausgang"; display:block; padding:0.9em 34px 0.9em 0.9em; font-size:0.8em; background-image:url('../img/exit.png'); background-position:right center; background-repeat:no-repeat;}
body.en #fixedInner:before {content:"Emergency exit";}
body.es #fixedInner:before {content:"Salida de emergencia";}

h1, h2, h3, h4, h5 {font-size:0.875em; font-weight:800; margin:0 0 0.25em 0; padding:0 0 0 0; }
h1, h2 {font-size:1.2em; }	
h3 {font-size:1em;}

h4 {font-size:0.75em; font-weight:normal;}
h1#seitehoeher, h2#seitehoeher {color:#fff; padding:0.5em 0.25em 0.5em 0.25em; margin:0 0 0.5em 0; background-color:#00c8ef;}
h2#seitentitel {color:#551285; padding:0.5em 0.25em 0.5em 0.25em; margin:0 0 0.5em 0; background-color:#00c8ef; }
#content .box h2, #content .box h3 {padding:0.8em 0 0.5em; border-top:0.25em solid #00c8ef;}
#content .box h3 a {display:block; color:#551285; color:#fff; background-color:#00c8ef; text-decoration:none; padding:0.5em 0.25em 0.5em 0.25em; margin-top:-0.3em;}
#content .box h3 a:hover {color:#551285; background-color:#00c8ef;}
#content {line-height:130%;}
#content p {line-height:1.4em;}
#content img {max-width:100%; height:auto;}
a {display:inline-block; color:#ae36cb; text-decoration:underline;}
a.phoneLink {color:#551285; text-decoration:none;}
i, em 	{font-style:italic;}
b, strong 	{font-weight:bold;}	
p, ul {font-size:1em; margin:0 0 1em;}
#maininner p, #maininner ul, #hauptnav {font-size:0.875em;}
hr {border:0; border-top:0.0625em solid #d93fff; color:#d93fff; background-color:#f3f3f3; margin:0;}
#diakonie p {color:#551285; font-size:0.75em; line-height:110%; padding:0.625em;}
#copyright p {color:#982fb2; font-size:0.7em; line-height:110%; padding:0; margin:0;}
#content ul {list-style-type:disc; list-style-position:outside; margin:0 0 1em 1.2em; padding:0;}
#content ul li {margin:0pt 0pt 0.5em;}
table {width:98%; height:auto; border-collapse:collapse; background-color:#bbecf6; margin:0 0 1.6em 0;}
table caption {/*display:none;*/}
table p {margin:0;}
tr {border-bottom:0.1em solid #ffffff;}
th {background-color:#00c3e9;}
td,th {vertical-align:top; text-align:left; padding:0 0.2em 0 0.2em;}
.small, small {font-size:0.8em;}
.sidebar table {margin:0;}
.sidebar td, .sidebar th {font-size:0.8em;}
.sidebar p {margin:0 0 0.4em;}
.sidebar p.small {margin:0.2em 0;}
.IntroText {font-size:1.25em; font-style:italic; font-weight:bold; line-height:125%;}
.noWrap, span.noWrap {white-space:nowrap;}
.clear {clear:both; height:1px; width:100%; overflow:hidden;}

.picLeft {float:left; width:auto; max-width:33%; margin:0 2% 1.5em 0;}
.picRight {float:right; width:auto; max-width:33%; margin:0 0 1.5em 2%;}
.boxPic {text-align:center; margin:0 0 1em;}

.boxSlider .boxContent {display:none;}
.boxSlider p.linkMore {font-size:0.9em; text-decoration:underline; color:#d93fff; cursor:pointer;}
.boxSlider p.linkMore:before {content:"+"; display:inline-block; height:1.5em; width:1.5em; margin-right:0.5em; text-align:center; font-weight:bold; text-decoration:none; color:#fff; background:#551285;}
.boxSlider.boxOpened p.linkMore:before {content:"-";}
.boxSlider p.linkMore span:before {content:"mehr dazu ...";}
.boxSlider.boxOpened p.linkMore span:before {content:"schließen";}

.editorLink {display:block; top:0px; right:0px; position:absolute; height:40px; width:40px; background-image:url('../img/edit.png'); background-color:#00c3e9;}

.sidebar h2 {font-size:1.2em;}
.sidebar h3, .sidebar p.bigger {font-size:1.5em; font-weight:800;}
.sidebar h4 {margin:0.2em 0 0;}
.sidebar .mailLink {font-size:0.8em; color:#551285;}
.sidebar table {width:100%;}
a.blockLink {display:block; padding:0.6em 0.5em; color:#551285;}
a.blockLink strong {font-size:1.1em;}

/* Extras einzelne Seiten  */
iframe, video {max-width:100%;}
#content .textHalf h2, #content .textHalf h3 {border:none; padding:0;}
p.IntroText {line-height:150%;}
#a6 h1 {margin-bottom:-1.9em; white-space:nowrap; overflow:hidden;}

#a137 {padding-bottom:1em;}
#a137 a, #a137 img {display:block;}
#a137 video {display:block; width:360px; height:auto; margin:0 auto;}
#videoButton {position:absolute; display:block; height:auto; width:auto; max-width:25%; bottom:1em; right:0; margin:8%; cursor:pointer;}
#videoHolder {display:none; text-align:center; background-color:#B5A2C5;}

@media screen and (min-width:575px){
  #logoflaeche h1, #main p, #main ul {font-size:1em;}
}

@media screen and (min-width:767px){
  h1, h2, #subnav ul li {font-size:1.5em;}
  h3 {font-size:1.375em;}
  .textholder {position:absolute; left:0; bottom:20px; width:100%;}
  .textholder:before, .textholder:after {content:""; display:table; clear:both;}
  .textHalf, .csc-textpic-above .textHalf {float:left; width:47%; padding:0.5em 0; margin:1.5%; box-sizing:border-box; background-color:rgba(255,255,255,0.8);}
  #content .textHalf h2, .textHalf p, .textFull p {padding:0.3em 10px; margin:0; font-weight:bold;}
  .textHalf h2 a {color:#551285; text-decoration:none;}
  .textFull {margin:1.5%; box-sizing:border-box; background-color:rgba(255,255,255,0.8);}
  .boxPicLeft .boxPic {float:left; width:30%; margin:0 1% 1em 0; text-align:left;}
  .boxPicLeft .boxContent {width:68%;}
  .boxPicRight .boxPic {float:right; width:30%; margin:0 0 1em 1%; text-align:right;}
  .boxPicRight .boxContent {width:68%;}
  .boxPicOnly .boxPic {padding-bottom:0.45em;}
  #themennav ul {font-size:1em;}
}

@media screen and (min-width:990px){
  #wrapper, #fixedWrapper {width:990px; max-width:100%;}
  #inner {max-width:100%; border:none;}
  #mainOuter, #links {float:left; width:708px;}
  .sidebar {width:15em; float:right;}
  #logoflaeche, #themennav {height:15em;}
  #logo {height:240px; width:400px; background-size:auto; background-position:15px 25px;}
  #themennav ul li a {padding:0.24em 0.4em;}
  .sideLang {position:relative; top:0; left:0;}
  ul.langNav { margin:0 0 0.875em;}
  .langNav li {float:none;}
  .langNav li a {height:auto; width:auto; padding:0.55em 0 0.55em 4em; background-color:#f3f3f3; text-decoration:none; background-position:10px center; background-repeat:no-repeat;}
  #hauptnav, .de #hauptnav {font-size:0.9em; max-height:300px; overflow:visible; margin:0;}
  #hauptnavBtn {display:none;}
  #hauptnav ul {position:relative; margin:0; padding:0; z-index:90;}
  #hauptnav ul.navMain {width:100%;}
  #hauptnav .navMain:after {content:""; display:table; clear:both;}
  #hauptnav .liMain {float:left; margin:0; padding:0;}
  #hauptnav .liMain.last {float:right;}
  #hauptnav .liMain.first.last {float:none; text-align:center;}
  #hauptnav a {padding:0.6em;}
  #hauptnav .liAct .aMain, #hauptnav li .liAct a {color:#551285;}
  #hauptnav li ul {position:absolute; left:auto; top:auto; display:none; padding:0; background-color:#f3f3f3;}
  #hauptnav li.last ul {right:0;}
  #hauptnav li:hover ul, #hauptnav li.sfHover ul, #hauptnav .navOpened ul {display:block;}
  #hauptnav li li {float:none;}
  #links {float:left; width:708px; height:auto; min-height:15em; padding:0 1.125em;}
  #links ul {margin:7em 0 2em; padding:0;}
  #diakonie {float:right; position:relative; height:15em; width:15em; padding:10px;  background-image:url(../img/bg-footer.gif);}
  #fixedInner {top:0.875em; right:270px; background-color:#870aa5;}
}

@media screen and (min-width:1200px){
  #wrapper, #fixedWrapper {width:1170px;}
  #mainOuter, #links {width:886px;}
  #main {padding:2em 63px 2.5em; font-size:1.13em;}
  #subnav {font-size:0.9em;}
  #links {padding-left:63px;}
  #hauptnav a:hover, #footer ul li a:hover {color:#551285;}
  #themennav ul li a:hover {color:#00c8ef;}
  #subnav ul li a:hover {color:#f3f3f3;}
}

@media screen and (max-width:766px) {
  .hidden-sm-down {display:none;}
}

@media screen and (max-width:989px) {
  .langNav {position:absolute; top:-2.3em;}
  #hauptnav {margin-bottom:0;}
  .de #hauptnav .navMain {max-height:1px; overflow:hidden; visibility:hidden; transition:max-height 0.5s, visibility 0s linear 0.5s;}
  .de #hauptnav.opened .navMain {max-height:600px; visibility:visible; transition-delay:0s;}
}