/* ==========================================================================
   CLAUDE: Glossar Styles
   CLAUDE: Verwendet pvm-* Design System Variablen aus base.css
   CLAUDE: Features: Hero, Suche, A-Z Filter, Grid, Cards, Single-View
   ========================================================================== */

/* ==========================================================================
   CLAUDE: Container Override fuer Glossar
   ========================================================================== */

.pvm-glossar-page .pvm-container {
    max-width: var(--pvm-container-xl); /* CLAUDE: 1280px Standard */
    margin: 0 auto;
    padding-left: var(--pvm-container-padding);
    padding-right: var(--pvm-container-padding);
}

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

.pvm-glossar-hero {
    background: var(--pvm-gradient); /* CLAUDE: Marken-Gradient */
    padding: var(--pvm-space-2xl) 0 var(--pvm-space-xl);
    color: #ffffff;
}

.pvm-glossar-hero--category {
    padding-bottom: var(--pvm-space-lg); /* CLAUDE: Weniger Padding bei Kategorie */
}

/* CLAUDE: Breadcrumb */
.pvm-glossar-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pvm-space-xs);
    margin-bottom: var(--pvm-space-md);
    font-size: var(--pvm-font-size-sm);
}

.pvm-glossar-breadcrumb a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color var(--pvm-transition-fast);
}

.pvm-glossar-breadcrumb a:hover {
    color: #ffffff;
}

.pvm-glossar-breadcrumb__sep {
    color: rgba(255, 255, 255, 0.5);
}

.pvm-glossar-breadcrumb [aria-current="page"] {
    color: #ffffff;
}

/* CLAUDE: Hero Title - EXPLIZIT weiß für Lesbarkeit auf Gradient */
.pvm-glossar-hero__title {
    font-size: var(--pvm-font-size-3xl);
    font-weight: 700;
    margin: 0 0 var(--pvm-space-sm);
    line-height: var(--pvm-line-height-tight);
    color: #ffffff !important; /* CLAUDE: Überschreibt globale Heading-Styles */
}

.pvm-glossar-hero__subtitle {
    font-size: var(--pvm-font-size-lg);
    margin: 0 0 var(--pvm-space-lg);
    opacity: 0.9;
    max-width: 600px;
    color: rgba(255, 255, 255, 0.95) !important; /* CLAUDE: Lesbar auf Gradient */
}

.pvm-glossar-hero__count {
    font-size: var(--pvm-font-size-sm);
    opacity: 0.8;
    margin: var(--pvm-space-sm) 0 0;
}

/* ==========================================================================
   CLAUDE: Live Search
   ========================================================================== */

.pvm-glossar-search {
    max-width: 500px;
}

.pvm-glossar-search__wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.pvm-glossar-search__icon {
    position: absolute;
    left: var(--pvm-space-sm);
    color: var(--pvm-text-muted);
    pointer-events: none;
}

.pvm-glossar-search__input {
    width: 100%;
    padding: var(--pvm-space-sm) var(--pvm-space-sm);
    padding-left: calc(var(--pvm-space-sm) + 28px); /* CLAUDE: Platz fuer Icon */
    padding-right: calc(var(--pvm-space-sm) + 32px); /* CLAUDE: Platz fuer Clear */
    font-size: var(--pvm-font-size-base);
    border: 2px solid transparent;
    border-radius: var(--pvm-radius-lg);
    background: #ffffff;
    color: var(--pvm-text);
    transition: border-color var(--pvm-transition-fast), box-shadow var(--pvm-transition-fast);
}

.pvm-glossar-search__input::placeholder {
    color: var(--pvm-text-muted);
}

.pvm-glossar-search__input:focus {
    outline: none;
    border-color: var(--pvm-primary);
    box-shadow: 0 0 0 3px rgba(107, 7, 138, 0.15);
}

.pvm-glossar-search__clear {
    position: absolute;
    right: var(--pvm-space-xs);
    padding: var(--pvm-space-xs);
    background: none;
    border: none;
    color: var(--pvm-text-muted);
    cursor: pointer;
    border-radius: var(--pvm-radius-sm);
    transition: background var(--pvm-transition-fast);
}

.pvm-glossar-search__clear:hover {
    background: var(--pvm-bg-light);
}

.pvm-glossar-search__results {
    margin-top: var(--pvm-space-xs);
    font-size: var(--pvm-font-size-sm);
    color: rgba(255, 255, 255, 0.9);
}

.pvm-glossar-search__count {
    font-weight: 600;
}

/* ==========================================================================
   CLAUDE: Filter Section (A-Z + Kategorien)
   ========================================================================== */

.pvm-glossar-filters {
    background: var(--color-bg-primary);
    padding: var(--pvm-space-lg) 0;
    border-bottom: 1px solid var(--color-border-primary);
    position: sticky;
    top: var(--pvm-header-height);
    z-index: var(--pvm-z-sticky);
}

/* CLAUDE: A-Z Navigation */
.pvm-glossar-alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pvm-space-2xs);
    justify-content: center;
    margin-bottom: var(--pvm-space-md);
}

.pvm-glossar-alphabet__btn {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--pvm-space-xs);
    font-size: var(--pvm-font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--pvm-radius-md);
    cursor: pointer;
    transition: all var(--pvm-transition-fast);
}

.pvm-glossar-alphabet__btn:hover:not(:disabled) {
    background: var(--pvm-primary);
    color: #ffffff;
    border-color: var(--pvm-primary);
}

.pvm-glossar-alphabet__btn--active {
    background: var(--pvm-gradient);
    color: #ffffff;
    border-color: transparent;
}

