/* CLAUDE: Marketing Overview - Kompakt-Sektion */
/* CLAUDE: Ersetzt die 3 separaten Teaser-Sektionen (Werbeformen, Portfolio, Benefits) */
/* CLAUDE: Anpassen: Grid-Layout, Kartendesign, Quick-Links */

/* ==========================================================================
   CLAUDE: Sektion Container
   ========================================================================== */

/* CLAUDE: Hauptcontainer mit leichtem Hintergrund zur Abgrenzung */
.pvm-marketing-overview {
    padding: var(--pvm-space-2xl) 0; /* CLAUDE: 64px oben/unten */
    background: var(--pvm-bg-light); /* CLAUDE: Heller Hintergrund #f8f9fa */
}

/* CLAUDE: Subtitle unter der Headline - zentriert */
.pvm-marketing-overview .pvm-section-subtitle {
    font-size: var(--pvm-font-size-lg); /* CLAUDE: 1.125rem fluid */
    color: var(--pvm-text-muted); /* CLAUDE: Gedämpfte Farbe #666 */
    margin-bottom: var(--pvm-space-lg); /* CLAUDE: 32px Abstand */
    text-align: center; /* CLAUDE: Zentriert */
}

/* CLAUDE: Headline zentriert */
.pvm-marketing-overview h2 {
    text-align: center; /* CLAUDE: Zentriert */
    margin-bottom: var(--pvm-space-xs); /* CLAUDE: 8px zum Subtitle */
}

/* ==========================================================================
   CLAUDE: 3-Spalten Grid
   ========================================================================== */

/* CLAUDE: Grid-Container für die 3 Karten */
.pvm-overview-grid {
    display: grid; /* CLAUDE: CSS Grid Layout */
    grid-template-columns: repeat(3, 1fr); /* CLAUDE: 3 gleiche Spalten */
    gap: var(--pvm-space-md); /* CLAUDE: 24px Abstand zwischen Karten */
    margin-bottom: var(--pvm-space-lg); /* CLAUDE: 32px zum Quick-Links Bereich */
}

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

    /* CLAUDE: Mittlere Karte (Portfolio) nimmt volle Breite auf Tablet */
    .pvm-overview-card--highlight {
        grid-column: 1 / -1; /* CLAUDE: Spannt über beide Spalten */
        max-width: 500px; /* CLAUDE: Begrenzte Breite */
        margin: 0 auto; /* CLAUDE: Zentriert */
    }
}

/* CLAUDE: Responsive - Mobile: 1 Spalte */
@media (max-width: 768px) {
    .pvm-overview-grid {
        grid-template-columns: 1fr; /* CLAUDE: Einzelne Spalte */
        gap: var(--pvm-space-sm); /* CLAUDE: 16px Abstand */
    }

    .pvm-overview-card--highlight {
        max-width: none; /* CLAUDE: Volle Breite auf Mobile */
    }
}

/* ==========================================================================
   CLAUDE: Karten-Styles
   ========================================================================== */

/* CLAUDE: Basis-Karte */
/* CLAUDE: 2025-01-07 - Transform aus Transition entfernt (nur Shadow) */
.pvm-overview-card {
    background: var(--pvm-bg-white); /* CLAUDE: Weißer Hintergrund */
    border-radius: var(--pvm-radius-lg); /* CLAUDE: 12px Ecken */
    padding: var(--pvm-space-md); /* CLAUDE: 24px Innenabstand */
    box-shadow: var(--pvm-shadow-sm); /* CLAUDE: Leichter Schatten */
    display: flex; /* CLAUDE: Flexbox für Layout */
    flex-direction: column; /* CLAUDE: Vertikale Anordnung */
    border: 1px solid transparent; /* CLAUDE: Basis-Border für Transition */
    transition: box-shadow var(--pvm-transition-fast), /* CLAUDE: Nur Shadow + Border */
                border-color var(--pvm-transition-fast);
}

/* CLAUDE: Hover-Effekt für normale Karten */
/* CLAUDE: 2025-01-07 - Option A: Nur Shadow-Verstärkung, keine Bewegung */
.pvm-overview-card:hover {
    transform: none; /* CLAUDE: Keine Bewegung mehr */
    box-shadow: 0 8px 32px rgba(140, 10, 183, 0.12); /* CLAUDE: Sanfter Lila-Schatten */
    border: 1px solid rgba(140, 10, 183, 0.15); /* CLAUDE: Subtiler Lila-Border */
}

