/*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: Verdana, Helvetica, sans-serif; /* font-family: Verdana, Arial, Helvetica, sans-serif; das bedeutet übersetzt: stelle die Verdana dar, wenn du sie nicht findest, dann die Arial, gibt es die auch nicht, dann die Helvetica (oftmals für Mac-User) und als letztes eine Schriftart ohne Serifen.
            */
    font-size: 1rem; /* Schriftgröße in Bezug zur Browsereinstellung, Standard ist 16px */
    max-width: 50rem; /* damit bei der Seitendarstellung rechts und links ein Freiraum bleibt */
    margin: auto; /* Abstand zwischen zwei html-Elementen, hier zum Seitenrand, für Platz zum oberen Seitenrand würde z.B "1rem auto" sinnvoll sein */
    background-color: #ece3d7;
    color: orange; /* Farbe aller Elemente, es sei denn es gibt - wie z.B. für "p" - spezifische Vorgaben  */
}

.kursiv {
    font-style: italic; /* setzt ein beliebiges Element kursiv */
}

/* Für die Absätze lassen sich nachfolgend spezifische Einstellungen angeben */
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: 150%; /* 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 -wie hier - Blocksatz */
    hyphens: auto; /* Silbentrennung aktiviert, bei Blocksatz sinnvoll */
    width: 100%; /* Die Breite des Absatzes im Verhältnis zur Seite (max-width im body) */
}

/* Einstellungen für einen Standard-Absatz 2 */
p.abs2 {
    font: Calibri, serif;
    font-size: 1em;
    font-style: italic;
    line-height: 115%;
    margin-bottom: 0 in;
}

p.padding {
    border: 1px solid #333333; /* legt einen Rahmen um den Absatz */
    padding: 2rem; /* durch die Klasse padding wird der Absatz nach innen gerückt */
    box-sizing: border-box; /* bewirkt, dass das Padding in die definierte Breite eingerechnet wird, anstatt sie zu vergrößern. */
    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%;
    color: black;
}

/* Einstellungen für die "Breadcrump-Liste im Header durch die Klasse "menu" */
ul.menu {
    padding: 0.1rem;
    list-style: none; /* Keine Punkte o.ä. vor den Listeneinträgen */
}

ul.menu li {
    display: inline; /* Listeneinträge nebeneinander anordnen */
    color: black;
}

ul.menu li a {
    margin-right: 15px; /* Listeneinträge etwas auseinander ziehen */
    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: 42px 97px 1px 43px;
    /*Einstellungen oben rechts unten links */
    padding: 3em;
    max-width: 99%;
    min-width: 100px;
    height: auto;
}

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

/* Einstellungen für die Bildunterschrift */
figcaption {
    display: block;
    color: black; /* Sicherstellen, dass der Text sichtbar ist */
    font-size: 1rem; /* Angemessene Schriftgröße */
    margin-top: 0.5em; /* Fügt etwas Abstand zwischen Bild und Unterschrift hinzu */
}

footer {
    font-size: 0.8rem;
    margin: 1rem;
}

/* Einstellungen für die Anzeige im Smartphone */
@media screen and (max-width: 480px) {
    body {
        background-color: tan;
        color: white;
        padding: 0.5rem;
    }
}