@charset "UTF-8";
@import "bootstrap-utilities.css";
html, body {
  font-family: "Nunito", sans-serif;
  height: 100%;
}

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

#content-wrapper {
  flex: 1;
}

footer {
  width: 100%;
  position: static;
  bottom: 0;
  background-color: #f8f9fa;
  padding: 1em 0;
  text-align: center;
}

footer img {
  width: fit-content;
  max-width: 100%;
  height: 4em;
}

a[href] {
  text-decoration: none;
}

a[href] > .card, .card a {
  text-decoration: none;
  color: var(--bs-body-color);
}

.btn.btn-primary {
  background: #f9b100;
  border-color: rgb(223.5, 158.8734939759, 0);
}

.btn.btn-primary:hover {
  background: rgb(255, 186.9036144578, 19.5);
  border-color: #f9b100;
}

#content-wrapper .row > [class*=col-] {
  display: flex; /* stellt sicher, dass die Spalten die Höhe ihrer Kinder annehmen können */
  align-items: stretch; /* Spalten dehnen sich gleichmäßig */
}

/* Falls Karten in Anker-Elementen liegen: Link soll die ganze Spaltenhöhe füllen */
#content-wrapper .row > [class*=col-] > a {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Karte als flex-container, damit Body wachsen kann und Footer unten bleibt */
#content-wrapper .card {
  display: flex;
  flex-direction: column;
  height: 100%; /* übernimmt die verfügbare Höhe der Spalte */
}

/* Bildkopf: keine feste Seitenverhältnis-Vorgabe; Bild vollständig zeigen, zentriert, oben/unten kann Platz bleiben */
.card-img-top {
  width: 100%;
  max-width: 100%;
  /* kein aspect-ratio mehr, stattdessen Bild komplett anzeigen und zentrieren */
  height: auto;
  max-height: 30vh; /* responsiv, keine fixe Pixelhöhe; bei Bedarf anpassen */
  object-fit: contain; /* Bild vollständig sichtbar, ggf. mit Rand oben/unten */
  object-position: center center; /* zentriert das Bild innerhalb des Bereichs */
  display: block;
}

/* Body darf wachsen und nimmt verbleibenden Platz ein */
.card-body {
  flex: 1 1 auto;
}

/* Footer bleibt am unteren Rand der Karte */
.card-footer {
  margin-top: auto;
}

/*# sourceMappingURL=main.css.map */