.content {
    /* Hauptcontainer für den Seiteninhalt.
       Flexbox richtet die Elemente (Introduction, Infotext) untereinander aus. */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin: 0 30px;
    gap: 10px;
}

.introduction {
    /* Die Box für den Einleitungstext mit dem großen Bild. */
    background-color: #111136;
    border: 2px solid #1f1f64;
    border-radius: 30px;
}

.introduction h3 {
    padding-top: 20px;
    padding-left: 25px;
    font-family: "Roboto", sans-serif;
    margin-bottom: 0px;
}

.introduction img {
    height: auto;
    border-radius: 30px;
    /* Mit calc() stellen wir sicher, dass das Bild immer einen Abstand
       von 25px zum Rand der Box hat (links und rechts). */
    width: calc(100% - 50px);
    margin: 25px;
    display: block;
}

.infotext {
    /* Ein Flex-Container, der unsere Textboxen nebeneinander anordnet
       und bei Bedarf in die nächste Zeile umbricht. */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-grow: 1;
}

.textbox {
    /* Styling für die einzelnen Info-Kästen.
       `flex: 1 1 400px` sorgt für ein responsives Verhalten: Die Boxen versuchen,
       400px breit zu sein, können aber schrumpfen und wachsen. */
    background-color: #111136;
    border: 2px solid #1f1f64;
    border-radius: 30px;
    padding: 20px 25px;
    box-sizing: border-box;
    flex: 1 1 400px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.textbox h2 {
    padding: 0;
    font-family: "Roboto", sans-serif;
    margin-bottom: 15px;
    text-align: left;
}

.textbox p {
    padding: 0;
    font-family: "Roboto", sans-serif;
    margin: 8px 0;
    text-align: left;
    /* Dadurch füllt der Absatz den restlichen vertikalen Platz in der Textbox aus.
       Nützlich, damit alle Boxen in einer Reihe die gleiche Höhe haben. */
    flex-grow: 1;
}

.textbox div {
    display: none;
}