/* CSS Document */

.pics_in_a_row { /* has media query */
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.img1 { flex: 1.11; }
.img2 { flex: 1.632; }
.img3 { flex: 0.695; }
.img4 { flex: 1.333; } /*1.507*/
.img5 { flex: 0.75; }/* noch nicht vergeben */

.imgRow {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

* {
	padding:0;/*entfernt alle Standardabstände*/
	margin: 0;
	list-style:none;/*entfernt alle Standardformatierungen in allen Listen*/
	/*color: #000000;*/
}

a {
color: #000000;}

/*mittlere und rechte Spalte gleich lang */
html,body {
/*  height: 100%;*/
}


.clearfix:after {
content: ".";
display: block;
clear: both;
font-size: 0;
height: 0;
visibility: hidden;
}



body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 18px;
	background-color: #be1937;
}

.bodyLarge {
  font-size: 13px;
  line-height: 21px;
}

.bodyLarge p {
  margin-bottom: 14px !important;
}

svg { fill: currentColor; }

#Layer_2 {
height:20px;
width:auto;
}


h2,
h2.contProHead {
	font-weight: bold;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 18px;
}
/* +++++++++++++++++++++++ mittlere und rechte Spalte gleich lang +++++++++++++++++++++++++++ */

/*max. Breite begrenzen u. ggf. zentrieren */

.main {
    margin: 0 auto;
    max-width: 1400px;
}

.main #wrapperbgPic {
    overflow: hidden;
    padding-left: 18%;
    padding-right: 19.1%;
}

#nav,
#content,
#rechteSpalte {
    padding-bottom: 9999px;
   /* margin-bottom: -9999px;*/ /* nach Klick auf Anker lässt sich nicht mehr hochscrollen */
}
section,
aside {
    padding: 30px
}

/* END mittlere und rechte Spalte gleich lang */


/* sticky Up-Button */
/* SKIPLINK */
.go-top {
	z-index:200;
position: fixed;
bottom: 2em;
right: 2em;
text-decoration: none;
color: white;
background-color: rgba(0, 0, 0, 0.3);
border:2px solid #666;
border-radius:9px 0;
font-size: 12px;
padding: 1em;
display: none;/**/
}

.go-top a{
color: white;
}

.go-top:hover {
background-color: rgba(0, 0, 0, 0.6);
border-color:#999;
}

/* END sticky Up-Button */



img{/*Bilder kein Rand*/
border:0;
}

/* mouseover bei Bildern */
a img{
border:0;/* evtl. überflssg. */
opacity: 1;
-webkit-transition:opacity 200ms ease-out;
-moz-transition:opacity 200ms ease-out;
-o-transition:opacity 200ms ease-out;
transition:opacity 200ms ease-out;
padding-bottom: 4px;
}

a:hover img{
border:0;/* evtl. überflssg. */
opacity: 0.7;
-webkit-transition:opacity 500ms ease-out;
-moz-transition:opacity 500ms ease-out;
-o-transition:opacity 500ms ease-out;
transition:opacity 500ms ease-out;
}


a:linkBoldRot {
	font-weight: bold;
	color: #be1936;
}


.clearing{
	clear: both;
}

sup {/*hochgestellte Zeichen*/
	font-size:0.7em;
}

.farbigerText { /* geht auch mit contProRot */
	color:#be1936;
}

.noMarginTop {
margin-top: 0 !important;
}

.negMargin4 {
margin-top: -4px !important;
}

/*Begin Kopfzeile*/

.spendenButton {
  background-color: #FFFFFF;
  border: none;
  border-radius: 3px;
  color: #000000;
  cursor: pointer;
  padding: 5px 10px;
  margin-bottom: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  transition: background-color 0.5s, color 0.2s;
}

.spendenButton:hover {
background-color: #ff0909;
color: #FFFFFF;
}

#header3 {
    /*height: 100px;*/
}

#header3 > ul > li {
    color: #fff;
}

.headerLogo {
	float:left;
	width:67%;
	height:auto;
}

#headerTxt {
    line-height: 1.6em;
	margin-left: 69%;
    padding-bottom: 6px;
    padding-top: 13px;
}

#headerTxt p{
	color:#CCC;
}

#headerTxt a {
color:#FFF;
text-decoration: none;
border-bottom:1px dotted #fff;
}

#headerTxt a:hover {
	color:#F99;
	text-decoration: none;
	border-bottom:1px dotted #ff6450;
}


/*end Kopfzeile*/







/*Beginn vertical Navigationsmenu*/

#button-container {
	display:none;
}

#logosub {
	width: 230px;
	height: 105px;
}


#nav {
    float: left;
    font-size: 12px;
    height: 100%;
    margin-left: -31%;
    width: 31%;
}

#festerMenupunkt01,
#festerMenupunkt02 {/*ohne Link*/
	background-color: #be1936;
	font-weight: bold;
	color: #ffffff;
}

#nav ul .festerMenupunkt{/*spricht nur festen Menupunkt an*/
	padding: 3px 6px 3px 22px;/*Buttonsize und Abstand Text zu Buttons*/
}


#nav ul {
    list-style: outside none none;
    margin: 20px 0;
    padding: 0 0 15px 10px;
}

/*Buttonfarbe bei hover - darf nicht #nav a:hover sein - sonst Probleme mit ZertifWrapper */
#nav ul a:hover{
	background-color: #ff6450;
}

#nav li {
  margin:0;
  padding: 0 0 0 10px;
}

.navhauptmenupunkte {font-weight: normal;
}/*soll Fett der Unterpunkte entfernen???*/



.navuntermenupunkte a{
	font-weight: normal;
}/*soll Fett der Unterpunkte entfernen???*/

#nav ul a:link, #nav ul a:visited {
	text-decoration: none;/*entfernt Unterstreichung*/
	display:block;/*erzeugt Buttons*/
	margin:2px 0px;/*Abstand zw. Buttons*/
	padding: 6px 8px 6px 12px;/*Abstand Text zu Buttons*/
	/* die Höhenangabe ist für den IE, damit die gesamte FLäche des Links klickbar ist */
  height:1em;
	color: #ffffff;/*Textfarbe*/
  }
  
/*wozu ist das?*/
html>body #nav a:link, html>body #nav a:visited  {
  height:auto;
}
  

/*Linie zwischen Menupunkten*/
#nav .navBorderFirst {
	margin:0px 2px 6px 0px;/*Abstand zu Buttons und Innenabstand der Linie*/
	border-bottom-style: dotted;
	border-bottom-color: #f48074;
	border-width: 2px;
}

#nav .navBorder {
	margin:6px 2px 4px 0px;/*Abstand zu Buttons und Innenabstand der Linie*/
	border-bottom-style: dotted;
	border-bottom-color: #f48074;
	border-width: 2px;
}


#zuBewWelt {
	display:none;
}

/*==== current Hervorhebung des aktuellen Links / relevanter Teil der CSS Regeln / Festlegung der Buttongestaltung ===== */

#home #navhome a, /*es geht hier immer um die Kombination zweier Selektoren*/
#bildungswerk #navbildungswerk a,
#stellenanzeige #navstellenanzeige a,/*1.Selektor: html-Seiten-ID; 2. Selektor: im Body vergebene Listen-ID*/
#traegerverein #navtraegerverein a, /*alle Kontext-Selektoren für die Hervorhebung in der Navigation zusammengefasst*/
#praktikum #navpraktikum a,
#partner #navpartner a,
#spenden #navspenden a,/*Reihenfolge der Selektoren muss stimmen!, Komma in der Mitte, aber keines am Ende*/
#berichte #navberichte a,
#auszeichnungen #navauszeichnungen a, 
#dozenten #navdozenten a,
#krieg #navkrieg a,
#politik #navpolitik a,
#mediationSeminare #navmediationSeminare a,
#mediationFortbildung #navmediationFortbildung a,
#konflikt #navkonflikt a,
#fremdsprache #navfremdsprache a,
#archiv #navArchiv a,
#anmeldung #navanmeldung a,
#anfahrt #navanfahrt a,
#impressum #navimpressum a,
#hygiene #navhygiene a,
#links #navlinks a,
#aktuelles #navAktuelles a
{/*kein Komma am Ende*/
	cursor: default;/*damit auf dem aktuellen Link nicht die Hand erscheint*/
	background-color: #ff6450;
	color: #fff;/*TextFarbe*/
}
/*Ende vertical Navigationsmenu*/

/***************** begin Formatierung Zertifikatsblock ********************/
.zertifWrapp {
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.zertifWrapp a{
	background-color: #BE1936;
	display: inline-block !important;
}

.zertifWrapp a:hover{
	background-color: #BE1936;
}

.zertText{
	font-size:10px;
	line-height:14px;
	color:#FFF;
	padding-left: 10px;
}

.zertimg {
    margin: 7px 0 0 !important;
}

/************** Ende Formatierung Zertifikatsblock ******************/

/************ Message-Container: Zertif.-Info mit shadowbox *****************/

#messageContainer {/*der trigger - bei Verwendung v. nur 1 Logo*/
	/*background-color:#F60;*/
	/*height: 100px;*/
	width: 100px;
	/**/position: relative;
	font-size:0.9em;
	/*text-align: right;*/
	/**/left:50%;
	margin-left:-50px;
	top: 272px;
}

