/* ==============================================
   PROJEKTE PAGE (Elegantes, vereinheitlichtes System)
   ============================================== */

/* Status Filter Buttons - Einheitliches elegantes Design */
.filter-status {
    background: transparent;
    border: 1px solid var(--border-color);
    font-weight: 600;
    transition: all var(--transition-fast);
    color: var(--text-muted);
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    line-height: 1.2;
    border-radius: var(--brutal-radius);
    text-transform: none !important;
    /* Force mixed case as per user request */
    letter-spacing: normal;
}

.filter-status:hover {
    background: var(--color-yellow);
    border-color: var(--border-color);
    color: var(--color-text-on-yellow);
}

/* Alle Status-Varianten nutzen das gleiche Grunddesign */
.status-all,
.status-neu,
.status-planung,
.status-laeuft,
.status-abgeschlossen {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

/* Aktiver Zustand: Dunkel & elegant (Neutral but Yellow Active) */
.status-all.active,
.status-neu.active,
.status-planung.active,
.status-laeuft.active,
.status-abgeschlossen.active {
    background: var(--color-yellow);
    color: var(--color-text-on-yellow);
    border-color: var(--border-color);
}



/* Project Type Badges - Dezenter & einheitlicher */
.project-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--brutal-radius);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    /* Einheitliches dezentes Design */
    background: var(--bg-surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

/* Typ-Varianten: Nur ein subtiler farbiger Akzent links */
.type-idee,
.type-diskussion,
.type-initiative,
.type-veranstaltung,
.type-hilfsangebot {
    background: var(--bg-surface-2);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    position: relative;
    padding-left: 1rem;
}

/* Farbiger Punkt als Indikator */
.type-idee::before,
.type-diskussion::before,
.type-initiative::before,
.type-veranstaltung::before,
.type-hilfsangebot::before {
    content: '';
    position: absolute;
    left: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.type-idee::before {
    background: var(--project-type-idea-solid);
}

.type-diskussion::before {
    background: var(--status-info-solid);
}

.type-initiative::before {
    background: var(--accent-kim-solid);
}

.type-veranstaltung::before {
    background: var(--project-type-event-solid);
}

.type-hilfsangebot::before {
    background: var(--project-type-help-solid);
}



/* assets/css/pages/projects.css */

/* Status Backgrounds */
.bg-status-Neu {
    background-color: var(--project-status-new);
}

.bg-status-Idee {
    background-color: var(--project-status-new);
}

.bg-status-Planung {
    background-color: var(--project-status-planning);
}

.bg-status-Läuft {
    background-color: var(--status-info-solid);
}

/* "Läuft" might need encoding? safe to use standard chars in CSS usually, but class name with umlaut is tricky. better map status to safe key */
.bg-status-Abgeschlossen {
    background-color: var(--project-status-done);
}

/* Encoding-safe fallback: use data attribute or just clean slug */
.bg-status-laeuft {
    background-color: var(--status-info-solid);
}

/* Project Icon Circle - Einheitlich mit dezenten Farbakzenten */
.project-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    /* Einheitlicher Grundton */
    background: var(--bg-surface-2);
    color: var(--text-muted);
    transition:
        transform var(--transition-smooth),
        box-shadow var(--transition-smooth);
}

/* Hover-Effekt für Icon Circles */
.card:hover .project-icon-circle {
    transform: scale(1.05);
}

/* Typ-Varianten: Dezente Tönungen */
.circle-idee {
    background: var(--overlay-amber-10);
    color: var(--accent-marktplatz-solid);
}

.circle-diskussion {
    background: var(--overlay-blue-10);
    color: var(--project-type-discussion-text);
}

.circle-initiative {
    background: var(--overlay-emerald-10);
    color: var(--accent-kim-hover);
}

.circle-veranstaltung {
    background: var(--overlay-pink-10);
    color: var(--accent-termine-solid);
}

.circle-hilfsangebot {
    background: var(--overlay-purple-10);
    color: var(--project-type-help-text);
}



/* Status Badges - Dezent mit farbigem Akzent */
.badge-status-neu,
.badge-status-planung,
.badge-status-laeuft,
.badge-status-abgeschlossen {
    background: var(--bg-surface-2);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.75rem 0.3rem 1rem;
    position: relative;
}

/* Farbiger Punkt links als Indikator */
.badge-status-neu::before,
.badge-status-planung::before,
.badge-status-laeuft::before,
.badge-status-abgeschlossen::before {
    content: '';
    position: absolute;
    left: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.badge-status-neu::before {
    background: var(--text-placeholder);
}

.badge-status-planung::before {
    background: var(--project-status-planning);
}

.badge-status-laeuft::before {
    background: var(--status-info-solid);
}

.badge-status-abgeschlossen::before {
    background: var(--project-status-done);
}



/* Project-Form: Typ-Auswahl (Neo-Brutalism, aktiver Zustand BOLD) */
.project-type-option:has(input:checked),
.project-type-option.active {
    background: var(--color-yellow);
    border-color: var(--text-main);
    transform: translateY(-3px);
    box-shadow: 4px 4px 0 var(--text-main);
}

/* Text und Icon in aktivem Zustand weiß */
.project-type-option:has(input:checked) .project-type-label,
.project-type-option:has(input:checked) .project-type-icon,
.project-type-option.active .project-type-label,
.project-type-option.active .project-type-icon {
    color: var(--color-text-on-yellow) !important;
}

.project-type-option:hover:not(.active):not(:has(input:checked)) {
    border-color: var(--primary-color);
    background: var(--color-yellow);
    color: var(--color-text-on-yellow);
}