:root{--ink:#172c3b;--muted:#61717c;--teal:#087f83;--gold:#b77d25;--red:#b74d46;--line:#dce3e5;--paper:#f5f7f6;--white:#fff}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}header{background:#142d3d;color:#fff;padding:22px max(5vw,20px);display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:16px;align-items:center;font-size:18px;font-weight:650;letter-spacing:-.4px}.mark{font-size:29px;border-right:1px solid #5b717d;padding-right:20px}.mark span{color:#50c3bf}.brand small{display:block;font-size:10px;letter-spacing:2px;color:#afc8d4;margin-top:3px}.local{font-size:12px;color:#9be1ce;border:1px solid #44616b;padding:5px 12px;border-radius:30px}main{max-width:1480px;margin:auto;padding:0 5vw}.intro{padding:54px 0 28px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--teal);font-weight:750;margin:0 0 12px}h1{font-size:clamp(32px,4.5vw,58px);line-height:1.1;letter-spacing:-2px;margin:12px 0 20px;font-weight:650}h2{font-size:clamp(22px,2.5vw,30px);line-height:1.2;letter-spacing:-.8px;margin:0 0 12px}h3{font-size:18px;letter-spacing:-.3px}.lead{color:var(--muted);max-width:690px;font-size:17px}.dataset{display:flex;flex-wrap:wrap;gap:7px 22px;font-size:12px;color:var(--muted);padding:20px 0}.dataset span:before{content:'·';color:var(--gold);margin-right:10px}.method-note{background:#fff7e8;border-left:3px solid var(--gold);padding:15px 20px;font-size:13px;border-radius:0 6px 6px 0}.method-note strong{display:inline;color:#75521d;margin-right:8px}.toolbar{margin:28px 0 22px;display:flex;gap:18px;align-items:end;flex-wrap:wrap}.toolbar p{margin:auto 0 auto auto;font-size:13px;color:var(--muted)}label{display:block;color:var(--muted);font-size:11px;font-weight:650}select,input{display:block;border:1px solid #c6d1d5;border-radius:6px;padding:10px 30px 10px 12px;background:#fff;color:var(--ink);font:inherit;font-size:13px;min-height:42px;margin-top:5px;max-width:100%}input{padding-right:10px;min-width:240px}button{font:inherit;cursor:pointer;border-radius:6px;min-height:40px;font-size:12px;padding:9px 14px}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #329fa7;outline-offset:3px}.quiet{background:none;border:1px solid var(--line);color:var(--muted)}.primary{background:var(--teal);color:#fff;border:0}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 30px}.kpi{padding:20px;background:var(--white);border:1px solid var(--line);border-radius:9px}.kpi small{color:var(--muted);font-size:11px;font-weight:600}.kpi strong{display:block;font-size:29px;letter-spacing:-1px;margin:4px 0;color:var(--teal)}.kpi .adverse{color:var(--red)}.kpi p{font-size:11px;color:var(--muted);margin:0}.tabs{display:flex;gap:3px;overflow:auto;border-bottom:1px solid var(--line);margin-bottom:24px}.tabs button{background:none;border:0;color:var(--muted);border-radius:0;border-bottom:3px solid transparent;white-space:nowrap;padding:14px 18px}.tabs button[aria-selected=true]{border-color:var(--teal);color:var(--teal);font-weight:700}.panel{display:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px;min-width:0}.panel.active{display:block}.section-head{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}.controls{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.muted{color:var(--muted);font-size:13px}.chart{width:100%;margin:20px 0;min-height:150px}.chart svg{display:block;width:100%;height:auto;overflow:visible}.chart text{font-family:inherit}.legend{display:flex;gap:20px;font-size:12px;color:var(--muted);flex-wrap:wrap}.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}details{border-top:1px solid var(--line);margin:24px 0;padding:16px 0}summary{cursor:pointer;font-size:13px;color:var(--teal);font-weight:650}.table-scroll{max-width:100%;overflow:auto;max-height:500px;border:1px solid var(--line);border-radius:7px}table{border-collapse:collapse;width:100%;font-size:12px;text-align:right;font-variant-numeric:tabular-nums}th{background:#edf3f3;color:#506470;position:sticky;top:0;z-index:1;font-size:10px;letter-spacing:.3px;white-space:nowrap}th,td{padding:11px 13px;border-bottom:1px solid #e9eeee;white-space:nowrap}th:first-child,td:first-child{text-align:left}tbody tr:hover{background:#f2f8f7}td.positive{color:var(--teal)}td.negative{color:var(--red)}.footnote{font-size:11px;color:var(--muted);margin-top:14px}.matrix-wrap{overflow:auto;margin:24px 0}.matrix-table th,.matrix-table td{padding:3px;text-align:center}.matrix-table td button{min-width:62px;width:100%;min-height:42px;border:0;border-radius:3px;font-size:12px;font-variant-numeric:tabular-nums}.matrix-table td button.selected{outline:3px solid var(--gold);outline-offset:-3px}.matrix-table td button:hover{filter:brightness(.92)}.matrix-table caption{caption-side:bottom;font-size:11px;color:var(--muted);padding:12px}.matrix-table th{position:static}.selection-detail{background:#edf6f4;border-radius:5px;padding:14px;font-size:13px}.spaced{margin-top:35px}.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 35px}.method-grid article p{font-size:13px;color:var(--muted)}.downloads{display:flex;gap:10px;flex-wrap:wrap}.downloads a{font-size:12px;color:var(--teal);border:1px solid var(--line);padding:8px 12px;border-radius:5px;text-decoration:none}footer{display:flex;justify-content:space-between;gap:20px;padding:30px 0;color:var(--muted);font-size:11px}#hash-table td{font-family:ui-monospace,monospace;font-size:10px}#matrix-detail:empty{display:none}noscript{padding:30px}button[hidden]{display:none}.empty{text-align:center;padding:40px;color:var(--muted)}@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}.toolbar p{margin-left:0;width:100%}.panel{padding:20px}.controls{gap:8px}.method-grid{grid-template-columns:1fr}.local{font-size:10px}.brand{font-size:14px}.mark{padding-right:12px}.matrix-table td button{min-width:50px}}@media(max-width:520px){main{padding:0 16px}.intro{padding-top:32px}header{padding:16px}.brand small{font-size:8px;letter-spacing:1px}.local{max-width:120px;line-height:1.4}.kpis{gap:8px}.kpi{padding:14px}.kpi strong{font-size:24px}.controls label{width:100%}.controls select{width:100%}.controls{width:100%}.tabs button{padding:11px}.panel{padding:16px}.dataset{gap:6px 12px}.toolbar>div{width:calc(50% - 9px)}.toolbar select{width:100%}.toolbar{gap:10px}footer{flex-direction:column;gap:6px}input{min-width:0;width:100%}h1{letter-spacing:-1px}}

/* Achsen bleiben auf kleinen Bildschirmen lesbar; breite Diagramme sind horizontal scrollbar. */
.chart{overflow-x:auto}.chart svg{min-width:960px}.chart svg text{font-size:14px}
@media(max-width:960px){.chart::after{content:'Diagramm horizontal verschieben →';display:block;font-size:11px;color:var(--muted);padding-top:8px}}

/* ─────────────────────────────────────────────────────────────────────────
   Farbschemata: White (Original), Blue, Red, Dark, Cyan und Magenta
   Die Basisfarben von White bleiben unverändert. Alle anderen Themes
   überschreiben ausschließlich die Darstellungsvariablen.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --header-bg: #142d3d;
  --header-fg: #ffffff;
  --header-sub: #afc8d4;
  --header-border: #44616b;
  --header-mark: #50c3bf;
  --version-text: #9be1ce;
  --switcher-bg: rgba(255,255,255,.055);
  --switcher-selected: rgba(255,255,255,.16);
  --note-bg: #fff7e8;
  --note-strong: #75521d;
  --input-border: #c6d1d5;
  --focus: #329fa7;
  --table-head-bg: #edf3f3;
  --table-head-fg: #506470;
  --table-row-border: #e9eeee;
  --table-row-hover: #f2f8f7;
  --detail-bg: #edf6f4;
  --chart-all: var(--ink);
  --chart-long: var(--teal);
  --chart-short: var(--gold);
  --chart-adverse: var(--red);
  --chart-grid: #e2e8e9;
  --chart-axis: #657982;
  --chart-diagonal: #9caeb6;
  --matrix-rgb: 8,127,131;
  --matrix-ink: #173d45;
  --matrix-on-strong: white;
}

:root[data-theme="blue"] {
  --ink:#193456; --muted:#526e88; --teal:#245eaa; --gold:#ad7527;
  --red:#bd5059; --line:#c9d9ef; --paper:#eaf1fb; --white:#ffffff;
  --header-bg:#102d55; --header-mark:#73b4ff; --version-text:#a6d5ff;
  --note-bg:#edf4ff; --note-strong:#285181; --input-border:#b5c9e4;
  --focus:#3278d0; --table-head-bg:#e0eaf7; --table-head-fg:#375b7c;
  --table-row-border:#e4ecf6; --table-row-hover:#e7f1ff; --detail-bg:#e8f1fe;
  --chart-grid:#dce7f5; --chart-axis:#526c87; --chart-diagonal:#99b4d5;
  --matrix-rgb:31,89,162; --matrix-ink:#193456;
}
:root[data-theme="red"] {
  --ink:#432832; --muted:#80626b; --teal:#aa354e; --gold:#b77d25;
  --red:#c15954; --line:#ead3d7; --paper:#fcf0f2; --white:#fffafb;
  --header-bg:#501c30; --header-mark:#ff97ad; --version-text:#ffc3d2;
  --note-bg:#fff0e5; --note-strong:#854932; --input-border:#e3bdc5;
  --focus:#d44a69; --table-head-bg:#f9e6ea; --table-head-fg:#77515e;
  --table-row-border:#f3e2e5; --table-row-hover:#ffedf2; --detail-bg:#fde9ef;
  --chart-grid:#f0dce2; --chart-axis:#82616c; --chart-diagonal:#c8a7b1;
  --chart-long:#a52c59; --chart-short:#b27a2a; --matrix-rgb:164,43,75;
  --matrix-ink:#48232f;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:#e4eef4; --muted:#b1c3ce; --teal:#5bd0d2; --gold:#e9b55d;
  --red:#ff908b; --line:#37515d; --paper:#0d1922; --white:#162934;
  --header-bg:#09131b; --header-fg:#f0f7fc; --header-sub:#b4cad5;
  --header-border:#365565; --header-mark:#68dcd9; --version-text:#9be3dc;
  --note-bg:#352e25; --note-strong:#f8cb88; --input-border:#44616f;
  --focus:#67d9df; --table-head-bg:#223b47; --table-head-fg:#d1e1e9;
  --table-row-border:#2d4650; --table-row-hover:#203c49;
  --detail-bg:#1d3b43; --chart-grid:#324a54; --chart-axis:#c0d0d8;
  --chart-diagonal:#7f929f; --chart-all:#e4eef4; --chart-long:#64d4d2;
  --chart-short:#f1c06b; --chart-adverse:#ff9792;
  --matrix-rgb:12,108,127; --matrix-ink:#e5f1f6; --matrix-on-strong:#ffffff;
}
:root[data-theme="cyan"] {
  --ink:#143b48; --muted:#557580; --teal:#007f98; --gold:#aa782c;
  --red:#b8525e; --line:#bde4e8; --paper:#e7f9fa; --white:#faffff;
  --header-bg:#0a4757; --header-mark:#7cf4ff; --version-text:#b3f7ff;
  --note-bg:#e1f8f5; --note-strong:#226474; --input-border:#abd7dc;
  --focus:#109ab7; --table-head-bg:#d8f2f5; --table-head-fg:#316874;
  --table-row-border:#e0eff1; --table-row-hover:#e5fbfc; --detail-bg:#daf4f5;
  --chart-grid:#d5e9ec; --chart-axis:#517480; --chart-diagonal:#8cbbc2;
  --chart-long:#007e98; --chart-short:#ba822d;
  --matrix-rgb:0,113,138; --matrix-ink:#103d4b;
}
:root[data-theme="magenta"] {
  --ink:#412a48; --muted:#78627c; --teal:#9b3799; --gold:#a97427;
  --red:#ba5068; --line:#ead3e8; --paper:#faf0fb; --white:#fffaff;
  --header-bg:#451d4c; --header-mark:#f6a5f1; --version-text:#f4bff0;
  --note-bg:#f8edfd; --note-strong:#7f447e; --input-border:#dcb9de;
  --focus:#bc50b3; --table-head-bg:#f4e3f5; --table-head-fg:#765179;
  --table-row-border:#eee0ef; --table-row-hover:#fcecff; --detail-bg:#f7e6f9;
  --chart-grid:#eedced; --chart-axis:#866a88; --chart-diagonal:#bda0bf;
  --chart-long:#a13b9b; --chart-short:#b98431;
  --matrix-rgb:140,40,145; --matrix-ink:#4a2550;
}

/* Einheitliche Oberflächen- und Diagrammfarben in allen sechs Modi. */
header { background:var(--header-bg); color:var(--header-fg); gap:16px; flex-wrap:wrap; }
.mark { border-color:var(--header-border); }
.mark span { color:var(--header-mark); }
.brand small { color:var(--header-sub); }
.local { color:var(--version-text); border-color:var(--header-border); white-space:nowrap; }
.method-note { background:var(--note-bg); }
.method-note strong { color:var(--note-strong); }
select,input { background:var(--white); border-color:var(--input-border); color:var(--ink); }
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible { outline-color:var(--focus); }
.panel { background:var(--white); }
th { background:var(--table-head-bg); color:var(--table-head-fg); }
th,td { border-bottom-color:var(--table-row-border); }
tbody tr:hover { background:var(--table-row-hover); }
.selection-detail { background:var(--detail-bg); }
.primary { color:#fff; }
:root[data-theme="dark"] .primary { color:#09202a; font-weight:700; }

/* Kompakter Theme-Switcher mit beschrifteten, tastaturbedienbaren Swatches. */
.header-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:14px; }
.theme-switcher {
  display:flex; align-items:center; flex-wrap:wrap; gap:3px;
  padding:6px 7px; background:var(--switcher-bg);
  border:1px solid var(--header-border); border-radius:10px;
}
.theme-label { font-size:9px; color:var(--header-sub); font-weight:750; letter-spacing:1.5px; padding:0 7px 0 4px; }
.theme-choice {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:4px; min-width:49px; min-height:44px; padding:5px 6px;
  background:transparent; border:1px solid transparent; border-radius:6px;
  color:var(--header-sub); font-size:10px; line-height:1.1;
}
.theme-choice:hover { background:var(--switcher-selected); color:var(--header-fg); }
.theme-choice[aria-pressed="true"] {
  background:var(--switcher-selected); color:var(--header-fg);
  border-color:var(--header-border); font-weight:700;
}
.theme-choice:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.theme-dot { width:16px; height:16px; flex-shrink:0; border-radius:50%; border:1px solid rgba(255,255,255,.65); }
[data-theme-choice="white"] .theme-dot { background:#ffffff; }
[data-theme-choice="blue"] .theme-dot { background:#3178d0; }
[data-theme-choice="red"] .theme-dot { background:#d44a69; }
[data-theme-choice="dark"] .theme-dot { background:#0b1319; }
[data-theme-choice="cyan"] .theme-dot { background:#06bed4; }
[data-theme-choice="magenta"] .theme-dot { background:#c24aba; }

@media(max-width:1080px) {
  .header-actions { justify-content:flex-start; }
}
@media(max-width:520px) {
  .header-actions { width:100%; gap:9px; }
  .theme-switcher { flex-wrap:nowrap; width:100%; justify-content:space-between; gap:0; }
  .theme-label { display:none; }
  .theme-choice { min-width:0; flex:1; padding:6px 2px; font-size:9px; }
  .local { max-width:none; }
}