* {
  margin: 0; padding: 0;  /* löscht Browser-Vorgaben, damit der header ganz oben andockt */
}
/* nachtrag - hier wichtige standard-werte wieder hinzugefügt  */
h3, p, ul, ol { margin-bottom: 1em; }  /* Abstand nach unten */    
ul, ul { margin-bottom: 0; }  /* Verschachtelte Listen ohne Abstand */        
li { margin-left: 1em; }  /* Abstand von links */
/* nachtrag - bis hier */


p {
  font-weight: normal;
  font-size: 1.1em;
  color: #54544d; 
  margin-bottom: 0;
  
  
  column-count: 2;
  -moz-column-count: 2; 
  -webkit-column-count: 2;
  
  column-width: 300px;
  -moz-column-width: 300px;
  -webkit-column-width: 300px;
  
  orphans: 2;       /* orphans Minimale Zahl von Zeilen, die unten auf einer Seite zusammen gehalten werden sollen*/
  widows:  2;       /* Minimale Zahl von Zeilen, die oben auf einer neuen Seite zusammen gehalten werden sollen*/
  
  -webkit-widows: 2;
  -webkit-orphans: 2;
  
  -webkit-column-rule: 2px solid #54544d; /* Chrome, Safari, Opera */
    -moz-column-rule: 2px solid #54544d; /* Firefox */
    column-rule: 2px solid #54544d;
  
}

.img_br, div { 
  border-radius: 0.7em;   /*abgerundete Ecken*/ /*2em->schön rund auch auf kleinen displays; 3vmin immer gleichbleibend aber bei extremen formaten falsch*/
  padding: 0em;
}
.img_standard { 
  border-radius: 0.7em;
  margin: 1em;
  flex: 1 0 auto;
}
.img_large { 
  border-radius: 0.7em;
  flex: 1 0 auto;
  max-width: 100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .img_large {
        max-width: 100vw;      /* Style nur für IE 10 11 gültig */
    }
}


.img_thumb { 
  border-radius: 0.3em;
  margin: 1em;
}

div {
  margin: 0em 2em;
  display: block;  
  flex: auto;
}
.imageclass {
  margin: 1em 1em;
  padding: 0em;
  flex: inherit;  /*unset funktioniert nicht im IE*/
}                                

