.cta-att-pill { align-items: center; display: flex; gap: var(--abstand-2); }
.cta-att-list { display: flex; flex-direction: column; gap: var(--abstand-2); }
.cta-att-pill, .cta-att-counter { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pille); }
.cta-att-input:focus-visible + .cta-att-trigger {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.cta-att-rm {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    font-size: var(--schrift-5);
    line-height: var(--zeile-1);
    padding: var(--abstand-1) var(--abstand-2);
}
.cta-att-counter.cta-att-over {
    background: var(--danger); color: var(--on-danger); border-color: var(--danger);
}
.cta-att-input { inset-inline-start: -9999px; }
.cta-att-list { list-style: none; padding: 0; margin: 0; }
.cta-att-pill { padding: var(--abstand-1) var(--abstand-2) var(--abstand-1) var(--abstand-3); font-size: 0.85em; }
.cta-att-name { flex: 1 1 auto; color: var(--text); word-break: break-all; }
.cta-att-rm { color: var(--text-muted); font-size: 1.1em; line-height: var(--zeile-1); padding: 0 var(--abstand-1); }
.cta-att-counter { width: max-content; padding: var(--abstand-1) var(--abstand-2); font-size: 0.8em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cta-att-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.cta-att-rm:hover { color: var(--danger); }