/**
 * CLAUDE: Portfolio Page Styles
 * CLAUDE: Modernisiertes Design für die Portfolio-Übersichtsseite
 * CLAUDE: Anpassen: Farben aus base.css CSS Variables verwenden
 *
 * @package Provimedia
 * @since 2.0.0
 */

/* ==========================================================================
   CLAUDE: Hero Section - Portfolio-spezifisch
   ========================================================================== */

/* CLAUDE: Portfolio Hero mit optimiertem Farbverlauf */
/* CLAUDE: Subtiler Brand-Gradient fuer konsistentes Design */
.pvm-hero--portfolio {
    background: linear-gradient(
        135deg,
        rgba(140, 10, 183, 0.03) 0%,      /* CLAUDE: Sehr dezentes Lila */
        rgba(76, 65, 224, 0.05) 50%,       /* CLAUDE: Leichtes Blau */
        var(--pvm-bg-light) 100%           /* CLAUDE: Standard-Hintergrund */
    );
    padding: var(--pvm-space-2xl) 0 var(--pvm-space-xl);
    overflow: hidden;
    position: relative;
    text-align: left;
}

/* CLAUDE: Grid Layout fuer Split-Hero - Text links, Bild rechts */
.pvm-hero--portfolio .pvm-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pvm-space-xl);
    align-items: center;
}

/* CLAUDE: Content-Bereich (links) */
.pvm-hero--portfolio .pvm-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--pvm-space-md);
}

/* CLAUDE: Dekorativer Gradient-Overlay fuer Tiefe */
.pvm-hero--portfolio::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(
        ellipse at 80% 30%,
        rgba(140, 10, 183, 0.04) 0%,
        transparent 60%
    );
    pointer-events: none;
}

/* CLAUDE: Hero-Bild Container fuer externes SVG */
.pvm-hero--portfolio .pvm-hero__image {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CLAUDE: Hero-Bild Styling mit abgerundeten Ecken */
.pvm-hero--portfolio .pvm-hero__img {
    width: 100%;
    max-width: 550px;
    height: auto;
    border-radius: var(--pvm-radius-xl, 16px);
    box-shadow: var(--pvm-shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.1));
}

/* ==========================================================================
   CLAUDE: 9-Kategorien Bento Grid für Portfolio Hero
   CLAUDE: Asymmetrisches Layout mit Feature-Karte und allen 9 Kategorien
   CLAUDE: Grid: 4 Spalten × 4 Reihen mit unterschiedlichen Kartengrößen
   ========================================================================== */

/* CLAUDE: Container - 4 Spalten × 4 Reihen Grid */
/* CLAUDE: Höhere Spezifität um flex von .pvm-hero__image zu überschreiben */
.pvm-hero--portfolio .pvm-hero__image.pvm-hero-bento-9,
.pvm-hero-bento-9 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 95px 95px 70px 70px;
    gap: 10px;
    max-width: 580px;
    width: 100%;
    position: relative;
    /* CLAUDE: Flex-Eigenschaften zurücksetzen */
    flex-direction: unset;
    align-items: stretch;
    justify-content: stretch;
}

/* CLAUDE: Basis-Card Styles für alle Bento-Karten */
.pvm-bento-card {
    position: relative;
    border-radius: var(--pvm-radius-lg, 12px);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* CLAUDE: Hover-Effekt - Karte hebt sich und bekommt Brand-Schatten */
.pvm-bento-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 30px rgba(76, 65, 224, 0.25);
    z-index: 10;
}

/* CLAUDE: Bilder füllen die gesamte Karte */
.pvm-bento-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* CLAUDE: Hover - Bild zoomt leicht */
.pvm-bento-card:hover img {
    transform: scale(1.1);
}

/* CLAUDE: Gradient Overlay für Lesbarkeit der Labels */
.pvm-bento-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    transition: background 0.3s ease;
}

/* CLAUDE: Hover - Dunkler Overlay statt Brand-Gradient (Portfolio-spezifisch) */
/* CLAUDE: Alternative zum lila Overlay für bessere UX */
.pvm-bento-card:hover .pvm-bento-card__overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
}

