body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#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}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center}
@charset "UTF-8";

/* Schriften einbinden */

@font-face {
    font-family: 'Roboto Condensed';
    src: url('../../files/content/fonts/RobotoCondensed-Regular-webfont.eot');
    src: url('../../files/content/fonts/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../files/content/fonts/RobotoCondensed-Regular-webfont.woff2') format('woff2'),
         url('../../files/content/fonts/RobotoCondensed-Regular-webfont.woff') format('woff'),
         url('../../files/content/fonts/RobotoCondensed-Regular-webfont.ttf') format('truetype'),
         url('../../files/content/fonts/RobotoCondensed-Regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Roboto Bold Condensed';
    src: url('../../files/content/fonts/RobotoCondensed-Bold-webfont.eot');
    src: url('../../files/content/fonts/RobotoCondensed-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../files/content/fonts/RobotoCondensed-Bold-webfont.woff2') format('woff2'),
         url('../../files/content/fonts/RobotoCondensed-Bold-webfont.woff') format('woff'),
         url('../../files/content/fonts/RobotoCondensed-Bold-webfont.ttf') format('truetype'),
         url('../../files/content/fonts/RobotoCondensed-Bold-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Roboto Light';
    src: url('../../files/content/fonts/Roboto-Light-webfont.eot');
    src: url('../../files/content/fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../files/content/fonts/Roboto-Light-webfont.woff2') format('woff2'),
         url('../../files/content/fonts/Roboto-Light-webfont.woff') format('woff'),
         url('../../files/content/fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('../../files/content/fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Roboto Regular';
    src: url('../../files/content/fonts/Roboto-Regular-webfont.eot');
    src: url('../../files/content/fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../files/content/fonts/Roboto-Regular-webfont.woff2') format('woff2'),
         url('../../files/content/fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../../files/content/fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../../files/content/fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Roboto Italic';
    src: url('../../files/content/fonts/Roboto-Italic-webfont.eot');
    src: url('../../files/content/fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../files/content/fonts/Roboto-Italic-webfont.woff2') format('woff2'),
         url('../../files/content/fonts/Roboto-Italic-webfont.woff') format('woff'),
         url('../../files/content/fonts/Roboto-Italic-webfont.ttf') format('truetype'),
         url('../../files/content/fonts/Roboto-Italic-webfont.svg#robotoitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Roboto Bold';
    src: url('../../files/content/fonts/Roboto-Bold-webfont.eot');
    src: url('../../files/content/fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../files/content/fonts/Roboto-Bold-webfont.woff2') format('woff2'),
         url('../../files/content/fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('../../files/content/fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('../../files/content/fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Roboto Black';
    src: url('../../files/content/fonts/Roboto-Black-webfont.eot');
    src: url('../../files/content/fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../files/content/fonts/Roboto-Black-webfont.woff2') format('woff2'),
         url('../../files/content/fonts/Roboto-Black-webfont.woff') format('woff'),
         url('../../files/content/fonts/Roboto-Black-webfont.ttf') format('truetype'),
         url('../../files/content/fonts/Roboto-Black-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Trueno Black';
    font-style: normal;
    font-weight: normal;
    src: local('Trueno Black'), url('../../files/content/fonts/TruenoBlk.woff') format('woff');
    }
    


@charset "UTF-8";

/*
::::::::::  FARBEN :::::::::::
  hellblau: #7bbcba
  lindgrün: #aeca35;
  orange: #eb6500
  orangerot: d15d41;
  blau: #003C78;
  blaugrau: #667889;
  blaugrau20: #CCD2D8;
  text: #484847;
*/



html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: scroll;
}
*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    outline: none;
}

body {
	font-size: 100.01%;
	font-family: 'Roboto Regular', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #484847;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
	margin:0;
}
#header .inside {
    width: 100%;
    background-image: url("../../files/content/img/logo-fond/mobilfond-logo.png");
    background-repeat: no-repeat;
    background-size:40%;
    padding: 10px 10px 0 10px;
    background-color: #FFF;
  }

.bjke-logo {
    width: 50%;
    max-width: 200px;
    margin-left: 2%;
    margin-right: 1.5em;
}
.bjke h1 {
    font-family: 'Roboto Regular', Arial, sans-serif;
    font-size: 0.95em;
    line-height: 1.3;
    margin: 1em 0;
    color: #004480;
}

.custom {
    margin: 0;
    background-color: #FFF;
    padding: 1rem 0 0 0;
}
#main,
#right {
	width: 100%;
    padding: 1em 0.7em 0.7em 0.7em;
}

#right .ce_text {
    background-color: #CCC;
    background-color: rgba(105, 119, 133, .15);
    padding: 0.7em;
    margin-bottom: 0.5em;
}
footer {
	background-color: #697785;
	padding: 1em 10px;
}
footer h2 {
	margin-top: 0;
	color: #FFF;
	font-family: 'Roboto Black', Arial, sans-serif;
    font-weight: normal;
	font-size: 1em;
}
footer a {
	color: #FFF;
	text-decoration: none;
}
footer strong.active {
	color: #FFF;
	text-decoration: underline;
	font-weight: normal;
}
footer li,
footer h2 {
	margin-bottom: 0.7em;
    padding-bottom: 0.7em;
    border-bottom: 1px solid white;
}

/* ::::::::::  TYPOGRAPHIE ::::::::::: */
h2 {
	color: #1d4d82;
	font-size: 1.6em;
	margin: 0 0 0.5em 0;
    font-weight: normal;
}
h3 {
	color: #1d4d82;
	font-size: 1.4em;
	margin: 2em 0 0.5em 0;
}
h3:first-child {
    margin-top: 0;
}
h2 + h3 {
    margin-top: 1rem;
}
h4 {
    color: #1d4d82;
    font-size: 1.1em;
}
blockquote {
    background: url("../../files/content/img/icons/zitat.svg") top left no-repeat;
    padding-left: 10%;

}
blockquote p:last-of-type {
    padding-left: 0;
    margin-top: -0.5em; 
    color: #003C78;
}
.custom h2,
.custom p,
.custom .caption {
    padding: 0 2.5% 0.1em 2.5%;
}
.custom h2 {
    margin: 0;
    hyphens: none;
}
.custom h2 + .vorspann {
    margin-top: 0.5em;
}
.custom #full-width h2 + figure {
	margin-top: 1em;
}
#container p, 
#container li {
    font-size: 0.9em;
    line-height: 1.4;
}

#container ul li {
    padding-left: 1em;
}
#container ul li::before {
    font-size: larger;
    display: inline-block;
    margin-left: -1em;
    margin-right: 0.5em;
    content: "\25A0";
    color: #7bbcba;
}
.caption {
        padding-left: 2.5%;
        margin-top: 0.5em;
        font-size: small;
        line-height: 1.2;
        color: #666;
        text-align: right;
        margin-bottom: 1em;
}
.rk-projekt #container .caption {
        font-size: small;
    margin-top: 0;
}

.subpage-projekte #container ul li::before,
.subpage-rauskommen #container ul li::before{
    color: #d15d41;
}
.subpage-publikationen #container ul li::before {
    color: #d15d41;
}
.subpage-service #container ul li::before {
    color: #aeca35;
}