.pvm-glossar-alphabet__btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* CLAUDE: Kategorie Filter */
.pvm-glossar-categories {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pvm-space-xs);
    justify-content: center;
}

.pvm-glossar-categories__label {
    font-size: var(--pvm-font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-right: var(--pvm-space-xs);
}

.pvm-glossar-categories__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pvm-space-xs);
}

.pvm-glossar-category-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--pvm-space-2xs);
    padding: var(--pvm-space-xs) var(--pvm-space-sm);
    font-size: var(--pvm-font-size-sm);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--pvm-radius-full);
    cursor: pointer;
    transition: all var(--pvm-transition-fast);
}

.pvm-glossar-category-btn:hover {
    border-color: var(--pvm-primary);
    color: var(--pvm-primary);
}

.pvm-glossar-category-btn--active {
    background: var(--pvm-primary);
    color: #ffffff;
    border-color: var(--pvm-primary);
}

/* CLAUDE: FIX - Aktiver Button behält weiße Schrift bei Hover */
.pvm-glossar-category-btn--active:hover {
    color: #ffffff; /* CLAUDE: Überschreibt :hover Regel */
    background: var(--pvm-primary-dark, #5a0680); /* CLAUDE: Etwas dunkler bei Hover */
    border-color: var(--pvm-primary-dark, #5a0680);
}

.pvm-glossar-category-btn__count {
    font-size: var(--pvm-font-size-xs);
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--pvm-radius-full);
}

.pvm-glossar-category-btn--active .pvm-glossar-category-btn__count {
    background: rgba(255, 255, 255, 0.2);
}

/* CLAUDE: Kategorie Dropdown (fuer Kategorie-Seite) */
.pvm-glossar-category-select {
    margin-top: var(--pvm-space-md);
}

.pvm-glossar-category-select__dropdown {
    padding: var(--pvm-space-xs) var(--pvm-space-sm);
    font-size: var(--pvm-font-size-base);
    color: var(--pvm-text);
    background: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--pvm-radius-md);
    cursor: pointer;
}

/* ==========================================================================
   CLAUDE: Content Section
   ========================================================================== */

.pvm-glossar-content {
    padding: var(--pvm-space-xl) 0;
    background: var(--color-bg-primary);
}

.pvm-glossar-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--pvm-space-lg);
}

.pvm-glossar-info__count {
    font-size: var(--pvm-font-size-sm);
    color: var(--color-text-secondary);
}

/* ==========================================================================
   CLAUDE: Glossar Grid
   ========================================================================== */

.pvm-glossar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--pvm-space-md);
}

.pvm-glossar-grid--small {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--pvm-space-sm);
}

/* ==========================================================================
   CLAUDE: Glossar Card
   ========================================================================== */

.pvm-glossar-card {
    position: relative;
    display: flex;
    gap: var(--pvm-space-sm);
    padding: var(--pvm-space-md);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--pvm-radius-lg);
    transition: all var(--pvm-transition-base);
    overflow: hidden;
    cursor: pointer; /* CLAUDE: Zeigt an, dass Card klickbar ist */
}

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

/* CLAUDE: Buchstaben-Badge */
.pvm-glossar-card__letter {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--pvm-font-size-xl);
    font-weight: 700;
    color: #ffffff;
    background: var(--pvm-gradient);
    border-radius: var(--pvm-radius-md);
}

/* CLAUDE: Card Content */
.pvm-glossar-card__content {
    flex: 1;
    min-width: 0; /* CLAUDE: Verhindert Overflow bei langen Texten */
}

.pvm-glossar-card__title {
    margin: 0 0 var(--pvm-space-2xs);
    font-size: var(--pvm-font-size-base);
    font-weight: 600;
    line-height: var(--pvm-line-height-tight);
}

.pvm-glossar-card__title a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--pvm-transition-fast);
}

/* CLAUDE: Stretched-Link - macht gesamte Card klickbar */
.pvm-glossar-card__link::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1; /* CLAUDE: Über allen anderen Elementen außer Category-Link */
}

.pvm-glossar-card:hover .pvm-glossar-card__title a {
    color: var(--pvm-primary);
}

/* CLAUDE: Category-Link über stretched-link für separate Klickbarkeit */
.pvm-glossar-card__category {
    position: relative;
    z-index: 2; /* CLAUDE: Über dem stretched-link */
}

.pvm-glossar-card__english {
    margin: 0 0 var(--pvm-space-xs);
    font-size: var(--pvm-font-size-sm);
    color: var(--color-text-secondary);
    font-style: italic;
}

.pvm-glossar-card__excerpt {
    margin: 0;
    font-size: var(--pvm-font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--pvm-line-height-base);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CLAUDE: Card Meta */
.pvm-glossar-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pvm-space-xs);
    margin-top: var(--pvm-space-sm);
}

.pvm-glossar-card__category {
    font-size: var(--pvm-font-size-xs);
    padding: 2px 8px;
    color: var(--pvm-primary);
    background: rgba(107, 7, 138, 0.1);
    border-radius: var(--pvm-radius-full);
    text-decoration: none;
    transition: background var(--pvm-transition-fast);
}

.pvm-glossar-card__category:hover {
    background: rgba(107, 7, 138, 0.2);
}

.pvm-glossar-card__difficulty {
    font-size: var(--pvm-font-size-xs);
    padding: 2px 8px;
    border-radius: var(--pvm-radius-full);
}

.pvm-glossar-card__difficulty--beginner {
    color: #166534;
    background: #dcfce7;
}

.pvm-glossar-card__difficulty--intermediate {
    color: #854d0e;
    background: #fef9c3;
}

.pvm-glossar-card__difficulty--expert {
    color: #991b1b;
    background: #fee2e2;
}

