@charset 'utf-8';
/* @import url(screen20.css); *//*

╔════════╗  EUROPÄISCHE
║  ╔══╗  ║  JUGENDBILDUNGS &
║  ║ ═╝  ║
║  ╚═════╝  BEGEGNUNGSSTÄTTE
╚═════════  WEIMAR

*//* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}html{overflow-y:scroll}body{background-color:#fff}b,strong{font-weight:700}em,i{font-style:italic}h1,h2,h3,h4,h5,h6{font-weight:400}.ie7 address{font-style:normal}.hideme{position:absolute;left:-999em;top:-999em}button,input[type=button],input[type=submit],label{cursor:pointer}q:lang(de){quotes:'„' '“' '‚' '‘'}q:lang(en){quotes:'“' '”' "‘" "’"}abbr[title]{border-bottom:1px dotted #888!important;cursor:help}a abbr{cursor:pointer!important}.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden}* html .clearfix{height:1%}.clearfix{display:block}img{-ms-interpolation-mode:bicubic}


@font-face {
font-family: 'Source Sans Pro';
src: url('../fonts/sourcesanspro-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Source Sans Pro';
src: url('../fonts/sourcesanspro-semibold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'Source Sans Pro';
src: url('../fonts/sourcesanspro-it.woff2') format('woff2');
font-weight: normal;
font-style: italic;
}

@font-face {
font-family: 'Icons';
src: url('../fonts/fontawesome.woff') format('woff');
font-weight: normal;
font-style: normal;
}

a,
span.dok,
div.text ul.veranstaltungen > li,
div.text ul.veranstaltungen > li > a *,
button,
blockquote a:after {
transition: color 250ms ease-in, background 250ms ease-in, box-shadow 500ms ease-out, border 500ms ease-out;
}

form.anmeldung input {
transition: all 250ms ease-in;
}

::-moz-selection {
background: rgb(255,240,0);
color: black;
}

::selection {
background: rgb(255,240,0);
color: black;
}

img {
-moz-user-select: text;
-webkit-user-select: text;
user-select: text;
-moz-user-drag: none;
-webkit-user-drag: none;
user-drag: none;
}

.klar {
clear: both;
}

body,
button,
.knopf {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: none;
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 4;
-ms-hyphenate-limit-chars: 8 4 4;
hyphenate-limit-chars: 8 4 4;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphenate-limit-lines: 4;
hyphenate-limit-lines: 4;
}

body,
button,
.knopf,
input,
select,
option,
textarea {
font-family: 'Source Sans Pro';
font-size: 15px;
line-height: 22px;
box-decoration-break: clone;
}

div.text p,
footer p {
margin: 0 0 11px 0;
}

div.text p.datum {
display: inline-block;
padding: 2px 6px;
margin-right: 8px;
background: rgba(0,150,160,0.2);
}

p.typ {
font-style: italic;
}

div.text a,
aside ul.ansprechpartner li a {
color: black;
border-bottom: 1px solid rgba(255,240,0,0.5);
box-shadow: inset 0 -6px 0 rgba(255,240,0,0.5);
}

div.text a:hover,
aside ul.ansprechpartner li a:hover {
border-bottom: 1px solid rgba(255,240,0,0.8);
box-shadow: inset 0 -22px 0 rgba(255,240,0,0.8);
padding: 0 4px;
margin: 0 -4px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}

div.text div.anmeldung a:hover {
padding: 0;
margin: 0;
}

hr {
background: rgb(64,176,184);
border: none;
height: 1px;
margin: 16px 0;
}

div.text ul {
margin: 0 0 6px 0;
}

div.text > ul > li {
padding-left: 12px;
text-indent: -12px;
margin: 0 0 6px 0;
}

div.text ul.veranstaltungen {
padding-top: 16px;
}

div.text ul.team li,
div.text ul.ansprechpartner li {
padding-left: 0;
text-indent: 0;
margin: 0 0 12px 0;
}

div.text ul.katnav {
margin: 8px 0 -2px 0;
}

div.text ul.katnav li {
display: inline-block;
padding: 0;
text-indent: 0;
margin: 0 0 8px 0;
}

div.text ul.veranstaltungen > li,
div.text ul.publikationen > li {
text-indent: 0;
padding: 0;
margin: 0;
border-top: 1px solid rgb(64,176,184);
}

div.text ul.veranstaltungen > li:hover,
div.text ul.veranstaltungen > li:hover + li {
border-color: white;
}

div.text ul.publikationen > li:target {
margin: 0 -16px;
padding: 0 16px;
background: rgba(0,150,160,0.1);
}

div.text ul.publikationen > li:target + li {
margin: 0 -16px;
padding: 0 16px;
}

div.text ul.team li + li {
padding-top: 12px;
border-top: 1px solid rgba(64,176,184,.5);
}

div.text ul.veranstaltungen > li > a {
position: relative;
display: block;
box-shadow: none;
border: none;
padding: 12px 48px 8px 16px;
margin: 0 -16px;
}

div.text ul.veranstaltungen > li > a h3 {
margin-top: 0;
}

div.text ul.veranstaltungen > li > a:hover,
ul.publikationen button:hover {
border: none;
background: rgba(255,240,0,0.8);
box-shadow: 4px 4px 0 rgba(0,0,0,.1);
}

div.text ul.veranstaltungen > li > a:after {
display: block;
position: absolute;
top: 50%;
top: calc(50% - 16px);
right: 16px;
font-family: 'Icons';
font-size: 32px;
line-height: 32px;
content: '';
color: rgb(0,150,160);
}

div.text ul.veranstaltungen > li > a:hover:after {
color: rgb(64,51,47);
}

div.text ul.veranstaltungen > li > a:hover h3 {
color: rgb(64,51,47);
}

div.text ul.veranstaltungen > li > a:hover p.datum {
color: rgb(64,51,47);
background: rgba(64,51,47,.2);
}

div.text img {
max-width: 100%;
}

div.text a img {
vertical-align: top;
}

img.naw {
width: 192px;
}

div.kat {
margin-top: 32px;
}

div.text div.kat > h3:before {
font-family: 'Icons';
content: ' ';
}

h2#pressemitteilung:before {
font-family: 'Icons';
font-size: 20px;
content: ' ';
}

h2#medienecho:before {
font-family: 'Icons';
font-size: 20px;
content: ' ';
}

h2#jahresberichte:before {
font-family: 'Icons';
font-size: 20px;
content: ' ';
}

ul.publikationen button,
ul.katnav li button {
border: none;
background: rgba(0,150,160,0.2);
color: rgb(0,150,160);
padding: 2px 6px 2px 6px;
margin: 0 0 12px 0;
}

ul.katnav li button {
margin: 0;
}

ul.katnav li button.aktiv {
background: rgb(0,150,160);
color: white;
}

ul.publikationen button:hover,
ul.katnav button:hover {
color: rgb(64,51,47);
}

ul.publikationen button:after {
content: '';
font-family: 'Icons';
margin: 0 0 0 8px;
}

ul.publikationen button.offen:after {
content: '';
}

article.team h3 {
padding-bottom: 8px;
border-bottom: 1px solid rgb(64,176,184);
}

div.text ul:not(.objekt) li:before {
content: '› ';
display: block;
float: left;
width: 12px;
color: black;
}

div.text ul.team li:before,
div.text ul.veranstaltungen li:before,
div.text ul.ansprechpartner li:before,
div.text ul.downloads li:before,
div.text ul.publikationen li:before,
div.text ul.katnav li:before,
div.text ul.objekt li:before {
content: '';
}

div.text ol {
list-style-type: decimal;
list-style-position: inside;
margin: 0 0 11px 0;
}

div.text ol li {
margin: 0 0 6px 0;
}

div.text h2,
div.voll h2 {
font-size: 24px;
line-height: 32px;
font-weight: bold;
margin: 0 0 11px 0;
color: rgb(0,150,160);
}

.mfj div.text h2,
.mfj div.voll h2 {
color: rgb(0,150,220);
}

div.text * + h2 {
margin: 22px 0 11px 0;
}

div.text h2.ul,
div.voll h2.ul {
border-bottom: 1px solid rgb(0,150,160);
padding: 0 0 8px 0;
}

div.text h3 {
font-size: 20px;
line-height: 26px;
font-weight: bold;
margin: 0 0 12px 0;
color: rgb(0,150,160);
}

div.text.nix h3 {
margin-top: 16px;
}

.mfj div.text h3,
.mfj div.text h3 a {
color: rgb(0,150,220);
}

div.text * + h3 {
margin: 22px 0 11px 0;
}

div.text h3 a {
color: rgb(0,150,160);
box-shadow: none;
border-bottom: none;
}

div.text h3 a:hover {
border-bottom: none;
}

div.text h4 {
font-weight: bold;
margin: 11px 0 6px 0;
}

div.text form.anmeldung h4 {
text-transform: uppercase;
letter-spacing: .1em;
padding-bottom: 4px;
border-bottom: 1px solid rgba(0,150,160,.4);
margin-bottom: 12px;
}

div.block,
fieldset.block {
background: rgba(0,150,160,0.08);
padding: 10px 10px 10px 16px;
margin-top: 6px;
display: inline-block;
}

fieldset.block {
display: inline-block;
padding: 16px 8px 16px 16px;
}

fieldset.block.submit {
display: block;
}

aside div.block {
margin: 0 0 24px 0;
padding: 10px 3px 10px 10px;
}

div.block.formular {
margin-top: 24px;
}

fieldset.block.submit {
text-align: center;
margin-bottom: 0;
background: rgb(255,240,0);
}

div.text div.block a.knopf {
margin-bottom: 8px;
}

div.text div.block a.knopf:first-child {
margin-top: 8px;
}

ul.publikationen {
padding-bottom: 16px;
}

ul.publikationen li p.autoren {
margin: 11px 0 0 0;
}

ul.publikationen li h4 {
font-size: 17px;
line-height: 24px;
color: rgb(0,150,160);
}

ul.publikationen li p.autoren + h4 {
margin-top: 0;
}

ul.publikationen li h5 {
color: black;
margin: -3px 0 6px 0;
}

ul.publikationen li div.kurztext * {
color: rgba(64,51,47,0.5);
}

div.text h3 + h4 {
margin-top: -8px;
}

div.text h5 {
font-style: italic;
color: rgb(0,150,160);
margin: 1em 0 .25em 0;
}

div.text h6 {
font-style: italic;
color: black;
margin: 1em 0 0 0;
}

.mfj div.text h5,
.mfj article aside h6 {
color: rgb(0,150,220);
}

article aside h6 {
font-style: italic;
color: rgb(0,150,160);
}

fieldset h5 {
margin: 0 0 .5em 0;
}

section.cookiebanner {
padding: 10px 16px 0 16px;
margin: 0 auto;
max-width: 640px;
}

section.cookiebanner form {
float: right;
}

section.cookiebanner form input.knopf {
margin: 8px 0 8px 8px; 
}

header {
position: relative;
}

header div.logo {
background: rgb(0,150,160);
color: white;
padding: 32px 40px 16px 40px;
}

.mfj header div.logo {
display: flex;
flex-flow: row nowrap;
background: rgb(0,150,220);
}

.mfj header div.logo h1 {
order: 2;
}

.mfj header div.logo h2 {
font-weight: bold;
font-size: 24px;
line-height: 28px;
padding: 0 2em 0 0;
margin: 0 auto 0 0;
order: 1;
}

header div.logo h1 a {
display: block;
font-size: 0;
line-height: 0;
color: transparent;
width: 256px;
height: 104px;
background-image: url('../img/ejbw.svg');
background-repeat: no-repeat;
background-size: 100% 100%;
}

/* Slideshow */

