/* ==========================================================================
   CLAUDE: Portfolio Teaser - Zentrale Styles
   CLAUDE: Einheitliches Design für Medienportfolio-Teaser auf allen Seiten
   CLAUDE: Ersetzt duplizierte Styles aus page-advertorials.css, page-vorteile.css etc.
   CLAUDE: Anpassen: Variablen in base.css ändern
   ========================================================================== */

/* ==========================================================================
   CLAUDE: Section Container
   ========================================================================== */

.pvm-portfolio-teaser {
    padding: var(--pvm-space-2xl) 0;                    /* CLAUDE: Großer vertikaler Abstand */
    background: var(--pvm-bg-white);                   /* CLAUDE: Weißer Hintergrund */
    text-align: center;                                /* CLAUDE: Zentrierter Content */
}

/* CLAUDE: Cross-Selling Variante - leicht abgesetzter Hintergrund */
.pvm-portfolio-teaser--cross-selling {
    background: var(--pvm-bg-light);                   /* CLAUDE: Leicht grauer Hintergrund */
}

.pvm-portfolio-teaser h2 {
    margin-bottom: var(--pvm-space-xs);                /* CLAUDE: 8px zum Subtitle */
    color: var(--pvm-text);                            /* CLAUDE: Dunkle Textfarbe */
}

.pvm-portfolio-teaser .pvm-section-subtitle {
    max-width: 600px;                                  /* CLAUDE: Begrenzte Breite für Lesbarkeit */
    margin: 0 auto var(--pvm-space-xl);                /* CLAUDE: Zentriert + Abstand zum Grid */
    color: var(--pvm-text-muted);                      /* CLAUDE: Gedämpfter Text */
    font-size: var(--pvm-font-size-base);             /* CLAUDE: Standard-Schriftgröße */
    line-height: 1.6;                                  /* CLAUDE: Gute Lesbarkeit */
}

/* ==========================================================================
   CLAUDE: Kategorien-Grid - CSS Grid mit festen Spalten
   CLAUDE: Verhindert ungleichmäßige Layouts
   ========================================================================== */

.pvm-portfolio-categories {
    display: grid;                                     /* CLAUDE: CSS Grid */
    grid-template-columns: repeat(5, 1fr);             /* CLAUDE: 5 gleiche Spalten Desktop */
    gap: var(--pvm-space-md);                          /* CLAUDE: 24px Abstand */
    margin-bottom: var(--pvm-space-xl);                /* CLAUDE: 48px zum CTA Button */
}

/* ==========================================================================
   CLAUDE: Einzelne Kategorie-Card
   ========================================================================== */

.pvm-portfolio-category {
    display: flex;                                     /* CLAUDE: Flexbox Layout */
    flex-direction: column;                            /* CLAUDE: Vertikal stacken */
    align-items: center;                               /* CLAUDE: Horizontal zentriert */
    justify-content: center;                           /* CLAUDE: Vertikal zentriert */
    min-height: 160px;                                 /* CLAUDE: Mindesthöhe für Konsistenz */
    padding: var(--pvm-space-lg);                      /* CLAUDE: 32px Innenabstand */
    background: var(--pvm-bg-light);                   /* CLAUDE: Leicht grauer Hintergrund */
    border: 1px solid var(--pvm-border);               /* CLAUDE: Dezenter Border */
    border-radius: var(--pvm-radius-lg);               /* CLAUDE: 12px Ecken */
    text-decoration: none;                             /* CLAUDE: Kein Underline */
    color: inherit;                                    /* CLAUDE: Farbe erben */
    position: relative;                                /* CLAUDE: Für Pseudo-Elemente */
    overflow: hidden;                                  /* CLAUDE: Gradient-Border beschneiden */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* CLAUDE: Smooth Easing */
}

/* CLAUDE: Cross-Selling Variante - weißer Hintergrund */
.pvm-portfolio-teaser--cross-selling .pvm-portfolio-category {
    background: var(--pvm-bg-white);
}

