@font-face {
  font-family: 'Roboto Condensed';
  font-weight: 400;
  font-style: normal;
  src: url('/css/fonts/Roboto_Condensed_400.woff2') format('woff2'), url('/css/fonts/Roboto_Condensed_400.eot'), url('/css/fonts/Roboto_Condensed_400.eot?#iefix') format('embedded-opentype'), url('/css/fonts/Roboto_Condensed_400.woff') format('woff'), url('/css/fonts/Roboto_Condensed_400.ttf') format('truetype'), url('/css/fonts/Roboto_Condensed_400.svg#RobotoCondensed') format('svg');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-weight: 700;
  font-style: normal;
  src: url('/css/fonts/Roboto_Condensed_700.woff2') format('woff2'), url('/css/fonts/Roboto_Condensed_700.eot'), url('/css/fonts/Roboto_Condensed_700.eot?#iefix') format('embedded-opentype'), url('/css/fonts/Roboto_Condensed_700.woff') format('woff'), url('/css/fonts/Roboto_Condensed_700.ttf') format('truetype'), url('/css/fonts/Roboto_Condensed_700.svg#RobotoCondensed') format('svg');
}
/* needed for symbols in main navigation */
@font-face {
  Font-family: "ZFA-Symbole";
  font-weight: 400;
  font-style: normal;
  src: url('/css/fonts/ZFA-Symbole-Regular.woff2') format('woff2'), url('/css/fonts/ZFA-Symbole-Regular.eot'), url('/css/fonts/ZFA-Symbole-Regular.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ZFA-Symbole-Regular.woff') format('woff'), url('/css/fonts/ZFA-Symbole-Regular.ttf') format('truetype'), url('/css/fonts/ZFA-Symbole-Regular.svg#ZFA-Symbole-Regular') format('svg');
}
/* page sizes */
/* header & tile bar  */
/* main content: content-left */
/* main content: content-right */
/* footer */
/* news style */
/* wenn in einer Spalte zuerst ein Bild steht statt einer h1 */
/* ////////////////////////////////////////////  end variables  //////////////////////////////////////////// */
body {
  background-color: #fff;
}
html,
body {
  height: 100%;
}
.clear {
  clear: both;
}
.container,
.row {
  padding: 0;
}
a:hover {
  text-decoration: none;
}
code {
  display: block;
  margin: 0.5em 0 0.5em 0;
}
.mobile {
  display: none;
}
/* set inner page size */
#page-wrapper {
  width: 1340px;
  margin: 0 auto;
  padding: 0 0 2% 0;
  border-right: 35px solid #dc7723;
  border-left: 35px solid #dc7723;
  z-index: 900;
  min-height: 100%;
  background-color: transparent;
}
/* set head with logo and main navigation */
#header-wrapper {
  width: 1340px;
  border-right: 35px solid #dc7723;
  border-left: 35px solid #dc7723;
  margin-left: -35px;
  padding: 0;
  background-color: #fff;
  z-index: 1000;
  overflow: hidden;
}
#header-wrapper.sticky {
  transition: all 0.9 ease-out;
  position: fixed;
  top: 0;
  z-index: 999;
  background-color: transparent;
}
#logo {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 130px;
  height: 200px;
}
#header-wrapper .row {
  margin-top: 0;
}
/* ////////////////////////////////////////////  main navigation styles  //////////////////////////////////////////// */
#navigation-wrapper {
  padding: 0;
  margin-left: 150px;
  z-index: 999;
  width: 1170px;
  border-right: 35px solid #0a3264;
  overflow: visible;
  background-color: #0a3264;
}
#main-navigation {
  padding: 0;
  margin: 0;
  z-index: 1000;
}
#main-navigation li {
  list-style-type: none;
  float: left;
  margin: 0;
  padding: 0;
  background-color: #0a3264;
  border-right: 2px #B3B3B3 solid;
}
#main-navigation li .submenue {
  display: none;
  background-color: #c8d2dc;
  position: absolute;
  z-index: 10000;
  color: #333;
  min-width: 100%;
  min-height: 50px;
  padding: 5px;
  border-top: 3px solid #fff;
}
#main-navigation li.phone-only.suche .submenue {
  left: auto;
  right: 0;
  min-width: 180px;
}
#main-navigation li.phone-only.suche .submenue a {
  padding-left: 0;
}
#main-navigation li .submenue a {
  text-decoration: underline;
  color: #0a3264;
  padding: 0;
  width: auto;
  height: auto;
  display: block;
  font-weight: bold;
  font-size: inherit;
}
#main-navigation li.suche .submenue a:before {
  content: "";
}
#main-navigation li:hover {
  background-color: #c8d2dc;
}
#main-navigation li.phone-only {
  display: none;
}
#main-navigation li a {
  color: #fff;
  padding: 12px 10px 10px 10px;
  display: block;
  width: 165px;
  height: 49px;
  text-decoration: none;
}
#main-navigation li a.active,
#main-navigation li a:hover {
  background-color: #c8d2dc;
  color: #0a3264;
}
#main-navigation:hover li a.active {
  background-color: #0a3264;
  color: #fff;
}
/* /////////////////////////////////////////////  sub-navigation styles  //////////////////////////////////////////// */
#navigation-submenue-wrapper {
  padding-bottom: 8px;
  margin-left: 150px;
  position: relative;
  z-index: 500;
  padding-left: 0;
  width: 1155px;
  height: 90px;
}
ul.sub-navigation {
  padding: 0;
  margin: 15px 0 0 0;
}
ul.sub-navigation li {
  list-style-type: none;
  float: left;
  margin: 0;
  padding: 0;
}
ul.sub-navigation li ul {
  padding: 0;
  margin: 0;
}
ul.sub-navigation li ul li {
  clear: both;
}
ul.sub-navigation li a {
  padding: 0px 28px 0px 0px;
  display: block;
  color: #0a3264;
  while-space: nowrap;
}
ul.sub-navigation li a.active,
ul.sub-navigation li a:hover {
  color: #dc7723;
  font-weight: 700;
}
/* subnav pruefungen */
/* subnav erster Punkt */
/* subnav berufe */
/* subnav weiterbildung */
/* subnav zfa */
/* //////////////////////////////////////////////  logo and animation  ////////////////////////////////////////////// */
#logo-wrapper {
  padding: 0;
  width: 168px;
}
#logo-wrapper a {
  position: relative;
  float: right;
  top: 50px;
}
#animation-bar {
  height: 32px;
  margin-left: 135px;
  overflow: hidden;
  padding: 0;
  background-color: #fff;
  position: relative;
  z-index: 501;
}
.tile {
  width: 6px;
  height: 6px;
  margin: 1px;
  float: left;
}
#header-spacer {
  height: 10px;
  border-bottom: 1px solid #dc7723;
  margin-left: 135px;
  margin-right: 5px;
  background-color: #fff;
  position: relative;
  z-index: 1000;
}
/* /////////////////////////////////////////////////  content cols  ///////////////////////////////////////////////// */
#content-wrapper {
  margin-top: 10px;
  margin-left: 150px;
  padding: 40px 0 0 0;
  width: auto;
  position: relative;
  z-index: 500;
}
#content-left {
  margin-left: 155px;
  margin-right: 30px;
  width: 640px;
  padding-bottom: 5%;
}
#content-left .content-link {
  display: block;
}
#content-left img,
#content-left object {
  max-width: 100%;
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#content-left .img-float-left {
  float: left;
  width: 30%;
  margin-right: 3%;
  margin-top: 4px;
}
#content-left .img-float-right {
  display: block;
  float: right;
  width: 30%;
  margin-left: 2%;
  margin-top: 4px;
  overflow: hidden;
  height: auto;
  background-size: 100%;
  background-repeat: no-repeat;
  min-height: inherit;
}
.img-float-left a,
.img-float-right a,
.img-bottom-left a,
.img-top-left a {
  width: 100%;
  height: 100%;
  display: block;
}
#content-left .img-float-right img,
#content-left .img-bottom-left img,
#content-left .img-top-left img {
  visibility: hidden;
}
#content-left .img-bottom-left {
  max-width: 100%;
  margin-top: 2%;
}
/* news grid cols */
.news-container {
  width: 100%;
}
.news-row-wrapper {
  padding-bottom: 3em;
  display: table;
  margin-left: 1px;
}
.row-canvas-block {
  padding-bottom: 0;
}
.news-container,
.news-title-wrapper,
.news-img-wrapper {
  padding-left: 0;
  margin-left: 0;
}
/* content cols */
.news-text-wrapper {
  width: auto !important;
  display: table-cell;
  float: none;
  padding-left: 0;
  vertical-align: top;
}
.canvasblock-text {
  margin-bottom: 3em;
}
.news-img-wrapper {
  width: 30% !important;
  background-repeat: no-repeat;
  display: table-cell;
  float: none;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.img-bottom-left,
.img-top-left {
  max-width: 610px;
  margin-bottom: 6px;
  background-size: 100%;
  background-repeat: no-repeat;
}
/* pagination */
.list-navigation {
  padding-bottom: 20px;
}
.list-navigation a {
  padding: 3px 6px 3px 6px;
  margin-right: 1%;
  color: #fff;
  background-color: #dc7723;
  border: 2px solid #C8D2DC;
}
.list-navigation a.present-page,
.list-navigation a:hover {
  background-color: #B3B3B3;
}
.topimg {
  margin-top: 4px;
  margin-bottom: 2em;
}
/* /////////////////////////////////////////////////  content right  ///////////////////////////////////////////////// */
#content-right {
  margin-top: 2px;
  margin-left: 40px;
  margin-right: 0px;
  width: 278px;
}
.menue-content-right {
  padding: 0;
  margin: 0;
  width: 98.5%;
}
.img-link-right {
  padding: 0;
  margin: 0;
  width: 242px;
}
.menue-content-right li {
  list-style-type: none;
  margin-bottom: 1.2em;
  padding-left: 0;
}
/* begin dieter mist */
.img-link-right li {
  list-style-type: none;
  margin-bottom: 12px;
  border: 2px solid #c8d2dc;
}
/* end dieter mist */
.menue-content-right li a {
  color: #fff;
  font-size: 1.05em;
  line-height: 1.05em;
  padding: 5px 10px 5px 0px;
  display: block;
  background-color: #dc7723;
  background-repeat: no-repeat;
  background-position: left center;
  border: 2px solid #c8d2dc;
}
.menue-content-right li a:hover {
  background-color: #B3B3B3;
}
/* begin css-submenue rightnav */
.submenue {
  position: relative;
}
.submenue-content {
  display: none;
  padding: 0;
  width: 115%;
  background-color: #7F7F7F;
}
.submenue-content li {
  margin-bottom: 0;
  border: 0;
}
.submenue-content li a {
  line-height: 1.6em;
  display: block;
  padding: 5px 10px 5px 10px;
  background-color: #7F7F7F;
  white-space: nowrap;
  border: 0;
}
.menue-content-right li ul li a:before {
  content: "";
}
.submenue:hover .submenue-content {
  display: block;
}
/* end css-submenue for rightnav */
/* begin dieter mist */
.img-link-right li a {
  color: #fff;
  font-size: 1.05em;
  line-height: 1.05em;
  padding: 5px 10px 5px 0px;
  display: block;
  background-color: #91A5B9;
  background-repeat: no-repeat;
  background-position: left center;
}
.img-link-right li a:before {
  color: #c8d2dc;
}
/* end dieter mist */
.menue-content-right li a:before {
  color: #c8d2dc;
}
/* begin dieter mist */
.buttonlink {
  margin-bottom: 1.2em;
  display: block;
  width: 244px;
  height: 244px;
  text-indent: -99999px;
  background-position: -2px -2px;
  border: 2px solid #c8d2dc;
  background-repeat: no-repeat !important;
}
.buttonlink:hover {
  background-position: -2px -246px;
}
.buttonlink-artikel-aus-abc {
  background: url('/images/contentright/link-dum-artikel.jpg') top;
  background-size: 244px 488px;
}
.buttonlink-innovativ {
  background: url('/images/contentright/link-innovativ.png') top;
}
.buttonlink-medientechnologen {
  background: url('/images/contentright/link-medientechnologen.png') top;
}
div.top-ki {
  border-top: 2px solid #c8d2dc;
  padding-top: 12px;
  margin-top: 22px;
}
.buttonlink-top-ki {
  border: none;
  height: 112px;
  background: url('/images/contentright/link-top-ki.png') top;
  background-position: 0px 0px !important;
}
.buttonlink-mediencommunity {
  background: url('/images/contentright/link-mediencommunity.png') top;
}
.buttonlink-medienmacher-filme {
  background: url('/images/contentright/link-medienmacher-filme.jpg') top;
}
.buttonlink-reprodukion-farbe {
  background: url('/images/contentright/link-reprodukion-farbe.png') top;
}
.buttonlink-prozessstandard-offset {
  background: url('/images/contentright/link-prozessstandard-offset.jpg') top;
}
.buttonlink-sal {
  background: url('/images/contentright/sal-button.jpg') top;
}
.buttonlink-lerncenter {
  height: 115px;
  background: url('/images/contentright/link-mc-lerncenter.png') top;
  background-position: -2px -2px;
}
.buttonlink-lerncenter:hover {
  background-position: -2px -117px;
}
.buttonlink-sal-half {
  height: 122px;
  background: url('/images/contentright/sal-button-half.jpg') top;
  background-position: -2px -2px;
}
.buttonlink-sal-half:hover {
  background-position: -2px -124px;
}
.buttonlink-mc-wiki {
  height: 115px;
  background: url('/images/contentright/link-mc-wiki.png') top;
}
.buttonlink-mc-lexika {
  height: 115px;
  background: url('/images/contentright/link-mc-lexika.png') top;
}
.buttonlink-halfsize:hover {
  background-position: 0 -115px;
}
/* begin: boxes for rightnav with title and text/img */
.box {
  width: 100%;
  border-width: 2px 2px 2px 2px;
  border-style: solid;
  border-color: #c8d2dc;
  margin-bottom: 19px;
  padding: 0;
}
.box .title {
  color: #fff;
  font-size: 1.05em;
  line-height: 1.05em;
  padding: 5px 10px 5px 0px;
  display: block;
  width: 100%;
  background-color: #B3B3B3;
}
.box .buttonlink {
  border: 0;
  margin-bottom: 0;
}
.box .text-block {
  padding: 15px 15px 15px 15px;
}
/* end: boxes for rightnav with title and text/img */
.menue-content-right li .buttonlink {
  border-top: 0;
}
/* /////////////////////////////////////////////////  footer styles  //////////////////////////////////////////////// */
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 72px;
  width: 100%;
  z-index: 1000;
}
footer .footer-shadow {
  width: 1235px;
  margin: 0 auto;
  height: 40px;
  background: rgba(255, 255, 255, 0);
  /*
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(252,252,252,0.53) 53%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(53%, rgba(252,252,252,0.53)), color-stop(100%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(252,252,252,0.53) 53%, rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(252,252,252,0.53) 53%, rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(252,252,252,0.53) 53%, rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(252,252,252,0.53) 53%, rgba(255,255,255,1) 100%);
 */
  overflow: hidden;
}
footer .footer-wrapper {
  width: 1340px;
  margin: 0 auto;
  background-color: #0a3264;
  padding-left: 150px;
  border-left: 35px solid #0a3264;
  border-right: 35px solid #dc7723;
  height: 32px;
  color: #fff;
  overflow: hidden;
  padding-top: 8px;
  position: relative;
  z-index: 2000;
}
footer .footer-wrapper a {
  color: #fff;
}
footer .footer-wrapper a:hover {
  text-decoration: underline;
}
#page-back {
  background-image: url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg'), url('/images/layout/raute-bg.svg');
  background-size: 60px 60px;
  background-position: 140px 0px, 60px 80px, 20px 120px, -20px 160px, 180px 40px, 140px 80px, 100px 120px, 60px 160px, 20px 200px, -20px 240px, 260px 40px, 220px 80px, 180px 120px, 100px 200px, 60px 240px, 380px 0px, 340px 40px, 300px 80px, 180px 200px, 100px 280px, 60px 320px, 20px 360px, -20px 400px, 420px 40px, 380px 80px, 340px 120px, 300px 160px, 260px 200px, 220px 240px, 180px 280px, 140px 320px, 60px 400px, 60px 400px, -20px 480px, 500px 40px, 420px 120px, 340px 200px, 180px 360px, 140px 400px, 60px 480px, 20px 520px, -20px 560px, 620px 0px, 500px 120px, 460px 160px, 420px 200px, 300px 320px, 260px 360px, 220px 400px, 180px 440px, 140px 480px, 100px 520px, 60px 560px, 20px 600px, 660px 40px, 620px 80px, 540px 160px, 380px 320px, 340px 360px, 300px 400px, 260px 440px, 220px 480px, 180px 520px, 140px 560px, 60px 640px, -20px 720px;
  background-repeat: no-repeat;
  width: 800px;
  height: 800px;
  position: fixed;
  top: 0;
  z-index: 100;
}
.fancybox-skin {
  padding: 0px!important;
}
#fancybox-loading,
.fancybox-close,
.fancybox-prev span,
.fancybox-next span {
  background-image: url('/images/fancybox/fancybox_sprite.png') !important;
}
#fancybox-loading div {
  background: url('/images/fancybox/fancybox_loading.gif') center center no-repeat !important;
}
.fancybox-nav {
  background: transparent url('/images/fancybox/blank.gif') !important;
  /* helps IE */
}
.fancybox-overlay {
  background: url('/images/fancybox/fancybox_overlay.png') !important;
}
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////  media queries  ////////////////////////////////////////////////// */
@media (max-width: 1250px) {
  #page-wrapper {
    max-width: 100%;
    width: 1138px;
    overflow-x: hidden;
    border-right: 10px solid #dc7723;
    border-left: 10px solid #dc7723;
    padding: 0;
  }
  #header-wrapper {
    width: 1138px;
    border-right: 10px solid #dc7723;
    border-left: 10px solid #dc7723;
    margin-left: -10px;
    padding: 0;
  }
  #navigation-wrapper {
    width: 993px;
    border-right: 10px solid #0a3264;
  }
  #main-navigation li a {
    width: 145px;
  }
  ul.sub-navigation li a {
    padding: 0px 20px 0px 0px;
  }
  #content-left {
    margin-left: 130px;
    margin-right: 10px;
    width: 520px;
    float: left;
  }
  #content-right {
    margin-left: 10px;
    margin-right: 10px;
    width: 270px;
    float: right;
  }
  .menue-content-right {
    width: 100%;
  }
  /* ausbildungsplatzsuche */
  #result-head-ausbildungsplatzsuche .form-wrapper {
    margin-right: 0px !important;
  }
  #illu-ausbildungsplatzsuche {
    display: none;
  }
  /* end ausbildungsplatzsuche */
  footer .footer-wrapper {
    width: 1138px;
    border-left: 10px solid #0a3264;
    border-right: 10px solid #dc7723;
  }
  footer .footer-shadow {
    max-width: 90%;
  }
}
/* //////////////////////////////////////////////////  801–1024  //////////////////////////////////////////////////// */
@media (min-width: 801px) and (max-width: 1024px) {
  #page-wrapper {
    width: 1010px;
    overflow-x: hidden;
    border-right: 10px solid #dc7723;
    border-left: 10px solid #dc7723;
    padding: 0;
  }
  #page-back {
    top: -300px;
  }
  #header-wrapper {
    width: 1010px;
    border-right: 10px solid #dc7723;
    border-left: 10px solid #dc7723;
    margin-left: -10px;
    padding: 0;
  }
  #navigation-wrapper {
    width: 865px;
    border-right: 10px solid #0a3264;
  }
  #main-navigation li a {
    width: auto;
  }
  #content-left {
    margin-left: 0px;
    margin-right: 10px;
    width: 480px;
    float: left;
  }
  #content-right {
    margin-left: 40px;
    margin-right: 10px;
    width: 260px;
    float: right;
  }
  /* ausbildungsplatzsuche */
  #result-head-ausbildungsplatzsuche h1 {
    float: none;
    margin-top: 0;
    width: 100%;
  }
  #result-head-ausbildungsplatzsuche .form-wrapper {
    float: none !important;
    text-align: left !important;
    margin-right: 0 !important;
    margin-bottom: 20px;
  }
  #illu-ausbildungsplatzsuche {
    display: none;
  }
  /* end ausbildungsplatzsuche */
  footer {
    width: 1010px;
  }
  footer .footer-wrapper {
    width: 1010px;
    border-left: 10px solid #0a3264;
    border-right: 10px solid #dc7723;
  }
  footer .footer-wrapper span.desktop {
    display: none;
  }
  footer .footer-shadow {
    width: 68%;
    max-width: 1010px;
  }
}
/* /////////////////////////////////////////////////////  tablet  /////////////////////////////////////////////////// */
@media (max-width: 800px) {
  #page-wrapper {
    max-width: 100%;
    overflow-x: hidden;
    border-right: 0px solid #dc7723;
    border-left: 0px solid #dc7723;
    padding: 0;
  }
  #page-back {
    top: -300px;
  }
  #header-wrapper {
    width: 785px;
    border-right: 0px solid #dc7723;
    border-left: 0px solid #dc7723;
    margin-left: 0px;
    padding: 0;
  }
  #navigation-wrapper {
    width: 650px;
    border-right: 0px solid #0a3264;
    margin-left: 150px;
  }
  #main-navigation li a {
    width: auto;
    font-size: 1.1em !important;
  }
  #main-navigation li.suche a {
    overflow: hidden;
    width: 37px;
  }
  #main-navigation li:nth-of-type(6) a:before {
    width: 37px;
    padding-right: 15px;
  }
  #main-navigation li.suche {
    border-right: 0;
  }
  #navigation-submenue-wrapper {
    margin-left: 150px;
    width: 635px;
    height: 50px;
  }
  ul.sub-navigation li a {
    padding: 0px 5px 0px 5px;
    font-size: 0.7em;
  }
  #animation-bar {
    margin-left: 135px;
  }
  #content-wrapper {
    margin-left: 0px;
  }
  #content-left {
    float: none;
    margin-left: 150px;
    margin-right: 10px;
    width: auto;
  }
  #content-right {
    float: none;
    margin-top: 150px;
    margin-left: 150px;
    margin-right: 10px;
    width: 240px;
  }
  .footer {
    width: 785px;
  }
  footer .footer-wrapper {
    width: 785px;
    border-left: 0px solid #0a3264;
    border-right: 0px solid #dc7723;
    padding-left: 150px;
  }
  footer .footer-wrapper span.desktop {
    display: none;
  }
  footer .footer-shadow {
    width: 785px;
    max-width: 785px;
  }
}
/* /////////////////////////////////////////////////  small tablett  //////////////////////////////////////////////// */
@media (min-width: 330px) and (max-width: 660px) {
  #page-wrapper {
    max-width: 100%;
    overflow-x: hidden;
    border-right: 0;
    border-left: 0;
    padding: 0;
  }
  #page-back {
    background-image: none;
  }
  #logo {
    display: none;
  }
  #page-back {
    top: 0;
    margin-top: 0;
  }
  #header-wrapper {
    max-width: 100%;
    margin-top: 0;
    position: fixed;
    background-color: #fff;
  }
  #header-wrapper .row {
    max-width: 100%;
    margin: 0;
  }
  #main-navigation-wrapper {
    background-color: #0a3264;
    width: 100%;
  }
  #navigation-wrapper {
    width: 100%;
    margin-left: 0;
    border-right: 0;
    background-color: #fff !important;
  }
  #main-navigation {
    padding-left: 0;
    width: 100%;
    float: left;
  }
  #main-navigation li.aktuelles a:before,
  #main-navigation li.pruefungen a:before,
  #main-navigation li.berufe a:before,
  #main-navigation li.weiterbildung a:before,
  #main-navigation li.zfa a:before,
  #main-navigation li.suche a:before {
    content: none !important;
  }
  #main-navigation li.phone-only {
    display: block;
  }
  #main-navigation li.desktop-tablet {
    display: none;
  }
  #main-navigation li.phone-only {
    width: calc(36% - 2px);
    margin-right: 2px;
    margin-bottom: 2px;
    border: 0 !important;
  }
  #main-navigation li.phone-only.mobile-small {
    width: calc(28% - 2px);
  }
  #main-navigation li.phone-only:nth-child(8) a,
  #main-navigation li.phone-only:nth-child(9) a,
  #main-navigation li.phone-only:nth-child(11) a,
  #main-navigation li.phone-only:nth-child(12) a {
    padding-left: 10px;
  }
  #main-navigation li.suche a {
    width: 100% !important;
  }
  #main-navigation li.suche a:before {
    width: auto;
    padding-right: 0;
  }
  #main-navigation li a {
    width: 100% !important;
    height: auto;
    padding: 8px 5px 8px 15px;
    border: 4px #fff !important;
    font-size: 1.2em !important;
  }
  #mobile-logo {
    width: 100%;
    text-align: left;
    display: block;
    padding-left: 15px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  #navigation-submenue-wrapper {
    margin-left: 15px;
    width: 90%;
    height: 50px;
  }
  ul.sub-navigation {
    margin-left: 15px;
    width: 85%;
    float: left;
  }
  ul.sub-navigation li {
    float: none;
    margin-left: 0;
  }
  ul.sub-navigation li a {
    padding: 4px 2px 4px 0;
    font-size: 0.4em;
  }
  #animation-bar {
    margin-left: 0;
    height: 16px;
  }
  #header-spacer {
    margin-left: 0;
    border: 0;
  }
  #content-wrapper {
    padding-top: 180px;
  }
  #content-left {
    margin-left: 15px;
    margin-right: 20px;
    max-width: 490px;
    width: 90%;
  }
  .inverted-box p {
    background-color: inherit !important;
    color: inherit !important;
  }
  #content-right {
    margin-left: 20px;
    margin-right: 10px;
    width: 240px;
    padding-bottom: 0;
    min-height: 350px;
    margin-top: 0;
  }
  #content-right div,
  #content-right p,
  #content-right img,
  #content-right span {
    display: none;
  }
  #mapContainer,
  #map_canvas {
    display: none;
  }
  #result-head-ausbildungsplatzsuche h1 {
    float: none;
    margin-top: 0;
    width: 100%;
  }
  #result-head-ausbildungsplatzsuche .form-wrapper {
    float: none !important;
    text-align: left !important;
    margin-right: 0 !important;
    margin-bottom: 20px;
  }
  #illu-ausbildungsplatzsuche {
    display: none;
  }
  .footer {
    width: 625px;
  }
  footer .footer-wrapper {
    width: 625px;
    border-left: 10px solid #0a3264;
    border-right: 10px solid #dc7723;
  }
  footer .footer-wrapper {
    width: 625px;
    padding-left: 20px;
    border-left: 0;
    border-right: 0;
  }
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
  footer .footer-shadow {
    width: 625px;
    max-width: 625px;
  }
}
/* ///////////////////////////////////////////////////  cell phone  ///////////////////////////////////////////////// */
@media (max-width: 329px) {
  #page-wrapper {
    max-width: 100%;
    overflow-x: hidden;
    border-right: 0;
    border-left: 0;
    padding: 0;
  }
  #logo {
    width: 100%;
    height: 0;
    position: fixed;
    background-position: 50% 50%;
    background-color: #fff;
  }
  #page-back {
    background-image: none;
  }
  #logo {
    display: none;
  }
  #header-wrapper {
    width: 100%;
    margin-top: 0;
    position: fixed;
    background-color: #fff;
  }
  #header-wrapper .row {
    max-width: 100%;
    margin: 0;
  }
  #navigation-wrapper {
    width: 100%;
    margin-left: 0;
    border-right: 0;
    background-color: #fff !important;
  }
  #main-navigation li.aktuelles a:before,
  #main-navigation li.pruefungen a:before,
  #main-navigation li.berufe a:before,
  #main-navigation li.weiterbildung a:before,
  #main-navigation li.zfa a:before,
  #main-navigation li.suche a:before {
    content: none !important;
  }
  #main-navigation li.phone-only {
    display: block;
  }
  #main-navigation li.desktop-tablet {
    display: none;
  }
  #main-navigation li.phone-only {
    width: calc(38% - 2px);
    margin-right: 2px;
    margin-bottom: 2px;
    border: 0 !important;
  }
  #main-navigation li.phone-only.mobile-small {
    width: calc(24% - 2px);
  }
  #main-navigation li.phone-only:nth-child(8) a,
  #main-navigation li.phone-only:nth-child(9) a,
  #main-navigation li.phone-only:nth-child(11) a,
  #main-navigation li.phone-only:nth-child(12) a {
    padding-left: 10px;
  }
  #main-navigation li.suche a {
    width: 100% !important;
  }
  #main-navigation li.suche a:before {
    width: auto;
    padding-right: 0;
  }
  #main-navigation li a {
    width: 100% !important;
    height: auto;
    padding: 8px 5px 8px 10px;
    border: 4px #fff !important;
    font-size: 1.1em !important;
  }
  #navigation-submenue-wrapper {
    margin-left: 15px;
    width: 90%;
    height: 50px;
  }
  #mobile-logo {
    width: 100%;
    text-align: left;
    display: block;
    padding-left: 11px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  ul.sub-navigation {
    margin-left: 10px;
    width: 85%;
    float: left;
  }
  ul.sub-navigation li {
    float: none;
    margin-left: 0;
  }
  ul.sub-navigation li a {
    padding: 4px 2px 4px 0;
    font-size: 0.4em;
  }
  ul.sub-navigation {
    margin-left: 10px;
  }
  ul.sub-navigation li {
    float: none;
    margin-left: 0;
  }
  ul.sub-navigation li a {
    padding: 0 5px 5px 0;
    font-size: 0.5em;
  }
  #animation-bar {
    margin-left: 0;
    height: 16px;
  }
  #header-spacer {
    margin-left: 0;
    border: 0;
  }
  #content-wrapper {
    padding-top: 180px;
  }
  #content-left {
    margin-left: 10px;
    margin-right: 10px;
    width: 93%;
    max-width: 290px;
  }
  .inverted-box p {
    background-color: inherit !important;
    color: inherit !important;
  }
  #content-right {
    margin-left: 10px;
    margin-right: 10px;
    padding-bottom: 0;
    width: 240px;
    min-height: 300px;
    margin-top: 0;
  }
  #content-right div,
  #content-right p,
  #content-right img,
  #content-right span {
    display: none;
  }
  #mapContainer,
  #map_canvas {
    display: none;
  }
  #result-head-ausbildungsplatzsuche h1 {
    float: none;
    margin-top: 0;
    width: 100%;
  }
  #result-head-ausbildungsplatzsuche .form-wrapper {
    float: none !important;
    text-align: left !important;
    margin-right: 0 !important;
    margin-bottom: 20px;
  }
  #illu-ausbildungsplatzsuche {
    display: none;
  }
  .footer {
    width: 320px;
  }
  footer .footer-wrapper {
    width: 320px;
    border-left: 10px solid #0a3264;
    border-right: 10px solid #dc7723;
  }
  footer .footer-wrapper {
    width: 320px;
    padding-left: 20px;
    border-left: 0;
    border-right: 0;
  }
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
  footer .footer-shadow {
    width: 320px;
    max-width: 320px;
  }
}
/* ---- SVG ---- */
.st0 {
  fill: #e58728;
}
.st1 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #f5d8b9;
}
.st2 {
  fill: none;
}
.st3 {
  fill: #0a3264;
  font-size: 2.7em;
  font-family: monospace;
  font-weight: bold;
  letter-spacing: 0em;
}
.pgap-21-0 {
  border: none;
  display: block;
  margin: 0;
  fill: deepPink;
}
.pgap-21-1 {
  fill: none;
  stroke: gray;
}
.pgap-21-2 {
  fill: white;
  font-size: 1.8em;
  font-family: monospace;
}
.pgap-21-2:hover {
  fill: black;
}
.pgap-21-3 {
  fill: none;
  stroke: black;
}
.pgap-21-3:hover {
  fill: none;
  stroke: white;
}
.pgap-21-4 {
  fill: none;
  stroke: #181716;
}
.pgap-21-4:hover {
  fill: none;
  stroke: white;
}
/* ---- SVG ---- */
/* table zfa colors */
table.zfa {
  margin: 1em 0 1em 0;
}
table.zfa.full-width {
  width: 100%;
}
table.zfap {
  margin: 1em 0 1em 0;
}
table.zfa thead,
table.zfap thead {
  border-bottom: 1px solid #fff;
  background-color: #91A5B9;
  color: #fff;
  vertical-align: top;
  font-weight: 700;
}
table.zfa tbody {
  background-color: #c8d2dc;
  vertical-align: top;
}
table.zfap tbody {
  background-color: #c8d2dc;
  vertical-align: top;
}
table.zfa th,
table.zfa td {
  padding: 0.5em 0.5em 0.6em 0.6em;
}
.lines td {
  border-bottom: 1px solid white;
}
.vertical-lines td {
  border-right: 1px solid white;
}
table.zfa.small td,
table.zfa.small th {
  font-size: 1em;
}
td.r,
th.r {
  text-align: right;
}
td.lindent {
  padding-left: 1.5em !important;
}
.tr1 td:nth-child(1),
.tr1 th:nth-child(1) {
  text-align: left;
  width: 25%;
}
.tr1 td:nth-child(2),
.tr1 th:nth-child(2) {
  text-align: right;
  width: 13%;
}
.tr1 td:nth-child(3),
.tr1 th:nth-child(3) {
  text-align: right;
  width: 13%;
}
.tr1 td:nth-child(4),
.tr1 th:nth-child(4) {
  text-align: right;
  width: 12%;
}
.tr1 td:nth-child(5),
.tr1 th:nth-child(5) {
  text-align: right;
  width: 13%;
}
.tr1 td:nth-child(6),
.tr1 th:nth-child(6) {
  text-align: right;
  width: 11%;
}
.tr1 td:nth-child(7),
.tr1 th:nth-child(7) {
  text-align: right;
  width: 13%;
}
.more-lines td {
  border-right: 3px white solid;
  border-bottom: 3px white solid;
}
table.zfap thead td {
  padding: 0.4em 0.6em 0.5em 0.65em;
  font-size: 1.2em;
  background-color: #dc7723;
}
table.zfap td {
  padding: 0.1ex 0.6em 0.6em 0.6em;
}
td p {
  line-height: 1.3em;
  padding: 1ex 0 0.1ex 0;
  margin: 0;
}
tr.first td {
  border-bottom: 0 none #0A3264;
  padding-bottom: 0;
  font-weight: 700;
}
td.space {
  background-color: white;
  font-size: 0.8em;
  line-height: 0.1ex;
  padding: 0;
}
table.zfap td.noback {
  background-color: white;
  padding: 0;
}
td.noback h2 {
  background-color: white;
  padding: 1.5ex 1.2ex 0.5ex 0;
}
.line2 {
  border-bottom: 2px solid white;
}
.line4 {
  border-bottom: 4px solid white;
}
td ol {
  padding-left: 1.4em;
  margin-bottom: 0;
}
/* end table  */
/* ol mit custom Numerierung ohne Einzug */
ol.with-borders {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
ol.with-borders li {
  overflow: hidden;
}
ol.with-borders li:before {
  display: inline-block;
  float: left;
  /*
	text-align: right;
	padding-left: 1.5ex;
 */
  text-indent: 1.5ex;
  content: counter(item) ". ";
  counter-increment: item;
  width: 2em;
  height: 100%;
  overflow: hidden;
  border: 1px solid transparent;
  line-height: 1.1em;
  padding-bottom: 1.5ex;
}
@media (max-width: 640px) {
  ol.with-borders li:before {
    padding-bottom: 3ex;
    line-height: 1em;
  }
}
@media (max-width: 320px) {
  ol.with-borders li:before {
    padding-bottom: 2.5ex;
    line-height: 1em;
  }
}
ol.with-borders li:nth-child(1) {
  padding-top: 1ex;
  border-top: 1px solid #c8d2dc;
}
ol.with-borders li:last-child {
  padding-bottom: 1ex;
  border-bottom: 1px solid #c8d2dc;
}
/* end ol mit custom Numerierung ohne Einzug */
/* ul mit Bullets und ohne Einzug */
.abc-indent {
  text-indent: -1.3em;
  padding-left: 1.8em !important;
}
.abc-indent2 {
  padding-left: 1.8em !important;
}
/* ende ul ohne Bullets, Einzug mit Symbolen */
/* content box (use in left) styles with 1 column */
/* Komplette Box mit ein bis drei Spalten */
.box-col-1 {
  margin: 0 0 2em 0;
  width: 49%;
  line-height: 1.3em;
}
.box-col-1.withfooter {
  margin: 0 0 0.8em 0;
}
.withblueborder {
  border: 1px solid #0a3264 !important;
  margin-bottom: -1em;
}
.box-col-1 h3 {
  width: 100%;
  background-color: #91A5B9;
  color: #fff;
  padding: 0.5em 0.5em 0.6em 0.6em;
  font-weight: 700;
  margin: 0;
  font-size: 1em;
  letter-spacing: normal;
}
.box-col-1 .space-before {
  margin-top: 1.2em;
}
.box-col-1 p {
  width: 100%;
  background-color: #c8d2dc;
  padding: 0.5em 0.5em 0.6em 0.6em;
  margin: 0;
}
.inverted-box p {
  background-color: #0a3264;
  color: #fff;
}
.box-col-1 .background-image {
  width: inherit;
}
.box-col-1.wide {
  width: 100%;
}
.box-col-1 h2 {
  margin-bottom: 1.1ex;
}
.withfooter {
  width: 100%;
  margin-bottom: 1.4ex;
}
.afterfooter {
  padding-top: 1em;
}
.box-col-1.wide p {
  border-bottom: 1px solid #fff;
  padding: 0.3em 0.6em 0.3em 0.6em;
}
.box-col-1.wide p.last {
  padding-bottom: 0.5em !important;
}
.box-col-1 li {
  border-bottom: 1px solid #fff;
  padding: 0.4em 0.3em 0.4em 0em;
}
.zwr {
  display: inline-block;
  width: 1.3ex;
}
.box-col-1 ol {
  background-color: #c8d2dc;
}
/* end content box (use in left) styles with 1 column */
/* content box (use in left) styles with 2 columns */
.box-col-2 {
  width: 67%;
  margin: 0 0 5% 0;
  background-color: #c8d2dc;
}
.box-col-2 h3 {
  width: 100%;
  background-color: #91A5B9;
  color: #fff;
  padding: 0.5em 0.5em 0.6em 0.6em;
  font-weight: 700;
  margin: 0;
  font-size: 1em;
  letter-spacing: normal;
}
.box-col-2.wide {
  width: 100%;
}
.box-col-2 p:nth-of-type(2) {
  padding-right: 0.6em;
}
/* end content box (use in left) styles with 2 columns */
/* content box (use in left) styles with 3 columns */
.box-col-3 {
  width: 100%;
  background-color: #c8d2dc;
  margin: 0 0 5% 0;
}
.box-col-3 h3 {
  width: 100%;
  background-color: #91A5B9;
  color: #fff;
  padding: 0.5em 0.5em 0.6em 0.6em;
  font-weight: 700;
  margin: 0;
  font-size: 1em;
  letter-spacing: normal;
}
.box-col-3 p {
  width: 33.3%;
  padding: 0.5em 1em 0.6em 0.6em;
  margin: 0;
  display: table-cell;
  background-color: #c8d2dc;
  height: 100%;
}
.box-col-3 p:nth-of-type(3) {
  padding-right: 0.6em;
}
/* content box (use in left) styles with 3 columns */
/* content 2 columns for use in .*src-file */
.col-1 {
  width: 49%;
  padding-right: 1%;
  float: left;
}
.col-2 {
  width: 49%;
  padding-left: 1%;
  float: left;
}
.col-1-links {
  width: 48%;
  padding-right: 1%;
  float: left;
}
.col-2-links {
  width: 48%;
  padding-left: 1%;
  float: left;
}
.col-1-links p {
  padding-top: 0.3em;
}
.col-2-links p {
  padding-top: 0.3em;
}
.col-1-links img {
  margin-bottom: 12px;
}
.col-2-links img {
  margin-bottom: 12px;
}
.col-wettbewerb {
  padding-bottom: 18px;
}
.fancy-gewinner {
  display: none;
  padding: 15px;
  color: black;
}
.fancy-gewinner p {
  margin-top: 14px;
  width: 100%;
}
a.wettbewerb img {
  border: 1px solid #bebebe;
  margin-bottom: 11px;
}
a.wettbewerb p {
  margin-bottom: 16px;
}
.fancy-gewinner img {
  border: 1px solid #bebebe;
  margin-bottom: -3px;
  height: auto;
  width: 100%;
}
.fancybox-inner {
  background-color: #bebebe;
}
.fancybox img {
  border: 1px solid #bebebe;
  margin-bottom: 10px;
  margin-top: 1em;
}
a.wettbewerb {
  color: #333333;
}
a.fancybox {
  color: #323232;
  line-height: 14px !important;
}
@media (max-width: 640px) {
  .col-1,
  .col-2,
  .col-1-links,
  .col-2-links {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    float: none;
  }
}
.col-1 h2 {
  padding-bottom: 0;
}
.col-2 h2 {
  padding-bottom: 0;
}
.col-1 .box-col-1,
.col-2 .box-col-1 {
  width: 100%;
}
.zwo-em {
  margin-top: 2em;
}
.boxstyle {
  margin: 0 0 1em;
}
.boxhead {
  margin: 1.8em 0 1.2em;
}
.boxstyle ul {
  background-color: #c8d2dc;
  list-style-type: none;
  padding-left: 0em;
  margin: 0;
}
.boxstyle li {
  text-indent: -2em;
  padding-left: 2.6em;
  -webkit-font-feature-settings: "pnum" 0;
  -moz-font-feature-settings: "pnum" 0;
  -ms-font-feature-settings: "pnum" 0;
  font-feature-settings: "pnum" 0;
}
.boxstyle h3 {
  background-color: #91A5B9;
  list-style-type: none;
  margin: 2ex 0 1ex 0;
}
/* end content 2 columns for use in .*src-file */
/* Ausbildungsplaner wide content */
.ausbildungsplaner {
  margin-left: 0 !important;
  width: 795px !important;
}
/* end Ausbildungsplaner wide content */
/* Ausbildung A-Z */
#ausbildungaz p {
  margin: 0.7em 0 0 0;
  padding: 0 0 0 0;
}
#ausbildungaz h3 {
  margin: 0 0 0 0;
  padding: 1.7em 0 0.1em 0;
  border-bottom: 1px solid gray;
}
/* end Ausbildung A-Z */
/* infos-alle-berufe */
#branchenfilme {
  width: 100%;
}
#branchenfilme p {
  margin: 0 0 3.1em 0;
}
#branchenfilme .video-thumb {
  margin: 1em 0 0.2em 0;
}
#branchenfilme div {
  margin: 0 0 0.2em 0;
}
#entwicklungzahlen {
  margin: 1em 0 0 0;
}
#entwicklungzahlen p {
  padding: 0 0 1em 0;
}
#entwicklungzahlen object {
  width: 100%;
}
#videowettbewerb {
  width: 100%;
  border: 0;
}
/* end infos-alle-berufe */
/* Weiterbildung */
.adressen p {
  margin: 1em 0 0.2em 0;
}
.uebersicht h2 {
  margin: 1em 0 1.6em 0;
  padding-bottom: 0.2em;
  border-bottom: 1px solid gray;
}
.uebersicht h3 {
  margin-top: 1.2em;
  margin-bottom: 0em;
  padding-top: 0em;
  padding-bottom: 0.7em;
}
.uebersicht h4 {
  margin-top: 1.2em;
  margin-bottom: 0em;
  padding: 0em;
  font-size: 1em;
  font-style: italic;
}
.uebersicht ul {
  margin-top: 0em;
}
.uebersicht p {
  margin: 1em 0 0.2em 0;
}
/* end Weiterbbildung */
/* Ausbildungsplatzsuche */
.fp-iframe {
  width: 800px;
  height: 900px;
}
/* end Ausbildungsplatzsuche */
/*   /zfa/   */
div.haftung p {
  font-size: 0.9em;
  line-height: 1.4em;
  width: 90%;
}
/* end /zfa/  */
/* druck-abc grid */
.content-3-cols {
  width: 100%;
  margin-top: 0.8em !important;
  margin-bottom: 0.8em !important;
}
.content-3-cols .row .col-md-4 img {
  display: block;
}
.content-3-cols .row .col-md-4 p {
  display: block;
  width: 100%;
  margin-top: 5px;
}
/* end druck-abc grid */
.lightborder {
  border: 1px solid #d2d2d2;
}
/* ausbildungsplatzsuche */
#searchbar-msk-input {
  width: 200px;
  height: 28px;
}
.loupe {
  background-color: transparent;
  border: 0;
  width: 30px;
  height: 30px;
}
.loupe span::after {
  display: block;
}
#result-head-ausbildungsplatzsuche {
  width: 100%;
  margin-top: -4px;
}
#result-head-ausbildungsplatzsuche h1 {
  float: left;
  margin-top: -1px;
}
#result-head-ausbildungsplatzsuche .form-wrapper {
  float: right;
  text-align: right;
  margin-right: 30px;
}
#map_canvas {
  width: 100%;
  max-width: 577px;
  height: 305px;
  margin-bottom: 20px;
}
#ausbildungsplatzsuche-result-list {
  width: 100%;
}
#ausbildungsplatzsuche-result-list h2 {
  padding: 0em 0 0.5em 0;
}
#ausbildungsplatzsuche-result-list .row {
  width: 98%;
}
#ausbildungsplatzsuche-result-list .row .col-md-6 {
  margin-bottom: 40px;
}
/* end ausbildungsplatzsuche result grid */
/* contact-form */
#contact-form label {
  display: block;
  width: 100%;
  margin-top: 3%;
}
#contact-form input,
#contact-form textarea,
#anmeldung input,
#anmeldung textarea {
  width: 400px;
  display: block;
}
#contact-form textarea {
  height: 200px;
}
#contact-form span.error,
#anmeldung span.error {
  display: block;
  width: 100%;
  color: #DC7723;
}
#contact-form .button,
#contact-form p,
#anmeldung .button,
#anmeldung p {
  margin-top: 3%;
  width: auto;
}
#contact-form .anrede,
#anmeldung .anrede {
  display: inline;
}
#contact-form input.anrede,
#anmeldung input.anrede {
  width: auto;
}
@media (max-width: 640px) {
  #contact-form .floating,
  #anmeldung .floating {
    float: none !important;
    padding-top: 0 !important;
  }
  #contact-form input[type="text"],
  #anmeldung input[type="text"] {
    max-width: 100%;
  }
}
#anmeldung h3 {
  margin-top: 1em;
  padding-bottom: 0;
}
#anmeldung label {
  display: block;
  width: 100%;
  margin-top: 1em;
  font-weight: 400;
  margin-bottom: 1px;
}
#anmeldung textarea {
  height: 100px;
}
#anmeldung input[type="submit"] {
  width: 160px;
}
/* end contact-form */
/* zfa personen */
.personen {
  width: 100%;
  margin-bottom: 1.8em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid gray;
  clear: both;
}
.personen-info {
  width: 100%;
}
.personen-bild {
  min-width: 120px !important;
  max-width: 120px !important;
}
.personen-bild img {
  min-width: 110px !important;
  max-width: 110px !important;
}
.personen .funktion {
  margin-top: 10px;
}
.personen-data-wrapper,
.personen-bild {
  float: left !important;
}
/* end zfa personen */
#publikationen img {
  width: 40%;
  margin-top: 1em;
  margin-bottom: 1.8em;
  box-shadow: 6px 6px 8px #c8c8c8;
}
#publikationen .img-left {
  margin-right: 1.8em;
  float: left;
}
#publikationen .img-right {
  margin-left: 0.5em;
  float: right;
}
.border {
  border: 1px solid #CCC;
}
#publikationen h2 {
  padding-top: 0.65ex;
}
#publikationen .line {
  padding-top: 0.8em;
  border-top: 1px solid gray;
  clear: both;
}
#adressen p {
  margin-top: 2em;
}
#adressen p.colspan {
  margin: 2em 0 0.3em 0;
}
#adressen p.subcol {
  margin: 0;
}
#adressen h1 {
  margin-bottom: -0.5em;
}
#pruefungsdaten img {
  margin-top: 1.2em;
  margin-bottom: 0.6em;
  box-shadow: 4px 4px 6px #c8c8c8;
}
#pruefungsdaten a {
  font-size: 90%;
}
#pruefungsdaten .col-1,
#pruefungsdaten .col-2,
#pruefungsdaten .container {
  line-height: 1;
}
#mtsiebdruckdaten img {
  margin-top: 1em;
  margin-bottom: 1em;
  box-shadow: 4px 4px 6px #c8c8c8;
}
#mtsiebdruckdaten .zipicon {
  margin-top: 0.8em;
  margin-bottom: 1em;
  width: 60%;
  box-shadow: none;
  float: none;
}
#mtsiebdruckdaten .col-1 {
  width: 54%;
  margin: 0.5em 0 0.5em;
}
#mtsiebdruckdaten .col-2 {
  width: auto;
  margin: 0.5em 0 0.5em;
}
#mtdruckdaten .col-1 {
  width: 49%;
  margin: 0.5em 0.5em 0.5em 0;
}
#mtdruckdaten .col-2 {
  width: 49%;
  margin: 0.5em 0 0.5em;
}
#mtsiebdruckdaten .mtslabel {
  margin-top: 2.2em;
}
/* Pseudo-Tabellen ******************************************************* */
/*	https://html-cleaner.com/features/replace-html-table-tags-with-divs/   */
/*	Man kann hier table zu div konvertieren   */
/*	Besser bei Tabelle das Original <table> verwenden.   */
.rTable {
  display: table;
  counter-reset: item;
  background-color: #c8d2dc;
  width: 100%;
}
.rTableRow {
  display: table-row;
}
.rTableHeading {
  display: table-header-group;
  font-weight: 700;
  border: 1px solid #FFF;
}
.rTableCell,
rTableHead {
  display: table-cell;
  text-align: left;
  padding: 0.5em 0.6em 0.6em 0;
  border: 1px solid #FFF;
}
.rTableFoot {
  font-weight: 700;
  background-color: transparent;
}
.rTableBody {
  display: table-row-group;
}
/* *****************************************

	Ohne display:table
	Breitenangabe erforderlich

.rTable
{
	display: block;
	width: 99%;
	counter-reset: item;
}

.rTableHeading, .rTableBody, .rTableFoot, .rTableRow { clear: both; }

.rTableHead, .rTableFoot
{
	background-color: #DDD;
	font-weight: @font-weight-bold;
}

.rTableCell, .rTableHead
{
	float: left;
	height: 2em;
	overflow: hidden;
	width: 33%;
	text-align: left;
	padding: 0.5em 0.6em 0.6em 0;
	border: 1px solid #FFF;
	background-color: @light-blue;
}

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

***************************************** */
.pseudo-table {
  display: table;
  counter-reset: item;
  background-color: #c8d2dc;
}
.pseudo-table .row {
  display: table-row;
}
.pseudo-table .cell {
  display: table-cell;
  text-align: left;
  padding: 0.5em 0.6em 0.6em 0;
  border-bottom: 2px solid #FFF;
}
.head .cell {
  font-weight: 700;
}
.pseudo-table .number {
  padding-left: 1.2ex;
}
.pseudo-table .number:before {
  display: inline-block;
  content: counter(item) ". ";
  counter-increment: item;
}
/* end Pseudo-Tabellen */
/* News Mediengestalter-Prüfungsgebiete */
#news-img-bg-47 {
  border-bottom: 6px solid transparent;
}
#news-img-bg-47:hover {
  animation: fa-spin 3s infinite linear;
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(359deg);
    transform: rotateY(359deg);
  }
}
/* End News Mediengestalter-Prüfungsgebiete */
/* Start Aktuelles **************************************************************************/
.typing-background {
  width: 610px;
}
.wrapper {
  height: 2.1em;
  display: flex;
  align-items: left;
  justify-content: left;
  background-color: none;
  color: black;
  padding: 0 0 6px 0;
  margin: 0 0 1em 0;
}
.typing-headline {
  width: 79%;
  animation: typing 5s steps(39), blink 0.6s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 4px #0a3264 solid;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.5em;
  letter-spacing: 2px;
}
@keyframes typing {
  from {
    width: 0;
  }
}
@keyframes blink {
  50% {
    border-color: transparent;
  }
}
/* End Aktuelles **************************************************************************/
.inlinebox {
  display: inline-block;
  width: auto;
  height: auto;
  margin-right: 1em;
  padding: 2px 8px;
  border: 1px solid;
}
.left {
  float: left;
  width: 49%;
}
.right {
  float: right;
  width: 49%;
}
/* Symbole NEU **************************************************************************/
ul.icn-list {
  margin: 0 0 0.8em 0;
  padding: 0 0 0 0.7em;
  list-style: none;
  list-style-position: inside;
}
li {
  position: relative;
  padding-left: 0.4em;
  padding-bottom: 0;
}
li.space {
  padding-bottom: 0.4em;
}
li.icn-berufe:before {
  content: "B";
  font-family: "ZFA-Symbole";
  position: absolute;
  left: -0.7em;
  top: 0;
}
li.icn-aktuell:before {
  content: "A";
  font-family: "ZFA-Symbole";
  position: absolute;
  left: -0.7em;
  top: 0;
}
li.icn-pruefungen:before {
  content: "P";
  font-family: "ZFA-Symbole";
  position: absolute;
  left: -0.7em;
  top: 0;
}
li.icn-weiterbildung:before {
  content: "W";
  font-family: "ZFA-Symbole";
  position: absolute;
  left: -0.7em;
  top: 0;
}
li.icn-zfa:before {
  content: "Z";
  font-family: "ZFA-Symbole";
  position: absolute;
  left: -0.7em;
  top: 0;
}
li.icn-check:before {
  content: "\F300";
  font-family: "ZFA-Symbole";
  position: absolute;
  left: -0.7em;
  top: 0;
}
li.icn-checkplus:before {
  content: "\F301";
  font-family: "ZFA-Symbole";
  position: absolute;
  left: -0.7em;
  top: 0;
}
li.icn-checkminus:before {
  content: "\F302";
  font-family: "ZFA-Symbole";
  position: absolute;
  left: -0.7em;
  top: 0;
}
li.icn-checkplusorange:before {
  content: "\F301";
  font-family: "ZFA-Symbole";
  position: absolute;
  left: -0.7em;
  top: 0;
  color: #dc7723;
}
ul.icn-triangle {
  margin: 0 0 0.8em 0;
  padding: 0 0 0 0.5em;
  list-style: none;
  list-style-position: inside;
}
li.icn-triangle:before {
  content: "b";
  font-family: "ZFA-Symbole";
  position: absolute;
  left: -0.5em;
  top: 0;
  color: #dc7723;
}
li.icn-trigray:before {
  content: "b";
  font-family: "ZFA-Symbole";
  position: absolute;
  left: -0.5em;
  top: 0;
  color: gray;
}
span.triangle-inline:before {
  content: "b";
  font-family: "ZFA-Symbole";
  color: #dc7723;
  padding-right: 0.5ex;
  position: absolut;
  top: 0;
}
a.indent {
  padding-right: 0.5em;
}
.initial:first-letter {
  font-size: 258%;
  line-height: 0.92;
  float: left;
  padding-right: 0.2em;
  color: #dc7723;
  font-weight: 700;
}
/* 
Nur einmal auf der Seite:
.initial:first-of-type:first-letter
*/
@-moz-document url-prefix() {
  .initial:first-letter {
    margin-top: 0.1em;
  }
}
ul.line {
  border-top: 1px solid #4B648C;
}
ul.bottomline {
  border-top: 1px solid #4B648C;
  border-bottom: 1px solid #4B648C;
}
/* Ende Symbole NEU *********************************************************************/
.helplinks {
  display: inline-block;
  width: 30%;
  height: auto;
  margin-right: 1em;
  padding: 2px 8px;
}
/* ul nur Square ************************************************/
ul.linklist-bullets {
  list-style-type: square;
  list-style-position: inside;
  padding-left: 0;
  margin-left: 0;
}
ul.linklist-bullets li {
  margin-left: 0;
  text-indent: -1em;
  padding-left: 1em;
}
/* ende ul nur Square */
/* ul ohne Bullets und ohne Einzug *****************************************************/
ul.linklist {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  list-style-position: outside;
}
ul.linklist li {
  margin-left: 0;
  padding-left: 0 /* wichtig, muss in li und ul, wenn kein Einzug. */;
}
/* ende ul ohne Bullets und ohne Einzug *************************************************/
ul .line {
  border-top: 1px solid #4B648C;
  padding-bottom: 0.2em;
  padding-top: 0.2em;
}
ul .bottomline {
  border-top: 1px solid #4B648C;
  border-bottom: 1px solid #4B648C;
  padding-bottom: 0.2em;
  padding-top: 0.2em;
}
ol#ds {
  padding-left: 0;
  /* Gesamteinzug der ganzen Liste von links */
  counter-reset: item;
  margin-top: 0;
}
ol#ds > li.ds {
  /* ex ermöglicht feinere Einstellung  */
  text-indent: -2.7ex;
  /*  abstimmen mit padding-left und width in li:before*/
  padding-left: 2.3ex;
  /* wie width in li:before */
  list-style-type: none;
  counter-increment: item;
}
ol#ds > li.ds:before {
  display: inline-block;
  width: 2.3ex;
  /* wie padding-left in li */
  padding-right: 0.8ex;
  /* Abstand nach der Zahl */
  font-weight: bold;
  text-align: right;
  content: counter(item) "";
  /* Zeichen nach Zahl erfordert Anpassung des text-indent */
  padding-top: 0.8em;
}
div.line {
  border-top: 1px solid #4B648C;
  padding-bottom: 0.2em;
  padding-top: 0.2em;
  margin-bottom: 0.1em;
  margin-top: 1.1em;
}
footer .footer-wrapper {
  font-size: 1.8ex;
  line-height: 1.8ex;
}
h1 {
  font-size: 1.5em;
  padding: 0 0 1em 0;
  margin: -0.1em 0 0 0;
  line-height: 1.2em;
}
h1.nicht-oben {
  padding: 1.8em 0 1em 0;
}
h2.news-title {
  font-size: 1.5em;
  padding: 0 0 1em 0;
  margin: 0;
  display: block;
}
h2 {
  font-size: 1.3em;
  padding: 1.25em 0 0.8em 0;
  margin: 0;
  line-height: 1.2em;
}
ol.head2 {
  font-size: 1.3em;
  padding: 1.25em 0 0.8em 0;
  line-height: 1.2em;
  padding-left: 29px;
  /* Abstand für die Nummerierung */
}
ol.head2 li {
  padding-left: 5px;
  /* Abstand für den Text der zweiten und folgenden Zeilen */
}
ol.p2 {
  font-size: 16px;
  padding: 1.25em 0 0.8em 0;
  line-height: 1.2em;
  padding-left: 16px;
  /* Abstand für die Nummerierung */
}
ol.p2 li {
  padding-left: 0px;
  /* Abstand für den Text der zweiten und folgenden Zeilen */
}
.nach-h1 {
  padding: 0.5em 0 0.8em 0;
}
h3 {
  font-size: 1.3em;
  padding: 1.25em 0 0.8em 0;
  margin-top: 1.25em;
  line-height: 1.2em;
}
h3.nach-h2 {
  padding: 0 0 0.8em 0;
}
h3.line {
  font-size: 1.3em;
  padding: 1.25em 0 0.8em 0;
  margin: 1.25em 0 0 0;
  line-height: 1.2em;
  border-top: 2px solid #4B648C;
}
h4 {
  font-size: 1.1em;
  padding: 0.9em 0 0.3em 0;
  line-height: 1.2em;
}
h4.first {
  padding-top: 0;
}
/*  Character Styles */
.fraction {
  -webkit-font-feature-settings: "frac" 1;
  -moz-font-feature-settings: "frac" 1;
  -ms-font-feature-settings: "frac" 1;
  font-feature-settings: "frac" 1;
}
.liningfigures {
  -webkit-font-feature-settings: "pnum" 0, "lnum" 1;
  -moz-font-feature-settings: "pnum" 0, "lnum" 1;
  -ms-font-feature-settings: "pnum" 0, "lnum" 1;
  font-feature-settings: "pnum" 0, "lnum" 1;
}
.menue-content-right li a:before {
  font-family: "ZFA-Symbole";
  content: "K";
}
.box .title:before {
  font-family: "ZFA-Symbole";
  content: "K";
  color: #c8d2dc;
}
.box .title:after {
  font-family: "ZFA-Symbole";
  content: " b";
  color: #c8d2dc;
}
.img-link-right li a:before {
  font-family: "ZFA-Symbole";
  content: "K";
}
.mediencomm-wiki:before {
  content: "M";
  font-family: "ZFA-Symbole";
  color: #a7c70a;
  font-size: 5em;
  line-height: 1.3ex;
  float: left;
  padding: 0 0.2ex 0.6ex 0;
}
.triangle-end-light:after {
  content: " b";
  font-family: "ZFA-Symbole";
  color: #c8d2dc;
}
.triangle-end:after {
  content: " b";
  font-family: "ZFA-Symbole";
  color: #dc7723;
}
.triangle-begin-light:before {
  content: "b ";
  font-family: "ZFA-Symbole";
  color: #c8d2dc;
}
.triangle-begin:before {
  content: "b ";
  font-family: "ZFA-Symbole";
  color: #dc7723;
}
.nobr {
  white-space: nowrap;
}
.zfa-font {
  font-family: "ZFA-Symbole";
}
.zfa-block {
  font-family: "ZFA-Symbole";
  text-align: justify;
}
.mid-blue {
  color: #4B648C;
}
.light-blue {
  color: #c8d2dc;
}
.dark-blue {
  color: #0a3264;
}
.orange {
  color: #dc7723;
}
hr.line {
  border-top: 2px solid #4B648C;
}
/* ausbildungsplatzsuche */
.loupe span::after {
  color: #dc7723;
  Font-family: "ZFA-Symbole";
  content: "S";
  font-size: 20px;
}
/* end ausbildungsplatzsuche */
/*++++++++++++++++++++++++++++***********************************************************/
@media (max-width: 1250px) {
  ul.sub-navigation li a {
    font-size: 0.9em;
  }
}
/*++++++++++++++++++++++++++++***********************************************************/
@media (min-width: 321px) and (max-width: 640px) {
  footer .footer-wrapper {
    font-size: 0.7em;
  }
  #main-navigation li a {
    /* font-size: 1.2em !important; */
  }
  ul.sub-navigation li a {
    font-size: 1.2em !important;
  }
  #mobile-menue-link {
    outline: 0;
  }
  #mobile-menue-icon:after {
    font-size: 2.5em;
    font-family: "ZFA-Symbole";
    content: "m";
    float: right;
    display: inline-block;
    color: #0a3264;
    padding-top: 18px;
  }
  #mobile-menue-icon:hover:after {
    color: #dc7723;
  }
  footer .footer-wrapper {
    padding-top: 10px;
  }
}
/*++++++++++++++++++++++++++++***********************************************************/
@media (max-width: 320px) {
  body {
    font-size: 11px;
  }
  ul.sub-navigation li a {
    font-size: 13px !important;
  }
  footer .footer-wrapper {
    padding-top: 10px;
    font-size: 1.5ex;
  }
  #mobile-menue-link {
    outline: 0;
  }
  #mobile-menue-icon:after {
    font-size: 2.5em;
    font-family: "ZFA-Symbole";
    content: "m";
    float: right;
    display: inline-block;
    color: #0a3264;
    padding-top: 14px;
  }
  #mobile-menue-icon:hover:after {
    color: #dc7723;
  }
}
/*++++++++++++++++++++++++++++***********************************************************/
/*++++++++++++++++++++++++++++***********************************************************/
/* begin textreplacements.php  */
.minus1ex {
  letter-spacing: -0.1ex;
}
.minus08ex {
  letter-spacing: -0.08ex;
}
.minus06ex {
  letter-spacing: -0.06ex;
}
.minus03ex {
  letter-spacing: -0.03ex;
}
.minus01ex {
  letter-spacing: -0.01ex;
}
.plus3ex {
  letter-spacing: 0.3ex;
}
.plus1ex {
  letter-spacing: 0.1ex;
}
.plus08ex {
  letter-spacing: 0.08ex;
}
.plus06ex {
  letter-spacing: 0.06ex;
}
.plus03ex {
  letter-spacing: 0.03ex;
}
.plus01ex {
  letter-spacing: 0.01ex;
}
/* end textreplacements.php  */
/* begin kerning.js  */
.0561 {
  -letter-kern: 0 0.15em 0 0;
}
.510520 {
  -letter-kern: 0 0.15em 0 0.15em 0 0;
}
.410249 {
  -letter-kern: 0 0.15em 0 0.15em 0 0;
}
/* Beispiele */
#pixel-perfect {
  font-size: 2em;
  -letter-kern: -2px 0 0 0 0 1px 0 2px 0 0 0 0 0;
}
.Tee-Wolken {
  -letter-kern: -0.1em 0 0 -0.05em -0.05em 0 0 0 0 0;
}
.06132790340 {
  -letter-kern: 0.15em 0 0.15em 0 0.4em 0 0.15em 0 0.15em 0 0;
}
/*++++++++++++++++++++++++++++***********************************************************/
/*   html, body, navigation  ***********************************************************/
html {
  -webkit-font-feature-settings: "liga" 1, "dlig" 0, "kern" 1, "frac" 0, "pnum" 1;
  -moz-font-feature-settings: "liga" 1, "dlig" 0, "kern" 1, "frac" 0, "pnum" 1;
  -ms-font-feature-settings: "liga" 1, "dlig" 0, "kern" 1, "frac" 0, "pnum" 1;
  font-feature-settings: "liga" 1, "dlig" 0, "kern" 1, "frac" 0, "pnum" 1;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
html,
body {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4em;
}
/* lower letters zfa = Logo */
#logo {
  font-size: 3.4em;
  font-family: "ZFA-Symbole";
  margin: 30px 0 0 0.42em;
  text-align: left;
  color: #0A3264;
  text-shadow: 4px 3px 4px #999;
}
#logo a {
  color: #0A3264;
}
#main-navigation li a {
  font-size: 1.2em;
  font-family: "Roboto Condensed", sans-serif;
}
#main-navigation li.aktuelles a:before {
  font-family: "ZFA-Symbole";
  content: "A";
  letter-spacing: 0.15em;
}
#main-navigation li.pruefungen a:before {
  font-family: "ZFA-Symbole";
  content: "P";
  letter-spacing: 0.2em;
}
#main-navigation li.berufe a:before {
  font-family: "ZFA-Symbole";
  content: "B";
  letter-spacing: 0.2em;
}
#main-navigation li.weiterbildung a:before {
  font-family: "ZFA-Symbole";
  content: "W";
  letter-spacing: 0.2em;
}
#main-navigation li.zfa a:before {
  font-family: "ZFA-Symbole";
  content: "Z";
  letter-spacing: 0.2em;
}
#main-navigation li.suche a:before {
  font-family: "ZFA-Symbole";
  content: "S";
  letter-spacing: 0.2em;
}
#mobile-logo {
  font-size: 2.5em;
  font-family: "ZFA-Symbole";
  text-shadow: 4px 3px 4px #999;
  background-color: #fff;
  color: #0A3264;
}
/* Nicht mehr verwenden bitte  ********************************************************/
/* funktioniert nur, wenn das erste Zeichen nach dem <li> ein Whitespace ist. **/
ul.linklist-symbols {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  list-style-position: inside;
}
ul.linklist-symbols li {
  margin-left: 0;
  text-indent: -1.2em;
  padding-left: 1.2em;
}
ul.linklist-symbols li.aktuell:before {
  font-family: "ZFA-Symbole";
  content: "A";
  letter-spacing: 0.2em;
}
ul.linklist-symbols li.pruefungen:before {
  font-family: "ZFA-Symbole";
  content: "P";
  letter-spacing: 0.2em;
}
ul.linklist-symbols li.berufe:before {
  font-family: "ZFA-Symbole";
  content: "B";
  letter-spacing: 0.2em;
}
ul.linklist-symbols li.weiterbildung:before {
  font-family: "ZFA-Symbole";
  content: "W";
  letter-spacing: 0.2em;
}
ul.linklist-symbols li.zfa:before {
  font-family: "ZFA-Symbole";
  content: "Z";
  letter-spacing: 0.2em;
}