/* =========================================================
   AUSWERTUNG — Personalzahlen
   Gebunden an #reporting.rep-page
   =========================================================

   DREI THEMEN, DREI BLOECKE.
   Diese Datei fuehrt eine eigene Palette (--rep-*) und muss deshalb
   alle drei Erscheinungsbilder bedienen: hell, dunkel, modern.
   tests/frontend/test_themen_vollstaendig.php wird rot, wenn ein Block
   fehlt ODER wenn er nur halb gefuellt ist — ein halb gefuellter Block
   faellt fuer den Rest auf das helle Thema zurueck und ergibt genau den
   Mischmasch, um den es geht (helle Flaeche, helle Schrift).

   BEDEUTUNG IST KEINE FLAECHE.
   --rep-krank / --rep-urlaub / --rep-sonder sind Aussagen, keine
   Oberflaechen. Rot heisst Krankheit, Blau Urlaub, Violett Sonderfall —
   dieselben Farben wie im Kalender. Sie wechseln NICHT mit dem Thema,
   sonst aendert sich mit dem Aussehen die Auskunft. Nur im Dunklen
   werden sie aufgehellt, damit sie auf Schwarz noch lesbar sind; das
   ist Lesbarkeit, nicht Farbe.

   Urlaub ist blau und nicht gold: das Haus fuehrt zwei widerspruechliche
   Saetze (--cal-t-vacation gold in antraege-premium.css, --evt-vacation-*
   blau in calendar-premium.css). calendar-premium.css laedt spaeter und
   gewinnt — der Nutzer sieht im Kalender Blau. Die Auswertung muss
   dasselbe sagen wie der Kalender.
   ========================================================= */

.rep-page{
  /* Flaechen */
  --rep-bg:#FAF6EF; --rep-surface:#FFFDF8; --rep-surface-2:#F6F0E2; --rep-surface-sunk:#EFE7D3;
  /* Schrift */
  --rep-ink:#1A1612; --rep-ink-2:#3A332A; --rep-ink-3:#6B6050; --rep-ink-4:#9A8F7D; --rep-ink-5:#BDB3A0;
  /* Linien */
  --rep-div:rgba(26,22,18,.07); --rep-div-2:rgba(26,22,18,.12);
  /* Markenakzent */
  --rep-gold:#B8862B; --rep-gold-deep:#A8863E; --rep-gold-soft:#D3B977; --rep-gold-pale:#DCC899;
  --rep-gold-ink:#5C4214; --rep-gold-wash:rgba(184,134,43,.10); --rep-gold-wash-2:rgba(184,134,43,.20);

  /* Aussagen — siehe Kopf */
  --rep-krank:#9B3B3B; --rep-urlaub:#3F6FA8; --rep-sonder:#7C5BA6; --rep-warn:#A8722C;
  /* Ringfarben: eine geordnete Leiter, damit die Anteile auch ohne Legende
     auseinanderzuhalten sind. Werden von REP_FARB in dashboard.js gelesen. */
  --rep-c1:#8C6A3A; --rep-c2:#B8862B; --rep-c3:#C79A3E;
  --rep-c4:#D9BC7A; --rep-c5:#E8D6AB; --rep-c6:#6B6050;
  --rep-krank-w:rgba(155,59,59,.12); --rep-urlaub-w:rgba(63,111,168,.12); --rep-sonder-w:rgba(124,91,166,.12);

  --rep-font-serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --rep-font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --rep-shadow-sm:0 1px 2px rgba(92,66,20,.05);
  --rep-shadow-md:0 6px 20px -6px rgba(92,66,20,.12), 0 2px 4px rgba(92,66,20,.04);
  --rep-r:10px; --rep-r-sm:6px;
  --rep-ease:cubic-bezier(.2,.7,.2,1);

  background:var(--rep-bg); color:var(--rep-ink);
  font-family:var(--rep-font-sans); font-size:13px; line-height:1.45;
  -webkit-font-smoothing:antialiased; letter-spacing:-.005em;
  /* randlos wie die anderen Premium-Seiten; der Grund MUSS der App-Grund
     sein, sonst entsteht an der Seitenleiste eine sichtbare Naht */
  padding:0; margin:-24px -28px 0; min-height:calc(100vh - 60px);
}
@media (max-width:900px){ .rep-page{ margin:-16px; } }