/* CLAUDE: Card Arrow */
.pvm-glossar-card__arrow {
    position: absolute;
    right: var(--pvm-space-sm);
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    opacity: 0;
    color: var(--pvm-primary);
    transition: all var(--pvm-transition-base);
}

.pvm-glossar-card:hover .pvm-glossar-card__arrow {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ==========================================================================
   CLAUDE: Single Page Styles
   ========================================================================== */

.pvm-glossar-single {
    background: var(--color-bg-primary);
}

.pvm-glossar-single__breadcrumb {
    padding-top: var(--pvm-space-lg);
    padding-bottom: var(--pvm-space-md);
}

.pvm-glossar-single__article {
    padding-bottom: var(--pvm-space-2xl);
}

/* CLAUDE: Single Header */
.pvm-glossar-single__header {
    display: flex;
    gap: var(--pvm-space-md);
    align-items: flex-start;
    margin-bottom: var(--pvm-space-lg);
    padding-bottom: var(--pvm-space-lg);
    border-bottom: 1px solid var(--color-border-primary);
}

.pvm-glossar-single__letter {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--pvm-font-size-2xl);
    font-weight: 700;
    color: #ffffff;
    background: var(--pvm-gradient);
    border-radius: var(--pvm-radius-lg);
}

.pvm-glossar-single__title {
    margin: 0 0 var(--pvm-space-xs);
    font-size: var(--pvm-font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: var(--pvm-line-height-tight);
}

.pvm-glossar-single__english {
    margin: 0;
    font-size: var(--pvm-font-size-lg);
    color: var(--color-text-secondary);
    font-style: italic;
}

/* CLAUDE: Single Meta */
.pvm-glossar-single__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pvm-space-sm);
    align-items: center;
    margin-bottom: var(--pvm-space-lg);
}

.pvm-glossar-single__category {
    display: inline-block;
    padding: var(--pvm-space-xs) var(--pvm-space-sm);
    font-size: var(--pvm-font-size-sm);
    color: #ffffff;
    background: var(--pvm-gradient);
    border-radius: var(--pvm-radius-full);
    text-decoration: none;
    transition: opacity var(--pvm-transition-fast);
}

.pvm-glossar-single__category:hover {
    opacity: 0.9;
}

.pvm-glossar-single__difficulty {
    display: inline-block;
    padding: var(--pvm-space-xs) var(--pvm-space-sm);
    font-size: var(--pvm-font-size-sm);
    border-radius: var(--pvm-radius-full);
}

.pvm-glossar-single__difficulty--beginner {
    color: #166534;
    background: #dcfce7;
}

.pvm-glossar-single__difficulty--intermediate {
    color: #854d0e;
    background: #fef9c3;
}

.pvm-glossar-single__difficulty--expert {
    color: #991b1b;
    background: #fee2e2;
}

.pvm-glossar-single__date {
    display: flex;
    align-items: center;
    gap: var(--pvm-space-2xs);
    font-size: var(--pvm-font-size-sm);
    color: var(--color-text-secondary);
}

/* CLAUDE: Synonyme */
.pvm-glossar-single__synonyme {
    padding: var(--pvm-space-sm);
    margin-bottom: var(--pvm-space-lg);
    background: var(--color-bg-secondary);
    border-radius: var(--pvm-radius-md);
    font-size: var(--pvm-font-size-sm);
    color: var(--color-text-secondary);
}

.pvm-glossar-single__synonyme strong {
    color: var(--color-text-primary);
}

/* CLAUDE: Content */
.pvm-glossar-single__content {
    font-size: var(--pvm-font-size-base);
    line-height: var(--pvm-line-height-loose);
    color: var(--color-text-primary);
}

.pvm-glossar-single__content h2 {
    font-size: var(--pvm-font-size-xl);
    margin-top: var(--pvm-space-xl);
    margin-bottom: var(--pvm-space-md);
}

.pvm-glossar-single__content h3 {
    font-size: var(--pvm-font-size-lg);
    margin-top: var(--pvm-space-lg);
    margin-bottom: var(--pvm-space-sm);
}

.pvm-glossar-single__content p {
    margin-bottom: var(--pvm-space-md);
}

.pvm-glossar-single__content ul,
.pvm-glossar-single__content ol {
    margin-bottom: var(--pvm-space-md);
    padding-left: var(--pvm-space-lg);
}

.pvm-glossar-single__content li {
    margin-bottom: var(--pvm-space-xs);
}

/* CLAUDE: Service Links */
.pvm-glossar-single__services {
    margin-top: var(--pvm-space-xl);
    padding: var(--pvm-space-lg);
    background: var(--color-bg-secondary);
    border-radius: var(--pvm-radius-lg);
}

.pvm-glossar-single__services h2 {
    margin: 0 0 var(--pvm-space-md);
    font-size: var(--pvm-font-size-lg);
}

.pvm-glossar-single__services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pvm-space-sm);
}

.pvm-glossar-single__service-link {
    display: inline-flex;
    align-items: center;
    gap: var(--pvm-space-xs);
    padding: var(--pvm-space-sm) var(--pvm-space-md);
    color: var(--pvm-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--pvm-radius-md);
    text-decoration: none;
    transition: all var(--pvm-transition-fast);
}

.pvm-glossar-single__service-link:hover {
    background: var(--pvm-gradient);
    color: #ffffff;
    border-color: transparent;
}

.pvm-glossar-single__service-link:hover svg {
    transform: translateX(3px);
}

.pvm-glossar-single__service-link svg {
    transition: transform var(--pvm-transition-fast);
}

