/* ==========================================================================
   CLAUDE: Related Services - Zentrale Styles
   CLAUDE: Einheitliches Design für alle Entwicklungsseiten
   CLAUDE: Ersetzt duplizierte Styles aus page-ki-strategie.css, page-custom-applications.css
   CLAUDE: Anpassen: Variablen in base.css ändern
   ========================================================================== */

/* ==========================================================================
   CLAUDE: Section Container
   ========================================================================== */

.pvm-related-services {
    padding: var(--pvm-space-2xl) 0;                    /* CLAUDE: Großer vertikaler Abstand */
    background: var(--pvm-bg-light);                   /* CLAUDE: Leicht grauer Hintergrund */
}

.pvm-related-services h2 {
    text-align: center;                                /* CLAUDE: Zentrierte Überschrift */
    margin-bottom: var(--pvm-space-sm);                /* CLAUDE: Abstand zum Subtitle */
    color: var(--pvm-text);                            /* CLAUDE: Dunkle Textfarbe */
}

/* CLAUDE: Optionaler Untertitel */
.pvm-related-services__subtitle {
    text-align: center;                                /* CLAUDE: Zentriert */
    color: var(--pvm-text-muted);                      /* CLAUDE: Gedämpfter Text */
    margin-bottom: var(--pvm-space-xl);                /* CLAUDE: Abstand zum Grid */
    max-width: 600px;                                  /* CLAUDE: Begrenzte Breite */
    margin-left: auto;                                 /* CLAUDE: Horizontal zentriert */
    margin-right: auto;
    font-size: var(--pvm-font-size-base);             /* CLAUDE: Standard-Schriftgröße */
    line-height: 1.6;                                  /* CLAUDE: Gute Lesbarkeit */
}

/* ==========================================================================
   CLAUDE: Grid Layout - Feste Spalten (kein auto-fit!)
   CLAUDE: Verhindert 3:1 Layouts auf Tablet
   ========================================================================== */

.pvm-related-services__grid {
    display: grid;                                     /* CLAUDE: CSS Grid */
    grid-template-columns: repeat(3, 1fr);             /* CLAUDE: 3 gleiche Spalten Desktop */
    gap: var(--pvm-space-lg);                          /* CLAUDE: 32px Abstand */
}

/* ==========================================================================
   CLAUDE: Related Card - Basis-Styling
   ========================================================================== */

.pvm-related-card {
    background: var(--pvm-bg-white);                   /* CLAUDE: Weißer Hintergrund */
    padding: var(--pvm-space-lg);                      /* CLAUDE: 32px Innenabstand */
    border-radius: var(--pvm-radius-lg);               /* CLAUDE: 12px Ecken */
    border: 1px solid var(--pvm-border);               /* CLAUDE: Dezenter Border */
    text-decoration: none;                             /* CLAUDE: Kein Underline */
    color: inherit;                                    /* CLAUDE: Farbe erben */
    display: flex;                                     /* CLAUDE: Flexbox Layout */
    flex-direction: column;                            /* CLAUDE: Vertikal stacken */
    position: relative;                                /* CLAUDE: Für Pseudo-Element */
    overflow: hidden;                                  /* CLAUDE: Gradient-Border nicht überlappen */
    transition: all 0.3s ease;                         /* CLAUDE: Smooth Transitions */
}

/* ==========================================================================
   CLAUDE: Gradient-Border Effekt (Pseudo-Element)
   ========================================================================== */

.pvm-related-card::before {
    content: '';                                       /* CLAUDE: Pseudo-Element */
    position: absolute;                                /* CLAUDE: Absolut positioniert */
    top: 0;                                            /* CLAUDE: Am oberen Rand */
    left: 0;
    right: 0;
    height: 3px;                                       /* CLAUDE: Dünne Linie */
    background: var(--pvm-gradient);                   /* CLAUDE: Lila-Blau Gradient */
    transform: scaleX(0);                              /* CLAUDE: Initial unsichtbar */
    transform-origin: left;                            /* CLAUDE: Von links einblenden */
    transition: transform 0.3s ease;                   /* CLAUDE: Smooth Animation */
}

/* ==========================================================================
   CLAUDE: Hover-Effekte
   ========================================================================== */

