/**
 * CLAUDE: Kategorieseiten Styles - 2026-01-08
 *
 * Modernisiertes CSS für Kategorieseiten mit:
 * - CSS Grid Layout (vorher: Flexbox mit festen Prozent-Breiten)
 * - CSS Custom Properties für Theming
 * - Hover-Animationen für Interaktivität
 * - Mobile-First Responsive Design
 * - Accessibility-freundliche Focus-States
 *
 * Ersetzt die alten .kat_page Styles in style.css
 */

/* ============================================
   1. Category Page Container
   ============================================ */

/* CLAUDE: FIX 2026-01-08 + 2026-01-14: Header-Padding auf Category/Archive/Single Seiten zurücksetzen */
/* CLAUDE: Ursache: style.css hat unspezifische Regeln wie .single header { padding-top: 10px } */
/* CLAUDE: und .category header { padding-top: 50px } die auch .pvm-site-header treffen! */
/* CLAUDE: Diese Regeln setzen das Padding des Fixed Headers zurück für konsistente 70px Höhe */
.category .pvm-site-header,
.archive .pvm-site-header,
.single .pvm-site-header,
.post-type-archive .pvm-site-header {
    padding: 0 !important;
}

/* CLAUDE: Container für Kategorie-Seiten */
.pvm-category-page {
    min-height: 100vh;
}

/* ============================================
   2. Category Header
   ============================================ */

/* CLAUDE: Header mit zentriertem Text | padding-top reduziert wegen Container padding */
.pvm-category-header {
    padding: var(--pvm-space-xl, 48px) 0 var(--pvm-space-lg, 32px);
    text-align: center;
}

/* CLAUDE: Breadcrumbs Styling für Kategorie-Seiten */
/* CLAUDE: FIX 2026-01-08: Konsistent mit breadcrumbs.css (Chatbots-Referenz) */
/* CLAUDE: KEIN margin-top - body hat bereits padding-top: 70px für Fixed Header */
.pvm-breadcrumbs--fullwidth {
    padding: 0.875rem 0;                            /* CLAUDE: 14px wie breadcrumbs.css */
    background: #f8f9fa;                            /* CLAUDE: Heller Hintergrund */
    border-bottom: 1px solid #e9ecef;               /* CLAUDE: Subtile Trennlinie */
}

.pvm-breadcrumbs--fullwidth .content {
    text-align: left;                               /* CLAUDE: Links ausgerichtet */
}

.pvm-breadcrumbs--fullwidth #breadcrumbs {
    font-size: 0.875rem;                            /* CLAUDE: 14px wie breadcrumbs.css */
    color: #666666;                                 /* CLAUDE: Mittleres Grau */
    margin: 0;
    padding: 0;
    line-height: 1.4;                               /* CLAUDE: Wie breadcrumbs.css */
}

.pvm-breadcrumbs--fullwidth #breadcrumbs a {
    color: var(--pvm-primary, #8C0AB7);            /* CLAUDE: Provimedia Lila */
    text-decoration: none;
    transition: color 0.2s ease;
}

.pvm-breadcrumbs--fullwidth #breadcrumbs a:hover {
    color: var(--pvm-primary-dark, #7a099f);       /* CLAUDE: Dunkleres Lila bei Hover */
    text-decoration: underline;
}

/* CLAUDE: Separator-Styling für Yoast Breadcrumbs */
.pvm-breadcrumbs--fullwidth #breadcrumbs span[class*="separator"] {
    color: var(--pvm-text-light, #999999);
    margin: 0 0.25rem;
}

