@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700&display=swap');

:root {
  --ZFS_Cyan: #009FE3;
  --ZFS_Cyan_50: #80cff1;
  --ZFS_Cyan_10: #e5f5fc;
  --ZUK_Magenta: #E6007E;
  --MOERS_Gruen: #9DAD3C;
  --MOERS_Gruen_80: #b1bd63;
  --MOERS_Gruen_20: #e6eace;
  --SONNEN_Gelb: #EDC618;
  --SONNEN_Gelb_50:#f6e38c;
  --SONNEN_Gelb_20: #fbf4d1;
  --GOETHE_Beige: #E2DFD0;
  --GOETHE_Beige_hell: #f8f7f3;
  --TAFEL_Grau: #4A4744;
  --TAFEL_Grau_50: #a4a3a1;
  --TAFEL_Grau_20: #dbdada;
  --DRUCK_Schwarz: #1D1D1B;
}

html, body { overflow-x: hidden; font-family: 'Open Sans', sans-serif; border: 0; margin: 0; color: var(--TAFEL_Grau); font-size: 18px; line-height: 1.5rem;}
h2 {color: var(--ZFS_Cyan); text-transform: uppercase; letter-spacing: .1rem; margin-top: 0px;}
h3 { color: var(--TAFEL_Grau); font-size: 1rem; margin-top: 2rem}
h4 { color: var(--TAFEL_Grau); margin: 0; margin-bottom: 6px; width: calc(100% - 50px)}
a { text-decoration: none; color: inherit; transition: 0.3s;}
a:hover {opacity: .6;}


.mainheader { height: 200px; color: var(--TAFEL_Grau);}
.mainheader nav { height: 25px; margin-right: 1em; margin-top: 1em;  color: var(--TAFEL_Grau); text-align: right; width: auto;}
.mainheader nav ul {list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid var(--ZFS_Cyan); padding: 5px; padding-bottom: .4rem; display: inline-block;}
.mainheader nav li {display: inline; font-size: .85em; margin-right: 2em;}
.mainheader nav li:last-child {margin-right: 0px;}
.mainheader nav li img {height: 1.7em; margin-bottom: -0.4em; margin-right: .4em; }

.mainheader .logo {  width: 700px; margin: 0 auto; margin-top: 45px;}
.mainheader .logo img {width: 300px; cursor: pointer; margin-left: calc(15px - 78px);}

.sprache {position: absolute; top:1em; left: 1em;}
.sprache a {display: block; color: var(--ZFS_Cyan) ; text-transform: uppercase; font-size: .8em; font-weight: 700;}
.sprache img {height: 1.7em; margin-bottom: -0.4em; margin-right: .4em; }


.mainnav { background-color: #009FE3; width: 100%; min-height: calc( 100vh - 280px); padding-top: 50px;}
.mainnav .main-container { width: 701px; margin: 0 auto; display: block;}
.mainnav a { border: none; display: inline-block; vertical-align: top; margin: 15px;}
.mainnav a:hover {opacity: .7;}
.mainnav figure { height: 280px; width: 200px; margin: 0; padding: 0;}
.mainnav figure img { height: 200px; width: 200px; border-radius: 10%; background-color: #999999; box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .2); object-fit: cover;
                  -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,.2);   -moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,.2);   box-shadow: 0px 0px 10px 1px rgba(0,0,0,.2);}
