a, svg, path {
  transition: all 400ms ease;
}

a:hover {
  background: var(--hover-background);
}

/* xylo */

.xylo {
  --hover-background: #383838;
  background: #333;
}

.xylo path {
  transition: transform 200ms cubic-bezier(0.5, -1.2, 0.5, 2.2);
}

.xylo:hover path.y.move {
  transform: translate(-25px, -25px);
}

.xylo:hover path.l.move {
  transform: translate(25px, 25px);
}

/* felucca */

.felucca {
  /* https://coolors.co/palette/e7ecef-274c77-6096ba-a3cef1-8b8c89 */
  --hover-background: #274c77;
  background: #e7ecef;
}

.felucca path {
  --hover-fill: #e7ecef;
  fill: #274c77;
}

.felucca:hover path {
  fill: var(--hover-fill);
}

/* schlosserei */

.schlosserei {
  --hover-background: #e10000;
  background: #fff;
}

.schlosserei svg > path:first-child {
  fill: #fff;
}

.schlosserei svg > path:nth-child(2) {
  fill: #e10000;
}

.schlosserei:hover svg > path:first-child {
  fill: #e10000;
}

.schlosserei:hover svg > path:nth-child(2) {
  fill: #fff;
}

.schlosserei:hover g > path {
  fill: #fff;
}