/* Hintergrundbild für den gesamten Body */
 body {
	background-image: url('fischmarkt13.jpg');
	background-size: cover; /* Das Bild wird so skaliert, dass es den gesamten Bildschirm abdeckt */
	background-position: center; /* Das Bild wird im Zentrum positioniert */
	background-attachment: fixed; /* Das Bild bleibt fixiert, wenn der Benutzer scrollt */
	margin: 0; /* Entfernt Standard-Abstände */
	height: 100vh; /* Setzt die Höhe auf die volle Ansichtshöhe */
  }
.lower{
  width:90px;
  margin:10% auto;
  padding:50px;
  background:white;
  opacity:0.8;
  color:black;
  box-shadow:inset 0 0 0 1px black;
  border:30px solid white;
} 


.lower:hover{
  background:black;
  color:white;
  box-shadow:inset 0 0 0 1px white;
  border:30px solid black;
}

input{
  display:none;
}

.lower label{
  font-family: sans-serif;
  font-stretch: semi-condensed;
  text-transform:uppercase;
  font-size:40px;
  text-align:center;
}

.lower label:hover{
  cursor:pointer;
}

/*.overlay{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.9);
}*/
.overlay{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.9);
}

.overlay label{
	width: 58px;
	height:58px;
	position: absolute;
	right: 20px;
	top: 20px;
	/*background: urlll('https://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');*/
	z-index: 100;
  cursor:pointer;
}

.overlay nav {
	text-align: center;
	position: relative;
	top: 50%;
	height: 60%;
	font-size: 42px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	height: 100%;
	position: relative;
	
}

.overlay ul li {
	display: block;
	height: 20%;
	height: calc(100% / 5);
	min-height: 54px;
}

.overlay ul li a {
	font-weight: 300;
	display: block;
	color: white;
  text-decoration:none;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
  font-family: sans-serif;
  text-transform:uppercase;
  
}

.overlay ul li a:hover,
.overlay ul li a:focus {
	color: #849368;
}

.lower~.overlay-hugeinc{
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

#op:checked~.overlay-hugeinc{
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	z-index: 1 /* das aufgeklappte Menü wird vor den Impressionen angezeigt */
	;
}

.overlay-hugeinc nav {
	-moz-perspective: 300px;
}

.overlay-hugeinc nav ul {
	opacity: 0.4;
	-webkit-transform: translateY(-25%) rotateX(35deg);
	transform: translateY(-25%) rotateX(35deg);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
	
}

#op:checked~.overlay-hugeinc nav ul {
	opacity: 1;
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

