/* =====================================================
 * DooPlay Child – Hero-Slider (Startseite) & Zufalls-Button
 *
 * Aufbau:
 *   1. Rahmen und Bühne
 *   2. Inhalt einer Folie
 *   3. Bedienelemente (Pfeile, Fortschritt, Punkte, Daumen)
 *   4. Zufalls-Button + Shuffle-Overlay
 *   5. Klassischer Owl-Slider (inc/parts/item_b.php)
 *   6. Responsive / weniger Bewegung
 *   7. Abzeichen, Merken-Knopf, Chips, Toast
 *   8. "Weiter schauen"
 *   9. Platzhalter beim Laden (LQIP)
 *  10. Offline-Hinweis
 *  11. Kompakte Slider (Filme- und Serien-Archiv)
 *  12. Weniger Bewegung
 *
 * Alle Regeln hängen an .dt-hero (nicht an einer ID), damit Startseite,
 * Filme- und Serien-Slider dieselben Styles nutzen.
 *
 * Die Akzentfarbe kommt als :root{--dt-hero-accent} aus functions.php
 * (Abschnitt 14) und folgt der Hauptfarbe des Themes.
 * ===================================================== */

/* ---------- 1. Rahmen und Bühne ---------- */

/* Die Akzentfarbe steht auf :root, damit die Inline-Regel aus
   functions.php (Hauptfarbe des Themes) sie überschreiben kann. */
:root {
    --dt-hero-accent: #408bea;
}

.dt-hero {
    --dt-hero-per-view: 1;
    position: relative;
    display: block;
    margin: 0 0 25px;
    background: #0b0d11;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 22px 45px -28px rgba(0, 0, 0, .9);
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
}

.dt-hero *,
.dt-hero *::before,
.dt-hero *::after {
    box-sizing: border-box;
}

.dt-hero ul,
.dt-hero li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dt-hero a {
    text-decoration: none;
}

.dt-hero-stage {
    position: relative;
    overflow: hidden;
}

.dt-hero-track {
    display: flex;
    margin: 0;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
    touch-action: pan-y;
}

.dt-hero-track.is-dragging {
    transition: none;
    user-select: none;
    cursor: grabbing;
}

.dt-hero-slide {
    position: relative;
    flex: 0 0 calc(100% / var(--dt-hero-per-view, 1));
    min-height: clamp(260px, 42vw, 520px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #151b26;
}

/* Lesbarkeit: Verlauf über dem Bild. Die Stärke kommt aus der Admin-Seite
 * (--dt-hero-dark, 0 bis 1) und gilt für Telefon und Desktop gleich.
 * Dunkel wird nur, wo Text und Knöpfe stehen (unten links); rechts oben bleibt
 * das Bild frei. Vorher lag die Abdunklung fest bei 0.95/0.92 über die ganze
 * Folie, dadurch wirkte das Bild fast schwarz. */
.dt-hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(4, 6, 10, var(--dt-hero-dark, .7)) 0%,
            rgba(4, 6, 10, calc(var(--dt-hero-dark, .7) * .43)) 42%,
            rgba(4, 6, 10, 0) 72%),
        linear-gradient(0deg,
            rgba(4, 6, 10, calc(var(--dt-hero-dark, .7) * .78)) 0%,
            rgba(4, 6, 10, 0) 50%);
    pointer-events: none;
    z-index: 1;
}

.dt-hero-media {
    position: absolute;
    inset: 0;
}

.dt-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
    /* Dunkle Filmbilder etwas anheben, damit sie nicht schwarz wirken. */
    filter: brightness(1.06) contrast(1.02) saturate(1.05);
}

/* ---------- 2. Inhalt einer Folie ---------- */

.dt-hero-body {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 660px;
    padding: clamp(14px, 2vw, 30px);
}

.dt-hero-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
}

.dt-hero-type,
.dt-hero-quality {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.dt-hero-type.is-movie {
    background: rgba(0, 245, 255, .14);
    color: #00f5ff;
    border: 1px solid rgba(0, 245, 255, .4);
}

.dt-hero-type.is-tv {
    background: rgba(255, 51, 51, .14);
    color: #ff5a5a;
    border: 1px solid rgba(255, 51, 51, .42);
}

.dt-hero-quality {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
}

.dt-hero-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.dt-hero-title {
    margin: 0 0 8px;
    font-size: clamp(19px, 2.4vw, 32px);
    line-height: 1.14;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}

.dt-hero-title a {
    color: inherit;
}

.dt-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 12px;
    margin-bottom: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, .78);
}

