/* || General setup */

html,
body {
  margin: 0;
  padding: 0;
}
/*   Setzt den Standardabstand (margin) und die Innenabstände (padding) auf 0, um eine einheitliche Grundlage für die gesamte Webseite zu schaffen. Dies entfernt jegliche Standardabstände, die Browser hinzufügen.*/

html {
  font-size: 10px;
  background-color: #a9a9a9;
}
/* Die Schriftgröße des gesamten Dokuments wird auf 10px festgelegt, was zur Vereinfachung bei relativen Schriftgrößen wie rem nützlich ist. Der Hintergrund des html-Elements wird grau (#a9a9a9) gefärbt. */

/*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 {
  width: 70%;
  /*min-width: 700px;*/
  margin: 0 auto;
  margin-top: 1rem;
  background-color: #a9a9a9;
  font-family:
    Open Sans,
    Verdana,
    Arial,
    Helvetica;
  font-size: 1rem;
  color: black;
}
/* Das body-Element hat eine Breite von 70%. Mit margin: 0 auto; wird der Inhalt zentriert, was bedeutet, dass der body horizontal in der Mitte der Seite platziert wird. margin-top für etwas Abstand zu html-Seite oben. Schriftdefinitionen und Hintergrund werden auf der Homepage nicht angezeigt, da sie durch die einzelnen Elemente definiert sind.  Hintergrund nur bei Abstand zu nav und footer.*/

/* || typography */
h1,
h2,
h3 {
  font-family: "Cinzel Decorative", cursive;
  color: #2a2a2a;
}
p,
input,
li {
  font-family: "Roboto Condensed", sans-serif;
  color: #2a2a2a;
}
/* Die Überschriften h1, h2 und h3 verwenden die dekorative Schriftart "Cinzel Decorative", während Absätze (p), Eingabefelder (input) und Listenpunkte (li) die schlichte, gut lesbare "Roboto Condensed" Schriftart nutzen. Beide haben die Textfarbe #2a2a2a (ein dunkles Grau). */

h1 {
  font-size: 3rem;
  text-align: center;
  text-shadow: 2px 2px 10px black;
}
/* Die Hauptüberschrift (h1) ist 4rem groß und zentriert. Zusätzlich hat sie einen schwarzen Schatten, der für einen leicht dreidimensionalen Effekt sorgt. */

h2 {
  font-size: 2.6rem;
  text-align: center;
}

h3 {
  font-size: 2.2rem;
}
/* h2 und h3 sind kleinere Überschriften mit Größen von 3rem bzw. 2.2rem, wobei h2 auch zentriert ist.*/

li {
  font-size: 1.6rem;
  line-height: 1.5;
  padding-left: 5px;
}
/* Absätze (p) und Listenpunkte (li) haben eine Schriftgröße von 1.6rem und einen Zeilenabstand (line-height) von 1.5, was die Lesbarkeit verbessert. Ferner etwas Abstand zum linken Rand, um die Lesbarkeit des Textes zu erhöhen. */

p {
  font-size: 1.6rem;
  line-height: 1.5;
  color: black;
  font-weight: normal;
  margin-bottom: 10px;
  padding: 0.8rem;
  text-align: justify;
  hyphens: auto;
  width: 100%;
  max-width: 95%;
}

/* Einstellungen für Absätze: font-weight für Fettschrift: "bold" (=700) oder Werte zwischen 100 und 900, margin-bottom:  Abstand zwischen zwei Absätzen, padding: 0.5rem: Abstand zum Rand des Elements;  text-align: justify: Blocksatz, Silbentrennung aktiviert, width: Breite des Absatzes im Verhältnis zu 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 #f60b0b; /* 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: 95%;
}

video {
  display: block;
  margin: 0 auto;
}
/* Bei großem Bildschirm werden die Videos mittig plaziert. */

cite {
  text-align: center;
  font-size: 0.8em;
  line-height: 150%;
  color: black;
  hyphens: auto;
}

/* || header layout */
header {
  margin-bottom: 1px;
  display: flex;
  flex-flow: row wrap;
}


main,
header,
nav,
article,
aside,
footer,
section {
  background-color: tan;
  padding: 1%;
}
/* Alle Hauptlayout-Bereiche der Homepage (main, header, nav, etc.) erhalten einen einheitlichen Hintergrund  und ebenfalls eine Innenabstand von 1%.*/

