.container {
  display: grid;
  grid-template-areas: 
    "client subject"
    "realsubject proxy";
  gap: 120px;
  margin: 50px;
  width: 440px;
  background-color: #f2cc8f;
  position: relative;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.box {
  width: 100px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: black;
}

.client       { grid-area: client;       background-color: #ff6f61; }
.subject      { grid-area: subject;      background-color: #2ecc71; left: -60px; }
.proxy        { grid-area: proxy;        background-color: #3498db; left:  55px; }
.realsubject  { grid-area: realsubject;  background-color: #3498db; left: 115px; }

.line {
  position: absolute;
  height: 2px;
  width: 0;
  background-color: black;
  z-index: 1;
  transition: background-color 0.3s ease;
}

.dashed {
  border-top: 2px dashed black;
  background: none;
}

.line:not(.dashed)::after {
  content: '';
  position: absolute;
  right: 0;
  border-left: 8px solid black;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  top: -5px;
  opacity: 0;
  transition: border-left-color 0.3s ease;
}

.dashed .arrow {
  position: absolute;
  right: 0;
  top: -9px;
  width: 24px;
  height: 16px;
  opacity: 0;
  animation: show-arrow 0s linear forwards;
}

/* Linienanimationen */
.client-to-subject {
  top: 50px;
  left: 120px;
  animation: grow 1s ease-out 1s forwards;
}
.client-to-subject::after {
  animation: show-arrow 0s linear 1s forwards;
}

.proxy-to-subject {
  top: 200px;
  left: 395px;
  transform: rotate(-130deg);
  transform-origin: left;
  animation: grow-long 1s ease-out 2s forwards;
}
.proxy-to-subject .arrow {
  animation-delay: 2s;
}

.realsubject-to-subject {
  top: 200px;
  left: 185px;
  transform: rotate(-50deg);
  transform-origin: left;
  animation: grow-long 1s ease-out 2s forwards;
}
.realsubject-to-subject .arrow {
  animation-delay: 2s;
}

.proxy-to-realsubject {
  top: 230px;
  left: 355px;
  transform: rotate(180deg);
  transform-origin: left;
  animation: grow 1s ease-out 3s forwards;
}
.proxy-to-realsubject::after {
  animation: show-arrow 0s linear 3s forwards;
}

/* Animationen */
@keyframes grow {
  to { width: 120px; }
}
@keyframes grow-long {
  to { width: 160px; }
}
@keyframes show-arrow {
  to { opacity: 1; }
}

/* Hover-Effekte */
.box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.5);
}
.line:hover {
  background-color: red;
}
.dashed:hover {
  border-top: 2px dashed red;
}
.line:not(.dashed):hover::after {
  border-left-color: red;
}
.dashed:hover .arrow polygon {
  stroke: red;
}