/* ===========================================================================
   lohnrechner.css — Optik für window.Lohnrechner.Komponente

   ÜBERNOMMEN AM 15.09.2026 INS DASHBOARD (CS-LOHN).

   Stefans Auftrag vom 14.09.2026 sagt dazu einen Satz: **„Kein goldener
   Fremdkörper."** Die Datei kam mit einem eigenen Look — sehr dunkles
   Anthrazit, goldene Akzente —, und der sah im hellen Dashboard aus wie ein
   Bauteil aus einem anderen Programm. Schlimmer als hässlich: Ein Block, der
   seine eigenen Farben mitbringt, folgt den sechs Themes nicht. Wer auf ein
   dunkles Theme umschaltet, hätte danach zwei verschiedene Dunkel gehabt.

   GEÄNDERT IST NUR DIESER KOPF. Die 340 Zeilen darunter sind unberührt —
   sie sprechen ohnehin ausschliesslich über die sieben Variablen, und die
   zeigen ab jetzt auf die Tokens des Dashboards (`--ks-*`, gesetzt von
   `themeNachCss` in app/js/ui.js). Damit wandert der Rechner mit jedem
   Theme mit, ohne dass hier je wieder eine Farbe steht.

   Die Ersatzwerte hinter dem Komma sind der alte CCTL-Look. Sie greifen
   nur, wenn gar kein Theme gesetzt ist — dann ist der Rechner immer noch
   lesbar, statt schwarz auf schwarz.

   DIE VARIABLEN STEHEN AUF :root UND NICHT AUF .lr-wurzel. Grund: Die
   Mitarbeitersicht „Mein Lohn" zeichnet die Treppengrafik ALLEIN, ohne die
   Komponente drumherum (sie brächte Schieber mit, und die soll dort keiner
   sehen). Stünden die Variablen an der Wurzel, stünde die Kurve dort ohne
   Farben da.

   Alle Regeln sind weiterhin auf .lr-* begrenzt und kollidieren nicht mit
   dem übrigen Dashboard. Rücknehmbar über die eine <link>-Zeile.
   =========================================================================== */

:root {
  --lr-grund:    var(--ks-surface,       #121216);
  --lr-karte:    var(--ks-surface2,      #1a1a20);
  --lr-kante:    var(--ks-border,        #2b2b34);
  /* Der Akzent des Themes tritt an die Stelle des Goldes. „lr-gold-2" ist im
     Original die hellere Schwester für die grosse Zahl; im Dashboard ist die
     grosse Zahl schlicht der Text — kräftiger als jeder Akzent und in jedem
     der sechs Themes lesbar. */
  --lr-gold:     var(--ks-accent,        #d8b24c);
  --lr-gold-2:   var(--ks-text,          #f2d98a);
  --lr-text:     var(--ks-text,          #ecebe6);
  --lr-leise:    var(--ks-muted,         #8e8c98);
}

.lr-wurzel {
  color: var(--lr-text);
  background: var(--lr-grund);
  /* Schrift und Grösse kommen aus dem Dashboard, nicht aus dieser Datei —
     sonst stünde im Rechner eine andere Schrift als eine Karte weiter oben. */
  font: inherit;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding: 28px;
  border: 1px solid var(--lr-kante);
  border-radius: 10px;   /* dieselbe Rundung wie UI.Card */
  max-width: 860px;
  margin: 0 auto;
}

.lr-wurzel h3 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--lr-leise);
}

/* ------------------------------------------------------------------- Kopf */

.lr-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--lr-kante);
}

.lr-summe {
  font-size: clamp(38px, 7vw, 58px);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--lr-gold-2);
}

.lr-summe-unter {
  margin-top: 9px;
  color: var(--lr-leise);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.lr-kopf-punkte { text-align: right; flex-shrink: 0; }

.lr-punktzahl {
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--lr-text);
}

.lr-punkt-unter { color: var(--lr-leise); font-size: 12.5px; margin-top: 4px; }

/* ----------------------------------------------------------------- Grafik */

.lr-grafik { margin: 22px 0 6px; }
.lr-grafik svg { width: 100%; height: auto; display: block; overflow: visible; }

.lr-gitter       { stroke: var(--lr-kante); stroke-width: 1; }
.lr-basislinie   { stroke: var(--lr-leise); stroke-width: 1; stroke-dasharray: 3 5; opacity: .75; }
.lr-flaeche      { fill: var(--lr-gold); opacity: .10; }
.lr-linie        { fill: none; stroke: var(--lr-gold); stroke-width: 2.25;
                   stroke-linejoin: round; stroke-linecap: round; }
.lr-markerlinie  { stroke: var(--lr-gold-2); stroke-width: 1; opacity: .5; }
.lr-marker       { fill: var(--lr-gold-2); stroke: var(--lr-grund); stroke-width: 3; }

.lr-markertext {
  fill: var(--lr-gold-2); font-size: 15px; font-weight: 700;
  text-anchor: middle; font-variant-numeric: tabular-nums;
}

.lr-achse { fill: var(--lr-leise); font-size: 12px; font-variant-numeric: tabular-nums; }
.lr-achse-y { text-anchor: end; }
.lr-achse-x { text-anchor: middle; }
.lr-achse-ist { fill: var(--lr-gold-2); font-weight: 600; }
.lr-links  { text-anchor: start; }
.lr-rechts { text-anchor: end; }

.lr-naechste {
  margin: 2px 0 0;
  color: var(--lr-leise);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ Blöcke */

.lr-block {
  margin-top: 22px;
  padding: 20px;
  background: var(--lr-karte);
  border: 1px solid var(--lr-kante);
  border-radius: 10px;
}

.lr-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}

.lr-feld { display: flex; flex-direction: column; gap: 7px; }
.lr-feld-titel { font-size: 13px; color: var(--lr-text); }

.lr-feld-eingabe {
  display: flex; align-items: center; gap: 8px;
  background: var(--lr-grund);
  border: 1px solid var(--lr-kante);
  border-radius: 7px;
  padding: 0 11px;
  transition: border-color .12s ease;
}
.lr-feld-eingabe:focus-within { border-color: var(--lr-gold); }

.lr-feld-eingabe input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--lr-text);
  font: inherit; font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 11px 0;
}