img.kopf,
ul.kopffader {
display: block;
width: 100%;
height: auto;
}

ul.kopffader {
position: relative;
display: block;
background: rgb(0,130,140);
}

article.start ul.slider li,
ul.kopffader li {
line-height: 0;
}

ul.kopffader li {
width: 100%;
}

ul.kopffader li img.kopf {
margin: 0;
}

ul.kopffader li + li {
position: absolute;
top: 0;
}

/* Karte */
#map {
width: 100%;
height: 400px;
/* height: 26.5vw; */
height: calc(100vw / 1104 * 296);
min-height: 256px;
}

#map .leaflet-bar,
#map .leaflet-bar a:first-child,
#map .leaflet-bar a:last-child {
box-shadow: none;
border-radius: 0;
background: white;
}

#map .leaflet-bar a {
color: white;
background: rgb(0,130,140);
border-bottom: none;
}

#map.leaflet-container a {
color: rgb(0,130,140);
}

header svg.triangel {
position: absolute;
top: 152px;
left: 0;
right: 0;
width: 100%;
height: 120px;
z-index: 1000;
}

svg.triangel #kopfkante {
fill: rgb(0,150,160);
}

.mfj svg.triangel #kopfkante {
fill: rgb(0,150,220);
}

svg.triangel #farbe100 {fill: rgb(0,130,140);}
svg.triangel #farbe66 {fill: rgba(0,150,160,0.6);}
svg.triangel #farbe33 {fill: rgba(0,150,160,0.3);}

.magenta svg.triangel:hover #farbe100,
.magenta svg.triangel.aktiv #farbe100 {fill: rgb(200,0,130);}
.magenta svg.triangel:hover #farbe66,
.magenta svg.triangel.aktiv #farbe66 {fill: rgba(200,0,130,0.6);}
.magenta svg.triangel:hover #farbe33,
.magenta svg.triangel.aktiv #farbe33 {fill: rgba(200,0,130,0.3);}

.gelb svg.triangel:hover #farbe100,
.gelb svg.triangel.aktiv #farbe100 {fill: rgb(255,240,0);}
.gelb svg.triangel:hover #farbe66,
.gelb svg.triangel.aktiv #farbe66 {fill: rgba(255,240,0,0.6);}
.gelb svg.triangel:hover #farbe33,
.gelb svg.triangel.aktiv #farbe33 {fill: rgba(255,240,0,0.3);}

.cyan svg.triangel:hover #farbe100,
.cyan svg.triangel.aktiv #farbe100 {fill: rgb(0,150,220);}
.cyan svg.triangel:hover #farbe66,
.cyan svg.triangel.aktiv #farbe66 {fill: rgba(0,150,220,0.6);}
.cyan svg.triangel:hover #farbe33,
.cyan svg.triangel.aktiv #farbe33 {fill: rgba(0,150,220,0.3);}