#op:not(:checked)~.overlay-hugeinc nav ul {
	-webkit-transform: translateY(25%) rotateX(-35deg);
	transform: translateY(25%) rotateX(-35deg);
}

 /* Standard-CSS für das Bild */
 .responsive-img {
	max-width: 100%; /* Das Bild nimmt maximal die Breite des Containers ein */
	height: auto;  
	 /* height: auto;   Die Höhe wird automatisch an die Breite angepasst, um das Seitenverhältnis zu wahren */
	display: block;  /* Verhindert, dass das Bild Inline-Element ist, was hilft, das Layout zu steuern */
	margin: 0 auto;  /* Zentriert das Bild innerhalb des Containers, falls erforderlich */
  }
  .image-container {
	display: flex;
	flex-direction: column;
	justify-content:flex-start;  /* Bilder vertikal zentrieren */
	align-items: center;      /* Bilder horizontal zentrieren */
	height: 100vh;            /* Container nimmt die gesamte Höhe des Viewports ein */
	background-color: transparent; /* Transparenter Hintergrund */

    
    }
	   /* Stile für jedes Bild */
	   .image-container img {
		width: 70%;       /* Bildgröße auf 70% setzen */
		height: auto;     /* Höhe automatisch anpassen */
		margin-bottom: 30px; /* Abstand zwischen den Bildern */
		background-color: transparent; /* Transparenter Hintergrund */
	  }

	  

	   /* Hintergrund mit durchscheinendem Effekt für den text auf Index*/
	   .transparent-background {
		background-color: rgba(255, 254, 254, 0.8); /* Durchscheinender heller Hintergrund */
		width: 100%;
		 
		padding: 20px;
		border-radius: 10px; /* Abgerundete Ecken */
	  }
  
	  /* Schwarzer Text */
	  .transparent-background p {
		color: black; /* Schwarze Schriftfarbe */
		
		font-weight: 300;
		text-align: center;

		font-family: sans-serif;
		font-stretch: semi-condensed;/* Sans-Serif-Schriftart */
		font-size: 2rem; /* Schriftgröße */
		margin: 0; /* Entfernt den Standardabstand */
	  }
	
	  
	 /* .container {
		max-width: 900px;
		margin: 20px auto;
		padding: 20px;
		background-color: hsl(147, 27%, 92%);
		border-radius: 8px;
		box-shadow: 0 0 background-color: rgba(255, 254, 254, 0.8); 
		10px rgba(0, 0, 0, 0.1);
	  } */ /* Durchscheinender heller Hintergrund */

	   /* Hintergrund mit durchscheinendem Effekt für den text kontakt*/
	   .container{
		background-color: rgba(255, 254, 254, 0.8); /* Durchscheinender heller Hintergrund */
		width: 100%;
		 
		/*padding: 20px;
		border-radius: 10px; /* Abgerundete Ecken */
	  }
  
	  h1 {
		font-family: sans-serif;
		font-stretch: semi-condensed;/* Sans-Serif-Schriftart */
		font-size: 2rem;
		color: #444;
	  }
  
	  h2 {
		font-family: sans-serif;
		font-stretch: semi-condensed;/* Sans-Serif-Schriftart */
		font-size: 1.5rem;
		margin-top: 1.5rem;
		color: #555;
	  }
	  h3 {
		font-family: sans-serif;
		font-stretch: semi-condensed;/* Sans-Serif-Schriftart */
		font-size: 1.1rem;
		margin-top: 1.1rem;
		color: #555;
	  }
  
	  p {
		font-family: sans-serif;
		font-stretch: semi-condensed;/* Sans-Serif-Schriftart */
		font-size: 1rem;
		margin: 10px 0;
	  }
  
	  .highlight {
		font-weight: bold;
		color: #000;
	  }
  
	  .address, .contact {
		margin-bottom: 20px;
	  }
  
	  .footer {
		font-size: 0.8rem;
		text-align: center;
		margin-top: 30px;
		color: #777;
	  }
	  .nix{ list-style: none } /* Liste ohne Punkte */
	  .tbody{ list-style: none } /* Liste ohne Punkte */
	  .table{  font-family: sans-serif;
		font-stretch: semi-condensed;/* Sans-Serif-Schriftart */
		font-size: 1.1rem;
		margin-top: 1.1rem;
		color: #0e0000; } /* Format für Öffnungszeiten */
/* für bildergalerie 
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        .gallery-container {
            position: relative;
            width: 80%;
            max-width: 800px;
            margin: 50px auto;
            overflow: hidden;
            border: 2px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .gallery-wrapper {
            display: flex;
            transition: transform 0.3s ease-in-out;
        }

        .gallery-wrapper img {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }

        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            border: none;
            font-size: 24px;
            cursor: pointer;
            z-index: 10;
        }

        .arrow-left {
            left: 10px;
        }

        .arrow-right {
            right: 10px;
        }

        .arrow:hover {
            background-color: rgba(0, 0, 0, 0.8); *
        } */
		/* für bildergalerie 
		.gallery-container {
            position: relative;
            width: 80%;
            max-width: 800px;
            margin: 50px auto;
            overflow: hidden;
            border: 2px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .gallery-wrapper {
            display: flex;
            transition: transform 0.3s ease-in-out;
            width: 100%; /* Set the width to 100% to ensure it fills the container */
        /*

        .gallery-wrapper img {
            width: 100%; /* Each image will take the full width of the container */
           /* height: auto;
            border-radius: 10px;
        }

        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            border: none;
            font-size: 32px;
            cursor: pointer;
            z-index: 10;
        }

        .arrow-left {
            left: 10px;
        }

        .arrow-right {
            right: 10px;
        }

        .arrow:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

	 */
   /* 5.1.25 
    .gallery {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
    
	flex-shrink: 0;
    }
    .xxgallery {
    width: 100%;
    height: auto;
    flex-shrink: 0;
	  }
    
   .gallery-container{
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
    } 
    .button {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		padding: 10px;
		border: none;
		font-size: 32px;
		cursor: pointer;
		z-index: 10;
	}
    .button.left {
    left: 10px;
    }
    .button.right {
    right: 10px;
    }
    .button:hover {
		background-color: rgba(0, 0, 0, 0.8);
	}
	*/
	 
/*neu, fuerimpressionen 5.1.25 
Style the image gallery, next and previous buttons, the caption text and the dots:
Example */
.mybox-sizing {
    box-sizing:border-box
}

/* Position the image container (needed to position the left and right arrows) */
.mycontainer {
    position: relative;
}
.myimg {
	vertical-align: middle;
	width:100%;
  }
  /* Hide the images by default */
  .mySlides {
	display: none;
  }
  
  /* Add a pointer when hovering over the thumbnail images */
  .cursor {
	cursor: pointer;
  }
  
  /* Next & previous buttons */
  .prev,
  .next {
	cursor: pointer;
	position: absolute;
	top: 40%;
	z-index: 100;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
	right: 0;
	border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
	background-color: rgba(0, 0, 0, 0.8);
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
  }
  
  /* Container for image text */
  .caption-container {
	text-align: center;
	background-color: #222;
	padding: 2px 16px;
	color: white;
  }
  
  .row:after {
	content: "";
	display: table;
	clear: both;
  }
  
  /* Six columns side by side */
  .column {
	float: left;
	width: 16.66%;
  }
  
  /* Add a transparency effect for thumnbail images */
  .demo {
	opacity: 0.6;
  }
  
  .active,
  .demo:hover {
	opacity: 1;
  }