/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */  
/* 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: /*alt: column-reverse*/ column;
  flex-direction: /*alt: column-reverse*/ column;
  }
  
header, nav, article, section, aside, footer{
  /*border-radius: 0.5em;*/
  /*margin: 1em;*/
  /*padding: 1em;*/
  /*box-shadow: inset -2px -2px 10px #ccc;*/
  }

nav{
  border-bottom: 5px solid #F90;
  }

 /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */     
      
      
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */      
/* große Viewports */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* kleine Monitore */
@media only screen and (min-width: 600px){
  main{
    -webkit-flex-direction: row;
    flex-direction: row;
    }
    
  /*header, */article, nav/*, section, aside, footer*/{
    -webkit-flex: 1;
    flex: 1 ;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    }

   nav{
   min-width: 185px;
   max-width: /*185px;*/ 100%;
   /*flex-wrap: wrap; */
   
   border-bottom: 0px solid #F90;
   } 

  #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%;
  }
  
  .inhaltsbereich_menu_links_text{
  display: block;
  }
    
  }
  

/* Tabletts */
@media only screen and (min-width: 760px){
  main{
    -webkit-flex-direction: row;
    flex-direction: row;
    }
    
  /*header, */article, nav/*, section, aside, footer*/{
    -webkit-flex: 1;
    flex: 1 ;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    }

   nav{
   min-width: 185px;
   max-width: /*185px;*/ 100%;
   /*flex-wrap: wrap; */
   
   border-bottom: 0px solid #F90;
   } 

  #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%;
  }
  
  .inhaltsbereich_menu_links_text{
  display: block;
  }
    
  }


/* Mittlere Monitore */
@media only screen and (min-width: 980px){
  main{
    -webkit-flex-direction: row;
    flex-direction: row;
    }
    
  /*header, */article, nav/*, section, aside, footer*/{
    -webkit-flex: 1;
    flex: 1 ;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    }

   nav{
   min-width: 185px;
   max-width: /*185px;*/ 100%;
   /*flex-wrap: wrap; */
   
   border-bottom: 0px solid #F90;
   } 

  #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%;
  }
  
  .inhaltsbereich_menu_links_text{
  display: block;
  }
  
  }


/* Große Monitore */
@media only screen and (min-width: 1280px){ /*495px*/
  main{
    -webkit-flex-direction: row;
    flex-direction: row;
    }
    
  /*header, */article, nav/*, section, aside, footer*/{
    -webkit-flex: 1;
    flex: 1 ;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    }

   nav{
   min-width: 185px;
   max-width: /*185px;*/ 100%;
   /*flex-wrap: wrap; */
   
   border-bottom: 0px solid #F90;
   } 

  #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%*/
  }
  
  .inhaltsbereich_menu_links_text{
  display: block;
  }
  
  }

/*  
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: /*185px;*/ 1%;
  }

article{ /*background: orange;*/ }


/*
aside{
  background: blue;
  -webkit-flex-grow: 3;
  flex-grow: 3;
  }
  
footer{ background: purple; } */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@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_unterseite{
    font-size: /*alt: 2.1em*/ calc(2.1em * 0.8);
    }
    
  #textlogo3_unterseite{
    font-size: /*alt: 1.7em*/ calc(1.7em * 0.8);
    }    

  div.zeitmodul p.rechts,
  div.modul_blau p.rechts,
  div.modul_violett p.rechts{
    position: relative;
    }

#textlogo3_unterseite{
  display: none;
  }

.textlogo2_unterseite_unsichtbar{
  display: none;
  }

#textlogo2_unterseite{
  padding-bottom: 15px;
  }

#textlogo1_unterseite{
  padding-left: 15px;      
  padding-right: 2px;
  }

#brotkrumennavigation{
  border-bottom: 1px solid #003060;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 6px;
  padding-bottom: 5px;
  margin-bottom: 20px;
  text-align: left /*!important*/;    
  }

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_unterseite{
  display: none;
  }

.textlogo2_unterseite_unsichtbar{
  display: none;
  }

#textlogo2_unterseite{
  padding-bottom: 15px;
  }

#textlogo1_unterseite{
  padding-left: 5px;      
  padding-right: 5px;
  }    

#brotkrumennavigation{
  border-bottom: 1px solid #003060;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 6px;
  padding-bottom: 5px;
  margin-bottom: 20px;
  text-align: left /*!important*/;    
  }

  }

/* Photoalben - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - - - -  */

@media all and (min-width: 1025px){

  .album{
    /*width: 100%;*/
    /*width: calc(50% - 27px);*/
    width: 48%;  
    }
  
	}

@media all and (max-width: 979px){

  .album{
    /*width: 100%;*/
    /*width: calc(50% - 27px);*/
    width: 48%;  
    }
              
	}

@media all and (max-width: 900px){

  .album{
    width: 100%;
    /*width: calc(50% - 27px);*/  
    }
              
	}

@media all and (max-width: 759px){

  .album{
    /*width: 100%;*/
    /*width: calc(50% - 27px);*/
    width: 48%;  
    }
              
	}

@media all and (max-width: 740px){

  .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: 490px){

  .album{
    width: 100%;
    /*width: calc(50% - 27px);*/  
    }
              
	}