html {
	box-sizing: border-box;
}

body{ display: grid; max-width: 90em; }

.Br150{
    position: relative; float: left; overflow: hidden;
    width: 20em;  
    padding: 0.5em;
  }

#TESTDD{   text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */    
}
  
.JHinfo { position: relative; color: #771188; }
.JHinfo span { display: none; color: #FFFFFF; }
.JHinfo:active span { display: block; position: fixed; left: 0.2em; top: 0.2em; color: #000000; background-color:#000001; background-image:url(JHinfo1.jpg); padding: 0.5em; z-index: 101; max-width:100%; max-height:100%; } 
.JHinfo span:active { display: none; color: #FFFFFF; }
.JHinfo img {max-width:98%; max-height:98%;}

#Titel1{ margin-top:2em;  }

#NavMenu{
    margin: 0 auto;
    position:fixed; 
    top:0pt; color: blue
}

.nav-link {
  position: relative;
  padding-left: 1.25em;
  display:none;
}
.nav-link::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 1em;
  height: 0.2em;
  border-top: 0.6em double blue;
  border-bottom: 0.2em solid blue;
}

  nav {
    width: 60em;
    height: 2em;
    padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
  }

  nav:after {
    content:'';
    clear: left;
  }

  nav ul {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 80%;
  }

  nav li {
    list-style: none;
    float: left;                
    position: relative;
    margin: 0; 
    padding: 0;
  }

  nav ul ul {
    margin: 0; 
    padding: 0;
    position: absolute;
    top: 2.5em; 
    font: 0/0 serif;            /* Unternavigation ausblenden */
    z-index: -1;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
  }

  nav ul li:hover ul {
    font: inherit;
    z-index: auto;               /*  Unternavigation einblenden */
  }

  nav ul ul li {
    float: none;
    margin-bottom: 0.2em;
  }

  nav a, 
  nav span {
    display: block;
    width: 7.5em;                 /* Breite den in li enthaltenen Elementen zuweisen */
    margin: 0.6em 0 0 0;
    padding: 0.4em;
    text-decoration: none; 
    font-weight: bold;
    border: 1px solid blue;
    border-radius: 10px 10px 0 0;
    box-shadow: 0px 5px 10px white inset;
    color: royalblue; 
    background-color: #CCFFFF;
    background-image: repeating-linear-gradient(165deg, transparent, transparent 9px, gold 9px, gold 10px);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
  }

  nav ul ul a, 
  nav ul ul span {
    border-radius: 10px;
  }  

  nav a:focus,
  nav a:hover, 
  nav span {                       /* aktuelle Unterseite kennzeichnen */
    color: royalblue; 
    background-color: gold;
  }

  nav a:focus,
  nav a:hover {
     margin-top: 0;
     padding: 1em 0.4em 0.4em;
  }
  
  nav ul ul a:hover {
    margin: 0.6em 0 0 0;
    padding: 0.4em;
  }

  nav ul ul span {                  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
    color: gold;
  }

  
@media (min-width: 30em) {
 article {
   grid-template-columns: repeat(3,1fr);
 }	
   section {
    grid-column-start: auto;
  }
}
  
@media only screen and (max-width : 380px) {
  body{ width:100% }
.nav-link {
  position: relative;
  padding-left: 1.25em;
  display:block;
}
#Titel1{ margin-top:0em; }

  #NavMenu{
    padding: 0.5em; text-align: left; 
    border: 2px solid black;
    background-color: #ccffff;
    margin: 0 auto;
    position:relative; 
    top:0pt; color: blue
 }

 nav {
    width: 8em;
    height: 22em;
    padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
  }

  nav ul {
    margin: 0; 
    padding: 0;
    text-align: center;
  }

  nav li {
    list-style: none;
    position: relative;
    margin: 0 0 .2em 0; 
    padding: 0;
  }

  nav ul ul {
    position: absolute;
    top: -0.6em; 
    left: 8em;
    font: 0/0 serif;/* Unternavigation ausblenden */
    z-index: -1;
    transition: font 0.5s;
  }

  nav ul li:hover ul {
    font: inherit;
    z-index: auto;                   /*  Unternavigation einblenden */
  }

  nav a, 
  nav span {
    display: block;
    width: 6.8em;                     /* Breite den in li enthaltenen Elementen zuweisen */
    margin: 0.6em 0 0 0;
    padding: 0.4em;
    text-decoration: none; 
    font-weight: bold;
    border: 1px solid blue;
    border-radius: 10px;
    box-shadow: 0px 5px 10px white inset;
    color: gold; 
    background-color: royalblue;
    background-image: repeating-linear-gradient(135deg, transparent, transparent 9px, gold 9px, gold 10px);
  }

  nav ul ul a, 
  nav span {
    border-radius: 10px;
  }  

  nav a:focus,
  nav a:hover, 
  nav span {                        /* aktuelle Unterseite kennzeichnen */
    color: royalblue; 
    background-color: gold;
  }

  li a#aktuell {
    color: white; background-color: gray;
  }

  nav span {                  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
    color: gold;
  }
 }