/* CSS Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {  
  background-attachment: scroll;
  background-clip: border-box;
  background-color: transparent;
  background-origin: padding-box;
  background-position: 0;
  background-size: auto;

  line-height: 1;
  
}


html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Clearfix für moderne Browser*/
.clearfix:before,.clearfix:after {
  content: " "; 
  display: table; 
}
.clearfix:after {
  clear: both;
}

/*For IE 6/7 only*/
.clearfix {
  zoom: 1;
}

html, body, form, fieldset {
  margin: 0;
  padding: 0;
}

body.contentpane {
  width: auto;
  margin: 0.625em;
  text-align: left;
}

p {
  margin: 0;
  padding: 0;
}

a {
  color: rgba(250,250,250,0.9);
  outline: medium none;
  text-decoration: none;
}

a:active {
  text-decoration: underline;
}

fieldset {}
 
dt {}

input[type=checkbox] {
  position: absolute;
  visibility: hidden;
  
  z-index: 1;
}

input[type="button"] {
  cursor: pointer; 
  outline: none;
  
  margin: 0;
  padding: 0;
  border: 0;
}
.fullsizereadon {position:absolute; width:100%; height:100%; top:0; left:0;}

.fullsizereadon:hover {cursor: pointer;}

legend { /* blendet legenden aus nötig für E-Mail */ display: none;}

label {
  color: rgba(41,41,41,0.7);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.313em;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 100%;
  text-align: left;
  
  position: absolute; 
  z-index: 2;
}

button {  
  background: rgba(0,0,0,0);  
  display: inline-block;
   
  color: rgba(41,41,41,0.7);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.313em; 
  text-transform: uppercase;  
  
  border-color: rgba(41,41,41,0.7);
  border-radius: 1.563em;
  border-style: solid;
  border-width: 0.050em;
  padding: 0.6em 0.9em 0.4em;
  
  margin-top: 1.000em;
}
.contact {margin-left: 4.000em;}


/* zusätzlicher Code */
.pagenav {display: none;}
.readercontent {visibility: hidden; height: 0;}


/*Anfang Startseite*/

.fixwrappermobil {display: none;}


/* Hintergrundbilder*/
.start, .kategorie, .buch, .theater, .oper, .film, .journalismus, .aktuelles, .biographie, .galerie, .kontakt, .links, .presse, .impressum, .test {
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: rgb(255,255,255);
}

.start {background-image: url("/images/backgrounds/treppemotiv.jpg"); position: fixed;}
.kategorie {background-image: url("/images/backgrounds/treppemotiv.jpg");}
.buch {background-image: url("/images/backgrounds/treppemotiv.jpg");}
.theater {background-image: url("/images/backgrounds/treppemotiv.jpg");}
.oper {background-image: url("/images/backgrounds/treppemotiv.jpg");}
.film {background-image: url("/images/backgrounds/treppemotiv.jpg");}
.journalismus {background-image: url("/images/backgrounds/treppemotiv.jpg");}
.aktuelles {background-image: url("/images/backgrounds/treppemotiv.jpg");}
.biographie {background-image: url("/images/backgrounds/treppemotiv.jpg");}
.galerie {background-image: url("/images/backgrounds/treppemotiv.jpg");}
.links {background-image: url("/images/backgrounds/treppemotiv.jpg");}
.presse {background-image: url("/images/backgrounds/treppemotiv.jpg");}
.impressum {background-image: url("/images/backgrounds/treppemotiv.jpg");}
.kontakt {background-image: url("/images/backgrounds/treppemotiv.jpg");}

/* Ende Hintergrundbilder */ 

.bloggranzstart {display:none;} /* Macht den Kategorieblog unsichtbar */

/* Eröffnungsseite */

.starttitle {display:none;}

.sprachcontainer {
  position: relative;
  top:0;
  left: 0;
  width: 100%;
  height: 4em;
}

.sprachcontainer img {
  float: right;
  margin-right: 2.000em;
  margin-left: -1.500em;
  margin-top: 1.000em;
  
  width: 1.500em;
}

.mobilmenucontainer {display: none;}

.startslogancontainer {
  position: relative;
  width: 100%;
  height: 96%;
}
.startslogancontainer a {
  position: absolute; 
  left:0;
  top:0; 
  width: 100%; 
  height: 100%;
}

