@charset "UTF-8";

/* --------------------------------------------------
        Allgemeine Grundeinstellungen                              
 ----------------------------------------------------*/

 :root{
  --hintergrund-farbe: lightgreen;  /* allgemeine Hintergrundfarbe */
  --balken-farbe: green;            /* allgemeine Balkenfarbe */
 }

html, body {
  height: 100%;                                             /* Stellt sicher, dass der HTML- und Body-Container die volle Hoehe einnehmen */
  margin: 0;                                                /* Entfernt den Standardrand */
  font-family: "Roboto", "Verdana", "Calibri", sans-serif;  /* Schriftart (beliebig viele) */
  color: #1d2731;                                         /* Schriftfarbe Ivory Black*/
  background-color: var(--hintergrund-farbe);               /* Hintergrundfarbe */
  line-height: 1.5;                                         /* Zeilengroesse */
  font-size: 1.1em;                                         /* Schriftgroesse */
}

html {
  box-sizing: border-box;     /* padding und border sind in width und heigt der Elemente enthalten */
}

.grid {
  display: grid;                                  /* Gitterrahmen */
  grid-template-rows: 175px auto auto auto 70px;   /* Anzahl Zeilen (5) */
  grid-template-columns: repeat(10, 10%);         /* Anzahl Spalten (10) */
  min-height: 100vh;                              /* Mindestens die volle Hoehe des sichtbaren Bereichs */
}

/* ------------------------------------------------ ------------------
     CSS-Eigenschaften fuer mobile Geraete (kleiner als 640 px)            
       + Alles in einer Spalte untereinander anordnen                                              
-------------------------------------------------------------------- */

header {
  grid-column: 1 / 11;                        /* komplette Breite */
  grid-row: 1 / 2;                            /* nur die 1. Zeile */
  background-color: var(--hintergrund-farbe); /* Hintergrundfarbe */
}

h1 {
  text-align: center; /* Text mittig anordnen */
  margin: 0;        /* Rand nach aussen */
}

h2 {
  margin: 0;          /* Der Rand ist 0 */
  margin-left: 6vw;   /* Platz nach links */
  margin-right: 7vw;  /* Platz nach rechts */
}

.kursiv {
  font-style: italic; /* kursive Schreibweise */
}

.fett {
  font-weight: bold;  /* fett */
}

.groesser {
  font-size: larger;  /* groessere Schrift */
}

table, th, td {
  border: 2px solid #997711;    /*Rahmen Staerke/Art/Farbe*/
  border-collapse: collapse;      /*nebeneinanderliegende Linien fallen zusammen*/
}

table {
  margin: 0 10% 0 2%; /* Platz zum Rand */
}

td {
  padding: 10px;        /* Rahmen */
  padding-right: 10px;  /* Rahmen rechts */
}

.rechts {
  text-align: end;  /* rechtsbuendig */
}

.nav {
  grid-column: 1 / 11;    /* komplette Breite */
  grid-row: 2 / 3;        /* 2.Zeile */
}

.nav-ul {
  background-color: var(--balken-farbe);  /* Hintergrundfarbe */
  margin: 0;                              /* Abstand zum Rand */
  padding: 0;
}

.nav-li {
  list-style: none;                       /* keine Standardeigenschaften fuer Listen */
  margin-left: 0;                         /* Abstand nach links */
  border-bottom: 1px solid #efefef;     /* Puffer nach oben */
}

.nav-li-a {
  padding: 0.6em 2rem;    /* Puffer */
  display: block;         /* Elemente werden untereinander angeordnet */
}

.u-nav-li-a {
  margin-left: 8px; /* Platz nach links */
  font-size: small; /* Schriftgroesse */
}

.nav-ul a:link {
  text-decoration: none;  /* keine Standardeigenschaften fur Links */
}

.nav-ul a:link,
.nav-ul a:visited {
    color: #fff;    /* Textfarbe weiss */
}

.nav-ul a:hover,
.nav-ul a:focus,
.nav-ul a:active {                /* Auswahl wenn man mit der Maus darueber faehrt, wenn das Teil im Focus und aktiv ist */
    background-color: #000;     /* Hintergrundfarbe Schwarz */ 
    color: #efefef;             /* Textfarbe Neutral */
}

.nav-active {                   /* Auswahl wenn das Teil aktiv ist */
  color: #000;                /* Hintergrundfarbe Schwarz */
  background-color: #fff;     /* Textfarbe weiss */
}

/* content */
.content {                        /* Auswahl Inhalt */
  grid-column: 1 / 11;            /* komplette Breite */
  grid-row: 3 / 5;                /* 3. und 4. Zeile */
  padding: 0 1rem 0 1rem;         /* Puffer zum Rand */
  display: flex;                  /* Eigenschaften eines Flex-Behaelters */
  flex-wrap: wrap;                /* Elemente werden hintereinander angeordnet */
  align-items: center;            /* Elemente werden in der vertikalen Achse zentriert */
  justify-content: space-between; /* in der horizontalen Achse wird zwischen den Elementen ein Zwischentaum geschaffen */ 
}