/* CLAUDE: Hervorgehobene Karte (Portfolio/Mitte) - Gradient Hintergrund */
.pvm-overview-card--highlight {
    background: var(--pvm-gradient); /* CLAUDE: Lila-Blau Gradient */
    color: var(--pvm-bg-white); /* CLAUDE: Weißer Text */
}

/* CLAUDE: Hover für Highlight-Karte */
.pvm-overview-card--highlight:hover {
    box-shadow: var(--pvm-shadow-primary); /* CLAUDE: Lila Glow */
}

/* CLAUDE: Headline in Highlight-Karte */
.pvm-overview-card--highlight h3 {
    color: var(--pvm-bg-white); /* CLAUDE: Weiß */
}

/* CLAUDE: Statistik-Zahl in Highlight-Karte */
.pvm-overview-card--highlight .pvm-overview-stat {
    color: var(--pvm-bg-white); /* CLAUDE: Weiß */
}

/* CLAUDE: Links in Highlight-Karte */
.pvm-overview-card--highlight .pvm-overview-list a {
    color: rgba(255, 255, 255, 0.9); /* CLAUDE: Leicht transparent weiß */
}

.pvm-overview-card--highlight .pvm-overview-list a:hover {
    color: var(--pvm-bg-white); /* CLAUDE: Voll weiß bei Hover */
    text-decoration: underline; /* CLAUDE: Unterstreichung */
}

/* CLAUDE: Border in Highlight-Karte */
.pvm-overview-card--highlight .pvm-overview-list li {
    border-bottom-color: rgba(255, 255, 255, 0.2); /* CLAUDE: Transparente Linie */
}

/* ==========================================================================
   CLAUDE: Karten-Inhalt
   ========================================================================== */

/* CLAUDE: Karten-Headline */
.pvm-overview-card h3 {
    font-size: var(--pvm-font-size-xl); /* CLAUDE: 1.5rem fluid */
    margin-bottom: var(--pvm-space-sm); /* CLAUDE: 16px */
    color: var(--pvm-text); /* CLAUDE: Dunkelgrau */
}

/* CLAUDE: Große Statistik-Zahl (z.B. "216+ Portale") */
.pvm-overview-stat {
    font-size: var(--pvm-font-size-2xl); /* CLAUDE: 2rem fluid */
    font-weight: 700; /* CLAUDE: Fett */
    margin-bottom: var(--pvm-space-xs); /* CLAUDE: 8px */
    color: var(--pvm-primary); /* CLAUDE: Primärfarbe */
}

/* ==========================================================================
   CLAUDE: Link-Listen
   ========================================================================== */

/* CLAUDE: Basis Link-Liste */
.pvm-overview-list {
    list-style: none; /* CLAUDE: Keine Bullets */
    padding: 0; /* CLAUDE: Kein Padding */
    margin: 0 0 var(--pvm-space-sm) 0; /* CLAUDE: 16px unten */
    flex-grow: 1; /* CLAUDE: Füllt verfügbaren Platz */
}

/* CLAUDE: Listen-Element */
.pvm-overview-list li {
    padding: var(--pvm-space-xs) 0; /* CLAUDE: 8px oben/unten */
    border-bottom: 1px solid var(--pvm-border); /* CLAUDE: Trennlinie */
}

/* CLAUDE: Letztes Element ohne Border */
.pvm-overview-list li:last-child {
    border-bottom: none; /* CLAUDE: Keine Linie */
}

/* CLAUDE: Links in der Liste */
.pvm-overview-list a {
    color: var(--pvm-text); /* CLAUDE: Dunkelgrau */
    text-decoration: none; /* CLAUDE: Keine Unterstreichung */
    display: block; /* CLAUDE: Block für bessere Klickfläche */
    transition: color var(--pvm-transition-fast); /* CLAUDE: Smooth Hover */
}

/* CLAUDE: Link-Hover */
.pvm-overview-list a:hover {
    color: var(--pvm-primary); /* CLAUDE: Primärfarbe */
}

