/* Stylesheet für die Website "Grundlagen Ernährung" von Robert Brauckmann */


body {
  background-color: #404f31;
  color: #b4954e;   /* Schriftfarbe für Body - #b4954e gefällt mir gut */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: medium;
}

div#wrapper {
  background-color: #404f31;
  color: #b4954e;
}

div#header {
  text-align: center;
  background-color: #c57a30; /* sieht doof aus, noch mal anpassen */
  color: black;
  padding: 5px 0 5px 0;
  margin-bottom: 0; /* achließt die Lücke zwischen Navibereich und Header */
}


div#navi{
  background-color: #3e4933;   /* gefällt mir jetzt besser, ist ezwas dunkler als der Rest */
  padding: 5px 20px 5px 20px;
}
  #navi ul { margin-bottom: 0;  /*hiermit hab ich die Links im Navibereich zentriert */
  }

  #navi li {
    display: inline; /* hier werden die listenelemente nebeneinander angezeigt */
    list-style-type: none; /* keine Aufzählungspunkte */
    margin: 0 10px 0 0; /* rechts 10px, sonst 0 */
  }
  #navi a {
    color: black;
    background-color: #d1ac5e;  /* die Farbe der Buttons in der Navigation - echt schwierig #d1ac5e oder #9e7e3a */
    padding: 4px 8px 4px 8px;
    border: 1px solid #8c8c8c;
  }


div#inhalt {
  width: 75%;    /* schränkt die Breite des Inhaltbereichs ein */
  text-align: left;
  margin: 0 auto;  /* zentriert den Ihaltsbereich */
}


div#footer
{
  background-color: #3e4933;
  text-align: center; /* zentrieren */
  font-size: 80%; /* etwas kleiner als der Rest */
  font-style: normal; /* normale Schrift, nicht kursiv */
  letter-spacing: 2px; /* Abstand zwischen den Buchstaben */
  line-height: 1.5; /* Zeilenabstand, ohne Einheit */
}


/******************** Experimentieren mit den "div-Boxen im Header-Bereich *************************/
/* Ziel ist es, das Logo links neben den Titel zu bekommen ... */

<!-- erster Versuch ab hier deaktiviert ...
  #header div {
    width: 33%;
    background-color: white;
    padding: 10px;
    border: 1px solid black;
    margin: 5px;
  }
  #logo {
    position: absolute;  /* relative: andere Boxen denken die geänderte Box steht noch auf der alten Position - absolute: ander Boxen denken die geänderte Box sei gar nicht da */*/
    top: 25px;             /* bedeutet: füge an der vorherigen Position oben x Pixel an und verschiebe die Box damit nach unten*/
    right: 25px;           /* bedeutet: füge an der vorherigen Position rechts x Pixel an und verschiebe die Box damit nach links*/
    background-color: #f3c600;
  }
... Ende der Deaktivierung für den ersten Versuch -->

<!-- Beginn zweiter Versuch ... -->

  #logo {
    position:absolute;
    top: 25px ;
    right: 85%;
    padding: 5px 0 5px 0;
    margin-bottom: 0;
  }

<!-- komisch, Logo bei Chrome rechts, bei Phase5 aber links ??? - Ende zweiter Versuch -->
/******************** Experimentieren mit den "div-Boxen im Header-Bereich *************************/


/********************************** Einstellung um Bilder zu zentrieren **************************  */
#bild {
    display: flex;
    justify-content: center;
    align-items: center;
}
<!-- Hinweis: Die Bilder mussen in eine div-Box mit der class "zentriert" reingepackt werden -->

/*****************************Ende Einstellung um Bilder zu zentrieren **************************  */



/* *********************  Einstellungen für Überschriften ******************************************/
h1 { font-size: 250%; }
h2 { font-size: 180%; }
h3
{
  font-size: 120%;
  text-decoration: underline;      /* Text bei h3 soll unterstrichen sein */
  text-decoration-color: #c57a30;  /*Farbe der Unterstreichung */
}

/* *********************  Ende Einstellungen für Überschriften **************************************/


/* *********************  Einstellungen für Verlinkungen ******************************************/
a { text-decoration: none; } /* Unterstreichung bei Verlinkungen entfernen */
a:link {
}
a:visited { <!--
color: #CC6666; /*damit werden besuchte Links blasser dargestellt */  -->
}
a:hover {
  border-bottom: 1px solid #c57a30; /* wenn der Mauszeiger über einem Link schwebt */
}
a:focus {
  border-bottom: 1px solid #c57a30;/* bei Auswahl des Links mit der TAB-Taste */
}
a:active {
  color: white;
  background-color: #d90000; /* bei Anklicken des Links */
}

/* ******************************Ende Einstellungen für Verlinkungen ********************************/