/**
 * Dynamische Iconfarben (Bootstrap Icons)
 * --icon-muted, --icon-primary, --icon-accent, --icon-hover werden in templates/header.php gesetzt.
 */

/* —— Meta, Listen, Sidebar-Hinweise (dezent) —— */
.article-meta .bi,
.article-footer-meta .bi,
.meta-listing .bi,
.sidebar-recent-card__meta .bi,
.sidebar-recent-card__thumb--empty .bi,
.card-text.text-muted .bi,
.related-card .text-muted .bi,
small.text-muted .bi,
.list-group-item .bi:not(.text-success):not(.text-danger):not(.text-warning):not(.text-info),
.article-inline-tags .bi {
    color: var(--icon-muted) !important;
    opacity: 0.92;
}

/* Artikel-Listing Meta (Startseite / Kategorien) */
.article-card .article-meta .meta-item i {
    color: var(--icon-muted) !important;
    opacity: 0.9;
}

/* —— Breadcrumb —— */
.breadcrumb .bi,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--icon-muted);
    opacity: 0.9;
}

/* —— Navigation: Standard vs. aktiv vs. Hover —— */
.main-navigation .nav-link:not(.active) .bi,
.blog-header .nav-link:not(.active) .bi {
    color: var(--icon-muted);
    opacity: 0.88;
}

.main-navigation .nav-link.active .bi,
.blog-header .nav-link.active .bi {
    color: var(--icon-accent);
    opacity: 1;
}

.main-navigation .nav-link:hover .bi,
.blog-header .nav-link:hover .bi {
    color: var(--icon-hover);
    opacity: 1;
}

/* —— Primäre / semantische Buttons: Icon folgt Button-Text —— */
.btn-primary .bi,
.btn-success .bi,
.btn-danger .bi,
.btn-warning .bi,
.btn-info .bi {
    color: currentColor;
}

.btn-outline-primary .bi {
    color: var(--icon-primary);
}

.btn-outline-primary:hover .bi {
    color: var(--icon-hover);
}

/* —— Share-Leiste —— */
.share-toolbar .bi,
.share-btn i {
    color: var(--icon-muted);
}

.share-btn:hover i {
    color: var(--icon-accent);
}

/* —— Editorial: Meta-Badge-Icons (nur Farbe; Form bleibt in editorial.css) —— */
.article-meta-badge i {
    color: var(--icon-muted) !important;
    opacity: 0.88;
}

/* —— Listen-Meta / Pagination (ohne Statusfarben) —— */
.editorial-list-meta__icon {
    color: var(--icon-accent);
    opacity: 0.88;
}

.editorial-pagination-wrap .page-link .bi {
    color: var(--icon-muted);
}

/* —— Footer: helle Icons auf dunklem Grund (nicht --icon-muted vom hellen Flächenkontext) —— */
footer .bi {
    color: color-mix(in srgb, var(--color-footer-text, #f8f9fa) 72%, transparent);
    opacity: 0.9;
}

footer a:hover .bi {
    color: var(--icon-hover);
    opacity: 1;
}

/* —— Header-Aktionen (Sprache, Portal): Icon folgt Button —— */
.blog-header .header-actions .bi,
.blog-header .header-actions .nav-action-btn .bi {
    color: currentColor;
    opacity: 0.92;
}