/* Clips und Statistik (/posts, /stats), ausgelagert aus posts.html am 27.10.2026 */
/* Klick auf einen Clip: sofort schwarz abblenden, der Watch-Modus ist schwarz.
   Frueher Seitenuebergang mit wachsendem Vorschaubild, der ruckelte (27.10.2026). */
.go-watch { position: fixed; inset: 0; z-index: 9999; background: #000; opacity: 0; pointer-events: none; transition: opacity .16s ease-out; }
.go-watch.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .go-watch { transition: none; } }
.posts-content { max-width: 1760px; margin: 0 auto; padding: 34px 32px 90px; }


.posts-sticky-probe { height: 1px; }
.posts-controls {
    position: sticky; top: var(--header-height); z-index: 90;
    background: var(--bg);
    margin: 0 -32px 26px; padding: 10px 32px;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.posts-controls.stuck { border-bottom-color: var(--border-light); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28); }


.posts-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
}
.posts-bar h1 { font-size: 24px; margin-right: 8px; }
.posts-search {
    flex: 0 1 260px; min-width: 170px;
    padding: 8px 15px; font-size: 13.5px; font-family: var(--font-body);
    background: var(--card); border: 1px solid var(--border-light);
    border-radius: 999px; color: var(--text); outline: none;
    transition: var(--transition);
}
.posts-search:focus { border-color: var(--accent); }
.sort-select, .playlist-select {
    padding: 9px 14px; font-size: 13px; font-weight: 600; font-family: var(--font-body);
    background: var(--card); border: 1px solid var(--border-light);
    border-radius: 999px; color: var(--text-secondary); cursor: pointer;
    outline: none; transition: var(--transition);
}
.sort-select:hover, .sort-select:focus,
.playlist-select:hover, .playlist-select:focus { border-color: var(--accent); }