svg.triangel #farbe33 {
-webkit-transition: fill 400ms ease-out;
-moz-transition: fill 400ms ease-out;
transition: fill 400ms ease-out;
}

svg.triangel #farbe66 {
-webkit-transition: fill 800ms ease-out;
-moz-transition: fill 800ms ease-out;
transition: fill 800ms ease-out;
}

svg.triangel #farbe100 {
-webkit-transition: fill 1200ms ease-out;
-moz-transition: fill 1200ms ease-out;
transition: fill 1200ms ease-out;
}

header nav {
background: rgb(233,231,231);
padding: 16px 40px 8px 40px;
}

header nav ul.lang {
float: right;
margin-left: 12px;
}

header nav ul li {
display: inline-block;
vertical-align: top;
font-weight: bold;
font-size: 18px;
line-height: 24px;
}

header nav ul li a {
display: block;
margin: 0 8px 8px 0;
padding: 3px 8px 4px 8px;
color: rgb(0,130,140);
background: white;
}

.mfj header nav ul li a {
color: rgb(0,150,220);
}

header nav ul li.aktiv a {
color: white;
background: rgb(0,150,160);
}

.mfj header nav ul li.aktiv a {
background: rgb(0,150,220);
}

header nav ul li a:hover,
ul.downloads li a:hover span.dok,
footer div ul.sozial li a:hover,
ul.pagination li a:hover,
.knopf:hover,
div.text a.knopf:hover,
#map .leaflet-bar a:hover,
form.anmeldung input.knopf:hover,
article.aktuell a.knopf.links:hover {
color: rgb(64,51,47);
background: rgb(255,240,0);
box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
border: none;
}

header nav ul.lang li a,
header nav ul.lang li.aktiv {
margin: 0 0 8px 0;
}

header nav ul.lang li.aktiv {
padding: 3px 8px 4px 8px;
background: rgb(0,150,160);
color: white;
}

.mfj header nav ul.lang li.aktiv {
background: rgb(0,150,220);
}

.knopf,
div.text a.knopf,
form.anmeldung input.knopf {
display: inline-block;
color: white;
font-weight: bold;
background: rgb(0,150,160);
padding: 2px 8px;
margin: 0 8px 0 0;
box-shadow: none;
border: none;
}

div.text a.knopf:hover {
padding: 2px 8px;
margin: 0 8px 0 0;
}

a.links:before {
font-family: 'Icons';
content: ' ';
}

article.aktuell a.knopf.links {
margin: 0 8px 16px 0;
}

.mfj a.knopf.links {
background: rgb(0,150,220);
}

article {
display: flex;
flex-flow: row nowrap;
margin: 32px 40px;
}

article.angebote {
flex-wrap: wrap;
}

article.banner,
article.aktuell {
display: block;
}

article nav,
article div.text,
article aside,
article div.date {
box-sizing: border-box;
}

article div.text {
flex: 0 1 50%;
padding-top: 6px;
}

