:root {
    --lila: #7c3697;
    --violet: #5b45a7;
    --blau: #3d5eac;
    --hellblau: #1496ce;
    --grun: #62b146;
    --gelbgrun: #b9dd37;
    --gelb: #ffea3a;
    --gelborange: #ffc419;
    --dunkelorange: #ff9b1e;
    --hellrot: #ff5523;
    --rot: #ff3224;
    --dunkelrot: #c01050;
}


/* ------------- BUTTON COLOR ------------- */
#buttons a.lila:hover {
    color: var(--lila);
    border-bottom: solid 6px var(--lila);
}

#buttons a.violet:hover {
    color: var(--violet);
    border-bottom: solid 6px var(--violet);
}

#buttons a.blau:hover {
    color: var(--blau);
    border-bottom: solid 6px var(--blau);
}

#buttons a.hellblau:hover {
    color: var(--hellblau);
    border-bottom: solid 6px var(--hellblau);
}

#buttons a.grun:hover {
    color: var(--grun);
    border-bottom: solid 6px var(--grun);
}

#buttons a.gelbgrun:hover {
    color: var(--gelbgrun);
    border-bottom: solid 6px var(--gelbgrun);
}

#buttons a.gelb:hover {
    color: var(--gelb);
    border-bottom: solid 6px var(--gelb);
}

#buttons a.gelborange:hover {
    color: var(--gelborange);
    border-bottom: solid 6px var(--gelborange);
}

#buttons a.dunkelorange:hover {
    color: var(--dunkelorange);
    border-bottom: solid 6px var(--dunkelorange);
}

#buttons a.hellrot:hover {
    color: var(--hellrot);
    border-bottom: solid 6px var(--hellrot);
}

#buttons a.rot:hover {
    color: var(--rot);
    border-bottom: solid 6px var(--rot);
}

#buttons a.dunkelrot:hover {
    color: var(--dunkelrot);
    border-bottom: solid 6px var(--dunkelrot);
}

/* ------------- IMAGE COLOR ------------- */
#buttons a.lila:hover #colored-img {
    filter: invert(31%) sepia(20%) saturate(3417%) hue-rotate(250deg) brightness(85%) contrast(96%) !important;
}

#buttons a.violet:hover #colored-img {
    filter: invert(27%) sepia(30%) saturate(7000%) hue-rotate(210deg) brightness(90%) contrast(100%) !important;
}

#buttons a.blau:hover #colored-img {
    filter: invert(35%) sepia(42%) saturate(1100%) hue-rotate(187deg) brightness(70%) contrast(100%) !important;
}

#buttons a.hellblau:hover #colored-img {
    filter: invert(47%) sepia(99%) saturate(1488%) hue-rotate(164deg) brightness(88%) contrast(85%) !important;
}

#buttons a.grun:hover #colored-img {
    filter: invert(35%) sepia(7%) saturate(6394%) hue-rotate(60deg) brightness(81%) contrast(63%) !important;
}

#buttons a.gelbgrun:hover #colored-img {
    filter: invert(15%) sepia(8%) saturate(3544%) hue-rotate(22deg) brightness(102%) contrast(86%) !important;
}

#buttons a.gelb:hover #colored-img {
    filter: invert(20%) sepia(15%) saturate(7000%) hue-rotate(355deg) brightness(130%) contrast(65%) !important;
}

#buttons a.gelborange:hover #colored-img {
    filter: invert(20%) sepia(40%) saturate(2104%) hue-rotate(340deg) brightness(104%) contrast(106%) !important;
}

#buttons a.dunkelorange:hover #colored-img {
    filter: invert(78%) sepia(50%) saturate(3839%) hue-rotate(390deg) brightness(200%) contrast(103%) !important;
}

#buttons a.hellrot:hover #colored-img {
    filter: invert(44%) sepia(34%) saturate(5500%) hue-rotate(340deg) brightness(100%) contrast(110%) !important;
}

#buttons a.rot:hover #colored-img {
    filter: invert(45%) sepia(79%) saturate(6470%) hue-rotate(344deg) brightness(100%) contrast(110%) !important;
}

#buttons a.dunkelrot:hover #colored-img {
    filter: invert(80%) sepia(64%) saturate(5207%) hue-rotate(328deg) brightness(76%) contrast(98%) !important;
}

/* ------------- DROPDOWNS COLOR------------- */
.dropdown-content.lila a:hover {
    background-color: var(--lila);
}

.dropdown-content.violet a:hover {
    background-color: var(--violet);
}

.dropdown-content.blau a:hover {
    background-color: var(--blau);
}

.dropdown-content.hellblau a:hover {
    background-color: var(--hellblau);
}

.dropdown-content.grun a:hover {
    background-color: var(--grun);
}

.dropdown-content.gelbgrun a:hover {
    background-color: var(--gelbgrun);
}

.dropdown-content.gelb a:hover {
    background-color: var(--gelb);
}

.dropdown-content.gelborange a:hover {
    background-color: var(--gelborange);
}

.dropdown-content.dunkelorange a:hover {
    background-color: var(--dunkelorange);
}

.dropdown-content.hellrot a:hover {
    background-color: var(--hellrot);
}

.dropdown-content.rot a:hover {
    background-color: var(--rot);
}

.dropdown-content.dunkelrot a:hover {
    background-color: var(--dunkelrot);
}