/* CLAUDE: H1 Titel mit Gradient | Responsive Font-Size mit clamp() */
.pvm-category-header__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin: 0 0 1rem 0;
    line-height: 1.2;
    background: var(--pvm-gradient, linear-gradient(135deg, #6366f1, #8b5cf6));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* CLAUDE: Kategorie-Beschreibung | Max-Width für Lesbarkeit */
.pvm-category-header__description {
    max-width: 650px;
    margin: 0 auto 1.5rem;
    color: var(--pvm-text-secondary, #9ca3af);
    line-height: 1.7;
    font-size: 1.1rem;
}

/* CLAUDE: Post-Anzahl | Dezente Darstellung */
.pvm-category-header__count {
    font-size: 0.9rem;
    color: var(--pvm-text-muted, #6b7280);
    margin: 0;
}

/* ============================================
   3. Portfolio Grid
   ============================================ */

/* CLAUDE: CSS Grid mit auto-fill | Responsive ohne Media Queries */
/* CLAUDE: FIX 2026-01-08: minmax(260px, 1fr) für 4 Spalten auf Desktop */
/* CLAUDE: 260px min = optimal für 4 Spalten bei 1200px Container */
.pvm-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
    padding: 2rem 0 4rem;
}

/* ============================================
   4. Portfolio Card
   ============================================ */

/* CLAUDE: Card mit Custom Property für Hintergrund | Von ACF-Feld */
/* CLAUDE: FIX 2026-01-08: aspect-ratio für proportionale Cards ohne Platz-Verschwendung */
/* CLAUDE: FIX 2026-01-08: Moderner 2-Layer Schatten - weniger grau/diffus */
/* CLAUDE: FIX 2026-01-08: aspect-ratio auf 1/1 (quadratisch) für maximalen Platz */
.pvm-portfolio-card {
    background: var(--card-bg, var(--pvm-surface, #1f2937));
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* CLAUDE: 2-Layer Shadow - subtiler Basis + Tiefe mit negativem Spread */
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 8px 24px -4px rgba(0, 0, 0, 0.1);
    /* CLAUDE: aspect-ratio 1:1 (quadratisch) für mehr Platz */
    /* CLAUDE: Ermöglicht größeren Titel-Bereich für lange Titel */
    aspect-ratio: 1 / 1;
}

/* CLAUDE: Hover-Effekt | translateY + verstärkter Shadow */
/* CLAUDE: FIX 2026-01-08: Sanfterer Hover-Shadow passend zum neuen Base-Shadow */
/* CLAUDE: NEU 2026-01-08: Nur für nicht-animierte Cards (JS Fallback) */
/* CLAUDE: GSAP übernimmt Hover für .pvm-portfolio-card--animated */
.pvm-portfolio-card:not(.pvm-portfolio-card--animated):hover {
    transform: translateY(-6px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 16px 32px -6px rgba(0, 0, 0, 0.15);
}

/* CLAUDE: GSAP-animierte Cards - CSS Transitions deaktivieren */
/* CLAUDE: Verhindert Konflikte zwischen CSS und GSAP Animationen */
.pvm-portfolio-card--animated {
    transition: none !important;
}

/* CLAUDE: Focus-State für Keyboard Navigation | A11y */
.pvm-portfolio-card:focus-within {
    outline: 3px solid var(--pvm-primary, #6366f1);
    outline-offset: 3px;
}

/* CLAUDE: Link füllt gesamte Card | Flexbox für Zentrierung */
/* CLAUDE: FIX 2026-01-08: min-height entfernt - aspect-ratio auf Card regelt Höhe */
/* CLAUDE: FIX 2026-01-08: padding-bottom für größeren Titel-Bereich */
.pvm-portfolio-card__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;           /* CLAUDE: Füllt Card komplett dank aspect-ratio */
    padding: 1.5rem 1.5rem 6rem; /* CLAUDE: Mehr Platz unten für größeren Titel */
    text-decoration: none;
    color: inherit;
}

/* ============================================
   5. Logo Container
   ============================================ */

/* CLAUDE: Logo-Container mit hellem Hintergrund für maximale Lesbarkeit */
/* CLAUDE: FIX 2026-01-08: Weißer BG garantiert Kontrast für alle Logo-Farben */
/* CLAUDE: FIX 2026-01-08: Größerer Container + soliderer Hintergrund für bessere Sichtbarkeit */
.pvm-portfolio-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    /* CLAUDE: Solider weißer Hintergrund für maximale Lesbarkeit */
    background: #ffffff;
    border-radius: 12px;
    /* CLAUDE: Mehr Padding für größere Logo-Darstellung */
    padding: 1.25rem 1.5rem;
    /* CLAUDE: Stärkerer Schatten für bessere Abgrenzung vom dunklen Card-BG */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.08);
    /* CLAUDE: Größenbegrenzung - erhöht für bessere Logo-Darstellung */
    max-width: 90%;
    min-height: 90px;
    max-height: 120px;
    margin: 0 auto 0.5rem;
    /* CLAUDE: Sanfte Hover-Transition */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* CLAUDE: Logo-Container Hover-Effekt */
/* CLAUDE: NEU 2026-01-08: Nur für nicht-animierte Cards (JS Fallback) */
.pvm-portfolio-card:not(.pvm-portfolio-card--animated):hover .pvm-portfolio-card__logo {
    transform: scale(1.02);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.06);
}

/* CLAUDE: GSAP-animierte Logo-Container - CSS Transitions deaktivieren */
.pvm-portfolio-card--animated .pvm-portfolio-card__logo {
    transition: none !important;
}

/* CLAUDE: Logo-Bild | object-fit: contain für Proportionen */
/* CLAUDE: FIX 2026-01-08: Größere max-height + image-rendering für Schärfe */
/* CLAUDE: FIX 2026-01-08: image-rendering: auto für Browser-Glättung (weniger pixelig) */
.pvm-portfolio-card__logo img,
.pvm-portfolio-logo {
    max-width: 100%;                             /* CLAUDE: Volle Breite im Container */
    max-height: 85px;                            /* CLAUDE: Erhöht von 70px für bessere Lesbarkeit */
    width: auto;
    height: auto;
    /* CLAUDE: scale-down = nie größer als Original → verhindert Hochskalieren */
    object-fit: scale-down;
    /* CLAUDE: auto = Browser-Interpolation → weichere Kanten bei kleinen Logos */
    /* CLAUDE: Vorher: crisp-edges → zu pixelig bei niedrig aufgelösten Logos */
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
    transition: transform 0.3s ease;
}

/* CLAUDE: Logo-Zoom bei Hover - subtiler da Container bereits skaliert */
/* CLAUDE: NEU 2026-01-08: Nur für nicht-animierte Cards (JS Fallback) */
.pvm-portfolio-card:not(.pvm-portfolio-card--animated):hover .pvm-portfolio-card__logo img {
    transform: scale(1.03);
}

/* CLAUDE: GSAP-animierte Logo-Images - CSS Transitions deaktivieren */
.pvm-portfolio-card--animated .pvm-portfolio-card__logo img {
    transition: none !important;
}

/* ============================================
   6. Thumbnail Container (Fallback)
   ============================================ */

/* CLAUDE: Thumbnail Container - für Logos und Bilder (wenn kein ACF-Logo) */
/* CLAUDE: FIX 2026-01-08: GLEICHER weißer Hintergrund wie Logo-Container */
/* CLAUDE: Wird verwendet wenn ACF website_logo leer ist aber Featured Image existiert */
.pvm-portfolio-card__thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    /* CLAUDE: Gleicher weißer Hintergrund wie .pvm-portfolio-card__logo */
    background: #ffffff;
    border-radius: 12px;
    /* CLAUDE: Gleicher Schatten für Konsistenz */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.08);
    /* CLAUDE: Größe passend zum Logo-Container */
    max-width: 90%;
    min-height: 90px;
    max-height: 120px;
    margin: 0 auto 0.5rem;
    padding: 1rem 1.25rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* CLAUDE: Thumbnail-Bild - CONTAIN statt COVER für Logos! */
/* CLAUDE: FIX 2026-01-08: Gleiche Größe wie Logo-Image */
/* CLAUDE: FIX 2026-01-08: image-rendering: auto für Browser-Glättung */
.pvm-portfolio-card__thumbnail img {
    max-width: 100%;
    max-height: 85px;  /* CLAUDE: Gleich wie Logo-Image */
    width: auto;
    height: auto;
    /* CLAUDE: scale-down = nie größer als Original → verhindert Hochskalieren */
    object-fit: scale-down;
    /* CLAUDE: auto = Browser-Interpolation → weichere Kanten bei kleinen Logos */
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
    transition: transform 0.3s ease;
}

/* CLAUDE: Thumbnail-Container Hover (JS Fallback) */
.pvm-portfolio-card:not(.pvm-portfolio-card--animated):hover .pvm-portfolio-card__thumbnail {
    transform: scale(1.04);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.15),
        0 3px 6px rgba(0, 0, 0, 0.1);
}

/* CLAUDE: Thumbnail-Zoom bei Hover (JS Fallback) */
.pvm-portfolio-card:not(.pvm-portfolio-card--animated):hover .pvm-portfolio-card__thumbnail img {
    transform: scale(1.06);
}

/* CLAUDE: GSAP-animierte Thumbnail-Container - CSS Transitions deaktivieren */
.pvm-portfolio-card--animated .pvm-portfolio-card__thumbnail,
.pvm-portfolio-card--animated .pvm-portfolio-card__thumbnail img {
    transition: none !important;
}

/* ============================================
   7. Card Title
   ============================================ */

/* CLAUDE: Titel IMMER sichtbar | Nicht nur bei Hover (Touch-Devices haben kein Hover) */
.pvm-portfolio-card__link {
    position: relative; /* CLAUDE: Für absolute Positionierung des Titels */
}

/* CLAUDE: FIX 2026-01-08: Solider Titel-Balken für garantierte Lesbarkeit */
/* CLAUDE: Kein Gradient mehr - stattdessen solider dunkler Hintergrund + Blur */
/* CLAUDE: FIX 2026-01-08: Größerer Titel-Bereich für vollständige Anzeige */
.pvm-portfolio-card__title {
    font-size: 0.95rem !important;                /* CLAUDE: 15.2px - !important wegen h2 in base.css */
    font-weight: 600;
    text-align: center;
    margin: 0;
    padding: 0.75rem 1rem;                        /* CLAUDE: 12px 16px */
    color: #ffffff;
    /* CLAUDE: Stärkerer Text-Shadow für Lesbarkeit */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    /* CLAUDE: Immer sichtbar - !important überschreibt GSAP inline styles */
    opacity: 1 !important;
    transform: none !important;
    transition: background 0.3s ease;
    /* CLAUDE: Solider dunkler Hintergrund mit Blur-Effekt */
    background: rgba(15, 23, 42, 0.94);          /* CLAUDE: Slate-900 mit Transparenz */
    backdrop-filter: blur(8px);                   /* CLAUDE: Glasmorphismus-Effekt */
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0 0 16px 16px;
    /* CLAUDE: Dezente obere Trennlinie */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* CLAUDE: Absolute Positionierung am unteren Rand */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* CLAUDE: Größere Höhe für vollständige Titel-Anzeige */
    /* CLAUDE: 90px = Platz für ~4 Zeilen Text */
    height: 90px;
    /* CLAUDE: Flexbox für vertikale Zentrierung bei kurzen Titeln */
    display: flex;
    align-items: center;
    justify-content: center;
    /* CLAUDE: Mehrzeiliger Titel - max 4 Zeilen mit Ellipsis */
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* CLAUDE: Inner Span für line-clamp (Flexbox + line-clamp funktioniert nicht direkt) */
.pvm-portfolio-card__title span,
.pvm-portfolio-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 4;                        /* CLAUDE: 4 Zeilen für lange Titel */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CLAUDE: Hover-Effekt - leicht heller für Feedback */
.pvm-portfolio-card:hover .pvm-portfolio-card__title {
    background: rgba(15, 23, 42, 0.96);
}

/* ============================================
   8. Pagination
   ============================================ */

/* CLAUDE: Pagination zentriert | Flexbox für Alignment */
.pvm-pagination {
    padding: 2rem 0 4rem;
    display: flex;
    justify-content: center;
}

/* CLAUDE: Nav-Links Container */
.pvm-pagination .nav-links {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

/* CLAUDE: Page Numbers | 48px Minimum für Touch-Targets (WCAG 2.2) */
/* CLAUDE: FIX 2026-01-08: Kontrast korrigiert - #ffffff statt --pvm-text Variable */
/* CLAUDE: Grund: --pvm-text ist #333333 (Light-Mode), auf dunklem BG nicht lesbar */
.pvm-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;  /* CLAUDE: Erhöht von 44px für bessere Tippbarkeit */
    min-height: 48px; /* CLAUDE: Erhöht von 44px */
    padding: 0 1rem;
    border-radius: 8px;
    background: var(--pvm-dark-surface, #1f2937);  /* CLAUDE: Dunkler Hintergrund */
    color: #ffffff;                                 /* CLAUDE: WEISS für Kontrast 12.6:1 */
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);    /* CLAUDE: Subtiler Border für Abgrenzung */
}

/* CLAUDE: Page Number Hover */
.pvm-pagination .page-numbers:hover {
    background: var(--pvm-primary, #8C0AB7);       /* CLAUDE: Provimedia Lila */
    color: #ffffff;
    border-color: var(--pvm-primary, #8C0AB7);
}

/* CLAUDE: Focus-State für Keyboard-Navigation (A11y) */
.pvm-pagination .page-numbers:focus {
    outline: 2px solid var(--pvm-primary, #8C0AB7);
    outline-offset: 2px;
}

/* CLAUDE: Aktuelle Seite | Gradient-Hintergrund */
.pvm-pagination .page-numbers.current {
    background: var(--pvm-gradient, linear-gradient(135deg, #8C0AB7, #4C41E0));
    color: #ffffff;
    font-weight: 600;
    border: none;
}

/* CLAUDE: Dots (Ellipsis) | Nicht klickbar */
.pvm-pagination .page-numbers.dots {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);              /* CLAUDE: Leicht gedämpft für Dots */
    pointer-events: none;
    min-width: auto;
    padding: 0 0.5rem;
    border: none;
}

/* CLAUDE: Prev/Next Buttons */
.pvm-pagination .prev.page-numbers,
.pvm-pagination .next.page-numbers {
    font-weight: 600;
}

/* ============================================
   9. No Results
   ============================================ */

/* CLAUDE: Fallback wenn keine Posts | Zentriert */
.pvm-no-results {
    text-align: center;
    padding: 6rem 2rem;
    color: var(--pvm-text-secondary, #9ca3af);
}

.pvm-no-results p {
    font-size: 1.1rem;
    margin: 0;
}

/* ============================================
   10. Responsive Styles
   ============================================ */

/* CLAUDE: Extra Large Desktop | 1600px+ - 5 Spalten */
@media (min-width: 1600px) {
    .pvm-portfolio-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.75rem;
    }
}

/* CLAUDE: Large Desktop | 1200px-1599px - 4 Spalten fix */
@media (min-width: 1200px) and (max-width: 1599px) {
    .pvm-portfolio-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

/* CLAUDE: Desktop/Tablet | 900px-1199px - 3 Spalten */
@media (min-width: 900px) and (max-width: 1199px) {
    .pvm-portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

/* CLAUDE: Tablet Breakpoint | 1024px */
@media (max-width: 1024px) {
    .pvm-category-header {
        padding: 48px 0 32px;
    }
}

/* CLAUDE: Small Tablet/Large Mobile | 600px-899px - 2 Spalten */
@media (min-width: 600px) and (max-width: 899px) {
    .pvm-portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* CLAUDE: Mobile Breakpoint | 768px */
@media (max-width: 768px) {
    .pvm-category-header {
        padding: var(--pvm-space-lg, 32px) 0 var(--pvm-space-md, 24px);
    }

    .pvm-category-header__title {
        font-size: 1.75rem;
    }

    .pvm-category-header__description {
        font-size: 1rem;
    }

    /* CLAUDE: FIX 2026-01-08: Kompakteres Padding auf Mobile */
    .pvm-portfolio-card__link {
        padding: 1.25rem 1.25rem 3rem;
    }

    /* CLAUDE: Kleinere Schrift auf Mobile */
    .pvm-portfolio-card__title {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }

    /* CLAUDE: Touch-Targets bleiben >= 44px auf Mobile */
    .pvm-pagination .page-numbers {
        min-width: 44px;
        min-height: 44px;
        padding: 0 0.75rem;
        font-size: 0.9rem;
    }
}

/* CLAUDE: Small Mobile | 600px - 2 Spalten mit kompakteren Cards */
@media (max-width: 599px) {
    .pvm-category-header {
        padding: var(--pvm-space-md, 24px) 0 var(--pvm-space-sm, 16px);
    }

    .pvm-portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        padding: 1.5rem 0 3rem;
    }

    /* CLAUDE: Cards etwas höher auf Mobile für bessere Logo/Titel-Darstellung */
    .pvm-portfolio-card {
        aspect-ratio: 3 / 3;  /* CLAUDE: Quadratisch für mehr vertikalen Platz */
    }

    /* CLAUDE: Kompakteres Padding auf sehr kleinen Screens */
    .pvm-portfolio-card__link {
        padding: 0.75rem 0.75rem 3rem;  /* CLAUDE: Mehr Platz unten für Titel */
    }

    /* CLAUDE: FIX 2026-01-08: Optimierter Logo-Container auf Mobile */
    /* CLAUDE: Größer als vorher für bessere Lesbarkeit */
    .pvm-portfolio-card__logo {
        padding: 0.75rem 1rem;
        min-height: 65px;
        max-height: 85px;
        max-width: 92%;
        border-radius: 10px;
    }

    .pvm-portfolio-card__logo img {
        max-width: 100%;
        max-height: 60px;  /* CLAUDE: Erhöht von 50px */
    }

    /* CLAUDE: Titel auf Mobile - größer und mehrzeilig */
    .pvm-portfolio-card__title {
        font-size: 0.75rem;  /* CLAUDE: Erhöht von 0.7rem */
        padding: 0.625rem 0.75rem;
        -webkit-line-clamp: 2;  /* CLAUDE: Max 2 Zeilen */
        min-height: 2.2em;
    }
}

/* CLAUDE: Sehr kleine Screens | 380px - Einzelspalte für bessere Lesbarkeit */
@media (max-width: 380px) {
    .pvm-portfolio-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* CLAUDE: Flachere Cards bei 1-Spalte für bessere Raumnutzung */
    .pvm-portfolio-card {
        aspect-ratio: 16 / 10;
    }

    .pvm-portfolio-card__link {
        padding: 1rem 1rem 3rem;
    }

    /* CLAUDE: FIX 2026-01-08: Größerer Logo-Container bei 1-Spalte */
    .pvm-portfolio-card__logo {
        padding: 1rem 1.5rem;
        min-height: 70px;
        max-height: 90px;
        max-width: 80%;
        border-radius: 10px;
    }

    .pvm-portfolio-card__logo img {
        max-height: 65px;
    }

    .pvm-portfolio-card__title {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
}

/* ============================================
   11. Screen Reader Only (A11y)
   ============================================ */

/* CLAUDE: Visually Hidden aber für Screen Reader zugänglich */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* CLAUDE: Fokus macht Element sichtbar | Für Skip-Links etc. */
.screen-reader-text:focus {
    background-color: var(--pvm-surface, #1f2937);
    clip: auto !important;
    clip-path: none;
    color: var(--pvm-text, #f9fafb);
    display: block;
    font-size: 1rem;
    height: auto;
    left: 5px;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ============================================
   12. Print Styles
   ============================================ */

@media print {
    .pvm-category-header {
        padding: 20px 0;
    }

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

    .pvm-portfolio-card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }

    .pvm-portfolio-card__title {
        opacity: 1;
        transform: none;
        color: black;
        text-shadow: none;
        background: none;
    }

    .pvm-pagination {
        display: none;
    }
}

/* ============================================
   13. Dark Mode Support
   CLAUDE: Breadcrumbs, Category Header, No Results
   ============================================ */

/* CLAUDE: Manueller Toggle - Breadcrumbs */
html[data-theme="dark"] .pvm-breadcrumbs--fullwidth {
    background: var(--pvm-dark-surface);
    border-bottom-color: var(--pvm-dark-border);
}

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

html[data-theme="dark"] .pvm-breadcrumbs--fullwidth #breadcrumbs a {
    color: var(--pvm-primary-dark-mode);
}

html[data-theme="dark"] .pvm-breadcrumbs--fullwidth #breadcrumbs a:hover {
    color: #d8b4fe; /* CLAUDE: Helleres Lila bei Hover */
}

/* CLAUDE: Category Header Dark Mode */
html[data-theme="dark"] .pvm-category-header__description {
    color: var(--pvm-dark-text-muted);
}

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

/* CLAUDE: No Results Dark Mode */
html[data-theme="dark"] .pvm-no-results {
    color: var(--pvm-dark-text-muted);
}

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

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

    html:not([data-theme="light"]) .pvm-breadcrumbs--fullwidth #breadcrumbs a {
        color: var(--pvm-primary-dark-mode);
    }

    html:not([data-theme="light"]) .pvm-breadcrumbs--fullwidth #breadcrumbs a:hover {
        color: #d8b4fe;
    }

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

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

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