/* CLAUDE: Automatisierungs-Seite Styles | Seitenspezifische Erweiterungen | Anpassen: Variablen in base.css */
/* CLAUDE: Wird nur auf /ki-entwicklung/automatisierung/ geladen */

/* ==========================================================================
   CLAUDE: Hero mit Gradient-Hintergrund
   ========================================================================== */

.pvm-automation-hero {
    background: var(--pvm-gradient);                    /* CLAUDE: Marken-Gradient */
    color: var(--pvm-bg-white);                         /* CLAUDE: Weißer Text */
    padding: var(--pvm-space-3xl) 0;                    /* CLAUDE: Großer Abstand */
    text-align: center;                                 /* CLAUDE: Zentriert */
}

.pvm-automation-hero h1 {
    font-size: var(--pvm-font-size-3xl);               /* CLAUDE: Große Headline */
    margin-bottom: var(--pvm-space-md);                /* CLAUDE: Abstand */
    color: inherit;                                     /* CLAUDE: Weiß erben */
}

.pvm-automation-hero__subtitle {
    font-size: var(--pvm-font-size-lg);                /* CLAUDE: Größerer Text */
    opacity: 0.95;                                      /* CLAUDE: Leicht transparent */
    max-width: 700px;                                   /* CLAUDE: Lesbare Breite */
    margin: 0 auto var(--pvm-space-xl);                /* CLAUDE: Zentriert + Abstand */
}

.pvm-automation-hero__cta {
    display: flex;                                      /* CLAUDE: Flexbox */
    gap: var(--pvm-space-sm);                          /* CLAUDE: Abstand zwischen Buttons */
    justify-content: center;                           /* CLAUDE: Zentriert */
    flex-wrap: wrap;                                    /* CLAUDE: Umbruch auf Mobile */
    margin-bottom: var(--pvm-space-xl);                /* CLAUDE: Abstand zu Trust */
}

.pvm-automation-hero__trust {
    display: flex;                                      /* CLAUDE: Flexbox */
    gap: var(--pvm-space-lg);                          /* CLAUDE: Abstand */
    justify-content: center;                           /* CLAUDE: Zentriert */
    flex-wrap: wrap;                                    /* CLAUDE: Umbruch */
    font-size: var(--pvm-font-size-sm);                /* CLAUDE: Kleiner Text */
    opacity: 0.9;                                       /* CLAUDE: Leicht transparent */
}

.pvm-automation-hero__trust span::before {
    content: '✓ ';                                      /* CLAUDE: Checkmark */
}

/* CLAUDE: Weiße Button-Varianten für dunklen Hintergrund */
.pvm-btn--white {
    background: var(--pvm-bg-white);                   /* CLAUDE: Weißer Hintergrund */
    color: var(--pvm-primary);                         /* CLAUDE: Lila Text */
}

.pvm-btn--white:hover {
    background: rgba(255,255,255,0.9);                 /* CLAUDE: Leicht transparent */
    color: var(--pvm-primary);                         /* CLAUDE: Lila bleibt */
    transform: translateY(-2px);                       /* CLAUDE: Lift-Effekt */
}

.pvm-btn--outline-white {
    background: transparent;                           /* CLAUDE: Transparent */
    color: var(--pvm-bg-white);                        /* CLAUDE: Weißer Text */
    border: 2px solid var(--pvm-bg-white);             /* CLAUDE: Weißer Border */
}

.pvm-btn--outline-white:hover {
    background: var(--pvm-bg-white);                   /* CLAUDE: Weiß gefüllt */
    color: var(--pvm-primary);                         /* CLAUDE: Lila Text */
}

/* ==========================================================================
   CLAUDE: Trust-Bar mit Gradient-Hintergrund
   CLAUDE: Konsistent mit pvm-trust-bar aus page-chatbots.css
   CLAUDE: FIX 2025-01-07: Erhöhte Spezifität um Base-Styles zu überschreiben
   ========================================================================== */

/* CLAUDE: Doppelte Klasse für höhere Spezifität (überschreibt .pvm-trust-bar Base) */
.pvm-trust-bar.pvm-trust-bar--gradient {
    background: var(--pvm-gradient) !important;        /* CLAUDE: Gradient Hintergrund - !important als Fallback */
    border-bottom: none;                               /* CLAUDE: Kein Border bei Gradient */
    box-shadow: none;                                  /* CLAUDE: Kein Shadow bei Gradient */
}

/* CLAUDE: Weiße Textfarben für Gradient-Hintergrund */
.pvm-trust-bar--gradient .pvm-trust-stat__number {
    color: #ffffff;                                    /* CLAUDE: Weiß statt Lila */
}

.pvm-trust-bar--gradient .pvm-trust-stat__suffix {
    color: #ffffff;                                    /* CLAUDE: Weiß */
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);   /* CLAUDE: Etwas kleiner als Nummer */
    font-weight: 800;                                  /* CLAUDE: Extra fett */
}

.pvm-trust-bar--gradient .pvm-trust-stat__label {
    color: rgba(255, 255, 255, 0.9);                  /* CLAUDE: Weiß mit leichter Transparenz */
}

/* ==========================================================================
   CLAUDE: Use Case Cards mit Icons
   ========================================================================== */

.pvm-usecase-card {
    background: var(--pvm-bg-white);                   /* CLAUDE: Weißer Hintergrund */
    border-radius: var(--pvm-radius-xl);               /* CLAUDE: Abgerundete Ecken */
    padding: var(--pvm-space-xl);                      /* CLAUDE: Innenabstand */
    text-align: center;                                /* CLAUDE: Zentriert */
    box-shadow: var(--pvm-shadow-sm);                  /* CLAUDE: Leichter Schatten */
    transition: transform var(--pvm-transition-base),  /* CLAUDE: Transform */
                box-shadow var(--pvm-transition-base); /* CLAUDE: Shadow */
}

.pvm-usecase-card:hover {
    transform: translateY(-8px);                       /* CLAUDE: Anheben */
    box-shadow: var(--pvm-shadow-lg);                  /* CLAUDE: Größerer Schatten */
}

.pvm-usecase-card__icon {
    font-size: 3rem;                                   /* CLAUDE: Große Emoji-Icons */
    margin-bottom: var(--pvm-space-md);                /* CLAUDE: Abstand */
}

.pvm-usecase-card__title {
    font-size: var(--pvm-font-size-lg);               /* CLAUDE: Größer */
    margin-bottom: var(--pvm-space-sm);                /* CLAUDE: Abstand */
    color: var(--pvm-primary);                         /* CLAUDE: Lila */
}