body {
  font-family: 'Lobster', Times, serif;
  background-color: #727177;
  background-attachment: fixed;   /* fixed <- bleibt fest relativ zum browser // scroll <- bleibt fest relativ zum Website-Inhalt */              
    background-image: -moz-radial-gradient(50% 50%, circle cover, #b2a5ae, #353136 100%);
    background-image: -webkit-radial-gradient(50% 50%, circle cover, #b2a5ae, #353136 100%);
    background-image: -o-radial-gradient(50% 50%, circle cover, #b2a5ae, #353136 100%);
    background-image: -ms-radial-gradient(50% 50%, circle cover, #b2a5ae, #353136 100%);
    background-image: radial-gradient(50% 50%, circle cover, #b2a5ae, #353136 100%)
  color: #ffffff;
  display: flex; min-height: 100vh; height: 100vh; flex-direction: column;          /*stickyfooter zusatz*/ /* add height:100vh to avoid the IE 10-11 'min-height' bug*/
}

main  {
  margin: 0 auto;   /*center on screen if screen larger than max-width*/
  width: 100%;
  max-width: 1042px;
  flex: 1 0 auto;  /*ohne '0 auto' klebt der footer im IE unterm header*/ 
}

.fading {
  margin: 1em 1em 0em 1em;
}

.top01_absolute {
  position: absolute;
  /* width: 100%; */
  max-width: 1010px;
  margin: 0;
}
.top02_absolute {
  position: absolute;
  /* width: 100%; */
  max-width: 1010px;
  margin: 0;
}
.top03_absolute {
  position: absolute;
  /* width: 100%; */
  max-width: 1010px;
  margin: 0;
}

.flexrow {
  text-align: center;
  display: flex; 
  flex-flow: row wrap;
  justify-content: space-between;
}
.flexrow_thumb {
  text-align: right;
  clear: both;
  display: flex; 
  flex-flow: row wrap;        
  justify-content: space-between;
}
.flexrow_thumb_green {
  clear: both;
  display: flex;        
  justify-content: space-between;
}
.flexrow_thumb_revision {
  display: flex; 
  flex-flow: row wrap;        
  justify-content: flex-start;
}
.flexrow_thumb_larsmaus {
  display: flex; 
  flex-flow: row wrap;        
  justify-content: center;
}
#fineart {
      justify-content: center;          
}
                    
header, footer {                   
  width: 100%;
  background-color: #dc397a;
  min-height: 3em;
  text-align: center;
  line-height: 250%;
  /* flex: none; /*damit er im IE funktioniert*/
}

.divider {
  width: 100%;
  /* background-color: #cd4e83; */
  height: 5em;
  /*line-height: 250%;*/
  flex: none;
}

.flex_div01 {
  display: flex;
  flex-flow: row wrap;
}
.flex_ul01 {
  margin: 0.4em 0em 1em 0em;
  display: flex;
  flex-flow: column;
  align-self: flex-end;  
    
    flex: 0 1 auto;
    align-items: space-around;
    align-content: flex-start;
    list-style: none;
}


/* BILDER */
img { 
  max-height: 100vh;
  max-width: 61vw;
}
#ancient_falls_at_night {
  max-width: 1010px;
  max-height: 100%;
  width: 100%; 
  height: auto;
  z-index: 10;
}

.width100 { 
  width: 100%;  
}

.caption {
  justify-content: center;
  display: flex;
align-items: center;
}

.icon {
  border-radius: 0em;
  vertical-align: middle;
}

#portrait {
  border-radius: 0.3em;
  /* max-width: 400px; */
  /* max-height: 711px; */
  /* width: 100%;- */
  
  margin: 0.3em 1em 0.3em 0em;
}
#portrait_impressum {
  border-radius: 0.3em;
  max-width: 140px;
  max-height: 249px;
  width: 100%;
  
  margin: 0.3em 0.3em 0.3em 0em;
}

.link {
  border-radius: 0.3em;
  max-width: 320px;
  max-height: 180px;
  width: 100%;
  
  margin: 0.3em 1em 0.3em 0em;
}
#orange {
  border-radius: 0em;
  max-width: 312px;
  min-width: 200px;
  max-height: 190px;
  width: 100%;
  
  margin: 0em;
}
#geschenke {
  border-radius: 0em;
  max-width: 320px;
  /*min-width: 320px;
  max-height: 320px;*/
  width: 100%;
  
  margin: 0em;
}
#oekostrom {
  border-radius: 0em;
  max-width: 157px;
  /* min-width: 157px; wenn an, skaliert der link-button nicht, wenn aus, gibt es ein problem bei sehr schmalen breiten!*/
  max-height: 54px;
  width: 100%;
  
  margin: 0em;
}

#pirat {       
  max-width: 640px;
  max-height: 360px;
}
#layout_bird {
  max-width: 281px;
  max-height: 375px;
  width: 100%;
  height: 100%;
  display: block; 
}
#story_bird {
  max-width: 200px;
  max-height: 375px;
  width: 100%;
  height: 100%; 
}
#ancient_falls {
  max-width: 1010px;
  max-height: 100%;
  width: 100%; 
  height: auto;
  z-index: 20;
  margin-top: -100%;
  /*
  margin-top: -480px; */     /*wichtig, damit die bilder korrekt übereinander liegen*/
  vertical-align: 100%;   /*wichtig, damit die bilder korrekt übereinander liegen*  - vertical-align kann auch die WErte haben: top, middle, bottom, text-top, text-bottom, baseline */
}
.leerobjekt1010_1 {
  max-width: 1010px;
  max-height: 100%;
  width: 100%; 
  height: auto;
  z-index: 20; 
  display: block;
}

#larsmaus {
  margin: 1.5% 0 0 2.3%;   
  max-width: 303px;  
  max-width: 30%;  /*40% optimum scaling; 30% perfect scaling*/
  z-index: 30;
  position: relative;
}

#larsmaus_at_night {
  margin: 1.5% 0 0 2.3%;    
  max-width: 303px; 
  max-width: 30%;  /*40% optimum scaling; 30% perfect scaling*/
  z-index: 30;
  position: relative;
}