article div.text p,
article div.text li {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

article div.text.voll,
article div.voll div.text {
flex-basis: 100%;
}

article div.text iframe {
width: 100%;
height: 256px;
margin: 16px 0 24px 0;
box-sizing: border-box;
background: rgba(0,150,160,0.2);
}

article div.text div.video {
position: relative;
box-sizing: border-box;
padding-bottom: 66%;
height: 0;
overflow: hidden;
width: 100%;
margin: 8px 0 16px 0;
}

article div.text div.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

article nav,
article div.date,
article aside {
flex: 0 0 272px;
margin-bottom: auto;
}

article div.text:first-child + aside {
flex-grow: 1;
}

article nav,
article div.date {
margin-top: 12px;
margin-right: 32px;
background: rgb(233,231,231);
padding: 14px 16px 8px 16px;
}

article aside {
margin-left: 24px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

article.veranstaltungen.detail aside {
margin-top: 87px;
}

article div.date {
padding: 8px 16px 8px 16px;
}

article nav ul.sub li {
margin: 0 0 8px 0;
line-height: 20px;
}

article nav a {
font-weight: bold;
color: rgb(64,51,47);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}

article nav a:hover {
color: rgb(64, 51, 47);
background: rgb(255, 240, 0);
padding: 2px 6px 3px 6px;
margin-left: -6px;
box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
border: none;
}

article nav ul.sub li.aktiv a {
background: rgb(0,150,160);
color: white;
padding: 3px 6px;
margin-left: -6px;
cursor: default;
}

.mfj article nav ul.sub li.aktiv a {
background: rgb(0,150,220);
}

article div.text aside {
width: 100%;
margin: 0;
}

article div.text aside ul.downloads li {
background: rgb(248,245,245);
padding: 8px;
}

article img.portrait,
article div.portrait {
display: inline-block;
vertical-align: top;
width: 118px;
height: 118px;
margin: 6px 12px 4px 0;
}

article ul.trainer img.portrait {
width: 152px;
height: auto;
}

article div.daten {
display: inline-block;
vertical-align: top;
width: calc(100% - 118px - 12px);
}

article aside div.daten {
display: inline-block;
vertical-align: top;
/* width: calc(100% - 76px - 12px); */
width: 100%;
}

div.portrait {
background-color: rgba(0,150,160,0.2);
background-image: url("data:image/svg+xml;charset=UTF-8,<svg version='1.1' class='logo' xmlns='http://www.w3.org/2000/svg' x='0' y='0' width='104px' height='104px' viewBox='5 0 104 104'><g><path fill='rgba(255,255,255,0.3)' d='M19,14v76h82v-3H22V17h70v41H51V40h21v3H62v3h13v-9H48v24h47V14H19z M13,8.032V96h88v-3H16V11h82v53H45V34 h33v15H62v3h19V31H42v36l58.969,0.119L101,8L13,8.032z'/></g></svg>");
background-size: 100% 100%;
}

article aside img.portrait,
article aside div.portrait {
width: 76px;
height: 76px;
}

aside.filter div {
margin: 0 0 16px 8px;
}

.mfj aside.filter div h3 {
font-style: italic;
color: rgb(0,150,220);
}

aside.filter div h3 {
color: rgb(64, 176, 184);
}

ul.filter {
padding: 4px 0 0 0;
}

ul.filter.kat {
column-count: 2;
column-gap: 1em;
}

ul.filter.kat li {
break-inside: avoid;
}

ul.filter li a {
background: rgba(0,150,160,.05);
color: rgb(64,51,47);
padding: 3px 6px 2px 6px;
display: block;
line-height: 20px;
}

.mfj  ul.filter li a {
background: rgba(0,150,220,.05);
}

ul.filter li a:hover {
background: rgba(255,240,0,0.8);
box-shadow: 4px 4px 0 rgba(0,0,0,.1);
}

ul.filter li.aktiv a {
background: rgb(0,150,160);
color: white;
font-weight: bold;
}

.mfj ul.filter li.aktiv a {
background: rgb(0,150,220);
}

p.notiz {
display: block;
font-size: 13px;
line-height: 18px;
padding: 4px 8px;
background-color: rgba(255,240,0,.1);
flex: 0 0 100%;
}

ul.kacheln {
flex: 0 0 calc(100% + 1em);
display: flex;
flex-flow: row wrap;
margin: 2em -.5em;
}

ul.kacheln li {
flex: 1 1 calc(25% - 1em);
margin: .5em;
min-width: 14em;
}

.angebote ul.kacheln li {
transition: all 200ms ease-in;
max-height: 32em;
}

.angebote ul.kacheln li.aus {
flex-basis: 0;
max-height: 0;
margin: 0;
min-width: 0;
overflow: hidden;
}

ul.kacheln li a {
display: block;
background: rgba(0,150,220,.1);
height: 100%;
}

.lernplattform ul.kacheln li a {
background: rgba(0,150,160,.1);
}

ul.kacheln li a:hover {
background: rgb(0,150,220);
}

.lernplattform ul.kacheln li a:hover {
background: rgb(0,150,160);
}

ul.kacheln li a img {
display: block;
width: 100%;
filter: grayscale(0);
opacity: 1;
}

ul.kacheln li a:hover img {
filter: grayscale(1);
opacity: .8;
}

ul.kacheln li div {
padding: .5em .75em .75em .75em;
}

ul.kacheln li a p {
color: black;
margin: 0;
}

ul.kacheln li a p.yt {
color: rgb(0,150,160);
margin: 4px 0 0 0;
}

ul.kacheln li a h3 {
margin: 0;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

.lernplattform ul.kacheln li a h3 {
line-height: 25px;
margin: 4px 0;
}

ul.kacheln li a:hover p,
ul.kacheln li a:hover h3 {
color: white;
}

ul.kacheln:after,
ul.kacheln:before {
content: '';
flex: 1 1 calc(25% - 1em);
margin: .5em;
min-width: 12em;
order: 9999;
}

ul.galerie {
display: flex;
flex-flow: row wrap;
margin: 12px 0 24px 0;
padding: 8px 0 0 8px;
background: rgb(248,245,245);
}

ul.galerie li {
flex: 0 0 calc(25% - 8px);
margin: 0 8px 8px 0;
max-width: 160px;
}

ul.aktuelles ul.galerie li,
ul.publikationen ul.galerie li {
flex-basis: calc(25% - 8px);
}

ul.galerie li img {
display: block;
width: 100%;
border-color: transparent;
}

ul.galerie li a {
position: relative;
box-shadow: none;
height: 100%;
display: block;
}

ul.galerie li a span {
position: absolute;
top: 0;
left: 0;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 0;
padding: 50% 0;
font-size: 18px;
line-height: 0;
font-weight: bold;
text-align: center;
color: white;
background: rgba(0,150,160,0.8);
}

ul.galerie li a:hover {
box-shadow: none;
}

ul.galerie li a:hover img {
border: 8px solid rgb(0,150,160);
margin: -8px;
-webkit-transition: border-color 250ms ease-in;
-moz-transition: border-color 250ms ease-in,;
transition: border-color 250ms ease-in;
}

article aside h4 {
margin: 16px 0 8px 0;
}

aside ul.downloads {
padding: 8px 8px 6px 8px;
background: rgb(248,245,245);
margin: 0 0 24px 0;
}

ul.downloads li {
padding: 0 0 4px 0;
}

aside ul.downloads li + li {
border-top: 1px solid rgb(233,231,231);
padding: 8px 0 4px 0;
}

ul.downloads li a {
color: black;
box-shadow: none;
border: none;
}

ul.downloads li a:hover {
color: rgb(0,150,160);
box-shadow: none;
border: none;
}

ul.downloads li a span {
white-space: nowrap;
}

span.dok {
display: inline-block;
color: white;
font-weight: bold;
text-transform: uppercase;
background: rgb(0,150,160);
padding: 0 4px;
margin: 0 8px 0 0;
}

.mfj span.dok {
background: rgb(0,150,220);
}

ul.aktuelles > li {
margin-bottom: 12px;
}

ul.aktuelles > li + li {
border-top: 1px solid rgb(0,150,160);
padding-top: 12px;
}

ul.aktuelles li {
display: flex;
flex-flow: row nowrap;
}

ul.aktuelles li div.text {
flex: 0 0 60%;
padding: 0 2em 0 0;
}

ul.aktuelles li aside {
flex: 0 0 40%;
margin-top: 18px;
}

article div.date {
margin-top: 30px;
}

ul.pagination {
border-top: 1px solid rgb(233,231,231);
padding: 16px 0;
text-align: center;
}

ul.pagination li {
display: inline-block;
vertical-align: top;
margin: 0 8px 8px 0;
}

ul.pagination li a {
display: block;
font-weight: bold;
color: rgb(0,150,160);
background: rgb(233,231,231);
padding: 2px 10px;
}

.mfj ul.pagination li a {
color: rgb(0,150,220);
}

ul.pagination span.ellipsis {
margin: 0 8px 8px 0;
}

ul.pagination li a.selected {
color: white;
background: rgb(0,150,160);
cursor: default;
pointer-events: none;
}

.mfj ul.pagination li a.selected {
background: rgb(0,150,220);
}

ul.pagination li a.disabled {
color: rgb(213,211,211);
background: rgb(233,231,231);
cursor: default;
pointer-events: none;
}

aside ul.ansprechpartner,
aside ul.trainer li a {
padding: 4px 8px;
background: rgb(248,245,245);
margin: 0 0 24px 0;
color: black;
}

aside ul.ansprechpartner li {
padding: 0 0 4px 0;
}

aside ul.ansprechpartner li + li {
border-top: 1px solid rgb(233,231,231);
padding: 4px 0;
}

div.text aside ul.ansprechpartner li p {
margin: 0;
}

aside ul.trainer li a {
display: flex;
flex-flow: row nowrap;
}

aside ul.trainer li a:hover {
color: white;
background: rgb(0,150,220);
}

aside blockquote a,
div.text blockquote a {
display: block;
position: relative;
font-style: italic;
padding: 12px 16px;
margin: 0 0 24px 0;
border: none;
box-shadow: none;
}

aside blockquote a {
background: rgb(200,0,130);
color: white;
}

div.text blockquote a {
background: rgb(0,150,220);
color: white;
}

div.text blockquote + blockquote {
padding: 24px 0 0 0;
}

div.text blockquote:target a {
/* magenta */
background: rgb(200,0,130);
color: white;
box-shadow: none;
}

aside blockquote a:hover,
div.text blockquote a:hover {
box-shadow: 4px 4px 0 rgba(0,0,0,.1);
border: none;
padding: 12px 16px;
margin: 0 0 24px 0;
border: none;
background: rgb(255,240,0);
color: black;
}

blockquote cite {
display: block;
font-size: 11px;
line-height: 18px;
letter-spacing: 2px;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
margin: 0 8px 32px 8px;
}

blockquote a:after,
div.text blockquote:target a:after {
content: ' ';
display: block;
width: 20px;
height: 16px;
position: absolute;
bottom: -16px;
left: 16px;
/* magenta */
background: url("data:image/svg+xml;charset=UTF-8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='20px' height='16px' viewBox='0 0 20 16'><polygon fill='rgb(200,0,130)' points='0,0 0,16 20,0 '/></svg>");
}

blockquote a:hover:after,
div.text blockquote a:hover:after {
/* gelb */
background: url("data:image/svg+xml;charset=UTF-8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='20px' height='16px' viewBox='0 0 20 16'><polygon fill='rgb(255,240,0)' points='0,0 0,16 20,0 '/></svg>");
}

div.text blockquote a:after {
/* cyan */
background: url("data:image/svg+xml;charset=UTF-8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='20px' height='16px' viewBox='0 0 20 16'><polygon fill='rgb(0,150,220)' points='0,0 0,16 20,0 '/></svg>");
}

/*! Swipebox v1.3.0 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox | edited by alex@animaux.de */

html.swipebox-html.swipebox-touch {
overflow: hidden !important;
}

#swipebox-overlay img {
border: none !important;
}

#swipebox-overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999 !important;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

#swipebox-container {
position: relative;
width: 100%;
height: 100%;
}

#swipebox-slider {
-webkit-transition: -webkit-transform 0.4s ease;
transition: transform 0.4s ease;
height: 100%;
left: 0;
top: 0;
width: 100%;
white-space: nowrap;
position: absolute;
display: none;
cursor: pointer;
}
#swipebox-slider .slide {
height: 100%;
width: 100%;
line-height: 1px;
text-align: center;
display: inline-block;
}
#swipebox-slider .slide:before {
content: "";
display: inline-block;
height: 50%;
width: 1px;
margin-right: -1px;
}
#swipebox-slider .slide img, #swipebox-slider .slide .swipebox-video-container {
display: inline-block;
max-height: 100%;
max-width: 100%;
margin: 0;
padding: 0;
width: auto;
height: auto;
vertical-align: middle;
}
#swipebox-slider .slide .swipebox-video-container {
background: none;
max-width: 1140px;
max-height: 100%;
width: 100%;
padding: 5%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#swipebox-slider .slide .swipebox-video-container .swipebox-video {
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
position: relative;
}
#swipebox-slider .slide .swipebox-video-container .swipebox-video iframe {
width: 100% !important;
height: 100% !important;
position: absolute;
top: 0;
left: 0;
}
#swipebox-slider .slide-loading {
background: url(../img/loader.gif) no-repeat center center;
}

