html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  text-align: center;
}

.zentriertes-bild {
  max-width: calc(600px - 20px); /* Adjust the value as needed */
  max-height: calc(100% - 20px); /* Adjust the value as needed */
  vertical-align: middle;
  margin: 10px; /* Adjust the value to set the desired margin */
  padding: 10px; /* Adjust the value to set the desired padding */
  box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}


/* Media query for smaller screens (e.g., phones) */
@media screen and (max-width: 570px) {
  .zentriertes-bild {
      max-width: 100%; /* Set image width to 100% of container */
      max-height: auto; /* Set image height to auto to maintain aspect ratio */
      margin: 0px; /* Remove margin */
      padding: 20px; /* Remove padding */
  }
}