/* CLAUDE: KI-Programmierung für Einsteiger Landing Page Styles */
/* CLAUDE: Datei: assets/css/page-ki-programmierung.css */
/* CLAUDE: Basiert auf page-ki-strategie.css mit Code/Developer-Theme */
/* CLAUDE: Anpassen: Farben über CSS-Variablen */

/* ==========================================================================
   CLAUDE: 1. Hero Section - KI-Programmierung spezifisch
   CLAUDE: Dunkles Blau-Grün für Developer/Code-Feeling
   ========================================================================== */

.pvm-hero--ki-programmierung {
    background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 50%, #274c77 100%); /* CLAUDE: Dunkles Dev-Blau */
    color: var(--pvm-bg-white);
    padding: var(--pvm-space-3xl) 0 var(--pvm-space-2xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.pvm-hero--ki-programmierung::before { /* CLAUDE: Code-Pattern Overlay */
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.pvm-hero--ki-programmierung::after { /* CLAUDE: Subtiles Code-Grid Pattern */
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2322c55e' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.pvm-hero--ki-programmierung .content { position: relative; z-index: 1; }

/* CLAUDE: Kicker/Badge */
.pvm-hero--ki-programmierung .pvm-hero-kicker {
    display: inline-block;
    background: rgba(34, 197, 94, 0.2); /* CLAUDE: Grün-Tint für Code-Theme */
    backdrop-filter: blur(10px);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: var(--pvm-font-size-sm);
    font-weight: 600;
    color: #22c55e; /* CLAUDE: Code-Grün */
    margin-bottom: var(--pvm-space-md);
    border: 1px solid rgba(34, 197, 94, 0.3);
    letter-spacing: 0.02em;
}

/* CLAUDE: H1 mit Text-Shadow */
.pvm-hero--ki-programmierung h1 {
    font-size: var(--pvm-font-size-3xl);
    margin-bottom: var(--pvm-space-sm);
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* CLAUDE: Subline */
.pvm-hero--ki-programmierung .pvm-hero-text {
    font-size: var(--pvm-font-size-lg);
    max-width: 750px;
    margin: 0 auto var(--pvm-space-lg);
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 1.6;
}

/* CLAUDE: CTA Container */
.pvm-hero--ki-programmierung .pvm-hero-ctas {
    display: flex;
    gap: var(--pvm-space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

/* CLAUDE: Primary Button mit Code-Grün */
.pvm-hero--ki-programmierung .pvm-btn--primary {
    background: #22c55e;
    color: #0d1b2a;
    border: 2px solid #22c55e;
    padding: 0.875rem 2rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.pvm-hero--ki-programmierung .pvm-btn--primary:hover {
    background: #16a34a;
    border-color: #16a34a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

/* CLAUDE: Secondary/Outline Button */
.pvm-hero--ki-programmierung .pvm-btn--outline {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.7);
    padding: 0.875rem 2rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pvm-hero--ki-programmierung .pvm-btn--outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* ==========================================================================
   CLAUDE: Split-Layout für ki-programmierung
   ========================================================================== */

.pvm-hero--ki-programmierung.pvm-hero--split {
    text-align: left;
    padding: var(--pvm-space-2xl) 0 var(--pvm-space-xl);
}

.pvm-hero--ki-programmierung .pvm-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pvm-space-xl);
    align-items: center;
}

.pvm-hero--ki-programmierung .pvm-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pvm-hero--ki-programmierung .pvm-hero__image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pvm-hero--ki-programmierung .pvm-hero__img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.pvm-hero--ki-programmierung.pvm-hero--split .pvm-hero-ctas {
    justify-content: flex-start;
}

/* CLAUDE: Responsive */
@media (max-width: 1024px) {
    .pvm-hero--ki-programmierung .pvm-hero__grid {
        grid-template-columns: 1fr;
        gap: var(--pvm-space-lg);
        text-align: center;
    }

    .pvm-hero--ki-programmierung .pvm-hero__content {
        align-items: center;
    }

    .pvm-hero--ki-programmierung .pvm-hero__image {
        order: -1;
        max-width: 500px;
        margin: 0 auto;
    }

    .pvm-hero--ki-programmierung.pvm-hero--split .pvm-hero-ctas {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .pvm-hero--ki-programmierung.pvm-hero--split {
        text-align: center;
    }

    .pvm-hero--ki-programmierung h1 {
        font-size: var(--pvm-font-size-2xl);
    }

    .pvm-hero--ki-programmierung .pvm-hero-text {
        font-size: var(--pvm-font-size-base);
    }

    .pvm-hero--ki-programmierung .pvm-btn--primary,
    .pvm-hero--ki-programmierung .pvm-btn--outline {
        padding: 0.75rem 1.5rem;
        font-size: var(--pvm-font-size-sm);
        width: 100%;
        text-align: center;
    }

    .pvm-hero--ki-programmierung .pvm-hero-ctas {
        flex-direction: column;
        gap: var(--pvm-space-xs);
    }

    .pvm-hero--ki-programmierung .pvm-hero__image {
        max-width: 350px;
    }
}

/* ==========================================================================
   CLAUDE: 2. Learning Paths / Service Cards
   ========================================================================== */

.pvm-learning-paths {
    padding: var(--pvm-space-2xl) 0;
    background: var(--pvm-bg-light);
}

.pvm-learning-paths h2,
.pvm-learning-paths .pvm-section-subtitle {
    text-align: center;
}

.pvm-learning-paths .pvm-section-subtitle {
    margin-bottom: var(--pvm-space-xl);
    color: var(--pvm-text-muted);
}

/* CLAUDE: Learning Card mit Level-Badge */
/* CLAUDE: 2026-01-08 - Flexbox für gleiche Höhen im Grid */
/* CLAUDE: 2026-01-08 - min-width: 0 damit Grid-Spalten gleich breit bleiben */
/* CLAUDE: 2026-01-09 - overflow: hidden verhindert dass Meta-Elemente aus Card ragen */
.pvm-learning-card {
    display: flex; /* CLAUDE: Flexbox für gleiche Höhen */
    flex-direction: column; /* CLAUDE: Vertikale Anordnung */
    height: 100%; /* CLAUDE: Nimmt volle Grid-Zellenhöhe */
    min-width: 0; /* CLAUDE: Verhindert dass Content die Grid-Spaltenbreite überschreibt */
    overflow: hidden; /* CLAUDE: 2026-01-09 FIX - Badge/Duration können nicht mehr überlaufen */
    background: var(--pvm-bg-white);
    padding: var(--pvm-space-lg);
    border-radius: 12px;
    border: 1px solid var(--pvm-border);
    transition: all 0.3s ease;
    position: relative;
}

.pvm-learning-card:hover {
    border-color: #274c77;
    box-shadow: 0 8px 30px rgba(39, 76, 119, 0.15);
    transform: translateY(-4px);
}

/* CLAUDE: Meta-Bereich mit Level und Duration */
/* CLAUDE: 2026-01-09 FIX: flex-wrap + row-gap für Overflow-Problem bei langen Badges */
/* CLAUDE: Problem: "FORTGESCHRITTEN" + "2 Tage" überläuft bei schmalen Cards */
/* CLAUDE: Lösung: wrap erlauben, Duration umbrechen wenn nötig */
.pvm-learning-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--pvm-space-sm);
    gap: var(--pvm-space-xs);
    flex-wrap: wrap; /* CLAUDE: Erlaubt Umbruch wenn Badge zu lang */
    row-gap: var(--pvm-space-2xs); /* CLAUDE: Kleinerer vertikaler Abstand bei Umbruch */
}

.pvm-learning-card__level {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: var(--pvm-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* CLAUDE: Level-Varianten */
.pvm-learning-card__level--einsteiger {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.pvm-learning-card__level--fortgeschritten {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.pvm-learning-card__level--alle-level {
    background: rgba(168, 85, 247, 0.15);
    color: #9333ea;
}

.pvm-learning-card__duration {
    font-size: var(--pvm-font-size-xs);
    color: var(--pvm-text-muted);
    background: var(--pvm-bg-light);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap; /* CLAUDE: 2026-01-08 - Verhindert Umbruch bei "2 Tage" */
}

.pvm-learning-card h3 {
    font-size: var(--pvm-font-size-lg);
    margin-bottom: var(--pvm-space-xs);
    color: #274c77;
}

.pvm-learning-card > p {
    color: var(--pvm-text-muted);
    margin-bottom: var(--pvm-space-sm);
    flex-shrink: 0; /* CLAUDE: 2026-01-08 - Beschreibung behält Größe */
}

/* CLAUDE: 2026-01-08 - Features-Liste füllt verfügbaren Platz für gleiche Card-Höhen */
.pvm-learning-card .pvm-service-card__features {
    flex-grow: 1; /* CLAUDE: Dehnt sich aus um Platz zu füllen */
    margin-bottom: 0; /* CLAUDE: Kein zusätzlicher Abstand unten */
}

/* ==========================================================================
   CLAUDE: 3. KI-Tools Benefits Section (ehemals Python Benefits)
   CLAUDE: Für KI-gestützte Entwicklung - Warum KI-Tools beim Programmieren
   ========================================================================== */

.pvm-ki-tools-benefits {
    padding: var(--pvm-space-2xl) 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}

.pvm-ki-tools-benefits h2 {
    text-align: center;
    margin-bottom: var(--pvm-space-xl);
}

.pvm-ki-tools-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pvm-space-lg);
}

.pvm-ki-tools-benefit {
    text-align: center;
    padding: var(--pvm-space-lg);
    background: var(--pvm-bg-white);
    border-radius: 12px;
    border: 1px solid var(--pvm-border);
    transition: all 0.3s ease;
}

.pvm-ki-tools-benefit:hover {
    border-color: #22c55e;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.12);
    transform: translateY(-4px);
}

.pvm-ki-tools-benefit__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--pvm-space-md);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #22c55e;
}

.pvm-ki-tools-benefit:hover .pvm-ki-tools-benefit__icon {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
}

.pvm-ki-tools-benefit__icon svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: stroke 0.3s ease;
}

.pvm-ki-tools-benefit h3 {
    font-size: var(--pvm-font-size-base);
    margin-bottom: var(--pvm-space-xs);
    color: #274c77;
}

.pvm-ki-tools-benefit p {
    color: #595959;
    font-size: var(--pvm-font-size-sm);
    margin: 0;
    line-height: 1.6;
}

/* CLAUDE: Responsive */
@media (max-width: 1024px) {
    .pvm-ki-tools-benefits__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .pvm-ki-tools-benefits__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   CLAUDE: 4. Benefits Section Override - KI-Programmierung
   ========================================================================== */

.pvm-benefits.pvm-benefits--ki-programmierung {
    padding: var(--pvm-space-2xl) 0;
    background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
    color: #ffffff;
}

.pvm-benefits--ki-programmierung h2 {
    text-align: center;
    margin-bottom: var(--pvm-space-xl);
    color: #ffffff;
}

.pvm-benefits--ki-programmierung .pvm-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pvm-space-lg);
    max-width: 1000px;
    margin: 0 auto;
}

.pvm-benefits--ki-programmierung .pvm-stat-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    padding: var(--pvm-space-lg);
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.pvm-benefits--ki-programmierung .pvm-stat-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(34, 197, 94, 0.5);
    transform: translateY(-4px);
}

.pvm-benefits--ki-programmierung .pvm-stat-card__number {
    font-size: var(--pvm-font-size-2xl);
    font-weight: 800;
    color: #22c55e;
    margin-bottom: var(--pvm-space-2xs);
}

.pvm-benefits--ki-programmierung .pvm-stat-card__label {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--pvm-font-size-sm);
}

@media (max-width: 900px) {
    .pvm-benefits--ki-programmierung .pvm-benefits__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .pvm-benefits--ki-programmierung .pvm-benefits__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   CLAUDE: 5. Problem Cards Override - Code Theme
   CLAUDE: FIX: Responsive Grid für 4 Cards - vermeidet 3+1 Layout
   CLAUDE: Problem war: auto-fit erzeugt bei ~1200px ein 3+1 Layout
   CLAUDE: Lösung: Feste Breakpoints für gleichmäßige Verteilung
   ========================================================================== */

/* CLAUDE: Desktop: 4 Spalten - alle Cards in einer Reihe */
/* CLAUDE: Überschreibt auto-fit aus page-ki-strategie.css */
.pvm-hero--ki-programmierung ~ .pvm-problems .pvm-problems__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pvm-space-lg);
}

/* CLAUDE: Tablet (769-1099px): 2×2 Grid - symmetrisch */
@media (max-width: 1099px) {
    .pvm-hero--ki-programmierung ~ .pvm-problems .pvm-problems__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* CLAUDE: Mobile (≤768px): 1 Spalte - volle Breite */
@media (max-width: 768px) {
    .pvm-hero--ki-programmierung ~ .pvm-problems .pvm-problems__grid {
        grid-template-columns: 1fr;
    }
}

/* CLAUDE: Icon Styling - Code Theme Farben */
.pvm-hero--ki-programmierung ~ .pvm-problems .pvm-problem-card__icon {
    background: linear-gradient(135deg, rgba(39, 76, 119, 0.1) 0%, rgba(39, 76, 119, 0.05) 100%);
    color: #274c77;
}

.pvm-hero--ki-programmierung ~ .pvm-problems .pvm-problem-card:hover .pvm-problem-card__icon {
    background: linear-gradient(135deg, #274c77 0%, #1b263b 100%);
    color: #ffffff;
}

.pvm-hero--ki-programmierung ~ .pvm-problems .pvm-problem-card h3 {
    color: #274c77;
}

.pvm-hero--ki-programmierung ~ .pvm-problems .pvm-problem-card:hover {
    border-color: #274c77;
    box-shadow: 0 8px 24px rgba(39, 76, 119, 0.15);
}

/* ==========================================================================
   CLAUDE: 6. Process Timeline - Code Theme
   ========================================================================== */

.pvm-hero--ki-programmierung ~ .pvm-process .pvm-process-step__number {
    border-color: #274c77;
    color: #274c77;
}

.pvm-hero--ki-programmierung ~ .pvm-process .pvm-process-step:hover .pvm-process-step__number {
    background: #274c77;
    color: #ffffff;
}

.pvm-hero--ki-programmierung ~ .pvm-process .pvm-process__timeline::before {
    background: linear-gradient(90deg,
        #0d1b2a 0%,
        #1b263b 25%,
        #274c77 50%,
        #22c55e 100%
    );
}

.pvm-hero--ki-programmierung ~ .pvm-process .pvm-process-step h3 {
    color: #274c77;
}

/* ==========================================================================
   CLAUDE: 7. Differentiators - Code Theme
   ========================================================================== */

.pvm-hero--ki-programmierung ~ .pvm-differentiators .pvm-differentiator:hover {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.05);
}

.pvm-hero--ki-programmierung ~ .pvm-differentiators .pvm-differentiator__icon {
    color: #22c55e;
}

/* ==========================================================================
   CLAUDE: 8. FAQ Section - Code Theme
   CLAUDE: max-width + margin: 0 auto für zentriertes Layout mit Abstand links
   ========================================================================== */

/* CLAUDE: FAQ Liste zentrieren mit max-width (wie auf Chatbots-Seite) */
.pvm-hero--ki-programmierung ~ .pvm-faq .pvm-faq__list {
    max-width: 800px;  /* CLAUDE: Lesbare Breite wie Chatbots */
    margin: 0 auto;    /* CLAUDE: Zentriert mit gleichem Abstand links/rechts */
}

.pvm-hero--ki-programmierung ~ .pvm-faq h2 {
    color: #274c77;
}

.pvm-hero--ki-programmierung ~ .pvm-faq .pvm-faq-item__question:hover {
    color: #274c77;
}

.pvm-hero--ki-programmierung ~ .pvm-faq .pvm-faq-item__icon {
    color: #22c55e;
}

.pvm-hero--ki-programmierung ~ .pvm-faq .pvm-faq-item__answer a {
    color: #274c77;
}

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

.pvm-hero--ki-programmierung .pvm-btn--primary:focus-visible,
.pvm-hero--ki-programmierung .pvm-btn--outline:focus-visible {
    outline: 3px solid #22c55e;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.3);
}

.pvm-learning-card:focus-within,
.pvm-ki-tools-benefit:focus-within {
    outline: 3px solid #274c77;
    outline-offset: 2px;
}

/* ==========================================================================
   CLAUDE: 10. FORTGESCHRITTENE - Violett Theme Override
   CLAUDE: Differenziert sich visuell von der Einsteiger-Seite (Grün)
   CLAUDE: Farben: #8b5cf6 (Violett), #4c1d95 (Dunkelviolett), #a78bfa (Hell)
   ========================================================================== */

/* CLAUDE: Hero Section - Blau-Violett Gradient */
.pvm-hero--ki-programmierung-fortgeschrittene {
    background: linear-gradient(135deg, #0d1b2a 0%, #1e1b4b 50%, #4c1d95 100%);
}

.pvm-hero--ki-programmierung-fortgeschrittene::after {
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238b5cf6' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* CLAUDE: Kicker/Badge - Violett statt Grün */
.pvm-hero--ki-programmierung-fortgeschrittene .pvm-hero-kicker {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.3);
}

/* CLAUDE: Primary Button - Violett */
.pvm-hero--ki-programmierung-fortgeschrittene .pvm-btn--primary {
    background: #8b5cf6;
    color: #ffffff;
    border-color: #8b5cf6;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.pvm-hero--ki-programmierung-fortgeschrittene .pvm-btn--primary:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

/* CLAUDE: Focus States - Violett */
.pvm-hero--ki-programmierung-fortgeschrittene .pvm-btn--primary:focus-visible,
.pvm-hero--ki-programmierung-fortgeschrittene .pvm-btn--outline:focus-visible {
    outline: 3px solid #8b5cf6;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.3);
}

/* CLAUDE: Problem Cards - Violett Theme */
.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-problems .pvm-problem-card__icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
    color: #8b5cf6;
}

.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-problems .pvm-problem-card:hover .pvm-problem-card__icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #ffffff;
}

.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-problems .pvm-problem-card h3 {
    color: #4c1d95;
}

.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-problems .pvm-problem-card:hover {
    border-color: #8b5cf6;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
}

/* CLAUDE: Learning Cards - Level Badge "Experte" */
.pvm-learning-card__level--experte {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
}

/* CLAUDE: Learning Cards - Violett Hover */
.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-learning-paths .pvm-learning-card:hover {
    border-color: #8b5cf6;
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.15);
}

.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-learning-paths .pvm-learning-card h3 {
    color: #4c1d95;
}

/* CLAUDE: KI-Tools Benefits - Violett Icons */
.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-ki-tools-benefits .pvm-ki-tools-benefit__icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
    color: #8b5cf6;
}

