:root {
  --bg: #0b0f14;
  --panel: #121922;
  --muted: #7c8aa4;
  --text: #e6edf6;
  --accent: #4aa3ff;
  --accent-2: #9bffb7;
  --danger: #ff6b6b;
  --ok: #22c55e;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji','Segoe UI Emoji';
  background: linear-gradient(180deg, #0b0f14 0%, #0e1218 100%);
  color: var(--text);
}
header {
  display:flex; justify-content: space-between; align-items:center;
  padding: 16px 20px; background: var(--panel); position: sticky; top:0; z-index:10;
  border-bottom: 1px solid #1f2937;
}
header h1 { margin: 0; font-size: 1.25rem; letter-spacing: .3px; }
header nav a {
  color: var(--muted); text-decoration: none; margin-left: 16px; padding: 6px 10px; border-radius: 8px;
}
header nav a:hover { background: #0f172a; color: var(--text); }
.controls {
  display:flex; gap: 8px; padding: 16px 20px; flex-wrap: wrap;
}
.controls input, .controls select, .controls button {
  padding: 10px 12px; background: #0f172a; color: var(--text); border: 1px solid #1f2937; border-radius: 10px;
}
.controls button { cursor: pointer; }
table {
  width: 100%; border-collapse: collapse; margin: 0; padding: 0;
}
thead th {
  text-align: left; font-weight: 600; color: var(--muted);
  border-bottom: 1px solid #1f2937; padding: 10px 14px; cursor: pointer;
}
td {
  border-bottom: 1px solid #111827; padding: 12px 14px; vertical-align: middle;
}
td.num { text-align: right; }
tbody tr:hover { background: #0c1420; }
.badge { padding: 2px 8px; border-radius: 999px; background: #0b1220; border: 1px solid #1f2937; color: var(--muted); font-size: .85rem; }
.pill { padding: 6px 10px; border-radius: 999px; }
.btn-danger { background: #1a0f0f; border-color: #3b1616; color: var(--danger); }
.btn-ok { background: #0f1a13; border-color: #153a22; color: var(--ok); }
footer { padding: 16px 20px; color: var(--muted); }
/* --- Kompakter Tabellensatz --- */
section {                /* Bereich schmaler und mittig */
  max-width: 1000px;
  margin: 0 auto;
}

#price-table {
  table-layout: fixed;   /* Spaltenbreiten wirklich nutzen */
  width: 100%;
}

#price-table th,
#price-table td {
  padding: 8px 10px;     /* weniger Innenabstand */
  white-space: nowrap;   /* nichts umbrechen */
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums; /* schöne Zahlenausrichtung */
}
#lang-switcher {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
  background: rgba(0,0,0,.6);
  padding: 6px 8px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}
#lang-switcher select {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  padding: 4px 6px;
}

/* Spaltenbreiten (anpassen nach Geschmack) */
#price-table th:nth-child(1), #price-table td:nth-child(1) { width: 16ch; } /* Kategorie */
#price-table th:nth-child(2), #price-table td:nth-child(2) { width: 28ch; } /* Item */
#price-table th:nth-child(3), #price-table td:nth-child(3) { width: 10ch; text-align: right; } /* Stackgröße */
#price-table th:nth-child(4), #price-table td:nth-child(4) { width: 12ch; text-align: right; } /* Preis/Stack */
#price-table th:nth-child(5), #price-table td:nth-child(5) { width: 12ch; text-align: right; } /* Preis/Stück */