#swipebox-bottom-bar,
#swipebox-top-bar {
-webkit-transition: 0.5s;
transition: 0.5s;
position: absolute;
left: 0;
z-index: 999;
height: 50px;
width: 100%;
}

#swipebox-bottom-bar {
bottom: -50px;
}
#swipebox-bottom-bar.visible-bars {
-webkit-transform: translate3d(0, -50px, 0);
transform: translate3d(0, -50px, 0);
}

#swipebox-top-bar {
top: -50px;
}
#swipebox-top-bar.visible-bars {
-webkit-transform: translate3d(0, 50px, 0);
transform: translate3d(0, 50px, 0);
}

#swipebox-title {
display: block;
width: 100%;
text-align: center;
}

#swipebox-prev,
#swipebox-next,
#swipebox-close {
background-image: url(../img/icons.png);
background-repeat: no-repeat;
border: none !important;
text-decoration: none !important;
cursor: pointer;
width: 50px;
height: 50px;
top: 0;
}

#swipebox-arrows {
display: block;
margin: 0 auto;
width: 100%;
height: 50px;
}

#swipebox-prev {
background-position: -32px 13px;
float: left;
}

#swipebox-next {
background-position: -78px 13px;
float: right;
}

#swipebox-close {
top: 0;
right: 0;
position: absolute;
z-index: 9999;
background-position: 15px 12px;
}

.swipebox-no-close-button #swipebox-close {
display: none;
}

#swipebox-prev.disabled,
#swipebox-next.disabled {
opacity: 0.3;
}

.swipebox-no-touch #swipebox-overlay.rightSpring #swipebox-slider {
-webkit-animation: rightSpring 0.3s;
animation: rightSpring 0.3s;
}
.swipebox-no-touch #swipebox-overlay.leftSpring #swipebox-slider {
-webkit-animation: leftSpring 0.3s;
animation: leftSpring 0.3s;
}

.swipebox-touch #swipebox-container:before, .swipebox-touch #swipebox-container:after {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .3s ease;
transition: all .3s ease;
content: ' ';
position: absolute;
z-index: 999;
top: 0;
height: 100%;
width: 20px;
opacity: 0;
}
.swipebox-touch #swipebox-container:before {
left: 0;
-webkit-box-shadow: inset 10px 0px 10px -8px #656565;
box-shadow: inset 10px 0px 10px -8px #656565;
}
.swipebox-touch #swipebox-container:after {
right: 0;
-webkit-box-shadow: inset -10px 0px 10px -8px #656565;
box-shadow: inset -10px 0px 10px -8px #656565;
}
.swipebox-touch #swipebox-overlay.leftSpringTouch #swipebox-container:before {
opacity: 1;
}
.swipebox-touch #swipebox-overlay.rightSpringTouch #swipebox-container:after {
opacity: 1;
}

@-webkit-keyframes rightSpring {
0% {
left: 0;
}

50% {
left: -30px;
}

100% {
left: 0;
}
}

@keyframes rightSpring {
0% {
left: 0;
}

50% {
left: -30px;
}

100% {
left: 0;
}
}
@-webkit-keyframes leftSpring {
0% {
left: 0;
}

50% {
left: 30px;
}

100% {
left: 0;
}
}
@keyframes leftSpring {
0% {
left: 0;
}

50% {
left: 30px;
}

100% {
left: 0;
}
}
@media screen and (min-width: 800px) {
#swipebox-close {
right: 10px;
}

#swipebox-arrows {
width: 92%;
max-width: 800px;
}
}

/* Skin */

#swipebox-overlay {
background: rgba(0,80,90,0.95);
width: 100% !important;
}

#swipebox-arrows {
position: relative;
z-index: 99999;
}

@media screen and (min-width: 800px) {
  #swipebox-arrows {
  width: 100%;
  max-width: none !important;
  }
}

#swipebox-prev {
position: relative;
left: 16px;
}

#swipebox-next {
position: relative;
right: 16px;
}

#swipebox-close {
top: 16px;
right: 16px;
}

#swipebox-bottom-bar {
height: auto;
}

#swipebox-title {
font-family: inherit;
font-size: 14px;
line-height: 22px;
color: white !important;
text-align: center;
text-shadow: none;
background: rgba(0,80,90,0.95);
display: block;
position: absolute;
bottom: 0;
padding: 16px 12px;
width: 100%;
width: calc(100% - 16px);
z-index: 999;
}

#swipebox-next,
#swipebox-prev,
#swipebox-close {
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
width: 48px;
height: 48px;
}

#swipebox-next:hover,
#swipebox-prev:hover,
#swipebox-close:hover {
background-color: rgba(255,255,255,0.15);
}

#swipebox-next.disabled:hover,
#swipebox-prev.disabled:hover {
background-color: transparent;
}

#swipebox-next {
background-position: -95px 0;
}

#swipebox-prev {
background-position: -50px 0;
}

#swipebox-close {
background-position: 0 0;
}




