/*Styling Aufgaben-Liste*/
.lncu-aufgaben-list {
    --lncu-task-columns: 1;
}

.lncu-aufgaben-list.counter-reset {
    counter-reset: aufgabenCounter;
}

.lncu-aufgaben-list > ol {
    display: grid;
    --lncu-task-width: calc(980px/var(--lncu-task-columns));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--lncu-task-width), 100%), 1fr));
}

.lncu-aufgaben-list > ol ol {
    display: flex;
    flex-direction: column;
}

.lncu-aufgaben-list ol {
    position: relative;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    user-select: none;    
}

.lncu-aufgaben-list ol ol {
    margin-top: 1rem;
}

.lncu-aufgaben-list ol li {
    position: relative;
    margin-left: 3.5rem;
    padding: 0.5rem;
    border-radius: 1rem;
    cursor: pointer;
    hyphens: auto;
}

.lncu-aufgaben-list ol li:hover {
    background-color: var(--bricks-color-akzent-600);
}

.lncu-aufgaben-section.fakultativ .lncu-aufgaben-list ol li:hover {
    background-color: var(--bricks-color-green-600);
}

.lncu-aufgaben-section.teacher .lncu-aufgaben-list ol li:hover {
    background-color: var(--bricks-color-violet-600);
}

.lncu-aufgaben-list ol li::before {
    display: inline-flex;
    position: absolute;
    left: -3.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    line-height: 1;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    background-color: var(--bricks-color-blue-100);
    color: var(--bricks-color-white);
    padding: 0 0.5rem;
    border-radius: 1rem;     
}

/*aufgabenCounter in caption-element definiert mit weiteren Countern*/

.lncu-aufgaben-list > ol > li > ol {
    counter-reset: aufgabenSubCounter;
}

.lncu-aufgaben-list > ol > li > ol > li > ol {
    counter-reset: aufgabenSubSubCounter;
}

.lncu-aufgaben-list > ol > li {
    counter-increment: aufgabenCounter;
}

.lncu-aufgaben-list > ol > li > ol > li {
    counter-increment: aufgabenSubCounter;
}

.lncu-aufgaben-list > ol > li > ol > li > ol > li {
    counter-increment: aufgabenSubSubCounter;
}

.lncu-aufgaben-list > ol > li::before {
    content: counter(aufgabenCounter);
}

.lncu-aufgaben-list > ol > li > ol > li::before {
    content: counter(aufgabenSubCounter, lower-alpha);
}

.lncu-aufgaben-list > ol > li > ol > li > ol > li::before {
    content: counter(aufgabenSubSubCounter, lower-roman);
}

.lncu-aufgaben-list > ol > li.done {
    animation: lncu-done-fadeout 0.3s 0.3s forwards;
}

.lncu-aufgaben-list > ol li.done::before,
.lncu-aufgaben-list > ol li.done li::before {
    content: "\2713";
    animation: lncu-done-bounce 0.3s forwards;
}

@keyframes lncu-done-bounce {
    0%   {transform: scale(1);}
    50%  {transform: scale(1.1);}
    100% {transform:scale(1);}
}

@keyframes lncu-done-fadeout {
    0%   {filter: opacity(1) grayscale(0);}
    100% {filter: opacity(0.3) grayscale(1);}
}