body    {
        font-family: Verdana, Arial, Sans-Serif;
        width:100%;
        background-color: rgb(214, 206, 187);
        /*background-image: url("higr-sonne2.jpg");*/
        border: 5px solid green;
        }



#header {
        position: relative;
        background-color: rgb(214, 206, 187);
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        width: 100%;
        height: 106px;
        text-align: center;
        border: 3px solid white;
        z-index: 10;
        }

#content {
        position: relative;
        background-color: rgb(214, 206, 187);
       /* background-image: url("higr-ind.jpg");  */
        font-size: 1.0em;
        margin: 0px 20px 0px 0px;
        padding: 0px 0px 0px 0px;
        width: 100%;
        border: 5px solid yellow;
        z-index: 5;
        }

#bild100l {
    float: left;
    width: 100px;
    height: 100px;
    margin-left: 0px;
    margin-right: 0px;
    border: 3px solid white;
    }

#bild100r {
    float: right;
    width: 100px;
    height: 100px;
    margin-left: 0px;
    margin-right: 0px;
    border: 3px solid white;
    }

#bild150l {
    float: left;
    width: 150px;
    height: 100px;
    margin-left: 0px;
    margin-right: 0px;
    border: 3px solid white;
    }

#bild150r {
    float: right;
    width: 150px;
    height: 100px;
    margin-left: 0px;
    margin-right: 0px;
    border: 3px solid white;
    }

#schaf {
    float: right;
    width: 300px;
    height: 214px;
    margin-left: 0px;
    margin-right: 0px;
    border: 3px solid white;
    }

.rechts      {
    display: block;
    position: relative;
    float: right;
    background-color: #;
    margin-right: 0px;
    font-size: 6px;
    padding: 0px 0px 0px 0px;
    width: 250px;
    height: auto;
    border: 0px solid black;
    text-align: justify;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
     hyphens: auto;
    }

.rechts2      {
    display: block;
    position: relative;
    float: right;
    background-color: #;
    margin-right: 0px;
    padding: 0px 0px 0px 0px;
    width: auto;
    height:auto;
    border: 5px solid green;
    }

.links      {
    display: block;
    position: relative;

<!-- float: left; -->

    background-color: #;
    margin-right: 0px;
    padding: 0px 0px 0px 0px;
    width: auto;
    height:auto;
    border: 5px solid green;
    }

.image {
   transition: transform 0.7s;
   }

.image:hover {
   transform: scale(4.5, 4.5);
   }

.image2 {
   transition: transform 0.7s;
   }

.image2:hover {
   transform: scale(2.5, 2.5);
   }



flex1    {
         display: block;
         position: relative;
         background-color: rgb(214, 206, 187);
         background-image: url("higr-ind.jpg");
         margin: 0px 0px 20px 0px;
         padding: 20px 20px 20px 20px;
         width: 99%;
         border: 0px solid blue;
         z-index: 0;
         }

flex2    {
         display: block;
         position: relative;
         background-color: rgb(214, 206, 187);
         background-image: url("higr-ahnen.jpg");
         margin: 0px 0px 20px 0px;
         padding: 20px 20px 20px 20px;
         width: 99%;
         border: 0px solid blue;
         z-index: 0;
         }

flex3    {
         display: block;
         position: relative;
         background-color: rgb(214, 206, 187);
         background-image: url("higr-berechn.jpg");
         margin: 0px 0px 20px 0px;
         padding: 20px 20px 20px 20px;
         width: 99%;
         border: 0px solid blue;
         z-index: 0;
         }

flex4    {
         display: block;
         position: relative;
         background-color: rgb(214, 206, 187);
         background-image: url("higr-kont.jpg");
         margin: 0px 0px 20px 0px;
         padding: 20px 20px 20px 20px;
         width: 99%;
         border: 0px solid blue;
         z-index: 0;
         }

