/* --------------------------------------------------------------
   Berlin Bezirkskarte
   Jeder Bezirk ist eine eigene Flaeche. Fahrt die Maus irgendwo
   ueber den Bezirk, faerbt sich dessen Pin orange und zoomt leicht.
   -------------------------------------------------------------- */

.su-karte-wrap {
    --su-pin:        #1A2133;  /* Pin normal      */
    --su-pin-aktiv:  #F59E0B;  /* Pin aktiv/hover */
    --su-pin-zoom:   1.18;     /* Zoomfaktor      */

    width: 100%;
    margin-inline: auto;
    line-height: 0;
}

.su-karte {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;   /* damit der Zoom am Rand nicht abgeschnitten wird */
}

/* --- Trefferflaechen ---------------------------------------- */
/* Unsichtbar, fangen aber alle Mausereignisse fuer ihren Bezirk. */

.su-hit { fill: none; pointer-events: all; }

/* Der Pin selbst nimmt keine Ereignisse an - darunter liegt immer
   die Flaeche seines eigenen Bezirks, die den Hover uebernimmt. */
.su-pin { pointer-events: none; }

/* --- Pin ---------------------------------------------------- */

.su-pin {
    transform-box: fill-box;
    transform-origin: 50% 100%;                 /* an der Spitze verankert */
    transition: transform .28s cubic-bezier(.34, 1.4, .64, 1);
}

.su-pin-shape {
    fill: var(--su-pin);
    transition: fill .28s ease;
}

/* Verlinkte Bezirke bekommen einen Zeiger. */
a.su-bezirk { cursor: pointer; }
a.su-bezirk:focus { outline: none; }

/* Hover / Fokus / aktiver Bezirk */
.su-bezirk:hover .su-pin,
.su-bezirk:focus-visible .su-pin,
.su-bezirk.is-active .su-pin {
    transform: scale(var(--su-pin-zoom));
}

.su-bezirk:hover .su-pin-shape,
.su-bezirk:focus-visible .su-pin-shape,
.su-bezirk.is-active .su-pin-shape {
    fill: var(--su-pin-aktiv);
}

/* Sichtbarer Fokus-Rahmen fuers Pin (Tastatur), ohne Schatten */
.su-bezirk:focus-visible .su-pin-shape {
    stroke: var(--su-pin-aktiv);
    stroke-width: 3;
    paint-order: stroke;
}

/* --- Kopplung mit den Bezirks-Chips ------------------------- */
/* .is-hover wird per Script gesetzt, wenn die Maus über dem
   zugehörigen Chip steht — dieselbe Wirkung wie ein echter Hover. */

.su-bezirk.is-hover .su-pin {
    transform: scale(var(--su-pin-zoom));
}

.su-bezirk.is-hover .su-pin-shape {
    fill: var(--su-pin-aktiv);
}

/* Umgekehrt: Maus über einer Bezirksfläche hebt den Chip hervor.
   Repliziert exakt den echten Button-:hover (nur background-color,
   kein Rahmen, kein Schatten — Schatten bleibt dem .ort-aktiv-Status
   vorbehalten). */
.su-chip-hover.elementor-button,
.su-chip-hover .elementor-button {
    background-color: #F59E0B !important;
    transition: background-color .2s ease;
}

/* --- Barrierefreiheit / Motion ------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .su-pin,
    .su-pin-shape { transition: none; }
}