@charset "utf-8";
/* CSS Document */


/* responsives Layout */

body {margin: 0;}

div#top{
	margin-left: 10%;
	margin-right: 10%;
  text-align: center;
  height: 100%;
  max-width: 1920px;
  
  background-color: white; 
}

div#top ul{
  display: inline-block; /*zentriert navbar horiz*/
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
  border-right: 1px solid #bbb;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 12px 12px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: gray;
  color: white;
}

/* div links*/

a.one:link, a.one:visited {
  background-color: #333;
  color: white;
  padding: 12px 12px;
  text-align: center;
  text-decoration: underlined;
  display: inline-block;
}

a.one:hover, a.one:active {
  background-color: rgb(240,0,0,0.5);
}

a.two:link, a.two:visited {
  background-color: #333;
  color: white;
  padding: 12px 12px;
  text-align: center;
  text-decoration: underlined;
  margin-left:20px;
  margin-right: 20px;
  
}

a.two:hover, a.two:active {
  background-color: rgb(0,0,255,0.8);
}

@media screen and (max-width: 460px) {
div#top{
	margin-left: 5%;
	margin-right: 5%;
  text-align: center;
  font-size: smaller;
  height: 100%;
  max-width: 1920px;
  
  background-color: white; /* For browsers that do not support gradients */
}

div#top ul{
  display: inline-block; /*zentriert navbar horiz*/
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
  border-right: 1px solid #bbb;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 8px 8px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: gray;
  color: white;
}

div#grad1 {
  margin-left: 5%;
  margin-right: 5%;
  max-width: 1920px;
}

p.linksbuendig {
	
  text-align: left;
}






}


/* Add a gray right border to all list items, except the last item (last-child) */
li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
} 

html {   
  font-family: Arial,Helvetica,sans-serif;
}

/* TEXT DECORATION Startseite Überschrift*/

@media screen and (min-width: 542px) {
	h1 {
	font-size: 22px;
	color: rgb(0,0,0,0.9);
  text-shadow: 15px 8px 18px rgb(0,0,0,0.6);
}
}

@media screen and (max-width: 540px) {
	h1 {
	font-size: 16px;
	color: rgb(0,0,0,0.9);
  text-shadow: 9px 7px 10px rgb(0,0,0,0.5);
}
}

@media screen and (max-width: 360px) {
	h1 {
	font-size: 14px;
	color: rgb(0,0,0,0.9);
  text-shadow: 9px 7px 10px rgb(0,0,0,0.5);
}
} 


/* responsive images CSS*/
.responsive {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: 100%;
}

div#inhalt 
{
  margin: auto; 
  margin-top: 12px;
  max-width: 1920px;
  /*background-color: gray; /* For browsers that do not support gradients */
}

div#grad1 {
  margin-left: 10%;
  margin-right: 10%;
  max-width: 1920px;
  
  /*background-color: gray; /* For browsers that do not support gradients */
}

p.linksbuendig {
	
text-align: left;}


div#keinumbruch {
	margin-left: 5%;
	margin-right: 5%;
    text-align: center;
	 white-space: nowrap;
}


div#grad2 {
	
  /* background-color: green; *//* For browsers that do not support gradients */
  padding-bottom: 16px;
  padding-top: 16px;  
  margin-left: 10%;
  margin-right: 10%;
  
  max-width: 1920px;
  color: black;
  text-align: center;
    
  text-decoration: none;
}

@media screen and (max-width: 540px) {
	div#grad2 {
	
  /* background-color: green; *//* For browsers that do not support gradients */
  margin-left: 5%;
  margin-right: 5%;
   /*margin: auto; */
  max-width: 1920px;
  color: black;
  text-align: center;
    
  text-decoration: none;
  font-size: 11px;
}
}

@media screen and (max-width: 340px) {
	div#grad2 {
	
  /* background-color: green; *//* For browsers that do not support gradients */
  margin-left: 10%;
  margin-right: 10%;
   /*margin: auto; */
  max-width: 1920px;
  color: black;
  text-align: center;
    
  text-decoration: none;
  font-size: 10px;
}
}

div#grad3 {
  
  margin-left: 10%;
  margin-right: 10%;
  /*margin: auto;  */
  max-width: 1920px;
  /*background-color: green; /* For browsers that do not support gradients */
}

div#grad4 {
  margin-left: 10%;
  margin-right: 10%;
  /* margin: auto;  */
  max-width: 1920px;
  color: white;
  background-color: #333;
  text-align: center;
  font-weight: 500;  
  /*background-color: blue; /* For browsers that do not support gradients */
  }
  
div#grad5 {
  
  max-width: 1920px;
  color: black;
  
  /*background-color: #333;*/
  text-align: center;
  font-weight: 500; 
font-size: large;  
  /*background-color: blue; /* For browsers that do not support gradients */
  }
  
  div#grad6 {
  margin-top:30px;
  margin-left: 10%;
  margin-right: 10%;
  max-width: 1920px;
  color: white;
  /*background-color: #333;*/
  text-align: center;
  font-weight: 500;  
  /*background-color: blue; /* For browsers that do not support gradients */
  }
  