#illustrations {
  margin: 0.9% 0 0 27%;
  max-width: 373px;
  max-width: 37%; /*40% optimum scaling; 30% perfect scaling*/
  z-index: 30;
  position: relative;
}

#illustrations_at_night {
  margin: 0.9% 0 0 27%;
  max-width: 373px;
  max-width: 37%; /*40% optimum scaling; 30% perfect scaling*/
  z-index: 30;
  position: relative;
}
#night-mode {
  margin: -1.3% 0 0 87.4%;
  max-width: 113px;
  max-width: 11%; /*40% optimum scaling; 30% perfect scaling*/
  z-index: 30;
  position: relative;
}
#back-to-day-mode {
  margin: -1.3% 0 0 87.4%;
  max-width: 113px;
  max-width: 11%; /*40% optimum scaling; 30% perfect scaling*/
  z-index: 30;
  position: relative;
}
#t-rex {
  margin: 11.5% 0 0 55%; 
  max-width: 448px;
  max-width: 42.9%; /*40% optimum scaling; 30% perfect scaling*/
  z-index: 30;
  position: relative;
}

#larsg {
  margin-bottom: 0;  
    /*40% optimum scaling; 30% perfect scaling*/
  z-index: 20;
  
  max-width: 165px;
  max-height: 37px;
  width: 100%;
}
#larsmaus_link {

  margin-bottom: 0;  
    /*40% optimum scaling; 30% perfect scaling*/
  z-index: 20;
  
  max-width: 400px;
  max-height: 77px;
  width: 100%;
  
  margin: 0.3em 1em 0.3em 0em;
}

.larsmausheadbox {
  margin-bottom: 0;  
    /*40% optimum scaling; 30% perfect scaling*/
  z-index: 20;
  
  max-width: 130px;
  max-height: 25px;
  min-width: 130px;
  width: 100%;
  vertical-align: top;
}

.line_larsmaus {
  line-height: 0%;
}

.headbox{
  background-color: #000000;
  padding: 1.0em 1.5em;
  width: 100%;
}
.headboxhalfchild{
  max-width: 400px;
}
.headboxtext{
  width: 100%;
  
  
}  

.small200{
  background-color: #000000;
  padding: 1.0em 1.5em;
  /* float: left; */
  width: auto;        /*200px ursprünglich*/  /*auto ist löschbar*/       /*/// mit pixeln WICHTIGE DESIGN GRÖSSE IN FLEXBOX ///*/ 
  text-align: left;
}

.small200b{
  min-width: 180px;
  flex: 1;
  text-align: center;
}

.small200max{
  min-width: 180px;
  width: 400px;
  flex: 1;
}

.small_thumb{
  flex: 1;
  justify-content: flex-start;
  text-align: center;
}

@media only screen and (max-width: 660px) {
    [id*="headline001"] {
        display: none;
    }
}
@media only screen and (min-width: 659px) {
    [id*="headline002"] {
        display: none;
    }
}

.smallorange{
  background-color: #cd4e83;
  padding: 1.0em 1.5em;
  width: auto;
  display: flex;
  text-align: start;
}
@media only screen and (max-width: 522px) {
    [class*="smallorange"] {
        flex-flow: row wrap;
    }
}

@media only screen and (max-width: 311px) {
    [id*="leerbox01"] {
        display: none;
    }
}
@media only screen and (min-width: 977px) {
    [id*="leerbox01"] {
        display: none;
    }
}
#leerbox01 {
  flex: 3 0 0;
}
@media only screen and (max-width: 392px) {
    [id*="leerbox02"] {
        display: none;
    }
}
@media only screen and (min-width: 978px) {
    [id*="leerbox02"] {
        display: none;
    }
}
@media only screen and (min-width: 545px) and (max-width: 624px) {
    [id*="leerbox02"] {
        display: none;
    }
}
#leerbox02 {
  flex:3 0 0; /*(nur flex:3; gibt probleme im IE)*/  
}

