/*
 * „Meistgelesen – 7 Tage“ (05.11.2026): rechte Spalte für große Bildschirme.
 * Aufbau und Schrift wie die Review-Liste der Startseite (Klassen review-list-*, Regeln in custom.css);
 * hier nur Lage, Breite und die Abweichungen.
 *
 * Weiße Inhaltskacheln enden bei Menü 270 px + Inhalt 930,64 px − 24 px Innenabstand = 1176,64 px. Die Spalte beginnt
 * 20 px rechts davon und ist 303 px (bei 1520 px Fenster) bis 400 px (ab 1617 px) breit, mit 20 px Rand rechts.
 */
#mk-popular { display: none; }

@media (min-width: 1520px) {
    #mk-popular {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: calc(var(--mk-site-left, 0px) + var(--mk-sidebar-width, 270px) + var(--mk-layout-gap, 0px) + var(--mk-content-width, 882.64px) + 44px);
        width: min(400px, calc(100vw - var(--mk-site-left, 0px) - var(--mk-sidebar-width, 270px) - var(--mk-layout-gap, 0px) - var(--mk-content-width, 882.64px) - 64px));
        box-sizing: border-box;
        padding: 0 0 96px; /* Platz für die Sprachauswahl unten rechts */
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
        z-index: 5;
        opacity: 0;
        transition: opacity .25s ease;
    }
    #mk-popular.is-ready { opacity: 1; }

    #mk-popular .mk-popular { margin: 0; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
    #mk-popular .mk-popular > article.review-list-preview { padding: 22px 0 8px; }

    #mk-popular .mk-review-header { padding: 0 20px; margin: 0 0 2px; }
    #mk-popular .mk-review-heading { flex: 0 0 auto; margin: 0 !important; padding: 0 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 24px !important; letter-spacing: .02em; text-transform: uppercase; }
    #mk-popular .mk-review-heading-icon svg { display: block; }
    #mk-popular .mk-popular-sub { margin: 0 0 4px; padding: 0 20px 0 49px; color: #888; font-size: 12px; line-height: 1.3; }

    #mk-popular .mk-popular-items { list-style: none; margin: 0; padding: 0; }
    #mk-popular .review-list-item { position: relative; padding: 10px 20px; border-bottom: 0; }
    #mk-popular .review-list-item:not(:last-child)::after { position: absolute; bottom: 0; left: 50%; width: 75%; height: 1px; background: rgba(0, 0, 0, .08); content: ""; transform: translateX(-50%); }
    #mk-popular .review-list-link { gap: 14px; }
    #mk-popular .review-list-content { min-width: 0; }
    #mk-popular .review-list-title-heading { overflow-wrap: anywhere; }
    #mk-popular .review-list-title { color: inherit !important; text-decoration: none !important; }
    #mk-popular .review-list-title:hover, #mk-popular .review-list-title:focus-visible { color: #303a3e !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px; }
    #mk-popular .review-list-meta { margin-top: 4px; }
    #mk-popular .meta-author-link, #mk-popular .meta-genre-link { color: inherit; text-decoration: none; }
    #mk-popular .meta-author-link:hover, #mk-popular .meta-genre-link:hover, #mk-popular .meta-author-link:focus-visible, #mk-popular .meta-genre-link:focus-visible { color: var(--category-color) !important; text-decoration: underline !important; text-underline-offset: 2px; }

    /* Platzziffer unten links auf dem Cover: dunkel und kräftig, damit sie als Rang lesbar ist */
    #mk-popular .mk-popular-rank { position: absolute; left: -7px; bottom: -7px; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; box-sizing: border-box; border: 2px solid #fff; border-radius: 13px; background: #23292b; color: #fff; font: 800 13px/1 "Open Sans", Arial, Helvetica, sans-serif; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }

    #mk-popular .mk-popular-more { margin: 0; padding: 4px 20px 2px; text-align: right; font-size: 13px; }
    #mk-popular .mk-popular-more a { color: #65737c; text-decoration: none; }
    #mk-popular .mk-popular-more a::after { content: " \203A"; }
    #mk-popular .mk-popular-more a:hover, #mk-popular .mk-popular-more a:focus-visible { color: #333; text-decoration: underline; }

    #mk-popular .mk-popular-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

/* Schmale Spalte (bis 1616 px Fenster, z. B. 1920er-Monitor mit 125 % Skalierung = 1536 px): kleinere Cover */
@media (min-width: 1520px) and (max-width: 1616px) {
    #mk-popular .review-list-item { padding: 9px 16px; }
    #mk-popular .mk-review-header { padding: 0 16px; }
    #mk-popular .mk-popular-sub { padding-left: 45px; }
    #mk-popular .review-list-image-wrap { flex-basis: 64px !important; width: 64px !important; min-width: 64px !important; height: 64px !important; }
    #mk-popular .review-list-image { width: 64px !important; height: 64px !important; }
    #mk-popular .review-list-title-heading { font-size: 15px !important; }
}

@media (prefers-reduced-motion: reduce) {
    #mk-popular { transition: none; }
}