/* ==== SOS Privacy-Schalter: Verbindungslinie Panel -> Screenshot (BE-1659) ====
   Zeichnet zu jedem aufgeklappten Schalter-Panel eine Linie auf die zugehoerige
   Zeile im App-Screenshot. Nur Desktop - unter 821px stapelt .ps-layout (user.css). */

.ps-layout {
    position: relative;
    /* Linienfarbe an einer Stelle. #c9d2dd ist der Ton der inaktiven Schalter-Pille.
       Gemessener Kontrast auf dem Weg der Linie (Karte, weisser Spalt, Kartenrand):
       #c9d2dd 1,53:1 gegen weiss - bewusst zurueckhaltend; deutlicher waeren
       #8ea3b8 (2,60:1) oder #336699, der Ton des aktiven Schalters (6,00:1). */
    --ps-conn-color: #c9d2dd;
}

.ps-layout .ps-conn {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: visible; z-index: 3;
}
.ps-layout .ps-conn-item { opacity: 0; transition: opacity .25s ease; }
.ps-layout .ps-conn-item.is-on { opacity: 1; }
.ps-layout .ps-conn line   { stroke: var(--ps-conn-color, #c9d2dd); stroke-linecap: round; }
.ps-layout .ps-conn circle { fill: var(--ps-conn-color, #c9d2dd); }

@media (max-width: 820px) {
    .ps-layout .ps-conn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ps-layout .ps-conn-item { transition: none; }
}