/* CLAUDE: Content Container (Label + Count) */
.pvm-bento-card__content {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* CLAUDE: Kategorie-Name */
.pvm-bento-card__name {
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

/* CLAUDE: Portal-Anzahl */
.pvm-bento-card__count {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.6875rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* CLAUDE: Feature-Card - größere Schrift */
.pvm-bento-card--feature .pvm-bento-card__name {
    font-size: 1rem;
}

.pvm-bento-card--feature .pvm-bento-card__count {
    font-size: 0.8125rem;
}

/* CLAUDE: Hover Pfeil - erscheint zentriert bei Hover */
.pvm-bento-card__arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 1.75rem;
    color: #fff;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 3;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pvm-bento-card:hover .pvm-bento-card__arrow {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* ==========================================================================
   CLAUDE: Grid-Positionen Desktop (4 Spalten × 4 Reihen)
   ========================================================================== */

/* CLAUDE: Karte 1 - Finanzen (Feature) - 2 Spalten × 2 Reihen */
.pvm-bento-card--1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

/* CLAUDE: Karte 2 - Technik - 1 Spalte × 1 Reihe */
.pvm-bento-card--2 {
    grid-column: 3;
    grid-row: 1;
}

/* CLAUDE: Karte 3 - Gesundheit - 1 Spalte × 1 Reihe */
.pvm-bento-card--3 {
    grid-column: 4;
    grid-row: 1;
}

/* CLAUDE: Karte 4 - Lifestyle - 2 Spalten × 1 Reihe */
.pvm-bento-card--4 {
    grid-column: 3 / 5;
    grid-row: 2;
}

/* CLAUDE: Karte 5 - Vergleiche - 1 Spalte × 1 Reihe */
.pvm-bento-card--5 {
    grid-column: 1;
    grid-row: 3;
}

/* CLAUDE: Karte 6 - Haustiere - 2 Spalten × 1 Reihe */
.pvm-bento-card--6 {
    grid-column: 2 / 4;
    grid-row: 3;
}

/* CLAUDE: Karte 7 - Politik - 1 Spalte × 1 Reihe */
.pvm-bento-card--7 {
    grid-column: 4;
    grid-row: 3;
}

/* CLAUDE: Karte 8 - Branchen - 2 Spalten × 1 Reihe */
.pvm-bento-card--8 {
    grid-column: 1 / 3;
    grid-row: 4;
}

/* CLAUDE: Karte 9 - Wissen - 2 Spalten × 1 Reihe */
.pvm-bento-card--9 {
    grid-column: 3 / 5;
    grid-row: 4;
}

/* ==========================================================================
   CLAUDE: Floating Stats Badge
   ========================================================================== */

.pvm-bento-stats {
    position: absolute;
    bottom: -40px;
    right: 0;
    display: flex;
    gap: 10px;
}

.pvm-bento-stats__item {
    background: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8125rem;
    color: var(--pvm-text, #333);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.pvm-bento-stats__item strong {
    font-weight: 700;
}

.pvm-bento-stats__item--primary {
    background: var(--pvm-gradient, linear-gradient(135deg, #8C0AB7, #4C41E0));
    color: #fff;
}

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

.pvm-bento-card:focus {
    outline: 3px solid var(--pvm-primary, #8C0AB7);
    outline-offset: 3px;
}

.pvm-bento-card:focus:not(:focus-visible) {
    outline: none;
}

.pvm-bento-card:focus-visible {
    outline: 3px solid var(--pvm-primary, #8C0AB7);
    outline-offset: 3px;
}

/* CLAUDE: Bei Focus auch Overlay und Pfeil zeigen */
/* CLAUDE: Dunkler Overlay statt Brand-Gradient für Konsistenz mit Hover */
.pvm-bento-card:focus-visible .pvm-bento-card__overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
}

.pvm-bento-card:focus-visible .pvm-bento-card__arrow {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* CLAUDE: Reduzierte Bewegung für Barrierefreiheit */
@media (prefers-reduced-motion: reduce) {
    .pvm-bento-card,
    .pvm-bento-card img,
    .pvm-bento-card__overlay,
    .pvm-bento-card__arrow {
        transition: none;
    }
}

/* ==========================================================================
   CLAUDE: Trust Bar - Portfolio-Variante
   ========================================================================== */

.pvm-trust-bar--portfolio {
    background: var(--pvm-dark-bg);
    padding: var(--pvm-space-lg) 0;
}

.pvm-trust-bar--portfolio .pvm-trust-stat__number {
    color: var(--pvm-bg-white);
    font-size: var(--pvm-font-size-2xl);
    font-weight: 700;
}

.pvm-trust-bar--portfolio .pvm-trust-stat__label {
    color: var(--pvm-dark-text-muted);
    font-size: var(--pvm-font-size-sm);
}

/* ==========================================================================
   CLAUDE: Intro Section
   ========================================================================== */

.pvm-portfolio-intro {
    padding: var(--pvm-space-2xl) 0;
    background: var(--pvm-bg-white);
}

.pvm-portfolio-intro h2 {
    text-align: center;
    margin-bottom: var(--pvm-space-xs);
}

.pvm-portfolio-intro .pvm-section-subtitle {
    text-align: center;
    color: var(--pvm-text-muted);
    margin-bottom: var(--pvm-space-xl);
}

/* CLAUDE: Intro Content Box */
.pvm-intro-content {
    max-width: 800px;
    margin: 0 auto var(--pvm-space-lg);
    text-align: center;
}

.pvm-intro-content p {
    color: var(--pvm-text);
    line-height: var(--pvm-line-height-loose);
    margin-bottom: var(--pvm-space-md);
}

/* CLAUDE: Geo-Signal Hervorhebung */
.pvm-geo-signal {
    background: linear-gradient(135deg, rgba(140, 10, 183, 0.05) 0%, rgba(76, 65, 224, 0.05) 100%);
    border-left: 4px solid var(--pvm-primary);
    padding: var(--pvm-space-md);
    border-radius: 0 var(--pvm-radius-md) var(--pvm-radius-md) 0;
    text-align: left;
    font-style: italic;
}

/* CLAUDE: USP Liste */
.pvm-usp-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pvm-space-md);
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.pvm-usp-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--pvm-space-sm);
    padding: var(--pvm-space-md);
    background: var(--pvm-bg-light);
    border-radius: var(--pvm-radius-lg);
    transition: transform var(--pvm-transition-base), box-shadow var(--pvm-transition-base);
}

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

.pvm-usp-list li svg {
    flex-shrink: 0;
    color: var(--pvm-primary);
    margin-top: 2px;
}

.pvm-usp-list li span {
    color: var(--pvm-text);
    font-weight: 500;
}

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

/* ==========================================================================
   CLAUDE: Portfolio Section
   ========================================================================== */

.pvm-portfolio-section {
    padding: var(--pvm-space-2xl) 0;
    background: var(--pvm-bg-light);
}

.pvm-portfolio-section h2 {
    text-align: center;
    margin-bottom: var(--pvm-space-xs);
}

.pvm-portfolio-section .pvm-section-subtitle {
    text-align: center;
    color: var(--pvm-text-muted);
    margin-bottom: var(--pvm-space-xl);
}

/* ==========================================================================
   CLAUDE: Quick Links Section
   ========================================================================== */

.pvm-quick-links-section {
    padding: var(--pvm-space-lg) 0;
    background: var(--pvm-bg-white);
    border-top: 1px solid var(--pvm-border);
    border-bottom: 1px solid var(--pvm-border);
}

.pvm-quick-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--pvm-space-sm) var(--pvm-space-md);
}

.pvm-quick-links__label {
    color: var(--pvm-text-muted);
    font-weight: 500;
    font-size: var(--pvm-font-size-sm);
}

.pvm-quick-links a {
    display: inline-flex;
    align-items: center;
    padding: var(--pvm-space-xs) var(--pvm-space-md);
    background: var(--pvm-bg-light);
    color: var(--pvm-text);
    text-decoration: none;
    border-radius: var(--pvm-radius-full);
    font-size: var(--pvm-font-size-sm);
    font-weight: 500;
    transition: all var(--pvm-transition-base);
    border: 1px solid var(--pvm-border);
}

.pvm-quick-links a:hover {
    background: var(--pvm-primary);
    color: var(--pvm-bg-white);
    border-color: var(--pvm-primary);
    transform: translateY(-2px);
}

/* ==========================================================================
   CLAUDE: CTA Section - Portfolio-Variante
   ========================================================================== */

.pvm-cta-section--portfolio {
    background: var(--pvm-gradient);
    padding: var(--pvm-space-2xl) 0;
    text-align: center;
}

.pvm-cta-section--portfolio h2 {
    color: var(--pvm-bg-white);
    margin-bottom: var(--pvm-space-sm);
}

.pvm-cta-section--portfolio .pvm-cta-section__text {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--pvm-font-size-lg);
    max-width: 600px;
    margin: 0 auto var(--pvm-space-lg);
}

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

.pvm-cta-section--portfolio .pvm-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: var(--pvm-shadow-lg);
}

/* ==========================================================================
   CLAUDE: Tablet Responsive - Bento Grid (900px)
   ========================================================================== */

@media (max-width: 900px) and (min-width: 769px) {
    /* CLAUDE: Bento Grid auf Tablet - 3 Spalten × 5 Reihen */
    /* CLAUDE: Höhere Spezifität für Tablet-Breakpoint */
    .pvm-hero--portfolio .pvm-hero__image.pvm-hero-bento-9,
    .pvm-hero-bento-9 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 90px 80px 70px 70px 60px;
        max-width: 420px;
        gap: 8px;
    }

    /* CLAUDE: Karte 1 - Feature bleibt groß (1 Spalte × 2 Reihen) */
    .pvm-bento-card--1 {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    /* CLAUDE: Karte 2 - Technik */
    .pvm-bento-card--2 {
        grid-column: 2;
        grid-row: 1;
    }

    /* CLAUDE: Karte 3 - Gesundheit */
    .pvm-bento-card--3 {
        grid-column: 3;
        grid-row: 1;
    }

    /* CLAUDE: Karte 4 - Lifestyle */
    .pvm-bento-card--4 {
        grid-column: 2 / 4;
        grid-row: 2;
    }

    /* CLAUDE: Karte 5 - Vergleiche */
    .pvm-bento-card--5 {
        grid-column: 1;
        grid-row: 3;
    }

    /* CLAUDE: Karte 6 - Haustiere */
    .pvm-bento-card--6 {
        grid-column: 2 / 4;
        grid-row: 3;
    }

    /* CLAUDE: Karte 7 - Politik */
    .pvm-bento-card--7 {
        grid-column: 1;
        grid-row: 4;
    }

    /* CLAUDE: Karte 8 - Branchen */
    .pvm-bento-card--8 {
        grid-column: 2 / 4;
        grid-row: 4;
    }

    /* CLAUDE: Karte 9 - Wissen - volle Breite */
    .pvm-bento-card--9 {
        grid-column: 1 / 4;
        grid-row: 5;
    }

    /* CLAUDE: Stats Badge Anpassung */
    .pvm-bento-stats {
        bottom: -35px;
    }
}

/* ==========================================================================
   CLAUDE: Mobile Responsive
   ========================================================================== */

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

    /* CLAUDE: Dekorativer Overlay auf Mobile ausblenden */
    .pvm-hero--portfolio::before {
        display: none;
    }

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

    /* CLAUDE: Bild ueber Text auf Mobile */
    .pvm-hero--portfolio .pvm-hero__image {
        order: -1;
    }

    /* CLAUDE: Hero-Bild auf Mobile kleiner */
    .pvm-hero--portfolio .pvm-hero__img {
        max-width: 320px;
        margin: 0 auto;
    }

    /* CLAUDE: Hero Content Mobile */
    .pvm-hero--portfolio .pvm-hero__content {
        text-align: center;
    }

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

    .pvm-hero--portfolio .pvm-hero-ctas .pvm-btn {
        width: 100%;
        text-align: center;
    }

    /* ==========================================================================
       CLAUDE: Bento Grid Mobile - 2 Spalten × 5 Reihen
       ========================================================================== */

    /* CLAUDE: Höhere Spezifität für Mobile */
    .pvm-hero--portfolio .pvm-hero__image.pvm-hero-bento-9,
    .pvm-hero-bento-9 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 100px repeat(4, 70px);
        max-width: 320px;
        gap: 8px;
        margin: 0 auto;
    }

    /* CLAUDE: Karte 1 - Feature volle Breite */
    .pvm-bento-card--1 {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    /* CLAUDE: Karten 2-9 - 2er Grid */
    .pvm-bento-card--2 { grid-column: 1; grid-row: 2; }
    .pvm-bento-card--3 { grid-column: 2; grid-row: 2; }
    .pvm-bento-card--4 { grid-column: 1; grid-row: 3; }
    .pvm-bento-card--5 { grid-column: 2; grid-row: 3; }
    .pvm-bento-card--6 { grid-column: 1; grid-row: 4; }
    .pvm-bento-card--7 { grid-column: 2; grid-row: 4; }
    .pvm-bento-card--8 { grid-column: 1; grid-row: 5; }
    .pvm-bento-card--9 { grid-column: 2; grid-row: 5; }

    /* CLAUDE: Kleinere Schrift auf Mobile */
    .pvm-bento-card__name {
        font-size: 0.75rem;
    }

    .pvm-bento-card__count {
        font-size: 0.625rem;
    }

    .pvm-bento-card--feature .pvm-bento-card__name {
        font-size: 0.875rem;
    }

    .pvm-bento-card--feature .pvm-bento-card__count {
        font-size: 0.75rem;
    }

    /* CLAUDE: Kleinerer Hover-Pfeil */
    .pvm-bento-card__arrow {
        font-size: 1.25rem;
    }

    /* CLAUDE: Stats Badge unter dem Grid zentriert */
    .pvm-bento-stats {
        position: static;
        margin-top: 15px;
        justify-content: center;
    }

    .pvm-bento-stats__item {
        padding: 5px 12px;
        font-size: 0.75rem;
    }

    /* CLAUDE: Trust Bar Mobile */
    .pvm-trust-bar--portfolio .pvm-trust-bar__stats {
        flex-direction: column;
        gap: var(--pvm-space-md);
    }

    /* CLAUDE: Intro Mobile */
    .pvm-portfolio-intro {
        padding: var(--pvm-space-xl) 0;
    }

    .pvm-intro-content {
        text-align: left;
    }

    /* CLAUDE: Portfolio Section Mobile */
    .pvm-portfolio-section {
        padding: var(--pvm-space-xl) 0;
    }

    /* CLAUDE: Quick Links Mobile */
    .pvm-quick-links {
        flex-direction: column;
    }

    .pvm-quick-links__label {
        width: 100%;
        text-align: center;
        margin-bottom: var(--pvm-space-xs);
    }

    /* CLAUDE: CTA Section Mobile */
    .pvm-cta-section--portfolio {
        padding: var(--pvm-space-xl) 0;
    }
}

/* ==========================================================================
   CLAUDE: Tablet Responsive
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    .pvm-hero--portfolio .pvm-hero__grid {
        gap: var(--pvm-space-lg);
    }

    /* CLAUDE: Hero-Bild auf Tablet */
    .pvm-hero--portfolio .pvm-hero__img {
        max-width: 420px;
    }
}

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

@media print {
    .pvm-hero--portfolio .pvm-hero__image,
    .pvm-quick-links-section,
    .pvm-cta-section--portfolio {
        display: none;
    }

    .pvm-trust-bar--portfolio {
        background: #f5f5f5;
        color: #333;
    }

    .pvm-trust-bar--portfolio .pvm-trust-stat__number,
    .pvm-trust-bar--portfolio .pvm-trust-stat__label {
        color: #333;
    }
}