.tanker rect.structure {
  fill: var(--accent-color);
  stroke: #0a3d62;
  stroke-width: 2;
  animation-delay: 0.5s;
}

.tanker circle.window {
  fill: white;
  stroke: #0a3d62;
  stroke-width: 1;
  animation-delay: 1s;
}

.tanker path.smoke {
  stroke: #999;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation-delay: 1.5s;
}

.tanker path.wave {
  stroke: #2e86de;
  stroke-width: 1.5;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: waveDraw 6s ease-in-out infinite;
}

.tanker path,
.tanker rect,
.tanker circle,
.tanker line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 6s ease-in-out infinite;
  animation-fill-mode: forwards;
}

.hull {
      fill: none;
      stroke: #0a3d62;
      stroke-width: 2.5;
      stroke-dasharray: 1000; /* Wird überschrieben per JS */
      stroke-dashoffset: 1000;
      animation: draw 6s ease-in-out infinite;
}

@keyframes draw {
    0% {
    stroke-dashoffset: var(--length, 1000);
    fill-opacity: 0;
    }
    10% {
    fill-opacity: 1;
    }
    60% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    }
    100% {
    stroke-dashoffset: var(--length, 1000);
    fill-opacity: 0;
    }
}