#right h3 {
    font-family: "Roboto Bold Condensed";
    font-weight: normal;
    margin-top: 0;
    color: #666;
}
#container a,
#container a:link,
#container a:visited {
    display: inline-block;
    color: #003C78;
    text-decoration: none;
    margin-left: 1em;
}
#container figure a,
#container figure a:link,
#container figure a:visited,
#container .bildlink a,
#container .bildlink a:link,
#container .bildlink a:visited{
    margin-left: 0;
}
#container a:hover,
#container a:focus {
    text-decoration: underline;
}
#container a::before,
#container a:link::before,
#container a:visited::before {
    content: "\25BA";
    display: inline-block;
    padding-right: 0.1em;
    font-stretch: ultra-condensed;
    opacity: 0.7;
    margin-left: -1em;
}
#container h3 a,
#container h3 a:link,
#container h3 a:visited {
    color: #1d4d82;
}

#container figure a::before,
#container figure a:link::before,
#container figure a:visited::before  {
    content: "";
    display: none;
}
figcaption {
    font-size: small;
    color: #666;
    margin: 0.3rem 0 1rem 0;
}
strong {
    font-family: "Roboto Bold", Arial, sans-serif;
    color: #555;
    letter-spacing: 0;
    font-weight: normal;

}
.vorspann {
    font-family: "Roboto Bold", Arial, sans-serif;
    font-size: larger;
    color: #555;
    line-height: 1.4;
}
.projekt-rot {
	color: #d15d41;
}
.deadline {
	display: inline-block;
	background-color:#d15d41;
	color: white;
	padding: 2px 5px;
	font-weight: 700;
}
.volle-breite {
    width: 100%;
}
/* ::::::::::  INTERAKTIVE ELEMENTE ::::::::::: */
.toggler {
    position: relative;
    margin-top: 0.5em;
}
#main .toggler h3,
#main .toggler h4 {
    padding: 0.5em 2em 0.5em 0.5em;
    border: 1px solid #667889;
    margin-top: 0;
    font-weight: normal;
    -webkit-hyphens: none;
    hyphens: none;
}
.ce_accordion h3:hover,
.ce_accordion h3:focus,
.ce_accordion h4:hover,
.ce_accordion h4:focus {
    text-decoration: underline;
    cursor: pointer;
}
.ce_accordion .ui-state-default h3::after,
.ce_accordion .ui-state-default h4::after {
    content: "\25BC";
    display: inline-block;
    position:absolute;
    right: 1em;
    color: #667889;
}
.ce_accordion .ui-state-active h3::after,
.ce_accordion .ui-state-active h4::after {
    content: "\25B2";
    display: inline-block;
    position:absolute;
    right: 1em;
    color: #667889;
}
/* Bildabstände */
figure.float_left {
	margin-right: 1em;
}
figure.float_above {
	margin-bottom: 1em;
}

/* ::::::::::  EINZELSEITEN SPEZIAL ::::::::::: */
/* Seite Vorstand */
.vorstand #main .ce_image {
    max-width: 330px;
    margin-bottom: 0.5em;
}
.vorstand h3 {
    margin-top: 1.5rem;
}
.drei-spalten .ce_text {
	border-top: 1px solid #CCC;
	margin-top: 1rem;
	padding-top: 2rem;
}
.drei-spalten .ce_text:first-of-type {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}
.projektuebersicht .ce_text {
	background-color: #CCC;
    background-color: rgba(102, 120, 137, 0.12);
    margin-bottom: 1em;
    padding: 1em;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::      TABLETS IM HOCHFORMAT      ::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media only screen and (min-width: 600px) {
    #header .inside {
        background-image: url("../../files/content/img/logo-fond/mobilfond-logo.png");
        background-repeat: no-repeat;
        background-size:28% 100px;
    }
    .bjke {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 1em;
    }
    .bjke-logo {
        margin-left: 0;
    }
    .bjke h1 {
        font-size: 1.05em;
        display: inline-block;
        margin: 1.5em 0 0 0;
    }
    footer .inside {
        display: flex;
        flex-wrap: wrap;
    }
/* ::::::::::  EINZELSEITEN SPEZIAL ::::::::::: */
    .alle-projekte #main .inside {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .alle-projekte #main .inside > .mod_article {
        width: 48.6%;
    }
    .alle-projekte #main .inside .mod_article.breite-100 {
        width: 100%;
    }
    .dreispalten h3 {
        margin-top: 0;
    }
    #container .dreispalten h3 a, 
    #container .dreispalten h3 a:link,
    #container .dreispalten h3 a:visited {
        display: inline;
    }
    .kacheln-grau .ce_text {
        background-color: rgba(102, 120, 137, 0.12);
        margin-bottom: 1em;
        padding: 1em;
        width: 48.5%;
    }
    .vor-kacheln-grau {
        margin-bottom: 2em;
    }
    #main .vor-kacheln-grau h3,
    #main .vor-kacheln-grau p {
        padding-left: 2.5%;
    }
    #main .flex-container h3.breite-100 {
        width: 100%;
        background-color: #FFF;
        padding-left: 1.8%;
    }
    #main .kacheln-grau h4 {
        padding-left: 0;
    }
    #main .kacheln-grau h4:first-child {
        margin-top: 0;
    }
    /* Vorstand */
    .vorstand #main h3,
    .vorstand #main p {
     margin-left: 0;
    }
    .vorstand .toggler {
        position: relative;
        margin-left: -5.6%;
    }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::              DESKTOP            ::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media only screen and (min-width: 800px) {
    
    body {
        background: url("../../files/content/img/logo-fond/pinselfond-body.jpg") no-repeat center -240px;
        background-size: cover;
    }
    
    #header {
        width: 100%;
        background-image: url("../../files/content/img/logo-fond/bjke-pinselfond-3000.png");
        background-repeat: no-repeat;
        background-position: center top;
        z-index: 5;
    }
    #header .inside {
        max-width: 1024px;
        min-height: 240px;
        margin: 0 auto;
        background-image: url("../../files/content/img/logo-fond/pinselfond-353.png");
        background-size:auto;
        padding: 10px 1.5% 1rem 1.5%;
    }
    .bjke-logo {
        width: 24.41%;
        margin-right: 10%;
        margin-left: 2%;
    }
    .bjke h1 {
        font-family: 'Roboto Light', Arial, sans-serif;
        font-size: 1.3em;
        letter-spacing: 0.1em;
    }
    .custom {
        max-width: 1024px;
        margin: 0 auto 0 auto;
        background-color: #FFF;
        padding-bottom: 1.5em;
    }
    #container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        max-width: 1024px;
        margin: 0 auto;
        background-color: #FFF;
        min-height: 500px;
        padding-left: 1.5%;
    }
    .custom + #container {
        padding-top: 0;
    }
    #main {
        width: 70%;
        padding: 0 0 2em 0;
    }
    .ohne-rechte-spalte #main {
        width: 100%;
        padding-right: 2%;
    }
    #right {
        width: 25.5%;
        float: none;
        margin:0;
        padding:0;
    }
    #right .ce_text {
        background-color: #CCC;
        background-color: rgba(105, 119, 133, .15);
        padding: 0.7em;
        margin-bottom: 1.5em;
        border: none;
    }
    .flex-container {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-rechts {
        justify-content: flex-end;
    }
    footer .inside {
        max-width: 1024px;
        margin: 0 auto 0 auto;
        justify-content: space-between;
    }
    footer strong.active {
	color: #FFF;
	text-decoration: underline;
	font-weight: normal;
    }
    footer li,
    footer h2 {
        padding: 0;
        border:none;
    }

/* ::::::::::  TYPOGRAPHIE ::::::::::: */
h2 {
	font-size: 2em;
}
p {
    font-size: 1em;
    line-height: 1.4;
}
.custom h2,
.custom p {
    padding-left: 2.5%;
    padding-bottom: 0.1em;
}
.custom h2 + .vorspann {
    margin-top: 0.5em;
}
h3 {
	color: #1d4d82;
	font-size: 1.4em;
	margin: 2em 0 0.5em 0;
}
h3:first-child {
    margin-top: 0;
}
.kleine-h3 h3 {
    font-size: 1.2em;
    margin-top: 0;
}
.toggler h3,
.toggler h4 {
    padding: 0.5em 0 0.5em 0;
    border: 1px solid #667889;
    margin-top:0.5em;
    font-weight: normal;
}
.ce_accordion h3:hover,
.ce_accordion h3:focus,
.ce_accordion h4:hover,
.ce_accordion h4:focus {
    text-decoration: underline;
    cursor: pointer;
}
.ce_accordion:first-of-type h3 {
    margin-top:1em;
}
.ce_accordion .ui-state-default h3::after,
.ce_accordion .ui-state-default h4::after {
    content: "\25BC";
    display: inline-block;
    position:absolute;
    right: 1em;
    color: #667889;
}
.ce_accordion .ui-state-active h3::after,
.ce_accordion .ui-state-active h4::after {
    content: "\25B2";
    display: inline-block;
    position:absolute;
    right: 1em;
    color: #667889;
}
h4 {
    color: #1d4d82;
    font-size: 1em;
    line-height: 1.2;
    font-weight: bold;
    margin-bottom: 0.5em;
}
#container p,
#container li {
    margin-top: 0.5em;
    margin-bottom: 0;
	line-height: 1.4em;
}
#container p.linie-unten {
    margin-bottom: 1em;
}
#container p.linie-oben {
    margin-top: 1em;
}
h2 + p,
#container .ce_text p:first-of-type {
	margin-top:0;
}
#container ul li {
    padding-left: 1em;
}
#container ul li::before {
    font-size: larger;
    display: inline-block;
    margin-left: -1em;
    margin-right: 0.5em;
    content: "\25A0";
    color: #7bbcba;
}
img[width="330"] + .caption {
	max-width: 330px;
}

