/* Einheitliche Leistungsfarben in der Übersicht und bei den Angeboten. */
.service-keller {
  --service-bg: #032f55;
  --service-ink: #ffffff;
  --service-muted: #d8e8f2;
  --service-line: #51758f;
  --service-chip: #17476c;
  --service-accent: #87d4ff;
}
.service-schimmel {
  --service-bg: #07596b;
  --service-ink: #ffffff;
  --service-muted: #d6edf2;
  --service-line: #518a96;
  --service-chip: #176b7a;
  --service-accent: #a2e5f2;
}
.service-fenster {
  --service-bg: #0a658f;
  --service-ink: #ffffff;
  --service-muted: #def2fc;
  --service-line: #73aec8;
  --service-chip: #1c749b;
  --service-accent: #b7e9ff;
}
.service-silikon {
  --service-bg: #e5f3fc;
  --service-ink: #032f55;
  --service-muted: #3f5d74;
  --service-line: #a5cede;
  --service-chip: #d0e8f6;
  --service-accent: #075b8b;
}
.service-trockner {
  --service-bg: #eaf0f5;
  --service-ink: #183b55;
  --service-muted: #445e70;
  --service-line: #b9ccd9;
  --service-chip: #d9e5ed;
  --service-accent: #204e6e;
}
#leistungen .services-grid, #preise .services-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
}
#leistungen .service-link, #preise .service-card { grid-column: span 2; }
#leistungen .service-link:nth-child(-n+2), #preise .service-card:nth-child(-n+2) { grid-column: span 3; }
#leistungen .service-link {
  background: var(--service-bg);
  border-color: var(--service-line);
}
#leistungen .service-link .service-content {
  min-width: 0;
  background: var(--service-bg);
  color: var(--service-ink);
}
#leistungen .service-content > span { color: var(--service-accent); }
#leistungen .service-content h3, #preise .service-card h3 {
  color: var(--service-ink);
  hyphens: auto;
  overflow-wrap: anywhere;
}
#leistungen .service-content p, #preise .service-card p { color: var(--service-muted); }
#leistungen .service-content li { background: var(--service-chip); color: var(--service-ink); }
#leistungen .service-more { color: var(--service-ink); border-color: var(--service-line); }
#preise .service-card {
  min-width: 0;
  background: var(--service-bg);
  border-color: var(--service-line);
  color: var(--service-ink);
}
#preise .service-card strong, #preise .polymer-price-link { color: var(--service-ink); }
@media (max-width: 900px) {
  #leistungen .services-grid, #preise .services-grid { grid-template-columns: minmax(0, 1fr); }
  #leistungen .service-link, #preise .service-card,
  #leistungen .service-link:nth-child(-n+2), #preise .service-card:nth-child(-n+2) { grid-column: auto; }
}