.bild-behaelter {
  background-color: var(--hintergrund-farbe); /* Hintergrundfarbe hellgruen */
  display: inline-block;          /* Stellt sicher, dass der Container sich an die Groesse des Bildes anpasst */
  width: 100%;                    /* Maximal die Haelfte des Content-Bereichs */
  margin-bottom: 1em;             /* Rand nach unten */
  text-align: center;             /* Texte mittig anordnen */
}

.bild-behaelter img {
  display: block; /* Entfernt den zusaetzlichen Abstand unter dem Bild */
  width: 100%;    /* Passt die Bildbreite an den Container an */
  height: auto;   /* Beibehaltung des Seitenverhaeltnisses */
}

.listen-behaelter {
  background-color: var(--hintergrund-farbe); /* Hintergrundfarbe hellgruen */
  padding: 20px;                              /* Abstand vom Rand, anpassbar nach Bedarf */
  width: 100%;                                /* Gleiche Breite wie der bild-behaelter */
  margin-left: 2%;                            /* Rand nach links */
  margin-bottom: 1em;                         /* Rand nach unten */
}

.text-behaelter {
  background-color: var(--hintergrund-farbe); /* Hintergrundfarbe hellgruen */
  padding: 20px;                  /* Abstand vom Rand, anpassbar nach Bedarf */
  width: 100%;                    /* komplette verfuegbare Breite */
  margin-bottom: 1em;             /* Rand nach unten */
}

.text-ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

.text-li {
  list-style: none;
}

.rechter-rand {
  display: none;  /* nicht anzeigen */
}

.footer {
  grid-column: 1 / 11;                    /* komplette Breite */
  grid-row: 5 / 7;                        /* 5.Zeile */
  background-color: var(--balken-farbe);  /* Hintergrundfarbe gruen */
  padding: 1em;                           /* Puffer zum Rand */
  border-top: 1em solid var(--balken-farbe);          /* Rand nach oben */
  display: flex;                          /* Umwandlung in einen FLEX-Behaelter */
  flex-direction: row;                    /* Die Inhalte sollen nebeneinander angeordnet werden */
  justify-content: space-between;         /* Die Teile sind gleich weit voneinander entfernt */
}

.footer-ul {
  display: flex;                          /**/
  background-color: var(--balken-farbe);  /* Hintergrundfarbe Neutral */
  margin: 0;                              /* Abstand zum Rand */
  padding: 0;                             /* Rand drumrum */
  list-style: none;
  color: #efefef;						/* keine Standard-Listenelemente */
}

.footer-li {
  margin-right: 20px;                 /* Abstand nach links */
  border-bottom: 1px solid #efefef; /* Puffer nach oben */
}

.footer-li a {
  text-decoration: none;  /* Entfernt die Standard-Link-Dekoration */
  font-size: x-small;     /* Schriftgroesse recht klein */
  color: darkblue;      /* Textfarbe */
  padding: 0.6em 2rem;    /* Puffer */
  display: block;         /* Elemente blockweise anzeigen */
}

.footer-li-a {
  padding: 0.6em 2rem;  /* Puffer */
  display: inline-box;  /* Elemente werden untereinander angeordnet */
}

.footer-ul a:link {
  text-decoration: none;  /* keine Standardeigenschaften fur Links */
}

.footer-ul a:link,
.footer-ul a:visited {
    color: #efefef;  /* Textfarbe white*/
}

.footer-ul a:hover,
.footer-ul a:focus,
.footer-ul a:active {       /* Auswahl wenn man mit der Maus darueber faehrt, wenn das Teil im Focus und aktiv ist */
  background-color: #000; /* Hintergrundfarbe schwarz */ 
  color: #efefef;         /* Textfarbe Neutral */
}

.footer-active {              /* Auswahl wenn das Teil aktiv ist */
  font-size: small;           /* Schftgroesse kleiner */
  color: darkblue;          /* Hintergrundfarbe Black */
  background-color: #fff;   /* Textfarbe White */
}

.birthday {
  display: none;  /* bei ganz kleinen Bildschirmen --> nicht anzeigen */
  color: #efefef;
}

.anfang {
  color: #efefef;         /* Textfarbe */
  text-decoration: none;    /* keine Standardeinstellungen */
  font-weight: bold;        /* Dickere Schrift */
  display: none;
}

@media screen and (min-width: 430px) {

  .birthday {
    display: block;
  }
  
}

@media screen and (min-width: 430px) {

  .anfang {
    display: block;
  }
  
}


