html, body {
   margin: 0;
   padding: 0;
   height: 100%;
   background-color: #E2E7DF; /* Komplementärfarbe zu Lindgrün CDE8B1 E8B1CE CDE8B1 */
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: sans-serif;
}


/* Klickbarer Bildbereich bei Zufallsanzeige */
.bildlink {
   text-decoration: none;
   color: inherit;
}

/* Wrapper für Zufallsanzeige */
.bild-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
}

/* Zeile mit 1 oder 2 Bildern (Zufallsanzeige) */
.bildreihe {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   gap: 2vw;
}

/* Raster für 2x2-Anzeige */
.bildraster {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4vh 4vw;
   justify-content: center;
   align-items: start;
   padding: 5vh 0;
}

/* Einzelnes Bild mit Titel (sowohl für Raster als auch Reihe) */
.bildblock {
   display: flex;
   flex-direction: column;
   align-items: center;
   max-width: 40vw;
   width: 100%;
}

/* Bilddarstellung */
.bildblock img {
   max-width: 100%;
   max-height: 80vh;
   object-fit: contain;
   display: block;
}

.dateiname {
   margin-top: 0.5em;
   font-size: 1.2rem;
   color: #333;
   text-align: right;
   width: 100%;
   font-family: Georgia, serif;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 0.5em;
}

.punkt {
   display: inline-block;
   width: 0.6em;
   height: 0.6em;
   background-color: red;
   border-radius: 50%;
   margin-left: 0.5em;
   vertical-align: middle;
}

/* Meldung bei leerem Bildbestand */
.fehlermeldung {
   text-align: center;
   color: #444;
   font-size: 1.2rem;
}
.bildreihe.einzelbild .bildblock {
   max-width: 80vw;
}

.bildreihe.einzelbild .bildblock img {
   max-height: 80vh;
}

.seitenfooter {
   position: absolute;
   bottom: 1vh;
   width: 100%;
   text-align: center;
   font-size: 0.9rem;
   color: #555;
}

.seitenfooter a {
   color: #555;
   text-decoration: none;
   margin: 0 0.5em;
}

.seitenfooter a:hover {
   text-decoration: underline;
}

.textseite {
   background-color: #E2E7DF;
   color: #333;
   font-family: Georgia, serif;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   padding: 2rem;
}

.text-wrapper {
   max-width: 700px;
   padding: 2rem;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   line-height: 1.6;
}

.text-wrapper h1 {
   font-size: 2rem;
   margin-bottom: 1rem;
}

.text-wrapper p {
   margin-bottom: 1rem;
}

@media (max-width: 768px) {
   .bildraster {
      grid-template-columns: 1fr;
   }

   .bildblock {
      max-width: 90vw;
   }

   .dateiname {
      font-size: 1rem;
   }
}