
    h1{
        font-size: 3em;
        color:black;
        border: 1px solid black;
        background: lightseagreen;

    }
    html{
        background: lightskyblue;
        color: black;
        font-size: 1.5em;
    }

body{
    border:1px solid gray;
    width: fit-content;
   
}
ul li li{
    border:1px solid gray;
    width:fit-content;
    /* display: inline-block; */
    background: lightslategrey;

}
nav{
    background: lightseagreen;
}
ul li{
    border: 1px solid black;
    background: lightsteelblue;
    width: fit-content;
    /* display: block; */
}
nav a{
    display:block;
}
nav li{
    display: inline-block;
}
nav ul li li{
    display:block;
}
nav ul{
    margin-bottom: 0;
   margin-top: 0; 
}
div{
    border: 1px solid black;
}
div ul{
    margin-bottom: 0;
}

div ul li{
    display:inline-block;
    margin-top: 0;
    margin-bottom: 0;
}
  /* Tabreiterüberlagerung */
  nav ul{
    position:relative;
    top:1px;
  }
  .active,
  .active:hover,
  .active:focus-within{
    background:#fff;
    color:#333;
    border:1px solid #666;
    border-bottom-color:#fff;
    
  }

  a:hover,a:focus{
    /* background:#000; */
    color:#000;
    /* outline:1px solid red; */
    /* font-weight:900; */
    text-decoration:none;
  }

  nav li{
    background:lightslategrey;
    color:#000;
    /* 
    Zwischen interaktiven Elementen die aufeinander folgen sind lt. WCAG2.1 Abstände von 4px einzuhalten um eine gute Benutzbarkeit sicherzustellen 
    */
    /* padding-right:4px; */
    margin:0 0.25em;

    border:1px solid transparent;
    border-bottom-color:#666;    }

  nav a{
    color:inherit;
    /* height:59px; */
    display:block;
    padding:5px 1em;
    text-decoration:none;
  }

  nav li:hover,
  nav li:focus-within{
    background:black;
    color:lightseagreen;
  }

  nav li:hover a,
  nav li:focus-within a{
    color:inherit;
  }
 /* Aktiven Menüpunkt kennzeichnen */
 .active,
 .active:hover,
 .active:focus-within{
   background:#fff;
   color:#333;
   border:1px solid #666;
   border-bottom-color:#fff;
   
 }