inwo_vgl/src/main/resources/static/css/miete.css

/* =============================================================================
   DIWO Vergleich - Miete CSS
   =============================================================================
   
   Stile speziell für Miete-Seite:
   - Wohnung Grid Table
   - Miete Grid Table
   - Responsive Design für Miete-Tabellen
   ============================================================================= */

/* =============================================================================
   WOHNUNG GRID TABLE
   ============================================================================= */
.wohnung-grid-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--weiss);
  border: 1px solid var(--grau-stark);
  margin: 0;
  font-size: 14px;
}

.wohnung-grid-table td {
  border: 1px solid var(--grau-stark);
  padding: 8px 12px;
  vertical-align: middle;
}

.label-cell {
  font-weight: bold;
  background: var(--grau-hell);
  color: var(--schwarz);
  white-space: nowrap;
}

.value-cell {
  background: var(--weiss);
}

/* =============================================================================
   MIETE GRID TABLE
   ============================================================================= */
.miete-grid-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--weiss);
  border: 1px solid var(--grau-stark);
  margin: 0;
  font-size: 14px;
  table-layout: fixed;
}

.miete-grid-table td,
.miete-grid-table th {
  border: 1px solid var(--grau-stark);
  padding: 8px;
  vertical-align: middle;
  text-align: left;
}

/* Header-Zellen in Miete-Tabelle */
.miete-grid-table .miete-header-cell {
  font-weight: bold;
  background: var(--grau-stark);
  color: var(--schwarz);
  text-align: left;
}

/* Verschiedene Zelltypen in Miete-Tabelle */
.miete-grid-table .label-cell {
  font-weight: bold;
  background: var(--grau-hell);
  color: var(--schwarz);
  white-space: nowrap;
  width: 15%;
}

.miete-grid-table .value-cell {
  background: var(--weiss);
  text-align: left;
  width: 15%;
}

.miete-grid-table .pauschale-cell {
  background: var(--weiss);
  text-align: left;
  font-style: normal;
  color: var(--schwarz);
  font-size: 14px;
  width: 15%;
}

.miete-grid-table .gewerbefläche-cell {
  background: var(--weiss);
  color: var(--schwarz);
  font-weight: normal;
  text-align: left;
}

.miete-grid-table .empty-cell {
  background: var(--weiss);
  width: 10%;
}

.miete-grid-table .section-header-cell {
  font-weight: bold;
  color: var(--diwo-blau);
  background: var(--grau-stark);
  text-align: left;
  border-bottom: none;
}

/* =============================================================================
   DIFF-HIGHLIGHTING FÜR MIETE-TABELLEN
   ============================================================================= */
/* Geänderte Zellen in Miete-Tabellen sollen gelb hervorgehoben werden */
.miete-grid-table .cell-changed,
.miete-grid-table td:has(.cell-changed) {
  background: var(--gelb-hell) !important;
}

.miete-grid-table .value-cell.cell-changed,
.miete-grid-table .pauschale-cell.cell-changed,
.miete-grid-table .gewerbefläche-cell.cell-changed {
  background: var(--gelb-hell) !important;
}

/* Hinzugefügte Zellen in Miete-Tabellen sollen grün hervorgehoben werden */
.miete-grid-table .cell-added,
.miete-grid-table td:has(.cell-added) {
  background: var(--gruen-hell) !important;
}

.miete-grid-table .value-cell.cell-added,
.miete-grid-table .pauschale-cell.cell-added,
.miete-grid-table .gewerbefläche-cell.cell-added {
  background: var(--gruen-hell) !important;
}

/* Gelöschte Zellen in Miete-Tabellen sollen rot hervorgehoben werden */
.miete-grid-table .cell-deleted,
.miete-grid-table td:has(.cell-deleted) {
  background: var(--rot-hell) !important;
}

.miete-grid-table .value-cell.cell-deleted,
.miete-grid-table .pauschale-cell.cell-deleted,
.miete-grid-table .gewerbefläche-cell.cell-deleted {
  background: var(--rot-hell) !important;
}

/* Wohnung-Tabelle Highlighting */
.wohnung-grid-table .cell-changed,
.wohnung-grid-table td:has(.cell-changed) {
  background: var(--gelb-hell) !important;
}

.wohnung-grid-table .value-cell.cell-changed {
  background: var(--gelb-hell) !important;
}

.wohnung-grid-table .cell-added,
.wohnung-grid-table td:has(.cell-added) {
  background: var(--gruen-hell) !important;
}

.wohnung-grid-table .value-cell.cell-added {
  background: var(--gruen-hell) !important;
}

.wohnung-grid-table .cell-deleted,
.wohnung-grid-table td:has(.cell-deleted) {
  background: var(--rot-hell) !important;
}

.wohnung-grid-table .value-cell.cell-deleted {
  background: var(--rot-hell) !important;
}