.pvm-usecase-card__benefits {
    list-style: none;                                  /* CLAUDE: Keine Bullets */
    padding: 0;                                        /* CLAUDE: Kein Padding */
    margin: var(--pvm-space-md) 0;                     /* CLAUDE: Vertikaler Abstand */
    font-size: var(--pvm-font-size-sm);               /* CLAUDE: Kleiner */
    color: var(--pvm-text-muted);                      /* CLAUDE: Grau */
}

.pvm-usecase-card__benefits li::before {
    content: '• ';                                     /* CLAUDE: Bullet */
    color: var(--pvm-primary);                         /* CLAUDE: Lila Bullet */
}

/* ==========================================================================
   CLAUDE: Section Footer Text - Zentriert unter Tech-Tags
   ========================================================================== */

.pvm-section__footer-text {
    text-align: center;                                /* CLAUDE: Text zentriert */
    max-width: 600px;                                  /* CLAUDE: Lesbare Breite */
    margin: var(--pvm-space-md) auto 0;               /* CLAUDE: Oben Abstand, horizontal zentriert */
    color: var(--pvm-text-muted);                     /* CLAUDE: Gedämpfter Text */
    font-size: var(--pvm-font-size-base);             /* CLAUDE: Standard-Größe */
}

/* ==========================================================================
   CLAUDE: Technologie-Tags
   ========================================================================== */

.pvm-tech-tags {
    display: flex;                                     /* CLAUDE: Flexbox */
    flex-wrap: wrap;                                   /* CLAUDE: Umbruch */
    gap: var(--pvm-space-sm);                          /* CLAUDE: Abstand */
    justify-content: center;                           /* CLAUDE: Zentriert */
    max-width: 100%;                                   /* CLAUDE: Verhindert Overflow */
}

.pvm-tech-tag {
    background: var(--pvm-bg-light);                   /* CLAUDE: Heller Hintergrund */
    color: var(--pvm-text);                            /* CLAUDE: Dunkler Text */
    padding: var(--pvm-space-sm) var(--pvm-space-md);  /* CLAUDE: Padding */
    border-radius: var(--pvm-radius-full);             /* CLAUDE: Pill-Shape */
    font-weight: 500;                                  /* CLAUDE: Medium */
    transition: all var(--pvm-transition-fast);        /* CLAUDE: Transition */
}

.pvm-tech-tag:hover {
    background: var(--pvm-primary);                    /* CLAUDE: Lila */
    color: var(--pvm-bg-white);                        /* CLAUDE: Weiß */
}

/* ==========================================================================
   CLAUDE: Prozess-Timeline
   ========================================================================== */

.pvm-process-timeline {
    display: grid;                                     /* CLAUDE: Grid */
    grid-template-columns: repeat(4, 1fr);             /* CLAUDE: 4 Spalten */
    gap: var(--pvm-space-lg);                          /* CLAUDE: Abstand */
    position: relative;                                /* CLAUDE: Für Linie */
}

.pvm-process-step {
    text-align: center;                                /* CLAUDE: Zentriert */
    position: relative;                                /* CLAUDE: Für Nummer */
}

.pvm-process-step__number {
    width: 48px;                                       /* CLAUDE: Breite */
    height: 48px;                                      /* CLAUDE: Höhe */
    background: var(--pvm-gradient);                   /* CLAUDE: Gradient */
    color: var(--pvm-bg-white);                        /* CLAUDE: Weiß */
    border-radius: 50%;                                /* CLAUDE: Rund */
    display: flex;                                     /* CLAUDE: Flexbox */
    align-items: center;                               /* CLAUDE: Vertikal */
    justify-content: center;                           /* CLAUDE: Horizontal */
    font-weight: 700;                                  /* CLAUDE: Fett */
    font-size: var(--pvm-font-size-lg);               /* CLAUDE: Größer */
    margin: 0 auto var(--pvm-space-md);                /* CLAUDE: Zentriert */
}

.pvm-process-step__title {
    font-weight: 600;                                  /* CLAUDE: Halbfett */
    margin-bottom: var(--pvm-space-xs);                /* CLAUDE: Kleiner Abstand */
}

.pvm-process-step__desc {
    font-size: var(--pvm-font-size-sm);               /* CLAUDE: Klein */
    color: var(--pvm-text-muted);                      /* CLAUDE: Grau */
}

/* ==========================================================================
   CLAUDE: Benefit-Cards für Gradient-Section
   ========================================================================== */

.pvm-section--gradient {
    background: var(--pvm-gradient);                   /* CLAUDE: Gradient */
    color: var(--pvm-bg-white);                        /* CLAUDE: Weiß */
}

.pvm-section--gradient h2 {
    color: inherit;                                    /* CLAUDE: Weiß erben */
}

.pvm-benefit-item {
    display: flex;                                     /* CLAUDE: Flexbox */
    align-items: flex-start;                           /* CLAUDE: Oben ausrichten */
    gap: var(--pvm-space-sm);                          /* CLAUDE: Abstand */
    margin-bottom: var(--pvm-space-md);                /* CLAUDE: Unten */
}

.pvm-benefit-item::before {
    content: '✓';                                      /* CLAUDE: Checkmark */
    font-weight: 700;                                  /* CLAUDE: Fett */
}

/* ==========================================================================
   CLAUDE: Responsive Anpassungen
   ========================================================================== */

@media (max-width: 992px) {
    .pvm-process-timeline {
        grid-template-columns: repeat(2, 1fr);         /* CLAUDE: 2 Spalten Tablet */
    }
}

