:root {
    --color-available: #bce03880;
    --color-available-stroke: #BDE038;

    --color-taken: #96969680;
    --color-taken-stroke: #969696;
    
    --color-selected: #e0d73880;
    --color-selected-stroke: #E0D738;

}


.hk_stand {
    fill: var(--color-available);
    stroke: var(--color-available-stroke);
    stroke-width: 1;
    cursor: pointer;

    transition: all 0.3s ease;
}

.hk_stand[data-stand-status="taken"] {
    fill: var(--color-taken);
    stroke: var(--color-taken-stroke);
    cursor: not-allowed;
    pointer-events: none;
}

.hk_stand:hover {
    fill: var(--color-selected);
    stroke: var(--color-selected-stroke);
}

.hk_stand.is-selected {
    fill: var(--color-selected);
    stroke: var(--color-selected-stroke);
        filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
}

.hk_stand:focus { 
        outline: none; 
}


/*---------- Liste ----------*/

.hk_standplan-map__stands__list__item {
    background: var(--color-available);
}

.hk_standplan-map__stands__list__item[data-stand-status="taken"] {
    background: var(--color-taken);
}

.hk_standplan-map__stands__list__item.is-selected {
    background: var(--color-selected);
}

.hk_standplan-map__stands__list{
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

.hk_standplan-map__stands__list__item{
    padding: 20px;
    border-radius: 10px;
    width: calc(12.5% - 10px);
}