#messageContainer2Logos {/*der trigger - mit 2 Logos */
	/*background-color:#F60;*/
	/*height: 100px;*/
	width: 200px;
	/**/position: relative;
	font-size:0.9em;
	/*text-align: right;*/
	/**/left:50%;
	margin-left:-80px;
	top: 282px;
}

#messageContainer p {/**/
padding-top:4px;
}

#shadowboxFBKContainer {/*die eigentliche Lightbox*/
	/*height: 200px;*/
	/*width: 800px;*/
	/*top: 50px;*/
	/*position: relative;*/
	font-size:1.2em;
	/*text-align: right;*/
	display: none;
}

#shadowboxFBKContainer2 {/*die eigentliche Lightbox Nr 2 */
	/*height: 200px;*/
	/*width: 800px;*/
	/*top: 50px;*/
	/*position: relative;*/
	font-size:1.2em;
	/*text-align: right;*/
	display: none;
}

/* damit langer Text im Teaser unter dem Bild nicht nach links stößt */

/* Style to all p element except "contProHead" class name */ 
.teaserSmall p:not(.contProHead):not(.marginRight20) { 
margin-left: 40px;
margin-right: 20px;
} 

/* Bild im BodyText - von Text umflossen */
.BildContainerMainSB {
float: left;
margin: 20px 15px 0px 20px;/**/
}

/* Bild im SubheadText - von Text umflossen */
.BildContainerMainSubhead {
float: left;
margin: 7px 15px 2px 20px;/**/
}

.BildContainerMainBUSB {
	margin-bottom: 16px;
	/*font-size: 0.7em;*/
	/*line-height: 1.6em;*/
	margin: 20px 15px 15px 140px;/**/
}

.TextVersalFett{
font-weight:700;
text-transform: uppercase;
color:#999;
}


/************ Ende Message-Container mit shadowbox *****************/

/*begin Formatierung Anzeige*/

#anzeige{
	width:230px;
	z-index: 58;/*zentriert das Bild Anzeige*/
}

#anzeige  p a{
	color: #ffffff;/*Textfarbe*/
	padding:2px 2px 2px 12px;/*Abstand Text zu Buttons*/
	font-size: 9px;
  }

#anzeige a:hover{
	background-color: #be1936;/*killt hoverEffekt*/
  }

/*end Formatierung Anzeige*/



/* ++++++++++ START CSS / HTML only popup solution for hover over link, to contain text, links and images ++++++++++++++++ */
/*https://stackoverflow.com/questions/13999601/css-html-only-popup-solution-for-hover-over-link-to-contain-text-links-and-i*/

.popupBox {
    visibility:hidden;
    opacity:0;        
    transition:visibility 0s linear 0.3s,opacity 0.3s linear;
    transition: all 0.2s ease;
    transition-delay:  0.1s;
    padding: 10px;
}
.popupHoverElement:hover > .popupBox {
    visibility:visible;
    opacity:1;
    transition: all 0.2s ease;
    transition-delay:  0s;
    position:relative;
}
.popupBox a {
color: #fff;
}

#button1, #button2 {
    /*background:#FFF;*/
    position:relative;
    /*width:100px;
    height:30px;*/
    /*line-height:27px;*/
    /*display:block;*/
    /*border:1px solid #dadada;*/
    /*margin:15px 0 0 10px;*/
    /*text-align:center;*/
}
#popup1,#popup2 {
    background: none repeat scroll 0 0 #333;
    /*border: 1px solid #DADADA;*/
    color: #fff;
    overflow:hidden;
    /*left: 0;*/
    line-height: 20px;
    position: absolute;
    top: 30px;
    /*right: 30px;*/
    left: 30px;
}


/* ++++++++++ END popup solution for hover over link, ... ++++++++++++++++ */


/* ++++++++++ tooltips mit integriertem Link ++++++++++++++++ */
/*http://jquerytools.github.io/demos/tooltip/any-html.html*/

  .tooltip {
    display:none;
    background:#666;
    padding:10px 10px;
	margin-left:30px;
    /**/width:180px;
    font-size:11px;
    color:#fff;
	opacity:0.9;
  }

  .tooltip a {
    color:#ad4;
    font-size:11px;
    font-weight:bold;
  }
  
/* ++++++++++ END tooltips mit integriertem Link ++++++++++++++++ */

.condensedBold {
	font-family: 'Anton', sans-serif;
	font-size: 1.5em;
	letter-spacing: 0.01em;
}


/* START block iframes */
/* Script that blocks a YouTube iFrame and overlays it with a consent button */

#video-wrapper {
    background-repeat: no-repeat;
    background-size: cover;
   /* background-color: #000;*/
}
/* preview img : individual class for each video */
.overlayBG-01 {
    background-image: url("../Bilder/mediationFortb/Video-Mediation-Screenshot.png");
}
.overlayBG-02 {
    background-image: url();
}

#video-gdpr-overlay * {
  position: unset;
  top: unset;
  left: unset;
  width: auto;
  height: auto;
  font-weight: 900;
} 
#video-gdpr-overlay {
/*position: unset;*//* relative to acheive z-index */
  width: 100%;
  background: rgba(255,255,255, 0.8);
  color: #000;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: all;
}

#video-gdpr-overlay .inner {
  padding: 10px !important;
}

/* block-map-iframe */
/* Script that blocks a Maps iFrame and overlays it with a consent button*/
/* https://github.com/mountbatt/block-map-iframe */
/* Author: Tobias Battenberg */


#map-wrapper {
    background-image: url("../Bilder/allgemein/map.svg");
    background-repeat: no-repeat;
    background-size: cover;
}
#map-gdpr-overlay * {
  position: unset;
  top: unset;
  left: unset;
  width: auto;
  height: auto;
} 
#map-gdpr-overlay {
  width: 100%;
  background: rgba(255,255,255, 0.5);
  color: #000;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: all;
}

#map-gdpr-overlay .inner {
  padding: 10px !important;
}
/* ratios */
.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: 56.25%;
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-1x1 {
  padding-top: 100%;
}

.ratio-4x3 {
  padding-top: 75%;
}

.ratio-16x9 {
  padding-top: 56.25%;
}

.ratio-21x9 {
  padding-top: 42.8571428571%;
}

/* Button like Bootstrap */
.btn {
  padding: 0.8rem;
  line-height: 1.5rem;
  color: #fff;
  background-color: #be1936;
  border-radius: 0.3rem;
  text-decoration: none;
  cursor: pointer;
  font-weight: 400;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn:hover {
  background-color: #fff;
  color: #000;
}
/* END block iframes */


/*eingebettes Youtube Video responsive https://martinahonecker.com/youtube-videos-responsive-einbinden/*/

/*.video-wrapper {
background-color: aqua;
height: 700px;
}*/

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ------------------- begin right column ------------------- */
#rechteSpalte {
    background-color: #ddd;
    float: right;
    height: 100%;
    margin-right: -36%;
    padding-top: 20px;
    width: 56%;
    z-index: 88;
}

.aktuellesTitle {
	font-size: 12px;
	line-height: 16px;
	font-weight: bold;
	color: #be1936;
	margin-left: 10px;
}

.aktuellesTitle a {
	display:block;/*erzeugt hover-Rechteck*/
	height:20px; /*Abstand hover-Rechteck nach unten*/
	text-decoration:none;
	color: #be1936;
	margin-left: 0px;
	margin-bottom:-6px; /* kompensiert groesseren Abstand nach unten durch height */
}

.aktuellesTitle a:hover {
	color:#6f1121;
	background-color:#f8f4f2;
}

.aktuellesBody, .aktuellesHead {
	padding-right: 20%;
}

.aktuellesHead {
font-size: 11px;
line-height: 16px;
font-weight: bold;
color: #be1936;
margin-left: 10px;
text-decoration: none;
margin-bottom: 5px;
}

/* fuer Pfeile - wie aktuellesHead - o. margin */
.Rechtspfeile {
	font-size: 11px;
	line-height: 16px;
	font-weight: bold;
	color: #be1936;
}

.aktuellesHead a {
	color: #be1936;
	text-decoration:none;
}

.aktuellesHead a:hover{
	color: #790015;
}

.aktuellesBody {
	line-height: 16px;
	margin-left: 10px;
    margin-bottom: 6px;
	font-weight: normal;
}

.aktuellesBU {
	font-size: 0.7em;
	line-height: 1.4em;
	margin-left: 10px;
	margin-top: 2px;
	margin-bottom: 3px;
}

.aktuellesBorder {/*Linie zwischen Textabschnitten*/
	margin:-6px 2px 11px 10px;/*Abstand zu Buttons und Innenabstand der Linie*/
	border-bottom-style: dotted;
	border-bottom-color: #be1936;
	border-width: 2px;
}