#right .caption {
    padding:0;
    font-size: 13px;
}
#container a,
#container a:link,
#container a:visited {
    display: inline-block;
    color: #003C78;
    text-decoration: none;
    margin-left: 1em;
}
#container a:hover,
#container a:focus {
    text-decoration: underline;
}
#container a::before,
#container a:link::before,
#container a:visited::before {
    content: "\25BA";
    display: inline-block;
    padding-right: 0.1em;
    font-stretch: ultra-condensed;
    opacity: 0.7;
    margin-left: -1em;
}
#container h3 a,
#container h3 a:link,
#container h3 a:visited {
    color: #1d4d82;
}

#container figure a::before,
#container figure a:link::before,
#container figure a:visited::before,
#container .bildlink a::before,
#container .bildlink a:link::before,
#container .bildlink a:visited::before {
    content: "";
    display: none;
}
#main h3,
#main h4,
#main p,
#main ul,
#main ol {
	margin-left: 5.6%;
}
.custom .vorspann {
    width: 72%;
    margin-bottom: 0;
}

.linie-oben {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid #667889;
}
.linie-unten {
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottem: 1px solid #667889;
}
/* Typo für rechte Spalte */
#right {
    font-size: 90%;
}
.flex-container {
	display: flex;
	flex-wrap: wrap;
}
.space-between {
    justify-content: space-between;
}
.flex-container > div {
    width: 48.5%;
}
.flex-container > .volle-breite {
    width: 100%;
}
.drei-spalten > div {
    width: 31%;
}
.drei-spalten .ce_text {
	border-top: none;
	margin: 0;
	padding-top: 0;
}
#main .flex-container > div p,
#main .flex-container > div h3 {
    padding-left: 0;
    margin-left: 0;
}

.vorstand .flex-container .ce_headline {
    width: 100%;
    }
.vorstand .flex-container .ce_image {
    width: 34%;
    margin-left: 5.6%;
    margin-bottom: 1em;
}
.vorstand .flex-container .ce_image + div {
    width: 60%;
}

.flex-container .ce_image,
.flex-container h2 {
    width: 100%;
}
.rk-projekt #main h2 + h3 {
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 1.2em;
    padding-left: 0;
    color: #5b6670;
}
.rk-projekt #main h2 {
     line-height: 1.2;
    hyphens: none;
    }

.rk-projekt #main h3 a:link,
.rk-projekt #main h3 a:visited {
    color: #1d4d82;
}

.rk-projekt #main p:first-of-type {
    margin-top: 1.5em;
}
blockquote {
    background: url("../../files/content/img/icons/zitat.svg") top left no-repeat;
    padding-left: 4.6%;

}
blockquote p:last-of-type {
    padding-left: 0;
    margin-top: -1em; 
    color: #003C78;
}
.ce_accordion blockquote {
    padding-left: 6%;
    margin: 2em 0;
}
#main .projektuebersicht h3,
#main .projektuebersicht p {
    padding-left: 0;
}
.keine-trennung {
    hyphens: none;
}
.projekt-rot {
    color: #d15d41;
}
.margintop-1em {
    margin-top: 1em;
}
.kacheln-grau .ce_text {
    background-color: rgba(102, 120, 137, 0.12);
    margin-bottom: 1em;
    padding: 1em;
}
.vor-kacheln-grau {
    margin-bottom: 2em;
}
#main .vor-kacheln-grau h3,
#main .vor-kacheln-grau p {
    padding-left: 2.5%;
}
#main .flex-container h3.breite-100 {
    width: 100%;
    background-color: #FFF;
    padding-left: 1.8%;
}
#main .kacheln-grau h4 {
    padding-left: 0;
}
#main .kacheln-grau h4:first-child {
    margin-top:0;
}
}
/*
::::::::::  FARBEN :::::::::::
  hellblau: #7bbcba
  lindgrün: #aeca35;
  orange: #eb6500
  orangerot: d15d41;
  blau: #003C78;
  blaugrau: #667889;
  blaugrau20: #CCD2D8;
  text: #484847;
*/

#header .mod_customnav,
.subnavi,
#right nav {
    display: none;
}

#header nav ul {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
    margin-bottom:0;
}
#header nav ul ul {
	width: 100%;
	display: block;
	margin-top: 0;
	margin-bottom: 0;
}
   .beschreibung {
        display: none;
    }


