/* ==========================================================================
   CLAUDE: Partner-Seite Styles
   CLAUDE: Ergänzt die Basis-Komponenten aus page-chatbots.css
   CLAUDE: Anpassen: Farben via CSS Variables, Grid-Spalten anpassen
   ========================================================================== */

/* ==========================================================================
   CLAUDE: Breadcrumbs
   ========================================================================== */

.pvm-breadcrumbs {
    padding: 1rem 0;                               /* CLAUDE: Vertikaler Abstand */
    background: #f8f9fa;                           /* CLAUDE: Leichter Hintergrund */
    border-bottom: 1px solid #e9ecef;              /* CLAUDE: Untere Linie */
}

.pvm-breadcrumbs__list {
    display: flex;                                 /* CLAUDE: Horizontal */
    flex-wrap: wrap;                               /* CLAUDE: Umbruch auf Mobile */
    gap: 0.5rem;                                   /* CLAUDE: Abstand zwischen Items */
    list-style: none;                              /* CLAUDE: Keine Bullets */
    margin: 0;
    padding: 0;
    font-size: 0.875rem;                           /* CLAUDE: 14px */
}

.pvm-breadcrumbs__item {
    display: flex;
    align-items: center;
    color: #666;
}

.pvm-breadcrumbs__item::after {
    content: '›';                                  /* CLAUDE: Trennzeichen */
    margin-left: 0.5rem;
    color: #999;
}

.pvm-breadcrumbs__item:last-child::after {
    content: '';                                   /* CLAUDE: Kein Trennzeichen am Ende */
}

