feat: filter panel + english category keys

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ulas Kalayci
2026-04-20 09:50:55 +02:00
parent b867917995
commit aae895d704
7 changed files with 291 additions and 53 deletions
+93
View File
@@ -150,6 +150,99 @@
line-height: 1;
}
/* Filter-Toggle-Button */
.filter-toggle-btn {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
white-space: nowrap;
cursor: pointer;
border: 1.5px solid var(--color-border);
background-color: var(--color-surface);
color: var(--color-text-secondary);
transition: all var(--transition-fast);
min-height: 32px;
flex-shrink: 0;
}
.filter-toggle-btn:hover,
.filter-toggle-btn--open {
border-color: var(--color-text-secondary);
color: var(--color-text-primary);
}
.filter-toggle-btn--active {
border-color: var(--color-accent);
color: var(--color-accent);
}
.filter-toggle-btn__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 var(--space-1);
border-radius: var(--radius-full);
background-color: var(--color-accent);
color: var(--color-text-on-accent);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
line-height: 1;
}
/* Filter-Panel */
.filter-panel {
background-color: var(--color-surface);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.filter-panel__group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.filter-panel__label {
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.filter-panel__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.filter-panel__clear {
align-self: flex-start;
font-size: var(--text-sm);
color: var(--color-text-secondary);
text-decoration: underline;
cursor: pointer;
background: none;
border: none;
padding: 0;
margin-top: var(--space-1);
}
.filter-panel__clear:hover {
color: var(--color-text-primary);
}
/* --------------------------------------------------------
* Gruppen-Überschriften
* -------------------------------------------------------- */