.nimda-pill span { background: var(--background); border: 1px solid var(--border); color: var(--text-muted); }
.nimda-pills { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.nimda-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.nimda-pill input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.nimda-pill.nimda-pill [data-farbe="accent"] + span {
    border-color: var(--accent); color: var(--accent);
}
.nimda-pill [data-farbe="success"]:checked + span {
    background: var(--success);
    color: var(--on-success);
}
.textdb-stufen .nimda-pill {
    display: block;
}
.nimda-pill input:checked + span {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}
.nimda-pill {
    display: inline-flex; cursor: pointer; position: relative;
}
.nimda-pill span {
    display: inline-block; padding: var(--abstand-2) var(--abstand-4); border-radius: 1rem;

 font-size: var(--schrift-2); transition: all var(--dauer-1);
}
.nimda-pill:hover span {
    border-color: var(--accent); color: var(--text);
}
.nimda-pill input:disabled + span { opacity: 0.4; cursor: not-allowed; }
.nimda-pill:has([data-staffel-ab]) { cursor: default; }
.textdb-stufen .nimda-pill span {
    display: block;
    padding: var(--abstand-2) var(--abstand-1);
    text-align: center;
}
.nimda-pill [data-farbe="success"] + span { border-color: var(--success); color: var(--success); }
.nimda-pill [data-farbe="primary"] + span { border-color: var(--primary); color: var(--primary); }
.nimda-pill [data-farbe="primary"]:checked + span { background: var(--primary); color: var(--on-primary); }
.nimda-pill [data-farbe="warning"] + span { border-color: var(--warning); color: var(--warning); }
.nimda-pill [data-farbe="warning"]:checked + span { background: var(--warning); color: var(--on-warning); }
.nimda-pill [data-farbe="accent"]:checked + span { background: var(--accent); color: var(--on-accent); }
.nimda-pill [data-farbe="danger"] + span { border-color: var(--danger); color: var(--danger); }
.nimda-pill [data-farbe="danger"]:checked + span { background: var(--danger); color: var(--on-danger); }