/* ==========================================================================
   Styling and layout for all media
   ========================================================================== */
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in older browsers.
 * Correct `block` display not defined for `details` or `summary` in IE 11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * Remove tap delay in modern browsers.
 */
a,
input,
button {
  -ms-touch-action: none;
      touch-action: none;
}

/* Clearfix
   ========================================================================== */
/**
 * Clearfix using the 'A new micro clearfix hack' method.
 *
 * More info: http://nicolasgallagher.com/micro-clearfix-hack/
 */
header::after,
footer::after,
nav ul::after,
nav ol::after,
.clearfix::after,
.container::after,
.paginator::after {
  display: table;
  clear: both;
  content: "";
}





* {margin: 0px ; padding: 0px ;}
body { font-family: neue-haas-unica, sans-serif; font-weight: 400; font-style: normal; font-size: 16px; font-weight: normal; text-decoration: none; }

#intro { position: absolute; width: 100%; height: 100%; top: 0; background-image: url(images/39.jpg); background-attachment: fixed; background-position: center; background-size: 80%; background-repeat: no-repeat; }

#thegreatwrapper { position: absolute; width: 100%; height: 100%; top: 0; }

#header { position: fixed; top: 0px; right: 0px; height: 98%; margin-top: 30px; z-index: 10; }
#logo img { width: 200px; height: auto; float: right; padding-bottom: 1.5rem; padding-right: 165px; }
#wrapper_navigation a { display: block; text-align: right; margin-bottom: 0.5rem; }
#nav_mobile { display: none; }