@media (max-width: 768px) {
    .pvm-automation-hero {
        padding: var(--pvm-space-2xl) 0;               /* CLAUDE: Weniger Padding */
    }

    .pvm-automation-hero h1 {
        font-size: var(--pvm-font-size-2xl);           /* CLAUDE: Kleiner */
    }

    .pvm-process-timeline {
        grid-template-columns: 1fr;                    /* CLAUDE: 1 Spalte Mobile */
    }

    /* CLAUDE: Verhindere horizontales Overflow auf Mobile */
    .pvm-container,
    .pvm-section,
    .pvm-grid,
    .pvm-usecase-card,
    .pvm-card {
        max-width: 100%;                               /* CLAUDE: Max-Width begrenzen */
        overflow-x: hidden;                            /* CLAUDE: Overflow verstecken */
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .pvm-usecase-card,
    .pvm-tech-tag,
    .pvm-btn--white,
    .pvm-btn--outline-white {
        transition: none;                              /* CLAUDE: Keine Animation */
    }

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

/* ==========================================================================
   CLAUDE: Trust Bar Base Styles
   CLAUDE: Konsistent mit page-chatbots.css Trust-Bar Komponente
   ========================================================================== */

.pvm-trust-bar {
    background: var(--pvm-bg-white);                   /* CLAUDE: Weißer Hintergrund */
    padding: var(--pvm-space-lg) 0;                    /* CLAUDE: Vertikales Padding */
    border-bottom: 1px solid var(--pvm-border);        /* CLAUDE: Subtiler Border */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);         /* CLAUDE: Leichter Schatten */
}

/* CLAUDE: Automation Modifier - überschreibt bei Bedarf */
.pvm-trust-bar--automation {
    /* CLAUDE: Erbt von .pvm-trust-bar, keine Überschreibungen nötig */
}

.pvm-trust-bar__stats {
    display: flex;                                      /* CLAUDE: Flexbox */
    justify-content: center;                           /* CLAUDE: Zentriert */
    gap: var(--pvm-space-2xl);                         /* CLAUDE: Großer Abstand */
    flex-wrap: wrap;                                    /* CLAUDE: Umbruch auf Mobile */
}

.pvm-trust-stat {
    text-align: center;                                /* CLAUDE: Zentriert */
    padding: 0 var(--pvm-space-md);                    /* CLAUDE: Horizontales Padding */
}

.pvm-trust-stat__number {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); /* CLAUDE: Fluid größer */
    font-weight: 800;                                   /* CLAUDE: Extra fett */
    color: var(--pvm-primary);                         /* CLAUDE: Primärfarbe */
    display: inline;                                    /* CLAUDE: Inline für Suffix */
    line-height: 1.1;                                   /* CLAUDE: Enge Zeilenhöhe */
}

.pvm-trust-stat__suffix {
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);    /* CLAUDE: Kleiner als Nummer */
    font-weight: 800;                                   /* CLAUDE: Extra fett */
    color: var(--pvm-primary);                         /* CLAUDE: Primärfarbe */
}

.pvm-trust-stat__label {
    display: block;                                     /* CLAUDE: Neue Zeile */
    font-size: 0.9375rem;                              /* CLAUDE: 15px */
    color: var(--pvm-text-muted);                      /* CLAUDE: Gedämpfter Text */
    font-weight: 500;                                   /* CLAUDE: Medium weight */
    margin-top: 0.25rem;                               /* CLAUDE: Kleiner Abstand */
}

/* ==========================================================================
   CLAUDE: Problem Cards mit Icons (NEU - Phase 2)
   ========================================================================== */

.pvm-problem-card {
    position: relative;                                /* CLAUDE: Für Icon-Positionierung */
    padding-top: var(--pvm-space-xl);                  /* CLAUDE: Platz für Icon */
}

.pvm-problem-card__icon {
    width: 56px;                                        /* CLAUDE: Icon-Breite */
    height: 56px;                                       /* CLAUDE: Icon-Höhe */
    margin: 0 auto var(--pvm-space-md);                /* CLAUDE: Zentriert + Abstand */
    background: var(--pvm-gradient);                   /* CLAUDE: Gradient-Hintergrund */
    border-radius: 50%;                                 /* CLAUDE: Rund */
    display: flex;                                      /* CLAUDE: Flexbox */
    align-items: center;                               /* CLAUDE: Vertikal zentriert */
    justify-content: center;                           /* CLAUDE: Horizontal zentriert */
    color: #ffffff;                                     /* CLAUDE: Für SVG stroke="currentColor" */
}

/* CLAUDE: SVG Icon Styling - Inline SVGs (Standard gemäß CLAUDE.md) */
.pvm-problem-card__icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;                              /* CLAUDE: Erbt weiß vom Parent */
    stroke-width: 2;
    fill: none;
}

/* ==========================================================================
   CLAUDE: Responsive Trust-Bar
   ========================================================================== */

@media (max-width: 768px) {
    .pvm-trust-bar__stats {
        gap: var(--pvm-space-lg);                      /* CLAUDE: Kleinerer Abstand */
    }

    .pvm-trust-stat {
        flex: 0 0 calc(50% - var(--pvm-space-md));    /* CLAUDE: 2 Spalten */
    }

    .pvm-trust-stat__number {
        font-size: 1.5rem;                             /* CLAUDE: Kleiner auf Mobile */
    }
}

/* ==========================================================================
   CLAUDE: CTA Section mit Split-Layout (NEU - Phase 3)
   ========================================================================== */

.pvm-cta-section--split {
    padding: var(--pvm-space-2xl) 0;                   /* CLAUDE: Vertikales Padding */
    background: var(--pvm-bg-light);                   /* CLAUDE: Heller Hintergrund */
}

.pvm-cta-section__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 */
    font-size: var(--pvm-font-size-lg);               /* CLAUDE: Größerer Text */
}

.pvm-cta-grid {
    display: grid;                                      /* CLAUDE: Grid Layout */
    grid-template-columns: 1.2fr 0.8fr;                /* CLAUDE: Mehr Platz für Formular */
    gap: var(--pvm-space-xl);                          /* CLAUDE: Abstand */
    align-items: start;                                /* CLAUDE: Oben ausrichten */
}

.pvm-cta-form {
    background: var(--pvm-bg-white);                   /* CLAUDE: Weißer Hintergrund */
    padding: var(--pvm-space-xl);                      /* CLAUDE: Innenabstand */
    border-radius: var(--pvm-radius-xl);               /* CLAUDE: Abgerundete Ecken */
    box-shadow: var(--pvm-shadow-md);                  /* CLAUDE: Schatten */
}

.pvm-contact-card {
    background: var(--pvm-bg-white);                   /* CLAUDE: Weißer Hintergrund */
    padding: var(--pvm-space-xl);                      /* CLAUDE: Innenabstand */
    border-radius: var(--pvm-radius-xl);               /* CLAUDE: Abgerundete Ecken */
    text-align: center;                                /* CLAUDE: Zentriert */
    box-shadow: var(--pvm-shadow-md);                  /* CLAUDE: Schatten */
}