h1 {
  flex: 5;
  text-transform: uppercase;
}
/* Das h1-Element innerhalb des header-Elements erhält die Flexibilität von flex: 5, was bedeutet, dass es fünf Einheiten Platz im Verhältnis zu anderen flexiblen Elementen einnimmt. Der Text wird in Großbuchstaben (text-transform: uppercase) umgewandelt.*/

header img {
  display: block;
  height: 70px;
  padding-top: 5px;
  padding-left: 10px;
}
/* Das Bild im header wird als Blockelement angezeigt und auf eine feste Höhe von 60px skaliert. Es hat auch einen oberen Innenabstand von 20px. */

nav {
  height: auto;
  flex: 100%;
  display: flex;
  background-color: #a9a9a9;
}
/* Die Navigation (nav) wird ebenfalls mit Flexbox gestylt. Sie nimmt die volle Breite (flex: 100%) des Elternelements ein.*/

nav ul {
  padding: 0;
  list-style-type: none;
  flex: 2;
  display: flex;
}
/* Das ul-Element in der Navigation hat keinen Außenabstand (padding: 0) und keine Aufzählungszeichen (list-style-type: none). Es wird mit Flexbox gestaltet, wobei es doppelt so viel Platz wie andere flexible Elemente innerhalb des nav-Containers einnimmt (flex: 2).*/

nav li {
  display: inline;
  text-align: center;
  flex: 1;
}
/* Die Listenelemente (li) der Navigation werden als Inline-Elemente dargestellt, zentriert ausgerichtet und nehmen jeweils gleichmäßig Platz ein.*/

nav a,
nav span {
  display: inline-block;
  font-size: 2rem;
  height: 3rem;
  line-height: 1.7;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}
/* Die Links (a) und Spans innerhalb der Navigation werden als Inline-Block-Elemente angezeigt. Sie haben eine Schriftgröße von 2rem, eine Höhe von 3rem und eine leicht erhöhte Zeilenhöhe (line-height: 1.7). Sie werden in Großbuchstaben dargestellt, ohne Unterstreichung (text-decoration: none), und der Text ist schwarz.*/

/* || main layout */
main {
  display: flex;
}
/* Das Hauptlayout (main) der Homepageverwendet Flexbox, um den Inhalt flexibel anzuordnen.*/

article,
section {
  flex: 4;
}
/* Sowohl article (linker Teil vom main) als auch section (rechter Teil vom main) nehmen jeweils vier Einheiten der Flexbox-Verteilung ein, wodurch sie den Hauptteil des Inhalts einnehmen.*/

aside {
  flex: 1;
  margin-left: 10px;
  padding: 1%;
}
/* Das aside-Element, welches als Abschnitt für die Photos dient, erhält eine Flexeinheit und einen linken Außenabstand von 10px zum Textteil. Es hat auch eine 1%ige Polsterung.*/

aside a {
  display: block;
  float: left;
  width: 50%;
}
/* Die Links im aside werden als Blockelemente dargestellt und nehmen jeweils 50% der Breite ein. Dies sorgt dafür, dass zwei Bilder nebeneinander angezeigt werden.*/

aside img {
  max-width: 100%;
}
/* Die Bilder im aside haben eine maximale Breite von 100%, sodass sie nicht größer als ihr Container werden.*/

footer {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.2rem;
}
/* Der Footer hat einen  Außenabstand von 10px, um ihn optisch von anderen Elementen abzutrennen. Etwas kleinere Schriftgröße*/

/* Einstellungen für die Bilder der Fogeseiten. */

img {
  max-width: 100%; /* Bild passt sich der Bildschirmbreite an. */
  height: auto; /* Proportionale Höhe */
  object-fit: contain; /* Verhindert das Beschneiden des Bildes */
}

/*  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 */
}

.image-wrapper {
  max-width: 50%; /* Bildcontainer flexible bis max. % des body */
  /*flex: 0 0 50%;  feste Breite des Bild-Containers */
  height: auto;
  background-color: aqua;
  overflow: hidden; /* Um das Bild im Container zu halten */
}
/* Bildumschlag bekommt 50% der Bildschirmbreite. */

.image-wrapper img {
  max-width: 100%; /* Bild passt sich der Containerbreite an. */
  height: auto; /* Proportionale Höhe */
  object-fit: contain !important;
}

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