.aktuellesBorderLeft {/*links anstossende Linie zwischen Textabschnitten*/
	margin:0px 2px 11px 0px;/*Abstand zu Buttons und Innenabstand der Linie*/
	border-bottom-style: dotted;
	border-bottom-color: #be1936;
	border-width: 2px;
}

.aktuellesBodyList {
	list-style-position: outside;
	list-style-type: disc;
	margin-left: 32px;
}


/* ------------------- end right column ------------------- */







/* ------------------- begin content ------------------- */

#content {
    background-color: #fff;
    float: left;
    height: 100%;
    text-align: left;
    width: 80%;
    z-index: 25;
}

.margLeftRight20px {
margin-left: 20px;
margin-right: 20px;
}


.imgFullCol,
.imgFullColLrg {
margin-bottom: 6px;
}

/* full Column Large (jede Viewport-Breite) / .imgFullCol < 1.000 px */
.imgFullColLrg {
    height: auto;
    width: 100%;
}

/* Weihnachten XMAS Gif Flex */

.responsive {
   max-width:100%;
   max-height:100%;
 }

.centerXMAS {
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%);
}

.parentXMAS {
  position: relative;
  height: 250px;
}

/* END Weihnachten XMAS Gif Flex */

.centerContent {
text-align: center;
}

p > .imgFullColLrg {
	margin-top:10px;
	margin-bottom: 0px;
}

.durchgestrichen {
	text-decoration:line-through;
}

/* ------------------- begin Bilder im Text ------------------- */

.LogoimText {
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 2px;
}

/* fuer Bilder und BUs im Body */
.BildContainerMain,
.BildContainerMain-w {
	float: left;
	margin: 6px 15px 0px 40px;
}

.BildContainerMain-w {
width: 67px;
}

.BildContainerMain2 {
float: left;
margin: 6px 15px 0px 0px;
}

.BildThmbAktuelles {
  float: left;
  margin: 4px 10px 0px 0px;
}

.BildContainerMain3 { /*für Startseite Titel*/
float: left;
margin: 6px 15px 0px 20px;
}

.BildContainerMain4 { /*für Startseite Titel, wenn das img die class BildThmbAktuelles hat */
float: left;
margin: 0px 10px 0px 20px;
}

/* fuer Bilder, die nur auf breiten Screens floaten */
.BildContainerMainFlex {
	float: left;
	margin: 6px 15px 0px 40px;
	width:45%;
	height:auto;
}

.BildContainerMainFlexSmall {
	float: left;
	margin: 6px 15px 0px 40px;
	width:35%;
	height:auto;
}


.BildContainerMainFlex img,
.BildContainerMainFlex2 img,
.BildContainerMainFlexSmall img {
	width: 100%;
	height:auto;
}

/* fuer Bilder im Subhead-Bereich, die nur auf breiten Screens floaten */
.BildContainerMainFlexSubhead {
    float: left;
    margin: 4px 15px 0px 20px;
    width: 30%;
    height: auto;
}

.BildContainerMainBU {
	margin-bottom: 6px;
	font-size: 0.8em;
	line-height: 1.6em;
	margin-top: 0.6em;
}

/*a img + p.BildContainerMainBU {
margin-top: 0 !important;
}*/

/*fit img to parent*/
.imgFit {
width: 100%;
height: auto;
}

.imgMargin {
	margin-top: 6px;
}


.imgMarginBorder {
	border: 1px solid #666;
}

.imgMarginBott {
	margin-bottom: 10px;
}

.width460 {
	width:460px;
}

.width75 {
	width:75px;
}

.magnifier {
position: relative;
}
.magnifier a::after {
  content: "";
  background-image: url("../Bilder/allgemein/Lupe-zoom-img.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-block;
  height: 2em;
  width: 2em;
  position: absolute;
  bottom: 59px;
  right: 22px;
  opacity: 0.6;
  z-index: 200;
}

/* ------------------- end Bilder im Text ------------------- */



/* ------------------- begin Programmliste ------------------- */
.conProMenuContainer{
	/*width: 500px;*/
	border-top-style: solid;/*erste Linie oben*/
	border-top-color: #be1936;
	border-top-width: 1px;
}

ul .conProMenu a {
    border-bottom: 1px solid #be1936;
    color: #000000;
    display: block;
    font-size: 11px;
    line-height: 23px;
    padding: 5px 20px;
    text-decoration: none;
}

.conProMenu a:hover{
	background-color:
	#e5e0de;
	color: #be1936;
}


ul .conProMenuStrong a{
	font-weight: bold;
	color: #be1936;
}

.conProMenuStrong{
	font-weight: bold;
}


.conProMenuStrong a:hover{
	color: #be1936;/*soll fette Schrift bei hover einfaerben - hat keine Wirkung - funktioniert so nicht!*/
}


.contProBild { /* kleine margin-bottom wg. BU, danach muss clear:left folgen */
	margin: 10px 15px 2px 40px;
	float: left;
}

.contProSubBild { /* weniger li. margin */
	margin: 6px 15px 2px 0;
	float: left;
}

.floatLeft-icon { /* für Icons li neben Text re */
	float: left;
	margin: 6px 6px 0 0;
}

.contProBU { /* BUs re neben Bild, danach muss clear:left folgen */
	margin: 6px 10px 10px 0px;
	font-size: 0.8em;
	line-height: 1.6em;
}

/* funzt auch mehrzeilig  */
/* BUs unterhalb Bild - funzt nur, wenn Text mit clear:left beginnt*/
.contProBUunter{
	margin:4px 20px 10px 40px;
	line-height:1.6em;
    font-size: 0.8em;
}

.contProBUunterMZ{ /* BUs mehrzeilig unterhalb Bild - funzt nur, wenn Text mit clear:left beginnt*/
	margin-left: 40px;
	margin-right: 20px;
	margin-top: 4px;
	margin-bottom: 4px;
	font-size: 0.8em;
	line-height: 1.4em;
}

.contProBUmarginleft { /* BUs eingerueckt wie Head unterhalb Bild */
    font-size: 0.8em;
    line-height: 1.4em;
    margin: 0 0 10px 20px;
}

.contProBUmarginleftHigh { /* BUs eingerueckt wie Head unterhalb Bild, nach oben verschoben */
    font-size: 0.8em;
    line-height: 1.4em;
    margin: -24px 0 10px 20px;
}

/* ------------------- end Programmliste ------------------- */


.contProSubHead,
.contProHead {
padding-bottom: 6px;
}

.contProHead {
	font-weight: bold;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 12px;
}

.contProHeadMager {
	font-weight: normal;
}

.contProHeadRot {
	font-weight: bold;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 12px;
	color: #be1936;
}


.contProSubHead {
	margin-left: 20px;
	margin-right: 20px;
}

.contProSubHeadOrt {
	margin-left: 20px;
	margin-right: 0px;/*wegen rotem Text, der folgt*/
}

/*Linie zwischen Menupunkten*/
.contProBorder {
	border-bottom-style: solid;
	border-bottom-color: #000000;
	border-bottom-width: 1px;
	clear:both;
}

.contProBorderRed {
	border-bottom-style: solid;
	border-bottom-color: #be1936;
	border-bottom-width: 1px;
}

.contProBorderRedDotted {
	border-bottom-style: dotted;
	border-bottom-color: #be1936;
	border-bottom-width: 2px;
}

.contProBorderTopRed {
	border-top-style: solid;
	border-top-color: #be1936;
	border-top-width: 1px;
}

.contProBorderGrey {
	border-bottom-style: solid;
	border-bottom-color: #c9c9c9;
	border-bottom-width: 1px;
}

/*  Kursangebote durch gepunktete Linien getrennt - Basis: rechtsbündig */

.contProBorderRedDottedMarg {
	border-bottom-style: dotted;
	border-bottom-color: #be1936;
	border-bottom-width: 2px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 2px;
	line-height: 0.05em;
}

.contProReBdg {
    text-align: right;
    font-weight: bold;
    border-bottom-style: dotted;
    border-bottom-color: #be1936;
    border-bottom-width: 2px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 8px;
    padding-bottom: 6px;
}

.contProLiBdg {
    text-align: left;
    float: left;
    font-weight: bold;
}

/*  Kursangebote durch gepunktete Linien getrennt - Basis: linksbündig */

.kursliste {
	border-bottom-style: dotted;
	border-bottom-color: #be1936;
	border-bottom-width: 2px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 2px;
	line-height: 0.05em;
}

.kurslisteLeft {
    text-align: left;
    font-weight: bold;
    border-bottom-style: dotted;
    border-bottom-color: #be1936;
    border-bottom-width: 2px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 8px;
    padding-bottom: 6px;
}

.kurslisteRight {
    text-align: right;
    float: right;
    font-weight: bold;
}

/* Content Kurs-Programm */

.durchgestrichen {
text-decoration: line-through;
}

.contProRot {
	color: #be1936;
}

.contProRotBold,
.contProRotBold a,
.contProRot a,/*sorgt fuer rote und fette Link in zurueck zur Uebersichts*/
a.contProRot strong {/*zurueck zur Uebersicht*/
	color: #be1936;
	font-weight: bold;
}

.contProBodyRotBold,
.contProBodyRotBold a {
	color: #be1936;
	font-weight: bold;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 4px;
}

.contProBody {
	margin-left: 40px;
	margin-right: 20px;
	margin-bottom: 4px;
}

.marginTop { /*sorgt fuer Abstand nach oben */
	margin-top: 6px;
}

.marginTopBW { /*sorgt fuer Abstand nach oben in Bewegte Welt */
	margin-top: 10px;
}
.marginTop16 { 
	margin-top: 16px;
}

.marginRight20 { /*sorgt fuer Abstand auf Startseite mitte, wenn Text um Bilder laeuft */
	margin-right: 20px;
	margin-left: 40px;
}

.marginLeft40 { /*sorgt fuer Abstand auf Startseite mitte, wenn Text um Bilder laeuft */
	margin-left: 40px;
}

.marginBott6 { /*sorgt fuer Abstand zur folgenden Zeile */
	margin-bottom: 6px;
}

.marginBott0 { /* killt Abstand zur folgenden Zeile */
	margin-bottom: 0px !important;
}

.marginBott-img { /*sorgt fuer Abstand zur folgenden Zeile */
	margin-bottom: 20px;
}

.contProBodyLZHalb {
	line-height: 0.8em;	
}

/* nicht mehr verwenden:*/
.contProList {
	list-style-position: outside;
	list-style-type: circle;
	margin-left: 55px;
	margin-right: 20px;
}

/* nicht mehr verwenden:*/
.contProListbuendig {
	list-style-position: outside;
	list-style-type: circle;
	margin-left: 40px;
	margin-right: 20px;
	margin-top: 4px;
	margin-bottom: 6px;
}
/* nicht mehr verwenden:*/
/* contProListbuendig2 für ul */ /* zus. m. li class="aktuellesBodyList" */
.contProListbuendig2 {
	list-style-position: outside;
	list-style-type: circle;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 4px;
	margin-bottom: 6px;
}

/*verwenden:*/
.contProListbuendig3 {
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 4px;
	margin-bottom: 6px;
}

.contProListbuendig3 li{
	list-style-position: outside;
	list-style-type: circle;
	margin-left: 30px;
	padding-bottom: 3px;
}


.contProBody a:hover,
.aktuellesBody a:hover,
.contProSubHead a:hover{/*Wechsel zu rot bei Links im Text*/
	color: #be1936;
}




h1 {/*neue h1 - wie in Willkommen*/
	font-size: 16px;
	color: #be1936;
	font-weight: bold;
	line-height: 23px;
	margin-left: 20px;
}


.TextZentriertMargBott{
	text-align:center;
	margin-bottom:16px;
}

/* ------------------- begin Dozentinnen & Dozenten ------------------- */

.dozent {
	border-bottom: 2px dotted #be1936;
	margin:20px 20px 0 20px;
}

.dozent img {
	float:left;
	margin-bottom:6px;
}

h3.dozentText {
	margin-bottom: 12px;
}

.dozentText {
	margin-left:140px;
}

/* ------------------- begin Mediationliste ------------------- */
.mediationTitle {
	font-size: 12px;
	font-weight: bold;
	background-color: #be1936;
	display: block;
	padding-left: 2px;
	color: #FFFFFF;
	height: 20px;
	padding-top: 1px;
	margin-bottom: 2px;
	margin-left: 20px;
	margin-right: 20px;
}
/* ------------------- end Mediationliste ------------------- */



.textListeNormal{
	font-weight: normal;
	vertical-align: bottom;
}

.textListeBold{
	font-weight: bold;
}

/*ordered list*/
ol.inSubhead {
  margin-left: 35px;
}

ol.inSubhead li,
ol.inContProBody li {
  list-style: decimal;
}

ol.inContProBody {
  margin-left: 54px;
  margin-right: 25px;
}

/* ------------------- verlinkte Bilder ------------------- */

a img.border1px {
border: 1px solid #000000;
}

a img.border1px:hover {
border: 1px solid #D9D9D9;
}


/* ----- breitere Nav- und Bew.Welt-Spalten ------ */

@media (min-width: 800px) and (max-width: 1000px)
{

.headerLogo {
    width: 70%;
}

#headerTxt {
    margin-left: 75%;
	padding-top: 3px;
}

#nav {
    /*margin-left: -31%;*/
    width: 41%;
}


