:root { --bg:#0f1117; --surface:#1a1d27; --border:#2a2d3e; --accent:#5b8dee; --accent2:#7c3aed;
          --text:#e2e8f0; --muted:#8892a4; --gold:#ffd766; }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { background:var(--bg); color:var(--text); font-family:'Segoe UI',system-ui,sans-serif;
         line-height:1.6; }
  .wrap { max-width:960px; margin:0 auto; padding:2rem 1rem 3rem; }
  th.sortierbar { cursor:pointer; user-select:none; }
  th.sortierbar:hover { color:var(--accent); }
  /* Platz für den Pfeil ist immer reserviert – sonst wird die Spalte beim
     Sortieren breiter und die Tabelle springt */
  th.sortierbar::after { content:" ▼"; visibility:hidden; }
  th[data-richtung="ab"]::after { content:" ▼"; visibility:visible; }
  th[data-richtung="auf"]::after { content:" ▲"; visibility:visible; }
  /* Spaltenköpfe einzeilig, sobald Platz ist; am Handy dürfen sie umbrechen */
  @media (min-width:561px) { th { white-space:nowrap; overflow-wrap:normal; } }
  header { line-height:normal; }  /* sonst erbt die Kopfzeile 1.6 vom body und wird 4 px höher als auf den anderen Seiten */
  a { color:var(--accent); }
  .pfad { font-size:.85rem; color:var(--muted); margin-bottom:1.4rem; display:flex; flex-wrap:wrap; gap:.4rem; }
  .pfad a { color:var(--muted); text-decoration:none; }
  .pfad a:hover { color:var(--accent); }
  h1 { font-size:1.55rem; line-height:1.25; margin-bottom:.4rem;
       background:linear-gradient(90deg,var(--accent),var(--accent2));
       -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  .unter { color:var(--muted); font-size:.95rem; margin-bottom:1.4rem; }
  h2 { font-size:1.05rem; margin:0 0 .7rem; }
  p, li { color:var(--muted); font-size:.95rem; margin-bottom:.6rem; }
  .box { background:var(--surface); border:1px solid var(--border); border-radius:12px;
         padding:1.2rem 1.3rem; margin-bottom:1.1rem; }
  .kennzahl { display:flex; flex-wrap:wrap; gap:1.2rem 2.2rem; align-items:baseline; }
  .kennzahl .median { font-size:2.4rem; font-weight:700; color:var(--gold); line-height:1.1; }
  .kennzahl .label { color:var(--muted); font-size:.85rem; display:block; }
  .kennzahl .neben { font-size:1.15rem; font-weight:600; }
  table { width:100%; border-collapse:collapse; font-size:.92rem; }
  th, td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--border); vertical-align:top; overflow-wrap:anywhere; }
  th { color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
  td.z, th.z { text-align:right; }
  td.z { white-space:nowrap; }
  tr:last-child td { border-bottom:none; }
  .chips { display:flex; flex-wrap:wrap; gap:.45rem; }
  .g-namen { display:block; font-size:.8rem; color:var(--muted); margin:.1rem 0 .3rem; }
  .chip { display:inline-block; padding:.3rem .7rem; border:1px solid var(--border); border-radius:999px;
          background:var(--bg); color:var(--text); text-decoration:none; font-size:.88rem; }
  .chip:hover { border-color:var(--accent); color:var(--accent); }
  .chip.aktiv { border-color:var(--accent); background:rgba(91,141,238,.12); }
  .cta { border-color:rgba(91,141,238,.5); }
  .cta .haupt { display:inline-block; background:linear-gradient(90deg,var(--accent),var(--accent2));
                color:#fff; text-decoration:none; font-weight:600; padding:.6rem 1.1rem; border-radius:10px;
                margin:.2rem 0 .8rem; }
  .cta .weitere { display:flex; flex-wrap:wrap; gap:.3rem .9rem; align-items:baseline; }
  .quelle { font-size:.8rem; color:var(--muted); margin-top:1.6rem; }
  /* wie die Fußzeile der Startseite: nur Rechtliches, mittig, klein */
  footer { margin-top:1rem; padding:.5rem; font-size:11px; color:var(--muted);
           display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
  footer a { color:var(--muted); text-decoration:none; }
  footer a:hover { color:var(--accent); }
  .steuerung { display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center; margin-top:.8rem;
               font-size:.85rem; color:var(--muted); }
  .steuerung select { background:var(--bg); color:var(--text); border:1px solid var(--border);
                      border-radius:8px; padding:.35rem .5rem; font-size:.88rem; margin-left:.35rem; }
  .anzahl { color:var(--muted); font-weight:400; font-size:.85rem; }
  table.berufe td { font-size:.88rem; }
  table.berufe td.gattung { color:var(--muted); font-size:.8rem; }
  table.berufe th[data-sort] { cursor:pointer; user-select:none; }
  table.berufe th[data-sort]:hover { color:var(--accent); }
  h2.klapp { cursor:pointer; user-select:none; }
  h2.klapp::before { content:'▾'; display:inline-block; width:1.1em; color:var(--muted); }
  .bereich-box.zu h2.klapp::before { content:'▸'; }
  .bereich-box.zu table { display:none; }
  .bereich-box.zu h2 { margin-bottom:0; }
  details > summary { list-style:none; cursor:pointer; user-select:none;
    font-size:1.05rem; font-weight:600; color:var(--text); }
  details > summary::-webkit-details-marker { display:none; }
  details > summary::before { content:'▸\00a0'; color:var(--muted); font-size:.85em; }
  details[open] > summary::before { content:'▾\00a0'; }
  details > summary + * { margin-top:.7rem; }
  .klapp-knopf { background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:8px;
                 padding:.35rem .7rem; font-size:.85rem; cursor:pointer; }
  .klapp-knopf:hover { border-color:var(--accent); }
  .liste { columns:2; column-gap:2rem; }
  .liste li { break-inside:avoid; margin-bottom:.35rem; font-size:.9rem; }
  td.bereich { white-space:normal; }
  /* Kreisebene: Entgeltklassen als Balken, Vergleichsspalte */
  .verteilung { display:grid; gap:.35rem; }
  .vt { display:grid; grid-template-columns:8.5rem 1fr 3.2rem; gap:.6rem; align-items:center; font-size:.85rem; color:var(--muted); }
  .vt .z { text-align:right; }
  .vt-b { height:.8rem; background:var(--bg); border:1px solid var(--border); border-radius:4px; overflow:hidden; }
  .vt-b i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); }
  td.vgl, th.vgl { color:var(--muted); font-size:.8rem; }
  @media (max-width:560px) { .vt { grid-template-columns:6.6rem 1fr 2.6rem; font-size:.78rem; }
    table.gruppen th.vgl, table.gruppen td.vgl { display:none; } }
  @media (max-width:560px) { .liste { columns:1; } h1 { font-size:1.3rem; } .kennzahl .median { font-size:2rem; }
    .box { padding:1rem .9rem; } table { font-size:.82rem; } th, td { padding:.4rem .3rem; } }