/* ==========================================================================
   CLAUDE: Kategorie-Liste (Portfolio)
   ========================================================================== */

/* CLAUDE: Kategorie-Element mit Flex für Badge */
.pvm-overview-list--categories li {
    display: flex; /* CLAUDE: Flexbox */
    align-items: center; /* CLAUDE: Vertikal zentriert */
    justify-content: space-between; /* CLAUDE: Badge rechts */
}

/* CLAUDE: Badge für Zusatzinfo (z.B. "84 Seiten") */
.pvm-badge {
    display: inline-block; /* CLAUDE: Inline */
    font-size: var(--pvm-font-size-xs); /* CLAUDE: Klein */
    background: rgba(255, 255, 255, 0.2); /* CLAUDE: Transparent weiß */
    color: var(--pvm-bg-white); /* CLAUDE: Weiß */
    padding: 2px 8px; /* CLAUDE: Innenabstand */
    border-radius: var(--pvm-radius-sm); /* CLAUDE: Kleine Ecken */
    font-weight: 500; /* CLAUDE: Medium */
}

/* CLAUDE: Badge in normalen Karten */
.pvm-overview-card:not(.pvm-overview-card--highlight) .pvm-badge {
    background: var(--pvm-bg-light); /* CLAUDE: Heller Hintergrund */
    color: var(--pvm-primary); /* CLAUDE: Primärfarbe */
}

/* CLAUDE: "Mehr"-Hinweis ohne Link */
.pvm-overview-more {
    color: rgba(255, 255, 255, 0.7); /* CLAUDE: Gedämpft */
    font-style: italic; /* CLAUDE: Kursiv */
    font-size: var(--pvm-font-size-sm); /* CLAUDE: Klein */
}

/* CLAUDE: Mehr-Hinweis in normalen Karten */
.pvm-overview-card:not(.pvm-overview-card--highlight) .pvm-overview-more {
    color: var(--pvm-text-light); /* CLAUDE: Heller Text */
}

/* ==========================================================================
   CLAUDE: Benefits-Liste (mit Häkchen)
   ========================================================================== */

/* CLAUDE: Benefits-Element mit Icon */
.pvm-overview-list--benefits li {
    display: flex; /* CLAUDE: Flexbox */
    align-items: flex-start; /* CLAUDE: Oben ausgerichtet */
    gap: var(--pvm-space-xs); /* CLAUDE: 8px Abstand */
}

/* CLAUDE: Häkchen-Icon */
.pvm-check-icon {
    color: #22c55e; /* CLAUDE: Grün */
    font-weight: 700; /* CLAUDE: Fett */
    flex-shrink: 0; /* CLAUDE: Nicht schrumpfen */
    font-size: 1.1em; /* CLAUDE: Etwas größer */
}

/* ==========================================================================
   CLAUDE: Buttons in Karten
   ========================================================================== */

/* CLAUDE: Button am Ende der Karte */
.pvm-overview-card .pvm-btn {
    align-self: flex-start; /* CLAUDE: Links ausgerichtet */
    margin-top: auto; /* CLAUDE: Immer am unteren Rand */
}

/* CLAUDE: Kleiner Button-Modifier */
.pvm-btn--small {
    padding: 0.5rem 1rem; /* CLAUDE: Kleinerer Innenabstand */
    font-size: var(--pvm-font-size-sm); /* CLAUDE: Kleinere Schrift */
}

/* CLAUDE: Outline Button */
.pvm-btn--outline {
    background: transparent; /* CLAUDE: Transparent */
    border: 2px solid var(--pvm-primary); /* CLAUDE: Primärfarbe Border */
    color: var(--pvm-primary); /* CLAUDE: Primärfarbe Text */
}

.pvm-btn--outline:hover {
    background: var(--pvm-primary); /* CLAUDE: Gefüllt bei Hover */
    color: var(--pvm-bg-white); /* CLAUDE: Weißer Text */
}

/* CLAUDE: Outline Button in Highlight-Karte */
.pvm-overview-card--highlight .pvm-btn--outline {
    border-color: var(--pvm-bg-white); /* CLAUDE: Weißer Border */
    color: var(--pvm-bg-white); /* CLAUDE: Weißer Text */
}

