/* ============================================
   TABLE — Kosten Tabellen
   ============================================ */

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
  table-layout: fixed;
}

/* 2-Spalten: Leistung (70%) | Preis (30%) */
.pricing-table th:last-child,
.pricing-table td:last-child {
  width: 30%;
}

/* 3-Spalten: gleich verteilt */
.pricing-table th:nth-child(3),
.pricing-table td:nth-child(3) {
  width: 30%;
}
.pricing-table th:nth-child(2):nth-last-child(2),
.pricing-table td:nth-child(2):nth-last-child(2) {
  width: 35%;
}

.pricing-table thead {
  background: var(--color-primary-500);
  color: var(--color-neutral-0);
}

.pricing-table th {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-wide);
}

.pricing-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-neutral-100);
  font-size: var(--text-base);
}

.pricing-table tbody tr {
  background: var(--color-neutral-0);
  transition: background-color var(--transition-fast);
}

.pricing-table tbody tr:hover {
  background: var(--color-primary-50);
}

.pricing-table tbody tr:last-child td {
  border-bottom: none;
}

/* Responsive table */
@media (max-width: 600px) {
  .pricing-table {
    font-size: var(--text-sm);
  }

  .pricing-table th,
  .pricing-table td {
    padding: var(--space-3) var(--space-3);
  }
}