.karte-knopf {
    appearance: none;
    font: inherit;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    cursor: pointer;
}


.karte-knopf:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}




.karte-wahl {
    display: block;
    cursor: pointer;
    position: relative;   
}


.karte-wahl-feld {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}


.karte-wahl:focus-within {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}





.karte-wahl {
    --karte-gewaehlt-rahmen: var(--color-primary);
    --karte-gewaehlt-flaeche: var(--color-primary-bg);
}

.karte-wahl:has(input:checked) {
    --karte-rahmen: var(--karte-gewaehlt-rahmen);
    --karte-flaeche: var(--karte-gewaehlt-flaeche);
    
    border-color: var(--karte-gewaehlt-rahmen);
    background: var(--karte-gewaehlt-flaeche);
}




.karte-wahl-flaeche::after {
    content: '';
    position: absolute;
    inset: 0;
}


.karte-nebenknopf {
    position: relative;
    z-index: 1;
}


.karte-wahl-gruppe {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;   
}

.karte-wahl-gruppe > legend {
    padding: 0;
}