.pvm-contact-card__avatar {
    width: 110px;                                       /* CLAUDE: Breite */
    height: 110px;                                      /* CLAUDE: Höhe */
    border-radius: 50%;                                 /* CLAUDE: Rund */
    object-fit: cover;                                  /* CLAUDE: Bild anpassen */
    margin-bottom: var(--pvm-space-md);                /* CLAUDE: Abstand */
    border: 4px solid var(--pvm-primary);              /* CLAUDE: Rahmen */
    box-shadow: 0 4px 12px rgba(140, 10, 183, 0.2);    /* CLAUDE: Glow */
}

.pvm-contact-card h3 {
    font-size: 0.875rem;                               /* CLAUDE: Klein */
    color: var(--pvm-primary);                         /* CLAUDE: Primärfarbe */
    margin-bottom: var(--pvm-space-xs);                /* CLAUDE: Kleiner Abstand */
    text-transform: uppercase;                         /* CLAUDE: Großbuchstaben */
    letter-spacing: 0.05em;                            /* CLAUDE: Buchstabenabstand */
    font-weight: 600;                                   /* CLAUDE: Halbfett */
}

.pvm-contact-card__name {
    font-size: 1.25rem;                                /* CLAUDE: 20px */
    font-weight: 700;                                   /* CLAUDE: Fett */
    margin-bottom: 0.25rem;                            /* CLAUDE: Minimaler Abstand */
    color: var(--pvm-text);                            /* CLAUDE: Textfarbe */
}

.pvm-contact-card__title {
    color: var(--pvm-text-muted);                      /* CLAUDE: Gedämpfter Text */
    margin-bottom: var(--pvm-space-md);                /* CLAUDE: Abstand */
    font-size: 0.9375rem;                              /* CLAUDE: 15px */
}

.pvm-contact-card__email,
.pvm-contact-card__phone {
    display: block;                                     /* CLAUDE: Block für eigene Zeile */
    color: var(--pvm-primary);                         /* CLAUDE: Primärfarbe */
    text-decoration: none;                             /* CLAUDE: Keine Unterstreichung */
    margin-bottom: var(--pvm-space-xs);                /* CLAUDE: Kleiner Abstand */
    font-size: 1rem;                                    /* CLAUDE: Normale Größe */
    font-weight: 500;                                   /* CLAUDE: Medium */
    transition: color var(--pvm-transition-fast);      /* CLAUDE: Transition */
}

.pvm-contact-card__email:hover,
.pvm-contact-card__phone:hover {
    color: var(--pvm-primary-dark);                    /* CLAUDE: Dunklere Farbe */
    text-decoration: underline;                        /* CLAUDE: Unterstreichung */
}

/* CLAUDE: Responsive CTA-Grid */
@media (max-width: 768px) {
    .pvm-cta-grid {
        grid-template-columns: 1fr;                    /* CLAUDE: 1 Spalte auf Mobile */
    }

    .pvm-contact-card {
        order: -1;                                      /* CLAUDE: Ansprechpartner zuerst */
    }
}

/* ==========================================================================
   CLAUDE: Split-Hero mit Bild (NEU - identisch zu Chatbots-Seite)
   CLAUDE: Überschreibt den alten zentrierten Hero
   ========================================================================== */

/* CLAUDE: Basis-Styles für den neuen Split-Hero */
.pvm-hero--automation {
    background: linear-gradient(135deg, #4a0668 0%, #2a1d90 50%, #1d1570 100%); /* CLAUDE: Dunklerer Gradient */
    color: var(--pvm-bg-white);
    padding: var(--pvm-space-3xl) 0 var(--pvm-space-2xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* CLAUDE: Dunkles Overlay für besseren Kontrast */
.pvm-hero--automation::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* CLAUDE: Subtiles Pattern */
.pvm-hero--automation::after {
    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='%23ffffff' fill-opacity='0.02'%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--automation .content {
    position: relative;
    z-index: 1;
}

/* CLAUDE: Split-Layout aktivieren */
.pvm-hero--automation.pvm-hero--split {
    text-align: left;
    padding: var(--pvm-space-2xl) 0 var(--pvm-space-xl);
}

/* CLAUDE: Grid-Layout für Text + Bild */
.pvm-hero--automation .pvm-hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--pvm-space-xl);
    align-items: center;
}

/* CLAUDE: Text-Content Styling */
.pvm-hero--automation .pvm-hero__content {
    max-width: 620px;
    padding-right: var(--pvm-space-md);
}

/* CLAUDE: Kicker/Trust-Badge */
.pvm-hero--automation .pvm-hero-kicker {
    display: inline-block;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    padding: 0.625rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: var(--pvm-space-md);
    border: 1px solid rgba(255, 255, 255, 0.4);
    letter-spacing: 0.03em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* CLAUDE: H1 Styling */
.pvm-hero--automation h1 {
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
    margin-bottom: var(--pvm-space-md);
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* CLAUDE: Hero-Text */
.pvm-hero--automation .pvm-hero-text {
    font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.25rem);
    max-width: 580px;
    margin: 0 0 var(--pvm-space-lg);
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.7;
    font-weight: 400;
}

/* CLAUDE: CTA Buttons Container */
.pvm-hero--automation .pvm-hero-ctas {
    display: flex;
    gap: var(--pvm-space-md);
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: var(--pvm-space-sm);
}

/* CLAUDE: Primary Button */
.pvm-hero--automation .pvm-btn--primary {
    background: #ffffff;
    color: #5a0778;
    border: 2px solid #ffffff;
    padding: 1rem 2.25rem;
    font-size: 1.0625rem;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(255, 255, 255, 0.1);
    letter-spacing: 0.01em;
}

.pvm-hero--automation .pvm-btn--primary:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #4a0668;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.2);
}

/* CLAUDE: Outline Button */
.pvm-hero--automation .pvm-btn--outline {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.9);
    padding: 1rem 2.25rem;
    font-size: 1.0625rem;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.pvm-hero--automation .pvm-btn--outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15);
}

/* CLAUDE: Bild-Container mit Effekten */
.pvm-hero--automation .pvm-hero__image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* CLAUDE: Glasmorphism-Rahmen - FIX: inset:0 statt -4px um Overflow zu vermeiden */
.pvm-hero--automation .pvm-hero__image::before {
    content: '';
    position: absolute;
    inset: 0;                                              /* CLAUDE: Fix für Overflow (war -4px) */
    border-radius: 16px;                                   /* CLAUDE: Gleich wie Image */
    background: transparent;                               /* CLAUDE: Kein Gradient mehr */
    box-shadow:
        0 0 0 4px rgba(255,255,255,0.15),                  /* CLAUDE: Ersetzt den alten Gradient-Rahmen */
        inset 0 0 30px rgba(255,255,255,0.05);             /* CLAUDE: Innerer Glow für Tiefe */
    z-index: 1;                                            /* CLAUDE: Über dem Bild für sichtbaren Effekt */
    pointer-events: none;                                  /* CLAUDE: Klicks durchlassen */
}

