.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser {

    --button-ring-width: 5px;
    --button-ring-offset: 5px;

    --color-category-climate: #4363d8;
    --color-category-building: #ff3e75;
    --color-category-education: #911eb4;
    --color-category-renewables: #00dbd0;
    --color-category-greens: #3cb44b;
    --color-category-zerowaste: #f58231;
    --color-category-traffic: #ffbc00;
    --color-category-misc: #cc2323;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
        
    grid-gap: 1vw;
    grid-gap: 0.2vw; /* Platz sparen */

    border: 2px solid transparent; /* Platzhalter für error */
    
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser:has(input#Category.error) {
    border: 2px solid red;
}


.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
       
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item button {
    background-color: transparent;
        
    
    /*width: 3vw;*/
    width: 2.5vw;
    /*min-width: 60px;*/
    min-width: 50px;


    aspect-ratio: 1;        
    
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    
    border-radius: 50%;
    cursor: pointer;
    
    margin-top: calc(var(--button-ring-offset) + var(--button-ring-width));
    margin-bottom: calc(var(--button-ring-offset) + var(--button-ring-width));

    outline-width: var(--button-ring-width);
    outline-style: solid;
    outline-offset: var(--button-ring-offset); 
    outline-color: transparent;

    transform: scale(1);
    transition: transform 0.5s;

    -webkit-tap-highlight-color: transparent;
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item button:focus{
       
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item button.active{     
          
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item button:hover {    
    transform: scale(1.3);    
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item button:hover:focus {    
    transform: scale(1.0);    
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item button.active:hover {    
    transform: scale(1);
}
        
.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item button img {
    width: 100%;
    aspect-ratio: 1;
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item button.climate{
    
    background-color: var(--color-category-climate);
    &.active{ outline-color: var(--color-category-climate); }
    &:focus { outline-color: var(--color-category-climate); }
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item button.building{
    background-color: var(--color-category-building);
    &.active{ outline-color: var(--color-category-building); }
    &:focus { outline-color: var(--color-category-building); }
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item button.education{
    background-color: var(--color-category-education);
    &.active{ outline-color: var(--color-category-education); }
    &:focus { outline-color: var(--color-category-education); }
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item button.renewables{
    background-color: var(--color-category-renewables);
    &.active{ outline-color: var(--color-category-renewables); }
    &:focus{ outline-color: var(--color-category-renewables); }
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item button.greens{
    background-color: var(--color-category-greens);
    &.active{ outline-color: var(--color-category-greens); }
    &:focus{ outline-color: var(--color-category-greens); }
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item button.zerowaste{
    background-color: var(--color-category-zerowaste);
    &.active{ outline-color: var(--color-category-zerowaste); }
    &:focus{ outline-color: var(--color-category-zerowaste); }
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item button.traffic{
    background-color: var(--color-category-traffic);
    &.active{ outline-color: var(--color-category-traffic); }
    &:focus{ outline-color: var(--color-category-traffic); }
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item button.misc{
    background-color: var(--color-category-misc);
    &.active{ outline-color: var(--color-category-misc); }
    &:focus{ outline-color: var(--color-category-misc); }
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .item span.caption {
    font-size: 1em;
    text-align: center;
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .explanations {
    grid-column-end: span 4;
    
    display: grid;
    /*grid-template-columns: 1fr;*/
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .explanations > div {
    grid-row-start: 1;
    grid-column-start: 1;
        
    opacity: 1;
    transition: opacity 0.5s;

}



.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .explanations > div.hidden {
    visibility: hidden;
    opacity: 0;
}


@media (max-width: 62em) {
    .epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser {
       
        grid-template-columns: repeat(3, 1fr);
    }

    .epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .explanations {
        grid-column-end: span 3;        
    }
}

@media (max-width: 42em) {
    .epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser {
       
        grid-template-columns: repeat(2, 1fr);
    }

    .epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .explanations {
        grid-column-end: span 2;
       
    }
}

.epresto.ideaMap main epresto-pager#epgCreateView epresto-page .categoryChooser .explanations p {
    font-size: 1em;
    margin-top: 0.4em;
}