@media only screen and (max-width: 599px) {
    
    .mainnavi > ul {
        justify-content: space-between;
    }
    .mainnavi li.der-bjke {
        width: 23%;
    }
    .mainnavi li.projekte {
        width: 22%;
    }
    .mainnavi li.publikationen {
        width: 33%;
    }
    .mainnavi li.service {
        width: 20%;
    }
    .mainnavi span.submenu {
        display: block;
        padding: 8px 1px;
        font-family: "Roboto Bold Condensed", Arial, sans-serif;
        text-align: center;
        color: white;
        background-color: #7bbcba;
    }
    .mainnavi span.submenu.projekte {
        background-color: #d15d41;
    }
    .mainnavi span.submenu.publikationen {
        background-color: #eb6500;
    }
    .mainnavi span.submenu.service {
        background-color: #aeca35;
    }
    .mainnavi li .level_2 {
        height: 0;
        width: 0;
        position: absolute;
        left: -3900px;
    }
    #header .mainnavi li:hover .level_2,
    #header .mainnavi li:focus .level_2 {
        position: absolute;
        left: 10px;
        height: auto;
        width: 94%;
        z-index: 1000;
        margin-top: 0;
    }
 
    .mainnavi .level_2 li a,
    .mainnavi .level_2 li span.active,
    .mainnavi .level_3 li a,
    .mainnavi .level_3 li span.active {
        display: block;
        width: 100%;
        padding: 8px;
        border-top: 2px solid white;
        text-decoration: none;
        color: white;
        }
    .mainnavi .level_3 li a,
    .mainnavi .level_3 li span.active {
        padding-left: 30px;
    }
    .mainnavi .der-bjke .level_2 li a,
    .mainnavi .der-bjke .level_2 li span.active {
        background-color: #7bbcba;
        background-color: rgba(123,188,186,0.9);
    }
    .mainnavi .projekte .level_2 li a,
    .mainnavi .projekte .level_2 li span.active {
        background-color: #d15d41;
        background-color: rgba(209,93,65,0.9);
        }
    .mainnavi .publikationen .level_2 li a,
    .mainnavi .publikationen .level_2 li span.active {
        background-color: #eb6500;
        background-color: rgba(235,101,0,0.9);
        }
    .mainnavi .service .level_2 li a,
    .mainnavi .service .level_2 li span.active {
        background-color: #aeca35;
        background-color: rgba(174,202,53,0.9);
    }
} 

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::      TABLETS IM HOCHFORMAT      ::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media only screen and (min-width: 600px) {
    
    #header .mainnavi .level_3 {
        display: none;
    }    
    #header nav ul {
        margin-top: 0;
    }
    .mainnavi ul.level_1 {
        justify-content: flex-end;
    }
    
    .mainnavi li.der-bjke,
    .mainnavi li.projekte,
    .mainnavi li.publikationen,
    .mainnavi li.service {
        width: auto;
        margin-right: 0;
        margin-left: 20px;
    }
    .mainnavi span.submenu {
        padding: 0;
    }
    .mainnavi .der-bjke span.nonavlink {
        height:84px;
        width: 84px;
        margin-top: 20px;
        margin-left: 0;
        display:block;
        text-indent: -3000px;
        background:url("../../files/content/img/navigation/navi-bjke.png") no-repeat top left;
        background-size: 100%;
    }
    #header .mod_navigation .der-bjke:hover span.nonavlink,
    #header .mod_navigation .der-bjke:focus span.nonavlink {
        height: 138px;
        background:url("../../files/content/img/navigation/navi-bjke.png") no-repeat top -138px left;
        background-size: 100%;
    }
    #header .mod_navigation .projekte span.nonavlink {
        height:124px;
        width: 124px;
        display:block;
        text-indent: -3000px;
        background:url("../../files/content/img/navigation/navi-projekte.png") no-repeat top left;
        background-size: 100%;
    }
    #header .mod_navigation .projekte:hover span.nonavlink,
    #header .mod_navigation .projekte:focus span.nonavlink {
        height: 158px;
        background:url("../../files/content/img/navigation/navi-projekte.png") no-repeat top -158px left;
        background-size: 100%;
    }
    #header .mod_navigation .publikationen span.nonavlink {
        height:96px;
        width: 96px;
        margin-top: 20px;
        display:block;
        text-indent: -3000px;
        background:url("../../files/content/img/navigation/navi-publikationen.png") no-repeat top left;
        background-size: 100%;
    }
    #header .mod_navigation .publikationen:hover span.nonavlink,
    #header .mod_navigation .publikationen:focus span.nonavlink {
        height: 138px;
        background:url("../../files/content/img/navigation/navi-publikationen.png") no-repeat top -138px left;
        background-size: 100%;
    }
    #header .mod_navigation .service span.nonavlink {
        height:84px;
        width: 84px;
        margin-top: 20px;
        display:block;
        text-indent: -3000px;
        background:url("../../files/content/img/navigation/navi-service.png") no-repeat top left;
        background-size: 100%;
    }
    #header .mod_navigation .service:hover span.nonavlink,
    #header .mod_navigation .service:focus span.nonavlink {
        height: 138px;
        background:url("../../files/content/img/navigation/navi-service.png") no-repeat top -138px left;
        background-size: 100%;
    }
    #header .mod_navigation .level_1,
    #header .mod_navigation .level_1 > li,
    #header .mod_navigation .level_1 > li a {
        z-index: 10;
    }
    .mainnavi .level_2 {
        height: 0;
        width: 0;
        position: absolute;
        left: -3900px;
    }
    #header .mod_navigation li:hover .level_2,
    #header .mod_navigation li:focus .level_2 {
        display: flex;
        flex-wrap: wrap;
        width: 95.61%;
        height: auto;
        position: absolute;
        left: 2.3%;
        background: url("../../files/content/img/logo-fond/bg-ul2.png");
        padding: 20px 20px 2px 20px;
        z-index: -1;
        margin-top: -10px;
    }
    #header .mod_navigation ul ul.level_2 li {
      display: block;
        width: 31%;
        min-height: 120px;
        padding: 10px;
        margin-right: 2%;
        margin-bottom: 1em;
        text-align: center;
        background-size: 100% 100%;
    }
    #header .mod_navigation .der-bjke ul.level_2 li:nth-of-type(4n+1) {
        background:url("../../files/content/img/navigation/menufond-bjke-01.png") no-repeat top left;
        background-size: 100% 100%;
     }
    #header .mod_navigation .der-bjke ul.level_2 li:nth-of-type(4n+2) {
        background:url("../../files/content/img/navigation/menufond-bjke-02.png") no-repeat top left;
        background-size: 100% 100%;
     }
    #header .mod_navigation .der-bjke ul.level_2 li:nth-of-type(4n+3) {
        background:url("../../files/content/img/navigation/menufond-bjke-03.png") no-repeat top left;
        background-size: 100% 100%;
     }
    #header .mod_navigation .der-bjke ul.level_2 li:nth-of-type(4n+4) {
        background:url("../../files/content/img/navigation/menufond-bjke-04.png") no-repeat top left;
        background-size: 100% 100%;
    }
    #header .mod_navigation .projekte ul.level_2 li:nth-of-type(4n+1) {
        background:url("../../files/content/img/navigation/menufond-projekte-01.png") no-repeat top left;
        background-size: 100% 100%;
    }
    #header .mod_navigation .projekte ul.level_2 li:nth-of-type(4n+2) {
        background:url("../../files/content/img/navigation/menufond-projekte-02.png") no-repeat top left;
        background-size: 100% 100%;
    }
    #header .mod_navigation .projekte ul.level_2 li:nth-of-type(4n+3) {
        background:url("../../files/content/img/navigation/menufond-projekte-03.png") no-repeat top left;
        background-size: 100% 100%;
    }
    #header .mod_navigation .projekte ul.level_2 li:nth-of-type(4n+4) {
      background:url("../../files/content/img/navigation/menufond-projekte-04.png") no-repeat top left;
      background-size: 100% 100%;
    }

    #header .mod_navigation .publikationen ul.level_2 li:nth-of-type(4n+1) {
      background:url("../../files/content/img/navigation/menufond-publikationen-01.png") no-repeat top left;
      background-size: 100% 100%;
    }
    #header .mod_navigation .publikationen ul.level_2 li:nth-of-type(4n+2) {
      background:url("../../files/content/img/navigation/menufond-publikationen-02.png") no-repeat top left;
      background-size: 100% 100%;
    }
    #header .mod_navigation .publikationen ul.level_2 li:nth-of-type(4n+3) {
      background:url("../../files/content/img/navigation/menufond-publikationen-03.png") no-repeat top left;
      background-size: 100% 100%;
    }
    #header .mod_navigation .publikationen ul.level_2 li:nth-of-type(4n+4) {
      background:url("../../files/content/img/navigation/menufond-publikationen-04.png") no-repeat top left;
      background-size: 100% 100%;
    }

    #header .mod_navigation .service ul.level_2 li:nth-of-type(4n+1) {
      background:url("../../files/content/img/navigation/menufond-service-01.png") no-repeat top left;
      background-size: 100% 100%;
    }
    #header .mod_navigation .service ul.level_2 li:nth-of-type(4n+2) {
      background:url("../../files/content/img/navigation/menufond-service-02.png") no-repeat top left;
      background-size: 100% 100%;
    }
    #header .mod_navigation .service ul.level_2 li:nth-of-type(4n+3) {
      background:url("../../files/content/img/navigation/menufond-service-03.png") no-repeat top left;
      background-size: 100% 100%;
    }
    #header .mod_navigation .service ul.level_2 li:nth-of-type(4n+4) {
      background:url("../../files/content/img/navigation/menufond-service-04.png") no-repeat top left;
      background-size: 100% 100%;
    }
    #header .mod_navigation ul ul.level_2 a,
    #header .mod_navigation ul ul.level_2 a:link,
    #header .mod_navigation ul ul.level_2 a:visited,
    #header .mod_navigation ul ul.level_2 span.active {
        margin: 0;
        text-indent: 0;
        background-image: none;
        display: block;
        width: 100%;
        color: #5b626d;
        text-decoration: none;
        font-family: 'Roboto Bold', Arial, sans-serif;
        hyphens: none;
        line-height: 1.3;
    }
    #header .mod_navigation ul ul.level_2 a:hover,
    #header .mod_navigation ul ul.level_2 a:focus {
        text-decoration: underline;
    }
    .beschreibung {
        font-family: 'Roboto Condensed', Arial, sans-serif;
        display: block;
        margin-top: 0.3em;
    }
    .mainnavi:hover + .mod_customnav + .subnavi {
        visibility: hidden;
    }
   
    #header .subnavi .level_1:hover .level_2,
    #header .subnavi .level_1:focus .level_2 {
        display: none;
    }
    
    /* --------- Stile für die Subnavigation im Header ---------- */

    .subnavi {
       display: block;
       width: 100%;
       text-align: left;
    }
    .subnavi br {
        display: none;
    }
    .subnavi ul {
        padding-left: 20px;
    }
    .subpage-bjke .subnavi ul {
        background: url("../../files/content/img/navigation/punkt-bjke.png") no-repeat top 0.5em left;
    }
    .subpage-projekte .subnavi ul,
    .subpage-rauskommen .subnavi ul,
    .subpage-fachtage .subnavi ul {
        background: url("../../files/content/img/navigation/punkt-projekte.png") no-repeat top 0.5em left;
    }
    .subpage-publikationen .subnavi ul {
        background: url("../../files/content/img/navigation/punkt-publikationen.png") no-repeat top 0.5em left;
    }
    .subpage-service .subnavi ul {
        background: url("../../files/content/img/navigation/punkt-service.png") no-repeat top 0.5em left;
    }
    .subnavi a,
    .subnavi strong.active {
        position: relative;
        display: inline-block;
        font-family: 'Roboto Bold Condensed', Arial, sans-serif;
        font-size: 1.25em;
        line-height: 180%;
        font-weight: normal;
        text-decoration: none;
        color: #999;
        margin-left: 24px;
    }
    .subnavi a:hover,
    .subnavi a:focus {
        color: #666;
    }
    .subnavi a::after,
    .subnavi strong.active::after {
        content:'';
        position:absolute;
        width: 100%;
        height: 0px;
        left:0;
        bottom: 0px;                    /* <- distance */
        border-bottom: 4px solid #CCC;
    }
    .subpage-bjke .subnavi strong.active::after {
        border-bottom: 4px solid #7bbcba;
        }
    .subpage-projekte .subnavi strong.active::after,
    .subpage-rauskommen .subnavi a.trail::after,
    .subpage-rauskommen .subnavi strong.active::after,
    .subpage-fachtage .subnavi a.trail::after,
    .subpage-fachtage .subnavi strong.active::after {
        border-bottom: 4px solid #d15d41;
    }
    .subpage-publikationen .subnavi strong.active::after {
        border-bottom: 4px solid #eb6500;
    }
    .subpage-service .subnavi strong.active::after {
        border-bottom: 4px solid #aeca35;
    }
    
    /* --------- Stile für die Subnavi Level 3 im Header ---------- */
    .level3 {
        margin-top:-20px;
    }
    .subnavi.level3 ul {
        background: none;
        border-top: 1px solid #CCC;
        border-bottom: 1px solid #CCC;
        padding: 0.5em 0 1em 0;
        margin: 1em 0 1em 44px;
    }    
    .subnavi.level3 a,
    .subnavi.level3 strong.active {
        font-size: 1em;
        line-height: 1.4;
        margin-left: 0;
        margin-right: 20px;
    }
    .subnavi.level3 a::after,
    .subnavi.level3 strong.active::after {
        bottom: -3px;                    /* <- distance */
    }