/* CLAUDE: Lila-Tint Overlay */
.pvm-hero--automation .pvm-hero__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(90, 7, 120, 0.3) 0%, rgba(45, 31, 138, 0.2) 100%);
    border-radius: 16px;
    pointer-events: none;
}

/* CLAUDE: Das Bild selbst */
.pvm-hero--automation .pvm-hero__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    transition: transform 0.5s ease;
    filter: brightness(0.95) contrast(1.05);
}

/* CLAUDE: Hover-Effekt */
.pvm-hero--automation .pvm-hero__image:hover .pvm-hero__img {
    transform: scale(1.02);
}

/* ==========================================================================
   CLAUDE: Responsive Anpassungen für Split-Hero
   ========================================================================== */

@media (max-width: 768px) {
    .pvm-hero--automation {
        padding: var(--pvm-space-lg) 0;
    }

    .pvm-hero--automation .pvm-hero__grid {
        grid-template-columns: 1fr;
        gap: var(--pvm-space-md);
    }

    /* CLAUDE: Bild über Text auf Mobile */
    .pvm-hero--automation .pvm-hero__image {
        order: -1;
        max-width: 100%;
        margin: 0 auto var(--pvm-space-sm);
    }

    .pvm-hero--automation.pvm-hero--split {
        text-align: center;
    }

    .pvm-hero--automation .pvm-hero-ctas {
        justify-content: center;
        flex-direction: column;
        gap: var(--pvm-space-sm);
    }

    .pvm-hero--automation .pvm-hero__content {
        max-width: 100%;
        padding-right: 0;
    }

    .pvm-hero--automation h1 {
        font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    }

    .pvm-hero--automation .pvm-hero-text {
        font-size: 1rem;
        line-height: 1.6;
    }

    .pvm-hero--automation .pvm-hero-kicker {
        font-size: 0.8125rem;
        padding: 0.5rem 1.25rem;
    }

    .pvm-hero--automation .pvm-btn--primary,
    .pvm-hero--automation .pvm-btn--outline {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        width: 100%;
        text-align: center;
    }
}

/* CLAUDE: Tablet-Breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
    .pvm-hero--automation .pvm-hero__grid {
        grid-template-columns: 1.2fr 0.8fr;
        gap: var(--pvm-space-lg);
    }

    .pvm-hero--automation h1 {
        font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
    }
}

/* ==========================================================================
   CLAUDE: Layout-Optimierungen (2025-01-07)
   CLAUDE: Fixes für Card-Höhen, Touch-Targets und Icon-Konsistenz
   ========================================================================== */

/* CLAUDE: Use-Case Cards - Gleiche Höhen durch Flexbox + Grid-Rows */
.pvm-section--light .pvm-grid--3 {
    align-items: stretch;                                  /* CLAUDE: Cards in gleicher Zeile gleich hoch */
    grid-auto-rows: 1fr;                                   /* CLAUDE: Alle Zeilen gleich hoch */
}

.pvm-usecase-card {
    display: flex;                                         /* CLAUDE: Flexbox für Höhenausgleich */
    flex-direction: column;                                /* CLAUDE: Vertikale Ausrichtung */
    height: 100%;                                          /* CLAUDE: Füllt Grid-Zelle */
}

/* CLAUDE: Beschreibungstext nimmt verfügbaren Platz */
.pvm-usecase-card > p {
    flex: 1 0 auto;                                        /* CLAUDE: Wächst, schrumpft nicht */
}

/* CLAUDE: Benefits-Liste nach unten pushen */
.pvm-usecase-card__benefits {
    margin-top: auto;                                      /* CLAUDE: Immer am unteren Bereich */
}

/* CLAUDE: Link immer am unteren Rand */
.pvm-usecase-card .pvm-card__link {
    margin-top: var(--pvm-space-sm);                       /* CLAUDE: Abstand zu Benefits */
    display: inline-flex;                                  /* CLAUDE: Für Touch-Target */
    align-items: center;                                   /* CLAUDE: Vertikal zentriert */
}

/* ==========================================================================
   CLAUDE: Use-Case Card Icons - SVG Styling (ersetzt Emoji)
   ========================================================================== */

/* CLAUDE: Icon-Container für SVG-Icons (ersetzt Emoji-Styling) */
.pvm-usecase-card__icon--svg {
    width: 64px;                                           /* CLAUDE: Größer als Problem-Cards */
    height: 64px;                                          /* CLAUDE: Quadratisch */
    margin: 0 auto var(--pvm-space-md);                   /* CLAUDE: Zentriert + Abstand */
    background: var(--pvm-gradient);                       /* CLAUDE: Gradient wie Problem-Cards */
    border-radius: 50%;                                    /* CLAUDE: Rund */
    display: flex;                                         /* CLAUDE: Flexbox */
    align-items: center;                                   /* CLAUDE: Vertikal zentriert */
    justify-content: center;                               /* CLAUDE: Horizontal zentriert */
    color: #ffffff;                                        /* CLAUDE: Für SVG stroke */
    font-size: 1rem;                                       /* CLAUDE: Reset für Emoji-Fallback */
}

/* CLAUDE: SVG Icon Styling in Use-Case Cards */
.pvm-usecase-card__icon--svg svg {
    width: 28px;                                           /* CLAUDE: Icon-Größe */
    height: 28px;                                          /* CLAUDE: Quadratisch */
    stroke: currentColor;                                  /* CLAUDE: Erbt weiß vom Parent */
    stroke-width: 2;                                       /* CLAUDE: Linienstärke */
    fill: none;                                            /* CLAUDE: Outline-Style */
}

/* ==========================================================================
   CLAUDE: Mobile Touch-Targets (min 44x44px für A11y)
   ========================================================================== */

