@charset "UTF-8";

@media all {
/*
  body { background-color: white; color: black; }
  h1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #000000}
  h2 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #333333}
  body { font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333 }
  a {  font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: underline; color: #333333}
  .verlauf {  background-image: url(images/verlauf.gif); background-repeat: repeat-y; background-position: right}
  a.plain {  font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; text-decoration: none}
  a:hover {  font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: underline overline; background-color: #FEE7D8}
*/

  body {
    display: grid;
    grid-template-columns: 160px 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 30px auto;
    grid-template-areas: 
      "header header header header header"
      "page page page page page"
      "sidebar main main main main";
    column-gap: 10px;
    row-gap: 15px;
    font-size: 16px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: white;
    color: black;
  }
  body { display: grid; width: 99vw; }
  body > div#header { grid-area: header; }
  body > div#page { grid-area: page; text-align: right; }
  body > nav { grid-area: sidebar; }
  body > main { grid-area: main; max-width: 70rem; }

  #header h1 { text-align: center; font-size: 48px; letter-spacing: 0.1rem; font-family: Helvetica; font-weight: normal; margin: 0 0; line-height: 5rem; }
  nav a { text-decoration: none; color: black; }
  nav a:hover { text-decoration: underline overline; }
  nav ul { list-style: none; padding-left: 0px; }
  nav li { padding: 5px; margin: 5px; background-color: #FEE7D8; }
  nav li:before { content: " "; background-color: white; }
  nav li.active { background-color: #FF9999; }

  main h2 { font-size: 16px; color: #333333; }
  main a { text-decoration: underline; color: #333333; }
  main a:hover { text-decoration: underline overline; background-color: #FEE7D8; }
  main li { margin: 5px 0px; }

  #index-page { display: block; }

  .gallery { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; align-content: stretch; gap: 10px; }
  .gallery figure { width: 200px; /*calc((100% - 60px) / 3);*/ text-align: center; }
  .gallery figure img { width: 100%; max-width: 200px; min-width: 100px; }
}

@media print {
  body { display: block; }
  body > div#header { display: none; }
  body > nav { display: none; }
  body > main { max-width: inherit; }
}