/* --------- Stile für die Navigation im Footer ---------- */

    footer .beschreibung,
.mod_customnav .beschreibung,
.subnavi .beschreibung {
  display: none;
}
    footer nav:first-of-type {
        order: 1;
        margin-right: 5%;
    }
    footer nav:nth-of-type(2) {
        order: 2;
        margin-right: 5%;
    }
    footer nav:nth-of-type(3) {
        order: 4;
        margin-right: 5%;  
        margin-top: 2em;
        min-width: 199px;
    }
    footer nav:nth-of-type(4) {
        order: 5;
        margin-top: 2em;
    }
    .meta-facebook {
        order: 3;
     }
footer a:hover,
footer a:focus {
  text-decoration: underline;
}
footer .facebook a:hover,
footer .facebook a:focus {
    filter:brightness(120%);
}
}


/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::              DESKTOP            ::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media only screen and (min-width: 800px) {
    #header .mod_customnav {
        display: block;
    }
    #header .subnavi .level_2,
    #header .subnavi.level3 {
        display: none;
    }

    .navi-container {
  padding-top: 40px;
}
#header nav ul {
	margin-top: 0;
}
#header .mod_navigation .level_3 {
	display: none;
}
#header .mod_navigation li,
    #header .mod_navigation li.der-bjke,
    #header .mod_navigation li.projekte,
    #header .mod_navigation li.publikationen,
    #header .mod_navigation li.service {
    margin-left: 0;
}

