/* ==================================================================
 *               SERVICES.CSS - DIENSTLEISTUNGEN & WELTEN
 * ==================================================================
 * Version: 1.0.0
 * Letzte Aktualisierung: 2025-03-13
 *
 * Dieses Stylesheet gestaltet die Karten für die verschiedenen
 * Dienstleistungs-Bereiche.
 * ================================================================== */

/* ==================================================================
   1. GRID-LAYOUT FÜR DIE SERVICES
   ================================================================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
}

/* ==================================================================
   2. STYLING DER SERVICE-KARTE
   ================================================================== */
.service-card {
    background-color: var(--color-bg-primary);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden; /* Wichtig für den ::before Effekt */
    z-index: 1;
}

/* Dekorativer Hintergrund, der beim Hovern erscheint */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px; /* Startet als dünne Linie oben */
    background-color: var(--color-primary);
    transition: height 0.3s ease, opacity 0.3s ease;
    z-index: -1;
    opacity: 0.8;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-md);
}

.service-card:hover::before {
    height: 100%; /* Füllt die ganze Karte aus */
    opacity: 0.05; /* Wird dabei fast durchsichtig */
}

/* ==================================================================
   3. INHALT DER SERVICE-KARTE
   ================================================================== */
.service-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
    transition: transform 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
}

.service-card h3 {
    margin-bottom: var(--spacing-md);
    font-size: 1.8rem;
    color: var(--color-text-headline);
}

.service-card p {
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-secondary);
    line-height: 1.7;
    font-size: 1.1rem;
    flex-grow: 1; /* Sorgt dafür, dass Buttons bündig sind, falls Texte variieren */
}

/* ==================================================================
   4. FARBSYSTEM FÜR ICONS & LINKS
   ================================================================== */
/* Icon-Farben */
.icon-corporate { color: var(--color-secondary); }
.icon-motion     { color: var(--color-accent-green); }
.icon-web,
.icon-game     { color: var(--color-accent-grey); }
.icon-pixel,
.icon-about    { color: var(--color-primary); }

/* Die Links sind eine Variation des .btn-secondary */
.service-link.link-corporate { border-color: var(--color-secondary); color: var(--color-secondary); }
.service-link.link-corporate:hover { background-color: var(--color-secondary); color: white; }

.service-link.link-motion { border-color: var(--color-accent-green); color: var(--color-accent-green); }
.service-link.link-motion:hover { background-color: var(--color-accent-green); color: white; }

.service-link.link-web,
.service-link.link-game { border-color: var(--color-accent-grey); color: var(--color-accent-grey); }
.service-link.link-web:hover,
.service-link.link-game:hover { background-color: var(--color-accent-grey); color: white; }

/* Für Pixel & About verwenden wir den Standard .btn-secondary, daher keine extra Regel nötig */

/* ==================================================================
   5. RESPONSIVE ANPASSUNGEN
   ================================================================== */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}