flex5    {
         display: block;
         position: relative;
         background-color: rgb(#FFFFFFFF713);
         background-image: url("higr-mein.jpg");
         margin: 0px 0px 20px 0px;
         padding: 20px 20px 20px 20px;
         width: 99%;
         border: 5px solid blue;
         z-index: 0;
         }

flex6    {
         display: block;
         position: relative;
         background-color: rgb(214, 206, 187);
         background-image: url("higr-fint.jpg");  */
         padding: 0px 0px 0px 0px;
         width: 99%;
         border: 0px solid blue;
         z-index: 0;
         }

box      {
         display: flex;
         align-items: center;
         justify-content: center;
         /*background-image: url("higr-ind.jpg");  */
         margin-left: 27%;
         width: 500px;
         border: 5px solid green;
         z-index: 0;
         }


/*Styling
Machen wir uns ans stylen unseres Menüs.

Zunächst verändern wir mittels box-sizing das Box-Modell, so dass ein Innenabstand (padding) das Element nicht mehr vergrößert.
Für den nav-Container setzen wir eine Hintergrundfarbe und legen die Schriftgröße auf 16 Pixel fest.
*/


nav {
    box-sizing: border-box;
    float: left;
    width: 100%;
    background: #4C6D19;
    font-size:16px;
    color: white;
    border: 1px solid white;
    }

/*Im nächsten Schritt deklarieren wir die Aufzählungslisten und Links. Wir deaktivieren den Innen- und Außenabstand der Aufzählungslisten.
Die Links formatieren wir als Blockelement, damit das gesamte Listenelement klickbar wird und nicht nur der Link selbst. Die Schriftfarbe setzen
wir auf weiß und schalten ein Unterstreichen der Links ab.
*/

nav ul {
  margin: 0;
  padding: 0;
}

nav a {
  display: block;
  color: white;
  text-decoration: none;
  border: 1px solid white;
}

/*Wir stylen nun die Listenelemente sowie die darin liegenden Links der ersten Ebene. Die Listenelemente werden gefloatet, <br>
damit sie horizontal dargestellt werden. Zugleich deaktivieren wir Aufzählungszeichen (list-style) und geben den Listenelmenten <br>
bei hover eine andere Hintergrundfarbe. Die Links innerhalb der Listenelemente versehen wir mit einem Innenabstand von 20 Pixel zu allen Seiten.
*/

nav ul li {
  position: relative;
  float: left;
  list-style: none;
  width: 16.666%;
}

nav ul li:hover {
  background: #99BD1A;
}

nav ul li a {
    padding: 20px;
}

/*Kommen wir zu den Untermenüs. Die Untermenüs positionieren wir absolut und verfrachten sie mit den Positionsangaben (top und left) <br>
erst einmal ganz weit außerhalb des sichtbaren Bereichs, da sie ja nur angezeigt werden sollen, wenn wir mit der Maus über das entsprechende <br>
Listenelement hovern.
Die Untermenüs bekommen eine gegenüber der ersten Ebene leicht veränderte Hintergrundfarbe und einen schicken Schlagschatten (box-shadow).
*/

nav ul ul {
  position: absolute;
  top: -9999px;
  left: -9999px;
  background:#72851B;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);

}

/*Den Listenelementen innerhalb der Untermenüs geben wir eine feste Breite (width) von 200 Pixel und eine dezente Rahmenlinie nach unten. <br>
Ganz wichtig: die Listenelemente der Untermenüs sollen nicht horizontal sondern vertikal dargestellt werden. Daher müssen wir den float abschalten. <br>
Abweichend von der ersten Ebene setzen wir noch den Innenabstand der Listenelemente oben und unten von 20 auf 10 Pixel herab.
*/

nav ul ul li {
  float: none;
  width: 200px;
  border-bottom: 2px solid white;
  color: white;
}

nav ul ul li a {
  padding: 10px 20px;
  border: 1px solid darkblue;
  border-radius: 10px;
  box-shadow: 0 5px 10px white inset;

}

/*So weit, so gut. Wie bekommen wir die Untermenüs eingeblendet, wenn das übergeordnete Listenelement gehovert wird? So:
Wir ändern bei hover des Listenelements einfach die Positionsangaben des Untermenüs und schon wird das Untermenü an der <br>
linken Kante genau unterhalb des Listenelements ausgerichtet.
*/

nav ul li:hover > ul {
  top: 100%;
  left: 0;
}

/*Die Position der Untermenüs für die folgenden Ebenen müssen wir noch anpassen, da diese ja nicht links unterhalb des Listenelements <br>
sondern an der oberen Kante rechts daneben ausgerichtet werden sollen. Das erreichen wir durch folgende Angaben:
*/

nav ul ul li:hover > ul {
  top: 0;
  left: 200px;
}

/*Und das war’s im Grunde genommen auch schon. Aber wir wollen noch ein wenig Feintuning betreiben.
Feintuning

Ihr fragt euch noch immer, warum wir den Listenelementen mit Untermenü eine Klasse (submenu) zugewiesen haben? Ja, ich hab’s nicht vergessen.

Die Listenelemente mit Untermenü wollen wir abweichend von den Standard-Listenelementen formatieren und diesen einen Pfeil nach unten bzw. ab <br>
der zweiten Ebene nach rechts, als Indikator für das Vorhandensein eines Untermenüs, verpassen.

Das machen wir mittels des Pseudoelements :after und bedienen uns eines kleinen Tricks, um den Pfeil darzustellen:
Wir nutzen dazu die Rahmen-Eigenschaft (border) indem wir drei Seiten des Rahmens transparent darstellen und nur der Rahmenlinie nach oben <br>
(dadurch zeigt der Pfeil nach unten) eine weiße Farbe geben.

Übrigens: dieser Trick funktioniert in alle Pfeilrichtungen. Immer die gegenüber liegende Seite in die der Pfeil zeigen soll, erhält die Farbe. <br>
Alle anderen Seiten sind transparent.

Mittel des Kombinators > geben wir an, dass nur das Kindelement a des Listenelements mit der Klasse submenu angesprochen wird. <br>
Würden wir auf den Kombinator verzichten, hätten sämtliche Listenelemente mit Links des Untermenüs und deren Untermenüs den Pfeil.

Mit margin richten wir den Pfeil aus, so dass er einigermaßen mittig angezeigt wird.
*/

nav ul li.submenu > a:after {
  position: relative;
  float: right;
  content: '';
  margin-left: 10px;
  margin-top: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
}

/*Nun haben wir zwar den Pfeil nach unten für die Hauptmenüebene, bei den Untermenüs der folgenden Ebenen passt das aber nicht mehr, <br>
da das Untermenü nach rechts aufgeht und nicht nach unten. Da wäre ein Pfeil nach rechts angebracht, oder?
Gesagt, getan:
*/

nav ul ul li.submenu a:after {
  margin-left: auto;
  margin-right: -10px;
  border-left: 5px solid #fff;
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/*Noch eine Sache: den Listenelementen der Untermenüs haben wir eine Rahmenlinie nach unten verpasst. Beim letzten Listenelement <br>
eines Untermenüs wirkt das eher deplatziert. Mittels border-bottom-none
stellen wir die Rahmenlinie beim jeweils letzten li-Kindelement ab.
*/

nav ul ul li:last-child {
  border-bottom: none;
}


h1, h2, h3, h4{
        font-family: Verdana, Arial, Sans-Serif;
        font-weight: bold;
        }

h1 {
        font-size: 2em;
        text-align: center;
        }

h2 {
        font-size: 1.5em;
        text-align: center;
        }

h3 {
        font-size: 0.7em;
        text-align: left;
        }

h4 {
        font-size: 0.5em;
        text-align: left;
        }
p1 {
        font-family: Verdana, Arial, Sans-Serif;
        font-size: 1.1em;
        text-align: left;
        font-weight: normal;
        font-style: normal;
        }


.font2 {
         font-size: 1.5em;
         text-align: center;

         }

.font1   {
         font-size: 0.9em;
         text-align: center;
         }


<!--  }
  a[href^="#"]:before  {
    content:'? ';
         } -->