/* CLAUDE: Share Buttons - Verbessertes Design */
.pvm-glossar-single__share {
    display: flex;
    align-items: center;
    gap: var(--pvm-space-md);
    margin-top: var(--pvm-space-xl);
    padding-top: var(--pvm-space-lg);
    border-top: 1px solid var(--color-border-primary);
}

.pvm-glossar-single__share-label {
    font-size: var(--pvm-font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.pvm-glossar-single__share-buttons {
    display: flex;
    gap: var(--pvm-space-sm);
}

.pvm-glossar-single__share-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    background: var(--color-bg-primary);
    border: 2px solid var(--color-border-primary);
    border-radius: var(--pvm-radius-lg);
    cursor: pointer;
    transition: all var(--pvm-transition-fast);
    text-decoration: none;
}

.pvm-glossar-single__share-btn:hover {
    color: #ffffff;
    background: var(--pvm-primary);
    border-color: var(--pvm-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 7, 138, 0.25);
}

/* CLAUDE: LinkedIn spezifische Hover-Farbe */
.pvm-glossar-single__share-btn[aria-label*="LinkedIn"]:hover {
    background: #0A66C2;
    border-color: #0A66C2;
    box-shadow: 0 4px 12px rgba(10, 102, 194, 0.25);
}

/* CLAUDE: X (Twitter) spezifische Hover-Farbe */
.pvm-glossar-single__share-btn[aria-label*="X"]:hover {
    background: #000000;
    border-color: #000000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* CLAUDE: Copy-Button Erfolgs-Animation */
.pvm-glossar-single__share-btn--copied {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

/* CLAUDE: Focus-Styles für Barrierefreiheit */
.pvm-glossar-single__share-btn:focus-visible {
    outline: 2px solid var(--pvm-primary);
    outline-offset: 2px;
}

/* CLAUDE: Navigation */
.pvm-glossar-single__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pvm-space-md);
    padding: var(--pvm-space-lg) var(--pvm-container-padding);
    border-top: 1px solid var(--color-border-primary);
    border-bottom: 1px solid var(--color-border-primary);
}

.pvm-glossar-single__nav-link {
    display: flex;
    flex-direction: column;
    gap: var(--pvm-space-2xs);
    padding: var(--pvm-space-md);
    background: var(--color-bg-secondary);
    border-radius: var(--pvm-radius-lg);
    text-decoration: none;
    transition: all var(--pvm-transition-fast);
}

.pvm-glossar-single__nav-link:hover {
    background: var(--pvm-gradient);
}

.pvm-glossar-single__nav-link:hover .pvm-glossar-single__nav-label,
.pvm-glossar-single__nav-link:hover .pvm-glossar-single__nav-title {
    color: #ffffff;
}

.pvm-glossar-single__nav-link:hover svg {
    color: #ffffff;
}

.pvm-glossar-single__nav-link--prev {
    align-items: flex-start;
}

.pvm-glossar-single__nav-link--prev svg {
    order: -1;
}

.pvm-glossar-single__nav-link--next {
    align-items: flex-end;
    text-align: right;
}

.pvm-glossar-single__nav-label {
    font-size: var(--pvm-font-size-sm);
    color: var(--color-text-secondary);
}

.pvm-glossar-single__nav-title {
    font-size: var(--pvm-font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

/* CLAUDE: Related Section */
.pvm-glossar-single__related {
    padding: var(--pvm-space-xl) var(--pvm-container-padding);
}

.pvm-glossar-single__related h2 {
    margin: 0 0 var(--pvm-space-lg);
    font-size: var(--pvm-font-size-xl);
}

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

.pvm-glossar-cta {
    padding: var(--pvm-space-2xl) 0;
    background: var(--color-bg-secondary);
}

.pvm-glossar-cta__inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.pvm-glossar-cta__inner h2 {
    margin: 0 0 var(--pvm-space-sm);
    font-size: var(--pvm-font-size-xl);
}

.pvm-glossar-cta__inner p {
    margin: 0 0 var(--pvm-space-lg);
    color: var(--color-text-secondary);
}

/* CLAUDE: CTA Button */
.pvm-glossar-cta .pvm-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--pvm-space-xs);
    padding: var(--pvm-space-sm) var(--pvm-space-lg);
    font-size: var(--pvm-font-size-base);
    font-weight: 600;
    color: #ffffff;
    background: var(--pvm-gradient);
    border: none;
    border-radius: var(--pvm-radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--pvm-transition-fast);
}

.pvm-glossar-cta .pvm-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--pvm-shadow-primary);
}

/* ==========================================================================
   CLAUDE: Pagination
   ========================================================================== */

.pvm-glossar-pagination {
    margin-top: var(--pvm-space-xl);
}

.pvm-glossar-pagination ul {
    display: flex;
    justify-content: center;
    gap: var(--pvm-space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pvm-glossar-pagination li {
    margin: 0;
}

.pvm-glossar-pagination a,
.pvm-glossar-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--pvm-space-sm);
    font-size: var(--pvm-font-size-sm);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--pvm-radius-md);
    text-decoration: none;
    transition: all var(--pvm-transition-fast);
}

.pvm-glossar-pagination a:hover {
    border-color: var(--pvm-primary);
    color: var(--pvm-primary);
}

.pvm-glossar-pagination .current {
    background: var(--pvm-gradient);
    color: #ffffff;
    border-color: transparent;
    cursor: default; /* CLAUDE: Zeigt an dass aktive Seite nicht klickbar ist */
}

/* CLAUDE: FIX - Hover-Effekt für aktuelle Seite (subtile Animation) */
.pvm-glossar-pagination .current:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(107, 7, 138, 0.3);
}

/* CLAUDE: Prev/Next mit Text */
.pvm-glossar-pagination .prev,
.pvm-glossar-pagination .next {
    gap: var(--pvm-space-xs);
    padding: 0 var(--pvm-space-md);
}