@media (max-width: 768px) {
    /* CLAUDE: Tech-Tags größer für Touch */
    .pvm-tech-tag {
        min-height: 44px;                                  /* CLAUDE: Mindesthöhe für Touch */
        padding: 0.75rem 1rem;                             /* CLAUDE: Mehr Padding */
        display: inline-flex;                              /* CLAUDE: Flexbox für Zentrierung */
        align-items: center;                               /* CLAUDE: Vertikal zentriert */
    }

    /* CLAUDE: Card-Links größer für Touch */
    .pvm-card__link,
    .pvm-usecase-card .pvm-card__link {
        min-height: 44px;                                  /* CLAUDE: Mindesthöhe für Touch */
        padding: 0.5rem 0;                                 /* CLAUDE: Vertikales Padding */
    }

    /* CLAUDE: Related Cards Touch-Target */
    .pvm-related-card {
        min-height: 44px;                                  /* CLAUDE: Mindesthöhe */
        padding: var(--pvm-space-md);                      /* CLAUDE: Ausreichend Padding */
    }
}

/* ==========================================================================
   CLAUDE: FAQ Section Styles (konsistent mit Chatbots-Seite)
   CLAUDE: Accordion mit Schema.org Markup Support
   ========================================================================== */

.pvm-faq {
    padding: var(--pvm-space-2xl) 0;                       /* CLAUDE: Vertikales Padding */
    background: #ffffff;                                   /* CLAUDE: Weißer Hintergrund */
}

.pvm-faq h2 {
    text-align: center;                                    /* CLAUDE: Zentrierte Überschrift */
    margin-bottom: var(--pvm-space-xl);                   /* CLAUDE: Abstand zur Liste */
    font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);    /* CLAUDE: Fluid Font-Size */
    color: #1a1a1a;                                        /* CLAUDE: Dunkle Textfarbe */
}

.pvm-faq__list {
    max-width: 800px;                                      /* CLAUDE: Lesbare Breite */
    margin: 0 auto;                                        /* CLAUDE: Zentriert */
}

.pvm-faq-item {
    background: #fafafa;                                   /* CLAUDE: Leichter Hintergrund */
    border: 1px solid #e0e0e0;                            /* CLAUDE: Subtiler Border */
    border-radius: 10px;                                   /* CLAUDE: Abgerundete Ecken */
    margin-bottom: var(--pvm-space-md);                   /* CLAUDE: Abstand zwischen Items */
    overflow: hidden;                                      /* CLAUDE: Border-Radius auf Kinder */
}

.pvm-faq-item__question {
    width: 100%;                                           /* CLAUDE: Volle Breite */
    padding: var(--pvm-space-md) var(--pvm-space-lg);     /* CLAUDE: Innenabstand */
    display: flex;                                         /* CLAUDE: Flexbox für Layout */
    justify-content: space-between;                       /* CLAUDE: Icon rechts */
    align-items: center;                                   /* CLAUDE: Vertikal zentriert */
    background: transparent;                               /* CLAUDE: Transparenter Hintergrund */
    border: none;                                          /* CLAUDE: Kein Border */
    font-size: 1.0625rem;                                 /* CLAUDE: 17px Schriftgröße */
    font-weight: 600;                                      /* CLAUDE: Halbfett */
    text-align: left;                                      /* CLAUDE: Linksbündig */
    color: #1a1a1a;                                        /* CLAUDE: Dunkle Textfarbe */
    cursor: pointer;                                       /* CLAUDE: Zeiger-Cursor */
    transition: background 0.2s ease;                     /* CLAUDE: Hover-Transition */
}

.pvm-faq-item__question:hover {
    background: #f0f0f0;                                   /* CLAUDE: Hover-Hintergrund */
}

.pvm-faq-item__question[aria-expanded="true"] {
    background: #f0f0f0;                                   /* CLAUDE: Geöffnet-Hintergrund */
}

.pvm-faq-item__icon {
    font-size: 1.5rem;                                     /* CLAUDE: Icon-Größe */
    color: #5a0778;                                        /* CLAUDE: Primärfarbe */
    transition: transform 0.3s;                           /* CLAUDE: Rotation-Transition */
    flex-shrink: 0;                                        /* CLAUDE: Nicht schrumpfen */
    margin-left: var(--pvm-space-sm);                     /* CLAUDE: Abstand zum Text */
}

.pvm-faq-item__question[aria-expanded="true"] .pvm-faq-item__icon {
    transform: rotate(45deg);                              /* CLAUDE: + wird x bei geöffnet */
}

.pvm-faq-item__answer {
    padding: 0 var(--pvm-space-lg) var(--pvm-space-lg);   /* CLAUDE: Innenabstand */
    color: #333333;                                        /* CLAUDE: Dunkler Text */
    line-height: 1.7;                                      /* CLAUDE: Gute Lesbarkeit */
    font-size: 0.9375rem;                                 /* CLAUDE: 15px */
}

.pvm-faq-item__answer[hidden] {
    display: none;                                         /* CLAUDE: Versteckt wenn hidden */
}

.pvm-faq-item__answer p {
    margin-bottom: var(--pvm-space-sm);                   /* CLAUDE: Absatz-Abstand */
    color: #333333;                                        /* CLAUDE: Konsistente Farbe */
}

.pvm-faq-item__answer ul {
    margin: var(--pvm-space-sm) 0;                        /* CLAUDE: Listen-Abstand */
    padding-left: var(--pvm-space-lg);                    /* CLAUDE: Einrückung */
}

.pvm-faq-item__answer li {
    margin-bottom: var(--pvm-space-xs);                   /* CLAUDE: Listen-Item-Abstand */
    color: #333333;                                        /* CLAUDE: Konsistente Farbe */
}

.pvm-faq-item__answer strong {
    color: #1a1a1a;                                        /* CLAUDE: Fetter Text dunkler */
    font-weight: 600;                                      /* CLAUDE: Halbfett */
}

/* CLAUDE: FAQ Responsive - Mobile */
@media (max-width: 768px) {
    .pvm-faq-item__question {
        padding: var(--pvm-space-md);                      /* CLAUDE: Weniger Padding */
        font-size: 1rem;                                   /* CLAUDE: Kleinere Schrift */
    }

    .pvm-faq-item__answer {
        padding: 0 var(--pvm-space-md) var(--pvm-space-md); /* CLAUDE: Weniger Padding */
    }
}

/* ==========================================================================
   CLAUDE: Benefit-Cards mit Glassmorphism (NEU - 2025-01-07)
   CLAUDE: Ersetzt die einfachen pvm-benefit-item Text-Listen
   CLAUDE: Horizontales Layout: Icon links, Text rechts
   ========================================================================== */

