* {
  margin: 0;
  padding: 0;
  }
 
html {
    width: 100%;
    height: 100%;
    }


body {
	font-family: 'Montserrat', 'Roboto',Arial, Helvetica, sans-serif;
  
  max-width: 1440px;
  min-height: 100vh;
    
    }   

ul {
    list-style: none;
    }

a {
   text-decoration: none;
   color: black;
  }

a:hover, a:focus, a:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: orange;
}  

.webdi {
    font-size: 60%;
     align-self: end;
    }
    
    
    
 .webdi li {
    white-space:nowrap;
    transform: rotate(-90deg);
	transform-origin: left top 0;
  
    }
   
   
    @media screen and (max-width:32.0rem) {
        
        .webdi {
        font-size: 50%;
        
           }
      }    

  
.nobr {
  white-space:nowrap;
} 

.rechts {
  float: right;
}


.grey {
background-color: #eaeaea;

        } 

.dgrau {
  color: #868686;
}        

/* für Textblock im grid, Schriftgrösse aufpassen aktuell über img gelöst */

.darkgrey {
    background-color: darkgrey;
    display:flex;
    width: 98%;
    height: 98%;
    
}

.darkgrey span {
    align-self: flex-end;
      margin: 1rem 1rem 3rem 1rem;
}


    
.important {
     color: orange;
     font-weight: bold;
      } 

    
 .white {
    color: white;
    font-size: 90%;
    line-height: 1.4;
    } 
    
 .white  a:hover {
     background-color: orange;
      }     
    
 .hidden {
  visibility: hidden;
 }
 

.basiscontainer {
  list-style:none;
  display:grid;
  grid-template-columns: 2fr 13% 52% 1fr; 
  grid-template-rows: auto;
  
  min-height: 100vh;
  margin: 0.2rem 0.5rem;
 
      }
      
   
      
        @media screen and (min-width:48.001rem)and (max-width:62.0rem) {
        /* Breite von 752 bis 992px*/
              .basiscontainer {
                     grid-template-columns: 2fr 9% 72% 1fr;     
            
            }
        }
        
     
        
        @media screen and (max-width:48.0rem) {
        /* Breite bis 752px */ 
         .basiscontainer {
             
            grid-template-columns: 1fr 5% 92% 1fr;  
            
            }
        }  
     
         
    
.gridcontainer {
  width: 100%;
  list-style:none;
  display:grid;
  grid-template-columns: minmax(50px, 1fr);
  grid-template-rows: auto;
  font-size: 100%;
   

}

.navi {
      display: flex;

      justify-self: right;
      padding: 1rem;
      
      } 
      

.navvertical {
       align-self: end;
       font-size: 90%;
          
      } 
      
.navhorizontal {
      
      justify-content: space-between;
      flex-flow: row wrap;
      background-color: white;
      
      }       
 
.sticky {
     position: sticky;
    /* bottom: 20; */
    bottom: 0;
    } 
 
            @media screen and (max-width:72.0rem) {
        /* Breite bis 992px*/
        
                .navvertical  {
                      visibility: hidden;
                
                }
        
                
        
              }

           @media screen and (min-width:72.1rem) {
        /* Breite von 752 bis 992px*/
        
               .navhorizontal  {
                      visibility: hidden;
                
                }
                
        
              }
              
              
          @media screen and (min-width:24.001rem) and (max-width:32.0rem) {
        
        .navhorizontal {
        font-size: 90%;
        
        }
      }
      
      @media screen and (max-width:24.0rem) {
        
        .navhorizontal {
        font-size: 80%;
        }
      }     
         

.navi li {
      text-align: right;
      padding: 0.2rem 0.5rem;
      } 


.gridcontainer img {
     max-width:100%;
      }
      


.griditem1 {
    grid-column: 1/5;
    grid-row: 1/3;
    
      }

.griditem2 {
    grid-column: 1/5;
    grid-row: 3/6;
   /* min-height: 55vh;   */
     justify-self:center;
    display: flex;
    
    
      }

.grobild {
    /*  height: 65vh; */
    padding-left: 2px;
    padding-right: 2px;
    
    

    
    
}
.grobild img {
    max-width: 100%;
    max-height: 600px;
    align-self: center;
    justify-self: center;
    border-bottom: 1px solid orange;
    
    
    } 

.grobild img:active {
    transform: scale(1.8) translateX(-15%);    
}

@media screen and (min-width: 80rem)  {
        /* Breite über   */
       
    .grobild {
    height: 100%;
    }
    
    
    
}




@media screen and (min-width:30.001rem) and (max-width:42.0rem) {
        /* Breite 480 bis 752px  */
       
    .grobild {
    height: 55vh;
    }
    
    
    
}

 @media screen and (max-width:30.0rem) {
        /* Breite bis 480px  */    
    
      .grobild {
    height: 45vh;
    }
}

.biocontainer {
      display: flex;
      flex-flow: row wrap;
 
      }
      
.biocontainer p {
      width: 80%;
      min-width: 20rem;
      padding-left: 4%;
      padding-bottom: 10px;
      line-height: 1.4;
      font-size: 98%;
      align-self: center;
      padding-right: 4%;
      margin: 0 auto;
      } 

      @media screen and (min-width:30.001rem) and (max-width:42.0rem) {
        /* Breite von 480px bis 752px  */
       
        .biocontainer p {
            width: 90%;
          }
            } 
              
      @media screen and (max-width:30.0rem) {
        /* Breite bis 480px  */
       
        .biocontainer p {
            font-size: 90%;
            width: 96%;
          
               }
                    
            }      
           

.biocontainer img {

    width:60%;
    max-width: 22rem;
    float:right;
    
      }

    
.biocontainer a > img {
	  display: block;
    margin-right: 6rem;
     height: 52px;
     width: 196px;
    float: left;
    
}

.galeriecontainer {
  
  list-style:none;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-template-rows: auto;

}

.galeriecontainer img {
    width:98%;
    
    }
    
 .galeriecontainer a:hover {
        background-color: orange;
        border-bottom: 2px solid orange;
        transition: 0.5s all ease-in-out;
        }   

      
        @media screen and (max-width:35.0rem) {
        
        .galeriecontainer {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        }
        
        }


.headruba {
      display: flex;
      flex-flow: row nowrap;
      font-size: 3.3rem;
      justify-content: space-between;
      padding: 0rem 0.4rem;
      }
      
      @media screen and (min-width:37.001rem) and (max-width:65.0rem) {
        
        .headruba {
        font-size: 3.0rem;
        }
      }
      
       @media screen and (min-width:27.001rem) and (max-width:37.0rem) {
        
        .headruba {
        font-size: 2.4rem;
        }
      }
      
      @media screen and (max-width:27.0rem) {
        
        .headruba {
        font-size: 1.7rem;
        }
      }
      


   .headruba li {
        
        justify-content: center;
        }



  .katruba li {
        text-align: center;
        }
        
        
         @media screen and (min-width:24.001rem) and (max-width:32.0rem) {
        
        .katruba {
        font-size: 76%;
        }
      }
      
      @media screen and (max-width:24.0rem) {
        
        .katruba {
        font-size: 55%;
        }
      }

   .katruba a:hover {
         background-color: white;
        }