/* Modal styling */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--cls-bg-transparent-dark);
  backdrop-filter: blur(5px);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: var(--cls-bg);
  position: relative;
  height: 90vh;
  width: 80vw;
  max-width: 70rem;
  box-shadow: 2px 2px 5px var(--cls-dark);
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--cls-bg-dark);
  color: var(--cls-1);
  min-height: 60px;
  position: absolute; /* Fixiert den Header im Modal */
  top: 0;
  width: 100%; /* Nimmt die volle Breite des Modal-Fensters ein */
  z-index: 1500;
  box-sizing: border-box; /* Berücksichtigt Padding in der Breite */
}

#modal-title {
  padding-left: 5rem;
}

.modal-header h1 {
  font-size: 1.5rem;
  margin: 0.5rem 3rem 0 0;
}



.modal-header .author {
  margin: 0 3rem 0.5rem 0;
  font-size: 1rem;
  font-weight: 100;
}

.modal-body {
  position: relative;
  display: flex;
  padding: 5vw;
  flex-direction: column;
  align-items: center;
  overflow-y: auto; /* Ermöglicht vertikales Scrollen */
  height: calc(100% - 60px); /* Höhe anpassen, um den Header zu berücksichtigen */
  margin-top: 60px; /* Abstand für fixierten Header */
  box-sizing: border-box;
}
@media screen and (max-width: 1024px) {
  .modal-content {
    width: 94vw;
  }
}
@media screen and (min-width: 1025px) {
  .modal-body {
    padding: 0rem 5rem;
  }
}

.close-button {

  position: fixed;
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
}


/* ---------------------------------------------- */


.modal-body h1 {
  font-size: 2rem;
  margin: 0;
}

.author {
  font-size: 1.2rem;
  font-style: italic;
  margin: 0 ;
}

.modal h2, #modal-element h2 {
  font-size: 1.6em;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.modal h3, #modal-element h3 {
  font-size: 1.4rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.fazitbox, .infobox {
  background: var(--cls-bg-dark);
  padding: 1rem;
  margin: 1rem 0;
}

.quellen p::before, .literatur p::before {
  content: "- "; /* Das Fragezeichen vor dem Text */
}

.quellen p , .literatur p {
  font-size: 1rem;
  color: var(--cls-dark);
  margin: 0 1rem 1.5rem 1rem;
  text-decoration: none;
}


.quellen p a, .literatur p a{
  color: var(--cls-2);
}


.literatur p {
  /* font-size: 1em;
  color: #46c220;
  margin: 0 1rem;
  text-decoration: none; */
}

.zur-person p {
  font-size: 0.8em;
  color: #566863;
  margin: 0 1rem 1.5rem 1rem;
  text-decoration: none;
}

a.link-line {
  display: block;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
  grid-gap: 20px;
}

.gallery img {
  width: 100%;
  height: auto;
  box-shadow: 2px 2px 2px var(--cls-1);
}

.gallery iframe {
  box-shadow: 2px 2px 2px var(--cls-1);
}

figcaption {
  color: #566863;
  margin-top: 1rem;
  text-decoration: none;
}

figure img {
  width: 50%;
  height: auto;
  box-shadow: 2px 2px 2px var(--cls-1);
}


.team {
  display: flex;
  flex-direction: row;

  align-items: flex-start; /* Vertikale Ausrichtung */
  gap: 20px; /* Abstand zwischen Bild und Text */
  margin: 20px 0; /* Abstand nach außen */
  flex-wrap: wrap; /* Ermöglicht Umbruch bei kleinen Bildschirmen */
  background-color: var(--cls-bg-dark);
  padding: 0.5rem;
  box-shadow: 2px 2px 5px var(--cls-dark);
}

.team-img {
  width: 120px; /* Feste Breite des Bildes */
  height: auto;
  border-radius: 8px; /* Leichte Abrundung der Ecken */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leichter Schatten für das Bild */
}
.team-text {
  flex: 1; /* Text nimmt den verbleibenden Platz ein */
  font-size: 1rem;
  line-height: 1.5;
  color: #333; /* Dunkle Textfarbe */
}




/* Responsives Verhalten für kleinere Bildschirme */
@media (max-width: 768px) {
  .team {
      flex-direction: column; /* Stellt Bild und Text untereinander bei kleinen Bildschirmen */
      align-items: center;
      text-align: center;
  }

  .team-img {
      width: 100%; /* Bild nimmt die volle Breite des Containers ein */
      max-width: 300px; /* Maximalbreite, damit das Bild nicht zu groß wird */
  }

  .team-text {
      margin-top: 15px; /* Abstand zwischen Bild und Text */
  }

  #modal-title {
    
    padding-left: 5vw;
  }
  .modal-header h1 {
    font-size: 1.4em;
    margin: 0.5rem 3rem 0 0;
  }

  .modal-body {
    position: relative;
    display: flex;
    padding: 5vw;
    width: 100%;
    flex-direction: column;
    align-items: center;
    overflow-y: auto; /* Ermöglicht vertikales Scrollen */
    height: calc(100% - 60px); /* Höhe anpassen, um den Header zu berücksichtigen */
    margin-top: 80px; /* Abstand für fixierten Header */
    box-sizing: border-box;
  }
  
  #modal-element {
    width: 100%;

    font-size: 1rem;
  }

  #modal-element iframe {
    width: 100%;
  }

  #modal-element h2 {
    font-size: 1.2em;
  }
  #modal-element p {
    font-size: 1em;
  }

}