/* ============================================================
   SANITÄR & SCHÖNE BÄDER PAGE — page-specific styles
   ============================================================ */

:root {
  --color-page: #3ab8f0; /* sky blue — water & bath */
}

/* hero-tag color inherited from --color-page in design-system */

.marquee-track span {
  color: color-mix(in srgb, var(--color-page) 55%, transparent);
}
.marquee-track span::after {
  color: var(--color-accent);
}

/* ── SERVICES OVERVIEW GRID ─────────────────── */
#leistungen {
  padding: var(--space-2xl) var(--page-padding);
}
/* .leistungen-header extends .section-header from design-system */
.leistungen-header h2 {
  max-width: 500px;
}

.leistungen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
/* .lst-card extends .card + .card-accent-top from design-system */
.lst-card:hover {
  border-color: color-mix(in srgb, var(--color-page) 30%, transparent);
  background: var(--color-surface-card-hover);
}

/* .lst-icon, .lst-title, .lst-text use .card-icon, .card-title, .card-desc from design-system */

/* ── HIGHLIGHT BAND ──────────────────────────── */
.bad-band {
  background: linear-gradient(135deg, #0d1e3a, #112a50);
  border-top: 1px solid color-mix(in srgb, var(--color-page) 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-page) 15%, transparent);
}
.bad-band h2 {
  color: var(--color-white);
}
.bad-band h2 em {
  color: var(--color-page);
}
[data-theme="light"] .bad-band {
  background: linear-gradient(135deg, #e4f0f8, #d0e5f4);
  border-top: 1px solid color-mix(in srgb, var(--color-page) 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-page) 15%, transparent);
}
[data-theme="light"] .bad-band h2 {
  color: var(--color-text);
}
[data-theme="light"] .bad-band h2 em {
  color: var(--color-page);
}

/* Light-mode card hover */
[data-theme="light"] .lst-card:hover {
  border-color: color-mix(in srgb, var(--color-page) 25%, transparent);
}

/* ── PROCESS SECTION ─────────────────────────── */
.sanitaer-process {
  padding: var(--space-2xl) var(--page-padding);
  background: var(--color-bg-deep);
}
.sanitaer-process .process-label {
  color: var(--color-page);
}

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width: 1024px) {
  .leistungen-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .leistungen-grid {
    grid-template-columns: 1fr;
  }
  /* .leistungen-header responsive handled by .section-header in design-system */
}