/* Container für die Bilder */
.projekt-container {
  display: flex;               /* Flexbox aktivieren */
  justify-content: center;     /* Horizontal zentrieren */
  align-items: center;         /* Vertikal zentrieren (falls nötig) */
  flex-wrap: wrap;             /* Mehrere Bilder umbrechen */
  gap: 10px;                    /* Abstand zwischen Bildern */
}

/* Bilder selbst */
.projekt {
  width: 300px;                 /* Standardbreite */
  height: 200px;                /* Standardhöhe */
  object-fit: cover;            /* Zuschneiden ohne Verzerrung */
}

/* Tablet */
@media (max-width: 768px) {
  .projekt {
    width: 200px;
    height: 133px;
  }
}

/* Smartphone */
@media (max-width: 480px) {
  .projekt {
    width: 90%;                  /* Fast volle Breite */
    height: auto;                /* Höhe anpassen */
  }
}

.content-image figure {
    pointer-events: none;  /* verhindert Klick-Blockade */
}
.content-image figure img {
    pointer-events: auto;  /* aber Bilder bleiben klickbar */
}

.datenschutz {
  margin-top: -470px;
}


.impressum {
  margin-top: -470px;
}

.kontakt {
  margin-top: -470px;
}


.mod_navigation li.active strong.active {
  color: white !important;
  text-decoration: underline;
  font-weight: inherit !important;
  font-size: inherit !important;
  text-transform: uppercase !important;  /* Großschreibung erzwingen */
  background: none !important;
  border: none !important;
}

.mod_customnav li.active strong.active {
  color: white !important;
  font-weight: inherit !important;
  text-transform: uppercase !important;  /* Großschreibung erzwingen */
}


.links.content-text {
  margin-top: -470px; /* verschiebt den Text 10px nach oben */
  margin-left: 210px;
  /* alternativ */
  /* padding-top: 0; */
}

.rechts.content-text {
  margin-right: 210px;
  /* alternativ */
  /* padding-top: 0; */
}

.ausstattung.content-gallery {
  margin-top: -420px;
}

.waldorf.content-gallery {
  margin-top: -420px;
}

.dojo.content-gallery {
  margin-top: -420px;
}

.eroeffnung.content-gallery {
  margin-top: -420px;
}

.planung.content-gallery {
  marging-top: 20px;
  display: flex;
  justify-content: center;
}


.content-gallery ul {
  display: flex;
  flex-wrap: nowrap;       /* verhindert Umbruch */
  overflow-x: auto;        /* erlaubt horizontales Scrollen */
  gap: 10px;
  padding: 10px;
  scroll-behavior: smooth;
  scrollbar-width: thin;   /* Firefox dünne Scrollbar */
  -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
}

.content-gallery ul li {
  flex: 0 0 auto;          /* feste Breite, kein Verkleinern */
}

.content-gallery ul li figure img {
  width: 150px;            /* gewünschte Bildbreite */
  height: 150px;           /* feste Höhe für gleichmäßige Kacheln */
  object-fit: cover;
  border-radius: 4px;
}


.rowplan.content-gallery.content-gallery--cols-4 {
  padding: 50px;
  max-width: 1200px;
  margin: 0 auto; /* zentriert den Container */
  box-sizing: border-box;
}

/* Hier das Grid auf die ul */
.rowplan.content-gallery.content-gallery--cols-4 > ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 Spalten */
  gap: 10px; /* Abstand zwischen den Bildern */
  padding: 0;
  margin: 0;
  list-style: none; /* entfernt Bullets */
}

/* li und figure passend machen */
.rowplan.content-gallery.content-gallery--cols-4 > ul > li {
  margin: 0;
  padding: 0;
}

/* Bilder auf volle Breite im Grid-Item */
.rowplan.content-gallery.content-gallery--cols-4 img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.ausstattungtext.content-text {
  margin-top: -300px;
  position: relative;
  background-color: #fff;
  border: 2px solid #000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  max-width: 500px;
  max-height: 100px;
  margin: -520px auto 440px auto; /* oben mehr Abstand für Bild */
  z-index: 3;
}

