/* CLAUDE: Page Styles - Styles für Seitentypen und Sections */
/* CLAUDE: Wird nach navigation.css geladen */
/* CLAUDE: Anpassen: Seiten-spezifische Anpassungen hier */

/* ==========================================================================
   CLAUDE: CSS-Variablen für Service Card Hover-Effekte
   CLAUDE: 2025-01-08 - Theming-System für konsistente Farben
   CLAUDE: Überschreiben in Seiten-CSS mit Section-Scope möglich
   ========================================================================== */

:root {
    /* CLAUDE: Standard-Gradient (Lila) für Startseite und KI-Lösungen */
    --pvm-hover-gradient-start: #8C0AB7;
    --pvm-hover-gradient-end: #4C41E0;

    /* CLAUDE: Blaues Schema für Marketing-Seiten (überschreibbar) */
    --pvm-hover-gradient-blue-start: #1565c0;
    --pvm-hover-gradient-blue-end: #0277bd;
}

/* ==========================================================================
   CLAUDE: Main Content Area
   ========================================================================== */

.pvm-main {
    min-height: calc(100vh - var(--pvm-header-height)); /* CLAUDE: Mindesthöhe */
}

/* ==========================================================================
   CLAUDE: Hero Section
   ========================================================================== */

.hero,
.pvm-hero {
    padding: var(--pvm-spacing-xxl) 0;         /* CLAUDE: Oben/Unten Abstand */
    background: var(--pvm-color-light);        /* CLAUDE: Heller Hintergrund */
}

.hero__content,
.pvm-hero__content {
    max-width: 800px;                          /* CLAUDE: Maximale Textbreite */
}

.hero__title,
.pvm-hero__title {
    font-size: 3rem;                           /* CLAUDE: Große Überschrift */
    margin-bottom: var(--pvm-spacing-md);
}

.hero__subtitle,
.pvm-hero__subtitle {
    font-size: 1.25rem;                        /* CLAUDE: Größerer Text */
    color: var(--pvm-color-secondary);         /* CLAUDE: Grau */
    margin-bottom: var(--pvm-spacing-lg);
}

/* ==========================================================================
   CLAUDE: Section Styles
   ========================================================================== */

.pvm-section {
    padding: var(--pvm-spacing-xxl) 0;
}

.pvm-section--light {
    background: var(--pvm-color-light);
}

.pvm-section__title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: var(--pvm-spacing-xl);
}

/* ==========================================================================
   CLAUDE: Cards
   ========================================================================== */

.pvm-card {
    background: var(--pvm-color-white);
    border-radius: var(--pvm-radius-lg);
    box-shadow: var(--pvm-shadow-sm);
    padding: var(--pvm-spacing-lg);
    transition: box-shadow var(--pvm-transition-base), transform var(--pvm-transition-base);
}

.pvm-card:hover {
    box-shadow: var(--pvm-shadow-md);
    transform: translateY(-2px);
}

.pvm-card__title {
    font-size: 1.25rem;
    margin-bottom: var(--pvm-spacing-sm);
}

.pvm-card__text {
    color: var(--pvm-color-secondary);
    margin-bottom: var(--pvm-spacing-md);
}

.pvm-card__link {
    color: var(--pvm-color-primary);
    font-weight: 500;
}

/* ==========================================================================
   CLAUDE: Grid Layouts
   ========================================================================== */

.pvm-grid {
    display: grid;
    gap: var(--pvm-spacing-lg);
}

.pvm-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.pvm-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.pvm-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

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

@media (max-width: 768px) {
    .pvm-grid--2,
    .pvm-grid--3,
    .pvm-grid--4 {
        grid-template-columns: 1fr;
    }
}

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

.pvm-cta-section {
    padding: var(--pvm-spacing-xxl) 0;
    background: var(--pvm-color-primary);
    color: var(--pvm-color-white);
    text-align: center;
}

.pvm-cta-section__title {
    font-size: 2rem;
    margin-bottom: var(--pvm-spacing-sm);
}

.pvm-cta-section__text {
    font-size: 1.125rem;
    opacity: 0.9;
    margin-bottom: var(--pvm-spacing-lg);
}

.pvm-cta-section .pvm-btn {
    background: var(--pvm-color-white);
    color: var(--pvm-color-primary);
}

.pvm-cta-section .pvm-btn:hover {
    background: rgba(255,255,255,0.9);
}

