/* ======================== !!!!!!!!!!!! =============================

GANZ WICHTIG:
Schaut Euch die beigefügten Screenshots an und lest meine Kommentare!

========================== !!!!!!!!!!!! =========================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* kommentiert zum "Debugging" nächste Zeile mal aus! */
  /* outline: 1px solid red; */
}

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;
  font-size: 16px;
  color: black;
  background-color: #fff;
  hyphens: auto;
}

a:link {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
  opacity: 0.5;
}

a:hover,
a:active,
a:focus {
  color: #969fde;
}

img {
  width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-weight: normal;
  font-size: 100%;
}

main {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
}

article h2 {
  font-weight: bold;
  /* margin-bottom: 1.5em; */
}

article p {
  margin-bottom: 1.5em;
  text-align: justify;
}

/* ======================= header ======================= */

header {
  /* hier flexbox definieren! */
  margin: 2em 0;
  border-bottom: 3px double #969fde;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  
  /* background-color: #ff78e9; */
}

header hgroup {
  /* hier flexbox definieren! */
  display: flex;
  align-items: flex-end;
  gap: 10px;

  /* background-color: #d0ff78; */


}

header h1 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: normal;
  font-style: italic;
  font-size: 600%;
  line-height: .8;
  color: #969fde;
}

/* ==================== Navigation ======================= */

nav ul {
  /* hier flexbox definieren! */

    list-style-type: none;
    /* hier das entscheidende! */
    display: flex;
    /* 1. Wert: vert. Abstand, 2. Wert horiz. Abstand */
    gap: 5px 20px;
    /* nicht unbedingt nötig! */
    flex-wrap: wrap;

    justify-content: flex-end;
}


nav a {
  text-decoration: none;
}

/* gerade angewählter Nav-Punkt */
.current {
  /* wie soll dieser aussehen? */
  /* co                                                                                                                                                                                                                                                               lor: rgb(255, 0, 221); */
  font-weight: bold;
  /* border-bottom: 5px solid; */

}

/* ========= footer ============ */

footer {
  background-color: black;
  color: #fff;
  padding: 2em 0;
  margin-top: 2em;
}

/* gleiche Settings wie "main"! */
footer div {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
}

/* ============== blockquote ============== */

blockquote {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: normal;
  font-style: italic;
  font-size: 150%;
  line-height: 1.2;
  padding: 1rem 0;
}

/* ========= article ============ */

article {
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 3px;
}

article h2,
article div {
  padding: 1em;
}

figcaption {
  font-size: 85%;
  color: rgba(0, 0, 0, .5);
  font-style: italic;
}

/* ========================= Bildergalerie (index.html) ========================= */

/* auf der "index.html" */

section.galerie {
  /* anpassendes Grid-Layout hier einstellen */
  display: grid;
  gap: 10px;

  /*
      auto-fill: zur Verfügung stehender Platz soll automatisch aufgefüllt werden,
      dazu kann der Browser auch weitere "grid-columns" erzeugen

      minmax(200px, 1fr): mindestens 200px; maximal 1fr Breite
   */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-columns: repeat(3, 1fr); /* Maximale Anzahl von 3 Spalten */
}

.galerie figcaption {
  text-align: center;
}

/* Zitat auf der Seite mit der Bildergalerie */
blockquote.bei_galerie {
  text-align: center;
  border-top: 1px solid;
  border-bottom: 1px solid;
  margin: 1em 0 1.9em 0;
  /* background-color: rgb(255, 130, 188); */

  grid-column: span 3;
  grid-row-start: 2; 

  

  /* im Grid in der zweiten Zeile,
  über die gesammte Breite des Grids */
}

/* ======================== Struktur (struktur.html) =========================== */

/* auf der struktur.html */

section.struktur {
  /* Vierspaltiges Grid-Layout hier einstellen 
  1em Abstand zwischen den Grid-Elementen */
  display: grid;
    grid-template-columns: repeat(auto-fill);
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns */

    grid-template-rows: repeat(auto-fill);
    /* width: 80vw;                           
    /* height: 40vh;  */

    gap: 10px;  
}

.struktur figcaption {
  padding: .1em 1em;
}

/* ======================== Geschichte (geschichte.html) =========================== */

article.intro {
  border: none;
  /* font-size: 133%; */
}

article.intro div {
  padding: 1.5em 0;
  display: grid;
  gap: 1.5em;
  grid-template-columns: repeat(3, 1fr);
}

section.geschichte {
  /* Vierspaltiges Grid-Layout hier einstellen 
    1em Abstand zwischen den Grid-Elementen */
    display: grid;
    grid-template-columns: repeat(auto-fill);
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns */

    /* width: 80vw;                           
    /* height: 40vh;  */

    gap: 10px;  
}


/* ========================= spez. positionierte Elemente ============================ */

/* ebenfals bei "struktur.html", aber auch bei "geschichte.html" */

/* hellblauer HG */
.blauHG {
  background-color: rgb(220, 228, 255);


}

/* Artikel, die in der großen Ansicht über 2 Rasterpunkte horizontal gehen */
.wichtig {
  /* grid-column-start: 2;grid-column-end: 4; */
  /* grid-row-start: 3; grid-row-end: 4; */
  grid-column: span 2;

  /* background-color: rgb(255, 168, 243); */
  /* ??? */
}

/* der lange Artikel am rechten Rand bei "struktur.html" 
befindet sich am rechten Rand und geht über die vertikale Gesamtlänge des Grid */
.lang {
  
  grid-column-start: 4;grid-column-end: 4;
  grid-row-start: 1; grid-row-end: 4;
  /* ??? */
}

/* der lange Artikel am linken Rand bei "geschichte.html" 
befindet sich am linken Rand und geht über die vertikale Gesamtlänge des Grid */
.geschichte .lang {
  /* ??? */
  grid-row-start: 1; grid-row-end: 4;
  /* background-color: rgb(246, 255, 126); */
}

/* das Zitat über Venedig bei "struktur.html" 
2. Grid-Zeile, geht über 3 Grid-Columns*/
blockquote.bei_struktur {
  grid-column-start: 1;
  grid-column: span 3;

  /* ??? */
}