/* Dunkles Werkzeug-Theme passend zur öffentlichen Startseite */
body.tool-page {
  --bg: #0d1727;
  --panel: rgba(57, 67, 82, .94);
  --text: #f8fafc;
  --muted: #d3e0ee;
  --border: rgba(216, 229, 244, .22);
  --soft: rgba(20, 31, 46, .55);
  --accent: #9ed6ef;
  --accentText: #102033;
  min-height: 100vh;
  background:
    radial-gradient(circle at 0 0, rgba(112, 181, 211, .74), transparent 31%),
    linear-gradient(145deg, #172337 0%, #0d1727 60%);
  background-attachment: fixed;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.tool-page .wrap {
  width: min(1480px, calc(100% - 28px));
  margin: 0 auto;
  padding: 42px 0 64px;
}

body.tool-page .tool-header {
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--border);
  border-radius: 30px;
  background: rgba(57, 67, 82, .9);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
}

body.tool-page .tool-header h1 {
  font-size: clamp(2.15rem, 5vw, 3.7rem);
  line-height: 1;
  letter-spacing: -.045em;
}

body.tool-page .tool-header p { max-width: 78ch; }

body.tool-page .tool-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}

body.tool-page .tool-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(13, 23, 39, .48);
  color: var(--text);
  font-size: .88rem;
  font-weight: 750;
  text-decoration: none;
}

body.tool-page .tool-nav a:hover,
body.tool-page .tool-nav a:focus-visible {
  border-color: rgba(207, 229, 255, .55);
  background: rgba(82, 92, 108, .98);
  outline: none;
}

body.tool-page .panel,
body.tool-page .stat,
body.tool-page .tableWrap {
  border-color: var(--border);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 14px 32px rgba(0,0,0,.16);
  backdrop-filter: blur(14px);
}

body.tool-page .panel { padding: 18px; }
body.tool-page .summary { gap: 14px; }
body.tool-page .stat { padding: 16px; }
body.tool-page .stat strong { color: var(--text); }

body.tool-page select,
body.tool-page input[type="search"],
body.tool-page input.wltp,
body.tool-page button,
body.tool-page .btns button,
body.tool-page .selbtn {
  border-color: var(--border);
  background: rgba(13, 23, 39, .62);
  color: var(--text);
}

body.tool-page button:hover,
body.tool-page .btns button:hover,
body.tool-page .selbtn:hover {
  border-color: rgba(158, 214, 239, .7);
  background: rgba(82, 92, 108, .98);
}

body.tool-page button.primary,
body.tool-page .btns button.on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accentText);
}

body.tool-page table {
  border-color: var(--border);
  background: rgba(42, 53, 69, .95);
  color: var(--text);
}

body.tool-page th,
body.tool-page td { border-color: var(--border); }
body.tool-page th { background: rgba(16, 29, 45, .88); color: var(--muted); }
body.tool-page td { color: var(--text); }
body.tool-page .legendRow:hover { background: rgba(13, 23, 39, .45); }
body.tool-page text.axis { fill: var(--muted); }
body.tool-page line.axis,
body.tool-page path.axis,
body.tool-page line.grid,
body.tool-page line.gridLine { stroke: rgba(216, 229, 244, .2); }
body.tool-page .version { background: rgba(13, 23, 39, .58); color: var(--accent); border: 1px solid var(--border); }

body.range-tool rect.chartBandOdd { fill: rgba(30, 43, 59, .78); }
body.range-tool rect.chartBandEven { fill: rgba(45, 59, 77, .78); }
body.range-tool line.chartSep { stroke: rgba(216, 229, 244, .32); }
body.range-tool .tableWrap { background: var(--panel); }
body.range-tool tbody tr.modelRow.rowOdd td { background-color: rgba(36, 48, 64, .96); }
body.range-tool tbody tr.modelRow.rowEven td { background-color: rgba(49, 62, 79, .96); }
body.range-tool tbody tr.modelRow:hover td { background-color: rgba(70, 88, 108, .98); }
body.range-tool tbody tr.modelRow td { border-bottom-color: rgba(216, 229, 244, .28); }
body.range-tool td.modelCell { color: var(--text); }
body.range-tool tbody tr.modelRow.rowOdd td.wltpCell,
body.range-tool tbody tr.modelRow.rowEven td.wltpCell { background-color: rgba(65, 90, 121, .72); }
body.range-tool tbody tr.modelRow.rowOdd td.summerCell,
body.range-tool tbody tr.modelRow.rowEven td.summerCell { background-color: rgba(135, 86, 35, .58); }
body.range-tool tbody tr.modelRow.rowOdd td.winterCell,
body.range-tool tbody tr.modelRow.rowEven td.winterCell { background-color: rgba(42, 78, 128, .64); }

body.ev-tool {
  --ink: #f8fafc;
  --ink2: #d3e0ee;
  --ink3: #b3c5d8;
  --line: rgba(216, 229, 244, .22);
  --line2: rgba(216, 229, 244, .36);
  --accent-bg: rgba(75, 119, 166, .38);
  --radius: 18px;
}
body.ev-tool .wrap { max-width: 980px; }
body.ev-tool header.tool-header { display: block; margin-bottom: 20px; }
body.ev-tool .tool-nav { justify-content: flex-start; margin-top: 20px; }
body.ev-tool .panel h2 { color: var(--accent); }
body.ev-tool .legend span { background: rgba(13, 23, 39, .35); }
body.ev-tool .explain code { background: rgba(13, 23, 39, .62); }
body.ev-tool footer { color: var(--muted); }

@media (max-width: 860px) {
  body.tool-page .tool-header { display: block; }
  body.tool-page .tool-nav { justify-content: flex-start; margin-top: 18px; }
}


body.tool-page .source-panel { margin-top: 18px; }
body.tool-page .source-panel p { color: var(--muted); }
body.tool-page .source-panel strong { color: var(--text); }
body.tool-page .source-panel a { color: var(--accent); }
body.tool-page .tool-footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .9rem;
}
body.tool-page .tool-footer a { color: var(--muted); text-decoration: none; }
body.tool-page .tool-footer a:hover, body.tool-page .tool-footer a:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }