html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  background-color: #E52E88;
  color: #fff;
  padding: 20px;
}

.header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 14px;
  margin-bottom: 10px;
  background-color: #E52E88;
}

.contact-info a {
  color: #fff;
  text-decoration: none;
  margin-bottom: 5px;
}

/* Media Query für die mobile Ansicht */
@media only screen and (min-width: 768px) {
  .contact-info {
    display: none; /* Verstecke die Telefonnummer und E-Mail-Adresse in der mobilen Ansicht */
  }
}


section#home {
  flex: 1;
}

#home p {
  font-size: 20px;
}

#home h1 {
  color: #E52E88;
}

.block-paragraph {
  display: block;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 20px;
}

.title-image {
  display: block;
  width: 100%;
  position: relative;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  display: inline;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
}

.nav-link {
  color: #fff;
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
}

.nav-item {
  margin-right: 20px;
}

.navbar-nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.navbar {
  height: 50px; /* Hier kannst du die gewünschte Höhe festlegen */
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
}

.custom-navbar {
  background-color: #E52E88;
  height: 90px;
}

.navbar .nav-link {
  line-height: 20px; /* Hier kannst du die gewünschte Höhe der Textausrichtung festlegen */
}

#navigation{
  position: relative;
  z-index: 2;
}

.custom-navbar.navbar-dark .navbar-collapse {
  background-color:#E52E88; /* Hier die gewünschte Hintergrundfarbe eintragen */
}


section {
  padding: 10px;
}

footer {
  background-color: #E52E88;
  color: #fff;
  padding: 10px;
  text-align: center;
  flex-shrink: 0;
  margin-top: auto;
}

.logo {
  float: left;
  margin-right: 10px;
  width: 90px;
}

.logo img {
  height: 60px; /* Passe die Höhe des Logos nach Bedarf an */
}

.title-image{
  position:relative;
  top:0;
  left:0;
  width: 100%;
  height: auto;
  z-index: -1;

}

.container-fluid {
  padding: 0px;
  margin: 0px;
  position: relative;
}

#home, #services, #products, #team {
  margin: 0;
  padding: 0;
}

.container {
  padding-top: 20px;
}

.image-container {
  max-width: 100%;
  margin-bottom: 20px;
}

.bild-test {
  max-width: 100%;
  margin: 5px;
  border-radius: 50%;
  height: auto;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-links {
  margin-left: auto;
}

.footer-link {
  color: #fff;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-container-text{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.grid-item-text{
  text-align: center;
}

.grid-item {
  position: relative;
}

.grid-item img {
  width: 100%;
  height: auto;
  opacity: 0.5;
}

.grid-item-text img{
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block
}

.grid-item-text p{
  margin:10px 0 0;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color:#E52E88; /* Ändere die Textfarbe auf pink */
  padding: 10px;
  font-size: 30px;
  text-align: center;
  transition: opacity 0.3s ease;
}

.default-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color:#E52E88;
  padding: 10px;
  font-size: 30px;
  text-align: center;
  transition: opacity 0.3s ease;
}


.hover-text {
  opacity: 0; /* Standardmäßig nicht sichtbar */
  transition: opacity 0.3s ease;
  /* display: block; /* Text immer sichtbar machen */
  font-size: 18px;
  color: #000;
}

.grid-item:hover .default-text {
  opacity: 0; /* Bei Hover-Effekt Vorschau-Text ausblenden */
}

.grid-item:hover .hover-text {
  opacity: 1; /* Bei Hover-Effekt Hover-Text einblenden */
  font-size: 18px;
  color: #000;
}

    /* Media query for small screens */
    @media only screen and (max-width: 767px) {
      .grid-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .grid-item {
        width: 100%;
      }

      .grid-item {
        width: 100%;
      }
      .overlay-text {
        font-size: 20px;
        margin-top: 10px;
      }


      .default-text{
        font-size: 25px;
      }

      .grid-item:hover .default-text {
        opacity: 0; /* Bei Hover-Effekt Vorschau-Text ausblenden */
      }
      
      .grid-item:hover .hover-text {

        font-size: 10px;
      }

    }

    @media (max-width: 767px) {
      .grid-container-text {
        display: block;
      }

      .grid-item-text {
        margin-bottom: 20px;
      }
    }

    /* Das Grid-Layout-Team definieren */
.grid-container-team {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 Spalten mit gleicher Breite */
  grid-template-rows: auto auto; /* 2 Zeilen mit automatischer Höhe */
  gap: 10px; /* Abstand zwischen den Elementen */
  justify-items: center; /* Zentriert die Elemente horizontal in den Zellen */
  align-items: center; /* Zentriert die Elemente vertikal in den Zellen */
  padding: 20px;
}

/* Allgemeine Formatierung der Grid-Items */
.grid-item-team {
  border: 1px solid black;
  padding: 10px;
}

/* Das Bild im oberen rechten Grid-Item positionieren */
.grid-item-team img:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

/* Den Text im unteren linken Grid-Item positionieren */
.grid-item-team p:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
}

/* Den Text im unteren rechten Grid-Item positionieren */
.grid-item-team p:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}

    /* Für mobile Bildschirme: Schrift kleiner machen */
    @media (max-width: 767px) {
      .block-paragraph {
        font-size:15px;
        text-align: center;
      }
    }

    /* Stil des Cookie-Banners */
    .cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 10px;
      background-color: #f0f0f0;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
      text-align: center;
  }
  
  .cookie-banner p {
      margin: 0;
  }
  
  .cookie-banner button {
      background-color: #E52E88;
      color: #fff;
      border: none;
      padding: 8px 16px;
      cursor: pointer;
  }
  
  .cookie-banner button:hover {
      background-color: fff;
      color:black;
  }
          /* Stil für die Bildergalerie */
          .gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px; /* Abstand zwischen den Bildern */
        }

        .gallery img {
            width: calc(25% - 10px); /* 4 Spalten, Abstand berücksichtigen */
            margin-bottom: 10px;
            object-fit: cover;
        }

        .gallery img.tall {
            height: calc(2 * 25% - 10px); /* Doppelte Höhe für Hochkant-Bilder */
        }

        /* Media-Query für kleinere Bildschirme */
        @media (max-width: 768px) {
            .gallery img {
                width: calc(50% - 10px); /* 2 Spalten für kleinere Bildschirme */
            }

            .gallery img.tall {
                height: calc(2 * 50% - 10px); /* Doppelte Höhe für Hochkant-Bilder */
            }
        }

        /* Media-Query für noch kleinere Bildschirme */
        @media (max-width: 480px) {
            .gallery img {
                width: 100%; /* Volle Breite für sehr kleine Bildschirme */
            }

            .gallery img.tall {
                height: auto; /* Automatische Höhe für Hochkant-Bilder */
            }
        }
  

        @media (max-width: 480px) {
          .map-container iframe {
            width: 100%; /* Volle Breite für mobile Ansicht */
            height: 200px; /* Festlegen der Höhe der Karte (einstellen wie du möchtest) */
          }
        }