.pvm-related-card:hover {
    border-color: var(--pvm-primary);                  /* CLAUDE: Lila Border */
    box-shadow: 0 12px 40px rgba(140, 10, 183, 0.15);  /* CLAUDE: Lila Shadow */
    transform: translateY(-6px);                       /* CLAUDE: Card schwebt hoch */
}

.pvm-related-card:hover::before {
    transform: scaleX(1);                              /* CLAUDE: Gradient-Border einblenden */
}

/* ==========================================================================
   CLAUDE: Icon Container
   ========================================================================== */

.pvm-related-card__icon {
    width: 52px;                                       /* CLAUDE: Icon-Container Breite */
    height: 52px;                                      /* CLAUDE: Icon-Container Höhe */
    background: linear-gradient(
        135deg,
        rgba(140, 10, 183, 0.1) 0%,
        rgba(76, 65, 224, 0.1) 100%
    );                                                 /* CLAUDE: Leichter Gradient-Hintergrund */
    border-radius: 12px;                               /* CLAUDE: Abgerundete Ecken */
    display: flex;                                     /* CLAUDE: Flexbox */
    align-items: center;                               /* CLAUDE: Vertikal zentriert */
    justify-content: center;                           /* CLAUDE: Horizontal zentriert */
    margin-bottom: var(--pvm-space-md);                /* CLAUDE: Abstand zum Titel */
    transition: all 0.3s ease;                         /* CLAUDE: Smooth Transitions */
    color: var(--pvm-primary);                         /* CLAUDE: Lila für SVG stroke */
}

/* CLAUDE: Icon Hover - Gradient-Hintergrund + weiße Icons */
.pvm-related-card:hover .pvm-related-card__icon {
    background: var(--pvm-gradient);                   /* CLAUDE: Voller Gradient */
    color: #ffffff;                                    /* CLAUDE: Weiße Icons */
    transform: scale(1.08);                            /* CLAUDE: Leicht vergrößern */
}

/* CLAUDE: SVG Icon Styling */
.pvm-related-card__icon svg {
    width: 24px;                                       /* CLAUDE: Icon-Größe */
    height: 24px;
    stroke: currentColor;                              /* CLAUDE: Erbt Farbe vom Parent */
    stroke-width: 2;                                   /* CLAUDE: Linienstärke */
    fill: none;                                        /* CLAUDE: Outline-Style */
    transition: stroke 0.3s ease;                      /* CLAUDE: Farbwechsel animieren */
}

/* ==========================================================================
   CLAUDE: Card Content
   ========================================================================== */

.pvm-related-card h3 {
    font-size: var(--pvm-font-size-lg);               /* CLAUDE: 18px */
    font-weight: 600;                                  /* CLAUDE: Halbfett */
    margin-bottom: var(--pvm-space-xs);                /* CLAUDE: 8px zum Text */
    color: var(--pvm-text);                            /* CLAUDE: Dunkle Textfarbe */
    transition: color 0.2s ease;                       /* CLAUDE: Farbwechsel animieren */
    line-height: 1.3;                                  /* CLAUDE: Kompakte Zeilenhöhe */
}

.pvm-related-card:hover h3 {
    color: var(--pvm-primary);                         /* CLAUDE: Lila bei Hover */
}

.pvm-related-card p {
    font-size: var(--pvm-font-size-sm);               /* CLAUDE: 14px */
    color: var(--pvm-text-muted);                      /* CLAUDE: Grauer Text */
    margin-bottom: var(--pvm-space-md);                /* CLAUDE: 24px zum Arrow */
    flex: 1;                                           /* CLAUDE: Nimmt verfügbaren Platz */
    line-height: 1.6;                                  /* CLAUDE: Gute Lesbarkeit */
}

/* ==========================================================================
   CLAUDE: Arrow Link
   ========================================================================== */

.pvm-related-card__arrow {
    display: inline-flex;                              /* CLAUDE: Inline Flexbox */
    align-items: center;                               /* CLAUDE: Vertikal zentriert */
    gap: 0.5rem;                                       /* CLAUDE: 8px Abstand */
    color: var(--pvm-primary);                         /* CLAUDE: Lila Farbe */
    font-weight: 600;                                  /* CLAUDE: Halbfett */
    font-size: var(--pvm-font-size-sm);               /* CLAUDE: 14px */
    margin-top: auto;                                  /* CLAUDE: Immer am unteren Rand */
}