/* ==========================================================================
   CLAUDE: Gradient Top-Border (Pseudo-Element)
   ========================================================================== */

.pvm-portfolio-category::before {
    content: '';                                       /* CLAUDE: Pseudo-Element */
    position: absolute;                                /* CLAUDE: Absolut positioniert */
    top: 0;
    left: 0;
    right: 0;
    height: 3px;                                       /* CLAUDE: Dünne Gradient-Linie */
    background: var(--pvm-gradient);                   /* CLAUDE: Lila-Blau Gradient */
    transform: scaleX(0);                              /* CLAUDE: Initial unsichtbar */
    transform-origin: left;                            /* CLAUDE: Von links einblenden */
    transition: transform 0.3s ease;                   /* CLAUDE: Smooth Animation */
}

/* ==========================================================================
   CLAUDE: Icon Container
   ========================================================================== */

.pvm-portfolio-category__icon {
    width: 52px;                                       /* CLAUDE: Icon-Container Breite */
    height: 52px;                                      /* CLAUDE: Icon-Container Höhe */
    background: linear-gradient(
        135deg,
        rgba(140, 10, 183, 0.1) 0%,
        rgba(76, 65, 224, 0.1) 100%
    );                                                 /* CLAUDE: Leichter Gradient-Hintergrund */
    border-radius: 12px;                               /* CLAUDE: Abgerundete Ecken */
    display: flex;                                     /* CLAUDE: Flexbox */
    align-items: center;                               /* CLAUDE: Vertikal zentriert */
    justify-content: center;                           /* CLAUDE: Horizontal zentriert */
    margin-bottom: var(--pvm-space-sm);                /* CLAUDE: 16px Abstand zum Name */
    transition: all 0.3s ease;                         /* CLAUDE: Smooth Transitions */
    color: var(--pvm-primary);                         /* CLAUDE: Lila für SVG stroke */
}

/* CLAUDE: SVG Icon Styling */
.pvm-portfolio-category__icon svg {
    width: 24px;                                       /* CLAUDE: Icon-Größe */
    height: 24px;
    stroke: currentColor;                              /* CLAUDE: Erbt Farbe vom Parent */
    stroke-width: 2;                                   /* CLAUDE: Linienstärke */
    fill: none;                                        /* CLAUDE: Outline-Style */
    transition: stroke 0.3s ease;                      /* CLAUDE: Farbwechsel animieren */
}

/* ==========================================================================
   CLAUDE: Text-Elemente
   ========================================================================== */

.pvm-portfolio-category__name {
    font-size: var(--pvm-font-size-sm);               /* CLAUDE: 14px */
    font-weight: 600;                                  /* CLAUDE: Halbfett */
    color: var(--pvm-text);                            /* CLAUDE: Dunkle Textfarbe */
    margin-bottom: var(--pvm-space-2xs);               /* CLAUDE: 4px Abstand zum Count */
    transition: color 0.2s ease;                       /* CLAUDE: Farbwechsel animieren */
    line-height: 1.3;                                  /* CLAUDE: Kompakte Zeilenhöhe */
}

.pvm-portfolio-category__count {
    font-size: var(--pvm-font-size-xs);               /* CLAUDE: 12px */
    color: var(--pvm-primary);                         /* CLAUDE: Lila Farbe */
    font-weight: 500;                                  /* CLAUDE: Medium */
    transition: color 0.2s ease;                       /* CLAUDE: Farbwechsel animieren */
}

/* ==========================================================================
   CLAUDE: Arrow-Indikator (bei Hover sichtbar)
   ========================================================================== */

