main{
  background: url("jobauswahl_hell.png");
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
  
  min-height: 50dvh;
}

table{
  border-collapse: separate;
  overflow: hidden;
  border-spacing: 1rem;
  max-width: 15cm;
  border-collapse: unset !important;
  margin: 0 !important;
  box-shadow:none !important;
}

table a {
  text-decoration: none;
  color: var(--text-dark);
}

table td{
  line-height: 2rem;
  border: solid var(--table-border) 3px;
  border-radius: 5px;
  padding: 0.5rem;
  background-color: var(--table-zebra);
}

table td:hover{
  border-color: var(--h1-dark);
  background-color: var(--table-zebra);
  position: relative;
  top: 2px;
  left: 2px;
  box-shadow: black 2px 5px 10px;
}

table td:hover a{color: var(--h1-dark);}

table td .arrow_container{
  float: right;
  padding-left: 1cm;
  /* position: relative; */
  animation-iteration-count: 4;
  animation-duration: .5s;
  animation-direction: alternate;
  animation-timing-function: ease-out;
}

table td .arrow_container *{transition: color 0s;}

table td:hover .arrow_container{
  animation-name: point;
}

table td .arrow{
  position: relative;
  width: 30px;
  height: 2px;
  background-color: var(--table-border);
  transform-origin: right center;
  vertical-align: middle;
  display: inline-block;
}

table td .arrow::before, table td .arrow::after, .touch::before, .touch::after{
  display: none;
  content: "";
  background: white;
  width: 10px;
  height: 2px;
  transform-origin: 100% center;
  position: relative;
  left: 65%;
  transition: transform 1s;
}

table td:hover .arrow::before, table td:hover .arrow::after, .touch::before, .touch::after{display: block !important;}
table td:hover .arrow, table td:hover .arrow::before, table td:hover .arrow::after{background: var(--btn-primary);}
table td:hover .arrow::before, .touch::before{transform: rotate(45deg);top: 0px;}
table td:hover .arrow::after, .touch::after{transform: rotate(-45deg); top: -2px;}

@keyframes point {
  from {
    transform: translate(0,0);
  }
  to {
    transform: translate(5px,0);
  }
}