.pvm-overview-card--highlight .pvm-btn--outline:hover {
    background: var(--pvm-bg-white); /* CLAUDE: Weißer Hintergrund */
    color: var(--pvm-primary); /* CLAUDE: Primärfarbe Text */
}

/* CLAUDE: Primary Button in Highlight-Karte */
.pvm-overview-card--highlight .pvm-btn--primary {
    background: var(--pvm-bg-white); /* CLAUDE: Weißer Hintergrund */
    color: var(--pvm-primary); /* CLAUDE: Primärfarbe Text */
}

.pvm-overview-card--highlight .pvm-btn--primary:hover {
    background: rgba(255, 255, 255, 0.9); /* CLAUDE: Leicht transparent */
    transform: translateY(-2px); /* CLAUDE: Leichter Lift */
}

/* ==========================================================================
   CLAUDE: Quick-Links Leiste
   ========================================================================== */

/* CLAUDE: Quick-Links Container */
.pvm-quick-links {
    display: flex; /* CLAUDE: Flexbox */
    flex-wrap: wrap; /* CLAUDE: Umbruch erlauben */
    justify-content: center; /* CLAUDE: Zentriert */
    align-items: center; /* CLAUDE: Vertikal zentriert */
    gap: var(--pvm-space-xs); /* CLAUDE: 8px Abstand */
    padding-top: var(--pvm-space-md); /* CLAUDE: 24px oben */
    border-top: 1px solid var(--pvm-border); /* CLAUDE: Trennlinie oben */
}

/* CLAUDE: Label "Direkt zu:" */
.pvm-quick-links__label {
    color: var(--pvm-text-light); /* CLAUDE: Heller Text */
    font-size: var(--pvm-font-size-sm); /* CLAUDE: Klein */
    margin-right: var(--pvm-space-xs); /* CLAUDE: 8px rechts */
}

/* CLAUDE: Quick-Link Button */
.pvm-quick-links a {
    color: var(--pvm-primary); /* CLAUDE: Primärfarbe */
    text-decoration: none; /* CLAUDE: Keine Unterstreichung */
    font-weight: 500; /* CLAUDE: Medium */
    font-size: var(--pvm-font-size-sm); /* CLAUDE: Klein */
    padding: 6px 12px; /* CLAUDE: Innenabstand */
    border-radius: var(--pvm-radius-full); /* CLAUDE: Pill-Shape */
    transition: background var(--pvm-transition-fast), /* CLAUDE: Smooth Hover */
                color var(--pvm-transition-fast);
}

/* CLAUDE: Quick-Link Hover */
.pvm-quick-links a:hover {
    background: var(--pvm-primary); /* CLAUDE: Primärfarbe Hintergrund */
    color: var(--pvm-bg-white); /* CLAUDE: Weißer Text */
}

/* ==========================================================================
   CLAUDE: Services-Erweiterung (Unter-Links in Service-Karten)
   ========================================================================== */

/* CLAUDE: Unter-Links Container in Service-Karten */
.pvm-service-card__links {
    list-style: none; /* CLAUDE: Keine Bullets */
    padding: 0; /* CLAUDE: Kein Padding */
    margin: var(--pvm-space-xs) 0 var(--pvm-space-sm) 0; /* CLAUDE: Abstände */
    display: flex; /* CLAUDE: Flexbox */
    flex-wrap: wrap; /* CLAUDE: Umbruch erlauben */
    gap: 6px; /* CLAUDE: 6px Abstand */
}

/* CLAUDE: Einzelner Unter-Link */
.pvm-service-card__links a {
    font-size: var(--pvm-font-size-xs); /* CLAUDE: Klein */
    color: var(--pvm-text-muted); /* CLAUDE: Gedämpft */
    text-decoration: none; /* CLAUDE: Keine Unterstreichung */
    padding: 4px 10px; /* CLAUDE: Innenabstand */
    background: var(--pvm-bg-light); /* CLAUDE: Heller Hintergrund */
    border-radius: var(--pvm-radius-sm); /* CLAUDE: Kleine Ecken */
    transition: all var(--pvm-transition-fast); /* CLAUDE: Smooth Hover */
}