body.theme-dark .rep-page{
  --rep-bg:#111113; --rep-surface:#18181C; --rep-surface-2:#211C16; --rep-surface-sunk:#0D0B09;
  --rep-ink:#F3ECDC; --rep-ink-2:#D9CFB8; --rep-ink-3:#A89B80; --rep-ink-4:#786E57; --rep-ink-5:#4F4836;
  --rep-div:rgba(243,236,220,.08); --rep-div-2:rgba(243,236,220,.14);
  /* Die Goldleiter dreht sich um: "deep" behaelt seine ROLLE (der Ton,
     mit dem ueberschrieben wird), nicht seine Helligkeit. */
  --rep-gold:#D4B977; --rep-gold-deep:#E2CB92; --rep-gold-soft:#C2A35A; --rep-gold-pale:#EBDAAF;
  --rep-gold-ink:#F3DEA6; --rep-gold-wash:rgba(212,185,119,.09); --rep-gold-wash-2:rgba(212,185,119,.20);

  --rep-krank:#D07761; --rep-urlaub:#7BA6D9; --rep-sonder:#A88CCB; --rep-warn:#D2A05C;
  /* Aufgehellt: #6B6050 und #8C6A3A waren auf #18181C praktisch unsichtbar. */
  --rep-c1:#D4B977; --rep-c2:#C2A35A; --rep-c3:#E2CB92;
  --rep-c4:#A98756; --rep-c5:#EBDAAF; --rep-c6:#8A7F68;
  --rep-krank-w:rgba(208,119,97,.16); --rep-urlaub-w:rgba(123,166,217,.16); --rep-sonder-w:rgba(168,140,203,.16);

  --rep-shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --rep-shadow-md:0 6px 20px -6px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.25);
}

body.theme-modern .rep-page{
  --rep-bg:#F8FAFC; --rep-surface:#FFFFFF; --rep-surface-2:#F1F5F9; --rep-surface-sunk:#E2E8F0;
  --rep-ink:#0F172A; --rep-ink-2:#334155; --rep-ink-3:#64748B; --rep-ink-4:#94A3B8; --rep-ink-5:#CBD5E1;
  --rep-div:rgba(15,23,42,.07); --rep-div-2:rgba(15,23,42,.12);
  --rep-gold:#2563EB; --rep-gold-deep:#1D4ED8; --rep-gold-soft:#60A5FA; --rep-gold-pale:#93C5FD;
  --rep-gold-ink:#1E3A8A; --rep-gold-wash:rgba(37,99,235,.10); --rep-gold-wash-2:rgba(37,99,235,.20);
  --rep-c1:#1D4ED8; --rep-c2:#2563EB; --rep-c3:#3B82F6;
  --rep-c4:#60A5FA; --rep-c5:#93C5FD; --rep-c6:#64748B;
  /* Modern hat keine Serife */
  --rep-font-serif:"Inter",system-ui,-apple-system,sans-serif;
  --rep-shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --rep-shadow-md:0 6px 20px -6px rgba(15,23,42,.10), 0 2px 4px rgba(15,23,42,.04);
}

.rep-page *{box-sizing:border-box}
.rep-page button{font:inherit;color:inherit}
.rep-page :focus-visible{outline:2px solid var(--rep-gold);outline-offset:2px;border-radius:var(--rep-r-sm)}
.rep-page ::selection{background:var(--rep-gold-wash-2);color:var(--rep-ink)}

/* ── Kopf ────────────────────────────────────────────────────────────── */
.rep-kopf{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:26px 28px 16px; border-bottom:1px solid var(--rep-div);
}
/* min-width:0 ist hier nicht Zierde: ein Flex-Kind weigert sich sonst, unter
   seine Inhaltsbreite zu schrumpfen. Ohne das schiebt eine lange Zeile in
   .rep-meta (Zeitraum + Filter + Mitarbeiterzahl) die Bedienelemente rechts
   aus dem Kopf heraus. */
.rep-titel{ min-width:0; }
.rep-eyebrow{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rep-ink-4); margin-bottom:5px;
}
.rep-kopf h1{
  font-family:var(--rep-font-serif); font-weight:300; font-size:29px; line-height:1.05;
  letter-spacing:-.03em; margin:0; color:var(--rep-ink);
}
.rep-kopf h1 span{ color:var(--rep-gold); }
.rep-meta{ margin:6px 0 0; font-size:11.5px; color:var(--rep-ink-3); }

