/*
07.04.2026

14:15 - 14:45
16:15 - 16:40
*/

:root {
  --icon-size: 100px;
  --icon-gap: 2px;
}

#services-overview {
  position: fixed;
  z-index: 1;
  right: -200px;
  top: calc(30% + 100px);
  width: 200px; /* Breite für zwei 40px Icons + Gap */
  background-color: white;
  border: 3px solid white;
  border-right: none;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  transition: all 250ms;
}

#services-overview:hover {
  right: 0;
}

#services-overview:hover button {
  background-color: #eb690b;
}

#services-overview button {
  all: unset;
  cursor: pointer;
  position: absolute;
  margin: 27px 0 0 -75px;
  padding: 6px 4px 8px 4px;
  width: 92px;
  height: 32px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  outline: var(--icon-gap) solid white;
  rotate: -90deg;
  background-color: #00519e;
  color: white;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 2px rgba(0,0,0,0.7);
  transition: background-color 1s;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, var(--icon-size));
  gap: var(--icon-gap);
}

.service-grid a {
  position: relative; /* z-index */
  background-color: #00519e;
  outline: var(--icon-gap) solid white;
  border-radius: 3px;
  transition: all 200ms;
}

.service-grid a:first-child {
  border-top-left-radius: 3px;
}

.service-grid a:nth-child(5) {
  border-bottom-left-radius: 3px;
}

.service-grid a:hover {
  z-index: 1;
  scale: 1.1;
  background-color: #eb690b;
  outline: var(--icon-gap) solid white;
  border-radius: 3px;
  /* outline-offset: 2px; */
}

.service-grid a img {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  padding: 20px;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(10deg) brightness(104%) contrast(103%);
}


@media only screen and (max-width: 767px) {

  #services-overview  {
    transform-origin: top left;
    transform: scale(.8);
    top: calc(30% + 80px);
  }

  #services-overview:hover {
    right: -36px;
  }

}