/* Abridged version of Normalize.css
   ========================================================================== */
/* original authors: Nicolas Gallagher and Jonathan Neal - http://necolas.github.com/normalize.css/ */

/* corrects block display not defined in IE7-9, Firefox3 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

/* corrects inline-block display not defined in IE7-9, Firefox3 */
audio,
canvas,
video {
  display: inline-block;
  /* display and zoom IE7 fix for display:inline-block */
  *display: inline;
  *zoom: 1;
}

/* prevents modern browsers from displaying 'audio' without controls, remove excess height in iOS5 devices */
audio:not([controls]) {
  display: none;
  height: 0;
}

/* addresses styling for 'hidden' attribute not present in IE7-9, Firefox3, Safari4 */
[hidden] {
  display: none;
}

html {
  /* corrects text resizing oddly in IE7 when body font-size is set using em units -
     http://clagnut.com/blog/348/#c790 */
  font-size: 100%;
  /* always force scrollbar padding so we don't get 'jumping' */
  overflow-y: scroll;
  /* prevents iOS text size adjust after orientation change, without disabling user zoom -
     http://www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
  -webkit-text-size-adjust: 100%;
  /* as above, for Windows Phone */
  -ms-text-size-adjust: 100%;
}

/* Addresses margins set differently in IE7 */
p,
pre {
  margin: 1em 0;
}

/* addresses style set to 'bolder' in Firefox3-4, Safari4-5, Chrome */
b,
strong {
  font-weight: bold;
}

/* addresses CSS quotes not supported in IE7, addresses quote property not supported in Safari4 */
q {
  quotes: none;
}

q:before,
q:after {
  content: "";
  content: none;
}

/* prevents sub and sup affecting line-height in all browsers */
sub,
sup {
  /* 12px */
  font-size: .85714285714286em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* removes border when inside 'a' element in IE7-9, Firefox3, improves image quality when scaled in IE7 -
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}

/* consistent tables */
table {
  margin-bottom: 1em;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* make table cells align top and left by default */
th,
td {
  vertical-align: top;
  text-align: left;
}

/* addresses margins set differently in IE7 */
dl,
menu,
ol,
ul {
  margin: 1em 0;
}
dd {
  margin: 0 0 0 2em;
}

/* remove margins from nested lists */
dl dl,
ul ul,
ol ol {
  margin: 0;
}

/* addresses paddings set differently in IE7 */
menu,
ol,
ul {
  padding: 0 0 0 2em;
}


/* Clearfix
   ========================================================================== */
/* updated to prevent margin-collapsing on child elements in most situations -
   http://nicolasgallagher.com/micro-clearfix-hack/ */

.clearfix,
header,
nav ul,
.container,
footer,
#paginator,
#monthly-list {
  /* zoom IE7 fix */
  *zoom: 1;
}

.clearfix:before,
.clearfix:after,
header:before,
header:after,
nav ul:before,
nav ul:after,
.container:before,
.container:after,
footer:before,
footer:after,
#paginator:before,
#paginator:after,
#monthly-list:before,
#monthly-list:after {
  content: "";
  display: table;
}

.clearfix:after,
header:after,
nav ul:after,
.container:after,
footer:after,
#paginator:after,
#monthly-list:after {
  clear: both;
}


@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=e2c70345-6022-4fbc-82eb-f5c63fe5831e");
    @font-face{
        font-family:"Trade Gothic Next LT W01 Rg";
        src:url("style/Fonts/376eee11-9a10-4bc6-a111-8ab1e673bb6b.woff2") format("woff2"),url("style/Fonts/c702ae07-0339-4b2c-86b6-94ecb316d6d0.woff") format("woff");
    }
    @font-face{
        font-family:"Trade Gothic Next LT W01 Itali";
        src:url("style/Fonts/e4ab637e-0525-4580-b988-b533bf0d6b24.woff2") format("woff2"),url("style/Fonts/f8de229e-9129-404a-a4ca-82dd30257d13.woff") format("woff");
    }
    @font-face{
        font-family:"Trade Gothic Next LT W01 Bold";
        src:url("style/Fonts/ec10339d-18e7-4c13-9a86-00306eb3d186.woff2") format("woff2"),url("style/Fonts/98aa2c71-be1a-4f71-87b3-8867283a25b7.woff") format("woff");
    }