#content {
    width: 80%;
}


#rechteSpalte {
   /* margin-right: -36%;*/
    width: 46%;
}

}


/* +++++++++++++++++++++++++ Desktop & Mobiles +++++++++++++++++++++++++++ */

@media (max-width: 1000px)
{
	.imgFullCol {
    height: auto;
    width: 100%;
}


}

@media (max-width: 1250px)
{
	.imgFixMobileFull580 {
    height: auto;
    width: 100%;
}


}

/* +++++++++++++++++++++++++ Mobiles +++++++++++++++++++++++++++ */

@media (max-width: 500px)
{

/* fuer Bilder, die nur auf breiten Screens floaten */
.BildContainerMainFlex {
	margin:10px 0 10px 40px;
	width:88%;
}

/* fuer Bilder im Subhead-Bereich, die nur auf breiten Screens floaten */
.BildContainerMainFlexSubhead {
    width: 88%;
}

.pics_in_a_row {
  display: block;
}

.img1, .img2, .img3, .img4, .img5 {
margin-bottom: 15px;
}

/* ------------------- begin Dozentinnen & Dozenten ------------------- */

.dozent {

}

.dozent > img {
	float:none;
	margin-bottom:12px;
}

.dozentText {
	margin-left:0;
}

}

@media (max-width: 799px)
{

/* Header */
#header3 {
    text-align: center;
}

.headerLogo {
    float: none;
    height: auto;
    width: 100%;
}

#headerTxt {
    line-height: 1.6em;
    margin-left: 10px;
    padding-bottom: 16px;
    padding-top: 8px;
}

#headerTxt li {
	display: inline-block;
	padding: 2px 4px;
}

/* Navigation */

#button-container,
#zuBewWelt a {
	color:#FFF;
}

#button-container {
    background: rgba(0, 0, 0, 0.15) none repeat scroll 0 0;
    border-top: 1px solid #fff;
    display: block;
    font-size: 26px;
    height: 56px;
    position: relative;
	/*text-align: center;*/
}

/* +++++++ START Animated Mobile Menu Button +++++++++ */

/* Common CSS */
.c-hamburger {
    border: medium none;
    box-shadow: none;
    cursor: pointer;
    display: block;
	float:left;
    font-size: 0;
    height: 56px;/* change */
    margin: 0 0 0 20px;/* change */
    overflow: hidden;
    padding: 0;
    position: relative;
    text-indent: -9999px;
    transition: background 0.3s ease 0s;
    width: 56px;/* change */
}

.c-hamburger:focus {
  outline: none;
}

/* the inner span tag is actually home to the hamburger bars */

.c-hamburger span {
  display: block;
  position: absolute;
  top: 26px;/* change */
  left: 10px;/* change */
  right: 10px;/* change */
  height: 5px;/* change */
  background: white;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 5px;/* change */
  background-color: #fff;
  content: "";
}

.c-hamburger span::before {
  top: -12px;/* change */
}

.c-hamburger span::after {
  bottom: -12px;/* change */
}

/* Animate To "X" */

.c-hamburger--htx {
  background-color: #cb0032;
}

.c-hamburger--htx span {
  transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  transition-property: top, transform;
}

.c-hamburger--htx span::after {
  transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: #ff6450;
}

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
}

/* +++++++ END Animated Mobile Menu Button +++++++++ */

#menuButton {
    /*float: left;*/
    /*padding: 12px 0 0 20px;*/
	/*zentrieren: */
/*	padding-top:12px;
	display:inline-block;*/
}

#menuButton span {
/*    position: relative;
    top: 4px;*/
}

#menuButton:hover {
/*	cursor:pointer;
	color:#CCC;*/
}

.menuTitle {
    padding-left: 92px;
    padding-top: 18px;
}


#zuBewWelt {
	display:block;
	/*float:right;*/
	/*font-size:0.8em;*/
	/*padding: 10px 20px 0 0 ;*/
}

#zuBewWelt a {
	text-decoration:none;
}

#zuBewWelt a:hover {
		color:#CCC;
}

#navList {
	display:none;
}

#navMobile { /*Button:*/
    background-color: #ddd;
    border: 1px solid #be1937;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    padding: 10px 16px;
    text-align: center;
}

#nav {
    /*display: none;*/
    float: none;
    font-size: 12px;
    height: auto;
    margin-left:0;
    width: auto;
}

#nav, #content, #rechteSpalte {
    margin-bottom:0;
    padding-bottom:0;
}



