/* Letzte Änderung: 11.12.2013 durch Stefan Bohres */

@media screen, projection
{
/* Erzwingen vertikaler Scrollbalken in IE8, Firefox, Webkit & Opera */
  body { overflow-y:scroll; }
  
/* Randbereiche & Seitenhintergrund */

  body { 
    background:#438E58;
	background-image: url(../../grafik/hintergrund.jpg);
	background-repeat:no-repeat;
	background-size:100%;	 
	} 
/* Zentrierung des Layouts in alten IE-versionen */
  body { text-align:center; }
 
/* ------------------------------------------------------------------------------------------------- */
/* Modifikation: Höhe 100% mit Footer am unteren Rand                                                */
/* ------------------------------------------------------------------------------------------------- */

 body, html { height: 100% !important; padding: 0;}  

/* Layout:Breite, Hintergrund, Rahmen */
.ym-wrapper {
  	position:relative !important;
  	min-height:100%; /* real browsers */
  	height: auto !important;
  	min-width:740px;
/* 76em, wenn Schriftgröße für Calibri auf 95% gesetzt wird */
  	max-width:76em;
  	background: #fff; 
  	text-align:left;
  	margin:0 auto; 
  	padding:0 5px 0 5px; 
	-webkit-box-shadow: 0px 3px 33px #000000;	/* webkit browser*/
	-moz-box-shadow: 0px 3px 33px #000000;	/* firefox */
	box-shadow: 0px 3px 33px #000000; /* CSS3 */
  }

/* Platz für #footer reservieren */
.ym-wbox {
  padding-bottom: 35px; 
  }

 * html .ym-wrapper { height:100% !important; }
 
header {
 	padding:1.0em 0 1.0em 0; 
	}

#topnavigation { 
 	color:#666666; 
	padding-left:0.5em; 
	}

#topnavigation p {
	margin:0;
	line-height:1.0em;
	}

/* Projektüberschrift */
#topnavigation h2 {
	margin:0 0 0.5em 0;
	padding:0;
	}


/* ----------------- Suchformular -------------------------------------- */
/* Suchfeld mit 38 px Höhe 2 px Rand = 40 px */

#suche {
	float:left; 
	border: 1px solid #ccc; 
	background-color:#fff;
    width:100%;
    height:38px; 
  	}

/* input-Feld stylen */
form.searchbox input[type=text] {
  padding: 12px 0 1px 10px;
  font-size: 0.85em; 
  line-height: 20px;
  border: none;
  float: left;
  width: 80%;
  background: #ffffff;
  outline: none!important;
}

/* Label */
form.searchbox label {
    position: absolute;
    clip: rect(1px,1px,1px,1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
    color: white;
}


/* Suchen-Button */
form.searchbox button {
  float: right;
  width: 10%;
  padding: 11px;
  background:none;
  color: #00823d;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

form.searchbox button:hover {
  color:#009900;
 }

/* Clear floats */
form.searchbox::after {
  content: "";
  clear: both;
  display: table;
}


/* Datenschutzlink zur Google-Suche unter dem Suchfeld */
.search-privacy-link {
     position: absolute;
     top: 55px;
     padding: 3px;
     margin-left:auto;
     margin-right:auto;
     font-size: 90%;
     background: rgba(255,255,255,.9);
     z-index: 8000;
     width: auto;
     display:none;
  }

/* Beim Klick in das Input-Feld den Datenschutzhinweis einblenden. Der bleibt über :active sichtbar */
.searchbox input:focus ~ .search-privacy-link { display:block; }
.search-privacy-link:active { display:block; }

/* Suchfeld in Caruso */
#csuche .suchfeld {
		padding:10px 10px 10px 10px;
		border: 1px solid #ccc; 
		}

/* Grafik, um im IE und FF gleiche Höhe zu garantieren */
#csuche input { 
	vertical-align:middle;
	margin-right:10px;
	 }	

/* ------- Ende Suche ----- */

/* Zusatznavigation Phone, am Desktop ausgeblendet */
#phonenavigation {
	display:none;
	 }

/* Logo rechts ausgerichtet */
.logo {
	background-image:url(../../grafik/lwknrw.gif);
	background-repeat:no-repeat;
	height:40px;
	float:right;
	}  
	
/* Hauptnavigation schiebt die anderen Layer nach unten */

nav { 
    padding:0 0 1.0em 0; 
	background-color:#ffffff; 
	}
	