.pvm-breadcrumbs__item a {
    color: var(--pvm-primary, #8C0AB7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pvm-breadcrumbs__item a:hover {
    color: var(--pvm-secondary, #2d1b69);
    text-decoration: underline;
}

.pvm-breadcrumbs__item--current {
    color: #333;
    font-weight: 500;
}

/* ==========================================================================
   CLAUDE: Hero Section Override für Partner
   ========================================================================== */

.pvm-hero--partner {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* CLAUDE: Subtiler Gradient */
    padding: 4rem 0 3rem;                          /* CLAUDE: Weniger Padding oben wegen Breadcrumbs */
}

.pvm-hero--partner .pvm-hero-kicker {
    color: var(--pvm-primary, #8C0AB7);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.pvm-hero--partner h1 {
    font-size: clamp(2rem, 5vw, 3rem);             /* CLAUDE: Responsive Schriftgröße */
    color: var(--pvm-secondary, #2d1b69);
    margin-bottom: 1rem;
}

.pvm-hero--partner .pvm-hero-text {
    font-size: 1.125rem;                           /* CLAUDE: 18px */
    color: #555;
    max-width: 700px;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.pvm-hero--partner .pvm-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ==========================================================================
   CLAUDE: Split-Hero Layout für Partner-Seite
   CLAUDE: Grid mit Text links, Bild rechts
   ========================================================================== */

.pvm-hero--partner.pvm-hero--split .pvm-hero__grid {
    display: grid;                                     /* CLAUDE: CSS Grid */
    grid-template-columns: 1fr 1fr;                    /* CLAUDE: 50/50 Split */
    gap: 3rem;                                         /* CLAUDE: 48px Abstand */
    align-items: center;                               /* CLAUDE: Vertikal zentriert */
}

.pvm-hero--partner.pvm-hero--split .pvm-hero__content {
    max-width: none;                                   /* CLAUDE: Überschreibt vorherige Beschränkung */
}

.pvm-hero--partner.pvm-hero--split .pvm-hero__image {
    display: flex;                                     /* CLAUDE: Flexbox für Zentrierung */
    justify-content: center;                           /* CLAUDE: Horizontal zentriert */
    align-items: center;                               /* CLAUDE: Vertikal zentriert */
}

.pvm-hero--partner.pvm-hero--split .pvm-hero__img {
    width: 100%;                                       /* CLAUDE: Volle Breite */
    max-width: 600px;                                  /* CLAUDE: Größer für Foto-Hero */
    height: auto;                                      /* CLAUDE: Proportional skalieren */
    border-radius: 16px;                               /* CLAUDE: Größere Abrundung */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);       /* CLAUDE: Eleganter Schatten */
    object-fit: cover;                                 /* CLAUDE: Bild füllt Container */
}

/* CLAUDE: Responsive Split-Hero - Tablet */
@media (max-width: 992px) {
    .pvm-hero--partner.pvm-hero--split .pvm-hero__grid {
        grid-template-columns: 1.2fr 0.8fr;            /* CLAUDE: Text nimmt mehr Platz */
        gap: 2rem;                                     /* CLAUDE: Kleinerer Abstand */
    }

    .pvm-hero--partner.pvm-hero--split .pvm-hero__img {
        max-width: 450px;                              /* CLAUDE: Angepasst für Tablet */
    }
}

/* CLAUDE: Responsive Split-Hero - Mobile */
@media (max-width: 768px) {
    .pvm-hero--partner.pvm-hero--split .pvm-hero__grid {
        grid-template-columns: 1fr;                    /* CLAUDE: Einzelne Spalte */
        gap: 2rem;
        text-align: center;                            /* CLAUDE: Text zentrieren */
    }

    .pvm-hero--partner.pvm-hero--split .pvm-hero__image {
        order: -1;                                     /* CLAUDE: Bild über Text */
    }

    .pvm-hero--partner.pvm-hero--split .pvm-hero__img {
        max-width: 320px;                              /* CLAUDE: Kompakteres Bild auf Mobile */
    }

    .pvm-hero--partner.pvm-hero--split .pvm-hero-ctas {
        justify-content: center;                       /* CLAUDE: Buttons zentrieren */
    }
}

/* ==========================================================================
   CLAUDE: Partner-Showcase Section
   ========================================================================== */

.pvm-partner-showcase {
    padding: 4rem 0;
    background: #fff;
    text-align: center;
}

.pvm-partner-showcase h2 {
    color: var(--pvm-secondary, #2d1b69);
    margin-bottom: 0.5rem;
}

.pvm-partner-showcase .pvm-section-subtitle {
    color: #666;
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* CLAUDE: Erweitertes Partner-Grid für 12 Logos */
.pvm-partner-grid--12 {
    grid-template-columns: repeat(6, 1fr);         /* CLAUDE: 6 Spalten = 2 Reihen à 6 */
    max-width: 1000px;                             /* CLAUDE: Breiter für mehr Logos */
    margin-bottom: 1.5rem;
}

.pvm-partner-more {
    color: #888;
    font-style: italic;
    font-size: 0.95rem;
    margin-top: 1rem;
}

/* CLAUDE: Responsive für 12er Grid */
@media (max-width: 1024px) {
    .pvm-partner-grid--12 {
        grid-template-columns: repeat(4, 1fr);     /* CLAUDE: 4 Spalten = 3 Reihen */
    }
}

@media (max-width: 768px) {
    .pvm-partner-grid--12 {
        grid-template-columns: repeat(3, 1fr);     /* CLAUDE: 3 Spalten = 4 Reihen */
    }
}

@media (max-width: 480px) {
    .pvm-partner-grid--12 {
        grid-template-columns: repeat(2, 1fr);     /* CLAUDE: 2 Spalten = 6 Reihen */
    }
}

/* ==========================================================================
   CLAUDE: Benefits Section für Partner
   ========================================================================== */

.pvm-benefits--partner {
    padding: 4rem 0;
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
}

.pvm-benefits--partner h2 {
    text-align: center;
    color: var(--pvm-secondary, #2d1b69);
    margin-bottom: 2.5rem;
}

.pvm-benefits--partner .pvm-benefits__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

/* CLAUDE: Benefit Card */
.pvm-benefit-card {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pvm-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(140, 10, 183, 0.12);
}

.pvm-benefit-card__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(140, 10, 183, 0.08);
    border-radius: 50%;
    color: var(--pvm-primary, #8C0AB7);
}

.pvm-benefit-card__icon svg {
    width: 48px;
    height: 48px;
}

.pvm-benefit-card h3 {
    font-size: 1.25rem;
    color: var(--pvm-secondary, #2d1b69);
    margin-bottom: 0.75rem;
}

.pvm-benefit-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.pvm-benefit-card__link {
    color: var(--pvm-primary, #8C0AB7);
    font-weight: 500;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.pvm-benefit-card__link:hover {
    color: var(--pvm-secondary, #2d1b69);
}

/* CLAUDE: Responsive Benefits */
@media (max-width: 992px) {
    .pvm-benefits--partner .pvm-benefits__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .pvm-benefit-card {
        padding: 1.5rem;
    }
}

/* ==========================================================================
   CLAUDE: FAQ Section
   ========================================================================== */

.pvm-faq {
    padding: 4rem 0;
    background: #fff;
}

.pvm-faq h2 {
    text-align: center;
    color: var(--pvm-secondary, #2d1b69);
    margin-bottom: 0.5rem;
}

.pvm-faq .pvm-section-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 2.5rem;
}

.pvm-faq__list {
    max-width: 800px;
    margin: 0 auto;
}

.pvm-faq-item {
    border-bottom: 1px solid #e9ecef;
}

.pvm-faq-item:first-child {
    border-top: 1px solid #e9ecef;
}

.pvm-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.25rem 0;
    background: none;
    border: none;
    font-size: 1.0625rem;                          /* CLAUDE: 17px */
    font-weight: 500;
    text-align: left;
    color: var(--pvm-secondary, #2d1b69);
    cursor: pointer;
    transition: color 0.2s ease;
}

.pvm-faq-question:hover {
    color: var(--pvm-primary, #8C0AB7);
}

.pvm-faq-question:focus {
    outline: 2px solid var(--pvm-primary, #8C0AB7);
    outline-offset: 2px;
}

.pvm-faq-icon {
    flex-shrink: 0;
    margin-left: 1rem;
    color: var(--pvm-primary, #8C0AB7);
    transition: transform 0.3s ease;
}

.pvm-faq-item.is-open .pvm-faq-icon {
    transform: rotate(180deg);
}

.pvm-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.pvm-faq-item.is-open .pvm-faq-answer {
    max-height: 500px;                             /* CLAUDE: Genug Platz für lange Antworten */
}

.pvm-faq-answer__content {
    padding-bottom: 1.25rem;
}

.pvm-faq-answer__content p {
    color: #555;
    line-height: 1.7;
    margin: 0;
}

/* CLAUDE: FAQ CTA */
.pvm-faq__cta {
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}

.pvm-faq__cta p {
    color: #666;
    margin-bottom: 1rem;
}

/* ==========================================================================
   CLAUDE: CTA Section Override
   ========================================================================== */

.pvm-cta-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--pvm-primary, #8C0AB7) 0%, var(--pvm-secondary, #2d1b69) 100%);
    color: #fff;
}

.pvm-cta-section h2 {
    text-align: center;
    color: #fff;
    margin-bottom: 0.5rem;
}

.pvm-cta-section .pvm-section-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
}

.pvm-cta-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
    align-items: start;
}

/* CLAUDE: Kontakt-Card */
.pvm-contact-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}

.pvm-contact-card__avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.pvm-contact-card h3 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.pvm-contact-card__name {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.pvm-contact-card__title {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.pvm-contact-card__email,
.pvm-contact-card__phone {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    transition: opacity 0.2s ease;
}

.pvm-contact-card__email:hover,
.pvm-contact-card__phone:hover {
    opacity: 0.8;
}

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

    .pvm-cta-contact {
        order: -1;                                 /* CLAUDE: Kontakt-Card zuerst auf Mobile */
    }
}

/* ==========================================================================
   CLAUDE: Button Override für Partner-Seite
   ========================================================================== */

.pvm-btn--large {
    padding: 1rem 2rem;
    font-size: 1.0625rem;
}

/* ==========================================================================
   CLAUDE: Hero-Bild Hover-Effekt
   CLAUDE: Sanfter Zoom beim Hover für interaktives Feedback
   ========================================================================== */

.pvm-hero--partner .pvm-hero__img {
    transition: transform 0.4s ease;
}

.pvm-hero--partner .pvm-hero__image:hover .pvm-hero__img {
    transform: scale(1.02);
}

/* ==========================================================================
   CLAUDE: Glasmorphism für Hero-Kicker
   CLAUDE: Moderner Blur-Effekt wie auf anderen Seiten (Chatbots, KI-Strategie)
   ========================================================================== */

.pvm-hero--partner .pvm-hero__kicker {
    background: rgba(140, 10, 183, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(140, 10, 183, 0.2);
    border-radius: 100px;
    padding: 0.5rem 1rem;
}

/* ==========================================================================
   CLAUDE: Partner-Grid Hover-Effekte
   CLAUDE: Lift-Effekt und Border-Glow für Partner-Logos
   ========================================================================== */

.pvm-partner-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pvm-partner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(140, 10, 183, 0.15);
}

/* ==========================================================================
   CLAUDE: Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .pvm-benefit-card,
    .pvm-faq-icon,
    .pvm-faq-answer,
    .pvm-hero--partner .pvm-hero__img,
    .pvm-partner-card {
        transition: none;
    }

    .pvm-benefit-card:hover,
    .pvm-partner-card:hover {
        transform: none;
    }

    .pvm-hero--partner .pvm-hero__image:hover .pvm-hero__img {
        transform: none;
    }
}

/* ==========================================================================
   CLAUDE: Dark Mode Support
   CLAUDE: Dual-Selector Pattern für manuellen Toggle + System-Präferenz
   ========================================================================== */

/* CLAUDE: Manueller Toggle */
html[data-theme="dark"] .pvm-breadcrumbs {
    background: var(--pvm-dark-surface, #1e1e2f);
    border-color: var(--pvm-dark-border, #2d2d44);
}

html[data-theme="dark"] .pvm-breadcrumbs__item {
    color: var(--pvm-dark-text-muted, #a8a5b5);
}

html[data-theme="dark"] .pvm-breadcrumbs__item--current {
    color: var(--pvm-dark-text, #e8e6f0);
}

html[data-theme="dark"] .pvm-hero--partner {
    background: linear-gradient(135deg, var(--pvm-dark-bg, #12121e) 0%, var(--pvm-dark-surface, #1e1e2f) 100%);
}

html[data-theme="dark"] .pvm-hero--partner .pvm-hero-text {
    color: var(--pvm-dark-text-muted, #a8a5b5);
}

html[data-theme="dark"] .pvm-partner-showcase {
    background: var(--pvm-dark-surface, #1e1e2f);
}

html[data-theme="dark"] .pvm-partner-showcase .pvm-section-subtitle {
    color: var(--pvm-dark-text-muted, #a8a5b5);
}

html[data-theme="dark"] .pvm-partner-more {
    color: var(--pvm-dark-text-muted, #a8a5b5);
}

html[data-theme="dark"] .pvm-benefits--partner {
    background: linear-gradient(180deg, var(--pvm-dark-bg, #12121e) 0%, var(--pvm-dark-surface, #1e1e2f) 100%);
}

html[data-theme="dark"] .pvm-benefit-card {
    background: var(--pvm-dark-surface, #1e1e2f);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .pvm-benefit-card p {
    color: var(--pvm-dark-text-muted, #a8a5b5);
}

html[data-theme="dark"] .pvm-faq {
    background: var(--pvm-dark-surface, #1e1e2f);
}

html[data-theme="dark"] .pvm-faq .pvm-section-subtitle {
    color: var(--pvm-dark-text-muted, #a8a5b5);
}

html[data-theme="dark"] .pvm-faq-item {
    border-color: var(--pvm-dark-border, #2d2d44);
}

html[data-theme="dark"] .pvm-faq-answer__content p {
    color: var(--pvm-dark-text-muted, #a8a5b5);
}

html[data-theme="dark"] .pvm-faq__cta {
    border-color: var(--pvm-dark-border, #2d2d44);
}

html[data-theme="dark"] .pvm-faq__cta p {
    color: var(--pvm-dark-text-muted, #a8a5b5);
}

/* CLAUDE: System-Präferenz - Fallback */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pvm-breadcrumbs {
        background: var(--pvm-dark-surface, #1e1e2f);
        border-color: var(--pvm-dark-border, #2d2d44);
    }

    html:not([data-theme="light"]) .pvm-breadcrumbs__item {
        color: var(--pvm-dark-text-muted, #a8a5b5);
    }

    html:not([data-theme="light"]) .pvm-breadcrumbs__item--current {
        color: var(--pvm-dark-text, #e8e6f0);
    }

    html:not([data-theme="light"]) .pvm-hero--partner {
        background: linear-gradient(135deg, var(--pvm-dark-bg, #12121e) 0%, var(--pvm-dark-surface, #1e1e2f) 100%);
    }

    html:not([data-theme="light"]) .pvm-hero--partner .pvm-hero-text {
        color: var(--pvm-dark-text-muted, #a8a5b5);
    }

    html:not([data-theme="light"]) .pvm-partner-showcase {
        background: var(--pvm-dark-surface, #1e1e2f);
    }

    html:not([data-theme="light"]) .pvm-partner-showcase .pvm-section-subtitle {
        color: var(--pvm-dark-text-muted, #a8a5b5);
    }

    html:not([data-theme="light"]) .pvm-partner-more {
        color: var(--pvm-dark-text-muted, #a8a5b5);
    }

    html:not([data-theme="light"]) .pvm-benefits--partner {
        background: linear-gradient(180deg, var(--pvm-dark-bg, #12121e) 0%, var(--pvm-dark-surface, #1e1e2f) 100%);
    }

    html:not([data-theme="light"]) .pvm-benefit-card {
        background: var(--pvm-dark-surface, #1e1e2f);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    html:not([data-theme="light"]) .pvm-benefit-card p {
        color: var(--pvm-dark-text-muted, #a8a5b5);
    }

    html:not([data-theme="light"]) .pvm-faq {
        background: var(--pvm-dark-surface, #1e1e2f);
    }

    html:not([data-theme="light"]) .pvm-faq .pvm-section-subtitle {
        color: var(--pvm-dark-text-muted, #a8a5b5);
    }

    html:not([data-theme="light"]) .pvm-faq-item {
        border-color: var(--pvm-dark-border, #2d2d44);
    }

    html:not([data-theme="light"]) .pvm-faq-answer__content p {
        color: var(--pvm-dark-text-muted, #a8a5b5);
    }

    html:not([data-theme="light"]) .pvm-faq__cta {
        border-color: var(--pvm-dark-border, #2d2d44);
    }

    html:not([data-theme="light"]) .pvm-faq__cta p {
        color: var(--pvm-dark-text-muted, #a8a5b5);
    }
}