/* CLAUDE: Consulting Implementierung Seite Styles */
/* CLAUDE: Datei: assets/css/page-consulting-implementierung.css */
/* CLAUDE: Nutzt page-chatbots.css als Basis, definiert nur Overrides */
/* CLAUDE: Anpassen: Farben über CSS-Variablen in base.css */

/* ==========================================================================
   CLAUDE: 1. Hero Section - Consulting Implementierung spezifisch
   CLAUDE: Dunkelblau/Violett Gradient für Business/Enterprise Look
   ========================================================================== */

.pvm-hero--consulting-impl {
    background: linear-gradient(135deg, #1a1a4e 0%, #2d2d7a 50%, #3a2db0 100%); /* CLAUDE: Business-Blau Gradient */
    color: var(--pvm-bg-white);
    padding: var(--pvm-space-3xl) 0 var(--pvm-space-2xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.pvm-hero--consulting-impl::before { /* CLAUDE: Dunkles Overlay */
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

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

/* CLAUDE: Kicker/Trust-Badge */
.pvm-hero--consulting-impl .pvm-hero-kicker {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: var(--pvm-font-size-sm);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: var(--pvm-space-md);
    border: 1px solid rgba(255, 255, 255, 0.25);
    letter-spacing: 0.02em;
}

/* CLAUDE: H1 mit Text-Shadow */
.pvm-hero--consulting-impl 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--consulting-impl .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--consulting-impl .pvm-hero-ctas {
    display: flex;
    gap: var(--pvm-space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

/* CLAUDE: Primary Button */
.pvm-hero--consulting-impl .pvm-btn--primary {
    background: #ffffff;
    color: #1a1a4e;
    border: 2px solid #ffffff;
    padding: 0.875rem 2rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.pvm-hero--consulting-impl .pvm-btn--primary:hover {
    background: transparent;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* CLAUDE: Secondary/Outline Button */
.pvm-hero--consulting-impl .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--consulting-impl .pvm-btn--outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* ==========================================================================
   CLAUDE: Problem Cards Icon Styling - Inline SVGs (Standard gemäß CLAUDE.md)
   ========================================================================== */

.pvm-problem-card__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--pvm-space-md);
    background: linear-gradient(135deg, #1a1a4e 0%, #3a2db0 100%); /* CLAUDE: Business-Blau/Violett */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff; /* CLAUDE: Für SVG stroke="currentColor" */
}

.pvm-problem-card__icon svg {
    width: 28px;
    height: 28px;
    stroke: currentColor; /* CLAUDE: Erbt weiß vom Parent */
    stroke-width: 2;
    fill: none;
}

/* ==========================================================================
   CLAUDE: 2. Service Cards mit Phasen-Nummern
   ========================================================================== */

.pvm-impl-services .pvm-service-card--impl {
    position: relative;
    padding-top: var(--pvm-space-xl);
}

/* CLAUDE: Phase-Nummer Badge */
.pvm-service-card__phase {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #1a1a4e 0%, #3a2db0 100%);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--pvm-font-size-lg);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(26, 26, 78, 0.3);
}

.pvm-service-card--impl h3 {
    color: #1a1a4e;
}

/* ==========================================================================
   CLAUDE: 3. Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .pvm-hero--consulting-impl { padding: var(--pvm-space-xl) 0 var(--pvm-space-lg); }
    .pvm-hero--consulting-impl h1 { font-size: var(--pvm-font-size-2xl); }
    .pvm-hero--consulting-impl .pvm-hero-text { font-size: var(--pvm-font-size-base); }
    .pvm-hero--consulting-impl .pvm-hero-kicker { font-size: var(--pvm-font-size-xs); padding: 0.4rem 1rem; }
    .pvm-hero--consulting-impl .pvm-btn--primary,
    .pvm-hero--consulting-impl .pvm-btn--outline { padding: 0.75rem 1.5rem; font-size: var(--pvm-font-size-sm); width: 100%; text-align: center; }
    .pvm-hero--consulting-impl .pvm-hero-ctas { flex-direction: column; gap: var(--pvm-space-xs); }
}

/* ==========================================================================
   CLAUDE: Split-Layout Override für Consulting
   CLAUDE: Option E: Multi-Layer Ambient Glow - harmoniert mit Kompass-Bild
   CLAUDE: Gold-Glow oben-rechts (Kompass-Licht), Cyan-Glow unten-links (Partikelwellen)
   ========================================================================== */

.pvm-hero--consulting.pvm-hero--split {
    /* CLAUDE: Option E - Multi-Layer Ambient Glow Background */
    /* CLAUDE: Layer 1: Goldener Glow oben-rechts (simuliert Kompass-Lichtstrahl) */
    /* CLAUDE: Layer 2: Cyan-Glow unten-links (greift Partikelwellen-Farben auf) */
    /* CLAUDE: Layer 3: Basis-Gradient Tiefblau zu Indigo (Ozean-Tiefe) */
    background:
        radial-gradient(ellipse at 85% 20%, rgba(251, 191, 36, 0.12) 0%, rgba(251, 191, 36, 0.04) 25%, transparent 50%),
        radial-gradient(ellipse at 15% 80%, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.05) 30%, transparent 55%),
        radial-gradient(ellipse at 50% 120%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, #0a1628 0%, #0d2847 35%, #1a1a4e 70%, #1e1b4b 100%);
    text-align: left; /* CLAUDE: Text linksbündig statt zentriert */
    padding: var(--pvm-space-2xl) 0 var(--pvm-space-xl);
    position: relative;
    overflow: hidden;
}

/* CLAUDE: Grid-Layout für Text links, Bild rechts */
.pvm-hero--consulting .pvm-hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* CLAUDE: Mehr Platz für Text (55/45) */
    gap: var(--pvm-space-xl);
    align-items: center;
}

/* CLAUDE: Content-Spalte mit Breitenbegrenzung */
.pvm-hero--consulting .pvm-hero__content {
    max-width: 620px; /* CLAUDE: Begrenzte Breite für Lesbarkeit */
    padding-right: var(--pvm-space-md); /* CLAUDE: Mehr Abstand zum Bild */
    position: relative;
    z-index: 2; /* CLAUDE: Über Background-Effekten */
}

/* ==========================================================================
   CLAUDE: Text-Styles für Split-Hero - Optimiert für dunklen Ambient-Glow BG
   CLAUDE: Starker Kontrast durch Text-Shadow und Glow-Effekte
   ========================================================================== */

/* CLAUDE: Kicker Badge - Glasmorphism mit hellem Text */
.pvm-hero--consulting .pvm-hero-kicker {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: var(--pvm-font-size-sm);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: var(--pvm-space-md);
    border: 1px solid rgba(255, 255, 255, 0.2);
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* CLAUDE: H1 - Weiß mit starkem Multi-Layer Shadow für maximale Lesbarkeit */
.pvm-hero--consulting h1 {
    font-size: clamp(2rem, 5vw, var(--pvm-font-size-3xl));
    margin-bottom: var(--pvm-space-sm);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    /* CLAUDE: Multi-Layer Text-Shadow für Tiefe und Lesbarkeit */
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),      /* CLAUDE: Scharfer Nahschatten */
        0 4px 8px rgba(0, 0, 0, 0.3),      /* CLAUDE: Mittlerer Schatten */
        0 8px 16px rgba(0, 0, 0, 0.2);     /* CLAUDE: Weicher Tiefenschatten */
}

/* CLAUDE: Subline/Hero-Text - Leicht gedämpftes Weiß mit Shadow */
.pvm-hero--consulting .pvm-hero-text {
    font-size: var(--pvm-font-size-lg);
    max-width: 580px;
    margin: 0 0 var(--pvm-space-lg);
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.7;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.2);
}

/* CLAUDE: Primary CTA Button - Weiß auf dunklem BG */
.pvm-hero--consulting .pvm-btn--primary {
    background: #ffffff;
    color: #0a1628;
    border: 2px solid #ffffff;
    padding: 0.875rem 2rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 255, 255, 0.1);
}

.pvm-hero--consulting .pvm-btn--primary:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #0a1628;
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(255, 255, 255, 0.15);
}

/* CLAUDE: Secondary/Outline Button - Transparent mit weißem Rand */
.pvm-hero--consulting .pvm-btn--outline {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 0.875rem 2rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.pvm-hero--consulting .pvm-btn--outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
}

/* CLAUDE: CTA Container mit Flex-Gap */
.pvm-hero--consulting .pvm-hero-ctas {
    display: flex;
    gap: var(--pvm-space-sm);
    flex-wrap: wrap;
}

/* CLAUDE: Bild-Spalte mit Schatten und Rounded Corners */
.pvm-hero--consulting .pvm-hero__image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* CLAUDE: Tieferer Schatten */
}

/* CLAUDE: Overlay über Bild - subtil um Gold-Töne des Kompasses durchscheinen zu lassen */
/* CLAUDE: Reduzierte Opacity (0.15 statt 0.3), wärmerer Blauton für Harmonie mit Gold */
.pvm-hero--consulting .pvm-hero__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 22, 40, 0.15) 0%,        /* CLAUDE: Sehr subtiles Tiefblau oben-links */
        rgba(30, 58, 95, 0.1) 50%,         /* CLAUDE: Mittleres Blau in der Mitte */
        rgba(251, 191, 36, 0.05) 100%      /* CLAUDE: Hauch von Gold unten-rechts (Kompass-Harmonie) */
    );
    border-radius: 16px;
    pointer-events: none;
}