.startslogancontainer h1 {
  color: rgba(255,255,255,0.99);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.100em;
  line-height: 1.3000em;
  letter-spacing: 0.100em;
  
  margin-left: 1.300em;
  margin-top: 9.000em;
  
  width: 35.000em;
}

.startslogancontainer h2 {
  color: rgba(255,255,255,0.7);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 2.000em;
  line-height: 3.3000em;
  text-align: right;
  letter-spacing: 0.200em;
  text-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.99);
  
  margin-right: 5.000em;
  margin-top: 15.000em;
}

/*Ende Startseite*/

/* Anfang Kategorie */

.masterwrapper {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  
  overflow: hidden;  /* reduziert die ausladende Höhe des wrappers ohne den overlay zu beeinflussen lässt aber contactfeld verschwinden wenn es als absolut markiert ist */
  
  max-width: 82.500em;
 /* height: 100%; */
}

.overlaywhite {
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: rgba(255,255,255,0.9);
  
  position: fixed;
  top: 0;
  left: 0;
  
  width: 100%;
  height: 100%;
}

.topheader {  
  position: relative;
  top: 0;
  left: 0;

  width: 100%;
  height: 10.000em;
}

.headertitle h, .starttitle h {font-size: 2.000em;}

.headertitle h1, .starttitle h1 {font-size: 0.800em; line-height: 2.000em;}

.headertitle h2, .starttitle h2 {font-size: 2.000em;}

.headertitle h3, .starttitle h3 {font-size: 0.900em; line-height: 2.000em;}

.headertitle, .starttitle {
  color: rgba(41,41,41,0.7);
  font-family: 'Roboto Condensed', sans-serif;  
  
  position: relative;
  width: 100%;
  height: 4em;
}

.headertitle a {text-decoration: none;}

.schwarzerbalken {
  background: rgba(41,41,41,0.7);
  float: right;
  
  height: 0.15em; 
  width: 60%;
}

/* Header Haupt Menü */

.headermenu {
  position: relative;
  float: left;
  
  z-index: 6;
 
  list-style: none;
  margin: 0;
  padding: 0;
  
  width: 100%;
  max-height: 3.000em;
  min-height: 1.438em;  
  
  -webkit-transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;  
}

.headermenu ul {position: relative; margin-left: 40%;}

.headermenu ul li {
  display: inline-block;
  
  -webkit-transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;  
}

.headermenu ul li a {
  color: rgba(41,41,41,0.7);
  
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.1500em;
  text-decoration: none;
  letter-spacing: 0.2em;
  
  line-height: 3.000em;
  
  margin-right: 1.000em;
    
  -webkit-transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;   
}

.headermenu ul li a:hover {color: rgba(0,0,0,0.99);}
.headermenu ul li a:active {color: rgba(41,41,41,0.99);}

/* Aufklappmenü*/

.headermenu ul li ul {
  background: rgba(41,41,41,0.1);
  position: absolute; 
  
  display: block;
  
  visibility: hidden;
  opacity: 0;
  
  float: left;
  
  margin-left: 0;
  
  -webkit-transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;  
  
  border-radius: 2.000em;
  padding: 0.400em;
}

.headermenu ul li:hover ul {
  visibility: visible;
  opacity: 1;
  
  -webkit-transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;  
}


.headermenu ul li ul li {
  display: inline-block;
  
  -webkit-transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;  
}

.headermenu ul li ul li a {line-height: 1.500em;}


/* Anfang Allgemeine Bodycontent Definitionen */

.bodycontent {position: relative; display: inline;}


/* Ende Allgemeine Bodycontent Definitionen */

.leftcontent, .rightcontent  {
  position: relative; 
  display: inline-block; 
  width: 15%; 
  height: 100%;
}

.leftcontent {float: left;}
.rightcontent {float: right;}

.middlecontent {
  position: relative; 
 /* display: inline-block;  nur bei masterwrapper height 100% */
  
  margin-left: auto;
  margin-right: auto;
  
  width: 70%; 
  height: 100%;
}

/* Mobiles Kategoriemenü */ .mobilmenukategorie {display:none;}
/* Kategoriemenü */
.kategoriegalerie {margin-top: 8.000em;}

