nav ul {
  list-style-type: none; /* Entfernt Aufzählungszeichen */
  margin: 0;             /* Entfernt Standard-Abstände */
  padding: 0;            /* Entfernt Standard-Abstände */
  display: flex;         /* Aktiviert Flexbox */
  background-color: #333; /* Dunkler Hintergrund für die Leiste */
}

/* Anordnung der Listenelemente */
nav li {
  margin-right: 20px; /* Abstand zwischen den Menüpunkten */
}

/* Styling der Links */
nav a {
  display: block;          /* Macht den ganzen Bereich klickbar */
  color: white;            /* Weiße Textfarbe */
  text-decoration: none;   /* Entfernt die Unterstreichung */
  padding: 14px 20px;      /* Innenabstand für bessere Klickfläche */
}

/* Hover-Effekt für Links */
nav a:hover {
  background-color: #575757; /* Hellerer Hintergrund beim Darüberfahren */
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 20px;
}

article {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0.1,0.1,0.1,0.1); /* Karten-Effekt */
    overflow: auto;
}

ul.custom-list {
    list-style-type: disc; /* Punkte als Aufzählungszeichen */
    padding-left: 20px;    /* Abstand vom linken Rand */
    margin: 10px 0;        /* Abstand oben und unten */
    font-family: Arial, sans-serif; /* Schriftart */
    font-size: 16px;       /* Schriftgröße */
    color: #333;           /* Textfarbe */
    background-color: #f9f9f9;
    display: block;
}

ul.custom-list li {
    margin-bottom: 8px;    /* Abstand zwischen den Listenelementen */
}
a{
  text-decoration: none;
}
.container {
    margin-bottom: 10px; /* Abstand zum Text darunter */
    width: 40%;
    max-width: 300px;
    max-height: 300px;
}

/* Resize images */
.container img {
    float: left;
    margin-right: 15px; /* Abstand zum Text */
    width: 100%;
    height: auto;
}