/* CLAUDE: Unter-Link Hover */
.pvm-service-card__links a:hover {
    background: var(--pvm-primary); /* CLAUDE: Primärfarbe */
    color: var(--pvm-bg-white); /* CLAUDE: Weißer Text */
}

/* ==========================================================================
   CLAUDE: Blog-Kategorien Navigation
   ========================================================================== */

/* CLAUDE: Kategorie-Navigation Container */
.pvm-blog-categories {
    display: flex; /* CLAUDE: Flexbox */
    flex-wrap: wrap; /* CLAUDE: Umbruch erlauben */
    justify-content: center; /* CLAUDE: Zentriert */
    gap: var(--pvm-space-xs); /* CLAUDE: 8px Abstand */
    margin-bottom: var(--pvm-space-md); /* CLAUDE: 24px unten */
}

/* CLAUDE: Kategorie-Tag */
.pvm-category-tag {
    display: inline-block; /* CLAUDE: Inline */
    padding: 6px 16px; /* CLAUDE: Innenabstand */
    background: var(--pvm-bg-white); /* CLAUDE: Weißer Hintergrund */
    color: var(--pvm-text-muted); /* CLAUDE: Gedämpfter Text */
    border-radius: var(--pvm-radius-full); /* CLAUDE: Pill-Shape */
    font-size: var(--pvm-font-size-sm); /* CLAUDE: Klein */
    text-decoration: none; /* CLAUDE: Keine Unterstreichung */
    border: 1px solid var(--pvm-border); /* CLAUDE: Border */
    transition: all var(--pvm-transition-fast); /* CLAUDE: Smooth Hover */
}

/* CLAUDE: Kategorie-Tag Hover */
.pvm-category-tag:hover {
    background: var(--pvm-primary); /* CLAUDE: Primärfarbe */
    color: var(--pvm-bg-white); /* CLAUDE: Weißer Text */
    border-color: var(--pvm-primary); /* CLAUDE: Primärfarbe Border */
}

/* ==========================================================================
   CLAUDE: Blog-Kategorien Override für .aktuelles Sektion (Ghost Buttons)
   CLAUDE: Höhere Spezifität (0-2-0) überschreibt .aktuelles a (0-1-1)
   CLAUDE: Löst das Problem: Weißer Text auf weißem Hintergrund war unsichtbar
   ========================================================================== */

/* CLAUDE: Ghost Button Basis-Style */
/* CLAUDE: Anpassen: Transparenz, Border-Stärke, Padding */
.aktuelles .pvm-category-tag {
    background: transparent; /* CLAUDE: Kein Hintergrund - Gradient scheint durch */
    color: #ffffff; /* CLAUDE: Weißer Text für Kontrast auf Gradient */
    border: 2px solid rgba(255, 255, 255, 0.7); /* CLAUDE: Semi-transparenter weißer Rand */
    padding: 10px 24px; /* CLAUDE: Größerer Klickbereich */
    font-weight: 500; /* CLAUDE: Medium für bessere Lesbarkeit */
    font-size: var(--pvm-font-size-sm); /* CLAUDE: Konsistente Schriftgröße */
    letter-spacing: 0.025em; /* CLAUDE: Leicht erhöhter Buchstabenabstand */
    transition: all 0.2s ease; /* CLAUDE: Sanfte Übergänge */
}

/* CLAUDE: Ghost Button Hover-State */
/* CLAUDE: Anpassen: Hintergrund-Transparenz, Border-Opacity */
.aktuelles .pvm-category-tag:hover {
    background: rgba(255, 255, 255, 0.15); /* CLAUDE: Leicht weißer Hintergrund */
    border-color: #ffffff; /* CLAUDE: Voller weißer Rand */
    transform: translateY(-2px); /* CLAUDE: Leichter Lift-Effekt */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* CLAUDE: Subtiler Schatten */
}

/* CLAUDE: Ghost Button Focus-State (Accessibility) */
/* CLAUDE: Wichtig für Keyboard-Navigation */
.aktuelles .pvm-category-tag:focus {
    outline: none; /* CLAUDE: Standard-Outline entfernen */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4); /* CLAUDE: Custom Focus-Ring */
}

