* {
    box-sizing: border-box; /* bewirkt, dass das Padding in die definierte Breite eingerechnet wird, anstatt sie zu vergrößern. */
}
html {
    background-color: #ccc;
    /*background: url(pattern.png);  */
    /* Farbe des Freiraums bei eingeschränktem body via Farbdef, oder eigenem png */
}

/*Body ist der Bereich der Webseite, der für die Darstellung des eigentlichen Inhaltes verantwortlich ist. Ist auf nachfolgenden Ebenen oder Absatzdefinitionen nichts anderes angegeben, dann gelten die Angaben für die gesamte Webseite*/
body {
    font-family:
        Open Sans,
        Verdana,
        Arial,
        Helvetica;
    /* das bedeutet übersetzt: stelle die Open Sans dar, wenn du sie nicht findest, dann die Verdana, dann die Arial, gibt es die auch nicht, dann die Helvetica.
*/
    font-size: 1rem; /* Schriftgröße in Bezug zur Browsereinstellung, Standard ist 16px*/
    width: 100%;
    max-width: 50rem;
    /* damit bei der Seitendarstellung rechts und links ein Freiraum bleibt */
    margin: 1rem auto; /* Abstand zwischen zwei html-Elementen, hier nach oben*/
    background-color: #ece3d7;
    color: black;
}

/* Stildefinitionen für Strukturelemente */

.header {
    height: 100px;
    background: #53c6b3;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sicherstellen, dass das Layout bei großen Bildschirmen gleich bleibt */
    flex-wrap: wrap; /* Ermöglicht das Umfließen von Elementen */
}

.header img {
    height: 80px;
    width: 80px;
    margin-right: 1rem;
}

.header h1 {
    font-size: 1.875rem;
    margin: 0;
    flex: 1; /* Nimmt den verbleibenden Platz ein */
    display: flex;
    align-items: center; /* Zentriert den Text vertikal */
    overflow-wrap: break-word; /* Verhindert, dass der Text zu breit wird */
}

main {
    background: #ccc;
}

article {
    padding: 20px;
}

/* Stildefinitionen für einzelne Elemente und Elementklassen */

h2 {
    margin-top: 3;
}

p {
    color: black;
    font-size: 90%; /* Schriftgröße um 10% verkleinert */
    font-weight: normal; /* für Fettschrift "bold" (=700) oder Werte zwischen 100 und 900*/
    line-height: 160%; /* Zeilenabsgtand vergrößert */
    margin-bottom: 1rem; /* Hier der Abstand zwischen zwei Absätzen, aber nur nach unten */
    padding: 0.1rem; /* verändert den inneren Abstand zum Rand des Elements */
    text-align: justify; /* Absatzausrichtung links, rechts, zentriert oder Blocksatz */
    hyphens: auto; /* Silbentrennung aktiviert */
    width: 100%; /* Die Breite des Absatzes im Verhältnis zur Seite (max-width im body) */
}

p.abs2 {
    font: Calibri, serif;
    font-size: 1em;
    font-style: italic;
    line-height: 115%;
    margin-bottom: 0 in;
}

p.padding {
    border: 1px solid #333333; /* zur Demo der Einstellungen von margin und padding, nur auf der Homepage */
    padding: 2rem; /* zus. zu den Standardeinstellungen für die Absätze wird durch die Klasse padding ein Absatz nach innen gerückt */
    max-width: 100%;
}

/* Einstellungen für die ungeordnete Liste */
ul {
    margin: 1.5rem auto; /* Abstand zum vor- und nachfolgendem Element */
}

/* Einstellungen für die Listeneinträge */
li {
    margin-bottom: 0.5rem; /* Abstand zwischen zwei Listenpunkten */
    font-size: 90%;
}

/* Einstellungen für die "Breadcrump-Liste" */
ul.menu {
    padding: 0.1rem;
    list-style: none;
}

ul.menu li {
    display: inline;
}

ul.menu li a {
    margin-right: 30px;
    text-decoration: none;
}

/* Einstellungen für die Bilder */
img {
    max-width: 100%;
    height: auto;
} /* damit Bilder die generell die originale Größe anzeigen können und damit die Höhe proportional zu Breite ausgegeben wird */

/* Einstellungen für das die Bilder umgebende figure-Element */
figure {
    background-color: orange;
    margin: 1px 1px 1px 1px;
    /*Einstellungen oben links unten rechts */
    padding: 3em;
    max-width: 100%;
    min-width: 320px;
    height: auto;
}

/* Einstellungen für die Bilder im figure-Element */
figure img {
    max-width: 100%;
    min-width: 320px;
    height: auto;
}

cite {
    text-align: center;
    font-size: 0.8em;
    line-height: 150%;
    color: black;
    hyphens: auto;
}
/*  Stile für die Anordnung der Bilder untereinander:
    1. übergeordnetes div mit der Klasse image-container, das die Flexbox-Anordnung für die Bilder und Texte steuert.
    2. Innerhalb des image-container befinden sich zwei figure-Elemente, jeweils für ein Bild und den dazugehörigen Text.
    3. Jedes figure-Element ist ebenfalls ein Flexbox-Container, der das Bild und den Text nebeneinander anordnet.
    4. Das image-wrapper-Element hat eine feste Breite von 50%, während das text-wrapper-Element den restlichen Platz einnimmt.
    Der Abstand zwischen den Bildern wird durch gap: 20px im image-container gesteuert, und der Abstand zwischen Bild und Text wird durch gap: 15px im figure-Element gesteuert.
*/

.image-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Abstand zwischen den Bildern */
}

figure {
    display: flex;
    align-items: flex-start;
    gap: 15px; /* Abstand zwischen Bild und Text */
}

#footer {
    text-align: center;
    font-size: 75%;
    padding-top: 1em;
}

.image-wrapper {
    flex: 0 0 50%; /* Breite des Bildes */
    height: auto; /* Höhe automatisch anpassen */
    max-height: 300px; /* Beispielhöhe, kann je nach Bedarf angepasst werden */
    overflow: hidden; /* Überlauf des Bildes verhindern */
}

.text-wrapper {
    flex: 1; /* Text nimmt den restlichen Platz ein */
}

.image-wrapper img {
    max-width: 100%;
    height: auto;
}