.leerbox {
  /*flex:3 0 0; (nur flex:3; gibt probleme im IE)*/
  flex-grow: 3;
  flex-shrink: 3;
  flex-basis: 0px;
}
.basicbox {
  /*flex:3 0 0; (nur flex:3; gibt probleme im IE)*/
  flex-grow: 3;
  flex-shrink: 3;
  flex-basis: 150px;
}


h1 {
  text-align: center;
  margin: 1em 0 0 0;
  font-weight: bold;
  line-height: 0.9;
  font-size: 4em;
  color: #cd4e83;
  column-span: all;
}

h2 {
  margin: 2em 0 0 1.6em;
  font-weight: bold;
  font-size: 2em;
  color: #cd4e83;
  column-span: all;
}
.h2_impressum {
  margin: 0 0 0 1.6em;
}

h3 {
  font-weight: normal;
  font-size: 1.5em;
  color: #8e8e85;
  flex: auto;
  column-span: all;
}
.h2_sub {
  font-size: 0.8em;
  font-style: oblique;
}
.h3_sub {
  font-size: 0.9em;
}
.h3_subsub {
  font-size: 0.7em;
  color: #54544d;
}
.h3_big {
  font-size: 1.2em;
}
.h3_sub_dark {
  font-size: 0.9em;
  color: #63635b;
}             
.h3_sub2 {
  font-size: 0.5em;
}             
.h3_sub3 {
  font-size: 0.8em;
}

h4{
  font-weight: normal;
  font-size: 1.1em;
  color: #b2a5ae; 
  margin-bottom: 0;
  column-span: all;
}

.infotext{
  font-size: 1.0em;
  color: #54544d; 
  margin-bottom: 0;
}

.backtochoice {
  font-size: 0.5em;
  color: #cd4e83;
  text-decoration: none;
}
.link_style_dark {
  color: #cd4e83; 
  text-decoration: none;
}
.link_style {
  color: #ffffff; /* #8e8e85; */ 
  text-decoration: none;
}
.link_style_dezent {
  color: #dc397a; 
  text-decoration: none;
}
.link_style_aet {
  color: #dc397a; 
  text-decoration: none;
}
#clear_both{
  clear: both;
}                     




/*---------------------------*/
/* begin --- LINK Effect --- */
/*---------------------------*/

/*
 * Replace all SVG images with inline SVG
 */

.text_hover_h3:hover {
  text-shadow: 0px 0px 15px #a64424;
  color: #ffffff;
}
.text_hover_h4:hover {
  text-shadow: 0px 0px 10px #a64424;
  color: #ffffff; 
}
.text_hover_green:hover {
  text-shadow: 0px 0px 10px #b9ff00;
  color: #f3ffa0; 
}
.text_hover_backtochoice:hover {
  text-shadow: 0px 0px 10px #a64424;
  color: #cd4e83;
}
.text_hover_pink:hover {
  text-shadow: 0px 0px 10px #a64424;
  color: #ff0066; 
}
.text_hover_h3, .text_hover_h4, .text_hover_red, .text_hover_backtochoice, .text_hover_green{
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}
.arrows{
  float: right;
  margin: 0em 2em 0em 0em;
}


.img_greenhover:hover {
  -webkit-filter: drop-shadow(0px 0 10px #f3ffa0);
  filter: drop-shadow(0px 0 10px #f3ffa0);
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}
.img_hover:hover {
  -webkit-filter: drop-shadow(0px 0 10px #a64424);
  filter: drop-shadow(0px 0 10px #a64424);
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}
.img_hover_prevnext:hover {
  -webkit-filter: drop-shadow(0px 0 10px #ff3f00);
  filter: drop-shadow(0px 0 10px #ff3f00);
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

.svg:hover path{
  fill: #ffffff;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
.svg:not(:hover) path{
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
.svg {
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}
/*-------------------------*/
/* end --- LINK Effect --- */
/*-------------------------*/




/*---------------------------*/
/* begin --- SNOW Effect --- */
/*---------------------------*/

#canvas {
	position: fixed;
  pointer-events: none;
}
/*-------------------------*/
/* end --- SNOW Effect --- */
/*-------------------------*/

@media only screen and (max-width: 522px) {
    [id*="smallorange"] {
        flex-flow: row wrap;
    }
}