/* ==========================================================================
   CLAUDE: Breadcrumb
   ========================================================================== */

.pvm-breadcrumb {
    padding: var(--pvm-spacing-sm) 0;
    font-size: 0.875rem;
    color: var(--pvm-color-secondary);
}

.pvm-breadcrumb a {
    color: var(--pvm-color-secondary);
}

.pvm-breadcrumb a:hover {
    color: var(--pvm-color-primary);
}

/* ==========================================================================
   CLAUDE: Statistics Bar
   ========================================================================== */

.pvm-stats {
    display: flex;
    justify-content: center;
    gap: var(--pvm-spacing-xl);
    padding: var(--pvm-spacing-lg) 0;
    background: var(--pvm-color-dark);
    color: var(--pvm-color-white);
}

.pvm-stat {
    text-align: center;
}

.pvm-stat__number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--pvm-spacing-xs);
}

.pvm-stat__label {
    font-size: 0.875rem;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .pvm-stats {
        flex-direction: column;
        gap: var(--pvm-spacing-lg);
    }
}

/* ==========================================================================
   CLAUDE: FAQ Accordion
   ========================================================================== */

.pvm-faq-item {
    border-bottom: 1px solid var(--pvm-color-border);
}

.pvm-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--pvm-spacing-md) 0;
    background: none;
    border: none;
    font-size: 1.125rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.pvm-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--pvm-transition-base);
}

.pvm-faq-item.is-open .pvm-faq-answer {
    max-height: 500px;
}

.pvm-faq-answer__content {
    padding-bottom: var(--pvm-spacing-md);
    color: var(--pvm-color-secondary);
}

/* ==========================================================================
   CLAUDE: Service-Säulen Sektion (NEU - Startseite)
   CLAUDE: 3 Karten für KI/Marketing/Consulting
   CLAUDE: Optimiert am 2025-12-16 - Icon-Zentrierung, Hover-Effekte, Wow-Faktor
   ========================================================================== */

.pvm-services {
    padding: 4rem 0; /* CLAUDE: Vertikaler Abstand */
    background: #f8f9fa; /* CLAUDE: Leichter Grau-Hintergrund */
}

.pvm-services h2 {
    text-align: center; /* CLAUDE: Zentrierte Überschrift */
    margin-bottom: 0.5rem;
    color: var(--pvm-color-dark, #1a1a1a);
}

.pvm-services > .content > p {
    text-align: center; /* CLAUDE: Zentrierter Beschreibungstext */
    color: #666;
    margin-bottom: 2rem;
}

.pvm-services__grid {
    display: grid; /* CLAUDE: CSS Grid für Karten */
    grid-template-columns: repeat(3, 1fr); /* CLAUDE: 3 gleiche Spalten */
    gap: 2rem; /* CLAUDE: Abstand zwischen Karten */
    list-style: none;
    padding: 0;
    margin: 2rem 0 0 0;
}

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

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

/* CLAUDE: Fade-In Animation für Service-Cards */
@keyframes pvm-serviceCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* CLAUDE: Service-Card mit verbessertem Hover-Effekt */
/* CLAUDE: 2025-01-07 - Elevation & Shadow Hover (kein Gradient-Background) */
.pvm-service-card {
    position: relative; /* CLAUDE: Für Pseudo-Element (Border-Glow) */
    display: flex; /* CLAUDE: Flexbox für gleiche Button-Höhe */
    flex-direction: column; /* CLAUDE: Vertikale Anordnung */
    background: #fff; /* CLAUDE: Weiße Karte - bleibt bei Hover! */
    border-radius: 16px; /* CLAUDE: Stärker abgerundete Ecken */
    padding: 2.5rem 2rem; /* CLAUDE: Mehr Padding */
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* CLAUDE: Subtiler Schatten */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), /* CLAUDE: Bouncy Easing */
                box-shadow 0.4s ease; /* CLAUDE: Nur transform + shadow */
    will-change: transform; /* CLAUDE: GPU-Beschleunigung (nur transform) */
    animation: pvm-serviceCardFadeIn 0.6s ease forwards; /* CLAUDE: Fade-In */
    opacity: 0; /* CLAUDE: Start unsichtbar für Animation */
}

/* CLAUDE: Staggered Animation Delays */
.pvm-service-card:nth-child(1) { animation-delay: 0.1s; }
.pvm-service-card:nth-child(2) { animation-delay: 0.2s; }
.pvm-service-card:nth-child(3) { animation-delay: 0.3s; }