.filter-selects { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.posts-count { font-family: var(--font-body); font-size: 13px; color: var(--dim); margin-left: 4px; white-space: nowrap; min-width: 80px; text-align: right; }
.playlist-select { max-width: 170px; }
.filter-chip {
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    background: var(--card); border: 1px solid var(--border-light);
    border-radius: 999px; color: var(--text-secondary); cursor: pointer;
    transition: var(--transition);
}
.filter-chip:hover { border-color: var(--accent); color: var(--text); }
.filter-chip.active { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
.chip-reset {
    display: none;
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    background: transparent; border: 1px dashed var(--border-light);
    border-radius: 999px; color: var(--accent); cursor: pointer;
    transition: var(--transition);
}
.chip-reset.show { display: inline-block; }
.chip-reset:hover { border-color: var(--accent); }

.posts-chips { display: contents; }
@media (min-width: 641px) {
    .posts-bar h1 { order: 0; }
    .posts-chips .filter-chip, .posts-chips .chip-reset, .posts-chips .chip-sep { order: 1; }
    .filter-selects { order: 2; }
    .posts-search { order: 3; flex: 1 1 100%; }
    #sourceSelect { display: none; }
}
.chip-sep { width: 1px; height: 22px; background: var(--border-light); flex: 0 0 auto; }
.src-chip { display: inline-flex; align-items: center; gap: 7px; }
.src-chip .chip-ico {
    width: 17px; height: 17px; border-radius: 50%;
    display: grid; place-items: center; flex: none;
}
.src-chip .chip-ico svg { width: 9px; height: 9px; display: block; }
.src-chip .chip-ico.youtube { background: rgba(255, 0, 0, 0.88); }
.src-chip .chip-ico.twitch { background: rgba(145, 70, 255, 0.88); }
.src-chip .chip-ico.instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.src-chip .chip-ico.tiktok { background: #000; }
.filter-toggle {
    display: none; align-items: center; gap: 6px;
    padding: 8px 14px; font-size: 13px; font-weight: 600; font-family: var(--font-body);
    background: var(--card); border: 1px solid var(--border-light);
    border-radius: 999px; color: var(--text-secondary); cursor: pointer;
    white-space: nowrap; transition: var(--transition);
}
.filter-toggle .caret { transition: transform .2s ease; }
.posts-controls.filters-open .filter-toggle { border-color: var(--accent); color: var(--text); }
.posts-controls.filters-open .filter-toggle .caret { transform: rotate(180deg); }
.sel-wait { visibility: hidden; }


.channel-head { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; min-height: 84px; }
.ch-info { flex: 1 1 auto; min-width: 0; }
.ch-avatar-wrap { flex: none; border-radius: 50%; padding: 3px; background: transparent; }
.ch-avatar-wrap.has-stories {
    background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
    cursor: pointer; transition: var(--transition);
}
.ch-avatar-wrap.has-stories:hover { transform: scale(1.05); }
.ch-avatar { display: block; width: 64px; height: 64px; border-radius: 50%; border: 2.5px solid var(--bg); }


.story-viewer {
    position: fixed; inset: 0; z-index: 6000; display: none;
    background: rgba(5, 5, 8, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.story-viewer.open { display: block; }
.story-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.story-stage img, .story-stage video { max-height: 92vh; max-width: 94vw; border-radius: 12px; }
.story-progress {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    width: min(430px, 90vw); display: flex; gap: 5px; z-index: 3;
}
.story-progress span { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; overflow: hidden; }
.story-progress i { display: block; height: 100%; width: 0; background: #fff; }
.story-close {
    position: absolute; top: 12px; right: 14px; z-index: 4;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.6); color: #fff; border: 0;
    font-size: 18px; cursor: pointer; transition: var(--transition);
}
.story-close:hover { background: var(--accent); }
.story-head {
    position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
    width: min(430px, 90vw); display: flex; align-items: center; gap: 9px;
    z-index: 3; color: #fff; font-family: var(--font-body); font-size: 13.5px;
    pointer-events: none;
}
.story-head img { width: 34px; height: 34px; border-radius: 50%; }
.story-head b { font-family: var(--font-main); letter-spacing: 1.5px; }
.story-head .when { color: rgba(255, 255, 255, 0.75); }
.story-stats {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    z-index: 3; display: none; gap: 16px;
    color: #fff; font-family: var(--font-body); font-size: 14px;
    background: rgba(0, 0, 0, 0.5); padding: 7px 17px; border-radius: 999px;
    pointer-events: none;
}

.ch-avatar-wrap.has-stories.seen { background: var(--border-light); }
.ch-name { font-family: var(--font-main); font-size: 34px; letter-spacing: 0.02em; line-height: 1.2; margin-bottom: 7px; }
.ch-stats {
    display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
    font-family: var(--font-body); font-size: 13.5px; color: var(--text-secondary);
}
.ch-stat { display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary); text-decoration: none; transition: var(--transition); }
.ch-stat b { color: var(--text); }
.ch-stat .src { position: static; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; transition: var(--transition); }
.ch-stat .src svg { width: 11px; height: 11px; display: block; }
/* Die Plattform-Farben hingen nur an .post-thumb. Im Kopf waren die
   weissen Icons deshalb ohne Untergrund: im hellen Modus unsichtbar,
   im dunklen ohne Farbe. */
.ch-stat .src.youtube { background: rgba(255, 0, 0, 0.88); }
.ch-stat .src.twitch { background: rgba(145, 70, 255, 0.88); }
.ch-stat .src.instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.ch-stat .src.tiktok { background: #000; }
.ch-totals {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-top: 6px;
    font-family: var(--font-body); font-size: 13px; color: var(--dim);
}
.ch-totals b { color: var(--text-secondary); font-weight: 600; }
.ch-discord {
    margin-left: auto; flex: none;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--card); border: 1px solid var(--border-light);
    color: var(--text); text-decoration: none;
    font-family: var(--font-body); font-size: 13px; font-weight: 600;
    white-space: nowrap; transition: var(--transition);
}
.ch-discord:hover { border-color: #5865f2; }
.ch-discord svg { width: 18px; height: 18px; flex: none; display: block; }
.ch-discord .dc-online { color: var(--dim); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.ch-discord .dc-online i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }


.ch-stat, .ch-total {
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer;
    border-bottom: 1px dashed transparent; transition: var(--transition);
}
.ch-total { display: inline-flex; align-items: center; gap: 5px; }
.ch-stat:hover, .ch-total:hover,
.ch-stat[aria-expanded="true"], .ch-total[aria-expanded="true"] {
    border-bottom-color: var(--accent); color: var(--text);
}
.ch-stat:hover .src, .ch-stat[aria-expanded="true"] .src { transform: scale(1.12); }

/* preserveAspectRatio="none" ist hier verboten. Es streckt das SVG auf
   die Containerbreite und verzerrt dabei Beschriftungen und
   Linienstaerken mit. Das SVG skaliert stattdessen gleichmaessig. */
.chart { font-family: var(--font-body); position: relative; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .grid-soft { stroke: var(--border); stroke-width: 1; opacity: .45; }
.chart .glabel { fill: var(--dim); font-size: 11px; text-anchor: end; }
.chart .tlabel { fill: var(--dim); font-size: 11px; text-anchor: middle; }
.chart .guide { stroke: var(--accent); stroke-width: 1; opacity: .55; }
.chart-dot { fill: var(--bg-secondary); stroke-width: 2; }
.chart-node { fill: var(--bg-secondary); stroke-width: 1.6; opacity: 0; transition: opacity .12s; }
.chart-node.on { opacity: 1; }
.chart-hit { fill: transparent; cursor: crosshair; }
.chart-tip {
    position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s;
    background: var(--bg); border: 1px solid var(--border-light, var(--border));
    border-radius: 9px; padding: 8px 11px; font-size: 12.5px; line-height: 1.5;
    white-space: nowrap; z-index: 5; box-shadow: 0 6px 22px rgba(0,0,0,.5);
}
.chart-tip.on { opacity: 1; }
.chart-tip .when { color: var(--dim); font-size: 11.5px; display: block; margin-bottom: 3px; }
.chart-tip .row { display: flex; align-items: center; gap: 7px; }
.chart-tip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.chart-tip b { color: var(--text); font-variant-numeric: tabular-nums; margin-left: auto; padding-left: 12px; }
.chart-legend { display: flex; gap: 15px; flex-wrap: wrap; font-size: 12.5px; margin-top: 12px; color: var(--dim); }
.chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.chart-legend b { color: var(--text); font-variant-numeric: tabular-nums; }
.chart-empty { font-size: 13px; color: var(--dim); line-height: 1.6; padding: 6px 0 2px; }


.stat-modal { position: fixed; inset: 0; z-index: 300; display: none; }
.stat-modal.open { display: block; }
.stat-modal .backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.stat-box {
    position: relative; margin: 8vh auto 0; width: min(680px, 92vw);
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 16px; padding: 22px 24px 20px;
    max-height: 84vh; overflow-y: auto;
}
.stat-box .close {
    position: absolute; top: 12px; right: 14px; background: none; border: none;
    color: var(--dim); font-size: 21px; line-height: 1; cursor: pointer; padding: 4px;
}
.stat-box .close:hover { color: var(--text); }
.stat-head { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; padding-right: 30px; }
.stat-head .now { font-size: 30px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-head .what { font-size: 14px; color: var(--text-secondary); }
.stat-sub { font-size: 12.5px; color: var(--dim); margin: 4px 0 15px; }
.stat-sub .up { color: #22c55e; } .stat-sub .down { color: #ef4444; }
.stat-range { display: flex; gap: 7px; margin-bottom: 14px; flex-wrap: wrap; }
.stat-range button {
    background: none; border: 1px solid var(--border); color: var(--text-secondary);
    border-radius: 999px; padding: 5px 13px; font: inherit; font-size: 12.5px; cursor: pointer;
    transition: var(--transition);
}
.stat-range button:hover { border-color: var(--accent); color: var(--text); }
.stat-range button.active { border-color: var(--accent); color: var(--text); background: rgba(255, 64, 87, 0.25); }
.stat-foot { font-size: 12.5px; color: var(--dim); margin-top: 15px; line-height: 1.6; }
.stat-foot a { color: var(--accent); }


/* Plattform-Vergleich: welche Plattform traegt wie viel bei */
.pcmp { margin: 2px 0 6px; font-family: var(--font-body); }
.pcmp h4 { margin: 0 0 9px; font-size: 12px; text-transform: uppercase;
    letter-spacing: .6px; color: var(--dim); font-weight: 600; }
/* Luecken zwischen den Abschnitten. Selbst bei aehnlichen Farben sieht
   man dadurch sofort, wo einer aufhoert und der naechste anfaengt. */
.pcmp-bar { display: flex; gap: 3px; height: 12px; margin-bottom: 12px; }
.pcmp-bar span { display: block; height: 100%; border-radius: 3px; min-width: 3px; }
.pcmp-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px;
    padding: 3px 0; color: var(--text-secondary); }
.pcmp-row i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.pcmp-row b { color: var(--text); font-variant-numeric: tabular-nums; margin-left: auto; }
.pcmp-row .pct { color: var(--dim); min-width: 42px; text-align: right;
    font-variant-numeric: tabular-nums; }
.pcmp-note { font-size: 12px; color: var(--dim); margin-top: 7px; line-height: 1.5; }

.modal-trend { margin: 4px 0 2px; }
.modal-trend h4 { margin: 0 0 9px; font-size: 12px; text-transform: uppercase;
    letter-spacing: .6px; color: var(--dim); font-family: var(--font-body); font-weight: 600; }
/* KEINE feste Hoehe. Das SVG bringt sein Seitenverhaeltnis aus dem
   viewBox mit, das an der echten Behaelterbreite haengt. Eine feste
   Hoehe hier wuerde genau das wieder kaputtmachen. */
.mt-tabs { display: flex; gap: 6px; margin-bottom: 9px; flex-wrap: wrap; }
.mt-tabs button {
    background: none; border: 1px solid var(--border); color: var(--text-secondary);
    border-radius: 999px; padding: 3px 11px; font: inherit; font-size: 12px; cursor: pointer;
}
.mt-tabs button.active { border-color: var(--accent); color: var(--text); }
@media (max-width: 640px) {
    .channel-head { gap: 13px; min-height: 72px; }
    .ch-avatar { width: 52px; height: 52px; }
    .ch-name { font-size: 21px; }
    .ch-discord { padding: 8px 11px; }
    .ch-discord .dc-name { display: none; }
    /* Am Handy blieb neben Avatar und Discord-Knopf kaum Breite, jede
       Zahl landete in einer eigenen Zeile. Jetzt: Kopfzeile mit
       Avatar, Name, Discord, darunter die Zahlen als Raster. */
    .channel-head {
        display: grid; grid-template-columns: auto 1fr auto;
        align-items: center; column-gap: 12px; row-gap: 12px;
    }
    .ch-info { display: contents; }
    .ch-avatar-wrap { grid-column: 1; grid-row: 1; }
    .ch-name { grid-column: 2; grid-row: 1; margin: 0; }
    .ch-discord { grid-column: 3; grid-row: 1; margin: 0; }
    .ch-stats { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
    .ch-totals { grid-column: 1 / -1; gap: 6px 14px; margin-top: 0; }
    .ch-totals > span { display: none; }
    .story-stage img, .story-stage video { max-height: 88vh; border-radius: 8px; }
}


.post-card.skeleton { pointer-events: none; }
.post-thumb.sk, .sk-line {
    background: linear-gradient(90deg, var(--card) 25%, var(--card-hover) 50%, var(--card) 75%);
    background-size: 200% 100%;
    animation: skShimmer 1.2s infinite;
}
.sk-line { height: 13px; border-radius: 6px; margin-bottom: 7px; }
.sk-line.w80 { width: 80%; }
.sk-line.w50 { width: 50%; }
@keyframes skShimmer { to { background-position: -200% 0; } }

.dice-btn {
    padding: 8px 12px; font-size: 15px; line-height: 1;
    background: var(--card); border: 1px solid var(--border-light);
    border-radius: 999px; cursor: pointer; transition: var(--transition);
}
.dice-btn:hover { border-color: var(--accent); transform: rotate(20deg); }


.live-banner { display: none; margin-bottom: 30px; }
.live-banner .live-tag {
    display: inline-block; margin-bottom: 12px; padding: 5px 14px;
    background: #e91916; color: #fff; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .6px;
    animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
.live-banner .live-player { position: relative; aspect-ratio: 16 / 9; max-width: 1100px; border-radius: 16px; overflow: hidden; background: #000; }
.live-banner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


.posts-grid {
    display: grid; grid-auto-flow: row dense;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 30px 16px;
    align-items: start;
}
.post-card { cursor: pointer; }
.post-thumb {
    position: relative; aspect-ratio: 16 / 9;
    border-radius: var(--radius-m); overflow: hidden; background: #000;
    margin-bottom: 10px;
}

.post-thumb img.bg {
    position: absolute; inset: -8%;
    width: 116%; height: 116%;
    object-fit: cover;
    filter: blur(16px) brightness(0.45) saturate(1.15);
}
.post-thumb.framed img.fg { position: absolute; inset: 0; object-fit: contain; }
.post-card.tall .post-thumb { aspect-ratio: 9 / 16; }
.post-card.tall .post-thumb.framed img.fg { object-fit: cover; }
.post-card.photo .post-thumb { aspect-ratio: 4 / 5; }
.post-card.wide { grid-column: span 2; }
.post-card.wide .post-thumb { aspect-ratio: 16 / 9; }

.post-thumb.noimg { background: linear-gradient(45deg, #1c1c24, #2a2333); }
.post-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .25s ease;
}
/* Nur ein Hover-Effekt pro Karte (Thumb wird groesser), Bild nicht zusaetzlich skalieren */
.post-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-thumb .dur {
    position: absolute; bottom: 8px; right: 8px; z-index: 2;
    background: rgba(0, 0, 0, 0.82); color: #fff;
    font-size: 12px; font-weight: 600; font-family: var(--font-body);
    padding: 2px 7px; border-radius: 5px; pointer-events: none;
}

.post-thumb .src-row {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    display: flex; gap: 6px;
}
.post-thumb .src {
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    cursor: pointer; transition: var(--transition);
}
.post-thumb .src:hover { transform: scale(1.12); }
.post-thumb .src svg { width: 14px; height: 14px; display: block; }
.post-thumb .src.youtube { background: rgba(255, 0, 0, 0.88); }
.post-thumb .src.twitch { background: rgba(145, 70, 255, 0.88); }
.post-thumb .src.instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.post-thumb .src.tiktok { background: #000; }

.post-title {
    font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
    line-height: 1.4; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: 5px;
    min-height: 2.8em; 
}
.post-meta {
    font-family: var(--font-body); font-size: 12.5px; color: var(--dim);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
.post-meta .likes { color: var(--text-secondary); }

.post-meta .stat-views { min-width: 64px; }
.post-meta .stat-likes { min-width: 38px; }
.post-meta .stat-comments { min-width: 38px; }

.posts-empty { text-align: center; color: var(--dim); font-family: var(--font-body); padding: 60px 0; display: none; }

.scroll-sentinel { height: 1px; }
.posts-loadmore { text-align: center; color: var(--dim); font-family: var(--font-body); font-size: 13px; padding: 26px 0; display: none; }


.post-modal {
    position: fixed; inset: 0; z-index: 5000;
    display: none; align-items: center; justify-content: center;
    padding: 24px;
}
.post-modal.open { display: flex; }
.post-modal .backdrop {
    position: absolute; inset: 0;
    background: rgba(5, 5, 8, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.modal-box {
    position: relative; z-index: 1;
    width: min(1100px, 100%);
    max-height: calc(100svh - 48px);
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: 16px;
}
.modal-player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.modal-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal-player img, .modal-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* WARUM DIE HOEHE AM KASTEN STEHT UND NICHT AM PLAYER
   aspect-ratio kann eine Breite nur aus einer FESTEN Hoehe ableiten.
   Vorher hatte der Player `align-self: stretch` - seine Hoehe kam also
   erst aus der Zeile, die Breite blieb dabei an `min-height` haengen
   und war damit zu schmal fuer die tatsaechliche Hoehe. Den Rest hat
   `object-fit: contain` mit schwarzen Balken oben und unten
   aufgefuellt. (Der Fix davor gegen den GRAUEN Streifen hat also den
   schwarzen erzeugt.)
   Jetzt gibt der Kasten eine feste Hoehe vor, der Player uebernimmt
   sie mit height:100%, und aspect-ratio rechnet daraus exakt die
   passende Breite. Balken sind damit rechnerisch unmoeglich, und die
   Infospalte ist per Definition genau so hoch wie das Video. */
/* FESTE GROESSE, bewusst nicht gemessen.
   Vorher hat JavaScript die Hoehe aus der Infospalte berechnet. Das
   war gut gemeint, hatte aber eine haessliche Folge: YouTubes lange
   Beschreibung ergibt eine andere Hoehe als TikToks kurze
   Hashtag-Zeile, also sprang das ganze Fenster bei jedem Reiterwechsel
   in eine neue Groesse. Jetzt steht die Groesse fest, und die
   Beschreibung bekommt einen eigenen Scrollbalken (siehe unten).
   Alles unterhalb bleibt damit an derselben Stelle. */
.modal-box.split {
    display: flex; align-items: stretch;
    width: auto; max-width: calc(100vw - 48px);
    height: min(800px, calc(100svh - 48px), calc(44vw * 16 / 9));
    overflow: hidden;
}
.modal-box.split.box-photo { height: min(800px, calc(100svh - 48px), calc(44vw * 5 / 4)); }

/* Der eine Block, der je Plattform unterschiedlich lang ist. Feste
   Hoehe + eigener Scrollbalken = die Reiter, Zahlen, der Vergleich,
   das Diagramm und die Knoepfe darunter bewegen sich nie. */
.modal-box.split .modal-desc {
    height: 132px;
    overflow-y: auto;
    padding-right: 6px;
}
/* Auch der Titel bekommt eine feste Hoehe. Die neuen sind einzeilig,
   aeltere Beitraege (vor der Upload-Checkliste) haben aber lange Titel
   ohne Hashtags - drei Zeilen wuerden alles darunter verschieben.
   Zwei Zeilen, danach Auslassungspunkte. */
.modal-box.split .modal-info h2 {
    height: 2.9em; min-height: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.modal-box.split .modal-player {
    flex: none;
    height: 100%; width: auto;
    aspect-ratio: 9 / 16;
}
.modal-box.split .modal-player.photo { aspect-ratio: 4 / 5; }
.modal-box.split .modal-info {
    width: 380px; max-width: 55vw;
    overflow-y: auto;
    border-left: 1px solid var(--border-light);
}

/* Querformat (YouTube-VODs, Twitch): nebeneinander waere ein breites
   Video neben einer schmalen Spalte - und sobald die Spalte laenger
   wird, ist der graue Streifen zurueck. Deshalb hier gestapelt. */
.modal-box.split.box-wide {
    flex-direction: column;
    height: auto;
    width: min(900px, calc(100vw - 48px));
    overflow-y: auto;
}
.modal-box.split.box-wide .modal-player {
    width: 100%; height: auto; aspect-ratio: 16 / 9;
}
.modal-box.split.box-wide .modal-info {
    width: auto; max-width: none; overflow: visible;
    border-left: 0; border-top: 1px solid var(--border-light);
}

@media (max-width: 720px) {
    .post-modal { padding: 12px; }
    .modal-box.split, .modal-box.split.box-wide {
        flex-direction: column;
        width: min(460px, 100%); max-width: 100%;
        height: auto; max-height: calc(100svh - 24px);
        overflow-y: auto;
    }
    /* Hochformat: wieder Hoehe vorgeben und Breite ableiten, dann
       zentrieren. `width: 100%` mit aspect-ratio 9/16 waere auf dem
       Handy fast doppelt so hoch wie der Bildschirm gewesen - die alte
       max-height hat das gekappt und damit erneut Balken erzeugt. */
    /* Bewusst kleiner als vorher (52vh): auf dem Handy passen Video
       UND alle Zahlen nie auf einen Bildschirm, gescrollt wird also
       ohnehin. Dann lieber gleich mehr Inhalt zeigen, statt den
       halben Bildschirm ans Video zu verschenken. */
    .modal-box.split .modal-player {
        height: min(34vh, calc((100vw - 24px) * 16 / 9));
        width: auto; max-width: 100%;
        margin: 0 auto;
        aspect-ratio: 9 / 16;
    }
    .modal-box.split.box-photo .modal-player { aspect-ratio: 4 / 5; }
    .modal-box.split.box-wide .modal-player {
        width: 100%; height: auto; margin: 0; aspect-ratio: 16 / 9;
    }
    .modal-box.split .modal-info {
        width: auto; max-width: none; max-height: none;
        border-left: 0; overflow: visible;
        /* Enger als am Rechner: jeder gesparte Pixel ist eine Zeile
           mehr, die ohne Scrollen sichtbar ist. */
        padding: 14px 16px; gap: 8px;
    }
    /* Die feste Mindesthoehe haelt am Rechner die Zeilen ruhig, wenn
       man zwischen Plattformen wechselt. Auf dem Handy verschenkt sie
       bei kurzen Titeln nur Platz. */
    .modal-box.split .modal-info h2 { font-size: 17px; min-height: 0; }
    .modal-box.split .modal-info .stat-range { margin-bottom: 8px; }
    .modal-box.split .modal-actions { gap: 6px; }
}
.modal-info { padding: 22px 24px; display: flex; flex-direction: column; gap: 13px; }

.modal-info h2 { font-family: var(--font-body); font-weight: 700; font-size: 19px; line-height: 1.45; margin: 0; padding-right: 34px; min-height: 2.9em; }
.modal-meta { font-family: var(--font-body); font-size: 13.5px; color: var(--dim); display: flex; gap: 8px; flex-wrap: wrap; margin: 0; min-height: 1.5em; align-content: flex-start; font-variant-numeric: tabular-nums; }

.modal-meta .stat-views { min-width: 72px; }
.modal-meta .stat-likes { min-width: 40px; }
.modal-meta .stat-comments { min-width: 40px; }
.modal-meta .stat-dur { min-width: 42px; }
.modal-meta .likes { color: var(--text-secondary); }

.modal-tabs { display: none; gap: 6px; margin: 0; }
.modal-tabs.show { display: flex; flex-wrap: wrap; }
.modal-tabs button {
    padding: 5px 13px; font-size: 12.5px; font-weight: 600; font-family: var(--font-body);
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 999px; color: var(--text-secondary); cursor: pointer;
    transition: var(--transition);
}
.modal-tabs button:hover { border-color: var(--accent); }
.modal-tabs button.active { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
/* ⚠️ Kein Element in der Infospalte darf schrumpfen. Seit der Kasten
   eine feste Hoehe hat, druecken zu lange Inhalte die Flex-Elemente
   sonst UNTER ihre Texthoehe - der Text laeuft aus seiner Box und malt
   ueber das naechste Element drueber. Genau so sah der Titel aus, als
   die Hashtags noch mit drinstanden. Gescrollt wird stattdessen. */
.modal-info > * { flex-shrink: 0; }
.modal-desc { font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: var(--text-secondary); white-space: pre-line; margin: 0; }
.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.modal-actions a {
    display: inline-block; font-size: 13px; font-weight: 600; color: var(--text);
    text-decoration: none; padding: 9px 16px;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 8px; transition: var(--transition);
}
.modal-actions a:hover { border-color: var(--accent); color: var(--accent); }
.modal-close {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.6); color: #fff; border: 0;
    font-size: 18px; cursor: pointer; transition: var(--transition);
}
.modal-close:hover { background: var(--accent); }
body.modal-open { overflow: hidden; }

@media (max-width: 640px) {
    .posts-content { padding: 22px 14px 60px; }
    .posts-controls { margin: 0 -14px 22px; padding: 10px 14px; }
    .posts-bar h1 { display: none; }
    .posts-search { flex: 1 1 auto; min-width: 0; }
    .filter-toggle { display: inline-flex; }
    .posts-chips {
        display: flex; flex: 1 1 100%; flex-wrap: nowrap; align-items: center; gap: 8px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding: 2px 0;
    }
    .posts-chips::-webkit-scrollbar { display: none; }
    .posts-chips .filter-chip, .posts-chips .chip-reset, .posts-chips .chip-sep { flex: 0 0 auto; }
    .filter-selects { display: none; }
    .posts-controls.filters-open .filter-selects {
        display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 8px;
        margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--border-light);
    }
    .sel-wait { display: none; }
    .posts-count { margin-left: auto; }
    .posts-grid { grid-template-columns: repeat(auto-fill, minmax(min(165px, 100%), 1fr)); gap: 22px 12px; }
    .post-title { font-size: 13.5px; }
    .post-meta { font-size: 11.5px; gap: 4px 6px; }
    .post-meta .stat-views, .post-meta .stat-likes, .post-meta .stat-comments { min-width: 0; }
    .post-modal { padding: 10px; }
    .modal-info { padding: 14px 16px 18px; }
}
@media (hover: none) {
    .post-thumb .src { pointer-events: none; }
}

.posts-fresh {
    position: fixed; left: 50%; transform: translateX(-50%) translateY(-140%);
    top: calc(var(--header-height) + 12px); z-index: 60;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px; border-radius: 999px;
    background: var(--accent-solid);
    color: #fff; font-size: .92rem; font-weight: 600;
    box-shadow: 0 8px 30px rgba(0,0,0,.35); cursor: pointer;
    border: 0; transition: transform .3s ease;
}
.posts-fresh.show { transform: translateX(-50%) translateY(0); }
/* display:flex oben schlaegt das hidden-Attribut. Der Knopf lag dann
   versteckt hinter dem Kopf, sein Schatten schimmerte als lila
   Fleck unter der Navigation durch. */
.posts-fresh[hidden] { display: none; }
.posts-fresh:hover { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .posts-fresh { transition: none; } }
/* Serien und Vorschau (26.10.2026) */
.series-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 22px; }
.series-bar-label { font-family: var(--font-main); font-size: 26px; color: var(--text); }
.series-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.post-thumb .hover-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; transition: opacity .25s ease; z-index: 1; }
.post-card.previewing .post-thumb .hover-preview { opacity: 1; }
.post-card.previewing .post-thumb .src-row, .post-card.previewing .post-thumb .dur { z-index: 2; }
/* ===== Clips-Seite, Neugestaltung 26.10.2026 ===== */
.posts-grid[hidden], .stats-view[hidden], .scroll-sentinel[hidden] { display: none !important; }
#sourceSelect { display: none !important; }
.st-compare tbody tr:last-child td, .st-compare tbody tr:last-child th { border-bottom: 0; }
.posts-content { max-width: 1440px; padding: 30px 40px 90px; }
.posts-controls { margin: 0 -40px 22px; padding: 14px 40px 12px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.posts-bar { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "title view selects" "search search search" "chips chips chips"; align-items: center; gap: 12px 16px; }
.posts-bar h1 { grid-area: title; font-size: 44px; margin: 0; line-height: 1; }
.view-toggle { grid-area: view; display: inline-flex; padding: 4px; border: 1px solid var(--border); border-radius: 999px; }
.view-toggle .vt { padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--text-secondary); }
.view-toggle .vt[aria-selected="true"] { background: var(--text); color: var(--bg); }
.filter-selects { grid-area: selects; justify-self: end; margin: 0; }
.posts-search { grid-area: search; flex: none; width: 100%; min-width: 0; padding: 11px 18px; font-size: 15px; }
.posts-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.posts-bar .filter-toggle { grid-area: view; justify-self: end; }
.filter-chip { padding: 7px 14px; font-size: 13.5px; }
.series-bar { margin: 0 0 24px; }
.series-bar-label { font-size: 22px; margin-right: 4px; }
.channel-head { margin-bottom: 18px; }
.post-title { font-weight: 700; }
.lang-badge { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 2px 7px; border-radius: 6px; font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #fff; background: rgba(12, 8, 18, .78); border: 1px solid rgba(255,255,255,.25); }
.lang-badge.en { background: #6d28d9; border-color: transparent; }
.post-card.previewing .lang-badge { z-index: 3; }
body.stats-mode .series-bar { margin-bottom: 18px; }
body.stats-mode #filterYear, body.stats-mode .dice-btn { display: none; }

/* Statistik */
.stats-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.stats-view > *, .st-block { min-width: 0; }
.st-plats { display: flex; flex-wrap: wrap; gap: 8px; }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.st-block h2 { font-size: 28px; margin-bottom: 12px; }
.st-table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.st-table th, .st-table td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.st-table th:first-child, .st-table td:first-child { text-align: left; }
.st-table thead th { font-size: 12.5px; color: var(--dim); font-weight: 700; }
.st-compare tbody th { font-weight: 700; color: var(--text); }
.st-compare td { color: var(--text-secondary); }
.st-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-m); }
.st-rank-table thead th { position: sticky; top: 0; background: var(--bg-secondary); }
.st-rank-table td.st-clip { text-align: left; white-space: normal; min-width: 260px; max-width: 420px; }
.st-rank-table td.st-clip .lang-badge { position: static; margin-right: 8px; display: inline-block; }
.st-rank-table td.st-rank { color: var(--dim); width: 36px; }
.st-rank-table th:nth-child(2) { text-align: left; }
.st-rank-table tbody tr { cursor: pointer; }
.st-rank-table tbody tr:hover, .st-rank-table tbody tr:focus-visible { background: var(--card); }
.st-rank-table td b { color: var(--text); }
.st-sort { font: inherit; color: inherit; padding: 2px 0; }
.st-sort.on { color: var(--accent); }
.st-note, .st-empty { color: var(--dim); font-size: 14px; max-width: 80ch; }
@media (max-width: 900px) { .st-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
    .posts-content { padding: 20px 14px 60px; }
    .posts-controls { margin: 0 -14px 18px; padding: 10px 14px; }
    .posts-bar { grid-template-columns: 1fr auto; grid-template-areas: "title view" "search search" "chips chips" "selects selects"; }
    .posts-bar h1 { display: block; font-size: 34px; }
    .posts-bar .filter-toggle { display: none; }
    .posts-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .filter-selects { display: flex; justify-self: stretch; }
    .st-table th, .st-table td { padding: 8px; font-size: 13px; }
}

/* ===== Dritte Fassung 26.10.2026: ruhiger, Flaechen statt Rahmen ===== */
.ch-name { font-family: var(--font-main); font-weight: 800; letter-spacing: -0.03em; font-size: 36px; }
.posts-bar h1 { font-size: 48px; font-weight: 800; letter-spacing: -0.04em; }
.posts-controls { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
[data-theme="light"] .posts-controls { background: color-mix(in srgb, var(--bg) 94%, transparent); }
body.stats-mode .posts-controls { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.posts-controls.stuck { box-shadow: none; border-bottom-color: var(--border); }
.view-toggle { border: 0; background: var(--card); padding: 3px; }
[data-theme="light"] .view-toggle { background: #e8e8ed; }
.view-toggle .vt[aria-selected="true"] { background: var(--bg); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.filter-chip, .sort-select, .playlist-select, .posts-search, .filter-toggle, .dice-btn { border-color: transparent; background: var(--card); }
.filter-chip:hover { border-color: transparent; background: var(--card-hover); }
.filter-chip.active { background: var(--text); border-color: var(--text); color: var(--bg); }
.posts-search:focus, .sort-select:focus, .playlist-select:focus { border-color: var(--blue); }
.chip-reset { border-style: solid; border-color: transparent; }
.series-bar-label { font-weight: 700; letter-spacing: -0.02em; }
.post-thumb { border-radius: var(--radius-m); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.post-card:hover .post-thumb { transform: scale(1.02); box-shadow: 0 18px 36px rgba(0,0,0,.28); }
.post-title { font-weight: 600; letter-spacing: -0.01em; }
.lang-badge { border: 0; background: rgba(255,255,255,.88); color: #1d1d1f; }
.lang-badge.en { background: #6d28d9; color: #fff; }
.st-scroll { border: 0; background: var(--card); }
.st-rank-table thead th { background: var(--card); }
.st-rank-table tbody tr:hover, .st-rank-table tbody tr:focus-visible { background: var(--card-hover); }
.st-table th, .st-table td { border-bottom-color: var(--border); }
.st-block h2 { font-weight: 800; letter-spacing: -0.03em; }
.st-sort.on { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .post-card:hover .post-thumb { transform: none; } }

/* Gleiche Breite wie Kopf und Startseite */
@media (min-width: 721px) {
    .posts-content { max-width: calc(var(--max-width) + 2 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
    .posts-controls { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
    .posts-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
/* Seitenkopf wie auf den anderen Unterseiten; die Leiste darunter
   braucht keinen eigenen Titel mehr */
.page-head { padding: 64px 0 36px; }
.page-head h1 { font-size: clamp(48px, 7.4vw, 88px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; }
.page-lede { margin-top: 14px; font-size: clamp(19px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--dim); }
.channel-head { padding: 22px 24px; border-radius: var(--radius-l); background: var(--card); margin-bottom: 28px; }
.posts-bar { grid-template-columns: auto 1fr auto !important; grid-template-areas: "view selects selects" "search search filt" "chips chips chips" !important; }
@media (max-width: 720px) {
    .page-head { padding: 36px 0 24px; }
    .posts-bar { grid-template-columns: 1fr !important; grid-template-areas: "view" "search" "chips" "selects" !important; }
    .posts-bar .view-toggle { justify-self: start; }
    .channel-head { padding: 16px; }
}

/* Clip-Fenster, dritte Fassung: ruhige Flaechen, grosse Zahlen, Blaettern */
.post-modal .backdrop { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-theme="light"] .post-modal .backdrop { background: rgba(245, 245, 247, 0.82); }
/* Unscharf rechnen kostet am Handy jedes Bild, dort deckend abdunkeln (27.10.2026) */
@media (hover: none), (max-width: 768px) {
    .post-modal .backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0, 0, 0, 0.86); }
    [data-theme="light"] .post-modal .backdrop { background: rgba(245, 245, 247, 0.96); }
}
.post-modal.open .modal-box { animation: modalIn .35s var(--ease) both; }
@keyframes modalIn { from { opacity: 0; transform: scale(.97) translateY(10px); } to { opacity: 1; transform: none; } }
.modal-box { border: 0; border-radius: 28px; background: var(--bg-secondary); box-shadow: 0 40px 120px rgba(0,0,0,.45); }
[data-theme="light"] .modal-box { background: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.18); }
.modal-box.split .modal-info { border-left: 0; }
@media (min-width: 721px) { .modal-box.split:not(.box-wide) .modal-info { width: 400px; } }
.modal-box.split.box-wide .modal-info { border-top: 0; }
.modal-info { padding: 28px 28px 26px; gap: 16px; }
.modal-info h2, .modal-box.split .modal-info h2 { font-family: var(--font-main); font-size: 24px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; height: auto; -webkit-line-clamp: 3; padding-right: 40px; min-height: 0; }
.modal-tabs.show { display: inline-flex; align-self: flex-start; flex-wrap: nowrap; padding: 3px; gap: 0; border-radius: 999px; background: var(--card); }
[data-theme="light"] .modal-tabs.show { background: #e8e8ed; }
.modal-tabs button { border: 0; background: none; padding: 6px 14px; font-size: 13px; color: var(--text-secondary); }
.modal-tabs button:hover { border: 0; color: var(--text); }
.modal-tabs button.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.modal-meta { display: block; min-height: 0; color: var(--dim); font-size: 14px; }
.mm-line { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.mm-line .lang-badge { position: static; }
.mm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mm-kpis div { padding: 12px 12px 11px; border-radius: 16px; background: var(--card); }
.mm-kpis b { display: block; color: var(--text); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mm-kpis span { display: block; font-size: 11.5px; line-height: 1.25; margin-top: 2px; }
.modal-box.split .modal-desc { height: auto; overflow: visible; padding: 0; }
.modal-desc { font-size: 14.5px; line-height: 1.55; }
.modal-desc.clamped { max-height: 4.65em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.modal-more { align-self: flex-start; color: var(--accent); font-weight: 600; font-size: 14px; margin-top: -10px; }
.pcmp h4, .modal-trend h4 { text-transform: none; letter-spacing: -0.01em; font-size: 15px; font-weight: 700; color: var(--text); }
.pcmp, .modal-trend { padding: 16px; border-radius: 18px; background: var(--card); margin: 0; }
.pcmp-bar { height: 8px; gap: 2px; } .pcmp-bar span { border-radius: 99px; }
.mt-tabs button { border-color: transparent; background: var(--bg-secondary); }
.mt-tabs button.active { border-color: transparent; background: var(--text); color: var(--bg); }
.modal-actions { gap: 8px; padding-top: 0; margin-top: 0; }
.modal-actions .btn { min-height: 40px; padding: 8px 16px; font-size: 14.5px; }
.modal-actions a.btn { border-radius: 999px; }
.modal-actions a.btn-red { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
.modal-actions a.btn-red:hover { background: var(--accent-hover); color: #fff; }
.mx-soc svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.mx-soc.mx-com svg { fill: currentColor; stroke: none; }
.mx-soc.on { color: #ff4d6d; border-color: currentColor; }
.mx-soc.on svg { fill: currentColor; }
.modal-actions a.btn-ghost { background: transparent; border-color: var(--border-light); color: var(--text); }
.modal-actions a.btn-ghost:hover { border-color: var(--text); color: var(--text); }
.modal-close { width: 34px; height: 34px; font-size: 15px; background: var(--card); color: var(--text); top: 16px; right: 16px; }
.modal-close:hover { background: var(--card-hover); }
.modal-box.split.box-wide .modal-close, .modal-box:not(.split) .modal-close { background: rgba(0,0,0,.55); color: #fff; }
.modal-nav { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 30px; line-height: 1; padding-bottom: 4px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background var(--transition); }
[data-theme="light"] .modal-nav { background: rgba(0,0,0,.08); color: #1d1d1f; }
.modal-nav:hover { background: rgba(255,255,255,.26); }
.modal-nav.prev { left: 18px; } .modal-nav.next { right: 18px; }
.modal-nav[hidden] { display: none; }
@media (max-width: 720px) {
    .modal-nav { display: none; }
    .modal-box { border-radius: 22px; }
    .modal-info, .modal-box.split .modal-info { padding: 18px 16px 20px; gap: 14px; }
    .modal-info h2, .modal-box.split .modal-info h2 { font-size: 20px; }
    .mm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .modal-box.split .modal-player { height: min(56vh, calc((100vw - 24px) * 16 / 9)); }
    .posts-content { padding-left: 20px; padding-right: 20px; }
    .posts-controls { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
}

/* Auswahlfelder und Zufallsknopf als ruhige Pillen */
.sort-select, .playlist-select { -webkit-appearance: none; appearance: none; padding-right: 34px; color: var(--text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 11px; }
.dice-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; color: var(--text); border-color: transparent; }
.dice-btn:hover { background: var(--card-hover); }

/* Filter hinter einem Knopf, Karten-Metadaten ruhiger, Plattform-Symbole dezent */
@media (min-width: 721px) {
    .posts-bar { grid-template-columns: auto auto 1fr auto; grid-template-areas: "title view selects selects" "search search search filt" "chips chips chips chips"; }
    .posts-bar .filter-toggle { display: inline-flex; grid-area: filt; justify-self: end; align-self: stretch; padding: 0 18px; }
    .posts-chips { display: none; }
    .posts-controls.filters-open .posts-chips { display: flex; }
}
.filter-toggle .caret { font-size: 11px; }
.posts-controls.filters-open .filter-toggle { background: var(--text); color: var(--bg); border-color: transparent; }
.post-meta { display: flex; flex-wrap: wrap; gap: 0 6px; color: var(--dim); font-size: 13px; }
.post-meta .dot { opacity: .7; }
.post-meta .stat-views, .post-meta .stat-likes { min-width: 0; }
.post-thumb .src { width: 22px; height: 22px; background: rgba(0,0,0,.6) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.post-thumb .src svg { width: 11px; height: 11px; }
.post-thumb .src-row { gap: 4px; }

.watch-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--accent-solid); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.watch-btn:hover { background: var(--accent-hover); color: #fff; }
body.stats-mode .watch-btn { display: none; }

/* Statistik, zweite Fassung: Fragen als Ueberschrift, Antwort als Satz */
body.stats-mode .posts-search, body.stats-mode .posts-chips, body.stats-mode .filter-selects, body.stats-mode .posts-count { display: none !important; }
.stats-view { gap: 0; }
.st-top { margin-bottom: 8px; }
.st-seg { display: inline-flex; flex-wrap: wrap; }
.st-sec { padding: 40px 0 8px; }
.st-sec h2 { font-size: clamp(28px, 3vw, 36px); font-weight: 800; letter-spacing: -0.035em; margin-bottom: 14px; }
.st-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.st-sec-head h2 { margin: 0; }
.st-answer { font-size: clamp(19px, 1.8vw, 23px); font-weight: 600; letter-spacing: -0.015em; color: var(--text-secondary); margin: -4px 0 20px; max-width: 40em; }
.st-hint { color: var(--dim); font-size: 15px; margin-top: 14px; }
.st-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.st-kpi { padding: 24px 22px; border-radius: var(--radius-l); background: var(--card); }
.st-kpi b { display: block; font-size: clamp(32px, 3.6vw, 48px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.st-kpi span { display: block; margin-top: 8px; color: var(--dim); font-size: 15px; }
.st-vs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.st-vs { padding: 26px; border-radius: var(--radius-l); background: var(--card); }
.st-vs-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; margin-bottom: 18px; }
.st-vs-head .lang-badge { position: static; }
.st-vs-head small { margin-left: auto; color: var(--dim); font-weight: 500; font-size: 14px; }
.st-vs > b { display: block; font-size: clamp(40px, 4.4vw, 60px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.st-sub { display: block; color: var(--dim); font-size: 15px; margin-top: 6px; }
.st-vs p { margin-top: 14px; color: var(--text-secondary); font-size: 15px; }
.st-bar { height: 8px; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: 16px; }
.st-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent-solid); transition: width .8s var(--ease); }
.st-vs.en .st-bar i { background: #7c3aed; }
.st-card { border-radius: var(--radius-l); background: var(--card); }
.st-pls { padding: 10px 26px; }
.st-pl { display: grid; grid-template-columns: 140px minmax(0, 1fr) 150px 170px; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.st-pl:last-child { border-bottom: 0; }
.st-pl .st-bar { margin: 0; }
.st-pl-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.st-pl-name .chip-ico { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.st-pl-name .chip-ico svg { width: 12px; height: 12px; }
.st-pl-name .chip-ico.youtube { background: #ff0000; } .st-pl-name .chip-ico.instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); } .st-pl-name .chip-ico.tiktok { background: #000; }
.st-pl-num { text-align: right; color: var(--dim); font-size: 14px; }
.st-pl-num b { color: var(--text); font-size: 18px; font-variant-numeric: tabular-nums; }
.st-pl-rate { text-align: right; color: var(--dim); font-size: 14px; font-variant-numeric: tabular-nums; }
.st-list { list-style: none; padding: 6px; margin: 0; }
.st-row { width: 100%; display: grid; grid-template-columns: 34px 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 16px; text-align: left; transition: background var(--transition); }
.st-row:hover { background: var(--card-hover); }
.st-rank { color: var(--dim); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.st-th { width: 48px; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: var(--border); }
.st-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-meta { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 13.5px; }
.st-meta .lang-badge { position: static; }
.st-main { text-align: right; }
.st-main b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.st-main small { color: var(--dim); font-size: 12px; }
.st-more { margin-top: 16px; }
.st-note { margin-top: 36px; }
@media (max-width: 900px) {
    .st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-vs-grid { grid-template-columns: 1fr; }
    .st-pl { grid-template-columns: 1fr auto; gap: 8px 14px; }
    .st-pl .st-bar { grid-column: 1 / -1; grid-row: 2; }
    .st-pl-rate { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 520px) {
    .st-row { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 10px 8px; gap: 10px; }
    .st-rank { display: none; }
    .st-kpi { padding: 18px 16px; }
    .st-seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
    .st-seg .vt { white-space: nowrap; }
}

/* ===== UX-Runde 27.10.2026 ===== */

/* Statistik: nur der Umschalter bleibt, alles fuer die Clips verschwindet.
   Die Serienleiste bleibt nur, wenn eine Serie gewaehlt ist (sie rechnet mit). */
body.stats-mode .posts-bar .filter-toggle,
body.stats-mode .posts-search, body.stats-mode .posts-chips,
body.stats-mode .filter-selects, body.stats-mode .posts-count,
body.stats-mode .watch-btn, body.stats-mode .dice-btn,
body.stats-mode .series-bar:not(.series-on) { display: none !important; }
body.stats-mode .posts-grid, body.stats-mode .posts-loadmore, body.stats-mode .posts-empty { display: none !important; }
.st-seg .vt[disabled] { cursor: default; }
body.stats-mode .posts-controls { margin-bottom: 6px; }

/* Serienleiste haelt ihren Platz, bis series.json da ist */
.series-bar[hidden] { display: none; }
.series-chips:empty { min-height: 33px; min-width: 50%; }

/* Kanal-Karte: Platzhalter in derselben Form wie die fertige Karte */
.ch-stat { min-height: 22px; }
.ch-total { min-height: 20px; font-style: normal; }
.channel-head .sk {
    display: block;
    background: linear-gradient(90deg, var(--border) 25%, var(--card-hover) 50%, var(--border) 75%);
    background-size: 200% 100%; animation: skShimmer 1.2s infinite;
}
.channel-head .ch-avatar.sk { border-color: transparent; }
.channel-head .sk-txt { display: inline-block; height: .8em; border-radius: 6px; vertical-align: middle; max-width: 100%; }
.channel-head.is-loading { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .channel-head .sk { animation: none; } }

/* Beste Clips: dichter, mit kleinem Balken fuer die Aufrufe */
.st-list { padding: 4px; }
.st-row { grid-template-columns: 26px 36px minmax(0, 1fr) auto; gap: 12px; padding: 8px 12px; min-height: 64px; border-radius: 14px; }
.st-th { width: 36px; height: 48px; aspect-ratio: auto; border-radius: 6px; }
.st-txt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 32%); column-gap: 24px; row-gap: 3px; align-items: center; }
.st-title { grid-column: 1; line-height: 1.3; }
.st-meta { grid-column: 1; font-size: 13px; white-space: nowrap; overflow: hidden; line-height: 1.3; }
.st-meta-t { overflow: hidden; text-overflow: ellipsis; }
.st-mini { grid-column: 2; grid-row: 1 / span 2; display: block; height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.st-mini i { display: block; height: 100%; border-radius: 99px; background: var(--accent-solid); }
.st-main { min-width: 64px; }
.st-main b { font-size: 18px; line-height: 1.15; }
.st-main small { display: block; line-height: 1.2; }
@media (max-width: 520px) {
    .st-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 8px; }
    .st-txt { grid-template-columns: minmax(0, 1fr); }
    .st-mini { grid-column: 1; grid-row: auto; height: 4px; width: 100%; max-width: 180px; margin-top: 2px; }
}

/* Handy: erst die Clips, dann die Knoepfe.
   Zeile 1: Clips/Statistik, Zufall, Watch-Modus.
   Zeile 2: Suche, Filter, Sortierung. Alles andere hinter "Filter". */
@media (max-width: 720px) {
    .page-head { padding: 28px 0 18px; }
    .page-head h1 { font-size: 44px; }
    .page-lede { font-size: 18px; margin-top: 8px; }
    .channel-head { margin-bottom: 16px; }
    .posts-controls { padding-top: 8px; padding-bottom: 8px; margin-bottom: 16px; }
    .posts-bar { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; }
    .posts-bar::before { content: ''; order: 4; flex-basis: 100%; height: 0; margin-top: -8px; }
    .posts-bar .view-toggle { order: 1; margin-right: auto; }
    .posts-bar .view-toggle .vt { padding-left: 14px; padding-right: 14px; }
    .posts-controls .chip-sep { display: none; }
    .posts-controls .filter-selects, .posts-controls.filters-open .filter-selects { display: contents !important; }
    .posts-bar .dice-btn { order: 2; width: 40px; height: 40px; }
    .posts-bar .watch-btn { order: 3; height: 40px; padding: 0 14px; }
    .posts-bar .posts-search { order: 5; flex: 1 1 0; width: auto; min-width: 0; height: 40px; padding: 0 14px; font-size: 15px; }
    .posts-bar .filter-toggle { order: 6; display: inline-flex; height: 40px; padding: 0 14px; }
    .posts-bar #sortSelect { order: 7; height: 40px; max-width: 124px; padding-left: 14px; text-overflow: ellipsis; }
    .posts-controls .posts-chips { order: 8; display: none; }
    .posts-controls.filters-open .posts-chips { display: flex; flex: 1 1 100%; flex-wrap: wrap; overflow: visible; gap: 8px; padding: 4px 0 0; }
    .posts-bar #yearSelect, .posts-bar #playlistSelect { order: 9; display: none; height: 40px; }
    .posts-controls.filters-open #yearSelect:not(.sel-wait), .posts-controls.filters-open #playlistSelect:not(.sel-wait) { display: inline-block; }
    .posts-bar .posts-count { order: 10; display: none; margin-left: auto; min-width: 0; }
    .posts-controls.filters-open .posts-count { display: inline; }
    /* Serien in einer wischbaren Zeile statt drei Zeilen Knoepfe */
    .series-bar { flex-wrap: nowrap; gap: 10px; margin: 0 -20px 18px; padding: 0 20px; }
    .series-bar-label { font-size: 17px; flex: none; margin: 0; }
    .series-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
    .series-chips::-webkit-scrollbar { display: none; }
    .series-chips .filter-chip { flex: none; white-space: nowrap; }
    .ch-stats { row-gap: 0; }
    /* Summen in einer Zeile, notfalls wischbar. Auf Deutsch sind die
       Woerter laenger und die Karte wuerde sonst eine Zeile hoeher. */
    .ch-totals { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0 12px; margin-right: -16px; padding-right: 16px; }
    .ch-totals::-webkit-scrollbar { display: none; }
    .ch-totals > * { flex: none; white-space: nowrap; }
}

/* Touch: alles, was man antippt, mindestens 40 px hoch */
@media (pointer: coarse) {
    .ch-stat, .ch-total { min-height: 40px; }
    .ch-discord { min-height: 40px; }
    .view-toggle .vt, .filter-chip, .chip-reset, .sort-select, .playlist-select,
    .filter-toggle, .watch-btn, .posts-search { min-height: 40px; }
    .dice-btn { width: 40px; height: 40px; }
    .stat-range button, .mt-tabs button, .modal-tabs button { min-height: 40px; }
    .st-more { min-height: 44px; }
    .modal-close, .stat-box .close { min-width: 40px; min-height: 40px; }
}
/* Am Handy kein Unschaerfe-Filter unter der klebenden Leiste: der kostet beim Scrollen jedes Bild (27.10.2026) */
@media (pointer: coarse) { .posts-controls { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--bg) 97%, transparent); } }

/* Karten als Link (27.10.2026): Titel ist ein echter Link (Tab, Mittelklick, neuer Tab) */
.post-card { position: relative; }
.post-link { color: inherit; text-decoration: none; display: block; }
.post-link:focus-visible { outline: none; }
.post-card:has(.post-link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-m); }
.post-thumb .src-row { z-index: 2; }
.post-thumb a.src { color: inherit; }
.post-thumb img.bg.tiny { filter: brightness(0.45) saturate(1.15); image-rendering: auto; }