figure.overlay {
  position: relative; 
  margin: auto;
  width: auto;
  z-index: 1;  
}  

figure.overlay figcaption { 
  margin-right: 10%;
  margin-left: 10%;
  position: absolute;    
  z-index: 1000;    
  top: 0;  
   
  padding: 18% 35% 30% 8%;    
  font-weight: 200;    
  color: rgb(20,20,250,0.9);
  text-shadow: 4px 4px 6px rgba(100,100,250, 0.6); 
   
font-size: 16px;  
font-size: 3.4vw;  
}


@media screen and (min-width: 1921px) {
	figure.overlay figcaption { 
   
  /*background-color: lightblue; /* For browsers that do not support gradients */
  
  margin-right: 10%;
  margin-left: 10%;
position: absolute;    
z-index: 1000;    
top: 0;  
/*optional background overlay*/    
/* background: rgba(255,255,255,0.1); */
/*text, adjust all values as desired*/    
padding: 18% 35% 30% 8%;     
font-weight: 200;    
color: rgb(20,20,250,0.9);
  /*text-shadow: 3px 6px 3px rgb(220,220,220,0.8);*/
   
/**some fallback value**/    
font-size: 64px;  
/**responsive size is roughly 3.4%  of the device's viewport width**/    
/*font-size: 3.4vw;  */    
 }

}

/* Gallery CSS*/


/* ======================================
Responsive Image gallery Style rules
======================================*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  padding: 0px 0%;
}

.heading-text {
  margin-bottom: 2rem;
  font-size: 2rem;
}

.heading-text span {
  font-weight: 100;
}

/* Responsive image gallery rules begin*/

.image-gallery {
  /* Mobile first */
  max-width: 1920px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.image-gallery .column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.image-item img {
  width: 100%;
  border-radius: 5px;
  height: 100%;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .image-gallery {
    flex-direction: row;
	
  }
}

/* overlay styles */

.image-item {
  position: relative;
  cursor: pointer;
}

.overlay_gal {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(60, 60, 60, 0.6);
  top: 0;
  left: 0;
  transform: scale(0);
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  /*transition: all 0.1s 0.1s ease-in-out;*/
  color: #fff;
  /* center overlay content */
  
  display: flex;
  align-items: center;
  justify-content: center;
  
}

/* hover */
.image-item:hover .overlay_gal {
  transform: scale(1);
}

/* Grossansicht */


  
  @media only screen and (min-width: 334px), 
       only screen and (min-height: 478px) {
 .grossansicht {
margin-top: 20px;
  
  width: 100%;
  height: 100%;
  text-align: center;
  
  }

.grossansicht img{
  max-width: 100%;
  max-height: 400px;
  }
  
} 

@media only screen and  (min-height: 540px) {
 .grossansicht {
margin-top: 20px;
  
  width: 100%;
  height: 100%;
  text-align: center;
  
  }

.grossansicht img{
  max-width: 100%;
  max-height: 460px;
  }
  
} 


@media only screen and  (min-height: 640px) {
 .grossansicht {
margin-top: 20px;
  
  width: 100%;
  height: 100%;
  text-align: center;
   
  }

.grossansicht img{
  max-width: 100%;
  max-height: 560px;
  }
  
} 

@media only screen and  (min-height: 840px) {
 .grossansicht {
margin-top: 20px;
  
  width: 100%;
  height: 100%;
  text-align: center;
   
  }

.grossansicht img{
  max-width: 100%;
  max-height: 760px;
  }
  
} 

@media only screen and  (min-height: 960px) {
 .grossansicht {
margin-top: 20px;
  
  width: 100%;
  height: 100%;
  text-align: center;
  
  }

.grossansicht img{
  max-width: 100%;
  max-height: 880px;
  }
  
} 

@media only screen and  (min-height: 1160px) {
 .grossansicht {
margin-top: 20px;
  
  width: 100%;
  height: 100%;
  text-align: center;
  
  }

.grossansicht img{
  max-width: 100%;
  max-height: 1080px;
  }
  
} 


@media only screen and  (min-height: 1360px) {
 .grossansicht {
margin-top: 20px;
  
  width: 100%;
  height: 100%;
  text-align: center;
  
  }

.grossansicht img{
  max-width: 100%;
  max-height: 1280px;
  }
  
}


@media only screen and  (min-height: 1560px) {
 .grossansicht {
margin-top: 20px;
  
  width: 100%;
  height: 100%;
  text-align: center;
  
  }

.grossansicht img{
  max-width: 100%;
  max-height: 1480px;
  }
  
}

@media only screen and  (min-height: 1760px) {
 .grossansicht {
margin-top: 20px;
  
  width: 100%;
  height: 100%;
  text-align: center;
  
  }

.grossansicht img{
  max-width: 100%;
  max-height: 1680px;
  }
  
} 

@media only screen and  (min-height: 1920px) {
 .grossansicht {
margin-top: 20px;
  
  width: 100%;
  height: 100%;
  text-align: center;
  
  }

.grossansicht img{
  max-width: 100%;
  max-height: 1840px;
  }
  
}