/* ── PhantastikCharts – seitenspezifisches CSS für blogger-charts.php ─────
   Ausgelagert aus dem früheren Inline-<style>-Block (Aufräumaktion 2026-08-22),
   damit der Browser diese Datei über Page-Loads hinweg cachen kann (per <link>
   + asset_url()-Cache-Busting eingebunden, wie assets/style.css). */

.page-wrap { max-width: 860px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.chart-header { display: flex; align-items: baseline; gap: 0.75rem; border-bottom: 2px solid #1a1a1a; padding-bottom: 0.5rem; margin-bottom: 1rem; }
.chart-title { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; }

/* .bc-tabs/.bc-tab, .filter-pill, .pagination/.page-btn: siehe assets/style.css
   (Aufräumaktion 2026-08-22, waren 1:1-Duplikate) — Außenabstand hier per
   Override erhalten, wo er vom gemeinsamen Default abweicht. */
.pagination { margin: 1.5rem 0 0; }

/* ── Genre-Filter (beide Tabs) ── */
.filter-bar { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* ── Leer/Coming-Soon (beide Tabs) ── */
.coming-soon-state { background: #fff; border: 1px solid #e0e0d8; border-radius: 8px; padding: 4rem 2rem; text-align: center; margin: 2rem 0; }
.coming-soon-icon { font-size: 3rem; margin-bottom: 1rem; }
.coming-soon-state h2 { margin: 0 0 0.75rem; font-size: 1.4rem; color: #1a1a1a; }
.coming-soon-state p { color: #666; max-width: 480px; margin: 0 auto; line-height: 1.6; }

/* Reihen-Grid ist bei beiden Tabs identisch, Rest (Farben/Groessen) je Tab gescoped,
   damit sich die beiden Listen (Aktuell zeigt Punkte+Voter+Delta, All-Time zeigt
   Gesamtpunkte+Wochen) nicht gegenseitig per Cascade ueberschreiben. */
.chart-list { background: #fff; border: 1px solid #e0e0d8; border-radius: 6px; overflow: hidden; }
/* Zeilen-Hülle (border/hover/display:grid): siehe .list-row in assets/style.css
   (Aufräumaktion 2026-08-22, war 1:1-Duplikat mit duelle.php/voter.php/
   buchfinder.php) — hier nur noch die eigenen Spaltenbreiten. */
.chart-row  { grid-template-columns: 52px 52px 1fr auto; }
.row-cover-wrap { padding: 0.5rem 0.25rem; position: relative; }
.row-cover { width: 40px; height: 58px; object-fit: cover; display: block; border-radius: 2px; }
.row-cover-zoom { display: none; position: absolute; left: 48px; top: 50%; transform: translateY(-50%); width: 120px; height: auto; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.25); z-index: 50; pointer-events: none; }
.row-cover-wrap:hover .row-cover-zoom { display: block; }
.row-cover-empty { width: 40px; height: 58px; background: #ede8e0; border-radius: 2px; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 1.1rem; }
.row-info { padding: 0.6rem 0.75rem; min-width: 0; }
.row-title { font-size: 0.9rem; font-weight: 700; color: #1a1a1a; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .title-subtitle (Basis): siehe assets/style.css (Aufräumaktion 2026-08-27, war 1:1-Duplikat) — hier nur noch der Top1-Hero-Override unten. */
.row-author { font-size: 0.78rem; color: #777; margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-right { padding: 0.6rem 0.75rem 0.6rem 0.5rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; flex-shrink: 0; }

/* ── Tab: Aktuell ── */
.tiebreak-hint { font-size: 0.78rem; color: #999; margin: -0.25rem 0 1rem; }
.tiebreak-hint a { color: inherit; text-decoration: underline; }
.tab-aktuell .chart-row { min-height: 78px; }
/* .week-nav/.week-nav-btn/-disabled/-label: siehe assets/style.css (waren mit
   voter.php 1:1 identisch, nur .tab-aktuell-Präfix hier war Konvention, keine
   echte Scoping-Notwendigkeit — Markup nutzt ohnehin nur die reine Klasse). */
.tab-aktuell .week-nav-voters { display: block; font-size: 0.72rem; font-weight: 400; color: #aaa; }

.tab-aktuell .delta-up  { color: #16a34a; font-size: 0.72rem; font-weight: 600; }
.tab-aktuell .delta-dn  { color: #dc2626; font-size: 0.72rem; font-weight: 600; }
.tab-aktuell .delta-eq  { color: #999;    font-size: 0.72rem; }
.tab-aktuell .badge-new { background: #fef9c3; color: #854d0e; font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.35rem; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em; }

.tab-aktuell .top1-hero { background: #fff; border: 1px solid #e0e0d8; border-radius: 6px; display: flex; align-items: stretch; overflow: hidden; margin-bottom: 0.5rem; }
.tab-aktuell .top1-rank-block { background: #c0392b; color: #fff; font-size: 3.5rem; font-weight: 900; line-height: 1; min-width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: -0.04em; padding: 0.75rem 0.5rem; gap: 0.3rem; }
.tab-aktuell .top1-cover { width: 110px; flex-shrink: 0; background: #ede; overflow: hidden; }
.tab-aktuell .top1-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tab-aktuell .top1-cover-empty { width: 100%; height: 100%; min-height: 155px; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 2rem; }
.tab-aktuell .top1-body { padding: 1rem 1.25rem; display: flex; align-items: flex-start; gap: 0.75rem; flex: 1; min-width: 0; }
.tab-aktuell .top1-body-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; align-self: stretch; }
.tab-aktuell .top1-body-main .weeks-info { margin-top: auto; padding-top: 0.5rem; }
.tab-aktuell .top1-body-right { flex-shrink: 0; display: flex; flex-direction: column; gap: 0.2rem; text-align: right; padding-top: 0.1rem; }
.tab-aktuell .top1-title { font-size: 1.35rem; font-weight: 800; line-height: 1.2; color: #1a1a1a; }
.tab-aktuell .top1-title .title-subtitle { display: block; font-size: 0.85rem; font-weight: 400; color: #555; margin-top: 0.2rem; }
.tab-aktuell .top1-author { font-size: 0.92rem; color: #666; }
.tab-aktuell .top1-stat-line { font-size: 0.88rem; color: #333; white-space: nowrap; }
.tab-aktuell .top1-stat-line strong { color: #1a1a1a; }
.tab-aktuell .weeks-info { font-size: 0.75rem; color: #888; margin-top: 0.2rem; white-space: normal; line-height: 1.6; }

.tab-aktuell .row-rank-block { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem 0.25rem; gap: 0.15rem; }
.tab-aktuell .row-rank-num { font-size: 1.3rem; font-weight: 800; color: #ccc; line-height: 1; }
.tab-aktuell .chart-row:nth-child(-n+2) .row-rank-num { color: #aaa; }
.tab-aktuell .chart-row.rank-2 .row-rank-num { color: #888; }
.tab-aktuell .chart-row.rank-3 .row-rank-num { color: #a0603a; }
.tab-aktuell .row-cover { cursor: zoom-in; }
.tab-aktuell .row-weeks  { font-size: 0.7rem; color: #aaa; margin-top: 0.2rem; }
.tab-aktuell .row-weeks-debut { color: #b45309; font-weight: 600; }
.tab-aktuell .row-right { gap: 0.4rem; }
.tab-aktuell .row-stat-line { font-size: 0.78rem; text-align: right; white-space: nowrap; }
.tab-aktuell .row-pts { font-weight: 700; color: #1a1a1a; }
.tab-aktuell .row-voters { color: #888; }

.tab-aktuell .ad-mid { padding: 0.75rem 1rem; border-bottom: 1px solid #f0f0e8; display: flex; justify-content: center; background: #fafaf8; }
.tab-aktuell .ad-box { background: #e8e8e0; border: 1px dashed #c0c0b8; border-radius: 3px; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 0.75rem; }
.tab-aktuell .ad-box-mid { width: 100%; max-width: 728px; height: 90px; }

/* ── Tab: All-Time ── */
.tab-alltime .chart-row { min-height: 72px; }
.tab-alltime .row-rank-block { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem 0.25rem; }
.tab-alltime .row-rank-num { font-size: 1.25rem; font-weight: 800; color: #ccc; line-height: 1; }
.tab-alltime .chart-row.rank-1 .row-rank-num { color: #c0a000; }
.tab-alltime .chart-row.rank-2 .row-rank-num { color: #888; }
.tab-alltime .chart-row.rank-3 .row-rank-num { color: #a0603a; }
.tab-alltime .row-genres { font-size: 0.68rem; color: #aaa; margin-top: 0.2rem; }
.tab-alltime .row-pts { font-size: 0.88rem; font-weight: 700; color: #1a1a1a; white-space: nowrap; }
.tab-alltime .row-weeks { font-size: 0.72rem; color: #aaa; white-space: nowrap; }

/* ── Tab: Voter (frühere voters.php) ── */
.filter-reset { font-size: 0.78rem; padding: 0.25rem 0.7rem; border-radius: 999px; background: transparent; color: #aaa; border: 1px solid #ddd; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.filter-reset:hover { color: #c0392b; border-color: #c0392b; }
.empty-state { background: #fff; border: 1px solid #e0e0d8; border-radius: 6px; padding: 3rem; text-align: center; color: #aaa; }

.voter-list { background: #fff; border: 1px solid #e0e0d8; border-radius: 6px; overflow: hidden; }
.voter-row { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid #f0f0e8; min-height: 60px; }
.voter-row:last-child { border-bottom: none; }
.voter-row:hover { background: #fafaf8; }
.voter-head { flex-shrink: 0; width: 210px; display: flex; flex-direction: column; gap: 0.3rem; }
.voter-name { font-size: 0.9rem; font-weight: 700; }
.voter-name a:hover { color: #c0392b; }
.voter-pts { font-size: 0.7rem; color: #aaa; }
.voter-platforms { display: flex; gap: 0.3rem; flex-wrap: wrap; }
/* .platform-link(-sm): siehe assets/style.css (Aufräumaktion 2026-08-22). */
.voter-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.genre-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; font-size: 0.78rem; }
.genre-pct { display: inline-flex; align-items: baseline; gap: 0.2rem; }
.genre-name { color: #555; }
.genre-val  { font-weight: 700; color: #1a1a1a; }
.genre-sep  { color: #ccc; font-size: 0.72rem; padding: 0 0.1rem; }
.last-review { font-size: 0.73rem; color: #aaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.last-review a { color: #c0392b; font-weight: 600; }
.last-review a:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .voter-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .voter-head { width: 100%; flex-direction: row; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    .last-review { white-space: normal; }
}

@media (max-width: 540px) {
    .site-header { padding: 0.5rem 0.75rem; }
    .site-nav { gap: 0.75rem; }

    .tab-aktuell .top1-hero { flex-wrap: wrap; }
    .tab-aktuell .top1-rank-block { font-size: 2.5rem; min-width: 52px; flex-shrink: 0; }
    .tab-aktuell .top1-cover { flex: 1; width: auto; min-height: 130px; }
    .tab-aktuell .top1-body { width: 100%; flex-wrap: wrap; }
    .tab-aktuell .top1-body-main { width: 100%; }
    .tab-aktuell .top1-body-right { width: 100%; flex-direction: column; gap: 0.15rem; text-align: left; padding-top: 0.25rem; }
    .tab-aktuell .top1-title { font-size: 1.05rem; }
    .tab-aktuell .weeks-info { white-space: normal; }

    .chart-row { grid-template-columns: 44px 46px 1fr auto; }
}