.dt-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dt-hero-rate {
    color: #f5c518;
    font-weight: 700;
}

.dt-hero-age {
    padding: 1px 6px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 4px;
    font-size: 11px;
}

.dt-hero-text {
    margin: 0 0 13px;
    max-width: 62ch;
    font-size: 13px;
    color: rgba(255, 255, 255, .74);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dt-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ---------- Aktionen einer Folie ---------- */

.dt-hero-play,
.dt-hero-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 15px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    transition: transform .25s, background .25s, border-color .25s, color .25s;
}

.dt-hero-play svg {
    width: 15px;
    height: 15px;
}

.dt-hero-play {
    background: var(--dt-hero-accent, #408bea);
    box-shadow: 0 10px 22px -12px var(--dt-hero-accent, #408bea);
}

.dt-hero-play:hover,
.dt-hero-play:focus-visible {
    color: #111;
    background: #fff;
    transform: translateY(-2px);
}

.dt-hero-more {
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(10, 12, 18, .45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.dt-hero-more:hover,
.dt-hero-more:focus-visible {
    color: #fff;
    border-color: #fff;
    transform: translateY(-2px);
}

.dt-hero-fav {
    position: relative;
    display: inline-flex;
}

.dt-hero-fav a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(10, 12, 18, .45);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.dt-hero-fav a:hover {
    border-color: #fff;
}

.dt-hero-fav a.in-list {
    border-color: var(--dt-hero-accent, #408bea);
    color: var(--dt-hero-accent, #408bea);
}

/* ---------- 3. Bedienelemente ---------- */

.dt-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: rgba(10, 12, 16, .55);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .25s, border-color .25s, transform .25s, opacity .25s;
}

.dt-hero-nav:hover,
.dt-hero-nav:focus-visible {
    background: var(--dt-hero-accent, #408bea);
    border-color: transparent;
    transform: translateY(-50%) scale(1.06);
}

.dt-hero-nav.is-prev {
    inset-inline-start: 14px;
}

.dt-hero-nav.is-next {
    inset-inline-end: 14px;
}

.dt-hero-progress {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 4;
    height: 3px;
    background: rgba(255, 255, 255, .16);
    pointer-events: none;
}

.dt-hero-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--dt-hero-accent, #408bea);
}

.dt-hero-progress.is-running span {
    animation: dt-hero-progress var(--dt-hero-duration, 4000ms) linear forwards;
}

@keyframes dt-hero-progress {
    from { width: 0; }
    to   { width: 100%; }
}

.dt-hero-dots {
    position: absolute;
    bottom: 18px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 8px;
}

.dt-hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    transition: width .25s, background .25s, border-radius .25s;
}

.dt-hero-dot.is-active {
    width: 24px;
    border-radius: 6px;
    background: var(--dt-hero-accent, #408bea);
}

.dt-hero-tools {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* ---------- Daumenleiste ---------- */

.dt-hero-thumbs {
    display: flex;
    gap: 7px;
    padding: 8px 10px;
    background: rgba(8, 10, 14, .94);
    overflow-x: auto;
    scrollbar-width: thin;
}

.dt-hero-thumbs::-webkit-scrollbar {
    height: 6px;
}

.dt-hero-thumbs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 3px;
}

.dt-hero-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 104px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    overflow: hidden;
    background: #15181f;
    cursor: pointer;
    opacity: .55;
    filter: saturate(.65);
    transition: opacity .25s, filter .25s, transform .25s, box-shadow .25s;
}

.dt-hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dt-hero-thumb:hover {
    opacity: .85;
}

.dt-hero-thumb.is-active {
    opacity: 1;
    filter: none;
    transform: translateY(-2px);
    box-shadow: 0 0 0 2px var(--dt-hero-accent, #408bea);
}

/* ---------- 4. Zufalls-Button + Shuffle-Overlay ---------- */

.dt-random-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(12, 14, 20, .62);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .25s, border-color .25s, transform .25s, color .25s;
}

.dt-random-btn:hover,
.dt-random-btn:focus-visible {
    background: var(--dt-hero-accent, #408bea);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
}

.dt-random-btn i {
    font-size: 13px;
}

.dt-random-btn.is-loading i {
    animation: dt-hero-spin .9s linear infinite;
}

.dt-random-wrap {
    display: flex;
    margin: 15px 0;
}

@keyframes dt-hero-spin {
    to { transform: rotate(360deg); }
}

.dt-shuffle {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 4, 7, .82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.dt-shuffle.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.dt-shuffle-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    color: #fff;
}

.dt-shuffle-spin {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .2);
    border-top-color: var(--dt-hero-accent, #408bea);
    animation: dt-hero-spin .8s linear infinite;
}

.dt-shuffle-box img {
    width: 160px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 25px 50px -22px rgba(0, 0, 0, .9);
}

.dt-shuffle-box strong {
    font-size: 19px;
    font-weight: 700;
}

.dt-shuffle-box span {
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
}

/* ---------- 5. Klassischer Owl-Slider (inc/parts/item_b.php) ---------- */

/* Die Overlay-Klassen von item_b.php hatten keine eigenen Regeln; hier bekommen
   sie ein kompaktes Aussehen, ohne den Rest des Themes anzufassen. */

.slider article.item .image {
    border-radius: 10px;
    box-shadow: 0 16px 30px -22px rgba(0, 0, 0, .9);
}

.slider article.item .image .image-link {
    position: absolute;
    inset: 0;
    display: block;
}

.slider article.item .slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    padding: 16px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, 0) 100%);
    text-align: start;
}

.slider article.item .slide-title {
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 12px rgba(0, 0, 0, .8);
}

.slider article.item .slide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, .78);
}

