body.darkmode {
  background-color: var(--clr-dark-bg);
  color: #f0f0f0;
  transition: background-color 250ms ease, color 250ms ease;
}

body.darkmode .link {transition: color 250ms ease;}

/* Elemente mit heller Fläche im Dunkelmodus */
body.darkmode .spot {
  background-color: #fff;
  transition: background-color 250ms ease;
}

body.darkmode h1 .spot,
body.darkmode h4 .spot {
  color: var(--clr-text);
  transition: all 250ms ease;
}

body.darkmode a {color: #f0f0f0;}
body.darkmode a:hover {}

/* Buttons, Filter, Texte */
body.darkmode .spottext,
body.darkmode .filter {
  background-color: var(--clr-dark-800);
  transition: background-color 250ms ease;
}

body.darkmode .filter.active {
  background-color: var(--clr-dark-primary);
  color: #fff;
  transition: all 250ms ease
}

body.darkmode .filter:hover {
  background-color: var(--clr-btn-dark-hover);
  transition: background-color 250ms ease;
}

body.darkmode .filter.active:hover {
  background-color: var(--clr-primary-hover);
  transition: background-color 250ms ease;
}

/* Separator invertiert */
body.darkmode .category-separator {
  filter: invert();
}

/* Popup */
body.darkmode .popup {
  background-color: var(--clr-dark-bg);
}

body.darkmode .popup .icon {
  filter: invert();
}

body.darkmode .popup .more-btn .btn-label {
  color: #fff;
}

body.darkmode .popup .more-btn:hover {
  color: #fff;
}

body.darkmode .play-again-btn .icon {
  filter: none;
}

body.darkmode .popup .btn:hover {
  background-color: var(--clr-btn-dark-hover);
  opacity: 1;
  transition: background-color 250ms ease, opacity 250ms ease;
}

body.darkmode .popup .play-again-btn:hover {
  opacity: 1;
  background-color: var(--clr-btn-hover);
}

/* Toggle-Icon */
#darkmode-toggle {
  float: right;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: transform 250ms ease-in-out;
}

body.darkmode #darkmode-toggle {
  transform: rotate(180deg);
}

body.darkmode #darkmode-toggle:hover {
  transform: scale(1.075) rotate(180deg);
}

body.darkmode ul li::before{
  filter: invert();
} 

#darkmode-toggle:hover {
  transform: scale(1.075);
}

/* Button-Wrapper für Toggle */
.darkmode-toggle button {
  border: none;
  background: transparent; 
}

/* Icon im Switch */
.darkmode-toggle #darkmode-switch img {
  width: 20px;
  background: transparent;
  border: none;
}