.navi-container a,
.navi-container strong.active,
span.nonavlink {
  margin-left: 16px;
}
#header .mod_navigation span.submenu {
    padding: 0;
}
#header .mod_navigation .level_1,
#header .mod_navigation .level_1 > li,
#header .mod_navigation .level_1 > li a {
  z-index: 10;
}
#header .mod_navigation .level_2 {
height: 0;
    width: 0;
  position: absolute;
    left: -3900px;
}
#header .mod_navigation li:hover .level_2,
#header .mod_navigation li:focus .level_2 {
  display: flex;
  flex-wrap: wrap;
  width: 95.61%;
    height: auto;
  position: absolute;
  left: 2.3%;
  background: url("../../files/content/img/logo-fond/bg-ul2.png");
  padding: 20px 20px 2px 20px;
  z-index: -1;
    margin-top: -10px;

 }

#header .mod_navigation ul ul.level_2 li {
  display: block;
    width: 18%;
    min-height: 120px;
    padding: 10px;
    margin-right: 2%;
    margin-bottom: 1em;
    text-align: center;
    background-size: 100% 100%;
}
#header .mod_navigation ul ul.level_2 a,
#header .mod_navigation ul ul.level_2 a:link,
#header .mod_navigation ul ul.level_2 a:visited,
#header .mod_navigation ul ul.level_2 span.active {
  margin: 0;
  text-indent: 0;
  background-image: none;
  display: block;
  width: 100%;
  color: #5b626d;
  text-decoration: none;
  font-family: 'Roboto Bold', Arial, sans-serif;
        hyphens: none;
    line-height: 1.3;
}
#header .mod_navigation ul ul.level_2 a:hover,
#header .mod_navigation ul ul.level_2 a:focus {
  text-decoration: underline;
}
.beschreibung {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  display: block;
  margin-top: 0.3em;
}


/* --------- Stile für die Sonderbuttons im Header ---------- */

    #header .mod_customnav .infodienst a,
    #header .mod_customnav .infodienst a:link,
    #header .mod_customnav .infodienst a:visited,
    #header .mod_customnav strong.infodienst {
        height:96px;
        width: 96px;
        margin-top: 20px;
        display:block;
        text-indent: -3000px;
        background:url("../../files/content/img/navigation/navi-infodienst.jpg") no-repeat top left;
        background-size: cover;
    }
    #header .mod_customnav .rauskommen a,
    #header .mod_customnav .rauskommen a:link,
    #header .mod_customnav .rauskommen a:visited,
    #header .mod_customnav strong.rauskommen {
        height:96px;
        width: 96px;
        margin-top: 20px;
        display:block;
        text-indent: -3000px;
        background:url("../../files/content/img/navigation/navi-rauskommen.png") no-repeat top left;
        background-size: contain;
    }
    #header .mod_customnav .joker a,
    #header .mod_customnav .joker a:link,
    #header .mod_customnav .joker a:visited,
    #header .mod_customnav strong.joker {
        height:84px;
        width: 84px;
        margin-top: 20px;
        display:block;
        text-indent: -3000px;
        background:url("../../files/content/img/navigation/navi-joker.png") no-repeat top left;
        background-size: contain;
    }
    #header .mod_customnav a:hover,
    #header .mod_customnav a:focus {
        filter:brightness(75%);
    }

/* --------- Stile für die Unternavigation in der rechten Spalte ---------- */
    
    .subpage-rauskommen #right nav,
    .rauskommen #right nav {
        background: url("../../files/content/img/navigation/rauskommen.png") no-repeat top center;
        background-size: contain;
        padding-top: 160px;
    }
    .fachforen #right nav {
        background: url("../../files/content/img/navigation/bundesfachforum.png") no-repeat top center;
        background-size: contain;
        padding-top: 120px;
    }
    #right nav {
        display: block;
        margin-bottom: 2rem;
    }
    #right nav ul {
        border: none;
        padding:0;
        margin:0;
    }
	/*#right nav li {
        padding: 0;
        border-bottom: 4px solid #CCC;
        margin-bottom: 0.3em;
    }
    #right nav li:hover,
    #right nav li:focus {
        color: #666;
    }
    #right nav li.active,
    #right nav li.trail {
        border-bottom-color: #d15d41;
    }*/
    #right nav a,
    #right nav a:link,
    #right nav a:visited,
    #right nav strong.active {
        font-family: 'Roboto Bold Condensed', Arial, sans-serif;
        font-weight: normal;
        font-size: 1.3em;
        color: #999;
        text-decoration: none;
        margin-left: 0;
        display: block;
        margin-bottom: 0.3em;
    }
    #right nav a:hover,
    #right nav a:focus {
        color: #666;
    }
    #right nav a:link::before {
        content: "";
        display: none;
    }
    #right nav ul li {
        padding-left: 0;
    }
    #right nav ul li::before {
        display: none;
    }
/* --------- Stile für Rauskommen Ausschreibung + Bewerbung ---------- */
    #right nav a.ausschreibung,
    #right nav a:link.ausschreibung,
    #right nav a:visited.aussschreibung,
    #right nav a.bewerbung,
    #right nav a:link.bewerbung,
    #right nav a:visited.bewerbung {
        padding: 5px;
        background-color: #d15d41;
        color: white;
    }
    #right nav strong.active.ausschreibung,
    #right nav strong.active.bewerbung {
        padding: 5px;
        background-color: #667889;
        color: white;
    }
    .subpage-rauskommen .subnavi a.ausschreibung::after,
    .subpage-rauskommen .subnavi a.bewerbung::after,
    .subpage-rauskommen .subnavi strong.active.ausschreibung::after,
    .subpage-rauskommen .subnavi strong.active.bewerbung::after {
        border-bottom: 0;
    }
    .subpage-rauskommen .subnavi a.bewerbung {
        background:url("../../files/content/img/icons/schloss.svg") no-repeat;
        background-size: 12px;
        background-position: left 5px center;
    }
    .subpage-rauskommen .subnavi a.bewerbung span {
        padding-left: 22px;
    }

    
/* --------- Stile für die Navigation im Footer ---------- */
    
    footer nav:first-of-type {
        order: 1;
        margin-right: 0;
    }
    footer nav:nth-of-type(2) {
        order: 2;
        margin-right: 0;
    }
    footer nav:nth-of-type(3) {
        order: 3;
        margin-right: 0;  
        margin-top: 0;
        min-width: 0;
    }
    footer nav:nth-of-type(4) {
        order: 4;
        margin-top: 0;
    }
    .meta-facebook {
        order: 5;
     }
}
/* --------- Stile für Jokerbutton im Header ---------- */
#jokerbutton {
    display: flex;
    color: white;
    background-color: #667889;
    font-family: 'Trueno Black', sans-serif;
    font-size: 16pt;
    height: 84px;
    width: 84px;
}
#jokerbutton p {
    width: 84px;
    margin: 0;
    padding: 0;
    line-height: 100%;
    text-align: center;
}

