/* Newsletter-Anmeldung auf der Kontaktseite (kein Original-CSS, eigene Ergänzung).
   Farben aus main.css: Text #222020, Grau #7e7b77, Grund #fdfaf0. */
.newsletter-formular {
  max-width: 24rem;
  margin-top: 8px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #222020;
}
.info .nl-intro,
.info .nl-hinweis,
.info .nl-status,
.info .nl-fehler {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;
  color: #222020;
}
.info .nl-intro { margin: 4px 0 16px; font-weight: 300; }
.nl-feld { margin-bottom: 16px; }
.nl-feld label { display: block; margin-bottom: 4px; }
.nl-feld input {
  display: block;
  width: 100%;
  font: inherit;
  color: #222020;
  background: #fff;
  border: 1px solid #7e7b77;
  padding: 8px 12px;
  border-radius: 0;
}
.nl-feld input:focus-visible,
.nl-knopf:focus-visible {
  outline: 2px solid #222020;
  outline-offset: 2px;
}
.nl-feld input[aria-invalid="true"] { border: 2px solid #b3261e; }
.info .nl-fehler { color: #b3261e; font-weight: 600; margin-bottom: 4px; }
.info .nl-hinweis { font-size: 16px; color: #5c5955; margin-bottom: 16px; }
.nl-hinweis a { text-decoration: underline; }
.nl-knopf {
  font: inherit;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fdfaf0;
  background: #222020;
  border: 0;
  padding: 12px 24px;
  min-height: 44px;
  cursor: pointer;
  transition: background-color .3s;
  touch-action: manipulation;
}
.nl-knopf:hover { background: #4a4646; }
.nl-knopf[aria-busy="true"] { cursor: progress; background: #4a4646; }
.info .nl-status { min-height: 1.5em; margin-top: 12px; }
.info .nl-status.nl-ok { color: #2f6b3a; font-weight: 600; }
.info .nl-status.nl-fehlgeschlagen { color: #b3261e; font-weight: 600; }
/* Bot-Falle von Mailchimp, für Menschen unsichtbar. */
.nl-falle { position: absolute; left: -5000px; }