.pvm-related-card__arrow svg {
    width: 16px;                                       /* CLAUDE: Kleine Icon-Größe */
    height: 16px;
    stroke: currentColor;                              /* CLAUDE: Erbt Farbe */
    stroke-width: 2;
    fill: none;
    transition: transform 0.2s ease;                   /* CLAUDE: Pfeil-Animation */
}

.pvm-related-card:hover .pvm-related-card__arrow svg {
    transform: translateX(4px);                        /* CLAUDE: Pfeil bewegt sich rechts */
}

/* ==========================================================================
   CLAUDE: Responsive - Tablet (769px - 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
    .pvm-related-services__grid {
        grid-template-columns: repeat(2, 1fr);         /* CLAUDE: 2 Spalten */
        gap: var(--pvm-space-md);                      /* CLAUDE: 24px Abstand */
    }

    .pvm-related-card {
        padding: var(--pvm-space-md);                  /* CLAUDE: 24px Padding */
    }
}

/* ==========================================================================
   CLAUDE: Responsive - Mobile (<640px)
   ========================================================================== */

@media (max-width: 640px) {
    .pvm-related-services {
        padding: var(--pvm-space-xl) 0;                /* CLAUDE: Weniger Padding */
    }

    .pvm-related-services__grid {
        grid-template-columns: 1fr;                    /* CLAUDE: 1 Spalte */
        gap: var(--pvm-space-sm);                      /* CLAUDE: 16px Abstand */
    }

    .pvm-related-card {
        padding: var(--pvm-space-md);                  /* CLAUDE: 24px Padding */
    }

    .pvm-related-card__icon {
        width: 44px;                                   /* CLAUDE: Kleinere Icons */
        height: 44px;
    }

    .pvm-related-card__icon svg {
        width: 20px;
        height: 20px;
    }

    /* CLAUDE: Touch-Target Mindestgröße (44x44px) */
    .pvm-related-card {
        min-height: 44px;
    }

    /* CLAUDE: Kein Hover-Transform auf Touch-Geräten */
    .pvm-related-card:hover {
        transform: none;
    }
}

/* ==========================================================================
   CLAUDE: Accessibility - Focus States
   ========================================================================== */

.pvm-related-card:focus-visible {
    outline: 3px solid var(--pvm-primary);             /* CLAUDE: Lila Focus-Ring */
    outline-offset: 3px;                               /* CLAUDE: Abstand */
    border-color: var(--pvm-primary);                  /* CLAUDE: Border auch lila */
}

/* CLAUDE: Focus innerhalb der Card (für Screenreader) */
.pvm-related-card:focus-within {
    border-color: var(--pvm-primary);
}

/* ==========================================================================
   CLAUDE: Accessibility - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .pvm-related-card,
    .pvm-related-card::before,
    .pvm-related-card__icon,
    .pvm-related-card__arrow svg,
    .pvm-related-card h3 {
        transition: none;                              /* CLAUDE: Keine Animationen */
    }

    .pvm-related-card:hover {
        transform: none;                               /* CLAUDE: Kein Lift */
    }

    .pvm-related-card:hover .pvm-related-card__icon {
        transform: none;                               /* CLAUDE: Kein Scale */
    }

    .pvm-related-card:hover .pvm-related-card__arrow svg {
        transform: none;                               /* CLAUDE: Kein Pfeil-Move */
    }
}

/* ==========================================================================
   CLAUDE: High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
    .pvm-related-card {
        border: 2px solid var(--pvm-text);             /* CLAUDE: Stärkerer Border */
        box-shadow: none;                              /* CLAUDE: Kein Shadow */
    }

    .pvm-related-card:hover {
        border-color: var(--pvm-primary);
        box-shadow: none;
    }

    .pvm-related-card__icon {
        border: 2px solid currentColor;                /* CLAUDE: Sichtbarer Border */
    }
}

/* ==========================================================================
   CLAUDE: Print Styles
   ========================================================================== */

@media print {
    .pvm-related-services {
        background: none;
        padding: 1rem 0;
    }

    .pvm-related-card {
        border: 1px solid #333;
        box-shadow: none;
        break-inside: avoid;                           /* CLAUDE: Nicht umbrechen */
    }

    .pvm-related-card__arrow {
        display: none;                                 /* CLAUDE: Keine Links im Druck */
    }
}