/* Grundlegendes Styling für das Hauptlayout */
body {
  margin: 0;
  font-family: sans-serif;
  //background-color: lightblue;
  //display: flex;
  //justify-content: center; /* Zentriert horizontal */
  align-items: center;    /* Zentriert vertikal */
  min-height: 100vh;      /* Stellt sicher, dass der Body mindestens die volle Höhe des Viewports einnimmt */
  margin: 0;              /* Entfernt Standard-Margin */
}

main {
  display: flex;
  flex-wrap: wrap; /* Ermöglicht das Umbrechen auf kleineren Bildschirmen */
  padding: 20px;
}
.container {
  display: flex;
  flex-direction: column; /* Sorgt dafür, dass die Elemente untereinander angeordnet werden */
  justify-content: center; /* Zentriert vertikal */
  align-items: center;    /* Zentriert horizontal */
  /* Optional: Geben Sie dem Container eine feste Höhe, damit die vertikale Zentrierung sichtbar wird */
  height: auto;
  border: 0px solid black; /* Zur Veranschaulichung */
}

.container h1 {
font-size: 50px;
	border: thin solid;
	padding: 0.25em;
	margin-left: auto;
	margin-right: auto;
	max-width: max-content;
	text-align: center;
background-color: black;
}
.container img {
  /* Optional: Zusätzliche Stile für das Bild */
  width: 40%;
  height: auto;
}

.container p {
  /* Optional: Zusätzliche Stile für den Text */
  margin-top: 20px; /* Abstand zwischen Bild und Text */
  margin-left: 20px; /* Abstand zwischen Bild und Text */
  margin-right: 20px; /* Abstand zwischen Bild und Text */
text-align: center;
	border: thin solid;
	padding: 0.25em;
	margin-left: auto;
	margin-right: auto;
	max-width: max-content;
	text-align: center;
background-color: black;
}

.content {
  flex: 2; /* Macht den Hauptinhaltsbereich breiter */
  padding: 10px;
}

.sidebar {
  flex: 1;
  padding: 10px;
  background-color: lightgreen;
}

@media (max-width: 767px) {
.container h1 {
font-size: 30px;
}
.container img {
  /* Optional: Zusätzliche Stile für das Bild */
  width: 70%;
  height: auto;


}
/* Media Query für Desktops und größere Tablets */
@media (min-width: 768px) {
  main {
    flex-wrap: nowrap; /* Verhindert das Umbrechen auf größeren Bildschirmen */
  }
}