/* ── Kalkulations-Dialog ─────────────────────────────────────────────────────
   1:1 zu KalkulationDialog.xaml (960×760): Kopf Titel links + Segment-Pills
   rechts in EINER Zeile, Formel-Block, zwei 50/50-Spalten (Referenz | Vorschau),
   Aufmaß/Modell, Fuß mit Löschen/Abbrechen/Speichern. Hülle aus dialog-basis.css. */
.kalk-dialog { width: 960px; height: 760px; max-width: 96vw; max-height: 92vh;
  display: flex; flex-direction: column; }
.kalk-kopf { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 6px; }
.kalk-kopf .dlg-sektion { margin: 0; }
.kalk-body { flex: 1; overflow-y: auto; padding: 0 12px 8px; min-height: 0; }

/* Segment-Pills (Desktop PillLeft/Middle/Right): zusammenhängend, außen rund,
   aktiv = Akzent + weiß. */
.kalk-pills { display: flex; }
.kalk-pill { background: var(--bg); border: 1px solid var(--rand); border-right: none;
  color: var(--text-2); height: 26px; padding: 0 14px; font-size: 11px; cursor: pointer; }
.kalk-pill:first-child { border-radius: 5px 0 0 5px; }
.kalk-pill:last-child { border-radius: 0 5px 5px 0; border-right: 1px solid var(--rand); }
.kalk-pill:hover { background: var(--hover); }
.kalk-pill.aktiv { background: var(--akzent); color: #fff; border-color: var(--akzent); }

/* Formel-Block. */
.kalk-beispiele code { font-size: 11px; }
.kalk-texte { background: var(--bg-tief); border: 1px solid var(--rand-fein); border-radius: 4px;
  padding: 6px 8px; font-family: Consolas, monospace; font-size: 11.5px;
  color: var(--text-2); margin: 6px 0 10px; min-height: 28px; }

/* Zwei 50/50-Spalten (XAML * / *). */
.kalk-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kalk-reftabelle { background: var(--bg-tief); border: 1px solid var(--rand);
  border-radius: 6px; padding: 8px; min-width: 0; }
.kalk-refscroller { max-height: 320px; overflow-y: auto; margin-bottom: 6px; }
.wz-tab-kopf.kalkref, .wz-tab-zeile.kalkref { grid-template-columns: 50px 90px 1fr 70px 50px;
  padding: 4px 6px; font-size: 11px; }
.wz-tab-zeile.kalkref { cursor: pointer; }
.wz-tab-zeile.kalkref:hover { background: var(--hover); }
.wz-tab-zeile.kalkref.kap { font-weight: 600; color: var(--text-2); }
.wz-tab-zeile.kalkref.gewaehlt { background: color-mix(in srgb, var(--akzent) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--akzent); }
.kalk-vorschau-spalte { display: flex; flex-direction: column; gap: 8px; }
.kalk-vorschau-box { background: var(--bg-tief); border: 1px solid var(--rand);
  border-radius: 6px; padding: 12px 14px; flex: 1; }
/* Vorschau-Überschrift = AppSectionLabel (Akzent, 11px). */
.kalk-vorschau-box .rund-sektion { color: var(--akzent); font-size: 11px; font-weight: 600; margin: 0 0 6px; }
.kalk-werte { font-size: 11px; color: var(--text-3); word-break: break-word; min-height: 16px; }
.kalk-ergebnis { font-size: 18px; font-weight: 600; margin: 4px 0 8px; }
.kalk-einheit { font-size: 12px; }
.kalk-einheit .akzent { color: var(--akzent); font-weight: 600; }
.kalk-warnung { color: var(--akzent); font-size: 11px; margin-top: 8px; }
.kalk-einheit-box { background: var(--bg-tief); border: 1px solid var(--rand);
  border-radius: 6px; padding: 10px 14px; }
.kalk-einheit-wahl { width: 160px; height: 28px; margin-top: 8px; display: block; }

/* Block-Überschrift (Aufmaß/Modell). */
.kalk-block-titel { margin: 4px 0 8px; }

/* Aufmaß-Zeilen (Nummer | Ausdruck | Kommentar | Ergebnis | ✕) + Kopf + Summe. */
.kalk-aufmass-zeile { display: grid; grid-template-columns: 28px 1fr 1fr 90px auto; gap: 8px;
  margin-bottom: 6px; align-items: center; }
.kalk-aufmass-kopf { color: var(--text-3); font-size: 11px; margin-bottom: 2px; }
.kalk-aufmass-kopf > span { padding: 0 2px; }
.kalk-nr { color: var(--text-3); font-size: 11px; text-align: right; }
.kalk-wert { text-align: right; font-size: 11px; color: var(--text-2); }
.kalk-da11-fuss { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.kalk-summe { font-size: 12.5px; color: var(--text-2); }

/* Modell-Ergebnisbox (Desktop Grid.Row 2): umrandet, Formel + Einheit. */
.kalk-modell-box { background: var(--bg-tief); border: 1px solid var(--rand);
  border-radius: 6px; padding: 12px 14px; margin-top: 8px; }
.kalk-modell-formel { font-size: 12px; color: var(--text-2); margin: 0 0 6px; word-break: break-word; }
/* Ergebnis + Einheit (Desktop TxtModellErgebnis/TxtModellEinheit). */
.kalk-modell-erg { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 4px;
  font-variant-numeric: tabular-nums; }
.kalk-modell-einheit { margin-left: 8px; color: var(--akvs-fg); font-weight: 600; }
.kalk-modell-regel { font-size: 11px; color: var(--text-3); margin: 0 0 8px; }

/* Modell-Term-Editor. Jeder Term als kleine Karte; Gruppen als eingerückte,
   farbig berandete Boxen (Farbe wechselt je Verschachtelungstiefe). */
.mt-zeile { display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin: 3px 0;
  background: var(--bg-alt); border: 1px solid var(--rand-fein); border-radius: 6px; font-size: 12.5px; }
.mt-op { width: 52px; text-align: center; }
.mt-leer { width: 52px; display: inline-block; }
.mt-wert { width: 110px; text-align: right; }
.mt-prozent { display: flex; align-items: center; gap: 4px; font-size: 12px;
  color: var(--text-2); cursor: pointer; }
.mt-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-zeile .sperr-loeschen { margin-left: auto; }
.mt-aktionen { display: flex; gap: 8px; margin-top: 10px; }

/* Objekt-Term-Steuerung */
.mt-pick { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-modus { width: 92px; }
.mt-attr  { width: 130px; }
.mt-agg   { width: 84px; }
.mt-erg   { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-gruppe-lbl { font-weight: 600; }
/* Gruppe (Klammer): eingerückter Kasten mit farbiger linker Leiste (wie Desktop-Rail),
   Farbe wechselt je Verschachtelungstiefe — so ist die Klammer-Struktur sichtbar. */
.mt-gruppe-box { margin: 2px 0 8px 16px; padding: 6px 10px 2px;
  border: 1px solid var(--rand-fein); border-left-width: 4px; border-radius: 8px;
  background: #00000012; }
.mt-tiefe-0 { border-left-color: #7F77DD; }  /* violett (Desktop-Rail) */
.mt-tiefe-1 { border-left-color: #3FB4A6; }  /* teal */
.mt-tiefe-2 { border-left-color: #E0A020; }  /* amber */
.mt-tiefe-3 { border-left-color: #D46A9A; }  /* rosé */
.mt-tiefe-4 { border-left-color: #5B9BD5; }  /* blau */
.mt-gl-0 { color: #7F77DD; }
.mt-gl-1 { color: #3FB4A6; }
.mt-gl-2 { color: #E0A020; }
.mt-gl-3 { color: #D46A9A; }
.mt-gl-4 { color: #5B9BD5; }

/* ── Bausteine + Formel (Konzept A) ── */
.bf-schritt { font-size: 12.5px; font-weight: 600; color: var(--text); margin: 14px 0 6px; }
.bf-hint { font-weight: 400; color: var(--text-3); font-size: 11.5px; }
.bf-bausteine { display: flex; flex-direction: column; gap: 6px; }
.bf-blk { display: flex; align-items: center; gap: 8px; background: var(--bg-alt);
  border: 1px solid var(--rand-fein); border-radius: 8px; padding: 6px 9px; }
.bf-key { font-family: var(--mono, monospace); font-weight: 700; font-size: 13px;
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px;
  color: #12121a; flex: none; }
/* Baustein-Farben je Index (wie Mockup: violett, teal, amber, rosé, blau). */
.bf-c0 { background: #7F77DD; } .bf-c1 { background: #3FB4A6; } .bf-c2 { background: #E0A020; }
.bf-c3 { background: #D46A9A; } .bf-c4 { background: #5B9BD5; }
.bf-obj { flex: 1; min-width: 120px; text-align: left; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bf-flt { flex: none; }
.bf-modus { width: 92px; } .bf-attr { width: 120px; } .bf-agg { width: 82px; }
.bf-quelle { min-width: 150px; max-width: 210px; }
.bf-val { font-family: var(--mono, monospace); color: var(--text-2); font-size: 12.5px;
  white-space: nowrap; min-width: 90px; text-align: right; }
.bf-add { display: flex; gap: 8px; margin-top: 10px; }
.bf-formel { width: 100%; font-size: 16px; padding: 11px 12px; }
.bf-formel.bf-fehler { border-color: var(--gefahr); }
.bf-fehlertext { margin: 6px 0 0; }
.bf-palette { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; align-items: center; }
.bf-chip { font-family: var(--mono, monospace); font-weight: 700; font-size: 13px;
  min-width: 30px; height: 30px; padding: 0 8px; color: #12121a;
  border: none; border-radius: 7px; cursor: pointer; }
.bf-op { font-family: var(--mono, monospace); font-size: 16px; width: 34px; height: 30px;
  background: var(--bg-alt); color: var(--text); border: 1px solid var(--rand);
  border-radius: 7px; cursor: pointer; }
.bf-op:hover { border-color: var(--akvs-fg); }
.bf-pgap { width: 10px; }

/* Gewählter Verknüpfungs-Operator (Anwender-Feedback): deutlich eingefärbt —
   die nächste eingefügte ID (Doppelklick/Drag&Drop) nutzt ihn. */
.bf-op.aktiv { background: var(--oeko-bg); color: var(--oeko-fg);
  border-color: var(--oeko-fg); font-weight: 700; }