/* Seitenspezifisches Layout: Leistungsseiten (PROJ-10 SaaS, später PROJ-11/14/15). Bausteine stecken in components.css (page-head, steps, price-card, cta-banner). */
.service-section { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.service-section[id] { scroll-margin-top: calc(var(--header-top) + var(--header-h) + var(--space-4)); }

.feature-grid { display: grid; gap: var(--space-8) var(--space-8); list-style: none; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature-item__title { font-size: 17px; }
.feature-item__text { font-size: 15px; }
.feature-item__text a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

.ai-grid { display: grid; gap: var(--space-5); list-style: none; }
@media (min-width: 900px) { .ai-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ai-grid > li { display: flex; }
.ai-card { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; padding: var(--space-6); }
.ai-card__title { margin-top: var(--space-2); font-size: 19px; font-weight: var(--fw-semibold); letter-spacing: -0.015em; }
.ai-card p { color: var(--text-body); font-size: 15px; line-height: 1.6; }
.service-note { max-width: 680px; margin-top: var(--space-6); color: var(--text-muted); font-size: var(--fs-small); }

.service-more { margin-top: var(--space-6); }
.tech { margin-top: var(--space-12); }
.tech__title { margin-bottom: var(--space-4); font-size: var(--fs-h4); line-height: var(--lh-snug); }