/* Grundlayout */
body {
  margin: 0;
  padding: 16px;
  min-height: 100vh;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #000;
  background: rgb(209,206,198);
  background: linear-gradient(90deg, rgba(209,206,198,0.92) 7%, rgba(207,186,155,0.75) 39%, rgba(251,195,89,1) 100%);
  background-attachment: fixed;
}
header { text-align: center; }
header img { max-width: 100%; height: auto; }
h1 { text-align: center; font-size: 1.6rem; color: #000; }
main { max-width: 800px; margin: 0 auto; padding: 32px 0 24px; clear: both; }
h2 { color: #163495; font-size: 1.4rem; }
h3 { color: #163495; font-size: 1.15rem; margin-bottom: 0.3em; }
a { color: #163495; }
.w { font-family: Georgia, Arial, serif; font-size: 1.5em; color: maroon; }
.mitte { text-align: center; }
address { font-style: normal; }

/* Kontaktformular */
form label { display: block; margin-top: 12px; font-weight: bold; }
form input, form textarea { width: 100%; max-width: 500px; box-sizing: border-box; font: inherit; padding: 6px; }
form textarea { height: 250px; }
form button { margin-top: 16px; font: inherit; padding: 8px 24px; cursor: pointer; }

/* Navigation */
nav { margin: 0 auto; width: 100%; max-width: 1000px; }
ul#navigation, ul#navigation ul { margin: 0; padding: 0; list-style-type: none; height: 32px; }
ul#navigation li { float: left; width: 25%; position: relative; }
ul#navigation li a {
  display: block; line-height: 30px; text-align: center; color: #000; text-decoration: none;
  background: linear-gradient(to right, #C8DAE9, #B5B8BA);
  border: 1px solid #fff; border-bottom: 0;
}
ul#navigation li a:hover, ul#navigation li a:active { cursor: pointer; text-decoration: underline; }
ul#navigation li ul { display: none; position: absolute; left: 0; top: 31px; width: 100%; z-index: 100; }
ul#navigation li:hover > ul, ul#navigation li:active > ul, ul#navigation li:focus-within > ul { display: block; }
ul#navigation li ul { height: auto; }
ul#navigation li ul li { float: none; width: 100%; }
ul#navigation li ul a { background: #C7C7C7; line-height: 1.3; padding: 7px 6px; }

/* Smartphone-Menü */
#burger { display: none; }
@media screen and (max-width: 580px) {
  ul#navigation, ul#navigation ul { height: auto; }
  ul#navigation li { float: none; width: 100%; }
  ul#navigation li ul { display: block; position: static; }
  #burger {
    display: block; margin-right: 25px; -webkit-appearance: none; -moz-appearance: none; appearance: none;
    width: 25px; height: 25px; background-color: #5DB3FD; border: none; outline: none; cursor: pointer;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeAQAAAAATS5MPAAAAAnRSTlMAAHaTzTgAAAAUSURBVHjaY2DAC/7///8HN0EzvQD48y+tFbUTjAAAAABJRU5ErkJggg==");
    background-size: 25px 25px; background-position: center;
  }
  #burger:checked ~ ul#navigation { display: block; margin-top: 5px; }
  #burger:not(:checked) ~ ul#navigation { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  #burger:checked ~ ul#navigation { animation: fadeIn 0.6s; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
}

/* Zähler */
footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; max-width: 1000px; margin: 24px auto 0; font-size: 0.85rem; }
footer .version { text-align: right; }

/* Datenschutzerklärung */
h4, h5 { color: #163495; font-size: 1.05rem; margin-bottom: 0.3em; }
h5 { font-size: 1rem; }

/* Spamschutz: Feld für Bots, für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* News */
article { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(22, 52, 149, 0.3); }
article h3 { margin-bottom: 0; }
.datum { margin-top: 0.2em; font-size: 0.9rem; color: #444; }