.pvm-portfolio-category__arrow {
    position: absolute;                                /* CLAUDE: Absolut positioniert */
    bottom: var(--pvm-space-sm);                       /* CLAUDE: 16px vom unteren Rand */
    right: var(--pvm-space-sm);                        /* CLAUDE: 16px vom rechten Rand */
    opacity: 0;                                        /* CLAUDE: Initial unsichtbar */
    transform: translateX(-8px);                       /* CLAUDE: Leicht nach links versetzt */
    transition: all 0.3s ease;                         /* CLAUDE: Smooth Animation */
    color: var(--pvm-primary);                         /* CLAUDE: Lila Farbe */
}

.pvm-portfolio-category__arrow svg {
    width: 16px;                                       /* CLAUDE: Kleine Icon-Größe */
    height: 16px;
    stroke: currentColor;                              /* CLAUDE: Erbt Farbe */
    stroke-width: 2;
    fill: none;
}

/* ==========================================================================
   CLAUDE: Hover-Effekte (Premium)
   ========================================================================== */

.pvm-portfolio-category:hover {
    border-color: var(--pvm-primary);                  /* CLAUDE: Lila Border */
    background: var(--pvm-bg-white);                   /* CLAUDE: Weißer Hintergrund */
    transform: translateY(-8px);                       /* CLAUDE: Card schwebt hoch */
    box-shadow: 0 16px 48px rgba(140, 10, 183, 0.18);  /* CLAUDE: Lila Shadow */
}

/* CLAUDE: Gradient-Border einblenden */
.pvm-portfolio-category:hover::before {
    transform: scaleX(1);                              /* CLAUDE: Von links nach rechts */
}

/* CLAUDE: Icon-Animation bei Hover */
.pvm-portfolio-category:hover .pvm-portfolio-category__icon {
    background: var(--pvm-gradient);                   /* CLAUDE: Voller Gradient */
    color: #ffffff;                                    /* CLAUDE: Weiße Icons */
    transform: scale(1.1) rotate(3deg);                /* CLAUDE: Vergrößern + leicht rotieren */
}

/* CLAUDE: Text-Farbwechsel bei Hover */
.pvm-portfolio-category:hover .pvm-portfolio-category__name {
    color: var(--pvm-primary);                         /* CLAUDE: Lila Textfarbe */
}

.pvm-portfolio-category:hover .pvm-portfolio-category__count {
    color: var(--pvm-text);                            /* CLAUDE: Dunklere Farbe */
    font-weight: 600;                                  /* CLAUDE: Fetter */
}

/* CLAUDE: Arrow einblenden bei Hover */
.pvm-portfolio-category:hover .pvm-portfolio-category__arrow {
    opacity: 1;                                        /* CLAUDE: Sichtbar */
    transform: translateX(0);                          /* CLAUDE: In Position */
}

/* ==========================================================================
   CLAUDE: CTA Button Override (optional)
   ========================================================================== */

.pvm-portfolio-teaser .pvm-btn--outline {
    border-width: 2px;                                 /* CLAUDE: Etwas dicker für Sichtbarkeit */
}

.pvm-portfolio-teaser .pvm-btn--outline:hover {
    transform: translateY(-2px);                       /* CLAUDE: Leichter Lift */
    box-shadow: 0 4px 12px rgba(140, 10, 183, 0.2);   /* CLAUDE: Subtiler Shadow */
}

/* ==========================================================================
   CLAUDE: GSAP Animation Initial States
   CLAUDE: Werden von pvm-section-animations.js verwendet
   ========================================================================== */

.pvm-portfolio-category[data-gsap-animated="false"] {
    opacity: 0;                                        /* CLAUDE: Initial unsichtbar */
    transform: translateY(30px) scale(0.95);           /* CLAUDE: Initial Position */
}