a:link { text-decoration: none; color: #000000; }
a:visited { text-decoration: none; color: #000000; }
a:hover { text-decoration: none; color:  #000000; }
a:active { text-decoration: none; color:  #000000; }

#wrapper_navigation span { font-family: neue-haas-unica, sans-serif; font-weight: 600; font-style: normal; border-radius: 14px 0 0 14px; padding-left: 10px; padding-bottom: 2px; padding-right: 200px; }
div.navi { border-radius: 28px 0 0 28px; padding-left: 10px; padding-bottom: 2px; background: #37d6ff; margin-left: 38px; margin-bottom: -2px; line-height: 1.45rem; }
div.navi_geschichten { border-radius: 14px 0 0 14px; padding-left: 10px; padding-bottom: 2px; }
.link_bio { background: #6ed853; }
.link_buecher { background: #ff9c3b; }
.link_plakate { background: #dba5e5; }
.link_workshops { background: #37d6ff; }
.link_workshops.zweitezeile { line-height: 1rem;}
#wrapper_navigation span.link_workshops { background: rgba(255, 96, 55, 0.0); }
.link_geschichten { background: #ffff54; }
.link_original { background: #ffe3f6; }
.link_news { background: #caea70; }
.link_kontakt { background: #ff7e53; }
.navi_footer { position: absolute; right: 0px; bottom: 35px; }
.link_impressum { background: #ffdb4d; }
.link_datenschutz { background: #9be6fc; }


#wrapper_content { position: relative; margin-top: 60px; z-index: 9; }

#content_list { position: absolute; padding-left: 15%; width: 50%; }
#content_list img { height: 80px; width: auto; float: left; margin-right: 0.3rem; margin-bottom: 0.2rem;}
#content_list img:hover { -ms-filter: "alpha(opacity = 70)"; opacity: 0.7; }

#wrapper_article { position: absolute; top: 75px; width: 100%; padding-bottom: 2rem; }
#wrap_the_wrapper #wrapper_article { top: 200px; }
#title { position: relative; display: inline-block; border-radius: 0 20px 20px 0; padding-top: 5px; padding-left: 15%; padding-bottom: 10px; padding-right: 20px; font-family: neue-haas-unica, sans-serif; font-weight: 600; font-style: normal; font-size: 20px; }
#title.link_buecher { border-radius: 0 30px 30px 0;  }
.title_unterzeile { margin-top: -0.3rem; font-family: neue-haas-unica, sans-serif; font-weight: 400; font-style: normal; font-size: 16px; }
.title_sub { font-family: neue-haas-unica, sans-serif; font-weight: 600; font-style: normal; }
.posted { margin-bottom: 12px; font-size: 0.9rem; }
#article { width: 55%; margin-top: 1.5rem; padding-left: 15%; line-height: 24px; }
.article_img { margin-top: 8px; } 
.images_galerie { margin-top: 2rem; }
.images_galerie li { list-style: none; display: inline; }
video { margin-top: 2rem; }

#article.article_bio .article_img { width: 30%; padding-right: 3%; float: left; }
#article.article_bio .article_img img { width: 100%; height: auto; }
#article.article_bio .article_r { width: 67%; float: right; } /* width: 60%; max-width: 600px;  */
#article.article_bio .images_galerie img { height: 120px; width: auto; float: left; margin-right: 0.4rem; margin-bottom: 0.4rem; }

#article.article_buecher .article_img { width: 30%; padding-right: 3%; float: left; }
#article.article_buecher .article_img img { width: 100%; height: auto; }
#article.article_buecher .article_r { width: 67%; float: right; } /* width: 60%; max-width: 600px;  */
#article.article_buecher .images_galerie img { height: 120px; width: auto; float: left; margin-right: 0.2rem; margin-bottom: 0.2rem; }

#article.article_plakate .images_galerie img { width: 30%; height: auto; float: left; margin-right: 2%; margin-bottom: 1rem; }

#article.article_workshops .article_img { width: 30%; padding-right: 3%; float: left; }
#article.article_workshops .article_img img { width: 100%; height: auto; }
#article.article_workshops .article_r { width: 67%; float: right; padding-bottom: 3rem; } /* width: 60%; max-width: 600px;  */
#article.article_workshops .images_galerie img { height: 120px; width: auto; float: left; margin-right: 0.4rem; margin-bottom: 0.4rem; }

#wrapper_article div.layout_korr { margin-top: -2.3rem; }

#article.article_geschichten .images_galerie img { max-height: 200px; max-width: 30%; float: left; margin-right: 2%; margin-bottom: 1rem; }
#article.article_geschichten .images_galerie img { height: 180px; width: auto; float: left; margin-right: 0.4rem; margin-bottom: 0.4rem; }

#article.article_original .title_sub { margin-bottom: 12px; }
#article.article_original .article_img img { width: 100%; height: auto; margin-bottom: 0.4rem; }


#article.article_news { padding-bottom: 1rem; }
#article.article_news:last-of-type { padding-bottom: 0rem; }
#article.article_news .images_galerie { display: block; }
#article.article_news .images_galerie img { height: 200px; width: auto; float: left; margin-right: 0.2rem; margin-bottom: 0.2rem; }

#article p { margin-bottom: 12px; }
#article a { text-decoration: underline; }

ol { padding-left: 2rem; }
li { margin-bottom: 12px; }
bold, b { font-family: neue-haas-unica, sans-serif; font-weight: 600; font-style: normal; text-decoration: none; }
italic, i { font-family: neue-haas-unica, sans-serif; font-weight: 400; font-style: italic; text-decoration: none; }


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

#article { width: 52%; }

#article.article_bio .images_galerie img, #article.article_buecher .images_galerie img, #article.article_workshops .images_galerie img, #article.article_geschichten .images_galerie img { height: 100px; margin-right: 0.4rem; margin-bottom: 0.4rem; }
#article.article_buecher .images_galerie img { margin-right: 0.2rem; margin-bottom: 0.2rem; }
}

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

#article { width: 50%; }
#article.article_bio .images_galerie img, #article.article_buecher .images_galerie img, #article.article_workshops .images_galerie img, #article.article_geschichten .images_galerie img { height: 90px; }
}

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

#logo img { padding-right: 60px; }
#wrapper_navigation span { padding-right: 95px; }

#content_list { padding-left: 10%; width: 55%; }

#title { max-width: 55%; padding-left: 10%; }
#article { width: 60%; padding-left: 10%; }
#article.article_bio .images_galerie img, #article.article_buecher .images_galerie img, #article.article_workshops .images_galerie img, #article.article_geschichten .images_galerie img { height: 90px; }
}

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

#content_list img { height: 70px; margin-right: 0.2rem; }
}


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

#header { margin-top: 25px; }
#logo img { width: 175px; padding-right: 45px; }
#wrapper_navigation span { padding-right: 75px; }

#wrapper_content { position: relative; margin-top: 55px; }
#content_list img { height: 60px; margin-right: 0.2rem; }

#wrapper_article { top: 150px; }
#article.article_bio .images_galerie img, #article.article_buecher .images_galerie img, #article.article_workshops .images_galerie img, #article.article_geschichten .images_galerie img { height: 70px; }
}



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

#header { position: static; width: 100%; height: auto; float: right; }

#logo img { width: 165px; padding-right: 15px; }
#wrapper_navigation { width: 92%; padding-left: 4%; }

#nav_screen { display: none; }
#nav_mobile { display: block; margin-bottom: 1.5rem; }
#wrapper_navigation a { display: inline-block; text-align: left; margin-bottom: 0.5rem; }
#wrapper_navigation span { border-radius: 14px; padding-left: 10px; padding-bottom: 2px; padding-right: 10px; }
#wrapper_navigation span.link_workshops { background: #37d6ff; }
.navi_footer { position: static; display: inline; }

/* #wrap_the_wrapper { position: absolute; padding-bottom: 20px; } */
#wrapper_content { position: static; margin-top: 20px; width: 100%; }
#content_list { position: static; width: 90%; padding-left: 5%; }
#content_list img { height: 60px; margin-right: 0.2rem; }
#wrapper_article { position: static; width: 100%; top: 150px; }

#title { width: 90%; max-width: 90%; position: static; padding-left: 5%; padding-right: 5%; font-size: 16px; border-radius: 0px; }
#title.link_buecher { margin-top: 1.5rem; border-radius: 0px; }
.title_unterzeile { font-size: 14px; }
#article { width: 90%; padding-left: 5%; }
#article.article_news  .images_galerie { padding-top: 8px; }
#article.article_bio .article_r, #article.article_buecher .article_r, #article.article_workshops .article_r { float: none; width: 100%; clear: both; }
.article_img { margin-bottom: 20px; }
.images_galerie { margin-top: 1rem; }
.images_galerie li:last-of-type { padding-bottom: 10px; }
.images_galerie li:last-of-type img { padding-bottom: 10px; }
}