/* Content */

.main #wrapperbgPic {
    overflow: visible;
    padding-left:0;
    padding-right:0;
}


#content {
    background-color: #fff;
    float: none;
    height: auto;
    text-align: left;
    width: auto;
    z-index: 1;
}

#rechteSpalte {
    background-color: #ddd;
    float: none;
    height: auto;
    margin-right:0;
    width: auto;
    z-index: 1; 
}



}

/* Bereich zwischen 800 und 1000 px */
@media (min-width: 800px) and (max-width: 1000px) 
{
/* fuer Bilder, die nur auf breiten Screens floaten */
.BildContainerMainFlex {
	width:89%;
}
}

/* Bereich zwischen 652 und 799 px */
@media (min-width: 652px) and (max-width: 799px) 
{
/* fuer Bilder, die nur auf breiten Screens floaten . bis 500px : 88% . schmaler Container, wenn breite Spalte */
.BildContainerMainFlex {
	width:45%;
}
}
/* CSS Document */

.pics_in_a_row { /* has media query */
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.img1 { flex: 1.11; }
.img2 { flex: 1.632; }
.img3 { flex: 0.695; }
.img4 { flex: 1.333; } /*1.507*/
.img5 { flex: 0.75; }/* noch nicht vergeben */

.imgRow {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

* {
	padding:0;/*entfernt alle Standardabstände*/
	margin: 0;
	list-style:none;/*entfernt alle Standardformatierungen in allen Listen*/
	/*color: #000000;*/
}

a {
color: #000000;}

/*mittlere und rechte Spalte gleich lang */
html,body {
/*  height: 100%;*/
}


.clearfix:after {
content: ".";
display: block;
clear: both;
font-size: 0;
height: 0;
visibility: hidden;
}



body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 18px;
	background-color: #be1937;
}

.bodyLarge {
  font-size: 13px;
  line-height: 21px;
}

.bodyLarge p {
  margin-bottom: 14px !important;
}

svg { fill: currentColor; }

#Layer_2 {
height:20px;
width:auto;
}

/* +++++++++++++++++++++++ mittlere und rechte Spalte gleich lang +++++++++++++++++++++++++++ */

/*max. Breite begrenzen u. ggf. zentrieren */

.main {
    margin: 0 auto;
    max-width: 1400px;
}

.main #wrapperbgPic {
    overflow: hidden;
    padding-left: 18%;
    padding-right: 19.1%;
}

#nav,
#content,
#rechteSpalte {
    padding-bottom: 9999px;
   /* margin-bottom: -9999px;*/ /* nach Klick auf Anker lässt sich nicht mehr hochscrollen */
}
section,
aside {
    padding: 30px
}

/* END mittlere und rechte Spalte gleich lang */


/* sticky Up-Button */
/* SKIPLINK */
.go-top {
	z-index:200;
position: fixed;
bottom: 2em;
right: 2em;
text-decoration: none;
color: white;
background-color: rgba(0, 0, 0, 0.3);
border:2px solid #666;
border-radius:9px 0;
font-size: 12px;
padding: 1em;
display: none;/**/
}

.go-top a{
color: white;
}

.go-top:hover {
background-color: rgba(0, 0, 0, 0.6);
border-color:#999;
}

/* END sticky Up-Button */



img{/*Bilder kein Rand*/
border:0;
}

/* mouseover bei Bildern */
a img{
border:0;/* evtl. überflssg. */
opacity: 1;
-webkit-transition:opacity 200ms ease-out;
-moz-transition:opacity 200ms ease-out;
-o-transition:opacity 200ms ease-out;
transition:opacity 200ms ease-out;
padding-bottom: 4px;
}

a:hover img{
border:0;/* evtl. überflssg. */
opacity: 0.7;
-webkit-transition:opacity 500ms ease-out;
-moz-transition:opacity 500ms ease-out;
-o-transition:opacity 500ms ease-out;
transition:opacity 500ms ease-out;
}


a:linkBoldRot {
	font-weight: bold;
	color: #be1936;
}


.clearing{
	clear: both;
}

sup {/*hochgestellte Zeichen*/
	font-size:0.7em;
}

.farbigerText { /* geht auch mit contProRot */
	color:#be1936;
}

/*Begin Kopfzeile*/

.spendenButton {
  background-color: #FFFFFF;
  border: none;
  border-radius: 3px;
  color: #000000;
  cursor: pointer;
  padding: 5px 10px;
  margin-bottom: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  transition: background-color 0.5s, color 0.2s;
}

.spendenButton:hover {
background-color: #ff0909;
color: #FFFFFF;
}

#header3 {
    /*height: 100px;*/
}

#header3 > ul > li {
    color: #fff;
}

.headerLogo {
	float:left;
	width:67%;
	height:auto;
}

#headerTxt {
    line-height: 1.6em;
	margin-left: 69%;
    padding-bottom: 6px;
    padding-top: 13px;
}

#headerTxt p{
	color:#CCC;
}

#headerTxt a {
color:#FFF;
text-decoration: none;
border-bottom:1px dotted #fff;
}

#headerTxt a:hover {
	color:#F99;
	text-decoration: none;
	border-bottom:1px dotted #ff6450;
}


/*end Kopfzeile*/







/*Beginn vertical Navigationsmenu*/

#button-container {
	display:none;
}

#logosub {
	width: 230px;
	height: 105px;
}


#nav {
    float: left;
    font-size: 12px;
    height: 100%;
    margin-left: -31%;
    width: 31%;
}

#festerMenupunkt01,
#festerMenupunkt02 {/*ohne Link*/
	background-color: #be1936;
	font-weight: bold;
	color: #ffffff;
}

#nav ul .festerMenupunkt{/*spricht nur festen Menupunkt an*/
	padding: 3px 6px 3px 22px;/*Buttonsize und Abstand Text zu Buttons*/
}


#nav ul {
    list-style: outside none none;
    margin: 20px 0;
    padding: 0 0 15px 10px;
}

/*Buttonfarbe bei hover - darf nicht #nav a:hover sein - sonst Probleme mit ZertifWrapper */
#nav ul a:hover{
	background-color: #ff6450;
}

#nav li {
  margin:0;
  padding: 0 0 0 10px;
}

.navhauptmenupunkte {font-weight: normal;
}/*soll Fett der Unterpunkte entfernen???*/



.navuntermenupunkte a{
	font-weight: normal;
}/*soll Fett der Unterpunkte entfernen???*/

#nav ul a:link, #nav ul a:visited {
	text-decoration: none;/*entfernt Unterstreichung*/
	display:block;/*erzeugt Buttons*/
	margin:2px 0px;/*Abstand zw. Buttons*/
	padding: 6px 8px 6px 12px;/*Abstand Text zu Buttons*/
	/* die Höhenangabe ist für den IE, damit die gesamte FLäche des Links klickbar ist */
  height:1em;
	color: #ffffff;/*Textfarbe*/
  }
  
/*wozu ist das?*/
html>body #nav a:link, html>body #nav a:visited  {
  height:auto;
}
  

/*Linie zwischen Menupunkten*/
#nav .navBorderFirst {
	margin:0px 2px 6px 0px;/*Abstand zu Buttons und Innenabstand der Linie*/
	border-bottom-style: dotted;
	border-bottom-color: #f48074;
	border-width: 2px;
}

#nav .navBorder {
	margin:6px 2px 4px 0px;/*Abstand zu Buttons und Innenabstand der Linie*/
	border-bottom-style: dotted;
	border-bottom-color: #f48074;
	border-width: 2px;
}


#zuBewWelt {
	display:none;
}

/*==== current Hervorhebung des aktuellen Links / relevanter Teil der CSS Regeln / Festlegung der Buttongestaltung ===== */

#home #navhome a, /*es geht hier immer um die Kombination zweier Selektoren*/
#bildungswerk #navbildungswerk a,/*1.Selektor: html-Seiten-ID; 2. Selektor: im Body vergebene Listen-ID*/
#traegerverein #navtraegerverein a, /*alle Kontext-Selektoren für die Hervorhebung in der Navigation zusammengefasst*/
#praktikum #navpraktikum a,
#partner #navpartner a,
#spenden #navspenden a,/*Reihenfolge der Selektoren muss stimmen!, Komma in der Mitte, aber keines am Ende*/
#berichte #navberichte a,
#auszeichnungen #navauszeichnungen a, 
#dozenten #navdozenten a,
#krieg #navkrieg a,
#politik #navpolitik a,
#mediationSeminare #navmediationSeminare a,
#mediationFortbildung #navmediationFortbildung a,
#konflikt #navkonflikt a,
#fremdsprache #navfremdsprache a,
#archiv #navArchiv a,
#anmeldung #navanmeldung a,
#anfahrt #navanfahrt a,
#impressum #navimpressum a,
#hygiene #navhygiene a,
#links #navlinks a,
#aktuelles #navAktuelles a
{/*kein Komma am Ende*/
	cursor: default;/*damit auf dem aktuellen Link nicht die Hand erscheint*/
	background-color: #ff6450;
	color: #fff;/*TextFarbe*/
}
/*Ende vertical Navigationsmenu*/