/* CLAUDE: FIX - Reset für innere span/svg Elemente in Prev/Next Links */
/* CLAUDE: Die allgemeine span-Regel greift fälschlich auf innere spans */
.pvm-glossar-pagination .prev span,
.pvm-glossar-pagination .next span {
    border: none;
    background: transparent;
    min-width: auto;
    height: auto;
    padding: 0;
    display: inline;
}

/* ==========================================================================
   CLAUDE: Back Link
   ========================================================================== */

.pvm-glossar-back {
    padding: var(--pvm-space-lg) var(--pvm-container-padding);
}

.pvm-glossar-back__link {
    display: inline-flex;
    align-items: center;
    gap: var(--pvm-space-xs);
    font-size: var(--pvm-font-size-sm);
    color: var(--pvm-primary);
    text-decoration: none;
    transition: color var(--pvm-transition-fast);
}

.pvm-glossar-back__link:hover {
    color: var(--pvm-primary-dark);
}

/* ==========================================================================
   CLAUDE: Empty State
   ========================================================================== */

.pvm-glossar-empty {
    grid-column: 1 / -1;
    padding: var(--pvm-space-2xl);
    text-align: center;
    color: var(--color-text-secondary);
}

/* ==========================================================================
   CLAUDE: Loading State für AJAX-Filter
   ========================================================================== */

.pvm-glossar-grid--loading {
    position: relative;
    min-height: 200px;
}

.pvm-glossar-grid--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid var(--pvm-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: pvm-spin 0.8s linear infinite;
}

@keyframes pvm-spin {
    to { transform: rotate(360deg); }
}

/* CLAUDE: No Results State */
.pvm-glossar-no-results {
    grid-column: 1 / -1;
    padding: var(--pvm-space-2xl);
    text-align: center;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-radius: var(--pvm-radius-lg);
}

/* ==========================================================================
   CLAUDE: Dark Mode - Theme Attribut (data-theme="dark")
   CLAUDE: Nutzt primär data-theme statt prefers-color-scheme
   ========================================================================== */

/* CLAUDE: Hero bleibt im Dark Mode gleich - Gradient mit weißem Text */
html[data-theme="dark"] .pvm-glossar-hero,
html:not([data-theme="light"]) .pvm-glossar-hero {
    background: var(--pvm-gradient); /* CLAUDE: Gradient bleibt */
}

html[data-theme="dark"] .pvm-glossar-hero__title,
html:not([data-theme="light"]) .pvm-glossar-hero__title {
    color: #ffffff !important;
}

