/* TCG Keeper — gemeinsames Stylesheet, Teil 10: Wertentwicklung und Wertanalyse (10.10.2026).
   Charts (assets/pcchart.js), Gewinner/Verlierer, Signale, „Wertvoll“-Kennzeichnung,
   Box „Wert & Preise“ der Kartenseite, Seite „Wertanalyse“ und die neu gegliederte
   Ergebnisbox des Wertabrufs. Wird in includes/layout_top.php nach Teil 9 eingebunden. */

:root{
  --pcc-c1:#5B3E96; --pcc-c2:#C0841A; --pcc-c3:#2F8F83; --pcc-c4:#C2513C;
  --pcc-c5:#4C7FC0; --pcc-c6:#8A9A2B; --pcc-c7:#B4558F; --pcc-c8:#8C8577;
  --vh-gold-1:#F7D774; --vh-gold-2:#C9962B; --vh-gold-ink:#5A3E00;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --pcc-c1:#AB8EEF; --pcc-c2:#E0AE4F; --pcc-c3:#5CC2B3; --pcc-c4:#E58A75;
    --pcc-c5:#7FA9E6; --pcc-c6:#B8C65A; --pcc-c7:#E08BC0; --pcc-c8:#A49D90;
    --vh-gold-ink:#2A1C00;
  }
}
:root[data-theme="dark"]{
  --pcc-c1:#AB8EEF; --pcc-c2:#E0AE4F; --pcc-c3:#5CC2B3; --pcc-c4:#E58A75;
  --pcc-c5:#7FA9E6; --pcc-c6:#B8C65A; --pcc-c7:#E08BC0; --pcc-c8:#A49D90;
  --vh-gold-ink:#2A1C00;
}

/* ------------------------------------------------------------------
   Charts (pcchart.js)
   ------------------------------------------------------------------ */