.rep-werkzeug{ display:flex; align-items:center; justify-content:flex-end; gap:7px; flex-wrap:wrap; }

/* 🚨 SONST STEHT JEDER FILTER IN EINER EIGENEN ZEILE.
   dashboard.css setzt ganz oben `input, textarea, select { width:100% }` — eine
   Regel fuer Formulare, die hier mitgreift: jedes Auswahlfeld nimmt die volle
   Breite der Werkzeugspalte, und aus der Zeile werden drei Bloecke
   untereinander (gemeldet am 19.09.2026). `width:auto` gibt ihnen ihre
   Inhaltsbreite zurueck, die Mindestbreiten halten „Alle Abteilungen" und
   „Alle Mitarbeiter" in einer Zeile lesbar. */
.rep-werkzeug .rep-select,
.rep-werkzeug .rep-suche,
.rep-werkzeug .rep-spanne input{ width:auto; }
.rep-werkzeug #reportPeriod{ min-width:132px; }
.rep-werkzeug #reportDeptFilter,
.rep-werkzeug #reportEmpFilter{ min-width:146px; }
.rep-select,
.rep-suche,
.rep-spanne input{
  appearance:none; background:var(--rep-surface); color:var(--rep-ink);
  border:1px solid var(--rep-div-2); border-radius:var(--rep-r-sm);
  padding:7px 10px; font:inherit; font-size:12px; line-height:1.2;
  transition:border-color 140ms var(--rep-ease);
}
.rep-select{ padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.rep-select:hover,.rep-suche:hover,.rep-spanne input:hover{ border-color:var(--rep-gold-soft); }
.rep-spanne{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--rep-ink-3); }

