@font-face {
  font-family: 'MerriweatherSans';
  src: url('../fonts/Merriweather_Sans/MerriweatherSans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900; 
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MerriweatherSans';
  src: url('../fonts/Merriweather_Sans/MerriweatherSans-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900; 
  font-style: italic;
  font-display: swap;
}

:root {
  /* Cassiopeia nutzt CSS Variablen, das ist der eleganteste Weg */
  --body-font-family: 'Merriweather', serif;
  /* --heading-font-family: 'MerriweatherSans', sans-serif; */
  --cassiopeia-font-family-headings:  'MerriweatherSans', sans-serif;
  
  --bs-body-font-family: 'Merriweather', serif;
  --font-family-sans-serif: 'MerriweatherSans', sans-serif;
}

.arddiashowseite > ul > li > span > img{
	width: 100%;        /* Versucht 100% des Containers einzunehmen */
	max-width: 460px;   /* Wird aber niemals größer als 200px */
	height: auto;       /* Verhindert das Abschneiden/Verzerren */
    border: 8px solid #fff;  /*Weißer Rahmen mit 8 Pixel Breite */
    border-radius: 10px; /* Runde Ecken */
    margin: 10px; /* Leichter Abstand */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}
.ardgb > ul {
 display: flex;
  flex-wrap: wrap; /* Wichtig für das Umbrechen! */
  gap: 20px;       /* Abstand zwischen den Elementen */
  list-style: none; /* Keine Punkte */
  padding: 0;
}

.ardgb > ul > li {
display: flex;
  flex-direction: column; /* Bild und Text untereinander */
  align-items: center;    /* Mittig zentriert */
  
  /* Damit mehrere nebeneinander passen (z.B. ca. 300px breit pro Kachel) */
  /* Wenn Sie das weglassen, bleiben sie so breit wie das Bild (709px) */
  flex: 0 1 400px;
}

.ardgalbild {
	width: 100%;        /* Versucht 100% des Containers einzunehmen */
	max-width: 400px;   /* Wird aber niemals größer als 200px */
	height: auto;       /* Verhindert das Abschneiden/Verzerren */
    border: 8px solid #fff;  /*Weißer Rahmen mit 8 Pixel Breite */
    border-radius: 10px; /* Runde Ecken */
    margin: 10px; /* Leichter Abstand */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}
.ardbeitragkarte2 {
	width: 100%;        /* Versucht 100% des Containers einzunehmen */
	/*max-width: 500px;    Wird aber niemals größer als 200px */
	height: auto;       /* Verhindert das Abschneiden/Verzerren */
    border: 8px solid #fff;  /*Weißer Rahmen mit 8 Pixel Breite */
    border-radius: 10px; /* Runde Ecken */
    margin: 10px; /* Leichter Abstand */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}