@charset "UTF-8";

/*
::::::::::  FARBEN :::::::::::
  hellblau: #7bbcba
  lindgrün: #aeca35;
  orange: #eb6500
  orangerot: d15d41;
  blau: #003C78;
  blaugrau: #667889;
  blaugrau20: #CCD2D8;
  text: #484847;
*/

.vorspann {
    font-family: "Roboto Bold", Arial, sans-serif;
    font-size: larger;
    color: #555;
}

.projekt-rot {
    color: #d15d41;
}
.kein-wortumbruch {
	white-space: nowrap;
}
.keine-absatztrennung {
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}
.linie-oben {
    border-top: 1px solid #CCC;
    padding-top: 1em;
    margin-top: 1em;
}
.linie-unten {
    border-bottom: 1px solid #CCC;
    padding-bottom: 1em;
    margin-bottom: 1em;
}
.abstand-oben-1em {
    margin-top: 1em;
}
.abstand-oben-2em {
    margin-top: 2em;
}
/* Gestaltung Registrierung und Login */
.mod_registration,
.mod_login {
    margin-left: 5.4%;
}
#right .mod_login {
    margin-left: 0;
}
#right .mod_login.logout form {
    border: 2px solid #d15d41;
}
#right .mod_login.logout form {
    border: 2px solid #d15d41;
}
#main .mod_login p.login_info {
    padding-left: 0;
    font-size: 1rem;
}    
#right .mod_login p.login_info {
    font-size: 14px;
}
#right .ce_text.passwort-vergessen{
    background: none;
    padding: 0;
}
form {
    margin-top:1rem;
    padding:2%;
    background-color: rgba(105, 119, 133, .15);
    font-size:.8rem;
}
.mod_login .widget-checkbox {
    margin-top: 0.5em;
}   
.mod_registration .fields {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.mod_registration .fields div:first-of-type {
    width: 100%;
}
.mod_registration .fields div {
    width: 49%;
    margin-bottom: 1rem;
}
.mod_registration input.password {
    padding: 3px;
}
form label {
    display: block;
    margin-bottom: 0.2rem;
}
p.error {
	background-color: red;
	color: white;
	padding: 5px;
	font-weight: 700;
}
form textarea {
    width:100%;
    border:none;
}
label.asterisk span.mandatory,
.asterisk span.mandatory {
    display: none;
}
label.asterisk .ce_text,
.asterisk legend .ce_text {
    display: inline;
}
label.asterisk .ce_text,
.asterisk legend .ce_text {
    display: inline;
}
#main label.asterisk .ce_text p {
    padding-left:0;
    margin-top: 0.2em;
}
#main label .ce_text ul,
#main label .ce_text ul + p,
#main label .ce_text li,
#main label .ce_text p {
    margin: 0;
}
label.asterisk .ce_text::before,
.asterisk legend .ce_text::before {
    content: '*';
    display: inline;
}
.ce_form fieldset.keinabstandoben legend {
    margin-top:0;
}

/* Standard-Stile für Input-Felder entfernen */
form input,
.upload-preview button,
form input.upload {
    width:100%;
    border-radius:0;
    font-size:1em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border:none;
}

/* Für IE8 */
form input.checkbox,
form input.radio {
    width:auto;
    float:left;
    margin-right:.75rem;
    border:0;
    background: transparent;
}
form input.checkbox:checked,
form input.checkbox:not(:checked),
form input.radio:checked,
form input.radio:not(:checked) {
    position:relative;
    margin:0;
    padding:0;
    background: transparent;
    visibility: hidden;
}
form input.checkbox + label,
form input.radio + label {
    cursor: pointer;
}
form input.checkbox:checked + label::before,
form input.checkbox:not(:checked) + label::before,
form input.radio:checked + label::before,
form input.radio:not(:checked) + label::before {
    width:17px;
    height:17px;
    top:4px;
    position:relative;
    display:inline-block;
    margin-right:.5em;
    border:1px solid rgba(105, 119, 133, .7);
    content:' ';
    background: white;
}
form input.radio:checked + label::before,
form input.radio:not(:checked) + label::before {
    border-radius:30px;
}
form input.checkbox:hover  + label::before,
form input.radio:hover  + label::before {
    background:#ddd;
    box-shadow: inset 0 0 0 3px white;
}
form input.checkbox:checked  + label::before,
form input.radio:checked  + label::before {
    background:#4689B8;
    box-shadow: inset 0 0 0 3px white;
}

/* Gestaltung Absende-Button */
form button.submit,
form button[type='submit'] {
    width:32%;
    margin-top:1rem;
    padding:5px;
    background-color:#FFF;
    border: 1px solid rgba(105, 119, 133, .7);
    font-weight:normal;
    cursor: pointer;
    color: #484848;
}
form button.submit:hover,
form button.submit:focus {
    background-color: rgba(105, 119, 133, .1);
    box-shadow: inset 0 0 0 4px white
}
/* Gestaltung Final-Button */
.ctlg_form .submit_container:last-of-type button {
    color: white;
    background: #d15d41;
    font-weight: 700;
}
.ctlg_form .submit_container:last-of-type button:hover,
.ctlg_form .submit_container:last-of-type button:focus {
    box-shadow: inset 0 0 0 4px white;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::      CATALOG MANAGER      :::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/* Standardeinstellungen für Formular, Links und Listen zurücksetzen */
.mod_catalogUniversalView form {
    background-color: transparent;
    padding:0;
    margin-top: 0;
}
#main .mod_catalogUniversalView p,
#main .mod_catalogUniversalView ul,
#container ul li {
    padding-left: 0;
}
#main .mod_catalogUniversalView p {
    margin: 0 0 1em 0;
}
#container .mod_catalogUniversalView ul li::before {
    content: none;
    margin:0;
}
#container .mod_catalogUniversalView a, 
#container mod_catalogUniversalView a:link, 
#container mod_catalogUniversalView a:visited {
    margin-left: 0;
}
#container .mod_catalogUniversalView a::before, 
#container mod_catalogUniversalView a:link::before, 
#container mod_catalogUniversalView a:visited::before {
    content: none;
}

/* Projektnummer ausblenden für Bearbeitung */
.widget-text.projektnummer {
	width: 0;
	height: 0;
	visibility: hidden;
}