/* CLAUDE: Grid-Container für Benefit-Cards */
.pvm-benefit-grid {
    display: grid;                                         /* CLAUDE: CSS Grid */
    grid-template-columns: repeat(3, 1fr);                 /* CLAUDE: 3 Spalten Desktop */
    gap: var(--pvm-space-lg);                              /* CLAUDE: 32px Abstand */
}

/* CLAUDE: Einzelne Benefit-Card mit Glassmorphism */
.pvm-benefit-card {
    display: flex;                                         /* CLAUDE: Flexbox horizontal */
    align-items: flex-start;                               /* CLAUDE: Oben ausrichten */
    gap: var(--pvm-space-md);                              /* CLAUDE: 24px Icon-Text Abstand */
    padding: var(--pvm-space-lg);                          /* CLAUDE: 32px Innenabstand */
    background: rgba(255, 255, 255, 0.08);                 /* CLAUDE: Glassmorphism Basis */
    -webkit-backdrop-filter: blur(12px);                   /* CLAUDE: Safari Blur */
    backdrop-filter: blur(12px);                           /* CLAUDE: Standard Blur */
    border: 1px solid rgba(255, 255, 255, 0.15);           /* CLAUDE: Subtiler Border */
    border-radius: var(--pvm-radius-lg);                   /* CLAUDE: 12px Ecken */
    transition: all 0.3s ease;                             /* CLAUDE: Hover-Transition */
}

/* CLAUDE: Fallback für Browser ohne backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
    .pvm-benefit-card {
        background: rgba(255, 255, 255, 0.12);             /* CLAUDE: Etwas stärker ohne Blur */
    }
}

/* CLAUDE: Hover-Effekt - Card hebt sich */
.pvm-benefit-card:hover {
    background: rgba(255, 255, 255, 0.12);                 /* CLAUDE: Etwas heller */
    transform: translateY(-4px);                           /* CLAUDE: Anheben */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);           /* CLAUDE: Tieferer Schatten */
    border-color: rgba(255, 255, 255, 0.25);               /* CLAUDE: Border heller */
}

/* CLAUDE: Icon-Container - rund mit weißem Hintergrund */
.pvm-benefit-card__icon {
    width: 52px;                                           /* CLAUDE: Icon-Container Breite */
    height: 52px;                                          /* CLAUDE: Icon-Container Höhe */
    min-width: 52px;                                       /* CLAUDE: Nicht schrumpfen */
    background: rgba(255, 255, 255, 0.15);                 /* CLAUDE: Leicht transparenter BG */
    border-radius: 50%;                                    /* CLAUDE: Rund */
    display: flex;                                         /* CLAUDE: Flexbox */
    align-items: center;                                   /* CLAUDE: Vertikal zentriert */
    justify-content: center;                               /* CLAUDE: Horizontal zentriert */
    color: #ffffff;                                        /* CLAUDE: Weiß für SVG stroke */
    transition: all 0.3s ease;                             /* CLAUDE: Hover-Transition */
}

/* CLAUDE: Icon-Container Hover - leuchtet auf */
.pvm-benefit-card:hover .pvm-benefit-card__icon {
    background: rgba(255, 255, 255, 0.25);                 /* CLAUDE: Heller bei Hover */
    transform: scale(1.05);                                /* CLAUDE: Leicht größer */
}

/* CLAUDE: SVG Icon Styling */
.pvm-benefit-card__icon svg {
    width: 24px;                                           /* CLAUDE: Icon-Größe */
    height: 24px;                                          /* CLAUDE: Icon-Größe */
    stroke: currentColor;                                  /* CLAUDE: Erbt weiß vom Parent */
    stroke-width: 2;                                       /* CLAUDE: Linienstärke */
    fill: none;                                            /* CLAUDE: Outline-Style */
}

/* CLAUDE: Text-Content Container */
.pvm-benefit-card__content {
    flex: 1;                                               /* CLAUDE: Nimmt restlichen Platz */
}

/* CLAUDE: Benefit-Titel (z.B. "40-70% Zeitersparnis") */
.pvm-benefit-card__title {
    font-size: 1.125rem;                                   /* CLAUDE: 18px */
    font-weight: 700;                                      /* CLAUDE: Fett */
    color: #ffffff;                                        /* CLAUDE: Weiß */
    margin: 0 0 var(--pvm-space-xs) 0;                     /* CLAUDE: Nur unten Abstand */
    line-height: 1.3;                                      /* CLAUDE: Kompakte Zeilenhöhe */
}

/* CLAUDE: Benefit-Beschreibung */
.pvm-benefit-card__text {
    font-size: 0.9375rem;                                  /* CLAUDE: 15px */
    color: rgba(255, 255, 255, 0.8);                       /* CLAUDE: Leicht transparent */
    margin: 0;                                             /* CLAUDE: Kein Margin */
    line-height: 1.5;                                      /* CLAUDE: Gute Lesbarkeit */
}

/* ==========================================================================
   CLAUDE: Benefit-Cards Responsive
   ========================================================================== */

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

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

/* CLAUDE: Mobile - 1 Spalte */
@media (max-width: 640px) {
    .pvm-benefit-grid {
        grid-template-columns: 1fr;                        /* CLAUDE: 1 Spalte */
        gap: var(--pvm-space-sm);                          /* CLAUDE: 16px Abstand */
    }

    .pvm-benefit-card {
        padding: var(--pvm-space-md);                      /* CLAUDE: 24px Padding */
        gap: var(--pvm-space-sm);                          /* CLAUDE: 16px Icon-Text */
    }

    .pvm-benefit-card__icon {
        width: 44px;                                       /* CLAUDE: Kleiner auf Mobile */
        height: 44px;
        min-width: 44px;
    }

    .pvm-benefit-card__icon svg {
        width: 20px;                                       /* CLAUDE: Kleinere Icons */
        height: 20px;
    }

    .pvm-benefit-card__title {
        font-size: 1rem;                                   /* CLAUDE: 16px */
    }

    .pvm-benefit-card__text {
        font-size: 0.875rem;                               /* CLAUDE: 14px */
    }
}

/* ==========================================================================
   CLAUDE: Benefit-Cards Accessibility
   ========================================================================== */