/***************** begin Formatierung Zertifikatsblock ********************/
.zertifWrapp {
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.zertifWrapp a{
	background-color: #BE1936;
	display: inline-block !important;
}

.zertifWrapp a:hover{
	background-color: #BE1936;
}

.zertText{
	font-size:10px;
	line-height:14px;
	color:#FFF;
	padding-left: 10px;
}

.zertimg {
    margin: 7px 0 0 !important;
}

/************** Ende Formatierung Zertifikatsblock ******************/

/************ Message-Container: Zertif.-Info mit shadowbox *****************/

#messageContainer {/*der trigger - bei Verwendung v. nur 1 Logo*/
	/*background-color:#F60;*/
	/*height: 100px;*/
	width: 100px;
	/**/position: relative;
	font-size:0.9em;
	/*text-align: right;*/
	/**/left:50%;
	margin-left:-50px;
	top: 272px;
}

#messageContainer2Logos {/*der trigger - mit 2 Logos */
	/*background-color:#F60;*/
	/*height: 100px;*/
	width: 200px;
	/**/position: relative;
	font-size:0.9em;
	/*text-align: right;*/
	/**/left:50%;
	margin-left:-80px;
	top: 282px;
}

#messageContainer p {/**/
padding-top:4px;
}

#shadowboxFBKContainer {/*die eigentliche Lightbox*/
	/*height: 200px;*/
	/*width: 800px;*/
	/*top: 50px;*/
	/*position: relative;*/
	font-size:1.2em;
	/*text-align: right;*/
	display: none;
}

#shadowboxFBKContainer2 {/*die eigentliche Lightbox Nr 2 */
	/*height: 200px;*/
	/*width: 800px;*/
	/*top: 50px;*/
	/*position: relative;*/
	font-size:1.2em;
	/*text-align: right;*/
	display: none;
}

/* Bild im BodyText - von Text umflossen */
.BildContainerMainSB {
float: left;
margin: 20px 15px 0px 20px;/**/
}

/* Bild im SubheadText - von Text umflossen */
.BildContainerMainSubhead {
float: left;
margin: 7px 15px 2px 20px;/**/
}

.BildContainerMainBUSB {
	margin-bottom: 16px;
	/*font-size: 0.7em;*/
	/*line-height: 1.6em;*/
	margin: 20px 15px 15px 140px;/**/
}

.TextVersalFett{
font-weight:700;
text-transform: uppercase;
color:#999;
}


/************ Ende Message-Container mit shadowbox *****************/

/*begin Formatierung Anzeige*/

#anzeige{
	width:230px;
	z-index: 58;/*zentriert das Bild Anzeige*/
}

#anzeige  p a{
	color: #ffffff;/*Textfarbe*/
	padding:2px 2px 2px 12px;/*Abstand Text zu Buttons*/
	font-size: 9px;
  }

#anzeige a:hover{
	background-color: #be1936;/*killt hoverEffekt*/
  }

/*end Formatierung Anzeige*/


/* ++++++++++ tooltips mit integriertem Link ++++++++++++++++ */
/*http://jquerytools.github.io/demos/tooltip/any-html.html*/

  .tooltip {
    display:none;
    background:#666;
    padding:10px 10px;
	margin-left:30px;
    /**/width:180px;
    font-size:11px;
    color:#fff;
	opacity:0.9;
  }

  .tooltip a {
    color:#ad4;
    font-size:11px;
    font-weight:bold;
  }
  
/* ++++++++++ END tooltips mit integriertem Link ++++++++++++++++ */

.condensedBold {
	font-family: 'Anton', sans-serif;
	font-size: 1.5em;
	letter-spacing: 0.01em;
}


/* START block iframes */
/* Script that blocks a YouTube iFrame and overlays it with a consent button */

#video-wrapper {
    background-repeat: no-repeat;
    background-size: cover;
   /* background-color: #000;*/
}
/* preview img : individual class for each video */
.overlayBG-01 {
    background-image: url("../Bilder/mediationFortb/Video-Mediation-Screenshot.png");
}
.overlayBG-02 {
    background-image: url();
}

#video-gdpr-overlay * {
  position: unset;
  top: unset;
  left: unset;
  width: auto;
  height: auto;
  font-weight: 900;
} 
#video-gdpr-overlay {
/*position: unset;*//* relative to acheive z-index */
  width: 100%;
  background: rgba(255,255,255, 0.8);
  color: #000;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: all;
}

#video-gdpr-overlay .inner {
  padding: 10px !important;
}

/* block-map-iframe */
/* Script that blocks a Maps iFrame and overlays it with a consent button*/
/* https://github.com/mountbatt/block-map-iframe */
/* Author: Tobias Battenberg */


#map-wrapper {
    background-image: url("../Bilder/allgemein/map.svg");
    background-repeat: no-repeat;
    background-size: cover;
}
#map-gdpr-overlay * {
  position: unset;
  top: unset;
  left: unset;
  width: auto;
  height: auto;
} 
#map-gdpr-overlay {
  width: 100%;
  background: rgba(255,255,255, 0.5);
  color: #000;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: all;
}

#map-gdpr-overlay .inner {
  padding: 10px !important;
}
/* ratios */
.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: 56.25%;
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-1x1 {
  padding-top: 100%;
}

.ratio-4x3 {
  padding-top: 75%;
}

.ratio-16x9 {
  padding-top: 56.25%;
}

.ratio-21x9 {
  padding-top: 42.8571428571%;
}

/* Button like Bootstrap */
.btn {
  padding: 0.8rem;
  line-height: 1.5rem;
  color: #fff;
  background-color: #be1936;
  border-radius: 0.3rem;
  text-decoration: none;
  cursor: pointer;
  font-weight: 400;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn:hover {
  background-color: #fff;
  color: #000;
}
/* END block iframes */


/*eingebettes Youtube Video responsive https://martinahonecker.com/youtube-videos-responsive-einbinden/*/

/*.video-wrapper {
background-color: aqua;
height: 700px;
}*/

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ------------------- begin right column ------------------- */
#rechteSpalte {
    background-color: #ddd;
    float: right;
    height: 100%;
    margin-right: -36%;
    padding-top: 20px;
    width: 56%;
    z-index: 88;
}

.aktuellesTitle {
	font-size: 12px;
	line-height: 16px;
	font-weight: bold;
	color: #be1936;
	margin-left: 10px;
}

.aktuellesTitle a {
	display:block;/*erzeugt hover-Rechteck*/
	height:20px; /*Abstand hover-Rechteck nach unten*/
	text-decoration:none;
	color: #be1936;
	margin-left: 0px;
	margin-bottom:-6px; /* kompensiert groesseren Abstand nach unten durch height */
}

.aktuellesTitle a:hover {
	color:#6f1121;
	background-color:#f8f4f2;
}

.aktuellesBody, .aktuellesHead {
	padding-right: 20%;
}

.aktuellesHead {
font-size: 11px;
line-height: 16px;
font-weight: bold;
color: #be1936;
margin-left: 10px;
text-decoration: none;
margin-bottom: 5px;
}

/* fuer Pfeile - wie aktuellesHead - o. margin */
.Rechtspfeile {
	font-size: 11px;
	line-height: 16px;
	font-weight: bold;
	color: #be1936;
}

.aktuellesHead a {
	color: #be1936;
	text-decoration:none;
}

.aktuellesHead a:hover{
	color: #790015;
}

.aktuellesBody {
	line-height: 16px;
	margin-left: 10px;
    margin-bottom: 6px;
	font-weight: normal;
}

.aktuellesBU {
	font-size: 0.7em;
	line-height: 1.4em;
	margin-left: 10px;
	margin-top: 2px;
	margin-bottom: 3px;
}

.aktuellesBorder {/*Linie zwischen Textabschnitten*/
	margin:-6px 2px 11px 10px;/*Abstand zu Buttons und Innenabstand der Linie*/
	border-bottom-style: dotted;
	border-bottom-color: #be1936;
	border-width: 2px;
}

.aktuellesBorderLeft {/*links anstossende Linie zwischen Textabschnitten*/
	margin:0px 2px 11px 0px;/*Abstand zu Buttons und Innenabstand der Linie*/
	border-bottom-style: dotted;
	border-bottom-color: #be1936;
	border-width: 2px;
}

.aktuellesBodyList {
	list-style-position: outside;
	list-style-type: disc;
	margin-left: 32px;
}


/* ------------------- end right column ------------------- */







/* ------------------- begin content ------------------- */

#content {
    background-color: #fff;
    float: left;
    height: 100%;
    text-align: left;
    width: 80%;
    z-index: 25;
}

.margLeftRight20px {
margin-left: 20px;
margin-right: 20px;
}


.imgFullCol,
.imgFullColLrg {
margin-bottom: 6px;
}