.mainnav figcaption { text-align: center; font-size: 1rem; font-weight: 600; padding-top: .5rem; color: #fff;}
.mainnav .main-ticker { width: 200px; color: #fff; }
.mainnav .main-ticker header { font-size: .9rem; font-weight: 700; margin: 0px; text-transform: uppercase; letter-spacing: .1rem; margin-bottom: .3em;}
.mainnav .main-ticker p { font-size: .85rem; font-weight: 400;  margin: 0px; margin-bottom: .75em; line-height: 1.6em; width: 255px;}
.mainnav .main-ticker p:before, main .main-ticker p:after { content: ' + + '; white-space:nowrap; }

.tafel { width: 100%; min-height: calc(100vh - 194px); background-color: var(--GOETHE_Beige_hell); position: absolute; top: 218px; display: none;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);   -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);   box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);}
.activ {display: inline-block;}
.tafel-rahmen { width: 670px; margin: 0 auto; display: flex; flex-wrap: nowrap; justify-content: space-between; margin-top: 50px;}
.tafel hr { height: 20px; background-color: var(--ZFS_Cyan); border: none; margin-bottom: 20px; margin-top: 4px;}
.tafel aside img {width: 100%;}
.tafel article { float: left; width: 670px; margin-bottom: 5em;}
.tafel .close { position: absolute; right: 40px; top: 40px; width: 50px; height: 50px; opacity: 1; cursor: pointer;}
.tafel .close:hover {opacity: .3;}
.tafel .close:before, .close:after { position: absolute; left: 25px; content: ' '; height: 55px; width: 1.5px; background-color: var(--ZFS_Cyan); }
.tafel .close:before { transform: rotate(45deg); }
.tafel .close:after { transform: rotate(-45deg); }
.tafel figure {margin: 0; margin-bottom: 2em; width: 100%;}
.tafel figure img {width: 100%;}
.tafel .gruppe  { width: 100%; margin-bottom: 10px; }
.tafel .gruppe a {border-bottom: .2px dotted; opacity: .9}
.tafel .gruppe a:hover {opacity: .3}
.tafel .gruppe header {  min-height: 36px; height:auto; padding-left: 15px; padding-top: 8px; margin-bottom: 8px;margin: 0px; display: flex; justify-content: space-between; width: calc(100% - 15px); cursor: pointer;}
.tafel .gruppe header span { height: 27px; width: 36px; margin-right: 10px; background-image: url(/assets/images/icon-klappe.svg);}
.tafel .gruppe.activ header span {background-image: url(/assets/images/icon-klappe_zu.svg);}
.tafel .gruppe section { padding: 15px; padding-top: 1px; width: calc(100% - 30px); display: none;}

.gruppe.ZFS_Cyan header       { background-color: var(--ZFS_Cyan_50);}
.gruppe.ZFS_Cyan header h4    {  }
.gruppe.ZFS_Cyan section      { background-color: var(--ZFS_Cyan_10);}