/* CLAUDE: Ghost Button Active-State (Klick) */
.aktuelles .pvm-category-tag:active {
    transform: translateY(0); /* CLAUDE: Kein Lift beim Klick */
    background: rgba(255, 255, 255, 0.25); /* CLAUDE: Stärkerer Hintergrund */
}

/* ==========================================================================
   CLAUDE: Blog-Sektion Kontrast-Fix (.aktuelles)
   CLAUDE: Problem: Grauer Text (#666) auf violettem Gradient ist nicht lesbar
   CLAUDE: Lösung: Alle Textelemente auf weiß setzen für WCAG AA Konformität
   ========================================================================== */

/* CLAUDE: Subtitle in Blog-Sektion muss weiß sein, nicht grau */
/* CLAUDE: Override für var(--pvm-text-muted) das sonst #666 ist */
.aktuelles .pvm-section-subtitle {
    color: rgba(255, 255, 255, 0.9); /* CLAUDE: Fast-weiß für sanften Kontrast zum H2 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* CLAUDE: Subtiler Schatten für Lesbarkeit */
}

/* CLAUDE: Post-Titel Kontrast verbessern */
.aktuelles .post-item h3 {
    color: #ffffff; /* CLAUDE: Reines Weiß für Titel */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); /* CLAUDE: Schatten für Tiefe */
}

/* CLAUDE: Post-Excerpt Lesbarkeit verbessern */
.aktuelles .post-item .excerpt p,
.aktuelles .post-item p {
    color: rgba(255, 255, 255, 0.95); /* CLAUDE: Leicht abgedunkelt für Hierarchie */
    line-height: 1.6; /* CLAUDE: Bessere Zeilenhöhe für Lesbarkeit */
}

/* CLAUDE: "zum Artikel" Button-Text */
.aktuelles .btn2 {
    color: #ffffff; /* CLAUDE: Weiß */
    border-color: rgba(255, 255, 255, 0.8); /* CLAUDE: Sichtbarer Border */
}

.aktuelles .btn2:hover {
    background: rgba(255, 255, 255, 0.15); /* CLAUDE: Hover-Feedback */
    border-color: #ffffff; /* CLAUDE: Voller weißer Border */
}

/* CLAUDE: "Alle Artikel" CTA Button */
.aktuelles .btn {
    background-color: #ffffff; /* CLAUDE: Weißer Hintergrund */
    color: var(--pvm-primary, #8C0AB7); /* CLAUDE: Lila Text für Kontrast */
    font-weight: 600; /* CLAUDE: Semi-bold für bessere Lesbarkeit */
}

.aktuelles .btn:hover {
    background-color: rgba(255, 255, 255, 0.9); /* CLAUDE: Leicht transparent bei Hover */
    transform: translateY(-2px); /* CLAUDE: Lift-Effekt */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* CLAUDE: Schatten */
}

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

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

html[data-theme="dark"] .pvm-overview-card:not(.pvm-overview-card--highlight) {
    background: var(--pvm-dark-bg);
    border: 1px solid var(--pvm-dark-border);
}

html[data-theme="dark"] .pvm-overview-card:not(.pvm-overview-card--highlight) h3,
html[data-theme="dark"] .pvm-overview-list a {
    color: var(--pvm-dark-text);
}

html[data-theme="dark"] .pvm-overview-list li {
    border-bottom-color: var(--pvm-dark-border);
}

html[data-theme="dark"] .pvm-quick-links {
    border-top-color: var(--pvm-dark-border);
}

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

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

    html:not([data-theme="light"]) .pvm-overview-card:not(.pvm-overview-card--highlight) {
        background: var(--pvm-dark-bg);
        border: 1px solid var(--pvm-dark-border);
    }

    html:not([data-theme="light"]) .pvm-overview-card:not(.pvm-overview-card--highlight) h3,
    html:not([data-theme="light"]) .pvm-overview-list a {
        color: var(--pvm-dark-text);
    }

    html:not([data-theme="light"]) .pvm-overview-list li {
        border-bottom-color: var(--pvm-dark-border);
    }

    html:not([data-theme="light"]) .pvm-quick-links {
        border-top-color: var(--pvm-dark-border);
    }

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