/* ==========================================================================
   CLAUDE: Responsive - Tablet (769px - 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
    .pvm-portfolio-categories {
        grid-template-columns: repeat(3, 1fr);         /* CLAUDE: 3 Spalten auf Tablet */
        gap: var(--pvm-space-sm);                      /* CLAUDE: 16px Abstand */
    }

    .pvm-portfolio-category {
        min-height: 140px;                             /* CLAUDE: Etwas kleiner */
        padding: var(--pvm-space-md);                  /* CLAUDE: 24px Padding */
    }

    .pvm-portfolio-category__icon {
        width: 44px;                                   /* CLAUDE: Kleinere Icons */
        height: 44px;
    }

    .pvm-portfolio-category__icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================================================
   CLAUDE: Responsive - Small Tablet / Large Mobile (640px - 768px)
   ========================================================================== */

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

    .pvm-portfolio-categories {
        grid-template-columns: repeat(2, 1fr);         /* CLAUDE: 2 Spalten */
        gap: var(--pvm-space-sm);                      /* CLAUDE: 16px Abstand */
    }

    .pvm-portfolio-category {
        min-height: 130px;                             /* CLAUDE: Kompakter */
    }

    /* CLAUDE: Kein Hover-Transform auf Touch-Geräten */
    .pvm-portfolio-category:hover {
        transform: translateY(-4px);                   /* CLAUDE: Reduzierter Lift */
    }

    /* CLAUDE: Icon kleiner rotieren auf Touch */
    .pvm-portfolio-category:hover .pvm-portfolio-category__icon {
        transform: scale(1.05);                        /* CLAUDE: Weniger Scale, keine Rotation */
    }
}

/* ==========================================================================
   CLAUDE: Responsive - Mobile (<480px)
   ========================================================================== */

@media (max-width: 480px) {
    .pvm-portfolio-categories {
        grid-template-columns: 1fr;                    /* CLAUDE: 1 Spalte */
        gap: var(--pvm-space-xs);                      /* CLAUDE: 8px Abstand */
    }

    .pvm-portfolio-category {
        min-height: auto;                              /* CLAUDE: Auto-Höhe */
        padding: var(--pvm-space-md);                  /* CLAUDE: 24px Padding */
        flex-direction: row;                           /* CLAUDE: Horizontal Layout */
        justify-content: flex-start;                   /* CLAUDE: Links ausgerichtet */
        gap: var(--pvm-space-sm);                      /* CLAUDE: 16px Gap */
        text-align: left;                              /* CLAUDE: Text links */
    }

    .pvm-portfolio-category__icon {
        margin-bottom: 0;                              /* CLAUDE: Kein unterer Margin */
        flex-shrink: 0;                                /* CLAUDE: Nicht schrumpfen */
    }

    /* CLAUDE: Text-Container für Mobile-Layout */
    .pvm-portfolio-category__name,
    .pvm-portfolio-category__count {
        display: block;                                /* CLAUDE: Block für vertikales Stacking */
    }

    /* CLAUDE: Arrow repositionieren für Mobile */
    .pvm-portfolio-category__arrow {
        position: static;                              /* CLAUDE: Im Flow */
        margin-left: auto;                             /* CLAUDE: Nach rechts pushen */
        opacity: 1;                                    /* CLAUDE: Immer sichtbar auf Mobile */
        transform: none;                               /* CLAUDE: Keine Transform */
    }

    /* CLAUDE: Kein Hover-Transform auf Touch-Geräten */
    .pvm-portfolio-category:hover {
        transform: none;                               /* CLAUDE: Kein Lift */
    }

    /* CLAUDE: Touch-Target Mindestgröße (44x44px) */
    .pvm-portfolio-category {
        min-height: 64px;                              /* CLAUDE: Mindesthöhe für Touch */
    }
}

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

.pvm-portfolio-category:focus-visible {
    outline: 3px solid var(--pvm-primary);             /* CLAUDE: Lila Focus-Ring */
    outline-offset: 3px;                               /* CLAUDE: Abstand */
    border-color: var(--pvm-primary);                  /* CLAUDE: Border auch lila */
}

/* CLAUDE: Focus innerhalb der Card (für Screenreader) */
.pvm-portfolio-category:focus-within {
    border-color: var(--pvm-primary);
}

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

