/* Erzeugt von werkzeuge/wp-sync.py aus entwurf/css/buehne.css, nicht von Hand ändern. */
/* ---------- Unabhängigkeit: Grafik ---------- */
.trennung { display: grid; justify-items: start; gap: 0; margin: 2.5rem 0 0; max-width: 26rem; }
.tr-knoten {
  padding: .9rem 1.25rem; border-radius: var(--radius-karte);
  font: 500 var(--fs-h4)/1.25 var(--f-titel); color: var(--c-navy); background: var(--c-weiss);
}
.tr-ar { min-width: 12rem; }
.tr-eca { background: var(--c-akzent); color: var(--c-weiss); }
.tr-linie { width: 2px; height: 2.75rem; margin-left: 2.5rem; background: var(--c-weiss); transform-origin: 50% 0; }
.tr-sperre {
  position: relative; width: 100%; margin: 1.6rem 0; padding-top: .9rem;
  border-top: 3px solid var(--c-akzent-hell);
  font: 600 var(--fs-small)/1.2 var(--f-text); color: var(--c-akzent-hell);
}
.tr-sperre::before { content: ""; position: absolute; left: 2.5rem; top: -1.6rem; width: 2px; height: 1.6rem; background: repeating-linear-gradient(to bottom, rgb(255 255 255 / .45) 0 4px, transparent 4px 8px); }
.tr-vorstand { background: transparent; color: #b9c7de; border: 1px dashed rgb(255 255 255 / .4); }

@media (prefers-reduced-motion: no-preference) {
  .bewegt .trennung:not(.sichtbar) .g-linie-y { transform: scaleY(0); }
  .bewegt .trennung .g-linie-y { transition: transform 1s var(--ease) .25s; }
  .bewegt .trennung:not(.sichtbar) .g-punkt { opacity: 0; transform: translateY(.6rem); }
  .bewegt .trennung:not(.sichtbar) .g-balken-x { transform: scaleX(0); }
  .bewegt .trennung .g-balken-x { transform-origin: 0 50%; }
}