/* Lieblingstracks (08.11.2026): Trackliste mit Herzen unter dem Player, Box „Leser-Top 3“ in der rechten Spalte. */
.mk-tracks { --mk-tracks-red: #b8322a; --mk-tracks-olive: #858b6a; --mk-tracks-gold: #e4b13c; margin: 0 0 24px; font-family: Arial, Helvetica, sans-serif; color: #2b2d31; }
.mk-tracks *, .mk-tracks-top * { box-sizing: border-box; }
.mk-tracks-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 0 8px; border-bottom: 2px solid var(--mk-tracks-olive); }
.post-single article .mk-tracks-head h3 { margin: 0; padding: 0; color: #2b2f24; font: 900 13px/1.3 Arial, Helvetica, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.mk-tracks-meta { color: #6b6f66; font: 400 12px/1.3 Arial, Helvetica, sans-serif; }

.post-single article p.mk-tracks-leader { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 9px 10px; border-radius: 6px; background: #f6f6f2; color: #3a3f3c; font: 400 13px/1.35 Arial, Helvetica, sans-serif; }
.post-single article p.mk-tracks-leader[hidden] { display: none; }
.mk-tracks-leader strong { color: #23292b; }
.mk-tracks-leader .mk-tracks-icon { flex: 0 0 auto; fill: var(--mk-tracks-red); }
.mk-tracks-sub { color: #6b6f66; }

.post-single article ol.mk-tracks-list { margin: 0; padding: 0; list-style: none; }
.post-single article .mk-tracks-list > li { margin: 0; padding: 0; list-style: none; }
.post-single article .mk-tracks-list > li::before { content: none; }
.post-single article .mk-tracks-list > li.mk-tracks-cd { padding: 12px 0 4px; color: #6b6f66; font: 700 11px/1.3 Arial, Helvetica, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.post-single article .mk-tracks-list > li.mk-tracks-row { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid #ececE6; }
.mk-tracks-row::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: var(--mk-bar, 0%); max-width: 100%; border-radius: 3px; background: rgba(133, 139, 106, .12); pointer-events: none; transition: width .25s ease; }
.post-single article .mk-tracks-list > li.mk-tracks-row::before { content: ''; }
.mk-tracks-row.is-top::before { background: rgba(228, 177, 60, .22); }
.mk-tracks-no, .mk-tracks-title, .mk-tracks-heart { position: relative; }
.mk-tracks-no { color: #8a8f86; font: 400 12px/1 Arial, Helvetica, sans-serif; text-align: right; font-variant-numeric: tabular-nums; }
.mk-tracks-title { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; padding: 6px 0; }
.mk-tracks-name { min-width: 0; color: #2b2f24; font: 400 14px/1.35 Arial, Helvetica, sans-serif; overflow-wrap: anywhere; }
.mk-tracks-row.is-top .mk-tracks-name { font-weight: 700; }
.mk-tracks-badge, .mk-tracks-mine { display: none; flex: 0 0 auto; font: 700 10px/1.4 Arial, Helvetica, sans-serif; white-space: nowrap; }
.mk-tracks-row.is-leader .mk-tracks-badge { display: inline-block; padding: 1px 7px; border-radius: 9px; background: var(--mk-tracks-gold); color: #2b2410; letter-spacing: .03em; }
.mk-tracks-row.is-mine .mk-tracks-mine { display: inline-block; color: var(--mk-tracks-red); font-size: 11px; }

.post-single article button.mk-tracks-heart { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 58px; height: 40px; margin: 0; padding: 0 8px; border: 0; border-radius: 20px; background: transparent; color: #6b6f66; font: 700 12px/1 Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: none; transition: background-color .15s ease; }
.post-single article button.mk-tracks-heart:hover:not(:disabled) { background: rgba(184, 50, 42, .08); }
.post-single article button.mk-tracks-heart:focus-visible { outline: 2px solid #778062; outline-offset: 2px; }
.post-single article button.mk-tracks-heart:disabled { cursor: default; opacity: .75; }
.mk-tracks-heart .mk-tracks-icon { flex: 0 0 auto; fill: none; stroke: #8a8f86; stroke-width: 1.8; transition: fill .15s ease, stroke .15s ease, transform .15s ease; }
.mk-tracks-row.is-top .mk-tracks-heart { color: #9b2a23; }
.mk-tracks-row.is-top .mk-tracks-icon { fill: rgba(184, 50, 42, .22); stroke: var(--mk-tracks-red); }
.mk-tracks-row.is-mine .mk-tracks-heart { color: #9b2a23; }
.post-single article .mk-tracks-row.is-mine button.mk-tracks-heart { background: rgba(184, 50, 42, .10); }
.mk-tracks-row.is-mine .mk-tracks-icon { fill: var(--mk-tracks-red); stroke: var(--mk-tracks-red); transform: scale(1.08); }
.mk-tracks.is-busy .mk-tracks-heart { cursor: progress; }

.post-single article p.mk-tracks-hint { margin: 8px 0 0; color: #6b6f66; font: 400 12px/1.45 Arial, Helvetica, sans-serif; }
.post-single article p.mk-tracks-feedback { margin: 4px 0 0; color: #626b70; font: 400 12px/1.45 Arial, Helvetica, sans-serif; }
.post-single article p.mk-tracks-feedback:empty { display: none; }

/* Leser-Top 3: nur in der rechten Spalte (dorthin setzt sie tracklist.js), nicht auf schmalen Bildschirmen. */
.post-single article .mk-tracks .mk-tracks-top { display: none; }
.post-single article .mk-tracks-top { margin: 20px 0 0; padding: 10px 12px; border: 1px solid #e3e5df; border-radius: 6px; background: #fff; color: #55605a; font: 400 12px/1.45 Arial, Helvetica, sans-serif; }
.post-single article .mk-tracks-top[hidden] { display: none; }
.mk-tracks-top strong { display: block; margin: 0 0 4px; color: #23292b; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.post-single article .mk-tracks-top ol { margin: 0; padding: 0; list-style: none; counter-reset: mk-top; }
.post-single article .mk-tracks-top li { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 3px 0; list-style: none; counter-increment: mk-top; }
.post-single article .mk-tracks-top li::before { content: counter(mk-top) '.'; flex: 0 0 auto; color: #8a8f86; }
.mk-tracks-top li > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-tracks-pct { flex: 0 0 auto; color: #b8322a; font-weight: 700; }

@media (max-width: 640px) {
    .post-single article .mk-tracks-top { display: none; }
    .post-single article button.mk-tracks-heart { height: 44px; }
}
@container (max-width: 600px) {
    .post-single article .mk-tracks-top { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mk-tracks-row::before, .mk-tracks-heart .mk-tracks-icon { transition: none; }
}