Webklar/src/components/deutschland-karte.css

/* Deutschland-Karte (Spezifikation 7.1): ruhiger Umriss, roter Punkt auf Falkenstein */

.wk-karte {
  position: relative;
  width: 100%;
  aspect-ratio: 663 / 892;
  /* Strichstärke in viewBox-Einheiten, damit die Linie bei jeder Kartengröße etwa 1,25 px stark ist
     (Desktop: Karte ca. 0,75 px je Einheit, Handy ca. 0,43 px je Einheit) */
  --karte-strich: 1.7;
  --karte-punkt: 7px;
  /* Abstand zwischen Beschriftung und Punkt: Die tschechische Grenze (Ascher Zipfel) liegt knapp links unter dem Punkt */
  --karte-abstand: 22px;
}
@media (max-width: 899.98px) {
  .wk-karte {
    --karte-strich: 2.9;
    --karte-punkt: 10px;
    --karte-abstand: 16px;
  }
}

.wk-karte__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wk-karte__umriss path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: var(--karte-strich);
  stroke-linejoin: round;
  stroke-linecap: round;
}

.wk-karte__kern {
  fill: var(--accent);
  r: var(--karte-punkt);
  transform-box: fill-box;
  transform-origin: center;
}
/* Büro (optional, O8): hohler Punkt */
.wk-karte__punkt--buero .wk-karte__kern {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 2.4;
}
/* Der Ring ist im Grundzustand unsichtbar: ohne Bewegung gibt es ihn nicht */
.wk-karte__ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  opacity: 0;
  r: var(--karte-punkt);
  transform-box: fill-box;
  transform-origin: center;
}

/* Beschriftung als echter Text, links neben dem Punkt: dort liegt die leere Fläche innerhalb von
   Deutschland. Rechts und darunter verläuft die tschechische Grenze dicht am Punkt. */
.wk-karte__label {
  position: absolute;
  width: max-content;
  max-width: min(58%, 18rem);
  text-align: right;
  /* erste Zeile mittig auf Höhe des Punktes, rechter Rand links vom Punkt */
  transform: translate(calc(-100% - var(--karte-abstand)), -0.72em);
  pointer-events: none;
}
.wk-karte__titel {
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.wk-karte__zusatz {
  margin-top: 0.3rem;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--fg-muted);
  text-wrap: balance;
}
/* Handy: Die Karte ist klein, links vom Punkt wäre bis zur Westgrenze zu wenig Platz. Dort steht die
   Beschriftung oberhalb des Punktes, über der leeren Fläche von Thüringen und Sachsen. */
@media (max-width: 899.98px) {
  .wk-karte__label {
    transform: translate(calc(-100% + 6px), calc(-100% - 14px));
  }
}
@media (min-width: 900px) {
  .wk-karte__titel {
    font-size: 1.1875rem;
  }
  .wk-karte__zusatz {
    font-size: 0.9375rem;
    max-width: 24ch;
    margin-left: auto;
  }
}

/* ── Bewegung (nur ohne reduzierte Bewegung) ────────────────────────────────
   Ablauf: Umriss zeichnet sich in 1,6 s, danach erscheinen Punkt und Beschriftung, dann pulsiert
   ein Ring dreimal (2,4 s je Durchlauf) und bleibt dann weg. Ausnahmen laut Spezifikation 8.4.
   Der Umriss wird über stroke-dashoffset gezeichnet (pathLength="1"). Das Muster „1 2“ mit Startversatz
   1,06 lässt auch bei runden Linienenden nichts übrig, das vor dem Start als Pünktchen sichtbar wäre. */
@media (prefers-reduced-motion: no-preference) {
  .wk-karte[data-lauf="wartet"] .wk-karte__umriss path,
  .wk-karte[data-lauf="laeuft"] .wk-karte__umriss path {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1.06;
  }
  .wk-karte[data-lauf="wartet"] .wk-karte__kern,
  .wk-karte[data-lauf="wartet"] .wk-karte__label {
    opacity: 0;
  }

  .wk-karte[data-lauf="laeuft"] .wk-karte__umriss path {
    animation: wk-karte-zeichnen 1600ms var(--ease) 150ms forwards;
  }
  .wk-karte[data-lauf="laeuft"] .wk-karte__kern {
    animation: wk-karte-punkt 500ms var(--ease) 1750ms backwards;
  }
  .wk-karte[data-lauf="laeuft"] .wk-karte__label {
    animation: wk-karte-label 600ms var(--ease) 1950ms backwards;
  }
  .wk-karte[data-lauf="laeuft"] .wk-karte__ring {
    animation: wk-karte-ring 2400ms var(--ease) 2250ms 3 forwards;
  }
}

@keyframes wk-karte-zeichnen {
  from {
    stroke-dashoffset: 1.06;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes wk-karte-punkt {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes wk-karte-label {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes wk-karte-ring {
  from {
    opacity: 0.55;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.6);
  }
}