* { margin: 0px ; padding: 0px ; }
body { height: 100%; background-color: #e6ffea; font-family:"Trade Gothic Next LT W01 Rg"; }

#thegreatwrapper { width: 100%; height: 100%; background: url("images/36.png") no-repeat center; background-size: contain; font-size: 1.1rem; }

#header { position: fixed; overflow: scroll; width: 450px; height: 100%; background: #5CB783; }
#logo img { width: 80%; padding: 10% 11% 10% 9%; }
#navigation { margin-left: 25%; font-size: 1rem; line-height: 1.5rem; }
#navigation_smartphone { display: none; font-size: 1rem; line-height: 1.5rem; }
#navigation a, #navigation_smartphone a { display: block; text-decoration: none; color: black; }
#navigation a, #navigation_smartphone a { cursor: pointer; cursor: hand; }
#navigation a:hover, a:active, a.active { text-decoration:none; color: white; }
#navigation_smartphone a:hover, a:active, a.active { text-decoration:none; color: white; }
#navigation #social_media { margin-top: 1rem; }
#navigation #social_media a { display: inline; }
#navigation #social_media img { width: 25px; margin-right: 5px; }
#navigation div#sub-info { display: none; }
#navigation div#sub-info a { padding-left: 10px; }

/* Social Media Navigation normal */
#navigation div#social_facebook { display: inline-block; width: 25px; height: 25px; margin-right: 5px; background: url("images/2.png") no-repeat center; background-size: contain; }
#navigation div#social_facebook:hover { background: url("images/3.png") no-repeat center; background-size: contain; }

#navigation div#social_insta { display: inline-block; width: 25px; height: 25px; margin-right: 5px; background: url("images/4.png") no-repeat center; background-size: contain; }
#navigation div#social_insta:hover { background: url("images/5.png") no-repeat center; background-size: contain; }

#navigation div#social_twitter { display: inline-block; width: 25px; height: 25px; margin-right: 5px; background: url("images/6.png") no-repeat center; background-size: contain; }
#navigation div#social_twitter:hover { background: url("images/7.png") no-repeat center; background-size: contain; }

/* Social Media Navigation f. Smartphone */
#navigation_social-media_smartphone div#social_facebook { display: inline-block; width: 25px; height: 25px; margin-right: 5px; background: url("images/41.png") no-repeat center; background-size: contain; }
#navigation_social-media_smartphone div#social_facebook:hover { background: url("images/2.png") no-repeat center; background-size: contain; }

#navigation_social-media_smartphone div#social_insta { display: inline-block; width: 25px; height: 25px; margin-right: 5px; background: url("images/40.png") no-repeat center; background-size: contain; }
#navigation_social-media_smartphone div#social_insta:hover { background: url("images/4.png") no-repeat center; background-size: contain; }

#navigation_social-media_smartphone div#social_twitter { display: inline-block; width: 25px; height: 25px; margin-right: 5px; background: url("images/42.png") no-repeat center; background-size: contain; }
#navigation_social-media_smartphone div#social_twitter:hover { background: url("images/6.png") no-repeat center; background-size: contain; }

#navigation_social-media_smartphone { display: none; }
#navigation_social-media_smartphone #social_media { margin-top: -3.2rem; margin-bottom: 5rem; }

#content { padding-top: 2rem; margin-left: 520px; padding-right: 3rem; line-height: 1.6rem; }
#content a { text-decoration: none; color: #529c6c; }
#content a:hover, a:active, a.active { text-decoration: underline; color: #529c6c; }
#content .chapter { margin-bottom: 2rem; }
#content .chapter_sub { margin-bottom: 0rem; }
#content .chapter_sub + .fliesstext { margin-bottom: 3rem; }
#content .chapter_sub + .fliesstext:last-of-type { margin-bottom: 5rem; }
#content .fliesstext { margin-bottom: 5rem; }
#content table tr td:first-of-type { width: 130px; }
p.halbezeile { margin-top: -2rem; }

.images_galerie { margin-top: 1rem; margin-bottom: 1rem; }
.images_galerie img { height: 150px; width: auto; margin-right: 0.8rem; margin-bottom: 0.2rem; }
.images_galerie li { display: inline-block; margin-bottom: 0.6rem; }

#leichte_sprache { display: inline-block; width: 50px; height: 50px; margin-right: 5px; background: url("images/48.png") no-repeat center; background-size: contain; }
div#leichte_sprache:hover { background: url("images/47.png") no-repeat center; background-size: contain; }
#leicht-info.infofield { background: #e6ffea; }

#referentinnen_wrapper, #team_wrapper, #thementische_wrapper  { column-count: 3; column-width: 250px; column-gap: 30px;}
.referent_innen, .team, .thementische { width: 100%; padding-bottom: 3rem; break-inside: avoid; }
.referent_innen img, .team img, .thementische img { width: 60%; display: block; margin: 0 15%; margin-bottom: 1rem; }

.infobutton { cursor: pointer; cursor: hand; text-decoration: none; color: #529c6c;}
.infobutton:hover { text-decoration: underline; color: #529c6c; }
.info_active { text-decoration: none; color: #529c6c; }
.infofield { display: none; width: 95%; margin-bottom: 1.2rem; padding: 1rem 5% 0.5rem 0; background: white; }
.infofield p { margin-top: 0rem; margin-bottom: 0.5rem; line-height: 1.15rem; }

#foerderinnen_logos { width: 100%; }
#foerderinnen_logos #zeile_1 img { width: 100%; }
#foerderinnen_logos #zeile_2 img { width: 100%; }
#zauberluecke { display: inline-block; width: 50%; }

h1 { font-size: 1.1rem; font-family:"Trade Gothic Next LT W01 Bold"; font-weight: normal; }
strong { font-family:"Trade Gothic Next LT W01 Bold"; font-weight: normal; }
.small { font-size: 0.95rem; }

.goup-container { margin-right: 5%; margin-bottom: 30px; opacity: 0.8; }
.goup-container:hover { opacity: 0.2; }


.surface-section { width: 120px; }

.wish { width: 120px; }

.w-\[254px\] { width: 120px; }


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

#zauberluecke { width: 38%; }
}


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

#header { width: 400px; }
#navigation { margin-left: 25%; }
#content { margin-left: 470px; }
#zauberluecke { width: 34%; }
}


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

#header { width: 350px; }
#navigation { margin-left: 23%; }
#content { margin-left: 420px; }
#zauberluecke { width: 30%; }
}


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

#header { position: relative; width: 100%; height: 310px; }
#logo { width: 90%; padding: 5% 5% 3% 5%; }
#logo img { width: 50%; padding: 0; }
#navigation { display: none; }
/*Navigation Smartphone ohne Linie #navigation_smartphone { display: block; margin-left: 10%; padding-right: 5%; }*/
#navigation_smartphone { display: block; margin-left: 10%; margin-right: 10%; padding-top: 10px; border-top: 3px solid #e6ffea; }
#navigation_smartphone a { display: inline; margin-right: 20px; }
#navigation_social-media_smartphone { display: block; }
#content { padding-top: 2rem; padding-right: 0; margin: 0 10% 0 10%; word-wrap: normal; }
#zauberluecke { width: 40%; }
}


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

#header { height: 290px; }
}


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

#header { height: 280px; }
#logo img { width: 60%; padding: 0; }
#zauberluecke { width: 20%; }
.images_galerie img { height: 120px; margin-right: 0.8rem; margin-bottom: 0.2rem; }
}


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

#header { height: 270px; }
#logo img { width: 70%; padding: 0; }
#zauberluecke { width: 10%; }
}


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

#thegreatwrapper { font-size: 1rem; }
#header { height: 270px; }
#logo img { width: 80%; padding: 0; }
#navigation_smartphone { font-size: 0.95rem; line-height: 1.5rem; }
#content table tr td:first-of-type { width: 110px; }
}