.kategoriegalerie ul { 
  width: 100%;
  height: 100%;
}

.kategoriegalerie ul li {   
  display: inline-block;  
  position: relative;
  overflow: hidden;
  
  margin-right: 5.500em;
  margin-bottom: 3.500em;
  
  max-height: 12.750em;
  min-height: 12.750em;
  
  max-width: 12.750em;
  min-width: 12.750em;  
  
  border: 0.3em solid rgba(255,255,255,0.9);  
  
  -moz-box-shadow: 0.188em 0.188em 0.25em rgba(102,102,102,0.7);
  -webkit-box-shadow: 0.188em 0.188em 0.25em rgba(102,102,102,0.7);
  box-shadow: 0.188em 0.188em 0.25em rgba(102,102,102,0.7);
  
  -moz-border-radius: 0.250em;
  -webkit-border-radius: 0.250em;
  border-radius: 0.250em;  
  
  -webkit-transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s ease-in-out 0s;
  transition: all 1s ease-in-out 0s;  
}

.kategoriegalerie ul li:hover {
  background-color: rgba(41,41,41,0.7);
  
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  transform: scale(0.95);  
  
  -webkit-transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s ease-in-out 0s;
  transition: all 1s ease-in-out 0s;

}

.kategoriegalerie ul li a {
  position: absolute;
  display: block;
  
  opacity: 0;
  
  top: 0;
  left: 0;
  
  max-height: 10.200em;
  min-height: 10.200em;
  
  max-width: 10.200em;
  min-width: 10.200em; 
}

.kategoriegalerie ul li a:hover {opacity: 1;}

.kategoriegalerie ul li img {
  position: absolute;  
  width: 100%;
}

.kategoriewriting {  
  background: rgba(41,41,41,0.3);
  color: rgba(255,255,255,0.99);      
  font-family: "Roboto Condensed",sans-serif;
  font-size: 1.250em; 
  text-align: center;
  line-height: 10.200em;
  letter-spacing: 0.2em;
}

/* Ende Kategorie */


/* Modul Inhalte */

.inhaltswrap {margin-top: 5.000em;}

.inhaltecontainer {
  background-color: rgba(255,255,255,0.65);   
  position: relative; /*  overflow: hidden; muss raus da sonst kann das overlay nicht dargestellt werden kann */  
  border: 0.4em solid rgba(41,41,41,0.7);   
  margin-bottom: 6.25em;

  width: 100%;
  height: 25em;
}

.inhaltecontainerlinks {
  background: rgb(0,0,0);
  position: relative;  
  display: inline-block;
      
  height: 25em;
  width: 25em;
}

.inhaltecontainerlinks img {width: 100%; height:100%;} 

.inhaltecontainerrechts {
  position: relative;  
  display: inline-block;  
  float: right;
  
  height: 25em;
  width: 30em;  
}

.inhaltecontainerrechts div, .inhaltecontainerrechts h3, .inhaltecontainerrechts h2, .inhaltecontainerrechts h1, .inhaltecontainerrechts p, .inhaltecontainerrechts a, .textkorpus p, .textkorpus h1, .textkorpus h2, .textkorpus div, .textkorpus h3, .textkorpus h4, .impressumcontainer p, .impressumcontainer h1, .impressumcontainer h2, .impressumcontainer h3 {color: rgba(41,41,41,0.7); font-family: 'Roboto Condensed', sans-serif; text-align: justify; margin-right: 2.000em;}  
  
.inhaltecontainerrechts p, .textkorpus p, .inhaltecontainerrechts a, .impressumcontainer p {font-size: 1.000em; line-height: 150%;}
  
.inhaltecontainerrechts h1, .textkorpus h1, .impressumcontainer h1, .inhaltecontainerrechts h2, .textkorpus h2  {font-size: 2.250em; line-height: 200%;}

.impressumcontainer h2 {font-size: 1.750em; line-height: 200%;}

.inhaltecontainerrechts div, .inhaltecontainerrechts h3, .textkorpus div, .textkorpus h3, .impressumcontainer h3 {font-size: 1.250em; line-height: 200%;}

.textkorpus a {color: rgba(41,41,41,0.7); font-family: 'Roboto Condensed', sans-serif; text-align: justify;}  