html[data-theme="dark"] .pvm-glossar-hero__subtitle,
html:not([data-theme="light"]) .pvm-glossar-hero__subtitle {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* CLAUDE: Page Background */
html[data-theme="dark"] .pvm-glossar-page,
html[data-theme="dark"] .pvm-glossar-single {
    background: var(--pvm-dark-bg, #0f0f0f);
}

/* CLAUDE: Filter Section */
html[data-theme="dark"] .pvm-glossar-filters {
    background: var(--pvm-dark-surface, #1a1a1a);
    border-color: var(--pvm-dark-border, #333);
}

/* CLAUDE: Content Area */
html[data-theme="dark"] .pvm-glossar-content {
    background: var(--pvm-dark-bg, #0f0f0f);
}

/* CLAUDE: Cards */
html[data-theme="dark"] .pvm-glossar-card {
    background: var(--pvm-dark-surface, #1a1a1a);
    border-color: var(--pvm-dark-border, #333);
}

html[data-theme="dark"] .pvm-glossar-card:hover {
    border-color: var(--pvm-primary-dark-mode, #a855f7);
}

html[data-theme="dark"] .pvm-glossar-card__title a {
    color: var(--pvm-dark-text, #f5f5f5);
}

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

html[data-theme="dark"] .pvm-glossar-card__english,
html[data-theme="dark"] .pvm-glossar-card__excerpt {
    color: var(--pvm-dark-text-muted, #a0a0a0);
}

html[data-theme="dark"] .pvm-glossar-card__category {
    color: var(--pvm-primary-dark-mode, #a855f7);
    background: rgba(168, 85, 247, 0.15);
}

/* CLAUDE: Difficulty Tags - Dark Mode angepasste Farben */
/* CLAUDE: Hohe Spezifität um globale Dark Mode Regeln zu überschreiben */
html[data-theme="dark"] .pvm-glossar-card .pvm-glossar-card__difficulty--beginner {
    color: #4ade80 !important; /* CLAUDE: Helles Grün für gute Lesbarkeit */
    background: rgba(74, 222, 128, 0.15) !important;
}

html[data-theme="dark"] .pvm-glossar-card .pvm-glossar-card__difficulty--intermediate {
    color: #fbbf24 !important; /* CLAUDE: Helles Gelb/Amber */
    background: rgba(251, 191, 36, 0.15) !important;
}

html[data-theme="dark"] .pvm-glossar-card .pvm-glossar-card__difficulty--expert {
    color: #f87171 !important; /* CLAUDE: Helles Rot */
    background: rgba(248, 113, 113, 0.15) !important;
}

/* CLAUDE: Single Article */
html[data-theme="dark"] .pvm-glossar-single__article {
    color: var(--pvm-dark-text, #f5f5f5);
}

html[data-theme="dark"] .pvm-glossar-single__title {
    color: var(--pvm-dark-text, #f5f5f5);
}

html[data-theme="dark"] .pvm-glossar-single__content {
    color: var(--pvm-dark-text, #f5f5f5);
}

html[data-theme="dark"] .pvm-glossar-single__content h2,
html[data-theme="dark"] .pvm-glossar-single__content h3 {
    color: var(--pvm-dark-text, #f5f5f5);
}

/* CLAUDE: CTA Section */
html[data-theme="dark"] .pvm-glossar-cta {
    background: var(--pvm-dark-surface, #1a1a1a);
}

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

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

/* CLAUDE: Filter Buttons */
html[data-theme="dark"] .pvm-glossar-alphabet__btn {
    background: var(--pvm-dark-surface, #1a1a1a);
    border-color: var(--pvm-dark-border, #333);
    color: var(--pvm-dark-text, #f5f5f5);
}

html[data-theme="dark"] .pvm-glossar-alphabet__btn:hover:not(:disabled) {
    background: var(--pvm-primary-dark-mode, #a855f7);
    color: #ffffff;
    border-color: var(--pvm-primary-dark-mode, #a855f7);
}

html[data-theme="dark"] .pvm-glossar-alphabet__btn--active {
    background: var(--pvm-gradient);
    color: #ffffff;
    border-color: transparent;
}

html[data-theme="dark"] .pvm-glossar-category-btn {
    background: var(--pvm-dark-surface, #1a1a1a);
    border-color: var(--pvm-dark-border, #333);
    color: var(--pvm-dark-text, #f5f5f5);
}

html[data-theme="dark"] .pvm-glossar-category-btn:hover {
    border-color: var(--pvm-primary-dark-mode, #a855f7);
    color: var(--pvm-primary-dark-mode, #a855f7);
}

html[data-theme="dark"] .pvm-glossar-category-btn--active {
    background: var(--pvm-primary-dark-mode, #a855f7);
    color: #ffffff;
    border-color: var(--pvm-primary-dark-mode, #a855f7);
}

/* CLAUDE: FIX - Aktiver Button behält weiße Schrift bei Hover (Dark Mode) */
html[data-theme="dark"] .pvm-glossar-category-btn--active:hover {
    color: #ffffff;
    background: #9333ea; /* CLAUDE: Etwas helleres Lila bei Hover */
    border-color: #9333ea;
}

/* CLAUDE: Search Input */
html[data-theme="dark"] .pvm-glossar-search__input {
    background: var(--pvm-dark-surface, #1a1a1a);
    border-color: var(--pvm-dark-border, #333);
    color: var(--pvm-dark-text, #f5f5f5);
}

html[data-theme="dark"] .pvm-glossar-search__input::placeholder {
    color: var(--pvm-dark-text-muted, #a0a0a0);
}

html[data-theme="dark"] .pvm-glossar-search__input:focus {
    border-color: var(--pvm-primary-dark-mode, #a855f7);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

/* CLAUDE: Pagination */
html[data-theme="dark"] .pvm-glossar-pagination a,
html[data-theme="dark"] .pvm-glossar-pagination span {
    background: var(--pvm-dark-surface, #1a1a1a);
    border-color: var(--pvm-dark-border, #333);
    color: var(--pvm-dark-text, #f5f5f5);
}

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

/* CLAUDE: FIX - Weiter/Zurück Button im Dark Mode ohne sichtbaren Rand */
/* CLAUDE: border: none statt border-color: transparent um Rendering-Artefakte zu vermeiden */
html[data-theme="dark"] .pvm-glossar-pagination .prev,
html[data-theme="dark"] .pvm-glossar-pagination .next {
    border: none;
    background: var(--pvm-dark-surface, #1a1a1a);
    outline: none; /* CLAUDE: Entfernt Browser-Default-Outline */
}

html[data-theme="dark"] .pvm-glossar-pagination .prev:hover,
html[data-theme="dark"] .pvm-glossar-pagination .next:hover {
    border: 1px solid var(--pvm-primary-dark-mode, #a855f7);
    background: rgba(168, 85, 247, 0.1);
}

/* CLAUDE: Focus-State für Barrierefreiheit - Custom-Ring statt Browser-Default */
html[data-theme="dark"] .pvm-glossar-pagination .prev:focus-visible,
html[data-theme="dark"] .pvm-glossar-pagination .next:focus-visible {
    outline: 2px solid var(--pvm-primary-dark-mode, #a855f7);
    outline-offset: 2px;
}

/* CLAUDE: Info Count */
html[data-theme="dark"] .pvm-glossar-info__count {
    color: var(--pvm-dark-text-muted, #a0a0a0);
}

/* CLAUDE: Empty/No Results */
html[data-theme="dark"] .pvm-glossar-empty,
html[data-theme="dark"] .pvm-glossar-no-results {
    color: var(--pvm-dark-text-muted, #a0a0a0);
    background: var(--pvm-dark-surface, #1a1a1a);
}

/* CLAUDE: Navigation Links (Single) */
html[data-theme="dark"] .pvm-glossar-single__nav-link {
    background: var(--pvm-dark-surface, #1a1a1a);
}

html[data-theme="dark"] .pvm-glossar-single__nav-label {
    color: var(--pvm-dark-text-muted, #a0a0a0);
}

html[data-theme="dark"] .pvm-glossar-single__nav-title {
    color: var(--pvm-dark-text, #f5f5f5);
}

/* CLAUDE: Share Buttons */
html[data-theme="dark"] .pvm-glossar-single__share-btn {
    background: var(--pvm-dark-surface, #1a1a1a);
    border-color: var(--pvm-dark-border, #333);
    color: var(--pvm-dark-text-muted, #a0a0a0);
}

html[data-theme="dark"] .pvm-glossar-single__share-btn:hover {
    color: var(--pvm-primary-dark-mode, #a855f7);
    border-color: var(--pvm-primary-dark-mode, #a855f7);
}

/* CLAUDE: Single Page Difficulty Tags - Dark Mode */
/* CLAUDE: Hohe Spezifität um globale Regeln zu überschreiben */
html[data-theme="dark"] .pvm-glossar-single__difficulty--beginner {
    color: #4ade80 !important; /* CLAUDE: Helles Grün */
    background: rgba(74, 222, 128, 0.15) !important;
}

html[data-theme="dark"] .pvm-glossar-single__difficulty--intermediate {
    color: #fbbf24 !important; /* CLAUDE: Helles Gelb/Amber */
    background: rgba(251, 191, 36, 0.15) !important;
}

html[data-theme="dark"] .pvm-glossar-single__difficulty--expert {
    color: #f87171 !important; /* CLAUDE: Helles Rot */
    background: rgba(248, 113, 113, 0.15) !important;
}

/* CLAUDE: Synonyme-Box Dark Mode */
html[data-theme="dark"] .pvm-glossar-single__synonyme {
    background: var(--pvm-dark-surface, #1a1a1a);
    color: var(--pvm-dark-text-muted, #a0a0a0);
}

html[data-theme="dark"] .pvm-glossar-single__synonyme strong {
    color: var(--pvm-dark-text, #f5f5f5);
}

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

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

html[data-theme="dark"] .pvm-glossar-single__service-link {
    background: var(--pvm-dark-bg, #0f0f0f);
    border-color: var(--pvm-dark-border, #333);
    color: var(--pvm-primary-dark-mode, #a855f7);
}

/* CLAUDE: Date Dark Mode */
html[data-theme="dark"] .pvm-glossar-single__date {
    color: var(--pvm-dark-text-muted, #a0a0a0);
}

/* CLAUDE: Fallback für prefers-color-scheme */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pvm-glossar-page,
    html:not([data-theme="light"]) .pvm-glossar-single {
        background: var(--pvm-dark-bg, #0f0f0f);
    }

    html:not([data-theme="light"]) .pvm-glossar-filters {
        background: var(--pvm-dark-surface, #1a1a1a);
        border-color: var(--pvm-dark-border, #333);
    }

    html:not([data-theme="light"]) .pvm-glossar-content {
        background: var(--pvm-dark-bg, #0f0f0f);
    }

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

    html:not([data-theme="light"]) .pvm-glossar-card:hover {
        border-color: var(--pvm-primary-dark-mode, #a855f7);
    }

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

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

    html:not([data-theme="light"]) .pvm-glossar-card__category {
        color: var(--pvm-primary-dark-mode, #a855f7);
        background: rgba(168, 85, 247, 0.15);
    }

    /* CLAUDE: Difficulty Tags Fallback - Hohe Spezifität */
    html:not([data-theme="light"]) .pvm-glossar-card .pvm-glossar-card__difficulty--beginner {
        color: #4ade80 !important;
        background: rgba(74, 222, 128, 0.15) !important;
    }

    html:not([data-theme="light"]) .pvm-glossar-card .pvm-glossar-card__difficulty--intermediate {
        color: #fbbf24 !important;
        background: rgba(251, 191, 36, 0.15) !important;
    }

    html:not([data-theme="light"]) .pvm-glossar-card .pvm-glossar-card__difficulty--expert {
        color: #f87171 !important;
        background: rgba(248, 113, 113, 0.15) !important;
    }

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

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

    html:not([data-theme="light"]) .pvm-glossar-alphabet__btn {
        background: var(--pvm-dark-surface, #1a1a1a);
        border-color: var(--pvm-dark-border, #333);
        color: var(--pvm-dark-text, #f5f5f5);
    }

    html:not([data-theme="light"]) .pvm-glossar-category-btn {
        background: var(--pvm-dark-surface, #1a1a1a);
        border-color: var(--pvm-dark-border, #333);
        color: var(--pvm-dark-text, #f5f5f5);
    }

    /* CLAUDE: FIX - Aktiver Button Hover Fallback */
    html:not([data-theme="light"]) .pvm-glossar-category-btn--active {
        background: var(--pvm-primary-dark-mode, #a855f7);
        color: #ffffff;
        border-color: var(--pvm-primary-dark-mode, #a855f7);
    }

    html:not([data-theme="light"]) .pvm-glossar-category-btn--active:hover {
        color: #ffffff;
        background: #9333ea;
        border-color: #9333ea;
    }

    html:not([data-theme="light"]) .pvm-glossar-search__input {
        background: var(--pvm-dark-surface, #1a1a1a);
        border-color: var(--pvm-dark-border, #333);
        color: var(--pvm-dark-text, #f5f5f5);
    }

    /* CLAUDE: Single Page Difficulty Tags Fallback */
    html:not([data-theme="light"]) .pvm-glossar-single__difficulty--beginner {
        color: #4ade80 !important;
        background: rgba(74, 222, 128, 0.15) !important;
    }

    html:not([data-theme="light"]) .pvm-glossar-single__difficulty--intermediate {
        color: #fbbf24 !important;
        background: rgba(251, 191, 36, 0.15) !important;
    }

    html:not([data-theme="light"]) .pvm-glossar-single__difficulty--expert {
        color: #f87171 !important;
        background: rgba(248, 113, 113, 0.15) !important;
    }

    /* CLAUDE: Synonyme, Services und Date Fallback */
    html:not([data-theme="light"]) .pvm-glossar-single__synonyme {
        background: var(--pvm-dark-surface, #1a1a1a);
        color: var(--pvm-dark-text-muted, #a0a0a0);
    }

    html:not([data-theme="light"]) .pvm-glossar-single__synonyme strong {
        color: var(--pvm-dark-text, #f5f5f5);
    }

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

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

    /* CLAUDE: Share Buttons Fallback */
    html:not([data-theme="light"]) .pvm-glossar-single__share-btn {
        background: var(--pvm-dark-surface, #1a1a1a);
        border-color: var(--pvm-dark-border, #333);
        color: var(--pvm-dark-text-muted, #a0a0a0);
    }
}

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

/* CLAUDE: Tablet */
@media (max-width: 1024px) {
    .pvm-glossar-hero {
        padding: var(--pvm-space-xl) 0;
    }

    .pvm-glossar-single__header {
        flex-direction: column;
    }

    .pvm-glossar-single__letter {
        width: 64px;
        height: 64px;
        font-size: var(--pvm-font-size-xl);
    }
}

/* CLAUDE: Mobile */
@media (max-width: 640px) {
    .pvm-glossar-hero__title {
        font-size: var(--pvm-font-size-2xl);
    }

    .pvm-glossar-grid {
        grid-template-columns: 1fr;
    }

    .pvm-glossar-alphabet {
        gap: 2px;
    }

    .pvm-glossar-alphabet__btn {
        min-width: 32px;
        height: 32px;
        font-size: var(--pvm-font-size-xs);
    }

    .pvm-glossar-single__nav {
        grid-template-columns: 1fr;
    }

    .pvm-glossar-single__nav-link--next {
        align-items: flex-start;
        text-align: left;
    }

    .pvm-glossar-card {
        flex-direction: column;
    }

    .pvm-glossar-card__arrow {
        display: none;
    }
}

/* ==========================================================================
   CLAUDE: Glossar Widget fuer Landingpages
   CLAUDE: Wiederverwendbare Sektion mit verwandten Begriffen
   ========================================================================== */

.pvm-glossar-widget {
    padding: var(--pvm-space-2xl) 0;
    background: var(--pvm-bg-subtle);
}

/* CLAUDE: Dark Mode */
[data-theme="dark"] .pvm-glossar-widget {
    background: var(--pvm-bg-elevated);
}

.pvm-glossar-widget__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--pvm-space-md);
    margin-bottom: var(--pvm-space-xl);
}

.pvm-glossar-widget__title {
    font-size: var(--pvm-font-size-2xl);
    font-weight: 700;
    margin: 0;
    color: var(--pvm-text-primary);
}

.pvm-glossar-widget__link {
    display: inline-flex;
    align-items: center;
    gap: var(--pvm-space-xs);
    color: var(--pvm-primary);
    font-weight: 600;
    text-decoration: none;
    transition: gap var(--pvm-transition-fast), color var(--pvm-transition-fast);
}

.pvm-glossar-widget__link:hover {
    gap: var(--pvm-space-sm);
    color: var(--pvm-primary-dark);
}

.pvm-glossar-widget__link svg {
    transition: transform var(--pvm-transition-fast);
}

.pvm-glossar-widget__link:hover svg {
    transform: translateX(4px);
}

/* CLAUDE: Cards Grid Layout */
.pvm-glossar-widget__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pvm-space-lg);
}

.pvm-glossar-widget__card {
    display: flex;
    flex-direction: column;
    background: var(--pvm-bg-primary);
    border-radius: var(--pvm-radius-lg);
    padding: var(--pvm-space-lg);
    text-decoration: none;
    transition: transform var(--pvm-transition-fast), box-shadow var(--pvm-transition-fast);
    border: 1px solid var(--pvm-border-light);
    position: relative;
}

.pvm-glossar-widget__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pvm-shadow-lg);
}

.pvm-glossar-widget__card-title {
    font-size: var(--pvm-font-size-lg);
    font-weight: 700;
    color: var(--pvm-text-primary);
    margin: 0 0 var(--pvm-space-xs);
    line-height: var(--pvm-line-height-tight);
}

.pvm-glossar-widget__card:hover .pvm-glossar-widget__card-title {
    color: var(--pvm-primary);
}

.pvm-glossar-widget__card-english {
    display: block;
    font-size: var(--pvm-font-size-sm);
    color: var(--pvm-text-muted);
    margin-bottom: var(--pvm-space-sm);
    font-style: italic;
}

.pvm-glossar-widget__card-excerpt {
    font-size: var(--pvm-font-size-sm);
    color: var(--pvm-text-secondary);
    margin: 0;
    flex-grow: 1;
    line-height: var(--pvm-line-height-relaxed);
}

.pvm-glossar-widget__card-arrow {
    position: absolute;
    bottom: var(--pvm-space-md);
    right: var(--pvm-space-md);
    color: var(--pvm-primary);
    font-size: var(--pvm-font-size-lg);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--pvm-transition-fast), transform var(--pvm-transition-fast);
}

.pvm-glossar-widget__card:hover .pvm-glossar-widget__card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* CLAUDE: List Layout */
.pvm-glossar-widget__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pvm-space-sm) var(--pvm-space-lg);
}

.pvm-glossar-widget__list-item a {
    display: inline-flex;
    align-items: center;
    gap: var(--pvm-space-xs);
    padding: var(--pvm-space-xs) var(--pvm-space-md);
    background: var(--pvm-bg-primary);
    border: 1px solid var(--pvm-border-light);
    border-radius: var(--pvm-radius-full);
    color: var(--pvm-text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--pvm-transition-fast);
}

.pvm-glossar-widget__list-item a:hover {
    background: var(--pvm-primary);
    border-color: var(--pvm-primary);
    color: #ffffff;
}

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

@media (max-width: 640px) {
    .pvm-glossar-widget__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pvm-glossar-widget__grid {
        grid-template-columns: 1fr;
    }

    .pvm-glossar-widget__title {
        font-size: var(--pvm-font-size-xl);
    }
}