/* Farben und Kopfzeile – gemeinsam für die Seiten und den Bereich „Erfassen“ */
:root {
  --grund: #f6f7f5; --flaeche: #ffffff; --text: #1d2420; --leise: #5d6b64; --linie: #dde3df;
  --akzent: #2e5e4e; --akzent-hell: #e6efeb; --warn: #9a5b00; --warn-hell: #fdf3e2;
  --rot: #a3322a; --rot-hell: #fbeceb; --gut: #2f7a3e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #141816; --flaeche: #1c221f; --text: #e6ebe8; --leise: #9aa8a1; --linie: #2e3733;
    --akzent: #7fbfa6; --akzent-hell: #22332c; --warn: #e3a54a; --warn-hell: #33291a;
    --rot: #ec8a82; --rot-hell: #3a2220; --gut: #7cc68a;
  }
}
.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); padding: 10px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; position: sticky; top: 0; z-index: 5; }
.marke { font-weight: 700; color: var(--akzent); text-decoration: none; font-size: 17px; }
nav.kopf-nav, .kopf nav { display: flex; flex-wrap: wrap; gap: 4px; }
.kopf nav a { text-decoration: none; color: var(--text); padding: 6px 10px; border-radius: 8px; }
.kopf nav a.aktiv { background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }
.kopf nav a.leise { color: var(--leise); }

/* Erklärungen „ⓘ“ */
.info-knopf { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0 0 0 6px;
  padding: 0; border-radius: 50%; border: 1.5px solid var(--akzent); background: transparent; color: var(--akzent);
  font: italic 700 11px/1 Georgia, "Times New Roman", serif; cursor: pointer; vertical-align: middle; flex-shrink: 0; }
.info-knopf:hover, .info-knopf[aria-expanded="true"] { background: var(--akzent); color: var(--flaeche); }
.info-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
div.help.zu { display: none !important; }
div.help { background: var(--akzent-hell); color: var(--text) !important; border-radius: 6px; padding: 6px 10px !important;
  margin-top: 6px !important; font-size: 13px !important; line-height: 1.45; max-width: 640px; }
.info-blase { position: absolute; z-index: 1000; background: var(--flaeche); color: var(--text); border: 1px solid var(--akzent);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.45; box-shadow: 0 4px 16px rgba(0,0,0,.18);
  font-weight: 400; text-transform: none; letter-spacing: normal; white-space: normal; text-align: left; }

/* Menü am Handy zusammengeklappt */
.menue-knopf { display: none; margin-left: auto; align-items: center; gap: 8px; background: transparent;
  border: 1px solid var(--linie); border-radius: 8px; padding: 7px 12px; color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
.menue-striche, .menue-striche::before, .menue-striche::after { display: block; width: 16px; height: 2px; background: currentColor;
  border-radius: 1px; position: relative; }
.menue-striche::before, .menue-striche::after { content: ""; position: absolute; left: 0; }
.menue-striche::before { top: -5px; }
.menue-striche::after { top: 5px; }
@media (max-width: 760px) {
  .kopf { flex-wrap: wrap; }
  .menue-knopf { display: inline-flex; }
  .kopf nav { display: none; flex-basis: 100%; flex-direction: column; gap: 2px; padding-top: 6px; }
  .kopf.offen nav { display: flex; }
  .kopf nav a { padding: 10px 12px; font-size: 16px; }
}