/**
 * Leistungen-Seite Styles - Pflegeleistungen
 * Datei: public/assets/css/pages/leistungen.css
 * 
 * NUR seitenspezifische Styles - Gemeinsame Komponenten in components.css
 * 
 * Funktionen:
 * - Services Hauptbereich mit Intro
 * - Service-Cards (nutzt .service-grid, .service-card aus components.css)
 * - Zusätzliche Informationen (nutzt .info-box aus components.css)
 * 
 * Gemeinsame Komponenten (aus components.css):
 * - .page-header, .breadcrumb-link, .page-title, .page-subtitle
 * - .service-grid, .service-header, .service-badge, .service-highlight
 * - .service-content, .list-check
 * - .info-box, .info-icon, .info-content
 * - .cta-section-gradient, .cta-title, .cta-buttons
 * 
 * Hauptstyle: public/assets/css/style.css
 * Komponenten: public/assets/css/components.css
 * 
 * Pfad: public/assets/css/pages/leistungen.css
 */

/* ==========================================================================
   Services Hauptbereich
   ========================================================================== */

.services-section {
    padding: 80px 0;
    background: var(--secondary-color);
}

.services-intro {
    max-width: 900px;
    margin: 0 auto 4rem;
}

.services-intro .lead {
    font-size: 1.2rem;
    color: var(--text-dark);
    line-height: 1.8;
}

/* .service-grid, .service-card (Basis) → definiert in style.css + components.css */

/* ==========================================================================
   Zusätzliche Informationen Grid
   ========================================================================== */

.services-additional {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
    margin-bottom: 2rem;
}

/* .info-box → definiert in components.css */

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    .services-section {
        padding: 60px 20px;
    }
    
    .services-additional {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .services-intro .lead {
        font-size: 1.05rem;
    }
}