/*! Flickity v2.0.2 flickity.metafizzy.com */
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:visible;position:static;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-prev-next-button{position:absolute;top:50%;width:44px;height:44px;border:none;border-radius:50%;background:#fff;background:hsla(0,0%,100%,.75);cursor:pointer;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.flickity-prev-next-button:hover{background:#fff}.flickity-prev-next-button:focus{outline:0;box-shadow:0 0 0 5px #09F}.flickity-prev-next-button:active{opacity:.6}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button:disabled{opacity:.3;cursor:auto}.flickity-prev-next-button svg{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-prev-next-button .arrow{fill:#333}.flickity-page-dots{position:absolute;width:100%;padding:0;margin:0;list-style:none;text-align:center;line-height:1;top:-2.35em}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:12px;height:12px;margin:0 4px;padding:0;background:white;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}
/* / Flickity */


/* Flickity fullscreen v1.0.1
------------------------- */

ul.inline-galerie.flickity-enabled.is-fullscreen,
.flickity-enabled.is-fullscreen {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
background: rgba(0,80,90,0.95);
padding-bottom: 36px;
z-index: 1000;
}

.flickity-enabled.is-fullscreen .flickity-page-dots {
bottom: 10px;
}

.flickity-enabled.is-fullscreen .flickity-page-dots .dot {
background: rgba(var(--white),.5);
} 

.flickity-enabled.is-fullscreen .flickity-page-dots .dot.is-selected {
background: rgb(var(--white));
} 

html.is-flickity-fullscreen {
overflow: hidden;
}

html.is-flickity-fullscreen .flickity-viewport img {
margin: 0 auto;
padding: 1em 1em 0 1em;
}

html.is-flickity-fullscreen .flickity-viewport figcaption {
margin: 1em auto;
max-width: 42em;
text-align: center;
color: white;
}

.flickity-fullscreen-button {
position: absolute;
display: block;
top: 1em;
right: 1em;
width: 2em;
height: 2em;
border-radius: .25em;
border: none;
background: rgba(0,150,160,.2);
cursor: pointer;
opacity: 1;
}

.flickity-fullscreen-button:hover {
background: rgba(0,150,160,.8);
}

.flickity-fullscreen-button-exit {
display: none;
}

.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit {
display: block;
}

.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view {
display: none;
}

.flickity-fullscreen-button .flickity-button-icon {
position: absolute;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
fill: white; 
}

body ul.inline-galerie.flickity-enabled.is-fullscreen .flickity-slider li {
display: flex;
width: 100vw;
height: 100%;
max-width: 100%;
max-height: 100%;
margin: 0;
}

body ul.inline-galerie.flickity-enabled.is-fullscreen li img {
margin: 0 auto;
width: 100%;
height: auto;
max-width: calc(100% - 2em);
max-height: calc(100% - 6em);
object-fit: contain;
}

ul.banner .flickity-viewport:before,
ul.banner .flickity-viewport:after {
content: ' ';
display: block;
width: 16px;
height: calc(100% - 16px);
position: absolute;
top: 8px;
background: white;
box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

ul.banner .flickity-viewport:after {
right: -16px;
left: auto;
}

ul.banner .flickity-viewport:before {
left: -16px;
right: auto;
}

ul.banner .flickity-prev-next-button:disabled {
display: none;
}

ul.banner {
position: relative;
overflow: hidden;
}

ul.banner li {
display: inline-block;
vertical-align: top;
width: 256px;
margin: 16px 16px 16px 0;
box-sizing: border-box;
z-index: 5;
}

ul.banner li a {
display: block;
height: 100%;
}

ul.banner li a:hover {
box-shadow: 8px 8px 0 rgba(0,0,0,0.2);
}

ul.banner li img {
height: 160px;
}

ul.banner li div.text {
width: auto;
padding: 12px 16px 4px 16px;
}

ul.banner li img + div.text {
padding-top: 6px;
}

ul.banner li div.text h3 {
margin: 0 0 4px 0;
line-height: 26px;
}

ul.banner li div.text * {
color: white;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

ul.banner li.gelb div.text * {
color: rgb(64,51,47);
}

li.tuerkis {background-color: rgb(0,150,160);}
li.cyan {background-color: rgb(0,150,220);}
li.gelb {background-color: rgb(255,240,0);}
li.magenta {background-color: rgb(208,38,149);}

ul.inline-galerie.flickity-enabled {
margin: 6px 0 12px;
overflow: hidden;
}

ul.inline-galerie.flickity-enabled .flickity-viewport {
transition: all 250ms ease-in;
}

ul.inline-galerie.flickity-enabled .flickity-slider li {
width: 100%;
}

ul.inline-galerie.flickity-enabled .flickity-page-dots {
position: static;
margin: 12px 0;
}

ul.inline-galerie.flickity-enabled .flickity-page-dots .dot {
width: 8px;
height: 8px;
margin: 0 3px;
background: rgb(0,150,160);
}

ul.inline-galerie.flickity-enabled .flickity-page-dots .dot:first-child:last-child {
display: none;
}


.is-fullscreen figure {
display: flex;
flex-flow: column nowrap;
height: auto;
margin: auto;
}

figcaption {
color: rgb(0,150,160);
}

.mfj figcaption {
color: rgb(0,150,220);
}

article.angebote.trainer figcaption {
display: none;
}

.is-flickity-fullscreen article.angebote.trainer figcaption {
display: block;
}

ul.inline-galerie .flickity-prev-next-button {
background: rgba(255,255,225,0);
top: 44%;
}

ul.inline-galerie .flickity-prev-next-button:hover {
background: rgba(255,255,225,.5);
}

ul.inline-galerie .flickity-prev-next-button .arrow {
fill: white;
}

article.start {
width: 976px;
margin: 48px auto 0 auto; 
}

article.start div.text {
width: 472px;
margin-right: 32px;
}

article.start div.text h3 {
margin-top: 0;
}

article.start > ul.slider,
article.start > iframe,
article.start div.rechts {
display: inline-block;
vertical-align: top;
width: 472px;
max-width: 100%;
margin-top: 44px;
}

article.start div.rechts > iframe {
width: 100%;
margin: 0 0 8px 0;
}

::-webkit-input-placeholder {color: rgba(0,150,160,0.3);}
:-moz-placeholder {color: rgba(0,150,160,0.3);}
::-moz-placeholder {color: rgba(0,150,160,0.3);}
:-ms-input-placeholder {color: rgba(0,150,160,0.3);}
::placeholder {color: rgba(0,150,160,0.3);}

div.anmeldung {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0,150,160,.9);
z-index: 1000;
padding: 64px 32px 0 32px;
cursor: pointer;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
overflow-x: hidden;
box-sizing: border-box;
}

div.anmeldung::-webkit-scrollbar-thumb {
background: rgb(255,240,0);
}

div.anmeldung::-webkit-scrollbar {
width: 12px;
background: rgba(255,255,255,.1);
}

div.anmeldung::-webkit-scrollbar:active {
background: rgba(255,240,0,.2);
}

div.anmeldung > div {
max-width: 720px;
margin: 0 auto;
padding: 16px;
background-color: white;
}

div#anmeldung {
display: none;
}

div#anmeldung:target {
display: block;
}