.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-ki-tools-benefits .pvm-ki-tools-benefit:hover .pvm-ki-tools-benefit__icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #ffffff;
}

.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-ki-tools-benefits .pvm-ki-tools-benefit:hover {
    border-color: #8b5cf6;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.12);
}

.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-ki-tools-benefits .pvm-ki-tools-benefit h3 {
    color: #4c1d95;
}

/* CLAUDE: Benefits/Stats Section - Violett Akzente */
.pvm-benefits--fortgeschrittene {
    background: linear-gradient(135deg, #0d1b2a 0%, #1e1b4b 100%);
}

.pvm-benefits--fortgeschrittene .pvm-stat-card:hover {
    border-color: rgba(139, 92, 246, 0.5);
}

.pvm-benefits--fortgeschrittene .pvm-stat-card__number {
    color: #a78bfa;
}

/* CLAUDE: Process Timeline - Violett */
.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-process .pvm-process-step__number {
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-process .pvm-process-step:hover .pvm-process-step__number {
    background: #8b5cf6;
    color: #ffffff;
}

.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-process .pvm-process__timeline::before {
    background: linear-gradient(90deg,
        #0d1b2a 0%,
        #1e1b4b 25%,
        #4c1d95 50%,
        #8b5cf6 100%
    );
}

.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-process .pvm-process-step h3 {
    color: #4c1d95;
}

/* CLAUDE: Differentiators - Violett Checkmarks */
.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-differentiators .pvm-differentiator:hover {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}

.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-differentiators .pvm-differentiator__icon {
    color: #8b5cf6;
}

/* CLAUDE: FAQ Section - Violett Theme */
/* CLAUDE: FAQ Liste zentrieren mit max-width (wie auf Chatbots-Seite) */
.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-faq .pvm-faq__list {
    max-width: 800px;  /* CLAUDE: Lesbare Breite wie Chatbots */
    margin: 0 auto;    /* CLAUDE: Zentriert mit gleichem Abstand links/rechts */
}

.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-faq h2 {
    color: #4c1d95;
}

.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-faq .pvm-faq-item__question:hover {
    color: #4c1d95;
}

.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-faq .pvm-faq-item__icon {
    color: #8b5cf6;
}

.pvm-hero--ki-programmierung-fortgeschrittene ~ .pvm-faq .pvm-faq-item__answer a {
    color: #8b5cf6;
}

/* CLAUDE: CTA Banner für Einsteiger-Link */
.pvm-cta-banner--einsteiger {
    padding: var(--pvm-space-xl) 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.pvm-cta-banner--einsteiger .pvm-cta-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pvm-space-lg);
    padding: var(--pvm-space-lg);
    background: var(--pvm-bg-white);
    border-radius: 12px;
    border: 1px solid var(--pvm-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.pvm-cta-banner--einsteiger .pvm-cta-banner__text h3 {
    margin: 0 0 var(--pvm-space-2xs);
    font-size: var(--pvm-font-size-lg);
    color: #274c77;
}

.pvm-cta-banner--einsteiger .pvm-cta-banner__text p {
    margin: 0;
    color: var(--pvm-text-muted);
}

.pvm-cta-banner--einsteiger .pvm-btn--outline {
    background: transparent;
    color: #22c55e;
    border: 2px solid #22c55e;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.pvm-cta-banner--einsteiger .pvm-btn--outline:hover {
    background: #22c55e;
    color: #ffffff;
}

@media (max-width: 768px) {
    .pvm-cta-banner--einsteiger .pvm-cta-banner__inner {
        flex-direction: column;
        text-align: center;
    }

    .pvm-cta-banner--einsteiger .pvm-btn--outline {
        width: 100%;
    }
}

/* ==========================================================================
   CLAUDE: CTA Banner für Fortgeschrittene (auf Einsteiger-Seite)
   CLAUDE: 2026-01-08 - Violett-Akzent passend zum Fortgeschrittenen-Theme
   ========================================================================== */

.pvm-cta-banner--fortgeschrittene {
    padding: var(--pvm-space-xl) 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.pvm-cta-banner--fortgeschrittene .pvm-cta-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pvm-space-lg);
    padding: var(--pvm-space-lg);
    background: var(--pvm-bg-white);
    border-radius: 12px;
    border: 1px solid var(--pvm-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.pvm-cta-banner--fortgeschrittene .pvm-cta-banner__text h3 {
    margin: 0 0 var(--pvm-space-2xs);
    font-size: var(--pvm-font-size-lg);
    color: #4c1d95; /* CLAUDE: Violett passend zu Fortgeschrittene */
}

.pvm-cta-banner--fortgeschrittene .pvm-cta-banner__text p {
    margin: 0;
    color: var(--pvm-text-muted);
}

.pvm-cta-banner--fortgeschrittene .pvm-btn--outline {
    background: transparent;
    color: #8b5cf6; /* CLAUDE: Violett */
    border: 2px solid #8b5cf6;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.pvm-cta-banner--fortgeschrittene .pvm-btn--outline:hover {
    background: #8b5cf6;
    color: #ffffff;
}

@media (max-width: 768px) {
    .pvm-cta-banner--fortgeschrittene .pvm-cta-banner__inner {
        flex-direction: column;
        text-align: center;
    }

    .pvm-cta-banner--fortgeschrittene .pvm-btn--outline {
        width: 100%;
    }
}