/*----------------------*/
/*-------CONTENT--------*/
/*----------------------*/


table {
  border-collapse: separate;
  border-spacing: 3vw 3vw; /* Abstand zwischen den Zellen */
  width: 70%;
  margin: auto;
}

.middle {
  background-color: lightgray;
  width: 5px;
}

.cell {
  position: relative; /* wichtig für absolute Positionierung der Kreise */
  width: 30vw;
  background-color: rgb(150, 150, 150);
  border: 0.5vw solid rgb(94, 94, 94);
  border-radius: 5%;
  padding: 1vw;
  font-size: 2vw;
  line-height: 2vw;
  transition: 0.2s;

  border-top-right-radius: 0;
}

/* Hover-Effekt */
.cell:hover {
  background-color: rgb(114, 114, 114);
}

/* Kreis für linke Spalte */
.cell::after {
  content: "";
  position: absolute;
  top: -0.45vw;
  right: -1vw;      /* leicht links außerhalb */
  width: 1vw;
  height: 1.2vw;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  background-color: rgb(94, 94, 94); /* Farbe des Kreises */
  
}

/* Kreis für rechte Spalte */
.right::after {
  content: "";
  position: absolute;
  top: -0.45vw;
  left: -1vw;      /* leicht links außerhalb */
  width: 1vw;
  height: 1.2vw;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  background-color: rgb(94, 94, 94); /* Farbe des Kreises */
}

.right {
  border-top-left-radius: 0;
}


ul {
  position: relative;
  left: 80px;
}

h2 {
  line-height: 3vw;
}

h3 {
  font-weight: normal;
}