div.anmeldung svg#zu {
fill: none;
stroke: white;
stroke-width: 3;
stroke-linecap: round;
margin: 4px;
position: absolute;
top: 16px;
right: 32px;
}

div.anmeldung svg#zu:hover {
background: white;
border-radius: 50%;
stroke: rgb(0,150,160);
}

form.anmeldung label {
padding-bottom: 12px;
}

form.anmeldung label,
form.anmeldung label > * {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: 100%;
}

form.anmeldung label span.req:after {
content: '*';
}

form.anmeldung label.halb {
width: 50%;
}

form.anmeldung label.bottom {
vertical-align: bottom;
}

form.anmeldung label.drittel {
width: calc(100% / 3);
}

form.anmeldung label.zweidrittel {
width: calc(100% / 3 * 2);
}

form.anmeldung label.links {
padding-right: 4px;
}

form.anmeldung label.rechts {
padding-left: 4px;
}

form.anmeldung label.mitte {
padding-left: 4px;
padding-right: 4px;
}

form.anmeldung label.notitle span {
display: none;
}

form.anmeldung input,
form.anmeldung select,
form.anmeldung textarea {
padding: 2px 6px;
border: none;
border-bottom: 1px solid rgb(0,150,160);
color: rgb(0,150,160);
background-color: rgba(0,150,160,0.04);
}

form.anmeldung textarea {
margin-top: 8px;
min-height: 96px;
}

form.anmeldung input:focus,
form.anmeldung select:focus,
form.anmeldung textarea:focus {
color: white;
background-color: rgb(0,150,160);
}

form.anmeldung .error input,
form.anmeldung .error select,
form.anmeldung input:invalid:not(:placeholder-shown),
form.anmeldung select[value!='']:invalid {
background-color: rgb(200,0,130);
}

div.error,
label.checkbox.error {
color: rgb(200,0,130);
background-color: rgba(200,0,130,.1);
padding: 4px 8px;
}

div.error p {
margin: 0;
}

p.success {
color: rgb(64,180,64);
background-color: rgba(64,180,64,.1);
padding: 4px 8px;
}

form.anmeldung input[disabled] {
opacity: 0.2;
pointer-events: none;
cursor: not-allowed;
}

form.anmeldung select:not([multiple]) {
padding-right: 28px;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" id="pulldown" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="28px" height="28px" viewBox="0 0 28 28"><g><polyline fill="none" stroke="rgb(0,150,160)" stroke-width="2" points="7,12.5 14,17.5 21,12.5"/></g></svg>');
background-position: top right;
background-repeat: no-repeat;
background-size: 28px 28px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
}

form.anmeldung select[multiple] {
height: calc(var(--size) * 1.5em);
overflow-y: auto;
}

form.anmeldung fieldset {
margin: 0 0 16px 0;
}

form.anmeldung button.knopf {
margin: 0 0 32px 0;
cursor: pointer;
}

fieldset.unterlegt {
padding: 8px 8px 0 8px;
background-color: rgba(0,150,160,0.1);
}

fieldset.unterlegt h4 {
margin-top: 0;
}

fieldset.unterlegt input,
fieldset.unterlegt select {
background-color: rgba(255,255,255,.6);
}

form.anmeldung .checkbox input {
width: auto;
float: left;
margin: 5px 8px 4px 0;
}

form.anmeldung .checkbox > span {
display: block;
padding: 0 0 0 24px;
}

form.anmeldung p {
color: rgba(0,0,0,.6);
}

footer {
display: flex;
flex-flow: row wrap;
background: rgb(64,176,184);
padding: 34px 40px;
margin: 56px 0 0 0;
color: white;
}

.mfj footer {
border-top: 2em solid rgb(0,150,220);
}

footer nav {
display: flex;
flex-flow: row nowrap;
flex: 0 0 100%;
width: 100%;
box-sizing: border-box;
border-bottom: 1px solid rgba(255,255,255,0.5);
padding-bottom: 32px;
margin-bottom: 32px;
}

footer h3 {
font-weight: bold;
}

footer a {
color: rgba(255,255,255,0.75);
border-bottom: 1px solid transparent;
}

footer a:hover {
color: black;
border-bottom-color: rgb(0,150,160);
}

footer nav div {
box-sizing: border-box;
padding: 0 16px 0 0;
}

footer nav div:last-child {
padding: 0;
}

footer nav div li + li {
padding-top: 4px;
}

footer nav div li a {
line-height: 18px;
}

footer div.adresse {
flex: 0 1 calc(100% - 568px);
}

footer div.partner {
flex: 0 0 568px;
}

footer div.adresse ul li {
display: inline-block;
}

footer div ul li a {
display: inline-block;
}

footer div.partner ul {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}

footer div.partner a span {
display: none;
}

footer div.partner a:hover {
border-bottom-color: transparent;
} 

footer div.partner li {
padding: 0 0 4em 4em;
}

footer div.partner li a svg#naw {
width: 160px;
}

footer div.partner li a svg {
fill: white;
max-width: 100%;
}

footer div.partner li a:hover svg {
fill: rgb(64, 51, 47);
}

footer div.partner li a svg g.balken,
footer div.partner li a svg g.bunt {
fill: rgba(255,255,255,.333);
}

footer div.partner li a:hover svg g.balken,
footer div.partner li a:hover svg g.bunt {
fill: rgba(0,0,0,.333);
}

footer div.partner li a svg g.weiss {
fill: rgb(64,176,184);
}

footer div ul.sozial li {
text-align: center;
}

footer div ul.sozial li a {
color: white;
padding: 3px 8px 2px 8px;
margin: 0 8px 16px 0;
border: 2px solid rgba(255,255,255,0.8);
}

footer div ul.sozial li a:hover {
border: 2px solid rgb(255,240,0);
}

footer div ul.sozial li a:before {
font-family: 'Icons';
font-size: 32px;
line-height: 40px;
width: 32px;
display: block;
}

article p.fb {
color: rgb(109,99,96);
border-top: 1px solid rgb(233,231,231);
padding-top: 12px;
margin-top: 16px;
}

article.lernplattform p.fb {
flex: 1 0 100%;
}

article p.fb a {
color: rgb(109,99,96);
border-bottom: none;
box-shadow: none;
}

article p.fb a:before {
font-family: 'Icons';
display: inline-block;
margin: 0 8px 0 0;
}

p.fb a:before {content: '';}
a.fb:before {content: '';}
a.gp:before {content: '';}
a.yt:before {content: '';}
a.rss:before {content: '';}
a.newsletter:before {content: '';}

.einklapp.aktiv {
position: relative;
padding: .25em 1.75em .35em .5em;
margin-top: .75em;
background-color: rgba(0,150,160,.1);
cursor: pointer;
}

.einklapp.aktiv:hover {
color: white;
background-color: rgb(0,150,160);
}

.einklapp.aktiv:after {
position: absolute;
top: .2em;
right: .35em;
content: ' –';
transform: translateY(-.1em);
font-size: 1.5em;
line-height: 1;
font-weight: bold;
}

.einklapp.aktiv.zu:after {
content: ' +';
transform: translateY(-.06em);
}



