#reader {
 display:none; /* Initieel niet zichtbaar omdat #articles wel zichtbaar is */
}

.artikel-item {
 border-radius:8px;
 border: 1px solid var(--kantlijn_tekst);
 margin:12px;
 padding:12px;
 display: flex;
 gap: 12px;
 cursor:pointer;
}

.artikel-item.nieuw {
 animation: new-article-flash 1.8s ease-out;
}

.artikel-item.excerpt-updated {
 animation: excerpt-flash 1.5s ease-out;
}

@keyframes new-article-flash {
 0% { box-shadow: 0 0 0 3px var(--headings); border-color: var(--headings); }
 100% { box-shadow: none; border-color: var(--kantlijn_tekst); }
}

@keyframes excerpt-flash {
 0% { background-color: #cce5ff; }
 100% { background-color: transparent; }
}

.artikel-item[data-read-count="0"] {
 background-color: #d4edda;
}

.artikel-item__img-wrap {
 position: relative;
 flex-shrink: 0;
}

.artikel-item__img {
 width: 80px;
 height: 80px;
 object-fit: cover;
 object-position: center;
 border-radius: 4px;
}

.artikel-item__badge {
 position: absolute;
 bottom: 8px;
 left: 50%;
 transform: translateX(-50%);
 background: #f0f0f0;
 color: #222;
 font-size: 12px;
 padding: 0px 3px;
 border-radius: 3px;
 display: inline-flex;
 align-items: center;
 gap: 3px;
}

.artikel-item__badge .material-symbols-outlined {
 font-size: 14px;
 color: var(--headings, #004471);
}

.artikel-item__content {
 flex: 1;
}

.artikel-item__meta {
 font-size: 0.75em;
 color: #777;
 font-weight:bold;
 margin-top: 6px;
}
.artikel-item__meta-icons {
 display: inline-flex;
 gap: 2px;
 align-items: center;
 vertical-align: middle;
}
.artikel-item__meta-info {
 margin-left: 6px;
}
.artikel-item__meta-icons .material-symbols-outlined {
 font-size: 14px;
 color: #d32f2f;
}
.artikel-item__meta-icons .favorite-filled {
 font-variation-settings: 'FILL' 1;
}

.zklein {
 font-size:10px;
 padding:0;
 margin-top:-4px;
 padding-left:-22px;
 text-align:center;
 color:gray;
}