/* CLAUDE: Reduced Motion - keine Animationen */
@media (prefers-reduced-motion: reduce) {
    .pvm-benefit-card,
    .pvm-benefit-card__icon {
        transition: none;                                  /* CLAUDE: Keine Transition */
    }

    .pvm-benefit-card:hover {
        transform: none;                                   /* CLAUDE: Kein Anheben */
    }

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

/* CLAUDE: High Contrast Mode */
@media (prefers-contrast: high) {
    .pvm-benefit-card {
        border: 2px solid #ffffff;                         /* CLAUDE: Stärkerer Border */
        background: rgba(0, 0, 0, 0.5);                    /* CLAUDE: Dunkler für Kontrast */
    }
}

/* ==========================================================================
   CLAUDE: Trust-Bar Cards Design (NEU - 2025-01-07)
   CLAUDE: Jeder Wert in einer eigenen Card mit Responsive Grid
   CLAUDE: Desktop: 4 Spalten | Tablet: 2x2 | Mobile: 2x2 kompakt
   ========================================================================== */

/* CLAUDE: Trust-Bar mit Cards Modifier */
.pvm-trust-bar.pvm-trust-bar--cards {
    background: var(--pvm-bg-light, #f8f9fa);              /* CLAUDE: Leicht grauer Hintergrund */
    padding: var(--pvm-space-xl) 0;                        /* CLAUDE: Mehr vertikales Padding */
    border-bottom: none;                                    /* CLAUDE: Kein Border */
    box-shadow: none;                                       /* CLAUDE: Kein Shadow */
}

/* CLAUDE: Grid-Container für Trust-Cards */
.pvm-trust-cards {
    display: grid;                                          /* CLAUDE: CSS Grid */
    grid-template-columns: repeat(4, 1fr);                 /* CLAUDE: 4 gleiche Spalten Desktop */
    gap: var(--pvm-space-lg);                              /* CLAUDE: 32px Abstand */
    max-width: 1000px;                                     /* CLAUDE: Maximale Breite */
    margin: 0 auto;                                        /* CLAUDE: Zentriert */
}

/* CLAUDE: Einzelne Trust-Card */
.pvm-trust-card {
    background: var(--pvm-bg-white, #ffffff);              /* CLAUDE: Weiße Card */
    border-radius: var(--pvm-radius-lg, 12px);             /* CLAUDE: Abgerundete Ecken */
    padding: var(--pvm-space-lg) var(--pvm-space-md);      /* CLAUDE: 32px oben/unten, 24px seitlich */
    text-align: center;                                    /* CLAUDE: Zentrierter Text */
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),                     /* CLAUDE: Subtiler Schatten */
        0 4px 16px rgba(0, 0, 0, 0.04);                    /* CLAUDE: Zweiter Layer */
    border: 1px solid rgba(0, 0, 0, 0.06);                 /* CLAUDE: Sehr dezenter Border */
    transition: all 0.3s ease;                             /* CLAUDE: Hover-Transition */
}

/* CLAUDE: Card Hover-Effekt */
.pvm-trust-card:hover {
    transform: translateY(-4px);                           /* CLAUDE: Leichtes Anheben */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),                    /* CLAUDE: Stärkerer Schatten */
        0 8px 24px rgba(0, 0, 0, 0.08);                    /* CLAUDE: Zweiter Layer */
    border-color: rgba(140, 10, 183, 0.15);                /* CLAUDE: Lila Border-Akzent */
}

/* CLAUDE: Zahl in der Card */
.pvm-trust-card__number {
    display: block;                                        /* CLAUDE: Block für Zeilenumbruch */
    font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);        /* CLAUDE: Fluid große Zahl */
    font-weight: 800;                                      /* CLAUDE: Extra fett */
    color: var(--pvm-primary, #8C0AB7);                   /* CLAUDE: Lila Brand-Farbe */
    line-height: 1.1;                                      /* CLAUDE: Kompakte Zeilenhöhe */
    margin-bottom: var(--pvm-space-xs);                   /* CLAUDE: 8px Abstand zum Label */
}

/* CLAUDE: Label unter der Zahl */
.pvm-trust-card__label {
    display: block;                                        /* CLAUDE: Block für Zeilenumbruch */
    font-size: 0.9375rem;                                  /* CLAUDE: 15px */
    font-weight: 500;                                      /* CLAUDE: Medium */
    color: var(--pvm-text-muted, #666666);                /* CLAUDE: Grauer Text */
    line-height: 1.3;                                      /* CLAUDE: Kompakt */
}

/* ==========================================================================
   CLAUDE: Trust-Cards Responsive
   ========================================================================== */

/* CLAUDE: Tablet - 2x2 Grid */
@media (max-width: 992px) {
    .pvm-trust-bar.pvm-trust-bar--cards {
        padding: var(--pvm-space-lg) 0;                    /* CLAUDE: Weniger Padding */
    }

    .pvm-trust-cards {
        grid-template-columns: repeat(2, 1fr);             /* CLAUDE: 2 Spalten */
        gap: var(--pvm-space-md);                          /* CLAUDE: 24px Abstand */
        max-width: 600px;                                  /* CLAUDE: Schmalere Max-Breite */
    }

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

/* CLAUDE: Mobile - 2x2 kompakt */
@media (max-width: 576px) {
    .pvm-trust-bar.pvm-trust-bar--cards {
        padding: var(--pvm-space-md) 0;                    /* CLAUDE: Noch weniger Padding */
    }

    .pvm-trust-cards {
        grid-template-columns: repeat(2, 1fr);             /* CLAUDE: 2 Spalten bleiben */
        gap: var(--pvm-space-sm);                          /* CLAUDE: 16px Abstand */
        max-width: 100%;                                   /* CLAUDE: Volle Breite */
        padding: 0 var(--pvm-space-sm);                   /* CLAUDE: Seitliches Padding */
    }

    .pvm-trust-card {
        padding: var(--pvm-space-md) var(--pvm-space-sm); /* CLAUDE: Kompakter */
        border-radius: var(--pvm-radius-md, 8px);         /* CLAUDE: Kleinerer Radius */
    }

    .pvm-trust-card__number {
        font-size: 1.75rem;                                /* CLAUDE: Etwas kleiner */
    }

    .pvm-trust-card__label {
        font-size: 0.8125rem;                              /* CLAUDE: 13px */
    }

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

/* ==========================================================================
   CLAUDE: Trust-Cards Accessibility
   ========================================================================== */

/* CLAUDE: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .pvm-trust-card {
        transition: none;
    }

    .pvm-trust-card:hover {
        transform: none;
    }
}

/* CLAUDE: High Contrast Mode */
@media (prefers-contrast: high) {
    .pvm-trust-card {
        border: 2px solid var(--pvm-text, #333333);
        box-shadow: none;
    }

    .pvm-trust-card__number {
        color: var(--pvm-text, #333333);
    }
}