.waldorf.content-text {
  margin-top: -300px;
  position: relative;
  background-color: #fff;
  border: 2px solid #000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  max-width: 400px;
  max-height: 100px;
  margin: -520px auto 440px auto; /* oben mehr Abstand für Bild */
  z-index: 3;
}


.mod_article img {
  display: block;          /* damit margin auto funktioniert */
  max-width: 100%;         /* max. Breite passt sich Container an */
  max-height: 500px;       /* max. Höhe */
  width: auto;             /* automatische Breite (proportional) */
  height: auto;            /* automatische Höhe */
  margin: 0 auto;          /* horizontal zentrieren */
  object-fit: contain;     /* Bild komplett anzeigen, nicht zuschneiden */
  box-sizing: border-box;
  padding: 10px;           /* Optional: etwas Abstand */
}

.content-player video {
  padding: 10px;           /* Optional: etwas Abstand */
  margin-right: 30px
}

.image_container {
  max-width: 300px;      /* max Breite verkleinert */
  width: 100%;           /* volle Breite des Elterncontainers, aber max 400px */
}


.content-image {
  max-width: 110%;      /* max Breite des Containers */
  box-sizing: border-box;
}

.content-image figure {
  margin: 0 auto;        /* zentriert figure (optional) */
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-top: 100%;     /* Quadrat */
  max-width: 600px;      /* gleiche max-Breite für figure */
}

.content-image figure img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.projekt.content-text {
  margin-top: -30px;
  position: relative;
  background-color: #fff;
  border: 2px solid #000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  max-width: 400px;
  max-height: 100px;
  margin: -520px auto 20px auto; /* oben mehr Abstand für Bild */
  z-index: 1;
}

.drk.content-text {
  margin-top: -30px;
  position: relative;
  background-color: #fff;
  border: 2px solid #000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  max-width: 500px;
  max-height: 100px;
  margin: -520px auto 20px auto; /* oben mehr Abstand für Bild */
  z-index: 1;
}

.melli.content-text {
  margin-top: -30px;
  position: relative;
  background-color: #fff;
  border: 2px solid #000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  max-width: 500px;
  max-height: 100px;
  margin: -520px auto 20px auto; /* oben mehr Abstand für Bild */
  z-index: 1;
}

.fond.content-text {
  margin-top: -30px;
  position: relative;
  background-color: #fff;
  border: 2px solid #000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  max-width: 500px;
  max-height: 100px;
  margin: -520px auto 20px auto; /* oben mehr Abstand für Bild */
  z-index: 1;
}

.slub.content-text {
  margin-top: -30px;
  position: relative;
  background-color: #fff;
  border: 2px solid #000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  max-width: 500px;
  max-height: 100px;
  margin: -520px auto 20px auto; /* oben mehr Abstand für Bild */
  z-index: 1;
}

.sammlung.content-text {
  margin-top: -30px;
  position: relative;
  background-color: #fff;
  border: 2px solid #000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  max-width: 500px;
  max-height: 100px;
  margin: -520px auto 20px auto; /* oben mehr Abstand für Bild */
  z-index: 1;
}

.tuev.content-text {
  margin-top: -30px;
  position: relative;
  background-color: #fff;
  border: 2px solid #000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  max-width: 550px;
  max-height: 100px;
  margin: -520px auto 20px auto; /* oben mehr Abstand für Bild */
  z-index: 1;
}



.planung.content-text {
  margin-top: -30px;
  position: relative;
  background-color: #fff;
  border: 2px solid #000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  max-width: 500px;
  max-height: 100px;
  margin: -520px auto 20px auto; /* oben mehr Abstand für Bild */
  z-index: 1;
}


@media (max-width: 1024px) {
  .projekt-container {
    flex-direction: column;      /* untereinander */
    align-items: center;         /* horizontal zentrieren */
    width: 100%;
  }

  .projekt {
    margin: 10px 0;
    width: 90%;
    max-width: 400px;
  }

  .content-gallery ul {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 0;
  }
}