/* ############# Screens ÜBER 1280px ############# */
@media only screen and (min-width: 1280px) {
  
  article, header nav * {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  }
  
  img.kopf {
  /* max-width: 1104px; */
  }

}



/* ############# Screens bis 1054px ############# */
@media only screen and (max-width: 1054px) {

  article div.text.voll {
  flex: 0 0 100%;
  }

  article nav,
  article div.date,
  article aside {
  flex: 0 0 220px;
  }
  
  article div.text:first-child + aside {
	flex-grow: 1;
	}
  
  article aside img.portrait, article aside div.portrait {
  width: 52px;
  height: 52px;
  }
  
  article aside div.daten {
  width: 100%;
  /* width: calc(100% - 52px - 12px); */
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  }

  article.start {
  width: auto;
  margin: 48px 40px 0 40px;
  }

  article.start div.text {
  width: calc(50% - 16px);
  margin-right: 16px;
  }

  article.start ul.slider,
  article.start iframe {
  width: calc(50% - 16px);
  margin-left: 16px;
  }
  
  article.start ul.slider .flickity-slider li,
  article.start ul.slider .flickity-slider li img {
  width: 100%;
  }

}

/* ############# Screens unter 960px ############# */
@media only screen and (max-width: 960px) {

  article {
  margin: 16px;
  flex-wrap: wrap;
  }

  header div.logo h1 a {
  width: 192px;
  height: 78px;
  background-size: 100% 100%;
  }
  
  header div.logo {
  padding: 12px 16px 16px 16px;
  }
  
  header svg.triangel {
  top: 88px;
  }
  
  .mfj header svg.triangel {
	top: 106px;
	}
  
  header nav {
  padding: 16px 16px 8px 16px;
  }

  header nav ul li {
  font-size: 15px;
  line-height: 22px;
  }
  
  header nav ul li a {
  margin: 0px 4px 4px 0px;
  padding: 1px 6px 2px 6px;
  }
  
  header nav ul.lang li.aktiv,
  .knopf {
  padding: 1px 6px 2px 6px;
  }
  
  .mfj header div.logo h1 {
	padding-bottom: 1em;
	}
  
  .mfj header div.logo h2 {
	font-size: 18px;
	line-height: 22px;
	}

  article nav {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  margin-right: 16px;
  }

  ul.galerie li {
  flex-basis: calc(33% - 8px);
  }
  
  ul.downloads li {
  /* padding: 8px; */
  background: rgb(248,245,245);
  }
  
  footer div.adresse,
  footer div.partner {
  flex: 0 0 100%;
  }
  
  footer div.partner ul {
  padding-top: 2em;
  justify-content: flex-start;
  }
  
  footer div.partner li {
  padding: 0 4em 4em 0;
  }
	
/* 
	article nav, article div.date,
  article div.text,
  aside.filter {
  width: 100%;
  flex-basis: 100%;
  }
 */
  
  article nav {
  margin: -16px -8px 8px -16px;
	padding: 0 16px 4px 16px;
	flex-basis: calc(100% + 32px);
  }

  article nav ul.sub {
  padding-top: 4px;
  }
  
  article nav ul.sub li {
  display: inline-block;
  vertical-align: top;
  }
  
  article nav ul.sub li a {
  padding: 2px 6px 3px 6px;
  margin: 0 4px 4px 0;
  background: white;
  }
  
  article nav ul.sub li.aktiv a {
  margin-left: 0;
  }
	
	article div.text {
	flex: 0 1 100%;
	max-width: 40em;
	}
	
	article.veranstaltungen.index nav + div.text {
	flex-basis: 100%;
	max-width: 100%;
	}

	
	article.veranstaltungen.index nav + div.text div.block * {
	max-width: 40em;
	}
	
	article aside {
	flex-basis: 100%;
	margin: 0;
	}
	
	ul.aktuelles ul.galerie li,
  ul.galerie li { 
  flex-basis: calc(100% / 6 - 8px);
  }
  
	article.veranstaltungen.index nav {
  order: 1;
  }
  
  article.veranstaltungen.index aside.filter {
  order: 2;
  }
  
  article.veranstaltungen.index div.text {
  order: 3;
  }
  
	article.veranstaltungen.index aside.filter div {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  margin: 16px 0;
  width: calc(25% - 6px);
  }
  
  article.angebote aside.filter div {
  margin: 16px 0;
  }
  
  article.veranstaltungen.index aside.filter div + div {
  margin-left: 8px;
  }

}





/* ############# Screens unter 767px ############# */
@media only screen and (max-width: 767px) {
  
	ul.kacheln li a h3 {
  font-size: initial;
  line-height: initial;
  }
  
  ul.aktuelles li {
	flex-wrap: wrap;
	}
  
  article aside,
  ul.aktuelles li div.text,
  ul.aktuelles li aside {
  display: block;
  width: 100%;
  margin-left: 0;
  padding-right: 0;
  flex-basis: 100%;
  }

  article aside img.portrait, article aside div.portrait {
  width: 76px;
  height: 76px;
  }
  
  article aside div.daten {
  width: calc(100% - 76px - 12px);
  }
  
  footer nav {
  display: none;
  }
  
  footer nav div li a {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  }

}


/* ############# Screens unter 640px ############# */
@media only screen and (max-width: 639px) {

  body {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  }
    
  article div.date {
  background: transparent;
  padding: 0;
  }
    
  .mfj header div.logo h2 {
  margin: 0 0 .5em 0;
  }
  
  div.text > h3 {
  margin-top: 0;
  }
  
  ul.aktuelles > li {
  padding-bottom: 16px;
  }
  
  article.start div.text,
  article.start ul.slider,
  article.start iframe {
  width: 100%;
  max-width: 472px;
  margin: 0;
  }
  
  article.start ul.slider,
  article.start iframe {
  max-width: 472px;
  margin-top: 32px;
  }
  
  article.veranstaltungen {
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  }

}



/* ############# Screens unter 480px ############# */
@media only screen and (max-width: 480px) {

  header svg.triangel {
  height: 25vw;
  }
  
	.mfj header div.logo {
  flex-flow: column nowrap;
  }
  
  .mfj header div.logo h1 {
	padding-bottom: 0;
	}
  
	.mfj header svg.triangel {
	display: none;
	}
  
  img.kopf {
  margin-top: -8px;
  }
  
  ul.galerie li,
  ul.aktuelles ul.galerie li {
  flex-basis: calc(100% / 3 - 8px);
  }
  
  article.veranstaltungen.index aside.filter div,
  article.veranstaltungen.index aside.filter div + div {
	width: calc(50% - 6px);
	margin-left: 0;
	}
	
	article.veranstaltungen.index aside.filter div:nth-child(even) {
	margin-left: 12px;
	}
  
  div.anmeldung {
  padding: 64px 16px 16px 16px;
  }
  
  form.anmeldung label.zweidrittel,
	form.anmeldung label.drittel,
	form.anmeldung label.halb {
	width: 100%;
	}
	
	form.anmeldung label.rechts,
	form.anmeldung label.links,
	form.anmeldung label.mitte {
	padding-right: 0;
	padding-left: 0;
	}
	
	ul.filter.kat {
  column-count: 1;
  }
	
	footer div.partner li {
	padding: 0 0 4em 0;
	}

}