/**
 * Team-Seite Styles - Teamdarstellung
 * Datei: public/assets/css/pages/team.css
 * 
 * NUR seitenspezifische Styles - Gemeinsame Komponenten in components.css
 * 
 * Funktionen:
 * - Team Intro Section
 * - Teamfoto-Bereich mit Lightbox
 * - Team-Expertise Section (nutzt .team-card aus components.css)
 * - Team-Werte Section (nutzt .value-card aus components.css)
 * 
 * Gemeinsame Komponenten (aus components.css):
 * - .page-header, .breadcrumb-link, .page-title, .page-subtitle
 * - .team-grid, .team-card, .team-card-icon, .team-card-title
 * - .value-card, .value-icon, .value-title, .value-description
 * - .values-grid
 * - .cta-section-white, .cta-content, .cta-title, .cta-buttons
 * 
 * Hauptstyle: public/assets/css/style.css
 * Komponenten: public/assets/css/components.css
 * 
 * Pfad: public/assets/css/pages/team.css
 */

/* ==========================================================================
   Team Intro Section
   ========================================================================== */

.team-intro {
    padding: 60px 0;
    background: white;
}

.team-intro .intro-content {
    max-width: 900px;
    margin: 0 auto;
}

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

.team-intro p {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* ==========================================================================
   Teamfoto Bereich
   ========================================================================== */

.team-photo-section {
    padding: 3rem 0;
    background-color: var(--secondary-color);
}

.team-photo-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.team-photo-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.team-photo {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.team-photo-caption {
    padding: 1.5rem;
    background-color: white;
    text-align: center;
}

.team-photo-caption p {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.1rem;
    font-weight: 500;
}

.team-photo-caption i {
    color: var(--primary-color);
    margin-right: 0.5rem;
}

/* ==========================================================================
   Team-Kompetenzen Section
   ========================================================================== */

.team-expertise-section {
    padding: 4rem 0;
}

/* .team-grid, .team-card → definiert in components.css */

/* ==========================================================================
   Team-Werte Bereich
   ========================================================================== */

.team-values-section {
    padding: 4rem 0;
    background-color: var(--accent-color);
}

.team-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

/* .value-card → definiert in components.css */

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

@media (max-width: 992px) {
    .team-expertise-section,
    .team-values-section {
        padding: 3rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .team-photo-section {
        padding: 2rem 1rem;
    }
    
    .team-expertise-section,
    .team-values-section {
        padding: 3rem 1rem;
    }
    
    .team-values {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .team-intro .lead {
        font-size: 1.05rem;
    }
    
    .team-photo-caption p {
        font-size: 1rem;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .cta-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .cta-buttons a {
        width: auto;
        min-width: 45%;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .team-photo-section,
    .team-expertise-section,
    .team-values-section {
        page-break-inside: avoid;
    }
}