/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */  
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite untereinander  */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

main{
  /*background: green;*/
  display: -webkit-flex;
  display: flex;
 /*webkit-flex-direction: column;
  flex-direction: column;   */
  
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
  }
  
header, nav, article, section, aside, footer{
  /*border-radius: 0.5em;*/
  /*margin: 1em;*/
  /*padding: 1em;*/
  /*box-shadow: inset -2px -2px 10px #ccc;*/
  }

 /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */     
      
      
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */      
/* große Viewports */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* kleine Monitore */
@media only screen and (min-width: 600px){
  main{
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    }
    
  /*header, */article, nav/*, section, aside, footer*/{
    -webkit-flex: 1;
    flex: 1 ;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    }

   nav{
   min-width: 168px;
   max-width: /*168px;*/ 100%;
   /*flex-wrap: wrap; */
   } 

  #inhaltsbereich_text{
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px;  
  position: relative;
  background: #FFF none repeat scroll 0% 0%;
  margin-top: 0px;
  margin-bottom: 0px;
      margin-left: 0%;
  margin-right: 0px;
  }
  #alles{
  width: 98%;
  }    
  }
  

/* Tabletts */
@media only screen and (min-width: 760px){
  main{
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    }
    
  /*header, */article, nav/*, section, aside, footer*/{
    -webkit-flex: 1;
    flex: 1 ;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    }

   nav{
   min-width: 168px;
   max-width: /*168px;*/ 100%;
   /*flex-wrap: wrap; */
   } 

  #inhaltsbereich_text{
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px;  
  position: relative;
  background: #FFF none repeat scroll 0% 0%;
  margin-top: 0px;
  margin-bottom: 0px;
      margin-left: 0%;
  margin-right: 0px;
  }
  
  #alles{
  width: 80%;
  }    
  }


/* Mittlere Monitore */
@media only screen and (min-width: 980px){
  main{
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    }
    
  /*header, */article, nav/*, section, aside, footer*/{
    -webkit-flex: 1;
    flex: 1 ;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    }

   nav{
   min-width: 168px;
   max-width: /*168px;*/ 100%;
   /*flex-wrap: wrap; */
   } 

  #inhaltsbereich_text{
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px;  
  position: relative;
  background: #FFF none repeat scroll 0% 0%;
  margin-top: 0px;
  margin-bottom: 0px;
      margin-left: 0%;
  margin-right: 0px;
  }
  
  #alles{
  width: 70%;
  }  
  }


/* Große Monitore */
@media only screen and (min-width: 1280px){ /*495px*/
  main{
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    }
    
  /*header, */article, nav/*, section, aside, footer*/{
    -webkit-flex: 1;
    flex: 1 ;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    }

   nav{
   min-width: 168px;
   max-width: /*168px;*/ 100%;
   /*flex-wrap: wrap; */
   } 

  #inhaltsbereich_text{
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px;  
  position: relative;
  background: #FFF none repeat scroll 0% 0%;
  margin-top: 0px;
  margin-bottom: 0px;
      margin-left: 0%;
  margin-right: 0px;
  }
  
  #alles{
  width: 800px;/*60%*/
  }
  }

/*  
header{ background: yellow; }
*/

article{
  /*background: red;*/
  -webkit-flex-grow: 7;  
  flex-grow: 7;
  order: 1;   /*1=links, dann nach unten, -1=rechts, dann nach oben*/
     min-width: /*168px;*/ 1%;
  }

article{ /*background: orange;*/ }


/*
aside{
  background: blue;
  -webkit-flex-grow: 3;
  flex-grow: 3;
  }
  
footer{ background: purple; } */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media only screen and (max-width: 600px){
.philipplogo5{
  display: none;
  }
  
.unsichtbar{
  display: block; /* fuer 'Gottesdienstzeiten' */
  }  
  
  }
  

@media only screen and (max-width: 450px){
  #hauptnavigation_menu_oben ul{
    border-top: 1px solid #003060;
    }

  #hauptnavigation_menu_oben ul li{
    width: 50%;
    border-bottom: 1px solid #003060;
    }
  
  #hauptnavigation_menu_oben ul li a{
    display: block;
    text-align: center;
    } 

  #textlogo2_hauptseite{
    font-size: /*alt: 0.8em*/ calc(0.8em * 1.067);
    }
    
  #textlogo3_hauptseite{
    font-size: /*alt: 0.7em*/ calc(0.7em * 1.138);
    }    

  div.zeitmodul p.rechts,
  div.modul_blau p.rechts,
  div.modul_violett p.rechts{
    position: relative;
    }

#textlogo3_hauptseite{
  display: none;
  }

.textlogo2_hauptseite_unsichtbar{
  display: none;
  }

#textlogo2_hauptseite{
  padding-bottom: 15px;
  }

#textlogo1_hauptseite{
  padding-left: 15px;      
  padding-right: 2px;
  }
  
p img{
  width: 100%; 
  }  

.bildcontainer{
  width: 100%;

  margin-top: 0px;
  margin-bottom: 10px;
  margin-left: 0px;
  margin-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  }

.bildcontainer figure{
  width: 100%;
  }

.img_bildcontainer{
  width: 100%;
  }

.bfs{
  width: 220px;
  }
  
  }
  
@media only screen and (max-width: 320px){
  #hauptnavigation_menu_oben ul{
    border-top: 1px solid #003060;
    }

  #hauptnavigation_menu_oben ul li{
    width: 100%;
    border-bottom: 1px solid #003060;
    }
  
  #hauptnavigation_menu_oben ul li a{
    display: block;
    text-align: center;
    } 

  div.zeitmodul p.rechts,
  div.modul_blau p.rechts,
  div.modul_violett p.rechts{
    position: relative;
    }

#textlogo3_hauptseite{
  display: none;
  }

.textlogo2_hauptseite_unsichtbar{
  display: none;
  }

#textlogo2_hauptseite{
  padding-bottom: 15px;
  }

#textlogo1_hauptseite{
  padding-left: 5px;      
  padding-right: 5px;
  }
    
  }

/* Photoalben - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - - - -  */

@media all and (min-width: 874px){

  .album{
    /*width: 100%;*/
    /*width: calc(50% - 27px);*/
    width: 48%;  
    }
  
	}

@media all and (max-width: 759px){

  .album{
    /*width: 100%;*/
    /*width: calc(50% - 27px);*/
    width: 48%;  
    }
              
	}

@media all and (max-width: 720px){

  .album{
    width: 100%;
    /*width: calc(50% - 27px);*/  
    }
              
	}

@media all and (max-width: 599px){

  .album{
    /*width: 100%;*/
    /*width: calc(50% - 27px);*/
    width: 48%;  
    }
              
	}

@media all and (max-width: 500px){

  .album{
    width: 100%;
    /*width: calc(50% - 27px);*/  
    }
              
	}