.pcc{ position:relative; color:var(--accent); }
.pcc-svg{ width:100%; height:100%; display:block; overflow:visible; }
.pcc-grid{ stroke:var(--line); stroke-width:1; }
.pcc-axis{ fill:var(--ink-faint); font-size:11px; font-family:var(--font-base); }
.pcc-line{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.pcc-line.pcc-thin{ stroke-width:1.4; opacity:.9; }
.pcc-s-avg7{ stroke:var(--gold); color:var(--gold); }
.pcc-s-avg30{ stroke:var(--ink-soft); color:var(--ink-soft); stroke-dasharray:4 3; }
.pcc-s-low{ stroke:var(--good); color:var(--good); stroke-dasharray:2 3; }
.pcc-area{ fill:currentColor; opacity:.10; stroke:none; }
.pcc-area.is-strong{ opacity:.22; }
.pcc-bar{ fill:currentColor; opacity:.85; }
.pcc-bar:hover{ opacity:1; }
.pcc-pt{ fill:currentColor; stroke:var(--paper-raised); stroke-width:1.5; }
.pcc-wick{ stroke-width:1.4; }
.pcc-wick.is-up, .pcc-candle.is-up{ stroke:var(--good); fill:var(--good); }
.pcc-wick.is-down, .pcc-candle.is-down{ stroke:var(--danger); fill:var(--danger); }
.pcc-band{ fill:currentColor; opacity:.12; }
.pcc-forecast{ fill:none; stroke:currentColor; stroke-width:2; stroke-dasharray:6 4; opacity:.85; }
.pcc-today{ stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:2 3; }
.pcc-cross{ stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:3 3; }
.pcc-dot{ fill:currentColor; stroke:var(--paper-raised); stroke-width:2; }
.pcc-tip{ position:absolute; top:0; z-index:3; pointer-events:none; background:var(--paper-raised); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); padding:6px 9px; font-size:12.5px; color:var(--ink); white-space:nowrap; transform:translateX(-50%); }
.pcc-tip[hidden]{ display:none; }
.pcc-tip strong{ display:block; font-variant-numeric:tabular-nums; }
.pcc-tip span{ display:block; color:var(--ink-soft); }
.pcc-tip .pcc-tip-avg7{ color:var(--gold); }
.pcc-tip .pcc-tip-low{ color:var(--good); }
.pcc-empty{ color:var(--ink-faint); font-size:13px; margin:8px 0; }
.pcc-c1{ fill:var(--pcc-c1); background:var(--pcc-c1); } .pcc-c2{ fill:var(--pcc-c2); background:var(--pcc-c2); }
.pcc-c3{ fill:var(--pcc-c3); background:var(--pcc-c3); } .pcc-c4{ fill:var(--pcc-c4); background:var(--pcc-c4); }
.pcc-c5{ fill:var(--pcc-c5); background:var(--pcc-c5); } .pcc-c6{ fill:var(--pcc-c6); background:var(--pcc-c6); }
.pcc-c7{ fill:var(--pcc-c7); background:var(--pcc-c7); } .pcc-c8{ fill:var(--pcc-c8); background:var(--pcc-c8); }
.pcc-donut-wrap{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.pcc-donut{ width:190px; height:190px; flex:0 0 auto; }
.pcc-seg{ stroke:var(--paper-raised); stroke-width:1.5; transition:transform .15s ease, opacity .15s ease; transform-origin:100px 100px; }
.pcc-seg.is-hot, .pcc-seg:hover{ transform:scale(1.04); }
.pcc-dc-num{ fill:var(--ink); font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; font-family:var(--font-base); }
.pcc-dc-lbl{ fill:var(--ink-faint); font-size:10.5px; font-family:var(--font-base); }
.pcc-legend{ list-style:none; margin:0; padding:0; flex:1 1 220px; max-width:560px; min-width:0; display:grid; gap:4px; font-size:13px; color:var(--ink); }
.pcc-legend li{ display:grid; grid-template-columns:12px minmax(0,1fr) auto auto; align-items:center; gap:8px; padding:3px 6px; border-radius:6px; }
.pcc-legend li.is-hot{ background:var(--paper-sunken); }
.pcc-sw{ width:12px; height:12px; border-radius:3px; }
.pcc-lname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcc-lval{ color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pcc-lpct{ font-weight:700; font-variant-numeric:tabular-nums; min-width:46px; text-align:right; }
.pcc-spark{ width:80px; height:22px; display:block; }
.pcc-spark path{ fill:none; stroke-width:1.6; stroke-linejoin:round; }
.pcc-spark.is-up path{ stroke:var(--good); }
.pcc-spark.is-down path{ stroke:var(--danger); }

/* ------------------------------------------------------------------
   Darstellungs-Umschalter (Startseite, Wertanalyse)
   ------------------------------------------------------------------ */
.vh-typebar{ display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin:2px 0 10px; }
.vh-typebar-lbl{ font-size:12px; color:var(--ink-faint); margin-right:2px; }
.vh-typebar-sep{ flex:1 1 auto; }
.vh-type-btn{ display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink-soft); font:inherit; font-size:12.5px; cursor:pointer; line-height:1.3; }
.vh-type-btn:hover{ border-color:var(--accent); color:var(--ink); }
.vh-type-btn.is-active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.dash-range.is-disabled{ opacity:.45; pointer-events:none; }
.dash-donut{ min-height:200px; padding:6px 0; }
.dash-donut[hidden], .dash-chart[hidden]{ display:none; }
.dash-va-btn{ white-space:nowrap; }
@media (max-width: 640px){
  .vh-type-txt{ display:none; }
  .vh-type-btn{ padding:6px 10px; font-size:15px; }
}

/* ------------------------------------------------------------------
   Trendfarben, Abzeichen, Signale
   ------------------------------------------------------------------ */
.vh-up{ color:var(--good); }
.vh-down{ color:var(--danger); }
.vh-flat{ color:var(--ink-soft); }
.vh-muted{ color:var(--ink-faint); }
.vh-hint{ font-size:12.5px; color:var(--ink-faint); margin:8px 0 0; line-height:1.45; }
.vh-cm-mark{ font-size:9px; color:var(--ink-faint); margin-left:1px; }
.vh-gem{ font-size:.9em; }
.vh-valuable{ display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.01em;
  color:var(--vh-gold-ink); background:linear-gradient(135deg, var(--vh-gold-1), var(--vh-gold-2)); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 1px 3px rgba(150,100,0,.3); white-space:nowrap; }
.vh-valuable-lg{ font-size:13.5px; padding:4px 12px; }
.vh-valuable-hint{ font-size:12px; color:var(--ink-faint); white-space:nowrap; }
.vh-signal{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; border:1px solid transparent; }
.vh-signal-icon{ font-size:13px; line-height:1; }
.vh-sig-sell{ background:var(--gold-soft); color:var(--gold); border-color:color-mix(in srgb, var(--gold) 40%, transparent); }
.vh-sig-hold{ background:var(--good-soft); color:var(--good); border-color:color-mix(in srgb, var(--good) 35%, transparent); }
.vh-sig-watch{ background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
.vh-sig-buy{ background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 30%, transparent); }
.vh-sig-none{ background:var(--paper-sunken); color:var(--ink-faint); }
.pc-box-badges .vh-signal{ font-size:11.5px; }

/* ------------------------------------------------------------------
   Gewinner & Verlierer (Startseite, Wertanalyse)
   ------------------------------------------------------------------ */
.vh-movers-wrap{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.vh-movers-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.vh-movers-h3{ margin:0; font-size:15px; }
.vh-movers{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.vh-movers-col{ border:1px solid var(--line); border-radius:12px; background:var(--paper-raised); padding:10px 12px 8px; position:relative; overflow:hidden; }
.vh-movers-col::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; }
.vh-movers-col.is-up::before{ background:var(--good); }
.vh-movers-col.is-down::before{ background:var(--danger); }
.vh-movers-head{ display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.vh-movers-icon{ font-size:17px; }
.vh-movers-title{ font-weight:700; }
.vh-movers-period{ font-size:11.5px; padding:1px 7px; border-radius:999px; background:var(--paper-sunken); color:var(--ink-soft); }
.vh-movers-count{ margin-left:auto; font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.vh-movers-col.is-up .vh-movers-count::before{ content:"▲ "; color:var(--good); }
.vh-movers-col.is-down .vh-movers-count::before{ content:"▼ "; color:var(--danger); }
.vh-movers-empty{ color:var(--ink-faint); font-size:13px; margin:8px 0 6px; }
.vh-movers-list{ list-style:none; margin:0; padding:0; }
.vh-movers-list li + li{ border-top:1px solid var(--line); }
.vh-mover{ display:grid; grid-template-columns:20px 34px minmax(0,1fr) auto; align-items:center; gap:9px; padding:6px 2px; color:inherit; text-decoration:none; border-radius:8px; }
.vh-mover:hover{ background:var(--paper-sunken); }
.vh-mover-rank{ font-weight:700; color:var(--ink-faint); text-align:center; font-variant-numeric:tabular-nums; }
.vh-mover-img img{ width:34px; height:47px; object-fit:cover; border-radius:3px; display:block; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.vh-mover-body{ min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.vh-mover-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vh-mover-meta{ font-size:11.5px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vh-mover-prices{ font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.vh-mover-delta{ text-align:right; display:flex; flex-direction:column; line-height:1.25; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vh-mover-pct{ font-size:11.5px; }
.vh-src-note{ font-size:12px; color:var(--ink-faint); margin:8px 0 0; }
.vh-movers-foot{ font-size:12.5px; color:var(--ink-faint); margin:8px 0 0; }
@media (max-width: 760px){
  .vh-movers{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------------
   Kartenseite: Box „Wert & Preise“ und Wertvoll-Kennzeichnung
   ------------------------------------------------------------------ */
.vh-img-valuable{ position:relative; border-radius:14px; padding:4px; background:linear-gradient(135deg, var(--vh-gold-1), var(--vh-gold-2) 45%, var(--vh-gold-1) 70%, var(--vh-gold-2));
  box-shadow:0 0 0 1px rgba(150,100,0,.25), 0 6px 22px -6px rgba(201,150,43,.65); }
.vh-img-valuable img{ border-radius:10px; }
.vh-img-ribbon{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); padding:3px 12px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap;
  color:var(--vh-gold-ink); background:linear-gradient(135deg, var(--vh-gold-1), var(--vh-gold-2)); box-shadow:0 2px 6px rgba(120,80,0,.35); pointer-events:none; }
.vh-box-valuable > .pc-box-head{ background:linear-gradient(90deg, color-mix(in srgb, var(--vh-gold-1) 22%, transparent), transparent 60%); }
.vh-card-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 14px; align-items:start; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--paper-sunken); margin-bottom:10px; }
.vh-card-head.is-valuable{ border-color:color-mix(in srgb, var(--vh-gold-2) 60%, transparent); background:linear-gradient(135deg, color-mix(in srgb, var(--vh-gold-1) 20%, var(--paper-raised)), var(--paper-raised) 65%); }
.vh-card-now{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.vh-card-lbl{ font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); }
.vh-card-num{ font-size:28px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1; }
.vh-card-sub{ font-size:13px; color:var(--ink-soft); }
.vh-card-side{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.vh-chips{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; }
.vh-chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:8px; background:var(--paper-raised); border:1px solid var(--line); font-size:12.5px; font-variant-numeric:tabular-nums; }
.vh-chip b{ color:var(--ink-faint); font-weight:600; }
.vh-card-chartbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:4px 0 6px; }
.vh-toggle{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--ink-soft); cursor:pointer; }
.vh-card-chart{ height:200px; margin-bottom:2px; }
.vh-card-histnote{ margin:4px 0 12px; }
#priceTabHistory:checked ~ .price-tab-nav label[for="priceTabHistory"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
#priceTabHistory:checked ~ #pricePanelHistory{ display:block; }
.vh-analysis-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.vh-analysis-col .kv{ gap:10px; }
.vh-signal-block{ border-radius:12px; padding:10px 12px; border:1px solid var(--line); }
.vh-signal-block.vh-sig-sell{ background:var(--gold-soft); }
.vh-signal-block.vh-sig-hold{ background:var(--good-soft); }
.vh-signal-block.vh-sig-watch{ background:var(--accent-soft); }
.vh-signal-block.vh-sig-buy{ background:var(--danger-soft); }
.vh-signal-block.vh-sig-none{ background:var(--paper-sunken); }
.vh-signal-big{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:16px; color:var(--ink); }
.vh-signal-big-icon{ font-size:22px; }
.vh-reasons{ margin:6px 0 0; padding-left:20px; font-size:13px; color:var(--ink-soft); }
.vh-forecast{ display:grid; gap:6px; }
.vh-fc-row{ display:grid; grid-template-columns:90px minmax(0,1fr); gap:2px 10px; padding:7px 10px; border-radius:10px; background:var(--paper-sunken); border:1px solid var(--line); }
.vh-fc-lbl{ font-size:12px; color:var(--ink-faint); grid-row:span 2; align-self:center; }
.vh-fc-val{ font-variant-numeric:tabular-nums; }
.vh-fc-range{ font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.vh-alert-form{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; padding:10px 12px; border-radius:12px; border:1px dashed var(--line); background:var(--paper-raised); }
.vh-alert-lbl{ font-weight:600; font-size:13.5px; }
.vh-alert-input{ display:inline-flex; align-items:center; gap:4px; }
.vh-alert-input input{ width:96px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); font:inherit; font-variant-numeric:tabular-nums; }
.vh-alert-form [hidden]{ display:none; }
.vh-alert-state{ font-size:12.5px; color:var(--ink-soft); }
.vh-alert-state.is-reached{ color:var(--good); font-weight:700; }
.vh-alert-state.is-error{ color:var(--danger); }
@media (max-width: 720px){
  .vh-analysis-grid{ grid-template-columns:1fr; }
  .vh-card-head{ grid-template-columns:1fr; }
  .vh-card-side{ align-items:flex-start; flex-direction:row; flex-wrap:wrap; }
  .vh-card-num{ font-size:24px; }
}

/* ------------------------------------------------------------------
   Seite „Wertanalyse“
   ------------------------------------------------------------------ */
.vh-total-chart{ height:260px; }
.vh-total-chart[hidden], .vh-total-donut[hidden]{ display:none; }
.vh-total-donut{ min-height:200px; }
.vh-alarm-box{ margin:0 0 14px; padding:10px 14px; border-radius:12px; border:1px solid var(--good); background:var(--good-soft); }
.vh-alarm-box[hidden]{ display:none; }
.vh-alarm-head{ margin-bottom:6px; }
.vh-alarm-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.vh-alarm-list li{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.vh-alarm-list li a{ font-weight:700; }
.vh-signal-tiles{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; }
.vh-signal-tile{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border-radius:12px; border:1px solid var(--line); font:inherit; cursor:pointer; color:var(--ink); }
.vh-signal-tile:hover{ transform:translateY(calc(-1px * var(--hover-lift, 1))); box-shadow:var(--shadow); }
.vh-signal-tile-icon{ font-size:22px; line-height:1; }
.vh-signal-tile-num{ font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; }
.vh-signal-tile-lbl{ font-size:12px; color:var(--ink-soft); text-align:center; }
.vh-rules{ margin-top:10px; font-size:13px; }
.vh-rules summary{ cursor:pointer; color:var(--ink-soft); }
.vh-rules ul{ margin:8px 0 0; padding-left:20px; display:grid; gap:4px; }
.va-filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.va-filters .form-input{ width:auto; flex:0 1 auto; min-width:0; }
.va-filters input[type="search"]{ flex:1 1 220px; }
.va-check{ display:inline-flex; align-items:center; gap:5px; font-size:13px; white-space:nowrap; }
.va-table-wrap{ overflow-x:auto; margin-top:8px; border:1px solid var(--line); border-radius:12px; }
.va-table{ width:100%; border-collapse:collapse; font-size:13px; }
.va-table th{ position:sticky; top:0; background:var(--paper-sunken); text-align:left; font-weight:600; font-size:12px; color:var(--ink-soft); padding:8px 8px; white-space:nowrap; border-bottom:1px solid var(--line); }
.va-table th[data-sort]{ cursor:pointer; user-select:none; }
.va-table th[data-sort]::after{ content:" ↕"; opacity:.35; font-size:11px; }
.va-table th.is-sorted[aria-sort="ascending"]::after{ content:" ▲"; opacity:1; color:var(--accent); }
.va-table th.is-sorted[aria-sort="descending"]::after{ content:" ▼"; opacity:1; color:var(--accent); }
.va-table td{ padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.va-table tr:last-child td{ border-bottom:none; }
.va-table tr[hidden]{ display:none; }
.va-table tr:hover td{ background:var(--paper-sunken); }
.va-table tr.is-valuable td:first-child{ box-shadow:inset 3px 0 0 var(--vh-gold-2); }
.va-table .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.va-table .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.va-card{ display:flex; align-items:center; gap:9px; min-width:200px; }
.va-thumb img{ width:30px; height:42px; object-fit:cover; border-radius:3px; display:block; }
.va-card-text{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.va-name{ font-weight:600; }
.va-sub{ font-size:11.5px; color:var(--ink-faint); }
.va-hilo{ font-size:12px; line-height:1.25; }
.va-spark-col{ width:88px; }
/* Cardmarket-Symbol vor der Lupe (10.10.2026) */
.va-acts{ white-space:nowrap; }
.va-act-row{ display:inline-flex; gap:4px; align-items:center; }
.va-cm-link{ color:var(--accent); }
.va-pager{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin-top:10px; }
.va-pager .btn.is-active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.va-pager-gap{ padding:0 4px; color:var(--ink-faint); align-self:center; }
.vh-alert-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.vh-alert-list li{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(80px,1fr) auto; align-items:center; gap:10px; font-size:13px; }
.vh-alert-list li.is-reached a{ color:var(--good); }
.vh-alert-bar{ height:8px; border-radius:4px; background:var(--paper-sunken); border:1px solid var(--line); overflow:hidden; }
.vh-alert-bar span{ display:block; height:100%; background:var(--accent); }
.vh-alert-list li.is-reached .vh-alert-bar span{ background:var(--good); }
.vh-dist-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.vh-dist-h{ margin:0 0 8px; font-size:14px; }
.vh-dist-grid .pcc-donut-wrap{ flex-direction:column; align-items:stretch; }
.vh-dist-grid .pcc-legend{ flex:0 0 auto; max-width:none; }
.va-name-line{ display:block; }
.dash-value .dash-value-recnote{ font-size:12px; margin:4px 0 0; color:var(--ink-faint); }
.vh-dist-grid .pcc-donut{ align-self:center; }
.vh-disclaimer{ margin-top:16px; text-align:center; }
@media (max-width: 1100px){
  .vh-dist-grid{ grid-template-columns:1fr; }
  .vh-dist-grid .pcc-donut-wrap{ flex-direction:row; align-items:center; }
}
@media (max-width: 720px){
  .vh-signal-tiles{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .vh-alert-list li{ grid-template-columns:1fr auto; }
  .vh-alert-list li .vh-alert-bar{ grid-column:1 / -1; }
  .vh-total-chart{ height:220px; }
  .va-spark-col{ display:none; }
}

/* ------------------------------------------------------------------
   Wertabruf: neu gegliederte Ergebnisbox (valuerefresh.js)
   ------------------------------------------------------------------ */
.vr-result{ padding:12px 14px; }
.vr-res-head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.vr-res-icon{ width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:#fff; background:var(--good); flex:0 0 auto; }
.vr-result-warn .vr-res-icon{ background:var(--gold); }
.vr-res-title{ font-size:16px; }
.vr-res-chip{ margin-left:auto; font-size:12px; padding:2px 9px; border-radius:999px; background:var(--paper-raised); border:1px solid var(--line); color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.vr-res-note{ margin:0 0 8px; font-size:13px; }
.vr-res-value{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding:10px 12px; border-radius:10px; background:var(--paper-raised); border:1px solid var(--line); }
.vr-res-col{ display:flex; flex-direction:column; line-height:1.2; }
.vr-res-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); }
.vr-res-num{ font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-soft); }
.vr-res-num.vr-res-big{ font-size:22px; font-weight:800; color:var(--ink); }
.vr-res-arrow{ color:var(--ink-faint); font-size:18px; }
.vr-res-delta{ margin-left:auto; padding:4px 10px; border-radius:999px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vr-res-delta.up{ background:var(--good-soft); color:var(--good); border:1px solid color-mix(in srgb, var(--good) 35%, transparent); }
.vr-res-delta.down{ background:var(--danger-soft); color:var(--danger); border:1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.vr-res-delta.flat{ background:var(--paper-sunken); color:var(--ink-soft); }
.vr-res-delta small{ font-weight:600; opacity:.85; }
.vr-res-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.vr-res-pill{ font-size:12.5px; padding:3px 10px; border-radius:999px; background:var(--paper-raised); border:1px solid var(--line); }
.vr-res-pill.ok{ color:var(--good); }
.vr-res-pill.info{ color:var(--ink-soft); }
.vr-res-pill.bad{ color:var(--danger); }
.vr-res-movers{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:10px; }
.vr-res-movers-col{ background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; padding:8px 10px; min-width:0; }
.vr-res-movers-col.up{ border-left:3px solid var(--good); }
.vr-res-movers-col.down{ border-left:3px solid var(--danger); }
.vr-res-mtitle{ display:block; font-weight:700; font-size:12.5px; margin-bottom:4px; }
.vr-res-mnone{ font-size:12px; color:var(--ink-faint); }
.vr-res-mrow{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 8px; padding:3px 0; color:inherit; text-decoration:none; font-size:12.5px; border-top:1px solid var(--line); }
.vr-res-mrow:first-of-type{ border-top:none; }
.vr-res-mname{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vr-res-mval{ grid-column:1; font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.vr-res-mdelta{ grid-column:2; grid-row:1 / span 2; align-self:center; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vr-res-movers-col.up .vr-res-mdelta{ color:var(--good); }
.vr-res-movers-col.down .vr-res-mdelta{ color:var(--danger); }
.vr-res-mdelta small{ display:block; font-weight:600; font-size:11px; }
.vr-res-foot{ margin:8px 0 0; font-size:12px; color:var(--ink-faint); }
@media (max-width: 520px){
  .vr-res-movers{ grid-template-columns:1fr; }
  .vr-res-delta{ margin-left:0; }
}

/* ==================================================================
   Wertabruf-Protokoll, Ergebnis-Lightbox und Cardmarket-Sprachauswahl
   (14.10.2026) — includes/value_protocol_view.php, assets/valuerefresh.js,
   assets/cardmarket.js
   ================================================================== */
:root{ --vp-info:#2F6FB0; --vp-info-soft:#E3EDF8; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --vp-info:#7FB0E8; --vp-info-soft:#1C2A3D; } }
:root[data-theme="dark"]{ --vp-info:#7FB0E8; --vp-info-soft:#1C2A3D; }

/* Kästchen im Abruf-Fenster als Knöpfe */
.vr-stats .vr-stat{ display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:8px; align-items:center;
  text-align:left; background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; padding:8px 10px; cursor:pointer;
  font:inherit; color:var(--ink); transition:border-color .15s, box-shadow .15s, transform .15s; }
.vr-stats .vr-stat:hover:not(:disabled){ border-color:currentColor; box-shadow:0 4px 14px -8px rgba(0,0,0,.35); transform:translateY(-1px); }
.vr-stats .vr-stat:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.vr-stats .vr-stat:disabled{ cursor:default; opacity:.75; }
.vr-stat-icon{ grid-row:1 / span 2; width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.vr-stat-ok .vr-stat-icon{ background:var(--good); }
.vr-stat-info .vr-stat-icon{ background:var(--vp-info); }
.vr-stat-bad .vr-stat-icon{ background:var(--danger); }
.vr-stat.is-empty .vr-stat-icon{ background:var(--ink-faint); }
.vr-stat-label{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em; line-height:1.2; }
.vr-stat-num{ grid-column:2; font-family:var(--font-mono); font-size:17px; font-weight:700; }
.vr-stat-go{ grid-column:3; grid-row:1 / span 2; color:var(--ink-faint); }
.vr-stat:disabled .vr-stat-go{ visibility:hidden; }

/* Ergebnis-Lightbox */
.vr-items-panel{ width:min(760px, calc(100vw - 32px)); max-height:min(86vh, 860px); display:flex; flex-direction:column; }
.vr-items-title{ display:flex; align-items:center; gap:8px; margin:0 0 2px; }
.vr-items-sub{ margin:0 0 10px; }
.vr-items-tools{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0 8px; }
.vr-items-search{ display:flex; align-items:center; gap:6px; flex:1 1 220px; color:var(--ink-faint); }
.vr-items-search input{ flex:1; min-width:0; }
.vr-items-trend{ display:flex; flex-wrap:wrap; gap:4px; }
.vr-items-trend[hidden]{ display:none; }
.vr-items-trend .btn.is-active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.vr-items-list{ flex:1 1 auto; min-height:120px; overflow-y:auto; border:1px solid var(--line); border-radius:10px; background:var(--paper-raised); }
.vr-items-list.is-loading{ opacity:.55; }
.vr-items-list .pc-empty{ margin:16px; }
.vri-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:8px 10px; border-bottom:1px solid var(--line); }
.vri-row:last-child{ border-bottom:0; }
.vri-row:nth-child(even){ background:var(--paper); }
.vri-icon{ width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.vri-icon svg{ width:15px; height:15px; }
.vri-ok .vri-icon{ background:var(--good); }
.vri-info .vri-icon{ background:var(--vp-info); }
.vri-bad .vri-icon{ background:var(--danger); }
.vri-main{ min-width:0; display:flex; flex-direction:column; }
.vri-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vri-meta{ font-size:12px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vri-note{ font-size:12px; color:var(--ink-faint); }
.vri-vals{ display:flex; align-items:baseline; gap:6px; font-variant-numeric:tabular-nums; white-space:nowrap; font-size:13.5px; }
.vri-before{ color:var(--ink-soft); }
.vri-arrow{ color:var(--ink-faint); }
.vri-delta{ font-size:12px; font-weight:600; }
.vri-acts{ display:flex; gap:4px; }
.vr-items-pager{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px; }
.vr-items-pager .btn svg{ width:13px; height:13px; vertical-align:-2px; }
.vr-items-foot{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
@media (max-width:640px){
  .vri-row{ grid-template-columns:auto minmax(0,1fr) auto; }
  .vri-vals{ grid-column:2 / span 2; grid-row:2; }
  .vri-acts{ grid-column:3; grid-row:1; }
}

/* Reiter (Protokollseite und Lightbox) */
.vp-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 4px; }
.vp-tab{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; border:1px solid var(--line);
  background:var(--paper-raised); color:var(--ink); font:inherit; font-size:13px; text-decoration:none; cursor:pointer; }
.vp-tab:hover{ border-color:var(--accent); }
.vp-tab-n{ font-family:var(--font-mono); font-size:11.5px; font-weight:700; padding:1px 7px; border-radius:999px; background:var(--paper-sunken); }
.vp-tab.is-active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.vp-tab.is-active .vp-tab-n{ background:rgba(255,255,255,.22); color:inherit; }
.vp-tab-ok svg{ color:var(--good); } .vp-tab-info svg{ color:var(--vp-info); } .vp-tab-bad svg{ color:var(--danger); }
.vp-tab.is-active svg{ color:inherit; }

/* Protokollseite */
.vp-kind{ display:inline-flex; color:var(--accent); vertical-align:-2px; margin-right:2px; }
.vp-badge{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px; }
.vp-badge.vp-ok{ background:var(--good-soft); color:var(--good); }
.vp-badge.vp-info{ background:var(--vp-info-soft); color:var(--vp-info); }
.vp-badge.vp-bad{ background:var(--danger-soft); color:var(--danger); }
.vp-kpis{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:8px; margin:4px 0 6px; }
.vp-kpi{ display:flex; gap:10px; align-items:center; padding:9px 11px; border-radius:10px; border:1px solid var(--line); background:var(--paper-raised); }
.vp-kpi-icon{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:var(--ink-soft); }
.vp-kpi-ok .vp-kpi-icon{ background:var(--good); }
.vp-kpi-info .vp-kpi-icon{ background:var(--vp-info); }
.vp-kpi-bad .vp-kpi-icon{ background:var(--danger); }
.vp-kpi-value .vp-kpi-icon{ background:var(--accent); }
.vp-kpi-text{ display:flex; flex-direction:column; min-width:0; }
.vp-kpi-label{ font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); }
.vp-kpi-num{ font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; }
.vp-kpi-sub{ font-size:11.5px; color:var(--ink-soft); }
.vp-note{ display:flex; gap:6px; align-items:center; margin:6px 0 0; }
.vp-table .vp-col-st{ width:34px; }
.vp-st{ width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.vp-st.vp-ok{ background:var(--good); } .vp-st.vp-info{ background:var(--vp-info); } .vp-st.vp-bad{ background:var(--danger); }
.vp-sub{ display:block; font-size:11.5px; color:var(--ink-faint); font-family:var(--font-mono); }
.vp-note-cell{ font-size:12.5px; color:var(--ink-soft); max-width:320px; }
.vp-help{ margin:0; padding-left:0; list-style:none; display:grid; gap:8px; }
/* Fix 16.10.2026 (Eintrag 147): früher display:flex — dadurch zerfiel jeder Satz mit <b>/Betrag in einzelne Spalten.
   Jetzt normaler Textfluss, das Symbol steht links davor. */
.vp-help li{ display:block; position:relative; padding-left:24px; line-height:1.45; }
.vp-help li > svg:first-child{ position:absolute; left:0; top:3px; color:var(--accent); }
.vh-flat{ color:var(--ink-soft); }

/* Cardmarket-Sprachauswahl */
.cm-link svg{ flex:0 0 auto; }
.cm-menu{ position:absolute; z-index:10050; background:var(--paper-raised); color:var(--ink); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.45); padding:8px; font-size:13.5px; }
.cm-menu-head{ display:flex; flex-direction:column; padding:4px 6px 8px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.cm-menu-head span{ font-weight:700; }
.cm-menu-head small{ color:var(--ink-soft); }
.cm-menu-group{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin:8px 6px 4px; }
.cm-menu-hint{ margin:4px 6px; font-size:12px; color:var(--ink-soft); }
.cm-menu-item{ display:flex; gap:8px; align-items:center; padding:7px 8px; border-radius:8px; color:inherit; text-decoration:none; }
.cm-menu-item:hover, .cm-menu-item:focus-visible{ background:var(--accent-soft); outline:none; }
.cm-menu-flag{ font-size:17px; line-height:1; }
.cm-menu-label{ display:flex; flex-direction:column; }
.cm-menu-label small{ color:var(--ink-soft); font-size:11.5px; }
.cm-menu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0 2px 4px; }
.cm-menu-chip{ display:flex; gap:6px; align-items:center; padding:5px 7px; border-radius:8px; border:1px solid var(--line); color:inherit; text-decoration:none; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-menu-chip:hover, .cm-menu-chip:focus-visible{ border-color:var(--accent); background:var(--accent-soft); outline:none; }
.vp-run .filter-rail{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:10px; }
.vp-run .filter-rail .field{ flex:1 1 160px; width:auto; min-width:0; }
.vp-run .filter-rail .field:first-of-type{ flex:3 1 260px; }
.vp-run .filter-rail .field:has(> button), .vp-run .filter-rail .field:has(> a.btn){ flex:0 0 auto; }
.vp-run .sr-only, .vr-items-panel .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ===================================================================
   Preisprüfung (21.10.2026, includes/price_fix_view.php): Hinweis in
   „Wert & Preise“, Fenster mit Cardmarket-Rohdaten, Prüfliste.
   =================================================================== */
.pf-card-note{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 14px; padding:10px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--paper-sunken); font-size:13.5px; line-height:1.45; }
.pf-card-note.is-fixed{ border-color:color-mix(in srgb, var(--good) 45%, var(--line)); background:var(--good-soft); }
.pf-card-note.is-open{ border-color:color-mix(in srgb, var(--gold) 55%, var(--line)); background:var(--gold-soft); }
.pf-card-note.is-quiet{ padding:6px 12px; font-size:12.5px; color:var(--ink-soft); }
.pf-card-note-txt{ flex:1 1 260px; min-width:0; }
.pf-panel{ width:min(880px, 96vw); }
.pf-panel h3{ margin:0 0 10px; }
.pf-panel h4{ margin:16px 0 8px; font-size:14.5px; }
.pf-status{ margin:0 0 10px; padding:9px 12px; border-radius:10px; background:var(--paper-sunken); font-size:13.5px; line-height:1.45; }
.pf-status.is-fixed{ background:var(--good-soft); }
.pf-status.is-open{ background:var(--gold-soft); }
.pf-raw{ font-size:12.5px; }
.pf-raw td, .pf-raw th{ white-space:nowrap; }
.pf-raw tr.pf-hl td{ background:var(--good-soft); font-weight:600; }
.pf-binder{ margin:10px 0 0; font-size:13px; }
.pf-cands{ margin:0; padding-left:18px; display:grid; gap:6px; font-size:13px; }
.pf-cands li{ line-height:1.5; }
.pf-inline-form{ display:inline-flex; align-items:center; gap:6px; margin:0; }
.pf-actions{ gap:8px; align-items:center; }
.pf-pid{ width:180px; max-width:100%; }
.pf-badge{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap;
  background:var(--paper-sunken); color:var(--ink-soft); }
.pf-badge.pf-bad{ background:var(--danger-soft); color:var(--danger); }
.pf-badge.pf-warn{ background:var(--gold-soft); color:var(--gold); }
.pf-badge.pf-ok{ background:var(--good-soft); color:var(--good); }
.pf-mode{ margin:0 0 12px; font-size:13.5px; color:var(--ink-soft); }
.pf-tabs{ margin-bottom:14px; }
.pf-table .pf-col-chk{ width:28px; text-align:center; }
.pf-table td{ vertical-align:top; }
.pf-table td.num{ white-space:nowrap; }
.pf-strike{ color:var(--ink-faint); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--danger) 60%, transparent); }
.pf-bulk{ margin-top:10px; gap:8px; align-items:center; }
#liste .run-items-scroll{ position:relative; }
.pf-table .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#liste .filter-rail{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:10px; }
#liste .filter-rail .field{ flex:1 1 160px; width:auto; min-width:0; }
#liste .filter-rail .field:first-of-type{ flex:3 1 260px; }
#liste .filter-rail .field:has(> button), #liste .filter-rail .field:has(> a.btn){ flex:0 0 auto; }
@media (max-width:640px){
  .pf-card-note{ font-size:13px; }
  .pf-raw{ font-size:12px; }
}
.pf-revert-form{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-top:8px; }
.pf-check{ display:inline-flex; gap:6px; align-items:center; font-size:13.5px; }
.pf-paused{ margin-bottom:12px; }
/* Preisprüfung: Live-Prüfung der Produkt-ID + billige Doppelte (Eintrag 156) */
.pf-pid-live{ margin:8px 0 0; padding:8px 12px; border-radius:10px; font-size:13px; line-height:1.5; background:var(--paper-sunken); overflow-wrap:anywhere; }
.pf-pid-live.is-ok{ background:var(--good-soft); }
.pf-pid-live.is-warn{ background:var(--gold-soft); }
.pf-pid-live.is-bad{ background:var(--danger-soft); }
.pf-pid-live.is-quiet{ color:var(--ink-soft); }
.pf-fetch-set{ margin:8px 0 0; }
.pf-cheap{ display:block; margin-top:2px; font-size:11.5px; color:var(--ink-soft); }