/* Allgemeine Einstellungen */
.mod_catalogUniversalView {
    margin-top:1rem;
    padding:2%;
    background-color: rgba(105, 119, 133, .15);
}
/* Einstellungen für Mehrspaltigkeit */
.mod_catalogUniversalView .fields_container,
.mod_catalogUniversalView .ctlg_entities {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.mod_catalogUniversalView .widget.einspaltig,
.ctlg_entity {
    width: 100%;
}
.mod_catalogUniversalView .widget.zweispaltig,
.ctlg_entity.vorname,
.ctlg_entity.nachname,
.ctlg_entity.email {
    width: 49%;
}
.mod_catalogUniversalView .widget.zweispaltig-halb,
.ctlg_entity.vorwahl,
.ctlg_entity.fon {
    width: 23.5%;
}
.mod_catalogUniversalView .widget.dreispaltig,
.ctlg_entity.website,
.ctlg_entity.traegerform,
.ctlg_entity.mitgliedschaft,
.ctlg_entity.durchfuehrungszeitraum,
.ctlg_entity.projektdauer,
.ctlg_entity.kooperationspartner {
    width: 32%;
}
.mod_catalogUniversalView .widget.dreispaltig-zwei {
    width: 66%;
}
.mod_catalogUniversalView .widget.fuenfspaltig,
.ctlg_entity.projektfoto_1,
.ctlg_entity.projektfoto_2,
.ctlg_entity.projektfoto_3,
.ctlg_entity.projektfoto_4, 
.ctlg_entity.projektfoto_5 {
    width: 19.2%;
}
.mod_catalogUniversalView .widget.einrichtung,
.ctlg_entity.einrichtung {
    width: 71%;
}
.ctlg_entity.bundesland {
    width: 27%;
}
.mod_catalogUniversalView .widget.explanation {
    width: 100%;
    margin-bottom: 0;
    font-size: 14px;
    margin-top: 1em;
}
.mod_catalogUniversalView .widget.prozent-41,
.ctlg_entity.strasse,
.ctlg_entity.ort,
.ctlg_entity.durchfuehrungsort {
    width: 41%;
}
.mod_catalogUniversalView .widget.prozent-19,
.ctlg_entity.anzahl, 
.ctlg_entity.alter {
    width: 19.5%;
}

.mod_catalogUniversalView .widget.prozent-14,
.ctlg_entity.autor,
.ctlg_entity.plz,
.ctlg_entity.einwohnerzahl {
    width: 14%;
}
.mod_catalogUniversalView .widget.projekttitel,
.ctlg_entity.projekttitel {
    width: 84%;
}

input#ctrl_id_projekttitel {
    font-weight: 700;
}

.ctlg_entity {
    margin-bottom: 1em;
}
.ctlg_entity_name {
    font-size: 0.75em;
}
.ctlg_entity_value {
    background-color: white;
    padding: 5px;
    margin-top: 0.2em;
    font-size: 0.9em;
    line-height: 1.2;
}

#main ul.operations {
    -webkit-display: flex;
    display: flex;
    margin-left: 0;
}
.new-operator,
ul.operations li {
    background-color:  white;
    border: 1px solid rgba(105, 119, 133, .7);
    margin-right: 1em;
    width: 140px;
    padding: 1px 5px 4px 5px;
    line-height: 1;
}
.ctlg_operation_icon,
.new-icon {
    display: inline-block;
    margin-left: 5px;
    margin-right: 2px;
    transform:translateY(3px);
}
.mod_catalogUniversalView .widget {
    margin-bottom: 1em;
}
.ctlg_entity.projektbilder,
.ctlg_entity.bildrechte_zusatz,
.ctlg_entity.zusatzmaterial,
.ctlg_entity.datenschutz_zusatz,
.ctlg_entity.achtung {
    display: none;
}
/* Bildrechte und Datenschutz anders belegen*/
.ctlg_entity.bildrechte,
.ctlg_entity.datenschutz {
    }
.ctlg_entity.bildrechte .ctlg_entity_value,
.ctlg_entity.datenschutz .ctlg_entity_value,
.ctlg_entity.final .ctlg_entity_value {
    display: none;
}
.ctlg_entity.bildrechte .ctlg_entity_name::after,
.ctlg_entity.datenschutz .ctlg_entity_name::after,
.ctlg_entity.final .ctlg_entity_name::after {
    background-color: white;
    padding: 5px;
    display: block;
    margin-top: 0.2em;
    font-size: larger;
    line-height: 1.2;
}
.ctlg_entity.bildrechte .ctlg_entity_name::after {
    content: "Alle ggf. auf dem Foto abgebildeten Personen und deren Erziehungsberechtigte sowie der*die Fotograf*in sind mit der Veröffentlichung dieses Fotos auf der Website des BJKE einverstanden. Entsprechende Erklärungen liegen vor.";
}
.ctlg_entity.datenschutz .ctlg_entity_name::after {
    content: "Die Datenschutzhinweise und Teilnahmebedingungen habe ich gelesen und erkläre mich damit einverstanden.";
}
.ctlg_entity.final .ctlg_entity_name::after {
    content: "Die Bewerbung ist abgeschlossen.";
    font-weight: 700;
    color: #d15d41;
}


/* Stile Eingabe und Uploads */
.widget input,
.widget-textarea textarea {
    padding: 3px;
}
.widget-upload {
    background-color: white;
}
.widget-upload label {
    background-color: rgba(105, 119, 133, .15);
    padding-bottom: 0.3em;
}
.upload-preview button {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow:none;
    border: 1px solid rgba(105, 119, 133, .7);
    width: 116px;
    color: #484848;
    text-align: left;
    background-image: url(../../files/content/img/icons/delete.svg);
    background-repeat: no-repeat;
    background-position: top 2px left 3px;
    background-size: 13%;
    padding-left: 25px;
    margin-top: 0.5em;
}
.upload-preview button,
.upload-preview input {
    margin: 5px;
}
#ctrl_id_projektbild {
	padding-left: 0;
	color: #484848;
}
#ctrl_id_projektbild input {
	color: #484848;
}
fieldset#ctrl_id_bildrechte legend,
fieldset#ctrl_id_datenschutz legend,
.ctlg_entity.projektfoto_zusatz {
    display: none;
}
.mod_catalogUniversalView .widget-checkbox + .widget-message {
    width: 96%;
    padding-top: 0.2em;
    margin-top:0;
}
#main .mod_catalogUniversalView .widget-checkbox + .widget-message p:first-of-type {
    margin-bottom: 0;
}
#main .ctlg_teaser h3 {
    margin: 1em 0;
}
.abstandoben-1em {
    margin-top: 1em;
}
.abstandunten-1em {
    margin-bottom: 1em;
}
textarea.abstandoben-1em {
    margin-top:0;
}
label.abstandunten-1em {
    margin-bottom: 0;
}
.bold label {
    font-weight: 700;
}
form .pflicht input.checkbox:checked + label::before,
form .pflicht input.checkbox:not(:checked) + label::before {
	border: 2px solid #d15d41;
}

p.pflicht {
	border: 2px solid #d15d41;
	background-color: white;
	padding: 5px 10px !important;
	margin-bottom: 2em;
	}
p.pflicht strong {
    color: #d15d41;
    font-weight: bold;
}
label.mandatory,
p.text-rot strong {
    color: #d15d41;
}
.widget-checkbox.pflicht,
p.pflicht {
	margin-top: 1em !important;
}
.cookiebar {
    background-color:white;
}
.cookiebar button {
    padding-top:.1em;
    padding-bottom:.2em;
    text-align:center;
    background-color:#FFF;
    border:1px solid #FFF;
    border-radius:5px;
    font-weight:normal;
    color:#999;
}
.cookiebar button:hover {
    background-color:#FFF;
    border:1px solid #FFEC8F;
    color:#4689B8;
}