@media (prefers-reduced-motion: reduce) {
    .pvm-portfolio-category,
    .pvm-portfolio-category::before,
    .pvm-portfolio-category__icon,
    .pvm-portfolio-category__arrow,
    .pvm-portfolio-category__name,
    .pvm-portfolio-category__count {
        transition: none;                              /* CLAUDE: Keine Animationen */
    }

    .pvm-portfolio-category:hover {
        transform: none;                               /* CLAUDE: Kein Lift */
    }

    .pvm-portfolio-category:hover .pvm-portfolio-category__icon {
        transform: none;                               /* CLAUDE: Kein Scale/Rotate */
    }
}

/* ==========================================================================
   CLAUDE: High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
    .pvm-portfolio-category {
        border: 2px solid var(--pvm-text);             /* CLAUDE: Stärkerer Border */
        box-shadow: none;                              /* CLAUDE: Kein Shadow */
    }

    .pvm-portfolio-category:hover {
        border-color: var(--pvm-primary);
        box-shadow: none;
    }

    .pvm-portfolio-category__icon {
        border: 2px solid currentColor;                /* CLAUDE: Sichtbarer Border */
    }
}

/* ==========================================================================
   CLAUDE: Dark Mode Support
   CLAUDE: Dual-Selector Pattern - Manueller Toggle + System-Präferenz
   ========================================================================== */

/* CLAUDE: Manueller Toggle */
html[data-theme="dark"] .pvm-portfolio-teaser {
    background: var(--pvm-dark-bg);
}

html[data-theme="dark"] .pvm-portfolio-teaser--cross-selling {
    background: var(--pvm-dark-surface);
}

html[data-theme="dark"] .pvm-portfolio-teaser h2 {
    color: var(--pvm-dark-text);
}

html[data-theme="dark"] .pvm-portfolio-teaser .pvm-section-subtitle {
    color: var(--pvm-dark-text-muted);
}

html[data-theme="dark"] .pvm-portfolio-category {
    background: var(--pvm-dark-surface);
    border-color: var(--pvm-dark-border);
}

html[data-theme="dark"] .pvm-portfolio-category:hover {
    background: var(--pvm-dark-bg);
}

html[data-theme="dark"] .pvm-portfolio-category__name {
    color: var(--pvm-dark-text);
}

/* CLAUDE: System-Präferenz - Fallback */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pvm-portfolio-teaser {
        background: var(--pvm-dark-bg);
    }

    html:not([data-theme="light"]) .pvm-portfolio-teaser--cross-selling {
        background: var(--pvm-dark-surface);
    }

    html:not([data-theme="light"]) .pvm-portfolio-teaser h2 {
        color: var(--pvm-dark-text);
    }

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

    html:not([data-theme="light"]) .pvm-portfolio-category {
        background: var(--pvm-dark-surface);
        border-color: var(--pvm-dark-border);
    }

    html:not([data-theme="light"]) .pvm-portfolio-category:hover {
        background: var(--pvm-dark-bg);
    }

    html:not([data-theme="light"]) .pvm-portfolio-category__name {
        color: var(--pvm-dark-text);
    }
}

/* ==========================================================================
   CLAUDE: Print Styles
   ========================================================================== */

@media print {
    .pvm-portfolio-teaser {
        background: none;
        padding: 1rem 0;
    }

    .pvm-portfolio-categories {
        grid-template-columns: repeat(3, 1fr);         /* CLAUDE: 3 Spalten für Print */
    }

    .pvm-portfolio-category {
        border: 1px solid #333;
        box-shadow: none;
        break-inside: avoid;                           /* CLAUDE: Nicht umbrechen */
    }

    .pvm-portfolio-category__arrow {
        display: none;                                 /* CLAUDE: Keine Pfeile im Druck */
    }

    .pvm-portfolio-teaser .pvm-btn {
        display: none;                                 /* CLAUDE: Kein Button im Druck */
    }
}