/* Die Wichtelspur.
 *
 * Der gemeinsame Faden aller Seiten. Er kommt aus dem Produkt: im Sockel
 * der Holz-Wichtelkamera sind Fussabdruecke eingraviert, die zur Tuer
 * laufen. Auf den Seiten laufen sie weiter, von oben nach unten, in
 * Leserichtung. Die Zehen zeigen deshalb nach UNTEN, so wie jemand geht,
 * der gerade hier langgekommen ist.
 *
 * Er ersetzt den frueheren goldenen Punktfaden. Ein Faden aus Punkten
 * konnte alles Moegliche sein; eine Spur aus Fuessen kann nur eines sein,
 * und sie gehoert nur uns.
 *
 * Benutzung: das Elternteil bekommt `.spur`, seine Kinder je `.station`
 * mit `padding-left`. Die Bahnbreite steuert `--spur-bahn`.
 */

.spur{position:relative}
.spur::before{
  content:"";
  position:absolute;
  left:max(24px, calc((100vw - var(--spur-bahn, 1160px)) / 2 + 24px));
  top:0; bottom:0; width:26px;
  pointer-events:none;
  background-repeat:repeat-y;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='26' height='210'>\
<g fill='%23EFB54B' opacity='.34'>\
<ellipse cx='7' cy='18' rx='3.8' ry='5.6' transform='rotate(-12 7 18)'/>\
<circle cx='4' cy='25.4' r='1.3'/><circle cx='7.2' cy='26.5' r='1.4'/><circle cx='10.4' cy='25' r='1.3'/>\
<ellipse cx='19' cy='114' rx='3.8' ry='5.6' transform='rotate(10 19 114)'/>\
<circle cx='16.2' cy='121.4' r='1.3'/><circle cx='19.4' cy='122.5' r='1.4'/><circle cx='22.6' cy='121' r='1.3'/>\
</g></svg>");
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
}

@media(max-width:760px){
  .spur::before{left:14px}
}