/* ============================================================
   APEX DETAILING — pricing.css
   Seite 2 / Sektion 3: Fahrzeuggroessen-Matrix "Classic Table" (M1)
   ============================================================ */

.pricing {
  position: relative;
  padding: clamp(2rem, 4vw, 3rem) var(--container-pad) clamp(4rem, 7vw, 6rem);
  background: var(--color-bg-deep);
}

.pricing__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* ---------- HEADER ---------- */
.pricing__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  max-width: 720px;
}

.pricing__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
}

.pricing__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 1.3rem + 2.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  text-wrap: balance;
}

.pricing__lead {
  margin: 0;
  font-size: var(--fs-sub);
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* ---------- TABLE WRAPPER ---------- */
.pricing__wrap {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--color-bg-glass);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  border: var(--border-glass);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
}

.pricing__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.pricing__scroll::-webkit-scrollbar { height: 8px; }
.pricing__scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
}

/* ---------- TABLE ---------- */
.pricing__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-family: var(--font-body);
}

.pricing__table thead th {
  position: relative;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(30,144,255,0.10), rgba(30,144,255,0.02)),
    var(--color-bg-glass-strong);
  border-bottom: 1px solid rgba(30,144,255,0.25);
  white-space: nowrap;
}

.pricing__table thead th:first-child {
  text-align: left;
  color: var(--color-accent-soft);
}

.pricing__table thead th small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.pricing__table tbody td {
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  color: var(--color-text-primary);
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-smooth), color var(--duration-fast) var(--ease-smooth);
}

.pricing__table tbody tr:hover td {
  background: rgba(30,144,255,0.05);
}
.pricing__table tbody tr:hover td:first-child {
  color: var(--color-text-primary);
}

/* erste Spalte = Service-Name */
.pricing__service {
  text-align: left !important;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pricing__service-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,0.04);
  border: var(--border-glass);
  font-size: 1rem;
  line-height: 1;
}

.pricing__price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-primary);
}

.pricing__price small {
  display: inline-block;
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-right: 0.25em;
}

/* ---------- FEATURED ROW (APEX Complete) ---------- */
.pricing__row--featured td {
  background:
    linear-gradient(90deg, rgba(30,144,255,0.10), rgba(30,144,255,0.04) 70%),
    rgba(20,22,28,0.45);
  border-top: 1px solid rgba(30,144,255,0.35);
  position: relative;
}

.pricing__row--featured td:first-child {
  color: var(--color-text-primary);
}

.pricing__row--featured .pricing__service-icon {
  background: rgba(30,144,255,0.18);
  border-color: rgba(30,144,255,0.4);
  box-shadow: 0 0 12px var(--color-accent-glow);
}

.pricing__row--featured .pricing__price {
  color: var(--color-text-primary);
}

.pricing__badge {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.18rem 0.55rem;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
  background: rgba(30,144,255,0.12);
  border: 1px solid rgba(30,144,255,0.4);
  border-radius: 999px;
  vertical-align: middle;
}
.pricing__badge::before { content: '★ '; color: var(--color-accent); }

/* ---------- SCROLL HINT (Mobile) ---------- */
.pricing__hint {
  display: none;
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: center;
  letter-spacing: 0.1em;
}

@media (max-width: 760px) {
  .pricing__hint { display: block; }
}

/* ---------- NOTE ---------- */
.pricing__note {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  max-width: 64ch;
  line-height: 1.55;
}

.pricing__note strong { color: var(--color-text-primary); }

/* ---------- REVEAL ---------- */
.pricing__wrap {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}
.pricing.is-visible .pricing__wrap { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .pricing__wrap { opacity: 1; transform: none; transition: none; }
}