header, main, nav
      {
   max-width:800px;
   margin:0 auto;
   padding:1% 3% 1% 3%;
   text-align:justify;
   font-size:larger;
   background-color:#f2fff2
   }

.headline {text-align:center;}
.indl1     /* indent level */
      {
   margin-left:1em;
   }

.root 
      {
   margin: 0 auto;
   max-width: 800px;
   width: 100%;

   display: flex; /* flex-direction: row; */ /* Der default ist row, also müssen wir es nicht ausschreiben */
   /* flex-direction: column; v. Gregor - nicht gut, damit ist die nav oben in main */
   gap: 10px;     /* der platz zwischen flex children, hier nav und main */
   }

nav 
      {
   position: sticky; /* Das macht dass die Nav mit dem main scroll mitgeht (kleben bleibt) */
   top: 0;

   flex-shrink: 0; /* By default würde sonst main wachsen, bis es nav "erdrückt"  */
   padding: 0 8px;
   width: 100%;
   max-width: 160px;
   height: fit-content;
   max-height: 100vh;
   overflow-y: auto;

   display: flex;
   white-space: pre-line;
   }

main
      {
   width: 100%;
   }
   

.top     /* von Klaus */
      {
   position: relative;
   background-image: url(images/20180407-hunsrueck.jpg);
   background-position: center;
   background-repeat: no-repeat;
   margin: 3px;
   height: 150px;
   clear: both;
   text-align: left;
   width: 100%;
   /* border-radius: 10px;  */
   }