:root {
    --color-available: #00000040;
    --color-available-stroke: transparent;
    --color-taken: transparent;
    --color-taken-stroke: transparent;
    --color-selected: #bce03880;
    --color-selected-stroke: #BDE038;
    --color-aussteller: #D5EACE;
    --color-poster: #395B62;
}

.dsp-description span {
    padding: 2px 5px;
    border-radius: 6px;

}
.dsp-description .as {
    background-color: var(--color-aussteller);
    color:#000;
}

.dsp-description .ps {
    background-color: var(--color-poster);
    color: #fff;

}

.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);
    border: 4px solid transparent;
    transition: all 0.25s ease;
}

.hk_standplan-map__stands__list__item[data-stand-status="taken"] {
    background: #E9E5E2;
}

.dsp-admin .hk_standplan-map__stands__list__item:hover,
.hk_standplan-map__stands__list__item.is-selected {
    background: var(--color-selected);
    border-color: var(--color-selected-stroke);
}

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

.hk_standplan-map__stands__list__item{
    padding: 10px;
    border-radius: 10px;
    width: calc(20% - 10px);
    display: flex;
    gap: 20px;
    cursor: pointer;
}

.hk_standplan-map__stands__list__item__name {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-family: neue-haas-grotesk-text, Arial, Helvetica, sans-serif;
    font-size: 15px;
    color:#000;
}

.hk_standplan-map__stands__list__item__name span:first-child{
    font-weight: 700;
}

.hk_standplan-map__stands__list__item .hk-item-action::after{
    content: "auswählen";
}

.hk_standplan-map__stands__list__item[data-stand-status="taken"] .hk-item-action::after{
    content: "belegt";
}

.hk_standplan-map__stands__list__item.is-selected .hk-item-action::after{
    content: "gewählt";
}

@media only screen and (max-width: 768px) {
    .hk_standplan-map__stands__list__item{
        width: calc(50% - 10px);
    }

    .hk_standplan-map__svg {
        width: 125%;
        transform: translateX(-6%);
    }
}

@media only screen and (max-width: 425px) {
    .hk_standplan-map__stands__list__item{
        width: 100%;
    }

    .hk_standplan-map__svg {
        width: 150%;
        transform: translateX(-12%);
    }
}

/*---------- Accordion ----------*/
.hk_standplan-accordion .accordion-content {
    display: none;
    margin-top: 0.5em;
}

.accordion-toggle {
    padding: 14px;
    border-radius: 10px;
    width: 100%;
    font-family: neue-haas-grotesk-text, Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: left;
}

.accordion-toggle, .accordion-toggle[is-active="Stand"] {
    background: transparent;
    border: 1px solid #313131;
    color: #313131;
}

.accordion-toggle[is-active="Ausstellerstand"] {
    background: var(--color-aussteller);
    border: none;
    color: #000;
}

.accordion-toggle[is-active="Posterstand"] {
    background: var(--color-poster);
    border: none;
    color: #fff;
}



@media only screen and (min-width: 767px) {
    .hk_standplan-accordion {
        position: absolute;
        top: 85px;
        min-width: 150px;
        border-radius: 50px;
    }

    .hk_standplan-accordion .accordion-toggle {
        border-radius: 50px;
    }
}


/*---------- Overlay ----------*/
.dsp-overlay {
    position: absolute;
    inset: -10px;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.dsp-overlay a{
    background: -webkit-linear-gradient(310deg, #E0D738 20%, #BDE038 80%);
    color: #10454f;
    font-weight: 600;
    font-size: 18px;
    padding: 20px 40px;
    margin: 30px;
    border-radius: 20px;
    border-color: transparent;
}

@media only screen and (max-width: 425px) {
    .dsp-overlay {
        inset: -40px;
    }
}