/* ─────────────────────────────────────────
   DS Wahlkreis Map – Animationen
   Sequenz:
     Phase 1 (0.2 – 2.6s)  : Umriss nachzeichnen (transparenter Hintergrund)
     Phase 2 (2.8 – 4.2s)  : WK 67 leuchtet rot auf
───────────────────────────────────────── */

.ds-wk-map {
    width: 100%;
    text-align: center;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 3rem;
    font-size: 75%;
    color: #999;
}

.ds-wahlkreis-map {
    margin: 2rem auto;
    display: block;
}

.ds-wahlkreis-map__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* ── Phase 1: Umriss als Strich nachzeichnen ── */
#ds-map-outline {
    fill: transparent;
    stroke: #1a1a1a;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ds-draw-outline 2.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

@keyframes ds-draw-outline {
    to {
        stroke-dashoffset: 0;
    }
}

/* ── Phase 2: WK 67 erscheint rot ── */
#ds-map-wk67 {
    fill: transparent;
    animation: ds-wk67-appear 1.2s ease-out 2.8s forwards;
}

@keyframes ds-wk67-appear {
    0% {
        fill: transparent;
    }
    40% {
        fill: #ff2244;
    }
    100% {
        fill: #cc1928;
    }
}