.card-image img { display: block; object-fit: cover; width: 100%; }
.card-image {
    margin: -1.25rem -1.25rem var(--abstand-3);
    overflow: hidden;
    border-radius: var(--radius-2) var(--radius-2) 0 0;
    aspect-ratio: 4/3;
}
.card-image img {
    height: 100%;
    transition: transform var(--dauer-4);
}
.card-image:has(img[src*="yt-"][src*=".cover.jpg"]) {
    position: relative;
}
.user-edit-header.is-locked {
    opacity: 0.85;
}
.einstufung-ausw-status-falsch {
    color: var(--danger);
    font-weight: 700;
}
.u-op-0-6.u-op-0-6.u-op-0-6 {
    opacity: 0.6;
}
.card-image:has(img[src*="yt-"][src*=".cover.jpg"])::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22%;
    aspect-ratio: 16 / 11;
    max-width: 80px;
    min-width: 44px;
    background-color: color-mix(in srgb, var(--marke-youtube) 92%, transparent);
    border-radius: 14%;
    z-index: 1;
    pointer-events: none;
    transition: background-color var(--dauer-3);
}
.card-image:has(img[src*="yt-"][src*=".cover.jpg"])::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-35%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent var(--on-scrim);
    z-index: 2;
    pointer-events: none;
}
.einstufung-ausw-status-ok { color: var(--success); font-weight: 700; }
.einstufung-ausw-status-teil { color: var(--warning); font-weight: 700; }
.einstufung-ausw-aufgabe > summary { font-size: var(--schrift-3); }