:root {
  --cassiopeia-color-primary: #41a313a9;
  --cassiopeia-color-link: #0754c7;
  --cassiopeia-color-hover: #5be923;
}

.itemid-1 {
  background-image: url(https://pixelspoint.de/images/neuer%20webauftritt/torijwillkommen3.png);
  background-position: top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* Hintergrund-Wasserzeichen für die Website
   Der 'linear-gradient' legt einen transparenten weißen Schleier (0.75) über die Bilder
*/
body {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), url("https://pixelspoint.de/images/Hintergrund/aikidowasserzeichen.png"),
    linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), url("https://pixelspoint.de/images/Hintergrund/aikidowasserzeichen.png");

  background-position: left top, right top;
  background-repeat: repeat-y, repeat-y;
  background-attachment: fixed, fixed;
  background-size: auto, auto;
}

/* Speziell für Smartphones (Bildschirme schmaler als 768px):
   Hier wird der weiße Schleier dichter (0.88), damit die Bilder noch weiter verblassen
*/
@media (max-width: 767px) {
  body {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.88)), url("https://pixelspoint.de/images/Hintergrund/aikidowasserzeichen.png"),
      linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.88)), url("https://pixelspoint.de/images/Hintergrund/aikidowasserzeichen.png");
  }
}

/* Korrigierter Bereich für das Logo & die primäre Farbe */
.brand-logo {
  background-color: rgba(94, 235, 29, 0.66);
}

:root {
  --cassiopeia-color-primary: #0fdd31d3;
}

/* Galerie-Container */
.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* Abstand zwischen den Bildern */
  justify-content: center;
}

/* Einzelne Bilder */
.gallery-container img {
  width: 30%;
  /* Bilder in gleichmäßigen Spalten */
  border-radius: 8px;
  /* Abgerundete Ecken */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  /* Sanfter Schatten */
  transition: transform 0.3s ease-in-out;
  /* Hover-Effekt */
}

/* Hover-Effekt */
.gallery-container img:hover {
  transform: scale(1.05);
  /* Leichtes Vergrößern beim Darüberfahren */
}

/* Lightbox-Effekt */
.gallery-container a {
  cursor: pointer;
}