.gruppe.ZUK_Magenta header    { background-color: #ED6EA7}
.gruppe.ZUK_Magenta section   { background-color: #FADCEB}

.gruppe.Sonnen_Gelb header    { background-color: var(--SONNEN_Gelb_50);}
.gruppe.Sonnen_Gelb  header h4{  }
.gruppe.Sonnen_Gelb section   { background-color: var(--SONNEN_Gelb_20);}

.gruppe.Baum_Grün header      { background-color: var(--MOERS_Gruen);}
.gruppe.Baum_Grün header h4   { color: #fff}
.gruppe.Baum_Grün section     { background-color: var(--MOERS_Gruen_20);}

.gruppe.Goethe_Beige header   { background-color: #E2DFD0;}
.gruppe.Goethe_Beige  section { background-color: #F4F2ED;}

.gruppe.Rhein_Flieder header  { background-color: #5C5EA7; }
.gruppe.Rhein_Flieder header h4   { color: #fff}
.gruppe.Rhein_Flieder section { background-color: #EFEEF8;}

.gruppe.Rost_Rot header       { background-color: #A73123;}
.gruppe.Rost_Rot header h4   { color: #fff}
.gruppe.Rost_Rot section      { background-color: #EDD6CA;}

.gruppe.publikation {background-color: var(--GOETHE_Beige); line-height: 1.2em;}
.gruppe.publikation header {cursor: default; display: inline-block; padding-bottom: 7px; width: calc(100% - 65px)}
.gruppe.publikation .autor { font-size: .65em; line-height:1.2em;}
.gruppe.publikation .titel { font-weight: 600; font-size: .8em; line-height: 1.3em; margin: 0;}
.gruppe.publikation .paper { font-size: .65em; line-height: 1.4em; font-style: italic;}
.gruppe.publikation a {border: none; display: inline-block;}
.gruppe.publikation span { background-image: url(/assets/images/icon-downloadpdf.svg); width: 31px; height: 50px; display: inline-block; margin-bottom: 10px; margin-top: 5px; margin-left: 5px;}


.gruppe.kooperation section .bild { display: inline-block; padding-right: 15px; width: 250px; }
.gruppe.kooperation section .text { display: inline-block; width: 350px; vertical-align: top;}
.gruppe.kooperation header span { background-image: url(/assets/images/icon-link.svg);}
.gruppe.activ.kooperation header span { background-image: url(/assets/images/icon-link.svg); opacity: 0.7;}
.gruppe.kooperation section span img { padding-top: 15px; object-fit: cover; width: 250px; height: 250px;}
.gruppe.team header{ background-color: var(--ZFS_Cyan_50);}
.gruppe.team section { background-color: var(--ZFS_Cyan_10); }

.gruppe section.person {width: calc (100% - 30px); display: flex; flex-wrap: wrap; justify-content: space-between; background-color: rgba(255,255,255,.5); padding: 15px; margin-bottom: 10px;}
.gruppe section.person h5 { margin: 0; font-size: 1em; width: 100%;}
.gruppe section.person .text { width: calc(100% - 155px); display: inline-block; vertical-align: top;}
.gruppe section.person .text p {font-size: .8em; line-height: 1.6em; margin: 0px; margin-top: .5em; }
.gruppe section.person a {font-size: .8em; color: var(--ZFS_Cyan); cursor: pointer;}
.gruppe section.person  a::before { background-image: url(/assets/images/icon-pfeil.svg); background-position: 0px 5px; width: 18px; height: 18px; content: ' '; display: inline-block; background-repeat: no-repeat; margin-right: 6px;}
.gruppe section.person img {width: 140px; height: 200px; object-fit: cover;}

.gruppe.kontakt header{ background-color: var(--ZFS_Cyan_50);}
.gruppe.kontakt section{ display: block; background-color: var(--ZFS_Cyan_10);}


.pfeil::before  { background-image: url(/assets/images/icon-pfeil.svg); background-position: 0px 5px; width: 18px; height: 18px; content: ' '; display: inline-block; background-repeat: no-repeat; margin-right: 6px; margin-left: 5px;}
.pfeil { color: var(--ZFS_Cyan); cursor: pointer; font-weight: 700;}
iframe { width: 100%; height: 300px; border: none; margin-bottom: 1em; margin-top: 1em;}


.artikel { margin-bottom: 1em; width: 100%;}
.artikel header { background-color: none; height: 36px; padding-left: 0px; padding-top: 8px; margin: 0px; border-bottom: 2px solid var(--ZFS_Cyan_50)}
.artikel .artikelinhalt { padding-top: 15px; background-color: none; display: flex; justify-content: space-between;}
.artikel .artikelinhalt .text p { margin-top: 0px; padding-right: 20px;}
.artikel .artikelinhalt .bild { width: 200px; min-height: 200px; }
.artikel .artikelinhalt .bild img {width: 200px; min-height: 200px; object-fit: cover}


form .field {margin-bottom: 1em; display: flex; justify-content: space-between; flex-wrap:wrap; }
form .alert, .error {color: var(--ZUK_Magenta); margin-top: .5em; font-size: .9em;}
form label {text-align: right; width: 200px; line-height: 1.3em; padding-top: .4em;}
form input {width: calc(100% - 210px); height: 2em; padding-left: 15px;}
form input[type=submit] {background-color: var(--ZFS_Cyan_50); color: #fff; font-weight: 700;}
form input, form textarea { border: none; background-color: #fff; font-size: 1rem; font-family: 'Open Sans'}
form textarea { width: 100%; height: 200px; padding: 15px;}
form .honeypot { position: absolute; left: -9999px; }

footer { background-color: var(--ZFS_Cyan); color: #fff; width: 100%; height: 5em; line-height: 1.5em; font-size: .8rem; text-align: center; text-transform: uppercase; letter-spacing: .07em;}



@media screen and (max-width: 1315px) {
  .mainheader {font-size: 14px; height: 190px;}
  .mainheader nav {margin-top: .3em; }
  .mainheader nav li {margin-right: 1em; margin-bottom: .3em;}
  .mainheader .logo { margin-top: 45px;}
  .mainheader .logo img {width: 250px; margin-left: calc(15px - 65px);}
  .mainnav {min-height: calc( 100vh - 190px);}
  .tafel {top: 193px;}
}

@media screen and (max-width: 1024px) {
  .mainheader {font-size: 12px; }
  .mainheader nav ul { padding-bottom:.2rem;}
  main {padding-top:50px;}
}

@media screen and (max-width: 840px) {
  .mainheader .logo {width: 600px;}
  .mainheader .logo img {width: 220px; margin-left: calc(15px - 56px);}
  .mainnav {padding-top:30px;}
  .mainnav .main-container {width: 600px; }
  .mainnav a {margin: 13px;}
  .mainnav figure { width: 170px; height: 210px;}
  .mainnav figure img {width: 170px; height: 170px;}
  .mainnav figcaption {font-size: .9em; line-height: 1.4em;}
  .mainnav .main-ticker {width: 170px;}
  .mainnav .main-ticker p {width: 190px; font-size: .75rem;}
  .tafel { top: 192px;}
  .tafel-rahmen {width: 576px;}
  .tafel .gruppe header {min-height: 34px;}
  .gruppe section.person .text {width: calc(100% - 140px);}
  .gruppe section.person img {width: 130px; height: 195px;}
  .tafel .close {right: 20px;}
}

@media screen and (max-width: 720px) {
  html, body {font-size: 16px; }
  .mainheader {height: 170px;}
  .mainheader nav li.nav-time {display: none;}
  .mainheader .logo  {width: 540px; margin-top: 35px;}
  .mainheader .logo img { margin-left: 0px;}
  .mainnav {min-height: calc( 100vh - 170px); padding-top: 20px;}
  .mainnav .main-container {width: 540px; padding-top: 10px;}
  .mainnav figure { width: 150px; height: 200px;}
  .mainnav figure img {width: 150px; height: 150px;}
  .mainnav .main-ticker {width: 150px;}
  .tafel {top: 173px;}
  .tafel-rahmen {width: 550px;}
  .tafel hr {width: calc(100% - 30px); margin-left: 0px;}
  .tafel .gruppe header {min-height: 32px; }
  .gruppe section.person .text {width: calc(100% - 140px);}
  .gruppe section.person img {width: 130px; height: 195px;}
  .tafel .close {right: 20px; top:20px;}
}

@media screen and (max-width: 610px) {
    .mainheader nav li img {height: 2.5em;}
  .mainheader nav li.nav-termine {display: none;}
  .mainheader .logo {width: 480px;}
  .mainnav .main-container {width: 480px;}
  .mainnav figure { width: 130px; height: 170px;}
  .mainnav figure img {width: 130px; height: 130px;}
  .mainnav .main-ticker {width: 130px;}
  .mainnav .main-ticker p { width: 155px; font-size: .65rem}
  .tafel {top: 118px;}
  .tafel-rahmen {width: 480px;}
  .tafel hr {width: 100%; margin-left: 0px; margin-top: 30px;}
}

@media screen and (max-width: 510px)  {
  .mainheader {height: 135px;}
  .mainheader nav {width: auto; margin-left: 0em; order: 0}
  .mainheader .logo {margin-top: 20px; margin-left:20px; }
  .mainheader nav li.nav-termine {display: inline-block;;}
  .mainheader nav li a span {display: none;}
  .sprache span {display: none;}
  .sprache a {display: inline-block;}
  .sprache img {height: 2.7em;}
  .mainnav {min-height: calc( 100vh - 115px);}
  .mainnav a {margin: 5px;}
  .mainnav figure {width: 125px; height: 180px;}
  .mainnav figure img {width: 125px; height: 125px;}
  .mainnav figcaption {font-size: 1em; }
  .mainnav .main-ticker {width: 125px;}
  .mainnav .main-container {width: 421px;}
  .tafel-rahmen {width: 420px;}
  .tafel article {width: 400px;}
  .artikel .artikelinhalt .bild {display: none;}
}

@media screen and (max-width: 415px)  {
  html, body {font-size: 14px; }
  .mainnav .main-container {width: 344px;}
  .mainnav a {margin: 10px;}
  .mainnav figure { width: 150px; height: 195px;}
  .mainnav figure img {width: 150px; height: 150px;}
  .mainnav .main-ticker {width: 344px;}
  .mainnav .main-ticker p {width: 334px; font-size: 1rem}
  .tafel-rahmen {width: 344px;}
}

@media screen and (max-width: 355px)  {
  .mainheader .logo {margin-top: 20px;}
  .mainheader .logo img {width: 200px;}
  .mainnav .main-container {width: 295px;}
  .mainnav figure { width: 125px; height: 175px;}
  .mainnav figure img {width: 125px; height: 125px;}
  .mainnav figcaption {font-size: 1em;}
  .mainnav .main-ticker {width: 295px;}
  .mainnav .main-ticker p {width: 290px;}
  .tafel-rahmen {width: 290px;}
}