/* Global */
body{
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

/* Ueberschrift */
h1{
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 1.5rem;
  color: black;
}

.logo-image{
  align-items: center;
  justify-content: center; 
  height: 70px;
}

.logo-image img {
  width: auto; /* Begrenzt die Bildbreite auf die Breite des Containers */
  height: 100%;    /* Behält das Seitenverhältnis bei, wenn sich die Breite ändert */
  margin-top: 10px;
  display: block;    
}

/* Navigationseinstellungen */
.navbar{
  font-weight: 400;
  font-size: 1rem
}

.navbar a:hover{
  color: #ff6144;
}

.navbar b {
  color: #ff6144;
  font-weight: 400;
  font-size: 1rem
}

.navbar-light .navbar-nav .nav-link{
  color: black;
}

.navbar-light .navbar-nav .nav-link:hover{
  color: #ff6144;
}

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

ul li {
  float: left;
}

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

ul li b {
  display: block;
  color:  white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


.rechteSeite, .linkeSeite{
  width:95%;
}

.rot{
  background-color: #ffd8ce;
  color: black;
  display: flex;
  text-align: center;
}

.gelb{
  background-color: #fff5ce;
  color: black;
  display: flex;
  text-align: center;
}

.grau{
  background-color: #cccccc;
  color: black;
  display: flex;
  text-align: center;
}

.texte{
  font-size: 1rem;
  font-weight: 400;
}

.texte .text{
  color: black;
  text-align: center;
}

/* Links im Text */
.texte a{
  font-family: 'Open Sans',sans-serif;
  font-weight: 600;
  color: black;
  text-decoration: none;
}

.texte a:hover{
  color: #ff6144;
}

.termine{
  font-size: 1rem;
  font-weight: 400;
  color: black;
  text-align: left;
}

/* Monate */
.termine h1{
  font-size: 1.5rem;
}

/* externe Veranstaltungen */
.termine a{
  color: #ff6144;;
}

.mitte{
  width:95%;
  } 
  
.breite{
  float: left;
  height: 250px;
  width: 100%;
  background: no-repeat top / cover;
  box-sizing: border-box;
  position: relative;
}

.bilder-container {
  display: flex; /* Erlaubt, dass figure-Elemente nebeneinander angezeigt werden */
  flex-wrap: wrap;
  gap: 1rem; /* Fügt Abstand zwischen den Bildern hinzu */
  margin-top: 20px;
  align-items: center;
}

.bilder-container figure {
  max-width: 40%; /* Begrenzt die Bildbreite auf die Breite des Containers */
  display: inline-block; /* Erlaubt, dass figure-Elemente nebeneinander angezeigt werden */
  flex-direction: column; /* Ordnet Bild und Untertitel vertikal an */
  margin: 0 auto; /* Fügt etwas Abstand zwischen den Bildern hinzu */
  margin-bottom: 10px;
  text-align: center; /* Zentriert den Inhalt innerhalb des figure-Elements (das Bild und die Bildunterschrift) */
  justify-content: center; 
}

.bilder-container img {
  max-width: 100%; /* Begrenzt die Bildbreite auf die Breite des Containers */
  height: auto;    /* Behält das Seitenverhältnis bei, wenn sich die Breite ändert */
  margin-top: 10px;
  display: block;    
}

.bild-container {
  align-items: center;
  justify-content: center; 
/*  height: 500px;*/
}

.bild-container figure {
  max-width: 80%; /* Begrenzt die Bildbreite auf die Breite des Containers */
  flex-direction: column; /* Ordnet Bild und Untertitel vertikal an */
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center; /* Zentriert den Inhalt innerhalb des figure-Elements (das Bild und die Bildunterschrift) */
  justify-content: center; 
}

.bild-container img {
  max-width: 100%; /* Begrenzt die Bildbreite auf die Breite des Containers */
  height: auto;    /* Behält das Seitenverhältnis bei, wenn sich die Breite ändert */
  display: block;    
}

.unteresMenue {
  text-decoration: none;
  background-color: white;
  font-weight: 400;
}

.unteresMenue a {
  display: block;
  color: black;
  text-align: left;
  font-size: 1rem;
  padding: 14px 16px;
}

.unteresMenue a:hover{
  color: #ff6144;
}

.footer{
  font-size: 0.8rem;
  font-weight:400;
  text-align: center;
}

.fade-elemente {
  z-index: 2
  position: relative;
  text-align: center;
}

.fade-elemente p {  
  position: absolute;
  top: 15%;
  left: 0;
  right: 0;
  opacity: 0;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: white;
  opacity: 0;
  animation-name: fade;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;   
}

.fade-elemente p:nth-child(1) {
  animation-delay: 0s;
}
.fade-elemente p:nth-child(2) {
  animation-delay: 10s;
}
.fade-elemente p:nth-child(3) {
  animation-delay: 20s;
}
.fade-elemente p:nth-child(4) {
  animation-delay: 30s;
}
.fade-elemente p:nth-child(5) {
  animation-delay: 40s;
}
.fade-elemente p:nth-child(6) {
  animation-delay: 50s;
}

@keyframes fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  13%  { opacity: 1; }
  18%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (min-width: 576px) {
  .logo-image{
    height: 95px;
  }
 
  h1{
    font-weight: 300;
    font-size: 1.6rem;
  }
}

@media (min-width: 768px) {
  .logo-image{
    height: 120px;
  }

  h1{
    font-weight: 400;
    font-size: 2rem;
  }

  .breite{
    height: 300px
  }
}

@media (min-width: 992px) {
  .logo-image{
    height: 150px;
  }

  h1{
    font-weight: 500;
    font-size: 2.5rem;
  }

  ul li a {
    font-size: 1.2rem;
  }

  .navbar b {
    font-size: 1.2rem;
  }

  
  .texte {
    font-size: 1.2rem;
  }

  .termine {
    font-size: 1.2rem;
  }

  .rechteSeite,
  .linkeSeite{
    width:100%;
  }

  .mitte{
    max-width: 800px;
    margin: 0 auto; 
  }


  .fade-elemente p {  
	font-size: 1.2rem;
  }
}

@media (min-width: 1200px) {
  .navbar{
    max-width: 1140px;
    margin: 0 auto ;
  }

  .breite{
	height: 455px
  }
    
  .linkeSeite, 
  .rechteSeite{
    max-width: 580px;
    margin: 0 auto; 
  }

  .fade-elemente p {  
	font-size: 1.5rem;
  }
}