.rep-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--rep-surface); color:var(--rep-ink-2);
  border:1px solid var(--rep-div-2); border-radius:var(--rep-r-sm);
  padding:7px 12px; font-size:12px; cursor:pointer;
  transition:background 140ms var(--rep-ease), border-color 140ms var(--rep-ease);
}
.rep-btn svg{ width:14px; height:14px; }
.rep-btn:hover{ border-color:var(--rep-gold-soft); background:var(--rep-gold-wash); }
.rep-btn-prim{ background:var(--rep-gold); border-color:var(--rep-gold); color:#fff; }
body.theme-dark .rep-page .rep-btn-prim{ color:#1A1612; }
.rep-btn-prim:hover{ background:var(--rep-gold-deep); border-color:var(--rep-gold-deep); }
body.theme-dark .rep-page .rep-btn-prim:hover{ color:#1A1612; }

/* ── Kennzahlenband ──────────────────────────────────────────────────── */
.rep-band{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:1px; background:var(--rep-div); border-bottom:1px solid var(--rep-div);
}
.rep-b{ background:var(--rep-bg); padding:13px 16px 14px; }
.rep-b-label{ font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--rep-ink-4); }
.rep-b-wert{
  font-family:var(--rep-font-serif); font-weight:300; font-size:26px; line-height:1.15;
  letter-spacing:-.02em; color:var(--rep-ink); margin-top:3px;
  font-variant-numeric:tabular-nums;
}
.rep-b-sub{ font-size:10.5px; color:var(--rep-ink-3); margin-top:1px; }

/* ── Raster ──────────────────────────────────────────────────────────── */
/* Zwoelf Spalten. Die Karten tragen ihre Breite selbst (rk-3 … rk-12) und
   jede Reihe fuellt die zwoelf voll aus — daher keine Luecken. */
.rep-raster{
  display:grid; grid-template-columns:repeat(12,1fr); gap:10px;
  padding:10px 28px 28px; align-items:start;
}
.rep-page .rk-3 { grid-column:span 3; }
.rep-page .rk-4 { grid-column:span 4; }
.rep-page .rk-5 { grid-column:span 5; }
.rep-page .rk-6 { grid-column:span 6; }
.rep-page .rk-7 { grid-column:span 7; }
.rep-page .rk-12{ grid-column:span 12; }
@media (max-width:1400px){
  .rep-page .rk-3{ grid-column:span 6; }
}
@media (max-width:1100px){
  .rep-page .rk-4,.rep-page .rk-5,.rep-page .rk-6,.rep-page .rk-7{ grid-column:span 12; }
}
@media (max-width:700px){
  .rep-page .rk-3{ grid-column:span 12; }
  .rep-raster{ padding:10px 16px 20px; }
  .rep-kopf{ padding:20px 16px 14px; }
  /* Auf dem Telefon ist untereinander richtig — dort ist fuer drei Felder
     nebeneinander kein Platz. */
  .rep-werkzeug{ width:100%; }
  .rep-werkzeug .rep-select{ width:100%; min-width:0; flex:1 1 100%; }
}

.rk{
  background:var(--rep-surface); border:1px solid var(--rep-div);
  border-radius:var(--rep-r); padding:13px 15px 12px;
  box-shadow:var(--rep-shadow-sm); min-width:0;
}
.rk-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:11px; min-height:24px;
}
.rk-kopf h2{
  font-family:var(--rep-font-serif); font-weight:400; font-size:14px; letter-spacing:-.015em;
  margin:0; color:var(--rep-ink);
}
.rk-rechts{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.rk-hint{ font-size:10px; color:var(--rep-ink-4); letter-spacing:.02em; }
.rk-fuss{
  display:flex; justify-content:space-between; gap:12px;
  margin-top:10px; padding-top:9px; border-top:1px solid var(--rep-div);
  font-size:10.5px; color:var(--rep-ink-3); font-variant-numeric:tabular-nums;
}

/* ── Umschalter ──────────────────────────────────────────────────────── */
.rep-tabs{ display:inline-flex; background:var(--rep-surface-2); border-radius:var(--rep-r-sm); padding:2px; }
.rep-tabs button{
  border:0; background:transparent; color:var(--rep-ink-3); cursor:pointer;
  padding:4px 9px; font-size:11px; border-radius:4px; white-space:nowrap;
  transition:background 140ms var(--rep-ease), color 140ms var(--rep-ease);
}
.rep-tabs-s button{ padding:4px 7px; font-size:10.5px; }
.rep-tabs button:hover{ color:var(--rep-ink); }
.rep-tabs button.is-an{ background:var(--rep-surface); color:var(--rep-ink); box-shadow:var(--rep-shadow-sm); }

.rep-form{ display:inline-flex; gap:2px; background:var(--rep-surface-2); border-radius:var(--rep-r-sm); padding:2px; }
.rep-form button{
  border:0; background:transparent; cursor:pointer; padding:4px 6px; border-radius:4px;
  color:var(--rep-ink-4); display:inline-flex; transition:background 140ms var(--rep-ease);
}
.rep-form button svg{ width:14px; height:14px; fill:currentColor; }
.rep-form button[data-form="linie"] svg,
.rep-form button[data-form="kreis"] svg{ fill:none; }
.rep-form button:hover{ color:var(--rep-ink-2); }
.rep-form button.is-an{ background:var(--rep-surface); color:var(--rep-gold); box-shadow:var(--rep-shadow-sm); }

/* ── Verlauf (Balken oder Linie) ─────────────────────────────────────── */
.rep-chart{ position:relative; }
.rep-chart svg{ display:block; width:100%; height:170px; overflow:visible; }
/* Ohne eigene Regel faellt ein SVG-<rect> auf fill:black zurueck — die
   Balken im Verlauf waren deshalb schwarz. `ueber` markiert die Monate
   ueber dem Durchschnitt und ist der einzige Grund, warum die gestrichelte
   Mittellinie ueberhaupt etwas nuetzt. */
.rep-bar{ fill:var(--rep-gold-soft); transition:fill 140ms var(--rep-ease); }
.rep-bar.ueber{ fill:var(--rep-gold); }
.rep-chart:hover .rep-bar{ fill:var(--rep-gold-pale); }
.rep-chart .rep-bar:hover{ fill:var(--rep-gold-deep); }
.rep-flae{ fill:var(--rep-gold-wash); }
.rep-lin{ fill:none; stroke:var(--rep-gold); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round;
  vector-effect:non-scaling-stroke; }
.rep-pkt{ fill:var(--rep-surface); stroke:var(--rep-gold); stroke-width:1.6; vector-effect:non-scaling-stroke; }
.rep-grid{ stroke:var(--rep-div); stroke-width:1; vector-effect:non-scaling-stroke; }
.rep-mittel{ stroke:var(--rep-ink-4); stroke-width:1; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; }
.rep-chart-x{
  display:flex; justify-content:space-between; margin-top:6px;
  font-size:9.5px; color:var(--rep-ink-4); font-variant-numeric:tabular-nums;
}

/* ── Ring ────────────────────────────────────────────────────────────── */
.rep-ring{ display:flex; align-items:center; gap:14px; }
.rep-ring-svg{ width:132px; height:132px; flex:none; }
.rep-ring-zahl{
  text-anchor:middle; font-family:var(--rep-font-serif); font-weight:300;
  font-size:25px; fill:var(--rep-ink);
}
.rep-ring-txt{
  text-anchor:middle; font-size:8px; letter-spacing:.16em;
  fill:var(--rep-ink-4); text-transform:uppercase;
}
.rep-ring-leg{ list-style:none; margin:0; padding:0; flex:1; min-width:0; display:grid; gap:5px; }
.rep-ring-leg li{
  display:flex; align-items:center; gap:7px; font-size:11px; color:var(--rep-ink-2);
  font-variant-numeric:tabular-nums;
}
.rep-ring-leg i{ width:8px; height:8px; border-radius:2px; flex:none; }
.rep-ring-leg span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rep-ring-leg b{ font-weight:500; color:var(--rep-ink); }
.rep-ring-leg em{ font-style:normal; color:var(--rep-ink-4); font-size:10px; flex:none; min-width:30px; text-align:right; }

/* ── Liegende Balken ─────────────────────────────────────────────────── */
.rep-lbars{ display:grid; gap:8px; }
/* Feste Plaetze, KEINE Automatik: der Bauer gibt Name → Balken → Wert aus.
   Bei automatischer Platzierung schiebt der ueber beide Spalten laufende
   Balken den Wert in eine dritte Zeile, und aus zwei Zeilen werden drei. */
.rep-lb{ display:grid; grid-template-columns:1fr auto; gap:3px 8px; align-items:center; }
.rep-lb-n{ grid-column:1; grid-row:1; }
.rep-lb-w{ grid-column:2; grid-row:1; }
.rep-lb-n{
  font-size:11.5px; color:var(--rep-ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.rep-lb-w{ font-size:11.5px; color:var(--rep-ink); font-variant-numeric:tabular-nums; font-weight:500; }
.rep-lb-b{
  grid-column:1/-1; grid-row:2; height:5px; border-radius:3px;
  background:var(--rep-surface-sunk); overflow:hidden;
}
.rep-lb-b i{ display:block; height:100%; border-radius:3px; background:var(--rep-gold);
  transition:width 260ms var(--rep-ease); }

/* ── Stehende Saeulen ────────────────────────────────────────────────── */
/* Aufbau, den _repSaeulen() ausgibt — genau so und nicht anders:
     <div class="rep-sa">
       <span class="rep-sa-b" style="height:NN%"><i>7</i></span>   ← der BALKEN
       <span class="rep-sa-l">Mo</span>                            ← die Beschriftung
     </div>
   Hier stand zuerst eine Regel auf `.rep-sa i`. Das <i> ist aber die ZAHL,
   nicht der Balken — die Zahlen bekamen goldene Kaestchen und die Balken
   blieben Stummel. Sichtbar wurde es erst im Prüfstand.

   Warum ein Raster und kein Flexbau: die Hoehe der Saeule steht als Prozent
   im style-Attribut. Prozenthoehen brauchen einen Elternteil mit fester
   Hoehe. In einer Flexspalte, die sich Platz mit der Beschriftung teilt,
   waeren 100 % die GESAMThoehe — der hoechste Balken schoebe die
   Beschriftung aus dem Kasten. Die 1fr-Zeile gibt dem Balken einen eigenen,
   festen Bereich; 100 % heisst dann „so hoch wie der Balkenbereich". */
.rep-saeulen{ display:flex; align-items:stretch; gap:6px; height:126px; padding-top:14px; }
.rep-sa{
  flex:1; min-width:0; display:grid; grid-template-rows:1fr auto;
  align-items:end; justify-items:center; gap:5px;
}
.rep-sa-b{
  display:block; width:100%; align-self:end; position:relative;
  border-radius:3px 3px 0 0; background:var(--rep-gold-soft); min-height:3px;
  transition:background 140ms var(--rep-ease);
}
.rep-sa-b.alt{ background:var(--rep-krank); }   /* Dauer der Krankheitsfaelle */
.rep-sa:hover .rep-sa-b{ background:var(--rep-gold); }
.rep-sa:hover .rep-sa-b.alt{ background:var(--rep-krank); filter:brightness(1.12); }
.rep-sa-b i{
  position:absolute; left:0; right:0; top:-14px; text-align:center;
  font-style:normal; font-size:10px; color:var(--rep-ink-3);
  font-variant-numeric:tabular-nums;
}
.rep-sa-l{
  font-size:9.5px; color:var(--rep-ink-4); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

/* ── Urlaubsfortschritt ──────────────────────────────────────────────── */
.rep-fort{ display:grid; gap:9px; }
.rep-fo{ display:grid; gap:4px; }
.rep-fo-kopf{
  display:flex; justify-content:space-between; gap:8px;
  font-size:11.5px; color:var(--rep-ink-2); font-variant-numeric:tabular-nums;
}
.rep-fo-kopf span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.rep-fo-sub{ color:var(--rep-ink-4); flex:none; }
.rep-fo-bar{ height:5px; border-radius:3px; background:var(--rep-surface-sunk); overflow:hidden; }
.rep-fo-bar i{ display:block; height:100%; border-radius:3px; background:var(--rep-urlaub);
  transition:width 260ms var(--rep-ease); }

/* ── Ranglisten ──────────────────────────────────────────────────────── */
.rep-liste{ list-style:none; margin:0; padding:0; display:grid; gap:6px; counter-reset:r; }
.rep-liste li{
  display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--rep-ink-2);
  counter-increment:r; font-variant-numeric:tabular-nums;
}
.rep-liste li::before{
  content:counter(r); flex:none; width:16px; text-align:right;
  font-size:9.5px; color:var(--rep-ink-5);
}
.rep-li-n{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.rep-liste b{ font-weight:500; color:var(--rep-ink); }
.rep-liste b.warn{ color:var(--rep-warn); }

/* ── Tabelle ─────────────────────────────────────────────────────────── */
.rep-tab-huelle{ overflow-x:auto; }
.rep-tab{ width:100%; border-collapse:collapse; font-size:12px; }
.rep-tab th{
  text-align:left; font-weight:500; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rep-ink-4); padding:0 8px 8px; border-bottom:1px solid var(--rep-div-2);
  white-space:nowrap; user-select:none;
}
.rep-tab th[data-sort]{ cursor:pointer; }
.rep-tab th[data-sort]:hover{ color:var(--rep-ink-2); }
.rep-tab th.is-sortiert{ color:var(--rep-gold); }
.rep-tab th.rg{ width:26px; }
.rep-tab th.bar{ width:130px; }
.rep-tab td{
  padding:7px 8px; border-bottom:1px solid var(--rep-div); color:var(--rep-ink-2);
  font-variant-numeric:tabular-nums;
}
.rep-tab tbody tr:last-child td{ border-bottom:0; }
.rep-tab tbody tr:hover td{ background:var(--rep-gold-wash); }
.rep-tab .rg{ color:var(--rep-ink-5); font-size:10px; text-align:right; }
.rep-tab .nm{ color:var(--rep-ink); }
.rep-tab .gr{ color:var(--rep-ink-3); }
.rep-tab .num{ text-align:right; }
.rep-tab .num i{ font-style:normal; color:var(--rep-ink-5); font-size:10.5px; }
.rep-tab .hoch{ color:var(--rep-warn); font-weight:500; }
.rep-tab .ges{ color:var(--rep-ink); font-weight:500; }
.rep-mini{ display:block; height:4px; border-radius:2px; background:var(--rep-surface-sunk); overflow:hidden; }
.rep-mini i{ display:block; height:100%; border-radius:2px; background:var(--rep-krank); }

/* ── Leerzustand ─────────────────────────────────────────────────────── */
.rep-leer{
  color:var(--rep-ink-4); font-size:11.5px; font-style:italic;
  padding:14px 0; text-align:center;
}
td.rep-leer{ text-align:center; }

@media (prefers-reduced-motion:reduce){
  .rep-page *{ transition:none!important; }
}