/* CLAUDE: Gradient-Glow Pseudo-Element */
.pvm-service-card::before {
    content: '';
    position: absolute;
    inset: -2px; /* CLAUDE: 2px außerhalb der Card */
    border-radius: 18px; /* CLAUDE: Etwas größer als Card */
    background: linear-gradient(135deg, #8C0AB7 0%, #4C41E0 100%); /* CLAUDE: Lila-Blau Gradient */
    opacity: 0; /* CLAUDE: Unsichtbar bis Hover */
    z-index: -1; /* CLAUDE: Hinter der Card */
    transition: opacity 0.4s ease;
}

/* CLAUDE: Hover - Card hebt sich + Shadow (KEIN Gradient-Background) */
/* CLAUDE: 2025-01-07 - Option A: Elevation & Shadow Only */
.pvm-service-card:hover {
    transform: translateY(-6px); /* CLAUDE: Dezentes Anheben */
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.12), /* CLAUDE: Neutraler Hauptschatten */
        0 4px 12px rgba(0, 0, 0, 0.08); /* CLAUDE: Subtiler Nebenschatten */
    /* CLAUDE: KEIN background-Wechsel - Card bleibt weiß! */
}

.pvm-service-card:hover::before {
    opacity: 0.4; /* CLAUDE: Subtiler Border-Glow (war 1) */
}

/* CLAUDE: Icon-Container - Zentriert mit Hintergrund */
.pvm-service-card__icon {
    width: 80px; /* CLAUDE: Größer (vorher 64px) */
    height: 80px;
    margin: 0 auto 1.5rem; /* CLAUDE: Zentriert mit mehr Abstand */
    display: flex; /* CLAUDE: Flexbox für perfekte Zentrierung */
    align-items: center;
    justify-content: center;
    background: rgba(140, 10, 183, 0.08); /* CLAUDE: Leichter lila Hintergrund */
    border-radius: 50%; /* CLAUDE: Runder Container */
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* CLAUDE: Bouncy Animation */
}

/* CLAUDE: Icon SVG Größe */
.pvm-service-card__icon svg {
    width: 48px; /* CLAUDE: Feste Größe für Konsistenz */
    height: 48px;
}

/* CLAUDE: SVG Elemente Transition */
.pvm-service-card__icon svg circle,
.pvm-service-card__icon svg path,
.pvm-service-card__icon svg rect,
.pvm-service-card__icon svg text {
    transition: all 0.4s ease;
}

/* CLAUDE: Icon Hover - Skalierung + Farbwechsel (ohne Rotation für bessere Lesbarkeit) */
/* CLAUDE: 2025-01-08 - Nutzt CSS-Variablen für Theming */
.pvm-service-card:hover .pvm-service-card__icon {
    transform: scale(1.1); /* CLAUDE: Leichte Vergrößerung */
    background: linear-gradient(
        135deg,
        var(--pvm-hover-gradient-start, #8C0AB7) 0%,
        var(--pvm-hover-gradient-end, #4C41E0) 100%
    ); /* CLAUDE: Gradient aus CSS-Variablen */
}

/* CLAUDE: SVG-Farben invertieren auf Hover - alle Elemente weiß */
.pvm-service-card:hover .pvm-service-card__icon svg circle {
    stroke: #fff; /* CLAUDE: Weißer Kreis-Rand */
    fill: rgba(255, 255, 255, 0.2); /* CLAUDE: Leicht weißer Fill */
}

.pvm-service-card:hover .pvm-service-card__icon svg path {
    fill: #fff; /* CLAUDE: Weiße Pfade */
    stroke: #fff; /* CLAUDE: Weiße Linien */
}

.pvm-service-card:hover .pvm-service-card__icon svg rect {
    fill: rgba(255, 255, 255, 0.3); /* CLAUDE: Leicht weißer Fill */
    stroke: #fff; /* CLAUDE: Weißer Rand */
}

.pvm-service-card:hover .pvm-service-card__icon svg text {
    fill: #fff; /* CLAUDE: Weißer Text */
}

/* CLAUDE: Service-Card Titel */
.pvm-service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--pvm-color-primary, #8C0AB7); /* CLAUDE: Primärfarbe */
}

/* CLAUDE: Service-Card Beschreibung */
/* CLAUDE: 2025-01-07 - flex-grow für gleiche Button-Höhe */
.pvm-service-card p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 1rem; /* CLAUDE: Reduziert für Tags */
    line-height: 1.6;
    flex-grow: 1; /* CLAUDE: Nimmt verfügbaren Platz → Buttons auf gleicher Höhe */
}