.lr-einheit { color: var(--lr-leise); font-size: 13px; flex-shrink: 0; }
.lr-feld-hinweis { font-size: 12px; color: var(--lr-leise); }

/* --------------------------------------------------------------- Schieber */

.lr-schieber-zeile { display: flex; align-items: center; gap: 16px; }

.lr-schieber {
  flex: 1; min-width: 0;
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px;
  background: var(--lr-kante);
  outline: none;
}
.lr-schieber::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--lr-gold); border: 3px solid var(--lr-karte);
  cursor: pointer;
}
.lr-schieber::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--lr-gold); border: 3px solid var(--lr-karte);
  cursor: pointer;
}
.lr-schieber:focus-visible { box-shadow: 0 0 0 3px var(--ks-accent-ring, rgba(216,178,76,.3)); }

.lr-ist-zahl {
  width: 92px; flex-shrink: 0;
  background: var(--lr-grund);
  border: 1px solid var(--lr-kante);
  border-radius: 7px;
  color: var(--lr-gold-2);
  font: inherit; font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 8px 4px;
  outline: none;
}
.lr-ist-zahl:focus { border-color: var(--lr-gold); }

/* ------------------------------------------------------------ Umschalter */

.lr-umschalter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.lr-schalter {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left;
  padding: 11px 13px;
  background: var(--lr-grund);
  border: 1px solid var(--lr-kante);
  border-radius: 8px;
  color: var(--lr-leise);
  font: inherit;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.lr-schalter:hover { border-color: var(--lr-leise); }
.lr-schalter.lr-aktiv {
  border-color: var(--lr-gold);
  background: var(--ks-surface3, rgba(216,178,76,.09));
  color: var(--lr-text);
}
.lr-schalter-titel { font-size: 13.5px; font-weight: 600; }
.lr-schalter-hinweis { font-size: 11.5px; line-height: 1.35; }

.lr-haken {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin-top: 14px; font-size: 13.5px; cursor: pointer;
}
.lr-haken input { accent-color: var(--lr-gold); width: 15px; height: 15px; }
.lr-haken-hinweis { color: var(--lr-leise); font-size: 12.5px; width: 100%; padding-left: 24px; }

/* ------------------------------------------------ Was ein Klient kostet */

.lr-kosten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--lr-kante);
  border: 1px solid var(--lr-kante);
  border-radius: 8px;
  overflow: hidden;
}

