/* Seite „Nützliche Programme“ */

.sicher { margin: 1.6rem 0 2rem; max-width: 46rem; }
.sicher ul { margin-bottom: 0; }

.marke {
  display: inline-block; align-self: flex-start; max-width: 100%;
  padding: 0.15rem 0.7rem; border-radius: 999px; border: 2px solid;
  font-size: 0.85rem; font-weight: 700; line-height: 1.5;
}
.marke.offen  { background: var(--gruen-grund); color: var(--gruen-text); border-color: var(--gruen-rand); }
.marke.frei   { background: var(--blau-grund); color: var(--blau-text); border-color: var(--blau-rand); }
.marke.teils  { background: var(--akzent-hell); color: var(--akzent-text); border-color: var(--knopf); }
.marke.dabei  { background: var(--grau-grund); color: var(--grau-text); border-color: var(--grau-rand); }

.legende { margin: 0 0 2rem; display: grid; gap: 0.8rem; max-width: 46rem; }
.legende div { display: grid; gap: 0.3rem; }
.legende dd { margin: 0; }
@media (min-width: 40rem) {
  .legende div { grid-template-columns: 15rem 1fr; align-items: start; }
}

.sprungliste { margin-bottom: 2.5rem; }
.sprungliste ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sprungliste li { margin: 0; }
.sprungliste a {
  display: inline-flex; align-items: center; min-height: 2.8rem; padding: 0.4rem 1rem; max-width: 100%;
  border-radius: var(--radius-knopf); background: var(--flaeche); color: var(--text);
  border: 3px solid var(--knopf); font-weight: 700; line-height: 1.3; text-decoration: none; hyphens: auto; overflow-wrap: anywhere;
}
.sprungliste a:hover { background: var(--akzent-hell); color: var(--text); }

.eignung { font-weight: 700; color: var(--text-leise); margin-bottom: 0.4em; }
.eignung::before { content: "Schwierigkeit: "; font-weight: 400; }

.programm h3 { margin-bottom: 0.3em; }
.programm .marke { margin-bottom: 0.8rem; }
.programm p { flex: 0 1 auto; }
.angaben { margin: auto 0 1rem; font-size: 0.95rem; }
.angaben div { margin-bottom: 0.3rem; }
.angaben dt { display: inline; font-weight: 700; }
.angaben dd { display: inline; margin: 0; }
.programm .klein { font-size: 0.9rem; color: var(--text-leise); }
.weiter-ersatz { font-weight: 700; color: var(--text-leise); margin: 0; }