body {
  display: grid;
  gap: 3em;
}

verein linklist,
netzwerk linklist {
  display: grid;
  gap: 0.5em;
}

/* 2-spaltiges Layout für breitere Viewports */
@media (min-width: 50em) {
  body {
    margin: 2%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr min-content;
  }
  body.impressum {
    margin: 2%;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr min-content;
  }
}

@media (min-width: 80em) {
  verein linklist,
  netzwerk linklist {
    margin: 1%;
    grid-template-columns: fit-content(40ch) fit-content(60ch);
    grid-template-rows: auto 1fr min-content;
  }
}

div {
  padding-top: 0.4em;
}

li {
  padding-top: 0.4em;
}

header,
verein,
netzwerk,
impressum,
footer {
  border-radius: 0.75em;
  border: thin solid;
  padding: 0.6em 1.6em;
}

verein {
  background: #ffede0;
  border-color: #df6c20;
}

netzwerk {
  background: #ffede0;
  border-color: #df6c20;
}

impressum {
  background: #edffe0;
  border-color: #6cdf20;
}

header,
footer {
  background: #edf8e0;
  border-color: #6cdf20;
  grid-column: 1 / -1;
}

.logo {
  max-width: 20%;
  height: auto;
  padding: 1%;
}

.schriftzug {
  max-width: 60%;
  height: auto;
  vertical-align: top;
  padding: 3%;
}

div.button {
  margin: 0.1em auto;
  padding: 0.2em;
  padding-top: 1em;
  padding-bottom: 0.8em;
  text-align: left;
}

a.button {
  padding: 0.8em 1em;
  border: 0.15em;
  border-style: solid;
  border-radius: 0.75em;
  color: #2040c0;
  background-color: #f8d880;
  border-color: #d0b080;
  font-weight: bolder;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

a.button:hover {
  background-color: #006010;
  border-color: #008020;
  color: #a0d0ff;
}

div.button-description {
  margin-top: 0.8em;
  margin-bottom: 1.5em;
  padding-top: 0.15em;
  padding-left: 1.35em;
}