/* CLAUDE: Tag-Links unter der Beschreibung */
.pvm-service-card__links {
    display: flex; /* CLAUDE: Flexbox für Tags */
    flex-wrap: wrap;
    justify-content: center; /* CLAUDE: Zentriert */
    gap: 8px;
    margin: 0 0 1.5rem 0;
    list-style: none;
    padding: 0;
}

/* CLAUDE: Einzelner Tag-Link */
.pvm-service-card__links li {
    list-style: none;
}

.pvm-service-card__links a {
    font-size: 0.85rem;
    color: #666;
    text-decoration: none;
    padding: 6px 14px;
    background: #f5f5f5;
    border-radius: 20px; /* CLAUDE: Pill-Shape */
    border: 1px solid transparent;
    transition: all 0.3s ease;
    display: inline-block;
}

/* CLAUDE: Tag-Link Hover */
.pvm-service-card__links a:hover {
    background: rgba(140, 10, 183, 0.1); /* CLAUDE: Leichter lila Hintergrund */
    color: #8C0AB7;
    border-color: rgba(140, 10, 183, 0.3);
}

/* CLAUDE: Button in Service-Card - immer unten */
/* CLAUDE: 2025-01-07 - margin-top: auto für Ausrichtung */
.pvm-service-card .pvm-btn {
    margin-top: auto; /* CLAUDE: Drückt Button nach unten */
    align-self: center; /* CLAUDE: Zentriert im Flex-Container */
}

/* CLAUDE: Button dezent hervorheben bei Card-Hover */
/* CLAUDE: 2025-01-07 - Subtiler Akzent statt Gradient-Fill */
.pvm-service-card:hover .pvm-btn.pvm-btn--outline {
    border-color: #8C0AB7; /* CLAUDE: Primärfarbe Border */
    color: #8C0AB7; /* CLAUDE: Primärfarbe Text */
    background: rgba(140, 10, 183, 0.06); /* CLAUDE: Sehr dezenter Hintergrund */
    transform: translateY(-2px); /* CLAUDE: Leichtes Anheben */
    box-shadow: 0 4px 15px rgba(140, 10, 183, 0.15); /* CLAUDE: Subtiler Schatten */
}

/* ==========================================================================
   CLAUDE: Text-Farben bleiben bei Hover unverändert
   CLAUDE: 2025-01-07 - Entfernt: Weiße Text-Farben (war für Gradient-BG)
   CLAUDE: Card bleibt jetzt weiß, daher bleiben Texte in Originalfarben
   ========================================================================== */

/* CLAUDE: ENTFERNT - h3 bleibt var(--pvm-color-primary) */
/* CLAUDE: ENTFERNT - p bleibt #666 */
/* CLAUDE: ENTFERNT - Tags bleiben in Originalfarben */

/* CLAUDE: Transition für alle Text-Elemente */
.pvm-service-card h3,
.pvm-service-card p,
.pvm-service-card__links a {
    transition: color 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}

/* CLAUDE: A11y - Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    .pvm-service-card {
        animation: none;
        opacity: 1;
        transition: box-shadow 0.2s ease;
    }

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

    .pvm-service-card__icon {
        transition: background 0.2s ease;
    }

    .pvm-service-card:hover .pvm-service-card__icon {
        transform: none;
    }

    .pvm-service-card::before {
        display: none;
    }
}

/* ==========================================================================
   CLAUDE: Partner-Teaser Sektion - Card Design
   CLAUDE: Grid-Layout mit Hover-Reveal für Firmennamen
   CLAUDE: Anpassen: Farben via CSS Variables, Grid-Spalten via grid-template-columns
   ========================================================================== */

/* CLAUDE: Sektion Container */
.pvm-partner-teaser {
    padding: 4rem 0;                           /* CLAUDE: Vertikaler Abstand */
    background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%); /* CLAUDE: Subtiler Gradient */
    text-align: center;                        /* CLAUDE: Zentrierter Content */
}