nav .navibox {
	background-color:#00823d; 
	background: -webkit-gradient(linear, 0 0, 0 50%, from(#009e50), to(#00823d));
	background: -moz-linear-gradient(top, #009e50, #00823d 50%); 
	margin:5px;
	}
nav .navibox a h2 {
    font-size: 1.1em;
	font-weight:normal;
	background-image:url(../../grafik/winkelgruen.gif); background-repeat:no-repeat; background-position: right;
	/* padding:'padding-top' 'padding-right' 'padding-bottom' 'padding-left' */
	padding:8px;
	margin:0 10px 0 0; 
	color:#FFFFFF;
	}
nav .navibox a:hover h2 {
	color:#ffffff;
	text-decoration:underline;
	background-image:url(../../grafik/winkelweiss.gif); background-repeat:no-repeat; background-position: right;
	}		

nav a { color:#ffffff;	
		}
nav img {
	max-width:100%;
	height:auto;
	}
nav a img {
	border-top: 5px solid #FFFFFF;
	padding: 0;
}

nav a:hover img {
	border-top: 5px solid #00823d;
	padding: 0;
}

nav a:active img {
	border-top: 5px solid #00823d;
	padding: 0;
}

/* Überschrift als Sprungmarke */
nav h1 { display:none; } 

/* padding:'padding-top' 'padding-right' 'padding-bottom' 'padding-left' */
#micronavigation {
	padding:0 0.5em 0.3em 0.4em;
	border-top:5px solid #ffffff;
	}
#micronavigation p {
	font-size:85%;
	margin:0;
	line-height:130%;
	}

main { 
	margin:30px 10px 10px 10px;
    background-color:transparent;
 	}
 
/*------------------------------------------------------------------------------------------------------*/
/* Positionierung der Content Container. ym-col2 aus dem Standard-Layout wird ausgeblendet
   *
   * |------------------------------ ----------|
   * | header                                  |
   * |-----------------------------------------|
   * | nav                                     |
   * |-----------------------------------------|
   * | .ym-col2    | .ym-col1    |  .ym-col3   |
   * | (weg)       | 70 %        |   30%       |
   * |-----------------------------------------|
   * | footer                                  |
   * |-----------------------------------------|
   */
  
  /* padding:'padding-top' 'padding-right' 'padding-bottom' 'padding-left' */
  /* padding in em, damit bei Schriftvergrößerung der Überschrift die Navibox mit nach unten wandert */
  .ym-col1 { width: 70%; }
  .ym-cbox { padding:0 4.6em 1.0em 1.0em; }

  /* Linke Spalte */
  .ym-col2 { display:none; }
  .ym-cbox-left { display:none; } 
  
/* Rechte Spalte für Infobox oder Navigation */
  .ym-col3  { margin-left:70%; margin-right:0; }
/*  Spalte wird heruntergeschoben, um gleiche Höhe mit Hauptinhalt zu erreichen */

  .ym-cbox-right { padding:2.9em 1.0em 1.0em 0; } 

footer {
    position:relative !important;
    min-width: 740px;
    max-width: 76em;
    margin: 0 auto;
/* footer an die richtige Stelle schieben */
    margin: -35px auto 0;
	padding:0 5px 0 5px; 
	color:#eeeeee;
	}

/* Linkfarben im Footer */
footer a, footer a:visited, #footermap a, #footermap a:visited { color:#eeeeee; background:transparent; text-decoration:none; }
footer a:focus, footer a:hover, footer a:active, #footermap a:focus, #footermap a:hover, #footermap a:active { color:#ffffff; text-decoration:underline; outline: 0 none; }

footer .fbox {
    text-align: right;
   	margin:0;
/* padding:'padding-top' 'padding-right' 'padding-bottom' 'padding-left' */
	background-color:#666666;
   	background: -webkit-gradient(linear, 0 0, 0 80%, from(#666), to(#555));
	background: -moz-linear-gradient(top, #666, #555 80%);
	background: -o-linear-gradient(top, #666, #555 80%);
	background: linear-gradient(to bottom, #666, #555 80%); 
    }
	
footer p {
	margin:0;
	padding:0.25em; 
	}	

/* Skiplinks  */
  .ym-skiplinks a.ym-skip:focus,
  .ym-skiplinks a.ym-skip:active { 
	color:#fff; 
	background:#333; 
	border-bottom:1px #000 solid;
	padding:10px 0;
	text-decoration:none;
  }

/* ------------------------------------------------------------------------------------------------- */
/* Ende Seitenelemente YAML, Beginn eigenes CSS                                                      */
/* ------------------------------------------------------------------------------------------------- */

/* Navigation rechts */
.navigation {
	margin: 0;
	padding: 0;
	}
.navigation ul, .navigation li {
	list-style-type: none;
	padding:0;
	margin:0;
	}
.navigation a {
	display: block;
	overflow: hidden;
	margin-bottom: 0.2em; 
	padding: 10px ;
	
	background-color: #F0F0F0;
	background: -webkit-gradient(linear, 0 0, 0 50%, from(#FFFFFF), to(#F0F0F0));
	background: -moz-linear-gradient(top, #FFFFFF, #F0F0F0 50%);
	background: -o-linear-gradient(top, #FFFFFF, #F0F0F0 50%);
	background: linear-gradient(to bottom, #FFFFFF, #F0F0F0 50%); 
	
	border: 1px solid #e3e3e3;	
	border-left: 5px solid #e3e3e3;
	border-bottom: 1px solid #e2e2e2;
	position: relative;
	}

.navigation a:hover {
	border-left: 5px solid #006633;
	}

/* padding:'padding-top' 'padding-right' 'padding-bottom' 'padding-left' */
.navigation  li li a {
	padding: 10px 10px 10px 30px;
	background:none;
	background-color:#f0f0f0;
	}

.navigation a .winkel { 
	background-image:url(../../grafik/winkelgrau.gif);
	background-repeat:no-repeat;
	position: absolute;
	right: 10px;
	top:50%;
	margin-top: -5px;
	height: 13px;
	width: 13px;
	}
.navigation a:hover .winkel  { 
	background:url(../../grafik/winkeldgruen.gif);
	background-repeat:no-repeat;
	}

/* Fette Überschrift in Listen */
.navigation li.ueberschrift {
	font-weight:bold; 
	background-image: none;
	padding:0;
	margin:0.6em 0 0.3em 0;
	}	
/* Erste Überschrift in Listen */
.navigation li.ersteueberschrift {
	font-weight:bold; 
	background-image: none;
	padding:0;
	margin:0 0 0.3em 0;
	}	

/* Vorschaubild in Navigation */
.navigation img {
	height:50px;
	float:left;
	margin-right: 10px;
	margin-top: -10px;
	margin-bottom: -10px;
	margin-left: -10px; 
	}
	
/* Icon in Navigation */
.navigation img.icon {
	height:16px;
	float:none;
	margin:0 0 0 2px; 
	}
	
	
/* Ende Navigation */

/*--------- Info-Boxen in der Seitenspalte .ym-col3--------------------------------------------*/
 /* padding:'padding-top' 'padding-right' 'padding-bottom' 'padding-left' */
.infobox {
	margin:0;
	padding: 0;
	width:auto;
	}

/* Vorschaubild floatet nach rechts */	
.infobox .vorschau {
	float:right;
	margin:0 0 0 10px;
	padding:0;
	}

.infobox a.vorschautext h2 {
	background-position:1px 7px;
	padding-left:10px;
	}

.infobox a.vorschautext h3 {
	background-position:1px 5px;
	padding-left:10px;
	}

/* In der Infobox braucht die Textbox eine Breite */	
.infobox .textbox {
	width: 100%;
	}

.infobox p {
    padding:0.6em;
	margin-top:0;
	}

.infobox ul {
	list-style-type: none;
	padding: 0;
	margin:0 0 0 0.6em;
	}

.infobox li {
	background-image: url(../../grafik/pfeil.gif);
	background-repeat: no-repeat;
	background-position: 0 0.4em;
	padding-left: 0.7em;
	margin: 0.5em 0;
	}
	
/* Fette Überschrift in Listen */
.infobox li.ueberschrift {
	font-weight:bold; 
	background-image: none;
	padding:0;
	margin:0.6em 0 0 0;
	}

/* Wenn .fotobox innerhalb von .infobox steht, soll rechts kein Abstand sein */
.infobox .fotobox {
	margin-right:0;
	}
/* Etwas größere Überschrift, wenn .fotobox in .infobox steht */
.infobox .fotobox a h2 {
    font-size: 1.1em;
	}

/* ------------------- Inhaltselemente Hauptinhalt -------------- */

/* ------------------- Fotoboxen für Startseiten ---------------- */
/* padding:'padding-top' 'padding-right' 'padding-bottom' 'padding-left' */

.fotobox {
	margin: 0 1.0em 1.0em 0;
	background-color:#00823d; 
	background: -webkit-gradient(linear, 0 0, 0 50%, from(#009e50), to(#00823d));
	background: -moz-linear-gradient(top, #009e50, #00823d 50%);
	}
.fotobox a h2 {
    font-size: 1.0em;
	font-weight:normal;
	background-image:url(../../grafik/winkelgruen.gif); background-repeat:no-repeat; background-position: right;
	/* padding:'padding-top' 'padding-right' 'padding-bottom' 'padding-left' */
	padding:8px;
	margin:0 10px 0 0; 
	color:#FFFFFF;
	}
.fotobox a:hover h2 {
	color:#ffffff;
	text-decoration:underline;
	background-image:url(../../grafik/winkelweiss.gif); background-repeat:no-repeat; background-position: right;
	}		

.fotobox img {
	max-width:100%; 
	height:auto;
	}
/* ------------------- Kacheln für Berufsbildung ---------------- */
/* padding:'padding-top' 'padding-right' 'padding-bottom' 'padding-left' */

.kachel {
	margin: 0 1.0em 1.0em 0;
	background-color:#009635;
    border-radius: 8px;
    min-height: 11.0em; 
	}
.kachel a h2 {
    font-size: 1.2em;
	font-weight:normal;
	/* padding:'padding-top' 'padding-right' 'padding-bottom' 'padding-left' */
	padding:8px;
	margin:0 10px 0 0; 
	color:#FFFFFF;
	}
.kachel a li {
	margin:0 10px 0 8px;
	color:#FFFFFF;
	}

.kachel a p {
	margin:0 10px 0 8px;
	color:#FFFFFF;
	}



.kachel a:hover h2,
.kachel a:hover li,
.kachel a:hover p {
	color:#ffffff;
	text-decoration:underline;
	}		
.kachel ol {
	padding-bottom:8px;
	}

.blau {
	background-color:#daecf6 !important;	
	}

.gruenhell {
	background-color:#95d3ac !important;	
	}
.gruenmittel {
	background-color:#4bb471 !important;	
	}

/* --------- Fuer Rahmen im Text ----------- */
.kasten {
	margin:0;
	padding:5px;
	background-color: #F0F5E6;
	border:1px solid #99CC99;	
	}

/* -------- Fuer Hinweise ------------- */
.hinweis {
	margin: 0 0 1.0em 0;
	padding:5px;
	background-color: #eeeeee;
	border-top:2px solid #006633;	
	border-bottom:2px solid #006633;	
	}


/* Div-Container um die echte Sitemap, um Überschriften zu formatieren */
.sitemap h2 a { color:#000000; }

/*  --------- alte Textbox fuer Ueberschruft, Vorschaubild und Kurztext ------------- */
.textbox {
 	display:table;
	width:auto;
	table-layout:fixed; 
	padding:0;
	margin:0;
	} 

.textbox h3 {
	margin: 0 0 8px 0;
	padding:2px;
	border:1px solid #c0c0c0;
	background-color:#eeeeee;
	} 
.textbox  h2 {
	margin: 0 0 2px 0;
	padding:0px;
	font-size: 100%;
	font-weight:600;
    }

/* ----- Vorschautext neu, Verwendung im <a>-Tag ---*/
a.vorschautext {
	display: block;
	overflow: hidden;
	width: 100%;
	padding:0;
	margin:0;
	}
	
a.vorschautext:hover {
	text-decoration: none;
	background-color:#f0f0f0;
	} 

/* Überschriften positionieren */

 a.vorschautext h2 {
	 font-family: "Calibri Light", Calibri, Arial, Verdana, "Helvetica Neue", Helvetica, sans-serif;
	}  

/* Google Chrome mag Calibri Light nicht, über einen Hack wird das geändert. */

@supports (-webkit-appearance:none) and (x:0)  {
	a.vorschautext h2 {font-family: Calibri, Arial, Verdana, "Helvetica Neue", Helvetica, sans-serif;
	}
  }


a.vorschautext h2, a.vorschautext h3 {
	margin:0; 
	padding:0;
	color:#006633;
	background-image: url(../../grafik/pfeil.gif);
	background-repeat: no-repeat;
	background-position:165px 7px;
	padding-left:175px;
	}

a.vorschautext h3 {
	background-position:165px 5px;
	}
	
a.vorschautext:hover h2, a.vorschautext:hover h3  {
	text-decoration:underline;
	}

a.vorschautext p {
	padding:0;
	margin:0;
	color: #000000;
	text-decoration:none;
	}

/* Falls keine Vorschaubilder vorhanden sind */
.vorschautext .ohnefoto {
	padding-left:10px; background-position:0 7px;
	}

/* -------------------- Vorschaubilder alt ----------------------- */
/* Vorschaubild für Startseiten, 75 x 75 Pixel groß, floatet nach links, Rahmen im Bild */
.vorschaubild {
	float:left;
	margin-right: 10px;
	}

/* -------------------- Vorschaubilder neu ----------------------- */	
/* Vorschau in 150 x 100 Pixel, floatet nach links, Rahmen bei Bedarf durch CSS */
.vorschau {
	float:left;
	margin-right: 15px;
	padding:0.3em 0 0.3em 0; 
/*	border:1px solid #000000;  */
	}	
	
			
/* -------------------- Fotos ----------------------------------- */
/* Foto rechtsbuendig mit Bildunterschrift, 200 x 150 Pixel */
/* Randabstand im Uhrzeigersinn:  top, right, bottom, left. */
/* Breitenangabe noetig, damit Bildunterschrift umbricht */
.foto {
	float: right;
	margin: 0 0 10px 10px;
	font-size:85%;
	line-height:140%;
	width:200px;
	}

/* Foto rechtsbuendig mit Bildunterschrift, 150 x 200 Pixel */
.fotohoch {
	float: right;
	margin: 0 0 10px 10px;
	font-size:85%;
	line-height:140%;
	width:150px;
	}

/* Kleine Lupe wird bei Fotos übergeblendet, wenn eine Vergrößerung verfügbar ist */
a img.lupe {
	position: relative;
	margin-left:-25px;
	margin-bottom:5px;
	width:20px;
	height:20px;
	}

/* HTML5-Element figure für zoomfähige Bilder im Hoch- oder Querformat */
figure {
	float:right;
	margin: 0 0 10px 10px;
	}

figure.quer {
	width:40%;
	}

figure.hoch {
	width:30%;
	}
/* Panorama-Fotos */
figure.breit {
	float:none;
	margin:0 0 10px 0;
	width:100%;
	}

/* Fotos in Tabellen oder Grids */
figure.galerie {
	float:none;
	margin: 0 1.0em 1.0em 0;
	}
/*Fotostreifen bei den Stellenangeboten */
figure.job {
	float:none;
	margin:0 10px 10px 0;
	 }
/* padding:'padding-top' 'padding-right' 'padding-bottom' 'padding-left' */

figure.app {
    float:none;
	width:50%;
	max-width: 800px;
	margin:10px 0 10px 0;
}

figure img {
	max-width: 100%;
	height: auto;
	}

/* Bildergalerien mit Colorbox */
/* Basics */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; background:#fff; overflow:visible;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;background:#fff;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* Änderungen ab hier */
#cboxOverlay{background:#000; opacity: 0.8; filter: alpha(opacity = 80);}
#colorbox{outline:0;}
#cboxTopLeft{width:14px; height:14px; background:url(../../grafik/cboxcontrols.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(../../grafik/cboxborder.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(../../grafik/cboxcontrols.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(../../grafik/cboxcontrols.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(../../grafik/cboxborder.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(../../grafik/cboxcontrols.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(../../grafik/cboxcontrols.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(../../grafik/cboxcontrols.png) repeat-y -211px 0;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(../../grafik/cboxloadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(../../grafik/cboxloading.gif) no-repeat center center;}
/*   #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;} */
#cboxTitle{position:absolute; bottom:-20px; left:0; font-weight:bold; text-align:justify; width:98.7%; margin-bottom:24px; padding:5px; background-color:#333; opacity:0.75; filter:alpha(opacity=75); color:#fff; }
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible;  position:absolute; bottom:-29px; background:url(../../grafik/cboxcontrols.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious:hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext:hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose:hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow:hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow:hover{background-position:-125px 0px;}
/* CSS für Colorbox Ende */

/* Allgemeine Klasse für Zoomfähige Elemente */
 .flexible {
   /* margin-bottom: 1.5em; */
    max-width: 100%;
    height: auto;
  }

/* Videos responsive einbinden */
.elastic-video {
    background-color:#000000;    
    position: relative;
    padding-bottom: 55%;
    padding-top: 15px;
    height:0;
    overflow: hidden;
	}

.elastic-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	}

/* Podcast von Anchor responsive einbinden */
.elastic-podcast {
    position: relative;
    padding-bottom: 13%;
    padding-top: 15px;
    height: 0px;
    overflow: hidden;
   	}

.elastic-podcast iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	}



/* -------------------- Formulare ------------------------- */
/* YAML-Formular-Elemente stylen  */

/* Gestaltung der kapselnden DIV-Elemente */
	.ym-form div.ym-fbox-text,
	.ym-form div.ym-fbox-select,
	.ym-form div.ym-fbox-check,
	.ym-form div.ym-fbox-button {
		padding: 0.15em 1.0em;
		margin-bottom: 0.25em; 
	}

/* Gestaltung der einzelnen Formularelemente mit annähend gleicher Breite */
	.ym-form .ym-fbox-text input,
	.ym-form .ym-fbox-text textarea {
		line-height: 1em;
		padding: 0.15em 0.3em; 
		margin-top: -2px;
	}

	.ym-form .ym-fbox-select select {
		line-height: 1em;
		padding: 0.1em 2px 0.1em 1px;
		margin-top: -2px;
	}

    /* Schriftarten */
	.ym-form input,
	.ym-form textarea,
	.ym-form select,
	.ym-form optgroup {
		font-family: Calibri, Arial, Verdana, "Helvetica Neue", Helvetica, sans-serif;
	}

	.ym-form optgroup {
		font-style:normal;
		font-weight:bold;
	}

   .ym-form input[type=submit] { padding:0.2em; cursor:pointer; }
   
   .ym-form input[type=submit]::-moz-focus-inner {
		border: 0; 
		padding: 0;
	}
/* -------------------- Formulare Ende ------------------------- */

/* -------------------- Accordion nur mit CSS ---------------------*/

.tab-content {
   overflow: hidden;
   display: none;
}
.tab input:checked ~ .tab-content {
   display: block;
}

/* [THE ENTIRE TAB] */
.tab {
   position: relative;
   margin: 0 0 0.2em 0;
/*   margin: 2px; /*
/*   max-width: 600px; */
}

/* [THE LABEL] */
.tab input {
   display: none;
}
.tab label {
   display: block;
   background: #00823d;
   color: #fff;
   padding: 10px;
   cursor: pointer;
}

.tab label h2 {
   color: #fff;
   margin:0;
 }


.tab label.grau {
   background-color:  #F0F0F0;
   color: #000000;
   background: -webkit-gradient(linear, 0 0, 0 50%, from(#FFFFFF), to(#F0F0F0));
   background: -moz-linear-gradient(top, #FFFFFF, #F0F0F0 50%);
   background: -o-linear-gradient(top, #FFFFFF, #F0F0F0 50%);
   background: linear-gradient(to bottom, #FFFFFF, #F0F0F0 50%); 
   border: 1px solid #e3e3e3;
   border-left: 5px solid #00823d;	
}

.tab label.grau p {
margin-right:1.0em;
margin-bottom:0em;
}


.tab label::after {
  /* content: "\25b6"; */
 /*  content: "\ff0b"; */
  content:"\271A";
   position: absolute;
   right: 10px;
   top: 10px;
   display: block;
   transition: all 0.4s;
}

.tab label.grau::after {
  color:#00823d;
  }


.tab input[type=checkbox]:checked + label::after,
.tab input[type=radio]:checked + label::after {
   transform: rotate(45deg);
}

/* [THE CONTENTS] */
.tab-content {
   overflow: hidden;
   background: #f0f0f0;
   padding-left:10px;
   padding-top:5px;
   /* CSS animation funktioniert nicht mit auto height */
   /* darum hier max-height */
   transition: max-height 0.4s;
   max-height: 0;
}

.tab-content.grau {
   background: #fff;
   border-left: 5px solid #f0f0f0;
}


.tab input:checked ~ .tab-content {
 /* 100% viewport height, oder großer Wert für max-height. Erhöhen auf z.B. 200vh, wenn was nicht angezeigt wird. */
   max-height: 1000vh;
}


/* -------------------- Akkordion-Effekt mit JavaScript--------------------------- */
/* wird bei der Ansprechpartnerliste der LUFA verwendet! */
ul.accordion  {	
	margin-bottom: 10px;
	overflow: hidden;
	list-style-type: none;
	padding: 0;
	margin-left: 0;
	}
	
.accordion .titel {
	overflow: hidden;
	cursor: pointer;
	padding:3px 3px 3px 9px;
	background-color: #F0F0F0;
	background: -webkit-gradient(linear, 0 0, 0 50%, from(#FFFFFF), to(#F0F0F0));
	background: -moz-linear-gradient(top, #FFFFFF, #F0F0F0 50%);
	background: -o-linear-gradient(top, #FFFFFF, #F0F0F0 50%);
	background: linear-gradient(to bottom, #FFFFFF, #F0F0F0 50%); 
	border: 1px solid #e3e3e3;
	border-left: 5px solid #00823d;	
  }

.accordion li.tab{
	margin:0 0 10px 0;
	padding: 0;
}

.accordion .inhalt {
	height:0;
	overflow: hidden;
}

.accordion .active .inhalt {
	height:auto;
}
/* padding:'padding-top' 'padding-right' 'padding-bottom' 'padding-left' */
.accordion .titel .icon{
	background-image:  url(../../grafik/plus.gif);
    background-repeat:no-repeat; 
	float: right;
	width: 20px;
	height: 20px;
	margin: 2px 2px 2px 0; 
} 

.accordion .active .icon{
	background-image:  url(../../grafik/minus.gif);
} 


.accordion .height{
	overflow: hidden;
}

/* -------------------- Tabellen ----------------------------------- */	
/* Kompatibilität zu altem CSS: Tabellen füllen nur den vorhandenen Platz aus */
.tabelle { width:auto; }

/* -------------------- Karten -------------------------------------- */
/* Bugfix: Listen statt Imagemap; Listen werden für normale Displays ausgeblendet */
.karteliste { display:none; }

/* -------------------- Sichtbar auf großen Bildschirmen --------------- */

/* Für Tablets können Elemente ausgeblendet werden, hier sichtbar */
.nurmonitor { display; }

/* Für Smartphones können Elemente ausgeblendet werden, hier sichtbar */
.nurscreen { display; }

/* Besondere Klassen für die Kammer-App, um nicht benötigte Elemente auszublenden */
/* Style für die App View */

.appview-show
{
    display: none;
}

.appview-show.show
{
    display: block;
}

.appview-hide
{
    display: none;
}

.appview-hide.show
{
    display: block;
}


/* Für die App-Ansicht Header ausblenden */
body.appview header { display:none; }

/* Für die App-Ansicht Hauptnavigation ausblenden */
body.appview nav { display:none; }


/* Für die App-Ansicht den Abstand des Hintergrundes zum oberen Rand ausschalten */
body.appview main {	margin-top:0; }

/* Mehr Abstand für die erste Überschrift */
body.appview h1 { margin-top:10px; }

/* Micronavigation kann weg */
body.appview #micronavigation {	display:none; }

/* Vorschautexte beim Link können weg */
body.appview .vorschautext p {	display:none; }

/* Footer am unteren Rand fixieren */
body.appview footer
 {
    position: fixed !important;
    min-width: unset;
    max-width: unset;
    margin: 0 auto;
    padding: 0;
    bottom:0;
 }


/* Schrift im Footer zentrieren  */
body.appview footer .fbox {	text-align:center; }

/* Schrift im Footer etwas größer und fett */
body.appview footer p {	font-size:115%; }

body.appview footer img { margin:0 10px; }


/* -------------------- Sitemap im Footer auf der Startseite ------- */
/* Sitemap oberhalb des Footers auf der Startseite bekommt Hintergrundfarbe, Klassennamen ohne Leerzeichen anhängen */	

#footermap {
	background-color: #6F6F6F;
	padding:0 0 2.0em 0; 
	text-align:left;
	margin:0;
	}

#footermap h1 {
	background-color:#666666;
	background: -webkit-gradient(linear, 0 0, 0 80%, from(#666), to(#555));
	background: -moz-linear-gradient(top, #666, #555 80%);
	background: -o-linear-gradient(top, #666, #555 80%);
	background: linear-gradient(to bottom, #666, #555 80%); 
	color:#eeeeee;
	font-size:116.67%;
	padding:0.2em 0 0.2em 0.5em;
	}

#footermap ul, #footermap li {
	list-style-type: none;
    margin: 0;
    padding: 0;
	}

#footermap h2 {
    font-weight:700;
	font-size:100%;
	padding:0;
    margin:0;
	color:#eeeeee;
	 }
#footermap h2.rubrik { margin-top:1.0em; }	 

/* Abstände nach unten zwischen den Sitemap-Blöcken, kann für Smartphones auf 0 gesetzt werden */
#footermap .spalte1 { margin-bottom:0.5em; }
#footermap .spalte2 { margin-bottom:2.05em; }
#footermap .spalte4 { margin-bottom:6.55em; }
#footermap .spalte5 { margin-bottom:6.55em; }


/* ------------------------------------------------------------------------------------------------- */
/* Ende Eigenes CSS                                                                                  */
/* ------------------------------------------------------------------------------------------------- */

}

/* ------------------- Linearisation ------------------------------- */
/* reset fallback values in modern browsers */
@media screen and ( min-width: 0px ) {
	.ym-wrapper, footer {
		min-width: 0px;
		}
}

@media screen and ( max-width: 979px ) {

/* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-1 */
.linearize-level-1,
.linearize-level-1 > [class*="ym-g"],
.linearize-level-1 > [class*="ym-col"] {
	display: block;
	float: none;
	padding:0; 
	margin: 0;
	width:100% !important;
	}

.linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"],
.linearize-level-1 > [class*="ym-col"] > [class*="ym-cbox"] {
/* Scrollbalken bei übergroßen Elementen */
	overflow: auto; 
	padding: 0;
	margin: 0;
	}
/* Hintergrundbild ausblenden */
body {
	background-image:none;
	}
.ym-wrapper {
  	 padding:0; 
	}
	
.logo {
	float:none;
	}

/* Suchfeld schmaler machen */
#suche {
		width:90%;
		}

/* Bei Fotoboxen in Infoboxen wird das Foto hier schon verkleinert, nachher für alle Fotoboxen ausgeblendet */
.infobox .fotobox {
	height:100px;
	width:100%;
}
.infobox .fotobox img {
	height:100px;
	float:right;
	margin-left: 10px;
	}

/* Beliebige Elemente können ab Tabletgröße ausgeblendet werden */
.nurmonitor { 
	display:none; 
	}


footer {
   width:auto;
   min-width:0px;
   padding:0;
}
  
   footer .fbox {
  	 margin:0;
	 padding:0;
   } 

}

@media screen and ( max-width: 759px ) {

/* Linearisation for Grid-Module, based on CSS class .linearize-level-2 */
.linearize-level-2,
.linearize-level-2 > [class*="ym-g"] {
	display: block;
	float: none;
	padding: 0;
	margin: 0;
	width: 100% !important;
	}

.linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"] {
/* Scrollbalken bei übergroßen Elementen */
	overflow: auto; 
	padding: 0;
	margin: 0;
	}

.logo { margin: 0 0 0.5em 0.5em; }

#topnavigation p {	margin-bottom:0.5em; }

/* Suchfeld schmaler machen */
#suche { 
	width:60%;
	margin-left:0.5em;	
	margin-right:0.5em;
	}
/* Suchbutton etwas nach links */
form.searchbox button {
  padding:11px 2px 11px 0;
  }


/* Datenschutzlink zur Google-Suche unter dem Suchfeld */
.search-privacy-link {
        top: 130px;
    }

 
/* #phonenavigation bekommt Schatten zur Abgrenzung nach unten, erstreckt sich über die ganze Breite */
#phonenavigation {
    cursor: pointer;
	display:block;
	background-image: -moz-linear-gradient(top, #FFFFFF, #F0F0F0 50%);
	background-image: -webkit-gradient(linear, 0 0, 0 50%, from(#FFFFFF), to(#F0F0F0));
	background-image: -webkit-linear-gradient(top, #FFFFFF, #F0F0F0);
	background-image: -o-linear-gradient(top, #FFFFFF, #F0F0F0);
	background-image: linear-gradient(to bottom, #FFFFFF, #F0F0F0);
	background-repeat: repeat-x;
	border-bottom:1px solid #dddddd;
	}

nav { display:none; }	
nav.active { display:block; }
nav.active img {display:none; } 

/* Klasse für Karten, werden auf kleinen Smartphones ausgeblendet */
.karte {
	display:none;
	}

/* Dafür werden Listen eingeblendet */
.karteliste {
	display:block;
	}

/* Beliebige Elemente können für Smartphones ausgeblendet werden */
.nurscreen, .nurmonitor { 
	display:none; 
	}
	
/* Text wird von Fotos in der Fotobox überlagert */
.infobox .fotobox, .fotobox {
	margin: 0 0 10px 0;
	padding:5px 0 5px 0;
	height:auto;
	width:100%;
	}
.infobox .fotobox img, .fotobox img {
	display:none;
	}	

/* Mindestgröße der Kacheln wird aufgehoben, leere werden ausgeblendet */
.kachel {
    min-height: 1.0em; 
	}
.blau {
	display:none;
    }


/* Tabellen bei Ausbildungsbetrieben und Mitarbeitern linearisieren */
 table.betriebe th, table.betriebe td,  table.mitarbeiter th, table.mitarbeiter td {
	display: block;
	} 

/* Die Spaltenüberschriften ausblenden */	
table.betriebe thead, table.mitarbeiter thead {
	display:none;
	visibility:hidden;
	} 

/* Tabellenbeschriftung */
table.betriebe td[data-title]:before, table.mitarbeiter td[data-title]:before {
	content: attr(data-title);
	font-weight:bold;
	}
	
#footermap h2 { margin: 0 0 1.0em 1.0em; }

#footermap ul {
	list-style-type: none;
    margin: 0 0 0 1.0em;
	}
#footermap .spalte1 { margin-bottom:0; }
#footermap .spalte2 { margin-bottom:0; }
#footermap .spalte4 { margin-bottom:0; }
#footermap .spalte5 { margin-bottom:0; }

/* Überschrift und Pfeil unter das Vorschaubild drücken */
/* padding:'padding-top' 'padding-right' 'padding-bottom' 'padding-left' */

a.vorschautext h2 {
	padding:10px 0 0 10px;
	background-position:0 17px;
	}

 .vorschau {
	float:none;
	display:block; 
	}
	

.foto, .fotohoch { float:none; }	

.copyright { display:none; }

}