.lr-kosten-feld { background: var(--lr-grund); padding: 15px 16px; }

.lr-kosten-wert {
  font-size: 25px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--lr-text);
}
.lr-kosten-heraus .lr-kosten-wert { color: var(--lr-gold-2); }

.lr-kosten-titel { margin-top: 6px; font-size: 13px; color: var(--lr-text); }
.lr-kosten-formel {
  margin-top: 3px; font-size: 11.5px; color: var(--lr-leise);
  font-variant-numeric: tabular-nums;
}

.lr-kosten-fazit {
  margin: 12px 0 0; font-size: 13px; color: var(--lr-leise);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- Details-Klappe */

.lr-details { margin-top: 22px; }

.lr-details-kopf {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  list-style: none; cursor: pointer;
  padding: 13px 16px;
  background: var(--lr-karte);
  border: 1px solid var(--lr-kante);
  border-radius: 10px;
  transition: border-color .12s ease;
}
.lr-details-kopf::-webkit-details-marker { display: none; }
.lr-details-kopf:hover { border-color: var(--lr-leise); }
.lr-details-kopf:focus-visible { outline: 2px solid var(--lr-gold); outline-offset: 2px; }

.lr-details-kopf::before {
  content: "";
  width: 7px; height: 7px; flex-shrink: 0;
  border-right: 1.5px solid var(--lr-gold);
  border-bottom: 1.5px solid var(--lr-gold);
  transform: rotate(-45deg) translate(-1px, 1px);
  transition: transform .15s ease;
  align-self: center;
}
.lr-details[open] .lr-details-kopf::before {
  transform: rotate(45deg) translate(-1px, -1px);
}

.lr-details-titel { font-size: 13.5px; font-weight: 600; color: var(--lr-text); }
.lr-details-hinweis { font-size: 12.5px; color: var(--lr-leise); }

.lr-details[open] .lr-details-kopf {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.lr-details[open] .lr-details-kopf + .lr-block {
  margin-top: 0;
  border-top-left-radius: 0; border-top-right-radius: 0;
}

/* ------------------------------------------------------------- Rechenweg */

.lr-rechenweg { list-style: none; margin: 0; padding: 0; counter-reset: lrschritt; }

.lr-rechenweg li {
  counter-increment: lrschritt;
  display: flex; align-items: baseline; gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--lr-kante);
  font-size: 13.5px;
}
.lr-rechenweg li:last-child { border-bottom: 0; padding-bottom: 0; }

.lr-rechenweg li::before {
  content: counter(lrschritt);
  flex-shrink: 0; width: 20px;
  color: var(--lr-leise); font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.lr-schritt-text { flex: 1; color: var(--lr-leise); font-variant-numeric: tabular-nums; }
.lr-schritt-wert { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.lr-rechenweg li.lr-stark { padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--lr-kante); }
.lr-rechenweg li.lr-stark .lr-schritt-text { color: var(--lr-text); }
.lr-rechenweg li.lr-stark .lr-schritt-wert { color: var(--lr-gold-2); font-size: 17px; }

/* --------------------------------------------------------------- Tabelle */

.lr-tabelle {
  width: 100%; border-collapse: collapse;
  font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.lr-tabelle th {
  text-align: right; font-weight: 500; font-size: 12px;
  color: var(--lr-leise);
  padding: 0 0 9px; border-bottom: 1px solid var(--lr-kante);
}
.lr-tabelle th:first-child, .lr-tabelle td:first-child { text-align: left; }
.lr-tabelle td { text-align: right; padding: 9px 0; border-bottom: 1px solid var(--lr-kante); }
.lr-tabelle tr:last-child td { border-bottom: 0; }

.lr-tabelle tr.lr-zeile-aktiv td {
  color: var(--lr-gold-2); font-weight: 600;
  background: var(--ks-surface3, rgba(216,178,76,.07));
}
.lr-tabelle tr.lr-zeile-aktiv td:first-child { box-shadow: inset 2px 0 0 var(--lr-gold); }

/* ----------------------------------------------------------------- Klein */

@media (max-width: 560px) {
  .lr-wurzel { padding: 18px; }
  .lr-block { padding: 16px; }
  .lr-kopf { align-items: flex-start; flex-direction: column; }
  .lr-kopf-punkte { text-align: left; }
}

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