* {
    margin: 0;
    padding: 0;
  }

body {    
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1em;
    color:white;
    /* background-color:#CC0000; */
    margin:0;
}

/* Hintergrundfarben für body - werden in MainHead.php abgefragt */
.atelierbg { background-color: #CC0000; }
.buchbg { background-color: #339933; }
.photobg { background-color: #666666; }
.designbg { background-color: #FF9900; }


header {
    width: 100%;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    min-height: 70px;
    /*height: 70px; */
    color: #F28585;

}

.footer_rot {
  background-color:#990000;
}
.footer_gruen {
  background-color: #006600;
}

.footer_grau {
  background-color: #999999;
}

.footer_gelb{
  background-color:#CC6600;
}

nav.HeaderHauptNav{
    font-size: 1.1em;
     height: 40px; 
    font-weight:500;
    text-align:center;
    font-size: 0.9em;
    color: #F28585;
}

nav ul{
    list-style-type:none;
    padding: 10px; 
}

nav li{
    display: inline;
    /*  padding:10px;  */
}

nav li.active {
    background-color: brown;
}

main { 
    margin: 10px;
    position:relative;
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
 }

.maincontent {
  max-width: 100%;
  margin-top: 5vh; /* urspr. height:300px; */
 }

 .maincontent.text{
  color: #19191b;
  max-width: 80vw; /*urspr. 70vw*/
  font-weight:400;
  print-color-adjust: economy;
  margin-bottom: 80px;
  overflow: auto; /*neu hinzu 07.22*/
 }

.maincontent.text p{
  font-size: 0.9em;
  line-height: 1.35em;
  margin-top: 1em;
}



.maincontent.text h1{
  color: #eb7474;
  font-size: 1.1em;
  font-weight:500;
  line-height: 2em;
  margin-bottom: 1em;
}

.maincontent.text h2{
  color: #eb7474;
  font-size: 1em;
 font-weight:500;
 line-height: 2em;
 margin: 1em 0;
}
.maincontent.text ul{
  font-size: 0.9em;
    margin-left: 2em;
  margin-top: 1em;
}

.maincontent.text li{
 line-height: 1.373em;
}


/* Farben Verlinkungen */

a { text-decoration: none; }

  /* rot */
  
.HeaderHauptNav a:link {
    color: #F28585;  }
  
.HeaderHauptNav a:visited {
    color: #F28585;   }
  
.HeaderHauptNav a:hover {
    color: #990000;   }

.footer_rot a:link {
    color: #F28585;}
  
.footer_rot a:visited {
    color: #F28585; }
  
.footer_rot a:hover {
    color: #CC0000;  }
  
/* gruen */

nav.HeaderBookNav{
text-align: center;
font-size: 0.9em;
color: #005E00;
font-weight: 500;
}

#hellgruen {color:#67CD67;}

.grueneLinks a:link {
    color: #005E00;
  }

  .grueneLinks a:visited {
    color: #005E00;
  }
  
.grueneLinks a:hover {
    color: #67CD67
  }
  
.footer_gruen a {
    color:#67CD67;
  }

/* grau */

nav.HeaderPhotoNav{
  text-align: center;
  font-size: 0.9em;
  color: #898989;
  font-weight: 500;
  }
  
  #hellgrau {color:#BEBEBE;}
  
  .graueLinks a:link {
      color: #898989;
    }
  
  .graueLinks a:visited {
      color: #898989;
    }
  
  .graueLinks a:hover {
      color: #BDBDBD
    }
    
  .footer_grau a {
      color:#d3d3d3;
    }
  
/* gelb */

nav.HeaderDesignNav{
  text-align: center;
  font-size: 0.9em;
  color: #CC6600;
  font-weight: 500;
  }
  
  #hellgelb {color:#ffce80;}
  
  .gelbeLinks a:link {
      color: #CC6600;
    }
  
  .gelbeLinks a:visited {
      color: #CC6600;
    }
  
  .gelbeLinks a:hover {
      color: #ffce80;
    }
    
  .footer_gelb a {
      color:#ffce80;
    }

.innerFooter {
   /* text-align: center; 
    max-width: 450px; 
    padding-top:5px;*/
    font-size: 0.9em;
    
    padding-left:2%;
    padding-right:2%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.flexlinks {
  display:flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.flexrechts {
  line-height:1.35em;
  display:flex;
  flex-direction:row;
  justify-content:space-around; /*space-evenly */
  /*  
  width: 95px;
  margin-left: 1.75em;
  position:absolute;
  display: inline-block;
  top: 5px;
  text-align: left;
*/  } 

.nebeneinander {
  display: flex;
  flex-direction:row;
  justify-content:center; /*ursp: space-around */
  width: 100%; /*90vh */
}

.nebeneinander.ohneAbstand img{
  margin: 0 0 1em 0;
  align-self:stretch;

}

.nebeneinander img{
  margin-bottom: 10px;
  margin: 0 1.85em 1em 1.85em;
}

.uebereinander {
  text-align: right;
  margin-right: 30px;
  display: flex;
  flex-direction: column;
}

.uebereinander img {
  margin-bottom: 20px;

}

.subImage{
  
  font-size: 0.85em;
  font-weight: 500;
  margin: 1em 2em 0 2.2em;
}

.subImage.centered{
 text-align:center;
}

.subImage.right{
  text-align:right;
}

.subImage.left{
  text-align:left;
}

.subImage.weitSlider{
  margin: 1.8em 5em;
}

.subImage.expo {
  color: #fea0a0;
}
.subImage.buch {
  color: #005E00;
}

.subImage.photo {
  color: #BDBDBD;;
}

.subImage.design{
  color: #CC6600;
}

@media all and (min-width:33em)
{ 
  .innerFooter {flex-direction: row;}
}

/* mobile Ansicht ab hier */

@media screen and (max-height: 700px)
{.bigimage {
  object-fit: cover;
  padding-bottom: 70px;
  }

  .nebeneinander img{
    margin-bottom: 10px;
    margin: 0.5em;
    width: 80%;
   
  }
}

@media only screen and (max-width: 33em) 
{
    *{
    /* max-height:200px; */
      overflow:unset;
    }

  .hidden{
      color: yellow;
      display: none;
    }
    
  .flex-item {
      margin: 1em .2em 0 .2em;
      padding: 1em .15em;
    }
  .flexrechts.book{
      flex-direction:column;
    }
  .innerFooter.book {
    flex-direction: row;
  }
  .flex-item.book {
    margin: 0;
    padding:0;
  }
  .kontakt {
    flex-direction:column;
  }

  .nebeneinander {
    flex-direction: column;
    align-items: center;
    text-align:center;
  }
  .nebeneinander img{
    margin:5px;
   
  }
  .nebeneinander.ohneAbstand img{
    align-self:center;
  }

  .uebereinander {
    text-align: center;
    margin-right: 0;
  }

  .subImage{
    margin-bottom:80px;
  }

} 
/* Ende mobile Ansicht */

.flex-item.arrow{
  padding: 10px;
  margin: 10px;
}

.flex-item{
  margin: .1em .25em .1em .25em;
	padding: .15em;
}

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

.kontakt img{
  margin: 10px;
}

img{   
    max-width: 100%;
    max-height: 100%;
    align-self:center;  /*neu ab 07.07 flex-start; */
}

.clear{
  text-align: center;
}

.clear.mittig{
  width:80vw;
}

.clear img{
  margin-bottom: 1em;
}

.imageSwitch img{
  cursor: alias; /*cursor*/
} 

.nextbutton{
  position: relative;
  margin:-10px 5px -30px 0;
  text-align:right;
}