.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    background: #f4f4f4;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    align-items: center;
}

.breadcrumbs a {
    text-decoration: none;
    color: #333;
    background: #e0e0e0;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.3s;
}

.breadcrumbs a:hover {
    background: #007bff;
    color: #fff;
}

.breadcrumbs .current {
    background: #007bff;
    color: #fff;
    pointer-events: none; /* nicht klickbar */
}

.breadcrumbs .divider {
    margin: 0 0.25rem;
    color: #888;
    user-select: none;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .breadcrumbs {
        background: #2c2c2c;
    }
    .breadcrumbs a {
        background: #3c3c3c;
        color: #ddd;
    }
    .breadcrumbs a:hover {
        background: #66b2ff;
        color: #fff;
    }
    .breadcrumbs .current {
        background: #66b2ff;
        color: #fff;
    }
    .breadcrumbs .divider {
        color: #aaa;
    }
}