/* CLAUDE: Headline */
.pvm-partner-teaser h2 {
    margin-bottom: 0.5rem;                     /* CLAUDE: Abstand zur Subtitle */
    color: var(--pvm-secondary, #2d1b69);      /* CLAUDE: Sekundärfarbe */
}

/* CLAUDE: Subtitle mit Trust-Aussage */
.pvm-partner-subtitle {
    color: #666;                               /* CLAUDE: Gedämpfte Farbe */
    font-size: 1.125rem;                       /* CLAUDE: 18px */
    margin-bottom: 2.5rem;                     /* CLAUDE: Abstand zum Grid */
    max-width: 500px;                          /* CLAUDE: Lesbare Breite */
    margin-left: auto;                         /* CLAUDE: Zentrieren */
    margin-right: auto;                        /* CLAUDE: Zentrieren */
}

/* ==========================================================================
   CLAUDE: Partner-Grid Layout
   ========================================================================== */

.pvm-partner-grid {
    display: grid;                             /* CLAUDE: CSS Grid */
    grid-template-columns: repeat(6, 1fr);     /* CLAUDE: 6 Spalten Desktop */
    gap: 1.25rem;                              /* CLAUDE: 20px Abstand */
    max-width: 900px;                          /* CLAUDE: Maximale Breite */
    margin: 0 auto 2.5rem;                     /* CLAUDE: Zentriert + Abstand unten */
    padding: 0;                                /* CLAUDE: Kein Padding */
    list-style: none;                          /* CLAUDE: Keine Bullets */
}

/* ==========================================================================
   CLAUDE: Partner-Card Komponente
   ========================================================================== */

.pvm-partner-card {
    position: relative;                        /* CLAUDE: Für absolute Elemente */
    display: flex;                             /* CLAUDE: Flexbox */
    flex-direction: column;                    /* CLAUDE: Vertikal stapeln */
    align-items: center;                       /* CLAUDE: Horizontal zentriert */
    justify-content: center;                   /* CLAUDE: Vertikal zentriert */
    padding: 1.25rem 0.75rem;                  /* CLAUDE: Innenabstand */
    background: #ffffff;                       /* CLAUDE: Weißer Hintergrund */
    border-radius: 12px;                       /* CLAUDE: Abgerundete Ecken */
    border: 1px solid transparent;             /* CLAUDE: Transparenter Border */
    cursor: default;                           /* CLAUDE: Standard-Cursor */
    transition: transform 0.3s ease,           /* CLAUDE: Transform Animation */
                box-shadow 0.3s ease,          /* CLAUDE: Shadow Animation */
                border-color 0.3s ease;        /* CLAUDE: Border Animation */
}

/* CLAUDE: Card Hover State */
.pvm-partner-card:hover {
    transform: translateY(-4px);               /* CLAUDE: Leichtes Anheben */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* CLAUDE: Weicher Schatten */
    border-color: rgba(140, 10, 183, 0.15);    /* CLAUDE: Primary Border dezent */
}

/* ==========================================================================
   CLAUDE: Logo Container
   ========================================================================== */

.pvm-partner-card__logo {
    display: flex;                             /* CLAUDE: Flexbox für Zentrierung */
    align-items: center;                       /* CLAUDE: Vertikal zentriert */
    justify-content: center;                   /* CLAUDE: Horizontal zentriert */
    height: 48px;                              /* CLAUDE: Fixe Höhe für Ausrichtung */
    margin-bottom: 0.75rem;                    /* CLAUDE: Abstand zum Namen */
}

/* CLAUDE: Logo Bild */
.pvm-partner-card__logo img {
    max-height: 44px;                          /* CLAUDE: Maximale Höhe */
    max-width: 100%;                           /* CLAUDE: Responsive */
    width: auto;                               /* CLAUDE: Auto-Breite */
    height: auto;                              /* CLAUDE: Auto-Höhe */
    object-fit: contain;                       /* CLAUDE: Proportionen erhalten */
    filter: grayscale(100%);                   /* CLAUDE: Graustufen */
    opacity: 0.6;                              /* CLAUDE: Gedämpft */
    transition: filter 0.3s ease,              /* CLAUDE: Filter Animation */
                opacity 0.3s ease;             /* CLAUDE: Opacity Animation */
}

/* CLAUDE: Logo Hover - Farbe erscheint */
.pvm-partner-card:hover .pvm-partner-card__logo img {
    filter: grayscale(0%);                     /* CLAUDE: Volle Farbe */
    opacity: 1;                                /* CLAUDE: Volle Sichtbarkeit */
}

/* ==========================================================================
   CLAUDE: Firmenname (Hover Reveal)
   ========================================================================== */

.pvm-partner-card__name {
    font-size: 0.6875rem;                      /* CLAUDE: 11px - klein und dezent */
    font-weight: 500;                          /* CLAUDE: Medium Weight */
    color: var(--pvm-primary, #8C0AB7);        /* CLAUDE: Primary Farbe */
    letter-spacing: 0.02em;                    /* CLAUDE: Leichtes Spacing */
    text-transform: uppercase;                 /* CLAUDE: Großbuchstaben */
    opacity: 0;                                /* CLAUDE: Initial versteckt */
    transform: translateY(-8px);               /* CLAUDE: Leicht nach oben */
    transition: opacity 0.3s ease,             /* CLAUDE: Opacity Animation */
                transform 0.3s ease;           /* CLAUDE: Transform Animation */
}

/* CLAUDE: Name erscheint bei Hover */
.pvm-partner-card:hover .pvm-partner-card__name {
    opacity: 1;                                /* CLAUDE: Sichtbar */
    transform: translateY(0);                  /* CLAUDE: Normale Position */
}

/* ==========================================================================
   CLAUDE: Partner-Cards Responsive Breakpoints
   ========================================================================== */

/* CLAUDE: Tablet (768px - 1024px) - 3 Spalten */
@media (max-width: 1024px) {
    .pvm-partner-grid {
        grid-template-columns: repeat(3, 1fr); /* CLAUDE: 3 Spalten */
        gap: 1rem;                             /* CLAUDE: Reduzierter Abstand */
        max-width: 600px;                      /* CLAUDE: Schmalere Max-Breite */
    }

    .pvm-partner-card {
        padding: 1rem 0.5rem;                  /* CLAUDE: Weniger Padding */
    }
}

/* CLAUDE: Mobile (unter 768px) - 3 Spalten, Name immer sichtbar */
@media (max-width: 767px) {
    .pvm-partner-teaser {
        padding: 3rem 0;                       /* CLAUDE: Weniger vertikaler Abstand */
    }

    .pvm-partner-subtitle {
        font-size: 1rem;                       /* CLAUDE: Kleinere Schrift */
        margin-bottom: 2rem;                   /* CLAUDE: Weniger Abstand */
    }

    .pvm-partner-grid {
        grid-template-columns: repeat(3, 1fr); /* CLAUDE: 3 Spalten bleiben */
        gap: 0.75rem;                          /* CLAUDE: Noch weniger Abstand */
        max-width: 100%;                       /* CLAUDE: Volle Breite */
        padding: 0 0.5rem;                     /* CLAUDE: Seitliches Padding */
    }

    .pvm-partner-card {
        padding: 0.875rem 0.5rem;              /* CLAUDE: Kompakter */
        border-radius: 8px;                    /* CLAUDE: Kleinerer Radius */
    }

    .pvm-partner-card__logo {
        height: 36px;                          /* CLAUDE: Kleinere Logo-Höhe */
        margin-bottom: 0.5rem;                 /* CLAUDE: Weniger Abstand */
    }

    .pvm-partner-card__logo img {
        max-height: 32px;                      /* CLAUDE: Kleinere Logos */
        filter: grayscale(0%);                 /* CLAUDE: Farbe auf Mobile */
        opacity: 0.85;                         /* CLAUDE: Leicht gedämpft */
    }

    /* CLAUDE: Name auf Mobile immer sichtbar */
    .pvm-partner-card__name {
        opacity: 1;                            /* CLAUDE: Immer sichtbar */
        transform: translateY(0);              /* CLAUDE: Normale Position */
        font-size: 0.625rem;                   /* CLAUDE: 10px */
    }

    /* CLAUDE: Kein Hover-Effekt auf Touch-Geräten */
    .pvm-partner-card:hover {
        transform: none;                       /* CLAUDE: Kein Anheben */
        box-shadow: none;                      /* CLAUDE: Kein Schatten */
    }
}

/* CLAUDE: Sehr kleine Screens (unter 400px) - 2 Spalten */
@media (max-width: 399px) {
    .pvm-partner-grid {
        grid-template-columns: repeat(2, 1fr); /* CLAUDE: 2 Spalten */
    }
}

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

/* CLAUDE: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .pvm-partner-card,
    .pvm-partner-card__logo img,
    .pvm-partner-card__name {
        transition: none;                      /* CLAUDE: Keine Animationen */
    }

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

/* CLAUDE: Focus States für Keyboard Navigation */
.pvm-partner-card:focus-within {
    outline: 2px solid var(--pvm-primary, #8C0AB7); /* CLAUDE: Focus Ring */
    outline-offset: 2px;                       /* CLAUDE: Abstand */
}

.pvm-partner-card:focus-within .pvm-partner-card__logo img {
    filter: grayscale(0%);                     /* CLAUDE: Farbe bei Focus */
    opacity: 1;                                /* CLAUDE: Volle Sichtbarkeit */
}

.pvm-partner-card:focus-within .pvm-partner-card__name {
    opacity: 1;                                /* CLAUDE: Name bei Focus */
    transform: translateY(0);                  /* CLAUDE: Normale Position */
}

/* ==========================================================================
   CLAUDE: Teaser-Sektionen (NEU - Werbeformen, Portfolio, Benefits)
   CLAUDE: Kompakte Sektionen mit Link zur vollständigen Seite
   ========================================================================== */

.pvm-teaser-section {
    padding: 3rem 0;
    text-align: center;
}

.pvm-teaser-section h2 {
    margin-bottom: 0.5rem;
}

.pvm-teaser-section > .content > p {
    color: #666;
    margin-bottom: 1.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* CLAUDE: Werbeformen-Teaser */
.pvm-teaser-section--werbeformen {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* CLAUDE: Subtiler Gradient */
}

/* CLAUDE: Portfolio-Teaser */
.pvm-teaser-section--portfolio {
    background: #fff;
}

.pvm-portfolio-teaser__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.pvm-portfolio-teaser__list li {
    background: #f0f0f0;
    padding: 0.5rem 1rem;
    border-radius: 20px; /* CLAUDE: Pill-Shape */
    font-size: 0.9rem;
    color: #555;
}

/* CLAUDE: Benefits-Teaser */
.pvm-teaser-section--benefits {
    background: var(--pvm-color-primary, #8C0AB7);
    color: #fff;
}

.pvm-teaser-section--benefits h2 {
    color: #fff;
}

.pvm-teaser-section--benefits > .content > p {
    color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   CLAUDE: Button Styles (Neue Varianten)
   ========================================================================== */

.pvm-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pvm-btn--primary {
    background: var(--pvm-color-primary, #8C0AB7);
    color: #fff;
}

.pvm-btn--primary:hover {
    background: #7a099f; /* CLAUDE: Dunklere Variante */
    color: #fff;
}

.pvm-btn--secondary {
    background: #fff;
    color: var(--pvm-color-primary, #8C0AB7);
    border: 2px solid var(--pvm-color-primary, #8C0AB7);
}

.pvm-btn--secondary:hover {
    background: var(--pvm-color-primary, #8C0AB7);
    color: #fff;
}

.pvm-btn--outline {
    background: transparent;
    color: var(--pvm-color-primary, #8C0AB7);
    border: 2px solid var(--pvm-color-primary, #8C0AB7);
}

.pvm-btn--outline:hover {
    background: var(--pvm-color-primary, #8C0AB7);
    color: #fff;
}

/* ==========================================================================
   CLAUDE: Globale 4-Spalten Grid Definition
   CLAUDE: Zentrale Definition für alle Seiten mit .pvm-services-grid--4col
   CLAUDE: 2026-01-08 - Feste Breakpoints statt auto-fit (vermeidet 3+1 Layout)
   ========================================================================== */

.pvm-services-grid--4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* CLAUDE: Desktop: 4 Spalten */
    gap: var(--pvm-space-lg, 2rem);
}

/* CLAUDE: Tablet (≤1024px): 2×2 Grid */
@media (max-width: 1024px) {
    .pvm-services-grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* CLAUDE: Mobile (≤768px): 1 Spalte */
@media (max-width: 768px) {
    .pvm-services-grid--4col {
        grid-template-columns: 1fr;
        gap: var(--pvm-space-md, 1.5rem);
    }
}

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

/* CLAUDE: Manueller Toggle */

/* CLAUDE: Services Section */
html[data-theme="dark"] .pvm-services {
    background: var(--pvm-dark-surface, #1e1e2f);
}

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

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

/* CLAUDE: Service Cards */
html[data-theme="dark"] .pvm-service-card {
    background: var(--pvm-dark-surface, #1e1e2f);
    border: 1px solid var(--pvm-dark-border, #2d2d44);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .pvm-service-card h3 {
    color: var(--pvm-primary-light, #a855f7);
}

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

html[data-theme="dark"] .pvm-service-card__links a {
    color: var(--pvm-dark-text-muted, #a8a5b5);
    background: var(--pvm-dark-bg, #12121e);
}

html[data-theme="dark"] .pvm-service-card__links a:hover {
    background: rgba(140, 10, 183, 0.2);
    color: var(--pvm-primary-light, #a855f7);
}

html[data-theme="dark"] .pvm-service-card__icon {
    background: rgba(140, 10, 183, 0.15);
}

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

html[data-theme="dark"] .pvm-partner-teaser h2 {
    color: var(--pvm-secondary-light, #625af0);
}

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

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

html[data-theme="dark"] .pvm-partner-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: rgba(140, 10, 183, 0.3);
}

html[data-theme="dark"] .pvm-partner-card__logo img {
    filter: grayscale(100%) brightness(1.5);
    opacity: 0.5;
}

html[data-theme="dark"] .pvm-partner-card:hover .pvm-partner-card__logo img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

/* CLAUDE: Teaser Sections */
html[data-theme="dark"] .pvm-teaser-section {
    background: var(--pvm-dark-bg, #12121e);
}

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

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

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

html[data-theme="dark"] .pvm-portfolio-teaser__list li {
    background: var(--pvm-dark-bg, #12121e);
    color: var(--pvm-dark-text-muted, #a8a5b5);
}

/* CLAUDE: Buttons Dark Mode */
html[data-theme="dark"] .pvm-btn--secondary {
    background: var(--pvm-dark-surface, #1e1e2f);
    color: var(--pvm-primary-light, #a855f7);
    border-color: var(--pvm-primary-light, #a855f7);
}

/* CLAUDE: Cards & Sections */
html[data-theme="dark"] .pvm-card {
    background: var(--pvm-dark-surface, #1e1e2f);
    border: 1px solid var(--pvm-dark-border, #2d2d44);
}

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

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

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

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

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

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

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

html[data-theme="dark"] .pvm-breadcrumb a:hover {
    color: var(--pvm-primary-light, #a855f7);
}

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

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

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

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

    html:not([data-theme="light"]) .pvm-service-card h3 {
        color: var(--pvm-primary-light, #a855f7);
    }

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

    html:not([data-theme="light"]) .pvm-service-card__links a {
        color: var(--pvm-dark-text-muted, #a8a5b5);
        background: var(--pvm-dark-bg, #12121e);
    }

    html:not([data-theme="light"]) .pvm-service-card__links a:hover {
        background: rgba(140, 10, 183, 0.2);
        color: var(--pvm-primary-light, #a855f7);
    }

    html:not([data-theme="light"]) .pvm-service-card__icon {
        background: rgba(140, 10, 183, 0.15);
    }

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

    html:not([data-theme="light"]) .pvm-partner-teaser h2 {
        color: var(--pvm-secondary-light, #625af0);
    }

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

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

    html:not([data-theme="light"]) .pvm-partner-card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        border-color: rgba(140, 10, 183, 0.3);
    }

    html:not([data-theme="light"]) .pvm-partner-card__logo img {
        filter: grayscale(100%) brightness(1.5);
        opacity: 0.5;
    }

    html:not([data-theme="light"]) .pvm-partner-card:hover .pvm-partner-card__logo img {
        filter: grayscale(0%) brightness(1);
        opacity: 1;
    }

    html:not([data-theme="light"]) .pvm-teaser-section {
        background: var(--pvm-dark-bg, #12121e);
    }

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

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

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

    html:not([data-theme="light"]) .pvm-portfolio-teaser__list li {
        background: var(--pvm-dark-bg, #12121e);
        color: var(--pvm-dark-text-muted, #a8a5b5);
    }

    html:not([data-theme="light"]) .pvm-btn--secondary {
        background: var(--pvm-dark-surface, #1e1e2f);
        color: var(--pvm-primary-light, #a855f7);
        border-color: var(--pvm-primary-light, #a855f7);
    }

    html:not([data-theme="light"]) .pvm-card {
        background: var(--pvm-dark-surface, #1e1e2f);
        border: 1px solid var(--pvm-dark-border, #2d2d44);
    }

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

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

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

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

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

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

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

    html:not([data-theme="light"]) .pvm-breadcrumb a:hover {
        color: var(--pvm-primary-light, #a855f7);
    }
}