/* Container der Liste */


.acl { border: 1px solid #ccc; background: #fff; position: absolute; }
.acl ul {list-style: none;margin: 0;padding: 0;text-align: left;font-size: 1.1rem;/* overflow: hidden; */}
.acl li {padding: 10px 10px;cursor: pointer;border-bottom: 1px solid var(--brand-blue-dark);}
.acl li:hover, .acl a.acl-selected { background-color: #f0f0f0; color: #d32f2f; }
.acl a { text-decoration: none; color: #333; display: block; width: 100%; }


/* Hover-Effekt */
.acl a:hover {
    background-color: #fef2f2; /* Ganz zartes Orange-Weiß */
    color: var(--brand-orange);
}

/* Der aktiv ausgewählte Eintrag (per Tastatur) */
.acl a.acl-selected {
    background-color: var(--brand-orange);
    color: #ffffff;
}

/* Das Highlight der passenden Buchstaben (die Spans) */
.acl a span {
    font-weight: 700;
    color: var(--brand-orange);
    text-decoration: underline;
}

/* Wenn das Item selektiert ist, muss das Span weiß bleiben */
.acl a.acl-selected span {
    color: #ffffff;
    text-decoration: none;
}

/* Custom Scrollbar für Webkit (Chrome/Safari) */
.acl::-webkit-scrollbar {
    width: 6px;
}
.acl::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.acl::-webkit-scrollbar-thumb {
    background: var(--brand-orange);
    border-radius: 10px;
}