.textkorpus {background: rgba(255, 255, 255, 0.85);}

.textkorpus.pageseperator {display: table-cell; width: 30%;}


/* overlay für die Inhalte */

input[type=checkbox]:not(:checked)~ .inhaltoverlay {
  display: none;
  visibility: hidden;
  opacity: 0;  
           
  -webkit-transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s ease-in-out 0s;
  transition: all 1s ease-in-out 0s;  
  
  -webkit-animation: fadeandenlarge 1s ease-in-out;
  -moz-animation: fadeandenlarge 1s ease-in-out;
  animation: fadeandenlarge 1s ease-in-out;    
}

input[type=checkbox]:checked ~ .inhaltoverlay {
  background: rgba(255,255,255,0.99);  
  
  display: block;
  visibility: visible;
  opacity: 1;
  cursor: auto;
  
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  
  text-align: center; /* plaziert Inhalte mittig */
  
  width: 100%;
  height: 100%; 
  
  -webkit-transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s ease-in-out 0s;
  transition: all 1s ease-in-out 0s;  
  
  -webkit-animation: fadeandenlarge 1s ease-in-out;
  -moz-animation: fadeandenlarge 1s ease-in-out;
  animation: fadeandenlarge 1s ease-in-out;  
}

input[type=checkbox]:checked ~ .overlaywhite {position:absolute;} /* Nach Brauchbarkeit überprüfen */

/* Inhalt des Overlays */

.overlayinhaltecontainer {}

.overlayspacer {margin-top: 5.000em;}

.overlayspacersmall {margin-top: 2.500em;}

/* close overlay  */

.closeoverlay, .closeoverlay_en {
  background-color: rgba(0,0,0,0.35);
  
  line-height: 5.500em;
  
  position: absolute;
  right: 10%;
  top: 6%;
  
  font-family: 'Roboto Condensed', sans-serif;
  text-align: center;
  text-decoration: none;
  
  cursor: pointer;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  
  width: 5.500em;
  height: 5.500em;
}

.closeoverlay:before {
  color: rgba(255,255,255,0.9);
  content: "ZURÜCK";
  font-size: 0.800em;
}

.closeoverlay:hover, .closeoverlay_en:hover {
  background-color: rgba(64,128,128,0.8);  
}

.closeoverlay_en:before {
  color: rgba(255,255,255,0.9);
  content: "BACK";
  font-size: 0.800em;
}


/* Videodefinitionen */

video {
  position: absolute;
  top: 3.000em;
  width: 100%;
  height: auto;
}

/* Bildgalerie */

.gallery ul { 
  width: 100%;
  height: 100%;
}

.gallery ul li {  
  background-color: rgba(255,255,255,0.99);
  
  display: inline-block;  
  position: relative;
  
  border: 0.4em solid rgba(41,41,41,0.1);    
  
  margin-right: 2.500em;
  margin-bottom: 2.500em;
  
  max-height: 10.750em;
  min-height: 10.750em;
  
  max-width: 10.750em;
  min-width: 10.750em;    
 
  -moz-box-shadow: 0.188em 0.188em 0.25em rgba(102,102,102,0.7);
  -webkit-box-shadow: 0.188em 0.188em 0.25em rgba(102,102,102,0.7);
  box-shadow: 0.188em 0.188em 0.25em rgba(102,102,102,0.7);
  
  -moz-border-radius: 0.250em;
  -webkit-border-radius: 0.250em;
  border-radius: 0.250em;  
}

.gallery ul li:hover {background-color: rgba(41,41,41,0.2);}

.gallery ul li > a, .gallery ul li > a img {display: block;}

.gallery ul li a img {
  display: block;
  
  margin-left: auto;
  margin-right: auto;
  
  margin-top: 9%;
  
  border: 15px solid rgba(238, 238, 238, 0.9);

  -moz-box-shadow: 3px 3px 4px rgba(102,102,102,0.9);
  -webkit-box-shadow: 3px 3px 4px rgba(102,102,102,0.9);
  box-shadow: 3px 3px 4px rgba(102,102,102,0.9);  
}

.gallery ul li a img:hover {
  transform: rotate(360deg) ;
  -webkit-transform: rotate(360deg) ;
  -moz-transform: rotate(360deg) ;
}