.slider article.item .slide-meta .meta-rating {
    color: #f5c518;
    font-weight: 700;
}

.slider article.item .slide-excerpt {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.slider article.item .slider-play-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--dt-hero-accent, #408bea);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.slider article.item .slider-play-btn:hover {
    background: #fff;
    color: #111;
}

.slider article.item .age-rating {
    align-self: flex-start;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 4px;
    font-size: 11px;
    color: #fff;
}

.slider article.item .slider-badge {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    z-index: 3;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ---------- 6. Responsive / weniger Bewegung ---------- */

@media (max-width: 900px) {
    .dt-hero {
        --dt-hero-per-view: 1;
    }

    .dt-hero-slide {
        min-height: clamp(280px, 56vw, 430px);
    }

    .dt-hero-media img {
        object-position: center 25%;
    }

    .dt-hero-body {
        max-width: none;
        padding: clamp(14px, 3vw, 24px);
    }

    .dt-hero-title {
        font-size: clamp(18px, 4vw, 26px);
    }

    .dt-hero-nav {
        width: 34px;
        height: 34px;
    }

    .dt-hero-tools {
        top: 8px;
        inset-inline-end: 8px;
        gap: 6px;
    }

    .dt-random-btn {
        padding: 6px 10px;
        font-size: 11.5px;
    }

    .dt-hero-thumb {
        width: 88px;
        height: 49px;
    }
}

@media (max-width: 620px) {
    .dt-hero {
        border-radius: 10px;
        margin-bottom: 16px;
    }

    .dt-hero-slide {
        min-height: 330px;
    }

    .dt-hero-body {
        padding: 13px 13px 40px;
    }

    .dt-hero-flags {
        gap: 5px;
        margin-bottom: 7px;
    }

    .dt-hero-type,
    .dt-hero-quality {
        height: 20px;
        padding: 0 7px;
        font-size: 9.5px;
    }

    .dt-hero-badge {
        padding: 3px 7px;
        font-size: 9.5px;
    }

    .dt-hero-title {
        margin-bottom: 6px;
        font-size: 18px;
    }

    .dt-hero-meta {
        gap: 4px 10px;
        margin-bottom: 9px;
        font-size: 11px;
    }

    .dt-hero-age {
        padding: 1px 5px;
        font-size: 10px;
    }

    .dt-hero-text {
        display: none;
    }

    /* Auf dem Handy wird gewischt – die Pfeile stören nur. */
    .dt-hero-nav {
        display: none;
    }

    .dt-hero-tools {
        inset-inline: 8px;
        justify-content: center;
    }

    /* Eine flache Reihe kleiner Knöpfe statt hoher Pillen. */
    .dt-hero-actions {
        gap: 6px;
    }

    .dt-hero-play,
    .dt-hero-more,
    .dt-hero-watch,
    .dt-hero-trailer,
    .dt-hero-fav a {
        height: 32px;
        padding: 0 11px;
        gap: 5px;
        font-size: 11.5px;
    }

    .dt-hero-play svg {
        width: 14px;
        height: 14px;
    }

    .dt-hero-watch i,
    .dt-hero-trailer i {
        font-size: 12px;
    }

    .dt-hero-watch-count {
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 9.5px;
    }

    .dt-hero-fav a span[class^="list-count-"] {
        display: none;
    }

    .dt-hero-thumbs {
        gap: 5px;
        padding: 6px 8px;
    }

    .dt-hero-thumb {
        width: 74px;
        height: 41px;
        border-radius: 6px;
    }

    .dt-hero-chips {
        gap: 6px;
        padding: 6px 8px;
    }

    .dt-chip {
        height: 26px;
        padding: 0 10px;
        font-size: 11.5px;
    }

    a.dt-chip-dice {
        width: 26px;
        height: 26px;
    }
}

/* Sehr schmale Geräte: Beschriftung bleibt, nur eine Stufe kleiner und
 * enger - so passen alle Knöpfe in eine Zeile, ohne hoch zu wirken. */
@media (max-width: 380px) {
    .dt-hero-body {
        padding: 12px 11px 34px;
    }

    .dt-hero-actions {
        gap: 4px;
    }

    .dt-hero-play,
    .dt-hero-more,
    .dt-hero-watch,
    .dt-hero-trailer,
    .dt-hero-fav a {
        height: 30px;
        padding: 0 9px;
        gap: 4px;
        font-size: 11px;
    }

    .dt-hero-play svg {
        width: 13px;
        height: 13px;
    }

    .dt-hero-watch i,
    .dt-hero-trailer i {
        font-size: 11px;
    }

    .dt-hero-watch-count {
        min-width: 15px;
        height: 15px;
        padding: 0 4px;
        font-size: 9px;
    }
}

/* Wer keine Bewegung will, bekommt keine Bewegung. */
@media (prefers-reduced-motion: reduce) {
    .dt-hero-track,
    .dt-hero-thumb,
    .dt-hero-nav,
    .dt-hero-dot,
    .dt-random-btn {
        transition: none !important;
    }

    .dt-hero-progress.is-running span {
        animation: none;
    }

    .dt-shuffle-spin,
    .dt-random-btn.is-loading i {
        animation-duration: 2s;
    }
}

/* ---------- 7. Abzeichen, Merken, Chips, Toast ---------- */

/* Abzeichen aus den Daten: neu, neue Staffel, Top-Note, im Trend */
.dt-hero-flag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dt-hero-flag.is-new { background: rgba(46, 204, 113, .16); color: #2ecc71; border-color: rgba(46, 204, 113, .45); }
.dt-hero-flag.is-season { background: rgba(255, 159, 67, .16); color: #ff9f43; border-color: rgba(255, 159, 67, .45); }
.dt-hero-flag.is-top { background: rgba(245, 197, 24, .16); color: #f5c518; border-color: rgba(245, 197, 24, .45); }
.dt-hero-flag.is-trending { background: rgba(255, 71, 87, .16); color: #ff4757; border-color: rgba(255, 71, 87, .45); }

/* Merken-Knopf in der Folie */
.dt-hero-watch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(10, 12, 18, .45);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color .25s, color .25s, background .25s, transform .25s;
}

.dt-hero-watch:hover,
.dt-hero-watch:focus-visible {
    border-color: #fff;
    transform: translateY(-2px);
}

.dt-hero-watch.is-listed {
    border-color: var(--dt-hero-accent, #408bea);
    color: var(--dt-hero-accent, #408bea);
}

/* Zähler aus der Merkliste des Themes (die Zahl der Besucher, die den Titel
 * gemerkt haben). Wird vom Skript auf dem Laufenden gehalten. */
.dt-hero-watch-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.dt-hero-watch-count[hidden] {
    display: none;
}

.dt-hero-watch.is-busy {
    opacity: .6;
    pointer-events: none;
}

.dt-hero-watch i {
    font-size: 12px;
}

/* Genre-/Stimmungs-Chips unter dem Slider */
.dt-hero-chips {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    background: rgba(8, 10, 14, .94);
    overflow-x: auto;
    scrollbar-width: thin;
}

.dt-hero-chips-label {
    flex: 0 0 auto;
    margin-inline-end: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.dt-chip-wrap {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.dt-chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.dt-chip:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

a.dt-chip-dice {
    width: 28px;
    height: 28px;
    margin-inline-start: 4px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

a.dt-chip-dice i {
    font-size: 12px;
}

/* Kurze Meldungen unten am Bildschirmrand */
.dt-toast {
    position: fixed;
    inset-inline: 0;
    bottom: 22px;
    z-index: 100000;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.dt-toast-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 92vw;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(12, 14, 20, .95);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
}

.dt-toast.is-visible .dt-toast-inner {
    opacity: 1;
    transform: none;
}

.dt-toast-inner i {
    color: var(--dt-hero-accent, #408bea);
}

/* ---------- 8. Reihen unter dem Slider (Stil der Theme-Module) ---------- */

/* Der Block hält beide Reihen zusammen; der Inhalt kommt per Ajax. */
.dt-rows {
    display: block;
    margin: 0 0 25px;
}

/* display würde das [hidden] des Browsers sonst aushebeln. */
.dt-rows[hidden] {
    display: none !important;
}

.dt-rows:empty {
    display: none;
}

/* Eine Reihe: Modul-Kopf + Kartenreihe – wie inc/parts/modules/movies.php */
.dt-row {
    margin: 0 0 25px;
}

.dt-row:last-child {
    margin-bottom: 0;
}

.dt-row:last-child .items {
    border-bottom: 0;
}

/* Pfeile im Kopf (das Theme gestaltet .nav_items_module a.btn) */
.dt-row .dt-row-nav {
    opacity: .6;
    transition: opacity .2s ease;
}

.dt-row .dt-row-nav:hover {
    opacity: 1;
}

/* Kopf-Link ("Pastro") wie das "See all" des Themes */
.dt-row header span .see-all {
    cursor: pointer;
}

/* Karten: dieselben wie im Theme, nur waagerecht scrollbar.
 *
 * Wichtig: Die Module der Startseite (Filme/Serien) sind owlCarousel-Slider.
 * Deren Kartenbreite berechnet owl in assets/js/lib/owlcarousel.js so:
 *
 *     itemWidth = Math.round(containerWidth / items)
 *
 * und `items` ergibt sich aus den Stufen, die inc/doo_scripts.php übergibt:
 * items 5 / 6 / 7, itemsDesktop [1199,5], itemsDesktopSmall [980,5],
 * itemsTablet [768,4], itemsMobile [479,3]. owl vergleicht dabei die
 * Fensterbreite mit <=, deshalb gilt:
 *
 *     > 1199 px      -> 5 (bzw. 6/7 bei full width / max_width >= 1400)
 *     769 - 1199 px  -> 5
 *     480 - 768 px   -> 4
 *     <= 479 px      -> 3
 *
 * Das weicht von den CSS-Rasterstufen des Themes ab (dort 1/4 ab 1130 px und
 * 1/3 ab 540 px). Weil die Module Slider sind, orientieren sich die Reihen an
 * owl - sonst waeren die Poster zwischen 769 und 1130 px groesser als in den
 * Modulen. Die Anzahl setzt PHP als --dt-row-items (inkl. full/normal). */
.dt-row .items.dt-row-items {
    display: flex;
    flex-wrap: nowrap;
    /* Karten nicht auf Reihenhöhe strecken (siehe Poster-Regel unten). */
    align-items: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    margin-bottom: 0;
    padding-bottom: 4px;
    /* Ziehen wie im Featured-Slider: Touch wischt der Browser selbst,
     * die Maus zieht das Skript (Reihen haben cursor: grab). */
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    /* Optional (Filter dooplay_child_rows_max_width): die Reihe so breit wie
     * die Spalte der Module - dann stehen genau so viele Karten nebeneinander
     * wie in "Filmat". Standard: none = volle Breite. */
    max-width: var(--dt-row-max, none);
}

/* Während des Ziehens mit der Maus: kein Einrasten, keine Textauswahl,
 * kein natives Bild-Ziehen (das würde das Rollen abbrechen). */
.dt-row .items.dt-row-items.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    -webkit-user-select: none;
    user-select: none;
}

.dt-row .items.dt-row-items.is-dragging img {
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Höhe der Poster-Box wie in den Modulen.
 *
 * Das Theme setzt ".poster { height: 100% }". In seinem Float-Raster löst das
 * auf auto auf, in einer Flex-Reihe dagegen auf die Höhe der Karte - die
 * Poster wären dann deutlich höher als in "Filmat" (gemessen: 253 px statt
 * 189 px bei 134 px Breite). Darum hier wie im Modul: die Höhe ergibt sich
 * allein aus padding-top 140 % des Themes. */
.module .content .dt-row .items.dt-row-items .item .poster {
    height: auto;
}

/* Basiswert kommt aus PHP: --dt-row-items (5 / 6 / 7). Sechs Klassen, damit
 * die Regel sicherer ist als ".module .content .items.normal .item".
 * --dt-row-card (vom Skript an der echten Modul-Karte gemessen) hat Vorrang. */
.module .content .dt-row .items.dt-row-items .item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: var(--dt-row-card, calc(100% / var(--dt-row-items, 5)));
}

/* movies/series als Slider -> owls Stufen (identisch zu #dt-movies).
 * Die Klasse steckt entweder am Holder (.dt-rows) oder an der Reihe (.items). */
@media only screen and (max-width: 1199px) {
    .module .content .dt-rows.is-slider .dt-row .items.dt-row-items .item,
    .module .content .dt-row .items.dt-row-items.is-slider .item {
        width: var(--dt-row-card, calc(100% / 5));
    }
}

@media only screen and (max-width: 980px) {
    .module .content .dt-rows.is-slider .dt-row .items.dt-row-items .item,
    .module .content .dt-row .items.dt-row-items.is-slider .item {
        width: var(--dt-row-card, calc(100% / 5));
    }
}

@media only screen and (max-width: 768px) {
    .module .content .dt-rows.is-slider .dt-row .items.dt-row-items .item,
    .module .content .dt-row .items.dt-row-items.is-slider .item {
        width: var(--dt-row-card, calc(100% / 4));
    }
}

@media only screen and (max-width: 479px) {
    .module .content .dt-rows.is-slider .dt-row .items.dt-row-items .item,
    .module .content .dt-row .items.dt-row-items.is-slider .item {
        width: var(--dt-row-card, calc(100% / 3));
        padding: 5px;
    }
}

/* movies/series als Raster -> Stufen aus front.mobile.min.css
 * (1130 -> 1/4, 768 -> 1/4 bei full_width_layout, 667 -> 1/3, 540 -> 1/3) */
@media only screen and (max-width: 1130px) {
    .module .content .dt-rows.is-grid .dt-row .items.dt-row-items .item,
    .module .content .dt-row .items.dt-row-items.is-grid .item {
        width: var(--dt-row-card, calc(100% / 4));
    }
}

@media only screen and (max-width: 768px) {
    .module .content .dt-rows.is-grid .dt-row .items.dt-row-items .item,
    .module .content .dt-row .items.dt-row-items.is-grid .item {
        width: var(--dt-row-card, calc(100% / 4));
    }
}

@media only screen and (max-width: 667px) {
    .module .content .dt-rows.is-grid .dt-row .items.dt-row-items .item,
    .module .content .dt-row .items.dt-row-items.is-grid .item {
        width: var(--dt-row-card, calc(100% / 3));
    }
}

@media only screen and (max-width: 540px) {
    .module .content .dt-rows.is-grid .dt-row .items.dt-row-items .item,
    .module .content .dt-row .items.dt-row-items.is-grid .item {
        width: var(--dt-row-card, calc(100% / 3));
        padding: 5px;
    }
}

.dt-row .items.dt-row-items::-webkit-scrollbar {
    height: 6px;
}

.dt-row .items.dt-row-items::-webkit-scrollbar-thumb {
    background: rgba(150, 150, 150, .35);
    border-radius: 3px;
}

/* Extras auf dem Poster: nächste Folge + Fortschritt der Serie */
.dt-row .item .poster .dt-row-next {
    position: absolute;
    z-index: 2;
    top: 5px;
    inset-inline-end: 5px;
    padding: 3px 7px;
    border-radius: 3px;
    background: var(--dt-hero-accent, #408bea);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

.dt-row .item .poster .dt-row-bar {
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    bottom: 0;
    height: 4px;
    background: rgba(0, 0, 0, .45);
}

.dt-row .item .poster .dt-row-bar > span {
    display: block;
    height: 100%;
    background: var(--dt-hero-accent, #408bea);
}

/* Weniger Bewegung: kein weiches Rollen */
@media (prefers-reduced-motion: reduce) {
    .dt-row .items.dt-row-items {
        scroll-behavior: auto;
    }
}

/* Titel der Daumenleiste für Screenreader */
.screen-reader-text,
.dt-hero .dt-hero-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}


/* ---------- 9. Platzhalter beim Laden (LQIP) ---------- */

/* Das Poster wird als kleiner Hintergrund untergeschoben und beim Laden
   ausgefadet; ohne JavaScript bleibt das Bild einfach sichtbar. */
.dt-hero-media {
    background-color: #1b212c;
    background-image: var(--dt-lqip, none);
    background-size: cover;
    background-position: center 22%;
}

.dt-hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .07), rgba(255, 255, 255, 0));
    background-size: 220% 100%;
    animation: dt-hero-shimmer 1.6s linear infinite;
    opacity: 1;
    transition: opacity .4s ease;
}

.dt-hero-media.is-ready::before {
    opacity: 0;
}

.dt-hero-media img {
    opacity: 0;
    transition: opacity .5s ease;
}

.dt-hero-media.is-ready img {
    opacity: 1;
}

/* Ohne JavaScript bleibt das erste Bild sichtbar. */
.dt-hero-slide.is-active .dt-hero-media:not(.is-ready) img {
    opacity: 1;
}

.dt-hero-thumb {
    background-image: linear-gradient(100deg, #15181f, #1e222b, #15181f);
    background-size: 220% 100%;
    animation: dt-hero-shimmer 1.6s linear infinite;
}

.dt-hero-thumb img {
    opacity: 0;
    transition: opacity .4s ease;
}

.dt-hero-thumb.is-ready {
    animation: none;
}

.dt-hero-thumb.is-ready img {
    opacity: 1;
}

@keyframes dt-hero-shimmer {
    from { background-position: 120% 0; }
    to   { background-position: -120% 0; }
}

/* ---------- 10. Offline-Hinweis ---------- */

.dt-offline {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    background: #b3261e;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.dt-offline[hidden] {
    display: none;
}

/* ---------- 11. Kompakte Slider (Filme- und Serien-Archiv) ---------- */

.dt-hero--compact .dt-hero-slide {
    min-height: clamp(210px, 30vw, 330px);
}

.dt-hero--compact .dt-hero-body {
    max-width: 620px;
    padding: clamp(14px, 2vw, 26px);
}

.dt-hero--compact .dt-hero-title {
    margin-bottom: 8px;
    font-size: clamp(18px, 2.2vw, 28px);
}

.dt-hero--compact .dt-hero-text {
    display: none;
}

.dt-hero--compact .dt-hero-play,
.dt-hero--compact .dt-hero-more,
.dt-hero--compact .dt-hero-watch,
.dt-hero--compact .dt-hero-trailer {
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
}

.dt-hero--compact .dt-hero-nav {
    width: 38px;
    height: 38px;
}

.dt-hero--compact .dt-hero-thumb {
    width: 100px;
    height: 56px;
}

.dt-hero--compact .dt-hero-media {
    background-position: center 25%;
}

/* ---------- 12. Weniger Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
    .dt-hero-media::before,
    .dt-hero-thumb,
    .dt-shuffle-spin,
    .dt-random-btn.is-loading i {
        animation: none !important;
    }

    /* Theme-Karten nicht zoomen */
    .dt-row .item .poster:hover > img {
        transform: none;
    }
}
/* Link in der Meldung ("Shiko listën") */
.dt-toast-link {
    margin-inline-start: 10px;
    color: var(--dt-hero-accent, #408bea);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    white-space: nowrap;
}

.dt-toast-link:hover,
.dt-toast-link:focus {
    color: #fff;
}

.dt-toast-link[hidden] {
    display: none;
}

/* ---------- 13. Trailer-Knopf und Trailer-Fenster ---------- */

.dt-hero-trailer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(10, 12, 18, .45);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color .25s, background .25s, color .25s, transform .25s;
}

.dt-hero-trailer:hover,
.dt-hero-trailer:focus-visible {
    border-color: transparent;
    background: var(--dt-hero-accent, #408bea);
    color: #fff;
    transform: translateY(-2px);
}

.dt-hero-trailer i {
    font-size: 13px;
}

html.dt-trailer-open {
    overflow: hidden;
}

.dt-trailer {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 3vw, 40px);
    background: rgba(3, 4, 7, .9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    /* Geschlossen darf das Fenster keine Klicks abfangen. */
    pointer-events: none;
    transition: opacity .24s ease;
}

/* display:flex oben schlägt sonst das [hidden] des Browsers: die unsichtbare
   Fläche blieb über der ganzen Seite liegen und schluckte jeden Klick. */
.dt-trailer[hidden] {
    display: none !important;
}

.dt-trailer.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.dt-trailer-box {
    position: relative;
    width: min(1100px, 100%);
}

.dt-trailer-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95);
}

.dt-trailer-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.dt-trailer-close {
    position: absolute;
    top: -44px;
    inset-inline-end: 0;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(12, 14, 20, .7);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.dt-trailer-close:hover {
    background: var(--dt-hero-accent, #408bea);
    border-color: transparent;
}

/* Weg zum Video, falls YouTube das Einbetten verweigert. */
.dt-trailer-link {
    display: inline-block;
    margin-top: 12px;
    color: #cfd6e4;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid rgba(207, 214, 228, .4);
}

.dt-trailer-link:hover,
.dt-trailer-link:focus {
    color: #fff;
    border-bottom-color: #fff;
}

.dt-trailer-link[hidden] {
    display: none;
}

/* ---------- 14. (die Reihen stehen in Abschnitt 8) ---------- */


/* ---------- 18. Listenseite (Template "DT - Favorites page") ----------
 *
 * Das Theme blendet die Bereiche der Nutzerseite aus
 * (.page_user .content .upge { display: none }) und zeigt sie über die
 * Tab-Navigation .idTabs. Läuft die Tab-Logik nicht (kein jQuery / Skript
 * blockiert), wäre die Seite sonst komplett leer - darum hier sichtbar.
 * Mit laufendem Skript setzt es display inline und überschreibt das. */
.page_user .content .upge#favorites,
.page_user .content .upge#views {
    display: block;
}

/* ---------- 15. PWA: Update-Hinweis und Installieren ---------- */

.dt-pwa-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 18px;
    z-index: 100003;
    display: flex;
    justify-content: center;
    padding: 0 14px;
    pointer-events: none;
}

.dt-pwa-bar-inner {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    max-width: 94vw;
    padding: 12px 14px 12px 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(12, 14, 20, .96);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
    /* Nur sichtbar klickbar – sonst blockiert die Leiste ihre Fläche. */
    pointer-events: none;
}

.dt-pwa-bar.is-visible .dt-pwa-bar-inner {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.dt-pwa-bar .dt-pwa-action {
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--dt-hero-accent, #408bea);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.dt-pwa-bar .dt-pwa-close {
    padding: 2px 6px;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .6);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* Weniger Bewegung: das Trailer-Fenster erscheint ohne Übergang. */
@media (prefers-reduced-motion: reduce) {
    .dt-trailer,
    .dt-pwa-bar-inner {
        transition: none;
    }
}