/* full Column Large (jede Viewport-Breite) / .imgFullCol < 1.000 px */
.imgFullColLrg {
    height: auto;
    width: 100%;
}

/* Weihnachten XMAS Gif Flex */


height: 220px;/* END Weihnachten XMAS Gif Flex */

.centerContent {
text-align: center;
}

p > .imgFullColLrg {
	margin-top:10px;
	margin-bottom: 0px;
}

.durchgestrichen {
	text-decoration:line-through;
}

/* ------------------- begin Bilder im Text ------------------- */

.LogoimText {
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 2px;
}

/* fuer Bilder und BUs im Body */
.BildContainerMain,
.BildContainerMain-w {
	float: left;
	margin: 6px 15px 0px 40px;
}

.BildContainerMain-w {
width: 67px;
}

.BildContainerMain2 {
float: left;
margin: 6px 15px 0px 0px;
}

.BildThmbAktuelles {
  float: left;
  margin: 4px 10px 0px 0px;
}

.BildContainerMain3 { /*für Startseite Titel*/
float: left;
margin: 6px 15px 0px 20px;
}

.BildContainerMain4 { /*für Startseite Titel, wenn das img die class BildThmbAktuelles hat */
float: left;
margin: 0px 10px 0px 20px;
}

/* fuer Bilder, die nur auf breiten Screens floaten */
.BildContainerMainFlex {
	float: left;
	margin: 6px 15px 0px 40px;
	width:45%;
	height:auto;
}

.BildContainerMainFlexSmall {
	float: left;
	margin: 6px 15px 0px 40px;
	width:35%;
	height:auto;
}


.BildContainerMainFlex img,
.BildContainerMainFlex2 img,
.BildContainerMainFlexSmall img {
	width: 100%;
	height:auto;
}

/* fuer Bilder im Subhead-Bereich, die nur auf breiten Screens floaten */
.BildContainerMainFlexSubhead {
    float: left;
    margin: 4px 15px 0px 20px;
    width: 30%;
    height: auto;
}

.BildContainerMainBU {
	margin-bottom: 6px;
	font-size: 0.8em;
	line-height: 1.6em;
	margin-top: 0.6em;
}

/*a img + p.BildContainerMainBU {
margin-top: 0 !important;
}*/

/*fit img to parent*/
.imgFit {
width: 100%;
height: auto;
}

.imgMargin {
	margin-top: 6px;
}


.imgMarginBorder {
	border: 1px solid #666;
}

.imgMarginBott {
	margin-bottom: 10px;
}

.width460 {
	width:460px;
}

.width75 {
	width:75px;
}

.magnifier {
position: relative;
}
.magnifier a::after {
  content: "";
  background-image: url("../Bilder/allgemein/Lupe-zoom-img.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-block;
  height: 2em;
  width: 2em;
  position: absolute;
  bottom: 59px;
  right: 22px;
  opacity: 0.6;
  z-index: 200;
}

/* ------------------- end Bilder im Text ------------------- */



/* ------------------- begin Programmliste ------------------- */
.conProMenuContainer{
	/*width: 500px;*/
	border-top-style: solid;/*erste Linie oben*/
	border-top-color: #be1936;
	border-top-width: 1px;
}

ul .conProMenu a {
    border-bottom: 1px solid #be1936;
    color: #000000;
    display: block;
    font-size: 11px;
    line-height: 23px;
    padding: 5px 20px;
    text-decoration: none;
}

.conProMenu a:hover{
	background-color:
	#e5e0de;
	color: #be1936;
}


ul .conProMenuStrong a{
	font-weight: bold;
	color: #be1936;
}

.conProMenuStrong{
	font-weight: bold;
}


.conProMenuStrong a:hover{
	color: #be1936;/*soll fette Schrift bei hover einfaerben - hat keine Wirkung - funktioniert so nicht!*/
}


.contProBild { /* kleine margin-bottom wg. BU, danach muss clear:left folgen */
	margin: 10px 15px 2px 40px;
	float: left;
}

.contProSubBild { /* weniger li. margin */
	margin: 6px 15px 2px 0;
	float: left;
}

.floatLeft-icon { /* für Icons li neben Text re */
	float: left;
	margin: 6px 6px 0 0;
}

.contProBU { /* BUs re neben Bild, danach muss clear:left folgen */
	margin: 6px 10px 10px 0px;
	font-size: 0.8em;
	line-height: 1.6em;
}

/* funzt auch mehrzeilig  */
/* BUs unterhalb Bild - funzt nur, wenn Text mit clear:left beginnt*/
.contProBUunter{
	margin:4px 20px 10px 40px;
	line-height:1.6em;
    font-size: 0.8em;
}

.contProBUunterMZ{ /* BUs mehrzeilig unterhalb Bild - funzt nur, wenn Text mit clear:left beginnt*/
	margin-left: 40px;
	margin-right: 20px;
	margin-top: 4px;
	margin-bottom: 4px;
	font-size: 0.8em;
	line-height: 1.4em;
}

.contProBUmarginleft { /* BUs eingerueckt wie Head unterhalb Bild */
    font-size: 0.8em;
    line-height: 1.4em;
    margin: 0 0 10px 20px;
}

.contProBUmarginleftHigh { /* BUs eingerueckt wie Head unterhalb Bild, nach oben verschoben */
    font-size: 0.8em;
    line-height: 1.4em;
    margin: -24px 0 10px 20px;
}

/* ------------------- end Programmliste ------------------- */


.contProSubHead,
.contProHead {
padding-bottom: 6px;
}

.contProHead {
	font-weight: bold;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 12px;
}

.contProHeadMager {
	font-weight: normal;
}

.contProHeadRot {
	font-weight: bold;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 12px;
	color: #be1936;
}


.contProSubHead {
	margin-left: 20px;
	margin-right: 20px;
}

.contProSubHeadOrt {
	margin-left: 20px;
	margin-right: 0px;/*wegen rotem Text, der folgt*/
}

/*Linie zwischen Menupunkten*/
.contProBorder {
	border-bottom-style: solid;
	border-bottom-color: #000000;
	border-bottom-width: 1px;
	clear:both;
}

.contProBorderRed {
	border-bottom-style: solid;
	border-bottom-color: #be1936;
	border-bottom-width: 1px;
}

.contProBorderRedDotted {
	border-bottom-style: dotted;
	border-bottom-color: #be1936;
	border-bottom-width: 2px;
}

.contProBorderTopRed {
	border-top-style: solid;
	border-top-color: #be1936;
	border-top-width: 1px;
}

.contProBorderGrey {
	border-bottom-style: solid;
	border-bottom-color: #c9c9c9;
	border-bottom-width: 1px;
}

/*  Kursangebote durch gepunktete Linien getrennt - Basis: rechtsbündig */

.contProBorderRedDottedMarg {
	border-bottom-style: dotted;
	border-bottom-color: #be1936;
	border-bottom-width: 2px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 2px;
	line-height: 0.05em;
}

.contProReBdg {
    text-align: right;
    font-weight: bold;
    border-bottom-style: dotted;
    border-bottom-color: #be1936;
    border-bottom-width: 2px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 8px;
    padding-bottom: 6px;
}

.contProLiBdg {
    text-align: left;
    float: left;
    font-weight: bold;
}

/*  Kursangebote durch gepunktete Linien getrennt - Basis: linksbündig */

.kursliste {
	border-bottom-style: dotted;
	border-bottom-color: #be1936;
	border-bottom-width: 2px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 2px;
	line-height: 0.05em;
}

.kurslisteLeft {
    text-align: left;
    font-weight: bold;
    border-bottom-style: dotted;
    border-bottom-color: #be1936;
    border-bottom-width: 2px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 8px;
    padding-bottom: 6px;
}

.kurslisteRight {
    text-align: right;
    float: right;
    font-weight: bold;
}

/* Content Kurs-Programm */

.durchgestrichen {
text-decoration: line-through;
}

.contProRot {
	color: #be1936;
}

.contProRotBold,
.contProRotBold a,
.contProRot a,/*sorgt fuer rote und fette Link in zurueck zur Uebersichts*/
a.contProRot strong {/*zurueck zur Uebersicht*/
	color: #be1936;
	font-weight: bold;
}

.contProBodyRotBold,
.contProBodyRotBold a {
	color: #be1936;
	font-weight: bold;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 4px;
}

.contProBody {
	margin-left: 40px;
	margin-right: 20px;
	margin-bottom: 4px;
}

.marginTop { /*sorgt fuer Abstand nach oben */
	margin-top: 6px;
}

.marginTopBW { /*sorgt fuer Abstand nach oben in Bewegte Welt */
	margin-top: 10px;
}
.marginTop16 { 
	margin-top: 16px;
}

.marginRight20 { /*sorgt fuer Abstand auf Startseite mitte, wenn Text um Bilder laeuft */
	margin-right: 20px;
	margin-left: 40px;
}

.marginLeft40 { /*sorgt fuer Abstand auf Startseite mitte, wenn Text um Bilder laeuft */
	margin-left: 40px;
}

/*sorgt im umschl. DIV fuer Text-Abstand  z. 80 px breiten Bildern - f. Text, der mit contProSubHead formatiert ist*/
.marginLeft-img { 
	margin-left: 95px;
}

.marginBott6 { /*sorgt fuer Abstand zur folgenden Zeile */
	margin-bottom: 6px;
}

.marginBott0 { /* killt Abstand zur folgenden Zeile */
	margin-bottom: 0px !important;
}

.contProBodyLZHalb {
	line-height: 0.8em;	
}

/* nicht mehr verwenden:*/
.contProList {
	list-style-position: outside;
	list-style-type: circle;
	margin-left: 55px;
	margin-right: 20px;
}

/* nicht mehr verwenden:*/
.contProListbuendig {
	list-style-position: outside;
	list-style-type: circle;
	margin-left: 40px;
	margin-right: 20px;
	margin-top: 4px;
	margin-bottom: 6px;
}
/* nicht mehr verwenden:*/
/* contProListbuendig2 für ul */ /* zus. m. li class="aktuellesBodyList" */
.contProListbuendig2 {
	list-style-position: outside;
	list-style-type: circle;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 4px;
	margin-bottom: 6px;
}

/*verwenden:*/
.contProListbuendig3 {
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 4px;
	margin-bottom: 6px;
}

.contProListbuendig3 li{
	list-style-position: outside;
	list-style-type: circle;
	margin-left: 30px;
	padding-bottom: 3px;
}


.contProBody a:hover,
.aktuellesBody a:hover,
.contProSubHead a:hover{/*Wechsel zu rot bei Links im Text*/
	color: #be1936;
}




h1 {/*neue h1 - wie in Willkommen*/
	font-size: 16px;
	color: #be1936;
	font-weight: bold;
	line-height: 23px;
	margin-left: 20px;
}


.TextZentriertMargBott{
	text-align:center;
	margin-bottom:16px;
}

/* ------------------- begin Dozentinnen & Dozenten ------------------- */

.dozent {
	border-bottom: 2px dotted #be1936;
	margin:20px 20px 0 20px;
}

.dozent img {
	float:left;
	margin-bottom:6px;
}

h3.dozentText {
	margin-bottom: 12px;
}

.dozentText {
	margin-left:140px;
}

/* ------------------- begin Mediationliste ------------------- */
.mediationTitle {
	font-size: 12px;
	font-weight: bold;
	background-color: #be1936;
	display: block;
	padding-left: 2px;
	color: #FFFFFF;
	height: 20px;
	padding-top: 1px;
	margin-bottom: 2px;
	margin-left: 20px;
	margin-right: 20px;
}
/* ------------------- end Mediationliste ------------------- */



.textListeNormal{
	font-weight: normal;
	vertical-align: bottom;
}

.textListeBold{
	font-weight: bold;
}

/*ordered list*/
ol.inSubhead {
  margin-left: 35px;
}

ol.inSubhead li,
ol.inContProBody li {
  list-style: decimal;
}

ol.inContProBody {
  margin-left: 54px;
  margin-right: 25px;
}

/* ------------------- verlinkte Bilder ------------------- */

a img.border1px {
border: 1px solid #000000;
}

a img.border1px:hover {
border: 1px solid #D9D9D9;
}


/* ----- breitere Nav- und Bew.Welt-Spalten ------ */

@media (min-width: 800px) and (max-width: 1000px)
{

.headerLogo {
    width: 70%;
}

#headerTxt {
    margin-left: 75%;
	padding-top: 3px;
}

#nav {
    /*margin-left: -31%;*/
    width: 41%;
}