.overlayschriftcontainer {
  float: left;
  position: relative; 
  margin-top: 1.000em;
  opacity: 1;  
  width: 100%;
}

.overlayschriftcontainer p {
  color: rgba(41,41,41,0.9);      
  font-family: "Roboto Condensed",sans-serif;
  font-size: 1.000em;  
  text-align: center;  
  font-style: italic;
}

.inhaltoverlay img {  
  position: relative;
  margin-top: 5.000em;
  max-height: 50.000em;
  
  -webkit-box-shadow: 0px 2px 7px rgba(0,0,0,0.9);
  -moz-box-shadow: 0px 2px 7px rgba(0,0,0,0.9);
  box-shadow: 0px 2px 7px rgba(0,0,0,0.9);
  
  -webkit-animation: fadeandenlarge 1s ease-in-out;
  -moz-animation: fadeandenlarge 1s ease-in-out;
  animation: fadeandenlarge 1s ease-in-out;  
}


/*Animation der Bilder */ 

.inhaltoverlay:target img {

  -webkit-animation: fadeandenlarge 1s ease-in-out;
  -moz-animation: fadeandenlarge 1s ease-in-out;
  animation: fadeandenlarge 1s ease-in-out;  

}

@-webkit-keyframes fadeandenlarge {
  0% { -webkit-transform: scale(0.6); opacity: 0; }
  100% { -webkit-transform: scale(1); opacity: 1; }
}

@-moz-keyframes fadeandenlarge {
  0% { -moz-transform: scale(0.6); opacity: 0; }
  100% { -moz-transform: scale(1); opacity: 1; }
}

@keyframes fadeandenlarge {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

x:-o-prefocus, .inhaltoverlay img {height: 100%;}

/* Ende Animation der Bilder */ 

/* Links */

/* Mobil Menü für Kategorieauswahl */

.linkmenu {
  position: relative;
  display: block;
  cursor: auto;
    
  top: 4.000em;
  
  width: 100%;
  height: 39.000em;   
}

.linkmenu ul  {}

.linkmenu ul li {
  display: inline-block; 
  position: relative;
  
  margin-right: 4.000em;
  margin-bottom: 2.000em;
  
  width: 15.000em;
  height: 15.000em;  
}

.linkmenu ul li a {
  display: table;  
  
  color: rgba(255,255,255,0.7);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 2.000em;
  text-decoration: none;
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 3.500em;
    
  width: 100%;
  height: 100%;
  
  
  -moz-box-shadow: 0.188em 0.188em 0.25em rgba(102,102,102,0.7);
  -webkit-box-shadow: 0.188em 0.188em 0.25em rgba(102,102,102,0.7);
  box-shadow: 0.188em 0.188em 0.25em rgba(102,102,102,0.7);
  
  -moz-border-radius: 0.25em 4em 3.25em 1em;
  -webkit-border-radius: 0.25em 4em 3.25em 1em;
  border-radius: 0.25em 4em 3.25em 1em;  
  
  -webkit-transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s ease-in-out 0s;
  transition: all 1s ease-in-out 0s;    
}

.linkmenu ul li a:hover {
  background: rgba(41,41,41,0.45); 
  color: rgba(238,238,238,0.7);
  
  border: 0.1em solid rgba(255,255,255,0.9);  
  
  text-shadow: 5.588em -5.812em 0.05em rgba(102, 102, 102, 0.5);
  
  -moz-box-shadow: 0.188em 0.188em 0.25em rgba(102,102,102,0.7);
  -webkit-box-shadow: 0.188em 0.188em 0.25em rgba(102,102,102,0.7);
  box-shadow: 0.188em 0.188em 0.25em rgba(102,102,102,0.7);
  
  -moz-border-radius: 0.250em;
  -webkit-border-radius: 0.250em;
  border-radius: 0.250em;  
  
  -webkit-transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s ease-in-out 0s;
  transition: all 1s ease-in-out 0s;    
}

.modultext {
  color: rgba(41,41,41,0.7);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 2.500em;
  text-decoration: none;
  text-align: center;
  letter-spacing: 0.2em;
  line-height: 2.000em; 
  margin-bottom: 2.000em; 
}