@media screen and (min-width: 470px) {

  .grid {
    display: grid;                                  /* Gitterrahmen */
    grid-template-rows: 120px auto auto auto 70px;   /* Anzahl Zeilen (5) */
    grid-template-columns: repeat(10, 10%);         /* Anzahl Spalten (10) */
    min-height: 100vh;                              /* Mindestens die volle Hoehe des sichtbaren Bereichs */
  }  

}

/*-----------------------------------------------------   
     Tabletversion ab 640 Pixel                          
       640px / 16px/em = 40em  
       + 2 Spalten
         - Header und Navigation oben untereinander
		 - Hautpinhalt und Seitenleiste nebeneinander
		 - Fussleiste unten
------------------------------------------------------*/

@media screen and (min-width: 40em) {
 
  header {
    grid-column: 1 / 11;                        /* komplette Breite */
    grid-row: 1 / 2;                            /* nur die 1. Zeile */
    background-color: var(--hintergrund-farbe); /* Hintergrundfarbe hellgruen */
  }
  
/* Style fuer den Content-Bereich */
  .content {
    flex-direction: row;  /**/
  }

/* Style fuer den Bild- und Textbehaelter */
  .bild-behaelter, .listen-behaelter {
    width: 45%;       /**/
    margin-bottom: 0; /**/
  }

  .text-behaelter {
    width: 100%;
  }

  .nav-ul {
      padding: 0 2rem;    /* Rand drumrum */
      overflow: hidden;   /* was uebersteht wird abgeschnitten */
  }

  .nav-li {
/*        float: left;                /* linksbuendig */
      display: inline-block;      /* alle Element in einer Zeile ohne Zeilenumbruch */
      border: none;               /* ohne Rahmen */
      width: auto;                /* Breite automatisch anpassen */
  }

  .nav-li-a {
      padding: 0.7em 1.2rem;      /* Rans drumrum */
      display: inline-block;      /* alle Element in einer Zeile ohne Zeilenumbruch */
  }

}

@media screen and (min-width: 750px) {

  .grid {
    display: grid;                                  /* Gitterrahmen */
    grid-template-rows: 70px auto auto auto 70px;   /* Anzahl Zeilen (5) */
    grid-template-columns: repeat(10, 10%);         /* Anzahl Spalten (10) */
    min-height: 100vh;                              /* Mindestens die volle Hoehe des sichtbaren Bereichs */
  }  

  h1 {
    margin-top: 10px;        /* Rand nach oben */
  }
  
}

/*------------------------------------------------------------------
  Bildschirme ab 1024 Pixel                         
    1024px / 16px/em = 64em
    + 3 Spalten
      - Header oben
      - Navigation, Hauptinhalt und Seitenleisten nebeneinander
      - Fußleiste unten		
------------------------------------------------------------------- */

@media screen and (min-width: 64em) {

  .content {
      grid-column: 2 / 10;            /* 2. bis 7. Spalte */
      grid-row: 2 / 5;                /* 2. und 3. Zeile */
      padding: 1em 1.5em;             /* Rand drumrum */
      flex-direction: row;            /**/
      background-color: var(--hintergrund-farbe); /* Hintergrundfarbe */
    }

    .bild-behaelter, .listen-behaelter {
      width: 45%; /**/
  }

  .text-behaelter {
      width: 100%;  /**/
  }

  .rechter-rand {
      grid-column: 10 / 11;           /* die letzte Spalte */
      grid-row: 2 / 5;                /* 2. und 3. Zeile */
      background-color: var(--hintergrund-farbe); /* Hintergrundfarbe hellgruen */
      display: block;                 /**/
      max-width: 100%;                /* komplette Breite */
      height: auto;                   /* Hoehe automatisch */
  }

  .nav {                          /* Auswahl der Navigation */
      grid-column: 1 / 2;         /* 1.Spalte */
      grid-row: 1 / 5;            /* Zeile 3 und 4 */
      background-color: var(--balken-farbe);  /* Hintergrundfarbe Neutral */
    }

  .nav-ul {               /* Auswahl der Navigationsliste */
      box-shadow: none;   /* ohne Schatten */
      margin: 1em 0;      /**/
      padding: 0;         /**/
  }

  .nav-li {
      width: 100%;      /**/
      float: none;      /**/
      text-align: left; /**/
  }

  .nav-li-a {
      padding: 0.5em 0.5rem;  /**/
      display: block;         /**/
  }

}

/*------------------------------------------------------------------- 
  Grosse Bildschirme (>1280 Pixel) 
    1280px / 16px/em = 80em
    + 3 Spalten
        - Header oben
        - Navigation, Hauptinhalt und Seitenleisten nebeneinander
    * Zwei Artikel im Hauptinhalt nebeneinander
        - Fussleiste unten	
-------------------------------------------------------------------- */

@media screen and (min-width: 80em) {

  .grid {
      margin: 0 auto;   /* Rand oben und unten nix, links und Rechts automatisch */
      max-width: 80em;  /* Maximale Breite 80em */
  }
}