.history-page .page-shell{width:min(1320px,calc(100% - 56px));margin:0 auto}
.history-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;padding:48px 0 30px}
.history-hero h1{max-width:780px;margin:8px 0 13px;font-size:clamp(42px,5vw,64px);line-height:1;letter-spacing:-.052em}
.history-hero p{margin:0;color:var(--color-text-secondary);font-size:16px}
.history-meta{display:grid;grid-template-columns:auto auto;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:rgba(255,255,255,.018)}
.history-meta>div{min-width:165px;padding:13px 16px}.history-meta>div+div{border-left:1px solid var(--color-border)}
.history-meta span,.history-meta strong{display:block;font-family:var(--font-mono)}.history-meta span{margin-bottom:4px;color:var(--color-text-muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.history-meta strong{font-size:12px}
.history-panel{margin-top:16px;padding:22px;border:1px solid var(--color-border);border-radius:var(--radius-xl);background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.012));box-shadow:var(--shadow-card)}
.panel-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--color-border)}
.panel-heading h2{margin:5px 0 0;font-size:25px;line-height:1;letter-spacing:-.03em}.history-button{appearance:none;padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-soft);color:var(--color-text-secondary);font:700 12px var(--font-sans);cursor:pointer}.history-button:hover{color:var(--color-text);border-color:var(--color-border-strong);background:var(--color-surface-hover)}
.filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.filter-grid label,.custom-range label{display:grid;gap:7px}.filter-grid label>span,.custom-range label>span,.filter-label{color:var(--color-text-muted);font:700 10.5px var(--font-mono);letter-spacing:.07em;text-transform:uppercase}
.filter-grid select,.custom-range input{width:100%;min-height:42px;padding:9px 11px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#0b1118;color:var(--color-text);font:650 13px var(--font-sans);outline:none}.filter-grid select:focus,.custom-range input:focus{border-color:rgba(105,201,245,.45);box-shadow:0 0 0 3px rgba(105,201,245,.07)}
.custom-range{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}.custom-range[hidden]{display:none}
.app-picker-wrap{margin-top:17px;padding-top:16px;border-top:1px solid var(--color-border)}.app-picker-wrap[hidden]{display:none}.app-picker{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}.app-chip{position:relative}.app-chip input{position:absolute;opacity:0;pointer-events:none}.app-chip span{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--color-border);border-radius:999px;color:var(--color-text-muted);background:rgba(255,255,255,.015);font:650 11.5px var(--font-sans);cursor:pointer}.app-chip span::before{content:"";width:6px;height:6px;border-radius:50%;background:#5d6978}.app-chip input:checked+span{color:var(--color-text);border-color:rgba(105,201,245,.28);background:rgba(105,201,245,.07)}.app-chip input:checked+span::before{background:var(--color-accent);box-shadow:0 0 0 4px rgba(105,201,245,.07)}
.chart-panel{padding-bottom:18px}.chart-heading{margin-bottom:8px}.resolution-pill{padding:5px 8px;border:1px solid var(--color-border);border-radius:var(--radius-xs);color:var(--color-text-muted);font:700 10.5px var(--font-mono)}
.chart-wrap{position:relative;min-height:390px;overflow:hidden}.history-chart{display:block;width:100%;height:auto;min-height:340px}.history-chart .grid{stroke:rgba(255,255,255,.065);stroke-width:1}.history-chart .axis-label{fill:#718095;font:11px var(--font-mono)}.history-chart .series-line{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}.history-chart .series-area{opacity:.07}.history-chart .crosshair{stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:3 4}.history-chart .hitbox{fill:transparent;cursor:crosshair}
.chart-tooltip{position:absolute;z-index:5;min-width:170px;max-width:280px;padding:9px 10px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:rgba(8,12,18,.96);box-shadow:var(--shadow-card);pointer-events:none;font:11px var(--font-mono)}.chart-tooltip strong{display:block;margin-bottom:6px;color:var(--color-text);font-size:11px}.chart-tooltip span{display:flex;justify-content:space-between;gap:14px;color:var(--color-text-secondary);margin-top:3px}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;min-height:24px;padding:8px 4px 0}.legend-item{display:inline-flex;align-items:center;gap:7px;color:var(--color-text-secondary);font:11px var(--font-mono)}.legend-dot{width:8px;height:8px;border-radius:2px;background:var(--legend-color)}
.history-message{display:none;margin:12px 0;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:13px}.history-message.visible{display:block}.history-message.error{border-color:rgba(237,119,119,.25);background:var(--color-danger-soft);color:#efb0b0}
.single-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;padding:1px;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-border-strong)}.single-stats article{padding:17px 18px;background:#0c121a}.single-stats span,.single-stats strong{display:block}.single-stats span{color:var(--color-text-muted);font:700 10px var(--font-mono);text-transform:uppercase;letter-spacing:.07em}.single-stats strong{margin-top:7px;font:680 24px var(--font-mono);letter-spacing:-.035em}
.comparison-wrap{overflow:auto}.comparison-table{width:100%;border-collapse:collapse;min-width:620px}.comparison-table th,.comparison-table td{padding:11px 12px;border-bottom:1px solid var(--color-border);text-align:right;font:12px var(--font-mono)}.comparison-table th:first-child,.comparison-table td:first-child{text-align:left}.comparison-table th{color:var(--color-text-muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}.comparison-table td:first-child{color:var(--color-text);font-family:var(--font-sans);font-weight:700}
@media(max-width:900px){.history-page .page-shell{width:min(100% - 36px,1320px)}.history-hero{align-items:flex-start;flex-direction:column}.history-meta{width:100%}.filter-grid{grid-template-columns:1fr 1fr}.filter-grid>label:last-of-type{grid-column:1/-1}.single-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.history-page .page-shell{width:min(100% - 28px,1320px)}.history-hero{padding-top:32px}.history-hero h1{font-size:40px}.history-meta{grid-template-columns:1fr}.history-meta>div+div{border-left:0;border-top:1px solid var(--color-border)}.filter-grid,.custom-range{grid-template-columns:1fr}.filter-grid>label:last-of-type{grid-column:auto}.history-panel{padding:16px}.chart-wrap{min-height:310px}.history-chart{min-height:300px}.single-stats{grid-template-columns:1fr 1fr}.panel-heading{align-items:flex-start}.resolution-pill{margin-top:2px}}

.history-page [hidden]{display:none!important}


/* v12.1 — sortierbare Vergleichstabelle */
.comparison-table th { padding: 0; }
.table-sort {
  width: 100%;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  font: 700 10px var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.comparison-table th:first-child .table-sort { justify-content: flex-start; }
.table-sort:hover {
  color: var(--color-text);
  background: rgba(255,255,255,.025);
}
.table-sort:focus-visible { outline-offset: -2px; }
.sort-indicator {
  width: 12px;
  display: inline-block;
  color: #566578;
  font-size: 11px;
  text-align: center;
}
.comparison-table th[aria-sort="ascending"] .table-sort,
.comparison-table th[aria-sort="descending"] .table-sort,
.comparison-table th[aria-sort="ascending"] .sort-indicator,
.comparison-table th[aria-sort="descending"] .sort-indicator {
  color: var(--color-accent);
}