:root {
  --main-bg-color: #0e1111;
  --secondary-bg-color: #232b2b;
  --primary-txt-color: #6f865f;
  --secondary-txt-color: #14A098;
  --trinary-color: #CCC;
  --main-bg-color2: rgb(255, 255, 255);
}

body{
  color: var(--trinary-color);
  font-family: Arvo,sans-serif;
  width: 100%;
  margin: auto;
  margin-top: 0;
  background-color: var(--main-bg-color);
  min-height: 100vh;
  /*background-image: url("../pics/background.jpg");
  */
  font-size: 16pt;
  display: flex;
  flex-direction: column;
}
main{
width: 85%;
margin: auto;
  /*display: flex;
  justify-content: center;*/
}

footer {
padding-right: auto;
display: flex;
gap: 30px;
background-color: black;
}
footer p{
margin-right:"5px";
height: 20px;
}
#backgroundDiv{
width: 100%;
height: 100vh;
position: absolute;
z-index: -1;
filter: blur(5px); 
}

/* kontakt */
.kontakt{
padding: 1%;
background-color: var(--secondary-bg-color	);
border-radius: 10px;
margin-bottom: 40px;
padding-left: 20px;
}

#secondary{
color: var(--primary-txt-color);
}

.headerImage{
/*background-image: linear-gradient(white, var(--main-bg-color));*/
background-image: linear-gradient(rgba(0, 0, 0, 0), var(--main-bg-color)) , 
url('../pics/Logo1.jpeg');
background-size: 120%;
background-repeat: stretch;
background-position: center;
width: 100%;
box-sizing: border-box;
text-align: left;
backdrop-filter: blur(2px);
user-select: none;
}
.headerImage img{
display: block;
height: 100%;
width: auto;
max-height: 90vh;
max-width: 80vw;
margin-left: auto;
margin-right: auto;
object-fit: cover;
}
.blur{
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(8px);
height: 100%;
width: 100%;
}


/* touren */
.tour-container {
  display: flex; /* Use flexbox layout */
  flex-wrap: wrap; /* Allow images to wrap to a new line if necessary */
  justify-content: center; /* Horizontally center align images */
  align-items: center; /* Vertically center align images */

  position: relative;
  margin: 10px;
  user-select: text;
  background-color: #232b2b9d;
  border-radius: 4px;
  padding: 3vh 2vw;
  flex-direction: column;
}
.tour-container *{
  margin: 0;
}
.tour-container img {
  max-width: 30vh;
  max-height: 30vh;
  margin: 2px; 
  width: auto;
  height: auto;
}
.tour-container-img{
  display: flex; /* Use flexbox layout */
  flex-wrap: wrap; /* Allow images to wrap to a new line if necessary */
  justify-content: center; /* Horizontally center align images */
  align-items: center; /* Vertically center align images */
}
.tour-container h2, .tour-container h3, .tour-container p{
  margin-bottom: 10px;
}

.tour-container h3{
  margin-left: 5px;
}
.tour-table{
  margin: 10px; 
  border-radius: 4px;
  padding: 3vh 2vw;
  background-color: #232b2b9d;
  margin-bottom: 2%;
  width: fit-content;
  user-select: text;
}
.tour-table h2{
  margin-top: 0;
  margin-bottom: 5px;
}
.tour-table table, .tour-table th, .tour-table td{
  border: 1px solid white;
  border-collapse: collapse;
  padding: 5px;
}
.tour-table table{
  border-style: hidden;
  text-align: center;
}


/* Scrollbar */
/* width */
::-webkit-scrollbar {
width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(71, 71, 71, 0.233); 
}

/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(66, 66, 66, 0.733);
border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #5a5a5a; 
}

* {box-sizing:border-box}

.backgroundMitglieder{
  background-image: url('../pics/logo1.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(5px);

  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  filter: blur(5px); 
}
.mitglieder{
  display: flex;
  flex-wrap: wrap;
  filter: none;
  margin:auto;
  max-width: 1500px;
}
/* Slideshow container */
.slideshow-container {
  max-width: 350px;
  height: 500px;
  position: relative;
  margin: 10px;
  user-select: text;
  background-color: #232b2b9d;
  border-radius: 4px;

  flex: 1 0 350px;
}

/* Hide the images by default */
.mySlides {
  display: none;
  
}
.mySlides img{
  max-height: 390px;
  max-width: 100%;
  width:auto;
  margin: auto;
  display: block;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  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);
}

/* Caption text */
.text {
  padding: 8px 0; 
  width: 100%;
}
.text h1, .text h3{
  margin-top:0;
  margin-bottom: 0;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 7.5px;
  width: 7.5px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}


#imageBigDiv{
  background-color: var(--secondary-bg-color);
  border-radius: 5px;
  width: 70vw;
  height: 80vh;

  position: fixed; /* or 'relative' or 'fixed', depending on your layout needs */
    z-index: 9999;
    top: 50%; /* Center vertically */
  	left: 50%; /* Center horizontally */
   transform: translate(-50%, -50%); /* Center the div precisely */
}
#imageBigDiv div{
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

#imageBigDiv button{
  background-color: #0e11119f;
  border: none;
  border-radius: 3px;
  width: 25px;
  height: 25px;
  color: var(--trinary-color);
  font-weight: bold;
  font-size: 14pt;
  position: absolute;
  top: 2px;
  right: 2px;
}
#imageBigDiv button:hover{
  background-color: var(--trinary-color);
  color: var(--primary-txt-color);
}


#imageBig{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.eventsMain{
 margin: auto;
}
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@media (max-aspect-ratio: 10/16){

  .headerImage img{
    max-width: 100vw;
    margin-left: -6%;
  }
  .mitglieder{
    width: 100%;
  }
  .slideshow-container {
    width: 100vh;
    max-width: 100vh;
    flex-basis: 100vw;
    margin: 10px 0;
    max-height: 800px;
    height: auto;
  }
  .mySlides img{
    max-height: 600px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
  }
  .prev, .next{
  font-size: 45pt;
  }

  .tour-container{
    width: 100%;
  }
  .tour-container img{
    max-width: 100%;
  }
  .tour-container h2{
    width: 100%;
    display: block;
  }
  main{
    width: 98%;
    margin: 0;
  }
  .tour-table{
    font-size: larger;
  }
  
  #imageBigDiv{
    width: 95vw;
    height: 60vh;
  }
  #imageBigDiv button{
    width: 7vh;
    height: 7vh;
    font-size: 3vh;
  }
  .eventsMain{
    margin-top: 30%;
    margin-bottom: auto;
  }
}