body {
    margin-top: 3.5em;    
    max-width: 80em;
    display: grid; }
}

img {
  width: 100%;
}


h1 { font-size: 1.5em; }    

/* Skip-Link */
#skip-link { position: absolute; left: 0; top: 0; background: black; color: white; padding: 0.25em; transform: translateY(-100%); transition: 0.2s transform; z-index: 1001 } 
#skip-link:focus { transform: translateY(0); }			

/* Allgemeine Einstellungen und Einstellungen für schmale Viewports */
#sitenav *, #sitenav a { background-color: lightgray; color: black }
#sitenav { top: 1em; left: 2em; }
#sitenav ul { list-style-type: none; margin:0; padding-top:.2em; padding-left:1em; padding-right:1em; border-radius: .5em; }
#sitenav ul ul { margin-left: 7em; margin-top: -3.1em; padding-left: .1em; }
#sitenav li a { display: inline-block; margin-top:.1em; margin-bottom:.1em; }
#sitenav li a, #sitenav li summary { padding: .5em; margin: .3em; line-height: 1.4em; outline: none; }
#sitenav li a:hover, #sitenav li summary:hover, #sitenav li a:focus, #sitenav li summary:focus { outline: 1px solid #5050ff }
#sitenav li a { text-decoration: none; }
#sitenav li { padding: 0em; white-space: nowrap; vertical-align: middle; }
#sitenav li[aria-current] a[href='#']::before { content: "► "; font-family: arial_unicode_ms }
#sitenav ul details summary::after { font-family: arial_unicode_ms; }
#sitenav ul details:not([open]) summary::after { content: ' ►'; }
#sitenav ul details[open] summary::after { content: ' ◄'; }
#sitenav ul summary::before { content: ""; width: 0; }
#sitenav > details:not([open]) > summary::before { content: "☰"; font-size: 0.9em; } 
#sitenav > details[open] > summary::before { content: "×"; font-size: 1.2em; } 
#sitenav > details { border: 1px solid black; border-radius: .2em; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; padding: .2em; }
#sitenav > details > ul { margin-left: -.5em; margin-top: .3em; }
#sitenav summary { cursor: pointer; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; }
#sitenav summary::-webkit-details-marker { display: none; }
#sitenav summary { list-style-type:  none; }
#sitenav.withjs > details > ul > li[aria-current] { border-left: 2px solid black; }
#sitenav.withjs { position: absolute; }
#sitenav.withjs ul { position: absolute; }

/* Einstellungen für breite Viewports */
#sitenav.large { top: 0; left: 0; right: 0; }
#sitenav.large > details { border: none; border-radius: 0; padding: 0 } 
#sitenav.large > details > ul , #sitenav.large > details > ul > li { display: inline-block }
#sitenav.large ul details:not([open]) summary::after { content: ' ▼'; }
#sitenav.large ul details[open] summary::after { content: ' ▲'; }
#sitenav.large > details > ul { width: 100%; box-sizing: border-box; }
#sitenav.large > details > ul { margin-left: 0; margin-top: 0; border-radius: 0; }
#sitenav.large > details > ul > li[aria-current] { border-bottom: 2px solid black; border-left: none; }
#sitenav.large ul ul { margin-left: -.5em; margin-top: -.1em; padding-left: .5em; border-radius: 0 0 .5em .5em;}


.Br300{
    margin: 0.3em;  
    display: inline-block; overflow: hidden;
    width: 24em;  
    padding: 0.4em;
  }
.Br150{
    margin: 0.3em;  
    display: inline-block; overflow: hidden;
    width: 12em;
    padding: 0.4em;
  }

figure {
  position: relative;
  margin: 0.3em;
  padding: .5em;
  width: 100%;
  background: white;
  width: 100%;
}
figcaption { 
  vertical-align:top; text-align:left; 
  font-size:small; color: black; 
}
 
.JHinfo { color: #771188; width: 12em; float: left; padding: 0.1em;}
.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%;}

 
@media (min-width: 60em) {
article {
   grid-template-columns: repeat(3,1fr);
}	
   section {
    width: 18em;
    /* grid-column: span 1; */
    /* grid-column-start: auto; */
  }
  nav ul {	
    flex-direction: row;  
  }
  nav ul ul {	
    flex-direction: column;  
  }
  nav li {
    font-size: 1em;
  }  
}