/* ===========================================================================
   ALVA Projekt-Monitoring -- Komponenten
   ---------------------------------------------------------------------------
   Deckt die Klassennamen ab, die die portierte Render-Logik erzeugt
   (app/ui-dialog.js). Die Logik ist unveraendert uebernommen, das Aussehen
   ist neu: keine Emoji-Ampeln, keine schwarzen Vollflaechen ausser im Kopf,
   Zahlen mit Tabellenziffern, scharfe Inputs, Pill-Buttons.
   =========================================================================== */

/* ------------------------------------------------------------ Ampel-Zusatz */
.ampel[data-farbe="na"]        { color: var(--alva-pale-steel); }
.ampel[data-farbe="unklar"]    { color: var(--ink-4); }
.ampel[data-farbe="geaendert"] { color: var(--ampel-gruen); }
.ampel[data-farbe="geaendert"] .punkt {
  background: var(--ampel-gruen);
  box-shadow: 0 0 0 1.5px var(--pure-white), 0 0 0 3px var(--ampel-gelb);
  margin-right: 2px;
}
.ampel[data-farbe="na"] .punkt {
  background: transparent;
  border: 1.5px solid var(--alva-pale-steel);
  width: 8px; height: 8px;
}
.ampel[data-farbe="unklar"] .punkt {
  background: transparent;
  border: 1.5px dashed var(--ink-4);
}

td .ampel + .ampel { margin-left: 5px; }

/* ------------------------------------------------------------------- Zellen */
.laedt, .loading {
  color: var(--ink-4);
  font-family: var(--font-ui);
  font-size: .8rem;
  padding: 26px 12px;
  display: block;
  text-align: center;
}
td.laedt, td.loading { display: table-cell; }

.sf-link {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--alva-light-blue);
  white-space: nowrap;
}
.adresse-account-hint,
.rechnerisch-hint,
.wochen-bis-baubeginn-hint,
.hinweis-zart {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--ink-4);
}
.rechnerisch-hint { font-style: italic; }

td.baubeginn-cell { background: #FCFCFD; }
td.baubeginn-cell, th.baubeginn-th { border-left: 2px solid var(--alva-yellow); }

td.baureif-cell { text-align: left; white-space: nowrap; }

/* Spaltenkopf-Hilfe: (?) mit Tooltip
   ---------------------------------------------------------------------------
   WICHTIG: hier darf KEIN opacity auf .col-help/.baureif-help stehen. Der
   Tooltip ist ein KIND dieses Elements und hat opacity geerbt -- genau das
   war der Grund, warum die Tooltips durchscheinend/schlecht lesbar waren.
   Die dezente Optik des (?) macht jetzt die Farbe, nicht die Deckkraft. */
.baureif-help, .col-help {
  position: relative;
  margin-left: 4px;
  cursor: help;
  font-size: 10px;
  color: rgba(255, 255, 255, .58);
  font-family: var(--font-ui);
}
.baureif-help:hover, .col-help:hover { color: var(--alva-yellow); }

.bf-tooltip, .col-help-tooltip {
  display: none;
  position: absolute;
  top: 150%;
  left: 0;
  z-index: 70;
  width: 310px;
  white-space: pre-line;
  /* Deckend, nicht durchscheinend: fester Hex-Wert ohne Alpha, plus ein
     zweiter Kasten als Rahmen. Vorher schien der Tabellenkopf durch. */
  background: #0B1420;
  color: var(--pure-white);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 7px;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .1px;
  box-shadow: 0 10px 32px rgba(5, 11, 19, .5);
  text-transform: none;
  text-align: left;
  pointer-events: none;
}
/* Nahe am rechten Rand nach links ausklappen, damit der Tooltip nicht aus
   dem Scrollbereich der Tabelle herausläuft. */
.col-help.nach-links .col-help-tooltip,
.baureif-help.nach-links .bf-tooltip { left: auto; right: 0; }

.baureif-help:hover .bf-tooltip,
.baureif-help:focus-visible .bf-tooltip,
.col-help:hover .col-help-tooltip,
.col-help:focus-visible .col-help-tooltip { display: block; }

/* -------------------------------------------- Baubarkeit-Zelle (aufklappbar) */
td.baubarkeit-cell { cursor: pointer; white-space: nowrap; }
.bb-arrow {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 5px;
  border-right: 1.5px solid var(--ink-4);
  border-bottom: 1.5px solid var(--ink-4);
  transform: rotate(-45deg);
  transition: transform .15s;
  font-size: 0;
  color: transparent;
  vertical-align: middle;
}
td.baubarkeit-cell.expanded .bb-arrow,
td.verkaufspreis-cell.expanded .vp-arrow { transform: rotate(45deg); }
.bb-count {
  margin-left: 6px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.bb-detail { display: none; margin-top: 5px; }
td.baubarkeit-cell.expanded .bb-detail { display: flex; flex-wrap: wrap; gap: 3px; max-width: 260px; }
.bb-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px;
  border-radius: var(--radius-tag);
  font-family: var(--font-ui);
  font-size: 10px;
  white-space: nowrap;
  background: var(--alva-pale-grey);
  color: var(--ink-3);
}
.bb-badge.ok      { background: var(--ok-bg);   color: #04664B; }
.bb-badge.warn    { background: var(--warn-bg); color: #8A4108; }
.bb-badge.bad     { background: var(--bad-bg);  color: #A81C1C; }
.bb-badge.unknown { background: var(--alva-pale-grey); color: var(--ink-3); }
.bb-badge.na      { background: transparent; color: var(--alva-pale-steel); border: 1px solid var(--line); }
.bb-badge.changed { background: var(--alva-pale-yellow); color: #6B5A00; }

/* --------------------------------------- Verkaufspreis-Zelle (aufklappbar) */
td.verkaufspreis-cell { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
td.verkaufspreis-cell[onclick] { cursor: pointer; }
.vp-arrow {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 5px;
  border-right: 1.5px solid var(--ink-4);
  border-bottom: 1.5px solid var(--ink-4);
  transform: rotate(-45deg);
  transition: transform .15s;
  font-size: 0; color: transparent;
  vertical-align: middle;
}
.vp-detail { display: none; }
td.verkaufspreis-cell.expanded .vp-detail {
  display: block;
  margin-top: 6px;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--ink-3);
}
.vp-group + .vp-group { margin-top: 5px; }
.vp-group-title { font-weight: 600; color: var(--ink-2); }
.vp-row { padding-left: 8px; font-variant-numeric: tabular-nums; }
.vp-import-warnung {
  margin-top: 5px;
  font-family: var(--font-ui); font-size: 10px;
  color: #8A4108; background: var(--warn-bg);
  border-radius: var(--radius-tag); padding: 1px 6px;
  display: inline-block; text-align: left; white-space: normal;
}

/* --------------------------------------------------------- Spalten-Filter
   Vorher stand hier ein "▾" (kleines Dreieck) bei 9px und halber
   Deckkraft -- auf dem schwarzen Tabellenkopf war schlicht nicht erkennbar,
   dass man damit filtern kann. Jetzt ein echter Trichter als SVG, in einer
   antippbaren Flaeche. */
.col-filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 5px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  color: rgba(255, 255, 255, .55);
  background: transparent;
  transition: background .12s, color .12s;
}
.col-filter-icon svg { width: 11px; height: 11px; display: block; }
.col-filter-icon:hover {
  color: var(--pure-white);
  background: rgba(255, 255, 255, .16);
}
/* Aktiver Filter: gefuellter Trichter in Marken-Gelb plus Rahmen, damit man
   auf einen Blick sieht, WELCHE Spalte gefiltert ist. */
.col-filter-icon.active {
  color: var(--alva-anthrazit);
  background: var(--alva-yellow);
}
.col-filter-icon.active:hover { background: #F2EF20; color: var(--alva-anthrazit); }

.col-filter-popup {
  display: none;
  position: fixed;
  z-index: 55;
  width: 236px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 34px rgba(5, 11, 19, .22);
  font-family: var(--font-ui);
  font-size: .78rem;
  overflow: hidden;
}
.cf-header {
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-head);
}
/* .cf-search IST das Eingabefeld (nicht ein Wrapper) - der Selektor
   ".cf-search input" darunter hat deshalb nie etwas getroffen und das Feld
   blieb schmaler als das Popup. */
.cf-search { width: 100%; }
.cf-list { max-height: 232px; overflow-y: auto; padding: 5px 0; }
.cf-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 11px;
  cursor: pointer;
  color: var(--ink-2);
}
.cf-item:hover { background: var(--alva-pale-grey); }
.cf-item input { accent-color: var(--alva-anthrazit); flex: 0 0 auto; }
.cf-actions { display: flex; gap: 10px; padding: 7px 11px; border-top: 1px solid var(--line); }
.cf-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 9px 11px; border-top: 1px solid var(--line);
  background: #FAFBFC;
}

/* ------------------------------------------------- Spalten-Sichtbarkeit */
.col-visibility-wrapper { position: relative; display: inline-block; }
.col-visibility-popup {
  display: none;
  position: absolute;
  right: 0; top: calc(100% + 5px);
  z-index: 55;
  width: 268px; max-height: 340px; overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 34px rgba(5, 11, 19, .22);
  padding: 7px 0;
  font-family: var(--font-ui); font-size: .78rem;
}
.col-visibility-popup label {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px; cursor: pointer; color: var(--ink-2);
}
.col-visibility-popup label:hover { background: var(--alva-pale-grey); }
.col-visibility-popup .cf-actions { padding: 7px 12px; }

/* -------------------------------------------------------------- Detailkarte */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: .78rem;
  color: var(--ink-3); cursor: pointer;
  background: none; border: 0; padding: 0;
  margin-bottom: 12px;
}
.back-link:hover { color: var(--ink); text-decoration: underline; }
.back-link::before {
  content: '';
  width: 6px; height: 6px;
  border-left: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
}

.detail-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(318px, 1fr)); gap: 14px; align-items: start; }
.detail-body .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 15px 16px;
}
.section-title {
  font-family: var(--font-head); font-size: .85rem; font-weight: 500;
  color: var(--ink); margin-bottom: 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.field-row {
  display: grid; grid-template-columns: minmax(112px, auto) 1fr;
  gap: 4px 12px; padding: 3px 0;
  font-size: 12.5px;
}
.field-label { font-family: var(--font-ui); font-size: .74rem; color: var(--ink-4); }
.field-value { color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.field { padding: 3px 0; }

.kern-ampeln { display: flex; flex-wrap: wrap; gap: 6px; }
.kern-ampel-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 50px;
  font-family: var(--font-ui); font-size: 11px;
  color: var(--ink-2);
  background: var(--pure-white);
}
.killer-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0; font-size: 12px;
}
.killer-label { font-family: var(--font-ui); font-size: .74rem; color: var(--ink-4); min-width: 118px; }
.killer-value { color: var(--ink-2); }