#content {
    width: 80%;
}


#rechteSpalte {
   /* margin-right: -36%;*/
    width: 46%;
}

}


/* +++++++++++++++++++++++++ Desktop & Mobiles +++++++++++++++++++++++++++ */

@media (max-width: 1000px)
{
	.imgFullCol {
    height: auto;
    width: 100%;
}


}

@media (max-width: 1250px)
{
	.imgFixMobileFull580 {
    height: auto;
    width: 100%;
}


}

/* +++++++++++++++++++++++++ Mobiles +++++++++++++++++++++++++++ */

@media (max-width: 500px)
{

/* fuer Bilder, die nur auf breiten Screens floaten */
.BildContainerMainFlex {
	margin:10px 0 10px 40px;
	width:88%;
}

/* fuer Bilder im Subhead-Bereich, die nur auf breiten Screens floaten */
.BildContainerMainFlexSubhead {
    width: 88%;
}

.pics_in_a_row {
  display: block;
}

.img1, .img2, .img3, .img4, .img5 {
margin-bottom: 15px;
}

/* ------------------- begin Dozentinnen & Dozenten ------------------- */

.dozent {

}

.dozent > img {
	float:none;
	margin-bottom:12px;
}

.dozentText {
	margin-left:0;
}

}

@media (max-width: 799px)
{

/* Header */
#header3 {
    text-align: center;
}

.headerLogo {
    float: none;
    height: auto;
    width: 100%;
}

#headerTxt {
    line-height: 1.6em;
    margin-left: 10px;
    padding-bottom: 16px;
    padding-top: 8px;
}

#headerTxt li {
	display: inline-block;
	padding: 2px 4px;
}

/* Navigation */

#button-container,
#zuBewWelt a {
	color:#FFF;
}

#button-container {
    background: rgba(0, 0, 0, 0.15) none repeat scroll 0 0;
    border-top: 1px solid #fff;
    display: block;
    font-size: 26px;
    height: 56px;
    position: relative;
	/*text-align: center;*/
}

/* +++++++ START Animated Mobile Menu Button +++++++++ */

/* Common CSS */
.c-hamburger {
    border: medium none;
    box-shadow: none;
    cursor: pointer;
    display: block;
	float:left;
    font-size: 0;
    height: 56px;/* change */
    margin: 0 0 0 20px;/* change */
    overflow: hidden;
    padding: 0;
    position: relative;
    text-indent: -9999px;
    transition: background 0.3s ease 0s;
    width: 56px;/* change */
}

.c-hamburger:focus {
  outline: none;
}

/* the inner span tag is actually home to the hamburger bars */

.c-hamburger span {
  display: block;
  position: absolute;
  top: 26px;/* change */
  left: 10px;/* change */
  right: 10px;/* change */
  height: 5px;/* change */
  background: white;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 5px;/* change */
  background-color: #fff;
  content: "";
}

.c-hamburger span::before {
  top: -12px;/* change */
}

.c-hamburger span::after {
  bottom: -12px;/* change */
}

/* Animate To "X" */

.c-hamburger--htx {
  background-color: #cb0032;
}

.c-hamburger--htx span {
  transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  transition-property: top, transform;
}

.c-hamburger--htx span::after {
  transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: #ff6450;
}

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
}

/* +++++++ END Animated Mobile Menu Button +++++++++ */

#menuButton {
    /*float: left;*/
    /*padding: 12px 0 0 20px;*/
	/*zentrieren: */
/*	padding-top:12px;
	display:inline-block;*/
}

#menuButton span {
/*    position: relative;
    top: 4px;*/
}

#menuButton:hover {
/*	cursor:pointer;
	color:#CCC;*/
}

.menuTitle {
    padding-left: 92px;
    padding-top: 18px;
}


#zuBewWelt {
	display:block;
	/*float:right;*/
	/*font-size:0.8em;*/
	/*padding: 10px 20px 0 0 ;*/
}

#zuBewWelt a {
	text-decoration:none;
}

#zuBewWelt a:hover {
		color:#CCC;
}

#navList {
	display:none;
}

#navMobile { /*Button:*/
    background-color: #ddd;
    border: 1px solid #be1937;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    padding: 10px 16px;
    text-align: center;
}

#nav {
    /*display: none;*/
    float: none;
    font-size: 12px;
    height: auto;
    margin-left:0;
    width: auto;
}

#nav, #content, #rechteSpalte {
    margin-bottom:0;
    padding-bottom:0;
}



/* Content */

.main #wrapperbgPic {
    overflow: visible;
    padding-left:0;
    padding-right:0;
}


#content {
    background-color: #fff;
    float: none;
    height: auto;
    text-align: left;
    width: auto;
    z-index: 1;
}

#rechteSpalte {
    background-color: #ddd;
    float: none;
    height: auto;
    margin-right:0;
    width: auto;
    z-index: 1; 
}



}

/* Bereich zwischen 800 und 1000 px */
@media (min-width: 800px) and (max-width: 1000px) 
{
/* fuer Bilder, die nur auf breiten Screens floaten */
.BildContainerMainFlex {
	width:89%;
}
}

/* Bereich zwischen 652 und 799 px */
@media (min-width: 652px) and (max-width: 799px) 
{
/* fuer Bilder, die nur auf breiten Screens floaten . bis 500px : 88% . schmaler Container, wenn breite Spalte */
.BildContainerMainFlex {
	width:45%;
}
}