/* CLAUDE: Bild selbst mit Transition */
/* CLAUDE: Filter optimiert: Helligkeit erhöht für leuchtenden Kompass */
.pvm-hero--consulting .pvm-hero__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    transition: transform 0.5s ease, filter 0.5s ease;
    filter: brightness(1.02) contrast(1.08) saturate(1.1); /* CLAUDE: Leicht heller, mehr Kontrast, sattere Farben */
}

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

/* CLAUDE: Glasmorphism-Rahmen um das Bild mit Gold-Akzent */
/* CLAUDE: Gradient von Weiß zu Gold für Harmonie mit Kompass-Lichtstrahl */
.pvm-hero--consulting .pvm-hero__image::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.2) 0%,           /* CLAUDE: Weiß oben-links */
        rgba(251, 191, 36, 0.15) 50%,          /* CLAUDE: Dezentes Gold in der Mitte */
        rgba(6, 182, 212, 0.1) 100%            /* CLAUDE: Cyan unten-rechts (Partikelwellen) */
    );
    z-index: -1;
}

/* CLAUDE: CTAs links ausrichten */
.pvm-hero--consulting.pvm-hero--split .pvm-hero-ctas {
    justify-content: flex-start; /* CLAUDE: CTAs links ausrichten */
}

/* CLAUDE: Responsive - Stack auf Mobile */
@media (max-width: 768px) {
    .pvm-hero--consulting.pvm-hero--split {
        text-align: center; /* CLAUDE: Mobile wieder zentriert */
        padding: var(--pvm-space-xl) 0 var(--pvm-space-lg);
    }

    .pvm-hero--consulting .pvm-hero__grid {
        grid-template-columns: 1fr; /* CLAUDE: Single-Column auf Mobile */
        gap: var(--pvm-space-md);
    }

    .pvm-hero--consulting .pvm-hero__content {
        max-width: 100%; /* CLAUDE: Volle Breite auf Mobile */
        padding-right: 0;
    }

    /* CLAUDE: Mobile Text-Anpassungen */
    .pvm-hero--consulting h1 {
        font-size: var(--pvm-font-size-2xl);
    }

    .pvm-hero--consulting .pvm-hero-text {
        font-size: var(--pvm-font-size-base);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .pvm-hero--consulting .pvm-hero-kicker {
        font-size: var(--pvm-font-size-xs);
        padding: 0.4rem 1rem;
    }

    .pvm-hero--consulting .pvm-hero__image {
        order: -1; /* CLAUDE: Bild über Text auf Mobile */
        margin-bottom: var(--pvm-space-md);
    }

    .pvm-hero--consulting.pvm-hero--split .pvm-hero-ctas {
        justify-content: center; /* CLAUDE: Mobile CTAs zentriert */
        flex-direction: column;
        gap: var(--pvm-space-xs);
    }

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