.baureif-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px;
  border-radius: var(--radius-card);
  background: var(--alva-pale-grey);
  font-family: var(--font-ui); font-size: .8rem;
  margin-bottom: 12px;
}

/* ------------------------------------------------------------- Maßnahmen */
.massnahme-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.massnahme-item:last-child { border-bottom: 0; }
.massnahme-item input[type="checkbox"] { margin-top: 3px; accent-color: var(--ok); flex: 0 0 auto; }
.massnahme-item.done .m-text, .massnahme-item.erledigt .m-text {
  text-decoration: line-through; color: var(--ink-4);
}
.m-date {
  font-family: var(--font-ui); font-size: 10.5px; color: var(--ink-4);
  font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 66px;
}
.m-text { flex: 1 1 auto; color: var(--ink-2); overflow-wrap: anywhere; }
.m-owner { font-family: var(--font-ui); font-size: 10.5px; color: var(--ink-4); white-space: nowrap; }
.add-form { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 11px; }
.add-form input[type="text"] { flex: 1 1 160px; min-width: 120px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px; border-radius: var(--radius-tag);
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 500;
  background: var(--alva-pale-grey); color: var(--ink-3);
}
.badge.offen { background: var(--warn-bg); color: #8A4108; }
.badge.erledigt, .badge.done { background: var(--ok-bg); color: #04664B; }

/* ------------------------------------------------------------- Kalender */
.kalender-monate, .kal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; }
.kalender-monat, .kalender-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  overflow: hidden;
}
.kalender-monat-titel, .kalender-month-heading, .kal-grid-header {
  padding: 9px 12px;
  background: var(--alva-pale-grey);
  font-family: var(--font-head); font-size: .85rem; font-weight: 500;
  color: var(--ink);
}
.kal-grid-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.kal-weekday {
  text-align: center; padding: 5px 0;
  font-family: var(--font-ui); font-size: .66rem; color: var(--ink-4);
  border-bottom: 1px solid var(--line);
}
.kal-day {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 2px 6px;
  min-height: 42px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui); font-size: .74rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.kal-day-empty { background: #FBFBFC; color: var(--alva-pale-steel); }
.kal-day-today { background: var(--alva-pale-yellow); }
.kal-day-num { font-weight: 500; }
.kal-day-today .kal-day-num { font-weight: 700; }
.kal-day-has-projects { cursor: pointer; }
.kal-day-has-projects:hover { background: var(--alva-pale-grey); }
.kal-day-projects { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.kal-day-pill {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; background: var(--alva-steel);
}
.kal-day-pill.gruen  { background: var(--ampel-gruen); }
.kal-day-pill.gelb   { background: var(--ampel-gelb); }
.kal-day-pill.orange { background: var(--ampel-orange); }
.kal-day-pill.rot    { background: var(--ampel-rot); }
.kal-day-more { font-size: 9px; color: var(--ink-4); }

.kc-order  { font-family: var(--font-ui); font-size: 10.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.kc-account{ font-weight: 600; color: var(--ink); }
.kc-adresse{ color: var(--ink-3); font-size: 12px; }
.kc-dates  { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.kc-date-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px; border-radius: var(--radius-tag);
  background: var(--alva-pale-grey); color: var(--ink-3);
  font-family: var(--font-ui); font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.kc-day { font-family: var(--font-ui); font-size: .74rem; color: var(--ink-4); }

/* ------------------------------------------------------------ Datenqualität */
.dq-kpi {
  display: inline-flex; align-items: baseline; gap: 7px;
  margin-right: 20px;
  font-family: var(--font-ui); font-size: .76rem; color: var(--ink-4);
}
.dq-kpi b {
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.dq-kpi.blocker b   { color: var(--bad); }
.dq-kpi.warnungen b { color: var(--warn); }
.dq-kpi.ok b        { color: var(--ok); }

.dq-regel {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--card);
  margin-bottom: 9px;
  overflow: hidden;
}
.dq-regel.blocker { border-left-color: var(--bad); }
.dq-regel.warnung { border-left-color: var(--warn); }
.dq-regel.leer    { border-left-color: var(--ok); opacity: .72; }
.dq-regel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; cursor: pointer;
}
.dq-regel-head:hover { background: #FAFBFC; }
.dq-regel-badge {
  font-family: var(--font-head); font-weight: 500; font-size: 1rem;
  min-width: 34px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.dq-regel.blocker .dq-regel-badge { color: var(--bad); }
.dq-regel.warnung .dq-regel-badge { color: var(--warn); }
.dq-regel.leer .dq-regel-badge    { color: var(--ok); }
.dq-regel-label {
  flex: 1 1 auto;
  font-family: var(--font-head); font-size: .85rem; font-weight: 500;
  color: var(--ink);
}
.dq-regel-hinweis {
  padding: 0 13px 11px;
  font-family: var(--font-ui); font-size: 11.5px; line-height: 1.55;
  color: var(--ink-3);
}
.dq-regel-body { display: none; }
.dq-regel.offen .dq-regel-body { display: block; }
.dq-regel-body table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dq-regel-body table th {
  text-align: left; padding: 6px 13px;
  background: var(--alva-pale-grey);
  font-family: var(--font-ui); font-weight: 500; font-size: 11px;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
}
.dq-regel-body table td {
  padding: 5px 13px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.dq-regel-fehler { padding: 10px 13px; color: var(--bad); font-size: 12px; }

/* ------------------------------------------------------------- Forecast */
.forecast-eoy-stat {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  min-width: 168px;
}
.forecast-eoy-stat .fs-label {
  font-family: var(--font-ui); font-size: .72rem; color: var(--ink-4);
}
.forecast-eoy-stat .fs-value {
  font-family: var(--font-head); font-size: 1.32rem; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.15;
}

.forecast-quartal-chip {
  display: inline-flex; flex-direction: column; gap: 3px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  min-width: 152px;
}
.chip-head {
  font-family: var(--font-head); font-size: .8rem; font-weight: 500; color: var(--ink);
}
.chip-summary { display: grid; gap: 1px; }
.fq-row {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-ui); font-size: 11px;
}
.fq-label { color: var(--ink-4); min-width: 84px; }
.fq-k { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 500; }
.fq-row.delta .fq-k { color: var(--bad); }

/* Balkengrafik -- SPALTENdiagramm: eine Saeule je Periode, gestapelt nach
   Betreibermodell. Die Segmenthoehen kommen als Inline-Style aus
   renderForecastChart_(); das CSS darf sie nicht ueberschreiben, sondern nur
   Ausrichtung und Farbe liefern. */
#forecast-chart-wrap {
  display: flex;
  align-items: flex-end;      /* Saeulen stehen auf einer gemeinsamen Grundlinie */
  gap: 10px;
  padding: 8px 2px 0;
  min-height: 300px;
}
.forecast-chart-period {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex: 0 0 auto;
  min-width: 62px;
}
.forecast-chart-total {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  order: -1;                   /* Summe ueber der Saeule */
}
.forecast-chart-bars { display: flex; align-items: flex-end; gap: 4px; }
.forecast-chart-bar {
  position: relative;
  width: 38px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* Segmente stapeln von unten */
  border-radius: 2px 2px 0 0;
  overflow: hidden;
}
.forecast-chart-seg { position: relative; width: 100%; }
.forecast-chart-seg:hover { filter: brightness(1.12); }
.forecast-chart-barlabel {
  font-family: var(--font-ui);
  font-size: 9.5px;
  color: var(--ink-4);
  white-space: nowrap;
}
.forecast-chart-label {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Werte-Tooltip: liegt im Segment, wird erst beim Zeigen sichtbar. */
.chart-tip {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  z-index: 20;
  white-space: nowrap;
  background: var(--alva-black);
  color: var(--pure-white);
  border-radius: 6px;
  padding: 7px 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(5, 11, 19, .3);
  pointer-events: none;
}
.chart-tip b { font-variant-numeric: tabular-nums; }
.forecast-chart-seg:hover > .chart-tip { display: block; }
.forecast-chart-empty { color: var(--ink-4); font-family: var(--font-ui); font-size: .8rem; }

.fcl-group {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: .73rem; color: var(--ink-3);
}
.fcl-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

td.forecast-baureif-cell { white-space: nowrap; }
.fin-sort-label { font-family: var(--font-ui); font-size: .74rem; color: var(--ink-4); }

/* ------------------------------------------------------ Einstellungen-Modal */
.fz-param { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 10px; align-items: center; padding: 5px 0; }
.fz-param label { font-family: var(--font-ui); font-size: .8rem; color: var(--ink-2); }
.fz-param input { width: 100%; }

.settings-ausloeser-cell { max-width: 300px; overflow-wrap: anywhere; }
.zl-ausloeser  { font-weight: 500; color: var(--ink); }
.zl-ankerfeld  { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--ink-3); }
.zl-offset, .zl-fallback { text-align: right; font-variant-numeric: tabular-nums; }
.zl-offset input, .zl-fallback input { width: 82px; text-align: right; }

/* ---------------------------------------------------- Alt-Klassen-Bruecken */
/* Diese Klassen erzeugt die portierte Logik noch; sie werden auf das neue
   System abgebildet, damit kein Element ungestylt bleibt. */
.collapsible { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); margin-bottom: 12px; overflow: hidden; }
.collapsible > summary {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 15px; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-size: .85rem; font-weight: 500; color: var(--ink);
}
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary::before {
  content: ''; width: 7px; height: 7px;
  border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(-45deg); transition: transform .15s; flex: 0 0 auto;
}
.collapsible[open] > summary::before { transform: rotate(45deg); }
.collapsible > summary:hover { background: #FAFBFC; }
.collapsible-body { padding: 0 15px 15px; }

.primary { background: var(--alva-yellow) !important; color: var(--alva-anthrazit) !important; }
.clickable { cursor: pointer; }
.delta { color: var(--bad); }
.field-label + .field-value { min-width: 0; }

/* "eingereicht, Zusage offen" (⏳ aus computeVnbZusageAmpel_)
   ---------------------------------------------------------------------------
   Wunsch: bei "pending" wieder eine Sanduhr statt eines Farbpunkts. Das
   Design System verbietet Emoji in der UI, also eine gezeichnete Sanduhr als
   Inline-SVG (siehe sanduhrSvg_() in app/ui-dialog.js). Der halb gefuellte
   Punkt von vorher war nicht als "wartet" zu erkennen. */
.ampel[data-farbe="wartet"] { color: var(--warn); }
.ampel .sanduhr {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  display: block;
  color: var(--warn);
}
/* Der Sand rieselt langsam -- ein sehr dezenter Hinweis darauf, dass hier
   auf etwas gewartet wird. Bei prefers-reduced-motion abgeschaltet (siehe
   die globale Regel in alva.css). */
.ampel .sanduhr .sand-oben  { animation: sanduhr-oben 3.2s ease-in-out infinite; }
.ampel .sanduhr .sand-unten { animation: sanduhr-unten 3.2s ease-in-out infinite; }
@keyframes sanduhr-oben  { 0%, 12% { opacity: 1; } 78%, 100% { opacity: .15; } }
@keyframes sanduhr-unten { 0%, 12% { opacity: .15; } 78%, 100% { opacity: 1; } }

/* Das Modal wird vom portierten Code ueber die Klasse .open geschaltet
   (openSettingsModal_/closeSettingsModal_), nicht ueber das hidden-Attribut. */
.modal-grund { display: none; }
.modal-grund.open { display: flex; }

/* Kopfblock der Detailansicht: volle Breite ueber dem Kartenraster. */
.detail-kopf-block {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 15px 16px;
  margin-bottom: 14px;
}
.detail-kopf-block h2 { margin: 6px 0 8px !important; }
.detail-kopf-block .badge + .badge { margin-left: 4px; }

/* Auf-/Zu-Pfeil der Forecast-Detailliste (gleiche Optik wie bei <details>) */
.klapp-pfeil {
  display: inline-block;
  width: 7px; height: 7px;
  border-right: 1.6px solid var(--ink-3);
  border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(-45deg);
  transition: transform .15s;
  flex: 0 0 auto;
}
.klapp-pfeil.offen { transform: rotate(45deg); }
/* Zugeklappte Detailliste: Hoehe auf 0, Scrollbereich bleibt intakt. */
.tabelle-huelle.forecast-liste-zu { max-height: 0; min-height: 0; overflow: hidden; border: 0; }

/* ---------------------------------------------------------------------------
   Spaltenausrichtung. Die generische Zellenausgabe haengt jeder Zelle und
   jedem Kopf eine Klasse "sp-<spaltenschluessel>" an; damit lassen sich Zahlen
   rechtsbuendig, umbruchfrei und mit Tabellenziffern setzen, ohne die
   Spaltendefinitionen anzufassen.
   --------------------------------------------------------------------------- */
table.daten .sp-kwp,
table.daten .sp-verkaufspreis,
table.daten .sp-marge,
table.daten .sp-probability,
table.daten .sp-fc_betragSoll,
table.daten .sp-fc_betragGewichtet,
table.daten .sp-fc_wahrscheinlichkeit,
table.daten .sp-fc_wochenBisBaustart {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* nowrap nur in den Datenzellen, nicht im Kopf (s. Kommentar oben). */
table.daten tbody .sp-kwp,
table.daten tbody .sp-verkaufspreis,
table.daten tbody .sp-marge,
table.daten tbody .sp-probability,
table.daten tbody .sp-fc_betragSoll,
table.daten tbody .sp-fc_betragGewichtet,
table.daten tbody .sp-fc_wahrscheinlichkeit,
table.daten tbody .sp-fc_wochenBisBaustart { white-space: nowrap; }
/* Der Verkaufspreis traegt seine eigene Zellklasse (Aufklappen) und darf
   deshalb nicht per nowrap die Detailliste zerreissen. */
table.daten td.verkaufspreis-cell.expanded { white-space: normal; }

table.daten .sp-baubeginn,
table.daten .sp-closeDate,
table.daten .sp-voraussichtlicherBaubeginn,
table.daten .sp-dcInstallationStart,
table.daten .sp-acInstallationStart,
table.daten .sp-zaehlerwechselStart,
table.daten .sp-abnahmeVnb,
table.daten .sp-energiekonzeptLive,
table.daten .sp-fc_datumBest,
table.daten .sp-fc_datumMedium,
table.daten .sp-fc_datumWorst {
  font-variant-numeric: tabular-nums;
}
/* Datumsangaben duerfen in der ZELLE nicht umbrechen (13.05.2026 auf zwei
   Zeilen ist unlesbar) - im Kopf schon. */
table.daten tbody .sp-baubeginn,
table.daten tbody .sp-closeDate,
table.daten tbody .sp-voraussichtlicherBaubeginn,
table.daten tbody .sp-dcInstallationStart,
table.daten tbody .sp-acInstallationStart,
table.daten tbody .sp-zaehlerwechselStart,
table.daten tbody .sp-abnahmeVnb,
table.daten tbody .sp-energiekonzeptLive,
table.daten tbody .sp-fc_datumBest,
table.daten tbody .sp-fc_datumMedium,
table.daten tbody .sp-fc_datumWorst { white-space: nowrap; }

/* Freitextspalten duerfen umbrechen, sonst wird die Tabelle beliebig breit. */
table.daten .sp-adresse    { min-width: 168px; }
table.daten .sp-fc_projekt { min-width: 168px; }
table.daten .sp-fc_hinweis { max-width: 300px; white-space: normal; }
table.daten .sp-fc_ausloeser { max-width: 220px; white-space: normal; }

/* ===========================================================================
   Klebende Adressspalten
   ---------------------------------------------------------------------------
   Die Tabellen sind breiter als jeder Bildschirm. Scrollt man nach rechts,
   verliert man ohne fixierte Spalten die Zuordnung "welches Projekt ist das
   eigentlich". Deshalb bleiben die fuehrenden Spalten BIS EINSCHLIESSLICH der
   Adressspalte stehen.

   Die Links-Abstaende kann CSS nicht kennen (die Spaltenbreiten ergeben sich
   aus dem Inhalt, und welche Spalten sichtbar sind, entscheidet der Nutzer
   per "Spalten"-Menue). Sie werden nach jedem Rendern gemessen und als
   generierte Regeln eingehaengt -- siehe klebeSpaltenAktualisieren_() in
   app/ui-dialog.js. Hier stehen nur die Eigenschaften, die immer gelten.
   =========================================================================== */
table.daten thead th.klebe,
table.daten tbody td.klebe {
  position: sticky;
  left: 0;                       /* wird pro Spalte ueberschrieben */
}
table.daten thead th.klebe {
  z-index: 4;                    /* ueber dem normalen, oben klebenden Kopf (2) */
}
table.daten tbody td.klebe {
  z-index: 1;
  background: var(--card);       /* deckend, sonst scrollt Inhalt darunter durch */
}
/* Hover-Farbe der Zeile muss auch fuer die klebenden Zellen gelten, sonst
   bleibt die fixierte Spalte weiss, waehrend die Zeile gelb wird. */
table.daten tbody tr:hover td.klebe { background: #FAFBFC; }
table.daten tbody tr.klickbar:hover td.klebe,
table.daten tbody tr.clickable:hover td.klebe { background: var(--alva-pale-yellow); }

/* Sichtbare Kante am Ende des fixierten Bereichs -- nur wenn tatsaechlich
   nach rechts gescrollt ist, sonst waere es ein Strich ohne Anlass. */
table.daten th.klebe-rand::after,
table.daten td.klebe-rand::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: -1px;
  width: 1px;
  background: var(--line-strong);
  pointer-events: none;
}
.tabelle-huelle.ist-gescrollt table.daten th.klebe-rand::after,
.tabelle-huelle.ist-gescrollt table.daten td.klebe-rand::after {
  box-shadow: 6px 0 8px -4px rgba(5, 11, 19, .22);
}
table.daten th.klebe-rand, table.daten td.klebe-rand { position: sticky; }

/* ===========================================================================
   Spaltenbreiten
   ---------------------------------------------------------------------------
   Vorher: table { width: 100% } bei ueber 20 Spalten -- der Browser presst
   alles auf die Fensterbreite, Datumsangaben brechen um, Ampelspalten sind
   breiter als ihr Inhalt. Jetzt duerfen die Spalten ihre natuerliche Breite
   nehmen (min-width: 100%, damit eine schmale Tabelle trotzdem die Karte
   ausfuellt) und die Huelle scrollt.
   =========================================================================== */
table.daten {
  width: auto;
  min-width: 100%;
}

/* Freitext- und Adressspalten: feste Spanne statt beliebiger Breite. */
table.daten .sp-adresse      { min-width: 190px; max-width: 260px; white-space: normal; }
table.daten .sp-fc_projekt   { min-width: 190px; max-width: 260px; white-space: normal; }
table.daten .sp-accountName  { min-width: 150px; max-width: 220px; white-space: normal; }
table.daten .sp-fachpartner  { max-width: 150px; white-space: normal; }
table.daten .sp-opportunityOwner,
table.daten .sp-installationOwner,
table.daten .sp-fc_owner     { max-width: 130px; white-space: normal; }
table.daten .sp-betreibermodell,
table.daten .sp-fc_betreibermodell { max-width: 120px; white-space: normal; }
table.daten .sp-fc_rate      { max-width: 130px; white-space: normal; }
table.daten .sp-fc_ausloeser { min-width: 130px; max-width: 190px; white-space: normal; }
table.daten .sp-fc_datenqualitaet,
table.daten .sp-fc_ankerfeld { max-width: 130px; white-space: normal; }
table.daten .sp-fachpartnerStatus { max-width: 110px; white-space: normal; }

/* Ampel-/Zahlenspalten: so schmal wie ihr Inhalt.
   ---------------------------------------------------------------------------
   WICHTIG: das nowrap gilt nur fuer die DATENzellen. Diese Selektoren sind
   spezifischer als "table.daten thead th" (zwei Klassen statt einer) und
   haben, solange sie auch den Kopf trafen, dessen white-space:normal
   ausgehebelt - die Kopfzeile konnte dann nicht umbrechen und lange Labels
   ("Ausführungsplanung", "Datum Verzug moderat") liefen sichtbar in die
   Nachbarspalte. Genau das war als "Spaltentexte laufen ueber" gemeldet. */
table.daten .sp-baureif,
table.daten .sp-unterschrift,
table.daten .sp-wirtschaftlichkeit,
table.daten .sp-vnbZusage,
table.daten .sp-ausfuehrungsplanung,
table.daten .sp-fc_baureif,
table.daten .sp-fc_signed,
table.daten .sp-kwp,
table.daten .sp-probability,
table.daten .sp-marge {
  width: 1%;
}
table.daten tbody .sp-baureif,
table.daten tbody .sp-unterschrift,
table.daten tbody .sp-wirtschaftlichkeit,
table.daten tbody .sp-vnbZusage,
table.daten tbody .sp-ausfuehrungsplanung,
table.daten tbody .sp-fc_baureif,
table.daten tbody .sp-fc_signed,
table.daten tbody .sp-kwp,
table.daten tbody .sp-probability,
table.daten tbody .sp-marge {
  white-space: nowrap;
}
/* Der Zeilen-Hinweis im Forecast ist nur noch ein (i) -- entsprechend schmal. */
table.daten .sp-fc_hinweis { width: 34px; min-width: 34px; text-align: center; }

/* Kopfzeilen duerfen umbrechen, damit ein langes Label die Spalte nicht
   aufblaest ("Ausführungs-planung", "Wochen bis Baustart").
   ---------------------------------------------------------------------------
   max-width war zuerst 132px - zu eng: "Datum Verzug moderat" braucht 169px,
   "Wochen bis Baustart" 155px, "Ausführungs-planung" 183px. Da am <th> kein
   overflow:hidden steht, lief der Text sichtbar in die Nachbarspalte.
   Jetzt mehr Platz UND echte Umbruchmoeglichkeiten: hyphens fuer die langen
   Komposita (die Seite ist lang="de"), break-word als Netz fuer alles, was
   sich nicht trennen laesst. */
table.daten thead th {
  white-space: normal;
  max-width: 172px;
  line-height: 1.3;
  /* "anywhere" statt "break-word": nur anywhere senkt auch die
     min-content-Breite der Zelle. Mit break-word blieb "Ausführungsplanung"
     6px zu breit, weil die Zelle sich gar nicht erst schmaler rechnen darf.
     hyphens sorgt dafuer, dass wo eine Trennstelle bekannt ist (die Seite ist
     lang="de") an der Silbe getrennt wird statt mitten im Wort. */
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}
table.daten thead th.klebe { max-width: none; }

/* Auch Datenzellen mit Freitext duerfen nicht ueberlaufen. */
table.daten tbody td { overflow-wrap: break-word; }

/* ===========================================================================
   Detail-Popup (Opportunity / System Design)
   ---------------------------------------------------------------------------
   Vorher ersetzte ein Klick auf eine Zeile die ganze Listenansicht -- man
   verlor Filter, Scrollposition und den Kontext, und die Karte lief unter der
   Tabelle weiter. Jetzt: eigenes Fenster ueber der Liste, bewusst KLEINER als
   der Bildschirm, damit sichtbar bleibt, dass die Liste darunter weiterlebt.
   =========================================================================== */
.detail-grund {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  background: rgba(5, 11, 19, .55);
}
.detail-grund.offen { display: flex; }

.detail-fenster {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1180px;
  height: 100%;
  max-height: 880px;
  background: var(--ground);
  border-radius: 12px;
  box-shadow: 0 20px 70px rgba(5, 11, 19, .45);
  overflow: hidden;
}

.detail-fenster-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 13px 18px;
  background: var(--alva-black);
  color: var(--pure-white);
}
.detail-fenster-kopf .df-titel {
  font-family: var(--font-head);
  font-size: .98rem;
  font-weight: 500;
  color: var(--pure-white);
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-fenster-kopf .df-order {
  font-family: var(--font-ui);
  font-size: .72rem;
  color: rgba(255, 255, 255, .55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.detail-fenster-kopf .df-zu {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .1);
  border: 0;
  border-radius: 50px;
  color: rgba(255, 255, 255, .8);
  font-family: var(--font-head);
  font-size: .75rem;
  padding: 5px 13px;
  cursor: pointer;
}
.detail-fenster-kopf .df-zu:hover { background: rgba(255, 255, 255, .2); color: var(--pure-white); }

/* Der eigentliche Scrollbereich. Das Bottom-Padding ist Absicht (Punkt 5 der
   Aenderungsliste): die Detailansicht ist durch die Verzugsanteile deutlich
   laenger geworden, und ohne Luft am Ende klebt die letzte Karte an der Kante
   und man sieht nicht, dass man unten angekommen ist. */
.detail-fenster-koerper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 38px;
}
.detail-fenster-koerper > .detail-kopf-block { margin-top: 0; }

/* Im Popup steht die Detailansicht auf begrenzter Breite -- zwei Spalten
   sind hier richtig, drei wuerden die Kartenbreite unter das Lesbare
   druecken. */
.detail-fenster-koerper .detail-body {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

/* Der "Zurück zur Liste"-Knopf aus der portierten Render-Logik ist im Popup
   redundant (oben rechts steht "Schließen", Esc und Klick daneben gehen
   auch) -- er wird deshalb ausgeblendet statt aus dem Code entfernt, damit
   renderOpportunityDetail() unveraendert bleibt. */
.detail-fenster-koerper .back-link { display: none; }

@media (max-width: 720px) {
  .detail-grund { padding: 0; }
  .detail-fenster { max-height: none; border-radius: 0; }
}

/* ===========================================================================
   Kalender -- ein Monat im Fokus
   ---------------------------------------------------------------------------
   Der bisherige Zustand war aus mehreren Gruenden unbrauchbar:
     - drei Monate nebeneinander, jeder rund 270px breit: die Tageszellen
       waren ~38px schmal, in die kein Termin passt,
     - ".kalender-monate, .kal-grid" teilten sich eine auto-fit-Regel, die
       auch den WOCHENTAGSKOPF auf auto-fit-Spalten gesetzt hat -- der Kopf
       war dadurch nicht mit dem 7-Spalten-Tagesraster ausgerichtet,
     - ".kal-day-pill" war als 6px-Punkt gestylt, die Render-Logik legt aber
       Text hinein (Projektname) -- der lief unsichtbar aus dem Punkt heraus.
   Jetzt: EIN Monat auf voller Breite, Termine als lesbare Chips.
   =========================================================================== */
.kalender-kopfzeile {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.kalender-kopfzeile .kal-monat-titel {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
  min-width: 190px;
}
.kalender-kopfzeile .kal-monat-zahl {
  font-family: var(--font-ui);
  font-size: .74rem;
  color: var(--ink-4);
}
.kalender-kopfzeile .kal-nav { margin-left: auto; display: flex; gap: 6px; }
.kal-pfeil-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--pure-white);
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
}
.kal-pfeil-btn:hover { border-color: var(--alva-anthrazit); background: var(--alva-pale-grey); }
.kal-pfeil-btn svg { width: 13px; height: 13px; }

/* Ein Monat, volle Breite. Die alte .kalender-monate-Regel (auto-fit,
   minmax(268px,1fr)) wird hier bewusst ueberschrieben. */
.kalender-monate { display: block; }

.kal-monat-tafel {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--card);
}
/* Beide Raster exakt gleich: 7 Spalten. Genau das war vorher nicht der Fall. */
.kal-kopf-raster,
.kal-tage-raster {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
}
.kal-kopf-raster { background: var(--alva-pale-grey); }
.kal-kopf-raster .kal-wt {
  padding: 7px 8px;
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 500;
  color: var(--ink-3);
  text-align: left;
  border-right: 1px solid var(--line);
}
.kal-kopf-raster .kal-wt:last-child { border-right: 0; }
.kal-kopf-raster .kal-wt.we { color: var(--ink-4); }

.kal-zelle {
  position: relative;
  min-height: 104px;
  padding: 5px 6px 7px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  background: var(--card);
}
.kal-tage-raster > .kal-zelle:nth-child(7n) { border-right: 0; }
.kal-zelle.fremd { background: #FAFBFC; }
.kal-zelle.we { background: #FCFCFD; }
.kal-zelle.fremd.we { background: #F8F9FA; }
.kal-zelle.heute { background: var(--alva-pale-yellow); }
.kal-zelle.klickbar { cursor: pointer; }
.kal-zelle.klickbar:hover { background: var(--alva-pale-grey); }
.kal-zelle.gewaehlt { box-shadow: inset 0 0 0 2px var(--alva-anthrazit); }

.kal-tag-kopf { display: flex; align-items: center; gap: 5px; }
.kal-tag-num {
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.kal-zelle.fremd .kal-tag-num { color: var(--alva-pale-steel); }
.kal-zelle.heute .kal-tag-num {
  font-weight: 700;
  background: var(--alva-black);
  color: var(--pure-white);
  border-radius: 50px;
  padding: 0 6px;
}
.kal-tag-summe {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: .64rem;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* Termin-Chip: lesbar, mit Ampelpunkt links. Kein Emoji. */
.kal-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--alva-pale-grey);
  border-left: 3px solid var(--alva-steel);
  font-family: var(--font-ui);
  font-size: .68rem;
  line-height: 1.35;
  color: var(--ink-2);
  overflow: hidden;
}
.kal-chip .kal-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.kal-chip.signed   { border-left-color: var(--ampel-gruen); }
.kal-chip.pipeline { border-left-color: var(--alva-light-blue); }
.kal-chip .kal-typ { flex: 0 0 auto; width: 11px; height: 11px; color: var(--ink-4); }
.kal-mehr {
  border: 0;
  background: none;
  padding: 1px 5px;
  text-align: left;
  font-family: var(--font-ui);
  font-size: .66rem;
  font-weight: 500;
  color: var(--alva-light-blue);
  cursor: pointer;
}
.kal-mehr:hover { text-decoration: underline; }

.kal-legende {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: .7rem;
  color: var(--ink-4);
}
.kal-legende span { display: inline-flex; align-items: center; gap: 6px; }
.kal-legende i { width: 3px; height: 12px; display: inline-block; border-radius: 2px; }
.kal-legende svg { width: 12px; height: 12px; }

/* Tagesdetail unter dem Raster */
.kal-tagesliste { margin-top: 14px; }
.kal-tagesliste-kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--alva-black);
  color: var(--pure-white);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  font-family: var(--font-head);
  font-size: .88rem;
  font-weight: 500;
}
.kal-tagesliste-kopf .kal-tl-zahl {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 400;
  color: rgba(255, 255, 255, .6);
}
.kal-tagesliste-kopf .kal-tl-zu {
  margin-left: auto; background: rgba(255, 255, 255, .1); border: 0;
  border-radius: 50px; color: rgba(255, 255, 255, .8);
  font-family: var(--font-head); font-size: .72rem; padding: 4px 11px; cursor: pointer;
}
.kal-tagesliste-kopf .kal-tl-zu:hover { background: rgba(255, 255, 255, .2); color: var(--pure-white); }

.kal-eintrag {
  display: grid;
  grid-template-columns: 20px minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--card);
  cursor: pointer;
  font-size: 12.5px;
}
.kal-eintrag:last-child { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.kal-eintrag:hover { background: var(--alva-pale-yellow); }
.kal-eintrag .ke-account { font-weight: 600; color: var(--ink); }
.kal-eintrag .ke-adresse { color: var(--ink-3); font-size: 11.5px; }
.kal-eintrag .ke-order {
  font-family: var(--font-ui); font-size: 10.5px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.kal-eintrag .ke-termine { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 720px) {
  .kal-zelle { min-height: 66px; padding: 4px; }
  .kal-chip { font-size: .62rem; }
  .kal-eintrag { grid-template-columns: 18px 1fr; }
  .kal-eintrag .ke-termine { display: none; }
}

/* ===========================================================================
   Verzugsanteile (unsignierte Zeilen)
   ---------------------------------------------------------------------------
   Punkt 4 der Aenderungsliste: pro Zahlungszeile sichtbar machen, WIE sich
   der Betrag ueber die Monate verteilt -- kompakt in der Tabellenzeile
   ("40% Sep · 20% Okt · …"), mit den Euro-Betraegen im Popup.
   =========================================================================== */
/* Kompaktform in der Tabellenzeile: kleine Balkenreihe statt Textkette --
   die Textform brauchte vier Umbruchzeilen und machte die Tabellenzeile
   88px hoch (dasselbe Problem wie beim Hinweis-Feld). */
.vv-kompakt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--ink-4);
  white-space: nowrap;
  cursor: help;
}
.vv-balken {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 16px;
  flex: 0 0 auto;
}
.vv-balken i {
  display: block;
  width: 4px;
  min-height: 2px;
  border-radius: 1px;
  background: var(--alva-light-blue);
}
.vv-balken i.null { background: var(--line); }
.vv-spanne { font-variant-numeric: tabular-nums; }

/* Im Popup-Kopf einer Zahlungszeile steht dieselbe Kompaktform. */
.zp-zeile > summary .vv-kompakt { font-size: 10.5px; white-space: normal; flex-wrap: wrap; }
.vv-teil { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vv-teil b { color: var(--ink-2); font-weight: 600; }

.vv-fix {
  font-family: var(--font-ui); font-size: 10.5px; color: var(--ink-4); font-style: italic;
  white-space: nowrap;
}
table.daten .sp-fc_verzugsverteilung { width: 1%; white-space: nowrap; }

/* Aufschluesselung im Popup */
.zp-zeile { border: 1px solid var(--line); border-radius: var(--radius-card); margin-bottom: 8px; overflow: hidden; }
.zp-zeile > summary {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 12px; cursor: pointer; list-style: none;
  font-family: var(--font-ui); font-size: 12px; color: var(--ink-2);
}
.zp-zeile > summary::-webkit-details-marker { display: none; }
.zp-zeile > summary::before {
  content: ''; width: 6px; height: 6px; flex: 0 0 auto;
  border-right: 1.6px solid var(--ink-4); border-bottom: 1.6px solid var(--ink-4);
  transform: rotate(-45deg); transition: transform .15s;
}
.zp-zeile[open] > summary::before { transform: rotate(45deg); }
.zp-zeile > summary:hover { background: #FAFBFC; }
.zp-rate { font-family: var(--font-head); font-weight: 500; color: var(--ink); }
.zp-betrag { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.zp-datum { font-variant-numeric: tabular-nums; color: var(--ink-4); }
.zp-koerper { padding: 4px 12px 12px; border-top: 1px solid var(--line); }
.zp-verteilung { display: grid; grid-template-columns: auto auto 1fr auto; gap: 3px 10px; align-items: center; font-size: 12px; }
.zp-verteilung .zp-v-monat { font-family: var(--font-ui); font-size: .74rem; color: var(--ink-3); white-space: nowrap; }
.zp-verteilung .zp-v-pct   { font-variant-numeric: tabular-nums; color: var(--ink-4); font-size: .74rem; text-align: right; }
.zp-verteilung .zp-v-balken { height: 6px; border-radius: 3px; background: var(--alva-pale-grey); overflow: hidden; min-width: 40px; }
.zp-verteilung .zp-v-balken i { display: block; height: 100%; background: var(--alva-light-blue); }
.zp-verteilung .zp-v-eur   { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; text-align: right; }
.zp-verteilung .zp-null .zp-v-monat,
.zp-verteilung .zp-null .zp-v-pct,
.zp-verteilung .zp-null .zp-v-eur { color: var(--alva-pale-steel); }
.zp-summe {
  display: flex; gap: 10px; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--line);
  font-family: var(--font-ui); font-size: .74rem; color: var(--ink-4);
}
.zp-summe b { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.zp-hinweis { font-family: var(--font-ui); font-size: 11.5px; color: var(--ink-3); line-height: 1.55; }

/* ===========================================================================
   Zellen-Tooltip (Forecast-Hinweis)
   ---------------------------------------------------------------------------
   Der Hinweistext war als Volltext in der Zelle -- bei "max-width: 300px;
   white-space: normal" wurde damit jede Tabellenzeile bis zu zehn Textzeilen
   hoch. Jetzt nur noch ein (i) mit Tooltip.
   =========================================================================== */
.zell-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--pure-white);
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  cursor: help;
}
.zell-info:hover, .zell-info:focus-visible {
  border-color: var(--alva-anthrazit);
  background: var(--alva-anthrazit);
  color: var(--pure-white);
}
.zell-info-tooltip {
  display: none;
  position: absolute;
  top: 140%;
  right: 0;
  z-index: 70;
  width: 320px;
  max-width: 78vw;
  white-space: pre-line;
  background: #0B1420;
  color: var(--pure-white);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 7px;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  text-align: left;
  box-shadow: 0 10px 32px rgba(5, 11, 19, .5);
  pointer-events: none;
}
.zell-info:hover .zell-info-tooltip,
.zell-info:focus-visible .zell-info-tooltip { display: block; }
.zell-info-leer { color: var(--alva-pale-steel); }

/* Salesforce-Verweis als kleiner Pfeil hinter der Adresse (statt als eigene
   Textzeile darunter -- das kostete eine ganze Zeilenhoehe je Tabellenzeile). */
.sf-pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  width: 15px; height: 15px;
  margin-left: 3px;
  border-radius: 3px;
  color: var(--alva-light-blue);
  flex: 0 0 auto;
}
.sf-pfeil svg { width: 9px; height: 9px; display: block; }
.sf-pfeil:hover { background: #E8EDFF; text-decoration: none; }

/* Adressspalten: breit genug, dass die Adresse meist in EINE Zeile passt --
   darunter nur noch der Accountname. */
table.daten .sp-adresse,
table.daten .sp-fc_projekt { min-width: 215px; max-width: 300px; white-space: normal; }
table.daten .sp-adresse .adresse-account-hint,
table.daten .sp-fc_projekt .adresse-account-hint { display: block; line-height: 1.35; }

/* Zwischentitel im Einstellungen-Panel. Der Szenario-Block ist auf 28
   Parameter gewachsen (Ablauf-Annahmen kamen aus dem Code dazu) und waere
   ohne Gliederung eine Wand aus gleich aussehenden Feldern. */
.settings-gruppe-titel {
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 16px 0 4px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}
.settings-gruppe-titel:first-child { margin-top: 2px; }

/* ===========================================================================
   Projektablauf im Detail-Popup (A6/A10)
   =========================================================================== */
.ablauf-block { display: grid; gap: 1px; }
.ablauf-zeile {
  display: grid;
  grid-template-columns: minmax(140px, auto) minmax(110px, auto) 1fr;
  gap: 4px 12px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.ablauf-zeile:last-child { border-bottom: 0; }
.ablauf-label { font-family: var(--font-ui); font-size: .74rem; color: var(--ink-4); }
/* Echter Wert = fett, hergeleiteter = normal. Der Unterschied muss auf einen
   Blick erkennbar sein, nicht erst am "(rechnerisch)". */
.ablauf-wert { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; white-space: nowrap; }
.ablauf-zeile.ist-rechnerisch .ablauf-wert { font-weight: 400; color: var(--ink-3); }
.ablauf-regel { font-family: var(--font-ui); font-size: 10.5px; color: var(--alva-pale-steel); }

/* ---------------------------------------------- Anteil im Zeitraum (E4) */
table.daten .sp-fc_anteilImZeitraum { width: 1%; white-space: nowrap; text-align: right; }
table.daten tbody .sp-fc_anteilImZeitraum b { font-variant-numeric: tabular-nums; }
/* Teilweise im Zeitraum: gelb hinterlegt, damit erkennbar ist, dass das
   Plan-Datum der Zeile ausserhalb liegen KANN und das kein Filterfehler ist. */
table.daten tbody td.anteil-teilweise {
  background: var(--alva-pale-yellow);
  cursor: help;
}
table.daten tbody tr:hover td.anteil-teilweise { background: #FBF7C4; }

/* ------------------------------------ Abgesichertes Dokument (A11) */
/* Vorne per E-Mail abgesichert -> hinten nicht mehr pruefbar. Durchgestrichen
   und ausgegraut, damit sichtbar ist: bewusst gecuttet, nicht vergessen. */
.bb-badge.gecuttet {
  text-decoration: line-through;
  opacity: .5;
  background: var(--alva-pale-grey) !important;
  color: var(--ink-4) !important;
  border: 1px dashed var(--line-strong);
}

/* ------------------------------ Betreibermodell ohne Betragslogik (A8) */
.vp-keine-logik {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-tag);
  background: var(--bad-bg);
  color: #A81C1C;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: help;
}

/* --------------------------------------- Setup: Ablauf-Kette zweispaltig */
.ablauf-setup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 4px 22px;
  margin-bottom: 6px;
}
.ablauf-setup .as-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px auto;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
}
.ablauf-setup .as-ziel { font-family: var(--font-ui); font-size: .78rem; color: var(--ink-2); }
.ablauf-setup .as-bezug { font-family: var(--font-ui); font-size: .72rem; color: var(--ink-4); white-space: nowrap; }
.ablauf-setup input { width: 100%; text-align: right; }
/* Eine Zeile, die ueber beide Spalten laeuft (die zwei "spaeteres Ereignis"-
   Stufen haben laengere Bezugstexte). */
.ablauf-setup .as-zeile.breit { grid-column: 1 / -1; }

/* ============================================ Download der Erklaerung ===== */
.erklaerung-block {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
/* Der Knopf sitzt in der schwarzen Kopfzeile - die Standard-Linie waere dort
   nicht zu sehen. */
.erklaerung-block .btn-linie {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .24);
  color: rgba(255, 255, 255, .88);
}
.erklaerung-block .btn-linie:hover:not(:disabled) {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .5);
  color: var(--pure-white);
}
.erklaerung-block .btn svg { width: 13px; height: 13px; }

/* Das (?) daneben nutzt die vorhandene Tooltip-Komponente. In der Kopfzeile
   muss der Tooltip nach links aufklappen, sonst laeuft er aus dem Fenster. */
#erklaerung-hilfe { margin-left: 4px; }
#erklaerung-hilfe .col-help-tooltip {
  left: auto;
  right: 0;
  width: 340px;
}

@media (max-width: 900px) {
  /* Auf schmalen Fenstern nur das Symbol - der Text wuerde die Kopfzeile
     umbrechen lassen. */
  .erklaerung-block .btn { padding: 4px 8px; }
  .erklaerung-block .btn { font-size: 0; gap: 0; }
  .erklaerung-block .btn svg { width: 15px; height: 15px; }
}